@economic/taco 8.1.3 → 8.2.0-alpha-core-actions.0

package/dist/charts/components/Legend.cjs

@@ -2,7 +2,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 const cn = require("clsx");
-const Button = require("../../components/Button/Button.cjs");
+;/* empty css                     */
+require("@economic/taco-tokens/tokens.css");
+require("@economic/taco-tokens");
+const Button = require("../../components/LegacyComponents/Button/Button.cjs");
 const Icon = require("../../components/Icon/Icon.cjs");
 const OverflowGroup = require("../../components/OverflowGroup/OverflowGroup.cjs");
 function Legend(props) {
@@ -20,7 +23,7 @@ function Legend(props) {
     }
     handleToggle(item.dataKey);
   };
-  const moreButton = (moreButtonText) => /* @__PURE__ */ React.createElement(Button.Button, { appearance: "transparent", className: "!h-5 !min-h-[1.25rem] !px-1.5 text-xs text-gray-700" }, moreButtonText);
+  const moreButton = (moreButtonText) => /* @__PURE__ */ React.createElement(Button.LegacyButton, { appearance: "transparent", className: "!h-5 !min-h-[1.25rem] !px-1.5 text-xs text-gray-700" }, moreButtonText);
   return /* @__PURE__ */ React.createElement(OverflowGroup.OverflowGroup, { className: "mt-3 w-full gap-x-1", moreButton }, items.map((item, index) => {
     const className = cn.clsx("mr-1 flex h-3 w-3 rounded-sm", {
       border: item.isHidden

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

@@ -1 +1 @@
-{"version":3,"file":"Legend.cjs","sources":["../../../src/charts/components/Legend.tsx"],"sourcesContent":["import React from 'react';\nimport { clsx } from 'clsx';\nimport { Button } from '../../components/Button/Button';\nimport { Icon } from '../../components/Icon/Icon';\nimport { OverflowGroup } from '../../components/OverflowGroup/OverflowGroup';\nimport { ChartChildProps } from './types';\n\nexport interface LegendProps<TData extends object> {\n    items: ChartChildProps<TData>[];\n    hoverIndex: number | undefined;\n    onHover: (index: number | undefined) => void;\n    onToggle: (name: keyof TData) => void;\n}\n\nexport function Legend<TData extends object>(props: LegendProps<TData>) {\n    const { hoverIndex, items, onHover: handleHover, onToggle: handleToggle } = props;\n\n    const handleMouseEnter = (item: ChartChildProps<TData>, index: number) => {\n        if (item.isHidden) {\n            return;\n        }\n\n        handleHover(index);\n    };\n    const handleMouseLeave = () => handleHover(undefined);\n\n    const handleClick = (item: ChartChildProps<TData>) => {\n        // remove hover if hiding the item\n        if (!item.isHidden) {\n            handleHover(undefined);\n        }\n\n        handleToggle(item.dataKey);\n    };\n\n    const moreButton = (moreButtonText: string) => (\n        <Button appearance=\"transparent\" className=\"!h-5 !min-h-[1.25rem] !px-1.5 text-xs text-gray-700\">\n            {moreButtonText}\n        </Button>\n    );\n\n    return (\n        <OverflowGroup className=\"mt-3 w-full gap-x-1\" moreButton={moreButton}>\n            {items.map((item, index) => {\n                const className = clsx('mr-1 flex h-3 w-3 rounded-sm', {\n                    border: item.isHidden,\n                });\n                let style;\n\n                if (!item.isHidden) {\n                    style = { backgroundColor: item.color };\n                }\n\n                return (\n                    <button\n                        key={`${item.label}_${index}`}\n                        className=\"focus-visible:yt-focus flex items-center rounded px-1 !text-xs hover:bg-gray-200\"\n                        onClick={event => {\n                            event?.preventDefault();\n                            handleClick(item);\n                        }}\n                        onMouseEnter={() => handleMouseEnter(item, index)}\n                        onMouseLeave={() => handleMouseLeave()}>\n                        <span className={className} style={style}>\n                            {hoverIndex === index ? (\n                                <Icon name=\"tick-bold\" className={clsx('!h-full !w-full', { 'text-white': !item.isHidden })} />\n                            ) : null}\n                        </span>\n                        {item.label}\n                    </button>\n                );\n            })}\n        </OverflowGroup>\n    );\n}\n"],"names":["Button","OverflowGroup","clsx","Icon"],"mappings":";;;;;;;AAcO,SAAS,OAA6B,OAA2B;AACpE,QAAM,EAAE,YAAY,OAAO,SAAS,aAAa,UAAU,iBAAiB;AAEtE,QAAA,mBAAmB,CAAC,MAA8B,UAAkB;AACtE,QAAI,KAAK,UAAU;AACf;AAAA,IAAA;AAGJ,gBAAY,KAAK;AAAA,EACrB;AACM,QAAA,mBAAmB,MAAM,YAAY,MAAS;AAE9C,QAAA,cAAc,CAAC,SAAiC;AAE9C,QAAA,CAAC,KAAK,UAAU;AAChB,kBAAY,MAAS;AAAA,IAAA;AAGzB,iBAAa,KAAK,OAAO;AAAA,EAC7B;AAEM,QAAA,aAAa,CAAC,mBAChB,sBAAA,cAACA,OAAAA,UAAO,YAAW,eAAc,WAAU,sDAAA,GACtC,cACL;AAIA,SAAA,sBAAA,cAACC,+BAAc,WAAU,uBAAsB,cAC1C,MAAM,IAAI,CAAC,MAAM,UAAU;AAClB,UAAA,YAAYC,QAAK,gCAAgC;AAAA,MACnD,QAAQ,KAAK;AAAA,IAAA,CAChB;AACG,QAAA;AAEA,QAAA,CAAC,KAAK,UAAU;AACR,cAAA,EAAE,iBAAiB,KAAK,MAAM;AAAA,IAAA;AAItC,WAAA,sBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,KAAK,GAAG,KAAK,KAAK,IAAI,KAAK;AAAA,QAC3B,WAAU;AAAA,QACV,SAAS,CAAS,UAAA;AACd,yCAAO;AACP,sBAAY,IAAI;AAAA,QACpB;AAAA,QACA,cAAc,MAAM,iBAAiB,MAAM,KAAK;AAAA,QAChD,cAAc,MAAM,iBAAiB;AAAA,MAAA;AAAA,MACrC,sBAAA,cAAC,UAAK,WAAsB,SACvB,eAAe,QACZ,sBAAA,cAACC,KAAAA,QAAK,MAAK,aAAY,WAAWD,QAAK,mBAAmB,EAAE,cAAc,CAAC,KAAK,SAAS,CAAC,EAAG,CAAA,IAC7F,IACR;AAAA,MACC,KAAK;AAAA,IACV;AAAA,EAAA,CAEP,CACL;AAER;;"}
+{"version":3,"file":"Legend.cjs","sources":["../../../src/charts/components/Legend.tsx"],"sourcesContent":["import React from 'react';\nimport { clsx } from 'clsx';\nimport { LegacyButton, Icon, OverflowGroup } from '../../index';\nimport { ChartChildProps } from './types';\n\nexport interface LegendProps<TData extends object> {\n    items: ChartChildProps<TData>[];\n    hoverIndex: number | undefined;\n    onHover: (index: number | undefined) => void;\n    onToggle: (name: keyof TData) => void;\n}\n\nexport function Legend<TData extends object>(props: LegendProps<TData>) {\n    const { hoverIndex, items, onHover: handleHover, onToggle: handleToggle } = props;\n\n    const handleMouseEnter = (item: ChartChildProps<TData>, index: number) => {\n        if (item.isHidden) {\n            return;\n        }\n\n        handleHover(index);\n    };\n    const handleMouseLeave = () => handleHover(undefined);\n\n    const handleClick = (item: ChartChildProps<TData>) => {\n        // remove hover if hiding the item\n        if (!item.isHidden) {\n            handleHover(undefined);\n        }\n\n        handleToggle(item.dataKey);\n    };\n\n    const moreButton = (moreButtonText: string) => (\n        <LegacyButton appearance=\"transparent\" className=\"!h-5 !min-h-[1.25rem] !px-1.5 text-xs text-gray-700\">\n            {moreButtonText}\n        </LegacyButton>\n    );\n\n    return (\n        <OverflowGroup className=\"mt-3 w-full gap-x-1\" moreButton={moreButton}>\n            {items.map((item, index) => {\n                const className = clsx('mr-1 flex h-3 w-3 rounded-sm', {\n                    border: item.isHidden,\n                });\n                let style;\n\n                if (!item.isHidden) {\n                    style = { backgroundColor: item.color };\n                }\n\n                return (\n                    <button\n                        key={`${item.label}_${index}`}\n                        className=\"focus-visible:yt-focus flex items-center rounded px-1 !text-xs hover:bg-gray-200\"\n                        onClick={event => {\n                            event?.preventDefault();\n                            handleClick(item);\n                        }}\n                        onMouseEnter={() => handleMouseEnter(item, index)}\n                        onMouseLeave={() => handleMouseLeave()}>\n                        <span className={className} style={style}>\n                            {hoverIndex === index ? (\n                                <Icon name=\"tick-bold\" className={clsx('!h-full !w-full', { 'text-white': !item.isHidden })} />\n                            ) : null}\n                        </span>\n                        {item.label}\n                    </button>\n                );\n            })}\n        </OverflowGroup>\n    );\n}\n"],"names":["LegacyButton","OverflowGroup","clsx","Icon"],"mappings":";;;;;;;;;;AAYO,SAAS,OAA6B,OAA2B;AACpE,QAAM,EAAE,YAAY,OAAO,SAAS,aAAa,UAAU,iBAAiB;AAEtE,QAAA,mBAAmB,CAAC,MAA8B,UAAkB;AACtE,QAAI,KAAK,UAAU;AACf;AAAA,IAAA;AAGJ,gBAAY,KAAK;AAAA,EACrB;AACM,QAAA,mBAAmB,MAAM,YAAY,MAAS;AAE9C,QAAA,cAAc,CAAC,SAAiC;AAE9C,QAAA,CAAC,KAAK,UAAU;AAChB,kBAAY,MAAS;AAAA,IAAA;AAGzB,iBAAa,KAAK,OAAO;AAAA,EAC7B;AAEM,QAAA,aAAa,CAAC,mBAChB,sBAAA,cAACA,OAAAA,gBAAa,YAAW,eAAc,WAAU,sDAAA,GAC5C,cACL;AAIA,SAAA,sBAAA,cAACC,+BAAc,WAAU,uBAAsB,cAC1C,MAAM,IAAI,CAAC,MAAM,UAAU;AAClB,UAAA,YAAYC,QAAK,gCAAgC;AAAA,MACnD,QAAQ,KAAK;AAAA,IAAA,CAChB;AACG,QAAA;AAEA,QAAA,CAAC,KAAK,UAAU;AACR,cAAA,EAAE,iBAAiB,KAAK,MAAM;AAAA,IAAA;AAItC,WAAA,sBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,KAAK,GAAG,KAAK,KAAK,IAAI,KAAK;AAAA,QAC3B,WAAU;AAAA,QACV,SAAS,CAAS,UAAA;AACd,yCAAO;AACP,sBAAY,IAAI;AAAA,QACpB;AAAA,QACA,cAAc,MAAM,iBAAiB,MAAM,KAAK;AAAA,QAChD,cAAc,MAAM,iBAAiB;AAAA,MAAA;AAAA,MACrC,sBAAA,cAAC,UAAK,WAAsB,SACvB,eAAe,QACZ,sBAAA,cAACC,KAAAA,QAAK,MAAK,aAAY,WAAWD,QAAK,mBAAmB,EAAE,cAAc,CAAC,KAAK,SAAS,CAAC,EAAG,CAAA,IAC7F,IACR;AAAA,MACC,KAAK;AAAA,IACV;AAAA,EAAA,CAEP,CACL;AAER;;"}

package/dist/charts/components/Legend.js

@@ -1,6 +1,9 @@
 import React__default from "react";
 import { clsx } from "clsx";
-import { Button } from "../../components/Button/Button.js";
+/* empty css                   */
+import "@economic/taco-tokens/tokens.css";
+import "@economic/taco-tokens";
+import { LegacyButton } from "../../components/LegacyComponents/Button/Button.js";
 import { Icon } from "../../components/Icon/Icon.js";
 import { OverflowGroup } from "../../components/OverflowGroup/OverflowGroup.js";
 function Legend(props) {
@@ -18,7 +21,7 @@ function Legend(props) {
     }
     handleToggle(item.dataKey);
   };
-  const moreButton = (moreButtonText) => /* @__PURE__ */ React__default.createElement(Button, { appearance: "transparent", className: "!h-5 !min-h-[1.25rem] !px-1.5 text-xs text-gray-700" }, moreButtonText);
+  const moreButton = (moreButtonText) => /* @__PURE__ */ React__default.createElement(LegacyButton, { appearance: "transparent", className: "!h-5 !min-h-[1.25rem] !px-1.5 text-xs text-gray-700" }, moreButtonText);
   return /* @__PURE__ */ React__default.createElement(OverflowGroup, { className: "mt-3 w-full gap-x-1", moreButton }, items.map((item, index) => {
     const className = clsx("mr-1 flex h-3 w-3 rounded-sm", {
       border: item.isHidden

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

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

package/dist/components/Actions/Button/Button.d.ts

@@ -0,0 +1,46 @@
+import { ButtonSize, ButtonPurpose, ButtonVariant } from './../utils';
+import { IconName } from '../../Icon/Icon';
+import * as React from 'react';
+export type ButtonTexts = {
+    busyMsg: string;
+};
+/**
+ * Button Text: string text (literals, template literals, i18n helpers that return `string`, string constants),
+ * or a single React element—typically a component whose output is text-only.
+ */
+export type ButtonChildren = string | React.ReactElement;
+type IconProps = {
+    icon: IconName;
+    iconPlacement?: 'start' | 'end';
+    iconOnly?: never;
+} | {
+    icon: IconName;
+    iconOnly: true;
+    iconPlacement?: never;
+} | {
+    icon?: never;
+    iconPlacement?: never;
+    iconOnly?: never;
+};
+export type ButtonIdleProps = ButtonCommonProps & {
+    busy?: boolean;
+    busyMsg?: string;
+    disabled?: boolean;
+};
+export type ButtonBusyProps = ButtonCommonProps & {
+    busy: true;
+    busyMsg?: string;
+    disabled?: never;
+};
+type ButtonCommonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'className' | 'style' | 'disabled'> & IconProps & {
+    purpose?: ButtonPurpose;
+    /** Variant determines primary, secondary or tertiary use. Secondary will be default */
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    type?: 'button' | 'submit' | 'reset';
+    /** The text content of the Button */
+    children: ButtonChildren;
+};
+export type ButtonProps = ButtonIdleProps | ButtonBusyProps;
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/components/Actions/Link/Link.cjs

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const cn = require("clsx");
+const typography = require("../../../utils/typography.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+function LinkInner(props, ref) {
+  const {
+    as,
+    size,
+    bold,
+    children,
+    className: _,
+    style: __,
+    ...otherProps
+  } = props;
+  const Component = as || "a";
+  const className = cn(
+    size ? [typography.TYPOGRAPHY_TEXT_SIZE_CLASSES[size], typography.TYPOGRAPHY_LINE_HEIGHT_CLASSES[size]] : void 0,
+    /** set underline thickness depending on size of Link */
+    size === "sm" ? "decoration-1" : "decoration-2",
+    "underline cursor-pointer focus:outline-transparent focus-visible:yt-focus text-blue-700 hover:text-blue-900 active:text-blue-900 visited:text-blue-700 underline-offset-2 ",
+    {
+      "font-bold": bold
+    }
+  );
+  return /* @__PURE__ */ React__namespace.createElement(Component, { ...otherProps, className, "data-taco": "link", ref }, children);
+}
+const Link = React__namespace.forwardRef(LinkInner);
+exports.Link = Link;
+//# sourceMappingURL=Link.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Link.cjs","sources":["../../../../src/components/Actions/Link/Link.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\n\nimport { TYPOGRAPHY_LINE_HEIGHT_CLASSES, TYPOGRAPHY_TEXT_SIZE_CLASSES } from '../../../utils/typography';\n\n/**\n * Link label: string text (literals, template literals, i18n helpers that return `string`, string constants),\n * or a single React element—typically a component whose output is text-only.\n * (TypeScript cannot enforce “component returns string” vs JSX; avoid non-text elements.)\n */\nexport type LinkChildren = string | React.ReactElement | null;\n\n/** Props specific to our Link component */\ntype LinkOwnProps<T extends React.ElementType = 'a'> = {\n    /** Allows using a custom or framework-specific link component (e.g. Next.js or React Router) */\n    as?: T;\n    /** Set specific size that matches our text sizes. If it's not set, it inherits the parent size */\n    size?: 'sm' | 'md' | 'lg';\n    /** If true, the Link will be rendered in bold */\n    bold?: boolean;\n    /** The content of the Link */\n    children?: LinkChildren;\n};\n\n/**\n * LinkProps combines our own props with the props of the underlying element (via `as`).\n * This allows the component to accept props like `to` for React Router or `href` for native anchors.\n * Note: `className` and `style` are explicitly excluded.\n */\nexport type LinkProps<T extends React.ElementType = 'a'> = LinkOwnProps<T> &\n    Omit<React.ComponentPropsWithoutRef<T>, keyof LinkOwnProps<T> | 'className' | 'style'>;\n\nfunction LinkInner<T extends React.ElementType = 'a'>(\n    props: LinkProps<T> & { ref?: React.Ref<unknown> },\n    ref: React.Ref<unknown>\n) {\n    // Destructure and discard className/style to prevent them from being applied at runtime\n    const {\n        as,\n        size,\n        bold,\n        children,\n        className: _,\n        style: __,\n        ...otherProps\n    } = props as LinkProps<T> & {\n        className?: string;\n        style?: React.CSSProperties;\n    };\n\n    const Component: React.ElementType = as || 'a';\n\n    const className = cn(\n        size ? [TYPOGRAPHY_TEXT_SIZE_CLASSES[size], TYPOGRAPHY_LINE_HEIGHT_CLASSES[size]] : undefined,\n        /** set underline thickness depending on size of Link */\n        size === 'sm' ? 'decoration-1' : 'decoration-2',\n        'underline cursor-pointer focus:outline-transparent focus-visible:yt-focus text-blue-700 hover:text-blue-900 active:text-blue-900 visited:text-blue-700 underline-offset-2 ',\n        {\n            'font-bold': bold,\n        }\n    );\n\n    return (\n        <Component {...otherProps} className={className} data-taco=\"link\" ref={ref}>\n            {children}\n        </Component>\n    );\n}\n\nexport const Link = React.forwardRef(LinkInner) as <T extends React.ElementType = 'a'>(\n    props: LinkProps<T> & { ref?: React.Ref<unknown> }\n) => React.ReactElement | null;\n"],"names":["TYPOGRAPHY_TEXT_SIZE_CLASSES","TYPOGRAPHY_LINE_HEIGHT_CLASSES","React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAgCA,SAAS,UACL,OACA,KACF;AAEQ,QAAA;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,GAAG;AAAA,EAAA,IACH;AAKJ,QAAM,YAA+B,MAAM;AAE3C,QAAM,YAAY;AAAA,IACd,OAAO,CAACA,WAAAA,6BAA6B,IAAI,GAAGC,WAAAA,+BAA+B,IAAI,CAAC,IAAI;AAAA;AAAA,IAEpF,SAAS,OAAO,iBAAiB;AAAA,IACjC;AAAA,IACA;AAAA,MACI,aAAa;AAAA,IAAA;AAAA,EAErB;AAGI,SAAAC,iCAAA,cAAC,aAAW,GAAG,YAAY,WAAsB,aAAU,QAAO,OAC7D,QACL;AAER;AAEa,MAAA,OAAOA,iBAAM,WAAW,SAAS;;"}

package/dist/components/Actions/Link/Link.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+/**
+ * Link label: string text (literals, template literals, i18n helpers that return `string`, string constants),
+ * or a single React element—typically a component whose output is text-only.
+ * (TypeScript cannot enforce “component returns string” vs JSX; avoid non-text elements.)
+ */
+export type LinkChildren = string | React.ReactElement | null;
+/** Props specific to our Link component */
+type LinkOwnProps<T extends React.ElementType = 'a'> = {
+    /** Allows using a custom or framework-specific link component (e.g. Next.js or React Router) */
+    as?: T;
+    /** Set specific size that matches our text sizes. If it's not set, it inherits the parent size */
+    size?: 'sm' | 'md' | 'lg';
+    /** If true, the Link will be rendered in bold */
+    bold?: boolean;
+    /** The content of the Link */
+    children?: LinkChildren;
+};
+/**
+ * LinkProps combines our own props with the props of the underlying element (via `as`).
+ * This allows the component to accept props like `to` for React Router or `href` for native anchors.
+ * Note: `className` and `style` are explicitly excluded.
+ */
+export type LinkProps<T extends React.ElementType = 'a'> = LinkOwnProps<T> & Omit<React.ComponentPropsWithoutRef<T>, keyof LinkOwnProps<T> | 'className' | 'style'>;
+export declare const Link: <T extends React.ElementType = "a">(props: LinkProps<T> & {
+    ref?: React.Ref<unknown>;
+}) => React.ReactElement | null;
+export {};

package/dist/components/Actions/Link/Link.js

@@ -0,0 +1,30 @@
+import * as React from "react";
+import cn from "clsx";
+import { TYPOGRAPHY_TEXT_SIZE_CLASSES, TYPOGRAPHY_LINE_HEIGHT_CLASSES } from "../../../utils/typography.js";
+function LinkInner(props, ref) {
+  const {
+    as,
+    size,
+    bold,
+    children,
+    className: _,
+    style: __,
+    ...otherProps
+  } = props;
+  const Component = as || "a";
+  const className = cn(
+    size ? [TYPOGRAPHY_TEXT_SIZE_CLASSES[size], TYPOGRAPHY_LINE_HEIGHT_CLASSES[size]] : void 0,
+    /** set underline thickness depending on size of Link */
+    size === "sm" ? "decoration-1" : "decoration-2",
+    "underline cursor-pointer focus:outline-transparent focus-visible:yt-focus text-blue-700 hover:text-blue-900 active:text-blue-900 visited:text-blue-700 underline-offset-2 ",
+    {
+      "font-bold": bold
+    }
+  );
+  return /* @__PURE__ */ React.createElement(Component, { ...otherProps, className, "data-taco": "link", ref }, children);
+}
+const Link = React.forwardRef(LinkInner);
+export {
+  Link
+};
+//# sourceMappingURL=Link.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Link.js","sources":["../../../../src/components/Actions/Link/Link.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\n\nimport { TYPOGRAPHY_LINE_HEIGHT_CLASSES, TYPOGRAPHY_TEXT_SIZE_CLASSES } from '../../../utils/typography';\n\n/**\n * Link label: string text (literals, template literals, i18n helpers that return `string`, string constants),\n * or a single React element—typically a component whose output is text-only.\n * (TypeScript cannot enforce “component returns string” vs JSX; avoid non-text elements.)\n */\nexport type LinkChildren = string | React.ReactElement | null;\n\n/** Props specific to our Link component */\ntype LinkOwnProps<T extends React.ElementType = 'a'> = {\n    /** Allows using a custom or framework-specific link component (e.g. Next.js or React Router) */\n    as?: T;\n    /** Set specific size that matches our text sizes. If it's not set, it inherits the parent size */\n    size?: 'sm' | 'md' | 'lg';\n    /** If true, the Link will be rendered in bold */\n    bold?: boolean;\n    /** The content of the Link */\n    children?: LinkChildren;\n};\n\n/**\n * LinkProps combines our own props with the props of the underlying element (via `as`).\n * This allows the component to accept props like `to` for React Router or `href` for native anchors.\n * Note: `className` and `style` are explicitly excluded.\n */\nexport type LinkProps<T extends React.ElementType = 'a'> = LinkOwnProps<T> &\n    Omit<React.ComponentPropsWithoutRef<T>, keyof LinkOwnProps<T> | 'className' | 'style'>;\n\nfunction LinkInner<T extends React.ElementType = 'a'>(\n    props: LinkProps<T> & { ref?: React.Ref<unknown> },\n    ref: React.Ref<unknown>\n) {\n    // Destructure and discard className/style to prevent them from being applied at runtime\n    const {\n        as,\n        size,\n        bold,\n        children,\n        className: _,\n        style: __,\n        ...otherProps\n    } = props as LinkProps<T> & {\n        className?: string;\n        style?: React.CSSProperties;\n    };\n\n    const Component: React.ElementType = as || 'a';\n\n    const className = cn(\n        size ? [TYPOGRAPHY_TEXT_SIZE_CLASSES[size], TYPOGRAPHY_LINE_HEIGHT_CLASSES[size]] : undefined,\n        /** set underline thickness depending on size of Link */\n        size === 'sm' ? 'decoration-1' : 'decoration-2',\n        'underline cursor-pointer focus:outline-transparent focus-visible:yt-focus text-blue-700 hover:text-blue-900 active:text-blue-900 visited:text-blue-700 underline-offset-2 ',\n        {\n            'font-bold': bold,\n        }\n    );\n\n    return (\n        <Component {...otherProps} className={className} data-taco=\"link\" ref={ref}>\n            {children}\n        </Component>\n    );\n}\n\nexport const Link = React.forwardRef(LinkInner) as <T extends React.ElementType = 'a'>(\n    props: LinkProps<T> & { ref?: React.Ref<unknown> }\n) => React.ReactElement | null;\n"],"names":[],"mappings":";;;AAgCA,SAAS,UACL,OACA,KACF;AAEQ,QAAA;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,GAAG;AAAA,EAAA,IACH;AAKJ,QAAM,YAA+B,MAAM;AAE3C,QAAM,YAAY;AAAA,IACd,OAAO,CAAC,6BAA6B,IAAI,GAAG,+BAA+B,IAAI,CAAC,IAAI;AAAA;AAAA,IAEpF,SAAS,OAAO,iBAAiB;AAAA,IACjC;AAAA,IACA;AAAA,MACI,aAAa;AAAA,IAAA;AAAA,EAErB;AAGI,SAAA,sBAAA,cAAC,aAAW,GAAG,YAAY,WAAsB,aAAU,QAAO,OAC7D,QACL;AAER;AAEa,MAAA,OAAO,MAAM,WAAW,SAAS;"}

package/dist/components/Actions/LinkButton/LinkButton.cjs

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const cn = require("clsx");
+const utils = require("../utils.cjs");
+const Icon = require("../../Icon/Icon.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+function LinkButtonInner(props, ref) {
+  const {
+    as,
+    size = "md",
+    variant = "secondary",
+    children,
+    icon,
+    iconOnly,
+    className: _,
+    style: __,
+    ...otherProps
+  } = props;
+  const Component = as || "a";
+  const btnClassName = cn(
+    utils.SHARED_BUTTON_CLASSNAMES,
+    utils.getAppearanceClasses(variant),
+    !iconOnly && utils.setPaddingClasses(size),
+    utils.sizeClasses[size],
+    "no-underline",
+    { "aspect-square p-0": iconOnly }
+  );
+  return /* @__PURE__ */ React__namespace.createElement(Component, { ...otherProps, className: btnClassName, "data-taco": "linkbutton", ref }, /* @__PURE__ */ React__namespace.createElement("span", { "data-taco": "linkbutton-text", className: cn({ "sr-only": iconOnly && icon }, "text-nowrap") }, children), icon ? /* @__PURE__ */ React__namespace.createElement("span", { "data-taco": "linkbutton-icon", className: "leading-none" }, /* @__PURE__ */ React__namespace.createElement(Icon.Icon, { name: icon, className: cn(utils.setIconSizeClass[size]) })) : null);
+}
+const LinkButton = React__namespace.forwardRef(LinkButtonInner);
+exports.LinkButton = LinkButton;
+//# sourceMappingURL=LinkButton.cjs.map

package/dist/components/Actions/LinkButton/LinkButton.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkButton.cjs","sources":["../../../../src/components/Actions/LinkButton/LinkButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\n\nimport {\n    ButtonSize,\n    ButtonVariant,\n    SHARED_BUTTON_CLASSNAMES,\n    sizeClasses,\n    getAppearanceClasses,\n    setPaddingClasses,\n    setIconSizeClass,\n} from './../utils';\nimport { Icon, IconName } from '../../Icon/Icon';\n\n/**\n * LinkButton Text: string text (literals, template literals, i18n helpers that return `string`, string constants),\n * or a single React element—typically a component whose output is text-only.\n */\nexport type LinkButtonChildren = string | React.ReactElement;\n\ntype IconProps =\n    | {\n          /**\n           *  Which icon to display\n           *  This dynamic type causes the type extraction for props to fail\n           * */\n          icon: IconName;\n          /* Determines if icon is placed before or after text label */\n          iconOnly?: boolean;\n      }\n    | {\n          icon?: never;\n          iconOnly?: never;\n      };\n\n/** Props specific to our Link component */\ntype LinkButtonBaseProps<T extends React.ElementType = 'a'> = {\n    /** Allows using a custom or framework-specific link component (e.g. Next.js or React Router) */\n    as?: T;\n    /** Set size to either sm, md or lg — will fallback to md  */\n    size?: ButtonSize;\n    /** Variant determines primary, secondary or tertiary use. Secondary will be default */\n    variant?: ButtonVariant;\n    /** The content of the Link */\n    children: LinkButtonChildren;\n};\n\n/**\n * LinkProps combines the base props with the props of the underlying element (via `as`).\n * This allows the component to accept props like `to` for React Router or `href` for native anchors.\n * Note: `className` and `style` are explicitly excluded.\n */\nexport type LinkButtonProps<T extends React.ElementType = 'a'> = LinkButtonBaseProps<T> &\n    IconProps &\n    Omit<React.ComponentPropsWithoutRef<T>, keyof LinkButtonBaseProps<T> | 'className' | 'style'>;\n\nfunction LinkButtonInner<T extends React.ElementType = 'a'>(\n    props: LinkButtonProps<T> & { ref?: React.Ref<unknown> },\n    ref: React.Ref<unknown>\n) {\n    // Destructure and discard className/style to prevent them from being applied at runtime\n    const {\n        as,\n        size = 'md',\n        variant = 'secondary',\n        children,\n        icon,\n        iconOnly,\n        className: _,\n        style: __,\n        ...otherProps\n    } = props as LinkButtonProps<T> & {\n        className?: string;\n        style?: React.CSSProperties;\n    };\n\n    const Component: React.ElementType = as || 'a';\n\n    /**\n     * Todo:\n     * - Find a clever way to pass 'regular' and 'end'\n     */\n    const btnClassName = cn(\n        SHARED_BUTTON_CLASSNAMES,\n        getAppearanceClasses(variant, 'regular'),\n        !iconOnly && setPaddingClasses(size, 'end'),\n        sizeClasses[size],\n        'no-underline',\n        { 'aspect-square p-0': iconOnly }\n    );\n\n    return (\n        <Component {...otherProps} className={btnClassName} data-taco=\"linkbutton\" ref={ref}>\n            <span data-taco=\"linkbutton-text\" className={cn({ 'sr-only': iconOnly && icon }, 'text-nowrap')}>\n                {children}\n            </span>\n            {icon ? (\n                <span data-taco=\"linkbutton-icon\" className=\"leading-none\">\n                    <Icon name={icon} className={cn(setIconSizeClass[size])} />\n                </span>\n            ) : null}\n        </Component>\n    );\n}\n\nexport const LinkButton = React.forwardRef(LinkButtonInner as React.ForwardRefRenderFunction<unknown, LinkButtonProps>) as <\n    T extends React.ElementType = 'a'\n>(\n    props: LinkButtonProps<T> & { ref?: React.Ref<unknown> }\n) => React.ReactElement | null;\n"],"names":["SHARED_BUTTON_CLASSNAMES","getAppearanceClasses","setPaddingClasses","sizeClasses","React","Icon","setIconSizeClass"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAwDA,SAAS,gBACL,OACA,KACF;AAEQ,QAAA;AAAA,IACF;AAAA,IACA,OAAO;AAAA,IACP,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,GAAG;AAAA,EAAA,IACH;AAKJ,QAAM,YAA+B,MAAM;AAM3C,QAAM,eAAe;AAAA,IACjBA,MAAA;AAAA,IACAC,MAAAA,qBAAqB,OAAkB;AAAA,IACvC,CAAC,YAAYC,MAAkB,kBAAA,IAAW;AAAA,IAC1CC,MAAAA,YAAY,IAAI;AAAA,IAChB;AAAA,IACA,EAAE,qBAAqB,SAAS;AAAA,EACpC;AAEA,wDACK,WAAW,EAAA,GAAG,YAAY,WAAW,cAAc,aAAU,cAAa,IAAA,kDACtE,QAAK,EAAA,aAAU,mBAAkB,WAAW,GAAG,EAAE,WAAW,YAAY,KAAQ,GAAA,aAAa,KACzF,QACL,GACC,OACIC,iCAAA,cAAA,QAAA,EAAK,aAAU,mBAAkB,WAAU,kBACvCA,iCAAA,cAAAC,KAAAA,MAAA,EAAK,MAAM,MAAM,WAAW,GAAGC,MAAiB,iBAAA,IAAI,CAAC,GAAG,CAC7D,IACA,IACR;AAER;AAEa,MAAA,aAAaF,iBAAM,WAAW,eAA2E;;"}

package/dist/components/Actions/LinkButton/LinkButton.d.ts

@@ -0,0 +1,40 @@
+import { ButtonSize, ButtonVariant } from './../utils';
+import { IconName } from '../../Icon/Icon';
+import * as React from 'react';
+/**
+ * LinkButton Text: string text (literals, template literals, i18n helpers that return `string`, string constants),
+ * or a single React element—typically a component whose output is text-only.
+ */
+export type LinkButtonChildren = string | React.ReactElement;
+type IconProps = {
+    /**
+     *  Which icon to display
+     *  This dynamic type causes the type extraction for props to fail
+     * */
+    icon: IconName;
+    iconOnly?: boolean;
+} | {
+    icon?: never;
+    iconOnly?: never;
+};
+/** Props specific to our Link component */
+type LinkButtonBaseProps<T extends React.ElementType = 'a'> = {
+    /** Allows using a custom or framework-specific link component (e.g. Next.js or React Router) */
+    as?: T;
+    /** Set size to either sm, md or lg — will fallback to md  */
+    size?: ButtonSize;
+    /** Variant determines primary, secondary or tertiary use. Secondary will be default */
+    variant?: ButtonVariant;
+    /** The content of the Link */
+    children: LinkButtonChildren;
+};
+/**
+ * LinkProps combines the base props with the props of the underlying element (via `as`).
+ * This allows the component to accept props like `to` for React Router or `href` for native anchors.
+ * Note: `className` and `style` are explicitly excluded.
+ */
+export type LinkButtonProps<T extends React.ElementType = 'a'> = LinkButtonBaseProps<T> & IconProps & Omit<React.ComponentPropsWithoutRef<T>, keyof LinkButtonBaseProps<T> | 'className' | 'style'>;
+export declare const LinkButton: <T extends React.ElementType = "a">(props: LinkButtonProps<T> & {
+    ref?: React.Ref<unknown>;
+}) => React.ReactElement | null;
+export {};

package/dist/components/Actions/LinkButton/LinkButton.js

@@ -0,0 +1,32 @@
+import * as React from "react";
+import cn from "clsx";
+import { SHARED_BUTTON_CLASSNAMES, getAppearanceClasses, setPaddingClasses, sizeClasses, setIconSizeClass } from "../utils.js";
+import { Icon } from "../../Icon/Icon.js";
+function LinkButtonInner(props, ref) {
+  const {
+    as,
+    size = "md",
+    variant = "secondary",
+    children,
+    icon,
+    iconOnly,
+    className: _,
+    style: __,
+    ...otherProps
+  } = props;
+  const Component = as || "a";
+  const btnClassName = cn(
+    SHARED_BUTTON_CLASSNAMES,
+    getAppearanceClasses(variant),
+    !iconOnly && setPaddingClasses(size),
+    sizeClasses[size],
+    "no-underline",
+    { "aspect-square p-0": iconOnly }
+  );
+  return /* @__PURE__ */ React.createElement(Component, { ...otherProps, className: btnClassName, "data-taco": "linkbutton", ref }, /* @__PURE__ */ React.createElement("span", { "data-taco": "linkbutton-text", className: cn({ "sr-only": iconOnly && icon }, "text-nowrap") }, children), icon ? /* @__PURE__ */ React.createElement("span", { "data-taco": "linkbutton-icon", className: "leading-none" }, /* @__PURE__ */ React.createElement(Icon, { name: icon, className: cn(setIconSizeClass[size]) })) : null);
+}
+const LinkButton = React.forwardRef(LinkButtonInner);
+export {
+  LinkButton
+};
+//# sourceMappingURL=LinkButton.js.map

package/dist/components/Actions/LinkButton/LinkButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkButton.js","sources":["../../../../src/components/Actions/LinkButton/LinkButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\n\nimport {\n    ButtonSize,\n    ButtonVariant,\n    SHARED_BUTTON_CLASSNAMES,\n    sizeClasses,\n    getAppearanceClasses,\n    setPaddingClasses,\n    setIconSizeClass,\n} from './../utils';\nimport { Icon, IconName } from '../../Icon/Icon';\n\n/**\n * LinkButton Text: string text (literals, template literals, i18n helpers that return `string`, string constants),\n * or a single React element—typically a component whose output is text-only.\n */\nexport type LinkButtonChildren = string | React.ReactElement;\n\ntype IconProps =\n    | {\n          /**\n           *  Which icon to display\n           *  This dynamic type causes the type extraction for props to fail\n           * */\n          icon: IconName;\n          /* Determines if icon is placed before or after text label */\n          iconOnly?: boolean;\n      }\n    | {\n          icon?: never;\n          iconOnly?: never;\n      };\n\n/** Props specific to our Link component */\ntype LinkButtonBaseProps<T extends React.ElementType = 'a'> = {\n    /** Allows using a custom or framework-specific link component (e.g. Next.js or React Router) */\n    as?: T;\n    /** Set size to either sm, md or lg — will fallback to md  */\n    size?: ButtonSize;\n    /** Variant determines primary, secondary or tertiary use. Secondary will be default */\n    variant?: ButtonVariant;\n    /** The content of the Link */\n    children: LinkButtonChildren;\n};\n\n/**\n * LinkProps combines the base props with the props of the underlying element (via `as`).\n * This allows the component to accept props like `to` for React Router or `href` for native anchors.\n * Note: `className` and `style` are explicitly excluded.\n */\nexport type LinkButtonProps<T extends React.ElementType = 'a'> = LinkButtonBaseProps<T> &\n    IconProps &\n    Omit<React.ComponentPropsWithoutRef<T>, keyof LinkButtonBaseProps<T> | 'className' | 'style'>;\n\nfunction LinkButtonInner<T extends React.ElementType = 'a'>(\n    props: LinkButtonProps<T> & { ref?: React.Ref<unknown> },\n    ref: React.Ref<unknown>\n) {\n    // Destructure and discard className/style to prevent them from being applied at runtime\n    const {\n        as,\n        size = 'md',\n        variant = 'secondary',\n        children,\n        icon,\n        iconOnly,\n        className: _,\n        style: __,\n        ...otherProps\n    } = props as LinkButtonProps<T> & {\n        className?: string;\n        style?: React.CSSProperties;\n    };\n\n    const Component: React.ElementType = as || 'a';\n\n    /**\n     * Todo:\n     * - Find a clever way to pass 'regular' and 'end'\n     */\n    const btnClassName = cn(\n        SHARED_BUTTON_CLASSNAMES,\n        getAppearanceClasses(variant, 'regular'),\n        !iconOnly && setPaddingClasses(size, 'end'),\n        sizeClasses[size],\n        'no-underline',\n        { 'aspect-square p-0': iconOnly }\n    );\n\n    return (\n        <Component {...otherProps} className={btnClassName} data-taco=\"linkbutton\" ref={ref}>\n            <span data-taco=\"linkbutton-text\" className={cn({ 'sr-only': iconOnly && icon }, 'text-nowrap')}>\n                {children}\n            </span>\n            {icon ? (\n                <span data-taco=\"linkbutton-icon\" className=\"leading-none\">\n                    <Icon name={icon} className={cn(setIconSizeClass[size])} />\n                </span>\n            ) : null}\n        </Component>\n    );\n}\n\nexport const LinkButton = React.forwardRef(LinkButtonInner as React.ForwardRefRenderFunction<unknown, LinkButtonProps>) as <\n    T extends React.ElementType = 'a'\n>(\n    props: LinkButtonProps<T> & { ref?: React.Ref<unknown> }\n) => React.ReactElement | null;\n"],"names":[],"mappings":";;;;AAwDA,SAAS,gBACL,OACA,KACF;AAEQ,QAAA;AAAA,IACF;AAAA,IACA,OAAO;AAAA,IACP,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,GAAG;AAAA,EAAA,IACH;AAKJ,QAAM,YAA+B,MAAM;AAM3C,QAAM,eAAe;AAAA,IACjB;AAAA,IACA,qBAAqB,OAAkB;AAAA,IACvC,CAAC,YAAY,kBAAkB,IAAW;AAAA,IAC1C,YAAY,IAAI;AAAA,IAChB;AAAA,IACA,EAAE,qBAAqB,SAAS;AAAA,EACpC;AAEA,6CACK,WAAW,EAAA,GAAG,YAAY,WAAW,cAAc,aAAU,cAAa,IAAA,uCACtE,QAAK,EAAA,aAAU,mBAAkB,WAAW,GAAG,EAAE,WAAW,YAAY,KAAQ,GAAA,aAAa,KACzF,QACL,GACC,OACI,sBAAA,cAAA,QAAA,EAAK,aAAU,mBAAkB,WAAU,kBACvC,sBAAA,cAAA,MAAA,EAAK,MAAM,MAAM,WAAW,GAAG,iBAAiB,IAAI,CAAC,GAAG,CAC7D,IACA,IACR;AAER;AAEa,MAAA,aAAa,MAAM,WAAW,eAA2E;"}

package/dist/components/Actions/utils.cjs

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const SHARED_BUTTON_CLASSNAMES = "relative inline-flex gap-1 whitespace-nowrap flex-shrink-0 items-center justify-center rounded focus-visible:yt-focus";
+const getAppearanceClasses = (variant, purpose) => {
+  if (variant === "primary") {
+    return "bg-blue-500 text-white hover:bg-blue-700 hover:text-white aria-disabled:hover:bg-blue-500 aria-disabled:hover:text-white focus-visible:bg-blue-700 focus-visible:text-white visited:text-white border-0 disabled:bg-blue-200 disabled:cursor-not-allowed ";
+  }
+  if (variant === "secondary") {
+    return "bg-gray-100 text-black hover:bg-gray-200 aria-disabled:hover:bg-gray-100 aria-disabled:hover:text-black focus-visible:bg-gray-200 hover:text-black focus-visible:text-black visited:text-black border-0 disabled:bg-gray-50 disabled:text-gray-300 disabled:cursor-not-allowed";
+  }
+  if (variant === "tertiary") {
+    return "bg-white border border-gray-100 text-black hover:bg-gray-100 hover:text-black hover:border-gray-300 aria-disabled:hover:bg-white aria-disabled:hover:text-black aria-disabled:hover:border-gray-100 focus-visible:text-black focus-visible:border-gray-300 focus-visible:bg-gray-100 disabled:bg-white disabled:text-gray-300 disabled:border-gray-300 disabled:cursor-not-allowed";
+  }
+  return "bg-white border border-red-100 text-red-700 hover:bg-red-100 hover:border-red-200 aria-disabled:hover:bg-white aria-disabled:hover:border-red-100 aria-disabled:hover:text-red-700 focus-visible:bg-red-100 focus-visible:border-red-200 disabled:bg-white disabled:border-red-100 disabled:text-gray-300 disabled:cursor-not-allowed";
+};
+const sizeClasses = {
+  sm: "h-7 text-xs",
+  md: "h-8 text-sm",
+  lg: "h-10 text-base"
+};
+const setPaddingClasses = (size, iconPlacement) => {
+  if (size === "sm") {
+    return "ps-2 pe-1";
+  }
+  if (size === "md" || size === "lg") {
+    return "ps-3 pe-2";
+  }
+  if (size === "sm") {
+    return "px-2";
+  }
+  return "px-3";
+};
+const setIconSizeClass = {
+  // important is required to override the hardcoded size of the icon
+  sm: "!size-[18px]",
+  md: "!size-5",
+  lg: "!size-6"
+};
+exports.SHARED_BUTTON_CLASSNAMES = SHARED_BUTTON_CLASSNAMES;
+exports.getAppearanceClasses = getAppearanceClasses;
+exports.setIconSizeClass = setIconSizeClass;
+exports.setPaddingClasses = setPaddingClasses;
+exports.sizeClasses = sizeClasses;
+//# sourceMappingURL=utils.cjs.map

package/dist/components/Actions/utils.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.cjs","sources":["../../../src/components/Actions/utils.tsx"],"sourcesContent":["export type ButtonSize = 'sm' | 'md' | 'lg';\nexport type ButtonPurpose = 'regular' | 'destructive';\nexport type ButtonVariant = 'primary' | 'secondary' | 'tertiary';\nexport type ButtonIconPlacement = 'start' | 'end';\nexport type ButtonIconOnly = boolean;\n// TODO: do this in a better way — not used for now\nexport type LinkButtonPurpose = 'regular';\n\nexport const SHARED_BUTTON_CLASSNAMES =\n    'relative inline-flex gap-1 whitespace-nowrap flex-shrink-0 items-center justify-center rounded focus-visible:yt-focus';\n\nexport const getAppearanceClasses = (variant: ButtonVariant, purpose: ButtonPurpose) => {\n    if (purpose === 'regular' && variant === 'primary') {\n        return 'bg-blue-500 text-white hover:bg-blue-700 hover:text-white aria-disabled:hover:bg-blue-500 aria-disabled:hover:text-white focus-visible:bg-blue-700 focus-visible:text-white visited:text-white border-0 disabled:bg-blue-200 disabled:cursor-not-allowed ';\n    }\n    if (purpose === 'regular' && variant === 'secondary') {\n        // if variant is secondary\n        return 'bg-gray-100 text-black hover:bg-gray-200 aria-disabled:hover:bg-gray-100 aria-disabled:hover:text-black focus-visible:bg-gray-200 hover:text-black focus-visible:text-black visited:text-black border-0 disabled:bg-gray-50 disabled:text-gray-300 disabled:cursor-not-allowed';\n    }\n    if (purpose === 'regular' && variant === 'tertiary') {\n        return 'bg-white border border-gray-100 text-black hover:bg-gray-100 hover:text-black hover:border-gray-300 aria-disabled:hover:bg-white aria-disabled:hover:text-black aria-disabled:hover:border-gray-100 focus-visible:text-black focus-visible:border-gray-300 focus-visible:bg-gray-100 disabled:bg-white disabled:text-gray-300 disabled:border-gray-300 disabled:cursor-not-allowed';\n    }\n    // if purpose is destructive and variant is primary\n    if (purpose === 'destructive' && variant === 'primary') {\n        return 'bg-red-500 text-white hover:bg-red-700 aria-disabled:hover:bg-red-500 aria-disabled:hover:text-white focus-visible:bg-red-700 hover:text-white focus-visible:text-white border-0 disabled:bg-red-200 disabled:text-white disabled:cursor-not-allowed';\n    }\n    // if purpose is destructive and variant is secondary\n    if (purpose === 'destructive' && variant === 'secondary') {\n        return 'bg-red-100 text-red-700 hover:bg-red-200 aria-disabled:hover:bg-red-100 aria-disabled:hover:text-red-700 focus-visible:bg-red-200 hover:text-red-700 focus-visible:text-red-700 border-0 disabled:bg-red-50 disabled:text-gray-300 disabled:cursor-not-allowed';\n    }\n    // if purpose is destructive and variant is tertiary\n    return 'bg-white border border-red-100 text-red-700 hover:bg-red-100 hover:border-red-200 aria-disabled:hover:bg-white aria-disabled:hover:border-red-100 aria-disabled:hover:text-red-700 focus-visible:bg-red-100 focus-visible:border-red-200 disabled:bg-white disabled:border-red-100 disabled:text-gray-300 disabled:cursor-not-allowed';\n};\n\nexport const sizeClasses = {\n    sm: 'h-7 text-xs',\n    md: 'h-8 text-sm',\n    lg: 'h-10 text-base',\n};\n\nexport const setPaddingClasses = (size: ButtonSize, iconPlacement: ButtonIconPlacement | undefined) => {\n    // Icon is before the text and it's a small button\n    if (iconPlacement === 'start' && size === 'sm') {\n        return 'ps-1 pe-2';\n    }\n    // Icon is before the text and it's a medium or large button\n    if (iconPlacement === 'start' && (size === 'md' || size === 'lg')) {\n        return 'ps-2 pe-3';\n    }\n    // Icon is after the text and it's a small button\n    if (iconPlacement === 'end' && size === 'sm') {\n        return 'ps-2 pe-1';\n    }\n    // Icon is after the text and it's a medium or large button\n    if (iconPlacement === 'end' && (size === 'md' || size === 'lg')) {\n        return 'ps-3 pe-2';\n    }\n    // No icon and small button\n    if (size === 'sm') {\n        return 'px-2';\n    }\n    return 'px-3';\n};\n\nexport const setIconSizeClass = {\n    // important is required to override the hardcoded size of the icon\n    sm: '!size-[18px]',\n    md: '!size-5',\n    lg: '!size-6',\n};\n"],"names":[],"mappings":";;AAQO,MAAM,2BACT;AAES,MAAA,uBAAuB,CAAC,SAAwB,YAA2B;AAChF,MAAyB,YAAY,WAAW;AACzC,WAAA;AAAA,EAAA;AAEP,MAAyB,YAAY,aAAa;AAE3C,WAAA;AAAA,EAAA;AAEP,MAAyB,YAAY,YAAY;AAC1C,WAAA;AAAA,EAAA;AAWJ,SAAA;AACX;AAEO,MAAM,cAAc;AAAA,EACvB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACR;AAEa,MAAA,oBAAoB,CAAC,MAAkB,kBAAmD;AAU/F,MAA2B,SAAS,MAAM;AACnC,WAAA;AAAA,EAAA;AAGX,MAAgC,SAAS,QAAQ,SAAS,MAAO;AACtD,WAAA;AAAA,EAAA;AAGX,MAAI,SAAS,MAAM;AACR,WAAA;AAAA,EAAA;AAEJ,SAAA;AACX;AAEO,MAAM,mBAAmB;AAAA;AAAA,EAE5B,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACR;;;;;;"}

package/dist/components/Actions/utils.d.ts

@@ -0,0 +1,19 @@
+export type ButtonSize = 'sm' | 'md' | 'lg';
+export type ButtonPurpose = 'regular' | 'destructive';
+export type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
+export type ButtonIconPlacement = 'start' | 'end';
+export type ButtonIconOnly = boolean;
+export type LinkButtonPurpose = 'regular';
+export declare const SHARED_BUTTON_CLASSNAMES = "relative inline-flex gap-1 whitespace-nowrap flex-shrink-0 items-center justify-center rounded focus-visible:yt-focus";
+export declare const getAppearanceClasses: (variant: ButtonVariant, purpose: ButtonPurpose) => "bg-blue-500 text-white hover:bg-blue-700 hover:text-white aria-disabled:hover:bg-blue-500 aria-disabled:hover:text-white focus-visible:bg-blue-700 focus-visible:text-white visited:text-white border-0 disabled:bg-blue-200 disabled:cursor-not-allowed " | "bg-gray-100 text-black hover:bg-gray-200 aria-disabled:hover:bg-gray-100 aria-disabled:hover:text-black focus-visible:bg-gray-200 hover:text-black focus-visible:text-black visited:text-black border-0 disabled:bg-gray-50 disabled:text-gray-300 disabled:cursor-not-allowed" | "bg-white border border-gray-100 text-black hover:bg-gray-100 hover:text-black hover:border-gray-300 aria-disabled:hover:bg-white aria-disabled:hover:text-black aria-disabled:hover:border-gray-100 focus-visible:text-black focus-visible:border-gray-300 focus-visible:bg-gray-100 disabled:bg-white disabled:text-gray-300 disabled:border-gray-300 disabled:cursor-not-allowed" | "bg-red-500 text-white hover:bg-red-700 aria-disabled:hover:bg-red-500 aria-disabled:hover:text-white focus-visible:bg-red-700 hover:text-white focus-visible:text-white border-0 disabled:bg-red-200 disabled:text-white disabled:cursor-not-allowed" | "bg-red-100 text-red-700 hover:bg-red-200 aria-disabled:hover:bg-red-100 aria-disabled:hover:text-red-700 focus-visible:bg-red-200 hover:text-red-700 focus-visible:text-red-700 border-0 disabled:bg-red-50 disabled:text-gray-300 disabled:cursor-not-allowed" | "bg-white border border-red-100 text-red-700 hover:bg-red-100 hover:border-red-200 aria-disabled:hover:bg-white aria-disabled:hover:border-red-100 aria-disabled:hover:text-red-700 focus-visible:bg-red-100 focus-visible:border-red-200 disabled:bg-white disabled:border-red-100 disabled:text-gray-300 disabled:cursor-not-allowed";
+export declare const sizeClasses: {
+    sm: string;
+    md: string;
+    lg: string;
+};
+export declare const setPaddingClasses: (size: ButtonSize, iconPlacement: ButtonIconPlacement | undefined) => "ps-1 pe-2" | "ps-2 pe-3" | "ps-2 pe-1" | "ps-3 pe-2" | "px-2" | "px-3";
+export declare const setIconSizeClass: {
+    sm: string;
+    md: string;
+    lg: string;
+};

package/dist/components/Actions/utils.js

@@ -0,0 +1,44 @@
+const SHARED_BUTTON_CLASSNAMES = "relative inline-flex gap-1 whitespace-nowrap flex-shrink-0 items-center justify-center rounded focus-visible:yt-focus";
+const getAppearanceClasses = (variant, purpose) => {
+  if (variant === "primary") {
+    return "bg-blue-500 text-white hover:bg-blue-700 hover:text-white aria-disabled:hover:bg-blue-500 aria-disabled:hover:text-white focus-visible:bg-blue-700 focus-visible:text-white visited:text-white border-0 disabled:bg-blue-200 disabled:cursor-not-allowed ";
+  }
+  if (variant === "secondary") {
+    return "bg-gray-100 text-black hover:bg-gray-200 aria-disabled:hover:bg-gray-100 aria-disabled:hover:text-black focus-visible:bg-gray-200 hover:text-black focus-visible:text-black visited:text-black border-0 disabled:bg-gray-50 disabled:text-gray-300 disabled:cursor-not-allowed";
+  }
+  if (variant === "tertiary") {
+    return "bg-white border border-gray-100 text-black hover:bg-gray-100 hover:text-black hover:border-gray-300 aria-disabled:hover:bg-white aria-disabled:hover:text-black aria-disabled:hover:border-gray-100 focus-visible:text-black focus-visible:border-gray-300 focus-visible:bg-gray-100 disabled:bg-white disabled:text-gray-300 disabled:border-gray-300 disabled:cursor-not-allowed";
+  }
+  return "bg-white border border-red-100 text-red-700 hover:bg-red-100 hover:border-red-200 aria-disabled:hover:bg-white aria-disabled:hover:border-red-100 aria-disabled:hover:text-red-700 focus-visible:bg-red-100 focus-visible:border-red-200 disabled:bg-white disabled:border-red-100 disabled:text-gray-300 disabled:cursor-not-allowed";
+};
+const sizeClasses = {
+  sm: "h-7 text-xs",
+  md: "h-8 text-sm",
+  lg: "h-10 text-base"
+};
+const setPaddingClasses = (size, iconPlacement) => {
+  if (size === "sm") {
+    return "ps-2 pe-1";
+  }
+  if (size === "md" || size === "lg") {
+    return "ps-3 pe-2";
+  }
+  if (size === "sm") {
+    return "px-2";
+  }
+  return "px-3";
+};
+const setIconSizeClass = {
+  // important is required to override the hardcoded size of the icon
+  sm: "!size-[18px]",
+  md: "!size-5",
+  lg: "!size-6"
+};
+export {
+  SHARED_BUTTON_CLASSNAMES,
+  getAppearanceClasses,
+  setIconSizeClass,
+  setPaddingClasses,
+  sizeClasses
+};
+//# sourceMappingURL=utils.js.map

package/dist/components/Actions/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../src/components/Actions/utils.tsx"],"sourcesContent":["export type ButtonSize = 'sm' | 'md' | 'lg';\nexport type ButtonPurpose = 'regular' | 'destructive';\nexport type ButtonVariant = 'primary' | 'secondary' | 'tertiary';\nexport type ButtonIconPlacement = 'start' | 'end';\nexport type ButtonIconOnly = boolean;\n// TODO: do this in a better way — not used for now\nexport type LinkButtonPurpose = 'regular';\n\nexport const SHARED_BUTTON_CLASSNAMES =\n    'relative inline-flex gap-1 whitespace-nowrap flex-shrink-0 items-center justify-center rounded focus-visible:yt-focus';\n\nexport const getAppearanceClasses = (variant: ButtonVariant, purpose: ButtonPurpose) => {\n    if (purpose === 'regular' && variant === 'primary') {\n        return 'bg-blue-500 text-white hover:bg-blue-700 hover:text-white aria-disabled:hover:bg-blue-500 aria-disabled:hover:text-white focus-visible:bg-blue-700 focus-visible:text-white visited:text-white border-0 disabled:bg-blue-200 disabled:cursor-not-allowed ';\n    }\n    if (purpose === 'regular' && variant === 'secondary') {\n        // if variant is secondary\n        return 'bg-gray-100 text-black hover:bg-gray-200 aria-disabled:hover:bg-gray-100 aria-disabled:hover:text-black focus-visible:bg-gray-200 hover:text-black focus-visible:text-black visited:text-black border-0 disabled:bg-gray-50 disabled:text-gray-300 disabled:cursor-not-allowed';\n    }\n    if (purpose === 'regular' && variant === 'tertiary') {\n        return 'bg-white border border-gray-100 text-black hover:bg-gray-100 hover:text-black hover:border-gray-300 aria-disabled:hover:bg-white aria-disabled:hover:text-black aria-disabled:hover:border-gray-100 focus-visible:text-black focus-visible:border-gray-300 focus-visible:bg-gray-100 disabled:bg-white disabled:text-gray-300 disabled:border-gray-300 disabled:cursor-not-allowed';\n    }\n    // if purpose is destructive and variant is primary\n    if (purpose === 'destructive' && variant === 'primary') {\n        return 'bg-red-500 text-white hover:bg-red-700 aria-disabled:hover:bg-red-500 aria-disabled:hover:text-white focus-visible:bg-red-700 hover:text-white focus-visible:text-white border-0 disabled:bg-red-200 disabled:text-white disabled:cursor-not-allowed';\n    }\n    // if purpose is destructive and variant is secondary\n    if (purpose === 'destructive' && variant === 'secondary') {\n        return 'bg-red-100 text-red-700 hover:bg-red-200 aria-disabled:hover:bg-red-100 aria-disabled:hover:text-red-700 focus-visible:bg-red-200 hover:text-red-700 focus-visible:text-red-700 border-0 disabled:bg-red-50 disabled:text-gray-300 disabled:cursor-not-allowed';\n    }\n    // if purpose is destructive and variant is tertiary\n    return 'bg-white border border-red-100 text-red-700 hover:bg-red-100 hover:border-red-200 aria-disabled:hover:bg-white aria-disabled:hover:border-red-100 aria-disabled:hover:text-red-700 focus-visible:bg-red-100 focus-visible:border-red-200 disabled:bg-white disabled:border-red-100 disabled:text-gray-300 disabled:cursor-not-allowed';\n};\n\nexport const sizeClasses = {\n    sm: 'h-7 text-xs',\n    md: 'h-8 text-sm',\n    lg: 'h-10 text-base',\n};\n\nexport const setPaddingClasses = (size: ButtonSize, iconPlacement: ButtonIconPlacement | undefined) => {\n    // Icon is before the text and it's a small button\n    if (iconPlacement === 'start' && size === 'sm') {\n        return 'ps-1 pe-2';\n    }\n    // Icon is before the text and it's a medium or large button\n    if (iconPlacement === 'start' && (size === 'md' || size === 'lg')) {\n        return 'ps-2 pe-3';\n    }\n    // Icon is after the text and it's a small button\n    if (iconPlacement === 'end' && size === 'sm') {\n        return 'ps-2 pe-1';\n    }\n    // Icon is after the text and it's a medium or large button\n    if (iconPlacement === 'end' && (size === 'md' || size === 'lg')) {\n        return 'ps-3 pe-2';\n    }\n    // No icon and small button\n    if (size === 'sm') {\n        return 'px-2';\n    }\n    return 'px-3';\n};\n\nexport const setIconSizeClass = {\n    // important is required to override the hardcoded size of the icon\n    sm: '!size-[18px]',\n    md: '!size-5',\n    lg: '!size-6',\n};\n"],"names":[],"mappings":"AAQO,MAAM,2BACT;AAES,MAAA,uBAAuB,CAAC,SAAwB,YAA2B;AAChF,MAAyB,YAAY,WAAW;AACzC,WAAA;AAAA,EAAA;AAEP,MAAyB,YAAY,aAAa;AAE3C,WAAA;AAAA,EAAA;AAEP,MAAyB,YAAY,YAAY;AAC1C,WAAA;AAAA,EAAA;AAWJ,SAAA;AACX;AAEO,MAAM,cAAc;AAAA,EACvB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACR;AAEa,MAAA,oBAAoB,CAAC,MAAkB,kBAAmD;AAU/F,MAA2B,SAAS,MAAM;AACnC,WAAA;AAAA,EAAA;AAGX,MAAgC,SAAS,QAAQ,SAAS,MAAO;AACtD,WAAA;AAAA,EAAA;AAGX,MAAI,SAAS,MAAM;AACR,WAAA;AAAA,EAAA;AAEJ,SAAA;AACX;AAEO,MAAM,mBAAmB;AAAA;AAAA,EAE5B,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACR;"}

package/dist/components/Banner/Banner.cjs

@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 const cn = require("clsx");
 const util = require("./util.cjs");
-const IconButton = require("../IconButton/IconButton.cjs");
+const IconButton = require("../LegacyComponents/IconButton/IconButton.cjs");
 const Localization = require("../Provider/Localization.cjs");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -27,7 +27,7 @@ const Banner = React__namespace.forwardRef(function Banner2(props, ref) {
   const { texts } = Localization.useLocalization();
   const className = cn("bg-white relative flex items-center gap-2 py-2 px-4 leading-6 shadow-md z-10", props.className);
   return /* @__PURE__ */ React__namespace.createElement("div", { className, "data-taco": "banner", ref }, util.getBannerIcon(state), children, onClose ? /* @__PURE__ */ React__namespace.createElement(
-    IconButton.IconButton,
+    IconButton.LegacyIconButton,
     {
       "aria-label": texts.banner.close,
       className: "-mr-2 ml-auto self-start",

package/dist/components/Banner/Banner.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.cjs","sources":["../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { State } from '../../types';\nimport { getBannerIcon } from './util';\nimport { IconButton } from '../IconButton/IconButton';\nimport { useLocalization } from '../Provider/Localization';\n\nexport type BannerProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** Content can be any react element, for e.g. a `div` */\n    children: React.ReactNode;\n    /** State will change the icon displayed in banner */\n    state: State;\n    onClose?: () => void;\n};\n\nexport type BannerTexts = {\n    /** Aria-label for the close icon button of banner */\n    close: string;\n};\n\nexport const Banner = React.forwardRef(function Banner(props: BannerProps, ref: React.Ref<HTMLDivElement>) {\n    const { children, state, onClose } = props;\n    const { texts } = useLocalization();\n    const className = cn('bg-white relative flex items-center gap-2 py-2 px-4 leading-6 shadow-md z-10', props.className);\n\n    return (\n        <div className={className} data-taco=\"banner\" ref={ref}>\n            {getBannerIcon(state)}\n            {children}\n            {onClose ? (\n                <IconButton\n                    aria-label={texts.banner.close}\n                    className=\"-mr-2 ml-auto self-start\"\n                    icon=\"close\"\n                    appearance=\"discrete\"\n                    onClick={onClose}\n                />\n            ) : null}\n        </div>\n    );\n});\n"],"names":["React","Banner","useLocalization","getBannerIcon","IconButton"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAoBO,MAAM,SAASA,iBAAM,WAAW,SAASC,QAAO,OAAoB,KAAgC;AACvG,QAAM,EAAE,UAAU,OAAO,QAAY,IAAA;AAC/B,QAAA,EAAE,MAAM,IAAIC,6BAAgB;AAClC,QAAM,YAAY,GAAG,gFAAgF,MAAM,SAAS;AAGhH,SAAAF,iCAAA,cAAC,OAAI,EAAA,WAAsB,aAAU,UAAS,OACzCG,KAAAA,cAAc,KAAK,GACnB,UACA,UACGH,iCAAA;AAAA,IAACI,WAAA;AAAA,IAAA;AAAA,MACG,cAAY,MAAM,OAAO;AAAA,MACzB,WAAU;AAAA,MACV,MAAK;AAAA,MACL,YAAW;AAAA,MACX,SAAS;AAAA,IAAA;AAAA,MAEb,IACR;AAER,CAAC;;"}
+{"version":3,"file":"Banner.cjs","sources":["../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { State } from '../../types';\nimport { getBannerIcon } from './util';\nimport { LegacyIconButton } from '../LegacyComponents/IconButton/IconButton';\nimport { useLocalization } from '../Provider/Localization';\n\nexport type BannerProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** Content can be any react element, for e.g. a `div` */\n    children: React.ReactNode;\n    /** State will change the icon displayed in banner */\n    state: State;\n    onClose?: () => void;\n};\n\nexport type BannerTexts = {\n    /** Aria-label for the close icon button of banner */\n    close: string;\n};\n\nexport const Banner = React.forwardRef(function Banner(props: BannerProps, ref: React.Ref<HTMLDivElement>) {\n    const { children, state, onClose } = props;\n    const { texts } = useLocalization();\n    const className = cn('bg-white relative flex items-center gap-2 py-2 px-4 leading-6 shadow-md z-10', props.className);\n\n    return (\n        <div className={className} data-taco=\"banner\" ref={ref}>\n            {getBannerIcon(state)}\n            {children}\n            {onClose ? (\n                <LegacyIconButton\n                    aria-label={texts.banner.close}\n                    className=\"-mr-2 ml-auto self-start\"\n                    icon=\"close\"\n                    appearance=\"discrete\"\n                    onClick={onClose}\n                />\n            ) : null}\n        </div>\n    );\n});\n"],"names":["React","Banner","useLocalization","getBannerIcon","LegacyIconButton"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAoBO,MAAM,SAASA,iBAAM,WAAW,SAASC,QAAO,OAAoB,KAAgC;AACvG,QAAM,EAAE,UAAU,OAAO,QAAY,IAAA;AAC/B,QAAA,EAAE,MAAM,IAAIC,6BAAgB;AAClC,QAAM,YAAY,GAAG,gFAAgF,MAAM,SAAS;AAGhH,SAAAF,iCAAA,cAAC,OAAI,EAAA,WAAsB,aAAU,UAAS,OACzCG,KAAAA,cAAc,KAAK,GACnB,UACA,UACGH,iCAAA;AAAA,IAACI,WAAA;AAAA,IAAA;AAAA,MACG,cAAY,MAAM,OAAO;AAAA,MACzB,WAAU;AAAA,MACV,MAAK;AAAA,MACL,YAAW;AAAA,MACX,SAAS;AAAA,IAAA;AAAA,MAEb,IACR;AAER,CAAC;;"}

package/dist/components/Banner/Banner.js

@@ -1,14 +1,14 @@
 import * as React from "react";
 import cn from "clsx";
 import { getBannerIcon } from "./util.js";
-import { IconButton } from "../IconButton/IconButton.js";
+import { LegacyIconButton } from "../LegacyComponents/IconButton/IconButton.js";
 import { useLocalization } from "../Provider/Localization.js";
 const Banner = React.forwardRef(function Banner2(props, ref) {
   const { children, state, onClose } = props;
   const { texts } = useLocalization();
   const className = cn("bg-white relative flex items-center gap-2 py-2 px-4 leading-6 shadow-md z-10", props.className);
   return /* @__PURE__ */ React.createElement("div", { className, "data-taco": "banner", ref }, getBannerIcon(state), children, onClose ? /* @__PURE__ */ React.createElement(
-    IconButton,
+    LegacyIconButton,
     {
       "aria-label": texts.banner.close,
       className: "-mr-2 ml-auto self-start",