@stack-spot/portal-layout 0.0.56 → 0.0.58

package/dist/Layout.d.ts

@@ -1,8 +1,9 @@
+import { ProviderProps } from '@reactour/tour';
 import { WithStyle } from '@stack-spot/portal-theme';
 import '@stack-spot/portal-theme/dist/theme.css';
 import { ReactElement, ReactNode } from 'react';
-import { DescriptionFn, ErrorHandler } from './components/error/ErrorManager.js';
 import { HeaderProps } from './components/Header.js';
+import { DescriptionFn, ErrorHandler } from './components/error/ErrorManager.js';
 import { MenuProps } from './components/menu/types.js';
 import { LayoutContext } from './layout-context.js';
 import './layout.css';
@@ -22,8 +23,9 @@ interface RawProps extends WithStyle, LayoutContext {
     extra?: ReactNode;
     errorDescriptor?: DescriptionFn;
     onError?: ErrorHandler;
+    tourProps?: Omit<ProviderProps, 'children'>;
 }
-export declare const RawLayout: ({ menuSections, menuContent, header, children, extra, errorDescriptor, onError, className, style, anchorTag }: RawProps) => import("react/jsx-runtime").JSX.Element;
+export declare const RawLayout: ({ menuSections, menuContent, header, children, tourProps, extra, errorDescriptor, onError, className, style, anchorTag }: RawProps) => import("react/jsx-runtime").JSX.Element;
 export declare const Layout: ({ menu, header, children, extra, errorDescriptor, onError, className, style }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=Layout.d.ts.map

package/dist/Layout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Layout.d.ts","sourceRoot":"","sources":["../src/Layout.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAmC,SAAS,EAAE,MAAM,0BAA0B,CAAA;AACrF,OAAO,yCAAyC,CAAA;AAChD,OAAO,EAAE,YAAY,EAAE,SAAS,EAAa,MAAM,OAAO,CAAA;AAE1D,OAAO,EAAE,aAAa,EAAE,YAAY,EAAgB,MAAM,iCAAiC,CAAA;AAE3F,OAAO,EAAU,WAAW,EAAE,MAAM,qBAAqB,CAAA;AAGzD,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAA;AAGnD,OAAO,EAAE,aAAa,EAAkB,MAAM,kBAAkB,CAAA;AAChE,OAAO,cAAc,CAAA;AAGrB,UAAU,KAAM,SAAQ,SAAS,EAAE,aAAa;IAC9C,IAAI,EAAE,SAAS,CAAC;IAChB,MAAM,EAAE,WAAW,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,eAAe,CAAC,EAAE,aAAa,CAAC;IAChC,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB;AAED,UAAU,QAAS,SAAQ,SAAS,EAAE,aAAa;IACjD,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,eAAe,CAAC,EAAE,aAAa,CAAC;IAChC,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB;AAED,eAAO,MAAM,SAAS,kHAGlB,QAAQ,4CA4CX,CAAA;AAOD,eAAO,MAAM,MAAM,kFAAmF,KAAK,4CAgB1G,CAAA"}
+{"version":3,"file":"Layout.d.ts","sourceRoot":"","sources":["../src/Layout.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAgB,MAAM,gBAAgB,CAAA;AAC5D,OAAO,EAAsB,SAAS,EAAe,MAAM,0BAA0B,CAAA;AACrF,OAAO,yCAAyC,CAAA;AAChD,OAAO,EAAE,YAAY,EAAE,SAAS,EAAa,MAAM,OAAO,CAAA;AAE1D,OAAO,EAAU,WAAW,EAAE,MAAM,qBAAqB,CAAA;AAGzD,OAAO,EAAE,aAAa,EAAE,YAAY,EAAgB,MAAM,iCAAiC,CAAA;AAI3F,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAA;AAInD,OAAO,EAAE,aAAa,EAAkB,MAAM,kBAAkB,CAAA;AAChE,OAAO,cAAc,CAAA;AAErB,UAAU,KAAM,SAAQ,SAAS,EAAE,aAAa;IAC9C,IAAI,EAAE,SAAS,CAAC;IAChB,MAAM,EAAE,WAAW,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,eAAe,CAAC,EAAE,aAAa,CAAC;IAChC,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB;AAED,UAAU,QAAS,SAAQ,SAAS,EAAE,aAAa;IACjD,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,eAAe,CAAC,EAAE,aAAa,CAAC;IAChC,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,SAAS,CAAC,EAAE,IAAI,CAAC,aAAa,EAAE,UAAU,CAAC,CAAC;CAC7C;AAED,eAAO,MAAM,SAAS,6HAGlB,QAAQ,4CAkDX,CAAA;AAOD,eAAO,MAAM,MAAM,kFAAmF,KAAK,4CAgB1G,CAAA"}

package/dist/Layout.js

@@ -1,19 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TourProvider } from '@reactour/tour';
 import { CSSToCitricAdapter, listToClass } from '@stack-spot/portal-theme';
 import '@stack-spot/portal-theme/dist/theme.css';
 import { useEffect } from 'react';
+import { overlay } from './LayoutOverlayManager.js';
+import { Header } from './components/Header.js';
+import { Toaster } from './components/Toaster.js';
 import { ErrorBoundary } from './components/error/ErrorBoundary.js';
 import { ErrorManager } from './components/error/ErrorManager.js';
 import { SilentErrorBoundary } from './components/error/SilentErrorBoundary.js';
-import { Header } from './components/Header.js';
 import { MenuContent } from './components/menu/MenuContent.js';
 import { MenuSections } from './components/menu/MenuSections.js';
-import { Toaster } from './components/Toaster.js';
+import { defaultTourConfig } from './components/tour/config.js';
+import { portalSwitcherStep } from './components/tour/steps/PortalSwitcherStep.js';
 import { elementIds, getLayoutElements } from './elements.js';
 import { LayoutProvider } from './layout-context.js';
 import './layout.css';
-import { overlay } from './LayoutOverlayManager.js';
-export const RawLayout = ({ menuSections, menuContent, header, children, extra, errorDescriptor, onError, className, style, anchorTag }) => {
+export const RawLayout = ({ menuSections, menuContent, header, children, tourProps, extra, errorDescriptor, onError, className, style, anchorTag }) => {
     // @ts-ignore
     const { bottomDialog, modal, rightPanel } = overlay.useOverlays();
     const { layout } = getLayoutElements();
@@ -24,13 +27,16 @@ export const RawLayout = ({ menuSections, menuContent, header, children, extra,
         className,
         isCompactedOnlyIcons ? 'menu-compact' : undefined,
     ];
+    const tourPropsWithDefaults = { ...defaultTourConfig(), ...(tourProps || {}) };
+    tourPropsWithDefaults.steps.unshift(portalSwitcherStep);
     useEffect(() => {
         if (errorDescriptor)
             ErrorManager.setDescriptionFunction(errorDescriptor);
         if (onError)
             ErrorManager.setErrorHandler(onError);
     }, []);
-    return (_jsx(CSSToCitricAdapter, { children: _jsx(LayoutProvider, { anchorTag: anchorTag, children: _jsxs("div", { id: elementIds.layout, className: listToClass(classes), style: style, children: [children && _jsx("div", { id: elementIds.page, children: _jsx("article", { id: elementIds.content, children: _jsx(ErrorBoundary, { children: children }) }) }), extra && _jsx(SilentErrorBoundary, { children: extra }), _jsxs("aside", { id: elementIds.menu, children: [_jsx("nav", { role: "menu", id: elementIds.menuContent, children: _jsx(SilentErrorBoundary, { children: menuContent }) }), menuSections && _jsx("nav", { role: "menu", id: elementIds.menuSections, children: _jsx(SilentErrorBoundary, { children: menuSections }) })] }), header && _jsx("header", { id: elementIds.header, children: _jsx(SilentErrorBoundary, { children: header }) }), _jsx("div", { id: elementIds.bottomDialog, role: "dialog", children: _jsx(ErrorBoundary, { children: bottomDialog }) }), _jsxs("div", { id: elementIds.backdrop, children: [_jsx("div", { id: elementIds.rightPanel, "aria-modal": true, role: "dialog", children: _jsx(ErrorBoundary, { children: rightPanel }) }), _jsx("div", { id: elementIds.modal, "aria-modal": true, role: "dialog", children: _jsx(ErrorBoundary, { children: modal }) })] }), _jsx(Toaster, {}), _jsx("div", { id: elementIds.accessibilityAnnouncer, "aria-atomic": true, "aria-live": "assertive" })] }) }) }));
+    return (_jsx(CSSToCitricAdapter, { children: _jsx(LayoutProvider, { anchorTag: anchorTag, children: _jsx(TourProvider, { ...tourPropsWithDefaults, children: _jsxs("div", { id: elementIds.layout, className: listToClass(classes), style: style, children: [children && _jsx("div", { id: elementIds.page, children: _jsx("article", { id: elementIds.content, children: _jsx(ErrorBoundary, { children: children }) }) }), extra && _jsx(SilentErrorBoundary, { children: extra }), _jsxs("aside", { id: elementIds.menu, children: [_jsx("nav", { role: "menu", id: elementIds.menuContent, children: _jsx(SilentErrorBoundary, { children: menuContent }) }), menuSections &&
+                                    _jsx("nav", { role: "menu", id: elementIds.menuSections, children: _jsx(SilentErrorBoundary, { children: menuSections }) })] }), header && _jsx("header", { id: elementIds.header, children: _jsx(SilentErrorBoundary, { children: header }) }), _jsx("div", { id: elementIds.bottomDialog, role: "dialog", children: _jsx(ErrorBoundary, { children: bottomDialog }) }), _jsxs("div", { id: elementIds.backdrop, children: [_jsx("div", { id: elementIds.rightPanel, "aria-modal": true, role: "dialog", children: _jsx(ErrorBoundary, { children: rightPanel }) }), _jsx("div", { id: elementIds.modal, "aria-modal": true, role: "dialog", children: _jsx(ErrorBoundary, { children: modal }) })] }), _jsx(Toaster, {}), _jsx("div", { id: elementIds.accessibilityAnnouncer, "aria-atomic": true, "aria-live": "assertive" })] }) }) }) }));
 };
 const MenuContentRenderer = ({ content }) => {
     const menuContent = typeof content === 'function' ? content() : content;

package/dist/Layout.js.map

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

package/dist/components/PortalSwitcher.js

@@ -78,7 +78,7 @@ export const PortalSwitcher = ({ portals = [] }) => {
                 _jsx(Button, { className: "current-portal", appearance: "text", colorScheme: "light", "aria-controls": PORTAL_SWITCHER_ID, "aria-expanded": visible, "aria-label": `${t.portalSwitcher}: ${currentPortal?.acronym} ${t.selected}`, onClick: () => {
                         setVisible(true);
                         announce(`${t.portalSwitcher} ${t.selected}`);
-                    }, children: _jsxs(Flex, { alignItems: "center", children: [Logos[currentPortal.acronym], _jsx(IconBox, { size: "xs", ml: 3, children: _jsx(Select, {}) })] }) }) :
+                    }, children: _jsxs(Flex, { alignItems: "center", className: "portal-switcher", children: [Logos[currentPortal.acronym], _jsx(IconBox, { size: "xs", ml: 3, children: _jsx(Select, {}) })] }) }) :
                 _jsx(Logo, {}), _jsx(SelectionList, { id: PORTAL_SWITCHER_ID, items: portals?.map(portal => ({
                     label: {
                         id: portal.acronym,

package/dist/components/PortalSwitcher.js.map

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

package/dist/components/error/ErrorBoundary.d.ts

@@ -16,7 +16,7 @@ export declare class ErrorBoundary extends Component<Props, State> {
     };
     componentDidCatch(error: any, errorInfo: any): void;
     componentDidUpdate(prevProps: Readonly<Props>): void;
-    render(): string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<import("react").ReactNode> | null | undefined;
+    render(): string | number | boolean | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
 }
 export {};
 //# sourceMappingURL=ErrorBoundary.d.ts.map

package/dist/components/error/SilentErrorBoundary.d.ts

@@ -17,7 +17,7 @@ export declare class SilentErrorBoundary extends Component<Props, State> {
     };
     componentDidCatch(error: any, errorInfo: any): void;
     componentDidUpdate(prevProps: Readonly<Props>): void;
-    render(): string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<import("react").ReactNode> | null | undefined;
+    render(): string | number | boolean | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
 }
 export {};
 //# sourceMappingURL=SilentErrorBoundary.d.ts.map

package/dist/components/menu/MenuContent.d.ts

@@ -11,17 +11,17 @@ export declare const MenuGroup: import("styled-components").IStyledComponent<"we
     accessKey?: string | undefined;
     autoFocus?: boolean | undefined;
     className?: string | undefined;
-    contentEditable?: "inherit" | (boolean | "false" | "true") | "plaintext-only" | undefined;
+    contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
     contextMenu?: string | undefined;
     dir?: string | undefined;
-    draggable?: (boolean | "false" | "true") | undefined;
+    draggable?: (boolean | "true" | "false") | undefined;
     hidden?: boolean | undefined;
     id?: string | undefined;
     lang?: string | undefined;
     nonce?: string | undefined;
     placeholder?: string | undefined;
     slot?: string | undefined;
-    spellCheck?: (boolean | "false" | "true") | undefined;
+    spellCheck?: (boolean | "true" | "false") | undefined;
     style?: import("react").CSSProperties | undefined;
     tabIndex?: number | undefined;
     title?: string | undefined;
@@ -51,55 +51,55 @@ export declare const MenuGroup: import("styled-components").IStyledComponent<"we
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "on" | "off" | undefined;
-    inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    inputMode?: "text" | "search" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     "aria-activedescendant"?: string | undefined;
-    "aria-atomic"?: (boolean | "false" | "true") | undefined;
-    "aria-autocomplete"?: "none" | "inline" | "both" | "list" | undefined;
+    "aria-atomic"?: (boolean | "true" | "false") | undefined;
+    "aria-autocomplete"?: "list" | "none" | "inline" | "both" | undefined;
     "aria-braillelabel"?: string | undefined;
     "aria-brailleroledescription"?: string | undefined;
-    "aria-busy"?: (boolean | "false" | "true") | undefined;
-    "aria-checked"?: boolean | "mixed" | "false" | "true" | undefined;
+    "aria-busy"?: (boolean | "true" | "false") | undefined;
+    "aria-checked"?: boolean | "true" | "false" | "mixed" | undefined;
     "aria-colcount"?: number | undefined;
     "aria-colindex"?: number | undefined;
     "aria-colindextext"?: string | undefined;
     "aria-colspan"?: number | undefined;
     "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "time" | "page" | "false" | "true" | "step" | "location" | "date" | undefined;
+    "aria-current"?: boolean | "time" | "step" | "true" | "false" | "page" | "location" | "date" | undefined;
     "aria-describedby"?: string | undefined;
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;
-    "aria-disabled"?: (boolean | "false" | "true") | undefined;
-    "aria-dropeffect"?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
+    "aria-disabled"?: (boolean | "true" | "false") | undefined;
+    "aria-dropeffect"?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
     "aria-errormessage"?: string | undefined;
-    "aria-expanded"?: (boolean | "false" | "true") | undefined;
+    "aria-expanded"?: (boolean | "true" | "false") | undefined;
     "aria-flowto"?: string | undefined;
-    "aria-grabbed"?: (boolean | "false" | "true") | undefined;
-    "aria-haspopup"?: boolean | "dialog" | "menu" | "grid" | "listbox" | "false" | "true" | "tree" | undefined;
-    "aria-hidden"?: (boolean | "false" | "true") | undefined;
-    "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
+    "aria-grabbed"?: (boolean | "true" | "false") | undefined;
+    "aria-haspopup"?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
+    "aria-hidden"?: (boolean | "true" | "false") | undefined;
+    "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
     "aria-keyshortcuts"?: string | undefined;
     "aria-label"?: string | undefined;
     "aria-labelledby"?: string | undefined;
     "aria-level"?: number | undefined;
     "aria-live"?: "off" | "assertive" | "polite" | undefined;
-    "aria-modal"?: (boolean | "false" | "true") | undefined;
-    "aria-multiline"?: (boolean | "false" | "true") | undefined;
-    "aria-multiselectable"?: (boolean | "false" | "true") | undefined;
+    "aria-modal"?: (boolean | "true" | "false") | undefined;
+    "aria-multiline"?: (boolean | "true" | "false") | undefined;
+    "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
     "aria-orientation"?: "horizontal" | "vertical" | undefined;
     "aria-owns"?: string | undefined;
     "aria-placeholder"?: string | undefined;
     "aria-posinset"?: number | undefined;
-    "aria-pressed"?: boolean | "mixed" | "false" | "true" | undefined;
-    "aria-readonly"?: (boolean | "false" | "true") | undefined;
-    "aria-relevant"?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
-    "aria-required"?: (boolean | "false" | "true") | undefined;
+    "aria-pressed"?: boolean | "true" | "false" | "mixed" | undefined;
+    "aria-readonly"?: (boolean | "true" | "false") | undefined;
+    "aria-relevant"?: "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+    "aria-required"?: (boolean | "true" | "false") | undefined;
     "aria-roledescription"?: string | undefined;
     "aria-rowcount"?: number | undefined;
     "aria-rowindex"?: number | undefined;
     "aria-rowindextext"?: string | undefined;
     "aria-rowspan"?: number | undefined;
-    "aria-selected"?: (boolean | "false" | "true") | undefined;
+    "aria-selected"?: (boolean | "true" | "false") | undefined;
     "aria-setsize"?: number | undefined;
     "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
     "aria-valuemax"?: number | undefined;
@@ -283,17 +283,17 @@ export declare const Title: import("styled-components").IStyledComponent<"web",
     accessKey?: string | undefined;
     autoFocus?: boolean | undefined;
     className?: string | undefined;
-    contentEditable?: "inherit" | (boolean | "false" | "true") | "plaintext-only" | undefined;
+    contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
     contextMenu?: string | undefined;
     dir?: string | undefined;
-    draggable?: (boolean | "false" | "true") | undefined;
+    draggable?: (boolean | "true" | "false") | undefined;
     hidden?: boolean | undefined;
     id?: string | undefined;
     lang?: string | undefined;
     nonce?: string | undefined;
     placeholder?: string | undefined;
     slot?: string | undefined;
-    spellCheck?: (boolean | "false" | "true") | undefined;
+    spellCheck?: (boolean | "true" | "false") | undefined;
     style?: import("react").CSSProperties | undefined;
     tabIndex?: number | undefined;
     title?: string | undefined;
@@ -323,55 +323,55 @@ export declare const Title: import("styled-components").IStyledComponent<"web",
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "on" | "off" | undefined;
-    inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    inputMode?: "text" | "search" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     "aria-activedescendant"?: string | undefined;
-    "aria-atomic"?: (boolean | "false" | "true") | undefined;
-    "aria-autocomplete"?: "none" | "inline" | "both" | "list" | undefined;
+    "aria-atomic"?: (boolean | "true" | "false") | undefined;
+    "aria-autocomplete"?: "list" | "none" | "inline" | "both" | undefined;
     "aria-braillelabel"?: string | undefined;
     "aria-brailleroledescription"?: string | undefined;
-    "aria-busy"?: (boolean | "false" | "true") | undefined;
-    "aria-checked"?: boolean | "mixed" | "false" | "true" | undefined;
+    "aria-busy"?: (boolean | "true" | "false") | undefined;
+    "aria-checked"?: boolean | "true" | "false" | "mixed" | undefined;
     "aria-colcount"?: number | undefined;
     "aria-colindex"?: number | undefined;
     "aria-colindextext"?: string | undefined;
     "aria-colspan"?: number | undefined;
     "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "time" | "page" | "false" | "true" | "step" | "location" | "date" | undefined;
+    "aria-current"?: boolean | "time" | "step" | "true" | "false" | "page" | "location" | "date" | undefined;
     "aria-describedby"?: string | undefined;
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;
-    "aria-disabled"?: (boolean | "false" | "true") | undefined;
-    "aria-dropeffect"?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
+    "aria-disabled"?: (boolean | "true" | "false") | undefined;
+    "aria-dropeffect"?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
     "aria-errormessage"?: string | undefined;
-    "aria-expanded"?: (boolean | "false" | "true") | undefined;
+    "aria-expanded"?: (boolean | "true" | "false") | undefined;
     "aria-flowto"?: string | undefined;
-    "aria-grabbed"?: (boolean | "false" | "true") | undefined;
-    "aria-haspopup"?: boolean | "dialog" | "menu" | "grid" | "listbox" | "false" | "true" | "tree" | undefined;
-    "aria-hidden"?: (boolean | "false" | "true") | undefined;
-    "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
+    "aria-grabbed"?: (boolean | "true" | "false") | undefined;
+    "aria-haspopup"?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
+    "aria-hidden"?: (boolean | "true" | "false") | undefined;
+    "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
     "aria-keyshortcuts"?: string | undefined;
     "aria-label"?: string | undefined;
     "aria-labelledby"?: string | undefined;
     "aria-level"?: number | undefined;
     "aria-live"?: "off" | "assertive" | "polite" | undefined;
-    "aria-modal"?: (boolean | "false" | "true") | undefined;
-    "aria-multiline"?: (boolean | "false" | "true") | undefined;
-    "aria-multiselectable"?: (boolean | "false" | "true") | undefined;
+    "aria-modal"?: (boolean | "true" | "false") | undefined;
+    "aria-multiline"?: (boolean | "true" | "false") | undefined;
+    "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
     "aria-orientation"?: "horizontal" | "vertical" | undefined;
     "aria-owns"?: string | undefined;
     "aria-placeholder"?: string | undefined;
     "aria-posinset"?: number | undefined;
-    "aria-pressed"?: boolean | "mixed" | "false" | "true" | undefined;
-    "aria-readonly"?: (boolean | "false" | "true") | undefined;
-    "aria-relevant"?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
-    "aria-required"?: (boolean | "false" | "true") | undefined;
+    "aria-pressed"?: boolean | "true" | "false" | "mixed" | undefined;
+    "aria-readonly"?: (boolean | "true" | "false") | undefined;
+    "aria-relevant"?: "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+    "aria-required"?: (boolean | "true" | "false") | undefined;
     "aria-roledescription"?: string | undefined;
     "aria-rowcount"?: number | undefined;
     "aria-rowindex"?: number | undefined;
     "aria-rowindextext"?: string | undefined;
     "aria-rowspan"?: number | undefined;
-    "aria-selected"?: (boolean | "false" | "true") | undefined;
+    "aria-selected"?: (boolean | "true" | "false") | undefined;
     "aria-setsize"?: number | undefined;
     "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
     "aria-valuemax"?: number | undefined;

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

@@ -0,0 +1,8 @@
+import { ProviderProps } from '@reactour/tour';
+import '@stack-spot/portal-theme/dist/theme.css';
+import React from 'react';
+type ComponentsDict = Exclude<ProviderProps['components'], undefined>;
+type NavigationProps = React.ComponentProps<Exclude<ComponentsDict['Navigation'], undefined>>;
+export declare const CustomNavigation: ({ currentStep, steps, setCurrentStep }: NavigationProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Navigation.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Navigation.d.ts","sourceRoot":"","sources":["../../../src/components/tour/Navigation.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAA;AAC9C,OAAO,yCAAyC,CAAA;AAEhD,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,KAAK,cAAc,GAAG,OAAO,CAAC,aAAa,CAAC,YAAY,CAAC,EAAE,SAAS,CAAC,CAAA;AACrE,KAAK,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,cAAc,CAAC,YAAY,CAAC,EAAE,SAAS,CAAC,CAAC,CAAA;AAE7F,eAAO,MAAM,gBAAgB,2CAA4C,eAAe,4CAiBvF,CAAA"}

package/dist/components/tour/Navigation.js

@@ -0,0 +1,15 @@
+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 { finishTour } from './utils.js';
+export const CustomNavigation = ({ currentStep, steps, setCurrentStep }) => {
+    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: () => setCurrentStep(currentStep - 1), size: "sm", colorScheme: "light", children: t.back }), _jsx(Button, { sx: { paddingInline: '20px' }, onClick: () => {
+                            if (currentStep + 1 == steps.length)
+                                finishTour();
+                            setCurrentStep(currentStep + 1);
+                        }, size: "sm", colorScheme: "light", children: "ok" })] })] });
+};
+//# sourceMappingURL=Navigation.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Navigation.js","sourceRoot":"","sources":["../../../src/components/tour/Navigation.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAEjD,OAAO,yCAAyC,CAAA;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AAE3D,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAMpC,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,cAAc,EAAmB,EAAE,EAAE;IAC1F,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,GAAG,CAAC;wBACd,KAAC,MAAM,IAAC,EAAE,EAAE,EAAE,aAAa,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,WAAW,GAAG,CAAC,CAAC,EAAE,IAAI,EAAC,IAAI,EAAC,WAAW,EAAC,OAAO,YACjH,CAAC,CAAC,IAAI,GACA,EACX,KAAC,MAAM,IAAC,EAAE,EAAE,EAAE,aAAa,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE;4BACnD,IAAI,WAAW,GAAG,CAAC,IAAI,KAAK,CAAC,MAAM;gCAAE,UAAU,EAAE,CAAA;4BACjD,cAAc,CAAC,WAAW,GAAG,CAAC,CAAC,CAAA;wBACjC,CAAC,EAAE,IAAI,EAAC,IAAI,EAAC,WAAW,EAAC,OAAO,mBAEvB,IACJ,IACF,CAAA;AACT,CAAC,CAAA"}

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

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

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

@@ -0,0 +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"}

package/dist/components/tour/config.js

@@ -0,0 +1,22 @@
+import { CustomNavigation } from './Navigation.js';
+import { hasFinishedTour } from './utils.js';
+export const defaultTourConfig = () => ({
+    steps: [],
+    defaultOpen: !hasFinishedTour(),
+    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,
+    },
+});
+//# sourceMappingURL=config.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,3 @@
+import { StepType } from '@reactour/tour';
+export declare const portalSwitcherStep: StepType;
+//# sourceMappingURL=PortalSwitcherStep.d.ts.map

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

@@ -0,0 +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;AA0BlD,eAAO,MAAM,kBAAkB,EAAE,QAIhC,CAAA"}

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

@@ -0,0 +1,27 @@
+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 { useTranslate } from '@stack-spot/portal-translate';
+import { TextWithPointingArrow } from '../utils.js';
+const PortalSwitcherStep = () => {
+    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: () => 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',
+};
+const translations = {
+    en: {
+        title: 'Expand Your Horizons with Stackspot',
+        description: 'Easily switch between EDP and HUB 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!',
+    },
+    pt: {
+        title: 'Expanda Seus Horizontes com Stackspot',
+        description: 'Troque facilmente entre EDP e HUB 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!',
+    },
+};
+//# sourceMappingURL=PortalSwitcherStep.js.map

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

@@ -0,0 +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,MAAM,UAAU,CAAA;AAEhD,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,CAAC,SAAS,CAAC,KAAK,CAAC,YACjE,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,+LAA+L;KAC7M;IACD,EAAE,EAAE;QACF,KAAK,EAAE,uCAAuC;QAC9C,WAAW,EAAE,yMAAyM;KACvN;CACF,CAAA"}

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare const TextWithPointingArrow: import("styled-components").IStyledComponent<"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;
+}>>;
+export declare const finishTour: () => void;
+export declare const hasFinishedTour: () => boolean;
+//# sourceMappingURL=utils.d.ts.map

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

@@ -0,0 +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;;;GAgCpC,CAAA;AAmBD,eAAO,MAAM,UAAU,YAAyC,CAAA;AAEhE,eAAO,MAAM,eAAe,eAAmC,CAAA"}

package/dist/components/tour/utils.js

@@ -0,0 +1,48 @@
+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);
+    ` : ''}
+  }
+`;
+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];
+const defaultCookieAttributes = `domain=${cookieDomain}; SameSite=Strict;`;
+const getCookies = () => document.cookie.split('; ').reduce((prev, current) => {
+    const [name, ...value] = current.split('=');
+    prev[name] = value.join('=');
+    return prev;
+}, {});
+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');
+//# sourceMappingURL=utils.js.map

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

@@ -0,0 +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"}

package/dist/index.d.ts

@@ -1,14 +1,15 @@
 export { Layout, RawLayout } from './Layout.js';
 export { overlay } from './LayoutOverlayManager.js';
 export { Dialog } from './components/Dialog.js';
-export { Toaster } from './components/Toaster.js';
 export { Header, HeaderProps } from './components/Header.js';
 export { OverlayContent } from './components/OverlayContent.js';
 export { PortalSwitcher } from './components/PortalSwitcher.js';
 export { ListAction, SelectionList, SelectionListProps } from './components/SelectionList.js';
-export { MenuContent, Title, MenuGroup, ActionItem } from './components/menu/MenuContent.js';
+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,OAAO,EAAE,MAAM,sBAAsB,CAAA;AAC9C,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,WAAW,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,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"}
+{"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"}

package/dist/index.js

@@ -1,14 +1,15 @@
 export { Layout, RawLayout } from './Layout.js';
 export { overlay } from './LayoutOverlayManager.js';
 export { Dialog } from './components/Dialog.js';
-export { Toaster } from './components/Toaster.js';
 export { Header } from './components/Header.js';
 export { OverlayContent } from './components/OverlayContent.js';
 export { PortalSwitcher } from './components/PortalSwitcher.js';
 export { SelectionList } from './components/SelectionList.js';
-export { MenuContent, Title, MenuGroup, ActionItem } from './components/menu/MenuContent.js';
+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,OAAO,EAAE,MAAM,sBAAsB,CAAA;AAC9C,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,WAAW,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,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"}
+{"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stack-spot/portal-layout",
-  "version": "0.0.56",
+  "version": "0.0.58",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -12,6 +12,7 @@
     "@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",
     "react": ">=18.2.0",

package/src/Layout.tsx

@@ -1,18 +1,21 @@
-import { CSSToCitricAdapter, listToClass, WithStyle } from '@stack-spot/portal-theme'
+import { ProviderProps, TourProvider } from '@reactour/tour'
+import { CSSToCitricAdapter, WithStyle, listToClass } from '@stack-spot/portal-theme'
 import '@stack-spot/portal-theme/dist/theme.css'
 import { ReactElement, ReactNode, useEffect } from 'react'
+import { overlay } from './LayoutOverlayManager'
+import { Header, HeaderProps } from './components/Header'
+import { Toaster } from './components/Toaster'
 import { ErrorBoundary } from './components/error/ErrorBoundary'
 import { DescriptionFn, ErrorHandler, ErrorManager } from './components/error/ErrorManager'
 import { SilentErrorBoundary } from './components/error/SilentErrorBoundary'
-import { Header, HeaderProps } from './components/Header'
 import { MenuContent } from './components/menu/MenuContent'
 import { MenuSections } from './components/menu/MenuSections'
 import { MenuProps } from './components/menu/types'
-import { Toaster } from './components/Toaster'
+import { defaultTourConfig } from './components/tour/config'
+import { portalSwitcherStep } from './components/tour/steps/PortalSwitcherStep'
 import { elementIds, getLayoutElements } from './elements'
 import { LayoutContext, LayoutProvider } from './layout-context'
 import './layout.css'
-import { overlay } from './LayoutOverlayManager'
 
 interface Props extends WithStyle, LayoutContext {
   menu: MenuProps,
@@ -31,10 +34,11 @@ interface RawProps extends WithStyle, LayoutContext {
   extra?: ReactNode,
   errorDescriptor?: DescriptionFn,
   onError?: ErrorHandler,
+  tourProps?: Omit<ProviderProps, 'children'>,
 }
 
 export const RawLayout = (
-  { menuSections, menuContent, header, children,
+  { menuSections, menuContent, header, children, tourProps,
     extra, errorDescriptor, onError, className, style, anchorTag }:
     RawProps,
 ) => {
@@ -50,6 +54,9 @@ export const RawLayout = (
     isCompactedOnlyIcons ? 'menu-compact' : undefined,
   ]
 
+  const tourPropsWithDefaults = { ...defaultTourConfig(), ...(tourProps || {}) }
+  tourPropsWithDefaults.steps.unshift(portalSwitcherStep)
+
   useEffect(() => {
     if (errorDescriptor) ErrorManager.setDescriptionFunction(errorDescriptor)
     if (onError) ErrorManager.setErrorHandler(onError)
@@ -58,25 +65,28 @@ export const RawLayout = (
   return (
     <CSSToCitricAdapter>
       <LayoutProvider anchorTag={anchorTag}>
-        <div id={elementIds.layout} className={listToClass(classes)} style={style}>
-          {children && <div id={elementIds.page}>
-            <article id={elementIds.content}><ErrorBoundary>{children}</ErrorBoundary></article>
-          </div>}
-          {extra && <SilentErrorBoundary>{extra}</SilentErrorBoundary>}
-          <aside id={elementIds.menu}>
-            <nav role="menu" id={elementIds.menuContent}><SilentErrorBoundary>{menuContent}</SilentErrorBoundary></nav>
-            {menuSections && <nav role="menu" id={elementIds.menuSections}><SilentErrorBoundary>{menuSections}</SilentErrorBoundary></nav>}
-          </aside>
-          {header && <header id={elementIds.header}><SilentErrorBoundary>{header}</SilentErrorBoundary></header>}
-          <div id={elementIds.bottomDialog} role="dialog"><ErrorBoundary>{bottomDialog}</ErrorBoundary></div>
-          <div id={elementIds.backdrop}>
-            <div id={elementIds.rightPanel} aria-modal role="dialog"><ErrorBoundary>{rightPanel}</ErrorBoundary></div>
-            <div id={elementIds.modal} aria-modal role="dialog"><ErrorBoundary>{modal}</ErrorBoundary></div>
-          </div>
-          <Toaster />
-          <div id={elementIds.accessibilityAnnouncer} aria-atomic aria-live="assertive">
+        <TourProvider {...tourPropsWithDefaults} >
+          <div id={elementIds.layout} className={listToClass(classes)} style={style}>
+            {children && <div id={elementIds.page}>
+              <article id={elementIds.content}><ErrorBoundary>{children}</ErrorBoundary></article>
+            </div>}
+            {extra && <SilentErrorBoundary>{extra}</SilentErrorBoundary>}
+            <aside id={elementIds.menu}>
+              <nav role="menu" id={elementIds.menuContent}><SilentErrorBoundary>{menuContent}</SilentErrorBoundary></nav>
+              {menuSections &&
+                <nav role="menu" id={elementIds.menuSections}><SilentErrorBoundary>{menuSections}</SilentErrorBoundary></nav>}
+            </aside>
+            {header && <header id={elementIds.header}><SilentErrorBoundary>{header}</SilentErrorBoundary></header>}
+            <div id={elementIds.bottomDialog} role="dialog"><ErrorBoundary>{bottomDialog}</ErrorBoundary></div>
+            <div id={elementIds.backdrop}>
+              <div id={elementIds.rightPanel} aria-modal role="dialog"><ErrorBoundary>{rightPanel}</ErrorBoundary></div>
+              <div id={elementIds.modal} aria-modal role="dialog"><ErrorBoundary>{modal}</ErrorBoundary></div>
+            </div>
+            <Toaster />
+            <div id={elementIds.accessibilityAnnouncer} aria-atomic aria-live="assertive">
+            </div>
           </div>
-        </div>
+        </TourProvider>
       </LayoutProvider>
     </CSSToCitricAdapter>
   )

package/src/components/PortalSwitcher.tsx

@@ -98,7 +98,7 @@ export const PortalSwitcher = ({ portals = [] }: PortalSwitcherProps) => {
           setVisible(true)
           announce(`${t.portalSwitcher} ${t.selected}`)
         }}>
-        <Flex alignItems="center">
+        <Flex alignItems="center" className="portal-switcher">
           {Logos[currentPortal.acronym]}
           <IconBox size="xs" ml={3}>
             <Select />

package/src/components/tour/Navigation.tsx

@@ -0,0 +1,29 @@
+import { Button, Flex, Text } from '@citric/core'
+import { ProviderProps } from '@reactour/tour'
+import '@stack-spot/portal-theme/dist/theme.css'
+import { useTranslate } from '@stack-spot/portal-translate'
+import React from 'react'
+import { finishTour } from './utils'
+
+
+type ComponentsDict = Exclude<ProviderProps['components'], undefined>
+type NavigationProps = React.ComponentProps<Exclude<ComponentsDict['Navigation'], undefined>>
+
+export const CustomNavigation = ({ currentStep, steps, setCurrentStep }: NavigationProps) => {
+  const t = useTranslate({ en: { of: 'of', back: 'back' }, pt: { of: 'de', back: 'voltar' } })
+  return <Flex w={12} px={5} py={2} mt="-1px" bg="inverse.500" justifyContent="space-between">
+    <Text appearance="microtext1" colorScheme="inverse.contrastText">{currentStep + 1} {t.of} {steps.length}</Text>
+    <Flex sx={{ gap: '8px' }}>
+      {currentStep > 1 &&
+        <Button sx={{ paddingInline: '20px' }} onClick={() => setCurrentStep(currentStep - 1)} size="sm" colorScheme="light">
+          {t.back}
+        </Button>}
+      <Button sx={{ paddingInline: '20px' }} onClick={() => {
+        if (currentStep + 1 == steps.length) finishTour()
+        setCurrentStep(currentStep + 1)
+      }} size="sm" colorScheme="light">
+        ok
+      </Button>
+    </Flex>
+  </Flex>
+}

package/src/components/tour/config.tsx

@@ -0,0 +1,23 @@
+import { ProviderProps } from '@reactour/tour'
+import { CustomNavigation } from './Navigation'
+import { hasFinishedTour } from './utils'
+
+export const defaultTourConfig: () => Omit<ProviderProps, 'children'> = () => ({
+  steps: [],
+  defaultOpen: !hasFinishedTour(),
+  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,
+  },
+})

package/src/components/tour/steps/PortalSwitcherStep.tsx

@@ -0,0 +1,44 @@
+import { Box, Button, Flex, IconBox, Image, Text } from '@citric/core'
+import { TimesMini } from '@citric/icons'
+import { StepType, useTour } from '@reactour/tour'
+import { useTranslate } from '@stack-spot/portal-translate'
+import { TextWithPointingArrow } from '../utils'
+
+const PortalSwitcherStep = () => {
+  const t = useTranslate(translations)
+  const { setIsOpen } = useTour()
+  return <Box bg="inverse.500">
+    <TextWithPointingArrow $position="right">
+      <Flex w={12} pl={5} py={3} flexWrap="nowrap" justifyContent="space-between" alignItems="center">
+        <Text appearance="body2" colorScheme="inverse.contrastText" weight="medium"> {t.title} </Text>
+        <Button appearance="text" size="sm" onClick={() => setIsOpen(false)}>
+          <IconBox size="xs" colorIcon="inverse.contrastText">
+            <TimesMini />
+          </IconBox>
+        </Button>
+      </Flex>
+    </TextWithPointingArrow>
+    <Image src="https://marketing.stackspot.com/switch-v2.gif"
+      alt="GIF showing how to move from one portal to another" />
+    <Box px={5} py={3}>
+      <Text appearance="microtext1" colorScheme="inverse.contrastText">{t.description}</Text>
+    </Box>
+  </Box >
+}
+
+export const portalSwitcherStep: StepType = {
+  selector: '.portal-switcher',
+  content: PortalSwitcherStep,
+  position: 'right',
+}
+
+const translations = {
+  en: {
+    title: 'Expand Your Horizons with Stackspot',
+    description: 'Easily switch between EDP and HUB 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!',
+  },
+  pt: {
+    title: 'Expanda Seus Horizontes com Stackspot',
+    description: 'Troque facilmente entre EDP e HUB 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!',
+  },
+}

package/src/components/tour/utils.tsx

@@ -0,0 +1,58 @@
+import { theme } from '@stack-spot/portal-theme'
+import styled from 'styled-components'
+
+export const TextWithPointingArrow = styled.div < {
+  $position: 'right' | 'top' | 'left',
+  $top?: string,
+  $right?: string,
+} > `
+  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);
+    ` : ''}
+  }
+`
+
+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]
+const defaultCookieAttributes = `domain=${cookieDomain}; SameSite=Strict;`
+
+const getCookies = (): Record<string, string> => document.cookie.split('; ').reduce((prev, current) => {
+  const [name, ...value] = current.split('=')
+  prev[name] = value.join('=')
+  return prev
+}, {} as Record<string, string>)
+
+const setCookie = (key: string, value: string) => {
+  document.cookie = `${key}=${value}; ${defaultCookieAttributes}`
+}
+
+const getCookie = (key: string) => getCookies()[key]
+
+export const finishTour = () => setCookie('welcomeTour', 'done')
+
+export const hasFinishedTour = () => !!getCookie('welcomeTour')

package/src/index.ts

@@ -1,14 +1,15 @@
 export { Layout, RawLayout } from './Layout'
 export { overlay } from './LayoutOverlayManager'
 export { Dialog } from './components/Dialog'
-export { Toaster } from './components/Toaster'
 export { Header, HeaderProps } from './components/Header'
 export { OverlayContent } from './components/OverlayContent'
 export { PortalSwitcher } from './components/PortalSwitcher'
 export { ListAction, SelectionList, SelectionListProps } from './components/SelectionList'
-export { MenuContent, Title, MenuGroup, ActionItem } from './components/menu/MenuContent'
+export { Toaster } from './components/Toaster'
+export { ActionItem, MenuContent, MenuGroup, Title } from './components/menu/MenuContent'
 export { MenuSections } from './components/menu/MenuSections'
 export * from './components/menu/types'
+export { TextWithPointingArrow } from './components/tour/utils'
 export * from './components/types'
 export * from './elements'
 export * from './errors'