@economic/taco 8.1.3-alpha.0 → 8.1.4-hanger-base-ui-migration.0

package/dist/charts/utils/common.d.ts

@@ -10,7 +10,7 @@ export declare function getAxisProps<TData extends object>(axis: 'x' | 'y', prop
     scale: Function | import('recharts/types/util/types').ScaleType | undefined;
     tickLine: boolean;
     tickMargin: number;
-    tickFormatter: import('../components/types').TickFormatter | undefined;
+    tickFormatter: import('../..').TickFormatter | undefined;
     type: any;
     width: number;
 };

package/dist/components/Field/Field.cjs

@@ -33,8 +33,7 @@ const Field = React__namespace.forwardRef(function Field2(props, ref) {
   );
   const messageClassName = cn("h-4 text-xs text-left leading-normal font-normal truncate -mb-4", {
     "text-gray-700": !invalid && !warning,
-    "text-red-500": invalid,
-    "text-yellow-500": warning && !invalid,
+    "text-red-700": invalid,
     "opacity-50": disabled
   });
   return /* @__PURE__ */ React__namespace.createElement("label", { ...otherProps, className, "data-taco": "label", ref }, children, message && /* @__PURE__ */ React__namespace.createElement(Truncate.Truncate, { tooltip: message }, /* @__PURE__ */ React__namespace.createElement(

package/dist/components/Field/Field.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Field.cjs","sources":["../../../src/components/Field/Field.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport './Field.css';\nimport { Truncate } from '../Truncate/Truncate';\n\nexport type FieldProps = React.LabelHTMLAttributes<HTMLLabelElement> & {\n    /** Content of the field */\n    children: React.ReactNode;\n    /**\tChanges the style to indicate the element is disabled */\n    disabled?: boolean;\n    /* Whether the input is in an invalid state */\n    invalid?: boolean;\n    /* Whether the input is in a warning state */\n    warning?: boolean;\n    /**\n     * Text displayed below the children of Field.\n     * Should be a short text that indicates feedback for user.\n     */\n    message?: string;\n};\n\nexport const Field = React.forwardRef(function Field(props: FieldProps, ref: React.Ref<HTMLLabelElement>) {\n    const messageRef = React.useRef<HTMLSpanElement>(null);\n\n    const { disabled, children, invalid = false, warning = false, message, ...otherProps } = props;\n    const className = cn(\n        'flex flex-col font-bold text-xs leading-loose pb-4 min-h-[theme(spacing.18)]',\n        {\n            'text-gray-300': disabled,\n        },\n        props.className\n    );\n    const messageClassName = cn('h-4 text-xs text-left leading-normal font-normal truncate -mb-4', {\n        'text-gray-700': !invalid && !warning,\n        'text-red-500': invalid,\n        'text-yellow-500': warning && !invalid,\n        'opacity-50': disabled,\n    });\n\n    return (\n        <label {...otherProps} className={className} data-taco=\"label\" ref={ref}>\n            {children}\n            {message && (\n                <Truncate tooltip={message}>\n                    <span\n                        className={messageClassName}\n                        data-taco=\"label-message\"\n                        ref={messageRef}\n                        role={invalid ? 'alert' : undefined}>\n                        {message}\n                    </span>\n                </Truncate>\n            )}\n        </label>\n    );\n});\n"],"names":["React","Field","Truncate"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAqBO,MAAM,QAAQA,iBAAM,WAAW,SAASC,OAAM,OAAmB,KAAkC;AAChG,QAAA,aAAaD,iBAAM,OAAwB,IAAI;AAE/C,QAAA,EAAE,UAAU,UAAU,UAAU,OAAO,UAAU,OAAO,SAAS,GAAG,WAAA,IAAe;AACzF,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,iBAAiB;AAAA,IACrB;AAAA,IACA,MAAM;AAAA,EACV;AACM,QAAA,mBAAmB,GAAG,mEAAmE;AAAA,IAC3F,iBAAiB,CAAC,WAAW,CAAC;AAAA,IAC9B,gBAAgB;AAAA,IAChB,mBAAmB,WAAW,CAAC;AAAA,IAC/B,cAAc;AAAA,EAAA,CACjB;AAED,SACKA,iCAAA,cAAA,SAAA,EAAO,GAAG,YAAY,WAAsB,aAAU,SAAQ,IAAA,GAC1D,UACA,WACIA,iCAAA,cAAAE,SAAAA,UAAA,EAAS,SAAS,WACfF,iCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAW;AAAA,MACX,aAAU;AAAA,MACV,KAAK;AAAA,MACL,MAAM,UAAU,UAAU;AAAA,IAAA;AAAA,IACzB;AAAA,EAAA,CAET,CAER;AAER,CAAC;;"}
+{"version":3,"file":"Field.cjs","sources":["../../../src/components/Field/Field.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport './Field.css';\nimport { Truncate } from '../Truncate/Truncate';\n\nexport type FieldProps = React.LabelHTMLAttributes<HTMLLabelElement> & {\n    /** Content of the field */\n    children: React.ReactNode;\n    /**\tChanges the style to indicate the element is disabled */\n    disabled?: boolean;\n    /* Whether the input is in an invalid state */\n    invalid?: boolean;\n    /* Whether the input is in a warning state */\n    warning?: boolean;\n    /**\n     * Text displayed below the children of Field.\n     * Should be a short text that indicates feedback for user.\n     */\n    message?: string;\n};\n\nexport const Field = React.forwardRef(function Field(props: FieldProps, ref: React.Ref<HTMLLabelElement>) {\n    const messageRef = React.useRef<HTMLSpanElement>(null);\n\n    const { disabled, children, invalid = false, warning = false, message, ...otherProps } = props;\n    const className = cn(\n        'flex flex-col font-bold text-xs leading-loose pb-4 min-h-[theme(spacing.18)]',\n        {\n            'text-gray-300': disabled,\n        },\n        props.className\n    );\n    const messageClassName = cn('h-4 text-xs text-left leading-normal font-normal truncate -mb-4', {\n        'text-gray-700': !invalid && !warning,\n        'text-red-700': invalid,\n        'opacity-50': disabled,\n    });\n\n    return (\n        <label {...otherProps} className={className} data-taco=\"label\" ref={ref}>\n            {children}\n            {message && (\n                <Truncate tooltip={message}>\n                    <span\n                        className={messageClassName}\n                        data-taco=\"label-message\"\n                        ref={messageRef}\n                        role={invalid ? 'alert' : undefined}>\n                        {message}\n                    </span>\n                </Truncate>\n            )}\n        </label>\n    );\n});\n"],"names":["React","Field","Truncate"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAqBO,MAAM,QAAQA,iBAAM,WAAW,SAASC,OAAM,OAAmB,KAAkC;AAChG,QAAA,aAAaD,iBAAM,OAAwB,IAAI;AAE/C,QAAA,EAAE,UAAU,UAAU,UAAU,OAAO,UAAU,OAAO,SAAS,GAAG,WAAA,IAAe;AACzF,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,iBAAiB;AAAA,IACrB;AAAA,IACA,MAAM;AAAA,EACV;AACM,QAAA,mBAAmB,GAAG,mEAAmE;AAAA,IAC3F,iBAAiB,CAAC,WAAW,CAAC;AAAA,IAC9B,gBAAgB;AAAA,IAChB,cAAc;AAAA,EAAA,CACjB;AAED,SACKA,iCAAA,cAAA,SAAA,EAAO,GAAG,YAAY,WAAsB,aAAU,SAAQ,IAAA,GAC1D,UACA,WACIA,iCAAA,cAAAE,SAAAA,UAAA,EAAS,SAAS,WACfF,iCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAW;AAAA,MACX,aAAU;AAAA,MACV,KAAK;AAAA,MACL,MAAM,UAAU,UAAU;AAAA,IAAA;AAAA,IACzB;AAAA,EAAA,CAET,CAER;AAER,CAAC;;"}

package/dist/components/Field/Field.js

@@ -14,8 +14,7 @@ const Field = React.forwardRef(function Field2(props, ref) {
   );
   const messageClassName = cn("h-4 text-xs text-left leading-normal font-normal truncate -mb-4", {
     "text-gray-700": !invalid && !warning,
-    "text-red-500": invalid,
-    "text-yellow-500": warning && !invalid,
+    "text-red-700": invalid,
     "opacity-50": disabled
   });
   return /* @__PURE__ */ React.createElement("label", { ...otherProps, className, "data-taco": "label", ref }, children, message && /* @__PURE__ */ React.createElement(Truncate, { tooltip: message }, /* @__PURE__ */ React.createElement(

package/dist/components/Field/Field.js.map

@@ -1 +1 @@
-{"version":3,"file":"Field.js","sources":["../../../src/components/Field/Field.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport './Field.css';\nimport { Truncate } from '../Truncate/Truncate';\n\nexport type FieldProps = React.LabelHTMLAttributes<HTMLLabelElement> & {\n    /** Content of the field */\n    children: React.ReactNode;\n    /**\tChanges the style to indicate the element is disabled */\n    disabled?: boolean;\n    /* Whether the input is in an invalid state */\n    invalid?: boolean;\n    /* Whether the input is in a warning state */\n    warning?: boolean;\n    /**\n     * Text displayed below the children of Field.\n     * Should be a short text that indicates feedback for user.\n     */\n    message?: string;\n};\n\nexport const Field = React.forwardRef(function Field(props: FieldProps, ref: React.Ref<HTMLLabelElement>) {\n    const messageRef = React.useRef<HTMLSpanElement>(null);\n\n    const { disabled, children, invalid = false, warning = false, message, ...otherProps } = props;\n    const className = cn(\n        'flex flex-col font-bold text-xs leading-loose pb-4 min-h-[theme(spacing.18)]',\n        {\n            'text-gray-300': disabled,\n        },\n        props.className\n    );\n    const messageClassName = cn('h-4 text-xs text-left leading-normal font-normal truncate -mb-4', {\n        'text-gray-700': !invalid && !warning,\n        'text-red-500': invalid,\n        'text-yellow-500': warning && !invalid,\n        'opacity-50': disabled,\n    });\n\n    return (\n        <label {...otherProps} className={className} data-taco=\"label\" ref={ref}>\n            {children}\n            {message && (\n                <Truncate tooltip={message}>\n                    <span\n                        className={messageClassName}\n                        data-taco=\"label-message\"\n                        ref={messageRef}\n                        role={invalid ? 'alert' : undefined}>\n                        {message}\n                    </span>\n                </Truncate>\n            )}\n        </label>\n    );\n});\n"],"names":["Field"],"mappings":";;;;AAqBO,MAAM,QAAQ,MAAM,WAAW,SAASA,OAAM,OAAmB,KAAkC;AAChG,QAAA,aAAa,MAAM,OAAwB,IAAI;AAE/C,QAAA,EAAE,UAAU,UAAU,UAAU,OAAO,UAAU,OAAO,SAAS,GAAG,WAAA,IAAe;AACzF,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,iBAAiB;AAAA,IACrB;AAAA,IACA,MAAM;AAAA,EACV;AACM,QAAA,mBAAmB,GAAG,mEAAmE;AAAA,IAC3F,iBAAiB,CAAC,WAAW,CAAC;AAAA,IAC9B,gBAAgB;AAAA,IAChB,mBAAmB,WAAW,CAAC;AAAA,IAC/B,cAAc;AAAA,EAAA,CACjB;AAED,SACK,sBAAA,cAAA,SAAA,EAAO,GAAG,YAAY,WAAsB,aAAU,SAAQ,IAAA,GAC1D,UACA,WACI,sBAAA,cAAA,UAAA,EAAS,SAAS,WACf,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAW;AAAA,MACX,aAAU;AAAA,MACV,KAAK;AAAA,MACL,MAAM,UAAU,UAAU;AAAA,IAAA;AAAA,IACzB;AAAA,EAAA,CAET,CAER;AAER,CAAC;"}
+{"version":3,"file":"Field.js","sources":["../../../src/components/Field/Field.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport './Field.css';\nimport { Truncate } from '../Truncate/Truncate';\n\nexport type FieldProps = React.LabelHTMLAttributes<HTMLLabelElement> & {\n    /** Content of the field */\n    children: React.ReactNode;\n    /**\tChanges the style to indicate the element is disabled */\n    disabled?: boolean;\n    /* Whether the input is in an invalid state */\n    invalid?: boolean;\n    /* Whether the input is in a warning state */\n    warning?: boolean;\n    /**\n     * Text displayed below the children of Field.\n     * Should be a short text that indicates feedback for user.\n     */\n    message?: string;\n};\n\nexport const Field = React.forwardRef(function Field(props: FieldProps, ref: React.Ref<HTMLLabelElement>) {\n    const messageRef = React.useRef<HTMLSpanElement>(null);\n\n    const { disabled, children, invalid = false, warning = false, message, ...otherProps } = props;\n    const className = cn(\n        'flex flex-col font-bold text-xs leading-loose pb-4 min-h-[theme(spacing.18)]',\n        {\n            'text-gray-300': disabled,\n        },\n        props.className\n    );\n    const messageClassName = cn('h-4 text-xs text-left leading-normal font-normal truncate -mb-4', {\n        'text-gray-700': !invalid && !warning,\n        'text-red-700': invalid,\n        'opacity-50': disabled,\n    });\n\n    return (\n        <label {...otherProps} className={className} data-taco=\"label\" ref={ref}>\n            {children}\n            {message && (\n                <Truncate tooltip={message}>\n                    <span\n                        className={messageClassName}\n                        data-taco=\"label-message\"\n                        ref={messageRef}\n                        role={invalid ? 'alert' : undefined}>\n                        {message}\n                    </span>\n                </Truncate>\n            )}\n        </label>\n    );\n});\n"],"names":["Field"],"mappings":";;;;AAqBO,MAAM,QAAQ,MAAM,WAAW,SAASA,OAAM,OAAmB,KAAkC;AAChG,QAAA,aAAa,MAAM,OAAwB,IAAI;AAE/C,QAAA,EAAE,UAAU,UAAU,UAAU,OAAO,UAAU,OAAO,SAAS,GAAG,WAAA,IAAe;AACzF,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,iBAAiB;AAAA,IACrB;AAAA,IACA,MAAM;AAAA,EACV;AACM,QAAA,mBAAmB,GAAG,mEAAmE;AAAA,IAC3F,iBAAiB,CAAC,WAAW,CAAC;AAAA,IAC9B,gBAAgB;AAAA,IAChB,cAAc;AAAA,EAAA,CACjB;AAED,SACK,sBAAA,cAAA,SAAA,EAAO,GAAG,YAAY,WAAsB,aAAU,SAAQ,IAAA,GAC1D,UACA,WACI,sBAAA,cAAA,UAAA,EAAS,SAAS,WACf,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAW;AAAA,MACX,aAAU;AAAA,MACV,KAAK;AAAA,MACL,MAAM,UAAU,UAAU;AAAA,IAAA;AAAA,IACzB;AAAA,EAAA,CAET,CAER;AAER,CAAC;"}

package/dist/components/Hanger/Arrow.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
-const PopoverPrimitive = require("@radix-ui/react-popover");
+const popover = require("@base-ui/react/popover");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -19,9 +19,8 @@ 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(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(
+  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(
     "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 * 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;;"}
+{"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;;"}

package/dist/components/Hanger/Arrow.js

@@ -1,7 +1,7 @@
 import * as React from "react";
-import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { Popover } from "@base-ui/react/popover";
 const UnstyledArrow = React.forwardRef(function PopoverArrow(props, ref) {
-  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(
+  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(
     "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 * 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;"}
+{"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;"}

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 PopoverPrimitive = require("@radix-ui/react-popover");
+const popover = require("@base-ui/react/popover");
 const IconButton = require("../IconButton/IconButton.cjs");
 const Arrow = require("./Arrow.cjs");
 const Localization = require("../Provider/Localization.cjs");
@@ -25,75 +25,69 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
-const PopoverPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(PopoverPrimitive);
 const HangerContext = React__namespace.createContext({
-  onClose: void 0,
-  props: {},
-  ref: null
+  anchorRef: { current: null },
+  onClose: void 0
 });
-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);
-  }
-  return /* @__PURE__ */ React__namespace.createElement(PopoverPrimitive__namespace.Anchor, { ...parentProps, ...props, ref: refCallback, asChild: true }, children);
+const Anchor = React__namespace.forwardRef(function HangerAnchor(props) {
+  return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, props.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 } = props;
+  const { placement: side, hideWhenDetached = false, container, ...popoverContentProps } = 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
   );
-  const handleInteractOutside = (event) => {
-    event.preventDefault();
-  };
-  return /* @__PURE__ */ React__namespace.createElement(PopoverPrimitive__namespace.Portal, { container }, /* @__PURE__ */ React__namespace.createElement(
-    PopoverPrimitive__namespace.Content,
+  return /* @__PURE__ */ React__namespace.createElement(popover.Popover.Portal, { container }, /* @__PURE__ */ React__namespace.createElement(
+    popover.Popover.Positioner,
     {
-      className,
-      "data-taco": "hanger",
-      onInteractOutside: handleInteractOutside,
+      anchor: context.anchorRef,
+      className: hideWhenDetached ? "data-[anchor-hidden]:hidden" : void 0,
       side,
-      sideOffset: 1,
-      ref,
-      hideWhenDetached
+      sideOffset: 11
     },
-    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,
+    /* @__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,
       {
-        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
+        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
+          }
+        )
       }
     ))
   ));
 });
 const Hanger = React__namespace.forwardRef(function Hanger2(props, ref) {
   const { anchor, children, defaultOpen = true, onClose, ...otherProps } = props;
-  const context = React__namespace.useMemo(() => ({ onClose, props: otherProps, ref }), [onClose, otherProps]);
+  const anchorRef = React__namespace.useRef(null);
+  const combinedRef = mergeRefs.mergeRefs([anchorRef, ref]);
+  const context = React__namespace.useMemo(() => ({ anchorRef, onClose }), [onClose]);
   const [open, setOpen] = React__namespace.useState(false);
   React__namespace.useEffect(() => {
     if (defaultOpen) {
       setOpen(defaultOpen);
     }
   }, []);
-  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));
+  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)));
 });
 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 * 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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"}
+{"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// Passthrough — the surrounding Hanger root owns the single DOM wrapper that serves as the anchor.\n// `Hanger.Anchor` remains in the JSX API for backward compatibility and to signal intent.\nconst Anchor = React.forwardRef<HTMLElement, HangerAnchorProps>(function HangerAnchor(props) {\n    return <>{props.children}</>;\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","useLocalization","PopoverPrimitive","UnstyledArrow","IconButton","Hanger","mergeRefs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBA,MAAM,gBAAgBA,iBAAM,cAAkC;AAAA,EAC1D,WAAW,EAAE,SAAS,KAAK;AAAA,EAC3B,SAAS;AACb,CAAC;AAUD,MAAM,SAASA,iBAAM,WAA2C,SAAS,aAAa,OAAO;AAClF,SAAAA,iCAAA,cAAAA,iBAAA,UAAA,MAAG,MAAM,QAAS;AAC7B,CAAC;AAGM,MAAM,QAAQA,iBAAM,WAAW,SAAS,YAAY,OAAyB,KAAoC;AACpH,QAAM,YAAY,GAAG,wCAAwC,MAAM,SAAS;AAC5E,SAAQA,iCAAA,cAAA,QAAA,EAAM,GAAG,OAAO,WAAsB,KAAU;AAC5D,CAAC;AASD,MAAM,UAAUA,iBAAM,WAAW,SAAS,cAAc,OAA2B,KAAgC;AACzG,QAAA,EAAE,WAAW,MAAM,mBAAmB,OAAO,WAAW,GAAG,wBAAwB;AACnF,QAAA,UAAUA,iBAAM,WAAW,aAAa;AACxC,QAAA,EAAE,MAAM,IAAIC,6BAAgB;AAClC,QAAM,YAAY;AAAA,IACd;AAAA,IACA,MAAM;AAAA,EACV;AAEA,SACKD,iCAAA,cAAAE,QAAA,QAAiB,QAAjB,EAAwB,UACrB,GAAAF,iCAAA;AAAA,IAACE,QAAAA,QAAiB;AAAA,IAAjB;AAAA,MACG,QAAQ,QAAQ;AAAA,MAChB,WAAW,mBAAmB,gCAAgC;AAAA,MAC9D;AAAA,MACA,YAAY;AAAA,IAAA;AAAA,mDACXA,QAAiB,QAAA,OAAjB,EAAwB,GAAG,qBAAqB,WAAsB,aAAU,UAAS,IAAA,GACrF,MAAM,UACPF,iCAAA,cAACG,MAAc,eAAA,EAAA,WAAU,iBAAgB,GACzCH,iCAAA;AAAA,MAACE,QAAAA,QAAiB;AAAA,MAAjB;AAAA,QACG,QACIF,iCAAA;AAAA,UAACI,WAAA;AAAA,UAAA;AAAA,YACG,YAAW;AAAA,YACX,cAAY,MAAM,OAAO;AAAA,YACzB,WAAU;AAAA,YACV,MAAK;AAAA,YACL,SAAS,QAAQ;AAAA,UAAA;AAAA,QAAA;AAAA,MACrB;AAAA,IAGZ,CAAA;AAAA,EAAA,CAER;AAER,CAAC;AAoBM,MAAM,SAASJ,iBAAM,WAAyC,SAASK,QAAO,OAAO,KAAK;AACvF,QAAA,EAAE,QAAQ,UAAU,cAAc,MAAM,SAAS,GAAG,eAAe;AACnE,QAAA,YAAYL,iBAAM,OAAoB,IAAI;AAChD,QAAM,cAAcM,UAAA,UAAU,CAAC,WAAyD,GAAG,CAAC;AACtF,QAAA,UAAUN,iBAAM,QAAQ,OAAO,EAAE,WAAW,QAAQ,IAAI,CAAC,OAAO,CAAC;AAGvE,QAAM,CAAC,MAAM,OAAO,IAAIA,iBAAM,SAAS,KAAK;AAC5CA,mBAAM,UAAU,MAAM;AAClB,QAAI,aAAa;AACb,cAAQ,WAAW;AAAA,IAAA;AAAA,EAE3B,GAAG,EAAE;AAGC,QAAA,mBAAmB,CAAC,UAAmB,iBAA2D;AACpG,QAAI,CAAC,aAAa,aAAa,WAAW,mBAAmB,aAAa,WAAW,cAAc;AAC/F,mBAAa,OAAO;AACpB;AAAA,IAAA;AAGJ,YAAQ,QAAQ;AAAA,EACpB;AAOI,SAAAA,iCAAA,cAAC,cAAc,UAAd,EAAuB,OAAO,QAC3B,GAAAA,iCAAA,cAAC,QAAM,EAAA,GAAG,YAAY,KAAK,eACtBA,iCAAA,cAAAE,QAAAA,QAAiB,MAAjB,EAAsB,MAAY,cAAc,iBAE5C,GAAA,QAEA,QACL,CACJ,CACJ;AAER,CAAC;AACD,OAAO,SAAS;AAChB,OAAO,UAAU;AACjB,OAAO,QAAQ;;;"}

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<HTMLDivElement>;
+export type HangerAnchorProps = React.HTMLAttributes<HTMLElement>;
 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,79 +1,74 @@
 import * as React from "react";
 import cn from "clsx";
-import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { Popover } from "@base-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({
-  onClose: void 0,
-  props: {},
-  ref: null
+  anchorRef: { current: null },
+  onClose: void 0
 });
-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);
-  }
-  return /* @__PURE__ */ React.createElement(PopoverPrimitive.Anchor, { ...parentProps, ...props, ref: refCallback, asChild: true }, children);
+const Anchor = React.forwardRef(function HangerAnchor(props) {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, props.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 } = props;
+  const { placement: side, hideWhenDetached = false, container, ...popoverContentProps } = 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
   );
-  const handleInteractOutside = (event) => {
-    event.preventDefault();
-  };
-  return /* @__PURE__ */ React.createElement(PopoverPrimitive.Portal, { container }, /* @__PURE__ */ React.createElement(
-    PopoverPrimitive.Content,
+  return /* @__PURE__ */ React.createElement(Popover.Portal, { container }, /* @__PURE__ */ React.createElement(
+    Popover.Positioner,
     {
-      className,
-      "data-taco": "hanger",
-      onInteractOutside: handleInteractOutside,
+      anchor: context.anchorRef,
+      className: hideWhenDetached ? "data-[anchor-hidden]:hidden" : void 0,
       side,
-      sideOffset: 1,
-      ref,
-      hideWhenDetached
+      sideOffset: 11
     },
-    props.children,
-    /* @__PURE__ */ React.createElement(UnstyledArrow, { className: "text-blue-500" }),
-    /* @__PURE__ */ React.createElement(PopoverPrimitive.Close, { asChild: true }, /* @__PURE__ */ React.createElement(
-      IconButton,
+    /* @__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,
       {
-        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
+        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
+          }
+        )
       }
     ))
   ));
 });
 const Hanger = React.forwardRef(function Hanger2(props, ref) {
   const { anchor, children, defaultOpen = true, onClose, ...otherProps } = props;
-  const context = React.useMemo(() => ({ onClose, props: otherProps, ref }), [onClose, otherProps]);
+  const anchorRef = React.useRef(null);
+  const combinedRef = mergeRefs([anchorRef, ref]);
+  const context = React.useMemo(() => ({ anchorRef, onClose }), [onClose]);
   const [open, setOpen] = React.useState(false);
   React.useEffect(() => {
     if (defaultOpen) {
       setOpen(defaultOpen);
     }
   }, []);
-  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));
+  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)));
 });
 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 * 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;"}
+{"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// Passthrough — the surrounding Hanger root owns the single DOM wrapper that serves as the anchor.\n// `Hanger.Anchor` remains in the JSX API for backward compatibility and to signal intent.\nconst Anchor = React.forwardRef<HTMLElement, HangerAnchorProps>(function HangerAnchor(props) {\n    return <>{props.children}</>;\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":";;;;;;;;AAgBA,MAAM,gBAAgB,MAAM,cAAkC;AAAA,EAC1D,WAAW,EAAE,SAAS,KAAK;AAAA,EAC3B,SAAS;AACb,CAAC;AAUD,MAAM,SAAS,MAAM,WAA2C,SAAS,aAAa,OAAO;AAClF,SAAA,sBAAA,cAAA,MAAA,UAAA,MAAG,MAAM,QAAS;AAC7B,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;AACzG,QAAA,EAAE,WAAW,MAAM,mBAAmB,OAAO,WAAW,GAAG,wBAAwB;AACnF,QAAA,UAAU,MAAM,WAAW,aAAa;AACxC,QAAA,EAAE,MAAM,IAAI,gBAAgB;AAClC,QAAM,YAAY;AAAA,IACd;AAAA,IACA,MAAM;AAAA,EACV;AAEA,SACK,sBAAA,cAAAA,QAAiB,QAAjB,EAAwB,UACrB,GAAA,sBAAA;AAAA,IAACA,QAAiB;AAAA,IAAjB;AAAA,MACG,QAAQ,QAAQ;AAAA,MAChB,WAAW,mBAAmB,gCAAgC;AAAA,MAC9D;AAAA,MACA,YAAY;AAAA,IAAA;AAAA,wCACXA,QAAiB,OAAjB,EAAwB,GAAG,qBAAqB,WAAsB,aAAU,UAAS,IAAA,GACrF,MAAM,UACP,sBAAA,cAAC,eAAc,EAAA,WAAU,iBAAgB,GACzC,sBAAA;AAAA,MAACA,QAAiB;AAAA,MAAjB;AAAA,QACG,QACI,sBAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,YAAW;AAAA,YACX,cAAY,MAAM,OAAO;AAAA,YACzB,WAAU;AAAA,YACV,MAAK;AAAA,YACL,SAAS,QAAQ;AAAA,UAAA;AAAA,QAAA;AAAA,MACrB;AAAA,IAGZ,CAAA;AAAA,EAAA,CAER;AAER,CAAC;AAoBM,MAAM,SAAS,MAAM,WAAyC,SAASC,QAAO,OAAO,KAAK;AACvF,QAAA,EAAE,QAAQ,UAAU,cAAc,MAAM,SAAS,GAAG,eAAe;AACnE,QAAA,YAAY,MAAM,OAAoB,IAAI;AAChD,QAAM,cAAc,UAAU,CAAC,WAAyD,GAAG,CAAC;AACtF,QAAA,UAAU,MAAM,QAAQ,OAAO,EAAE,WAAW,QAAQ,IAAI,CAAC,OAAO,CAAC;AAGvE,QAAM,CAAC,MAAM,OAAO,IAAI,MAAM,SAAS,KAAK;AAC5C,QAAM,UAAU,MAAM;AAClB,QAAI,aAAa;AACb,cAAQ,WAAW;AAAA,IAAA;AAAA,EAE3B,GAAG,EAAE;AAGC,QAAA,mBAAmB,CAAC,UAAmB,iBAA2D;AACpG,QAAI,CAAC,aAAa,aAAa,WAAW,mBAAmB,aAAa,WAAW,cAAc;AAC/F,mBAAa,OAAO;AACpB;AAAA,IAAA;AAGJ,YAAQ,QAAQ;AAAA,EACpB;AAOI,SAAA,sBAAA,cAAC,cAAc,UAAd,EAAuB,OAAO,QAC3B,GAAA,sBAAA,cAAC,QAAM,EAAA,GAAG,YAAY,KAAK,eACtB,sBAAA,cAAAD,QAAiB,MAAjB,EAAsB,MAAY,cAAc,iBAE5C,GAAA,QAEA,QACL,CACJ,CACJ;AAER,CAAC;AACD,OAAO,SAAS;AAChB,OAAO,UAAU;AACjB,OAAO,QAAQ;"}

package/dist/components/Header/components/Link.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Link.cjs","sources":["../../../../src/components/Header/components/Link.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { Icon, IconName } from '../../Icon/Icon';\nimport { Tooltip } from '../../Tooltip/Tooltip';\nimport { Badge } from '../../Badge/Badge';\nimport { useLocalization } from '../../Provider/Localization';\n\nexport type BaseLinkProps = React.AnchorHTMLAttributes<HTMLAnchorElement> & {\n    tooltip?: string;\n};\n\ninterface LinkPropsWithoutIcon extends BaseLinkProps {\n    children: JSX.Element | string;\n    icon?: never;\n    isNew?: never;\n}\n\ninterface LinkPropsWithIcon extends Omit<BaseLinkProps, 'aria-label'> {\n    'aria-label': string;\n    children?: never;\n    icon: IconName;\n    isNew?: boolean;\n}\n\nexport type LinkProps = LinkPropsWithoutIcon | LinkPropsWithIcon;\n\nexport const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(function Link(props, ref) {\n    const { children, icon, isNew, tooltip, ...otherProps } = props;\n    const { texts } = useLocalization();\n    const className = cn(getLinkClasses(icon), 'relative', props.className);\n\n    const link = (\n        <a {...otherProps} className={className} data-taco=\"header-link\" ref={ref} tabIndex={0}>\n            {icon ? <Icon name={icon} /> : null}\n            {children}\n            {isNew ? (\n                <Badge\n                    color=\"blue\"\n                    small\n                    className=\"absolute right-0 top-0 -mr-2.5 -mt-1.5 !h-3 !px-0.5 text-[0.55rem] font-normal\">\n                    {texts.header.new}\n                </Badge>\n            ) : null}\n        </a>\n    );\n\n    if (tooltip) {\n        return <Tooltip title={tooltip}>{link}</Tooltip>;\n    }\n\n    return link;\n});\n\nexport const getLinkClasses = (icon: IconName | undefined = undefined) =>\n    cn(\n        'flex h-8 flex-shrink-0 flex-grow-0 cursor-pointer items-center justify-center ',\n        'focus:!shadow-none focus:!outline-none focus-visible:!yt-focus-dark',\n        'bg-transparent hover:bg-white-subtle focus:bg-white-subtle aria-current-page:bg-white-subtle',\n        '!text-white hover:text-white focus:text-white',\n        {\n            '!rounded-full !h-9 !w-9': icon,\n            'whitespace-nowrap px-3 rounded text-sm hidden lg:flex': !icon,\n        }\n    );\n"],"names":["Link","useLocalization","Icon","Badge","Tooltip"],"mappings":";;;;;;;;AA0BO,MAAM,OAAO,MAAM,WAAyC,SAASA,MAAK,OAAO,KAAK;AACzF,QAAM,EAAE,UAAU,MAAM,OAAO,SAAS,GAAG,eAAe;AACpD,QAAA,EAAE,MAAM,IAAIC,6BAAgB;AAClC,QAAM,YAAY,GAAG,eAAe,IAAI,GAAG,YAAY,MAAM,SAAS;AAEtE,QAAM,OACD,sBAAA,cAAA,KAAA,EAAG,GAAG,YAAY,WAAsB,aAAU,eAAc,KAAU,UAAU,KAChF,2CAAQC,KAAAA,MAAK,EAAA,MAAM,KAAM,CAAA,IAAK,MAC9B,UACA,QACG,sBAAA;AAAA,IAACC,MAAA;AAAA,IAAA;AAAA,MACG,OAAM;AAAA,MACN,OAAK;AAAA,MACL,WAAU;AAAA,IAAA;AAAA,IACT,MAAM,OAAO;AAAA,MAElB,IACR;AAGJ,MAAI,SAAS;AACT,WAAQ,sBAAA,cAAAC,QAAA,SAAA,EAAQ,OAAO,QAAA,GAAU,IAAK;AAAA,EAAA;AAGnC,SAAA;AACX,CAAC;AAEY,MAAA,iBAAiB,CAAC,OAA6B,WACxD;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,IACI,2BAA2B;AAAA,IAC3B,yDAAyD,CAAC;AAAA,EAAA;AAElE;;;"}
+{"version":3,"file":"Link.cjs","sources":["../../../../src/components/Header/components/Link.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { Icon, IconName } from '../../Icon/Icon';\nimport { Tooltip } from '../../Tooltip/Tooltip';\nimport { Badge } from '../../Badge/Badge';\nimport { useLocalization } from '../../Provider/Localization';\n\nexport type BaseLinkProps = React.AnchorHTMLAttributes<HTMLAnchorElement> & {\n    tooltip?: string;\n};\n\ninterface LinkPropsWithoutIcon extends BaseLinkProps {\n    children: JSX.Element | string;\n    icon?: never;\n    isNew?: never;\n}\n\ninterface LinkPropsWithIcon extends Omit<BaseLinkProps, 'aria-label'> {\n    'aria-label': string;\n    children?: never;\n    icon: IconName;\n    isNew?: boolean;\n}\n\nexport type LinkProps = LinkPropsWithoutIcon | LinkPropsWithIcon;\n\nexport const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(function Link(props, ref) {\n    const { children, icon, isNew, tooltip, ...otherProps } = props;\n    const { texts } = useLocalization();\n    const className = cn(getLinkClasses(icon), 'relative', props.className);\n\n    const link = (\n        <a {...otherProps} className={className} data-taco=\"header-link\" ref={ref} tabIndex={0}>\n            {icon ? <Icon name={icon} /> : null}\n            {children}\n            {isNew ? (\n                <Badge\n                    color=\"blue\"\n                    small\n                    // TODO: remove the text-[0.55rem] and replace with a taco approved font size\n                    // oxlint-disable-next-line class-rules/no-disallowed-color-classes\n                    className=\"absolute right-0 top-0 -mr-2.5 -mt-1.5 !h-3 !px-0.5 text-[0.55rem] font-normal\">\n                    {texts.header.new}\n                </Badge>\n            ) : null}\n        </a>\n    );\n\n    if (tooltip) {\n        return <Tooltip title={tooltip}>{link}</Tooltip>;\n    }\n\n    return link;\n});\n\nexport const getLinkClasses = (icon: IconName | undefined = undefined) =>\n    cn(\n        'flex h-8 flex-shrink-0 flex-grow-0 cursor-pointer items-center justify-center ',\n        'focus:!shadow-none focus:!outline-none focus-visible:!yt-focus-dark',\n        'bg-transparent hover:bg-white-subtle focus:bg-white-subtle aria-current-page:bg-white-subtle',\n        '!text-white hover:text-white focus:text-white',\n        {\n            '!rounded-full !h-9 !w-9': icon,\n            'whitespace-nowrap px-3 rounded text-sm hidden lg:flex': !icon,\n        }\n    );\n"],"names":["Link","useLocalization","Icon","Badge","Tooltip"],"mappings":";;;;;;;;AA0BO,MAAM,OAAO,MAAM,WAAyC,SAASA,MAAK,OAAO,KAAK;AACzF,QAAM,EAAE,UAAU,MAAM,OAAO,SAAS,GAAG,eAAe;AACpD,QAAA,EAAE,MAAM,IAAIC,6BAAgB;AAClC,QAAM,YAAY,GAAG,eAAe,IAAI,GAAG,YAAY,MAAM,SAAS;AAEtE,QAAM,OACD,sBAAA,cAAA,KAAA,EAAG,GAAG,YAAY,WAAsB,aAAU,eAAc,KAAU,UAAU,KAChF,2CAAQC,KAAAA,MAAK,EAAA,MAAM,KAAM,CAAA,IAAK,MAC9B,UACA,QACG,sBAAA;AAAA,IAACC,MAAA;AAAA,IAAA;AAAA,MACG,OAAM;AAAA,MACN,OAAK;AAAA,MAGL,WAAU;AAAA,IAAA;AAAA,IACT,MAAM,OAAO;AAAA,MAElB,IACR;AAGJ,MAAI,SAAS;AACT,WAAQ,sBAAA,cAAAC,QAAA,SAAA,EAAQ,OAAO,QAAA,GAAU,IAAK;AAAA,EAAA;AAGnC,SAAA;AACX,CAAC;AAEY,MAAA,iBAAiB,CAAC,OAA6B,WACxD;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,IACI,2BAA2B;AAAA,IAC3B,yDAAyD,CAAC;AAAA,EAAA;AAElE;;;"}

package/dist/components/Header/components/Link.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link.js","sources":["../../../../src/components/Header/components/Link.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { Icon, IconName } from '../../Icon/Icon';\nimport { Tooltip } from '../../Tooltip/Tooltip';\nimport { Badge } from '../../Badge/Badge';\nimport { useLocalization } from '../../Provider/Localization';\n\nexport type BaseLinkProps = React.AnchorHTMLAttributes<HTMLAnchorElement> & {\n    tooltip?: string;\n};\n\ninterface LinkPropsWithoutIcon extends BaseLinkProps {\n    children: JSX.Element | string;\n    icon?: never;\n    isNew?: never;\n}\n\ninterface LinkPropsWithIcon extends Omit<BaseLinkProps, 'aria-label'> {\n    'aria-label': string;\n    children?: never;\n    icon: IconName;\n    isNew?: boolean;\n}\n\nexport type LinkProps = LinkPropsWithoutIcon | LinkPropsWithIcon;\n\nexport const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(function Link(props, ref) {\n    const { children, icon, isNew, tooltip, ...otherProps } = props;\n    const { texts } = useLocalization();\n    const className = cn(getLinkClasses(icon), 'relative', props.className);\n\n    const link = (\n        <a {...otherProps} className={className} data-taco=\"header-link\" ref={ref} tabIndex={0}>\n            {icon ? <Icon name={icon} /> : null}\n            {children}\n            {isNew ? (\n                <Badge\n                    color=\"blue\"\n                    small\n                    className=\"absolute right-0 top-0 -mr-2.5 -mt-1.5 !h-3 !px-0.5 text-[0.55rem] font-normal\">\n                    {texts.header.new}\n                </Badge>\n            ) : null}\n        </a>\n    );\n\n    if (tooltip) {\n        return <Tooltip title={tooltip}>{link}</Tooltip>;\n    }\n\n    return link;\n});\n\nexport const getLinkClasses = (icon: IconName | undefined = undefined) =>\n    cn(\n        'flex h-8 flex-shrink-0 flex-grow-0 cursor-pointer items-center justify-center ',\n        'focus:!shadow-none focus:!outline-none focus-visible:!yt-focus-dark',\n        'bg-transparent hover:bg-white-subtle focus:bg-white-subtle aria-current-page:bg-white-subtle',\n        '!text-white hover:text-white focus:text-white',\n        {\n            '!rounded-full !h-9 !w-9': icon,\n            'whitespace-nowrap px-3 rounded text-sm hidden lg:flex': !icon,\n        }\n    );\n"],"names":["React","Link"],"mappings":";;;;;;AA0BO,MAAM,OAAOA,eAAM,WAAyC,SAASC,MAAK,OAAO,KAAK;AACzF,QAAM,EAAE,UAAU,MAAM,OAAO,SAAS,GAAG,eAAe;AACpD,QAAA,EAAE,MAAM,IAAI,gBAAgB;AAClC,QAAM,YAAY,GAAG,eAAe,IAAI,GAAG,YAAY,MAAM,SAAS;AAEtE,QAAM,OACDD,+BAAA,cAAA,KAAA,EAAG,GAAG,YAAY,WAAsB,aAAU,eAAc,KAAU,UAAU,KAChF,oDAAQ,MAAK,EAAA,MAAM,KAAM,CAAA,IAAK,MAC9B,UACA,QACGA,+BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,OAAM;AAAA,MACN,OAAK;AAAA,MACL,WAAU;AAAA,IAAA;AAAA,IACT,MAAM,OAAO;AAAA,MAElB,IACR;AAGJ,MAAI,SAAS;AACT,WAAQA,+BAAA,cAAA,SAAA,EAAQ,OAAO,QAAA,GAAU,IAAK;AAAA,EAAA;AAGnC,SAAA;AACX,CAAC;AAEY,MAAA,iBAAiB,CAAC,OAA6B,WACxD;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,IACI,2BAA2B;AAAA,IAC3B,yDAAyD,CAAC;AAAA,EAAA;AAElE;"}
+{"version":3,"file":"Link.js","sources":["../../../../src/components/Header/components/Link.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { Icon, IconName } from '../../Icon/Icon';\nimport { Tooltip } from '../../Tooltip/Tooltip';\nimport { Badge } from '../../Badge/Badge';\nimport { useLocalization } from '../../Provider/Localization';\n\nexport type BaseLinkProps = React.AnchorHTMLAttributes<HTMLAnchorElement> & {\n    tooltip?: string;\n};\n\ninterface LinkPropsWithoutIcon extends BaseLinkProps {\n    children: JSX.Element | string;\n    icon?: never;\n    isNew?: never;\n}\n\ninterface LinkPropsWithIcon extends Omit<BaseLinkProps, 'aria-label'> {\n    'aria-label': string;\n    children?: never;\n    icon: IconName;\n    isNew?: boolean;\n}\n\nexport type LinkProps = LinkPropsWithoutIcon | LinkPropsWithIcon;\n\nexport const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(function Link(props, ref) {\n    const { children, icon, isNew, tooltip, ...otherProps } = props;\n    const { texts } = useLocalization();\n    const className = cn(getLinkClasses(icon), 'relative', props.className);\n\n    const link = (\n        <a {...otherProps} className={className} data-taco=\"header-link\" ref={ref} tabIndex={0}>\n            {icon ? <Icon name={icon} /> : null}\n            {children}\n            {isNew ? (\n                <Badge\n                    color=\"blue\"\n                    small\n                    // TODO: remove the text-[0.55rem] and replace with a taco approved font size\n                    // oxlint-disable-next-line class-rules/no-disallowed-color-classes\n                    className=\"absolute right-0 top-0 -mr-2.5 -mt-1.5 !h-3 !px-0.5 text-[0.55rem] font-normal\">\n                    {texts.header.new}\n                </Badge>\n            ) : null}\n        </a>\n    );\n\n    if (tooltip) {\n        return <Tooltip title={tooltip}>{link}</Tooltip>;\n    }\n\n    return link;\n});\n\nexport const getLinkClasses = (icon: IconName | undefined = undefined) =>\n    cn(\n        'flex h-8 flex-shrink-0 flex-grow-0 cursor-pointer items-center justify-center ',\n        'focus:!shadow-none focus:!outline-none focus-visible:!yt-focus-dark',\n        'bg-transparent hover:bg-white-subtle focus:bg-white-subtle aria-current-page:bg-white-subtle',\n        '!text-white hover:text-white focus:text-white',\n        {\n            '!rounded-full !h-9 !w-9': icon,\n            'whitespace-nowrap px-3 rounded text-sm hidden lg:flex': !icon,\n        }\n    );\n"],"names":["React","Link"],"mappings":";;;;;;AA0BO,MAAM,OAAOA,eAAM,WAAyC,SAASC,MAAK,OAAO,KAAK;AACzF,QAAM,EAAE,UAAU,MAAM,OAAO,SAAS,GAAG,eAAe;AACpD,QAAA,EAAE,MAAM,IAAI,gBAAgB;AAClC,QAAM,YAAY,GAAG,eAAe,IAAI,GAAG,YAAY,MAAM,SAAS;AAEtE,QAAM,OACDD,+BAAA,cAAA,KAAA,EAAG,GAAG,YAAY,WAAsB,aAAU,eAAc,KAAU,UAAU,KAChF,oDAAQ,MAAK,EAAA,MAAM,KAAM,CAAA,IAAK,MAC9B,UACA,QACGA,+BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,OAAM;AAAA,MACN,OAAK;AAAA,MAGL,WAAU;AAAA,IAAA;AAAA,IACT,MAAM,OAAO;AAAA,MAElB,IACR;AAGJ,MAAI,SAAS;AACT,WAAQA,+BAAA,cAAA,SAAA,EAAQ,OAAO,QAAA,GAAU,IAAK;AAAA,EAAA;AAGnC,SAAA;AACX,CAAC;AAEY,MAAA,iBAAiB,CAAC,OAA6B,WACxD;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,IACI,2BAA2B;AAAA,IAC3B,yDAAyD,CAAC;AAAA,EAAA;AAElE;"}

package/dist/components/HoverCard/HoverCard.cjs

@@ -58,10 +58,9 @@ const Content = React__namespace.forwardRef(function HoverCardContent(props, ref
   const className = cn(util.getPopoverStyleClassnames(), "min-w-[theme(spacing.40)] max-w-[theme(spacing.96)]", props.className);
   return /* @__PURE__ */ React__namespace.createElement(previewCard.PreviewCard.Portal, null, /* @__PURE__ */ React__namespace.createElement(previewCard.PreviewCard.Positioner, { side, sideOffset: 12 }, /* @__PURE__ */ React__namespace.createElement(previewCard.PreviewCard.Popup, { className, "data-taco": "hover-card", ref }, props.children, /* @__PURE__ */ React__namespace.createElement(Arrow, null))));
 });
-const HoverCard = (props) => {
-  return /* @__PURE__ */ React__namespace.createElement(previewCard.PreviewCard.Root, { ...props });
-};
-HoverCard.Trigger = Trigger;
-HoverCard.Content = Content;
+const HoverCard = Object.assign((props) => /* @__PURE__ */ React__namespace.createElement(previewCard.PreviewCard.Root, { ...props }), {
+  Trigger,
+  Content
+});
 exports.HoverCard = HoverCard;
 //# sourceMappingURL=HoverCard.cjs.map

package/dist/components/HoverCard/HoverCard.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"HoverCard.cjs","sources":["../../../src/components/HoverCard/HoverCard.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { PreviewCard as PreviewCardPrimitive } from '@base-ui/react/preview-card';\n\nimport { Placement } from '../..';\nimport { getPopoverStyleClassnames } from '../Popover/util';\n\nconst Arrow = () => (\n    <PreviewCardPrimitive.Arrow className=\"data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=right]:left-[-13px] data-[side=top]:bottom-[-8px] data-[side=left]:rotate-90 data-[side=right]:-rotate-90 data-[side=top]:rotate-180\">\n        <svg width=\"20\" height=\"10\" viewBox=\"0 0 20 10\" fill=\"none\">\n            <path\n                d=\"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z\"\n                className=\"fill-[canvas]\"\n            />\n            <path\n                d=\"M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z\"\n                className=\"fill-gray-100 dark:fill-none\"\n            />\n            <path\n                d=\"M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z\"\n                className=\"dark:fill-gray-100\"\n            />\n        </svg>\n    </PreviewCardPrimitive.Arrow>\n);\n\n/**\n * @deprecated\n */\nexport type HoverCardTriggerProps = React.HTMLAttributes<HTMLAnchorElement> & { children: React.ReactElement };\nconst Trigger = React.forwardRef(function HoverCardTrigger(props: HoverCardTriggerProps, ref: React.Ref<HTMLAnchorElement>) {\n    const { children, className, ...otherProps } = props;\n\n    return (\n        <PreviewCardPrimitive.Trigger\n            {...otherProps}\n            className={cn('text-black', className)}\n            delay={300}\n            ref={ref}\n            render={children}\n        />\n    );\n});\n\n/**\n * @deprecated\n */\nexport type HoverCardContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** Set the position of the HoverCard relative to its trigger. Default value is `bottom` */\n    placement?: Placement;\n};\nconst Content = React.forwardRef(function HoverCardContent(props: HoverCardContentProps, ref: React.Ref<HTMLDivElement>) {\n    const { placement: side } = props;\n    const className = cn(getPopoverStyleClassnames(), 'min-w-[theme(spacing.40)] max-w-[theme(spacing.96)]', props.className);\n\n    return (\n        <PreviewCardPrimitive.Portal>\n            <PreviewCardPrimitive.Positioner side={side} sideOffset={12}>\n                <PreviewCardPrimitive.Popup className={className} data-taco=\"hover-card\" ref={ref}>\n                    {props.children}\n                    <Arrow />\n                </PreviewCardPrimitive.Popup>\n            </PreviewCardPrimitive.Positioner>\n        </PreviewCardPrimitive.Portal>\n    );\n});\n\n/**\n * @deprecated\n */\nexport type HoverCardProps = React.PropsWithChildren<object>;\n\n/**\n * @deprecated\n */\nexport const HoverCard = (props: HoverCardProps) => {\n    return <PreviewCardPrimitive.Root {...props} />;\n};\nHoverCard.Trigger = Trigger;\nHoverCard.Content = Content;\n"],"names":["React","PreviewCardPrimitive","getPopoverStyleClassnames"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAOA,MAAM,QAAQ,MACVA,iCAAA,cAACC,YAAqB,YAAA,OAArB,EAA2B,WAAU,kNACjCD,iCAAA,cAAA,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,UACjDA,iCAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,GAAE;AAAA,IACF,WAAU;AAAA,EAAA;AACd,GACAA,iCAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,GAAE;AAAA,IACF,WAAU;AAAA,EAAA;AACd,GACAA,iCAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,GAAE;AAAA,IACF,WAAU;AAAA,EAAA;AACd,CACJ,CACJ;AAOJ,MAAM,UAAUA,iBAAM,WAAW,SAAS,iBAAiB,OAA8B,KAAmC;AACxH,QAAM,EAAE,UAAU,WAAW,GAAG,WAAe,IAAA;AAG3C,SAAAA,iCAAA;AAAA,IAACC,YAAAA,YAAqB;AAAA,IAArB;AAAA,MACI,GAAG;AAAA,MACJ,WAAW,GAAG,cAAc,SAAS;AAAA,MACrC,OAAO;AAAA,MACP;AAAA,MACA,QAAQ;AAAA,IAAA;AAAA,EACZ;AAER,CAAC;AASD,MAAM,UAAUD,iBAAM,WAAW,SAAS,iBAAiB,OAA8B,KAAgC;AAC/G,QAAA,EAAE,WAAW,KAAA,IAAS;AAC5B,QAAM,YAAY,GAAGE,KAAAA,0BAA6B,GAAA,uDAAuD,MAAM,SAAS;AAGpH,SAAAF,iCAAA,cAACC,YAAqB,YAAA,QAArB,MACGD,iCAAA,cAACC,wBAAqB,YAArB,EAAgC,MAAY,YAAY,GACrD,GAAAD,iCAAA,cAACC,wBAAqB,OAArB,EAA2B,WAAsB,aAAU,cAAa,IAAA,GACpE,MAAM,UACND,iCAAA,cAAA,OAAA,IAAM,CACX,CACJ,CACJ;AAER,CAAC;AAUY,MAAA,YAAY,CAAC,UAA0B;AAChD,SAAQA,iCAAA,cAAAC,YAAAA,YAAqB,MAArB,EAA2B,GAAG,OAAO;AACjD;AACA,UAAU,UAAU;AACpB,UAAU,UAAU;;"}
+{"version":3,"file":"HoverCard.cjs","sources":["../../../src/components/HoverCard/HoverCard.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { PreviewCard as PreviewCardPrimitive } from '@base-ui/react/preview-card';\n\nimport { Placement } from '../..';\nimport { getPopoverStyleClassnames } from '../Popover/util';\n\nconst Arrow = () => (\n    <PreviewCardPrimitive.Arrow className=\"data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=right]:left-[-13px] data-[side=top]:bottom-[-8px] data-[side=left]:rotate-90 data-[side=right]:-rotate-90 data-[side=top]:rotate-180\">\n        <svg width=\"20\" height=\"10\" viewBox=\"0 0 20 10\" fill=\"none\">\n            <path\n                d=\"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z\"\n                className=\"fill-[canvas]\"\n            />\n            <path\n                d=\"M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z\"\n                className=\"fill-gray-100 dark:fill-none\"\n            />\n            <path\n                d=\"M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z\"\n                className=\"dark:fill-gray-100\"\n            />\n        </svg>\n    </PreviewCardPrimitive.Arrow>\n);\n\n/**\n * @deprecated\n */\nexport type HoverCardTriggerProps = React.HTMLAttributes<HTMLAnchorElement> & { children: React.ReactElement };\nconst Trigger = React.forwardRef(function HoverCardTrigger(props: HoverCardTriggerProps, ref: React.Ref<HTMLAnchorElement>) {\n    const { children, className, ...otherProps } = props;\n\n    return (\n        <PreviewCardPrimitive.Trigger\n            {...otherProps}\n            className={cn('text-black', className)}\n            delay={300}\n            ref={ref}\n            render={children}\n        />\n    );\n});\n\n/**\n * @deprecated\n */\nexport type HoverCardContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** Set the position of the HoverCard relative to its trigger. Default value is `bottom` */\n    placement?: Placement;\n};\nconst Content = React.forwardRef(function HoverCardContent(props: HoverCardContentProps, ref: React.Ref<HTMLDivElement>) {\n    const { placement: side } = props;\n    const className = cn(getPopoverStyleClassnames(), 'min-w-[theme(spacing.40)] max-w-[theme(spacing.96)]', props.className);\n\n    return (\n        <PreviewCardPrimitive.Portal>\n            <PreviewCardPrimitive.Positioner side={side} sideOffset={12}>\n                <PreviewCardPrimitive.Popup className={className} data-taco=\"hover-card\" ref={ref}>\n                    {props.children}\n                    <Arrow />\n                </PreviewCardPrimitive.Popup>\n            </PreviewCardPrimitive.Positioner>\n        </PreviewCardPrimitive.Portal>\n    );\n});\n\n/**\n * @deprecated\n */\nexport type HoverCardProps = React.PropsWithChildren<object>;\n\n/**\n * @deprecated\n */\nexport const HoverCard = Object.assign((props: HoverCardProps) => <PreviewCardPrimitive.Root {...props} />, {\n    Trigger,\n    Content,\n});\n"],"names":["React","PreviewCardPrimitive","getPopoverStyleClassnames"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAOA,MAAM,QAAQ,MACVA,iCAAA,cAACC,YAAqB,YAAA,OAArB,EAA2B,WAAU,kNACjCD,iCAAA,cAAA,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,UACjDA,iCAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,GAAE;AAAA,IACF,WAAU;AAAA,EAAA;AACd,GACAA,iCAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,GAAE;AAAA,IACF,WAAU;AAAA,EAAA;AACd,GACAA,iCAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,GAAE;AAAA,IACF,WAAU;AAAA,EAAA;AACd,CACJ,CACJ;AAOJ,MAAM,UAAUA,iBAAM,WAAW,SAAS,iBAAiB,OAA8B,KAAmC;AACxH,QAAM,EAAE,UAAU,WAAW,GAAG,WAAe,IAAA;AAG3C,SAAAA,iCAAA;AAAA,IAACC,YAAAA,YAAqB;AAAA,IAArB;AAAA,MACI,GAAG;AAAA,MACJ,WAAW,GAAG,cAAc,SAAS;AAAA,MACrC,OAAO;AAAA,MACP;AAAA,MACA,QAAQ;AAAA,IAAA;AAAA,EACZ;AAER,CAAC;AASD,MAAM,UAAUD,iBAAM,WAAW,SAAS,iBAAiB,OAA8B,KAAgC;AAC/G,QAAA,EAAE,WAAW,KAAA,IAAS;AAC5B,QAAM,YAAY,GAAGE,KAAAA,0BAA6B,GAAA,uDAAuD,MAAM,SAAS;AAGpH,SAAAF,iCAAA,cAACC,YAAqB,YAAA,QAArB,MACGD,iCAAA,cAACC,wBAAqB,YAArB,EAAgC,MAAY,YAAY,GACrD,GAAAD,iCAAA,cAACC,wBAAqB,OAArB,EAA2B,WAAsB,aAAU,cAAa,IAAA,GACpE,MAAM,UACND,iCAAA,cAAA,OAAA,IAAM,CACX,CACJ,CACJ;AAER,CAAC;AAUY,MAAA,YAAY,OAAO,OAAO,CAAC,UAA2BA,iCAAA,cAAAC,YAAAA,YAAqB,MAArB,EAA2B,GAAG,MAAO,CAAA,GAAI;AAAA,EACxG;AAAA,EACA;AACJ,CAAC;;"}

package/dist/components/HoverCard/HoverCard.d.ts

@@ -20,8 +20,7 @@ export type HoverCardProps = React.PropsWithChildren<object>;
 /**
  * @deprecated
  */
-export declare const HoverCard: {
-    (props: HoverCardProps): React.JSX.Element;
+export declare const HoverCard: ((props: HoverCardProps) => React.JSX.Element) & {
     Trigger: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLAnchorElement> & {
         children: React.ReactElement;
     } & React.RefAttributes<HTMLAnchorElement>>;

package/dist/components/HoverCard/HoverCard.js

@@ -39,11 +39,10 @@ const Content = React.forwardRef(function HoverCardContent(props, ref) {
   const className = cn(getPopoverStyleClassnames(), "min-w-[theme(spacing.40)] max-w-[theme(spacing.96)]", props.className);
   return /* @__PURE__ */ React.createElement(PreviewCard.Portal, null, /* @__PURE__ */ React.createElement(PreviewCard.Positioner, { side, sideOffset: 12 }, /* @__PURE__ */ React.createElement(PreviewCard.Popup, { className, "data-taco": "hover-card", ref }, props.children, /* @__PURE__ */ React.createElement(Arrow, null))));
 });
-const HoverCard = (props) => {
-  return /* @__PURE__ */ React.createElement(PreviewCard.Root, { ...props });
-};
-HoverCard.Trigger = Trigger;
-HoverCard.Content = Content;
+const HoverCard = Object.assign((props) => /* @__PURE__ */ React.createElement(PreviewCard.Root, { ...props }), {
+  Trigger,
+  Content
+});
 export {
   HoverCard
 };

package/dist/components/HoverCard/HoverCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"HoverCard.js","sources":["../../../src/components/HoverCard/HoverCard.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { PreviewCard as PreviewCardPrimitive } from '@base-ui/react/preview-card';\n\nimport { Placement } from '../..';\nimport { getPopoverStyleClassnames } from '../Popover/util';\n\nconst Arrow = () => (\n    <PreviewCardPrimitive.Arrow className=\"data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=right]:left-[-13px] data-[side=top]:bottom-[-8px] data-[side=left]:rotate-90 data-[side=right]:-rotate-90 data-[side=top]:rotate-180\">\n        <svg width=\"20\" height=\"10\" viewBox=\"0 0 20 10\" fill=\"none\">\n            <path\n                d=\"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z\"\n                className=\"fill-[canvas]\"\n            />\n            <path\n                d=\"M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z\"\n                className=\"fill-gray-100 dark:fill-none\"\n            />\n            <path\n                d=\"M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z\"\n                className=\"dark:fill-gray-100\"\n            />\n        </svg>\n    </PreviewCardPrimitive.Arrow>\n);\n\n/**\n * @deprecated\n */\nexport type HoverCardTriggerProps = React.HTMLAttributes<HTMLAnchorElement> & { children: React.ReactElement };\nconst Trigger = React.forwardRef(function HoverCardTrigger(props: HoverCardTriggerProps, ref: React.Ref<HTMLAnchorElement>) {\n    const { children, className, ...otherProps } = props;\n\n    return (\n        <PreviewCardPrimitive.Trigger\n            {...otherProps}\n            className={cn('text-black', className)}\n            delay={300}\n            ref={ref}\n            render={children}\n        />\n    );\n});\n\n/**\n * @deprecated\n */\nexport type HoverCardContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** Set the position of the HoverCard relative to its trigger. Default value is `bottom` */\n    placement?: Placement;\n};\nconst Content = React.forwardRef(function HoverCardContent(props: HoverCardContentProps, ref: React.Ref<HTMLDivElement>) {\n    const { placement: side } = props;\n    const className = cn(getPopoverStyleClassnames(), 'min-w-[theme(spacing.40)] max-w-[theme(spacing.96)]', props.className);\n\n    return (\n        <PreviewCardPrimitive.Portal>\n            <PreviewCardPrimitive.Positioner side={side} sideOffset={12}>\n                <PreviewCardPrimitive.Popup className={className} data-taco=\"hover-card\" ref={ref}>\n                    {props.children}\n                    <Arrow />\n                </PreviewCardPrimitive.Popup>\n            </PreviewCardPrimitive.Positioner>\n        </PreviewCardPrimitive.Portal>\n    );\n});\n\n/**\n * @deprecated\n */\nexport type HoverCardProps = React.PropsWithChildren<object>;\n\n/**\n * @deprecated\n */\nexport const HoverCard = (props: HoverCardProps) => {\n    return <PreviewCardPrimitive.Root {...props} />;\n};\nHoverCard.Trigger = Trigger;\nHoverCard.Content = Content;\n"],"names":["PreviewCardPrimitive"],"mappings":";;;;AAOA,MAAM,QAAQ,MACV,sBAAA,cAACA,YAAqB,OAArB,EAA2B,WAAU,kNACjC,sBAAA,cAAA,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,UACjD,sBAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,GAAE;AAAA,IACF,WAAU;AAAA,EAAA;AACd,GACA,sBAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,GAAE;AAAA,IACF,WAAU;AAAA,EAAA;AACd,GACA,sBAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,GAAE;AAAA,IACF,WAAU;AAAA,EAAA;AACd,CACJ,CACJ;AAOJ,MAAM,UAAU,MAAM,WAAW,SAAS,iBAAiB,OAA8B,KAAmC;AACxH,QAAM,EAAE,UAAU,WAAW,GAAG,WAAe,IAAA;AAG3C,SAAA,sBAAA;AAAA,IAACA,YAAqB;AAAA,IAArB;AAAA,MACI,GAAG;AAAA,MACJ,WAAW,GAAG,cAAc,SAAS;AAAA,MACrC,OAAO;AAAA,MACP;AAAA,MACA,QAAQ;AAAA,IAAA;AAAA,EACZ;AAER,CAAC;AASD,MAAM,UAAU,MAAM,WAAW,SAAS,iBAAiB,OAA8B,KAAgC;AAC/G,QAAA,EAAE,WAAW,KAAA,IAAS;AAC5B,QAAM,YAAY,GAAG,0BAA6B,GAAA,uDAAuD,MAAM,SAAS;AAGpH,SAAA,sBAAA,cAACA,YAAqB,QAArB,MACG,sBAAA,cAACA,YAAqB,YAArB,EAAgC,MAAY,YAAY,GACrD,GAAA,sBAAA,cAACA,YAAqB,OAArB,EAA2B,WAAsB,aAAU,cAAa,IAAA,GACpE,MAAM,UACN,sBAAA,cAAA,OAAA,IAAM,CACX,CACJ,CACJ;AAER,CAAC;AAUY,MAAA,YAAY,CAAC,UAA0B;AAChD,SAAQ,sBAAA,cAAAA,YAAqB,MAArB,EAA2B,GAAG,OAAO;AACjD;AACA,UAAU,UAAU;AACpB,UAAU,UAAU;"}
+{"version":3,"file":"HoverCard.js","sources":["../../../src/components/HoverCard/HoverCard.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { PreviewCard as PreviewCardPrimitive } from '@base-ui/react/preview-card';\n\nimport { Placement } from '../..';\nimport { getPopoverStyleClassnames } from '../Popover/util';\n\nconst Arrow = () => (\n    <PreviewCardPrimitive.Arrow className=\"data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=right]:left-[-13px] data-[side=top]:bottom-[-8px] data-[side=left]:rotate-90 data-[side=right]:-rotate-90 data-[side=top]:rotate-180\">\n        <svg width=\"20\" height=\"10\" viewBox=\"0 0 20 10\" fill=\"none\">\n            <path\n                d=\"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z\"\n                className=\"fill-[canvas]\"\n            />\n            <path\n                d=\"M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z\"\n                className=\"fill-gray-100 dark:fill-none\"\n            />\n            <path\n                d=\"M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z\"\n                className=\"dark:fill-gray-100\"\n            />\n        </svg>\n    </PreviewCardPrimitive.Arrow>\n);\n\n/**\n * @deprecated\n */\nexport type HoverCardTriggerProps = React.HTMLAttributes<HTMLAnchorElement> & { children: React.ReactElement };\nconst Trigger = React.forwardRef(function HoverCardTrigger(props: HoverCardTriggerProps, ref: React.Ref<HTMLAnchorElement>) {\n    const { children, className, ...otherProps } = props;\n\n    return (\n        <PreviewCardPrimitive.Trigger\n            {...otherProps}\n            className={cn('text-black', className)}\n            delay={300}\n            ref={ref}\n            render={children}\n        />\n    );\n});\n\n/**\n * @deprecated\n */\nexport type HoverCardContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** Set the position of the HoverCard relative to its trigger. Default value is `bottom` */\n    placement?: Placement;\n};\nconst Content = React.forwardRef(function HoverCardContent(props: HoverCardContentProps, ref: React.Ref<HTMLDivElement>) {\n    const { placement: side } = props;\n    const className = cn(getPopoverStyleClassnames(), 'min-w-[theme(spacing.40)] max-w-[theme(spacing.96)]', props.className);\n\n    return (\n        <PreviewCardPrimitive.Portal>\n            <PreviewCardPrimitive.Positioner side={side} sideOffset={12}>\n                <PreviewCardPrimitive.Popup className={className} data-taco=\"hover-card\" ref={ref}>\n                    {props.children}\n                    <Arrow />\n                </PreviewCardPrimitive.Popup>\n            </PreviewCardPrimitive.Positioner>\n        </PreviewCardPrimitive.Portal>\n    );\n});\n\n/**\n * @deprecated\n */\nexport type HoverCardProps = React.PropsWithChildren<object>;\n\n/**\n * @deprecated\n */\nexport const HoverCard = Object.assign((props: HoverCardProps) => <PreviewCardPrimitive.Root {...props} />, {\n    Trigger,\n    Content,\n});\n"],"names":["PreviewCardPrimitive"],"mappings":";;;;AAOA,MAAM,QAAQ,MACV,sBAAA,cAACA,YAAqB,OAArB,EAA2B,WAAU,kNACjC,sBAAA,cAAA,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,UACjD,sBAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,GAAE;AAAA,IACF,WAAU;AAAA,EAAA;AACd,GACA,sBAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,GAAE;AAAA,IACF,WAAU;AAAA,EAAA;AACd,GACA,sBAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,GAAE;AAAA,IACF,WAAU;AAAA,EAAA;AACd,CACJ,CACJ;AAOJ,MAAM,UAAU,MAAM,WAAW,SAAS,iBAAiB,OAA8B,KAAmC;AACxH,QAAM,EAAE,UAAU,WAAW,GAAG,WAAe,IAAA;AAG3C,SAAA,sBAAA;AAAA,IAACA,YAAqB;AAAA,IAArB;AAAA,MACI,GAAG;AAAA,MACJ,WAAW,GAAG,cAAc,SAAS;AAAA,MACrC,OAAO;AAAA,MACP;AAAA,MACA,QAAQ;AAAA,IAAA;AAAA,EACZ;AAER,CAAC;AASD,MAAM,UAAU,MAAM,WAAW,SAAS,iBAAiB,OAA8B,KAAgC;AAC/G,QAAA,EAAE,WAAW,KAAA,IAAS;AAC5B,QAAM,YAAY,GAAG,0BAA6B,GAAA,uDAAuD,MAAM,SAAS;AAGpH,SAAA,sBAAA,cAACA,YAAqB,QAArB,MACG,sBAAA,cAACA,YAAqB,YAArB,EAAgC,MAAY,YAAY,GACrD,GAAA,sBAAA,cAACA,YAAqB,OAArB,EAA2B,WAAsB,aAAU,cAAa,IAAA,GACpE,MAAM,UACN,sBAAA,cAAA,OAAA,IAAM,CACX,CACJ,CACJ;AAER,CAAC;AAUY,MAAA,YAAY,OAAO,OAAO,CAAC,UAA2B,sBAAA,cAAAA,YAAqB,MAArB,EAA2B,GAAG,MAAO,CAAA,GAAI;AAAA,EACxG;AAAA,EACA;AACJ,CAAC;"}

package/dist/components/Input/util.cjs

@@ -16,8 +16,8 @@ const getInputClasses = (props) => {
       // disabled
       "text-opacity-25 cursor-not-allowed placeholder:text-gray-500": disabled,
       // highlighted
-      "bg-yellow-50/25": props.highlighted && disabled,
-      "bg-yellow-50/50": props.highlighted && !disabled,
+      "bg-yellow-50 placeholder:text-yellow-300": props.highlighted && disabled,
+      "bg-yellow-100 placeholder:text-yellow-500": props.highlighted && !disabled,
       // invalid
       "border-red-500 enabled:hover:border-red-500 disabled:border-red-300/50": invalid,
       // readOnly

package/dist/components/Input/util.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"util.cjs","sources":["../../../src/components/Input/util.ts"],"sourcesContent":["import cn from 'clsx';\n\ntype InputClassesProps = Pick<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    'aria-disabled' | 'aria-readonly' | 'aria-invalid' | 'readOnly' | 'disabled'\n> & {\n    invalid?: boolean;\n    highlighted?: boolean;\n};\n\nexport const getInputClasses = (props: InputClassesProps) => {\n    const disabled = props.disabled || !!props['aria-disabled'];\n    const readOnly = props.readOnly || !!props['aria-readonly'];\n    const invalid = props.invalid || !!props['aria-invalid'];\n\n    return cn(\n        'peer text-black text-sm border font-normal not-italic no-underline rounded flex items-center leading-6 px-2 relative w-full text-ellipsis transition-colors transition-opacity ease-in min-h-[theme(spacing.8)] focus:yt-focus',\n        // hide the arrow controls on input[type=number]\n        '[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none',\n        {\n            'bg-white': !props.highlighted && !readOnly,\n            // default\n            'border-gray-200 enabled:hover:border-gray-300 disabled:border-gray-100': !invalid,\n            // disabled\n            'text-opacity-25 cursor-not-allowed placeholder:text-gray-500': disabled,\n            // highlighted\n            'bg-yellow-50/25': props.highlighted && disabled,\n            'bg-yellow-50/50': props.highlighted && !disabled,\n            // invalid\n            'border-red-500 enabled:hover:border-red-500 disabled:border-red-300/50': invalid,\n            // readOnly\n            'cursor-not-allowed text-black bg-gray-50': readOnly,\n        }\n    );\n};\n\nexport const getButtonStateClasses = (invalid: boolean | undefined, disabled = false): string => {\n    if (invalid) {\n        return cn('border border-red-500 group-peer-hover:enabled:border-red-700 transition-colors ease-in', {\n            'border-red-500/30': disabled,\n        });\n    }\n\n    return 'border border-gray-200 group-peer-hover:enabled:border-gray-300 transition-colors transition-opacity ease-in';\n};\n"],"names":[],"mappings":";;;AAUa,MAAA,kBAAkB,CAAC,UAA6B;AACzD,QAAM,WAAW,MAAM,YAAY,CAAC,CAAC,MAAM,eAAe;AAC1D,QAAM,WAAW,MAAM,YAAY,CAAC,CAAC,MAAM,eAAe;AAC1D,QAAM,UAAU,MAAM,WAAW,CAAC,CAAC,MAAM,cAAc;AAEhD,SAAA;AAAA,IACH;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,MACI,YAAY,CAAC,MAAM,eAAe,CAAC;AAAA;AAAA,MAEnC,0EAA0E,CAAC;AAAA;AAAA,MAE3E,gEAAgE;AAAA;AAAA,MAEhE,mBAAmB,MAAM,eAAe;AAAA,MACxC,mBAAmB,MAAM,eAAe,CAAC;AAAA;AAAA,MAEzC,0EAA0E;AAAA;AAAA,MAE1E,4CAA4C;AAAA,IAAA;AAAA,EAEpD;AACJ;AAEO,MAAM,wBAAwB,CAAC,SAA8B,WAAW,UAAkB;AAC7F,MAAI,SAAS;AACT,WAAO,GAAG,2FAA2F;AAAA,MACjG,qBAAqB;AAAA,IAAA,CACxB;AAAA,EAAA;AAGE,SAAA;AACX;;;"}
+{"version":3,"file":"util.cjs","sources":["../../../src/components/Input/util.ts"],"sourcesContent":["import cn from 'clsx';\n\ntype InputClassesProps = Pick<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    'aria-disabled' | 'aria-readonly' | 'aria-invalid' | 'readOnly' | 'disabled'\n> & {\n    invalid?: boolean;\n    highlighted?: boolean;\n};\n\nexport const getInputClasses = (props: InputClassesProps) => {\n    const disabled = props.disabled || !!props['aria-disabled'];\n    const readOnly = props.readOnly || !!props['aria-readonly'];\n    const invalid = props.invalid || !!props['aria-invalid'];\n\n    return cn(\n        'peer text-black text-sm border font-normal not-italic no-underline rounded flex items-center leading-6 px-2 relative w-full text-ellipsis transition-colors transition-opacity ease-in min-h-[theme(spacing.8)] focus:yt-focus',\n        // hide the arrow controls on input[type=number]\n        '[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none',\n        {\n            'bg-white': !props.highlighted && !readOnly,\n            // default\n            'border-gray-200 enabled:hover:border-gray-300 disabled:border-gray-100': !invalid,\n            // disabled\n            'text-opacity-25 cursor-not-allowed placeholder:text-gray-500': disabled,\n            // highlighted\n            'bg-yellow-50 placeholder:text-yellow-300': props.highlighted && disabled,\n            'bg-yellow-100 placeholder:text-yellow-500': props.highlighted && !disabled,\n            // invalid\n            'border-red-500 enabled:hover:border-red-500 disabled:border-red-300/50': invalid,\n            // readOnly\n            'cursor-not-allowed text-black bg-gray-50': readOnly,\n        }\n    );\n};\n\nexport const getButtonStateClasses = (invalid: boolean | undefined, disabled = false): string => {\n    if (invalid) {\n        return cn('border border-red-500 group-peer-hover:enabled:border-red-700 transition-colors ease-in', {\n            'border-red-500/30': disabled,\n        });\n    }\n\n    return 'border border-gray-200 group-peer-hover:enabled:border-gray-300 transition-colors transition-opacity ease-in';\n};\n"],"names":[],"mappings":";;;AAUa,MAAA,kBAAkB,CAAC,UAA6B;AACzD,QAAM,WAAW,MAAM,YAAY,CAAC,CAAC,MAAM,eAAe;AAC1D,QAAM,WAAW,MAAM,YAAY,CAAC,CAAC,MAAM,eAAe;AAC1D,QAAM,UAAU,MAAM,WAAW,CAAC,CAAC,MAAM,cAAc;AAEhD,SAAA;AAAA,IACH;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,MACI,YAAY,CAAC,MAAM,eAAe,CAAC;AAAA;AAAA,MAEnC,0EAA0E,CAAC;AAAA;AAAA,MAE3E,gEAAgE;AAAA;AAAA,MAEhE,4CAA4C,MAAM,eAAe;AAAA,MACjE,6CAA6C,MAAM,eAAe,CAAC;AAAA;AAAA,MAEnE,0EAA0E;AAAA;AAAA,MAE1E,4CAA4C;AAAA,IAAA;AAAA,EAEpD;AACJ;AAEO,MAAM,wBAAwB,CAAC,SAA8B,WAAW,UAAkB;AAC7F,MAAI,SAAS;AACT,WAAO,GAAG,2FAA2F;AAAA,MACjG,qBAAqB;AAAA,IAAA,CACxB;AAAA,EAAA;AAGE,SAAA;AACX;;;"}

package/dist/components/Input/util.js

@@ -14,8 +14,8 @@ const getInputClasses = (props) => {
       // disabled
       "text-opacity-25 cursor-not-allowed placeholder:text-gray-500": disabled,
       // highlighted
-      "bg-yellow-50/25": props.highlighted && disabled,
-      "bg-yellow-50/50": props.highlighted && !disabled,
+      "bg-yellow-50 placeholder:text-yellow-300": props.highlighted && disabled,
+      "bg-yellow-100 placeholder:text-yellow-500": props.highlighted && !disabled,
       // invalid
       "border-red-500 enabled:hover:border-red-500 disabled:border-red-300/50": invalid,
       // readOnly

package/dist/components/Input/util.js.map

@@ -1 +1 @@
-{"version":3,"file":"util.js","sources":["../../../src/components/Input/util.ts"],"sourcesContent":["import cn from 'clsx';\n\ntype InputClassesProps = Pick<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    'aria-disabled' | 'aria-readonly' | 'aria-invalid' | 'readOnly' | 'disabled'\n> & {\n    invalid?: boolean;\n    highlighted?: boolean;\n};\n\nexport const getInputClasses = (props: InputClassesProps) => {\n    const disabled = props.disabled || !!props['aria-disabled'];\n    const readOnly = props.readOnly || !!props['aria-readonly'];\n    const invalid = props.invalid || !!props['aria-invalid'];\n\n    return cn(\n        'peer text-black text-sm border font-normal not-italic no-underline rounded flex items-center leading-6 px-2 relative w-full text-ellipsis transition-colors transition-opacity ease-in min-h-[theme(spacing.8)] focus:yt-focus',\n        // hide the arrow controls on input[type=number]\n        '[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none',\n        {\n            'bg-white': !props.highlighted && !readOnly,\n            // default\n            'border-gray-200 enabled:hover:border-gray-300 disabled:border-gray-100': !invalid,\n            // disabled\n            'text-opacity-25 cursor-not-allowed placeholder:text-gray-500': disabled,\n            // highlighted\n            'bg-yellow-50/25': props.highlighted && disabled,\n            'bg-yellow-50/50': props.highlighted && !disabled,\n            // invalid\n            'border-red-500 enabled:hover:border-red-500 disabled:border-red-300/50': invalid,\n            // readOnly\n            'cursor-not-allowed text-black bg-gray-50': readOnly,\n        }\n    );\n};\n\nexport const getButtonStateClasses = (invalid: boolean | undefined, disabled = false): string => {\n    if (invalid) {\n        return cn('border border-red-500 group-peer-hover:enabled:border-red-700 transition-colors ease-in', {\n            'border-red-500/30': disabled,\n        });\n    }\n\n    return 'border border-gray-200 group-peer-hover:enabled:border-gray-300 transition-colors transition-opacity ease-in';\n};\n"],"names":[],"mappings":";AAUa,MAAA,kBAAkB,CAAC,UAA6B;AACzD,QAAM,WAAW,MAAM,YAAY,CAAC,CAAC,MAAM,eAAe;AAC1D,QAAM,WAAW,MAAM,YAAY,CAAC,CAAC,MAAM,eAAe;AAC1D,QAAM,UAAU,MAAM,WAAW,CAAC,CAAC,MAAM,cAAc;AAEhD,SAAA;AAAA,IACH;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,MACI,YAAY,CAAC,MAAM,eAAe,CAAC;AAAA;AAAA,MAEnC,0EAA0E,CAAC;AAAA;AAAA,MAE3E,gEAAgE;AAAA;AAAA,MAEhE,mBAAmB,MAAM,eAAe;AAAA,MACxC,mBAAmB,MAAM,eAAe,CAAC;AAAA;AAAA,MAEzC,0EAA0E;AAAA;AAAA,MAE1E,4CAA4C;AAAA,IAAA;AAAA,EAEpD;AACJ;AAEO,MAAM,wBAAwB,CAAC,SAA8B,WAAW,UAAkB;AAC7F,MAAI,SAAS;AACT,WAAO,GAAG,2FAA2F;AAAA,MACjG,qBAAqB;AAAA,IAAA,CACxB;AAAA,EAAA;AAGE,SAAA;AACX;"}
+{"version":3,"file":"util.js","sources":["../../../src/components/Input/util.ts"],"sourcesContent":["import cn from 'clsx';\n\ntype InputClassesProps = Pick<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    'aria-disabled' | 'aria-readonly' | 'aria-invalid' | 'readOnly' | 'disabled'\n> & {\n    invalid?: boolean;\n    highlighted?: boolean;\n};\n\nexport const getInputClasses = (props: InputClassesProps) => {\n    const disabled = props.disabled || !!props['aria-disabled'];\n    const readOnly = props.readOnly || !!props['aria-readonly'];\n    const invalid = props.invalid || !!props['aria-invalid'];\n\n    return cn(\n        'peer text-black text-sm border font-normal not-italic no-underline rounded flex items-center leading-6 px-2 relative w-full text-ellipsis transition-colors transition-opacity ease-in min-h-[theme(spacing.8)] focus:yt-focus',\n        // hide the arrow controls on input[type=number]\n        '[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none',\n        {\n            'bg-white': !props.highlighted && !readOnly,\n            // default\n            'border-gray-200 enabled:hover:border-gray-300 disabled:border-gray-100': !invalid,\n            // disabled\n            'text-opacity-25 cursor-not-allowed placeholder:text-gray-500': disabled,\n            // highlighted\n            'bg-yellow-50 placeholder:text-yellow-300': props.highlighted && disabled,\n            'bg-yellow-100 placeholder:text-yellow-500': props.highlighted && !disabled,\n            // invalid\n            'border-red-500 enabled:hover:border-red-500 disabled:border-red-300/50': invalid,\n            // readOnly\n            'cursor-not-allowed text-black bg-gray-50': readOnly,\n        }\n    );\n};\n\nexport const getButtonStateClasses = (invalid: boolean | undefined, disabled = false): string => {\n    if (invalid) {\n        return cn('border border-red-500 group-peer-hover:enabled:border-red-700 transition-colors ease-in', {\n            'border-red-500/30': disabled,\n        });\n    }\n\n    return 'border border-gray-200 group-peer-hover:enabled:border-gray-300 transition-colors transition-opacity ease-in';\n};\n"],"names":[],"mappings":";AAUa,MAAA,kBAAkB,CAAC,UAA6B;AACzD,QAAM,WAAW,MAAM,YAAY,CAAC,CAAC,MAAM,eAAe;AAC1D,QAAM,WAAW,MAAM,YAAY,CAAC,CAAC,MAAM,eAAe;AAC1D,QAAM,UAAU,MAAM,WAAW,CAAC,CAAC,MAAM,cAAc;AAEhD,SAAA;AAAA,IACH;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,MACI,YAAY,CAAC,MAAM,eAAe,CAAC;AAAA;AAAA,MAEnC,0EAA0E,CAAC;AAAA;AAAA,MAE3E,gEAAgE;AAAA;AAAA,MAEhE,4CAA4C,MAAM,eAAe;AAAA,MACjE,6CAA6C,MAAM,eAAe,CAAC;AAAA;AAAA,MAEnE,0EAA0E;AAAA;AAAA,MAE1E,4CAA4C;AAAA,IAAA;AAAA,EAEpD;AACJ;AAEO,MAAM,wBAAwB,CAAC,SAA8B,WAAW,UAAkB;AAC7F,MAAI,SAAS;AACT,WAAO,GAAG,2FAA2F;AAAA,MACjG,qBAAqB;AAAA,IAAA,CACxB;AAAA,EAAA;AAGE,SAAA;AACX;"}

package/dist/components/List/components/Collapsible.d.ts

@@ -5,7 +5,7 @@ export type ListCollapsibleProps = Omit<ComposableListItemProps<typeof Collapsib
     children: JSX.Element | JSX.Element[];
     defaultOpen?: boolean;
 };
-export declare const Collapsible: React.ForwardRefExoticComponent<Omit<ComposableListItemProps<React.ForwardRefExoticComponent<Omit<import('@base-ui/react/collapsible').CollapsibleRootProps, "ref"> & React.RefAttributes<HTMLDivElement>>>, "children"> & {
+export declare const Collapsible: React.ForwardRefExoticComponent<Omit<ComposableListItemProps<React.ForwardRefExoticComponent<Omit<import('@base-ui/react').CollapsibleRootProps, "ref"> & React.RefAttributes<HTMLDivElement>>>, "children"> & {
     children: JSX.Element | JSX.Element[];
     defaultOpen?: boolean;
 } & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Menu/components/Content.d.ts

@@ -7,7 +7,7 @@ export type MenuContentProps = Omit<React.ComponentPropsWithoutRef<typeof MenuPr
     /** Set the position of the Menu relative to its trigger. Default value is `bottom` */
     placement?: Placement;
 };
-export declare const Content: React.ForwardRefExoticComponent<Omit<Omit<Omit<import('@base-ui/react/menu').MenuPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "children" | "side"> & {
+export declare const Content: React.ForwardRefExoticComponent<Omit<Omit<Omit<import('@base-ui/react').ContextMenuPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "children" | "side"> & {
     align?: Align;
     children: React.ReactNode;
     /** Set the position of the Menu relative to its trigger. Default value is `bottom` */

package/dist/components/Menu/components/SubMenu.d.ts

@@ -3,6 +3,6 @@ import * as React from 'react';
 export type MenuSubMenuProps = Omit<React.ComponentPropsWithoutRef<typeof MenuPrimitive.Popup>, 'children' | 'side'> & {
     children: React.ReactNode;
 };
-export declare const SubMenu: React.ForwardRefExoticComponent<Omit<Omit<Omit<import('@base-ui/react/menu').MenuPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "children" | "side"> & {
+export declare const SubMenu: React.ForwardRefExoticComponent<Omit<Omit<Omit<import('@base-ui/react').ContextMenuPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "children" | "side"> & {
     children: React.ReactNode;
 } & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Select/useSelect.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useSelect.cjs","sources":["../../../src/components/Select/useSelect.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { nanoid } from 'nanoid';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { useLocalization } from '../Provider/Localization';\nimport { SelectProps } from './Select';\nimport { ListboxProps } from '../Listbox/Listbox';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { setInputValueByRef, findByValue, useFlattenedData, sanitizeItem } from '../Listbox/util';\nimport { ScrollableListItemValue } from '../Listbox/ScrollableList';\nimport { createCustomEvent } from '../../utils/input';\n\ntype InternalButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>;\ntype InternalListboxProps = ListboxProps & { ref: React.ForwardedRef<HTMLInputElement> };\ntype InternalInputProps = React.InputHTMLAttributes<HTMLInputElement> & { ref: React.ForwardedRef<HTMLInputElement> };\n\ntype useSelect = React.HtmlHTMLAttributes<HTMLDivElement> & {\n    button: InternalButtonProps;\n    listbox: InternalListboxProps;\n    input: InternalInputProps;\n    popover: Pick<PopoverPrimitive.PopoverProps, 'onOpenChange' | 'open'>;\n    text: string | JSX.Element;\n    more?: number;\n};\n\nexport const useSelect = (\n    {\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n        data = [],\n        defaultValue,\n        disabled,\n        emptyValue,\n        id: nativeId,\n        multiselect,\n        onBlur,\n        onClick: _1,\n        onChange,\n        readOnly,\n        tabIndex,\n        value,\n        ...otherProps\n    }: SelectProps,\n    ref: React.Ref<HTMLInputElement>\n): useSelect => {\n    const { texts } = useLocalization();\n    const flattenedData = useFlattenedData(data);\n    const listboxInputRef = useMergedRef<HTMLInputElement>(ref);\n    const [open, setOpen] = React.useState(false);\n    const id = React.useMemo(() => nativeId || `select_${nanoid()}`, [nativeId]);\n    const inputRef = React.useRef<HTMLInputElement>(null);\n    const buttonId = `${id}-button`;\n    // support 'escape' resetting to the value that was set when the listbox opened\n    const [lastValue, setLastValue] = React.useState<ScrollableListItemValue | undefined>(value);\n\n    React.useEffect(() => {\n        setLastValue(value);\n    }, [open]);\n\n    React.useEffect(() => {\n        if (value === undefined) {\n            if (defaultValue !== undefined && findByValue(flattenedData, defaultValue)) {\n                setInputValueByRef(inputRef.current, defaultValue);\n            } else if (emptyValue !== undefined) {\n                setInputValueByRef(inputRef.current, emptyValue);\n            } else if (data.length > 0) {\n                setInputValueByRef(inputRef.current, data[0]?.value);\n            }\n        } else if (!multiselect && !findByValue(flattenedData, value)) {\n            if (emptyValue !== undefined) {\n                setInputValueByRef(inputRef.current, emptyValue);\n            } else if (data.length > 0) {\n                setInputValueByRef(inputRef.current, data[0]?.value);\n            }\n        }\n    }, []);\n\n    // event handlers\n    const handleButtonKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>): void => {\n        if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {\n            event.preventDefault();\n            setOpen(true);\n        }\n    };\n\n    const handleListboxKeyDown = (event: React.KeyboardEvent<HTMLElement>): void => {\n        switch (event.key) {\n            case 'Escape': {\n                event.preventDefault();\n                if (lastValue !== undefined) {\n                    setInputValueByRef(listboxInputRef.current, lastValue);\n                }\n\n                setOpen(false);\n                break;\n            }\n\n            case 'Tab':\n            case 'Enter': {\n                if (event.key !== 'Tab') {\n                    event.preventDefault();\n                }\n                setOpen(false);\n                break;\n            }\n\n            default:\n        }\n\n        if (otherProps.onKeyDown) {\n            otherProps.onKeyDown(event);\n        }\n    };\n\n    const handleListboxClick = (event: React.MouseEvent<HTMLLIElement>): void => {\n        event.preventDefault();\n        if (!multiselect) {\n            setOpen(false);\n            if (onBlur) {\n                onBlur(createCustomEvent('blur') as unknown as React.FocusEvent<HTMLElement, Element>);\n            }\n        }\n    };\n\n    let text: string | JSX.Element = '';\n    let more = 0;\n\n    if (value !== undefined) {\n        if (multiselect) {\n            const selectedValues = value?.toString().split(',') || [];\n\n            if (selectedValues.length === flattenedData.filter(item => !item.disabled).length) {\n                text = texts.select.allOptionsSelected;\n            } else {\n                text = findByValue(flattenedData, selectedValues[0])?.text ?? '';\n                more = selectedValues.length > 1 ? selectedValues.length - 1 : 0;\n            }\n        } else {\n            const item = findByValue(flattenedData, value);\n\n            if (item) {\n                text = item.icon ? (\n                    <>\n                        {React.cloneElement(item.icon, {\n                            className: cn(item.icon.props.className, 'mr-1 -mt-px'),\n                        })}\n                        {item.text}\n                    </>\n                ) : (\n                    item.text\n                );\n            }\n        }\n    }\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n        event.persist();\n\n        if (onChange) {\n            const item = findByValue(flattenedData, event.target.value);\n            (event as any).detail = sanitizeItem(item);\n\n            const indexes = item?.path?.split('.') ?? [];\n\n            if (indexes.length > 1) {\n                // we don't want to map the current item\n                indexes.pop();\n                // we need to rebuild the path as we map\n                let lastPath: string;\n\n                (event as any).detail.parents = indexes.map(i => {\n                    lastPath = lastPath ? [lastPath, i].join('.') : i;\n                    return sanitizeItem(flattenedData.find(i => i.path === lastPath));\n                });\n            }\n\n            onChange(event);\n        }\n    };\n\n    const handleButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n        if (readOnly) {\n            event.preventDefault();\n        }\n    };\n\n    // select the value text if the select is readonly\n    const handleButtonFocus = (event: React.FocusEvent<HTMLButtonElement>) => {\n        if (readOnly) {\n            const value = event.currentTarget.querySelector(':first-child');\n\n            if (value) {\n                window.getSelection()?.selectAllChildren?.(value);\n            }\n        }\n    };\n\n    const button: InternalButtonProps = {\n        'aria-haspopup': 'listbox' as const,\n        'aria-label': ariaLabel ? `${ariaLabel} ${text}` : undefined,\n        'aria-labelledby': ariaLabelledBy ? `${ariaLabelledBy} ${buttonId}` : undefined,\n        'aria-readonly': readOnly ? 'true' : undefined,\n        disabled: disabled,\n        id: buttonId,\n        onClick: handleButtonClick,\n        onFocus: handleButtonFocus,\n        onKeyDown: !disabled && !readOnly ? handleButtonKeyDown : undefined,\n        tabIndex,\n        type: 'button',\n    };\n\n    const listbox: InternalListboxProps = {\n        ...otherProps,\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n        data,\n        disabled,\n        emptyValue,\n        onBlur,\n        onClick: handleListboxClick,\n        onChange: event => {\n            setInputValueByRef(inputRef.current, event.target.value);\n        },\n        onKeyDown: handleListboxKeyDown,\n        ref: listboxInputRef,\n        value,\n    };\n\n    const input: InternalInputProps = {\n        onChange: handleInputChange,\n        ref: inputRef,\n        value: String(value ?? ''),\n    };\n\n    return {\n        button,\n        listbox,\n        input,\n        popover: {\n            open,\n            onOpenChange: setOpen,\n        },\n        text,\n        more,\n    };\n};\n"],"names":["useLocalization","useFlattenedData","useMergedRef","React","nanoid","findByValue","setInputValueByRef","_a","createCustomEvent","sanitizeItem","i","value","input"],"mappings":"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"}
+{"version":3,"file":"useSelect.cjs","sources":["../../../src/components/Select/useSelect.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { nanoid } from 'nanoid';\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover';\nimport { useLocalization } from '../Provider/Localization';\nimport { SelectProps } from './Select';\nimport { ListboxProps } from '../Listbox/Listbox';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { setInputValueByRef, findByValue, useFlattenedData, sanitizeItem } from '../Listbox/util';\nimport { ScrollableListItemValue } from '../Listbox/ScrollableList';\nimport { createCustomEvent } from '../../utils/input';\n\ntype InternalButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>;\ntype InternalListboxProps = ListboxProps & { ref: React.ForwardedRef<HTMLInputElement> };\ntype InternalInputProps = React.InputHTMLAttributes<HTMLInputElement> & { ref: React.ForwardedRef<HTMLInputElement> };\n\ntype useSelect = React.HtmlHTMLAttributes<HTMLDivElement> & {\n    button: InternalButtonProps;\n    listbox: InternalListboxProps;\n    input: InternalInputProps;\n    popover: Pick<PopoverPrimitive.Root.Props, 'onOpenChange' | 'open'>;\n    text: string | JSX.Element;\n    more?: number;\n};\n\nexport const useSelect = (\n    {\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n        data = [],\n        defaultValue,\n        disabled,\n        emptyValue,\n        id: nativeId,\n        multiselect,\n        onBlur,\n        onClick: _1,\n        onChange,\n        readOnly,\n        tabIndex,\n        value,\n        ...otherProps\n    }: SelectProps,\n    ref: React.Ref<HTMLInputElement>\n): useSelect => {\n    const { texts } = useLocalization();\n    const flattenedData = useFlattenedData(data);\n    const listboxInputRef = useMergedRef<HTMLInputElement>(ref);\n    const [open, setOpen] = React.useState(false);\n    const id = React.useMemo(() => nativeId || `select_${nanoid()}`, [nativeId]);\n    const inputRef = React.useRef<HTMLInputElement>(null);\n    const buttonId = `${id}-button`;\n    // support 'escape' resetting to the value that was set when the listbox opened\n    const [lastValue, setLastValue] = React.useState<ScrollableListItemValue | undefined>(value);\n\n    React.useEffect(() => {\n        setLastValue(value);\n    }, [open]);\n\n    React.useEffect(() => {\n        if (value === undefined) {\n            if (defaultValue !== undefined && findByValue(flattenedData, defaultValue)) {\n                setInputValueByRef(inputRef.current, defaultValue);\n            } else if (emptyValue !== undefined) {\n                setInputValueByRef(inputRef.current, emptyValue);\n            } else if (data.length > 0) {\n                setInputValueByRef(inputRef.current, data[0]?.value);\n            }\n        } else if (!multiselect && !findByValue(flattenedData, value)) {\n            if (emptyValue !== undefined) {\n                setInputValueByRef(inputRef.current, emptyValue);\n            } else if (data.length > 0) {\n                setInputValueByRef(inputRef.current, data[0]?.value);\n            }\n        }\n    }, []);\n\n    // event handlers\n    const handleButtonKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>): void => {\n        if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {\n            event.preventDefault();\n            setOpen(true);\n        }\n    };\n\n    const handleListboxKeyDown = (event: React.KeyboardEvent<HTMLElement>): void => {\n        switch (event.key) {\n            case 'Escape': {\n                event.preventDefault();\n                if (lastValue !== undefined) {\n                    setInputValueByRef(listboxInputRef.current, lastValue);\n                }\n\n                setOpen(false);\n                break;\n            }\n\n            case 'Tab':\n            case 'Enter': {\n                if (event.key !== 'Tab') {\n                    event.preventDefault();\n                }\n                setOpen(false);\n                break;\n            }\n\n            default:\n        }\n\n        if (otherProps.onKeyDown) {\n            otherProps.onKeyDown(event);\n        }\n    };\n\n    const handleListboxClick = (event: React.MouseEvent<HTMLLIElement>): void => {\n        event.preventDefault();\n        if (!multiselect) {\n            setOpen(false);\n            if (onBlur) {\n                onBlur(createCustomEvent('blur') as unknown as React.FocusEvent<HTMLElement, Element>);\n            }\n        }\n    };\n\n    let text: string | JSX.Element = '';\n    let more = 0;\n\n    if (value !== undefined) {\n        if (multiselect) {\n            const selectedValues = value?.toString().split(',') || [];\n\n            if (selectedValues.length === flattenedData.filter(item => !item.disabled).length) {\n                text = texts.select.allOptionsSelected;\n            } else {\n                text = findByValue(flattenedData, selectedValues[0])?.text ?? '';\n                more = selectedValues.length > 1 ? selectedValues.length - 1 : 0;\n            }\n        } else {\n            const item = findByValue(flattenedData, value);\n\n            if (item) {\n                text = item.icon ? (\n                    <>\n                        {React.cloneElement(item.icon, {\n                            className: cn(item.icon.props.className, 'mr-1 -mt-px'),\n                        })}\n                        {item.text}\n                    </>\n                ) : (\n                    item.text\n                );\n            }\n        }\n    }\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n        event.persist();\n\n        if (onChange) {\n            const item = findByValue(flattenedData, event.target.value);\n            (event as any).detail = sanitizeItem(item);\n\n            const indexes = item?.path?.split('.') ?? [];\n\n            if (indexes.length > 1) {\n                // we don't want to map the current item\n                indexes.pop();\n                // we need to rebuild the path as we map\n                let lastPath: string;\n\n                (event as any).detail.parents = indexes.map(i => {\n                    lastPath = lastPath ? [lastPath, i].join('.') : i;\n                    return sanitizeItem(flattenedData.find(i => i.path === lastPath));\n                });\n            }\n\n            onChange(event);\n        }\n    };\n\n    const handleButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n        if (readOnly) {\n            event.preventDefault();\n        }\n    };\n\n    // select the value text if the select is readonly\n    const handleButtonFocus = (event: React.FocusEvent<HTMLButtonElement>) => {\n        if (readOnly) {\n            const value = event.currentTarget.querySelector(':first-child');\n\n            if (value) {\n                window.getSelection()?.selectAllChildren?.(value);\n            }\n        }\n    };\n\n    const button: InternalButtonProps = {\n        'aria-haspopup': 'listbox' as const,\n        'aria-label': ariaLabel ? `${ariaLabel} ${text}` : undefined,\n        'aria-labelledby': ariaLabelledBy ? `${ariaLabelledBy} ${buttonId}` : undefined,\n        'aria-readonly': readOnly ? 'true' : undefined,\n        disabled: disabled,\n        id: buttonId,\n        onClick: handleButtonClick,\n        onFocus: handleButtonFocus,\n        onKeyDown: !disabled && !readOnly ? handleButtonKeyDown : undefined,\n        tabIndex,\n        type: 'button',\n    };\n\n    const listbox: InternalListboxProps = {\n        ...otherProps,\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n        data,\n        disabled,\n        emptyValue,\n        onBlur,\n        onClick: handleListboxClick,\n        onChange: event => {\n            setInputValueByRef(inputRef.current, event.target.value);\n        },\n        onKeyDown: handleListboxKeyDown,\n        ref: listboxInputRef,\n        value,\n    };\n\n    const input: InternalInputProps = {\n        onChange: handleInputChange,\n        ref: inputRef,\n        value: String(value ?? ''),\n    };\n\n    return {\n        button,\n        listbox,\n        input,\n        popover: {\n            open,\n            onOpenChange: setOpen,\n        },\n        text,\n        more,\n    };\n};\n"],"names":["useLocalization","useFlattenedData","useMergedRef","React","nanoid","findByValue","setInputValueByRef","_a","createCustomEvent","sanitizeItem","i","value","input"],"mappings":"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"}

package/dist/components/Select/useSelect.d.ts

@@ -1,7 +1,7 @@
+import { Popover as PopoverPrimitive } from '@base-ui/react/popover';
 import { SelectProps } from './Select';
 import { ListboxProps } from '../Listbox/Listbox';
 import * as React from 'react';
-import * as PopoverPrimitive from '@radix-ui/react-popover';
 type InternalButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
 type InternalListboxProps = ListboxProps & {
     ref: React.ForwardedRef<HTMLInputElement>;
@@ -13,7 +13,7 @@ type useSelect = React.HtmlHTMLAttributes<HTMLDivElement> & {
     button: InternalButtonProps;
     listbox: InternalListboxProps;
     input: InternalInputProps;
-    popover: Pick<PopoverPrimitive.PopoverProps, 'onOpenChange' | 'open'>;
+    popover: Pick<PopoverPrimitive.Root.Props, 'onOpenChange' | 'open'>;
     text: string | JSX.Element;
     more?: number;
 };

package/dist/components/Select/useSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSelect.js","sources":["../../../src/components/Select/useSelect.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { nanoid } from 'nanoid';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { useLocalization } from '../Provider/Localization';\nimport { SelectProps } from './Select';\nimport { ListboxProps } from '../Listbox/Listbox';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { setInputValueByRef, findByValue, useFlattenedData, sanitizeItem } from '../Listbox/util';\nimport { ScrollableListItemValue } from '../Listbox/ScrollableList';\nimport { createCustomEvent } from '../../utils/input';\n\ntype InternalButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>;\ntype InternalListboxProps = ListboxProps & { ref: React.ForwardedRef<HTMLInputElement> };\ntype InternalInputProps = React.InputHTMLAttributes<HTMLInputElement> & { ref: React.ForwardedRef<HTMLInputElement> };\n\ntype useSelect = React.HtmlHTMLAttributes<HTMLDivElement> & {\n    button: InternalButtonProps;\n    listbox: InternalListboxProps;\n    input: InternalInputProps;\n    popover: Pick<PopoverPrimitive.PopoverProps, 'onOpenChange' | 'open'>;\n    text: string | JSX.Element;\n    more?: number;\n};\n\nexport const useSelect = (\n    {\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n        data = [],\n        defaultValue,\n        disabled,\n        emptyValue,\n        id: nativeId,\n        multiselect,\n        onBlur,\n        onClick: _1,\n        onChange,\n        readOnly,\n        tabIndex,\n        value,\n        ...otherProps\n    }: SelectProps,\n    ref: React.Ref<HTMLInputElement>\n): useSelect => {\n    const { texts } = useLocalization();\n    const flattenedData = useFlattenedData(data);\n    const listboxInputRef = useMergedRef<HTMLInputElement>(ref);\n    const [open, setOpen] = React.useState(false);\n    const id = React.useMemo(() => nativeId || `select_${nanoid()}`, [nativeId]);\n    const inputRef = React.useRef<HTMLInputElement>(null);\n    const buttonId = `${id}-button`;\n    // support 'escape' resetting to the value that was set when the listbox opened\n    const [lastValue, setLastValue] = React.useState<ScrollableListItemValue | undefined>(value);\n\n    React.useEffect(() => {\n        setLastValue(value);\n    }, [open]);\n\n    React.useEffect(() => {\n        if (value === undefined) {\n            if (defaultValue !== undefined && findByValue(flattenedData, defaultValue)) {\n                setInputValueByRef(inputRef.current, defaultValue);\n            } else if (emptyValue !== undefined) {\n                setInputValueByRef(inputRef.current, emptyValue);\n            } else if (data.length > 0) {\n                setInputValueByRef(inputRef.current, data[0]?.value);\n            }\n        } else if (!multiselect && !findByValue(flattenedData, value)) {\n            if (emptyValue !== undefined) {\n                setInputValueByRef(inputRef.current, emptyValue);\n            } else if (data.length > 0) {\n                setInputValueByRef(inputRef.current, data[0]?.value);\n            }\n        }\n    }, []);\n\n    // event handlers\n    const handleButtonKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>): void => {\n        if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {\n            event.preventDefault();\n            setOpen(true);\n        }\n    };\n\n    const handleListboxKeyDown = (event: React.KeyboardEvent<HTMLElement>): void => {\n        switch (event.key) {\n            case 'Escape': {\n                event.preventDefault();\n                if (lastValue !== undefined) {\n                    setInputValueByRef(listboxInputRef.current, lastValue);\n                }\n\n                setOpen(false);\n                break;\n            }\n\n            case 'Tab':\n            case 'Enter': {\n                if (event.key !== 'Tab') {\n                    event.preventDefault();\n                }\n                setOpen(false);\n                break;\n            }\n\n            default:\n        }\n\n        if (otherProps.onKeyDown) {\n            otherProps.onKeyDown(event);\n        }\n    };\n\n    const handleListboxClick = (event: React.MouseEvent<HTMLLIElement>): void => {\n        event.preventDefault();\n        if (!multiselect) {\n            setOpen(false);\n            if (onBlur) {\n                onBlur(createCustomEvent('blur') as unknown as React.FocusEvent<HTMLElement, Element>);\n            }\n        }\n    };\n\n    let text: string | JSX.Element = '';\n    let more = 0;\n\n    if (value !== undefined) {\n        if (multiselect) {\n            const selectedValues = value?.toString().split(',') || [];\n\n            if (selectedValues.length === flattenedData.filter(item => !item.disabled).length) {\n                text = texts.select.allOptionsSelected;\n            } else {\n                text = findByValue(flattenedData, selectedValues[0])?.text ?? '';\n                more = selectedValues.length > 1 ? selectedValues.length - 1 : 0;\n            }\n        } else {\n            const item = findByValue(flattenedData, value);\n\n            if (item) {\n                text = item.icon ? (\n                    <>\n                        {React.cloneElement(item.icon, {\n                            className: cn(item.icon.props.className, 'mr-1 -mt-px'),\n                        })}\n                        {item.text}\n                    </>\n                ) : (\n                    item.text\n                );\n            }\n        }\n    }\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n        event.persist();\n\n        if (onChange) {\n            const item = findByValue(flattenedData, event.target.value);\n            (event as any).detail = sanitizeItem(item);\n\n            const indexes = item?.path?.split('.') ?? [];\n\n            if (indexes.length > 1) {\n                // we don't want to map the current item\n                indexes.pop();\n                // we need to rebuild the path as we map\n                let lastPath: string;\n\n                (event as any).detail.parents = indexes.map(i => {\n                    lastPath = lastPath ? [lastPath, i].join('.') : i;\n                    return sanitizeItem(flattenedData.find(i => i.path === lastPath));\n                });\n            }\n\n            onChange(event);\n        }\n    };\n\n    const handleButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n        if (readOnly) {\n            event.preventDefault();\n        }\n    };\n\n    // select the value text if the select is readonly\n    const handleButtonFocus = (event: React.FocusEvent<HTMLButtonElement>) => {\n        if (readOnly) {\n            const value = event.currentTarget.querySelector(':first-child');\n\n            if (value) {\n                window.getSelection()?.selectAllChildren?.(value);\n            }\n        }\n    };\n\n    const button: InternalButtonProps = {\n        'aria-haspopup': 'listbox' as const,\n        'aria-label': ariaLabel ? `${ariaLabel} ${text}` : undefined,\n        'aria-labelledby': ariaLabelledBy ? `${ariaLabelledBy} ${buttonId}` : undefined,\n        'aria-readonly': readOnly ? 'true' : undefined,\n        disabled: disabled,\n        id: buttonId,\n        onClick: handleButtonClick,\n        onFocus: handleButtonFocus,\n        onKeyDown: !disabled && !readOnly ? handleButtonKeyDown : undefined,\n        tabIndex,\n        type: 'button',\n    };\n\n    const listbox: InternalListboxProps = {\n        ...otherProps,\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n        data,\n        disabled,\n        emptyValue,\n        onBlur,\n        onClick: handleListboxClick,\n        onChange: event => {\n            setInputValueByRef(inputRef.current, event.target.value);\n        },\n        onKeyDown: handleListboxKeyDown,\n        ref: listboxInputRef,\n        value,\n    };\n\n    const input: InternalInputProps = {\n        onChange: handleInputChange,\n        ref: inputRef,\n        value: String(value ?? ''),\n    };\n\n    return {\n        button,\n        listbox,\n        input,\n        popover: {\n            open,\n            onOpenChange: setOpen,\n        },\n        text,\n        more,\n    };\n};\n"],"names":["_a","i","value"],"mappings":"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"}
+{"version":3,"file":"useSelect.js","sources":["../../../src/components/Select/useSelect.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { nanoid } from 'nanoid';\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover';\nimport { useLocalization } from '../Provider/Localization';\nimport { SelectProps } from './Select';\nimport { ListboxProps } from '../Listbox/Listbox';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { setInputValueByRef, findByValue, useFlattenedData, sanitizeItem } from '../Listbox/util';\nimport { ScrollableListItemValue } from '../Listbox/ScrollableList';\nimport { createCustomEvent } from '../../utils/input';\n\ntype InternalButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>;\ntype InternalListboxProps = ListboxProps & { ref: React.ForwardedRef<HTMLInputElement> };\ntype InternalInputProps = React.InputHTMLAttributes<HTMLInputElement> & { ref: React.ForwardedRef<HTMLInputElement> };\n\ntype useSelect = React.HtmlHTMLAttributes<HTMLDivElement> & {\n    button: InternalButtonProps;\n    listbox: InternalListboxProps;\n    input: InternalInputProps;\n    popover: Pick<PopoverPrimitive.Root.Props, 'onOpenChange' | 'open'>;\n    text: string | JSX.Element;\n    more?: number;\n};\n\nexport const useSelect = (\n    {\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n        data = [],\n        defaultValue,\n        disabled,\n        emptyValue,\n        id: nativeId,\n        multiselect,\n        onBlur,\n        onClick: _1,\n        onChange,\n        readOnly,\n        tabIndex,\n        value,\n        ...otherProps\n    }: SelectProps,\n    ref: React.Ref<HTMLInputElement>\n): useSelect => {\n    const { texts } = useLocalization();\n    const flattenedData = useFlattenedData(data);\n    const listboxInputRef = useMergedRef<HTMLInputElement>(ref);\n    const [open, setOpen] = React.useState(false);\n    const id = React.useMemo(() => nativeId || `select_${nanoid()}`, [nativeId]);\n    const inputRef = React.useRef<HTMLInputElement>(null);\n    const buttonId = `${id}-button`;\n    // support 'escape' resetting to the value that was set when the listbox opened\n    const [lastValue, setLastValue] = React.useState<ScrollableListItemValue | undefined>(value);\n\n    React.useEffect(() => {\n        setLastValue(value);\n    }, [open]);\n\n    React.useEffect(() => {\n        if (value === undefined) {\n            if (defaultValue !== undefined && findByValue(flattenedData, defaultValue)) {\n                setInputValueByRef(inputRef.current, defaultValue);\n            } else if (emptyValue !== undefined) {\n                setInputValueByRef(inputRef.current, emptyValue);\n            } else if (data.length > 0) {\n                setInputValueByRef(inputRef.current, data[0]?.value);\n            }\n        } else if (!multiselect && !findByValue(flattenedData, value)) {\n            if (emptyValue !== undefined) {\n                setInputValueByRef(inputRef.current, emptyValue);\n            } else if (data.length > 0) {\n                setInputValueByRef(inputRef.current, data[0]?.value);\n            }\n        }\n    }, []);\n\n    // event handlers\n    const handleButtonKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>): void => {\n        if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {\n            event.preventDefault();\n            setOpen(true);\n        }\n    };\n\n    const handleListboxKeyDown = (event: React.KeyboardEvent<HTMLElement>): void => {\n        switch (event.key) {\n            case 'Escape': {\n                event.preventDefault();\n                if (lastValue !== undefined) {\n                    setInputValueByRef(listboxInputRef.current, lastValue);\n                }\n\n                setOpen(false);\n                break;\n            }\n\n            case 'Tab':\n            case 'Enter': {\n                if (event.key !== 'Tab') {\n                    event.preventDefault();\n                }\n                setOpen(false);\n                break;\n            }\n\n            default:\n        }\n\n        if (otherProps.onKeyDown) {\n            otherProps.onKeyDown(event);\n        }\n    };\n\n    const handleListboxClick = (event: React.MouseEvent<HTMLLIElement>): void => {\n        event.preventDefault();\n        if (!multiselect) {\n            setOpen(false);\n            if (onBlur) {\n                onBlur(createCustomEvent('blur') as unknown as React.FocusEvent<HTMLElement, Element>);\n            }\n        }\n    };\n\n    let text: string | JSX.Element = '';\n    let more = 0;\n\n    if (value !== undefined) {\n        if (multiselect) {\n            const selectedValues = value?.toString().split(',') || [];\n\n            if (selectedValues.length === flattenedData.filter(item => !item.disabled).length) {\n                text = texts.select.allOptionsSelected;\n            } else {\n                text = findByValue(flattenedData, selectedValues[0])?.text ?? '';\n                more = selectedValues.length > 1 ? selectedValues.length - 1 : 0;\n            }\n        } else {\n            const item = findByValue(flattenedData, value);\n\n            if (item) {\n                text = item.icon ? (\n                    <>\n                        {React.cloneElement(item.icon, {\n                            className: cn(item.icon.props.className, 'mr-1 -mt-px'),\n                        })}\n                        {item.text}\n                    </>\n                ) : (\n                    item.text\n                );\n            }\n        }\n    }\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n        event.persist();\n\n        if (onChange) {\n            const item = findByValue(flattenedData, event.target.value);\n            (event as any).detail = sanitizeItem(item);\n\n            const indexes = item?.path?.split('.') ?? [];\n\n            if (indexes.length > 1) {\n                // we don't want to map the current item\n                indexes.pop();\n                // we need to rebuild the path as we map\n                let lastPath: string;\n\n                (event as any).detail.parents = indexes.map(i => {\n                    lastPath = lastPath ? [lastPath, i].join('.') : i;\n                    return sanitizeItem(flattenedData.find(i => i.path === lastPath));\n                });\n            }\n\n            onChange(event);\n        }\n    };\n\n    const handleButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n        if (readOnly) {\n            event.preventDefault();\n        }\n    };\n\n    // select the value text if the select is readonly\n    const handleButtonFocus = (event: React.FocusEvent<HTMLButtonElement>) => {\n        if (readOnly) {\n            const value = event.currentTarget.querySelector(':first-child');\n\n            if (value) {\n                window.getSelection()?.selectAllChildren?.(value);\n            }\n        }\n    };\n\n    const button: InternalButtonProps = {\n        'aria-haspopup': 'listbox' as const,\n        'aria-label': ariaLabel ? `${ariaLabel} ${text}` : undefined,\n        'aria-labelledby': ariaLabelledBy ? `${ariaLabelledBy} ${buttonId}` : undefined,\n        'aria-readonly': readOnly ? 'true' : undefined,\n        disabled: disabled,\n        id: buttonId,\n        onClick: handleButtonClick,\n        onFocus: handleButtonFocus,\n        onKeyDown: !disabled && !readOnly ? handleButtonKeyDown : undefined,\n        tabIndex,\n        type: 'button',\n    };\n\n    const listbox: InternalListboxProps = {\n        ...otherProps,\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n        data,\n        disabled,\n        emptyValue,\n        onBlur,\n        onClick: handleListboxClick,\n        onChange: event => {\n            setInputValueByRef(inputRef.current, event.target.value);\n        },\n        onKeyDown: handleListboxKeyDown,\n        ref: listboxInputRef,\n        value,\n    };\n\n    const input: InternalInputProps = {\n        onChange: handleInputChange,\n        ref: inputRef,\n        value: String(value ?? ''),\n    };\n\n    return {\n        button,\n        listbox,\n        input,\n        popover: {\n            open,\n            onOpenChange: setOpen,\n        },\n        text,\n        more,\n    };\n};\n"],"names":["_a","i","value"],"mappings":"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"}

package/dist/components/Table3/features/useTableEditing.d.ts

@@ -12,10 +12,10 @@ export declare function useTableEditing<TType = unknown>(isEnabled: boolean | un
     getRowStatus: (rowId: string) => ("saving" | "saved" | "errored") | undefined;
     setRowStatus: (rowId: string, status: ("saving" | "saved" | "errored") | undefined) => void;
     forceValidate: <T extends TType>(table: ReactTable<T>) => Promise<string[]>;
-    setCellValue: <T extends TType>(cell: import('@tanstack/react-table').Cell<T, unknown>, rowIndex: number, value: unknown) => void;
-    getCellValue: <T extends TType>(cell: import('@tanstack/react-table').Cell<T, unknown>) => unknown | undefined;
-    getCellError: <T extends TType>(cell: import('@tanstack/react-table').Cell<T, unknown>) => string | undefined;
-    onCellChanged: <T extends TType>(cell: import('@tanstack/react-table').Cell<T, unknown>, rowIndex: number, nextValue: any, shouldRunUpdaters?: boolean, shouldRunValidation?: boolean) => Promise<void>;
+    setCellValue: <T extends TType>(cell: import('@tanstack/table-core').Cell<T, unknown>, rowIndex: number, value: unknown) => void;
+    getCellValue: <T extends TType>(cell: import('@tanstack/table-core').Cell<T, unknown>) => unknown | undefined;
+    getCellError: <T extends TType>(cell: import('@tanstack/table-core').Cell<T, unknown>) => string | undefined;
+    onCellChanged: <T extends TType>(cell: import('@tanstack/table-core').Cell<T, unknown>, rowIndex: number, nextValue: any, shouldRunUpdaters?: boolean, shouldRunValidation?: boolean) => Promise<void>;
     getErrors: () => string[];
     getErrorsShownInAlert: <T extends TType>() => {
         rowId: string;

package/dist/components/Toast/Toast.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.cjs","sources":["../../../src/components/Toast/Toast.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { motion, useAnimation } from 'framer-motion';\nimport { useTimer } from '../../utils/hooks/useTimer';\nimport { getBadgeIcon, getToastEmptyContentWarning } from './util';\nimport { State } from '../../types';\nimport { useLocalization } from '../Provider/Localization';\nimport { IconButton } from '../IconButton/IconButton';\n\nexport type ToastsTexts = {\n    /** Aria-label for the close icon button of toast */\n    dismiss: string;\n};\n\nexport type ToastType = Omit<State, 'default'> | 'loading';\nexport type ToastOptions = {\n    /** Provide time in milliseconds after which the toast should autoclose */\n    autoClose?: number;\n    /**\n     * State will change the icon displayed in toast and other characteristics,\n     * for e.g. `loading` state will display a progress animation.\n     * Default value is `default`\n     */\n    type?: ToastType;\n};\nexport type ToastContent = Omit<React.ReactNode, 'null' | 'undefined'>;\nexport type ToastProps = {\n    /** Provide a unique id for toast */\n    id: string;\n    /**\n     * Content can be any valid react node, for e.g. a `div`, or a simple text.\n     */\n    content: ToastContent;\n    /** Additional options to define your toast */\n    options: ToastOptions;\n    /**\n     * Handler called when toast closes.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    onClose: () => void;\n    lastUpdated?: number;\n    lastDuplicateId?: string;\n};\n\nexport const Toast = ({ content, lastUpdated, onClose: handleClose, options, ...props }: ToastProps): JSX.Element => {\n    const { texts } = useLocalization();\n    const { autoClose, type = 'default' } = options;\n    const className = cn('bg-white relative flex items-center py-1 px-2 mt-3 w-full rounded yt-shadow print:hidden', {\n        'border border-gray-500': type === 'default' || type === 'loading' || !type,\n        'border border-green-500': type === 'success',\n        'border border-blue-500': type === 'information',\n        'border border-yellow-500': type === 'warning',\n        'border border-red-500': type === 'error',\n    });\n    const timer = useTimer(autoClose, handleClose);\n    const controls = useAnimation();\n\n    if (!content) {\n        // oxlint-disable-next-line no-console\n        console.warn(getToastEmptyContentWarning(content));\n    }\n\n    React.useEffect(() => {\n        if (autoClose) {\n            timer.start();\n        }\n    }, [autoClose]);\n\n    const triggerUpdateAnimation = async () => {\n        await controls.start({ scale: 1.05 });\n        await controls.start({ scale: 1 });\n    };\n\n    React.useEffect(() => {\n        if (lastUpdated) {\n            triggerUpdateAnimation();\n\n            if (timer.running) {\n                timer.start();\n            }\n        }\n    }, [lastUpdated]);\n\n    return (\n        <motion.div\n            {...props}\n            animate={controls}\n            className={className}\n            data-taco=\"toast\"\n            onMouseEnter={timer.pause}\n            onMouseLeave={timer.resume}>\n            {getBadgeIcon(type)}\n            <div className=\"flex-grow\">{content as React.ReactNode}</div>\n            <IconButton\n                appearance=\"discrete\"\n                className=\"-mr-2 cursor-pointer self-start !px-0 text-gray-700\"\n                icon=\"close\"\n                aria-label={texts.toasts.dismiss}\n                onClick={handleClose}\n            />\n        </motion.div>\n    );\n};\n"],"names":["useLocalization","useTimer","useAnimation","getToastEmptyContentWarning","motion","getBadgeIcon","IconButton"],"mappings":";;;;;;;;;AA4Ca,MAAA,QAAQ,CAAC,EAAE,SAAS,aAAa,SAAS,aAAa,SAAS,GAAG,YAAqC;AAC3G,QAAA,EAAE,MAAM,IAAIA,6BAAgB;AAClC,QAAM,EAAE,WAAW,OAAO,UAAc,IAAA;AAClC,QAAA,YAAY,GAAG,4FAA4F;AAAA,IAC7G,0BAA0B,SAAS,aAAa,SAAS,aAAa,CAAC;AAAA,IACvE,2BAA2B,SAAS;AAAA,IACpC,0BAA0B,SAAS;AAAA,IACnC,4BAA4B,SAAS;AAAA,IACrC,yBAAyB,SAAS;AAAA,EAAA,CACrC;AACK,QAAA,QAAQC,SAAAA,SAAS,WAAW,WAAW;AAC7C,QAAM,WAAWC,aAAAA,aAAa;AAE9B,MAAI,CAAC,SAAS;AAEF,YAAA,KAAKC,iCAA4B,OAAO,CAAC;AAAA,EAAA;AAGrD,QAAM,UAAU,MAAM;AAClB,QAAI,WAAW;AACX,YAAM,MAAM;AAAA,IAAA;AAAA,EAChB,GACD,CAAC,SAAS,CAAC;AAEd,QAAM,yBAAyB,YAAY;AACvC,UAAM,SAAS,MAAM,EAAE,OAAO,MAAM;AACpC,UAAM,SAAS,MAAM,EAAE,OAAO,GAAG;AAAA,EACrC;AAEA,QAAM,UAAU,MAAM;AAClB,QAAI,aAAa;AACU,6BAAA;AAEvB,UAAI,MAAM,SAAS;AACf,cAAM,MAAM;AAAA,MAAA;AAAA,IAChB;AAAA,EACJ,GACD,CAAC,WAAW,CAAC;AAGZ,SAAA,sBAAA;AAAA,IAACC,aAAAA,OAAO;AAAA,IAAP;AAAA,MACI,GAAG;AAAA,MACJ,SAAS;AAAA,MACT;AAAA,MACA,aAAU;AAAA,MACV,cAAc,MAAM;AAAA,MACpB,cAAc,MAAM;AAAA,IAAA;AAAA,IACnBC,KAAAA,aAAa,IAAI;AAAA,IACjB,sBAAA,cAAA,OAAA,EAAI,WAAU,YAAA,GAAa,OAA2B;AAAA,IACvD,sBAAA;AAAA,MAACC,WAAA;AAAA,MAAA;AAAA,QACG,YAAW;AAAA,QACX,WAAU;AAAA,QACV,MAAK;AAAA,QACL,cAAY,MAAM,OAAO;AAAA,QACzB,SAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAEjB;AAER;;"}
+{"version":3,"file":"Toast.cjs","sources":["../../../src/components/Toast/Toast.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { motion, useAnimation } from 'framer-motion';\nimport { useTimer } from '../../utils/hooks/useTimer';\nimport { getBadgeIcon, getToastEmptyContentWarning } from './util';\nimport type { State } from '../../types';\nimport { useLocalization } from '../Provider/Localization';\nimport { IconButton } from '../IconButton/IconButton';\n\nexport type ToastsTexts = {\n    /** Aria-label for the close icon button of toast */\n    dismiss: string;\n};\n\nexport type ToastType = Exclude<State, 'default'> | 'loading';\nexport type ToastOptions = {\n    /** Provide time in milliseconds after which the toast should autoclose */\n    autoClose?: number;\n    /**\n     * State will change the icon displayed in toast and other characteristics,\n     * for e.g. `loading` state will display a progress animation.\n     * Default value is `default`\n     */\n    type?: ToastType;\n};\nexport type ToastContent = Omit<React.ReactNode, 'null' | 'undefined'>;\nexport type ToastProps = {\n    /** Provide a unique id for toast */\n    id: string;\n    /**\n     * Content can be any valid react node, for e.g. a `div`, or a simple text.\n     */\n    content: ToastContent;\n    /** Additional options to define your toast */\n    options: ToastOptions;\n    /**\n     * Handler called when toast closes.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    onClose: () => void;\n    lastUpdated?: number;\n    lastDuplicateId?: string;\n};\n\nexport const Toast = ({ content, lastUpdated, onClose: handleClose, options, ...props }: ToastProps): JSX.Element => {\n    const { texts } = useLocalization();\n    const { autoClose, type = 'default' } = options;\n    const className = cn('bg-white relative flex items-center py-1 px-2 mt-3 w-full rounded yt-shadow print:hidden', {\n        'border border-gray-500': type === 'default' || type === 'loading' || !type,\n        'border border-green-500': type === 'success',\n        'border border-blue-500': type === 'information',\n        'border border-yellow-500': type === 'warning',\n        'border border-red-500': type === 'error',\n    });\n    const timer = useTimer(autoClose, handleClose);\n    const controls = useAnimation();\n\n    if (!content) {\n        // oxlint-disable-next-line no-console\n        console.warn(getToastEmptyContentWarning(content));\n    }\n\n    React.useEffect(() => {\n        if (autoClose) {\n            timer.start();\n        }\n    }, [autoClose]);\n\n    const triggerUpdateAnimation = async () => {\n        await controls.start({ scale: 1.05 });\n        await controls.start({ scale: 1 });\n    };\n\n    React.useEffect(() => {\n        if (lastUpdated) {\n            triggerUpdateAnimation();\n\n            if (timer.running) {\n                timer.start();\n            }\n        }\n    }, [lastUpdated]);\n\n    return (\n        <motion.div\n            {...props}\n            animate={controls}\n            className={className}\n            data-taco=\"toast\"\n            onMouseEnter={timer.pause}\n            onMouseLeave={timer.resume}>\n            {getBadgeIcon(type)}\n            <div className=\"flex-grow\">{content as React.ReactNode}</div>\n            <IconButton\n                appearance=\"discrete\"\n                className=\"-mr-2 cursor-pointer self-start !px-0 text-gray-700\"\n                icon=\"close\"\n                aria-label={texts.toasts.dismiss}\n                onClick={handleClose}\n            />\n        </motion.div>\n    );\n};\n"],"names":["useLocalization","useTimer","useAnimation","getToastEmptyContentWarning","motion","getBadgeIcon","IconButton"],"mappings":";;;;;;;;;AA4Ca,MAAA,QAAQ,CAAC,EAAE,SAAS,aAAa,SAAS,aAAa,SAAS,GAAG,YAAqC;AAC3G,QAAA,EAAE,MAAM,IAAIA,6BAAgB;AAClC,QAAM,EAAE,WAAW,OAAO,UAAc,IAAA;AAClC,QAAA,YAAY,GAAG,4FAA4F;AAAA,IAC7G,0BAA0B,SAAS,aAAa,SAAS,aAAa,CAAC;AAAA,IACvE,2BAA2B,SAAS;AAAA,IACpC,0BAA0B,SAAS;AAAA,IACnC,4BAA4B,SAAS;AAAA,IACrC,yBAAyB,SAAS;AAAA,EAAA,CACrC;AACK,QAAA,QAAQC,SAAAA,SAAS,WAAW,WAAW;AAC7C,QAAM,WAAWC,aAAAA,aAAa;AAE9B,MAAI,CAAC,SAAS;AAEF,YAAA,KAAKC,iCAA4B,OAAO,CAAC;AAAA,EAAA;AAGrD,QAAM,UAAU,MAAM;AAClB,QAAI,WAAW;AACX,YAAM,MAAM;AAAA,IAAA;AAAA,EAChB,GACD,CAAC,SAAS,CAAC;AAEd,QAAM,yBAAyB,YAAY;AACvC,UAAM,SAAS,MAAM,EAAE,OAAO,MAAM;AACpC,UAAM,SAAS,MAAM,EAAE,OAAO,GAAG;AAAA,EACrC;AAEA,QAAM,UAAU,MAAM;AAClB,QAAI,aAAa;AACU,6BAAA;AAEvB,UAAI,MAAM,SAAS;AACf,cAAM,MAAM;AAAA,MAAA;AAAA,IAChB;AAAA,EACJ,GACD,CAAC,WAAW,CAAC;AAGZ,SAAA,sBAAA;AAAA,IAACC,aAAAA,OAAO;AAAA,IAAP;AAAA,MACI,GAAG;AAAA,MACJ,SAAS;AAAA,MACT;AAAA,MACA,aAAU;AAAA,MACV,cAAc,MAAM;AAAA,MACpB,cAAc,MAAM;AAAA,IAAA;AAAA,IACnBC,KAAAA,aAAa,IAAI;AAAA,IACjB,sBAAA,cAAA,OAAA,EAAI,WAAU,YAAA,GAAa,OAA2B;AAAA,IACvD,sBAAA;AAAA,MAACC,WAAA;AAAA,MAAA;AAAA,QACG,YAAW;AAAA,QACX,WAAU;AAAA,QACV,MAAK;AAAA,QACL,cAAY,MAAM,OAAO;AAAA,QACzB,SAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAEjB;AAER;;"}

package/dist/components/Toast/Toast.d.ts

@@ -4,7 +4,7 @@ export type ToastsTexts = {
     /** Aria-label for the close icon button of toast */
     dismiss: string;
 };
-export type ToastType = Omit<State, 'default'> | 'loading';
+export type ToastType = Exclude<State, 'default'> | 'loading';
 export type ToastOptions = {
     /** Provide time in milliseconds after which the toast should autoclose */
     autoClose?: number;

package/dist/components/Toast/Toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.js","sources":["../../../src/components/Toast/Toast.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { motion, useAnimation } from 'framer-motion';\nimport { useTimer } from '../../utils/hooks/useTimer';\nimport { getBadgeIcon, getToastEmptyContentWarning } from './util';\nimport { State } from '../../types';\nimport { useLocalization } from '../Provider/Localization';\nimport { IconButton } from '../IconButton/IconButton';\n\nexport type ToastsTexts = {\n    /** Aria-label for the close icon button of toast */\n    dismiss: string;\n};\n\nexport type ToastType = Omit<State, 'default'> | 'loading';\nexport type ToastOptions = {\n    /** Provide time in milliseconds after which the toast should autoclose */\n    autoClose?: number;\n    /**\n     * State will change the icon displayed in toast and other characteristics,\n     * for e.g. `loading` state will display a progress animation.\n     * Default value is `default`\n     */\n    type?: ToastType;\n};\nexport type ToastContent = Omit<React.ReactNode, 'null' | 'undefined'>;\nexport type ToastProps = {\n    /** Provide a unique id for toast */\n    id: string;\n    /**\n     * Content can be any valid react node, for e.g. a `div`, or a simple text.\n     */\n    content: ToastContent;\n    /** Additional options to define your toast */\n    options: ToastOptions;\n    /**\n     * Handler called when toast closes.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    onClose: () => void;\n    lastUpdated?: number;\n    lastDuplicateId?: string;\n};\n\nexport const Toast = ({ content, lastUpdated, onClose: handleClose, options, ...props }: ToastProps): JSX.Element => {\n    const { texts } = useLocalization();\n    const { autoClose, type = 'default' } = options;\n    const className = cn('bg-white relative flex items-center py-1 px-2 mt-3 w-full rounded yt-shadow print:hidden', {\n        'border border-gray-500': type === 'default' || type === 'loading' || !type,\n        'border border-green-500': type === 'success',\n        'border border-blue-500': type === 'information',\n        'border border-yellow-500': type === 'warning',\n        'border border-red-500': type === 'error',\n    });\n    const timer = useTimer(autoClose, handleClose);\n    const controls = useAnimation();\n\n    if (!content) {\n        // oxlint-disable-next-line no-console\n        console.warn(getToastEmptyContentWarning(content));\n    }\n\n    React.useEffect(() => {\n        if (autoClose) {\n            timer.start();\n        }\n    }, [autoClose]);\n\n    const triggerUpdateAnimation = async () => {\n        await controls.start({ scale: 1.05 });\n        await controls.start({ scale: 1 });\n    };\n\n    React.useEffect(() => {\n        if (lastUpdated) {\n            triggerUpdateAnimation();\n\n            if (timer.running) {\n                timer.start();\n            }\n        }\n    }, [lastUpdated]);\n\n    return (\n        <motion.div\n            {...props}\n            animate={controls}\n            className={className}\n            data-taco=\"toast\"\n            onMouseEnter={timer.pause}\n            onMouseLeave={timer.resume}>\n            {getBadgeIcon(type)}\n            <div className=\"flex-grow\">{content as React.ReactNode}</div>\n            <IconButton\n                appearance=\"discrete\"\n                className=\"-mr-2 cursor-pointer self-start !px-0 text-gray-700\"\n                icon=\"close\"\n                aria-label={texts.toasts.dismiss}\n                onClick={handleClose}\n            />\n        </motion.div>\n    );\n};\n"],"names":["React"],"mappings":";;;;;;;AA4Ca,MAAA,QAAQ,CAAC,EAAE,SAAS,aAAa,SAAS,aAAa,SAAS,GAAG,YAAqC;AAC3G,QAAA,EAAE,MAAM,IAAI,gBAAgB;AAClC,QAAM,EAAE,WAAW,OAAO,UAAc,IAAA;AAClC,QAAA,YAAY,GAAG,4FAA4F;AAAA,IAC7G,0BAA0B,SAAS,aAAa,SAAS,aAAa,CAAC;AAAA,IACvE,2BAA2B,SAAS;AAAA,IACpC,0BAA0B,SAAS;AAAA,IACnC,4BAA4B,SAAS;AAAA,IACrC,yBAAyB,SAAS;AAAA,EAAA,CACrC;AACK,QAAA,QAAQ,SAAS,WAAW,WAAW;AAC7C,QAAM,WAAW,aAAa;AAE9B,MAAI,CAAC,SAAS;AAEF,YAAA,KAAK,4BAA4B,OAAO,CAAC;AAAA,EAAA;AAGrDA,iBAAM,UAAU,MAAM;AAClB,QAAI,WAAW;AACX,YAAM,MAAM;AAAA,IAAA;AAAA,EAChB,GACD,CAAC,SAAS,CAAC;AAEd,QAAM,yBAAyB,YAAY;AACvC,UAAM,SAAS,MAAM,EAAE,OAAO,MAAM;AACpC,UAAM,SAAS,MAAM,EAAE,OAAO,GAAG;AAAA,EACrC;AAEAA,iBAAM,UAAU,MAAM;AAClB,QAAI,aAAa;AACU,6BAAA;AAEvB,UAAI,MAAM,SAAS;AACf,cAAM,MAAM;AAAA,MAAA;AAAA,IAChB;AAAA,EACJ,GACD,CAAC,WAAW,CAAC;AAGZ,SAAAA,+BAAA;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACI,GAAG;AAAA,MACJ,SAAS;AAAA,MACT;AAAA,MACA,aAAU;AAAA,MACV,cAAc,MAAM;AAAA,MACpB,cAAc,MAAM;AAAA,IAAA;AAAA,IACnB,aAAa,IAAI;AAAA,IACjBA,+BAAA,cAAA,OAAA,EAAI,WAAU,YAAA,GAAa,OAA2B;AAAA,IACvDA,+BAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,YAAW;AAAA,QACX,WAAU;AAAA,QACV,MAAK;AAAA,QACL,cAAY,MAAM,OAAO;AAAA,QACzB,SAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAEjB;AAER;"}
+{"version":3,"file":"Toast.js","sources":["../../../src/components/Toast/Toast.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { motion, useAnimation } from 'framer-motion';\nimport { useTimer } from '../../utils/hooks/useTimer';\nimport { getBadgeIcon, getToastEmptyContentWarning } from './util';\nimport type { State } from '../../types';\nimport { useLocalization } from '../Provider/Localization';\nimport { IconButton } from '../IconButton/IconButton';\n\nexport type ToastsTexts = {\n    /** Aria-label for the close icon button of toast */\n    dismiss: string;\n};\n\nexport type ToastType = Exclude<State, 'default'> | 'loading';\nexport type ToastOptions = {\n    /** Provide time in milliseconds after which the toast should autoclose */\n    autoClose?: number;\n    /**\n     * State will change the icon displayed in toast and other characteristics,\n     * for e.g. `loading` state will display a progress animation.\n     * Default value is `default`\n     */\n    type?: ToastType;\n};\nexport type ToastContent = Omit<React.ReactNode, 'null' | 'undefined'>;\nexport type ToastProps = {\n    /** Provide a unique id for toast */\n    id: string;\n    /**\n     * Content can be any valid react node, for e.g. a `div`, or a simple text.\n     */\n    content: ToastContent;\n    /** Additional options to define your toast */\n    options: ToastOptions;\n    /**\n     * Handler called when toast closes.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    onClose: () => void;\n    lastUpdated?: number;\n    lastDuplicateId?: string;\n};\n\nexport const Toast = ({ content, lastUpdated, onClose: handleClose, options, ...props }: ToastProps): JSX.Element => {\n    const { texts } = useLocalization();\n    const { autoClose, type = 'default' } = options;\n    const className = cn('bg-white relative flex items-center py-1 px-2 mt-3 w-full rounded yt-shadow print:hidden', {\n        'border border-gray-500': type === 'default' || type === 'loading' || !type,\n        'border border-green-500': type === 'success',\n        'border border-blue-500': type === 'information',\n        'border border-yellow-500': type === 'warning',\n        'border border-red-500': type === 'error',\n    });\n    const timer = useTimer(autoClose, handleClose);\n    const controls = useAnimation();\n\n    if (!content) {\n        // oxlint-disable-next-line no-console\n        console.warn(getToastEmptyContentWarning(content));\n    }\n\n    React.useEffect(() => {\n        if (autoClose) {\n            timer.start();\n        }\n    }, [autoClose]);\n\n    const triggerUpdateAnimation = async () => {\n        await controls.start({ scale: 1.05 });\n        await controls.start({ scale: 1 });\n    };\n\n    React.useEffect(() => {\n        if (lastUpdated) {\n            triggerUpdateAnimation();\n\n            if (timer.running) {\n                timer.start();\n            }\n        }\n    }, [lastUpdated]);\n\n    return (\n        <motion.div\n            {...props}\n            animate={controls}\n            className={className}\n            data-taco=\"toast\"\n            onMouseEnter={timer.pause}\n            onMouseLeave={timer.resume}>\n            {getBadgeIcon(type)}\n            <div className=\"flex-grow\">{content as React.ReactNode}</div>\n            <IconButton\n                appearance=\"discrete\"\n                className=\"-mr-2 cursor-pointer self-start !px-0 text-gray-700\"\n                icon=\"close\"\n                aria-label={texts.toasts.dismiss}\n                onClick={handleClose}\n            />\n        </motion.div>\n    );\n};\n"],"names":["React"],"mappings":";;;;;;;AA4Ca,MAAA,QAAQ,CAAC,EAAE,SAAS,aAAa,SAAS,aAAa,SAAS,GAAG,YAAqC;AAC3G,QAAA,EAAE,MAAM,IAAI,gBAAgB;AAClC,QAAM,EAAE,WAAW,OAAO,UAAc,IAAA;AAClC,QAAA,YAAY,GAAG,4FAA4F;AAAA,IAC7G,0BAA0B,SAAS,aAAa,SAAS,aAAa,CAAC;AAAA,IACvE,2BAA2B,SAAS;AAAA,IACpC,0BAA0B,SAAS;AAAA,IACnC,4BAA4B,SAAS;AAAA,IACrC,yBAAyB,SAAS;AAAA,EAAA,CACrC;AACK,QAAA,QAAQ,SAAS,WAAW,WAAW;AAC7C,QAAM,WAAW,aAAa;AAE9B,MAAI,CAAC,SAAS;AAEF,YAAA,KAAK,4BAA4B,OAAO,CAAC;AAAA,EAAA;AAGrDA,iBAAM,UAAU,MAAM;AAClB,QAAI,WAAW;AACX,YAAM,MAAM;AAAA,IAAA;AAAA,EAChB,GACD,CAAC,SAAS,CAAC;AAEd,QAAM,yBAAyB,YAAY;AACvC,UAAM,SAAS,MAAM,EAAE,OAAO,MAAM;AACpC,UAAM,SAAS,MAAM,EAAE,OAAO,GAAG;AAAA,EACrC;AAEAA,iBAAM,UAAU,MAAM;AAClB,QAAI,aAAa;AACU,6BAAA;AAEvB,UAAI,MAAM,SAAS;AACf,cAAM,MAAM;AAAA,MAAA;AAAA,IAChB;AAAA,EACJ,GACD,CAAC,WAAW,CAAC;AAGZ,SAAAA,+BAAA;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACI,GAAG;AAAA,MACJ,SAAS;AAAA,MACT;AAAA,MACA,aAAU;AAAA,MACV,cAAc,MAAM;AAAA,MACpB,cAAc,MAAM;AAAA,IAAA;AAAA,IACnB,aAAa,IAAI;AAAA,IACjBA,+BAAA,cAAA,OAAA,EAAI,WAAU,YAAA,GAAa,OAA2B;AAAA,IACvDA,+BAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,YAAW;AAAA,QACX,WAAU;AAAA,QACV,MAAK;AAAA,QACL,cAAY,MAAM,OAAO;AAAA,QACzB,SAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAEjB;AAER;"}

package/dist/components/Toast/util.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"util.cjs","sources":["../../../src/components/Toast/util.tsx"],"sourcesContent":["import React from 'react';\nimport { Spinner } from '../Spinner/Spinner';\nimport { ToastContent, ToastType } from './Toast';\nimport { BadgeIcon } from '../BadgeIcon/BadgeIcon';\n\nexport const getBadgeIcon = (type: ToastType): JSX.Element | null => {\n    return (\n        <div className=\"mr-2 mt-[5px] flex-shrink-0 self-start\">\n            {(() => {\n                switch (type) {\n                    case 'success':\n                        return <BadgeIcon icon=\"tick\" color=\"green\" />;\n                    case 'error':\n                        return <BadgeIcon icon=\"close\" color=\"red\" />;\n                    case 'warning':\n                        return <BadgeIcon icon=\"warning\" color=\"yellow\" />;\n                    case 'information':\n                        return <BadgeIcon icon=\"info\" color=\"blue\" />;\n                    case 'loading':\n                        return <Spinner delay={0} className=\"h-5 w-5\" />;\n                    default:\n                        return null;\n                }\n            })()}\n        </div>\n    );\n};\n\nexport const getToastEmptyContentWarning = (content?: ToastContent) =>\n    `Toast requires 'content' property, which can't be empty string, null or undefined. Current content value is set to ${\n        content === '' ? 'empty string' : content\n    }.`;\n"],"names":["BadgeIcon","Spinner"],"mappings":";;;;;AAKa,MAAA,eAAe,CAAC,SAAwC;AACjE,SACK,sBAAA,cAAA,OAAA,EAAI,WAAU,yCAAA,IACT,MAAM;AACJ,YAAQ,MAAM;AAAA,MACV,KAAK;AACD,eAAQ,sBAAA,cAAAA,qBAAA,EAAU,MAAK,QAAO,OAAM,SAAQ;AAAA,MAChD,KAAK;AACD,eAAQ,sBAAA,cAAAA,qBAAA,EAAU,MAAK,SAAQ,OAAM,OAAM;AAAA,MAC/C,KAAK;AACD,eAAQ,sBAAA,cAAAA,qBAAA,EAAU,MAAK,WAAU,OAAM,UAAS;AAAA,MACpD,KAAK;AACD,eAAQ,sBAAA,cAAAA,qBAAA,EAAU,MAAK,QAAO,OAAM,QAAO;AAAA,MAC/C,KAAK;AACD,eAAQ,sBAAA,cAAAC,iBAAA,EAAQ,OAAO,GAAG,WAAU,WAAU;AAAA,MAClD;AACW,eAAA;AAAA,IAAA;AAAA,EACf,IAER;AAER;AAEO,MAAM,8BAA8B,CAAC,YACxC,sHACI,YAAY,KAAK,iBAAiB,OACtC;;;"}
+{"version":3,"file":"util.cjs","sources":["../../../src/components/Toast/util.tsx"],"sourcesContent":["import React from 'react';\nimport { Spinner } from '../Spinner/Spinner';\nimport { ToastContent, ToastType } from './Toast';\nimport { BadgeIcon } from '../BadgeIcon/BadgeIcon';\n\nexport const getBadgeIcon = (type: ToastType | 'default'): JSX.Element | null => {\n    return (\n        <div className=\"mr-2 mt-[5px] flex-shrink-0 self-start\">\n            {(() => {\n                switch (type) {\n                    case 'success':\n                        return <BadgeIcon icon=\"tick\" color=\"green\" />;\n                    case 'error':\n                        return <BadgeIcon icon=\"close\" color=\"red\" />;\n                    case 'warning':\n                        return <BadgeIcon icon=\"warning\" color=\"yellow\" />;\n                    case 'information':\n                        return <BadgeIcon icon=\"info\" color=\"blue\" />;\n                    case 'loading':\n                        return <Spinner delay={0} className=\"h-5 w-5\" />;\n                    default:\n                        return null;\n                }\n            })()}\n        </div>\n    );\n};\n\nexport const getToastEmptyContentWarning = (content?: ToastContent) =>\n    `Toast requires 'content' property, which can't be empty string, null or undefined. Current content value is set to ${\n        content === '' ? 'empty string' : content\n    }.`;\n"],"names":["BadgeIcon","Spinner"],"mappings":";;;;;AAKa,MAAA,eAAe,CAAC,SAAoD;AAC7E,SACK,sBAAA,cAAA,OAAA,EAAI,WAAU,yCAAA,IACT,MAAM;AACJ,YAAQ,MAAM;AAAA,MACV,KAAK;AACD,eAAQ,sBAAA,cAAAA,qBAAA,EAAU,MAAK,QAAO,OAAM,SAAQ;AAAA,MAChD,KAAK;AACD,eAAQ,sBAAA,cAAAA,qBAAA,EAAU,MAAK,SAAQ,OAAM,OAAM;AAAA,MAC/C,KAAK;AACD,eAAQ,sBAAA,cAAAA,qBAAA,EAAU,MAAK,WAAU,OAAM,UAAS;AAAA,MACpD,KAAK;AACD,eAAQ,sBAAA,cAAAA,qBAAA,EAAU,MAAK,QAAO,OAAM,QAAO;AAAA,MAC/C,KAAK;AACD,eAAQ,sBAAA,cAAAC,iBAAA,EAAQ,OAAO,GAAG,WAAU,WAAU;AAAA,MAClD;AACW,eAAA;AAAA,IAAA;AAAA,EACf,IAER;AAER;AAEO,MAAM,8BAA8B,CAAC,YACxC,sHACI,YAAY,KAAK,iBAAiB,OACtC;;;"}

package/dist/components/Toast/util.d.ts

@@ -1,3 +1,3 @@
 import { ToastContent, ToastType } from './Toast';
-export declare const getBadgeIcon: (type: ToastType) => JSX.Element | null;
+export declare const getBadgeIcon: (type: ToastType | "default") => JSX.Element | null;
 export declare const getToastEmptyContentWarning: (content?: ToastContent) => string;

package/dist/components/Toast/util.js.map

@@ -1 +1 @@
-{"version":3,"file":"util.js","sources":["../../../src/components/Toast/util.tsx"],"sourcesContent":["import React from 'react';\nimport { Spinner } from '../Spinner/Spinner';\nimport { ToastContent, ToastType } from './Toast';\nimport { BadgeIcon } from '../BadgeIcon/BadgeIcon';\n\nexport const getBadgeIcon = (type: ToastType): JSX.Element | null => {\n    return (\n        <div className=\"mr-2 mt-[5px] flex-shrink-0 self-start\">\n            {(() => {\n                switch (type) {\n                    case 'success':\n                        return <BadgeIcon icon=\"tick\" color=\"green\" />;\n                    case 'error':\n                        return <BadgeIcon icon=\"close\" color=\"red\" />;\n                    case 'warning':\n                        return <BadgeIcon icon=\"warning\" color=\"yellow\" />;\n                    case 'information':\n                        return <BadgeIcon icon=\"info\" color=\"blue\" />;\n                    case 'loading':\n                        return <Spinner delay={0} className=\"h-5 w-5\" />;\n                    default:\n                        return null;\n                }\n            })()}\n        </div>\n    );\n};\n\nexport const getToastEmptyContentWarning = (content?: ToastContent) =>\n    `Toast requires 'content' property, which can't be empty string, null or undefined. Current content value is set to ${\n        content === '' ? 'empty string' : content\n    }.`;\n"],"names":["React"],"mappings":";;;AAKa,MAAA,eAAe,CAAC,SAAwC;AACjE,SACKA,+BAAA,cAAA,OAAA,EAAI,WAAU,yCAAA,IACT,MAAM;AACJ,YAAQ,MAAM;AAAA,MACV,KAAK;AACD,eAAQA,+BAAA,cAAA,WAAA,EAAU,MAAK,QAAO,OAAM,SAAQ;AAAA,MAChD,KAAK;AACD,eAAQA,+BAAA,cAAA,WAAA,EAAU,MAAK,SAAQ,OAAM,OAAM;AAAA,MAC/C,KAAK;AACD,eAAQA,+BAAA,cAAA,WAAA,EAAU,MAAK,WAAU,OAAM,UAAS;AAAA,MACpD,KAAK;AACD,eAAQA,+BAAA,cAAA,WAAA,EAAU,MAAK,QAAO,OAAM,QAAO;AAAA,MAC/C,KAAK;AACD,eAAQA,+BAAA,cAAA,SAAA,EAAQ,OAAO,GAAG,WAAU,WAAU;AAAA,MAClD;AACW,eAAA;AAAA,IAAA;AAAA,EACf,IAER;AAER;AAEO,MAAM,8BAA8B,CAAC,YACxC,sHACI,YAAY,KAAK,iBAAiB,OACtC;"}
+{"version":3,"file":"util.js","sources":["../../../src/components/Toast/util.tsx"],"sourcesContent":["import React from 'react';\nimport { Spinner } from '../Spinner/Spinner';\nimport { ToastContent, ToastType } from './Toast';\nimport { BadgeIcon } from '../BadgeIcon/BadgeIcon';\n\nexport const getBadgeIcon = (type: ToastType | 'default'): JSX.Element | null => {\n    return (\n        <div className=\"mr-2 mt-[5px] flex-shrink-0 self-start\">\n            {(() => {\n                switch (type) {\n                    case 'success':\n                        return <BadgeIcon icon=\"tick\" color=\"green\" />;\n                    case 'error':\n                        return <BadgeIcon icon=\"close\" color=\"red\" />;\n                    case 'warning':\n                        return <BadgeIcon icon=\"warning\" color=\"yellow\" />;\n                    case 'information':\n                        return <BadgeIcon icon=\"info\" color=\"blue\" />;\n                    case 'loading':\n                        return <Spinner delay={0} className=\"h-5 w-5\" />;\n                    default:\n                        return null;\n                }\n            })()}\n        </div>\n    );\n};\n\nexport const getToastEmptyContentWarning = (content?: ToastContent) =>\n    `Toast requires 'content' property, which can't be empty string, null or undefined. Current content value is set to ${\n        content === '' ? 'empty string' : content\n    }.`;\n"],"names":["React"],"mappings":";;;AAKa,MAAA,eAAe,CAAC,SAAoD;AAC7E,SACKA,+BAAA,cAAA,OAAA,EAAI,WAAU,yCAAA,IACT,MAAM;AACJ,YAAQ,MAAM;AAAA,MACV,KAAK;AACD,eAAQA,+BAAA,cAAA,WAAA,EAAU,MAAK,QAAO,OAAM,SAAQ;AAAA,MAChD,KAAK;AACD,eAAQA,+BAAA,cAAA,WAAA,EAAU,MAAK,SAAQ,OAAM,OAAM;AAAA,MAC/C,KAAK;AACD,eAAQA,+BAAA,cAAA,WAAA,EAAU,MAAK,WAAU,OAAM,UAAS;AAAA,MACpD,KAAK;AACD,eAAQA,+BAAA,cAAA,WAAA,EAAU,MAAK,QAAO,OAAM,QAAO;AAAA,MAC/C,KAAK;AACD,eAAQA,+BAAA,cAAA,SAAA,EAAQ,OAAO,GAAG,WAAU,WAAU;AAAA,MAClD;AACW,eAAA;AAAA,IAAA;AAAA,EACf,IAER;AAER;AAEO,MAAM,8BAA8B,CAAC,YACxC,sHACI,YAAY,KAAK,iBAAiB,OACtC;"}

package/dist/hooks/useTacoSettings.d.ts

@@ -1 +1 @@
-export declare function useTacoSettings(): import('../components/Provider/Provider').TacoSettings;
+export declare function useTacoSettings(): import('..').TacoSettings;

package/dist/primitives/Table/useTableManager/useTableManager.d.ts

@@ -64,7 +64,7 @@ declare module '@tanstack/table-core' {
 }
 export declare function useTableManager<TType = unknown, TMeta = object>(props: TableProps<TType>, ref: React.RefObject<TableRef>, meta?: Partial<ReactTableMeta<TType>> & TMeta, internalColumns?: useTableManagerInternalColumns<TType>): {
     id: string;
-    instance: import('@tanstack/react-table').Table<TType>;
+    instance: import('@tanstack/table-core').Table<TType>;
     meta: ReactTableMeta<TType> & TMeta;
-    state: import('@tanstack/react-table').TableState;
+    state: import('@tanstack/table-core').TableState;
 };

package/dist/primitives/Table/useTableManager/util/settings.d.ts

@@ -1,12 +1,12 @@
 import { ColumnSizingState, Table as ReactTable } from '@tanstack/react-table';
 export declare function getSettings<TType = unknown>(table: ReactTable<TType>): {
-    columnOrder: import('@tanstack/react-table').ColumnOrderState | undefined;
-    columnPinning: import('@tanstack/react-table').ColumnPinningState;
+    columnOrder: import('@tanstack/table-core').ColumnOrderState | undefined;
+    columnPinning: import('@tanstack/table-core').ColumnPinningState;
     columnSizing: {};
-    columnVisibility: import('@tanstack/react-table').VisibilityState | undefined;
+    columnVisibility: import('@tanstack/table-core').VisibilityState | undefined;
     excludeUnmatchedRecordsInSearch: boolean | undefined;
     fontSize: "small" | "medium" | "large" | undefined;
     rowHeight: import('../../types').TableRowHeight | undefined;
-    sorting: import('@tanstack/react-table').SortingState;
+    sorting: import('@tanstack/table-core').SortingState;
 };
 export declare function ignoreInternalColumns(data: ColumnSizingState): {};

package/dist/utils/storyutils.d.ts

@@ -4,5 +4,5 @@ export declare const createFakeData: (creator: (faker: Faker) => any, ...length:
 export declare const getRandomNumber: (max: number, min?: number) => number;
 export declare const iconNames: string[];
 export declare const generateId: () => string;
-export declare const sleep: (ms: number) => Promise<unknown>;
+export declare const sleep: (ms: number) => Promise<void>;
 export { sort };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@economic/taco",
-    "version": "8.1.3-alpha.0",
+    "version": "8.1.4-hanger-base-ui-migration.0",
     "license": "MIT",
     "type": "module",
     "main": "./dist/index.cjs",
@@ -29,13 +29,16 @@
         "scripts/stylelint-plugin"
     ],
     "scripts": {
-        "build": "npx tsc --noEmit && vite build",
+        "build": "vite build",
+        "prebuild": "npx tsc --noEmit",
         "test": "vitest run",
+        "test:watch": "vitest",
         "lint": "npm run lint:styles && oxlint --quiet",
         "lint:styles": "stylelint \"src/**/*.css\" --config ./stylelint.config.mjs --allow-empty-input",
         "pree2e": "npx playwright install chromium --with-deps",
         "e2e": "npx playwright test",
-        "generate-icons": "node scripts/generate-icons.cjs"
+        "generate-icons": "node scripts/generate-icons.cjs",
+        "typecheck": "npx tsc --noEmit"
     },
     "dependencies": {
         "@base-ui/react": "1.5.0",
@@ -43,8 +46,7 @@
         "@dnd-kit/modifiers": "^7.0.0",
         "@dnd-kit/sortable": "^7.0.2",
         "@dnd-kit/utilities": "^3.2.2",
-        "@economic/taco-tokens": "^2.2.5-alpha.0",
-        "@radix-ui/react-popover": "1.0.2",
+        "@economic/taco-tokens": "^2.2.6-hanger-base-ui-migration.0",
         "@radix-ui/react-scroll-area": "1.2.10",
         "@react-aria/focus": "^3.19.0",
         "@react-aria/interactions": "^3.12.0",
@@ -54,7 +56,7 @@
         "date-fns": "^3.6.0",
         "framer-motion": "12.38.0",
         "lodash": "^4.17.21",
-        "nanoid": "^5.1.11",
+        "nanoid": "^5.1.15",
         "react-aria-components": "^1.7.1",
         "react-day-picker": "^9.11.0",
         "react-intersection-observer": "^9.4.0",
@@ -71,13 +73,13 @@
         "tailwindcss": ">=3.4.19"
     },
     "devDependencies": {
-        "@oxlint/plugins": "^1.69.0",
+        "@oxlint/plugins": "^1.70.0",
         "@svgr/cli": "^5.5.0",
         "@testing-library/jest-dom": "6.9.1",
         "@testing-library/react": "16.3.2",
         "@testing-library/user-event": "14.6.1",
         "@types/lodash": "^4.17.24",
-        "@types/node": "^22.19.21",
+        "@types/node": "^22.20.0",
         "@types/react": "18.3.31",
         "@types/react-dom": "18.3.7",
         "@types/react-table": "^7.7.20",
@@ -97,7 +99,7 @@
         "vitest": "^3.2.6"
     },
     "optionalDependencies": {
-        "@rollup/rollup-linux-x64-gnu": "^4.62.0"
+        "@rollup/rollup-linux-x64-gnu": "^4.62.2"
     },
-    "gitHead": "e2b2169e5fbc9a76f671e2eac5b6532a2e68336a"
+    "gitHead": "7313e299dd784f75e596baa8d386d5a5be1a2b5f"
 }