@neo4j-ndl/react 3.9.4 → 3.9.6

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

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "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/>.
+ */
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+import { Button, Spotlight, SpotlightTarget, useNeedleTheme, useSpotlightContext, } from '@neo4j-ndl/react';
+import { useEffect } from 'react';
+const Component = (props) => {
+    const { themeClassName } = useNeedleTheme();
+    const { setIsOpen, setActiveSpotlight } = useSpotlightContext();
+    const targetId = `test-target-${themeClassName}`;
+    useEffect(() => {
+        if (props.isChromatic) {
+            setActiveSpotlight(targetId);
+            setIsOpen(true);
+        }
+    }, [setActiveSpotlight, setIsOpen, targetId, props.isChromatic]);
+    return (_jsxs("div", { className: "n-flex n-justify-center n-gap-token-10 n-h-[100px]", children: [_jsx(Button, { onClick: () => setActiveSpotlight(targetId), children: "Activate Spotlight" }), _jsx("div", { className: "n-left-[auto] n-top-[110px] n-fixed", children: _jsx(SpotlightTarget, { id: targetId, hasPulse: !props.isChromatic, borderRadius: 4, backgroundColor: "rgb(var(--theme-palette-neutral-bg-weak))", indicatorVariant: "border", indicatorPlacement: "middle-middle", children: _jsx(Button, { onClick: () => alert('Target button clicked'), children: "Target" }) }) }), _jsxs(Spotlight, { placement: "bottom-end-top-end", target: targetId, actions: [
+                    {
+                        label: 'Close',
+                        onClick: () => {
+                            setIsOpen(false);
+                            setActiveSpotlight(null);
+                        },
+                    },
+                ], children: [_jsx(Spotlight.Header, { children: "This is a header" }), _jsx(Spotlight.Body, { children: "This is content" })] })] }));
+};
+export default Component;
+//# sourceMappingURL=spotlight-fixed-positioning.story.js.map

package/lib/esm/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,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EACL,MAAM,EACN,SAAS,EACT,eAAe,EACf,cAAc,EACd,mBAAmB,GACpB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMlC,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAE,EAAE;IAC1C,MAAM,EAAE,cAAc,EAAE,GAAG,cAAc,EAAE,CAAC;IAC5C,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAE,GAAG,mBAAmB,EAAE,CAAC;IAEhE,MAAM,QAAQ,GAAG,eAAe,cAAc,EAAE,CAAC;IAEjD,SAAS,CAAC,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,eAAK,SAAS,EAAC,oDAAoD,aACjE,KAAC,MAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,QAAQ,CAAC,mCAE1C,EACT,cAAK,SAAS,EAAC,qCAAqC,YAClD,KAAC,eAAe,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,KAAC,MAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,uBAAuB,CAAC,uBAAiB,GACtD,GACd,EACN,MAAC,SAAS,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,KAAC,SAAS,CAAC,MAAM,mCAAoC,EACrD,KAAC,SAAS,CAAC,IAAI,kCAAiC,IACtC,IACR,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC"}

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

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "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/>.
+ */
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+import { Button, Dialog, Spotlight, SpotlightTarget, Typography, useNeedleTheme, useSpotlightContext, } from '@neo4j-ndl/react';
+import { useEffect, useState } from 'react';
+const Component = (props) => {
+    const { themeClassName } = useNeedleTheme();
+    const { setIsOpen, setActiveSpotlight } = useSpotlightContext();
+    const [isModalOpen, setIsModalOpen] = useState(props.isChromatic);
+    const targetId = `test-target-${themeClassName}`;
+    useEffect(() => {
+        if (props.isChromatic && isModalOpen) {
+            setActiveSpotlight(targetId);
+            setIsOpen(true);
+        }
+    }, [isModalOpen, setActiveSpotlight, setIsOpen, targetId, props.isChromatic]);
+    return (_jsxs("div", { className: "n-flex n-justify-center n-gap-token-10", children: [_jsx(Button, { onClick: () => setIsModalOpen(true), children: "Open Modal" }), _jsxs(Dialog, { isOpen: isModalOpen, onClose: () => setIsModalOpen(false), "aria-label": "Dialog", modalProps: { className: themeClassName }, children: [_jsx(Dialog.Header, { children: "Using Spotlight inside a modal" }), _jsxs(Dialog.Description, { className: "n-flex n-flex-col n-gap-token-8", children: [_jsx(Typography, { variant: "body-medium", children: "Make sure to set hasAnchorPortal to true for both Spotlight and SpotlightTarget when the target is in a Dialog" }), _jsxs("div", { className: "n-flex n-justify-center n-gap-token-10", children: [_jsx(Button, { onClick: () => setActiveSpotlight(targetId), children: "Activate Spotlight" }), _jsx(SpotlightTarget, { id: targetId, hasPulse: !props.isChromatic, borderRadius: 4, backgroundColor: "rgb(var(--theme-palette-neutral-bg-weak))", indicatorVariant: "border", hasAnchorPortal: true, children: _jsx(Button, { onClick: () => alert('Target button clicked'), children: "Target" }) })] })] }), _jsxs(Spotlight, { placement: "bottom-end-top-end", hasAnchorPortal: true, target: targetId, actions: [
+                            {
+                                label: 'Close',
+                                onClick: () => {
+                                    setIsOpen(false);
+                                    setActiveSpotlight(null);
+                                },
+                            },
+                        ], children: [_jsx(Spotlight.Header, { children: "This is a header" }), _jsx(Spotlight.Body, { children: "This is content" })] })] })] }));
+};
+export default Component;
+//# sourceMappingURL=spotlight-in-dialog.story.js.map

package/lib/esm/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,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EACL,MAAM,EACN,MAAM,EACN,SAAS,EACT,eAAe,EACf,UAAU,EACV,cAAc,EACd,mBAAmB,GACpB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAM5C,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAE,EAAE;IAC1C,MAAM,EAAE,cAAc,EAAE,GAAG,cAAc,EAAE,CAAC;IAC5C,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAE,GAAG,mBAAmB,EAAE,CAAC;IAEhE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,WAAW,CAAC,CAAC;IAC3E,MAAM,QAAQ,GAAG,eAAe,cAAc,EAAE,CAAC;IAEjD,SAAS,CAAC,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,eAAK,SAAS,EAAC,wCAAwC,aACrD,KAAC,MAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,IAAI,CAAC,2BAAqB,EAChE,MAAC,MAAM,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,KAAC,MAAM,CAAC,MAAM,iDAA+C,EAC7D,MAAC,MAAM,CAAC,WAAW,IAAC,SAAS,EAAC,iCAAiC,aAC7D,KAAC,UAAU,IAAC,OAAO,EAAC,aAAa,+HAGpB,EACb,eAAK,SAAS,EAAC,wCAAwC,aACrD,KAAC,MAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,QAAQ,CAAC,mCAE1C,EACT,KAAC,eAAe,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,KAAC,MAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,uBAAuB,CAAC,uBAE5C,GACO,IACd,IACa,EACrB,MAAC,SAAS,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,KAAC,SAAS,CAAC,MAAM,mCAAoC,EACrD,KAAC,SAAS,CAAC,IAAI,kCAAiC,IACtC,IACL,IACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC"}

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

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "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/>.
+ */
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+import { Button, Spotlight, SpotlightTarget, useNeedleTheme, useSpotlightContext, } from '@neo4j-ndl/react';
+import { SideNavigation } from '@neo4j-ndl/react/next';
+import { useEffect, useState } from 'react';
+const Component = (props) => {
+    const { themeClassName } = useNeedleTheme();
+    const { setActiveSpotlight, setIsOpen } = useSpotlightContext();
+    const [isSelected, setIsSelected] = useState('aura-db-instances');
+    const targetId = `test-target-${themeClassName}`;
+    const handleClick = (item) => {
+        setIsSelected(item);
+    };
+    useEffect(() => {
+        if (props.isChromatic) {
+            setActiveSpotlight(targetId);
+            setIsOpen(true);
+        }
+    }, [setActiveSpotlight, setIsOpen, targetId, props.isChromatic]);
+    return (_jsxs("div", { className: "n-h-[500px] n-flex", children: [_jsx(SideNavigation, { isExpanded: true, children: _jsxs(SideNavigation.List, { children: [_jsx(SideNavigation.CategoryHeader, { children: "AuraDB" }), _jsx(SideNavigation.NavItem, { as: "button", onClick: () => handleClick('aura-db-instances'), isSelected: isSelected === 'aura-db-instances', label: "Instances" }), _jsx(SideNavigation.NavItem, { as: "button", onClick: () => handleClick('aura-db-connect'), isSelected: isSelected === 'aura-db-connect', label: "Connect" }), _jsxs(SideNavigation.List, { children: [_jsx(SideNavigation.NavItem, { as: "button", onClick: () => handleClick('aura-db-python'), isSelected: isSelected === 'aura-db-python', label: "Python" }), _jsx(SpotlightTarget, { as: "li", id: targetId, hasPulse: !props.isChromatic, borderRadius: 4, backgroundColor: "rgb(var(--theme-palette-neutral-bg-weak))", indicatorVariant: "point", indicatorPlacement: "top-right", children: _jsx(SideNavigation.NavItem, { as: "button", onClick: () => handleClick('aura-db-javascript'), isSelected: isSelected === 'aura-db-javascript', label: "JavaScript" }) })] }), _jsx(SideNavigation.CategoryHeader, { children: "AuraDS" }), _jsxs(SideNavigation.List, { children: [_jsx(SideNavigation.NavItem, { as: "button", onClick: () => handleClick('aura-ds-instances'), isSelected: isSelected === 'aura-ds-instances', label: "Instances" }), _jsx(SideNavigation.NavItem, { as: "button", onClick: () => handleClick('aura-ds-getting-started'), isSelected: isSelected === 'aura-ds-getting-started', label: "Getting Started" })] })] }) }), _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: _jsx(Button, { onClick: () => setActiveSpotlight(targetId), children: "Activate Spotlight" }) }), _jsxs(Spotlight, { placement: "top-end-top-start", target: targetId, actions: [
+                    {
+                        label: 'Close',
+                        onClick: () => {
+                            setIsOpen(false);
+                            setActiveSpotlight(null);
+                        },
+                    },
+                ], children: [_jsx(Spotlight.Header, { children: "This is a header" }), _jsx(Spotlight.Body, { children: "This is content" })] })] }));
+};
+export default Component;
+//# sourceMappingURL=spotlight-in-side-nav.story.js.map

package/lib/esm/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/esm/spotlight/stories/spotlight-tour.story.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "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/>.
+ */
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+import { Button, Spotlight, SpotlightTarget, SpotlightTour, useNeedleTheme, useSpotlightContext, } from '@neo4j-ndl/react';
+import { FingerPrintIconOutline } from '@neo4j-ndl/react/icons';
+const Component = () => {
+    const { themeClassName } = useNeedleTheme();
+    const { setActiveSpotlight } = useSpotlightContext();
+    return (_jsxs("div", { className: "n-flex n-justify-center n-gap-token-10", children: [_jsx(Button, { fill: "outlined", onClick: () => setActiveSpotlight(`test-target-1-${themeClassName}`), children: "Start tour" }), _jsx(SpotlightTarget, { id: `test-target-1-${themeClassName}`, hasPulse: true, borderRadius: 4, children: _jsx(Button, { onClick: () => alert('Target 1 clicked'), children: "Target 1" }) }), _jsx(SpotlightTarget, { id: `test-target-2-${themeClassName}`, hasPulse: true, borderRadius: 4, children: _jsx(Button, { onClick: () => alert('Target 2 clicked'), children: "Target 2" }) }), _jsx(SpotlightTarget, { id: `test-target-3-${themeClassName}`, hasPulse: true, borderRadius: 4, children: _jsx(Button, { onClick: () => alert('Target 3 clicked'), children: "Target 3" }) }), _jsx(SpotlightTour, { onAction: (target, action) => console.info(`Action ${action} was performed in spotlight ${target}`), spotlights: [
+                    {
+                        children: (_jsxs(_Fragment, { children: [_jsx(Spotlight.Label, { children: "NEW" }), _jsx(Spotlight.Header, { children: "This is a header" }), _jsx(Spotlight.Body, { children: "This is content" })] })),
+                        target: `test-target-1-${themeClassName}`,
+                    },
+                    {
+                        children: (_jsxs(_Fragment, { children: [_jsx(Spotlight.IconWrapper, { children: _jsx(FingerPrintIconOutline, {}) }), _jsx(Spotlight.Header, { children: "This is a header" }), _jsx(Spotlight.Body, { children: "This is content" })] })),
+                        target: `test-target-2-${themeClassName}`,
+                    },
+                    {
+                        children: (_jsxs(_Fragment, { children: [_jsx(Spotlight.Image, { src: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjY2NjIi8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZmlsbD0iIzMzMyIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZHk9Ii4zZW0iPkV4YW1wbGUgSW1hZ2U8L3RleHQ+PC9zdmc+", alt: "example image" }), _jsx(Spotlight.Body, { children: "This is content" })] })),
+                        target: `test-target-3-${themeClassName}`,
+                    },
+                ] })] }));
+};
+export default Component;
+//# sourceMappingURL=spotlight-tour.story.js.map

package/lib/esm/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,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EACL,MAAM,EACN,SAAS,EACT,eAAe,EACf,aAAa,EACb,cAAc,EACd,mBAAmB,GACpB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAEhE,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,EAAE,cAAc,EAAE,GAAG,cAAc,EAAE,CAAC;IAC5C,MAAM,EAAE,kBAAkB,EAAE,GAAG,mBAAmB,EAAE,CAAC;IAErD,OAAO,CACL,eAAK,SAAS,EAAC,wCAAwC,aACrD,KAAC,MAAM,IACL,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,iBAAiB,cAAc,EAAE,CAAC,2BAG7D,EACT,KAAC,eAAe,IACd,EAAE,EAAE,iBAAiB,cAAc,EAAE,EACrC,QAAQ,QACR,YAAY,EAAE,CAAC,YAEf,KAAC,MAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,kBAAkB,CAAC,yBAAmB,GACnD,EAClB,KAAC,eAAe,IACd,EAAE,EAAE,iBAAiB,cAAc,EAAE,EACrC,QAAQ,QACR,YAAY,EAAE,CAAC,YAEf,KAAC,MAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,kBAAkB,CAAC,yBAAmB,GACnD,EAClB,KAAC,eAAe,IACd,EAAE,EAAE,iBAAiB,cAAc,EAAE,EACrC,QAAQ,QACR,YAAY,EAAE,CAAC,YAEf,KAAC,MAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,kBAAkB,CAAC,yBAAmB,GACnD,EAClB,KAAC,aAAa,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,8BACE,KAAC,SAAS,CAAC,KAAK,sBAAsB,EACtC,KAAC,SAAS,CAAC,MAAM,mCAAoC,EACrD,KAAC,SAAS,CAAC,IAAI,kCAAiC,IAC/C,CACJ;wBACD,MAAM,EAAE,iBAAiB,cAAc,EAAE;qBAC1C;oBACD;wBACE,QAAQ,EAAE,CACR,8BACE,KAAC,SAAS,CAAC,WAAW,cACpB,KAAC,sBAAsB,KAAG,GACJ,EACxB,KAAC,SAAS,CAAC,MAAM,mCAAoC,EACrD,KAAC,SAAS,CAAC,IAAI,kCAAiC,IAC/C,CACJ;wBACD,MAAM,EAAE,iBAAiB,cAAc,EAAE;qBAC1C;oBACD;wBACE,QAAQ,EAAE,CACR,8BACE,KAAC,SAAS,CAAC,KAAK,IACd,GAAG,EAAC,wVAAwV,EAC5V,GAAG,EAAC,eAAe,GACnB,EACF,KAAC,SAAS,CAAC,IAAI,kCAAiC,IAC/C,CACJ;wBACD,MAAM,EAAE,iBAAiB,cAAc,EAAE;qBAC1C;iBACF,GACD,IACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC"}

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

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "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/>.
+ */
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+import { Button, Spotlight, SpotlightTarget, useNeedleTheme, useSpotlightContext, } from '@neo4j-ndl/react';
+import { FingerPrintIconOutline } from '@neo4j-ndl/react/icons';
+import { useEffect } from 'react';
+const Component = (props) => {
+    const { themeClassName } = useNeedleTheme();
+    const { setIsOpen, setActiveSpotlight } = useSpotlightContext();
+    const targetId = `test-target-${themeClassName}`;
+    useEffect(() => {
+        if (props.isChromatic) {
+            setActiveSpotlight(targetId);
+            setIsOpen(true);
+        }
+    }, [setActiveSpotlight, setIsOpen, targetId, props.isChromatic]);
+    return (_jsxs("div", { className: "n-flex n-justify-center n-gap-token-10", children: [_jsx(Button, { onClick: () => setActiveSpotlight(targetId), children: "Activate Spotlight" }), _jsx(SpotlightTarget, { id: targetId, hasPulse: !props.isChromatic, borderRadius: 4, backgroundColor: "rgb(var(--theme-palette-neutral-bg-weak))", indicatorVariant: "border", children: _jsx(Button, { onClick: () => alert('Target button clicked'), fill: "text", children: "Target" }) }), _jsxs(Spotlight, { placement: "bottom-end-top-end", target: targetId, actions: [
+                    {
+                        label: 'Close',
+                        onClick: () => {
+                            setIsOpen(false);
+                            setActiveSpotlight(null);
+                        },
+                    },
+                ], children: [_jsx(Spotlight.IconWrapper, { children: _jsx(FingerPrintIconOutline, {}) }), _jsx(Spotlight.Header, { children: "This is a header" }), _jsx(Spotlight.Body, { children: "This is content" })] })] }));
+};
+export default Component;
+//# sourceMappingURL=spotlight-with-icon.story.js.map

package/lib/esm/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,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EACL,MAAM,EACN,SAAS,EACT,eAAe,EACf,cAAc,EACd,mBAAmB,GACpB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAChE,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMlC,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAE,EAAE;IAC1C,MAAM,EAAE,cAAc,EAAE,GAAG,cAAc,EAAE,CAAC;IAC5C,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAE,GAAG,mBAAmB,EAAE,CAAC;IAEhE,MAAM,QAAQ,GAAG,eAAe,cAAc,EAAE,CAAC;IAEjD,SAAS,CAAC,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,eAAK,SAAS,EAAC,wCAAwC,aACrD,KAAC,MAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,QAAQ,CAAC,mCAE1C,EACT,KAAC,eAAe,IACd,EAAE,EAAE,QAAQ,EACZ,QAAQ,EAAE,CAAC,KAAK,CAAC,WAAW,EAC5B,YAAY,EAAE,CAAC,EACf,eAAe,EAAC,2CAA2C,EAC3D,gBAAgB,EAAC,QAAQ,YAEzB,KAAC,MAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,uBAAuB,CAAC,EAAE,IAAI,EAAC,MAAM,uBAEzD,GACO,EAClB,MAAC,SAAS,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,KAAC,SAAS,CAAC,WAAW,cACpB,KAAC,sBAAsB,KAAG,GACJ,EACxB,KAAC,SAAS,CAAC,MAAM,mCAAoC,EACrD,KAAC,SAAS,CAAC,IAAI,kCAAiC,IACtC,IACR,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC"}

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

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "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/>.
+ */
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+import { Button, Spotlight, SpotlightTarget, useNeedleTheme, useSpotlightContext, } from '@neo4j-ndl/react';
+import { useEffect } from 'react';
+const Component = (props) => {
+    const { themeClassName } = useNeedleTheme();
+    const { setIsOpen, setActiveSpotlight } = useSpotlightContext();
+    const targetId = `test-target-${themeClassName}`;
+    useEffect(() => {
+        if (props.isChromatic) {
+            setActiveSpotlight(targetId);
+            setIsOpen(true);
+        }
+    }, [setActiveSpotlight, setIsOpen, targetId, props.isChromatic]);
+    return (_jsxs("div", { className: "n-flex n-justify-center n-gap-token-10", children: [_jsx(Button, { onClick: () => setActiveSpotlight(targetId), children: "Activate Spotlight" }), _jsx(SpotlightTarget, { id: targetId, hasPulse: !props.isChromatic, borderRadius: 4, backgroundColor: "rgb(var(--theme-palette-neutral-bg-weak))", children: _jsx(Button, { onClick: () => alert('Target button clicked'), fill: "text", children: "Target" }) }), _jsxs(Spotlight, { placement: "bottom-end-top-end", target: targetId, actions: [
+                    {
+                        label: 'Close',
+                        onClick: () => {
+                            setIsOpen(false);
+                            setActiveSpotlight(null);
+                        },
+                    },
+                ], children: [_jsx(Spotlight.Image, { src: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjY2NjIi8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZmlsbD0iIzMzMyIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZHk9Ii4zZW0iPkV4YW1wbGUgSW1hZ2U8L3RleHQ+PC9zdmc+", alt: "example image" }), _jsx(Spotlight.Header, { children: "This is a header" }), _jsx(Spotlight.Body, { children: "This is content" })] })] }));
+};
+export default Component;
+//# sourceMappingURL=spotlight-with-image.story.js.map

package/lib/esm/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,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EACL,MAAM,EACN,SAAS,EACT,eAAe,EACf,cAAc,EACd,mBAAmB,GACpB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMlC,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAE,EAAE;IAC1C,MAAM,EAAE,cAAc,EAAE,GAAG,cAAc,EAAE,CAAC;IAC5C,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAE,GAAG,mBAAmB,EAAE,CAAC;IAEhE,MAAM,QAAQ,GAAG,eAAe,cAAc,EAAE,CAAC;IAEjD,SAAS,CAAC,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,eAAK,SAAS,EAAC,wCAAwC,aACrD,KAAC,MAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,QAAQ,CAAC,mCAE1C,EACT,KAAC,eAAe,IACd,EAAE,EAAE,QAAQ,EACZ,QAAQ,EAAE,CAAC,KAAK,CAAC,WAAW,EAC5B,YAAY,EAAE,CAAC,EACf,eAAe,EAAC,2CAA2C,YAE3D,KAAC,MAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,uBAAuB,CAAC,EAAE,IAAI,EAAC,MAAM,uBAEzD,GACO,EAClB,MAAC,SAAS,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,KAAC,SAAS,CAAC,KAAK,IACd,GAAG,EAAC,wVAAwV,EAC5V,GAAG,EAAC,eAAe,GACnB,EACF,KAAC,SAAS,CAAC,MAAM,mCAAoC,EACrD,KAAC,SAAS,CAAC,IAAI,kCAAiC,IACtC,IACR,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC"}

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

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "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/>.
+ */
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+import { Button, Spotlight, SpotlightTarget, useNeedleTheme, useSpotlightContext, } from '@neo4j-ndl/react';
+import { useEffect } from 'react';
+const Component = (props) => {
+    const { themeClassName } = useNeedleTheme();
+    const { setIsOpen, setActiveSpotlight } = useSpotlightContext();
+    const targetId = `test-target-${themeClassName}`;
+    useEffect(() => {
+        if (props.isChromatic) {
+            setActiveSpotlight(targetId);
+            setIsOpen(true);
+        }
+    }, [setActiveSpotlight, setIsOpen, targetId, props.isChromatic]);
+    return (_jsxs("div", { className: "n-flex n-justify-center n-gap-token-10", children: [_jsx(Button, { onClick: () => setActiveSpotlight(targetId), children: "Activate Spotlight" }), _jsx(SpotlightTarget, { id: targetId, hasPulse: !props.isChromatic, borderRadius: 4, backgroundColor: "rgb(var(--theme-palette-neutral-bg-weak))", indicatorVariant: "border", children: _jsx(Button, { onClick: () => alert('Target button clicked'), fill: "text", children: "Target" }) }), _jsxs(Spotlight, { placement: "bottom-end-top-end", target: targetId, actions: [
+                    {
+                        label: 'Close',
+                        onClick: () => {
+                            setIsOpen(false);
+                            setActiveSpotlight(null);
+                        },
+                    },
+                ], children: [_jsx(Spotlight.Label, { children: "NEW" }), _jsx(Spotlight.Header, { children: "This is a header" }), _jsx(Spotlight.Body, { children: "This is content" })] })] }));
+};
+export default Component;
+//# sourceMappingURL=spotlight-with-label.story.js.map

package/lib/esm/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,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EACL,MAAM,EACN,SAAS,EACT,eAAe,EACf,cAAc,EACd,mBAAmB,GACpB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMlC,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAE,EAAE;IAC1C,MAAM,EAAE,cAAc,EAAE,GAAG,cAAc,EAAE,CAAC;IAC5C,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAE,GAAG,mBAAmB,EAAE,CAAC;IAEhE,MAAM,QAAQ,GAAG,eAAe,cAAc,EAAE,CAAC;IAEjD,SAAS,CAAC,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,eAAK,SAAS,EAAC,wCAAwC,aACrD,KAAC,MAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,QAAQ,CAAC,mCAE1C,EACT,KAAC,eAAe,IACd,EAAE,EAAE,QAAQ,EACZ,QAAQ,EAAE,CAAC,KAAK,CAAC,WAAW,EAC5B,YAAY,EAAE,CAAC,EACf,eAAe,EAAC,2CAA2C,EAC3D,gBAAgB,EAAC,QAAQ,YAEzB,KAAC,MAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,uBAAuB,CAAC,EAAE,IAAI,EAAC,MAAM,uBAEzD,GACO,EAClB,MAAC,SAAS,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,KAAC,SAAS,CAAC,KAAK,sBAAsB,EACtC,KAAC,SAAS,CAAC,MAAM,mCAAoC,EACrD,KAAC,SAAS,CAAC,IAAI,kCAAiC,IACtC,IACR,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC"}

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

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "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/>.
+ */
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+import { Button, Spotlight, SpotlightTarget, useNeedleTheme, useSpotlightContext, } from '@neo4j-ndl/react';
+import { useEffect } from 'react';
+const Component = (props) => {
+    const { themeClassName } = useNeedleTheme();
+    const { setIsOpen, setActiveSpotlight } = useSpotlightContext();
+    const targetId = `test-target-${themeClassName}`;
+    useEffect(() => {
+        if (props.isChromatic) {
+            setActiveSpotlight(targetId);
+            setIsOpen(true);
+        }
+    }, [setActiveSpotlight, setIsOpen, targetId, props.isChromatic]);
+    return (_jsxs("div", { className: "n-flex n-justify-center n-gap-token-10", children: [_jsx(Button, { onClick: () => setActiveSpotlight(targetId), children: "Activate Spotlight" }), _jsx(SpotlightTarget, { id: targetId, hasPulse: !props.isChromatic, borderRadius: 4, backgroundColor: "rgb(var(--theme-palette-neutral-bg-weak))", indicatorVariant: "point", indicatorPlacement: "top-right", children: _jsx(Button, { onClick: () => alert('Target button clicked'), children: "Target" }) }), _jsxs(Spotlight, { placement: "bottom-end-top-end", target: targetId, actions: [
+                    {
+                        label: 'Close',
+                        onClick: () => {
+                            setIsOpen(false);
+                            setActiveSpotlight(null);
+                        },
+                    },
+                ], children: [_jsx(Spotlight.Header, { children: "This is a header" }), _jsx(Spotlight.Body, { children: "This is content" })] })] }));
+};
+export default Component;
+//# sourceMappingURL=spotlight-with-pointer.story.js.map

package/lib/esm/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,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EACL,MAAM,EACN,SAAS,EACT,eAAe,EACf,cAAc,EACd,mBAAmB,GACpB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMlC,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAE,EAAE;IAC1C,MAAM,EAAE,cAAc,EAAE,GAAG,cAAc,EAAE,CAAC;IAC5C,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAE,GAAG,mBAAmB,EAAE,CAAC;IAEhE,MAAM,QAAQ,GAAG,eAAe,cAAc,EAAE,CAAC;IAEjD,SAAS,CAAC,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,eAAK,SAAS,EAAC,wCAAwC,aACrD,KAAC,MAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,QAAQ,CAAC,mCAE1C,EACT,KAAC,eAAe,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,KAAC,MAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,uBAAuB,CAAC,uBAAiB,GACtD,EAClB,MAAC,SAAS,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,KAAC,SAAS,CAAC,MAAM,mCAAoC,EACrD,KAAC,SAAS,CAAC,IAAI,kCAAiC,IACtC,IACR,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/esm/spotlight/stories/spotlight.stories.js

@@ -0,0 +1,157 @@
+/**
+ *
+ *  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/>.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import isChromatic from 'chromatic';
+import { Spotlight, SpotlightProvider } from '../../index';
+import { SpotlightFixedPositioning, SpotlightFixedPositioningSrc, SpotlightInDialog, SpotlightInDialogSrc, SpotlightInSideNav, SpotlightInSideNavSrc, SpotlightTour, SpotlightTourSrc, SpotlightWithIcon, SpotlightWithIconSrc, SpotlightWithImage, SpotlightWithImageSrc, SpotlightWithLabel, SpotlightWithLabelSrc, SpotlightWithPointer, SpotlightWithPointerSrc, } from './';
+const componentMeta = {
+    component: Spotlight,
+    decorators: [
+        (StoryFn) => (_jsx(SpotlightProvider, { hasOverlay: true, children: _jsx(StoryFn, {}) })),
+    ],
+    id: 'components-spotlight',
+    parameters: {
+        controls: { disable: true },
+    },
+    tags: ['docsPage'],
+    title: 'Components/Spotlight',
+};
+export default componentMeta;
+export const WithLabel = {
+    args: {
+        isChromatic: isChromatic(),
+    },
+    parameters: {
+        docs: {
+            source: {
+                code: SpotlightWithLabelSrc,
+                language: 'tsx',
+                type: 'code',
+            },
+        },
+    },
+    render: SpotlightWithLabel,
+};
+export const WithIcon = {
+    args: {
+        isChromatic: isChromatic(),
+    },
+    parameters: {
+        docs: {
+            source: {
+                code: SpotlightWithIconSrc,
+                language: 'tsx',
+                type: 'code',
+            },
+        },
+    },
+    render: SpotlightWithIcon,
+};
+export const WithImage = {
+    args: {
+        isChromatic: isChromatic(),
+    },
+    parameters: {
+        docs: {
+            source: {
+                code: SpotlightWithImageSrc,
+                language: 'tsx',
+                type: 'code',
+            },
+        },
+    },
+    render: SpotlightWithImage,
+};
+export const WithPointerIndicator = {
+    args: {
+        isChromatic: isChromatic(),
+    },
+    parameters: {
+        docs: {
+            source: {
+                code: SpotlightWithPointerSrc,
+                language: 'tsx',
+                type: 'code',
+            },
+        },
+    },
+    render: SpotlightWithPointer,
+};
+export const Tour = {
+    args: {},
+    parameters: {
+        docs: {
+            source: {
+                code: SpotlightTourSrc,
+                language: 'tsx',
+                type: 'code',
+            },
+        },
+    },
+    render: SpotlightTour,
+};
+export const InSideNav = {
+    args: {
+        isChromatic: isChromatic(),
+    },
+    parameters: {
+        docs: {
+            source: {
+                code: SpotlightInSideNavSrc,
+                language: 'tsx',
+                type: 'code',
+            },
+        },
+    },
+    render: SpotlightInSideNav,
+};
+export const TargetInDialog = {
+    args: {
+        isChromatic: isChromatic(),
+    },
+    parameters: {
+        docs: {
+            source: {
+                code: SpotlightInDialogSrc,
+                language: 'tsx',
+                type: 'code',
+            },
+        },
+    },
+    render: SpotlightInDialog,
+};
+export const FixedPositioning = {
+    args: {
+        isChromatic: isChromatic(),
+    },
+    parameters: {
+        docs: {
+            source: {
+                code: SpotlightFixedPositioningSrc,
+                language: 'tsx',
+                type: 'code',
+            },
+        },
+    },
+    render: SpotlightFixedPositioning,
+};
+//# sourceMappingURL=spotlight.stories.js.map

package/lib/esm/spotlight/stories/spotlight.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spotlight.stories.js","sourceRoot":"","sources":["../../../../src/spotlight/stories/spotlight.stories.tsx"],"names":[],"mappings":";AAqBA,OAAO,WAAW,MAAM,WAAW,CAAC;AAEpC,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAC3D,OAAO,EACL,yBAAyB,EACzB,4BAA4B,EAC5B,iBAAiB,EACjB,oBAAoB,EACpB,kBAAkB,EAClB,qBAAqB,EACrB,aAAa,EACb,gBAAgB,EAChB,iBAAiB,EACjB,oBAAoB,EACpB,kBAAkB,EAClB,qBAAqB,EACrB,kBAAkB,EAClB,qBAAqB,EACrB,oBAAoB,EACpB,uBAAuB,GACxB,MAAM,IAAI,CAAC;AAMZ,MAAM,aAAa,GAAyB;IAC1C,SAAS,EAAE,SAAS;IACpB,UAAU,EAAE;QACV,CAAC,OAAO,EAAE,EAAE,CAAC,CACX,KAAC,iBAAiB,IAAC,UAAU,kBAC3B,KAAC,OAAO,KAAG,GACO,CACrB;KACF;IACD,EAAE,EAAE,sBAAsB;IAC1B,UAAU,EAAE;QACV,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;KAC5B;IACD,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,KAAK,EAAE,sBAAsB;CACf,CAAC;AAEjB,eAAe,aAAa,CAAC;AAG7B,MAAM,CAAC,MAAM,SAAS,GAAU;IAC9B,IAAI,EAAE;QACJ,WAAW,EAAE,WAAW,EAAE;KAC3B;IACD,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,IAAI,EAAE,qBAAqB;gBAC3B,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE,MAAM;aACb;SACF;KACF;IACD,MAAM,EAAE,kBAAkB;CAC3B,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,IAAI,EAAE;QACJ,WAAW,EAAE,WAAW,EAAE;KAC3B;IACD,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,IAAI,EAAE,oBAAoB;gBAC1B,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE,MAAM;aACb;SACF;KACF;IACD,MAAM,EAAE,iBAAiB;CAC1B,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU;IAC9B,IAAI,EAAE;QACJ,WAAW,EAAE,WAAW,EAAE;KAC3B;IACD,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,IAAI,EAAE,qBAAqB;gBAC3B,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE,MAAM;aACb;SACF;KACF;IACD,MAAM,EAAE,kBAAkB;CAC3B,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAU;IACzC,IAAI,EAAE;QACJ,WAAW,EAAE,WAAW,EAAE;KAC3B;IACD,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,IAAI,EAAE,uBAAuB;gBAC7B,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE,MAAM;aACb;SACF;KACF;IACD,MAAM,EAAE,oBAAoB;CAC7B,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAU;IACzB,IAAI,EAAE,EAAE;IACR,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,IAAI,EAAE,gBAAgB;gBACtB,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE,MAAM;aACb;SACF;KACF;IACD,MAAM,EAAE,aAAa;CACtB,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU;IAC9B,IAAI,EAAE;QACJ,WAAW,EAAE,WAAW,EAAE;KAC3B;IACD,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,IAAI,EAAE,qBAAqB;gBAC3B,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE,MAAM;aACb;SACF;KACF;IACD,MAAM,EAAE,kBAAkB;CAC3B,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAU;IACnC,IAAI,EAAE;QACJ,WAAW,EAAE,WAAW,EAAE;KAC3B;IACD,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,IAAI,EAAE,oBAAoB;gBAC1B,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE,MAAM;aACb;SACF;KACF;IACD,MAAM,EAAE,iBAAiB;CAC1B,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAU;IACrC,IAAI,EAAE;QACJ,WAAW,EAAE,WAAW,EAAE;KAC3B;IACD,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,IAAI,EAAE,4BAA4B;gBAClC,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE,MAAM;aACb;SACF;KACF;IACD,MAAM,EAAE,yBAAyB;CAClC,CAAC"}

package/lib/types/progress-bar/stories/index.d.ts

@@ -0,0 +1,26 @@
+/**
+ *
+ *  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/>.
+ */
+export { default as ProgressBarHeading } from './progress-bar-heading.story';
+export { default as ProgressBarDefault } from './progress-bar-default.story';
+export { default as ProgressBarSizes } from './progress-bar-sizes.story';
+export declare const ProgressBarDefaultSource: string;
+export declare const ProgressBarHeadingSource: string;
+export declare const ProgressBarSizesSource: string;