fromsrc 0.0.2 → 0.0.22

package/dist/components/autofill.js

@@ -5,7 +5,7 @@ import { useClickOutside } from '../hooks/clickoutside';
 
 function Autofill({
   items,
-  placeholder = "search...",
+  placeholder = "Search...",
   value: controlledValue,
   onChange,
   onSelect
@@ -18,9 +18,14 @@ function Autofill({
   const containerRef = useRef(null);
   const id = useId();
   const value = controlledValue ?? internalValue;
-  const filtered = items.filter((item) => item.label.toLowerCase().includes(value.toLowerCase()));
+  const filtered = items.filter(
+    (item) => item.label.toLowerCase().includes(value.toLowerCase())
+  );
   const listId = `${id}-list`;
-  const getOptionId = useCallback((itemId) => `${id}-option-${itemId}`, [id]);
+  const getOptionId = useCallback(
+    (itemId) => `${id}-option-${itemId}`,
+    [id]
+  );
   const close = useCallback(() => {
     setOpen(false);
     setIndex(0);
@@ -61,29 +66,34 @@ function Autofill({
         }
       }
       switch (e.key) {
-        case "ArrowDown":
+        case "ArrowDown": {
           setIndex((i) => Math.min(i + 1, filtered.length - 1));
           e.preventDefault();
           break;
-        case "ArrowUp":
+        }
+        case "ArrowUp": {
           setIndex((i) => Math.max(i - 1, 0));
           e.preventDefault();
           break;
-        case "Enter":
+        }
+        case "Enter": {
           if (open && filtered[index]) {
             handleSelect(filtered[index]);
             e.preventDefault();
           }
           break;
-        case "Escape":
+        }
+        case "Escape": {
           if (open) {
             setOpen(false);
             e.preventDefault();
           }
           break;
-        case "Tab":
+        }
+        case "Tab": {
           setOpen(false);
           break;
+        }
       }
     },
     [open, filtered, index, handleSelect]

package/dist/components/avatar.js

@@ -4,14 +4,14 @@ import Image from 'next/image';
 import { memo } from 'react';
 
 const sizes = {
-  sm: "w-8 h-8 text-xs",
+  lg: "w-12 h-12 text-base",
   md: "w-10 h-10 text-sm",
-  lg: "w-12 h-12 text-base"
+  sm: "w-8 h-8 text-xs"
 };
 const pixelSizes = {
-  sm: 32,
+  lg: 48,
   md: 40,
-  lg: 48
+  sm: 32
 };
 function getInitials(name) {
   return name.split(" ").map((part) => part[0]).join("").toUpperCase().slice(0, 2);

package/dist/components/avatarstack.js

@@ -2,9 +2,9 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { memo } from 'react';
 
 const sizes = {
-  sm: "size-6",
+  lg: "size-10",
   md: "size-8",
-  lg: "size-10"
+  sm: "size-6"
 };
 function AvatarStackBase({
   children,

package/dist/components/backtotop.d.ts

@@ -14,7 +14,7 @@ interface BackToTopProps {
      */
     className?: string;
 }
-declare function BackToTopBase({ threshold, className }: BackToTopProps): JSX.Element | null;
+declare function BackToTopBase({ threshold, className, }: BackToTopProps): JSX.Element | null;
 declare const BackToTop: react.MemoExoticComponent<typeof BackToTopBase>;
 
 export { BackToTop, type BackToTopProps };

package/dist/components/backtotop.js

@@ -2,7 +2,10 @@
 import { jsx } from 'react/jsx-runtime';
 import { memo, useState, useEffect, useCallback } from 'react';
 
-function BackToTopBase({ threshold = 400, className }) {
+function BackToTopBase({
+  threshold = 400,
+  className
+}) {
   const [visible, setVisible] = useState(false);
   useEffect(() => {
     function check() {
@@ -13,16 +16,18 @@ function BackToTopBase({ threshold = 400, className }) {
     return () => window.removeEventListener("scroll", check);
   }, [threshold]);
   const scrollToTop = useCallback(() => {
-    window.scrollTo({ top: 0, behavior: "smooth" });
+    window.scrollTo({ behavior: "smooth", top: 0 });
   }, []);
-  if (!visible) return null;
+  if (!visible) {
+    return null;
+  }
   return /* @__PURE__ */ jsx(
     "button",
     {
       type: "button",
       onClick: scrollToTop,
       className: `fixed bottom-6 right-6 p-3 bg-surface border border-line rounded-full shadow-lg hover:bg-bg transition-all z-50 ${className || ""}`,
-      "aria-label": "back to top",
+      "aria-label": "Back to top",
       children: /* @__PURE__ */ jsx(
         "svg",
         {
@@ -31,7 +36,15 @@ function BackToTopBase({ threshold = 400, className }) {
           fill: "none",
           stroke: "currentColor",
           viewBox: "0 0 24 24",
-          children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 15l7-7 7 7" })
+          children: /* @__PURE__ */ jsx(
+            "path",
+            {
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              strokeWidth: 2,
+              d: "M5 15l7-7 7 7"
+            }
+          )
         }
       )
     }

package/dist/components/badge.js

@@ -4,12 +4,17 @@ import { memo } from 'react';
 
 const styles = {
   default: "bg-surface text-muted border-line",
-  success: "bg-green-500/10 text-green-400 border-green-500/30",
-  warning: "bg-yellow-500/10 text-yellow-400 border-yellow-500/30",
   error: "bg-red-500/10 text-red-400 border-red-500/30",
-  info: "bg-blue-500/10 text-blue-400 border-blue-500/30"
+  info: "bg-blue-500/10 text-blue-400 border-blue-500/30",
+  success: "bg-green-500/10 text-green-400 border-green-500/30",
+  warning: "bg-yellow-500/10 text-yellow-400 border-yellow-500/30"
 };
-function BadgeBase({ children, variant = "default", className = "", ...props }) {
+function BadgeBase({
+  children,
+  variant = "default",
+  className = "",
+  ...props
+}) {
   return /* @__PURE__ */ jsx(
     "span",
     {

package/dist/components/banner.js

@@ -9,8 +9,12 @@ function BannerInner({
   "aria-label": ariaLabel
 }) {
   const [visible, setVisible] = useState(() => {
-    if (!id) return true;
-    if (typeof window === "undefined") return null;
+    if (!id) {
+      return true;
+    }
+    if (typeof window === "undefined") {
+      return null;
+    }
     return localStorage.getItem(`banner-${id}`) !== "true";
   });
   useEffect(() => {
@@ -26,7 +30,9 @@ function BannerInner({
     }
     setVisible(false);
   }, [id]);
-  if (visible !== true) return null;
+  if (visible !== true) {
+    return null;
+  }
   const base = "sticky top-0 z-40 flex items-center justify-center gap-2 px-4 py-2 text-sm";
   const styles = {
     default: "bg-fg/5 text-fg",
@@ -47,11 +53,22 @@ function BannerInner({
             type: "button",
             onClick: dismiss,
             onKeyDown: (e) => {
-              if (e.key === "Escape") dismiss();
+              if (e.key === "Escape") {
+                dismiss();
+              }
             },
             className: "absolute right-4 rounded p-1 opacity-60 hover:opacity-100 focus:opacity-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-current",
             "aria-label": "Dismiss banner",
-            children: /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", viewBox: "0 0 16 16", fill: "currentColor", className: "size-4", children: /* @__PURE__ */ jsx("path", { d: "M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z" }) })
+            children: /* @__PURE__ */ jsx(
+              "svg",
+              {
+                "aria-hidden": "true",
+                viewBox: "0 0 16 16",
+                fill: "currentColor",
+                className: "size-4",
+                children: /* @__PURE__ */ jsx("path", { d: "M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z" })
+              }
+            )
           }
         )
       ]

package/dist/components/breadcrumb.js

@@ -10,14 +10,14 @@ function BreadcrumbBase({
   indexLabel
 }) {
   const pathname = usePathname();
-  const normalizedBase = base.replace(/^\/+|\/+$/g, "");
-  const fallbackRoot = normalizedBase.length > 0 ? normalizedBase.replace(/-/g, " ") : "home";
+  const normalizedBase = base.replaceAll(/^\/+|\/+$/g, "");
+  const fallbackRoot = normalizedBase.length > 0 ? normalizedBase.replaceAll("-", " ") : "home";
   const root = rootLabel ?? fallbackRoot;
   const index = indexLabel ?? "index";
   const segments = pathname.replace(base, "").split("/").filter(Boolean);
   const items = segments.map((segment, i) => ({
     href: `${base}/${segments.slice(0, i + 1).join("/")}`,
-    label: segment.replace(/-/g, " ")
+    label: segment.replaceAll("-", " ")
   }));
   return /* @__PURE__ */ jsx("nav", { "aria-label": "Breadcrumb", className: "text-xs text-muted", children: /* @__PURE__ */ jsxs("ol", { className: "flex items-center gap-2", children: [
     /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Link, { href: base, className: "hover:text-fg transition-colors", children: root }) }),
@@ -26,7 +26,14 @@ function BreadcrumbBase({
       /* @__PURE__ */ jsx("span", { "aria-current": "page", className: "text-fg", children: index })
     ] }) : items.map((item, i) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-2", children: [
       /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-dim", children: "/" }),
-      i === items.length - 1 ? /* @__PURE__ */ jsx("span", { "aria-current": "page", className: "text-fg", children: item.label }) : /* @__PURE__ */ jsx(Link, { href: item.href, className: "hover:text-fg transition-colors", children: item.label })
+      i === items.length - 1 ? /* @__PURE__ */ jsx("span", { "aria-current": "page", className: "text-fg", children: item.label }) : /* @__PURE__ */ jsx(
+        Link,
+        {
+          href: item.href,
+          className: "hover:text-fg transition-colors",
+          children: item.label
+        }
+      )
     ] }, item.href))
   ] }) });
 }

package/dist/components/breadcrumbnav.js

@@ -4,7 +4,7 @@ import Link from 'next/link';
 import { memo } from 'react';
 
 function format(slug) {
-  return slug.replace(/-/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+  return slug.replaceAll("-", " ").replaceAll(/\b\w/g, (c) => c.toUpperCase());
 }
 function build(path, labels) {
   const segments = path.split("/").filter(Boolean);
@@ -18,15 +18,15 @@ function jsonld(crumbs, homeLabel, homeHref) {
     "@context": "https://schema.org",
     "@type": "BreadcrumbList",
     itemListElement: [
-      { "@type": "ListItem", position: 1, name: homeLabel, item: homeHref },
+      { "@type": "ListItem", item: homeHref, name: homeLabel, position: 1 },
       ...crumbs.map((c, i) => ({
         "@type": "ListItem",
-        position: i + 2,
+        item: `${homeHref.replace(/\/$/, "")}${c.href}`,
         name: c.label,
-        item: `${homeHref.replace(/\/$/, "")}${c.href}`
+        position: i + 2
       }))
     ]
-  }).replace(/</g, "\\u003c").replace(/\u2028/g, "\\u2028").replace(/\u2029/g, "\\u2029");
+  }).replaceAll("<", "\\u003c").replaceAll("\u2028", "\\u2028").replaceAll("\u2029", "\\u2029");
 }
 function BreadcrumbNavBase({
   path,
@@ -38,22 +38,38 @@ function BreadcrumbNavBase({
 }) {
   const crumbs = build(path, labels);
   const sep = separator ?? "/";
-  return /* @__PURE__ */ jsxs("nav", { "aria-label": "breadcrumb", className: className ?? "flex items-center gap-1 text-sm text-muted", children: [
-    /* @__PURE__ */ jsx(
-      "script",
-      {
-        type: "application/ld+json",
-        dangerouslySetInnerHTML: { __html: jsonld(crumbs, homeLabel, homeHref) }
-      }
-    ),
-    /* @__PURE__ */ jsxs("ol", { className: "flex items-center gap-1", children: [
-      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Link, { href: homeHref, className: "hover:text-fg transition-colors", children: homeLabel }) }),
-      crumbs.map((crumb, i) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-dim", children: sep }),
-        i === crumbs.length - 1 ? /* @__PURE__ */ jsx("span", { "aria-current": "page", className: "text-fg font-medium", children: crumb.label }) : /* @__PURE__ */ jsx(Link, { href: crumb.href, className: "hover:text-fg transition-colors", children: crumb.label })
-      ] }, crumb.href))
-    ] })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "nav",
+    {
+      "aria-label": "breadcrumb",
+      className: className ?? "flex items-center gap-1 text-sm text-muted",
+      children: [
+        /* @__PURE__ */ jsx(
+          "script",
+          {
+            type: "application/ld+json",
+            dangerouslySetInnerHTML: {
+              __html: jsonld(crumbs, homeLabel, homeHref)
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs("ol", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Link, { href: homeHref, className: "hover:text-fg transition-colors", children: homeLabel }) }),
+          crumbs.map((crumb, i) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-dim", children: sep }),
+            i === crumbs.length - 1 ? /* @__PURE__ */ jsx("span", { "aria-current": "page", className: "text-fg font-medium", children: crumb.label }) : /* @__PURE__ */ jsx(
+              Link,
+              {
+                href: crumb.href,
+                className: "hover:text-fg transition-colors",
+                children: crumb.label
+              }
+            )
+          ] }, crumb.href))
+        ] })
+      ]
+    }
+  );
 }
 const BreadcrumbNav = memo(BreadcrumbNavBase);
 

package/dist/components/button.js

@@ -4,23 +4,31 @@ import { forwardRef, memo } from 'react';
 import { Spinner } from './spinner';
 
 const variants = {
+  danger: "bg-red-500/10 text-red-400 border-red-500/30 hover:bg-red-500/20",
   default: "bg-surface text-fg border-line hover:bg-line hover:border-line",
-  primary: "bg-accent text-white border-accent hover:bg-accent/90 hover:border-accent/90",
   ghost: "bg-transparent text-fg border-transparent hover:bg-surface",
-  danger: "bg-red-500/10 text-red-400 border-red-500/30 hover:bg-red-500/20"
+  primary: "bg-accent text-white border-accent hover:bg-accent/90 hover:border-accent/90"
 };
 const sizes = {
-  sm: "h-8 px-3 text-xs gap-1.5",
+  lg: "h-12 px-6 text-base gap-2.5",
   md: "h-10 px-4 text-sm gap-2",
-  lg: "h-12 px-6 text-base gap-2.5"
+  sm: "h-8 px-3 text-xs gap-1.5"
 };
 const spinnerSizes = {
-  sm: "sm",
+  lg: "md",
   md: "sm",
-  lg: "md"
+  sm: "sm"
 };
 const ButtonInner = forwardRef(
-  ({ variant = "default", size = "md", loading, disabled, children, className = "", ...props }, ref) => {
+  ({
+    variant = "default",
+    size = "md",
+    loading,
+    disabled,
+    children,
+    className = "",
+    ...props
+  }, ref) => {
     const isDisabled = disabled || loading;
     return /* @__PURE__ */ jsxs(
       "button",
@@ -34,7 +42,14 @@ const ButtonInner = forwardRef(
         className: `inline-flex items-center justify-center rounded-md border font-medium outline-none transition-colors focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-bg disabled:cursor-not-allowed disabled:opacity-50 ${variants[variant]} ${sizes[size]} ${className}`.trim(),
         ...props,
         children: [
-          loading && /* @__PURE__ */ jsx(Spinner, { size: spinnerSizes[size], className: "shrink-0", "aria-hidden": "true" }),
+          loading && /* @__PURE__ */ jsx(
+            Spinner,
+            {
+              size: spinnerSizes[size],
+              className: "shrink-0",
+              "aria-hidden": "true"
+            }
+          ),
           children
         ]
       }

package/dist/components/callout.d.ts

@@ -16,7 +16,7 @@ interface CalloutProps {
     title?: string;
     children: ReactNode;
 }
-declare function CalloutComponent({ type, title, children }: CalloutProps): JSX.Element;
+declare function CalloutComponent({ type, title, children, }: CalloutProps): JSX.Element;
 /**
  * callout component for highlighting content
  * @example <Callout type="tip">use shortcuts</Callout>

package/dist/components/callout.js

@@ -3,71 +3,75 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { memo } from 'react';
 
 const config = {
-  info: {
+  error: {
+    bg: "bg-red-500/10",
+    border: "border-l-red-500",
     icon: /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ 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 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z",
+        d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z",
         clipRule: "evenodd"
       }
     ) }),
-    border: "border-l-blue-500",
-    bg: "bg-blue-500/10",
-    text: "text-blue-400",
-    label: "Information"
+    label: "Error",
+    text: "text-red-400"
   },
-  warning: {
+  info: {
+    bg: "bg-blue-500/10",
+    border: "border-l-blue-500",
     icon: /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx(
       "path",
       {
         fillRule: "evenodd",
-        d: "M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z",
+        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 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z",
         clipRule: "evenodd"
       }
     ) }),
-    border: "border-l-yellow-500",
-    bg: "bg-yellow-500/10",
-    text: "text-yellow-400",
-    label: "Warning"
+    label: "Information",
+    text: "text-blue-400"
   },
-  error: {
+  note: {
+    bg: "bg-blue-500/10",
+    border: "border-l-blue-500",
     icon: /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx(
       "path",
       {
         fillRule: "evenodd",
-        d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z",
+        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 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z",
         clipRule: "evenodd"
       }
     ) }),
-    border: "border-l-red-500",
-    bg: "bg-red-500/10",
-    text: "text-red-400",
-    label: "Error"
+    label: "Note",
+    text: "text-blue-400"
   },
   tip: {
-    icon: /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M10 1a6 6 0 00-3.815 10.631C7.237 12.5 8 13.443 8 14.456v.644a.75.75 0 00.572.729 6.016 6.016 0 002.856 0A.75.75 0 0012 15.1v-.644c0-1.013.762-1.957 1.815-2.825A6 6 0 0010 1zM8.863 17.414a.75.75 0 00-.226 1.483 9.066 9.066 0 002.726 0 .75.75 0 00-.226-1.483 7.553 7.553 0 01-2.274 0z" }) }),
-    border: "border-l-green-500",
     bg: "bg-green-500/10",
-    text: "text-green-400",
-    label: "Tip"
+    border: "border-l-green-500",
+    icon: /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M10 1a6 6 0 00-3.815 10.631C7.237 12.5 8 13.443 8 14.456v.644a.75.75 0 00.572.729 6.016 6.016 0 002.856 0A.75.75 0 0012 15.1v-.644c0-1.013.762-1.957 1.815-2.825A6 6 0 0010 1zM8.863 17.414a.75.75 0 00-.226 1.483 9.066 9.066 0 002.726 0 .75.75 0 00-.226-1.483 7.553 7.553 0 01-2.274 0z" }) }),
+    label: "Tip",
+    text: "text-green-400"
   },
-  note: {
+  warning: {
+    bg: "bg-yellow-500/10",
+    border: "border-l-yellow-500",
     icon: /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ 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 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z",
+        d: "M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z",
         clipRule: "evenodd"
       }
     ) }),
-    border: "border-l-blue-500",
-    bg: "bg-blue-500/10",
-    text: "text-blue-400",
-    label: "Note"
+    label: "Warning",
+    text: "text-yellow-400"
   }
 };
-function CalloutComponent({ type = "info", title, children }) {
+function CalloutComponent({
+  type = "info",
+  title,
+  children
+}) {
   const cfg = config[type] || config.info;
   const { icon, border, bg, text, label } = cfg;
   return /* @__PURE__ */ jsxs(
@@ -78,8 +82,8 @@ function CalloutComponent({ type = "info", title, children }) {
       className: `my-4 rounded border-l-4 ${border} ${bg} px-3 py-2`,
       children: [
         title && /* @__PURE__ */ jsx("p", { className: `mb-2 font-semibold ${text}`, children: title }),
-        /* @__PURE__ */ jsxs("div", { className: `flex items-center gap-2 ${text}`, children: [
-          /* @__PURE__ */ jsx("span", { className: "size-4 shrink-0", "aria-hidden": "true", children: icon }),
+        /* @__PURE__ */ jsxs("div", { className: `flex items-start gap-2 ${text}`, children: [
+          /* @__PURE__ */ jsx("span", { className: "size-4 shrink-0 mt-0.5", "aria-hidden": "true", children: icon }),
           /* @__PURE__ */ jsx("div", { className: "text-sm text-fg/80 [&>p]:m-0", children })
         ] })
       ]

package/dist/components/changelog.js

@@ -23,14 +23,25 @@ const Release = memo(function Release2({
   ] });
 });
 const typeStyles = {
-  added: { bg: "bg-emerald-500/10", text: "text-emerald-400", label: "added" },
-  changed: { bg: "bg-blue-500/10", text: "text-blue-400", label: "changed" },
-  fixed: { bg: "bg-amber-500/10", text: "text-amber-400", label: "fixed" },
-  removed: { bg: "bg-red-500/10", text: "text-red-400", label: "removed" },
-  deprecated: { bg: "bg-orange-500/10", text: "text-orange-400", label: "deprecated" },
-  security: { bg: "bg-purple-500/10", text: "text-purple-400", label: "security" }
+  added: { bg: "bg-emerald-500/10", label: "added", text: "text-emerald-400" },
+  changed: { bg: "bg-blue-500/10", label: "changed", text: "text-blue-400" },
+  deprecated: {
+    bg: "bg-orange-500/10",
+    label: "deprecated",
+    text: "text-orange-400"
+  },
+  fixed: { bg: "bg-amber-500/10", label: "fixed", text: "text-amber-400" },
+  removed: { bg: "bg-red-500/10", label: "removed", text: "text-red-400" },
+  security: {
+    bg: "bg-purple-500/10",
+    label: "security",
+    text: "text-purple-400"
+  }
 };
-const Change = memo(function Change2({ type, children }) {
+const Change = memo(function Change2({
+  type,
+  children
+}) {
   const style = typeStyles[type];
   return /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2 text-sm", children: [
     /* @__PURE__ */ jsx(
@@ -43,7 +54,9 @@ const Change = memo(function Change2({ type, children }) {
     /* @__PURE__ */ jsx("span", { className: "text-muted", children })
   ] });
 });
-const Changelog = memo(function Changelog2({ children }) {
+const Changelog = memo(function Changelog2({
+  children
+}) {
   return /* @__PURE__ */ jsx("section", { className: "my-8", children });
 });