@atom-learning/components 6.6.0-beta.1 → 6.6.0-beta.3

package/dist/components/switch/Switch.js

@@ -1,8 +1,8 @@
-import { styled as e } from "../../styled.js";
-import * as t from "react";
-import * as n from "@radix-ui/react-switch";
+import { styled } from "../../styled.js";
+import * as React$1 from "react";
+import * as RadixSwitch from "@radix-ui/react-switch";
 //#region src/components/switch/Switch.tsx
-var r = e(n.Root, {
+var StyledSwitch = styled(RadixSwitch.Root, {
 	base: [
 		"appearance-none",
 		"bg-grey-600",
@@ -29,7 +29,8 @@ var r = e(n.Root, {
 		md: ["p-0.5", "w-10"],
 		lg: ["p-1", "w-16"]
 	} }
-}), i = e(n.Thumb, {
+});
+var StyledThumb = styled(RadixSwitch.Thumb, {
 	base: [
 		"bg-white",
 		"rounded-full",
@@ -42,12 +43,13 @@ var r = e(n.Root, {
 		md: ["data-[state=checked]:translate-x-5", "size-4"],
 		lg: ["data-[state=checked]:translate-x-8", "size-6"]
 	} }
-}), a = ({ size: e = "md", ...n }) => /* @__PURE__ */ t.createElement(r, {
-	size: e,
-	...n
-}, /* @__PURE__ */ t.createElement(i, { size: e }));
-a.displayName = "Switch";
+});
+var Switch = ({ size = "md", ...rest }) => /* @__PURE__ */ React$1.createElement(StyledSwitch, {
+	size,
+	...rest
+}, /* @__PURE__ */ React$1.createElement(StyledThumb, { size }));
+Switch.displayName = "Switch";
 //#endregion
-export { a as Switch };
+export { Switch };
 
 //# sourceMappingURL=Switch.js.map

package/dist/components/switch/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","names":[],"sources":["../../../src/components/switch/Switch.tsx"],"sourcesContent":["import * as RadixSwitch from '@radix-ui/react-switch'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nconst StyledSwitch = styled(RadixSwitch.Root, {\n  base: [\n    'appearance-none',\n    'bg-grey-600',\n    'border-none',\n    'rounded-full',\n    'cursor-pointer',\n    'flex',\n    'overflow-hidden',\n    'relative',\n    'transition-all',\n    'duration-50',\n    'ease-out',\n    'hover:bg-grey-700',\n    'focus:outline-2',\n    'focus:outline-offset-1',\n    'focus:outline-primary-800',\n    'focus:outline-solid',\n    'data-[state=checked]:bg-primary-800',\n    'data-[state=checked]:hover:bg-primary-900',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ],\n  variants: {\n    size: {\n      md: ['p-0.5', 'w-10'],\n      lg: ['p-1', 'w-16']\n    }\n  }\n})\n\nconst StyledThumb = styled(RadixSwitch.Thumb, {\n  base: [\n    'bg-white',\n    'rounded-full',\n    'block',\n    'transition-transform',\n    'duration-50',\n    'will-change-transform'\n  ],\n  variants: {\n    size: {\n      md: ['data-[state=checked]:translate-x-5', 'size-4'],\n      lg: ['data-[state=checked]:translate-x-8', 'size-6']\n    }\n  }\n})\n\ntype SwitchProps = React.ComponentProps<typeof StyledSwitch>\n\nexport const Switch = ({ size = 'md', ...rest }: SwitchProps) => (\n  <StyledSwitch size={size} {...rest}>\n    <StyledThumb size={size} />\n  </StyledSwitch>\n)\n\nSwitch.displayName = 'Switch'\n"],"mappings":";;;;AAKA,IAAM,IAAe,EAAO,EAAY,MAAM;CAC5C,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,MAAM;EACJ,IAAI,CAAC,SAAS,OAAO;EACrB,IAAI,CAAC,OAAO,OAAO;EACpB,EACF;CACF,CAAC,EAEI,IAAc,EAAO,EAAY,OAAO;CAC5C,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,sCAAsC,SAAS;EACpD,IAAI,CAAC,sCAAsC,SAAS;EACrD,EACF;CACF,CAAC,EAIW,KAAU,EAAE,UAAO,MAAM,GAAG,QACvC,kBAAA,cAAC,GAAD;CAAoB;CAAM,GAAI;CAEf,EADb,kBAAA,cAAC,GAAD,EAAmB,SAAQ,CAAA,CACd;AAGjB,EAAO,cAAc"}
+{"version":3,"file":"Switch.js","names":[],"sources":["../../../src/components/switch/Switch.tsx"],"sourcesContent":["import * as RadixSwitch from '@radix-ui/react-switch'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nconst StyledSwitch = styled(RadixSwitch.Root, {\n  base: [\n    'appearance-none',\n    'bg-grey-600',\n    'border-none',\n    'rounded-full',\n    'cursor-pointer',\n    'flex',\n    'overflow-hidden',\n    'relative',\n    'transition-all',\n    'duration-50',\n    'ease-out',\n    'hover:bg-grey-700',\n    'focus:outline-2',\n    'focus:outline-offset-1',\n    'focus:outline-primary-800',\n    'focus:outline-solid',\n    'data-[state=checked]:bg-primary-800',\n    'data-[state=checked]:hover:bg-primary-900',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ],\n  variants: {\n    size: {\n      md: ['p-0.5', 'w-10'],\n      lg: ['p-1', 'w-16']\n    }\n  }\n})\n\nconst StyledThumb = styled(RadixSwitch.Thumb, {\n  base: [\n    'bg-white',\n    'rounded-full',\n    'block',\n    'transition-transform',\n    'duration-50',\n    'will-change-transform'\n  ],\n  variants: {\n    size: {\n      md: ['data-[state=checked]:translate-x-5', 'size-4'],\n      lg: ['data-[state=checked]:translate-x-8', 'size-6']\n    }\n  }\n})\n\ntype SwitchProps = React.ComponentProps<typeof StyledSwitch>\n\nexport const Switch = ({ size = 'md', ...rest }: SwitchProps) => (\n  <StyledSwitch size={size} {...rest}>\n    <StyledThumb size={size} />\n  </StyledSwitch>\n)\n\nSwitch.displayName = 'Switch'\n"],"mappings":";;;;AAKA,IAAM,eAAe,OAAO,YAAY,MAAM;CAC5C,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,MAAM;EACJ,IAAI,CAAC,SAAS,OAAO;EACrB,IAAI,CAAC,OAAO,OAAO;EACpB,EACF;CACF,CAAC;AAEF,IAAM,cAAc,OAAO,YAAY,OAAO;CAC5C,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,sCAAsC,SAAS;EACpD,IAAI,CAAC,sCAAsC,SAAS;EACrD,EACF;CACF,CAAC;AAIF,IAAa,UAAU,EAAE,OAAO,MAAM,GAAG,WACvC,wBAAA,cAAC,cAAD;CAAoB;CAAM,GAAI;CAEf,EADb,wBAAA,cAAC,aAAD,EAAmB,MAAQ,CAAA,CACd;AAGjB,OAAO,cAAc"}

package/dist/components/table/Table.js

@@ -1,16 +1,16 @@
-import { styled as e } from "../../styled.js";
-import { TableBody as t } from "./TableBody.js";
-import { TableCell as n } from "./TableCell.js";
-import { TableFooter as r } from "./TableFooter.js";
-import { TableFooterCell as i } from "./TableFooterCell.js";
-import { TableHeader as a } from "./TableHeader.js";
-import { TableHeaderCell as o } from "./TableHeaderCell.js";
-import { TableRow as s } from "./TableRow.js";
-import { TableStickyColumnsContainer as c } from "./TableStickyColumnsContainer.js";
-import l from "clsx";
-import * as u from "react";
+import { styled } from "../../styled.js";
+import { TableBody } from "./TableBody.js";
+import { TableCell } from "./TableCell.js";
+import { TableFooter } from "./TableFooter.js";
+import { TableFooterCell } from "./TableFooterCell.js";
+import { TableHeader } from "./TableHeader.js";
+import { TableHeaderCell } from "./TableHeaderCell.js";
+import { TableRow } from "./TableRow.js";
+import { TableStickyColumnsContainer } from "./TableStickyColumnsContainer.js";
+import clsx from "clsx";
+import * as React$1 from "react";
 //#region src/components/table/Table.tsx
-var d = e("table", {
+var StyledTable = styled("table", {
 	base: [
 		"border-separate",
 		"border-spacing-0",
@@ -48,30 +48,33 @@ var d = e("table", {
 			square: []
 		}
 	}
-}), f = u.forwardRef(({ size: e = "md", corners: t = "round", numberOfStickyColumns: n = 0, scrollContainerCls: r, scrollContainerkey: i, ...a }, o) => {
-	let s = /* @__PURE__ */ u.createElement(d, {
-		ref: o,
-		size: e,
-		corners: t,
-		...a
+});
+var TableComponent = React$1.forwardRef(({ size = "md", corners = "round", numberOfStickyColumns = 0, scrollContainerCls, scrollContainerkey, ...rest }, ref) => {
+	const tableComponent = /* @__PURE__ */ React$1.createElement(StyledTable, {
+		ref,
+		size,
+		corners,
+		...rest
 	});
-	return n ? /* @__PURE__ */ u.createElement(c, {
-		key: i,
-		className: l(r),
-		numberOfStickyColumns: n
-	}, s) : s;
-}), p = Object.assign(f, {
-	Body: t,
-	Cell: n,
-	Footer: r,
-	FooterCell: i,
-	Header: a,
-	HeaderCell: o,
-	Row: s,
-	StickyColumnsContainer: c
+	if (numberOfStickyColumns) return /* @__PURE__ */ React$1.createElement(TableStickyColumnsContainer, {
+		key: scrollContainerkey,
+		className: clsx(scrollContainerCls),
+		numberOfStickyColumns
+	}, tableComponent);
+	return tableComponent;
+});
+var Table = Object.assign(TableComponent, {
+	Body: TableBody,
+	Cell: TableCell,
+	Footer: TableFooter,
+	FooterCell: TableFooterCell,
+	Header: TableHeader,
+	HeaderCell: TableHeaderCell,
+	Row: TableRow,
+	StickyColumnsContainer: TableStickyColumnsContainer
 });
-f.displayName = "Table";
+TableComponent.displayName = "Table";
 //#endregion
-export { p as Table };
+export { Table };
 
 //# sourceMappingURL=Table.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Table.js","names":[],"sources":["../../../src/components/table/Table.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { TableBody } from './TableBody'\nimport { TableCell } from './TableCell'\nimport { TableFooter } from './TableFooter'\nimport { TableFooterCell } from './TableFooterCell'\nimport { TableHeader } from './TableHeader'\nimport { TableHeaderCell } from './TableHeaderCell'\nimport { TableRow } from './TableRow'\nimport { TableStickyColumnsContainer } from './TableStickyColumnsContainer'\n\nconst StyledTable = styled('table', {\n  base: [\n    'border-separate',\n    'border-spacing-0',\n    'font-sans',\n    'text-sm',\n    'w-full',\n    'relative',\n    'z-0'\n  ],\n  variants: {\n    size: {\n      md: ['[&_td,&_th]:h-10', '[&_td,&_th]:px-3', '[&_td,&_th]:py-1'],\n      lg: [\n        '[&_td,&_th]:h-12',\n        '[&_td,&_th]:py-0',\n        '[&_td,&_th]:pr-0',\n        '[&_td,&_th]:pl-3',\n        '[&_td,&_th]:last:pr-3'\n      ],\n      xl: [\n        '[&_th]:h-12',\n        '[&_td]:h-16',\n        '[&_td,&_th]:py-0',\n        '[&_td,&_th]:pr-0',\n        '[&_td,&_th]:pl-3',\n        '[&_td,&_th]:last:pr-3'\n      ]\n    },\n    corners: {\n      round: ['rounded-md'],\n      square: []\n    }\n  }\n})\n\ntype TableProps = React.ComponentProps<typeof StyledTable> & {\n  numberOfStickyColumns?: number\n  scrollContainerCls?: string | string[]\n  scrollContainerkey?: string\n  maxRowDepth?: number\n}\n\nconst TableComponent = React.forwardRef<HTMLTableElement, TableProps>(\n  (\n    {\n      size = 'md',\n      corners = 'round',\n      numberOfStickyColumns = 0,\n      scrollContainerCls,\n      scrollContainerkey,\n      ...rest\n    },\n    ref\n  ) => {\n    const tableComponent = (\n      <StyledTable ref={ref} size={size} corners={corners} {...rest} />\n    )\n\n    if (numberOfStickyColumns) {\n      return (\n        <TableStickyColumnsContainer\n          key={scrollContainerkey}\n          className={clsx(scrollContainerCls)}\n          numberOfStickyColumns={numberOfStickyColumns}\n        >\n          {tableComponent}\n        </TableStickyColumnsContainer>\n      )\n    }\n\n    return tableComponent\n  }\n)\n\nexport const Table = Object.assign(TableComponent, {\n  Body: TableBody,\n  Cell: TableCell,\n  Footer: TableFooter,\n  FooterCell: TableFooterCell,\n  Header: TableHeader,\n  HeaderCell: TableHeaderCell,\n  Row: TableRow,\n  StickyColumnsContainer: TableStickyColumnsContainer\n})\n\nTableComponent.displayName = 'Table'\n"],"mappings":";;;;;;;;;;;;AAcA,IAAM,IAAc,EAAO,SAAS;CAClC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,MAAM;GACJ,IAAI;IAAC;IAAoB;IAAoB;IAAmB;GAChE,IAAI;IACF;IACA;IACA;IACA;IACA;IACD;GACD,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACD,SAAS;GACP,OAAO,CAAC,aAAa;GACrB,QAAQ,EAAE;GACX;EACF;CACF,CAAC,EASI,IAAiB,EAAM,YAEzB,EACE,UAAO,MACP,aAAU,SACV,2BAAwB,GACxB,uBACA,uBACA,GAAG,KAEL,MACG;CACH,IAAM,IACJ,kBAAA,cAAC,GAAD;EAAkB;EAAW;EAAe;EAAS,GAAI;EAAQ,CAAA;AAenE,QAZI,IAEA,kBAAA,cAAC,GAAD;EACE,KAAK;EACL,WAAW,EAAK,EAAmB;EACZ;EAGK,EAD3B,EAC2B,GAI3B;EAEV,EAEY,IAAQ,OAAO,OAAO,GAAgB;CACjD,MAAM;CACN,MAAM;CACN,QAAQ;CACR,YAAY;CACZ,QAAQ;CACR,YAAY;CACZ,KAAK;CACL,wBAAwB;CACzB,CAAC;AAEF,EAAe,cAAc"}
+{"version":3,"file":"Table.js","names":[],"sources":["../../../src/components/table/Table.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { TableBody } from './TableBody'\nimport { TableCell } from './TableCell'\nimport { TableFooter } from './TableFooter'\nimport { TableFooterCell } from './TableFooterCell'\nimport { TableHeader } from './TableHeader'\nimport { TableHeaderCell } from './TableHeaderCell'\nimport { TableRow } from './TableRow'\nimport { TableStickyColumnsContainer } from './TableStickyColumnsContainer'\n\nconst StyledTable = styled('table', {\n  base: [\n    'border-separate',\n    'border-spacing-0',\n    'font-sans',\n    'text-sm',\n    'w-full',\n    'relative',\n    'z-0'\n  ],\n  variants: {\n    size: {\n      md: ['[&_td,&_th]:h-10', '[&_td,&_th]:px-3', '[&_td,&_th]:py-1'],\n      lg: [\n        '[&_td,&_th]:h-12',\n        '[&_td,&_th]:py-0',\n        '[&_td,&_th]:pr-0',\n        '[&_td,&_th]:pl-3',\n        '[&_td,&_th]:last:pr-3'\n      ],\n      xl: [\n        '[&_th]:h-12',\n        '[&_td]:h-16',\n        '[&_td,&_th]:py-0',\n        '[&_td,&_th]:pr-0',\n        '[&_td,&_th]:pl-3',\n        '[&_td,&_th]:last:pr-3'\n      ]\n    },\n    corners: {\n      round: ['rounded-md'],\n      square: []\n    }\n  }\n})\n\ntype TableProps = React.ComponentProps<typeof StyledTable> & {\n  numberOfStickyColumns?: number\n  scrollContainerCls?: string | string[]\n  scrollContainerkey?: string\n  maxRowDepth?: number\n}\n\nconst TableComponent = React.forwardRef<HTMLTableElement, TableProps>(\n  (\n    {\n      size = 'md',\n      corners = 'round',\n      numberOfStickyColumns = 0,\n      scrollContainerCls,\n      scrollContainerkey,\n      ...rest\n    },\n    ref\n  ) => {\n    const tableComponent = (\n      <StyledTable ref={ref} size={size} corners={corners} {...rest} />\n    )\n\n    if (numberOfStickyColumns) {\n      return (\n        <TableStickyColumnsContainer\n          key={scrollContainerkey}\n          className={clsx(scrollContainerCls)}\n          numberOfStickyColumns={numberOfStickyColumns}\n        >\n          {tableComponent}\n        </TableStickyColumnsContainer>\n      )\n    }\n\n    return tableComponent\n  }\n)\n\nexport const Table = Object.assign(TableComponent, {\n  Body: TableBody,\n  Cell: TableCell,\n  Footer: TableFooter,\n  FooterCell: TableFooterCell,\n  Header: TableHeader,\n  HeaderCell: TableHeaderCell,\n  Row: TableRow,\n  StickyColumnsContainer: TableStickyColumnsContainer\n})\n\nTableComponent.displayName = 'Table'\n"],"mappings":";;;;;;;;;;;;AAcA,IAAM,cAAc,OAAO,SAAS;CAClC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,MAAM;GACJ,IAAI;IAAC;IAAoB;IAAoB;IAAmB;GAChE,IAAI;IACF;IACA;IACA;IACA;IACA;IACD;GACD,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACD,SAAS;GACP,OAAO,CAAC,aAAa;GACrB,QAAQ,EAAE;GACX;EACF;CACF,CAAC;AASF,IAAM,iBAAiB,QAAM,YAEzB,EACE,OAAO,MACP,UAAU,SACV,wBAAwB,GACxB,oBACA,oBACA,GAAG,QAEL,QACG;CACH,MAAM,iBACJ,wBAAA,cAAC,aAAD;EAAkB;EAAW;EAAe;EAAS,GAAI;EAAQ,CAAA;AAGnE,KAAI,sBACF,QACE,wBAAA,cAAC,6BAAD;EACE,KAAK;EACL,WAAW,KAAK,mBAAmB;EACZ;EAGK,EAD3B,eAC2B;AAIlC,QAAO;EAEV;AAED,IAAa,QAAQ,OAAO,OAAO,gBAAgB;CACjD,MAAM;CACN,MAAM;CACN,QAAQ;CACR,YAAY;CACZ,QAAQ;CACR,YAAY;CACZ,KAAK;CACL,wBAAwB;CACzB,CAAC;AAEF,eAAe,cAAc"}

package/dist/components/table/TableBody.js

@@ -1,18 +1,19 @@
-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/table/TableBody.tsx
-var n = e("tbody", {
+var StyledTableBody = styled("tbody", {
 	base: [],
 	variants: { striped: {
 		true: ["[&_tr]:even:bg-grey-100", "[&_tr]:odd:bg-white"],
 		false: ["[&_tr]:bg-white"]
 	} }
-}), r = ({ striped: e = !0, ...r }) => /* @__PURE__ */ t.createElement(n, {
-	striped: e,
-	...r
 });
-r.displayName = "TableBody";
+var TableBody = ({ striped = true, ...rest }) => /* @__PURE__ */ React$1.createElement(StyledTableBody, {
+	striped,
+	...rest
+});
+TableBody.displayName = "TableBody";
 //#endregion
-export { r as TableBody };
+export { TableBody };
 
 //# sourceMappingURL=TableBody.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TableBody.js","names":[],"sources":["../../../src/components/table/TableBody.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nconst StyledTableBody = styled('tbody', {\n  base: [],\n  variants: {\n    striped: {\n      true: ['[&_tr]:even:bg-grey-100', '[&_tr]:odd:bg-white'],\n      false: ['[&_tr]:bg-white']\n    }\n  }\n})\n\ntype TableBodyProps = React.ComponentProps<typeof StyledTableBody>\n\nexport const TableBody = ({ striped = true, ...rest }: TableBodyProps) => (\n  <StyledTableBody striped={striped} {...rest} />\n)\n\nTableBody.displayName = 'TableBody'\n"],"mappings":";;;AAIA,IAAM,IAAkB,EAAO,SAAS;CACtC,MAAM,EAAE;CACR,UAAU,EACR,SAAS;EACP,MAAM,CAAC,2BAA2B,sBAAsB;EACxD,OAAO,CAAC,kBAAkB;EAC3B,EACF;CACF,CAAC,EAIW,KAAa,EAAE,aAAU,IAAM,GAAG,QAC7C,kBAAA,cAAC,GAAD;CAA0B;CAAS,GAAI;CAAQ,CAAA;AAGjD,EAAU,cAAc"}
+{"version":3,"file":"TableBody.js","names":[],"sources":["../../../src/components/table/TableBody.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nconst StyledTableBody = styled('tbody', {\n  base: [],\n  variants: {\n    striped: {\n      true: ['[&_tr]:even:bg-grey-100', '[&_tr]:odd:bg-white'],\n      false: ['[&_tr]:bg-white']\n    }\n  }\n})\n\ntype TableBodyProps = React.ComponentProps<typeof StyledTableBody>\n\nexport const TableBody = ({ striped = true, ...rest }: TableBodyProps) => (\n  <StyledTableBody striped={striped} {...rest} />\n)\n\nTableBody.displayName = 'TableBody'\n"],"mappings":";;;AAIA,IAAM,kBAAkB,OAAO,SAAS;CACtC,MAAM,EAAE;CACR,UAAU,EACR,SAAS;EACP,MAAM,CAAC,2BAA2B,sBAAsB;EACxD,OAAO,CAAC,kBAAkB;EAC3B,EACF;CACF,CAAC;AAIF,IAAa,aAAa,EAAE,UAAU,MAAM,GAAG,WAC7C,wBAAA,cAAC,iBAAD;CAA0B;CAAS,GAAI;CAAQ,CAAA;AAGjD,UAAU,cAAc"}

package/dist/components/table/TableCell.js

@@ -1,6 +1,6 @@
-import { styled as e } from "../../styled.js";
+import { styled } from "../../styled.js";
 //#region src/components/table/TableCell.tsx
-var t = e("td", { base: [
+var TableCell = styled("td", { base: [
 	"border-t",
 	"border-t-grey-100",
 	"box-border",
@@ -11,8 +11,8 @@ var t = e("td", { base: [
 	"align-middle",
 	"first:font-semibold"
 ] });
-t.displayName = "TableCell";
+TableCell.displayName = "TableCell";
 //#endregion
-export { t as TableCell };
+export { TableCell };
 
 //# sourceMappingURL=TableCell.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TableCell.js","names":[],"sources":["../../../src/components/table/TableCell.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\nexport const TableCell = styled('td', {\n  base: [\n    'border-t',\n    'border-t-grey-100',\n    'box-border',\n    'text-grey-800',\n    'font-body',\n    'leading-normal',\n    'text-left',\n    'align-middle',\n    'first:font-semibold'\n  ]\n})\n\nTableCell.displayName = 'TableCell'\n"],"mappings":";;AAEA,IAAa,IAAY,EAAO,MAAM,EACpC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC;AAEF,EAAU,cAAc"}
+{"version":3,"file":"TableCell.js","names":[],"sources":["../../../src/components/table/TableCell.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\nexport const TableCell = styled('td', {\n  base: [\n    'border-t',\n    'border-t-grey-100',\n    'box-border',\n    'text-grey-800',\n    'font-body',\n    'leading-normal',\n    'text-left',\n    'align-middle',\n    'first:font-semibold'\n  ]\n})\n\nTableCell.displayName = 'TableCell'\n"],"mappings":";;AAEA,IAAa,YAAY,OAAO,MAAM,EACpC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC;AAEF,UAAU,cAAc"}

package/dist/components/table/TableFooter.js

@@ -1,8 +1,8 @@
-import { styled as e } from "../../styled.js";
+import { styled } from "../../styled.js";
 //#region src/components/table/TableFooter.tsx
-var t = e("tfoot", { base: [] });
-t.displayName = "TableFooter";
+var TableFooter = styled("tfoot", { base: [] });
+TableFooter.displayName = "TableFooter";
 //#endregion
-export { t as TableFooter };
+export { TableFooter };
 
 //# sourceMappingURL=TableFooter.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TableFooter.js","names":[],"sources":["../../../src/components/table/TableFooter.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\nexport const TableFooter = styled('tfoot', {\n  base: []\n})\n\nTableFooter.displayName = 'TableFooter'\n"],"mappings":";;AAEA,IAAa,IAAc,EAAO,SAAS,EACzC,MAAM,EAAE,EACT,CAAC;AAEF,EAAY,cAAc"}
+{"version":3,"file":"TableFooter.js","names":[],"sources":["../../../src/components/table/TableFooter.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\nexport const TableFooter = styled('tfoot', {\n  base: []\n})\n\nTableFooter.displayName = 'TableFooter'\n"],"mappings":";;AAEA,IAAa,cAAc,OAAO,SAAS,EACzC,MAAM,EAAE,EACT,CAAC;AAEF,YAAY,cAAc"}

package/dist/components/table/TableFooterCell.js

@@ -1,14 +1,14 @@
-import { styled as e } from "../../styled.js";
+import { styled } from "../../styled.js";
 //#region src/components/table/TableFooterCell.tsx
-var t = e("td", { base: [
+var TableFooterCell = styled("td", { base: [
 	"text-grey-800",
 	"font-body",
 	"font-semibold",
 	"text-left",
 	"align-middle"
 ] });
-t.displayName = "TableFooterCell";
+TableFooterCell.displayName = "TableFooterCell";
 //#endregion
-export { t as TableFooterCell };
+export { TableFooterCell };
 
 //# sourceMappingURL=TableFooterCell.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TableFooterCell.js","names":[],"sources":["../../../src/components/table/TableFooterCell.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\nexport const TableFooterCell = styled('td', {\n  base: [\n    'text-grey-800',\n    'font-body',\n    'font-semibold',\n    'text-left',\n    'align-middle'\n  ]\n})\n\nTableFooterCell.displayName = 'TableFooterCell'\n"],"mappings":";;AAEA,IAAa,IAAkB,EAAO,MAAM,EAC1C,MAAM;CACJ;CACA;CACA;CACA;CACA;CACD,EACF,CAAC;AAEF,EAAgB,cAAc"}
+{"version":3,"file":"TableFooterCell.js","names":[],"sources":["../../../src/components/table/TableFooterCell.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\nexport const TableFooterCell = styled('td', {\n  base: [\n    'text-grey-800',\n    'font-body',\n    'font-semibold',\n    'text-left',\n    'align-middle'\n  ]\n})\n\nTableFooterCell.displayName = 'TableFooterCell'\n"],"mappings":";;AAEA,IAAa,kBAAkB,OAAO,MAAM,EAC1C,MAAM;CACJ;CACA;CACA;CACA;CACA;CACD,EACF,CAAC;AAEF,gBAAgB,cAAc"}

package/dist/components/table/TableHeader.js

@@ -1,21 +1,22 @@
-import { styled as e } from "../../styled.js";
-import t from "react";
+import { styled } from "../../styled.js";
+import React from "react";
 //#region src/components/table/TableHeader.tsx
-var n = {
+var TABLE_HEADER_THEMES = {
 	PRIMARY: "primary",
 	PRIMARY_DARK: "primaryDark",
 	PRIMARY_LIGHT: "primaryLight",
 	LIGHT: "light",
 	WHITE: "white"
-}, r = e("thead", {
+};
+var StyledTableHeader = styled("thead", {
 	base: [],
 	variants: {
 		theme: {
-			[n.PRIMARY]: ["[&_th]:bg-primary-800"],
-			[n.PRIMARY_DARK]: ["[&_th]:bg-primary-1000"],
-			[n.PRIMARY_LIGHT]: ["[&_th]:bg-primary-200", "[&_th]:text-grey-1000"],
-			[n.LIGHT]: ["[&_th]:bg-grey-100", "[&_th]:text-grey-1000"],
-			[n.WHITE]: ["[&_th]:bg-white", "[&_th]:text-grey-1000"]
+			[TABLE_HEADER_THEMES.PRIMARY]: ["[&_th]:bg-primary-800"],
+			[TABLE_HEADER_THEMES.PRIMARY_DARK]: ["[&_th]:bg-primary-1000"],
+			[TABLE_HEADER_THEMES.PRIMARY_LIGHT]: ["[&_th]:bg-primary-200", "[&_th]:text-grey-1000"],
+			[TABLE_HEADER_THEMES.LIGHT]: ["[&_th]:bg-grey-100", "[&_th]:text-grey-1000"],
+			[TABLE_HEADER_THEMES.WHITE]: ["[&_th]:bg-white", "[&_th]:text-grey-1000"]
 		},
 		isSticky: { true: [
 			"sticky",
@@ -23,13 +24,16 @@ var n = {
 			"z-3"
 		] }
 	}
-}), i = ({ theme: e = "primaryDark", isSticky: n = !1, ...i }) => /* @__PURE__ */ t.createElement(r, {
-	theme: e,
-	isSticky: n,
-	...i
 });
-i.displayName = "TableHeader";
+var TableHeader = ({ theme = "primaryDark", isSticky = false, ...rest }) => {
+	return /* @__PURE__ */ React.createElement(StyledTableHeader, {
+		theme,
+		isSticky,
+		...rest
+	});
+};
+TableHeader.displayName = "TableHeader";
 //#endregion
-export { i as TableHeader };
+export { TableHeader };
 
 //# sourceMappingURL=TableHeader.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TableHeader.js","names":[],"sources":["../../../src/components/table/TableHeader.tsx"],"sourcesContent":["import React from 'react'\n\nimport { styled } from '~/styled'\n\nexport const TABLE_HEADER_THEMES = {\n  PRIMARY: 'primary',\n  PRIMARY_DARK: 'primaryDark',\n  PRIMARY_LIGHT: 'primaryLight',\n  LIGHT: 'light',\n  WHITE: 'white'\n} as const\n\nconst StyledTableHeader = styled('thead', {\n  base: [],\n  variants: {\n    theme: {\n      [TABLE_HEADER_THEMES.PRIMARY]: ['[&_th]:bg-primary-800'],\n      [TABLE_HEADER_THEMES.PRIMARY_DARK]: ['[&_th]:bg-primary-1000'],\n      [TABLE_HEADER_THEMES.PRIMARY_LIGHT]: [\n        '[&_th]:bg-primary-200',\n        '[&_th]:text-grey-1000'\n      ],\n      [TABLE_HEADER_THEMES.LIGHT]: [\n        '[&_th]:bg-grey-100',\n        '[&_th]:text-grey-1000'\n      ],\n      [TABLE_HEADER_THEMES.WHITE]: ['[&_th]:bg-white', '[&_th]:text-grey-1000']\n    },\n    isSticky: {\n      true: ['sticky', 'top-0', 'z-3']\n    }\n  }\n})\n\ntype TableHeaderProps = React.ComponentProps<typeof StyledTableHeader>\n\nexport const TableHeader = ({\n  theme = 'primaryDark',\n  isSticky = false,\n  ...rest\n}: TableHeaderProps) => {\n  return <StyledTableHeader theme={theme} isSticky={isSticky} {...rest} />\n}\n\nTableHeader.displayName = 'TableHeader'\n"],"mappings":";;;AAIA,IAAa,IAAsB;CACjC,SAAS;CACT,cAAc;CACd,eAAe;CACf,OAAO;CACP,OAAO;CACR,EAEK,IAAoB,EAAO,SAAS;CACxC,MAAM,EAAE;CACR,UAAU;EACR,OAAO;IACJ,EAAoB,UAAU,CAAC,wBAAwB;IACvD,EAAoB,eAAe,CAAC,yBAAyB;IAC7D,EAAoB,gBAAgB,CACnC,yBACA,wBACD;IACA,EAAoB,QAAQ,CAC3B,sBACA,wBACD;IACA,EAAoB,QAAQ,CAAC,mBAAmB,wBAAwB;GAC1E;EACD,UAAU,EACR,MAAM;GAAC;GAAU;GAAS;GAAM,EACjC;EACF;CACF,CAAC,EAIW,KAAe,EAC1B,WAAQ,eACR,cAAW,IACX,GAAG,QAEI,kBAAA,cAAC,GAAD;CAA0B;CAAiB;CAAU,GAAI;CAAQ,CAAA;AAG1E,EAAY,cAAc"}
+{"version":3,"file":"TableHeader.js","names":[],"sources":["../../../src/components/table/TableHeader.tsx"],"sourcesContent":["import React from 'react'\n\nimport { styled } from '~/styled'\n\nexport const TABLE_HEADER_THEMES = {\n  PRIMARY: 'primary',\n  PRIMARY_DARK: 'primaryDark',\n  PRIMARY_LIGHT: 'primaryLight',\n  LIGHT: 'light',\n  WHITE: 'white'\n} as const\n\nconst StyledTableHeader = styled('thead', {\n  base: [],\n  variants: {\n    theme: {\n      [TABLE_HEADER_THEMES.PRIMARY]: ['[&_th]:bg-primary-800'],\n      [TABLE_HEADER_THEMES.PRIMARY_DARK]: ['[&_th]:bg-primary-1000'],\n      [TABLE_HEADER_THEMES.PRIMARY_LIGHT]: [\n        '[&_th]:bg-primary-200',\n        '[&_th]:text-grey-1000'\n      ],\n      [TABLE_HEADER_THEMES.LIGHT]: [\n        '[&_th]:bg-grey-100',\n        '[&_th]:text-grey-1000'\n      ],\n      [TABLE_HEADER_THEMES.WHITE]: ['[&_th]:bg-white', '[&_th]:text-grey-1000']\n    },\n    isSticky: {\n      true: ['sticky', 'top-0', 'z-3']\n    }\n  }\n})\n\ntype TableHeaderProps = React.ComponentProps<typeof StyledTableHeader>\n\nexport const TableHeader = ({\n  theme = 'primaryDark',\n  isSticky = false,\n  ...rest\n}: TableHeaderProps) => {\n  return <StyledTableHeader theme={theme} isSticky={isSticky} {...rest} />\n}\n\nTableHeader.displayName = 'TableHeader'\n"],"mappings":";;;AAIA,IAAa,sBAAsB;CACjC,SAAS;CACT,cAAc;CACd,eAAe;CACf,OAAO;CACP,OAAO;CACR;AAED,IAAM,oBAAoB,OAAO,SAAS;CACxC,MAAM,EAAE;CACR,UAAU;EACR,OAAO;IACJ,oBAAoB,UAAU,CAAC,wBAAwB;IACvD,oBAAoB,eAAe,CAAC,yBAAyB;IAC7D,oBAAoB,gBAAgB,CACnC,yBACA,wBACD;IACA,oBAAoB,QAAQ,CAC3B,sBACA,wBACD;IACA,oBAAoB,QAAQ,CAAC,mBAAmB,wBAAwB;GAC1E;EACD,UAAU,EACR,MAAM;GAAC;GAAU;GAAS;GAAM,EACjC;EACF;CACF,CAAC;AAIF,IAAa,eAAe,EAC1B,QAAQ,eACR,WAAW,OACX,GAAG,WACmB;AACtB,QAAO,sBAAA,cAAC,mBAAD;EAA0B;EAAiB;EAAU,GAAI;EAAQ,CAAA;;AAG1E,YAAY,cAAc"}

package/dist/components/table/TableHeaderCell.js

@@ -1,6 +1,6 @@
-import { styled as e } from "../../styled.js";
+import { styled } from "../../styled.js";
 //#region src/components/table/TableHeaderCell.tsx
-var t = e("th", { base: [
+var TableHeaderCell = styled("th", { base: [
 	"text-white",
 	"font-body",
 	"font-semibold",
@@ -9,8 +9,8 @@ var t = e("th", { base: [
 	"align-middle",
 	"[[colspan]]:text-center"
 ] });
-t.displayName = "TableHeaderCell";
+TableHeaderCell.displayName = "TableHeaderCell";
 //#endregion
-export { t as TableHeaderCell };
+export { TableHeaderCell };
 
 //# sourceMappingURL=TableHeaderCell.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TableHeaderCell.js","names":[],"sources":["../../../src/components/table/TableHeaderCell.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\nexport const TableHeaderCell = styled('th', {\n  base: [\n    'text-white',\n    'font-body',\n    'font-semibold',\n    'leading-normal',\n    'text-left',\n    'align-middle',\n    '[[colspan]]:text-center'\n  ]\n})\n\nTableHeaderCell.displayName = 'TableHeaderCell'\n"],"mappings":";;AAEA,IAAa,IAAkB,EAAO,MAAM,EAC1C,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC;AAEF,EAAgB,cAAc"}
+{"version":3,"file":"TableHeaderCell.js","names":[],"sources":["../../../src/components/table/TableHeaderCell.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\nexport const TableHeaderCell = styled('th', {\n  base: [\n    'text-white',\n    'font-body',\n    'font-semibold',\n    'leading-normal',\n    'text-left',\n    'align-middle',\n    '[[colspan]]:text-center'\n  ]\n})\n\nTableHeaderCell.displayName = 'TableHeaderCell'\n"],"mappings":";;AAEA,IAAa,kBAAkB,OAAO,MAAM,EAC1C,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC;AAEF,gBAAgB,cAAc"}

package/dist/components/table/TableRow.js

@@ -1,12 +1,13 @@
-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/table/TableRow.tsx
-var n = e("tr", { base: ["bg-[unset]"] }), r = t.forwardRef((e, r) => /* @__PURE__ */ t.createElement(n, {
-	...e,
-	ref: r
+var StyledRow = styled("tr", { base: ["bg-[unset]"] });
+var TableRow = React$1.forwardRef((props, ref) => /* @__PURE__ */ React$1.createElement(StyledRow, {
+	...props,
+	ref
 }));
-r.displayName = "TableRow";
+TableRow.displayName = "TableRow";
 //#endregion
-export { r as TableRow };
+export { TableRow };
 
 //# sourceMappingURL=TableRow.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TableRow.js","names":[],"sources":["../../../src/components/table/TableRow.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nconst StyledRow = styled('tr', {\n  base: ['bg-[unset]']\n})\n\nexport const TableRow = React.forwardRef<\n  HTMLTableRowElement,\n  React.ComponentProps<typeof StyledRow>\n>((props, ref) => <StyledRow {...props} ref={ref} />)\n\nTableRow.displayName = 'TableRow'\n"],"mappings":";;;AAIA,IAAM,IAAY,EAAO,MAAM,EAC7B,MAAM,CAAC,aAAa,EACrB,CAAC,EAEW,IAAW,EAAM,YAG3B,GAAO,MAAQ,kBAAA,cAAC,GAAD;CAAW,GAAI;CAAY;CAAO,CAAA,CAAC;AAErD,EAAS,cAAc"}
+{"version":3,"file":"TableRow.js","names":[],"sources":["../../../src/components/table/TableRow.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nconst StyledRow = styled('tr', {\n  base: ['bg-[unset]']\n})\n\nexport const TableRow = React.forwardRef<\n  HTMLTableRowElement,\n  React.ComponentProps<typeof StyledRow>\n>((props, ref) => <StyledRow {...props} ref={ref} />)\n\nTableRow.displayName = 'TableRow'\n"],"mappings":";;;AAIA,IAAM,YAAY,OAAO,MAAM,EAC7B,MAAM,CAAC,aAAa,EACrB,CAAC;AAEF,IAAa,WAAW,QAAM,YAG3B,OAAO,QAAQ,wBAAA,cAAC,WAAD;CAAW,GAAI;CAAY;CAAO,CAAA,CAAC;AAErD,SAAS,cAAc"}

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