@atom-learning/components 6.17.0 → 8.0.0

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

@@ -1,20 +1,40 @@
 import { cn } from "../../styled.js";
 import { SkeletonLoader } from "./Skeleton.js";
 import { Tile } from "../tile/Tile.js";
-import React from "react";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/skeleton-loader/SkeletonColumnChart.tsx
 var getBarHeight = (groupIndex, columnIndex) => Math.round(90 + Math.abs(Math.sin(groupIndex + columnIndex + 1)) * 30);
-var ColumnGroup = ({ numberOfColumns, groupIndex }) => /* @__PURE__ */ React.createElement("div", { className: "flex flex-col items-center gap-4" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-end gap-2" }, Array.from({ length: numberOfColumns }, (_, i) => /* @__PURE__ */ React.createElement(SkeletonLoader, {
-	key: i,
-	className: "h-(--height) w-5 rounded-t-full rounded-b-none",
-	style: { "--height": `${getBarHeight(groupIndex, i)}px` }
-}))), /* @__PURE__ */ React.createElement(SkeletonLoader, { className: "h-2 w-14 rounded-full" }));
-var LegendItem = () => /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement(SkeletonLoader, { className: "h-3 w-3 rounded-full" }), /* @__PURE__ */ React.createElement(SkeletonLoader, { className: "h-3 w-24 rounded-full" }));
-var SkeletonColumnChart = ({ numberOfLabels = 2, numberOfGroups = 7, numberOfColumns = 1, className }) => /* @__PURE__ */ React.createElement(Tile, { className: cn("p-6", "flex-col", "gap-6", "w-full", className) }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-3" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-4" }, Array.from({ length: numberOfLabels }, (_, i) => /* @__PURE__ */ React.createElement(LegendItem, { key: i })))), /* @__PURE__ */ React.createElement("div", { className: "flex items-end justify-between gap-2" }, Array.from({ length: numberOfGroups }, (_, i) => /* @__PURE__ */ React.createElement(ColumnGroup, {
-	key: i,
-	numberOfColumns,
-	groupIndex: i
-}))));
+var ColumnGroup = ({ numberOfColumns, groupIndex }) => /* @__PURE__ */ jsxs("div", {
+	className: "flex flex-col items-center gap-4",
+	children: [/* @__PURE__ */ jsx("div", {
+		className: "flex items-end gap-2",
+		children: Array.from({ length: numberOfColumns }, (_, i) => /* @__PURE__ */ jsx(SkeletonLoader, {
+			className: "h-(--height) w-5 rounded-t-full rounded-b-none",
+			style: { "--height": `${getBarHeight(groupIndex, i)}px` }
+		}, i))
+	}), /* @__PURE__ */ jsx(SkeletonLoader, { className: "h-2 w-14 rounded-full" })]
+});
+var LegendItem = () => /* @__PURE__ */ jsxs("div", {
+	className: "flex items-center gap-2",
+	children: [/* @__PURE__ */ jsx(SkeletonLoader, { className: "h-3 w-3 rounded-full" }), /* @__PURE__ */ jsx(SkeletonLoader, { className: "h-3 w-24 rounded-full" })]
+});
+var SkeletonColumnChart = ({ numberOfLabels = 2, numberOfGroups = 7, numberOfColumns = 1, className }) => /* @__PURE__ */ jsxs(Tile, {
+	className: cn("p-6", "flex-col", "gap-6", "w-full", className),
+	children: [/* @__PURE__ */ jsx("div", {
+		className: "flex flex-col gap-3",
+		children: /* @__PURE__ */ jsx("div", {
+			className: "flex items-center gap-4",
+			children: Array.from({ length: numberOfLabels }, (_, i) => /* @__PURE__ */ jsx(LegendItem, {}, i))
+		})
+	}), /* @__PURE__ */ jsx("div", {
+		className: "flex items-end justify-between gap-2",
+		children: Array.from({ length: numberOfGroups }, (_, i) => /* @__PURE__ */ jsx(ColumnGroup, {
+			numberOfColumns,
+			groupIndex: i
+		}, i))
+	})]
+});
 //#endregion
 export { SkeletonColumnChart };
 

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

@@ -1 +1 @@
-{"version":3,"file":"SkeletonColumnChart.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonColumnChart.tsx"],"sourcesContent":["import React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { Tile } from '../tile/Tile'\nimport { SkeletonLoader } from './Skeleton'\n\nconst getBarHeight = (groupIndex: number, columnIndex: number) =>\n  Math.round(90 + Math.abs(Math.sin(groupIndex + columnIndex + 1)) * 30)\n\nconst ColumnGroup = ({\n  numberOfColumns,\n  groupIndex\n}: {\n  numberOfColumns: number\n  groupIndex: number\n}) => (\n  <div className=\"flex flex-col items-center gap-4\">\n    <div className=\"flex items-end gap-2\">\n      {Array.from({ length: numberOfColumns }, (_, i) => (\n        <SkeletonLoader\n          key={i}\n          className=\"h-(--height) w-5 rounded-t-full rounded-b-none\"\n          style={{\n            '--height': `${getBarHeight(groupIndex, i)}px`\n          }}\n        />\n      ))}\n    </div>\n    <SkeletonLoader className=\"h-2 w-14 rounded-full\" />\n  </div>\n)\n\nconst LegendItem = () => (\n  <div className=\"flex items-center gap-2\">\n    <SkeletonLoader className=\"h-3 w-3 rounded-full\" />\n    <SkeletonLoader className=\"h-3 w-24 rounded-full\" />\n  </div>\n)\n\nexport const SkeletonColumnChart = ({\n  numberOfLabels = 2,\n  numberOfGroups = 7,\n  numberOfColumns = 1,\n  className\n}: {\n  numberOfLabels?: number\n  numberOfGroups?: number\n  numberOfColumns?: number\n  className?: string\n}) => (\n  <Tile className={cn('p-6', 'flex-col', 'gap-6', 'w-full', className)}>\n    <div className=\"flex flex-col gap-3\">\n      <div className=\"flex items-center gap-4\">\n        {Array.from({ length: numberOfLabels }, (_, i) => (\n          <LegendItem key={i} />\n        ))}\n      </div>\n    </div>\n    <div className=\"flex items-end justify-between gap-2\">\n      {Array.from({ length: numberOfGroups }, (_, i) => (\n        <ColumnGroup key={i} numberOfColumns={numberOfColumns} groupIndex={i} />\n      ))}\n    </div>\n  </Tile>\n)\n"],"mappings":";;;;;AAOA,IAAM,gBAAgB,YAAoB,gBACxC,KAAK,MAAM,KAAK,KAAK,IAAI,KAAK,IAAI,aAAa,cAAc,EAAE,CAAC,GAAG,GAAG;AAExE,IAAM,eAAe,EACnB,iBACA,iBAKA,sBAAA,cAAC,OAAD,EAAK,WAAU,oCAaT,EAZJ,sBAAA,cAAC,OAAD,EAAK,WAAU,wBAUT,EATH,MAAM,KAAK,EAAE,QAAQ,iBAAiB,GAAG,GAAG,MAC3C,sBAAA,cAAC,gBAAD;CACE,KAAK;CACL,WAAU;CACV,OAAO,EACL,YAAY,GAAG,aAAa,YAAY,EAAE,CAAC,KAC5C;CACD,CAAA,CACF,CACE,EACN,sBAAA,cAAC,gBAAD,EAAgB,WAAU,yBAA0B,CAAA,CAChD;AAGR,IAAM,mBACJ,sBAAA,cAAC,OAAD,EAAK,WAAU,2BAGT,EAFJ,sBAAA,cAAC,gBAAD,EAAgB,WAAU,wBAAyB,CAAA,EACnD,sBAAA,cAAC,gBAAD,EAAgB,WAAU,yBAA0B,CAAA,CAChD;AAGR,IAAa,uBAAuB,EAClC,iBAAiB,GACjB,iBAAiB,GACjB,kBAAkB,GAClB,gBAOA,sBAAA,cAAC,MAAD,EAAM,WAAW,GAAG,OAAO,YAAY,SAAS,UAAU,UAAU,EAa7D,EAZL,sBAAA,cAAC,OAAD,EAAK,WAAU,uBAMT,EALJ,sBAAA,cAAC,OAAD,EAAK,WAAU,2BAIT,EAHH,MAAM,KAAK,EAAE,QAAQ,gBAAgB,GAAG,GAAG,MAC1C,sBAAA,cAAC,YAAD,EAAY,KAAK,GAAK,CAAA,CACtB,CACE,CACF,EACN,sBAAA,cAAC,OAAD,EAAK,WAAU,wCAIT,EAHH,MAAM,KAAK,EAAE,QAAQ,gBAAgB,GAAG,GAAG,MAC1C,sBAAA,cAAC,aAAD;CAAa,KAAK;CAAoB;CAAiB,YAAY;CAAK,CAAA,CACxE,CACE,CACD"}
+{"version":3,"file":"SkeletonColumnChart.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonColumnChart.tsx"],"sourcesContent":["import React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { Tile } from '../tile/Tile'\nimport { SkeletonLoader } from './Skeleton'\n\nconst getBarHeight = (groupIndex: number, columnIndex: number) =>\n  Math.round(90 + Math.abs(Math.sin(groupIndex + columnIndex + 1)) * 30)\n\nconst ColumnGroup = ({\n  numberOfColumns,\n  groupIndex\n}: {\n  numberOfColumns: number\n  groupIndex: number\n}) => (\n  <div className=\"flex flex-col items-center gap-4\">\n    <div className=\"flex items-end gap-2\">\n      {Array.from({ length: numberOfColumns }, (_, i) => (\n        <SkeletonLoader\n          key={i}\n          className=\"h-(--height) w-5 rounded-t-full rounded-b-none\"\n          style={{\n            '--height': `${getBarHeight(groupIndex, i)}px`\n          }}\n        />\n      ))}\n    </div>\n    <SkeletonLoader className=\"h-2 w-14 rounded-full\" />\n  </div>\n)\n\nconst LegendItem = () => (\n  <div className=\"flex items-center gap-2\">\n    <SkeletonLoader className=\"h-3 w-3 rounded-full\" />\n    <SkeletonLoader className=\"h-3 w-24 rounded-full\" />\n  </div>\n)\n\nexport const SkeletonColumnChart = ({\n  numberOfLabels = 2,\n  numberOfGroups = 7,\n  numberOfColumns = 1,\n  className\n}: {\n  numberOfLabels?: number\n  numberOfGroups?: number\n  numberOfColumns?: number\n  className?: string\n}) => (\n  <Tile className={cn('p-6', 'flex-col', 'gap-6', 'w-full', className)}>\n    <div className=\"flex flex-col gap-3\">\n      <div className=\"flex items-center gap-4\">\n        {Array.from({ length: numberOfLabels }, (_, i) => (\n          <LegendItem key={i} />\n        ))}\n      </div>\n    </div>\n    <div className=\"flex items-end justify-between gap-2\">\n      {Array.from({ length: numberOfGroups }, (_, i) => (\n        <ColumnGroup key={i} numberOfColumns={numberOfColumns} groupIndex={i} />\n      ))}\n    </div>\n  </Tile>\n)\n"],"mappings":";;;;;;AAOA,IAAM,gBAAgB,YAAoB,gBACxC,KAAK,MAAM,KAAK,KAAK,IAAI,KAAK,IAAI,aAAa,cAAc,EAAE,CAAC,GAAG,GAAG;AAExE,IAAM,eAAe,EACnB,iBACA,iBAKA,qBAAC,OAAD;CAAK,WAAU;WAAf,CACE,oBAAC,OAAD;EAAK,WAAU;YACZ,MAAM,KAAK,EAAE,QAAQ,iBAAiB,GAAG,GAAG,MAC3C,oBAAC,gBAAD;GAEE,WAAU;GACV,OAAO,EACL,YAAY,GAAG,aAAa,YAAY,EAAE,CAAC,KAC5C;GACD,EALK,EAKL,CACF;EACE,CAAA,EACN,oBAAC,gBAAD,EAAgB,WAAU,yBAA0B,CAAA,CAChD;;AAGR,IAAM,mBACJ,qBAAC,OAAD;CAAK,WAAU;WAAf,CACE,oBAAC,gBAAD,EAAgB,WAAU,wBAAyB,CAAA,EACnD,oBAAC,gBAAD,EAAgB,WAAU,yBAA0B,CAAA,CAChD;;AAGR,IAAa,uBAAuB,EAClC,iBAAiB,GACjB,iBAAiB,GACjB,kBAAkB,GAClB,gBAOA,qBAAC,MAAD;CAAM,WAAW,GAAG,OAAO,YAAY,SAAS,UAAU,UAAU;WAApE,CACE,oBAAC,OAAD;EAAK,WAAU;YACb,oBAAC,OAAD;GAAK,WAAU;aACZ,MAAM,KAAK,EAAE,QAAQ,gBAAgB,GAAG,GAAG,MAC1C,oBAAC,YAAD,EAAsB,EAAL,EAAK,CACtB;GACE,CAAA;EACF,CAAA,EACN,oBAAC,OAAD;EAAK,WAAU;YACZ,MAAM,KAAK,EAAE,QAAQ,gBAAgB,GAAG,GAAG,MAC1C,oBAAC,aAAD;GAAsC;GAAiB,YAAY;GAAK,EAAtD,EAAsD,CACxE;EACE,CAAA,CACD"}

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

@@ -1,6 +1,7 @@
 import { cn } from "../../styled.js";
 import { Tile } from "../tile/Tile.js";
-import React from "react";
+import "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/skeleton-loader/SkeletonDoughnutChart.tsx
 var buildConicGradient = () => {
 	const numberOfSegments = 5;
@@ -16,10 +17,14 @@ var buildConicGradient = () => {
 	});
 	return `conic-gradient(${stops.join(", ")})`;
 };
-var SkeletonDoughnutChart = ({ className }) => /* @__PURE__ */ React.createElement(Tile, { className: cn("p-6", "size-60", className) }, /* @__PURE__ */ React.createElement("div", {
-	className: "animate-shimmer aspect-square w-full rounded-full [background-image:var(--gradient)] bg-clip-padding",
-	style: { "--gradient": buildConicGradient() }
-}, /* @__PURE__ */ React.createElement("div", { className: "mt-[20%] ml-[20%] size-[60%] rounded-full bg-white" })));
+var SkeletonDoughnutChart = ({ className }) => /* @__PURE__ */ jsx(Tile, {
+	className: cn("p-6", "size-60", className),
+	children: /* @__PURE__ */ jsx("div", {
+		className: "animate-shimmer aspect-square w-full rounded-full [background-image:var(--gradient)] bg-clip-padding",
+		style: { "--gradient": buildConicGradient() },
+		children: /* @__PURE__ */ jsx("div", { className: "mt-[20%] ml-[20%] size-[60%] rounded-full bg-white" })
+	})
+});
 //#endregion
 export { SkeletonDoughnutChart };
 

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

@@ -1 +1 @@
-{"version":3,"file":"SkeletonDoughnutChart.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonDoughnutChart.tsx"],"sourcesContent":["import React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { Tile } from '../tile/Tile'\n\nconst buildConicGradient = () => {\n  const numberOfSegments = 5\n  const gap = 4\n  const segmentAngle = (360 - numberOfSegments * gap) / numberOfSegments\n  const stops: string[] = []\n  let current = 0\n\n  Array.from({ length: numberOfSegments }).forEach(() => {\n    stops.push(\n      `var(--color-grey-300) ${current}deg ${current + segmentAngle}deg`\n    )\n    current += segmentAngle\n    stops.push(`white ${current}deg ${current + gap}deg`)\n    current += gap\n  })\n\n  return `conic-gradient(${stops.join(', ')})`\n}\n\nexport const SkeletonDoughnutChart = ({\n  className\n}: {\n  className?: string\n}) => (\n  <Tile className={cn('p-6', 'size-60', className)}>\n    <div\n      className=\"animate-shimmer aspect-square w-full rounded-full [background-image:var(--gradient)] bg-clip-padding\"\n      style={{ '--gradient': buildConicGradient() }}\n    >\n      <div className=\"mt-[20%] ml-[20%] size-[60%] rounded-full bg-white\" />\n    </div>\n  </Tile>\n)\n"],"mappings":";;;;AAMA,IAAM,2BAA2B;CAC/B,MAAM,mBAAmB;CACzB,MAAM,MAAM;CACZ,MAAM,gBAAgB,MAAM,mBAAmB,OAAO;CACtD,MAAM,QAAkB,EAAE;CAC1B,IAAI,UAAU;AAEd,OAAM,KAAK,EAAE,QAAQ,kBAAkB,CAAC,CAAC,cAAc;AACrD,QAAM,KACJ,yBAAyB,QAAQ,MAAM,UAAU,aAAa,KAC/D;AACD,aAAW;AACX,QAAM,KAAK,SAAS,QAAQ,MAAM,UAAU,IAAI,KAAK;AACrD,aAAW;GACX;AAEF,QAAO,kBAAkB,MAAM,KAAK,KAAK,CAAC;;AAG5C,IAAa,yBAAyB,EACpC,gBAIA,sBAAA,cAAC,MAAD,EAAM,WAAW,GAAG,OAAO,WAAW,UAAU,EAOzC,EANL,sBAAA,cAAC,OAAD;CACE,WAAU;CACV,OAAO,EAAE,cAAc,oBAAoB,EAAE;CAGzC,EADJ,sBAAA,cAAC,OAAD,EAAK,WAAU,sDAAuD,CAAA,CAClE,CACD"}
+{"version":3,"file":"SkeletonDoughnutChart.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonDoughnutChart.tsx"],"sourcesContent":["import React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { Tile } from '../tile/Tile'\n\nconst buildConicGradient = () => {\n  const numberOfSegments = 5\n  const gap = 4\n  const segmentAngle = (360 - numberOfSegments * gap) / numberOfSegments\n  const stops: string[] = []\n  let current = 0\n\n  Array.from({ length: numberOfSegments }).forEach(() => {\n    stops.push(\n      `var(--color-grey-300) ${current}deg ${current + segmentAngle}deg`\n    )\n    current += segmentAngle\n    stops.push(`white ${current}deg ${current + gap}deg`)\n    current += gap\n  })\n\n  return `conic-gradient(${stops.join(', ')})`\n}\n\nexport const SkeletonDoughnutChart = ({\n  className\n}: {\n  className?: string\n}) => (\n  <Tile className={cn('p-6', 'size-60', className)}>\n    <div\n      className=\"animate-shimmer aspect-square w-full rounded-full [background-image:var(--gradient)] bg-clip-padding\"\n      style={{ '--gradient': buildConicGradient() }}\n    >\n      <div className=\"mt-[20%] ml-[20%] size-[60%] rounded-full bg-white\" />\n    </div>\n  </Tile>\n)\n"],"mappings":";;;;;AAMA,IAAM,2BAA2B;CAC/B,MAAM,mBAAmB;CACzB,MAAM,MAAM;CACZ,MAAM,gBAAgB,MAAM,mBAAmB,OAAO;CACtD,MAAM,QAAkB,EAAE;CAC1B,IAAI,UAAU;AAEd,OAAM,KAAK,EAAE,QAAQ,kBAAkB,CAAC,CAAC,cAAc;AACrD,QAAM,KACJ,yBAAyB,QAAQ,MAAM,UAAU,aAAa,KAC/D;AACD,aAAW;AACX,QAAM,KAAK,SAAS,QAAQ,MAAM,UAAU,IAAI,KAAK;AACrD,aAAW;GACX;AAEF,QAAO,kBAAkB,MAAM,KAAK,KAAK,CAAC;;AAG5C,IAAa,yBAAyB,EACpC,gBAIA,oBAAC,MAAD;CAAM,WAAW,GAAG,OAAO,WAAW,UAAU;WAC9C,oBAAC,OAAD;EACE,WAAU;EACV,OAAO,EAAE,cAAc,oBAAoB,EAAE;YAE7C,oBAAC,OAAD,EAAK,WAAU,sDAAuD,CAAA;EAClE,CAAA;CACD,CAAA"}

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

@@ -1,8 +1,9 @@
 import { cn } from "../../styled.js";
 import { SkeletonLoader } from "./Skeleton.js";
-import React from "react";
+import "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/skeleton-loader/SkeletonHeading.tsx
-var SkeletonHeading = ({ className }) => /* @__PURE__ */ React.createElement(SkeletonLoader, { className: cn("w-64", "h-6", "rounded-xl", className) });
+var SkeletonHeading = ({ className }) => /* @__PURE__ */ jsx(SkeletonLoader, { className: cn("w-64", "h-6", "rounded-xl", className) });
 //#endregion
 export { SkeletonHeading };
 

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

@@ -1 +1 @@
-{"version":3,"file":"SkeletonHeading.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonHeading.tsx"],"sourcesContent":["import React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { SkeletonLoader } from './Skeleton'\n\nexport const SkeletonHeading = ({\n  className\n}: {\n  className?: React.ComponentProps<typeof SkeletonLoader>['className']\n}) => <SkeletonLoader className={cn('w-64', 'h-6', 'rounded-xl', className)} />\n"],"mappings":";;;;AAMA,IAAa,mBAAmB,EAC9B,gBAGI,sBAAA,cAAC,gBAAD,EAAgB,WAAW,GAAG,QAAQ,OAAO,cAAc,UAAU,EAAI,CAAA"}
+{"version":3,"file":"SkeletonHeading.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonHeading.tsx"],"sourcesContent":["import React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { SkeletonLoader } from './Skeleton'\n\nexport const SkeletonHeading = ({\n  className\n}: {\n  className?: React.ComponentProps<typeof SkeletonLoader>['className']\n}) => <SkeletonLoader className={cn('w-64', 'h-6', 'rounded-xl', className)} />\n"],"mappings":";;;;;AAMA,IAAa,mBAAmB,EAC9B,gBAGI,oBAAC,gBAAD,EAAgB,WAAW,GAAG,QAAQ,OAAO,cAAc,UAAU,EAAI,CAAA"}

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

@@ -1,9 +1,23 @@
 import { cn } from "../../styled.js";
 import { SkeletonLoader } from "./Skeleton.js";
 import { Tile } from "../tile/Tile.js";
-import React from "react";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/skeleton-loader/SkeletonPanelList.tsx
-var SkeletonPanelList = ({ className }) => /* @__PURE__ */ React.createElement(Tile, { className: cn("px-6", "flex-col", "w-full", className) }, /* @__PURE__ */ React.createElement("div", { className: "border-grey-100 flex flex-wrap items-center gap-4 border-b py-4 last:border-b-0" }, /* @__PURE__ */ React.createElement(SkeletonLoader, { className: "size-10 rounded-full" }), /* @__PURE__ */ React.createElement("div", { className: "grow" }, /* @__PURE__ */ React.createElement(SkeletonLoader, { className: "h-4 w-2/3 rounded-full" })), /* @__PURE__ */ React.createElement(SkeletonLoader, { className: "h-8 w-28 rounded-md" })));
+var SkeletonPanelList = ({ className }) => /* @__PURE__ */ jsx(Tile, {
+	className: cn("px-6", "flex-col", "w-full", className),
+	children: /* @__PURE__ */ jsxs("div", {
+		className: "border-grey-100 flex flex-wrap items-center gap-4 border-b py-4 last:border-b-0",
+		children: [
+			/* @__PURE__ */ jsx(SkeletonLoader, { className: "size-10 rounded-full" }),
+			/* @__PURE__ */ jsx("div", {
+				className: "grow",
+				children: /* @__PURE__ */ jsx(SkeletonLoader, { className: "h-4 w-2/3 rounded-full" })
+			}),
+			/* @__PURE__ */ jsx(SkeletonLoader, { className: "h-8 w-28 rounded-md" })
+		]
+	})
+});
 //#endregion
 export { SkeletonPanelList };
 

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

@@ -1 +1 @@
-{"version":3,"file":"SkeletonPanelList.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonPanelList.tsx"],"sourcesContent":["import React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { Tile } from '../tile/Tile'\nimport { SkeletonLoader } from './Skeleton'\n\nexport const SkeletonPanelList = ({ className }: { className?: string }) => (\n  <Tile className={cn('px-6', 'flex-col', 'w-full', className)}>\n    <div className=\"border-grey-100 flex flex-wrap items-center gap-4 border-b py-4 last:border-b-0\">\n      <SkeletonLoader className=\"size-10 rounded-full\" />\n      <div className=\"grow\">\n        <SkeletonLoader className=\"h-4 w-2/3 rounded-full\" />\n      </div>\n      <SkeletonLoader className=\"h-8 w-28 rounded-md\" />\n    </div>\n  </Tile>\n)\n"],"mappings":";;;;;AAOA,IAAa,qBAAqB,EAAE,gBAClC,sBAAA,cAAC,MAAD,EAAM,WAAW,GAAG,QAAQ,YAAY,UAAU,UAAU,EAQrD,EAPL,sBAAA,cAAC,OAAD,EAAK,WAAU,mFAMT,EALJ,sBAAA,cAAC,gBAAD,EAAgB,WAAU,wBAAyB,CAAA,EACnD,sBAAA,cAAC,OAAD,EAAK,WAAU,QAET,EADJ,sBAAA,cAAC,gBAAD,EAAgB,WAAU,0BAA2B,CAAA,CACjD,EACN,sBAAA,cAAC,gBAAD,EAAgB,WAAU,uBAAwB,CAAA,CAC9C,CACD"}
+{"version":3,"file":"SkeletonPanelList.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonPanelList.tsx"],"sourcesContent":["import React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { Tile } from '../tile/Tile'\nimport { SkeletonLoader } from './Skeleton'\n\nexport const SkeletonPanelList = ({ className }: { className?: string }) => (\n  <Tile className={cn('px-6', 'flex-col', 'w-full', className)}>\n    <div className=\"border-grey-100 flex flex-wrap items-center gap-4 border-b py-4 last:border-b-0\">\n      <SkeletonLoader className=\"size-10 rounded-full\" />\n      <div className=\"grow\">\n        <SkeletonLoader className=\"h-4 w-2/3 rounded-full\" />\n      </div>\n      <SkeletonLoader className=\"h-8 w-28 rounded-md\" />\n    </div>\n  </Tile>\n)\n"],"mappings":";;;;;;AAOA,IAAa,qBAAqB,EAAE,gBAClC,oBAAC,MAAD;CAAM,WAAW,GAAG,QAAQ,YAAY,UAAU,UAAU;WAC1D,qBAAC,OAAD;EAAK,WAAU;YAAf;GACE,oBAAC,gBAAD,EAAgB,WAAU,wBAAyB,CAAA;GACnD,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,gBAAD,EAAgB,WAAU,0BAA2B,CAAA;IACjD,CAAA;GACN,oBAAC,gBAAD,EAAgB,WAAU,uBAAwB,CAAA;GAC9C;;CACD,CAAA"}

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

@@ -1,9 +1,13 @@
 import { cn } from "../../styled.js";
 import { SkeletonLoader } from "./Skeleton.js";
 import { Tile } from "../tile/Tile.js";
-import React from "react";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/skeleton-loader/SkeletonSubjectList.tsx
-var SkeletonSubjectList = ({ className }) => /* @__PURE__ */ React.createElement(Tile, { className: cn("p-2", "flex-row", "flex-wrap", "items-center", "justify-between", "gap-4", "w-full", className) }, /* @__PURE__ */ React.createElement(SkeletonLoader, { className: "h-22 max-w-xl grow rounded-xl" }), /* @__PURE__ */ React.createElement(SkeletonLoader, { className: "size-10 shrink-0 rounded-md" }));
+var SkeletonSubjectList = ({ className }) => /* @__PURE__ */ jsxs(Tile, {
+	className: cn("p-2", "flex-row", "flex-wrap", "items-center", "justify-between", "gap-4", "w-full", className),
+	children: [/* @__PURE__ */ jsx(SkeletonLoader, { className: "h-22 max-w-xl grow rounded-xl" }), /* @__PURE__ */ jsx(SkeletonLoader, { className: "size-10 shrink-0 rounded-md" })]
+});
 //#endregion
 export { SkeletonSubjectList };
 

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,sBAAA,cAAC,MAAD,EACE,WAAW,GACT,OACA,YACA,aACA,gBACA,mBACA,SACA,UACA,UACD,EAII,EAFL,sBAAA,cAAC,gBAAD,EAAgB,WAAU,iCAAkC,CAAA,EAC5D,sBAAA,cAAC,gBAAD,EAAgB,WAAU,+BAAgC,CAAA,CACrD"}
+{"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"}

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

@@ -2,19 +2,32 @@ import { cn } from "../../styled.js";
 import { Table } from "../table/Table.js";
 import { SkeletonLoader } from "./Skeleton.js";
 import { Tile } from "../tile/Tile.js";
-import React from "react";
+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__ */ React.createElement(Tile, { className: cn("p-6", "flex-row", "gap-4", "relative", className) }, /* @__PURE__ */ React.createElement(Table, { size: "md" }, /* @__PURE__ */ React.createElement(Table.Header, { theme: "white" }, Array.from({ length: numberOfColumns }, (_, index) => index).map((columnIndex) => /* @__PURE__ */ React.createElement(Table.HeaderCell, { key: columnIndex }, /* @__PURE__ */ React.createElement(SkeletonLoader, {
-		style: { "--width": columnWidth?.[columnIndex] || "100px" },
-		className: "h-4 w-(--width) rounded-xl"
-	})))), /* @__PURE__ */ React.createElement(Table.Body, { striped: false }, Array.from({ length: numberOfRows }, (_, index) => index).map((rowIndex) => /* @__PURE__ */ React.createElement(Table.Row, { key: rowIndex }, Array.from({ length: numberOfColumns }, (_, index) => index).map((columnIndex) => /* @__PURE__ */ React.createElement(Table.Cell, {
-		key: columnIndex,
-		className: "border-none"
-	}, /* @__PURE__ */ React.createElement(SkeletonLoader, {
-		style: { "--width": columnWidth?.[columnIndex] || "100px" },
-		className: "bg-grey-200 h-4 w-(--width) rounded-xl"
-	}))))))));
+	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, {
+					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))
+			})]
+		})
+	});
 };
 //#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,sBAAA,cAAC,MAAD,EAAM,WAAW,GAAG,OAAO,YAAY,SAAS,YAAY,UAAU,EAoC/D,EAnCL,sBAAA,cAAC,OAAD,EAAO,MAAK,MAkCJ,EAjCN,sBAAA,cAAC,MAAM,QAAP,EAAc,OAAM,SAWL,EAVZ,MAAM,KAAK,EAAE,QAAQ,iBAAiB,GAAG,GAAG,UAAU,MAAM,CAAC,KAC3D,gBACC,sBAAA,cAAC,MAAM,YAAP,EAAkB,KAAK,aAKJ,EAJjB,sBAAA,cAAC,gBAAD;EACE,OAAO,EAAE,WAAW,cAAc,gBAAgB,SAAS;EAC3D,WAAU;EACV,CAAA,CACe,CAEtB,CACY,EACf,sBAAA,cAAC,MAAM,MAAP,EAAY,SAAS,OAoBR,EAnBV,MAAM,KAAK,EAAE,QAAQ,cAAc,GAAG,GAAG,UAAU,MAAM,CAAC,KACxD,aACC,sBAAA,cAAC,MAAM,KAAP,EAAW,KAAK,UAcJ,EAbT,MAAM,KACL,EAAE,QAAQ,iBAAiB,GAC1B,GAAG,UAAU,MACf,CAAC,KAAK,gBACL,sBAAA,cAAC,MAAM,MAAP;EAAY,KAAK;EAAa,WAAU;EAO3B,EANX,sBAAA,cAAC,gBAAD;EACE,OAAO,EACL,WAAW,cAAc,gBAAgB,SAC1C;EACD,WAAU;EACV,CAAA,CACS,CACb,CACQ,CAEf,CACU,CACP,CACH"}
+{"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"}

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

@@ -1,12 +1,13 @@
 import { cn } from "../../styled.js";
 import { SkeletonLoader } from "./Skeleton.js";
 import { Tile } from "../tile/Tile.js";
-import React from "react";
+import "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/skeleton-loader/SkeletonTabs.tsx
-var SkeletonTabs = ({ numberOfTabs, className, tabClassName }) => /* @__PURE__ */ React.createElement(Tile, { className: cn("p-6", "flex-row", "gap-4", className) }, Array.from({ length: numberOfTabs }, (_, index) => `tab_${index}`).map((key) => /* @__PURE__ */ React.createElement(SkeletonLoader, {
-	key,
-	className: cn("w-32", "h-6", "rounded-sm", tabClassName)
-})));
+var SkeletonTabs = ({ numberOfTabs, className, tabClassName }) => /* @__PURE__ */ jsx(Tile, {
+	className: cn("p-6", "flex-row", "gap-4", className),
+	children: Array.from({ length: numberOfTabs }, (_, index) => `tab_${index}`).map((key) => /* @__PURE__ */ jsx(SkeletonLoader, { className: cn("w-32", "h-6", "rounded-sm", tabClassName) }, key))
+});
 //#endregion
 export { SkeletonTabs };
 

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,sBAAA,cAAC,MAAD,EAAM,WAAW,GAAG,OAAO,YAAY,SAAS,UAAU,EASnD,EARJ,MAAM,KAAK,EAAE,QAAQ,cAAc,GAAG,GAAG,UAAU,OAAO,QAAQ,CAAC,KACjE,QACC,sBAAA,cAAC,gBAAD;CACO;CACL,WAAW,GAAG,QAAQ,OAAO,cAAc,aAAa;CACxD,CAAA,CAEL,CACI"}
+{"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"}

package/dist/components/slider/Slider.d.ts

@@ -1,12 +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: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-slider").SliderTrackProps & React.RefAttributes<HTMLSpanElement>, "ref"> & {
+    ref?: ((instance: HTMLSpanElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLSpanElement> | null | undefined;
+}, "theme"> & {
     theme?: "light" | "tonal" | undefined;
 } & {
     as?: React.ElementType;
 }>;
-declare const StyledSlider: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-slider").SliderProps & React.RefAttributes<HTMLSpanElement>, never> & {
+declare const StyledSlider: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-slider").SliderProps & React.RefAttributes<HTMLSpanElement>, "ref"> & {
+    ref?: ((instance: HTMLSpanElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLSpanElement> | null | undefined;
+}, never> & {
     as?: React.ElementType;
 }>;
 export type SliderProps = React.ComponentProps<typeof StyledSlider> & Pick<React.ComponentProps<typeof StyledTrack>, 'theme'>;

package/dist/components/slider/Slider.js

@@ -3,6 +3,7 @@ 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 { jsx, jsxs } from "react/jsx-runtime";
 import { Range, Root, Thumb, Track } from "@radix-ui/react-slider";
 //#region src/components/slider/Slider.tsx
 var StyledTrack = styled(Track, {
@@ -54,14 +55,21 @@ var StyledThumb = styled(Thumb, { base: [
 ] });
 var Slider = React$1.forwardRef(({ value, defaultValue, min = 0, max = 100, theme = "tonal", className, children, ...remainingProps }, ref) => {
 	const values = value || defaultValue;
-	return /* @__PURE__ */ React$1.createElement(CSSWrapper, { className }, /* @__PURE__ */ React$1.createElement(StyledSlider, {
-		defaultValue,
-		value,
-		min,
-		max,
-		ref,
-		...remainingProps
-	}, /* @__PURE__ */ React$1.createElement(StyledTrack, { theme }, /* @__PURE__ */ React$1.createElement(StyledRange, null)), values?.length && values.map((_, i) => /* @__PURE__ */ React$1.createElement(StyledThumb, { key: `thumb${i}` }))), children);
+	return /* @__PURE__ */ jsxs(CSSWrapper, {
+		className,
+		children: [/* @__PURE__ */ jsxs(StyledSlider, {
+			defaultValue,
+			value,
+			min,
+			max,
+			ref,
+			...remainingProps,
+			children: [/* @__PURE__ */ jsx(StyledTrack, {
+				theme,
+				children: /* @__PURE__ */ jsx(StyledRange, {})
+			}), values?.length && values.map((_, i) => /* @__PURE__ */ jsx(StyledThumb, {}, `thumb${i}`))]
+		}), children]
+	});
 });
 Slider.Value = SliderValue;
 Slider.Steps = SliderSteps;

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,wBAAA,cAAC,YAAD,EAAuB,WAgBV,EAfX,wBAAA,cAAC,cAAD;EACgB;EACP;EACF;EACA;EACA;EACL,GAAI;EAOS,EALb,wBAAA,cAAC,aAAD,EAAoB,OAEN,EADZ,wBAAA,cAAC,aAAA,KAAc,CACH,EACb,QAAQ,UACP,OAAO,KAAK,GAAG,MAAM,wBAAA,cAAC,aAAD,EAAa,KAAK,QAAQ,KAAO,CAAA,CAAC,CAC5C,EACd,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'\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"}

package/dist/components/slider/SliderSteps.js

@@ -1,5 +1,6 @@
 import { Text } from "../text/Text.js";
-import * as React$1 from "react";
+import "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/slider/SliderSteps.tsx
 var getPercentValue = (value, min, max) => {
 	return (value - min) / (max - min) * 100;
@@ -12,15 +13,18 @@ var getTransformValue = (value, min, max) => {
 };
 var SliderSteps = ({ min, max, steps = [] }) => {
 	if (steps.length === 0) return null;
-	return /* @__PURE__ */ React$1.createElement("div", { className: "relative mt-3 h-3 w-full" }, steps.map((step) => /* @__PURE__ */ React$1.createElement(Text, {
-		as: "span",
-		key: step.value,
-		style: {
-			"--left": `${getPercentValue(step.value, min, max)}%`,
-			"--translate-x": `-${getTransformValue(step.value, min, max)}%`
-		},
-		className: "text-grey-700 absolute left-(--left) translate-x-(--translate-x)"
-	}, step.label)));
+	return /* @__PURE__ */ jsx("div", {
+		className: "relative mt-3 h-3 w-full",
+		children: steps.map((step) => /* @__PURE__ */ jsx(Text, {
+			as: "span",
+			style: {
+				"--left": `${getPercentValue(step.value, min, max)}%`,
+				"--translate-x": `-${getTransformValue(step.value, min, max)}%`
+			},
+			className: "text-grey-700 absolute left-(--left) translate-x-(--translate-x)",
+			children: step.label
+		}, step.value))
+	});
 };
 //#endregion
 export { SliderSteps };

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,wBAAA,cAAC,OAAD,EAAK,WAAU,4BAcT,EAbH,MAAM,KAAK,SACV,wBAAA,cAAC,MAAD;EACE,IAAG;EACH,KAAK,KAAK;EACV,OAAO;GACL,UAAU,GAAG,gBAAgB,KAAK,OAAO,KAAK,IAAI,CAAC;GACnD,iBAAiB,IAAI,kBAAkB,KAAK,OAAO,KAAK,IAAI,CAAC;GAC9D;EACD,WAAU;EAGL,EADJ,KAAK,MACD,CACP,CACE"}
+{"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"}

package/dist/components/slider/SliderValue.js

@@ -1,8 +1,12 @@
 import { Text } from "../text/Text.js";
-import * as React$1 from "react";
+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__ */ React$1.createElement(Text, { className: "text-grey-700 mt-4 w-full" }, outputLabel(value.length === 1 ? value[0] : value));
+	return /* @__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,wBAAA,cAAC,MAAD,EAAM,WAAU,6BAET,EADJ,YAAY,MAAM,WAAW,IAAI,MAAM,KAAK,MAAM,CAC9C"}
+{"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"}

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

@@ -1,6 +1,7 @@
 import { FieldWrapper } from "../field-wrapper/FieldWrapper.js";
 import { Slider } from "../slider/Slider.js";
 import React 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 }) => {
@@ -14,27 +15,29 @@ var SliderField = ({ className, hideLabel, label, name, defaultValue, value, val
 	React.useEffect(() => {
 		if (value?.length) onChange(value);
 	}, [JSON.stringify(value)]);
-	return /* @__PURE__ */ React.createElement(FieldWrapper, {
+	return /* @__PURE__ */ jsx(FieldWrapper, {
 		className,
 		fieldId: name,
 		label,
-		hideLabel
-	}, /* @__PURE__ */ React.createElement(Slider, {
-		ref,
-		name: innerName,
-		onValueChange: onChange,
-		value: innerValue,
-		min,
-		max,
-		...remainingProps
-	}, /* @__PURE__ */ React.createElement(Slider.Steps, {
-		min,
-		max,
-		steps
-	}), /* @__PURE__ */ React.createElement(Slider.Value, {
-		value: innerValue,
-		outputLabel
-	})));
+		hideLabel,
+		children: /* @__PURE__ */ jsxs(Slider, {
+			ref,
+			name: innerName,
+			onValueChange: onChange,
+			value: innerValue,
+			min,
+			max,
+			...remainingProps,
+			children: [/* @__PURE__ */ jsx(Slider.Steps, {
+				min,
+				max,
+				steps
+			}), /* @__PURE__ */ jsx(Slider.Value, {
+				value: innerValue,
+				outputLabel
+			})]
+		})
+	});
 };
 SliderField.displayName = "SliderField";
 //#endregion

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,sBAAA,cAAC,cAAD;EACa;EACX,SAAS;EACF;EACI;EAeE,EAbb,sBAAA,cAAC,QAAD;EACO;EACL,MAAM;EACN,eAAe;EACf,OAAO;EACF;EACA;EACL,GAAI;EAKG,EAHP,sBAAA,cAAC,OAAO,OAAR;EAAmB;EAAU;EAAY;EAAS,CAAA,EAElD,sBAAA,cAAC,OAAO,OAAR;EAAc,OAAO;EAAyB;EAAe,CAAA,CACtD,CACI;;AAInB,YAAY,cAAc"}
+{"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"}

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Icon } from '../icon/Icon';
-export declare const StyledHandle: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
+export declare const StyledHandle: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLButtonElement> | null | undefined;
 }, "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;
@@ -12,7 +12,9 @@ export declare const StyledHandle: React.ForwardRefExoticComponent<Omit<Omit<Omi
 }, "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("../..").TOptionalTooltipWrapperProps, "label"> & import("../..").NavigatorActions, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLButtonElement> | null | undefined;
+}, "isDragging"> & {
     isDragging?: boolean | undefined;
 } & {
     as?: React.ElementType;

package/dist/components/sortable/Handle.js

@@ -2,6 +2,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 { jsx } from "react/jsx-runtime";
 import { DragHandle } from "@atom-learning/icons";
 //#region src/components/sortable/Handle.tsx
 var StyledHandle = styled(ActionIcon, {
@@ -18,14 +19,15 @@ var StyledHandle = styled(ActionIcon, {
 	} }
 });
 var Handle = React$1.forwardRef(({ isDragging, size, ...rest }, ref) => {
-	return /* @__PURE__ */ React$1.createElement(StyledHandle, {
+	return /* @__PURE__ */ jsx(StyledHandle, {
 		ref,
 		isDragging,
 		appearance: "simple",
 		hasTooltip: false,
 		size,
-		...rest
-	}, /* @__PURE__ */ React$1.createElement(Icon, { is: DragHandle }));
+		...rest,
+		children: /* @__PURE__ */ jsx(Icon, { is: DragHandle })
+	});
 });
 Handle.displayName = "Handle";
 //#endregion

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,wBAAA,cAAC,cAAD;EACO;EACO;EACZ,YAAW;EACX,YAAY;EACN;EACN,GAAI;EAGS,EADb,wBAAA,cAAC,MAAD,EAAM,IAAI,YAAc,CAAA,CACX;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'\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"}