@fanvue/ui 1.17.3 → 1.18.1

package/dist/cjs/components/Dialog/Dialog.cjs

@@ -0,0 +1,170 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const DialogPrimitive = require("@radix-ui/react-dialog");
+const React = require("react");
+const cn = require("../../utils/cn.cjs");
+const IconButton = require("../IconButton/IconButton.cjs");
+const ArrowLeftIcon = require("../Icons/ArrowLeftIcon.cjs");
+const CloseIcon = require("../Icons/CloseIcon.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const DialogPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(DialogPrimitive);
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const Dialog = DialogPrimitive__namespace.Root;
+const DialogTrigger = DialogPrimitive__namespace.Trigger;
+const DialogClose = DialogPrimitive__namespace.Close;
+const DialogOverlay = React__namespace.forwardRef(({ className, style, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  DialogPrimitive__namespace.Overlay,
+  {
+    ref,
+    className: cn.cn(
+      "data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 fixed inset-0 bg-surface-backdrop data-[state=closed]:animate-out data-[state=open]:animate-in",
+      className
+    ),
+    style: { zIndex: "var(--fanvue-ui-portal-z-index, 50)", ...style },
+    ...props
+  }
+));
+DialogOverlay.displayName = "DialogOverlay";
+const SIZE_CLASSES = {
+  sm: "sm:max-w-[400px]",
+  md: "sm:max-w-[440px]",
+  lg: "sm:max-w-[600px]"
+};
+const DialogContent = React__namespace.forwardRef(({ className, children, size = "md", overlay = true, style, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(DialogPrimitive__namespace.Portal, { children: [
+  overlay && /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay, {}),
+  /* @__PURE__ */ jsxRuntime.jsx(
+    DialogPrimitive__namespace.Content,
+    {
+      ref,
+      style: { zIndex: "var(--fanvue-ui-portal-z-index, 50)", ...style },
+      className: cn.cn(
+        // Base
+        "fixed flex flex-col overflow-hidden bg-surface-modal shadow-lifted focus:outline-none",
+        // Mobile: bottom sheet
+        "inset-x-0 bottom-0 max-h-[85vh] w-full rounded-t-3xl",
+        // Animation (shared)
+        "data-[state=open]:fade-in-0 data-[state=open]:animate-in",
+        "data-[state=closed]:fade-out-0 data-[state=closed]:animate-out",
+        // Mobile: slide up from bottom
+        "data-[state=open]:slide-in-from-bottom-full",
+        "data-[state=closed]:slide-out-to-bottom-full",
+        // Desktop: centered dialog
+        "sm:inset-auto sm:top-1/2 sm:left-1/2 sm:max-h-[85vh] sm:-translate-x-1/2 sm:-translate-y-1/2 sm:rounded-3xl",
+        // Desktop: scale in/out (cancel mobile slide)
+        "sm:data-[state=open]:slide-in-from-bottom-0 sm:data-[state=open]:zoom-in-95",
+        "sm:data-[state=closed]:slide-out-to-bottom-0 sm:data-[state=closed]:zoom-out-95",
+        // Duration
+        "duration-200",
+        // Size
+        SIZE_CLASSES[size],
+        className
+      ),
+      ...props,
+      children
+    }
+  )
+] }));
+DialogContent.displayName = "DialogContent";
+const DialogHeader = React__namespace.forwardRef(
+  ({
+    className,
+    children,
+    showClose = true,
+    showBack,
+    onBack,
+    backLabel = "Go back",
+    closeLabel = "Close",
+    ...props
+  }, ref) => {
+    const shouldShowBack = showBack ?? !!onBack;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: cn.cn("flex h-16 shrink-0 items-center gap-2 px-6 py-4", className),
+        ...props,
+        children: [
+          shouldShowBack && /* @__PURE__ */ jsxRuntime.jsx(
+            IconButton.IconButton,
+            {
+              variant: "tertiary",
+              size: "32",
+              icon: /* @__PURE__ */ jsxRuntime.jsx(ArrowLeftIcon.ArrowLeftIcon, {}),
+              onClick: onBack,
+              disabled: !onBack,
+              "aria-label": backLabel
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1", children }),
+          showClose && /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(IconButton.IconButton, { variant: "tertiary", size: "32", icon: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon.CloseIcon, {}), "aria-label": closeLabel }) })
+        ]
+      }
+    );
+  }
+);
+DialogHeader.displayName = "DialogHeader";
+const DialogTitle = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  DialogPrimitive__namespace.Title,
+  {
+    ref,
+    className: cn.cn("typography-bold-heading-xs truncate text-foreground-default", className),
+    ...props
+  }
+));
+DialogTitle.displayName = "DialogTitle";
+const DialogDescription = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  DialogPrimitive__namespace.Description,
+  {
+    ref,
+    className: cn.cn("typography-regular-body-lg text-foreground-secondary", className),
+    ...props
+  }
+));
+DialogDescription.displayName = "DialogDescription";
+const DialogBody = React__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn.cn("flex-1 overflow-y-auto px-6 py-4", className), ...props })
+);
+DialogBody.displayName = "DialogBody";
+const DialogFooter = React__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: cn.cn(
+        "flex shrink-0 items-center gap-3 px-6 pt-3 pb-6",
+        "[&>*]:min-w-0 [&>*]:flex-1",
+        className
+      ),
+      ...props
+    }
+  )
+);
+DialogFooter.displayName = "DialogFooter";
+exports.Dialog = Dialog;
+exports.DialogBody = DialogBody;
+exports.DialogClose = DialogClose;
+exports.DialogContent = DialogContent;
+exports.DialogDescription = DialogDescription;
+exports.DialogFooter = DialogFooter;
+exports.DialogHeader = DialogHeader;
+exports.DialogOverlay = DialogOverlay;
+exports.DialogTitle = DialogTitle;
+exports.DialogTrigger = DialogTrigger;
+//# sourceMappingURL=Dialog.cjs.map

package/dist/cjs/components/Dialog/Dialog.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.cjs","sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport { ArrowLeftIcon } from \"../Icons/ArrowLeftIcon\";\nimport { CloseIcon } from \"../Icons/CloseIcon\";\n\n/** Props for the {@link Dialog} root component. */\nexport interface DialogProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root> {\n  /** Controlled open state. When provided, you must also supply `onOpenChange`. */\n  open?: boolean;\n  /** Called when the open state changes. Required when `open` is controlled. */\n  onOpenChange?: (open: boolean) => void;\n  /** The open state of the dialog when it is initially rendered (uncontrolled). */\n  defaultOpen?: boolean;\n}\n\n/** Root component that manages open/close state for a dialog. */\nexport const Dialog = DialogPrimitive.Root;\n\n/** Props for the {@link DialogTrigger} component. */\nexport type DialogTriggerProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>;\n\n/** The element that opens the dialog when clicked. */\nexport const DialogTrigger = DialogPrimitive.Trigger;\n\n/** Convenience alias for Radix `Dialog.Close`. Closes the dialog when clicked. */\nexport const DialogClose = DialogPrimitive.Close;\n\n/** Props for the {@link DialogClose} component. */\nexport type DialogCloseProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Close>;\n\nexport interface DialogOverlayProps\n  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay> {}\n\n/**\n * Semi-transparent backdrop rendered behind the dialog content.\n * Rendered inside a portal automatically by {@link DialogContent}.\n */\nexport const DialogOverlay = React.forwardRef<\n  React.ComponentRef<typeof DialogPrimitive.Overlay>,\n  DialogOverlayProps\n>(({ className, style, ...props }, ref) => (\n  <DialogPrimitive.Overlay\n    ref={ref}\n    className={cn(\n      \"data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 fixed inset-0 bg-surface-backdrop data-[state=closed]:animate-out data-[state=open]:animate-in\",\n      className,\n    )}\n    style={{ zIndex: \"var(--fanvue-ui-portal-z-index, 50)\", ...style }}\n    {...props}\n  />\n));\nDialogOverlay.displayName = \"DialogOverlay\";\n\nexport interface DialogContentProps\n  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {\n  /**\n   * Width preset for the dialog.\n   * - `\"sm\"` — 400px max-width (confirmations, simple forms)\n   * - `\"md\"` — 440px max-width (default, standard dialogs)\n   * - `\"lg\"` — 600px max-width (complex content, tables)\n   *\n   * @default \"md\"\n   */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /** When true, renders overlay automatically. @default true */\n  overlay?: boolean;\n}\n\nconst SIZE_CLASSES: Record<NonNullable<DialogContentProps[\"size\"]>, string> = {\n  sm: \"sm:max-w-[400px]\",\n  md: \"sm:max-w-[440px]\",\n  lg: \"sm:max-w-[600px]\",\n};\n\n/**\n * The dialog panel rendered inside a portal. Includes the overlay by default.\n *\n * On mobile viewports (<640px), the dialog slides up from the bottom as a sheet\n * with top-only border radius. On larger viewports it renders centered with\n * full border radius.\n *\n * @example\n * ```tsx\n * <Dialog>\n *   <DialogTrigger asChild>\n *     <Button>Open</Button>\n *   </DialogTrigger>\n *   <DialogContent>\n *     <DialogHeader>\n *       <DialogTitle>Title</DialogTitle>\n *     </DialogHeader>\n *     <DialogBody>Content here</DialogBody>\n *     <DialogFooter>\n *       <DialogClose asChild>\n *         <Button variant=\"secondary\">Cancel</Button>\n *       </DialogClose>\n *       <Button>Accept</Button>\n *     </DialogFooter>\n *   </DialogContent>\n * </Dialog>\n * ```\n */\nexport const DialogContent = React.forwardRef<\n  React.ComponentRef<typeof DialogPrimitive.Content>,\n  DialogContentProps\n>(({ className, children, size = \"md\", overlay = true, style, ...props }, ref) => (\n  <DialogPrimitive.Portal>\n    {overlay && <DialogOverlay />}\n    <DialogPrimitive.Content\n      ref={ref}\n      style={{ zIndex: \"var(--fanvue-ui-portal-z-index, 50)\", ...style }}\n      className={cn(\n        // Base\n        \"fixed flex flex-col overflow-hidden bg-surface-modal shadow-lifted focus:outline-none\",\n        // Mobile: bottom sheet\n        \"inset-x-0 bottom-0 max-h-[85vh] w-full rounded-t-3xl\",\n        // Animation (shared)\n        \"data-[state=open]:fade-in-0 data-[state=open]:animate-in\",\n        \"data-[state=closed]:fade-out-0 data-[state=closed]:animate-out\",\n        // Mobile: slide up from bottom\n        \"data-[state=open]:slide-in-from-bottom-full\",\n        \"data-[state=closed]:slide-out-to-bottom-full\",\n        // Desktop: centered dialog\n        \"sm:inset-auto sm:top-1/2 sm:left-1/2 sm:max-h-[85vh] sm:-translate-x-1/2 sm:-translate-y-1/2 sm:rounded-3xl\",\n        // Desktop: scale in/out (cancel mobile slide)\n        \"sm:data-[state=open]:slide-in-from-bottom-0 sm:data-[state=open]:zoom-in-95\",\n        \"sm:data-[state=closed]:slide-out-to-bottom-0 sm:data-[state=closed]:zoom-out-95\",\n        // Duration\n        \"duration-200\",\n        // Size\n        SIZE_CLASSES[size],\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </DialogPrimitive.Content>\n  </DialogPrimitive.Portal>\n));\nDialogContent.displayName = \"DialogContent\";\n\nexport interface DialogHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Show the close (X) button in the header. @default true */\n  showClose?: boolean;\n  /** Show a back arrow button on the left side. Defaults to `true` when `onBack` is provided. */\n  showBack?: boolean;\n  /** Called when the back button is clicked. */\n  onBack?: () => void;\n  /** Accessible label for the back button. @default \"Go back\" */\n  backLabel?: string;\n  /** Accessible label for the close button. @default \"Close\" */\n  closeLabel?: string;\n}\n\n/**\n * Header bar for the dialog. Renders the title with an optional back arrow\n * and close button.\n *\n * @example\n * ```tsx\n * <DialogHeader>\n *   <DialogTitle>Settings</DialogTitle>\n * </DialogHeader>\n *\n * <DialogHeader showBack onBack={() => setStep(0)}>\n *   <DialogTitle>Step 2</DialogTitle>\n * </DialogHeader>\n * ```\n */\nexport const DialogHeader = React.forwardRef<HTMLDivElement, DialogHeaderProps>(\n  (\n    {\n      className,\n      children,\n      showClose = true,\n      showBack,\n      onBack,\n      backLabel = \"Go back\",\n      closeLabel = \"Close\",\n      ...props\n    },\n    ref,\n  ) => {\n    const shouldShowBack = showBack ?? !!onBack;\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\"flex h-16 shrink-0 items-center gap-2 px-6 py-4\", className)}\n        {...props}\n      >\n        {shouldShowBack && (\n          <IconButton\n            variant=\"tertiary\"\n            size=\"32\"\n            icon={<ArrowLeftIcon />}\n            onClick={onBack}\n            disabled={!onBack}\n            aria-label={backLabel}\n          />\n        )}\n        <div className=\"min-w-0 flex-1\">{children}</div>\n        {showClose && (\n          <DialogPrimitive.Close asChild>\n            <IconButton variant=\"tertiary\" size=\"32\" icon={<CloseIcon />} aria-label={closeLabel} />\n          </DialogPrimitive.Close>\n        )}\n      </div>\n    );\n  },\n);\nDialogHeader.displayName = \"DialogHeader\";\n\n/** Props for the {@link DialogTitle} component. */\nexport type DialogTitleProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>;\n\n/**\n * Accessible title for the dialog. Must be rendered inside {@link DialogHeader}\n * or directly within {@link DialogContent}.\n */\nexport const DialogTitle = React.forwardRef<\n  React.ComponentRef<typeof DialogPrimitive.Title>,\n  DialogTitleProps\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Title\n    ref={ref}\n    className={cn(\"typography-bold-heading-xs truncate text-foreground-default\", className)}\n    {...props}\n  />\n));\nDialogTitle.displayName = \"DialogTitle\";\n\n/** Props for the {@link DialogDescription} component. */\nexport type DialogDescriptionProps = React.ComponentPropsWithoutRef<\n  typeof DialogPrimitive.Description\n>;\n\n/** Accessible description for the dialog. Rendered as secondary text. */\nexport const DialogDescription = React.forwardRef<\n  React.ComponentRef<typeof DialogPrimitive.Description>,\n  DialogDescriptionProps\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Description\n    ref={ref}\n    className={cn(\"typography-regular-body-lg text-foreground-secondary\", className)}\n    {...props}\n  />\n));\nDialogDescription.displayName = \"DialogDescription\";\n\nexport interface DialogBodyProps extends React.HTMLAttributes<HTMLDivElement> {}\n\n/**\n * Scrollable content area (slot) between the header and footer.\n * Grows to fill available space and scrolls when content overflows.\n */\nexport const DialogBody = React.forwardRef<HTMLDivElement, DialogBodyProps>(\n  ({ className, ...props }, ref) => (\n    <div ref={ref} className={cn(\"flex-1 overflow-y-auto px-6 py-4\", className)} {...props} />\n  ),\n);\nDialogBody.displayName = \"DialogBody\";\n\nexport interface DialogFooterProps extends React.HTMLAttributes<HTMLDivElement> {}\n\n/**\n * Footer bar for the dialog. Typically contains action buttons.\n * Children are laid out in a horizontal row with equal flex-basis.\n */\nexport const DialogFooter = React.forwardRef<HTMLDivElement, DialogFooterProps>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        \"flex shrink-0 items-center gap-3 px-6 pt-3 pb-6\",\n        \"[&>*]:min-w-0 [&>*]:flex-1\",\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\nDialogFooter.displayName = \"DialogFooter\";\n"],"names":["DialogPrimitive","React","jsx","cn","jsxs","IconButton","ArrowLeftIcon","CloseIcon"],"mappings":"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"}

package/dist/cjs/components/Drawer/Drawer.cjs

@@ -0,0 +1,151 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const DialogPrimitive = require("@radix-ui/react-dialog");
+const React = require("react");
+const cn = require("../../utils/cn.cjs");
+const IconButton = require("../IconButton/IconButton.cjs");
+const CloseIcon = require("../Icons/CloseIcon.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const DialogPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(DialogPrimitive);
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const DrawerContext = React__namespace.createContext({ overlay: true });
+function Drawer({ overlay = true, modal, children, ...props }) {
+  const resolvedModal = modal ?? (overlay ? void 0 : false);
+  return /* @__PURE__ */ jsxRuntime.jsx(DrawerContext.Provider, { value: { overlay }, children: /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Root, { modal: resolvedModal, ...props, children }) });
+}
+Drawer.displayName = "Drawer";
+const DrawerTrigger = DialogPrimitive__namespace.Trigger;
+DrawerTrigger.displayName = "DrawerTrigger";
+const DrawerClose = DialogPrimitive__namespace.Close;
+DrawerClose.displayName = "DrawerClose";
+const DrawerOverlay = React__namespace.forwardRef(({ className, style, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  DialogPrimitive__namespace.Overlay,
+  {
+    ref,
+    style: { zIndex: "var(--fanvue-ui-portal-z-index, 50)", ...style },
+    className: cn.cn(
+      "fixed inset-0 bg-surface-backdrop",
+      "data-[state=closed]:animate-out data-[state=open]:animate-in",
+      "data-[state=closed]:fade-out-0 data-[state=closed]:duration-150 data-[state=closed]:ease-in",
+      "data-[state=open]:fade-in-0 data-[state=open]:duration-200 data-[state=open]:ease-out",
+      className
+    ),
+    ...props
+  }
+));
+DrawerOverlay.displayName = "DrawerOverlay";
+const SLIDE_CLASSES = {
+  right: "inset-y-0 right-0 h-full w-2/3 data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right",
+  left: "inset-y-0 left-0 h-full w-2/3 data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left",
+  top: "inset-x-0 top-0 w-full data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+  bottom: "inset-x-0 bottom-0 w-full rounded-t-lg data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom"
+};
+const DrawerContent = React__namespace.forwardRef(
+  ({
+    className,
+    position = "right",
+    size = "sm",
+    overlay: overlayProp,
+    overlayProps,
+    style,
+    children,
+    ...props
+  }, ref) => {
+    const ctx = React__namespace.useContext(DrawerContext);
+    const overlay = overlayProp ?? ctx.overlay;
+    const isHorizontal = position === "left" || position === "right";
+    const sizeClass = isHorizontal ? { sm: "max-w-sm", md: "max-w-md", lg: "max-w-lg", full: "max-w-full" }[size] : {
+      sm: "max-h-[24rem]",
+      md: "max-h-[28rem]",
+      lg: "max-h-[32rem]",
+      full: "max-h-full"
+    }[size];
+    return /* @__PURE__ */ jsxRuntime.jsxs(DialogPrimitive__namespace.Portal, { children: [
+      overlay && /* @__PURE__ */ jsxRuntime.jsx(DrawerOverlay, { ...overlayProps }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        DialogPrimitive__namespace.Content,
+        {
+          ref,
+          style: { zIndex: "calc(var(--fanvue-ui-portal-z-index, 50) + 1)", ...style },
+          className: cn.cn(
+            "fixed flex flex-col bg-surface-modal shadow-lifted outline-none backdrop-blur-lg",
+            "data-[state=closed]:animate-out data-[state=open]:animate-in",
+            "data-[state=closed]:duration-150 data-[state=closed]:ease-in",
+            "data-[state=open]:duration-200 data-[state=open]:ease-out",
+            SLIDE_CLASSES[position],
+            sizeClass,
+            className
+          ),
+          ...props,
+          children
+        }
+      )
+    ] });
+  }
+);
+DrawerContent.displayName = "DrawerContent";
+const DrawerHeader = React__namespace.forwardRef(
+  ({ className, showClose = true, closeLabel = "Close drawer", children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn.cn("flex items-start gap-2 p-4", className), ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-0 flex-1 flex-col gap-1.5", children }),
+    showClose && /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      IconButton.IconButton,
+      {
+        icon: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon.CloseIcon, {}),
+        "aria-label": closeLabel,
+        variant: "tertiary",
+        size: "24",
+        className: "shrink-0"
+      }
+    ) })
+  ] })
+);
+DrawerHeader.displayName = "DrawerHeader";
+const DrawerFooter = React__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn.cn("flex flex-col gap-2 p-4", className), ...props })
+);
+DrawerFooter.displayName = "DrawerFooter";
+const DrawerTitle = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  DialogPrimitive__namespace.Title,
+  {
+    ref,
+    className: cn.cn("typography-semibold-body-lg truncate text-foreground-default", className),
+    ...props
+  }
+));
+DrawerTitle.displayName = "DrawerTitle";
+const DrawerDescription = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  DialogPrimitive__namespace.Description,
+  {
+    ref,
+    className: cn.cn("typography-regular-body-md text-foreground-secondary", className),
+    ...props
+  }
+));
+DrawerDescription.displayName = "DrawerDescription";
+exports.Drawer = Drawer;
+exports.DrawerClose = DrawerClose;
+exports.DrawerContent = DrawerContent;
+exports.DrawerDescription = DrawerDescription;
+exports.DrawerFooter = DrawerFooter;
+exports.DrawerHeader = DrawerHeader;
+exports.DrawerOverlay = DrawerOverlay;
+exports.DrawerTitle = DrawerTitle;
+exports.DrawerTrigger = DrawerTrigger;
+//# sourceMappingURL=Drawer.cjs.map

package/dist/cjs/components/Drawer/Drawer.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.cjs","sources":["../../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport { CloseIcon } from \"../Icons/CloseIcon\";\n\n/** The side from which the drawer slides in. */\nexport type DrawerPosition = \"left\" | \"right\" | \"top\" | \"bottom\";\n\n/** Size presets for the drawer panel. Maps to max-width (left/right) or max-height (top/bottom). */\nexport type DrawerSize = \"sm\" | \"md\" | \"lg\" | \"full\";\n\n/**\n * Props for the {@link Drawer} root component.\n *\n * Inherits `open`, `onOpenChange`, and `defaultOpen` from Radix Dialog.Root.\n *\n * The Radix `modal` prop (default `true`) can also be passed to create a\n * non-modal drawer — useful for persistent side navigation that does not\n * block interaction with the rest of the page.\n *\n * **`overlay` behaviour:** When `overlay` is `false`, the component\n * automatically sets `modal={false}` on the underlying Radix Dialog.Root.\n * A modal dialog without a visible overlay is confusing because focus is\n * still trapped and scroll is blocked even though the page appears\n * interactive. Passing `modal={true}` explicitly will override this.\n */\nexport interface DrawerProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root> {\n  /**\n   * Whether the default {@link DrawerOverlay} is rendered.\n   * When `false`, `modal` is automatically set to `false` as well\n   * (unless explicitly overridden) so focus-trap and scroll-lock are disabled.\n   * @default true\n   */\n  overlay?: boolean;\n}\n\nconst DrawerContext = React.createContext<{ overlay: boolean }>({ overlay: true });\n\n/**\n * Root component that manages open/close state for a drawer.\n * Wraps Radix Dialog.Root.\n *\n * @example\n * ```tsx\n * <Drawer>\n *   <DrawerTrigger>Open</DrawerTrigger>\n *   <DrawerContent position=\"right\">\n *     <DrawerHeader>\n *       <DrawerTitle>Settings</DrawerTitle>\n *       <DrawerDescription>Adjust your preferences.</DrawerDescription>\n *     </DrawerHeader>\n *     <p>Content goes here.</p>\n *     <DrawerFooter>\n *       <DrawerClose>Done</DrawerClose>\n *     </DrawerFooter>\n *   </DrawerContent>\n * </Drawer>\n * ```\n */\nexport function Drawer({ overlay = true, modal, children, ...props }: DrawerProps) {\n  const resolvedModal = modal ?? (overlay ? undefined : false);\n  return (\n    <DrawerContext.Provider value={{ overlay }}>\n      <DialogPrimitive.Root modal={resolvedModal} {...props}>\n        {children}\n      </DialogPrimitive.Root>\n    </DrawerContext.Provider>\n  );\n}\nDrawer.displayName = \"Drawer\";\n\n/** Props for the {@link DrawerTrigger} component. */\nexport type DrawerTriggerProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>;\n\n/** The element that opens the drawer when clicked. */\nexport const DrawerTrigger = DialogPrimitive.Trigger;\nDrawerTrigger.displayName = \"DrawerTrigger\";\n\n/** Props for the {@link DrawerClose} component. */\nexport type DrawerCloseProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Close>;\n\n/** Closes the drawer when clicked. Can be placed anywhere inside the drawer. */\nexport const DrawerClose = DialogPrimitive.Close;\nDrawerClose.displayName = \"DrawerClose\";\n\n/** Props for the {@link DrawerOverlay} component. */\nexport interface DrawerOverlayProps\n  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay> {}\n\n/**\n * A translucent backdrop rendered behind the drawer content.\n * Clicking the overlay closes the drawer by default.\n */\nexport const DrawerOverlay = React.forwardRef<\n  React.ComponentRef<typeof DialogPrimitive.Overlay>,\n  DrawerOverlayProps\n>(({ className, style, ...props }, ref) => (\n  <DialogPrimitive.Overlay\n    ref={ref}\n    style={{ zIndex: \"var(--fanvue-ui-portal-z-index, 50)\", ...style }}\n    className={cn(\n      \"fixed inset-0 bg-surface-backdrop\",\n      \"data-[state=closed]:animate-out data-[state=open]:animate-in\",\n      \"data-[state=closed]:fade-out-0 data-[state=closed]:duration-150 data-[state=closed]:ease-in\",\n      \"data-[state=open]:fade-in-0 data-[state=open]:duration-200 data-[state=open]:ease-out\",\n      className,\n    )}\n    {...props}\n  />\n));\nDrawerOverlay.displayName = \"DrawerOverlay\";\n\n/**\n * Slide-in animation classes keyed by position.\n * Uses Tailwind animate utilities (animate-in / animate-out).\n */\nconst SLIDE_CLASSES: Record<DrawerPosition, string> = {\n  right:\n    \"inset-y-0 right-0 h-full w-2/3 data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right\",\n  left: \"inset-y-0 left-0 h-full w-2/3 data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left\",\n  top: \"inset-x-0 top-0 w-full data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top\",\n  bottom:\n    \"inset-x-0 bottom-0 w-full rounded-t-lg data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom\",\n};\n\n/** Props for the {@link DrawerContent} component. */\nexport interface DrawerContentProps\n  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {\n  /**\n   * The edge from which the drawer slides in.\n   *\n   * Named `position` (rather than `side`) to avoid confusion with the CSS\n   * `side` concept used by Radix Popover/Tooltip and to better convey the\n   * spatial relationship of the drawer to the viewport.\n   *\n   * @default \"right\"\n   */\n  position?: DrawerPosition;\n  /**\n   * Controls the maximum extent of the drawer panel.\n   * For left/right drawers this sets `max-width`; for top/bottom it sets `max-height`.\n   * @default \"sm\"\n   */\n  size?: DrawerSize;\n  /**\n   * Whether to render the default {@link DrawerOverlay} behind the content.\n   * Set to `false` to provide your own overlay or omit it entirely.\n   *\n   * Prefer setting `overlay` on the {@link Drawer} root instead so that\n   * `modal` is also adjusted automatically.\n   *\n   * @default true\n   */\n  overlay?: boolean;\n  /** Props forwarded to the default {@link DrawerOverlay} when `overlay` is `true`. */\n  overlayProps?: DrawerOverlayProps;\n}\n\n/**\n * The panel that slides in from the chosen edge. Renders inside a portal with\n * an overlay backdrop by default.\n *\n * Includes focus-trap, `aria-describedby`, and Escape-to-close from Radix Dialog.\n */\nexport const DrawerContent = React.forwardRef<\n  React.ComponentRef<typeof DialogPrimitive.Content>,\n  DrawerContentProps\n>(\n  (\n    {\n      className,\n      position = \"right\",\n      size = \"sm\",\n      overlay: overlayProp,\n      overlayProps,\n      style,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const ctx = React.useContext(DrawerContext);\n    const overlay = overlayProp ?? ctx.overlay;\n    const isHorizontal = position === \"left\" || position === \"right\";\n    const sizeClass = isHorizontal\n      ? ({ sm: \"max-w-sm\", md: \"max-w-md\", lg: \"max-w-lg\", full: \"max-w-full\" } as const)[size]\n      : (\n          {\n            sm: \"max-h-[24rem]\",\n            md: \"max-h-[28rem]\",\n            lg: \"max-h-[32rem]\",\n            full: \"max-h-full\",\n          } as const\n        )[size];\n\n    return (\n      <DialogPrimitive.Portal>\n        {overlay && <DrawerOverlay {...overlayProps} />}\n        <DialogPrimitive.Content\n          ref={ref}\n          style={{ zIndex: \"calc(var(--fanvue-ui-portal-z-index, 50) + 1)\", ...style }}\n          className={cn(\n            \"fixed flex flex-col bg-surface-modal shadow-lifted outline-none backdrop-blur-lg\",\n            \"data-[state=closed]:animate-out data-[state=open]:animate-in\",\n            \"data-[state=closed]:duration-150 data-[state=closed]:ease-in\",\n            \"data-[state=open]:duration-200 data-[state=open]:ease-out\",\n            SLIDE_CLASSES[position],\n            sizeClass,\n            className,\n          )}\n          {...props}\n        >\n          {children}\n        </DialogPrimitive.Content>\n      </DialogPrimitive.Portal>\n    );\n  },\n);\nDrawerContent.displayName = \"DrawerContent\";\n\n/** Props for the {@link DrawerHeader} component. */\nexport interface DrawerHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Whether to show a built-in close (X) button. @default true */\n  showClose?: boolean;\n  /** Accessible label for the close button. @default \"Close drawer\" */\n  closeLabel?: string;\n}\n\n/**\n * A semantic header area for the drawer, typically containing a title and description.\n * Renders a built-in close button by default.\n */\nexport const DrawerHeader = React.forwardRef<HTMLDivElement, DrawerHeaderProps>(\n  ({ className, showClose = true, closeLabel = \"Close drawer\", children, ...props }, ref) => (\n    <div ref={ref} className={cn(\"flex items-start gap-2 p-4\", className)} {...props}>\n      <div className=\"flex min-w-0 flex-1 flex-col gap-1.5\">{children}</div>\n      {showClose && (\n        <DialogPrimitive.Close asChild>\n          <IconButton\n            icon={<CloseIcon />}\n            aria-label={closeLabel}\n            variant=\"tertiary\"\n            size=\"24\"\n            className=\"shrink-0\"\n          />\n        </DialogPrimitive.Close>\n      )}\n    </div>\n  ),\n);\nDrawerHeader.displayName = \"DrawerHeader\";\n\n/** Props for the {@link DrawerFooter} component. */\nexport interface DrawerFooterProps extends React.HTMLAttributes<HTMLDivElement> {}\n\n/** A semantic footer area for the drawer, typically containing action buttons. */\nexport const DrawerFooter = React.forwardRef<HTMLDivElement, DrawerFooterProps>(\n  ({ className, ...props }, ref) => (\n    <div ref={ref} className={cn(\"flex flex-col gap-2 p-4\", className)} {...props} />\n  ),\n);\nDrawerFooter.displayName = \"DrawerFooter\";\n\n/** Props for the {@link DrawerTitle} component. */\nexport interface DrawerTitleProps\n  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title> {}\n\n/** An accessible title for the drawer. Required for screen readers. */\nexport const DrawerTitle = React.forwardRef<\n  React.ComponentRef<typeof DialogPrimitive.Title>,\n  DrawerTitleProps\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Title\n    ref={ref}\n    className={cn(\"typography-semibold-body-lg truncate text-foreground-default\", className)}\n    {...props}\n  />\n));\nDrawerTitle.displayName = \"DrawerTitle\";\n\n/** Props for the {@link DrawerDescription} component. */\nexport interface DrawerDescriptionProps\n  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description> {}\n\n/** An accessible description for the drawer, providing supplementary context. */\nexport const DrawerDescription = React.forwardRef<\n  React.ComponentRef<typeof DialogPrimitive.Description>,\n  DrawerDescriptionProps\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Description\n    ref={ref}\n    className={cn(\"typography-regular-body-md text-foreground-secondary\", className)}\n    {...props}\n  />\n));\nDrawerDescription.displayName = \"DrawerDescription\";\n"],"names":["React","jsx","DialogPrimitive","cn","jsxs","IconButton","CloseIcon"],"mappings":"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"}

package/dist/cjs/components/Icons/LockerOffIcon.cjs

@@ -30,7 +30,7 @@ const LockerOffIcon = React__namespace.forwardRef(
         viewBox: "0 0 24 24",
         fill: "none",
         "aria-hidden": "true",
-        className: cn.cn("size-6", className),
+        className: cn.cn("size-6 text-foreground-default", className),
         ...props,
         children: /* @__PURE__ */ jsxRuntime.jsxs("g", { fill: "currentColor", children: [
           /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 19.25a3.22 3.22 0 0 1-2.58-1.27.749.749 0 1 1 1.19-.91c.33.44.84.68 1.39.68.96 0 1.75-.79 1.75-1.75 0-.39-.12-.76-.36-1.06a.749.749 0 1 1 1.19-.91c.44.57.67 1.25.67 1.97 0 1.79-1.46 3.25-3.25 3.25" }),

package/dist/cjs/components/Icons/LockerOffIcon.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"LockerOffIcon.cjs","sources":["../../../../src/components/Icons/LockerOffIcon.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport type { IconProps } from \"./types\";\n\nexport const LockerOffIcon = React.forwardRef<SVGSVGElement, IconProps>(\n  ({ className, ...props }, ref) => {\n    return (\n      <svg\n        ref={ref}\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        aria-hidden=\"true\"\n        className={cn(\"size-6\", className)}\n        {...props}\n      >\n        <g fill=\"currentColor\">\n          <path d=\"M12 19.25a3.22 3.22 0 0 1-2.58-1.27.749.749 0 1 1 1.19-.91c.33.44.84.68 1.39.68.96 0 1.75-.79 1.75-1.75 0-.39-.12-.76-.36-1.06a.749.749 0 1 1 1.19-.91c.44.57.67 1.25.67 1.97 0 1.79-1.46 3.25-3.25 3.25\" />\n          <path d=\"M17 22.75H7q-.555 0-1.05-.03a.757.757 0 0 1-.71-.79c.02-.41.37-.71.79-.71.3.02.62.02.96.02h10c3.57 0 4.25-.68 4.25-4.25v-2c0-3.51-.74-4.08-3.29-4.23-.3-.02-.62-.02-.96-.02H7c-3.57 0-4.25.68-4.25 4.25v2c0 1.74.2 2.77.66 3.33.26.32.21.8-.12 1.05-.32.26-.79.21-1.05-.12-.7-.85-.99-2.09-.99-4.25v-2c0-4.41 1.34-5.75 5.75-5.75h10c.37 0 .72.01 1.04.03 3.96.22 4.71 2.18 4.71 5.72v2c0 4.41-1.34 5.75-5.75 5.75\" />\n          <path d=\"M6 10.75c-.41 0-.75-.34-.75-.75V8c0-2.9.7-6.75 6.75-6.75 4.07 0 6.18 1.33 6.64 4.19.07.41-.21.79-.62.86a.747.747 0 0 1-.86-.62c-.25-1.52-1.04-2.93-5.16-2.93-4.36 0-5.25 2.1-5.25 5.25v2c0 .41-.34.75-.75.75\" />\n          <path d=\"M2 22.75c-.19 0-.38-.07-.53-.22a.754.754 0 0 1 0-1.06l20-20c.29-.29.77-.29 1.06 0s.29.77 0 1.06l-20 20c-.15.15-.34.22-.53.22\" />\n        </g>\n      </svg>\n    );\n  },\n);\n\nLockerOffIcon.displayName = \"LockerOffIcon\";\n"],"names":["React","jsx","cn","jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAIO,MAAM,gBAAgBA,iBAAM;AAAA,EACjC,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAAQ;AAChC,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,eAAY;AAAA,QACZ,WAAWC,GAAAA,GAAG,UAAU,SAAS;AAAA,QAChC,GAAG;AAAA,QAEJ,UAAAC,2BAAAA,KAAC,KAAA,EAAE,MAAK,gBACN,UAAA;AAAA,UAAAF,2BAAAA,IAAC,QAAA,EAAK,GAAE,2MAAA,CAA2M;AAAA,UACnNA,2BAAAA,IAAC,QAAA,EAAK,GAAE,qZAAA,CAAqZ;AAAA,UAC7ZA,2BAAAA,IAAC,QAAA,EAAK,GAAE,+MAAA,CAA+M;AAAA,UACvNA,2BAAAA,IAAC,QAAA,EAAK,GAAE,+HAAA,CAA+H;AAAA,QAAA,EAAA,CACzI;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,cAAc,cAAc;;"}
+{"version":3,"file":"LockerOffIcon.cjs","sources":["../../../../src/components/Icons/LockerOffIcon.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport type { IconProps } from \"./types\";\n\nexport const LockerOffIcon = React.forwardRef<SVGSVGElement, IconProps>(\n  ({ className, ...props }, ref) => {\n    return (\n      <svg\n        ref={ref}\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        aria-hidden=\"true\"\n        className={cn(\"size-6 text-foreground-default\", className)}\n        {...props}\n      >\n        <g fill=\"currentColor\">\n          <path d=\"M12 19.25a3.22 3.22 0 0 1-2.58-1.27.749.749 0 1 1 1.19-.91c.33.44.84.68 1.39.68.96 0 1.75-.79 1.75-1.75 0-.39-.12-.76-.36-1.06a.749.749 0 1 1 1.19-.91c.44.57.67 1.25.67 1.97 0 1.79-1.46 3.25-3.25 3.25\" />\n          <path d=\"M17 22.75H7q-.555 0-1.05-.03a.757.757 0 0 1-.71-.79c.02-.41.37-.71.79-.71.3.02.62.02.96.02h10c3.57 0 4.25-.68 4.25-4.25v-2c0-3.51-.74-4.08-3.29-4.23-.3-.02-.62-.02-.96-.02H7c-3.57 0-4.25.68-4.25 4.25v2c0 1.74.2 2.77.66 3.33.26.32.21.8-.12 1.05-.32.26-.79.21-1.05-.12-.7-.85-.99-2.09-.99-4.25v-2c0-4.41 1.34-5.75 5.75-5.75h10c.37 0 .72.01 1.04.03 3.96.22 4.71 2.18 4.71 5.72v2c0 4.41-1.34 5.75-5.75 5.75\" />\n          <path d=\"M6 10.75c-.41 0-.75-.34-.75-.75V8c0-2.9.7-6.75 6.75-6.75 4.07 0 6.18 1.33 6.64 4.19.07.41-.21.79-.62.86a.747.747 0 0 1-.86-.62c-.25-1.52-1.04-2.93-5.16-2.93-4.36 0-5.25 2.1-5.25 5.25v2c0 .41-.34.75-.75.75\" />\n          <path d=\"M2 22.75c-.19 0-.38-.07-.53-.22a.754.754 0 0 1 0-1.06l20-20c.29-.29.77-.29 1.06 0s.29.77 0 1.06l-20 20c-.15.15-.34.22-.53.22\" />\n        </g>\n      </svg>\n    );\n  },\n);\n\nLockerOffIcon.displayName = \"LockerOffIcon\";\n"],"names":["React","jsx","cn","jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAIO,MAAM,gBAAgBA,iBAAM;AAAA,EACjC,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAAQ;AAChC,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,eAAY;AAAA,QACZ,WAAWC,GAAAA,GAAG,kCAAkC,SAAS;AAAA,QACxD,GAAG;AAAA,QAEJ,UAAAC,2BAAAA,KAAC,KAAA,EAAE,MAAK,gBACN,UAAA;AAAA,UAAAF,2BAAAA,IAAC,QAAA,EAAK,GAAE,2MAAA,CAA2M;AAAA,UACnNA,2BAAAA,IAAC,QAAA,EAAK,GAAE,qZAAA,CAAqZ;AAAA,UAC7ZA,2BAAAA,IAAC,QAAA,EAAK,GAAE,+MAAA,CAA+M;AAAA,UACvNA,2BAAAA,IAAC,QAAA,EAAK,GAAE,+HAAA,CAA+H;AAAA,QAAA,EAAA,CACzI;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,cAAc,cAAc;;"}

package/dist/cjs/components/Icons/LockerOnIcon.cjs

@@ -30,7 +30,7 @@ const LockerOnIcon = React__namespace.forwardRef(
         viewBox: "0 0 24 24",
         fill: "none",
         "aria-hidden": "true",
-        className: cn.cn("size-6", className),
+        className: cn.cn("size-6 text-foreground-default", className),
         ...props,
         children: /* @__PURE__ */ jsxRuntime.jsxs("g", { fill: "currentColor", children: [
           /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 10.75c-.41 0-.75-.34-.75-.75V8c0-3.15-.89-5.25-5.25-5.25S6.75 4.85 6.75 8v2c0 .41-.34.75-.75.75s-.75-.34-.75-.75V8c0-2.9.7-6.75 6.75-6.75S18.75 5.1 18.75 8v2c0 .41-.34.75-.75.75M12 19.25c-1.79 0-3.25-1.46-3.25-3.25s1.46-3.25 3.25-3.25 3.25 1.46 3.25 3.25-1.46 3.25-3.25 3.25m0-5c-.96 0-1.75.79-1.75 1.75s.79 1.75 1.75 1.75 1.75-.79 1.75-1.75-.79-1.75-1.75-1.75" }),

package/dist/cjs/components/Icons/LockerOnIcon.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"LockerOnIcon.cjs","sources":["../../../../src/components/Icons/LockerOnIcon.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport type { IconProps } from \"./types\";\n\nexport const LockerOnIcon = React.forwardRef<SVGSVGElement, IconProps>(\n  ({ className, ...props }, ref) => {\n    return (\n      <svg\n        ref={ref}\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        aria-hidden=\"true\"\n        className={cn(\"size-6\", className)}\n        {...props}\n      >\n        <g fill=\"currentColor\">\n          <path d=\"M18 10.75c-.41 0-.75-.34-.75-.75V8c0-3.15-.89-5.25-5.25-5.25S6.75 4.85 6.75 8v2c0 .41-.34.75-.75.75s-.75-.34-.75-.75V8c0-2.9.7-6.75 6.75-6.75S18.75 5.1 18.75 8v2c0 .41-.34.75-.75.75M12 19.25c-1.79 0-3.25-1.46-3.25-3.25s1.46-3.25 3.25-3.25 3.25 1.46 3.25 3.25-1.46 3.25-3.25 3.25m0-5c-.96 0-1.75.79-1.75 1.75s.79 1.75 1.75 1.75 1.75-.79 1.75-1.75-.79-1.75-1.75-1.75\" />\n          <path d=\"M17 22.75H7c-4.41 0-5.75-1.34-5.75-5.75v-2c0-4.41 1.34-5.75 5.75-5.75h10c4.41 0 5.75 1.34 5.75 5.75v2c0 4.41-1.34 5.75-5.75 5.75m-10-12c-3.58 0-4.25.68-4.25 4.25v2c0 3.57.67 4.25 4.25 4.25h10c3.58 0 4.25-.68 4.25-4.25v-2c0-3.57-.67-4.25-4.25-4.25z\" />\n        </g>\n      </svg>\n    );\n  },\n);\n\nLockerOnIcon.displayName = \"LockerOnIcon\";\n"],"names":["React","jsx","cn","jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAIO,MAAM,eAAeA,iBAAM;AAAA,EAChC,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAAQ;AAChC,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,eAAY;AAAA,QACZ,WAAWC,GAAAA,GAAG,UAAU,SAAS;AAAA,QAChC,GAAG;AAAA,QAEJ,UAAAC,2BAAAA,KAAC,KAAA,EAAE,MAAK,gBACN,UAAA;AAAA,UAAAF,2BAAAA,IAAC,QAAA,EAAK,GAAE,+WAAA,CAA+W;AAAA,UACvXA,2BAAAA,IAAC,QAAA,EAAK,GAAE,0PAAA,CAA0P;AAAA,QAAA,EAAA,CACpQ;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,aAAa,cAAc;;"}
+{"version":3,"file":"LockerOnIcon.cjs","sources":["../../../../src/components/Icons/LockerOnIcon.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport type { IconProps } from \"./types\";\n\nexport const LockerOnIcon = React.forwardRef<SVGSVGElement, IconProps>(\n  ({ className, ...props }, ref) => {\n    return (\n      <svg\n        ref={ref}\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        aria-hidden=\"true\"\n        className={cn(\"size-6 text-foreground-default\", className)}\n        {...props}\n      >\n        <g fill=\"currentColor\">\n          <path d=\"M18 10.75c-.41 0-.75-.34-.75-.75V8c0-3.15-.89-5.25-5.25-5.25S6.75 4.85 6.75 8v2c0 .41-.34.75-.75.75s-.75-.34-.75-.75V8c0-2.9.7-6.75 6.75-6.75S18.75 5.1 18.75 8v2c0 .41-.34.75-.75.75M12 19.25c-1.79 0-3.25-1.46-3.25-3.25s1.46-3.25 3.25-3.25 3.25 1.46 3.25 3.25-1.46 3.25-3.25 3.25m0-5c-.96 0-1.75.79-1.75 1.75s.79 1.75 1.75 1.75 1.75-.79 1.75-1.75-.79-1.75-1.75-1.75\" />\n          <path d=\"M17 22.75H7c-4.41 0-5.75-1.34-5.75-5.75v-2c0-4.41 1.34-5.75 5.75-5.75h10c4.41 0 5.75 1.34 5.75 5.75v2c0 4.41-1.34 5.75-5.75 5.75m-10-12c-3.58 0-4.25.68-4.25 4.25v2c0 3.57.67 4.25 4.25 4.25h10c3.58 0 4.25-.68 4.25-4.25v-2c0-3.57-.67-4.25-4.25-4.25z\" />\n        </g>\n      </svg>\n    );\n  },\n);\n\nLockerOnIcon.displayName = \"LockerOnIcon\";\n"],"names":["React","jsx","cn","jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAIO,MAAM,eAAeA,iBAAM;AAAA,EAChC,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAAQ;AAChC,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,eAAY;AAAA,QACZ,WAAWC,GAAAA,GAAG,kCAAkC,SAAS;AAAA,QACxD,GAAG;AAAA,QAEJ,UAAAC,2BAAAA,KAAC,KAAA,EAAE,MAAK,gBACN,UAAA;AAAA,UAAAF,2BAAAA,IAAC,QAAA,EAAK,GAAE,+WAAA,CAA+W;AAAA,UACvXA,2BAAAA,IAAC,QAAA,EAAK,GAAE,0PAAA,CAA0P;AAAA,QAAA,EAAA,CACpQ;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,aAAa,cAAc;;"}

package/dist/cjs/components/Icons/PinIcon.cjs

@@ -30,7 +30,7 @@ const PinIcon = React__namespace.forwardRef(
         viewBox: "0 0 24 24",
         fill: "none",
         "aria-hidden": "true",
-        className: cn.cn("size-6", className),
+        className: cn.cn("size-4", className),
         ...props,
         children: /* @__PURE__ */ jsxRuntime.jsxs("g", { fill: "currentColor", children: [
           /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M13.73 22.75c-.49 0-.97-.19-1.32-.55L1.8 11.59c-.48-.47-.66-1.17-.48-1.82s.69-1.15 1.35-1.31l5.9-1.48c.54-.14 1.02-.47 1.33-.94l2.31-3.47c.5-.75 1.3-1.23 2.19-1.31s1.77.23 2.4.86l5.08 5.08a2.974 2.974 0 0 1-.46 4.59l-3.47 2.31c-.47.31-.8.78-.93 1.33l-1.47 5.9a1.88 1.88 0 0 1-1.81 1.42zm.95-20h-.15c-.44.04-.84.28-1.09.65l-2.31 3.47c-.52.78-1.3 1.33-2.21 1.56l-5.9 1.48c-.13.03-.23.13-.26.26-.04.13 0 .26.09.36l10.61 10.62c.09.09.23.13.36.09s.23-.14.26-.27l1.47-5.9c.23-.91.78-1.69 1.56-2.21l3.47-2.31c.37-.25.61-.64.65-1.09.04-.44-.11-.88-.43-1.19l-5.07-5.09c-.28-.28-.66-.43-1.05-.43" }),

package/dist/cjs/components/Icons/PinIcon.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"PinIcon.cjs","sources":["../../../../src/components/Icons/PinIcon.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport type { IconProps } from \"./types\";\n\nexport const PinIcon = React.forwardRef<SVGSVGElement, IconProps>(\n  ({ className, ...props }, ref) => {\n    return (\n      <svg\n        ref={ref}\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        aria-hidden=\"true\"\n        className={cn(\"size-6\", className)}\n        {...props}\n      >\n        <g fill=\"currentColor\">\n          <path d=\"M13.73 22.75c-.49 0-.97-.19-1.32-.55L1.8 11.59c-.48-.47-.66-1.17-.48-1.82s.69-1.15 1.35-1.31l5.9-1.48c.54-.14 1.02-.47 1.33-.94l2.31-3.47c.5-.75 1.3-1.23 2.19-1.31s1.77.23 2.4.86l5.08 5.08a2.974 2.974 0 0 1-.46 4.59l-3.47 2.31c-.47.31-.8.78-.93 1.33l-1.47 5.9a1.88 1.88 0 0 1-1.81 1.42zm.95-20h-.15c-.44.04-.84.28-1.09.65l-2.31 3.47c-.52.78-1.3 1.33-2.21 1.56l-5.9 1.48c-.13.03-.23.13-.26.26-.04.13 0 .26.09.36l10.61 10.62c.09.09.23.13.36.09s.23-.14.26-.27l1.47-5.9c.23-.91.78-1.69 1.56-2.21l3.47-2.31c.37-.25.61-.64.65-1.09.04-.44-.11-.88-.43-1.19l-5.07-5.09c-.28-.28-.66-.43-1.05-.43\" />\n          <path d=\"M2 22.75c-.19 0-.38-.07-.53-.22a.754.754 0 0 1 0-1.06l5.63-5.63c.29-.29.77-.29 1.06 0s.29.77 0 1.06l-5.63 5.63c-.15.15-.34.22-.53.22\" />\n        </g>\n      </svg>\n    );\n  },\n);\n\nPinIcon.displayName = \"PinIcon\";\n"],"names":["React","jsx","cn","jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAIO,MAAM,UAAUA,iBAAM;AAAA,EAC3B,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAAQ;AAChC,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,eAAY;AAAA,QACZ,WAAWC,GAAAA,GAAG,UAAU,SAAS;AAAA,QAChC,GAAG;AAAA,QAEJ,UAAAC,2BAAAA,KAAC,KAAA,EAAE,MAAK,gBACN,UAAA;AAAA,UAAAF,2BAAAA,IAAC,QAAA,EAAK,GAAE,4kBAAA,CAA4kB;AAAA,UACplBA,2BAAAA,IAAC,QAAA,EAAK,GAAE,uIAAA,CAAuI;AAAA,QAAA,EAAA,CACjJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,QAAQ,cAAc;;"}
+{"version":3,"file":"PinIcon.cjs","sources":["../../../../src/components/Icons/PinIcon.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport type { IconProps } from \"./types\";\n\nexport const PinIcon = React.forwardRef<SVGSVGElement, IconProps>(\n  ({ className, ...props }, ref) => {\n    return (\n      <svg\n        ref={ref}\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        aria-hidden=\"true\"\n        className={cn(\"size-4\", className)}\n        {...props}\n      >\n        <g fill=\"currentColor\">\n          <path d=\"M13.73 22.75c-.49 0-.97-.19-1.32-.55L1.8 11.59c-.48-.47-.66-1.17-.48-1.82s.69-1.15 1.35-1.31l5.9-1.48c.54-.14 1.02-.47 1.33-.94l2.31-3.47c.5-.75 1.3-1.23 2.19-1.31s1.77.23 2.4.86l5.08 5.08a2.974 2.974 0 0 1-.46 4.59l-3.47 2.31c-.47.31-.8.78-.93 1.33l-1.47 5.9a1.88 1.88 0 0 1-1.81 1.42zm.95-20h-.15c-.44.04-.84.28-1.09.65l-2.31 3.47c-.52.78-1.3 1.33-2.21 1.56l-5.9 1.48c-.13.03-.23.13-.26.26-.04.13 0 .26.09.36l10.61 10.62c.09.09.23.13.36.09s.23-.14.26-.27l1.47-5.9c.23-.91.78-1.69 1.56-2.21l3.47-2.31c.37-.25.61-.64.65-1.09.04-.44-.11-.88-.43-1.19l-5.07-5.09c-.28-.28-.66-.43-1.05-.43\" />\n          <path d=\"M2 22.75c-.19 0-.38-.07-.53-.22a.754.754 0 0 1 0-1.06l5.63-5.63c.29-.29.77-.29 1.06 0s.29.77 0 1.06l-5.63 5.63c-.15.15-.34.22-.53.22\" />\n        </g>\n      </svg>\n    );\n  },\n);\n\nPinIcon.displayName = \"PinIcon\";\n"],"names":["React","jsx","cn","jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAIO,MAAM,UAAUA,iBAAM;AAAA,EAC3B,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAAQ;AAChC,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,eAAY;AAAA,QACZ,WAAWC,GAAAA,GAAG,UAAU,SAAS;AAAA,QAChC,GAAG;AAAA,QAEJ,UAAAC,2BAAAA,KAAC,KAAA,EAAE,MAAK,gBACN,UAAA;AAAA,UAAAF,2BAAAA,IAAC,QAAA,EAAK,GAAE,4kBAAA,CAA4kB;AAAA,UACplBA,2BAAAA,IAAC,QAAA,EAAK,GAAE,uIAAA,CAAuI;AAAA,QAAA,EAAA,CACjJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,QAAQ,cAAc;;"}

package/dist/cjs/components/MobileStepper/MobileStepper.cjs

@@ -0,0 +1,136 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const cn = require("../../utils/cn.cjs");
+const ProgressBar = require("../ProgressBar/ProgressBar.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+function defaultFormatText(activeStep, totalSteps) {
+  return `${activeStep} / ${totalSteps}`;
+}
+function defaultFormatStepLabel(activeStep, totalSteps) {
+  return `Step ${activeStep} of ${totalSteps}`;
+}
+const MobileStepper = React__namespace.forwardRef(
+  ({
+    steps,
+    activeStep,
+    variant = "dots",
+    backButton,
+    nextButton,
+    position = "static",
+    ariaLabel = "Progress",
+    stepProgressLabel = "Step progress",
+    formatStepLabel = defaultFormatStepLabel,
+    formatText = defaultFormatText,
+    className,
+    ...props
+  }, ref) => {
+    const safeSteps = Math.max(1, steps);
+    const clampedStep = Math.min(safeSteps - 1, Math.max(0, activeStep));
+    const progressValue = safeSteps > 1 ? clampedStep / (safeSteps - 1) * 100 : 100;
+    const stepText = formatStepLabel(clampedStep + 1, safeSteps);
+    const hasButtons = backButton != null || nextButton != null;
+    const sharedClassName = cn.cn(
+      "flex w-full items-center justify-between gap-2 bg-background-surface px-2 py-2",
+      position === "bottom" && "fixed inset-x-0 bottom-0 z-50 pb-[env(safe-area-inset-bottom)]",
+      className
+    );
+    const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      backButton != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0", children: backButton }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 items-center justify-center overflow-hidden", children: [
+        variant === "dots" && /* @__PURE__ */ jsxRuntime.jsxs("output", { "aria-live": "polite", className: "flex items-center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              role: "progressbar",
+              "aria-label": stepProgressLabel,
+              "aria-valuenow": clampedStep + 1,
+              "aria-valuemin": 1,
+              "aria-valuemax": safeSteps,
+              "aria-valuetext": stepText,
+              className: "flex flex-wrap items-center gap-1",
+              children: Array.from({ length: safeSteps }, (_, i) => {
+                const state = i < clampedStep ? "completed" : i === clampedStep ? "active" : "incomplete";
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    "data-state": state,
+                    className: cn.cn(
+                      "block size-2 shrink-0 rounded-full motion-safe:transition-colors motion-safe:duration-150",
+                      state === "active" ? "bg-foreground-default" : "bg-neutral-200"
+                    ),
+                    "aria-hidden": "true"
+                  },
+                  `step-${i}`
+                );
+              })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: stepText })
+        ] }),
+        variant === "progress" && /* @__PURE__ */ jsxRuntime.jsx("output", { "aria-live": "polite", className: "w-full max-w-md px-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+          ProgressBar.ProgressBar,
+          {
+            value: progressValue,
+            size: "small",
+            variant: "generic",
+            ariaLabel: stepProgressLabel,
+            ariaValueText: stepText
+          }
+        ) }),
+        variant === "text" && /* @__PURE__ */ jsxRuntime.jsx(
+          "output",
+          {
+            "aria-live": "polite",
+            className: "typography-regular-body-sm truncate text-foreground-secondary",
+            children: formatText(clampedStep + 1, safeSteps)
+          }
+        )
+      ] }),
+      nextButton != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0", children: nextButton })
+    ] });
+    if (hasButtons) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "nav",
+        {
+          ref,
+          "aria-label": ariaLabel,
+          className: sharedClassName,
+          ...props,
+          children: content
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "fieldset",
+      {
+        ref,
+        "aria-label": ariaLabel,
+        className: cn.cn(sharedClassName, "m-0 border-0 p-0"),
+        ...props,
+        children: content
+      }
+    );
+  }
+);
+MobileStepper.displayName = "MobileStepper";
+exports.MobileStepper = MobileStepper;
+//# sourceMappingURL=MobileStepper.cjs.map

package/dist/cjs/components/MobileStepper/MobileStepper.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MobileStepper.cjs","sources":["../../../../src/components/MobileStepper/MobileStepper.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { ProgressBar } from \"../ProgressBar/ProgressBar\";\n\n/** Display variant for the step indicator. */\nexport type MobileStepperVariant = \"dots\" | \"progress\" | \"text\";\n\n/** Positioning mode — `\"static\"` flows normally, `\"bottom\"` fixes to the viewport bottom. */\nexport type MobileStepperPosition = \"static\" | \"bottom\";\n\nexport interface MobileStepperProps extends React.HTMLAttributes<HTMLElement> {\n  /** Total number of steps. */\n  steps: number;\n  /** Zero-indexed active step, clamped to `0` – `steps - 1`. */\n  activeStep: number;\n  /** Step indicator style. @default \"dots\" */\n  variant?: MobileStepperVariant;\n  /** Content rendered on the left (typically a \"Back\" button). */\n  backButton?: React.ReactNode;\n  /** Content rendered on the right (typically a \"Next\" button). */\n  nextButton?: React.ReactNode;\n  /** Positioning mode. @default \"static\" */\n  position?: MobileStepperPosition;\n  /** Accessible label for the stepper region. @default \"Progress\" */\n  ariaLabel?: string;\n  /** Accessible label for the step progress indicator (dots/progress bar). @default \"Step progress\" */\n  stepProgressLabel?: string;\n  /**\n   * Formatter for the `aria-valuetext` on dots and progress variants.\n   * Receives `(activeStep, totalSteps)` where `activeStep` is 1-indexed.\n   * @default (active, total) => \\`Step ${active} of ${total}\\`\n   */\n  formatStepLabel?: (activeStep: number, totalSteps: number) => string;\n  /**\n   * Custom formatter for the text variant.\n   * Receives `(activeStep, steps)` where `activeStep` is 1-indexed for display.\n   * Only used when `variant` is `\"text\"`.\n   * @default (active, total) => \\`${active} / ${total}\\`\n   */\n  formatText?: (activeStep: number, totalSteps: number) => string;\n}\n\nfunction defaultFormatText(activeStep: number, totalSteps: number): string {\n  return `${activeStep} / ${totalSteps}`;\n}\n\nfunction defaultFormatStepLabel(activeStep: number, totalSteps: number): string {\n  return `Step ${activeStep} of ${totalSteps}`;\n}\n\n/**\n * A compact, mobile-friendly stepper that shows progress through a sequence of\n * steps. Supports three indicator variants: dots, a progress bar, or text.\n *\n * @example\n * ```tsx\n * <MobileStepper\n *   steps={6}\n *   activeStep={2}\n *   variant=\"dots\"\n *   backButton={<Button size=\"sm\" onClick={handleBack}>Back</Button>}\n *   nextButton={<Button size=\"sm\" onClick={handleNext}>Next</Button>}\n * />\n * ```\n */\nexport const MobileStepper = React.forwardRef<HTMLElement, MobileStepperProps>(\n  (\n    {\n      steps,\n      activeStep,\n      variant = \"dots\",\n      backButton,\n      nextButton,\n      position = \"static\",\n      ariaLabel = \"Progress\",\n      stepProgressLabel = \"Step progress\",\n      formatStepLabel = defaultFormatStepLabel,\n      formatText = defaultFormatText,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const safeSteps = Math.max(1, steps);\n    const clampedStep = Math.min(safeSteps - 1, Math.max(0, activeStep));\n    const progressValue = safeSteps > 1 ? (clampedStep / (safeSteps - 1)) * 100 : 100;\n    const stepText = formatStepLabel(clampedStep + 1, safeSteps);\n\n    const hasButtons = backButton != null || nextButton != null;\n\n    const sharedClassName = cn(\n      \"flex w-full items-center justify-between gap-2 bg-background-surface px-2 py-2\",\n      position === \"bottom\" && \"fixed inset-x-0 bottom-0 z-50 pb-[env(safe-area-inset-bottom)]\",\n      className,\n    );\n\n    const content = (\n      <>\n        {backButton != null && <div className=\"flex shrink-0\">{backButton}</div>}\n\n        <div className=\"flex min-w-0 flex-1 items-center justify-center overflow-hidden\">\n          {variant === \"dots\" && (\n            <output aria-live=\"polite\" className=\"flex items-center\">\n              <div\n                role=\"progressbar\"\n                aria-label={stepProgressLabel}\n                aria-valuenow={clampedStep + 1}\n                aria-valuemin={1}\n                aria-valuemax={safeSteps}\n                aria-valuetext={stepText}\n                className=\"flex flex-wrap items-center gap-1\"\n              >\n                {Array.from({ length: safeSteps }, (_, i) => {\n                  const state =\n                    i < clampedStep ? \"completed\" : i === clampedStep ? \"active\" : \"incomplete\";\n                  return (\n                    <span\n                      // biome-ignore lint/suspicious/noArrayIndexKey: static dot list never reorders\n                      key={`step-${i}`}\n                      data-state={state}\n                      className={cn(\n                        \"block size-2 shrink-0 rounded-full motion-safe:transition-colors motion-safe:duration-150\",\n                        state === \"active\" ? \"bg-foreground-default\" : \"bg-neutral-200\",\n                      )}\n                      aria-hidden=\"true\"\n                    />\n                  );\n                })}\n              </div>\n              <span className=\"sr-only\">{stepText}</span>\n            </output>\n          )}\n\n          {variant === \"progress\" && (\n            <output aria-live=\"polite\" className=\"w-full max-w-md px-2\">\n              <ProgressBar\n                value={progressValue}\n                size=\"small\"\n                variant=\"generic\"\n                ariaLabel={stepProgressLabel}\n                ariaValueText={stepText}\n              />\n            </output>\n          )}\n\n          {variant === \"text\" && (\n            <output\n              aria-live=\"polite\"\n              className=\"typography-regular-body-sm truncate text-foreground-secondary\"\n            >\n              {formatText(clampedStep + 1, safeSteps)}\n            </output>\n          )}\n        </div>\n\n        {nextButton != null && <div className=\"flex shrink-0\">{nextButton}</div>}\n      </>\n    );\n\n    if (hasButtons) {\n      return (\n        <nav\n          ref={ref as React.Ref<HTMLElement>}\n          aria-label={ariaLabel}\n          className={sharedClassName}\n          {...props}\n        >\n          {content}\n        </nav>\n      );\n    }\n\n    return (\n      <fieldset\n        ref={ref as React.Ref<HTMLFieldSetElement>}\n        aria-label={ariaLabel}\n        className={cn(sharedClassName, \"m-0 border-0 p-0\")}\n        {...props}\n      >\n        {content}\n      </fieldset>\n    );\n  },\n);\n\nMobileStepper.displayName = \"MobileStepper\";\n"],"names":["React","cn","jsxs","Fragment","jsx","ProgressBar"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA0CA,SAAS,kBAAkB,YAAoB,YAA4B;AACzE,SAAO,GAAG,UAAU,MAAM,UAAU;AACtC;AAEA,SAAS,uBAAuB,YAAoB,YAA4B;AAC9E,SAAO,QAAQ,UAAU,OAAO,UAAU;AAC5C;AAiBO,MAAM,gBAAgBA,iBAAM;AAAA,EACjC,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,oBAAoB;AAAA,IACpB,kBAAkB;AAAA,IAClB,aAAa;AAAA,IACb;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,YAAY,KAAK,IAAI,GAAG,KAAK;AACnC,UAAM,cAAc,KAAK,IAAI,YAAY,GAAG,KAAK,IAAI,GAAG,UAAU,CAAC;AACnE,UAAM,gBAAgB,YAAY,IAAK,eAAe,YAAY,KAAM,MAAM;AAC9E,UAAM,WAAW,gBAAgB,cAAc,GAAG,SAAS;AAE3D,UAAM,aAAa,cAAc,QAAQ,cAAc;AAEvD,UAAM,kBAAkBC,GAAAA;AAAAA,MACtB;AAAA,MACA,aAAa,YAAY;AAAA,MACzB;AAAA,IAAA;AAGF,UAAM,UACJC,2BAAAA,KAAAC,WAAAA,UAAA,EACG,UAAA;AAAA,MAAA,cAAc,QAAQC,2BAAAA,IAAC,OAAA,EAAI,WAAU,iBAAiB,UAAA,YAAW;AAAA,MAElEF,2BAAAA,KAAC,OAAA,EAAI,WAAU,mEACZ,UAAA;AAAA,QAAA,YAAY,UACXA,2BAAAA,KAAC,UAAA,EAAO,aAAU,UAAS,WAAU,qBACnC,UAAA;AAAA,UAAAE,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,cAAY;AAAA,cACZ,iBAAe,cAAc;AAAA,cAC7B,iBAAe;AAAA,cACf,iBAAe;AAAA,cACf,kBAAgB;AAAA,cAChB,WAAU;AAAA,cAET,UAAA,MAAM,KAAK,EAAE,QAAQ,aAAa,CAAC,GAAG,MAAM;AAC3C,sBAAM,QACJ,IAAI,cAAc,cAAc,MAAM,cAAc,WAAW;AACjE,uBACEA,2BAAAA;AAAAA,kBAAC;AAAA,kBAAA;AAAA,oBAGC,cAAY;AAAA,oBACZ,WAAWH,GAAAA;AAAAA,sBACT;AAAA,sBACA,UAAU,WAAW,0BAA0B;AAAA,oBAAA;AAAA,oBAEjD,eAAY;AAAA,kBAAA;AAAA,kBANP,QAAQ,CAAC;AAAA,gBAAA;AAAA,cASpB,CAAC;AAAA,YAAA;AAAA,UAAA;AAAA,UAEHG,2BAAAA,IAAC,QAAA,EAAK,WAAU,WAAW,UAAA,SAAA,CAAS;AAAA,QAAA,GACtC;AAAA,QAGD,YAAY,cACXA,2BAAAA,IAAC,YAAO,aAAU,UAAS,WAAU,wBACnC,UAAAA,2BAAAA;AAAAA,UAACC,YAAAA;AAAAA,UAAA;AAAA,YACC,OAAO;AAAA,YACP,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,WAAW;AAAA,YACX,eAAe;AAAA,UAAA;AAAA,QAAA,GAEnB;AAAA,QAGD,YAAY,UACXD,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,aAAU;AAAA,YACV,WAAU;AAAA,YAET,UAAA,WAAW,cAAc,GAAG,SAAS;AAAA,UAAA;AAAA,QAAA;AAAA,MACxC,GAEJ;AAAA,MAEC,cAAc,QAAQA,2BAAAA,IAAC,OAAA,EAAI,WAAU,iBAAiB,UAAA,WAAA,CAAW;AAAA,IAAA,GACpE;AAGF,QAAI,YAAY;AACd,aACEA,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA,cAAY;AAAA,UACZ,WAAW;AAAA,UACV,GAAG;AAAA,UAEH,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAGP;AAEA,WACEA,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,cAAY;AAAA,QACZ,WAAWH,GAAAA,GAAG,iBAAiB,kBAAkB;AAAA,QAChD,GAAG;AAAA,QAEH,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,cAAc,cAAc;;"}

package/dist/cjs/components/Pagination/Pagination.cjs

@@ -66,7 +66,7 @@ const Pagination = React__namespace.forwardRef(
         ref,
         "aria-label": ariaLabel,
         className: cn.cn(
-          "inline-flex items-center",
+          "inline-flex items-center pb-4",
           variant === "default" && "gap-3",
           variant === "dots" && "gap-4",
           className