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

package/dist/components/MenuItem/MenuItem.es.js

@@ -1,18 +1,16 @@
 import { jsx as t, jsxs as p, Fragment as k } from "react/jsx-runtime";
-import { useFocusRing as H } from "@react-aria/focus";
-import { MenuItemContent as W } from "./MenuItemContent.es.js";
-import O from "../../foundation/Icon/Generated/IconCaretRight.es.js";
-import V from "../../foundation/Icon/Generated/IconCheckMark.es.js";
-import { IconSize as D } from "../../foundation/Icon/IconSize.es.js";
-import { getItemElementType as X } from "../../utilities/elements.es.js";
-import { FOCUS_STYLE_NO_OFFSET as _ } from "../../utilities/focusStyle.es.js";
-import { merge as o } from "../../utilities/merge.es.js";
+import { IconCheckMark as H, IconCaretRight as W } from "@frontify/fondue-icons";
+import { useFocusRing as z } from "@react-aria/focus";
+import { MenuItemContent as O } from "./MenuItemContent.es.js";
+import { getItemElementType as V } from "../../utilities/elements.es.js";
+import { FOCUS_STYLE_NO_OFFSET as D } from "../../utilities/focusStyle.es.js";
+import { merge as r } from "../../utilities/merge.es.js";
 import { MenuItemContentSize as n, SelectionIndicatorIcon as i, MenuItemStyle as e } from "./types.es.js";
-const $ = {
+const X = {
   [n.XSmall]: "tw-px-5 tw-py-2 tw-min-h-[36px]",
   [n.Small]: "tw-px-5 tw-py-2.5 tw-min-h-[36px]",
   [n.Large]: "tw-px-5 tw-py-3 tw-min-h-[60px]"
-}, K = {
+}, $ = {
   [e.Primary]: {
     Default: "tw-text-text-x-weak",
     Active: "tw-text-text",
@@ -28,23 +26,23 @@ const $ = {
     Active: "tw-text-yellow-90",
     Disabled: "tw-text-text-disabled"
   }
-}, U = {
+}, K = {
   [e.Primary]: "hover:tw-text-text",
   [e.Danger]: "hover:tw-text-text-negative",
   [e.Warning]: "hover:tw-text-text-warning"
-}, A = "tw-cursor-pointer tw-flex tw-items-center tw-justify-between tw-transition-colors tw-gap-2", Y = "hover:tw-bg-box-neutral-hover hover:tw-text-box-neutral-inverse-hover", S = o(["tw-w-full tw-text-left tw-py-2 tw-px-5 tw-rounded", Y]), q = "tw-bg-box-selected", B = ({
-  title: N,
-  decorator: R,
-  switchComponent: M,
-  subtitle: T,
-  size: a = n.Small,
-  style: d = e.Primary,
+}, _ = "tw-cursor-pointer tw-flex tw-items-center tw-justify-between tw-transition-colors tw-gap-2", U = "hover:tw-bg-box-neutral-hover hover:tw-text-box-neutral-inverse-hover", d = r(["tw-w-full tw-text-left tw-py-2 tw-px-5 tw-rounded", U]), Y = "tw-bg-box-selected", q = ({
+  title: A,
+  decorator: N,
+  switchComponent: R,
+  subtitle: M,
+  size: o = n.Small,
+  style: u = e.Primary,
   disabled: m = !1,
   active: s = !1,
-  checked: F = !1,
-  selectionIndicator: L = i.Check,
-  children: r,
-  link: u,
+  checked: T = !1,
+  selectionIndicator: F = i.Check,
+  children: a,
+  link: S,
   onBlur: f,
   onClick: l,
   onFocus: g,
@@ -53,34 +51,34 @@ const $ = {
   onMouseOver: h,
   onMouseLeave: C,
   "data-test-id": w = "menu-item",
-  type: P
+  type: L
 }) => {
-  const E = a === n.XSmall ? D.Size16 : D.Size20, z = {
-    [i.CaretRight]: /* @__PURE__ */ t(O, { "data-test-id": `${w}-caret`, size: E }),
-    [i.Check]: s && /* @__PURE__ */ t(V, { "data-test-id": `${w}-active`, size: E }),
+  const E = o === n.XSmall ? 16 : 20, P = {
+    [i.CaretRight]: /* @__PURE__ */ t(W, { "data-test-id": `${w}-caret`, size: E }),
+    [i.Check]: s && /* @__PURE__ */ t(H, { "data-test-id": `${w}-active`, size: E }),
     [i.None]: null
-  }[L], { isFocusVisible: v, focusProps: y } = H();
+  }[F], { isFocusVisible: v, focusProps: y } = z();
   let x = "Default";
   m ? x = "Disabled" : s && (x = "Active");
-  const j = K[d][x], c = X(u, l);
+  const j = $[u][x], c = V(S, l);
   return /* @__PURE__ */ p(k, { children: [
-    r ? /* @__PURE__ */ p(
+    a ? /* @__PURE__ */ p(
       "li",
       {
         "data-test-id": w,
-        "data-type": P,
+        "data-type": L,
         role: "menuitem",
-        className: o([
+        className: r([
           "tw-text-sm tw-leading-4 tw-text-text-weak",
-          A,
-          F ? q : ""
+          _,
+          T ? Y : ""
         ]),
         children: [
           c === "a" && /* @__PURE__ */ t(
             "a",
             {
-              href: u,
-              className: o([S, v && _]),
+              href: S,
+              className: r([d, v && D]),
               onBlur: f,
               onClick: l,
               onFocus: g,
@@ -89,7 +87,7 @@ const $ = {
               onMouseOut: I,
               onMouseOver: h,
               ...y,
-              children: r
+              children: a
             }
           ),
           c === "button" && /* @__PURE__ */ t(
@@ -97,7 +95,7 @@ const $ = {
             {
               type: "button",
               disabled: m,
-              className: o([S, v && _]),
+              className: r([d, v && D]),
               onBlur: f,
               onClick: l,
               onFocus: g,
@@ -106,44 +104,44 @@ const $ = {
               onMouseOut: I,
               onMouseOver: h,
               ...y,
-              children: r
+              children: a
             }
           ),
-          c === "span" && /* @__PURE__ */ t("span", { className: S, children: r })
+          c === "span" && /* @__PURE__ */ t("span", { className: d, children: a })
         ]
       }
     ) : null,
-    !r && /* @__PURE__ */ p(
+    !a && /* @__PURE__ */ p(
       "div",
       {
-        className: o([
-          A,
-          U[d],
-          $[a],
+        className: r([
+          _,
+          K[u],
+          X[o],
           m && "tw-bg-box-disabled tw-pointer-events-none",
           s && "tw-font-medium",
           j
         ]),
         children: [
           /* @__PURE__ */ t(
-            W,
+            O,
             {
-              title: N,
-              decorator: R,
-              subtitle: a === n.Large ? T : void 0,
-              size: a,
-              switchComponent: M
+              title: A,
+              decorator: N,
+              subtitle: o === n.Large ? M : void 0,
+              size: o,
+              switchComponent: R
             }
           ),
-          /* @__PURE__ */ t("div", { className: "tw-flex-none", children: z })
+          /* @__PURE__ */ t("div", { className: "tw-flex-none", children: P })
         ]
       }
     )
   ] });
 };
-B.displayName = "FondueMenuItem";
+q.displayName = "FondueMenuItem";
 export {
-  B as MenuItem,
-  K as menuItemTextColorRecord
+  q as MenuItem,
+  $ as menuItemTextColorRecord
 };
 //# sourceMappingURL=MenuItem.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.es.js","sources":["../../../src/components/MenuItem/MenuItem.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useFocusRing } from '@react-aria/focus';\nimport { type FocusEvent, type MouseEvent, type ReactNode } from 'react';\n\nimport { MenuItemContent, type MenuItemContentProps } from '@components/MenuItem/MenuItemContent';\nimport IconCaretRight from '@foundation/Icon/Generated/IconCaretRight';\nimport IconCheckMark from '@foundation/Icon/Generated/IconCheckMark';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { getItemElementType } from '@utilities/elements';\nimport { FOCUS_STYLE_NO_OFFSET } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\n\nimport { MenuItemContentSize, MenuItemStyle, SelectionIndicatorIcon } from './types';\n\n/**\n * @deprecated Use `Dropdown` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#dropdown the migration guide}.\n */\nexport type MenuItemProps = {\n    style?: MenuItemStyle;\n    disabled?: boolean;\n    active?: boolean;\n    checked?: boolean;\n    selectionIndicator?: SelectionIndicatorIcon;\n    /** @deprecated this prop is not being used anymore */\n    type?: string;\n    link?: string;\n    onBlur?: <T extends HTMLButtonElement | HTMLAnchorElement>(event: FocusEvent<T>) => void;\n    onClick?: <T extends HTMLButtonElement | HTMLAnchorElement>(event: MouseEvent<T>) => void;\n    onFocus?: <T extends HTMLButtonElement | HTMLAnchorElement>(event: FocusEvent<T>) => void;\n    onMouseEnter?: <T extends HTMLButtonElement | HTMLAnchorElement>(event: MouseEvent<T>) => void;\n    onMouseOut?: <T extends HTMLButtonElement | HTMLAnchorElement>(event: MouseEvent<T>) => void;\n    onMouseOver?: <T extends HTMLButtonElement | HTMLAnchorElement>(event: MouseEvent<T>) => void;\n    onMouseLeave?: <T extends HTMLButtonElement | HTMLAnchorElement>(event: MouseEvent<T>) => void;\n    children?: ReactNode;\n    'data-test-id'?: string;\n} & Omit<MenuItemContentProps, 'iconSize'>;\n\n/**\n * @deprecated Use `Dropdown` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#dropdown the migration guide}.\n */\nconst menuItemSizeClassMap: Record<MenuItemContentSize, string> = {\n    [MenuItemContentSize.XSmall]: 'tw-px-5 tw-py-2 tw-min-h-[36px]',\n    [MenuItemContentSize.Small]: 'tw-px-5 tw-py-2.5 tw-min-h-[36px]',\n    [MenuItemContentSize.Large]: 'tw-px-5 tw-py-3 tw-min-h-[60px]',\n};\n\n/**\n * @deprecated Use `Dropdown` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#dropdown the migration guide}.\n */\nexport enum MenuItemTextColorState {\n    Default = 'Default',\n    Active = 'Active',\n    Disabled = 'Disabled',\n}\n\n/**\n * @deprecated Use `Dropdown` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#dropdown the migration guide}.\n */\nexport const menuItemTextColorRecord: Record<MenuItemStyle, Record<MenuItemTextColorState, string>> = {\n    [MenuItemStyle.Primary]: {\n        [MenuItemTextColorState.Default]: 'tw-text-text-x-weak',\n        [MenuItemTextColorState.Active]: 'tw-text-text',\n        [MenuItemTextColorState.Disabled]: 'tw-text-text-disabled',\n    },\n    [MenuItemStyle.Danger]: {\n        [MenuItemTextColorState.Default]: 'tw-text-red-60',\n        [MenuItemTextColorState.Active]: 'tw-text-red-70',\n        [MenuItemTextColorState.Disabled]: 'tw-text-text-disabled',\n    },\n    [MenuItemStyle.Warning]: {\n        [MenuItemTextColorState.Default]: 'tw-text-text-warning',\n        [MenuItemTextColorState.Active]: 'tw-text-yellow-90',\n        [MenuItemTextColorState.Disabled]: 'tw-text-text-disabled',\n    },\n};\n\n/**\n * @deprecated Use `Dropdown` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#dropdown the migration guide}.\n */\nconst menuItemHoverColorRecord: Record<MenuItemStyle, string> = {\n    [MenuItemStyle.Primary]: 'hover:tw-text-text',\n    [MenuItemStyle.Danger]: 'hover:tw-text-text-negative',\n    [MenuItemStyle.Warning]: 'hover:tw-text-text-warning',\n};\n\nconst ITEM_WRAPPER_CLASSES =\n    'tw-cursor-pointer tw-flex tw-items-center tw-justify-between tw-transition-colors tw-gap-2';\nconst ITEM_HOVER_CLASSES = 'hover:tw-bg-box-neutral-hover hover:tw-text-box-neutral-inverse-hover';\nconst ITEM_BASE_CLASSES = merge(['tw-w-full tw-text-left tw-py-2 tw-px-5 tw-rounded', ITEM_HOVER_CLASSES]);\nconst ITEM_CHECKED_CLASSES = 'tw-bg-box-selected';\n\n/**\n * @deprecated Use `Dropdown` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#dropdown the migration guide}.\n */\nexport const MenuItem = ({\n    title,\n    decorator,\n    switchComponent,\n    subtitle,\n    size = MenuItemContentSize.Small,\n    style = MenuItemStyle.Primary,\n    disabled = false,\n    active = false,\n    checked = false,\n    selectionIndicator = SelectionIndicatorIcon.Check,\n    children,\n    link,\n    onBlur,\n    onClick,\n    onFocus,\n    onMouseEnter,\n    onMouseOut,\n    onMouseOver,\n    onMouseLeave,\n    'data-test-id': dataTestId = 'menu-item',\n    type,\n}: MenuItemProps) => {\n    const currentIconSize = size === MenuItemContentSize.XSmall ? IconSize.Size16 : IconSize.Size20;\n\n    const currentIcon = {\n        [SelectionIndicatorIcon.CaretRight]: (\n            <IconCaretRight data-test-id={`${dataTestId}-caret`} size={currentIconSize} />\n        ),\n        [SelectionIndicatorIcon.Check]: active && (\n            <IconCheckMark data-test-id={`${dataTestId}-active`} size={currentIconSize} />\n        ),\n        [SelectionIndicatorIcon.None]: null,\n    }[selectionIndicator];\n\n    const { isFocusVisible, focusProps } = useFocusRing();\n\n    let textState = MenuItemTextColorState.Default;\n    if (disabled) {\n        textState = MenuItemTextColorState.Disabled;\n    } else if (active) {\n        textState = MenuItemTextColorState.Active;\n    }\n\n    const textClass = menuItemTextColorRecord[style][textState];\n\n    const mainElementType = getItemElementType(link, onClick);\n\n    return (\n        <>\n            {children ? (\n                <li\n                    data-test-id={dataTestId}\n                    data-type={type}\n                    role=\"menuitem\"\n                    className={merge([\n                        'tw-text-sm tw-leading-4 tw-text-text-weak',\n                        ITEM_WRAPPER_CLASSES,\n                        checked ? ITEM_CHECKED_CLASSES : '',\n                    ])}\n                >\n                    {mainElementType === 'a' && (\n                        <a\n                            href={link}\n                            className={merge([ITEM_BASE_CLASSES, isFocusVisible && FOCUS_STYLE_NO_OFFSET])}\n                            onBlur={onBlur}\n                            onClick={onClick}\n                            onFocus={onFocus}\n                            onMouseEnter={onMouseEnter}\n                            onMouseLeave={onMouseLeave}\n                            onMouseOut={onMouseOut}\n                            onMouseOver={onMouseOver}\n                            {...focusProps}\n                        >\n                            {children}\n                        </a>\n                    )}\n                    {mainElementType === 'button' && (\n                        <button\n                            type=\"button\"\n                            disabled={disabled}\n                            className={merge([ITEM_BASE_CLASSES, isFocusVisible && FOCUS_STYLE_NO_OFFSET])}\n                            onBlur={onBlur}\n                            onClick={onClick}\n                            onFocus={onFocus}\n                            onMouseEnter={onMouseEnter}\n                            onMouseLeave={onMouseLeave}\n                            onMouseOut={onMouseOut}\n                            onMouseOver={onMouseOver}\n                            {...focusProps}\n                        >\n                            {children}\n                        </button>\n                    )}\n                    {mainElementType === 'span' && <span className={ITEM_BASE_CLASSES}>{children}</span>}\n                </li>\n            ) : null}\n            {/* The implementation without children is the first behavior of the MenuItem component.\n                This way we can introduce the new changes without breaking the current usage of it.\n                In the future, this implementation should be replaced by the new one and the projects updated properly\n            */}\n            {!children && (\n                <div\n                    className={merge([\n                        ITEM_WRAPPER_CLASSES,\n                        menuItemHoverColorRecord[style],\n                        menuItemSizeClassMap[size],\n                        disabled && 'tw-bg-box-disabled tw-pointer-events-none',\n                        active && 'tw-font-medium',\n                        textClass,\n                    ])}\n                >\n                    <MenuItemContent\n                        title={title}\n                        decorator={decorator}\n                        subtitle={size === MenuItemContentSize.Large ? subtitle : undefined}\n                        size={size}\n                        switchComponent={switchComponent}\n                    />\n                    <div className=\"tw-flex-none\">{currentIcon}</div>\n                </div>\n            )}\n        </>\n    );\n};\nMenuItem.displayName = 'FondueMenuItem';\n"],"names":["menuItemSizeClassMap","MenuItemContentSize","menuItemTextColorRecord","MenuItemStyle","menuItemHoverColorRecord","ITEM_WRAPPER_CLASSES","ITEM_HOVER_CLASSES","ITEM_BASE_CLASSES","merge","ITEM_CHECKED_CLASSES","MenuItem","title","decorator","switchComponent","subtitle","size","style","disabled","active","checked","selectionIndicator","SelectionIndicatorIcon","children","link","onBlur","onClick","onFocus","onMouseEnter","onMouseOut","onMouseOver","onMouseLeave","dataTestId","type","currentIconSize","IconSize","currentIcon","jsx","IconCaretRight","IconCheckMark","isFocusVisible","focusProps","useFocusRing","textState","textClass","mainElementType","getItemElementType","jsxs","Fragment","FOCUS_STYLE_NO_OFFSET","MenuItemContent"],"mappings":";;;;;;;;;;AAyCA,MAAMA,IAA4D;AAAA,EAC9D,CAACC,EAAoB,MAAM,GAAG;AAAA,EAC9B,CAACA,EAAoB,KAAK,GAAG;AAAA,EAC7B,CAACA,EAAoB,KAAK,GAAG;AACjC,GAcaC,IAAyF;AAAA,EAClG,CAACC,EAAc,OAAO,GAAG;AAAA,IACpB,SAAiC;AAAA,IACjC,QAAgC;AAAA,IAChC,UAAkC;AAAA,EAAA;AAAA,EAEvC,CAACA,EAAc,MAAM,GAAG;AAAA,IACnB,SAAiC;AAAA,IACjC,QAAgC;AAAA,IAChC,UAAkC;AAAA,EAAA;AAAA,EAEvC,CAACA,EAAc,OAAO,GAAG;AAAA,IACpB,SAAiC;AAAA,IACjC,QAAgC;AAAA,IAChC,UAAkC;AAAA,EAAA;AAE3C,GAKMC,IAA0D;AAAA,EAC5D,CAACD,EAAc,OAAO,GAAG;AAAA,EACzB,CAACA,EAAc,MAAM,GAAG;AAAA,EACxB,CAACA,EAAc,OAAO,GAAG;AAC7B,GAEME,IACF,8FACEC,IAAqB,yEACrBC,IAAoBC,EAAM,CAAC,qDAAqDF,CAAkB,CAAC,GACnGG,IAAuB,sBAKhBC,IAAW,CAAC;AAAA,EACrB,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC,IAAOd,EAAoB;AAAA,EAC3B,OAAAe,IAAQb,EAAc;AAAA,EACtB,UAAAc,IAAW;AAAA,EACX,QAAAC,IAAS;AAAA,EACT,SAAAC,IAAU;AAAA,EACV,oBAAAC,IAAqBC,EAAuB;AAAA,EAC5C,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,cAAAC;AAAA,EACA,YAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,gBAAgBC,IAAa;AAAA,EAC7B,MAAAC;AACJ,MAAqB;AACjB,QAAMC,IAAkBlB,MAASd,EAAoB,SAASiC,EAAS,SAASA,EAAS,QAEnFC,IAAc;AAAA,IAChB,CAACd,EAAuB,UAAU,GAC9B,gBAAAe,EAACC,GAAA,EAAe,gBAAc,GAAGN,CAAU,UAAU,MAAME,EAAA,CAAiB;AAAA,IAEhF,CAACZ,EAAuB,KAAK,GAAGH,KAC5B,gBAAAkB,EAACE,GAAA,EAAc,gBAAc,GAAGP,CAAU,WAAW,MAAME,EAAA,CAAiB;AAAA,IAEhF,CAACZ,EAAuB,IAAI,GAAG;AAAA,EAAA,EACjCD,CAAkB,GAEd,EAAE,gBAAAmB,GAAgB,YAAAC,EAAA,IAAeC,EAAA;AAEvC,MAAIC,IAAY;AAChB,EAAIzB,IACAyB,IAAY,aACLxB,MACPwB,IAAY;AAGhB,QAAMC,IAAYzC,EAAwBc,CAAK,EAAE0B,CAAS,GAEpDE,IAAkBC,EAAmBtB,GAAME,CAAO;AAExD,SACI,gBAAAqB,EAAAC,GAAA,EACK,UAAA;AAAA,IAAAzB,IACG,gBAAAwB;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,gBAAcf;AAAA,QACd,aAAWC;AAAA,QACX,MAAK;AAAA,QACL,WAAWxB,EAAM;AAAA,UACb;AAAA,UACAH;AAAA,UACAc,IAAUV,IAAuB;AAAA,QAAA,CACpC;AAAA,QAEA,UAAA;AAAA,UAAAmC,MAAoB,OACjB,gBAAAR;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,MAAMb;AAAA,cACN,WAAWf,EAAM,CAACD,GAAmBgC,KAAkBS,CAAqB,CAAC;AAAA,cAC7E,QAAAxB;AAAA,cACA,SAAAC;AAAA,cACA,SAAAC;AAAA,cACA,cAAAC;AAAA,cACA,cAAAG;AAAA,cACA,YAAAF;AAAA,cACA,aAAAC;AAAA,cACC,GAAGW;AAAA,cAEH,UAAAlB;AAAA,YAAA;AAAA,UAAA;AAAA,UAGRsB,MAAoB,YACjB,gBAAAR;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,MAAK;AAAA,cACL,UAAAnB;AAAA,cACA,WAAWT,EAAM,CAACD,GAAmBgC,KAAkBS,CAAqB,CAAC;AAAA,cAC7E,QAAAxB;AAAA,cACA,SAAAC;AAAA,cACA,SAAAC;AAAA,cACA,cAAAC;AAAA,cACA,cAAAG;AAAA,cACA,YAAAF;AAAA,cACA,aAAAC;AAAA,cACC,GAAGW;AAAA,cAEH,UAAAlB;AAAA,YAAA;AAAA,UAAA;AAAA,UAGRsB,MAAoB,UAAU,gBAAAR,EAAC,QAAA,EAAK,WAAW7B,GAAoB,UAAAe,EAAA,CAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,IAEjF;AAAA,IAKH,CAACA,KACE,gBAAAwB;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAWtC,EAAM;AAAA,UACbH;AAAA,UACAD,EAAyBY,CAAK;AAAA,UAC9BhB,EAAqBe,CAAI;AAAA,UACzBE,KAAY;AAAA,UACZC,KAAU;AAAA,UACVyB;AAAA,QAAA,CACH;AAAA,QAED,UAAA;AAAA,UAAA,gBAAAP;AAAA,YAACa;AAAA,YAAA;AAAA,cACG,OAAAtC;AAAA,cACA,WAAAC;AAAA,cACA,UAAUG,MAASd,EAAoB,QAAQa,IAAW;AAAA,cAC1D,MAAAC;AAAA,cACA,iBAAAF;AAAA,YAAA;AAAA,UAAA;AAAA,UAEJ,gBAAAuB,EAAC,OAAA,EAAI,WAAU,gBAAgB,UAAAD,EAAA,CAAY;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAC/C,GAER;AAER;AACAzB,EAAS,cAAc;"}
+{"version":3,"file":"MenuItem.es.js","sources":["../../../src/components/MenuItem/MenuItem.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretRight, IconCheckMark } from '@frontify/fondue-icons';\nimport { useFocusRing } from '@react-aria/focus';\nimport { type FocusEvent, type MouseEvent, type ReactNode } from 'react';\n\nimport { MenuItemContent, type MenuItemContentProps } from '@components/MenuItem/MenuItemContent';\nimport { getItemElementType } from '@utilities/elements';\nimport { FOCUS_STYLE_NO_OFFSET } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\n\nimport { MenuItemContentSize, MenuItemStyle, SelectionIndicatorIcon } from './types';\n\n/**\n * @deprecated Use `Dropdown` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#dropdown the migration guide}.\n */\nexport type MenuItemProps = {\n    style?: MenuItemStyle;\n    disabled?: boolean;\n    active?: boolean;\n    checked?: boolean;\n    selectionIndicator?: SelectionIndicatorIcon;\n    /** @deprecated this prop is not being used anymore */\n    type?: string;\n    link?: string;\n    onBlur?: <T extends HTMLButtonElement | HTMLAnchorElement>(event: FocusEvent<T>) => void;\n    onClick?: <T extends HTMLButtonElement | HTMLAnchorElement>(event: MouseEvent<T>) => void;\n    onFocus?: <T extends HTMLButtonElement | HTMLAnchorElement>(event: FocusEvent<T>) => void;\n    onMouseEnter?: <T extends HTMLButtonElement | HTMLAnchorElement>(event: MouseEvent<T>) => void;\n    onMouseOut?: <T extends HTMLButtonElement | HTMLAnchorElement>(event: MouseEvent<T>) => void;\n    onMouseOver?: <T extends HTMLButtonElement | HTMLAnchorElement>(event: MouseEvent<T>) => void;\n    onMouseLeave?: <T extends HTMLButtonElement | HTMLAnchorElement>(event: MouseEvent<T>) => void;\n    children?: ReactNode;\n    'data-test-id'?: string;\n} & Omit<MenuItemContentProps, 'iconSize'>;\n\n/**\n * @deprecated Use `Dropdown` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#dropdown the migration guide}.\n */\nconst menuItemSizeClassMap: Record<MenuItemContentSize, string> = {\n    [MenuItemContentSize.XSmall]: 'tw-px-5 tw-py-2 tw-min-h-[36px]',\n    [MenuItemContentSize.Small]: 'tw-px-5 tw-py-2.5 tw-min-h-[36px]',\n    [MenuItemContentSize.Large]: 'tw-px-5 tw-py-3 tw-min-h-[60px]',\n};\n\n/**\n * @deprecated Use `Dropdown` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#dropdown the migration guide}.\n */\nexport enum MenuItemTextColorState {\n    Default = 'Default',\n    Active = 'Active',\n    Disabled = 'Disabled',\n}\n\n/**\n * @deprecated Use `Dropdown` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#dropdown the migration guide}.\n */\nexport const menuItemTextColorRecord: Record<MenuItemStyle, Record<MenuItemTextColorState, string>> = {\n    [MenuItemStyle.Primary]: {\n        [MenuItemTextColorState.Default]: 'tw-text-text-x-weak',\n        [MenuItemTextColorState.Active]: 'tw-text-text',\n        [MenuItemTextColorState.Disabled]: 'tw-text-text-disabled',\n    },\n    [MenuItemStyle.Danger]: {\n        [MenuItemTextColorState.Default]: 'tw-text-red-60',\n        [MenuItemTextColorState.Active]: 'tw-text-red-70',\n        [MenuItemTextColorState.Disabled]: 'tw-text-text-disabled',\n    },\n    [MenuItemStyle.Warning]: {\n        [MenuItemTextColorState.Default]: 'tw-text-text-warning',\n        [MenuItemTextColorState.Active]: 'tw-text-yellow-90',\n        [MenuItemTextColorState.Disabled]: 'tw-text-text-disabled',\n    },\n};\n\n/**\n * @deprecated Use `Dropdown` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#dropdown the migration guide}.\n */\nconst menuItemHoverColorRecord: Record<MenuItemStyle, string> = {\n    [MenuItemStyle.Primary]: 'hover:tw-text-text',\n    [MenuItemStyle.Danger]: 'hover:tw-text-text-negative',\n    [MenuItemStyle.Warning]: 'hover:tw-text-text-warning',\n};\n\nconst ITEM_WRAPPER_CLASSES =\n    'tw-cursor-pointer tw-flex tw-items-center tw-justify-between tw-transition-colors tw-gap-2';\nconst ITEM_HOVER_CLASSES = 'hover:tw-bg-box-neutral-hover hover:tw-text-box-neutral-inverse-hover';\nconst ITEM_BASE_CLASSES = merge(['tw-w-full tw-text-left tw-py-2 tw-px-5 tw-rounded', ITEM_HOVER_CLASSES]);\nconst ITEM_CHECKED_CLASSES = 'tw-bg-box-selected';\n\n/**\n * @deprecated Use `Dropdown` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#dropdown the migration guide}.\n */\nexport const MenuItem = ({\n    title,\n    decorator,\n    switchComponent,\n    subtitle,\n    size = MenuItemContentSize.Small,\n    style = MenuItemStyle.Primary,\n    disabled = false,\n    active = false,\n    checked = false,\n    selectionIndicator = SelectionIndicatorIcon.Check,\n    children,\n    link,\n    onBlur,\n    onClick,\n    onFocus,\n    onMouseEnter,\n    onMouseOut,\n    onMouseOver,\n    onMouseLeave,\n    'data-test-id': dataTestId = 'menu-item',\n    type,\n}: MenuItemProps) => {\n    const currentIconSize = size === MenuItemContentSize.XSmall ? 16 : 20;\n\n    const currentIcon = {\n        [SelectionIndicatorIcon.CaretRight]: (\n            <IconCaretRight data-test-id={`${dataTestId}-caret`} size={currentIconSize} />\n        ),\n        [SelectionIndicatorIcon.Check]: active && (\n            <IconCheckMark data-test-id={`${dataTestId}-active`} size={currentIconSize} />\n        ),\n        [SelectionIndicatorIcon.None]: null,\n    }[selectionIndicator];\n\n    const { isFocusVisible, focusProps } = useFocusRing();\n\n    let textState = MenuItemTextColorState.Default;\n    if (disabled) {\n        textState = MenuItemTextColorState.Disabled;\n    } else if (active) {\n        textState = MenuItemTextColorState.Active;\n    }\n\n    const textClass = menuItemTextColorRecord[style][textState];\n\n    const mainElementType = getItemElementType(link, onClick);\n\n    return (\n        <>\n            {children ? (\n                <li\n                    data-test-id={dataTestId}\n                    data-type={type}\n                    role=\"menuitem\"\n                    className={merge([\n                        'tw-text-sm tw-leading-4 tw-text-text-weak',\n                        ITEM_WRAPPER_CLASSES,\n                        checked ? ITEM_CHECKED_CLASSES : '',\n                    ])}\n                >\n                    {mainElementType === 'a' && (\n                        <a\n                            href={link}\n                            className={merge([ITEM_BASE_CLASSES, isFocusVisible && FOCUS_STYLE_NO_OFFSET])}\n                            onBlur={onBlur}\n                            onClick={onClick}\n                            onFocus={onFocus}\n                            onMouseEnter={onMouseEnter}\n                            onMouseLeave={onMouseLeave}\n                            onMouseOut={onMouseOut}\n                            onMouseOver={onMouseOver}\n                            {...focusProps}\n                        >\n                            {children}\n                        </a>\n                    )}\n                    {mainElementType === 'button' && (\n                        <button\n                            type=\"button\"\n                            disabled={disabled}\n                            className={merge([ITEM_BASE_CLASSES, isFocusVisible && FOCUS_STYLE_NO_OFFSET])}\n                            onBlur={onBlur}\n                            onClick={onClick}\n                            onFocus={onFocus}\n                            onMouseEnter={onMouseEnter}\n                            onMouseLeave={onMouseLeave}\n                            onMouseOut={onMouseOut}\n                            onMouseOver={onMouseOver}\n                            {...focusProps}\n                        >\n                            {children}\n                        </button>\n                    )}\n                    {mainElementType === 'span' && <span className={ITEM_BASE_CLASSES}>{children}</span>}\n                </li>\n            ) : null}\n            {/* The implementation without children is the first behavior of the MenuItem component.\n                This way we can introduce the new changes without breaking the current usage of it.\n                In the future, this implementation should be replaced by the new one and the projects updated properly\n            */}\n            {!children && (\n                <div\n                    className={merge([\n                        ITEM_WRAPPER_CLASSES,\n                        menuItemHoverColorRecord[style],\n                        menuItemSizeClassMap[size],\n                        disabled && 'tw-bg-box-disabled tw-pointer-events-none',\n                        active && 'tw-font-medium',\n                        textClass,\n                    ])}\n                >\n                    <MenuItemContent\n                        title={title}\n                        decorator={decorator}\n                        subtitle={size === MenuItemContentSize.Large ? subtitle : undefined}\n                        size={size}\n                        switchComponent={switchComponent}\n                    />\n                    <div className=\"tw-flex-none\">{currentIcon}</div>\n                </div>\n            )}\n        </>\n    );\n};\nMenuItem.displayName = 'FondueMenuItem';\n"],"names":["menuItemSizeClassMap","MenuItemContentSize","menuItemTextColorRecord","MenuItemStyle","menuItemHoverColorRecord","ITEM_WRAPPER_CLASSES","ITEM_HOVER_CLASSES","ITEM_BASE_CLASSES","merge","ITEM_CHECKED_CLASSES","MenuItem","title","decorator","switchComponent","subtitle","size","style","disabled","active","checked","selectionIndicator","SelectionIndicatorIcon","children","link","onBlur","onClick","onFocus","onMouseEnter","onMouseOut","onMouseOver","onMouseLeave","dataTestId","type","currentIconSize","currentIcon","jsx","IconCaretRight","IconCheckMark","isFocusVisible","focusProps","useFocusRing","textState","textClass","mainElementType","getItemElementType","jsxs","Fragment","FOCUS_STYLE_NO_OFFSET","MenuItemContent"],"mappings":"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"}

package/dist/components/MenuItem/MenuItemContent.es.js

@@ -1,29 +1,28 @@
 import { jsxs as r, jsx as n } from "react/jsx-runtime";
-import { cloneElement as p } from "react";
-import { IconSize as l } from "../../foundation/Icon/IconSize.es.js";
-import { merge as o } from "../../utilities/merge.es.js";
+import { cloneElement as c } from "react";
+import { merge as l } from "../../utilities/merge.es.js";
 import { MenuItemContentSize as t } from "./types.es.js";
 const d = {
   [t.XSmall]: "tw-pr-1.5",
   [t.Small]: "tw-pr-1.5",
   [t.Large]: "tw-pr-2"
-}, x = ({
-  title: i,
-  decorator: m,
-  switchComponent: s,
-  subtitle: a,
-  ariaProps: w,
+}, p = ({
+  title: a,
+  decorator: s,
+  switchComponent: m,
+  subtitle: i,
+  ariaProps: o,
   size: e = t.Small,
-  children: c
+  children: w
 }) => /* @__PURE__ */ r(
   "div",
   {
-    ...w,
+    ...o,
     "data-test-id": "menu-item-content",
     className: "tw-flex tw-box-border tw-items-center tw-font-sans tw-text-s tw-flex-auto tw-min-w-0",
     children: [
-      m && /* @__PURE__ */ n("span", { className: o(["tw-shrink-0", d[e]]), "data-test-id": "menu-item-decorator", children: p(m, {
-        size: e === t.Large ? l.Size24 : l.Size16
+      s && /* @__PURE__ */ n("span", { className: l(["tw-shrink-0", d[e]]), "data-test-id": "menu-item-decorator", children: c(s, {
+        size: e === t.Large ? 24 : 16
       }) }),
       /* @__PURE__ */ r("div", { className: "tw-flex-1 tw-overflow-hidden tw-text-ellipsis tw-whitespace-nowrap", children: [
         /* @__PURE__ */ n(
@@ -31,18 +30,18 @@ const d = {
           {
             "data-test-id": "menu-item-title",
             className: "tw-select-none tw-text-ellipsis tw-overflow-hidden",
-            title: typeof i == "string" ? i : "",
-            children: c || i
+            title: typeof a == "string" ? a : "",
+            children: w || a
           }
         ),
-        a && e === t.Large && /* @__PURE__ */ n("div", { "data-test-id": "menu-item-subtitle", className: "tw-select-none tw-text-xxs", title: a, children: a })
+        i && e === t.Large && /* @__PURE__ */ n("div", { "data-test-id": "menu-item-subtitle", className: "tw-select-none tw-text-xxs", title: i, children: i })
       ] }),
-      s && /* @__PURE__ */ n("span", { className: o(["tw-shrink-0", d[e]]), "data-test-id": "menu-item-decorator", children: s })
+      m && /* @__PURE__ */ n("span", { className: l(["tw-shrink-0", d[e]]), "data-test-id": "menu-item-decorator", children: m })
     ]
   }
 );
-x.displayName = "FondueMenuItemContent";
+p.displayName = "FondueMenuItemContent";
 export {
-  x as MenuItemContent
+  p as MenuItemContent
 };
 //# sourceMappingURL=MenuItemContent.es.js.map

package/dist/components/MenuItem/MenuItemContent.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItemContent.es.js","sources":["../../../src/components/MenuItem/MenuItemContent.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type HTMLAttributes, type ReactElement, type ReactNode, cloneElement } from 'react';\n\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { merge } from '@utilities/merge';\n\nimport { MenuItemContentSize } from './types';\n\n/**\n * @deprecated Use `Dropdown` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#dropdown the migration guide}.\n */\nexport type MenuItemContentProps = {\n    title?: ReactNode;\n    decorator?: ReactElement;\n    switchComponent?: ReactElement;\n    subtitle?: string;\n    size?: MenuItemContentSize;\n    ariaProps?: HTMLAttributes<HTMLElement>;\n    children?: ReactNode;\n};\n\n/**\n * This is a temporary workaround because for some yet unknown reasons `tailwindcss` in clarify purges the `tw-pr-1.5` class.\n */\nconst paddingRight: Record<MenuItemContentSize, string> = {\n    [MenuItemContentSize.XSmall]: 'tw-pr-1.5',\n    [MenuItemContentSize.Small]: 'tw-pr-1.5',\n    [MenuItemContentSize.Large]: 'tw-pr-2',\n};\n\n/**\n * @deprecated Use `Dropdown` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#dropdown the migration guide}.\n */\nexport const MenuItemContent = ({\n    title,\n    decorator,\n    switchComponent,\n    subtitle,\n    ariaProps,\n    size = MenuItemContentSize.Small,\n    children,\n}: MenuItemContentProps) => (\n    <div\n        {...ariaProps}\n        data-test-id=\"menu-item-content\"\n        className=\"tw-flex tw-box-border tw-items-center tw-font-sans tw-text-s tw-flex-auto tw-min-w-0\"\n    >\n        {decorator && (\n            <span className={merge(['tw-shrink-0', paddingRight[size]])} data-test-id=\"menu-item-decorator\">\n                {cloneElement(decorator, {\n                    size: size === MenuItemContentSize.Large ? IconSize.Size24 : IconSize.Size16,\n                })}\n            </span>\n        )}\n        <div className=\"tw-flex-1 tw-overflow-hidden tw-text-ellipsis tw-whitespace-nowrap\">\n            <div\n                data-test-id=\"menu-item-title\"\n                className=\"tw-select-none tw-text-ellipsis tw-overflow-hidden\"\n                title={typeof title === 'string' ? title : ''}\n            >\n                {children || title}\n            </div>\n            {subtitle && size === MenuItemContentSize.Large && (\n                <div data-test-id=\"menu-item-subtitle\" className=\"tw-select-none tw-text-xxs\" title={subtitle}>\n                    {subtitle}\n                </div>\n            )}\n        </div>\n        {switchComponent && (\n            <span className={merge(['tw-shrink-0', paddingRight[size]])} data-test-id=\"menu-item-decorator\">\n                {switchComponent}\n            </span>\n        )}\n    </div>\n);\nMenuItemContent.displayName = 'FondueMenuItemContent';\n"],"names":["paddingRight","MenuItemContentSize","MenuItemContent","title","decorator","switchComponent","subtitle","ariaProps","size","children","jsxs","jsx","merge","IconSize"],"mappings":";;;;;AAyBA,MAAMA,IAAoD;AAAA,EACtD,CAACC,EAAoB,MAAM,GAAG;AAAA,EAC9B,CAACA,EAAoB,KAAK,GAAG;AAAA,EAC7B,CAACA,EAAoB,KAAK,GAAG;AACjC,GAKaC,IAAkB,CAAC;AAAA,EAC5B,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,MAAAC,IAAOP,EAAoB;AAAA,EAC3B,UAAAQ;AACJ,MACI,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACI,GAAGH;AAAA,IACJ,gBAAa;AAAA,IACb,WAAU;AAAA,IAET,UAAA;AAAA,MAAAH,KACG,gBAAAO,EAAC,QAAA,EAAK,WAAWC,EAAM,CAAC,eAAeZ,EAAaQ,CAAI,CAAC,CAAC,GAAG,gBAAa,uBACrE,YAAaJ,GAAW;AAAA,QACrB,MAAMI,MAASP,EAAoB,QAAQY,EAAS,SAASA,EAAS;AAAA,MAAA,CACzE,GACL;AAAA,MAEJ,gBAAAH,EAAC,OAAA,EAAI,WAAU,sEACX,UAAA;AAAA,QAAA,gBAAAC;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,gBAAa;AAAA,YACb,WAAU;AAAA,YACV,OAAO,OAAOR,KAAU,WAAWA,IAAQ;AAAA,YAE1C,UAAAM,KAAYN;AAAA,UAAA;AAAA,QAAA;AAAA,QAEhBG,KAAYE,MAASP,EAAoB,SACtC,gBAAAU,EAAC,OAAA,EAAI,gBAAa,sBAAqB,WAAU,8BAA6B,OAAOL,GAChF,UAAAA,EAAA,CACL;AAAA,MAAA,GAER;AAAA,MACCD,KACG,gBAAAM,EAAC,QAAA,EAAK,WAAWC,EAAM,CAAC,eAAeZ,EAAaQ,CAAI,CAAC,CAAC,GAAG,gBAAa,uBACrE,UAAAH,EAAA,CACL;AAAA,IAAA;AAAA,EAAA;AAER;AAEJH,EAAgB,cAAc;"}
+{"version":3,"file":"MenuItemContent.es.js","sources":["../../../src/components/MenuItem/MenuItemContent.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type HTMLAttributes, type ReactElement, type ReactNode, cloneElement } from 'react';\n\nimport { merge } from '@utilities/merge';\n\nimport { MenuItemContentSize } from './types';\n\n/**\n * @deprecated Use `Dropdown` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#dropdown the migration guide}.\n */\nexport type MenuItemContentProps = {\n    title?: ReactNode;\n    decorator?: ReactElement;\n    switchComponent?: ReactElement;\n    subtitle?: string;\n    size?: MenuItemContentSize;\n    ariaProps?: HTMLAttributes<HTMLElement>;\n    children?: ReactNode;\n};\n\n/**\n * This is a temporary workaround because for some yet unknown reasons `tailwindcss` in clarify purges the `tw-pr-1.5` class.\n */\nconst paddingRight: Record<MenuItemContentSize, string> = {\n    [MenuItemContentSize.XSmall]: 'tw-pr-1.5',\n    [MenuItemContentSize.Small]: 'tw-pr-1.5',\n    [MenuItemContentSize.Large]: 'tw-pr-2',\n};\n\n/**\n * @deprecated Use `Dropdown` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#dropdown the migration guide}.\n */\nexport const MenuItemContent = ({\n    title,\n    decorator,\n    switchComponent,\n    subtitle,\n    ariaProps,\n    size = MenuItemContentSize.Small,\n    children,\n}: MenuItemContentProps) => (\n    <div\n        {...ariaProps}\n        data-test-id=\"menu-item-content\"\n        className=\"tw-flex tw-box-border tw-items-center tw-font-sans tw-text-s tw-flex-auto tw-min-w-0\"\n    >\n        {decorator && (\n            <span className={merge(['tw-shrink-0', paddingRight[size]])} data-test-id=\"menu-item-decorator\">\n                {cloneElement(decorator, {\n                    size: size === MenuItemContentSize.Large ? 24 : 16,\n                })}\n            </span>\n        )}\n        <div className=\"tw-flex-1 tw-overflow-hidden tw-text-ellipsis tw-whitespace-nowrap\">\n            <div\n                data-test-id=\"menu-item-title\"\n                className=\"tw-select-none tw-text-ellipsis tw-overflow-hidden\"\n                title={typeof title === 'string' ? title : ''}\n            >\n                {children || title}\n            </div>\n            {subtitle && size === MenuItemContentSize.Large && (\n                <div data-test-id=\"menu-item-subtitle\" className=\"tw-select-none tw-text-xxs\" title={subtitle}>\n                    {subtitle}\n                </div>\n            )}\n        </div>\n        {switchComponent && (\n            <span className={merge(['tw-shrink-0', paddingRight[size]])} data-test-id=\"menu-item-decorator\">\n                {switchComponent}\n            </span>\n        )}\n    </div>\n);\nMenuItemContent.displayName = 'FondueMenuItemContent';\n"],"names":["paddingRight","MenuItemContentSize","MenuItemContent","title","decorator","switchComponent","subtitle","ariaProps","size","children","jsxs","jsx","merge"],"mappings":";;;;AAwBA,MAAMA,IAAoD;AAAA,EACtD,CAACC,EAAoB,MAAM,GAAG;AAAA,EAC9B,CAACA,EAAoB,KAAK,GAAG;AAAA,EAC7B,CAACA,EAAoB,KAAK,GAAG;AACjC,GAKaC,IAAkB,CAAC;AAAA,EAC5B,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,MAAAC,IAAOP,EAAoB;AAAA,EAC3B,UAAAQ;AACJ,MACI,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACI,GAAGH;AAAA,IACJ,gBAAa;AAAA,IACb,WAAU;AAAA,IAET,UAAA;AAAA,MAAAH,KACG,gBAAAO,EAAC,QAAA,EAAK,WAAWC,EAAM,CAAC,eAAeZ,EAAaQ,CAAI,CAAC,CAAC,GAAG,gBAAa,uBACrE,YAAaJ,GAAW;AAAA,QACrB,MAAMI,MAASP,EAAoB,QAAQ,KAAK;AAAA,MAAA,CACnD,GACL;AAAA,MAEJ,gBAAAS,EAAC,OAAA,EAAI,WAAU,sEACX,UAAA;AAAA,QAAA,gBAAAC;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,gBAAa;AAAA,YACb,WAAU;AAAA,YACV,OAAO,OAAOR,KAAU,WAAWA,IAAQ;AAAA,YAE1C,UAAAM,KAAYN;AAAA,UAAA;AAAA,QAAA;AAAA,QAEhBG,KAAYE,MAASP,EAAoB,SACtC,gBAAAU,EAAC,OAAA,EAAI,gBAAa,sBAAqB,WAAU,8BAA6B,OAAOL,GAChF,UAAAA,EAAA,CACL;AAAA,MAAA,GAER;AAAA,MACCD,KACG,gBAAAM,EAAC,QAAA,EAAK,WAAWC,EAAM,CAAC,eAAeZ,EAAaQ,CAAI,CAAC,CAAC,GAAG,gBAAa,uBACrE,UAAAH,EAAA,CACL;AAAA,IAAA;AAAA,EAAA;AAER;AAEJH,EAAgB,cAAc;"}

package/dist/components/OverflowMenu/OverflowMenu.es.js

@@ -1,13 +1,13 @@
 import { jsxs as f, jsx as t } from "react/jsx-runtime";
-import { useFocusRing as p } from "@react-aria/focus";
-import { useState as c, useRef as w } from "react";
-import { Menu as d } from "../Menu/Menu.es.js";
-import b from "../../foundation/Icon/Generated/IconDotsHorizontal.es.js";
+import { IconDotsHorizontal as p } from "@frontify/fondue-icons";
+import { useFocusRing as c } from "@react-aria/focus";
+import { useState as w, useRef as d } from "react";
+import { Menu as b } from "../Menu/Menu.es.js";
 import { FOCUS_VISIBLE_STYLE as v } from "../../utilities/focusStyle.es.js";
 import { merge as g } from "../../utilities/merge.es.js";
 import { MenuItem as h } from "../MenuItem/MenuItem.es.js";
 const x = ({ items: s, "data-test-id": i = "overflow-menu" }) => {
-  const [o, n] = c(!1), r = w(null), { isFocusVisible: l, focusProps: a } = p(), u = () => {
+  const [o, n] = w(!1), r = d(null), { isFocusVisible: l, focusProps: a } = c(), u = () => {
     var e;
     (e = r.current) == null || e.focus(), n(!1);
   };
@@ -29,10 +29,10 @@ const x = ({ items: s, "data-test-id": i = "overflow-menu" }) => {
           n(!o);
         },
         ...a,
-        children: /* @__PURE__ */ t(b, {})
+        children: /* @__PURE__ */ t(p, {})
       }
     ),
-    /* @__PURE__ */ t(d, { triggerRef: r, onClose: u, open: o, children: s.map((e, m) => /* @__PURE__ */ t(h, { link: e.link, onClick: e.onClick, children: e.label }, `overflow-menu-item-${m}`)) })
+    /* @__PURE__ */ t(b, { triggerRef: r, onClose: u, open: o, children: s.map((e, m) => /* @__PURE__ */ t(h, { link: e.link, onClick: e.onClick, children: e.label }, `overflow-menu-item-${m}`)) })
   ] });
 };
 x.displayName = "FondueOverflowMenu";

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

@@ -1 +1 @@
-{"version":3,"file":"OverflowMenu.es.js","sources":["../../../src/components/OverflowMenu/OverflowMenu.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useFocusRing } from '@react-aria/focus';\nimport { type MouseEvent, useRef, useState } from 'react';\n\nimport { Menu } from '@components/Menu/Menu';\nimport { MenuItem } from '@components/MenuItem';\nimport IconDotsHorizontal from '@foundation/Icon/Generated/IconDotsHorizontal';\nimport { FOCUS_VISIBLE_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\n\n/**\n * @deprecated Use `Dropdown` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#dropdown the migration guide}.\n */\nexport interface OverflowMenuItemProps {\n    id?: string;\n    label: string;\n    link?: string;\n    onClick?: <T extends HTMLAnchorElement | HTMLButtonElement>(event: MouseEvent<T>) => void;\n    disabled?: boolean;\n}\n\n/**\n * @deprecated Use `Dropdown` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#dropdown the migration guide}.\n */\nexport interface OverflowMenuProps {\n    items: OverflowMenuItemProps[];\n    'data-test-id'?: string;\n}\n\n/**\n * @deprecated Use `Dropdown` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#dropdown the migration guide}.\n */\nexport const OverflowMenu = ({ items, 'data-test-id': dataTestId = 'overflow-menu' }: OverflowMenuProps) => {\n    const [isMenuOpen, setIsMenuOpen] = useState(false);\n    const menuOpenerRef = useRef<HTMLButtonElement>(null);\n    const { isFocusVisible, focusProps } = useFocusRing();\n\n    const handleClose = () => {\n        menuOpenerRef.current?.focus();\n        setIsMenuOpen(false);\n    };\n    return (\n        <div data-test-id={dataTestId} className=\"tw-relative tw-bottom-0 tw-top-0 tw-flex\">\n            <button\n                aria-haspopup=\"true\"\n                aria-expanded={isMenuOpen}\n                aria-label=\"Open overflow menu\"\n                ref={menuOpenerRef}\n                className={merge([\n                    'tw-w-6 tw-h-6 hover:tw-bg-box-neutral-strong-inverse-hover tw-rounded tw-flex tw-justify-center tw-items-center',\n                    isMenuOpen ? 'tw-bg-box-neutral-strong-inverse-pressed' : 'tw-bg-box-neutral-strong-inverse',\n                    isFocusVisible && FOCUS_VISIBLE_STYLE,\n                ])}\n                type=\"button\"\n                onClick={() => {\n                    setIsMenuOpen(!isMenuOpen);\n                }}\n                {...focusProps}\n            >\n                <IconDotsHorizontal />\n            </button>\n            <Menu triggerRef={menuOpenerRef} onClose={handleClose} open={isMenuOpen}>\n                {items.map((item, index) => (\n                    <MenuItem link={item.link} onClick={item.onClick} key={`overflow-menu-item-${index}`}>\n                        {item.label}\n                    </MenuItem>\n                ))}\n            </Menu>\n        </div>\n    );\n};\nOverflowMenu.displayName = 'FondueOverflowMenu';\n"],"names":["OverflowMenu","items","dataTestId","isMenuOpen","setIsMenuOpen","useState","menuOpenerRef","useRef","isFocusVisible","focusProps","useFocusRing","handleClose","_a","jsxs","jsx","merge","FOCUS_VISIBLE_STYLE","IconDotsHorizontal","Menu","item","index","MenuItem"],"mappings":";;;;;;;;AAiCO,MAAMA,IAAe,CAAC,EAAE,OAAAC,GAAO,gBAAgBC,IAAa,sBAAyC;AACxG,QAAM,CAACC,GAAYC,CAAa,IAAIC,EAAS,EAAK,GAC5CC,IAAgBC,EAA0B,IAAI,GAC9C,EAAE,gBAAAC,GAAgB,YAAAC,EAAA,IAAeC,EAAA,GAEjCC,IAAc,MAAM;;AACtB,KAAAC,IAAAN,EAAc,YAAd,QAAAM,EAAuB,SACvBR,EAAc,EAAK;AAAA,EACvB;AACA,SACI,gBAAAS,EAAC,OAAA,EAAI,gBAAcX,GAAY,WAAU,4CACrC,UAAA;AAAA,IAAA,gBAAAY;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,iBAAc;AAAA,QACd,iBAAeX;AAAA,QACf,cAAW;AAAA,QACX,KAAKG;AAAA,QACL,WAAWS,EAAM;AAAA,UACb;AAAA,UACAZ,IAAa,6CAA6C;AAAA,UAC1DK,KAAkBQ;AAAA,QAAA,CACrB;AAAA,QACD,MAAK;AAAA,QACL,SAAS,MAAM;AACX,UAAAZ,EAAc,CAACD,CAAU;AAAA,QAC7B;AAAA,QACC,GAAGM;AAAA,QAEJ,4BAACQ,GAAA,CAAA,CAAmB;AAAA,MAAA;AAAA,IAAA;AAAA,IAExB,gBAAAH,EAACI,GAAA,EAAK,YAAYZ,GAAe,SAASK,GAAa,MAAMR,GACxD,UAAAF,EAAM,IAAI,CAACkB,GAAMC,MACd,gBAAAN,EAACO,GAAA,EAAS,MAAMF,EAAK,MAAM,SAASA,EAAK,SACpC,UAAAA,EAAK,MAAA,GAD6C,sBAAsBC,CAAK,EAElF,CACH,EAAA,CACL;AAAA,EAAA,GACJ;AAER;AACApB,EAAa,cAAc;"}
+{"version":3,"file":"OverflowMenu.es.js","sources":["../../../src/components/OverflowMenu/OverflowMenu.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconDotsHorizontal } from '@frontify/fondue-icons';\nimport { useFocusRing } from '@react-aria/focus';\nimport { type MouseEvent, useRef, useState } from 'react';\n\nimport { Menu } from '@components/Menu/Menu';\nimport { MenuItem } from '@components/MenuItem';\nimport { FOCUS_VISIBLE_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\n\n/**\n * @deprecated Use `Dropdown` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#dropdown the migration guide}.\n */\nexport interface OverflowMenuItemProps {\n    id?: string;\n    label: string;\n    link?: string;\n    onClick?: <T extends HTMLAnchorElement | HTMLButtonElement>(event: MouseEvent<T>) => void;\n    disabled?: boolean;\n}\n\n/**\n * @deprecated Use `Dropdown` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#dropdown the migration guide}.\n */\nexport interface OverflowMenuProps {\n    items: OverflowMenuItemProps[];\n    'data-test-id'?: string;\n}\n\n/**\n * @deprecated Use `Dropdown` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#dropdown the migration guide}.\n */\nexport const OverflowMenu = ({ items, 'data-test-id': dataTestId = 'overflow-menu' }: OverflowMenuProps) => {\n    const [isMenuOpen, setIsMenuOpen] = useState(false);\n    const menuOpenerRef = useRef<HTMLButtonElement>(null);\n    const { isFocusVisible, focusProps } = useFocusRing();\n\n    const handleClose = () => {\n        menuOpenerRef.current?.focus();\n        setIsMenuOpen(false);\n    };\n    return (\n        <div data-test-id={dataTestId} className=\"tw-relative tw-bottom-0 tw-top-0 tw-flex\">\n            <button\n                aria-haspopup=\"true\"\n                aria-expanded={isMenuOpen}\n                aria-label=\"Open overflow menu\"\n                ref={menuOpenerRef}\n                className={merge([\n                    'tw-w-6 tw-h-6 hover:tw-bg-box-neutral-strong-inverse-hover tw-rounded tw-flex tw-justify-center tw-items-center',\n                    isMenuOpen ? 'tw-bg-box-neutral-strong-inverse-pressed' : 'tw-bg-box-neutral-strong-inverse',\n                    isFocusVisible && FOCUS_VISIBLE_STYLE,\n                ])}\n                type=\"button\"\n                onClick={() => {\n                    setIsMenuOpen(!isMenuOpen);\n                }}\n                {...focusProps}\n            >\n                <IconDotsHorizontal />\n            </button>\n            <Menu triggerRef={menuOpenerRef} onClose={handleClose} open={isMenuOpen}>\n                {items.map((item, index) => (\n                    <MenuItem link={item.link} onClick={item.onClick} key={`overflow-menu-item-${index}`}>\n                        {item.label}\n                    </MenuItem>\n                ))}\n            </Menu>\n        </div>\n    );\n};\nOverflowMenu.displayName = 'FondueOverflowMenu';\n"],"names":["OverflowMenu","items","dataTestId","isMenuOpen","setIsMenuOpen","useState","menuOpenerRef","useRef","isFocusVisible","focusProps","useFocusRing","handleClose","_a","jsxs","jsx","merge","FOCUS_VISIBLE_STYLE","IconDotsHorizontal","Menu","item","index","MenuItem"],"mappings":";;;;;;;;AAiCO,MAAMA,IAAe,CAAC,EAAE,OAAAC,GAAO,gBAAgBC,IAAa,sBAAyC;AACxG,QAAM,CAACC,GAAYC,CAAa,IAAIC,EAAS,EAAK,GAC5CC,IAAgBC,EAA0B,IAAI,GAC9C,EAAE,gBAAAC,GAAgB,YAAAC,EAAA,IAAeC,EAAA,GAEjCC,IAAc,MAAM;;AACtB,KAAAC,IAAAN,EAAc,YAAd,QAAAM,EAAuB,SACvBR,EAAc,EAAK;AAAA,EACvB;AACA,SACI,gBAAAS,EAAC,OAAA,EAAI,gBAAcX,GAAY,WAAU,4CACrC,UAAA;AAAA,IAAA,gBAAAY;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,iBAAc;AAAA,QACd,iBAAeX;AAAA,QACf,cAAW;AAAA,QACX,KAAKG;AAAA,QACL,WAAWS,EAAM;AAAA,UACb;AAAA,UACAZ,IAAa,6CAA6C;AAAA,UAC1DK,KAAkBQ;AAAA,QAAA,CACrB;AAAA,QACD,MAAK;AAAA,QACL,SAAS,MAAM;AACX,UAAAZ,EAAc,CAACD,CAAU;AAAA,QAC7B;AAAA,QACC,GAAGM;AAAA,QAEJ,4BAACQ,GAAA,CAAA,CAAmB;AAAA,MAAA;AAAA,IAAA;AAAA,IAExB,gBAAAH,EAACI,GAAA,EAAK,YAAYZ,GAAe,SAASK,GAAa,MAAMR,GACxD,UAAAF,EAAM,IAAI,CAACkB,GAAMC,MACd,gBAAAN,EAACO,GAAA,EAAS,MAAMF,EAAK,MAAM,SAASA,EAAK,SACpC,UAAAA,EAAK,MAAA,GAD6C,sBAAsBC,CAAK,EAElF,CACH,EAAA,CACL;AAAA,EAAA,GACJ;AAER;AACApB,EAAa,cAAc;"}

package/dist/components/Tag/Tag.es.js

@@ -1,56 +1,55 @@
 import { jsxs as u, jsx as s } from "react/jsx-runtime";
-import { useButton as a } from "@react-aria/button";
-import { useFocusRing as b } from "@react-aria/focus";
-import { mergeProps as m } from "@react-aria/utils";
-import { useRef as x } from "react";
-import g from "../../foundation/Icon/Generated/IconCross.es.js";
-import { IconSize as p } from "../../foundation/Icon/IconSize.es.js";
+import { IconCross as a } from "@frontify/fondue-icons";
+import { useButton as b } from "@react-aria/button";
+import { useFocusRing as m } from "@react-aria/focus";
+import { mergeProps as x } from "@react-aria/utils";
+import { useRef as g } from "react";
 import { FOCUS_STYLE as v } from "../../utilities/focusStyle.es.js";
-import { merge as S } from "../../utilities/merge.es.js";
-var h = /* @__PURE__ */ ((e) => (e.Suggested = "Suggested", e.Selected = "Selected", e.SelectedWithFocus = "SelectedWithFocus", e.PreviouslySelected = "PreviouslySelected", e))(h || {}), f = /* @__PURE__ */ ((e) => (e.Small = "Small", e.Medium = "Medium", e))(f || {});
-const F = {
+import { merge as p } from "../../utilities/merge.es.js";
+var S = /* @__PURE__ */ ((e) => (e.Suggested = "Suggested", e.Selected = "Selected", e.SelectedWithFocus = "SelectedWithFocus", e.PreviouslySelected = "PreviouslySelected", e))(S || {}), h = /* @__PURE__ */ ((e) => (e.Small = "Small", e.Medium = "Medium", e))(h || {});
+const f = {
   Suggested: "tw-border tw-bg-base tw-text-text-weak tw-border-line hover:tw-text-text hover:tw-border-line-strong",
   Selected: "tw-bg-box-neutral hover:tw-bg-box-neutral-hover tw-text-text-weak hover:tw-text-box-neutral-inverse-hover",
   SelectedWithFocus: "tw-bg-box-selected-strong hover:tw-bg-box-selected-strong-hover tw-text-box-selected-strong-inverse",
   PreviouslySelected: "tw-bg-base tw-border tw-text-box-selected-strong tw-border-box-selected-strong hover:tw-bg-box-neutral hover:tw-text-box-selected-inverse hover:tw-border-box-selected-inverse"
-}, P = ({ type: e, label: i, onClick: o, size: l = "Medium", "data-test-id": r = "tag" }) => {
-  const n = x(null), { isFocusVisible: c, focusProps: d } = b(), t = (e === "Selected" || e === "SelectedWithFocus") && o, { buttonProps: w } = a(
+}, F = ({ type: e, label: l, onClick: o, size: n = "Medium", "data-test-id": r = "tag" }) => {
+  const i = g(null), { isFocusVisible: c, focusProps: d } = m(), t = (e === "Selected" || e === "SelectedWithFocus") && o, { buttonProps: w } = b(
     {
       onPress: () => t && o()
     },
-    n
+    i
   );
   return /* @__PURE__ */ u(
     "button",
     {
       type: "button",
       "data-test-id": r,
-      className: S([
+      className: p([
         "tw-inline-flex tw-items-center tw-rounded-full tw-text-xs tw-transition-colors tw-group tw-outline-none tw-break-word",
-        l === "Small" ? "tw-px-1.5 tw-py-0.5" : "tw-px-2.5 tw-py-1",
-        F[e],
+        n === "Small" ? "tw-px-1.5 tw-py-0.5" : "tw-px-2.5 tw-py-1",
+        f[e],
         t ? "tw-cursor-pointer" : "tw-cursor-default",
         c && v
       ]),
-      ...m(w, d),
+      ...x(w, d),
       children: [
-        i,
+        l,
         t && /* @__PURE__ */ s(
           "span",
           {
             "data-test-id": `${r}-reject-icon`,
             className: "tw-opacity-80 group-hover:tw-opacity-100 tw-transition-opacity tw-ml-1 tw-leading-[0]",
-            children: /* @__PURE__ */ s(g, { size: p.Size12 })
+            children: /* @__PURE__ */ s(a, { size: 12 })
           }
         )
       ]
     }
   );
 };
-P.displayName = "FondueTag";
+F.displayName = "FondueTag";
 export {
-  P as Tag,
-  f as TagSize,
-  h as TagType
+  F as Tag,
+  h as TagSize,
+  S as TagType
 };
 //# sourceMappingURL=Tag.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tag.es.js","sources":["../../../src/components/Tag/Tag.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useButton } from '@react-aria/button';\nimport { useFocusRing } from '@react-aria/focus';\nimport { mergeProps } from '@react-aria/utils';\nimport { type MouseEvent, useRef } from 'react';\n\nimport IconCross from '@foundation/Icon/Generated/IconCross';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\n\n/**\n * @deprecated Use the new Tag component from @frontify/fondue/components instead\n */\nexport enum TagType {\n    Suggested = 'Suggested',\n    Selected = 'Selected',\n    SelectedWithFocus = 'SelectedWithFocus',\n    PreviouslySelected = 'PreviouslySelected',\n}\n\n/**\n * @deprecated Use the new Tag component from @frontify/fondue/components instead\n */\nexport enum TagSize {\n    Small = 'Small',\n    Medium = 'Medium',\n}\n\n/**\n * @deprecated Use the new Tag component from @frontify/fondue/components instead\n */\nconst tagStyles: Record<TagType, string> = {\n    [TagType.Suggested]:\n        'tw-border tw-bg-base tw-text-text-weak tw-border-line hover:tw-text-text hover:tw-border-line-strong',\n    [TagType.Selected]:\n        'tw-bg-box-neutral hover:tw-bg-box-neutral-hover tw-text-text-weak hover:tw-text-box-neutral-inverse-hover',\n    [TagType.SelectedWithFocus]:\n        'tw-bg-box-selected-strong hover:tw-bg-box-selected-strong-hover tw-text-box-selected-strong-inverse',\n    [TagType.PreviouslySelected]:\n        'tw-bg-base tw-border tw-text-box-selected-strong tw-border-box-selected-strong hover:tw-bg-box-neutral hover:tw-text-box-selected-inverse hover:tw-border-box-selected-inverse',\n};\n\n/**\n * @deprecated Use the new Tag component from @frontify/fondue/components instead\n */\nexport type TagProps = { 'data-test-id'?: string } & (TagPropsUnselected | TagPropsSelected);\n\ntype TagPropsSelected = {\n    type: TagType.Selected | TagType.SelectedWithFocus;\n    label: string;\n    onClick?: (event?: MouseEvent<HTMLButtonElement>) => void;\n    size?: TagSize;\n};\n\ntype TagPropsUnselected = {\n    type: TagType.Suggested | TagType.PreviouslySelected;\n    label: string;\n    onClick?: null;\n    size?: TagSize;\n};\n\n/**\n * @deprecated Use the new Tag component from @frontify/fondue/components instead\n */\nexport const Tag = ({ type, label, onClick, size = TagSize.Medium, 'data-test-id': dataTestId = 'tag' }: TagProps) => {\n    const ref = useRef<HTMLButtonElement | null>(null);\n    const { isFocusVisible, focusProps } = useFocusRing();\n    const isClickable = (type === TagType.Selected || type === TagType.SelectedWithFocus) && onClick;\n    const { buttonProps } = useButton(\n        {\n            onPress: () => isClickable && onClick(),\n        },\n        ref,\n    );\n\n    return (\n        <button\n            type=\"button\"\n            data-test-id={dataTestId}\n            className={merge([\n                'tw-inline-flex tw-items-center tw-rounded-full tw-text-xs tw-transition-colors tw-group tw-outline-none tw-break-word',\n                size === TagSize.Small ? 'tw-px-1.5 tw-py-0.5' : 'tw-px-2.5 tw-py-1',\n                tagStyles[type],\n                isClickable ? 'tw-cursor-pointer' : 'tw-cursor-default',\n                isFocusVisible && FOCUS_STYLE,\n            ])}\n            {...mergeProps(buttonProps, focusProps)}\n        >\n            {label}\n            {isClickable && (\n                <span\n                    data-test-id={`${dataTestId}-reject-icon`}\n                    className=\"tw-opacity-80 group-hover:tw-opacity-100 tw-transition-opacity tw-ml-1 tw-leading-[0]\"\n                >\n                    <IconCross size={IconSize.Size12} />\n                </span>\n            )}\n        </button>\n    );\n};\nTag.displayName = 'FondueTag';\n"],"names":["TagType","TagSize","tagStyles","Tag","type","label","onClick","size","dataTestId","ref","useRef","isFocusVisible","focusProps","useFocusRing","isClickable","buttonProps","useButton","jsxs","merge","FOCUS_STYLE","mergeProps","jsx","IconCross","IconSize"],"mappings":";;;;;;;;;AAeO,IAAKA,sBAAAA,OACRA,EAAA,YAAY,aACZA,EAAA,WAAW,YACXA,EAAA,oBAAoB,qBACpBA,EAAA,qBAAqB,sBAJbA,IAAAA,KAAA,CAAA,CAAA,GAUAC,sBAAAA,OACRA,EAAA,QAAQ,SACRA,EAAA,SAAS,UAFDA,IAAAA,KAAA,CAAA,CAAA;AAQZ,MAAMC,IAAqC;AAAA,EACtC,WACG;AAAA,EACH,UACG;AAAA,EACH,mBACG;AAAA,EACH,oBACG;AACR,GAwBaC,IAAM,CAAC,EAAE,MAAAC,GAAM,OAAAC,GAAO,SAAAC,GAAS,MAAAC,IAAO,UAAgB,gBAAgBC,IAAa,YAAsB;AAClH,QAAMC,IAAMC,EAAiC,IAAI,GAC3C,EAAE,gBAAAC,GAAgB,YAAAC,EAAA,IAAeC,EAAA,GACjCC,KAAeV,MAAS,cAAoBA,MAAS,wBAA8BE,GACnF,EAAE,aAAAS,MAAgBC;AAAA,IACpB;AAAA,MACI,SAAS,MAAMF,KAAeR,EAAA;AAAA,IAAQ;AAAA,IAE1CG;AAAA,EAAA;AAGJ,SACI,gBAAAQ;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,MAAK;AAAA,MACL,gBAAcT;AAAA,MACd,WAAWU,EAAM;AAAA,QACb;AAAA,QACAX,MAAS,UAAgB,wBAAwB;AAAA,QACjDL,EAAUE,CAAI;AAAA,QACdU,IAAc,sBAAsB;AAAA,QACpCH,KAAkBQ;AAAA,MAAA,CACrB;AAAA,MACA,GAAGC,EAAWL,GAAaH,CAAU;AAAA,MAErC,UAAA;AAAA,QAAAP;AAAA,QACAS,KACG,gBAAAO;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,gBAAc,GAAGb,CAAU;AAAA,YAC3B,WAAU;AAAA,YAEV,UAAA,gBAAAa,EAACC,GAAA,EAAU,MAAMC,EAAS,OAAA,CAAQ;AAAA,UAAA;AAAA,QAAA;AAAA,MACtC;AAAA,IAAA;AAAA,EAAA;AAIhB;AACApB,EAAI,cAAc;"}
+{"version":3,"file":"Tag.es.js","sources":["../../../src/components/Tag/Tag.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCross } from '@frontify/fondue-icons';\nimport { useButton } from '@react-aria/button';\nimport { useFocusRing } from '@react-aria/focus';\nimport { mergeProps } from '@react-aria/utils';\nimport { type MouseEvent, useRef } from 'react';\n\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\n\n/**\n * @deprecated Use the new Tag component from @frontify/fondue/components instead\n */\nexport enum TagType {\n    Suggested = 'Suggested',\n    Selected = 'Selected',\n    SelectedWithFocus = 'SelectedWithFocus',\n    PreviouslySelected = 'PreviouslySelected',\n}\n\n/**\n * @deprecated Use the new Tag component from @frontify/fondue/components instead\n */\nexport enum TagSize {\n    Small = 'Small',\n    Medium = 'Medium',\n}\n\n/**\n * @deprecated Use the new Tag component from @frontify/fondue/components instead\n */\nconst tagStyles: Record<TagType, string> = {\n    [TagType.Suggested]:\n        'tw-border tw-bg-base tw-text-text-weak tw-border-line hover:tw-text-text hover:tw-border-line-strong',\n    [TagType.Selected]:\n        'tw-bg-box-neutral hover:tw-bg-box-neutral-hover tw-text-text-weak hover:tw-text-box-neutral-inverse-hover',\n    [TagType.SelectedWithFocus]:\n        'tw-bg-box-selected-strong hover:tw-bg-box-selected-strong-hover tw-text-box-selected-strong-inverse',\n    [TagType.PreviouslySelected]:\n        'tw-bg-base tw-border tw-text-box-selected-strong tw-border-box-selected-strong hover:tw-bg-box-neutral hover:tw-text-box-selected-inverse hover:tw-border-box-selected-inverse',\n};\n\n/**\n * @deprecated Use the new Tag component from @frontify/fondue/components instead\n */\nexport type TagProps = { 'data-test-id'?: string } & (TagPropsUnselected | TagPropsSelected);\n\ntype TagPropsSelected = {\n    type: TagType.Selected | TagType.SelectedWithFocus;\n    label: string;\n    onClick?: (event?: MouseEvent<HTMLButtonElement>) => void;\n    size?: TagSize;\n};\n\ntype TagPropsUnselected = {\n    type: TagType.Suggested | TagType.PreviouslySelected;\n    label: string;\n    onClick?: null;\n    size?: TagSize;\n};\n\n/**\n * @deprecated Use the new Tag component from @frontify/fondue/components instead\n */\nexport const Tag = ({ type, label, onClick, size = TagSize.Medium, 'data-test-id': dataTestId = 'tag' }: TagProps) => {\n    const ref = useRef<HTMLButtonElement | null>(null);\n    const { isFocusVisible, focusProps } = useFocusRing();\n    const isClickable = (type === TagType.Selected || type === TagType.SelectedWithFocus) && onClick;\n    const { buttonProps } = useButton(\n        {\n            onPress: () => isClickable && onClick(),\n        },\n        ref,\n    );\n\n    return (\n        <button\n            type=\"button\"\n            data-test-id={dataTestId}\n            className={merge([\n                'tw-inline-flex tw-items-center tw-rounded-full tw-text-xs tw-transition-colors tw-group tw-outline-none tw-break-word',\n                size === TagSize.Small ? 'tw-px-1.5 tw-py-0.5' : 'tw-px-2.5 tw-py-1',\n                tagStyles[type],\n                isClickable ? 'tw-cursor-pointer' : 'tw-cursor-default',\n                isFocusVisible && FOCUS_STYLE,\n            ])}\n            {...mergeProps(buttonProps, focusProps)}\n        >\n            {label}\n            {isClickable && (\n                <span\n                    data-test-id={`${dataTestId}-reject-icon`}\n                    className=\"tw-opacity-80 group-hover:tw-opacity-100 tw-transition-opacity tw-ml-1 tw-leading-[0]\"\n                >\n                    <IconCross size={12} />\n                </span>\n            )}\n        </button>\n    );\n};\nTag.displayName = 'FondueTag';\n"],"names":["TagType","TagSize","tagStyles","Tag","type","label","onClick","size","dataTestId","ref","useRef","isFocusVisible","focusProps","useFocusRing","isClickable","buttonProps","useButton","jsxs","merge","FOCUS_STYLE","mergeProps","jsx","IconCross"],"mappings":";;;;;;;;AAcO,IAAKA,sBAAAA,OACRA,EAAA,YAAY,aACZA,EAAA,WAAW,YACXA,EAAA,oBAAoB,qBACpBA,EAAA,qBAAqB,sBAJbA,IAAAA,KAAA,CAAA,CAAA,GAUAC,sBAAAA,OACRA,EAAA,QAAQ,SACRA,EAAA,SAAS,UAFDA,IAAAA,KAAA,CAAA,CAAA;AAQZ,MAAMC,IAAqC;AAAA,EACtC,WACG;AAAA,EACH,UACG;AAAA,EACH,mBACG;AAAA,EACH,oBACG;AACR,GAwBaC,IAAM,CAAC,EAAE,MAAAC,GAAM,OAAAC,GAAO,SAAAC,GAAS,MAAAC,IAAO,UAAgB,gBAAgBC,IAAa,YAAsB;AAClH,QAAMC,IAAMC,EAAiC,IAAI,GAC3C,EAAE,gBAAAC,GAAgB,YAAAC,EAAA,IAAeC,EAAA,GACjCC,KAAeV,MAAS,cAAoBA,MAAS,wBAA8BE,GACnF,EAAE,aAAAS,MAAgBC;AAAA,IACpB;AAAA,MACI,SAAS,MAAMF,KAAeR,EAAA;AAAA,IAAQ;AAAA,IAE1CG;AAAA,EAAA;AAGJ,SACI,gBAAAQ;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,MAAK;AAAA,MACL,gBAAcT;AAAA,MACd,WAAWU,EAAM;AAAA,QACb;AAAA,QACAX,MAAS,UAAgB,wBAAwB;AAAA,QACjDL,EAAUE,CAAI;AAAA,QACdU,IAAc,sBAAsB;AAAA,QACpCH,KAAkBQ;AAAA,MAAA,CACrB;AAAA,MACA,GAAGC,EAAWL,GAAaH,CAAU;AAAA,MAErC,UAAA;AAAA,QAAAP;AAAA,QACAS,KACG,gBAAAO;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,gBAAc,GAAGb,CAAU;AAAA,YAC3B,WAAU;AAAA,YAEV,UAAA,gBAAAa,EAACC,GAAA,EAAU,MAAM,GAAA,CAAI;AAAA,UAAA;AAAA,QAAA;AAAA,MACzB;AAAA,IAAA;AAAA,EAAA;AAIhB;AACAnB,EAAI,cAAc;"}