@open-mercato/ui 0.6.1-develop.3256.1.fe3dec2464 → 0.6.1-develop.3260.1.dc719cac84

package/dist/primitives/inline-input.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/primitives/inline-input.tsx"],
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport { cn } from '@open-mercato/shared/lib/utils'\nimport { Input, type InputProps } from './input'\n\nexport type InlineInputProps = Omit<InputProps, 'size'> & {\n  /**\n   * Trigger size. `sm` (h-8) is the default \u2014 inline editors are typically\n   * embedded inside dense rows. Pass `'default'` (h-9) when the editor sits\n   * alongside other h-9 controls.\n   */\n  size?: 'sm' | 'default'\n  /**\n   * Render a subtle input border on hover so the affordance is discoverable.\n   * Default `true`. Set to `false` for editors that should remain visually\n   * invisible until focused (e.g. plain text cells inside read-only-looking\n   * card layouts).\n   */\n  showBorderOnHover?: boolean\n}\n\n/**\n * Borderless variant of `Input`. At rest the field looks like plain text\n * (no border, no background, no shadow). Hover reveals a subtle border via\n * `showBorderOnHover` (default `true`); focus always reveals the standard\n * `border-foreground` + focus shadow inherited from the underlying `Input`\n * wrapper for accessibility.\n *\n * Forwards every `Input` prop (placeholder, value, onChange, type, etc.).\n * Consumers wire `onBlur` for the \"save on blur\" pattern typical of inline\n * editors.\n */\nexport const InlineInput = React.forwardRef<HTMLInputElement, InlineInputProps>(\n  (\n    { className, inputClassName, size = 'sm', showBorderOnHover = true, ...rest },\n    ref,\n  ) => {\n    return (\n      <Input\n        ref={ref}\n        size={size}\n        className={cn(\n          'border-transparent bg-transparent shadow-none',\n          showBorderOnHover ? 'hover:border-input hover:bg-muted/40' : 'hover:bg-transparent',\n          className,\n        )}\n        inputClassName={inputClassName}\n        data-slot=\"inline-input\"\n        {...rest}\n      />\n    )\n  },\n)\nInlineInput.displayName = 'InlineInput'\n"],
+  "mappings": ";AAuCM;AArCN,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB,SAAS,aAA8B;AA6BhC,MAAM,cAAc,MAAM;AAAA,EAC/B,CACE,EAAE,WAAW,gBAAgB,OAAO,MAAM,oBAAoB,MAAM,GAAG,KAAK,GAC5E,QACG;AACH,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA,oBAAoB,yCAAyC;AAAA,UAC7D;AAAA,QACF;AAAA,QACA;AAAA,QACA,aAAU;AAAA,QACT,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AACA,YAAY,cAAc;",
+  "names": []
+}

package/dist/primitives/inline-select.js

@@ -0,0 +1,41 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "@open-mercato/shared/lib/utils";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue
+} from "./select.js";
+const InlineSelectTrigger = React.forwardRef(({ className, size = "sm", showBorderOnHover = true, children, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectTrigger,
+  {
+    ref,
+    size,
+    className: cn(
+      "border-transparent bg-transparent shadow-none",
+      showBorderOnHover ? "hover:border-input hover:bg-muted/40" : "hover:bg-transparent",
+      className
+    ),
+    "data-slot": "inline-select-trigger",
+    ...props,
+    children
+  }
+));
+InlineSelectTrigger.displayName = "InlineSelectTrigger";
+export {
+  InlineSelectTrigger,
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectSeparator,
+  SelectValue
+};
+//# sourceMappingURL=inline-select.js.map

package/dist/primitives/inline-select.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/primitives/inline-select.tsx"],
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport { cn } from '@open-mercato/shared/lib/utils'\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n  type SelectTriggerProps,\n} from './select'\n\nexport type InlineSelectTriggerProps = Omit<SelectTriggerProps, 'size'> & {\n  /**\n   * Trigger size. `sm` (h-8) is the default \u2014 inline editors are typically\n   * embedded inside dense rows. Pass `'default'` (h-9) when the editor sits\n   * alongside other h-9 controls.\n   */\n  size?: 'sm' | 'default'\n  /**\n   * Render a subtle trigger border on hover so the affordance is\n   * discoverable. Default `true`. Set to `false` for editors that should\n   * remain visually invisible until focused.\n   */\n  showBorderOnHover?: boolean\n}\n\n/**\n * Borderless variant of `SelectTrigger` \u2014 the select-typed counterpart to\n * `InlineInput`. At rest the trigger looks like plain text (transparent\n * border, transparent background, no shadow); hover reveals a subtle\n * border via `showBorderOnHover` (default `true`), and focus inherits the\n * standard `border-foreground` + focus shadow from the underlying\n * `SelectTrigger` for keyboard accessibility.\n *\n * Composes with the regular `Select` root + `SelectContent` /\n * `SelectItem` \u2014 `inline-select.tsx` re-exports the rest of the `Select`\n * API so consumers can import the entire composition from one path.\n */\nexport const InlineSelectTrigger = React.forwardRef<\n  React.ElementRef<typeof SelectTrigger>,\n  InlineSelectTriggerProps\n>(({ className, size = 'sm', showBorderOnHover = true, children, ...props }, ref) => (\n  <SelectTrigger\n    ref={ref}\n    size={size}\n    className={cn(\n      'border-transparent bg-transparent shadow-none',\n      showBorderOnHover ? 'hover:border-input hover:bg-muted/40' : 'hover:bg-transparent',\n      className,\n    )}\n    data-slot=\"inline-select-trigger\"\n    {...props}\n  >\n    {children}\n  </SelectTrigger>\n))\nInlineSelectTrigger.displayName = 'InlineSelectTrigger'\n\n// Re-export the rest of the Select API so consumers can import the entire\n// inline-select composition from one path.\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectSeparator,\n  SelectValue,\n}\n"],
+  "mappings": ";AA+CE;AA7CF,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AA6BA,MAAM,sBAAsB,MAAM,WAGvC,CAAC,EAAE,WAAW,OAAO,MAAM,oBAAoB,MAAM,UAAU,GAAG,MAAM,GAAG,QAC3E;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA,oBAAoB,yCAAyC;AAAA,MAC7D;AAAA,IACF;AAAA,IACA,aAAU;AAAA,IACT,GAAG;AAAA,IAEH;AAAA;AACH,CACD;AACD,oBAAoB,cAAc;",
+  "names": []
+}

package/dist/primitives/notification-stack.js

@@ -0,0 +1,116 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Notification } from "./notification.js";
+const NotificationContext = React.createContext(null);
+function generateId() {
+  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+    return crypto.randomUUID();
+  }
+  return `notif-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+}
+function NotificationProvider({ children, maxVisible = 5 }) {
+  const [notifications, setNotifications] = React.useState([]);
+  const timersRef = React.useRef(/* @__PURE__ */ new Map());
+  const clearTimer = React.useCallback((id) => {
+    const t = timersRef.current.get(id);
+    if (t) {
+      clearTimeout(t);
+      timersRef.current.delete(id);
+    }
+  }, []);
+  const dismiss = React.useCallback(
+    (id) => {
+      clearTimer(id);
+      setNotifications((prev) => prev.filter((n) => n.id !== id));
+    },
+    [clearTimer]
+  );
+  const notify = React.useCallback(
+    (options) => {
+      const id = generateId();
+      setNotifications((prev) => {
+        const next = [...prev, { ...options, id }];
+        return next.length > maxVisible ? next.slice(next.length - maxVisible) : next;
+      });
+      if (typeof options.autoDismissMs === "number" && options.autoDismissMs > 0) {
+        const t = setTimeout(() => dismiss(id), options.autoDismissMs);
+        timersRef.current.set(id, t);
+      }
+      return id;
+    },
+    [dismiss, maxVisible]
+  );
+  const dismissAll = React.useCallback(() => {
+    timersRef.current.forEach((t) => clearTimeout(t));
+    timersRef.current.clear();
+    setNotifications([]);
+  }, []);
+  React.useEffect(() => {
+    return () => {
+      timersRef.current.forEach((t) => clearTimeout(t));
+      timersRef.current.clear();
+    };
+  }, []);
+  const value = React.useMemo(
+    () => ({ notifications, notify, dismiss, dismissAll }),
+    [notifications, notify, dismiss, dismissAll]
+  );
+  return /* @__PURE__ */ jsx(NotificationContext.Provider, { value, children });
+}
+function useNotification() {
+  const ctx = React.useContext(NotificationContext);
+  if (!ctx) {
+    throw new Error("useNotification must be used within a NotificationProvider");
+  }
+  return ctx;
+}
+const placementClasses = {
+  "top-right": "top-4 right-4 items-end",
+  "top-left": "top-4 left-4 items-start",
+  "bottom-right": "bottom-4 right-4 items-end",
+  "bottom-left": "bottom-4 left-4 items-start",
+  "top-center": "top-4 left-1/2 -translate-x-1/2 items-center",
+  "bottom-center": "bottom-4 left-1/2 -translate-x-1/2 items-center"
+};
+function NotificationStack({
+  placement = "top-right",
+  maxWidth = 380,
+  className
+}) {
+  const { notifications, dismiss } = useNotification();
+  if (notifications.length === 0) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: [
+        "pointer-events-none fixed z-toast flex flex-col gap-2",
+        placementClasses[placement],
+        className
+      ].filter(Boolean).join(" "),
+      "data-slot": "notification-stack",
+      "data-placement": placement,
+      children: notifications.map((entry) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "pointer-events-auto w-full",
+          style: { maxWidth },
+          children: /* @__PURE__ */ jsx(
+            Notification,
+            {
+              ...entry,
+              onDismiss: () => dismiss(entry.id)
+            }
+          )
+        },
+        entry.id
+      ))
+    }
+  );
+}
+export {
+  NotificationProvider,
+  NotificationStack,
+  useNotification
+};
+//# sourceMappingURL=notification-stack.js.map

package/dist/primitives/notification-stack.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/primitives/notification-stack.tsx"],
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport { Notification, type NotificationProps } from './notification'\n\nexport type NotificationStackPlacement =\n  | 'top-right'\n  | 'top-left'\n  | 'bottom-right'\n  | 'bottom-left'\n  | 'top-center'\n  | 'bottom-center'\n\nexport type NotifyOptions = Omit<NotificationProps, 'id' | 'onDismiss'> & {\n  /** Auto-dismiss the notification after this many milliseconds. Omit for manual-only dismiss (Notification default). */\n  autoDismissMs?: number\n}\n\nexport type NotificationEntry = NotifyOptions & {\n  id: string\n}\n\ntype NotificationContextValue = {\n  notifications: NotificationEntry[]\n  notify: (options: NotifyOptions) => string\n  dismiss: (id: string) => void\n  dismissAll: () => void\n}\n\nconst NotificationContext = React.createContext<NotificationContextValue | null>(null)\n\nfunction generateId(): string {\n  if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {\n    return crypto.randomUUID()\n  }\n  return `notif-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`\n}\n\nexport type NotificationProviderProps = {\n  children: React.ReactNode\n  /**\n   * Maximum number of notifications visible at once. Older entries beyond\n   * this cap are removed FIFO. Default `5`.\n   */\n  maxVisible?: number\n}\n\n/**\n * Mount once near the app root (typically inside `AppShell` next to\n * `FlashMessages`). Provides the `useNotification()` hook to children\n * and renders the `NotificationStack` in a fixed-position portal-style\n * wrapper.\n *\n * Stack placement, gap, and per-entry behavior are consumer choice\n * via `NotificationStack` \u2014 `NotificationProvider` itself does not\n * render the visual list, only the context.\n */\nexport function NotificationProvider({ children, maxVisible = 5 }: NotificationProviderProps) {\n  const [notifications, setNotifications] = React.useState<NotificationEntry[]>([])\n  const timersRef = React.useRef<Map<string, ReturnType<typeof setTimeout>>>(new Map())\n\n  const clearTimer = React.useCallback((id: string) => {\n    const t = timersRef.current.get(id)\n    if (t) {\n      clearTimeout(t)\n      timersRef.current.delete(id)\n    }\n  }, [])\n\n  const dismiss = React.useCallback(\n    (id: string) => {\n      clearTimer(id)\n      setNotifications((prev) => prev.filter((n) => n.id !== id))\n    },\n    [clearTimer],\n  )\n\n  const notify = React.useCallback(\n    (options: NotifyOptions) => {\n      const id = generateId()\n      setNotifications((prev) => {\n        const next = [...prev, { ...options, id }]\n        // FIFO trim when exceeding the visible cap.\n        return next.length > maxVisible ? next.slice(next.length - maxVisible) : next\n      })\n      if (typeof options.autoDismissMs === 'number' && options.autoDismissMs > 0) {\n        const t = setTimeout(() => dismiss(id), options.autoDismissMs)\n        timersRef.current.set(id, t)\n      }\n      return id\n    },\n    [dismiss, maxVisible],\n  )\n\n  const dismissAll = React.useCallback(() => {\n    timersRef.current.forEach((t) => clearTimeout(t))\n    timersRef.current.clear()\n    setNotifications([])\n  }, [])\n\n  React.useEffect(() => {\n    return () => {\n      timersRef.current.forEach((t) => clearTimeout(t))\n      timersRef.current.clear()\n    }\n  }, [])\n\n  const value = React.useMemo(\n    () => ({ notifications, notify, dismiss, dismissAll }),\n    [notifications, notify, dismiss, dismissAll],\n  )\n\n  return <NotificationContext.Provider value={value}>{children}</NotificationContext.Provider>\n}\n\nexport function useNotification(): NotificationContextValue {\n  const ctx = React.useContext(NotificationContext)\n  if (!ctx) {\n    throw new Error('useNotification must be used within a NotificationProvider')\n  }\n  return ctx\n}\n\nconst placementClasses: Record<NotificationStackPlacement, string> = {\n  'top-right': 'top-4 right-4 items-end',\n  'top-left': 'top-4 left-4 items-start',\n  'bottom-right': 'bottom-4 right-4 items-end',\n  'bottom-left': 'bottom-4 left-4 items-start',\n  'top-center': 'top-4 left-1/2 -translate-x-1/2 items-center',\n  'bottom-center': 'bottom-4 left-1/2 -translate-x-1/2 items-center',\n}\n\nexport type NotificationStackProps = {\n  /** Where the stack floats on the viewport. Default `'top-right'`. */\n  placement?: NotificationStackPlacement\n  /** Max width per notification card. Default `380` (matches FlashMessages toast). */\n  maxWidth?: number\n  className?: string\n}\n\n/**\n * Renders the active `NotificationProvider` queue as a fixed-position\n * stack in one of six placements. Mount once next to\n * `NotificationProvider`, typically inside `AppShell` so notifications\n * float above every backend page.\n *\n * Each entry uses the `Notification` primitive \u2014 its `onDismiss`\n * automatically calls `dismiss(id)` from the provider so the user\n * clicking X removes the entry from the queue.\n */\nexport function NotificationStack({\n  placement = 'top-right',\n  maxWidth = 380,\n  className,\n}: NotificationStackProps) {\n  const { notifications, dismiss } = useNotification()\n  if (notifications.length === 0) return null\n\n  return (\n    <div\n      className={[\n        'pointer-events-none fixed z-toast flex flex-col gap-2',\n        placementClasses[placement],\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      data-slot=\"notification-stack\"\n      data-placement={placement}\n    >\n      {notifications.map((entry) => (\n        <div\n          key={entry.id}\n          className=\"pointer-events-auto w-full\"\n          style={{ maxWidth }}\n        >\n          <Notification\n            {...entry}\n            onDismiss={() => dismiss(entry.id)}\n          />\n        </div>\n      ))}\n    </div>\n  )\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/primitives/notification.js

@@ -0,0 +1,62 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "@open-mercato/shared/lib/utils";
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle
+} from "./alert.js";
+const Notification = React.forwardRef(
+  ({
+    status,
+    style,
+    avatar,
+    title,
+    description,
+    timestamp,
+    actions,
+    dismissible = true,
+    onDismiss,
+    dismissAriaLabel,
+    className,
+    id
+  }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      Alert,
+      {
+        ref,
+        status,
+        style,
+        size: "default",
+        icon: avatar,
+        dismissible,
+        onDismiss,
+        dismissAriaLabel,
+        className,
+        "data-slot": "notification",
+        "data-notification-id": id,
+        children: [
+          (title || timestamp) && /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+            title ? /* @__PURE__ */ jsx(AlertTitle, { className: "mb-0 flex-1 min-w-0", children: title }) : /* @__PURE__ */ jsx("span", { className: "flex-1" }),
+            timestamp ? /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs leading-5 opacity-60", "data-slot": "notification-timestamp", children: timestamp }) : null
+          ] }),
+          description ? /* @__PURE__ */ jsx(AlertDescription, { className: cn("opacity-72", title && "mt-1"), "data-slot": "notification-description", children: description }) : null,
+          actions ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn("flex flex-wrap items-center gap-2", (title || description) && "mt-2.5"),
+              "data-slot": "notification-actions",
+              children: actions
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+Notification.displayName = "Notification";
+export {
+  Notification
+};
+//# sourceMappingURL=notification.js.map

package/dist/primitives/notification.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/primitives/notification.tsx"],
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport { cn } from '@open-mercato/shared/lib/utils'\nimport {\n  Alert,\n  AlertDescription,\n  AlertTitle,\n  type AlertStatus,\n  type AlertStyle,\n} from './alert'\n\nexport type NotificationProps = {\n  /**\n   * Notification status. Same five values as `Alert`.\n   * Default `'information'`.\n   */\n  status?: AlertStatus\n  /**\n   * Visual style. Same four values as `Alert`.\n   * Default `'light'`.\n   */\n  style?: AlertStyle\n  /**\n   * Avatar/icon override. If provided, replaces the per-status default\n   * Lucide icon \u2014 typical for user-driven notifications (\"John\n   * commented on...\" with the author avatar). Pass an `Avatar`\n   * primitive instance or any 20\u00D720 visual.\n   */\n  avatar?: React.ReactNode\n  /**\n   * Notification title. Rendered as `AlertTitle` (Label/Small,\n   * `font-medium 14/20`).\n   */\n  title?: React.ReactNode\n  /**\n   * Notification body. Rendered as `AlertDescription` at 72% opacity\n   * per Figma `170:1839` reference (Paragraph/Small, `font-regular\n   * 14/20`).\n   */\n  description?: React.ReactNode\n  /**\n   * Right-aligned timestamp hint next to the title (e.g. `\"2 min\n   * ago\"`). Pre-formatted by the caller \u2014 pass through\n   * `formatRelativeTime()` from `@open-mercato/shared/lib/time` for\n   * the standard look.\n   */\n  timestamp?: React.ReactNode\n  /**\n   * Action buttons / links rendered under the description. Pass a\n   * `<>...</>` fragment or an array of action elements. Separators\n   * are not auto-inserted \u2014 wrap your actions in a `<div>` with\n   * `gap-2` if you need custom spacing.\n   */\n  actions?: React.ReactNode\n  /** Render the trailing X close button. Defaults to `true` \u2014 Figma reference always shows it. */\n  dismissible?: boolean\n  onDismiss?: () => void\n  dismissAriaLabel?: string\n  className?: string\n  /** Stable id used by the `NotificationStack` (or external trackers) to identify the card. Forwarded as `data-notification-id`. */\n  id?: string\n}\n\n/**\n * Card composition over the `Alert` primitive matching the Figma\n * Notification reference (`170:1839` \u2014 Error/Light/Large). Renders a\n * status icon (or custom `avatar`), a title + timestamp row, an\n * `opacity-72` description, and an optional row of action links. Use\n * with `NotificationStack` for corner-floating manual-dismiss UX, or\n * standalone inside a panel / dialog content area.\n *\n * Notification is intentionally a thin wrapper \u2014 every visual token\n * comes from the `Alert` primitive so the look stays in sync with the\n * unified Alert / Notification / Toast design.\n */\nexport const Notification = React.forwardRef<HTMLDivElement, NotificationProps>(\n  (\n    {\n      status,\n      style,\n      avatar,\n      title,\n      description,\n      timestamp,\n      actions,\n      dismissible = true,\n      onDismiss,\n      dismissAriaLabel,\n      className,\n      id,\n    },\n    ref,\n  ) => {\n    return (\n      <Alert\n        ref={ref}\n        status={status}\n        style={style}\n        size=\"default\"\n        icon={avatar}\n        dismissible={dismissible}\n        onDismiss={onDismiss}\n        dismissAriaLabel={dismissAriaLabel}\n        className={className}\n        data-slot=\"notification\"\n        data-notification-id={id}\n      >\n        {(title || timestamp) && (\n          <div className=\"flex items-start gap-2\">\n            {title ? <AlertTitle className=\"mb-0 flex-1 min-w-0\">{title}</AlertTitle> : <span className=\"flex-1\" />}\n            {timestamp ? (\n              <span className=\"shrink-0 text-xs leading-5 opacity-60\" data-slot=\"notification-timestamp\">\n                {timestamp}\n              </span>\n            ) : null}\n          </div>\n        )}\n        {description ? (\n          <AlertDescription className={cn('opacity-72', title && 'mt-1')} data-slot=\"notification-description\">\n            {description}\n          </AlertDescription>\n        ) : null}\n        {actions ? (\n          <div\n            className={cn('flex flex-wrap items-center gap-2', (title || description) && 'mt-2.5')}\n            data-slot=\"notification-actions\"\n          >\n            {actions}\n          </div>\n        ) : null}\n      </Alert>\n    )\n  },\n)\nNotification.displayName = 'Notification'\n"],
+  "mappings": ";AA6GU,SACW,KADX;AA3GV,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AAkEA,MAAM,eAAe,MAAM;AAAA,EAChC,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,GACA,QACG;AACH,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA,MAAK;AAAA,QACL,MAAM;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,aAAU;AAAA,QACV,wBAAsB;AAAA,QAEpB;AAAA,oBAAS,cACT,qBAAC,SAAI,WAAU,0BACZ;AAAA,oBAAQ,oBAAC,cAAW,WAAU,uBAAuB,iBAAM,IAAgB,oBAAC,UAAK,WAAU,UAAS;AAAA,YACpG,YACC,oBAAC,UAAK,WAAU,yCAAwC,aAAU,0BAC/D,qBACH,IACE;AAAA,aACN;AAAA,UAED,cACC,oBAAC,oBAAiB,WAAW,GAAG,cAAc,SAAS,MAAM,GAAG,aAAU,4BACvE,uBACH,IACE;AAAA,UACH,UACC;AAAA,YAAC;AAAA;AAAA,cACC,WAAW,GAAG,sCAAsC,SAAS,gBAAgB,QAAQ;AAAA,cACrF,aAAU;AAAA,cAET;AAAA;AAAA,UACH,IACE;AAAA;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AACA,aAAa,cAAc;",
+  "names": []
+}