@moto-nrw/design-system 0.2.1

package/dist/index.cjs

@@ -0,0 +1,1308 @@
+"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/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Accordion: () => Accordion,
+  Alert: () => Alert,
+  Avatar: () => Avatar,
+  Badge: () => Badge,
+  BadgeCompact: () => BadgeCompact,
+  Button: () => Button,
+  Card: () => Card,
+  Checkbox: () => Checkbox,
+  ConfirmationModal: () => ConfirmationModal,
+  Divider: () => Divider,
+  DropdownMenu: () => DropdownMenu,
+  FilterChips: () => FilterChips,
+  Input: () => Input,
+  Logo: () => Logo,
+  Modal: () => Modal,
+  Pill: () => Pill,
+  Radio: () => Radio,
+  SearchBar: () => SearchBar,
+  Select: () => Select,
+  Skeleton: () => Skeleton,
+  Spinner: () => Spinner,
+  StatusDot: () => StatusDot,
+  Tabs: () => Tabs,
+  Textarea: () => Textarea,
+  Toast: () => Toast,
+  Toggle: () => Toggle
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/Accordion/Accordion.tsx
+var import_react = require("react");
+
+// src/components/Accordion/Accordion.module.css
+var Accordion_default = {};
+
+// src/components/Accordion/Accordion.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function Accordion({
+  label,
+  badge,
+  defaultOpen = false,
+  children,
+  className
+}) {
+  const [isOpen, setIsOpen] = (0, import_react.useState)(defaultOpen);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: [Accordion_default.accordion, className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", { type: "button", onClick: () => setIsOpen((prev) => !prev), className: Accordion_default.trigger, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: Accordion_default.label, children: [
+        label,
+        badge && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: Accordion_default.badge, children: badge })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "svg",
+        {
+          className: [Accordion_default.chevron, isOpen && Accordion_default.chevronOpen].filter(Boolean).join(" "),
+          width: "16",
+          height: "16",
+          fill: "none",
+          viewBox: "0 0 24 24",
+          stroke: "currentColor",
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        className: [Accordion_default.content, isOpen ? Accordion_default.contentOpen : Accordion_default.contentClosed].join(" "),
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: Accordion_default.contentInner, children })
+      }
+    )
+  ] });
+}
+
+// src/components/Alert/Alert.module.css
+var Alert_default = {};
+
+// src/components/Alert/Alert.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var icons = {
+  error: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { width: "20", height: "20", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "path",
+    {
+      fillRule: "evenodd",
+      d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z",
+      clipRule: "evenodd"
+    }
+  ) }),
+  success: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { width: "20", height: "20", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "path",
+    {
+      fillRule: "evenodd",
+      d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",
+      clipRule: "evenodd"
+    }
+  ) }),
+  warning: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { width: "20", height: "20", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "path",
+    {
+      fillRule: "evenodd",
+      d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z",
+      clipRule: "evenodd"
+    }
+  ) }),
+  info: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { width: "20", height: "20", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "path",
+    {
+      fillRule: "evenodd",
+      d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z",
+      clipRule: "evenodd"
+    }
+  ) })
+};
+function Alert({ type, message, className, ...props }) {
+  if (!message) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "div",
+    {
+      role: "alert",
+      className: [Alert_default.alert, Alert_default[type], className].filter(Boolean).join(" "),
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: Alert_default.icon, children: icons[type] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: message })
+      ]
+    }
+  );
+}
+
+// src/components/Avatar/Avatar.module.css
+var Avatar_default = {};
+
+// src/components/Avatar/Avatar.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function getInitials(name) {
+  const parts = name.split(" ").filter(Boolean);
+  if (parts.length === 0) return "?";
+  if (parts.length === 1) return (parts[0]?.[0] ?? "?").toUpperCase();
+  return ((parts[0]?.[0] ?? "") + (parts.at(-1)?.[0] ?? "")).toUpperCase();
+}
+function Avatar({ name, src, size = "sm", className, ...props }) {
+  const initials = getInitials(name);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "div",
+    {
+      className: [Avatar_default.avatar, Avatar_default[size], className].filter(Boolean).join(" "),
+      title: name,
+      ...props,
+      children: src ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("img", { src, alt: name, className: Avatar_default.image }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: Avatar_default.initials, children: initials })
+    }
+  );
+}
+
+// src/components/Badge/Badge.module.css
+var Badge_default = {};
+
+// src/components/Badge/Badge.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function Badge({
+  count,
+  label,
+  icon,
+  showLabel = true,
+  size = "md",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: [Badge_default.badge, Badge_default[size], className].filter(Boolean).join(" "), ...props, children: [
+    icon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: Badge_default.icon, children: icon }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: Badge_default.count, children: count }),
+    showLabel && label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: Badge_default.label, children: label })
+  ] });
+}
+function BadgeCompact({
+  count,
+  icon,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: [Badge_default.badge, Badge_default.sm, className].filter(Boolean).join(" "), ...props, children: [
+    icon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: Badge_default.icon, children: icon }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: Badge_default.count, children: count })
+  ] });
+}
+
+// src/components/Button/Button.module.css
+var Button_default = {};
+
+// src/components/Button/Button.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function Button({
+  variant = "primary",
+  size = "md",
+  isLoading = false,
+  loadingText = "Laden...",
+  className,
+  children,
+  disabled,
+  type = "submit",
+  ...props
+}) {
+  const classNames = [Button_default.button, Button_default[variant], Button_default[size], className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "button",
+    {
+      type,
+      className: classNames,
+      disabled: disabled || isLoading,
+      "aria-busy": isLoading || void 0,
+      ...props,
+      children: isLoading ? loadingText : children
+    }
+  );
+}
+
+// src/components/Card/Card.module.css
+var Card_default = {};
+
+// src/components/Card/Card.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function Card({
+  variant = "default",
+  padding = "md",
+  hoverable = false,
+  className,
+  children,
+  ...props
+}) {
+  const classNames = [
+    Card_default.card,
+    !hoverable && Card_default[variant],
+    hoverable && Card_default.hoverable,
+    className
+  ].filter(Boolean).join(" ");
+  const contentClass = [Card_default.cardContent, padding !== "none" && Card_default[`padding-${padding}`]].filter(Boolean).join(" ");
+  if (hoverable) {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: classNames, ...props, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: Card_default.gradientOverlay }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: Card_default.innerGlow }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: Card_default.ringHighlight }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: contentClass, children }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: Card_default.glowBorder })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: classNames, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: contentClass, children }) });
+}
+
+// src/components/Checkbox/Checkbox.module.css
+var Checkbox_default = {};
+
+// src/components/Checkbox/Checkbox.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function Checkbox({ label, id, name, className, ...props }) {
+  const inputId = id || name || label.toLowerCase().replace(/\s+/g, "-");
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { htmlFor: inputId, className: [Checkbox_default.wrapper, className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("input", { type: "checkbox", id: inputId, name, className: Checkbox_default.input, ...props }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: Checkbox_default.label, children: label })
+  ] });
+}
+
+// src/components/Divider/Divider.module.css
+var Divider_default = {};
+
+// src/components/Divider/Divider.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function Divider({ spacing = "md", label, className, ...props }) {
+  if (label) {
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: [Divider_default.labeled, Divider_default[spacing], className].filter(Boolean).join(" "), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("hr", { className: Divider_default.line, ...props }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: Divider_default.label, children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("hr", { className: Divider_default.line, ...props })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    "hr",
+    {
+      className: [Divider_default.divider, Divider_default[spacing], className].filter(Boolean).join(" "),
+      ...props
+    }
+  );
+}
+
+// src/components/DropdownMenu/DropdownMenu.tsx
+var import_react2 = require("react");
+var import_react_dom = require("react-dom");
+
+// src/components/DropdownMenu/DropdownMenu.module.css
+var DropdownMenu_default = {};
+
+// src/components/DropdownMenu/DropdownMenu.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function DropdownMenu({ items, trigger, className }) {
+  const [isOpen, setIsOpen] = (0, import_react2.useState)(false);
+  const [position, setPosition] = (0, import_react2.useState)({ top: 0, right: 0 });
+  const buttonRef = (0, import_react2.useRef)(null);
+  const menuRef = (0, import_react2.useRef)(null);
+  const close = (0, import_react2.useCallback)(() => setIsOpen(false), []);
+  (0, import_react2.useEffect)(() => {
+    if (!isOpen) return;
+    function handleClickOutside(event) {
+      const target = event.target;
+      if (!buttonRef.current?.contains(target) && !menuRef.current?.contains(target)) {
+        close();
+      }
+    }
+    function handleScroll() {
+      close();
+    }
+    function handleEscape(e) {
+      if (e.key === "Escape") close();
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    window.addEventListener("scroll", handleScroll, true);
+    document.addEventListener("keydown", handleEscape);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      window.removeEventListener("scroll", handleScroll, true);
+      document.removeEventListener("keydown", handleEscape);
+    };
+  }, [isOpen, close]);
+  const handleToggle = () => {
+    if (!isOpen && buttonRef.current) {
+      const rect = buttonRef.current.getBoundingClientRect();
+      setPosition({
+        top: rect.bottom + 4,
+        right: window.innerWidth - rect.right
+      });
+    }
+    setIsOpen((prev) => !prev);
+  };
+  const menu = isOpen && typeof document !== "undefined" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "div",
+    {
+      ref: menuRef,
+      className: DropdownMenu_default.menu,
+      style: { top: position.top, right: position.right },
+      role: "menu",
+      children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        "button",
+        {
+          type: "button",
+          role: "menuitem",
+          onClick: () => {
+            close();
+            item.onClick();
+          },
+          className: [DropdownMenu_default.menuItem, item.variant === "danger" && DropdownMenu_default.menuItemDanger].filter(Boolean).join(" "),
+          children: item.label
+        },
+        item.id
+      ))
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      "button",
+      {
+        ref: buttonRef,
+        type: "button",
+        onClick: handleToggle,
+        className: [DropdownMenu_default.trigger, className].filter(Boolean).join(" "),
+        "aria-label": "Aktionen",
+        "aria-expanded": isOpen,
+        "aria-haspopup": "menu",
+        children: trigger || /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("svg", { className: DropdownMenu_default.dotsIcon, fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" }) })
+      }
+    ),
+    menu && (0, import_react_dom.createPortal)(menu, document.body)
+  ] });
+}
+
+// src/components/FilterChips/FilterChips.module.css
+var FilterChips_default = {};
+
+// src/components/FilterChips/FilterChips.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function FilterChips({ filters, onClearAll, className, ...props }) {
+  if (filters.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: [FilterChips_default.wrapper, className].filter(Boolean).join(" "), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: FilterChips_default.chips, children: filters.map((filter) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: FilterChips_default.chip, children: [
+      filter.label,
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "button", onClick: filter.onRemove, className: FilterChips_default.removeButton, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("svg", { width: "12", height: "12", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        "path",
+        {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: 2,
+          d: "M6 18L18 6M6 6l12 12"
+        }
+      ) }) })
+    ] }, filter.id)) }),
+    onClearAll && filters.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "button", onClick: onClearAll, className: FilterChips_default.clearAll, children: "Alle l\xF6schen" })
+  ] });
+}
+
+// src/components/Input/Input.tsx
+var import_react3 = require("react");
+
+// src/components/Input/Input.module.css
+var Input_default = {};
+
+// src/components/Input/Input.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function Input({ label, error, id, name, type = "text", className, ...props }) {
+  const [showPassword, setShowPassword] = (0, import_react3.useState)(false);
+  const inputId = id || name;
+  const isPassword = type === "password";
+  const resolvedType = isPassword && showPassword ? "text" : type;
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: Input_default.wrapper, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("label", { htmlFor: inputId, className: Input_default.label, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: Input_default.container, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        "input",
+        {
+          id: inputId,
+          name,
+          type: resolvedType,
+          className: [
+            Input_default.input,
+            isPassword && Input_default.hasToggle,
+            error && Input_default.error,
+            className
+          ].filter(Boolean).join(" "),
+          "aria-invalid": error ? "true" : void 0,
+          "aria-describedby": error ? `${inputId}-error` : void 0,
+          ...props
+        }
+      ),
+      isPassword && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: () => setShowPassword((prev) => !prev),
+          className: Input_default.toggle,
+          "aria-label": showPassword ? "Passwort verbergen" : "Passwort anzeigen",
+          tabIndex: -1,
+          children: showPassword ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("svg", { width: "20", height: "20", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            "path",
+            {
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              strokeWidth: 2,
+              d: "M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
+            }
+          ) }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("svg", { width: "20", height: "20", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+              }
+            )
+          ] })
+        }
+      )
+    ] }),
+    error && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { id: `${inputId}-error`, className: Input_default.errorText, children: error })
+  ] });
+}
+
+// src/components/Logo/Logo.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function Logo({ size = 48, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 1000 1000",
+      fill: "none",
+      "aria-label": "Ganztagshelden Logo",
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("g", { transform: "matrix(1.62384,0,0,1.62384,-670.097018,-377.993255)", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "path",
+          {
+            d: "M659.306,666.563C647.321,692.452 643.608,697.805 636.105,707.186C597.15,755.887 537.182,756.845 535.652,756.159C520.635,749.432 541.639,734.294 543.087,720.432C546.681,686.029 515.354,694.397 490.973,657.204C474.084,631.441 470.729,569.063 491.533,580.44C566.83,621.619 610.108,565.941 697.497,581.514C795.809,599.034 828.378,545.138 873.613,499.611C886.943,486.194 921.218,489.412 905.57,533.525C884.114,594.015 824.679,638.112 824.916,640.467C825.254,643.83 825.708,647.181 826.036,650.545C841.184,805.69 775.341,869.784 748.516,842.485C733.986,827.697 766.215,763.869 753.18,746.69C742.331,732.393 727.791,767.884 690.115,801.076C617.879,864.714 605.932,819.074 607.847,805.541C609.887,791.128 663.09,752.991 674.077,688.423C677.562,667.944 669.794,667.148 667.332,663.505C665.729,661.133 659.929,665.972 659.306,666.563Z",
+            fill: "var(--color-steel-800, #1E293B)"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "path",
+          {
+            d: "M675.584,684.76C676.835,613.868 598.89,738.438 567.488,699.03C544.801,670.559 676.869,576.383 715.532,582.995C744.492,587.948 775.313,577.886 789.684,572.171C791.809,570.862 793.873,569.676 795.866,568.627C814.646,558.742 857.526,515.802 873.613,499.611C886.943,486.194 921.218,489.412 905.57,533.525C884.114,594.015 824.679,638.112 824.916,640.467C825.254,643.83 825.708,647.181 826.036,650.545C841.184,805.69 775.341,869.784 748.516,842.485C733.986,827.697 766.215,763.869 753.18,746.69C742.331,732.393 727.791,767.884 690.115,801.076C617.879,864.714 605.932,819.074 607.847,805.541C609.887,791.128 663.09,752.991 674.077,688.423C674.245,687.434 674.757,686.206 675.584,684.76Z",
+            fill: "var(--color-steel-500, #64748B)"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "path",
+          {
+            d: "M460.76,425.665C465.048,418.094 676.602,255.297 689.716,245.799C722.985,221.705 734.948,230.838 791.173,274.938C956.769,404.821 957.228,404.054 971.138,415.929C994.202,435.618 980.079,457.145 973.404,463.396C950.46,484.884 936.954,468.134 867.775,414.13C729.691,306.338 729.459,303.94 718.557,304.907C707.569,305.88 567.819,420.024 512.203,461.094C468.741,493.188 448.741,446.89 460.76,425.665Z",
+            fill: "var(--color-steel-600, #475569)"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "path",
+          {
+            d: "M706.539,565.374C599.871,517.702 661.839,386.507 747.483,403.592C856.658,425.371 827.324,597.116 706.539,565.374Z",
+            fill: "var(--color-steel-400, #94A3B8)"
+          }
+        )
+      ] })
+    }
+  );
+}
+
+// src/components/Modal/Modal.tsx
+var import_react4 = require("react");
+var import_react_dom2 = require("react-dom");
+
+// src/components/Modal/Modal.module.css
+var Modal_default = {};
+
+// src/components/Modal/Modal.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function Modal({ isOpen, onClose, title, children, footer }) {
+  const [isAnimating, setIsAnimating] = (0, import_react4.useState)(false);
+  const [isExiting, setIsExiting] = (0, import_react4.useState)(false);
+  const onCloseRef = (0, import_react4.useRef)(onClose);
+  onCloseRef.current = onClose;
+  const handleClose = (0, import_react4.useCallback)(() => {
+    setIsExiting(true);
+    setIsAnimating(false);
+    setTimeout(() => {
+      onCloseRef.current();
+    }, 250);
+  }, []);
+  (0, import_react4.useEffect)(() => {
+    if (!isOpen) {
+      setIsAnimating(false);
+      setIsExiting(false);
+      return;
+    }
+    const handleEscape = (e) => {
+      if (e.key === "Escape") handleClose();
+    };
+    document.addEventListener("keydown", handleEscape);
+    document.body.style.overflow = "hidden";
+    const timer = setTimeout(() => setIsAnimating(true), 10);
+    return () => {
+      document.removeEventListener("keydown", handleEscape);
+      document.body.style.overflow = "";
+      clearTimeout(timer);
+    };
+  }, [isOpen, handleClose]);
+  if (!isOpen) return null;
+  const entering = isAnimating && !isExiting;
+  const modalContent = /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: Modal_default.overlay, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: handleClose,
+        className: [Modal_default.backdrop, entering && Modal_default.backdropVisible].filter(Boolean).join(" "),
+        "aria-label": "Hintergrund - Klicken zum Schlie\xDFen"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+      "div",
+      {
+        className: [Modal_default.dialog, entering ? Modal_default.dialogEnter : Modal_default.dialogExit].join(" "),
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": title || void 0,
+        children: [
+          title ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: Modal_default.header, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h3", { className: Modal_default.title, children: title }),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CloseButton, { onClick: handleClose })
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: Modal_default.closeAbsolute, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CloseButton, { onClick: handleClose }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            "div",
+            {
+              className: [Modal_default.content, entering && Modal_default.contentVisible].filter(Boolean).join(" "),
+              children
+            }
+          ),
+          footer && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: Modal_default.footer, children: footer })
+        ]
+      }
+    )
+  ] });
+  if (typeof document !== "undefined") {
+    return (0, import_react_dom2.createPortal)(modalContent, document.body);
+  }
+  return modalContent;
+}
+function ConfirmationModal({
+  isOpen,
+  onClose,
+  onConfirm,
+  title,
+  children,
+  confirmText = "Best\xE4tigen",
+  cancelText = "Abbrechen",
+  isConfirmLoading = false,
+  isConfirmDisabled = false,
+  variant = "primary"
+}) {
+  const confirmClass = variant === "danger" ? Modal_default.confirmDanger : Modal_default.confirmPrimary;
+  const footer = /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { type: "button", onClick: onClose, className: Modal_default.cancelButton, children: cancelText }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: onConfirm,
+        disabled: isConfirmLoading || isConfirmDisabled,
+        className: [Modal_default.confirmButton, confirmClass].join(" "),
+        children: isConfirmLoading ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: Modal_default.confirmLoading, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("svg", { className: Modal_default.confirmSpinner, fill: "none", viewBox: "0 0 24 24", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("circle", { opacity: 0.25, cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              "path",
+              {
+                opacity: 0.75,
+                fill: "currentColor",
+                d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+              }
+            )
+          ] }),
+          "Wird geladen..."
+        ] }) : confirmText
+      }
+    )
+  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Modal, { isOpen, onClose, title, footer, children });
+}
+function CloseButton({ onClick }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: Modal_default.closeButton,
+      "aria-label": "Modal schlie\xDFen",
+      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        "svg",
+        {
+          className: Modal_default.closeIcon,
+          width: "20",
+          height: "20",
+          fill: "none",
+          viewBox: "0 0 24 24",
+          stroke: "currentColor",
+          strokeWidth: 2,
+          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" })
+        }
+      )
+    }
+  );
+}
+
+// src/components/Pill/Pill.module.css
+var Pill_default = {};
+
+// src/components/Pill/Pill.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function Pill({
+  label,
+  color = "gray",
+  variant = "solid",
+  size = "md",
+  dot = true,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    "span",
+    {
+      className: [Pill_default.pill, Pill_default[`${variant}-${color}`], Pill_default[size], className].filter(Boolean).join(" "),
+      ...props,
+      children: [
+        dot && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: [Pill_default.dot, Pill_default[`dot-${size}`]].join(" ") }),
+        label
+      ]
+    }
+  );
+}
+
+// src/components/Radio/Radio.module.css
+var Radio_default = {};
+
+// src/components/Radio/Radio.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+function Radio({ label, id, name, className, ...props }) {
+  const inputId = id || `${name}-${label.toLowerCase().replace(/\s+/g, "-")}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("label", { htmlFor: inputId, className: [Radio_default.wrapper, className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("input", { type: "radio", id: inputId, name, className: Radio_default.input, ...props }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: Radio_default.label, children: label })
+  ] });
+}
+
+// src/components/SearchBar/SearchBar.module.css
+var SearchBar_default = {};
+
+// src/components/SearchBar/SearchBar.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+function SearchBar({
+  value,
+  onChange,
+  onClear,
+  placeholder = "Name suchen...",
+  size = "md",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: [SearchBar_default.wrapper, className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      "svg",
+      {
+        className: [SearchBar_default.searchIcon, SearchBar_default[`icon-${size}`]].join(" "),
+        fill: "none",
+        viewBox: "0 0 24 24",
+        stroke: "currentColor",
+        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          "path",
+          {
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: 2,
+            d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      "input",
+      {
+        type: "text",
+        placeholder,
+        value,
+        onChange: (e) => onChange(e.target.value),
+        className: [SearchBar_default.input, SearchBar_default[size]].join(" "),
+        ...props
+      }
+    ),
+    value && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: () => {
+          onChange("");
+          onClear?.();
+        },
+        className: SearchBar_default.clearButton,
+        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          "svg",
+          {
+            className: [SearchBar_default.clearIcon, SearchBar_default[`icon-${size}`]].join(" "),
+            fill: "none",
+            viewBox: "0 0 24 24",
+            stroke: "currentColor",
+            children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M6 18L18 6M6 6l12 12"
+              }
+            )
+          }
+        )
+      }
+    )
+  ] });
+}
+
+// src/components/Select/Select.module.css
+var Select_default = {};
+
+// src/components/Select/Select.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+function Select({ label, placeholder, options, id, className, ...props }) {
+  const selectId = id || (label ? label.toLowerCase().replace(/\s+/g, "-") : void 0);
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: Select_default.wrapper, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("label", { htmlFor: selectId, className: Select_default.label, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: Select_default.container, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+        "select",
+        {
+          id: selectId,
+          className: [Select_default.select, className].filter(Boolean).join(" "),
+          ...props,
+          children: [
+            placeholder && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("option", { value: "", disabled: props.required, children: placeholder }),
+            options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value))
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: Select_default.chevron, "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) }) })
+    ] })
+  ] });
+}
+
+// src/components/Skeleton/Skeleton.module.css
+var Skeleton_default = {};
+
+// src/components/Skeleton/Skeleton.tsx
+var import_jsx_runtime18 = require("react/jsx-runtime");
+function Skeleton({
+  width,
+  height = 16,
+  circle = false,
+  borderRadius,
+  count = 1,
+  gap = 8,
+  className,
+  style,
+  ...props
+}) {
+  const resolvedRadius = circle ? "9999px" : borderRadius != null ? typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius : "var(--radius-md)";
+  const itemStyle = {
+    width: circle ? height : width,
+    height,
+    borderRadius: resolvedRadius,
+    ...style
+  };
+  if (count === 1) {
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      "div",
+      {
+        className: [Skeleton_default.skeleton, className].filter(Boolean).join(" "),
+        style: itemStyle,
+        "aria-hidden": "true",
+        ...props
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: Skeleton_default.group, style: { gap }, "aria-hidden": "true", ...props, children: Array.from({ length: count }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    "div",
+    {
+      className: [Skeleton_default.skeleton, className].filter(Boolean).join(" "),
+      style: itemStyle
+    },
+    `skeleton-${i}`
+  )) });
+}
+
+// src/components/Spinner/Spinner.module.css
+var Spinner_default = {};
+
+// src/components/Spinner/Spinner.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var sizes = { sm: 20, md: 32, lg: 48 };
+var strokes = { sm: 2.5, md: 3, lg: 3.5 };
+function Spinner({ size = "md", label, className, ...props }) {
+  const s = sizes[size];
+  const stroke = strokes[size];
+  const r = (s - stroke) / 2;
+  const circumference = 2 * Math.PI * r;
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: [Spinner_default.wrapper, className].filter(Boolean).join(" "), role: "status", ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("svg", { width: s, height: s, viewBox: `0 0 ${s} ${s}`, className: Spinner_default.svg, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        "circle",
+        {
+          cx: s / 2,
+          cy: s / 2,
+          r,
+          fill: "none",
+          stroke: "var(--semantic-color-border-default)",
+          strokeWidth: stroke
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        "circle",
+        {
+          cx: s / 2,
+          cy: s / 2,
+          r,
+          fill: "none",
+          stroke: "var(--semantic-color-brand-primary)",
+          strokeWidth: stroke,
+          strokeLinecap: "round",
+          strokeDasharray: `${circumference * 0.3} ${circumference * 0.7}`
+        }
+      )
+    ] }),
+    label && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: Spinner_default.label, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: Spinner_default.srOnly, children: "Laden..." })
+  ] });
+}
+
+// src/components/StatusDot/StatusDot.module.css
+var StatusDot_default = {};
+
+// src/components/StatusDot/StatusDot.tsx
+var import_jsx_runtime20 = require("react/jsx-runtime");
+function StatusDot({
+  color,
+  tooltip,
+  size = "sm",
+  pulse,
+  className,
+  ...props
+}) {
+  const shouldPulse = pulse ?? color === "green";
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    "div",
+    {
+      className: [StatusDot_default.dot, StatusDot_default[color], StatusDot_default[size], shouldPulse && StatusDot_default.pulse, className].filter(Boolean).join(" "),
+      title: tooltip,
+      ...props
+    }
+  );
+}
+
+// src/components/Tabs/Tabs.tsx
+var import_react5 = require("react");
+
+// src/components/Tabs/Tabs.module.css
+var Tabs_default = {};
+
+// src/components/Tabs/Tabs.tsx
+var import_jsx_runtime21 = require("react/jsx-runtime");
+function Tabs({ items, activeTab, onTabChange, className }) {
+  const tabRefs = (0, import_react5.useRef)([]);
+  const scrollRef = (0, import_react5.useRef)(null);
+  const [indicatorStyle, setIndicatorStyle] = (0, import_react5.useState)({ width: 0, left: 0 });
+  const [canScrollLeft, setCanScrollLeft] = (0, import_react5.useState)(false);
+  const [canScrollRight, setCanScrollRight] = (0, import_react5.useState)(false);
+  const showMobileDropdown = items.length >= 2;
+  const activeIndex = (0, import_react5.useMemo)(
+    () => items.findIndex((item) => item.id === activeTab),
+    [items, activeTab]
+  );
+  const activeLabel = items[activeIndex]?.label ?? "";
+  const updateScrollState = (0, import_react5.useCallback)(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    setCanScrollLeft(el.scrollLeft > 0);
+    setCanScrollRight(el.scrollLeft + el.clientWidth < el.scrollWidth - 1);
+  }, []);
+  const updateIndicator = (0, import_react5.useCallback)(() => {
+    const activeTabElement = tabRefs.current[activeIndex];
+    if (activeTabElement && activeTabElement.offsetWidth > 0) {
+      setIndicatorStyle({
+        left: activeTabElement.offsetLeft,
+        width: activeTabElement.offsetWidth
+      });
+    }
+  }, [activeIndex]);
+  (0, import_react5.useEffect)(() => {
+    updateIndicator();
+    const activeTabElement = tabRefs.current[activeIndex];
+    if (activeTabElement && scrollRef.current) {
+      const container = scrollRef.current;
+      const tabLeft = activeTabElement.offsetLeft;
+      const tabRight = tabLeft + activeTabElement.offsetWidth;
+      const containerLeft = container.scrollLeft;
+      const containerRight = containerLeft + container.clientWidth;
+      if (tabLeft < containerLeft) {
+        container.scrollTo({ left: tabLeft - 16, behavior: "smooth" });
+      } else if (tabRight > containerRight) {
+        container.scrollTo({
+          left: tabRight - container.clientWidth + 16,
+          behavior: "smooth"
+        });
+      }
+    }
+  }, [activeIndex, updateIndicator]);
+  (0, import_react5.useEffect)(() => {
+    updateScrollState();
+    updateIndicator();
+    const el = scrollRef.current;
+    if (!el) return;
+    el.addEventListener("scroll", updateScrollState, { passive: true });
+    const observer = new ResizeObserver(() => {
+      updateScrollState();
+      updateIndicator();
+    });
+    observer.observe(el);
+    return () => {
+      el.removeEventListener("scroll", updateScrollState);
+      observer.disconnect();
+    };
+  }, [updateScrollState, updateIndicator]);
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: [Tabs_default.wrapper, className].filter(Boolean).join(" "), children: [
+    showMobileDropdown && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      MobileTabDropdown,
+      {
+        items,
+        activeTab,
+        activeLabel,
+        onTabChange
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+      "div",
+      {
+        className: [Tabs_default.tabsContainer, showMobileDropdown && Tabs_default.hiddenMobile].filter(Boolean).join(" "),
+        children: [
+          canScrollLeft && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: Tabs_default.fadeLeft }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { ref: scrollRef, className: Tabs_default.scrollable, children: [
+            items.map((tab, index) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+              "button",
+              {
+                ref: (el) => {
+                  tabRefs.current[index] = el;
+                },
+                type: "button",
+                onClick: () => onTabChange(tab.id),
+                className: [
+                  Tabs_default.tab,
+                  activeTab === tab.id ? Tabs_default.tabActive : Tabs_default.tabInactive
+                ].join(" "),
+                children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: Tabs_default.tabLabel, children: tab.label })
+              },
+              tab.id
+            )),
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+              "div",
+              {
+                className: Tabs_default.indicator,
+                style: {
+                  left: `${indicatorStyle.left}px`,
+                  width: `${indicatorStyle.width}px`
+                }
+              }
+            )
+          ] }),
+          canScrollRight && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: Tabs_default.fadeRight })
+        ]
+      }
+    )
+  ] });
+}
+function MobileTabDropdown({
+  items,
+  activeTab,
+  activeLabel,
+  onTabChange
+}) {
+  const [isOpen, setIsOpen] = (0, import_react5.useState)(false);
+  const dropdownRef = (0, import_react5.useRef)(null);
+  (0, import_react5.useEffect)(() => {
+    function handleClickOutside(event) {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: Tabs_default.mobileDropdown, ref: dropdownRef, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+      "button",
+      {
+        type: "button",
+        onClick: () => setIsOpen(!isOpen),
+        className: [Tabs_default.mobileToggle, isOpen && Tabs_default.mobileToggleOpen].filter(Boolean).join(" "),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: activeLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            "svg",
+            {
+              className: [Tabs_default.mobileChevron, isOpen && Tabs_default.mobileChevronOpen].filter(Boolean).join(" "),
+              width: "20",
+              height: "20",
+              fill: "none",
+              viewBox: "0 0 24 24",
+              stroke: "currentColor",
+              children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })
+            }
+          )
+        ]
+      }
+    ),
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: Tabs_default.mobileMenu, children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: () => {
+          onTabChange(item.id);
+          setIsOpen(false);
+        },
+        className: [
+          Tabs_default.mobileMenuItem,
+          item.id === activeTab && Tabs_default.mobileMenuItemActive
+        ].filter(Boolean).join(" "),
+        children: item.label
+      },
+      item.id
+    )) })
+  ] });
+}
+
+// src/components/Textarea/Textarea.module.css
+var Textarea_default = {};
+
+// src/components/Textarea/Textarea.tsx
+var import_jsx_runtime22 = require("react/jsx-runtime");
+function Textarea({ label, error, id, name, rows = 4, className, ...props }) {
+  const textareaId = id || name;
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: Textarea_default.wrapper, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("label", { htmlFor: textareaId, className: Textarea_default.label, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      "textarea",
+      {
+        id: textareaId,
+        name,
+        rows,
+        className: [Textarea_default.textarea, error && Textarea_default.error, className].filter(Boolean).join(" "),
+        "aria-invalid": error ? "true" : void 0,
+        "aria-describedby": error ? `${textareaId}-error` : void 0,
+        ...props
+      }
+    ),
+    error && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { id: `${textareaId}-error`, className: Textarea_default.errorText, children: error })
+  ] });
+}
+
+// src/components/Toast/Toast.tsx
+var import_react6 = require("react");
+var import_react_dom3 = require("react-dom");
+
+// src/components/Toast/Toast.module.css
+var Toast_default = {};
+
+// src/components/Toast/Toast.tsx
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var icons2 = {
+  success: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    "svg",
+    {
+      width: "18",
+      height: "18",
+      fill: "none",
+      viewBox: "0 0 24 24",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" })
+    }
+  ),
+  error: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    "svg",
+    {
+      width: "18",
+      height: "18",
+      fill: "none",
+      viewBox: "0 0 24 24",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" })
+    }
+  ),
+  warning: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    "svg",
+    {
+      width: "18",
+      height: "18",
+      fill: "none",
+      viewBox: "0 0 24 24",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        "path",
+        {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          d: "M12 9v2m0 4h.01M10.29 3.86l-8.58 14.57A1 1 0 002.57 20h18.86a1 1 0 00.86-1.57L13.71 3.86a1 1 0 00-1.72 0z"
+        }
+      )
+    }
+  ),
+  info: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    "svg",
+    {
+      width: "18",
+      height: "18",
+      fill: "none",
+      viewBox: "0 0 24 24",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        "path",
+        {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          d: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+        }
+      )
+    }
+  )
+};
+function Toast({ type = "info", message, duration = 4e3, onClose }) {
+  const [isVisible, setIsVisible] = (0, import_react6.useState)(false);
+  const [isExiting, setIsExiting] = (0, import_react6.useState)(false);
+  const dismiss = (0, import_react6.useCallback)(() => {
+    setIsExiting(true);
+    setTimeout(onClose, 200);
+  }, [onClose]);
+  (0, import_react6.useEffect)(() => {
+    const enterTimer = setTimeout(() => setIsVisible(true), 10);
+    const exitTimer = duration > 0 ? setTimeout(dismiss, duration) : void 0;
+    return () => {
+      clearTimeout(enterTimer);
+      if (exitTimer) clearTimeout(exitTimer);
+    };
+  }, [duration, dismiss]);
+  const content = /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: Toast_default.container, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+    "div",
+    {
+      className: [
+        Toast_default.toast,
+        Toast_default[type],
+        isVisible && !isExiting ? Toast_default.enter : Toast_default.exit
+      ].filter(Boolean).join(" "),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: Toast_default.icon, children: icons2[type] }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: Toast_default.message, children: message }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { type: "button", onClick: dismiss, className: Toast_default.close, "aria-label": "Schlie\xDFen", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          "svg",
+          {
+            width: "14",
+            height: "14",
+            fill: "none",
+            viewBox: "0 0 24 24",
+            stroke: "currentColor",
+            strokeWidth: 2,
+            children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" })
+          }
+        ) })
+      ]
+    }
+  ) });
+  if (typeof document !== "undefined") {
+    return (0, import_react_dom3.createPortal)(content, document.body);
+  }
+  return content;
+}
+
+// src/components/Toggle/Toggle.module.css
+var Toggle_default = {};
+
+// src/components/Toggle/Toggle.tsx
+var import_jsx_runtime24 = require("react/jsx-runtime");
+function Toggle({ label, size = "md", id, name, className, ...props }) {
+  const inputId = id || name || (label ? label.toLowerCase().replace(/\s+/g, "-") : void 0);
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("label", { htmlFor: inputId, className: [Toggle_default.wrapper, className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("input", { type: "checkbox", id: inputId, name, className: Toggle_default.input, ...props }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: [Toggle_default.track, Toggle_default[size]].join(" "), children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: Toggle_default.thumb }) }),
+    label && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: Toggle_default.label, children: label })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Accordion,
+  Alert,
+  Avatar,
+  Badge,
+  BadgeCompact,
+  Button,
+  Card,
+  Checkbox,
+  ConfirmationModal,
+  Divider,
+  DropdownMenu,
+  FilterChips,
+  Input,
+  Logo,
+  Modal,
+  Pill,
+  Radio,
+  SearchBar,
+  Select,
+  Skeleton,
+  Spinner,
+  StatusDot,
+  Tabs,
+  Textarea,
+  Toast,
+  Toggle
+});
+//# sourceMappingURL=index.cjs.map