npm - @atom-learning/components - Versions diffs - 11.0.0 → 11.2.0-beta.1 - Mend

@atom-learning/components 11.0.0 → 11.2.0-beta.1

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

Files changed (116) hide show

package/dist/components/skeleton-loader/SkeletonPanelList.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { cn } from "../../styled.js";
+import { cn } from "../../utilities/tw-merge/index.js";
 import { SkeletonLoader } from "./Skeleton.js";
 import { Tile } from "../tile/Tile.js";
 import "react";

package/dist/components/skeleton-loader/SkeletonSubjectList.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { cn } from "../../styled.js";
+import { cn } from "../../utilities/tw-merge/index.js";
 import { SkeletonLoader } from "./Skeleton.js";
 import { Tile } from "../tile/Tile.js";
 import "react";

package/dist/components/skeleton-loader/SkeletonTable.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { cn } from "../../styled.js";
+import { cn } from "../../utilities/tw-merge/index.js";
 import { Table } from "../table/Table.js";
 import { SkeletonLoader } from "./Skeleton.js";
 import { Tile } from "../tile/Tile.js";
@@ -11,10 +11,10 @@ var SkeletonTable = ({ numberOfColumns = 4, numberOfRows = 4, columnWidth, class
 		size: "md",
 		children: [/* @__PURE__ */ jsx(Table.Header, {
 			theme: "white",
-			children: Array.from({ length: numberOfColumns }, (_, index) => index).map((columnIndex) => /* @__PURE__ */ jsx(Table.HeaderCell, { children: /* @__PURE__ */ jsx(SkeletonLoader, {
+			children: /* @__PURE__ */ jsx(Table.Row, { children: Array.from({ length: numberOfColumns }, (_, index) => index).map((columnIndex) => /* @__PURE__ */ jsx(Table.HeaderCell, { children: /* @__PURE__ */ jsx(SkeletonLoader, {
 				style: { "--width": columnWidth?.[columnIndex] || "100px" },
 				className: "h-4 w-(--width) rounded-xl"
-			}) }, columnIndex))
+			}) }, columnIndex)) })
 		}), /* @__PURE__ */ jsx(Table.Body, {
 			striped: false,
 			children: Array.from({ length: numberOfRows }, (_, index) => index).map((rowIndex) => /* @__PURE__ */ jsx(Table.Row, { children: Array.from({ length: numberOfColumns }, (_, index) => index).map((columnIndex) => /* @__PURE__ */ jsx(Table.Cell, {

package/dist/components/skeleton-loader/SkeletonTable.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SkeletonTable.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonTable.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '../../styled'\nimport { Table } from '../table/Table'\nimport { Tile } from '../tile/Tile'\nimport { SkeletonLoader } from './Skeleton'\n\nexport const SkeletonTable = ({\n numberOfColumns = 4,\n numberOfRows = 4,\n columnWidth,\n className\n}: {\n numberOfColumns?: number\n numberOfRows?: number\n columnWidth?: Record<number, string>\n className?: string\n}) => (\n <Tile className={cn('p-6', 'flex-row', 'gap-4', 'relative', className)}>\n <Table size=\"md\">\n <Table.Header theme=\"white\">\n {Array.from({ length: numberOfColumns }, (_, index) => index).map(\n (columnIndex) => (\n <Table.HeaderCell key={columnIndex}>\n <SkeletonLoader\n style={{ '--width': columnWidth?.[columnIndex] \|\| '100px' }}\n className=\"h-4 w-(--width) rounded-xl\"\n />\n </Table.HeaderCell>\n )\n )}\n </Table.Header>\n <Table.Body striped={false}>\n {Array.from({ length: numberOfRows }, (_, index) => index).map(\n (rowIndex) => (\n <Table.Row key={rowIndex}>\n {Array.from({ length: numberOfColumns }, (_, index) => index).map(\n (columnIndex) => (\n <Table.Cell key={columnIndex} className=\"border-none\">\n <SkeletonLoader\n style={{\n '--width': columnWidth?.[columnIndex] \|\| '100px'\n }}\n className=\"bg-grey-200 h-4 w-(--width) rounded-xl\"\n />\n </Table.Cell>\n )\n )}\n </Table.Row>\n )\n )}\n </Table.Body>\n </Table>\n </Tile>\n)\n"],"mappings":";;;;;;;AAOA,IAAa,iBAAiB,EAC5B,kBAAkB,GAClB,eAAe,GACf,aACA,gBAOA,oBAAC,MAAD;CAAM,WAAW,GAAG,OAAO,YAAY,SAAS,YAAY,SAAS;WACnE,qBAAC,OAAD;EAAO,MAAK;YAAZ,CACE,oBAAC,MAAM,QAAP;GAAc,OAAM;~~aACjB~~,MAAM,KAAK,EAAE,QAAQ,gBAAgB,IAAI,GAAG,UAAU,KAAK,CAAC,CAAC,KAC3D,gBACC,oBAAC,MAAM,YAAP,EAAA,UACE,oBAAC,gBAAD;IACE,OAAO,EAAE,WAAW,cAAc,gBAAgB,QAAQ;IAC1D,WAAU;GACX,CAAA,EACe,GALK,WAKL,CAEtB;~~EACY~~,CAAA,GACd,oBAAC,MAAM,MAAP;GAAY,SAAS;aAClB,MAAM,KAAK,EAAE,QAAQ,aAAa,IAAI,GAAG,UAAU,KAAK,CAAC,CAAC,KACxD,aACC,oBAAC,MAAM,KAAP,EAAA,UACG,MAAM,KAAK,EAAE,QAAQ,gBAAgB,IAAI,GAAG,UAAU,KAAK,CAAC,CAAC,KAC3D,gBACC,oBAAC,MAAM,MAAP;IAA8B,WAAU;cACtC,oBAAC,gBAAD;KACE,OAAO,EACL,WAAW,cAAc,gBAAgB,QAC3C;KACA,WAAU;IACX,CAAA;GACS,GAPK,WAOL,CAEhB,EACS,GAbK,QAaL,CAEf;EACU,CAAA,CACP;;AACH,CAAA"}
1	+ {"version":3,"file":"SkeletonTable.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonTable.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '../../styled'\nimport { Table } from '../table/Table'\nimport { Tile } from '../tile/Tile'\nimport { SkeletonLoader } from './Skeleton'\n\nexport const SkeletonTable = ({\n numberOfColumns = 4,\n numberOfRows = 4,\n columnWidth,\n className\n}: {\n numberOfColumns?: number\n numberOfRows?: number\n columnWidth?: Record<number, string>\n className?: string\n}) => (\n <Tile className={cn('p-6', 'flex-row', 'gap-4', 'relative', className)}>\n <Table size=\"md\">\n <Table.Header theme=\"white\">\n {/* A <thead> may only contain <tr>, so the cells need a Table.Row\n around them as they do in Table.Body below. */}\n <Table.Row>\n {Array.from({ length: numberOfColumns }, (_, index) => index).map(\n (columnIndex) => (\n <Table.HeaderCell key={columnIndex}>\n <SkeletonLoader\n style={{ '--width': columnWidth?.[columnIndex] \|\| '100px' }}\n className=\"h-4 w-(--width) rounded-xl\"\n />\n </Table.HeaderCell>\n )\n )}\n </Table.Row>\n </Table.Header>\n <Table.Body striped={false}>\n {Array.from({ length: numberOfRows }, (_, index) => index).map(\n (rowIndex) => (\n <Table.Row key={rowIndex}>\n {Array.from({ length: numberOfColumns }, (_, index) => index).map(\n (columnIndex) => (\n <Table.Cell key={columnIndex} className=\"border-none\">\n <SkeletonLoader\n style={{\n '--width': columnWidth?.[columnIndex] \|\| '100px'\n }}\n className=\"bg-grey-200 h-4 w-(--width) rounded-xl\"\n />\n </Table.Cell>\n )\n )}\n </Table.Row>\n )\n )}\n </Table.Body>\n </Table>\n </Tile>\n)\n"],"mappings":";;;;;;;AAOA,IAAa,iBAAiB,EAC5B,kBAAkB,GAClB,eAAe,GACf,aACA,gBAOA,oBAAC,MAAD;CAAM,WAAW,GAAG,OAAO,YAAY,SAAS,YAAY,SAAS;WACnE,qBAAC,OAAD;EAAO,MAAK;YAAZ,CACE,oBAAC,MAAM,QAAP;GAAc,OAAM;aAGlB,oBAAC,MAAM,KAAP,EAAA,UACG,MAAM,KAAK,EAAE,QAAQ,gBAAgB,IAAI,GAAG,UAAU,KAAK,CAAC,CAAC,KAC3D,gBACC,oBAAC,MAAM,YAAP,EAAA,UACE,oBAAC,gBAAD;IACE,OAAO,EAAE,WAAW,cAAc,gBAAgB,QAAQ;IAC1D,WAAU;GACX,CAAA,EACe,GALK,WAKL,CAEtB,EACS,CAAA;EACC,CAAA,GACd,oBAAC,MAAM,MAAP;GAAY,SAAS;aAClB,MAAM,KAAK,EAAE,QAAQ,aAAa,IAAI,GAAG,UAAU,KAAK,CAAC,CAAC,KACxD,aACC,oBAAC,MAAM,KAAP,EAAA,UACG,MAAM,KAAK,EAAE,QAAQ,gBAAgB,IAAI,GAAG,UAAU,KAAK,CAAC,CAAC,KAC3D,gBACC,oBAAC,MAAM,MAAP;IAA8B,WAAU;cACtC,oBAAC,gBAAD;KACE,OAAO,EACL,WAAW,cAAc,gBAAgB,QAC3C;KACA,WAAU;IACX,CAAA;GACS,GAPK,WAOL,CAEhB,EACS,GAbK,QAaL,CAEf;EACU,CAAA,CACP;;AACH,CAAA"}

package/dist/components/skeleton-loader/SkeletonTabs.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { cn } from "../../styled.js";
+import { cn } from "../../utilities/tw-merge/index.js";
 import { SkeletonLoader } from "./Skeleton.js";
 import { Tile } from "../tile/Tile.js";
 import "react";

package/dist/components/sortable/SortableItem.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { cn } from "../../styled.js";
+import { cn } from "../../utilities/tw-merge/index.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import { Slot } from "@radix-ui/react-slot";

package/dist/components/stepper/Stepper.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { cn } from "../../styled.js";
+import { cn } from "../../utilities/tw-merge/index.js";
 import { StepperProvider } from "./Stepper.context.js";
 import { StepperStepBack } from "./StepperStepBack.js";
 import { StepperStepForward } from "./StepperStepForward.js";

package/dist/components/table/Table.js CHANGED Viewed

@@ -1,4 +1,5 @@
-import { cn, styled } from "../../styled.js";
+import { cn } from "../../utilities/tw-merge/index.js";
+import { styled } from "../../styled.js";
 import { TableBody } from "./TableBody.js";
 import { TableCell } from "./TableCell.js";
 import { TableFooter } from "./TableFooter.js";

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Table.js","names":[],"sources":["../../../src/components/table/Table.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled, cn } from '../../styled'\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 = ({\n ref,\n size = 'md',\n corners = 'round',\n numberOfStickyColumns = 0,\n scrollContainerCls,\n scrollContainerkey,\n ...rest\n}: TableProps) => {\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\nexport const Table = /* @__PURE__ */ 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"],"mappings":"~~;;;;;;;;;;;;~~AAYA,IAAM,cAAc,OAAO,SAAS;CAClC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,MAAM;GACJ,IAAI;IAAC;IAAoB;IAAoB;GAAkB;GAC/D,IAAI;IACF;IACA;IACA;IACA;IACA;GACF;GACA,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA,SAAS;GACP,OAAO,CAAC,YAAY;GACpB,QAAQ,CAAC;EACX;CACF;AACF,CAAC;AASD,IAAM,kBAAkB,EACtB,KACA,OAAO,MACP,UAAU,SACV,wBAAwB,GACxB,oBACA,oBACA,GAAG,WACa;CAChB,MAAM,iBACJ,oBAAC,aAAD;EAAkB;EAAW;EAAe;EAAS,GAAI;CAAO,CAAA;CAGlE,IAAI,uBACF,OACE,oBAAC,6BAAD;EAEE,WAAW,GAAG,kBAAkB;EACT;YAEtB;CAC0B,GALtB,kBAKsB;CAIjC,OAAO;AACT;AAEA,IAAa,QAAwB,uBAAO,OAAO,gBAAgB;CACjE,MAAM;CACN,MAAM;CACN,QAAQ;CACR,YAAY;CACZ,QAAQ;CACR,YAAY;CACZ,KAAK;CACL,wBAAwB;AAC1B,CAAC"}
1	+ {"version":3,"file":"Table.js","names":[],"sources":["../../../src/components/table/Table.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled, cn } from '../../styled'\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 = ({\n ref,\n size = 'md',\n corners = 'round',\n numberOfStickyColumns = 0,\n scrollContainerCls,\n scrollContainerkey,\n ...rest\n}: TableProps) => {\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\nexport const Table = /* @__PURE__ */ 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"],"mappings":";;;;;;;;;;;;;AAYA,IAAM,cAAc,OAAO,SAAS;CAClC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,MAAM;GACJ,IAAI;IAAC;IAAoB;IAAoB;GAAkB;GAC/D,IAAI;IACF;IACA;IACA;IACA;IACA;GACF;GACA,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA,SAAS;GACP,OAAO,CAAC,YAAY;GACpB,QAAQ,CAAC;EACX;CACF;AACF,CAAC;AASD,IAAM,kBAAkB,EACtB,KACA,OAAO,MACP,UAAU,SACV,wBAAwB,GACxB,oBACA,oBACA,GAAG,WACa;CAChB,MAAM,iBACJ,oBAAC,aAAD;EAAkB;EAAW;EAAe;EAAS,GAAI;CAAO,CAAA;CAGlE,IAAI,uBACF,OACE,oBAAC,6BAAD;EAEE,WAAW,GAAG,kBAAkB;EACT;YAEtB;CAC0B,GALtB,kBAKsB;CAIjC,OAAO;AACT;AAEA,IAAa,QAAwB,uBAAO,OAAO,gBAAgB;CACjE,MAAM;CACN,MAAM;CACN,QAAQ;CACR,YAAY;CACZ,QAAQ;CACR,YAAY;CACZ,KAAK;CACL,wBAAwB;AAC1B,CAAC"}

package/dist/components/table/TableStickyColumnsContainer.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { cn } from "../../styled.js";
+import { cn } from "../../utilities/tw-merge/index.js";
 import { useStickyColumnsStyle } from "./useStickyColumnsCss.js";
 import * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/tile-toggle-group/TileToggleGroupRoot.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { cn } from "../../styled.js";
+import { cn } from "../../utilities/tw-merge/index.js";
 import { ToggleGroup } from "../../utilities/radix-overrides/toggle-group/index.js";
 import "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/toast/ToastCloseButton.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { cn } from "../../styled.js";
+import { cn } from "../../utilities/tw-merge/index.js";
 import { Icon } from "../icon/Icon.js";
 import { ActionIcon } from "../action-icon/ActionIcon.js";
 import { useToastContext } from "./Toast.context.js";

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

@@ -1,4 +1,5 @@
-import { cn, styled } from "../../styled.js";
+import { cn } from "../../utilities/tw-merge/index.js";
+import { styled } from "../../styled.js";
 import { ToggleGroup } from "../../utilities/radix-overrides/toggle-group/index.js";
 import * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ToggleGroupRoot.js","names":[],"sources":["../../../src/components/toggle-group/ToggleGroupRoot.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled, 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 = ({\n ref,\n orientation = 'horizontal',\n gap,\n isFullWidth,\n children,\n theme = 'standard',\n wrap,\n ...rest\n}: React.ComponentProps<typeof StyledRoot> & RootType) => {\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<{ theme?: typeof theme }>(child)) {\n return React.cloneElement(child, { ...child.props, theme })\n }\n return child\n }) as React.ReactElement<unknown>[]\n }\n </div>\n </StyledRoot>\n )\n}\n"],"mappings":"~~;;;;;~~AAYA,IAAa,aAAa,OAAO,YAAY,MAAM;CACjD,MAAM,CAAC,OAAO;CACd,UAAU;EACR,aAAa;GACX,MAAM;IACJ;IACA;IACA;GACF;GACA,OAAO,CAAC,QAAQ;EAClB;EACA,QAAQ;GACN,MAAM,CAAC,0CAA0C;GACjD,OAAO;IACL;IACA;IACA;IACA;GACF;EACF;EACA,WAAW;GACT,QAAQ,CAAC;GACT,KAAK,CAAC;EACR;EACA,OAAO;GACL,UAAU,CAAC;GACX,QAAQ,CAAC,aAAa;EACxB;CACF;CACA,kBAAkB;EAChB;GACE,QAAQ;GACR,WAAW;GACX,OAAO;GACP,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA;GACE,QAAQ;GACR,WAAW;GACX,OAAO;GACP,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA;GACE,QAAQ;GACR,OAAO;GACP,OAAO,CAAC;EACV;EACA;GACE,QAAQ;GACR,OAAO;GACP,OAAO;IACL;IACA;IACA;GACF;EACF;CACF;AACF,CAAC;AAED,IAAM,cAAc;CAClB,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;AACL;AAEA,IAAM,0BAA0B,gBAC9B,gBAAgB,eAAe,QAAQ;AAEzC,IAAa,mBAAmB,EAC9B,KACA,cAAc,cACd,KACA,aACA,UACA,QAAQ,YACR,MACA,GAAG,WACqD;CACxD,MAAM,SAAS,OAAO,QAAQ;CAG9B,OACE,oBAAC,YAAD;EACO;EACM,WALG,uBAAuB,WAK1B;EACH;EACK;EACA;EACN;EACP,GAAI;YAEJ,oBAAC,OAAD;GACE,WAAW,GACT,QACA,UAAU,YAAY,MACtB,gBAAgB,eAAe,aAAa,YAC5C,OAAO,cAAc,aACvB;aAGE,QAAM,SAAS,QAAQ,QAAQ,CAAC,CAAC,KAAK,UAAU;IAC9C,IAAI,QAAM,eAAyC,KAAK,GACtD,OAAO,QAAM,aAAa,OAAO;KAAE,GAAG,MAAM;KAAO;IAAM,CAAC;IAE5D,OAAO;GACT,CAAC;EAEA,CAAA;CACK,CAAA;AAEhB"}
1	+ {"version":3,"file":"ToggleGroupRoot.js","names":[],"sources":["../../../src/components/toggle-group/ToggleGroupRoot.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled, 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 = ({\n ref,\n orientation = 'horizontal',\n gap,\n isFullWidth,\n children,\n theme = 'standard',\n wrap,\n ...rest\n}: React.ComponentProps<typeof StyledRoot> & RootType) => {\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<{ theme?: typeof theme }>(child)) {\n return React.cloneElement(child, { ...child.props, theme })\n }\n return child\n }) as React.ReactElement<unknown>[]\n }\n </div>\n </StyledRoot>\n )\n}\n"],"mappings":";;;;;;AAYA,IAAa,aAAa,OAAO,YAAY,MAAM;CACjD,MAAM,CAAC,OAAO;CACd,UAAU;EACR,aAAa;GACX,MAAM;IACJ;IACA;IACA;GACF;GACA,OAAO,CAAC,QAAQ;EAClB;EACA,QAAQ;GACN,MAAM,CAAC,0CAA0C;GACjD,OAAO;IACL;IACA;IACA;IACA;GACF;EACF;EACA,WAAW;GACT,QAAQ,CAAC;GACT,KAAK,CAAC;EACR;EACA,OAAO;GACL,UAAU,CAAC;GACX,QAAQ,CAAC,aAAa;EACxB;CACF;CACA,kBAAkB;EAChB;GACE,QAAQ;GACR,WAAW;GACX,OAAO;GACP,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA;GACE,QAAQ;GACR,WAAW;GACX,OAAO;GACP,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA;GACE,QAAQ;GACR,OAAO;GACP,OAAO,CAAC;EACV;EACA;GACE,QAAQ;GACR,OAAO;GACP,OAAO;IACL;IACA;IACA;GACF;EACF;CACF;AACF,CAAC;AAED,IAAM,cAAc;CAClB,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;AACL;AAEA,IAAM,0BAA0B,gBAC9B,gBAAgB,eAAe,QAAQ;AAEzC,IAAa,mBAAmB,EAC9B,KACA,cAAc,cACd,KACA,aACA,UACA,QAAQ,YACR,MACA,GAAG,WACqD;CACxD,MAAM,SAAS,OAAO,QAAQ;CAG9B,OACE,oBAAC,YAAD;EACO;EACM,WALG,uBAAuB,WAK1B;EACH;EACK;EACA;EACN;EACP,GAAI;YAEJ,oBAAC,OAAD;GACE,WAAW,GACT,QACA,UAAU,YAAY,MACtB,gBAAgB,eAAe,aAAa,YAC5C,OAAO,cAAc,aACvB;aAGE,QAAM,SAAS,QAAQ,QAAQ,CAAC,CAAC,KAAK,UAAU;IAC9C,IAAI,QAAM,eAAyC,KAAK,GACtD,OAAO,QAAM,aAAa,OAAO;KAAE,GAAG,MAAM;KAAO;IAAM,CAAC;IAE5D,OAAO;GACT,CAAC;EAEA,CAAA;CACK,CAAA;AAEhB"}

package/dist/components/top-bar/TopBar.js CHANGED Viewed

@@ -33,7 +33,7 @@ var StyledRoot = styled("header", {
 			standard: [
 				"w-screen",
 				"max-w-full",
-				"top-safe",
+				"top-0",
 				"border-b",
 				"border-b-(--border-bottom)"
 			],

package/dist/components/top-bar/TopBar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TopBar.js","names":[],"sources":["../../../src/components/top-bar/TopBar.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled, Theme } from '../../styled'\nimport { useWindowScrollPosition } from '../../utilities/hooks/useWindowScrollPosition'\nimport { Divider } from '../divider/Divider'\nimport { colorSchemes as topBarColorSchemes } from './TopBar.colorscheme.config'\nimport { TopBarActionIcon } from './TopBarActionIcon'\nimport { TopBarBrand, TopBarBrandLogo, TopBarBrandName } from './TopBarBrand'\n\nconst TopBarDivider = () => (\n <Divider orientation=\"vertical\" className=\"bg-divider h-6\" />\n)\n\nconst StyledRoot = styled(\n 'header',\n {\n base: [\n 'bg-(--background)',\n 'sticky',\n 'flex',\n 'items-center',\n 'z-15',\n 'transition-shadow',\n 'duration-200',\n 'ease-out'\n ],\n variants: {\n hasScrolled: {\n true: ['shadow-[0px_4px_4px_-2px_rgba(31,31,31,0.1)]']\n },\n size: {\n md: ['h-safe-offset-top-16', 'pt-safe'],\n lg: ['h-safe-offset-top-24', 'pt-safe']\n },\n diffused: {\n true: [\n 'supports-color-mix:bg-[color-mix(in_hsl,(--base-1)_70%,transparent)]',\n 'supports-color-mix:backdrop-blur-sm'\n ]\n },\n appearance: {\n standard: [\n 'w-screen',\n 'max-w-full',\n 'top-~~safe~~',\n 'border-b',\n 'border-b-(--border-bottom)'\n ],\n rounded: [\n 'w-full',\n 'top-safe-offset-2',\n 'p-2',\n 'border',\n 'border-white',\n 'rounded-full'\n ]\n }\n }\n },\n {\n enableResponsiveVariants: true\n }\n)\n\nconst Container = styled('div', {\n base: ['flex', 'items-center', 'h-10', 'mx-4', 'w-full', 'md:mx-8']\n})\n\ntype TopBarProps = React.ComponentProps<typeof StyledRoot> &\n React.ComponentProps<typeof Container> &\n React.ComponentProps<typeof Theme>\n\nconst TopBarComponent = ({\n size = 'md',\n diffused,\n theme,\n appearance = 'standard',\n ...rest\n}: React.PropsWithChildren<TopBarProps>) => {\n const { y: scrollPositionY } = useWindowScrollPosition()\n\n return (\n <Theme theme={theme \|\| topBarColorSchemes['light']}>\n <StyledRoot\n hasScrolled={!!scrollPositionY}\n diffused={diffused}\n appearance={appearance}\n size={size}\n >\n <Container {...rest} />\n </StyledRoot>\n </Theme>\n )\n}\n\nexport const TopBar = /* @__PURE__ */ Object.assign(TopBarComponent, {\n Brand: TopBarBrand,\n BrandLogo: TopBarBrandLogo,\n BrandName: TopBarBrandName,\n ActionIcon: TopBarActionIcon,\n Divider: TopBarDivider\n})\n\nTopBarComponent.displayName = 'TopBar'\n"],"mappings":";;;;;;;;;AASA,IAAM,sBACJ,oBAAC,SAAD;CAAS,aAAY;CAAW,WAAU;AAAkB,CAAA;AAG9D,IAAM,aAAa,OACjB,UACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,aAAa,EACX,MAAM,CAAC,8CAA8C,EACvD;EACA,MAAM;~~GACJ~~,IAAI,CAAC,wBAAwB,SAAS;GACtC,IAAI,CAAC,wBAAwB,SAAS;EACxC;EACA,UAAU,EACR,MAAM,CACJ,wEACA,qCACF,EACF;EACA,YAAY;GACV,UAAU;IACR;IACA;~~IACA~~;IACA;IACA;GACF;GACA,SAAS;IACP;IACA;IACA;IACA;IACA;IACA;GACF;EACF;CACF;AACF,GACA,EACE,0BAA0B,KAC5B,CACF;AAEA,IAAM,YAAY,OAAO,OAAO,EAC9B,MAAM;CAAC;CAAQ;CAAgB;CAAQ;CAAQ;CAAU;AAAS,EACpE,CAAC;AAMD,IAAM,mBAAmB,EACvB,OAAO,MACP,UACA,OACA,aAAa,YACb,GAAG,WACuC;CAC1C,MAAM,EAAE,GAAG,oBAAoB,wBAAwB;CAEvD,OACE,oBAAC,OAAD;EAAO,OAAO,SAAS,aAAmB;YACxC,oBAAC,YAAD;GACE,aAAa,CAAC,CAAC;GACL;GACE;GACN;aAEN,oBAAC,WAAD,EAAW,GAAI,KAAO,CAAA;EACZ,CAAA;CACP,CAAA;AAEX;AAEA,IAAa,SAAyB,uBAAO,OAAO,iBAAiB;CACnE,OAAO;CACP,WAAW;CACX,WAAW;CACX,YAAY;CACZ,SAAS;AACX,CAAC;AAED,gBAAgB,cAAc"}
1	+ {"version":3,"file":"TopBar.js","names":[],"sources":["../../../src/components/top-bar/TopBar.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled, Theme } from '../../styled'\nimport { useWindowScrollPosition } from '../../utilities/hooks/useWindowScrollPosition'\nimport { Divider } from '../divider/Divider'\nimport { colorSchemes as topBarColorSchemes } from './TopBar.colorscheme.config'\nimport { TopBarActionIcon } from './TopBarActionIcon'\nimport { TopBarBrand, TopBarBrandLogo, TopBarBrandName } from './TopBarBrand'\n\nconst TopBarDivider = () => (\n <Divider orientation=\"vertical\" className=\"bg-divider h-6\" />\n)\n\nconst StyledRoot = styled(\n 'header',\n {\n base: [\n 'bg-(--background)',\n 'sticky',\n 'flex',\n 'items-center',\n 'z-15',\n 'transition-shadow',\n 'duration-200',\n 'ease-out'\n ],\n variants: {\n hasScrolled: {\n true: ['shadow-[0px_4px_4px_-2px_rgba(31,31,31,0.1)]']\n },\n size: {\n // height includes the inset, pt-safe pushes content below it\n md: ['h-safe-offset-top-16', 'pt-safe'],\n lg: ['h-safe-offset-top-24', 'pt-safe']\n },\n diffused: {\n true: [\n 'supports-color-mix:bg-[color-mix(in_hsl,(--base-1)_70%,transparent)]',\n 'supports-color-mix:backdrop-blur-sm'\n ]\n },\n appearance: {\n standard: [\n 'w-screen',\n 'max-w-full',\n // inset is cleared inside the bar, so the root stays at the top\n 'top-0',\n 'border-b',\n 'border-b-(--border-bottom)'\n ],\n rounded: [\n 'w-full',\n 'top-safe-offset-2',\n 'p-2',\n 'border',\n 'border-white',\n 'rounded-full'\n ]\n }\n }\n },\n {\n enableResponsiveVariants: true\n }\n)\n\nconst Container = styled('div', {\n base: ['flex', 'items-center', 'h-10', 'mx-4', 'w-full', 'md:mx-8']\n})\n\ntype TopBarProps = React.ComponentProps<typeof StyledRoot> &\n React.ComponentProps<typeof Container> &\n React.ComponentProps<typeof Theme>\n\nconst TopBarComponent = ({\n size = 'md',\n diffused,\n theme,\n appearance = 'standard',\n ...rest\n}: React.PropsWithChildren<TopBarProps>) => {\n const { y: scrollPositionY } = useWindowScrollPosition()\n\n return (\n <Theme theme={theme \|\| topBarColorSchemes['light']}>\n <StyledRoot\n hasScrolled={!!scrollPositionY}\n diffused={diffused}\n appearance={appearance}\n size={size}\n >\n <Container {...rest} />\n </StyledRoot>\n </Theme>\n )\n}\n\nexport const TopBar = /* @__PURE__ */ Object.assign(TopBarComponent, {\n Brand: TopBarBrand,\n BrandLogo: TopBarBrandLogo,\n BrandName: TopBarBrandName,\n ActionIcon: TopBarActionIcon,\n Divider: TopBarDivider\n})\n\nTopBarComponent.displayName = 'TopBar'\n"],"mappings":";;;;;;;;;AASA,IAAM,sBACJ,oBAAC,SAAD;CAAS,aAAY;CAAW,WAAU;AAAkB,CAAA;AAG9D,IAAM,aAAa,OACjB,UACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,aAAa,EACX,MAAM,CAAC,8CAA8C,EACvD;EACA,MAAM;GAEJ,IAAI,CAAC,wBAAwB,SAAS;GACtC,IAAI,CAAC,wBAAwB,SAAS;EACxC;EACA,UAAU,EACR,MAAM,CACJ,wEACA,qCACF,EACF;EACA,YAAY;GACV,UAAU;IACR;IACA;IAEA;IACA;IACA;GACF;GACA,SAAS;IACP;IACA;IACA;IACA;IACA;IACA;GACF;EACF;CACF;AACF,GACA,EACE,0BAA0B,KAC5B,CACF;AAEA,IAAM,YAAY,OAAO,OAAO,EAC9B,MAAM;CAAC;CAAQ;CAAgB;CAAQ;CAAQ;CAAU;AAAS,EACpE,CAAC;AAMD,IAAM,mBAAmB,EACvB,OAAO,MACP,UACA,OACA,aAAa,YACb,GAAG,WACuC;CAC1C,MAAM,EAAE,GAAG,oBAAoB,wBAAwB;CAEvD,OACE,oBAAC,OAAD;EAAO,OAAO,SAAS,aAAmB;YACxC,oBAAC,YAAD;GACE,aAAa,CAAC,CAAC;GACL;GACE;GACN;aAEN,oBAAC,WAAD,EAAW,GAAI,KAAO,CAAA;EACZ,CAAA;CACP,CAAA;AAEX;AAEA,IAAa,SAAyB,uBAAO,OAAO,iBAAiB;CACnE,OAAO;CACP,WAAW;CACX,WAAW;CACX,YAAY;CACZ,SAAS;AACX,CAAC;AAED,gBAAgB,cAAc"}

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

@@ -1,4 +1,5 @@
-import { cn, styled } from "../../styled.js";
+import { cn } from "../../utilities/tw-merge/index.js";
+import { styled } from "../../styled.js";
 import { Text } from "../text/Text.js";
 import { Image } from "../image/Image.js";
 import "react";

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TopBarBrand.js","names":[],"sources":["../../../src/components/top-bar/TopBarBrand.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled, cn } from '../../styled'\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}) => (\n <Image\n src={src}\n alt={alt}\n className={cn('h-8', 'mr-3', 'w-auto', className)}\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":"~~;;;;;;~~AAMA,IAAa,mBAAmB,EAC9B,KACA,MAAM,sBACN,gBAIA,oBAAC,OAAD;CACO;CACA;CACL,WAAW,GAAG,OAAO,QAAQ,UAAU,SAAS;AACjD,CAAA;AAGH,IAAa,kBAAkB,OAAO,MAAM,EAC1C,MAAM,CAAC,eAAe,EACxB,CAAC;AAED,IAAa,cAAc,OAAO,KAAK,EACrC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC"}
1	+ {"version":3,"file":"TopBarBrand.js","names":[],"sources":["../../../src/components/top-bar/TopBarBrand.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled, cn } from '../../styled'\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}) => (\n <Image\n src={src}\n alt={alt}\n className={cn('h-8', 'mr-3', 'w-auto', className)}\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":";;;;;;;AAMA,IAAa,mBAAmB,EAC9B,KACA,MAAM,sBACN,gBAIA,oBAAC,OAAD;CACO;CACA;CACL,WAAW,GAAG,OAAO,QAAQ,UAAU,SAAS;AACjD,CAAA;AAGH,IAAa,kBAAkB,OAAO,MAAM,EAC1C,MAAM,CAAC,eAAe,EACxB,CAAC;AAED,IAAa,cAAc,OAAO,KAAK,EACrC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC"}

package/dist/components/tree/TreeCollapsibleContent.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { cn } from "../../styled.js";
+import { cn } from "../../utilities/tw-merge/index.js";
 import { TreeCollapsibleContext } from "./TreeCollapsible.js";
 import { TreeList } from "./TreeList.js";
 import * as React$1 from "react";

package/dist/components/tree/TreeCollapsibleTrigger.js CHANGED Viewed

@@ -1,4 +1,5 @@
-import { cn, styled } from "../../styled.js";
+import { cn } from "../../utilities/tw-merge/index.js";
+import { styled } from "../../styled.js";
 import { Icon } from "../icon/Icon.js";
 import { ActionIcon } from "../action-icon/ActionIcon.js";
 import { TreeCollapsibleContext } from "./TreeCollapsible.js";

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

	@@ -1 +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 * as React from 'react'\n\nimport { styled, cn } from '../../styled'\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\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 NavigationMenuCollapsibleTriggerProps = React.ComponentProps<\n typeof TreeItemContent\n> & {\n label: string\n}\n\nexport const TreeCollapsibleTrigger = ({\n children,\n label,\n className,\n onClick,\n ...rest\n}: NavigationMenuCollapsibleTriggerProps) => {\n const { setTriggerRef, triggerRef } = React.use(TreeCollapsibleContext)\n\n return (\n <TreeItemContent\n {...rest}\n className={cn('cursor-pointer', className)}\n onClick={(event) => {\n 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":"~~;;;;;;;;;;~~AAUA,IAAM,mBAAmB,OAAO,YAAY,EAC1C,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAQD,IAAa,0BAA0B,EACrC,UACA,OACA,WACA,SACA,GAAG,WACwC;CAC3C,MAAM,EAAE,eAAe,eAAe,QAAM,IAAI,sBAAsB;CAEtE,OACE,qBAAC,iBAAD;EACE,GAAI;EACJ,WAAW,GAAG,kBAAkB,SAAS;EACzC,UAAU,UAAU;GAClB,UAAU,KAAK;GACf,YAAY,SAAS,MAAM;EAC7B;YANF,CAQE,oBAAC,SAAD;GAAS,SAAA;aACP,oBAAC,kBAAD;IACE,MAAK;IACL,KAAK;IACE;IACP,OAAM;IACN,YAAY;IACZ,UAAU,MAAM,EAAE,gBAAgB;cAElC,oBAAC,MAAD,EAAM,IAAI,YAAc,CAAA;GACR,CAAA;EACX,CAAA,GACR,QACc;;AAErB"}
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 * as React from 'react'\n\nimport { styled, cn } from '../../styled'\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\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 NavigationMenuCollapsibleTriggerProps = React.ComponentProps<\n typeof TreeItemContent\n> & {\n label: string\n}\n\nexport const TreeCollapsibleTrigger = ({\n children,\n label,\n className,\n onClick,\n ...rest\n}: NavigationMenuCollapsibleTriggerProps) => {\n const { setTriggerRef, triggerRef } = React.use(TreeCollapsibleContext)\n\n return (\n <TreeItemContent\n {...rest}\n className={cn('cursor-pointer', className)}\n onClick={(event) => {\n 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":";;;;;;;;;;;AAUA,IAAM,mBAAmB,OAAO,YAAY,EAC1C,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAQD,IAAa,0BAA0B,EACrC,UACA,OACA,WACA,SACA,GAAG,WACwC;CAC3C,MAAM,EAAE,eAAe,eAAe,QAAM,IAAI,sBAAsB;CAEtE,OACE,qBAAC,iBAAD;EACE,GAAI;EACJ,WAAW,GAAG,kBAAkB,SAAS;EACzC,UAAU,UAAU;GAClB,UAAU,KAAK;GACf,YAAY,SAAS,MAAM;EAC7B;YANF,CAQE,oBAAC,SAAD;GAAS,SAAA;aACP,oBAAC,kBAAD;IACE,MAAK;IACL,KAAK;IACE;IACP,OAAM;IACN,YAAY;IACZ,UAAU,MAAM,EAAE,gBAAgB;cAElC,oBAAC,MAAD,EAAM,IAAI,YAAc,CAAA;GACR,CAAA;EACX,CAAA,GACR,QACc;;AAErB"}

package/dist/components/tree/TreeIcon.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { cn } from "../../styled.js";
+import { cn } from "../../utilities/tw-merge/index.js";
 import { Icon } from "../icon/Icon.js";
 import "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/tree/TreeListItem.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { cn } from "../../styled.js";
+import { cn } from "../../utilities/tw-merge/index.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/tree/TreeListItem.tsx

package/dist/components/tree/TreeText.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { cn } from "../../styled.js";
+import { cn } from "../../utilities/tw-merge/index.js";
 import { Text } from "../text/Text.js";
 import "react";
 import { jsx } from "react/jsx-runtime";