@economic/taco 8.1.4-hanger-base-ui-migration.2 → 8.1.4-test-docs.0

package/dist/charts/components/Legend.cjs

@@ -1,12 +1,19 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
-const cn = require("clsx");
 const Button = require("../../components/Button/Button.cjs");
 const Icon = require("../../components/Icon/Icon.cjs");
 const OverflowGroup = require("../../components/OverflowGroup/OverflowGroup.cjs");
+const color = require("../utils/color.cjs");
+function getDarkerThemeColor(color$1) {
+  const colorName = Object.keys(color.colors).find((name) => color.colors[name] === color$1);
+  if (!colorName) {
+    return void 0;
+  }
+  return color.getThemeColor(colorName.replace(/-\d+$/, "-300"));
+}
 function Legend(props) {
-  const { hoverIndex, items, onHover: handleHover, onToggle: handleToggle } = props;
+  const { items, onHover: handleHover, onToggle: handleToggle } = props;
   const handleMouseEnter = (item, index) => {
     if (item.isHidden) {
       return;
@@ -22,18 +29,18 @@ function Legend(props) {
   };
   const moreButton = (moreButtonText) => /* @__PURE__ */ React.createElement(Button.Button, { appearance: "transparent", className: "!h-5 !min-h-[1.25rem] !px-1.5 text-xs text-gray-700" }, moreButtonText);
   return /* @__PURE__ */ React.createElement(OverflowGroup.OverflowGroup, { className: "mt-3 w-full gap-x-1", moreButton }, items.map((item, index) => {
-    const className = cn.clsx("mr-1 flex h-3 w-3 rounded-sm", {
-      border: item.isHidden
-    });
-    let style;
+    const className = "mr-1 flex h-3.5 w-3.5 rounded-sm border";
+    const style = {};
+    const darkerThemeColor = getDarkerThemeColor(item.color);
     if (!item.isHidden) {
-      style = { backgroundColor: item.color };
+      style.backgroundColor = item.color;
+      style.borderColor = darkerThemeColor;
     }
     return /* @__PURE__ */ React.createElement(
       "button",
       {
         key: `${item.label}_${index}`,
-        className: "focus-visible:yt-focus flex items-center rounded px-1 !text-xs hover:bg-gray-200",
+        className: "focus-visible:yt-focus flex items-center rounded px-1 !text-xs hover:bg-gray-100",
         onClick: (event) => {
           event == null ? void 0 : event.preventDefault();
           handleClick(item);
@@ -41,7 +48,7 @@ function Legend(props) {
         onMouseEnter: () => handleMouseEnter(item, index),
         onMouseLeave: () => handleMouseLeave()
       },
-      /* @__PURE__ */ React.createElement("span", { className, style }, hoverIndex === index ? /* @__PURE__ */ React.createElement(Icon.Icon, { name: "tick-bold", className: cn.clsx("!h-full !w-full", { "text-white": !item.isHidden }) }) : null),
+      /* @__PURE__ */ React.createElement("span", { className, style }, !item.isHidden ? /* @__PURE__ */ React.createElement(Icon.Icon, { name: "tick-bold", className: "!h-full !w-full text-white" }) : null),
       item.label
     );
   }));

package/dist/charts/components/Legend.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Legend.cjs","sources":["../../../src/charts/components/Legend.tsx"],"sourcesContent":["import React from 'react';\nimport { clsx } from 'clsx';\nimport { Button } from '../../components/Button/Button';\nimport { Icon } from '../../components/Icon/Icon';\nimport { OverflowGroup } from '../../components/OverflowGroup/OverflowGroup';\nimport { ChartChildProps } from './types';\n\nexport interface LegendProps<TData extends object> {\n    items: ChartChildProps<TData>[];\n    hoverIndex: number | undefined;\n    onHover: (index: number | undefined) => void;\n    onToggle: (name: keyof TData) => void;\n}\n\nexport function Legend<TData extends object>(props: LegendProps<TData>) {\n    const { hoverIndex, items, onHover: handleHover, onToggle: handleToggle } = props;\n\n    const handleMouseEnter = (item: ChartChildProps<TData>, index: number) => {\n        if (item.isHidden) {\n            return;\n        }\n\n        handleHover(index);\n    };\n    const handleMouseLeave = () => handleHover(undefined);\n\n    const handleClick = (item: ChartChildProps<TData>) => {\n        // remove hover if hiding the item\n        if (!item.isHidden) {\n            handleHover(undefined);\n        }\n\n        handleToggle(item.dataKey);\n    };\n\n    const moreButton = (moreButtonText: string) => (\n        <Button appearance=\"transparent\" className=\"!h-5 !min-h-[1.25rem] !px-1.5 text-xs text-gray-700\">\n            {moreButtonText}\n        </Button>\n    );\n\n    return (\n        <OverflowGroup className=\"mt-3 w-full gap-x-1\" moreButton={moreButton}>\n            {items.map((item, index) => {\n                const className = clsx('mr-1 flex h-3 w-3 rounded-sm', {\n                    border: item.isHidden,\n                });\n                let style;\n\n                if (!item.isHidden) {\n                    style = { backgroundColor: item.color };\n                }\n\n                return (\n                    <button\n                        key={`${item.label}_${index}`}\n                        className=\"focus-visible:yt-focus flex items-center rounded px-1 !text-xs hover:bg-gray-200\"\n                        onClick={event => {\n                            event?.preventDefault();\n                            handleClick(item);\n                        }}\n                        onMouseEnter={() => handleMouseEnter(item, index)}\n                        onMouseLeave={() => handleMouseLeave()}>\n                        <span className={className} style={style}>\n                            {hoverIndex === index ? (\n                                <Icon name=\"tick-bold\" className={clsx('!h-full !w-full', { 'text-white': !item.isHidden })} />\n                            ) : null}\n                        </span>\n                        {item.label}\n                    </button>\n                );\n            })}\n        </OverflowGroup>\n    );\n}\n"],"names":["Button","OverflowGroup","clsx","Icon"],"mappings":";;;;;;;AAcO,SAAS,OAA6B,OAA2B;AACpE,QAAM,EAAE,YAAY,OAAO,SAAS,aAAa,UAAU,iBAAiB;AAEtE,QAAA,mBAAmB,CAAC,MAA8B,UAAkB;AACtE,QAAI,KAAK,UAAU;AACf;AAAA,IAAA;AAGJ,gBAAY,KAAK;AAAA,EACrB;AACM,QAAA,mBAAmB,MAAM,YAAY,MAAS;AAE9C,QAAA,cAAc,CAAC,SAAiC;AAE9C,QAAA,CAAC,KAAK,UAAU;AAChB,kBAAY,MAAS;AAAA,IAAA;AAGzB,iBAAa,KAAK,OAAO;AAAA,EAC7B;AAEM,QAAA,aAAa,CAAC,mBAChB,sBAAA,cAACA,OAAAA,UAAO,YAAW,eAAc,WAAU,sDAAA,GACtC,cACL;AAIA,SAAA,sBAAA,cAACC,+BAAc,WAAU,uBAAsB,cAC1C,MAAM,IAAI,CAAC,MAAM,UAAU;AAClB,UAAA,YAAYC,QAAK,gCAAgC;AAAA,MACnD,QAAQ,KAAK;AAAA,IAAA,CAChB;AACG,QAAA;AAEA,QAAA,CAAC,KAAK,UAAU;AACR,cAAA,EAAE,iBAAiB,KAAK,MAAM;AAAA,IAAA;AAItC,WAAA,sBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,KAAK,GAAG,KAAK,KAAK,IAAI,KAAK;AAAA,QAC3B,WAAU;AAAA,QACV,SAAS,CAAS,UAAA;AACd,yCAAO;AACP,sBAAY,IAAI;AAAA,QACpB;AAAA,QACA,cAAc,MAAM,iBAAiB,MAAM,KAAK;AAAA,QAChD,cAAc,MAAM,iBAAiB;AAAA,MAAA;AAAA,MACrC,sBAAA,cAAC,UAAK,WAAsB,SACvB,eAAe,QACZ,sBAAA,cAACC,KAAAA,QAAK,MAAK,aAAY,WAAWD,QAAK,mBAAmB,EAAE,cAAc,CAAC,KAAK,SAAS,CAAC,EAAG,CAAA,IAC7F,IACR;AAAA,MACC,KAAK;AAAA,IACV;AAAA,EAAA,CAEP,CACL;AAER;;"}
+{"version":3,"file":"Legend.cjs","sources":["../../../src/charts/components/Legend.tsx"],"sourcesContent":["import React from 'react';\nimport { Button } from '../../components/Button/Button';\nimport { Icon } from '../../components/Icon/Icon';\nimport { OverflowGroup } from '../../components/OverflowGroup/OverflowGroup';\nimport { ChartChildProps } from './types';\nimport { colors, getThemeColor } from '../utils/color';\n\nexport interface LegendProps<TData extends object> {\n    items: ChartChildProps<TData>[];\n    hoverIndex: number | undefined;\n    onHover: (index: number | undefined) => void;\n    onToggle: (name: keyof TData) => void;\n}\n\nfunction getDarkerThemeColor(color: string | undefined) {\n    const colorName = Object.keys(colors).find(name => colors[name] === color);\n\n    if (!colorName) {\n        return undefined;\n    }\n\n    return getThemeColor(colorName.replace(/-\\d+$/, '-300'));\n}\n\nexport function Legend<TData extends object>(props: LegendProps<TData>) {\n    const { items, onHover: handleHover, onToggle: handleToggle } = props;\n\n    const handleMouseEnter = (item: ChartChildProps<TData>, index: number) => {\n        if (item.isHidden) {\n            return;\n        }\n\n        handleHover(index);\n    };\n    const handleMouseLeave = () => handleHover(undefined);\n\n    const handleClick = (item: ChartChildProps<TData>) => {\n        // remove hover if hiding the item\n        if (!item.isHidden) {\n            handleHover(undefined);\n        }\n\n        handleToggle(item.dataKey);\n    };\n\n    const moreButton = (moreButtonText: string) => (\n        <Button appearance=\"transparent\" className=\"!h-5 !min-h-[1.25rem] !px-1.5 text-xs text-gray-700\">\n            {moreButtonText}\n        </Button>\n    );\n\n    return (\n        <OverflowGroup className=\"mt-3 w-full gap-x-1\" moreButton={moreButton}>\n            {items.map((item, index) => {\n                const className = 'mr-1 flex h-3.5 w-3.5 rounded-sm border';\n                const style: React.CSSProperties = {};\n                const darkerThemeColor = getDarkerThemeColor(item.color);\n\n                if (!item.isHidden) {\n                    style.backgroundColor = item.color;\n                    style.borderColor = darkerThemeColor;\n                }\n\n                return (\n                    <button\n                        key={`${item.label}_${index}`}\n                        className=\"focus-visible:yt-focus flex items-center rounded px-1 !text-xs hover:bg-gray-100\"\n                        onClick={event => {\n                            event?.preventDefault();\n                            handleClick(item);\n                        }}\n                        onMouseEnter={() => handleMouseEnter(item, index)}\n                        onMouseLeave={() => handleMouseLeave()}>\n                        <span className={className} style={style}>\n                            {!item.isHidden ? <Icon name=\"tick-bold\" className=\"!h-full !w-full text-white\" /> : null}\n                        </span>\n                        {item.label}\n                    </button>\n                );\n            })}\n        </OverflowGroup>\n    );\n}\n"],"names":["color","colors","getThemeColor","Button","OverflowGroup","Icon"],"mappings":";;;;;;;AAcA,SAAS,oBAAoBA,SAA2B;AAC9C,QAAA,YAAY,OAAO,KAAKC,YAAM,EAAE,KAAK,CAAQ,SAAAA,MAAAA,OAAO,IAAI,MAAMD,OAAK;AAEzE,MAAI,CAAC,WAAW;AACL,WAAA;AAAA,EAAA;AAGX,SAAOE,MAAc,cAAA,UAAU,QAAQ,SAAS,MAAM,CAAC;AAC3D;AAEO,SAAS,OAA6B,OAA2B;AACpE,QAAM,EAAE,OAAO,SAAS,aAAa,UAAU,iBAAiB;AAE1D,QAAA,mBAAmB,CAAC,MAA8B,UAAkB;AACtE,QAAI,KAAK,UAAU;AACf;AAAA,IAAA;AAGJ,gBAAY,KAAK;AAAA,EACrB;AACM,QAAA,mBAAmB,MAAM,YAAY,MAAS;AAE9C,QAAA,cAAc,CAAC,SAAiC;AAE9C,QAAA,CAAC,KAAK,UAAU;AAChB,kBAAY,MAAS;AAAA,IAAA;AAGzB,iBAAa,KAAK,OAAO;AAAA,EAC7B;AAEM,QAAA,aAAa,CAAC,mBAChB,sBAAA,cAACC,OAAAA,UAAO,YAAW,eAAc,WAAU,sDAAA,GACtC,cACL;AAIA,SAAA,sBAAA,cAACC,+BAAc,WAAU,uBAAsB,cAC1C,MAAM,IAAI,CAAC,MAAM,UAAU;AACxB,UAAM,YAAY;AAClB,UAAM,QAA6B,CAAC;AAC9B,UAAA,mBAAmB,oBAAoB,KAAK,KAAK;AAEnD,QAAA,CAAC,KAAK,UAAU;AAChB,YAAM,kBAAkB,KAAK;AAC7B,YAAM,cAAc;AAAA,IAAA;AAIpB,WAAA,sBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,KAAK,GAAG,KAAK,KAAK,IAAI,KAAK;AAAA,QAC3B,WAAU;AAAA,QACV,SAAS,CAAS,UAAA;AACd,yCAAO;AACP,sBAAY,IAAI;AAAA,QACpB;AAAA,QACA,cAAc,MAAM,iBAAiB,MAAM,KAAK;AAAA,QAChD,cAAc,MAAM,iBAAiB;AAAA,MAAA;AAAA,MACpC,sBAAA,cAAA,QAAA,EAAK,WAAsB,MAAA,GACvB,CAAC,KAAK,WAAY,sBAAA,cAAAC,KAAAA,MAAA,EAAK,MAAK,aAAY,WAAU,6BAAA,CAA6B,IAAK,IACzF;AAAA,MACC,KAAK;AAAA,IACV;AAAA,EAAA,CAEP,CACL;AAER;;"}

package/dist/charts/components/Legend.js

@@ -1,10 +1,17 @@
 import React__default from "react";
-import { clsx } from "clsx";
 import { Button } from "../../components/Button/Button.js";
 import { Icon } from "../../components/Icon/Icon.js";
 import { OverflowGroup } from "../../components/OverflowGroup/OverflowGroup.js";
+import { colors, getThemeColor } from "../utils/color.js";
+function getDarkerThemeColor(color) {
+  const colorName = Object.keys(colors).find((name) => colors[name] === color);
+  if (!colorName) {
+    return void 0;
+  }
+  return getThemeColor(colorName.replace(/-\d+$/, "-300"));
+}
 function Legend(props) {
-  const { hoverIndex, items, onHover: handleHover, onToggle: handleToggle } = props;
+  const { items, onHover: handleHover, onToggle: handleToggle } = props;
   const handleMouseEnter = (item, index) => {
     if (item.isHidden) {
       return;
@@ -20,18 +27,18 @@ function Legend(props) {
   };
   const moreButton = (moreButtonText) => /* @__PURE__ */ React__default.createElement(Button, { appearance: "transparent", className: "!h-5 !min-h-[1.25rem] !px-1.5 text-xs text-gray-700" }, moreButtonText);
   return /* @__PURE__ */ React__default.createElement(OverflowGroup, { className: "mt-3 w-full gap-x-1", moreButton }, items.map((item, index) => {
-    const className = clsx("mr-1 flex h-3 w-3 rounded-sm", {
-      border: item.isHidden
-    });
-    let style;
+    const className = "mr-1 flex h-3.5 w-3.5 rounded-sm border";
+    const style = {};
+    const darkerThemeColor = getDarkerThemeColor(item.color);
     if (!item.isHidden) {
-      style = { backgroundColor: item.color };
+      style.backgroundColor = item.color;
+      style.borderColor = darkerThemeColor;
     }
     return /* @__PURE__ */ React__default.createElement(
       "button",
       {
         key: `${item.label}_${index}`,
-        className: "focus-visible:yt-focus flex items-center rounded px-1 !text-xs hover:bg-gray-200",
+        className: "focus-visible:yt-focus flex items-center rounded px-1 !text-xs hover:bg-gray-100",
         onClick: (event) => {
           event == null ? void 0 : event.preventDefault();
           handleClick(item);
@@ -39,7 +46,7 @@ function Legend(props) {
         onMouseEnter: () => handleMouseEnter(item, index),
         onMouseLeave: () => handleMouseLeave()
       },
-      /* @__PURE__ */ React__default.createElement("span", { className, style }, hoverIndex === index ? /* @__PURE__ */ React__default.createElement(Icon, { name: "tick-bold", className: clsx("!h-full !w-full", { "text-white": !item.isHidden }) }) : null),
+      /* @__PURE__ */ React__default.createElement("span", { className, style }, !item.isHidden ? /* @__PURE__ */ React__default.createElement(Icon, { name: "tick-bold", className: "!h-full !w-full text-white" }) : null),
       item.label
     );
   }));

package/dist/charts/components/Legend.js.map

@@ -1 +1 @@
-{"version":3,"file":"Legend.js","sources":["../../../src/charts/components/Legend.tsx"],"sourcesContent":["import React from 'react';\nimport { clsx } from 'clsx';\nimport { Button } from '../../components/Button/Button';\nimport { Icon } from '../../components/Icon/Icon';\nimport { OverflowGroup } from '../../components/OverflowGroup/OverflowGroup';\nimport { ChartChildProps } from './types';\n\nexport interface LegendProps<TData extends object> {\n    items: ChartChildProps<TData>[];\n    hoverIndex: number | undefined;\n    onHover: (index: number | undefined) => void;\n    onToggle: (name: keyof TData) => void;\n}\n\nexport function Legend<TData extends object>(props: LegendProps<TData>) {\n    const { hoverIndex, items, onHover: handleHover, onToggle: handleToggle } = props;\n\n    const handleMouseEnter = (item: ChartChildProps<TData>, index: number) => {\n        if (item.isHidden) {\n            return;\n        }\n\n        handleHover(index);\n    };\n    const handleMouseLeave = () => handleHover(undefined);\n\n    const handleClick = (item: ChartChildProps<TData>) => {\n        // remove hover if hiding the item\n        if (!item.isHidden) {\n            handleHover(undefined);\n        }\n\n        handleToggle(item.dataKey);\n    };\n\n    const moreButton = (moreButtonText: string) => (\n        <Button appearance=\"transparent\" className=\"!h-5 !min-h-[1.25rem] !px-1.5 text-xs text-gray-700\">\n            {moreButtonText}\n        </Button>\n    );\n\n    return (\n        <OverflowGroup className=\"mt-3 w-full gap-x-1\" moreButton={moreButton}>\n            {items.map((item, index) => {\n                const className = clsx('mr-1 flex h-3 w-3 rounded-sm', {\n                    border: item.isHidden,\n                });\n                let style;\n\n                if (!item.isHidden) {\n                    style = { backgroundColor: item.color };\n                }\n\n                return (\n                    <button\n                        key={`${item.label}_${index}`}\n                        className=\"focus-visible:yt-focus flex items-center rounded px-1 !text-xs hover:bg-gray-200\"\n                        onClick={event => {\n                            event?.preventDefault();\n                            handleClick(item);\n                        }}\n                        onMouseEnter={() => handleMouseEnter(item, index)}\n                        onMouseLeave={() => handleMouseLeave()}>\n                        <span className={className} style={style}>\n                            {hoverIndex === index ? (\n                                <Icon name=\"tick-bold\" className={clsx('!h-full !w-full', { 'text-white': !item.isHidden })} />\n                            ) : null}\n                        </span>\n                        {item.label}\n                    </button>\n                );\n            })}\n        </OverflowGroup>\n    );\n}\n"],"names":["React"],"mappings":";;;;;AAcO,SAAS,OAA6B,OAA2B;AACpE,QAAM,EAAE,YAAY,OAAO,SAAS,aAAa,UAAU,iBAAiB;AAEtE,QAAA,mBAAmB,CAAC,MAA8B,UAAkB;AACtE,QAAI,KAAK,UAAU;AACf;AAAA,IAAA;AAGJ,gBAAY,KAAK;AAAA,EACrB;AACM,QAAA,mBAAmB,MAAM,YAAY,MAAS;AAE9C,QAAA,cAAc,CAAC,SAAiC;AAE9C,QAAA,CAAC,KAAK,UAAU;AAChB,kBAAY,MAAS;AAAA,IAAA;AAGzB,iBAAa,KAAK,OAAO;AAAA,EAC7B;AAEM,QAAA,aAAa,CAAC,mBAChBA,+BAAA,cAAC,UAAO,YAAW,eAAc,WAAU,sDAAA,GACtC,cACL;AAIA,SAAAA,+BAAA,cAAC,iBAAc,WAAU,uBAAsB,cAC1C,MAAM,IAAI,CAAC,MAAM,UAAU;AAClB,UAAA,YAAY,KAAK,gCAAgC;AAAA,MACnD,QAAQ,KAAK;AAAA,IAAA,CAChB;AACG,QAAA;AAEA,QAAA,CAAC,KAAK,UAAU;AACR,cAAA,EAAE,iBAAiB,KAAK,MAAM;AAAA,IAAA;AAItC,WAAAA,+BAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,KAAK,GAAG,KAAK,KAAK,IAAI,KAAK;AAAA,QAC3B,WAAU;AAAA,QACV,SAAS,CAAS,UAAA;AACd,yCAAO;AACP,sBAAY,IAAI;AAAA,QACpB;AAAA,QACA,cAAc,MAAM,iBAAiB,MAAM,KAAK;AAAA,QAChD,cAAc,MAAM,iBAAiB;AAAA,MAAA;AAAA,MACrCA,+BAAA,cAAC,UAAK,WAAsB,SACvB,eAAe,QACZA,+BAAA,cAAC,QAAK,MAAK,aAAY,WAAW,KAAK,mBAAmB,EAAE,cAAc,CAAC,KAAK,SAAS,CAAC,EAAG,CAAA,IAC7F,IACR;AAAA,MACC,KAAK;AAAA,IACV;AAAA,EAAA,CAEP,CACL;AAER;"}
+{"version":3,"file":"Legend.js","sources":["../../../src/charts/components/Legend.tsx"],"sourcesContent":["import React from 'react';\nimport { Button } from '../../components/Button/Button';\nimport { Icon } from '../../components/Icon/Icon';\nimport { OverflowGroup } from '../../components/OverflowGroup/OverflowGroup';\nimport { ChartChildProps } from './types';\nimport { colors, getThemeColor } from '../utils/color';\n\nexport interface LegendProps<TData extends object> {\n    items: ChartChildProps<TData>[];\n    hoverIndex: number | undefined;\n    onHover: (index: number | undefined) => void;\n    onToggle: (name: keyof TData) => void;\n}\n\nfunction getDarkerThemeColor(color: string | undefined) {\n    const colorName = Object.keys(colors).find(name => colors[name] === color);\n\n    if (!colorName) {\n        return undefined;\n    }\n\n    return getThemeColor(colorName.replace(/-\\d+$/, '-300'));\n}\n\nexport function Legend<TData extends object>(props: LegendProps<TData>) {\n    const { items, onHover: handleHover, onToggle: handleToggle } = props;\n\n    const handleMouseEnter = (item: ChartChildProps<TData>, index: number) => {\n        if (item.isHidden) {\n            return;\n        }\n\n        handleHover(index);\n    };\n    const handleMouseLeave = () => handleHover(undefined);\n\n    const handleClick = (item: ChartChildProps<TData>) => {\n        // remove hover if hiding the item\n        if (!item.isHidden) {\n            handleHover(undefined);\n        }\n\n        handleToggle(item.dataKey);\n    };\n\n    const moreButton = (moreButtonText: string) => (\n        <Button appearance=\"transparent\" className=\"!h-5 !min-h-[1.25rem] !px-1.5 text-xs text-gray-700\">\n            {moreButtonText}\n        </Button>\n    );\n\n    return (\n        <OverflowGroup className=\"mt-3 w-full gap-x-1\" moreButton={moreButton}>\n            {items.map((item, index) => {\n                const className = 'mr-1 flex h-3.5 w-3.5 rounded-sm border';\n                const style: React.CSSProperties = {};\n                const darkerThemeColor = getDarkerThemeColor(item.color);\n\n                if (!item.isHidden) {\n                    style.backgroundColor = item.color;\n                    style.borderColor = darkerThemeColor;\n                }\n\n                return (\n                    <button\n                        key={`${item.label}_${index}`}\n                        className=\"focus-visible:yt-focus flex items-center rounded px-1 !text-xs hover:bg-gray-100\"\n                        onClick={event => {\n                            event?.preventDefault();\n                            handleClick(item);\n                        }}\n                        onMouseEnter={() => handleMouseEnter(item, index)}\n                        onMouseLeave={() => handleMouseLeave()}>\n                        <span className={className} style={style}>\n                            {!item.isHidden ? <Icon name=\"tick-bold\" className=\"!h-full !w-full text-white\" /> : null}\n                        </span>\n                        {item.label}\n                    </button>\n                );\n            })}\n        </OverflowGroup>\n    );\n}\n"],"names":["React"],"mappings":";;;;;AAcA,SAAS,oBAAoB,OAA2B;AAC9C,QAAA,YAAY,OAAO,KAAK,MAAM,EAAE,KAAK,CAAQ,SAAA,OAAO,IAAI,MAAM,KAAK;AAEzE,MAAI,CAAC,WAAW;AACL,WAAA;AAAA,EAAA;AAGX,SAAO,cAAc,UAAU,QAAQ,SAAS,MAAM,CAAC;AAC3D;AAEO,SAAS,OAA6B,OAA2B;AACpE,QAAM,EAAE,OAAO,SAAS,aAAa,UAAU,iBAAiB;AAE1D,QAAA,mBAAmB,CAAC,MAA8B,UAAkB;AACtE,QAAI,KAAK,UAAU;AACf;AAAA,IAAA;AAGJ,gBAAY,KAAK;AAAA,EACrB;AACM,QAAA,mBAAmB,MAAM,YAAY,MAAS;AAE9C,QAAA,cAAc,CAAC,SAAiC;AAE9C,QAAA,CAAC,KAAK,UAAU;AAChB,kBAAY,MAAS;AAAA,IAAA;AAGzB,iBAAa,KAAK,OAAO;AAAA,EAC7B;AAEM,QAAA,aAAa,CAAC,mBAChBA,+BAAA,cAAC,UAAO,YAAW,eAAc,WAAU,sDAAA,GACtC,cACL;AAIA,SAAAA,+BAAA,cAAC,iBAAc,WAAU,uBAAsB,cAC1C,MAAM,IAAI,CAAC,MAAM,UAAU;AACxB,UAAM,YAAY;AAClB,UAAM,QAA6B,CAAC;AAC9B,UAAA,mBAAmB,oBAAoB,KAAK,KAAK;AAEnD,QAAA,CAAC,KAAK,UAAU;AAChB,YAAM,kBAAkB,KAAK;AAC7B,YAAM,cAAc;AAAA,IAAA;AAIpB,WAAAA,+BAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,KAAK,GAAG,KAAK,KAAK,IAAI,KAAK;AAAA,QAC3B,WAAU;AAAA,QACV,SAAS,CAAS,UAAA;AACd,yCAAO;AACP,sBAAY,IAAI;AAAA,QACpB;AAAA,QACA,cAAc,MAAM,iBAAiB,MAAM,KAAK;AAAA,QAChD,cAAc,MAAM,iBAAiB;AAAA,MAAA;AAAA,MACpCA,+BAAA,cAAA,QAAA,EAAK,WAAsB,MAAA,GACvB,CAAC,KAAK,WAAYA,+BAAA,cAAA,MAAA,EAAK,MAAK,aAAY,WAAU,6BAAA,CAA6B,IAAK,IACzF;AAAA,MACC,KAAK;AAAA,IACV;AAAA,EAAA,CAEP,CACL;AAER;"}

package/dist/components/Hanger/Arrow.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
-const popover = require("@base-ui/react/popover");
+const PopoverPrimitive = require("@radix-ui/react-popover");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -19,8 +19,9 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const PopoverPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(PopoverPrimitive);
 const UnstyledArrow = React__namespace.forwardRef(function PopoverArrow(props, ref) {
-  return /* @__PURE__ */ React__namespace.createElement(popover.Popover.Arrow, { className: "pointer-events-none h-[11px] w-[30px] data-[side=bottom]:top-[-10px] data-[side=left]:right-[-20px] data-[side=right]:left-[-20px] data-[side=top]:bottom-[-10px] data-[side=left]:rotate-90 data-[side=right]:-rotate-90 data-[side=top]:rotate-180" }, /* @__PURE__ */ React__namespace.createElement("svg", { ...props, ref, viewBox: "0 19 30 11" }, /* @__PURE__ */ React__namespace.createElement(
+  return /* @__PURE__ */ React__namespace.createElement(PopoverPrimitive__namespace.Arrow, { className: "pointer-events-none -mt-px", asChild: true, offset: 2, width: 30, height: 11 }, /* @__PURE__ */ React__namespace.createElement("svg", { ...props, ref, viewBox: "0 19 30 11", style: { transform: "rotateZ(180deg)" } }, /* @__PURE__ */ React__namespace.createElement(
     "path",
     {
       className: "fill-current text-blue-500",

package/dist/components/Hanger/Arrow.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Arrow.cjs","sources":["../../../src/components/Hanger/Arrow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover';\n\nexport const UnstyledArrow = React.forwardRef<SVGSVGElement, React.SVGAttributes<SVGElement>>(function PopoverArrow(props, ref) {\n    return (\n        <PopoverPrimitive.Arrow className=\"pointer-events-none h-[11px] w-[30px] data-[side=bottom]:top-[-10px] data-[side=left]:right-[-20px] data-[side=right]:left-[-20px] data-[side=top]:bottom-[-10px] data-[side=left]:rotate-90 data-[side=right]:-rotate-90 data-[side=top]:rotate-180\">\n            <svg {...props} ref={ref} viewBox=\"0 19 30 11\">\n                <path\n                    className=\"fill-current text-blue-500\"\n                    d=\"M23.7,27.1L17,19.9C16.5,19.3,15.8,19,15,19s-1.6,0.3-2.1,0.9l-6.6,7.2C5.3,28.1,3.4,29,2,29h26 C26.7,29,24.6,28.1,23.7,27.1z\"></path>\n                <path\n                    className=\"fill-current\"\n                    d=\"M23,27.8c1.1,1.2,3.4,2.2,5,2.2h2H0h2c1.7,0,3.9-1,5-2.2l6.6-7.2c0.7-0.8,2-0.8,2.7,0L23,27.8L23,27.8z\"></path>\n            </svg>\n        </PopoverPrimitive.Arrow>\n    );\n});\n"],"names":["React","PopoverPrimitive"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAGO,MAAM,gBAAgBA,iBAAM,WAA2D,SAAS,aAAa,OAAO,KAAK;AAC5H,SACKA,iCAAA,cAAAC,QAAA,QAAiB,OAAjB,EAAuB,WAAU,uPAAA,GAC7BD,iCAAA,cAAA,OAAA,EAAK,GAAG,OAAO,KAAU,SAAQ,aAC9B,GAAAA,iCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAU;AAAA,MACV,GAAE;AAAA,IAAA;AAAA,EACN,GAAAA,iCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAU;AAAA,MACV,GAAE;AAAA,IAAA;AAAA,EAAA,CACV,CACJ;AAER,CAAC;;"}
+{"version":3,"file":"Arrow.cjs","sources":["../../../src/components/Hanger/Arrow.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\n\nexport const UnstyledArrow = React.forwardRef<SVGSVGElement, React.SVGAttributes<SVGElement>>(function PopoverArrow(props, ref) {\n    return (\n        <PopoverPrimitive.Arrow className=\"pointer-events-none -mt-px\" asChild offset={2} width={30} height={11}>\n            <svg {...props} ref={ref} viewBox=\"0 19 30 11\" style={{ transform: 'rotateZ(180deg)' }}>\n                <path\n                    className=\"fill-current text-blue-500\"\n                    d=\"M23.7,27.1L17,19.9C16.5,19.3,15.8,19,15,19s-1.6,0.3-2.1,0.9l-6.6,7.2C5.3,28.1,3.4,29,2,29h26 C26.7,29,24.6,28.1,23.7,27.1z\"></path>\n                <path\n                    className=\"fill-current\"\n                    d=\"M23,27.8c1.1,1.2,3.4,2.2,5,2.2h2H0h2c1.7,0,3.9-1,5-2.2l6.6-7.2c0.7-0.8,2-0.8,2.7,0L23,27.8L23,27.8z\"></path>\n            </svg>\n        </PopoverPrimitive.Arrow>\n    );\n});\n"],"names":["React","PopoverPrimitive"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAGO,MAAM,gBAAgBA,iBAAM,WAA2D,SAAS,aAAa,OAAO,KAAK;AAExH,SAAAA,iCAAA,cAACC,4BAAiB,OAAjB,EAAuB,WAAU,8BAA6B,SAAO,MAAC,QAAQ,GAAG,OAAO,IAAI,QAAQ,MACjGD,iCAAA,cAAC,OAAK,EAAA,GAAG,OAAO,KAAU,SAAQ,cAAa,OAAO,EAAE,WAAW,kBAAA,EAC/D,GAAAA,iCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAU;AAAA,MACV,GAAE;AAAA,IAAA;AAAA,EACN,GAAAA,iCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAU;AAAA,MACV,GAAE;AAAA,IAAA;AAAA,EAAA,CACV,CACJ;AAER,CAAC;;"}

package/dist/components/Hanger/Arrow.js

@@ -1,7 +1,7 @@
 import * as React from "react";
-import { Popover } from "@base-ui/react/popover";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
 const UnstyledArrow = React.forwardRef(function PopoverArrow(props, ref) {
-  return /* @__PURE__ */ React.createElement(Popover.Arrow, { className: "pointer-events-none h-[11px] w-[30px] data-[side=bottom]:top-[-10px] data-[side=left]:right-[-20px] data-[side=right]:left-[-20px] data-[side=top]:bottom-[-10px] data-[side=left]:rotate-90 data-[side=right]:-rotate-90 data-[side=top]:rotate-180" }, /* @__PURE__ */ React.createElement("svg", { ...props, ref, viewBox: "0 19 30 11" }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(PopoverPrimitive.Arrow, { className: "pointer-events-none -mt-px", asChild: true, offset: 2, width: 30, height: 11 }, /* @__PURE__ */ React.createElement("svg", { ...props, ref, viewBox: "0 19 30 11", style: { transform: "rotateZ(180deg)" } }, /* @__PURE__ */ React.createElement(
     "path",
     {
       className: "fill-current text-blue-500",

package/dist/components/Hanger/Arrow.js.map

@@ -1 +1 @@
-{"version":3,"file":"Arrow.js","sources":["../../../src/components/Hanger/Arrow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover';\n\nexport const UnstyledArrow = React.forwardRef<SVGSVGElement, React.SVGAttributes<SVGElement>>(function PopoverArrow(props, ref) {\n    return (\n        <PopoverPrimitive.Arrow className=\"pointer-events-none h-[11px] w-[30px] data-[side=bottom]:top-[-10px] data-[side=left]:right-[-20px] data-[side=right]:left-[-20px] data-[side=top]:bottom-[-10px] data-[side=left]:rotate-90 data-[side=right]:-rotate-90 data-[side=top]:rotate-180\">\n            <svg {...props} ref={ref} viewBox=\"0 19 30 11\">\n                <path\n                    className=\"fill-current text-blue-500\"\n                    d=\"M23.7,27.1L17,19.9C16.5,19.3,15.8,19,15,19s-1.6,0.3-2.1,0.9l-6.6,7.2C5.3,28.1,3.4,29,2,29h26 C26.7,29,24.6,28.1,23.7,27.1z\"></path>\n                <path\n                    className=\"fill-current\"\n                    d=\"M23,27.8c1.1,1.2,3.4,2.2,5,2.2h2H0h2c1.7,0,3.9-1,5-2.2l6.6-7.2c0.7-0.8,2-0.8,2.7,0L23,27.8L23,27.8z\"></path>\n            </svg>\n        </PopoverPrimitive.Arrow>\n    );\n});\n"],"names":["PopoverPrimitive"],"mappings":";;AAGO,MAAM,gBAAgB,MAAM,WAA2D,SAAS,aAAa,OAAO,KAAK;AAC5H,SACK,sBAAA,cAAAA,QAAiB,OAAjB,EAAuB,WAAU,uPAAA,GAC7B,sBAAA,cAAA,OAAA,EAAK,GAAG,OAAO,KAAU,SAAQ,aAC9B,GAAA,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAU;AAAA,MACV,GAAE;AAAA,IAAA;AAAA,EACN,GAAA,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAU;AAAA,MACV,GAAE;AAAA,IAAA;AAAA,EAAA,CACV,CACJ;AAER,CAAC;"}
+{"version":3,"file":"Arrow.js","sources":["../../../src/components/Hanger/Arrow.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\n\nexport const UnstyledArrow = React.forwardRef<SVGSVGElement, React.SVGAttributes<SVGElement>>(function PopoverArrow(props, ref) {\n    return (\n        <PopoverPrimitive.Arrow className=\"pointer-events-none -mt-px\" asChild offset={2} width={30} height={11}>\n            <svg {...props} ref={ref} viewBox=\"0 19 30 11\" style={{ transform: 'rotateZ(180deg)' }}>\n                <path\n                    className=\"fill-current text-blue-500\"\n                    d=\"M23.7,27.1L17,19.9C16.5,19.3,15.8,19,15,19s-1.6,0.3-2.1,0.9l-6.6,7.2C5.3,28.1,3.4,29,2,29h26 C26.7,29,24.6,28.1,23.7,27.1z\"></path>\n                <path\n                    className=\"fill-current\"\n                    d=\"M23,27.8c1.1,1.2,3.4,2.2,5,2.2h2H0h2c1.7,0,3.9-1,5-2.2l6.6-7.2c0.7-0.8,2-0.8,2.7,0L23,27.8L23,27.8z\"></path>\n            </svg>\n        </PopoverPrimitive.Arrow>\n    );\n});\n"],"names":[],"mappings":";;AAGO,MAAM,gBAAgB,MAAM,WAA2D,SAAS,aAAa,OAAO,KAAK;AAExH,SAAA,sBAAA,cAAC,iBAAiB,OAAjB,EAAuB,WAAU,8BAA6B,SAAO,MAAC,QAAQ,GAAG,OAAO,IAAI,QAAQ,MACjG,sBAAA,cAAC,OAAK,EAAA,GAAG,OAAO,KAAU,SAAQ,cAAa,OAAO,EAAE,WAAW,kBAAA,EAC/D,GAAA,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAU;AAAA,MACV,GAAE;AAAA,IAAA;AAAA,EACN,GAAA,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAU;AAAA,MACV,GAAE;AAAA,IAAA;AAAA,EAAA,CACV,CACJ;AAER,CAAC;"}

package/dist/components/Hanger/Hanger.cjs

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 const cn = require("clsx");
-const popover = require("@base-ui/react/popover");
+const PopoverPrimitive = require("@radix-ui/react-popover");
 const IconButton = require("../IconButton/IconButton.cjs");
 const Arrow = require("./Arrow.cjs");
 const Localization = require("../Provider/Localization.cjs");
@@ -25,75 +25,75 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const PopoverPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(PopoverPrimitive);
 const HangerContext = React__namespace.createContext({
-  anchorRef: { current: null },
-  onClose: void 0
+  onClose: void 0,
+  props: {},
+  ref: null
 });
-const Anchor = React__namespace.forwardRef(function HangerAnchor(props, ref) {
-  if (!React__namespace.isValidElement(props.children)) {
-    return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, props.children);
+const Anchor = React__namespace.forwardRef(function HangerAnchor(props, externalRef) {
+  var _a;
+  const { ref: parentRef, props: parentProps } = React__namespace.useContext(HangerContext);
+  const refCallback = mergeRefs.mergeRefs([parentRef, externalRef]);
+  let children = props.children;
+  if (React__namespace.isValidElement(props.children) && typeof ((_a = props.children) == null ? void 0 : _a.type) === "function") {
+    console.warn(
+      `Hanger.Anchor requires its child to forwardRef so that it can attach to the dom element. Did you mean to wrap '${props.children.type.name}' in React.forwardRef()? Taco has wrapped '${props.children.type.name}' in a 'span' to maintain functionality, but this may cause unintended behaviour`
+    );
+    children = /* @__PURE__ */ React__namespace.createElement("span", null, props.children);
   }
-  const child = props.children;
-  return React__namespace.cloneElement(child, {
-    ref: child.ref ? mergeRefs.mergeRefs([ref, child.ref]) : ref
-  });
+  return /* @__PURE__ */ React__namespace.createElement(PopoverPrimitive__namespace.Anchor, { ...parentProps, ...props, ref: refCallback, asChild: true }, children);
 });
 const Title = React__namespace.forwardRef(function DialogTitle(props, ref) {
   const className = cn("mb-1 text-base font-bold flex w-full", props.className);
   return /* @__PURE__ */ React__namespace.createElement("span", { ...props, className, ref });
 });
 const Content = React__namespace.forwardRef(function HangerContent(props, ref) {
-  const { placement: side, hideWhenDetached = false, container, ...popoverContentProps } = props;
+  const { placement: side, hideWhenDetached = false, container } = props;
   const context = React__namespace.useContext(HangerContext);
   const { texts } = Localization.useLocalization();
   const className = cn(
     "wcag-blue-500 border border-transparent rounded p-3 pr-12 yt-shadow focus:border-transparent max-w-sm print:hidden",
     props.className
   );
-  return /* @__PURE__ */ React__namespace.createElement(popover.Popover.Portal, { container }, /* @__PURE__ */ React__namespace.createElement(
-    popover.Popover.Positioner,
+  const handleInteractOutside = (event) => {
+    event.preventDefault();
+  };
+  return /* @__PURE__ */ React__namespace.createElement(PopoverPrimitive__namespace.Portal, { container }, /* @__PURE__ */ React__namespace.createElement(
+    PopoverPrimitive__namespace.Content,
     {
-      anchor: context.anchorRef,
-      className: hideWhenDetached ? "data-[anchor-hidden]:hidden" : void 0,
+      className,
+      "data-taco": "hanger",
+      onInteractOutside: handleInteractOutside,
       side,
-      sideOffset: 11
+      sideOffset: 1,
+      ref,
+      hideWhenDetached
     },
-    /* @__PURE__ */ React__namespace.createElement(popover.Popover.Popup, { ...popoverContentProps, className, "data-taco": "hanger", ref }, props.children, /* @__PURE__ */ React__namespace.createElement(Arrow.UnstyledArrow, { className: "text-blue-500" }), /* @__PURE__ */ React__namespace.createElement(
-      popover.Popover.Close,
+    props.children,
+    /* @__PURE__ */ React__namespace.createElement(Arrow.UnstyledArrow, { className: "text-blue-500" }),
+    /* @__PURE__ */ React__namespace.createElement(PopoverPrimitive__namespace.Close, { asChild: true }, /* @__PURE__ */ React__namespace.createElement(
+      IconButton.IconButton,
       {
-        render: /* @__PURE__ */ React__namespace.createElement(
-          IconButton.IconButton,
-          {
-            appearance: "primary",
-            "aria-label": texts.hanger.close,
-            className: "absolute right-0 top-0 mx-2 mt-2 text-white",
-            icon: "close",
-            onClick: context.onClose
-          }
-        )
+        appearance: "primary",
+        "aria-label": texts.hanger.close,
+        className: "absolute right-0 top-0 ml-2 mr-2 mt-2 text-white",
+        icon: "close",
+        onClick: context.onClose
       }
     ))
   ));
 });
 const Hanger = React__namespace.forwardRef(function Hanger2(props, ref) {
   const { anchor, children, defaultOpen = true, onClose, ...otherProps } = props;
-  const anchorRef = React__namespace.useRef(null);
-  const combinedRef = mergeRefs.mergeRefs([anchorRef, ref]);
-  const context = React__namespace.useMemo(() => ({ anchorRef, onClose }), [onClose]);
+  const context = React__namespace.useMemo(() => ({ onClose, props: otherProps, ref }), [onClose, otherProps]);
   const [open, setOpen] = React__namespace.useState(false);
   React__namespace.useEffect(() => {
     if (defaultOpen) {
       setOpen(defaultOpen);
     }
   }, []);
-  const handleOpenChange = (nextOpen, eventDetails) => {
-    if (!nextOpen && (eventDetails.reason === "outside-press" || eventDetails.reason === "focus-out")) {
-      eventDetails.cancel();
-      return;
-    }
-    setOpen(nextOpen);
-  };
-  return /* @__PURE__ */ React__namespace.createElement(HangerContext.Provider, { value: context }, /* @__PURE__ */ React__namespace.createElement("span", { ...otherProps, ref: combinedRef }, /* @__PURE__ */ React__namespace.createElement(popover.Popover.Root, { open, onOpenChange: handleOpenChange }, anchor, children)));
+  return /* @__PURE__ */ React__namespace.createElement(HangerContext.Provider, { value: context }, /* @__PURE__ */ React__namespace.createElement(PopoverPrimitive__namespace.Root, { key: String(open), defaultOpen: open }, anchor && /* @__PURE__ */ React__namespace.createElement(Anchor, null, anchor), children));
 });
 Hanger.Anchor = Anchor;
 Hanger.Content = Content;

package/dist/components/Hanger/Hanger.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Hanger.cjs","sources":["../../../src/components/Hanger/Hanger.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover';\n\nimport { IconButton } from '../IconButton/IconButton';\nimport { Placement } from '../..';\nimport { UnstyledArrow } from './Arrow';\nimport { useLocalization } from '../Provider/Localization';\nimport { mergeRefs } from '../../utils/mergeRefs';\nimport './Hanger.css';\n\ntype HangerContextValue = {\n    /** Handler called when hanger closes by user interaction */\n    onClose?: () => void;\n    anchorRef: React.RefObject<HTMLElement>;\n};\nconst HangerContext = React.createContext<HangerContextValue>({\n    anchorRef: { current: null },\n    onClose: undefined,\n});\n\nexport type HangerTexts = {\n    /** Aria-label for the close icon button of hanger */\n    close: string;\n};\n\nexport type HangerAnchorProps = React.HTMLAttributes<HTMLElement>;\n// The surrounding Hanger root owns the single DOM wrapper that serves as the positioning anchor.\n// `Hanger.Anchor` is a passthrough that clones its child to forward the consumer's ref onto it,\n// preserving the legacy ref API without adding extra DOM (which would break OverflowGroup).\nconst Anchor = React.forwardRef<HTMLElement, HangerAnchorProps>(function HangerAnchor(props, ref) {\n    if (!React.isValidElement(props.children)) {\n        return <>{props.children}</>;\n    }\n    const child = props.children as React.ReactElement & { ref?: React.Ref<HTMLElement> };\n    return React.cloneElement(child, {\n        ref: child.ref ? mergeRefs([ref, child.ref]) : ref,\n    });\n});\n\nexport type HangerTitleProps = React.HTMLAttributes<HTMLHeadingElement>;\nexport const Title = React.forwardRef(function DialogTitle(props: HangerTitleProps, ref: React.Ref<HTMLHeadingElement>) {\n    const className = cn('mb-1 text-base font-bold flex w-full', props.className);\n    return <span {...props} className={className} ref={ref} />;\n});\n\nexport type HangerContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** Set the position of the Hanger relative to its achor. Default value is `bottom` */\n    placement?: Placement;\n    hideWhenDetached?: boolean;\n    container?: HTMLElement | null;\n};\n\nconst Content = React.forwardRef(function HangerContent(props: HangerContentProps, ref: React.Ref<HTMLDivElement>) {\n    const { placement: side, hideWhenDetached = false, container, ...popoverContentProps } = props;\n    const context = React.useContext(HangerContext);\n    const { texts } = useLocalization();\n    const className = cn(\n        'wcag-blue-500 border border-transparent rounded p-3 pr-12 yt-shadow focus:border-transparent max-w-sm print:hidden',\n        props.className\n    );\n\n    return (\n        <PopoverPrimitive.Portal container={container}>\n            <PopoverPrimitive.Positioner\n                anchor={context.anchorRef}\n                className={hideWhenDetached ? 'data-[anchor-hidden]:hidden' : undefined}\n                side={side}\n                sideOffset={11}>\n                <PopoverPrimitive.Popup {...popoverContentProps} className={className} data-taco=\"hanger\" ref={ref}>\n                    {props.children}\n                    <UnstyledArrow className=\"text-blue-500\" />\n                    <PopoverPrimitive.Close\n                        render={\n                            <IconButton\n                                appearance=\"primary\"\n                                aria-label={texts.hanger.close}\n                                className=\"absolute right-0 top-0 mx-2 mt-2 text-white\"\n                                icon=\"close\"\n                                onClick={context.onClose}\n                            />\n                        }\n                    />\n                </PopoverPrimitive.Popup>\n            </PopoverPrimitive.Positioner>\n        </PopoverPrimitive.Portal>\n    );\n});\n\nexport type HangerProps = React.PropsWithChildren<{\n    /** An anchor to be used for the hanger, should not be set if `children` already contains an anchor */\n    anchor?: JSX.Element;\n    /**\n     * Shows or hides hanger depending on the value\n     * @defaultValue true\n     */\n    defaultOpen?: boolean;\n    /** Handler called when user closes the hanger */\n    onClose?: () => void;\n}>;\n\nexport type ForwardedHangerWithStatics = React.ForwardRefExoticComponent<HangerProps & React.RefAttributes<HTMLElement>> & {\n    Anchor: React.ForwardRefExoticComponent<HangerAnchorProps>;\n    Content: React.ForwardRefExoticComponent<HangerContentProps>;\n    Title: React.ForwardRefExoticComponent<HangerTitleProps>;\n};\n\nexport const Hanger = React.forwardRef<HTMLSpanElement, HangerProps>(function Hanger(props, ref) {\n    const { anchor, children, defaultOpen = true, onClose, ...otherProps } = props;\n    const anchorRef = React.useRef<HTMLElement>(null);\n    const combinedRef = mergeRefs([anchorRef as React.MutableRefObject<HTMLElement | null>, ref]);\n    const context = React.useMemo(() => ({ anchorRef, onClose }), [onClose]);\n\n    // we do this to ensure hangers are mounted after their containers, e.g. if the container is another portal\n    const [open, setOpen] = React.useState(false);\n    React.useEffect(() => {\n        if (defaultOpen) {\n            setOpen(defaultOpen);\n        }\n    }, []);\n\n    // Hanger should only close from its close button, matching the previous Radix onInteractOutside behavior.\n    const handleOpenChange = (nextOpen: boolean, eventDetails: PopoverPrimitive.Root.ChangeEventDetails) => {\n        if (!nextOpen && (eventDetails.reason === 'outside-press' || eventDetails.reason === 'focus-out')) {\n            eventDetails.cancel();\n            return;\n        }\n\n        setOpen(nextOpen);\n    };\n\n    // Single inline <span> wrapper: serves as the Floating UI anchor (its rect matches the\n    // in-flow trigger child) and contains the FloatingFocusManager guard spans Base UI injects\n    // when open, so they aren't siblings of the Hanger in parent IntersectionObservers\n    // (e.g. OverflowGroup's) and don't get counted as overflowed children.\n    return (\n        <HangerContext.Provider value={context}>\n            <span {...otherProps} ref={combinedRef as React.Ref<HTMLSpanElement>}>\n                <PopoverPrimitive.Root open={open} onOpenChange={handleOpenChange}>\n                    {/* Anchor via the `anchor` prop. */}\n                    {anchor}\n                    {/* Composition (<Hanger.Anchor>) and the popup Content (portaled out) come through {children}. */}\n                    {children}\n                </PopoverPrimitive.Root>\n            </span>\n        </HangerContext.Provider>\n    );\n}) as ForwardedHangerWithStatics;\nHanger.Anchor = Anchor;\nHanger.Content = Content;\nHanger.Title = Title;\n"],"names":["React","mergeRefs","useLocalization","PopoverPrimitive","UnstyledArrow","IconButton","Hanger"],"mappings":"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"}
+{"version":3,"file":"Hanger.cjs","sources":["../../../src/components/Hanger/Hanger.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\n\nimport { IconButton } from '../IconButton/IconButton';\nimport { Placement } from '../..';\nimport { UnstyledArrow } from './Arrow';\nimport { useLocalization } from '../Provider/Localization';\nimport { mergeRefs } from '../../utils/mergeRefs';\nimport './Hanger.css';\n\ntype HangerContextValue = {\n    /** Handler called when hanger closes by user interaction */\n    onClose?: () => void;\n    props: Record<string, any>;\n    ref: React.Ref<HTMLElement>;\n};\nconst HangerContext = React.createContext<HangerContextValue>({\n    onClose: undefined,\n    props: {},\n    ref: null,\n});\n\nexport type HangerTexts = {\n    /** Aria-label for the close icon button of hanger */\n    close: string;\n};\n\nexport type HangerAnchorProps = React.HTMLAttributes<HTMLDivElement>;\nconst Anchor = React.forwardRef(function HangerAnchor(props: HangerAnchorProps, externalRef: React.Ref<HTMLDivElement>) {\n    const { ref: parentRef, props: parentProps } = React.useContext(HangerContext);\n    const refCallback = mergeRefs([parentRef, externalRef]);\n\n    let children = props.children;\n\n    if (React.isValidElement(props.children) && typeof props.children?.type === 'function') {\n        // oxlint-disable-next-line no-console\n        console.warn(\n            `Hanger.Anchor requires its child to forwardRef so that it can attach to the dom element. Did you mean to wrap '${props.children.type.name}' in React.forwardRef()? Taco has wrapped '${props.children.type.name}' in a 'span' to maintain functionality, but this may cause unintended behaviour`\n        );\n        children = <span>{props.children}</span>;\n    }\n\n    return (\n        <PopoverPrimitive.Anchor {...parentProps} {...props} ref={refCallback} asChild>\n            {children}\n        </PopoverPrimitive.Anchor>\n    );\n});\n\nexport type HangerTitleProps = React.HTMLAttributes<HTMLHeadingElement>;\nexport const Title = React.forwardRef(function DialogTitle(props: HangerTitleProps, ref: React.Ref<HTMLHeadingElement>) {\n    const className = cn('mb-1 text-base font-bold flex w-full', props.className);\n    return <span {...props} className={className} ref={ref} />;\n});\n\nexport type HangerContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** Set the position of the Hanger relative to its achor. Default value is `bottom` */\n    placement?: Placement;\n    hideWhenDetached?: boolean;\n    container?: HTMLElement | null;\n};\n\nconst Content = React.forwardRef(function HangerContent(props: HangerContentProps, ref: React.Ref<HTMLDivElement>) {\n    const { placement: side, hideWhenDetached = false, container } = props;\n    const context = React.useContext(HangerContext);\n    const { texts } = useLocalization();\n    const className = cn(\n        'wcag-blue-500 border border-transparent rounded p-3 pr-12 yt-shadow focus:border-transparent max-w-sm print:hidden',\n        props.className\n    );\n    const handleInteractOutside = (event: CustomEvent): void => {\n        event.preventDefault();\n    };\n\n    return (\n        <PopoverPrimitive.Portal container={container}>\n            <PopoverPrimitive.Content\n                className={className}\n                data-taco=\"hanger\"\n                onInteractOutside={handleInteractOutside}\n                side={side}\n                sideOffset={1}\n                ref={ref}\n                hideWhenDetached={hideWhenDetached}>\n                {props.children}\n                <UnstyledArrow className=\"text-blue-500\" />\n                <PopoverPrimitive.Close asChild>\n                    <IconButton\n                        appearance=\"primary\"\n                        aria-label={texts.hanger.close}\n                        className=\"absolute right-0 top-0 ml-2 mr-2 mt-2 text-white\"\n                        icon=\"close\"\n                        onClick={context.onClose}\n                    />\n                </PopoverPrimitive.Close>\n            </PopoverPrimitive.Content>\n        </PopoverPrimitive.Portal>\n    );\n});\n\nexport type HangerProps = React.PropsWithChildren<{\n    /** An anchor to be used for the hanger, should not be set if `children` already contains an anchor */\n    anchor?: JSX.Element;\n    /**\n     * Shows or hides hanger depending on the value\n     * @defaultValue true\n     */\n    defaultOpen?: boolean;\n    /** Handler called when user closes the hanger */\n    onClose?: () => void;\n}>;\n\nexport type ForwardedHangerWithStatics = React.ForwardRefExoticComponent<HangerProps & React.RefAttributes<HTMLElement>> & {\n    Anchor: React.ForwardRefExoticComponent<HangerAnchorProps>;\n    Content: React.ForwardRefExoticComponent<HangerContentProps>;\n    Title: React.ForwardRefExoticComponent<HangerTitleProps>;\n};\n\nexport const Hanger = React.forwardRef<HTMLElement, HangerProps>(function Hanger(props, ref) {\n    const { anchor, children, defaultOpen = true, onClose, ...otherProps } = props;\n    const context = React.useMemo(() => ({ onClose, props: otherProps, ref }), [onClose, otherProps]);\n\n    // we do this to ensure hangers are mounted after their containers, e.g. if the container is another portal\n    const [open, setOpen] = React.useState(false);\n    React.useEffect(() => {\n        if (defaultOpen) {\n            setOpen(defaultOpen);\n        }\n    }, []);\n\n    return (\n        <HangerContext.Provider value={context}>\n            <PopoverPrimitive.Root key={String(open)} defaultOpen={open}>\n                {anchor && <Anchor>{anchor}</Anchor>}\n                {children}\n            </PopoverPrimitive.Root>\n        </HangerContext.Provider>\n    );\n}) as ForwardedHangerWithStatics;\nHanger.Anchor = Anchor;\nHanger.Content = Content;\nHanger.Title = Title;\n"],"names":["React","mergeRefs","PopoverPrimitive","useLocalization","UnstyledArrow","IconButton","Hanger"],"mappings":"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"}

package/dist/components/Hanger/Hanger.d.ts

@@ -4,7 +4,7 @@ export type HangerTexts = {
     /** Aria-label for the close icon button of hanger */
     close: string;
 };
-export type HangerAnchorProps = React.HTMLAttributes<HTMLElement>;
+export type HangerAnchorProps = React.HTMLAttributes<HTMLDivElement>;
 export type HangerTitleProps = React.HTMLAttributes<HTMLHeadingElement>;
 export declare const Title: React.ForwardRefExoticComponent<HangerTitleProps & React.RefAttributes<HTMLHeadingElement>>;
 export type HangerContentProps = React.HTMLAttributes<HTMLDivElement> & {

package/dist/components/Hanger/Hanger.js

@@ -1,80 +1,79 @@
 import * as React from "react";
 import cn from "clsx";
-import { Popover } from "@base-ui/react/popover";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { IconButton } from "../IconButton/IconButton.js";
 import { UnstyledArrow } from "./Arrow.js";
 import { useLocalization } from "../Provider/Localization.js";
 import { mergeRefs } from "../../utils/mergeRefs.js";
 /* empty css           */
 const HangerContext = React.createContext({
-  anchorRef: { current: null },
-  onClose: void 0
+  onClose: void 0,
+  props: {},
+  ref: null
 });
-const Anchor = React.forwardRef(function HangerAnchor(props, ref) {
-  if (!React.isValidElement(props.children)) {
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, props.children);
+const Anchor = React.forwardRef(function HangerAnchor(props, externalRef) {
+  var _a;
+  const { ref: parentRef, props: parentProps } = React.useContext(HangerContext);
+  const refCallback = mergeRefs([parentRef, externalRef]);
+  let children = props.children;
+  if (React.isValidElement(props.children) && typeof ((_a = props.children) == null ? void 0 : _a.type) === "function") {
+    console.warn(
+      `Hanger.Anchor requires its child to forwardRef so that it can attach to the dom element. Did you mean to wrap '${props.children.type.name}' in React.forwardRef()? Taco has wrapped '${props.children.type.name}' in a 'span' to maintain functionality, but this may cause unintended behaviour`
+    );
+    children = /* @__PURE__ */ React.createElement("span", null, props.children);
   }
-  const child = props.children;
-  return React.cloneElement(child, {
-    ref: child.ref ? mergeRefs([ref, child.ref]) : ref
-  });
+  return /* @__PURE__ */ React.createElement(PopoverPrimitive.Anchor, { ...parentProps, ...props, ref: refCallback, asChild: true }, children);
 });
 const Title = React.forwardRef(function DialogTitle(props, ref) {
   const className = cn("mb-1 text-base font-bold flex w-full", props.className);
   return /* @__PURE__ */ React.createElement("span", { ...props, className, ref });
 });
 const Content = React.forwardRef(function HangerContent(props, ref) {
-  const { placement: side, hideWhenDetached = false, container, ...popoverContentProps } = props;
+  const { placement: side, hideWhenDetached = false, container } = props;
   const context = React.useContext(HangerContext);
   const { texts } = useLocalization();
   const className = cn(
     "wcag-blue-500 border border-transparent rounded p-3 pr-12 yt-shadow focus:border-transparent max-w-sm print:hidden",
     props.className
   );
-  return /* @__PURE__ */ React.createElement(Popover.Portal, { container }, /* @__PURE__ */ React.createElement(
-    Popover.Positioner,
+  const handleInteractOutside = (event) => {
+    event.preventDefault();
+  };
+  return /* @__PURE__ */ React.createElement(PopoverPrimitive.Portal, { container }, /* @__PURE__ */ React.createElement(
+    PopoverPrimitive.Content,
     {
-      anchor: context.anchorRef,
-      className: hideWhenDetached ? "data-[anchor-hidden]:hidden" : void 0,
+      className,
+      "data-taco": "hanger",
+      onInteractOutside: handleInteractOutside,
       side,
-      sideOffset: 11
+      sideOffset: 1,
+      ref,
+      hideWhenDetached
     },
-    /* @__PURE__ */ React.createElement(Popover.Popup, { ...popoverContentProps, className, "data-taco": "hanger", ref }, props.children, /* @__PURE__ */ React.createElement(UnstyledArrow, { className: "text-blue-500" }), /* @__PURE__ */ React.createElement(
-      Popover.Close,
+    props.children,
+    /* @__PURE__ */ React.createElement(UnstyledArrow, { className: "text-blue-500" }),
+    /* @__PURE__ */ React.createElement(PopoverPrimitive.Close, { asChild: true }, /* @__PURE__ */ React.createElement(
+      IconButton,
       {
-        render: /* @__PURE__ */ React.createElement(
-          IconButton,
-          {
-            appearance: "primary",
-            "aria-label": texts.hanger.close,
-            className: "absolute right-0 top-0 mx-2 mt-2 text-white",
-            icon: "close",
-            onClick: context.onClose
-          }
-        )
+        appearance: "primary",
+        "aria-label": texts.hanger.close,
+        className: "absolute right-0 top-0 ml-2 mr-2 mt-2 text-white",
+        icon: "close",
+        onClick: context.onClose
       }
     ))
   ));
 });
 const Hanger = React.forwardRef(function Hanger2(props, ref) {
   const { anchor, children, defaultOpen = true, onClose, ...otherProps } = props;
-  const anchorRef = React.useRef(null);
-  const combinedRef = mergeRefs([anchorRef, ref]);
-  const context = React.useMemo(() => ({ anchorRef, onClose }), [onClose]);
+  const context = React.useMemo(() => ({ onClose, props: otherProps, ref }), [onClose, otherProps]);
   const [open, setOpen] = React.useState(false);
   React.useEffect(() => {
     if (defaultOpen) {
       setOpen(defaultOpen);
     }
   }, []);
-  const handleOpenChange = (nextOpen, eventDetails) => {
-    if (!nextOpen && (eventDetails.reason === "outside-press" || eventDetails.reason === "focus-out")) {
-      eventDetails.cancel();
-      return;
-    }
-    setOpen(nextOpen);
-  };
-  return /* @__PURE__ */ React.createElement(HangerContext.Provider, { value: context }, /* @__PURE__ */ React.createElement("span", { ...otherProps, ref: combinedRef }, /* @__PURE__ */ React.createElement(Popover.Root, { open, onOpenChange: handleOpenChange }, anchor, children)));
+  return /* @__PURE__ */ React.createElement(HangerContext.Provider, { value: context }, /* @__PURE__ */ React.createElement(PopoverPrimitive.Root, { key: String(open), defaultOpen: open }, anchor && /* @__PURE__ */ React.createElement(Anchor, null, anchor), children));
 });
 Hanger.Anchor = Anchor;
 Hanger.Content = Content;

package/dist/components/Hanger/Hanger.js.map

@@ -1 +1 @@
-{"version":3,"file":"Hanger.js","sources":["../../../src/components/Hanger/Hanger.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover';\n\nimport { IconButton } from '../IconButton/IconButton';\nimport { Placement } from '../..';\nimport { UnstyledArrow } from './Arrow';\nimport { useLocalization } from '../Provider/Localization';\nimport { mergeRefs } from '../../utils/mergeRefs';\nimport './Hanger.css';\n\ntype HangerContextValue = {\n    /** Handler called when hanger closes by user interaction */\n    onClose?: () => void;\n    anchorRef: React.RefObject<HTMLElement>;\n};\nconst HangerContext = React.createContext<HangerContextValue>({\n    anchorRef: { current: null },\n    onClose: undefined,\n});\n\nexport type HangerTexts = {\n    /** Aria-label for the close icon button of hanger */\n    close: string;\n};\n\nexport type HangerAnchorProps = React.HTMLAttributes<HTMLElement>;\n// The surrounding Hanger root owns the single DOM wrapper that serves as the positioning anchor.\n// `Hanger.Anchor` is a passthrough that clones its child to forward the consumer's ref onto it,\n// preserving the legacy ref API without adding extra DOM (which would break OverflowGroup).\nconst Anchor = React.forwardRef<HTMLElement, HangerAnchorProps>(function HangerAnchor(props, ref) {\n    if (!React.isValidElement(props.children)) {\n        return <>{props.children}</>;\n    }\n    const child = props.children as React.ReactElement & { ref?: React.Ref<HTMLElement> };\n    return React.cloneElement(child, {\n        ref: child.ref ? mergeRefs([ref, child.ref]) : ref,\n    });\n});\n\nexport type HangerTitleProps = React.HTMLAttributes<HTMLHeadingElement>;\nexport const Title = React.forwardRef(function DialogTitle(props: HangerTitleProps, ref: React.Ref<HTMLHeadingElement>) {\n    const className = cn('mb-1 text-base font-bold flex w-full', props.className);\n    return <span {...props} className={className} ref={ref} />;\n});\n\nexport type HangerContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** Set the position of the Hanger relative to its achor. Default value is `bottom` */\n    placement?: Placement;\n    hideWhenDetached?: boolean;\n    container?: HTMLElement | null;\n};\n\nconst Content = React.forwardRef(function HangerContent(props: HangerContentProps, ref: React.Ref<HTMLDivElement>) {\n    const { placement: side, hideWhenDetached = false, container, ...popoverContentProps } = props;\n    const context = React.useContext(HangerContext);\n    const { texts } = useLocalization();\n    const className = cn(\n        'wcag-blue-500 border border-transparent rounded p-3 pr-12 yt-shadow focus:border-transparent max-w-sm print:hidden',\n        props.className\n    );\n\n    return (\n        <PopoverPrimitive.Portal container={container}>\n            <PopoverPrimitive.Positioner\n                anchor={context.anchorRef}\n                className={hideWhenDetached ? 'data-[anchor-hidden]:hidden' : undefined}\n                side={side}\n                sideOffset={11}>\n                <PopoverPrimitive.Popup {...popoverContentProps} className={className} data-taco=\"hanger\" ref={ref}>\n                    {props.children}\n                    <UnstyledArrow className=\"text-blue-500\" />\n                    <PopoverPrimitive.Close\n                        render={\n                            <IconButton\n                                appearance=\"primary\"\n                                aria-label={texts.hanger.close}\n                                className=\"absolute right-0 top-0 mx-2 mt-2 text-white\"\n                                icon=\"close\"\n                                onClick={context.onClose}\n                            />\n                        }\n                    />\n                </PopoverPrimitive.Popup>\n            </PopoverPrimitive.Positioner>\n        </PopoverPrimitive.Portal>\n    );\n});\n\nexport type HangerProps = React.PropsWithChildren<{\n    /** An anchor to be used for the hanger, should not be set if `children` already contains an anchor */\n    anchor?: JSX.Element;\n    /**\n     * Shows or hides hanger depending on the value\n     * @defaultValue true\n     */\n    defaultOpen?: boolean;\n    /** Handler called when user closes the hanger */\n    onClose?: () => void;\n}>;\n\nexport type ForwardedHangerWithStatics = React.ForwardRefExoticComponent<HangerProps & React.RefAttributes<HTMLElement>> & {\n    Anchor: React.ForwardRefExoticComponent<HangerAnchorProps>;\n    Content: React.ForwardRefExoticComponent<HangerContentProps>;\n    Title: React.ForwardRefExoticComponent<HangerTitleProps>;\n};\n\nexport const Hanger = React.forwardRef<HTMLSpanElement, HangerProps>(function Hanger(props, ref) {\n    const { anchor, children, defaultOpen = true, onClose, ...otherProps } = props;\n    const anchorRef = React.useRef<HTMLElement>(null);\n    const combinedRef = mergeRefs([anchorRef as React.MutableRefObject<HTMLElement | null>, ref]);\n    const context = React.useMemo(() => ({ anchorRef, onClose }), [onClose]);\n\n    // we do this to ensure hangers are mounted after their containers, e.g. if the container is another portal\n    const [open, setOpen] = React.useState(false);\n    React.useEffect(() => {\n        if (defaultOpen) {\n            setOpen(defaultOpen);\n        }\n    }, []);\n\n    // Hanger should only close from its close button, matching the previous Radix onInteractOutside behavior.\n    const handleOpenChange = (nextOpen: boolean, eventDetails: PopoverPrimitive.Root.ChangeEventDetails) => {\n        if (!nextOpen && (eventDetails.reason === 'outside-press' || eventDetails.reason === 'focus-out')) {\n            eventDetails.cancel();\n            return;\n        }\n\n        setOpen(nextOpen);\n    };\n\n    // Single inline <span> wrapper: serves as the Floating UI anchor (its rect matches the\n    // in-flow trigger child) and contains the FloatingFocusManager guard spans Base UI injects\n    // when open, so they aren't siblings of the Hanger in parent IntersectionObservers\n    // (e.g. OverflowGroup's) and don't get counted as overflowed children.\n    return (\n        <HangerContext.Provider value={context}>\n            <span {...otherProps} ref={combinedRef as React.Ref<HTMLSpanElement>}>\n                <PopoverPrimitive.Root open={open} onOpenChange={handleOpenChange}>\n                    {/* Anchor via the `anchor` prop. */}\n                    {anchor}\n                    {/* Composition (<Hanger.Anchor>) and the popup Content (portaled out) come through {children}. */}\n                    {children}\n                </PopoverPrimitive.Root>\n            </span>\n        </HangerContext.Provider>\n    );\n}) as ForwardedHangerWithStatics;\nHanger.Anchor = Anchor;\nHanger.Content = Content;\nHanger.Title = Title;\n"],"names":["PopoverPrimitive","Hanger"],"mappings":"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"}
+{"version":3,"file":"Hanger.js","sources":["../../../src/components/Hanger/Hanger.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\n\nimport { IconButton } from '../IconButton/IconButton';\nimport { Placement } from '../..';\nimport { UnstyledArrow } from './Arrow';\nimport { useLocalization } from '../Provider/Localization';\nimport { mergeRefs } from '../../utils/mergeRefs';\nimport './Hanger.css';\n\ntype HangerContextValue = {\n    /** Handler called when hanger closes by user interaction */\n    onClose?: () => void;\n    props: Record<string, any>;\n    ref: React.Ref<HTMLElement>;\n};\nconst HangerContext = React.createContext<HangerContextValue>({\n    onClose: undefined,\n    props: {},\n    ref: null,\n});\n\nexport type HangerTexts = {\n    /** Aria-label for the close icon button of hanger */\n    close: string;\n};\n\nexport type HangerAnchorProps = React.HTMLAttributes<HTMLDivElement>;\nconst Anchor = React.forwardRef(function HangerAnchor(props: HangerAnchorProps, externalRef: React.Ref<HTMLDivElement>) {\n    const { ref: parentRef, props: parentProps } = React.useContext(HangerContext);\n    const refCallback = mergeRefs([parentRef, externalRef]);\n\n    let children = props.children;\n\n    if (React.isValidElement(props.children) && typeof props.children?.type === 'function') {\n        // oxlint-disable-next-line no-console\n        console.warn(\n            `Hanger.Anchor requires its child to forwardRef so that it can attach to the dom element. Did you mean to wrap '${props.children.type.name}' in React.forwardRef()? Taco has wrapped '${props.children.type.name}' in a 'span' to maintain functionality, but this may cause unintended behaviour`\n        );\n        children = <span>{props.children}</span>;\n    }\n\n    return (\n        <PopoverPrimitive.Anchor {...parentProps} {...props} ref={refCallback} asChild>\n            {children}\n        </PopoverPrimitive.Anchor>\n    );\n});\n\nexport type HangerTitleProps = React.HTMLAttributes<HTMLHeadingElement>;\nexport const Title = React.forwardRef(function DialogTitle(props: HangerTitleProps, ref: React.Ref<HTMLHeadingElement>) {\n    const className = cn('mb-1 text-base font-bold flex w-full', props.className);\n    return <span {...props} className={className} ref={ref} />;\n});\n\nexport type HangerContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** Set the position of the Hanger relative to its achor. Default value is `bottom` */\n    placement?: Placement;\n    hideWhenDetached?: boolean;\n    container?: HTMLElement | null;\n};\n\nconst Content = React.forwardRef(function HangerContent(props: HangerContentProps, ref: React.Ref<HTMLDivElement>) {\n    const { placement: side, hideWhenDetached = false, container } = props;\n    const context = React.useContext(HangerContext);\n    const { texts } = useLocalization();\n    const className = cn(\n        'wcag-blue-500 border border-transparent rounded p-3 pr-12 yt-shadow focus:border-transparent max-w-sm print:hidden',\n        props.className\n    );\n    const handleInteractOutside = (event: CustomEvent): void => {\n        event.preventDefault();\n    };\n\n    return (\n        <PopoverPrimitive.Portal container={container}>\n            <PopoverPrimitive.Content\n                className={className}\n                data-taco=\"hanger\"\n                onInteractOutside={handleInteractOutside}\n                side={side}\n                sideOffset={1}\n                ref={ref}\n                hideWhenDetached={hideWhenDetached}>\n                {props.children}\n                <UnstyledArrow className=\"text-blue-500\" />\n                <PopoverPrimitive.Close asChild>\n                    <IconButton\n                        appearance=\"primary\"\n                        aria-label={texts.hanger.close}\n                        className=\"absolute right-0 top-0 ml-2 mr-2 mt-2 text-white\"\n                        icon=\"close\"\n                        onClick={context.onClose}\n                    />\n                </PopoverPrimitive.Close>\n            </PopoverPrimitive.Content>\n        </PopoverPrimitive.Portal>\n    );\n});\n\nexport type HangerProps = React.PropsWithChildren<{\n    /** An anchor to be used for the hanger, should not be set if `children` already contains an anchor */\n    anchor?: JSX.Element;\n    /**\n     * Shows or hides hanger depending on the value\n     * @defaultValue true\n     */\n    defaultOpen?: boolean;\n    /** Handler called when user closes the hanger */\n    onClose?: () => void;\n}>;\n\nexport type ForwardedHangerWithStatics = React.ForwardRefExoticComponent<HangerProps & React.RefAttributes<HTMLElement>> & {\n    Anchor: React.ForwardRefExoticComponent<HangerAnchorProps>;\n    Content: React.ForwardRefExoticComponent<HangerContentProps>;\n    Title: React.ForwardRefExoticComponent<HangerTitleProps>;\n};\n\nexport const Hanger = React.forwardRef<HTMLElement, HangerProps>(function Hanger(props, ref) {\n    const { anchor, children, defaultOpen = true, onClose, ...otherProps } = props;\n    const context = React.useMemo(() => ({ onClose, props: otherProps, ref }), [onClose, otherProps]);\n\n    // we do this to ensure hangers are mounted after their containers, e.g. if the container is another portal\n    const [open, setOpen] = React.useState(false);\n    React.useEffect(() => {\n        if (defaultOpen) {\n            setOpen(defaultOpen);\n        }\n    }, []);\n\n    return (\n        <HangerContext.Provider value={context}>\n            <PopoverPrimitive.Root key={String(open)} defaultOpen={open}>\n                {anchor && <Anchor>{anchor}</Anchor>}\n                {children}\n            </PopoverPrimitive.Root>\n        </HangerContext.Provider>\n    );\n}) as ForwardedHangerWithStatics;\nHanger.Anchor = Anchor;\nHanger.Content = Content;\nHanger.Title = Title;\n"],"names":["Hanger"],"mappings":";;;;;;;;AAiBA,MAAM,gBAAgB,MAAM,cAAkC;AAAA,EAC1D,SAAS;AAAA,EACT,OAAO,CAAC;AAAA,EACR,KAAK;AACT,CAAC;AAQD,MAAM,SAAS,MAAM,WAAW,SAAS,aAAa,OAA0B,aAAwC;;AAC9G,QAAA,EAAE,KAAK,WAAW,OAAO,gBAAgB,MAAM,WAAW,aAAa;AAC7E,QAAM,cAAc,UAAU,CAAC,WAAW,WAAW,CAAC;AAEtD,MAAI,WAAW,MAAM;AAEjB,MAAA,MAAM,eAAe,MAAM,QAAQ,KAAK,SAAO,WAAM,aAAN,mBAAgB,UAAS,YAAY;AAE5E,YAAA;AAAA,MACJ,kHAAkH,MAAM,SAAS,KAAK,IAAI,8CAA8C,MAAM,SAAS,KAAK,IAAI;AAAA,IACpN;AACW,eAAA,sBAAA,cAAC,QAAM,MAAA,MAAM,QAAS;AAAA,EAAA;AAGrC,SACK,sBAAA,cAAA,iBAAiB,QAAjB,EAAyB,GAAG,aAAc,GAAG,OAAO,KAAK,aAAa,SAAO,KAAA,GACzE,QACL;AAER,CAAC;AAGM,MAAM,QAAQ,MAAM,WAAW,SAAS,YAAY,OAAyB,KAAoC;AACpH,QAAM,YAAY,GAAG,wCAAwC,MAAM,SAAS;AAC5E,SAAQ,sBAAA,cAAA,QAAA,EAAM,GAAG,OAAO,WAAsB,KAAU;AAC5D,CAAC;AASD,MAAM,UAAU,MAAM,WAAW,SAAS,cAAc,OAA2B,KAAgC;AAC/G,QAAM,EAAE,WAAW,MAAM,mBAAmB,OAAO,cAAc;AAC3D,QAAA,UAAU,MAAM,WAAW,aAAa;AACxC,QAAA,EAAE,MAAM,IAAI,gBAAgB;AAClC,QAAM,YAAY;AAAA,IACd;AAAA,IACA,MAAM;AAAA,EACV;AACM,QAAA,wBAAwB,CAAC,UAA6B;AACxD,UAAM,eAAe;AAAA,EACzB;AAEA,SACK,sBAAA,cAAA,iBAAiB,QAAjB,EAAwB,UACrB,GAAA,sBAAA;AAAA,IAAC,iBAAiB;AAAA,IAAjB;AAAA,MACG;AAAA,MACA,aAAU;AAAA,MACV,mBAAmB;AAAA,MACnB;AAAA,MACA,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,IAAA;AAAA,IACC,MAAM;AAAA,IACP,sBAAA,cAAC,eAAc,EAAA,WAAU,gBAAgB,CAAA;AAAA,IACxC,sBAAA,cAAA,iBAAiB,OAAjB,EAAuB,SAAO,KAC3B,GAAA,sBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,YAAW;AAAA,QACX,cAAY,MAAM,OAAO;AAAA,QACzB,WAAU;AAAA,QACV,MAAK;AAAA,QACL,SAAS,QAAQ;AAAA,MAAA;AAAA,IAEzB,CAAA;AAAA,EAAA,CAER;AAER,CAAC;AAoBM,MAAM,SAAS,MAAM,WAAqC,SAASA,QAAO,OAAO,KAAK;AACnF,QAAA,EAAE,QAAQ,UAAU,cAAc,MAAM,SAAS,GAAG,eAAe;AACzE,QAAM,UAAU,MAAM,QAAQ,OAAO,EAAE,SAAS,OAAO,YAAY,IAAI,IAAI,CAAC,SAAS,UAAU,CAAC;AAGhG,QAAM,CAAC,MAAM,OAAO,IAAI,MAAM,SAAS,KAAK;AAC5C,QAAM,UAAU,MAAM;AAClB,QAAI,aAAa;AACb,cAAQ,WAAW;AAAA,IAAA;AAAA,EAE3B,GAAG,EAAE;AAGD,SAAA,sBAAA,cAAC,cAAc,UAAd,EAAuB,OAAO,QAC3B,GAAA,sBAAA,cAAC,iBAAiB,MAAjB,EAAsB,KAAK,OAAO,IAAI,GAAG,aAAa,KAClD,GAAA,8CAAW,QAAQ,MAAA,MAAO,GAC1B,QACL,CACJ;AAER,CAAC;AACD,OAAO,SAAS;AAChB,OAAO,UAAU;AACjB,OAAO,QAAQ;"}

package/dist/components/Layout/components/Sidebar.cjs

@@ -39,7 +39,7 @@ const Sidebar = React.forwardRef(function LayoutSidebar(props, ref) {
       // this prevents awkward animation in the edge case (resizing the browser, instead of starting at a given size)
       invisible: isSmallScreen && !ready,
       "transition-[transform] duration-300 visible": isSmallScreen && ready,
-      "border-r-2 border-black-subtle ": !showBackdrop
+      "border-r-2 border-gray-100 ": !showBackdrop
     },
     props.className
   );