@stack-spot/portal-layout 0.0.62 → 0.0.63

package/dist/components/tour/StepContainer.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { theme } from '@stack-spot/portal-theme';
+import styled from 'styled-components';
+import { StepNavigation } from './StepNavigation.js';
+import { StepTitle } from './StepTitle.js';
+import { useTour } from './context.js';
+export const StepContainer = ({ title, stepKey, customNavigation, position, children }) => {
+    const { finishStep } = useTour();
+    return _jsxs(BoxWithPointingArrow, { "$position": position, children: [_jsx(StepTitle, { title: title, onClose: () => finishStep(stepKey) }), children, _jsx(StepNavigation, { stepKey: stepKey, ...(customNavigation || {}) })] });
+};
+const BoxWithPointingArrow = styled.div `
+  position: relative;
+  width: 100%;
+  background-color: ${theme.color.inverse[500]};
+  &::after {
+    content: '';
+    position: absolute;
+    border-width: 10px;
+    border-style: solid;
+    border-color: transparent;
+    margin-top: -5px;
+    border-right-color: ${theme.color.inverse[500]};
+    ${({ $position, $top }) => $position === 'right' ?
+    `
+      top: ${$top || '16px'};
+      left: -18px;
+    ` : ''}
+    ${({ $position, $right }) => $position === 'top' ?
+    `
+    bottom: 96%;
+    right: ${$right || '16px'};
+    transform: rotate(90deg);
+    ` : ''}
+    ${({ $position, $top }) => $position === 'left' ?
+    `
+      top: ${$top || '16px'};
+      right: -18px;
+      transform: rotate(180deg);
+    ` : ''}
+    ${({ $position, $right }) => $position === 'bottom' ?
+    `
+    top: -13px;
+    right: ${$right || '16px'};
+    transform: rotate(90deg);
+    ` : ''}
+  }
+`;
+//# sourceMappingURL=StepContainer.js.map

package/dist/components/tour/StepContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepContainer.js","sourceRoot":"","sources":["../../../src/components/tour/StepContainer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAEhD,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAmB,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AAUnC,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,gBAAgB,EAAE,QAAQ,EAAE,QAAQ,EAAsB,EAAE,EAAE;IAC5G,MAAM,EAAE,UAAU,EAAE,GAAG,OAAO,EAAE,CAAA;IAChC,OAAO,MAAC,oBAAoB,iBAAY,QAAQ,aAC9C,KAAC,SAAS,IAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,OAAO,CAAC,GAAI,EAC9D,QAAQ,EACT,KAAC,cAAc,IAAC,OAAO,EAAE,OAAO,KAAM,CAAC,gBAAgB,IAAI,EAAE,CAAC,GAAI,IAC7C,CAAA;AACzB,CAAC,CAAA;AAID,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAInC;;;sBAGkB,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;;;;;;;;0BAQpB,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;MAC5C,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,SAAS,KAAK,OAAO,CAAC,CAAC;IAClD;aACS,IAAI,IAAI,MAAM;;KAEtB,CAAC,CAAC,CAAC,EAAE;MACJ,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,SAAS,KAAK,KAAK,CAAC,CAAC;IAClD;;aAES,MAAM,IAAI,MAAM;;KAExB,CAAC,CAAC,CAAC,EAAE;MACJ,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,SAAS,KAAK,MAAM,CAAC,CAAC;IACjD;aACS,IAAI,IAAI,MAAM;;;KAGtB,CAAC,CAAC,CAAC,EAAE;MACJ,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,SAAS,KAAK,QAAQ,CAAC,CAAC;IACrD;;aAES,MAAM,IAAI,MAAM;;KAExB,CAAC,CAAC,CAAC,EAAE;;CAET,CAAA"}

package/dist/components/tour/StepNavigation.d.ts

@@ -0,0 +1,13 @@
+import '@stack-spot/portal-theme/dist/theme.css';
+type CustomNavigationButton = {
+    text: string;
+    onClick?: () => void;
+};
+export type NavigationProps = {
+    stepKey: string;
+    nextButton?: CustomNavigationButton;
+    prevButton?: CustomNavigationButton;
+};
+export declare const StepNavigation: ({ stepKey, nextButton, prevButton }: NavigationProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=StepNavigation.d.ts.map

package/dist/components/tour/StepNavigation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepNavigation.d.ts","sourceRoot":"","sources":["../../../src/components/tour/StepNavigation.tsx"],"names":[],"mappings":"AACA,OAAO,yCAAyC,CAAA;AAKhD,KAAK,sBAAsB,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CAAE,CAAA;AACpE,MAAM,MAAM,eAAe,GAAG;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,sBAAsB,CAAC;IAAC,UAAU,CAAC,EAAE,sBAAsB,CAAA;CAAE,CAAA;AAE3H,eAAO,MAAM,cAAc,wCAAyC,eAAe,4CAsBlF,CAAA"}

package/dist/components/tour/StepNavigation.js

@@ -0,0 +1,20 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Button, Flex, Text } from '@citric/core';
+import '@stack-spot/portal-theme/dist/theme.css';
+import { useTranslate } from '@stack-spot/portal-translate';
+import { useTour } from './context.js';
+import { finishTourStep } from './utils.js';
+export const StepNavigation = ({ stepKey, nextButton, prevButton }) => {
+    const { currentStep, steps, nextStep, prevStep } = useTour();
+    const t = useTranslate({ en: { of: 'of', back: 'back' }, pt: { of: 'de', back: 'voltar' } });
+    return _jsxs(Flex, { w: 12, px: 5, py: 2, mt: "-1px", bg: "inverse.500", justifyContent: "space-between", children: [_jsxs(Text, { appearance: "microtext1", colorScheme: "inverse.contrastText", children: [currentStep + 1, " ", t.of, " ", steps.length] }), _jsxs(Flex, { sx: { gap: '8px' }, children: [currentStep >= 1 &&
+                        _jsx(Button, { sx: { paddingInline: '20px' }, onClick: () => {
+                                prevStep?.();
+                                prevButton?.onClick?.();
+                            }, size: "sm", colorScheme: "light", children: prevButton?.text || t.back }), _jsx(Button, { sx: { paddingInline: '20px' }, onClick: () => {
+                            nextButton?.onClick?.();
+                            nextStep?.();
+                            finishTourStep(stepKey);
+                        }, size: "sm", colorScheme: "light", children: nextButton?.text || 'ok' })] })] });
+};
+//# sourceMappingURL=StepNavigation.js.map

package/dist/components/tour/StepNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepNavigation.js","sourceRoot":"","sources":["../../../src/components/tour/StepNavigation.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AACjD,OAAO,yCAAyC,CAAA;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AAC3D,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAKxC,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,UAAU,EAAmB,EAAE,EAAE;IACrF,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,OAAO,EAAE,CAAA;IAC5D,MAAM,CAAC,GAAG,YAAY,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,CAAC,CAAA;IAC5F,OAAO,MAAC,IAAI,IAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAC,MAAM,EAAC,EAAE,EAAC,aAAa,EAAC,cAAc,EAAC,eAAe,aACzF,MAAC,IAAI,IAAC,UAAU,EAAC,YAAY,EAAC,WAAW,EAAC,sBAAsB,aAAE,WAAW,GAAG,CAAC,OAAG,CAAC,CAAC,EAAE,OAAG,KAAK,CAAC,MAAM,IAAQ,EAC/G,MAAC,IAAI,IAAC,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,aACrB,WAAW,IAAI,CAAC;wBACf,KAAC,MAAM,IAAC,EAAE,EAAE,EAAE,aAAa,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE;gCACnD,QAAQ,EAAE,EAAE,CAAA;gCACZ,UAAU,EAAE,OAAO,EAAE,EAAE,CAAA;4BACzB,CAAC,EAAE,IAAI,EAAC,IAAI,EAAC,WAAW,EAAC,OAAO,YAC7B,UAAU,EAAE,IAAI,IAAI,CAAC,CAAC,IAAI,GACpB,EACX,KAAC,MAAM,IAAC,EAAE,EAAE,EAAE,aAAa,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE;4BACnD,UAAU,EAAE,OAAO,EAAE,EAAE,CAAA;4BACvB,QAAQ,EAAE,EAAE,CAAA;4BACZ,cAAc,CAAC,OAAO,CAAC,CAAA;wBACzB,CAAC,EAAE,IAAI,EAAC,IAAI,EAAC,WAAW,EAAC,OAAO,YAC7B,UAAU,EAAE,IAAI,IAAI,IAAI,GAClB,IACJ,IACF,CAAA;AACT,CAAC,CAAA"}

package/dist/components/tour/StepTitle.d.ts

@@ -0,0 +1,7 @@
+type StepTitleProps = {
+    title: string;
+    onClose?: () => void;
+};
+export declare const StepTitle: ({ title, onClose }: StepTitleProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=StepTitle.d.ts.map

package/dist/components/tour/StepTitle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepTitle.d.ts","sourceRoot":"","sources":["../../../src/components/tour/StepTitle.tsx"],"names":[],"mappings":"AAGA,KAAK,cAAc,GAAG;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAA;AAED,eAAO,MAAM,SAAS,uBAAwB,cAAc,4CAQnD,CAAA"}

package/dist/components/tour/StepTitle.js

@@ -0,0 +1,5 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Button, Flex, IconBox, Text } from '@citric/core';
+import { TimesMini } from '@citric/icons';
+export const StepTitle = ({ title, onClose }) => _jsxs(Flex, { w: 12, pl: 5, py: 3, flexWrap: "nowrap", justifyContent: "space-between", alignItems: "center", children: [_jsxs(Text, { appearance: "body2", colorScheme: "inverse.contrastText", weight: "medium", children: [" ", title, " "] }), _jsx(Button, { appearance: "text", size: "sm", onClick: () => onClose?.(), sx: { ':hover': { borderColor: 'transparent !important' } }, children: _jsx(IconBox, { size: "xs", colorIcon: "inverse.contrastText", children: _jsx(TimesMini, {}) }) })] });
+//# sourceMappingURL=StepTitle.js.map

package/dist/components/tour/StepTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepTitle.js","sourceRoot":"","sources":["../../../src/components/tour/StepTitle.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAC1D,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AAOzC,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EAAE,KAAK,EAAE,OAAO,EAAkB,EAAE,EAAE,CAC9D,MAAC,IAAI,IAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,QAAQ,EAAC,QAAQ,EAAC,cAAc,EAAC,eAAe,EAAC,UAAU,EAAC,QAAQ,aAC7F,MAAC,IAAI,IAAC,UAAU,EAAC,OAAO,EAAC,WAAW,EAAC,sBAAsB,EAAC,MAAM,EAAC,QAAQ,kBAAG,KAAK,SAAS,EAC5F,KAAC,MAAM,IAAC,UAAU,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,WAAW,EAAE,wBAAwB,EAAE,EAAE,YACzH,KAAC,OAAO,IAAC,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,sBAAsB,YACjD,KAAC,SAAS,KAAG,GACL,GACH,IACJ,CAAA"}

package/dist/components/tour/config.d.ts

@@ -1,3 +1,3 @@
-import { ProviderProps } from '@reactour/tour';
-export declare const defaultTourConfig: () => Omit<ProviderProps, 'children'>;
+import { ReactourProps } from 'reactour';
+export declare const defaultTourConfig: () => Omit<ReactourProps, 'children'>;
 //# sourceMappingURL=config.d.ts.map

package/dist/components/tour/config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../../src/components/tour/config.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAA;AAI9C,eAAO,MAAM,iBAAiB,EAAE,MAAM,IAAI,CAAC,aAAa,EAAE,UAAU,CAkBlE,CAAA"}
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../../src/components/tour/config.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAExC,eAAO,MAAM,iBAAiB,EAAE,MAAM,IAAI,CAAC,aAAa,EAAE,UAAU,CAWlE,CAAA"}

package/dist/components/tour/config.js

@@ -1,22 +1,13 @@
-import { CustomNavigation } from './Navigation.js';
-import { hasFinishedTour } from './utils.js';
 export const defaultTourConfig = () => ({
     steps: [],
-    defaultOpen: !hasFinishedTour(),
+    isOpen: true,
+    onRequestClose: console.log,
     showBadge: false,
     showDots: false,
     showPrevNextButtons: false,
     showCloseButton: false,
-    styles: {
-        popover: (props) => ({
-            ...props,
-            boxShadow: 'unset',
-            backgroundColor: 'transparent',
-            padding: '0px 14px', // TODO: find a way to make paddings on y axis so it's possible to use the the pointing arrow.
-        }),
-    },
-    components: {
-        Navigation: CustomNavigation,
-    },
+    showNavigation: false,
+    showButtons: false,
+    showNumber: false,
 });
 //# sourceMappingURL=config.js.map

package/dist/components/tour/config.js.map

@@ -1 +1 @@
-{"version":3,"file":"config.js","sourceRoot":"","sources":["../../../src/components/tour/config.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAA;AAC/C,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAEzC,MAAM,CAAC,MAAM,iBAAiB,GAA0C,GAAG,EAAE,CAAC,CAAC;IAC7E,KAAK,EAAE,EAAE;IACT,WAAW,EAAE,CAAC,eAAe,EAAE;IAC/B,SAAS,EAAE,KAAK;IAChB,QAAQ,EAAE,KAAK;IACf,mBAAmB,EAAE,KAAK;IAC1B,eAAe,EAAE,KAAK;IACtB,MAAM,EAAE;QACN,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;YACnB,GAAG,KAAK;YACR,SAAS,EAAE,OAAO;YAClB,eAAe,EAAE,aAAa;YAC9B,OAAO,EAAE,UAAU,EAAE,8FAA8F;SACpH,CAAC;KACH;IACD,UAAU,EAAE;QACV,UAAU,EAAE,gBAAgB;KAC7B;CACF,CAAC,CAAA"}
+{"version":3,"file":"config.js","sourceRoot":"","sources":["../../../src/components/tour/config.tsx"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,iBAAiB,GAA0C,GAAG,EAAE,CAAC,CAAC;IAC7E,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,IAAI;IACZ,cAAc,EAAE,OAAO,CAAC,GAAG;IAC3B,SAAS,EAAE,KAAK;IAChB,QAAQ,EAAE,KAAK;IACf,mBAAmB,EAAE,KAAK;IAC1B,eAAe,EAAE,KAAK;IACtB,cAAc,EAAE,KAAK;IACrB,WAAW,EAAE,KAAK;IAClB,UAAU,EAAE,KAAK;CAClB,CAAC,CAAA"}

package/dist/components/tour/context.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import { ReactourProps } from 'reactour';
+type TourConfig = Omit<ReactourProps, 'children'>;
+export declare const defaultTourConfig: TourConfig;
+export declare const TourProvider: ({ config, children }: {
+    config: TourConfig;
+    children: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const useTour: () => {
+    currentStep: number;
+    nextStep: (() => void) | undefined;
+    prevStep: (() => void) | undefined;
+    steps: import("reactour").ReactourStep[];
+    finishStep: (stepKey: string) => void;
+};
+export {};
+//# sourceMappingURL=context.d.ts.map

package/dist/components/tour/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/components/tour/context.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAuC,MAAM,OAAO,CAAA;AACtE,OAAa,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAG9C,KAAK,UAAU,GAAG,IAAI,CAAC,aAAa,EAAE,UAAU,CAAC,CAAA;AAEjD,eAAO,MAAM,iBAAiB,EAAE,UAU9B,CAAA;AAOF,eAAO,MAAM,YAAY;YAAoC,UAAU;cAAY,SAAS;6CAkB3F,CAAA;AAED,eAAO,MAAM,OAAO;;;;;0BAOM,MAAM;CAK/B,CAAA"}

package/dist/components/tour/context.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useState } from 'react';
+import Tour from 'reactour';
+import { finishTourStep } from './utils.js';
+export const defaultTourConfig = Object.freeze({
+    steps: [],
+    isOpen: true,
+    onRequestClose: () => '',
+    showButtons: false,
+    showNavigation: false,
+    showNavigationNumber: false,
+    showNumber: false,
+    showCloseButton: false,
+    disableFocusLock: true,
+});
+const TourContext = createContext({
+    tourConfig: defaultTourConfig,
+    currentStep: 0,
+});
+export const TourProvider = ({ config, children }) => {
+    const [currentStep, setCurrentStep] = useState(0);
+    const tourConfig = {
+        ...config,
+        goToStep: currentStep,
+        update: `${currentStep}`,
+        nextStep: () => setCurrentStep(currentStep + 1),
+        prevStep: () => setCurrentStep(currentStep - 1),
+        isOpen: !!config.steps.length && (currentStep < config.steps.length),
+    };
+    return _jsxs(TourContext.Provider, { value: {
+            currentStep,
+            tourConfig,
+        }, children: [_jsx(Tour, { ...tourConfig }), children] });
+};
+export const useTour = () => {
+    const { currentStep, tourConfig: { nextStep, prevStep, steps } } = useContext(TourContext);
+    return {
+        currentStep,
+        nextStep,
+        prevStep,
+        steps,
+        finishStep: (stepKey) => {
+            finishTourStep(stepKey);
+            nextStep?.();
+        },
+    };
+};
+//# sourceMappingURL=context.js.map

package/dist/components/tour/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sourceRoot":"","sources":["../../../src/components/tour/context.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAa,aAAa,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACtE,OAAO,IAAuB,MAAM,UAAU,CAAA;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAIxC,MAAM,CAAC,MAAM,iBAAiB,GAAe,MAAM,CAAC,MAAM,CAAC;IACzD,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,IAAI;IACZ,cAAc,EAAE,GAAG,EAAE,CAAC,EAAE;IACxB,WAAW,EAAE,KAAK;IAClB,cAAc,EAAE,KAAK;IACrB,oBAAoB,EAAE,KAAK;IAC3B,UAAU,EAAE,KAAK;IACjB,eAAe,EAAE,KAAK;IACtB,gBAAgB,EAAE,IAAI;CACvB,CAAC,CAAA;AAEF,MAAM,WAAW,GAAG,aAAa,CAAkD;IACjF,UAAU,EAAE,iBAAiB;IAC7B,WAAW,EAAE,CAAC;CACf,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAAE,MAAM,EAAE,QAAQ,EAA+C,EAAE,EAAE;IAChG,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAS,CAAC,CAAC,CAAA;IACzD,MAAM,UAAU,GAAe;QAC7B,GAAG,MAAM;QACT,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,GAAG,WAAW,EAAE;QACxB,QAAQ,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,WAAW,GAAG,CAAC,CAAC;QAC/C,QAAQ,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,WAAW,GAAG,CAAC,CAAC;QAC/C,MAAM,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC;KACrE,CAAA;IAED,OAAO,MAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE;YAClC,WAAW;YACX,UAAU;SACX,aACC,KAAC,IAAI,OAAK,UAAU,GAAI,EACvB,QAAQ,IACY,CAAA;AACzB,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,GAAG,EAAE;IAC1B,MAAM,EAAE,WAAW,EAAE,UAAU,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAA;IAC1F,OAAO;QACL,WAAW;QACX,QAAQ;QACR,QAAQ;QACR,KAAK;QACL,UAAU,EAAE,CAAC,OAAe,EAAE,EAAE;YAC9B,cAAc,CAAC,OAAO,CAAC,CAAA;YACvB,QAAQ,EAAE,EAAE,CAAA;QACd,CAAC;KACF,CAAA;AACH,CAAC,CAAA"}

package/dist/components/tour/index.d.ts

@@ -0,0 +1,4 @@
+export { StepContainer } from './StepContainer.js';
+export { useTour } from './context.js';
+export { tourStepBuilder } from './utils.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/tour/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/tour/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA"}

package/dist/components/tour/index.js

@@ -0,0 +1,4 @@
+export { StepContainer } from './StepContainer.js';
+export { useTour } from './context.js';
+export { tourStepBuilder } from './utils.js';
+//# sourceMappingURL=index.js.map

package/dist/components/tour/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/tour/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA"}

package/dist/components/tour/steps/PortalSwitcherStep.d.ts

@@ -1,3 +1,2 @@
-import { StepType } from '@reactour/tour';
-export declare const portalSwitcherStep: StepType;
+export declare const usePortalSwitcherStep: () => import("reactour").ReactourStep;
 //# sourceMappingURL=PortalSwitcherStep.d.ts.map

package/dist/components/tour/steps/PortalSwitcherStep.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PortalSwitcherStep.d.ts","sourceRoot":"","sources":["../../../../src/components/tour/steps/PortalSwitcherStep.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAW,MAAM,gBAAgB,CAAA;AA6BlD,eAAO,MAAM,kBAAkB,EAAE,QAIhC,CAAA"}
+{"version":3,"file":"PortalSwitcherStep.d.ts","sourceRoot":"","sources":["../../../../src/components/tour/steps/PortalSwitcherStep.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,qBAAqB,uCAgBjC,CAAA"}

package/dist/components/tour/steps/PortalSwitcherStep.js

@@ -1,30 +1,29 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { Box, Button, Flex, IconBox, Image, Text } from '@citric/core';
-import { TimesMini } from '@citric/icons';
-import { useTour } from '@reactour/tour';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Image, Text } from '@citric/core';
 import { useTranslate } from '@stack-spot/portal-translate';
-import { TextWithPointingArrow, finishTour } from '../utils.js';
-const PortalSwitcherStep = () => {
+import { tourStepBuilder } from '../utils.js';
+export const usePortalSwitcherStep = () => {
     const t = useTranslate(translations);
-    const { setIsOpen } = useTour();
-    return _jsxs(Box, { bg: "inverse.500", children: [_jsx(TextWithPointingArrow, { "$position": "right", children: _jsxs(Flex, { w: 12, pl: 5, py: 3, flexWrap: "nowrap", justifyContent: "space-between", alignItems: "center", children: [_jsxs(Text, { appearance: "body2", colorScheme: "inverse.contrastText", weight: "medium", children: [" ", t.title, " "] }), _jsx(Button, { appearance: "text", size: "sm", onClick: () => {
-                                finishTour();
-                                setIsOpen(false);
-                            }, children: _jsx(IconBox, { size: "xs", colorIcon: "inverse.contrastText", children: _jsx(TimesMini, {}) }) })] }) }), _jsx(Image, { src: "https://marketing.stackspot.com/switch-v2.gif", alt: "GIF showing how to move from one portal to another" }), _jsx(Box, { px: 5, py: 3, children: _jsx(Text, { appearance: "microtext1", colorScheme: "inverse.contrastText", children: t.description }) })] });
-};
-export const portalSwitcherStep = {
-    selector: '.portal-switcher',
-    content: PortalSwitcherStep,
-    position: 'right',
+    return tourStepBuilder({
+        selector: '.portal-switcher',
+        title: t.title,
+        content: _jsxs(_Fragment, { children: [_jsx(Image, { src: "https://marketing.stackspot.com/switch-v2.gif", alt: t.imageAlt }), _jsx(Box, { px: 5, py: 3, children: _jsx(Text, { appearance: "microtext1", colorScheme: "inverse.contrastText", children: t.description }) })] }),
+        position: 'right',
+        style: {
+            width: '300px',
+        },
+    });
 };
 const translations = {
     en: {
         title: 'Expand Your Horizons with Stackspot',
         description: 'Easily switch between EDP and AI to enhance your projects. Access a wide range of resources with just one click and take your projects to a new level of efficiency. Start your journey now!',
+        imageAlt: 'GIF describing how to use product switcher and navigate between AI and EDP portals',
     },
     pt: {
         title: 'Expanda Seus Horizontes com Stackspot',
         description: 'Troque facilmente entre EDP e AI para aprimorar seus projetos. Acesse uma ampla gama de recursos com apenas um clique e leve seus projetos para um novo nível de eficiência. Comece sua jornada agora!',
+        imageAlt: 'GIF mostrando como usar o alternador de produtos e navegar entre os portais AI e EDP',
     },
 };
 //# sourceMappingURL=PortalSwitcherStep.js.map

package/dist/components/tour/steps/PortalSwitcherStep.js.map

@@ -1 +1 @@
-{"version":3,"file":"PortalSwitcherStep.js","sourceRoot":"","sources":["../../../../src/components/tour/steps/PortalSwitcherStep.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AACtE,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AACzC,OAAO,EAAY,OAAO,EAAE,MAAM,gBAAgB,CAAA;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AAC3D,OAAO,EAAE,qBAAqB,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAE5D,MAAM,kBAAkB,GAAG,GAAG,EAAE;IAC9B,MAAM,CAAC,GAAG,YAAY,CAAC,YAAY,CAAC,CAAA;IACpC,MAAM,EAAE,SAAS,EAAE,GAAG,OAAO,EAAE,CAAA;IAC/B,OAAO,MAAC,GAAG,IAAC,EAAE,EAAC,aAAa,aAC1B,KAAC,qBAAqB,iBAAW,OAAO,YACtC,MAAC,IAAI,IAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,QAAQ,EAAC,QAAQ,EAAC,cAAc,EAAC,eAAe,EAAC,UAAU,EAAC,QAAQ,aAC7F,MAAC,IAAI,IAAC,UAAU,EAAC,OAAO,EAAC,WAAW,EAAC,sBAAsB,EAAC,MAAM,EAAC,QAAQ,kBAAG,CAAC,CAAC,KAAK,SAAS,EAC9F,KAAC,MAAM,IAAC,UAAU,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,EAAC,OAAO,EAAE,GAAG,EAAE;gCAChD,UAAU,EAAE,CAAA;gCACZ,SAAS,CAAC,KAAK,CAAC,CAAA;4BAClB,CAAC,YACC,KAAC,OAAO,IAAC,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,sBAAsB,YACjD,KAAC,SAAS,KAAG,GACL,GACH,IACJ,GACe,EACxB,KAAC,KAAK,IAAC,GAAG,EAAC,+CAA+C,EACxD,GAAG,EAAC,oDAAoD,GAAG,EAC7D,KAAC,GAAG,IAAC,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,YACf,KAAC,IAAI,IAAC,UAAU,EAAC,YAAY,EAAC,WAAW,EAAC,sBAAsB,YAAE,CAAC,CAAC,WAAW,GAAQ,GACnF,IACD,CAAA;AACT,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,kBAAkB,GAAa;IAC1C,QAAQ,EAAE,kBAAkB;IAC5B,OAAO,EAAE,kBAAkB;IAC3B,QAAQ,EAAE,OAAO;CAClB,CAAA;AAED,MAAM,YAAY,GAAG;IACnB,EAAE,EAAE;QACF,KAAK,EAAE,qCAAqC;QAC5C,WAAW,EAAE,8LAA8L;KAC5M;IACD,EAAE,EAAE;QACF,KAAK,EAAE,uCAAuC;QAC9C,WAAW,EAAE,wMAAwM;KACtN;CACF,CAAA"}
+{"version":3,"file":"PortalSwitcherStep.js","sourceRoot":"","sources":["../../../../src/components/tour/steps/PortalSwitcherStep.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAE1C,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,EAAE;IACxC,MAAM,CAAC,GAAG,YAAY,CAAC,YAAY,CAAC,CAAA;IACpC,OAAO,eAAe,CAAC;QACrB,QAAQ,EAAE,kBAAkB;QAC5B,KAAK,EAAE,CAAC,CAAC,KAAK;QACd,OAAO,EAAE,8BACP,KAAC,KAAK,IAAC,GAAG,EAAC,+CAA+C,EAAC,GAAG,EAAE,CAAC,CAAC,QAAQ,GAAI,EAC9E,KAAC,GAAG,IAAC,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,YACf,KAAC,IAAI,IAAC,UAAU,EAAC,YAAY,EAAC,WAAW,EAAC,sBAAsB,YAAE,CAAC,CAAC,WAAW,GAAQ,GACnF,IACL;QACH,QAAQ,EAAE,OAAO;QACjB,KAAK,EAAE;YACL,KAAK,EAAE,OAAO;SACf;KACF,CAAC,CAAA;AACJ,CAAC,CAAA;AAKD,MAAM,YAAY,GAAG;IACnB,EAAE,EAAE;QACF,KAAK,EAAE,qCAAqC;QAC5C,WAAW,EAAE,8LAA8L;QAC3M,QAAQ,EAAE,oFAAoF;KAC/F;IACD,EAAE,EAAE;QACF,KAAK,EAAE,uCAAuC;QAC9C,WAAW,EAAE,wMAAwM;QACrN,QAAQ,EAAE,sFAAsF;KACjG;CACF,CAAA"}

package/dist/components/tour/utils.d.ts

@@ -1,9 +1,13 @@
-/// <reference types="react" />
-export declare const TextWithPointingArrow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    $position: 'right' | 'top' | 'left';
-    $top?: string | undefined;
-    $right?: string | undefined;
-}>> & string;
-export declare const finishTour: () => void;
-export declare const hasFinishedTour: () => boolean;
+import { ReactNode } from 'react';
+import { ReactourStep } from 'reactour';
+import { NavigationProps } from './StepNavigation.js';
+export declare const finishTourStep: (key: string) => void;
+export declare const isNewTourStep: (step: ReactourStep) => boolean;
+export declare const hasFinishedTourStep: (key: string) => boolean;
+export declare const tourStepBuilder: ({ selector, position, title, content, style, customNavigation, ...rest }: ReactourStep & {
+    title: string;
+    selector: string;
+    content: ReactNode;
+    customNavigation?: NavigationProps | undefined;
+}) => ReactourStep;
 //# sourceMappingURL=utils.d.ts.map

package/dist/components/tour/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/tour/utils.tsx"],"names":[],"mappings":";AAGA,eAAO,MAAM,qBAAqB;eACrB,OAAO,GAAG,KAAK,GAAG,MAAM;;;YAgCpC,CAAA;AAmBD,eAAO,MAAM,UAAU,YAAyC,CAAA;AAEhE,eAAO,MAAM,eAAe,eAAmC,CAAA"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/tour/utils.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAA;AAyBlD,eAAO,MAAM,cAAc,QAAS,MAAM,SAIzC,CAAA;AAED,eAAO,MAAM,aAAa,SAAU,YAAY,YAA6C,CAAA;AAC7F,eAAO,MAAM,mBAAmB,QAAS,MAAM,YAAkC,CAAA;AAEjF,eAAO,MAAM,eAAe;WAQD,MAAM;cAAY,MAAM;aAAW,SAAS;;MAAyC,YAkB9G,CAAA"}

package/dist/components/tour/utils.js

@@ -1,35 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { theme } from '@stack-spot/portal-theme';
-import styled from 'styled-components';
-export const TextWithPointingArrow = styled.div `
-  position: relative;
-  width: 100%;
-  &::after {
-    content: '';
-    position: absolute;
-    border-width: 10px;
-    border-style: solid;
-    border-color: transparent;
-    margin-top: -5px;
-    border-right-color: ${theme.color.inverse[500]};
-    ${({ $position, $top }) => $position === 'right' ?
-    `
-      top: ${$top || '16px'};
-      left: -18px;
-    ` : ''}
-    ${({ $position, $right }) => $position === 'top' ?
-    `
-    bottom: 96%;
-    right: ${$right || '16px'};
-    transform: rotate(90deg);
-    ` : ''}
-    ${({ $position, $top }) => $position === 'left' ?
-    `
-      top: ${$top || '16px'};
-      right: -18px;
-      transform: rotate(180deg);
-    ` : ''}
-  }
-`;
+import { StepContainer } from './StepContainer.js';
+const TOUR_COOKIE = 'guided-tour-global';
 const DOMAIN_REGEX = new RegExp(/(\.*(prd|stg|dev)*.stackspot.com)|localhost/);
 const portalUrl = new URL(location.href);
 const cookieDomain = DOMAIN_REGEX.exec(portalUrl.host)?.[0];
@@ -43,6 +15,29 @@ const setCookie = (key, value) => {
     document.cookie = `${key}=${value}; ${defaultCookieAttributes}`;
 };
 const getCookie = (key) => getCookies()[key];
-export const finishTour = () => setCookie('welcomeTour', 'done');
-export const hasFinishedTour = () => !!getCookie('welcomeTour');
+const getTourCookie = () => {
+    const currentTourObject = getCookie(TOUR_COOKIE);
+    return currentTourObject ? currentTourObject.split(',') : [];
+};
+export const finishTourStep = (key) => {
+    const tourObject = getTourCookie();
+    if (!tourObject.includes(key))
+        tourObject.push(key);
+    setCookie(TOUR_COOKIE, tourObject.toString());
+};
+export const isNewTourStep = (step) => !hasFinishedTourStep(`${step.selector}`);
+export const hasFinishedTourStep = (key) => getTourCookie().includes(key);
+export const tourStepBuilder = ({ selector, position, title, content, style, customNavigation, ...rest }) => ({
+    selector,
+    content: (_jsx(StepContainer, { stepKey: selector, position: position, title: title, customNavigation: customNavigation, children: content })),
+    position,
+    style: {
+        backgroundColor: theme.color.inverse[500],
+        width: '256px',
+        padding: 0,
+        top: ['right', 'left'].includes(position) ? '-3px' : '0',
+        ...(style || {}),
+    },
+    ...(rest || {}),
+});
 //# sourceMappingURL=utils.js.map

package/dist/components/tour/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/tour/utils.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAI3C;;;;;;;;;;0BAUsB,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;MAC5C,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,SAAS,KAAK,OAAO,CAAC,CAAC;IAClD;aACS,IAAI,IAAI,MAAM;;KAEtB,CAAC,CAAC,CAAC,EAAE;MACJ,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,SAAS,KAAK,KAAK,CAAC,CAAC;IAClD;;aAES,MAAM,IAAI,MAAM;;KAExB,CAAC,CAAC,CAAC,EAAE;MACJ,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,SAAS,KAAK,MAAM,CAAC,CAAC;IACjD;aACS,IAAI,IAAI,MAAM;;;KAGtB,CAAC,CAAC,CAAC,EAAE;;CAET,CAAA;AAED,MAAM,YAAY,GAAG,IAAI,MAAM,CAAC,6CAA6C,CAAC,CAAA;AAC9E,MAAM,SAAS,GAAG,IAAI,GAAG,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAA;AACxC,MAAM,YAAY,GAAG,YAAY,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,CAAA;AAC3D,MAAM,uBAAuB,GAAG,UAAU,YAAY,oBAAoB,CAAA;AAE1E,MAAM,UAAU,GAAG,GAA2B,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,OAAO,EAAE,EAAE;IACpG,MAAM,CAAC,IAAI,EAAE,GAAG,KAAK,CAAC,GAAG,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;IAC3C,IAAI,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;IAC5B,OAAO,IAAI,CAAA;AACb,CAAC,EAAE,EAA4B,CAAC,CAAA;AAEhC,MAAM,SAAS,GAAG,CAAC,GAAW,EAAE,KAAa,EAAE,EAAE;IAC/C,QAAQ,CAAC,MAAM,GAAG,GAAG,GAAG,IAAI,KAAK,KAAK,uBAAuB,EAAE,CAAA;AACjE,CAAC,CAAA;AAED,MAAM,SAAS,GAAG,CAAC,GAAW,EAAE,EAAE,CAAC,UAAU,EAAE,CAAC,GAAG,CAAC,CAAA;AAEpD,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,EAAE,CAAC,SAAS,CAAC,aAAa,EAAE,MAAM,CAAC,CAAA;AAEhE,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,aAAa,CAAC,CAAA"}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/tour/utils.tsx"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -9,7 +9,6 @@ export { Toaster } from './components/Toaster.js';
 export { ActionItem, MenuContent, MenuGroup, Title } from './components/menu/MenuContent.js';
 export { MenuSections } from './components/menu/MenuSections.js';
 export * from './components/menu/types.js';
-export { TextWithPointingArrow } from './components/tour/utils.js';
 export * from './components/types.js';
 export * from './elements.js';
 export * from './errors.js';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAA;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AAC5C,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC5D,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAA;AAC1F,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AAC9C,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAA;AACzF,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAA;AAC7D,cAAc,yBAAyB,CAAA;AACvC,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAA;AAC/D,cAAc,oBAAoB,CAAA;AAClC,cAAc,YAAY,CAAA;AAC1B,cAAc,UAAU,CAAA;AACxB,OAAO,EAAE,IAAI,IAAI,aAAa,EAAE,MAAM,YAAY,CAAA;AAClD,cAAc,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAA;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AAC5C,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC5D,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAA;AAC1F,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AAC9C,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAA;AACzF,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAA;AAC7D,cAAc,yBAAyB,CAAA;AACvC,cAAc,oBAAoB,CAAA;AAClC,cAAc,YAAY,CAAA;AAC1B,cAAc,UAAU,CAAA;AACxB,OAAO,EAAE,IAAI,IAAI,aAAa,EAAE,MAAM,YAAY,CAAA;AAClD,cAAc,SAAS,CAAA"}

package/dist/index.js

@@ -9,7 +9,6 @@ export { Toaster } from './components/Toaster.js';
 export { ActionItem, MenuContent, MenuGroup, Title } from './components/menu/MenuContent.js';
 export { MenuSections } from './components/menu/MenuSections.js';
 export * from './components/menu/types.js';
-export { TextWithPointingArrow } from './components/tour/utils.js';
 export * from './components/types.js';
 export * from './elements.js';
 export * from './errors.js';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAA;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AAC5C,OAAO,EAAE,MAAM,EAAe,MAAM,qBAAqB,CAAA;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC5D,OAAO,EAAc,aAAa,EAAsB,MAAM,4BAA4B,CAAA;AAC1F,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AAC9C,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAA;AACzF,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAA;AAC7D,cAAc,yBAAyB,CAAA;AACvC,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAA;AAC/D,cAAc,oBAAoB,CAAA;AAClC,cAAc,YAAY,CAAA;AAC1B,cAAc,UAAU,CAAA;AACxB,OAAO,EAAE,IAAI,IAAI,aAAa,EAAE,MAAM,YAAY,CAAA;AAClD,cAAc,SAAS,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAA;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AAC5C,OAAO,EAAE,MAAM,EAAe,MAAM,qBAAqB,CAAA;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC5D,OAAO,EAAc,aAAa,EAAsB,MAAM,4BAA4B,CAAA;AAC1F,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AAC9C,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAA;AACzF,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAA;AAC7D,cAAc,yBAAyB,CAAA;AACvC,cAAc,oBAAoB,CAAA;AAClC,cAAc,YAAY,CAAA;AAC1B,cAAc,UAAU,CAAA;AACxB,OAAO,EAAE,IAAI,IAAI,aAAa,EAAE,MAAM,YAAY,CAAA;AAClD,cAAc,SAAS,CAAA"}

package/package.json

@@ -1,16 +1,20 @@
 {
   "name": "@stack-spot/portal-layout",
-  "version": "0.0.62",
+  "version": "0.0.63",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsc && tsc-esm-fix --target='dist' && cpy src/layout.css dist --flat",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
+  },
   "peerDependencies": {
     "@citric/core": ">=6.0.0",
     "@citric/icons": ">=5.7.1",
     "@citric/ui": ">=5.7.2",
-    "@reactour/tour": ">=3.6.2",
     "@stack-spot/portal-theme": ">=0.0.11",
     "@stack-spot/portal-translate": ">=0.0.6",
+    "@stack-spot/portal-components": ">=0.0.17",
     "react": ">=18.2.0",
     "react-dom": ">=18.2.0",
     "styled-components": ">=6.1.1"
@@ -34,9 +38,5 @@
   },
   "dependencies": {
     "react-toastify": "^9.1.3"
-  },
-  "scripts": {
-    "build": "tsc && tsc-esm-fix --target='dist' && cpy src/layout.css dist --flat",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
   }
 }

package/src/Layout.tsx

@@ -1,4 +1,4 @@
-import { ProviderProps, TourProvider } from '@reactour/tour'
+import { TourProps, TourProvider, defaultTourConfig, isNewTourStep } from '@stack-spot/portal-components'
 import { CSSToCitricAdapter, WithStyle, listToClass } from '@stack-spot/portal-theme'
 import '@stack-spot/portal-theme/dist/theme.css'
 import { ReactElement, ReactNode, useEffect } from 'react'
@@ -11,8 +11,7 @@ import { SilentErrorBoundary } from './components/error/SilentErrorBoundary'
 import { MenuContent } from './components/menu/MenuContent'
 import { MenuSections } from './components/menu/MenuSections'
 import { MenuProps } from './components/menu/types'
-import { defaultTourConfig } from './components/tour/config'
-import { portalSwitcherStep } from './components/tour/steps/PortalSwitcherStep'
+import { usePortalSwitcherStep } from './components/tour/PortalSwitcherStep'
 import { elementIds, getLayoutElements } from './elements'
 import { LayoutContext, LayoutProvider } from './layout-context'
 import './layout.css'
@@ -24,7 +23,7 @@ interface Props extends WithStyle, LayoutContext {
   extra?: ReactNode,
   errorDescriptor?: DescriptionFn,
   onError?: ErrorHandler,
-  tourProps?: Omit<ProviderProps, 'children'>,
+  tourProps?: TourProps,
 }
 
 interface RawProps extends WithStyle, LayoutContext {
@@ -35,7 +34,7 @@ interface RawProps extends WithStyle, LayoutContext {
   extra?: ReactNode,
   errorDescriptor?: DescriptionFn,
   onError?: ErrorHandler,
-  tourProps?: Omit<ProviderProps, 'children'>,
+  tourProps?: TourProps,
 }
 
 export const RawLayout = (
@@ -47,6 +46,7 @@ export const RawLayout = (
   const { bottomDialog, modal, rightPanel } = overlay.useOverlays()
   const { layout } = getLayoutElements()
   const isCompactedOnlyIcons = layout?.classList.contains('menu-compact')
+  const portalSwitcherStep = usePortalSwitcherStep()
 
   const classes = [
     menuContent && !isCompactedOnlyIcons ? 'menu-content-visible' : undefined,
@@ -55,8 +55,11 @@ export const RawLayout = (
     isCompactedOnlyIcons ? 'menu-compact' : undefined,
   ]
 
-  const tourPropsWithDefaults = { ...defaultTourConfig(), ...(tourProps || {}) }
-  tourPropsWithDefaults.steps.unshift(portalSwitcherStep)
+  const tourPropsWithDefaults = { ...defaultTourConfig, ...(tourProps || {}) }
+  tourPropsWithDefaults.steps = [
+    portalSwitcherStep,
+    ...tourPropsWithDefaults.steps,
+  ].filter(isNewTourStep)
 
   useEffect(() => {
     if (errorDescriptor) ErrorManager.setDescriptionFunction(errorDescriptor)
@@ -66,7 +69,7 @@ export const RawLayout = (
   return (
     <CSSToCitricAdapter>
       <LayoutProvider anchorTag={anchorTag}>
-        <TourProvider {...tourPropsWithDefaults} >
+        <TourProvider config={tourPropsWithDefaults} >
           <div id={elementIds.layout} className={listToClass(classes)} style={style}>
             {children && <div id={elementIds.page}>
               <article id={elementIds.content}><ErrorBoundary>{children}</ErrorBoundary></article>