@moto-nrw/design-system 0.5.0 → 0.5.2

package/dist/index.js

@@ -605,10 +605,35 @@ function Input({ label, error, id, name, type = "text", className, ...props }) {
   ] });
 }
 
+// src/components/ListItem/ListItem.tsx
+import { jsx as jsx12 } from "react/jsx-runtime";
+function ListItem({
+  active = false,
+  onClick,
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx12(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: cn(
+        "flex w-full cursor-pointer items-center gap-3 rounded-xl px-3 py-3 text-left transition-all",
+        active ? "border border-[var(--semantic-color-border-default)] bg-[var(--semantic-color-bg-subtle)]" : "border border-transparent hover:bg-[var(--semantic-color-bg-subtle)]",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+
 // src/components/Logo/Logo.tsx
-import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
 function Logo({ size = 48, ...props }) {
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx13(
     "svg",
     {
       width: size,
@@ -618,28 +643,28 @@ function Logo({ size = 48, ...props }) {
       "aria-label": "Ganztagshelden Logo",
       ...props,
       children: /* @__PURE__ */ jsxs10("g", { transform: "matrix(1.62384,0,0,1.62384,-670.097018,-377.993255)", children: [
-        /* @__PURE__ */ jsx12(
+        /* @__PURE__ */ jsx13(
           "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__ */ jsx12(
+        /* @__PURE__ */ jsx13(
           "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__ */ jsx12(
+        /* @__PURE__ */ jsx13(
           "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__ */ jsx12(
+        /* @__PURE__ */ jsx13(
           "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",
@@ -654,7 +679,7 @@ function Logo({ size = 48, ...props }) {
 // src/components/Modal/Modal.tsx
 import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef2, useState as useState4 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
-import { Fragment as Fragment2, jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
 function Modal({ isOpen, onClose, title, children, footer }) {
   const [isAnimating, setIsAnimating] = useState4(false);
   const [isExiting, setIsExiting] = useState4(false);
@@ -689,7 +714,7 @@ function Modal({ isOpen, onClose, title, children, footer }) {
   const entering = isAnimating && !isExiting;
   const idle = !isAnimating && !isExiting;
   const modalContent = /* @__PURE__ */ jsxs11("div", { className: "fixed inset-0 z-[var(--modal-z-index)] flex items-center justify-center", children: [
-    /* @__PURE__ */ jsx13(
+    /* @__PURE__ */ jsx14(
       "button",
       {
         type: "button",
@@ -715,10 +740,10 @@ function Modal({ isOpen, onClose, title, children, footer }) {
         "aria-label": title || void 0,
         children: [
           title ? /* @__PURE__ */ jsxs11("div", { className: "flex items-center justify-between px-[var(--modal-padding-x)] py-[var(--modal-padding-y)] border-b border-[var(--semantic-color-border-subtle)]", children: [
-            /* @__PURE__ */ jsx13("h3", { className: "font-sans text-lg font-semibold text-[var(--semantic-color-text-default)] m-0 pr-4", children: title }),
-            /* @__PURE__ */ jsx13(CloseButton, { onClick: handleClose })
-          ] }) : /* @__PURE__ */ jsx13("div", { className: "absolute top-4 right-4 z-10", children: /* @__PURE__ */ jsx13(CloseButton, { onClick: handleClose }) }),
-          /* @__PURE__ */ jsx13(
+            /* @__PURE__ */ jsx14("h3", { className: "font-sans text-lg font-semibold text-[var(--semantic-color-text-default)] m-0 pr-4", children: title }),
+            /* @__PURE__ */ jsx14(CloseButton, { onClick: handleClose })
+          ] }) : /* @__PURE__ */ jsx14("div", { className: "absolute top-4 right-4 z-10", children: /* @__PURE__ */ jsx14(CloseButton, { onClick: handleClose }) }),
+          /* @__PURE__ */ jsx14(
             "div",
             {
               className: cn(
@@ -728,7 +753,7 @@ function Modal({ isOpen, onClose, title, children, footer }) {
               children
             }
           ),
-          footer && /* @__PURE__ */ jsx13("div", { className: "flex justify-end gap-3 px-[var(--modal-padding-x)] py-[var(--modal-padding-y)] border-t border-[var(--semantic-color-border-subtle)] bg-[var(--modal-footer-bg)]", children: footer })
+          footer && /* @__PURE__ */ jsx14("div", { className: "flex justify-end gap-3 px-[var(--modal-padding-x)] py-[var(--modal-padding-y)] border-t border-[var(--semantic-color-border-subtle)] bg-[var(--modal-footer-bg)]", children: footer })
         ]
       }
     )
@@ -751,7 +776,7 @@ function ConfirmationModal({
   variant = "primary"
 }) {
   const footer = /* @__PURE__ */ jsxs11(Fragment2, { children: [
-    /* @__PURE__ */ jsx13(
+    /* @__PURE__ */ jsx14(
       "button",
       {
         type: "button",
@@ -760,7 +785,7 @@ function ConfirmationModal({
         children: cancelText
       }
     ),
-    /* @__PURE__ */ jsx13(
+    /* @__PURE__ */ jsx14(
       "button",
       {
         type: "button",
@@ -778,8 +803,8 @@ function ConfirmationModal({
               fill: "none",
               viewBox: "0 0 24 24",
               children: [
-                /* @__PURE__ */ jsx13("circle", { opacity: 0.25, cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
-                /* @__PURE__ */ jsx13(
+                /* @__PURE__ */ jsx14("circle", { opacity: 0.25, cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+                /* @__PURE__ */ jsx14(
                   "path",
                   {
                     opacity: 0.75,
@@ -795,17 +820,17 @@ function ConfirmationModal({
       }
     )
   ] });
-  return /* @__PURE__ */ jsx13(Modal, { isOpen, onClose, title, footer, children });
+  return /* @__PURE__ */ jsx14(Modal, { isOpen, onClose, title, footer, children });
 }
 function CloseButton({ onClick }) {
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx14(
     "button",
     {
       type: "button",
       onClick,
       className: "group flex items-center justify-center shrink-0 size-[var(--modal-close-size)] p-0 border-none rounded-lg bg-transparent text-[var(--semantic-color-text-muted)] cursor-pointer transition-all duration-[var(--duration-fast)] hover:bg-[var(--semantic-color-bg-muted)] hover:text-[var(--semantic-color-text-default)] hover:scale-105 active:scale-95",
       "aria-label": "Modal schlie\xDFen",
-      children: /* @__PURE__ */ jsx13(
+      children: /* @__PURE__ */ jsx14(
         "svg",
         {
           className: "transition-transform duration-[var(--duration-fast)] group-hover:rotate-90",
@@ -815,7 +840,7 @@ function CloseButton({ onClick }) {
           viewBox: "0 0 24 24",
           stroke: "currentColor",
           strokeWidth: 2,
-          children: /* @__PURE__ */ jsx13("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" })
+          children: /* @__PURE__ */ jsx14("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" })
         }
       )
     }
@@ -823,7 +848,7 @@ function CloseButton({ onClick }) {
 }
 
 // src/components/Pill/Pill.tsx
-import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
 var solidStyles = {
   red: "bg-[var(--semantic-color-feedback-error-strong)] text-[var(--semantic-color-text-inverse)]",
   green: "bg-[var(--semantic-color-brand-primary)] text-[var(--semantic-color-text-inverse)]",
@@ -870,7 +895,7 @@ function Pill({
       ),
       ...props,
       children: [
-        dot && /* @__PURE__ */ jsx14("span", { className: cn("rounded-full bg-current opacity-80", dotSizes[size]) }),
+        dot && /* @__PURE__ */ jsx15("span", { className: cn("rounded-full bg-current opacity-80", dotSizes[size]) }),
         label
       ]
     }
@@ -878,7 +903,7 @@ function Pill({
 }
 
 // src/components/Radio/Radio.tsx
-import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
 function Radio({ label, id, name, className, ...props }) {
   const inputId = id || `${name}-${label.toLowerCase().replace(/\s+/g, "-")}`;
   return /* @__PURE__ */ jsxs13(
@@ -890,7 +915,7 @@ function Radio({ label, id, name, className, ...props }) {
         className
       ),
       children: [
-        /* @__PURE__ */ jsx15(
+        /* @__PURE__ */ jsx16(
           "input",
           {
             type: "radio",
@@ -900,14 +925,14 @@ function Radio({ label, id, name, className, ...props }) {
             ...props
           }
         ),
-        /* @__PURE__ */ jsx15("span", { className: "font-sans text-sm text-[var(--semantic-color-text-default)] select-none", children: label })
+        /* @__PURE__ */ jsx16("span", { className: "font-sans text-sm text-[var(--semantic-color-text-default)] select-none", children: label })
       ]
     }
   );
 }
 
 // src/components/SearchBar/SearchBar.tsx
-import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
 var sizeStyles5 = {
   sm: "py-2 pl-9 pr-3 text-sm",
   md: "py-2.5 pl-9 pr-10 text-sm",
@@ -928,7 +953,7 @@ function SearchBar({
   ...props
 }) {
   return /* @__PURE__ */ jsxs14("div", { className: cn("relative", className), children: [
-    /* @__PURE__ */ jsx16(
+    /* @__PURE__ */ jsx17(
       "svg",
       {
         className: cn(
@@ -938,7 +963,7 @@ function SearchBar({
         fill: "none",
         viewBox: "0 0 24 24",
         stroke: "currentColor",
-        children: /* @__PURE__ */ jsx16(
+        children: /* @__PURE__ */ jsx17(
           "path",
           {
             strokeLinecap: "round",
@@ -949,7 +974,7 @@ function SearchBar({
         )
       }
     ),
-    /* @__PURE__ */ jsx16(
+    /* @__PURE__ */ jsx17(
       "input",
       {
         type: "text",
@@ -965,7 +990,7 @@ function SearchBar({
         ...props
       }
     ),
-    value && /* @__PURE__ */ jsx16(
+    value && /* @__PURE__ */ jsx17(
       "button",
       {
         type: "button",
@@ -974,14 +999,14 @@ function SearchBar({
           onClear?.();
         },
         className: "absolute top-1/2 right-2 -translate-y-1/2 flex items-center justify-center p-1 border-none rounded-full bg-transparent cursor-pointer transition-colors duration-[var(--duration-fast)] hover:bg-[var(--semantic-color-bg-muted)]",
-        children: /* @__PURE__ */ jsx16(
+        children: /* @__PURE__ */ jsx17(
           "svg",
           {
             className: cn("text-[var(--semantic-color-text-muted)]", iconSizes[size]),
             fill: "none",
             viewBox: "0 0 24 24",
             stroke: "currentColor",
-            children: /* @__PURE__ */ jsx16(
+            children: /* @__PURE__ */ jsx17(
               "path",
               {
                 strokeLinecap: "round",
@@ -998,11 +1023,11 @@ function SearchBar({
 }
 
 // src/components/Select/Select.tsx
-import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
 function Select({ label, placeholder, options, id, className, ...props }) {
   const selectId = id || (label ? label.toLowerCase().replace(/\s+/g, "-") : void 0);
   return /* @__PURE__ */ jsxs15("div", { className: "flex flex-col gap-1", children: [
-    label && /* @__PURE__ */ jsx17(
+    label && /* @__PURE__ */ jsx18(
       "label",
       {
         htmlFor: selectId,
@@ -1023,17 +1048,17 @@ function Select({ label, placeholder, options, id, className, ...props }) {
           ),
           ...props,
           children: [
-            placeholder && /* @__PURE__ */ jsx17("option", { value: "", disabled: props.required, children: placeholder }),
-            options.map((option) => /* @__PURE__ */ jsx17("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value))
+            placeholder && /* @__PURE__ */ jsx18("option", { value: "", disabled: props.required, children: placeholder }),
+            options.map((option) => /* @__PURE__ */ jsx18("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value))
           ]
         }
       ),
-      /* @__PURE__ */ jsx17(
+      /* @__PURE__ */ jsx18(
         "div",
         {
           className: "absolute top-0 right-0 bottom-0 flex items-center pr-3 text-[var(--semantic-color-text-muted)] pointer-events-none",
           "aria-hidden": "true",
-          children: /* @__PURE__ */ jsx17("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: /* @__PURE__ */ jsx17("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })
+          children: /* @__PURE__ */ jsx18("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: /* @__PURE__ */ jsx18("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })
         }
       )
     ] })
@@ -1041,7 +1066,7 @@ function Select({ label, placeholder, options, id, className, ...props }) {
 }
 
 // src/components/Skeleton/Skeleton.tsx
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 var skeletonClass = "animate-[wave_1.5s_ease-in-out_infinite] bg-[length:200%_100%] bg-[linear-gradient(90deg,var(--semantic-color-bg-muted)_25%,var(--semantic-color-bg-subtle)_50%,var(--semantic-color-bg-muted)_75%)]";
 function Skeleton({
   width,
@@ -1062,7 +1087,7 @@ function Skeleton({
     ...style
   };
   if (count === 1) {
-    return /* @__PURE__ */ jsx18(
+    return /* @__PURE__ */ jsx19(
       "div",
       {
         className: cn(skeletonClass, className),
@@ -1072,11 +1097,11 @@ function Skeleton({
       }
     );
   }
-  return /* @__PURE__ */ jsx18("div", { className: "flex flex-col", style: { gap }, "aria-hidden": "true", ...props, children: Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsx18("div", { className: cn(skeletonClass, className), style: itemStyle }, `skeleton-${i}`)) });
+  return /* @__PURE__ */ jsx19("div", { className: "flex flex-col", style: { gap }, "aria-hidden": "true", ...props, children: Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsx19("div", { className: cn(skeletonClass, className), style: itemStyle }, `skeleton-${i}`)) });
 }
 
 // src/components/Spinner/Spinner.tsx
-import { jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs16 } from "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 }) {
@@ -1093,7 +1118,7 @@ function Spinner({ size = "md", label, className, ...props }) {
         viewBox: `0 0 ${s} ${s}`,
         className: "animate-[ds-spin_0.8s_cubic-bezier(0.4,0,0.2,1)_infinite]",
         children: [
-          /* @__PURE__ */ jsx19(
+          /* @__PURE__ */ jsx20(
             "circle",
             {
               cx: s / 2,
@@ -1104,7 +1129,7 @@ function Spinner({ size = "md", label, className, ...props }) {
               strokeWidth: stroke
             }
           ),
-          /* @__PURE__ */ jsx19(
+          /* @__PURE__ */ jsx20(
             "circle",
             {
               cx: s / 2,
@@ -1120,13 +1145,13 @@ function Spinner({ size = "md", label, className, ...props }) {
         ]
       }
     ),
-    label && /* @__PURE__ */ jsx19("p", { className: "m-0 font-sans text-sm text-[var(--semantic-color-text-muted)]", children: label }),
-    /* @__PURE__ */ jsx19("span", { className: "sr-only", children: "Laden..." })
+    label && /* @__PURE__ */ jsx20("p", { className: "m-0 font-sans text-sm text-[var(--semantic-color-text-muted)]", children: label }),
+    /* @__PURE__ */ jsx20("span", { className: "sr-only", children: "Laden..." })
   ] });
 }
 
 // src/components/StatusDot/StatusDot.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 var colorStyles = {
   green: "bg-[var(--semantic-color-feedback-success)]",
   yellow: "bg-[var(--semantic-color-feedback-warning)]",
@@ -1146,7 +1171,7 @@ function StatusDot({
   ...props
 }) {
   const shouldPulse = pulse ?? color === "green";
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     "div",
     {
       className: cn(
@@ -1164,7 +1189,7 @@ function StatusDot({
 
 // src/components/Tabs/Tabs.tsx
 import { useCallback as useCallback3, useEffect as useEffect3, useMemo, useRef as useRef3, useState as useState5 } from "react";
-import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
 function Tabs({ items, activeTab, onTabChange, className }) {
   const tabRefs = useRef3([]);
   const scrollRef = useRef3(null);
@@ -1228,7 +1253,7 @@ function Tabs({ items, activeTab, onTabChange, className }) {
     };
   }, [updateScrollState, updateIndicator]);
   return /* @__PURE__ */ jsxs17("div", { className: cn("relative", className), children: [
-    showMobileDropdown && /* @__PURE__ */ jsx21(
+    showMobileDropdown && /* @__PURE__ */ jsx22(
       MobileTabDropdown,
       {
         items,
@@ -1238,14 +1263,14 @@ function Tabs({ items, activeTab, onTabChange, className }) {
       }
     ),
     /* @__PURE__ */ jsxs17("div", { className: cn("relative", showMobileDropdown && "hidden md:block"), children: [
-      canScrollLeft && /* @__PURE__ */ jsx21("div", { className: "absolute top-0 bottom-0 left-0 z-10 w-6 bg-gradient-to-r from-[var(--semantic-color-bg-default)] to-transparent pointer-events-none" }),
+      canScrollLeft && /* @__PURE__ */ jsx22("div", { className: "absolute top-0 bottom-0 left-0 z-10 w-6 bg-gradient-to-r from-[var(--semantic-color-bg-default)] to-transparent pointer-events-none" }),
       /* @__PURE__ */ jsxs17(
         "div",
         {
           ref: scrollRef,
           className: "relative flex gap-[var(--tabs-gap)] overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
           children: [
-            items.map((tab, index) => /* @__PURE__ */ jsx21(
+            items.map((tab, index) => /* @__PURE__ */ jsx22(
               "button",
               {
                 ref: (el) => {
@@ -1257,11 +1282,11 @@ function Tabs({ items, activeTab, onTabChange, className }) {
                   "relative pb-3 border-none bg-transparent font-sans text-sm font-medium cursor-pointer transition-colors duration-[var(--duration-fast)] whitespace-nowrap",
                   activeTab === tab.id ? "text-[var(--semantic-color-text-default)] font-semibold" : "text-[var(--semantic-color-text-muted)] hover:text-[var(--semantic-color-text-tertiary)]"
                 ),
-                children: /* @__PURE__ */ jsx21("span", { className: "whitespace-nowrap", children: tab.label })
+                children: /* @__PURE__ */ jsx22("span", { className: "whitespace-nowrap", children: tab.label })
               },
               tab.id
             )),
-            /* @__PURE__ */ jsx21(
+            /* @__PURE__ */ jsx22(
               "div",
               {
                 className: "absolute bottom-0 h-[var(--tabs-indicator-height)] rounded-full bg-[var(--semantic-color-text-default)] transition-[left,width] duration-[var(--duration-slow)] ease-out",
@@ -1274,7 +1299,7 @@ function Tabs({ items, activeTab, onTabChange, className }) {
           ]
         }
       ),
-      canScrollRight && /* @__PURE__ */ jsx21("div", { className: "absolute top-0 right-0 bottom-0 z-10 w-6 bg-gradient-to-l from-[var(--semantic-color-bg-default)] to-transparent pointer-events-none" })
+      canScrollRight && /* @__PURE__ */ jsx22("div", { className: "absolute top-0 right-0 bottom-0 z-10 w-6 bg-gradient-to-l from-[var(--semantic-color-bg-default)] to-transparent pointer-events-none" })
     ] })
   ] });
 }
@@ -1306,8 +1331,8 @@ function MobileTabDropdown({
           isOpen && "bg-[var(--semantic-color-bg-subtle)]"
         ),
         children: [
-          /* @__PURE__ */ jsx21("span", { children: activeLabel }),
-          /* @__PURE__ */ jsx21(
+          /* @__PURE__ */ jsx22("span", { children: activeLabel }),
+          /* @__PURE__ */ jsx22(
             "svg",
             {
               className: cn(
@@ -1319,13 +1344,13 @@ function MobileTabDropdown({
               fill: "none",
               viewBox: "0 0 24 24",
               stroke: "currentColor",
-              children: /* @__PURE__ */ jsx21("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })
+              children: /* @__PURE__ */ jsx22("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })
             }
           )
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ jsx21("div", { className: "absolute top-full left-0 z-[var(--tabs-mobile-z-index)] mt-1 min-w-48 border border-[var(--semantic-color-border-default)] rounded-lg bg-[var(--semantic-color-bg-default)] py-1 shadow-lg", children: items.map((item) => /* @__PURE__ */ jsx21(
+    isOpen && /* @__PURE__ */ jsx22("div", { className: "absolute top-full left-0 z-[var(--tabs-mobile-z-index)] mt-1 min-w-48 border border-[var(--semantic-color-border-default)] rounded-lg bg-[var(--semantic-color-bg-default)] py-1 shadow-lg", children: items.map((item) => /* @__PURE__ */ jsx22(
       "button",
       {
         type: "button",
@@ -1345,11 +1370,11 @@ function MobileTabDropdown({
 }
 
 // src/components/Textarea/Textarea.tsx
-import { jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs18 } from "react/jsx-runtime";
 function Textarea({ label, error, id, name, rows = 4, className, ...props }) {
   const textareaId = id || name;
   return /* @__PURE__ */ jsxs18("div", { className: "flex flex-col gap-2", children: [
-    label && /* @__PURE__ */ jsx22(
+    label && /* @__PURE__ */ jsx23(
       "label",
       {
         htmlFor: textareaId,
@@ -1357,7 +1382,7 @@ function Textarea({ label, error, id, name, rows = 4, className, ...props }) {
         children: label
       }
     ),
-    /* @__PURE__ */ jsx22(
+    /* @__PURE__ */ jsx23(
       "textarea",
       {
         id: textareaId,
@@ -1376,7 +1401,7 @@ function Textarea({ label, error, id, name, rows = 4, className, ...props }) {
         ...props
       }
     ),
-    error && /* @__PURE__ */ jsx22(
+    error && /* @__PURE__ */ jsx23(
       "p",
       {
         id: `${textareaId}-error`,
@@ -1390,7 +1415,7 @@ function Textarea({ label, error, id, name, rows = 4, className, ...props }) {
 // src/components/Toast/Toast.tsx
 import { useCallback as useCallback4, useEffect as useEffect4, useState as useState6 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
-import { jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs19 } from "react/jsx-runtime";
 var typeStyles2 = {
   success: "border-l-[length:var(--toast-border-width)] border-l-[var(--semantic-color-feedback-success)]",
   error: "border-l-[length:var(--toast-border-width)] border-l-[var(--semantic-color-feedback-error)]",
@@ -1404,7 +1429,7 @@ var iconColors = {
   info: "text-[var(--semantic-color-feedback-info)]"
 };
 var icons2 = {
-  success: /* @__PURE__ */ jsx23(
+  success: /* @__PURE__ */ jsx24(
     "svg",
     {
       width: "18",
@@ -1413,10 +1438,10 @@ var icons2 = {
       viewBox: "0 0 24 24",
       stroke: "currentColor",
       strokeWidth: 2,
-      children: /* @__PURE__ */ jsx23("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" })
+      children: /* @__PURE__ */ jsx24("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" })
     }
   ),
-  error: /* @__PURE__ */ jsx23(
+  error: /* @__PURE__ */ jsx24(
     "svg",
     {
       width: "18",
@@ -1425,10 +1450,10 @@ var icons2 = {
       viewBox: "0 0 24 24",
       stroke: "currentColor",
       strokeWidth: 2,
-      children: /* @__PURE__ */ jsx23("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" })
+      children: /* @__PURE__ */ jsx24("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" })
     }
   ),
-  warning: /* @__PURE__ */ jsx23(
+  warning: /* @__PURE__ */ jsx24(
     "svg",
     {
       width: "18",
@@ -1437,7 +1462,7 @@ var icons2 = {
       viewBox: "0 0 24 24",
       stroke: "currentColor",
       strokeWidth: 2,
-      children: /* @__PURE__ */ jsx23(
+      children: /* @__PURE__ */ jsx24(
         "path",
         {
           strokeLinecap: "round",
@@ -1447,7 +1472,7 @@ var icons2 = {
       )
     }
   ),
-  info: /* @__PURE__ */ jsx23(
+  info: /* @__PURE__ */ jsx24(
     "svg",
     {
       width: "18",
@@ -1456,7 +1481,7 @@ var icons2 = {
       viewBox: "0 0 24 24",
       stroke: "currentColor",
       strokeWidth: 2,
-      children: /* @__PURE__ */ jsx23(
+      children: /* @__PURE__ */ jsx24(
         "path",
         {
           strokeLinecap: "round",
@@ -1482,7 +1507,7 @@ function Toast({ type = "info", message, duration = 4e3, onClose }) {
       if (exitTimer) clearTimeout(exitTimer);
     };
   }, [duration, dismiss]);
-  const content = /* @__PURE__ */ jsx23("div", { className: "fixed top-[var(--toast-position-top)] right-[var(--toast-position-right)] z-[var(--toast-z-index)] pointer-events-none", children: /* @__PURE__ */ jsxs19(
+  const content = /* @__PURE__ */ jsx24("div", { className: "fixed top-[var(--toast-position-top)] right-[var(--toast-position-right)] z-[var(--toast-z-index)] pointer-events-none", children: /* @__PURE__ */ jsxs19(
     "div",
     {
       className: cn(
@@ -1491,16 +1516,16 @@ function Toast({ type = "info", message, duration = 4e3, onClose }) {
         isVisible && !isExiting ? "animate-[toastSlideIn_200ms_ease-out_both]" : "animate-[toastSlideOut_200ms_ease-in_both]"
       ),
       children: [
-        /* @__PURE__ */ jsx23("span", { className: cn("flex shrink-0", iconColors[type]), children: icons2[type] }),
-        /* @__PURE__ */ jsx23("span", { className: "flex-1 leading-[1.4]", children: message }),
-        /* @__PURE__ */ jsx23(
+        /* @__PURE__ */ jsx24("span", { className: cn("flex shrink-0", iconColors[type]), children: icons2[type] }),
+        /* @__PURE__ */ jsx24("span", { className: "flex-1 leading-[1.4]", children: message }),
+        /* @__PURE__ */ jsx24(
           "button",
           {
             type: "button",
             onClick: dismiss,
             className: "flex shrink-0 p-0.5 border-none rounded-sm bg-transparent text-[var(--semantic-color-text-muted)] cursor-pointer transition-colors duration-[var(--duration-fast)] hover:text-[var(--semantic-color-text-default)]",
             "aria-label": "Schlie\xDFen",
-            children: /* @__PURE__ */ jsx23(
+            children: /* @__PURE__ */ jsx24(
               "svg",
               {
                 width: "14",
@@ -1509,7 +1534,7 @@ function Toast({ type = "info", message, duration = 4e3, onClose }) {
                 viewBox: "0 0 24 24",
                 stroke: "currentColor",
                 strokeWidth: 2,
-                children: /* @__PURE__ */ jsx23("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" })
+                children: /* @__PURE__ */ jsx24("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" })
               }
             )
           }
@@ -1524,7 +1549,7 @@ function Toast({ type = "info", message, duration = 4e3, onClose }) {
 }
 
 // src/components/Toggle/Toggle.tsx
-import { jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs20 } from "react/jsx-runtime";
 var trackSizes = {
   sm: "w-[var(--toggle-sm-track-width)] h-[var(--toggle-sm-track-height)]",
   md: "w-[var(--toggle-md-track-width)] h-[var(--toggle-md-track-height)]"
@@ -1545,7 +1570,7 @@ function Toggle({ label, size = "md", id, name, className, ...props }) {
       htmlFor: inputId,
       className: cn("inline-flex items-center gap-2.5 cursor-pointer", className),
       children: [
-        /* @__PURE__ */ jsx24(
+        /* @__PURE__ */ jsx25(
           "input",
           {
             type: "checkbox",
@@ -1555,7 +1580,7 @@ function Toggle({ label, size = "md", id, name, className, ...props }) {
             ...props
           }
         ),
-        /* @__PURE__ */ jsx24(
+        /* @__PURE__ */ jsx25(
           "div",
           {
             className: cn(
@@ -1563,7 +1588,7 @@ function Toggle({ label, size = "md", id, name, className, ...props }) {
               trackSizes[size],
               thumbTranslate[size]
             ),
-            children: /* @__PURE__ */ jsx24(
+            children: /* @__PURE__ */ jsx25(
               "div",
               {
                 className: cn(
@@ -1574,7 +1599,7 @@ function Toggle({ label, size = "md", id, name, className, ...props }) {
             )
           }
         ),
-        label && /* @__PURE__ */ jsx24("span", { className: "font-sans text-sm text-[var(--semantic-color-text-default)] select-none", children: label })
+        label && /* @__PURE__ */ jsx25("span", { className: "font-sans text-sm text-[var(--semantic-color-text-default)] select-none", children: label })
       ]
     }
   );
@@ -1593,6 +1618,7 @@ export {
   DropdownMenu,
   FilterChips,
   Input,
+  ListItem,
   Logo,
   Modal,
   Pill,