@dust-tt/sparkle 0.2.281 → 0.2.282-rc-1

package/dist/esm/components/Tab.js

@@ -1,130 +0,0 @@
-import React from "react";
-import { noHrefLink, SparkleContext, } from "../context";
-import { ChevronRightIcon } from "../icons";
-import { classNames } from "../lib/utils";
-import { Icon } from "./Icon";
-import { Tooltip } from "./Tooltip";
-var tabClasses = {
-    default: {
-        base: "s-text-element-800 s-border-transparent s-cursor-pointer s-border-b-2",
-        hover: "hover:s-text-action-500 hover:s-border-action-300",
-        dark: {
-            base: "dark:s-text-element-700-dark",
-            hover: "dark:hover:s-text-action-600-dark",
-        },
-    },
-    selected: {
-        base: "s-border-action-500 s-text-action-500 s-cursor-default s-border-b-2",
-        hover: "",
-        dark: {
-            base: "dark:s-border-action-500-dark dark:s-text-action-500-dark",
-            hover: "",
-        },
-    },
-    stepperDefault: {
-        base: "s-text-element-800 s-cursor-pointer",
-        hover: "hover:s-text-action-500",
-        dark: {
-            base: "dark:s-text-element-700-dark",
-            hover: "dark:hover:s-text-action-600-dark",
-        },
-    },
-    stepperSelected: {
-        base: "s-text-action-500 s-cursor-default",
-        hover: "",
-        dark: {
-            base: "dark:dark:s-text-action-500-dark",
-            hover: "",
-        },
-    },
-};
-var iconClasses = {
-    default: {
-        base: "s-text-element-600",
-        hover: "group-hover/tab:s-text-action-400",
-        dark: {
-            base: "dark:s-text-element-600-dark",
-            hover: "dark:group-hover/tab:s-text-action-500-dark",
-        },
-    },
-    selected: {
-        base: "s-text-action-400",
-        hover: "",
-        dark: {
-            base: "dark:s-text-action-500-dark",
-            hover: "",
-        },
-    },
-};
-var tabSizingClasses = {
-    hug: "",
-    expand: "s-flex-1",
-};
-/**
- * Tab component displaying a list of tabs.
- *
- * Tab click action is specified:
- * - either per tab, by providing either an href or an onClick handler in tab
- *   data (mutually exclusive);
- * - or globally, by providing a setCurrentTab function.
- * Both per-tab and global actions can be set, the per-tab action taking precedence.
- */
-export function Tab(_a) {
-    var _b = _a.variant, variant = _b === void 0 ? "default" : _b, tabs = _a.tabs, setCurrentTab = _a.setCurrentTab, className = _a.className, _c = _a.tabClassName, tabClassName = _c === void 0 ? "" : _c;
-    var components = React.useContext(SparkleContext).components;
-    var renderTabs = function () {
-        return tabs.map(function (tab, i) {
-            var _a, _b, _c, _d, _e;
-            var tabStateClasses = variant === "stepper"
-                ? tab.current
-                    ? tabClasses.stepperSelected
-                    : tabClasses.stepperDefault
-                : tab.current
-                    ? tabClasses.selected
-                    : tabClasses.default;
-            var iconStateClasses = tab.current
-                ? iconClasses.selected
-                : iconClasses.default;
-            var finalTabClasses = classNames("s-group/tab s-justify-center s-flex s-text-sm s-font-semibold s-py-2.5 s-transition-all ease-out s-duration-400 s-whitespace-nowrap s-select-none", variant === "default"
-                ? tab.icon
-                    ? tab.hideLabel
-                        ? "s-px-3"
-                        : "s-pr-3.5 s-pl-2.5"
-                    : "s-px-3"
-                : "s-pl-1", tabStateClasses.base, tabStateClasses.hover, tabStateClasses.dark.base, tabStateClasses.dark.hover, tabClassName, tab.disabled ? "s-opacity-50 s-pointer-events-none" : "");
-            var finalIconClasses = classNames("s-transition-colors s-duration-400", iconStateClasses.base, iconStateClasses.hover, iconStateClasses.dark.base, iconStateClasses.dark.hover, tabClassName);
-            var Link = tab.href
-                ? components.link
-                : noHrefLink;
-            // precedence on href and onClick (mutually exclusive), then setCurrentTab
-            var setCurrentTabFn = function (e) {
-                if (!tab.id) {
-                    throw new Error("Tab id is required to use setCurrentTab");
-                }
-                setCurrentTab === null || setCurrentTab === void 0 ? void 0 : setCurrentTab(tab.id, e);
-            };
-            var onClickAction = tab.href
-                ? undefined
-                : (_a = tab.onClick) !== null && _a !== void 0 ? _a : setCurrentTabFn;
-            var content = (React.createElement(Link, { key: tab.label, className: finalTabClasses, "aria-current": tab.current ? "page" : undefined, onClick: onClickAction, href: tab.href || "#" },
-                React.createElement("div", { className: tab.current
-                        ? "s-flex s-gap-x-2"
-                        : "s-flex s-gap-x-2 s-transition s-duration-300 s-ease-out" },
-                    tab.icon && (React.createElement(Icon, { visual: tab.icon, className: finalIconClasses, size: "sm" })), (_b = tab.hideLabel) !== null && _b !== void 0 ? _b : tab.label,
-                    variant === "stepper" && i < tabs.length - 1 && (React.createElement(Icon, { visual: ChevronRightIcon, className: "s-mx-2 s-text-element-500", size: "sm" })))));
-            return tab.hideLabel ? (tab.label ? (React.createElement(React.Fragment, { key: "tab-".concat(i) },
-                React.createElement("div", { className: tabSizingClasses[(_c = tab.sizing) !== null && _c !== void 0 ? _c : "hug"] },
-                    React.createElement(Tooltip, { trigger: content, label: tab.label })),
-                tab.hasSeparator && (React.createElement("div", { className: "s-flex s-h-full s-grow", key: "sep-".concat(i) })))) : (React.createElement(React.Fragment, { key: "tab-".concat(i) },
-                React.createElement("div", { className: tabSizingClasses[(_d = tab.sizing) !== null && _d !== void 0 ? _d : "hug"] }, content),
-                tab.hasSeparator && (React.createElement("div", { className: "s-flex s-h-full s-grow", key: "sep-".concat(i) }))))) : (React.createElement(React.Fragment, { key: "tab-".concat(i) },
-                React.createElement("div", { className: tabSizingClasses[(_e = tab.sizing) !== null && _e !== void 0 ? _e : "hug"] }, content),
-                tab.hasSeparator && (React.createElement("div", { className: "s-flex s-h-full s-grow", key: "sep-".concat(i) }))));
-        });
-    };
-    return (React.createElement("div", { className: classNames(variant === "default"
-            ? "s-border-b s-border-structure-200 dark:s-border-structure-200-dark"
-            : "", className !== null && className !== void 0 ? className : "", "s-overflow-x-auto s-overflow-y-hidden s-scrollbar-hide") },
-        React.createElement("nav", { className: "s-flex s-space-x-0", "aria-label": "Tabs" }, renderTabs())));
-}
-//# sourceMappingURL=Tab.js.map

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

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

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

@@ -1,9 +0,0 @@
-import React from "react";
-import { Tab } from "../index_with_tw_base";
-declare const meta: {
-    title: string;
-    component: typeof Tab;
-};
-export default meta;
-export declare const TabExample: () => React.JSX.Element;
-//# sourceMappingURL=Tab.stories.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Tab.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/Tab.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAIL,GAAG,EAEJ,MAAM,uBAAuB,CAAC;AAM/B,QAAA,MAAM,IAAI;;;CAGkB,CAAC;AAE7B,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,UAAU,yBAiFtB,CAAC"}

package/dist/esm/stories/Tab.stories.js

@@ -1,80 +0,0 @@
-import { __read } from "tslib";
-import React from "react";
-import { CircleIcon, RobotIcon, SquareIcon, Tab, TriangleIcon, } from "../index_with_tw_base";
-import { ChatBubbleBottomCenterTextIcon, Cog6ToothIcon, } from "../index_with_tw_base";
-var meta = {
-    title: "Components/Tab",
-    component: Tab,
-};
-export default meta;
-export var TabExample = function () {
-    var _a = __read(React.useState("chat"), 2), currentTab = _a[0], setCurrentTab = _a[1];
-    var _b = __read(React.useState("instructions"), 2), currentTab2 = _b[0], setCurrentTab2 = _b[1];
-    return (React.createElement("div", { className: "s-flex s-flex-col s-gap-10" },
-        React.createElement("div", { className: "s-w-[320px]" },
-            React.createElement(Tab, { tabs: [
-                    {
-                        label: "Chat",
-                        id: "chat",
-                        current: currentTab === "chat",
-                        icon: ChatBubbleBottomCenterTextIcon,
-                        sizing: "expand",
-                    },
-                    {
-                        label: "Build",
-                        id: "build",
-                        current: currentTab === "build",
-                        icon: RobotIcon,
-                        sizing: "expand",
-                    },
-                    {
-                        label: "Admin",
-                        id: "admin",
-                        current: currentTab === "admin",
-                        icon: RobotIcon,
-                        sizing: "expand",
-                        hasSeparator: true,
-                        disabled: true,
-                    },
-                    {
-                        label: "Settings",
-                        id: "settings",
-                        hideLabel: true,
-                        current: false,
-                        icon: Cog6ToothIcon,
-                    },
-                ], setCurrentTab: function (tabId, event) {
-                    // add logic here
-                    event.preventDefault();
-                    setCurrentTab(tabId);
-                } })),
-        React.createElement("div", { className: "s-w-full" },
-            React.createElement(Tab, { variant: "stepper", tabs: [
-                    {
-                        label: "Instructions",
-                        id: "instructions",
-                        current: currentTab2 === "instructions",
-                        icon: SquareIcon,
-                        sizing: "hug",
-                    },
-                    {
-                        label: "Data sources & Actions",
-                        id: "data",
-                        current: currentTab2 === "data",
-                        icon: CircleIcon,
-                        sizing: "hug",
-                    },
-                    {
-                        label: "Naming",
-                        id: "naming",
-                        current: currentTab2 === "naming",
-                        icon: TriangleIcon,
-                        sizing: "hug",
-                    },
-                ], setCurrentTab: function (tabId, event) {
-                    // add logic here
-                    event.preventDefault();
-                    setCurrentTab2(tabId);
-                } }))));
-};
-//# sourceMappingURL=Tab.stories.js.map

package/dist/esm/stories/Tab.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Tab.stories.js","sourceRoot":"","sources":["../../../src/stories/Tab.stories.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EACL,UAAU,EACV,SAAS,EACT,UAAU,EACV,GAAG,EACH,YAAY,GACb,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EACL,8BAA8B,EAC9B,aAAa,GACd,MAAM,uBAAuB,CAAC;AAE/B,IAAM,IAAI,GAAG;IACX,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,GAAG;CACY,CAAC;AAE7B,eAAe,IAAI,CAAC;AAEpB,MAAM,CAAC,IAAM,UAAU,GAAG;IAClB,IAAA,KAAA,OAA8B,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAA,EAAnD,UAAU,QAAA,EAAE,aAAa,QAA0B,CAAC;IACrD,IAAA,KAAA,OAAgC,KAAK,CAAC,QAAQ,CAAC,cAAc,CAAC,IAAA,EAA7D,WAAW,QAAA,EAAE,cAAc,QAAkC,CAAC;IACrE,OAAO,CACL,6BAAK,SAAS,EAAC,4BAA4B;QACzC,6BAAK,SAAS,EAAC,aAAa;YAC1B,oBAAC,GAAG,IACF,IAAI,EAAE;oBACJ;wBACE,KAAK,EAAE,MAAM;wBACb,EAAE,EAAE,MAAM;wBACV,OAAO,EAAE,UAAU,KAAK,MAAM;wBAC9B,IAAI,EAAE,8BAA8B;wBACpC,MAAM,EAAE,QAAQ;qBACjB;oBACD;wBACE,KAAK,EAAE,OAAO;wBACd,EAAE,EAAE,OAAO;wBACX,OAAO,EAAE,UAAU,KAAK,OAAO;wBAC/B,IAAI,EAAE,SAAS;wBACf,MAAM,EAAE,QAAQ;qBACjB;oBACD;wBACE,KAAK,EAAE,OAAO;wBACd,EAAE,EAAE,OAAO;wBACX,OAAO,EAAE,UAAU,KAAK,OAAO;wBAC/B,IAAI,EAAE,SAAS;wBACf,MAAM,EAAE,QAAQ;wBAChB,YAAY,EAAE,IAAI;wBAClB,QAAQ,EAAE,IAAI;qBACf;oBACD;wBACE,KAAK,EAAE,UAAU;wBACjB,EAAE,EAAE,UAAU;wBACd,SAAS,EAAE,IAAI;wBACf,OAAO,EAAE,KAAK;wBACd,IAAI,EAAE,aAAa;qBACpB;iBACF,EACD,aAAa,EAAE,UAAC,KAAK,EAAE,KAAK;oBAC1B,iBAAiB;oBACjB,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,aAAa,CAAC,KAAK,CAAC,CAAC;gBACvB,CAAC,GACD,CACE;QACN,6BAAK,SAAS,EAAC,UAAU;YACvB,oBAAC,GAAG,IACF,OAAO,EAAC,SAAS,EACjB,IAAI,EAAE;oBACJ;wBACE,KAAK,EAAE,cAAc;wBACrB,EAAE,EAAE,cAAc;wBAClB,OAAO,EAAE,WAAW,KAAK,cAAc;wBACvC,IAAI,EAAE,UAAU;wBAChB,MAAM,EAAE,KAAK;qBACd;oBACD;wBACE,KAAK,EAAE,wBAAwB;wBAC/B,EAAE,EAAE,MAAM;wBACV,OAAO,EAAE,WAAW,KAAK,MAAM;wBAC/B,IAAI,EAAE,UAAU;wBAChB,MAAM,EAAE,KAAK;qBACd;oBACD;wBACE,KAAK,EAAE,QAAQ;wBACf,EAAE,EAAE,QAAQ;wBACZ,OAAO,EAAE,WAAW,KAAK,QAAQ;wBACjC,IAAI,EAAE,YAAY;wBAClB,MAAM,EAAE,KAAK;qBACd;iBACF,EACD,aAAa,EAAE,UAAC,KAAK,EAAE,KAAK;oBAC1B,iBAAiB;oBACjB,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,cAAc,CAAC,KAAK,CAAC,CAAC;gBACxB,CAAC,GACD,CACE,CACF,CACP,CAAC;AACJ,CAAC,CAAC"}

package/src/components/Tab.tsx

@@ -1,243 +0,0 @@
-import React, { ComponentType, MouseEvent, ReactNode } from "react";
-
-import {
-  noHrefLink,
-  SparkleContext,
-  SparkleContextLinkType,
-} from "@sparkle/context";
-import { ChevronRightIcon } from "@sparkle/icons";
-import { classNames } from "@sparkle/lib/utils";
-
-import { Icon } from "./Icon";
-import { Tooltip } from "./Tooltip";
-
-type TabType<E> = {
-  current: boolean;
-  disabled?: boolean;
-  hasSeparator?: boolean;
-  hideLabel?: boolean;
-  icon?: ComponentType<{ className?: string }>;
-  id?: E;
-  label: string;
-  sizing?: "hug" | "expand";
-} & (
-  | { onClick?: (event: MouseEvent<HTMLAnchorElement>) => void; href?: never }
-  | { onClick?: never; href: string }
-);
-
-type TabProps<E> = {
-  variant?: "default" | "stepper";
-  tabs: Array<TabType<E>>;
-  setCurrentTab?: (tabId: E, e: MouseEvent<HTMLAnchorElement>) => void;
-  tabClassName?: string;
-  className?: string;
-};
-
-const tabClasses = {
-  default: {
-    base: "s-text-element-800 s-border-transparent s-cursor-pointer s-border-b-2",
-    hover: "hover:s-text-action-500 hover:s-border-action-300",
-    dark: {
-      base: "dark:s-text-element-700-dark",
-      hover: "dark:hover:s-text-action-600-dark",
-    },
-  },
-  selected: {
-    base: "s-border-action-500 s-text-action-500 s-cursor-default s-border-b-2",
-    hover: "",
-    dark: {
-      base: "dark:s-border-action-500-dark dark:s-text-action-500-dark",
-      hover: "",
-    },
-  },
-  stepperDefault: {
-    base: "s-text-element-800 s-cursor-pointer",
-    hover: "hover:s-text-action-500",
-    dark: {
-      base: "dark:s-text-element-700-dark",
-      hover: "dark:hover:s-text-action-600-dark",
-    },
-  },
-  stepperSelected: {
-    base: "s-text-action-500 s-cursor-default",
-    hover: "",
-    dark: {
-      base: "dark:dark:s-text-action-500-dark",
-      hover: "",
-    },
-  },
-};
-
-const iconClasses = {
-  default: {
-    base: "s-text-element-600",
-    hover: "group-hover/tab:s-text-action-400",
-    dark: {
-      base: "dark:s-text-element-600-dark",
-      hover: "dark:group-hover/tab:s-text-action-500-dark",
-    },
-  },
-  selected: {
-    base: "s-text-action-400",
-    hover: "",
-    dark: {
-      base: "dark:s-text-action-500-dark",
-      hover: "",
-    },
-  },
-};
-
-const tabSizingClasses = {
-  hug: "",
-  expand: "s-flex-1",
-};
-
-/**
- * Tab component displaying a list of tabs.
- *
- * Tab click action is specified:
- * - either per tab, by providing either an href or an onClick handler in tab
- *   data (mutually exclusive);
- * - or globally, by providing a setCurrentTab function.
- * Both per-tab and global actions can be set, the per-tab action taking precedence.
- */
-export function Tab<E>({
-  variant = "default",
-  tabs,
-  setCurrentTab,
-  className,
-  tabClassName = "",
-}: TabProps<E>) {
-  const { components } = React.useContext(SparkleContext);
-
-  const renderTabs = () =>
-    tabs.map((tab, i) => {
-      const tabStateClasses =
-        variant === "stepper"
-          ? tab.current
-            ? tabClasses.stepperSelected
-            : tabClasses.stepperDefault
-          : tab.current
-            ? tabClasses.selected
-            : tabClasses.default;
-      const iconStateClasses = tab.current
-        ? iconClasses.selected
-        : iconClasses.default;
-
-      const finalTabClasses = classNames(
-        "s-group/tab s-justify-center s-flex s-text-sm s-font-semibold s-py-2.5 s-transition-all ease-out s-duration-400 s-whitespace-nowrap s-select-none",
-        variant === "default"
-          ? tab.icon
-            ? tab.hideLabel
-              ? "s-px-3"
-              : "s-pr-3.5 s-pl-2.5"
-            : "s-px-3"
-          : "s-pl-1",
-
-        tabStateClasses.base,
-        tabStateClasses.hover,
-        tabStateClasses.dark.base,
-        tabStateClasses.dark.hover,
-        tabClassName,
-        tab.disabled ? "s-opacity-50 s-pointer-events-none" : ""
-      );
-
-      const finalIconClasses = classNames(
-        "s-transition-colors s-duration-400",
-        iconStateClasses.base,
-        iconStateClasses.hover,
-        iconStateClasses.dark.base,
-        iconStateClasses.dark.hover,
-        tabClassName
-      );
-
-      const Link: SparkleContextLinkType = tab.href
-        ? components.link
-        : noHrefLink;
-
-      // precedence on href and onClick (mutually exclusive), then setCurrentTab
-      const setCurrentTabFn = (e: MouseEvent<HTMLAnchorElement>) => {
-        if (!tab.id) {
-          throw new Error("Tab id is required to use setCurrentTab");
-        }
-        setCurrentTab?.(tab.id, e);
-      };
-      const onClickAction = tab.href
-        ? undefined
-        : tab.onClick ?? setCurrentTabFn;
-
-      const content: ReactNode = (
-        <Link
-          key={tab.label}
-          className={finalTabClasses}
-          aria-current={tab.current ? "page" : undefined}
-          onClick={onClickAction}
-          href={tab.href || "#"}
-        >
-          <div
-            className={
-              tab.current
-                ? "s-flex s-gap-x-2"
-                : "s-flex s-gap-x-2 s-transition s-duration-300 s-ease-out"
-            }
-          >
-            {tab.icon && (
-              <Icon visual={tab.icon} className={finalIconClasses} size="sm" />
-            )}
-            {tab.hideLabel ?? tab.label}
-            {variant === "stepper" && i < tabs.length - 1 && (
-              <Icon
-                visual={ChevronRightIcon}
-                className="s-mx-2 s-text-element-500"
-                size="sm"
-              />
-            )}
-          </div>
-        </Link>
-      );
-      return tab.hideLabel ? (
-        tab.label ? (
-          <React.Fragment key={`tab-${i}`}>
-            <div className={tabSizingClasses[tab.sizing ?? "hug"]}>
-              <Tooltip trigger={content} label={tab.label} />
-            </div>
-            {tab.hasSeparator && (
-              <div className="s-flex s-h-full s-grow" key={`sep-${i}`} />
-            )}
-          </React.Fragment>
-        ) : (
-          <React.Fragment key={`tab-${i}`}>
-            <div className={tabSizingClasses[tab.sizing ?? "hug"]}>
-              {content}
-            </div>
-            {tab.hasSeparator && (
-              <div className="s-flex s-h-full s-grow" key={`sep-${i}`} />
-            )}
-          </React.Fragment>
-        )
-      ) : (
-        <React.Fragment key={`tab-${i}`}>
-          <div className={tabSizingClasses[tab.sizing ?? "hug"]}>{content}</div>
-          {tab.hasSeparator && (
-            <div className="s-flex s-h-full s-grow" key={`sep-${i}`} />
-          )}
-        </React.Fragment>
-      );
-    });
-
-  return (
-    <div
-      className={classNames(
-        variant === "default"
-          ? "s-border-b s-border-structure-200 dark:s-border-structure-200-dark"
-          : "",
-        className ?? "",
-        "s-overflow-x-auto s-overflow-y-hidden s-scrollbar-hide"
-      )}
-    >
-      <nav className="s-flex s-space-x-0" aria-label="Tabs">
-        {renderTabs()}
-      </nav>
-    </div>
-  );
-}

package/src/stories/Tab.stories.tsx

@@ -1,104 +0,0 @@
-import type { Meta } from "@storybook/react";
-import React from "react";
-
-import {
-  CircleIcon,
-  RobotIcon,
-  SquareIcon,
-  Tab,
-  TriangleIcon,
-} from "../index_with_tw_base";
-import {
-  ChatBubbleBottomCenterTextIcon,
-  Cog6ToothIcon,
-} from "../index_with_tw_base";
-
-const meta = {
-  title: "Components/Tab",
-  component: Tab,
-} satisfies Meta<typeof Tab>;
-
-export default meta;
-
-export const TabExample = () => {
-  const [currentTab, setCurrentTab] = React.useState("chat");
-  const [currentTab2, setCurrentTab2] = React.useState("instructions");
-  return (
-    <div className="s-flex s-flex-col s-gap-10">
-      <div className="s-w-[320px]">
-        <Tab
-          tabs={[
-            {
-              label: "Chat",
-              id: "chat",
-              current: currentTab === "chat",
-              icon: ChatBubbleBottomCenterTextIcon,
-              sizing: "expand",
-            },
-            {
-              label: "Build",
-              id: "build",
-              current: currentTab === "build",
-              icon: RobotIcon,
-              sizing: "expand",
-            },
-            {
-              label: "Admin",
-              id: "admin",
-              current: currentTab === "admin",
-              icon: RobotIcon,
-              sizing: "expand",
-              hasSeparator: true,
-              disabled: true,
-            },
-            {
-              label: "Settings",
-              id: "settings",
-              hideLabel: true,
-              current: false,
-              icon: Cog6ToothIcon,
-            },
-          ]}
-          setCurrentTab={(tabId, event) => {
-            // add logic here
-            event.preventDefault();
-            setCurrentTab(tabId);
-          }}
-        />
-      </div>
-      <div className="s-w-full">
-        <Tab
-          variant="stepper"
-          tabs={[
-            {
-              label: "Instructions",
-              id: "instructions",
-              current: currentTab2 === "instructions",
-              icon: SquareIcon,
-              sizing: "hug",
-            },
-            {
-              label: "Data sources & Actions",
-              id: "data",
-              current: currentTab2 === "data",
-              icon: CircleIcon,
-              sizing: "hug",
-            },
-            {
-              label: "Naming",
-              id: "naming",
-              current: currentTab2 === "naming",
-              icon: TriangleIcon,
-              sizing: "hug",
-            },
-          ]}
-          setCurrentTab={(tabId, event) => {
-            // add logic here
-            event.preventDefault();
-            setCurrentTab2(tabId);
-          }}
-        />
-      </div>
-    </div>
-  );
-};