@neo4j-ndl/react 4.0.0-alpha.0.c6243ce → 4.0.0

package/lib/esm/spotlight/SpotlightTour.js

@@ -32,11 +32,12 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback } from 'react';
+import { OutlinedButton } from '../outlined-button';
+import { TextButton } from '../text-button';
 import { Spotlight } from './Spotlight';
 import { useSpotlightContext } from './SpotlightProvider';
-export const SpotlightTour = (props) => {
+export const SpotlightTour = ({ spotlights, dismissButtonLabel = 'Dismiss', backButtonLabel = 'Back', nextButtonLabel = 'Next', closeButtonLabel = 'Close', onAction, }) => {
     const { setActiveSpotlight, setIsOpen } = useSpotlightContext();
-    const { spotlights, dismissButtonText = 'Dismiss', backButtonText = 'Back', nextButtonText = 'Next', closeButtonText = 'Close', onAction, } = props;
     const next = useCallback((index) => {
         onAction === null || onAction === void 0 ? void 0 : onAction(spotlights[index].target, 'next');
         setActiveSpotlight(spotlights[index + 1].target);
@@ -55,8 +56,8 @@ export const SpotlightTour = (props) => {
         setActiveSpotlight(null);
         setIsOpen(false);
     }, [onAction, spotlights, setActiveSpotlight, setIsOpen]);
-    const getActions = useCallback((actions, index) => {
-        if (actions === null || actions === void 0 ? void 0 : actions.length) {
+    const getActions = useCallback((index, actions) => {
+        if (actions !== undefined && actions !== null) {
             return actions;
         }
         const isFirst = index === 0;
@@ -64,58 +65,36 @@ export const SpotlightTour = (props) => {
         const hasMultiple = spotlights.length > 1;
         const newActions = [];
         if (!isLast && hasMultiple) {
-            newActions.push({
-                label: dismissButtonText,
-                fill: 'text',
-                onClick: () => dismiss(index),
-            });
+            newActions.push(_jsx(TextButton, { onClick: () => dismiss(index), children: dismissButtonLabel }));
         }
         if (!isFirst && hasMultiple) {
-            newActions.push({
-                label: backButtonText,
-                fill: 'text',
-                onClick: () => back(index),
-            });
+            newActions.push(_jsx(TextButton, { onClick: () => back(index), children: backButtonLabel }));
         }
         if (isLast) {
-            newActions.push({
-                label: closeButtonText,
-                fill: 'outlined',
-                onClick: () => close(index),
-            });
+            newActions.push(_jsx(OutlinedButton, { onClick: () => close(index), children: closeButtonLabel }));
         }
         else {
-            newActions.push({
-                label: nextButtonText,
-                fill: 'outlined',
-                onClick: () => next(index),
-            });
+            newActions.push(_jsx(OutlinedButton, { onClick: () => next(index), children: nextButtonLabel }));
         }
         return newActions;
     }, [
         spotlights,
-        dismissButtonText,
+        dismissButtonLabel,
         dismiss,
-        backButtonText,
+        backButtonLabel,
         back,
-        closeButtonText,
+        closeButtonLabel,
         close,
-        nextButtonText,
+        nextButtonLabel,
         next,
     ]);
-    const getBeforeActions = useCallback((beforeActions, index) => {
-        if (beforeActions) {
+    const getBeforeActions = useCallback((index, beforeActions) => {
+        if (beforeActions !== undefined && beforeActions !== null) {
             return beforeActions;
         }
         return spotlights.length > 1 ? index + 1 + '/' + spotlights.length : null;
     }, [spotlights]);
-    const getInitialFocus = useCallback((initialFocus, actions) => {
-        if (initialFocus !== undefined) {
-            return initialFocus;
-        }
-        return actions.length - 1;
-    }, []);
-    const getOnClose = useCallback((onClose, index) => {
+    const getOnClose = useCallback((index, onClose) => {
         if (onClose) {
             return onClose;
         }
@@ -123,7 +102,7 @@ export const SpotlightTour = (props) => {
             onAction === null || onAction === void 0 ? void 0 : onAction(spotlights[index].target, reason);
         };
     }, [onAction, spotlights]);
-    const getOnOpen = useCallback((onOpen, index) => {
+    const getOnOpen = useCallback((index, onOpen) => {
         if (onOpen) {
             return onOpen;
         }
@@ -133,12 +112,11 @@ export const SpotlightTour = (props) => {
     }, [onAction, spotlights]);
     return (_jsx(_Fragment, { children: spotlights.map((spotlight, index) => {
             const { actions, beforeActions, initialFocus, onClose, onOpen } = spotlight, restSpotlight = __rest(spotlight, ["actions", "beforeActions", "initialFocus", "onClose", "onOpen"]);
-            const newActions = getActions(actions, index);
-            const newBeforeActions = getBeforeActions(beforeActions, index);
-            const newInitialFocus = getInitialFocus(initialFocus, newActions);
-            const newOnClose = getOnClose(onClose, index);
-            const newOnOpen = getOnOpen(onOpen, index);
-            return (_jsx(Spotlight, Object.assign({}, restSpotlight, { actions: newActions, beforeActions: newBeforeActions, initialFocus: newInitialFocus, onClose: newOnClose, onOpen: newOnOpen }), index));
+            const newActions = getActions(index, actions);
+            const newBeforeActions = getBeforeActions(index, beforeActions);
+            const newOnClose = getOnClose(index, onClose);
+            const newOnOpen = getOnOpen(index, onOpen);
+            return (_jsx(Spotlight, Object.assign({}, restSpotlight, { actions: newActions, beforeActions: newBeforeActions, initialFocus: initialFocus, onClose: newOnClose, onOpen: newOnOpen }), index));
         }) }));
 };
 //# sourceMappingURL=SpotlightTour.js.map

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

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

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

@@ -26,20 +26,24 @@ export { default as SpotlightTour } from './spotlight-tour.story';
 export { default as SpotlightInSideNav } from './spotlight-in-side-nav.story';
 export { default as SpotlightInDialog } from './spotlight-in-dialog.story';
 export { default as SpotlightFixedPositioning } from './spotlight-fixed-positioning.story';
+export { default as SpotlightOnTabs } from './spotlight-on-tabs.story';
+import { removeLicenseHeader } from '@neo4j-ndl/react/_common/export-stories-utils';
 import SpotlightFixedPositioningSrcRaw from './spotlight-fixed-positioning.story?raw';
 import SpotlightInDialogSrcRaw from './spotlight-in-dialog.story?raw';
 import SpotlightInSideNavSrcRaw from './spotlight-in-side-nav.story?raw';
+import SpotlightOnTabsSrcRaw from './spotlight-on-tabs.story?raw';
 import SpotlightTourSrcRaw from './spotlight-tour.story?raw';
 import SpotlightWithIconSrcRaw from './spotlight-with-icon.story?raw';
 import SpotlightWithImageSrcRaw from './spotlight-with-image.story?raw';
 import SpotlightWithLabelSrcRaw from './spotlight-with-label.story?raw';
 import SpotlightWithPointerSrcRaw from './spotlight-with-pointer.story?raw';
-export const SpotlightWithLabelSrc = SpotlightWithLabelSrcRaw.replace(/^\/\*[\s\S]*?\*\/\s*/, '');
-export const SpotlightWithIconSrc = SpotlightWithIconSrcRaw.replace(/^\/\*[\s\S]*?\*\/\s*/, '');
-export const SpotlightWithImageSrc = SpotlightWithImageSrcRaw.replace(/^\/\*[\s\S]*?\*\/\s*/, '');
-export const SpotlightWithPointerSrc = SpotlightWithPointerSrcRaw.replace(/^\/\*[\s\S]*?\*\/\s*/, '');
-export const SpotlightTourSrc = SpotlightTourSrcRaw.replace(/^\/\*[\s\S]*?\*\/\s*/, '');
-export const SpotlightInSideNavSrc = SpotlightInSideNavSrcRaw.replace(/^\/\*[\s\S]*?\*\/\s*/, '');
-export const SpotlightInDialogSrc = SpotlightInDialogSrcRaw.replace(/^\/\*[\s\S]*?\*\/\s*/, '');
-export const SpotlightFixedPositioningSrc = SpotlightFixedPositioningSrcRaw.replace(/^\/\*[\s\S]*?\*\/\s*/, '');
+export const SpotlightWithLabelSrc = removeLicenseHeader(SpotlightWithLabelSrcRaw);
+export const SpotlightWithIconSrc = removeLicenseHeader(SpotlightWithIconSrcRaw);
+export const SpotlightWithImageSrc = removeLicenseHeader(SpotlightWithImageSrcRaw);
+export const SpotlightWithPointerSrc = removeLicenseHeader(SpotlightWithPointerSrcRaw);
+export const SpotlightTourSrc = removeLicenseHeader(SpotlightTourSrcRaw);
+export const SpotlightInSideNavSrc = removeLicenseHeader(SpotlightInSideNavSrcRaw);
+export const SpotlightInDialogSrc = removeLicenseHeader(SpotlightInDialogSrcRaw);
+export const SpotlightFixedPositioningSrc = removeLicenseHeader(SpotlightFixedPositioningSrcRaw);
+export const SpotlightOnTabsSrc = removeLicenseHeader(SpotlightOnTabsSrcRaw);
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/spotlight/stories/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,8BAA8B,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,8BAA8B,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AACjF,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AAC9E,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,yBAAyB,EAAE,MAAM,qCAAqC,CAAC;AAE3F,OAAO,+BAA+B,MAAM,yCAAyC,CAAC;AACtF,OAAO,uBAAuB,MAAM,iCAAiC,CAAC;AACtE,OAAO,wBAAwB,MAAM,mCAAmC,CAAC;AACzE,OAAO,mBAAmB,MAAM,4BAA4B,CAAC;AAC7D,OAAO,uBAAuB,MAAM,iCAAiC,CAAC;AACtE,OAAO,wBAAwB,MAAM,kCAAkC,CAAC;AACxE,OAAO,wBAAwB,MAAM,kCAAkC,CAAC;AACxE,OAAO,0BAA0B,MAAM,oCAAoC,CAAC;AAE5E,MAAM,CAAC,MAAM,qBAAqB,GAAG,wBAAwB,CAAC,OAAO,CACnE,sBAAsB,EACtB,EAAE,CACH,CAAC;AACF,MAAM,CAAC,MAAM,oBAAoB,GAAG,uBAAuB,CAAC,OAAO,CACjE,sBAAsB,EACtB,EAAE,CACH,CAAC;AACF,MAAM,CAAC,MAAM,qBAAqB,GAAG,wBAAwB,CAAC,OAAO,CACnE,sBAAsB,EACtB,EAAE,CACH,CAAC;AACF,MAAM,CAAC,MAAM,uBAAuB,GAAG,0BAA0B,CAAC,OAAO,CACvE,sBAAsB,EACtB,EAAE,CACH,CAAC;AACF,MAAM,CAAC,MAAM,gBAAgB,GAAG,mBAAmB,CAAC,OAAO,CACzD,sBAAsB,EACtB,EAAE,CACH,CAAC;AACF,MAAM,CAAC,MAAM,qBAAqB,GAAG,wBAAwB,CAAC,OAAO,CACnE,sBAAsB,EACtB,EAAE,CACH,CAAC;AACF,MAAM,CAAC,MAAM,oBAAoB,GAAG,uBAAuB,CAAC,OAAO,CACjE,sBAAsB,EACtB,EAAE,CACH,CAAC;AACF,MAAM,CAAC,MAAM,4BAA4B,GACvC,+BAA+B,CAAC,OAAO,CAAC,sBAAsB,EAAE,EAAE,CAAC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/spotlight/stories/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,8BAA8B,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,8BAA8B,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AACjF,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AAC9E,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,yBAAyB,EAAE,MAAM,qCAAqC,CAAC;AAC3F,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAEvE,OAAO,EAAE,mBAAmB,EAAE,MAAM,+CAA+C,CAAC;AAEpF,OAAO,+BAA+B,MAAM,yCAAyC,CAAC;AACtF,OAAO,uBAAuB,MAAM,iCAAiC,CAAC;AACtE,OAAO,wBAAwB,MAAM,mCAAmC,CAAC;AACzE,OAAO,qBAAqB,MAAM,+BAA+B,CAAC;AAClE,OAAO,mBAAmB,MAAM,4BAA4B,CAAC;AAC7D,OAAO,uBAAuB,MAAM,iCAAiC,CAAC;AACtE,OAAO,wBAAwB,MAAM,kCAAkC,CAAC;AACxE,OAAO,wBAAwB,MAAM,kCAAkC,CAAC;AACxE,OAAO,0BAA0B,MAAM,oCAAoC,CAAC;AAE5E,MAAM,CAAC,MAAM,qBAAqB,GAAG,mBAAmB,CACtD,wBAAwB,CACzB,CAAC;AACF,MAAM,CAAC,MAAM,oBAAoB,GAAG,mBAAmB,CACrD,uBAAuB,CACxB,CAAC;AACF,MAAM,CAAC,MAAM,qBAAqB,GAAG,mBAAmB,CACtD,wBAAwB,CACzB,CAAC;AACF,MAAM,CAAC,MAAM,uBAAuB,GAAG,mBAAmB,CACxD,0BAA0B,CAC3B,CAAC;AACF,MAAM,CAAC,MAAM,gBAAgB,GAAG,mBAAmB,CAAC,mBAAmB,CAAC,CAAC;AACzE,MAAM,CAAC,MAAM,qBAAqB,GAAG,mBAAmB,CACtD,wBAAwB,CACzB,CAAC;AACF,MAAM,CAAC,MAAM,oBAAoB,GAAG,mBAAmB,CACrD,uBAAuB,CACxB,CAAC;AACF,MAAM,CAAC,MAAM,4BAA4B,GAAG,mBAAmB,CAC7D,+BAA+B,CAChC,CAAC;AACF,MAAM,CAAC,MAAM,kBAAkB,GAAG,mBAAmB,CAAC,qBAAqB,CAAC,CAAC"}

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

@@ -20,7 +20,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
-import { FilledButton, Spotlight, SpotlightTarget, useNeedleTheme, useSpotlightContext, } from '@neo4j-ndl/react';
+import { FilledButton, OutlinedButton, Spotlight, SpotlightTarget, useNeedleTheme, useSpotlightContext, } from '@neo4j-ndl/react';
 import { useEffect } from 'react';
 const Component = (props) => {
     const { themeClassName } = useNeedleTheme();
@@ -32,15 +32,10 @@ const Component = (props) => {
             setIsOpen(true);
         }
     }, [setActiveSpotlight, setIsOpen, targetId, props.isChromatic]);
-    return (_jsxs("div", { className: "n-flex n-justify-center n-gap-token-64 n-h-[100px]", children: [_jsx(FilledButton, { 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: "var(--theme-color-neutral-bg-weak)", indicatorVariant: "border", indicatorPlacement: "middle-middle", children: _jsx(FilledButton, { 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" })] })] }));
+    return (_jsxs("div", { className: "n-flex n-justify-center n-gap-token-64 n-h-[100px]", children: [_jsx(FilledButton, { 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, asChild: true, indicatorVariant: "border", indicatorPlacement: "middle-middle", children: _jsx(FilledButton, { onClick: () => alert('Target button clicked'), children: "Target" }) }) }), _jsxs(Spotlight, { placement: "bottom-end-top-end", target: targetId, actions: _jsx(OutlinedButton, { onClick: () => {
+                        setIsOpen(false);
+                        setActiveSpotlight(null);
+                    }, children: "Close" }), 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

@@ -1 +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,YAAY,EACZ,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,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,QAAQ,CAAC,mCAE1C,EACf,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,oCAAoC,EACpD,gBAAgB,EAAC,QAAQ,EACzB,kBAAkB,EAAC,eAAe,YAElC,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,uBAAuB,CAAC,uBAE5C,GACC,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"}
+{"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,YAAY,EACZ,cAAc,EACd,SAAS,EACT,eAAe,EACf,cAAc,EACd,mBAAmB,GACpB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,SAAS,GAAG,CAAC,KAA+B,EAAE,EAAE;IACpD,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,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,QAAQ,CAAC,mCAE1C,EACf,cAAK,SAAS,EAAC,qCAAqC,YAClD,KAAC,eAAe,IACd,EAAE,EAAE,QAAQ,EACZ,QAAQ,EAAE,CAAC,KAAK,CAAC,WAAW,EAC5B,OAAO,QACP,gBAAgB,EAAC,QAAQ,EACzB,kBAAkB,EAAC,eAAe,YAElC,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,uBAAuB,CAAC,uBAE5C,GACC,GACd,EACN,MAAC,SAAS,IACR,SAAS,EAAC,oBAAoB,EAC9B,MAAM,EAAE,QAAQ,EAChB,OAAO,EACL,KAAC,cAAc,IACb,OAAO,EAAE,GAAG,EAAE;wBACZ,SAAS,CAAC,KAAK,CAAC,CAAC;wBACjB,kBAAkB,CAAC,IAAI,CAAC,CAAC;oBAC3B,CAAC,sBAGc,aAGnB,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

@@ -20,7 +20,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
-import { Dialog, FilledButton, Spotlight, SpotlightTarget, Typography, useNeedleTheme, useSpotlightContext, } from '@neo4j-ndl/react';
+import { Dialog, FilledButton, OutlinedButton, Spotlight, SpotlightTarget, Typography, useNeedleTheme, useSpotlightContext, } from '@neo4j-ndl/react';
 import { useEffect, useState } from 'react';
 const Component = (props) => {
     const { themeClassName } = useNeedleTheme();
@@ -33,15 +33,10 @@ const Component = (props) => {
             setIsOpen(true);
         }
     }, [isModalOpen, setActiveSpotlight, setIsOpen, targetId, props.isChromatic]);
-    return (_jsxs("div", { className: "n-flex n-justify-center n-gap-token-64", children: [_jsx(FilledButton, { 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-32", 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-64", children: [_jsx(FilledButton, { onClick: () => setActiveSpotlight(targetId), children: "Activate Spotlight" }), _jsx(SpotlightTarget, { id: targetId, hasPulse: !props.isChromatic, borderRadius: 4, backgroundColor: "var(--theme-color-neutral-bg-weak)", indicatorVariant: "border", hasAnchorPortal: true, children: _jsx(FilledButton, { 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" })] })] })] }));
+    return (_jsxs("div", { className: "n-flex n-justify-center n-gap-token-64", children: [_jsx(FilledButton, { onClick: () => setIsModalOpen(true), children: "Open Dialog" }), _jsxs(Dialog, { isOpen: isModalOpen, onClose: () => setIsModalOpen(false), "aria-label": "Dialog", className: themeClassName, children: [_jsx(Dialog.Header, { children: "Using Spotlight inside a dialog" }), _jsxs(Dialog.Content, { className: "n-flex n-flex-col n-gap-token-32", children: [_jsxs(Typography, { variant: "body-medium", children: ["Spotlight and SpotlightTarget should behave automatically correct when used inside a dialog. If positioning is not on top of everything, you might want to override the", _jsx("code", { children: "--spotlight-z-index" }), " css variable."] }), _jsxs("div", { className: "n-flex n-justify-center n-gap-token-64", children: [_jsx(FilledButton, { onClick: () => setActiveSpotlight(targetId), children: "Activate Spotlight" }), _jsx(SpotlightTarget, { id: targetId, hasPulse: !props.isChromatic, asChild: true, indicatorVariant: "border", children: _jsx(FilledButton, { onClick: () => alert('Target button clicked'), children: "Target" }) })] })] }), _jsxs(Spotlight, { placement: "bottom-end-top-end", target: targetId, actions: _jsx(OutlinedButton, { onClick: () => {
+                                setIsOpen(false);
+                                setActiveSpotlight(null);
+                            }, children: "Close" }), 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

@@ -1 +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,YAAY,EACZ,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,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,IAAI,CAAC,2BAElC,EACf,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,kCAAkC,aAC9D,KAAC,UAAU,IAAC,OAAO,EAAC,aAAa,+HAGpB,EACb,eAAK,SAAS,EAAC,wCAAwC,aACrD,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,QAAQ,CAAC,mCAE1C,EACf,KAAC,eAAe,IACd,EAAE,EAAE,QAAQ,EACZ,QAAQ,EAAE,CAAC,KAAK,CAAC,WAAW,EAC5B,YAAY,EAAE,CAAC,EACf,eAAe,EAAC,oCAAoC,EACpD,gBAAgB,EAAC,QAAQ,EACzB,eAAe,EAAE,IAAI,YAErB,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,uBAAuB,CAAC,uBAE5C,GACC,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"}
+{"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,YAAY,EACZ,cAAc,EACd,SAAS,EACT,eAAe,EACf,UAAU,EACV,cAAc,EACd,mBAAmB,GACpB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C,MAAM,SAAS,GAAG,CAAC,KAA+B,EAAE,EAAE;IACpD,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,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,IAAI,CAAC,4BAElC,EACf,MAAC,MAAM,IACL,MAAM,EAAE,WAAW,EACnB,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,gBACzB,QAAQ,EACnB,SAAS,EAAE,cAAc,aAEzB,KAAC,MAAM,CAAC,MAAM,kDAAgD,EAC9D,MAAC,MAAM,CAAC,OAAO,IAAC,SAAS,EAAC,kCAAkC,aAC1D,MAAC,UAAU,IAAC,OAAO,EAAC,aAAa,wLAI/B,iDAAgC,sBACrB,EACb,eAAK,SAAS,EAAC,wCAAwC,aACrD,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,QAAQ,CAAC,mCAE1C,EACf,KAAC,eAAe,IACd,EAAE,EAAE,QAAQ,EACZ,QAAQ,EAAE,CAAC,KAAK,CAAC,WAAW,EAC5B,OAAO,QACP,gBAAgB,EAAC,QAAQ,YAEzB,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,uBAAuB,CAAC,uBAE5C,GACC,IACd,IACS,EACjB,MAAC,SAAS,IACR,SAAS,EAAC,oBAAoB,EAC9B,MAAM,EAAE,QAAQ,EAChB,OAAO,EACL,KAAC,cAAc,IACb,OAAO,EAAE,GAAG,EAAE;gCACZ,SAAS,CAAC,KAAK,CAAC,CAAC;gCACjB,kBAAkB,CAAC,IAAI,CAAC,CAAC;4BAC3B,CAAC,sBAGc,aAGnB,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

@@ -20,8 +20,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
-import { FilledButton, Spotlight, SpotlightTarget, useNeedleTheme, useSpotlightContext, } from '@neo4j-ndl/react';
-import { SideNavigation } from '@neo4j-ndl/react/next';
+import { FilledButton, OutlinedButton, SideNavigation, Spotlight, SpotlightTarget, useNeedleTheme, useSpotlightContext, } from '@neo4j-ndl/react';
 import { useEffect, useState } from 'react';
 const Component = (props) => {
     const { themeClassName } = useNeedleTheme();
@@ -37,15 +36,10 @@ const Component = (props) => {
             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, { id: targetId, hasPulse: !props.isChromatic, borderRadius: 4, backgroundColor: "var(--theme-color-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-16", children: _jsx(FilledButton, { 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" })] })] }));
+    return (_jsxs("div", { className: "n-h-[500px] n-flex", children: [_jsxs(SideNavigation, { isExpanded: true, ariaLabel: "Main side navigation", children: [_jsx(SideNavigation.CategoryHeader, { children: "AuraDB" }), _jsx(SideNavigation.ListItem, { children: _jsx(SideNavigation.NavItem, { onClick: () => handleClick('aura-db-instances'), isActive: isSelected === 'aura-db-instances', label: "Instances" }) }), _jsx(SideNavigation.ListItem, { children: _jsx(SideNavigation.NavItem, { onClick: () => handleClick('aura-db-connect'), isActive: isSelected === 'aura-db-connect', label: "Connect" }) }), _jsx(SideNavigation.ListItem, { children: _jsx(SideNavigation.NavItem, { onClick: () => handleClick('aura-db-python'), isActive: isSelected === 'aura-db-python', label: "Python" }) }), _jsx(SideNavigation.ListItem, { children: _jsx(SpotlightTarget, { id: targetId, hasPulse: !props.isChromatic, borderRadius: 4, indicatorVariant: "point", indicatorPlacement: "top-right", asChild: true, children: _jsx(SideNavigation.NavItem, { onClick: () => handleClick('aura-db-javascript'), isActive: isSelected === 'aura-db-javascript', label: "JavaScript" }) }) }), _jsx(SideNavigation.CategoryHeader, { children: "AuraDS" }), _jsx(SideNavigation.ListItem, { children: _jsx(SideNavigation.NavItem, { onClick: () => handleClick('aura-ds-instances'), isActive: isSelected === 'aura-ds-instances', label: "Instances" }) }), _jsx(SideNavigation.ListItem, { children: _jsx(SideNavigation.NavItem, { onClick: () => handleClick('aura-ds-getting-started'), isActive: 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-16", children: _jsx(FilledButton, { onClick: () => setActiveSpotlight(targetId), children: "Activate Spotlight" }) }), _jsxs(Spotlight, { placement: "top-end-top-start", target: targetId, actions: _jsx(OutlinedButton, { onClick: () => {
+                        setIsOpen(false);
+                        setActiveSpotlight(null);
+                    }, children: "Close" }), 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

@@ -1 +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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"}
+{"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-on-tabs.story.js

@@ -0,0 +1,36 @@
+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 { FilledButton, OutlinedButton, Spotlight, SpotlightTarget, Tabs, Typography, useNeedleTheme, useSpotlightContext, } from '@neo4j-ndl/react';
+import { useState } from 'react';
+const Component = ({ hasPulse = true }) => {
+    const { themeClassName } = useNeedleTheme();
+    const { setIsOpen, setActiveSpotlight } = useSpotlightContext();
+    const [tabsValue, setTabsValue] = useState('0');
+    const targetId = `test-target-${themeClassName}`;
+    return (_jsxs("div", { className: "n-flex n-justify-center n-gap-token-10", children: [_jsx(FilledButton, { onClick: () => setActiveSpotlight(targetId), children: "Activate Spotlight" }), _jsxs("div", { children: [_jsxs(Tabs, { value: tabsValue, onChange: setTabsValue, children: [_jsx(SpotlightTarget, { id: targetId, hasPulse: hasPulse, borderRadius: 4, indicatorVariant: "point", children: _jsx(Tabs.Tab, { id: "0", children: "Tab 1" }) }), _jsx(Tabs.Tab, { id: "1", children: "Tab 2" }), _jsx(Tabs.Tab, { id: "2", children: "Tab 3" })] }), _jsx(Tabs.TabPanel, { className: "n-p-token-4", value: tabsValue, tabId: "0", children: _jsx(Typography, { variant: "body-medium", children: "Tab 1 content" }) }), _jsx(Tabs.TabPanel, { className: "n-p-token-4", value: tabsValue, tabId: "1", children: _jsx(Typography, { variant: "body-medium", children: "Tab 2 content" }) }), _jsx(Tabs.TabPanel, { className: "n-p-token-4", value: tabsValue, tabId: "2", children: _jsx(Typography, { variant: "body-medium", children: "Tab 3 content" }) })] }), _jsxs(Spotlight, { placement: "bottom-end-top-end", target: targetId, actions: _jsx(OutlinedButton, { onClick: () => {
+                        setIsOpen(false);
+                        setActiveSpotlight(null);
+                    }, children: "Close" }), children: [_jsx(Spotlight.Header, { children: "This is a header" }), _jsx(Spotlight.Body, { children: "This is content" })] })] }));
+};
+export default Component;
+//# sourceMappingURL=spotlight-on-tabs.story.js.map

package/lib/esm/spotlight/stories/spotlight-on-tabs.story.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spotlight-on-tabs.story.js","sourceRoot":"","sources":["../../../../src/spotlight/stories/spotlight-on-tabs.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EACL,YAAY,EACZ,cAAc,EACd,SAAS,EACT,eAAe,EACf,IAAI,EACJ,UAAU,EACV,cAAc,EACd,mBAAmB,GACpB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,MAAM,SAAS,GAAG,CAAC,EAAE,QAAQ,GAAG,IAAI,EAA0B,EAAE,EAAE;IAChE,MAAM,EAAE,cAAc,EAAE,GAAG,cAAc,EAAE,CAAC;IAC5C,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAE,GAAG,mBAAmB,EAAE,CAAC;IAChE,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC;IAEhD,MAAM,QAAQ,GAAG,eAAe,cAAc,EAAE,CAAC;IAEjD,OAAO,CACL,eAAK,SAAS,EAAC,wCAAwC,aACrD,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,QAAQ,CAAC,mCAE1C,EACf,0BACE,MAAC,IAAI,IAAC,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,YAAY,aAC5C,KAAC,eAAe,IACd,EAAE,EAAE,QAAQ,EACZ,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,CAAC,EACf,gBAAgB,EAAC,OAAO,YAExB,KAAC,IAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,GACjB,EAClB,KAAC,IAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,KAAC,IAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,IAC5B,EACP,KAAC,IAAI,CAAC,QAAQ,IAAC,SAAS,EAAC,aAAa,EAAC,KAAK,EAAE,SAAS,EAAE,KAAK,EAAC,GAAG,YAChE,KAAC,UAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,KAAC,IAAI,CAAC,QAAQ,IAAC,SAAS,EAAC,aAAa,EAAC,KAAK,EAAE,SAAS,EAAE,KAAK,EAAC,GAAG,YAChE,KAAC,UAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,KAAC,IAAI,CAAC,QAAQ,IAAC,SAAS,EAAC,aAAa,EAAC,KAAK,EAAE,SAAS,EAAE,KAAK,EAAC,GAAG,YAChE,KAAC,UAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,IACZ,EACN,MAAC,SAAS,IACR,SAAS,EAAC,oBAAoB,EAC9B,MAAM,EAAE,QAAQ,EAChB,OAAO,EACL,KAAC,cAAc,IACb,OAAO,EAAE,GAAG,EAAE;wBACZ,SAAS,CAAC,KAAK,CAAC,CAAC;wBACjB,kBAAkB,CAAC,IAAI,CAAC,CAAC;oBAC3B,CAAC,sBAGc,aAGnB,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-tour.story.js

@@ -25,7 +25,7 @@ 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-64", children: [_jsx(OutlinedButton, { onClick: () => setActiveSpotlight(`test-target-1-${themeClassName}`), children: "Start tour" }), _jsx(SpotlightTarget, { id: `test-target-1-${themeClassName}`, hasPulse: true, borderRadius: 4, children: _jsx(FilledButton, { onClick: () => alert('Target 1 clicked'), children: "Target 1" }) }), _jsx(SpotlightTarget, { id: `test-target-2-${themeClassName}`, hasPulse: true, borderRadius: 4, children: _jsx(FilledButton, { onClick: () => alert('Target 2 clicked'), children: "Target 2" }) }), _jsx(SpotlightTarget, { id: `test-target-3-${themeClassName}`, hasPulse: true, borderRadius: 4, children: _jsx(FilledButton, { onClick: () => alert('Target 3 clicked'), children: "Target 3" }) }), _jsx(SpotlightTour, { onAction: (target, action) => console.info(`Action ${action} was performed in spotlight ${target}`), spotlights: [
+    return (_jsxs("div", { className: "n-flex n-justify-center n-gap-token-64", children: [_jsx(OutlinedButton, { onClick: () => setActiveSpotlight(`test-target-1-${themeClassName}`), children: "Start tour" }), _jsx(SpotlightTarget, { id: `test-target-1-${themeClassName}`, hasPulse: true, asChild: true, children: _jsx(FilledButton, { onClick: () => alert('Target 1 clicked'), children: "Target 1" }) }), _jsx(SpotlightTarget, { id: `test-target-2-${themeClassName}`, hasPulse: true, asChild: true, children: _jsx(FilledButton, { onClick: () => alert('Target 2 clicked'), children: "Target 2" }) }), _jsx(SpotlightTarget, { id: `test-target-3-${themeClassName}`, hasPulse: true, asChild: true, children: _jsx(FilledButton, { 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}`,

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

@@ -1 +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,YAAY,EACZ,cAAc,EACd,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,cAAc,IACb,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,iBAAiB,cAAc,EAAE,CAAC,2BAGrD,EACjB,KAAC,eAAe,IACd,EAAE,EAAE,iBAAiB,cAAc,EAAE,EACrC,QAAQ,QACR,YAAY,EAAE,CAAC,YAEf,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,kBAAkB,CAAC,yBAEvC,GACC,EAClB,KAAC,eAAe,IACd,EAAE,EAAE,iBAAiB,cAAc,EAAE,EACrC,QAAQ,QACR,YAAY,EAAE,CAAC,YAEf,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,kBAAkB,CAAC,yBAEvC,GACC,EAClB,KAAC,eAAe,IACd,EAAE,EAAE,iBAAiB,cAAc,EAAE,EACrC,QAAQ,QACR,YAAY,EAAE,CAAC,YAEf,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,kBAAkB,CAAC,yBAEvC,GACC,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"}
+{"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,YAAY,EACZ,cAAc,EACd,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,cAAc,IACb,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,iBAAiB,cAAc,EAAE,CAAC,2BAGrD,EACjB,KAAC,eAAe,IAAC,EAAE,EAAE,iBAAiB,cAAc,EAAE,EAAE,QAAQ,QAAC,OAAO,kBACtE,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,kBAAkB,CAAC,yBAEvC,GACC,EAClB,KAAC,eAAe,IAAC,EAAE,EAAE,iBAAiB,cAAc,EAAE,EAAE,QAAQ,QAAC,OAAO,kBACtE,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,kBAAkB,CAAC,yBAEvC,GACC,EAClB,KAAC,eAAe,IAAC,EAAE,EAAE,iBAAiB,cAAc,EAAE,EAAE,QAAQ,QAAC,OAAO,kBACtE,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,kBAAkB,CAAC,yBAEvC,GACC,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

@@ -20,7 +20,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
-import { FilledButton, Spotlight, SpotlightTarget, TextButton, useNeedleTheme, useSpotlightContext, } from '@neo4j-ndl/react';
+import { FilledButton, OutlinedButton, Spotlight, SpotlightTarget, TextButton, useNeedleTheme, useSpotlightContext, } from '@neo4j-ndl/react';
 import { FingerPrintIconOutline } from '@neo4j-ndl/react/icons';
 import { useEffect } from 'react';
 const Component = (props) => {
@@ -33,15 +33,10 @@ const Component = (props) => {
             setIsOpen(true);
         }
     }, [setActiveSpotlight, setIsOpen, targetId, props.isChromatic]);
-    return (_jsxs("div", { className: "n-flex n-justify-center n-gap-token-64", children: [_jsx(FilledButton, { onClick: () => setActiveSpotlight(targetId), children: "Activate Spotlight" }), _jsx(SpotlightTarget, { id: targetId, hasPulse: !props.isChromatic, borderRadius: 4, backgroundColor: "var(--theme-color-neutral-bg-weak)", indicatorVariant: "border", children: _jsx(TextButton, { 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.IconWrapper, { children: _jsx(FingerPrintIconOutline, {}) }), _jsx(Spotlight.Header, { children: "This is a header" }), _jsx(Spotlight.Body, { children: "This is content" })] })] }));
+    return (_jsxs("div", { className: "n-flex n-justify-center n-gap-token-64", children: [_jsx(FilledButton, { onClick: () => setActiveSpotlight(targetId), children: "Activate Spotlight" }), _jsx(SpotlightTarget, { id: targetId, hasPulse: !props.isChromatic, indicatorVariant: "border", asChild: true, children: _jsx(TextButton, { onClick: () => alert('Target button clicked'), children: "Target" }) }), _jsxs(Spotlight, { placement: "bottom-end-top-end", target: targetId, actions: _jsx(OutlinedButton, { onClick: () => {
+                        setIsOpen(false);
+                        setActiveSpotlight(null);
+                    }, children: "Close" }), 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

@@ -1 +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,YAAY,EACZ,SAAS,EACT,eAAe,EACf,UAAU,EACV,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,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,QAAQ,CAAC,mCAE1C,EACf,KAAC,eAAe,IACd,EAAE,EAAE,QAAQ,EACZ,QAAQ,EAAE,CAAC,KAAK,CAAC,WAAW,EAC5B,YAAY,EAAE,CAAC,EACf,eAAe,EAAC,oCAAoC,EACpD,gBAAgB,EAAC,QAAQ,YAEzB,KAAC,UAAU,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,uBAAuB,CAAC,uBAE5C,GACG,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"}
+{"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,YAAY,EACZ,cAAc,EACd,SAAS,EACT,eAAe,EACf,UAAU,EACV,cAAc,EACd,mBAAmB,GACpB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAChE,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,SAAS,GAAG,CAAC,KAA+B,EAAE,EAAE;IACpD,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,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,QAAQ,CAAC,mCAE1C,EACf,KAAC,eAAe,IACd,EAAE,EAAE,QAAQ,EACZ,QAAQ,EAAE,CAAC,KAAK,CAAC,WAAW,EAC5B,gBAAgB,EAAC,QAAQ,EACzB,OAAO,kBAEP,KAAC,UAAU,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,uBAAuB,CAAC,uBAE5C,GACG,EAClB,MAAC,SAAS,IACR,SAAS,EAAC,oBAAoB,EAC9B,MAAM,EAAE,QAAQ,EAChB,OAAO,EACL,KAAC,cAAc,IACb,OAAO,EAAE,GAAG,EAAE;wBACZ,SAAS,CAAC,KAAK,CAAC,CAAC;wBACjB,kBAAkB,CAAC,IAAI,CAAC,CAAC;oBAC3B,CAAC,sBAGc,aAGnB,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

@@ -20,7 +20,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
-import { FilledButton, Spotlight, SpotlightTarget, TextButton, useNeedleTheme, useSpotlightContext, } from '@neo4j-ndl/react';
+import { FilledButton, OutlinedButton, Spotlight, SpotlightTarget, TextButton, useNeedleTheme, useSpotlightContext, } from '@neo4j-ndl/react';
 import { useEffect } from 'react';
 const Component = (props) => {
     const { themeClassName } = useNeedleTheme();
@@ -32,15 +32,10 @@ const Component = (props) => {
             setIsOpen(true);
         }
     }, [setActiveSpotlight, setIsOpen, targetId, props.isChromatic]);
-    return (_jsxs("div", { className: "n-flex n-justify-center n-gap-token-64", children: [_jsx(FilledButton, { onClick: () => setActiveSpotlight(targetId), children: "Activate Spotlight" }), _jsx(SpotlightTarget, { id: targetId, hasPulse: !props.isChromatic, borderRadius: 4, backgroundColor: "var(--theme-color-neutral-bg-weak)", children: _jsx(TextButton, { 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.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" })] })] }));
+    return (_jsxs("div", { className: "n-flex n-justify-center n-gap-token-64", children: [_jsx(FilledButton, { onClick: () => setActiveSpotlight(targetId), children: "Activate Spotlight" }), _jsx(SpotlightTarget, { id: targetId, hasPulse: !props.isChromatic, asChild: true, children: _jsx(TextButton, { onClick: () => alert('Target button clicked'), children: "Target" }) }), _jsxs(Spotlight, { placement: "bottom-end-top-end", target: targetId, actions: _jsx(OutlinedButton, { onClick: () => {
+                        setIsOpen(false);
+                        setActiveSpotlight(null);
+                    }, children: "Close" }), 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

@@ -1 +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,YAAY,EACZ,SAAS,EACT,eAAe,EACf,UAAU,EACV,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,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,QAAQ,CAAC,mCAE1C,EACf,KAAC,eAAe,IACd,EAAE,EAAE,QAAQ,EACZ,QAAQ,EAAE,CAAC,KAAK,CAAC,WAAW,EAC5B,YAAY,EAAE,CAAC,EACf,eAAe,EAAC,oCAAoC,YAEpD,KAAC,UAAU,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,uBAAuB,CAAC,uBAE5C,GACG,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"}
+{"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,YAAY,EACZ,cAAc,EACd,SAAS,EACT,eAAe,EACf,UAAU,EACV,cAAc,EACd,mBAAmB,GACpB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,SAAS,GAAG,CAAC,KAA+B,EAAE,EAAE;IACpD,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,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,QAAQ,CAAC,mCAE1C,EACf,KAAC,eAAe,IAAC,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,KAAK,CAAC,WAAW,EAAE,OAAO,kBAClE,KAAC,UAAU,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,uBAAuB,CAAC,uBAE5C,GACG,EAClB,MAAC,SAAS,IACR,SAAS,EAAC,oBAAoB,EAC9B,MAAM,EAAE,QAAQ,EAChB,OAAO,EACL,KAAC,cAAc,IACb,OAAO,EAAE,GAAG,EAAE;wBACZ,SAAS,CAAC,KAAK,CAAC,CAAC;wBACjB,kBAAkB,CAAC,IAAI,CAAC,CAAC;oBAC3B,CAAC,sBAGc,aAGnB,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

@@ -20,7 +20,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
-import { FilledButton, Spotlight, SpotlightTarget, TextButton, useNeedleTheme, useSpotlightContext, } from '@neo4j-ndl/react';
+import { FilledButton, OutlinedButton, Spotlight, SpotlightTarget, TextButton, useNeedleTheme, useSpotlightContext, } from '@neo4j-ndl/react';
 import { useEffect } from 'react';
 const Component = (props) => {
     const { themeClassName } = useNeedleTheme();
@@ -32,15 +32,10 @@ const Component = (props) => {
             setIsOpen(true);
         }
     }, [setActiveSpotlight, setIsOpen, targetId, props.isChromatic]);
-    return (_jsxs("div", { className: "n-flex n-justify-center n-gap-token-64", children: [_jsx(FilledButton, { onClick: () => setActiveSpotlight(targetId), children: "Activate Spotlight" }), _jsx(SpotlightTarget, { id: targetId, hasPulse: !props.isChromatic, borderRadius: 4, backgroundColor: "var(--theme-color-neutral-bg-weak)", indicatorVariant: "border", children: _jsx(TextButton, { 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.Label, { children: "NEW" }), _jsx(Spotlight.Header, { children: "This is a header" }), _jsx(Spotlight.Body, { children: "This is content" })] })] }));
+    return (_jsxs("div", { className: "n-flex n-justify-center n-gap-token-64", children: [_jsx(FilledButton, { onClick: () => setActiveSpotlight(targetId), children: "Activate Spotlight" }), _jsx(SpotlightTarget, { id: targetId, hasPulse: !props.isChromatic, indicatorVariant: "border", asChild: true, children: _jsx(TextButton, { onClick: () => alert('Target button clicked'), children: "Target" }) }), _jsxs(Spotlight, { placement: "bottom-end-top-end", target: targetId, actions: _jsx(OutlinedButton, { onClick: () => {
+                        setIsOpen(false);
+                        setActiveSpotlight(null);
+                    }, children: "Close" }), 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

@@ -1 +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,YAAY,EACZ,SAAS,EACT,eAAe,EACf,UAAU,EACV,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,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,QAAQ,CAAC,mCAE1C,EACf,KAAC,eAAe,IACd,EAAE,EAAE,QAAQ,EACZ,QAAQ,EAAE,CAAC,KAAK,CAAC,WAAW,EAC5B,YAAY,EAAE,CAAC,EACf,eAAe,EAAC,oCAAoC,EACpD,gBAAgB,EAAC,QAAQ,YAEzB,KAAC,UAAU,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,uBAAuB,CAAC,uBAE5C,GACG,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"}
+{"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,YAAY,EACZ,cAAc,EACd,SAAS,EACT,eAAe,EACf,UAAU,EACV,cAAc,EACd,mBAAmB,GACpB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,SAAS,GAAG,CAAC,KAA+B,EAAE,EAAE;IACpD,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,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,QAAQ,CAAC,mCAE1C,EACf,KAAC,eAAe,IACd,EAAE,EAAE,QAAQ,EACZ,QAAQ,EAAE,CAAC,KAAK,CAAC,WAAW,EAC5B,gBAAgB,EAAC,QAAQ,EACzB,OAAO,kBAEP,KAAC,UAAU,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,uBAAuB,CAAC,uBAE5C,GACG,EAClB,MAAC,SAAS,IACR,SAAS,EAAC,oBAAoB,EAC9B,MAAM,EAAE,QAAQ,EAChB,OAAO,EACL,KAAC,cAAc,IACb,OAAO,EAAE,GAAG,EAAE;wBACZ,SAAS,CAAC,KAAK,CAAC,CAAC;wBACjB,kBAAkB,CAAC,IAAI,CAAC,CAAC;oBAC3B,CAAC,sBAGc,aAGnB,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

@@ -20,7 +20,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
-import { FilledButton, Spotlight, SpotlightTarget, useNeedleTheme, useSpotlightContext, } from '@neo4j-ndl/react';
+import { FilledButton, OutlinedButton, Spotlight, SpotlightTarget, useNeedleTheme, useSpotlightContext, } from '@neo4j-ndl/react';
 import { useEffect } from 'react';
 const Component = (props) => {
     const { themeClassName } = useNeedleTheme();
@@ -32,15 +32,10 @@ const Component = (props) => {
             setIsOpen(true);
         }
     }, [setActiveSpotlight, setIsOpen, targetId, props.isChromatic]);
-    return (_jsxs("div", { className: "n-flex n-justify-center n-gap-token-64", children: [_jsx(FilledButton, { onClick: () => setActiveSpotlight(targetId), children: "Activate Spotlight" }), _jsx(SpotlightTarget, { id: targetId, hasPulse: !props.isChromatic, borderRadius: 4, backgroundColor: "var(--theme-color-neutral-bg-weak)", indicatorVariant: "point", indicatorPlacement: "top-right", children: _jsx(FilledButton, { 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" })] })] }));
+    return (_jsxs("div", { className: "n-flex n-justify-center n-gap-token-64", children: [_jsx(FilledButton, { onClick: () => setActiveSpotlight(targetId), children: "Activate Spotlight" }), _jsx(SpotlightTarget, { id: targetId, hasPulse: !props.isChromatic, asChild: true, indicatorVariant: "point", indicatorPlacement: "top-right", children: _jsx(FilledButton, { onClick: () => alert('Target button clicked'), children: "Target" }) }), _jsxs(Spotlight, { placement: "bottom-end-top-end", target: targetId, actions: _jsx(OutlinedButton, { onClick: () => {
+                        setIsOpen(false);
+                        setActiveSpotlight(null);
+                    }, children: "Close" }), 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