@dust-tt/sparkle 0.2.502 → 0.2.503-rc-2

package/src/components/Popover.tsx

@@ -5,12 +5,11 @@ import { useEffect, useState } from "react";
 import { cn } from "@sparkle/lib/utils";
 
 const PopoverRoot = PopoverPrimitive.Root;
-
 const PopoverTrigger = PopoverPrimitive.Trigger;
-
 const PopoverPortal = PopoverPrimitive.Portal;
+const PopoverAnchor = PopoverPrimitive.Anchor;
 
-interface PopoverContentProps
+export interface PopoverContentProps
   extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> {
   fullWidth?: boolean;
   mountPortal?: boolean;
@@ -68,7 +67,7 @@ const PopoverContent = React.forwardRef<
         const defaultContainer = dialogElements[dialogElements.length - 1];
         setContainer(defaultContainer);
       }
-    }, []);
+    }, [mountPortal, container]);
 
     return mountPortal ? (
       <PopoverPrimitive.Portal container={container}>
@@ -102,4 +101,93 @@ function Popover({
 
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
-export { Popover, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger };
+interface AnchoredPopoverProps extends PopoverContentProps {
+  open: boolean;
+  anchorRef?: React.RefObject<HTMLElement>;
+  children: React.ReactNode;
+}
+
+function AnchoredPopover({
+  open,
+  anchorRef,
+  children,
+  ...props
+}: AnchoredPopoverProps) {
+  const [position, setPosition] = useState({
+    top: "50%",
+    left: "50%",
+    width: "0px",
+    height: "0px",
+  });
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+
+    const updatePosition = () => {
+      if (!anchorRef?.current) {
+        setPosition({
+          top: "50%",
+          left: "50%",
+          width: "0px",
+          height: "0px",
+        });
+        return;
+      }
+
+      const rect = anchorRef.current.getBoundingClientRect();
+      setPosition({
+        top: `${rect.top}px`,
+        left: `${rect.left}px`,
+        width: `${rect.width}px`,
+        height: `${rect.height}px`,
+      });
+    };
+
+    updatePosition();
+
+    const resizeObserver = new ResizeObserver(updatePosition);
+    if (anchorRef?.current) {
+      resizeObserver.observe(anchorRef.current);
+    }
+
+    window.addEventListener("scroll", updatePosition, true);
+
+    return () => {
+      resizeObserver.disconnect();
+      window.removeEventListener("scroll", updatePosition, true);
+    };
+  }, [open, anchorRef]);
+
+  return (
+    <PopoverRoot open={open} modal={false}>
+      <PopoverAnchor
+        className="s-fixed s-transition-all s-duration-300 s-ease-in-out"
+        style={{
+          top: position.top,
+          left: position.left,
+          width: position.width,
+          height: position.height,
+        }}
+      />
+      <PopoverContent
+        {...props}
+        onOpenAutoFocus={(e) => e.preventDefault()}
+        mountPortal={false}
+      >
+        {children}
+      </PopoverContent>
+    </PopoverRoot>
+  );
+}
+
+export {
+  AnchoredPopover,
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
+  PopoverPortal,
+  PopoverRoot,
+  PopoverTrigger,
+};

package/src/components/RadioGroup.tsx

@@ -106,7 +106,7 @@ const RadioGroupItem = React.forwardRef<
     );
 
     const wrappedItem = (
-      <div className="s-flex s-items-center s-gap-2 s-w-full">
+      <div className="s-flex s-w-full s-items-center s-gap-2">
         {tooltipMessage ? (
           <Tooltip trigger={item} label={tooltipMessage} />
         ) : (
@@ -165,12 +165,12 @@ const RadioGroupCustomItem = React.forwardRef<
     return (
       <div
         className={cn(
-          "s-flex s-flex-col s-w-full",
+          "s-flex s-w-full s-flex-col",
           className,
           `s-items-${iconPosition}`
         )}
       >
-        <div className="s-flex s-items-center s-gap-2 s-w-full">
+        <div className="s-flex s-w-full s-items-center s-gap-2">
           {item}
           {customItem}
         </div>

package/src/components/index.ts

@@ -103,7 +103,9 @@ export { PaginatedCitationsGrid } from "./PaginatedCitationsGrid";
 export { Pagination } from "./Pagination";
 export { ColorPicker, IconPicker } from "./Picker";
 export {
+  AnchoredPopover,
   Popover,
+  PopoverAnchor,
   PopoverContent,
   PopoverPortal,
   PopoverRoot,
@@ -147,13 +149,6 @@ export {
   TooltipRoot,
   TooltipTrigger,
 } from "./Tooltip";
-export {
-  TourGuide,
-  TourGuideCard,
-  TourGuideCardContent,
-  TourGuideCardTitle,
-  TourGuideCardVisual,
-} from "./TourGuide";
 export { Tree } from "./Tree";
 export { TypingAnimation } from "./TypingAnimation";
 export { ValueCard } from "./ValueCard";

package/src/stories/AnchoredPopover.stories.tsx

@@ -0,0 +1,115 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React, { useRef, useState } from "react";
+
+import { Button } from "@sparkle/components/Button";
+import { AnchoredPopover } from "@sparkle/components/Popover";
+
+const meta = {
+  title: "Components/AnchoredPopover",
+  component: AnchoredPopover,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof AnchoredPopover>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const ExampleWrapper = ({ children }: { children: React.ReactNode }) => (
+  <div className="s-flex s-h-[400px] s-w-[600px] s-items-center s-justify-center s-gap-8">
+    {children}
+  </div>
+);
+
+const MultipleAnchorsExample = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [activeRef, setActiveRef] =
+    useState<React.RefObject<HTMLButtonElement>>();
+  const topRef = useRef<HTMLButtonElement>(null);
+  const rightRef = useRef<HTMLButtonElement>(null);
+  const bottomRef = useRef<HTMLButtonElement>(null);
+  const leftRef = useRef<HTMLButtonElement>(null);
+
+  const handleClick = (ref: React.RefObject<HTMLButtonElement>) => {
+    setActiveRef(ref);
+    setIsOpen(true);
+  };
+
+  return (
+    <ExampleWrapper>
+      <div className="s-relative s-flex s-h-48 s-w-48 s-flex-col s-items-center s-justify-center">
+        <div className="s-absolute s-left-1/2 s-top-0 s--translate-x-1/2">
+          <Button
+            ref={topRef}
+            label="Top"
+            onClick={() => handleClick(topRef)}
+            size="sm"
+          />
+        </div>
+        <div className="s-absolute s-right-0 s-top-1/2 s--translate-y-1/2">
+          <Button
+            ref={rightRef}
+            label="Right"
+            onClick={() => handleClick(rightRef)}
+            size="sm"
+          />
+        </div>
+        <div className="s-absolute s-bottom-0 s-left-1/2 s--translate-x-1/2">
+          <Button
+            ref={bottomRef}
+            label="Bottom"
+            onClick={() => handleClick(bottomRef)}
+            size="sm"
+          />
+        </div>
+        <div className="s-absolute s-left-0 s-top-1/2 s--translate-y-1/2">
+          <Button
+            ref={leftRef}
+            label="Left"
+            onClick={() => handleClick(leftRef)}
+            size="sm"
+          />
+        </div>
+
+        <AnchoredPopover
+          open={isOpen}
+          anchorRef={activeRef}
+          side={
+            activeRef === topRef
+              ? "top"
+              : activeRef === rightRef
+                ? "right"
+                : activeRef === bottomRef
+                  ? "bottom"
+                  : "left"
+          }
+          className="s-w-40 s-p-4"
+        >
+          <div className="s-text-sm">
+            This popover is anchored to the{" "}
+            {activeRef === topRef
+              ? "top"
+              : activeRef === rightRef
+                ? "right"
+                : activeRef === bottomRef
+                  ? "bottom"
+                  : "left"}{" "}
+            button.
+          </div>
+        </AnchoredPopover>
+      </div>
+    </ExampleWrapper>
+  );
+};
+
+export const Example: Story = {
+  args: {
+    open: true,
+    side: "bottom",
+    align: "center",
+    sideOffset: 4,
+    children: <div>Popover content</div>,
+  },
+  render: () => <MultipleAnchorsExample />,
+};

package/src/stories/Breadcrumbs.stories.tsx

@@ -27,9 +27,7 @@ type BreadcrumbsExampleProps = {
 };
 
 export const BreadcrumbsExample = (args: BreadcrumbsExampleProps) => {
-  const items0 = [
-    { label: "Home", icon: HomeIcon },
-  ];
+  const items0 = [{ label: "Home", icon: HomeIcon }];
 
   const items1 = [
     { label: "Home", href: "#", icon: HomeIcon },

package/dist/esm/components/TourGuide.d.ts

@@ -1,39 +0,0 @@
-import React from "react";
-interface TourGuideCardProps {
-    anchorRef?: React.RefObject<HTMLDivElement>;
-    title?: string;
-    content?: React.ReactNode;
-    visual?: React.ReactNode;
-    onNext?: () => void;
-    onDismiss?: () => void;
-    isLastStep?: boolean;
-    className?: string;
-    children?: React.ReactNode;
-    asPopover?: boolean;
-    align?: "start" | "center" | "end";
-    side?: "top" | "right" | "bottom" | "left";
-    sideOffset?: number;
-    currentIndex?: number;
-    totalCards?: number;
-}
-export declare const TourGuideCardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-export declare const TourGuideCardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-export declare const TourGuideCardVisual: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-interface TourGuideCardActionsProps extends React.HTMLAttributes<HTMLDivElement> {
-    currentIndex: number;
-    totalCards: number;
-    onNext?: () => void;
-    onDismiss?: () => void;
-}
-export declare const TourGuideCardActions: React.ForwardRefExoticComponent<TourGuideCardActionsProps & React.RefAttributes<HTMLDivElement>>;
-export declare const TourGuideCard: React.ForwardRefExoticComponent<TourGuideCardProps & React.RefAttributes<HTMLDivElement>>;
-export interface TourGuideProps {
-    children: React.ReactNode;
-    autoStart?: boolean;
-    onStart?: () => void;
-    onEnd?: () => void;
-    onDismiss?: () => void;
-}
-export declare function TourGuide({ children, autoStart, onStart, onEnd, onDismiss, }: TourGuideProps): React.JSX.Element | null;
-export {};
-//# sourceMappingURL=TourGuide.d.ts.map

package/dist/esm/components/TourGuide.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TourGuide.d.ts","sourceRoot":"","sources":["../../../src/components/TourGuide.tsx"],"names":[],"mappings":"AACA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAKnD,UAAU,kBAAkB;IAC1B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACnC,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC3C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,kBAAkB,6GAW7B,CAAC;AAGH,eAAO,MAAM,oBAAoB,6GAc/B,CAAC;AAGH,eAAO,MAAM,mBAAmB,6GAc9B,CAAC;AAGH,UAAU,yBACR,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5C,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,eAAO,MAAM,oBAAoB,kGAyDhC,CAAC;AAGF,eAAO,MAAM,aAAa,2FAsCzB,CAAC;AAGF,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,SAAgB,EAChB,OAAO,EACP,KAAK,EACL,SAAS,GACV,EAAE,cAAc,4BAwHhB"}

package/dist/esm/components/TourGuide.js

@@ -1,145 +0,0 @@
-import { __assign, __read, __rest } from "tslib";
-import * as PopoverPrimitive from "@radix-ui/react-popover";
-import React, { useEffect, useState } from "react";
-import { Button } from "../components/Button";
-import { cn } from "../lib";
-export var TourGuideCardTitle = React.forwardRef(function (_a, ref) {
-    var className = _a.className, children = _a.children, props = __rest(_a, ["className", "children"]);
-    return (React.createElement("div", __assign({ ref: ref, className: cn("s-heading-lg s-px-3 s-pt-4", className) }, props), children));
-});
-TourGuideCardTitle.displayName = "TourGuideCardTitle";
-export var TourGuideCardContent = React.forwardRef(function (_a, ref) {
-    var className = _a.className, children = _a.children, props = __rest(_a, ["className", "children"]);
-    return (React.createElement("div", __assign({ ref: ref, className: cn("s-copy-base s-px-3 s-text-muted-foreground dark:s-text-muted-foreground-night", className) }, props), children));
-});
-TourGuideCardContent.displayName = "TourGuideCardContent";
-export var TourGuideCardVisual = React.forwardRef(function (_a, ref) {
-    var className = _a.className, children = _a.children, props = __rest(_a, ["className", "children"]);
-    return (React.createElement("div", __assign({ ref: ref, className: cn("s-aspect-video s-bg-muted-background dark:s-bg-muted-background-night", className) }, props), children));
-});
-TourGuideCardVisual.displayName = "TourGuideCardVisual";
-export var TourGuideCardActions = React.forwardRef(function (_a, ref) {
-    var currentIndex = _a.currentIndex, totalCards = _a.totalCards, onNext = _a.onNext, onDismiss = _a.onDismiss, className = _a.className, children = _a.children, props = __rest(_a, ["currentIndex", "totalCards", "onNext", "onDismiss", "className", "children"]);
-    var isFirstCard = currentIndex === 0;
-    var isLastCard = currentIndex === totalCards - 1;
-    var isSingleCard = totalCards === 1;
-    var showDismiss = !isLastCard && !isSingleCard;
-    return (React.createElement("div", __assign({ ref: ref, className: cn("s-flex s-justify-end s-space-x-2 s-p-2 s-pt-4", className) }, props), children ? (children) : (React.createElement(React.Fragment, null,
-        showDismiss && onDismiss && (React.createElement(Button, { variant: "outline", label: "Dismiss", onClick: onDismiss })),
-        onNext && (React.createElement(Button, { onClick: onNext, variant: "highlight", label: isSingleCard
-                ? "Ok"
-                : isFirstCard
-                    ? "Start Tour"
-                    : isLastCard
-                        ? "Done"
-                        : "Next" }))))));
-});
-TourGuideCardActions.displayName = "TourGuideCardActions";
-export var TourGuideCard = React.forwardRef(function (_a) {
-    var className = _a.className, children = _a.children, _b = _a.align, align = _b === void 0 ? "center" : _b, _c = _a.side, side = _c === void 0 ? "bottom" : _c, _d = _a.sideOffset, sideOffset = _d === void 0 ? 4 : _d, onNext = _a.onNext, onDismiss = _a.onDismiss, _e = _a.currentIndex, currentIndex = _e === void 0 ? 0 : _e, _f = _a.totalCards, totalCards = _f === void 0 ? 1 : _f;
-    return (React.createElement(PopoverPrimitive.Content, { align: align, side: side, sideOffset: sideOffset, className: cn("s-z-50 s-w-[420px] s-max-w-xs s-space-y-0.5 s-overflow-hidden s-rounded-2xl s-border s-shadow-xl s-transition-all s-duration-300 s-ease-in-out", "s-border-highlight-400 s-bg-background s-text-foreground s-ring-2 s-ring-highlight-400/30", "dark:s-border-border-night dark:s-bg-background-night dark:s-text-foreground-night", className), onOpenAutoFocus: function (e) { return e.preventDefault(); } },
-        children,
-        React.createElement(TourGuideCardActions, { currentIndex: currentIndex, totalCards: totalCards, onNext: onNext, onDismiss: onDismiss })));
-});
-TourGuideCard.displayName = "TourGuideCard";
-export function TourGuide(_a) {
-    var children = _a.children, _b = _a.autoStart, autoStart = _b === void 0 ? true : _b, onStart = _a.onStart, onEnd = _a.onEnd, onDismiss = _a.onDismiss;
-    var _c = __read(useState(0), 2), currentIndex = _c[0], setCurrentIndex = _c[1];
-    var _d = __read(useState(autoStart), 2), isActive = _d[0], setIsActive = _d[1];
-    var _e = __read(useState({
-        top: "50%",
-        left: "50%",
-        width: "0px",
-        height: "0px",
-    }), 2), position = _e[0], setPosition = _e[1];
-    // Get all TourGuideCard children - memoize to prevent unnecessary re-renders
-    var cards = React.useMemo(function () {
-        return React.Children.toArray(children).filter(function (child) {
-            return React.isValidElement(child) && child.type === TourGuideCard;
-        });
-    }, [children]);
-    // Only run on mount and when autoStart changes
-    useEffect(function () {
-        if (autoStart) {
-            setIsActive(true);
-            setCurrentIndex(0);
-            onStart === null || onStart === void 0 ? void 0 : onStart();
-        }
-    }, [autoStart, onStart]);
-    // Handle position updates - use requestAnimationFrame to prevent excessive updates
-    useEffect(function () {
-        var _a;
-        if (!isActive) {
-            return;
-        }
-        var updatePosition = function () {
-            var currentCard = cards[currentIndex];
-            if (!(currentCard === null || currentCard === void 0 ? void 0 : currentCard.props.anchorRef)) {
-                setPosition({
-                    top: "50%",
-                    left: "50%",
-                    width: "0px",
-                    height: "0px",
-                });
-                return;
-            }
-            var element = currentCard.props.anchorRef.current;
-            if (!element) {
-                return;
-            }
-            var rect = element.getBoundingClientRect();
-            setPosition({
-                top: "".concat(rect.top, "px"),
-                left: "".concat(rect.left, "px"),
-                width: "".concat(rect.width, "px"),
-                height: "".concat(rect.height, "px"),
-            });
-        };
-        // Initial update
-        updatePosition();
-        // Set up resize observer
-        var resizeObserver = new ResizeObserver(updatePosition);
-        var currentCard = cards[currentIndex];
-        if ((_a = currentCard === null || currentCard === void 0 ? void 0 : currentCard.props.anchorRef) === null || _a === void 0 ? void 0 : _a.current) {
-            resizeObserver.observe(currentCard.props.anchorRef.current);
-        }
-        // Set up scroll listener
-        window.addEventListener("scroll", updatePosition, true);
-        return function () {
-            resizeObserver.disconnect();
-            window.removeEventListener("scroll", updatePosition, true);
-        };
-    }, [currentIndex, cards, isActive]);
-    var handleNext = function () {
-        if (currentIndex + 1 < cards.length) {
-            setCurrentIndex(currentIndex + 1);
-        }
-        else {
-            setIsActive(false);
-            onEnd === null || onEnd === void 0 ? void 0 : onEnd();
-        }
-    };
-    var handleDismiss = function () {
-        setIsActive(false);
-        onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
-    };
-    if (!isActive || cards.length === 0) {
-        return null;
-    }
-    var currentCard = cards[currentIndex];
-    return (React.createElement(PopoverPrimitive.Root, { open: isActive, modal: false },
-        React.createElement(PopoverPrimitive.Anchor, { className: "s-fixed s-transition-all s-duration-300 s-ease-in-out", style: {
-                top: position.top,
-                left: position.left,
-                width: position.width,
-                height: position.height,
-            } }),
-        React.cloneElement(currentCard, {
-            onNext: handleNext,
-            onDismiss: handleDismiss,
-            currentIndex: currentIndex,
-            totalCards: cards.length,
-            className: !currentCard.props.anchorRef ? "s-translate-y-[-50%]" : "",
-        })));
-}
-//# sourceMappingURL=TourGuide.js.map

package/dist/esm/components/TourGuide.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TourGuide.js","sourceRoot":"","sources":["../../../src/components/TourGuide.tsx"],"names":[],"mappings":"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"}

package/dist/esm/stories/TourGuide.stories.d.ts

@@ -1,4 +0,0 @@
-declare const _default: import("@storybook/core/csf").ComponentAnnotations<import("@storybook/react").ReactRenderer, import("@storybook/react").Args>;
-export default _default;
-export declare const Default: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/react").Args>;
-//# sourceMappingURL=TourGuide.stories.d.ts.map

package/dist/esm/stories/TourGuide.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TourGuide.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/TourGuide.stories.tsx"],"names":[],"mappings":";AA0CA,wBAMU;AAuaV,eAAO,MAAM,OAAO,2HAAoB,CAAC"}

package/dist/esm/stories/TourGuide.stories.js

@@ -1,133 +0,0 @@
-import { __read } from "tslib";
-import React, { useRef, useState } from "react";
-import { Avatar, ConfettiBackground, Tooltip, TypingAnimation, } from "../components";
-import { Button } from "../components/Button";
-import { ActionBrainIcon, ActionGlobeIcon, ActionImageIcon, ActionMagnifyingGlassIcon, ActionScanIcon, ActionTableIcon, PlayIcon, } from "../icons";
-import { BigQueryLogo, ConfluenceLogo, DriveLogo, GithubLogo, GongLogo, IntercomLogo, MicrosoftLogo, NotionLogo, SalesforceLogo, SlackLogo, SnowflakeLogo, ZendeskLogo, } from "../logo";
-import { TourGuide, TourGuideCard, TourGuideCardContent, TourGuideCardTitle, TourGuideCardVisual, } from "../components/TourGuide";
-export default {
-    title: "Modules/TourGuide",
-    component: TourGuide,
-    parameters: {
-        layout: "fullscreen",
-    },
-};
-var Template = function () {
-    var topRightRef = useRef(null);
-    var centerRef = useRef(null);
-    var bottomLeftRef = useRef(null);
-    var _a = __read(useState(0), 2), key = _a[0], setKey = _a[1];
-    var handleRestart = function () {
-        setKey(function (k) { return k + 1; });
-    };
-    var referentRef = useRef(null);
-    var filteredAgents = [
-        {
-            name: "Translator",
-            emoji: "💬",
-            backgroundColor: "s-bg-green-200",
-        },
-        {
-            name: "TrailblazerGuard",
-            emoji: "👮",
-            backgroundColor: "s-bg-blue-100",
-        },
-        {
-            name: "Transport",
-            emoji: "🚌",
-            backgroundColor: "s-bg-blue-200",
-        },
-        {
-            name: "TrendTracker",
-            emoji: "😻",
-            backgroundColor: "s-bg-rose-50",
-        },
-    ];
-    return (React.createElement("div", { className: "s-relative s-min-h-screen s-w-full" },
-        React.createElement("div", { className: "s-absolute s-left-3 s-top-3" },
-            React.createElement(Button, { label: "Restart Tour", onClick: handleRestart })),
-        React.createElement("div", { ref: topRightRef, className: "s-absolute s-right-6 s-top-6 s-cursor-pointer s-rounded-lg s-border s-border-blue-100 s-bg-blue-50 s-p-4 s-transition-colors hover:s-bg-blue-100" }, "Top Right Element"),
-        React.createElement("div", { ref: centerRef, className: "s-absolute s-left-1/2 s-top-1/2 s--translate-x-1/2 s--translate-y-1/2 s-cursor-pointer s-rounded-lg s-border s-border-green-100 s-bg-green-50 s-p-4 s-transition-colors hover:s-bg-green-100" }, "Centered Element"),
-        React.createElement("div", { ref: bottomLeftRef, className: "s-absolute s-bottom-6 s-left-6 s-cursor-pointer s-rounded-lg s-border s-border-red-100 s-bg-red-50 s-p-4 s-transition-colors hover:s-bg-red-100" }, "Bottom Left Element"),
-        React.createElement(TourGuide, { key: key, autoStart: true },
-            React.createElement(TourGuideCard, null,
-                React.createElement(TourGuideCardVisual, { ref: referentRef, className: "s-flex s-items-center s-justify-center s-bg-brand-support-blue s-px-6 s-text-center" },
-                    React.createElement(ConfettiBackground, { variant: "confetti", referentSize: referentRef }),
-                    React.createElement("span", { className: "s-heading-3xl" },
-                        React.createElement(TypingAnimation, { text: "Rise and shine, Edouard! \uD83C\uDF05" }))),
-                React.createElement(TourGuideCardTitle, null,
-                    "Welcome to the",
-                    " ",
-                    React.createElement("span", { className: "s-font-semibold s-text-brand-hunter-green" }, "Qonto"),
-                    " ",
-                    "workspace."),
-                React.createElement(TourGuideCardContent, null,
-                    " ",
-                    "Discover the basics of Dust in 3 steps.")),
-            React.createElement(TourGuideCard, { anchorRef: centerRef },
-                React.createElement(TourGuideCardVisual, { className: "s-relative s-flex s-overflow-hidden s-bg-brand-support-green s-p-4 s-text-center" },
-                    React.createElement("div", { className: "s-flex s-gap-1" },
-                        React.createElement("div", { className: "s-flex s-gap-1" },
-                            React.createElement("div", { className: "s-heading-2xl s-text-highlight" }, "@tra"),
-                            React.createElement("div", { className: "s-h-[32px] s-w-[3px] s-animate-cursor-blink s-bg-foreground" })),
-                        React.createElement("div", { className: "s-flex s-h-[240px] s-flex-col s-gap-3 s-rounded-xl s-border s-border-border s-bg-background s-p-3 s-pr-5 s-shadow-xl" }, filteredAgents.map(function (agent) {
-                            return (React.createElement("div", { key: agent.name, className: "s-heading-base s-flex s-items-center s-gap-2 s-text-foreground" },
-                                React.createElement(Avatar, { size: "sm", emoji: agent.emoji, backgroundColor: agent.backgroundColor }),
-                                agent.name));
-                        })))),
-                React.createElement(TourGuideCardTitle, null,
-                    "Use",
-                    " ",
-                    React.createElement("span", { className: "s-font-semibold s-text-highlight" }, "@mentions"),
-                    " ",
-                    "to call Agents and\u00A0start a conversation."),
-                React.createElement(TourGuideCardContent, { className: "s-py-2" },
-                    React.createElement(Button, { label: "Watch the full video", icon: PlayIcon, variant: "outline" }))),
-            React.createElement(TourGuideCard, { anchorRef: topRightRef },
-                React.createElement(TourGuideCardVisual, { className: "s-flex s-flex-col s-items-center s-justify-center s-gap-4 s-bg-brand-support-rose s-px-6 s-text-center" },
-                    React.createElement("div", { className: "s-grid s-grid-cols-6 s-gap-2" },
-                        React.createElement(Tooltip, { label: "Google Drive Connection", trigger: React.createElement(Avatar, { size: "md", icon: DriveLogo, backgroundColor: "s-bg-white" }) }),
-                        React.createElement(Tooltip, { label: "Notion Connection", trigger: React.createElement(Avatar, { size: "md", icon: NotionLogo, backgroundColor: "s-bg-white" }) }),
-                        React.createElement(Tooltip, { label: "Slack Connection", trigger: React.createElement(Avatar, { size: "md", icon: SlackLogo, backgroundColor: "s-bg-white" }) }),
-                        React.createElement(Tooltip, { label: "Snowflake Connection", trigger: React.createElement(Avatar, { size: "md", icon: SnowflakeLogo, backgroundColor: "s-bg-white" }) }),
-                        React.createElement(Tooltip, { label: "BigQuery Connection", trigger: React.createElement(Avatar, { size: "md", icon: BigQueryLogo, backgroundColor: "s-bg-white" }) }),
-                        React.createElement(Tooltip, { label: "Confluence Connection", trigger: React.createElement(Avatar, { size: "md", icon: ConfluenceLogo, backgroundColor: "s-bg-white" }) }),
-                        React.createElement(Tooltip, { label: "Intercom Connection", trigger: React.createElement(Avatar, { size: "md", icon: IntercomLogo, backgroundColor: "s-bg-white" }) }),
-                        React.createElement(Tooltip, { label: "Microsoft Connection", trigger: React.createElement(Avatar, { size: "md", icon: MicrosoftLogo, backgroundColor: "s-bg-white" }) }),
-                        React.createElement(Tooltip, { label: "Salesforce Connection", trigger: React.createElement(Avatar, { size: "md", icon: SalesforceLogo, backgroundColor: "s-bg-white" }) }),
-                        React.createElement(Tooltip, { label: "Zendesk Connection", trigger: React.createElement(Avatar, { size: "md", icon: ZendeskLogo, backgroundColor: "s-bg-white" }) }),
-                        React.createElement(Tooltip, { label: "GitHub Connection", trigger: React.createElement(Avatar, { size: "md", icon: GithubLogo, backgroundColor: "s-bg-white" }) }),
-                        React.createElement(Tooltip, { label: "Gong Connection", trigger: React.createElement(Avatar, { size: "md", icon: GongLogo, backgroundColor: "s-bg-white" }) }),
-                        React.createElement(Tooltip, { label: "Search data", trigger: React.createElement(Avatar, { size: "md", icon: ActionMagnifyingGlassIcon, backgroundColor: "s-bg-gray-700", iconColor: "s-text-gray-50" }) }),
-                        React.createElement(Tooltip, { label: "Quantitative analysis", trigger: React.createElement(Avatar, { size: "md", icon: ActionTableIcon, backgroundColor: "s-bg-gray-700", iconColor: "s-text-gray-50" }) }),
-                        React.createElement(Tooltip, { label: "Data extraction", trigger: React.createElement(Avatar, { size: "md", icon: ActionScanIcon, backgroundColor: "s-bg-gray-700", iconColor: "s-text-gray-50" }) }),
-                        React.createElement(Tooltip, { label: "Image generation", trigger: React.createElement(Avatar, { size: "md", icon: ActionImageIcon, backgroundColor: "s-bg-gray-700", iconColor: "s-text-gray-50" }) }),
-                        React.createElement(Tooltip, { label: "Web search and browsing", trigger: React.createElement(Avatar, { size: "md", icon: ActionGlobeIcon, backgroundColor: "s-bg-gray-700", iconColor: "s-text-gray-50" }) }),
-                        React.createElement(Tooltip, { label: "Reasoning", trigger: React.createElement(Avatar, { size: "md", icon: ActionBrainIcon, backgroundColor: "s-bg-gray-700", iconColor: "s-text-gray-50" }) }))),
-                React.createElement(TourGuideCardTitle, null,
-                    "Make your agents smarter with\u00A0",
-                    React.createElement("span", { className: "s-text-brand-red-rose" }, "knowledge and tools"),
-                    "."),
-                React.createElement(TourGuideCardContent, { className: "s-py-2" },
-                    React.createElement(Button, { label: "Watch the full video", icon: PlayIcon, variant: "outline" }))),
-            React.createElement(TourGuideCard, { anchorRef: bottomLeftRef },
-                React.createElement(TourGuideCardVisual, { className: "s-flex s-flex-col s-items-center s-justify-center s-gap-0 s-bg-brand-support-golden s-px-6 s-text-center" },
-                    React.createElement("div", { className: "s-grid s-grid-cols-4 s-gap-2" },
-                        React.createElement(Tooltip, { label: "FeedbackHelper", trigger: React.createElement(Avatar, { size: "lg", emoji: "\u2764\uFE0F", backgroundColor: "s-bg-rose-100" }) }),
-                        React.createElement(Tooltip, { label: "RiskAnalyzer", trigger: React.createElement(Avatar, { size: "lg", emoji: "\uD83D\uDC80", backgroundColor: "s-bg-lime-800" }) }),
-                        React.createElement(Tooltip, { label: "EngagementPro", trigger: React.createElement(Avatar, { size: "lg", emoji: "\uD83D\uDE02", backgroundColor: "s-bg-golden-200" }) }),
-                        React.createElement(Tooltip, { label: "RunbookMaster", trigger: React.createElement(Avatar, { size: "lg", emoji: "\uD83E\uDDD1\u200D\uD83D\uDE80", backgroundColor: "s-bg-violet-800" }) }),
-                        React.createElement(Tooltip, { label: "BrandSpecialist", trigger: React.createElement(Avatar, { size: "lg", emoji: "\uD83D\uDC55", backgroundColor: "s-bg-blue-200" }) }),
-                        React.createElement(Tooltip, { label: "CrisisManager", trigger: React.createElement(Avatar, { size: "lg", emoji: "\uD83D\uDE92", backgroundColor: "s-bg-red-200" }) }),
-                        React.createElement(Tooltip, { label: "PerformanceCoach", trigger: React.createElement(Avatar, { size: "lg", emoji: "\uD83C\uDFC6", backgroundColor: "s-bg-yellow-200" }) }),
-                        React.createElement(Tooltip, { label: "StrategyPlanner", trigger: React.createElement(Avatar, { size: "lg", emoji: "\uD83C\uDFAF", backgroundColor: "s-bg-pink-100" }) }))),
-                React.createElement(TourGuideCardTitle, null,
-                    "Create new custom agents",
-                    " ",
-                    React.createElement("span", { className: "s-text-brand-orange-golden" }, "designed for your needs"),
-                    "."),
-                React.createElement(TourGuideCardContent, { className: "s-py-2" },
-                    React.createElement(Button, { label: "Watch the full video", icon: PlayIcon, variant: "outline" }))))));
-};
-export var Default = Template.bind({});
-//# sourceMappingURL=TourGuide.stories.js.map