@atom-learning/components 8.0.2 → 9.0.0-beta.0

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.d.ts

@@ -1,18 +1,16 @@
 import * as React from 'react';
-import { SliderSteps } from './SliderSteps';
-import { SliderValue } from './SliderValue';
-declare const StyledTrack: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-slider").SliderTrackProps & React.RefAttributes<HTMLSpanElement>, "theme"> & {
+declare const StyledTrack: import("../..").PolymorphicComponent<React.ForwardRefExoticComponent<import("@radix-ui/react-slider").SliderTrackProps & React.RefAttributes<HTMLSpanElement>>, {
     theme?: "light" | "tonal" | undefined;
-} & {
-    as?: React.ElementType;
-}>;
-declare const StyledSlider: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-slider").SliderProps & React.RefAttributes<HTMLSpanElement>, never> & {
-    as?: React.ElementType;
 }>;
+declare const StyledSlider: import("../..").PolymorphicComponent<React.ForwardRefExoticComponent<import("@radix-ui/react-slider").SliderProps & React.RefAttributes<HTMLSpanElement>>, unknown>;
 export type SliderProps = React.ComponentProps<typeof StyledSlider> & Pick<React.ComponentProps<typeof StyledTrack>, 'theme'>;
-type SliderType = ReturnType<typeof React.forwardRef<HTMLSpanElement, SliderProps>> & {
-    Value: typeof SliderValue;
-    Steps: typeof SliderSteps;
+export declare const Slider: (({ ref, value, defaultValue, min, max, theme, className, children, ...rest }: SliderProps) => React.JSX.Element) & {
+    Value: ({ value, outputLabel }: import("./SliderValue").SliderValueType & {
+        value?: number[];
+    }) => React.JSX.Element;
+    Steps: ({ min, max, steps }: {
+        min: number;
+        max: number;
+    } & import("./SliderSteps").SliderStepsType) => React.JSX.Element | null;
 };
-export declare const Slider: SliderType;
 export {};

package/dist/components/slider/Slider.js

@@ -2,7 +2,7 @@ import { styled } from "../../styled.js";
 import { CSSWrapper } from "../../utilities/css-wrapper/CSSWrapper.js";
 import { SliderSteps } from "./SliderSteps.js";
 import { SliderValue } from "./SliderValue.js";
-import * as React$1 from "react";
+import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Range, Root, Thumb, Track } from "@radix-ui/react-slider";
 //#region src/components/slider/Slider.tsx
@@ -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 SliderComponent = ({ ref, value, defaultValue, min = 0, max = 100, theme = "tonal", className, children, ...rest }) => {
 	const values = value || defaultValue;
 	return /* @__PURE__ */ jsxs(CSSWrapper, {
 		className,
@@ -63,17 +63,18 @@ 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, {})
 			}), values?.length && values.map((_, i) => /* @__PURE__ */ jsx(StyledThumb, {}, `thumb${i}`))]
 		}), children]
 	});
+};
+var Slider = /* @__PURE__ */ Object.assign(SliderComponent, {
+	Value: SliderValue,
+	Steps: SliderSteps
 });
-Slider.Value = SliderValue;
-Slider.Steps = SliderSteps;
-Slider.displayName = "Slider";
 //#endregion
 export { Slider };
 

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\nconst SliderComponent = ({\n  ref,\n  value,\n  defaultValue,\n  min = 0,\n  max = 100,\n  theme = 'tonal',\n  className,\n  children,\n  ...rest\n}: SliderProps) => {\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\nexport const Slider = /* @__PURE__ */ Object.assign(SliderComponent, {\n  Value: SliderValue,\n  Steps: SliderSteps\n})\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;AAKD,IAAM,mBAAmB,EACvB,KACA,OACA,cACA,MAAM,GACN,MAAM,KACN,QAAQ,SACR,WACA,UACA,GAAG,WACc;CACjB,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;AAEA,IAAa,SAAyB,uBAAO,OAAO,iBAAiB;CACnE,OAAO;CACP,OAAO;AACT,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,20 @@
 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: import("../..").PolymorphicComponent<({ ref, children, theme, appearance, size, label, href, disabled, hasTooltip, tooltipSide, ...rest }: Omit<{
+    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?: never;
+} & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "appearance" | "as" | "isRounded" | "size" | "theme">, "as" | "children" | "hasTooltip" | "label" | "tooltipSide" | keyof import("../..").NavigatorActions> & {
     as?: React.ElementType;
-}, "children" | "label" | "hasTooltip" | "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) => React.JSX.Element, {
     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' | 'size'> & {
+    size?: React.ComponentProps<typeof Icon>['size'];
+};
+export declare const Handle: ({ ref, isDragging, size, ...rest }: HandleProps) => React.JSX.Element;

package/dist/components/sortable/Handle.js

@@ -1,7 +1,7 @@
 import { styled } from "../../styled.js";
 import { Icon } from "../icon/Icon.js";
 import { ActionIcon } from "../action-icon/ActionIcon.js";
-import * as React$1 from "react";
+import "react";
 import { jsx } from "react/jsx-runtime";
 import { DragHandle } from "@atom-learning/icons";
 //#region src/components/sortable/Handle.tsx
@@ -18,19 +18,16 @@ 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 = ({ ref, isDragging, size, ...rest }) => /* @__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' | 'size'\n> & {\n  size?: React.ComponentProps<typeof Icon>['size']\n}\n\nexport const Handle = ({ ref, isDragging, size, ...rest }: HandleProps) => (\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"],"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;AASD,IAAa,UAAU,EAAE,KAAK,YAAY,MAAM,GAAG,WACjD,oBAAC,cAAD;CACO;CACO;CACZ,YAAW;CACX,YAAY;CACN;CACN,GAAI;WAEJ,oBAAC,MAAD,EAAM,IAAI,WAAa,CAAA;AACX,CAAA"}

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.d.ts

@@ -2,6 +2,4 @@
  * A flexible flex spacer that expands along the major axis of its containing flex layout.
  * It renders a `div` by default, and takes up any available space.
  */
-export declare const Spacer: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & {
-    as?: import("react").ElementType;
-}>;
+export declare const Spacer: import("../..").PolymorphicComponent<"div", unknown>;

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;
 };