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

package/dist/components/Accordion/Accordion.d.ts

@@ -1,7 +1,10 @@
-import { FC, ReactElement } from 'react';
+import { ReactElement } from 'react';
 import { AccordionItemProps, AccordionProps } from './types';
 export declare const AccordionItem: {
     ({ children }: AccordionItemProps): ReactElement;
     displayName: string;
 };
-export declare const Accordion: FC<AccordionProps>;
+export declare const Accordion: {
+    (props: AccordionProps): ReactElement;
+    displayName: string;
+};

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

@@ -1 +1 @@
-{"version":3,"file":"Accordion.es.js","sources":["../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { CollapsibleWrap } from '@components/CollapsibleWrap';\nimport { useAccordion, useAccordionItem } from '@react-aria/accordion';\nimport { useFocusRing } from '@react-aria/focus';\nimport { mergeProps } from '@react-aria/utils';\nimport { Item as StatelyItem } from '@react-stately/collections';\nimport { useTreeState } from '@react-stately/tree';\nimport { FOCUS_STYLE_INSET } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport React, { Children, FC, Key, KeyboardEvent, ReactElement, isValidElement, useEffect, useRef } from 'react';\nimport { AccordionHeader } from './AccordionHeader';\nimport { AccordionItemProps, AccordionProps, AriaAccordionItemProps } from './types';\n\nconst ACCORDION_ID = 'accordion';\nconst ACCORDION_ITEM_ID = 'accordion-item';\n\nconst AriaAccordionItem: FC<AriaAccordionItemProps> = ({\n    item,\n    state,\n    header,\n    padding = true,\n    divider = false,\n    headerComponent: HeaderComponent = AccordionHeader,\n}) => {\n    const { size, active, ...headerProps } = header;\n    const triggerRef = useRef<HTMLButtonElement | null>(null);\n    const { buttonProps, regionProps } = useAccordionItem({ item }, state, triggerRef);\n    const isOpen = state.expandedKeys.has(item.key);\n    const { isFocusVisible, focusProps } = useFocusRing();\n\n    return (\n        <div\n            key={item.key}\n            className={merge([isFocusVisible ? FOCUS_STYLE_INSET : '', divider && 'tw-divide-y tw-divide-black-10'])}\n        >\n            <button\n                {...mergeProps(buttonProps, focusProps)}\n                data-test-id={ACCORDION_ITEM_ID}\n                ref={triggerRef}\n                onClick={(event) => {\n                    if (header.onClick) {\n                        header.onClick();\n                    }\n\n                    if (buttonProps.onClick) {\n                        buttonProps.onClick(event);\n                    }\n                }}\n                onKeyUp={(event) => {\n                    if (header.onClick && event.key === 'Enter') {\n                        header.onClick();\n                    }\n\n                    if (buttonProps.onKeyUp) {\n                        buttonProps.onKeyUp(event);\n                    }\n                }}\n                className=\"tw-w-full focus-visible:tw-outline-none\"\n            >\n                <HeaderComponent isOpen={isOpen} size={size} {...headerProps} />\n            </button>\n            <CollapsibleWrap isOpen={isOpen} preventInitialAnimation={active}>\n                <div {...regionProps} className={merge([padding && 'tw-px-8 tw-pb-6'])}>\n                    {item.props.children?.()}\n                </div>\n            </CollapsibleWrap>\n        </div>\n    );\n};\n\nconst mapToAriaProps = (children: ReactElement<AccordionItemProps>[]) => {\n    const ariaChildren = Children.map(children, (child, index) => {\n        const { header, children } = child.props;\n\n        return (\n            <StatelyItem key={index} textValue={header.children}>\n                {children ? () => children : null}\n            </StatelyItem>\n        );\n    });\n\n    const defaultExpandedKeys = (ariaChildren\n        .map((item) => item.key)\n        .filter((key, index) => key && !!children[index]?.props.header?.active) || []) as Key[];\n\n    return { children: ariaChildren, defaultExpandedKeys };\n};\n\nconst filterValidChildren = ({ children }: AccordionProps): ReactElement<AccordionItemProps>[] =>\n    Children.toArray(children).reduce<ReactElement<AccordionItemProps>[]>((validChildren, child) => {\n        if (isValidElement(child) && !child.props.header) {\n            console.warn('Use `AccordionItem` as children of `Accordion` and set the `header` prop accordingly.');\n            return validChildren;\n        }\n\n        if (isValidElement(child)) {\n            validChildren.push(child as ReactElement<AccordionItemProps>);\n        }\n\n        return validChildren;\n    }, []);\n\nexport const AccordionItem = ({ children }: AccordionItemProps): ReactElement => <>{children}</>;\nAccordionItem.displayName = 'FondueAccordionItem';\n\nconst lastChildrenActive = (children: React.ReactNode | undefined): boolean | undefined => {\n    const childrenArray = Children.toArray(children) as { key: string; props?: { header?: { active?: boolean } } }[];\n    return childrenArray[childrenArray.length - 1]?.props?.header?.active === true;\n};\n\nexport const Accordion: FC<AccordionProps> = (props) => {\n    const { divider = true, border = true } = props;\n    const children = filterValidChildren(props);\n    const ariaProps = mapToAriaProps(children);\n\n    const ref = useRef<HTMLDivElement | null>(null);\n    const state = useTreeState<AccordionItemProps>(ariaProps);\n\n    // We need to detect the firstRender and childrenLength to not toggle any panel\n    const accordionChildren = useRef({ firstRender: true, childLength: Children.toArray(props.children).length });\n    const childrenLength = Children.toArray(props.children).length;\n    useEffect(() => {\n        /**\n         * Checks if the last child in the Array is active\n         * Only works when adding Children to end of Accordion\n         */\n        const childrenIsActive = lastChildrenActive(props.children);\n        if (\n            !!childrenIsActive &&\n            !accordionChildren.current.firstRender &&\n            Children.toArray(props.children).length > accordionChildren.current.childLength\n        ) {\n            state.toggleKey(ariaProps.defaultExpandedKeys[ariaProps.defaultExpandedKeys.length - 1]);\n        }\n        accordionChildren.current = { firstRender: false, childLength: Children.toArray(props.children).length };\n    }, [ariaProps.defaultExpandedKeys, childrenLength, props.children, state]);\n\n    const {\n        // @react-aria prevents default action for onMouseDown as implemented here: https://github.com/adobe/react-spectrum/blob/e14523fedd93ac1a4ede355aed70988af572ae74/packages/%40react-aria/selection/src/useSelectableCollection.ts#L370\n        // This makes it impossible to edit or select text in input fields inside the accordion\n        // onKeydown automatically navigates away from child elements, including dropdown menus etc.\n        // Focus should only be passed if the accordion item itself is focused\n        // eslint-disable-next-line @typescript-eslint/no-unused-vars\n        accordionProps: { onMouseDown, onKeyDown, ...accordionProps },\n        // @react-aria enable by default typeahead which result in an event fired up on keypress and select the section\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        //@ts-ignore\n    } = useAccordion({ ...ariaProps, disallowTypeAhead: true }, state, ref);\n\n    const accordionKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n        const key = (event.target as HTMLButtonElement).dataset.key;\n        const isFocused = state.selectionManager.focusedKey === key;\n        if (key && isFocused) {\n            onKeyDown && onKeyDown(event);\n        }\n    };\n\n    const propsWithModifiedKeyDown = { ...accordionProps, onKeyDown: accordionKeyDown };\n\n    return (\n        <div\n            {...propsWithModifiedKeyDown}\n            ref={ref}\n            data-test-id={ACCORDION_ID}\n            className={merge([\n                divider && 'tw-divide-y tw-divide-black-10',\n                border && 'tw-border-t tw-border-b tw-border-black-10',\n            ])}\n        >\n            {[...state.collection].map((item, index) => {\n                const { header, padding, headerComponent, divider } = children[index].props;\n                return (\n                    <AriaAccordionItem\n                        key={item.key}\n                        item={item}\n                        state={state}\n                        divider={divider}\n                        header={header}\n                        padding={padding}\n                        headerComponent={headerComponent}\n                    />\n                );\n            })}\n        </div>\n    );\n};\nAccordion.displayName = 'FondueAccordion';\n"],"names":["ACCORDION_ID","ACCORDION_ITEM_ID","AriaAccordionItem","item","state","header","padding","divider","HeaderComponent","AccordionHeader","size","active","headerProps","triggerRef","useRef","buttonProps","regionProps","useAccordionItem","isOpen","isFocusVisible","focusProps","useFocusRing","React","merge","FOCUS_STYLE_INSET","mergeProps","event","CollapsibleWrap","_b","_a","mapToAriaProps","children","ariaChildren","Children","child","index","StatelyItem","defaultExpandedKeys","key","filterValidChildren","validChildren","isValidElement","AccordionItem","lastChildrenActive","childrenArray","_c","Accordion","props","border","ariaProps","ref","useTreeState","accordionChildren","childrenLength","useEffect","onMouseDown","onKeyDown","accordionProps","useAccordion","propsWithModifiedKeyDown","isFocused","headerComponent"],"mappings":"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"}
+{"version":3,"file":"Accordion.es.js","sources":["../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { CollapsibleWrap } from '@components/CollapsibleWrap';\nimport { useAccordion, useAccordionItem } from '@react-aria/accordion';\nimport { useFocusRing } from '@react-aria/focus';\nimport { mergeProps } from '@react-aria/utils';\nimport { Item as StatelyItem } from '@react-stately/collections';\nimport { useTreeState } from '@react-stately/tree';\nimport { FOCUS_STYLE_INSET } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport React, { Children, Key, KeyboardEvent, ReactElement, isValidElement, useEffect, useRef } from 'react';\nimport { AccordionHeader } from './AccordionHeader';\nimport { AccordionItemProps, AccordionProps, AriaAccordionItemProps } from './types';\n\nconst ACCORDION_ID = 'accordion';\nconst ACCORDION_ITEM_ID = 'accordion-item';\n\nconst AriaAccordionItem = ({\n    item,\n    state,\n    header,\n    padding = true,\n    divider = false,\n    headerComponent: HeaderComponent = AccordionHeader,\n}: AriaAccordionItemProps): ReactElement => {\n    const { size, active, ...headerProps } = header;\n    const triggerRef = useRef<HTMLButtonElement | null>(null);\n    const { buttonProps, regionProps } = useAccordionItem({ item }, state, triggerRef);\n    const isOpen = state.expandedKeys.has(item.key);\n    const { isFocusVisible, focusProps } = useFocusRing();\n\n    return (\n        <div\n            key={item.key}\n            className={merge([isFocusVisible ? FOCUS_STYLE_INSET : '', divider && 'tw-divide-y tw-divide-black-10'])}\n        >\n            <button\n                {...mergeProps(buttonProps, focusProps)}\n                data-test-id={ACCORDION_ITEM_ID}\n                ref={triggerRef}\n                onClick={(event) => {\n                    if (header.onClick) {\n                        header.onClick();\n                    }\n\n                    if (buttonProps.onClick) {\n                        buttonProps.onClick(event);\n                    }\n                }}\n                onKeyUp={(event) => {\n                    if (header.onClick && event.key === 'Enter') {\n                        header.onClick();\n                    }\n\n                    if (buttonProps.onKeyUp) {\n                        buttonProps.onKeyUp(event);\n                    }\n                }}\n                className=\"tw-w-full focus-visible:tw-outline-none\"\n            >\n                <HeaderComponent isOpen={isOpen} size={size} {...headerProps} />\n            </button>\n            <CollapsibleWrap isOpen={isOpen} preventInitialAnimation={active}>\n                <div {...regionProps} className={merge([padding && 'tw-px-8 tw-pb-6'])}>\n                    {item.props.children?.()}\n                </div>\n            </CollapsibleWrap>\n        </div>\n    );\n};\n\nconst mapToAriaProps = (children: ReactElement<AccordionItemProps>[]) => {\n    const ariaChildren = Children.map(children, (child, index) => {\n        const { header, children } = child.props;\n\n        return (\n            <StatelyItem key={index} textValue={header.children}>\n                {children ? () => children : null}\n            </StatelyItem>\n        );\n    });\n\n    const defaultExpandedKeys = (ariaChildren\n        .map((item) => item.key)\n        .filter((key, index) => key && !!children[index]?.props.header?.active) || []) as Key[];\n\n    return { children: ariaChildren, defaultExpandedKeys };\n};\n\nconst filterValidChildren = ({ children }: AccordionProps): ReactElement<AccordionItemProps>[] =>\n    Children.toArray(children).reduce<ReactElement<AccordionItemProps>[]>((validChildren, child) => {\n        if (isValidElement(child) && !child.props.header) {\n            console.warn('Use `AccordionItem` as children of `Accordion` and set the `header` prop accordingly.');\n            return validChildren;\n        }\n\n        if (isValidElement(child)) {\n            validChildren.push(child as ReactElement<AccordionItemProps>);\n        }\n\n        return validChildren;\n    }, []);\n\nexport const AccordionItem = ({ children }: AccordionItemProps): ReactElement => <>{children}</>;\nAccordionItem.displayName = 'FondueAccordionItem';\n\nconst lastChildrenActive = (children: React.ReactNode | undefined): boolean | undefined => {\n    const childrenArray = Children.toArray(children) as { key: string; props?: { header?: { active?: boolean } } }[];\n    return childrenArray[childrenArray.length - 1]?.props?.header?.active === true;\n};\n\nexport const Accordion = (props: AccordionProps): ReactElement => {\n    const { divider = true, border = true } = props;\n    const children = filterValidChildren(props);\n    const ariaProps = mapToAriaProps(children);\n\n    const ref = useRef<HTMLDivElement | null>(null);\n    const state = useTreeState<AccordionItemProps>(ariaProps);\n\n    // We need to detect the firstRender and childrenLength to not toggle any panel\n    const accordionChildren = useRef({ firstRender: true, childLength: Children.toArray(props.children).length });\n    const childrenLength = Children.toArray(props.children).length;\n    useEffect(() => {\n        /**\n         * Checks if the last child in the Array is active\n         * Only works when adding Children to end of Accordion\n         */\n        const childrenIsActive = lastChildrenActive(props.children);\n        if (\n            !!childrenIsActive &&\n            !accordionChildren.current.firstRender &&\n            Children.toArray(props.children).length > accordionChildren.current.childLength\n        ) {\n            state.toggleKey(ariaProps.defaultExpandedKeys[ariaProps.defaultExpandedKeys.length - 1]);\n        }\n        accordionChildren.current = { firstRender: false, childLength: Children.toArray(props.children).length };\n    }, [ariaProps.defaultExpandedKeys, childrenLength, props.children, state]);\n\n    const {\n        // @react-aria prevents default action for onMouseDown as implemented here: https://github.com/adobe/react-spectrum/blob/e14523fedd93ac1a4ede355aed70988af572ae74/packages/%40react-aria/selection/src/useSelectableCollection.ts#L370\n        // This makes it impossible to edit or select text in input fields inside the accordion\n        // onKeydown automatically navigates away from child elements, including dropdown menus etc.\n        // Focus should only be passed if the accordion item itself is focused\n        // eslint-disable-next-line @typescript-eslint/no-unused-vars\n        accordionProps: { onMouseDown, onKeyDown, ...accordionProps },\n        // @react-aria enable by default typeahead which result in an event fired up on keypress and select the section\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        //@ts-ignore\n    } = useAccordion({ ...ariaProps, disallowTypeAhead: true }, state, ref);\n\n    const accordionKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n        const key = (event.target as HTMLButtonElement).dataset.key;\n        const isFocused = state.selectionManager.focusedKey === key;\n        if (key && isFocused) {\n            onKeyDown && onKeyDown(event);\n        }\n    };\n\n    const propsWithModifiedKeyDown = { ...accordionProps, onKeyDown: accordionKeyDown };\n\n    return (\n        <div\n            {...propsWithModifiedKeyDown}\n            ref={ref}\n            data-test-id={ACCORDION_ID}\n            className={merge([\n                divider && 'tw-divide-y tw-divide-black-10',\n                border && 'tw-border-t tw-border-b tw-border-black-10',\n            ])}\n        >\n            {[...state.collection].map((item, index) => {\n                const { header, padding, headerComponent, divider } = children[index].props;\n                return (\n                    <AriaAccordionItem\n                        key={item.key}\n                        item={item}\n                        state={state}\n                        divider={divider}\n                        header={header}\n                        padding={padding}\n                        headerComponent={headerComponent}\n                    />\n                );\n            })}\n        </div>\n    );\n};\nAccordion.displayName = 'FondueAccordion';\n"],"names":["ACCORDION_ID","ACCORDION_ITEM_ID","AriaAccordionItem","item","state","header","padding","divider","HeaderComponent","AccordionHeader","size","active","headerProps","triggerRef","useRef","buttonProps","regionProps","useAccordionItem","isOpen","isFocusVisible","focusProps","useFocusRing","React","merge","FOCUS_STYLE_INSET","mergeProps","event","CollapsibleWrap","_b","_a","mapToAriaProps","children","ariaChildren","Children","child","index","StatelyItem","defaultExpandedKeys","key","filterValidChildren","validChildren","isValidElement","AccordionItem","lastChildrenActive","childrenArray","_c","Accordion","props","border","ariaProps","ref","useTreeState","accordionChildren","childrenLength","useEffect","onMouseDown","onKeyDown","accordionProps","useAccordion","propsWithModifiedKeyDown","isFocused","headerComponent"],"mappings":";;;;;;;;;;AAcA,MAAMA,IAAe,aACfC,IAAoB,kBAEpBC,IAAoB,CAAC;AAAA,EACvB,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,SAAAC,IAAU;AAAA,EACV,iBAAiBC,IAAkBC;AACvC,MAA4C;;AACxC,QAAM,EAAE,MAAAC,GAAM,QAAAC,GAAQ,GAAGC,MAAgBP,GACnCQ,IAAaC,EAAiC,IAAI,GAClD,EAAE,aAAAC,GAAa,aAAAC,MAAgBC,EAAiB,EAAE,MAAAd,EAAQ,GAAAC,GAAOS,CAAU,GAC3EK,IAASd,EAAM,aAAa,IAAID,EAAK,GAAG,GACxC,EAAE,gBAAAgB,GAAgB,YAAAC,EAAW,IAAIC,EAAa;AAGhD,SAAA,gBAAAC,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAKnB,EAAK;AAAA,MACV,WAAWoB,EAAM,CAACJ,IAAiBK,IAAoB,IAAIjB,KAAW,gCAAgC,CAAC;AAAA,IAAA;AAAA,IAEvG,gBAAAe,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACI,GAAGG,EAAWV,GAAaK,CAAU;AAAA,QACtC,gBAAcnB;AAAA,QACd,KAAKY;AAAA,QACL,SAAS,CAACa,MAAU;AAChB,UAAIrB,EAAO,WACPA,EAAO,QAAQ,GAGfU,EAAY,WACZA,EAAY,QAAQW,CAAK;AAAA,QAEjC;AAAA,QACA,SAAS,CAACA,MAAU;AAChB,UAAIrB,EAAO,WAAWqB,EAAM,QAAQ,WAChCrB,EAAO,QAAQ,GAGfU,EAAY,WACZA,EAAY,QAAQW,CAAK;AAAA,QAEjC;AAAA,QACA,WAAU;AAAA,MAAA;AAAA,MAET,gBAAAJ,EAAA,cAAAd,GAAA,EAAgB,QAAAU,GAAgB,MAAAR,GAAa,GAAGE,GAAa;AAAA,IAClE;AAAA,IACA,gBAAAU,EAAA,cAACK,KAAgB,QAAAT,GAAgB,yBAAyBP,KACrD,gBAAAW,EAAA,cAAA,OAAA,EAAK,GAAGN,GAAa,WAAWO,EAAM,CAACjB,KAAW,iBAAiB,CAAC,EAAA,IAChEsB,KAAAC,IAAA1B,EAAK,OAAM,aAAX,gBAAAyB,EAAA,KAAAC,EACL,CACJ;AAAA,EAAA;AAGZ,GAEMC,IAAiB,CAACC,MAAiD;AACrE,QAAMC,IAAeC,EAAS,IAAIF,GAAU,CAACG,GAAOC,MAAU;AAC1D,UAAM,EAAE,QAAA9B,GAAQ,UAAA0B,EAAAA,IAAaG,EAAM;AAG/B,WAAA,gBAAAZ,EAAA,cAACc,GAAY,EAAA,KAAKD,GAAO,WAAW9B,EAAO,SACtC0B,GAAAA,IAAW,MAAMA,IAAW,IACjC;AAAA,EAAA,CAEP,GAEKM,IAAuBL,EACxB,IAAI,CAAC7B,MAASA,EAAK,GAAG,EACtB,OAAO,CAACmC,GAAKH;;AAAU,WAAAG,KAAO,CAAC,GAACV,KAAAC,IAAAE,EAASI,CAAK,MAAd,gBAAAN,EAAiB,MAAM,WAAvB,QAAAD,EAA+B;AAAA,GAAM,KAAK;AAExE,SAAA,EAAE,UAAUI,GAAc,qBAAAK;AACrC,GAEME,IAAsB,CAAC,EAAE,UAAAR,EAC3B,MAAAE,EAAS,QAAQF,CAAQ,EAAE,OAA2C,CAACS,GAAeN,MAC9EO,EAAeP,CAAK,KAAK,CAACA,EAAM,MAAM,UACtC,QAAQ,KAAK,uFAAuF,GAC7FM,MAGPC,EAAeP,CAAK,KACpBM,EAAc,KAAKN,CAAyC,GAGzDM,IACR,CAAE,CAAA,GAEIE,IAAgB,CAAC,EAAE,UAAAX,EAAS,wDAA2CA,CAAS;AAC7FW,EAAc,cAAc;AAE5B,MAAMC,IAAqB,CAACZ,MAA+D;;AACjF,QAAAa,IAAgBX,EAAS,QAAQF,CAAQ;AAC/C,WAAOc,KAAAjB,KAAAC,IAAAe,EAAcA,EAAc,SAAS,CAAC,MAAtC,gBAAAf,EAAyC,UAAzC,gBAAAD,EAAgD,WAAhD,gBAAAiB,EAAwD,YAAW;AAC9E,GAEaC,IAAY,CAACC,MAAwC;AAC9D,QAAM,EAAE,SAAAxC,IAAU,IAAM,QAAAyC,IAAS,OAASD,GACpChB,IAAWQ,EAAoBQ,CAAK,GACpCE,IAAYnB,EAAeC,CAAQ,GAEnCmB,IAAMpC,EAA8B,IAAI,GACxCV,IAAQ+C,EAAiCF,CAAS,GAGlDG,IAAoBtC,EAAO,EAAE,aAAa,IAAM,aAAamB,EAAS,QAAQc,EAAM,QAAQ,EAAE,OAAQ,CAAA,GACtGM,IAAiBpB,EAAS,QAAQc,EAAM,QAAQ,EAAE;AACxD,EAAAO,EAAU,MAAM;AAMZ,IADyBX,EAAmBI,EAAM,QAAQ,KAGtD,CAACK,EAAkB,QAAQ,eAC3BnB,EAAS,QAAQc,EAAM,QAAQ,EAAE,SAASK,EAAkB,QAAQ,eAEpEhD,EAAM,UAAU6C,EAAU,oBAAoBA,EAAU,oBAAoB,SAAS,CAAC,CAAC,GAEzEG,EAAA,UAAU,EAAE,aAAa,IAAO,aAAanB,EAAS,QAAQc,EAAM,QAAQ,EAAE,OAAO;AAAA,EAAA,GACxG,CAACE,EAAU,qBAAqBI,GAAgBN,EAAM,UAAU3C,CAAK,CAAC;AAEnE,QAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMF,gBAAgB,EAAE,aAAAmD,GAAa,WAAAC,GAAW,GAAGC,EAAe;AAAA;AAAA;AAAA;AAAA,EAAA,IAI5DC,EAAa,EAAE,GAAGT,GAAW,mBAAmB,MAAQ7C,GAAO8C,CAAG,GAUhES,IAA2B,EAAE,GAAGF,GAAgB,WAR7B,CAAC/B,MAAyC;AACzD,UAAAY,IAAOZ,EAAM,OAA6B,QAAQ,KAClDkC,IAAYxD,EAAM,iBAAiB,eAAekC;AACxD,IAAIA,KAAOsB,KACPJ,KAAaA,EAAU9B,CAAK;AAAA,EAChC,EAG8E;AAG9E,SAAA,gBAAAJ,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGqC;AAAA,MACJ,KAAAT;AAAA,MACA,gBAAclD;AAAA,MACd,WAAWuB,EAAM;AAAA,QACbhB,KAAW;AAAA,QACXyC,KAAU;AAAA,MAAA,CACb;AAAA,IAAA;AAAA,IAEA,CAAC,GAAG5C,EAAM,UAAU,EAAE,IAAI,CAACD,GAAMgC,MAAU;AAClC,YAAA,EAAE,QAAA9B,GAAQ,SAAAC,GAAS,iBAAAuD,GAAiB,SAAAtD,EAAQ,IAAIwB,EAASI,CAAK,EAAE;AAElE,aAAA,gBAAAb,EAAA;AAAA,QAACpB;AAAA,QAAA;AAAA,UACG,KAAKC,EAAK;AAAA,UACV,MAAAA;AAAA,UACA,OAAAC;AAAA,UACA,SAASG;AAAAA,UACT,QAAAF;AAAA,UACA,SAAAC;AAAA,UACA,iBAAAuD;AAAA,QAAA;AAAA,MAAA;AAAA,IACJ,CAEP;AAAA,EAAA;AAGb;AACAf,EAAU,cAAc;"}

package/dist/components/Accordion/AccordionHeaderIcon.d.ts

@@ -1,3 +1,6 @@
-import { FC } from 'react';
+import { ReactElement } from 'react';
 import { AccordionHeaderIconProps } from './types';
-export declare const AccordionHeaderIcon: FC<AccordionHeaderIconProps>;
+export declare const AccordionHeaderIcon: {
+    ({ size, isOpen, disabled, type, }: AccordionHeaderIconProps): Nullable<ReactElement>;
+    displayName: string;
+};

package/dist/components/Accordion/AccordionHeaderIcon.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionHeaderIcon.es.js","sources":["../../../src/components/Accordion/AccordionHeaderIcon.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { FieldsetHeaderSize, FieldsetHeaderType, renderFieldsetHeaderIconType } from '@components/FieldsetHeader';\nimport { FC } from 'react';\nimport { AccordionHeaderIconProps, AccordionHeaderIconSize } from './types';\n\nexport const AccordionHeaderIcon: FC<AccordionHeaderIconProps> = ({\n    size = AccordionHeaderIconSize.Medium,\n    isOpen,\n    disabled = false,\n    type = FieldsetHeaderType.Accordion,\n}) => renderFieldsetHeaderIconType(type, '', FieldsetHeaderSize[AccordionHeaderIconSize[size]], isOpen, disabled);\nAccordionHeaderIcon.displayName = 'FondueAccordionHeaderIcon';\n"],"names":["AccordionHeaderIcon","size","AccordionHeaderIconSize","isOpen","disabled","type","FieldsetHeaderType","renderFieldsetHeaderIconType","FieldsetHeaderSize"],"mappings":";;AAMO,MAAMA,IAAoD,CAAC;AAAA,EAC9D,MAAAC,IAAOC,EAAwB;AAAA,EAC/B,QAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,MAAAC,IAAOC,EAAmB;AAC9B,MAAMC,EAA6BF,GAAM,IAAIG,EAAmBN,EAAwBD,CAAI,CAAC,GAAGE,GAAQC,CAAQ;AAChHJ,EAAoB,cAAc;"}
+{"version":3,"file":"AccordionHeaderIcon.es.js","sources":["../../../src/components/Accordion/AccordionHeaderIcon.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { FieldsetHeaderSize, FieldsetHeaderType, renderFieldsetHeaderIconType } from '@components/FieldsetHeader';\nimport { ReactElement } from 'react';\nimport { AccordionHeaderIconProps, AccordionHeaderIconSize } from './types';\n\nexport const AccordionHeaderIcon = ({\n    size = AccordionHeaderIconSize.Medium,\n    isOpen,\n    disabled = false,\n    type = FieldsetHeaderType.Accordion,\n}: AccordionHeaderIconProps): Nullable<ReactElement> =>\n    renderFieldsetHeaderIconType(type, '', FieldsetHeaderSize[AccordionHeaderIconSize[size]], isOpen, disabled);\nAccordionHeaderIcon.displayName = 'FondueAccordionHeaderIcon';\n"],"names":["AccordionHeaderIcon","size","AccordionHeaderIconSize","isOpen","disabled","type","FieldsetHeaderType","renderFieldsetHeaderIconType","FieldsetHeaderSize"],"mappings":";;AAMO,MAAMA,IAAsB,CAAC;AAAA,EAChC,MAAAC,IAAOC,EAAwB;AAAA,EAC/B,QAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,MAAAC,IAAOC,EAAmB;AAC9B,MACIC,EAA6BF,GAAM,IAAIG,EAAmBN,EAAwBD,CAAI,CAAC,GAAGE,GAAQC,CAAQ;AAC9GJ,EAAoB,cAAc;"}

package/dist/components/Accordion/types.d.ts

@@ -1,5 +1,5 @@
 import { TreeState } from '@react-stately/tree';
-import { FC, PropsWithChildren, ReactNode } from 'react';
+import { ReactElement, ReactNode } from 'react';
 import { Node } from '@react-types/shared';
 import { FieldsetHeaderSize, FieldsetHeaderType } from '../FieldsetHeader';
 export type AccordionProps = {
@@ -16,17 +16,18 @@ export type AriaAccordionItemProps = {
     };
     padding?: boolean;
     divider?: boolean;
-    headerComponent?: FC<AccordionHeaderProps>;
+    headerComponent?: (props: AccordionHeaderProps) => ReactElement;
 };
-export type AccordionItemProps = PropsWithChildren<{
+export type AccordionItemProps = {
     header: Omit<AccordionHeaderProps, 'isOpen'> & {
         active?: boolean;
         onClick?: () => void;
     };
     padding?: boolean;
     divider?: boolean;
-    headerComponent?: FC<AccordionHeaderProps>;
-}>;
+    headerComponent?: (props: AccordionHeaderProps) => ReactElement;
+    children?: ReactNode;
+};
 export declare enum AccordionHeaderIconSize {
     Small = "Small",
     Medium = "Medium",
@@ -54,4 +55,5 @@ export type AccordionHeaderIconProps = {
     /** @deprecated Icon type will be fixed to FieldsetHeaderType.Accordion.
      Use headerComponent prop for custom header styles */
     type?: FieldsetHeaderType;
+    children?: ReactNode;
 };

package/dist/components/Accordion/types.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.es.js","sources":["../../../src/components/Accordion/types.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { TreeState } from '@react-stately/tree';\nimport { FC, PropsWithChildren, ReactNode } from 'react';\nimport { Node } from '@react-types/shared';\nimport { FieldsetHeaderSize, FieldsetHeaderType } from '@components/FieldsetHeader';\n\nexport type AccordionProps = {\n    children?: ReactNode;\n    divider?: boolean;\n    border?: boolean;\n};\n\nexport type AriaAccordionItemProps = {\n    item: Node<AccordionItemProps>;\n    state: TreeState<AccordionItemProps>;\n    header: Omit<AccordionHeaderProps, 'isOpen'> & { active?: boolean; onClick?: () => void };\n    padding?: boolean;\n    divider?: boolean;\n    headerComponent?: FC<AccordionHeaderProps>;\n};\n\nexport type AccordionItemProps = PropsWithChildren<{\n    header: Omit<AccordionHeaderProps, 'isOpen'> & { active?: boolean; onClick?: () => void };\n    padding?: boolean;\n    divider?: boolean;\n    headerComponent?: FC<AccordionHeaderProps>;\n}>;\n\nexport enum AccordionHeaderIconSize {\n    Small = 'Small',\n    Medium = 'Medium',\n    Large = 'Large',\n}\n\nexport type AccordionHeaderProps = {\n    decorator?: ReactNode;\n    children: string;\n    disabled?: boolean;\n    isOpen: boolean;\n    /** @deprecated use headerComponent prop for custom header styles */\n    size?: AccordionHeaderIconSize | FieldsetHeaderSize;\n    /** @deprecated use headerComponent prop for custom header styles */\n    bold?: boolean;\n    /** @deprecated Icon type will be fixed to FieldsetHeaderType.Accordion.\n     Use headerComponent prop for custom header styles */\n    type?: FieldsetHeaderType;\n    /** @deprecated use headerComponent prop for custom header styles */\n    as?: keyof JSX.IntrinsicElements;\n};\n\nexport type AccordionHeaderIconProps = {\n    isOpen: boolean;\n    size?: AccordionHeaderIconSize | FieldsetHeaderSize;\n    disabled?: boolean;\n    /** @deprecated Icon type will be fixed to FieldsetHeaderType.Accordion.\n     Use headerComponent prop for custom header styles */\n    type?: FieldsetHeaderType;\n};\n"],"names":["AccordionHeaderIconSize"],"mappings":"AA6BY,IAAAA,sBAAAA,OACRA,EAAA,QAAQ,SACRA,EAAA,SAAS,UACTA,EAAA,QAAQ,SAHAA,IAAAA,KAAA,CAAA,CAAA;"}
+{"version":3,"file":"types.es.js","sources":["../../../src/components/Accordion/types.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { TreeState } from '@react-stately/tree';\nimport { ReactElement, ReactNode } from 'react';\nimport { Node } from '@react-types/shared';\nimport { FieldsetHeaderSize, FieldsetHeaderType } from '@components/FieldsetHeader';\n\nexport type AccordionProps = {\n    children?: ReactNode;\n    divider?: boolean;\n    border?: boolean;\n};\n\nexport type AriaAccordionItemProps = {\n    item: Node<AccordionItemProps>;\n    state: TreeState<AccordionItemProps>;\n    header: Omit<AccordionHeaderProps, 'isOpen'> & { active?: boolean; onClick?: () => void };\n    padding?: boolean;\n    divider?: boolean;\n    headerComponent?: (props: AccordionHeaderProps) => ReactElement;\n};\n\nexport type AccordionItemProps = {\n    header: Omit<AccordionHeaderProps, 'isOpen'> & { active?: boolean; onClick?: () => void };\n    padding?: boolean;\n    divider?: boolean;\n    headerComponent?: (props: AccordionHeaderProps) => ReactElement;\n    children?: ReactNode;\n};\n\nexport enum AccordionHeaderIconSize {\n    Small = 'Small',\n    Medium = 'Medium',\n    Large = 'Large',\n}\n\nexport type AccordionHeaderProps = {\n    decorator?: ReactNode;\n    children: string;\n    disabled?: boolean;\n    isOpen: boolean;\n    /** @deprecated use headerComponent prop for custom header styles */\n    size?: AccordionHeaderIconSize | FieldsetHeaderSize;\n    /** @deprecated use headerComponent prop for custom header styles */\n    bold?: boolean;\n    /** @deprecated Icon type will be fixed to FieldsetHeaderType.Accordion.\n     Use headerComponent prop for custom header styles */\n    type?: FieldsetHeaderType;\n    /** @deprecated use headerComponent prop for custom header styles */\n    as?: keyof JSX.IntrinsicElements;\n};\n\nexport type AccordionHeaderIconProps = {\n    isOpen: boolean;\n    size?: AccordionHeaderIconSize | FieldsetHeaderSize;\n    disabled?: boolean;\n    /** @deprecated Icon type will be fixed to FieldsetHeaderType.Accordion.\n     Use headerComponent prop for custom header styles */\n    type?: FieldsetHeaderType;\n    children?: ReactNode;\n};\n"],"names":["AccordionHeaderIconSize"],"mappings":"AA8BY,IAAAA,sBAAAA,OACRA,EAAA,QAAQ,SACRA,EAAA,SAAS,UACTA,EAAA,QAAQ,SAHAA,IAAAA,KAAA,CAAA,CAAA;"}

package/dist/components/ActionMenu/Aria/AriaMenuItem.d.ts

@@ -1,6 +1,6 @@
 import { TreeState } from '@react-stately/tree';
 import { Node } from '@react-types/shared';
-import { FC } from 'react';
+import { ReactElement } from 'react';
 import { MenuItemType } from '../../Dropdown';
 import { ActionMenuItemType, ActionMenuSwitchItemType } from '../../ActionMenu';
 export type AriaOptionProps = {
@@ -10,4 +10,7 @@ export type AriaOptionProps = {
     state: TreeState<object>;
     onClick?: () => void;
 };
-export declare const AriaMenuItem: FC<AriaOptionProps>;
+export declare const AriaMenuItem: {
+    ({ menuItem, node, state, isSelected, onClick }: AriaOptionProps): ReactElement;
+    displayName: string;
+};

package/dist/components/ActionMenu/Aria/AriaMenuItem.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"AriaMenuItem.es.js","sources":["../../../../src/components/ActionMenu/Aria/AriaMenuItem.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { MenuItem } from '@components/MenuItem/MenuItem';\nimport { Switch } from '@components/Switch';\nimport { useFocusRing } from '@react-aria/focus';\nimport { useMenuItem } from '@react-aria/menu';\nimport { mergeProps } from '@react-aria/utils';\nimport { TreeState } from '@react-stately/tree';\nimport { Node } from '@react-types/shared';\nimport { FOCUS_STYLE_INSET } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport React, { FC, ReactElement, useEffect, useRef, useState } from 'react';\nimport { MenuItemType } from '@components/Dropdown';\nimport { ActionMenuItemType, ActionMenuSwitchItemType } from '@components/ActionMenu';\n\nexport type AriaOptionProps = {\n    menuItem: MenuItemType | ActionMenuItemType | ActionMenuSwitchItemType;\n    node: Node<object>;\n    isSelected?: boolean;\n    state: TreeState<object>;\n    onClick?: () => void;\n};\n\ninterface SwitchObject {\n    switchComponent: ReactElement | undefined;\n    switchValue: boolean | null;\n    toggleSwitch: VoidFunction | null;\n}\n\nconst isActionMenuItem = (\n    menuItem: MenuItemType | ActionMenuItemType | ActionMenuSwitchItemType,\n): menuItem is ActionMenuItemType =>\n    typeof (menuItem as ActionMenuItemType).onClick !== 'undefined' && typeof menuItem.type === 'undefined';\nconst isActionMenuSwitchItem = (\n    menuItem: MenuItemType | ActionMenuItemType | ActionMenuSwitchItemType,\n): menuItem is ActionMenuSwitchItemType =>\n    typeof (menuItem as ActionMenuSwitchItemType).onClick !== 'undefined' && menuItem.type === 'switch';\n\nconst useSwitch = (isSwitch: boolean, initialValue: boolean) => {\n    const [switchValue, setSwitchValue] = useState<boolean>(initialValue ?? false);\n    const [switchObject, setSwitchObject] = useState<SwitchObject>({\n        switchComponent: undefined,\n        switchValue: null,\n        toggleSwitch: null,\n    });\n\n    useEffect(() => {\n        if (isSwitch) {\n            const toggleSwitch = () => setSwitchValue(!switchValue);\n            const switchComponent = <Switch size=\"small\" mode={switchValue ? 'on' : 'off'} />;\n\n            setSwitchObject({\n                switchComponent,\n                switchValue,\n                toggleSwitch,\n            });\n        }\n    }, [isSwitch, switchValue]);\n\n    return switchObject;\n};\n\nexport const AriaMenuItem: FC<AriaOptionProps> = ({ menuItem, node, state, isSelected, onClick }) => {\n    const ref = useRef<HTMLLIElement | null>(null);\n    const initialValue = isActionMenuSwitchItem(menuItem) ? menuItem.initialValue : false;\n    const {\n        switchComponent = undefined,\n        switchValue = null,\n        toggleSwitch = null,\n    } = useSwitch(isActionMenuSwitchItem(menuItem), initialValue) as SwitchObject;\n\n    const { menuItemProps } = useMenuItem(\n        {\n            ...node,\n            onAction: () => {\n                if (isActionMenuItem(menuItem)) {\n                    menuItem.onClick();\n                }\n                if (isActionMenuSwitchItem(menuItem)) {\n                    toggleSwitch?.();\n                    menuItem.onClick(Boolean(!switchValue));\n                }\n            },\n            isDisabled: menuItem?.disabled || false,\n            'aria-label': typeof menuItem?.title === 'string' ? menuItem?.title : 'Menu item',\n        },\n        state,\n        ref,\n    );\n    const { title, decorator, subtitle, size, style, disabled, selectionIndicator } = menuItem;\n    const { isFocusVisible, focusProps } = useFocusRing();\n\n    return (\n        // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions\n        <li\n            {...mergeProps(menuItemProps, focusProps)}\n            data-test-id=\"menu-item\"\n            className={merge([\n                'tw-relative hover:tw-bg-base-alt 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            onClick={(event) => {\n                event.stopPropagation();\n                if (onClick) {\n                    onClick();\n                }\n            }}\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                switchComponent={switchComponent}\n            />\n        </li>\n    );\n};\nAriaMenuItem.displayName = 'FondueAriaMenuItem';\n"],"names":["isActionMenuItem","menuItem","isActionMenuSwitchItem","useSwitch","isSwitch","initialValue","switchValue","setSwitchValue","useState","switchObject","setSwitchObject","useEffect","toggleSwitch","Switch","AriaMenuItem","node","state","isSelected","onClick","ref","useRef","switchComponent","menuItemProps","useMenuItem","title","decorator","subtitle","size","style","disabled","selectionIndicator","isFocusVisible","focusProps","useFocusRing","React","mergeProps","merge","FOCUS_STYLE_INSET","event","MenuItem"],"mappings":";;;;;;;;AA6BA,MAAMA,IAAmB,CACrBC,MAEA,OAAQA,EAAgC,UAAY,OAAe,OAAOA,EAAS,OAAS,KAC1FC,IAAyB,CAC3BD,MAEA,OAAQA,EAAsC,UAAY,OAAeA,EAAS,SAAS,UAEzFE,IAAY,CAACC,GAAmBC,MAA0B;AAC5D,QAAM,CAACC,GAAaC,CAAc,IAAIC,EAAkBH,KAAgB,EAAK,GACvE,CAACI,GAAcC,CAAe,IAAIF,EAAuB;AAAA,IAC3D,iBAAiB;AAAA,IACjB,aAAa;AAAA,IACb,cAAc;AAAA,EAAA,CACjB;AAED,SAAAG,EAAU,MAAM;AACZ,QAAIP,GAAU;AACV,YAAMQ,IAAe,MAAML,EAAe,CAACD,CAAW;AAGtC,MAAAI,EAAA;AAAA,QACZ,iDAHqBG,GAAO,EAAA,MAAK,SAAQ,MAAMP,IAAc,OAAO,MAAO,CAAA;AAAA,QAI3E,aAAAA;AAAA,QACA,cAAAM;AAAA,MAAA,CACH;AAAA,IACL;AAAA,EAAA,GACD,CAACR,GAAUE,CAAW,CAAC,GAEnBG;AACX,GAEaK,IAAoC,CAAC,EAAE,UAAAb,GAAU,MAAAc,GAAM,OAAAC,GAAO,YAAAC,GAAY,SAAAC,QAAc;AAC3F,QAAAC,IAAMC,EAA6B,IAAI,GACvCf,IAAeH,EAAuBD,CAAQ,IAAIA,EAAS,eAAe,IAC1E;AAAA,IACF,iBAAAoB,IAAkB;AAAA,IAClB,aAAAf,IAAc;AAAA,IACd,cAAAM,IAAe;AAAA,EACf,IAAAT,EAAUD,EAAuBD,CAAQ,GAAGI,CAAY,GAEtD,EAAE,eAAAiB,MAAkBC;AAAA,IACtB;AAAA,MACI,GAAGR;AAAA,MACH,UAAU,MAAM;AACR,QAAAf,EAAiBC,CAAQ,KACzBA,EAAS,QAAQ,GAEjBC,EAAuBD,CAAQ,MAChBW,KAAA,QAAAA,KACfX,EAAS,QAAQ,QAAQ,CAACK,CAAW,CAAC;AAAA,MAE9C;AAAA,MACA,aAAYL,KAAA,gBAAAA,EAAU,aAAY;AAAA,MAClC,cAAc,QAAOA,KAAA,gBAAAA,EAAU,UAAU,WAAWA,KAAA,gBAAAA,EAAU,QAAQ;AAAA,IAC1E;AAAA,IACAe;AAAA,IACAG;AAAA,EAAA,GAEE,EAAE,OAAAK,GAAO,WAAAC,GAAW,UAAAC,GAAU,MAAAC,GAAM,OAAAC,GAAO,UAAAC,GAAU,oBAAAC,EAAuB,IAAA7B,GAC5E,EAAE,gBAAA8B,GAAgB,YAAAC,EAAW,IAAIC,EAAa;AAEpD;AAAA;AAAA,IAEI,gBAAAC,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACI,GAAGC,EAAWb,GAAeU,CAAU;AAAA,QACxC,gBAAa;AAAA,QACb,WAAWI,EAAM;AAAA,UACb;AAAA,UACAP,KAAY;AAAA,UACZE,KAAkBM;AAAA,QAAA,CACrB;AAAA,QACD,KAAAlB;AAAA,QACA,SAAS,CAACmB,MAAU;AAChB,UAAAA,EAAM,gBAAgB,GAClBpB,KACQA;QAEhB;AAAA,MAAA;AAAA,MAEA,gBAAAgB,EAAA;AAAA,QAACK;AAAA,QAAA;AAAA,UACG,OAAAf;AAAA,UACA,WAAAC;AAAA,UACA,UAAAC;AAAA,UACA,MAAAC;AAAA,UACA,OAAAC;AAAA,UACA,UAAAC;AAAA,UACA,QAAQZ;AAAA,UACR,oBAAAa;AAAA,UACA,iBAAAT;AAAA,QAAA;AAAA,MACJ;AAAA,IACJ;AAAA;AAER;AACAP,EAAa,cAAc;"}
+{"version":3,"file":"AriaMenuItem.es.js","sources":["../../../../src/components/ActionMenu/Aria/AriaMenuItem.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { MenuItem } from '@components/MenuItem/MenuItem';\nimport { Switch } from '@components/Switch';\nimport { useFocusRing } from '@react-aria/focus';\nimport { useMenuItem } from '@react-aria/menu';\nimport { mergeProps } from '@react-aria/utils';\nimport { TreeState } from '@react-stately/tree';\nimport { Node } from '@react-types/shared';\nimport { FOCUS_STYLE_INSET } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport React, { ReactElement, useEffect, useRef, useState } from 'react';\nimport { MenuItemType } from '@components/Dropdown';\nimport { ActionMenuItemType, ActionMenuSwitchItemType } from '@components/ActionMenu';\n\nexport type AriaOptionProps = {\n    menuItem: MenuItemType | ActionMenuItemType | ActionMenuSwitchItemType;\n    node: Node<object>;\n    isSelected?: boolean;\n    state: TreeState<object>;\n    onClick?: () => void;\n};\n\ninterface SwitchObject {\n    switchComponent: ReactElement | undefined;\n    switchValue: boolean | null;\n    toggleSwitch: VoidFunction | null;\n}\n\nconst isActionMenuItem = (\n    menuItem: MenuItemType | ActionMenuItemType | ActionMenuSwitchItemType,\n): menuItem is ActionMenuItemType =>\n    typeof (menuItem as ActionMenuItemType).onClick !== 'undefined' && typeof menuItem.type === 'undefined';\nconst isActionMenuSwitchItem = (\n    menuItem: MenuItemType | ActionMenuItemType | ActionMenuSwitchItemType,\n): menuItem is ActionMenuSwitchItemType =>\n    typeof (menuItem as ActionMenuSwitchItemType).onClick !== 'undefined' && menuItem.type === 'switch';\n\nconst useSwitch = (isSwitch: boolean, initialValue: boolean) => {\n    const [switchValue, setSwitchValue] = useState<boolean>(initialValue ?? false);\n    const [switchObject, setSwitchObject] = useState<SwitchObject>({\n        switchComponent: undefined,\n        switchValue: null,\n        toggleSwitch: null,\n    });\n\n    useEffect(() => {\n        if (isSwitch) {\n            const toggleSwitch = () => setSwitchValue(!switchValue);\n            const switchComponent = <Switch size=\"small\" mode={switchValue ? 'on' : 'off'} />;\n\n            setSwitchObject({\n                switchComponent,\n                switchValue,\n                toggleSwitch,\n            });\n        }\n    }, [isSwitch, switchValue]);\n\n    return switchObject;\n};\n\nexport const AriaMenuItem = ({ menuItem, node, state, isSelected, onClick }: AriaOptionProps): ReactElement => {\n    const ref = useRef<HTMLLIElement | null>(null);\n    const initialValue = isActionMenuSwitchItem(menuItem) ? menuItem.initialValue : false;\n    const {\n        switchComponent = undefined,\n        switchValue = null,\n        toggleSwitch = null,\n    } = useSwitch(isActionMenuSwitchItem(menuItem), initialValue) as SwitchObject;\n\n    const { menuItemProps } = useMenuItem(\n        {\n            ...node,\n            onAction: () => {\n                if (isActionMenuItem(menuItem)) {\n                    menuItem.onClick();\n                }\n                if (isActionMenuSwitchItem(menuItem)) {\n                    toggleSwitch?.();\n                    menuItem.onClick(Boolean(!switchValue));\n                }\n            },\n            isDisabled: menuItem?.disabled || false,\n            'aria-label': typeof menuItem?.title === 'string' ? menuItem?.title : 'Menu item',\n        },\n        state,\n        ref,\n    );\n    const { title, decorator, subtitle, size, style, disabled, selectionIndicator } = menuItem;\n    const { isFocusVisible, focusProps } = useFocusRing();\n\n    return (\n        // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions\n        <li\n            {...mergeProps(menuItemProps, focusProps)}\n            data-test-id=\"menu-item\"\n            className={merge([\n                'tw-relative hover:tw-bg-base-alt 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            onClick={(event) => {\n                event.stopPropagation();\n                if (onClick) {\n                    onClick();\n                }\n            }}\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                switchComponent={switchComponent}\n            />\n        </li>\n    );\n};\nAriaMenuItem.displayName = 'FondueAriaMenuItem';\n"],"names":["isActionMenuItem","menuItem","isActionMenuSwitchItem","useSwitch","isSwitch","initialValue","switchValue","setSwitchValue","useState","switchObject","setSwitchObject","useEffect","toggleSwitch","Switch","AriaMenuItem","node","state","isSelected","onClick","ref","useRef","switchComponent","menuItemProps","useMenuItem","title","decorator","subtitle","size","style","disabled","selectionIndicator","isFocusVisible","focusProps","useFocusRing","React","mergeProps","merge","FOCUS_STYLE_INSET","event","MenuItem"],"mappings":";;;;;;;;AA6BA,MAAMA,IAAmB,CACrBC,MAEA,OAAQA,EAAgC,UAAY,OAAe,OAAOA,EAAS,OAAS,KAC1FC,IAAyB,CAC3BD,MAEA,OAAQA,EAAsC,UAAY,OAAeA,EAAS,SAAS,UAEzFE,IAAY,CAACC,GAAmBC,MAA0B;AAC5D,QAAM,CAACC,GAAaC,CAAc,IAAIC,EAAkBH,KAAgB,EAAK,GACvE,CAACI,GAAcC,CAAe,IAAIF,EAAuB;AAAA,IAC3D,iBAAiB;AAAA,IACjB,aAAa;AAAA,IACb,cAAc;AAAA,EAAA,CACjB;AAED,SAAAG,EAAU,MAAM;AACZ,QAAIP,GAAU;AACV,YAAMQ,IAAe,MAAML,EAAe,CAACD,CAAW;AAGtC,MAAAI,EAAA;AAAA,QACZ,iDAHqBG,GAAO,EAAA,MAAK,SAAQ,MAAMP,IAAc,OAAO,MAAO,CAAA;AAAA,QAI3E,aAAAA;AAAA,QACA,cAAAM;AAAA,MAAA,CACH;AAAA,IACL;AAAA,EAAA,GACD,CAACR,GAAUE,CAAW,CAAC,GAEnBG;AACX,GAEaK,IAAe,CAAC,EAAE,UAAAb,GAAU,MAAAc,GAAM,OAAAC,GAAO,YAAAC,GAAY,SAAAC,QAA6C;AACrG,QAAAC,IAAMC,EAA6B,IAAI,GACvCf,IAAeH,EAAuBD,CAAQ,IAAIA,EAAS,eAAe,IAC1E;AAAA,IACF,iBAAAoB,IAAkB;AAAA,IAClB,aAAAf,IAAc;AAAA,IACd,cAAAM,IAAe;AAAA,EACf,IAAAT,EAAUD,EAAuBD,CAAQ,GAAGI,CAAY,GAEtD,EAAE,eAAAiB,MAAkBC;AAAA,IACtB;AAAA,MACI,GAAGR;AAAA,MACH,UAAU,MAAM;AACR,QAAAf,EAAiBC,CAAQ,KACzBA,EAAS,QAAQ,GAEjBC,EAAuBD,CAAQ,MAChBW,KAAA,QAAAA,KACfX,EAAS,QAAQ,QAAQ,CAACK,CAAW,CAAC;AAAA,MAE9C;AAAA,MACA,aAAYL,KAAA,gBAAAA,EAAU,aAAY;AAAA,MAClC,cAAc,QAAOA,KAAA,gBAAAA,EAAU,UAAU,WAAWA,KAAA,gBAAAA,EAAU,QAAQ;AAAA,IAC1E;AAAA,IACAe;AAAA,IACAG;AAAA,EAAA,GAEE,EAAE,OAAAK,GAAO,WAAAC,GAAW,UAAAC,GAAU,MAAAC,GAAM,OAAAC,GAAO,UAAAC,GAAU,oBAAAC,EAAuB,IAAA7B,GAC5E,EAAE,gBAAA8B,GAAgB,YAAAC,EAAW,IAAIC,EAAa;AAEpD;AAAA;AAAA,IAEI,gBAAAC,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACI,GAAGC,EAAWb,GAAeU,CAAU;AAAA,QACxC,gBAAa;AAAA,QACb,WAAWI,EAAM;AAAA,UACb;AAAA,UACAP,KAAY;AAAA,UACZE,KAAkBM;AAAA,QAAA,CACrB;AAAA,QACD,KAAAlB;AAAA,QACA,SAAS,CAACmB,MAAU;AAChB,UAAAA,EAAM,gBAAgB,GAClBpB,KACQA;QAEhB;AAAA,MAAA;AAAA,MAEA,gBAAAgB,EAAA;AAAA,QAACK;AAAA,QAAA;AAAA,UACG,OAAAf;AAAA,UACA,WAAAC;AAAA,UACA,UAAAC;AAAA,UACA,MAAAC;AAAA,UACA,OAAAC;AAAA,UACA,UAAAC;AAAA,UACA,QAAQZ;AAAA,UACR,oBAAAa;AAAA,UACA,iBAAAT;AAAA,QAAA;AAAA,MACJ;AAAA,IACJ;AAAA;AAER;AACAP,EAAa,cAAc;"}

package/dist/components/ActionMenu/Aria/AriaSection.d.ts

@@ -1,5 +1,9 @@
-import { FC } from 'react';
+import { ReactElement, ReactNode } from 'react';
 export type AriaSectionProps = {
     ariaLabel?: string;
+    children: ReactNode;
+};
+export declare const AriaSection: {
+    ({ ariaLabel, children }: AriaSectionProps): ReactElement;
+    displayName: string;
 };
-export declare const AriaSection: FC<AriaSectionProps>;

package/dist/components/ActionMenu/Aria/AriaSection.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"AriaSection.es.js","sources":["../../../../src/components/ActionMenu/Aria/AriaSection.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useMenuSection } from '@react-aria/menu';\nimport React, { FC } from 'react';\n\nexport type AriaSectionProps = {\n    ariaLabel?: string;\n};\n\nexport const AriaSection: FC<AriaSectionProps> = ({ ariaLabel, children }) => {\n    const { itemProps, groupProps } = useMenuSection({ 'aria-label': ariaLabel });\n\n    return (\n        <li {...itemProps} className=\"tw-border-b tw-border-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};\nAriaSection.displayName = 'FondueAriaSection';\n"],"names":["AriaSection","ariaLabel","children","itemProps","groupProps","useMenuSection","React"],"mappings":";;AASO,MAAMA,IAAoC,CAAC,EAAE,WAAAC,GAAW,UAAAC,QAAe;AACpE,QAAA,EAAE,WAAAC,GAAW,YAAAC,EAAW,IAAIC,EAAe,EAAE,cAAcJ,GAAW;AAE5E,yCACK,MAAI,EAAA,GAAGE,GAAW,WAAU,+CAA8C,gBAAa,wBACnF,gBAAAG,EAAA,cAAA,MAAA,EAAI,GAAGF,GAAY,WAAU,uCAAsC,gBAAa,iBAAA,GAC5EF,CACL,CACJ;AAER;AACAF,EAAY,cAAc;"}
+{"version":3,"file":"AriaSection.es.js","sources":["../../../../src/components/ActionMenu/Aria/AriaSection.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useMenuSection } from '@react-aria/menu';\nimport React, { ReactElement, ReactNode } from 'react';\n\nexport type AriaSectionProps = {\n    ariaLabel?: string;\n    children: ReactNode;\n};\n\nexport const AriaSection = ({ ariaLabel, children }: AriaSectionProps): ReactElement => {\n    const { itemProps, groupProps } = useMenuSection({ 'aria-label': ariaLabel });\n\n    return (\n        <li {...itemProps} className=\"tw-border-b tw-border-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};\nAriaSection.displayName = 'FondueAriaSection';\n"],"names":["AriaSection","ariaLabel","children","itemProps","groupProps","useMenuSection","React"],"mappings":";;AAUO,MAAMA,IAAc,CAAC,EAAE,WAAAC,GAAW,UAAAC,QAA+C;AAC9E,QAAA,EAAE,WAAAC,GAAW,YAAAC,EAAW,IAAIC,EAAe,EAAE,cAAcJ,GAAW;AAE5E,yCACK,MAAI,EAAA,GAAGE,GAAW,WAAU,+CAA8C,gBAAa,wBACnF,gBAAAG,EAAA,cAAA,MAAA,EAAI,GAAGF,GAAY,WAAU,uCAAsC,gBAAa,iBAAA,GAC5EF,CACL,CACJ;AAER;AACAF,EAAY,cAAc;"}

package/dist/components/AddBlockButton/AddBlockButton.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { ReactElement } from 'react';
 export declare enum AddBlockButtonDirection {
     Horizontal = "Horizontal",
     Vertical = "Vertical"
@@ -8,4 +8,7 @@ export type AddBlockButtonProps = {
     title?: string;
     orientation?: AddBlockButtonDirection;
 };
-export declare const AddBlockButton: FC<AddBlockButtonProps>;
+export declare const AddBlockButton: {
+    ({ onClick, title, orientation, }: AddBlockButtonProps): ReactElement;
+    displayName: string;
+};

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

@@ -1 +1 @@
-{"version":3,"file":"AddBlockButton.es.js","sources":["../../../src/components/AddBlockButton/AddBlockButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconPlus } from '@foundation/Icon/Generated';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { useButton } from '@react-aria/button';\nimport { useFocusRing } from '@react-aria/focus';\nimport { mergeProps } from '@react-aria/utils';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport React, { FC, useRef } from 'react';\n\nexport enum AddBlockButtonDirection {\n    Horizontal = 'Horizontal',\n    Vertical = 'Vertical',\n}\n\nexport type AddBlockButtonProps = {\n    onClick: () => void;\n    title?: string;\n    orientation?: AddBlockButtonDirection;\n};\n\nexport const AddBlockButton: FC<AddBlockButtonProps> = ({\n    onClick,\n    title,\n    orientation = AddBlockButtonDirection.Horizontal,\n}) => {\n    const { isFocusVisible, focusProps } = useFocusRing();\n    const ref = useRef<HTMLButtonElement | null>(null);\n    const { buttonProps } = useButton({ onPress: () => onClick() }, ref);\n\n    return (\n        <button\n            {...mergeProps(buttonProps, focusProps)}\n            title={title}\n            data-test-id=\"add-block-button\"\n            className={merge([\n                'tw-group tw-leading-none tw-rounded-sm tw-outline-none',\n                isFocusVisible && FOCUS_STYLE,\n                orientation === AddBlockButtonDirection.Vertical ? 'tw-rotate-90' : '',\n            ])}\n        >\n            <span\n                className={\n                    'tw-text-white tw-bg-violet-60 tw-rounded tw-inline-flex tw-items-center tw-w-7 tw-h-6 tw-relative tw-p-1 tw-transition-colors hover:tw-bg-violet-70 group-active:tw-bg-violet-90'\n                }\n                style={{\n                    clipPath: `path(\n                        \"M27.3333 10.9369L21.7246 2C20.5 0.5 19.5 0 18 0H4C1.79086 0 0 1.79086 0 4V20C0 22.2091 1.79086 24 4 24H18C19.5 24 20.5 23.5 21.7246 22L27.3333 13.0631C27.7412 12.4131 27.7412 11.5869 27.3333 10.9369Z\"\n                    )`,\n                }}\n            >\n                <IconPlus size={IconSize.Size16} />\n            </span>\n        </button>\n    );\n};\nAddBlockButton.displayName = 'FondueAddBlockButton';\n"],"names":["AddBlockButtonDirection","AddBlockButton","onClick","title","orientation","isFocusVisible","focusProps","useFocusRing","ref","useRef","buttonProps","useButton","React","mergeProps","merge","FOCUS_STYLE","IconPlus","IconSize"],"mappings":";;;;;;;;AAWY,IAAAA,sBAAAA,OACRA,EAAA,aAAa,cACbA,EAAA,WAAW,YAFHA,IAAAA,KAAA,CAAA,CAAA;AAWL,MAAMC,IAA0C,CAAC;AAAA,EACpD,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC,IAAc;AAAA;AAClB,MAAM;AACF,QAAM,EAAE,gBAAAC,GAAgB,YAAAC,EAAW,IAAIC,EAAa,GAC9CC,IAAMC,EAAiC,IAAI,GAC3C,EAAE,aAAAC,EAAY,IAAIC,EAAU,EAAE,SAAS,MAAMT,EAAA,KAAaM,CAAG;AAG/D,SAAA,gBAAAI,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGC,EAAWH,GAAaJ,CAAU;AAAA,MACtC,OAAAH;AAAA,MACA,gBAAa;AAAA,MACb,WAAWW,EAAM;AAAA,QACb;AAAA,QACAT,KAAkBU;AAAA,QAClBX,MAAgB,aAAmC,iBAAiB;AAAA,MAAA,CACvE;AAAA,IAAA;AAAA,IAED,gBAAAQ,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WACI;AAAA,QAEJ,OAAO;AAAA,UACH,UAAU;AAAA;AAAA;AAAA,QAGd;AAAA,MAAA;AAAA,MAEC,gBAAAA,EAAA,cAAAI,GAAA,EAAS,MAAMC,EAAS,QAAQ;AAAA,IACrC;AAAA,EAAA;AAGZ;AACAhB,EAAe,cAAc;"}
+{"version":3,"file":"AddBlockButton.es.js","sources":["../../../src/components/AddBlockButton/AddBlockButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconPlus } from '@foundation/Icon/Generated';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { useButton } from '@react-aria/button';\nimport { useFocusRing } from '@react-aria/focus';\nimport { mergeProps } from '@react-aria/utils';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport React, { ReactElement, useRef } from 'react';\n\nexport enum AddBlockButtonDirection {\n    Horizontal = 'Horizontal',\n    Vertical = 'Vertical',\n}\n\nexport type AddBlockButtonProps = {\n    onClick: () => void;\n    title?: string;\n    orientation?: AddBlockButtonDirection;\n};\n\nexport const AddBlockButton = ({\n    onClick,\n    title,\n    orientation = AddBlockButtonDirection.Horizontal,\n}: AddBlockButtonProps): ReactElement => {\n    const { isFocusVisible, focusProps } = useFocusRing();\n    const ref = useRef<HTMLButtonElement | null>(null);\n    const { buttonProps } = useButton({ onPress: () => onClick() }, ref);\n\n    return (\n        <button\n            {...mergeProps(buttonProps, focusProps)}\n            title={title}\n            data-test-id=\"add-block-button\"\n            className={merge([\n                'tw-group tw-leading-none tw-rounded-sm tw-outline-none',\n                isFocusVisible && FOCUS_STYLE,\n                orientation === AddBlockButtonDirection.Vertical ? 'tw-rotate-90' : '',\n            ])}\n        >\n            <span\n                className={\n                    'tw-text-white tw-bg-violet-60 tw-rounded tw-inline-flex tw-items-center tw-w-7 tw-h-6 tw-relative tw-p-1 tw-transition-colors hover:tw-bg-violet-70 group-active:tw-bg-violet-90'\n                }\n                style={{\n                    clipPath: `path(\n                        \"M27.3333 10.9369L21.7246 2C20.5 0.5 19.5 0 18 0H4C1.79086 0 0 1.79086 0 4V20C0 22.2091 1.79086 24 4 24H18C19.5 24 20.5 23.5 21.7246 22L27.3333 13.0631C27.7412 12.4131 27.7412 11.5869 27.3333 10.9369Z\"\n                    )`,\n                }}\n            >\n                <IconPlus size={IconSize.Size16} />\n            </span>\n        </button>\n    );\n};\nAddBlockButton.displayName = 'FondueAddBlockButton';\n"],"names":["AddBlockButtonDirection","AddBlockButton","onClick","title","orientation","isFocusVisible","focusProps","useFocusRing","ref","useRef","buttonProps","useButton","React","mergeProps","merge","FOCUS_STYLE","IconPlus","IconSize"],"mappings":";;;;;;;;AAWY,IAAAA,sBAAAA,OACRA,EAAA,aAAa,cACbA,EAAA,WAAW,YAFHA,IAAAA,KAAA,CAAA,CAAA;AAWL,MAAMC,IAAiB,CAAC;AAAA,EAC3B,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC,IAAc;AAAA;AAClB,MAAyC;AACrC,QAAM,EAAE,gBAAAC,GAAgB,YAAAC,EAAW,IAAIC,EAAa,GAC9CC,IAAMC,EAAiC,IAAI,GAC3C,EAAE,aAAAC,EAAY,IAAIC,EAAU,EAAE,SAAS,MAAMT,EAAA,KAAaM,CAAG;AAG/D,SAAA,gBAAAI,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGC,EAAWH,GAAaJ,CAAU;AAAA,MACtC,OAAAH;AAAA,MACA,gBAAa;AAAA,MACb,WAAWW,EAAM;AAAA,QACb;AAAA,QACAT,KAAkBU;AAAA,QAClBX,MAAgB,aAAmC,iBAAiB;AAAA,MAAA,CACvE;AAAA,IAAA;AAAA,IAED,gBAAAQ,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WACI;AAAA,QAEJ,OAAO;AAAA,UACH,UAAU;AAAA;AAAA;AAAA,QAGd;AAAA,MAAA;AAAA,MAEC,gBAAAA,EAAA,cAAAI,GAAA,EAAS,MAAMC,EAAS,QAAQ;AAAA,IACrC;AAAA,EAAA;AAGZ;AACAhB,EAAe,cAAc;"}

package/dist/components/AssetInput/AssetInput.d.ts

@@ -1,6 +1,6 @@
 import { ActionMenuProps } from '../ActionMenu/ActionMenu/ActionMenu';
 import { IconProps } from '../../foundation/Icon/IconProps';
-import { FC, ReactElement } from 'react';
+import { ReactElement } from 'react';
 type BaseAsset = {
     name: string;
 };
@@ -55,5 +55,8 @@ export type AssetInputProps = {
     onMultiAssetClick?: () => void;
     acceptFileType?: string;
 };
-export declare const AssetInput: FC<AssetInputProps>;
+export declare const AssetInput: {
+    ({ assets, numberOfLocations, actions, size, isLoading, hideSize, hideExtension, onLibraryClick, onUploadClick, onMultiAssetClick, acceptFileType, }: AssetInputProps): ReactElement;
+    displayName: string;
+};
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"AssetInput.es.js","sources":["../../../src/components/AssetInput/AssetInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { ActionMenuProps } from '@components/ActionMenu/ActionMenu/ActionMenu';\nimport { Button, ButtonEmphasis, ButtonStyle } from '@components/Button';\nimport { IconArrowCircleUp, IconImageStack } from '@foundation/Icon/';\nimport { IconProps } from '@foundation/Icon/IconProps';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { merge } from '@utilities/merge';\nimport React, { ChangeEvent, FC, ReactElement } from 'react';\nimport { MultiAssetPreview } from './MultiAssetPreview';\nimport { SelectedAsset } from './SingleAsset/SelectedAsset';\n\ntype BaseAsset = {\n    name: string;\n};\n\nexport type ImageAsset = {\n    type: 'image' | 'logo';\n    name: string;\n    extension: string;\n    src?: string;\n    alt?: string;\n    icon?: undefined;\n    size: number;\n};\n\ntype OtherAsset = BaseAsset & {\n    type: 'audio';\n    extension: string;\n    src?: undefined;\n    alt?: undefined;\n    icon?: undefined;\n    size: number;\n};\n\ntype IconAsset = BaseAsset & {\n    type: 'icon';\n    extension?: undefined;\n    src?: undefined;\n    alt?: undefined;\n    icon: ReactElement<IconProps>;\n    size?: undefined;\n};\n\nexport type UploadSource = { source: 'upload'; sourceName?: undefined };\nexport type LibrarySource = { source: 'library'; sourceName: string };\n\nexport enum AssetInputSize {\n    Small = 'Small',\n    Large = 'Large',\n}\n\nexport type AssetType =\n    | (ImageAsset & UploadSource)\n    | (ImageAsset & LibrarySource)\n    | (IconAsset & UploadSource)\n    | (IconAsset & LibrarySource)\n    | (OtherAsset & UploadSource)\n    | (OtherAsset & LibrarySource);\n\nexport type AssetInputProps = {\n    assets?: AssetType[];\n    size: AssetInputSize;\n    numberOfLocations?: number;\n    actions?: ActionMenuProps['menuBlocks'];\n    isLoading?: boolean;\n    hideSize?: boolean;\n    hideExtension?: boolean;\n    onUploadClick?: (files: FileList) => void;\n    onLibraryClick?: () => void;\n    onMultiAssetClick?: () => void;\n    acceptFileType?: string;\n};\n\nexport const AssetInput: FC<AssetInputProps> = ({\n    assets = [],\n    numberOfLocations = 1,\n    actions = [],\n    size = AssetInputSize.Small,\n    isLoading = false,\n    hideSize = false,\n    hideExtension = false,\n    onLibraryClick,\n    onUploadClick,\n    onMultiAssetClick,\n    acceptFileType,\n}) => {\n    const assetsLength = assets.length;\n    const id = useMemoizedId();\n\n    const onFileChange = (event: ChangeEvent<HTMLInputElement>) => {\n        const files = event.target.files;\n\n        if (files && onUploadClick) {\n            onUploadClick(files);\n        }\n    };\n\n    if ((isLoading || assetsLength === 1) && actions) {\n        return (\n            <SelectedAsset\n                asset={assets[0]}\n                size={size}\n                actions={actions}\n                isLoading={isLoading}\n                hideExtension={hideExtension}\n                hideSize={hideSize}\n            />\n        );\n    }\n\n    if (assetsLength > 1 && onMultiAssetClick) {\n        return <MultiAssetPreview assets={assets} onClick={onMultiAssetClick} numberOfLocations={numberOfLocations} />;\n    }\n\n    return (\n        <div\n            data-test-id=\"asset-input-placeholder\"\n            className={merge([\n                'tw-grid tw-p-3 tw-border tw-border-dashed tw-border-black-10 tw-rounded',\n                onUploadClick && onLibraryClick ? 'tw-grid-cols-2 tw-divide-x tw-divide-black-10' : 'tw-grid-cols-1',\n            ])}\n        >\n            {onUploadClick && (\n                <div\n                    className={merge(['tw-flex tw-flex-col tw-h-8', onLibraryClick && 'tw-pr-3'])}\n                    data-test-id=\"asset-input-upload\"\n                >\n                    <label\n                        className=\"tw-relative tw-cursor-pointer tw-rounded tw-flex tw-items-center tw-justify-center tw-px-4 tw-h-9 tw-text-s  tw-bg-transparent hover:tw-bg-black-10 hover:tw-text-black active:tw-bg-black-20 active:tw-text-black dark:tw-text-white dark:hover:tw-bg-black-superdark dark:active:tw-bg-black-superdark dark:hover:tw-text-white tw-font-medium tw-text-black\"\n                        htmlFor={id}\n                    >\n                        <span className=\"tw--ml-1 tw-mr-1.5\">\n                            <IconArrowCircleUp size={IconSize.Size20} />\n                        </span>\n                        Upload\n                    </label>\n                    <input\n                        id={id}\n                        className=\"tw-hidden\"\n                        type=\"file\"\n                        accept={acceptFileType}\n                        multiple={!!onMultiAssetClick}\n                        onChange={onFileChange}\n                    />\n                </div>\n            )}\n            {onLibraryClick && (\n                <div\n                    className={merge(['tw-flex tw-flex-col tw-h-8', onUploadClick && 'tw-pl-3'])}\n                    data-test-id=\"asset-input-library\"\n                >\n                    <Button\n                        style={ButtonStyle.Default}\n                        onClick={onLibraryClick}\n                        emphasis={ButtonEmphasis.Weak}\n                        icon={<IconImageStack />}\n                    >\n                        Browse\n                    </Button>\n                </div>\n            )}\n        </div>\n    );\n};\nAssetInput.displayName = 'FondueAssetInput';\n"],"names":["AssetInputSize","AssetInput","assets","numberOfLocations","actions","size","isLoading","hideSize","hideExtension","onLibraryClick","onUploadClick","onMultiAssetClick","acceptFileType","assetsLength","id","useMemoizedId","onFileChange","event","files","React","SelectedAsset","MultiAssetPreview","merge","IconArrowCircleUp","IconSize","Button","ButtonStyle","ButtonEmphasis","IconImageStack"],"mappings":";;;;;;;;;;AAgDY,IAAAA,sBAAAA,OACRA,EAAA,QAAQ,SACRA,EAAA,QAAQ,SAFAA,IAAAA,KAAA,CAAA,CAAA;AA2BL,MAAMC,IAAkC,CAAC;AAAA,EAC5C,QAAAC,IAAS,CAAC;AAAA,EACV,mBAAAC,IAAoB;AAAA,EACpB,SAAAC,IAAU,CAAC;AAAA,EACX,MAAAC,IAAO;AAAA,EACP,WAAAC,IAAY;AAAA,EACZ,UAAAC,IAAW;AAAA,EACX,eAAAC,IAAgB;AAAA,EAChB,gBAAAC;AAAA,EACA,eAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,gBAAAC;AACJ,MAAM;AACF,QAAMC,IAAeX,EAAO,QACtBY,IAAKC,KAELC,IAAe,CAACC,MAAyC;AACrD,UAAAC,IAAQD,EAAM,OAAO;AAE3B,IAAIC,KAASR,KACTA,EAAcQ,CAAK;AAAA,EACvB;AAGC,UAAAZ,KAAaO,MAAiB,MAAMT,IAEjC,gBAAAe,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,OAAOlB,EAAO,CAAC;AAAA,MACf,MAAAG;AAAA,MACA,SAAAD;AAAA,MACA,WAAAE;AAAA,MACA,eAAAE;AAAA,MACA,UAAAD;AAAA,IAAA;AAAA,EAAA,IAKRM,IAAe,KAAKF,IACZ,gBAAAQ,EAAA,cAAAE,GAAA,EAAkB,QAAAnB,GAAgB,SAASS,GAAmB,mBAAAR,EAAsC,CAAA,IAI5G,gBAAAgB,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,gBAAa;AAAA,MACb,WAAWG,EAAM;AAAA,QACb;AAAA,QACAZ,KAAiBD,IAAiB,kDAAkD;AAAA,MAAA,CACvF;AAAA,IAAA;AAAA,IAEAC,KACG,gBAAAS,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAWG,EAAM,CAAC,8BAA8Bb,KAAkB,SAAS,CAAC;AAAA,QAC5E,gBAAa;AAAA,MAAA;AAAA,MAEb,gBAAAU,EAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,WAAU;AAAA,UACV,SAASL;AAAA,QAAA;AAAA,QAET,gBAAAK,EAAA,cAAC,UAAK,WAAU,qBAAA,mCACXI,GAAkB,EAAA,MAAMC,EAAS,OAAQ,CAAA,CAC9C;AAAA,QAAO;AAAA,MAEX;AAAA,MACA,gBAAAL,EAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,IAAAL;AAAA,UACA,WAAU;AAAA,UACV,MAAK;AAAA,UACL,QAAQF;AAAA,UACR,UAAU,CAAC,CAACD;AAAA,UACZ,UAAUK;AAAA,QAAA;AAAA,MACd;AAAA,IACJ;AAAA,IAEHP,KACG,gBAAAU,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAWG,EAAM,CAAC,8BAA8BZ,KAAiB,SAAS,CAAC;AAAA,QAC3E,gBAAa;AAAA,MAAA;AAAA,MAEb,gBAAAS,EAAA;AAAA,QAACM;AAAA,QAAA;AAAA,UACG,OAAOC,EAAY;AAAA,UACnB,SAASjB;AAAA,UACT,UAAUkB,EAAe;AAAA,UACzB,sCAAOC,GAAe,IAAA;AAAA,QAAA;AAAA,QACzB;AAAA,MAED;AAAA,IACJ;AAAA,EAAA;AAIhB;AACA3B,EAAW,cAAc;"}
+{"version":3,"file":"AssetInput.es.js","sources":["../../../src/components/AssetInput/AssetInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { ActionMenuProps } from '@components/ActionMenu/ActionMenu/ActionMenu';\nimport { Button, ButtonEmphasis, ButtonStyle } from '@components/Button';\nimport { IconArrowCircleUp, IconImageStack } from '@foundation/Icon/';\nimport { IconProps } from '@foundation/Icon/IconProps';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { merge } from '@utilities/merge';\nimport React, { ChangeEvent, ReactElement } from 'react';\nimport { MultiAssetPreview } from './MultiAssetPreview';\nimport { SelectedAsset } from './SingleAsset/SelectedAsset';\n\ntype BaseAsset = {\n    name: string;\n};\n\nexport type ImageAsset = {\n    type: 'image' | 'logo';\n    name: string;\n    extension: string;\n    src?: string;\n    alt?: string;\n    icon?: undefined;\n    size: number;\n};\n\ntype OtherAsset = BaseAsset & {\n    type: 'audio';\n    extension: string;\n    src?: undefined;\n    alt?: undefined;\n    icon?: undefined;\n    size: number;\n};\n\ntype IconAsset = BaseAsset & {\n    type: 'icon';\n    extension?: undefined;\n    src?: undefined;\n    alt?: undefined;\n    icon: ReactElement<IconProps>;\n    size?: undefined;\n};\n\nexport type UploadSource = { source: 'upload'; sourceName?: undefined };\nexport type LibrarySource = { source: 'library'; sourceName: string };\n\nexport enum AssetInputSize {\n    Small = 'Small',\n    Large = 'Large',\n}\n\nexport type AssetType =\n    | (ImageAsset & UploadSource)\n    | (ImageAsset & LibrarySource)\n    | (IconAsset & UploadSource)\n    | (IconAsset & LibrarySource)\n    | (OtherAsset & UploadSource)\n    | (OtherAsset & LibrarySource);\n\nexport type AssetInputProps = {\n    assets?: AssetType[];\n    size: AssetInputSize;\n    numberOfLocations?: number;\n    actions?: ActionMenuProps['menuBlocks'];\n    isLoading?: boolean;\n    hideSize?: boolean;\n    hideExtension?: boolean;\n    onUploadClick?: (files: FileList) => void;\n    onLibraryClick?: () => void;\n    onMultiAssetClick?: () => void;\n    acceptFileType?: string;\n};\n\nexport const AssetInput = ({\n    assets = [],\n    numberOfLocations = 1,\n    actions = [],\n    size = AssetInputSize.Small,\n    isLoading = false,\n    hideSize = false,\n    hideExtension = false,\n    onLibraryClick,\n    onUploadClick,\n    onMultiAssetClick,\n    acceptFileType,\n}: AssetInputProps): ReactElement => {\n    const assetsLength = assets.length;\n    const id = useMemoizedId();\n\n    const onFileChange = (event: ChangeEvent<HTMLInputElement>) => {\n        const files = event.target.files;\n\n        if (files && onUploadClick) {\n            onUploadClick(files);\n        }\n    };\n\n    if ((isLoading || assetsLength === 1) && actions) {\n        return (\n            <SelectedAsset\n                asset={assets[0]}\n                size={size}\n                actions={actions}\n                isLoading={isLoading}\n                hideExtension={hideExtension}\n                hideSize={hideSize}\n            />\n        );\n    }\n\n    if (assetsLength > 1 && onMultiAssetClick) {\n        return <MultiAssetPreview assets={assets} onClick={onMultiAssetClick} numberOfLocations={numberOfLocations} />;\n    }\n\n    return (\n        <div\n            data-test-id=\"asset-input-placeholder\"\n            className={merge([\n                'tw-grid tw-p-3 tw-border tw-border-dashed tw-border-black-10 tw-rounded',\n                onUploadClick && onLibraryClick ? 'tw-grid-cols-2 tw-divide-x tw-divide-black-10' : 'tw-grid-cols-1',\n            ])}\n        >\n            {onUploadClick && (\n                <div\n                    className={merge(['tw-flex tw-flex-col tw-h-8', onLibraryClick && 'tw-pr-3'])}\n                    data-test-id=\"asset-input-upload\"\n                >\n                    <label\n                        className=\"tw-relative tw-cursor-pointer tw-rounded tw-flex tw-items-center tw-justify-center tw-px-4 tw-h-9 tw-text-s  tw-bg-transparent hover:tw-bg-black-10 hover:tw-text-black active:tw-bg-black-20 active:tw-text-black dark:tw-text-white dark:hover:tw-bg-black-superdark dark:active:tw-bg-black-superdark dark:hover:tw-text-white tw-font-medium tw-text-black\"\n                        htmlFor={id}\n                    >\n                        <span className=\"tw--ml-1 tw-mr-1.5\">\n                            <IconArrowCircleUp size={IconSize.Size20} />\n                        </span>\n                        Upload\n                    </label>\n                    <input\n                        id={id}\n                        className=\"tw-hidden\"\n                        type=\"file\"\n                        accept={acceptFileType}\n                        multiple={!!onMultiAssetClick}\n                        onChange={onFileChange}\n                    />\n                </div>\n            )}\n            {onLibraryClick && (\n                <div\n                    className={merge(['tw-flex tw-flex-col tw-h-8', onUploadClick && 'tw-pl-3'])}\n                    data-test-id=\"asset-input-library\"\n                >\n                    <Button\n                        style={ButtonStyle.Default}\n                        onClick={onLibraryClick}\n                        emphasis={ButtonEmphasis.Weak}\n                        icon={<IconImageStack />}\n                    >\n                        Browse\n                    </Button>\n                </div>\n            )}\n        </div>\n    );\n};\nAssetInput.displayName = 'FondueAssetInput';\n"],"names":["AssetInputSize","AssetInput","assets","numberOfLocations","actions","size","isLoading","hideSize","hideExtension","onLibraryClick","onUploadClick","onMultiAssetClick","acceptFileType","assetsLength","id","useMemoizedId","onFileChange","event","files","React","SelectedAsset","MultiAssetPreview","merge","IconArrowCircleUp","IconSize","Button","ButtonStyle","ButtonEmphasis","IconImageStack"],"mappings":";;;;;;;;;;AAgDY,IAAAA,sBAAAA,OACRA,EAAA,QAAQ,SACRA,EAAA,QAAQ,SAFAA,IAAAA,KAAA,CAAA,CAAA;AA2BL,MAAMC,IAAa,CAAC;AAAA,EACvB,QAAAC,IAAS,CAAC;AAAA,EACV,mBAAAC,IAAoB;AAAA,EACpB,SAAAC,IAAU,CAAC;AAAA,EACX,MAAAC,IAAO;AAAA,EACP,WAAAC,IAAY;AAAA,EACZ,UAAAC,IAAW;AAAA,EACX,eAAAC,IAAgB;AAAA,EAChB,gBAAAC;AAAA,EACA,eAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,gBAAAC;AACJ,MAAqC;AACjC,QAAMC,IAAeX,EAAO,QACtBY,IAAKC,KAELC,IAAe,CAACC,MAAyC;AACrD,UAAAC,IAAQD,EAAM,OAAO;AAE3B,IAAIC,KAASR,KACTA,EAAcQ,CAAK;AAAA,EACvB;AAGC,UAAAZ,KAAaO,MAAiB,MAAMT,IAEjC,gBAAAe,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,OAAOlB,EAAO,CAAC;AAAA,MACf,MAAAG;AAAA,MACA,SAAAD;AAAA,MACA,WAAAE;AAAA,MACA,eAAAE;AAAA,MACA,UAAAD;AAAA,IAAA;AAAA,EAAA,IAKRM,IAAe,KAAKF,IACZ,gBAAAQ,EAAA,cAAAE,GAAA,EAAkB,QAAAnB,GAAgB,SAASS,GAAmB,mBAAAR,EAAsC,CAAA,IAI5G,gBAAAgB,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,gBAAa;AAAA,MACb,WAAWG,EAAM;AAAA,QACb;AAAA,QACAZ,KAAiBD,IAAiB,kDAAkD;AAAA,MAAA,CACvF;AAAA,IAAA;AAAA,IAEAC,KACG,gBAAAS,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAWG,EAAM,CAAC,8BAA8Bb,KAAkB,SAAS,CAAC;AAAA,QAC5E,gBAAa;AAAA,MAAA;AAAA,MAEb,gBAAAU,EAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,WAAU;AAAA,UACV,SAASL;AAAA,QAAA;AAAA,QAET,gBAAAK,EAAA,cAAC,UAAK,WAAU,qBAAA,mCACXI,GAAkB,EAAA,MAAMC,EAAS,OAAQ,CAAA,CAC9C;AAAA,QAAO;AAAA,MAEX;AAAA,MACA,gBAAAL,EAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,IAAAL;AAAA,UACA,WAAU;AAAA,UACV,MAAK;AAAA,UACL,QAAQF;AAAA,UACR,UAAU,CAAC,CAACD;AAAA,UACZ,UAAUK;AAAA,QAAA;AAAA,MACd;AAAA,IACJ;AAAA,IAEHP,KACG,gBAAAU,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAWG,EAAM,CAAC,8BAA8BZ,KAAiB,SAAS,CAAC;AAAA,QAC3E,gBAAa;AAAA,MAAA;AAAA,MAEb,gBAAAS,EAAA;AAAA,QAACM;AAAA,QAAA;AAAA,UACG,OAAOC,EAAY;AAAA,UACnB,SAASjB;AAAA,UACT,UAAUkB,EAAe;AAAA,UACzB,sCAAOC,GAAe,IAAA;AAAA,QAAA;AAAA,QACzB;AAAA,MAED;AAAA,IACJ;AAAA,EAAA;AAIhB;AACA3B,EAAW,cAAc;"}

package/dist/components/AssetInput/AssetThumbnail.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { ReactElement } from 'react';
 import { AssetInputProps } from './AssetInput';
 import { SelectedAssetProps } from './SingleAsset/SelectedAsset';
 type AssetThumbnailProps = {
@@ -7,5 +7,8 @@ type AssetThumbnailProps = {
     isActive?: boolean;
     isMultiAsset?: boolean;
 };
-export declare const AssetThumbnail: FC<AssetThumbnailProps>;
+export declare const AssetThumbnail: {
+    ({ asset, size, isActive, isMultiAsset, }: AssetThumbnailProps): ReactElement;
+    displayName: string;
+};
 export {};

package/dist/components/AssetInput/AssetThumbnail.es.js

@@ -12,7 +12,12 @@ const u = (t, a) => {
     default:
       return "tw-w-14 tw-h-full";
   }
-}, w = ({ asset: t, size: a, isActive: l = !1, isMultiAsset: r = !1 }) => {
+}, w = ({
+  asset: t,
+  size: a,
+  isActive: l = !1,
+  isMultiAsset: r = !1
+}) => {
   const i = t.type === "icon" || t.type === "audio" ? t.type : "default";
   return /* @__PURE__ */ e.createElement(
     "div",

package/dist/components/AssetInput/AssetThumbnail.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"AssetThumbnail.es.js","sources":["../../../src/components/AssetInput/AssetThumbnail.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { merge } from '@utilities/merge';\nimport React, { FC, cloneElement } from 'react';\nimport { AssetInputProps, AssetInputSize } from './AssetInput';\nimport { SelectedAssetProps } from './SingleAsset/SelectedAsset';\nimport { IconMusicNote } from '@foundation/Icon/Generated';\n\ntype AssetThumbnailProps = {\n    asset: SelectedAssetProps['asset'];\n    size: AssetInputProps['size'];\n    isActive?: boolean;\n    isMultiAsset?: boolean;\n};\n\nconst getIconSizeClassNames = (size: AssetInputSize, isMultiAsset: boolean) => {\n    switch (true) {\n        case size === AssetInputSize.Large:\n            return 'tw-w-full tw-h-32';\n        case isMultiAsset:\n            return 'tw-w-11 tw-h-11';\n        default:\n            return 'tw-w-14 tw-h-full';\n    }\n};\n\nexport const AssetThumbnail: FC<AssetThumbnailProps> = ({ asset, size, isActive = false, isMultiAsset = false }) => {\n    const thumbnailVariant = asset.type === 'icon' || asset.type === 'audio' ? asset.type : 'default';\n\n    return (\n        <div\n            className={merge([\n                'tw-flex tw-flex-none tw-items-center tw-justify-center tw-bg-black-5 dark:tw-bg-black-95',\n                getIconSizeClassNames(size, isMultiAsset),\n                isActive ? 'tw-text-black-100 dark:tw-text-white' : 'tw-text-black-80 dark:tw-text-black-20',\n            ])}\n            data-test-id=\"asset-input-thumbnail\"\n        >\n            {thumbnailVariant === 'icon' && (\n                <span data-test-id=\"asset-input-thumbnail-icon\">\n                    {asset.icon && cloneElement(asset.icon, { size: IconSize.Size24 })}\n                </span>\n            )}\n            {thumbnailVariant === 'audio' && (\n                <IconMusicNote size={IconSize.Size24} data-test-id=\"asset-input-thumbnail-audio\" />\n            )}\n            {thumbnailVariant === 'default' && (\n                <img\n                    src={asset.src}\n                    alt={asset.alt || ''}\n                    className=\"tw-max-h-full\"\n                    data-test-id=\"asset-input-thumbnail-image\"\n                />\n            )}\n        </div>\n    );\n};\nAssetThumbnail.displayName = 'FondueAssetThumbnail';\n"],"names":["getIconSizeClassNames","size","isMultiAsset","AssetInputSize","AssetThumbnail","asset","isActive","thumbnailVariant","React","merge","cloneElement","IconSize","IconMusicNote"],"mappings":";;;;;AAgBA,MAAMA,IAAwB,CAACC,GAAsBC,MAA0B;AAC3E,UAAQ,IAAM;AAAA,IACV,KAAKD,MAASE,EAAe;AAClB,aAAA;AAAA,IACX,KAAKD;AACM,aAAA;AAAA,IACX;AACW,aAAA;AAAA,EACf;AACJ,GAEaE,IAA0C,CAAC,EAAE,OAAAC,GAAO,MAAAJ,GAAM,UAAAK,IAAW,IAAO,cAAAJ,IAAe,SAAY;AAC1G,QAAAK,IAAmBF,EAAM,SAAS,UAAUA,EAAM,SAAS,UAAUA,EAAM,OAAO;AAGpF,SAAA,gBAAAG,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWC,EAAM;AAAA,QACb;AAAA,QACAT,EAAsBC,GAAMC,CAAY;AAAA,QACxCI,IAAW,yCAAyC;AAAA,MAAA,CACvD;AAAA,MACD,gBAAa;AAAA,IAAA;AAAA,IAEZC,MAAqB,UAClB,gBAAAC,EAAA,cAAC,QAAK,EAAA,gBAAa,gCACdH,EAAM,QAAQK,EAAaL,EAAM,MAAM,EAAE,MAAMM,EAAS,OAAA,CAAQ,CACrE;AAAA,IAEHJ,MAAqB,WACjB,gBAAAC,EAAA,cAAAI,GAAA,EAAc,MAAMD,EAAS,QAAQ,gBAAa,8BAA8B,CAAA;AAAA,IAEpFJ,MAAqB,aAClB,gBAAAC,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,KAAKH,EAAM;AAAA,QACX,KAAKA,EAAM,OAAO;AAAA,QAClB,WAAU;AAAA,QACV,gBAAa;AAAA,MAAA;AAAA,IACjB;AAAA,EAAA;AAIhB;AACAD,EAAe,cAAc;"}
+{"version":3,"file":"AssetThumbnail.es.js","sources":["../../../src/components/AssetInput/AssetThumbnail.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { merge } from '@utilities/merge';\nimport React, { ReactElement, cloneElement } from 'react';\nimport { AssetInputProps, AssetInputSize } from './AssetInput';\nimport { SelectedAssetProps } from './SingleAsset/SelectedAsset';\nimport { IconMusicNote } from '@foundation/Icon/Generated';\n\ntype AssetThumbnailProps = {\n    asset: SelectedAssetProps['asset'];\n    size: AssetInputProps['size'];\n    isActive?: boolean;\n    isMultiAsset?: boolean;\n};\n\nconst getIconSizeClassNames = (size: AssetInputSize, isMultiAsset: boolean) => {\n    switch (true) {\n        case size === AssetInputSize.Large:\n            return 'tw-w-full tw-h-32';\n        case isMultiAsset:\n            return 'tw-w-11 tw-h-11';\n        default:\n            return 'tw-w-14 tw-h-full';\n    }\n};\n\nexport const AssetThumbnail = ({\n    asset,\n    size,\n    isActive = false,\n    isMultiAsset = false,\n}: AssetThumbnailProps): ReactElement => {\n    const thumbnailVariant = asset.type === 'icon' || asset.type === 'audio' ? asset.type : 'default';\n\n    return (\n        <div\n            className={merge([\n                'tw-flex tw-flex-none tw-items-center tw-justify-center tw-bg-black-5 dark:tw-bg-black-95',\n                getIconSizeClassNames(size, isMultiAsset),\n                isActive ? 'tw-text-black-100 dark:tw-text-white' : 'tw-text-black-80 dark:tw-text-black-20',\n            ])}\n            data-test-id=\"asset-input-thumbnail\"\n        >\n            {thumbnailVariant === 'icon' && (\n                <span data-test-id=\"asset-input-thumbnail-icon\">\n                    {asset.icon && cloneElement(asset.icon, { size: IconSize.Size24 })}\n                </span>\n            )}\n            {thumbnailVariant === 'audio' && (\n                <IconMusicNote size={IconSize.Size24} data-test-id=\"asset-input-thumbnail-audio\" />\n            )}\n            {thumbnailVariant === 'default' && (\n                <img\n                    src={asset.src}\n                    alt={asset.alt || ''}\n                    className=\"tw-max-h-full\"\n                    data-test-id=\"asset-input-thumbnail-image\"\n                />\n            )}\n        </div>\n    );\n};\nAssetThumbnail.displayName = 'FondueAssetThumbnail';\n"],"names":["getIconSizeClassNames","size","isMultiAsset","AssetInputSize","AssetThumbnail","asset","isActive","thumbnailVariant","React","merge","cloneElement","IconSize","IconMusicNote"],"mappings":";;;;;AAgBA,MAAMA,IAAwB,CAACC,GAAsBC,MAA0B;AAC3E,UAAQ,IAAM;AAAA,IACV,KAAKD,MAASE,EAAe;AAClB,aAAA;AAAA,IACX,KAAKD;AACM,aAAA;AAAA,IACX;AACW,aAAA;AAAA,EACf;AACJ,GAEaE,IAAiB,CAAC;AAAA,EAC3B,OAAAC;AAAA,EACA,MAAAJ;AAAA,EACA,UAAAK,IAAW;AAAA,EACX,cAAAJ,IAAe;AACnB,MAAyC;AAC/B,QAAAK,IAAmBF,EAAM,SAAS,UAAUA,EAAM,SAAS,UAAUA,EAAM,OAAO;AAGpF,SAAA,gBAAAG,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWC,EAAM;AAAA,QACb;AAAA,QACAT,EAAsBC,GAAMC,CAAY;AAAA,QACxCI,IAAW,yCAAyC;AAAA,MAAA,CACvD;AAAA,MACD,gBAAa;AAAA,IAAA;AAAA,IAEZC,MAAqB,UAClB,gBAAAC,EAAA,cAAC,QAAK,EAAA,gBAAa,gCACdH,EAAM,QAAQK,EAAaL,EAAM,MAAM,EAAE,MAAMM,EAAS,OAAA,CAAQ,CACrE;AAAA,IAEHJ,MAAqB,WACjB,gBAAAC,EAAA,cAAAI,GAAA,EAAc,MAAMD,EAAS,QAAQ,gBAAa,8BAA8B,CAAA;AAAA,IAEpFJ,MAAqB,aAClB,gBAAAC,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,KAAKH,EAAM;AAAA,QACX,KAAKA,EAAM,OAAO;AAAA,QAClB,WAAU;AAAA,QACV,gBAAa;AAAA,MAAA;AAAA,IACjB;AAAA,EAAA;AAIhB;AACAD,EAAe,cAAc;"}

package/dist/components/AssetInput/MultiAssetPreview/MultiAssetPreview.d.ts

@@ -1,8 +1,8 @@
-import { FC } from 'react';
+import { ReactElement } from 'react';
 import { AssetType } from '../AssetInput';
 export type MultiAssetPreviewProps = {
     numberOfLocations: number;
     assets: AssetType[];
     onClick: () => void;
 };
-export declare const MultiAssetPreview: FC<MultiAssetPreviewProps>;
+export declare const MultiAssetPreview: ({ numberOfLocations, assets, onClick }: MultiAssetPreviewProps) => ReactElement;

package/dist/components/AssetInput/MultiAssetPreview/MultiAssetPreview.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiAssetPreview.es.js","sources":["../../../../src/components/AssetInput/MultiAssetPreview/MultiAssetPreview.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { IconCaretRight } from '@foundation/Icon/Generated';\nimport { useButton } from '@react-aria/button';\nimport { useFocusRing } from '@react-aria/focus';\nimport { mergeProps } from '@react-aria/utils';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport React, { FC, useRef } from 'react';\nimport { AssetType } from '../AssetInput';\nimport { SelectedAssetsThumbnail } from './SelectedAssetsThumbnail';\n\nexport type MultiAssetPreviewProps = {\n    numberOfLocations: number;\n    assets: AssetType[];\n    onClick: () => void;\n};\n\n// const FOCUS_STYLE = \"tw-border-black-90 dark:tw-border-black-10\";\n\nexport const MultiAssetPreview: FC<MultiAssetPreviewProps> = ({ numberOfLocations, assets, onClick }) => {\n    const buttonRef = useRef<HTMLButtonElement | null>(null);\n    const { buttonProps } = useButton({ onPress: onClick }, buttonRef);\n    const { isFocusVisible, focusProps } = useFocusRing();\n    const assetsLength = assets.length;\n\n    return (\n        <div data-test-id=\"multi-asset-preview\">\n            <button\n                title=\"multi-asset-preview\"\n                {...mergeProps(buttonProps, focusProps)}\n                ref={buttonRef}\n                className={merge([\n                    'tw-flex tw-border tw-rounded hover:tw-border-black-90 dark:hover:tw-border-black-40 focus-visible:tw-outline-none dark:tw-text-white tw-mb-4 tw-w-full',\n                    isFocusVisible\n                        ? `${FOCUS_STYLE} tw-border-black-90 dark:tw-border-black-10`\n                        : 'tw-border-black-20 dark:tw-border-black-80',\n                ])}\n            >\n                <SelectedAssetsThumbnail assets={assets} />\n\n                <div className=\"tw-py-6 tw-px-4 tw-flex\">\n                    <div className=\"tw-text-left\">\n                        <div className=\"tw-font-bold tw-text-m\" data-test-id=\"assets-amount\">\n                            {assetsLength} {assetsLength === 1 ? 'Asset' : 'Assets'}\n                        </div>\n                        <div className=\"tw-text-black-60 tw-text-s tw-mt-1\" data-test-id=\"number-of-locations\">\n                            {numberOfLocations} {numberOfLocations === 1 ? 'location' : 'locations'}\n                        </div>\n                    </div>\n                    <div className=\"tw-flex tw-items-center tw-text-black-70 tw-pl-4\">\n                        <div className=\"tw-absolute tw-right-12\">\n                            <IconCaretRight size={IconSize.Size24} />\n                        </div>\n                    </div>\n                </div>\n            </button>\n        </div>\n    );\n};\n"],"names":["MultiAssetPreview","numberOfLocations","assets","onClick","buttonRef","useRef","buttonProps","useButton","isFocusVisible","focusProps","useFocusRing","assetsLength","React","mergeProps","merge","FOCUS_STYLE","SelectedAssetsThumbnail","IconCaretRight","IconSize"],"mappings":";;;;;;;;;AAqBO,MAAMA,IAAgD,CAAC,EAAE,mBAAAC,GAAmB,QAAAC,GAAQ,SAAAC,QAAc;AAC/F,QAAAC,IAAYC,EAAiC,IAAI,GACjD,EAAE,aAAAC,MAAgBC,EAAU,EAAE,SAASJ,EAAA,GAAWC,CAAS,GAC3D,EAAE,gBAAAI,GAAgB,YAAAC,EAAW,IAAIC,EAAa,GAC9CC,IAAeT,EAAO;AAGxB,SAAA,gBAAAU,EAAA,cAAC,OAAI,EAAA,gBAAa,sBACd,GAAA,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,OAAM;AAAA,MACL,GAAGC,EAAWP,GAAaG,CAAU;AAAA,MACtC,KAAKL;AAAA,MACL,WAAWU,EAAM;AAAA,QACb;AAAA,QACAN,IACM,GAAGO,iDACH;AAAA,MAAA,CACT;AAAA,IAAA;AAAA,IAED,gBAAAH,EAAA,cAACI,KAAwB,QAAAd,EAAgB,CAAA;AAAA,IAEzC,gBAAAU,EAAA,cAAC,SAAI,WAAU,0BAAA,mCACV,OAAI,EAAA,WAAU,eACX,GAAA,gBAAAA,EAAA,cAAC,OAAI,EAAA,WAAU,0BAAyB,gBAAa,gBAAA,GAChDD,GAAa,KAAEA,MAAiB,IAAI,UAAU,QACnD,GACC,gBAAAC,EAAA,cAAA,OAAA,EAAI,WAAU,sCAAqC,gBAAa,sBAC5D,GAAAX,GAAkB,KAAEA,MAAsB,IAAI,aAAa,WAChE,CACJ,GACA,gBAAAW,EAAA,cAAC,OAAI,EAAA,WAAU,sDACV,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAU,0BAAA,GACV,gBAAAA,EAAA,cAAAK,GAAA,EAAe,MAAMC,EAAS,OAAQ,CAAA,CAC3C,CACJ,CACJ;AAAA,EAAA,CAER;AAER;"}
+{"version":3,"file":"MultiAssetPreview.es.js","sources":["../../../../src/components/AssetInput/MultiAssetPreview/MultiAssetPreview.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { IconCaretRight } from '@foundation/Icon/Generated';\nimport { useButton } from '@react-aria/button';\nimport { useFocusRing } from '@react-aria/focus';\nimport { mergeProps } from '@react-aria/utils';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport React, { ReactElement, useRef } from 'react';\nimport { AssetType } from '../AssetInput';\nimport { SelectedAssetsThumbnail } from './SelectedAssetsThumbnail';\n\nexport type MultiAssetPreviewProps = {\n    numberOfLocations: number;\n    assets: AssetType[];\n    onClick: () => void;\n};\n\n// const FOCUS_STYLE = \"tw-border-black-90 dark:tw-border-black-10\";\n\nexport const MultiAssetPreview = ({ numberOfLocations, assets, onClick }: MultiAssetPreviewProps): ReactElement => {\n    const buttonRef = useRef<HTMLButtonElement | null>(null);\n    const { buttonProps } = useButton({ onPress: onClick }, buttonRef);\n    const { isFocusVisible, focusProps } = useFocusRing();\n    const assetsLength = assets.length;\n\n    return (\n        <div data-test-id=\"multi-asset-preview\">\n            <button\n                title=\"multi-asset-preview\"\n                {...mergeProps(buttonProps, focusProps)}\n                ref={buttonRef}\n                className={merge([\n                    'tw-flex tw-border tw-rounded hover:tw-border-black-90 dark:hover:tw-border-black-40 focus-visible:tw-outline-none dark:tw-text-white tw-mb-4 tw-w-full',\n                    isFocusVisible\n                        ? `${FOCUS_STYLE} tw-border-black-90 dark:tw-border-black-10`\n                        : 'tw-border-black-20 dark:tw-border-black-80',\n                ])}\n            >\n                <SelectedAssetsThumbnail assets={assets} />\n\n                <div className=\"tw-py-6 tw-px-4 tw-flex\">\n                    <div className=\"tw-text-left\">\n                        <div className=\"tw-font-bold tw-text-m\" data-test-id=\"assets-amount\">\n                            {assetsLength} {assetsLength === 1 ? 'Asset' : 'Assets'}\n                        </div>\n                        <div className=\"tw-text-black-60 tw-text-s tw-mt-1\" data-test-id=\"number-of-locations\">\n                            {numberOfLocations} {numberOfLocations === 1 ? 'location' : 'locations'}\n                        </div>\n                    </div>\n                    <div className=\"tw-flex tw-items-center tw-text-black-70 tw-pl-4\">\n                        <div className=\"tw-absolute tw-right-12\">\n                            <IconCaretRight size={IconSize.Size24} />\n                        </div>\n                    </div>\n                </div>\n            </button>\n        </div>\n    );\n};\n"],"names":["MultiAssetPreview","numberOfLocations","assets","onClick","buttonRef","useRef","buttonProps","useButton","isFocusVisible","focusProps","useFocusRing","assetsLength","React","mergeProps","merge","FOCUS_STYLE","SelectedAssetsThumbnail","IconCaretRight","IconSize"],"mappings":";;;;;;;;;AAqBO,MAAMA,IAAoB,CAAC,EAAE,mBAAAC,GAAmB,QAAAC,GAAQ,SAAAC,QAAoD;AACzG,QAAAC,IAAYC,EAAiC,IAAI,GACjD,EAAE,aAAAC,MAAgBC,EAAU,EAAE,SAASJ,EAAA,GAAWC,CAAS,GAC3D,EAAE,gBAAAI,GAAgB,YAAAC,EAAW,IAAIC,EAAa,GAC9CC,IAAeT,EAAO;AAGxB,SAAA,gBAAAU,EAAA,cAAC,OAAI,EAAA,gBAAa,sBACd,GAAA,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,OAAM;AAAA,MACL,GAAGC,EAAWP,GAAaG,CAAU;AAAA,MACtC,KAAKL;AAAA,MACL,WAAWU,EAAM;AAAA,QACb;AAAA,QACAN,IACM,GAAGO,iDACH;AAAA,MAAA,CACT;AAAA,IAAA;AAAA,IAED,gBAAAH,EAAA,cAACI,KAAwB,QAAAd,EAAgB,CAAA;AAAA,IAEzC,gBAAAU,EAAA,cAAC,SAAI,WAAU,0BAAA,mCACV,OAAI,EAAA,WAAU,eACX,GAAA,gBAAAA,EAAA,cAAC,OAAI,EAAA,WAAU,0BAAyB,gBAAa,gBAAA,GAChDD,GAAa,KAAEA,MAAiB,IAAI,UAAU,QACnD,GACC,gBAAAC,EAAA,cAAA,OAAA,EAAI,WAAU,sCAAqC,gBAAa,sBAC5D,GAAAX,GAAkB,KAAEA,MAAsB,IAAI,aAAa,WAChE,CACJ,GACA,gBAAAW,EAAA,cAAC,OAAI,EAAA,WAAU,sDACV,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAU,0BAAA,GACV,gBAAAA,EAAA,cAAAK,GAAA,EAAe,MAAMC,EAAS,OAAQ,CAAA,CAC3C,CACJ,CACJ;AAAA,EAAA,CAER;AAER;"}

package/dist/components/AssetInput/MultiAssetPreview/SelectedAssetsThumbnail.d.ts

@@ -1,3 +1,6 @@
-import { FC } from 'react';
+import { ReactElement } from 'react';
 import { MultiAssetPreviewProps } from './MultiAssetPreview';
-export declare const SelectedAssetsThumbnail: FC<Pick<MultiAssetPreviewProps, 'assets'>>;
+export declare const SelectedAssetsThumbnail: {
+    ({ assets }: Pick<MultiAssetPreviewProps, 'assets'>): ReactElement;
+    displayName: string;
+};

package/dist/components/AssetInput/MultiAssetPreview/SelectedAssetsThumbnail.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectedAssetsThumbnail.es.js","sources":["../../../../src/components/AssetInput/MultiAssetPreview/SelectedAssetsThumbnail.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { merge } from '@utilities/merge';\nimport React, { FC } from 'react';\nimport { AssetInputSize, AssetType, ImageAsset, LibrarySource } from '../AssetInput';\nimport { AssetThumbnail } from '../AssetThumbnail';\nimport { MultiAssetPreviewProps } from './MultiAssetPreview';\n\nconst isImageAsset = (asset: AssetType): asset is ImageAsset & LibrarySource =>\n    asset.type === 'image' || asset.type === 'logo';\n\nexport const SelectedAssetsThumbnail: FC<Pick<MultiAssetPreviewProps, 'assets'>> = ({ assets }) => {\n    const assetslength = assets.length;\n    const previewAssets = assets.slice(0, 4);\n\n    if (assetslength < 4) {\n        for (const [index] of [...Array(4 - assetslength)].entries()) {\n            previewAssets.push({\n                name: `empty picture ${index + 1}`,\n                size: 20,\n                type: 'image',\n                extension: '',\n                src: '',\n                source: 'upload',\n            });\n        }\n    }\n    return (\n        <div className=\"tw-border-black-20 tw-grid tw-grid-cols-2 tw-gap-0.5\">\n            {previewAssets.map((asset, index) =>\n                isImageAsset(asset) ? (\n                    <div\n                        data-test-id=\"assets-image\"\n                        key={asset.name}\n                        style={asset.src ? { backgroundImage: `url(${asset.src})` } : {}}\n                        className={merge([\n                            index === 0 ? 'tw-rounded-tl' : index === 2 && 'tw-rounded-bl',\n                            'tw-h-11 tw-w-11 tw-bg-black-5',\n                        ])}\n                    />\n                ) : (\n                    <div className=\"tw-h-11 tw-w-11\" key={asset.src}>\n                        <AssetThumbnail asset={asset} size={AssetInputSize.Small} isMultiAsset={true} />\n                    </div>\n                ),\n            )}\n        </div>\n    );\n};\nSelectedAssetsThumbnail.displayName = 'FondueSelectedAssetsThumbnail';\n"],"names":["isImageAsset","asset","SelectedAssetsThumbnail","assets","assetslength","previewAssets","index","React","merge","AssetThumbnail","AssetInputSize"],"mappings":";;;;AAQA,MAAMA,IAAe,CAACC,MAClBA,EAAM,SAAS,WAAWA,EAAM,SAAS,QAEhCC,IAAsE,CAAC,EAAE,QAAAC,QAAa;AAC/F,QAAMC,IAAeD,EAAO,QACtBE,IAAgBF,EAAO,MAAM,GAAG,CAAC;AAEvC,MAAIC,IAAe;AACJ,eAAA,CAACE,CAAK,KAAK,CAAC,GAAG,MAAM,IAAIF,CAAY,CAAC,EAAE;AAC/C,MAAAC,EAAc,KAAK;AAAA,QACf,MAAM,iBAAiBC,IAAQ;AAAA,QAC/B,MAAM;AAAA,QACN,MAAM;AAAA,QACN,WAAW;AAAA,QACX,KAAK;AAAA,QACL,QAAQ;AAAA,MAAA,CACX;AAGT,SACK,gBAAAC,EAAA,cAAA,OAAA,EAAI,WAAU,uDAAA,GACVF,EAAc;AAAA,IAAI,CAACJ,GAAOK,MACvBN,EAAaC,CAAK,IACd,gBAAAM,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,gBAAa;AAAA,QACb,KAAKN,EAAM;AAAA,QACX,OAAOA,EAAM,MAAM,EAAE,iBAAiB,OAAOA,EAAM,OAAO,IAAI,CAAC;AAAA,QAC/D,WAAWO,EAAM;AAAA,UACbF,MAAU,IAAI,kBAAkBA,MAAU,KAAK;AAAA,UAC/C;AAAA,QAAA,CACH;AAAA,MAAA;AAAA,IAAA,IAGJ,gBAAAC,EAAA,cAAA,OAAA,EAAI,WAAU,mBAAkB,KAAKN,EAAM,IAAA,GACvC,gBAAAM,EAAA,cAAAE,GAAA,EAAe,OAAAR,GAAc,MAAMS,EAAe,OAAO,cAAc,IAAM,CAClF;AAAA,EAAA,CAGZ;AAER;AACAR,EAAwB,cAAc;"}
+{"version":3,"file":"SelectedAssetsThumbnail.es.js","sources":["../../../../src/components/AssetInput/MultiAssetPreview/SelectedAssetsThumbnail.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { merge } from '@utilities/merge';\nimport React, { ReactElement } from 'react';\nimport { AssetInputSize, AssetType, ImageAsset, LibrarySource } from '../AssetInput';\nimport { AssetThumbnail } from '../AssetThumbnail';\nimport { MultiAssetPreviewProps } from './MultiAssetPreview';\n\nconst isImageAsset = (asset: AssetType): asset is ImageAsset & LibrarySource =>\n    asset.type === 'image' || asset.type === 'logo';\n\nexport const SelectedAssetsThumbnail = ({ assets }: Pick<MultiAssetPreviewProps, 'assets'>): ReactElement => {\n    const assetslength = assets.length;\n    const previewAssets = assets.slice(0, 4);\n\n    if (assetslength < 4) {\n        for (const [index] of [...Array(4 - assetslength)].entries()) {\n            previewAssets.push({\n                name: `empty picture ${index + 1}`,\n                size: 20,\n                type: 'image',\n                extension: '',\n                src: '',\n                source: 'upload',\n            });\n        }\n    }\n    return (\n        <div className=\"tw-border-black-20 tw-grid tw-grid-cols-2 tw-gap-0.5\">\n            {previewAssets.map((asset, index) =>\n                isImageAsset(asset) ? (\n                    <div\n                        data-test-id=\"assets-image\"\n                        key={asset.name}\n                        style={asset.src ? { backgroundImage: `url(${asset.src})` } : {}}\n                        className={merge([\n                            index === 0 ? 'tw-rounded-tl' : index === 2 && 'tw-rounded-bl',\n                            'tw-h-11 tw-w-11 tw-bg-black-5',\n                        ])}\n                    />\n                ) : (\n                    <div className=\"tw-h-11 tw-w-11\" key={asset.src}>\n                        <AssetThumbnail asset={asset} size={AssetInputSize.Small} isMultiAsset={true} />\n                    </div>\n                ),\n            )}\n        </div>\n    );\n};\nSelectedAssetsThumbnail.displayName = 'FondueSelectedAssetsThumbnail';\n"],"names":["isImageAsset","asset","SelectedAssetsThumbnail","assets","assetslength","previewAssets","index","React","merge","AssetThumbnail","AssetInputSize"],"mappings":";;;;AAQA,MAAMA,IAAe,CAACC,MAClBA,EAAM,SAAS,WAAWA,EAAM,SAAS,QAEhCC,IAA0B,CAAC,EAAE,QAAAC,QAAmE;AACzG,QAAMC,IAAeD,EAAO,QACtBE,IAAgBF,EAAO,MAAM,GAAG,CAAC;AAEvC,MAAIC,IAAe;AACJ,eAAA,CAACE,CAAK,KAAK,CAAC,GAAG,MAAM,IAAIF,CAAY,CAAC,EAAE;AAC/C,MAAAC,EAAc,KAAK;AAAA,QACf,MAAM,iBAAiBC,IAAQ;AAAA,QAC/B,MAAM;AAAA,QACN,MAAM;AAAA,QACN,WAAW;AAAA,QACX,KAAK;AAAA,QACL,QAAQ;AAAA,MAAA,CACX;AAGT,SACK,gBAAAC,EAAA,cAAA,OAAA,EAAI,WAAU,uDAAA,GACVF,EAAc;AAAA,IAAI,CAACJ,GAAOK,MACvBN,EAAaC,CAAK,IACd,gBAAAM,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,gBAAa;AAAA,QACb,KAAKN,EAAM;AAAA,QACX,OAAOA,EAAM,MAAM,EAAE,iBAAiB,OAAOA,EAAM,OAAO,IAAI,CAAC;AAAA,QAC/D,WAAWO,EAAM;AAAA,UACbF,MAAU,IAAI,kBAAkBA,MAAU,KAAK;AAAA,UAC/C;AAAA,QAAA,CACH;AAAA,MAAA;AAAA,IAAA,IAGJ,gBAAAC,EAAA,cAAA,OAAA,EAAI,WAAU,mBAAkB,KAAKN,EAAM,IAAA,GACvC,gBAAAM,EAAA,cAAAE,GAAA,EAAe,OAAAR,GAAc,MAAMS,EAAe,OAAO,cAAc,IAAM,CAClF;AAAA,EAAA,CAGZ;AAER;AACAR,EAAwB,cAAc;"}

package/dist/components/AssetInput/SingleAsset/AssetSubline.d.ts

@@ -1,6 +1,9 @@
-import { FC } from 'react';
+import { ReactElement } from 'react';
 import { AssetInputProps } from '../AssetInput';
 import { SelectedAssetProps } from './SelectedAsset';
 type AssetSublineProps = Pick<AssetInputProps, 'isLoading' | 'hideSize' | 'hideExtension'> & Pick<SelectedAssetProps, 'asset'>;
-export declare const AssetSubline: FC<AssetSublineProps>;
+export declare const AssetSubline: {
+    ({ asset, isLoading, hideSize, hideExtension, }: AssetSublineProps): ReactElement;
+    displayName: string;
+};
 export {};

package/dist/components/AssetInput/SingleAsset/AssetSubline.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"AssetSubline.es.js","sources":["../../../../src/components/AssetInput/SingleAsset/AssetSubline.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { FC } from 'react';\nimport { AssetInputProps } from '../AssetInput';\nimport { SelectedAssetProps } from './SelectedAsset';\nimport { IconArrowCircleUp, IconImageStack } from '@foundation/Icon/Generated';\n\ntype AssetSublineProps = Pick<AssetInputProps, 'isLoading' | 'hideSize' | 'hideExtension'> &\n    Pick<SelectedAssetProps, 'asset'>;\n\nexport const AssetSubline: FC<AssetSublineProps> = ({\n    asset,\n    isLoading = false,\n    hideSize = false,\n    hideExtension = false,\n}) => {\n    let title = isLoading ? 'Uploading' : 'Uploaded';\n    if (asset?.source === 'library') {\n        title = asset.sourceName;\n    }\n\n    return (\n        <span className=\"tw-max-w-full tw-flex tw-flex-row tw-items-center tw-gap-1 tw-text-black-80 tw-text-xxs tw-overflow-hidden\">\n            <div className=\"tw-flex-none tw-inline-flex tw-items-center tw-justify-center\">\n                {asset?.source === 'library' ? <IconImageStack /> : <IconArrowCircleUp />}\n            </div>\n            {title && <span className=\"tw-whitespace-nowrap\">{title}</span>}\n            {asset && !isLoading && (\n                <>\n                    <FileInfo label={asset.extension} hide={hideExtension} />\n                    <FileInfo label={asset.size} hide={hideSize} />\n                </>\n            )}\n        </span>\n    );\n};\nAssetSubline.displayName = 'FondueAssetSubline';\n\nconst FileInfo: FC<{ label?: string | number; hide: boolean }> = ({ label, hide }) => {\n    if (hide || !label) {\n        return null;\n    }\n\n    return (\n        <>\n            <span className=\"tw-text-m tw-text-black-20 tw-h-4 tw-flex tw-items-center\">•</span>\n            <span className=\"tw-whitespace-nowrap\">{label}</span>\n        </>\n    );\n};\nFileInfo.displayName = 'FondueFileInfo';\n"],"names":["AssetSubline","asset","isLoading","hideSize","hideExtension","title","React","IconImageStack","IconArrowCircleUp","FileInfo","label","hide"],"mappings":";;;AAUO,MAAMA,IAAsC,CAAC;AAAA,EAChD,OAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,UAAAC,IAAW;AAAA,EACX,eAAAC,IAAgB;AACpB,MAAM;AACE,MAAAC,IAAQH,IAAY,cAAc;AAClC,UAAAD,KAAA,gBAAAA,EAAO,YAAW,cAClBI,IAAQJ,EAAM,aAId,gBAAAK,EAAA,cAAC,UAAK,WAAU,6GAAA,mCACX,OAAI,EAAA,WAAU,oEACVL,KAAA,gBAAAA,EAAO,YAAW,YAAa,gBAAAK,EAAA,cAAAC,GAAA,IAAe,IAAM,gBAAAD,EAAA,cAAAE,GAAA,IAAkB,CAC3E,GACCH,qCAAU,QAAK,EAAA,WAAU,0BAAwBA,CAAM,GACvDJ,KAAS,CAACC,uDAEF,gBAAAI,EAAA,cAAAG,GAAA,EAAS,OAAOR,EAAM,WAAW,MAAMG,EAAe,CAAA,mCACtDK,GAAS,EAAA,OAAOR,EAAM,MAAM,MAAME,EAAU,CAAA,CACjD,CAER;AAER;AACAH,EAAa,cAAc;AAE3B,MAAMS,IAA2D,CAAC,EAAE,OAAAC,GAAO,MAAAC,QACnEA,KAAQ,CAACD,IACF,OAKH,gBAAAJ,EAAA,cAAAA,EAAA,UAAA,MAAA,gBAAAA,EAAA,cAAC,QAAK,EAAA,WAAU,4DAA4D,GAAA,GAAC,GAC7E,gBAAAA,EAAA,cAAC,QAAK,EAAA,WAAU,uBAAwB,GAAAI,CAAM,CAClD;AAGRD,EAAS,cAAc;"}
+{"version":3,"file":"AssetSubline.es.js","sources":["../../../../src/components/AssetInput/SingleAsset/AssetSubline.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { ReactElement } from 'react';\nimport { AssetInputProps } from '../AssetInput';\nimport { SelectedAssetProps } from './SelectedAsset';\nimport { IconArrowCircleUp, IconImageStack } from '@foundation/Icon/Generated';\n\ntype AssetSublineProps = Pick<AssetInputProps, 'isLoading' | 'hideSize' | 'hideExtension'> &\n    Pick<SelectedAssetProps, 'asset'>;\n\nexport const AssetSubline = ({\n    asset,\n    isLoading = false,\n    hideSize = false,\n    hideExtension = false,\n}: AssetSublineProps): ReactElement => {\n    let title = isLoading ? 'Uploading' : 'Uploaded';\n    if (asset?.source === 'library') {\n        title = asset.sourceName;\n    }\n\n    return (\n        <span className=\"tw-max-w-full tw-flex tw-flex-row tw-items-center tw-gap-1 tw-text-black-80 tw-text-xxs tw-overflow-hidden\">\n            <div className=\"tw-flex-none tw-inline-flex tw-items-center tw-justify-center\">\n                {asset?.source === 'library' ? <IconImageStack /> : <IconArrowCircleUp />}\n            </div>\n            {title && <span className=\"tw-whitespace-nowrap\">{title}</span>}\n            {asset && !isLoading && (\n                <>\n                    <FileInfo label={asset.extension} hide={hideExtension} />\n                    <FileInfo label={asset.size} hide={hideSize} />\n                </>\n            )}\n        </span>\n    );\n};\nAssetSubline.displayName = 'FondueAssetSubline';\n\nconst FileInfo = ({ label, hide }: { label?: string | number; hide: boolean }): Nullable<ReactElement> => {\n    if (hide || !label) {\n        return null;\n    }\n\n    return (\n        <>\n            <span className=\"tw-text-m tw-text-black-20 tw-h-4 tw-flex tw-items-center\">•</span>\n            <span className=\"tw-whitespace-nowrap\">{label}</span>\n        </>\n    );\n};\nFileInfo.displayName = 'FondueFileInfo';\n"],"names":["AssetSubline","asset","isLoading","hideSize","hideExtension","title","React","IconImageStack","IconArrowCircleUp","FileInfo","label","hide"],"mappings":";;;AAUO,MAAMA,IAAe,CAAC;AAAA,EACzB,OAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,UAAAC,IAAW;AAAA,EACX,eAAAC,IAAgB;AACpB,MAAuC;AAC/B,MAAAC,IAAQH,IAAY,cAAc;AAClC,UAAAD,KAAA,gBAAAA,EAAO,YAAW,cAClBI,IAAQJ,EAAM,aAId,gBAAAK,EAAA,cAAC,UAAK,WAAU,6GAAA,mCACX,OAAI,EAAA,WAAU,oEACVL,KAAA,gBAAAA,EAAO,YAAW,YAAa,gBAAAK,EAAA,cAAAC,GAAA,IAAe,IAAM,gBAAAD,EAAA,cAAAE,GAAA,IAAkB,CAC3E,GACCH,qCAAU,QAAK,EAAA,WAAU,0BAAwBA,CAAM,GACvDJ,KAAS,CAACC,uDAEF,gBAAAI,EAAA,cAAAG,GAAA,EAAS,OAAOR,EAAM,WAAW,MAAMG,EAAe,CAAA,mCACtDK,GAAS,EAAA,OAAOR,EAAM,MAAM,MAAME,EAAU,CAAA,CACjD,CAER;AAER;AACAH,EAAa,cAAc;AAE3B,MAAMS,IAAW,CAAC,EAAE,OAAAC,GAAO,MAAAC,QACnBA,KAAQ,CAACD,IACF,OAKH,gBAAAJ,EAAA,cAAAA,EAAA,UAAA,MAAA,gBAAAA,EAAA,cAAC,QAAK,EAAA,WAAU,4DAA4D,GAAA,GAAC,GAC7E,gBAAAA,EAAA,cAAC,QAAK,EAAA,WAAU,uBAAwB,GAAAI,CAAM,CAClD;AAGRD,EAAS,cAAc;"}

package/dist/components/AssetInput/SingleAsset/SelectedAsset.d.ts

@@ -1,6 +1,9 @@
-import { FC } from 'react';
+import { ReactElement } from 'react';
 import { AssetInputProps, AssetType } from '../AssetInput';
 export type SelectedAssetProps = Pick<AssetInputProps, 'actions' | 'isLoading' | 'size' | 'hideSize' | 'hideExtension'> & {
     asset: AssetType;
 };
-export declare const SelectedAsset: FC<Required<Omit<SelectedAssetProps, 'hideSize' | 'hideExtension'>> & Pick<SelectedAssetProps, 'hideSize' | 'hideExtension'>>;
+export declare const SelectedAsset: {
+    ({ asset, size, actions, isLoading, hideSize, hideExtension, }: Required<Omit<SelectedAssetProps, 'hideSize' | 'hideExtension'>> & Pick<SelectedAssetProps, 'hideSize' | 'hideExtension'>): ReactElement;
+    displayName: string;
+};

package/dist/components/AssetInput/SingleAsset/SelectedAsset.es.js

@@ -16,7 +16,14 @@ import { AssetThumbnail as q } from "../AssetThumbnail.es.js";
 import { AssetSubline as G } from "./AssetSubline.es.js";
 import { SpinningCircle as H } from "./SpinningCircle.es.js";
 import J from "../../../foundation/Icon/Generated/IconCaretDown.es.js";
-const K = ({ asset: e, size: n, actions: x, isLoading: m, hideSize: E = !1, hideExtension: v = !1 }) => {
+const K = ({
+  asset: e,
+  size: n,
+  actions: x,
+  isLoading: m,
+  hideSize: E = !1,
+  hideExtension: v = !1
+}) => {
   const k = b(), w = b(), r = g(null), o = L({ closeOnSelect: !0 }), { isOpen: l, focusStrategy: y } = o, { menuTriggerProps: S } = M({}, o, r), { buttonProps: N } = B(S, r), { isFocusVisible: i, focusProps: A } = D(), u = g(null), { overlayProps: F } = W(
     { onClose: () => o.close(), shouldCloseOnBlur: !0, isOpen: l, isDismissable: !0 },
     u

package/dist/components/AssetInput/SingleAsset/SelectedAsset.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectedAsset.es.js","sources":["../../../../src/components/AssetInput/SingleAsset/SelectedAsset.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { ActionMenu } from '@components/ActionMenu/ActionMenu/ActionMenu';\nimport { IconCaretDown } from '@foundation/Icon/Generated';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { useButton } from '@react-aria/button';\nimport { FocusScope, useFocusRing } from '@react-aria/focus';\nimport { useMenuTrigger } from '@react-aria/menu';\nimport { DismissButton, useOverlay } from '@react-aria/overlays';\nimport { mergeProps } from '@react-aria/utils';\nimport { useMenuTriggerState } from '@react-stately/menu';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport React, { FC, useEffect, useRef, useState } from 'react';\nimport { AssetInputProps, AssetInputSize, AssetType } from '../AssetInput';\nimport { AssetThumbnail } from '../AssetThumbnail';\nimport { AssetSubline } from './AssetSubline';\nimport { SpinningCircle } from './SpinningCircle';\n\nexport type SelectedAssetProps = Pick<\n    AssetInputProps,\n    'actions' | 'isLoading' | 'size' | 'hideSize' | 'hideExtension'\n> & {\n    asset: AssetType;\n};\n\nexport const SelectedAsset: FC<\n    Required<Omit<SelectedAssetProps, 'hideSize' | 'hideExtension'>> &\n        Pick<SelectedAssetProps, 'hideSize' | 'hideExtension'>\n> = ({ asset, size, actions, isLoading, hideSize = false, hideExtension = false }) => {\n    const menuId = useMemoizedId();\n    const labelId = useMemoizedId();\n    const buttonRef = useRef<HTMLButtonElement | null>(null);\n    const menuState = useMenuTriggerState({ closeOnSelect: true });\n    const { isOpen, focusStrategy } = menuState;\n    const { menuTriggerProps } = useMenuTrigger({}, menuState, buttonRef);\n    const { buttonProps } = useButton(menuTriggerProps, buttonRef);\n    const { isFocusVisible, focusProps } = useFocusRing();\n    const overlayRef = useRef<HTMLDivElement | null>(null);\n    const { overlayProps } = useOverlay(\n        { onClose: () => menuState.close(), shouldCloseOnBlur: true, isOpen, isDismissable: true },\n        overlayRef,\n    );\n    const title = asset?.name || 'Your Asset';\n\n    const [flyoutWidth, setFlyoutWidth] = useState(0);\n\n    useEffect(() => {\n        let timer: number | null = null;\n        const calculateFlyoutWidth = () => {\n            const calculatedWidth = buttonRef.current?.getBoundingClientRect().width ?? 0;\n            timer = window.setTimeout(() => setFlyoutWidth(calculatedWidth), 0);\n        };\n        const resizeObserver = new ResizeObserver(calculateFlyoutWidth);\n        if (buttonRef.current) {\n            resizeObserver.observe(buttonRef.current);\n        }\n\n        return () => {\n            timer && clearTimeout(timer);\n            resizeObserver.disconnect();\n        };\n    }, []);\n\n    return (\n        <div\n            className=\"tw-font-sans tw-w-full tw-text-s tw-bg-transparent tw-font-normal tw-min-w-0\"\n            aria-labelledby={labelId}\n            title={title}\n            data-test-id=\"asset-single-input\"\n        >\n            <button\n                {...mergeProps(buttonProps, focusProps)}\n                ref={buttonRef}\n                className={merge([\n                    'tw-w-full tw-flex tw-border tw-rounded tw-overflow-hidden hover:tw-border-black-90 dark:hover:tw-border-black-40 focus-visible:tw-outline-none',\n                    isFocusVisible && FOCUS_STYLE,\n                    size === AssetInputSize.Large ? 'tw-h-[11.5rem] tw-flex-col' : 'tw-h-14',\n                    isOpen || isFocusVisible\n                        ? 'tw-border-black-90 dark:tw-border-black-10'\n                        : 'tw-border-black-20 dark:tw-border-black-80',\n                ])}\n            >\n                {isLoading && !asset && (\n                    <div\n                        className={merge([\n                            'tw-flex tw-justify-center tw-items-center',\n                            size === AssetInputSize.Large ? 'tw-w-full tw-h-32' : 'tw-w-14 tw-h-full',\n                        ])}\n                    >\n                        <SpinningCircle size={size} />\n                    </div>\n                )}\n                {asset && <AssetThumbnail asset={asset} size={size} isActive={isOpen || isFocusVisible} />}\n                <div\n                    className={merge([\n                        'tw-min-w-0 tw-max-w-full tw-flex tw-flex-auto tw-self-stretch tw-border-black-100 tw-border-opacity-25',\n                        size === AssetInputSize.Large ? 'tw-h-14 tw-border-t' : 'tw-h-full tw-border-l',\n                    ])}\n                >\n                    <div className=\"tw-min-w-0 tw-pr-3 tw-pl-4 tw-flex tw-flex-auto tw-flex-col tw-items-start tw-justify-center tw-h-full\">\n                        <span\n                            id={labelId}\n                            className={merge([\n                                'tw-max-w-full tw-text-black-100 tw-text-s tw-truncate dark:tw-text-white',\n                                (isOpen || isFocusVisible) && 'tw-font-medium',\n                            ])}\n                        >\n                            {title}\n                        </span>\n                        <AssetSubline\n                            asset={asset}\n                            isLoading={isLoading}\n                            hideSize={hideSize}\n                            hideExtension={hideExtension}\n                        />\n                    </div>\n                    <div className=\"tw-p-4 tw-flex tw-flex-none tw-items-center tw-justify-center\">\n                        <span\n                            className={merge([\n                                'tw-transition-transform',\n                                isOpen ? 'tw-rotate-180 tw-text-black-90' : 'tw-text-black-60',\n                            ])}\n                        >\n                            <IconCaretDown size={IconSize.Size16} />\n                        </span>\n                    </div>\n                </div>\n            </button>\n\n            <AnimatePresence>\n                {isOpen && (\n                    <motion.div\n                        style={{\n                            width: flyoutWidth,\n                        }}\n                        className=\"tw-absolute tw-left-auto tw-w-full tw-overflow-hidden tw-box-border tw-p-0 tw-shadow-mid tw-list-none tw-m-0 tw-mt-2 tw-z-20\"\n                        data-test-id=\"asset-single-input-flyout\"\n                        key={`asset-input-menu-${menuId}`}\n                        initial={{ height: 0 }}\n                        animate={{ height: 'auto' }}\n                        exit={{ height: 0 }}\n                        transition={{ ease: [0.04, 0.62, 0.23, 0.98], duration: 0.5 }}\n                    >\n                        <FocusScope restoreFocus>\n                            <div {...overlayProps} ref={overlayRef}>\n                                <DismissButton onDismiss={() => menuState.close()} />\n                                <ActionMenu\n                                    menuBlocks={actions}\n                                    focus={focusStrategy}\n                                    onClick={() => menuState.close()}\n                                />\n                                <DismissButton onDismiss={() => menuState.close()} />\n                            </div>\n                        </FocusScope>\n                    </motion.div>\n                )}\n            </AnimatePresence>\n        </div>\n    );\n};\nSelectedAsset.displayName = 'FondueSelectedAsset';\n"],"names":["SelectedAsset","asset","size","actions","isLoading","hideSize","hideExtension","menuId","useMemoizedId","labelId","buttonRef","useRef","menuState","useMenuTriggerState","isOpen","focusStrategy","menuTriggerProps","useMenuTrigger","buttonProps","useButton","isFocusVisible","focusProps","useFocusRing","overlayRef","overlayProps","useOverlay","title","flyoutWidth","setFlyoutWidth","useState","useEffect","timer","calculateFlyoutWidth","calculatedWidth","_a","resizeObserver","React","mergeProps","merge","FOCUS_STYLE","AssetInputSize","SpinningCircle","AssetThumbnail","AssetSubline","IconCaretDown","IconSize","AnimatePresence","motion","FocusScope","DismissButton","ActionMenu"],"mappings":"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"}
+{"version":3,"file":"SelectedAsset.es.js","sources":["../../../../src/components/AssetInput/SingleAsset/SelectedAsset.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { ActionMenu } from '@components/ActionMenu/ActionMenu/ActionMenu';\nimport { IconCaretDown } from '@foundation/Icon/Generated';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { useButton } from '@react-aria/button';\nimport { FocusScope, useFocusRing } from '@react-aria/focus';\nimport { useMenuTrigger } from '@react-aria/menu';\nimport { DismissButton, useOverlay } from '@react-aria/overlays';\nimport { mergeProps } from '@react-aria/utils';\nimport { useMenuTriggerState } from '@react-stately/menu';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport React, { ReactElement, useEffect, useRef, useState } from 'react';\nimport { AssetInputProps, AssetInputSize, AssetType } from '../AssetInput';\nimport { AssetThumbnail } from '../AssetThumbnail';\nimport { AssetSubline } from './AssetSubline';\nimport { SpinningCircle } from './SpinningCircle';\n\nexport type SelectedAssetProps = Pick<\n    AssetInputProps,\n    'actions' | 'isLoading' | 'size' | 'hideSize' | 'hideExtension'\n> & {\n    asset: AssetType;\n};\n\nexport const SelectedAsset = ({\n    asset,\n    size,\n    actions,\n    isLoading,\n    hideSize = false,\n    hideExtension = false,\n}: Required<Omit<SelectedAssetProps, 'hideSize' | 'hideExtension'>> &\n    Pick<SelectedAssetProps, 'hideSize' | 'hideExtension'>): ReactElement => {\n    const menuId = useMemoizedId();\n    const labelId = useMemoizedId();\n    const buttonRef = useRef<HTMLButtonElement | null>(null);\n    const menuState = useMenuTriggerState({ closeOnSelect: true });\n    const { isOpen, focusStrategy } = menuState;\n    const { menuTriggerProps } = useMenuTrigger({}, menuState, buttonRef);\n    const { buttonProps } = useButton(menuTriggerProps, buttonRef);\n    const { isFocusVisible, focusProps } = useFocusRing();\n    const overlayRef = useRef<HTMLDivElement | null>(null);\n    const { overlayProps } = useOverlay(\n        { onClose: () => menuState.close(), shouldCloseOnBlur: true, isOpen, isDismissable: true },\n        overlayRef,\n    );\n    const title = asset?.name || 'Your Asset';\n\n    const [flyoutWidth, setFlyoutWidth] = useState(0);\n\n    useEffect(() => {\n        let timer: number | null = null;\n        const calculateFlyoutWidth = () => {\n            const calculatedWidth = buttonRef.current?.getBoundingClientRect().width ?? 0;\n            timer = window.setTimeout(() => setFlyoutWidth(calculatedWidth), 0);\n        };\n        const resizeObserver = new ResizeObserver(calculateFlyoutWidth);\n        if (buttonRef.current) {\n            resizeObserver.observe(buttonRef.current);\n        }\n\n        return () => {\n            timer && clearTimeout(timer);\n            resizeObserver.disconnect();\n        };\n    }, []);\n\n    return (\n        <div\n            className=\"tw-font-sans tw-w-full tw-text-s tw-bg-transparent tw-font-normal tw-min-w-0\"\n            aria-labelledby={labelId}\n            title={title}\n            data-test-id=\"asset-single-input\"\n        >\n            <button\n                {...mergeProps(buttonProps, focusProps)}\n                ref={buttonRef}\n                className={merge([\n                    'tw-w-full tw-flex tw-border tw-rounded tw-overflow-hidden hover:tw-border-black-90 dark:hover:tw-border-black-40 focus-visible:tw-outline-none',\n                    isFocusVisible && FOCUS_STYLE,\n                    size === AssetInputSize.Large ? 'tw-h-[11.5rem] tw-flex-col' : 'tw-h-14',\n                    isOpen || isFocusVisible\n                        ? 'tw-border-black-90 dark:tw-border-black-10'\n                        : 'tw-border-black-20 dark:tw-border-black-80',\n                ])}\n            >\n                {isLoading && !asset && (\n                    <div\n                        className={merge([\n                            'tw-flex tw-justify-center tw-items-center',\n                            size === AssetInputSize.Large ? 'tw-w-full tw-h-32' : 'tw-w-14 tw-h-full',\n                        ])}\n                    >\n                        <SpinningCircle size={size} />\n                    </div>\n                )}\n                {asset && <AssetThumbnail asset={asset} size={size} isActive={isOpen || isFocusVisible} />}\n                <div\n                    className={merge([\n                        'tw-min-w-0 tw-max-w-full tw-flex tw-flex-auto tw-self-stretch tw-border-black-100 tw-border-opacity-25',\n                        size === AssetInputSize.Large ? 'tw-h-14 tw-border-t' : 'tw-h-full tw-border-l',\n                    ])}\n                >\n                    <div className=\"tw-min-w-0 tw-pr-3 tw-pl-4 tw-flex tw-flex-auto tw-flex-col tw-items-start tw-justify-center tw-h-full\">\n                        <span\n                            id={labelId}\n                            className={merge([\n                                'tw-max-w-full tw-text-black-100 tw-text-s tw-truncate dark:tw-text-white',\n                                (isOpen || isFocusVisible) && 'tw-font-medium',\n                            ])}\n                        >\n                            {title}\n                        </span>\n                        <AssetSubline\n                            asset={asset}\n                            isLoading={isLoading}\n                            hideSize={hideSize}\n                            hideExtension={hideExtension}\n                        />\n                    </div>\n                    <div className=\"tw-p-4 tw-flex tw-flex-none tw-items-center tw-justify-center\">\n                        <span\n                            className={merge([\n                                'tw-transition-transform',\n                                isOpen ? 'tw-rotate-180 tw-text-black-90' : 'tw-text-black-60',\n                            ])}\n                        >\n                            <IconCaretDown size={IconSize.Size16} />\n                        </span>\n                    </div>\n                </div>\n            </button>\n\n            <AnimatePresence>\n                {isOpen && (\n                    <motion.div\n                        style={{\n                            width: flyoutWidth,\n                        }}\n                        className=\"tw-absolute tw-left-auto tw-w-full tw-overflow-hidden tw-box-border tw-p-0 tw-shadow-mid tw-list-none tw-m-0 tw-mt-2 tw-z-20\"\n                        data-test-id=\"asset-single-input-flyout\"\n                        key={`asset-input-menu-${menuId}`}\n                        initial={{ height: 0 }}\n                        animate={{ height: 'auto' }}\n                        exit={{ height: 0 }}\n                        transition={{ ease: [0.04, 0.62, 0.23, 0.98], duration: 0.5 }}\n                    >\n                        <FocusScope restoreFocus>\n                            <div {...overlayProps} ref={overlayRef}>\n                                <DismissButton onDismiss={() => menuState.close()} />\n                                <ActionMenu\n                                    menuBlocks={actions}\n                                    focus={focusStrategy}\n                                    onClick={() => menuState.close()}\n                                />\n                                <DismissButton onDismiss={() => menuState.close()} />\n                            </div>\n                        </FocusScope>\n                    </motion.div>\n                )}\n            </AnimatePresence>\n        </div>\n    );\n};\nSelectedAsset.displayName = 'FondueSelectedAsset';\n"],"names":["SelectedAsset","asset","size","actions","isLoading","hideSize","hideExtension","menuId","useMemoizedId","labelId","buttonRef","useRef","menuState","useMenuTriggerState","isOpen","focusStrategy","menuTriggerProps","useMenuTrigger","buttonProps","useButton","isFocusVisible","focusProps","useFocusRing","overlayRef","overlayProps","useOverlay","title","flyoutWidth","setFlyoutWidth","useState","useEffect","timer","calculateFlyoutWidth","calculatedWidth","_a","resizeObserver","React","mergeProps","merge","FOCUS_STYLE","AssetInputSize","SpinningCircle","AssetThumbnail","AssetSubline","IconCaretDown","IconSize","AnimatePresence","motion","FocusScope","DismissButton","ActionMenu"],"mappings":"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"}