@servicetitan/feature-spotlight 3.2.1 → 3.4.0

package/dist/components/feature-modal.js

@@ -1,20 +1,12 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'classnames';
 import { Modal } from '@servicetitan/design-system';
 import * as Styles from '../feature-spotlight.module.css';
-export const FeatureModal = (_a) => {
-    var rest = __rest(_a, []);
-    return _jsx(Modal, Object.assign({ className: classNames(Styles.featureModalHeader) }, rest));
+export const FeatureModal = ({ ...rest })=>{
+    return /*#__PURE__*/ _jsx(Modal, {
+        className: classNames(Styles.featureModalHeader),
+        ...rest
+    });
 };
+
 //# sourceMappingURL=feature-modal.js.map

package/dist/components/feature-modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"feature-modal.js","sourceRoot":"","sources":["../../src/components/feature-modal.tsx"],"names":[],"mappings":";;;;;;;;;;;;AACA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,KAAK,EAAc,MAAM,6BAA6B,CAAC;AAChE,OAAO,KAAK,MAAM,MAAM,iCAAiC,CAAC;AAE1D,MAAM,CAAC,MAAM,YAAY,GAAmB,CAAC,EAAW,EAAE,EAAE;QAAV,IAAI,cAAT,EAAW,CAAF;IAClD,OAAO,KAAC,KAAK,kBAAC,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,kBAAkB,CAAC,IAAM,IAAI,EAAI,CAAC;AACjF,CAAC,CAAC"}
+{"version":3,"sources":["../../src/components/feature-modal.tsx"],"sourcesContent":["import { FC } from 'react';\nimport classNames from 'classnames';\nimport { Modal, ModalProps } from '@servicetitan/design-system';\nimport * as Styles from '../feature-spotlight.module.css';\n\nexport const FeatureModal: FC<ModalProps> = ({ ...rest }) => {\n    return <Modal className={classNames(Styles.featureModalHeader)} {...rest} />;\n};\n"],"names":["classNames","Modal","Styles","FeatureModal","rest","className","featureModalHeader"],"mappings":";AACA,OAAOA,gBAAgB,aAAa;AACpC,SAASC,KAAK,QAAoB,8BAA8B;AAChE,YAAYC,YAAY,kCAAkC;AAE1D,OAAO,MAAMC,eAA+B,CAAC,EAAE,GAAGC,MAAM;IACpD,qBAAO,KAACH;QAAMI,WAAWL,WAAWE,OAAOI,kBAAkB;QAAI,GAAGF,IAAI;;AAC5E,EAAE"}

package/dist/components/feature-popover.js

@@ -1,20 +1,29 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
 import { Popover } from '@servicetitan/design-system';
 import * as Styles from '../feature-spotlight.module.css';
-export const FeaturePopover = (_a) => {
-    var { children, footer, header } = _a, rest = __rest(_a, ["children", "footer", "header"]);
-    return (_jsxs(Popover, Object.assign({ className: classNames(Styles.featurePopover), caret: { show: true, className: Styles.featurePopoverCaret }, padding: "m" }, rest, { children: [header && (_jsx(Popover.Header, { className: classNames(Styles.featurePopoverHeader), children: header })), children, footer && (_jsx(Popover.Footer, { className: classNames(Styles.featurePopoverFooter), align: "right", children: footer }))] })));
+export const FeaturePopover = ({ children, footer, header, ...rest })=>{
+    return /*#__PURE__*/ _jsxs(Popover, {
+        className: classNames(Styles.featurePopover),
+        caret: {
+            show: true,
+            className: Styles.featurePopoverCaret
+        },
+        padding: "m",
+        ...rest,
+        children: [
+            header && /*#__PURE__*/ _jsx(Popover.Header, {
+                className: classNames(Styles.featurePopoverHeader),
+                children: header
+            }),
+            children,
+            footer && /*#__PURE__*/ _jsx(Popover.Footer, {
+                className: classNames(Styles.featurePopoverFooter),
+                align: "right",
+                children: footer
+            })
+        ]
+    });
 };
+
 //# sourceMappingURL=feature-popover.js.map

package/dist/components/feature-popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"feature-popover.js","sourceRoot":"","sources":["../../src/components/feature-popover.tsx"],"names":[],"mappings":";;;;;;;;;;;;AACA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,OAAO,EAAgB,MAAM,6BAA6B,CAAC;AACpE,OAAO,KAAK,MAAM,MAAM,iCAAiC,CAAC;AAQ1D,MAAM,CAAC,MAAM,cAAc,GAA4B,CAAC,EAAqC,EAAE,EAAE;QAAzC,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,OAAW,EAAN,IAAI,cAAnC,gCAAqC,CAAF;IACvF,OAAO,CACH,MAAC,OAAO,kBACJ,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,cAAc,CAAC,EAC5C,KAAK,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,CAAC,mBAAmB,EAAE,EAC5D,OAAO,EAAC,GAAG,IACP,IAAI,eAEP,MAAM,IAAI,CACP,KAAC,OAAO,CAAC,MAAM,IAAC,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,oBAAoB,CAAC,YAC7D,MAAM,GACM,CACpB,EACA,QAAQ,EACR,MAAM,IAAI,CACP,KAAC,OAAO,CAAC,MAAM,IAAC,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,oBAAoB,CAAC,EAAE,KAAK,EAAC,OAAO,YAC5E,MAAM,GACM,CACpB,KACK,CACb,CAAC;AACN,CAAC,CAAC"}
+{"version":3,"sources":["../../src/components/feature-popover.tsx"],"sourcesContent":["import { FC } from 'react';\nimport classNames from 'classnames';\nimport { Popover, PopoverProps } from '@servicetitan/design-system';\nimport * as Styles from '../feature-spotlight.module.css';\n\nexport interface FeaturePopoverProps extends PopoverProps {\n    footer?: PopoverProps['footer'];\n    header?: PopoverProps['header'];\n    children?: PopoverProps['children'];\n}\n\nexport const FeaturePopover: FC<FeaturePopoverProps> = ({ children, footer, header, ...rest }) => {\n    return (\n        <Popover\n            className={classNames(Styles.featurePopover)}\n            caret={{ show: true, className: Styles.featurePopoverCaret }}\n            padding=\"m\"\n            {...rest}\n        >\n            {header && (\n                <Popover.Header className={classNames(Styles.featurePopoverHeader)}>\n                    {header}\n                </Popover.Header>\n            )}\n            {children}\n            {footer && (\n                <Popover.Footer className={classNames(Styles.featurePopoverFooter)} align=\"right\">\n                    {footer}\n                </Popover.Footer>\n            )}\n        </Popover>\n    );\n};\n"],"names":["classNames","Popover","Styles","FeaturePopover","children","footer","header","rest","className","featurePopover","caret","show","featurePopoverCaret","padding","Header","featurePopoverHeader","Footer","featurePopoverFooter","align"],"mappings":";AACA,OAAOA,gBAAgB,aAAa;AACpC,SAASC,OAAO,QAAsB,8BAA8B;AACpE,YAAYC,YAAY,kCAAkC;AAQ1D,OAAO,MAAMC,iBAA0C,CAAC,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,MAAM,EAAE,GAAGC,MAAM;IACzF,qBACI,MAACN;QACGO,WAAWR,WAAWE,OAAOO,cAAc;QAC3CC,OAAO;YAAEC,MAAM;YAAMH,WAAWN,OAAOU,mBAAmB;QAAC;QAC3DC,SAAQ;QACP,GAAGN,IAAI;;YAEPD,wBACG,KAACL,QAAQa,MAAM;gBAACN,WAAWR,WAAWE,OAAOa,oBAAoB;0BAC5DT;;YAGRF;YACAC,wBACG,KAACJ,QAAQe,MAAM;gBAACR,WAAWR,WAAWE,OAAOe,oBAAoB;gBAAGC,OAAM;0BACrEb;;;;AAKrB,EAAE"}

package/dist/components/feature-toast.js

@@ -1,20 +1,12 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'classnames';
 import { Toast } from '@servicetitan/design-system';
 import * as Styles from '../feature-spotlight.module.css';
-export const FeatureToast = (_a) => {
-    var { center } = _a, rest = __rest(_a, ["center"]);
-    return (_jsx(Toast, Object.assign({ className: classNames(Styles.featureToast, center && Styles.featureToastCenter) }, rest)));
+export const FeatureToast = ({ center, ...rest })=>{
+    return /*#__PURE__*/ _jsx(Toast, {
+        className: classNames(Styles.featureToast, center && Styles.featureToastCenter),
+        ...rest
+    });
 };
+
 //# sourceMappingURL=feature-toast.js.map

package/dist/components/feature-toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"feature-toast.js","sourceRoot":"","sources":["../../src/components/feature-toast.tsx"],"names":[],"mappings":";;;;;;;;;;;;AACA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,KAAK,EAAc,MAAM,6BAA6B,CAAC;AAChE,OAAO,KAAK,MAAM,MAAM,iCAAiC,CAAC;AAM1D,MAAM,CAAC,MAAM,YAAY,GAA0B,CAAC,EAAmB,EAAE,EAAE;QAAvB,EAAE,MAAM,OAAW,EAAN,IAAI,cAAjB,UAAmB,CAAF;IACjE,OAAO,CACH,KAAC,KAAK,kBACF,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,YAAY,EAAE,MAAM,IAAI,MAAM,CAAC,kBAAkB,CAAC,IAC3E,IAAI,EACV,CACL,CAAC;AACN,CAAC,CAAC"}
+{"version":3,"sources":["../../src/components/feature-toast.tsx"],"sourcesContent":["import { FC } from 'react';\nimport classNames from 'classnames';\nimport { Toast, ToastProps } from '@servicetitan/design-system';\nimport * as Styles from '../feature-spotlight.module.css';\n\nexport interface FeatureToastProps extends ToastProps {\n    center?: boolean;\n}\n\nexport const FeatureToast: FC<FeatureToastProps> = ({ center, ...rest }) => {\n    return (\n        <Toast\n            className={classNames(Styles.featureToast, center && Styles.featureToastCenter)}\n            {...rest}\n        />\n    );\n};\n"],"names":["classNames","Toast","Styles","FeatureToast","center","rest","className","featureToast","featureToastCenter"],"mappings":";AACA,OAAOA,gBAAgB,aAAa;AACpC,SAASC,KAAK,QAAoB,8BAA8B;AAChE,YAAYC,YAAY,kCAAkC;AAM1D,OAAO,MAAMC,eAAsC,CAAC,EAAEC,MAAM,EAAE,GAAGC,MAAM;IACnE,qBACI,KAACJ;QACGK,WAAWN,WAAWE,OAAOK,YAAY,EAAEH,UAAUF,OAAOM,kBAAkB;QAC7E,GAAGH,IAAI;;AAGpB,EAAE"}

package/dist/components/tour-popover.js

@@ -1,8 +1,54 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
-import { Stack, Headline, BodyText, Button, ButtonGroup, } from '@servicetitan/design-system';
+import { Stack, Headline, BodyText, Button, ButtonGroup } from '@servicetitan/design-system';
 import * as Styles from '../feature-spotlight.module.css';
-export const TourPopover = ({ children, currentStep = 1, endText = 'Close', headerText, nextText = 'Next', onClose, onNext, totalStepCount = 1, }) => {
-    return (_jsx(Stack, { direction: "column", className: classNames(Styles.featurePopover, 'Popper__body Popover__body Popover__body--open Popover--w-s p-x-3 p-y-2'), children: _jsxs(Stack.Item, { className: "m-t-half", children: [headerText && _jsx(Headline, { size: "small", children: headerText }), children, _jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", className: "m-t-2 m-b-half", children: [_jsxs(BodyText, { subdued: true, children: [currentStep + 1, "/", totalStepCount] }), _jsxs(ButtonGroup, { children: [currentStep !== totalStepCount - 1 && (_jsx(Button, { fill: "subtle", size: "small", onClick: onClose, children: "Skip" })), _jsx(Button, { size: "small", onClick: onNext, primary: true, children: currentStep !== totalStepCount - 1 ? nextText : endText })] })] })] }) }));
+export const TourPopover = ({ children, currentStep = 1, endText = 'Close', headerText, nextText = 'Next', onClose, onNext, totalStepCount = 1 })=>{
+    return /*#__PURE__*/ _jsx(Stack, {
+        direction: "column",
+        className: classNames(Styles.featurePopover, 'Popper__body Popover__body Popover__body--open Popover--w-s p-x-3 p-y-2'),
+        children: /*#__PURE__*/ _jsxs(Stack.Item, {
+            className: "m-t-half",
+            children: [
+                headerText && /*#__PURE__*/ _jsx(Headline, {
+                    size: "small",
+                    children: headerText
+                }),
+                children,
+                /*#__PURE__*/ _jsxs(Stack, {
+                    direction: "row",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    className: "m-t-2 m-b-half",
+                    children: [
+                        /*#__PURE__*/ _jsxs(BodyText, {
+                            subdued: true,
+                            children: [
+                                currentStep + 1,
+                                "/",
+                                totalStepCount
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsxs(ButtonGroup, {
+                            children: [
+                                currentStep !== totalStepCount - 1 && /*#__PURE__*/ _jsx(Button, {
+                                    fill: "subtle",
+                                    size: "small",
+                                    onClick: onClose,
+                                    children: "Skip"
+                                }),
+                                /*#__PURE__*/ _jsx(Button, {
+                                    size: "small",
+                                    onClick: onNext,
+                                    primary: true,
+                                    children: currentStep !== totalStepCount - 1 ? nextText : endText
+                                })
+                            ]
+                        })
+                    ]
+                })
+            ]
+        })
+    });
 };
+
 //# sourceMappingURL=tour-popover.js.map

package/dist/components/tour-popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"tour-popover.js","sourceRoot":"","sources":["../../src/components/tour-popover.tsx"],"names":[],"mappings":";AACA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAEH,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,WAAW,GACd,MAAM,6BAA6B,CAAC;AACrC,OAAO,KAAK,MAAM,MAAM,iCAAiC,CAAC;AAa1D,MAAM,CAAC,MAAM,WAAW,GAAyB,CAAC,EAC9C,QAAQ,EACR,WAAW,GAAG,CAAC,EACf,OAAO,GAAG,OAAO,EACjB,UAAU,EACV,QAAQ,GAAG,MAAM,EACjB,OAAO,EACP,MAAM,EACN,cAAc,GAAG,CAAC,GACrB,EAAE,EAAE;IACD,OAAO,CACH,KAAC,KAAK,IACF,SAAS,EAAC,QAAQ,EAClB,SAAS,EAAE,UAAU,CACjB,MAAM,CAAC,cAAc,EACrB,yEAAyE,CAC5E,YAED,MAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAC,UAAU,aAC3B,UAAU,IAAI,KAAC,QAAQ,IAAC,IAAI,EAAC,OAAO,YAAE,UAAU,GAAY,EAC5D,QAAQ,EACT,MAAC,KAAK,IACF,SAAS,EAAC,KAAK,EACf,UAAU,EAAC,QAAQ,EACnB,cAAc,EAAC,eAAe,EAC9B,SAAS,EAAC,gBAAgB,aAE1B,MAAC,QAAQ,IAAC,OAAO,mBACZ,WAAW,GAAG,CAAC,OAAG,cAAc,IAC1B,EACX,MAAC,WAAW,eACP,WAAW,KAAK,cAAc,GAAG,CAAC,IAAI,CACnC,KAAC,MAAM,IAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,OAAO,qBAE1C,CACZ,EACD,KAAC,MAAM,IAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,MAAM,EAAE,OAAO,kBACxC,WAAW,KAAK,cAAc,GAAG,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,GACnD,IACC,IACV,IACC,GACT,CACX,CAAC;AACN,CAAC,CAAC"}
+{"version":3,"sources":["../../src/components/tour-popover.tsx"],"sourcesContent":["import { FC, SyntheticEvent, ReactNode } from 'react';\nimport classNames from 'classnames';\nimport {\n    PopoverProps,\n    Stack,\n    Headline,\n    BodyText,\n    Button,\n    ButtonGroup,\n} from '@servicetitan/design-system';\nimport * as Styles from '../feature-spotlight.module.css';\n\nexport interface TourPopoverProps extends PopoverProps {\n    children?: ReactNode;\n    currentStep?: number;\n    endText?: string;\n    headerText?: string;\n    nextText?: string;\n    onClose?: (e?: SyntheticEvent<HTMLElement>) => void;\n    onNext?: (e?: SyntheticEvent<HTMLElement>) => void;\n    totalStepCount?: number;\n}\n\nexport const TourPopover: FC<TourPopoverProps> = ({\n    children,\n    currentStep = 1,\n    endText = 'Close',\n    headerText,\n    nextText = 'Next',\n    onClose,\n    onNext,\n    totalStepCount = 1,\n}) => {\n    return (\n        <Stack\n            direction=\"column\"\n            className={classNames(\n                Styles.featurePopover,\n                'Popper__body Popover__body Popover__body--open Popover--w-s p-x-3 p-y-2'\n            )}\n        >\n            <Stack.Item className=\"m-t-half\">\n                {headerText && <Headline size=\"small\">{headerText}</Headline>}\n                {children}\n                <Stack\n                    direction=\"row\"\n                    alignItems=\"center\"\n                    justifyContent=\"space-between\"\n                    className=\"m-t-2 m-b-half\"\n                >\n                    <BodyText subdued>\n                        {currentStep + 1}/{totalStepCount}\n                    </BodyText>\n                    <ButtonGroup>\n                        {currentStep !== totalStepCount - 1 && (\n                            <Button fill=\"subtle\" size=\"small\" onClick={onClose}>\n                                Skip\n                            </Button>\n                        )}\n                        <Button size=\"small\" onClick={onNext} primary>\n                            {currentStep !== totalStepCount - 1 ? nextText : endText}\n                        </Button>\n                    </ButtonGroup>\n                </Stack>\n            </Stack.Item>\n        </Stack>\n    );\n};\n"],"names":["classNames","Stack","Headline","BodyText","Button","ButtonGroup","Styles","TourPopover","children","currentStep","endText","headerText","nextText","onClose","onNext","totalStepCount","direction","className","featurePopover","Item","size","alignItems","justifyContent","subdued","fill","onClick","primary"],"mappings":";AACA,OAAOA,gBAAgB,aAAa;AACpC,SAEIC,KAAK,EACLC,QAAQ,EACRC,QAAQ,EACRC,MAAM,EACNC,WAAW,QACR,8BAA8B;AACrC,YAAYC,YAAY,kCAAkC;AAa1D,OAAO,MAAMC,cAAoC,CAAC,EAC9CC,QAAQ,EACRC,cAAc,CAAC,EACfC,UAAU,OAAO,EACjBC,UAAU,EACVC,WAAW,MAAM,EACjBC,OAAO,EACPC,MAAM,EACNC,iBAAiB,CAAC,EACrB;IACG,qBACI,KAACd;QACGe,WAAU;QACVC,WAAWjB,WACPM,OAAOY,cAAc,EACrB;kBAGJ,cAAA,MAACjB,MAAMkB,IAAI;YAACF,WAAU;;gBACjBN,4BAAc,KAACT;oBAASkB,MAAK;8BAAST;;gBACtCH;8BACD,MAACP;oBACGe,WAAU;oBACVK,YAAW;oBACXC,gBAAe;oBACfL,WAAU;;sCAEV,MAACd;4BAASoB,OAAO;;gCACZd,cAAc;gCAAE;gCAAEM;;;sCAEvB,MAACV;;gCACII,gBAAgBM,iBAAiB,mBAC9B,KAACX;oCAAOoB,MAAK;oCAASJ,MAAK;oCAAQK,SAASZ;8CAAS;;8CAIzD,KAACT;oCAAOgB,MAAK;oCAAQK,SAASX;oCAAQY,OAAO;8CACxCjB,gBAAgBM,iBAAiB,IAAIH,WAAWF;;;;;;;;;AAO7E,EAAE"}

package/dist/feature-spotlight.module.css.d.ts

@@ -0,0 +1,9 @@
+export const __esModule: true;
+export const featureModalHeader: string;
+export const featurePopover: string;
+export const featurePopoverCaret: string;
+export const featurePopoverFooter: string;
+export const featurePopoverHeader: string;
+export const featureToast: string;
+export const featureToastCenter: string;
+

package/dist/feature-spotlight.stories.d.ts

@@ -0,0 +1,20 @@
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Popover: () => import("react/jsx-runtime").JSX.Element;
+export declare const modal: {
+    (args: any): import("react/jsx-runtime").JSX.Element;
+    args: {
+        open: boolean;
+        title: string;
+        closable: boolean;
+        onClose: () => void;
+        scrollable: boolean;
+        children: import("react/jsx-runtime").JSX.Element;
+        footer: import("react/jsx-runtime").JSX.Element;
+    };
+};
+export declare const toast: () => import("react/jsx-runtime").JSX.Element;
+export declare const tour: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=feature-spotlight.stories.d.ts.map

package/dist/feature-spotlight.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"feature-spotlight.stories.d.ts","sourceRoot":"","sources":["../src/feature-spotlight.stories.tsx"],"names":[],"mappings":";;;AAoCA,wBAEE;AAEF,eAAO,MAAM,OAAO,+CA6GnB,CAAC;AAIF,eAAO,MAAM,KAAK;WAAU,GAAG;;;;;;;;;;CAA+B,CAAC;AA4B/D,eAAO,MAAM,KAAK,+CAkEjB,CAAC;AAqGF,eAAO,MAAM,IAAI,+CA6BhB,CAAC"}

package/dist/index.js

@@ -1,4 +1,5 @@
 export * from './components/feature-popover';
 export * from './components/feature-modal';
 export * from './components/feature-toast';
+
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,8BAA8B,CAAC;AAC7C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export * from './components/feature-popover';\nexport * from './components/feature-modal';\nexport * from './components/feature-toast';\n"],"names":[],"mappings":"AAAA,cAAc,+BAA+B;AAC7C,cAAc,6BAA6B;AAC3C,cAAc,6BAA6B"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@servicetitan/feature-spotlight",
-    "version": "3.2.1",
+    "version": "3.4.0",
     "description": "Provides specific styles to Anvil components to highlight a feature",
     "repository": {
         "type": "git",
@@ -19,7 +19,7 @@
         "@types/history": "~4.7.10",
         "@types/react": "~18.2.55",
         "@types/react-router": "~5.1.17",
-        "react": "~18.2.0",
+        "react": "^18.2.0",
         "react-dom": "~18.2.0"
     },
     "peerDependencies": {
@@ -29,7 +29,7 @@
     },
     "dependencies": {
         "@reactour/tour": "^3.1.4",
-        "classnames": "~2.3.1"
+        "classnames": "^2.3.1"
     },
     "publishConfig": {
         "access": "public"
@@ -37,5 +37,5 @@
     "cli": {
         "webpack": false
     },
-    "gitHead": "17fc7d50aebf18316775bddae960a29a2c79b1b0"
+    "gitHead": "7fc7b9cbf766fe23879ae81831f28bdd96559bce"
 }

package/src/feature-spotlight.stories.tsx

@@ -1,5 +1,6 @@
+// eslint-disable-next-line spaced-comment, @typescript-eslint/triple-slash-reference
 /// <reference path="../../../storybook-static/index.d.ts" />
-import React, { FC } from 'react';
+import { FC, PropsWithChildren, ReactNode, memo, useCallback } from 'react';
 import {
     BodyText,
     Stack,
@@ -38,116 +39,114 @@ export default {
 };
 
 export const Popover = () => (
-    <React.Fragment>
-        <Stack
-            direction="column"
-            spacing={5}
-            alignItems="center"
-            justifyContent="center"
-            className="p-4"
-            style={{ height: '800px' }}
+    <Stack
+        direction="column"
+        spacing={5}
+        alignItems="center"
+        justifyContent="center"
+        className="p-4"
+        style={{ height: '800px' }}
+    >
+        <FeaturePopover
+            trigger={<Button inactive>Top</Button>}
+            open
+            direction="t"
+            header="👋 Bills has moved"
+            footer={
+                <ButtonGroup>
+                    <Button small primary>
+                        Take me there
+                    </Button>
+                </ButtonGroup>
+            }
+            footerAlign="right"
+            offset={{ distance: 200 }}
         >
-            <FeaturePopover
-                trigger={<Button inactive>Top</Button>}
-                open
-                direction="t"
-                header="👋 Bills has moved"
-                footer={
-                    <ButtonGroup>
-                        <Button small primary>
-                            Take me there
-                        </Button>
-                    </ButtonGroup>
-                }
-                footerAlign="right"
-                offset={{ distance: 200 }}
-            >
-                <Stack spacing={1} direction="column">
-                    <BodyText size="small">
-                        Bills has a new home in Accounting. It is still the same feature you know
-                        and love except now something goes here.
-                        <Link primary>Learn More</Link>
-                    </BodyText>
-                    <Checkbox size="small" label="Don’t show me again" />
-                </Stack>
-            </FeaturePopover>
+            <Stack spacing={1} direction="column">
+                <BodyText size="small">
+                    Bills has a new home in Accounting. It is still the same feature you know and
+                    love except now something goes here.
+                    <Link primary>Learn More</Link>
+                </BodyText>
+                <Checkbox size="small" label="Don’t show me again" />
+            </Stack>
+        </FeaturePopover>
 
-            <FeaturePopover
-                trigger={<Button inactive>Right</Button>}
-                open
-                direction="r"
-                header="👋 Bills has moved"
-                footer={
-                    <ButtonGroup>
-                        <Button small primary>
-                            Take me there
-                        </Button>
-                    </ButtonGroup>
-                }
-                footerAlign="right"
-                offset={{ distance: 200 }}
-            >
-                <Stack spacing={1} direction="column">
-                    <BodyText size="small">
-                        Bills has a new home in Accounting. It is still the same feature you know
-                        and love except now something goes here.
-                        <Link primary>Learn More</Link>
-                    </BodyText>
-                    <Checkbox size="small" label="Don’t show me again" />
-                </Stack>
-            </FeaturePopover>
+        <FeaturePopover
+            trigger={<Button inactive>Right</Button>}
+            open
+            direction="r"
+            header="👋 Bills has moved"
+            footer={
+                <ButtonGroup>
+                    <Button small primary>
+                        Take me there
+                    </Button>
+                </ButtonGroup>
+            }
+            footerAlign="right"
+            offset={{ distance: 200 }}
+        >
+            <Stack spacing={1} direction="column">
+                <BodyText size="small">
+                    Bills has a new home in Accounting. It is still the same feature you know and
+                    love except now something goes here.
+                    <Link primary>Learn More</Link>
+                </BodyText>
+                <Checkbox size="small" label="Don’t show me again" />
+            </Stack>
+        </FeaturePopover>
 
-            <FeaturePopover
-                trigger={<Button inactive>Left</Button>}
-                open
-                direction="l"
-                header="👋 Bills has moved"
-                footer={
-                    <ButtonGroup>
-                        <Button small primary>
-                            Take me there
-                        </Button>
-                    </ButtonGroup>
-                }
-                footerAlign="right"
-                offset={{ distance: 200 }}
-            >
-                <Stack spacing={1} direction="column">
-                    <BodyText size="small">
-                        Bills has a new home in Accounting. It is still the same feature you know
-                        and love except now something goes here.
-                        <Link primary>Learn More</Link>
-                    </BodyText>
-                    <Checkbox size="small" label="Don’t show me again" />
-                </Stack>
-            </FeaturePopover>
+        <FeaturePopover
+            trigger={<Button inactive>Left</Button>}
+            open
+            direction="l"
+            header="👋 Bills has moved"
+            footer={
+                <ButtonGroup>
+                    <Button small primary>
+                        Take me there
+                    </Button>
+                </ButtonGroup>
+            }
+            footerAlign="right"
+            offset={{ distance: 200 }}
+        >
+            <Stack spacing={1} direction="column">
+                <BodyText size="small">
+                    Bills has a new home in Accounting. It is still the same feature you know and
+                    love except now something goes here.
+                    <Link primary>Learn More</Link>
+                </BodyText>
+                <Checkbox size="small" label="Don’t show me again" />
+            </Stack>
+        </FeaturePopover>
 
-            <FeaturePopover
-                trigger={<Button inactive>Bottom</Button>}
-                open
-                direction="b"
-                header="👋 Bills has moved"
-                footer={
-                    <ButtonGroup>
-                        <Button small primary>
-                            Take me there
-                        </Button>
-                    </ButtonGroup>
-                }
-                footerAlign="right"
-                offset={{ distance: 200 }}
-            >
-                <Stack spacing={1} direction="column">
-                    <BodyText size="small">
-                        Bills has a new home in Accounting. It is still the same feature you know
-                        and love except now something goes here.
-                        <Link primary>Learn More</Link>
-                    </BodyText>
-                    <Checkbox size="small" label="Don’t show me again" />
-                </Stack>
-            </FeaturePopover>
-        </Stack>
-    </React.Fragment>
+        <FeaturePopover
+            trigger={<Button inactive>Bottom</Button>}
+            open
+            direction="b"
+            header="👋 Bills has moved"
+            footer={
+                <ButtonGroup>
+                    <Button small primary>
+                        Take me there
+                    </Button>
+                </ButtonGroup>
+            }
+            footerAlign="right"
+            offset={{ distance: 200 }}
+        >
+            <Stack spacing={1} direction="column">
+                <BodyText size="small">
+                    Bills has a new home in Accounting. It is still the same feature you know and
+                    love except now something goes here.
+                    <Link primary>Learn More</Link>
+                </BodyText>
+                <Checkbox size="small" label="Don’t show me again" />
+            </Stack>
+        </FeaturePopover>
+    </Stack>
 );
 
 const closeMethod = () => alert('closing');
@@ -249,18 +248,18 @@ export const toast = () => {
 };
 
 interface InternalTourProps {
-    children?: React.ReactNode;
+    children?: ReactNode;
     headerText?: string;
 }
 
-const InternalTourControls: FC<InternalTourProps> = React.memo(({ children, headerText }) => {
+const InternalTourControls: FC<InternalTourProps> = memo(({ children, headerText }) => {
     const { setCurrentStep, currentStep, steps, setIsOpen } = useTour();
 
-    const handleClose = React.useCallback(() => {
+    const handleClose = useCallback(() => {
         setIsOpen(false);
     }, [setIsOpen]);
 
-    const handleNext = React.useCallback(() => {
+    const handleNext = useCallback(() => {
         if (currentStep === steps.length - 1) {
             handleClose();
         } else {
@@ -281,7 +280,7 @@ const InternalTourControls: FC<InternalTourProps> = React.memo(({ children, head
     );
 });
 
-const ReactTour: FC = ({ children }) => {
+const ReactTour: FC<PropsWithChildren> = ({ children }) => {
     const steps: StepType[] = [
         {
             selector: '.step-1',
@@ -298,9 +297,7 @@ const ReactTour: FC = ({ children }) => {
         },
         {
             selector: '.step-2',
-            content: (
-                <InternalTourControls headerText="Give it up for step 2"></InternalTourControls>
-            ),
+            content: <InternalTourControls headerText="Give it up for step 2" />,
         },
         {
             selector: '.step-3',
@@ -341,7 +338,7 @@ const ReactTour: FC = ({ children }) => {
 const StartTourButton = () => {
     const { setIsOpen, setCurrentStep } = useTour();
 
-    const handleTourClick = React.useCallback(() => {
+    const handleTourClick = useCallback(() => {
         setCurrentStep(0);
         setIsOpen(true);
     }, [setCurrentStep, setIsOpen]);
@@ -352,11 +349,13 @@ const StartTourButton = () => {
 export const tour = () => {
     return (
         <Frame>
-             <ReactTour>
+            <ReactTour>
                 <Page
                     header={
                         <Stack justifyContent="space-between" alignItems="center">
-                            <Headline size="large" className="step-3">Page Title</Headline>
+                            <Headline size="large" className="step-3">
+                                Page Title
+                            </Headline>
                             <StartTourButton />
                         </Stack>
                     }