@atom-learning/components 8.0.3 → 8.1.1

package/dist/components/skeleton-loader/SkeletonSubjectList.js.map

@@ -1 +1 @@
-{"version":3,"file":"SkeletonSubjectList.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonSubjectList.tsx"],"sourcesContent":["import React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { Tile } from '../tile/Tile'\nimport { SkeletonLoader } from './Skeleton'\n\nexport const SkeletonSubjectList = ({ className }: { className?: string }) => (\n  <Tile\n    className={cn(\n      'p-2',\n      'flex-row',\n      'flex-wrap',\n      'items-center',\n      'justify-between',\n      'gap-4',\n      'w-full',\n      className\n    )}\n  >\n    <SkeletonLoader className=\"h-22 max-w-xl grow rounded-xl\" />\n    <SkeletonLoader className=\"size-10 shrink-0 rounded-md\" />\n  </Tile>\n)\n"],"mappings":";;;;;;AAOA,IAAa,uBAAuB,EAAE,gBACpC,qBAAC,MAAD;CACE,WAAW,GACT,OACA,YACA,aACA,gBACA,mBACA,SACA,UACA,UACD;WAVH,CAYE,oBAAC,gBAAD,EAAgB,WAAU,iCAAkC,CAAA,EAC5D,oBAAC,gBAAD,EAAgB,WAAU,+BAAgC,CAAA,CACrD"}
+{"version":3,"file":"SkeletonSubjectList.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonSubjectList.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '../../styled'\nimport { Tile } from '../tile/Tile'\nimport { SkeletonLoader } from './Skeleton'\n\nexport const SkeletonSubjectList = ({ className }: { className?: string }) => (\n  <Tile\n    className={cn(\n      'p-2',\n      'flex-row',\n      'flex-wrap',\n      'items-center',\n      'justify-between',\n      'gap-4',\n      'w-full',\n      className\n    )}\n  >\n    <SkeletonLoader className=\"h-22 max-w-xl grow rounded-xl\" />\n    <SkeletonLoader className=\"size-10 shrink-0 rounded-md\" />\n  </Tile>\n)\n"],"mappings":";;;;;;AAMA,IAAa,uBAAuB,EAAE,gBACpC,qBAAC,MAAD;CACE,WAAW,GACT,OACA,YACA,aACA,gBACA,mBACA,SACA,UACA,SACF;WAVF,CAYE,oBAAC,gBAAD,EAAgB,WAAU,gCAAiC,CAAA,GAC3D,oBAAC,gBAAD,EAAgB,WAAU,8BAA+B,CAAA,CACrD"}

package/dist/components/skeleton-loader/SkeletonTable.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 export declare const SkeletonTable: ({ numberOfColumns, numberOfRows, columnWidth, className }: {
     numberOfColumns?: number;
     numberOfRows?: number;

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

@@ -5,30 +5,28 @@ import { Tile } from "../tile/Tile.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/skeleton-loader/SkeletonTable.tsx
-var SkeletonTable = ({ numberOfColumns = 4, numberOfRows = 4, columnWidth, className }) => {
-	return /* @__PURE__ */ jsx(Tile, {
-		className: cn("p-6", "flex-row", "gap-4", "relative", className),
-		children: /* @__PURE__ */ jsxs(Table, {
-			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, {
+var SkeletonTable = ({ numberOfColumns = 4, numberOfRows = 4, columnWidth, className }) => /* @__PURE__ */ jsx(Tile, {
+	className: cn("p-6", "flex-row", "gap-4", "relative", className),
+	children: /* @__PURE__ */ jsxs(Table, {
+		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, {
+				style: { "--width": columnWidth?.[columnIndex] || "100px" },
+				className: "h-4 w-(--width) rounded-xl"
+			}) }, 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, {
+				className: "border-none",
+				children: /* @__PURE__ */ jsx(SkeletonLoader, {
 					style: { "--width": columnWidth?.[columnIndex] || "100px" },
-					className: "h-4 w-(--width) rounded-xl"
-				}) }, 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, {
-					className: "border-none",
-					children: /* @__PURE__ */ jsx(SkeletonLoader, {
-						style: { "--width": columnWidth?.[columnIndex] || "100px" },
-						className: "bg-grey-200 h-4 w-(--width) rounded-xl"
-					})
-				}, columnIndex)) }, rowIndex))
-			})]
-		})
-	});
-};
+					className: "bg-grey-200 h-4 w-(--width) rounded-xl"
+				})
+			}, columnIndex)) }, rowIndex))
+		})]
+	})
+});
 //#endregion
 export { SkeletonTable };
 

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

@@ -1 +1 @@
-{"version":3,"file":"SkeletonTable.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonTable.tsx"],"sourcesContent":["import React from 'react'\n\nimport { cn } from '~/styled'\n\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  return (\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(\n                  { length: numberOfColumns },\n                  (_, index) => index\n                ).map((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              </Table.Row>\n            )\n          )}\n        </Table.Body>\n      </Table>\n    </Tile>\n  )\n}\n"],"mappings":";;;;;;;AAQA,IAAa,iBAAiB,EAC5B,kBAAkB,GAClB,eAAe,GACf,aACA,gBAMI;AACJ,QACE,oBAAC,MAAD;EAAM,WAAW,GAAG,OAAO,YAAY,SAAS,YAAY,UAAU;YACpE,qBAAC,OAAD;GAAO,MAAK;aAAZ,CACE,oBAAC,MAAM,QAAP;IAAc,OAAM;cACjB,MAAM,KAAK,EAAE,QAAQ,iBAAiB,GAAG,GAAG,UAAU,MAAM,CAAC,KAC3D,gBACC,oBAAC,MAAM,YAAP,EAAA,UACE,oBAAC,gBAAD;KACE,OAAO,EAAE,WAAW,cAAc,gBAAgB,SAAS;KAC3D,WAAU;KACV,CAAA,EACe,EALI,YAKJ,CAEtB;IACY,CAAA,EACf,oBAAC,MAAM,MAAP;IAAY,SAAS;cAClB,MAAM,KAAK,EAAE,QAAQ,cAAc,GAAG,GAAG,UAAU,MAAM,CAAC,KACxD,aACC,oBAAC,MAAM,KAAP,EAAA,UACG,MAAM,KACL,EAAE,QAAQ,iBAAiB,GAC1B,GAAG,UAAU,MACf,CAAC,KAAK,gBACL,oBAAC,MAAM,MAAP;KAA8B,WAAU;eACtC,oBAAC,gBAAD;MACE,OAAO,EACL,WAAW,cAAc,gBAAgB,SAC1C;MACD,WAAU;MACV,CAAA;KACS,EAPI,YAOJ,CACb,EACQ,EAdI,SAcJ,CAEf;IACU,CAAA,CACP;;EACH,CAAA"}
+{"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"}

package/dist/components/skeleton-loader/SkeletonTabs.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 export declare const SkeletonTabs: ({ numberOfTabs, className, tabClassName }: {
     numberOfTabs: number;
     className?: string;

package/dist/components/skeleton-loader/SkeletonTabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"SkeletonTabs.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonTabs.tsx"],"sourcesContent":["import React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { Tile } from '../tile/Tile'\nimport { SkeletonLoader } from './Skeleton'\n\nexport const SkeletonTabs = ({\n  numberOfTabs,\n  className,\n  tabClassName\n}: {\n  numberOfTabs: number\n  className?: string\n  tabClassName?: string\n}) => (\n  <Tile className={cn('p-6', 'flex-row', 'gap-4', className)}>\n    {Array.from({ length: numberOfTabs }, (_, index) => `tab_${index}`).map(\n      (key) => (\n        <SkeletonLoader\n          key={key}\n          className={cn('w-32', 'h-6', 'rounded-sm', tabClassName)}\n        />\n      )\n    )}\n  </Tile>\n)\n"],"mappings":";;;;;;AAOA,IAAa,gBAAgB,EAC3B,cACA,WACA,mBAMA,oBAAC,MAAD;CAAM,WAAW,GAAG,OAAO,YAAY,SAAS,UAAU;WACvD,MAAM,KAAK,EAAE,QAAQ,cAAc,GAAG,GAAG,UAAU,OAAO,QAAQ,CAAC,KACjE,QACC,oBAAC,gBAAD,EAEE,WAAW,GAAG,QAAQ,OAAO,cAAc,aAAa,EACxD,EAFK,IAEL,CAEL;CACI,CAAA"}
+{"version":3,"file":"SkeletonTabs.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonTabs.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '../../styled'\nimport { Tile } from '../tile/Tile'\nimport { SkeletonLoader } from './Skeleton'\n\nexport const SkeletonTabs = ({\n  numberOfTabs,\n  className,\n  tabClassName\n}: {\n  numberOfTabs: number\n  className?: string\n  tabClassName?: string\n}) => (\n  <Tile className={cn('p-6', 'flex-row', 'gap-4', className)}>\n    {Array.from({ length: numberOfTabs }, (_, index) => `tab_${index}`).map(\n      (key) => (\n        <SkeletonLoader\n          key={key}\n          className={cn('w-32', 'h-6', 'rounded-sm', tabClassName)}\n        />\n      )\n    )}\n  </Tile>\n)\n"],"mappings":";;;;;;AAMA,IAAa,gBAAgB,EAC3B,cACA,WACA,mBAMA,oBAAC,MAAD;CAAM,WAAW,GAAG,OAAO,YAAY,SAAS,SAAS;WACtD,MAAM,KAAK,EAAE,QAAQ,aAAa,IAAI,GAAG,UAAU,OAAO,OAAO,CAAC,CAAC,KACjE,QACC,oBAAC,gBAAD,EAEE,WAAW,GAAG,QAAQ,OAAO,cAAc,YAAY,EACxD,GAFM,GAEN,CAEL;AACI,CAAA"}

package/dist/components/skeleton-loader/index.js

@@ -25,6 +25,6 @@ var skeleton_loader_exports = /* @__PURE__ */ __exportAll({
 	Tabs: () => SkeletonTabs
 });
 //#endregion
-export { skeleton_loader_exports };
+export { SkeletonBarChart as BarChart, SkeletonButton as Button, SkeletonCard as Card, SkeletonColumnChart as ColumnChart, SkeletonDoughnutChart as DoughnutChart, SkeletonHeading as Heading, SkeletonLoader as Loader, SkeletonPanelList as PanelList, SkeletonSubjectList as SubjectList, SkeletonTable as Table, SkeletonTabs as Tabs, skeleton_loader_exports };
 
 //# sourceMappingURL=index.js.map

package/dist/components/slider/Slider.js

@@ -53,7 +53,7 @@ var StyledThumb = styled(Thumb, { base: [
 	"disabled:cursor-not-allowed",
 	"disabled:opacity-30"
 ] });
-var Slider = React$1.forwardRef(({ value, defaultValue, min = 0, max = 100, theme = "tonal", className, children, ...remainingProps }, ref) => {
+var Slider = React$1.forwardRef(({ value, defaultValue, min = 0, max = 100, theme = "tonal", className, children, ...rest }, ref) => {
 	const values = value || defaultValue;
 	return /* @__PURE__ */ jsxs(CSSWrapper, {
 		className,
@@ -63,7 +63,7 @@ var Slider = React$1.forwardRef(({ value, defaultValue, min = 0, max = 100, them
 			min,
 			max,
 			ref,
-			...remainingProps,
+			...rest,
 			children: [/* @__PURE__ */ jsx(StyledTrack, {
 				theme,
 				children: /* @__PURE__ */ jsx(StyledRange, {})

package/dist/components/slider/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","names":[],"sources":["../../../src/components/slider/Slider.tsx"],"sourcesContent":["import { Range, Root, Thumb, Track } from '@radix-ui/react-slider'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { CSSWrapper } from '~/utilities/css-wrapper/CSSWrapper'\n\nimport { SliderSteps } from './SliderSteps'\nimport { SliderValue } from './SliderValue'\n\nconst StyledTrack = styled(Track, {\n  base: [\n    'rounded-full',\n    'grow',\n    'relative',\n    'data-[orientation=horizontal]:h-1',\n    'data-[orientation=vertical]:w-1'\n  ],\n  variants: {\n    theme: {\n      light: ['bg-white'],\n      tonal: ['bg-grey-600']\n    }\n  }\n})\n\nconst StyledSlider = styled(Root, {\n  base: [\n    'items-center',\n    'flex',\n    'relative',\n    'touch-none',\n    'select-none',\n    'cursor-pointer',\n    'data-[orientation=horizontal]:h-4',\n    'data-[orientation=vertical]:flex-col',\n    'data-[orientation=vertical]:w-4',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ]\n})\n\nconst StyledRange = styled(Range, {\n  base: [\n    'bg-primary-800',\n    'rounded-full',\n    'h-full',\n    'absolute',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ]\n})\n\nconst StyledThumb = styled(Thumb, {\n  base: [\n    'bg-primary-900',\n    'rounded-full',\n    'block',\n    'size-4',\n    'hover:bg-primary-1000',\n    'focus:outline-2',\n    'focus:outline-offset-2',\n    'focus:outline-primary-900',\n    'focus:outline-solid',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ]\n})\n\nexport type SliderProps = React.ComponentProps<typeof StyledSlider> &\n  Pick<React.ComponentProps<typeof StyledTrack>, 'theme'>\n\ntype SliderType = ReturnType<\n  typeof React.forwardRef<HTMLSpanElement, SliderProps>\n> & {\n  Value: typeof SliderValue\n  Steps: typeof SliderSteps\n}\n\nexport const Slider = React.forwardRef<HTMLSpanElement, SliderProps>(\n  (\n    {\n      value,\n      defaultValue,\n      min = 0,\n      max = 100,\n      theme = 'tonal',\n      className,\n      children,\n      ...remainingProps\n    },\n    ref\n  ) => {\n    const values = value || defaultValue\n    return (\n      <CSSWrapper className={className}>\n        <StyledSlider\n          defaultValue={defaultValue}\n          value={value}\n          min={min}\n          max={max}\n          ref={ref}\n          {...remainingProps}\n        >\n          <StyledTrack theme={theme}>\n            <StyledRange />\n          </StyledTrack>\n          {values?.length &&\n            values.map((_, i) => <StyledThumb key={`thumb${i}`} />)}\n        </StyledSlider>\n        {children}\n      </CSSWrapper>\n    )\n  }\n) as SliderType\n\nSlider.Value = SliderValue\nSlider.Steps = SliderSteps\n\nSlider.displayName = 'Slider'\n"],"mappings":";;;;;;;;AASA,IAAM,cAAc,OAAO,OAAO;CAChC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,OAAO;EACL,OAAO,CAAC,WAAW;EACnB,OAAO,CAAC,cAAc;EACvB,EACF;CACF,CAAC;AAEF,IAAM,eAAe,OAAO,MAAM,EAChC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC;AAEF,IAAM,cAAc,OAAO,OAAO,EAChC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC;AAEF,IAAM,cAAc,OAAO,OAAO,EAChC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC;AAYF,IAAa,SAAS,QAAM,YAExB,EACE,OACA,cACA,MAAM,GACN,MAAM,KACN,QAAQ,SACR,WACA,UACA,GAAG,kBAEL,QACG;CACH,MAAM,SAAS,SAAS;AACxB,QACE,qBAAC,YAAD;EAAuB;YAAvB,CACE,qBAAC,cAAD;GACgB;GACP;GACF;GACA;GACA;GACL,GAAI;aANN,CAQE,oBAAC,aAAD;IAAoB;cAClB,oBAAC,aAAD,EAAe,CAAA;IACH,CAAA,EACb,QAAQ,UACP,OAAO,KAAK,GAAG,MAAM,oBAAC,aAAD,EAAiC,EAAf,QAAQ,IAAO,CAAC,CAC5C;MACd,SACU;;EAGlB;AAED,OAAO,QAAQ;AACf,OAAO,QAAQ;AAEf,OAAO,cAAc"}
+{"version":3,"file":"Slider.js","names":[],"sources":["../../../src/components/slider/Slider.tsx"],"sourcesContent":["import { Range, Root, Thumb, Track } from '@radix-ui/react-slider'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { CSSWrapper } from '../../utilities/css-wrapper/CSSWrapper'\nimport { SliderSteps } from './SliderSteps'\nimport { SliderValue } from './SliderValue'\n\nconst StyledTrack = styled(Track, {\n  base: [\n    'rounded-full',\n    'grow',\n    'relative',\n    'data-[orientation=horizontal]:h-1',\n    'data-[orientation=vertical]:w-1'\n  ],\n  variants: {\n    theme: {\n      light: ['bg-white'],\n      tonal: ['bg-grey-600']\n    }\n  }\n})\n\nconst StyledSlider = styled(Root, {\n  base: [\n    'items-center',\n    'flex',\n    'relative',\n    'touch-none',\n    'select-none',\n    'cursor-pointer',\n    'data-[orientation=horizontal]:h-4',\n    'data-[orientation=vertical]:flex-col',\n    'data-[orientation=vertical]:w-4',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ]\n})\n\nconst StyledRange = styled(Range, {\n  base: [\n    'bg-primary-800',\n    'rounded-full',\n    'h-full',\n    'absolute',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ]\n})\n\nconst StyledThumb = styled(Thumb, {\n  base: [\n    'bg-primary-900',\n    'rounded-full',\n    'block',\n    'size-4',\n    'hover:bg-primary-1000',\n    'focus:outline-2',\n    'focus:outline-offset-2',\n    'focus:outline-primary-900',\n    'focus:outline-solid',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ]\n})\n\nexport type SliderProps = React.ComponentProps<typeof StyledSlider> &\n  Pick<React.ComponentProps<typeof StyledTrack>, 'theme'>\n\ntype SliderType = ReturnType<\n  typeof React.forwardRef<HTMLSpanElement, SliderProps>\n> & {\n  Value: typeof SliderValue\n  Steps: typeof SliderSteps\n}\n\nexport const Slider = React.forwardRef<HTMLSpanElement, SliderProps>(\n  (\n    {\n      value,\n      defaultValue,\n      min = 0,\n      max = 100,\n      theme = 'tonal',\n      className,\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const values = value || defaultValue\n    return (\n      <CSSWrapper className={className}>\n        <StyledSlider\n          defaultValue={defaultValue}\n          value={value}\n          min={min}\n          max={max}\n          ref={ref}\n          {...rest}\n        >\n          <StyledTrack theme={theme}>\n            <StyledRange />\n          </StyledTrack>\n          {values?.length &&\n            values.map((_, i) => <StyledThumb key={`thumb${i}`} />)}\n        </StyledSlider>\n        {children}\n      </CSSWrapper>\n    )\n  }\n) as SliderType\n\nSlider.Value = SliderValue\nSlider.Steps = SliderSteps\n\nSlider.displayName = 'Slider'\n"],"mappings":";;;;;;;;AAQA,IAAM,cAAc,OAAO,OAAO;CAChC,MAAM;EACJ;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,OAAO;EACL,OAAO,CAAC,UAAU;EAClB,OAAO,CAAC,aAAa;CACvB,EACF;AACF,CAAC;AAED,IAAM,eAAe,OAAO,MAAM,EAChC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,IAAM,cAAc,OAAO,OAAO,EAChC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,IAAM,cAAc,OAAO,OAAO,EAChC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAYD,IAAa,SAAS,QAAM,YAExB,EACE,OACA,cACA,MAAM,GACN,MAAM,KACN,QAAQ,SACR,WACA,UACA,GAAG,QAEL,QACG;CACH,MAAM,SAAS,SAAS;CACxB,OACE,qBAAC,YAAD;EAAuB;YAAvB,CACE,qBAAC,cAAD;GACgB;GACP;GACF;GACA;GACA;GACL,GAAI;aANN,CAQE,oBAAC,aAAD;IAAoB;cAClB,oBAAC,aAAD,CAAc,CAAA;GACH,CAAA,GACZ,QAAQ,UACP,OAAO,KAAK,GAAG,MAAM,oBAAC,aAAD,CAAgC,GAAd,QAAQ,GAAM,CAAC,CAC5C;MACb,QACS;;AAEhB,CACF;AAEA,OAAO,QAAQ;AACf,OAAO,QAAQ;AAEf,OAAO,cAAc"}

package/dist/components/slider/SliderSteps.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderSteps.js","names":[],"sources":["../../../src/components/slider/SliderSteps.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Text } from '../text/Text'\n\nexport type SliderStepsType = {\n  steps?: { label: string; value: number }[]\n}\n\ntype SliderStepsProps = {\n  min: number\n  max: number\n} & SliderStepsType\n\nconst getPercentValue = (value: number, min: number, max: number): number => {\n  return ((value - min) / (max - min)) * 100\n}\n\nconst getTransformValue = (value: number, min: number, max: number): number => {\n  const percentage = getPercentValue(value, min, max)\n\n  if (percentage <= 10) return 0\n  if (percentage >= 90) return 100\n  return 50\n}\n\nexport const SliderSteps = ({ min, max, steps = [] }: SliderStepsProps) => {\n  if (steps.length === 0) return null\n\n  return (\n    <div className=\"relative mt-3 h-3 w-full\">\n      {steps.map((step) => (\n        <Text\n          as=\"span\"\n          key={step.value}\n          style={{\n            '--left': `${getPercentValue(step.value, min, max)}%`,\n            '--translate-x': `-${getTransformValue(step.value, min, max)}%`\n          }}\n          className=\"text-grey-700 absolute left-(--left) translate-x-(--translate-x)\"\n        >\n          {step.label}\n        </Text>\n      ))}\n    </div>\n  )\n}\n"],"mappings":";;;;AAaA,IAAM,mBAAmB,OAAe,KAAa,QAAwB;AAC3E,SAAS,QAAQ,QAAQ,MAAM,OAAQ;;AAGzC,IAAM,qBAAqB,OAAe,KAAa,QAAwB;CAC7E,MAAM,aAAa,gBAAgB,OAAO,KAAK,IAAI;AAEnD,KAAI,cAAc,GAAI,QAAO;AAC7B,KAAI,cAAc,GAAI,QAAO;AAC7B,QAAO;;AAGT,IAAa,eAAe,EAAE,KAAK,KAAK,QAAQ,EAAE,OAAyB;AACzE,KAAI,MAAM,WAAW,EAAG,QAAO;AAE/B,QACE,oBAAC,OAAD;EAAK,WAAU;YACZ,MAAM,KAAK,SACV,oBAAC,MAAD;GACE,IAAG;GAEH,OAAO;IACL,UAAU,GAAG,gBAAgB,KAAK,OAAO,KAAK,IAAI,CAAC;IACnD,iBAAiB,IAAI,kBAAkB,KAAK,OAAO,KAAK,IAAI,CAAC;IAC9D;GACD,WAAU;aAET,KAAK;GACD,EARA,KAAK,MAQL,CACP;EACE,CAAA"}
+{"version":3,"file":"SliderSteps.js","names":[],"sources":["../../../src/components/slider/SliderSteps.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Text } from '../text/Text'\n\nexport type SliderStepsType = {\n  steps?: { label: string; value: number }[]\n}\n\ntype SliderStepsProps = {\n  min: number\n  max: number\n} & SliderStepsType\n\nconst getPercentValue = (value: number, min: number, max: number): number => {\n  return ((value - min) / (max - min)) * 100\n}\n\nconst getTransformValue = (value: number, min: number, max: number): number => {\n  const percentage = getPercentValue(value, min, max)\n\n  if (percentage <= 10) return 0\n  if (percentage >= 90) return 100\n  return 50\n}\n\nexport const SliderSteps = ({ min, max, steps = [] }: SliderStepsProps) => {\n  if (steps.length === 0) return null\n\n  return (\n    <div className=\"relative mt-3 h-3 w-full\">\n      {steps.map((step) => (\n        <Text\n          as=\"span\"\n          key={step.value}\n          style={{\n            '--left': `${getPercentValue(step.value, min, max)}%`,\n            '--translate-x': `-${getTransformValue(step.value, min, max)}%`\n          }}\n          className=\"text-grey-700 absolute left-(--left) translate-x-(--translate-x)\"\n        >\n          {step.label}\n        </Text>\n      ))}\n    </div>\n  )\n}\n"],"mappings":";;;;AAaA,IAAM,mBAAmB,OAAe,KAAa,QAAwB;CAC3E,QAAS,QAAQ,QAAQ,MAAM,OAAQ;AACzC;AAEA,IAAM,qBAAqB,OAAe,KAAa,QAAwB;CAC7E,MAAM,aAAa,gBAAgB,OAAO,KAAK,GAAG;CAElD,IAAI,cAAc,IAAI,OAAO;CAC7B,IAAI,cAAc,IAAI,OAAO;CAC7B,OAAO;AACT;AAEA,IAAa,eAAe,EAAE,KAAK,KAAK,QAAQ,CAAC,QAA0B;CACzE,IAAI,MAAM,WAAW,GAAG,OAAO;CAE/B,OACE,oBAAC,OAAD;EAAK,WAAU;YACZ,MAAM,KAAK,SACV,oBAAC,MAAD;GACE,IAAG;GAEH,OAAO;IACL,UAAU,GAAG,gBAAgB,KAAK,OAAO,KAAK,GAAG,EAAE;IACnD,iBAAiB,IAAI,kBAAkB,KAAK,OAAO,KAAK,GAAG,EAAE;GAC/D;GACA,WAAU;aAET,KAAK;EACF,GARC,KAAK,KAQN,CACP;CACE,CAAA;AAET"}

package/dist/components/slider/SliderValue.js

@@ -2,12 +2,10 @@ import { Text } from "../text/Text.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/slider/SliderValue.tsx
-var SliderValue = ({ value = [], outputLabel = (value) => `Current value is ${value}` }) => {
-	return /* @__PURE__ */ jsx(Text, {
-		className: "text-grey-700 mt-4 w-full",
-		children: outputLabel(value.length === 1 ? value[0] : value)
-	});
-};
+var SliderValue = ({ value = [], outputLabel = (value) => `Current value is ${value}` }) => /* @__PURE__ */ jsx(Text, {
+	className: "text-grey-700 mt-4 w-full",
+	children: outputLabel(value.length === 1 ? value[0] : value)
+});
 //#endregion
 export { SliderValue };
 

package/dist/components/slider/SliderValue.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderValue.js","names":[],"sources":["../../../src/components/slider/SliderValue.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Text } from '../text/Text'\n\nexport type SliderValueType = {\n  outputLabel?: (value: number | number[]) => string\n}\n\ntype SliderValueProps = SliderValueType & {\n  value?: number[]\n}\n\nexport const SliderValue = ({\n  value = [],\n  outputLabel = (value) => `Current value is ${value}`\n}: SliderValueProps) => {\n  return (\n    <Text className=\"text-grey-700 mt-4 w-full\">\n      {outputLabel(value.length === 1 ? value[0] : value)}\n    </Text>\n  )\n}\n"],"mappings":";;;;AAYA,IAAa,eAAe,EAC1B,QAAQ,EAAE,EACV,eAAe,UAAU,oBAAoB,cACvB;AACtB,QACE,oBAAC,MAAD;EAAM,WAAU;YACb,YAAY,MAAM,WAAW,IAAI,MAAM,KAAK,MAAM;EAC9C,CAAA"}
+{"version":3,"file":"SliderValue.js","names":[],"sources":["../../../src/components/slider/SliderValue.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Text } from '../text/Text'\n\nexport type SliderValueType = {\n  outputLabel?: (value: number | number[]) => string\n}\n\ntype SliderValueProps = SliderValueType & {\n  value?: number[]\n}\n\nexport const SliderValue = ({\n  value = [],\n  outputLabel = (value) => `Current value is ${value}`\n}: SliderValueProps) => (\n  <Text className=\"text-grey-700 mt-4 w-full\">\n    {outputLabel(value.length === 1 ? value[0] : value)}\n  </Text>\n)\n"],"mappings":";;;;AAYA,IAAa,eAAe,EAC1B,QAAQ,CAAC,GACT,eAAe,UAAU,oBAAoB,cAE7C,oBAAC,MAAD;CAAM,WAAU;WACb,YAAY,MAAM,WAAW,IAAI,MAAM,KAAK,KAAK;AAC9C,CAAA"}

package/dist/components/slider-field/SliderField.d.ts

@@ -1,11 +1,11 @@
-import React from 'react';
-import { FieldElementWrapperProps } from '../../components/field-wrapper/FieldWrapper';
-import { SliderProps } from '../../components/slider/Slider';
-import { SliderStepsType } from '../../components/slider/SliderSteps';
-import { SliderValueType } from '../slider/SliderValue';
+import * as React from 'react';
+import { type FieldElementWrapperProps } from '../field-wrapper/FieldWrapper';
+import { type SliderProps } from '../slider/Slider';
+import type { SliderStepsType } from '../slider/SliderSteps';
+import type { SliderValueType } from '../slider/SliderValue';
 type SliderFieldProps = SliderProps & SliderStepsType & SliderValueType & FieldElementWrapperProps;
-export declare const SliderField: {
-    ({ className, hideLabel, label, name, defaultValue, value, validation, outputLabel, min, max, steps, ...remainingProps }: SliderFieldProps): React.JSX.Element;
-    displayName: string;
-};
+export declare function SliderField({ className, hideLabel, label, name, defaultValue, value, validation, outputLabel, min, max, steps, ...rest }: SliderFieldProps): React.JSX.Element;
+export declare namespace SliderField {
+    var displayName: string;
+}
 export {};

package/dist/components/slider-field/SliderField.js

@@ -1,10 +1,10 @@
 import { FieldWrapper } from "../field-wrapper/FieldWrapper.js";
 import { Slider } from "../slider/Slider.js";
-import React from "react";
+import * as React$1 from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useController, useFormContext } from "react-hook-form";
 //#region src/components/slider-field/SliderField.tsx
-var SliderField = ({ className, hideLabel, label, name, defaultValue, value, validation, outputLabel, min = 0, max = 100, steps = [], ...remainingProps }) => {
+var SliderField = ({ className, hideLabel, label, name, defaultValue, value, validation, outputLabel, min = 0, max = 100, steps = [], ...rest }) => {
 	const { control } = useFormContext();
 	const { field: { ref, onChange, value: innerValue, name: innerName } } = useController({
 		name,
@@ -12,7 +12,7 @@ var SliderField = ({ className, hideLabel, label, name, defaultValue, value, val
 		rules: validation,
 		defaultValue
 	});
-	React.useEffect(() => {
+	React$1.useEffect(() => {
 		if (value?.length) onChange(value);
 	}, [JSON.stringify(value)]);
 	return /* @__PURE__ */ jsx(FieldWrapper, {
@@ -27,7 +27,7 @@ var SliderField = ({ className, hideLabel, label, name, defaultValue, value, val
 			value: innerValue,
 			min,
 			max,
-			...remainingProps,
+			...rest,
 			children: [/* @__PURE__ */ jsx(Slider.Steps, {
 				min,
 				max,

package/dist/components/slider-field/SliderField.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderField.js","names":[],"sources":["../../../src/components/slider-field/SliderField.tsx"],"sourcesContent":["import React from 'react'\nimport { useController, useFormContext } from 'react-hook-form'\n\nimport {\n  FieldElementWrapperProps,\n  FieldWrapper\n} from '~/components/field-wrapper/FieldWrapper'\nimport { Slider, SliderProps } from '~/components/slider/Slider'\nimport { SliderStepsType } from '~/components/slider/SliderSteps'\n\nimport { SliderValueType } from '../slider/SliderValue'\n\ntype SliderFieldProps = SliderProps &\n  SliderStepsType &\n  SliderValueType &\n  FieldElementWrapperProps\n\nexport const SliderField = ({\n  className,\n  hideLabel,\n  label,\n  name,\n  defaultValue,\n  value,\n  validation,\n  outputLabel,\n  min = 0,\n  max = 100,\n  steps = [],\n  ...remainingProps\n}: SliderFieldProps) => {\n  const { control } = useFormContext()\n  const {\n    field: { ref, onChange, value: innerValue, name: innerName }\n  } = useController({\n    name,\n    control,\n    rules: validation,\n    defaultValue\n  })\n\n  React.useEffect(() => {\n    // Update the react-hook-form inner value to match what is passed in.\n    if (value?.length) onChange(value)\n  }, [JSON.stringify(value)])\n\n  return (\n    <FieldWrapper\n      className={className}\n      fieldId={name}\n      label={label}\n      hideLabel={hideLabel}\n    >\n      <Slider\n        ref={ref}\n        name={innerName}\n        onValueChange={onChange}\n        value={innerValue}\n        min={min}\n        max={max}\n        {...remainingProps}\n      >\n        <Slider.Steps min={min} max={max} steps={steps} />\n\n        <Slider.Value value={innerValue} outputLabel={outputLabel} />\n      </Slider>\n    </FieldWrapper>\n  )\n}\n\nSliderField.displayName = 'SliderField'\n"],"mappings":";;;;;;AAiBA,IAAa,eAAe,EAC1B,WACA,WACA,OACA,MACA,cACA,OACA,YACA,aACA,MAAM,GACN,MAAM,KACN,QAAQ,EAAE,EACV,GAAG,qBACmB;CACtB,MAAM,EAAE,YAAY,gBAAgB;CACpC,MAAM,EACJ,OAAO,EAAE,KAAK,UAAU,OAAO,YAAY,MAAM,gBAC/C,cAAc;EAChB;EACA;EACA,OAAO;EACP;EACD,CAAC;AAEF,OAAM,gBAAgB;AAEpB,MAAI,OAAO,OAAQ,UAAS,MAAM;IACjC,CAAC,KAAK,UAAU,MAAM,CAAC,CAAC;AAE3B,QACE,oBAAC,cAAD;EACa;EACX,SAAS;EACF;EACI;YAEX,qBAAC,QAAD;GACO;GACL,MAAM;GACN,eAAe;GACf,OAAO;GACF;GACA;GACL,GAAI;aAPN,CASE,oBAAC,OAAO,OAAR;IAAmB;IAAU;IAAY;IAAS,CAAA,EAElD,oBAAC,OAAO,OAAR;IAAc,OAAO;IAAyB;IAAe,CAAA,CACtD;;EACI,CAAA;;AAInB,YAAY,cAAc"}
+{"version":3,"file":"SliderField.js","names":[],"sources":["../../../src/components/slider-field/SliderField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useController, useFormContext } from 'react-hook-form'\n\nimport {\n  type FieldElementWrapperProps,\n  FieldWrapper\n} from '../field-wrapper/FieldWrapper'\nimport { Slider, type SliderProps } from '../slider/Slider'\nimport type { SliderStepsType } from '../slider/SliderSteps'\nimport type { SliderValueType } from '../slider/SliderValue'\n\ntype SliderFieldProps = SliderProps &\n  SliderStepsType &\n  SliderValueType &\n  FieldElementWrapperProps\n\nexport const SliderField = ({\n  className,\n  hideLabel,\n  label,\n  name,\n  defaultValue,\n  value,\n  validation,\n  outputLabel,\n  min = 0,\n  max = 100,\n  steps = [],\n  ...rest\n}: SliderFieldProps) => {\n  const { control } = useFormContext()\n  const {\n    field: { ref, onChange, value: innerValue, name: innerName }\n  } = useController({\n    name,\n    control,\n    rules: validation,\n    defaultValue\n  })\n\n  React.useEffect(() => {\n    // Update the react-hook-form inner value to match what is passed in.\n    if (value?.length) onChange(value)\n  }, [JSON.stringify(value)])\n\n  return (\n    <FieldWrapper\n      className={className}\n      fieldId={name}\n      label={label}\n      hideLabel={hideLabel}\n    >\n      <Slider\n        ref={ref}\n        name={innerName}\n        onValueChange={onChange}\n        value={innerValue}\n        min={min}\n        max={max}\n        {...rest}\n      >\n        <Slider.Steps min={min} max={max} steps={steps} />\n\n        <Slider.Value value={innerValue} outputLabel={outputLabel} />\n      </Slider>\n    </FieldWrapper>\n  )\n}\n\nSliderField.displayName = 'SliderField'\n"],"mappings":";;;;;;AAgBA,IAAa,eAAe,EAC1B,WACA,WACA,OACA,MACA,cACA,OACA,YACA,aACA,MAAM,GACN,MAAM,KACN,QAAQ,CAAC,GACT,GAAG,WACmB;CACtB,MAAM,EAAE,YAAY,eAAe;CACnC,MAAM,EACJ,OAAO,EAAE,KAAK,UAAU,OAAO,YAAY,MAAM,gBAC/C,cAAc;EAChB;EACA;EACA,OAAO;EACP;CACF,CAAC;CAED,QAAM,gBAAgB;EAEpB,IAAI,OAAO,QAAQ,SAAS,KAAK;CACnC,GAAG,CAAC,KAAK,UAAU,KAAK,CAAC,CAAC;CAE1B,OACE,oBAAC,cAAD;EACa;EACX,SAAS;EACF;EACI;YAEX,qBAAC,QAAD;GACO;GACL,MAAM;GACN,eAAe;GACf,OAAO;GACF;GACA;GACL,GAAI;aAPN,CASE,oBAAC,OAAO,OAAR;IAAmB;IAAU;IAAY;GAAQ,CAAA,GAEjD,oBAAC,OAAO,OAAR;IAAc,OAAO;IAAyB;GAAc,CAAA,CACtD;;CACI,CAAA;AAElB;AAEA,YAAY,cAAc"}

package/dist/components/sortable/Handle.d.ts

@@ -1,19 +1,19 @@
 import * as React from 'react';
 import { Icon } from '../icon/Icon';
-export declare const StyledHandle: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "appearance" | "size" | "theme" | "isRounded"> & {
-    theme?: ("primary" | "white" | "neutral" | "primaryDark" | "success" | "warning" | "danger" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "primary" | "white" | "neutral" | "primaryDark" | "success" | "warning" | "danger">>) | undefined;
-    appearance?: ("simple" | "outline" | "solid" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "simple" | "outline" | "solid">>) | undefined;
-    size?: ("sm" | "md" | "lg" | "xs" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs">>) | undefined;
-    isRounded?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
+export declare const StyledHandle: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "appearance" | "isRounded" | "size" | "theme"> & {
+    theme?: ("danger" | "neutral" | "primary" | "primaryDark" | "success" | "warning" | "white" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "danger" | "neutral" | "primary" | "primaryDark" | "success" | "warning" | "white">>) | undefined;
+    appearance?: ("outline" | "simple" | "solid" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "outline" | "simple" | "solid">>) | undefined;
+    size?: ("lg" | "md" | "sm" | "xs" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "lg" | "md" | "sm" | "xs">>) | undefined;
+    isRounded?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
 } & {
     as?: React.ElementType;
-}, "children" | "label" | "hasTooltip" | "tooltipSide" | keyof import("../..").NavigatorActions> & {
+}, "children" | "hasTooltip" | "label" | "tooltipSide" | keyof import("../..").NavigatorActions> & {
     children: React.ReactNode;
     label: string;
-} & Omit<import("../..").TOptionalTooltipWrapperProps, "label"> & import("../..").NavigatorActions, "ref"> & React.RefAttributes<HTMLButtonElement>, "isDragging"> & {
+} & Omit<import("../..").OptionalTooltipWrapperProps, "label"> & import("../..").NavigatorActions, "ref"> & React.RefAttributes<HTMLButtonElement>, "isDragging"> & {
     isDragging?: boolean | undefined;
 } & {
     as?: React.ElementType;
 }>;
-export type THandleProps = Omit<React.ComponentProps<typeof StyledHandle>, 'children'> & Pick<React.ComponentProps<typeof Icon>, 'size'>;
-export declare const Handle: React.ForwardRefExoticComponent<Omit<THandleProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export type HandleProps = Omit<React.ComponentProps<typeof StyledHandle>, 'children'> & Pick<React.ComponentProps<typeof Icon>, 'size'>;
+export declare const Handle: React.ForwardRefExoticComponent<Omit<HandleProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/sortable/Handle.js

@@ -18,19 +18,17 @@ var StyledHandle = styled(ActionIcon, {
 		false: ["cursor-grab"]
 	} }
 });
-var Handle = React$1.forwardRef(({ isDragging, size, ...rest }, ref) => {
-	return /* @__PURE__ */ jsx(StyledHandle, {
-		ref,
-		isDragging,
-		appearance: "simple",
-		hasTooltip: false,
-		size,
-		...rest,
-		children: /* @__PURE__ */ jsx(Icon, { is: DragHandle })
-	});
-});
+var Handle = React$1.forwardRef(({ isDragging, size, ...rest }, ref) => /* @__PURE__ */ jsx(StyledHandle, {
+	ref,
+	isDragging,
+	appearance: "simple",
+	hasTooltip: false,
+	size,
+	...rest,
+	children: /* @__PURE__ */ jsx(Icon, { is: DragHandle })
+}));
 Handle.displayName = "Handle";
 //#endregion
-export { Handle };
+export { Handle, StyledHandle };
 
 //# sourceMappingURL=Handle.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Handle.js","names":[],"sources":["../../../src/components/sortable/Handle.tsx"],"sourcesContent":["import { DragHandle } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\n\nexport const StyledHandle = styled(ActionIcon, {\n  base: [\n    'text-inherit!',\n    'fill-current',\n    'disabled:**:pointer-events-none',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ],\n  variants: {\n    isDragging: {\n      true: ['cursor-grabbing'],\n      false: ['cursor-grab']\n    }\n  }\n})\n\nexport type THandleProps = Omit<\n  React.ComponentProps<typeof StyledHandle>,\n  'children'\n> &\n  Pick<React.ComponentProps<typeof Icon>, 'size'>\n\nexport const Handle = React.forwardRef<HTMLButtonElement, THandleProps>(\n  ({ isDragging, size, ...rest }, ref) => {\n    return (\n      <StyledHandle\n        ref={ref}\n        isDragging={isDragging}\n        appearance=\"simple\"\n        hasTooltip={false}\n        size={size}\n        {...rest}\n      >\n        <Icon is={DragHandle} />\n      </StyledHandle>\n    )\n  }\n)\n\nHandle.displayName = 'Handle'\n"],"mappings":";;;;;;;AAQA,IAAa,eAAe,OAAO,YAAY;CAC7C,MAAM;EACJ;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,YAAY;EACV,MAAM,CAAC,kBAAkB;EACzB,OAAO,CAAC,cAAc;EACvB,EACF;CACF,CAAC;AAQF,IAAa,SAAS,QAAM,YACzB,EAAE,YAAY,MAAM,GAAG,QAAQ,QAAQ;AACtC,QACE,oBAAC,cAAD;EACO;EACO;EACZ,YAAW;EACX,YAAY;EACN;EACN,GAAI;YAEJ,oBAAC,MAAD,EAAM,IAAI,YAAc,CAAA;EACX,CAAA;EAGpB;AAED,OAAO,cAAc"}
+{"version":3,"file":"Handle.js","names":[],"sources":["../../../src/components/sortable/Handle.tsx"],"sourcesContent":["import { DragHandle } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\n\nexport const StyledHandle = styled(ActionIcon, {\n  base: [\n    'text-inherit!',\n    'fill-current',\n    'disabled:**:pointer-events-none',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ],\n  variants: {\n    isDragging: {\n      true: ['cursor-grabbing'],\n      false: ['cursor-grab']\n    }\n  }\n})\n\nexport type HandleProps = Omit<\n  React.ComponentProps<typeof StyledHandle>,\n  'children'\n> &\n  Pick<React.ComponentProps<typeof Icon>, 'size'>\n\nexport const Handle = React.forwardRef<HTMLButtonElement, HandleProps>(\n  ({ isDragging, size, ...rest }, ref) => (\n    <StyledHandle\n      ref={ref}\n      isDragging={isDragging}\n      appearance=\"simple\"\n      hasTooltip={false}\n      size={size}\n      {...rest}\n    >\n      <Icon is={DragHandle} />\n    </StyledHandle>\n  )\n)\n\nHandle.displayName = 'Handle'\n"],"mappings":";;;;;;;AAOA,IAAa,eAAe,OAAO,YAAY;CAC7C,MAAM;EACJ;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,YAAY;EACV,MAAM,CAAC,iBAAiB;EACxB,OAAO,CAAC,aAAa;CACvB,EACF;AACF,CAAC;AAQD,IAAa,SAAS,QAAM,YACzB,EAAE,YAAY,MAAM,GAAG,QAAQ,QAC9B,oBAAC,cAAD;CACO;CACO;CACZ,YAAW;CACX,YAAY;CACN;CACN,GAAI;WAEJ,oBAAC,MAAD,EAAM,IAAI,WAAa,CAAA;AACX,CAAA,CAElB;AAEA,OAAO,cAAc"}

package/dist/components/sortable/SortableHandle.d.ts

@@ -1,11 +1,11 @@
 import * as React from 'react';
-import { THandleProps } from './Handle';
-export type TSortableHandleProps = {
+import { type HandleProps } from './Handle';
+export type SortableHandleProps = {
     targetId: string | number;
     disabled?: boolean;
     label?: string;
-} & Omit<THandleProps, 'label'>;
-export declare const SortableHandle: {
-    ({ targetId, disabled, label, ...rest }: TSortableHandleProps): React.JSX.Element;
-    displayName: string;
-};
+} & Omit<HandleProps, 'label'>;
+export declare function SortableHandle({ targetId, disabled, label, ...rest }: SortableHandleProps): React.JSX.Element;
+export declare namespace SortableHandle {
+    var displayName: string;
+}

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

@@ -1 +1 @@
-{"version":3,"file":"SortableHandle.js","names":[],"sources":["../../../src/components/sortable/SortableHandle.tsx"],"sourcesContent":["import { useSortable } from '@dnd-kit/sortable'\nimport * as React from 'react'\n\nimport { Handle as DragHandle, THandleProps } from './Handle'\n\nexport type TSortableHandleProps = {\n  targetId: string | number\n  disabled?: boolean\n  label?: string\n} & Omit<THandleProps, 'label'>\n\nexport const SortableHandle = ({\n  targetId,\n  disabled = false,\n  label = 'drag handle',\n  ...rest\n}: TSortableHandleProps) => {\n  const { attributes, listeners, isDragging, setActivatorNodeRef } =\n    useSortable({ id: targetId })\n\n  return (\n    <DragHandle\n      ref={setActivatorNodeRef}\n      isDragging={isDragging}\n      label={label}\n      disabled={disabled}\n      {...(!disabled ? listeners : {})}\n      {...(!disabled ? attributes : {})}\n      {...rest}\n    />\n  )\n}\n\nSortableHandle.displayName = 'SortableHandle'\n"],"mappings":";;;;;AAWA,IAAa,kBAAkB,EAC7B,UACA,WAAW,OACX,QAAQ,eACR,GAAG,WACuB;CAC1B,MAAM,EAAE,YAAY,WAAW,YAAY,wBACzC,YAAY,EAAE,IAAI,UAAU,CAAC;AAE/B,QACE,oBAAC,QAAD;EACE,KAAK;EACO;EACL;EACG;EACV,GAAK,CAAC,WAAW,YAAY,EAAE;EAC/B,GAAK,CAAC,WAAW,aAAa,EAAE;EAChC,GAAI;EACJ,CAAA;;AAIN,eAAe,cAAc"}
+{"version":3,"file":"SortableHandle.js","names":[],"sources":["../../../src/components/sortable/SortableHandle.tsx"],"sourcesContent":["import { useSortable } from '@dnd-kit/sortable'\nimport * as React from 'react'\n\nimport { Handle as DragHandle, type HandleProps } from './Handle'\n\nexport type SortableHandleProps = {\n  targetId: string | number\n  disabled?: boolean\n  label?: string\n} & Omit<HandleProps, 'label'>\n\nexport const SortableHandle = ({\n  targetId,\n  disabled = false,\n  label = 'drag handle',\n  ...rest\n}: SortableHandleProps) => {\n  const { attributes, listeners, isDragging, setActivatorNodeRef } =\n    useSortable({ id: targetId })\n\n  return (\n    <DragHandle\n      ref={setActivatorNodeRef}\n      isDragging={isDragging}\n      label={label}\n      disabled={disabled}\n      {...(!disabled ? listeners : {})}\n      {...(!disabled ? attributes : {})}\n      {...rest}\n    />\n  )\n}\n\nSortableHandle.displayName = 'SortableHandle'\n"],"mappings":";;;;;AAWA,IAAa,kBAAkB,EAC7B,UACA,WAAW,OACX,QAAQ,eACR,GAAG,WACsB;CACzB,MAAM,EAAE,YAAY,WAAW,YAAY,wBACzC,YAAY,EAAE,IAAI,SAAS,CAAC;CAE9B,OACE,oBAAC,QAAD;EACE,KAAK;EACO;EACL;EACG;EACV,GAAK,CAAC,WAAW,YAAY,CAAC;EAC9B,GAAK,CAAC,WAAW,aAAa,CAAC;EAC/B,GAAI;CACL,CAAA;AAEL;AAEA,eAAe,cAAc"}

package/dist/components/sortable/SortableItem.d.ts

@@ -1,6 +1,6 @@
 import type { UniqueIdentifier } from '@dnd-kit/core';
 import * as React from 'react';
-export type TSortableItemProps = {
+export type SortableItemProps = {
     id: UniqueIdentifier;
     asChild?: boolean;
     isDragHandle?: boolean;
@@ -8,7 +8,7 @@ export type TSortableItemProps = {
     className?: string;
     style?: Pick<React.HTMLAttributes<HTMLDivElement>, 'style'>;
 };
-export declare const SortableItem: {
-    ({ id, asChild, className, style, isDragHandle, disabled, ...rest }: React.PropsWithChildren<TSortableItemProps>): React.JSX.Element;
-    displayName: string;
-};
+export declare function SortableItem({ id, asChild, className, style, isDragHandle, disabled, ...rest }: React.PropsWithChildren<SortableItemProps>): React.JSX.Element;
+export declare namespace SortableItem {
+    var displayName: string;
+}

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 * 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;AAGrB,QACE,oBAFgB,UAAU,OAAO,OAEjC;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"}
+{"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 SortableItemProps = {\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<SortableItemProps>) => {\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,WAC6C;CAChD,MAAM,EAAE,WAAW,YAAY,YAAY,WAAW,eACpD,YAAY,EAAE,GAAG,CAAC;CAGpB,OACE,oBAFgB,UAAU,OAAO,OAEjC;EACE,KAAK;EACL,OAAO;GACL,GAAG;GACH,WAAW;GACX,iBAAiB,WAAW,KAAK;GACjC,iBAAiB,WAAW,KAAK;EACnC;EACA,iBAAe;EACf,iBAAe;EACf,GAAK,gBAAgB,CAAC,WAAW,YAAY,CAAC;EAC9C,GAAK,gBAAgB,CAAC,WAAW,aAAa,CAAC;EAC/C,GAAI;EACJ,WAAW,GACT,8CACA,8CACA,mBACA,cAAc,OACd,mCACA,+BACA,uBACA,iBAAiB,aAAa,oBAAoB,gBAClD,SACF;CACD,CAAA;AAEL;AAEA,aAAa,cAAc"}

package/dist/components/sortable/SortableRoot.d.ts

@@ -1,6 +1,6 @@
 import type { UniqueIdentifier } from '@dnd-kit/core';
 import * as React from 'react';
-type TSortableRootProps = {
+type SortableRootProps = {
     sortableIds: (string | number)[];
     onSortChange: (onSortChangeData: {
         order: UniqueIdentifier[];
@@ -8,8 +8,8 @@ type TSortableRootProps = {
         newIndex: number;
     }) => void;
 };
-export declare const SortableRoot: {
-    ({ sortableIds, onSortChange, children }: React.PropsWithChildren<TSortableRootProps>): React.JSX.Element;
-    displayName: string;
-};
+export declare function SortableRoot({ sortableIds, onSortChange, children }: React.PropsWithChildren<SortableRootProps>): React.JSX.Element;
+export declare namespace SortableRoot {
+    var displayName: string;
+}
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"SortableRoot.js","names":[],"sources":["../../../src/components/sortable/SortableRoot.tsx"],"sourcesContent":["import type { DragEndEvent, UniqueIdentifier } from '@dnd-kit/core'\nimport {\n  closestCenter,\n  DndContext,\n  KeyboardSensor,\n  PointerSensor,\n  useSensor,\n  useSensors\n} from '@dnd-kit/core'\nimport {\n  arrayMove,\n  SortableContext,\n  sortableKeyboardCoordinates\n} from '@dnd-kit/sortable'\nimport * as React from 'react'\n\ntype TSortableRootProps = {\n  sortableIds: (string | number)[]\n  onSortChange: (onSortChangeData: {\n    order: UniqueIdentifier[]\n    oldIndex: number\n    newIndex: number\n  }) => void\n}\n\nexport const SortableRoot = ({\n  sortableIds,\n  onSortChange,\n  children\n}: React.PropsWithChildren<TSortableRootProps>) => {\n  const [order, setOrder] = React.useState<(string | number)[]>(sortableIds)\n  React.useEffect(() => {\n    setOrder(sortableIds)\n  }, [sortableIds])\n\n  const sensors = useSensors(\n    useSensor(PointerSensor),\n    useSensor(KeyboardSensor, {\n      coordinateGetter: sortableKeyboardCoordinates\n    })\n  )\n\n  const handleDragEnd = (event: DragEndEvent) => {\n    const { active, over } = event\n    if (active.id && over?.id && active.id !== over?.id) {\n      setOrder((order) => {\n        const oldIndex = order.indexOf(active.id)\n        const newIndex = order.indexOf(over.id)\n        const newOrder = arrayMove(order, oldIndex, newIndex)\n        onSortChange({ order: newOrder, oldIndex, newIndex })\n        return newOrder\n      })\n    }\n  }\n\n  return (\n    <DndContext\n      sensors={sensors}\n      collisionDetection={closestCenter}\n      onDragEnd={handleDragEnd}\n    >\n      <SortableContext items={order}>{children}</SortableContext>\n    </DndContext>\n  )\n}\n\nSortableRoot.displayName = 'SortableRoot'\n"],"mappings":";;;;;AAyBA,IAAa,gBAAgB,EAC3B,aACA,cACA,eACiD;CACjD,MAAM,CAAC,OAAO,YAAY,QAAM,SAA8B,YAAY;AAC1E,SAAM,gBAAgB;AACpB,WAAS,YAAY;IACpB,CAAC,YAAY,CAAC;CAEjB,MAAM,UAAU,WACd,UAAU,cAAc,EACxB,UAAU,gBAAgB,EACxB,kBAAkB,6BACnB,CAAC,CACH;CAED,MAAM,iBAAiB,UAAwB;EAC7C,MAAM,EAAE,QAAQ,SAAS;AACzB,MAAI,OAAO,MAAM,MAAM,MAAM,OAAO,OAAO,MAAM,GAC/C,WAAU,UAAU;GAClB,MAAM,WAAW,MAAM,QAAQ,OAAO,GAAG;GACzC,MAAM,WAAW,MAAM,QAAQ,KAAK,GAAG;GACvC,MAAM,WAAW,UAAU,OAAO,UAAU,SAAS;AACrD,gBAAa;IAAE,OAAO;IAAU;IAAU;IAAU,CAAC;AACrD,UAAO;IACP;;AAIN,QACE,oBAAC,YAAD;EACW;EACT,oBAAoB;EACpB,WAAW;YAEX,oBAAC,iBAAD;GAAiB,OAAO;GAAQ;GAA2B,CAAA;EAChD,CAAA;;AAIjB,aAAa,cAAc"}
+{"version":3,"file":"SortableRoot.js","names":[],"sources":["../../../src/components/sortable/SortableRoot.tsx"],"sourcesContent":["import type { DragEndEvent, UniqueIdentifier } from '@dnd-kit/core'\nimport {\n  closestCenter,\n  DndContext,\n  KeyboardSensor,\n  PointerSensor,\n  useSensor,\n  useSensors\n} from '@dnd-kit/core'\nimport {\n  arrayMove,\n  SortableContext,\n  sortableKeyboardCoordinates\n} from '@dnd-kit/sortable'\nimport * as React from 'react'\n\ntype SortableRootProps = {\n  sortableIds: (string | number)[]\n  onSortChange: (onSortChangeData: {\n    order: UniqueIdentifier[]\n    oldIndex: number\n    newIndex: number\n  }) => void\n}\n\nexport const SortableRoot = ({\n  sortableIds,\n  onSortChange,\n  children\n}: React.PropsWithChildren<SortableRootProps>) => {\n  const [order, setOrder] = React.useState<(string | number)[]>(sortableIds)\n  React.useEffect(() => {\n    setOrder(sortableIds)\n  }, [sortableIds])\n\n  const sensors = useSensors(\n    useSensor(PointerSensor),\n    useSensor(KeyboardSensor, {\n      coordinateGetter: sortableKeyboardCoordinates\n    })\n  )\n\n  const handleDragEnd = (event: DragEndEvent) => {\n    const { active, over } = event\n    if (active.id && over?.id && active.id !== over?.id) {\n      setOrder((order) => {\n        const oldIndex = order.indexOf(active.id)\n        const newIndex = order.indexOf(over.id)\n        const newOrder = arrayMove(order, oldIndex, newIndex)\n        onSortChange({ order: newOrder, oldIndex, newIndex })\n        return newOrder\n      })\n    }\n  }\n\n  return (\n    <DndContext\n      sensors={sensors}\n      collisionDetection={closestCenter}\n      onDragEnd={handleDragEnd}\n    >\n      <SortableContext items={order}>{children}</SortableContext>\n    </DndContext>\n  )\n}\n\nSortableRoot.displayName = 'SortableRoot'\n"],"mappings":";;;;;AAyBA,IAAa,gBAAgB,EAC3B,aACA,cACA,eACgD;CAChD,MAAM,CAAC,OAAO,YAAY,QAAM,SAA8B,WAAW;CACzE,QAAM,gBAAgB;EACpB,SAAS,WAAW;CACtB,GAAG,CAAC,WAAW,CAAC;CAEhB,MAAM,UAAU,WACd,UAAU,aAAa,GACvB,UAAU,gBAAgB,EACxB,kBAAkB,4BACpB,CAAC,CACH;CAEA,MAAM,iBAAiB,UAAwB;EAC7C,MAAM,EAAE,QAAQ,SAAS;EACzB,IAAI,OAAO,MAAM,MAAM,MAAM,OAAO,OAAO,MAAM,IAC/C,UAAU,UAAU;GAClB,MAAM,WAAW,MAAM,QAAQ,OAAO,EAAE;GACxC,MAAM,WAAW,MAAM,QAAQ,KAAK,EAAE;GACtC,MAAM,WAAW,UAAU,OAAO,UAAU,QAAQ;GACpD,aAAa;IAAE,OAAO;IAAU;IAAU;GAAS,CAAC;GACpD,OAAO;EACT,CAAC;CAEL;CAEA,OACE,oBAAC,YAAD;EACW;EACT,oBAAoB;EACpB,WAAW;YAEX,oBAAC,iBAAD;GAAiB,OAAO;GAAQ;EAA0B,CAAA;CAChD,CAAA;AAEhB;AAEA,aAAa,cAAc"}

package/dist/components/sortable/index.js

@@ -9,6 +9,6 @@ var sortable_exports = /* @__PURE__ */ __exportAll({
 	Root: () => SortableRoot
 });
 //#endregion
-export { sortable_exports };
+export { SortableHandle as Handle, SortableItem as Item, SortableRoot as Root, sortable_exports };
 
 //# sourceMappingURL=index.js.map

package/dist/components/spacer/Spacer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Spacer.js","names":[],"sources":["../../../src/components/spacer/Spacer.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\n/**\n * A flexible flex spacer that expands along the major axis of its containing flex layout.\n * It renders a `div` by default, and takes up any available space.\n */\nexport const Spacer = styled('div', {\n  base: ['flex-1', 'justify-self-stretch', 'self-stretch']\n})\n\nSpacer.displayName = 'Spacer'\n"],"mappings":";;;;;;AAMA,IAAa,SAAS,OAAO,OAAO,EAClC,MAAM;CAAC;CAAU;CAAwB;CAAe,EACzD,CAAC;AAEF,OAAO,cAAc"}
+{"version":3,"file":"Spacer.js","names":[],"sources":["../../../src/components/spacer/Spacer.tsx"],"sourcesContent":["import { styled } from '../../styled'\n\n/**\n * A flexible flex spacer that expands along the major axis of its containing flex layout.\n * It renders a `div` by default, and takes up any available space.\n */\nexport const Spacer = styled('div', {\n  base: ['flex-1', 'justify-self-stretch', 'self-stretch']\n})\n\nSpacer.displayName = 'Spacer'\n"],"mappings":";;;;;;AAMA,IAAa,SAAS,OAAO,OAAO,EAClC,MAAM;CAAC;CAAU;CAAwB;AAAc,EACzD,CAAC;AAED,OAAO,cAAc"}

package/dist/components/stepper/{stepper-context/StepperContext.d.ts → Stepper.context.d.ts}

@@ -1,4 +1,4 @@
 import * as React from 'react';
-import { Context, StepperProviderProps } from '../types';
+import type { Context, StepperProviderProps } from './types';
 export declare const StepperProvider: ({ children, stepCount, allowSkip, onComplete, onStepChange, direction, steps, hideLabels, showCompletedIcons }: React.PropsWithChildren<StepperProviderProps>) => React.JSX.Element;
 export declare const useStepper: () => Context;

package/dist/components/stepper/{stepper-context/StepperContext.js → Stepper.context.js}

@@ -1,6 +1,6 @@
 import * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/stepper/stepper-context/StepperContext.tsx
+//#region src/components/stepper/Stepper.context.tsx
 var StepperContext = React$1.createContext({
 	steps: [],
 	goToPreviousStep: () => null,
@@ -61,4 +61,4 @@ var useStepper = () => {
 //#endregion
 export { StepperProvider, useStepper };
 
-//# sourceMappingURL=StepperContext.js.map
+//# sourceMappingURL=Stepper.context.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.context.js","names":[],"sources":["../../../src/components/stepper/Stepper.context.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport type { Context, StepperProviderProps } from './types'\n\nconst StepperContext = React.createContext<Context>({\n  steps: [],\n  goToPreviousStep: () => null,\n  goToNextStep: () => null,\n  goToStep: () => null,\n  activeStep: 0,\n  viewedSteps: [],\n  allowSkip: false,\n  direction: 'horizontal',\n  hideLabels: false,\n  completedSteps: [],\n  showCompletedIcons: false\n})\n\nexport const StepperProvider = ({\n  children,\n  stepCount,\n  allowSkip,\n  onComplete,\n  onStepChange,\n  direction,\n  steps,\n  hideLabels,\n  showCompletedIcons\n}: React.PropsWithChildren<StepperProviderProps>) => {\n  const [activeStep, setActiveStep] = React.useState(0)\n\n  const [viewedSteps, setviewedSteps] = React.useState<number[]>([0])\n  const [completedSteps, setCompletedSteps] = React.useState<number[]>([])\n\n  const isControlled = !stepCount\n\n  React.useEffect(() => {\n    setviewedSteps((prev) =>\n      prev.includes(activeStep) ? prev : [...prev, activeStep]\n    )\n\n    onStepChange?.(activeStep)\n  }, [activeStep, onStepChange])\n\n  const goToNextStep = () => {\n    const isCompleted = onComplete && activeStep === stepCount - 1\n    const isNextStep = activeStep < stepCount - 1\n\n    if (onComplete || isNextStep) {\n      setCompletedSteps((prev) =>\n        prev.includes(activeStep) ? prev : [...prev, activeStep]\n      )\n    }\n\n    if (isCompleted) {\n      return onComplete?.()\n    }\n    if (isNextStep) {\n      return setActiveStep((current) => current + 1)\n    }\n  }\n\n  const goToPreviousStep = () => {\n    setActiveStep((current) => current - 1)\n  }\n\n  const goToStep = (index: number) => {\n    setActiveStep(index)\n  }\n\n  return (\n    <StepperContext.Provider\n      value={{\n        steps: steps || Array(stepCount).fill(''),\n        goToPreviousStep: isControlled ? undefined : goToPreviousStep,\n        goToNextStep: isControlled ? undefined : goToNextStep,\n        goToStep: isControlled ? undefined : goToStep,\n        activeStep,\n        viewedSteps,\n        completedSteps,\n        allowSkip,\n        direction,\n        hideLabels,\n        showCompletedIcons\n      }}\n    >\n      {children}\n    </StepperContext.Provider>\n  )\n}\n\nexport const useStepper = (): Context => {\n  const context = React.useContext(StepperContext)\n  if (!context)\n    throw new Error(\n      'Ensure that you wrap any components with the root component Stepper'\n    )\n\n  return context\n}\n"],"mappings":";;;AAIA,IAAM,iBAAiB,QAAM,cAAuB;CAClD,OAAO,CAAC;CACR,wBAAwB;CACxB,oBAAoB;CACpB,gBAAgB;CAChB,YAAY;CACZ,aAAa,CAAC;CACd,WAAW;CACX,WAAW;CACX,YAAY;CACZ,gBAAgB,CAAC;CACjB,oBAAoB;AACtB,CAAC;AAED,IAAa,mBAAmB,EAC9B,UACA,WACA,WACA,YACA,cACA,WACA,OACA,YACA,yBACmD;CACnD,MAAM,CAAC,YAAY,iBAAiB,QAAM,SAAS,CAAC;CAEpD,MAAM,CAAC,aAAa,kBAAkB,QAAM,SAAmB,CAAC,CAAC,CAAC;CAClE,MAAM,CAAC,gBAAgB,qBAAqB,QAAM,SAAmB,CAAC,CAAC;CAEvE,MAAM,eAAe,CAAC;CAEtB,QAAM,gBAAgB;EACpB,gBAAgB,SACd,KAAK,SAAS,UAAU,IAAI,OAAO,CAAC,GAAG,MAAM,UAAU,CACzD;EAEA,eAAe,UAAU;CAC3B,GAAG,CAAC,YAAY,YAAY,CAAC;CAE7B,MAAM,qBAAqB;EACzB,MAAM,cAAc,cAAc,eAAe,YAAY;EAC7D,MAAM,aAAa,aAAa,YAAY;EAE5C,IAAI,cAAc,YAChB,mBAAmB,SACjB,KAAK,SAAS,UAAU,IAAI,OAAO,CAAC,GAAG,MAAM,UAAU,CACzD;EAGF,IAAI,aACF,OAAO,aAAa;EAEtB,IAAI,YACF,OAAO,eAAe,YAAY,UAAU,CAAC;CAEjD;CAEA,MAAM,yBAAyB;EAC7B,eAAe,YAAY,UAAU,CAAC;CACxC;CAEA,MAAM,YAAY,UAAkB;EAClC,cAAc,KAAK;CACrB;CAEA,OACE,oBAAC,eAAe,UAAhB;EACE,OAAO;GACL,OAAO,SAAS,MAAM,SAAS,CAAC,CAAC,KAAK,EAAE;GACxC,kBAAkB,eAAe,KAAA,IAAY;GAC7C,cAAc,eAAe,KAAA,IAAY;GACzC,UAAU,eAAe,KAAA,IAAY;GACrC;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAEC;CACsB,CAAA;AAE7B;AAEA,IAAa,mBAA4B;CACvC,MAAM,UAAU,QAAM,WAAW,cAAc;CAC/C,IAAI,CAAC,SACH,MAAM,IAAI,MACR,qEACF;CAEF,OAAO;AACT"}

package/dist/components/stepper/Stepper.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { IStepperProps } from './types';
+import type { StepperProps } from './types';
 export declare const Stepper: {
-    ({ children, stepCount, allowSkip, onComplete, onStepChange, direction, steps, hideLabels, showCompletedIcons, className }: React.PropsWithChildren<IStepperProps>): React.JSX.Element;
+    ({ children, stepCount, allowSkip, onComplete, onStepChange, direction, steps, hideLabels, showCompletedIcons, className }: React.PropsWithChildren<StepperProps>): React.JSX.Element;
     displayName: string;
 } & {
-    StepBack: ({ label, children, ...rest }: import("./types").IStepperNavigateProps & React.ComponentProps<typeof import("..").Button>) => React.JSX.Element;
-    StepForward: ({ label, children, onClick, ...rest }: import("./types").IStepperNavigateProps & Partial<React.ComponentProps<typeof import("..").Button>>) => React.JSX.Element;
-    Steps: ({ className }: import("./types").IStepperStepsProps) => React.JSX.Element;
+    StepBack: ({ label, children, ...rest }: import("./types").StepperNavigateProps & React.ComponentProps<typeof import("..").Button>) => React.JSX.Element;
+    StepForward: ({ label, children, onClick, ...rest }: import("./types").StepperNavigateProps & Partial<React.ComponentProps<typeof import("..").Button>>) => React.JSX.Element;
+    Steps: ({ className }: import("./types").StepperStepsProps) => React.JSX.Element;
 };

package/dist/components/stepper/Stepper.js

@@ -1,5 +1,5 @@
 import { cn } from "../../styled.js";
-import { StepperProvider } from "./stepper-context/StepperContext.js";
+import { StepperProvider } from "./Stepper.context.js";
 import { StepperStepBack } from "./StepperStepBack.js";
 import { StepperStepForward } from "./StepperStepForward.js";
 import { StepperSteps } from "./StepperSteps.js";

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

@@ -1 +1 @@
-{"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,oBAAC,iBAAD;EACE,WAAW;EACA;EACC;EACZ,cAAc,YAAY,eAAe,KAAA;EAC9B;EACX,OAAO,SAAS,MAAM,MAAM,CAAC,KAAK,GAAG;EACzB;EACQ;YAEpB,oBAAC,OAAD;GAAK,cAAW;GAAW,WAAW,GAAG,UAAU,UAAU;GAC1D;GACG,CAAA;EACU,CAAA;;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'\nimport { StepperProvider } from './Stepper.context'\nimport { StepperStepBack } from './StepperStepBack'\nimport { StepperStepForward } from './StepperStepForward'\nimport { StepperSteps } from './StepperSteps'\nimport type { StepperProps } 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<StepperProps>) => {\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":";;;;;;;;;AAUA,IAAM,oBAAoB,EACxB,UACA,WACA,WACA,YACA,cACA,YAAY,cACZ,OACA,aAAa,OACb,qBAAqB,OACrB,gBAC2C;CAC3C,UACE,EAAE,aAAa,QACf,6IACF;CAEA,MAAM,QAAQ,OAAO,UAAU,aAAa;CAE5C,OACE,oBAAC,iBAAD;EACE,WAAW;EACA;EACC;EACZ,cAAc,YAAY,eAAe,KAAA;EAC9B;EACX,OAAO,SAAS,MAAM,KAAK,CAAC,CAAC,KAAK,EAAE;EACxB;EACQ;YAEpB,oBAAC,OAAD;GAAK,cAAW;GAAW,WAAW,GAAG,UAAU,SAAS;GACzD;EACE,CAAA;CACU,CAAA;AAErB;AAEA,IAAa,UAAU,OAAO,OAAO,kBAAkB;CACrD,UAAU;CACV,aAAa;CACb,OAAO;AACT,CAAC;AAED,iBAAiB,cAAc"}

package/dist/components/stepper/StepperStepBack.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { Button } from '../button/Button';
-import { IStepperNavigateProps } from './types';
-export declare const StepperStepBack: ({ label, children, ...rest }: IStepperNavigateProps & React.ComponentProps<typeof Button>) => React.JSX.Element;
+import type { StepperNavigateProps } from './types';
+export declare const StepperStepBack: ({ label, children, ...rest }: StepperNavigateProps & React.ComponentProps<typeof Button>) => React.JSX.Element;

package/dist/components/stepper/StepperStepBack.js

@@ -1,5 +1,5 @@
 import { Button } from "../button/Button.js";
-import { useStepper } from "./stepper-context/StepperContext.js";
+import { useStepper } from "./Stepper.context.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/stepper/StepperStepBack.tsx

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

@@ -1 +1 @@
-{"version":3,"file":"StepperStepBack.js","names":[],"sources":["../../../src/components/stepper/StepperStepBack.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Button } from '../button/Button'\nimport { useStepper } from './stepper-context/StepperContext'\nimport { IStepperNavigateProps } from './types'\n\nexport const StepperStepBack = ({\n  label,\n  children,\n  ...rest\n}: IStepperNavigateProps & React.ComponentProps<typeof Button>) => {\n  const { activeStep, goToPreviousStep } = useStepper()\n  return (\n    <Button\n      size=\"sm\"\n      appearance=\"outline\"\n      {...rest}\n      disabled={activeStep === 0}\n      onClick={goToPreviousStep}\n    >\n      {children || label?.(activeStep)}\n    </Button>\n  )\n}\n"],"mappings":";;;;;AAMA,IAAa,mBAAmB,EAC9B,OACA,UACA,GAAG,WAC8D;CACjE,MAAM,EAAE,YAAY,qBAAqB,YAAY;AACrD,QACE,oBAAC,QAAD;EACE,MAAK;EACL,YAAW;EACX,GAAI;EACJ,UAAU,eAAe;EACzB,SAAS;YAER,YAAY,QAAQ,WAAW;EACzB,CAAA"}
+{"version":3,"file":"StepperStepBack.js","names":[],"sources":["../../../src/components/stepper/StepperStepBack.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Button } from '../button/Button'\nimport { useStepper } from './Stepper.context'\nimport type { StepperNavigateProps } from './types'\n\nexport const StepperStepBack = ({\n  label,\n  children,\n  ...rest\n}: StepperNavigateProps & React.ComponentProps<typeof Button>) => {\n  const { activeStep, goToPreviousStep } = useStepper()\n  return (\n    <Button\n      size=\"sm\"\n      appearance=\"outline\"\n      {...rest}\n      disabled={activeStep === 0}\n      onClick={goToPreviousStep}\n    >\n      {children || label?.(activeStep)}\n    </Button>\n  )\n}\n"],"mappings":";;;;;AAMA,IAAa,mBAAmB,EAC9B,OACA,UACA,GAAG,WAC6D;CAChE,MAAM,EAAE,YAAY,qBAAqB,WAAW;CACpD,OACE,oBAAC,QAAD;EACE,MAAK;EACL,YAAW;EACX,GAAI;EACJ,UAAU,eAAe;EACzB,SAAS;YAER,YAAY,QAAQ,UAAU;CACzB,CAAA;AAEZ"}

package/dist/components/stepper/StepperStepBullet.d.ts

@@ -1,5 +1,5 @@
 export declare const StepperStepBullet: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "status"> & {
-    status?: "success" | "default" | "active" | "viewed" | "completed" | "reviewed" | undefined;
+    status?: "active" | "completed" | "default" | "reviewed" | "success" | "viewed" | undefined;
 } & {
     as?: import("react").ElementType;
 }>;