premium-react-loaders 1.0.0

package/dist/index5.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index5.cjs","sources":["../src/components/skeleton/Skeleton.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { SkeletonProps } from '../../types';\nimport { cn, normalizeSize } from '../../utils';\n\n/**\n * Skeleton - Base skeleton loader component\n *\n * A versatile skeleton loader that can be used standalone or as a building block for more complex loaders.\n *\n * @example\n * ```tsx\n * <Skeleton width={200} height={20} />\n * <Skeleton variant=\"circular\" width={40} height={40} />\n * ```\n */\nexport const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(\n  (\n    {\n      width = '100%',\n      height = '1rem',\n      borderRadius,\n      variant = 'text',\n      animate = true,\n      baseColor = '#e0e0e0',\n      highlightColor = '#f5f5f5',\n      className,\n      style,\n      testId = 'skeleton',\n      visible = true,\n      ...rest\n    },\n    ref\n  ) => {\n    if (!visible) return null;\n\n    const getBorderRadius = () => {\n      if (borderRadius !== undefined) return normalizeSize(borderRadius);\n\n      switch (variant) {\n        case 'circular':\n          return '50%';\n        case 'rounded':\n          return '0.5rem';\n        case 'text':\n          return '0.25rem';\n        case 'rectangular':\n        default:\n          return '0';\n      }\n    };\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn(\n          'skeleton',\n          animate && 'skeleton-animate',\n          className\n        )}\n        style={{\n          width: normalizeSize(width),\n          height: normalizeSize(height),\n          borderRadius: getBorderRadius(),\n          backgroundColor: baseColor,\n          '--skeleton-highlight-color': highlightColor,\n          ...style,\n        } as React.CSSProperties}\n        role=\"status\"\n        aria-label=\"Loading...\"\n        aria-busy=\"true\"\n        {...rest}\n      />\n    );\n  }\n);\n\nSkeleton.displayName = 'Skeleton';\n"],"names":["forwardRef","normalizeSize","jsx","cn"],"mappings":";;;;;;AAeO,MAAM,WAAWA,MAAAA;AAAAA,EACtB,CACE;AAAA,IACE,QAAQ;AAAA,IACR,SAAS;AAAA,IACT;AAAA,IACA,UAAU;AAAA,IACV,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,CAAC,QAAS,QAAO;AAErB,UAAM,kBAAkB,MAAM;AAC5B,UAAI,iBAAiB,OAAW,QAAOC,OAAAA,cAAc,YAAY;AAEjE,cAAQ,SAAA;AAAA,QACN,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AAAA,QACL;AACE,iBAAO;AAAA,MAAA;AAAA,IAEb;AAEA,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAWC,WAAAA;AAAAA,UACT;AAAA,UACA,WAAW;AAAA,UACX;AAAA,QAAA;AAAA,QAEF,OAAO;AAAA,UACL,OAAOF,OAAAA,cAAc,KAAK;AAAA,UAC1B,QAAQA,OAAAA,cAAc,MAAM;AAAA,UAC5B,cAAc,gBAAA;AAAA,UACd,iBAAiB;AAAA,UACjB,8BAA8B;AAAA,UAC9B,GAAG;AAAA,QAAA;AAAA,QAEL,MAAK;AAAA,QACL,cAAW;AAAA,QACX,aAAU;AAAA,QACT,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AAEA,SAAS,cAAc;;"}

package/dist/index5.js

@@ -0,0 +1,65 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { normalizeSize } from "./index4.js";
+import { cn } from "./index3.js";
+const Skeleton = forwardRef(
+  ({
+    width = "100%",
+    height = "1rem",
+    borderRadius,
+    variant = "text",
+    animate = true,
+    baseColor = "#e0e0e0",
+    highlightColor = "#f5f5f5",
+    className,
+    style,
+    testId = "skeleton",
+    visible = true,
+    ...rest
+  }, ref) => {
+    if (!visible) return null;
+    const getBorderRadius = () => {
+      if (borderRadius !== void 0) return normalizeSize(borderRadius);
+      switch (variant) {
+        case "circular":
+          return "50%";
+        case "rounded":
+          return "0.5rem";
+        case "text":
+          return "0.25rem";
+        case "rectangular":
+        default:
+          return "0";
+      }
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-testid": testId,
+        className: cn(
+          "skeleton",
+          animate && "skeleton-animate",
+          className
+        ),
+        style: {
+          width: normalizeSize(width),
+          height: normalizeSize(height),
+          borderRadius: getBorderRadius(),
+          backgroundColor: baseColor,
+          "--skeleton-highlight-color": highlightColor,
+          ...style
+        },
+        role: "status",
+        "aria-label": "Loading...",
+        "aria-busy": "true",
+        ...rest
+      }
+    );
+  }
+);
+Skeleton.displayName = "Skeleton";
+export {
+  Skeleton
+};
+//# sourceMappingURL=index5.js.map

package/dist/index5.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index5.js","sources":["../src/components/skeleton/Skeleton.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { SkeletonProps } from '../../types';\nimport { cn, normalizeSize } from '../../utils';\n\n/**\n * Skeleton - Base skeleton loader component\n *\n * A versatile skeleton loader that can be used standalone or as a building block for more complex loaders.\n *\n * @example\n * ```tsx\n * <Skeleton width={200} height={20} />\n * <Skeleton variant=\"circular\" width={40} height={40} />\n * ```\n */\nexport const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(\n  (\n    {\n      width = '100%',\n      height = '1rem',\n      borderRadius,\n      variant = 'text',\n      animate = true,\n      baseColor = '#e0e0e0',\n      highlightColor = '#f5f5f5',\n      className,\n      style,\n      testId = 'skeleton',\n      visible = true,\n      ...rest\n    },\n    ref\n  ) => {\n    if (!visible) return null;\n\n    const getBorderRadius = () => {\n      if (borderRadius !== undefined) return normalizeSize(borderRadius);\n\n      switch (variant) {\n        case 'circular':\n          return '50%';\n        case 'rounded':\n          return '0.5rem';\n        case 'text':\n          return '0.25rem';\n        case 'rectangular':\n        default:\n          return '0';\n      }\n    };\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn(\n          'skeleton',\n          animate && 'skeleton-animate',\n          className\n        )}\n        style={{\n          width: normalizeSize(width),\n          height: normalizeSize(height),\n          borderRadius: getBorderRadius(),\n          backgroundColor: baseColor,\n          '--skeleton-highlight-color': highlightColor,\n          ...style,\n        } as React.CSSProperties}\n        role=\"status\"\n        aria-label=\"Loading...\"\n        aria-busy=\"true\"\n        {...rest}\n      />\n    );\n  }\n);\n\nSkeleton.displayName = 'Skeleton';\n"],"names":[],"mappings":";;;;AAeO,MAAM,WAAW;AAAA,EACtB,CACE;AAAA,IACE,QAAQ;AAAA,IACR,SAAS;AAAA,IACT;AAAA,IACA,UAAU;AAAA,IACV,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,CAAC,QAAS,QAAO;AAErB,UAAM,kBAAkB,MAAM;AAC5B,UAAI,iBAAiB,OAAW,QAAO,cAAc,YAAY;AAEjE,cAAQ,SAAA;AAAA,QACN,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AAAA,QACL;AACE,iBAAO;AAAA,MAAA;AAAA,IAEb;AAEA,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAW;AAAA,UACT;AAAA,UACA,WAAW;AAAA,UACX;AAAA,QAAA;AAAA,QAEF,OAAO;AAAA,UACL,OAAO,cAAc,KAAK;AAAA,UAC1B,QAAQ,cAAc,MAAM;AAAA,UAC5B,cAAc,gBAAA;AAAA,UACd,iBAAiB;AAAA,UACjB,8BAA8B;AAAA,UAC9B,GAAG;AAAA,QAAA;AAAA,QAEL,MAAK;AAAA,QACL,cAAW;AAAA,QACX,aAAU;AAAA,QACT,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AAEA,SAAS,cAAc;"}

package/dist/index6.cjs

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const Skeleton = require("./index5.cjs");
+const colors = require("./index4.cjs");
+const classNames = require("./index3.cjs");
+const SkeletonText = react.forwardRef(
+  ({
+    lines = 3,
+    width = "100%",
+    height = "1rem",
+    gap = "0.5rem",
+    animate = true,
+    baseColor,
+    highlightColor,
+    className,
+    style,
+    testId = "skeleton-text",
+    visible = true,
+    ...rest
+  }, ref) => {
+    if (!visible) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        "data-testid": testId,
+        className: classNames.cn("flex flex-col", className),
+        style: {
+          gap: colors.normalizeSize(gap),
+          ...style
+        },
+        role: "status",
+        "aria-label": "Loading text...",
+        "aria-busy": "true",
+        ...rest,
+        children: Array.from({ length: lines }).map((_, index) => {
+          const lineWidth = index === lines - 1 ? "80%" : width;
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            Skeleton.Skeleton,
+            {
+              width: lineWidth,
+              height,
+              animate,
+              baseColor,
+              highlightColor,
+              variant: "text"
+            },
+            index
+          );
+        })
+      }
+    );
+  }
+);
+SkeletonText.displayName = "SkeletonText";
+exports.SkeletonText = SkeletonText;
+//# sourceMappingURL=index6.cjs.map

package/dist/index6.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index6.cjs","sources":["../src/components/skeleton/SkeletonText.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SkeletonTextProps } from '../../types';\nimport { cn, normalizeSize } from '../../utils';\nimport { Skeleton } from './Skeleton';\n\n/**\n * SkeletonText - Multi-line text skeleton loader\n *\n * Renders multiple skeleton lines to mimic text content while loading.\n *\n * @example\n * ```tsx\n * <SkeletonText lines={3} />\n * <SkeletonText lines={5} gap={8} />\n * ```\n */\nexport const SkeletonText = forwardRef<HTMLDivElement, SkeletonTextProps>(\n  (\n    {\n      lines = 3,\n      width = '100%',\n      height = '1rem',\n      gap = '0.5rem',\n      animate = true,\n      baseColor,\n      highlightColor,\n      className,\n      style,\n      testId = 'skeleton-text',\n      visible = true,\n      ...rest\n    },\n    ref\n  ) => {\n    if (!visible) return null;\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('flex flex-col', className)}\n        style={{\n          gap: normalizeSize(gap),\n          ...style,\n        }}\n        role=\"status\"\n        aria-label=\"Loading text...\"\n        aria-busy=\"true\"\n        {...rest}\n      >\n        {Array.from({ length: lines }).map((_, index) => {\n          // Last line is typically shorter (80% width)\n          const lineWidth = index === lines - 1 ? '80%' : width;\n\n          return (\n            <Skeleton\n              key={index}\n              width={lineWidth}\n              height={height}\n              animate={animate}\n              baseColor={baseColor}\n              highlightColor={highlightColor}\n              variant=\"text\"\n            />\n          );\n        })}\n      </div>\n    );\n  }\n);\n\nSkeletonText.displayName = 'SkeletonText';\n"],"names":["forwardRef","jsx","cn","normalizeSize","Skeleton"],"mappings":";;;;;;;AAgBO,MAAM,eAAeA,MAAAA;AAAAA,EAC1B,CACE;AAAA,IACE,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,MAAM;AAAA,IACN,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,CAAC,QAAS,QAAO;AAErB,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAWC,WAAAA,GAAG,iBAAiB,SAAS;AAAA,QACxC,OAAO;AAAA,UACL,KAAKC,OAAAA,cAAc,GAAG;AAAA,UACtB,GAAG;AAAA,QAAA;AAAA,QAEL,MAAK;AAAA,QACL,cAAW;AAAA,QACX,aAAU;AAAA,QACT,GAAG;AAAA,QAEH,UAAA,MAAM,KAAK,EAAE,QAAQ,MAAA,CAAO,EAAE,IAAI,CAAC,GAAG,UAAU;AAE/C,gBAAM,YAAY,UAAU,QAAQ,IAAI,QAAQ;AAEhD,iBACEF,2BAAAA;AAAAA,YAACG,SAAAA;AAAAA,YAAA;AAAA,cAEC,OAAO;AAAA,cACP;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA,SAAQ;AAAA,YAAA;AAAA,YANH;AAAA,UAAA;AAAA,QASX,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,aAAa,cAAc;;"}

package/dist/index6.js

@@ -0,0 +1,59 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Skeleton } from "./index5.js";
+import { normalizeSize } from "./index4.js";
+import { cn } from "./index3.js";
+const SkeletonText = forwardRef(
+  ({
+    lines = 3,
+    width = "100%",
+    height = "1rem",
+    gap = "0.5rem",
+    animate = true,
+    baseColor,
+    highlightColor,
+    className,
+    style,
+    testId = "skeleton-text",
+    visible = true,
+    ...rest
+  }, ref) => {
+    if (!visible) return null;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-testid": testId,
+        className: cn("flex flex-col", className),
+        style: {
+          gap: normalizeSize(gap),
+          ...style
+        },
+        role: "status",
+        "aria-label": "Loading text...",
+        "aria-busy": "true",
+        ...rest,
+        children: Array.from({ length: lines }).map((_, index) => {
+          const lineWidth = index === lines - 1 ? "80%" : width;
+          return /* @__PURE__ */ jsx(
+            Skeleton,
+            {
+              width: lineWidth,
+              height,
+              animate,
+              baseColor,
+              highlightColor,
+              variant: "text"
+            },
+            index
+          );
+        })
+      }
+    );
+  }
+);
+SkeletonText.displayName = "SkeletonText";
+export {
+  SkeletonText
+};
+//# sourceMappingURL=index6.js.map

package/dist/index6.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index6.js","sources":["../src/components/skeleton/SkeletonText.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SkeletonTextProps } from '../../types';\nimport { cn, normalizeSize } from '../../utils';\nimport { Skeleton } from './Skeleton';\n\n/**\n * SkeletonText - Multi-line text skeleton loader\n *\n * Renders multiple skeleton lines to mimic text content while loading.\n *\n * @example\n * ```tsx\n * <SkeletonText lines={3} />\n * <SkeletonText lines={5} gap={8} />\n * ```\n */\nexport const SkeletonText = forwardRef<HTMLDivElement, SkeletonTextProps>(\n  (\n    {\n      lines = 3,\n      width = '100%',\n      height = '1rem',\n      gap = '0.5rem',\n      animate = true,\n      baseColor,\n      highlightColor,\n      className,\n      style,\n      testId = 'skeleton-text',\n      visible = true,\n      ...rest\n    },\n    ref\n  ) => {\n    if (!visible) return null;\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('flex flex-col', className)}\n        style={{\n          gap: normalizeSize(gap),\n          ...style,\n        }}\n        role=\"status\"\n        aria-label=\"Loading text...\"\n        aria-busy=\"true\"\n        {...rest}\n      >\n        {Array.from({ length: lines }).map((_, index) => {\n          // Last line is typically shorter (80% width)\n          const lineWidth = index === lines - 1 ? '80%' : width;\n\n          return (\n            <Skeleton\n              key={index}\n              width={lineWidth}\n              height={height}\n              animate={animate}\n              baseColor={baseColor}\n              highlightColor={highlightColor}\n              variant=\"text\"\n            />\n          );\n        })}\n      </div>\n    );\n  }\n);\n\nSkeletonText.displayName = 'SkeletonText';\n"],"names":[],"mappings":";;;;;AAgBO,MAAM,eAAe;AAAA,EAC1B,CACE;AAAA,IACE,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,MAAM;AAAA,IACN,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,CAAC,QAAS,QAAO;AAErB,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAW,GAAG,iBAAiB,SAAS;AAAA,QACxC,OAAO;AAAA,UACL,KAAK,cAAc,GAAG;AAAA,UACtB,GAAG;AAAA,QAAA;AAAA,QAEL,MAAK;AAAA,QACL,cAAW;AAAA,QACX,aAAU;AAAA,QACT,GAAG;AAAA,QAEH,UAAA,MAAM,KAAK,EAAE,QAAQ,MAAA,CAAO,EAAE,IAAI,CAAC,GAAG,UAAU;AAE/C,gBAAM,YAAY,UAAU,QAAQ,IAAI,QAAQ;AAEhD,iBACE;AAAA,YAAC;AAAA,YAAA;AAAA,cAEC,OAAO;AAAA,cACP;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA,SAAQ;AAAA,YAAA;AAAA,YANH;AAAA,UAAA;AAAA,QASX,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,aAAa,cAAc;"}

package/dist/index7.cjs

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const Skeleton = require("./index5.cjs");
+const colors = require("./index4.cjs");
+const SkeletonAvatar = react.forwardRef(
+  ({
+    size = 40,
+    shape = "circle",
+    animate = true,
+    baseColor,
+    highlightColor,
+    className,
+    style,
+    testId = "skeleton-avatar",
+    visible = true,
+    ...rest
+  }, ref) => {
+    if (!visible) return null;
+    const sizeValue = colors.normalizeSize(size);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Skeleton.Skeleton,
+      {
+        ref,
+        "data-testid": testId,
+        width: sizeValue,
+        height: sizeValue,
+        variant: shape === "circle" ? "circular" : "rounded",
+        animate,
+        baseColor,
+        highlightColor,
+        className,
+        style,
+        "aria-label": "Loading avatar...",
+        ...rest
+      }
+    );
+  }
+);
+SkeletonAvatar.displayName = "SkeletonAvatar";
+exports.SkeletonAvatar = SkeletonAvatar;
+//# sourceMappingURL=index7.cjs.map

package/dist/index7.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index7.cjs","sources":["../src/components/skeleton/SkeletonAvatar.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SkeletonAvatarProps } from '../../types';\nimport { normalizeSize } from '../../utils';\nimport { Skeleton } from './Skeleton';\n\n/**\n * SkeletonAvatar - Avatar skeleton loader\n *\n * A skeleton loader for avatar placeholders with circle or square shapes.\n *\n * @example\n * ```tsx\n * <SkeletonAvatar size={40} />\n * <SkeletonAvatar size={64} shape=\"square\" />\n * ```\n */\nexport const SkeletonAvatar = forwardRef<HTMLDivElement, SkeletonAvatarProps>(\n  (\n    {\n      size = 40,\n      shape = 'circle',\n      animate = true,\n      baseColor,\n      highlightColor,\n      className,\n      style,\n      testId = 'skeleton-avatar',\n      visible = true,\n      ...rest\n    },\n    ref\n  ) => {\n    if (!visible) return null;\n\n    const sizeValue = normalizeSize(size);\n\n    return (\n      <Skeleton\n        ref={ref}\n        data-testid={testId}\n        width={sizeValue}\n        height={sizeValue}\n        variant={shape === 'circle' ? 'circular' : 'rounded'}\n        animate={animate}\n        baseColor={baseColor}\n        highlightColor={highlightColor}\n        className={className}\n        style={style}\n        aria-label=\"Loading avatar...\"\n        {...rest}\n      />\n    );\n  }\n);\n\nSkeletonAvatar.displayName = 'SkeletonAvatar';\n"],"names":["forwardRef","normalizeSize","jsx","Skeleton"],"mappings":";;;;;;AAgBO,MAAM,iBAAiBA,MAAAA;AAAAA,EAC5B,CACE;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,CAAC,QAAS,QAAO;AAErB,UAAM,YAAYC,OAAAA,cAAc,IAAI;AAEpC,WACEC,2BAAAA;AAAAA,MAACC,SAAAA;AAAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,SAAS,UAAU,WAAW,aAAa;AAAA,QAC3C;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAW;AAAA,QACV,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AAEA,eAAe,cAAc;;"}

package/dist/index7.js

@@ -0,0 +1,43 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Skeleton } from "./index5.js";
+import { normalizeSize } from "./index4.js";
+const SkeletonAvatar = forwardRef(
+  ({
+    size = 40,
+    shape = "circle",
+    animate = true,
+    baseColor,
+    highlightColor,
+    className,
+    style,
+    testId = "skeleton-avatar",
+    visible = true,
+    ...rest
+  }, ref) => {
+    if (!visible) return null;
+    const sizeValue = normalizeSize(size);
+    return /* @__PURE__ */ jsx(
+      Skeleton,
+      {
+        ref,
+        "data-testid": testId,
+        width: sizeValue,
+        height: sizeValue,
+        variant: shape === "circle" ? "circular" : "rounded",
+        animate,
+        baseColor,
+        highlightColor,
+        className,
+        style,
+        "aria-label": "Loading avatar...",
+        ...rest
+      }
+    );
+  }
+);
+SkeletonAvatar.displayName = "SkeletonAvatar";
+export {
+  SkeletonAvatar
+};
+//# sourceMappingURL=index7.js.map

package/dist/index7.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index7.js","sources":["../src/components/skeleton/SkeletonAvatar.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SkeletonAvatarProps } from '../../types';\nimport { normalizeSize } from '../../utils';\nimport { Skeleton } from './Skeleton';\n\n/**\n * SkeletonAvatar - Avatar skeleton loader\n *\n * A skeleton loader for avatar placeholders with circle or square shapes.\n *\n * @example\n * ```tsx\n * <SkeletonAvatar size={40} />\n * <SkeletonAvatar size={64} shape=\"square\" />\n * ```\n */\nexport const SkeletonAvatar = forwardRef<HTMLDivElement, SkeletonAvatarProps>(\n  (\n    {\n      size = 40,\n      shape = 'circle',\n      animate = true,\n      baseColor,\n      highlightColor,\n      className,\n      style,\n      testId = 'skeleton-avatar',\n      visible = true,\n      ...rest\n    },\n    ref\n  ) => {\n    if (!visible) return null;\n\n    const sizeValue = normalizeSize(size);\n\n    return (\n      <Skeleton\n        ref={ref}\n        data-testid={testId}\n        width={sizeValue}\n        height={sizeValue}\n        variant={shape === 'circle' ? 'circular' : 'rounded'}\n        animate={animate}\n        baseColor={baseColor}\n        highlightColor={highlightColor}\n        className={className}\n        style={style}\n        aria-label=\"Loading avatar...\"\n        {...rest}\n      />\n    );\n  }\n);\n\nSkeletonAvatar.displayName = 'SkeletonAvatar';\n"],"names":[],"mappings":";;;;AAgBO,MAAM,iBAAiB;AAAA,EAC5B,CACE;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,CAAC,QAAS,QAAO;AAErB,UAAM,YAAY,cAAc,IAAI;AAEpC,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,SAAS,UAAU,WAAW,aAAa;AAAA,QAC3C;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAW;AAAA,QACV,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AAEA,eAAe,cAAc;"}

package/dist/index8.cjs

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const Skeleton = require("./index5.cjs");
+const SkeletonImage = react.forwardRef(
+  ({
+    width = "100%",
+    height = "200px",
+    aspectRatio,
+    animate = true,
+    baseColor,
+    highlightColor,
+    borderRadius = "0.5rem",
+    className,
+    style,
+    testId = "skeleton-image",
+    visible = true,
+    ...rest
+  }, ref) => {
+    if (!visible) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Skeleton.Skeleton,
+      {
+        ref,
+        "data-testid": testId,
+        width,
+        height: aspectRatio ? "auto" : height,
+        variant: "rounded",
+        borderRadius,
+        animate,
+        baseColor,
+        highlightColor,
+        className,
+        style: {
+          aspectRatio: aspectRatio || void 0,
+          ...style
+        },
+        "aria-label": "Loading image...",
+        ...rest
+      }
+    );
+  }
+);
+SkeletonImage.displayName = "SkeletonImage";
+exports.SkeletonImage = SkeletonImage;
+//# sourceMappingURL=index8.cjs.map

package/dist/index8.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index8.cjs","sources":["../src/components/skeleton/SkeletonImage.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SkeletonImageProps } from '../../types';\nimport { Skeleton } from './Skeleton';\n\n/**\n * SkeletonImage - Image skeleton loader\n *\n * A skeleton loader for image placeholders with optional aspect ratio.\n *\n * @example\n * ```tsx\n * <SkeletonImage width={300} height={200} />\n * <SkeletonImage aspectRatio=\"16/9\" width=\"100%\" />\n * ```\n */\nexport const SkeletonImage = forwardRef<HTMLDivElement, SkeletonImageProps>(\n  (\n    {\n      width = '100%',\n      height = '200px',\n      aspectRatio,\n      animate = true,\n      baseColor,\n      highlightColor,\n      borderRadius = '0.5rem',\n      className,\n      style,\n      testId = 'skeleton-image',\n      visible = true,\n      ...rest\n    },\n    ref\n  ) => {\n    if (!visible) return null;\n\n    return (\n      <Skeleton\n        ref={ref}\n        data-testid={testId}\n        width={width}\n        height={aspectRatio ? 'auto' : height}\n        variant=\"rounded\"\n        borderRadius={borderRadius}\n        animate={animate}\n        baseColor={baseColor}\n        highlightColor={highlightColor}\n        className={className}\n        style={{\n          aspectRatio: aspectRatio || undefined,\n          ...style,\n        }}\n        aria-label=\"Loading image...\"\n        {...rest}\n      />\n    );\n  }\n);\n\nSkeletonImage.displayName = 'SkeletonImage';\n"],"names":["forwardRef","jsx","Skeleton"],"mappings":";;;;;AAeO,MAAM,gBAAgBA,MAAAA;AAAAA,EAC3B,CACE;AAAA,IACE,QAAQ;AAAA,IACR,SAAS;AAAA,IACT;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,CAAC,QAAS,QAAO;AAErB,WACEC,2BAAAA;AAAAA,MAACC,SAAAA;AAAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb;AAAA,QACA,QAAQ,cAAc,SAAS;AAAA,QAC/B,SAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,OAAO;AAAA,UACL,aAAa,eAAe;AAAA,UAC5B,GAAG;AAAA,QAAA;AAAA,QAEL,cAAW;AAAA,QACV,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AAEA,cAAc,cAAc;;"}

package/dist/index8.js

@@ -0,0 +1,47 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Skeleton } from "./index5.js";
+const SkeletonImage = forwardRef(
+  ({
+    width = "100%",
+    height = "200px",
+    aspectRatio,
+    animate = true,
+    baseColor,
+    highlightColor,
+    borderRadius = "0.5rem",
+    className,
+    style,
+    testId = "skeleton-image",
+    visible = true,
+    ...rest
+  }, ref) => {
+    if (!visible) return null;
+    return /* @__PURE__ */ jsx(
+      Skeleton,
+      {
+        ref,
+        "data-testid": testId,
+        width,
+        height: aspectRatio ? "auto" : height,
+        variant: "rounded",
+        borderRadius,
+        animate,
+        baseColor,
+        highlightColor,
+        className,
+        style: {
+          aspectRatio: aspectRatio || void 0,
+          ...style
+        },
+        "aria-label": "Loading image...",
+        ...rest
+      }
+    );
+  }
+);
+SkeletonImage.displayName = "SkeletonImage";
+export {
+  SkeletonImage
+};
+//# sourceMappingURL=index8.js.map

package/dist/index8.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index8.js","sources":["../src/components/skeleton/SkeletonImage.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SkeletonImageProps } from '../../types';\nimport { Skeleton } from './Skeleton';\n\n/**\n * SkeletonImage - Image skeleton loader\n *\n * A skeleton loader for image placeholders with optional aspect ratio.\n *\n * @example\n * ```tsx\n * <SkeletonImage width={300} height={200} />\n * <SkeletonImage aspectRatio=\"16/9\" width=\"100%\" />\n * ```\n */\nexport const SkeletonImage = forwardRef<HTMLDivElement, SkeletonImageProps>(\n  (\n    {\n      width = '100%',\n      height = '200px',\n      aspectRatio,\n      animate = true,\n      baseColor,\n      highlightColor,\n      borderRadius = '0.5rem',\n      className,\n      style,\n      testId = 'skeleton-image',\n      visible = true,\n      ...rest\n    },\n    ref\n  ) => {\n    if (!visible) return null;\n\n    return (\n      <Skeleton\n        ref={ref}\n        data-testid={testId}\n        width={width}\n        height={aspectRatio ? 'auto' : height}\n        variant=\"rounded\"\n        borderRadius={borderRadius}\n        animate={animate}\n        baseColor={baseColor}\n        highlightColor={highlightColor}\n        className={className}\n        style={{\n          aspectRatio: aspectRatio || undefined,\n          ...style,\n        }}\n        aria-label=\"Loading image...\"\n        {...rest}\n      />\n    );\n  }\n);\n\nSkeletonImage.displayName = 'SkeletonImage';\n"],"names":[],"mappings":";;;AAeO,MAAM,gBAAgB;AAAA,EAC3B,CACE;AAAA,IACE,QAAQ;AAAA,IACR,SAAS;AAAA,IACT;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,CAAC,QAAS,QAAO;AAErB,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb;AAAA,QACA,QAAQ,cAAc,SAAS;AAAA,QAC/B,SAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,OAAO;AAAA,UACL,aAAa,eAAe;AAAA,UAC5B,GAAG;AAAA,QAAA;AAAA,QAEL,cAAW;AAAA,QACV,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AAEA,cAAc,cAAc;"}

package/dist/index9.cjs

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const Skeleton = require("./index5.cjs");
+const SkeletonAvatar = require("./index7.cjs");
+const classNames = require("./index3.cjs");
+const SkeletonCard = react.forwardRef(
+  ({
+    hasAvatar = true,
+    titleWidth = "60%",
+    lines = 2,
+    avatarSize = 40,
+    animate = true,
+    baseColor,
+    highlightColor,
+    className,
+    style,
+    testId = "skeleton-card",
+    visible = true,
+    ...rest
+  }, ref) => {
+    if (!visible) return null;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        "data-testid": testId,
+        className: classNames.cn("flex gap-3", className),
+        style,
+        role: "status",
+        "aria-label": "Loading card...",
+        "aria-busy": "true",
+        ...rest,
+        children: [
+          hasAvatar && /* @__PURE__ */ jsxRuntime.jsx(
+            SkeletonAvatar.SkeletonAvatar,
+            {
+              size: avatarSize,
+              animate,
+              baseColor,
+              highlightColor
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 space-y-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Skeleton.Skeleton,
+              {
+                width: titleWidth,
+                height: "1.25rem",
+                variant: "text",
+                animate,
+                baseColor,
+                highlightColor
+              }
+            ),
+            Array.from({ length: lines }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
+              Skeleton.Skeleton,
+              {
+                width: index === lines - 1 ? "70%" : "100%",
+                height: "1rem",
+                variant: "text",
+                animate,
+                baseColor,
+                highlightColor
+              },
+              index
+            ))
+          ] })
+        ]
+      }
+    );
+  }
+);
+SkeletonCard.displayName = "SkeletonCard";
+exports.SkeletonCard = SkeletonCard;
+//# sourceMappingURL=index9.cjs.map

package/dist/index9.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index9.cjs","sources":["../src/components/skeleton/SkeletonCard.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SkeletonCardProps } from '../../types';\nimport { cn } from '../../utils';\nimport { Skeleton } from './Skeleton';\nimport { SkeletonAvatar } from './SkeletonAvatar';\n\n/**\n * SkeletonCard - Card skeleton loader\n *\n * A composite skeleton loader for card layouts with optional avatar, title, and description lines.\n *\n * @example\n * ```tsx\n * <SkeletonCard />\n * <SkeletonCard hasAvatar={true} lines={3} />\n * <SkeletonCard hasAvatar={false} titleWidth=\"60%\" />\n * ```\n */\nexport const SkeletonCard = forwardRef<HTMLDivElement, SkeletonCardProps>(\n  (\n    {\n      hasAvatar = true,\n      titleWidth = '60%',\n      lines = 2,\n      avatarSize = 40,\n      animate = true,\n      baseColor,\n      highlightColor,\n      className,\n      style,\n      testId = 'skeleton-card',\n      visible = true,\n      ...rest\n    },\n    ref\n  ) => {\n    if (!visible) return null;\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('flex gap-3', className)}\n        style={style}\n        role=\"status\"\n        aria-label=\"Loading card...\"\n        aria-busy=\"true\"\n        {...rest}\n      >\n        {hasAvatar && (\n          <SkeletonAvatar\n            size={avatarSize}\n            animate={animate}\n            baseColor={baseColor}\n            highlightColor={highlightColor}\n          />\n        )}\n        <div className=\"flex-1 space-y-2\">\n          {/* Title */}\n          <Skeleton\n            width={titleWidth}\n            height=\"1.25rem\"\n            variant=\"text\"\n            animate={animate}\n            baseColor={baseColor}\n            highlightColor={highlightColor}\n          />\n          {/* Description lines */}\n          {Array.from({ length: lines }).map((_, index) => (\n            <Skeleton\n              key={index}\n              width={index === lines - 1 ? '70%' : '100%'}\n              height=\"1rem\"\n              variant=\"text\"\n              animate={animate}\n              baseColor={baseColor}\n              highlightColor={highlightColor}\n            />\n          ))}\n        </div>\n      </div>\n    );\n  }\n);\n\nSkeletonCard.displayName = 'SkeletonCard';\n"],"names":["forwardRef","jsxs","cn","jsx","SkeletonAvatar","Skeleton"],"mappings":";;;;;;;AAkBO,MAAM,eAAeA,MAAAA;AAAAA,EAC1B,CACE;AAAA,IACE,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,CAAC,QAAS,QAAO;AAErB,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAWC,WAAAA,GAAG,cAAc,SAAS;AAAA,QACrC;AAAA,QACA,MAAK;AAAA,QACL,cAAW;AAAA,QACX,aAAU;AAAA,QACT,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,aACCC,2BAAAA;AAAAA,YAACC,eAAAA;AAAAA,YAAA;AAAA,cACC,MAAM;AAAA,cACN;AAAA,cACA;AAAA,cACA;AAAA,YAAA;AAAA,UAAA;AAAA,UAGJH,2BAAAA,KAAC,OAAA,EAAI,WAAU,oBAEb,UAAA;AAAA,YAAAE,2BAAAA;AAAAA,cAACE,SAAAA;AAAAA,cAAA;AAAA,gBACC,OAAO;AAAA,gBACP,QAAO;AAAA,gBACP,SAAQ;AAAA,gBACR;AAAA,gBACA;AAAA,gBACA;AAAA,cAAA;AAAA,YAAA;AAAA,YAGD,MAAM,KAAK,EAAE,QAAQ,MAAA,CAAO,EAAE,IAAI,CAAC,GAAG,UACrCF,2BAAAA;AAAAA,cAACE,SAAAA;AAAAA,cAAA;AAAA,gBAEC,OAAO,UAAU,QAAQ,IAAI,QAAQ;AAAA,gBACrC,QAAO;AAAA,gBACP,SAAQ;AAAA,gBACR;AAAA,gBACA;AAAA,gBACA;AAAA,cAAA;AAAA,cANK;AAAA,YAAA,CAQR;AAAA,UAAA,EAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,aAAa,cAAc;;"}

package/dist/index9.js

@@ -0,0 +1,77 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Skeleton } from "./index5.js";
+import { SkeletonAvatar } from "./index7.js";
+import { cn } from "./index3.js";
+const SkeletonCard = forwardRef(
+  ({
+    hasAvatar = true,
+    titleWidth = "60%",
+    lines = 2,
+    avatarSize = 40,
+    animate = true,
+    baseColor,
+    highlightColor,
+    className,
+    style,
+    testId = "skeleton-card",
+    visible = true,
+    ...rest
+  }, ref) => {
+    if (!visible) return null;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        "data-testid": testId,
+        className: cn("flex gap-3", className),
+        style,
+        role: "status",
+        "aria-label": "Loading card...",
+        "aria-busy": "true",
+        ...rest,
+        children: [
+          hasAvatar && /* @__PURE__ */ jsx(
+            SkeletonAvatar,
+            {
+              size: avatarSize,
+              animate,
+              baseColor,
+              highlightColor
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-2", children: [
+            /* @__PURE__ */ jsx(
+              Skeleton,
+              {
+                width: titleWidth,
+                height: "1.25rem",
+                variant: "text",
+                animate,
+                baseColor,
+                highlightColor
+              }
+            ),
+            Array.from({ length: lines }).map((_, index) => /* @__PURE__ */ jsx(
+              Skeleton,
+              {
+                width: index === lines - 1 ? "70%" : "100%",
+                height: "1rem",
+                variant: "text",
+                animate,
+                baseColor,
+                highlightColor
+              },
+              index
+            ))
+          ] })
+        ]
+      }
+    );
+  }
+);
+SkeletonCard.displayName = "SkeletonCard";
+export {
+  SkeletonCard
+};
+//# sourceMappingURL=index9.js.map

package/dist/index9.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index9.js","sources":["../src/components/skeleton/SkeletonCard.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SkeletonCardProps } from '../../types';\nimport { cn } from '../../utils';\nimport { Skeleton } from './Skeleton';\nimport { SkeletonAvatar } from './SkeletonAvatar';\n\n/**\n * SkeletonCard - Card skeleton loader\n *\n * A composite skeleton loader for card layouts with optional avatar, title, and description lines.\n *\n * @example\n * ```tsx\n * <SkeletonCard />\n * <SkeletonCard hasAvatar={true} lines={3} />\n * <SkeletonCard hasAvatar={false} titleWidth=\"60%\" />\n * ```\n */\nexport const SkeletonCard = forwardRef<HTMLDivElement, SkeletonCardProps>(\n  (\n    {\n      hasAvatar = true,\n      titleWidth = '60%',\n      lines = 2,\n      avatarSize = 40,\n      animate = true,\n      baseColor,\n      highlightColor,\n      className,\n      style,\n      testId = 'skeleton-card',\n      visible = true,\n      ...rest\n    },\n    ref\n  ) => {\n    if (!visible) return null;\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('flex gap-3', className)}\n        style={style}\n        role=\"status\"\n        aria-label=\"Loading card...\"\n        aria-busy=\"true\"\n        {...rest}\n      >\n        {hasAvatar && (\n          <SkeletonAvatar\n            size={avatarSize}\n            animate={animate}\n            baseColor={baseColor}\n            highlightColor={highlightColor}\n          />\n        )}\n        <div className=\"flex-1 space-y-2\">\n          {/* Title */}\n          <Skeleton\n            width={titleWidth}\n            height=\"1.25rem\"\n            variant=\"text\"\n            animate={animate}\n            baseColor={baseColor}\n            highlightColor={highlightColor}\n          />\n          {/* Description lines */}\n          {Array.from({ length: lines }).map((_, index) => (\n            <Skeleton\n              key={index}\n              width={index === lines - 1 ? '70%' : '100%'}\n              height=\"1rem\"\n              variant=\"text\"\n              animate={animate}\n              baseColor={baseColor}\n              highlightColor={highlightColor}\n            />\n          ))}\n        </div>\n      </div>\n    );\n  }\n);\n\nSkeletonCard.displayName = 'SkeletonCard';\n"],"names":[],"mappings":";;;;;AAkBO,MAAM,eAAe;AAAA,EAC1B,CACE;AAAA,IACE,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,CAAC,QAAS,QAAO;AAErB,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAW,GAAG,cAAc,SAAS;AAAA,QACrC;AAAA,QACA,MAAK;AAAA,QACL,cAAW;AAAA,QACX,aAAU;AAAA,QACT,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,aACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAM;AAAA,cACN;AAAA,cACA;AAAA,cACA;AAAA,YAAA;AAAA,UAAA;AAAA,UAGJ,qBAAC,OAAA,EAAI,WAAU,oBAEb,UAAA;AAAA,YAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,OAAO;AAAA,gBACP,QAAO;AAAA,gBACP,SAAQ;AAAA,gBACR;AAAA,gBACA;AAAA,gBACA;AAAA,cAAA;AAAA,YAAA;AAAA,YAGD,MAAM,KAAK,EAAE,QAAQ,MAAA,CAAO,EAAE,IAAI,CAAC,GAAG,UACrC;AAAA,cAAC;AAAA,cAAA;AAAA,gBAEC,OAAO,UAAU,QAAQ,IAAI,QAAQ;AAAA,gBACrC,QAAO;AAAA,gBACP,SAAQ;AAAA,gBACR;AAAA,gBACA;AAAA,gBACA;AAAA,cAAA;AAAA,cANK;AAAA,YAAA,CAQR;AAAA,UAAA,EAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,aAAa,cAAc;"}