polaris-plus-ui 0.0.2 → 0.1.0

package/dist/index.css

@@ -0,0 +1,97 @@
+/* src/Flow-Components/Onboarding/Onboarding.css */
+:root {
+  --onboarding-bg: #f6f6f7;
+  --onboarding-primary: #008060;
+  --onboarding-border: #e1e3e5;
+  --onboarding-radius: 12px;
+}
+s-page {
+  background-color: var(--onboarding-bg);
+  min-height: 100vh;
+  display: block;
+}
+.onboarding-wrapper {
+  width: 100%;
+  padding-bottom: 60px;
+}
+.setup-info-text-wrapper {
+  margin-bottom: 8px;
+}
+.grid-container {
+  margin-top: 10px;
+}
+.wel-left-card,
+.slideshow-container {
+  height: 100%;
+}
+.left-card-content,
+.slideshow-inner {
+  background: white;
+  border-radius: var(--onboarding-radius);
+}
+.slideshow-inner {
+  border: 1px solid var(--onboarding-border);
+}
+.onboarding-sidebar-icon.large {
+  font-size: 60px;
+  margin-bottom: 16px;
+}
+.onboarding-sidebar-card-content [tone=success] {
+  font-weight: bold;
+}
+@media (max-width: 899px) {
+  .grid-container {
+    grid-template-columns: 1fr !important;
+    gap: 16px !important;
+  }
+}
+.pagination-bullet {
+  transition: all 0.3s ease;
+}
+.onboarding-field {
+  margin-bottom: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  text-align: left;
+}
+.onboarding-label {
+  font-size: 14px;
+  font-weight: 600;
+  color: #202223;
+}
+.onboarding-input {
+  width: 100%;
+  padding: 12px;
+  font-size: 14px;
+  border: 1px solid #d1d3d5;
+  border-radius: 8px;
+  transition: border-color 0.2s;
+}
+.onboarding-input:focus {
+  outline: none;
+  border-color: var(--onboarding-primary);
+  box-shadow: 0 0 0 1px var(--onboarding-primary);
+}
+.onboarding-field-checkbox {
+  flex-direction: row;
+  align-items: center;
+}
+.onboarding-checkbox-label {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  cursor: pointer;
+  font-size: 14px;
+}
+.onboarding-checkbox {
+  width: 18px;
+  height: 18px;
+  cursor: pointer;
+}
+.onboarding-help-text {
+  font-size: 12px;
+  color: #6d7175;
+  margin-top: 4px;
+}
+/*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Flow-Components/Onboarding/Onboarding.css"],"sourcesContent":["/* Onboarding.css */\n:root {\n  --onboarding-bg: #f6f6f7;\n  --onboarding-primary: #008060;\n  --onboarding-border: #e1e3e5;\n  --onboarding-radius: 12px;\n}\n\n/* Page Wrapper */\ns-page {\n  background-color: var(--onboarding-bg);\n  min-height: 100vh;\n  display: block;\n}\n\n.onboarding-wrapper {\n  width: 100%;\n  padding-bottom: 60px;\n}\n\n.setup-info-text-wrapper {\n  margin-bottom: 8px;\n}\n\n/* Grid Layout */\n.grid-container {\n  margin-top: 10px;\n}\n\n.wel-left-card, \n.slideshow-container {\n  height: 100%;\n}\n\n/* Card Content Areas */\n.left-card-content,\n.slideshow-inner {\n  background: white;\n  border-radius: var(--onboarding-radius);\n}\n\n.slideshow-inner {\n    border: 1px solid var(--onboarding-border);\n}\n\n/* Sidebar Specifics */\n.onboarding-sidebar-icon.large {\n  font-size: 60px;\n  margin-bottom: 16px;\n}\n\n/* Features in Sidebar */\n.onboarding-sidebar-card-content [tone=\"success\"] {\n  font-weight: bold;\n}\n\n/* Mobile Responsiveness */\n@media (max-width: 899px) {\n  .grid-container {\n    grid-template-columns: 1fr !important;\n    gap: 16px !important;\n  }\n}\n\n/* Pagination Dots / Bullets */\n/* Note: Bullets are inline-styled in TSX for color flexibility, \n   but base transitions go here */\n.pagination-bullet {\n    transition: all 0.3s ease;\n}\n\n/* Form Fields */\n.onboarding-field {\n  margin-bottom: 24px;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  text-align: left;\n}\n\n.onboarding-label {\n  font-size: 14px;\n  font-weight: 600;\n  color: #202223;\n}\n\n.onboarding-input {\n  width: 100%;\n  padding: 12px;\n  font-size: 14px;\n  border: 1px solid #d1d3d5;\n  border-radius: 8px;\n  transition: border-color 0.2s;\n}\n\n.onboarding-input:focus {\n  outline: none;\n  border-color: var(--onboarding-primary);\n  box-shadow: 0 0 0 1px var(--onboarding-primary);\n}\n\n.onboarding-field-checkbox {\n  flex-direction: row;\n  align-items: center;\n}\n\n.onboarding-checkbox-label {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  cursor: pointer;\n  font-size: 14px;\n}\n\n.onboarding-checkbox {\n  width: 18px;\n  height: 18px;\n  cursor: pointer;\n}\n\n.onboarding-help-text {\n  font-size: 12px;\n  color: #6d7175;\n  margin-top: 4px;\n}\n"],"mappings":";AACA;AACE,mBAAiB;AACjB,wBAAsB;AACtB,uBAAqB;AACrB,uBAAqB;AACvB;AAGA;AACE,oBAAkB,IAAI;AACtB,cAAY;AACZ,WAAS;AACX;AAEA,CAAC;AACC,SAAO;AACP,kBAAgB;AAClB;AAEA,CAAC;AACC,iBAAe;AACjB;AAGA,CAAC;AACC,cAAY;AACd;AAEA,CAAC;AACD,CAAC;AACC,UAAQ;AACV;AAGA,CAAC;AACD,CAAC;AACC,cAAY;AACZ,iBAAe,IAAI;AACrB;AAEA,CALC;AAMG,UAAQ,IAAI,MAAM,IAAI;AAC1B;AAGA,CAAC,uBAAuB,CAAC;AACvB,aAAW;AACX,iBAAe;AACjB;AAGA,CAAC,gCAAgC,CAAC;AAChC,eAAa;AACf;AAGA,QAAO,WAAY;AACjB,GAjCD;AAkCG,2BAAuB;AACvB,SAAK;AACP;AACF;AAKA,CAAC;AACG,cAAY,IAAI,KAAK;AACzB;AAGA,CAAC;AACC,iBAAe;AACf,WAAS;AACT,kBAAgB;AAChB,OAAK;AACL,cAAY;AACd;AAEA,CAAC;AACC,aAAW;AACX,eAAa;AACb,SAAO;AACT;AAEA,CAAC;AACC,SAAO;AACP,WAAS;AACT,aAAW;AACX,UAAQ,IAAI,MAAM;AAClB,iBAAe;AACf,cAAY,aAAa;AAC3B;AAEA,CATC,gBASgB;AACf,WAAS;AACT,gBAAc,IAAI;AAClB,cAAY,EAAE,EAAE,EAAE,IAAI,IAAI;AAC5B;AAEA,CAAC;AACC,kBAAgB;AAChB,eAAa;AACf;AAEA,CAAC;AACC,WAAS;AACT,eAAa;AACb,OAAK;AACL,UAAQ;AACR,aAAW;AACb;AAEA,CAAC;AACC,SAAO;AACP,UAAQ;AACR,UAAQ;AACV;AAEA,CAAC;AACC,aAAW;AACX,SAAO;AACP,cAAY;AACd;","names":[]}

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 
 interface AppPageProps {
     /** Page heading */
@@ -52,4 +52,89 @@ interface StatusCardsProps {
 }
 declare function StatusCard({ heading, title, status, tone, description, details, meta, action, onAction, }: StatusCardsProps): react_jsx_runtime.JSX.Element;
 
-export { AppPage, type AppPageProps, PageSection, type PageSectionProps, type PageSectionVariant, StatusCard, type StatusCardsProps, type StatusTone };
+interface TabsProps {
+    defaultValue?: string;
+    value?: string;
+    onValueChange?: (value: string) => void;
+    children: ReactNode;
+    className?: string;
+}
+declare function Tabs({ defaultValue, value, onValueChange, children }: TabsProps): react_jsx_runtime.JSX.Element;
+interface TabsListProps {
+    children: ReactNode;
+    gap?: string;
+}
+declare function TabsList({ children, gap }: TabsListProps): react_jsx_runtime.JSX.Element;
+interface TabsTriggerProps {
+    value: string;
+    children: ReactNode;
+    disabled?: boolean;
+}
+declare function TabsTrigger({ value, children, disabled }: TabsTriggerProps): react_jsx_runtime.JSX.Element;
+interface TabsContentProps {
+    value: string;
+    children: ReactNode;
+}
+declare function TabsContent({ value, children }: TabsContentProps): react_jsx_runtime.JSX.Element | null;
+
+interface OnboardingData {
+    [key: string]: any;
+}
+interface OnboardingStep {
+    id: string;
+    title: string;
+    subtitle?: string;
+    infoMessage?: string;
+    component?: React.ComponentType<{
+        data: OnboardingData;
+        updateData: (newData: Partial<OnboardingData>) => void;
+    }>;
+    children?: React.ReactNode;
+    validate?: (data: OnboardingData) => boolean;
+    sidebar?: {
+        icon?: React.ReactNode;
+        title: string;
+        description: string;
+        features?: string[];
+    };
+}
+interface OnboardingStepProps extends Omit<OnboardingStep, 'component'> {
+    children?: React.ReactNode;
+}
+interface OnboardingContextType {
+    currentStepIndex: number;
+    totalSteps: number;
+    data: OnboardingData;
+    updateData: (newData: Partial<OnboardingData>) => void;
+    nextStep: () => void;
+    prevStep: () => void;
+    isFirstStep: boolean;
+    isLastStep: boolean;
+    canProceed: boolean;
+}
+
+interface SetupSummaryProps {
+    data?: OnboardingData;
+    updateData?: (newData: Partial<OnboardingData>) => void;
+}
+declare const SetupSummary: React.FC<SetupSummaryProps>;
+
+interface OnboardingProps {
+    steps?: OnboardingStep[];
+    children?: React.ReactNode;
+    onFinish: (data: OnboardingData) => void;
+}
+declare const Step: React.FC<OnboardingStepProps>;
+declare const Onboarding: React.FC<OnboardingProps> & {
+    Step: typeof Step;
+    Summary: typeof SetupSummary;
+};
+
+declare const OnboardingProvider: React.FC<{
+    steps: OnboardingStep[];
+    children: React.ReactNode;
+    onFinish: (data: OnboardingData) => void;
+}>;
+declare const useOnboarding: () => OnboardingContextType;
+
+export { AppPage, type AppPageProps, Onboarding, type OnboardingContextType, type OnboardingData, type OnboardingProps, OnboardingProvider, type OnboardingStep, type OnboardingStepProps, PageSection, type PageSectionProps, type PageSectionVariant, SetupSummary, StatusCard, type StatusCardsProps, type StatusTone, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, useOnboarding };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 
 interface AppPageProps {
     /** Page heading */
@@ -52,4 +52,89 @@ interface StatusCardsProps {
 }
 declare function StatusCard({ heading, title, status, tone, description, details, meta, action, onAction, }: StatusCardsProps): react_jsx_runtime.JSX.Element;
 
-export { AppPage, type AppPageProps, PageSection, type PageSectionProps, type PageSectionVariant, StatusCard, type StatusCardsProps, type StatusTone };
+interface TabsProps {
+    defaultValue?: string;
+    value?: string;
+    onValueChange?: (value: string) => void;
+    children: ReactNode;
+    className?: string;
+}
+declare function Tabs({ defaultValue, value, onValueChange, children }: TabsProps): react_jsx_runtime.JSX.Element;
+interface TabsListProps {
+    children: ReactNode;
+    gap?: string;
+}
+declare function TabsList({ children, gap }: TabsListProps): react_jsx_runtime.JSX.Element;
+interface TabsTriggerProps {
+    value: string;
+    children: ReactNode;
+    disabled?: boolean;
+}
+declare function TabsTrigger({ value, children, disabled }: TabsTriggerProps): react_jsx_runtime.JSX.Element;
+interface TabsContentProps {
+    value: string;
+    children: ReactNode;
+}
+declare function TabsContent({ value, children }: TabsContentProps): react_jsx_runtime.JSX.Element | null;
+
+interface OnboardingData {
+    [key: string]: any;
+}
+interface OnboardingStep {
+    id: string;
+    title: string;
+    subtitle?: string;
+    infoMessage?: string;
+    component?: React.ComponentType<{
+        data: OnboardingData;
+        updateData: (newData: Partial<OnboardingData>) => void;
+    }>;
+    children?: React.ReactNode;
+    validate?: (data: OnboardingData) => boolean;
+    sidebar?: {
+        icon?: React.ReactNode;
+        title: string;
+        description: string;
+        features?: string[];
+    };
+}
+interface OnboardingStepProps extends Omit<OnboardingStep, 'component'> {
+    children?: React.ReactNode;
+}
+interface OnboardingContextType {
+    currentStepIndex: number;
+    totalSteps: number;
+    data: OnboardingData;
+    updateData: (newData: Partial<OnboardingData>) => void;
+    nextStep: () => void;
+    prevStep: () => void;
+    isFirstStep: boolean;
+    isLastStep: boolean;
+    canProceed: boolean;
+}
+
+interface SetupSummaryProps {
+    data?: OnboardingData;
+    updateData?: (newData: Partial<OnboardingData>) => void;
+}
+declare const SetupSummary: React.FC<SetupSummaryProps>;
+
+interface OnboardingProps {
+    steps?: OnboardingStep[];
+    children?: React.ReactNode;
+    onFinish: (data: OnboardingData) => void;
+}
+declare const Step: React.FC<OnboardingStepProps>;
+declare const Onboarding: React.FC<OnboardingProps> & {
+    Step: typeof Step;
+    Summary: typeof SetupSummary;
+};
+
+declare const OnboardingProvider: React.FC<{
+    steps: OnboardingStep[];
+    children: React.ReactNode;
+    onFinish: (data: OnboardingData) => void;
+}>;
+declare const useOnboarding: () => OnboardingContextType;
+
+export { AppPage, type AppPageProps, Onboarding, type OnboardingContextType, type OnboardingData, type OnboardingProps, OnboardingProvider, type OnboardingStep, type OnboardingStepProps, PageSection, type PageSectionProps, type PageSectionVariant, SetupSummary, StatusCard, type StatusCardsProps, type StatusTone, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, useOnboarding };

package/dist/index.js

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,14 +17,30 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
   AppPage: () => AppPage,
+  Onboarding: () => Onboarding,
+  OnboardingProvider: () => OnboardingProvider,
   PageSection: () => PageSection,
-  StatusCard: () => StatusCard
+  SetupSummary: () => SetupSummary,
+  StatusCard: () => StatusCard,
+  Tabs: () => Tabs,
+  TabsContent: () => TabsContent,
+  TabsList: () => TabsList,
+  TabsTrigger: () => TabsTrigger,
+  useOnboarding: () => useOnboarding
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -106,10 +124,341 @@ function StatusCard({
     ] })
   ] }) }) }) });
 }
+
+// src/components/Tab/Tab.tsx
+var import_react = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var TabsContext = (0, import_react.createContext)(void 0);
+var useTabs = () => {
+  const context = (0, import_react.useContext)(TabsContext);
+  if (!context) {
+    throw new Error("Tabs sub-components must be used within a Tabs component");
+  }
+  return context;
+};
+function Tabs({ defaultValue, value, onValueChange, children }) {
+  const [internalActiveTab, setInternalActiveTab] = (0, import_react.useState)(defaultValue || "");
+  const activeTab = value !== void 0 ? value : internalActiveTab;
+  const setActiveTab = (newValue) => {
+    if (value === void 0) {
+      setInternalActiveTab(newValue);
+    }
+    onValueChange?.(newValue);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TabsContext.Provider, { value: { activeTab, setActiveTab }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { width: "100%" }, children }) });
+}
+function TabsList({ children, gap = "small" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("s-box", { paddingInline: "base", paddingBlock: "small", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: {
+    overflowX: "auto",
+    scrollbarWidth: "none",
+    msOverflowStyle: "none"
+  }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("style", { dangerouslySetInnerHTML: { __html: `
+          ::-webkit-scrollbar { display: none; }
+        ` } }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("s-stack", { direction: "inline", gap, alignItems: "center", children })
+  ] }) });
+}
+function TabsTrigger({ value, children, disabled }) {
+  const { activeTab, setActiveTab } = useTabs();
+  const isActive = activeTab === value;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("s-box", { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "s-clickable",
+    {
+      paddingInline: "small",
+      maxInlineWidth: "100px",
+      paddingBlock: "small-100",
+      borderRadius: "large-100",
+      background: isActive ? "strong" : "transparent",
+      onClick: () => !disabled && setActiveTab(value),
+      style: {
+        cursor: disabled ? "not-allowed" : "pointer",
+        opacity: disabled ? 0.5 : 1,
+        transition: "background 0.2s ease, transform 0.1s ease",
+        userSelect: "none"
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "s-text",
+        {
+          type: isActive ? "strong" : "generic",
+          tone: isActive ? "neutral" : "auto",
+          children
+        }
+      )
+    }
+  ) });
+}
+function TabsContent({ value, children }) {
+  const { activeTab } = useTabs();
+  if (activeTab !== value) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("s-box", { padding: "base", children });
+}
+
+// src/Flow-Components/Onboarding/Onboarding.tsx
+var import_react3 = __toESM(require("react"));
+
+// src/Flow-Components/Onboarding/hooks/useOnboarding.tsx
+var import_react2 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var OnboardingContext = (0, import_react2.createContext)(void 0);
+var OnboardingProvider = ({ steps, children, onFinish }) => {
+  const [currentStepIndex, setCurrentStepIndex] = (0, import_react2.useState)(0);
+  const [data, setData] = (0, import_react2.useState)({});
+  const updateData = (0, import_react2.useCallback)((newData) => {
+    setData((prev) => ({ ...prev, ...newData }));
+  }, []);
+  const nextStep = (0, import_react2.useCallback)(() => {
+    if (currentStepIndex < steps.length - 1) {
+      setCurrentStepIndex((prev) => prev + 1);
+    } else {
+      onFinish(data);
+    }
+  }, [currentStepIndex, steps.length, data, onFinish]);
+  const prevStep = (0, import_react2.useCallback)(() => {
+    if (currentStepIndex > 0) {
+      setCurrentStepIndex((prev) => prev - 1);
+    }
+  }, [currentStepIndex]);
+  const currentStep = steps[currentStepIndex];
+  const canProceed = (0, import_react2.useMemo)(() => {
+    if (!currentStep) return false;
+    return currentStep.validate ? currentStep.validate(data) : true;
+  }, [currentStep, data]);
+  const value = (0, import_react2.useMemo)(
+    () => ({
+      currentStepIndex,
+      totalSteps: steps.length,
+      data,
+      updateData,
+      nextStep,
+      prevStep,
+      isFirstStep: currentStepIndex === 0,
+      isLastStep: currentStepIndex === steps.length - 1,
+      canProceed
+    }),
+    [currentStepIndex, steps.length, data, updateData, nextStep, prevStep, canProceed]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(OnboardingContext.Provider, { value, children });
+};
+var useOnboarding = () => {
+  const context = (0, import_react2.useContext)(OnboardingContext);
+  if (!context) {
+    throw new Error("useOnboarding must be used within an OnboardingProvider");
+  }
+  return context;
+};
+
+// src/Flow-Components/Onboarding/components/SetupSummary.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var SetupSummary = (props) => {
+  const context = useOnboarding();
+  const data = props.data || context.data;
+  const entries = Object.entries(data);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "setup-summary", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { marginBottom: "24px" }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "glass-pill", style: { background: "#e1f5fe", color: "#0277bd", padding: "4px 12px" }, children: "Overview" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "grid", gap: "16px" }, children: [
+      entries.map(([key, value]) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: {
+        display: "flex",
+        justifyContent: "space-between",
+        padding: "12px 0",
+        borderBottom: "1px solid #f1f2f4"
+      }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { style: { fontWeight: 600, color: "#6d7175", textTransform: "capitalize" }, children: [
+          key.replace(/([A-Z])/g, " $1").trim(),
+          ":"
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { fontWeight: 500, color: "#1a1c1d" }, children: typeof value === "boolean" ? value ? "Yes" : "No" : String(value || "--") })
+      ] }, key)),
+      entries.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { style: { color: "#6d7175", fontStyle: "italic" }, children: "No configuration data provided." })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { marginTop: "32px", padding: "16px", borderRadius: "8px", background: "#f9fafb", border: "1px dashed #d1d3d5" }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { style: { fontSize: "13px", color: "#6d7175", margin: 0 }, children: 'Please review your information and click "Finish Setup" to activate account.' }) })
+  ] });
+};
+
+// src/Flow-Components/Onboarding/Onboarding.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var OnboardingInner = ({ steps }) => {
+  const {
+    currentStepIndex,
+    totalSteps,
+    data,
+    updateData,
+    nextStep,
+    prevStep,
+    isFirstStep,
+    isLastStep,
+    canProceed
+  } = useOnboarding();
+  const currentStep = steps[currentStepIndex];
+  if (!currentStep) return null;
+  const StepComponent = currentStep.component;
+  const progress = Math.round((currentStepIndex + 1) / totalSteps * 100);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("s-page", { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("s-stack", { gap: "large", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("s-stack", { gap: "tight", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("s-text", { type: "strong", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { fontSize: "24px", fontWeight: "bold", marginTop: "30px" }, children: "Installation Setup" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "setup-info-text-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("s-text", { color: "subdued", type: "strong", children: "Complete all the steps to set up your Live Gold Rate Updater account." }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { display: "flex", justifyContent: "center", width: "100%", padding: "0 0 16px" }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      "div",
+      {
+        className: "grid-container",
+        style: {
+          maxWidth: "1000px",
+          width: "100%",
+          display: "grid",
+          gridTemplateColumns: "1fr 0.6fr",
+          gap: "24px",
+          alignItems: "stretch"
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "wel-left-card", style: { display: "flex", flexDirection: "column", gap: "20px" }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { flex: 1 }, children: [
+            currentStep.infoMessage && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { marginBottom: "15px" }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("s-section", { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("s-banner", { tone: "info", heading: "Welcome to Installation Setup!", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("s-text", { children: currentStep.infoMessage }) }) }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("s-section", { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+              "div",
+              {
+                className: "left-card-content",
+                style: {
+                  minHeight: "450px",
+                  display: "flex",
+                  flexDirection: "column",
+                  justifyContent: "space-between",
+                  padding: "20px"
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { flex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("s-stack", { gap: "base", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("s-stack", { direction: "inline", justifyContent: "space-between", alignItems: "center", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("s-text", { color: "subdued", type: "strong", children: [
+                        "Step ",
+                        currentStepIndex + 1,
+                        " of ",
+                        totalSteps
+                      ] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("s-badge", { tone: "info", size: "base", children: `${progress}%` })
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: {
+                      width: "100%",
+                      height: "8px",
+                      backgroundColor: "#e5e5e5",
+                      borderRadius: "4px",
+                      overflow: "hidden"
+                    }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: {
+                      width: `${progress}%`,
+                      height: "100%",
+                      backgroundColor: "#008060",
+                      transition: "width 0.5s ease"
+                    } }) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("s-stack", { gap: "large", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("s-stack", { gap: "none", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("s-text", { "font-weight": "bold", type: "strong", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { fontWeight: "bold", fontSize: "18px" }, children: currentStep.title }) }),
+                        currentStep.subtitle && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("s-text", { color: "subdued", type: "strong", children: currentStep.subtitle })
+                      ] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "onboarding-step-component-mount", children: StepComponent ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(StepComponent, { data, updateData }) : currentStep.children })
+                    ] })
+                  ] }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { flexShrink: 0, paddingTop: "24px" }, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("s-divider", {}),
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("s-stack", { direction: "inline", justifyContent: "space-between", style: { paddingTop: "16px" }, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("s-button", { onClick: prevStep, disabled: isFirstStep, children: "Back" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                        "s-button",
+                        {
+                          variant: "primary",
+                          onClick: nextStep,
+                          disabled: !canProceed,
+                          children: isLastStep ? "Finish" : "Next"
+                        }
+                      )
+                    ] })
+                  ] })
+                ]
+              }
+            ) })
+          ] }) }),
+          currentStep.sidebar && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "slideshow-container", style: { display: "flex", flexDirection: "column" }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("s-section", { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            "div",
+            {
+              className: "slideshow-inner",
+              style: {
+                minHeight: "450px",
+                display: "flex",
+                flexDirection: "column",
+                justifyContent: "center",
+                padding: "20px 0",
+                textAlign: "center"
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("s-stack", { alignItems: "center", justifyContent: "center", gap: "large", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { display: "flex", alignItems: "center", justifyContent: "center" }, children: currentStep.sidebar.icon ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { fontSize: "60px" }, children: currentStep.sidebar.icon }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { fontSize: "60px" }, children: "\u{1F514}" }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("s-stack", { gap: "tight", align: "center", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("s-text", { "font-weight": "bold", type: "strong", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { fontSize: "18px", fontWeight: "bold" }, children: currentStep.sidebar.title }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("s-text", { color: "subdued", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { maxWidth: "300px", margin: "0 auto" }, children: currentStep.sidebar.description }) })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("s-divider", {}),
+                currentStep.sidebar.features && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("s-stack", { gap: "base", align: "start", style: { textAlign: "left", width: "100%", paddingLeft: "32px" }, children: currentStep.sidebar.features.map((feature, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("s-stack", { gap: "small", direction: "inline", alignItems: "start", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("s-text", { tone: "success", fontWeight: "bold", children: "\u2713" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("s-text", { variant: "bodyMd", children: feature })
+                ] }, index)) }),
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("s-divider", {}),
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("s-stack", { direction: "inline", justifyContent: "center", alignItems: "center", gap: "base", children: steps.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                  "div",
+                  {
+                    style: {
+                      width: currentStepIndex === index ? "28px" : "8px",
+                      height: "7px",
+                      borderRadius: "4px",
+                      background: currentStepIndex === index ? "#f49342" : "#e1e3e5",
+                      transition: "all 0.3s ease"
+                    }
+                  },
+                  index
+                )) })
+              ] })
+            }
+          ) }) })
+        ]
+      }
+    ) })
+  ] }) });
+};
+var Step = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children });
+var Onboarding = ({ steps: stepsProp, children, onFinish }) => {
+  const steps = import_react3.default.useMemo(() => {
+    if (stepsProp) return stepsProp;
+    const discoveredSteps = [];
+    import_react3.default.Children.forEach(children, (child) => {
+      if (import_react3.default.isValidElement(child) && child.type === Step) {
+        const props = child.props;
+        discoveredSteps.push({
+          ...props,
+          children: props.children
+        });
+      } else if (import_react3.default.isValidElement(child) && child.type === SetupSummary) {
+        const props = child.props;
+        discoveredSteps.push({
+          id: "summary",
+          title: "Review & Finish Setup",
+          ...props,
+          component: SetupSummary
+        });
+      }
+    });
+    return discoveredSteps;
+  }, [stepsProp, children]);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(OnboardingProvider, { steps, onFinish, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(OnboardingInner, { steps }) });
+};
+Onboarding.Step = Step;
+Onboarding.Summary = SetupSummary;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AppPage,
+  Onboarding,
+  OnboardingProvider,
   PageSection,
-  StatusCard
+  SetupSummary,
+  StatusCard,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  useOnboarding
 });
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/components/AppPage/AppPage.tsx","../src/components/PageSection/PageSection.tsx","../src/components/StatusCard/StatusCard.tsx"],"sourcesContent":["// Core page components\nexport * from \"./components/AppPage\";\nexport * from \"./components/PageSection\";\n\n// UI components\nexport * from \"./components/StatusCard\";","import type { ReactNode } from \"react\";\n\nexport interface AppPageProps {\n    /** Page heading */\n    heading: string;\n    /** Page subheading */\n    subheading?: string;\n    children: ReactNode;\n}\n\n/**\n * AppPage\n *\n * Wraps `s-page` with an `s-section` layout section.\n * Requires the Polaris CDN script in your app's <head>:\n * https://cdn.shopify.com/shopifycloud/polaris.js\n */\nexport function AppPage({ heading, subheading, children }: AppPageProps) {\n    return (\n        <s-page heading={heading}>\n            {subheading && (\n                <s-text as=\"p\" variant=\"bodyMd\" slot=\"subtitle\">\n                    {subheading}\n                </s-text>\n            )}\n            <s-section>\n                {children}\n            </s-section>\n        </s-page>\n    );\n}","import type { ReactNode } from \"react\";\n\nexport type PageSectionVariant = \"oneThird\" | \"oneHalf\" | \"fullWidth\";\n\nexport interface PageSectionProps {\n    /** Section heading */\n    heading?: string;\n    /** Content inside the section */\n    children: ReactNode;\n}\n\n/**\n * PageSection\n *\n * A typed wrapper around `s-section` for use inside an `AppPage`\n * or directly within an `s-page`.\n *\n * CDN: https://cdn.shopify.com/shopifycloud/polaris.js\n */\nexport function PageSection({ heading, children }: PageSectionProps) {\n    return (\n        <s-section heading={heading}>\n            {children}\n        </s-section>\n    );\n}\n","import type { ReactNode } from \"react\";\n\nexport type StatusTone = \"info\" | \"success\" | \"warning\" | \"critical\";\n\ninterface DetailItem {\n    label: string;\n    value: string;\n}\n\nexport interface StatusCardsProps {\n    heading: string;\n    title: string;\n    status?: string;\n    tone?: StatusTone;\n    description?: string;\n    details?: DetailItem[];\n    meta?: string;\n    action?: string;\n    onAction?: () => void;\n}\n\nexport function StatusCard({\n    heading,\n    title,\n    status,\n    tone = \"info\",\n    description,\n    details = [],\n    meta,\n    action,\n    onAction,\n}: StatusCardsProps) {\n    return (\n        <s-section>\n            <s-card>\n                <s-box padding=\"base\">\n                    <s-stack gap=\"base\">\n\n                        {/* Header */}\n                        \n\t\t\t\t\t\t\t\t\t\t\t\t\t<s-stack gap=\"0\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t  <s-text variant=\"headingMd\" color=\"subdued\">\n                               <h2 style={{ margin: 0 ,marginLeft: \"0.5rem\", letterSpacing: \"0.1rem\"}}> {heading}</h2>\n                            </s-text>\n                           \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<s-stack direction=\"inline\" alignItems=\"center\" gap=\"small\">\n                            <s-text variant=\"headingMd\" fontWeight=\"semibold\">\n                                <h1 style={{ margin: \"0.5rem\" }}> {title}</h1>\n                            </s-text>\n                            {status && (\n                                <s-badge tone={tone}>{status}</s-badge>\n                            )}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</s-stack>\n                        </s-stack>\n\n                        {/* Description */}\n                        {description && (\n                            <s-text variant=\"bodyMd\" tone=\"subdued\">\n                               <h3 style={{ margin: 0 ,marginLeft: \"0.5rem\", color:\"#596063\" }}>{description}</h3>\n                            </s-text>\n                        )}\n\n                        {/* Details → GRID (important change) */}\n                        {details.length > 0 && (\n                            <s-grid\n                                gap=\"small\"\n                                gridTemplateColumns=\"1fr 1fr\"\n                            >\n                                {details.map((item, i) => (\n                                    <s-box\n                                        key={i}\n                                        padding=\"base\"\n                                        background=\"strong\"\n                                        borderRadius=\"base\"\n                                    >\n                                        <s-stack gap=\"small-100\">\n                                            <s-text variant=\"bodySm\" tone=\"subdued\">\n                                                {item.label.toLocaleUpperCase()}\n                                            </s-text>\n\n                                            <s-text variant=\"bodyMd\" fontWeight=\"medium\">\n                                                {item.value}\n                                            </s-text>\n                                        </s-stack>\n                                    </s-box>\n                                ))}\n                            </s-grid>\n                        )}\n\n                        {/* Footer */}\n                        {(meta || action) && (\n                            <>\n                                <s-divider />\n\n                                <s-stack\n                                    direction=\"inline\"\n                                    justifyContent=\"space-between\"\n                                    alignItems=\"center\"\n                                >\n                                    <s-text variant=\"bodySm\" tone=\"subdued\">\n                                        {meta}\n                                    </s-text>\n\n                                    {action && (\n                                        <s-button variant=\"secondary\" onClick={onAction}>\n                                            {action}\n                                        </s-button>\n                                    )}\n                                </s-stack>\n                            </>\n                        )}\n\n                    </s-stack>\n                </s-box>\n            </s-card>\n        </s-section>\n    );\n}"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACmBQ;AAFD,SAAS,QAAQ,EAAE,SAAS,YAAY,SAAS,GAAiB;AACrE,SACI,6CAAC,YAAO,SACH;AAAA,kBACG,4CAAC,YAAO,IAAG,KAAI,SAAQ,UAAS,MAAK,YAChC,sBACL;AAAA,IAEJ,4CAAC,eACI,UACL;AAAA,KACJ;AAER;;;ACTQ,IAAAA,sBAAA;AAFD,SAAS,YAAY,EAAE,SAAS,SAAS,GAAqB;AACjE,SACI,6CAAC,eAAU,SACN,UACL;AAER;;;ACgBe,IAAAC,sBAAA;AApBR,SAAS,WAAW;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,UAAU,CAAC;AAAA,EACX;AAAA,EACA;AAAA,EACA;AACJ,GAAqB;AACjB,SACI,6CAAC,eACG,uDAAC,YACG,uDAAC,WAAM,SAAQ,QACX,wDAAC,aAAQ,KAAI,QAIpB;AAAA,kDAAC,aAAQ,KAAI,KACX;AAAA,mDAAC,YAAO,SAAQ,aAAY,OAAM,WAClB,wDAAC,QAAG,OAAO,EAAE,QAAQ,GAAG,YAAY,UAAU,eAAe,SAAQ,GAAG;AAAA;AAAA,QAAE;AAAA,SAAQ,GACrF;AAAA,MAEd,8CAAC,aAAQ,WAAU,UAAS,YAAW,UAAS,KAAI,SACtC;AAAA,qDAAC,YAAO,SAAQ,aAAY,YAAW,YACnC,wDAAC,QAAG,OAAO,EAAE,QAAQ,SAAS,GAAG;AAAA;AAAA,UAAE;AAAA,WAAM,GAC7C;AAAA,QACC,UACG,6CAAC,aAAQ,MAAa,kBAAO;AAAA,SAE/C;AAAA,OACU;AAAA,IAGC,eACG,6CAAC,YAAO,SAAQ,UAAS,MAAK,WAC3B,uDAAC,QAAG,OAAO,EAAE,QAAQ,GAAG,YAAY,UAAU,OAAM,UAAU,GAAI,uBAAY,GACjF;AAAA,IAIH,QAAQ,SAAS,KACd;AAAA,MAAC;AAAA;AAAA,QACG,KAAI;AAAA,QACJ,qBAAoB;AAAA,QAEnB,kBAAQ,IAAI,CAAC,MAAM,MAChB;AAAA,UAAC;AAAA;AAAA,YAEG,SAAQ;AAAA,YACR,YAAW;AAAA,YACX,cAAa;AAAA,YAEb,wDAAC,aAAQ,KAAI,aACT;AAAA,2DAAC,YAAO,SAAQ,UAAS,MAAK,WACzB,eAAK,MAAM,kBAAkB,GAClC;AAAA,cAEA,6CAAC,YAAO,SAAQ,UAAS,YAAW,UAC/B,eAAK,OACV;AAAA,eACJ;AAAA;AAAA,UAbK;AAAA,QAcT,CACH;AAAA;AAAA,IACL;AAAA,KAIF,QAAQ,WACN,8EACI;AAAA,mDAAC,eAAU;AAAA,MAEX;AAAA,QAAC;AAAA;AAAA,UACG,WAAU;AAAA,UACV,gBAAe;AAAA,UACf,YAAW;AAAA,UAEX;AAAA,yDAAC,YAAO,SAAQ,UAAS,MAAK,WACzB,gBACL;AAAA,YAEC,UACG,6CAAC,cAAS,SAAQ,aAAY,SAAS,UAClC,kBACL;AAAA;AAAA;AAAA,MAER;AAAA,OACJ;AAAA,KAGR,GACJ,GACJ,GACJ;AAER;","names":["import_jsx_runtime","import_jsx_runtime"]}
+{"version":3,"sources":["../src/index.ts","../src/components/AppPage/AppPage.tsx","../src/components/PageSection/PageSection.tsx","../src/components/StatusCard/StatusCard.tsx","../src/components/Tab/Tab.tsx","../src/Flow-Components/Onboarding/Onboarding.tsx","../src/Flow-Components/Onboarding/hooks/useOnboarding.tsx","../src/Flow-Components/Onboarding/components/SetupSummary.tsx"],"sourcesContent":["// Core page components\nexport * from \"./components/AppPage\";\nexport * from \"./components/PageSection\";\n\n// UI components\nexport * from \"./components/StatusCard\";\nexport * from \"./components/Tab\";\n\n// Flow Components\nexport * from \"./Flow-Components/Onboarding\";","import type { ReactNode } from \"react\";\n\nexport interface AppPageProps {\n    /** Page heading */\n    heading: string;\n    /** Page subheading */\n    subheading?: string;\n    children: ReactNode;\n}\n\n/**\n * AppPage\n *\n * Wraps `s-page` with an `s-section` layout section.\n * Requires the Polaris CDN script in your app's <head>:\n * https://cdn.shopify.com/shopifycloud/polaris.js\n */\nexport function AppPage({ heading, subheading, children }: AppPageProps) {\n    return (\n        <s-page heading={heading}>\n            {subheading && (\n                <s-text as=\"p\" variant=\"bodyMd\" slot=\"subtitle\">\n                    {subheading}\n                </s-text>\n            )}\n            <s-section>\n                {children}\n            </s-section>\n        </s-page>\n    );\n}","import type { ReactNode } from \"react\";\n\nexport type PageSectionVariant = \"oneThird\" | \"oneHalf\" | \"fullWidth\";\n\nexport interface PageSectionProps {\n    /** Section heading */\n    heading?: string;\n    /** Content inside the section */\n    children: ReactNode;\n}\n\n/**\n * PageSection\n *\n * A typed wrapper around `s-section` for use inside an `AppPage`\n * or directly within an `s-page`.\n *\n * CDN: https://cdn.shopify.com/shopifycloud/polaris.js\n */\nexport function PageSection({ heading, children }: PageSectionProps) {\n    return (\n        <s-section heading={heading}>\n            {children}\n        </s-section>\n    );\n}\n","import type { ReactNode } from \"react\";\n\nexport type StatusTone = \"info\" | \"success\" | \"warning\" | \"critical\";\n\ninterface DetailItem {\n    label: string;\n    value: string;\n}\n\nexport interface StatusCardsProps {\n    heading: string;\n    title: string;\n    status?: string;\n    tone?: StatusTone;\n    description?: string;\n    details?: DetailItem[];\n    meta?: string;\n    action?: string;\n    onAction?: () => void;\n}\n\nexport function StatusCard({\n    heading,\n    title,\n    status,\n    tone = \"info\",\n    description,\n    details = [],\n    meta,\n    action,\n    onAction,\n}: StatusCardsProps) {\n    return (\n        <s-section>\n            <s-card>\n                <s-box padding=\"base\">\n                    <s-stack gap=\"base\">\n\n                        {/* Header */}\n                        \n\t\t\t\t\t\t\t\t\t\t\t\t\t<s-stack gap=\"0\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t  <s-text variant=\"headingMd\" color=\"subdued\">\n                               <h2 style={{ margin: 0 ,marginLeft: \"0.5rem\", letterSpacing: \"0.1rem\"}}> {heading}</h2>\n                            </s-text>\n                           \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<s-stack direction=\"inline\" alignItems=\"center\" gap=\"small\">\n                            <s-text variant=\"headingMd\" fontWeight=\"semibold\">\n                                <h1 style={{ margin: \"0.5rem\" }}> {title}</h1>\n                            </s-text>\n                            {status && (\n                                <s-badge tone={tone}>{status}</s-badge>\n                            )}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</s-stack>\n                        </s-stack>\n\n                        {/* Description */}\n                        {description && (\n                            <s-text variant=\"bodyMd\" tone=\"subdued\">\n                               <h3 style={{ margin: 0 ,marginLeft: \"0.5rem\", color:\"#596063\" }}>{description}</h3>\n                            </s-text>\n                        )}\n\n                        {/* Details → GRID (important change) */}\n                        {details.length > 0 && (\n                            <s-grid\n                                gap=\"small\"\n                                gridTemplateColumns=\"1fr 1fr\"\n                            >\n                                {details.map((item, i) => (\n                                    <s-box\n                                        key={i}\n                                        padding=\"base\"\n                                        background=\"strong\"\n                                        borderRadius=\"base\"\n                                    >\n                                        <s-stack gap=\"small-100\">\n                                            <s-text variant=\"bodySm\" tone=\"subdued\">\n                                                {item.label.toLocaleUpperCase()}\n                                            </s-text>\n\n                                            <s-text variant=\"bodyMd\" fontWeight=\"medium\">\n                                                {item.value}\n                                            </s-text>\n                                        </s-stack>\n                                    </s-box>\n                                ))}\n                            </s-grid>\n                        )}\n\n                        {/* Footer */}\n                        {(meta || action) && (\n                            <>\n                                <s-divider />\n\n                                <s-stack\n                                    direction=\"inline\"\n                                    justifyContent=\"space-between\"\n                                    alignItems=\"center\"\n                                >\n                                    <s-text variant=\"bodySm\" tone=\"subdued\">\n                                        {meta}\n                                    </s-text>\n\n                                    {action && (\n                                        <s-button variant=\"secondary\" onClick={onAction}>\n                                            {action}\n                                        </s-button>\n                                    )}\n                                </s-stack>\n                            </>\n                        )}\n\n                    </s-stack>\n                </s-box>\n            </s-card>\n        </s-section>\n    );\n}","import React, { createContext, useContext, useState, ReactNode } from \"react\";\r\n\r\n// --- Context ---\r\ninterface TabsContextProps {\r\n  activeTab: string;\r\n  setActiveTab: (value: string) => void;\r\n}\r\n\r\nconst TabsContext = createContext<TabsContextProps | undefined>(undefined);\r\n\r\nconst useTabs = () => {\r\n  const context = useContext(TabsContext);\r\n  if (!context) {\r\n    throw new Error(\"Tabs sub-components must be used within a Tabs component\");\r\n  }\r\n  return context;\r\n};\r\n\r\n// --- Main Tabs Component ---\r\nexport interface TabsProps {\r\n  defaultValue?: string;\r\n  value?: string;\r\n  onValueChange?: (value: string) => void;\r\n  children: ReactNode;\r\n  className?: string; \r\n}\r\n\r\nexport function Tabs({ defaultValue, value, onValueChange, children }: TabsProps) {\r\n  const [internalActiveTab, setInternalActiveTab] = useState(defaultValue || \"\");\r\n\r\n  const activeTab = value !== undefined ? value : internalActiveTab;\r\n  const setActiveTab = (newValue: string) => {\r\n    if (value === undefined) {\r\n      setInternalActiveTab(newValue);\r\n    }\r\n    onValueChange?.(newValue);\r\n  };\r\n\r\n  return (\r\n    <TabsContext.Provider value={{ activeTab, setActiveTab }}>\r\n      <div style={{ width: \"100%\" }}>\r\n        {children}\r\n      </div>\r\n    </TabsContext.Provider>\r\n  );\r\n}\r\n\r\nexport interface TabsListProps {\r\n  children: ReactNode;\r\n  gap?: string;\r\n}\r\n\r\nexport function TabsList({ children, gap = \"small\" }: TabsListProps) {\r\n  return (\r\n    <s-box paddingInline=\"base\" paddingBlock=\"small\">\r\n      <div style={{ \r\n        overflowX: \"auto\", \r\n        scrollbarWidth: \"none\", \r\n        msOverflowStyle: \"none\", \r\n      }}>\r\n        <style dangerouslySetInnerHTML={{ __html: `\r\n          ::-webkit-scrollbar { display: none; }\r\n        ` }} />\r\n        <s-stack direction=\"inline\" gap={gap} alignItems=\"center\">\r\n          {children}\r\n        </s-stack>\r\n      </div>\r\n    </s-box>\r\n  );\r\n}\r\n\r\n// --- Trigger Component ---\r\nexport interface TabsTriggerProps {\r\n  value: string;\r\n  children: ReactNode;\r\n  disabled?: boolean;\r\n}\r\n\r\nexport function TabsTrigger({ value, children, disabled }: TabsTriggerProps) {\r\n  const { activeTab, setActiveTab } = useTabs();\r\n  const isActive = activeTab === value;\r\n\r\n  return (\r\n    <s-box>\r\n     <s-clickable\r\n      paddingInline=\"small\"\r\n      maxInlineWidth=\"100px\"\r\n      paddingBlock=\"small-100\"  \r\n      borderRadius=\"large-100\"\r\n      background={isActive ? \"strong\" : \"transparent\"}\r\n      onClick={() => !disabled && setActiveTab(value)}\r\n      style={{\r\n        cursor: disabled ? \"not-allowed\" : \"pointer\",\r\n        opacity: disabled ? 0.5 : 1,\r\n        transition: \"background 0.2s ease, transform 0.1s ease\",\r\n        userSelect: \"none\",\r\n      }}\r\n    >\r\n      <s-text\r\n        type={isActive ? \"strong\" : \"generic\"}\r\n        tone={isActive ? \"neutral\" : \"auto\"}\r\n      >\r\n        {children}\r\n      </s-text>\r\n    </s-clickable>\r\n    </s-box>\r\n  );\r\n}\r\n\r\n// --- Content Component ---\r\nexport interface TabsContentProps {\r\n  value: string;\r\n  children: ReactNode;\r\n}\r\n\r\nexport function TabsContent({ value, children }: TabsContentProps) {\r\n  const { activeTab } = useTabs();\r\n\r\n  if (activeTab !== value) return null;\r\n\r\n  return (\r\n    <s-box padding=\"base\">\r\n      {children}\r\n    </s-box>\r\n  );\r\n}","import React from 'react';\nimport { OnboardingProvider, useOnboarding } from './hooks/useOnboarding';\nimport { OnboardingStep, OnboardingData, OnboardingStepProps } from './types';\nimport { SetupSummary } from './components/SetupSummary';\n\nexport type { OnboardingStep, OnboardingData };\n\nimport './Onboarding.css';\n\nconst OnboardingInner: React.FC<{ steps: OnboardingStep[] }> = ({ steps }) => {\n\n  const {\n    currentStepIndex,\n    totalSteps,\n    data,\n    updateData,\n    nextStep,\n    prevStep,\n    isFirstStep,\n    isLastStep,\n    canProceed,\n  } = useOnboarding();\n\n  const currentStep = steps[currentStepIndex];\n  if (!currentStep) return null;\n  \n  const StepComponent = currentStep.component;\n  const progress = Math.round(((currentStepIndex + 1) / totalSteps) * 100);\n\n  return (\n    <s-page>\n      <s-stack gap=\"large\">\n\n        {/* Header Section */}\n        <s-stack gap=\"tight\">\n          <s-text type=\"strong\">\n            <div style={{ fontSize: \"24px\", fontWeight: \"bold\", marginTop: \"30px\" }}>\n              Installation Setup\n            </div>\n          </s-text>\n          <div className=\"setup-info-text-wrapper\">\n            <s-text color=\"subdued\" type=\"strong\">\n              Complete all the steps to set up your Live Gold Rate Updater account.\n            </s-text>\n          </div>\n        </s-stack>\n\n        <div style={{ display: \"flex\", justifyContent: \"center\", width: \"100%\", padding: \"0 0 16px\" }}>\n          <div \n            className=\"grid-container\"\n            style={{ \n              maxWidth: \"1000px\", \n              width: \"100%\", \n              display: \"grid\", \n              gridTemplateColumns: \"1fr 0.6fr\", \n              gap: \"24px\",\n              alignItems: \"stretch\" \n            }}\n          >\n            {/* Left Card: Main Content */}\n            <div className=\"wel-left-card\" style={{ display: \"flex\", flexDirection: \"column\", gap: \"20px\" }}>\n              <div style={{ flex: 1 }}>\n                \n                {/* Banner Section */}\n                {currentStep.infoMessage && (\n                  <div style={{ marginBottom: '15px' }}>\n                    <s-section>\n                      <s-banner tone=\"info\" heading=\"Welcome to Installation Setup!\">\n                        <s-text>{currentStep.infoMessage}</s-text>\n                      </s-banner>\n                    </s-section>\n                  </div>\n                )}\n\n                <s-section>\n                  <div \n                    className=\"left-card-content\"\n                    style={{ \n                      minHeight: \"450px\", \n                      display: \"flex\", \n                      flexDirection: \"column\", \n                      justifyContent: \"space-between\", \n                      padding: \"20px\" \n                    }}\n                  >\n                    <div style={{ flex: 1 }}>\n                      <s-stack gap=\"base\">\n                        <s-stack direction=\"inline\" justifyContent=\"space-between\" alignItems=\"center\">\n                          <s-text color=\"subdued\" type=\"strong\">\n                            Step {currentStepIndex + 1} of {totalSteps}\n                          </s-text>\n                          <s-badge tone=\"info\" size=\"base\">{`${progress}%`}</s-badge>\n                        </s-stack>\n\n                        {/* Progress Bar */}\n                        <div style={{ \n                          width: '100%', \n                          height: '8px', \n                          backgroundColor: '#e5e5e5', \n                          borderRadius: '4px', \n                          overflow: 'hidden' \n                        }}>\n                          <div style={{ \n                            width: `${progress}%`, \n                            height: '100%', \n                            backgroundColor: '#008060', \n                            transition: 'width 0.5s ease' \n                          }} />\n                        </div>\n\n                        {/* Step Title + Content */}\n                        <s-stack gap=\"large\">\n                          <s-stack gap=\"none\">\n                            <s-text font-weight=\"bold\" type=\"strong\">\n                              <div style={{ fontWeight: \"bold\", fontSize: \"18px\" }}>\n                                {currentStep.title}\n                              </div>\n                            </s-text>\n                            {currentStep.subtitle && (\n                              <s-text color=\"subdued\" type=\"strong\">\n                                {currentStep.subtitle}\n                              </s-text>\n                            )}\n                          </s-stack>\n                          <div className=\"onboarding-step-component-mount\">\n                            {StepComponent ? (\n                              <StepComponent data={data} updateData={updateData} />\n                            ) : (\n                                currentStep.children\n                            )}\n                          </div>\n                        </s-stack>\n                      </s-stack>\n                    </div>\n\n                    <div style={{ flexShrink: 0, paddingTop: \"24px\" }}>\n                      <s-divider />\n                      <s-stack direction=\"inline\" justifyContent=\"space-between\" style={{ paddingTop: \"16px\" }}>\n                        <s-button onClick={prevStep} disabled={isFirstStep}>\n                          Back\n                        </s-button>\n                        <s-button \n                          variant=\"primary\" \n                          onClick={nextStep} \n                          disabled={!canProceed}\n                        >\n                          {isLastStep ? 'Finish' : 'Next'}\n                        </s-button>\n                      </s-stack>\n                    </div>\n                  </div>\n                </s-section>\n              </div>\n            </div>\n\n            {/* Right Card: Sidebar Slideshow */}\n            {currentStep.sidebar && (\n              <div className=\"slideshow-container\" style={{ display: \"flex\", flexDirection: \"column\" }}>\n                <s-section>\n                  <div \n                    className=\"slideshow-inner\"\n                    style={{ \n                      minHeight: \"450px\", \n                      display: \"flex\", \n                      flexDirection: \"column\", \n                      justifyContent: \"center\", \n                      padding: \"20px 0\",\n                      textAlign: \"center\"\n                    }}\n                  >\n                    <s-stack alignItems=\"center\" justifyContent=\"center\" gap=\"large\">\n                      \n                      {/* Icon */}\n                      <div style={{ display: \"flex\", alignItems: \"center\", justifyContent: \"center\" }}>\n                        {currentStep.sidebar.icon ? (\n                          <div style={{ fontSize: \"60px\" }}>{currentStep.sidebar.icon}</div>\n                        ) : (\n                          <div style={{ fontSize: \"60px\" }}>🔔</div>\n                        )}\n                      </div>\n\n                      {/* Info */}\n                      <s-stack gap=\"tight\" align=\"center\">\n                        <s-text font-weight=\"bold\" type=\"strong\">\n                          <div style={{ fontSize: \"18px\", fontWeight: \"bold\" }}>\n                            {currentStep.sidebar.title}\n                          </div>\n                        </s-text>\n                        <s-text color=\"subdued\">\n                          <div style={{ maxWidth: \"300px\", margin: \"0 auto\" }}>\n                            {currentStep.sidebar.description}\n                          </div>\n                        </s-text>\n                      </s-stack>\n\n                      <s-divider />\n\n                      {/* Features */}\n                      {currentStep.sidebar.features && (\n                        <s-stack gap=\"base\" align=\"start\" style={{ textAlign: \"left\", width: \"100%\", paddingLeft: \"32px\" }}>\n                          {currentStep.sidebar.features.map((feature, index) => (\n                            <s-stack gap=\"small\" direction=\"inline\" key={index} alignItems=\"start\">\n                              <s-text tone=\"success\" fontWeight=\"bold\">✓</s-text>\n                              <s-text variant=\"bodyMd\">{feature}</s-text>\n                            </s-stack>\n                          ))}\n                        </s-stack>\n                      )}\n\n                      <s-divider />\n\n                      {/* Pagination Bullets */}\n                      <s-stack direction=\"inline\" justifyContent=\"center\" alignItems=\"center\" gap=\"base\">\n                        {steps.map((_, index) => (\n                          <div\n                            key={index}\n                            style={{\n                              width: currentStepIndex === index ? \"28px\" : \"8px\",\n                              height: \"7px\",\n                              borderRadius: \"4px\",\n                              background: currentStepIndex === index ? \"#f49342\" : \"#e1e3e5\",\n                              transition: \"all 0.3s ease\",\n                            }}\n                          />\n                        ))}\n                      </s-stack>\n\n                    </s-stack>\n                  </div>\n                </s-section>\n              </div>\n            )}\n          </div>\n        </div>\n      </s-stack>\n    </s-page>\n  );\n};\n\nexport interface OnboardingProps {\n  steps?: OnboardingStep[];\n  children?: React.ReactNode;\n  onFinish: (data: OnboardingData) => void;\n}\n\nconst Step: React.FC<OnboardingStepProps> = ({ children }) => <>{children}</>;\n\nexport const Onboarding: React.FC<OnboardingProps> & {\n    Step: typeof Step;\n    Summary: typeof SetupSummary;\n} = ({ steps: stepsProp, children, onFinish }) => {\n  \n  const steps = React.useMemo(() => {\n    if (stepsProp) return stepsProp;\n    \n    // Discover steps from children\n    const discoveredSteps: OnboardingStep[] = [];\n    React.Children.forEach(children, (child) => {\n      if (React.isValidElement(child) && child.type === Step) {\n        const props = child.props as any;\n        discoveredSteps.push({\n          ...props,\n          children: props.children,\n        });\n      } else if (React.isValidElement(child) && child.type === SetupSummary) {\n        const props = child.props as any;\n        discoveredSteps.push({\n            id: 'summary',\n            title: 'Review & Finish Setup',\n            ...props,\n            component: SetupSummary,\n        });\n      }\n    });\n    return discoveredSteps;\n  }, [stepsProp, children]);\n\n  return (\n    <OnboardingProvider steps={steps} onFinish={onFinish}>\n      <OnboardingInner steps={steps} />\n    </OnboardingProvider>\n  );\n};\n\nOnboarding.Step = Step;\nOnboarding.Summary = SetupSummary;","import React, { createContext, useContext, useState, useCallback, useMemo } from 'react';\nimport { OnboardingContextType, OnboardingData, OnboardingStep } from '../types';\n\nconst OnboardingContext = createContext<OnboardingContextType | undefined>(undefined);\n\nexport const OnboardingProvider: React.FC<{\n  steps: OnboardingStep[];\n  children: React.ReactNode;\n  onFinish: (data: OnboardingData) => void;\n}> = ({ steps, children, onFinish }) => {\n  const [currentStepIndex, setCurrentStepIndex] = useState(0);\n  const [data, setData] = useState<OnboardingData>({});\n\n  const updateData = useCallback((newData: Partial<OnboardingData>) => {\n    setData((prev) => ({ ...prev, ...newData }));\n  }, []);\n\n  const nextStep = useCallback(() => {\n    if (currentStepIndex < steps.length - 1) {\n      setCurrentStepIndex((prev) => prev + 1);\n    } else {\n      onFinish(data);\n    }\n  }, [currentStepIndex, steps.length, data, onFinish]);\n\n  const prevStep = useCallback(() => {\n    if (currentStepIndex > 0) {\n      setCurrentStepIndex((prev) => prev - 1);\n    }\n  }, [currentStepIndex]);\n\n  const currentStep = steps[currentStepIndex];\n  const canProceed = useMemo(() => {\n    if (!currentStep) return false;\n    return currentStep.validate ? currentStep.validate(data) : true;\n  }, [currentStep, data]);\n\n  const value = useMemo(\n    () => ({\n      currentStepIndex,\n      totalSteps: steps.length,\n      data,\n      updateData,\n      nextStep,\n      prevStep,\n      isFirstStep: currentStepIndex === 0,\n      isLastStep: currentStepIndex === steps.length - 1,\n      canProceed,\n    }),\n    [currentStepIndex, steps.length, data, updateData, nextStep, prevStep, canProceed]\n  );\n\n  return <OnboardingContext.Provider value={value}>{children}</OnboardingContext.Provider>;\n};\n\nexport const useOnboarding = () => {\n  const context = useContext(OnboardingContext);\n  if (!context) {\n    throw new Error('useOnboarding must be used within an OnboardingProvider');\n  }\n  return context;\n};\n","import React from 'react';\nimport { OnboardingData } from '../types';\nimport { useOnboarding } from '../hooks/useOnboarding';\n\ninterface SetupSummaryProps {\n  data?: OnboardingData;\n  updateData?: (newData: Partial<OnboardingData>) => void;\n}\n\nexport const SetupSummary: React.FC<SetupSummaryProps> = (props) => {\n  const context = useOnboarding();\n  const data = props.data || context.data;\n  const entries = Object.entries(data);\n\n  return (\n    <div className=\"setup-summary\">\n      <div style={{ marginBottom: '24px' }}>\n        <span className=\"glass-pill\" style={{ background: '#e1f5fe', color: '#0277bd', padding: '4px 12px' }}>\n          Overview\n        </span>\n      </div>\n      \n      <div style={{ display: 'grid', gap: '16px' }}>\n        {entries.map(([key, value]) => (\n          <div key={key} style={{ \n            display: 'flex', \n            justifyContent: 'space-between', \n            padding: '12px 0', \n            borderBottom: '1px solid #f1f2f4' \n          }}>\n            <span style={{ fontWeight: 600, color: '#6d7175', textTransform: 'capitalize' }}>\n              {key.replace(/([A-Z])/g, ' $1').trim()}:\n            </span>\n            <span style={{ fontWeight: 500, color: '#1a1c1d' }}>\n              {typeof value === 'boolean' ? (value ? 'Yes' : 'No') : String(value || '--')}\n            </span>\n          </div>\n        ))}\n        {entries.length === 0 && (\n          <p style={{ color: '#6d7175', fontStyle: 'italic' }}>No configuration data provided.</p>\n        )}\n      </div>\n\n      <div style={{ marginTop: '32px', padding: '16px', borderRadius: '8px', background: '#f9fafb', border: '1px dashed #d1d3d5' }}>\n        <p style={{ fontSize: '13px', color: '#6d7175', margin: 0 }}>\n          Please review your information and click \"Finish Setup\" to activate account.\n        </p>\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACmBQ;AAFD,SAAS,QAAQ,EAAE,SAAS,YAAY,SAAS,GAAiB;AACrE,SACI,6CAAC,YAAO,SACH;AAAA,kBACG,4CAAC,YAAO,IAAG,KAAI,SAAQ,UAAS,MAAK,YAChC,sBACL;AAAA,IAEJ,4CAAC,eACI,UACL;AAAA,KACJ;AAER;;;ACTQ,IAAAA,sBAAA;AAFD,SAAS,YAAY,EAAE,SAAS,SAAS,GAAqB;AACjE,SACI,6CAAC,eAAU,SACN,UACL;AAER;;;ACgBe,IAAAC,sBAAA;AApBR,SAAS,WAAW;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,UAAU,CAAC;AAAA,EACX;AAAA,EACA;AAAA,EACA;AACJ,GAAqB;AACjB,SACI,6CAAC,eACG,uDAAC,YACG,uDAAC,WAAM,SAAQ,QACX,wDAAC,aAAQ,KAAI,QAIpB;AAAA,kDAAC,aAAQ,KAAI,KACX;AAAA,mDAAC,YAAO,SAAQ,aAAY,OAAM,WAClB,wDAAC,QAAG,OAAO,EAAE,QAAQ,GAAG,YAAY,UAAU,eAAe,SAAQ,GAAG;AAAA;AAAA,QAAE;AAAA,SAAQ,GACrF;AAAA,MAEd,8CAAC,aAAQ,WAAU,UAAS,YAAW,UAAS,KAAI,SACtC;AAAA,qDAAC,YAAO,SAAQ,aAAY,YAAW,YACnC,wDAAC,QAAG,OAAO,EAAE,QAAQ,SAAS,GAAG;AAAA;AAAA,UAAE;AAAA,WAAM,GAC7C;AAAA,QACC,UACG,6CAAC,aAAQ,MAAa,kBAAO;AAAA,SAE/C;AAAA,OACU;AAAA,IAGC,eACG,6CAAC,YAAO,SAAQ,UAAS,MAAK,WAC3B,uDAAC,QAAG,OAAO,EAAE,QAAQ,GAAG,YAAY,UAAU,OAAM,UAAU,GAAI,uBAAY,GACjF;AAAA,IAIH,QAAQ,SAAS,KACd;AAAA,MAAC;AAAA;AAAA,QACG,KAAI;AAAA,QACJ,qBAAoB;AAAA,QAEnB,kBAAQ,IAAI,CAAC,MAAM,MAChB;AAAA,UAAC;AAAA;AAAA,YAEG,SAAQ;AAAA,YACR,YAAW;AAAA,YACX,cAAa;AAAA,YAEb,wDAAC,aAAQ,KAAI,aACT;AAAA,2DAAC,YAAO,SAAQ,UAAS,MAAK,WACzB,eAAK,MAAM,kBAAkB,GAClC;AAAA,cAEA,6CAAC,YAAO,SAAQ,UAAS,YAAW,UAC/B,eAAK,OACV;AAAA,eACJ;AAAA;AAAA,UAbK;AAAA,QAcT,CACH;AAAA;AAAA,IACL;AAAA,KAIF,QAAQ,WACN,8EACI;AAAA,mDAAC,eAAU;AAAA,MAEX;AAAA,QAAC;AAAA;AAAA,UACG,WAAU;AAAA,UACV,gBAAe;AAAA,UACf,YAAW;AAAA,UAEX;AAAA,yDAAC,YAAO,SAAQ,UAAS,MAAK,WACzB,gBACL;AAAA,YAEC,UACG,6CAAC,cAAS,SAAQ,aAAY,SAAS,UAClC,kBACL;AAAA;AAAA;AAAA,MAER;AAAA,OACJ;AAAA,KAGR,GACJ,GACJ,GACJ;AAER;;;ACrHA,mBAAsE;AAwChE,IAAAC,sBAAA;AAhCN,IAAM,kBAAc,4BAA4C,MAAS;AAEzE,IAAM,UAAU,MAAM;AACpB,QAAM,cAAU,yBAAW,WAAW;AACtC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,0DAA0D;AAAA,EAC5E;AACA,SAAO;AACT;AAWO,SAAS,KAAK,EAAE,cAAc,OAAO,eAAe,SAAS,GAAc;AAChF,QAAM,CAAC,mBAAmB,oBAAoB,QAAI,uBAAS,gBAAgB,EAAE;AAE7E,QAAM,YAAY,UAAU,SAAY,QAAQ;AAChD,QAAM,eAAe,CAAC,aAAqB;AACzC,QAAI,UAAU,QAAW;AACvB,2BAAqB,QAAQ;AAAA,IAC/B;AACA,oBAAgB,QAAQ;AAAA,EAC1B;AAEA,SACE,6CAAC,YAAY,UAAZ,EAAqB,OAAO,EAAE,WAAW,aAAa,GACrD,uDAAC,SAAI,OAAO,EAAE,OAAO,OAAO,GACzB,UACH,GACF;AAEJ;AAOO,SAAS,SAAS,EAAE,UAAU,MAAM,QAAQ,GAAkB;AACnE,SACE,6CAAC,WAAM,eAAc,QAAO,cAAa,SACvC,wDAAC,SAAI,OAAO;AAAA,IACV,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB,iBAAiB;AAAA,EACnB,GACE;AAAA,iDAAC,WAAM,yBAAyB,EAAE,QAAQ;AAAA;AAAA,UAExC,GAAG;AAAA,IACL,6CAAC,aAAQ,WAAU,UAAS,KAAU,YAAW,UAC9C,UACH;AAAA,KACF,GACF;AAEJ;AASO,SAAS,YAAY,EAAE,OAAO,UAAU,SAAS,GAAqB;AAC3E,QAAM,EAAE,WAAW,aAAa,IAAI,QAAQ;AAC5C,QAAM,WAAW,cAAc;AAE/B,SACE,6CAAC,WACA;AAAA,IAAC;AAAA;AAAA,MACA,eAAc;AAAA,MACd,gBAAe;AAAA,MACf,cAAa;AAAA,MACb,cAAa;AAAA,MACb,YAAY,WAAW,WAAW;AAAA,MAClC,SAAS,MAAM,CAAC,YAAY,aAAa,KAAK;AAAA,MAC9C,OAAO;AAAA,QACL,QAAQ,WAAW,gBAAgB;AAAA,QACnC,SAAS,WAAW,MAAM;AAAA,QAC1B,YAAY;AAAA,QACZ,YAAY;AAAA,MACd;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,WAAW,WAAW;AAAA,UAC5B,MAAM,WAAW,YAAY;AAAA,UAE5B;AAAA;AAAA,MACH;AAAA;AAAA,EACF,GACA;AAEJ;AAQO,SAAS,YAAY,EAAE,OAAO,SAAS,GAAqB;AACjE,QAAM,EAAE,UAAU,IAAI,QAAQ;AAE9B,MAAI,cAAc,MAAO,QAAO;AAEhC,SACE,6CAAC,WAAM,SAAQ,QACZ,UACH;AAEJ;;;AC7HA,IAAAC,gBAAkB;;;ACAlB,IAAAC,gBAAiF;AAoDxE,IAAAC,sBAAA;AAjDT,IAAM,wBAAoB,6BAAiD,MAAS;AAE7E,IAAM,qBAIR,CAAC,EAAE,OAAO,UAAU,SAAS,MAAM;AACtC,QAAM,CAAC,kBAAkB,mBAAmB,QAAI,wBAAS,CAAC;AAC1D,QAAM,CAAC,MAAM,OAAO,QAAI,wBAAyB,CAAC,CAAC;AAEnD,QAAM,iBAAa,2BAAY,CAAC,YAAqC;AACnE,YAAQ,CAAC,UAAU,EAAE,GAAG,MAAM,GAAG,QAAQ,EAAE;AAAA,EAC7C,GAAG,CAAC,CAAC;AAEL,QAAM,eAAW,2BAAY,MAAM;AACjC,QAAI,mBAAmB,MAAM,SAAS,GAAG;AACvC,0BAAoB,CAAC,SAAS,OAAO,CAAC;AAAA,IACxC,OAAO;AACL,eAAS,IAAI;AAAA,IACf;AAAA,EACF,GAAG,CAAC,kBAAkB,MAAM,QAAQ,MAAM,QAAQ,CAAC;AAEnD,QAAM,eAAW,2BAAY,MAAM;AACjC,QAAI,mBAAmB,GAAG;AACxB,0BAAoB,CAAC,SAAS,OAAO,CAAC;AAAA,IACxC;AAAA,EACF,GAAG,CAAC,gBAAgB,CAAC;AAErB,QAAM,cAAc,MAAM,gBAAgB;AAC1C,QAAM,iBAAa,uBAAQ,MAAM;AAC/B,QAAI,CAAC,YAAa,QAAO;AACzB,WAAO,YAAY,WAAW,YAAY,SAAS,IAAI,IAAI;AAAA,EAC7D,GAAG,CAAC,aAAa,IAAI,CAAC;AAEtB,QAAM,YAAQ;AAAA,IACZ,OAAO;AAAA,MACL;AAAA,MACA,YAAY,MAAM;AAAA,MAClB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,aAAa,qBAAqB;AAAA,MAClC,YAAY,qBAAqB,MAAM,SAAS;AAAA,MAChD;AAAA,IACF;AAAA,IACA,CAAC,kBAAkB,MAAM,QAAQ,MAAM,YAAY,UAAU,UAAU,UAAU;AAAA,EACnF;AAEA,SAAO,6CAAC,kBAAkB,UAAlB,EAA2B,OAAe,UAAS;AAC7D;AAEO,IAAM,gBAAgB,MAAM;AACjC,QAAM,cAAU,0BAAW,iBAAiB;AAC5C,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,yDAAyD;AAAA,EAC3E;AACA,SAAO;AACT;;;AC5CQ,IAAAC,sBAAA;AARD,IAAM,eAA4C,CAAC,UAAU;AAClE,QAAM,UAAU,cAAc;AAC9B,QAAM,OAAO,MAAM,QAAQ,QAAQ;AACnC,QAAM,UAAU,OAAO,QAAQ,IAAI;AAEnC,SACE,8CAAC,SAAI,WAAU,iBACb;AAAA,iDAAC,SAAI,OAAO,EAAE,cAAc,OAAO,GACjC,uDAAC,UAAK,WAAU,cAAa,OAAO,EAAE,YAAY,WAAW,OAAO,WAAW,SAAS,WAAW,GAAG,sBAEtG,GACF;AAAA,IAEA,8CAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,KAAK,OAAO,GACxC;AAAA,cAAQ,IAAI,CAAC,CAAC,KAAK,KAAK,MACvB,8CAAC,SAAc,OAAO;AAAA,QACpB,SAAS;AAAA,QACT,gBAAgB;AAAA,QAChB,SAAS;AAAA,QACT,cAAc;AAAA,MAChB,GACE;AAAA,sDAAC,UAAK,OAAO,EAAE,YAAY,KAAK,OAAO,WAAW,eAAe,aAAa,GAC3E;AAAA,cAAI,QAAQ,YAAY,KAAK,EAAE,KAAK;AAAA,UAAE;AAAA,WACzC;AAAA,QACA,6CAAC,UAAK,OAAO,EAAE,YAAY,KAAK,OAAO,UAAU,GAC9C,iBAAO,UAAU,YAAa,QAAQ,QAAQ,OAAQ,OAAO,SAAS,IAAI,GAC7E;AAAA,WAXQ,GAYV,CACD;AAAA,MACA,QAAQ,WAAW,KAClB,6CAAC,OAAE,OAAO,EAAE,OAAO,WAAW,WAAW,SAAS,GAAG,6CAA+B;AAAA,OAExF;AAAA,IAEA,6CAAC,SAAI,OAAO,EAAE,WAAW,QAAQ,SAAS,QAAQ,cAAc,OAAO,YAAY,WAAW,QAAQ,qBAAqB,GACzH,uDAAC,OAAE,OAAO,EAAE,UAAU,QAAQ,OAAO,WAAW,QAAQ,EAAE,GAAG,0FAE7D,GACF;AAAA,KACF;AAEJ;;;AFhBQ,IAAAC,sBAAA;AAzBR,IAAM,kBAAyD,CAAC,EAAE,MAAM,MAAM;AAE5E,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,cAAc;AAElB,QAAM,cAAc,MAAM,gBAAgB;AAC1C,MAAI,CAAC,YAAa,QAAO;AAEzB,QAAM,gBAAgB,YAAY;AAClC,QAAM,WAAW,KAAK,OAAQ,mBAAmB,KAAK,aAAc,GAAG;AAEvE,SACE,6CAAC,YACC,wDAAC,aAAQ,KAAI,SAGX;AAAA,kDAAC,aAAQ,KAAI,SACX;AAAA,mDAAC,YAAO,MAAK,UACX,uDAAC,SAAI,OAAO,EAAE,UAAU,QAAQ,YAAY,QAAQ,WAAW,OAAO,GAAG,gCAEzE,GACF;AAAA,MACA,6CAAC,SAAI,WAAU,2BACb,uDAAC,YAAO,OAAM,WAAU,MAAK,UAAS,mFAEtC,GACF;AAAA,OACF;AAAA,IAEA,6CAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,gBAAgB,UAAU,OAAO,QAAQ,SAAS,WAAW,GAC1F;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,OAAO;AAAA,UACL,UAAU;AAAA,UACV,OAAO;AAAA,UACP,SAAS;AAAA,UACT,qBAAqB;AAAA,UACrB,KAAK;AAAA,UACL,YAAY;AAAA,QACd;AAAA,QAGA;AAAA,uDAAC,SAAI,WAAU,iBAAgB,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,OAAO,GAC5F,wDAAC,SAAI,OAAO,EAAE,MAAM,EAAE,GAGnB;AAAA,wBAAY,eACX,6CAAC,SAAI,OAAO,EAAE,cAAc,OAAO,GACjC,uDAAC,eACC,uDAAC,cAAS,MAAK,QAAO,SAAQ,kCAC5B,uDAAC,YAAQ,sBAAY,aAAY,GACnC,GACF,GACF;AAAA,YAGF,6CAAC,eACC;AAAA,cAAC;AAAA;AAAA,gBACC,WAAU;AAAA,gBACV,OAAO;AAAA,kBACL,WAAW;AAAA,kBACX,SAAS;AAAA,kBACT,eAAe;AAAA,kBACf,gBAAgB;AAAA,kBAChB,SAAS;AAAA,gBACX;AAAA,gBAEA;AAAA,+DAAC,SAAI,OAAO,EAAE,MAAM,EAAE,GACpB,wDAAC,aAAQ,KAAI,QACX;AAAA,kEAAC,aAAQ,WAAU,UAAS,gBAAe,iBAAgB,YAAW,UACpE;AAAA,oEAAC,YAAO,OAAM,WAAU,MAAK,UAAS;AAAA;AAAA,wBAC9B,mBAAmB;AAAA,wBAAE;AAAA,wBAAK;AAAA,yBAClC;AAAA,sBACA,6CAAC,aAAQ,MAAK,QAAO,MAAK,QAAQ,aAAG,QAAQ,KAAI;AAAA,uBACnD;AAAA,oBAGA,6CAAC,SAAI,OAAO;AAAA,sBACV,OAAO;AAAA,sBACP,QAAQ;AAAA,sBACR,iBAAiB;AAAA,sBACjB,cAAc;AAAA,sBACd,UAAU;AAAA,oBACZ,GACE,uDAAC,SAAI,OAAO;AAAA,sBACV,OAAO,GAAG,QAAQ;AAAA,sBAClB,QAAQ;AAAA,sBACR,iBAAiB;AAAA,sBACjB,YAAY;AAAA,oBACd,GAAG,GACL;AAAA,oBAGA,8CAAC,aAAQ,KAAI,SACX;AAAA,oEAAC,aAAQ,KAAI,QACX;AAAA,qEAAC,YAAO,eAAY,QAAO,MAAK,UAC9B,uDAAC,SAAI,OAAO,EAAE,YAAY,QAAQ,UAAU,OAAO,GAChD,sBAAY,OACf,GACF;AAAA,wBACC,YAAY,YACX,6CAAC,YAAO,OAAM,WAAU,MAAK,UAC1B,sBAAY,UACf;AAAA,yBAEJ;AAAA,sBACA,6CAAC,SAAI,WAAU,mCACZ,0BACC,6CAAC,iBAAc,MAAY,YAAwB,IAEjD,YAAY,UAElB;AAAA,uBACF;AAAA,qBACF,GACF;AAAA,kBAEA,8CAAC,SAAI,OAAO,EAAE,YAAY,GAAG,YAAY,OAAO,GAC9C;AAAA,iEAAC,eAAU;AAAA,oBACX,8CAAC,aAAQ,WAAU,UAAS,gBAAe,iBAAgB,OAAO,EAAE,YAAY,OAAO,GACrF;AAAA,mEAAC,cAAS,SAAS,UAAU,UAAU,aAAa,kBAEpD;AAAA,sBACA;AAAA,wBAAC;AAAA;AAAA,0BACC,SAAQ;AAAA,0BACR,SAAS;AAAA,0BACT,UAAU,CAAC;AAAA,0BAEV,uBAAa,WAAW;AAAA;AAAA,sBAC3B;AAAA,uBACF;AAAA,qBACF;AAAA;AAAA;AAAA,YACF,GACF;AAAA,aACF,GACF;AAAA,UAGC,YAAY,WACX,6CAAC,SAAI,WAAU,uBAAsB,OAAO,EAAE,SAAS,QAAQ,eAAe,SAAS,GACrF,uDAAC,eACC;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO;AAAA,gBACL,WAAW;AAAA,gBACX,SAAS;AAAA,gBACT,eAAe;AAAA,gBACf,gBAAgB;AAAA,gBAChB,SAAS;AAAA,gBACT,WAAW;AAAA,cACb;AAAA,cAEA,wDAAC,aAAQ,YAAW,UAAS,gBAAe,UAAS,KAAI,SAGvD;AAAA,6DAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,YAAY,UAAU,gBAAgB,SAAS,GAC3E,sBAAY,QAAQ,OACnB,6CAAC,SAAI,OAAO,EAAE,UAAU,OAAO,GAAI,sBAAY,QAAQ,MAAK,IAE5D,6CAAC,SAAI,OAAO,EAAE,UAAU,OAAO,GAAG,uBAAE,GAExC;AAAA,gBAGA,8CAAC,aAAQ,KAAI,SAAQ,OAAM,UACzB;AAAA,+DAAC,YAAO,eAAY,QAAO,MAAK,UAC9B,uDAAC,SAAI,OAAO,EAAE,UAAU,QAAQ,YAAY,OAAO,GAChD,sBAAY,QAAQ,OACvB,GACF;AAAA,kBACA,6CAAC,YAAO,OAAM,WACZ,uDAAC,SAAI,OAAO,EAAE,UAAU,SAAS,QAAQ,SAAS,GAC/C,sBAAY,QAAQ,aACvB,GACF;AAAA,mBACF;AAAA,gBAEA,6CAAC,eAAU;AAAA,gBAGV,YAAY,QAAQ,YACnB,6CAAC,aAAQ,KAAI,QAAO,OAAM,SAAQ,OAAO,EAAE,WAAW,QAAQ,OAAO,QAAQ,aAAa,OAAO,GAC9F,sBAAY,QAAQ,SAAS,IAAI,CAAC,SAAS,UAC1C,8CAAC,aAAQ,KAAI,SAAQ,WAAU,UAAqB,YAAW,SAC7D;AAAA,+DAAC,YAAO,MAAK,WAAU,YAAW,QAAO,oBAAC;AAAA,kBAC1C,6CAAC,YAAO,SAAQ,UAAU,mBAAQ;AAAA,qBAFS,KAG7C,CACD,GACH;AAAA,gBAGF,6CAAC,eAAU;AAAA,gBAGX,6CAAC,aAAQ,WAAU,UAAS,gBAAe,UAAS,YAAW,UAAS,KAAI,QACzE,gBAAM,IAAI,CAAC,GAAG,UACb;AAAA,kBAAC;AAAA;AAAA,oBAEC,OAAO;AAAA,sBACL,OAAO,qBAAqB,QAAQ,SAAS;AAAA,sBAC7C,QAAQ;AAAA,sBACR,cAAc;AAAA,sBACd,YAAY,qBAAqB,QAAQ,YAAY;AAAA,sBACrD,YAAY;AAAA,oBACd;AAAA;AAAA,kBAPK;AAAA,gBAQP,CACD,GACH;AAAA,iBAEF;AAAA;AAAA,UACF,GACF,GACF;AAAA;AAAA;AAAA,IAEJ,GACF;AAAA,KACF,GACF;AAEJ;AAQA,IAAM,OAAsC,CAAC,EAAE,SAAS,MAAM,6EAAG,UAAS;AAEnE,IAAM,aAGT,CAAC,EAAE,OAAO,WAAW,UAAU,SAAS,MAAM;AAEhD,QAAM,QAAQ,cAAAC,QAAM,QAAQ,MAAM;AAChC,QAAI,UAAW,QAAO;AAGtB,UAAM,kBAAoC,CAAC;AAC3C,kBAAAA,QAAM,SAAS,QAAQ,UAAU,CAAC,UAAU;AAC1C,UAAI,cAAAA,QAAM,eAAe,KAAK,KAAK,MAAM,SAAS,MAAM;AACtD,cAAM,QAAQ,MAAM;AACpB,wBAAgB,KAAK;AAAA,UACnB,GAAG;AAAA,UACH,UAAU,MAAM;AAAA,QAClB,CAAC;AAAA,MACH,WAAW,cAAAA,QAAM,eAAe,KAAK,KAAK,MAAM,SAAS,cAAc;AACrE,cAAM,QAAQ,MAAM;AACpB,wBAAgB,KAAK;AAAA,UACjB,IAAI;AAAA,UACJ,OAAO;AAAA,UACP,GAAG;AAAA,UACH,WAAW;AAAA,QACf,CAAC;AAAA,MACH;AAAA,IACF,CAAC;AACD,WAAO;AAAA,EACT,GAAG,CAAC,WAAW,QAAQ,CAAC;AAExB,SACE,6CAAC,sBAAmB,OAAc,UAChC,uDAAC,mBAAgB,OAAc,GACjC;AAEJ;AAEA,WAAW,OAAO;AAClB,WAAW,UAAU;","names":["import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","import_react","import_react","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","React"]}

package/dist/index.mjs

@@ -78,9 +78,340 @@ function StatusCard({
     ] })
   ] }) }) }) });
 }
+
+// src/components/Tab/Tab.tsx
+import { createContext, useContext, useState } from "react";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var TabsContext = createContext(void 0);
+var useTabs = () => {
+  const context = useContext(TabsContext);
+  if (!context) {
+    throw new Error("Tabs sub-components must be used within a Tabs component");
+  }
+  return context;
+};
+function Tabs({ defaultValue, value, onValueChange, children }) {
+  const [internalActiveTab, setInternalActiveTab] = useState(defaultValue || "");
+  const activeTab = value !== void 0 ? value : internalActiveTab;
+  const setActiveTab = (newValue) => {
+    if (value === void 0) {
+      setInternalActiveTab(newValue);
+    }
+    onValueChange?.(newValue);
+  };
+  return /* @__PURE__ */ jsx4(TabsContext.Provider, { value: { activeTab, setActiveTab }, children: /* @__PURE__ */ jsx4("div", { style: { width: "100%" }, children }) });
+}
+function TabsList({ children, gap = "small" }) {
+  return /* @__PURE__ */ jsx4("s-box", { paddingInline: "base", paddingBlock: "small", children: /* @__PURE__ */ jsxs3("div", { style: {
+    overflowX: "auto",
+    scrollbarWidth: "none",
+    msOverflowStyle: "none"
+  }, children: [
+    /* @__PURE__ */ jsx4("style", { dangerouslySetInnerHTML: { __html: `
+          ::-webkit-scrollbar { display: none; }
+        ` } }),
+    /* @__PURE__ */ jsx4("s-stack", { direction: "inline", gap, alignItems: "center", children })
+  ] }) });
+}
+function TabsTrigger({ value, children, disabled }) {
+  const { activeTab, setActiveTab } = useTabs();
+  const isActive = activeTab === value;
+  return /* @__PURE__ */ jsx4("s-box", { children: /* @__PURE__ */ jsx4(
+    "s-clickable",
+    {
+      paddingInline: "small",
+      maxInlineWidth: "100px",
+      paddingBlock: "small-100",
+      borderRadius: "large-100",
+      background: isActive ? "strong" : "transparent",
+      onClick: () => !disabled && setActiveTab(value),
+      style: {
+        cursor: disabled ? "not-allowed" : "pointer",
+        opacity: disabled ? 0.5 : 1,
+        transition: "background 0.2s ease, transform 0.1s ease",
+        userSelect: "none"
+      },
+      children: /* @__PURE__ */ jsx4(
+        "s-text",
+        {
+          type: isActive ? "strong" : "generic",
+          tone: isActive ? "neutral" : "auto",
+          children
+        }
+      )
+    }
+  ) });
+}
+function TabsContent({ value, children }) {
+  const { activeTab } = useTabs();
+  if (activeTab !== value) return null;
+  return /* @__PURE__ */ jsx4("s-box", { padding: "base", children });
+}
+
+// src/Flow-Components/Onboarding/Onboarding.tsx
+import React3 from "react";
+
+// src/Flow-Components/Onboarding/hooks/useOnboarding.tsx
+import { createContext as createContext2, useContext as useContext2, useState as useState2, useCallback, useMemo } from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var OnboardingContext = createContext2(void 0);
+var OnboardingProvider = ({ steps, children, onFinish }) => {
+  const [currentStepIndex, setCurrentStepIndex] = useState2(0);
+  const [data, setData] = useState2({});
+  const updateData = useCallback((newData) => {
+    setData((prev) => ({ ...prev, ...newData }));
+  }, []);
+  const nextStep = useCallback(() => {
+    if (currentStepIndex < steps.length - 1) {
+      setCurrentStepIndex((prev) => prev + 1);
+    } else {
+      onFinish(data);
+    }
+  }, [currentStepIndex, steps.length, data, onFinish]);
+  const prevStep = useCallback(() => {
+    if (currentStepIndex > 0) {
+      setCurrentStepIndex((prev) => prev - 1);
+    }
+  }, [currentStepIndex]);
+  const currentStep = steps[currentStepIndex];
+  const canProceed = useMemo(() => {
+    if (!currentStep) return false;
+    return currentStep.validate ? currentStep.validate(data) : true;
+  }, [currentStep, data]);
+  const value = useMemo(
+    () => ({
+      currentStepIndex,
+      totalSteps: steps.length,
+      data,
+      updateData,
+      nextStep,
+      prevStep,
+      isFirstStep: currentStepIndex === 0,
+      isLastStep: currentStepIndex === steps.length - 1,
+      canProceed
+    }),
+    [currentStepIndex, steps.length, data, updateData, nextStep, prevStep, canProceed]
+  );
+  return /* @__PURE__ */ jsx5(OnboardingContext.Provider, { value, children });
+};
+var useOnboarding = () => {
+  const context = useContext2(OnboardingContext);
+  if (!context) {
+    throw new Error("useOnboarding must be used within an OnboardingProvider");
+  }
+  return context;
+};
+
+// src/Flow-Components/Onboarding/components/SetupSummary.tsx
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var SetupSummary = (props) => {
+  const context = useOnboarding();
+  const data = props.data || context.data;
+  const entries = Object.entries(data);
+  return /* @__PURE__ */ jsxs4("div", { className: "setup-summary", children: [
+    /* @__PURE__ */ jsx6("div", { style: { marginBottom: "24px" }, children: /* @__PURE__ */ jsx6("span", { className: "glass-pill", style: { background: "#e1f5fe", color: "#0277bd", padding: "4px 12px" }, children: "Overview" }) }),
+    /* @__PURE__ */ jsxs4("div", { style: { display: "grid", gap: "16px" }, children: [
+      entries.map(([key, value]) => /* @__PURE__ */ jsxs4("div", { style: {
+        display: "flex",
+        justifyContent: "space-between",
+        padding: "12px 0",
+        borderBottom: "1px solid #f1f2f4"
+      }, children: [
+        /* @__PURE__ */ jsxs4("span", { style: { fontWeight: 600, color: "#6d7175", textTransform: "capitalize" }, children: [
+          key.replace(/([A-Z])/g, " $1").trim(),
+          ":"
+        ] }),
+        /* @__PURE__ */ jsx6("span", { style: { fontWeight: 500, color: "#1a1c1d" }, children: typeof value === "boolean" ? value ? "Yes" : "No" : String(value || "--") })
+      ] }, key)),
+      entries.length === 0 && /* @__PURE__ */ jsx6("p", { style: { color: "#6d7175", fontStyle: "italic" }, children: "No configuration data provided." })
+    ] }),
+    /* @__PURE__ */ jsx6("div", { style: { marginTop: "32px", padding: "16px", borderRadius: "8px", background: "#f9fafb", border: "1px dashed #d1d3d5" }, children: /* @__PURE__ */ jsx6("p", { style: { fontSize: "13px", color: "#6d7175", margin: 0 }, children: 'Please review your information and click "Finish Setup" to activate account.' }) })
+  ] });
+};
+
+// src/Flow-Components/Onboarding/Onboarding.tsx
+import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+var OnboardingInner = ({ steps }) => {
+  const {
+    currentStepIndex,
+    totalSteps,
+    data,
+    updateData,
+    nextStep,
+    prevStep,
+    isFirstStep,
+    isLastStep,
+    canProceed
+  } = useOnboarding();
+  const currentStep = steps[currentStepIndex];
+  if (!currentStep) return null;
+  const StepComponent = currentStep.component;
+  const progress = Math.round((currentStepIndex + 1) / totalSteps * 100);
+  return /* @__PURE__ */ jsx7("s-page", { children: /* @__PURE__ */ jsxs5("s-stack", { gap: "large", children: [
+    /* @__PURE__ */ jsxs5("s-stack", { gap: "tight", children: [
+      /* @__PURE__ */ jsx7("s-text", { type: "strong", children: /* @__PURE__ */ jsx7("div", { style: { fontSize: "24px", fontWeight: "bold", marginTop: "30px" }, children: "Installation Setup" }) }),
+      /* @__PURE__ */ jsx7("div", { className: "setup-info-text-wrapper", children: /* @__PURE__ */ jsx7("s-text", { color: "subdued", type: "strong", children: "Complete all the steps to set up your Live Gold Rate Updater account." }) })
+    ] }),
+    /* @__PURE__ */ jsx7("div", { style: { display: "flex", justifyContent: "center", width: "100%", padding: "0 0 16px" }, children: /* @__PURE__ */ jsxs5(
+      "div",
+      {
+        className: "grid-container",
+        style: {
+          maxWidth: "1000px",
+          width: "100%",
+          display: "grid",
+          gridTemplateColumns: "1fr 0.6fr",
+          gap: "24px",
+          alignItems: "stretch"
+        },
+        children: [
+          /* @__PURE__ */ jsx7("div", { className: "wel-left-card", style: { display: "flex", flexDirection: "column", gap: "20px" }, children: /* @__PURE__ */ jsxs5("div", { style: { flex: 1 }, children: [
+            currentStep.infoMessage && /* @__PURE__ */ jsx7("div", { style: { marginBottom: "15px" }, children: /* @__PURE__ */ jsx7("s-section", { children: /* @__PURE__ */ jsx7("s-banner", { tone: "info", heading: "Welcome to Installation Setup!", children: /* @__PURE__ */ jsx7("s-text", { children: currentStep.infoMessage }) }) }) }),
+            /* @__PURE__ */ jsx7("s-section", { children: /* @__PURE__ */ jsxs5(
+              "div",
+              {
+                className: "left-card-content",
+                style: {
+                  minHeight: "450px",
+                  display: "flex",
+                  flexDirection: "column",
+                  justifyContent: "space-between",
+                  padding: "20px"
+                },
+                children: [
+                  /* @__PURE__ */ jsx7("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsxs5("s-stack", { gap: "base", children: [
+                    /* @__PURE__ */ jsxs5("s-stack", { direction: "inline", justifyContent: "space-between", alignItems: "center", children: [
+                      /* @__PURE__ */ jsxs5("s-text", { color: "subdued", type: "strong", children: [
+                        "Step ",
+                        currentStepIndex + 1,
+                        " of ",
+                        totalSteps
+                      ] }),
+                      /* @__PURE__ */ jsx7("s-badge", { tone: "info", size: "base", children: `${progress}%` })
+                    ] }),
+                    /* @__PURE__ */ jsx7("div", { style: {
+                      width: "100%",
+                      height: "8px",
+                      backgroundColor: "#e5e5e5",
+                      borderRadius: "4px",
+                      overflow: "hidden"
+                    }, children: /* @__PURE__ */ jsx7("div", { style: {
+                      width: `${progress}%`,
+                      height: "100%",
+                      backgroundColor: "#008060",
+                      transition: "width 0.5s ease"
+                    } }) }),
+                    /* @__PURE__ */ jsxs5("s-stack", { gap: "large", children: [
+                      /* @__PURE__ */ jsxs5("s-stack", { gap: "none", children: [
+                        /* @__PURE__ */ jsx7("s-text", { "font-weight": "bold", type: "strong", children: /* @__PURE__ */ jsx7("div", { style: { fontWeight: "bold", fontSize: "18px" }, children: currentStep.title }) }),
+                        currentStep.subtitle && /* @__PURE__ */ jsx7("s-text", { color: "subdued", type: "strong", children: currentStep.subtitle })
+                      ] }),
+                      /* @__PURE__ */ jsx7("div", { className: "onboarding-step-component-mount", children: StepComponent ? /* @__PURE__ */ jsx7(StepComponent, { data, updateData }) : currentStep.children })
+                    ] })
+                  ] }) }),
+                  /* @__PURE__ */ jsxs5("div", { style: { flexShrink: 0, paddingTop: "24px" }, children: [
+                    /* @__PURE__ */ jsx7("s-divider", {}),
+                    /* @__PURE__ */ jsxs5("s-stack", { direction: "inline", justifyContent: "space-between", style: { paddingTop: "16px" }, children: [
+                      /* @__PURE__ */ jsx7("s-button", { onClick: prevStep, disabled: isFirstStep, children: "Back" }),
+                      /* @__PURE__ */ jsx7(
+                        "s-button",
+                        {
+                          variant: "primary",
+                          onClick: nextStep,
+                          disabled: !canProceed,
+                          children: isLastStep ? "Finish" : "Next"
+                        }
+                      )
+                    ] })
+                  ] })
+                ]
+              }
+            ) })
+          ] }) }),
+          currentStep.sidebar && /* @__PURE__ */ jsx7("div", { className: "slideshow-container", style: { display: "flex", flexDirection: "column" }, children: /* @__PURE__ */ jsx7("s-section", { children: /* @__PURE__ */ jsx7(
+            "div",
+            {
+              className: "slideshow-inner",
+              style: {
+                minHeight: "450px",
+                display: "flex",
+                flexDirection: "column",
+                justifyContent: "center",
+                padding: "20px 0",
+                textAlign: "center"
+              },
+              children: /* @__PURE__ */ jsxs5("s-stack", { alignItems: "center", justifyContent: "center", gap: "large", children: [
+                /* @__PURE__ */ jsx7("div", { style: { display: "flex", alignItems: "center", justifyContent: "center" }, children: currentStep.sidebar.icon ? /* @__PURE__ */ jsx7("div", { style: { fontSize: "60px" }, children: currentStep.sidebar.icon }) : /* @__PURE__ */ jsx7("div", { style: { fontSize: "60px" }, children: "\u{1F514}" }) }),
+                /* @__PURE__ */ jsxs5("s-stack", { gap: "tight", align: "center", children: [
+                  /* @__PURE__ */ jsx7("s-text", { "font-weight": "bold", type: "strong", children: /* @__PURE__ */ jsx7("div", { style: { fontSize: "18px", fontWeight: "bold" }, children: currentStep.sidebar.title }) }),
+                  /* @__PURE__ */ jsx7("s-text", { color: "subdued", children: /* @__PURE__ */ jsx7("div", { style: { maxWidth: "300px", margin: "0 auto" }, children: currentStep.sidebar.description }) })
+                ] }),
+                /* @__PURE__ */ jsx7("s-divider", {}),
+                currentStep.sidebar.features && /* @__PURE__ */ jsx7("s-stack", { gap: "base", align: "start", style: { textAlign: "left", width: "100%", paddingLeft: "32px" }, children: currentStep.sidebar.features.map((feature, index) => /* @__PURE__ */ jsxs5("s-stack", { gap: "small", direction: "inline", alignItems: "start", children: [
+                  /* @__PURE__ */ jsx7("s-text", { tone: "success", fontWeight: "bold", children: "\u2713" }),
+                  /* @__PURE__ */ jsx7("s-text", { variant: "bodyMd", children: feature })
+                ] }, index)) }),
+                /* @__PURE__ */ jsx7("s-divider", {}),
+                /* @__PURE__ */ jsx7("s-stack", { direction: "inline", justifyContent: "center", alignItems: "center", gap: "base", children: steps.map((_, index) => /* @__PURE__ */ jsx7(
+                  "div",
+                  {
+                    style: {
+                      width: currentStepIndex === index ? "28px" : "8px",
+                      height: "7px",
+                      borderRadius: "4px",
+                      background: currentStepIndex === index ? "#f49342" : "#e1e3e5",
+                      transition: "all 0.3s ease"
+                    }
+                  },
+                  index
+                )) })
+              ] })
+            }
+          ) }) })
+        ]
+      }
+    ) })
+  ] }) });
+};
+var Step = ({ children }) => /* @__PURE__ */ jsx7(Fragment2, { children });
+var Onboarding = ({ steps: stepsProp, children, onFinish }) => {
+  const steps = React3.useMemo(() => {
+    if (stepsProp) return stepsProp;
+    const discoveredSteps = [];
+    React3.Children.forEach(children, (child) => {
+      if (React3.isValidElement(child) && child.type === Step) {
+        const props = child.props;
+        discoveredSteps.push({
+          ...props,
+          children: props.children
+        });
+      } else if (React3.isValidElement(child) && child.type === SetupSummary) {
+        const props = child.props;
+        discoveredSteps.push({
+          id: "summary",
+          title: "Review & Finish Setup",
+          ...props,
+          component: SetupSummary
+        });
+      }
+    });
+    return discoveredSteps;
+  }, [stepsProp, children]);
+  return /* @__PURE__ */ jsx7(OnboardingProvider, { steps, onFinish, children: /* @__PURE__ */ jsx7(OnboardingInner, { steps }) });
+};
+Onboarding.Step = Step;
+Onboarding.Summary = SetupSummary;
 export {
   AppPage,
+  Onboarding,
+  OnboardingProvider,
   PageSection,
-  StatusCard
+  SetupSummary,
+  StatusCard,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  useOnboarding
 };
 //# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/AppPage/AppPage.tsx","../src/components/PageSection/PageSection.tsx","../src/components/StatusCard/StatusCard.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\n\nexport interface AppPageProps {\n    /** Page heading */\n    heading: string;\n    /** Page subheading */\n    subheading?: string;\n    children: ReactNode;\n}\n\n/**\n * AppPage\n *\n * Wraps `s-page` with an `s-section` layout section.\n * Requires the Polaris CDN script in your app's <head>:\n * https://cdn.shopify.com/shopifycloud/polaris.js\n */\nexport function AppPage({ heading, subheading, children }: AppPageProps) {\n    return (\n        <s-page heading={heading}>\n            {subheading && (\n                <s-text as=\"p\" variant=\"bodyMd\" slot=\"subtitle\">\n                    {subheading}\n                </s-text>\n            )}\n            <s-section>\n                {children}\n            </s-section>\n        </s-page>\n    );\n}","import type { ReactNode } from \"react\";\n\nexport type PageSectionVariant = \"oneThird\" | \"oneHalf\" | \"fullWidth\";\n\nexport interface PageSectionProps {\n    /** Section heading */\n    heading?: string;\n    /** Content inside the section */\n    children: ReactNode;\n}\n\n/**\n * PageSection\n *\n * A typed wrapper around `s-section` for use inside an `AppPage`\n * or directly within an `s-page`.\n *\n * CDN: https://cdn.shopify.com/shopifycloud/polaris.js\n */\nexport function PageSection({ heading, children }: PageSectionProps) {\n    return (\n        <s-section heading={heading}>\n            {children}\n        </s-section>\n    );\n}\n","import type { ReactNode } from \"react\";\n\nexport type StatusTone = \"info\" | \"success\" | \"warning\" | \"critical\";\n\ninterface DetailItem {\n    label: string;\n    value: string;\n}\n\nexport interface StatusCardsProps {\n    heading: string;\n    title: string;\n    status?: string;\n    tone?: StatusTone;\n    description?: string;\n    details?: DetailItem[];\n    meta?: string;\n    action?: string;\n    onAction?: () => void;\n}\n\nexport function StatusCard({\n    heading,\n    title,\n    status,\n    tone = \"info\",\n    description,\n    details = [],\n    meta,\n    action,\n    onAction,\n}: StatusCardsProps) {\n    return (\n        <s-section>\n            <s-card>\n                <s-box padding=\"base\">\n                    <s-stack gap=\"base\">\n\n                        {/* Header */}\n                        \n\t\t\t\t\t\t\t\t\t\t\t\t\t<s-stack gap=\"0\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t  <s-text variant=\"headingMd\" color=\"subdued\">\n                               <h2 style={{ margin: 0 ,marginLeft: \"0.5rem\", letterSpacing: \"0.1rem\"}}> {heading}</h2>\n                            </s-text>\n                           \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<s-stack direction=\"inline\" alignItems=\"center\" gap=\"small\">\n                            <s-text variant=\"headingMd\" fontWeight=\"semibold\">\n                                <h1 style={{ margin: \"0.5rem\" }}> {title}</h1>\n                            </s-text>\n                            {status && (\n                                <s-badge tone={tone}>{status}</s-badge>\n                            )}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</s-stack>\n                        </s-stack>\n\n                        {/* Description */}\n                        {description && (\n                            <s-text variant=\"bodyMd\" tone=\"subdued\">\n                               <h3 style={{ margin: 0 ,marginLeft: \"0.5rem\", color:\"#596063\" }}>{description}</h3>\n                            </s-text>\n                        )}\n\n                        {/* Details → GRID (important change) */}\n                        {details.length > 0 && (\n                            <s-grid\n                                gap=\"small\"\n                                gridTemplateColumns=\"1fr 1fr\"\n                            >\n                                {details.map((item, i) => (\n                                    <s-box\n                                        key={i}\n                                        padding=\"base\"\n                                        background=\"strong\"\n                                        borderRadius=\"base\"\n                                    >\n                                        <s-stack gap=\"small-100\">\n                                            <s-text variant=\"bodySm\" tone=\"subdued\">\n                                                {item.label.toLocaleUpperCase()}\n                                            </s-text>\n\n                                            <s-text variant=\"bodyMd\" fontWeight=\"medium\">\n                                                {item.value}\n                                            </s-text>\n                                        </s-stack>\n                                    </s-box>\n                                ))}\n                            </s-grid>\n                        )}\n\n                        {/* Footer */}\n                        {(meta || action) && (\n                            <>\n                                <s-divider />\n\n                                <s-stack\n                                    direction=\"inline\"\n                                    justifyContent=\"space-between\"\n                                    alignItems=\"center\"\n                                >\n                                    <s-text variant=\"bodySm\" tone=\"subdued\">\n                                        {meta}\n                                    </s-text>\n\n                                    {action && (\n                                        <s-button variant=\"secondary\" onClick={onAction}>\n                                            {action}\n                                        </s-button>\n                                    )}\n                                </s-stack>\n                            </>\n                        )}\n\n                    </s-stack>\n                </s-box>\n            </s-card>\n        </s-section>\n    );\n}"],"mappings":";AAmBQ,SAEQ,KAFR;AAFD,SAAS,QAAQ,EAAE,SAAS,YAAY,SAAS,GAAiB;AACrE,SACI,qBAAC,YAAO,SACH;AAAA,kBACG,oBAAC,YAAO,IAAG,KAAI,SAAQ,UAAS,MAAK,YAChC,sBACL;AAAA,IAEJ,oBAAC,eACI,UACL;AAAA,KACJ;AAER;;;ACTQ,gBAAAA,YAAA;AAFD,SAAS,YAAY,EAAE,SAAS,SAAS,GAAqB;AACjE,SACI,gBAAAA,KAAC,eAAU,SACN,UACL;AAER;;;ACgBe,SAkDa,UAlDb,OAAAC,MACgB,QAAAC,aADhB;AApBR,SAAS,WAAW;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,UAAU,CAAC;AAAA,EACX;AAAA,EACA;AAAA,EACA;AACJ,GAAqB;AACjB,SACI,gBAAAD,KAAC,eACG,0BAAAA,KAAC,YACG,0BAAAA,KAAC,WAAM,SAAQ,QACX,0BAAAC,MAAC,aAAQ,KAAI,QAIpB;AAAA,oBAAAA,MAAC,aAAQ,KAAI,KACX;AAAA,sBAAAD,KAAC,YAAO,SAAQ,aAAY,OAAM,WAClB,0BAAAC,MAAC,QAAG,OAAO,EAAE,QAAQ,GAAG,YAAY,UAAU,eAAe,SAAQ,GAAG;AAAA;AAAA,QAAE;AAAA,SAAQ,GACrF;AAAA,MAEd,gBAAAA,MAAC,aAAQ,WAAU,UAAS,YAAW,UAAS,KAAI,SACtC;AAAA,wBAAAD,KAAC,YAAO,SAAQ,aAAY,YAAW,YACnC,0BAAAC,MAAC,QAAG,OAAO,EAAE,QAAQ,SAAS,GAAG;AAAA;AAAA,UAAE;AAAA,WAAM,GAC7C;AAAA,QACC,UACG,gBAAAD,KAAC,aAAQ,MAAa,kBAAO;AAAA,SAE/C;AAAA,OACU;AAAA,IAGC,eACG,gBAAAA,KAAC,YAAO,SAAQ,UAAS,MAAK,WAC3B,0BAAAA,KAAC,QAAG,OAAO,EAAE,QAAQ,GAAG,YAAY,UAAU,OAAM,UAAU,GAAI,uBAAY,GACjF;AAAA,IAIH,QAAQ,SAAS,KACd,gBAAAA;AAAA,MAAC;AAAA;AAAA,QACG,KAAI;AAAA,QACJ,qBAAoB;AAAA,QAEnB,kBAAQ,IAAI,CAAC,MAAM,MAChB,gBAAAA;AAAA,UAAC;AAAA;AAAA,YAEG,SAAQ;AAAA,YACR,YAAW;AAAA,YACX,cAAa;AAAA,YAEb,0BAAAC,MAAC,aAAQ,KAAI,aACT;AAAA,8BAAAD,KAAC,YAAO,SAAQ,UAAS,MAAK,WACzB,eAAK,MAAM,kBAAkB,GAClC;AAAA,cAEA,gBAAAA,KAAC,YAAO,SAAQ,UAAS,YAAW,UAC/B,eAAK,OACV;AAAA,eACJ;AAAA;AAAA,UAbK;AAAA,QAcT,CACH;AAAA;AAAA,IACL;AAAA,KAIF,QAAQ,WACN,gBAAAC,MAAA,YACI;AAAA,sBAAAD,KAAC,eAAU;AAAA,MAEX,gBAAAC;AAAA,QAAC;AAAA;AAAA,UACG,WAAU;AAAA,UACV,gBAAe;AAAA,UACf,YAAW;AAAA,UAEX;AAAA,4BAAAD,KAAC,YAAO,SAAQ,UAAS,MAAK,WACzB,gBACL;AAAA,YAEC,UACG,gBAAAA,KAAC,cAAS,SAAQ,aAAY,SAAS,UAClC,kBACL;AAAA;AAAA;AAAA,MAER;AAAA,OACJ;AAAA,KAGR,GACJ,GACJ,GACJ;AAER;","names":["jsx","jsx","jsxs"]}
+{"version":3,"sources":["../src/components/AppPage/AppPage.tsx","../src/components/PageSection/PageSection.tsx","../src/components/StatusCard/StatusCard.tsx","../src/components/Tab/Tab.tsx","../src/Flow-Components/Onboarding/Onboarding.tsx","../src/Flow-Components/Onboarding/hooks/useOnboarding.tsx","../src/Flow-Components/Onboarding/components/SetupSummary.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\n\nexport interface AppPageProps {\n    /** Page heading */\n    heading: string;\n    /** Page subheading */\n    subheading?: string;\n    children: ReactNode;\n}\n\n/**\n * AppPage\n *\n * Wraps `s-page` with an `s-section` layout section.\n * Requires the Polaris CDN script in your app's <head>:\n * https://cdn.shopify.com/shopifycloud/polaris.js\n */\nexport function AppPage({ heading, subheading, children }: AppPageProps) {\n    return (\n        <s-page heading={heading}>\n            {subheading && (\n                <s-text as=\"p\" variant=\"bodyMd\" slot=\"subtitle\">\n                    {subheading}\n                </s-text>\n            )}\n            <s-section>\n                {children}\n            </s-section>\n        </s-page>\n    );\n}","import type { ReactNode } from \"react\";\n\nexport type PageSectionVariant = \"oneThird\" | \"oneHalf\" | \"fullWidth\";\n\nexport interface PageSectionProps {\n    /** Section heading */\n    heading?: string;\n    /** Content inside the section */\n    children: ReactNode;\n}\n\n/**\n * PageSection\n *\n * A typed wrapper around `s-section` for use inside an `AppPage`\n * or directly within an `s-page`.\n *\n * CDN: https://cdn.shopify.com/shopifycloud/polaris.js\n */\nexport function PageSection({ heading, children }: PageSectionProps) {\n    return (\n        <s-section heading={heading}>\n            {children}\n        </s-section>\n    );\n}\n","import type { ReactNode } from \"react\";\n\nexport type StatusTone = \"info\" | \"success\" | \"warning\" | \"critical\";\n\ninterface DetailItem {\n    label: string;\n    value: string;\n}\n\nexport interface StatusCardsProps {\n    heading: string;\n    title: string;\n    status?: string;\n    tone?: StatusTone;\n    description?: string;\n    details?: DetailItem[];\n    meta?: string;\n    action?: string;\n    onAction?: () => void;\n}\n\nexport function StatusCard({\n    heading,\n    title,\n    status,\n    tone = \"info\",\n    description,\n    details = [],\n    meta,\n    action,\n    onAction,\n}: StatusCardsProps) {\n    return (\n        <s-section>\n            <s-card>\n                <s-box padding=\"base\">\n                    <s-stack gap=\"base\">\n\n                        {/* Header */}\n                        \n\t\t\t\t\t\t\t\t\t\t\t\t\t<s-stack gap=\"0\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t  <s-text variant=\"headingMd\" color=\"subdued\">\n                               <h2 style={{ margin: 0 ,marginLeft: \"0.5rem\", letterSpacing: \"0.1rem\"}}> {heading}</h2>\n                            </s-text>\n                           \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<s-stack direction=\"inline\" alignItems=\"center\" gap=\"small\">\n                            <s-text variant=\"headingMd\" fontWeight=\"semibold\">\n                                <h1 style={{ margin: \"0.5rem\" }}> {title}</h1>\n                            </s-text>\n                            {status && (\n                                <s-badge tone={tone}>{status}</s-badge>\n                            )}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</s-stack>\n                        </s-stack>\n\n                        {/* Description */}\n                        {description && (\n                            <s-text variant=\"bodyMd\" tone=\"subdued\">\n                               <h3 style={{ margin: 0 ,marginLeft: \"0.5rem\", color:\"#596063\" }}>{description}</h3>\n                            </s-text>\n                        )}\n\n                        {/* Details → GRID (important change) */}\n                        {details.length > 0 && (\n                            <s-grid\n                                gap=\"small\"\n                                gridTemplateColumns=\"1fr 1fr\"\n                            >\n                                {details.map((item, i) => (\n                                    <s-box\n                                        key={i}\n                                        padding=\"base\"\n                                        background=\"strong\"\n                                        borderRadius=\"base\"\n                                    >\n                                        <s-stack gap=\"small-100\">\n                                            <s-text variant=\"bodySm\" tone=\"subdued\">\n                                                {item.label.toLocaleUpperCase()}\n                                            </s-text>\n\n                                            <s-text variant=\"bodyMd\" fontWeight=\"medium\">\n                                                {item.value}\n                                            </s-text>\n                                        </s-stack>\n                                    </s-box>\n                                ))}\n                            </s-grid>\n                        )}\n\n                        {/* Footer */}\n                        {(meta || action) && (\n                            <>\n                                <s-divider />\n\n                                <s-stack\n                                    direction=\"inline\"\n                                    justifyContent=\"space-between\"\n                                    alignItems=\"center\"\n                                >\n                                    <s-text variant=\"bodySm\" tone=\"subdued\">\n                                        {meta}\n                                    </s-text>\n\n                                    {action && (\n                                        <s-button variant=\"secondary\" onClick={onAction}>\n                                            {action}\n                                        </s-button>\n                                    )}\n                                </s-stack>\n                            </>\n                        )}\n\n                    </s-stack>\n                </s-box>\n            </s-card>\n        </s-section>\n    );\n}","import React, { createContext, useContext, useState, ReactNode } from \"react\";\r\n\r\n// --- Context ---\r\ninterface TabsContextProps {\r\n  activeTab: string;\r\n  setActiveTab: (value: string) => void;\r\n}\r\n\r\nconst TabsContext = createContext<TabsContextProps | undefined>(undefined);\r\n\r\nconst useTabs = () => {\r\n  const context = useContext(TabsContext);\r\n  if (!context) {\r\n    throw new Error(\"Tabs sub-components must be used within a Tabs component\");\r\n  }\r\n  return context;\r\n};\r\n\r\n// --- Main Tabs Component ---\r\nexport interface TabsProps {\r\n  defaultValue?: string;\r\n  value?: string;\r\n  onValueChange?: (value: string) => void;\r\n  children: ReactNode;\r\n  className?: string; \r\n}\r\n\r\nexport function Tabs({ defaultValue, value, onValueChange, children }: TabsProps) {\r\n  const [internalActiveTab, setInternalActiveTab] = useState(defaultValue || \"\");\r\n\r\n  const activeTab = value !== undefined ? value : internalActiveTab;\r\n  const setActiveTab = (newValue: string) => {\r\n    if (value === undefined) {\r\n      setInternalActiveTab(newValue);\r\n    }\r\n    onValueChange?.(newValue);\r\n  };\r\n\r\n  return (\r\n    <TabsContext.Provider value={{ activeTab, setActiveTab }}>\r\n      <div style={{ width: \"100%\" }}>\r\n        {children}\r\n      </div>\r\n    </TabsContext.Provider>\r\n  );\r\n}\r\n\r\nexport interface TabsListProps {\r\n  children: ReactNode;\r\n  gap?: string;\r\n}\r\n\r\nexport function TabsList({ children, gap = \"small\" }: TabsListProps) {\r\n  return (\r\n    <s-box paddingInline=\"base\" paddingBlock=\"small\">\r\n      <div style={{ \r\n        overflowX: \"auto\", \r\n        scrollbarWidth: \"none\", \r\n        msOverflowStyle: \"none\", \r\n      }}>\r\n        <style dangerouslySetInnerHTML={{ __html: `\r\n          ::-webkit-scrollbar { display: none; }\r\n        ` }} />\r\n        <s-stack direction=\"inline\" gap={gap} alignItems=\"center\">\r\n          {children}\r\n        </s-stack>\r\n      </div>\r\n    </s-box>\r\n  );\r\n}\r\n\r\n// --- Trigger Component ---\r\nexport interface TabsTriggerProps {\r\n  value: string;\r\n  children: ReactNode;\r\n  disabled?: boolean;\r\n}\r\n\r\nexport function TabsTrigger({ value, children, disabled }: TabsTriggerProps) {\r\n  const { activeTab, setActiveTab } = useTabs();\r\n  const isActive = activeTab === value;\r\n\r\n  return (\r\n    <s-box>\r\n     <s-clickable\r\n      paddingInline=\"small\"\r\n      maxInlineWidth=\"100px\"\r\n      paddingBlock=\"small-100\"  \r\n      borderRadius=\"large-100\"\r\n      background={isActive ? \"strong\" : \"transparent\"}\r\n      onClick={() => !disabled && setActiveTab(value)}\r\n      style={{\r\n        cursor: disabled ? \"not-allowed\" : \"pointer\",\r\n        opacity: disabled ? 0.5 : 1,\r\n        transition: \"background 0.2s ease, transform 0.1s ease\",\r\n        userSelect: \"none\",\r\n      }}\r\n    >\r\n      <s-text\r\n        type={isActive ? \"strong\" : \"generic\"}\r\n        tone={isActive ? \"neutral\" : \"auto\"}\r\n      >\r\n        {children}\r\n      </s-text>\r\n    </s-clickable>\r\n    </s-box>\r\n  );\r\n}\r\n\r\n// --- Content Component ---\r\nexport interface TabsContentProps {\r\n  value: string;\r\n  children: ReactNode;\r\n}\r\n\r\nexport function TabsContent({ value, children }: TabsContentProps) {\r\n  const { activeTab } = useTabs();\r\n\r\n  if (activeTab !== value) return null;\r\n\r\n  return (\r\n    <s-box padding=\"base\">\r\n      {children}\r\n    </s-box>\r\n  );\r\n}","import React from 'react';\nimport { OnboardingProvider, useOnboarding } from './hooks/useOnboarding';\nimport { OnboardingStep, OnboardingData, OnboardingStepProps } from './types';\nimport { SetupSummary } from './components/SetupSummary';\n\nexport type { OnboardingStep, OnboardingData };\n\nimport './Onboarding.css';\n\nconst OnboardingInner: React.FC<{ steps: OnboardingStep[] }> = ({ steps }) => {\n\n  const {\n    currentStepIndex,\n    totalSteps,\n    data,\n    updateData,\n    nextStep,\n    prevStep,\n    isFirstStep,\n    isLastStep,\n    canProceed,\n  } = useOnboarding();\n\n  const currentStep = steps[currentStepIndex];\n  if (!currentStep) return null;\n  \n  const StepComponent = currentStep.component;\n  const progress = Math.round(((currentStepIndex + 1) / totalSteps) * 100);\n\n  return (\n    <s-page>\n      <s-stack gap=\"large\">\n\n        {/* Header Section */}\n        <s-stack gap=\"tight\">\n          <s-text type=\"strong\">\n            <div style={{ fontSize: \"24px\", fontWeight: \"bold\", marginTop: \"30px\" }}>\n              Installation Setup\n            </div>\n          </s-text>\n          <div className=\"setup-info-text-wrapper\">\n            <s-text color=\"subdued\" type=\"strong\">\n              Complete all the steps to set up your Live Gold Rate Updater account.\n            </s-text>\n          </div>\n        </s-stack>\n\n        <div style={{ display: \"flex\", justifyContent: \"center\", width: \"100%\", padding: \"0 0 16px\" }}>\n          <div \n            className=\"grid-container\"\n            style={{ \n              maxWidth: \"1000px\", \n              width: \"100%\", \n              display: \"grid\", \n              gridTemplateColumns: \"1fr 0.6fr\", \n              gap: \"24px\",\n              alignItems: \"stretch\" \n            }}\n          >\n            {/* Left Card: Main Content */}\n            <div className=\"wel-left-card\" style={{ display: \"flex\", flexDirection: \"column\", gap: \"20px\" }}>\n              <div style={{ flex: 1 }}>\n                \n                {/* Banner Section */}\n                {currentStep.infoMessage && (\n                  <div style={{ marginBottom: '15px' }}>\n                    <s-section>\n                      <s-banner tone=\"info\" heading=\"Welcome to Installation Setup!\">\n                        <s-text>{currentStep.infoMessage}</s-text>\n                      </s-banner>\n                    </s-section>\n                  </div>\n                )}\n\n                <s-section>\n                  <div \n                    className=\"left-card-content\"\n                    style={{ \n                      minHeight: \"450px\", \n                      display: \"flex\", \n                      flexDirection: \"column\", \n                      justifyContent: \"space-between\", \n                      padding: \"20px\" \n                    }}\n                  >\n                    <div style={{ flex: 1 }}>\n                      <s-stack gap=\"base\">\n                        <s-stack direction=\"inline\" justifyContent=\"space-between\" alignItems=\"center\">\n                          <s-text color=\"subdued\" type=\"strong\">\n                            Step {currentStepIndex + 1} of {totalSteps}\n                          </s-text>\n                          <s-badge tone=\"info\" size=\"base\">{`${progress}%`}</s-badge>\n                        </s-stack>\n\n                        {/* Progress Bar */}\n                        <div style={{ \n                          width: '100%', \n                          height: '8px', \n                          backgroundColor: '#e5e5e5', \n                          borderRadius: '4px', \n                          overflow: 'hidden' \n                        }}>\n                          <div style={{ \n                            width: `${progress}%`, \n                            height: '100%', \n                            backgroundColor: '#008060', \n                            transition: 'width 0.5s ease' \n                          }} />\n                        </div>\n\n                        {/* Step Title + Content */}\n                        <s-stack gap=\"large\">\n                          <s-stack gap=\"none\">\n                            <s-text font-weight=\"bold\" type=\"strong\">\n                              <div style={{ fontWeight: \"bold\", fontSize: \"18px\" }}>\n                                {currentStep.title}\n                              </div>\n                            </s-text>\n                            {currentStep.subtitle && (\n                              <s-text color=\"subdued\" type=\"strong\">\n                                {currentStep.subtitle}\n                              </s-text>\n                            )}\n                          </s-stack>\n                          <div className=\"onboarding-step-component-mount\">\n                            {StepComponent ? (\n                              <StepComponent data={data} updateData={updateData} />\n                            ) : (\n                                currentStep.children\n                            )}\n                          </div>\n                        </s-stack>\n                      </s-stack>\n                    </div>\n\n                    <div style={{ flexShrink: 0, paddingTop: \"24px\" }}>\n                      <s-divider />\n                      <s-stack direction=\"inline\" justifyContent=\"space-between\" style={{ paddingTop: \"16px\" }}>\n                        <s-button onClick={prevStep} disabled={isFirstStep}>\n                          Back\n                        </s-button>\n                        <s-button \n                          variant=\"primary\" \n                          onClick={nextStep} \n                          disabled={!canProceed}\n                        >\n                          {isLastStep ? 'Finish' : 'Next'}\n                        </s-button>\n                      </s-stack>\n                    </div>\n                  </div>\n                </s-section>\n              </div>\n            </div>\n\n            {/* Right Card: Sidebar Slideshow */}\n            {currentStep.sidebar && (\n              <div className=\"slideshow-container\" style={{ display: \"flex\", flexDirection: \"column\" }}>\n                <s-section>\n                  <div \n                    className=\"slideshow-inner\"\n                    style={{ \n                      minHeight: \"450px\", \n                      display: \"flex\", \n                      flexDirection: \"column\", \n                      justifyContent: \"center\", \n                      padding: \"20px 0\",\n                      textAlign: \"center\"\n                    }}\n                  >\n                    <s-stack alignItems=\"center\" justifyContent=\"center\" gap=\"large\">\n                      \n                      {/* Icon */}\n                      <div style={{ display: \"flex\", alignItems: \"center\", justifyContent: \"center\" }}>\n                        {currentStep.sidebar.icon ? (\n                          <div style={{ fontSize: \"60px\" }}>{currentStep.sidebar.icon}</div>\n                        ) : (\n                          <div style={{ fontSize: \"60px\" }}>🔔</div>\n                        )}\n                      </div>\n\n                      {/* Info */}\n                      <s-stack gap=\"tight\" align=\"center\">\n                        <s-text font-weight=\"bold\" type=\"strong\">\n                          <div style={{ fontSize: \"18px\", fontWeight: \"bold\" }}>\n                            {currentStep.sidebar.title}\n                          </div>\n                        </s-text>\n                        <s-text color=\"subdued\">\n                          <div style={{ maxWidth: \"300px\", margin: \"0 auto\" }}>\n                            {currentStep.sidebar.description}\n                          </div>\n                        </s-text>\n                      </s-stack>\n\n                      <s-divider />\n\n                      {/* Features */}\n                      {currentStep.sidebar.features && (\n                        <s-stack gap=\"base\" align=\"start\" style={{ textAlign: \"left\", width: \"100%\", paddingLeft: \"32px\" }}>\n                          {currentStep.sidebar.features.map((feature, index) => (\n                            <s-stack gap=\"small\" direction=\"inline\" key={index} alignItems=\"start\">\n                              <s-text tone=\"success\" fontWeight=\"bold\">✓</s-text>\n                              <s-text variant=\"bodyMd\">{feature}</s-text>\n                            </s-stack>\n                          ))}\n                        </s-stack>\n                      )}\n\n                      <s-divider />\n\n                      {/* Pagination Bullets */}\n                      <s-stack direction=\"inline\" justifyContent=\"center\" alignItems=\"center\" gap=\"base\">\n                        {steps.map((_, index) => (\n                          <div\n                            key={index}\n                            style={{\n                              width: currentStepIndex === index ? \"28px\" : \"8px\",\n                              height: \"7px\",\n                              borderRadius: \"4px\",\n                              background: currentStepIndex === index ? \"#f49342\" : \"#e1e3e5\",\n                              transition: \"all 0.3s ease\",\n                            }}\n                          />\n                        ))}\n                      </s-stack>\n\n                    </s-stack>\n                  </div>\n                </s-section>\n              </div>\n            )}\n          </div>\n        </div>\n      </s-stack>\n    </s-page>\n  );\n};\n\nexport interface OnboardingProps {\n  steps?: OnboardingStep[];\n  children?: React.ReactNode;\n  onFinish: (data: OnboardingData) => void;\n}\n\nconst Step: React.FC<OnboardingStepProps> = ({ children }) => <>{children}</>;\n\nexport const Onboarding: React.FC<OnboardingProps> & {\n    Step: typeof Step;\n    Summary: typeof SetupSummary;\n} = ({ steps: stepsProp, children, onFinish }) => {\n  \n  const steps = React.useMemo(() => {\n    if (stepsProp) return stepsProp;\n    \n    // Discover steps from children\n    const discoveredSteps: OnboardingStep[] = [];\n    React.Children.forEach(children, (child) => {\n      if (React.isValidElement(child) && child.type === Step) {\n        const props = child.props as any;\n        discoveredSteps.push({\n          ...props,\n          children: props.children,\n        });\n      } else if (React.isValidElement(child) && child.type === SetupSummary) {\n        const props = child.props as any;\n        discoveredSteps.push({\n            id: 'summary',\n            title: 'Review & Finish Setup',\n            ...props,\n            component: SetupSummary,\n        });\n      }\n    });\n    return discoveredSteps;\n  }, [stepsProp, children]);\n\n  return (\n    <OnboardingProvider steps={steps} onFinish={onFinish}>\n      <OnboardingInner steps={steps} />\n    </OnboardingProvider>\n  );\n};\n\nOnboarding.Step = Step;\nOnboarding.Summary = SetupSummary;","import React, { createContext, useContext, useState, useCallback, useMemo } from 'react';\nimport { OnboardingContextType, OnboardingData, OnboardingStep } from '../types';\n\nconst OnboardingContext = createContext<OnboardingContextType | undefined>(undefined);\n\nexport const OnboardingProvider: React.FC<{\n  steps: OnboardingStep[];\n  children: React.ReactNode;\n  onFinish: (data: OnboardingData) => void;\n}> = ({ steps, children, onFinish }) => {\n  const [currentStepIndex, setCurrentStepIndex] = useState(0);\n  const [data, setData] = useState<OnboardingData>({});\n\n  const updateData = useCallback((newData: Partial<OnboardingData>) => {\n    setData((prev) => ({ ...prev, ...newData }));\n  }, []);\n\n  const nextStep = useCallback(() => {\n    if (currentStepIndex < steps.length - 1) {\n      setCurrentStepIndex((prev) => prev + 1);\n    } else {\n      onFinish(data);\n    }\n  }, [currentStepIndex, steps.length, data, onFinish]);\n\n  const prevStep = useCallback(() => {\n    if (currentStepIndex > 0) {\n      setCurrentStepIndex((prev) => prev - 1);\n    }\n  }, [currentStepIndex]);\n\n  const currentStep = steps[currentStepIndex];\n  const canProceed = useMemo(() => {\n    if (!currentStep) return false;\n    return currentStep.validate ? currentStep.validate(data) : true;\n  }, [currentStep, data]);\n\n  const value = useMemo(\n    () => ({\n      currentStepIndex,\n      totalSteps: steps.length,\n      data,\n      updateData,\n      nextStep,\n      prevStep,\n      isFirstStep: currentStepIndex === 0,\n      isLastStep: currentStepIndex === steps.length - 1,\n      canProceed,\n    }),\n    [currentStepIndex, steps.length, data, updateData, nextStep, prevStep, canProceed]\n  );\n\n  return <OnboardingContext.Provider value={value}>{children}</OnboardingContext.Provider>;\n};\n\nexport const useOnboarding = () => {\n  const context = useContext(OnboardingContext);\n  if (!context) {\n    throw new Error('useOnboarding must be used within an OnboardingProvider');\n  }\n  return context;\n};\n","import React from 'react';\nimport { OnboardingData } from '../types';\nimport { useOnboarding } from '../hooks/useOnboarding';\n\ninterface SetupSummaryProps {\n  data?: OnboardingData;\n  updateData?: (newData: Partial<OnboardingData>) => void;\n}\n\nexport const SetupSummary: React.FC<SetupSummaryProps> = (props) => {\n  const context = useOnboarding();\n  const data = props.data || context.data;\n  const entries = Object.entries(data);\n\n  return (\n    <div className=\"setup-summary\">\n      <div style={{ marginBottom: '24px' }}>\n        <span className=\"glass-pill\" style={{ background: '#e1f5fe', color: '#0277bd', padding: '4px 12px' }}>\n          Overview\n        </span>\n      </div>\n      \n      <div style={{ display: 'grid', gap: '16px' }}>\n        {entries.map(([key, value]) => (\n          <div key={key} style={{ \n            display: 'flex', \n            justifyContent: 'space-between', \n            padding: '12px 0', \n            borderBottom: '1px solid #f1f2f4' \n          }}>\n            <span style={{ fontWeight: 600, color: '#6d7175', textTransform: 'capitalize' }}>\n              {key.replace(/([A-Z])/g, ' $1').trim()}:\n            </span>\n            <span style={{ fontWeight: 500, color: '#1a1c1d' }}>\n              {typeof value === 'boolean' ? (value ? 'Yes' : 'No') : String(value || '--')}\n            </span>\n          </div>\n        ))}\n        {entries.length === 0 && (\n          <p style={{ color: '#6d7175', fontStyle: 'italic' }}>No configuration data provided.</p>\n        )}\n      </div>\n\n      <div style={{ marginTop: '32px', padding: '16px', borderRadius: '8px', background: '#f9fafb', border: '1px dashed #d1d3d5' }}>\n        <p style={{ fontSize: '13px', color: '#6d7175', margin: 0 }}>\n          Please review your information and click \"Finish Setup\" to activate account.\n        </p>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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","names":["jsx","jsx","jsxs","jsx","jsxs","React","createContext","useContext","useState","jsx","jsx","jsxs","Fragment","jsx","jsxs","React"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "polaris-plus-ui",
-  "version": "0.0.2",
+  "version": "0.1.0",
   "description": "React wrappers for Shopify Polaris Web Components",
   "keywords": [
     "shopify",