@helpwave/hightide 0.0.13 → 0.0.16

package/dist/components/Profile.js

@@ -1,45 +1,197 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import clsx from 'clsx';
-import Image from 'next/image';
-import Link from 'next/link';
-import { Github, Globe, Linkedin, Mail } from 'lucide-react';
-import { Helpwave } from './icons/Helpwave';
-import { Chip } from './ChipList';
-/**
- * A Component for showing a lin
- */
-const SocialIcon = ({ type, url, size = 24 }) => {
-    let icon;
-    switch (type) {
-        case 'mail':
-            icon = _jsx(Mail, { size: size });
-            break;
-        case 'linkedin':
-            // TODO find an alternative icon
-            icon = _jsx(Linkedin, { size: size });
-            break;
-        case 'github':
-            // TODO find an alternative icon
-            icon = _jsx(Github, { size: size });
-            break;
-        case 'website':
-            icon = _jsx(Globe, { size: size });
-            break;
-        case 'medium':
-            icon = _jsx(Globe, { size: size }); // TODO find an appropriate medium svg
-            break;
-        default:
-            icon = _jsx(Helpwave, { size: 24 });
+"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 });
+};
+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;
+};
+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/Profile.tsx
+var Profile_exports = {};
+__export(Profile_exports, {
+  Profile: () => Profile
+});
+module.exports = __toCommonJS(Profile_exports);
+var import_clsx3 = __toESM(require("clsx"));
+var import_image = __toESM(require("next/image"));
+var import_link = __toESM(require("next/link"));
+var import_lucide_react = require("lucide-react");
+
+// src/components/icons/Helpwave.tsx
+var import_clsx = require("clsx");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Helpwave = ({
+  color = "currentColor",
+  animate = "none",
+  size = 64,
+  ...props
+}) => {
+  const isLoadingAnimation = animate === "loading";
+  let svgAnimationKey = "";
+  if (animate === "pulse") {
+    svgAnimationKey = "animate-pulse";
+  } else if (animate === "bounce") {
+    svgAnimationKey = "animate-bounce";
+  }
+  if (size < 0) {
+    console.error("size cannot be less than 0");
+    size = 64;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 888 888",
+      fill: "none",
+      strokeLinecap: "round",
+      strokeWidth: 48,
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { className: (0, import_clsx.clsx)(svgAnimationKey), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { className: (0, import_clsx.clsx)({ "animate-wave-big-left-up": isLoadingAnimation }), d: "M144 543.235C144 423.259 232.164 326 340.92 326", stroke: color, strokeDasharray: "1000" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { className: (0, import_clsx.clsx)({ "animate-wave-big-right-down": isLoadingAnimation }), d: "M537.84 544.104C429.084 544.104 340.92 446.844 340.92 326.869", stroke: color, strokeDasharray: "1000" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { className: (0, import_clsx.clsx)({ "animate-wave-small-left-up": isLoadingAnimation }), d: "M462.223 518.035C462.223 432.133 525.348 362.495 603.217 362.495", stroke: color, strokeDasharray: "1000" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { className: (0, import_clsx.clsx)({ "animate-wave-small-right-down": isLoadingAnimation }), d: "M745.001 519.773C666.696 519.773 603.218 450.136 603.218 364.233", stroke: color, strokeDasharray: "1000" })
+      ] })
+    }
+  );
+};
+
+// src/components/ChipList.tsx
+var import_clsx2 = __toESM(require("clsx"));
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Chip = ({
+  children,
+  trailingIcon,
+  color = "default",
+  variant = "normal",
+  className = "",
+  ...restProps
+}) => {
+  const colorMapping = {
+    default: "text-tag-default-text bg-tag-default-background",
+    dark: "text-tag-dark-text bg-tag-dark-background",
+    red: "text-tag-red-text bg-tag-red-background",
+    yellow: "text-tag-yellow-text bg-tag-yellow-background",
+    green: "text-tag-green-text bg-tag-green-background",
+    blue: "text-tag-blue-text bg-tag-blue-background",
+    pink: "text-tag-pink-text bg-tag-pink-background"
+  }[color];
+  const colorMappingIcon = {
+    default: "text-tag-default-icon",
+    dark: "text-tag-dark-icon",
+    red: "text-tag-red-icon",
+    yellow: "text-tag-yellow-icon",
+    green: "text-tag-green-icon",
+    blue: "text-tag-blue-icon",
+    pink: "text-tag-pink-icon"
+  }[color];
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "div",
+    {
+      ...restProps,
+      className: (0, import_clsx2.default)(
+        `row w-fit px-2 py-1`,
+        colorMapping,
+        {
+          "rounded-md": variant === "normal",
+          "rounded-full": variant === "fullyRounded"
+        },
+        className
+      ),
+      children: [
+        children,
+        trailingIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: colorMappingIcon, children: trailingIcon })
+      ]
     }
-    return (_jsx(Link, { href: url, target: "_blank", children: _jsx(Chip, { color: "dark", className: "!p-2", children: icon }) }));
+  );
+};
+
+// src/components/Profile.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var SocialIcon = ({ type, url, size = 24 }) => {
+  let icon;
+  switch (type) {
+    case "mail":
+      icon = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.Mail, { size });
+      break;
+    case "linkedin":
+      icon = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.Linkedin, { size });
+      break;
+    case "github":
+      icon = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.Github, { size });
+      break;
+    case "website":
+      icon = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.Globe, { size });
+      break;
+    case "medium":
+      icon = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.Globe, { size });
+      break;
+    default:
+      icon = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Helpwave, { size: 24 });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_link.default, { href: url, target: "_blank", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Chip, { color: "dark", className: "!p-2", children: icon }) });
 };
-// TODO add colors for dark-mode
-/**
- * A Component for showing a Profile
- */
-export const Profile = ({ name, imageUrl, badge, prefix, suffix, roleBadge, role, tags, info, socials, className, imageClassName, ...divProps }) => {
-    return (_jsxs("div", { ...divProps, className: clsx(`col items-center text-center rounded-3xl p-3 pb-4 bg-white text-gray-900 w-min shadow-around-lg`, className), children: [_jsxs("div", { className: "relative mb-6", children: [_jsx("div", { className: clsx('relative rounded-xl row items-center justify-center overflow-hidden', imageClassName), children: _jsx(Image, { src: imageUrl, alt: "", className: clsx('z-[2] object-cover', imageClassName), width: 0, height: 0, style: { width: 'auto', height: 'auto' } }) }), _jsx("div", { className: "absolute top-[6px] left-[6px] z-[3]", children: badge }), roleBadge && (_jsx("div", { className: "absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-2/3 z-[4] rounded-md", children: _jsx(Chip, { color: "dark", className: "font-bold px-3", children: roleBadge }) }))] }), prefix && _jsx("span", { className: "font-semibold", children: prefix }), _jsx("h2", { id: name, className: "textstyle-title-md", children: name }), suffix && _jsx("span", { className: "text-sm mb-1", children: suffix }), role && _jsx("span", { className: "font-space font-bold text-sm", children: role }), tags && (_jsx("div", { className: "flex flex-wrap mx-4 mt-2 gap-x-2 justify-center", children: tags.map((tag, index) => _jsx("span", { className: "textstyle-description text-sm", children: `#${tag}` }, index)) })), info && _jsx("span", { className: "mt-2 text-sm", children: info }), socials && (_jsx("div", { className: "flex flex-wrap grow items-end justify-center gap-x-4 gap-y-2 mt-4", children: socials.map((socialIconProps, index) => {
-                    var _a;
-                    return (_jsx(SocialIcon, { ...socialIconProps, size: (_a = socialIconProps.size) !== null && _a !== void 0 ? _a : 20 }, index));
-                }) }))] }));
+var Profile = ({
+  name,
+  imageUrl,
+  badge,
+  prefix,
+  suffix,
+  roleBadge,
+  role,
+  tags,
+  info,
+  socials,
+  className,
+  imageClassName,
+  ...divProps
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      ...divProps,
+      className: (0, import_clsx3.default)(`col items-center text-center rounded-3xl p-3 pb-4 bg-white text-gray-900 w-min shadow-around-lg`, className),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "relative mb-6", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: (0, import_clsx3.default)("relative rounded-xl row items-center justify-center overflow-hidden", imageClassName), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_image.default, { src: imageUrl, alt: "", className: (0, import_clsx3.default)("z-[2] object-cover", imageClassName), width: 0, height: 0, style: { width: "auto", height: "auto" } }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "absolute top-[6px] left-[6px] z-[3]", children: badge }),
+          roleBadge && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-2/3 z-[4] rounded-md", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Chip, { color: "dark", className: "font-bold px-3", children: roleBadge }) })
+        ] }),
+        prefix && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "font-semibold", children: prefix }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h2", { id: name, className: "textstyle-title-md", children: name }),
+        suffix && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-sm mb-1", children: suffix }),
+        role && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "font-space font-bold text-sm", children: role }),
+        tags && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex flex-wrap mx-4 mt-2 gap-x-2 justify-center", children: tags.map((tag, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "textstyle-description text-sm", children: `#${tag}` }, index)) }),
+        info && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "mt-2 text-sm", children: info }),
+        socials && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex flex-wrap grow items-end justify-center gap-x-4 gap-y-2 mt-4", children: socials.map((socialIconProps, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SocialIcon, { ...socialIconProps, size: socialIconProps.size ?? 20 }, index)) })
+      ]
+    }
+  );
 };
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Profile
+});
+//# sourceMappingURL=Profile.js.map

package/dist/components/Profile.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Profile.tsx","../../src/components/icons/Helpwave.tsx","../../src/components/ChipList.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react'\nimport clsx from 'clsx'\nimport Image from 'next/image'\nimport Link from 'next/link'\nimport { Github, Globe, Linkedin, Mail } from 'lucide-react'\nimport { Helpwave } from './icons/Helpwave'\nimport { Chip } from './ChipList'\n\ntype SocialType = 'mail' | 'github' | 'linkedin' | 'website' | 'medium'\n\nexport type SocialIconProps = {\n  type: SocialType,\n  url: string,\n  size?: number,\n}\n\n/**\n * A Component for showing a lin\n */\nconst SocialIcon = ({ type, url, size = 24 }: SocialIconProps) => {\n  let icon: ReactNode\n  switch (type) {\n    case 'mail':\n      icon = <Mail size={size}/>\n      break\n    case 'linkedin':\n      // TODO find an alternative icon\n      icon = <Linkedin size={size}/>\n      break\n    case 'github':\n      // TODO find an alternative icon\n      icon = <Github size={size}/>\n      break\n    case 'website':\n      icon = <Globe size={size}/>\n      break\n    case 'medium':\n      icon = <Globe size={size}/> // TODO find an appropriate medium svg\n      break\n    default:\n      icon = <Helpwave size={24}/>\n  }\n  return (\n    <Link href={url} target=\"_blank\">\n      <Chip color=\"dark\" className=\"!p-2\">\n        {icon}\n      </Chip>\n    </Link>\n  )\n}\n\nexport type ProfileProps = HTMLAttributes<HTMLDivElement> & {\n  name: string,\n  imageUrl: string,\n  badge?: ReactNode,\n  prefix?: string,\n  suffix?: string,\n  roleBadge?: string,\n  role?: string,\n  /**\n   * The list of tags for the\n   */\n  tags?: string[],\n  info?: string,\n  socials?: SocialIconProps[],\n  imageClassName?: string,\n}\n\n\n// TODO add colors for dark-mode\n/**\n * A Component for showing a Profile\n */\nexport const Profile = ({\n  name,\n  imageUrl,\n  badge,\n  prefix,\n  suffix,\n  roleBadge,\n  role,\n  tags,\n  info,\n  socials,\n  className,\n  imageClassName,\n  ...divProps\n}: ProfileProps) => {\n  return (\n    <div\n      {...divProps}\n      className={clsx(`col items-center text-center rounded-3xl p-3 pb-4 bg-white text-gray-900 w-min shadow-around-lg`, className)}\n    >\n      <div className=\"relative mb-6\">\n        <div className={clsx('relative rounded-xl row items-center justify-center overflow-hidden', imageClassName)}>\n          <Image src={imageUrl} alt=\"\" className={clsx('z-[2] object-cover', imageClassName)} width={0} height={0} style={{ width: 'auto', height: 'auto' }}/>\n        </div>\n        <div className=\"absolute top-[6px] left-[6px] z-[3]\">{badge}</div>\n        {roleBadge && (\n          <div className=\"absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-2/3 z-[4] rounded-md\">\n            <Chip color=\"dark\" className=\"font-bold px-3\">{roleBadge}</Chip>\n          </div>\n        )}\n      </div>\n      {prefix && <span className=\"font-semibold\">{prefix}</span>}\n      <h2 id={name} className=\"textstyle-title-md\">{name}</h2>\n      {suffix && <span className=\"text-sm mb-1\">{suffix}</span>}\n      {role && <span className=\"font-space font-bold text-sm\">{role}</span>}\n      {tags && (\n        <div className=\"flex flex-wrap mx-4 mt-2 gap-x-2 justify-center\">\n          {tags.map((tag, index) => <span key={index} className=\"textstyle-description text-sm\">{`#${tag}`}</span>)}\n        </div>\n      )}\n      {info && <span className=\"mt-2 text-sm\">{info}</span>}\n      {socials && (\n        <div className=\"flex flex-wrap grow items-end justify-center gap-x-4 gap-y-2 mt-4\">\n          {socials.map((socialIconProps, index) => (\n            <SocialIcon key={index} {...socialIconProps} size={socialIconProps.size ?? 20}/>\n          ))}\n        </div>\n      )}\n    </div>\n  )\n}\n","import type { SVGProps } from 'react'\nimport { clsx } from 'clsx'\n\nexport type HelpwaveProps = SVGProps<SVGSVGElement> & {\n  color?: string,\n  animate?: 'none' | 'loading' | 'pulse' | 'bounce',\n  size?: number,\n}\n\n/**\n * The helpwave loading spinner based on the svg logo.\n */\nexport const Helpwave = ({\n  color = 'currentColor',\n  animate = 'none',\n  size = 64,\n  ...props\n}: HelpwaveProps) => {\n  const isLoadingAnimation = animate === 'loading'\n  let svgAnimationKey = ''\n\n  if (animate === 'pulse') {\n    svgAnimationKey = 'animate-pulse'\n  } else if (animate === 'bounce') {\n    svgAnimationKey = 'animate-bounce'\n  }\n\n  if (size < 0) {\n    console.error('size cannot be less than 0')\n    size = 64\n  }\n\n  return (\n    <svg\n      width={size}\n      height={size}\n      viewBox=\"0 0 888 888\"\n      fill=\"none\"\n      strokeLinecap=\"round\"\n      strokeWidth={48}\n      {...props}\n    >\n      <g className={clsx(svgAnimationKey)}>\n        <path className={clsx({ 'animate-wave-big-left-up': isLoadingAnimation })} d=\"M144 543.235C144 423.259 232.164 326 340.92 326\" stroke={color} strokeDasharray=\"1000\" />\n        <path className={clsx({ 'animate-wave-big-right-down': isLoadingAnimation })} d=\"M537.84 544.104C429.084 544.104 340.92 446.844 340.92 326.869\" stroke={color} strokeDasharray=\"1000\" />\n        <path className={clsx({ 'animate-wave-small-left-up': isLoadingAnimation })} d=\"M462.223 518.035C462.223 432.133 525.348 362.495 603.217 362.495\" stroke={color} strokeDasharray=\"1000\" />\n        <path className={clsx({ 'animate-wave-small-right-down': isLoadingAnimation })} d=\"M745.001 519.773C666.696 519.773 603.218 450.136 603.218 364.233\" stroke={color} strokeDasharray=\"1000\" />\n      </g>\n    </svg>\n  )\n}\n","import type { HTMLProps, PropsWithChildren, ReactNode } from 'react'\nimport clsx from 'clsx'\n\nexport type ChipColor = 'default' | 'dark'| 'red' | 'yellow' | 'green' | 'blue' | 'pink'\ntype ChipVariant = 'normal' | 'fullyRounded'\n\nexport type ChipProps = HTMLProps<HTMLDivElement> & PropsWithChildren<{\n  color?: ChipColor,\n  variant?: ChipVariant,\n  trailingIcon?: ReactNode,\n}>\n\n/**\n * A component for displaying a single chip\n */\nexport const Chip = ({\n                       children,\n                       trailingIcon,\n                       color = 'default',\n                       variant = 'normal',\n                       className = '',\n                       ...restProps\n                     }: ChipProps) => {\n  const colorMapping: string = {\n    default: 'text-tag-default-text bg-tag-default-background',\n    dark: 'text-tag-dark-text bg-tag-dark-background',\n    red: 'text-tag-red-text bg-tag-red-background',\n    yellow: 'text-tag-yellow-text bg-tag-yellow-background',\n    green: 'text-tag-green-text bg-tag-green-background',\n    blue: 'text-tag-blue-text bg-tag-blue-background',\n    pink: 'text-tag-pink-text bg-tag-pink-background',\n  }[color]\n\n  const colorMappingIcon: string = {\n    default: 'text-tag-default-icon',\n    dark: 'text-tag-dark-icon',\n    red: 'text-tag-red-icon',\n    yellow: 'text-tag-yellow-icon',\n    green: 'text-tag-green-icon',\n    blue: 'text-tag-blue-icon',\n    pink: 'text-tag-pink-icon',\n  }[color]\n\n  return (\n    <div\n      {...restProps}\n      className={clsx(\n        `row w-fit px-2 py-1`,\n        colorMapping,\n        {\n          'rounded-md': variant === 'normal',\n          'rounded-full': variant === 'fullyRounded',\n        },\n        className\n      )}\n    >\n      {children}\n      {trailingIcon && (<span className={colorMappingIcon}>{trailingIcon}</span>)}\n    </div>\n  )\n}\n\nexport type ChipListProps = {\n  list: ChipProps[],\n  className?: string,\n}\n\n/**\n * A component for displaying a list of chips\n */\nexport const ChipList = ({\n                           list,\n                           className = ''\n                         }: ChipListProps) => {\n  return (\n    <div className={clsx('flex flex-wrap gap-x-4 gap-y-2', className)}>\n      {list.map((value, index) => (\n        <Chip\n          key={index}\n          {...value}\n          color={value.color ?? 'dark'}\n          variant={value.variant ?? 'normal'}\n        >\n          {value.children}\n        </Chip>\n      ))}\n    </div>\n  )\n}\n"],"mappings":"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","names":["import_clsx","import_clsx","import_jsx_runtime","clsx","import_jsx_runtime","Link","clsx","Image"]}

package/dist/components/Profile.mjs

@@ -0,0 +1,162 @@
+// src/components/Profile.tsx
+import clsx3 from "clsx";
+import Image from "next/image";
+import Link from "next/link";
+import { Github, Globe, Linkedin, Mail } from "lucide-react";
+
+// src/components/icons/Helpwave.tsx
+import { clsx } from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Helpwave = ({
+  color = "currentColor",
+  animate = "none",
+  size = 64,
+  ...props
+}) => {
+  const isLoadingAnimation = animate === "loading";
+  let svgAnimationKey = "";
+  if (animate === "pulse") {
+    svgAnimationKey = "animate-pulse";
+  } else if (animate === "bounce") {
+    svgAnimationKey = "animate-bounce";
+  }
+  if (size < 0) {
+    console.error("size cannot be less than 0");
+    size = 64;
+  }
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 888 888",
+      fill: "none",
+      strokeLinecap: "round",
+      strokeWidth: 48,
+      ...props,
+      children: /* @__PURE__ */ jsxs("g", { className: clsx(svgAnimationKey), children: [
+        /* @__PURE__ */ jsx("path", { className: clsx({ "animate-wave-big-left-up": isLoadingAnimation }), d: "M144 543.235C144 423.259 232.164 326 340.92 326", stroke: color, strokeDasharray: "1000" }),
+        /* @__PURE__ */ jsx("path", { className: clsx({ "animate-wave-big-right-down": isLoadingAnimation }), d: "M537.84 544.104C429.084 544.104 340.92 446.844 340.92 326.869", stroke: color, strokeDasharray: "1000" }),
+        /* @__PURE__ */ jsx("path", { className: clsx({ "animate-wave-small-left-up": isLoadingAnimation }), d: "M462.223 518.035C462.223 432.133 525.348 362.495 603.217 362.495", stroke: color, strokeDasharray: "1000" }),
+        /* @__PURE__ */ jsx("path", { className: clsx({ "animate-wave-small-right-down": isLoadingAnimation }), d: "M745.001 519.773C666.696 519.773 603.218 450.136 603.218 364.233", stroke: color, strokeDasharray: "1000" })
+      ] })
+    }
+  );
+};
+
+// src/components/ChipList.tsx
+import clsx2 from "clsx";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var Chip = ({
+  children,
+  trailingIcon,
+  color = "default",
+  variant = "normal",
+  className = "",
+  ...restProps
+}) => {
+  const colorMapping = {
+    default: "text-tag-default-text bg-tag-default-background",
+    dark: "text-tag-dark-text bg-tag-dark-background",
+    red: "text-tag-red-text bg-tag-red-background",
+    yellow: "text-tag-yellow-text bg-tag-yellow-background",
+    green: "text-tag-green-text bg-tag-green-background",
+    blue: "text-tag-blue-text bg-tag-blue-background",
+    pink: "text-tag-pink-text bg-tag-pink-background"
+  }[color];
+  const colorMappingIcon = {
+    default: "text-tag-default-icon",
+    dark: "text-tag-dark-icon",
+    red: "text-tag-red-icon",
+    yellow: "text-tag-yellow-icon",
+    green: "text-tag-green-icon",
+    blue: "text-tag-blue-icon",
+    pink: "text-tag-pink-icon"
+  }[color];
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      ...restProps,
+      className: clsx2(
+        `row w-fit px-2 py-1`,
+        colorMapping,
+        {
+          "rounded-md": variant === "normal",
+          "rounded-full": variant === "fullyRounded"
+        },
+        className
+      ),
+      children: [
+        children,
+        trailingIcon && /* @__PURE__ */ jsx2("span", { className: colorMappingIcon, children: trailingIcon })
+      ]
+    }
+  );
+};
+
+// src/components/Profile.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var SocialIcon = ({ type, url, size = 24 }) => {
+  let icon;
+  switch (type) {
+    case "mail":
+      icon = /* @__PURE__ */ jsx3(Mail, { size });
+      break;
+    case "linkedin":
+      icon = /* @__PURE__ */ jsx3(Linkedin, { size });
+      break;
+    case "github":
+      icon = /* @__PURE__ */ jsx3(Github, { size });
+      break;
+    case "website":
+      icon = /* @__PURE__ */ jsx3(Globe, { size });
+      break;
+    case "medium":
+      icon = /* @__PURE__ */ jsx3(Globe, { size });
+      break;
+    default:
+      icon = /* @__PURE__ */ jsx3(Helpwave, { size: 24 });
+  }
+  return /* @__PURE__ */ jsx3(Link, { href: url, target: "_blank", children: /* @__PURE__ */ jsx3(Chip, { color: "dark", className: "!p-2", children: icon }) });
+};
+var Profile = ({
+  name,
+  imageUrl,
+  badge,
+  prefix,
+  suffix,
+  roleBadge,
+  role,
+  tags,
+  info,
+  socials,
+  className,
+  imageClassName,
+  ...divProps
+}) => {
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      ...divProps,
+      className: clsx3(`col items-center text-center rounded-3xl p-3 pb-4 bg-white text-gray-900 w-min shadow-around-lg`, className),
+      children: [
+        /* @__PURE__ */ jsxs3("div", { className: "relative mb-6", children: [
+          /* @__PURE__ */ jsx3("div", { className: clsx3("relative rounded-xl row items-center justify-center overflow-hidden", imageClassName), children: /* @__PURE__ */ jsx3(Image, { src: imageUrl, alt: "", className: clsx3("z-[2] object-cover", imageClassName), width: 0, height: 0, style: { width: "auto", height: "auto" } }) }),
+          /* @__PURE__ */ jsx3("div", { className: "absolute top-[6px] left-[6px] z-[3]", children: badge }),
+          roleBadge && /* @__PURE__ */ jsx3("div", { className: "absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-2/3 z-[4] rounded-md", children: /* @__PURE__ */ jsx3(Chip, { color: "dark", className: "font-bold px-3", children: roleBadge }) })
+        ] }),
+        prefix && /* @__PURE__ */ jsx3("span", { className: "font-semibold", children: prefix }),
+        /* @__PURE__ */ jsx3("h2", { id: name, className: "textstyle-title-md", children: name }),
+        suffix && /* @__PURE__ */ jsx3("span", { className: "text-sm mb-1", children: suffix }),
+        role && /* @__PURE__ */ jsx3("span", { className: "font-space font-bold text-sm", children: role }),
+        tags && /* @__PURE__ */ jsx3("div", { className: "flex flex-wrap mx-4 mt-2 gap-x-2 justify-center", children: tags.map((tag, index) => /* @__PURE__ */ jsx3("span", { className: "textstyle-description text-sm", children: `#${tag}` }, index)) }),
+        info && /* @__PURE__ */ jsx3("span", { className: "mt-2 text-sm", children: info }),
+        socials && /* @__PURE__ */ jsx3("div", { className: "flex flex-wrap grow items-end justify-center gap-x-4 gap-y-2 mt-4", children: socials.map((socialIconProps, index) => /* @__PURE__ */ jsx3(SocialIcon, { ...socialIconProps, size: socialIconProps.size ?? 20 }, index)) })
+      ]
+    }
+  );
+};
+export {
+  Profile
+};
+//# sourceMappingURL=Profile.mjs.map

package/dist/components/Profile.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Profile.tsx","../../src/components/icons/Helpwave.tsx","../../src/components/ChipList.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react'\nimport clsx from 'clsx'\nimport Image from 'next/image'\nimport Link from 'next/link'\nimport { Github, Globe, Linkedin, Mail } from 'lucide-react'\nimport { Helpwave } from './icons/Helpwave'\nimport { Chip } from './ChipList'\n\ntype SocialType = 'mail' | 'github' | 'linkedin' | 'website' | 'medium'\n\nexport type SocialIconProps = {\n  type: SocialType,\n  url: string,\n  size?: number,\n}\n\n/**\n * A Component for showing a lin\n */\nconst SocialIcon = ({ type, url, size = 24 }: SocialIconProps) => {\n  let icon: ReactNode\n  switch (type) {\n    case 'mail':\n      icon = <Mail size={size}/>\n      break\n    case 'linkedin':\n      // TODO find an alternative icon\n      icon = <Linkedin size={size}/>\n      break\n    case 'github':\n      // TODO find an alternative icon\n      icon = <Github size={size}/>\n      break\n    case 'website':\n      icon = <Globe size={size}/>\n      break\n    case 'medium':\n      icon = <Globe size={size}/> // TODO find an appropriate medium svg\n      break\n    default:\n      icon = <Helpwave size={24}/>\n  }\n  return (\n    <Link href={url} target=\"_blank\">\n      <Chip color=\"dark\" className=\"!p-2\">\n        {icon}\n      </Chip>\n    </Link>\n  )\n}\n\nexport type ProfileProps = HTMLAttributes<HTMLDivElement> & {\n  name: string,\n  imageUrl: string,\n  badge?: ReactNode,\n  prefix?: string,\n  suffix?: string,\n  roleBadge?: string,\n  role?: string,\n  /**\n   * The list of tags for the\n   */\n  tags?: string[],\n  info?: string,\n  socials?: SocialIconProps[],\n  imageClassName?: string,\n}\n\n\n// TODO add colors for dark-mode\n/**\n * A Component for showing a Profile\n */\nexport const Profile = ({\n  name,\n  imageUrl,\n  badge,\n  prefix,\n  suffix,\n  roleBadge,\n  role,\n  tags,\n  info,\n  socials,\n  className,\n  imageClassName,\n  ...divProps\n}: ProfileProps) => {\n  return (\n    <div\n      {...divProps}\n      className={clsx(`col items-center text-center rounded-3xl p-3 pb-4 bg-white text-gray-900 w-min shadow-around-lg`, className)}\n    >\n      <div className=\"relative mb-6\">\n        <div className={clsx('relative rounded-xl row items-center justify-center overflow-hidden', imageClassName)}>\n          <Image src={imageUrl} alt=\"\" className={clsx('z-[2] object-cover', imageClassName)} width={0} height={0} style={{ width: 'auto', height: 'auto' }}/>\n        </div>\n        <div className=\"absolute top-[6px] left-[6px] z-[3]\">{badge}</div>\n        {roleBadge && (\n          <div className=\"absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-2/3 z-[4] rounded-md\">\n            <Chip color=\"dark\" className=\"font-bold px-3\">{roleBadge}</Chip>\n          </div>\n        )}\n      </div>\n      {prefix && <span className=\"font-semibold\">{prefix}</span>}\n      <h2 id={name} className=\"textstyle-title-md\">{name}</h2>\n      {suffix && <span className=\"text-sm mb-1\">{suffix}</span>}\n      {role && <span className=\"font-space font-bold text-sm\">{role}</span>}\n      {tags && (\n        <div className=\"flex flex-wrap mx-4 mt-2 gap-x-2 justify-center\">\n          {tags.map((tag, index) => <span key={index} className=\"textstyle-description text-sm\">{`#${tag}`}</span>)}\n        </div>\n      )}\n      {info && <span className=\"mt-2 text-sm\">{info}</span>}\n      {socials && (\n        <div className=\"flex flex-wrap grow items-end justify-center gap-x-4 gap-y-2 mt-4\">\n          {socials.map((socialIconProps, index) => (\n            <SocialIcon key={index} {...socialIconProps} size={socialIconProps.size ?? 20}/>\n          ))}\n        </div>\n      )}\n    </div>\n  )\n}\n","import type { SVGProps } from 'react'\nimport { clsx } from 'clsx'\n\nexport type HelpwaveProps = SVGProps<SVGSVGElement> & {\n  color?: string,\n  animate?: 'none' | 'loading' | 'pulse' | 'bounce',\n  size?: number,\n}\n\n/**\n * The helpwave loading spinner based on the svg logo.\n */\nexport const Helpwave = ({\n  color = 'currentColor',\n  animate = 'none',\n  size = 64,\n  ...props\n}: HelpwaveProps) => {\n  const isLoadingAnimation = animate === 'loading'\n  let svgAnimationKey = ''\n\n  if (animate === 'pulse') {\n    svgAnimationKey = 'animate-pulse'\n  } else if (animate === 'bounce') {\n    svgAnimationKey = 'animate-bounce'\n  }\n\n  if (size < 0) {\n    console.error('size cannot be less than 0')\n    size = 64\n  }\n\n  return (\n    <svg\n      width={size}\n      height={size}\n      viewBox=\"0 0 888 888\"\n      fill=\"none\"\n      strokeLinecap=\"round\"\n      strokeWidth={48}\n      {...props}\n    >\n      <g className={clsx(svgAnimationKey)}>\n        <path className={clsx({ 'animate-wave-big-left-up': isLoadingAnimation })} d=\"M144 543.235C144 423.259 232.164 326 340.92 326\" stroke={color} strokeDasharray=\"1000\" />\n        <path className={clsx({ 'animate-wave-big-right-down': isLoadingAnimation })} d=\"M537.84 544.104C429.084 544.104 340.92 446.844 340.92 326.869\" stroke={color} strokeDasharray=\"1000\" />\n        <path className={clsx({ 'animate-wave-small-left-up': isLoadingAnimation })} d=\"M462.223 518.035C462.223 432.133 525.348 362.495 603.217 362.495\" stroke={color} strokeDasharray=\"1000\" />\n        <path className={clsx({ 'animate-wave-small-right-down': isLoadingAnimation })} d=\"M745.001 519.773C666.696 519.773 603.218 450.136 603.218 364.233\" stroke={color} strokeDasharray=\"1000\" />\n      </g>\n    </svg>\n  )\n}\n","import type { HTMLProps, PropsWithChildren, ReactNode } from 'react'\nimport clsx from 'clsx'\n\nexport type ChipColor = 'default' | 'dark'| 'red' | 'yellow' | 'green' | 'blue' | 'pink'\ntype ChipVariant = 'normal' | 'fullyRounded'\n\nexport type ChipProps = HTMLProps<HTMLDivElement> & PropsWithChildren<{\n  color?: ChipColor,\n  variant?: ChipVariant,\n  trailingIcon?: ReactNode,\n}>\n\n/**\n * A component for displaying a single chip\n */\nexport const Chip = ({\n                       children,\n                       trailingIcon,\n                       color = 'default',\n                       variant = 'normal',\n                       className = '',\n                       ...restProps\n                     }: ChipProps) => {\n  const colorMapping: string = {\n    default: 'text-tag-default-text bg-tag-default-background',\n    dark: 'text-tag-dark-text bg-tag-dark-background',\n    red: 'text-tag-red-text bg-tag-red-background',\n    yellow: 'text-tag-yellow-text bg-tag-yellow-background',\n    green: 'text-tag-green-text bg-tag-green-background',\n    blue: 'text-tag-blue-text bg-tag-blue-background',\n    pink: 'text-tag-pink-text bg-tag-pink-background',\n  }[color]\n\n  const colorMappingIcon: string = {\n    default: 'text-tag-default-icon',\n    dark: 'text-tag-dark-icon',\n    red: 'text-tag-red-icon',\n    yellow: 'text-tag-yellow-icon',\n    green: 'text-tag-green-icon',\n    blue: 'text-tag-blue-icon',\n    pink: 'text-tag-pink-icon',\n  }[color]\n\n  return (\n    <div\n      {...restProps}\n      className={clsx(\n        `row w-fit px-2 py-1`,\n        colorMapping,\n        {\n          'rounded-md': variant === 'normal',\n          'rounded-full': variant === 'fullyRounded',\n        },\n        className\n      )}\n    >\n      {children}\n      {trailingIcon && (<span className={colorMappingIcon}>{trailingIcon}</span>)}\n    </div>\n  )\n}\n\nexport type ChipListProps = {\n  list: ChipProps[],\n  className?: string,\n}\n\n/**\n * A component for displaying a list of chips\n */\nexport const ChipList = ({\n                           list,\n                           className = ''\n                         }: ChipListProps) => {\n  return (\n    <div className={clsx('flex flex-wrap gap-x-4 gap-y-2', className)}>\n      {list.map((value, index) => (\n        <Chip\n          key={index}\n          {...value}\n          color={value.color ?? 'dark'}\n          variant={value.variant ?? 'normal'}\n        >\n          {value.children}\n        </Chip>\n      ))}\n    </div>\n  )\n}\n"],"mappings":"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","names":["clsx","clsx","jsx","jsxs","jsx","jsxs","clsx"]}

package/dist/components/ProgressIndicator.d.mts

@@ -0,0 +1,24 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type ProgressIndicatorProps = {
+    progress: number;
+    strokeWidth?: number;
+    size?: keyof typeof sizeMapping;
+    direction?: 'clockwise' | 'counterclockwise';
+    rotation?: number;
+};
+declare const sizeMapping: {
+    small: number;
+    medium: number;
+    big: number;
+};
+/**
+ * A progress indicator
+ *
+ * Start rotation is 3 o'clock and fills counterclockwise
+ *
+ * Progress is given from 0 to 1
+ */
+declare const ProgressIndicator: ({ progress, strokeWidth, size, direction, rotation }: ProgressIndicatorProps) => react_jsx_runtime.JSX.Element;
+
+export { ProgressIndicator, type ProgressIndicatorProps };

package/dist/components/ProgressIndicator.d.ts

@@ -1,4 +1,6 @@
-export type ProgressIndicatorProps = {
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type ProgressIndicatorProps = {
     progress: number;
     strokeWidth?: number;
     size?: keyof typeof sizeMapping;
@@ -17,5 +19,6 @@ declare const sizeMapping: {
  *
  * Progress is given from 0 to 1
  */
-export declare const ProgressIndicator: ({ progress, strokeWidth, size, direction, rotation }: ProgressIndicatorProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+declare const ProgressIndicator: ({ progress, strokeWidth, size, direction, rotation }: ProgressIndicatorProps) => react_jsx_runtime.JSX.Element;
+
+export { ProgressIndicator, type ProgressIndicatorProps };

package/dist/components/ProgressIndicator.js

@@ -1,24 +1,84 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const sizeMapping = { small: 16, medium: 24, big: 48 };
-/**
- * A progress indicator
- *
- * Start rotation is 3 o'clock and fills counterclockwise
- *
- * Progress is given from 0 to 1
- */
-export const 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;
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+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;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/ProgressIndicator.tsx
+var ProgressIndicator_exports = {};
+__export(ProgressIndicator_exports, {
+  ProgressIndicator: () => ProgressIndicator
+});
+module.exports = __toCommonJS(ProgressIndicator_exports);
+var import_jsx_runtime = require("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__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    {
+      style: {
+        height: `${currentSize}px`,
+        width: `${currentSize}px`,
+        transform: `rotate(${rotation}deg)`
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "circle",
+          {
+            cx: center,
+            cy: center,
+            r: radius,
+            fill: "transparent",
+            strokeWidth,
+            className: "stroke-primary"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "circle",
+          {
+            cx: center,
+            cy: center,
+            r: radius,
+            fill: "transparent",
+            strokeWidth,
+            strokeDasharray: arcLength,
+            strokeDashoffset: arcOffset,
+            className: "stroke-gray-300"
+          }
+        )
+      ]
     }
-    return (_jsxs("svg", { style: {
-            height: `${currentSize}px`,
-            width: `${currentSize}px`,
-            transform: `rotate(${rotation}deg)`
-        }, children: [_jsx("circle", { cx: center, cy: center, r: radius, fill: "transparent", strokeWidth: strokeWidth, className: "stroke-primary" }), _jsx("circle", { cx: center, cy: center, r: radius, fill: "transparent", strokeWidth: strokeWidth, strokeDasharray: arcLength, strokeDashoffset: arcOffset, className: "stroke-gray-300" })] }));
+  );
 };
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ProgressIndicator
+});
+//# sourceMappingURL=ProgressIndicator.js.map

package/dist/components/ProgressIndicator.js.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":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA0CI;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":[]}