@refraction-ui/react 0.19.1 → 0.20.0

package/dist/react-sheet.js

@@ -0,0 +1,310 @@
+import {
+  cn,
+  createKeyboardHandler,
+  cva,
+  devWarn,
+  generateId
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-sheet/dist/index.js
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+var sheetOverlayStyles = "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0";
+var sheetContentVariants = cva({
+  base: "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  variants: {
+    side: {
+      top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+      right: "inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right",
+      bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+      left: "inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left"
+    }
+  },
+  defaultVariants: {
+    side: "right"
+  }
+});
+var SheetContext = React.createContext(null);
+function useSheetContext() {
+  const ctx = React.useContext(SheetContext);
+  if (!ctx) {
+    devWarn(
+      "react-sheet/sheet-compound-outside-provider",
+      "A Sheet compound component was rendered outside of <Sheet>. Wrap it in <Sheet>."
+    );
+    throw new Error("Sheet compound components must be used within <Sheet>");
+  }
+  return ctx;
+}
+function Sheet({
+  open: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+  modal = true,
+  side = "right",
+  children
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);
+  const isControlled = controlledOpen !== void 0;
+  const open = isControlled ? controlledOpen : uncontrolledOpen;
+  const handleOpenChange = React.useCallback(
+    (next) => {
+      if (!isControlled) {
+        setUncontrolledOpen(next);
+      }
+      onOpenChange?.(next);
+    },
+    [isControlled, onOpenChange]
+  );
+  const idsRef = React.useRef(
+    null
+  );
+  if (idsRef.current === null) {
+    idsRef.current = {
+      content: generateId("rfr-sheet"),
+      title: generateId("rfr-sheet-title"),
+      description: generateId("rfr-sheet-desc")
+    };
+  }
+  const triggerRef = React.useRef(null);
+  const ctx = React.useMemo(
+    () => ({
+      open,
+      onOpenChange: handleOpenChange,
+      modal,
+      side,
+      contentId: idsRef.current.content,
+      titleId: idsRef.current.title,
+      descriptionId: idsRef.current.description,
+      triggerRef
+    }),
+    [open, handleOpenChange, modal, side]
+  );
+  return React.createElement(SheetContext.Provider, { value: ctx }, children);
+}
+var SheetTrigger = React.forwardRef(
+  function SheetTrigger2({ onClick, children, ...props }, ref) {
+    const { open, onOpenChange, contentId, triggerRef } = useSheetContext();
+    const setRefs = React.useCallback(
+      (node) => {
+        triggerRef.current = node;
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+      },
+      [ref, triggerRef]
+    );
+    const handleClick = (e) => {
+      onOpenChange(!open);
+      onClick?.(e);
+    };
+    return React.createElement(
+      "button",
+      {
+        ref: setRefs,
+        type: "button",
+        "aria-expanded": open,
+        "aria-controls": contentId,
+        "aria-haspopup": "dialog",
+        onClick: handleClick,
+        ...props
+      },
+      children
+    );
+  }
+);
+var SheetOverlay = React.forwardRef(
+  function SheetOverlay2({ className, onClick, ...props }, ref) {
+    const { open, onOpenChange } = useSheetContext();
+    if (!open) return null;
+    const handleClick = (e) => {
+      if (e.target === e.currentTarget) {
+        onOpenChange(false);
+      }
+      onClick?.(e);
+    };
+    return React.createElement("div", {
+      ref,
+      className: cn(sheetOverlayStyles, className),
+      "data-state": open ? "open" : "closed",
+      onClick: handleClick,
+      ...props
+    });
+  }
+);
+var SheetContent = React.forwardRef(
+  function SheetContent2({
+    className,
+    children,
+    onKeyDown,
+    side: sideProp,
+    withOverlay = true,
+    ...props
+  }, ref) {
+    const {
+      open,
+      onOpenChange,
+      modal,
+      side: ctxSide,
+      contentId,
+      titleId,
+      descriptionId,
+      triggerRef
+    } = useSheetContext();
+    const side = sideProp ?? ctxSide;
+    const contentRef = React.useRef(null);
+    const setRefs = React.useCallback(
+      (node) => {
+        contentRef.current = node;
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+      },
+      [ref]
+    );
+    const wasOpenRef = React.useRef(false);
+    React.useEffect(() => {
+      if (open) {
+        wasOpenRef.current = true;
+        if (contentRef.current && typeof document !== "undefined") {
+          const active = document.activeElement;
+          if (!active || !contentRef.current.contains(active)) {
+            contentRef.current.focus({ preventScroll: true });
+          }
+        }
+      } else if (wasOpenRef.current) {
+        wasOpenRef.current = false;
+        const trigger = triggerRef.current;
+        if (trigger && typeof trigger.focus === "function") {
+          trigger.focus({ preventScroll: true });
+        }
+      }
+    }, [open, triggerRef]);
+    const handleKeyDown = (e) => {
+      const handler = createKeyboardHandler({
+        Escape: (ev) => {
+          ev.preventDefault();
+          onOpenChange(false);
+        }
+      });
+      handler(e.nativeEvent);
+      onKeyDown?.(e);
+    };
+    if (!open) return null;
+    const contentEl = React.createElement(
+      "div",
+      {
+        ref: setRefs,
+        role: "dialog",
+        "aria-modal": modal,
+        "aria-labelledby": titleId,
+        "aria-describedby": descriptionId,
+        id: contentId,
+        "data-state": open ? "open" : "closed",
+        "data-side": side,
+        className: cn(sheetContentVariants({ side }), className),
+        onKeyDown: handleKeyDown,
+        tabIndex: -1,
+        ...props
+      },
+      children
+    );
+    const tree = withOverlay ? React.createElement(
+      React.Fragment,
+      null,
+      React.createElement("div", {
+        key: "overlay",
+        className: sheetOverlayStyles,
+        "data-state": open ? "open" : "closed",
+        onClick: (e) => {
+          if (e.target === e.currentTarget) {
+            onOpenChange(false);
+          }
+        }
+      }),
+      contentEl
+    ) : contentEl;
+    if (typeof document !== "undefined") {
+      return ReactDOM.createPortal(tree, document.body);
+    }
+    return tree;
+  }
+);
+var SheetHeader = React.forwardRef(
+  function SheetHeader2({ className, ...props }, ref) {
+    return React.createElement("div", {
+      ref,
+      className: cn("flex flex-col space-y-2 text-center sm:text-left", className),
+      ...props
+    });
+  }
+);
+var SheetFooter = React.forwardRef(
+  function SheetFooter2({ className, ...props }, ref) {
+    return React.createElement("div", {
+      ref,
+      className: cn(
+        "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+        className
+      ),
+      ...props
+    });
+  }
+);
+var SheetTitle = React.forwardRef(
+  function SheetTitle2({ className, ...props }, ref) {
+    const { titleId } = useSheetContext();
+    return React.createElement("h2", {
+      ref,
+      id: titleId,
+      className: cn("text-lg font-semibold text-foreground", className),
+      ...props
+    });
+  }
+);
+var SheetDescription = React.forwardRef(function SheetDescription2({ className, ...props }, ref) {
+  const { descriptionId } = useSheetContext();
+  return React.createElement("p", {
+    ref,
+    id: descriptionId,
+    className: cn("text-sm text-muted-foreground", className),
+    ...props
+  });
+});
+var SheetClose = React.forwardRef(
+  function SheetClose2({ onClick, children, ...props }, ref) {
+    const { onOpenChange } = useSheetContext();
+    const handleClick = (e) => {
+      onOpenChange(false);
+      onClick?.(e);
+    };
+    return React.createElement(
+      "button",
+      {
+        ref,
+        type: "button",
+        onClick: handleClick,
+        ...props
+      },
+      children
+    );
+  }
+);
+export {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetOverlay,
+  SheetTitle,
+  SheetTrigger,
+  sheetContentVariants,
+  sheetOverlayStyles
+};
+//# sourceMappingURL=react-sheet.js.map

package/dist/react-sheet.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../react-sheet/src/sheet.tsx"],
+  "sourcesContent": ["import * as React from 'react'\nimport * as ReactDOM from 'react-dom'\nimport { cn, cva, createKeyboardHandler, generateId, devWarn } from '@refraction-ui/shared'\n\n// ---------------------------------------------------------------------------\n// Side\n// ---------------------------------------------------------------------------\n\nexport type SheetSide = 'top' | 'right' | 'bottom' | 'left'\n\n// ---------------------------------------------------------------------------\n// Styles\n// ---------------------------------------------------------------------------\n\nexport const sheetOverlayStyles =\n  'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0'\n\nexport const sheetContentVariants = cva({\n  base: 'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',\n  variants: {\n    side: {\n      top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',\n      right:\n        'inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right',\n      bottom:\n        'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',\n      left: 'inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left',\n    },\n  },\n  defaultVariants: {\n    side: 'right',\n  },\n})\n\n// ---------------------------------------------------------------------------\n// Context\n// ---------------------------------------------------------------------------\n\ninterface SheetContextValue {\n  open: boolean\n  onOpenChange: (open: boolean) => void\n  modal: boolean\n  side: SheetSide\n  contentId: string\n  titleId: string\n  descriptionId: string\n  triggerRef: React.MutableRefObject<HTMLElement | null>\n}\n\nconst SheetContext = React.createContext<SheetContextValue | null>(null)\n\nfunction useSheetContext(): SheetContextValue {\n  const ctx = React.useContext(SheetContext)\n  if (!ctx) {\n    devWarn(\n      'react-sheet/sheet-compound-outside-provider',\n      'A Sheet compound component was rendered outside of <Sheet>. Wrap it in <Sheet>.',\n    )\n    throw new Error('Sheet compound components must be used within <Sheet>')\n  }\n  return ctx\n}\n\n// ---------------------------------------------------------------------------\n// Sheet (root provider)\n// ---------------------------------------------------------------------------\n\nexport interface SheetProps {\n  open?: boolean\n  defaultOpen?: boolean\n  onOpenChange?: (open: boolean) => void\n  modal?: boolean\n  side?: SheetSide\n  children?: React.ReactNode\n}\n\nexport function Sheet({\n  open: controlledOpen,\n  defaultOpen = false,\n  onOpenChange,\n  modal = true,\n  side = 'right',\n  children,\n}: SheetProps) {\n  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen)\n  const isControlled = controlledOpen !== undefined\n  const open = isControlled ? controlledOpen : uncontrolledOpen\n\n  const handleOpenChange = React.useCallback(\n    (next: boolean) => {\n      if (!isControlled) {\n        setUncontrolledOpen(next)\n      }\n      onOpenChange?.(next)\n    },\n    [isControlled, onOpenChange],\n  )\n\n  // Stable IDs for aria linking — generated once per Sheet instance.\n  const idsRef = React.useRef<{ content: string; title: string; description: string } | null>(\n    null,\n  )\n  if (idsRef.current === null) {\n    idsRef.current = {\n      content: generateId('rfr-sheet'),\n      title: generateId('rfr-sheet-title'),\n      description: generateId('rfr-sheet-desc'),\n    }\n  }\n\n  const triggerRef = React.useRef<HTMLElement | null>(null)\n\n  const ctx = React.useMemo<SheetContextValue>(\n    () => ({\n      open,\n      onOpenChange: handleOpenChange,\n      modal,\n      side,\n      contentId: idsRef.current!.content,\n      titleId: idsRef.current!.title,\n      descriptionId: idsRef.current!.description,\n      triggerRef,\n    }),\n    [open, handleOpenChange, modal, side],\n  )\n\n  return React.createElement(SheetContext.Provider, { value: ctx }, children)\n}\n\n// ---------------------------------------------------------------------------\n// SheetTrigger\n// ---------------------------------------------------------------------------\n\nexport interface SheetTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {}\n\nexport const SheetTrigger = React.forwardRef<HTMLButtonElement, SheetTriggerProps>(\n  function SheetTrigger({ onClick, children, ...props }, ref) {\n    const { open, onOpenChange, contentId, triggerRef } = useSheetContext()\n\n    const setRefs = React.useCallback(\n      (node: HTMLButtonElement | null) => {\n        triggerRef.current = node\n        if (typeof ref === 'function') {\n          ref(node)\n        } else if (ref) {\n          (ref as React.MutableRefObject<HTMLButtonElement | null>).current = node\n        }\n      },\n      [ref, triggerRef],\n    )\n\n    const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n      onOpenChange(!open)\n      onClick?.(e)\n    }\n\n    return React.createElement(\n      'button',\n      {\n        ref: setRefs,\n        type: 'button',\n        'aria-expanded': open,\n        'aria-controls': contentId,\n        'aria-haspopup': 'dialog',\n        onClick: handleClick,\n        ...props,\n      },\n      children,\n    )\n  },\n)\n\n// ---------------------------------------------------------------------------\n// SheetOverlay\n// ---------------------------------------------------------------------------\n\nexport interface SheetOverlayProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nexport const SheetOverlay = React.forwardRef<HTMLDivElement, SheetOverlayProps>(\n  function SheetOverlay({ className, onClick, ...props }, ref) {\n    const { open, onOpenChange } = useSheetContext()\n\n    if (!open) return null\n\n    const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {\n      if (e.target === e.currentTarget) {\n        onOpenChange(false)\n      }\n      onClick?.(e)\n    }\n\n    return React.createElement('div', {\n      ref,\n      className: cn(sheetOverlayStyles, className),\n      'data-state': open ? 'open' : 'closed',\n      onClick: handleClick,\n      ...props,\n    })\n  },\n)\n\n// ---------------------------------------------------------------------------\n// SheetContent\n// ---------------------------------------------------------------------------\n\nexport interface SheetContentProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Side of the screen the sheet slides in from.\n   * Overrides the `side` prop on the parent <Sheet> if provided.\n   */\n  side?: SheetSide\n  /**\n   * If true (default), an overlay is rendered behind the content and\n   * clicks outside the content close the sheet.\n   */\n  withOverlay?: boolean\n}\n\nexport const SheetContent = React.forwardRef<HTMLDivElement, SheetContentProps>(\n  function SheetContent(\n    {\n      className,\n      children,\n      onKeyDown,\n      side: sideProp,\n      withOverlay = true,\n      ...props\n    },\n    ref,\n  ) {\n    const {\n      open,\n      onOpenChange,\n      modal,\n      side: ctxSide,\n      contentId,\n      titleId,\n      descriptionId,\n      triggerRef,\n    } = useSheetContext()\n\n    const side = sideProp ?? ctxSide\n\n    const contentRef = React.useRef<HTMLDivElement | null>(null)\n    const setRefs = React.useCallback(\n      (node: HTMLDivElement | null) => {\n        contentRef.current = node\n        if (typeof ref === 'function') {\n          ref(node)\n        } else if (ref) {\n          (ref as React.MutableRefObject<HTMLDivElement | null>).current = node\n        }\n      },\n      [ref],\n    )\n\n    // Restore focus to trigger when sheet closes.\n    const wasOpenRef = React.useRef(false)\n    React.useEffect(() => {\n      if (open) {\n        wasOpenRef.current = true\n        // Move focus into the content for keyboard users / screen readers.\n        if (contentRef.current && typeof document !== 'undefined') {\n          const active = document.activeElement as HTMLElement | null\n          if (!active || !contentRef.current.contains(active)) {\n            contentRef.current.focus({ preventScroll: true })\n          }\n        }\n      } else if (wasOpenRef.current) {\n        wasOpenRef.current = false\n        const trigger = triggerRef.current\n        if (trigger && typeof trigger.focus === 'function') {\n          trigger.focus({ preventScroll: true })\n        }\n      }\n    }, [open, triggerRef])\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n      const handler = createKeyboardHandler({\n        Escape: (ev: KeyboardEvent) => {\n          ev.preventDefault()\n          onOpenChange(false)\n        },\n      })\n      handler(e.nativeEvent)\n      onKeyDown?.(e)\n    }\n\n    if (!open) return null\n\n    const contentEl = React.createElement(\n      'div',\n      {\n        ref: setRefs,\n        role: 'dialog',\n        'aria-modal': modal,\n        'aria-labelledby': titleId,\n        'aria-describedby': descriptionId,\n        id: contentId,\n        'data-state': open ? 'open' : 'closed',\n        'data-side': side,\n        className: cn(sheetContentVariants({ side }), className),\n        onKeyDown: handleKeyDown,\n        tabIndex: -1,\n        ...props,\n      },\n      children,\n    )\n\n    const tree = withOverlay\n      ? React.createElement(\n          React.Fragment,\n          null,\n          React.createElement('div', {\n            key: 'overlay',\n            className: sheetOverlayStyles,\n            'data-state': open ? 'open' : 'closed',\n            onClick: (e: React.MouseEvent<HTMLDivElement>) => {\n              if (e.target === e.currentTarget) {\n                onOpenChange(false)\n              }\n            },\n          }),\n          contentEl,\n        )\n      : contentEl\n\n    if (typeof document !== 'undefined') {\n      return ReactDOM.createPortal(tree, document.body)\n    }\n\n    return tree\n  },\n)\n\n// ---------------------------------------------------------------------------\n// SheetHeader\n// ---------------------------------------------------------------------------\n\nexport interface SheetHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nexport const SheetHeader = React.forwardRef<HTMLDivElement, SheetHeaderProps>(\n  function SheetHeader({ className, ...props }, ref) {\n    return React.createElement('div', {\n      ref,\n      className: cn('flex flex-col space-y-2 text-center sm:text-left', className),\n      ...props,\n    })\n  },\n)\n\n// ---------------------------------------------------------------------------\n// SheetFooter\n// ---------------------------------------------------------------------------\n\nexport interface SheetFooterProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nexport const SheetFooter = React.forwardRef<HTMLDivElement, SheetFooterProps>(\n  function SheetFooter({ className, ...props }, ref) {\n    return React.createElement('div', {\n      ref,\n      className: cn(\n        'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',\n        className,\n      ),\n      ...props,\n    })\n  },\n)\n\n// ---------------------------------------------------------------------------\n// SheetTitle\n// ---------------------------------------------------------------------------\n\nexport interface SheetTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {}\n\nexport const SheetTitle = React.forwardRef<HTMLHeadingElement, SheetTitleProps>(\n  function SheetTitle({ className, ...props }, ref) {\n    const { titleId } = useSheetContext()\n    return React.createElement('h2', {\n      ref,\n      id: titleId,\n      className: cn('text-lg font-semibold text-foreground', className),\n      ...props,\n    })\n  },\n)\n\n// ---------------------------------------------------------------------------\n// SheetDescription\n// ---------------------------------------------------------------------------\n\nexport interface SheetDescriptionProps\n  extends React.HTMLAttributes<HTMLParagraphElement> {}\n\nexport const SheetDescription = React.forwardRef<\n  HTMLParagraphElement,\n  SheetDescriptionProps\n>(function SheetDescription({ className, ...props }, ref) {\n  const { descriptionId } = useSheetContext()\n  return React.createElement('p', {\n    ref,\n    id: descriptionId,\n    className: cn('text-sm text-muted-foreground', className),\n    ...props,\n  })\n})\n\n// ---------------------------------------------------------------------------\n// SheetClose\n// ---------------------------------------------------------------------------\n\nexport interface SheetCloseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {}\n\nexport const SheetClose = React.forwardRef<HTMLButtonElement, SheetCloseProps>(\n  function SheetClose({ onClick, children, ...props }, ref) {\n    const { onOpenChange } = useSheetContext()\n\n    const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n      onOpenChange(false)\n      onClick?.(e)\n    }\n\n    return React.createElement(\n      'button',\n      {\n        ref,\n        type: 'button',\n        onClick: handleClick,\n        ...props,\n      },\n      children,\n    )\n  },\n)\n"],
+  "mappings": "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",
+  "names": ["SheetTrigger", "SheetOverlay", "SheetContent", "SheetHeader", "SheetFooter", "SheetTitle", "SheetDescription", "SheetClose"]
+}

package/dist/react-sidebar.js

@@ -0,0 +1,100 @@
+import {
+  cn,
+  cva
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-sidebar/dist/index.js
+import * as React from "react";
+
+// ../sidebar/dist/index.js
+function createSidebar(props = {}) {
+  const { sections = [], currentPath = "/", userRoles = [] } = props;
+  function isActive(href) {
+    if (href === "/") return currentPath === "/";
+    return currentPath.startsWith(href);
+  }
+  function isVisible(item) {
+    if (!item.roles || item.roles.length === 0) return true;
+    return item.roles.some((role) => userRoles.includes(role));
+  }
+  const visibleSections = sections.map((section) => ({
+    ...section,
+    items: section.items.filter(isVisible)
+  })).filter((section) => section.items.length > 0);
+  return {
+    ariaProps: { role: "navigation", "aria-label": "Sidebar" },
+    isActive,
+    isVisible,
+    itemAriaProps: (href) => isActive(href) ? { "aria-current": "page" } : {},
+    visibleSections
+  };
+}
+var sidebarVariants = cva({
+  base: "hidden md:flex flex-col border-r bg-background",
+  variants: {
+    collapsed: {
+      true: "w-16",
+      false: "w-64"
+    }
+  },
+  defaultVariants: {
+    collapsed: "false"
+  }
+});
+var sidebarItemVariants = cva({
+  base: "flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors",
+  variants: {
+    active: {
+      true: "bg-accent text-accent-foreground",
+      false: "text-muted-foreground hover:bg-muted hover:text-foreground"
+    }
+  },
+  defaultVariants: {
+    active: "false"
+  }
+});
+
+// ../react-sidebar/dist/index.js
+import { jsx, jsxs } from "react/jsx-runtime";
+var Sidebar = React.forwardRef(
+  function Sidebar2({
+    sections = [],
+    currentPath,
+    collapsed = false,
+    userRoles,
+    className,
+    ...props
+  }, ref) {
+    const api = createSidebar({ sections, currentPath, collapsed, userRoles });
+    const classes = cn(
+      sidebarVariants({ collapsed: collapsed ? "true" : "false" }),
+      className
+    );
+    return /* @__PURE__ */ jsx("aside", { ref, className: classes, ...api.ariaProps, ...props, children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4 p-4", children: api.visibleSections.map((section, sIdx) => /* @__PURE__ */ jsxs("div", { children: [
+      section.title && !collapsed && /* @__PURE__ */ jsx("h3", { className: "mb-2 px-3 text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: section.title }),
+      /* @__PURE__ */ jsx("ul", { className: "space-y-1", children: section.items.map((item) => {
+        const active = api.isActive(item.href);
+        return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+          "a",
+          {
+            href: item.href,
+            className: sidebarItemVariants({
+              active: active ? "true" : "false"
+            }),
+            ...api.itemAriaProps(item.href),
+            children: [
+              item.icon && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: item.icon }),
+              !collapsed && /* @__PURE__ */ jsx("span", { children: item.label })
+            ]
+          }
+        ) }, item.href);
+      }) })
+    ] }, section.title ?? sIdx)) }) });
+  }
+);
+export {
+  Sidebar,
+  sidebarItemVariants,
+  sidebarVariants
+};
+//# sourceMappingURL=react-sidebar.js.map

package/dist/react-sidebar.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../sidebar/src/sidebar.ts", "../../sidebar/src/sidebar.styles.ts", "../../react-sidebar/src/sidebar.tsx"],
+  "sourcesContent": ["export interface SidebarItem {\n  label: string\n  href: string\n  icon?: string\n  /** Roles required to see this item */\n  roles?: string[]\n  /** Nested items */\n  children?: SidebarItem[]\n}\n\nexport interface SidebarSection {\n  title?: string\n  items: SidebarItem[]\n}\n\nexport interface SidebarProps {\n  sections?: SidebarSection[]\n  currentPath?: string\n  collapsed?: boolean\n  userRoles?: string[]\n}\n\nexport interface SidebarAPI {\n  ariaProps: Record<string, string>\n  isActive: (href: string) => boolean\n  isVisible: (item: SidebarItem) => boolean\n  itemAriaProps: (href: string) => Record<string, string>\n  visibleSections: SidebarSection[]\n}\n\nexport function createSidebar(props: SidebarProps = {}): SidebarAPI {\n  const { sections = [], currentPath = '/', userRoles = [] } = props\n\n  function isActive(href: string): boolean {\n    if (href === '/') return currentPath === '/'\n    return currentPath.startsWith(href)\n  }\n\n  function isVisible(item: SidebarItem): boolean {\n    if (!item.roles || item.roles.length === 0) return true\n    return item.roles.some((role) => userRoles.includes(role))\n  }\n\n  const visibleSections = sections\n    .map((section) => ({\n      ...section,\n      items: section.items.filter(isVisible),\n    }))\n    .filter((section) => section.items.length > 0)\n\n  return {\n    ariaProps: { role: 'navigation', 'aria-label': 'Sidebar' },\n    isActive,\n    isVisible,\n    itemAriaProps: (href: string): Record<string, string> =>\n      isActive(href) ? { 'aria-current': 'page' } : {},\n    visibleSections,\n  }\n}\n", "import { cva } from '@refraction-ui/shared'\n\nexport const sidebarVariants = cva({\n  base: 'hidden md:flex flex-col border-r bg-background',\n  variants: {\n    collapsed: {\n      true: 'w-16',\n      false: 'w-64',\n    },\n  },\n  defaultVariants: {\n    collapsed: 'false',\n  },\n})\n\nexport const sidebarItemVariants = cva({\n  base: 'flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors',\n  variants: {\n    active: {\n      true: 'bg-accent text-accent-foreground',\n      false: 'text-muted-foreground hover:bg-muted hover:text-foreground',\n    },\n  },\n  defaultVariants: {\n    active: 'false',\n  },\n})\n", "import * as React from 'react'\nimport {\n  createSidebar,\n  sidebarVariants,\n  sidebarItemVariants,\n  type SidebarSection,\n  type SidebarItem as SidebarItemType,\n} from '@refraction-ui/sidebar'\nimport { cn } from '@refraction-ui/shared'\n\nexport interface SidebarProps extends React.HTMLAttributes<HTMLElement> {\n  /** Sidebar sections with items */\n  sections?: SidebarSection[]\n  /** Current pathname for active state */\n  currentPath?: string\n  /** Whether the sidebar is collapsed */\n  collapsed?: boolean\n  /** User roles for visibility filtering */\n  userRoles?: string[]\n}\n\n/**\n * Sidebar component — renders a vertical navigation panel with sections and items.\n *\n * Uses the headless @refraction-ui/sidebar core for state, visibility, and ARIA attributes.\n * Hidden on mobile (hidden md:flex via styles).\n */\nexport const Sidebar = React.forwardRef<HTMLElement, SidebarProps>(\n  function Sidebar(\n    {\n      sections = [],\n      currentPath,\n      collapsed = false,\n      userRoles,\n      className,\n      ...props\n    },\n    ref,\n  ) {\n    const api = createSidebar({ sections, currentPath, collapsed, userRoles })\n    const classes = cn(\n      sidebarVariants({ collapsed: collapsed ? 'true' : 'false' }),\n      className,\n    )\n\n    return (\n      <aside ref={ref} className={classes} {...api.ariaProps} {...props}>\n        <div className=\"flex flex-col gap-4 p-4\">\n          {api.visibleSections.map((section, sIdx) => (\n            <div key={section.title ?? sIdx}>\n              {section.title && !collapsed && (\n                <h3 className=\"mb-2 px-3 text-xs font-semibold uppercase tracking-wider text-muted-foreground\">\n                  {section.title}\n                </h3>\n              )}\n              <ul className=\"space-y-1\">\n                {section.items.map((item) => {\n                  const active = api.isActive(item.href)\n                  return (\n                    <li key={item.href}>\n                      <a\n                        href={item.href}\n                        className={sidebarItemVariants({\n                          active: active ? 'true' : 'false',\n                        })}\n                        {...api.itemAriaProps(item.href)}\n                      >\n                        {item.icon && <span aria-hidden=\"true\">{item.icon}</span>}\n                        {!collapsed && <span>{item.label}</span>}\n                      </a>\n                    </li>\n                  )\n                })}\n              </ul>\n            </div>\n          ))}\n        </div>\n      </aside>\n    )\n  },\n)\n"],
+  "mappings": ";;;;;;;;;AA8BO,SAAS,cAAc,QAAsB,CAAA,GAAgB;AAClE,QAAM,EAAE,WAAW,CAAA,GAAI,cAAc,KAAK,YAAY,CAAA,EAAC,IAAM;AAE7D,WAAS,SAAS,MAAuB;AACvC,QAAI,SAAS,IAAK,QAAO,gBAAgB;AACzC,WAAO,YAAY,WAAW,IAAI;EACpC;AAEA,WAAS,UAAU,MAA4B;AAC7C,QAAI,CAAC,KAAK,SAAS,KAAK,MAAM,WAAW,EAAG,QAAO;AACnD,WAAO,KAAK,MAAM,KAAK,CAAC,SAAS,UAAU,SAAS,IAAI,CAAC;EAC3D;AAEA,QAAM,kBAAkB,SACrB,IAAI,CAAC,aAAa;IACjB,GAAG;IACH,OAAO,QAAQ,MAAM,OAAO,SAAS;EAAA,EACrC,EACD,OAAO,CAAC,YAAY,QAAQ,MAAM,SAAS,CAAC;AAE/C,SAAO;IACL,WAAW,EAAE,MAAM,cAAc,cAAc,UAAA;IAC/C;IACA;IACA,eAAe,CAAC,SACd,SAAS,IAAI,IAAI,EAAE,gBAAgB,OAAA,IAAW,CAAA;IAChD;EAAA;AAEJ;ACxDO,IAAM,kBAAkB,IAAI;EACjC,MAAM;EACN,UAAU;IACR,WAAW;MACT,MAAM;MACN,OAAO;IAAA;EACT;EAEF,iBAAiB;IACf,WAAW;EAAA;AAEf,CAAC;AAEM,IAAM,sBAAsB,IAAI;EACrC,MAAM;EACN,UAAU;IACR,QAAQ;MACN,MAAM;MACN,OAAO;IAAA;EACT;EAEF,iBAAiB;IACf,QAAQ;EAAA;AAEZ,CAAC;;;;ACCM,IAAM,UAAgB;EAC3B,SAASA,SACP;IACE,WAAW,CAAA;IACX;IACA,YAAY;IACZ;IACA;IACA,GAAG;EAAA,GAEL,KACA;AACA,UAAM,MAAM,cAAc,EAAE,UAAU,aAAa,WAAW,UAAA,CAAW;AACzE,UAAM,UAAU;MACd,gBAAgB,EAAE,WAAW,YAAY,SAAS,QAAA,CAAS;MAC3D;IAAA;AAGF,WACE,oBAAC,SAAA,EAAM,KAAU,WAAW,SAAU,GAAG,IAAI,WAAY,GAAG,OAC1D,UAAA,oBAAC,OAAA,EAAI,WAAU,2BACZ,UAAA,IAAI,gBAAgB,IAAI,CAAC,SAAS,SACjC,qBAAC,OAAA,EACE,UAAA;MAAA,QAAQ,SAAS,CAAC,aACjB,oBAAC,MAAA,EAAG,WAAU,kFACX,UAAA,QAAQ,MAAA,CACX;MAEF,oBAAC,MAAA,EAAG,WAAU,aACX,UAAA,QAAQ,MAAM,IAAI,CAAC,SAAS;AAC3B,cAAM,SAAS,IAAI,SAAS,KAAK,IAAI;AACrC,eAAA,oBACG,MAAA,EACC,UAAA;UAAC;UAAA;YACC,MAAM,KAAK;YACX,WAAW,oBAAoB;cAC7B,QAAQ,SAAS,SAAS;YAAA,CAC3B;YACA,GAAG,IAAI,cAAc,KAAK,IAAI;YAE9B,UAAA;cAAA,KAAK,QAAQ,oBAAC,QAAA,EAAK,eAAY,QAAQ,UAAA,KAAK,KAAA,CAAK;cACjD,CAAC,aAAa,oBAAC,QAAA,EAAM,UAAA,KAAK,MAAA,CAAM;YAAA;UAAA;QAAA,EACnC,GAVO,KAAK,IAWd;MAEJ,CAAC,EAAA,CACH;IAAA,EAAA,GAxBQ,QAAQ,SAAS,IAyB3B,CACD,EAAA,CACH,EAAA,CACF;EAEJ;AACF;",
+  "names": ["Sidebar"]
+}

package/dist/react-skeleton.js

@@ -0,0 +1,91 @@
+import {
+  cn,
+  cva
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-skeleton/dist/index.js
+import * as React from "react";
+
+// ../skeleton/dist/index.js
+function createSkeleton(props = {}) {
+  const { shape = "text", animate = true } = props;
+  const ariaProps = {
+    "aria-hidden": true,
+    role: "presentation"
+  };
+  const dataAttributes = {
+    "data-shape": shape,
+    "data-animate": String(animate)
+  };
+  return {
+    ariaProps,
+    dataAttributes
+  };
+}
+var skeletonVariants = cva({
+  base: "animate-pulse bg-muted",
+  variants: {
+    shape: {
+      text: "h-4 w-full rounded",
+      circular: "rounded-full",
+      rectangular: "rounded-none",
+      rounded: "rounded-md"
+    }
+  },
+  defaultVariants: {
+    shape: "text"
+  }
+});
+
+// ../react-skeleton/dist/index.js
+var Skeleton = React.forwardRef(
+  function Skeleton2({ shape, width, height, animate, className, style, ...props }, ref) {
+    const api = createSkeleton({ shape, animate });
+    const classes = cn(skeletonVariants({ shape }), className);
+    const mergedStyle = {
+      ...style,
+      ...width !== void 0 ? { width } : {},
+      ...height !== void 0 ? { height } : {}
+    };
+    return React.createElement("div", {
+      ref,
+      className: classes,
+      style: Object.keys(mergedStyle).length > 0 ? mergedStyle : void 0,
+      ...api.ariaProps,
+      ...api.dataAttributes,
+      ...props
+    });
+  }
+);
+var lineWidths = ["100%", "92%", "85%", "96%", "78%", "88%", "94%", "82%"];
+var SkeletonText = React.forwardRef(
+  function SkeletonText2({ lines = 3, animate, className, ...props }, ref) {
+    const children = [];
+    for (let i = 0; i < lines; i++) {
+      const width = lineWidths[i % lineWidths.length];
+      children.push(
+        React.createElement(Skeleton, {
+          key: i,
+          shape: "text",
+          width,
+          animate
+        })
+      );
+    }
+    return React.createElement(
+      "div",
+      {
+        ref,
+        className: cn("space-y-2", className),
+        ...props
+      },
+      ...children
+    );
+  }
+);
+export {
+  Skeleton,
+  SkeletonText,
+  skeletonVariants
+};
+//# sourceMappingURL=react-skeleton.js.map

package/dist/react-skeleton.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../skeleton/src/skeleton.ts", "../../skeleton/src/skeleton.styles.ts", "../../react-skeleton/src/skeleton.tsx"],
+  "sourcesContent": ["import type { AccessibilityProps } from '@refraction-ui/shared'\n\nexport type SkeletonShape = 'text' | 'circular' | 'rectangular' | 'rounded'\n\nexport interface SkeletonProps {\n  shape?: SkeletonShape\n  width?: string | number\n  height?: string | number\n  /** Number of lines to render for the text shape variant */\n  lines?: number\n  /** Whether to animate the skeleton pulse. Defaults to true */\n  animate?: boolean\n}\n\nexport interface SkeletonAPI {\n  /** ARIA attributes to spread on the element */\n  ariaProps: Partial<AccessibilityProps>\n  /** Data attributes for CSS styling hooks */\n  dataAttributes: Record<string, string>\n}\n\nexport function createSkeleton(props: SkeletonProps = {}): SkeletonAPI {\n  const { shape = 'text', animate = true } = props\n\n  const ariaProps: Partial<AccessibilityProps> = {\n    'aria-hidden': true,\n    role: 'presentation',\n  }\n\n  const dataAttributes: Record<string, string> = {\n    'data-shape': shape,\n    'data-animate': String(animate),\n  }\n\n  return {\n    ariaProps,\n    dataAttributes,\n  }\n}\n", "import { cva } from '@refraction-ui/shared'\n\nexport const skeletonVariants = cva({\n  base: 'animate-pulse bg-muted',\n  variants: {\n    shape: {\n      text: 'h-4 w-full rounded',\n      circular: 'rounded-full',\n      rectangular: 'rounded-none',\n      rounded: 'rounded-md',\n    },\n  },\n  defaultVariants: {\n    shape: 'text',\n  },\n})\n", "import * as React from 'react'\nimport {\n  createSkeleton,\n  skeletonVariants,\n  type SkeletonShape,\n} from '@refraction-ui/skeleton'\nimport { cn } from '@refraction-ui/shared'\n\nexport interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {\n  shape?: SkeletonShape\n  width?: string | number\n  height?: string | number\n  /** Whether to animate the skeleton pulse. Defaults to true */\n  animate?: boolean\n}\n\n/**\n * Skeleton component -- renders a placeholder loading element.\n *\n * Uses the headless @refraction-ui/skeleton core for ARIA attributes.\n * Styling via Tailwind utility classes (no external CSS-in-JS).\n */\nexport const Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(\n  function Skeleton({ shape, width, height, animate, className, style, ...props }, ref) {\n    const api = createSkeleton({ shape, animate })\n    const classes = cn(skeletonVariants({ shape }), className)\n\n    const mergedStyle: React.CSSProperties = {\n      ...style,\n      ...(width !== undefined ? { width } : {}),\n      ...(height !== undefined ? { height } : {}),\n    }\n\n    return React.createElement('div', {\n      ref,\n      className: classes,\n      style: Object.keys(mergedStyle).length > 0 ? mergedStyle : undefined,\n      ...api.ariaProps,\n      ...api.dataAttributes,\n      ...props,\n    })\n  },\n)\n\n// ---------------------------------------------------------------------------\n// SkeletonText\n// ---------------------------------------------------------------------------\n\nexport interface SkeletonTextProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Number of text lines to render. Defaults to 3 */\n  lines?: number\n  /** Whether to animate the skeleton pulse. Defaults to true */\n  animate?: boolean\n}\n\n/** Width percentages for each line to create a natural-looking text block */\nconst lineWidths = ['100%', '92%', '85%', '96%', '78%', '88%', '94%', '82%']\n\n/**\n * SkeletonText component -- renders N lines of text-shaped skeletons with\n * slight width variations for a natural loading appearance.\n */\nexport const SkeletonText = React.forwardRef<HTMLDivElement, SkeletonTextProps>(\n  function SkeletonText({ lines = 3, animate, className, ...props }, ref) {\n    const children: React.ReactElement[] = []\n\n    for (let i = 0; i < lines; i++) {\n      const width = lineWidths[i % lineWidths.length]\n      children.push(\n        React.createElement(Skeleton, {\n          key: i,\n          shape: 'text',\n          width,\n          animate,\n        }),\n      )\n    }\n\n    return React.createElement(\n      'div',\n      {\n        ref,\n        className: cn('space-y-2', className),\n        ...props,\n      },\n      ...children,\n    )\n  },\n)\n"],
+  "mappings": ";;;;;;;;;AAqBO,SAAS,eAAe,QAAuB,CAAA,GAAiB;AACrE,QAAM,EAAE,QAAQ,QAAQ,UAAU,KAAA,IAAS;AAE3C,QAAM,YAAyC;IAC7C,eAAe;IACf,MAAM;EAAA;AAGR,QAAM,iBAAyC;IAC7C,cAAc;IACd,gBAAgB,OAAO,OAAO;EAAA;AAGhC,SAAO;IACL;IACA;EAAA;AAEJ;ACpCO,IAAM,mBAAmB,IAAI;EAClC,MAAM;EACN,UAAU;IACR,OAAO;MACL,MAAM;MACN,UAAU;MACV,aAAa;MACb,SAAS;IAAA;EACX;EAEF,iBAAiB;IACf,OAAO;EAAA;AAEX,CAAC;;;ACOM,IAAM,WAAiB;EAC5B,SAASA,UAAS,EAAE,OAAO,OAAO,QAAQ,SAAS,WAAW,OAAO,GAAG,MAAA,GAAS,KAAK;AACpF,UAAM,MAAM,eAAe,EAAE,OAAO,QAAA,CAAS;AAC7C,UAAM,UAAU,GAAG,iBAAiB,EAAE,MAAA,CAAO,GAAG,SAAS;AAEzD,UAAM,cAAmC;MACvC,GAAG;MACH,GAAI,UAAU,SAAY,EAAE,MAAA,IAAU,CAAA;MACtC,GAAI,WAAW,SAAY,EAAE,OAAA,IAAW,CAAA;IAAC;AAG3C,WAAa,oBAAc,OAAO;MAChC;MACA,WAAW;MACX,OAAO,OAAO,KAAK,WAAW,EAAE,SAAS,IAAI,cAAc;MAC3D,GAAG,IAAI;MACP,GAAG,IAAI;MACP,GAAG;IAAA,CACJ;EACH;AACF;AAcA,IAAM,aAAa,CAAC,QAAQ,OAAO,OAAO,OAAO,OAAO,OAAO,OAAO,KAAK;AAMpE,IAAM,eAAqB;EAChC,SAASC,cAAa,EAAE,QAAQ,GAAG,SAAS,WAAW,GAAG,MAAA,GAAS,KAAK;AACtE,UAAM,WAAiC,CAAA;AAEvC,aAAS,IAAI,GAAG,IAAI,OAAO,KAAK;AAC9B,YAAM,QAAQ,WAAW,IAAI,WAAW,MAAM;AAC9C,eAAS;QACD,oBAAc,UAAU;UAC5B,KAAK;UACL,OAAO;UACP;UACA;QAAA,CACD;MAAA;IAEL;AAEA,WAAa;MACX;MACA;QACE;QACA,WAAW,GAAG,aAAa,SAAS;QACpC,GAAG;MAAA;MAEL,GAAG;IAAA;EAEP;AACF;",
+  "names": ["Skeleton", "SkeletonText"]
+}

package/dist/react-skip-to-content.js

@@ -0,0 +1,38 @@
+import {
+  cn,
+  cva
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-skip-to-content/dist/index.js
+import * as React from "react";
+
+// ../skip-to-content/dist/index.js
+function createSkipToContent() {
+  return { dataAttributes: { "data-slot": "skip-to-content" } };
+}
+var skipToContentVariants = cva({
+  base: "fixed left-4 top-4 z-[100] -translate-y-16 rounded-md border bg-background px-4 py-2 text-sm font-medium shadow-md transition-transform focus:translate-y-0 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+});
+
+// ../react-skip-to-content/dist/index.js
+import { jsx } from "react/jsx-runtime";
+var SkipToContent = React.forwardRef(
+  function SkipToContent2({ className, targetId = "main-content", children = "Skip to content", ...props }, ref) {
+    const api = createSkipToContent();
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        ref,
+        href: `#${targetId}`,
+        className: cn(skipToContentVariants(), className),
+        ...api.dataAttributes,
+        ...props,
+        children
+      }
+    );
+  }
+);
+export {
+  SkipToContent
+};
+//# sourceMappingURL=react-skip-to-content.js.map

package/dist/react-skip-to-content.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../skip-to-content/src/skip-to-content.ts", "../../react-skip-to-content/src/skip-to-content.tsx"],
+  "sourcesContent": ["import { cva } from '@refraction-ui/shared'\n\nexport interface SkipToContentAPI {\n  dataAttributes: Record<string, string>\n}\n\nexport function createSkipToContent(): SkipToContentAPI {\n  return { dataAttributes: { 'data-slot': 'skip-to-content' } }\n}\n\nexport const skipToContentVariants = cva({\n  base: 'fixed left-4 top-4 z-[100] -translate-y-16 rounded-md border bg-background px-4 py-2 text-sm font-medium shadow-md transition-transform focus:translate-y-0 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',\n})\n", "import * as React from 'react'\nimport {\n  createSkipToContent,\n  skipToContentVariants,\n} from '@refraction-ui/skip-to-content'\nimport { cn } from '@refraction-ui/shared'\n\nexport interface SkipToContentProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n  /** The target element ID to skip to (without the #) */\n  targetId?: string\n}\n\nexport const SkipToContent = React.forwardRef<HTMLAnchorElement, SkipToContentProps>(\n  function SkipToContent({ className, targetId = 'main-content', children = 'Skip to content', ...props }, ref) {\n    const api = createSkipToContent()\n    return (\n      <a\n        ref={ref}\n        href={`#${targetId}`}\n        className={cn(skipToContentVariants(), className)}\n        {...api.dataAttributes}\n        {...props}\n      >\n        {children}\n      </a>\n    )\n  },\n)\n"],
+  "mappings": ";;;;;;;;;AAMO,SAAS,sBAAwC;AACtD,SAAO,EAAE,gBAAgB,EAAE,aAAa,kBAAA,EAAkB;AAC5D;AAEO,IAAM,wBAAwB,IAAI;EACvC,MAAM;AACR,CAAC;;;;ACAM,IAAM,gBAAsB;EACjC,SAASA,eAAc,EAAE,WAAW,WAAW,gBAAgB,WAAW,mBAAmB,GAAG,MAAA,GAAS,KAAK;AAC5G,UAAM,MAAM,oBAAA;AACZ,WACE;MAAC;MAAA;QACC;QACA,MAAM,IAAI,QAAQ;QAClB,WAAW,GAAG,sBAAA,GAAyB,SAAS;QAC/C,GAAG,IAAI;QACP,GAAG;QAEH;MAAA;IAAA;EAGP;AACF;",
+  "names": ["SkipToContent"]
+}