premium-react-loaders 1.0.2 → 1.1.0

package/dist/components/progress/ProgressSteps.d.ts

@@ -0,0 +1,16 @@
+import { ProgressStepsProps } from '../../types';
+/**
+ * ProgressSteps - Multi-step progress indicator
+ *
+ * A step-by-step progress indicator for wizards, forms, and workflows.
+ *
+ * @example
+ * ```tsx
+ * <ProgressSteps steps={4} currentStep={1} />
+ * <ProgressSteps steps={5} currentStep={2} labels={['Info', 'Review', 'Payment', 'Confirm', 'Done']} />
+ * <ProgressSteps steps={3} currentStep={1} orientation="vertical" />
+ * <ProgressSteps steps={4} currentStep={2} connector="none" />
+ * ```
+ */
+export declare const ProgressSteps: import('react').ForwardRefExoticComponent<ProgressStepsProps & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=ProgressSteps.d.ts.map

package/dist/components/progress/ProgressSteps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressSteps.d.ts","sourceRoot":"","sources":["../../../src/components/progress/ProgressSteps.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAGjD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,aAAa,+GAuIzB,CAAC"}

package/dist/components/progress/index.d.ts

@@ -1,4 +1,5 @@
 export { ProgressBar } from './ProgressBar';
 export { ProgressCircle } from './ProgressCircle';
 export { ProgressRing } from './ProgressRing';
+export { ProgressSteps } from './ProgressSteps';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/progress/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/progress/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/progress/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/components/pulse/TypingIndicator.d.ts

@@ -0,0 +1,16 @@
+import { TypingIndicatorProps } from '../../types';
+/**
+ * TypingIndicator - Chat typing indicator
+ *
+ * A loader for messaging/chat applications showing typing activity.
+ *
+ * @example
+ * ```tsx
+ * <TypingIndicator />
+ * <TypingIndicator variant="fade" />
+ * <TypingIndicator dotCount={5} color="#3b82f6" />
+ * <TypingIndicator dotSize={10} gap={6} />
+ * ```
+ */
+export declare const TypingIndicator: import('react').ForwardRefExoticComponent<TypingIndicatorProps & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=TypingIndicator.d.ts.map

package/dist/components/pulse/TypingIndicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TypingIndicator.d.ts","sourceRoot":"","sources":["../../../src/components/pulse/TypingIndicator.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAGnD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,eAAe,iHAuD3B,CAAC"}

package/dist/components/pulse/index.d.ts

@@ -1,4 +1,5 @@
 export { PulseDots } from './PulseDots';
 export { PulseWave } from './PulseWave';
 export { PulseBars } from './PulseBars';
+export { TypingIndicator } from './TypingIndicator';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/pulse/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/pulse/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/pulse/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/components/skeleton/SkeletonForm.d.ts

@@ -0,0 +1,16 @@
+import { SkeletonFormProps } from '../../types';
+/**
+ * SkeletonForm - Form loading skeleton
+ *
+ * A skeleton loader for form layouts with configurable fields, labels, and submit button.
+ *
+ * @example
+ * ```tsx
+ * <SkeletonForm />
+ * <SkeletonForm fields={5} showLabels={true} />
+ * <SkeletonForm fields={3} showButton={false} />
+ * <SkeletonForm fields={4} buttonPosition="right" />
+ * ```
+ */
+export declare const SkeletonForm: import('react').ForwardRefExoticComponent<SkeletonFormProps & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=SkeletonForm.d.ts.map

package/dist/components/skeleton/SkeletonForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonForm.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/SkeletonForm.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAIhD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,YAAY,8GAmFxB,CAAC"}

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

@@ -6,4 +6,5 @@ export { SkeletonCard } from './SkeletonCard';
 export { SkeletonList } from './SkeletonList';
 export { SkeletonTable } from './SkeletonTable';
 export { SkeletonPage } from './SkeletonPage';
+export { SkeletonForm } from './SkeletonForm';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/skeleton/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/components/spinner/SpinnerPulse.d.ts

@@ -0,0 +1,15 @@
+import { SpinnerPulseProps } from '../../types';
+/**
+ * SpinnerPulse - Heartbeat pulse spinner
+ *
+ * A spinner with pulsing circles that scale and fade, creating a heartbeat effect.
+ *
+ * @example
+ * ```tsx
+ * <SpinnerPulse size={60} color="#3b82f6" />
+ * <SpinnerPulse size={80} pulses={3} />
+ * <SpinnerPulse size={50} maxScale={2.5} speed="slow" />
+ * ```
+ */
+export declare const SpinnerPulse: import('react').ForwardRefExoticComponent<SpinnerPulseProps & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=SpinnerPulse.d.ts.map

package/dist/components/spinner/SpinnerPulse.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpinnerPulse.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/SpinnerPulse.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAGhD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,YAAY,8GAsExB,CAAC"}

package/dist/components/spinner/SpinnerWave.d.ts

@@ -0,0 +1,15 @@
+import { SpinnerWaveProps } from '../../types';
+/**
+ * SpinnerWave - Ripple wave spinner
+ *
+ * A spinner with expanding ripple circles creating a wave effect.
+ *
+ * @example
+ * ```tsx
+ * <SpinnerWave size={60} color="#3b82f6" />
+ * <SpinnerWave size={80} ripples={5} />
+ * <SpinnerWave size={50} maxScale={2.5} speed="fast" />
+ * ```
+ */
+export declare const SpinnerWave: import('react').ForwardRefExoticComponent<SpinnerWaveProps & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=SpinnerWave.d.ts.map

package/dist/components/spinner/SpinnerWave.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpinnerWave.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/SpinnerWave.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAG/C;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,WAAW,6GA0DvB,CAAC"}

package/dist/components/spinner/index.d.ts

@@ -3,4 +3,6 @@ export { SpinnerRing } from './SpinnerRing';
 export { SpinnerDots } from './SpinnerDots';
 export { SpinnerBars } from './SpinnerBars';
 export { SpinnerGrid } from './SpinnerGrid';
+export { SpinnerWave } from './SpinnerWave';
+export { SpinnerPulse } from './SpinnerPulse';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/spinner/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/index.cjs

@@ -11,19 +11,24 @@ const SkeletonCard = require("./index9.cjs");
 const SkeletonList = require("./index10.cjs");
 const SkeletonTable = require("./index11.cjs");
 const SkeletonPage = require("./index12.cjs");
-const SpinnerCircle = require("./index13.cjs");
-const SpinnerRing = require("./index14.cjs");
-const SpinnerDots = require("./index15.cjs");
-const SpinnerBars = require("./index16.cjs");
-const SpinnerGrid = require("./index17.cjs");
-const ProgressBar = require("./index18.cjs");
-const ProgressCircle = require("./index19.cjs");
-const ProgressRing = require("./index20.cjs");
-const PulseDots = require("./index21.cjs");
-const PulseWave = require("./index22.cjs");
-const PulseBars = require("./index23.cjs");
-const LoaderOverlay = require("./index24.cjs");
-const version = "1.0.2";
+const SkeletonForm = require("./index13.cjs");
+const SpinnerCircle = require("./index14.cjs");
+const SpinnerRing = require("./index15.cjs");
+const SpinnerDots = require("./index16.cjs");
+const SpinnerBars = require("./index17.cjs");
+const SpinnerGrid = require("./index18.cjs");
+const SpinnerWave = require("./index19.cjs");
+const SpinnerPulse = require("./index20.cjs");
+const ProgressBar = require("./index21.cjs");
+const ProgressCircle = require("./index22.cjs");
+const ProgressRing = require("./index23.cjs");
+const ProgressSteps = require("./index24.cjs");
+const PulseDots = require("./index25.cjs");
+const PulseWave = require("./index26.cjs");
+const PulseBars = require("./index27.cjs");
+const TypingIndicator = require("./index28.cjs");
+const LoaderOverlay = require("./index29.cjs");
+const version = "1.1.0";
 exports.cn = classNames.cn;
 exports.getAnimationDuration = colors.getAnimationDuration;
 exports.normalizeSize = colors.normalizeSize;
@@ -35,17 +40,22 @@ exports.SkeletonCard = SkeletonCard.SkeletonCard;
 exports.SkeletonList = SkeletonList.SkeletonList;
 exports.SkeletonTable = SkeletonTable.SkeletonTable;
 exports.SkeletonPage = SkeletonPage.SkeletonPage;
+exports.SkeletonForm = SkeletonForm.SkeletonForm;
 exports.SpinnerCircle = SpinnerCircle.SpinnerCircle;
 exports.SpinnerRing = SpinnerRing.SpinnerRing;
 exports.SpinnerDots = SpinnerDots.SpinnerDots;
 exports.SpinnerBars = SpinnerBars.SpinnerBars;
 exports.SpinnerGrid = SpinnerGrid.SpinnerGrid;
+exports.SpinnerWave = SpinnerWave.SpinnerWave;
+exports.SpinnerPulse = SpinnerPulse.SpinnerPulse;
 exports.ProgressBar = ProgressBar.ProgressBar;
 exports.ProgressCircle = ProgressCircle.ProgressCircle;
 exports.ProgressRing = ProgressRing.ProgressRing;
+exports.ProgressSteps = ProgressSteps.ProgressSteps;
 exports.PulseDots = PulseDots.PulseDots;
 exports.PulseWave = PulseWave.PulseWave;
 exports.PulseBars = PulseBars.PulseBars;
+exports.TypingIndicator = TypingIndicator.TypingIndicator;
 exports.LoaderOverlay = LoaderOverlay.LoaderOverlay;
 exports.version = version;
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../src/index.ts"],"sourcesContent":["// Import styles\nimport './styles/index.css';\n\n// Component exports\nexport * from './components';\n\n// Type exports\nexport type * from './types';\n\n// Utility exports\nexport { cn } from './utils/classNames';\nexport { getAnimationDuration, normalizeSize } from './utils/colors';\n\n// Version\nexport const version = '1.0.2';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAcO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":["../src/index.ts"],"sourcesContent":["// Import styles\nimport './styles/index.css';\n\n// Component exports\nexport * from './components';\n\n// Type exports\nexport type * from './types';\n\n// Utility exports\nexport { cn } from './utils/classNames';\nexport { getAnimationDuration, normalizeSize } from './utils/colors';\n\n// Version\nexport const version = '1.1.0';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.d.ts

@@ -2,5 +2,5 @@ export * from './components';
 export type * from './types';
 export { cn } from './utils/classNames';
 export { getAnimationDuration, normalizeSize } from './utils/colors';
-export declare const version = "1.0.2";
+export declare const version = "1.1.0";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -9,30 +9,37 @@ import { SkeletonCard } from "./index9.js";
 import { SkeletonList } from "./index10.js";
 import { SkeletonTable } from "./index11.js";
 import { SkeletonPage } from "./index12.js";
-import { SpinnerCircle } from "./index13.js";
-import { SpinnerRing } from "./index14.js";
-import { SpinnerDots } from "./index15.js";
-import { SpinnerBars } from "./index16.js";
-import { SpinnerGrid } from "./index17.js";
-import { ProgressBar } from "./index18.js";
-import { ProgressCircle } from "./index19.js";
-import { ProgressRing } from "./index20.js";
-import { PulseDots } from "./index21.js";
-import { PulseWave } from "./index22.js";
-import { PulseBars } from "./index23.js";
-import { LoaderOverlay } from "./index24.js";
-const version = "1.0.2";
+import { SkeletonForm } from "./index13.js";
+import { SpinnerCircle } from "./index14.js";
+import { SpinnerRing } from "./index15.js";
+import { SpinnerDots } from "./index16.js";
+import { SpinnerBars } from "./index17.js";
+import { SpinnerGrid } from "./index18.js";
+import { SpinnerWave } from "./index19.js";
+import { SpinnerPulse } from "./index20.js";
+import { ProgressBar } from "./index21.js";
+import { ProgressCircle } from "./index22.js";
+import { ProgressRing } from "./index23.js";
+import { ProgressSteps } from "./index24.js";
+import { PulseDots } from "./index25.js";
+import { PulseWave } from "./index26.js";
+import { PulseBars } from "./index27.js";
+import { TypingIndicator } from "./index28.js";
+import { LoaderOverlay } from "./index29.js";
+const version = "1.1.0";
 export {
   LoaderOverlay,
   ProgressBar,
   ProgressCircle,
   ProgressRing,
+  ProgressSteps,
   PulseBars,
   PulseDots,
   PulseWave,
   Skeleton,
   SkeletonAvatar,
   SkeletonCard,
+  SkeletonForm,
   SkeletonImage,
   SkeletonList,
   SkeletonPage,
@@ -42,7 +49,10 @@ export {
   SpinnerCircle,
   SpinnerDots,
   SpinnerGrid,
+  SpinnerPulse,
   SpinnerRing,
+  SpinnerWave,
+  TypingIndicator,
   cn,
   getAnimationDuration,
   normalizeSize,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":["// Import styles\nimport './styles/index.css';\n\n// Component exports\nexport * from './components';\n\n// Type exports\nexport type * from './types';\n\n// Utility exports\nexport { cn } from './utils/classNames';\nexport { getAnimationDuration, normalizeSize } from './utils/colors';\n\n// Version\nexport const version = '1.0.2';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAcO,MAAM,UAAU;"}
+{"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":["// Import styles\nimport './styles/index.css';\n\n// Component exports\nexport * from './components';\n\n// Type exports\nexport type * from './types';\n\n// Utility exports\nexport { cn } from './utils/classNames';\nexport { getAnimationDuration, normalizeSize } from './utils/colors';\n\n// Version\nexport const version = '1.1.0';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcO,MAAM,UAAU;"}

package/dist/index13.cjs

@@ -2,62 +2,81 @@
 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 SpinnerCircle = react.forwardRef(
+const SkeletonForm = react.forwardRef(
   ({
-    size = 40,
-    color = "#3b82f6",
-    thickness = 4,
-    speed = "normal",
+    fields = 3,
+    showLabels = true,
+    showButton = true,
+    gap = 16,
+    buttonWidth = "120px",
+    buttonPosition = "left",
+    animate = true,
+    baseColor,
+    highlightColor,
     className,
     style,
-    testId = "spinner-circle",
+    testId = "skeleton-form",
     visible = true,
-    ariaLabel = "Loading...",
     ...rest
   }, ref) => {
     if (!visible) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx(
+    const gapValue = colors.normalizeSize(gap);
+    const buttonAlign = buttonPosition === "left" ? "justify-start" : buttonPosition === "right" ? "justify-end" : "justify-center";
+    return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         ref,
         "data-testid": testId,
-        className: classNames.cn("inline-flex items-center justify-center", className),
-        style,
+        className: classNames.cn("w-full", className),
+        style: { ...style, display: "flex", flexDirection: "column", gap: gapValue },
         role: "status",
-        "aria-label": ariaLabel,
+        "aria-label": "Loading form...",
         "aria-busy": "true",
         ...rest,
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          "svg",
-          {
-            className: "animate-spinner-rotate",
-            style: {
-              width: colors.normalizeSize(size),
-              height: colors.normalizeSize(size),
-              animationDuration: colors.getAnimationDuration(speed)
-            },
-            viewBox: "0 0 50 50",
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              "circle",
+        children: [
+          Array.from({ length: fields }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full", style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [
+            showLabels && /* @__PURE__ */ jsxRuntime.jsx(
+              Skeleton.Skeleton,
               {
-                cx: "25",
-                cy: "25",
-                r: 25 - thickness * 2,
-                fill: "none",
-                stroke: color,
-                strokeWidth: thickness,
-                strokeDasharray: "80, 200",
-                strokeLinecap: "round"
+                width: "30%",
+                height: "0.875rem",
+                variant: "text",
+                animate,
+                baseColor,
+                highlightColor
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Skeleton.Skeleton,
+              {
+                width: "100%",
+                height: "2.5rem",
+                variant: "rectangular",
+                animate,
+                baseColor,
+                highlightColor
               }
             )
-          }
-        )
+          ] }, index)),
+          showButton && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames.cn("flex", buttonAlign), style: { marginTop: "8px" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+            Skeleton.Skeleton,
+            {
+              width: buttonWidth,
+              height: "2.5rem",
+              variant: "rounded",
+              animate,
+              baseColor,
+              highlightColor
+            }
+          ) })
+        ]
       }
     );
   }
 );
-SpinnerCircle.displayName = "SpinnerCircle";
-exports.SpinnerCircle = SpinnerCircle;
+SkeletonForm.displayName = "SkeletonForm";
+exports.SkeletonForm = SkeletonForm;
 //# sourceMappingURL=index13.cjs.map

package/dist/index13.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index13.cjs","sources":["../src/components/spinner/SpinnerCircle.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SpinnerCircleProps } from '../../types';\nimport { cn, normalizeSize, getAnimationDuration } from '../../utils';\n\n/**\n * SpinnerCircle - Basic rotating circle spinner\n *\n * A simple, elegant circular spinner with a partial arc that rotates continuously.\n *\n * @example\n * ```tsx\n * <SpinnerCircle size={40} color=\"#3b82f6\" />\n * <SpinnerCircle size={24} thickness={3} speed=\"fast\" />\n * ```\n */\nexport const SpinnerCircle = forwardRef<HTMLDivElement, SpinnerCircleProps>(\n  (\n    {\n      size = 40,\n      color = '#3b82f6',\n      thickness = 4,\n      speed = 'normal',\n      className,\n      style,\n      testId = 'spinner-circle',\n      visible = true,\n      ariaLabel = 'Loading...',\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('inline-flex items-center justify-center', className)}\n        style={style}\n        role=\"status\"\n        aria-label={ariaLabel}\n        aria-busy=\"true\"\n        {...rest}\n      >\n        <svg\n          className=\"animate-spinner-rotate\"\n          style={{\n            width: normalizeSize(size),\n            height: normalizeSize(size),\n            animationDuration: getAnimationDuration(speed),\n          }}\n          viewBox=\"0 0 50 50\"\n        >\n          <circle\n            cx=\"25\"\n            cy=\"25\"\n            r={25 - thickness * 2}\n            fill=\"none\"\n            stroke={color}\n            strokeWidth={thickness}\n            strokeDasharray=\"80, 200\"\n            strokeLinecap=\"round\"\n          />\n        </svg>\n      </div>\n    );\n  }\n);\n\nSpinnerCircle.displayName = 'SpinnerCircle';\n"],"names":["forwardRef","jsx","cn","normalizeSize","getAnimationDuration"],"mappings":";;;;;;AAeO,MAAM,gBAAgBA,MAAAA;AAAAA,EAC3B,CACE;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,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,2CAA2C,SAAS;AAAA,QAClE;AAAA,QACA,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,aAAU;AAAA,QACT,GAAG;AAAA,QAEJ,UAAAD,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,OAAOE,OAAAA,cAAc,IAAI;AAAA,cACzB,QAAQA,OAAAA,cAAc,IAAI;AAAA,cAC1B,mBAAmBC,OAAAA,qBAAqB,KAAK;AAAA,YAAA;AAAA,YAE/C,SAAQ;AAAA,YAER,UAAAH,2BAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBACC,IAAG;AAAA,gBACH,IAAG;AAAA,gBACH,GAAG,KAAK,YAAY;AAAA,gBACpB,MAAK;AAAA,gBACL,QAAQ;AAAA,gBACR,aAAa;AAAA,gBACb,iBAAgB;AAAA,gBAChB,eAAc;AAAA,cAAA;AAAA,YAAA;AAAA,UAChB;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,cAAc,cAAc;;"}
+{"version":3,"file":"index13.cjs","sources":["../src/components/skeleton/SkeletonForm.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SkeletonFormProps } from '../../types';\nimport { cn, normalizeSize } from '../../utils';\nimport { Skeleton } from './Skeleton';\n\n/**\n * SkeletonForm - Form loading skeleton\n *\n * A skeleton loader for form layouts with configurable fields, labels, and submit button.\n *\n * @example\n * ```tsx\n * <SkeletonForm />\n * <SkeletonForm fields={5} showLabels={true} />\n * <SkeletonForm fields={3} showButton={false} />\n * <SkeletonForm fields={4} buttonPosition=\"right\" />\n * ```\n */\nexport const SkeletonForm = forwardRef<HTMLDivElement, SkeletonFormProps>(\n  (\n    {\n      fields = 3,\n      showLabels = true,\n      showButton = true,\n      gap = 16,\n      buttonWidth = '120px',\n      buttonPosition = 'left',\n      animate = true,\n      baseColor,\n      highlightColor,\n      className,\n      style,\n      testId = 'skeleton-form',\n      visible = true,\n      ...rest\n    },\n    ref\n  ) => {\n    if (!visible) return null;\n\n    const gapValue = normalizeSize(gap);\n    const buttonAlign =\n      buttonPosition === 'left'\n        ? 'justify-start'\n        : buttonPosition === 'right'\n        ? 'justify-end'\n        : 'justify-center';\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('w-full', className)}\n        style={{ ...style, display: 'flex', flexDirection: 'column', gap: gapValue }}\n        role=\"status\"\n        aria-label=\"Loading form...\"\n        aria-busy=\"true\"\n        {...rest}\n      >\n        {/* Form Fields */}\n        {Array.from({ length: fields }).map((_, index) => (\n          <div key={index} className=\"w-full\" style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>\n            {/* Field Label */}\n            {showLabels && (\n              <Skeleton\n                width=\"30%\"\n                height=\"0.875rem\"\n                variant=\"text\"\n                animate={animate}\n                baseColor={baseColor}\n                highlightColor={highlightColor}\n              />\n            )}\n            {/* Field Input */}\n            <Skeleton\n              width=\"100%\"\n              height=\"2.5rem\"\n              variant=\"rectangular\"\n              animate={animate}\n              baseColor={baseColor}\n              highlightColor={highlightColor}\n            />\n          </div>\n        ))}\n\n        {/* Submit Button */}\n        {showButton && (\n          <div className={cn('flex', buttonAlign)} style={{ marginTop: '8px' }}>\n            <Skeleton\n              width={buttonWidth}\n              height=\"2.5rem\"\n              variant=\"rounded\"\n              animate={animate}\n              baseColor={baseColor}\n              highlightColor={highlightColor}\n            />\n          </div>\n        )}\n      </div>\n    );\n  }\n);\n\nSkeletonForm.displayName = 'SkeletonForm';\n"],"names":["forwardRef","normalizeSize","jsxs","cn","jsx","Skeleton"],"mappings":";;;;;;;AAkBO,MAAM,eAAeA,MAAAA;AAAAA,EAC1B,CACE;AAAA,IACE,SAAS;AAAA,IACT,aAAa;AAAA,IACb,aAAa;AAAA,IACb,MAAM;AAAA,IACN,cAAc;AAAA,IACd,iBAAiB;AAAA,IACjB,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,WAAWC,OAAAA,cAAc,GAAG;AAClC,UAAM,cACJ,mBAAmB,SACf,kBACA,mBAAmB,UACnB,gBACA;AAEN,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAWC,WAAAA,GAAG,UAAU,SAAS;AAAA,QACjC,OAAO,EAAE,GAAG,OAAO,SAAS,QAAQ,eAAe,UAAU,KAAK,SAAA;AAAA,QAClE,MAAK;AAAA,QACL,cAAW;AAAA,QACX,aAAU;AAAA,QACT,GAAG;AAAA,QAGH,UAAA;AAAA,UAAA,MAAM,KAAK,EAAE,QAAQ,OAAA,CAAQ,EAAE,IAAI,CAAC,GAAG,UACtCD,2BAAAA,KAAC,SAAgB,WAAU,UAAS,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,MAAA,GAEzF,UAAA;AAAA,YAAA,cACCE,2BAAAA;AAAAA,cAACC,SAAAA;AAAAA,cAAA;AAAA,gBACC,OAAM;AAAA,gBACN,QAAO;AAAA,gBACP,SAAQ;AAAA,gBACR;AAAA,gBACA;AAAA,gBACA;AAAA,cAAA;AAAA,YAAA;AAAA,YAIJD,2BAAAA;AAAAA,cAACC,SAAAA;AAAAA,cAAA;AAAA,gBACC,OAAM;AAAA,gBACN,QAAO;AAAA,gBACP,SAAQ;AAAA,gBACR;AAAA,gBACA;AAAA,gBACA;AAAA,cAAA;AAAA,YAAA;AAAA,UACF,EAAA,GApBQ,KAqBV,CACD;AAAA,UAGA,cACCD,2BAAAA,IAAC,OAAA,EAAI,WAAWD,WAAAA,GAAG,QAAQ,WAAW,GAAG,OAAO,EAAE,WAAW,MAAA,GAC3D,UAAAC,2BAAAA;AAAAA,YAACC,SAAAA;AAAAA,YAAA;AAAA,cACC,OAAO;AAAA,cACP,QAAO;AAAA,cACP,SAAQ;AAAA,cACR;AAAA,cACA;AAAA,cACA;AAAA,YAAA;AAAA,UAAA,EACF,CACF;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,aAAa,cAAc;;"}

package/dist/index13.js

@@ -1,63 +1,82 @@
-import { jsx } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { getAnimationDuration, normalizeSize } from "./index4.js";
+import { Skeleton } from "./index5.js";
+import { normalizeSize } from "./index4.js";
 import { cn } from "./index3.js";
-const SpinnerCircle = forwardRef(
+const SkeletonForm = forwardRef(
   ({
-    size = 40,
-    color = "#3b82f6",
-    thickness = 4,
-    speed = "normal",
+    fields = 3,
+    showLabels = true,
+    showButton = true,
+    gap = 16,
+    buttonWidth = "120px",
+    buttonPosition = "left",
+    animate = true,
+    baseColor,
+    highlightColor,
     className,
     style,
-    testId = "spinner-circle",
+    testId = "skeleton-form",
     visible = true,
-    ariaLabel = "Loading...",
     ...rest
   }, ref) => {
     if (!visible) return null;
-    return /* @__PURE__ */ jsx(
+    const gapValue = normalizeSize(gap);
+    const buttonAlign = buttonPosition === "left" ? "justify-start" : buttonPosition === "right" ? "justify-end" : "justify-center";
+    return /* @__PURE__ */ jsxs(
       "div",
       {
         ref,
         "data-testid": testId,
-        className: cn("inline-flex items-center justify-center", className),
-        style,
+        className: cn("w-full", className),
+        style: { ...style, display: "flex", flexDirection: "column", gap: gapValue },
         role: "status",
-        "aria-label": ariaLabel,
+        "aria-label": "Loading form...",
         "aria-busy": "true",
         ...rest,
-        children: /* @__PURE__ */ jsx(
-          "svg",
-          {
-            className: "animate-spinner-rotate",
-            style: {
-              width: normalizeSize(size),
-              height: normalizeSize(size),
-              animationDuration: getAnimationDuration(speed)
-            },
-            viewBox: "0 0 50 50",
-            children: /* @__PURE__ */ jsx(
-              "circle",
+        children: [
+          Array.from({ length: fields }).map((_, index) => /* @__PURE__ */ jsxs("div", { className: "w-full", style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [
+            showLabels && /* @__PURE__ */ jsx(
+              Skeleton,
               {
-                cx: "25",
-                cy: "25",
-                r: 25 - thickness * 2,
-                fill: "none",
-                stroke: color,
-                strokeWidth: thickness,
-                strokeDasharray: "80, 200",
-                strokeLinecap: "round"
+                width: "30%",
+                height: "0.875rem",
+                variant: "text",
+                animate,
+                baseColor,
+                highlightColor
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Skeleton,
+              {
+                width: "100%",
+                height: "2.5rem",
+                variant: "rectangular",
+                animate,
+                baseColor,
+                highlightColor
               }
             )
-          }
-        )
+          ] }, index)),
+          showButton && /* @__PURE__ */ jsx("div", { className: cn("flex", buttonAlign), style: { marginTop: "8px" }, children: /* @__PURE__ */ jsx(
+            Skeleton,
+            {
+              width: buttonWidth,
+              height: "2.5rem",
+              variant: "rounded",
+              animate,
+              baseColor,
+              highlightColor
+            }
+          ) })
+        ]
       }
     );
   }
 );
-SpinnerCircle.displayName = "SpinnerCircle";
+SkeletonForm.displayName = "SkeletonForm";
 export {
-  SpinnerCircle
+  SkeletonForm
 };
 //# sourceMappingURL=index13.js.map

package/dist/index13.js.map

@@ -1 +1 @@
-{"version":3,"file":"index13.js","sources":["../src/components/spinner/SpinnerCircle.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SpinnerCircleProps } from '../../types';\nimport { cn, normalizeSize, getAnimationDuration } from '../../utils';\n\n/**\n * SpinnerCircle - Basic rotating circle spinner\n *\n * A simple, elegant circular spinner with a partial arc that rotates continuously.\n *\n * @example\n * ```tsx\n * <SpinnerCircle size={40} color=\"#3b82f6\" />\n * <SpinnerCircle size={24} thickness={3} speed=\"fast\" />\n * ```\n */\nexport const SpinnerCircle = forwardRef<HTMLDivElement, SpinnerCircleProps>(\n  (\n    {\n      size = 40,\n      color = '#3b82f6',\n      thickness = 4,\n      speed = 'normal',\n      className,\n      style,\n      testId = 'spinner-circle',\n      visible = true,\n      ariaLabel = 'Loading...',\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('inline-flex items-center justify-center', className)}\n        style={style}\n        role=\"status\"\n        aria-label={ariaLabel}\n        aria-busy=\"true\"\n        {...rest}\n      >\n        <svg\n          className=\"animate-spinner-rotate\"\n          style={{\n            width: normalizeSize(size),\n            height: normalizeSize(size),\n            animationDuration: getAnimationDuration(speed),\n          }}\n          viewBox=\"0 0 50 50\"\n        >\n          <circle\n            cx=\"25\"\n            cy=\"25\"\n            r={25 - thickness * 2}\n            fill=\"none\"\n            stroke={color}\n            strokeWidth={thickness}\n            strokeDasharray=\"80, 200\"\n            strokeLinecap=\"round\"\n          />\n        </svg>\n      </div>\n    );\n  }\n);\n\nSpinnerCircle.displayName = 'SpinnerCircle';\n"],"names":[],"mappings":";;;;AAeO,MAAM,gBAAgB;AAAA,EAC3B,CACE;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,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,2CAA2C,SAAS;AAAA,QAClE;AAAA,QACA,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,aAAU;AAAA,QACT,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,OAAO,cAAc,IAAI;AAAA,cACzB,QAAQ,cAAc,IAAI;AAAA,cAC1B,mBAAmB,qBAAqB,KAAK;AAAA,YAAA;AAAA,YAE/C,SAAQ;AAAA,YAER,UAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,IAAG;AAAA,gBACH,IAAG;AAAA,gBACH,GAAG,KAAK,YAAY;AAAA,gBACpB,MAAK;AAAA,gBACL,QAAQ;AAAA,gBACR,aAAa;AAAA,gBACb,iBAAgB;AAAA,gBAChB,eAAc;AAAA,cAAA;AAAA,YAAA;AAAA,UAChB;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,cAAc,cAAc;"}
+{"version":3,"file":"index13.js","sources":["../src/components/skeleton/SkeletonForm.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SkeletonFormProps } from '../../types';\nimport { cn, normalizeSize } from '../../utils';\nimport { Skeleton } from './Skeleton';\n\n/**\n * SkeletonForm - Form loading skeleton\n *\n * A skeleton loader for form layouts with configurable fields, labels, and submit button.\n *\n * @example\n * ```tsx\n * <SkeletonForm />\n * <SkeletonForm fields={5} showLabels={true} />\n * <SkeletonForm fields={3} showButton={false} />\n * <SkeletonForm fields={4} buttonPosition=\"right\" />\n * ```\n */\nexport const SkeletonForm = forwardRef<HTMLDivElement, SkeletonFormProps>(\n  (\n    {\n      fields = 3,\n      showLabels = true,\n      showButton = true,\n      gap = 16,\n      buttonWidth = '120px',\n      buttonPosition = 'left',\n      animate = true,\n      baseColor,\n      highlightColor,\n      className,\n      style,\n      testId = 'skeleton-form',\n      visible = true,\n      ...rest\n    },\n    ref\n  ) => {\n    if (!visible) return null;\n\n    const gapValue = normalizeSize(gap);\n    const buttonAlign =\n      buttonPosition === 'left'\n        ? 'justify-start'\n        : buttonPosition === 'right'\n        ? 'justify-end'\n        : 'justify-center';\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('w-full', className)}\n        style={{ ...style, display: 'flex', flexDirection: 'column', gap: gapValue }}\n        role=\"status\"\n        aria-label=\"Loading form...\"\n        aria-busy=\"true\"\n        {...rest}\n      >\n        {/* Form Fields */}\n        {Array.from({ length: fields }).map((_, index) => (\n          <div key={index} className=\"w-full\" style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>\n            {/* Field Label */}\n            {showLabels && (\n              <Skeleton\n                width=\"30%\"\n                height=\"0.875rem\"\n                variant=\"text\"\n                animate={animate}\n                baseColor={baseColor}\n                highlightColor={highlightColor}\n              />\n            )}\n            {/* Field Input */}\n            <Skeleton\n              width=\"100%\"\n              height=\"2.5rem\"\n              variant=\"rectangular\"\n              animate={animate}\n              baseColor={baseColor}\n              highlightColor={highlightColor}\n            />\n          </div>\n        ))}\n\n        {/* Submit Button */}\n        {showButton && (\n          <div className={cn('flex', buttonAlign)} style={{ marginTop: '8px' }}>\n            <Skeleton\n              width={buttonWidth}\n              height=\"2.5rem\"\n              variant=\"rounded\"\n              animate={animate}\n              baseColor={baseColor}\n              highlightColor={highlightColor}\n            />\n          </div>\n        )}\n      </div>\n    );\n  }\n);\n\nSkeletonForm.displayName = 'SkeletonForm';\n"],"names":[],"mappings":";;;;;AAkBO,MAAM,eAAe;AAAA,EAC1B,CACE;AAAA,IACE,SAAS;AAAA,IACT,aAAa;AAAA,IACb,aAAa;AAAA,IACb,MAAM;AAAA,IACN,cAAc;AAAA,IACd,iBAAiB;AAAA,IACjB,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,WAAW,cAAc,GAAG;AAClC,UAAM,cACJ,mBAAmB,SACf,kBACA,mBAAmB,UACnB,gBACA;AAEN,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAW,GAAG,UAAU,SAAS;AAAA,QACjC,OAAO,EAAE,GAAG,OAAO,SAAS,QAAQ,eAAe,UAAU,KAAK,SAAA;AAAA,QAClE,MAAK;AAAA,QACL,cAAW;AAAA,QACX,aAAU;AAAA,QACT,GAAG;AAAA,QAGH,UAAA;AAAA,UAAA,MAAM,KAAK,EAAE,QAAQ,OAAA,CAAQ,EAAE,IAAI,CAAC,GAAG,UACtC,qBAAC,SAAgB,WAAU,UAAS,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,MAAA,GAEzF,UAAA;AAAA,YAAA,cACC;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,OAAM;AAAA,gBACN,QAAO;AAAA,gBACP,SAAQ;AAAA,gBACR;AAAA,gBACA;AAAA,gBACA;AAAA,cAAA;AAAA,YAAA;AAAA,YAIJ;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,OAAM;AAAA,gBACN,QAAO;AAAA,gBACP,SAAQ;AAAA,gBACR;AAAA,gBACA;AAAA,gBACA;AAAA,cAAA;AAAA,YAAA;AAAA,UACF,EAAA,GApBQ,KAqBV,CACD;AAAA,UAGA,cACC,oBAAC,OAAA,EAAI,WAAW,GAAG,QAAQ,WAAW,GAAG,OAAO,EAAE,WAAW,MAAA,GAC3D,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,OAAO;AAAA,cACP,QAAO;AAAA,cACP,SAAQ;AAAA,cACR;AAAA,cACA;AAAA,cACA;AAAA,YAAA;AAAA,UAAA,EACF,CACF;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,aAAa,cAAc;"}