@atom-learning/components 6.14.4 → 6.16.0-beta.0

package/dist/components/sortable/SortableItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"SortableItem.js","names":[],"sources":["../../../src/components/sortable/SortableItem.tsx"],"sourcesContent":["import type { UniqueIdentifier } from '@dnd-kit/core'\nimport { useSortable } from '@dnd-kit/sortable'\nimport { Slot } from '@radix-ui/react-slot'\nimport clsx from 'clsx'\nimport * as React from 'react'\n\nexport type TSortableItemProps = {\n  id: UniqueIdentifier\n  asChild?: boolean\n  isDragHandle?: boolean\n  disabled?: boolean\n  className?: string\n  style?: Pick<React.HTMLAttributes<HTMLDivElement>, 'style'>\n}\n\nexport const SortableItem = ({\n  id,\n  asChild = false,\n  className,\n  style,\n  isDragHandle = false,\n  disabled,\n  ...rest\n}: React.PropsWithChildren<TSortableItemProps>) => {\n  const { transform, setNodeRef, isDragging, listeners, attributes } =\n    useSortable({ id })\n\n  const Component = asChild ? Slot : 'div'\n  return (\n    <Component\n      ref={setNodeRef}\n      style={{\n        ...style,\n        '--scale': 1,\n        '--translate-x': transform?.x || 0,\n        '--translate-y': transform?.y || 0\n      }}\n      data-dragging={isDragging}\n      data-disabled={disabled}\n      {...(isDragHandle && !disabled ? listeners : {})}\n      {...(isDragHandle && !disabled ? attributes : {})}\n      {...rest}\n      className={clsx(\n        'translate-x-[calc(var(--translate-x)*1px)]',\n        'translate-y-[calc(var(--translate-y)*1px)]',\n        'scale-(--scale)',\n        isDragging && 'z-5',\n        'disabled:**:pointer-events-none',\n        'disabled:cursor-not-allowed',\n        'disabled:opacity-30',\n        isDragHandle && (isDragging ? 'cursor-grabbing' : 'cursor-grab'),\n        className\n      )}\n    />\n  )\n}\n\nSortableItem.displayName = 'SortableItem'\n"],"mappings":";;;;;AAeA,IAAa,gBAAgB,EAC3B,IACA,UAAU,OACV,WACA,OACA,eAAe,OACf,UACA,GAAG,WAC8C;CACjD,MAAM,EAAE,WAAW,YAAY,YAAY,WAAW,eACpD,YAAY,EAAE,IAAI,CAAC;CAErB,MAAM,YAAY,UAAU,OAAO;AACnC,QACE,wBAAA,cAAC,WAAD;EACE,KAAK;EACL,OAAO;GACL,GAAG;GACH,WAAW;GACX,iBAAiB,WAAW,KAAK;GACjC,iBAAiB,WAAW,KAAK;GAClC;EACD,iBAAe;EACf,iBAAe;EACf,GAAK,gBAAgB,CAAC,WAAW,YAAY,EAAE;EAC/C,GAAK,gBAAgB,CAAC,WAAW,aAAa,EAAE;EAChD,GAAI;EACJ,WAAW,KACT,8CACA,8CACA,mBACA,cAAc,OACd,mCACA,+BACA,uBACA,iBAAiB,aAAa,oBAAoB,gBAClD,UACD;EACD,CAAA;;AAIN,aAAa,cAAc"}
+{"version":3,"file":"SortableItem.js","names":[],"sources":["../../../src/components/sortable/SortableItem.tsx"],"sourcesContent":["import type { UniqueIdentifier } from '@dnd-kit/core'\nimport { useSortable } from '@dnd-kit/sortable'\nimport { Slot } from '@radix-ui/react-slot'\nimport * as React from 'react'\n\nimport { cn } from '~/styled'\n\nexport type TSortableItemProps = {\n  id: UniqueIdentifier\n  asChild?: boolean\n  isDragHandle?: boolean\n  disabled?: boolean\n  className?: string\n  style?: Pick<React.HTMLAttributes<HTMLDivElement>, 'style'>\n}\n\nexport const SortableItem = ({\n  id,\n  asChild = false,\n  className,\n  style,\n  isDragHandle = false,\n  disabled,\n  ...rest\n}: React.PropsWithChildren<TSortableItemProps>) => {\n  const { transform, setNodeRef, isDragging, listeners, attributes } =\n    useSortable({ id })\n\n  const Component = asChild ? Slot : 'div'\n  return (\n    <Component\n      ref={setNodeRef}\n      style={{\n        ...style,\n        '--scale': 1,\n        '--translate-x': transform?.x || 0,\n        '--translate-y': transform?.y || 0\n      }}\n      data-dragging={isDragging}\n      data-disabled={disabled}\n      {...(isDragHandle && !disabled ? listeners : {})}\n      {...(isDragHandle && !disabled ? attributes : {})}\n      {...rest}\n      className={cn(\n        'translate-x-[calc(var(--translate-x)*1px)]',\n        'translate-y-[calc(var(--translate-y)*1px)]',\n        'scale-(--scale)',\n        isDragging && 'z-5',\n        'disabled:**:pointer-events-none',\n        'disabled:cursor-not-allowed',\n        'disabled:opacity-30',\n        isDragHandle && (isDragging ? 'cursor-grabbing' : 'cursor-grab'),\n        className\n      )}\n    />\n  )\n}\n\nSortableItem.displayName = 'SortableItem'\n"],"mappings":";;;;;AAgBA,IAAa,gBAAgB,EAC3B,IACA,UAAU,OACV,WACA,OACA,eAAe,OACf,UACA,GAAG,WAC8C;CACjD,MAAM,EAAE,WAAW,YAAY,YAAY,WAAW,eACpD,YAAY,EAAE,IAAI,CAAC;CAErB,MAAM,YAAY,UAAU,OAAO;AACnC,QACE,wBAAA,cAAC,WAAD;EACE,KAAK;EACL,OAAO;GACL,GAAG;GACH,WAAW;GACX,iBAAiB,WAAW,KAAK;GACjC,iBAAiB,WAAW,KAAK;GAClC;EACD,iBAAe;EACf,iBAAe;EACf,GAAK,gBAAgB,CAAC,WAAW,YAAY,EAAE;EAC/C,GAAK,gBAAgB,CAAC,WAAW,aAAa,EAAE;EAChD,GAAI;EACJ,WAAW,GACT,8CACA,8CACA,mBACA,cAAc,OACd,mCACA,+BACA,uBACA,iBAAiB,aAAa,oBAAoB,gBAClD,UACD;EACD,CAAA;;AAIN,aAAa,cAAc"}

package/dist/components/stepper/Stepper.js

@@ -1,8 +1,8 @@
+import { cn } from "../../styled.js";
 import { StepperProvider } from "./stepper-context/StepperContext.js";
 import { StepperStepBack } from "./StepperStepBack.js";
 import { StepperStepForward } from "./StepperStepForward.js";
 import { StepperSteps } from "./StepperSteps.js";
-import clsx from "clsx";
 import * as React$1 from "react";
 import invariant from "invariant";
 //#region src/components/stepper/Stepper.tsx
@@ -20,7 +20,7 @@ var StepperComponent = ({ children, stepCount, allowSkip, onComplete, onStepChan
 		showCompletedIcons
 	}, /* @__PURE__ */ React$1.createElement("div", {
 		"aria-label": "progress",
-		className: clsx("w-full", className)
+		className: cn("w-full", className)
 	}, children));
 };
 var Stepper = Object.assign(StepperComponent, {

package/dist/components/stepper/Stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.js","names":[],"sources":["../../../src/components/stepper/Stepper.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport invariant from 'invariant'\nimport * as React from 'react'\n\nimport { StepperProvider } from './stepper-context/StepperContext'\nimport { StepperStepBack } from './StepperStepBack'\nimport { StepperStepForward } from './StepperStepForward'\nimport { StepperSteps } from './StepperSteps'\nimport { IStepperProps } from './types'\n\nconst StepperComponent = ({\n  children,\n  stepCount,\n  allowSkip,\n  onComplete,\n  onStepChange,\n  direction = 'horizontal',\n  steps,\n  hideLabels = false,\n  showCompletedIcons = false,\n  className\n}: React.PropsWithChildren<IStepperProps>) => {\n  invariant(\n    !(stepCount && steps),\n    '`Stepper` should only be given one of `stepCount` or `steps`. When both are provided, `steps` will be used and `stepCount` will be ignored.'\n  )\n\n  const count = steps?.length || stepCount || 0\n\n  return (\n    <StepperProvider\n      stepCount={count}\n      allowSkip={allowSkip}\n      onComplete={onComplete}\n      onStepChange={stepCount ? onStepChange : undefined}\n      direction={direction}\n      steps={steps || Array(count).fill('')}\n      hideLabels={hideLabels}\n      showCompletedIcons={showCompletedIcons}\n    >\n      <div aria-label=\"progress\" className={clsx('w-full', className)}>\n        {children}\n      </div>\n    </StepperProvider>\n  )\n}\n\nexport const Stepper = Object.assign(StepperComponent, {\n  StepBack: StepperStepBack,\n  StepForward: StepperStepForward,\n  Steps: StepperSteps\n})\n\nStepperComponent.displayName = 'Stepper'\n"],"mappings":";;;;;;;;AAUA,IAAM,oBAAoB,EACxB,UACA,WACA,WACA,YACA,cACA,YAAY,cACZ,OACA,aAAa,OACb,qBAAqB,OACrB,gBAC4C;AAC5C,WACE,EAAE,aAAa,QACf,8IACD;CAED,MAAM,QAAQ,OAAO,UAAU,aAAa;AAE5C,QACE,wBAAA,cAAC,iBAAD;EACE,WAAW;EACA;EACC;EACZ,cAAc,YAAY,eAAe,KAAA;EAC9B;EACX,OAAO,SAAS,MAAM,MAAM,CAAC,KAAK,GAAG;EACzB;EACQ;EAKJ,EAHhB,wBAAA,cAAC,OAAD;EAAK,cAAW;EAAW,WAAW,KAAK,UAAU,UAAU;EAEzD,EADH,SACG,CACU;;AAItB,IAAa,UAAU,OAAO,OAAO,kBAAkB;CACrD,UAAU;CACV,aAAa;CACb,OAAO;CACR,CAAC;AAEF,iBAAiB,cAAc"}
+{"version":3,"file":"Stepper.js","names":[],"sources":["../../../src/components/stepper/Stepper.tsx"],"sourcesContent":["import invariant from 'invariant'\nimport * as React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { StepperProvider } from './stepper-context/StepperContext'\nimport { StepperStepBack } from './StepperStepBack'\nimport { StepperStepForward } from './StepperStepForward'\nimport { StepperSteps } from './StepperSteps'\nimport { IStepperProps } from './types'\n\nconst StepperComponent = ({\n  children,\n  stepCount,\n  allowSkip,\n  onComplete,\n  onStepChange,\n  direction = 'horizontal',\n  steps,\n  hideLabels = false,\n  showCompletedIcons = false,\n  className\n}: React.PropsWithChildren<IStepperProps>) => {\n  invariant(\n    !(stepCount && steps),\n    '`Stepper` should only be given one of `stepCount` or `steps`. When both are provided, `steps` will be used and `stepCount` will be ignored.'\n  )\n\n  const count = steps?.length || stepCount || 0\n\n  return (\n    <StepperProvider\n      stepCount={count}\n      allowSkip={allowSkip}\n      onComplete={onComplete}\n      onStepChange={stepCount ? onStepChange : undefined}\n      direction={direction}\n      steps={steps || Array(count).fill('')}\n      hideLabels={hideLabels}\n      showCompletedIcons={showCompletedIcons}\n    >\n      <div aria-label=\"progress\" className={cn('w-full', className)}>\n        {children}\n      </div>\n    </StepperProvider>\n  )\n}\n\nexport const Stepper = Object.assign(StepperComponent, {\n  StepBack: StepperStepBack,\n  StepForward: StepperStepForward,\n  Steps: StepperSteps\n})\n\nStepperComponent.displayName = 'Stepper'\n"],"mappings":";;;;;;;;AAWA,IAAM,oBAAoB,EACxB,UACA,WACA,WACA,YACA,cACA,YAAY,cACZ,OACA,aAAa,OACb,qBAAqB,OACrB,gBAC4C;AAC5C,WACE,EAAE,aAAa,QACf,8IACD;CAED,MAAM,QAAQ,OAAO,UAAU,aAAa;AAE5C,QACE,wBAAA,cAAC,iBAAD;EACE,WAAW;EACA;EACC;EACZ,cAAc,YAAY,eAAe,KAAA;EAC9B;EACX,OAAO,SAAS,MAAM,MAAM,CAAC,KAAK,GAAG;EACzB;EACQ;EAKJ,EAHhB,wBAAA,cAAC,OAAD;EAAK,cAAW;EAAW,WAAW,GAAG,UAAU,UAAU;EAEvD,EADH,SACG,CACU;;AAItB,IAAa,UAAU,OAAO,OAAO,kBAAkB;CACrD,UAAU;CACV,aAAa;CACb,OAAO;CACR,CAAC;AAEF,iBAAiB,cAAc"}

package/dist/components/table/Table.js

@@ -1,4 +1,4 @@
-import { styled } from "../../styled.js";
+import { cn, styled } from "../../styled.js";
 import { TableBody } from "./TableBody.js";
 import { TableCell } from "./TableCell.js";
 import { TableFooter } from "./TableFooter.js";
@@ -7,7 +7,6 @@ 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 StyledTable = styled("table", {
@@ -58,7 +57,7 @@ var TableComponent = React$1.forwardRef(({ size = "md", corners = "round", numbe
 	});
 	if (numberOfStickyColumns) return /* @__PURE__ */ React$1.createElement(TableStickyColumnsContainer, {
 		key: scrollContainerkey,
-		className: clsx(scrollContainerCls),
+		className: cn(scrollContainerCls),
 		numberOfStickyColumns
 	}, tableComponent);
 	return tableComponent;

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,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"}
+{"version":3,"file":"Table.js","names":[],"sources":["../../../src/components/table/Table.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { cn } 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={cn(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,GAAG,mBAAmB;EACV;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/TableStickyColumnsContainer.js

@@ -1,5 +1,5 @@
+import { cn } from "../../styled.js";
 import { useStickyColumnsStyle } from "./useStickyColumnsCss.js";
-import clsx from "clsx";
 import React from "react";
 //#region src/components/table/TableStickyColumnsContainer.tsx
 var TableStickyColumnsContainer = ({ children, numberOfStickyColumns = 0, className, ...restProps }) => {
@@ -18,7 +18,7 @@ var TableStickyColumnsContainer = ({ children, numberOfStickyColumns = 0, classN
 		role: "scrollbar",
 		ref: wrapperRef,
 		style: columnsStyle,
-		className: clsx("overflow-auto", "max-w-full", "relative", "overscroll-x-contain", "[&_td,&_th]:bg-inherit", className, numberOfStickyColumns >= 1 && [
+		className: cn("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)",

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,+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"}
+{"version":3,"file":"TableStickyColumnsContainer.js","names":[],"sources":["../../../src/components/table/TableStickyColumnsContainer.tsx"],"sourcesContent":["import React from 'react'\n\nimport { cn } from '~/styled'\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={cn(\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":";;;;AAMA,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,GACT,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/tile-toggle-group/TileToggleGroupRoot.js

@@ -1,11 +1,11 @@
+import { cn } from "../../styled.js";
 import { ToggleGroup } from "../../utilities/radix-overrides/toggle-group/index.js";
-import clsx from "clsx";
 import * as React$1 from "react";
 //#region src/components/tile-toggle-group/TileToggleGroupRoot.tsx
 var TileToggleGroupRoot = React$1.forwardRef((props, ref) => /* @__PURE__ */ React$1.createElement(ToggleGroup.Root, {
 	ref,
 	...props,
-	className: clsx(props.className, "flex", "gap-2", props.orientation === "horizontal" && "flex-row", props.orientation === "vertical" && "flex-col", "flex-wrap")
+	className: cn(props.className, "flex", "gap-2", props.orientation === "horizontal" && "flex-row", props.orientation === "vertical" && "flex-col", "flex-wrap")
 }));
 //#endregion
 export { TileToggleGroupRoot };

package/dist/components/tile-toggle-group/TileToggleGroupRoot.js.map

@@ -1 +1 @@
-{"version":3,"file":"TileToggleGroupRoot.js","names":[],"sources":["../../../src/components/tile-toggle-group/TileToggleGroupRoot.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\nimport { ToggleGroup } from '~/utilities/radix-overrides/toggle-group'\n\ntype TTileToggleGroupRootProps = React.ComponentProps<typeof ToggleGroup.Root>\n\nexport const TileToggleGroupRoot = React.forwardRef<\n  HTMLDivElement,\n  TTileToggleGroupRootProps\n>((props, ref) => (\n  <ToggleGroup.Root\n    ref={ref}\n    {...props}\n    className={clsx(\n      props.className,\n      'flex',\n      'gap-2',\n      props.orientation === 'horizontal' && 'flex-row',\n      props.orientation === 'vertical' && 'flex-col',\n      'flex-wrap'\n    )}\n  />\n))\n"],"mappings":";;;;AAOA,IAAa,sBAAsB,QAAM,YAGtC,OAAO,QACR,wBAAA,cAAC,YAAY,MAAb;CACO;CACL,GAAI;CACJ,WAAW,KACT,MAAM,WACN,QACA,SACA,MAAM,gBAAgB,gBAAgB,YACtC,MAAM,gBAAgB,cAAc,YACpC,YACD;CACD,CAAA,CACF"}
+{"version":3,"file":"TileToggleGroupRoot.js","names":[],"sources":["../../../src/components/tile-toggle-group/TileToggleGroupRoot.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '~/styled'\nimport { ToggleGroup } from '~/utilities/radix-overrides/toggle-group'\n\ntype TTileToggleGroupRootProps = React.ComponentProps<typeof ToggleGroup.Root>\n\nexport const TileToggleGroupRoot = React.forwardRef<\n  HTMLDivElement,\n  TTileToggleGroupRootProps\n>((props, ref) => (\n  <ToggleGroup.Root\n    ref={ref}\n    {...props}\n    className={cn(\n      props.className,\n      'flex',\n      'gap-2',\n      props.orientation === 'horizontal' && 'flex-row',\n      props.orientation === 'vertical' && 'flex-col',\n      'flex-wrap'\n    )}\n  />\n))\n"],"mappings":";;;;AAOA,IAAa,sBAAsB,QAAM,YAGtC,OAAO,QACR,wBAAA,cAAC,YAAY,MAAb;CACO;CACL,GAAI;CACJ,WAAW,GACT,MAAM,WACN,QACA,SACA,MAAM,gBAAgB,gBAAgB,YACtC,MAAM,gBAAgB,cAAc,YACpC,YACD;CACD,CAAA,CACF"}

package/dist/components/toast/ToastCloseButton.js

@@ -1,7 +1,7 @@
+import { cn } from "../../styled.js";
 import { Icon } from "../icon/Icon.js";
 import { ActionIcon } from "../action-icon/ActionIcon.js";
 import { useToastContext } from "./ToastContext.js";
-import clsx from "clsx";
 import * as React$1 from "react";
 import { Close } from "@atom-learning/icons";
 import { toast } from "react-hot-toast";
@@ -15,7 +15,7 @@ var ToastCloseButton = ({ onDismiss, label = "Close alert", ...rest }) => {
 			onDismiss?.();
 		},
 		...rest,
-		className: clsx("text-white", "-mr-2", "hover:opacity-80", "hover:text-white", "focus:opacity-80", "focus:text-white")
+		className: cn("text-white", "-mr-2", "hover:opacity-80", "hover:text-white", "focus:opacity-80", "focus:text-white")
 	}, /* @__PURE__ */ React$1.createElement(Icon, { is: Close }));
 };
 //#endregion

package/dist/components/toast/ToastCloseButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToastCloseButton.js","names":[],"sources":["../../../src/components/toast/ToastCloseButton.tsx"],"sourcesContent":["import { Close } from '@atom-learning/icons'\nimport clsx from 'clsx'\nimport * as React from 'react'\nimport { toast } from 'react-hot-toast'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { useToastContext } from './ToastContext'\n\nexport interface ToastCloseButtonProps extends Omit<\n  React.ComponentProps<typeof ActionIcon>,\n  'label' | 'children'\n> {\n  onDismiss?: () => void\n  label?: string\n}\n\nexport const ToastCloseButton = ({\n  onDismiss,\n  label = 'Close alert',\n  ...rest\n}: ToastCloseButtonProps): JSX.Element => {\n  const { id } = useToastContext()\n\n  return (\n    <ActionIcon\n      label={label}\n      onClick={() => {\n        toast.dismiss(id)\n        onDismiss?.()\n      }}\n      {...rest}\n      className={clsx(\n        'text-white',\n        '-mr-2',\n        'hover:opacity-80',\n        'hover:text-white',\n        'focus:opacity-80',\n        'focus:text-white'\n      )}\n    >\n      <Icon is={Close} />\n    </ActionIcon>\n  )\n}\n"],"mappings":";;;;;;;;AAiBA,IAAa,oBAAoB,EAC/B,WACA,QAAQ,eACR,GAAG,WACqC;CACxC,MAAM,EAAE,OAAO,iBAAiB;AAEhC,QACE,wBAAA,cAAC,YAAD;EACS;EACP,eAAe;AACb,SAAM,QAAQ,GAAG;AACjB,gBAAa;;EAEf,GAAI;EACJ,WAAW,KACT,cACA,SACA,oBACA,oBACA,oBACA,mBACD;EAGU,EADX,wBAAA,cAAC,MAAD,EAAM,IAAI,OAAS,CAAA,CACR"}
+{"version":3,"file":"ToastCloseButton.js","names":[],"sources":["../../../src/components/toast/ToastCloseButton.tsx"],"sourcesContent":["import { Close } from '@atom-learning/icons'\nimport * as React from 'react'\nimport { toast } from 'react-hot-toast'\n\nimport { cn } from '~/styled'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { useToastContext } from './ToastContext'\n\nexport interface ToastCloseButtonProps extends Omit<\n  React.ComponentProps<typeof ActionIcon>,\n  'label' | 'children'\n> {\n  onDismiss?: () => void\n  label?: string\n}\n\nexport const ToastCloseButton = ({\n  onDismiss,\n  label = 'Close alert',\n  ...rest\n}: ToastCloseButtonProps): JSX.Element => {\n  const { id } = useToastContext()\n\n  return (\n    <ActionIcon\n      label={label}\n      onClick={() => {\n        toast.dismiss(id)\n        onDismiss?.()\n      }}\n      {...rest}\n      className={cn(\n        'text-white',\n        '-mr-2',\n        'hover:opacity-80',\n        'hover:text-white',\n        'focus:opacity-80',\n        'focus:text-white'\n      )}\n    >\n      <Icon is={Close} />\n    </ActionIcon>\n  )\n}\n"],"mappings":";;;;;;;;AAkBA,IAAa,oBAAoB,EAC/B,WACA,QAAQ,eACR,GAAG,WACqC;CACxC,MAAM,EAAE,OAAO,iBAAiB;AAEhC,QACE,wBAAA,cAAC,YAAD;EACS;EACP,eAAe;AACb,SAAM,QAAQ,GAAG;AACjB,gBAAa;;EAEf,GAAI;EACJ,WAAW,GACT,cACA,SACA,oBACA,oBACA,oBACA,mBACD;EAGU,EADX,wBAAA,cAAC,MAAD,EAAM,IAAI,OAAS,CAAA,CACR"}

package/dist/components/toggle-group/ToggleGroupRoot.js

@@ -1,6 +1,5 @@
-import { styled } from "../../styled.js";
+import { cn, styled } from "../../styled.js";
 import { ToggleGroup } from "../../utilities/radix-overrides/toggle-group/index.js";
-import clsx from "clsx";
 import * as React$1 from "react";
 //#region src/components/toggle-group/ToggleGroupRoot.tsx
 var StyledRoot = styled(ToggleGroup.Root, {
@@ -100,7 +99,7 @@ var ToggleGroupRoot = React$1.forwardRef(({ orientation = "horizontal", gap, isF
 		orientation,
 		theme,
 		...rest
-	}, /* @__PURE__ */ React$1.createElement("div", { className: clsx("flex", hasGap && gapClassMap[gap], orientation === "horizontal" ? "flex-row" : "flex-col", wrap ? "flex-wrap" : "flex-nowrap") }, React$1.Children.toArray(children).map((child) => {
+	}, /* @__PURE__ */ React$1.createElement("div", { className: cn("flex", hasGap && gapClassMap[gap], orientation === "horizontal" ? "flex-row" : "flex-col", wrap ? "flex-wrap" : "flex-nowrap") }, React$1.Children.toArray(children).map((child) => {
 		if (React$1.isValidElement(child)) return React$1.cloneElement(child, {
 			...child.props,
 			theme

package/dist/components/toggle-group/ToggleGroupRoot.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleGroupRoot.js","names":[],"sources":["../../../src/components/toggle-group/ToggleGroupRoot.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { ToggleGroup } from '~/utilities/radix-overrides/toggle-group'\n\ntype RootType = {\n  orientation?: 'horizontal' | 'vertical'\n  isFullWidth?: boolean\n  gap?: 0 | 1 | 2 | 3\n  wrap?: boolean\n}\n\nexport const StyledRoot = styled(ToggleGroup.Root, {\n  base: ['w-fit'],\n  variants: {\n    isFullWidth: {\n      true: [\n        '**:data-radix-collection-item:basis-0',\n        '**:data-radix-collection-item:grow',\n        'w-full'\n      ],\n      false: ['w-auto']\n    },\n    hasGap: {\n      true: ['**:data-radix-collection-item:rounded-md'],\n      false: [\n        '**:data-radix-collection-item:not-last:before:absolute',\n        \"**:data-radix-collection-item:not-last:before:content-['']\",\n        '**:data-radix-collection-item:relative',\n        'rounded-md'\n      ]\n    },\n    direction: {\n      column: [],\n      row: []\n    },\n    theme: {\n      standard: [],\n      modern: ['bg-grey-200']\n    }\n  },\n  compoundVariants: [\n    {\n      hasGap: false,\n      direction: 'row',\n      theme: 'standard',\n      class: [\n        '**:data-radix-collection-item:first:rounded-l-md',\n        '**:data-radix-collection-item:last:rounded-r-md',\n        '**:data-radix-collection-item:not-first:border-l-transparent',\n        '**:data-radix-collection-item:not-last:before:h-[calc(100%+2px)]',\n        '**:data-radix-collection-item:not-last:before:right-0',\n        '**:data-radix-collection-item:not-last:before:-top-px',\n        '**:data-radix-collection-item:not-last:before:translate-x-3/2',\n        '**:data-radix-collection-item:not-last:before:w-px',\n        '**:data-radix-collection-item:not-last:border-r-transparent',\n        '**:data-radix-collection-item:rounded-none'\n      ]\n    },\n    {\n      hasGap: false,\n      direction: 'column',\n      theme: 'standard',\n      class: [\n        '**:data-radix-collection-item:first:rounded-t-sm',\n        '**:data-radix-collection-item:last:rounded-b-sm',\n        '**:data-radix-collection-item:not-first:border-t-transparent',\n        '**:data-radix-collection-item:not-last:before:bottom-0',\n        '**:data-radix-collection-item:not-last:before:h-px',\n        '**:data-radix-collection-item:not-last:before:-left-px',\n        '**:data-radix-collection-item:not-last:before:translate-y-3/2',\n        '**:data-radix-collection-item:not-last:before:w-[calc(100%+2px)]',\n        '**:data-radix-collection-item:not-last:border-b-transparent'\n      ]\n    },\n    {\n      hasGap: false,\n      theme: 'modern',\n      class: []\n    },\n    {\n      hasGap: false,\n      theme: 'standard',\n      class: [\n        '**:data-radix-collection-item:bg-transparent',\n        '**:data-radix-collection-item:rounded-none',\n        'bg-white'\n      ]\n    }\n  ]\n})\n\nconst gapClassMap = {\n  0: 'gap-0.5',\n  1: 'gap-1',\n  2: 'gap-2',\n  3: 'gap-3'\n}\n\nconst orientationToDirection = (orientation) =>\n  orientation === 'horizontal' ? 'row' : 'column'\n\nexport const ToggleGroupRoot = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof StyledRoot> & RootType\n>(\n  (\n    {\n      orientation = 'horizontal',\n      gap,\n      isFullWidth,\n      children,\n      theme = 'standard',\n      wrap,\n      ...rest\n    },\n    ref\n  ) => {\n    const hasGap = typeof gap === 'number'\n    const direction = orientationToDirection(orientation)\n\n    return (\n      <StyledRoot\n        ref={ref}\n        direction={direction}\n        hasGap={hasGap}\n        isFullWidth={isFullWidth}\n        orientation={orientation}\n        theme={theme}\n        {...rest}\n      >\n        <div\n          className={clsx(\n            'flex',\n            hasGap && gapClassMap[gap],\n            orientation === 'horizontal' ? 'flex-row' : 'flex-col',\n            wrap ? 'flex-wrap' : 'flex-nowrap'\n          )}\n        >\n          {\n            React.Children.toArray(children).map((child) => {\n              if (React.isValidElement(child)) {\n                return React.cloneElement(child, { ...child.props, theme })\n              }\n              return child\n            }) as React.ReactElement[]\n          }\n        </div>\n      </StyledRoot>\n    )\n  }\n)\n"],"mappings":";;;;;AAaA,IAAa,aAAa,OAAO,YAAY,MAAM;CACjD,MAAM,CAAC,QAAQ;CACf,UAAU;EACR,aAAa;GACX,MAAM;IACJ;IACA;IACA;IACD;GACD,OAAO,CAAC,SAAS;GAClB;EACD,QAAQ;GACN,MAAM,CAAC,2CAA2C;GAClD,OAAO;IACL;IACA;IACA;IACA;IACD;GACF;EACD,WAAW;GACT,QAAQ,EAAE;GACV,KAAK,EAAE;GACR;EACD,OAAO;GACL,UAAU,EAAE;GACZ,QAAQ,CAAC,cAAc;GACxB;EACF;CACD,kBAAkB;EAChB;GACE,QAAQ;GACR,WAAW;GACX,OAAO;GACP,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACD;GACE,QAAQ;GACR,WAAW;GACX,OAAO;GACP,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACD;GACE,QAAQ;GACR,OAAO;GACP,OAAO,EAAE;GACV;EACD;GACE,QAAQ;GACR,OAAO;GACP,OAAO;IACL;IACA;IACA;IACD;GACF;EACF;CACF,CAAC;AAEF,IAAM,cAAc;CAClB,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACJ;AAED,IAAM,0BAA0B,gBAC9B,gBAAgB,eAAe,QAAQ;AAEzC,IAAa,kBAAkB,QAAM,YAKjC,EACE,cAAc,cACd,KACA,aACA,UACA,QAAQ,YACR,MACA,GAAG,QAEL,QACG;CACH,MAAM,SAAS,OAAO,QAAQ;CAC9B,MAAM,YAAY,uBAAuB,YAAY;AAErD,QACE,wBAAA,cAAC,YAAD;EACO;EACM;EACH;EACK;EACA;EACN;EACP,GAAI;EAmBO,EAjBX,wBAAA,cAAC,OAAD,EACE,WAAW,KACT,QACA,UAAU,YAAY,MACtB,gBAAgB,eAAe,aAAa,YAC5C,OAAO,cAAc,cACtB,EAUG,EAPF,QAAM,SAAS,QAAQ,SAAS,CAAC,KAAK,UAAU;AAC9C,MAAI,QAAM,eAAe,MAAM,CAC7B,QAAO,QAAM,aAAa,OAAO;GAAE,GAAG,MAAM;GAAO;GAAO,CAAC;AAE7D,SAAO;GACP,CAEA,CACK;EAGlB"}
+{"version":3,"file":"ToggleGroupRoot.js","names":[],"sources":["../../../src/components/toggle-group/ToggleGroupRoot.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { cn } from '~/styled'\nimport { ToggleGroup } from '~/utilities/radix-overrides/toggle-group'\n\ntype RootType = {\n  orientation?: 'horizontal' | 'vertical'\n  isFullWidth?: boolean\n  gap?: 0 | 1 | 2 | 3\n  wrap?: boolean\n}\n\nexport const StyledRoot = styled(ToggleGroup.Root, {\n  base: ['w-fit'],\n  variants: {\n    isFullWidth: {\n      true: [\n        '**:data-radix-collection-item:basis-0',\n        '**:data-radix-collection-item:grow',\n        'w-full'\n      ],\n      false: ['w-auto']\n    },\n    hasGap: {\n      true: ['**:data-radix-collection-item:rounded-md'],\n      false: [\n        '**:data-radix-collection-item:not-last:before:absolute',\n        \"**:data-radix-collection-item:not-last:before:content-['']\",\n        '**:data-radix-collection-item:relative',\n        'rounded-md'\n      ]\n    },\n    direction: {\n      column: [],\n      row: []\n    },\n    theme: {\n      standard: [],\n      modern: ['bg-grey-200']\n    }\n  },\n  compoundVariants: [\n    {\n      hasGap: false,\n      direction: 'row',\n      theme: 'standard',\n      class: [\n        '**:data-radix-collection-item:first:rounded-l-md',\n        '**:data-radix-collection-item:last:rounded-r-md',\n        '**:data-radix-collection-item:not-first:border-l-transparent',\n        '**:data-radix-collection-item:not-last:before:h-[calc(100%+2px)]',\n        '**:data-radix-collection-item:not-last:before:right-0',\n        '**:data-radix-collection-item:not-last:before:-top-px',\n        '**:data-radix-collection-item:not-last:before:translate-x-3/2',\n        '**:data-radix-collection-item:not-last:before:w-px',\n        '**:data-radix-collection-item:not-last:border-r-transparent',\n        '**:data-radix-collection-item:rounded-none'\n      ]\n    },\n    {\n      hasGap: false,\n      direction: 'column',\n      theme: 'standard',\n      class: [\n        '**:data-radix-collection-item:first:rounded-t-sm',\n        '**:data-radix-collection-item:last:rounded-b-sm',\n        '**:data-radix-collection-item:not-first:border-t-transparent',\n        '**:data-radix-collection-item:not-last:before:bottom-0',\n        '**:data-radix-collection-item:not-last:before:h-px',\n        '**:data-radix-collection-item:not-last:before:-left-px',\n        '**:data-radix-collection-item:not-last:before:translate-y-3/2',\n        '**:data-radix-collection-item:not-last:before:w-[calc(100%+2px)]',\n        '**:data-radix-collection-item:not-last:border-b-transparent'\n      ]\n    },\n    {\n      hasGap: false,\n      theme: 'modern',\n      class: []\n    },\n    {\n      hasGap: false,\n      theme: 'standard',\n      class: [\n        '**:data-radix-collection-item:bg-transparent',\n        '**:data-radix-collection-item:rounded-none',\n        'bg-white'\n      ]\n    }\n  ]\n})\n\nconst gapClassMap = {\n  0: 'gap-0.5',\n  1: 'gap-1',\n  2: 'gap-2',\n  3: 'gap-3'\n}\n\nconst orientationToDirection = (orientation) =>\n  orientation === 'horizontal' ? 'row' : 'column'\n\nexport const ToggleGroupRoot = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof StyledRoot> & RootType\n>(\n  (\n    {\n      orientation = 'horizontal',\n      gap,\n      isFullWidth,\n      children,\n      theme = 'standard',\n      wrap,\n      ...rest\n    },\n    ref\n  ) => {\n    const hasGap = typeof gap === 'number'\n    const direction = orientationToDirection(orientation)\n\n    return (\n      <StyledRoot\n        ref={ref}\n        direction={direction}\n        hasGap={hasGap}\n        isFullWidth={isFullWidth}\n        orientation={orientation}\n        theme={theme}\n        {...rest}\n      >\n        <div\n          className={cn(\n            'flex',\n            hasGap && gapClassMap[gap],\n            orientation === 'horizontal' ? 'flex-row' : 'flex-col',\n            wrap ? 'flex-wrap' : 'flex-nowrap'\n          )}\n        >\n          {\n            React.Children.toArray(children).map((child) => {\n              if (React.isValidElement(child)) {\n                return React.cloneElement(child, { ...child.props, theme })\n              }\n              return child\n            }) as React.ReactElement[]\n          }\n        </div>\n      </StyledRoot>\n    )\n  }\n)\n"],"mappings":";;;;AAaA,IAAa,aAAa,OAAO,YAAY,MAAM;CACjD,MAAM,CAAC,QAAQ;CACf,UAAU;EACR,aAAa;GACX,MAAM;IACJ;IACA;IACA;IACD;GACD,OAAO,CAAC,SAAS;GAClB;EACD,QAAQ;GACN,MAAM,CAAC,2CAA2C;GAClD,OAAO;IACL;IACA;IACA;IACA;IACD;GACF;EACD,WAAW;GACT,QAAQ,EAAE;GACV,KAAK,EAAE;GACR;EACD,OAAO;GACL,UAAU,EAAE;GACZ,QAAQ,CAAC,cAAc;GACxB;EACF;CACD,kBAAkB;EAChB;GACE,QAAQ;GACR,WAAW;GACX,OAAO;GACP,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACD;GACE,QAAQ;GACR,WAAW;GACX,OAAO;GACP,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACD;GACE,QAAQ;GACR,OAAO;GACP,OAAO,EAAE;GACV;EACD;GACE,QAAQ;GACR,OAAO;GACP,OAAO;IACL;IACA;IACA;IACD;GACF;EACF;CACF,CAAC;AAEF,IAAM,cAAc;CAClB,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACJ;AAED,IAAM,0BAA0B,gBAC9B,gBAAgB,eAAe,QAAQ;AAEzC,IAAa,kBAAkB,QAAM,YAKjC,EACE,cAAc,cACd,KACA,aACA,UACA,QAAQ,YACR,MACA,GAAG,QAEL,QACG;CACH,MAAM,SAAS,OAAO,QAAQ;CAC9B,MAAM,YAAY,uBAAuB,YAAY;AAErD,QACE,wBAAA,cAAC,YAAD;EACO;EACM;EACH;EACK;EACA;EACN;EACP,GAAI;EAmBO,EAjBX,wBAAA,cAAC,OAAD,EACE,WAAW,GACT,QACA,UAAU,YAAY,MACtB,gBAAgB,eAAe,aAAa,YAC5C,OAAO,cAAc,cACtB,EAUG,EAPF,QAAM,SAAS,QAAQ,SAAS,CAAC,KAAK,UAAU;AAC9C,MAAI,QAAM,eAAe,MAAM,CAC7B,QAAO,QAAM,aAAa,OAAO;GAAE,GAAG,MAAM;GAAO;GAAO,CAAC;AAE7D,SAAO;GACP,CAEA,CACK;EAGlB"}

package/dist/components/top-bar/TopBar.d.ts

@@ -51,9 +51,10 @@ export declare const TopBar: {
         isRounded?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
     } & {
         as?: React.ElementType;
-    }, "children" | "label" | "hasTooltip" | "tooltipSide" | keyof import("../..").NavigatorActions> & {
+    }, "children" | "label" | "hasTooltip" | "tooltipSide" | "reloadDocument" | keyof import("../..").NavigatorActions> & {
         children: React.ReactNode;
         label: string;
+        reloadDocument?: boolean;
     } & Omit<import("../..").TOptionalTooltipWrapperProps, "label"> & import("../..").NavigatorActions, "ref"> & React.RefAttributes<HTMLButtonElement>, "size" | "children"> & {
         icon: React.FC<React.SVGProps<SVGSVGElement>>;
         label: string;

package/dist/components/top-bar/TopBarBrand.js

@@ -1,14 +1,13 @@
-import { styled } from "../../styled.js";
+import { cn, styled } from "../../styled.js";
 import { Text } from "../text/Text.js";
 import { Image } from "../image/Image.js";
-import clsx from "clsx";
 import React from "react";
 //#region src/components/top-bar/TopBarBrand.tsx
 var TopBarBrandLogo = ({ src, alt = "Atom Learning logo", className }) => {
 	return /* @__PURE__ */ React.createElement(Image, {
 		src,
 		alt,
-		className: clsx("h-8", "mr-3", "w-auto", className)
+		className: cn("h-8", "mr-3", "w-auto", className)
 	});
 };
 var TopBarBrandName = styled(Text, { base: ["text-grey-800"] });

package/dist/components/top-bar/TopBarBrand.js.map

@@ -1 +1 @@
-{"version":3,"file":"TopBarBrand.js","names":[],"sources":["../../../src/components/top-bar/TopBarBrand.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Image } from '../image/Image'\nimport { Text } from '../text/Text'\n\nexport const TopBarBrandLogo = ({\n  src,\n  alt = 'Atom Learning logo',\n  className\n}: Pick<React.ComponentProps<typeof Image>, 'src' | 'alt'> & {\n  className?: string\n}): JSX.Element => {\n  return (\n    <Image\n      src={src}\n      alt={alt}\n      className={clsx('h-8', 'mr-3', 'w-auto', className)}\n    />\n  )\n}\n\nexport const TopBarBrandName = styled(Text, {\n  base: ['text-grey-800']\n})\n\nexport const TopBarBrand = styled('a', {\n  base: [\n    'flex',\n    'items-center',\n    'no-underline',\n    'text-grey-800',\n    'hover:no-underline',\n    'focus:no-underline'\n  ]\n})\n"],"mappings":";;;;;;AAQA,IAAa,mBAAmB,EAC9B,KACA,MAAM,sBACN,gBAGiB;AACjB,QACE,sBAAA,cAAC,OAAD;EACO;EACA;EACL,WAAW,KAAK,OAAO,QAAQ,UAAU,UAAU;EACnD,CAAA;;AAIN,IAAa,kBAAkB,OAAO,MAAM,EAC1C,MAAM,CAAC,gBAAgB,EACxB,CAAC;AAEF,IAAa,cAAc,OAAO,KAAK,EACrC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC"}
+{"version":3,"file":"TopBarBrand.js","names":[],"sources":["../../../src/components/top-bar/TopBarBrand.tsx"],"sourcesContent":["import React from 'react'\n\nimport { styled } from '~/styled'\nimport { cn } from '~/styled'\n\nimport { Image } from '../image/Image'\nimport { Text } from '../text/Text'\n\nexport const TopBarBrandLogo = ({\n  src,\n  alt = 'Atom Learning logo',\n  className\n}: Pick<React.ComponentProps<typeof Image>, 'src' | 'alt'> & {\n  className?: string\n}): JSX.Element => {\n  return (\n    <Image\n      src={src}\n      alt={alt}\n      className={cn('h-8', 'mr-3', 'w-auto', className)}\n    />\n  )\n}\n\nexport const TopBarBrandName = styled(Text, {\n  base: ['text-grey-800']\n})\n\nexport const TopBarBrand = styled('a', {\n  base: [\n    'flex',\n    'items-center',\n    'no-underline',\n    'text-grey-800',\n    'hover:no-underline',\n    'focus:no-underline'\n  ]\n})\n"],"mappings":";;;;;AAQA,IAAa,mBAAmB,EAC9B,KACA,MAAM,sBACN,gBAGiB;AACjB,QACE,sBAAA,cAAC,OAAD;EACO;EACA;EACL,WAAW,GAAG,OAAO,QAAQ,UAAU,UAAU;EACjD,CAAA;;AAIN,IAAa,kBAAkB,OAAO,MAAM,EAC1C,MAAM,CAAC,gBAAgB,EACxB,CAAC;AAEF,IAAa,cAAc,OAAO,KAAK,EACrC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC"}

package/dist/components/tree/TreeCollapsibleContent.js

@@ -1,6 +1,6 @@
+import { cn } from "../../styled.js";
 import { TreeCollapsibleContext } from "./TreeCollapsible.js";
 import { TreeList } from "./TreeList.js";
-import clsx from "clsx";
 import React from "react";
 import { Content } from "@radix-ui/react-collapsible";
 //#region src/components/tree/TreeCollapsibleContent.tsx
@@ -16,7 +16,7 @@ var TreeCollapsibleContent = React.forwardRef(({ children, className, ...rest },
 		}
 	};
 	return /* @__PURE__ */ React.createElement(Content, {
-		className: clsx("data-[state=closed]:hidden", className),
+		className: cn("data-[state=closed]:hidden", className),
 		onKeyDown: handleOnKeydown,
 		...rest,
 		asChild: true

package/dist/components/tree/TreeCollapsibleContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeCollapsibleContent.js","names":[],"sources":["../../../src/components/tree/TreeCollapsibleContent.tsx"],"sourcesContent":["import { Content } from '@radix-ui/react-collapsible'\nimport clsx from 'clsx'\nimport React from 'react'\n\nimport { TreeCollapsibleContext } from './TreeCollapsible'\nimport { TreeList } from './TreeList'\n\ntype TreeCollapsibleContentProps = React.ComponentProps<typeof Content> &\n  React.ComponentProps<typeof TreeList>\n\nexport const TreeCollapsibleContent = React.forwardRef<\n  HTMLUListElement,\n  TreeCollapsibleContentProps\n>(({ children, className, ...rest }, ref): JSX.Element => {\n  const { triggerRef } = React.useContext(TreeCollapsibleContext)\n\n  const handleOnKeydown = (e) => {\n    if (!triggerRef?.current) return\n    if (e.key === 'Escape') {\n      e.stopPropagation()\n      e.preventDefault()\n      triggerRef.current.focus()\n      triggerRef.current.click()\n    }\n  }\n\n  return (\n    <Content\n      className={clsx('data-[state=closed]:hidden', className)}\n      onKeyDown={handleOnKeydown}\n      {...rest}\n      asChild\n    >\n      <TreeList ref={ref} role=\"group\">\n        {children}\n      </TreeList>\n    </Content>\n  )\n})\n"],"mappings":";;;;;;AAUA,IAAa,yBAAyB,MAAM,YAGzC,EAAE,UAAU,WAAW,GAAG,QAAQ,QAAqB;CACxD,MAAM,EAAE,eAAe,MAAM,WAAW,uBAAuB;CAE/D,MAAM,mBAAmB,MAAM;AAC7B,MAAI,CAAC,YAAY,QAAS;AAC1B,MAAI,EAAE,QAAQ,UAAU;AACtB,KAAE,iBAAiB;AACnB,KAAE,gBAAgB;AAClB,cAAW,QAAQ,OAAO;AAC1B,cAAW,QAAQ,OAAO;;;AAI9B,QACE,sBAAA,cAAC,SAAD;EACE,WAAW,KAAK,8BAA8B,UAAU;EACxD,WAAW;EACX,GAAI;EACJ,SAAA;EAKQ,EAHR,sBAAA,cAAC,UAAD;EAAe;EAAK,MAAK;EAEd,EADR,SACQ,CACH;EAEZ"}
+{"version":3,"file":"TreeCollapsibleContent.js","names":[],"sources":["../../../src/components/tree/TreeCollapsibleContent.tsx"],"sourcesContent":["import { Content } from '@radix-ui/react-collapsible'\nimport React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { TreeCollapsibleContext } from './TreeCollapsible'\nimport { TreeList } from './TreeList'\n\ntype TreeCollapsibleContentProps = React.ComponentProps<typeof Content> &\n  React.ComponentProps<typeof TreeList>\n\nexport const TreeCollapsibleContent = React.forwardRef<\n  HTMLUListElement,\n  TreeCollapsibleContentProps\n>(({ children, className, ...rest }, ref): JSX.Element => {\n  const { triggerRef } = React.useContext(TreeCollapsibleContext)\n\n  const handleOnKeydown = (e) => {\n    if (!triggerRef?.current) return\n    if (e.key === 'Escape') {\n      e.stopPropagation()\n      e.preventDefault()\n      triggerRef.current.focus()\n      triggerRef.current.click()\n    }\n  }\n\n  return (\n    <Content\n      className={cn('data-[state=closed]:hidden', className)}\n      onKeyDown={handleOnKeydown}\n      {...rest}\n      asChild\n    >\n      <TreeList ref={ref} role=\"group\">\n        {children}\n      </TreeList>\n    </Content>\n  )\n})\n"],"mappings":";;;;;;AAWA,IAAa,yBAAyB,MAAM,YAGzC,EAAE,UAAU,WAAW,GAAG,QAAQ,QAAqB;CACxD,MAAM,EAAE,eAAe,MAAM,WAAW,uBAAuB;CAE/D,MAAM,mBAAmB,MAAM;AAC7B,MAAI,CAAC,YAAY,QAAS;AAC1B,MAAI,EAAE,QAAQ,UAAU;AACtB,KAAE,iBAAiB;AACnB,KAAE,gBAAgB;AAClB,cAAW,QAAQ,OAAO;AAC1B,cAAW,QAAQ,OAAO;;;AAI9B,QACE,sBAAA,cAAC,SAAD;EACE,WAAW,GAAG,8BAA8B,UAAU;EACtD,WAAW;EACX,GAAI;EACJ,SAAA;EAKQ,EAHR,sBAAA,cAAC,UAAD;EAAe;EAAK,MAAK;EAEd,EADR,SACQ,CACH;EAEZ"}

package/dist/components/tree/TreeCollapsibleTrigger.js

@@ -1,9 +1,8 @@
-import { styled } from "../../styled.js";
+import { cn, styled } from "../../styled.js";
 import { Icon } from "../icon/Icon.js";
 import { ActionIcon } from "../action-icon/ActionIcon.js";
 import { TreeCollapsibleContext } from "./TreeCollapsible.js";
 import { TreeItemContent } from "./TreeItemContent.js";
-import clsx from "clsx";
 import React from "react";
 import { ChevronDown } from "@atom-learning/icons";
 import { Trigger } from "@radix-ui/react-collapsible";
@@ -22,7 +21,7 @@ var TreeCollapsibleTrigger = ({ children, label, className, ...rest }) => {
 	const { setTriggerRef, triggerRef } = React.useContext(TreeCollapsibleContext);
 	return /* @__PURE__ */ React.createElement(TreeItemContent, {
 		...rest,
-		className: clsx("cursor-pointer", className),
+		className: cn("cursor-pointer", className),
 		onClick: (event) => {
 			rest.onClick?.(event);
 			triggerRef?.current?.click();

package/dist/components/tree/TreeCollapsibleTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeCollapsibleTrigger.js","names":[],"sources":["../../../src/components/tree/TreeCollapsibleTrigger.tsx"],"sourcesContent":["import { ChevronDown } from '@atom-learning/icons'\nimport { Trigger } from '@radix-ui/react-collapsible'\nimport clsx from 'clsx'\nimport React from 'react'\n\nimport { ActionIcon } from '~/components/action-icon/ActionIcon'\nimport { Icon } from '~/components/icon/Icon'\nimport { styled } from '~/styled'\n\nimport { TreeCollapsibleContext } from './TreeCollapsible'\nimport { TreeItemContent } from './TreeItemContent'\n\nconst StyledActionIcon = styled(ActionIcon, {\n  base: [\n    'absolute',\n    'left-0',\n    'top-0',\n    'pointer-events-none',\n    '[&_svg]:duration-300',\n    '[&_svg]:transition-transform',\n    '[&[data-state=closed]>svg]:-rotate-90',\n    '[&[data-state=open]>svg]:rotate-0'\n  ]\n})\n\ntype TNavigationMenuCollapsibleTriggerProps = React.ComponentProps<\n  typeof TreeItemContent\n> & {\n  label: string\n}\n\nexport const TreeCollapsibleTrigger = ({\n  children,\n  label,\n  className,\n  ...rest\n}: TNavigationMenuCollapsibleTriggerProps) => {\n  const { setTriggerRef, triggerRef } = React.useContext(TreeCollapsibleContext)\n\n  return (\n    <TreeItemContent\n      {...rest}\n      className={clsx('cursor-pointer', className)}\n      onClick={(event) => {\n        rest.onClick?.(event)\n        triggerRef?.current?.click()\n      }}\n    >\n      <Trigger asChild>\n        <StyledActionIcon\n          size=\"sm\"\n          ref={setTriggerRef}\n          label={label}\n          theme=\"neutral\"\n          hasTooltip={false}\n          onClick={(e) => e.stopPropagation()}\n        >\n          <Icon is={ChevronDown} />\n        </StyledActionIcon>\n      </Trigger>\n      {children}\n    </TreeItemContent>\n  )\n}\n"],"mappings":";;;;;;;;;;AAYA,IAAM,mBAAmB,OAAO,YAAY,EAC1C,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC;AAQF,IAAa,0BAA0B,EACrC,UACA,OACA,WACA,GAAG,WACyC;CAC5C,MAAM,EAAE,eAAe,eAAe,MAAM,WAAW,uBAAuB;AAE9E,QACE,sBAAA,cAAC,iBAAD;EACE,GAAI;EACJ,WAAW,KAAK,kBAAkB,UAAU;EAC5C,UAAU,UAAU;AAClB,QAAK,UAAU,MAAM;AACrB,eAAY,SAAS,OAAO;;EAgBd,EAbhB,sBAAA,cAAC,SAAD,EAAS,SAAA,MAWC,EAVR,sBAAA,cAAC,kBAAD;EACE,MAAK;EACL,KAAK;EACE;EACP,OAAM;EACN,YAAY;EACZ,UAAU,MAAM,EAAE,iBAAiB;EAGlB,EADjB,sBAAA,cAAC,MAAD,EAAM,IAAI,aAAe,CAAA,CACR,CACX,EACT,SACe"}
+{"version":3,"file":"TreeCollapsibleTrigger.js","names":[],"sources":["../../../src/components/tree/TreeCollapsibleTrigger.tsx"],"sourcesContent":["import { ChevronDown } from '@atom-learning/icons'\nimport { Trigger } from '@radix-ui/react-collapsible'\nimport React from 'react'\n\nimport { ActionIcon } from '~/components/action-icon/ActionIcon'\nimport { Icon } from '~/components/icon/Icon'\nimport { styled } from '~/styled'\nimport { cn } from '~/styled'\n\nimport { TreeCollapsibleContext } from './TreeCollapsible'\nimport { TreeItemContent } from './TreeItemContent'\n\nconst StyledActionIcon = styled(ActionIcon, {\n  base: [\n    'absolute',\n    'left-0',\n    'top-0',\n    'pointer-events-none',\n    '[&_svg]:duration-300',\n    '[&_svg]:transition-transform',\n    '[&[data-state=closed]>svg]:-rotate-90',\n    '[&[data-state=open]>svg]:rotate-0'\n  ]\n})\n\ntype TNavigationMenuCollapsibleTriggerProps = React.ComponentProps<\n  typeof TreeItemContent\n> & {\n  label: string\n}\n\nexport const TreeCollapsibleTrigger = ({\n  children,\n  label,\n  className,\n  ...rest\n}: TNavigationMenuCollapsibleTriggerProps) => {\n  const { setTriggerRef, triggerRef } = React.useContext(TreeCollapsibleContext)\n\n  return (\n    <TreeItemContent\n      {...rest}\n      className={cn('cursor-pointer', className)}\n      onClick={(event) => {\n        rest.onClick?.(event)\n        triggerRef?.current?.click()\n      }}\n    >\n      <Trigger asChild>\n        <StyledActionIcon\n          size=\"sm\"\n          ref={setTriggerRef}\n          label={label}\n          theme=\"neutral\"\n          hasTooltip={false}\n          onClick={(e) => e.stopPropagation()}\n        >\n          <Icon is={ChevronDown} />\n        </StyledActionIcon>\n      </Trigger>\n      {children}\n    </TreeItemContent>\n  )\n}\n"],"mappings":";;;;;;;;;AAYA,IAAM,mBAAmB,OAAO,YAAY,EAC1C,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC;AAQF,IAAa,0BAA0B,EACrC,UACA,OACA,WACA,GAAG,WACyC;CAC5C,MAAM,EAAE,eAAe,eAAe,MAAM,WAAW,uBAAuB;AAE9E,QACE,sBAAA,cAAC,iBAAD;EACE,GAAI;EACJ,WAAW,GAAG,kBAAkB,UAAU;EAC1C,UAAU,UAAU;AAClB,QAAK,UAAU,MAAM;AACrB,eAAY,SAAS,OAAO;;EAgBd,EAbhB,sBAAA,cAAC,SAAD,EAAS,SAAA,MAWC,EAVR,sBAAA,cAAC,kBAAD;EACE,MAAK;EACL,KAAK;EACE;EACP,OAAM;EACN,YAAY;EACZ,UAAU,MAAM,EAAE,iBAAiB;EAGlB,EADjB,sBAAA,cAAC,MAAD,EAAM,IAAI,aAAe,CAAA,CACR,CACX,EACT,SACe"}

package/dist/components/tree/TreeIcon.js

@@ -1,11 +1,11 @@
+import { cn } from "../../styled.js";
 import { Icon } from "../icon/Icon.js";
-import clsx from "clsx";
 import * as React$1 from "react";
 //#region src/components/tree/TreeIcon.tsx
 var TreeIcon = ({ className, ...props }) => /* @__PURE__ */ React$1.createElement(Icon, {
 	size: "md",
 	...props,
-	className: clsx("my-1 shrink-0 self-start", className)
+	className: cn("my-1 shrink-0 self-start", className)
 });
 //#endregion
 export { TreeIcon };

package/dist/components/tree/TreeIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeIcon.js","names":[],"sources":["../../../src/components/tree/TreeIcon.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\nimport { Icon } from '~/components/icon/Icon'\n\nexport const TreeIcon = ({\n  className,\n  ...props\n}: React.ComponentProps<typeof Icon>): JSX.Element => (\n  <Icon\n    size=\"md\"\n    {...props}\n    className={clsx('my-1 shrink-0 self-start', className)}\n  />\n)\n"],"mappings":";;;;AAKA,IAAa,YAAY,EACvB,WACA,GAAG,YAEH,wBAAA,cAAC,MAAD;CACE,MAAK;CACL,GAAI;CACJ,WAAW,KAAK,4BAA4B,UAAU;CACtD,CAAA"}
+{"version":3,"file":"TreeIcon.js","names":[],"sources":["../../../src/components/tree/TreeIcon.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Icon } from '~/components/icon/Icon'\nimport { cn } from '~/styled'\n\nexport const TreeIcon = ({\n  className,\n  ...props\n}: React.ComponentProps<typeof Icon>): JSX.Element => (\n  <Icon\n    size=\"md\"\n    {...props}\n    className={cn('my-1 shrink-0 self-start', className)}\n  />\n)\n"],"mappings":";;;;AAKA,IAAa,YAAY,EACvB,WACA,GAAG,YAEH,wBAAA,cAAC,MAAD;CACE,MAAK;CACL,GAAI;CACJ,WAAW,GAAG,4BAA4B,UAAU;CACpD,CAAA"}

package/dist/components/tree/TreeListItem.js

@@ -1,11 +1,11 @@
-import clsx from "clsx";
+import { cn } from "../../styled.js";
 import * as React$1 from "react";
 //#region src/components/tree/TreeListItem.tsx
 var TreeListItem = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React$1.createElement("li", {
 	...props,
 	ref,
 	role: "treeitem",
-	className: clsx("flex items-center gap-2 not-first:mt-0.5", className)
+	className: cn("flex items-center gap-2 not-first:mt-0.5", className)
 }));
 //#endregion
 export { TreeListItem };

package/dist/components/tree/TreeListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeListItem.js","names":[],"sources":["../../../src/components/tree/TreeListItem.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\ntype TreeListItemProps = React.ComponentProps<'li'>\n\nexport const TreeListItem = React.forwardRef<HTMLLIElement, TreeListItemProps>(\n  ({ className, ...props }, ref) => (\n    <li\n      {...props}\n      ref={ref}\n      role=\"treeitem\"\n      className={clsx('flex items-center gap-2 not-first:mt-0.5', className)}\n    />\n  )\n)\n"],"mappings":";;;AAKA,IAAa,eAAe,QAAM,YAC/B,EAAE,WAAW,GAAG,SAAS,QACxB,wBAAA,cAAC,MAAD;CACE,GAAI;CACC;CACL,MAAK;CACL,WAAW,KAAK,4CAA4C,UAAU;CACtE,CAAA,CAEL"}
+{"version":3,"file":"TreeListItem.js","names":[],"sources":["../../../src/components/tree/TreeListItem.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '~/styled'\n\ntype TreeListItemProps = React.ComponentProps<'li'>\n\nexport const TreeListItem = React.forwardRef<HTMLLIElement, TreeListItemProps>(\n  ({ className, ...props }, ref) => (\n    <li\n      {...props}\n      ref={ref}\n      role=\"treeitem\"\n      className={cn('flex items-center gap-2 not-first:mt-0.5', className)}\n    />\n  )\n)\n"],"mappings":";;;AAMA,IAAa,eAAe,QAAM,YAC/B,EAAE,WAAW,GAAG,SAAS,QACxB,wBAAA,cAAC,MAAD;CACE,GAAI;CACC;CACL,MAAK;CACL,WAAW,GAAG,4CAA4C,UAAU;CACpE,CAAA,CAEL"}

package/dist/components/tree/TreeText.js

@@ -1,11 +1,11 @@
+import { cn } from "../../styled.js";
 import { Text } from "../text/Text.js";
-import clsx from "clsx";
 import React from "react";
 //#region src/components/tree/TreeText.tsx
 var TreeText = (props) => /* @__PURE__ */ React.createElement(Text, {
 	as: "span",
 	...props,
-	className: clsx("py-0.5", "whitespace-nowrap", "overflow-x-hidden", "text-ellipsis", props.className),
+	className: cn("py-0.5", "whitespace-nowrap", "overflow-x-hidden", "text-ellipsis", props.className),
 	size: "md"
 });
 //#endregion

package/dist/components/tree/TreeText.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeText.js","names":[],"sources":["../../../src/components/tree/TreeText.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport React from 'react'\n\nimport { Text } from '~/components/text/Text'\n\ntype TStyledTreeTextProps = React.ComponentProps<typeof Text>\n\nexport const TreeText = (props: TStyledTreeTextProps): JSX.Element => (\n  <Text\n    as=\"span\"\n    {...props}\n    className={clsx(\n      'py-0.5',\n      'whitespace-nowrap',\n      'overflow-x-hidden',\n      'text-ellipsis',\n      props.className\n    )}\n    size=\"md\"\n  />\n)\n"],"mappings":";;;;AAOA,IAAa,YAAY,UACvB,sBAAA,cAAC,MAAD;CACE,IAAG;CACH,GAAI;CACJ,WAAW,KACT,UACA,qBACA,qBACA,iBACA,MAAM,UACP;CACD,MAAK;CACL,CAAA"}
+{"version":3,"file":"TreeText.js","names":[],"sources":["../../../src/components/tree/TreeText.tsx"],"sourcesContent":["import React from 'react'\n\nimport { Text } from '~/components/text/Text'\nimport { cn } from '~/styled'\n\ntype TStyledTreeTextProps = React.ComponentProps<typeof Text>\n\nexport const TreeText = (props: TStyledTreeTextProps): JSX.Element => (\n  <Text\n    as=\"span\"\n    {...props}\n    className={cn(\n      'py-0.5',\n      'whitespace-nowrap',\n      'overflow-x-hidden',\n      'text-ellipsis',\n      props.className\n    )}\n    size=\"md\"\n  />\n)\n"],"mappings":";;;;AAOA,IAAa,YAAY,UACvB,sBAAA,cAAC,MAAD;CACE,IAAG;CACH,GAAI;CACJ,WAAW,GACT,UACA,qBACA,qBACA,iBACA,MAAM,UACP;CACD,MAAK;CACL,CAAA"}