@atom-learning/components 6.6.0-beta.0 → 6.6.0-beta.2

package/dist/components/table/TableStickyColumnsContainer.js

@@ -1,45 +1,48 @@
-import { useStickyColumnsStyle as e } from "./useStickyColumnsCss.js";
-import t from "clsx";
-import n from "react";
+import { useStickyColumnsStyle } from "./useStickyColumnsCss.js";
+import clsx from "clsx";
+import React from "react";
 //#region src/components/table/TableStickyColumnsContainer.tsx
-var r = ({ children: r, numberOfStickyColumns: i = 0, className: a, ...o }) => {
-	let [s, c] = n.useState(!1), l = n.useRef(null), { columnsStyle: u } = e({
-		numberOfStickyColumns: i,
-		wrapperRef: l
+var TableStickyColumnsContainer = ({ children, numberOfStickyColumns = 0, className, ...restProps }) => {
+	const [hasScroll, setHasScroll] = React.useState(false);
+	const wrapperRef = React.useRef(null);
+	const { columnsStyle } = useStickyColumnsStyle({
+		numberOfStickyColumns,
+		wrapperRef
 	});
-	return /* @__PURE__ */ n.createElement("div", {
-		onScroll: (e) => {
-			let t = e.currentTarget.scrollLeft > 0;
-			t !== s && c(t);
-		},
+	const handleScroll = (event) => {
+		const newHasScroll = event.currentTarget.scrollLeft > 0;
+		if (newHasScroll !== hasScroll) setHasScroll(newHasScroll);
+	};
+	return /* @__PURE__ */ React.createElement("div", {
+		onScroll: handleScroll,
 		role: "scrollbar",
-		ref: l,
-		style: u,
-		className: t("overflow-auto", "max-w-full", "relative", "overscroll-x-contain", "[&_td,&_th]:bg-inherit", a, i >= 1 && [
+		ref: wrapperRef,
+		style: columnsStyle,
+		className: clsx("overflow-auto", "max-w-full", "relative", "overscroll-x-contain", "[&_td,&_th]:bg-inherit", className, numberOfStickyColumns >= 1 && [
 			"[&_td:nth-of-type(1),&_th:nth-of-type(1)]:sticky",
 			"[&_td:nth-of-type(1),&_th:nth-of-type(1)]:left-(--sticky-offset-left-1)",
 			"[&_td:nth-of-type(1),&_th:nth-of-type(1)]:min-w-(--sticky-column-width-1)",
 			"[&_td:nth-of-type(1),&_th:nth-of-type(1)]:z-2"
-		], i >= 2 && [
+		], numberOfStickyColumns >= 2 && [
 			"[&_td:nth-of-type(2),&_th:nth-of-type(2)]:sticky",
 			"[&_td:nth-of-type(2),&_th:nth-of-type(2)]:left-(--sticky-offset-left-2)",
 			"[&_td:nth-of-type(2),&_th:nth-of-type(2)]:min-w-(--sticky-column-width-2)",
 			"[&_td:nth-of-type(2),&_th:nth-of-type(2)]:z-2"
-		], i >= 3 && [
+		], numberOfStickyColumns >= 3 && [
 			"[&_td:nth-of-type(3),&_th:nth-of-type(3)]:sticky",
 			"[&_td:nth-of-type(3),&_th:nth-of-type(3)]:left-(--sticky-offset-left-3)",
 			"[&_td:nth-of-type(3),&_th:nth-of-type(3)]:min-w-(--sticky-column-width-3)",
 			"[&_td:nth-of-type(3),&_th:nth-of-type(3)]:z-2"
-		], i >= 4 && [
+		], numberOfStickyColumns >= 4 && [
 			"[&_td:nth-of-type(4),&_th:nth-of-type(4)]:sticky",
 			"[&_td:nth-of-type(4),&_th:nth-of-type(4)]:left-(--sticky-offset-left-4)",
 			"[&_td:nth-of-type(4),&_th:nth-of-type(4)]:min-w-(--sticky-column-width-4)",
 			"[&_td:nth-of-type(4),&_th:nth-of-type(4)]:z-2"
-		], i === 1 && s && ["[&_td:nth-of-type(1),&_th:nth-of-type(1)]:shadow-[var(--color-alpha-200)_-2px_-3px_9px_1px]", "[&_td:nth-of-type(1),&_th:nth-of-type(1)]:[clip-path:inset(-1px_-10px_-1px_0px)]"], i === 2 && s && ["[&_td:nth-of-type(2),&_th:nth-of-type(2)]:shadow-[var(--color-alpha-200)_-2px_-3px_9px_1px]", "[&_td:nth-of-type(2),&_th:nth-of-type(2)]:[clip-path:inset(-1px_-10px_-1px_0px)]"], i === 3 && s && ["[&_td:nth-of-type(3),&_th:nth-of-type(3)]:shadow-[var(--color-alpha-200)_-2px_-3px_9px_1px]", "[&_td:nth-of-type(3),&_th:nth-of-type(3)]:[clip-path:inset(-1px_-10px_-1px_0px)]"], i === 4 && s && ["[&_td:nth-of-type(4),&_th:nth-of-type(4)]:shadow-[var(--color-alpha-200)_-2px_-3px_9px_1px]", "[&_td:nth-of-type(4),&_th:nth-of-type(4)]:[clip-path:inset(-1px_-10px_-1px_0px)]"]),
-		...o
-	}, r);
+		], numberOfStickyColumns === 1 && hasScroll && ["[&_td:nth-of-type(1),&_th:nth-of-type(1)]:shadow-[var(--color-alpha-200)_-2px_-3px_9px_1px]", "[&_td:nth-of-type(1),&_th:nth-of-type(1)]:[clip-path:inset(-1px_-10px_-1px_0px)]"], numberOfStickyColumns === 2 && hasScroll && ["[&_td:nth-of-type(2),&_th:nth-of-type(2)]:shadow-[var(--color-alpha-200)_-2px_-3px_9px_1px]", "[&_td:nth-of-type(2),&_th:nth-of-type(2)]:[clip-path:inset(-1px_-10px_-1px_0px)]"], numberOfStickyColumns === 3 && hasScroll && ["[&_td:nth-of-type(3),&_th:nth-of-type(3)]:shadow-[var(--color-alpha-200)_-2px_-3px_9px_1px]", "[&_td:nth-of-type(3),&_th:nth-of-type(3)]:[clip-path:inset(-1px_-10px_-1px_0px)]"], numberOfStickyColumns === 4 && hasScroll && ["[&_td:nth-of-type(4),&_th:nth-of-type(4)]:shadow-[var(--color-alpha-200)_-2px_-3px_9px_1px]", "[&_td:nth-of-type(4),&_th:nth-of-type(4)]:[clip-path:inset(-1px_-10px_-1px_0px)]"]),
+		...restProps
+	}, children);
 };
 //#endregion
-export { r as TableStickyColumnsContainer };
+export { TableStickyColumnsContainer };
 
 //# sourceMappingURL=TableStickyColumnsContainer.js.map

package/dist/components/table/TableStickyColumnsContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableStickyColumnsContainer.js","names":[],"sources":["../../../src/components/table/TableStickyColumnsContainer.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport React from 'react'\n\nimport { useStickyColumnsStyle } from './useStickyColumnsCss'\n\nexport const TableStickyColumnsContainer = ({\n  children,\n  numberOfStickyColumns = 0,\n  className,\n  ...restProps\n}: React.PropsWithChildren<{\n  numberOfStickyColumns?: number\n  className?: string\n}>) => {\n  const [hasScroll, setHasScroll] = React.useState<boolean>(false)\n  const wrapperRef = React.useRef(null)\n  const { columnsStyle } = useStickyColumnsStyle({\n    numberOfStickyColumns,\n    wrapperRef\n  })\n\n  const handleScroll = (event: React.UIEvent<HTMLDivElement>) => {\n    const newHasScroll = event.currentTarget.scrollLeft > 0\n    if (newHasScroll !== hasScroll) {\n      setHasScroll(newHasScroll)\n    }\n  }\n\n  return (\n    <div\n      onScroll={handleScroll}\n      // eslint-disable-next-line jsx-a11y/role-has-required-aria-props\n      role=\"scrollbar\"\n      ref={wrapperRef}\n      style={columnsStyle}\n      className={clsx(\n        'overflow-auto',\n        'max-w-full',\n        'relative',\n        'overscroll-x-contain',\n        '[&_td,&_th]:bg-inherit',\n        className,\n        numberOfStickyColumns >= 1 && [\n          '[&_td:nth-of-type(1),&_th:nth-of-type(1)]:sticky',\n          '[&_td:nth-of-type(1),&_th:nth-of-type(1)]:left-(--sticky-offset-left-1)',\n          '[&_td:nth-of-type(1),&_th:nth-of-type(1)]:min-w-(--sticky-column-width-1)',\n          '[&_td:nth-of-type(1),&_th:nth-of-type(1)]:z-2'\n        ],\n        numberOfStickyColumns >= 2 && [\n          '[&_td:nth-of-type(2),&_th:nth-of-type(2)]:sticky',\n          '[&_td:nth-of-type(2),&_th:nth-of-type(2)]:left-(--sticky-offset-left-2)',\n          '[&_td:nth-of-type(2),&_th:nth-of-type(2)]:min-w-(--sticky-column-width-2)',\n          '[&_td:nth-of-type(2),&_th:nth-of-type(2)]:z-2'\n        ],\n        numberOfStickyColumns >= 3 && [\n          '[&_td:nth-of-type(3),&_th:nth-of-type(3)]:sticky',\n          '[&_td:nth-of-type(3),&_th:nth-of-type(3)]:left-(--sticky-offset-left-3)',\n          '[&_td:nth-of-type(3),&_th:nth-of-type(3)]:min-w-(--sticky-column-width-3)',\n          '[&_td:nth-of-type(3),&_th:nth-of-type(3)]:z-2'\n        ],\n        numberOfStickyColumns >= 4 && [\n          '[&_td:nth-of-type(4),&_th:nth-of-type(4)]:sticky',\n          '[&_td:nth-of-type(4),&_th:nth-of-type(4)]:left-(--sticky-offset-left-4)',\n          '[&_td:nth-of-type(4),&_th:nth-of-type(4)]:min-w-(--sticky-column-width-4)',\n          '[&_td:nth-of-type(4),&_th:nth-of-type(4)]:z-2'\n        ],\n        numberOfStickyColumns === 1 &&\n          hasScroll && [\n            '[&_td:nth-of-type(1),&_th:nth-of-type(1)]:shadow-[var(--color-alpha-200)_-2px_-3px_9px_1px]',\n            '[&_td:nth-of-type(1),&_th:nth-of-type(1)]:[clip-path:inset(-1px_-10px_-1px_0px)]'\n          ],\n        numberOfStickyColumns === 2 &&\n          hasScroll && [\n            '[&_td:nth-of-type(2),&_th:nth-of-type(2)]:shadow-[var(--color-alpha-200)_-2px_-3px_9px_1px]',\n            '[&_td:nth-of-type(2),&_th:nth-of-type(2)]:[clip-path:inset(-1px_-10px_-1px_0px)]'\n          ],\n        numberOfStickyColumns === 3 &&\n          hasScroll && [\n            '[&_td:nth-of-type(3),&_th:nth-of-type(3)]:shadow-[var(--color-alpha-200)_-2px_-3px_9px_1px]',\n            '[&_td:nth-of-type(3),&_th:nth-of-type(3)]:[clip-path:inset(-1px_-10px_-1px_0px)]'\n          ],\n        numberOfStickyColumns === 4 &&\n          hasScroll && [\n            '[&_td:nth-of-type(4),&_th:nth-of-type(4)]:shadow-[var(--color-alpha-200)_-2px_-3px_9px_1px]',\n            '[&_td:nth-of-type(4),&_th:nth-of-type(4)]:[clip-path:inset(-1px_-10px_-1px_0px)]'\n          ]\n      )}\n      {...restProps}\n    >\n      {children}\n    </div>\n  )\n}\n"],"mappings":";;;;AAKA,IAAa,KAA+B,EAC1C,aACA,2BAAwB,GACxB,cACA,GAAG,QAIE;CACL,IAAM,CAAC,GAAW,KAAgB,EAAM,SAAkB,GAAM,EAC1D,IAAa,EAAM,OAAO,KAAK,EAC/B,EAAE,oBAAiB,EAAsB;EAC7C;EACA;EACD,CAAC;AASF,QACE,kBAAA,cAAC,OAAD;EACE,WATkB,MAAyC;GAC7D,IAAM,IAAe,EAAM,cAAc,aAAa;AACtD,GAAI,MAAiB,KACnB,EAAa,EAAa;;EAQ1B,MAAK;EACL,KAAK;EACL,OAAO;EACP,WAAW,EACT,iBACA,cACA,YACA,wBACA,0BACA,GACA,KAAyB,KAAK;GAC5B;GACA;GACA;GACA;GACD,EACD,KAAyB,KAAK;GAC5B;GACA;GACA;GACA;GACD,EACD,KAAyB,KAAK;GAC5B;GACA;GACA;GACA;GACD,EACD,KAAyB,KAAK;GAC5B;GACA;GACA;GACA;GACD,EACD,MAA0B,KACxB,KAAa,CACX,+FACA,mFACD,EACH,MAA0B,KACxB,KAAa,CACX,+FACA,mFACD,EACH,MAA0B,KACxB,KAAa,CACX,+FACA,mFACD,EACH,MAA0B,KACxB,KAAa,CACX,+FACA,mFACD,CACJ;EACD,GAAI;EAGA,EADH,EACG"}
+{"version":3,"file":"TableStickyColumnsContainer.js","names":[],"sources":["../../../src/components/table/TableStickyColumnsContainer.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport React from 'react'\n\nimport { useStickyColumnsStyle } from './useStickyColumnsCss'\n\nexport const TableStickyColumnsContainer = ({\n  children,\n  numberOfStickyColumns = 0,\n  className,\n  ...restProps\n}: React.PropsWithChildren<{\n  numberOfStickyColumns?: number\n  className?: string\n}>) => {\n  const [hasScroll, setHasScroll] = React.useState<boolean>(false)\n  const wrapperRef = React.useRef(null)\n  const { columnsStyle } = useStickyColumnsStyle({\n    numberOfStickyColumns,\n    wrapperRef\n  })\n\n  const handleScroll = (event: React.UIEvent<HTMLDivElement>) => {\n    const newHasScroll = event.currentTarget.scrollLeft > 0\n    if (newHasScroll !== hasScroll) {\n      setHasScroll(newHasScroll)\n    }\n  }\n\n  return (\n    <div\n      onScroll={handleScroll}\n      // eslint-disable-next-line jsx-a11y/role-has-required-aria-props\n      role=\"scrollbar\"\n      ref={wrapperRef}\n      style={columnsStyle}\n      className={clsx(\n        'overflow-auto',\n        'max-w-full',\n        'relative',\n        'overscroll-x-contain',\n        '[&_td,&_th]:bg-inherit',\n        className,\n        numberOfStickyColumns >= 1 && [\n          '[&_td:nth-of-type(1),&_th:nth-of-type(1)]:sticky',\n          '[&_td:nth-of-type(1),&_th:nth-of-type(1)]:left-(--sticky-offset-left-1)',\n          '[&_td:nth-of-type(1),&_th:nth-of-type(1)]:min-w-(--sticky-column-width-1)',\n          '[&_td:nth-of-type(1),&_th:nth-of-type(1)]:z-2'\n        ],\n        numberOfStickyColumns >= 2 && [\n          '[&_td:nth-of-type(2),&_th:nth-of-type(2)]:sticky',\n          '[&_td:nth-of-type(2),&_th:nth-of-type(2)]:left-(--sticky-offset-left-2)',\n          '[&_td:nth-of-type(2),&_th:nth-of-type(2)]:min-w-(--sticky-column-width-2)',\n          '[&_td:nth-of-type(2),&_th:nth-of-type(2)]:z-2'\n        ],\n        numberOfStickyColumns >= 3 && [\n          '[&_td:nth-of-type(3),&_th:nth-of-type(3)]:sticky',\n          '[&_td:nth-of-type(3),&_th:nth-of-type(3)]:left-(--sticky-offset-left-3)',\n          '[&_td:nth-of-type(3),&_th:nth-of-type(3)]:min-w-(--sticky-column-width-3)',\n          '[&_td:nth-of-type(3),&_th:nth-of-type(3)]:z-2'\n        ],\n        numberOfStickyColumns >= 4 && [\n          '[&_td:nth-of-type(4),&_th:nth-of-type(4)]:sticky',\n          '[&_td:nth-of-type(4),&_th:nth-of-type(4)]:left-(--sticky-offset-left-4)',\n          '[&_td:nth-of-type(4),&_th:nth-of-type(4)]:min-w-(--sticky-column-width-4)',\n          '[&_td:nth-of-type(4),&_th:nth-of-type(4)]:z-2'\n        ],\n        numberOfStickyColumns === 1 &&\n          hasScroll && [\n            '[&_td:nth-of-type(1),&_th:nth-of-type(1)]:shadow-[var(--color-alpha-200)_-2px_-3px_9px_1px]',\n            '[&_td:nth-of-type(1),&_th:nth-of-type(1)]:[clip-path:inset(-1px_-10px_-1px_0px)]'\n          ],\n        numberOfStickyColumns === 2 &&\n          hasScroll && [\n            '[&_td:nth-of-type(2),&_th:nth-of-type(2)]:shadow-[var(--color-alpha-200)_-2px_-3px_9px_1px]',\n            '[&_td:nth-of-type(2),&_th:nth-of-type(2)]:[clip-path:inset(-1px_-10px_-1px_0px)]'\n          ],\n        numberOfStickyColumns === 3 &&\n          hasScroll && [\n            '[&_td:nth-of-type(3),&_th:nth-of-type(3)]:shadow-[var(--color-alpha-200)_-2px_-3px_9px_1px]',\n            '[&_td:nth-of-type(3),&_th:nth-of-type(3)]:[clip-path:inset(-1px_-10px_-1px_0px)]'\n          ],\n        numberOfStickyColumns === 4 &&\n          hasScroll && [\n            '[&_td:nth-of-type(4),&_th:nth-of-type(4)]:shadow-[var(--color-alpha-200)_-2px_-3px_9px_1px]',\n            '[&_td:nth-of-type(4),&_th:nth-of-type(4)]:[clip-path:inset(-1px_-10px_-1px_0px)]'\n          ]\n      )}\n      {...restProps}\n    >\n      {children}\n    </div>\n  )\n}\n"],"mappings":";;;;AAKA,IAAa,+BAA+B,EAC1C,UACA,wBAAwB,GACxB,WACA,GAAG,gBAIE;CACL,MAAM,CAAC,WAAW,gBAAgB,MAAM,SAAkB,MAAM;CAChE,MAAM,aAAa,MAAM,OAAO,KAAK;CACrC,MAAM,EAAE,iBAAiB,sBAAsB;EAC7C;EACA;EACD,CAAC;CAEF,MAAM,gBAAgB,UAAyC;EAC7D,MAAM,eAAe,MAAM,cAAc,aAAa;AACtD,MAAI,iBAAiB,UACnB,cAAa,aAAa;;AAI9B,QACE,sBAAA,cAAC,OAAD;EACE,UAAU;EAEV,MAAK;EACL,KAAK;EACL,OAAO;EACP,WAAW,KACT,iBACA,cACA,YACA,wBACA,0BACA,WACA,yBAAyB,KAAK;GAC5B;GACA;GACA;GACA;GACD,EACD,yBAAyB,KAAK;GAC5B;GACA;GACA;GACA;GACD,EACD,yBAAyB,KAAK;GAC5B;GACA;GACA;GACA;GACD,EACD,yBAAyB,KAAK;GAC5B;GACA;GACA;GACA;GACD,EACD,0BAA0B,KACxB,aAAa,CACX,+FACA,mFACD,EACH,0BAA0B,KACxB,aAAa,CACX,+FACA,mFACD,EACH,0BAA0B,KACxB,aAAa,CACX,+FACA,mFACD,EACH,0BAA0B,KACxB,aAAa,CACX,+FACA,mFACD,CACJ;EACD,GAAI;EAGA,EADH,SACG"}

package/dist/components/table/useStickyColumnsCss.js

@@ -1,26 +1,32 @@
-import * as e from "react";
+import * as React$1 from "react";
 //#region src/components/table/useStickyColumnsCss.ts
-var t = ({ numberOfStickyColumns: t, wrapperRef: n }) => {
-	let [r, i] = e.useState({}), a = e.useCallback(() => {
-		let e = 0, r = n.current?.querySelectorAll("th");
-		return Array.from(r || []).slice(0, t).reduce((t, n, i) => {
-			let a = i + 1, o = {
-				...t,
-				[`--sticky-column-width-${a}`]: `${n.offsetWidth}px`,
-				[`--sticky-offset-left-${a}`]: `${e}px`
+var useStickyColumnsStyle = ({ numberOfStickyColumns, wrapperRef }) => {
+	const [columnsStyle, setColumnsStyle] = React$1.useState({});
+	const generateColumnsStyle = React$1.useCallback(() => {
+		let accWidth = 0;
+		const tableHeaderCells = wrapperRef.current?.querySelectorAll("th");
+		return Array.from(tableHeaderCells || []).slice(0, numberOfStickyColumns).reduce((acc, column, index) => {
+			const elementNumber = index + 1;
+			const styleObject = {
+				...acc,
+				[`--sticky-column-width-${elementNumber}`]: `${column.offsetWidth}px`,
+				[`--sticky-offset-left-${elementNumber}`]: `${accWidth}px`
 			};
-			return e += r?.item(i).clientWidth || 0, o;
+			accWidth += tableHeaderCells?.item(index).clientWidth || 0;
+			return styleObject;
 		}, {});
-	}, [t, n]);
-	return e.useLayoutEffect(() => {
-		t && i(a());
+	}, [numberOfStickyColumns, wrapperRef]);
+	React$1.useLayoutEffect(() => {
+		if (!numberOfStickyColumns) return;
+		setColumnsStyle(generateColumnsStyle());
 	}, [
-		t,
-		n,
-		a
-	]), { columnsStyle: r };
+		numberOfStickyColumns,
+		wrapperRef,
+		generateColumnsStyle
+	]);
+	return { columnsStyle };
 };
 //#endregion
-export { t as useStickyColumnsStyle };
+export { useStickyColumnsStyle };
 
 //# sourceMappingURL=useStickyColumnsCss.js.map

package/dist/components/table/useStickyColumnsCss.js.map

@@ -1 +1 @@
-{"version":3,"file":"useStickyColumnsCss.js","names":[],"sources":["../../../src/components/table/useStickyColumnsCss.ts"],"sourcesContent":["import * as React from 'react'\n\ntype ColumnStyle = Record<\n  `--sticky-column-width-${number}` | `--sticky-offset-left-${number}`,\n  string\n>\n\ninterface IUseStickyColumnsCss {\n  columnsStyle?: ColumnStyle\n}\n\nexport const useStickyColumnsStyle = ({\n  numberOfStickyColumns,\n  wrapperRef\n}: {\n  numberOfStickyColumns: number\n  wrapperRef: React.RefObject<HTMLTableSectionElement>\n}): IUseStickyColumnsCss => {\n  const [columnsStyle, setColumnsStyle] = React.useState<ColumnStyle>({})\n\n  const generateColumnsStyle = React.useCallback(() => {\n    let accWidth = 0\n\n    // Getting the table header cells elements to use their width to set the left position in the sticky columns.\n    const tableHeaderCells = wrapperRef.current?.querySelectorAll('th')\n    const tableHeaderElements = Array.from(tableHeaderCells || [])\n\n    // Getting only the number of sticky columns from the elements array that is what we are interested in.\n    const stickyColumns = tableHeaderElements.slice(0, numberOfStickyColumns)\n\n    const newColumnsStyle = stickyColumns.reduce((acc, column, index) => {\n      const elementNumber = index + 1\n      const styleObject = {\n        ...acc,\n        [`--sticky-column-width-${elementNumber}`]: `${column.offsetWidth}px`,\n        [`--sticky-offset-left-${elementNumber}`]: `${accWidth}px`\n      }\n\n      accWidth += tableHeaderCells?.item(index).clientWidth || 0\n\n      return styleObject\n    }, {})\n\n    return newColumnsStyle\n  }, [numberOfStickyColumns, wrapperRef])\n\n  React.useLayoutEffect(() => {\n    if (!numberOfStickyColumns) return\n    const newColumnsStyle = generateColumnsStyle()\n\n    setColumnsStyle(newColumnsStyle)\n  }, [numberOfStickyColumns, wrapperRef, generateColumnsStyle])\n\n  return {\n    columnsStyle\n  }\n}\n"],"mappings":";;AAWA,IAAa,KAAyB,EACpC,0BACA,oBAI0B;CAC1B,IAAM,CAAC,GAAc,KAAmB,EAAM,SAAsB,EAAE,CAAC,EAEjE,IAAuB,EAAM,kBAAkB;EACnD,IAAI,IAAW,GAGT,IAAmB,EAAW,SAAS,iBAAiB,KAAK;AAmBnE,SAlB4B,MAAM,KAAK,KAAoB,EAAE,CAAC,CAGpB,MAAM,GAAG,EAAsB,CAEnC,QAAQ,GAAK,GAAQ,MAAU;GACnE,IAAM,IAAgB,IAAQ,GACxB,IAAc;IAClB,GAAG;KACF,yBAAyB,MAAkB,GAAG,EAAO,YAAY;KACjE,wBAAwB,MAAkB,GAAG,EAAS;IACxD;AAID,UAFA,KAAY,GAAkB,KAAK,EAAM,CAAC,eAAe,GAElD;KACN,EAAE,CAAC;IAGL,CAAC,GAAuB,EAAW,CAAC;AASvC,QAPA,EAAM,sBAAsB;AACrB,OAGL,EAFwB,GAAsB,CAEd;IAC/B;EAAC;EAAuB;EAAY;EAAqB,CAAC,EAEtD,EACL,iBACD"}
+{"version":3,"file":"useStickyColumnsCss.js","names":[],"sources":["../../../src/components/table/useStickyColumnsCss.ts"],"sourcesContent":["import * as React from 'react'\n\ntype ColumnStyle = Record<\n  `--sticky-column-width-${number}` | `--sticky-offset-left-${number}`,\n  string\n>\n\ninterface IUseStickyColumnsCss {\n  columnsStyle?: ColumnStyle\n}\n\nexport const useStickyColumnsStyle = ({\n  numberOfStickyColumns,\n  wrapperRef\n}: {\n  numberOfStickyColumns: number\n  wrapperRef: React.RefObject<HTMLTableSectionElement>\n}): IUseStickyColumnsCss => {\n  const [columnsStyle, setColumnsStyle] = React.useState<ColumnStyle>({})\n\n  const generateColumnsStyle = React.useCallback(() => {\n    let accWidth = 0\n\n    // Getting the table header cells elements to use their width to set the left position in the sticky columns.\n    const tableHeaderCells = wrapperRef.current?.querySelectorAll('th')\n    const tableHeaderElements = Array.from(tableHeaderCells || [])\n\n    // Getting only the number of sticky columns from the elements array that is what we are interested in.\n    const stickyColumns = tableHeaderElements.slice(0, numberOfStickyColumns)\n\n    const newColumnsStyle = stickyColumns.reduce((acc, column, index) => {\n      const elementNumber = index + 1\n      const styleObject = {\n        ...acc,\n        [`--sticky-column-width-${elementNumber}`]: `${column.offsetWidth}px`,\n        [`--sticky-offset-left-${elementNumber}`]: `${accWidth}px`\n      }\n\n      accWidth += tableHeaderCells?.item(index).clientWidth || 0\n\n      return styleObject\n    }, {})\n\n    return newColumnsStyle\n  }, [numberOfStickyColumns, wrapperRef])\n\n  React.useLayoutEffect(() => {\n    if (!numberOfStickyColumns) return\n    const newColumnsStyle = generateColumnsStyle()\n\n    setColumnsStyle(newColumnsStyle)\n  }, [numberOfStickyColumns, wrapperRef, generateColumnsStyle])\n\n  return {\n    columnsStyle\n  }\n}\n"],"mappings":";;AAWA,IAAa,yBAAyB,EACpC,uBACA,iBAI0B;CAC1B,MAAM,CAAC,cAAc,mBAAmB,QAAM,SAAsB,EAAE,CAAC;CAEvE,MAAM,uBAAuB,QAAM,kBAAkB;EACnD,IAAI,WAAW;EAGf,MAAM,mBAAmB,WAAW,SAAS,iBAAiB,KAAK;AAmBnE,SAlB4B,MAAM,KAAK,oBAAoB,EAAE,CAAC,CAGpB,MAAM,GAAG,sBAAsB,CAEnC,QAAQ,KAAK,QAAQ,UAAU;GACnE,MAAM,gBAAgB,QAAQ;GAC9B,MAAM,cAAc;IAClB,GAAG;KACF,yBAAyB,kBAAkB,GAAG,OAAO,YAAY;KACjE,wBAAwB,kBAAkB,GAAG,SAAS;IACxD;AAED,eAAY,kBAAkB,KAAK,MAAM,CAAC,eAAe;AAEzD,UAAO;KACN,EAAE,CAAC;IAGL,CAAC,uBAAuB,WAAW,CAAC;AAEvC,SAAM,sBAAsB;AAC1B,MAAI,CAAC,sBAAuB;AAG5B,kBAFwB,sBAAsB,CAEd;IAC/B;EAAC;EAAuB;EAAY;EAAqB,CAAC;AAE7D,QAAO,EACL,cACD"}

package/dist/components/tabs/Tabs.js

@@ -1,16 +1,17 @@
-import { styled as e } from "../../styled.js";
-import { TabsContent as t } from "./TabsContent.js";
-import { TabsTrigger as n } from "./TabsTrigger.js";
-import { TabsTriggerList as r } from "./TabsTriggerList.js";
-import { Root as i } from "@radix-ui/react-tabs";
+import { styled } from "../../styled.js";
+import { TabsContent } from "./TabsContent.js";
+import { TabsTrigger } from "./TabsTrigger.js";
+import { TabsTriggerList } from "./TabsTriggerList.js";
+import { Root } from "@radix-ui/react-tabs";
 //#region src/components/tabs/Tabs.tsx
-var a = e(i, { base: ["w-full"] }), o = Object.assign(a, {
-	TriggerList: r,
-	Trigger: n,
-	Content: t
+var StyledRoot = styled(Root, { base: ["w-full"] });
+var Tabs = Object.assign(StyledRoot, {
+	TriggerList: TabsTriggerList,
+	Trigger: TabsTrigger,
+	Content: TabsContent
 });
-a.displayName = "Tabs";
+StyledRoot.displayName = "Tabs";
 //#endregion
-export { o as Tabs };
+export { Tabs };
 
 //# sourceMappingURL=Tabs.js.map

package/dist/components/tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","names":[],"sources":["../../../src/components/tabs/Tabs.tsx"],"sourcesContent":["import { Root } from '@radix-ui/react-tabs'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { TabsContent } from './TabsContent'\nimport { TabsTrigger } from './TabsTrigger'\nimport { TabsTriggerList } from './TabsTriggerList'\n\nconst StyledRoot = styled(Root, {\n  base: ['w-full']\n})\n\nexport const Tabs = Object.assign(StyledRoot, {\n  TriggerList: TabsTriggerList,\n  Trigger: TabsTrigger,\n  Content: TabsContent\n})\n\nStyledRoot.displayName = 'Tabs'\n"],"mappings":";;;;;;AASA,IAAM,IAAa,EAAO,GAAM,EAC9B,MAAM,CAAC,SAAS,EACjB,CAAC,EAEW,IAAO,OAAO,OAAO,GAAY;CAC5C,aAAa;CACb,SAAS;CACT,SAAS;CACV,CAAC;AAEF,EAAW,cAAc"}
+{"version":3,"file":"Tabs.js","names":[],"sources":["../../../src/components/tabs/Tabs.tsx"],"sourcesContent":["import { Root } from '@radix-ui/react-tabs'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { TabsContent } from './TabsContent'\nimport { TabsTrigger } from './TabsTrigger'\nimport { TabsTriggerList } from './TabsTriggerList'\n\nconst StyledRoot = styled(Root, {\n  base: ['w-full']\n})\n\nexport const Tabs = Object.assign(StyledRoot, {\n  TriggerList: TabsTriggerList,\n  Trigger: TabsTrigger,\n  Content: TabsContent\n})\n\nStyledRoot.displayName = 'Tabs'\n"],"mappings":";;;;;;AASA,IAAM,aAAa,OAAO,MAAM,EAC9B,MAAM,CAAC,SAAS,EACjB,CAAC;AAEF,IAAa,OAAO,OAAO,OAAO,YAAY;CAC5C,aAAa;CACb,SAAS;CACT,SAAS;CACV,CAAC;AAEF,WAAW,cAAc"}

package/dist/components/tabs/TabsContent.js

@@ -1,8 +1,8 @@
-import { styled as e } from "../../styled.js";
-import { Content as t } from "@radix-ui/react-tabs";
-var n = e(t, { base: ["grow", "font-body"] });
-n.displayName = "TabsContent";
+import { styled } from "../../styled.js";
+import { Content } from "@radix-ui/react-tabs";
+var TabsContent = styled(Content, { base: ["grow", "font-body"] });
+TabsContent.displayName = "TabsContent";
 //#endregion
-export { n as TabsContent };
+export { TabsContent };
 
 //# sourceMappingURL=TabsContent.js.map

package/dist/components/tabs/TabsContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabsContent.js","names":[],"sources":["../../../src/components/tabs/TabsContent.tsx"],"sourcesContent":["import { Content } from '@radix-ui/react-tabs'\n\nimport { styled } from '~/styled'\n\nconst StyledTabsContent = styled(Content, {\n  base: ['grow', 'font-body']\n})\n\nexport const TabsContent = StyledTabsContent\n\nTabsContent.displayName = 'TabsContent'\n"],"mappings":";;AAQA,IAAa,IAJa,EAAO,GAAS,EACxC,MAAM,CAAC,QAAQ,YAAY,EAC5B,CAAC;AAIF,EAAY,cAAc"}
+{"version":3,"file":"TabsContent.js","names":[],"sources":["../../../src/components/tabs/TabsContent.tsx"],"sourcesContent":["import { Content } from '@radix-ui/react-tabs'\n\nimport { styled } from '~/styled'\n\nconst StyledTabsContent = styled(Content, {\n  base: ['grow', 'font-body']\n})\n\nexport const TabsContent = StyledTabsContent\n\nTabsContent.displayName = 'TabsContent'\n"],"mappings":";;AAQA,IAAa,cAJa,OAAO,SAAS,EACxC,MAAM,CAAC,QAAQ,YAAY,EAC5B,CAAC;AAIF,YAAY,cAAc"}

package/dist/components/tabs/TabsTrigger.js

@@ -1,15 +1,16 @@
-import { styled as e } from "../../styled.js";
-import { Text as t } from "../text/Text.js";
-import * as n from "react";
-import { Trigger as r } from "@radix-ui/react-tabs";
+import { styled } from "../../styled.js";
+import { Text } from "../text/Text.js";
+import * as React$1 from "react";
+import { Trigger } from "@radix-ui/react-tabs";
 //#region src/components/tabs/TabsTrigger.tsx
-var i = e("div", { base: [
+var StyledTabsTriggerHoverBackground = styled("div", { base: [
 	"absolute",
 	"inset-0",
 	"h-[calc(100%+2px)]",
 	"opacity-0",
 	"bg-(--interactive-1)"
-] }), a = e(r, { base: [
+] });
+var StyledTabsTrigger = styled(Trigger, { base: [
 	"bg-none",
 	"cursor-pointer",
 	"shrink-0",
@@ -34,15 +35,16 @@ var i = e("div", { base: [
 	"not-disabled:focus-visible:z-1",
 	"not-disabled:hover:[&_div]:opacity-7",
 	"not-disabled:hover:text-(--interactive-2)"
-] }), o = n.forwardRef(({ children: e, ...r }, o) => /* @__PURE__ */ n.createElement(a, {
-	...r,
-	ref: o
-}, /* @__PURE__ */ n.createElement(t, {
+] });
+var TabsTrigger = React$1.forwardRef(({ children, ...rest }, ref) => /* @__PURE__ */ React$1.createElement(StyledTabsTrigger, {
+	...rest,
+	ref
+}, /* @__PURE__ */ React$1.createElement(Text, {
 	size: "sm",
 	as: "span"
-}, e), /* @__PURE__ */ n.createElement(i, null)));
-o.displayName = "TabsTrigger";
+}, children), /* @__PURE__ */ React$1.createElement(StyledTabsTriggerHoverBackground, null)));
+TabsTrigger.displayName = "TabsTrigger";
 //#endregion
-export { o as TabsTrigger };
+export { TabsTrigger };
 
 //# sourceMappingURL=TabsTrigger.js.map

package/dist/components/tabs/TabsTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabsTrigger.js","names":[],"sources":["../../../src/components/tabs/TabsTrigger.tsx"],"sourcesContent":["import { Trigger } from '@radix-ui/react-tabs'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Text } from '../text/Text'\n\nconst StyledTabsTriggerHoverBackground = styled('div', {\n  base: [\n    'absolute',\n    'inset-0',\n    'h-[calc(100%+2px)]',\n    'opacity-0',\n    'bg-(--interactive-1)'\n  ]\n})\n\nconst StyledTabsTrigger = styled(Trigger, {\n  base: [\n    'bg-none',\n    'cursor-pointer',\n    'shrink-0',\n    'p-4',\n    'select-none',\n    'border-b-2',\n    'border-b-transparent',\n    'relative',\n    'data-[state=active]:border-current',\n    'data-[state=active]:font-semibold',\n    'data-[state=active]:text-(--interactive-1)',\n    'data-[state=active]:tracking-[-0.005em]',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30',\n    'not-disabled:active:text-(--interactive-3)',\n    'not-disabled:focus-visible:[&_div]:opacity-7',\n    'not-disabled:focus-visible:outline-none',\n    'not-disabled:focus-visible:relative',\n    'not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px]',\n    'not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]',\n    'not-disabled:focus-visible:text-(--interactive-2)',\n    'not-disabled:focus-visible:z-1',\n    'not-disabled:hover:[&_div]:opacity-7',\n    'not-disabled:hover:text-(--interactive-2)'\n  ]\n})\n\nexport const TabsTrigger = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<typeof StyledTabsTrigger> & { value: string }\n>(({ children, ...rest }, ref) => (\n  <StyledTabsTrigger {...rest} ref={ref}>\n    <Text size=\"sm\" as=\"span\">\n      {children}\n    </Text>\n    <StyledTabsTriggerHoverBackground />\n  </StyledTabsTrigger>\n))\n\nTabsTrigger.displayName = 'TabsTrigger'\n"],"mappings":";;;;;AAOA,IAAM,IAAmC,EAAO,OAAO,EACrD,MAAM;CACJ;CACA;CACA;CACA;CACA;CACD,EACF,CAAC,EAEI,IAAoB,EAAO,GAAS,EACxC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC,EAEW,IAAc,EAAM,YAG9B,EAAE,aAAU,GAAG,KAAQ,MACxB,kBAAA,cAAC,GAAD;CAAmB,GAAI;CAAW;CAKd,EAJlB,kBAAA,cAAC,GAAD;CAAM,MAAK;CAAK,IAAG;CAEZ,EADJ,EACI,EACP,kBAAA,cAAC,GAAA,KAAmC,CAClB,CACpB;AAEF,EAAY,cAAc"}
+{"version":3,"file":"TabsTrigger.js","names":[],"sources":["../../../src/components/tabs/TabsTrigger.tsx"],"sourcesContent":["import { Trigger } from '@radix-ui/react-tabs'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Text } from '../text/Text'\n\nconst StyledTabsTriggerHoverBackground = styled('div', {\n  base: [\n    'absolute',\n    'inset-0',\n    'h-[calc(100%+2px)]',\n    'opacity-0',\n    'bg-(--interactive-1)'\n  ]\n})\n\nconst StyledTabsTrigger = styled(Trigger, {\n  base: [\n    'bg-none',\n    'cursor-pointer',\n    'shrink-0',\n    'p-4',\n    'select-none',\n    'border-b-2',\n    'border-b-transparent',\n    'relative',\n    'data-[state=active]:border-current',\n    'data-[state=active]:font-semibold',\n    'data-[state=active]:text-(--interactive-1)',\n    'data-[state=active]:tracking-[-0.005em]',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30',\n    'not-disabled:active:text-(--interactive-3)',\n    'not-disabled:focus-visible:[&_div]:opacity-7',\n    'not-disabled:focus-visible:outline-none',\n    'not-disabled:focus-visible:relative',\n    'not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px]',\n    'not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]',\n    'not-disabled:focus-visible:text-(--interactive-2)',\n    'not-disabled:focus-visible:z-1',\n    'not-disabled:hover:[&_div]:opacity-7',\n    'not-disabled:hover:text-(--interactive-2)'\n  ]\n})\n\nexport const TabsTrigger = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<typeof StyledTabsTrigger> & { value: string }\n>(({ children, ...rest }, ref) => (\n  <StyledTabsTrigger {...rest} ref={ref}>\n    <Text size=\"sm\" as=\"span\">\n      {children}\n    </Text>\n    <StyledTabsTriggerHoverBackground />\n  </StyledTabsTrigger>\n))\n\nTabsTrigger.displayName = 'TabsTrigger'\n"],"mappings":";;;;;AAOA,IAAM,mCAAmC,OAAO,OAAO,EACrD,MAAM;CACJ;CACA;CACA;CACA;CACA;CACD,EACF,CAAC;AAEF,IAAM,oBAAoB,OAAO,SAAS,EACxC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC;AAEF,IAAa,cAAc,QAAM,YAG9B,EAAE,UAAU,GAAG,QAAQ,QACxB,wBAAA,cAAC,mBAAD;CAAmB,GAAI;CAAW;CAKd,EAJlB,wBAAA,cAAC,MAAD;CAAM,MAAK;CAAK,IAAG;CAEZ,EADJ,SACI,EACP,wBAAA,cAAC,kCAAA,KAAmC,CAClB,CACpB;AAEF,YAAY,cAAc"}

package/dist/components/tabs/TabsTriggerList.js

@@ -1,27 +1,29 @@
-import { styled as e } from "../../styled.js";
-import { ColorScheme as t } from "../../experiments/color-scheme/ColorScheme.js";
-import { Icon as n } from "../icon/Icon.js";
-import { ActionIcon as r } from "../action-icon/ActionIcon.js";
-import { useCallbackRefState as i } from "../../utilities/hooks/useCallbackRef.js";
-import { useScrollPosition as a } from "../../utilities/hooks/useScrollPosition.js";
-import { useSize as o } from "../../utilities/hooks/useSize.js";
-import s from "react";
-import { ChevronLeft as c, ChevronRight as l } from "@atom-learning/icons";
-import { List as u } from "@radix-ui/react-tabs";
+import { styled } from "../../styled.js";
+import { ColorScheme } from "../../experiments/color-scheme/ColorScheme.js";
+import { Icon } from "../icon/Icon.js";
+import { ActionIcon } from "../action-icon/ActionIcon.js";
+import { useCallbackRefState } from "../../utilities/hooks/useCallbackRef.js";
+import { useScrollPosition } from "../../utilities/hooks/useScrollPosition.js";
+import { useSize } from "../../utilities/hooks/useSize.js";
+import React from "react";
+import { ChevronLeft, ChevronRight } from "@atom-learning/icons";
+import { List } from "@radix-ui/react-tabs";
 //#region src/components/tabs/TabsTriggerList.tsx
-var d = e(t, { base: [
+var StyledContainer = styled(ColorScheme, { base: [
 	"relative",
 	"border-b",
 	"border-b-(--base-4)",
 	"w-full"
-] }), f = e(u, { base: [
+] });
+var StyledTriggerList = styled(List, { base: [
 	"shrink-0",
 	"flex",
 	"w-full",
 	"overflow-x-auto",
 	"-webkit-scrollbar:hidden",
 	"[scrollbar-width:none]"
-] }), p = e(r, { base: [
+] });
+var StyledChevronActionIcon = styled(ActionIcon, { base: [
 	"h-full!",
 	"absolute",
 	"top-1/2",
@@ -31,46 +33,64 @@ var d = e(t, { base: [
 	"text-(--interactive-1)!",
 	"rounded-none",
 	"opacity-90"
-] }), m = .8, h = ({ children: e, colorScheme: t = {}, ...r }) => {
-	let [u, h] = i(), { width: g } = o({
-		element: u,
+] });
+var SCROLL_STEP = .8;
+var TabsTriggerList = ({ children, colorScheme = {}, ...rest }) => {
+	const [listRef, setListRefCallback] = useCallbackRefState();
+	const { width } = useSize({
+		element: listRef,
 		delay: 500
-	}), { left: _ } = a({
-		element: u,
+	});
+	const { left } = useScrollPosition({
+		element: listRef,
 		delay: 100,
 		delayMethod: "debounce"
-	}), v = s.useMemo(() => u ? u.scrollWidth > u.clientWidth : !1, [g, u]), y = s.useMemo(() => v ? _ > 0 : !1, [_, v]), b = s.useMemo(() => !u || !v ? !1 : u.scrollWidth - _ - u.clientWidth > 1, [
-		u,
-		_,
-		v
-	]), x = s.useCallback((e) => {
-		u && u.scroll({
-			left: u.scrollLeft + u.clientWidth * e,
+	});
+	const canScrollXAxis = React.useMemo(() => {
+		if (!listRef) return false;
+		return listRef.scrollWidth > listRef.clientWidth;
+	}, [width, listRef]);
+	const canScrollLeft = React.useMemo(() => {
+		if (!canScrollXAxis) return false;
+		return left > 0;
+	}, [left, canScrollXAxis]);
+	const canScrollRight = React.useMemo(() => {
+		if (!listRef || !canScrollXAxis) return false;
+		return listRef.scrollWidth - left - listRef.clientWidth > 1;
+	}, [
+		listRef,
+		left,
+		canScrollXAxis
+	]);
+	const scrollList = React.useCallback((stepModifier) => {
+		if (!listRef) return;
+		listRef.scroll({
+			left: listRef.scrollLeft + listRef.clientWidth * stepModifier,
 			behavior: "smooth"
 		});
-	}, [u]);
-	return /* @__PURE__ */ s.createElement(d, {
+	}, [listRef]);
+	return /* @__PURE__ */ React.createElement(StyledContainer, {
 		base: "grey1",
 		accent: "primary1",
 		interactive: "hiContrast",
-		...t,
-		...r
-	}, /* @__PURE__ */ s.createElement(f, { ref: h }, e), y && /* @__PURE__ */ s.createElement(p, {
+		...colorScheme,
+		...rest
+	}, /* @__PURE__ */ React.createElement(StyledTriggerList, { ref: setListRefCallback }, children), canScrollLeft && /* @__PURE__ */ React.createElement(StyledChevronActionIcon, {
 		label: "scroll left",
 		size: "md",
-		onClick: () => x(-m),
+		onClick: () => scrollList(-SCROLL_STEP),
 		tabIndex: -1,
 		className: "left-0"
-	}, /* @__PURE__ */ s.createElement(n, { is: c })), b && /* @__PURE__ */ s.createElement(p, {
+	}, /* @__PURE__ */ React.createElement(Icon, { is: ChevronLeft })), canScrollRight && /* @__PURE__ */ React.createElement(StyledChevronActionIcon, {
 		label: "scroll right",
 		size: "md",
-		onClick: () => x(m),
+		onClick: () => scrollList(SCROLL_STEP),
 		tabIndex: -1,
 		className: "right-0"
-	}, /* @__PURE__ */ s.createElement(n, { is: l })));
+	}, /* @__PURE__ */ React.createElement(Icon, { is: ChevronRight })));
 };
-h.displayName = "TabsTriggerList";
+TabsTriggerList.displayName = "TabsTriggerList";
 //#endregion
-export { h as TabsTriggerList };
+export { TabsTriggerList };
 
 //# sourceMappingURL=TabsTriggerList.js.map

package/dist/components/tabs/TabsTriggerList.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabsTriggerList.js","names":[],"sources":["../../../src/components/tabs/TabsTriggerList.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from '@atom-learning/icons'\nimport { List } from '@radix-ui/react-tabs'\nimport React from 'react'\n\nimport {\n  ColorScheme,\n  TcolorScheme\n} from '~/experiments/color-scheme/ColorScheme'\nimport { styled } from '~/styled'\nimport { useCallbackRefState } from '~/utilities/hooks/useCallbackRef'\nimport { useScrollPosition } from '~/utilities/hooks/useScrollPosition'\nimport { useSize } from '~/utilities/hooks/useSize'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\n\nconst StyledContainer = styled(ColorScheme, {\n  base: ['relative', 'border-b', 'border-b-(--base-4)', 'w-full']\n})\n\nconst StyledTriggerList = styled(List, {\n  base: [\n    'shrink-0',\n    'flex',\n    'w-full',\n    'overflow-x-auto',\n    '-webkit-scrollbar:hidden',\n    '[scrollbar-width:none]'\n  ]\n})\n\nconst StyledChevronActionIcon = styled(ActionIcon, {\n  base: [\n    'h-full!',\n    'absolute',\n    'top-1/2',\n    '-translate-y-1/2',\n    'cursor-pointer',\n    'bg-(--base-1)!',\n    'text-(--interactive-1)!',\n    'rounded-none',\n    'opacity-90'\n  ]\n})\n\nconst SCROLL_STEP = 0.8 // Used to scroll 80% of clientWidth\n\nexport const TabsTriggerList = ({\n  children,\n  colorScheme = {},\n  ...rest\n}: React.ComponentProps<typeof StyledTriggerList> & {\n  colorScheme?: TcolorScheme\n}) => {\n  const [listRef, setListRefCallback] = useCallbackRefState()\n\n  const { width } = useSize({ element: listRef, delay: 500 })\n  const { left } = useScrollPosition({\n    element: listRef,\n    delay: 100,\n    delayMethod: 'debounce'\n  })\n\n  const canScrollXAxis = React.useMemo(() => {\n    if (!listRef) return false\n    return listRef.scrollWidth > listRef.clientWidth\n  }, [width, listRef])\n\n  const canScrollLeft = React.useMemo(() => {\n    if (!canScrollXAxis) return false\n    return left > 0\n  }, [left, canScrollXAxis])\n\n  const canScrollRight = React.useMemo(() => {\n    if (!listRef || !canScrollXAxis) return false\n    return listRef.scrollWidth - left - listRef.clientWidth > 1 // 1 rather than 0 to account for sub-pixel widths and calculations\n  }, [listRef, left, canScrollXAxis])\n\n  const scrollList = React.useCallback(\n    (stepModifier) => {\n      if (!listRef) return\n      listRef.scroll({\n        left: listRef.scrollLeft + listRef.clientWidth * stepModifier,\n        behavior: 'smooth'\n      })\n    },\n    [listRef]\n  )\n\n  return (\n    <StyledContainer\n      base=\"grey1\"\n      accent=\"primary1\"\n      interactive=\"hiContrast\"\n      {...colorScheme}\n      {...rest}\n    >\n      <StyledTriggerList ref={setListRefCallback}>{children}</StyledTriggerList>\n\n      {canScrollLeft && (\n        <StyledChevronActionIcon\n          label=\"scroll left\"\n          size=\"md\"\n          onClick={() => scrollList(-SCROLL_STEP)}\n          tabIndex={-1}\n          className=\"left-0\"\n        >\n          <Icon is={ChevronLeft} />\n        </StyledChevronActionIcon>\n      )}\n\n      {canScrollRight && (\n        <StyledChevronActionIcon\n          label=\"scroll right\"\n          size=\"md\"\n          onClick={() => scrollList(SCROLL_STEP)}\n          tabIndex={-1}\n          className=\"right-0\"\n        >\n          <Icon is={ChevronRight} />\n        </StyledChevronActionIcon>\n      )}\n    </StyledContainer>\n  )\n}\n\nTabsTriggerList.displayName = 'TabsTriggerList'\n"],"mappings":";;;;;;;;;;;AAgBA,IAAM,IAAkB,EAAO,GAAa,EAC1C,MAAM;CAAC;CAAY;CAAY;CAAuB;CAAS,EAChE,CAAC,EAEI,IAAoB,EAAO,GAAM,EACrC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC,EAEI,IAA0B,EAAO,GAAY,EACjD,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC,EAEI,IAAc,IAEP,KAAmB,EAC9B,aACA,iBAAc,EAAE,EAChB,GAAG,QAGC;CACJ,IAAM,CAAC,GAAS,KAAsB,GAAqB,EAErD,EAAE,aAAU,EAAQ;EAAE,SAAS;EAAS,OAAO;EAAK,CAAC,EACrD,EAAE,YAAS,EAAkB;EACjC,SAAS;EACT,OAAO;EACP,aAAa;EACd,CAAC,EAEI,IAAiB,EAAM,cACtB,IACE,EAAQ,cAAc,EAAQ,cADhB,IAEpB,CAAC,GAAO,EAAQ,CAAC,EAEd,IAAgB,EAAM,cACrB,IACE,IAAO,IADc,IAE3B,CAAC,GAAM,EAAe,CAAC,EAEpB,IAAiB,EAAM,cACvB,CAAC,KAAW,CAAC,IAAuB,KACjC,EAAQ,cAAc,IAAO,EAAQ,cAAc,GACzD;EAAC;EAAS;EAAM;EAAe,CAAC,EAE7B,IAAa,EAAM,aACtB,MAAiB;AACX,OACL,EAAQ,OAAO;GACb,MAAM,EAAQ,aAAa,EAAQ,cAAc;GACjD,UAAU;GACX,CAAC;IAEJ,CAAC,EAAQ,CACV;AAED,QACE,kBAAA,cAAC,GAAD;EACE,MAAK;EACL,QAAO;EACP,aAAY;EACZ,GAAI;EACJ,GAAI;EA2BY,EAzBhB,kBAAA,cAAC,GAAD,EAAmB,KAAK,GAAkD,EAA7B,EAA6B,EAEzE,KACC,kBAAA,cAAC,GAAD;EACE,OAAM;EACN,MAAK;EACL,eAAe,EAAW,CAAC,EAAY;EACvC,UAAU;EACV,WAAU;EAGc,EADxB,kBAAA,cAAC,GAAD,EAAM,IAAI,GAAe,CAAA,CACD,EAG3B,KACC,kBAAA,cAAC,GAAD;EACE,OAAM;EACN,MAAK;EACL,eAAe,EAAW,EAAY;EACtC,UAAU;EACV,WAAU;EAGc,EADxB,kBAAA,cAAC,GAAD,EAAM,IAAI,GAAgB,CAAA,CACF,CAEZ;;AAItB,EAAgB,cAAc"}
+{"version":3,"file":"TabsTriggerList.js","names":[],"sources":["../../../src/components/tabs/TabsTriggerList.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from '@atom-learning/icons'\nimport { List } from '@radix-ui/react-tabs'\nimport React from 'react'\n\nimport {\n  ColorScheme,\n  TcolorScheme\n} from '~/experiments/color-scheme/ColorScheme'\nimport { styled } from '~/styled'\nimport { useCallbackRefState } from '~/utilities/hooks/useCallbackRef'\nimport { useScrollPosition } from '~/utilities/hooks/useScrollPosition'\nimport { useSize } from '~/utilities/hooks/useSize'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\n\nconst StyledContainer = styled(ColorScheme, {\n  base: ['relative', 'border-b', 'border-b-(--base-4)', 'w-full']\n})\n\nconst StyledTriggerList = styled(List, {\n  base: [\n    'shrink-0',\n    'flex',\n    'w-full',\n    'overflow-x-auto',\n    '-webkit-scrollbar:hidden',\n    '[scrollbar-width:none]'\n  ]\n})\n\nconst StyledChevronActionIcon = styled(ActionIcon, {\n  base: [\n    'h-full!',\n    'absolute',\n    'top-1/2',\n    '-translate-y-1/2',\n    'cursor-pointer',\n    'bg-(--base-1)!',\n    'text-(--interactive-1)!',\n    'rounded-none',\n    'opacity-90'\n  ]\n})\n\nconst SCROLL_STEP = 0.8 // Used to scroll 80% of clientWidth\n\nexport const TabsTriggerList = ({\n  children,\n  colorScheme = {},\n  ...rest\n}: React.ComponentProps<typeof StyledTriggerList> & {\n  colorScheme?: TcolorScheme\n}) => {\n  const [listRef, setListRefCallback] = useCallbackRefState()\n\n  const { width } = useSize({ element: listRef, delay: 500 })\n  const { left } = useScrollPosition({\n    element: listRef,\n    delay: 100,\n    delayMethod: 'debounce'\n  })\n\n  const canScrollXAxis = React.useMemo(() => {\n    if (!listRef) return false\n    return listRef.scrollWidth > listRef.clientWidth\n  }, [width, listRef])\n\n  const canScrollLeft = React.useMemo(() => {\n    if (!canScrollXAxis) return false\n    return left > 0\n  }, [left, canScrollXAxis])\n\n  const canScrollRight = React.useMemo(() => {\n    if (!listRef || !canScrollXAxis) return false\n    return listRef.scrollWidth - left - listRef.clientWidth > 1 // 1 rather than 0 to account for sub-pixel widths and calculations\n  }, [listRef, left, canScrollXAxis])\n\n  const scrollList = React.useCallback(\n    (stepModifier) => {\n      if (!listRef) return\n      listRef.scroll({\n        left: listRef.scrollLeft + listRef.clientWidth * stepModifier,\n        behavior: 'smooth'\n      })\n    },\n    [listRef]\n  )\n\n  return (\n    <StyledContainer\n      base=\"grey1\"\n      accent=\"primary1\"\n      interactive=\"hiContrast\"\n      {...colorScheme}\n      {...rest}\n    >\n      <StyledTriggerList ref={setListRefCallback}>{children}</StyledTriggerList>\n\n      {canScrollLeft && (\n        <StyledChevronActionIcon\n          label=\"scroll left\"\n          size=\"md\"\n          onClick={() => scrollList(-SCROLL_STEP)}\n          tabIndex={-1}\n          className=\"left-0\"\n        >\n          <Icon is={ChevronLeft} />\n        </StyledChevronActionIcon>\n      )}\n\n      {canScrollRight && (\n        <StyledChevronActionIcon\n          label=\"scroll right\"\n          size=\"md\"\n          onClick={() => scrollList(SCROLL_STEP)}\n          tabIndex={-1}\n          className=\"right-0\"\n        >\n          <Icon is={ChevronRight} />\n        </StyledChevronActionIcon>\n      )}\n    </StyledContainer>\n  )\n}\n\nTabsTriggerList.displayName = 'TabsTriggerList'\n"],"mappings":";;;;;;;;;;;AAgBA,IAAM,kBAAkB,OAAO,aAAa,EAC1C,MAAM;CAAC;CAAY;CAAY;CAAuB;CAAS,EAChE,CAAC;AAEF,IAAM,oBAAoB,OAAO,MAAM,EACrC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC;AAEF,IAAM,0BAA0B,OAAO,YAAY,EACjD,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC;AAEF,IAAM,cAAc;AAEpB,IAAa,mBAAmB,EAC9B,UACA,cAAc,EAAE,EAChB,GAAG,WAGC;CACJ,MAAM,CAAC,SAAS,sBAAsB,qBAAqB;CAE3D,MAAM,EAAE,UAAU,QAAQ;EAAE,SAAS;EAAS,OAAO;EAAK,CAAC;CAC3D,MAAM,EAAE,SAAS,kBAAkB;EACjC,SAAS;EACT,OAAO;EACP,aAAa;EACd,CAAC;CAEF,MAAM,iBAAiB,MAAM,cAAc;AACzC,MAAI,CAAC,QAAS,QAAO;AACrB,SAAO,QAAQ,cAAc,QAAQ;IACpC,CAAC,OAAO,QAAQ,CAAC;CAEpB,MAAM,gBAAgB,MAAM,cAAc;AACxC,MAAI,CAAC,eAAgB,QAAO;AAC5B,SAAO,OAAO;IACb,CAAC,MAAM,eAAe,CAAC;CAE1B,MAAM,iBAAiB,MAAM,cAAc;AACzC,MAAI,CAAC,WAAW,CAAC,eAAgB,QAAO;AACxC,SAAO,QAAQ,cAAc,OAAO,QAAQ,cAAc;IACzD;EAAC;EAAS;EAAM;EAAe,CAAC;CAEnC,MAAM,aAAa,MAAM,aACtB,iBAAiB;AAChB,MAAI,CAAC,QAAS;AACd,UAAQ,OAAO;GACb,MAAM,QAAQ,aAAa,QAAQ,cAAc;GACjD,UAAU;GACX,CAAC;IAEJ,CAAC,QAAQ,CACV;AAED,QACE,sBAAA,cAAC,iBAAD;EACE,MAAK;EACL,QAAO;EACP,aAAY;EACZ,GAAI;EACJ,GAAI;EA2BY,EAzBhB,sBAAA,cAAC,mBAAD,EAAmB,KAAK,oBAAkD,EAA7B,SAA6B,EAEzE,iBACC,sBAAA,cAAC,yBAAD;EACE,OAAM;EACN,MAAK;EACL,eAAe,WAAW,CAAC,YAAY;EACvC,UAAU;EACV,WAAU;EAGc,EADxB,sBAAA,cAAC,MAAD,EAAM,IAAI,aAAe,CAAA,CACD,EAG3B,kBACC,sBAAA,cAAC,yBAAD;EACE,OAAM;EACN,MAAK;EACL,eAAe,WAAW,YAAY;EACtC,UAAU;EACV,WAAU;EAGc,EADxB,sBAAA,cAAC,MAAD,EAAM,IAAI,cAAgB,CAAA,CACF,CAEZ;;AAItB,gBAAgB,cAAc"}

package/dist/components/text/Text.js

@@ -1,8 +1,8 @@
-import { styled as e } from "../../styled.js";
-import * as t from "react";
+import { styled } from "../../styled.js";
+import * as React$1 from "react";
 //#region src/components/text/Text.tsx
-var n = e("p", {
-	base: [],
+var StyledText = styled("p", {
+	base: ["m-0"],
 	variants: {
 		size: {
 			xs: [
@@ -57,14 +57,15 @@ var n = e("p", {
 			mono: ["font-mono"]
 		}
 	}
-}, { enabledResponsiveVariants: !0 }), r = t.forwardRef(({ size: e = "md", family: r = "body", ...i }, a) => /* @__PURE__ */ t.createElement(n, {
-	size: e,
-	family: r,
-	...i,
-	ref: a
+}, { enabledResponsiveVariants: true });
+var Text = React$1.forwardRef(({ size = "md", family = "body", ...remainingProps }, ref) => /* @__PURE__ */ React$1.createElement(StyledText, {
+	size,
+	family,
+	...remainingProps,
+	ref
 }));
-r.displayName = "Text";
+Text.displayName = "Text";
 //#endregion
-export { r as Text };
+export { Text };
 
 //# sourceMappingURL=Text.js.map

package/dist/components/text/Text.js.map

@@ -1 +1 @@
-{"version":3,"file":"Text.js","names":[],"sources":["../../../src/components/text/Text.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport type { Override } from '~/utilities/types'\n\nexport const StyledText = styled(\n  'p',\n  {\n    base: [],\n    variants: {\n      size: {\n        xs: ['text-xs', 'leading-[1.6]', 'capsize-[0.4364]'],\n        sm: ['text-sm', 'leading-[1.53]', 'capsize-[0.4056]'],\n        md: ['text-md', 'leading-normal', 'capsize-[0.3864]'],\n        lg: ['text-lg', 'leading-[1.52]', 'capsize-[0.3983]'],\n        xl: ['text-xl', 'leading-[1.42]', 'capsize-[0.3506]'],\n        '2xl': ['text-2xl', 'leading-[1.40]', 'capsize-[0.3336]'],\n        '3xl': ['text-3xl', 'leading-[1.28]', 'capsize-[0.2709]'],\n        '4xl': ['text-4xl', 'leading-none', 'capsize-[0.1309]']\n      },\n      noCapsize: {\n        true: ['capsize-none']\n      },\n      weight: {\n        normal: ['font-normal'],\n        bold: ['font-semibold']\n      },\n      family: {\n        body: ['font-body'],\n        display: ['font-display'],\n        mono: ['font-mono']\n      }\n    }\n  },\n  {\n    enabledResponsiveVariants: true\n  }\n)\n\ntype TextProps = Override<\n  React.ComponentProps<typeof StyledText>,\n  {\n    as?:\n      | 'blockquote'\n      | 'caption'\n      | 'dd'\n      | 'dt'\n      | 'figcaption'\n      | 'li'\n      | 'p'\n      | 'span'\n      | 'legend'\n      | React.ComponentType\n      | React.ElementType\n  }\n>\n\nexport const Text = React.forwardRef<HTMLParagraphElement, TextProps>(\n  ({ size = 'md', family = 'body', ...remainingProps }, ref) => (\n    <StyledText size={size} family={family} {...remainingProps} ref={ref} />\n  )\n)\n\nText.displayName = 'Text'\n"],"mappings":";;;AAKA,IAAa,IAAa,EACxB,KACA;CACE,MAAM,EAAE;CACR,UAAU;EACR,MAAM;GACJ,IAAI;IAAC;IAAW;IAAiB;IAAmB;GACpD,IAAI;IAAC;IAAW;IAAkB;IAAmB;GACrD,IAAI;IAAC;IAAW;IAAkB;IAAmB;GACrD,IAAI;IAAC;IAAW;IAAkB;IAAmB;GACrD,IAAI;IAAC;IAAW;IAAkB;IAAmB;GACrD,OAAO;IAAC;IAAY;IAAkB;IAAmB;GACzD,OAAO;IAAC;IAAY;IAAkB;IAAmB;GACzD,OAAO;IAAC;IAAY;IAAgB;IAAmB;GACxD;EACD,WAAW,EACT,MAAM,CAAC,eAAe,EACvB;EACD,QAAQ;GACN,QAAQ,CAAC,cAAc;GACvB,MAAM,CAAC,gBAAgB;GACxB;EACD,QAAQ;GACN,MAAM,CAAC,YAAY;GACnB,SAAS,CAAC,eAAe;GACzB,MAAM,CAAC,YAAY;GACpB;EACF;CACF,EACD,EACE,2BAA2B,IAC5B,CACF,EAoBY,IAAO,EAAM,YACvB,EAAE,UAAO,MAAM,YAAS,QAAQ,GAAG,KAAkB,MACpD,kBAAA,cAAC,GAAD;CAAkB;CAAc;CAAQ,GAAI;CAAqB;CAAO,CAAA,CAE3E;AAED,EAAK,cAAc"}
+{"version":3,"file":"Text.js","names":[],"sources":["../../../src/components/text/Text.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport type { Override } from '~/utilities/types'\n\nexport const StyledText = styled(\n  'p',\n  {\n    base: ['m-0'],\n    variants: {\n      size: {\n        xs: ['text-xs', 'leading-[1.6]', 'capsize-[0.4364]'],\n        sm: ['text-sm', 'leading-[1.53]', 'capsize-[0.4056]'],\n        md: ['text-md', 'leading-normal', 'capsize-[0.3864]'],\n        lg: ['text-lg', 'leading-[1.52]', 'capsize-[0.3983]'],\n        xl: ['text-xl', 'leading-[1.42]', 'capsize-[0.3506]'],\n        '2xl': ['text-2xl', 'leading-[1.40]', 'capsize-[0.3336]'],\n        '3xl': ['text-3xl', 'leading-[1.28]', 'capsize-[0.2709]'],\n        '4xl': ['text-4xl', 'leading-none', 'capsize-[0.1309]']\n      },\n      noCapsize: {\n        true: ['capsize-none']\n      },\n      weight: {\n        normal: ['font-normal'],\n        bold: ['font-semibold']\n      },\n      family: {\n        body: ['font-body'],\n        display: ['font-display'],\n        mono: ['font-mono']\n      }\n    }\n  },\n  {\n    enabledResponsiveVariants: true\n  }\n)\n\ntype TextProps = Override<\n  React.ComponentProps<typeof StyledText>,\n  {\n    as?:\n      | 'blockquote'\n      | 'caption'\n      | 'dd'\n      | 'dt'\n      | 'figcaption'\n      | 'li'\n      | 'p'\n      | 'span'\n      | 'legend'\n      | React.ComponentType\n      | React.ElementType\n  }\n>\n\nexport const Text = React.forwardRef<HTMLParagraphElement, TextProps>(\n  ({ size = 'md', family = 'body', ...remainingProps }, ref) => (\n    <StyledText size={size} family={family} {...remainingProps} ref={ref} />\n  )\n)\n\nText.displayName = 'Text'\n"],"mappings":";;;AAKA,IAAa,aAAa,OACxB,KACA;CACE,MAAM,CAAC,MAAM;CACb,UAAU;EACR,MAAM;GACJ,IAAI;IAAC;IAAW;IAAiB;IAAmB;GACpD,IAAI;IAAC;IAAW;IAAkB;IAAmB;GACrD,IAAI;IAAC;IAAW;IAAkB;IAAmB;GACrD,IAAI;IAAC;IAAW;IAAkB;IAAmB;GACrD,IAAI;IAAC;IAAW;IAAkB;IAAmB;GACrD,OAAO;IAAC;IAAY;IAAkB;IAAmB;GACzD,OAAO;IAAC;IAAY;IAAkB;IAAmB;GACzD,OAAO;IAAC;IAAY;IAAgB;IAAmB;GACxD;EACD,WAAW,EACT,MAAM,CAAC,eAAe,EACvB;EACD,QAAQ;GACN,QAAQ,CAAC,cAAc;GACvB,MAAM,CAAC,gBAAgB;GACxB;EACD,QAAQ;GACN,MAAM,CAAC,YAAY;GACnB,SAAS,CAAC,eAAe;GACzB,MAAM,CAAC,YAAY;GACpB;EACF;CACF,EACD,EACE,2BAA2B,MAC5B,CACF;AAoBD,IAAa,OAAO,QAAM,YACvB,EAAE,OAAO,MAAM,SAAS,QAAQ,GAAG,kBAAkB,QACpD,wBAAA,cAAC,YAAD;CAAkB;CAAc;CAAQ,GAAI;CAAqB;CAAO,CAAA,CAE3E;AAED,KAAK,cAAc"}

package/dist/components/textarea/Textarea.js

@@ -1,7 +1,7 @@
-import { styled as e } from "../../styled.js";
-import * as t from "react";
+import { styled } from "../../styled.js";
+import * as React$1 from "react";
 //#region src/components/textarea/Textarea.tsx
-var n = e("textarea", {
+var StyledTextarea = styled("textarea", {
 	base: [
 		"shadow-none",
 		"appearance-none",
@@ -12,9 +12,11 @@ var n = e("textarea", {
 		"font-normal",
 		"text-md",
 		"leading-[1.4]",
+		"m-0",
 		"min-h-24",
 		"px-3",
 		"py-3",
+		"resize-y",
 		"w-full",
 		"disabled:bg-grey-200",
 		"disabled:cursor-not-allowed",
@@ -53,12 +55,13 @@ var n = e("textarea", {
 		appearance: "modern",
 		class: ["bg-danger-light", "focus-within:outline-danger"]
 	}]
-}), r = t.forwardRef((e, r) => /* @__PURE__ */ t.createElement(n, {
-	...e,
-	ref: r
+});
+var Textarea = React$1.forwardRef((props, ref) => /* @__PURE__ */ React$1.createElement(StyledTextarea, {
+	...props,
+	ref
 }));
-r.displayName = "Textarea";
+Textarea.displayName = "Textarea";
 //#endregion
-export { r as Textarea };
+export { Textarea };
 
 //# sourceMappingURL=Textarea.js.map

package/dist/components/textarea/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","names":[],"sources":["../../../src/components/textarea/Textarea.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nconst StyledTextarea = styled('textarea', {\n  base: [\n    'shadow-none',\n    'appearance-none',\n    'rounded-md',\n    'box-border',\n    'text-grey-1000',\n    'font-body',\n    'font-normal',\n    'text-md',\n    'leading-[1.4]',\n    'min-h-24',\n    'px-3',\n    'py-3',\n    'w-full',\n    'disabled:bg-grey-200',\n    'disabled:cursor-not-allowed',\n    'disabled:text-grey-800',\n    'placeholder:opacity-100',\n    'placeholder:text-grey-700'\n  ],\n  variants: {\n    appearance: {\n      standard: [\n        'bg-white',\n        'border',\n        'border-grey-800',\n        'focus-within:border-primary-800',\n        'focus-within:outline-none'\n      ],\n      modern: [\n        'bg-grey-100',\n        'border-none',\n        'focus-within:outline-2',\n        'focus-within:outline-blue-800',\n        'focus-within:outline-offset-1',\n        'focus-within:outline-solid',\n        'focus-within:z-1'\n      ]\n    },\n    state: {\n      error: []\n    }\n  },\n  defaultVariants: {\n    appearance: 'standard'\n  },\n  compoundVariants: [\n    {\n      state: 'error',\n      appearance: 'standard',\n      class: ['border-danger']\n    },\n    {\n      state: 'error',\n      appearance: 'modern',\n      class: ['bg-danger-light', 'focus-within:outline-danger']\n    }\n  ]\n})\n\nexport type TextareaProps = React.ComponentProps<typeof StyledTextarea>\n\nexport const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n  (props, ref) => <StyledTextarea {...props} ref={ref} />\n)\n\nTextarea.displayName = 'Textarea'\n"],"mappings":";;;AAIA,IAAM,IAAiB,EAAO,YAAY;CACxC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,YAAY;GACV,UAAU;IACR;IACA;IACA;IACA;IACA;IACD;GACD,QAAQ;IACN;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACD,OAAO,EACL,OAAO,EAAE,EACV;EACF;CACD,iBAAiB,EACf,YAAY,YACb;CACD,kBAAkB,CAChB;EACE,OAAO;EACP,YAAY;EACZ,OAAO,CAAC,gBAAgB;EACzB,EACD;EACE,OAAO;EACP,YAAY;EACZ,OAAO,CAAC,mBAAmB,8BAA8B;EAC1D,CACF;CACF,CAAC,EAIW,IAAW,EAAM,YAC3B,GAAO,MAAQ,kBAAA,cAAC,GAAD;CAAgB,GAAI;CAAY;CAAO,CAAA,CACxD;AAED,EAAS,cAAc"}
+{"version":3,"file":"Textarea.js","names":[],"sources":["../../../src/components/textarea/Textarea.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nconst StyledTextarea = styled('textarea', {\n  base: [\n    'shadow-none',\n    'appearance-none',\n    'rounded-md',\n    'box-border',\n    'text-grey-1000',\n    'font-body',\n    'font-normal',\n    'text-md',\n    'leading-[1.4]',\n    'm-0',\n    'min-h-24',\n    'px-3',\n    'py-3',\n    'resize-y',\n    'w-full',\n    'disabled:bg-grey-200',\n    'disabled:cursor-not-allowed',\n    'disabled:text-grey-800',\n    'placeholder:opacity-100',\n    'placeholder:text-grey-700'\n  ],\n  variants: {\n    appearance: {\n      standard: [\n        'bg-white',\n        'border',\n        'border-grey-800',\n        'focus-within:border-primary-800',\n        'focus-within:outline-none'\n      ],\n      modern: [\n        'bg-grey-100',\n        'border-none',\n        'focus-within:outline-2',\n        'focus-within:outline-blue-800',\n        'focus-within:outline-offset-1',\n        'focus-within:outline-solid',\n        'focus-within:z-1'\n      ]\n    },\n    state: {\n      error: []\n    }\n  },\n  defaultVariants: {\n    appearance: 'standard'\n  },\n  compoundVariants: [\n    {\n      state: 'error',\n      appearance: 'standard',\n      class: ['border-danger']\n    },\n    {\n      state: 'error',\n      appearance: 'modern',\n      class: ['bg-danger-light', 'focus-within:outline-danger']\n    }\n  ]\n})\n\nexport type TextareaProps = React.ComponentProps<typeof StyledTextarea>\n\nexport const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n  (props, ref) => <StyledTextarea {...props} ref={ref} />\n)\n\nTextarea.displayName = 'Textarea'\n"],"mappings":";;;AAIA,IAAM,iBAAiB,OAAO,YAAY;CACxC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,YAAY;GACV,UAAU;IACR;IACA;IACA;IACA;IACA;IACD;GACD,QAAQ;IACN;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACD,OAAO,EACL,OAAO,EAAE,EACV;EACF;CACD,iBAAiB,EACf,YAAY,YACb;CACD,kBAAkB,CAChB;EACE,OAAO;EACP,YAAY;EACZ,OAAO,CAAC,gBAAgB;EACzB,EACD;EACE,OAAO;EACP,YAAY;EACZ,OAAO,CAAC,mBAAmB,8BAA8B;EAC1D,CACF;CACF,CAAC;AAIF,IAAa,WAAW,QAAM,YAC3B,OAAO,QAAQ,wBAAA,cAAC,gBAAD;CAAgB,GAAI;CAAY;CAAO,CAAA,CACxD;AAED,SAAS,cAAc"}