@mastra/playground-ui 33.0.0-alpha.3 → 33.0.0

package/dist/page-header-C1ZlL4Ua.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-header-C1ZlL4Ua.cjs","sources":["../src/ds/components/PageHeader/page-header-description.tsx","../src/ds/components/PageHeader/page-header-title.tsx","../src/ds/components/PageHeader/page-header-root.tsx","../src/ds/components/PageHeader/page-header.tsx"],"sourcesContent":["import { cn } from '@/lib/utils';\n\nexport type PageHeaderDescriptionProps = {\n  children?: React.ReactNode;\n  isLoading?: boolean;\n};\n\nexport function PageHeaderDescription({ children, isLoading }: PageHeaderDescriptionProps) {\n  return (\n    <p\n      className={cn('text-neutral2 text-sm max-w-[35rem] flex flex-wrap gap-x-4 gap-y-1 mt-1', {\n        'bg-surface4 w-[40rem] max-w-[80%] rounded-md animate-pulse': isLoading,\n      })}\n    >\n      {isLoading ? <>&nbsp;</> : <>{children}</>}\n    </p>\n  );\n}\n","import { cn } from '@/lib/utils';\n\nexport type PageHeaderTitleProps = {\n  children?: React.ReactNode;\n  isLoading?: boolean;\n  size?: 'default' | 'smaller';\n};\n\nexport function PageHeaderTitle({ children, isLoading, size = 'default' }: PageHeaderTitleProps) {\n  return (\n    <h1\n      className={cn(\n        'text-neutral5 text-xl font-normal gap-2 flex items-center',\n        '[&>svg]:w-[1.25em] [&>svg]:h-[1.25em] [&>svg]:opacity-50',\n        {\n          'bg-surface4 w-60 max-w-[50%] rounded-md animate-pulse': isLoading,\n          'text-md': size === 'smaller',\n        },\n      )}\n    >\n      {isLoading ? <>&nbsp;</> : <>{children}</>}\n    </h1>\n  );\n}\n","import React from 'react';\nimport { PageHeaderDescription } from './page-header-description';\nimport { PageHeaderTitle } from './page-header-title';\nimport { cn } from '@/lib/utils';\n\nexport interface PageHeaderRootProps {\n  children?: React.ReactNode;\n  className?: string;\n  /**\n   * @deprecated Use the compound API with `<PageHeader.Title>` instead. This prop is kept for backward compatibility and will be removed in a future release.\n   */\n  title?: React.ReactNode;\n  /**\n   * @deprecated Use the compound API with `<PageHeader.Description>` instead. This prop is kept for backward compatibility and will be removed in a future release.\n   */\n  description?: React.ReactNode;\n  /**\n   * @deprecated Use the compound API and place the icon inside `<PageHeader.Title>` instead. This prop is kept for backward compatibility and will be removed in a future release.\n   */\n  icon?: React.ReactNode;\n  /**\n   * @deprecated Use the compound API and pass `isLoading` to `<PageHeader.Title>` / `<PageHeader.Description>` instead. This prop is kept for backward compatibility and will be removed in a future release.\n   */\n  isLoading?: boolean;\n}\n\nexport function PageHeaderRoot({ children, className, title, description, icon, isLoading }: PageHeaderRootProps) {\n  const useLegacyApi = children === undefined && title !== undefined;\n\n  return (\n    <header className={cn('w-full grid', className)}>\n      {useLegacyApi ? (\n        <>\n          <PageHeaderTitle isLoading={isLoading}>\n            {icon} {title}\n          </PageHeaderTitle>\n          {description !== undefined && (\n            <PageHeaderDescription isLoading={isLoading}>{description}</PageHeaderDescription>\n          )}\n        </>\n      ) : (\n        children\n      )}\n    </header>\n  );\n}\n","import { PageHeaderDescription } from './page-header-description';\nimport { PageHeaderRoot } from './page-header-root';\nimport { PageHeaderTitle } from './page-header-title';\n\nexport { type PageHeaderRootProps } from './page-header-root';\nexport { type PageHeaderTitleProps } from './page-header-title';\nexport { type PageHeaderDescriptionProps } from './page-header-description';\n\nexport const PageHeader = Object.assign(PageHeaderRoot, {\n  Title: PageHeaderTitle,\n  Description: PageHeaderDescription,\n});\n"],"names":["jsx","cn","Fragment","jsxs"],"mappings":";;;;;AAOO,SAAS,qBAAA,CAAsB,EAAE,QAAA,EAAU,SAAA,EAAU,EAA+B;AACzF,EAAA,uBACEA,cAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWC,SAAG,yEAAA,EAA2E;AAAA,QACvF,4DAAA,EAA8D;AAAA,OAC/D,CAAA;AAAA,MAEA,QAAA,EAAA,SAAA,mBAAYD,cAAA,CAAAE,mBAAA,EAAA,EAAE,QAAA,EAAA,GAAA,EAAM,CAAA,yDAAS,QAAA,EAAS;AAAA;AAAA,GACzC;AAEJ;;ACTO,SAAS,gBAAgB,EAAE,QAAA,EAAU,SAAA,EAAW,IAAA,GAAO,WAAU,EAAyB;AAC/F,EAAA,uBACEF,cAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWC,QAAA;AAAA,QACT,2DAAA;AAAA,QACA,0DAAA;AAAA,QACA;AAAA,UACE,uDAAA,EAAyD,SAAA;AAAA,UACzD,WAAW,IAAA,KAAS;AAAA;AACtB,OACF;AAAA,MAEC,QAAA,EAAA,SAAA,mBAAYD,cAAA,CAAAE,mBAAA,EAAA,EAAE,QAAA,EAAA,GAAA,EAAM,CAAA,yDAAS,QAAA,EAAS;AAAA;AAAA,GACzC;AAEJ;;ACGO,SAAS,cAAA,CAAe,EAAE,QAAA,EAAU,SAAA,EAAW,OAAO,WAAA,EAAa,IAAA,EAAM,WAAU,EAAwB;AAChH,EAAA,MAAM,YAAA,GAAe,QAAA,KAAa,MAAA,IAAa,KAAA,KAAU,MAAA;AAEzD,EAAA,uBACEF,cAAA,CAAC,YAAO,SAAA,EAAWC,QAAA,CAAG,eAAe,SAAS,CAAA,EAC3C,yCACCE,eAAA,CAAAD,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAAC,eAAA,CAAC,mBAAgB,SAAA,EACd,QAAA,EAAA;AAAA,MAAA,IAAA;AAAA,MAAK,GAAA;AAAA,MAAE;AAAA,KAAA,EACV,CAAA;AAAA,IACC,WAAA,KAAgB,MAAA,oBACfH,cAAA,CAAC,qBAAA,EAAA,EAAsB,WAAuB,QAAA,EAAA,WAAA,EAAY;AAAA,GAAA,EAE9D,IAEA,QAAA,EAEJ,CAAA;AAEJ;;ACrCO,MAAM,UAAA,GAAa,MAAA,CAAO,MAAA,CAAO,cAAA,EAAgB;AAAA,EACtD,KAAA,EAAO,eAAA;AAAA,EACP,WAAA,EAAa;AACf,CAAC;;;;"}

package/dist/page-heading-context-D3yjYoJE.js

@@ -0,0 +1,9 @@
+import { createContext, useContext } from 'react';
+
+const PageHeadingContext = createContext(void 0);
+function usePageHeading() {
+  return useContext(PageHeadingContext);
+}
+
+export { PageHeadingContext as P, usePageHeading as u };
+//# sourceMappingURL=page-heading-context-D3yjYoJE.js.map

package/dist/page-heading-context-D3yjYoJE.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-heading-context-D3yjYoJE.js","sources":["../src/ds/components/PageLayout/page-heading-context.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nexport const PageHeadingContext = createContext<string | undefined>(undefined);\n\nexport function usePageHeading() {\n  return useContext(PageHeadingContext);\n}\n"],"names":[],"mappings":";;AAEO,MAAM,kBAAA,GAAqB,cAAkC,MAAS;AAEtE,SAAS,cAAA,GAAiB;AAC/B,EAAA,OAAO,WAAW,kBAAkB,CAAA;AACtC;;;;"}

package/dist/page-heading-context-Du-CpxAx.cjs

@@ -0,0 +1,12 @@
+'use strict';
+
+const React = require('react');
+
+const PageHeadingContext = React.createContext(void 0);
+function usePageHeading() {
+  return React.useContext(PageHeadingContext);
+}
+
+exports.PageHeadingContext = PageHeadingContext;
+exports.usePageHeading = usePageHeading;
+//# sourceMappingURL=page-heading-context-Du-CpxAx.cjs.map

package/dist/page-heading-context-Du-CpxAx.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-heading-context-Du-CpxAx.cjs","sources":["../src/ds/components/PageLayout/page-heading-context.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nexport const PageHeadingContext = createContext<string | undefined>(undefined);\n\nexport function usePageHeading() {\n  return useContext(PageHeadingContext);\n}\n"],"names":["createContext","useContext"],"mappings":";;;;AAEO,MAAM,kBAAA,GAAqBA,oBAAkC,MAAS;AAEtE,SAAS,cAAA,GAAiB;AAC/B,EAAA,OAAOC,iBAAW,kBAAkB,CAAA;AACtC;;;;;"}

package/dist/pending-indicator-BxD-kwEk.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const utils = require('./utils-vA5sWo9W.cjs');
+
+const PendingIndicator = ({ className, testId = "pending-indicator" }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn("flex items-center text-neutral3", className), "data-testid": testId, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-2 rounded-full bg-neutral3 animate-pulse" }) });
+
+exports.PendingIndicator = PendingIndicator;
+//# sourceMappingURL=pending-indicator-BxD-kwEk.cjs.map

package/dist/pending-indicator-BxD-kwEk.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"pending-indicator-BxD-kwEk.cjs","sources":["../src/ds/components/PendingIndicator/pending-indicator.tsx"],"sourcesContent":["import { cn } from '@/lib/utils';\n\nexport interface PendingIndicatorProps {\n  className?: string;\n  testId?: string;\n}\n\n/**\n * A single dot that fades in and out indefinitely, signalling the agent is\n * working before any visible output has streamed.\n */\nexport const PendingIndicator = ({ className, testId = 'pending-indicator' }: PendingIndicatorProps) => (\n  <div className={cn('flex items-center text-neutral3', className)} data-testid={testId}>\n    <span className=\"size-2 rounded-full bg-neutral3 animate-pulse\" />\n  </div>\n);\n"],"names":["cn"],"mappings":";;;;;AAWO,MAAM,gBAAA,GAAmB,CAAC,EAAE,SAAA,EAAW,SAAS,mBAAA,EAAoB,oCACxE,KAAA,EAAA,EAAI,SAAA,EAAWA,SAAG,iCAAA,EAAmC,SAAS,GAAG,aAAA,EAAa,MAAA,EAC7E,yCAAC,MAAA,EAAA,EAAK,SAAA,EAAU,iDAAgD,CAAA,EAClE;;;;"}

package/dist/pending-indicator-DmowRHLo.js

@@ -0,0 +1,7 @@
+import { jsx } from 'react/jsx-runtime';
+import { c as cn } from './utils-CzYGxqbG.js';
+
+const PendingIndicator = ({ className, testId = "pending-indicator" }) => /* @__PURE__ */ jsx("div", { className: cn("flex items-center text-neutral3", className), "data-testid": testId, children: /* @__PURE__ */ jsx("span", { className: "size-2 rounded-full bg-neutral3 animate-pulse" }) });
+
+export { PendingIndicator as P };
+//# sourceMappingURL=pending-indicator-DmowRHLo.js.map

package/dist/pending-indicator-DmowRHLo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pending-indicator-DmowRHLo.js","sources":["../src/ds/components/PendingIndicator/pending-indicator.tsx"],"sourcesContent":["import { cn } from '@/lib/utils';\n\nexport interface PendingIndicatorProps {\n  className?: string;\n  testId?: string;\n}\n\n/**\n * A single dot that fades in and out indefinitely, signalling the agent is\n * working before any visible output has streamed.\n */\nexport const PendingIndicator = ({ className, testId = 'pending-indicator' }: PendingIndicatorProps) => (\n  <div className={cn('flex items-center text-neutral3', className)} data-testid={testId}>\n    <span className=\"size-2 rounded-full bg-neutral3 animate-pulse\" />\n  </div>\n);\n"],"names":[],"mappings":";;;AAWO,MAAM,gBAAA,GAAmB,CAAC,EAAE,SAAA,EAAW,SAAS,mBAAA,EAAoB,yBACxE,KAAA,EAAA,EAAI,SAAA,EAAW,GAAG,iCAAA,EAAmC,SAAS,GAAG,aAAA,EAAa,MAAA,EAC7E,8BAAC,MAAA,EAAA,EAAK,SAAA,EAAU,iDAAgD,CAAA,EAClE;;;;"}

package/dist/popover-CRLP2Ay_.js

@@ -0,0 +1,75 @@
+import { jsx } from 'react/jsx-runtime';
+import { Popover as Popover$1 } from '@base-ui/react/popover';
+import * as React from 'react';
+import { u as usePortalContainer } from './portal-container-BlQ6JKob.js';
+import { a as asChildRenderProps } from './as-child-N1qMDCr8.js';
+import { c as cn } from './utils-CzYGxqbG.js';
+
+const Popover = Popover$1.Root;
+const PopoverTrigger = React.forwardRef(
+  ({ asChild, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(Popover$1.Trigger, { ref, ...asChildRenderProps(asChild, children), ...props, children: asChild ? void 0 : children });
+  }
+);
+PopoverTrigger.displayName = "PopoverTrigger";
+const PopoverContent = React.forwardRef(
+  ({ className, container, align = "center", alignOffset = 0, side = "bottom", sideOffset = 4, ...props }, ref) => {
+    const classNameString = typeof className === "string" ? className : void 0;
+    const resolvedContainer = usePortalContainer(container);
+    return /* @__PURE__ */ jsx(Popover$1.Portal, { container: resolvedContainer, children: /* @__PURE__ */ jsx(
+      Popover$1.Positioner,
+      {
+        align,
+        alignOffset,
+        side,
+        sideOffset,
+        className: "z-50 outline-none",
+        children: /* @__PURE__ */ jsx(
+          Popover$1.Popup,
+          {
+            ref,
+            "data-slot": "popover-content",
+            className: cn(
+              "z-50 w-72 rounded-xl border border-border1 bg-surface3 text-neutral5 shadow-dialog focus-visible:outline-hidden origin-[var(--transform-origin)]",
+              "data-[open]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[open]:fade-in-0 data-[closed]:zoom-out-95 data-[open]:zoom-in-95",
+              "data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1",
+              classNameString && /\bp[trblxy]?-\S+/.test(classNameString) ? false : `py-3.5 px-3`,
+              className
+            ),
+            ...props
+          }
+        )
+      }
+    ) });
+  }
+);
+PopoverContent.displayName = "PopoverContent";
+function HoverPopover({
+  children,
+  ...props
+}) {
+  const [open, setOpen] = React.useState(false);
+  const timeoutRef = React.useRef(void 0);
+  const handleOpen = React.useCallback(() => {
+    clearTimeout(timeoutRef.current);
+    setOpen(true);
+  }, []);
+  const handleClose = React.useCallback(() => {
+    timeoutRef.current = setTimeout(() => setOpen(false), 150);
+  }, []);
+  React.useEffect(() => () => clearTimeout(timeoutRef.current), []);
+  return /* @__PURE__ */ jsx(Popover, { open, onOpenChange: setOpen, ...props, children: /* @__PURE__ */ jsx(
+    "span",
+    {
+      onMouseEnter: handleOpen,
+      onMouseLeave: handleClose,
+      onFocusCapture: handleOpen,
+      onBlurCapture: handleClose,
+      style: { display: "contents" },
+      children
+    }
+  ) });
+}
+
+export { HoverPopover as H, Popover as P, PopoverContent as a, PopoverTrigger as b };
+//# sourceMappingURL=popover-CRLP2Ay_.js.map

package/dist/popover-CRLP2Ay_.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-CRLP2Ay_.js","sources":["../src/ds/components/Popover/popover.tsx"],"sourcesContent":["import { Popover as PopoverPrimitive } from '@base-ui/react/popover';\nimport * as React from 'react';\n\nimport { usePortalContainer } from '@/ds/primitives/portal-container';\nimport { asChildRenderProps } from '@/lib/as-child';\nimport { cn } from '@/lib/utils';\n\nconst Popover = PopoverPrimitive.Root;\n\ntype PopoverTriggerProps = PopoverPrimitive.Trigger.Props & {\n  /** @deprecated Use Base UI's `render` prop instead, e.g. `render={<Button />}`. */\n  asChild?: boolean;\n};\n\nconst PopoverTrigger = React.forwardRef<HTMLButtonElement, PopoverTriggerProps>(\n  ({ asChild, children, ...props }, ref) => {\n    return (\n      <PopoverPrimitive.Trigger ref={ref} {...asChildRenderProps(asChild, children)} {...props}>\n        {asChild ? undefined : children}\n      </PopoverPrimitive.Trigger>\n    );\n  },\n);\nPopoverTrigger.displayName = 'PopoverTrigger';\n\ntype PopoverContentProps = PopoverPrimitive.Popup.Props &\n  Pick<PopoverPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'> & {\n    /** Optional portal container, forwarded to `Popover.Portal`. */\n    container?: HTMLElement | null;\n  };\n\nconst PopoverContent = React.forwardRef<HTMLDivElement, PopoverContentProps>(\n  ({ className, container, align = 'center', alignOffset = 0, side = 'bottom', sideOffset = 4, ...props }, ref) => {\n    const classNameString = typeof className === 'string' ? className : undefined;\n    // Default to the nearest SideDialog/Drawer popup so the content stays\n    // interactive inside a modal drawer; an explicit `container` still wins.\n    const resolvedContainer = usePortalContainer(container);\n\n    return (\n      <PopoverPrimitive.Portal container={resolvedContainer}>\n        <PopoverPrimitive.Positioner\n          align={align}\n          alignOffset={alignOffset}\n          side={side}\n          sideOffset={sideOffset}\n          className=\"z-50 outline-none\"\n        >\n          <PopoverPrimitive.Popup\n            ref={ref}\n            data-slot=\"popover-content\"\n            className={cn(\n              'z-50 w-72 rounded-xl border border-border1 bg-surface3 text-neutral5 shadow-dialog focus-visible:outline-hidden origin-[var(--transform-origin)]',\n              'data-[open]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[open]:fade-in-0 data-[closed]:zoom-out-95 data-[open]:zoom-in-95',\n              'data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1',\n              classNameString && /\\bp[trblxy]?-\\S+/.test(classNameString) ? false : `py-3.5 px-3`,\n              className,\n            )}\n            {...props}\n          />\n        </PopoverPrimitive.Positioner>\n      </PopoverPrimitive.Portal>\n    );\n  },\n);\nPopoverContent.displayName = 'PopoverContent';\n\nfunction HoverPopover({\n  children,\n  ...props\n}: Omit<React.ComponentProps<typeof Popover>, 'children'> & { children?: React.ReactNode }) {\n  const [open, setOpen] = React.useState(false);\n  const timeoutRef = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n\n  const handleOpen = React.useCallback(() => {\n    clearTimeout(timeoutRef.current);\n    setOpen(true);\n  }, []);\n\n  const handleClose = React.useCallback(() => {\n    timeoutRef.current = setTimeout(() => setOpen(false), 150);\n  }, []);\n\n  React.useEffect(() => () => clearTimeout(timeoutRef.current), []);\n\n  return (\n    <Popover open={open} onOpenChange={setOpen} {...props}>\n      <span\n        onMouseEnter={handleOpen}\n        onMouseLeave={handleClose}\n        onFocusCapture={handleOpen}\n        onBlurCapture={handleClose}\n        style={{ display: 'contents' }}\n      >\n        {children}\n      </span>\n    </Popover>\n  );\n}\n\nexport { Popover, PopoverTrigger, PopoverContent, HoverPopover };\n"],"names":["PopoverPrimitive"],"mappings":"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"}

package/dist/popover-ttQgAb0m.cjs

@@ -0,0 +1,99 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const popover = require('@base-ui/react/popover');
+const React = require('react');
+const portalContainer = require('./portal-container-BsvHZxj7.cjs');
+const asChild = require('./as-child-Dgr1RHLO.cjs');
+const utils = require('./utils-vA5sWo9W.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);
+
+const Popover = popover.Popover.Root;
+const PopoverTrigger = React__namespace.forwardRef(
+  ({ asChild: asChild$1, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(popover.Popover.Trigger, { ref, ...asChild.asChildRenderProps(asChild$1, children), ...props, children: asChild$1 ? void 0 : children });
+  }
+);
+PopoverTrigger.displayName = "PopoverTrigger";
+const PopoverContent = React__namespace.forwardRef(
+  ({ className, container, align = "center", alignOffset = 0, side = "bottom", sideOffset = 4, ...props }, ref) => {
+    const classNameString = typeof className === "string" ? className : void 0;
+    const resolvedContainer = portalContainer.usePortalContainer(container);
+    return /* @__PURE__ */ jsxRuntime.jsx(popover.Popover.Portal, { container: resolvedContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+      popover.Popover.Positioner,
+      {
+        align,
+        alignOffset,
+        side,
+        sideOffset,
+        className: "z-50 outline-none",
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          popover.Popover.Popup,
+          {
+            ref,
+            "data-slot": "popover-content",
+            className: utils.cn(
+              "z-50 w-72 rounded-xl border border-border1 bg-surface3 text-neutral5 shadow-dialog focus-visible:outline-hidden origin-[var(--transform-origin)]",
+              "data-[open]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[open]:fade-in-0 data-[closed]:zoom-out-95 data-[open]:zoom-in-95",
+              "data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1",
+              classNameString && /\bp[trblxy]?-\S+/.test(classNameString) ? false : `py-3.5 px-3`,
+              className
+            ),
+            ...props
+          }
+        )
+      }
+    ) });
+  }
+);
+PopoverContent.displayName = "PopoverContent";
+function HoverPopover({
+  children,
+  ...props
+}) {
+  const [open, setOpen] = React__namespace.useState(false);
+  const timeoutRef = React__namespace.useRef(void 0);
+  const handleOpen = React__namespace.useCallback(() => {
+    clearTimeout(timeoutRef.current);
+    setOpen(true);
+  }, []);
+  const handleClose = React__namespace.useCallback(() => {
+    timeoutRef.current = setTimeout(() => setOpen(false), 150);
+  }, []);
+  React__namespace.useEffect(() => () => clearTimeout(timeoutRef.current), []);
+  return /* @__PURE__ */ jsxRuntime.jsx(Popover, { open, onOpenChange: setOpen, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      onMouseEnter: handleOpen,
+      onMouseLeave: handleClose,
+      onFocusCapture: handleOpen,
+      onBlurCapture: handleClose,
+      style: { display: "contents" },
+      children
+    }
+  ) });
+}
+
+exports.HoverPopover = HoverPopover;
+exports.Popover = Popover;
+exports.PopoverContent = PopoverContent;
+exports.PopoverTrigger = PopoverTrigger;
+//# sourceMappingURL=popover-ttQgAb0m.cjs.map

package/dist/popover-ttQgAb0m.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-ttQgAb0m.cjs","sources":["../src/ds/components/Popover/popover.tsx"],"sourcesContent":["import { Popover as PopoverPrimitive } from '@base-ui/react/popover';\nimport * as React from 'react';\n\nimport { usePortalContainer } from '@/ds/primitives/portal-container';\nimport { asChildRenderProps } from '@/lib/as-child';\nimport { cn } from '@/lib/utils';\n\nconst Popover = PopoverPrimitive.Root;\n\ntype PopoverTriggerProps = PopoverPrimitive.Trigger.Props & {\n  /** @deprecated Use Base UI's `render` prop instead, e.g. `render={<Button />}`. */\n  asChild?: boolean;\n};\n\nconst PopoverTrigger = React.forwardRef<HTMLButtonElement, PopoverTriggerProps>(\n  ({ asChild, children, ...props }, ref) => {\n    return (\n      <PopoverPrimitive.Trigger ref={ref} {...asChildRenderProps(asChild, children)} {...props}>\n        {asChild ? undefined : children}\n      </PopoverPrimitive.Trigger>\n    );\n  },\n);\nPopoverTrigger.displayName = 'PopoverTrigger';\n\ntype PopoverContentProps = PopoverPrimitive.Popup.Props &\n  Pick<PopoverPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'> & {\n    /** Optional portal container, forwarded to `Popover.Portal`. */\n    container?: HTMLElement | null;\n  };\n\nconst PopoverContent = React.forwardRef<HTMLDivElement, PopoverContentProps>(\n  ({ className, container, align = 'center', alignOffset = 0, side = 'bottom', sideOffset = 4, ...props }, ref) => {\n    const classNameString = typeof className === 'string' ? className : undefined;\n    // Default to the nearest SideDialog/Drawer popup so the content stays\n    // interactive inside a modal drawer; an explicit `container` still wins.\n    const resolvedContainer = usePortalContainer(container);\n\n    return (\n      <PopoverPrimitive.Portal container={resolvedContainer}>\n        <PopoverPrimitive.Positioner\n          align={align}\n          alignOffset={alignOffset}\n          side={side}\n          sideOffset={sideOffset}\n          className=\"z-50 outline-none\"\n        >\n          <PopoverPrimitive.Popup\n            ref={ref}\n            data-slot=\"popover-content\"\n            className={cn(\n              'z-50 w-72 rounded-xl border border-border1 bg-surface3 text-neutral5 shadow-dialog focus-visible:outline-hidden origin-[var(--transform-origin)]',\n              'data-[open]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[open]:fade-in-0 data-[closed]:zoom-out-95 data-[open]:zoom-in-95',\n              'data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1',\n              classNameString && /\\bp[trblxy]?-\\S+/.test(classNameString) ? false : `py-3.5 px-3`,\n              className,\n            )}\n            {...props}\n          />\n        </PopoverPrimitive.Positioner>\n      </PopoverPrimitive.Portal>\n    );\n  },\n);\nPopoverContent.displayName = 'PopoverContent';\n\nfunction HoverPopover({\n  children,\n  ...props\n}: Omit<React.ComponentProps<typeof Popover>, 'children'> & { children?: React.ReactNode }) {\n  const [open, setOpen] = React.useState(false);\n  const timeoutRef = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n\n  const handleOpen = React.useCallback(() => {\n    clearTimeout(timeoutRef.current);\n    setOpen(true);\n  }, []);\n\n  const handleClose = React.useCallback(() => {\n    timeoutRef.current = setTimeout(() => setOpen(false), 150);\n  }, []);\n\n  React.useEffect(() => () => clearTimeout(timeoutRef.current), []);\n\n  return (\n    <Popover open={open} onOpenChange={setOpen} {...props}>\n      <span\n        onMouseEnter={handleOpen}\n        onMouseLeave={handleClose}\n        onFocusCapture={handleOpen}\n        onBlurCapture={handleClose}\n        style={{ display: 'contents' }}\n      >\n        {children}\n      </span>\n    </Popover>\n  );\n}\n\nexport { Popover, PopoverTrigger, PopoverContent, HoverPopover };\n"],"names":["PopoverPrimitive","React","asChild","jsx","asChildRenderProps","usePortalContainer","cn"],"mappings":"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"}

package/dist/portal-container-BlQ6JKob.js

@@ -0,0 +1,17 @@
+import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+
+const PortalContainerContext = React.createContext(void 0);
+function PortalContainerProvider({
+  container,
+  children
+}) {
+  return /* @__PURE__ */ jsx(PortalContainerContext.Provider, { value: container ?? void 0, children });
+}
+function usePortalContainer(container) {
+  const fromContext = React.useContext(PortalContainerContext);
+  return container ?? fromContext ?? void 0;
+}
+
+export { PortalContainerProvider as P, usePortalContainer as u };
+//# sourceMappingURL=portal-container-BlQ6JKob.js.map

package/dist/portal-container-BlQ6JKob.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"portal-container-BlQ6JKob.js","sources":["../src/ds/primitives/portal-container.tsx"],"sourcesContent":["/* eslint-disable react-refresh/only-export-components */\nimport * as React from 'react';\n\n/** Anything Base UI's `*.Portal` `container` accepts. */\nexport type PortalContainer =\n  | HTMLElement\n  | ShadowRoot\n  | React.RefObject<HTMLElement | ShadowRoot | null>\n  | null\n  | undefined;\n\n// Why: modal SideDialog/Drawer traps focus+clicks inside its region. Popups portal to\n// document.body by default → land outside the trap → unclickable. SideDialog publishes a\n// node inside the trap; popups portal there instead.\n//\n// Sentinel is `undefined`, never `null`: Base UI reads container={undefined} as \"portal to\n// body\", but container={null} as \"not ready, render nothing\" — a leaked null opens the popup\n// in state but mounts it nowhere (the model-picker bug).\nconst PortalContainerContext = React.createContext<HTMLElement | undefined>(undefined);\n\nexport function PortalContainerProvider({\n  container,\n  children,\n}: {\n  container: HTMLElement | null;\n  children: React.ReactNode;\n}) {\n  // Accept null for callers; normalize so null never reaches a portal.\n  return <PortalContainerContext.Provider value={container ?? undefined}>{children}</PortalContainerContext.Provider>;\n}\n\n/** Resolve a popup's portal target: explicit `container` → provider → `undefined` (body). Never null. */\nexport function usePortalContainer(container?: PortalContainer): Exclude<PortalContainer, null> {\n  const fromContext = React.useContext(PortalContainerContext);\n  return container ?? fromContext ?? undefined;\n}\n"],"names":[],"mappings":";;;AAkBA,MAAM,sBAAA,GAAyB,KAAA,CAAM,aAAA,CAAuC,MAAS,CAAA;AAE9E,SAAS,uBAAA,CAAwB;AAAA,EACtC,SAAA;AAAA,EACA;AACF,CAAA,EAGG;AAED,EAAA,2BAAQ,sBAAA,CAAuB,QAAA,EAAvB,EAAgC,KAAA,EAAO,SAAA,IAAa,QAAY,QAAA,EAAS,CAAA;AACnF;AAGO,SAAS,mBAAmB,SAAA,EAA6D;AAC9F,EAAA,MAAM,WAAA,GAAc,KAAA,CAAM,UAAA,CAAW,sBAAsB,CAAA;AAC3D,EAAA,OAAO,aAAa,WAAA,IAAe,MAAA;AACrC;;;;"}

package/dist/portal-container-BsvHZxj7.cjs

@@ -0,0 +1,39 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+
+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);
+
+const PortalContainerContext = React__namespace.createContext(void 0);
+function PortalContainerProvider({
+  container,
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(PortalContainerContext.Provider, { value: container ?? void 0, children });
+}
+function usePortalContainer(container) {
+  const fromContext = React__namespace.useContext(PortalContainerContext);
+  return container ?? fromContext ?? void 0;
+}
+
+exports.PortalContainerProvider = PortalContainerProvider;
+exports.usePortalContainer = usePortalContainer;
+//# sourceMappingURL=portal-container-BsvHZxj7.cjs.map

package/dist/portal-container-BsvHZxj7.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"portal-container-BsvHZxj7.cjs","sources":["../src/ds/primitives/portal-container.tsx"],"sourcesContent":["/* eslint-disable react-refresh/only-export-components */\nimport * as React from 'react';\n\n/** Anything Base UI's `*.Portal` `container` accepts. */\nexport type PortalContainer =\n  | HTMLElement\n  | ShadowRoot\n  | React.RefObject<HTMLElement | ShadowRoot | null>\n  | null\n  | undefined;\n\n// Why: modal SideDialog/Drawer traps focus+clicks inside its region. Popups portal to\n// document.body by default → land outside the trap → unclickable. SideDialog publishes a\n// node inside the trap; popups portal there instead.\n//\n// Sentinel is `undefined`, never `null`: Base UI reads container={undefined} as \"portal to\n// body\", but container={null} as \"not ready, render nothing\" — a leaked null opens the popup\n// in state but mounts it nowhere (the model-picker bug).\nconst PortalContainerContext = React.createContext<HTMLElement | undefined>(undefined);\n\nexport function PortalContainerProvider({\n  container,\n  children,\n}: {\n  container: HTMLElement | null;\n  children: React.ReactNode;\n}) {\n  // Accept null for callers; normalize so null never reaches a portal.\n  return <PortalContainerContext.Provider value={container ?? undefined}>{children}</PortalContainerContext.Provider>;\n}\n\n/** Resolve a popup's portal target: explicit `container` → provider → `undefined` (body). Never null. */\nexport function usePortalContainer(container?: PortalContainer): Exclude<PortalContainer, null> {\n  const fromContext = React.useContext(PortalContainerContext);\n  return container ?? fromContext ?? undefined;\n}\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAkBA,MAAM,sBAAA,GAAyBA,gBAAA,CAAM,aAAA,CAAuC,MAAS,CAAA;AAE9E,SAAS,uBAAA,CAAwB;AAAA,EACtC,SAAA;AAAA,EACA;AACF,CAAA,EAGG;AAED,EAAA,sCAAQ,sBAAA,CAAuB,QAAA,EAAvB,EAAgC,KAAA,EAAO,SAAA,IAAa,QAAY,QAAA,EAAS,CAAA;AACnF;AAGO,SAAS,mBAAmB,SAAA,EAA6D;AAC9F,EAAA,MAAM,WAAA,GAAcA,gBAAA,CAAM,UAAA,CAAW,sBAAsB,CAAA;AAC3D,EAAA,OAAO,aAAa,WAAA,IAAe,MAAA;AACrC;;;;;"}

package/dist/process-step-progress-bar-C0mArMKD.js

@@ -0,0 +1,136 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { XIcon, CheckIcon } from 'lucide-react';
+import { S as Spinner } from './spinner-DuizqJj9.js';
+import { t as transitions } from './transitions-tFfqxz40.js';
+import { c as cn } from './utils-CzYGxqbG.js';
+
+function getStatusIcon(status) {
+  switch (status) {
+    case "running":
+      return /* @__PURE__ */ jsx(Spinner, {});
+    case "success":
+      return /* @__PURE__ */ jsx(CheckIcon, {});
+    case "failed":
+      return /* @__PURE__ */ jsx(XIcon, {});
+    default:
+      return null;
+  }
+}
+
+function ProcessStepListItem({ stepId, step, isActive, position }) {
+  const formatStepTitle = (stepId2) => {
+    return stepId2.charAt(0).toUpperCase() + stepId2.slice(1).replace(/-/g, " ");
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("grid gap-6 grid-cols-[1fr_auto] py-3 px-4 rounded-lg", transitions.all, {
+        "border border-dashed border-neutral2 bg-surface3": isActive
+      }),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[auto_1fr] gap-2", children: [
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: cn("text-ui-md min-w-6 flex justify-end", transitions.colors, {
+                "text-neutral5": isActive || step.status === "success",
+                "text-neutral3": !isActive && step.status !== "success"
+              }),
+              children: [
+                position,
+                "."
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx(
+              "h4",
+              {
+                className: cn("text-ui-md", transitions.colors, {
+                  "text-neutral5": isActive || step.status === "success",
+                  "text-neutral3": !isActive && step.status !== "success"
+                }),
+                children: formatStepTitle(stepId)
+              }
+            ),
+            step.description && /* @__PURE__ */ jsx("p", { className: "text-ui-md text-neutral2 -mt-0.5", children: step.description })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "w-[1.75rem] h-[1.75rem] rounded-full flex items-center justify-center self-center",
+              transitions.all,
+              {
+                "border border-neutral2 border-dashed": step.status === "pending",
+                "[&>svg]:text-white [&>svg]:w-4 [&>svg]:h-4": step.status !== "running",
+                "w-[1.75rem] h-[1.75rem]": step.status === "running",
+                "bg-accent1Dark shadow-glow-accent1": step.status === "success",
+                "bg-accent2Dark shadow-glow-accent2": step.status === "failed",
+                "scale-110": step.status === "success" || step.status === "failed"
+              }
+            ),
+            children: getStatusIcon(step.status)
+          }
+        )
+      ]
+    }
+  );
+}
+
+function ProcessStepList({ currentStep, steps = [], className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn(className), children: steps.map((step, idx) => /* @__PURE__ */ jsx(
+    ProcessStepListItem,
+    {
+      stepId: step.id,
+      step,
+      isActive: currentStep?.id === step.id,
+      position: idx + 1
+    },
+    step.id
+  )) });
+}
+
+function ProcessStepProgressBar({ steps }) {
+  const totalSteps = steps.length;
+  const completedSteps = steps.filter((step) => step.status === "success").length;
+  return /* @__PURE__ */ jsxs("div", { className: "flex justify-center flex-col gap-4 content-center w-full", children: [
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-[0_repeat(9,1fr)] w-full", children: steps.map((step, idx) => {
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn("flex justify-end items-center relative h-[2rem]", transitions.colors, {
+            "bg-accent1Dark": step.status === "success" && steps?.[idx - 1]?.status === "success"
+          }),
+          children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "w-[2rem] h-[2rem] rounded-full flex items-center justify-center self-center absolute right-0 translate-x-[50%] bg-surface3 z-10 text-neutral3 font-bold text-ui-sm",
+                transitions.all,
+                {
+                  "border border-neutral2 border-dashed": step.status === "pending",
+                  "[&>svg]:text-surface1 [&>svg]:w-[1.1rem] [&>svg]:h-[1.1rem]": step.status !== "running",
+                  "bg-accent1Dark text-white shadow-glow-accent1 scale-110": step.status === "success",
+                  "bg-accent2Dark text-white shadow-glow-accent2 scale-110": step.status === "failed"
+                }
+              ),
+              children: step.status === "running" ? /* @__PURE__ */ jsx(Spinner, {}) : idx + 1
+            }
+          )
+        },
+        step.id
+      );
+    }) }),
+    /* @__PURE__ */ jsxs("div", { className: cn("text-xs text-neutral3 text-center", transitions.colors), children: [
+      completedSteps,
+      " of ",
+      totalSteps,
+      " steps completed"
+    ] })
+  ] });
+}
+
+export { ProcessStepList as P, ProcessStepListItem as a, ProcessStepProgressBar as b, getStatusIcon as g };
+//# sourceMappingURL=process-step-progress-bar-C0mArMKD.js.map

package/dist/process-step-progress-bar-C0mArMKD.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"process-step-progress-bar-C0mArMKD.js","sources":["../src/ds/components/Steps/shared.tsx","../src/ds/components/Steps/process-step-list-item.tsx","../src/ds/components/Steps/process-step-list.tsx","../src/ds/components/Steps/process-step-progress-bar.tsx"],"sourcesContent":["import { CheckIcon, XIcon } from 'lucide-react';\nimport { Spinner } from '@/ds/components/Spinner';\n\nexport function getStatusIcon(status: string) {\n  switch (status) {\n    case 'running':\n      return <Spinner />;\n    case 'success':\n      return <CheckIcon />;\n    case 'failed':\n      return <XIcon />;\n    default:\n      return null;\n  }\n}\n\nexport type ProcessStep = {\n  id: string;\n  status: string;\n  description: string;\n  title: string;\n  isActive: boolean;\n};\n","import { getStatusIcon } from './shared';\nimport type { ProcessStep } from './shared';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport type ProcessStepListItemProps = {\n  stepId: string;\n  step: ProcessStep;\n  isActive: boolean;\n  position: number;\n};\n\nexport function ProcessStepListItem({ stepId, step, isActive, position }: ProcessStepListItemProps) {\n  // Always format the step ID as the title\n  const formatStepTitle = (stepId: string) => {\n    return stepId.charAt(0).toUpperCase() + stepId.slice(1).replace(/-/g, ' ');\n  };\n\n  return (\n    <div\n      className={cn('grid gap-6 grid-cols-[1fr_auto] py-3 px-4 rounded-lg', transitions.all, {\n        'border border-dashed border-neutral2 bg-surface3': isActive,\n      })}\n    >\n      <div className=\"grid grid-cols-[auto_1fr] gap-2\">\n        <span\n          className={cn('text-ui-md min-w-6 flex justify-end', transitions.colors, {\n            'text-neutral5': isActive || step.status === 'success',\n            'text-neutral3': !isActive && step.status !== 'success',\n          })}\n        >\n          {position}.\n        </span>\n        <div>\n          <h4\n            className={cn('text-ui-md', transitions.colors, {\n              'text-neutral5': isActive || step.status === 'success',\n              'text-neutral3': !isActive && step.status !== 'success',\n            })}\n          >\n            {formatStepTitle(stepId)}\n          </h4>\n          {step.description && <p className=\"text-ui-md text-neutral2 -mt-0.5\">{step.description}</p>}\n        </div>\n      </div>\n      <div\n        className={cn(\n          'w-[1.75rem] h-[1.75rem] rounded-full flex items-center justify-center self-center',\n          transitions.all,\n          {\n            'border border-neutral2 border-dashed': step.status === 'pending',\n            '[&>svg]:text-white [&>svg]:w-4 [&>svg]:h-4': step.status !== 'running',\n            'w-[1.75rem] h-[1.75rem]': step.status === 'running',\n            'bg-accent1Dark shadow-glow-accent1': step.status === 'success',\n            'bg-accent2Dark shadow-glow-accent2': step.status === 'failed',\n            'scale-110': step.status === 'success' || step.status === 'failed',\n          },\n        )}\n      >\n        {getStatusIcon(step.status)}\n      </div>\n    </div>\n  );\n}\n","import { ProcessStepListItem } from './process-step-list-item';\nimport type { ProcessStep } from './shared';\nimport { cn } from '@/lib/utils';\n\nexport type ProcessStepListProps = {\n  currentStep: ProcessStep | null;\n  steps: ProcessStep[];\n  className?: string;\n};\n\nexport function ProcessStepList({ currentStep, steps = [], className }: ProcessStepListProps) {\n  return (\n    <div className={cn(className)}>\n      {steps.map((step: ProcessStep, idx: number) => (\n        <ProcessStepListItem\n          key={step.id}\n          stepId={step.id}\n          step={step}\n          isActive={currentStep?.id === step.id}\n          position={idx + 1}\n        />\n      ))}\n    </div>\n  );\n}\n","import type { ProcessStep } from './shared';\nimport { Spinner } from '@/ds/components/Spinner';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport type ProcessStepProgressBarProps = {\n  steps: ProcessStep[];\n};\n\nexport function ProcessStepProgressBar({ steps }: ProcessStepProgressBarProps) {\n  const totalSteps = steps.length;\n  const completedSteps = steps.filter(step => step.status === 'success').length;\n\n  return (\n    <div className=\"flex justify-center flex-col gap-4 content-center w-full\">\n      <div className=\"grid grid-cols-[0_repeat(9,1fr)] w-full\">\n        {steps.map((step: ProcessStep, idx: number) => {\n          return (\n            <div\n              key={step.id}\n              className={cn('flex justify-end items-center relative h-[2rem]', transitions.colors, {\n                'bg-accent1Dark': step.status === 'success' && steps?.[idx - 1]?.status === 'success',\n              })}\n            >\n              <div\n                className={cn(\n                  'w-[2rem] h-[2rem] rounded-full flex items-center justify-center self-center absolute right-0 translate-x-[50%] bg-surface3 z-10 text-neutral3 font-bold text-ui-sm',\n                  transitions.all,\n                  {\n                    'border border-neutral2 border-dashed': step.status === 'pending',\n                    '[&>svg]:text-surface1 [&>svg]:w-[1.1rem] [&>svg]:h-[1.1rem]': step.status !== 'running',\n                    'bg-accent1Dark text-white shadow-glow-accent1 scale-110': step.status === 'success',\n                    'bg-accent2Dark text-white shadow-glow-accent2 scale-110': step.status === 'failed',\n                  },\n                )}\n              >\n                {step.status === 'running' ? <Spinner /> : idx + 1}\n              </div>\n            </div>\n          );\n        })}\n      </div>\n      <div className={cn('text-xs text-neutral3 text-center', transitions.colors)}>\n        {completedSteps} of {totalSteps} steps completed\n      </div>\n    </div>\n  );\n}\n"],"names":["stepId"],"mappings":"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"}