@atom-learning/components 6.8.1 → 6.9.0

package/dist/components/search-input/SearchInput.js

@@ -77,7 +77,7 @@ var SearchInput = React$1.forwardRef(({ size = "md", appearance = "standard", cl
 		...remainingProps,
 		value: innerValue,
 		onChange: handleOnChange,
-		className: clsx(size === "sm" ? "pr-8" : "pr-10", "[-webkit-search-decoration:hidden]", "[-webkit-search-cancel-button:hidden]", "[-webkit-search-results-button:hidden]")
+		className: clsx(size === "sm" ? "pr-8" : "pr-10", "[&::-webkit-search-decoration]:appearance-none", "[&::-webkit-search-cancel-button]:appearance-none", "[&::-webkit-search-results-button]:appearance-none")
 	}), getIcon());
 });
 SearchInput.displayName = "SearchInput";

package/dist/components/search-input/SearchInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.js","names":[],"sources":["../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import { Close, Search } from '@atom-learning/icons'\nimport clsx from 'clsx'\nimport * as React from 'react'\n\nimport { ActionIcon } from '~/components/action-icon/ActionIcon'\nimport { Icon } from '~/components/icon/Icon'\nimport { Input, InputBackground, InputText } from '~/components/input/Input'\nimport { styled } from '~/styled'\nimport { useCallbackRef } from '~/utilities/hooks/useCallbackRef'\nimport { getFieldIconSize } from '~/utilities/style/get-icon-size'\n\nexport type SearchInputProps = React.ComponentProps<typeof Input> & {\n  size?: 'sm' | 'md' | 'lg'\n  className?: string\n  value?: string\n  defaultValue?: string\n  onValueChange?: (newValue: string) => void\n  clearText?: string\n  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void\n}\n\nenum INPUT_ICON {\n  SEARCH = 'SEARCH',\n  CLEAR = 'CLEAR'\n}\n\nconst StyledIcon = styled(Icon, {\n  base: ['text-grey-700', 'absolute', 'pointer-events-none'],\n  variants: {\n    size: {\n      sm: ['right-2', 'size-4'],\n      md: ['right-2.5', 'size-5'],\n      lg: ['right-2.5', 'size-5']\n    }\n  }\n})\n\nexport const SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(\n  (\n    {\n      size = 'md',\n      appearance = 'standard',\n      className,\n      value,\n      defaultValue = '',\n      onValueChange,\n      clearText = 'Clear',\n      onChange,\n      ...remainingProps\n    },\n    ref\n  ) => {\n    const [inputElRef, setInputElRef] = useCallbackRef()\n    const [innerValue, setInnerValue] = React.useState(defaultValue)\n    const [activeIcon, setActiveIcon] = React.useState<INPUT_ICON>(\n      defaultValue ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH\n    )\n    React.useEffect(() => {\n      if (typeof value === 'undefined') return\n      setInnerValue(value)\n      setActiveIcon(value ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH)\n    }, [value])\n\n    const iconSize = React.useMemo(() => getFieldIconSize(size), [size])\n\n    React.useImperativeHandle(ref, () => inputElRef.current as HTMLInputElement)\n\n    const handleClear = () => {\n      const inputEl = inputElRef.current\n      if (!inputEl) return\n\n      // https://stackoverflow.com/a/46012210\n      const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n        window.HTMLInputElement.prototype,\n        'value'\n      )?.set\n      nativeInputValueSetter?.call?.(inputEl, '')\n      const ev2 = new Event('input', {\n        bubbles: true\n      })\n      inputEl.dispatchEvent(ev2)\n      inputEl.focus()\n      onValueChange?.('')\n    }\n\n    const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n      onChange?.(event)\n\n      const newValue = event.target.value\n      setInnerValue(newValue)\n      onValueChange?.(newValue)\n      setActiveIcon(newValue ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH)\n    }\n\n    const getIcon = () => {\n      if (activeIcon === INPUT_ICON.SEARCH)\n        return (\n          <StyledIcon\n            is={Search}\n            size={size}\n            className={clsx(\n              size == 'sm' ? 'size-4' : 'size-5',\n              'top-1/2',\n              '-translate-y-1/2'\n            )}\n          />\n        )\n\n      return (\n        <ActionIcon\n          label={clearText}\n          theme=\"neutral\"\n          size={iconSize}\n          onClick={handleClear}\n          className=\"absolute top-1/2 right-1 -translate-y-1/2\"\n        >\n          <Icon is={Close} />\n        </ActionIcon>\n      )\n    }\n\n    return (\n      <InputBackground\n        size={size}\n        appearance={appearance}\n        className={clsx('relative', 'w-auto', className)}\n      >\n        <InputText\n          ref={setInputElRef}\n          size={size}\n          type=\"search\"\n          {...remainingProps}\n          value={innerValue}\n          onChange={handleOnChange}\n          className={clsx(\n            size === 'sm' ? 'pr-8' : 'pr-10',\n            '[-webkit-search-decoration:hidden]',\n            '[-webkit-search-cancel-button:hidden]',\n            '[-webkit-search-results-button:hidden]'\n          )}\n        />\n        {getIcon()}\n      </InputBackground>\n    )\n  }\n)\n\nSearchInput.displayName = 'SearchInput'\n"],"mappings":";;;;;;;;;;AAqBA,IAAK,aAAL,yBAAA,YAAA;AACE,YAAA,YAAA;AACA,YAAA,WAAA;;EAFG,cAAA,EAAA,CAGJ;AAED,IAAM,aAAa,OAAO,MAAM;CAC9B,MAAM;EAAC;EAAiB;EAAY;EAAsB;CAC1D,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,WAAW,SAAS;EACzB,IAAI,CAAC,aAAa,SAAS;EAC3B,IAAI,CAAC,aAAa,SAAS;EAC5B,EACF;CACF,CAAC;AAEF,IAAa,cAAc,QAAM,YAE7B,EACE,OAAO,MACP,aAAa,YACb,WACA,OACA,eAAe,IACf,eACA,YAAY,SACZ,UACA,GAAG,kBAEL,QACG;CACH,MAAM,CAAC,YAAY,iBAAiB,gBAAgB;CACpD,MAAM,CAAC,YAAY,iBAAiB,QAAM,SAAS,aAAa;CAChE,MAAM,CAAC,YAAY,iBAAiB,QAAM,SACxC,eAAe,WAAW,QAAQ,WAAW,OAC9C;AACD,SAAM,gBAAgB;AACpB,MAAI,OAAO,UAAU,YAAa;AAClC,gBAAc,MAAM;AACpB,gBAAc,QAAQ,WAAW,QAAQ,WAAW,OAAO;IAC1D,CAAC,MAAM,CAAC;CAEX,MAAM,WAAW,QAAM,cAAc,iBAAiB,KAAK,EAAE,CAAC,KAAK,CAAC;AAEpE,SAAM,oBAAoB,WAAW,WAAW,QAA4B;CAE5E,MAAM,oBAAoB;EACxB,MAAM,UAAU,WAAW;AAC3B,MAAI,CAAC,QAAS;AAOd,GAJ+B,OAAO,yBACpC,OAAO,iBAAiB,WACxB,QACD,EAAE,MACqB,OAAO,SAAS,GAAG;EAC3C,MAAM,MAAM,IAAI,MAAM,SAAS,EAC7B,SAAS,MACV,CAAC;AACF,UAAQ,cAAc,IAAI;AAC1B,UAAQ,OAAO;AACf,kBAAgB,GAAG;;CAGrB,MAAM,kBAAkB,UAA+C;AACrE,aAAW,MAAM;EAEjB,MAAM,WAAW,MAAM,OAAO;AAC9B,gBAAc,SAAS;AACvB,kBAAgB,SAAS;AACzB,gBAAc,WAAW,WAAW,QAAQ,WAAW,OAAO;;CAGhE,MAAM,gBAAgB;AACpB,MAAI,eAAe,WAAW,OAC5B,QACE,wBAAA,cAAC,YAAD;GACE,IAAI;GACE;GACN,WAAW,KACT,QAAQ,OAAO,WAAW,UAC1B,WACA,mBACD;GACD,CAAA;AAGN,SACE,wBAAA,cAAC,YAAD;GACE,OAAO;GACP,OAAM;GACN,MAAM;GACN,SAAS;GACT,WAAU;GAGC,EADX,wBAAA,cAAC,MAAD,EAAM,IAAI,OAAS,CAAA,CACR;;AAIjB,QACE,wBAAA,cAAC,iBAAD;EACQ;EACM;EACZ,WAAW,KAAK,YAAY,UAAU,UAAU;EAiBhC,EAfhB,wBAAA,cAAC,WAAD;EACE,KAAK;EACC;EACN,MAAK;EACL,GAAI;EACJ,OAAO;EACP,UAAU;EACV,WAAW,KACT,SAAS,OAAO,SAAS,SACzB,sCACA,yCACA,yCACD;EACD,CAAA,EACD,SAAS,CACM;EAGvB;AAED,YAAY,cAAc"}
+{"version":3,"file":"SearchInput.js","names":[],"sources":["../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import { Close, Search } from '@atom-learning/icons'\nimport clsx from 'clsx'\nimport * as React from 'react'\n\nimport { ActionIcon } from '~/components/action-icon/ActionIcon'\nimport { Icon } from '~/components/icon/Icon'\nimport { Input, InputBackground, InputText } from '~/components/input/Input'\nimport { styled } from '~/styled'\nimport { useCallbackRef } from '~/utilities/hooks/useCallbackRef'\nimport { getFieldIconSize } from '~/utilities/style/get-icon-size'\n\nexport type SearchInputProps = React.ComponentProps<typeof Input> & {\n  size?: 'sm' | 'md' | 'lg'\n  className?: string\n  value?: string\n  defaultValue?: string\n  onValueChange?: (newValue: string) => void\n  clearText?: string\n  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void\n}\n\nenum INPUT_ICON {\n  SEARCH = 'SEARCH',\n  CLEAR = 'CLEAR'\n}\n\nconst StyledIcon = styled(Icon, {\n  base: ['text-grey-700', 'absolute', 'pointer-events-none'],\n  variants: {\n    size: {\n      sm: ['right-2', 'size-4'],\n      md: ['right-2.5', 'size-5'],\n      lg: ['right-2.5', 'size-5']\n    }\n  }\n})\n\nexport const SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(\n  (\n    {\n      size = 'md',\n      appearance = 'standard',\n      className,\n      value,\n      defaultValue = '',\n      onValueChange,\n      clearText = 'Clear',\n      onChange,\n      ...remainingProps\n    },\n    ref\n  ) => {\n    const [inputElRef, setInputElRef] = useCallbackRef()\n    const [innerValue, setInnerValue] = React.useState(defaultValue)\n    const [activeIcon, setActiveIcon] = React.useState<INPUT_ICON>(\n      defaultValue ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH\n    )\n    React.useEffect(() => {\n      if (typeof value === 'undefined') return\n      setInnerValue(value)\n      setActiveIcon(value ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH)\n    }, [value])\n\n    const iconSize = React.useMemo(() => getFieldIconSize(size), [size])\n\n    React.useImperativeHandle(ref, () => inputElRef.current as HTMLInputElement)\n\n    const handleClear = () => {\n      const inputEl = inputElRef.current\n      if (!inputEl) return\n\n      // https://stackoverflow.com/a/46012210\n      const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n        window.HTMLInputElement.prototype,\n        'value'\n      )?.set\n      nativeInputValueSetter?.call?.(inputEl, '')\n      const ev2 = new Event('input', {\n        bubbles: true\n      })\n      inputEl.dispatchEvent(ev2)\n      inputEl.focus()\n      onValueChange?.('')\n    }\n\n    const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n      onChange?.(event)\n\n      const newValue = event.target.value\n      setInnerValue(newValue)\n      onValueChange?.(newValue)\n      setActiveIcon(newValue ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH)\n    }\n\n    const getIcon = () => {\n      if (activeIcon === INPUT_ICON.SEARCH)\n        return (\n          <StyledIcon\n            is={Search}\n            size={size}\n            className={clsx(\n              size == 'sm' ? 'size-4' : 'size-5',\n              'top-1/2',\n              '-translate-y-1/2'\n            )}\n          />\n        )\n\n      return (\n        <ActionIcon\n          label={clearText}\n          theme=\"neutral\"\n          size={iconSize}\n          onClick={handleClear}\n          className=\"absolute top-1/2 right-1 -translate-y-1/2\"\n        >\n          <Icon is={Close} />\n        </ActionIcon>\n      )\n    }\n\n    return (\n      <InputBackground\n        size={size}\n        appearance={appearance}\n        className={clsx('relative', 'w-auto', className)}\n      >\n        <InputText\n          ref={setInputElRef}\n          size={size}\n          type=\"search\"\n          {...remainingProps}\n          value={innerValue}\n          onChange={handleOnChange}\n          className={clsx(\n            size === 'sm' ? 'pr-8' : 'pr-10',\n            '[&::-webkit-search-decoration]:appearance-none',\n            '[&::-webkit-search-cancel-button]:appearance-none',\n            '[&::-webkit-search-results-button]:appearance-none'\n          )}\n        />\n        {getIcon()}\n      </InputBackground>\n    )\n  }\n)\n\nSearchInput.displayName = 'SearchInput'\n"],"mappings":";;;;;;;;;;AAqBA,IAAK,aAAL,yBAAA,YAAA;AACE,YAAA,YAAA;AACA,YAAA,WAAA;;EAFG,cAAA,EAAA,CAGJ;AAED,IAAM,aAAa,OAAO,MAAM;CAC9B,MAAM;EAAC;EAAiB;EAAY;EAAsB;CAC1D,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,WAAW,SAAS;EACzB,IAAI,CAAC,aAAa,SAAS;EAC3B,IAAI,CAAC,aAAa,SAAS;EAC5B,EACF;CACF,CAAC;AAEF,IAAa,cAAc,QAAM,YAE7B,EACE,OAAO,MACP,aAAa,YACb,WACA,OACA,eAAe,IACf,eACA,YAAY,SACZ,UACA,GAAG,kBAEL,QACG;CACH,MAAM,CAAC,YAAY,iBAAiB,gBAAgB;CACpD,MAAM,CAAC,YAAY,iBAAiB,QAAM,SAAS,aAAa;CAChE,MAAM,CAAC,YAAY,iBAAiB,QAAM,SACxC,eAAe,WAAW,QAAQ,WAAW,OAC9C;AACD,SAAM,gBAAgB;AACpB,MAAI,OAAO,UAAU,YAAa;AAClC,gBAAc,MAAM;AACpB,gBAAc,QAAQ,WAAW,QAAQ,WAAW,OAAO;IAC1D,CAAC,MAAM,CAAC;CAEX,MAAM,WAAW,QAAM,cAAc,iBAAiB,KAAK,EAAE,CAAC,KAAK,CAAC;AAEpE,SAAM,oBAAoB,WAAW,WAAW,QAA4B;CAE5E,MAAM,oBAAoB;EACxB,MAAM,UAAU,WAAW;AAC3B,MAAI,CAAC,QAAS;AAOd,GAJ+B,OAAO,yBACpC,OAAO,iBAAiB,WACxB,QACD,EAAE,MACqB,OAAO,SAAS,GAAG;EAC3C,MAAM,MAAM,IAAI,MAAM,SAAS,EAC7B,SAAS,MACV,CAAC;AACF,UAAQ,cAAc,IAAI;AAC1B,UAAQ,OAAO;AACf,kBAAgB,GAAG;;CAGrB,MAAM,kBAAkB,UAA+C;AACrE,aAAW,MAAM;EAEjB,MAAM,WAAW,MAAM,OAAO;AAC9B,gBAAc,SAAS;AACvB,kBAAgB,SAAS;AACzB,gBAAc,WAAW,WAAW,QAAQ,WAAW,OAAO;;CAGhE,MAAM,gBAAgB;AACpB,MAAI,eAAe,WAAW,OAC5B,QACE,wBAAA,cAAC,YAAD;GACE,IAAI;GACE;GACN,WAAW,KACT,QAAQ,OAAO,WAAW,UAC1B,WACA,mBACD;GACD,CAAA;AAGN,SACE,wBAAA,cAAC,YAAD;GACE,OAAO;GACP,OAAM;GACN,MAAM;GACN,SAAS;GACT,WAAU;GAGC,EADX,wBAAA,cAAC,MAAD,EAAM,IAAI,OAAS,CAAA,CACR;;AAIjB,QACE,wBAAA,cAAC,iBAAD;EACQ;EACM;EACZ,WAAW,KAAK,YAAY,UAAU,UAAU;EAiBhC,EAfhB,wBAAA,cAAC,WAAD;EACE,KAAK;EACC;EACN,MAAK;EACL,GAAI;EACJ,OAAO;EACP,UAAU;EACV,WAAW,KACT,SAAS,OAAO,SAAS,SACzB,kDACA,qDACA,qDACD;EACD,CAAA,EACD,SAAS,CACM;EAGvB;AAED,YAAY,cAAc"}

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

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare const SkeletonBarChart: ({ numberOfLabels, numberOfRows, numberOfTicks, className }: {
+    numberOfLabels?: number;
+    numberOfRows?: number;
+    numberOfTicks?: number;
+    className?: string;
+}) => React.JSX.Element;

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

@@ -0,0 +1,21 @@
+import { SkeletonLoader } from "./Skeleton.js";
+import { Tile } from "../tile/Tile.js";
+import clsx from "clsx";
+import React from "react";
+//#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: clsx("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"
+})))));
+//#endregion
+export { SkeletonBarChart };
+
+//# sourceMappingURL=SkeletonBarChart.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonBarChart.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonBarChart.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport React from 'react'\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={clsx('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":";;;;;AAMA,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,KAAK,OAAO,YAAY,SAAS,UAAU,UAAU,EA0B/D,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"}

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

@@ -1,5 +1,6 @@
 import React from 'react';
-export declare const SkeletonCard: ({ numberOfRows, withChart }: {
+export declare const SkeletonCard: ({ numberOfRows, withChart, className }: {
     numberOfRows?: number;
     withChart?: boolean;
+    className?: string;
 }) => React.JSX.Element;

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

@@ -1,19 +1,11 @@
-import { Flex } from "../flex/Flex.js";
 import { SkeletonLoader } from "./Skeleton.js";
 import { SkeletonButton } from "./SkeletonButton.js";
 import { Tile } from "../tile/Tile.js";
 import { SkeletonDoughnutChart } from "./SkeletonDoughnutChart.js";
+import clsx from "clsx";
 import React from "react";
 //#region src/components/skeleton-loader/SkeletonCard.tsx
-var SkeletonCard = ({ numberOfRows = 3, withChart }) => /* @__PURE__ */ React.createElement(Tile, { className: "relative w-full flex-col items-center gap-6 p-6" }, /* @__PURE__ */ React.createElement(Flex, {
-	gap: "6",
-	align: "center",
-	className: "w-full"
-}, withChart && /* @__PURE__ */ React.createElement(SkeletonDoughnutChart, null), /* @__PURE__ */ React.createElement(Flex, {
-	direction: "column",
-	gap: "24",
-	className: "grow"
-}, Array.from({ length: numberOfRows }, (_, index) => index).map((rowNumber) => /* @__PURE__ */ React.createElement(SkeletonLoader, {
+var SkeletonCard = ({ numberOfRows = 3, withChart, className }) => /* @__PURE__ */ React.createElement(Tile, { className: clsx("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));

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 { 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}: {\n  numberOfRows?: number\n  withChart?: boolean\n}) => (\n  <Tile className=\"relative w-full flex-col items-center gap-6 p-6\">\n    <Flex gap=\"6\" align=\"center\" className=\"w-full\">\n      {withChart && <SkeletonDoughnutChart />}\n      <Flex direction=\"column\" gap=\"24\" className=\"grow\">\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      </Flex>\n    </Flex>\n    <SkeletonButton />\n  </Tile>\n)\n"],"mappings":";;;;;;;AAQA,IAAa,gBAAgB,EAC3B,eAAe,GACf,gBAKA,sBAAA,cAAC,MAAD,EAAM,WAAU,mDAeT,EAdL,sBAAA,cAAC,MAAD;CAAM,KAAI;CAAI,OAAM;CAAS,WAAU;CAYhC,EAXJ,aAAa,sBAAA,cAAC,uBAAA,KAAwB,EACvC,sBAAA,cAAC,MAAD;CAAM,WAAU;CAAS,KAAI;CAAK,WAAU;CASrC,EARJ,MAAM,KAAK,EAAE,QAAQ,cAAc,GAAG,GAAG,UAAU,MAAM,CAAC,KACxD,cACC,sBAAA,cAAC,gBAAD;CACE,KAAK;CACL,WAAU;CACV,CAAA,CAEL,CACI,CACF,EACP,sBAAA,cAAC,gBAAA,KAAiB,CACb"}
+{"version":3,"file":"SkeletonCard.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonCard.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport React from 'react'\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={clsx(\n      'relative',\n      'w-full',\n      'flex-col',\n      'items-center',\n      'gap-6 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":";;;;;;;AASA,IAAa,gBAAgB,EAC3B,eAAe,GACf,WACA,gBAMA,sBAAA,cAAC,MAAD,EACE,WAAW,KACT,YACA,UACA,YACA,gBACA,aACA,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"}

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

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare const SkeletonColumnChart: ({ numberOfLabels, numberOfGroups, numberOfColumns, className }: {
+    numberOfLabels?: number;
+    numberOfGroups?: number;
+    numberOfColumns?: number;
+    className?: string;
+}) => React.JSX.Element;

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

@@ -0,0 +1,21 @@
+import { SkeletonLoader } from "./Skeleton.js";
+import { Tile } from "../tile/Tile.js";
+import clsx from "clsx";
+import React from "react";
+//#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: clsx("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
+}))));
+//#endregion
+export { SkeletonColumnChart };
+
+//# sourceMappingURL=SkeletonColumnChart.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonColumnChart.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonColumnChart.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport React from 'react'\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={clsx('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":";;;;;AAMA,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,KAAK,OAAO,YAAY,SAAS,UAAU,UAAU,EAa/D,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"}

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

@@ -1,4 +1,4 @@
 import React from 'react';
-export declare const SkeletonDoughnutChart: ({ containerCss }: {
-    containerCss?: string;
+export declare const SkeletonDoughnutChart: ({ className }: {
+    className?: string;
 }) => React.JSX.Element;

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

@@ -2,59 +2,24 @@ import { Tile } from "../tile/Tile.js";
 import clsx from "clsx";
 import React from "react";
 //#region src/components/skeleton-loader/SkeletonDoughnutChart.tsx
-var DoughnutSvg = () => /* @__PURE__ */ React.createElement("svg", {
-	xmlns: "http://www.w3.org/2000/svg",
-	width: 120,
-	height: 121,
-	fill: "none",
-	className: "animate-shimmer"
-}, /* @__PURE__ */ React.createElement("mask", {
-	id: "a",
-	fill: "#fff"
-}, /* @__PURE__ */ React.createElement("path", { d: "m117 60 3 3a60 60 0 0 1-39 53q-2 1-4-2l-5-17q-1-2 2-4a36 36 0 0 0 22-30q0-2 3-3z" })), /* @__PURE__ */ React.createElement("path", {
-	className: "fill-grey-300",
-	stroke: "#fff",
-	strokeWidth: 1.6,
-	d: "m117 60 3 3a60 60 0 0 1-39 53q-2 1-4-2l-5-17q-1-2 2-4a36 36 0 0 0 22-30q0-2 3-3z",
-	mask: "url(#a)"
-}), /* @__PURE__ */ React.createElement("mask", {
-	id: "b",
-	fill: "#fff"
-}, /* @__PURE__ */ React.createElement("path", { d: "M117 60q2 0 3-3A60 60 0 0 0 81 4l-4 2-5 17q-1 4 2 4a36 36 0 0 1 22 30q0 3 3 3z" })), /* @__PURE__ */ React.createElement("path", {
-	className: "fill-grey-300",
-	stroke: "#fff",
-	strokeWidth: 1.6,
-	d: "M117 60q2 0 3-3A60 60 0 0 0 81 4l-4 2-5 17q-1 4 2 4a36 36 0 0 1 22 30q0 3 3 3z",
-	mask: "url(#b)"
-}), /* @__PURE__ */ React.createElement("mask", {
-	id: "c",
-	fill: "#fff"
-}, /* @__PURE__ */ React.createElement("path", { d: "M77 6q1-2-2-4a60 60 0 0 0-62 21q-1 2 1 4l14 10h5a36 36 0 0 1 35-12q3 1 4-2z" })), /* @__PURE__ */ React.createElement("path", {
-	className: "fill-grey-300",
-	stroke: "#fff",
-	strokeWidth: 1.6,
-	d: "M77 6q1-2-2-4a60 60 0 0 0-62 21q-1 2 1 4l14 10h5a36 36 0 0 1 35-12q3 1 4-2z",
-	mask: "url(#c)"
-}), /* @__PURE__ */ React.createElement("mask", {
-	id: "d",
-	fill: "#fff"
-}, /* @__PURE__ */ React.createElement("path", { d: "M14 93q-3 2-1 5a60 60 0 0 0 62 20l2-4-5-16-4-3a36 36 0 0 1-35-11q-3-3-5-1z" })), /* @__PURE__ */ React.createElement("path", {
-	className: "fill-grey-300",
-	stroke: "#fff",
-	strokeWidth: 1.6,
-	d: "M14 93q-3 2-1 5a60 60 0 0 0 62 20l2-4-5-16-4-3a36 36 0 0 1-35-11q-3-3-5-1z",
-	mask: "url(#d)"
-}), /* @__PURE__ */ React.createElement("mask", {
-	id: "e",
-	fill: "#fff"
-}, /* @__PURE__ */ React.createElement("path", { d: "M14 27q-2-2-4 1a60 60 0 0 0 0 65q1 2 4 0l14-10q3-2 1-4a36 36 0 0 1 0-37q2-3-1-5z" })), /* @__PURE__ */ React.createElement("path", {
-	className: "fill-grey-300",
-	stroke: "#fff",
-	strokeWidth: 1.6,
-	d: "M14 27q-2-2-4 1a60 60 0 0 0 0 65q1 2 4 0l14-10q3-2 1-4a36 36 0 0 1 0-37q2-3-1-5z",
-	mask: "url(#e)"
-}));
-var SkeletonDoughnutChart = ({ containerCss }) => /* @__PURE__ */ React.createElement(Tile, { className: clsx("p-6", "flex-row", "gap-4", "relative", containerCss) }, /* @__PURE__ */ React.createElement(DoughnutSvg, null));
+var buildConicGradient = () => {
+	const numberOfSegments = 5;
+	const gap = 4;
+	const segmentAngle = (360 - numberOfSegments * gap) / numberOfSegments;
+	const stops = [];
+	let current = 0;
+	Array.from({ length: numberOfSegments }).forEach(() => {
+		stops.push(`var(--color-grey-300) ${current}deg ${current + segmentAngle}deg`);
+		current += segmentAngle;
+		stops.push(`white ${current}deg ${current + gap}deg`);
+		current += gap;
+	});
+	return `conic-gradient(${stops.join(", ")})`;
+};
+var SkeletonDoughnutChart = ({ className }) => /* @__PURE__ */ React.createElement(Tile, { className: clsx("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" })));
 //#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 clsx from 'clsx'\nimport React from 'react'\n\nimport { Tile } from '../tile/Tile'\n\nconst DoughnutSvg = () => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width={120}\n    height={121}\n    fill=\"none\"\n    className=\"animate-shimmer\"\n  >\n    <mask id=\"a\" fill=\"#fff\">\n      <path d=\"m117 60 3 3a60 60 0 0 1-39 53q-2 1-4-2l-5-17q-1-2 2-4a36 36 0 0 0 22-30q0-2 3-3z\" />\n    </mask>\n    <path\n      className=\"fill-grey-300\"\n      stroke=\"#fff\"\n      strokeWidth={1.6}\n      d=\"m117 60 3 3a60 60 0 0 1-39 53q-2 1-4-2l-5-17q-1-2 2-4a36 36 0 0 0 22-30q0-2 3-3z\"\n      mask=\"url(#a)\"\n    />\n    <mask id=\"b\" fill=\"#fff\">\n      <path d=\"M117 60q2 0 3-3A60 60 0 0 0 81 4l-4 2-5 17q-1 4 2 4a36 36 0 0 1 22 30q0 3 3 3z\" />\n    </mask>\n    <path\n      className=\"fill-grey-300\"\n      stroke=\"#fff\"\n      strokeWidth={1.6}\n      d=\"M117 60q2 0 3-3A60 60 0 0 0 81 4l-4 2-5 17q-1 4 2 4a36 36 0 0 1 22 30q0 3 3 3z\"\n      mask=\"url(#b)\"\n    />\n    <mask id=\"c\" fill=\"#fff\">\n      <path d=\"M77 6q1-2-2-4a60 60 0 0 0-62 21q-1 2 1 4l14 10h5a36 36 0 0 1 35-12q3 1 4-2z\" />\n    </mask>\n    <path\n      className=\"fill-grey-300\"\n      stroke=\"#fff\"\n      strokeWidth={1.6}\n      d=\"M77 6q1-2-2-4a60 60 0 0 0-62 21q-1 2 1 4l14 10h5a36 36 0 0 1 35-12q3 1 4-2z\"\n      mask=\"url(#c)\"\n    />\n    <mask id=\"d\" fill=\"#fff\">\n      <path d=\"M14 93q-3 2-1 5a60 60 0 0 0 62 20l2-4-5-16-4-3a36 36 0 0 1-35-11q-3-3-5-1z\" />\n    </mask>\n    <path\n      className=\"fill-grey-300\"\n      stroke=\"#fff\"\n      strokeWidth={1.6}\n      d=\"M14 93q-3 2-1 5a60 60 0 0 0 62 20l2-4-5-16-4-3a36 36 0 0 1-35-11q-3-3-5-1z\"\n      mask=\"url(#d)\"\n    />\n    <mask id=\"e\" fill=\"#fff\">\n      <path d=\"M14 27q-2-2-4 1a60 60 0 0 0 0 65q1 2 4 0l14-10q3-2 1-4a36 36 0 0 1 0-37q2-3-1-5z\" />\n    </mask>\n    <path\n      className=\"fill-grey-300\"\n      stroke=\"#fff\"\n      strokeWidth={1.6}\n      d=\"M14 27q-2-2-4 1a60 60 0 0 0 0 65q1 2 4 0l14-10q3-2 1-4a36 36 0 0 1 0-37q2-3-1-5z\"\n      mask=\"url(#e)\"\n    />\n  </svg>\n)\n\nexport const SkeletonDoughnutChart = ({\n  containerCss\n}: {\n  containerCss?: string\n}) => (\n  <Tile className={clsx('p-6', 'flex-row', 'gap-4', 'relative', containerCss)}>\n    <DoughnutSvg />\n  </Tile>\n)\n"],"mappings":";;;;AAKA,IAAM,oBACJ,sBAAA,cAAC,OAAD;CACE,OAAM;CACN,OAAO;CACP,QAAQ;CACR,MAAK;CACL,WAAU;CAoDN,EAlDJ,sBAAA,cAAC,QAAD;CAAM,IAAG;CAAI,MAAK;CAEX,EADL,sBAAA,cAAC,QAAD,EAAM,GAAE,oFAAqF,CAAA,CACxF,EACP,sBAAA,cAAC,QAAD;CACE,WAAU;CACV,QAAO;CACP,aAAa;CACb,GAAE;CACF,MAAK;CACL,CAAA,EACF,sBAAA,cAAC,QAAD;CAAM,IAAG;CAAI,MAAK;CAEX,EADL,sBAAA,cAAC,QAAD,EAAM,GAAE,kFAAmF,CAAA,CACtF,EACP,sBAAA,cAAC,QAAD;CACE,WAAU;CACV,QAAO;CACP,aAAa;CACb,GAAE;CACF,MAAK;CACL,CAAA,EACF,sBAAA,cAAC,QAAD;CAAM,IAAG;CAAI,MAAK;CAEX,EADL,sBAAA,cAAC,QAAD,EAAM,GAAE,+EAAgF,CAAA,CACnF,EACP,sBAAA,cAAC,QAAD;CACE,WAAU;CACV,QAAO;CACP,aAAa;CACb,GAAE;CACF,MAAK;CACL,CAAA,EACF,sBAAA,cAAC,QAAD;CAAM,IAAG;CAAI,MAAK;CAEX,EADL,sBAAA,cAAC,QAAD,EAAM,GAAE,8EAA+E,CAAA,CAClF,EACP,sBAAA,cAAC,QAAD;CACE,WAAU;CACV,QAAO;CACP,aAAa;CACb,GAAE;CACF,MAAK;CACL,CAAA,EACF,sBAAA,cAAC,QAAD;CAAM,IAAG;CAAI,MAAK;CAEX,EADL,sBAAA,cAAC,QAAD,EAAM,GAAE,oFAAqF,CAAA,CACxF,EACP,sBAAA,cAAC,QAAD;CACE,WAAU;CACV,QAAO;CACP,aAAa;CACb,GAAE;CACF,MAAK;CACL,CAAA,CACE;AAGR,IAAa,yBAAyB,EACpC,mBAIA,sBAAA,cAAC,MAAD,EAAM,WAAW,KAAK,OAAO,YAAY,SAAS,YAAY,aAAa,EAEpE,EADL,sBAAA,cAAC,aAAA,KAAc,CACV"}
+{"version":3,"file":"SkeletonDoughnutChart.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonDoughnutChart.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport React from 'react'\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={clsx('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":";;;;AAKA,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,KAAK,OAAO,WAAW,UAAU,EAO3C,EANL,sBAAA,cAAC,OAAD;CACE,WAAU;CACV,OAAO,EAAE,cAAc,oBAAoB,EAAE;CAGzC,EADJ,sBAAA,cAAC,OAAD,EAAK,WAAU,sDAAuD,CAAA,CAClE,CACD"}

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

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const SkeletonPanelList: ({ className }: {
+    className?: string;
+}) => React.JSX.Element;

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

@@ -0,0 +1,10 @@
+import { SkeletonLoader } from "./Skeleton.js";
+import { Tile } from "../tile/Tile.js";
+import clsx from "clsx";
+import React from "react";
+//#region src/components/skeleton-loader/SkeletonPanelList.tsx
+var SkeletonPanelList = ({ className }) => /* @__PURE__ */ React.createElement(Tile, { className: clsx("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" })));
+//#endregion
+export { SkeletonPanelList };
+
+//# sourceMappingURL=SkeletonPanelList.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonPanelList.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonPanelList.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport React from 'react'\n\nimport { Tile } from '../tile/Tile'\nimport { SkeletonLoader } from './Skeleton'\n\nexport const SkeletonPanelList = ({ className }: { className?: string }) => (\n  <Tile className={clsx('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":";;;;;AAMA,IAAa,qBAAqB,EAAE,gBAClC,sBAAA,cAAC,MAAD,EAAM,WAAW,KAAK,QAAQ,YAAY,UAAU,UAAU,EAQvD,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"}

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

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const SkeletonSubjectList: ({ className }: {
+    className?: string;
+}) => React.JSX.Element;

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

@@ -0,0 +1,10 @@
+import { SkeletonLoader } from "./Skeleton.js";
+import { Tile } from "../tile/Tile.js";
+import clsx from "clsx";
+import React from "react";
+//#region src/components/skeleton-loader/SkeletonSubjectList.tsx
+var SkeletonSubjectList = ({ className }) => /* @__PURE__ */ React.createElement(Tile, { className: clsx("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" }));
+//#endregion
+export { SkeletonSubjectList };
+
+//# sourceMappingURL=SkeletonSubjectList.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonSubjectList.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonSubjectList.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport React from 'react'\n\nimport { Tile } from '../tile/Tile'\nimport { SkeletonLoader } from './Skeleton'\n\nexport const SkeletonSubjectList = ({ className }: { className?: string }) => (\n  <Tile\n    className={clsx(\n      'p-2',\n      'flex-row',\n      'flex-wrap',\n      'items-center',\n      'justify-between',\n      'gap-4',\n      'w-full',\n      className\n    )}\n  >\n    <SkeletonLoader className=\"h-22 max-w-xl grow rounded-xl\" />\n    <SkeletonLoader className=\"size-10 shrink-0 rounded-md\" />\n  </Tile>\n)\n"],"mappings":";;;;;AAMA,IAAa,uBAAuB,EAAE,gBACpC,sBAAA,cAAC,MAAD,EACE,WAAW,KACT,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"}

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

@@ -1,7 +1,7 @@
 import React from 'react';
-export declare const SkeletonTable: ({ numberOfColumns, numberOfRows, columnWidth, containerCss }: {
+export declare const SkeletonTable: ({ numberOfColumns, numberOfRows, columnWidth, className }: {
     numberOfColumns?: number;
     numberOfRows?: number;
     columnWidth?: Record<number, string>;
-    containerCss?: string;
+    className?: string;
 }) => React.JSX.Element;

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

@@ -4,8 +4,8 @@ import { Tile } from "../tile/Tile.js";
 import clsx from "clsx";
 import React from "react";
 //#region src/components/skeleton-loader/SkeletonTable.tsx
-var SkeletonTable = ({ numberOfColumns = 4, numberOfRows = 4, columnWidth, containerCss }) => {
-	return /* @__PURE__ */ React.createElement(Tile, { className: clsx("p-6", "flex-row", "gap-4", "relative", containerCss) }, /* @__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, {
+var SkeletonTable = ({ numberOfColumns = 4, numberOfRows = 4, columnWidth, className }) => {
+	return /* @__PURE__ */ React.createElement(Tile, { className: clsx("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, {

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 clsx from 'clsx'\nimport React from 'react'\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  containerCss\n}: {\n  numberOfColumns?: number\n  numberOfRows?: number\n  columnWidth?: Record<number, string>\n  containerCss?: string\n}) => {\n  return (\n    <Tile\n      className={clsx('p-6', 'flex-row', 'gap-4', 'relative', containerCss)}\n    >\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":";;;;;;AAOA,IAAa,iBAAiB,EAC5B,kBAAkB,GAClB,eAAe,GACf,aACA,mBAMI;AACJ,QACE,sBAAA,cAAC,MAAD,EACE,WAAW,KAAK,OAAO,YAAY,SAAS,YAAY,aAAa,EAqChE,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 clsx from 'clsx'\nimport React from 'react'\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={clsx('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":";;;;;;AAOA,IAAa,iBAAiB,EAC5B,kBAAkB,GAClB,eAAe,GACf,aACA,gBAMI;AACJ,QACE,sBAAA,cAAC,MAAD,EAAM,WAAW,KAAK,OAAO,YAAY,SAAS,YAAY,UAAU,EAoCjE,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"}

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

@@ -1,6 +1,6 @@
 import React from 'react';
-export declare const SkeletonTabs: ({ numberOfTabs, containerCss, tabCss }: {
+export declare const SkeletonTabs: ({ numberOfTabs, className, tabClassName }: {
     numberOfTabs: number;
-    containerCss?: string;
-    tabCss?: string;
+    className?: string;
+    tabClassName?: string;
 }) => React.JSX.Element;

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

@@ -3,9 +3,9 @@ import { Tile } from "../tile/Tile.js";
 import clsx from "clsx";
 import React from "react";
 //#region src/components/skeleton-loader/SkeletonTabs.tsx
-var SkeletonTabs = ({ numberOfTabs, containerCss, tabCss }) => /* @__PURE__ */ React.createElement(Tile, { className: clsx("p-6", "flex-row", "gap-4", containerCss) }, Array.from({ length: numberOfTabs }, (_, index) => `tab_${index}`).map((key) => /* @__PURE__ */ React.createElement(SkeletonLoader, {
+var SkeletonTabs = ({ numberOfTabs, className, tabClassName }) => /* @__PURE__ */ React.createElement(Tile, { className: clsx("p-6", "flex-row", "gap-4", className) }, Array.from({ length: numberOfTabs }, (_, index) => `tab_${index}`).map((key) => /* @__PURE__ */ React.createElement(SkeletonLoader, {
 	key,
-	className: clsx("w-32", "h-6", "rounded-sm", tabCss)
+	className: clsx("w-32", "h-6", "rounded-sm", tabClassName)
 })));
 //#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 clsx from 'clsx'\nimport React from 'react'\n\nimport { Tile } from '../tile/Tile'\nimport { SkeletonLoader } from './Skeleton'\n\nexport const SkeletonTabs = ({\n  numberOfTabs,\n  containerCss,\n  tabCss\n}: {\n  numberOfTabs: number\n  containerCss?: string\n  tabCss?: string\n}) => (\n  <Tile className={clsx('p-6', 'flex-row', 'gap-4', containerCss)}>\n    {Array.from({ length: numberOfTabs }, (_, index) => `tab_${index}`).map(\n      (key) => (\n        <SkeletonLoader\n          key={key}\n          className={clsx('w-32', 'h-6', 'rounded-sm', tabCss)}\n        />\n      )\n    )}\n  </Tile>\n)\n"],"mappings":";;;;;AAMA,IAAa,gBAAgB,EAC3B,cACA,cACA,aAMA,sBAAA,cAAC,MAAD,EAAM,WAAW,KAAK,OAAO,YAAY,SAAS,aAAa,EASxD,EARJ,MAAM,KAAK,EAAE,QAAQ,cAAc,GAAG,GAAG,UAAU,OAAO,QAAQ,CAAC,KACjE,QACC,sBAAA,cAAC,gBAAD;CACO;CACL,WAAW,KAAK,QAAQ,OAAO,cAAc,OAAO;CACpD,CAAA,CAEL,CACI"}
+{"version":3,"file":"SkeletonTabs.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonTabs.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport React from 'react'\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={clsx('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={clsx('w-32', 'h-6', 'rounded-sm', tabClassName)}\n        />\n      )\n    )}\n  </Tile>\n)\n"],"mappings":";;;;;AAMA,IAAa,gBAAgB,EAC3B,cACA,WACA,mBAMA,sBAAA,cAAC,MAAD,EAAM,WAAW,KAAK,OAAO,YAAY,SAAS,UAAU,EASrD,EARJ,MAAM,KAAK,EAAE,QAAQ,cAAc,GAAG,GAAG,UAAU,OAAO,QAAQ,CAAC,KACjE,QACC,sBAAA,cAAC,gBAAD;CACO;CACL,WAAW,KAAK,QAAQ,OAAO,cAAc,aAAa;CAC1D,CAAA,CAEL,CACI"}

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

@@ -5,3 +5,7 @@ export { SkeletonTabs as Tabs } from './SkeletonTabs';
 export { SkeletonDoughnutChart as DoughnutChart } from './SkeletonDoughnutChart';
 export { SkeletonTable as Table } from './SkeletonTable';
 export { SkeletonCard as Card } from './SkeletonCard';
+export { SkeletonColumnChart as ColumnChart } from './SkeletonColumnChart';
+export { SkeletonBarChart as BarChart } from './SkeletonBarChart';
+export { SkeletonPanelList as PanelList } from './SkeletonPanelList';
+export { SkeletonSubjectList as SubjectList } from './SkeletonSubjectList';

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

@@ -6,13 +6,21 @@ import { SkeletonTabs } from "./SkeletonTabs.js";
 import { SkeletonDoughnutChart } from "./SkeletonDoughnutChart.js";
 import { SkeletonTable } from "./SkeletonTable.js";
 import { SkeletonCard } from "./SkeletonCard.js";
+import { SkeletonColumnChart } from "./SkeletonColumnChart.js";
+import { SkeletonBarChart } from "./SkeletonBarChart.js";
+import { SkeletonPanelList } from "./SkeletonPanelList.js";
+import { SkeletonSubjectList } from "./SkeletonSubjectList.js";
 //#region src/components/skeleton-loader/index.ts
 var skeleton_loader_exports = /* @__PURE__ */ __exportAll({
+	BarChart: () => SkeletonBarChart,
 	Button: () => SkeletonButton,
 	Card: () => SkeletonCard,
+	ColumnChart: () => SkeletonColumnChart,
 	DoughnutChart: () => SkeletonDoughnutChart,
 	Heading: () => SkeletonHeading,
 	Loader: () => SkeletonLoader,
+	PanelList: () => SkeletonPanelList,
+	SubjectList: () => SkeletonSubjectList,
 	Table: () => SkeletonTable,
 	Tabs: () => SkeletonTabs
 });

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/skeleton-loader/index.ts"],"sourcesContent":["export { SkeletonLoader as Loader } from './Skeleton'\nexport { SkeletonHeading as Heading } from './SkeletonHeading'\nexport { SkeletonButton as Button } from './SkeletonButton'\nexport { SkeletonTabs as Tabs } from './SkeletonTabs'\nexport { SkeletonDoughnutChart as DoughnutChart } from './SkeletonDoughnutChart'\nexport { SkeletonTable as Table } from './SkeletonTable'\nexport { SkeletonCard as Card } from './SkeletonCard'\n"],"mappings":""}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/skeleton-loader/index.ts"],"sourcesContent":["export { SkeletonLoader as Loader } from './Skeleton'\nexport { SkeletonHeading as Heading } from './SkeletonHeading'\nexport { SkeletonButton as Button } from './SkeletonButton'\nexport { SkeletonTabs as Tabs } from './SkeletonTabs'\nexport { SkeletonDoughnutChart as DoughnutChart } from './SkeletonDoughnutChart'\nexport { SkeletonTable as Table } from './SkeletonTable'\nexport { SkeletonCard as Card } from './SkeletonCard'\nexport { SkeletonColumnChart as ColumnChart } from './SkeletonColumnChart'\nexport { SkeletonBarChart as BarChart } from './SkeletonBarChart'\nexport { SkeletonPanelList as PanelList } from './SkeletonPanelList'\nexport { SkeletonSubjectList as SubjectList } from './SkeletonSubjectList'\n"],"mappings":""}