@atom-learning/components 7.0.0 → 8.0.1

package/dist/components/side-bar/SideBarComponents.d.ts

@@ -1,34 +1,24 @@
 import * as React from 'react';
-export declare const SideBarHeader: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-}, never> & {
+export declare const SideBarHeader: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & {
     as?: React.ElementType;
 }>;
-export declare const SideBarBody: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-}, never> & {
+export declare const SideBarBody: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & {
     as?: React.ElementType;
 }>;
-export declare const SideBarFooter: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-}, never> & {
+export declare const SideBarFooter: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & {
     as?: React.ElementType;
 }>;
 export declare const SideBarBrand: React.ForwardRefExoticComponent<React.ComponentPropsWithRef<"a"> & {
     as?: React.ElementType;
 }>;
-export declare const SideBarBrandLogo: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref"> & {
-    ref?: ((instance: HTMLImageElement | null) => void) | React.RefObject<HTMLImageElement> | null | undefined;
-}, "fluid"> & {
+export declare const SideBarBrandLogo: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "fluid"> & {
     fluid?: boolean | undefined;
 } & {
     as?: React.ElementType;
 }, "as"> & {
     as?: never;
 }, "ref"> & React.RefAttributes<HTMLImageElement>>;
-export declare const SideBarBrandName: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
-    ref?: ((instance: HTMLParagraphElement | null) => void) | React.RefObject<HTMLParagraphElement> | null | undefined;
-}, "size" | "noCapsize" | "weight" | "family"> & {
+export declare const SideBarBrandName: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "size" | "noCapsize" | "weight" | "family"> & {
     size?: ("sm" | "md" | "lg" | "xs" | "xl" | "2xl" | "3xl" | "4xl" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs" | "xl" | "2xl" | "3xl" | "4xl">>) | undefined;
     noCapsize?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
     weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "bold" | "normal">>) | undefined;

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

@@ -1,5 +1,3 @@
-export declare const SkeletonLoader: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, never> & {
+export declare const SkeletonLoader: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & {
     as?: import("react").ElementType;
 }>;

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

@@ -1,20 +1,36 @@
 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/SkeletonBarChart.tsx
 var getBarWidth = (rowIndex) => Math.round(40 + Math.abs(Math.sin(rowIndex + 1)) * 55);
-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 SkeletonBarChart = ({ numberOfLabels = 3, numberOfRows = 4, numberOfTicks = 4, className }) => /* @__PURE__ */ React.createElement(Tile, { className: cn("p-6", "flex-col", "gap-6", "w-full", className) }, /* @__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 flex-col justify-between gap-4" }, Array.from({ length: numberOfRows }, (_, i) => /* @__PURE__ */ React.createElement("div", {
-	key: i,
-	className: "flex items-center gap-5"
-}, /* @__PURE__ */ React.createElement(SkeletonLoader, { className: "h-3 w-20 shrink-0 rounded-full" }), /* @__PURE__ */ React.createElement("div", { className: "grow" }, /* @__PURE__ */ React.createElement(SkeletonLoader, {
-	className: "h-5 w-(--width) rounded-full",
-	style: { "--width": `${getBarWidth(i)}%` }
-})))), /* @__PURE__ */ React.createElement("div", { className: "flex justify-between pl-24" }, Array.from({ length: numberOfTicks }, (_, i) => /* @__PURE__ */ React.createElement(SkeletonLoader, {
-	key: i,
-	className: "h-2 w-8 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 SkeletonBarChart = ({ numberOfLabels = 3, numberOfRows = 4, numberOfTicks = 4, className }) => /* @__PURE__ */ jsxs(Tile, {
+	className: cn("p-6", "flex-col", "gap-6", "w-full", className),
+	children: [/* @__PURE__ */ jsx("div", {
+		className: "flex items-center gap-4",
+		children: Array.from({ length: numberOfLabels }, (_, i) => /* @__PURE__ */ jsx(LegendItem, {}, i))
+	}), /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col justify-between gap-4",
+		children: [Array.from({ length: numberOfRows }, (_, i) => /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-5",
+			children: [/* @__PURE__ */ jsx(SkeletonLoader, { className: "h-3 w-20 shrink-0 rounded-full" }), /* @__PURE__ */ jsx("div", {
+				className: "grow",
+				children: /* @__PURE__ */ jsx(SkeletonLoader, {
+					className: "h-5 w-(--width) rounded-full",
+					style: { "--width": `${getBarWidth(i)}%` }
+				})
+			})]
+		}, i)), /* @__PURE__ */ jsx("div", {
+			className: "flex justify-between pl-24",
+			children: Array.from({ length: numberOfTicks }, (_, i) => /* @__PURE__ */ jsx(SkeletonLoader, { className: "h-2 w-8 rounded-full" }, i))
+		})]
+	})]
+});
 //#endregion
 export { SkeletonBarChart };
 

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

@@ -1 +1 @@
-{"version":3,"file":"SkeletonBarChart.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonBarChart.tsx"],"sourcesContent":["import React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { Tile } from '../tile/Tile'\nimport { SkeletonLoader } from './Skeleton'\n\nconst getBarWidth = (rowIndex: number) =>\n  Math.round(40 + Math.abs(Math.sin(rowIndex + 1)) * 55)\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 SkeletonBarChart = ({\n  numberOfLabels = 3,\n  numberOfRows = 4,\n  numberOfTicks = 4,\n  className\n}: {\n  numberOfLabels?: number\n  numberOfRows?: number\n  numberOfTicks?: number\n  className?: string\n}) => (\n  <Tile className={cn('p-6', 'flex-col', 'gap-6', 'w-full', className)}>\n    <div className=\"flex items-center gap-4\">\n      {Array.from({ length: numberOfLabels }, (_, i) => (\n        <LegendItem key={i} />\n      ))}\n    </div>\n    <div className=\"flex flex-col justify-between gap-4\">\n      {Array.from({ length: numberOfRows }, (_, i) => (\n        <div key={i} className=\"flex items-center gap-5\">\n          <SkeletonLoader className=\"h-3 w-20 shrink-0 rounded-full\" />\n          <div className=\"grow\">\n            <SkeletonLoader\n              className=\"h-5 w-(--width) rounded-full\"\n              style={{\n                '--width': `${getBarWidth(i)}%`\n              }}\n            />\n          </div>\n        </div>\n      ))}\n      <div className=\"flex justify-between pl-24\">\n        {Array.from({ length: numberOfTicks }, (_, i) => (\n          <SkeletonLoader key={i} className=\"h-2 w-8 rounded-full\" />\n        ))}\n      </div>\n    </div>\n  </Tile>\n)\n"],"mappings":";;;;;AAOA,IAAM,eAAe,aACnB,KAAK,MAAM,KAAK,KAAK,IAAI,KAAK,IAAI,WAAW,EAAE,CAAC,GAAG,GAAG;AAExD,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,oBAAoB,EAC/B,iBAAiB,GACjB,eAAe,GACf,gBAAgB,GAChB,gBAOA,sBAAA,cAAC,MAAD,EAAM,WAAW,GAAG,OAAO,YAAY,SAAS,UAAU,UAAU,EA0B7D,EAzBL,sBAAA,cAAC,OAAD,EAAK,WAAU,2BAIT,EAHH,MAAM,KAAK,EAAE,QAAQ,gBAAgB,GAAG,GAAG,MAC1C,sBAAA,cAAC,YAAD,EAAY,KAAK,GAAK,CAAA,CACtB,CACE,EACN,sBAAA,cAAC,OAAD,EAAK,WAAU,uCAmBT,EAlBH,MAAM,KAAK,EAAE,QAAQ,cAAc,GAAG,GAAG,MACxC,sBAAA,cAAC,OAAD;CAAK,KAAK;CAAG,WAAU;CAUjB,EATJ,sBAAA,cAAC,gBAAD,EAAgB,WAAU,kCAAmC,CAAA,EAC7D,sBAAA,cAAC,OAAD,EAAK,WAAU,QAOT,EANJ,sBAAA,cAAC,gBAAD;CACE,WAAU;CACV,OAAO,EACL,WAAW,GAAG,YAAY,EAAE,CAAC,IAC9B;CACD,CAAA,CACE,CACF,CACN,EACF,sBAAA,cAAC,OAAD,EAAK,WAAU,8BAIT,EAHH,MAAM,KAAK,EAAE,QAAQ,eAAe,GAAG,GAAG,MACzC,sBAAA,cAAC,gBAAD;CAAgB,KAAK;CAAG,WAAU;CAAyB,CAAA,CAC3D,CACE,CACF,CACD"}
+{"version":3,"file":"SkeletonBarChart.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonBarChart.tsx"],"sourcesContent":["import React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { Tile } from '../tile/Tile'\nimport { SkeletonLoader } from './Skeleton'\n\nconst getBarWidth = (rowIndex: number) =>\n  Math.round(40 + Math.abs(Math.sin(rowIndex + 1)) * 55)\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 SkeletonBarChart = ({\n  numberOfLabels = 3,\n  numberOfRows = 4,\n  numberOfTicks = 4,\n  className\n}: {\n  numberOfLabels?: number\n  numberOfRows?: number\n  numberOfTicks?: number\n  className?: string\n}) => (\n  <Tile className={cn('p-6', 'flex-col', 'gap-6', 'w-full', className)}>\n    <div className=\"flex items-center gap-4\">\n      {Array.from({ length: numberOfLabels }, (_, i) => (\n        <LegendItem key={i} />\n      ))}\n    </div>\n    <div className=\"flex flex-col justify-between gap-4\">\n      {Array.from({ length: numberOfRows }, (_, i) => (\n        <div key={i} className=\"flex items-center gap-5\">\n          <SkeletonLoader className=\"h-3 w-20 shrink-0 rounded-full\" />\n          <div className=\"grow\">\n            <SkeletonLoader\n              className=\"h-5 w-(--width) rounded-full\"\n              style={{\n                '--width': `${getBarWidth(i)}%`\n              }}\n            />\n          </div>\n        </div>\n      ))}\n      <div className=\"flex justify-between pl-24\">\n        {Array.from({ length: numberOfTicks }, (_, i) => (\n          <SkeletonLoader key={i} className=\"h-2 w-8 rounded-full\" />\n        ))}\n      </div>\n    </div>\n  </Tile>\n)\n"],"mappings":";;;;;;AAOA,IAAM,eAAe,aACnB,KAAK,MAAM,KAAK,KAAK,IAAI,KAAK,IAAI,WAAW,EAAE,CAAC,GAAG,GAAG;AAExD,IAAM,mBACJ,qBAAC,OAAD;CAAK,WAAU;WAAf,CACE,oBAAC,gBAAD,EAAgB,WAAU,wBAAyB,CAAA,EACnD,oBAAC,gBAAD,EAAgB,WAAU,yBAA0B,CAAA,CAChD;;AAGR,IAAa,oBAAoB,EAC/B,iBAAiB,GACjB,eAAe,GACf,gBAAgB,GAChB,gBAOA,qBAAC,MAAD;CAAM,WAAW,GAAG,OAAO,YAAY,SAAS,UAAU,UAAU;WAApE,CACE,oBAAC,OAAD;EAAK,WAAU;YACZ,MAAM,KAAK,EAAE,QAAQ,gBAAgB,GAAG,GAAG,MAC1C,oBAAC,YAAD,EAAsB,EAAL,EAAK,CACtB;EACE,CAAA,EACN,qBAAC,OAAD;EAAK,WAAU;YAAf,CACG,MAAM,KAAK,EAAE,QAAQ,cAAc,GAAG,GAAG,MACxC,qBAAC,OAAD;GAAa,WAAU;aAAvB,CACE,oBAAC,gBAAD,EAAgB,WAAU,kCAAmC,CAAA,EAC7D,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,gBAAD;KACE,WAAU;KACV,OAAO,EACL,WAAW,GAAG,YAAY,EAAE,CAAC,IAC9B;KACD,CAAA;IACE,CAAA,CACF;KAVI,EAUJ,CACN,EACF,oBAAC,OAAD;GAAK,WAAU;aACZ,MAAM,KAAK,EAAE,QAAQ,eAAe,GAAG,GAAG,MACzC,oBAAC,gBAAD,EAAwB,WAAU,wBAAyB,EAAtC,EAAsC,CAC3D;GACE,CAAA,CACF;IACD"}

package/dist/components/skeleton-loader/SkeletonButton.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/SkeletonButton.tsx
-var SkeletonButton = ({ className }) => /* @__PURE__ */ React.createElement(SkeletonLoader, { className: cn("w-[10rem]", "h-8", "rounded-sm", className) });
+var SkeletonButton = ({ className }) => /* @__PURE__ */ jsx(SkeletonLoader, { className: cn("w-[10rem]", "h-8", "rounded-sm", className) });
 //#endregion
 export { SkeletonButton };
 

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

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

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

@@ -3,12 +3,19 @@ import { SkeletonLoader } from "./Skeleton.js";
 import { SkeletonButton } from "./SkeletonButton.js";
 import { Tile } from "../tile/Tile.js";
 import { SkeletonDoughnutChart } from "./SkeletonDoughnutChart.js";
-import React from "react";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/skeleton-loader/SkeletonCard.tsx
-var SkeletonCard = ({ numberOfRows = 3, withChart, className }) => /* @__PURE__ */ React.createElement(Tile, { className: cn("relative", "w-full", "flex-col", "items-center", "gap-6", "p-6", className) }, /* @__PURE__ */ React.createElement("div", { className: "align-center flex w-full gap-6" }, withChart && /* @__PURE__ */ React.createElement(SkeletonDoughnutChart, null), /* @__PURE__ */ React.createElement("div", { className: "flex grow flex-col gap-6" }, Array.from({ length: numberOfRows }, (_, index) => index).map((rowNumber) => /* @__PURE__ */ React.createElement(SkeletonLoader, {
-	key: rowNumber,
-	className: "bg-grey-200 h-10 w-full min-w-25 rounded-md"
-})))), /* @__PURE__ */ React.createElement(SkeletonButton, null));
+var SkeletonCard = ({ numberOfRows = 3, withChart, className }) => /* @__PURE__ */ jsxs(Tile, {
+	className: cn("relative", "w-full", "flex-col", "items-center", "gap-6", "p-6", className),
+	children: [/* @__PURE__ */ jsxs("div", {
+		className: "align-center flex w-full gap-6",
+		children: [withChart && /* @__PURE__ */ jsx(SkeletonDoughnutChart, {}), /* @__PURE__ */ jsx("div", {
+			className: "flex grow flex-col gap-6",
+			children: Array.from({ length: numberOfRows }, (_, index) => index).map((rowNumber) => /* @__PURE__ */ jsx(SkeletonLoader, { className: "bg-grey-200 h-10 w-full min-w-25 rounded-md" }, rowNumber))
+		})]
+	}), /* @__PURE__ */ jsx(SkeletonButton, {})]
+});
 //#endregion
 export { SkeletonCard };
 

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

@@ -1 +1 @@
-{"version":3,"file":"SkeletonCard.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonCard.tsx"],"sourcesContent":["import React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { Flex } from '../flex/Flex'\nimport { Tile } from '../tile/Tile'\nimport { SkeletonLoader } from './Skeleton'\nimport { SkeletonButton } from './SkeletonButton'\nimport { SkeletonDoughnutChart } from './SkeletonDoughnutChart'\n\nexport const SkeletonCard = ({\n  numberOfRows = 3,\n  withChart,\n  className\n}: {\n  numberOfRows?: number\n  withChart?: boolean\n  className?: string\n}) => (\n  <Tile\n    className={cn(\n      'relative',\n      'w-full',\n      'flex-col',\n      'items-center',\n      'gap-6',\n      'p-6',\n      className\n    )}\n  >\n    <div className=\"align-center flex w-full gap-6\">\n      {withChart && <SkeletonDoughnutChart />}\n      <div className=\"flex grow flex-col gap-6\">\n        {Array.from({ length: numberOfRows }, (_, index) => index).map(\n          (rowNumber) => (\n            <SkeletonLoader\n              key={rowNumber}\n              className=\"bg-grey-200 h-10 w-full min-w-25 rounded-md\"\n            />\n          )\n        )}\n      </div>\n    </div>\n    <SkeletonButton />\n  </Tile>\n)\n"],"mappings":";;;;;;;AAUA,IAAa,gBAAgB,EAC3B,eAAe,GACf,WACA,gBAMA,sBAAA,cAAC,MAAD,EACE,WAAW,GACT,YACA,UACA,YACA,gBACA,SACA,OACA,UACD,EAgBI,EAdL,sBAAA,cAAC,OAAD,EAAK,WAAU,kCAYT,EAXH,aAAa,sBAAA,cAAC,uBAAA,KAAwB,EACvC,sBAAA,cAAC,OAAD,EAAK,WAAU,4BAST,EARH,MAAM,KAAK,EAAE,QAAQ,cAAc,GAAG,GAAG,UAAU,MAAM,CAAC,KACxD,cACC,sBAAA,cAAC,gBAAD;CACE,KAAK;CACL,WAAU;CACV,CAAA,CAEL,CACG,CACF,EACN,sBAAA,cAAC,gBAAA,KAAiB,CACb"}
+{"version":3,"file":"SkeletonCard.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonCard.tsx"],"sourcesContent":["import React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { Flex } from '../flex/Flex'\nimport { Tile } from '../tile/Tile'\nimport { SkeletonLoader } from './Skeleton'\nimport { SkeletonButton } from './SkeletonButton'\nimport { SkeletonDoughnutChart } from './SkeletonDoughnutChart'\n\nexport const SkeletonCard = ({\n  numberOfRows = 3,\n  withChart,\n  className\n}: {\n  numberOfRows?: number\n  withChart?: boolean\n  className?: string\n}) => (\n  <Tile\n    className={cn(\n      'relative',\n      'w-full',\n      'flex-col',\n      'items-center',\n      'gap-6',\n      'p-6',\n      className\n    )}\n  >\n    <div className=\"align-center flex w-full gap-6\">\n      {withChart && <SkeletonDoughnutChart />}\n      <div className=\"flex grow flex-col gap-6\">\n        {Array.from({ length: numberOfRows }, (_, index) => index).map(\n          (rowNumber) => (\n            <SkeletonLoader\n              key={rowNumber}\n              className=\"bg-grey-200 h-10 w-full min-w-25 rounded-md\"\n            />\n          )\n        )}\n      </div>\n    </div>\n    <SkeletonButton />\n  </Tile>\n)\n"],"mappings":";;;;;;;;AAUA,IAAa,gBAAgB,EAC3B,eAAe,GACf,WACA,gBAMA,qBAAC,MAAD;CACE,WAAW,GACT,YACA,UACA,YACA,gBACA,SACA,OACA,UACD;WATH,CAWE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACG,aAAa,oBAAC,uBAAD,EAAyB,CAAA,EACvC,oBAAC,OAAD;GAAK,WAAU;aACZ,MAAM,KAAK,EAAE,QAAQ,cAAc,GAAG,GAAG,UAAU,MAAM,CAAC,KACxD,cACC,oBAAC,gBAAD,EAEE,WAAU,+CACV,EAFK,UAEL,CAEL;GACG,CAAA,CACF;KACN,oBAAC,gBAAD,EAAkB,CAAA,CACb"}

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