npm - @economic/taco - Versions diffs - 8.2.0-alpha-core-actions.2 → 9.0.0-alpha-v9.0 - Mend

@economic/taco 8.2.0-alpha-core-actions.2 → 9.0.0-alpha-v9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (60) hide show

package/dist/charts/components/Legend.cjs CHANGED Viewed

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

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

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

package/dist/charts/components/Legend.js CHANGED Viewed

@@ -1,13 +1,17 @@
 import React__default from "react";
-import { clsx } from "clsx";
-/* 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";
+import { colors, getThemeColor } from "../utils/color.js";
+function getDarkerThemeColor(color) {
+  const colorName = Object.keys(colors).find((name) => colors[name] === color);
+  if (!colorName) {
+    return void 0;
+  }
+  return getThemeColor(colorName.replace(/-\d+$/, "-300"));
+}
 function Legend(props) {
-  const { hoverIndex, items, onHover: handleHover, onToggle: handleToggle } = props;
+  const { items, onHover: handleHover, onToggle: handleToggle } = props;
   const handleMouseEnter = (item, index) => {
     if (item.isHidden) {
       return;
@@ -23,18 +27,18 @@ function Legend(props) {
   };
   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
-    });
-    let style;
+    const className = "mr-1 flex h-3.5 w-3.5 rounded-sm border";
+    const style = {};
+    const darkerThemeColor = getDarkerThemeColor(item.color);
     if (!item.isHidden) {
-      style = { backgroundColor: item.color };
+      style.backgroundColor = item.color;
+      style.borderColor = darkerThemeColor;
     }
     return /* @__PURE__ */ React__default.createElement(
       "button",
       {
         key: `${item.label}_${index}`,
-        className: "focus-visible:yt-focus flex items-center rounded px-1 !text-xs hover:bg-gray-200",
+        className: "focus-visible:yt-focus flex items-center rounded px-1 !text-xs hover:bg-gray-100",
         onClick: (event) => {
           event == null ? void 0 : event.preventDefault();
           handleClick(item);
@@ -42,7 +46,7 @@ function Legend(props) {
         onMouseEnter: () => handleMouseEnter(item, index),
         onMouseLeave: () => handleMouseLeave()
       },
-      /* @__PURE__ */ React__default.createElement("span", { className, style }, hoverIndex === index ? /* @__PURE__ */ React__default.createElement(Icon, { name: "tick-bold", className: clsx("!h-full !w-full", { "text-white": !item.isHidden }) }) : null),
+      /* @__PURE__ */ React__default.createElement("span", { className, style }, !item.isHidden ? /* @__PURE__ */ React__default.createElement(Icon, { name: "tick-bold", className: "!h-full !w-full text-white" }) : null),
       item.label
     );
   }));

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

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

package/dist/components/Actions/Button/Button.cjs CHANGED Viewed

@@ -32,7 +32,7 @@ const Button = React__namespace.forwardRef(function Button2(props, ref) {
     variant = "secondary",
     size = "md",
     busy,
-    busyMsg,
+    busyMessage,
     disabled,
     icon,
     iconPlacement,
@@ -49,15 +49,15 @@ const Button = React__namespace.forwardRef(function Button2(props, ref) {
     (_a = nativeProps.onClick) == null ? void 0 : _a.call(nativeProps, event);
   }
   const { texts } = Localization.useLocalization();
-  let IconPlacement = void 0;
+  let resolvedIconPlacement = void 0;
   if (icon) {
-    IconPlacement = iconPlacement ? iconPlacement : "start";
+    resolvedIconPlacement = iconPlacement ? iconPlacement : "start";
   }
   const buttonClassName = cn(
     utils.SHARED_BUTTON_CLASSNAMES,
     utils.getAppearanceClasses(variant, purpose),
     utils.sizeClasses[size],
-    !iconOnly && utils.setPaddingClasses(size, IconPlacement),
+    !iconOnly && utils.setPaddingClasses(size, resolvedIconPlacement),
     { "aspect-square p-0": iconOnly }
   );
   return /* @__PURE__ */ React__namespace.createElement(
@@ -77,8 +77,8 @@ const Button = React__namespace.forwardRef(function Button2(props, ref) {
       {
         className: cn("leading-none", {
           invisible: busy,
-          "order-1": IconPlacement === "start" && !iconOnly,
-          "order-3": IconPlacement === "end" && !iconOnly
+          "order-1": resolvedIconPlacement === "start" && !iconOnly,
+          "order-3": resolvedIconPlacement === "end" && !iconOnly
         }),
         "aria-hidden": "true",
         "data-taco": "button-icon"
@@ -91,7 +91,7 @@ const Button = React__namespace.forwardRef(function Button2(props, ref) {
       {
         className: cn("absolute inset-x-3 flex items-center justify-center", { invisible: !busy }),
         role: "progressbar",
-        "aria-label": busyMsg || texts.button.busyMsg,
+        "aria-label": busyMessage || texts.button.busyMessage,
         "data-taco": "button-spinner"
       },
       /* @__PURE__ */ React__namespace.createElement(Spinner.Spinner, { className: "h-4 w-4", "aria-hidden": "true" })

package/dist/components/Actions/Button/Button.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Button.cjs","sources":["../../../../src/components/Actions/Button/Button.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\n\nimport { useLocalization } from '../../Provider/Localization';\n\nimport {\n ButtonSize,\n ButtonPurpose,\n ButtonVariant,\n SHARED_BUTTON_CLASSNAMES,\n sizeClasses,\n getAppearanceClasses,\n setPaddingClasses,\n setIconSizeClass,\n} from './../utils';\nimport { Icon, IconName } from '../../Icon/Icon';\nimport { Spinner } from '../../Spinner/Spinner';\n\nexport type ButtonTexts = {\n /* Message used for button when it is in a busy state /\n ~~busyMsg~~: string;\n};\n\n/\n Button 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 ButtonChildren = string \| React.ReactElement;\n\ntype IconProps =\n \| {\n / Which icon to display /\n icon: IconName;\n / Determines if icon is placed before or after text label — defaults to \"start\" /\n iconPlacement?: 'start' \| 'end';\n iconOnly?: never;\n }\n \| {\n / Which icon to display /\n icon: IconName;\n / Renders only the icon; children becomes the accessible label /\n iconOnly: true;\n iconPlacement?: never;\n }\n \| {\n icon?: never;\n iconPlacement?: never;\n iconOnly?: never;\n };\n\nexport type ButtonIdleProps = ButtonCommonProps & {\n / Adds loading indicator to button /\n busy?: boolean;\n / Conveys message to screen readers when busy is enabled — defaults to \"loading\" /\n ~~busyMsg~~?: string;\n disabled?: boolean;\n};\n\nexport type ButtonBusyProps = ButtonCommonProps & {\n busy: true;\n / Conveys message to screen readers when busy is enabled — defaults to \"loading\" /\n ~~busyMsg~~?: string;\n disabled?: never;\n};\n\ntype ButtonCommonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' \| 'className' \| 'style' \| 'disabled'> &\n IconProps & {\n / Purpose: regular (default) or destructive /\n purpose?: ButtonPurpose;\n /* Variant determines primary, secondary or tertiary use. Secondary will be default /\n variant?: ButtonVariant;\n / Choose between small, medium (default) and large /\n size?: ButtonSize;\n / Is it for submitting, resetting a form or an in page action. Button is default /\n type?: 'button' \| 'submit' \| 'reset';\n /* The text content of the Button /\n children: ButtonChildren;\n };\n\nexport type ButtonProps = ButtonIdleProps \| ButtonBusyProps;\n\nexport const Button = React.forwardRef(function Button(props: ButtonProps, ref: React.Ref<HTMLButtonElement>) {\n const {\n // Destructure className and style props to prevent them from being spread onto the button DOM element\n className: _className,\n style: _style,\n purpose = 'regular',\n variant = 'secondary',\n size = 'md',\n busy,\n ~~busyMsg~~,\n disabled,\n icon,\n iconPlacement,\n iconOnly,\n children,\n ...nativeProps\n } = props as ButtonProps & { className?: never; style?: never };\n\n function handleClick(event: React.MouseEvent<HTMLButtonElement>) {\n if (busy) {\n event.preventDefault();\n return;\n }\n nativeProps.onClick?.(event);\n }\n\n const { texts } = useLocalization();\n\n let ~~IconPlacement~~ = undefined;\n if (icon) {\n ~~IconPlacement~~ = iconPlacement ? iconPlacement : 'start';\n }\n\n const buttonClassName = cn(\n SHARED_BUTTON_CLASSNAMES,\n getAppearanceClasses(variant, purpose),\n sizeClasses[size],\n !iconOnly && setPaddingClasses(size, ~~IconPlacement~~),\n { 'aspect-square p-0': iconOnly }\n );\n\n return (\n <button\n type={nativeProps.type \|\| 'button'}\n {...nativeProps}\n ref={ref}\n className={buttonClassName}\n / Use aria-disabled and a separate aria-live element because aria-busy isn't well supported and doesn't convey state /\n aria-disabled={busy}\n onClick={handleClick}\n disabled={disabled}\n data-taco=\"button\">\n {icon && (\n <span\n className={cn('leading-none', {\n invisible: busy,\n 'order-1': ~~IconPlacement~~ === 'start' && !iconOnly,\n 'order-3': ~~IconPlacement~~ === 'end' && !iconOnly,\n })}\n aria-hidden=\"true\"\n data-taco=\"button-icon\">\n <Icon name={icon} className={cn(setIconSizeClass[size])} />\n </span>\n )}\n\n {iconOnly ? (\n <span className=\"sr-only\" data-taco=\"button-text\">\n {children}\n </span>\n ) : (\n <span className={cn('order-2 leading-none', { invisible: busy })} data-taco=\"button-text\">\n {children}\n </span>\n )}\n\n {/* This pattern is inspired by React ARIA's approach for a busy/pending button:\n https://react-aria.adobe.com/Button#pending */}\n <span\n className={cn('absolute inset-x-3 flex items-center justify-center', { invisible: !busy })}\n role=\"progressbar\"\n aria-label={~~busyMsg~~ \|\| texts.button.~~busyMsg~~}\n data-taco=\"button-spinner\">\n <Spinner className=\"h-4 w-4\" aria-hidden=\"true\" />\n </span>\n </button>\n );\n});\n"],"names":["React","Button","useLocalization","SHARED_BUTTON_CLASSNAMES","getAppearanceClasses","sizeClasses","setPaddingClasses","Icon","setIconSizeClass","Spinner"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAiFO,MAAM,SAASA,iBAAM,WAAW,SAASC,QAAO,OAAoB,KAAmC;AACpG,QAAA;AAAA;AAAA,IAEF,WAAW;AAAA,IACX,OAAO;AAAA,IACP,UAAU;AAAA,IACV,UAAU;AAAA,IACV,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACH;AAEJ,WAAS,YAAY,OAA4C;;AAC7D,QAAI,MAAM;AACN,YAAM,eAAe;AACrB;AAAA,IAAA;AAEJ,sBAAY,YAAZ,qCAAsB;AAAA,EAAK;AAGzB,QAAA,EAAE,MAAM,IAAIC,6BAAgB;AAElC,MAAI,~~gBAAgB~~;~~AACpB~~,MAAI,MAAM;AACN,~~oBAAgB~~,gBAAgB,gBAAgB;AAAA,EAAA;~~AAGpD~~,QAAM,kBAAkB;AAAA,IACpBC,MAAA;AAAA,IACAC,MAAA,qBAAqB,SAAS,OAAO;AAAA,IACrCC,MAAAA,YAAY,IAAI;AAAA,IAChB,CAAC,YAAYC,MAAAA,kBAAkB,MAAM,~~aAAa~~;AAAA,~~IAClD~~,EAAE,qBAAqB,SAAS;AAAA,EACpC;AAGI,SAAAN,iCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,MAAM,YAAY,QAAQ;AAAA,MACzB,GAAG;AAAA,MACJ;AAAA,MACA,WAAW;AAAA,MAEX,iBAAe;AAAA,MACf,SAAS;AAAA,MACT;AAAA,MACA,aAAU;AAAA,IAAA;AAAA,IACT,QACGA,iCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,GAAG,gBAAgB;AAAA,UAC1B,WAAW;AAAA,UACX,WAAW,~~kBAAkB~~,WAAW,CAAC;AAAA,~~UACzC~~,WAAW,~~kBAAkB~~,SAAS,CAAC;AAAA,QAAA,~~CAC1C~~;AAAA,QACD,eAAY;AAAA,QACZ,aAAU;AAAA,MAAA;AAAA,MACVA,iCAAA,cAACO,aAAK,MAAM,MAAM,WAAW,GAAGC,MAAAA,iBAAiB,IAAI,CAAC,EAAG,CAAA;AAAA,IAC7D;AAAA,IAGH,0DACI,QAAK,EAAA,WAAU,WAAU,aAAU,iBAC/B,QACL,IAEAR,iCAAA,cAAC,UAAK,WAAW,GAAG,wBAAwB,EAAE,WAAW,MAAM,GAAG,aAAU,cAAA,GACvE,QACL;AAAA,IAKJA,iCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,GAAG,uDAAuD,EAAE,WAAW,CAAC,MAAM;AAAA,QACzF,MAAK;AAAA,QACL,cAAY,~~WAAW~~,MAAM,OAAO;AAAA,~~QACpC~~,aAAU;AAAA,MAAA;AAAA,MACTA,iCAAA,cAAAS,iBAAA,EAAQ,WAAU,WAAU,eAAY,OAAO,CAAA;AAAA,IAAA;AAAA,EAExD;AAER,CAAC;;"}
1	+ {"version":3,"file":"Button.cjs","sources":["../../../../src/components/Actions/Button/Button.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\n\nimport { useLocalization } from '../../Provider/Localization';\n\nimport {\n ButtonSize,\n ButtonPurpose,\n ButtonVariant,\n SHARED_BUTTON_CLASSNAMES,\n sizeClasses,\n getAppearanceClasses,\n setPaddingClasses,\n setIconSizeClass,\n} from './../utils';\nimport { Icon, IconName } from '../../Icon/Icon';\nimport { Spinner } from '../../Spinner/Spinner';\n\nexport type ButtonTexts = {\n /* Message used for button when it is in a busy state /\n busyMessage: string;\n};\n\n/\n Button 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 ButtonChildren = string \| React.ReactElement;\n\ntype IconProps =\n \| {\n / Which icon to display /\n icon: IconName;\n / Determines if icon is placed before or after text label — defaults to \"start\" /\n iconPlacement?: 'start' \| 'end';\n iconOnly?: never;\n }\n \| {\n / Which icon to display /\n icon: IconName;\n / Renders only the icon; children becomes the accessible label /\n iconOnly: true;\n iconPlacement?: never;\n }\n \| {\n icon?: never;\n iconPlacement?: never;\n iconOnly?: never;\n };\n\nexport type ButtonIdleProps = ButtonCommonProps & {\n / Adds loading indicator to button /\n busy?: boolean;\n / Conveys message to screen readers when busy is enabled — defaults to \"loading\" /\n busyMessage?: string;\n disabled?: boolean;\n};\n\nexport type ButtonBusyProps = ButtonCommonProps & {\n busy: true;\n / Conveys message to screen readers when busy is enabled — defaults to \"loading\" /\n busyMessage?: string;\n disabled?: never;\n};\n\ntype ButtonCommonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' \| 'className' \| 'style' \| 'disabled'> &\n IconProps & {\n / Purpose: regular (default) or destructive /\n purpose?: ButtonPurpose;\n /* Variant determines primary, secondary or tertiary use. Secondary will be default /\n variant?: ButtonVariant;\n / Choose between small, medium (default) and large /\n size?: ButtonSize;\n / Is it for submitting, resetting a form or an in page action. Button is default /\n type?: 'button' \| 'submit' \| 'reset';\n /* The text content of the Button /\n children: ButtonChildren;\n };\n\nexport type ButtonProps = ButtonIdleProps \| ButtonBusyProps;\n\nexport const Button = React.forwardRef(function Button(props: ButtonProps, ref: React.Ref<HTMLButtonElement>) {\n const {\n // Destructure className and style props to prevent them from being spread onto the button DOM element\n className: _className,\n style: _style,\n purpose = 'regular',\n variant = 'secondary',\n size = 'md',\n busy,\n busyMessage,\n disabled,\n icon,\n iconPlacement,\n iconOnly,\n children,\n ...nativeProps\n } = props as ButtonProps & { className?: never; style?: never };\n\n function handleClick(event: React.MouseEvent<HTMLButtonElement>) {\n if (busy) {\n event.preventDefault();\n return;\n }\n nativeProps.onClick?.(event);\n }\n\n const { texts } = useLocalization();\n\n let resolvedIconPlacement = undefined;\n if (icon) {\n resolvedIconPlacement = iconPlacement ? iconPlacement : 'start';\n }\n\n const buttonClassName = cn(\n SHARED_BUTTON_CLASSNAMES,\n getAppearanceClasses(variant, purpose),\n sizeClasses[size],\n !iconOnly && setPaddingClasses(size, resolvedIconPlacement),\n { 'aspect-square p-0': iconOnly }\n );\n\n return (\n <button\n type={nativeProps.type \|\| 'button'}\n {...nativeProps}\n ref={ref}\n className={buttonClassName}\n / Use aria-disabled and a separate aria-live element because aria-busy isn't well supported and doesn't convey state /\n aria-disabled={busy}\n onClick={handleClick}\n disabled={disabled}\n data-taco=\"button\">\n {icon && (\n <span\n className={cn('leading-none', {\n invisible: busy,\n 'order-1': resolvedIconPlacement === 'start' && !iconOnly,\n 'order-3': resolvedIconPlacement === 'end' && !iconOnly,\n })}\n aria-hidden=\"true\"\n data-taco=\"button-icon\">\n <Icon name={icon} className={cn(setIconSizeClass[size])} />\n </span>\n )}\n\n {iconOnly ? (\n <span className=\"sr-only\" data-taco=\"button-text\">\n {children}\n </span>\n ) : (\n <span className={cn('order-2 leading-none', { invisible: busy })} data-taco=\"button-text\">\n {children}\n </span>\n )}\n\n {/* This pattern is inspired by React ARIA's approach for a busy/pending button:\n https://react-aria.adobe.com/Button#pending */}\n <span\n className={cn('absolute inset-x-3 flex items-center justify-center', { invisible: !busy })}\n role=\"progressbar\"\n aria-label={busyMessage \|\| texts.button.busyMessage}\n data-taco=\"button-spinner\">\n <Spinner className=\"h-4 w-4\" aria-hidden=\"true\" />\n </span>\n </button>\n );\n});\n"],"names":["React","Button","useLocalization","SHARED_BUTTON_CLASSNAMES","getAppearanceClasses","sizeClasses","setPaddingClasses","Icon","setIconSizeClass","Spinner"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAiFO,MAAM,SAASA,iBAAM,WAAW,SAASC,QAAO,OAAoB,KAAmC;AACpG,QAAA;AAAA;AAAA,IAEF,WAAW;AAAA,IACX,OAAO;AAAA,IACP,UAAU;AAAA,IACV,UAAU;AAAA,IACV,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACH;AAEJ,WAAS,YAAY,OAA4C;;AAC7D,QAAI,MAAM;AACN,YAAM,eAAe;AACrB;AAAA,IAAA;AAEJ,sBAAY,YAAZ,qCAAsB;AAAA,EAAK;AAGzB,QAAA,EAAE,MAAM,IAAIC,6BAAgB;AAElC,MAAI,wBAAwB;AAC5B,MAAI,MAAM;AACN,4BAAwB,gBAAgB,gBAAgB;AAAA,EAAA;AAG5D,QAAM,kBAAkB;AAAA,IACpBC,MAAA;AAAA,IACAC,MAAA,qBAAqB,SAAS,OAAO;AAAA,IACrCC,MAAAA,YAAY,IAAI;AAAA,IAChB,CAAC,YAAYC,MAAAA,kBAAkB,MAAM,qBAAqB;AAAA,IAC1D,EAAE,qBAAqB,SAAS;AAAA,EACpC;AAGI,SAAAN,iCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,MAAM,YAAY,QAAQ;AAAA,MACzB,GAAG;AAAA,MACJ;AAAA,MACA,WAAW;AAAA,MAEX,iBAAe;AAAA,MACf,SAAS;AAAA,MACT;AAAA,MACA,aAAU;AAAA,IAAA;AAAA,IACT,QACGA,iCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,GAAG,gBAAgB;AAAA,UAC1B,WAAW;AAAA,UACX,WAAW,0BAA0B,WAAW,CAAC;AAAA,UACjD,WAAW,0BAA0B,SAAS,CAAC;AAAA,QAAA,CAClD;AAAA,QACD,eAAY;AAAA,QACZ,aAAU;AAAA,MAAA;AAAA,MACVA,iCAAA,cAACO,aAAK,MAAM,MAAM,WAAW,GAAGC,MAAAA,iBAAiB,IAAI,CAAC,EAAG,CAAA;AAAA,IAC7D;AAAA,IAGH,0DACI,QAAK,EAAA,WAAU,WAAU,aAAU,iBAC/B,QACL,IAEAR,iCAAA,cAAC,UAAK,WAAW,GAAG,wBAAwB,EAAE,WAAW,MAAM,GAAG,aAAU,cAAA,GACvE,QACL;AAAA,IAKJA,iCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,GAAG,uDAAuD,EAAE,WAAW,CAAC,MAAM;AAAA,QACzF,MAAK;AAAA,QACL,cAAY,eAAe,MAAM,OAAO;AAAA,QACxC,aAAU;AAAA,MAAA;AAAA,MACTA,iCAAA,cAAAS,iBAAA,EAAQ,WAAU,WAAU,eAAY,OAAO,CAAA;AAAA,IAAA;AAAA,EAExD;AAER,CAAC;;"}

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

@@ -2,7 +2,7 @@ import { ButtonSize, ButtonPurpose, ButtonVariant } from './../utils';
 import { IconName } from '../../Icon/Icon';
 import * as React from 'react';
 export type ButtonTexts = {
-    busyMsg: string;
+    busyMessage: string;
 };
 /**
  * Button Text: string text (literals, template literals, i18n helpers that return `string`, string constants),
@@ -24,12 +24,12 @@ type IconProps = {
 };
 export type ButtonIdleProps = ButtonCommonProps & {
     busy?: boolean;
-    busyMsg?: string;
+    busyMessage?: string;
     disabled?: boolean;
 };
 export type ButtonBusyProps = ButtonCommonProps & {
     busy: true;
-    busyMsg?: string;
+    busyMessage?: string;
     disabled?: never;
 };
 type ButtonCommonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'className' | 'style' | 'disabled'> & IconProps & {

package/dist/components/Actions/Button/Button.js CHANGED Viewed

@@ -13,7 +13,7 @@ const Button = React.forwardRef(function Button2(props, ref) {
     variant = "secondary",
     size = "md",
     busy,
-    busyMsg,
+    busyMessage,
     disabled,
     icon,
     iconPlacement,
@@ -30,15 +30,15 @@ const Button = React.forwardRef(function Button2(props, ref) {
     (_a = nativeProps.onClick) == null ? void 0 : _a.call(nativeProps, event);
   }
   const { texts } = useLocalization();
-  let IconPlacement = void 0;
+  let resolvedIconPlacement = void 0;
   if (icon) {
-    IconPlacement = iconPlacement ? iconPlacement : "start";
+    resolvedIconPlacement = iconPlacement ? iconPlacement : "start";
   }
   const buttonClassName = cn(
     SHARED_BUTTON_CLASSNAMES,
     getAppearanceClasses(variant, purpose),
     sizeClasses[size],
-    !iconOnly && setPaddingClasses(size, IconPlacement),
+    !iconOnly && setPaddingClasses(size, resolvedIconPlacement),
     { "aspect-square p-0": iconOnly }
   );
   return /* @__PURE__ */ React.createElement(
@@ -58,8 +58,8 @@ const Button = React.forwardRef(function Button2(props, ref) {
       {
         className: cn("leading-none", {
           invisible: busy,
-          "order-1": IconPlacement === "start" && !iconOnly,
-          "order-3": IconPlacement === "end" && !iconOnly
+          "order-1": resolvedIconPlacement === "start" && !iconOnly,
+          "order-3": resolvedIconPlacement === "end" && !iconOnly
         }),
         "aria-hidden": "true",
         "data-taco": "button-icon"
@@ -72,7 +72,7 @@ const Button = React.forwardRef(function Button2(props, ref) {
       {
         className: cn("absolute inset-x-3 flex items-center justify-center", { invisible: !busy }),
         role: "progressbar",
-        "aria-label": busyMsg || texts.button.busyMsg,
+        "aria-label": busyMessage || texts.button.busyMessage,
         "data-taco": "button-spinner"
       },
       /* @__PURE__ */ React.createElement(Spinner, { className: "h-4 w-4", "aria-hidden": "true" })

package/dist/components/Actions/Button/Button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Button.js","sources":["../../../../src/components/Actions/Button/Button.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\n\nimport { useLocalization } from '../../Provider/Localization';\n\nimport {\n ButtonSize,\n ButtonPurpose,\n ButtonVariant,\n SHARED_BUTTON_CLASSNAMES,\n sizeClasses,\n getAppearanceClasses,\n setPaddingClasses,\n setIconSizeClass,\n} from './../utils';\nimport { Icon, IconName } from '../../Icon/Icon';\nimport { Spinner } from '../../Spinner/Spinner';\n\nexport type ButtonTexts = {\n /* Message used for button when it is in a busy state /\n ~~busyMsg~~: string;\n};\n\n/\n Button 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 ButtonChildren = string \| React.ReactElement;\n\ntype IconProps =\n \| {\n / Which icon to display /\n icon: IconName;\n / Determines if icon is placed before or after text label — defaults to \"start\" /\n iconPlacement?: 'start' \| 'end';\n iconOnly?: never;\n }\n \| {\n / Which icon to display /\n icon: IconName;\n / Renders only the icon; children becomes the accessible label /\n iconOnly: true;\n iconPlacement?: never;\n }\n \| {\n icon?: never;\n iconPlacement?: never;\n iconOnly?: never;\n };\n\nexport type ButtonIdleProps = ButtonCommonProps & {\n / Adds loading indicator to button /\n busy?: boolean;\n / Conveys message to screen readers when busy is enabled — defaults to \"loading\" /\n ~~busyMsg~~?: string;\n disabled?: boolean;\n};\n\nexport type ButtonBusyProps = ButtonCommonProps & {\n busy: true;\n / Conveys message to screen readers when busy is enabled — defaults to \"loading\" /\n ~~busyMsg~~?: string;\n disabled?: never;\n};\n\ntype ButtonCommonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' \| 'className' \| 'style' \| 'disabled'> &\n IconProps & {\n / Purpose: regular (default) or destructive /\n purpose?: ButtonPurpose;\n /* Variant determines primary, secondary or tertiary use. Secondary will be default /\n variant?: ButtonVariant;\n / Choose between small, medium (default) and large /\n size?: ButtonSize;\n / Is it for submitting, resetting a form or an in page action. Button is default /\n type?: 'button' \| 'submit' \| 'reset';\n /* The text content of the Button /\n children: ButtonChildren;\n };\n\nexport type ButtonProps = ButtonIdleProps \| ButtonBusyProps;\n\nexport const Button = React.forwardRef(function Button(props: ButtonProps, ref: React.Ref<HTMLButtonElement>) {\n const {\n // Destructure className and style props to prevent them from being spread onto the button DOM element\n className: _className,\n style: _style,\n purpose = 'regular',\n variant = 'secondary',\n size = 'md',\n busy,\n ~~busyMsg~~,\n disabled,\n icon,\n iconPlacement,\n iconOnly,\n children,\n ...nativeProps\n } = props as ButtonProps & { className?: never; style?: never };\n\n function handleClick(event: React.MouseEvent<HTMLButtonElement>) {\n if (busy) {\n event.preventDefault();\n return;\n }\n nativeProps.onClick?.(event);\n }\n\n const { texts } = useLocalization();\n\n let ~~IconPlacement~~ = undefined;\n if (icon) {\n ~~IconPlacement~~ = iconPlacement ? iconPlacement : 'start';\n }\n\n const buttonClassName = cn(\n SHARED_BUTTON_CLASSNAMES,\n getAppearanceClasses(variant, purpose),\n sizeClasses[size],\n !iconOnly && setPaddingClasses(size, ~~IconPlacement~~),\n { 'aspect-square p-0': iconOnly }\n );\n\n return (\n <button\n type={nativeProps.type \|\| 'button'}\n {...nativeProps}\n ref={ref}\n className={buttonClassName}\n / Use aria-disabled and a separate aria-live element because aria-busy isn't well supported and doesn't convey state /\n aria-disabled={busy}\n onClick={handleClick}\n disabled={disabled}\n data-taco=\"button\">\n {icon && (\n <span\n className={cn('leading-none', {\n invisible: busy,\n 'order-1': ~~IconPlacement~~ === 'start' && !iconOnly,\n 'order-3': ~~IconPlacement~~ === 'end' && !iconOnly,\n })}\n aria-hidden=\"true\"\n data-taco=\"button-icon\">\n <Icon name={icon} className={cn(setIconSizeClass[size])} />\n </span>\n )}\n\n {iconOnly ? (\n <span className=\"sr-only\" data-taco=\"button-text\">\n {children}\n </span>\n ) : (\n <span className={cn('order-2 leading-none', { invisible: busy })} data-taco=\"button-text\">\n {children}\n </span>\n )}\n\n {/* This pattern is inspired by React ARIA's approach for a busy/pending button:\n https://react-aria.adobe.com/Button#pending */}\n <span\n className={cn('absolute inset-x-3 flex items-center justify-center', { invisible: !busy })}\n role=\"progressbar\"\n aria-label={~~busyMsg~~ \|\| texts.button.~~busyMsg~~}\n data-taco=\"button-spinner\">\n <Spinner className=\"h-4 w-4\" aria-hidden=\"true\" />\n </span>\n </button>\n );\n});\n"],"names":["Button"],"mappings":";;;;;;AAiFO,MAAM,SAAS,MAAM,WAAW,SAASA,QAAO,OAAoB,KAAmC;AACpG,QAAA;AAAA;AAAA,IAEF,WAAW;AAAA,IACX,OAAO;AAAA,IACP,UAAU;AAAA,IACV,UAAU;AAAA,IACV,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACH;AAEJ,WAAS,YAAY,OAA4C;;AAC7D,QAAI,MAAM;AACN,YAAM,eAAe;AACrB;AAAA,IAAA;AAEJ,sBAAY,YAAZ,qCAAsB;AAAA,EAAK;AAGzB,QAAA,EAAE,MAAM,IAAI,gBAAgB;AAElC,MAAI,~~gBAAgB~~;~~AACpB~~,MAAI,MAAM;AACN,~~oBAAgB~~,gBAAgB,gBAAgB;AAAA,EAAA;~~AAGpD~~,QAAM,kBAAkB;AAAA,IACpB;AAAA,IACA,qBAAqB,SAAS,OAAO;AAAA,IACrC,YAAY,IAAI;AAAA,IAChB,CAAC,YAAY,kBAAkB,MAAM,~~aAAa~~;AAAA,~~IAClD~~,EAAE,qBAAqB,SAAS;AAAA,EACpC;AAGI,SAAA,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,MAAM,YAAY,QAAQ;AAAA,MACzB,GAAG;AAAA,MACJ;AAAA,MACA,WAAW;AAAA,MAEX,iBAAe;AAAA,MACf,SAAS;AAAA,MACT;AAAA,MACA,aAAU;AAAA,IAAA;AAAA,IACT,QACG,sBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,GAAG,gBAAgB;AAAA,UAC1B,WAAW;AAAA,UACX,WAAW,~~kBAAkB~~,WAAW,CAAC;AAAA,~~UACzC~~,WAAW,~~kBAAkB~~,SAAS,CAAC;AAAA,QAAA,~~CAC1C~~;AAAA,QACD,eAAY;AAAA,QACZ,aAAU;AAAA,MAAA;AAAA,MACV,sBAAA,cAAC,QAAK,MAAM,MAAM,WAAW,GAAG,iBAAiB,IAAI,CAAC,EAAG,CAAA;AAAA,IAC7D;AAAA,IAGH,+CACI,QAAK,EAAA,WAAU,WAAU,aAAU,iBAC/B,QACL,IAEA,sBAAA,cAAC,UAAK,WAAW,GAAG,wBAAwB,EAAE,WAAW,MAAM,GAAG,aAAU,cAAA,GACvE,QACL;AAAA,IAKJ,sBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,GAAG,uDAAuD,EAAE,WAAW,CAAC,MAAM;AAAA,QACzF,MAAK;AAAA,QACL,cAAY,~~WAAW~~,MAAM,OAAO;AAAA,~~QACpC~~,aAAU;AAAA,MAAA;AAAA,MACT,sBAAA,cAAA,SAAA,EAAQ,WAAU,WAAU,eAAY,OAAO,CAAA;AAAA,IAAA;AAAA,EAExD;AAER,CAAC;"}
1	+ {"version":3,"file":"Button.js","sources":["../../../../src/components/Actions/Button/Button.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\n\nimport { useLocalization } from '../../Provider/Localization';\n\nimport {\n ButtonSize,\n ButtonPurpose,\n ButtonVariant,\n SHARED_BUTTON_CLASSNAMES,\n sizeClasses,\n getAppearanceClasses,\n setPaddingClasses,\n setIconSizeClass,\n} from './../utils';\nimport { Icon, IconName } from '../../Icon/Icon';\nimport { Spinner } from '../../Spinner/Spinner';\n\nexport type ButtonTexts = {\n /* Message used for button when it is in a busy state /\n busyMessage: string;\n};\n\n/\n Button 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 ButtonChildren = string \| React.ReactElement;\n\ntype IconProps =\n \| {\n / Which icon to display /\n icon: IconName;\n / Determines if icon is placed before or after text label — defaults to \"start\" /\n iconPlacement?: 'start' \| 'end';\n iconOnly?: never;\n }\n \| {\n / Which icon to display /\n icon: IconName;\n / Renders only the icon; children becomes the accessible label /\n iconOnly: true;\n iconPlacement?: never;\n }\n \| {\n icon?: never;\n iconPlacement?: never;\n iconOnly?: never;\n };\n\nexport type ButtonIdleProps = ButtonCommonProps & {\n / Adds loading indicator to button /\n busy?: boolean;\n / Conveys message to screen readers when busy is enabled — defaults to \"loading\" /\n busyMessage?: string;\n disabled?: boolean;\n};\n\nexport type ButtonBusyProps = ButtonCommonProps & {\n busy: true;\n / Conveys message to screen readers when busy is enabled — defaults to \"loading\" /\n busyMessage?: string;\n disabled?: never;\n};\n\ntype ButtonCommonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' \| 'className' \| 'style' \| 'disabled'> &\n IconProps & {\n / Purpose: regular (default) or destructive /\n purpose?: ButtonPurpose;\n /* Variant determines primary, secondary or tertiary use. Secondary will be default /\n variant?: ButtonVariant;\n / Choose between small, medium (default) and large /\n size?: ButtonSize;\n / Is it for submitting, resetting a form or an in page action. Button is default /\n type?: 'button' \| 'submit' \| 'reset';\n /* The text content of the Button /\n children: ButtonChildren;\n };\n\nexport type ButtonProps = ButtonIdleProps \| ButtonBusyProps;\n\nexport const Button = React.forwardRef(function Button(props: ButtonProps, ref: React.Ref<HTMLButtonElement>) {\n const {\n // Destructure className and style props to prevent them from being spread onto the button DOM element\n className: _className,\n style: _style,\n purpose = 'regular',\n variant = 'secondary',\n size = 'md',\n busy,\n busyMessage,\n disabled,\n icon,\n iconPlacement,\n iconOnly,\n children,\n ...nativeProps\n } = props as ButtonProps & { className?: never; style?: never };\n\n function handleClick(event: React.MouseEvent<HTMLButtonElement>) {\n if (busy) {\n event.preventDefault();\n return;\n }\n nativeProps.onClick?.(event);\n }\n\n const { texts } = useLocalization();\n\n let resolvedIconPlacement = undefined;\n if (icon) {\n resolvedIconPlacement = iconPlacement ? iconPlacement : 'start';\n }\n\n const buttonClassName = cn(\n SHARED_BUTTON_CLASSNAMES,\n getAppearanceClasses(variant, purpose),\n sizeClasses[size],\n !iconOnly && setPaddingClasses(size, resolvedIconPlacement),\n { 'aspect-square p-0': iconOnly }\n );\n\n return (\n <button\n type={nativeProps.type \|\| 'button'}\n {...nativeProps}\n ref={ref}\n className={buttonClassName}\n / Use aria-disabled and a separate aria-live element because aria-busy isn't well supported and doesn't convey state /\n aria-disabled={busy}\n onClick={handleClick}\n disabled={disabled}\n data-taco=\"button\">\n {icon && (\n <span\n className={cn('leading-none', {\n invisible: busy,\n 'order-1': resolvedIconPlacement === 'start' && !iconOnly,\n 'order-3': resolvedIconPlacement === 'end' && !iconOnly,\n })}\n aria-hidden=\"true\"\n data-taco=\"button-icon\">\n <Icon name={icon} className={cn(setIconSizeClass[size])} />\n </span>\n )}\n\n {iconOnly ? (\n <span className=\"sr-only\" data-taco=\"button-text\">\n {children}\n </span>\n ) : (\n <span className={cn('order-2 leading-none', { invisible: busy })} data-taco=\"button-text\">\n {children}\n </span>\n )}\n\n {/* This pattern is inspired by React ARIA's approach for a busy/pending button:\n https://react-aria.adobe.com/Button#pending */}\n <span\n className={cn('absolute inset-x-3 flex items-center justify-center', { invisible: !busy })}\n role=\"progressbar\"\n aria-label={busyMessage \|\| texts.button.busyMessage}\n data-taco=\"button-spinner\">\n <Spinner className=\"h-4 w-4\" aria-hidden=\"true\" />\n </span>\n </button>\n );\n});\n"],"names":["Button"],"mappings":";;;;;;AAiFO,MAAM,SAAS,MAAM,WAAW,SAASA,QAAO,OAAoB,KAAmC;AACpG,QAAA;AAAA;AAAA,IAEF,WAAW;AAAA,IACX,OAAO;AAAA,IACP,UAAU;AAAA,IACV,UAAU;AAAA,IACV,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACH;AAEJ,WAAS,YAAY,OAA4C;;AAC7D,QAAI,MAAM;AACN,YAAM,eAAe;AACrB;AAAA,IAAA;AAEJ,sBAAY,YAAZ,qCAAsB;AAAA,EAAK;AAGzB,QAAA,EAAE,MAAM,IAAI,gBAAgB;AAElC,MAAI,wBAAwB;AAC5B,MAAI,MAAM;AACN,4BAAwB,gBAAgB,gBAAgB;AAAA,EAAA;AAG5D,QAAM,kBAAkB;AAAA,IACpB;AAAA,IACA,qBAAqB,SAAS,OAAO;AAAA,IACrC,YAAY,IAAI;AAAA,IAChB,CAAC,YAAY,kBAAkB,MAAM,qBAAqB;AAAA,IAC1D,EAAE,qBAAqB,SAAS;AAAA,EACpC;AAGI,SAAA,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,MAAM,YAAY,QAAQ;AAAA,MACzB,GAAG;AAAA,MACJ;AAAA,MACA,WAAW;AAAA,MAEX,iBAAe;AAAA,MACf,SAAS;AAAA,MACT;AAAA,MACA,aAAU;AAAA,IAAA;AAAA,IACT,QACG,sBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,GAAG,gBAAgB;AAAA,UAC1B,WAAW;AAAA,UACX,WAAW,0BAA0B,WAAW,CAAC;AAAA,UACjD,WAAW,0BAA0B,SAAS,CAAC;AAAA,QAAA,CAClD;AAAA,QACD,eAAY;AAAA,QACZ,aAAU;AAAA,MAAA;AAAA,MACV,sBAAA,cAAC,QAAK,MAAM,MAAM,WAAW,GAAG,iBAAiB,IAAI,CAAC,EAAG,CAAA;AAAA,IAC7D;AAAA,IAGH,+CACI,QAAK,EAAA,WAAU,WAAU,aAAU,iBAC/B,QACL,IAEA,sBAAA,cAAC,UAAK,WAAW,GAAG,wBAAwB,EAAE,WAAW,MAAM,GAAG,aAAU,cAAA,GACvE,QACL;AAAA,IAKJ,sBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,GAAG,uDAAuD,EAAE,WAAW,CAAC,MAAM;AAAA,QACzF,MAAK;AAAA,QACL,cAAY,eAAe,MAAM,OAAO;AAAA,QACxC,aAAU;AAAA,MAAA;AAAA,MACT,sBAAA,cAAA,SAAA,EAAQ,WAAU,WAAU,eAAY,OAAO,CAAA;AAAA,IAAA;AAAA,EAExD;AAER,CAAC;"}

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

	@@ -1 +1 @@
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, icon && '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,MAAA,qBAAqB,SAAS,SAAS;AAAA,IACvC,CAAC,YAAYC,MAAkB,kBAAA,MAAM,QAAQ,KAAK;AAAA,IAClDC,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;;"}
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, icon && '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,MAAA,qBAAqB,SAAS,SAAS;AAAA,IACvC,CAAC,YAAYC,MAAkB,kBAAA,MAAM,QAAQ,KAAK;AAAA,IAClDC,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 CHANGED Viewed

@@ -21,7 +21,7 @@ type IconProps = {
 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  */
+    /** 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;

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

	@@ -1 +1 @@
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, icon && '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,SAAS,SAAS;AAAA,IACvC,CAAC,YAAY,kBAAkB,MAAM,QAAQ,KAAK;AAAA,IAClD,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;"}
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, icon && '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,SAAS,SAAS;AAAA,IACvC,CAAC,YAAY,kBAAkB,MAAM,QAAQ,KAAK;AAAA,IAClD,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/Layout/components/Sidebar.cjs CHANGED Viewed

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

package/dist/components/Layout/components/Sidebar.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Sidebar.cjs","sources":["../../../../src/components/Layout/components/Sidebar.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport { LayoutContext } from './Context';\nimport { useIsLargeScreen } from '../../../hooks/useIsLargeScreen';\n\nexport type LayoutSidebarProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n children:\n \| React.ReactNode\n \| (({\n isLargeScreen,\n open,\n toggleSidebar,\n }: {\n isLargeScreen: boolean;\n open: boolean;\n toggleSidebar: () => void;\n }) => React.ReactNode);\n};\n\nexport const Sidebar = React.forwardRef<HTMLDivElement, LayoutSidebarProps>(function LayoutSidebar(props, ref) {\n const { children, ...attributes } = props;\n const { sidebarOpen, setSidebarOpen } = React.useContext(LayoutContext);\n const isLargeScreen = useIsLargeScreen();\n const isSmallScreen = !isLargeScreen;\n\n // if it's a large screen we override the open state and make it always visible\n const isVisible = isLargeScreen \|\| sidebarOpen;\n\n // ensures the menu is always closed by default when resizing to a smaller window size\n React.useEffect(() => {\n setSidebarOpen(isLargeScreen);\n }, [isLargeScreen]);\n\n React.useEffect(() => {\n const handleEscapeKey = (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n event.preventDefault();\n event.stopPropagation();\n setSidebarOpen(false);\n }\n };\n\n if (isSmallScreen && sidebarOpen) {\n window.addEventListener('keydown', handleEscapeKey);\n }\n\n return () => {\n window.removeEventListener('keydown', handleEscapeKey);\n };\n }, [isSmallScreen, sidebarOpen]);\n\n const showBackdrop = isSmallScreen && sidebarOpen === true;\n\n const [ready, setReady] = React.useState(isSmallScreen);\n\n const className = cn(\n 'bg-gray-50 h-full w-64 flex-shrink-0 flex-grow-0 print:hidden',\n {\n 'absolute z-10 aria-hidden:-translate-x-64 ': isSmallScreen,\n // prevent animation when crossing the boundary from large to small screen,\n // this prevents awkward animation in the edge case (resizing the browser, instead of starting at a given size)\n invisible: isSmallScreen && !ready,\n 'transition-[transform] duration-300 visible': isSmallScreen && ready,\n 'border-r-2 border-~~black~~-~~subtle~~ ': !showBackdrop,\n },\n props.className\n );\n\n React.useEffect(() => {\n // ensure state is updated in the next cpu tick so that the animation definitely doesn't run\n setTimeout(() => {\n setReady(isSmallScreen);\n }, 1);\n }, [isSmallScreen]);\n\n const toggleSidebar = () => setSidebarOpen(open => !open);\n const content = typeof children === 'function' ? children({ isLargeScreen, open: sidebarOpen, toggleSidebar }) : children;\n\n if (!content) {\n return null;\n }\n\n return (\n <>\n <nav {...attributes} data-responsive={isSmallScreen} aria-hidden={!isVisible} className={className} ref={ref}>\n {content}\n </nav>\n <AnimatePresence>\n {showBackdrop && (\n <motion.div\n aria-hidden\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n onClick={() => setSidebarOpen(false)}\n className=\"bg-brand-midnight/[0.3] fixed inset-0 z-[1] cursor-default overflow-y-auto print:absolute print:overflow-visible\"\n />\n )}\n </AnimatePresence>\n </>\n );\n});\n"],"names":["LayoutContext","useIsLargeScreen","AnimatePresence","motion"],"mappings":";;;;;;;AAoBO,MAAM,UAAU,MAAM,WAA+C,SAAS,cAAc,OAAO,KAAK;AAC3G,QAAM,EAAE,UAAU,GAAG,WAAA,IAAe;AACpC,QAAM,EAAE,aAAa,eAAA,IAAmB,MAAM,WAAWA,QAAAA,aAAa;AACtE,QAAM,gBAAgBC,iBAAAA,iBAAiB;AACvC,QAAM,gBAAgB,CAAC;AAGvB,QAAM,YAAY,iBAAiB;AAGnC,QAAM,UAAU,MAAM;AAClB,mBAAe,aAAa;AAAA,EAAA,GAC7B,CAAC,aAAa,CAAC;AAElB,QAAM,UAAU,MAAM;AACZ,UAAA,kBAAkB,CAAC,UAAyB;AAC1C,UAAA,MAAM,QAAQ,UAAU;AACxB,cAAM,eAAe;AACrB,cAAM,gBAAgB;AACtB,uBAAe,KAAK;AAAA,MAAA;AAAA,IAE5B;AAEA,QAAI,iBAAiB,aAAa;AACvB,aAAA,iBAAiB,WAAW,eAAe;AAAA,IAAA;AAGtD,WAAO,MAAM;AACF,aAAA,oBAAoB,WAAW,eAAe;AAAA,IACzD;AAAA,EAAA,GACD,CAAC,eAAe,WAAW,CAAC;AAEzB,QAAA,eAAe,iBAAiB,gBAAgB;AAEtD,QAAM,CAAC,OAAO,QAAQ,IAAI,MAAM,SAAS,aAAa;AAEtD,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,8CAA8C;AAAA;AAAA;AAAA,MAG9C,WAAW,iBAAiB,CAAC;AAAA,MAC7B,+CAA+C,iBAAiB;AAAA,MAChE,~~mCAAmC,~~CAAC;AAAA,~~IACxC~~;AAAA,IACA,MAAM;AAAA,EACV;AAEA,QAAM,UAAU,MAAM;AAElB,eAAW,MAAM;AACb,eAAS,aAAa;AAAA,OACvB,CAAC;AAAA,EAAA,GACL,CAAC,aAAa,CAAC;AAElB,QAAM,gBAAgB,MAAM,eAAe,CAAA,SAAQ,CAAC,IAAI;AAClD,QAAA,UAAU,OAAO,aAAa,aAAa,SAAS,EAAE,eAAe,MAAM,aAAa,cAAc,CAAC,IAAI;AAEjH,MAAI,CAAC,SAAS;AACH,WAAA;AAAA,EAAA;AAGX,mEAES,sBAAA,cAAA,OAAA,EAAK,GAAG,YAAY,mBAAiB,eAAe,eAAa,CAAC,WAAW,WAAsB,IAC/F,GAAA,OACL,GACA,sBAAA,cAACC,aAAAA,uBACI,gBACG,sBAAA;AAAA,IAACC,aAAAA,OAAO;AAAA,IAAP;AAAA,MACG,eAAW;AAAA,MACX,SAAS,EAAE,SAAS,EAAE;AAAA,MACtB,SAAS,EAAE,SAAS,EAAE;AAAA,MACtB,MAAM,EAAE,SAAS,EAAE;AAAA,MACnB,SAAS,MAAM,eAAe,KAAK;AAAA,MACnC,WAAU;AAAA,IAAA;AAAA,EAAA,CAGtB,CACJ;AAER,CAAC;;"}
1	+ {"version":3,"file":"Sidebar.cjs","sources":["../../../../src/components/Layout/components/Sidebar.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport { LayoutContext } from './Context';\nimport { useIsLargeScreen } from '../../../hooks/useIsLargeScreen';\n\nexport type LayoutSidebarProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n children:\n \| React.ReactNode\n \| (({\n isLargeScreen,\n open,\n toggleSidebar,\n }: {\n isLargeScreen: boolean;\n open: boolean;\n toggleSidebar: () => void;\n }) => React.ReactNode);\n};\n\nexport const Sidebar = React.forwardRef<HTMLDivElement, LayoutSidebarProps>(function LayoutSidebar(props, ref) {\n const { children, ...attributes } = props;\n const { sidebarOpen, setSidebarOpen } = React.useContext(LayoutContext);\n const isLargeScreen = useIsLargeScreen();\n const isSmallScreen = !isLargeScreen;\n\n // if it's a large screen we override the open state and make it always visible\n const isVisible = isLargeScreen \|\| sidebarOpen;\n\n // ensures the menu is always closed by default when resizing to a smaller window size\n React.useEffect(() => {\n setSidebarOpen(isLargeScreen);\n }, [isLargeScreen]);\n\n React.useEffect(() => {\n const handleEscapeKey = (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n event.preventDefault();\n event.stopPropagation();\n setSidebarOpen(false);\n }\n };\n\n if (isSmallScreen && sidebarOpen) {\n window.addEventListener('keydown', handleEscapeKey);\n }\n\n return () => {\n window.removeEventListener('keydown', handleEscapeKey);\n };\n }, [isSmallScreen, sidebarOpen]);\n\n const showBackdrop = isSmallScreen && sidebarOpen === true;\n\n const [ready, setReady] = React.useState(isSmallScreen);\n\n const className = cn(\n 'bg-gray-50 h-full w-64 flex-shrink-0 flex-grow-0 print:hidden',\n {\n 'absolute z-10 aria-hidden:-translate-x-64 ': isSmallScreen,\n // prevent animation when crossing the boundary from large to small screen,\n // this prevents awkward animation in the edge case (resizing the browser, instead of starting at a given size)\n invisible: isSmallScreen && !ready,\n 'transition-[transform] duration-300 visible': isSmallScreen && ready,\n 'border-r-2 border-gray-100 ': !showBackdrop,\n },\n props.className\n );\n\n React.useEffect(() => {\n // ensure state is updated in the next cpu tick so that the animation definitely doesn't run\n setTimeout(() => {\n setReady(isSmallScreen);\n }, 1);\n }, [isSmallScreen]);\n\n const toggleSidebar = () => setSidebarOpen(open => !open);\n const content = typeof children === 'function' ? children({ isLargeScreen, open: sidebarOpen, toggleSidebar }) : children;\n\n if (!content) {\n return null;\n }\n\n return (\n <>\n <nav {...attributes} data-responsive={isSmallScreen} aria-hidden={!isVisible} className={className} ref={ref}>\n {content}\n </nav>\n <AnimatePresence>\n {showBackdrop && (\n <motion.div\n aria-hidden\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n onClick={() => setSidebarOpen(false)}\n className=\"bg-brand-midnight/[0.3] fixed inset-0 z-[1] cursor-default overflow-y-auto print:absolute print:overflow-visible\"\n />\n )}\n </AnimatePresence>\n </>\n );\n});\n"],"names":["LayoutContext","useIsLargeScreen","AnimatePresence","motion"],"mappings":";;;;;;;AAoBO,MAAM,UAAU,MAAM,WAA+C,SAAS,cAAc,OAAO,KAAK;AAC3G,QAAM,EAAE,UAAU,GAAG,WAAA,IAAe;AACpC,QAAM,EAAE,aAAa,eAAA,IAAmB,MAAM,WAAWA,QAAAA,aAAa;AACtE,QAAM,gBAAgBC,iBAAAA,iBAAiB;AACvC,QAAM,gBAAgB,CAAC;AAGvB,QAAM,YAAY,iBAAiB;AAGnC,QAAM,UAAU,MAAM;AAClB,mBAAe,aAAa;AAAA,EAAA,GAC7B,CAAC,aAAa,CAAC;AAElB,QAAM,UAAU,MAAM;AACZ,UAAA,kBAAkB,CAAC,UAAyB;AAC1C,UAAA,MAAM,QAAQ,UAAU;AACxB,cAAM,eAAe;AACrB,cAAM,gBAAgB;AACtB,uBAAe,KAAK;AAAA,MAAA;AAAA,IAE5B;AAEA,QAAI,iBAAiB,aAAa;AACvB,aAAA,iBAAiB,WAAW,eAAe;AAAA,IAAA;AAGtD,WAAO,MAAM;AACF,aAAA,oBAAoB,WAAW,eAAe;AAAA,IACzD;AAAA,EAAA,GACD,CAAC,eAAe,WAAW,CAAC;AAEzB,QAAA,eAAe,iBAAiB,gBAAgB;AAEtD,QAAM,CAAC,OAAO,QAAQ,IAAI,MAAM,SAAS,aAAa;AAEtD,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,8CAA8C;AAAA;AAAA;AAAA,MAG9C,WAAW,iBAAiB,CAAC;AAAA,MAC7B,+CAA+C,iBAAiB;AAAA,MAChE,+BAA+B,CAAC;AAAA,IACpC;AAAA,IACA,MAAM;AAAA,EACV;AAEA,QAAM,UAAU,MAAM;AAElB,eAAW,MAAM;AACb,eAAS,aAAa;AAAA,OACvB,CAAC;AAAA,EAAA,GACL,CAAC,aAAa,CAAC;AAElB,QAAM,gBAAgB,MAAM,eAAe,CAAA,SAAQ,CAAC,IAAI;AAClD,QAAA,UAAU,OAAO,aAAa,aAAa,SAAS,EAAE,eAAe,MAAM,aAAa,cAAc,CAAC,IAAI;AAEjH,MAAI,CAAC,SAAS;AACH,WAAA;AAAA,EAAA;AAGX,mEAES,sBAAA,cAAA,OAAA,EAAK,GAAG,YAAY,mBAAiB,eAAe,eAAa,CAAC,WAAW,WAAsB,IAC/F,GAAA,OACL,GACA,sBAAA,cAACC,aAAAA,uBACI,gBACG,sBAAA;AAAA,IAACC,aAAAA,OAAO;AAAA,IAAP;AAAA,MACG,eAAW;AAAA,MACX,SAAS,EAAE,SAAS,EAAE;AAAA,MACtB,SAAS,EAAE,SAAS,EAAE;AAAA,MACtB,MAAM,EAAE,SAAS,EAAE;AAAA,MACnB,SAAS,MAAM,eAAe,KAAK;AAAA,MACnC,WAAU;AAAA,IAAA;AAAA,EAAA,CAGtB,CACJ;AAER,CAAC;;"}

package/dist/components/Layout/components/Sidebar.js CHANGED Viewed

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

package/dist/components/Layout/components/Sidebar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Sidebar.js","sources":["../../../../src/components/Layout/components/Sidebar.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport { LayoutContext } from './Context';\nimport { useIsLargeScreen } from '../../../hooks/useIsLargeScreen';\n\nexport type LayoutSidebarProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n children:\n \| React.ReactNode\n \| (({\n isLargeScreen,\n open,\n toggleSidebar,\n }: {\n isLargeScreen: boolean;\n open: boolean;\n toggleSidebar: () => void;\n }) => React.ReactNode);\n};\n\nexport const Sidebar = React.forwardRef<HTMLDivElement, LayoutSidebarProps>(function LayoutSidebar(props, ref) {\n const { children, ...attributes } = props;\n const { sidebarOpen, setSidebarOpen } = React.useContext(LayoutContext);\n const isLargeScreen = useIsLargeScreen();\n const isSmallScreen = !isLargeScreen;\n\n // if it's a large screen we override the open state and make it always visible\n const isVisible = isLargeScreen \|\| sidebarOpen;\n\n // ensures the menu is always closed by default when resizing to a smaller window size\n React.useEffect(() => {\n setSidebarOpen(isLargeScreen);\n }, [isLargeScreen]);\n\n React.useEffect(() => {\n const handleEscapeKey = (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n event.preventDefault();\n event.stopPropagation();\n setSidebarOpen(false);\n }\n };\n\n if (isSmallScreen && sidebarOpen) {\n window.addEventListener('keydown', handleEscapeKey);\n }\n\n return () => {\n window.removeEventListener('keydown', handleEscapeKey);\n };\n }, [isSmallScreen, sidebarOpen]);\n\n const showBackdrop = isSmallScreen && sidebarOpen === true;\n\n const [ready, setReady] = React.useState(isSmallScreen);\n\n const className = cn(\n 'bg-gray-50 h-full w-64 flex-shrink-0 flex-grow-0 print:hidden',\n {\n 'absolute z-10 aria-hidden:-translate-x-64 ': isSmallScreen,\n // prevent animation when crossing the boundary from large to small screen,\n // this prevents awkward animation in the edge case (resizing the browser, instead of starting at a given size)\n invisible: isSmallScreen && !ready,\n 'transition-[transform] duration-300 visible': isSmallScreen && ready,\n 'border-r-2 border-~~black~~-~~subtle~~ ': !showBackdrop,\n },\n props.className\n );\n\n React.useEffect(() => {\n // ensure state is updated in the next cpu tick so that the animation definitely doesn't run\n setTimeout(() => {\n setReady(isSmallScreen);\n }, 1);\n }, [isSmallScreen]);\n\n const toggleSidebar = () => setSidebarOpen(open => !open);\n const content = typeof children === 'function' ? children({ isLargeScreen, open: sidebarOpen, toggleSidebar }) : children;\n\n if (!content) {\n return null;\n }\n\n return (\n <>\n <nav {...attributes} data-responsive={isSmallScreen} aria-hidden={!isVisible} className={className} ref={ref}>\n {content}\n </nav>\n <AnimatePresence>\n {showBackdrop && (\n <motion.div\n aria-hidden\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n onClick={() => setSidebarOpen(false)}\n className=\"bg-brand-midnight/[0.3] fixed inset-0 z-[1] cursor-default overflow-y-auto print:absolute print:overflow-visible\"\n />\n )}\n </AnimatePresence>\n </>\n );\n});\n"],"names":["React"],"mappings":";;;;;AAoBO,MAAM,UAAUA,eAAM,WAA+C,SAAS,cAAc,OAAO,KAAK;AAC3G,QAAM,EAAE,UAAU,GAAG,WAAA,IAAe;AACpC,QAAM,EAAE,aAAa,eAAA,IAAmBA,eAAM,WAAW,aAAa;AACtE,QAAM,gBAAgB,iBAAiB;AACvC,QAAM,gBAAgB,CAAC;AAGvB,QAAM,YAAY,iBAAiB;AAGnCA,iBAAM,UAAU,MAAM;AAClB,mBAAe,aAAa;AAAA,EAAA,GAC7B,CAAC,aAAa,CAAC;AAElBA,iBAAM,UAAU,MAAM;AACZ,UAAA,kBAAkB,CAAC,UAAyB;AAC1C,UAAA,MAAM,QAAQ,UAAU;AACxB,cAAM,eAAe;AACrB,cAAM,gBAAgB;AACtB,uBAAe,KAAK;AAAA,MAAA;AAAA,IAE5B;AAEA,QAAI,iBAAiB,aAAa;AACvB,aAAA,iBAAiB,WAAW,eAAe;AAAA,IAAA;AAGtD,WAAO,MAAM;AACF,aAAA,oBAAoB,WAAW,eAAe;AAAA,IACzD;AAAA,EAAA,GACD,CAAC,eAAe,WAAW,CAAC;AAEzB,QAAA,eAAe,iBAAiB,gBAAgB;AAEtD,QAAM,CAAC,OAAO,QAAQ,IAAIA,eAAM,SAAS,aAAa;AAEtD,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,8CAA8C;AAAA;AAAA;AAAA,MAG9C,WAAW,iBAAiB,CAAC;AAAA,MAC7B,+CAA+C,iBAAiB;AAAA,MAChE,~~mCAAmC,~~CAAC;AAAA,~~IACxC~~;AAAA,IACA,MAAM;AAAA,EACV;AAEAA,iBAAM,UAAU,MAAM;AAElB,eAAW,MAAM;AACb,eAAS,aAAa;AAAA,OACvB,CAAC;AAAA,EAAA,GACL,CAAC,aAAa,CAAC;AAElB,QAAM,gBAAgB,MAAM,eAAe,CAAA,SAAQ,CAAC,IAAI;AAClD,QAAA,UAAU,OAAO,aAAa,aAAa,SAAS,EAAE,eAAe,MAAM,aAAa,cAAc,CAAC,IAAI;AAEjH,MAAI,CAAC,SAAS;AACH,WAAA;AAAA,EAAA;AAGX,qFAESA,+BAAA,cAAA,OAAA,EAAK,GAAG,YAAY,mBAAiB,eAAe,eAAa,CAAC,WAAW,WAAsB,IAC/F,GAAA,OACL,GACAA,+BAAA,cAAC,uBACI,gBACGA,+BAAA;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACG,eAAW;AAAA,MACX,SAAS,EAAE,SAAS,EAAE;AAAA,MACtB,SAAS,EAAE,SAAS,EAAE;AAAA,MACtB,MAAM,EAAE,SAAS,EAAE;AAAA,MACnB,SAAS,MAAM,eAAe,KAAK;AAAA,MACnC,WAAU;AAAA,IAAA;AAAA,EAAA,CAGtB,CACJ;AAER,CAAC;"}
1	+ {"version":3,"file":"Sidebar.js","sources":["../../../../src/components/Layout/components/Sidebar.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport { LayoutContext } from './Context';\nimport { useIsLargeScreen } from '../../../hooks/useIsLargeScreen';\n\nexport type LayoutSidebarProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n children:\n \| React.ReactNode\n \| (({\n isLargeScreen,\n open,\n toggleSidebar,\n }: {\n isLargeScreen: boolean;\n open: boolean;\n toggleSidebar: () => void;\n }) => React.ReactNode);\n};\n\nexport const Sidebar = React.forwardRef<HTMLDivElement, LayoutSidebarProps>(function LayoutSidebar(props, ref) {\n const { children, ...attributes } = props;\n const { sidebarOpen, setSidebarOpen } = React.useContext(LayoutContext);\n const isLargeScreen = useIsLargeScreen();\n const isSmallScreen = !isLargeScreen;\n\n // if it's a large screen we override the open state and make it always visible\n const isVisible = isLargeScreen \|\| sidebarOpen;\n\n // ensures the menu is always closed by default when resizing to a smaller window size\n React.useEffect(() => {\n setSidebarOpen(isLargeScreen);\n }, [isLargeScreen]);\n\n React.useEffect(() => {\n const handleEscapeKey = (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n event.preventDefault();\n event.stopPropagation();\n setSidebarOpen(false);\n }\n };\n\n if (isSmallScreen && sidebarOpen) {\n window.addEventListener('keydown', handleEscapeKey);\n }\n\n return () => {\n window.removeEventListener('keydown', handleEscapeKey);\n };\n }, [isSmallScreen, sidebarOpen]);\n\n const showBackdrop = isSmallScreen && sidebarOpen === true;\n\n const [ready, setReady] = React.useState(isSmallScreen);\n\n const className = cn(\n 'bg-gray-50 h-full w-64 flex-shrink-0 flex-grow-0 print:hidden',\n {\n 'absolute z-10 aria-hidden:-translate-x-64 ': isSmallScreen,\n // prevent animation when crossing the boundary from large to small screen,\n // this prevents awkward animation in the edge case (resizing the browser, instead of starting at a given size)\n invisible: isSmallScreen && !ready,\n 'transition-[transform] duration-300 visible': isSmallScreen && ready,\n 'border-r-2 border-gray-100 ': !showBackdrop,\n },\n props.className\n );\n\n React.useEffect(() => {\n // ensure state is updated in the next cpu tick so that the animation definitely doesn't run\n setTimeout(() => {\n setReady(isSmallScreen);\n }, 1);\n }, [isSmallScreen]);\n\n const toggleSidebar = () => setSidebarOpen(open => !open);\n const content = typeof children === 'function' ? children({ isLargeScreen, open: sidebarOpen, toggleSidebar }) : children;\n\n if (!content) {\n return null;\n }\n\n return (\n <>\n <nav {...attributes} data-responsive={isSmallScreen} aria-hidden={!isVisible} className={className} ref={ref}>\n {content}\n </nav>\n <AnimatePresence>\n {showBackdrop && (\n <motion.div\n aria-hidden\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n onClick={() => setSidebarOpen(false)}\n className=\"bg-brand-midnight/[0.3] fixed inset-0 z-[1] cursor-default overflow-y-auto print:absolute print:overflow-visible\"\n />\n )}\n </AnimatePresence>\n </>\n );\n});\n"],"names":["React"],"mappings":";;;;;AAoBO,MAAM,UAAUA,eAAM,WAA+C,SAAS,cAAc,OAAO,KAAK;AAC3G,QAAM,EAAE,UAAU,GAAG,WAAA,IAAe;AACpC,QAAM,EAAE,aAAa,eAAA,IAAmBA,eAAM,WAAW,aAAa;AACtE,QAAM,gBAAgB,iBAAiB;AACvC,QAAM,gBAAgB,CAAC;AAGvB,QAAM,YAAY,iBAAiB;AAGnCA,iBAAM,UAAU,MAAM;AAClB,mBAAe,aAAa;AAAA,EAAA,GAC7B,CAAC,aAAa,CAAC;AAElBA,iBAAM,UAAU,MAAM;AACZ,UAAA,kBAAkB,CAAC,UAAyB;AAC1C,UAAA,MAAM,QAAQ,UAAU;AACxB,cAAM,eAAe;AACrB,cAAM,gBAAgB;AACtB,uBAAe,KAAK;AAAA,MAAA;AAAA,IAE5B;AAEA,QAAI,iBAAiB,aAAa;AACvB,aAAA,iBAAiB,WAAW,eAAe;AAAA,IAAA;AAGtD,WAAO,MAAM;AACF,aAAA,oBAAoB,WAAW,eAAe;AAAA,IACzD;AAAA,EAAA,GACD,CAAC,eAAe,WAAW,CAAC;AAEzB,QAAA,eAAe,iBAAiB,gBAAgB;AAEtD,QAAM,CAAC,OAAO,QAAQ,IAAIA,eAAM,SAAS,aAAa;AAEtD,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,8CAA8C;AAAA;AAAA;AAAA,MAG9C,WAAW,iBAAiB,CAAC;AAAA,MAC7B,+CAA+C,iBAAiB;AAAA,MAChE,+BAA+B,CAAC;AAAA,IACpC;AAAA,IACA,MAAM;AAAA,EACV;AAEAA,iBAAM,UAAU,MAAM;AAElB,eAAW,MAAM;AACb,eAAS,aAAa;AAAA,OACvB,CAAC;AAAA,EAAA,GACL,CAAC,aAAa,CAAC;AAElB,QAAM,gBAAgB,MAAM,eAAe,CAAA,SAAQ,CAAC,IAAI;AAClD,QAAA,UAAU,OAAO,aAAa,aAAa,SAAS,EAAE,eAAe,MAAM,aAAa,cAAc,CAAC,IAAI;AAEjH,MAAI,CAAC,SAAS;AACH,WAAA;AAAA,EAAA;AAGX,qFAESA,+BAAA,cAAA,OAAA,EAAK,GAAG,YAAY,mBAAiB,eAAe,eAAa,CAAC,WAAW,WAAsB,IAC/F,GAAA,OACL,GACAA,+BAAA,cAAC,uBACI,gBACGA,+BAAA;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACG,eAAW;AAAA,MACX,SAAS,EAAE,SAAS,EAAE;AAAA,MACtB,SAAS,EAAE,SAAS,EAAE;AAAA,MACtB,MAAM,EAAE,SAAS,EAAE;AAAA,MACnB,SAAS,MAAM,eAAe,KAAK;AAAA,MACnC,WAAU;AAAA,IAAA;AAAA,EAAA,CAGtB,CACJ;AAER,CAAC;"}

package/dist/components/Navigation2/components/Content.cjs CHANGED Viewed

@@ -6,7 +6,7 @@ const util = require("./util.cjs");
 const Content = React.forwardRef(function Navigation2(props, ref) {
   const { children, ...attributes } = props;
   const className = cn(
-    "w-full overflow-auto p-3 mt-auto border-gray-200 flex-shrink-0 z-10 [[role=menubar]>&:last-child]:pb-0",
+    "w-full overflow-auto p-3 mt-auto border-gray-100 flex-shrink-0 z-10 [[role=menubar]>&:last-child]:pb-0",
     util.getAdjacentClasses(),
     props.className
   );

package/dist/components/Navigation2/components/Content.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Content.cjs","sources":["../../../../src/components/Navigation2/components/Content.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { getAdjacentClasses } from './util';\n\nexport type Navigation2ContentProps = React.LiHTMLAttributes<HTMLLIElement>;\n\nexport const Content = React.forwardRef<HTMLLIElement, Navigation2ContentProps>(function Navigation2(props, ref) {\n const { children, ...attributes } = props;\n const className = cn(\n 'w-full overflow-auto p-3 mt-auto border-gray-~~200~~ flex-shrink-0 z-10 [[role=menubar]>&:last-child]:pb-0',\n getAdjacentClasses(),\n props.className\n );\n\n return (\n <li {...attributes} className={className} data-taco=\"navigation2-content\" ref={ref} role=\"none\">\n {children}\n </li>\n );\n});\n"],"names":["getAdjacentClasses"],"mappings":";;;;;AAMO,MAAM,UAAU,MAAM,WAAmD,SAAS,YAAY,OAAO,KAAK;AAC7G,QAAM,EAAE,UAAU,GAAG,WAAA,IAAe;AACpC,QAAM,YAAY;AAAA,IACd;AAAA,IACAA,wBAAmB;AAAA,IACnB,MAAM;AAAA,EACV;AAGI,SAAA,sBAAA,cAAC,MAAI,EAAA,GAAG,YAAY,WAAsB,aAAU,uBAAsB,KAAU,MAAK,OAAA,GACpF,QACL;AAER,CAAC;;"}
1	+ {"version":3,"file":"Content.cjs","sources":["../../../../src/components/Navigation2/components/Content.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { getAdjacentClasses } from './util';\n\nexport type Navigation2ContentProps = React.LiHTMLAttributes<HTMLLIElement>;\n\nexport const Content = React.forwardRef<HTMLLIElement, Navigation2ContentProps>(function Navigation2(props, ref) {\n const { children, ...attributes } = props;\n const className = cn(\n 'w-full overflow-auto p-3 mt-auto border-gray-100 flex-shrink-0 z-10 [[role=menubar]>&:last-child]:pb-0',\n getAdjacentClasses(),\n props.className\n );\n\n return (\n <li {...attributes} className={className} data-taco=\"navigation2-content\" ref={ref} role=\"none\">\n {children}\n </li>\n );\n});\n"],"names":["getAdjacentClasses"],"mappings":";;;;;AAMO,MAAM,UAAU,MAAM,WAAmD,SAAS,YAAY,OAAO,KAAK;AAC7G,QAAM,EAAE,UAAU,GAAG,WAAA,IAAe;AACpC,QAAM,YAAY;AAAA,IACd;AAAA,IACAA,wBAAmB;AAAA,IACnB,MAAM;AAAA,EACV;AAGI,SAAA,sBAAA,cAAC,MAAI,EAAA,GAAG,YAAY,WAAsB,aAAU,uBAAsB,KAAU,MAAK,OAAA,GACpF,QACL;AAER,CAAC;;"}

package/dist/components/Navigation2/components/Content.js CHANGED Viewed

@@ -4,7 +4,7 @@ import { getAdjacentClasses } from "./util.js";
 const Content = React__default.forwardRef(function Navigation2(props, ref) {
   const { children, ...attributes } = props;
   const className = cn(
-    "w-full overflow-auto p-3 mt-auto border-gray-200 flex-shrink-0 z-10 [[role=menubar]>&:last-child]:pb-0",
+    "w-full overflow-auto p-3 mt-auto border-gray-100 flex-shrink-0 z-10 [[role=menubar]>&:last-child]:pb-0",
     getAdjacentClasses(),
     props.className
   );

package/dist/components/Navigation2/components/Content.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Content.js","sources":["../../../../src/components/Navigation2/components/Content.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { getAdjacentClasses } from './util';\n\nexport type Navigation2ContentProps = React.LiHTMLAttributes<HTMLLIElement>;\n\nexport const Content = React.forwardRef<HTMLLIElement, Navigation2ContentProps>(function Navigation2(props, ref) {\n const { children, ...attributes } = props;\n const className = cn(\n 'w-full overflow-auto p-3 mt-auto border-gray-~~200~~ flex-shrink-0 z-10 [[role=menubar]>&:last-child]:pb-0',\n getAdjacentClasses(),\n props.className\n );\n\n return (\n <li {...attributes} className={className} data-taco=\"navigation2-content\" ref={ref} role=\"none\">\n {children}\n </li>\n );\n});\n"],"names":["React"],"mappings":";;;AAMO,MAAM,UAAUA,eAAM,WAAmD,SAAS,YAAY,OAAO,KAAK;AAC7G,QAAM,EAAE,UAAU,GAAG,WAAA,IAAe;AACpC,QAAM,YAAY;AAAA,IACd;AAAA,IACA,mBAAmB;AAAA,IACnB,MAAM;AAAA,EACV;AAGI,SAAAA,+BAAA,cAAC,MAAI,EAAA,GAAG,YAAY,WAAsB,aAAU,uBAAsB,KAAU,MAAK,OAAA,GACpF,QACL;AAER,CAAC;"}
1	+ {"version":3,"file":"Content.js","sources":["../../../../src/components/Navigation2/components/Content.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { getAdjacentClasses } from './util';\n\nexport type Navigation2ContentProps = React.LiHTMLAttributes<HTMLLIElement>;\n\nexport const Content = React.forwardRef<HTMLLIElement, Navigation2ContentProps>(function Navigation2(props, ref) {\n const { children, ...attributes } = props;\n const className = cn(\n 'w-full overflow-auto p-3 mt-auto border-gray-100 flex-shrink-0 z-10 [[role=menubar]>&:last-child]:pb-0',\n getAdjacentClasses(),\n props.className\n );\n\n return (\n <li {...attributes} className={className} data-taco=\"navigation2-content\" ref={ref} role=\"none\">\n {children}\n </li>\n );\n});\n"],"names":["React"],"mappings":";;;AAMO,MAAM,UAAUA,eAAM,WAAmD,SAAS,YAAY,OAAO,KAAK;AAC7G,QAAM,EAAE,UAAU,GAAG,WAAA,IAAe;AACpC,QAAM,YAAY;AAAA,IACd;AAAA,IACA,mBAAmB;AAAA,IACnB,MAAM;AAAA,EACV;AAGI,SAAAA,+BAAA,cAAC,MAAI,EAAA,GAAG,YAAY,WAAsB,aAAU,uBAAsB,KAAU,MAAK,OAAA,GACpF,QACL;AAER,CAAC;"}

package/dist/components/Navigation2/components/Link.cjs CHANGED Viewed

@@ -24,7 +24,7 @@ const Link = React.forwardRef(function Link2(props, ref) {
   const { active, children, icon, menu, onDrop, total, ...attributes } = props;
   const [isDraggedOver, dropTargetProps] = useDropTarget.useDropTarget(onDrop);
   const className = cn(getNavigationLinkClasses(isDraggedOver), attributes.className);
-  const listClassName = cn("[[role=menubar]>&]:px-3 border-gray-200", util.getAdjacentClasses(), {
+  const listClassName = cn("[[role=menubar]>&]:px-3 border-gray-100", util.getAdjacentClasses(), {
     "[&>*]:pointer-events-none": isDraggedOver
   });
   return /* @__PURE__ */ React.createElement("li", { ...dropTargetProps, className: listClassName, "data-taco": "navigation2-link-item", role: "none" }, /* @__PURE__ */ React.createElement(