@helpwave/hightide 0.0.13 → 0.0.16

package/dist/components/ProgressIndicator.mjs

@@ -0,0 +1,59 @@
+// src/components/ProgressIndicator.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var sizeMapping = { small: 16, medium: 24, big: 48 };
+var ProgressIndicator = ({
+  progress,
+  strokeWidth = 5,
+  size = "medium",
+  direction = "counterclockwise",
+  rotation = 0
+}) => {
+  const currentSize = sizeMapping[size];
+  const center = currentSize / 2;
+  const radius = center - strokeWidth / 2;
+  const arcLength = 2 * Math.PI * radius;
+  const arcOffset = arcLength * progress;
+  if (direction === "clockwise") {
+    rotation += 360 * progress;
+  }
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      style: {
+        height: `${currentSize}px`,
+        width: `${currentSize}px`,
+        transform: `rotate(${rotation}deg)`
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: center,
+            cy: center,
+            r: radius,
+            fill: "transparent",
+            strokeWidth,
+            className: "stroke-primary"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: center,
+            cy: center,
+            r: radius,
+            fill: "transparent",
+            strokeWidth,
+            strokeDasharray: arcLength,
+            strokeDashoffset: arcOffset,
+            className: "stroke-gray-300"
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  ProgressIndicator
+};
+//# sourceMappingURL=ProgressIndicator.mjs.map

package/dist/components/ProgressIndicator.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/ProgressIndicator.tsx"],"sourcesContent":["export type ProgressIndicatorProps = {\n  /*\n    The amount of progress that has been made\n    Value form 0 to 1\n   */\n  progress: number,\n  strokeWidth?: number,\n  size?: keyof typeof sizeMapping,\n  direction?: 'clockwise' | 'counterclockwise',\n  /*\n    Rotation of the starting point of the indicator\n    default start at 3 o'clock\n    Given in degree\n   */\n  rotation?: number,\n}\n\nconst sizeMapping = { small: 16, medium: 24, big: 48 }\n\n/**\n * A progress indicator\n *\n * Start rotation is 3 o'clock and fills counterclockwise\n *\n * Progress is given from 0 to 1\n */\nexport const ProgressIndicator = ({\n                                    progress,\n                                    strokeWidth = 5,\n                                    size = 'medium',\n                                    direction = 'counterclockwise',\n                                    rotation = 0\n                                  }: ProgressIndicatorProps) => {\n  const currentSize = sizeMapping[size]\n  const center = currentSize / 2\n  const radius = center - strokeWidth / 2\n  const arcLength = 2 * Math.PI * radius\n  const arcOffset = arcLength * progress\n  if (direction === 'clockwise') {\n    rotation += 360 * progress\n  }\n  return (\n    <svg\n      style={{\n        height: `${currentSize}px`,\n        width: `${currentSize}px`,\n        transform: `rotate(${rotation}deg)`\n      }}\n    >\n      <circle cx={center} cy={center} r={radius} fill=\"transparent\" strokeWidth={strokeWidth}\n              className=\"stroke-primary\"\n      />\n      <circle cx={center} cy={center} r={radius} fill=\"transparent\" strokeWidth={strokeWidth}\n              strokeDasharray={arcLength} strokeDashoffset={arcOffset} className=\"stroke-gray-300\"\n      />\n    </svg>\n  )\n}\n"],"mappings":";AA0CI,SAOE,KAPF;AAzBJ,IAAM,cAAc,EAAE,OAAO,IAAI,QAAQ,IAAI,KAAK,GAAG;AAS9C,IAAM,oBAAoB,CAAC;AAAA,EACE;AAAA,EACA,cAAc;AAAA,EACd,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,WAAW;AACb,MAA8B;AAC9D,QAAM,cAAc,YAAY,IAAI;AACpC,QAAM,SAAS,cAAc;AAC7B,QAAM,SAAS,SAAS,cAAc;AACtC,QAAM,YAAY,IAAI,KAAK,KAAK;AAChC,QAAM,YAAY,YAAY;AAC9B,MAAI,cAAc,aAAa;AAC7B,gBAAY,MAAM;AAAA,EACpB;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,QACL,QAAQ,GAAG,WAAW;AAAA,QACtB,OAAO,GAAG,WAAW;AAAA,QACrB,WAAW,UAAU,QAAQ;AAAA,MAC/B;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YAAO,IAAI;AAAA,YAAQ,IAAI;AAAA,YAAQ,GAAG;AAAA,YAAQ,MAAK;AAAA,YAAc;AAAA,YACtD,WAAU;AAAA;AAAA,QAClB;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YAAO,IAAI;AAAA,YAAQ,IAAI;AAAA,YAAQ,GAAG;AAAA,YAAQ,MAAK;AAAA,YAAc;AAAA,YACtD,iBAAiB;AAAA,YAAW,kBAAkB;AAAA,YAAW,WAAU;AAAA;AAAA,QAC3E;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/components/Ring.d.mts

@@ -0,0 +1,35 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { CSSProperties } from 'react';
+
+type RingProps = {
+    innerSize: number;
+    width: number;
+    className?: string;
+};
+declare const Ring: ({ innerSize, width, className, }: RingProps) => react_jsx_runtime.JSX.Element;
+type AnimatedRingProps = RingProps & {
+    fillAnimationDuration?: number;
+    repeating?: boolean;
+    onAnimationFinished?: () => void;
+    style?: CSSProperties;
+};
+declare const AnimatedRing: ({ innerSize, width, className, fillAnimationDuration, repeating, onAnimationFinished, style, }: AnimatedRingProps) => react_jsx_runtime.JSX.Element;
+type RingWaveProps = Omit<AnimatedRingProps, 'innerSize'> & {
+    startInnerSize: number;
+    endInnerSize: number;
+    style?: CSSProperties;
+};
+declare const RingWave: ({ startInnerSize, endInnerSize, width, className, fillAnimationDuration, repeating, onAnimationFinished, style }: RingWaveProps) => react_jsx_runtime.JSX.Element;
+type RadialRingsProps = {
+    circle1ClassName?: string;
+    circle2ClassName?: string;
+    circle3ClassName?: string;
+    waveWidth?: number;
+    waveBaseColor?: string;
+    sizeCircle1?: number;
+    sizeCircle2?: number;
+    sizeCircle3?: number;
+};
+declare const RadialRings: ({ circle1ClassName, circle2ClassName, circle3ClassName, waveWidth, waveBaseColor, sizeCircle1, sizeCircle2, sizeCircle3 }: RadialRingsProps) => react_jsx_runtime.JSX.Element;
+
+export { AnimatedRing, type AnimatedRingProps, RadialRings, type RadialRingsProps, Ring, type RingProps, RingWave, type RingWaveProps };

package/dist/components/Ring.d.ts

@@ -1,24 +1,26 @@
-import type { CSSProperties } from 'react';
-export type RingProps = {
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { CSSProperties } from 'react';
+
+type RingProps = {
     innerSize: number;
     width: number;
     className?: string;
 };
-export declare const Ring: ({ innerSize, width, className, }: RingProps) => import("react/jsx-runtime").JSX.Element;
-export type AnimatedRingProps = RingProps & {
+declare const Ring: ({ innerSize, width, className, }: RingProps) => react_jsx_runtime.JSX.Element;
+type AnimatedRingProps = RingProps & {
     fillAnimationDuration?: number;
     repeating?: boolean;
     onAnimationFinished?: () => void;
     style?: CSSProperties;
 };
-export declare const AnimatedRing: ({ innerSize, width, className, fillAnimationDuration, repeating, onAnimationFinished, style, }: AnimatedRingProps) => import("react/jsx-runtime").JSX.Element;
-export type RingWaveProps = Omit<AnimatedRingProps, 'innerSize'> & {
+declare const AnimatedRing: ({ innerSize, width, className, fillAnimationDuration, repeating, onAnimationFinished, style, }: AnimatedRingProps) => react_jsx_runtime.JSX.Element;
+type RingWaveProps = Omit<AnimatedRingProps, 'innerSize'> & {
     startInnerSize: number;
     endInnerSize: number;
     style?: CSSProperties;
 };
-export declare const RingWave: ({ startInnerSize, endInnerSize, width, className, fillAnimationDuration, repeating, onAnimationFinished, style }: RingWaveProps) => import("react/jsx-runtime").JSX.Element;
-export type RadialRingsProps = {
+declare const RingWave: ({ startInnerSize, endInnerSize, width, className, fillAnimationDuration, repeating, onAnimationFinished, style }: RingWaveProps) => react_jsx_runtime.JSX.Element;
+type RadialRingsProps = {
     circle1ClassName?: string;
     circle2ClassName?: string;
     circle3ClassName?: string;
@@ -28,4 +30,6 @@ export type RadialRingsProps = {
     sizeCircle2?: number;
     sizeCircle3?: number;
 };
-export declare const RadialRings: ({ circle1ClassName, circle2ClassName, circle3ClassName, waveWidth, waveBaseColor, sizeCircle1, sizeCircle2, sizeCircle3 }: RadialRingsProps) => import("react/jsx-runtime").JSX.Element;
+declare const RadialRings: ({ circle1ClassName, circle2ClassName, circle3ClassName, waveWidth, waveBaseColor, sizeCircle1, sizeCircle2, sizeCircle3 }: RadialRingsProps) => react_jsx_runtime.JSX.Element;
+
+export { AnimatedRing, type AnimatedRingProps, RadialRings, type RadialRingsProps, Ring, type RingProps, RingWave, type RingWaveProps };

package/dist/components/Ring.js

@@ -1,113 +1,337 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useState } from 'react';
-import { noop } from '../util/noop';
-import { Circle } from './Circle';
-import clsx from 'clsx';
-export const Ring = ({ innerSize = 20, width = 7, className = 'outline-primary', }) => {
-    return (_jsx("div", { className: clsx(`bg-transparent rounded-full outline`, className), style: {
-            width: `${innerSize}px`,
-            height: `${innerSize}px`,
-            outlineWidth: `${width}px`,
-        } }));
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
 };
-export const AnimatedRing = ({ innerSize, width, className, fillAnimationDuration = 3, repeating = false, onAnimationFinished = noop, style, }) => {
-    const [currentWidth, setCurrentWidth] = useState(0);
-    const milliseconds = 1000 * fillAnimationDuration;
-    const animate = useCallback((timestamp, startTime) => {
-        const progress = Math.min((timestamp - startTime) / milliseconds, 1);
-        const newWidth = Math.min(width * progress, width);
-        setCurrentWidth(newWidth);
-        if (progress < 1) {
-            requestAnimationFrame((newTimestamp) => animate(newTimestamp, startTime));
-        }
-        else {
-            onAnimationFinished();
-            if (repeating) {
-                setCurrentWidth(0);
-                requestAnimationFrame((newTimestamp) => animate(newTimestamp, newTimestamp));
-            }
-        }
-    }, [milliseconds, onAnimationFinished, repeating, width]);
-    useEffect(() => {
-        if (currentWidth < width) {
-            requestAnimationFrame((timestamp) => animate(timestamp, timestamp));
-        }
-    }, []); // eslint-disable-line react-hooks/exhaustive-deps
-    return (_jsx("div", { className: "row items-center justify-center", style: {
-            width: `${innerSize + 2 * width}px`,
-            height: `${innerSize + 2 * width}px`,
-            ...style,
-        }, children: _jsx(Ring, { innerSize: innerSize, width: currentWidth, className: className }) }));
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
 };
-export const RingWave = ({ startInnerSize = 20, endInnerSize = 30, width, className, fillAnimationDuration = 3, repeating = false, onAnimationFinished = noop, style }) => {
-    const [currentInnerSize, setCurrentInnerSize] = useState(startInnerSize);
-    const distance = endInnerSize - startInnerSize;
-    const milliseconds = 1000 * fillAnimationDuration;
-    const animate = useCallback((timestamp, startTime) => {
-        const progress = Math.min((timestamp - startTime) / milliseconds, 1);
-        const newInnerSize = Math.min(startInnerSize + distance * progress, endInnerSize);
-        setCurrentInnerSize(newInnerSize);
-        if (progress < 1) {
-            requestAnimationFrame((newTimestamp) => animate(newTimestamp, startTime));
-        }
-        else {
-            onAnimationFinished();
-            if (repeating) {
-                setCurrentInnerSize(startInnerSize);
-                requestAnimationFrame((newTimestamp) => animate(newTimestamp, newTimestamp));
-            }
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/Ring.tsx
+var Ring_exports = {};
+__export(Ring_exports, {
+  AnimatedRing: () => AnimatedRing,
+  RadialRings: () => RadialRings,
+  Ring: () => Ring,
+  RingWave: () => RingWave
+});
+module.exports = __toCommonJS(Ring_exports);
+var import_react = require("react");
+
+// src/util/noop.ts
+var noop = () => void 0;
+
+// src/components/Circle.tsx
+var import_clsx = __toESM(require("clsx"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var Circle = ({
+  radius = 20,
+  className = "bg-primary",
+  style,
+  ...restProps
+}) => {
+  const size = radius * 2;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: (0, import_clsx.default)(`rounded-full`, className),
+      style: {
+        width: `${size}px`,
+        height: `${size}px`,
+        ...style
+      },
+      ...restProps
+    }
+  );
+};
+
+// src/components/Ring.tsx
+var import_clsx2 = __toESM(require("clsx"));
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Ring = ({
+  innerSize = 20,
+  width = 7,
+  className = "outline-primary"
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      className: (0, import_clsx2.default)(`bg-transparent rounded-full outline`, className),
+      style: {
+        width: `${innerSize}px`,
+        height: `${innerSize}px`,
+        outlineWidth: `${width}px`
+      }
+    }
+  );
+};
+var AnimatedRing = ({
+  innerSize,
+  width,
+  className,
+  fillAnimationDuration = 3,
+  repeating = false,
+  onAnimationFinished = noop,
+  style
+}) => {
+  const [currentWidth, setCurrentWidth] = (0, import_react.useState)(0);
+  const milliseconds = 1e3 * fillAnimationDuration;
+  const animate = (0, import_react.useCallback)((timestamp, startTime) => {
+    const progress = Math.min((timestamp - startTime) / milliseconds, 1);
+    const newWidth = Math.min(width * progress, width);
+    setCurrentWidth(newWidth);
+    if (progress < 1) {
+      requestAnimationFrame((newTimestamp) => animate(newTimestamp, startTime));
+    } else {
+      onAnimationFinished();
+      if (repeating) {
+        setCurrentWidth(0);
+        requestAnimationFrame((newTimestamp) => animate(newTimestamp, newTimestamp));
+      }
+    }
+  }, [milliseconds, onAnimationFinished, repeating, width]);
+  (0, import_react.useEffect)(() => {
+    if (currentWidth < width) {
+      requestAnimationFrame((timestamp) => animate(timestamp, timestamp));
+    }
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      className: "row items-center justify-center",
+      style: {
+        width: `${innerSize + 2 * width}px`,
+        height: `${innerSize + 2 * width}px`,
+        ...style
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        Ring,
+        {
+          innerSize,
+          width: currentWidth,
+          className
         }
-    }, [distance, endInnerSize, milliseconds, onAnimationFinished, repeating, startInnerSize]);
-    useEffect(() => {
-        if (currentInnerSize < endInnerSize) {
-            requestAnimationFrame((timestamp) => animate(timestamp, timestamp));
+      )
+    }
+  );
+};
+var RingWave = ({
+  startInnerSize = 20,
+  endInnerSize = 30,
+  width,
+  className,
+  fillAnimationDuration = 3,
+  repeating = false,
+  onAnimationFinished = noop,
+  style
+}) => {
+  const [currentInnerSize, setCurrentInnerSize] = (0, import_react.useState)(startInnerSize);
+  const distance = endInnerSize - startInnerSize;
+  const milliseconds = 1e3 * fillAnimationDuration;
+  const animate = (0, import_react.useCallback)((timestamp, startTime) => {
+    const progress = Math.min((timestamp - startTime) / milliseconds, 1);
+    const newInnerSize = Math.min(
+      startInnerSize + distance * progress,
+      endInnerSize
+    );
+    setCurrentInnerSize(newInnerSize);
+    if (progress < 1) {
+      requestAnimationFrame((newTimestamp) => animate(newTimestamp, startTime));
+    } else {
+      onAnimationFinished();
+      if (repeating) {
+        setCurrentInnerSize(startInnerSize);
+        requestAnimationFrame((newTimestamp) => animate(newTimestamp, newTimestamp));
+      }
+    }
+  }, [distance, endInnerSize, milliseconds, onAnimationFinished, repeating, startInnerSize]);
+  (0, import_react.useEffect)(() => {
+    if (currentInnerSize < endInnerSize) {
+      requestAnimationFrame((timestamp) => animate(timestamp, timestamp));
+    }
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      className: "row items-center justify-center",
+      style: {
+        width: `${endInnerSize + 2 * width}px`,
+        height: `${endInnerSize + 2 * width}px`,
+        ...style
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        Ring,
+        {
+          innerSize: currentInnerSize,
+          width,
+          className
         }
-    }, []); // eslint-disable-line react-hooks/exhaustive-deps
-    return (_jsx("div", { className: "row items-center justify-center", style: {
-            width: `${endInnerSize + 2 * width}px`,
-            height: `${endInnerSize + 2 * width}px`,
-            ...style
-        }, children: _jsx(Ring, { innerSize: currentInnerSize, width: width, className: className }) }));
+      )
+    }
+  );
 };
-// TODO use fixed colors here to avoid artifacts
-export const RadialRings = ({ circle1ClassName = 'bg-primary/90 outline-primary/90', circle2ClassName = 'bg-primary/60 outline-primary/60', circle3ClassName = 'bg-primary/40 outline-primary/40', waveWidth = 10, waveBaseColor = 'outline-white/20', sizeCircle1 = 100, sizeCircle2 = 200, sizeCircle3 = 300 }) => {
-    const [currentRing, setCurrentRing] = useState(0);
-    const size = sizeCircle3;
-    return (_jsxs("div", { className: "relative", style: {
-            width: `${sizeCircle3}px`,
-            height: `${sizeCircle3}px`,
-        }, children: [_jsx(Circle, { radius: sizeCircle1 / 2, className: clsx(circle1ClassName, `absolute z-[10] -translate-y-1/2 -translate-x-1/2`), style: {
-                    left: `${size / 2}px`,
-                    top: `${size / 2}px`
-                } }), currentRing === 0 ? (_jsx(AnimatedRing, { innerSize: sizeCircle1, width: (sizeCircle2 - sizeCircle1) / 2, onAnimationFinished: () => currentRing === 0 ? setCurrentRing(1) : null, repeating: true, className: clsx(circle2ClassName, { 'opacity-5': currentRing !== 0 }), style: {
-                    left: `${size / 2}px`,
-                    top: `${size / 2}px`,
-                    position: 'absolute',
-                    translate: `-50% -50%`,
-                    zIndex: 9
-                } })) : null, currentRing === 2 ? (_jsx(RingWave, { startInnerSize: sizeCircle1 - waveWidth, endInnerSize: sizeCircle2, width: waveWidth, repeating: true, className: clsx(waveBaseColor, `opacity-5`), style: {
-                    left: `${size / 2}px`,
-                    top: `${size / 2}px`,
-                    position: 'absolute',
-                    translate: `-50% -50%`,
-                    zIndex: 9,
-                } })) : null, _jsx(Circle, { radius: sizeCircle2 / 2, className: clsx(circle2ClassName, { 'opacity-20': currentRing < 1 }, `absolute z-[8] -translate-y-1/2 -translate-x-1/2`), style: {
-                    left: `${size / 2}px`,
-                    top: `${size / 2}px`
-                } }), currentRing === 1 ? (_jsx(AnimatedRing, { innerSize: sizeCircle2 - 1, width: (sizeCircle3 - sizeCircle2) / 2, onAnimationFinished: () => currentRing === 1 ? setCurrentRing(2) : null, repeating: true, className: clsx(circle3ClassName), style: {
-                    left: `${size / 2}px`,
-                    top: `${size / 2}px`,
-                    position: 'absolute',
-                    translate: `-50% -50%`,
-                    zIndex: 7,
-                } })) : null, currentRing === 2 ? (_jsx(RingWave, { startInnerSize: sizeCircle2, endInnerSize: sizeCircle3 - waveWidth, width: waveWidth, repeating: true, className: clsx(waveBaseColor, `opacity-5`), style: {
-                    left: `${size / 2}px`,
-                    top: `${size / 2}px`,
-                    position: 'absolute',
-                    translate: `-50% -50%`,
-                    zIndex: 7,
-                } })) : null, _jsx(Circle, { radius: sizeCircle3 / 2, className: clsx(circle3ClassName, { 'opacity-20': currentRing < 2 }, `absolute z-[6] -translate-y-1/2 -translate-x-1/2`), style: {
-                    left: `${size / 2}px`,
-                    top: `${size / 2}px`
-                } })] }));
+var RadialRings = ({
+  circle1ClassName = "bg-primary/90 outline-primary/90",
+  circle2ClassName = "bg-primary/60 outline-primary/60",
+  circle3ClassName = "bg-primary/40 outline-primary/40",
+  waveWidth = 10,
+  waveBaseColor = "outline-white/20",
+  sizeCircle1 = 100,
+  sizeCircle2 = 200,
+  sizeCircle3 = 300
+}) => {
+  const [currentRing, setCurrentRing] = (0, import_react.useState)(0);
+  const size = sizeCircle3;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "div",
+    {
+      className: "relative",
+      style: {
+        width: `${sizeCircle3}px`,
+        height: `${sizeCircle3}px`
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          Circle,
+          {
+            radius: sizeCircle1 / 2,
+            className: (0, import_clsx2.default)(circle1ClassName, `absolute z-[10] -translate-y-1/2 -translate-x-1/2`),
+            style: {
+              left: `${size / 2}px`,
+              top: `${size / 2}px`
+            }
+          }
+        ),
+        currentRing === 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          AnimatedRing,
+          {
+            innerSize: sizeCircle1,
+            width: (sizeCircle2 - sizeCircle1) / 2,
+            onAnimationFinished: () => currentRing === 0 ? setCurrentRing(1) : null,
+            repeating: true,
+            className: (0, import_clsx2.default)(
+              circle2ClassName,
+              { "opacity-5": currentRing !== 0 }
+            ),
+            style: {
+              left: `${size / 2}px`,
+              top: `${size / 2}px`,
+              position: "absolute",
+              translate: `-50% -50%`,
+              zIndex: 9
+            }
+          }
+        ) : null,
+        currentRing === 2 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          RingWave,
+          {
+            startInnerSize: sizeCircle1 - waveWidth,
+            endInnerSize: sizeCircle2,
+            width: waveWidth,
+            repeating: true,
+            className: (0, import_clsx2.default)(waveBaseColor, `opacity-5`),
+            style: {
+              left: `${size / 2}px`,
+              top: `${size / 2}px`,
+              position: "absolute",
+              translate: `-50% -50%`,
+              zIndex: 9
+            }
+          }
+        ) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          Circle,
+          {
+            radius: sizeCircle2 / 2,
+            className: (0, import_clsx2.default)(
+              circle2ClassName,
+              { "opacity-20": currentRing < 1 },
+              `absolute z-[8] -translate-y-1/2 -translate-x-1/2`
+            ),
+            style: {
+              left: `${size / 2}px`,
+              top: `${size / 2}px`
+            }
+          }
+        ),
+        currentRing === 1 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          AnimatedRing,
+          {
+            innerSize: sizeCircle2 - 1,
+            width: (sizeCircle3 - sizeCircle2) / 2,
+            onAnimationFinished: () => currentRing === 1 ? setCurrentRing(2) : null,
+            repeating: true,
+            className: (0, import_clsx2.default)(circle3ClassName),
+            style: {
+              left: `${size / 2}px`,
+              top: `${size / 2}px`,
+              position: "absolute",
+              translate: `-50% -50%`,
+              zIndex: 7
+            }
+          }
+        ) : null,
+        currentRing === 2 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          RingWave,
+          {
+            startInnerSize: sizeCircle2,
+            endInnerSize: sizeCircle3 - waveWidth,
+            width: waveWidth,
+            repeating: true,
+            className: (0, import_clsx2.default)(waveBaseColor, `opacity-5`),
+            style: {
+              left: `${size / 2}px`,
+              top: `${size / 2}px`,
+              position: "absolute",
+              translate: `-50% -50%`,
+              zIndex: 7
+            }
+          }
+        ) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          Circle,
+          {
+            radius: sizeCircle3 / 2,
+            className: (0, import_clsx2.default)(
+              circle3ClassName,
+              { "opacity-20": currentRing < 2 },
+              `absolute z-[6] -translate-y-1/2 -translate-x-1/2`
+            ),
+            style: {
+              left: `${size / 2}px`,
+              top: `${size / 2}px`
+            }
+          }
+        )
+      ]
+    }
+  );
 };
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AnimatedRing,
+  RadialRings,
+  Ring,
+  RingWave
+});
+//# sourceMappingURL=Ring.js.map

package/dist/components/Ring.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Ring.tsx","../../src/util/noop.ts","../../src/components/Circle.tsx"],"sourcesContent":["import type { CSSProperties } from 'react'\nimport { useCallback, useEffect, useState } from 'react'\nimport { noop } from '../util/noop'\nimport { Circle } from './Circle'\nimport clsx from 'clsx'\n\nexport type RingProps = {\n  innerSize: number, // the size of the entire circle including the circleWidth\n  width: number,\n  className?: string,\n};\n\nexport const Ring = ({\n                       innerSize = 20,\n                       width = 7,\n                       className = 'outline-primary',\n                     }: RingProps) => {\n  return (\n    <div\n      className={clsx(`bg-transparent rounded-full outline`, className)}\n      style={{\n        width: `${innerSize}px`,\n        height: `${innerSize}px`,\n        outlineWidth: `${width}px`,\n      }}\n    />\n  )\n}\n\nexport type AnimatedRingProps = RingProps & {\n  fillAnimationDuration?: number, // in seconds, 0 means no animation\n  repeating?: boolean,\n  onAnimationFinished?: () => void,\n  style?: CSSProperties,\n};\n\nexport const AnimatedRing = ({\n                               innerSize,\n                               width,\n                               className,\n                               fillAnimationDuration = 3,\n                               repeating = false,\n                               onAnimationFinished = noop,\n                               style,\n                             }: AnimatedRingProps) => {\n  const [currentWidth, setCurrentWidth] = useState(0)\n  const milliseconds = 1000 * fillAnimationDuration\n\n  const animate = useCallback((timestamp: number, startTime: number) => {\n    const progress = Math.min((timestamp - startTime) / milliseconds, 1)\n    const newWidth = Math.min(width * progress, width)\n\n    setCurrentWidth(newWidth)\n\n    if (progress < 1) {\n      requestAnimationFrame((newTimestamp) => animate(newTimestamp, startTime))\n    } else {\n      onAnimationFinished()\n      if (repeating) {\n        setCurrentWidth(0)\n        requestAnimationFrame((newTimestamp) => animate(newTimestamp, newTimestamp))\n      }\n    }\n  }, [milliseconds, onAnimationFinished, repeating, width])\n\n  useEffect(() => {\n    if (currentWidth < width) {\n      requestAnimationFrame((timestamp) => animate(timestamp, timestamp))\n    }\n  }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n  return (\n    <div\n      className=\"row items-center justify-center\"\n      style={{\n        width: `${innerSize + 2 * width}px`,\n        height: `${innerSize + 2 * width}px`,\n        ...style,\n      }}\n    >\n      <Ring\n        innerSize={innerSize}\n        width={currentWidth}\n        className={className}\n      />\n    </div>\n  )\n}\n\nexport type RingWaveProps = Omit<AnimatedRingProps, 'innerSize'> & {\n  startInnerSize: number,\n  endInnerSize: number,\n  style?: CSSProperties,\n};\n\nexport const RingWave = ({\n                           startInnerSize = 20,\n                           endInnerSize = 30,\n                           width,\n                           className,\n                           fillAnimationDuration = 3,\n                           repeating = false,\n                           onAnimationFinished = noop,\n                           style\n                         }: RingWaveProps) => {\n  const [currentInnerSize, setCurrentInnerSize] = useState(startInnerSize)\n  const distance = endInnerSize - startInnerSize\n  const milliseconds = 1000 * fillAnimationDuration\n\n  const animate = useCallback((timestamp: number, startTime: number) => {\n    const progress = Math.min((timestamp - startTime) / milliseconds, 1)\n    const newInnerSize = Math.min(\n      startInnerSize + distance * progress,\n      endInnerSize\n    )\n\n    setCurrentInnerSize(newInnerSize)\n\n    if (progress < 1) {\n      requestAnimationFrame((newTimestamp) => animate(newTimestamp, startTime))\n    } else {\n      onAnimationFinished()\n      if (repeating) {\n        setCurrentInnerSize(startInnerSize)\n        requestAnimationFrame((newTimestamp) => animate(newTimestamp, newTimestamp))\n      }\n    }\n  }, [distance, endInnerSize, milliseconds, onAnimationFinished, repeating, startInnerSize])\n\n  useEffect(() => {\n    if (currentInnerSize < endInnerSize) {\n      requestAnimationFrame((timestamp) => animate(timestamp, timestamp))\n    }\n  }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n  return (\n    <div\n      className=\"row items-center justify-center\"\n      style={{\n        width: `${endInnerSize + 2 * width}px`,\n        height: `${endInnerSize + 2 * width}px`,\n        ...style\n      }}\n    >\n      <Ring\n        innerSize={currentInnerSize}\n        width={width}\n        className={className}\n      />\n    </div>\n  )\n}\n\nexport type RadialRingsProps = {\n  circle1ClassName?: string,\n  circle2ClassName?: string,\n  circle3ClassName?: string,\n  waveWidth?: number,\n  waveBaseColor?: string,\n  sizeCircle1?: number,\n  sizeCircle2?: number,\n  sizeCircle3?: number,\n};\n\n// TODO use fixed colors here to avoid artifacts\nexport const RadialRings = ({\n                              circle1ClassName = 'bg-primary/90 outline-primary/90',\n                              circle2ClassName = 'bg-primary/60 outline-primary/60',\n                              circle3ClassName = 'bg-primary/40 outline-primary/40',\n                              waveWidth = 10,\n                              waveBaseColor = 'outline-white/20',\n                              sizeCircle1 = 100,\n                              sizeCircle2 = 200,\n                              sizeCircle3 = 300\n                            }: RadialRingsProps) => {\n  const [currentRing, setCurrentRing] = useState(0)\n  const size = sizeCircle3\n\n  return (\n    <div\n      className=\"relative\"\n      style={{\n        width: `${sizeCircle3}px`,\n        height: `${sizeCircle3}px`,\n      }}\n    >\n      <Circle\n        radius={sizeCircle1 / 2}\n        className={clsx(circle1ClassName, `absolute z-[10] -translate-y-1/2 -translate-x-1/2`)}\n        style={{\n          left: `${size / 2}px`,\n          top: `${size / 2}px`\n        }}\n      />\n      {currentRing === 0 ? (\n        <AnimatedRing\n          innerSize={sizeCircle1}\n          width={(sizeCircle2 - sizeCircle1) / 2}\n          onAnimationFinished={() =>\n            currentRing === 0 ? setCurrentRing(1) : null\n          }\n          repeating={true}\n          className={clsx(circle2ClassName,\n            { 'opacity-5': currentRing !== 0 })}\n          style={{\n            left: `${size / 2}px`,\n            top: `${size / 2}px`,\n            position: 'absolute',\n            translate: `-50% -50%`,\n            zIndex: 9\n          }}\n        />\n      ) : null}\n      {currentRing === 2 ? (\n        <RingWave\n          startInnerSize={sizeCircle1 - waveWidth}\n          endInnerSize={sizeCircle2}\n          width={waveWidth}\n          repeating={true}\n          className={clsx(waveBaseColor, `opacity-5`)}\n          style={{\n            left: `${size / 2}px`,\n            top: `${size / 2}px`,\n            position: 'absolute',\n            translate: `-50% -50%`,\n            zIndex: 9,\n          }}\n        />\n      ) : null}\n      <Circle\n        radius={sizeCircle2 / 2}\n        className={clsx(circle2ClassName,\n          { 'opacity-20': currentRing < 1 },\n          `absolute z-[8] -translate-y-1/2 -translate-x-1/2`)}\n        style={{\n          left: `${size / 2}px`,\n          top: `${size / 2}px`\n        }}\n      />\n      {currentRing === 1 ? (\n        <AnimatedRing\n          innerSize={sizeCircle2 - 1} // potentially harmful\n          width={(sizeCircle3 - sizeCircle2) / 2}\n          onAnimationFinished={() =>\n            currentRing === 1 ? setCurrentRing(2) : null\n          }\n          repeating={true}\n          className={clsx(circle3ClassName)}\n          style={{\n            left: `${size / 2}px`,\n            top: `${size / 2}px`,\n            position: 'absolute',\n            translate: `-50% -50%`,\n            zIndex: 7,\n          }}\n        />\n      ) : null}\n      {currentRing === 2 ? (\n        <RingWave\n          startInnerSize={sizeCircle2}\n          endInnerSize={sizeCircle3 - waveWidth}\n          width={waveWidth}\n          repeating={true}\n          className={clsx(waveBaseColor, `opacity-5`)}\n          style={{\n            left: `${size / 2}px`,\n            top: `${size / 2}px`,\n            position: 'absolute',\n            translate: `-50% -50%`,\n            zIndex: 7,\n          }}\n        />\n      ) : null}\n      <Circle\n        radius={sizeCircle3 / 2}\n        className={clsx(circle3ClassName,\n          { 'opacity-20': currentRing < 2 },\n          `absolute z-[6] -translate-y-1/2 -translate-x-1/2`)}\n        style={{\n          left: `${size / 2}px`,\n          top: `${size / 2}px`\n        }}\n      />\n    </div>\n  )\n}\n","export const noop = () => undefined\n","import type { HTMLAttributes } from 'react'\nimport clsx from 'clsx'\n\nexport type CircleProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'color'> & {\n  radius: number,\n  className?: string,\n}\n\nexport const Circle = ({\n  radius = 20,\n  className = 'bg-primary',\n  style,\n  ...restProps\n}: CircleProps) => {\n  const size = radius * 2\n  return (\n    <div\n      className={clsx(`rounded-full`, className)}\n      style={{\n        width: `${size}px`,\n        height: `${size}px`,\n        ...style,\n      }}\n      {...restProps}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAiD;;;ACD1C,IAAM,OAAO,MAAM;;;ACC1B,kBAAiB;AAeb;AARG,IAAM,SAAS,CAAC;AAAA,EACrB,SAAS;AAAA,EACT,YAAY;AAAA,EACZ;AAAA,EACA,GAAG;AACL,MAAmB;AACjB,QAAM,OAAO,SAAS;AACtB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW,YAAAA,SAAK,gBAAgB,SAAS;AAAA,MACzC,OAAO;AAAA,QACL,OAAO,GAAG,IAAI;AAAA,QACd,QAAQ,GAAG,IAAI;AAAA,QACf,GAAG;AAAA,MACL;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;;;AFtBA,IAAAC,eAAiB;AAcb,IAAAC,sBAAA;AANG,IAAM,OAAO,CAAC;AAAA,EACE,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,YAAY;AACd,MAAiB;AACpC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW,aAAAC,SAAK,uCAAuC,SAAS;AAAA,MAChE,OAAO;AAAA,QACL,OAAO,GAAG,SAAS;AAAA,QACnB,QAAQ,GAAG,SAAS;AAAA,QACpB,cAAc,GAAG,KAAK;AAAA,MACxB;AAAA;AAAA,EACF;AAEJ;AASO,IAAM,eAAe,CAAC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA,wBAAwB;AAAA,EACxB,YAAY;AAAA,EACZ,sBAAsB;AAAA,EACtB;AACF,MAAyB;AACpD,QAAM,CAAC,cAAc,eAAe,QAAI,uBAAS,CAAC;AAClD,QAAM,eAAe,MAAO;AAE5B,QAAM,cAAU,0BAAY,CAAC,WAAmB,cAAsB;AACpE,UAAM,WAAW,KAAK,KAAK,YAAY,aAAa,cAAc,CAAC;AACnE,UAAM,WAAW,KAAK,IAAI,QAAQ,UAAU,KAAK;AAEjD,oBAAgB,QAAQ;AAExB,QAAI,WAAW,GAAG;AAChB,4BAAsB,CAAC,iBAAiB,QAAQ,cAAc,SAAS,CAAC;AAAA,IAC1E,OAAO;AACL,0BAAoB;AACpB,UAAI,WAAW;AACb,wBAAgB,CAAC;AACjB,8BAAsB,CAAC,iBAAiB,QAAQ,cAAc,YAAY,CAAC;AAAA,MAC7E;AAAA,IACF;AAAA,EACF,GAAG,CAAC,cAAc,qBAAqB,WAAW,KAAK,CAAC;AAExD,8BAAU,MAAM;AACd,QAAI,eAAe,OAAO;AACxB,4BAAsB,CAAC,cAAc,QAAQ,WAAW,SAAS,CAAC;AAAA,IACpE;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAO;AAAA,QACL,OAAO,GAAG,YAAY,IAAI,KAAK;AAAA,QAC/B,QAAQ,GAAG,YAAY,IAAI,KAAK;AAAA,QAChC,GAAG;AAAA,MACL;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,OAAO;AAAA,UACP;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAQO,IAAM,WAAW,CAAC;AAAA,EACE,iBAAiB;AAAA,EACjB,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA,wBAAwB;AAAA,EACxB,YAAY;AAAA,EACZ,sBAAsB;AAAA,EACtB;AACF,MAAqB;AAC5C,QAAM,CAAC,kBAAkB,mBAAmB,QAAI,uBAAS,cAAc;AACvE,QAAM,WAAW,eAAe;AAChC,QAAM,eAAe,MAAO;AAE5B,QAAM,cAAU,0BAAY,CAAC,WAAmB,cAAsB;AACpE,UAAM,WAAW,KAAK,KAAK,YAAY,aAAa,cAAc,CAAC;AACnE,UAAM,eAAe,KAAK;AAAA,MACxB,iBAAiB,WAAW;AAAA,MAC5B;AAAA,IACF;AAEA,wBAAoB,YAAY;AAEhC,QAAI,WAAW,GAAG;AAChB,4BAAsB,CAAC,iBAAiB,QAAQ,cAAc,SAAS,CAAC;AAAA,IAC1E,OAAO;AACL,0BAAoB;AACpB,UAAI,WAAW;AACb,4BAAoB,cAAc;AAClC,8BAAsB,CAAC,iBAAiB,QAAQ,cAAc,YAAY,CAAC;AAAA,MAC7E;AAAA,IACF;AAAA,EACF,GAAG,CAAC,UAAU,cAAc,cAAc,qBAAqB,WAAW,cAAc,CAAC;AAEzF,8BAAU,MAAM;AACd,QAAI,mBAAmB,cAAc;AACnC,4BAAsB,CAAC,cAAc,QAAQ,WAAW,SAAS,CAAC;AAAA,IACpE;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAO;AAAA,QACL,OAAO,GAAG,eAAe,IAAI,KAAK;AAAA,QAClC,QAAQ,GAAG,eAAe,IAAI,KAAK;AAAA,QACnC,GAAG;AAAA,MACL;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,WAAW;AAAA,UACX;AAAA,UACA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAcO,IAAM,cAAc,CAAC;AAAA,EACE,mBAAmB;AAAA,EACnB,mBAAmB;AAAA,EACnB,mBAAmB;AAAA,EACnB,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAChB,MAAwB;AAClD,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,CAAC;AAChD,QAAM,OAAO;AAEb,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAO;AAAA,QACL,OAAO,GAAG,WAAW;AAAA,QACrB,QAAQ,GAAG,WAAW;AAAA,MACxB;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,QAAQ,cAAc;AAAA,YACtB,eAAW,aAAAA,SAAK,kBAAkB,mDAAmD;AAAA,YACrF,OAAO;AAAA,cACL,MAAM,GAAG,OAAO,CAAC;AAAA,cACjB,KAAK,GAAG,OAAO,CAAC;AAAA,YAClB;AAAA;AAAA,QACF;AAAA,QACC,gBAAgB,IACf;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,YACX,QAAQ,cAAc,eAAe;AAAA,YACrC,qBAAqB,MACnB,gBAAgB,IAAI,eAAe,CAAC,IAAI;AAAA,YAE1C,WAAW;AAAA,YACX,eAAW,aAAAA;AAAA,cAAK;AAAA,cACd,EAAE,aAAa,gBAAgB,EAAE;AAAA,YAAC;AAAA,YACpC,OAAO;AAAA,cACL,MAAM,GAAG,OAAO,CAAC;AAAA,cACjB,KAAK,GAAG,OAAO,CAAC;AAAA,cAChB,UAAU;AAAA,cACV,WAAW;AAAA,cACX,QAAQ;AAAA,YACV;AAAA;AAAA,QACF,IACE;AAAA,QACH,gBAAgB,IACf;AAAA,UAAC;AAAA;AAAA,YACC,gBAAgB,cAAc;AAAA,YAC9B,cAAc;AAAA,YACd,OAAO;AAAA,YACP,WAAW;AAAA,YACX,eAAW,aAAAA,SAAK,eAAe,WAAW;AAAA,YAC1C,OAAO;AAAA,cACL,MAAM,GAAG,OAAO,CAAC;AAAA,cACjB,KAAK,GAAG,OAAO,CAAC;AAAA,cAChB,UAAU;AAAA,cACV,WAAW;AAAA,cACX,QAAQ;AAAA,YACV;AAAA;AAAA,QACF,IACE;AAAA,QACJ;AAAA,UAAC;AAAA;AAAA,YACC,QAAQ,cAAc;AAAA,YACtB,eAAW,aAAAA;AAAA,cAAK;AAAA,cACd,EAAE,cAAc,cAAc,EAAE;AAAA,cAChC;AAAA,YAAkD;AAAA,YACpD,OAAO;AAAA,cACL,MAAM,GAAG,OAAO,CAAC;AAAA,cACjB,KAAK,GAAG,OAAO,CAAC;AAAA,YAClB;AAAA;AAAA,QACF;AAAA,QACC,gBAAgB,IACf;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,cAAc;AAAA,YACzB,QAAQ,cAAc,eAAe;AAAA,YACrC,qBAAqB,MACnB,gBAAgB,IAAI,eAAe,CAAC,IAAI;AAAA,YAE1C,WAAW;AAAA,YACX,eAAW,aAAAA,SAAK,gBAAgB;AAAA,YAChC,OAAO;AAAA,cACL,MAAM,GAAG,OAAO,CAAC;AAAA,cACjB,KAAK,GAAG,OAAO,CAAC;AAAA,cAChB,UAAU;AAAA,cACV,WAAW;AAAA,cACX,QAAQ;AAAA,YACV;AAAA;AAAA,QACF,IACE;AAAA,QACH,gBAAgB,IACf;AAAA,UAAC;AAAA;AAAA,YACC,gBAAgB;AAAA,YAChB,cAAc,cAAc;AAAA,YAC5B,OAAO;AAAA,YACP,WAAW;AAAA,YACX,eAAW,aAAAA,SAAK,eAAe,WAAW;AAAA,YAC1C,OAAO;AAAA,cACL,MAAM,GAAG,OAAO,CAAC;AAAA,cACjB,KAAK,GAAG,OAAO,CAAC;AAAA,cAChB,UAAU;AAAA,cACV,WAAW;AAAA,cACX,QAAQ;AAAA,YACV;AAAA;AAAA,QACF,IACE;AAAA,QACJ;AAAA,UAAC;AAAA;AAAA,YACC,QAAQ,cAAc;AAAA,YACtB,eAAW,aAAAA;AAAA,cAAK;AAAA,cACd,EAAE,cAAc,cAAc,EAAE;AAAA,cAChC;AAAA,YAAkD;AAAA,YACpD,OAAO;AAAA,cACL,MAAM,GAAG,OAAO,CAAC;AAAA,cACjB,KAAK,GAAG,OAAO,CAAC;AAAA,YAClB;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":["clsx","import_clsx","import_jsx_runtime","clsx"]}