@cloudraker/reki 2.6.1 → 2.7.1

package/dist/chunks/{tabs-e4pcjkw94kpe35x0.js → tabs-klj6wapad6fpd9at.js}

@@ -1,8 +1,8 @@
 "use client";
-import { jsxs as w, jsx as g } from "react/jsx-runtime";
+import { jsxs as w, jsx as b } from "react/jsx-runtime";
 import { useRef as h, useState as z, useEffect as D } from "react";
 import { c as u } from "./cn-ct4n7r74mh8y0f48.js";
-import { bg as N, bh as y, bi as L, bj as R } from "./vendor-base-ui-bgl9g5nkvqy3tn36.js";
+import { bg as N, bh as y, bi as L, bj as R } from "./vendor-base-ui-djdjrfuoxlb1lubi.js";
 const I = {
   variant: "segmented",
   size: "base"
@@ -19,10 +19,10 @@ function U({
   variant: v = I.variant,
   size: C = I.size
 }) {
-  const b = o ?? [];
-  if (b.length === 0)
+  const g = o ?? [];
+  if (g.length === 0)
     return null;
-  const T = b[0]?.value, k = a !== void 0, P = {
+  const T = g[0]?.value, k = a !== void 0, P = {
     value: k ? a : void 0,
     defaultValue: k ? void 0 : n ?? T
   }, l = v === "segmented", d = v === "underline", c = C === "sm", { ref: x, isOverflowing: p } = O(l), S = V(x, p);
@@ -32,7 +32,6 @@ function U({
       ...P,
       className: u(
         "relative isolate min-w-0 font-medium",
-        l && (c ? "rounded-md" : "rounded-lg") + " ring ring-reki-hairline/70",
         r
       ),
       onValueChange: (s) => {
@@ -40,12 +39,12 @@ function U({
         i?.(m);
       },
       children: [
-        l && /* @__PURE__ */ g(
+        l && /* @__PURE__ */ b(
           "div",
           {
             className: u(
-              "absolute inset-x-0 top-1/2 z-0 -translate-y-1/2 rounded-lg bg-reki-recessed",
-              c ? "h-6.5" : "h-9"
+              "absolute inset-x-0 top-1/2 z-0 -translate-y-1/2 rounded-lg",
+              c ? "h-5" : "h-7"
             )
           }
         ),
@@ -58,7 +57,7 @@ function U({
             ...S(),
             className: u(
               "relative flex min-w-0 shrink items-stretch",
-              l && "reki-tabs-list overflow-x-auto rounded-lg bg-reki-recessed px-0.5 [--scroll-fade-width:3rem] scroll-px-(--scroll-fade-width)",
+              l && "reki-tabs-list overflow-x-auto rounded-lg px-0.5 [--scroll-fade-width:3rem] scroll-px-(--scroll-fade-width)",
               l && (c ? "h-6.5 rounded-md" : "h-9"),
               p && "cursor-grab active:cursor-grabbing",
               d && "gap-4 border-b border-reki-hairline pb-2",
@@ -66,7 +65,7 @@ function U({
               t
             ),
             children: [
-              b.map((s) => /* @__PURE__ */ g(
+              g.map((s) => /* @__PURE__ */ b(
                 L,
                 {
                   "data-reki-component": "Tabs",
@@ -94,10 +93,10 @@ function U({
                 },
                 s.value
               )),
-              /* @__PURE__ */ g(
+              /* @__PURE__ */ b(
                 R,
                 {
-                  render: (s) => /* @__PURE__ */ g(
+                  render: (s) => /* @__PURE__ */ b(
                     "div",
                     {
                       ...s,
@@ -106,8 +105,7 @@ function U({
                         "w-(--active-tab-width) translate-x-(--active-tab-left) transition-all duration-200",
                         "data-[rendered=false]:scale-90 data-[rendered=false]:opacity-0",
                         l && u(
-                          "top-(--active-tab-top) h-(--active-tab-height) bg-reki-base shadow-sm ring ring-reki-line",
-                          c ? "rounded" : "rounded-md"
+                          "top-(--active-tab-top) h-(--active-tab-height) bg-reki-base shadow-sm ring ring-reki-line rounded-full"
                         ),
                         d && "bottom-0 h-0.5 bg-reki-brand",
                         f
@@ -174,4 +172,4 @@ function O(o) {
 export {
   U as T
 };
-//# sourceMappingURL=tabs-e4pcjkw94kpe35x0.js.map
+//# sourceMappingURL=tabs-klj6wapad6fpd9at.js.map

package/dist/chunks/tabs-klj6wapad6fpd9at.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-klj6wapad6fpd9at.js","sources":["../../src/components/tabs/tabs.tsx"],"sourcesContent":["import {\n  useEffect,\n  useRef,\n  useState,\n  type MouseEvent,\n  type PointerEvent,\n  type ReactNode,\n} from \"react\";\nimport type { TabsTab } from \"@base-ui/react/tabs\";\nimport { Tabs as TabsPrimitive } from \"@base-ui/react/tabs\";\nimport { cn } from \"../../utils/cn\";\n\n/** Tabs variant definitions. */\nexport const REKI_TABS_VARIANTS = {\n  variant: [\"segmented\", \"underline\"],\n  size: [\"base\", \"sm\"],\n} as const;\n\nexport const REKI_TABS_DEFAULT_VARIANTS = {\n  variant: \"segmented\",\n  size: \"base\",\n} as const;\n\nexport const REKI_TABS_STYLING = {\n  container: {\n    height: 34,\n    borderRadius: 8,\n    background: \"color-accent\",\n    padding: 1,\n  },\n  tab: {\n    paddingX: 10,\n    verticalMargin: 1,\n    fontSize: 16,\n    fontWeight: 500,\n    borderRadius: 8,\n    activeColor: \"text-color-surface\",\n    inactiveColor: \"text-color-label\",\n  },\n  indicator: {\n    background: \"color-surface-secondary\",\n    ring: \"color-color-2\",\n    borderRadius: 6,\n    shadow: \"shadow-sm\",\n  },\n} as const;\n\n// Derived types from REKI_TABS_VARIANTS\nexport interface RekiTabsVariantsProps {\n  /**\n   * Tab style.\n   * - `\"segmented\"` — Pill-shaped indicator on a filled track\n   * - `\"underline\"` — Underline indicator below tab text\n   * @default \"segmented\"\n   */\n  variant?: (typeof REKI_TABS_VARIANTS.variant)[number];\n  /**\n   * Tab size.\n   * - `\"base\"` — Default size (h-9, text-base)\n   * - `\"sm\"` — Compact size (h-6.5, text-xs) — matches Input size=\"sm\"\n   * @default \"base\"\n   */\n  size?: (typeof REKI_TABS_VARIANTS.size)[number];\n}\n\n/** Configuration for a single tab within the Tabs component. */\nexport type TabsItem = {\n  /** Unique identifier for the tab, used as the controlled value. */\n  value: string;\n  /** Display content for the tab trigger. */\n  label: ReactNode;\n  /** Additional CSS classes for this tab trigger. */\n  className?: string;\n  /**\n   * Custom render function or element to replace the tab element (e.g. for link-based tabs).\n   * When using a function, it receives the props to spread on the element and the tab's state.\n   */\n  render?: TabsTab.Props[\"render\"];\n};\n\n/**\n * Tabs component props.\n *\n * @example\n * ```tsx\n * <Tabs\n *   tabs={[\n *     { value: \"overview\", label: \"Overview\" },\n *     { value: \"settings\", label: \"Settings\" },\n *   ]}\n *   value={activeTab}\n *   onValueChange={setActiveTab}\n * />\n * ```\n */\nexport type TabsProps = RekiTabsVariantsProps & {\n  /** Array of tab items to render. */\n  tabs?: TabsItem[];\n  /** Controlled value. When set, component becomes controlled. */\n  value?: string;\n  /** Default selected value for uncontrolled mode. Ignored when `value` is set. */\n  selectedValue?: string;\n  /** Callback fired when the active tab changes. */\n  onValueChange?: (value: string) => void;\n  /**\n   * When `true`, tabs are activated immediately upon receiving focus via arrow keys.\n   * When `false` (default), tabs receive focus but require Enter/Space to activate.\n   */\n  activateOnFocus?: boolean;\n  /** Additional CSS classes for the root element. */\n  className?: string;\n  /** Additional CSS classes for the tab list element. */\n  listClassName?: string;\n  /** Additional CSS classes for the indicator element. */\n  indicatorClassName?: string;\n};\n\n/**\n * Tab navigation component with segmented or underline style.\n * Built on Base UI Tabs with animated active indicator.\n *\n * @example\n * ```tsx\n * <Tabs\n *   variant=\"segmented\"\n *   tabs={[{ value: \"tab1\", label: \"Tab 1\" }, { value: \"tab2\", label: \"Tab 2\" }]}\n *   value={active}\n *   onValueChange={setActive}\n * />\n * ```\n */\nexport function Tabs({\n  tabs,\n  value,\n  selectedValue,\n  onValueChange,\n  activateOnFocus,\n  className,\n  listClassName,\n  indicatorClassName,\n  variant = REKI_TABS_DEFAULT_VARIANTS.variant,\n  size = REKI_TABS_DEFAULT_VARIANTS.size,\n}: TabsProps) {\n  const items: TabsItem[] = tabs ?? [];\n\n  if (items.length === 0) {\n    return null;\n  }\n\n  const fallbackValue = items[0]?.value;\n  const isControlled = value !== undefined;\n  const rootProps = {\n    value: isControlled ? value : undefined,\n    defaultValue: isControlled ? undefined : (selectedValue ?? fallbackValue),\n  };\n\n  const isSegmented = variant === \"segmented\";\n  const isUnderline = variant === \"underline\";\n  const isSm = size === \"sm\";\n  const { ref: listRef, isOverflowing } = useOverflowDetect(isSegmented);\n  const bindDrag = useHorizontalDragScroll(listRef, isOverflowing);\n\n  return (\n    <TabsPrimitive.Root\n      {...rootProps}\n      className={cn(\n        \"relative isolate min-w-0 font-medium\",\n        className,\n      )}\n      onValueChange={(nextValue) => {\n        const stringValue = String(nextValue);\n        onValueChange?.(stringValue);\n      }}\n    >\n      {/* Background element for segmented variant */}\n      {isSegmented && (\n        <div\n          className={cn(\n            \"absolute inset-x-0 top-1/2 z-0 -translate-y-1/2 rounded-lg\",\n            isSm ? \"h-5\" : \"h-7\",\n          )}\n        />\n      )}\n      <TabsPrimitive.List\n        ref={listRef}\n        activateOnFocus={activateOnFocus}\n        data-overflowing={isOverflowing ? \"\" : undefined}\n        {...bindDrag()}\n        className={cn(\n          \"relative flex min-w-0 shrink items-stretch\",\n          isSegmented &&\n            \"reki-tabs-list overflow-x-auto rounded-lg px-0.5 [--scroll-fade-width:3rem] scroll-px-(--scroll-fade-width)\",\n          isSegmented && (isSm ? \"h-6.5 rounded-md\" : \"h-9\"),\n          isOverflowing && \"cursor-grab active:cursor-grabbing\",\n          isUnderline && \"gap-4 border-b border-reki-hairline pb-2\",\n          isUnderline && (isSm ? \"h-6.5\" : \"h-7.5\"),\n          listClassName,\n        )}\n      >\n        {items.map((tab) => (\n          <TabsPrimitive.Tab\n            key={tab.value}\n            data-reki-component=\"Tabs\"\n            data-reki-part=\"tab\"\n            value={tab.value}\n            render={tab.render}\n            onClick={(e) => {\n              e.currentTarget.scrollIntoView({\n                behavior: \"smooth\",\n                block: \"nearest\",\n                inline: \"nearest\",\n              });\n            }}\n            className={cn(\n              \"relative z-2 flex items-center rounded bg-transparent whitespace-nowrap focus:outline-none focus:ring-reki-focus/50 focus-visible:ring-2 focus-visible:ring-reki-brand\",\n              isOverflowing\n                ? \"cursor-grab active:cursor-grabbing\"\n                : \"cursor-pointer\",\n              isSm ? \"text-xs\" : \"text-base\",\n              isSegmented &&\n                \"my-0.5 text-reki-subtle hover:text-reki-default aria-selected:text-reki-default focus-visible:ring-inset\",\n              isSegmented && (isSm ? \"px-2 rounded-sm\" : \"px-2.5 rounded-md\"),\n              isUnderline &&\n                \"text-reki-subtle hover:bg-reki-tint hover:text-reki-default aria-selected:hover:bg-reki-tint aria-selected:font-medium aria-selected:text-reki-default\",\n              isUnderline && (isSm ? \"px-1.5 py-2.5\" : \"px-2 py-3\"),\n              tab.className,\n            )}\n          >\n            {tab.label}\n          </TabsPrimitive.Tab>\n        ))}\n        <TabsPrimitive.Indicator\n          render={(props) => (\n            <div\n              {...props}\n              className={cn(\n                \"absolute z-1 left-0\",\n                \"w-(--active-tab-width) translate-x-(--active-tab-left) transition-all duration-200\",\n                \"data-[rendered=false]:scale-90 data-[rendered=false]:opacity-0\",\n                isSegmented &&\n                  cn(\n                    \"top-(--active-tab-top) h-(--active-tab-height) bg-reki-base shadow-sm ring ring-reki-line rounded-full\",\n                \n                  ),\n                isUnderline && \"bottom-0 h-0.5 bg-reki-brand\",\n                indicatorClassName,\n              )}\n            />\n          )}\n        />\n      </TabsPrimitive.List>\n    </TabsPrimitive.Root>\n  );\n}\n\n// ─── Horizontal drag-to-scroll ────────────────────────────────────────\n\n/**\n * Enables mouse drag to horizontally scroll the tab list.\n * Touch devices keep native horizontal overflow scrolling and inertia.\n */\nfunction useHorizontalDragScroll(\n  ref: React.RefObject<HTMLElement | null>,\n  enabled: boolean,\n) {\n  const dragState = useRef<{\n    pointerId: number;\n    startX: number;\n    scrollLeft: number;\n    dragging: boolean;\n  } | null>(null);\n  const shouldSuppressClick = useRef(false);\n\n  return () => ({\n    onPointerDownCapture: (event: PointerEvent<HTMLElement>) => {\n      const el = ref.current;\n      if (!el || !enabled) return;\n      if (event.pointerType !== \"mouse\" || event.button !== 0) return;\n\n      dragState.current = {\n        pointerId: event.pointerId,\n        startX: event.clientX,\n        scrollLeft: el.scrollLeft,\n        dragging: false,\n      };\n      shouldSuppressClick.current = false;\n    },\n    onPointerMoveCapture: (event: PointerEvent<HTMLElement>) => {\n      const el = ref.current;\n      const state = dragState.current;\n      if (!el || !enabled || !state || state.pointerId !== event.pointerId)\n        return;\n\n      const movementX = event.clientX - state.startX;\n      if (!state.dragging) {\n        if (Math.abs(movementX) <= 3) return;\n        state.dragging = true;\n        shouldSuppressClick.current = true;\n        el.setPointerCapture(event.pointerId);\n      }\n\n      event.preventDefault();\n      el.scrollLeft = state.scrollLeft - movementX;\n    },\n    onPointerUpCapture: (event: PointerEvent<HTMLElement>) => {\n      const el = ref.current;\n      const state = dragState.current;\n      if (!el || !state || state.pointerId !== event.pointerId) return;\n\n      dragState.current = null;\n      if (el.hasPointerCapture(event.pointerId)) {\n        el.releasePointerCapture(event.pointerId);\n      }\n      if (shouldSuppressClick.current) {\n        window.setTimeout(() => {\n          shouldSuppressClick.current = false;\n        }, 0);\n      }\n    },\n    onPointerCancelCapture: (event: PointerEvent<HTMLElement>) => {\n      const el = ref.current;\n      const state = dragState.current;\n      if (!el || !state || state.pointerId !== event.pointerId) return;\n\n      dragState.current = null;\n      if (el.hasPointerCapture(event.pointerId)) {\n        el.releasePointerCapture(event.pointerId);\n      }\n    },\n    onClickCapture: (event: MouseEvent<HTMLElement>) => {\n      if (!shouldSuppressClick.current) {\n        return;\n      }\n      event.preventDefault();\n      event.stopPropagation();\n      shouldSuppressClick.current = false;\n    },\n  });\n}\n\n// ─── Overflow detection ───────────────────────────────────────────────\n\n/**\n * Detects whether the element's content overflows horizontally.\n * Returns a ref to attach and a boolean for conditional rendering.\n * The `data-overflowing` attribute drives the scroll-fade CSS.\n */\nfunction useOverflowDetect(enabled: boolean) {\n  const ref = useRef<HTMLDivElement>(null);\n  const [isOverflowing, setIsOverflowing] = useState(false);\n\n  useEffect(() => {\n    if (!enabled) return;\n    const el = ref.current;\n    if (!el) return;\n\n    const check = () => setIsOverflowing(el.scrollWidth > el.clientWidth);\n\n    const ro = new ResizeObserver(check);\n    ro.observe(el);\n    check();\n\n    return () => ro.disconnect();\n  }, [enabled]);\n\n  return { ref, isOverflowing };\n}\n"],"names":["REKI_TABS_DEFAULT_VARIANTS","Tabs","tabs","value","selectedValue","onValueChange","activateOnFocus","className","listClassName","indicatorClassName","variant","size","items","fallbackValue","isControlled","rootProps","isSegmented","isUnderline","isSm","listRef","isOverflowing","useOverflowDetect","bindDrag","useHorizontalDragScroll","jsxs","TabsPrimitive.Root","cn","nextValue","stringValue","jsx","TabsPrimitive.List","tab","TabsPrimitive.Tab","e","TabsPrimitive.Indicator","props","ref","enabled","dragState","useRef","shouldSuppressClick","event","el","state","movementX","setIsOverflowing","useState","useEffect","check","ro"],"mappings":"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"}

package/dist/chunks/tag-h5kwf5eh7dyyvc2c.js

@@ -0,0 +1,58 @@
+"use client";
+import { jsx as a, jsxs as h, Fragment as d } from "react/jsx-runtime";
+import { O as f } from "./overflowing-text-mm8bkx7voc6h8ra4.js";
+import { c as x } from "./cn-ct4n7r74mh8y0f48.js";
+const b = {
+  gray: { bg: "bg-reki-tag-gray", text: "text-reki-tag-gray" },
+  red: { bg: "bg-reki-tag-red", text: "text-reki-tag-red" },
+  orange: { bg: "bg-reki-tag-orange", text: "text-reki-tag-orange" },
+  yellow: { bg: "bg-reki-tag-yellow", text: "text-reki-tag-yellow" },
+  green: { bg: "bg-reki-tag-green", text: "text-reki-tag-green" },
+  turquoise: { bg: "bg-reki-tag-turquoise", text: "text-reki-tag-turquoise" },
+  sky: { bg: "bg-reki-tag-sky", text: "text-reki-tag-sky" },
+  blue: { bg: "bg-reki-tag-blue", text: "text-reki-tag-blue" },
+  purple: { bg: "bg-reki-tag-purple", text: "text-reki-tag-purple" },
+  pink: { bg: "bg-reki-tag-pink", text: "text-reki-tag-pink" }
+}, u = Object.keys(b);
+function _(e) {
+  let r = 0;
+  for (let t = 0; t < e.length; t++)
+    r = r * 31 + e.charCodeAt(t) | 0;
+  return u[Math.abs(r) % u.length];
+}
+const y = "inline-flex h-5 w-fit min-w-0 max-w-full items-center gap-1 rounded-sm px-1.5 text-xs whitespace-nowrap";
+function A({
+  color: e,
+  text: r,
+  icon: t,
+  variant: i = "solid",
+  weight: k = "regular",
+  onClick: g,
+  preventShrink: c,
+  className: p
+}) {
+  const n = e === "transparent", s = n ? null : b[e], m = n ? "text-reki-subtle" : x(
+    s?.text,
+    i !== "outline" && s?.bg,
+    i !== "solid" && "ring ring-inset ring-current/30"
+  ), o = x(
+    y,
+    k === "medium" && "font-medium",
+    c && "flex-none shrink-0",
+    g && "cursor-pointer",
+    m,
+    p
+  ), l = /* @__PURE__ */ h(d, { children: [
+    t ? /* @__PURE__ */ a(t, { "aria-hidden": !0, className: "size-3.5 shrink-0" }) : null,
+    /* @__PURE__ */ a(f, { text: r, className: "text-inherit" })
+  ] });
+  return g ? /* @__PURE__ */ a("button", { type: "button", onClick: g, className: o, children: l }) : /* @__PURE__ */ a("span", { className: o, children: l });
+}
+export {
+  y as R,
+  u as T,
+  b as a,
+  A as b,
+  _ as s
+};
+//# sourceMappingURL=tag-h5kwf5eh7dyyvc2c.js.map

package/dist/chunks/tag-h5kwf5eh7dyyvc2c.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag-h5kwf5eh7dyyvc2c.js","sources":["../../src/components/tag/tag.tsx"],"sourcesContent":["import type { ComponentType, SVGProps } from \"react\";\nimport { OverflowingText } from \"../overflowing-text\";\nimport { cn } from \"../../utils/cn\";\n\n/** Variant standard export (reki convention). */\nexport const REKI_TAG_VARIANTS = {\n  variant: {\n    solid: { classes: \"\", description: \"Subtle colored background (default)\" },\n    outline: { classes: \"ring ring-inset ring-current/30\", description: \"Transparent background with a colored ring\" },\n    border: { classes: \"ring ring-inset ring-current/30\", description: \"Subtle background with a matching ring\" },\n  },\n  weight: {\n    regular: { classes: \"\", description: \"Regular weight\" },\n    medium: { classes: \"font-medium\", description: \"Medium weight\" },\n  },\n} as const;\n\nexport const REKI_TAG_DEFAULT_VARIANTS = {\n  variant: \"solid\",\n  weight: \"regular\",\n} as const;\n\n/**\n * The CRM tag-color palette, mirrored from the `reki-tag-*` theme tokens.\n * Each maps to a subtle background (`bg-reki-tag-*`) + readable text\n * (`text-reki-tag-*`) pair that adapts to light/dark automatically.\n */\nexport const REKI_TAG_COLORS = {\n  gray: { bg: \"bg-reki-tag-gray\", text: \"text-reki-tag-gray\" },\n  red: { bg: \"bg-reki-tag-red\", text: \"text-reki-tag-red\" },\n  orange: { bg: \"bg-reki-tag-orange\", text: \"text-reki-tag-orange\" },\n  yellow: { bg: \"bg-reki-tag-yellow\", text: \"text-reki-tag-yellow\" },\n  green: { bg: \"bg-reki-tag-green\", text: \"text-reki-tag-green\" },\n  turquoise: { bg: \"bg-reki-tag-turquoise\", text: \"text-reki-tag-turquoise\" },\n  sky: { bg: \"bg-reki-tag-sky\", text: \"text-reki-tag-sky\" },\n  blue: { bg: \"bg-reki-tag-blue\", text: \"text-reki-tag-blue\" },\n  purple: { bg: \"bg-reki-tag-purple\", text: \"text-reki-tag-purple\" },\n  pink: { bg: \"bg-reki-tag-pink\", text: \"text-reki-tag-pink\" },\n} as const;\n\n/** A named tag color, or `\"transparent\"` for an unstyled neutral tag. */\nexport type TagColor = keyof typeof REKI_TAG_COLORS | \"transparent\";\n\n/** Ordered list of selectable tag colors (excludes `\"transparent\"`). */\nexport const TAG_COLOR_NAMES = Object.keys(REKI_TAG_COLORS) as Array<\n  keyof typeof REKI_TAG_COLORS\n>;\n\n/**\n * Deterministically map an arbitrary string (e.g. a record id or option value)\n * to a tag color, so the same input always yields the same color across\n * sessions and clients.\n *\n * @example\n * ```tsx\n * <Tag color={stringToTagColor(option.id)} text={option.label} />\n * ```\n */\nexport function stringToTagColor(seed: string): keyof typeof REKI_TAG_COLORS {\n  let hash = 0;\n  for (let i = 0; i < seed.length; i++) {\n    hash = (hash * 31 + seed.charCodeAt(i)) | 0;\n  }\n  return TAG_COLOR_NAMES[Math.abs(hash) % TAG_COLOR_NAMES.length];\n}\n\nexport type TagVariant = \"solid\" | \"outline\" | \"border\";\nexport type TagWeight = \"regular\" | \"medium\";\n\n/** Base styles shared by all tag variants. */\nexport const REKI_TAG_BASE_STYLES =\n  \"inline-flex h-5 w-fit min-w-0 max-w-full items-center gap-1 rounded-sm px-1.5 text-xs whitespace-nowrap\";\n\n/**\n * Tag component props.\n *\n * @example\n * ```tsx\n * <Tag color=\"green\" text=\"Active\" />\n * <Tag color=\"blue\" text=\"In progress\" variant=\"border\" />\n * ```\n */\nexport interface TagProps {\n  /**\n   * Tag color. One of the named CRM colors, or `\"transparent\"` for a neutral\n   * tag that inherits the surface background.\n   */\n  color: TagColor;\n  /** Text label rendered inside the tag (truncated with a tooltip on overflow). */\n  text: string;\n  /** Optional leading icon (phosphor or any SVG component). */\n  icon?: ComponentType<SVGProps<SVGSVGElement>>;\n  /**\n   * Visual style.\n   * - `\"solid\"` — subtle colored background (default)\n   * - `\"outline\"` — transparent background with a colored ring\n   * - `\"border\"` — subtle background with a matching colored ring\n   * @default \"solid\"\n   */\n  variant?: TagVariant;\n  /**\n   * Font weight of the label.\n   * - `\"regular\"` (default)\n   * - `\"medium\"`\n   * @default \"regular\"\n   */\n  weight?: TagWeight;\n  /** Makes the tag interactive; renders as a button. */\n  onClick?: () => void;\n  /** Prevents the tag from shrinking inside flex containers. */\n  preventShrink?: boolean;\n  /** Additional CSS classes merged via `cn()`. Use reki semantic tokens only. */\n  className?: string;\n}\n\n/**\n * Colored label for enum / select / multi-select values and entity categories.\n * Built on the `reki-tag-*` token palette so colors adapt to light/dark\n * automatically, and on {@link OverflowingText} so long labels truncate with a\n * tooltip.\n *\n * @example\n * ```tsx\n * <Tag color=\"green\" text=\"Active\" />\n * <Tag color={stringToTagColor(stage.id)} text={stage.label} />\n * ```\n */\nexport function Tag({\n  color,\n  text,\n  icon: Icon,\n  variant = \"solid\",\n  weight = \"regular\",\n  onClick,\n  preventShrink,\n  className,\n}: TagProps) {\n  const isTransparent = color === \"transparent\";\n  const palette = isTransparent ? null : REKI_TAG_COLORS[color];\n\n  const colorClasses = isTransparent\n    ? \"text-reki-subtle\"\n    : cn(\n        palette?.text,\n        variant !== \"outline\" && palette?.bg,\n        variant !== \"solid\" && \"ring ring-inset ring-current/30\",\n      );\n\n  const classes = cn(\n    REKI_TAG_BASE_STYLES,\n    weight === \"medium\" && \"font-medium\",\n    preventShrink && \"flex-none shrink-0\",\n    onClick && \"cursor-pointer\",\n    colorClasses,\n    className,\n  );\n\n  const content = (\n    <>\n      {Icon ? <Icon aria-hidden className=\"size-3.5 shrink-0\" /> : null}\n      <OverflowingText text={text} className=\"text-inherit\" />\n    </>\n  );\n\n  if (onClick) {\n    return (\n      <button type=\"button\" onClick={onClick} className={classes}>\n        {content}\n      </button>\n    );\n  }\n\n  return <span className={classes}>{content}</span>;\n}\n"],"names":["REKI_TAG_COLORS","TAG_COLOR_NAMES","stringToTagColor","seed","hash","i","REKI_TAG_BASE_STYLES","Tag","color","text","Icon","variant","weight","onClick","preventShrink","className","isTransparent","palette","colorClasses","cn","classes","content","jsxs","Fragment","jsx","OverflowingText"],"mappings":";;;;AA2BO,MAAMA,IAAkB;AAAA,EAC7B,MAAM,EAAE,IAAI,oBAAoB,MAAM,qBAAA;AAAA,EACtC,KAAK,EAAE,IAAI,mBAAmB,MAAM,oBAAA;AAAA,EACpC,QAAQ,EAAE,IAAI,sBAAsB,MAAM,uBAAA;AAAA,EAC1C,QAAQ,EAAE,IAAI,sBAAsB,MAAM,uBAAA;AAAA,EAC1C,OAAO,EAAE,IAAI,qBAAqB,MAAM,sBAAA;AAAA,EACxC,WAAW,EAAE,IAAI,yBAAyB,MAAM,0BAAA;AAAA,EAChD,KAAK,EAAE,IAAI,mBAAmB,MAAM,oBAAA;AAAA,EACpC,MAAM,EAAE,IAAI,oBAAoB,MAAM,qBAAA;AAAA,EACtC,QAAQ,EAAE,IAAI,sBAAsB,MAAM,uBAAA;AAAA,EAC1C,MAAM,EAAE,IAAI,oBAAoB,MAAM,qBAAA;AACxC,GAMaC,IAAkB,OAAO,KAAKD,CAAe;AAcnD,SAASE,EAAiBC,GAA4C;AAC3E,MAAIC,IAAO;AACX,WAASC,IAAI,GAAGA,IAAIF,EAAK,QAAQE;AAC/B,IAAAD,IAAQA,IAAO,KAAKD,EAAK,WAAWE,CAAC,IAAK;AAE5C,SAAOJ,EAAgB,KAAK,IAAIG,CAAI,IAAIH,EAAgB,MAAM;AAChE;AAMO,MAAMK,IACX;AAwDK,SAASC,EAAI;AAAA,EAClB,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,MAAMC;AAAA,EACN,SAAAC,IAAU;AAAA,EACV,QAAAC,IAAS;AAAA,EACT,SAAAC;AAAA,EACA,eAAAC;AAAA,EACA,WAAAC;AACF,GAAa;AACX,QAAMC,IAAgBR,MAAU,eAC1BS,IAAUD,IAAgB,OAAOhB,EAAgBQ,CAAK,GAEtDU,IAAeF,IACjB,qBACAG;AAAA,IACEF,GAAS;AAAA,IACTN,MAAY,aAAaM,GAAS;AAAA,IAClCN,MAAY,WAAW;AAAA,EAAA,GAGvBS,IAAUD;AAAA,IACdb;AAAA,IACAM,MAAW,YAAY;AAAA,IACvBE,KAAiB;AAAA,IACjBD,KAAW;AAAA,IACXK;AAAA,IACAH;AAAA,EAAA,GAGIM,IACJ,gBAAAC,EAAAC,GAAA,EACG,UAAA;AAAA,IAAAb,sBAAQA,GAAA,EAAK,eAAW,IAAC,WAAU,qBAAoB,IAAK;AAAA,IAC7D,gBAAAc,EAACC,GAAA,EAAgB,MAAAhB,GAAY,WAAU,eAAA,CAAe;AAAA,EAAA,GACxD;AAGF,SAAII,sBAEC,UAAA,EAAO,MAAK,UAAS,SAAAA,GAAkB,WAAWO,GAChD,UAAAC,GACH,IAIG,gBAAAG,EAAC,QAAA,EAAK,WAAWJ,GAAU,UAAAC,GAAQ;AAC5C;"}

package/dist/chunks/timeline-lqurr2lcxkayomk2.js

@@ -0,0 +1,109 @@
+"use client";
+import { jsx as t, jsxs as c } from "react/jsx-runtime";
+import { A as h } from "./avatar-g40cun6cn17fcxd4.js";
+import { a as N } from "./tag-h5kwf5eh7dyyvc2c.js";
+import { c as r } from "./cn-ct4n7r74mh8y0f48.js";
+const g = {
+  tone: {
+    default: { classes: "", description: "Completed or normal event" },
+    muted: { classes: "opacity-55", description: "Upcoming / not-yet-started item" },
+    active: { classes: "", description: "Current / in-progress item (brand ring)" }
+  },
+  variant: {
+    compact: { classes: "", description: "Single-line event row" },
+    rich: { classes: "", description: "Full-width content row (comment / inline card)" }
+  }
+}, z = {
+  tone: "default",
+  variant: "compact"
+};
+function f({ children: e, className: n }) {
+  return /* @__PURE__ */ t("ol", { className: r("flex flex-col", n), children: e });
+}
+function b(e) {
+  return e.connector ? e.connector : e.isFirst && e.isLast ? "none" : e.isFirst ? "end" : e.isLast ? "start" : "full";
+}
+function v(e) {
+  const n = e.trim().split(/\s+/).filter(Boolean);
+  return n.length === 0 ? "?" : n.length === 1 ? n[0].slice(0, 2).toUpperCase() : (n[0][0] + n[n.length - 1][0]).toUpperCase();
+}
+function T({ nodeType: e = "icon", avatar: n, icon: i, statusColor: s, node: a, tone: l }) {
+  if (a)
+    return /* @__PURE__ */ t("span", { className: "relative z-10 flex size-5 items-center justify-center", children: a });
+  if (e === "avatar" && n)
+    return /* @__PURE__ */ t("span", { className: "relative z-10", children: /* @__PURE__ */ t(h, { size: "xs", src: n.src, alt: n.name, initials: v(n.name) }) });
+  if (e === "status") {
+    const o = !s || s === "transparent" ? null : N[s];
+    return /* @__PURE__ */ t("span", { className: "relative z-10 flex size-5 items-center justify-center rounded-full bg-reki-base ring-1 ring-reki-line", children: /* @__PURE__ */ t("span", { className: r("size-2.5 rounded-full", o?.bg ?? "bg-reki-fill") }) });
+  }
+  return /* @__PURE__ */ t(
+    "span",
+    {
+      className: r(
+        "relative z-10 flex size-5 items-center justify-center rounded-full bg-reki-base text-reki-subtle ring-1",
+        l === "active" ? "ring-reki-brand text-reki-brand" : "ring-reki-line"
+      ),
+      children: i ? /* @__PURE__ */ t(i, { size: 12, weight: "bold" }) : null
+    }
+  );
+}
+function d(e) {
+  const { tone: n = "default", variant: i = "compact", children: s, className: a } = e, l = b(e), m = l === "full" || l === "start", o = l === "full" || l === "end", u = g.tone[n].classes;
+  return /* @__PURE__ */ c("li", { className: r("relative flex gap-3", i === "compact" ? "pb-1.5" : "pb-3", a), children: [
+    /* @__PURE__ */ c("div", { className: r("relative flex w-5 shrink-0 justify-center self-stretch", u), children: [
+      m ? /* @__PURE__ */ t("span", { "aria-hidden": !0, className: "absolute top-0 left-1/2 h-2.5 w-px -translate-x-1/2 bg-reki-hairline" }) : null,
+      o ? /* @__PURE__ */ t("span", { "aria-hidden": !0, className: "absolute top-2.5 bottom-0 left-1/2 w-px -translate-x-1/2 bg-reki-hairline" }) : null,
+      /* @__PURE__ */ t(T, { ...e })
+    ] }),
+    /* @__PURE__ */ t(
+      "div",
+      {
+        className: r(
+          "min-w-0 flex-1",
+          i === "compact" ? "flex min-h-5 items-center" : "pt-px",
+          u
+        ),
+        children: s
+      }
+    )
+  ] });
+}
+function p({ children: e, className: n }) {
+  return /* @__PURE__ */ t("div", { className: r("flex min-w-0 flex-col gap-1.5", n), children: e });
+}
+function x({ actor: e, action: n, target: i, timestamp: s, truncate: a = !0, className: l }) {
+  return /* @__PURE__ */ c(
+    "span",
+    {
+      className: r(
+        "flex min-w-0 items-baseline gap-1 text-sm leading-5",
+        a ? "truncate" : "flex-wrap",
+        l
+      ),
+      children: [
+        e ? /* @__PURE__ */ t("span", { className: "font-medium text-reki-default", children: e }) : null,
+        n ? /* @__PURE__ */ t("span", { className: "text-reki-subtle", children: n }) : null,
+        i ? /* @__PURE__ */ t("span", { className: "text-reki-default", children: i }) : null,
+        s ? /* @__PURE__ */ c("span", { className: "text-reki-subtle", children: [
+          "· ",
+          s
+        ] }) : null
+      ]
+    }
+  );
+}
+f.displayName = "Timeline";
+d.displayName = "Timeline.Item";
+p.displayName = "Timeline.Content";
+x.displayName = "Timeline.Event";
+const y = Object.assign(f, {
+  Item: d,
+  Content: p,
+  Event: x
+});
+export {
+  z as R,
+  y as T,
+  g as a
+};
+//# sourceMappingURL=timeline-lqurr2lcxkayomk2.js.map

package/dist/chunks/timeline-lqurr2lcxkayomk2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline-lqurr2lcxkayomk2.js","sources":["../../src/components/timeline/timeline.tsx"],"sourcesContent":["import type { ComponentType, ReactNode } from \"react\";\nimport { Avatar } from \"../avatar\";\nimport { REKI_TAG_COLORS, type TagColor } from \"../tag\";\nimport { cn } from \"../../utils/cn\";\n\n/** Variant standard export (reki convention). */\nexport const REKI_TIMELINE_VARIANTS = {\n  tone: {\n    default: { classes: \"\", description: \"Completed or normal event\" },\n    muted: { classes: \"opacity-55\", description: \"Upcoming / not-yet-started item\" },\n    active: { classes: \"\", description: \"Current / in-progress item (brand ring)\" },\n  },\n  variant: {\n    compact: { classes: \"\", description: \"Single-line event row\" },\n    rich: { classes: \"\", description: \"Full-width content row (comment / inline card)\" },\n  },\n} as const;\n\nexport const REKI_TIMELINE_DEFAULT_VARIANTS = {\n  tone: \"default\",\n  variant: \"compact\",\n} as const;\n\nexport type RekiTimelineTone = keyof typeof REKI_TIMELINE_VARIANTS.tone;\nexport type RekiTimelineVariant = keyof typeof REKI_TIMELINE_VARIANTS.variant;\n\n/** Which half-segments of the connecting rail draw for an item. */\nexport type RekiTimelineConnector = \"full\" | \"start\" | \"end\" | \"none\";\n\ntype NodeType = \"avatar\" | \"icon\" | \"status\";\n\n/**\n * Timeline root props.\n *\n * @example\n * ```tsx\n * <Timeline>\n *   <Timeline.Item isFirst nodeType=\"avatar\" avatar={{ name: \"Jane Doe\" }}>\n *     <Timeline.Content>\n *       <Timeline.Event actor=\"Jane Doe\" action=\"created the run\" timestamp=\"5d ago\" />\n *     </Timeline.Content>\n *   </Timeline.Item>\n * </Timeline>\n * ```\n */\nexport interface TimelineProps {\n  /** `Timeline.Item` elements. */\n  children?: ReactNode;\n  /** Additional CSS classes merged via `cn()`. Use reki semantic tokens only. */\n  className?: string;\n}\n\nfunction TimelineRoot({ children, className }: TimelineProps) {\n  return <ol className={cn(\"flex flex-col\", className)}>{children}</ol>;\n}\n\nexport interface TimelineItemProps {\n  /** Which node glyph to render. @default \"icon\" */\n  nodeType?: NodeType;\n  /** Avatar descriptor, used when `nodeType=\"avatar\"`. */\n  avatar?: { src?: string | null; name: string };\n  /** Phosphor glyph component, used when `nodeType=\"icon\"`. */\n  icon?: ComponentType<{ size?: number; weight?: \"bold\" | \"regular\" | \"fill\" }>;\n  /** Named status color, used when `nodeType=\"status\"`. */\n  statusColor?: TagColor;\n  /** Escape hatch: arbitrary 20px node content; overrides the typed node paths. */\n  node?: ReactNode;\n  /** Visual state. `muted` dims (upcoming), `active` brand-tints the node ring. @default \"default\" */\n  tone?: RekiTimelineTone;\n  /** `compact` constrains to a one-line row; `rich` allows full-width content. @default \"compact\" */\n  variant?: RekiTimelineVariant;\n  /** Which rail segments draw. Computed from `isFirst`/`isLast` when omitted. */\n  connector?: RekiTimelineConnector;\n  /** First item in the list — suppresses the rail above the node. */\n  isFirst?: boolean;\n  /** Last item in the list — suppresses the rail below the node. */\n  isLast?: boolean;\n  /** Expected to be a `Timeline.Content`. */\n  children?: ReactNode;\n  /** Additional CSS classes merged via `cn()`. Use reki semantic tokens only. */\n  className?: string;\n}\n\nfunction resolveConnector(p: TimelineItemProps): RekiTimelineConnector {\n  if (p.connector) {\n    return p.connector;\n  }\n  if (p.isFirst && p.isLast) {\n    return \"none\";\n  }\n  if (p.isFirst) {\n    return \"end\";\n  }\n  if (p.isLast) {\n    return \"start\";\n  }\n  return \"full\";\n}\n\nfunction initials(name: string): string {\n  const parts = name.trim().split(/\\s+/).filter(Boolean);\n  if (parts.length === 0) {\n    return \"?\";\n  }\n  if (parts.length === 1) {\n    return parts[0].slice(0, 2).toUpperCase();\n  }\n  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();\n}\n\nfunction TimelineNode({ nodeType = \"icon\", avatar, icon: Icon, statusColor, node, tone }: TimelineItemProps) {\n  if (node) {\n    return <span className=\"relative z-10 flex size-5 items-center justify-center\">{node}</span>;\n  }\n\n  if (nodeType === \"avatar\" && avatar) {\n    return (\n      <span className=\"relative z-10\">\n        <Avatar size=\"xs\" src={avatar.src} alt={avatar.name} initials={initials(avatar.name)} />\n      </span>\n    );\n  }\n\n  if (nodeType === \"status\") {\n    const isTransparent = !statusColor || statusColor === \"transparent\";\n    const palette = isTransparent\n      ? null\n      : REKI_TAG_COLORS[statusColor as Exclude<TagColor, \"transparent\">];\n    return (\n      <span className=\"relative z-10 flex size-5 items-center justify-center rounded-full bg-reki-base ring-1 ring-reki-line\">\n        <span className={cn(\"size-2.5 rounded-full\", palette?.bg ?? \"bg-reki-fill\")} />\n      </span>\n    );\n  }\n\n  return (\n    <span\n      className={cn(\n        \"relative z-10 flex size-5 items-center justify-center rounded-full bg-reki-base text-reki-subtle ring-1\",\n        tone === \"active\" ? \"ring-reki-brand text-reki-brand\" : \"ring-reki-line\",\n      )}\n    >\n      {Icon ? <Icon size={12} weight=\"bold\" /> : null}\n    </span>\n  );\n}\n\nfunction TimelineItem(props: TimelineItemProps) {\n  const { tone = \"default\", variant = \"compact\", children, className } = props;\n  const connector = resolveConnector(props);\n  const showTop = connector === \"full\" || connector === \"start\";\n  const showBottom = connector === \"full\" || connector === \"end\";\n  const toneClass = REKI_TIMELINE_VARIANTS.tone[tone].classes;\n\n  return (\n    <li className={cn(\"relative flex gap-3\", variant === \"compact\" ? \"pb-1.5\" : \"pb-3\", className)}>\n      {/* rail: node + connecting line; the line sits behind the opaque node */}\n      <div className={cn(\"relative flex w-5 shrink-0 justify-center self-stretch\", toneClass)}>\n        {/* top segment: row top → node centre (10px) */}\n        {showTop ? (\n          <span aria-hidden className=\"absolute top-0 left-1/2 h-2.5 w-px -translate-x-1/2 bg-reki-hairline\" />\n        ) : null}\n        {/* bottom segment: node centre → row bottom */}\n        {showBottom ? (\n          <span aria-hidden className=\"absolute top-2.5 bottom-0 left-1/2 w-px -translate-x-1/2 bg-reki-hairline\" />\n        ) : null}\n        <TimelineNode {...props} />\n      </div>\n      <div\n        className={cn(\n          \"min-w-0 flex-1\",\n          variant === \"compact\" ? \"flex min-h-5 items-center\" : \"pt-px\",\n          toneClass,\n        )}\n      >\n        {children}\n      </div>\n    </li>\n  );\n}\n\nexport interface TimelineContentProps {\n  /** A `Timeline.Event` (compact) or arbitrary rich content. */\n  children?: ReactNode;\n  /** Additional CSS classes merged via `cn()`. Use reki semantic tokens only. */\n  className?: string;\n}\n\nfunction TimelineContent({ children, className }: TimelineContentProps) {\n  return <div className={cn(\"flex min-w-0 flex-col gap-1.5\", className)}>{children}</div>;\n}\n\nexport interface TimelineEventProps {\n  /** Actor name, rendered emphasised. */\n  actor?: ReactNode;\n  /** Verb phrase, rendered muted. */\n  action?: ReactNode;\n  /** Optional target entity, rendered in the default text color. */\n  target?: ReactNode;\n  /** Pre-formatted relative timestamp (e.g. \"3d ago\"); rendered muted after a separator. */\n  timestamp?: ReactNode;\n  /** Single-line truncation. @default true */\n  truncate?: boolean;\n  /** Additional CSS classes merged via `cn()`. Use reki semantic tokens only. */\n  className?: string;\n}\n\nfunction TimelineEvent({ actor, action, target, timestamp, truncate = true, className }: TimelineEventProps) {\n  return (\n    <span\n      className={cn(\n        \"flex min-w-0 items-baseline gap-1 text-sm leading-5\",\n        truncate ? \"truncate\" : \"flex-wrap\",\n        className,\n      )}\n    >\n      {actor ? <span className=\"font-medium text-reki-default\">{actor}</span> : null}\n      {action ? <span className=\"text-reki-subtle\">{action}</span> : null}\n      {target ? <span className=\"text-reki-default\">{target}</span> : null}\n      {timestamp ? <span className=\"text-reki-subtle\">· {timestamp}</span> : null}\n    </span>\n  );\n}\n\nTimelineRoot.displayName = \"Timeline\";\nTimelineItem.displayName = \"Timeline.Item\";\nTimelineContent.displayName = \"Timeline.Content\";\nTimelineEvent.displayName = \"Timeline.Event\";\n\n/**\n * Timeline — presentational compound component for a Linear-style activity feed.\n *\n * A thin faint vertical line connects a column of ~20px nodes (avatar, status\n * circle, or glyph icon). Each item renders either a compact one-line\n * {@link Timeline.Event} or arbitrary rich content (a comment, an inline card).\n * Purely visual — ordering, data, and date formatting are the consumer's job.\n *\n * @example\n * ```tsx\n * <Timeline>\n *   <Timeline.Item isFirst nodeType=\"status\" statusColor=\"green\">\n *     <Timeline.Content>\n *       <Timeline.Event actor=\"Florent\" action=\"moved to\" target=\"In Progress\" timestamp=\"3d ago\" />\n *     </Timeline.Content>\n *   </Timeline.Item>\n *   <Timeline.Item isLast variant=\"rich\" tone=\"active\" nodeType=\"icon\" icon={PaperPlaneTiltIcon}>\n *     <Timeline.Content>{inlineCard}</Timeline.Content>\n *   </Timeline.Item>\n * </Timeline>\n * ```\n */\nexport const Timeline = Object.assign(TimelineRoot, {\n  Item: TimelineItem,\n  Content: TimelineContent,\n  Event: TimelineEvent,\n});\n"],"names":["REKI_TIMELINE_VARIANTS","REKI_TIMELINE_DEFAULT_VARIANTS","TimelineRoot","children","className","cn","resolveConnector","p","initials","name","parts","TimelineNode","nodeType","avatar","Icon","statusColor","node","tone","jsx","Avatar","palette","REKI_TAG_COLORS","TimelineItem","props","variant","connector","showTop","showBottom","toneClass","jsxs","TimelineContent","TimelineEvent","actor","action","target","timestamp","truncate","Timeline"],"mappings":"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"}

package/dist/chunks/{toast-ivr4097bstjcjotf.js → toast-j47dl441zpxa1yw3.js}

@@ -2,10 +2,10 @@
 import { jsxs as o, jsx as l, Fragment as x } from "react/jsx-runtime";
 import { c as m } from "./cn-ct4n7r74mh8y0f48.js";
 import { r as d } from "./resolve-variant-t8jcltsizeg29ege.js";
-import { B as b } from "./button-nc5p1h28cwes0tjw.js";
+import { B as b } from "./button-fvlz1rzc3s1hpyxs.js";
 import { u as y } from "./portal-provider-off76og7tjyz96ys.js";
 import * as a from "react";
-import { a0 as k, bE as F, a2 as V, a1 as T, a4 as _, bF as H, bG as N, a5 as R, bH as C, _ as I } from "./vendor-base-ui-bgl9g5nkvqy3tn36.js";
+import { a0 as k, bE as F, a2 as V, a1 as T, a4 as _, bF as H, bG as N, a5 as R, bH as C, _ as I } from "./vendor-base-ui-djdjrfuoxlb1lubi.js";
 const s = a.forwardRef((t, e) => {
   const {
     alt: n,
@@ -367,4 +367,4 @@ export {
   e1 as c,
   z as u
 };
-//# sourceMappingURL=toast-ivr4097bstjcjotf.js.map
+//# sourceMappingURL=toast-j47dl441zpxa1yw3.js.map