@frontify/fondue 13.0.0-rc.14 → 13.0.0-rc.16

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

@@ -1,44 +1,43 @@
 import { jsxs as l, jsx as t } from "react/jsx-runtime";
-import { useButton as j } from "@react-aria/button";
-import { useFocusRing as B, FocusScope as D } from "@react-aria/focus";
-import { useMenuTrigger as z } from "@react-aria/menu";
-import { useOverlay as M, DismissButton as h } from "@react-aria/overlays";
-import { mergeProps as W } from "@react-aria/utils";
-import { useMenuTriggerState as L } from "@react-stately/menu";
-import { useRef as x, useState as E, useEffect as Y } from "react";
-import { ActionMenu as U } from "../../ActionMenu/ActionMenu.es.js";
-import V from "../../../foundation/Icon/Generated/IconCaretDown.es.js";
-import { IconSize as _ } from "../../../foundation/Icon/IconSize.es.js";
+import { IconCaretDown as B } from "@frontify/fondue-icons";
+import { useButton as D } from "@react-aria/button";
+import { useFocusRing as I, FocusScope as M } from "@react-aria/focus";
+import { useMenuTrigger as W } from "@react-aria/menu";
+import { useOverlay as L, DismissButton as h } from "@react-aria/overlays";
+import { mergeProps as z } from "@react-aria/utils";
+import { useMenuTriggerState as E } from "@react-stately/menu";
+import { useRef as x, useState as Y, useEffect as U } from "react";
+import { ActionMenu as V } from "../../ActionMenu/ActionMenu.es.js";
 import { useMemoizedId as g } from "../../../hooks/useMemoizedId.es.js";
-import { FOCUS_STYLE as $ } from "../../../utilities/focusStyle.es.js";
+import { FOCUS_STYLE as _ } from "../../../utilities/focusStyle.es.js";
 import { merge as n } from "../../../utilities/merge.es.js";
-import { AssetInputSize as m } from "../AssetInput.es.js";
-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 { motion as J } from "../../../node_modules/.pnpm/framer-motion@12.23.27_@emotion_is-prop-valid@0.8.8_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/framer-motion/dist/es/render/components/motion/proxy.es.js";
-import { AnimatePresence as K } from "../../../node_modules/.pnpm/framer-motion@12.23.27_@emotion_is-prop-valid@0.8.8_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/framer-motion/dist/es/components/AnimatePresence/index.es.js";
-const Q = ({
+import { AssetInputSize as a } from "../AssetInput.es.js";
+import { AssetThumbnail as $ } from "../AssetThumbnail.es.js";
+import { AssetSubline as q } from "./AssetSubline.es.js";
+import { SpinningCircle as G } from "./SpinningCircle.es.js";
+import { motion as H } from "../../../node_modules/.pnpm/framer-motion@12.28.1_@emotion_is-prop-valid@0.8.8_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/framer-motion/dist/es/render/components/motion/proxy.es.js";
+import { AnimatePresence as J } from "../../../node_modules/.pnpm/framer-motion@12.28.1_@emotion_is-prop-valid@0.8.8_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/framer-motion/dist/es/components/AnimatePresence/index.es.js";
+const K = ({
   asset: e,
-  size: s,
+  size: i,
   actions: v,
-  isLoading: a,
+  isLoading: m,
   hideSize: k = !1,
   hideExtension: y = !1
 }) => {
-  const S = g(), u = g(), r = x(null), o = L({}), { isOpen: i, focusStrategy: N } = o, { menuTriggerProps: A } = z({}, o, r), { buttonProps: F } = j(A, r), { isFocusVisible: c, focusProps: C } = B(), d = x(null), { overlayProps: T } = M(
-    { onClose: () => o.close(), shouldCloseOnBlur: !0, isOpen: i, isDismissable: !0 },
+  const S = g(), u = g(), r = x(null), o = E({}), { isOpen: s, focusStrategy: N } = o, { menuTriggerProps: A } = W({}, o, r), { buttonProps: F } = D(A, r), { isFocusVisible: w, focusProps: C } = I(), d = x(null), { overlayProps: T } = L(
+    { onClose: () => o.close(), shouldCloseOnBlur: !0, isOpen: s, isDismissable: !0 },
     d
-  ), f = (e == null ? void 0 : e.name) || "Your Asset", [I, O] = E(0);
-  return Y(() => {
-    let w = null;
-    const P = () => {
+  ), f = (e == null ? void 0 : e.name) || "Your Asset", [O, P] = Y(0);
+  return U(() => {
+    let c = null;
+    const R = () => {
       var b;
-      const R = ((b = r.current) == null ? void 0 : b.getBoundingClientRect().width) ?? 0;
-      w = setTimeout(() => O(R), 0);
-    }, p = new ResizeObserver(P);
+      const j = ((b = r.current) == null ? void 0 : b.getBoundingClientRect().width) ?? 0;
+      c = setTimeout(() => P(j), 0);
+    }, p = new ResizeObserver(R);
     return r.current && p.observe(r.current), () => {
-      w && clearTimeout(w), p.disconnect();
+      c && clearTimeout(c), p.disconnect();
     };
   }, []), /* @__PURE__ */ l(
     "div",
@@ -51,33 +50,33 @@ const Q = ({
           "button",
           {
             type: "button",
-            ...W(F, C),
+            ...z(F, C),
             ref: r,
             "aria-labelledby": u,
             className: 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",
-              c && $,
-              s === m.Large ? "tw-h-[11.5rem] tw-flex-col" : "tw-h-14",
-              i || c ? "tw-border-black-90 dark:tw-border-black-10" : "tw-border-black-20 dark:tw-border-black-80"
+              w && _,
+              i === a.Large ? "tw-h-[11.5rem] tw-flex-col" : "tw-h-14",
+              s || w ? "tw-border-black-90 dark:tw-border-black-10" : "tw-border-black-20 dark:tw-border-black-80"
             ]),
             children: [
-              a && !e && /* @__PURE__ */ t(
+              m && !e && /* @__PURE__ */ t(
                 "div",
                 {
                   className: n([
                     "tw-flex tw-justify-center tw-items-center",
-                    s === m.Large ? "tw-w-full tw-h-32" : "tw-w-14 tw-h-full"
+                    i === a.Large ? "tw-w-full tw-h-32" : "tw-w-14 tw-h-full"
                   ]),
-                  children: /* @__PURE__ */ t(H, { size: s })
+                  children: /* @__PURE__ */ t(G, { size: i })
                 }
               ),
-              e && /* @__PURE__ */ t(q, { asset: e, size: s, isActive: i || c }),
+              e && /* @__PURE__ */ t($, { asset: e, size: i, isActive: s || w }),
               /* @__PURE__ */ l(
                 "div",
                 {
                   className: 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",
-                    s === m.Large ? "tw-h-14 tw-border-t" : "tw-h-full tw-border-l"
+                    i === a.Large ? "tw-h-14 tw-border-t" : "tw-h-full tw-border-l"
                   ]),
                   children: [
                     /* @__PURE__ */ l("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", children: [
@@ -87,16 +86,16 @@ const Q = ({
                           id: u,
                           className: n([
                             "tw-max-w-full tw-text-black-100 tw-text-s tw-truncate dark:tw-text-white",
-                            (i || c) && "tw-font-medium"
+                            (s || w) && "tw-font-medium"
                           ]),
                           children: f
                         }
                       ),
                       /* @__PURE__ */ t(
-                        G,
+                        q,
                         {
                           asset: e,
-                          isLoading: a,
+                          isLoading: m,
                           hideSize: k,
                           hideExtension: y
                         }
@@ -107,9 +106,9 @@ const Q = ({
                       {
                         className: n([
                           "tw-transition-transform",
-                          i ? "tw-rotate-180 tw-text-black-90" : "tw-text-black-60"
+                          s ? "tw-rotate-180 tw-text-black-90" : "tw-text-black-60"
                         ]),
-                        children: /* @__PURE__ */ t(V, { size: _.Size16 })
+                        children: /* @__PURE__ */ t(B, { size: 16 })
                       }
                     ) })
                   ]
@@ -118,11 +117,11 @@ const Q = ({
             ]
           }
         ),
-        /* @__PURE__ */ t(K, { children: i && /* @__PURE__ */ t(
-          J.div,
+        /* @__PURE__ */ t(J, { children: s && /* @__PURE__ */ t(
+          H.div,
           {
             style: {
-              width: I
+              width: O
             },
             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",
             "data-test-id": "asset-single-input-flyout",
@@ -130,10 +129,10 @@ const Q = ({
             animate: { height: "auto" },
             exit: { height: 0 },
             transition: { ease: [0.04, 0.62, 0.23, 0.98], duration: 0.5 },
-            children: /* @__PURE__ */ t(D, { restoreFocus: !0, children: /* @__PURE__ */ l("div", { ...T, ref: d, children: [
+            children: /* @__PURE__ */ t(M, { restoreFocus: !0, children: /* @__PURE__ */ l("div", { ...T, ref: d, children: [
               /* @__PURE__ */ t(h, { onDismiss: () => o.close() }),
               /* @__PURE__ */ t(
-                U,
+                V,
                 {
                   menuBlocks: v,
                   focus: N ?? void 0,
@@ -149,8 +148,8 @@ const Q = ({
     }
   );
 };
-Q.displayName = "FondueSelectedAsset";
+K.displayName = "FondueSelectedAsset";
 export {
-  Q as SelectedAsset
+  K as SelectedAsset
 };
 //# sourceMappingURL=SelectedAsset.es.js.map

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 { 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 { AnimatePresence, motion } from 'motion/react';\nimport { type ReactElement, useEffect, useRef, useState } from 'react';\n\nimport { ActionMenu, type ActionMenuBlock } from '@components/ActionMenu/ActionMenu';\nimport IconCaretDown from '@foundation/Icon/Generated/IconCaretDown';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\n\nimport { type AssetInputProps, AssetInputSize, type AssetType } from '../AssetInput';\nimport { AssetThumbnail } from '../AssetThumbnail';\n\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({});\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: ReturnType<typeof setTimeout> | null = null;\n        const calculateFlyoutWidth = () => {\n            const calculatedWidth = buttonRef.current?.getBoundingClientRect().width ?? 0;\n            timer = 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            if (timer) {\n                clearTimeout(timer);\n            }\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            title={title}\n            data-test-id=\"asset-single-input\"\n        >\n            <button\n                type=\"button\"\n                {...mergeProps(buttonProps, focusProps)}\n                ref={buttonRef}\n                aria-labelledby={labelId}\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 as ActionMenuBlock[]}\n                                    focus={focusStrategy ?? undefined}\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","jsxs","mergeProps","merge","FOCUS_STYLE","AssetInputSize","jsx","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 { IconCaretDown } from '@frontify/fondue-icons';\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 { AnimatePresence, motion } from 'motion/react';\nimport { type ReactElement, useEffect, useRef, useState } from 'react';\n\nimport { ActionMenu, type ActionMenuBlock } from '@components/ActionMenu/ActionMenu';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\n\nimport { type AssetInputProps, AssetInputSize, type AssetType } from '../AssetInput';\nimport { AssetThumbnail } from '../AssetThumbnail';\n\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({});\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: ReturnType<typeof setTimeout> | null = null;\n        const calculateFlyoutWidth = () => {\n            const calculatedWidth = buttonRef.current?.getBoundingClientRect().width ?? 0;\n            timer = 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            if (timer) {\n                clearTimeout(timer);\n            }\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            title={title}\n            data-test-id=\"asset-single-input\"\n        >\n            <button\n                type=\"button\"\n                {...mergeProps(buttonProps, focusProps)}\n                ref={buttonRef}\n                aria-labelledby={labelId}\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={16} />\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 as ActionMenuBlock[]}\n                                    focus={focusStrategy ?? undefined}\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","jsxs","mergeProps","merge","FOCUS_STYLE","AssetInputSize","jsx","SpinningCircle","AssetThumbnail","AssetSubline","IconCaretDown","AnimatePresence","motion","FocusScope","DismissButton","ActionMenu"],"mappings":"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"}

package/dist/components/Badge/Badge.es.js

@@ -1,36 +1,35 @@
-import { jsxs as p, jsx as a } from "react/jsx-runtime";
+import { jsxs as p, jsx as l } from "react/jsx-runtime";
+import { IconCross as N } from "@frontify/fondue-icons";
 import { cloneElement as B } from "react";
-import C from "../../foundation/Icon/Generated/IconCross.es.js";
-import { IconSize as c } from "../../foundation/Icon/IconSize.es.js";
-import { FOCUS_VISIBLE_STYLE as d } from "../../utilities/focusStyle.es.js";
+import { FOCUS_VISIBLE_STYLE as c } from "../../utilities/focusStyle.es.js";
 import { merge as m } from "../../utilities/merge.es.js";
-import { BadgeStatusIcon as j } from "./BadgeStatusIcon.es.js";
-import { getCircularSizeClasses as v, getSizeClasses as z, getStyleClasses as h } from "./helpers.es.js";
-import { BadgeEmphasis as g, BadgeStyle as E } from "./types.es.js";
+import { BadgeStatusIcon as C } from "./BadgeStatusIcon.es.js";
+import { getCircularSizeClasses as j, getSizeClasses as v, getStyleClasses as h } from "./helpers.es.js";
+import { BadgeEmphasis as d, BadgeStyle as E } from "./types.es.js";
 const $ = ({
   children: e,
   status: r,
   icon: i,
-  style: x = E.Primary,
+  style: g = E.Primary,
   size: w = "medium",
-  emphasis: b = g.None,
-  disabled: l = !1,
+  emphasis: x = d.None,
+  disabled: o = !1,
   onClick: n,
   onDismiss: s,
-  "data-test-id": o = "badge",
-  withTitleAttribute: S = !0
+  "data-test-id": a = "badge",
+  withTitleAttribute: b = !0
 }) => {
   if (!e && !i && !r)
     return null;
-  const y = n ? "button" : "span", u = (t) => ["string", "number"].includes(typeof t) ? t : Array.isArray(t) ? t.map(u).join("") : t && typeof t == "object" && "props" in t ? u(t.props.children) : "", f = u(e), N = !e && !s && !!(r || i);
+  const y = n ? "button" : "span", u = (t) => ["string", "number"].includes(typeof t) ? t : Array.isArray(t) ? t.map(u).join("") : t && typeof t == "object" && "props" in t ? u(t.props.children) : "", f = u(e), S = !e && !s && !!(r || i);
   return /* @__PURE__ */ p(
     "div",
     {
       className: m([
         "tw-relative tw-rounded-full tw-inline-flex tw-items-center tw-align-top tw-min-w-0 tw-flex-initial tw-transition-color",
-        l ? "tw-bg-box-disabled tw-text-box-disabled-inverse" : h(x, !!n, b === g.Strong)
+        o ? "tw-bg-box-disabled tw-text-box-disabled-inverse" : h(g, !!n, x === d.Strong)
       ]),
-      "data-test-id": o,
+      "data-test-id": a,
       children: [
         /* @__PURE__ */ p(
           y,
@@ -40,39 +39,39 @@ const $ = ({
             },
             className: m([
               "tw-inline-flex tw-items-center tw-justify-center tw-rounded-full tw-select-none tw-flex-initial tw-min-w-0",
-              n && !l ? "hover:tw-cursor-pointer" : "tw-cursor-default",
-              N ? v(w) : z(e, r, i, w, !!s),
-              d
+              n && !o ? "hover:tw-cursor-pointer" : "tw-cursor-default",
+              S ? j(w) : v(e, r, i, w, !!s),
+              c
             ]),
-            "data-test-id": `${o}-button`,
-            title: S ? f : void 0,
+            "data-test-id": `${a}-button`,
+            title: b ? f : void 0,
             children: [
-              r ? /* @__PURE__ */ a(j, { status: r, disabled: l, "data-test-id": o }) : null,
-              i ? /* @__PURE__ */ a(
+              r ? /* @__PURE__ */ l(C, { status: r, disabled: o, "data-test-id": a }) : null,
+              i ? /* @__PURE__ */ l(
                 "span",
                 {
-                  "data-test-id": `${o}-icon`,
-                  className: m(["tw-flex-none tw-leading-none", l && "tw-opacity-30"]),
-                  children: B(i, { size: c.Size16 })
+                  "data-test-id": `${a}-icon`,
+                  className: m(["tw-flex-none tw-leading-none", o && "tw-opacity-30"]),
+                  children: B(i, { size: 16 })
                 }
               ) : null,
-              e ? /* @__PURE__ */ a("span", { className: "tw-text-center tw-text-xxs tw-font-sans tw-font-normal tw-truncate", children: e }) : null
+              e ? /* @__PURE__ */ l("span", { className: "tw-text-center tw-text-xxs tw-font-sans tw-font-normal tw-truncate", children: e }) : null
             ]
           }
         ),
-        s ? /* @__PURE__ */ a(
+        s ? /* @__PURE__ */ l(
           "button",
           {
             type: "button",
-            "data-test-id": `${o}-dismiss`,
+            "data-test-id": `${a}-dismiss`,
             className: m([
               "tw-absolute tw-rounded tw-leading-4",
-              d,
+              c,
               w === "medium" ? "tw-right-1.5" : "tw-right-1"
             ]),
             onClick: () => s(),
             "aria-label": `Dismiss ${f}`,
-            children: /* @__PURE__ */ a(C, { size: c.Size16 })
+            children: /* @__PURE__ */ l(N, { size: 16 })
           }
         ) : null
       ]

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

@@ -1 +1 @@
-{"version":3,"file":"Badge.es.js","sources":["../../../src/components/Badge/Badge.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ReactElement, type ReactNode, cloneElement } from 'react';\n\nimport IconCross from '@foundation/Icon/Generated/IconCross';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { FOCUS_VISIBLE_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\n\nimport { BadgeStatusIcon } from './BadgeStatusIcon';\nimport { getCircularSizeClasses, getSizeClasses, getStyleClasses } from './helpers';\nimport { BadgeEmphasis, type BadgeProps, BadgeStyle } from './types';\n\n/**\n * @deprecated Please use updated badge component from `@frontify/fondue/components` instead.\n */\nexport const Badge = ({\n    children,\n    status,\n    icon,\n    style = BadgeStyle.Primary,\n    size = 'medium',\n    emphasis = BadgeEmphasis.None,\n    disabled = false,\n    onClick,\n    onDismiss,\n    'data-test-id': dataTestId = 'badge',\n    withTitleAttribute = true,\n}: BadgeProps): Nullable<ReactElement> => {\n    if (!children && !icon && !status) {\n        return null;\n    }\n\n    const Container = onClick ? 'button' : 'span';\n\n    const getNodeText = (node: ReactNode): string => {\n        if (['string', 'number'].includes(typeof node)) {\n            return node as string;\n        }\n        if (Array.isArray(node)) {\n            return node.map(getNodeText).join('');\n        }\n        if (node && typeof node === 'object' && 'props' in node) {\n            return getNodeText(node.props.children);\n        }\n        return '';\n    };\n\n    const badgeTitle = getNodeText(children);\n    const isCircular = !children && !onDismiss && Boolean(status || icon);\n\n    return (\n        <div\n            className={merge([\n                'tw-relative tw-rounded-full tw-inline-flex tw-items-center tw-align-top tw-min-w-0 tw-flex-initial tw-transition-color',\n                disabled\n                    ? 'tw-bg-box-disabled tw-text-box-disabled-inverse'\n                    : getStyleClasses(style, !!onClick, emphasis === BadgeEmphasis.Strong),\n            ])}\n            data-test-id={dataTestId}\n        >\n            <Container\n                onClick={() => {\n                    if (onClick) {\n                        onClick();\n                    }\n                }}\n                className={merge([\n                    'tw-inline-flex tw-items-center tw-justify-center tw-rounded-full tw-select-none tw-flex-initial tw-min-w-0',\n                    onClick && !disabled ? 'hover:tw-cursor-pointer' : 'tw-cursor-default',\n                    isCircular\n                        ? getCircularSizeClasses(size)\n                        : getSizeClasses(children, status, icon, size, !!onDismiss),\n                    FOCUS_VISIBLE_STYLE,\n                ])}\n                data-test-id={`${dataTestId}-button`}\n                title={withTitleAttribute ? badgeTitle : undefined}\n            >\n                {status ? <BadgeStatusIcon status={status} disabled={disabled} data-test-id={dataTestId} /> : null}\n                {icon ? (\n                    <span\n                        data-test-id={`${dataTestId}-icon`}\n                        className={merge(['tw-flex-none tw-leading-none', disabled && 'tw-opacity-30'])}\n                    >\n                        {cloneElement(icon, { size: IconSize.Size16 })}\n                    </span>\n                ) : null}\n                {children ? (\n                    <span className=\"tw-text-center tw-text-xxs tw-font-sans tw-font-normal tw-truncate\">\n                        {children}\n                    </span>\n                ) : null}\n            </Container>\n            {onDismiss ? (\n                <button\n                    type=\"button\"\n                    data-test-id={`${dataTestId}-dismiss`}\n                    className={merge([\n                        'tw-absolute tw-rounded tw-leading-4',\n                        FOCUS_VISIBLE_STYLE,\n                        size === 'medium' ? 'tw-right-1.5' : 'tw-right-1',\n                    ])}\n                    onClick={() => onDismiss()}\n                    aria-label={`Dismiss ${badgeTitle}`}\n                >\n                    <IconCross size={IconSize.Size16} />\n                </button>\n            ) : null}\n        </div>\n    );\n};\nBadge.displayName = 'FondueBadge';\n"],"names":["Badge","children","status","icon","style","BadgeStyle","size","emphasis","BadgeEmphasis","disabled","onClick","onDismiss","dataTestId","withTitleAttribute","Container","getNodeText","node","badgeTitle","isCircular","jsxs","merge","getStyleClasses","getCircularSizeClasses","getSizeClasses","FOCUS_VISIBLE_STYLE","BadgeStatusIcon","jsx","IconSize","IconCross"],"mappings":";;;;;;;;;AAgBO,MAAMA,IAAQ,CAAC;AAAA,EAClB,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,MAAAC;AAAA,EACA,OAAAC,IAAQC,EAAW;AAAA,EACnB,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAWC,EAAc;AAAA,EACzB,UAAAC,IAAW;AAAA,EACX,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,gBAAgBC,IAAa;AAAA,EAC7B,oBAAAC,IAAqB;AACzB,MAA0C;AACtC,MAAI,CAACZ,KAAY,CAACE,KAAQ,CAACD;AACvB,WAAO;AAGX,QAAMY,IAAYJ,IAAU,WAAW,QAEjCK,IAAc,CAACC,MACb,CAAC,UAAU,QAAQ,EAAE,SAAS,OAAOA,CAAI,IAClCA,IAEP,MAAM,QAAQA,CAAI,IACXA,EAAK,IAAID,CAAW,EAAE,KAAK,EAAE,IAEpCC,KAAQ,OAAOA,KAAS,YAAY,WAAWA,IACxCD,EAAYC,EAAK,MAAM,QAAQ,IAEnC,IAGLC,IAAaF,EAAYd,CAAQ,GACjCiB,IAAa,CAACjB,KAAY,CAACU,KAAa,GAAQT,KAAUC;AAEhE,SACI,gBAAAgB;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWC,EAAM;AAAA,QACb;AAAA,QACAX,IACM,oDACAY,EAAgBjB,GAAO,CAAC,CAACM,GAASH,MAAaC,EAAc,MAAM;AAAA,MAAA,CAC5E;AAAA,MACD,gBAAcI;AAAA,MAEd,UAAA;AAAA,QAAA,gBAAAO;AAAA,UAACL;AAAA,UAAA;AAAA,YACG,SAAS,MAAM;AACX,cAAIJ,KACAA,EAAA;AAAA,YAER;AAAA,YACA,WAAWU,EAAM;AAAA,cACb;AAAA,cACAV,KAAW,CAACD,IAAW,4BAA4B;AAAA,cACnDS,IACMI,EAAuBhB,CAAI,IAC3BiB,EAAetB,GAAUC,GAAQC,GAAMG,GAAM,CAAC,CAACK,CAAS;AAAA,cAC9Da;AAAA,YAAA,CACH;AAAA,YACD,gBAAc,GAAGZ,CAAU;AAAA,YAC3B,OAAOC,IAAqBI,IAAa;AAAA,YAExC,UAAA;AAAA,cAAAf,sBAAUuB,GAAA,EAAgB,QAAAvB,GAAgB,UAAAO,GAAoB,gBAAcG,GAAY,IAAK;AAAA,cAC7FT,IACG,gBAAAuB;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACG,gBAAc,GAAGd,CAAU;AAAA,kBAC3B,WAAWQ,EAAM,CAAC,gCAAgCX,KAAY,eAAe,CAAC;AAAA,kBAE7E,YAAaN,GAAM,EAAE,MAAMwB,EAAS,QAAQ;AAAA,gBAAA;AAAA,cAAA,IAEjD;AAAA,cACH1B,IACG,gBAAAyB,EAAC,QAAA,EAAK,WAAU,sEACX,UAAAzB,GACL,IACA;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAEPU,IACG,gBAAAe;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,MAAK;AAAA,YACL,gBAAc,GAAGd,CAAU;AAAA,YAC3B,WAAWQ,EAAM;AAAA,cACb;AAAA,cACAI;AAAA,cACAlB,MAAS,WAAW,iBAAiB;AAAA,YAAA,CACxC;AAAA,YACD,SAAS,MAAMK,EAAA;AAAA,YACf,cAAY,WAAWM,CAAU;AAAA,YAEjC,UAAA,gBAAAS,EAACE,GAAA,EAAU,MAAMD,EAAS,OAAA,CAAQ;AAAA,UAAA;AAAA,QAAA,IAEtC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGhB;AACA3B,EAAM,cAAc;"}
+{"version":3,"file":"Badge.es.js","sources":["../../../src/components/Badge/Badge.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCross } from '@frontify/fondue-icons';\nimport { type ReactElement, type ReactNode, cloneElement } from 'react';\n\nimport { FOCUS_VISIBLE_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\n\nimport { BadgeStatusIcon } from './BadgeStatusIcon';\nimport { getCircularSizeClasses, getSizeClasses, getStyleClasses } from './helpers';\nimport { BadgeEmphasis, type BadgeProps, BadgeStyle } from './types';\n\n/**\n * @deprecated Please use updated badge component from `@frontify/fondue/components` instead.\n */\nexport const Badge = ({\n    children,\n    status,\n    icon,\n    style = BadgeStyle.Primary,\n    size = 'medium',\n    emphasis = BadgeEmphasis.None,\n    disabled = false,\n    onClick,\n    onDismiss,\n    'data-test-id': dataTestId = 'badge',\n    withTitleAttribute = true,\n}: BadgeProps): Nullable<ReactElement> => {\n    if (!children && !icon && !status) {\n        return null;\n    }\n\n    const Container = onClick ? 'button' : 'span';\n\n    const getNodeText = (node: ReactNode): string => {\n        if (['string', 'number'].includes(typeof node)) {\n            return node as string;\n        }\n        if (Array.isArray(node)) {\n            return node.map(getNodeText).join('');\n        }\n        if (node && typeof node === 'object' && 'props' in node) {\n            return getNodeText(node.props.children);\n        }\n        return '';\n    };\n\n    const badgeTitle = getNodeText(children);\n    const isCircular = !children && !onDismiss && Boolean(status || icon);\n\n    return (\n        <div\n            className={merge([\n                'tw-relative tw-rounded-full tw-inline-flex tw-items-center tw-align-top tw-min-w-0 tw-flex-initial tw-transition-color',\n                disabled\n                    ? 'tw-bg-box-disabled tw-text-box-disabled-inverse'\n                    : getStyleClasses(style, !!onClick, emphasis === BadgeEmphasis.Strong),\n            ])}\n            data-test-id={dataTestId}\n        >\n            <Container\n                onClick={() => {\n                    if (onClick) {\n                        onClick();\n                    }\n                }}\n                className={merge([\n                    'tw-inline-flex tw-items-center tw-justify-center tw-rounded-full tw-select-none tw-flex-initial tw-min-w-0',\n                    onClick && !disabled ? 'hover:tw-cursor-pointer' : 'tw-cursor-default',\n                    isCircular\n                        ? getCircularSizeClasses(size)\n                        : getSizeClasses(children, status, icon, size, !!onDismiss),\n                    FOCUS_VISIBLE_STYLE,\n                ])}\n                data-test-id={`${dataTestId}-button`}\n                title={withTitleAttribute ? badgeTitle : undefined}\n            >\n                {status ? <BadgeStatusIcon status={status} disabled={disabled} data-test-id={dataTestId} /> : null}\n                {icon ? (\n                    <span\n                        data-test-id={`${dataTestId}-icon`}\n                        className={merge(['tw-flex-none tw-leading-none', disabled && 'tw-opacity-30'])}\n                    >\n                        {cloneElement(icon, { size: 16 })}\n                    </span>\n                ) : null}\n                {children ? (\n                    <span className=\"tw-text-center tw-text-xxs tw-font-sans tw-font-normal tw-truncate\">\n                        {children}\n                    </span>\n                ) : null}\n            </Container>\n            {onDismiss ? (\n                <button\n                    type=\"button\"\n                    data-test-id={`${dataTestId}-dismiss`}\n                    className={merge([\n                        'tw-absolute tw-rounded tw-leading-4',\n                        FOCUS_VISIBLE_STYLE,\n                        size === 'medium' ? 'tw-right-1.5' : 'tw-right-1',\n                    ])}\n                    onClick={() => onDismiss()}\n                    aria-label={`Dismiss ${badgeTitle}`}\n                >\n                    <IconCross size={16} />\n                </button>\n            ) : null}\n        </div>\n    );\n};\nBadge.displayName = 'FondueBadge';\n"],"names":["Badge","children","status","icon","style","BadgeStyle","size","emphasis","BadgeEmphasis","disabled","onClick","onDismiss","dataTestId","withTitleAttribute","Container","getNodeText","node","badgeTitle","isCircular","jsxs","merge","getStyleClasses","getCircularSizeClasses","getSizeClasses","FOCUS_VISIBLE_STYLE","BadgeStatusIcon","jsx","cloneElement","IconCross"],"mappings":";;;;;;;;AAeO,MAAMA,IAAQ,CAAC;AAAA,EAClB,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,MAAAC;AAAA,EACA,OAAAC,IAAQC,EAAW;AAAA,EACnB,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAWC,EAAc;AAAA,EACzB,UAAAC,IAAW;AAAA,EACX,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,gBAAgBC,IAAa;AAAA,EAC7B,oBAAAC,IAAqB;AACzB,MAA0C;AACtC,MAAI,CAACZ,KAAY,CAACE,KAAQ,CAACD;AACvB,WAAO;AAGX,QAAMY,IAAYJ,IAAU,WAAW,QAEjCK,IAAc,CAACC,MACb,CAAC,UAAU,QAAQ,EAAE,SAAS,OAAOA,CAAI,IAClCA,IAEP,MAAM,QAAQA,CAAI,IACXA,EAAK,IAAID,CAAW,EAAE,KAAK,EAAE,IAEpCC,KAAQ,OAAOA,KAAS,YAAY,WAAWA,IACxCD,EAAYC,EAAK,MAAM,QAAQ,IAEnC,IAGLC,IAAaF,EAAYd,CAAQ,GACjCiB,IAAa,CAACjB,KAAY,CAACU,KAAa,GAAQT,KAAUC;AAEhE,SACI,gBAAAgB;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWC,EAAM;AAAA,QACb;AAAA,QACAX,IACM,oDACAY,EAAgBjB,GAAO,CAAC,CAACM,GAASH,MAAaC,EAAc,MAAM;AAAA,MAAA,CAC5E;AAAA,MACD,gBAAcI;AAAA,MAEd,UAAA;AAAA,QAAA,gBAAAO;AAAA,UAACL;AAAA,UAAA;AAAA,YACG,SAAS,MAAM;AACX,cAAIJ,KACAA,EAAA;AAAA,YAER;AAAA,YACA,WAAWU,EAAM;AAAA,cACb;AAAA,cACAV,KAAW,CAACD,IAAW,4BAA4B;AAAA,cACnDS,IACMI,EAAuBhB,CAAI,IAC3BiB,EAAetB,GAAUC,GAAQC,GAAMG,GAAM,CAAC,CAACK,CAAS;AAAA,cAC9Da;AAAA,YAAA,CACH;AAAA,YACD,gBAAc,GAAGZ,CAAU;AAAA,YAC3B,OAAOC,IAAqBI,IAAa;AAAA,YAExC,UAAA;AAAA,cAAAf,sBAAUuB,GAAA,EAAgB,QAAAvB,GAAgB,UAAAO,GAAoB,gBAAcG,GAAY,IAAK;AAAA,cAC7FT,IACG,gBAAAuB;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACG,gBAAc,GAAGd,CAAU;AAAA,kBAC3B,WAAWQ,EAAM,CAAC,gCAAgCX,KAAY,eAAe,CAAC;AAAA,kBAE7E,UAAAkB,EAAaxB,GAAM,EAAE,MAAM,IAAI;AAAA,gBAAA;AAAA,cAAA,IAEpC;AAAA,cACHF,IACG,gBAAAyB,EAAC,QAAA,EAAK,WAAU,sEACX,UAAAzB,GACL,IACA;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAEPU,IACG,gBAAAe;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,MAAK;AAAA,YACL,gBAAc,GAAGd,CAAU;AAAA,YAC3B,WAAWQ,EAAM;AAAA,cACb;AAAA,cACAI;AAAA,cACAlB,MAAS,WAAW,iBAAiB;AAAA,YAAA,CACxC;AAAA,YACD,SAAS,MAAMK,EAAA;AAAA,YACf,cAAY,WAAWM,CAAU;AAAA,YAEjC,UAAA,gBAAAS,EAACE,GAAA,EAAU,MAAM,GAAA,CAAI;AAAA,UAAA;AAAA,QAAA,IAEzB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGhB;AACA5B,EAAM,cAAc;"}

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

@@ -1 +1 @@
-{"version":3,"file":"types.es.js","sources":["../../../src/components/Badge/types.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ReactElement, type ReactNode } from 'react';\n\nimport { type IconProps } from '@foundation/Icon/IconProps';\n\nimport { type Color } from '../../types';\n\n/**\n * @deprecated Please use updated badge component from `@frontify/fondue/components` instead.\n */\nexport type BadgeSize = 'small' | 'medium';\n\n/**\n * @deprecated Please use updated badge component from `@frontify/fondue/components` instead.\n */\nexport type BadgeProps = {\n    style?: BadgeStyle;\n    icon?: ReactElement<IconProps>;\n    status?: BadgeStatusIconProps['status'];\n    onClick?: () => void;\n    onDismiss?: () => void;\n    disabled?: boolean;\n    emphasis?: BadgeEmphasis;\n    size?: BadgeSize;\n    children?: ReactNode;\n    'data-test-id'?: string;\n    /** @description withTitle could be disabled only in the case another overlay is present, ex Tooltip */\n    withTitleAttribute?: boolean;\n};\n\n/**\n * @deprecated Please use updated badge component from `@frontify/fondue/components` instead.\n */\nexport type BadgeStatusIconProps = { status: BadgeStatus | Color | string; disabled: boolean; 'data-test-id'?: string };\n\n/**\n * @deprecated Please use updated badge component from `@frontify/fondue/components` instead.\n */\nexport enum BadgeStatus {\n    Positive = 'Positive',\n    Progress = 'Progress',\n    Warning = 'Warning',\n    Danger = 'Danger',\n}\n\n/**\n * @deprecated Please use updated badge component from `@frontify/fondue/components` instead.\n */\nexport enum BadgeStyle {\n    Primary = 'Primary',\n    Positive = 'Positive',\n    Progress = 'Progress',\n    Warning = 'Warning',\n    Danger = 'Danger',\n}\n\n/**\n * @deprecated Please use updated badge component from `@frontify/fondue/components` instead.\n */\nexport enum BadgeEmphasis {\n    Strong = 'Strong',\n    None = 'None',\n}\n"],"names":["BadgeStatus","BadgeStyle","BadgeEmphasis"],"mappings":"AAuCO,IAAKA,sBAAAA,OACRA,EAAA,WAAW,YACXA,EAAA,WAAW,YACXA,EAAA,UAAU,WACVA,EAAA,SAAS,UAJDA,IAAAA,KAAA,CAAA,CAAA,GAUAC,sBAAAA,OACRA,EAAA,UAAU,WACVA,EAAA,WAAW,YACXA,EAAA,WAAW,YACXA,EAAA,UAAU,WACVA,EAAA,SAAS,UALDA,IAAAA,KAAA,CAAA,CAAA,GAWAC,sBAAAA,OACRA,EAAA,SAAS,UACTA,EAAA,OAAO,QAFCA,IAAAA,KAAA,CAAA,CAAA;"}
+{"version":3,"file":"types.es.js","sources":["../../../src/components/Badge/types.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type FondueIconProps } from '@frontify/fondue-icons';\nimport { type ReactElement, type ReactNode } from 'react';\n\nimport { type Color } from '../../types';\n\n/**\n * @deprecated Please use updated badge component from `@frontify/fondue/components` instead.\n */\nexport type BadgeSize = 'small' | 'medium';\n\n/**\n * @deprecated Please use updated badge component from `@frontify/fondue/components` instead.\n */\nexport type BadgeProps = {\n    style?: BadgeStyle;\n    icon?: ReactElement<FondueIconProps>;\n    status?: BadgeStatusIconProps['status'];\n    onClick?: () => void;\n    onDismiss?: () => void;\n    disabled?: boolean;\n    emphasis?: BadgeEmphasis;\n    size?: BadgeSize;\n    children?: ReactNode;\n    'data-test-id'?: string;\n    /** @description withTitle could be disabled only in the case another overlay is present, ex Tooltip */\n    withTitleAttribute?: boolean;\n};\n\n/**\n * @deprecated Please use updated badge component from `@frontify/fondue/components` instead.\n */\nexport type BadgeStatusIconProps = { status: BadgeStatus | Color | string; disabled: boolean; 'data-test-id'?: string };\n\n/**\n * @deprecated Please use updated badge component from `@frontify/fondue/components` instead.\n */\nexport enum BadgeStatus {\n    Positive = 'Positive',\n    Progress = 'Progress',\n    Warning = 'Warning',\n    Danger = 'Danger',\n}\n\n/**\n * @deprecated Please use updated badge component from `@frontify/fondue/components` instead.\n */\nexport enum BadgeStyle {\n    Primary = 'Primary',\n    Positive = 'Positive',\n    Progress = 'Progress',\n    Warning = 'Warning',\n    Danger = 'Danger',\n}\n\n/**\n * @deprecated Please use updated badge component from `@frontify/fondue/components` instead.\n */\nexport enum BadgeEmphasis {\n    Strong = 'Strong',\n    None = 'None',\n}\n"],"names":["BadgeStatus","BadgeStyle","BadgeEmphasis"],"mappings":"AAsCO,IAAKA,sBAAAA,OACRA,EAAA,WAAW,YACXA,EAAA,WAAW,YACXA,EAAA,UAAU,WACVA,EAAA,SAAS,UAJDA,IAAAA,KAAA,CAAA,CAAA,GAUAC,sBAAAA,OACRA,EAAA,UAAU,WACVA,EAAA,WAAW,YACXA,EAAA,WAAW,YACXA,EAAA,UAAU,WACVA,EAAA,SAAS,UALDA,IAAAA,KAAA,CAAA,CAAA,GAWAC,sBAAAA,OACRA,EAAA,SAAS,UACTA,EAAA,OAAO,QAFCA,IAAAA,KAAA,CAAA,CAAA;"}

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

@@ -1 +1 @@
-{"version":3,"file":"Box.es.js","sources":["../../../src/components/Box/Box.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type HTMLAttributes } from 'react';\n\nimport {\n    GetMarginClassNames,\n    GetPaddingClassNames,\n    MARGIN_DIRECTIONS,\n    PADDING_DIRECTIONS,\n    type SpacingValue,\n} from '@utilities/dimensions';\nimport { merge } from '@utilities/index';\n\nimport { type ContainerHTMLElement } from '../../types/elements';\n\nexport type BoxProps = {\n    'data-test-id'?: string;\n    padding?: SpacingValue;\n    paddingX?: SpacingValue;\n    paddingY?: SpacingValue;\n    margin?: SpacingValue;\n    marginX?: SpacingValue;\n    marginY?: SpacingValue;\n    as?: ContainerHTMLElement;\n} & HTMLAttributes<HTMLDivElement | HTMLSpanElement>;\n\nconst BOX_TEST_ID = 'fondue-box';\n\n/**\n * @deprecated Use `Box` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#layout-components the migration guide}.\n */\nexport const Box = ({\n    padding,\n    paddingX,\n    paddingY,\n    margin,\n    marginX,\n    marginY,\n    children,\n    'data-test-id': dataTestId = BOX_TEST_ID,\n    as: ContainerElement = 'div',\n    ...props\n}: BoxProps) => {\n    return (\n        <ContainerElement\n            {...props}\n            className={merge([\n                props.className,\n                GetPaddingClassNames(PADDING_DIRECTIONS.PADDING_X, paddingX),\n                GetPaddingClassNames(PADDING_DIRECTIONS.PADDING_Y, paddingY),\n                GetPaddingClassNames(PADDING_DIRECTIONS.PADDING, padding),\n                GetMarginClassNames(MARGIN_DIRECTIONS.MARGIN_X, marginX),\n                GetMarginClassNames(MARGIN_DIRECTIONS.MARGIN_Y, marginY),\n                GetMarginClassNames(MARGIN_DIRECTIONS.MARGIN, margin),\n            ])}\n            data-test-id={dataTestId}\n        >\n            {children}\n        </ContainerElement>\n    );\n};\nBox.displayName = 'FondueBox';\n"],"names":["BOX_TEST_ID","Box","padding","paddingX","paddingY","margin","marginX","marginY","children","dataTestId","ContainerElement","props","jsx","merge","GetPaddingClassNames","PADDING_DIRECTIONS","GetMarginClassNames","MARGIN_DIRECTIONS"],"mappings":";;;AA0BA,MAAMA,IAAc,cAKPC,IAAM,CAAC;AAAA,EAChB,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,gBAAgBC,IAAaT;AAAA,EAC7B,IAAIU,IAAmB;AAAA,EACvB,GAAGC;AACP,MAEQ,gBAAAC;AAAA,EAACF;AAAA,EAAA;AAAA,IACI,GAAGC;AAAA,IACJ,WAAWE,EAAM;AAAA,MACbF,EAAM;AAAA,MACNG,EAAqBC,EAAmB,WAAWZ,CAAQ;AAAA,MAC3DW,EAAqBC,EAAmB,WAAWX,CAAQ;AAAA,MAC3DU,EAAqBC,EAAmB,SAASb,CAAO;AAAA,MACxDc,EAAoBC,EAAkB,UAAUX,CAAO;AAAA,MACvDU,EAAoBC,EAAkB,UAAUV,CAAO;AAAA,MACvDS,EAAoBC,EAAkB,QAAQZ,CAAM;AAAA,IAAA,CACvD;AAAA,IACD,gBAAcI;AAAA,IAEb,UAAAD;AAAA,EAAA;AAAA;AAIbP,EAAI,cAAc;"}
+{"version":3,"file":"Box.es.js","sources":["../../../src/components/Box/Box.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type HTMLAttributes } from 'react';\n\nimport {\n    GetMarginClassNames,\n    GetPaddingClassNames,\n    MARGIN_DIRECTIONS,\n    PADDING_DIRECTIONS,\n    type SpacingValue,\n} from '@utilities/dimensions';\nimport { merge } from '@utilities/merge';\n\nimport { type ContainerHTMLElement } from '../../types/elements';\n\nexport type BoxProps = {\n    'data-test-id'?: string;\n    padding?: SpacingValue;\n    paddingX?: SpacingValue;\n    paddingY?: SpacingValue;\n    margin?: SpacingValue;\n    marginX?: SpacingValue;\n    marginY?: SpacingValue;\n    as?: ContainerHTMLElement;\n} & HTMLAttributes<HTMLDivElement | HTMLSpanElement>;\n\nconst BOX_TEST_ID = 'fondue-box';\n\n/**\n * @deprecated Use `Box` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#layout-components the migration guide}.\n */\nexport const Box = ({\n    padding,\n    paddingX,\n    paddingY,\n    margin,\n    marginX,\n    marginY,\n    children,\n    'data-test-id': dataTestId = BOX_TEST_ID,\n    as: ContainerElement = 'div',\n    ...props\n}: BoxProps) => {\n    return (\n        <ContainerElement\n            {...props}\n            className={merge([\n                props.className,\n                GetPaddingClassNames(PADDING_DIRECTIONS.PADDING_X, paddingX),\n                GetPaddingClassNames(PADDING_DIRECTIONS.PADDING_Y, paddingY),\n                GetPaddingClassNames(PADDING_DIRECTIONS.PADDING, padding),\n                GetMarginClassNames(MARGIN_DIRECTIONS.MARGIN_X, marginX),\n                GetMarginClassNames(MARGIN_DIRECTIONS.MARGIN_Y, marginY),\n                GetMarginClassNames(MARGIN_DIRECTIONS.MARGIN, margin),\n            ])}\n            data-test-id={dataTestId}\n        >\n            {children}\n        </ContainerElement>\n    );\n};\nBox.displayName = 'FondueBox';\n"],"names":["BOX_TEST_ID","Box","padding","paddingX","paddingY","margin","marginX","marginY","children","dataTestId","ContainerElement","props","jsx","merge","GetPaddingClassNames","PADDING_DIRECTIONS","GetMarginClassNames","MARGIN_DIRECTIONS"],"mappings":";;;AA0BA,MAAMA,IAAc,cAKPC,IAAM,CAAC;AAAA,EAChB,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,gBAAgBC,IAAaT;AAAA,EAC7B,IAAIU,IAAmB;AAAA,EACvB,GAAGC;AACP,MAEQ,gBAAAC;AAAA,EAACF;AAAA,EAAA;AAAA,IACI,GAAGC;AAAA,IACJ,WAAWE,EAAM;AAAA,MACbF,EAAM;AAAA,MACNG,EAAqBC,EAAmB,WAAWZ,CAAQ;AAAA,MAC3DW,EAAqBC,EAAmB,WAAWX,CAAQ;AAAA,MAC3DU,EAAqBC,EAAmB,SAASb,CAAO;AAAA,MACxDc,EAAoBC,EAAkB,UAAUX,CAAO;AAAA,MACvDU,EAAoBC,EAAkB,UAAUV,CAAO;AAAA,MACvDS,EAAoBC,EAAkB,QAAQZ,CAAM;AAAA,IAAA,CACvD;AAAA,IACD,gBAAcI;AAAA,IAEb,UAAAD;AAAA,EAAA;AAAA;AAIbP,EAAI,cAAc;"}

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

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumbs.es.js","sources":["../../../src/components/Breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type AriaBreadcrumbsProps, useBreadcrumbs } from '@react-aria/breadcrumbs';\nimport { type MouseEvent, type ReactElement } from 'react';\n\nimport { type BadgeProps } from '@components/Badge/types';\nimport { type IconProps } from '@foundation/Icon/IconProps';\nimport { merge } from '@utilities/merge';\n\nimport { FormattedBreadcrumbs } from './FormattedBreadcrumbs';\n\nconst mapBreadcrumbsToAriaProps = (items: Breadcrumb[]) => ({\n    children: items.map(({ label }, index) => (\n        <li key={`breadcrumb-${index}`} aria-label={label}>\n            {label}\n        </li>\n    )),\n});\n\n/**\n * @deprecated This type is deprecated and will be removed in the next major version.\n */\nexport type Breadcrumb = {\n    label: string;\n    link?: string;\n    onClick?: <T extends HTMLButtonElement | HTMLAnchorElement>(event: MouseEvent<T>) => void;\n    decorator?: ReactElement<IconProps>;\n    bold?: boolean;\n    badges?: BadgeProps[];\n    'data-test-id'?: string;\n} & Pick<BreadcrumbsProps, 'activeInline'>;\n\n/**\n * @deprecated This type is deprecated and will be removed in the next major version.\n */\nexport type BreadcrumbsProps = {\n    items: Breadcrumb[];\n    keepRoot?: boolean;\n    activeInline?: boolean;\n    truncate?: boolean;\n    'data-test-id'?: string;\n    verticalGap?: BreadcrumbGap;\n};\n\n/**\n * @deprecated This type is deprecated and will be removed in the next major version.\n */\nexport enum BreadcrumbGap {\n    None = 'None',\n    Small = 'Small',\n    Medium = 'Medium',\n}\n\n/**\n * @deprecated This constant is deprecated and will be removed in the next major version.\n */\nconst verticalGapClassMap: Record<BreadcrumbGap, string> = {\n    [BreadcrumbGap.None]: 'tw-gap-y-0',\n    [BreadcrumbGap.Small]: 'tw-gap-y-0.5',\n    [BreadcrumbGap.Medium]: 'tw-gap-y-1',\n};\n\n/**\n * @deprecated This component is deprecated and will be removed in the next major version.\n */\nexport const Breadcrumbs = ({\n    items,\n    keepRoot = true,\n    truncate = false,\n    activeInline = false,\n    'data-test-id': dataTestId = 'breadcrumb',\n    verticalGap = BreadcrumbGap.Medium,\n}: BreadcrumbsProps): ReactElement => {\n    const props = mapBreadcrumbsToAriaProps(items);\n    const { navProps } = useBreadcrumbs(props as AriaBreadcrumbsProps);\n\n    return (\n        <nav {...navProps} className=\"tw-font-sans\" aria-label=\"Breadcrumb\" data-test-id={dataTestId}>\n            <ol className={merge(['tw-list-none tw-flex tw-flex-wrap', verticalGapClassMap[verticalGap]])}>\n                <FormattedBreadcrumbs\n                    items={items}\n                    keepRoot={keepRoot}\n                    truncate={truncate}\n                    activeInline={activeInline}\n                    data-test-id={dataTestId}\n                />\n            </ol>\n        </nav>\n    );\n};\nBreadcrumbs.displayName = 'FondueBreadcrumbs';\n"],"names":["mapBreadcrumbsToAriaProps","items","label","index","jsx","verticalGapClassMap","Breadcrumbs","keepRoot","truncate","activeInline","dataTestId","verticalGap","props","navProps","useBreadcrumbs","merge","FormattedBreadcrumbs"],"mappings":";;;;AAWA,MAAMA,IAA4B,CAACC,OAAyB;AAAA,EACxD,UAAUA,EAAM,IAAI,CAAC,EAAE,OAAAC,KAASC,MAC5B,gBAAAC,EAAC,MAAA,EAA+B,cAAYF,GACvC,UAAAA,EAAA,GADI,cAAcC,CAAK,EAE5B,CACH;AACL,IAuCME,IAAqD;AAAA,EACtD,MAAqB;AAAA,EACrB,OAAsB;AAAA,EACtB,QAAuB;AAC5B,GAKaC,IAAc,CAAC;AAAA,EACxB,OAAAL;AAAA,EACA,UAAAM,IAAW;AAAA,EACX,UAAAC,IAAW;AAAA,EACX,cAAAC,IAAe;AAAA,EACf,gBAAgBC,IAAa;AAAA,EAC7B,aAAAC,IAAc;AAAA;AAClB,MAAsC;AAClC,QAAMC,IAAQZ,EAA0BC,CAAK,GACvC,EAAE,UAAAY,EAAA,IAAaC,EAAeF,CAA6B;AAEjE,SACI,gBAAAR,EAAC,SAAK,GAAGS,GAAU,WAAU,gBAAe,cAAW,cAAa,gBAAcH,GAC9E,4BAAC,MAAA,EAAG,WAAWK,EAAM,CAAC,qCAAqCV,EAAoBM,CAAW,CAAC,CAAC,GACxF,UAAA,gBAAAP;AAAA,IAACY;AAAA,IAAA;AAAA,MACG,OAAAf;AAAA,MACA,UAAAM;AAAA,MACA,UAAAC;AAAA,MACA,cAAAC;AAAA,MACA,gBAAcC;AAAA,IAAA;AAAA,EAAA,GAEtB,EAAA,CACJ;AAER;AACAJ,EAAY,cAAc;"}
+{"version":3,"file":"Breadcrumbs.es.js","sources":["../../../src/components/Breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type FondueIconProps } from '@frontify/fondue-icons';\nimport { type AriaBreadcrumbsProps, useBreadcrumbs } from '@react-aria/breadcrumbs';\nimport { type MouseEvent, type ReactElement } from 'react';\n\nimport { type BadgeProps } from '@components/Badge/types';\nimport { merge } from '@utilities/merge';\n\nimport { FormattedBreadcrumbs } from './FormattedBreadcrumbs';\n\nconst mapBreadcrumbsToAriaProps = (items: Breadcrumb[]) => ({\n    children: items.map(({ label }, index) => (\n        <li key={`breadcrumb-${index}`} aria-label={label}>\n            {label}\n        </li>\n    )),\n});\n\n/**\n * @deprecated This type is deprecated and will be removed in the next major version.\n */\nexport type Breadcrumb = {\n    label: string;\n    link?: string;\n    onClick?: <T extends HTMLButtonElement | HTMLAnchorElement>(event: MouseEvent<T>) => void;\n    decorator?: ReactElement<FondueIconProps>;\n    bold?: boolean;\n    badges?: BadgeProps[];\n    'data-test-id'?: string;\n} & Pick<BreadcrumbsProps, 'activeInline'>;\n\n/**\n * @deprecated This type is deprecated and will be removed in the next major version.\n */\nexport type BreadcrumbsProps = {\n    items: Breadcrumb[];\n    keepRoot?: boolean;\n    activeInline?: boolean;\n    truncate?: boolean;\n    'data-test-id'?: string;\n    verticalGap?: BreadcrumbGap;\n};\n\n/**\n * @deprecated This type is deprecated and will be removed in the next major version.\n */\nexport enum BreadcrumbGap {\n    None = 'None',\n    Small = 'Small',\n    Medium = 'Medium',\n}\n\n/**\n * @deprecated This constant is deprecated and will be removed in the next major version.\n */\nconst verticalGapClassMap: Record<BreadcrumbGap, string> = {\n    [BreadcrumbGap.None]: 'tw-gap-y-0',\n    [BreadcrumbGap.Small]: 'tw-gap-y-0.5',\n    [BreadcrumbGap.Medium]: 'tw-gap-y-1',\n};\n\n/**\n * @deprecated This component is deprecated and will be removed in the next major version.\n */\nexport const Breadcrumbs = ({\n    items,\n    keepRoot = true,\n    truncate = false,\n    activeInline = false,\n    'data-test-id': dataTestId = 'breadcrumb',\n    verticalGap = BreadcrumbGap.Medium,\n}: BreadcrumbsProps): ReactElement => {\n    const props = mapBreadcrumbsToAriaProps(items);\n    const { navProps } = useBreadcrumbs(props as AriaBreadcrumbsProps);\n\n    return (\n        <nav {...navProps} className=\"tw-font-sans\" aria-label=\"Breadcrumb\" data-test-id={dataTestId}>\n            <ol className={merge(['tw-list-none tw-flex tw-flex-wrap', verticalGapClassMap[verticalGap]])}>\n                <FormattedBreadcrumbs\n                    items={items}\n                    keepRoot={keepRoot}\n                    truncate={truncate}\n                    activeInline={activeInline}\n                    data-test-id={dataTestId}\n                />\n            </ol>\n        </nav>\n    );\n};\nBreadcrumbs.displayName = 'FondueBreadcrumbs';\n"],"names":["mapBreadcrumbsToAriaProps","items","label","index","jsx","verticalGapClassMap","Breadcrumbs","keepRoot","truncate","activeInline","dataTestId","verticalGap","props","navProps","useBreadcrumbs","merge","FormattedBreadcrumbs"],"mappings":";;;;AAWA,MAAMA,IAA4B,CAACC,OAAyB;AAAA,EACxD,UAAUA,EAAM,IAAI,CAAC,EAAE,OAAAC,KAASC,MAC5B,gBAAAC,EAAC,MAAA,EAA+B,cAAYF,GACvC,UAAAA,EAAA,GADI,cAAcC,CAAK,EAE5B,CACH;AACL,IAuCME,IAAqD;AAAA,EACtD,MAAqB;AAAA,EACrB,OAAsB;AAAA,EACtB,QAAuB;AAC5B,GAKaC,IAAc,CAAC;AAAA,EACxB,OAAAL;AAAA,EACA,UAAAM,IAAW;AAAA,EACX,UAAAC,IAAW;AAAA,EACX,cAAAC,IAAe;AAAA,EACf,gBAAgBC,IAAa;AAAA,EAC7B,aAAAC,IAAc;AAAA;AAClB,MAAsC;AAClC,QAAMC,IAAQZ,EAA0BC,CAAK,GACvC,EAAE,UAAAY,EAAA,IAAaC,EAAeF,CAA6B;AAEjE,SACI,gBAAAR,EAAC,SAAK,GAAGS,GAAU,WAAU,gBAAe,cAAW,cAAa,gBAAcH,GAC9E,4BAAC,MAAA,EAAG,WAAWK,EAAM,CAAC,qCAAqCV,EAAoBM,CAAW,CAAC,CAAC,GACxF,UAAA,gBAAAP;AAAA,IAACY;AAAA,IAAA;AAAA,MACG,OAAAf;AAAA,MACA,UAAAM;AAAA,MACA,UAAAC;AAAA,MACA,cAAAC;AAAA,MACA,gBAAcC;AAAA,IAAA;AAAA,EAAA,GAEtB,EAAA,CACJ;AAER;AACAJ,EAAY,cAAc;"}

package/dist/components/Button/mappings.es.js

@@ -1,16 +1,15 @@
-import { IconSize as t } from "../../foundation/Icon/IconSize.es.js";
-import { ButtonType as e, ButtonSize as o } from "./ButtonTypes.es.js";
-const u = {
-  [o.Small]: t.Size16,
-  [o.Medium]: t.Size20,
-  [o.Large]: t.Size24
-}, m = {
-  [e.Button]: "button",
-  [e.Submit]: "submit",
-  [e.Reset]: "reset"
+import { ButtonType as t, ButtonSize as o } from "./ButtonTypes.es.js";
+const n = {
+  [o.Small]: 16,
+  [o.Medium]: 20,
+  [o.Large]: 24
+}, u = {
+  [t.Button]: "button",
+  [t.Submit]: "submit",
+  [t.Reset]: "reset"
 };
 export {
-  u as buttonIconSizeMap,
-  m as buttonTypeMap
+  n as buttonIconSizeMap,
+  u as buttonTypeMap
 };
 //# sourceMappingURL=mappings.es.js.map

package/dist/components/Button/mappings.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"mappings.es.js","sources":["../../../src/components/Button/mappings.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconSize } from '@foundation/Icon/IconSize';\n\nimport { ButtonSize, ButtonType } from './ButtonTypes';\n\n/**\n * @deprecated Please use updated button component from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#button the migration guide}.\n */\nexport const buttonIconSizeMap: Record<ButtonSize, IconSize> = {\n    [ButtonSize.Small]: IconSize.Size16,\n    [ButtonSize.Medium]: IconSize.Size20,\n    [ButtonSize.Large]: IconSize.Size24,\n};\n\n/**\n * @deprecated Please use updated button component from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#button the migration guide}.\n */\nexport const buttonTypeMap: Record<ButtonType, 'button' | 'submit' | 'reset'> = {\n    [ButtonType.Button]: 'button',\n    [ButtonType.Submit]: 'submit',\n    [ButtonType.Reset]: 'reset',\n};\n"],"names":["buttonIconSizeMap","ButtonSize","IconSize","buttonTypeMap","ButtonType"],"mappings":";;AASO,MAAMA,IAAkD;AAAA,EAC3D,CAACC,EAAW,KAAK,GAAGC,EAAS;AAAA,EAC7B,CAACD,EAAW,MAAM,GAAGC,EAAS;AAAA,EAC9B,CAACD,EAAW,KAAK,GAAGC,EAAS;AACjC,GAKaC,IAAmE;AAAA,EAC5E,CAACC,EAAW,MAAM,GAAG;AAAA,EACrB,CAACA,EAAW,MAAM,GAAG;AAAA,EACrB,CAACA,EAAW,KAAK,GAAG;AACxB;"}
+{"version":3,"file":"mappings.es.js","sources":["../../../src/components/Button/mappings.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type FondueIconProps } from '@frontify/fondue-icons';\n\nimport { ButtonSize, ButtonType } from './ButtonTypes';\n\n/**\n * @deprecated Please use updated button component from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#button the migration guide}.\n */\nexport const buttonIconSizeMap: Record<ButtonSize, FondueIconProps['size']> = {\n    [ButtonSize.Small]: 16,\n    [ButtonSize.Medium]: 20,\n    [ButtonSize.Large]: 24,\n};\n\n/**\n * @deprecated Please use updated button component from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#button the migration guide}.\n */\nexport const buttonTypeMap: Record<ButtonType, 'button' | 'submit' | 'reset'> = {\n    [ButtonType.Button]: 'button',\n    [ButtonType.Submit]: 'submit',\n    [ButtonType.Reset]: 'reset',\n};\n"],"names":["buttonIconSizeMap","ButtonSize","buttonTypeMap","ButtonType"],"mappings":";AASO,MAAMA,IAAiE;AAAA,EAC1E,CAACC,EAAW,KAAK,GAAG;AAAA,EACpB,CAACA,EAAW,MAAM,GAAG;AAAA,EACrB,CAACA,EAAW,KAAK,GAAG;AACxB,GAKaC,IAAmE;AAAA,EAC5E,CAACC,EAAW,MAAM,GAAG;AAAA,EACrB,CAACA,EAAW,MAAM,GAAG;AAAA,EACrB,CAACA,EAAW,KAAK,GAAG;AACxB;"}