@neo4j-ndl/react 3.9.4 → 3.9.5

package/lib/cjs/spotlight/stories/index.js

@@ -0,0 +1,59 @@
+"use strict";
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SpotlightFixedPositioningSrc = exports.SpotlightInDialogSrc = exports.SpotlightInSideNavSrc = exports.SpotlightTourSrc = exports.SpotlightWithPointerSrc = exports.SpotlightWithImageSrc = exports.SpotlightWithIconSrc = exports.SpotlightWithLabelSrc = exports.SpotlightFixedPositioning = exports.SpotlightInDialog = exports.SpotlightInSideNav = exports.SpotlightTour = exports.SpotlightWithPointer = exports.SpotlightWithImage = exports.SpotlightWithIcon = exports.SpotlightWithLabel = void 0;
+var spotlight_with_label_story_1 = require("./spotlight-with-label.story");
+Object.defineProperty(exports, "SpotlightWithLabel", { enumerable: true, get: function () { return __importDefault(spotlight_with_label_story_1).default; } });
+var spotlight_with_icon_story_1 = require("./spotlight-with-icon.story");
+Object.defineProperty(exports, "SpotlightWithIcon", { enumerable: true, get: function () { return __importDefault(spotlight_with_icon_story_1).default; } });
+var spotlight_with_image_story_1 = require("./spotlight-with-image.story");
+Object.defineProperty(exports, "SpotlightWithImage", { enumerable: true, get: function () { return __importDefault(spotlight_with_image_story_1).default; } });
+var spotlight_with_pointer_story_1 = require("./spotlight-with-pointer.story");
+Object.defineProperty(exports, "SpotlightWithPointer", { enumerable: true, get: function () { return __importDefault(spotlight_with_pointer_story_1).default; } });
+var spotlight_tour_story_1 = require("./spotlight-tour.story");
+Object.defineProperty(exports, "SpotlightTour", { enumerable: true, get: function () { return __importDefault(spotlight_tour_story_1).default; } });
+var spotlight_in_side_nav_story_1 = require("./spotlight-in-side-nav.story");
+Object.defineProperty(exports, "SpotlightInSideNav", { enumerable: true, get: function () { return __importDefault(spotlight_in_side_nav_story_1).default; } });
+var spotlight_in_dialog_story_1 = require("./spotlight-in-dialog.story");
+Object.defineProperty(exports, "SpotlightInDialog", { enumerable: true, get: function () { return __importDefault(spotlight_in_dialog_story_1).default; } });
+var spotlight_fixed_positioning_story_1 = require("./spotlight-fixed-positioning.story");
+Object.defineProperty(exports, "SpotlightFixedPositioning", { enumerable: true, get: function () { return __importDefault(spotlight_fixed_positioning_story_1).default; } });
+const spotlight_fixed_positioning_story_raw_1 = __importDefault(require("./spotlight-fixed-positioning.story?raw"));
+const spotlight_in_dialog_story_raw_1 = __importDefault(require("./spotlight-in-dialog.story?raw"));
+const spotlight_in_side_nav_story_raw_1 = __importDefault(require("./spotlight-in-side-nav.story?raw"));
+const spotlight_tour_story_raw_1 = __importDefault(require("./spotlight-tour.story?raw"));
+const spotlight_with_icon_story_raw_1 = __importDefault(require("./spotlight-with-icon.story?raw"));
+const spotlight_with_image_story_raw_1 = __importDefault(require("./spotlight-with-image.story?raw"));
+const spotlight_with_label_story_raw_1 = __importDefault(require("./spotlight-with-label.story?raw"));
+const spotlight_with_pointer_story_raw_1 = __importDefault(require("./spotlight-with-pointer.story?raw"));
+exports.SpotlightWithLabelSrc = spotlight_with_label_story_raw_1.default.replace(/^\/\*[\s\S]*?\*\/\s*/, '');
+exports.SpotlightWithIconSrc = spotlight_with_icon_story_raw_1.default.replace(/^\/\*[\s\S]*?\*\/\s*/, '');
+exports.SpotlightWithImageSrc = spotlight_with_image_story_raw_1.default.replace(/^\/\*[\s\S]*?\*\/\s*/, '');
+exports.SpotlightWithPointerSrc = spotlight_with_pointer_story_raw_1.default.replace(/^\/\*[\s\S]*?\*\/\s*/, '');
+exports.SpotlightTourSrc = spotlight_tour_story_raw_1.default.replace(/^\/\*[\s\S]*?\*\/\s*/, '');
+exports.SpotlightInSideNavSrc = spotlight_in_side_nav_story_raw_1.default.replace(/^\/\*[\s\S]*?\*\/\s*/, '');
+exports.SpotlightInDialogSrc = spotlight_in_dialog_story_raw_1.default.replace(/^\/\*[\s\S]*?\*\/\s*/, '');
+exports.SpotlightFixedPositioningSrc = spotlight_fixed_positioning_story_raw_1.default.replace(/^\/\*[\s\S]*?\*\/\s*/, '');
+//# sourceMappingURL=index.js.map

package/lib/cjs/spotlight/stories/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/spotlight/stories/index.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;;;;;;AAEH,2EAA6E;AAApE,iJAAA,OAAO,OAAsB;AACtC,yEAA2E;AAAlE,+IAAA,OAAO,OAAqB;AACrC,2EAA6E;AAApE,iJAAA,OAAO,OAAsB;AACtC,+EAAiF;AAAxE,qJAAA,OAAO,OAAwB;AACxC,+DAAkE;AAAzD,sIAAA,OAAO,OAAiB;AACjC,6EAA8E;AAArE,kJAAA,OAAO,OAAsB;AACtC,yEAA2E;AAAlE,+IAAA,OAAO,OAAqB;AACrC,yFAA2F;AAAlF,+JAAA,OAAO,OAA6B;AAE7C,oHAAsF;AACtF,oGAAsE;AACtE,wGAAyE;AACzE,0FAA6D;AAC7D,oGAAsE;AACtE,sGAAwE;AACxE,sGAAwE;AACxE,0GAA4E;AAE/D,QAAA,qBAAqB,GAAG,wCAAwB,CAAC,OAAO,CACnE,sBAAsB,EACtB,EAAE,CACH,CAAC;AACW,QAAA,oBAAoB,GAAG,uCAAuB,CAAC,OAAO,CACjE,sBAAsB,EACtB,EAAE,CACH,CAAC;AACW,QAAA,qBAAqB,GAAG,wCAAwB,CAAC,OAAO,CACnE,sBAAsB,EACtB,EAAE,CACH,CAAC;AACW,QAAA,uBAAuB,GAAG,0CAA0B,CAAC,OAAO,CACvE,sBAAsB,EACtB,EAAE,CACH,CAAC;AACW,QAAA,gBAAgB,GAAG,kCAAmB,CAAC,OAAO,CACzD,sBAAsB,EACtB,EAAE,CACH,CAAC;AACW,QAAA,qBAAqB,GAAG,yCAAwB,CAAC,OAAO,CACnE,sBAAsB,EACtB,EAAE,CACH,CAAC;AACW,QAAA,oBAAoB,GAAG,uCAAuB,CAAC,OAAO,CACjE,sBAAsB,EACtB,EAAE,CACH,CAAC;AACW,QAAA,4BAA4B,GACvC,+CAA+B,CAAC,OAAO,CAAC,sBAAsB,EAAE,EAAE,CAAC,CAAC"}

package/lib/cjs/spotlight/stories/spotlight-fixed-positioning.story.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+require("@neo4j-ndl/base/lib/neo4j-ds-styles.css");
+const react_1 = require("@neo4j-ndl/react");
+const react_2 = require("react");
+const Component = (props) => {
+    const { themeClassName } = (0, react_1.useNeedleTheme)();
+    const { setIsOpen, setActiveSpotlight } = (0, react_1.useSpotlightContext)();
+    const targetId = `test-target-${themeClassName}`;
+    (0, react_2.useEffect)(() => {
+        if (props.isChromatic) {
+            setActiveSpotlight(targetId);
+            setIsOpen(true);
+        }
+    }, [setActiveSpotlight, setIsOpen, targetId, props.isChromatic]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-justify-center n-gap-token-10 n-h-[100px]", children: [(0, jsx_runtime_1.jsx)(react_1.Button, { onClick: () => setActiveSpotlight(targetId), children: "Activate Spotlight" }), (0, jsx_runtime_1.jsx)("div", { className: "n-left-[auto] n-top-[110px] n-fixed", children: (0, jsx_runtime_1.jsx)(react_1.SpotlightTarget, { id: targetId, hasPulse: !props.isChromatic, borderRadius: 4, backgroundColor: "rgb(var(--theme-palette-neutral-bg-weak))", indicatorVariant: "border", indicatorPlacement: "middle-middle", children: (0, jsx_runtime_1.jsx)(react_1.Button, { onClick: () => alert('Target button clicked'), children: "Target" }) }) }), (0, jsx_runtime_1.jsxs)(react_1.Spotlight, { placement: "bottom-end-top-end", target: targetId, actions: [
+                    {
+                        label: 'Close',
+                        onClick: () => {
+                            setIsOpen(false);
+                            setActiveSpotlight(null);
+                        },
+                    },
+                ], children: [(0, jsx_runtime_1.jsx)(react_1.Spotlight.Header, { children: "This is a header" }), (0, jsx_runtime_1.jsx)(react_1.Spotlight.Body, { children: "This is content" })] })] }));
+};
+exports.default = Component;
+//# sourceMappingURL=spotlight-fixed-positioning.story.js.map

package/lib/cjs/spotlight/stories/spotlight-fixed-positioning.story.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spotlight-fixed-positioning.story.js","sourceRoot":"","sources":["../../../../src/spotlight/stories/spotlight-fixed-positioning.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAM0B;AAC1B,iCAAkC;AAMlC,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAE,EAAE;IAC1C,MAAM,EAAE,cAAc,EAAE,GAAG,IAAA,sBAAc,GAAE,CAAC;IAC5C,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAE,GAAG,IAAA,2BAAmB,GAAE,CAAC;IAEhE,MAAM,QAAQ,GAAG,eAAe,cAAc,EAAE,CAAC;IAEjD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,KAAK,CAAC,WAAW,EAAE,CAAC;YACtB,kBAAkB,CAAC,QAAQ,CAAC,CAAC;YAC7B,SAAS,CAAC,IAAI,CAAC,CAAC;QAClB,CAAC;IACH,CAAC,EAAE,CAAC,kBAAkB,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC;IAEjE,OAAO,CACL,iCAAK,SAAS,EAAC,oDAAoD,aACjE,uBAAC,cAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,QAAQ,CAAC,mCAE1C,EACT,gCAAK,SAAS,EAAC,qCAAqC,YAClD,uBAAC,uBAAe,IACd,EAAE,EAAE,QAAQ,EACZ,QAAQ,EAAE,CAAC,KAAK,CAAC,WAAW,EAC5B,YAAY,EAAE,CAAC,EACf,eAAe,EAAC,2CAA2C,EAC3D,gBAAgB,EAAC,QAAQ,EACzB,kBAAkB,EAAC,eAAe,YAElC,uBAAC,cAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,uBAAuB,CAAC,uBAAiB,GACtD,GACd,EACN,wBAAC,iBAAS,IACR,SAAS,EAAC,oBAAoB,EAC9B,MAAM,EAAE,QAAQ,EAChB,OAAO,EAAE;oBACP;wBACE,KAAK,EAAE,OAAO;wBACd,OAAO,EAAE,GAAG,EAAE;4BACZ,SAAS,CAAC,KAAK,CAAC,CAAC;4BACjB,kBAAkB,CAAC,IAAI,CAAC,CAAC;wBAC3B,CAAC;qBACF;iBACF,aAED,uBAAC,iBAAS,CAAC,MAAM,mCAAoC,EACrD,uBAAC,iBAAS,CAAC,IAAI,kCAAiC,IACtC,IACR,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC"}

package/lib/cjs/spotlight/stories/spotlight-in-dialog.story.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+require("@neo4j-ndl/base/lib/neo4j-ds-styles.css");
+const react_1 = require("@neo4j-ndl/react");
+const react_2 = require("react");
+const Component = (props) => {
+    const { themeClassName } = (0, react_1.useNeedleTheme)();
+    const { setIsOpen, setActiveSpotlight } = (0, react_1.useSpotlightContext)();
+    const [isModalOpen, setIsModalOpen] = (0, react_2.useState)(props.isChromatic);
+    const targetId = `test-target-${themeClassName}`;
+    (0, react_2.useEffect)(() => {
+        if (props.isChromatic && isModalOpen) {
+            setActiveSpotlight(targetId);
+            setIsOpen(true);
+        }
+    }, [isModalOpen, setActiveSpotlight, setIsOpen, targetId, props.isChromatic]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-justify-center n-gap-token-10", children: [(0, jsx_runtime_1.jsx)(react_1.Button, { onClick: () => setIsModalOpen(true), children: "Open Modal" }), (0, jsx_runtime_1.jsxs)(react_1.Dialog, { isOpen: isModalOpen, onClose: () => setIsModalOpen(false), "aria-label": "Dialog", modalProps: { className: themeClassName }, children: [(0, jsx_runtime_1.jsx)(react_1.Dialog.Header, { children: "Using Spotlight inside a modal" }), (0, jsx_runtime_1.jsxs)(react_1.Dialog.Description, { className: "n-flex n-flex-col n-gap-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Make sure to set hasAnchorPortal to true for both Spotlight and SpotlightTarget when the target is in a Dialog" }), (0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-justify-center n-gap-token-10", children: [(0, jsx_runtime_1.jsx)(react_1.Button, { onClick: () => setActiveSpotlight(targetId), children: "Activate Spotlight" }), (0, jsx_runtime_1.jsx)(react_1.SpotlightTarget, { id: targetId, hasPulse: !props.isChromatic, borderRadius: 4, backgroundColor: "rgb(var(--theme-palette-neutral-bg-weak))", indicatorVariant: "border", hasAnchorPortal: true, children: (0, jsx_runtime_1.jsx)(react_1.Button, { onClick: () => alert('Target button clicked'), children: "Target" }) })] })] }), (0, jsx_runtime_1.jsxs)(react_1.Spotlight, { placement: "bottom-end-top-end", hasAnchorPortal: true, target: targetId, actions: [
+                            {
+                                label: 'Close',
+                                onClick: () => {
+                                    setIsOpen(false);
+                                    setActiveSpotlight(null);
+                                },
+                            },
+                        ], children: [(0, jsx_runtime_1.jsx)(react_1.Spotlight.Header, { children: "This is a header" }), (0, jsx_runtime_1.jsx)(react_1.Spotlight.Body, { children: "This is content" })] })] })] }));
+};
+exports.default = Component;
+//# sourceMappingURL=spotlight-in-dialog.story.js.map

package/lib/cjs/spotlight/stories/spotlight-in-dialog.story.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spotlight-in-dialog.story.js","sourceRoot":"","sources":["../../../../src/spotlight/stories/spotlight-in-dialog.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAQ0B;AAC1B,iCAA4C;AAM5C,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAE,EAAE;IAC1C,MAAM,EAAE,cAAc,EAAE,GAAG,IAAA,sBAAc,GAAE,CAAC;IAC5C,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAE,GAAG,IAAA,2BAAmB,GAAE,CAAC;IAEhE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,IAAA,gBAAQ,EAAU,KAAK,CAAC,WAAW,CAAC,CAAC;IAC3E,MAAM,QAAQ,GAAG,eAAe,cAAc,EAAE,CAAC;IAEjD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,KAAK,CAAC,WAAW,IAAI,WAAW,EAAE,CAAC;YACrC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;YAC7B,SAAS,CAAC,IAAI,CAAC,CAAC;QAClB,CAAC;IACH,CAAC,EAAE,CAAC,WAAW,EAAE,kBAAkB,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC;IAE9E,OAAO,CACL,iCAAK,SAAS,EAAC,wCAAwC,aACrD,uBAAC,cAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,IAAI,CAAC,2BAAqB,EAChE,wBAAC,cAAM,IACL,MAAM,EAAE,WAAW,EACnB,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,gBACzB,QAAQ,EACnB,UAAU,EAAE,EAAE,SAAS,EAAE,cAAc,EAAE,aAEzC,uBAAC,cAAM,CAAC,MAAM,iDAA+C,EAC7D,wBAAC,cAAM,CAAC,WAAW,IAAC,SAAS,EAAC,iCAAiC,aAC7D,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,+HAGpB,EACb,iCAAK,SAAS,EAAC,wCAAwC,aACrD,uBAAC,cAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,QAAQ,CAAC,mCAE1C,EACT,uBAAC,uBAAe,IACd,EAAE,EAAE,QAAQ,EACZ,QAAQ,EAAE,CAAC,KAAK,CAAC,WAAW,EAC5B,YAAY,EAAE,CAAC,EACf,eAAe,EAAC,2CAA2C,EAC3D,gBAAgB,EAAC,QAAQ,EACzB,eAAe,EAAE,IAAI,YAErB,uBAAC,cAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,uBAAuB,CAAC,uBAE5C,GACO,IACd,IACa,EACrB,wBAAC,iBAAS,IACR,SAAS,EAAC,oBAAoB,EAC9B,eAAe,EAAE,IAAI,EACrB,MAAM,EAAE,QAAQ,EAChB,OAAO,EAAE;4BACP;gCACE,KAAK,EAAE,OAAO;gCACd,OAAO,EAAE,GAAG,EAAE;oCACZ,SAAS,CAAC,KAAK,CAAC,CAAC;oCACjB,kBAAkB,CAAC,IAAI,CAAC,CAAC;gCAC3B,CAAC;6BACF;yBACF,aAED,uBAAC,iBAAS,CAAC,MAAM,mCAAoC,EACrD,uBAAC,iBAAS,CAAC,IAAI,kCAAiC,IACtC,IACL,IACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC"}

package/lib/cjs/spotlight/stories/spotlight-in-side-nav.story.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+require("@neo4j-ndl/base/lib/neo4j-ds-styles.css");
+const react_1 = require("@neo4j-ndl/react");
+const next_1 = require("@neo4j-ndl/react/next");
+const react_2 = require("react");
+const Component = (props) => {
+    const { themeClassName } = (0, react_1.useNeedleTheme)();
+    const { setActiveSpotlight, setIsOpen } = (0, react_1.useSpotlightContext)();
+    const [isSelected, setIsSelected] = (0, react_2.useState)('aura-db-instances');
+    const targetId = `test-target-${themeClassName}`;
+    const handleClick = (item) => {
+        setIsSelected(item);
+    };
+    (0, react_2.useEffect)(() => {
+        if (props.isChromatic) {
+            setActiveSpotlight(targetId);
+            setIsOpen(true);
+        }
+    }, [setActiveSpotlight, setIsOpen, targetId, props.isChromatic]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-h-[500px] n-flex", children: [(0, jsx_runtime_1.jsx)(next_1.SideNavigation, { isExpanded: true, children: (0, jsx_runtime_1.jsxs)(next_1.SideNavigation.List, { children: [(0, jsx_runtime_1.jsx)(next_1.SideNavigation.CategoryHeader, { children: "AuraDB" }), (0, jsx_runtime_1.jsx)(next_1.SideNavigation.NavItem, { as: "button", onClick: () => handleClick('aura-db-instances'), isSelected: isSelected === 'aura-db-instances', label: "Instances" }), (0, jsx_runtime_1.jsx)(next_1.SideNavigation.NavItem, { as: "button", onClick: () => handleClick('aura-db-connect'), isSelected: isSelected === 'aura-db-connect', label: "Connect" }), (0, jsx_runtime_1.jsxs)(next_1.SideNavigation.List, { children: [(0, jsx_runtime_1.jsx)(next_1.SideNavigation.NavItem, { as: "button", onClick: () => handleClick('aura-db-python'), isSelected: isSelected === 'aura-db-python', label: "Python" }), (0, jsx_runtime_1.jsx)(react_1.SpotlightTarget, { as: "li", id: targetId, hasPulse: !props.isChromatic, borderRadius: 4, backgroundColor: "rgb(var(--theme-palette-neutral-bg-weak))", indicatorVariant: "point", indicatorPlacement: "top-right", children: (0, jsx_runtime_1.jsx)(next_1.SideNavigation.NavItem, { as: "button", onClick: () => handleClick('aura-db-javascript'), isSelected: isSelected === 'aura-db-javascript', label: "JavaScript" }) })] }), (0, jsx_runtime_1.jsx)(next_1.SideNavigation.CategoryHeader, { children: "AuraDS" }), (0, jsx_runtime_1.jsxs)(next_1.SideNavigation.List, { children: [(0, jsx_runtime_1.jsx)(next_1.SideNavigation.NavItem, { as: "button", onClick: () => handleClick('aura-ds-instances'), isSelected: isSelected === 'aura-ds-instances', label: "Instances" }), (0, jsx_runtime_1.jsx)(next_1.SideNavigation.NavItem, { as: "button", onClick: () => handleClick('aura-ds-getting-started'), isSelected: isSelected === 'aura-ds-getting-started', label: "Getting Started" })] })] }) }), (0, jsx_runtime_1.jsx)("div", { className: "n-w-full n-h-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md n-p-token-6", children: (0, jsx_runtime_1.jsx)(react_1.Button, { onClick: () => setActiveSpotlight(targetId), children: "Activate Spotlight" }) }), (0, jsx_runtime_1.jsxs)(react_1.Spotlight, { placement: "top-end-top-start", target: targetId, actions: [
+                    {
+                        label: 'Close',
+                        onClick: () => {
+                            setIsOpen(false);
+                            setActiveSpotlight(null);
+                        },
+                    },
+                ], children: [(0, jsx_runtime_1.jsx)(react_1.Spotlight.Header, { children: "This is a header" }), (0, jsx_runtime_1.jsx)(react_1.Spotlight.Body, { children: "This is content" })] })] }));
+};
+exports.default = Component;
+//# sourceMappingURL=spotlight-in-side-nav.story.js.map

package/lib/cjs/spotlight/stories/spotlight-in-side-nav.story.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spotlight-in-side-nav.story.js","sourceRoot":"","sources":["../../../../src/spotlight/stories/spotlight-in-side-nav.story.tsx"],"names":[],"mappings":"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"}

package/lib/cjs/spotlight/stories/spotlight-tour.story.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+require("@neo4j-ndl/base/lib/neo4j-ds-styles.css");
+const react_1 = require("@neo4j-ndl/react");
+const icons_1 = require("@neo4j-ndl/react/icons");
+const Component = () => {
+    const { themeClassName } = (0, react_1.useNeedleTheme)();
+    const { setActiveSpotlight } = (0, react_1.useSpotlightContext)();
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-justify-center n-gap-token-10", children: [(0, jsx_runtime_1.jsx)(react_1.Button, { fill: "outlined", onClick: () => setActiveSpotlight(`test-target-1-${themeClassName}`), children: "Start tour" }), (0, jsx_runtime_1.jsx)(react_1.SpotlightTarget, { id: `test-target-1-${themeClassName}`, hasPulse: true, borderRadius: 4, children: (0, jsx_runtime_1.jsx)(react_1.Button, { onClick: () => alert('Target 1 clicked'), children: "Target 1" }) }), (0, jsx_runtime_1.jsx)(react_1.SpotlightTarget, { id: `test-target-2-${themeClassName}`, hasPulse: true, borderRadius: 4, children: (0, jsx_runtime_1.jsx)(react_1.Button, { onClick: () => alert('Target 2 clicked'), children: "Target 2" }) }), (0, jsx_runtime_1.jsx)(react_1.SpotlightTarget, { id: `test-target-3-${themeClassName}`, hasPulse: true, borderRadius: 4, children: (0, jsx_runtime_1.jsx)(react_1.Button, { onClick: () => alert('Target 3 clicked'), children: "Target 3" }) }), (0, jsx_runtime_1.jsx)(react_1.SpotlightTour, { onAction: (target, action) => console.info(`Action ${action} was performed in spotlight ${target}`), spotlights: [
+                    {
+                        children: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Spotlight.Label, { children: "NEW" }), (0, jsx_runtime_1.jsx)(react_1.Spotlight.Header, { children: "This is a header" }), (0, jsx_runtime_1.jsx)(react_1.Spotlight.Body, { children: "This is content" })] })),
+                        target: `test-target-1-${themeClassName}`,
+                    },
+                    {
+                        children: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Spotlight.IconWrapper, { children: (0, jsx_runtime_1.jsx)(icons_1.FingerPrintIconOutline, {}) }), (0, jsx_runtime_1.jsx)(react_1.Spotlight.Header, { children: "This is a header" }), (0, jsx_runtime_1.jsx)(react_1.Spotlight.Body, { children: "This is content" })] })),
+                        target: `test-target-2-${themeClassName}`,
+                    },
+                    {
+                        children: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Spotlight.Image, { src: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjY2NjIi8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZmlsbD0iIzMzMyIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZHk9Ii4zZW0iPkV4YW1wbGUgSW1hZ2U8L3RleHQ+PC9zdmc+", alt: "example image" }), (0, jsx_runtime_1.jsx)(react_1.Spotlight.Body, { children: "This is content" })] })),
+                        target: `test-target-3-${themeClassName}`,
+                    },
+                ] })] }));
+};
+exports.default = Component;
+//# sourceMappingURL=spotlight-tour.story.js.map

package/lib/cjs/spotlight/stories/spotlight-tour.story.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spotlight-tour.story.js","sourceRoot":"","sources":["../../../../src/spotlight/stories/spotlight-tour.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAO0B;AAC1B,kDAAgE;AAEhE,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,EAAE,cAAc,EAAE,GAAG,IAAA,sBAAc,GAAE,CAAC;IAC5C,MAAM,EAAE,kBAAkB,EAAE,GAAG,IAAA,2BAAmB,GAAE,CAAC;IAErD,OAAO,CACL,iCAAK,SAAS,EAAC,wCAAwC,aACrD,uBAAC,cAAM,IACL,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,iBAAiB,cAAc,EAAE,CAAC,2BAG7D,EACT,uBAAC,uBAAe,IACd,EAAE,EAAE,iBAAiB,cAAc,EAAE,EACrC,QAAQ,QACR,YAAY,EAAE,CAAC,YAEf,uBAAC,cAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,kBAAkB,CAAC,yBAAmB,GACnD,EAClB,uBAAC,uBAAe,IACd,EAAE,EAAE,iBAAiB,cAAc,EAAE,EACrC,QAAQ,QACR,YAAY,EAAE,CAAC,YAEf,uBAAC,cAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,kBAAkB,CAAC,yBAAmB,GACnD,EAClB,uBAAC,uBAAe,IACd,EAAE,EAAE,iBAAiB,cAAc,EAAE,EACrC,QAAQ,QACR,YAAY,EAAE,CAAC,YAEf,uBAAC,cAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,kBAAkB,CAAC,yBAAmB,GACnD,EAClB,uBAAC,qBAAa,IACZ,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE,CAC3B,OAAO,CAAC,IAAI,CAAC,UAAU,MAAM,+BAA+B,MAAM,EAAE,CAAC,EAEvE,UAAU,EAAE;oBACV;wBACE,QAAQ,EAAE,CACR,6DACE,uBAAC,iBAAS,CAAC,KAAK,sBAAsB,EACtC,uBAAC,iBAAS,CAAC,MAAM,mCAAoC,EACrD,uBAAC,iBAAS,CAAC,IAAI,kCAAiC,IAC/C,CACJ;wBACD,MAAM,EAAE,iBAAiB,cAAc,EAAE;qBAC1C;oBACD;wBACE,QAAQ,EAAE,CACR,6DACE,uBAAC,iBAAS,CAAC,WAAW,cACpB,uBAAC,8BAAsB,KAAG,GACJ,EACxB,uBAAC,iBAAS,CAAC,MAAM,mCAAoC,EACrD,uBAAC,iBAAS,CAAC,IAAI,kCAAiC,IAC/C,CACJ;wBACD,MAAM,EAAE,iBAAiB,cAAc,EAAE;qBAC1C;oBACD;wBACE,QAAQ,EAAE,CACR,6DACE,uBAAC,iBAAS,CAAC,KAAK,IACd,GAAG,EAAC,wVAAwV,EAC5V,GAAG,EAAC,eAAe,GACnB,EACF,uBAAC,iBAAS,CAAC,IAAI,kCAAiC,IAC/C,CACJ;wBACD,MAAM,EAAE,iBAAiB,cAAc,EAAE;qBAC1C;iBACF,GACD,IACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC"}

package/lib/cjs/spotlight/stories/spotlight-with-icon.story.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+require("@neo4j-ndl/base/lib/neo4j-ds-styles.css");
+const react_1 = require("@neo4j-ndl/react");
+const icons_1 = require("@neo4j-ndl/react/icons");
+const react_2 = require("react");
+const Component = (props) => {
+    const { themeClassName } = (0, react_1.useNeedleTheme)();
+    const { setIsOpen, setActiveSpotlight } = (0, react_1.useSpotlightContext)();
+    const targetId = `test-target-${themeClassName}`;
+    (0, react_2.useEffect)(() => {
+        if (props.isChromatic) {
+            setActiveSpotlight(targetId);
+            setIsOpen(true);
+        }
+    }, [setActiveSpotlight, setIsOpen, targetId, props.isChromatic]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-justify-center n-gap-token-10", children: [(0, jsx_runtime_1.jsx)(react_1.Button, { onClick: () => setActiveSpotlight(targetId), children: "Activate Spotlight" }), (0, jsx_runtime_1.jsx)(react_1.SpotlightTarget, { id: targetId, hasPulse: !props.isChromatic, borderRadius: 4, backgroundColor: "rgb(var(--theme-palette-neutral-bg-weak))", indicatorVariant: "border", children: (0, jsx_runtime_1.jsx)(react_1.Button, { onClick: () => alert('Target button clicked'), fill: "text", children: "Target" }) }), (0, jsx_runtime_1.jsxs)(react_1.Spotlight, { placement: "bottom-end-top-end", target: targetId, actions: [
+                    {
+                        label: 'Close',
+                        onClick: () => {
+                            setIsOpen(false);
+                            setActiveSpotlight(null);
+                        },
+                    },
+                ], children: [(0, jsx_runtime_1.jsx)(react_1.Spotlight.IconWrapper, { children: (0, jsx_runtime_1.jsx)(icons_1.FingerPrintIconOutline, {}) }), (0, jsx_runtime_1.jsx)(react_1.Spotlight.Header, { children: "This is a header" }), (0, jsx_runtime_1.jsx)(react_1.Spotlight.Body, { children: "This is content" })] })] }));
+};
+exports.default = Component;
+//# sourceMappingURL=spotlight-with-icon.story.js.map

package/lib/cjs/spotlight/stories/spotlight-with-icon.story.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spotlight-with-icon.story.js","sourceRoot":"","sources":["../../../../src/spotlight/stories/spotlight-with-icon.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAM0B;AAC1B,kDAAgE;AAChE,iCAAkC;AAMlC,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAE,EAAE;IAC1C,MAAM,EAAE,cAAc,EAAE,GAAG,IAAA,sBAAc,GAAE,CAAC;IAC5C,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAE,GAAG,IAAA,2BAAmB,GAAE,CAAC;IAEhE,MAAM,QAAQ,GAAG,eAAe,cAAc,EAAE,CAAC;IAEjD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,KAAK,CAAC,WAAW,EAAE,CAAC;YACtB,kBAAkB,CAAC,QAAQ,CAAC,CAAC;YAC7B,SAAS,CAAC,IAAI,CAAC,CAAC;QAClB,CAAC;IACH,CAAC,EAAE,CAAC,kBAAkB,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC;IAEjE,OAAO,CACL,iCAAK,SAAS,EAAC,wCAAwC,aACrD,uBAAC,cAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,QAAQ,CAAC,mCAE1C,EACT,uBAAC,uBAAe,IACd,EAAE,EAAE,QAAQ,EACZ,QAAQ,EAAE,CAAC,KAAK,CAAC,WAAW,EAC5B,YAAY,EAAE,CAAC,EACf,eAAe,EAAC,2CAA2C,EAC3D,gBAAgB,EAAC,QAAQ,YAEzB,uBAAC,cAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,uBAAuB,CAAC,EAAE,IAAI,EAAC,MAAM,uBAEzD,GACO,EAClB,wBAAC,iBAAS,IACR,SAAS,EAAC,oBAAoB,EAC9B,MAAM,EAAE,QAAQ,EAChB,OAAO,EAAE;oBACP;wBACE,KAAK,EAAE,OAAO;wBACd,OAAO,EAAE,GAAG,EAAE;4BACZ,SAAS,CAAC,KAAK,CAAC,CAAC;4BACjB,kBAAkB,CAAC,IAAI,CAAC,CAAC;wBAC3B,CAAC;qBACF;iBACF,aAED,uBAAC,iBAAS,CAAC,WAAW,cACpB,uBAAC,8BAAsB,KAAG,GACJ,EACxB,uBAAC,iBAAS,CAAC,MAAM,mCAAoC,EACrD,uBAAC,iBAAS,CAAC,IAAI,kCAAiC,IACtC,IACR,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC"}

package/lib/cjs/spotlight/stories/spotlight-with-image.story.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+require("@neo4j-ndl/base/lib/neo4j-ds-styles.css");
+const react_1 = require("@neo4j-ndl/react");
+const react_2 = require("react");
+const Component = (props) => {
+    const { themeClassName } = (0, react_1.useNeedleTheme)();
+    const { setIsOpen, setActiveSpotlight } = (0, react_1.useSpotlightContext)();
+    const targetId = `test-target-${themeClassName}`;
+    (0, react_2.useEffect)(() => {
+        if (props.isChromatic) {
+            setActiveSpotlight(targetId);
+            setIsOpen(true);
+        }
+    }, [setActiveSpotlight, setIsOpen, targetId, props.isChromatic]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-justify-center n-gap-token-10", children: [(0, jsx_runtime_1.jsx)(react_1.Button, { onClick: () => setActiveSpotlight(targetId), children: "Activate Spotlight" }), (0, jsx_runtime_1.jsx)(react_1.SpotlightTarget, { id: targetId, hasPulse: !props.isChromatic, borderRadius: 4, backgroundColor: "rgb(var(--theme-palette-neutral-bg-weak))", children: (0, jsx_runtime_1.jsx)(react_1.Button, { onClick: () => alert('Target button clicked'), fill: "text", children: "Target" }) }), (0, jsx_runtime_1.jsxs)(react_1.Spotlight, { placement: "bottom-end-top-end", target: targetId, actions: [
+                    {
+                        label: 'Close',
+                        onClick: () => {
+                            setIsOpen(false);
+                            setActiveSpotlight(null);
+                        },
+                    },
+                ], children: [(0, jsx_runtime_1.jsx)(react_1.Spotlight.Image, { src: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjY2NjIi8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZmlsbD0iIzMzMyIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZHk9Ii4zZW0iPkV4YW1wbGUgSW1hZ2U8L3RleHQ+PC9zdmc+", alt: "example image" }), (0, jsx_runtime_1.jsx)(react_1.Spotlight.Header, { children: "This is a header" }), (0, jsx_runtime_1.jsx)(react_1.Spotlight.Body, { children: "This is content" })] })] }));
+};
+exports.default = Component;
+//# sourceMappingURL=spotlight-with-image.story.js.map

package/lib/cjs/spotlight/stories/spotlight-with-image.story.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spotlight-with-image.story.js","sourceRoot":"","sources":["../../../../src/spotlight/stories/spotlight-with-image.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAM0B;AAC1B,iCAAkC;AAMlC,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAE,EAAE;IAC1C,MAAM,EAAE,cAAc,EAAE,GAAG,IAAA,sBAAc,GAAE,CAAC;IAC5C,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAE,GAAG,IAAA,2BAAmB,GAAE,CAAC;IAEhE,MAAM,QAAQ,GAAG,eAAe,cAAc,EAAE,CAAC;IAEjD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,KAAK,CAAC,WAAW,EAAE,CAAC;YACtB,kBAAkB,CAAC,QAAQ,CAAC,CAAC;YAC7B,SAAS,CAAC,IAAI,CAAC,CAAC;QAClB,CAAC;IACH,CAAC,EAAE,CAAC,kBAAkB,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC;IAEjE,OAAO,CACL,iCAAK,SAAS,EAAC,wCAAwC,aACrD,uBAAC,cAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,QAAQ,CAAC,mCAE1C,EACT,uBAAC,uBAAe,IACd,EAAE,EAAE,QAAQ,EACZ,QAAQ,EAAE,CAAC,KAAK,CAAC,WAAW,EAC5B,YAAY,EAAE,CAAC,EACf,eAAe,EAAC,2CAA2C,YAE3D,uBAAC,cAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,uBAAuB,CAAC,EAAE,IAAI,EAAC,MAAM,uBAEzD,GACO,EAClB,wBAAC,iBAAS,IACR,SAAS,EAAC,oBAAoB,EAC9B,MAAM,EAAE,QAAQ,EAChB,OAAO,EAAE;oBACP;wBACE,KAAK,EAAE,OAAO;wBACd,OAAO,EAAE,GAAG,EAAE;4BACZ,SAAS,CAAC,KAAK,CAAC,CAAC;4BACjB,kBAAkB,CAAC,IAAI,CAAC,CAAC;wBAC3B,CAAC;qBACF;iBACF,aAED,uBAAC,iBAAS,CAAC,KAAK,IACd,GAAG,EAAC,wVAAwV,EAC5V,GAAG,EAAC,eAAe,GACnB,EACF,uBAAC,iBAAS,CAAC,MAAM,mCAAoC,EACrD,uBAAC,iBAAS,CAAC,IAAI,kCAAiC,IACtC,IACR,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC"}

package/lib/cjs/spotlight/stories/spotlight-with-label.story.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+require("@neo4j-ndl/base/lib/neo4j-ds-styles.css");
+const react_1 = require("@neo4j-ndl/react");
+const react_2 = require("react");
+const Component = (props) => {
+    const { themeClassName } = (0, react_1.useNeedleTheme)();
+    const { setIsOpen, setActiveSpotlight } = (0, react_1.useSpotlightContext)();
+    const targetId = `test-target-${themeClassName}`;
+    (0, react_2.useEffect)(() => {
+        if (props.isChromatic) {
+            setActiveSpotlight(targetId);
+            setIsOpen(true);
+        }
+    }, [setActiveSpotlight, setIsOpen, targetId, props.isChromatic]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-justify-center n-gap-token-10", children: [(0, jsx_runtime_1.jsx)(react_1.Button, { onClick: () => setActiveSpotlight(targetId), children: "Activate Spotlight" }), (0, jsx_runtime_1.jsx)(react_1.SpotlightTarget, { id: targetId, hasPulse: !props.isChromatic, borderRadius: 4, backgroundColor: "rgb(var(--theme-palette-neutral-bg-weak))", indicatorVariant: "border", children: (0, jsx_runtime_1.jsx)(react_1.Button, { onClick: () => alert('Target button clicked'), fill: "text", children: "Target" }) }), (0, jsx_runtime_1.jsxs)(react_1.Spotlight, { placement: "bottom-end-top-end", target: targetId, actions: [
+                    {
+                        label: 'Close',
+                        onClick: () => {
+                            setIsOpen(false);
+                            setActiveSpotlight(null);
+                        },
+                    },
+                ], children: [(0, jsx_runtime_1.jsx)(react_1.Spotlight.Label, { children: "NEW" }), (0, jsx_runtime_1.jsx)(react_1.Spotlight.Header, { children: "This is a header" }), (0, jsx_runtime_1.jsx)(react_1.Spotlight.Body, { children: "This is content" })] })] }));
+};
+exports.default = Component;
+//# sourceMappingURL=spotlight-with-label.story.js.map

package/lib/cjs/spotlight/stories/spotlight-with-label.story.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spotlight-with-label.story.js","sourceRoot":"","sources":["../../../../src/spotlight/stories/spotlight-with-label.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAM0B;AAC1B,iCAAkC;AAMlC,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAE,EAAE;IAC1C,MAAM,EAAE,cAAc,EAAE,GAAG,IAAA,sBAAc,GAAE,CAAC;IAC5C,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAE,GAAG,IAAA,2BAAmB,GAAE,CAAC;IAEhE,MAAM,QAAQ,GAAG,eAAe,cAAc,EAAE,CAAC;IAEjD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,KAAK,CAAC,WAAW,EAAE,CAAC;YACtB,kBAAkB,CAAC,QAAQ,CAAC,CAAC;YAC7B,SAAS,CAAC,IAAI,CAAC,CAAC;QAClB,CAAC;IACH,CAAC,EAAE,CAAC,kBAAkB,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC;IAEjE,OAAO,CACL,iCAAK,SAAS,EAAC,wCAAwC,aACrD,uBAAC,cAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,QAAQ,CAAC,mCAE1C,EACT,uBAAC,uBAAe,IACd,EAAE,EAAE,QAAQ,EACZ,QAAQ,EAAE,CAAC,KAAK,CAAC,WAAW,EAC5B,YAAY,EAAE,CAAC,EACf,eAAe,EAAC,2CAA2C,EAC3D,gBAAgB,EAAC,QAAQ,YAEzB,uBAAC,cAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,uBAAuB,CAAC,EAAE,IAAI,EAAC,MAAM,uBAEzD,GACO,EAClB,wBAAC,iBAAS,IACR,SAAS,EAAC,oBAAoB,EAC9B,MAAM,EAAE,QAAQ,EAChB,OAAO,EAAE;oBACP;wBACE,KAAK,EAAE,OAAO;wBACd,OAAO,EAAE,GAAG,EAAE;4BACZ,SAAS,CAAC,KAAK,CAAC,CAAC;4BACjB,kBAAkB,CAAC,IAAI,CAAC,CAAC;wBAC3B,CAAC;qBACF;iBACF,aAED,uBAAC,iBAAS,CAAC,KAAK,sBAAsB,EACtC,uBAAC,iBAAS,CAAC,MAAM,mCAAoC,EACrD,uBAAC,iBAAS,CAAC,IAAI,kCAAiC,IACtC,IACR,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC"}

package/lib/cjs/spotlight/stories/spotlight-with-pointer.story.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+require("@neo4j-ndl/base/lib/neo4j-ds-styles.css");
+const react_1 = require("@neo4j-ndl/react");
+const react_2 = require("react");
+const Component = (props) => {
+    const { themeClassName } = (0, react_1.useNeedleTheme)();
+    const { setIsOpen, setActiveSpotlight } = (0, react_1.useSpotlightContext)();
+    const targetId = `test-target-${themeClassName}`;
+    (0, react_2.useEffect)(() => {
+        if (props.isChromatic) {
+            setActiveSpotlight(targetId);
+            setIsOpen(true);
+        }
+    }, [setActiveSpotlight, setIsOpen, targetId, props.isChromatic]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-justify-center n-gap-token-10", children: [(0, jsx_runtime_1.jsx)(react_1.Button, { onClick: () => setActiveSpotlight(targetId), children: "Activate Spotlight" }), (0, jsx_runtime_1.jsx)(react_1.SpotlightTarget, { id: targetId, hasPulse: !props.isChromatic, borderRadius: 4, backgroundColor: "rgb(var(--theme-palette-neutral-bg-weak))", indicatorVariant: "point", indicatorPlacement: "top-right", children: (0, jsx_runtime_1.jsx)(react_1.Button, { onClick: () => alert('Target button clicked'), children: "Target" }) }), (0, jsx_runtime_1.jsxs)(react_1.Spotlight, { placement: "bottom-end-top-end", target: targetId, actions: [
+                    {
+                        label: 'Close',
+                        onClick: () => {
+                            setIsOpen(false);
+                            setActiveSpotlight(null);
+                        },
+                    },
+                ], children: [(0, jsx_runtime_1.jsx)(react_1.Spotlight.Header, { children: "This is a header" }), (0, jsx_runtime_1.jsx)(react_1.Spotlight.Body, { children: "This is content" })] })] }));
+};
+exports.default = Component;
+//# sourceMappingURL=spotlight-with-pointer.story.js.map

package/lib/cjs/spotlight/stories/spotlight-with-pointer.story.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spotlight-with-pointer.story.js","sourceRoot":"","sources":["../../../../src/spotlight/stories/spotlight-with-pointer.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAM0B;AAC1B,iCAAkC;AAMlC,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAE,EAAE;IAC1C,MAAM,EAAE,cAAc,EAAE,GAAG,IAAA,sBAAc,GAAE,CAAC;IAC5C,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAE,GAAG,IAAA,2BAAmB,GAAE,CAAC;IAEhE,MAAM,QAAQ,GAAG,eAAe,cAAc,EAAE,CAAC;IAEjD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,KAAK,CAAC,WAAW,EAAE,CAAC;YACtB,kBAAkB,CAAC,QAAQ,CAAC,CAAC;YAC7B,SAAS,CAAC,IAAI,CAAC,CAAC;QAClB,CAAC;IACH,CAAC,EAAE,CAAC,kBAAkB,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC;IAEjE,OAAO,CACL,iCAAK,SAAS,EAAC,wCAAwC,aACrD,uBAAC,cAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,QAAQ,CAAC,mCAE1C,EACT,uBAAC,uBAAe,IACd,EAAE,EAAE,QAAQ,EACZ,QAAQ,EAAE,CAAC,KAAK,CAAC,WAAW,EAC5B,YAAY,EAAE,CAAC,EACf,eAAe,EAAC,2CAA2C,EAC3D,gBAAgB,EAAC,OAAO,EACxB,kBAAkB,EAAC,WAAW,YAE9B,uBAAC,cAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,uBAAuB,CAAC,uBAAiB,GACtD,EAClB,wBAAC,iBAAS,IACR,SAAS,EAAC,oBAAoB,EAC9B,MAAM,EAAE,QAAQ,EAChB,OAAO,EAAE;oBACP;wBACE,KAAK,EAAE,OAAO;wBACd,OAAO,EAAE,GAAG,EAAE;4BACZ,SAAS,CAAC,KAAK,CAAC,CAAC;4BACjB,kBAAkB,CAAC,IAAI,CAAC,CAAC;wBAC3B,CAAC;qBACF;iBACF,aAED,uBAAC,iBAAS,CAAC,MAAM,mCAAoC,EACrD,uBAAC,iBAAS,CAAC,IAAI,kCAAiC,IACtC,IACR,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC"}