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

package/lib/cjs/spotlight/SpotlightTarget.js

@@ -64,7 +64,7 @@ const react_2 = __importStar(require("react"));
 const conditional_wrap_1 = require("../conditional-wrap");
 const SpotlightProvider_1 = require("./SpotlightProvider");
 const use_indicator_1 = require("./use-indicator");
-const SpotlightTarget = ({ id, hasPulse = true, indicatorVariant = 'border', indicatorPlacement = 'top-right', backgroundColor, borderRadius, shouldFitToChildren = false, children, className, htmlAttributes, style, as, ref, }) => {
+const SpotlightTarget = ({ id, hasPulse = true, indicatorVariant = 'border', indicatorPlacement = 'top-right', borderRadius, shouldFitToChildren = false, children, className, htmlAttributes, style, as, ref, asChild, }) => {
     const Component = as !== null && as !== void 0 ? as : 'div';
     const { isActiveSpotlight, isOpen, setIsOpen, registerTarget, unregisterTarget, setActiveSpotlight, } = (0, SpotlightProvider_1.useSpotlightContext)();
     const internalRef = react_2.default.useRef(null);
@@ -86,6 +86,43 @@ const SpotlightTarget = ({ id, hasPulse = true, indicatorVariant = 'border', ind
         isOpen: isActive,
         targetRef: internalRef,
     });
+    if (asChild === true && react_2.default.isValidElement(children)) {
+        const child = children;
+        const onClick = (e) => {
+            var _a, _b;
+            if (isActive) {
+                // When spotlight is active, always prevent the child's click handler
+                e.preventDefault();
+                if (!isOpen) {
+                    setIsOpen(true);
+                }
+                // Don't call child.props?.onClick when spotlight is active
+                return;
+            }
+            // Only call the child's click handler when spotlight is not active
+            (_b = (_a = child.props) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+        };
+        const onKeyDown = (e) => {
+            var _a, _b;
+            if (isActive && !isOpen && (e.code === 'Enter' || e.code === 'Space')) {
+                e.preventDefault();
+                setIsOpen(true);
+                return;
+            }
+            if (isActive && e.code === 'Escape') {
+                e.preventDefault();
+                setActiveSpotlight(null);
+                return;
+            }
+            (_b = (_a = child.props) === null || _a === void 0 ? void 0 : _a.onKeyDown) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+        };
+        // IMPORTANT: do NOT force role/tabIndex here; preserves Composite semantics for the SideNavigation
+        const mergedProps = Object.assign({ id,
+            onClick,
+            onKeyDown, ref: mergedRefs, style: Object.assign(Object.assign({}, style), child.props.style) }, (htmlAttributes
+            ? Object.assign(Object.assign({}, htmlAttributes), { role: undefined, tabIndex: undefined }) : {}));
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [react_2.default.cloneElement(child, mergedProps), (0, jsx_runtime_1.jsx)(conditional_wrap_1.ConditionalWrap, { shouldWrap: isActive && isOpen, wrap: (wrapChildren) => ((0, jsx_runtime_1.jsx)(react_1.FloatingPortal, { children: wrapChildren })), children: indicator.context.open && ((0, jsx_runtime_1.jsx)("div", { className: indicator.indicatorClasses, ref: indicator.context.refs.setFloating, style: Object.assign(Object.assign({}, indicator.floatingStyles), indicator.style) })) })] }));
+    }
     const classes = (0, classnames_1.default)('ndl-spotlight-target', {
         'ndl-spotlight-target-fit-to-children': shouldFitToChildren,
         'ndl-spotlight-target-open': isOpen && isActive,
@@ -94,9 +131,12 @@ const SpotlightTarget = ({ id, hasPulse = true, indicatorVariant = 'border', ind
         'ndl-spotlight-target-inert-fit-to-children': shouldFitToChildren,
     }, className);
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Component, Object.assign({ role: isActive ? 'button' : undefined, id: id, ref: mergedRefs, className: classes, onClick: (e) => {
-                    if (isActive && !isOpen) {
-                        setIsOpen(true);
+                    if (isActive) {
                         e.preventDefault();
+                        e.stopPropagation();
+                        if (!isOpen) {
+                            setIsOpen(true);
+                        }
                     }
                 }, style: Object.assign({ borderRadius }, style), onKeyDown: (e) => {
                     if (isActive &&
@@ -108,7 +148,7 @@ const SpotlightTarget = ({ id, hasPulse = true, indicatorVariant = 'border', ind
                     else if (e.code === 'Escape' && isActive) {
                         setActiveSpotlight(null);
                     }
-                }, tabIndex: isActive ? 0 : -1 }, (isActive && { 'aria-label': 'Spotlight target' }), htmlAttributes, { children: (0, jsx_runtime_1.jsx)(conditional_wrap_1.ConditionalWrap, { shouldWrap: isActive, wrap: (children) => ((0, jsx_runtime_1.jsx)("div", { inert: true, "aria-disabled": true, className: inertClasses, children: children })), children: children }) })), (0, jsx_runtime_1.jsx)(react_1.FloatingPortal, { root: indicator.context.refs.reference.current, children: indicator.context.open && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: indicator.indicatorClasses, ref: indicator.context.refs.setFloating, style: Object.assign(Object.assign({}, indicator.floatingStyles), indicator.style) }, indicator.getFloatingProps())) })) })] }));
+                }, tabIndex: isActive ? 0 : undefined }, (isActive && { 'aria-label': 'Open spotlight' }), htmlAttributes, { children: (0, jsx_runtime_1.jsx)(conditional_wrap_1.ConditionalWrap, { shouldWrap: isActive, wrap: (children) => ((0, jsx_runtime_1.jsx)("div", { inert: true, "aria-disabled": true, className: inertClasses, children: children })), children: children }) })), (0, jsx_runtime_1.jsx)(conditional_wrap_1.ConditionalWrap, { shouldWrap: isActive && isOpen, wrap: (wrapChildren) => (0, jsx_runtime_1.jsx)(react_1.FloatingPortal, { children: wrapChildren }), children: indicator.context.open && ((0, jsx_runtime_1.jsx)("div", { className: indicator.indicatorClasses, ref: indicator.context.refs.setFloating, style: Object.assign(Object.assign({}, indicator.floatingStyles), indicator.style) })) })] }));
 };
 exports.SpotlightTarget = SpotlightTarget;
 //# sourceMappingURL=SpotlightTarget.js.map

package/lib/cjs/spotlight/SpotlightTarget.js.map

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

package/lib/cjs/spotlight/SpotlightTour.js

@@ -35,11 +35,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SpotlightTour = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const outlined_button_1 = require("../outlined-button");
+const text_button_1 = require("../text-button");
 const Spotlight_1 = require("./Spotlight");
 const SpotlightProvider_1 = require("./SpotlightProvider");
-const SpotlightTour = (props) => {
+const SpotlightTour = ({ spotlights, dismissButtonLabel = 'Dismiss', backButtonLabel = 'Back', nextButtonLabel = 'Next', closeButtonLabel = 'Close', onAction, }) => {
     const { setActiveSpotlight, setIsOpen } = (0, SpotlightProvider_1.useSpotlightContext)();
-    const { spotlights, dismissButtonText = 'Dismiss', backButtonText = 'Back', nextButtonText = 'Next', closeButtonText = 'Close', onAction, } = props;
     const next = (0, react_1.useCallback)((index) => {
         onAction === null || onAction === void 0 ? void 0 : onAction(spotlights[index].target, 'next');
         setActiveSpotlight(spotlights[index + 1].target);
@@ -58,8 +59,8 @@ const SpotlightTour = (props) => {
         setActiveSpotlight(null);
         setIsOpen(false);
     }, [onAction, spotlights, setActiveSpotlight, setIsOpen]);
-    const getActions = (0, react_1.useCallback)((actions, index) => {
-        if (actions === null || actions === void 0 ? void 0 : actions.length) {
+    const getActions = (0, react_1.useCallback)((index, actions) => {
+        if (actions !== undefined && actions !== null) {
             return actions;
         }
         const isFirst = index === 0;
@@ -67,58 +68,36 @@ const SpotlightTour = (props) => {
         const hasMultiple = spotlights.length > 1;
         const newActions = [];
         if (!isLast && hasMultiple) {
-            newActions.push({
-                label: dismissButtonText,
-                fill: 'text',
-                onClick: () => dismiss(index),
-            });
+            newActions.push((0, jsx_runtime_1.jsx)(text_button_1.TextButton, { onClick: () => dismiss(index), children: dismissButtonLabel }));
         }
         if (!isFirst && hasMultiple) {
-            newActions.push({
-                label: backButtonText,
-                fill: 'text',
-                onClick: () => back(index),
-            });
+            newActions.push((0, jsx_runtime_1.jsx)(text_button_1.TextButton, { onClick: () => back(index), children: backButtonLabel }));
         }
         if (isLast) {
-            newActions.push({
-                label: closeButtonText,
-                fill: 'outlined',
-                onClick: () => close(index),
-            });
+            newActions.push((0, jsx_runtime_1.jsx)(outlined_button_1.OutlinedButton, { onClick: () => close(index), children: closeButtonLabel }));
         }
         else {
-            newActions.push({
-                label: nextButtonText,
-                fill: 'outlined',
-                onClick: () => next(index),
-            });
+            newActions.push((0, jsx_runtime_1.jsx)(outlined_button_1.OutlinedButton, { onClick: () => next(index), children: nextButtonLabel }));
         }
         return newActions;
     }, [
         spotlights,
-        dismissButtonText,
+        dismissButtonLabel,
         dismiss,
-        backButtonText,
+        backButtonLabel,
         back,
-        closeButtonText,
+        closeButtonLabel,
         close,
-        nextButtonText,
+        nextButtonLabel,
         next,
     ]);
-    const getBeforeActions = (0, react_1.useCallback)((beforeActions, index) => {
-        if (beforeActions) {
+    const getBeforeActions = (0, react_1.useCallback)((index, beforeActions) => {
+        if (beforeActions !== undefined && beforeActions !== null) {
             return beforeActions;
         }
         return spotlights.length > 1 ? index + 1 + '/' + spotlights.length : null;
     }, [spotlights]);
-    const getInitialFocus = (0, react_1.useCallback)((initialFocus, actions) => {
-        if (initialFocus !== undefined) {
-            return initialFocus;
-        }
-        return actions.length - 1;
-    }, []);
-    const getOnClose = (0, react_1.useCallback)((onClose, index) => {
+    const getOnClose = (0, react_1.useCallback)((index, onClose) => {
         if (onClose) {
             return onClose;
         }
@@ -126,7 +105,7 @@ const SpotlightTour = (props) => {
             onAction === null || onAction === void 0 ? void 0 : onAction(spotlights[index].target, reason);
         };
     }, [onAction, spotlights]);
-    const getOnOpen = (0, react_1.useCallback)((onOpen, index) => {
+    const getOnOpen = (0, react_1.useCallback)((index, onOpen) => {
         if (onOpen) {
             return onOpen;
         }
@@ -136,12 +115,11 @@ const SpotlightTour = (props) => {
     }, [onAction, spotlights]);
     return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.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 ((0, jsx_runtime_1.jsx)(Spotlight_1.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 ((0, jsx_runtime_1.jsx)(Spotlight_1.Spotlight, Object.assign({}, restSpotlight, { actions: newActions, beforeActions: newBeforeActions, initialFocus: initialFocus, onClose: newOnClose, onOpen: newOnOpen }), index));
         }) }));
 };
 exports.SpotlightTour = SpotlightTour;

package/lib/cjs/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/cjs/spotlight/stories/index.js

@@ -23,7 +23,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SpotlightFixedPositioningSrc = exports.SpotlightInDialogSrc = exports.SpotlightInSideNavSrc = exports.SpotlightTourSrc = exports.SpotlightWithPointerSrc = exports.SpotlightWithImageSrc = exports.SpotlightWithIconSrc = exports.SpotlightWithLabelSrc = exports.SpotlightFixedPositioning = exports.SpotlightInDialog = exports.SpotlightInSideNav = exports.SpotlightTour = exports.SpotlightWithPointer = exports.SpotlightWithImage = exports.SpotlightWithIcon = exports.SpotlightWithLabel = void 0;
+exports.SpotlightOnTabsSrc = exports.SpotlightFixedPositioningSrc = exports.SpotlightInDialogSrc = exports.SpotlightInSideNavSrc = exports.SpotlightTourSrc = exports.SpotlightWithPointerSrc = exports.SpotlightWithImageSrc = exports.SpotlightWithIconSrc = exports.SpotlightWithLabelSrc = exports.SpotlightOnTabs = exports.SpotlightFixedPositioning = exports.SpotlightInDialog = exports.SpotlightInSideNav = exports.SpotlightTour = exports.SpotlightWithPointer = exports.SpotlightWithImage = exports.SpotlightWithIcon = exports.SpotlightWithLabel = void 0;
 var spotlight_with_label_story_1 = require("./spotlight-with-label.story");
 Object.defineProperty(exports, "SpotlightWithLabel", { enumerable: true, get: function () { return __importDefault(spotlight_with_label_story_1).default; } });
 var spotlight_with_icon_story_1 = require("./spotlight-with-icon.story");
@@ -40,20 +40,25 @@ var spotlight_in_dialog_story_1 = require("./spotlight-in-dialog.story");
 Object.defineProperty(exports, "SpotlightInDialog", { enumerable: true, get: function () { return __importDefault(spotlight_in_dialog_story_1).default; } });
 var spotlight_fixed_positioning_story_1 = require("./spotlight-fixed-positioning.story");
 Object.defineProperty(exports, "SpotlightFixedPositioning", { enumerable: true, get: function () { return __importDefault(spotlight_fixed_positioning_story_1).default; } });
+var spotlight_on_tabs_story_1 = require("./spotlight-on-tabs.story");
+Object.defineProperty(exports, "SpotlightOnTabs", { enumerable: true, get: function () { return __importDefault(spotlight_on_tabs_story_1).default; } });
+const export_stories_utils_1 = require("@neo4j-ndl/react/_common/export-stories-utils");
 const spotlight_fixed_positioning_story_raw_1 = __importDefault(require("./spotlight-fixed-positioning.story?raw"));
 const spotlight_in_dialog_story_raw_1 = __importDefault(require("./spotlight-in-dialog.story?raw"));
 const spotlight_in_side_nav_story_raw_1 = __importDefault(require("./spotlight-in-side-nav.story?raw"));
+const spotlight_on_tabs_story_raw_1 = __importDefault(require("./spotlight-on-tabs.story?raw"));
 const spotlight_tour_story_raw_1 = __importDefault(require("./spotlight-tour.story?raw"));
 const spotlight_with_icon_story_raw_1 = __importDefault(require("./spotlight-with-icon.story?raw"));
 const spotlight_with_image_story_raw_1 = __importDefault(require("./spotlight-with-image.story?raw"));
 const spotlight_with_label_story_raw_1 = __importDefault(require("./spotlight-with-label.story?raw"));
 const spotlight_with_pointer_story_raw_1 = __importDefault(require("./spotlight-with-pointer.story?raw"));
-exports.SpotlightWithLabelSrc = spotlight_with_label_story_raw_1.default.replace(/^\/\*[\s\S]*?\*\/\s*/, '');
-exports.SpotlightWithIconSrc = spotlight_with_icon_story_raw_1.default.replace(/^\/\*[\s\S]*?\*\/\s*/, '');
-exports.SpotlightWithImageSrc = spotlight_with_image_story_raw_1.default.replace(/^\/\*[\s\S]*?\*\/\s*/, '');
-exports.SpotlightWithPointerSrc = spotlight_with_pointer_story_raw_1.default.replace(/^\/\*[\s\S]*?\*\/\s*/, '');
-exports.SpotlightTourSrc = spotlight_tour_story_raw_1.default.replace(/^\/\*[\s\S]*?\*\/\s*/, '');
-exports.SpotlightInSideNavSrc = spotlight_in_side_nav_story_raw_1.default.replace(/^\/\*[\s\S]*?\*\/\s*/, '');
-exports.SpotlightInDialogSrc = spotlight_in_dialog_story_raw_1.default.replace(/^\/\*[\s\S]*?\*\/\s*/, '');
-exports.SpotlightFixedPositioningSrc = spotlight_fixed_positioning_story_raw_1.default.replace(/^\/\*[\s\S]*?\*\/\s*/, '');
+exports.SpotlightWithLabelSrc = (0, export_stories_utils_1.removeLicenseHeader)(spotlight_with_label_story_raw_1.default);
+exports.SpotlightWithIconSrc = (0, export_stories_utils_1.removeLicenseHeader)(spotlight_with_icon_story_raw_1.default);
+exports.SpotlightWithImageSrc = (0, export_stories_utils_1.removeLicenseHeader)(spotlight_with_image_story_raw_1.default);
+exports.SpotlightWithPointerSrc = (0, export_stories_utils_1.removeLicenseHeader)(spotlight_with_pointer_story_raw_1.default);
+exports.SpotlightTourSrc = (0, export_stories_utils_1.removeLicenseHeader)(spotlight_tour_story_raw_1.default);
+exports.SpotlightInSideNavSrc = (0, export_stories_utils_1.removeLicenseHeader)(spotlight_in_side_nav_story_raw_1.default);
+exports.SpotlightInDialogSrc = (0, export_stories_utils_1.removeLicenseHeader)(spotlight_in_dialog_story_raw_1.default);
+exports.SpotlightFixedPositioningSrc = (0, export_stories_utils_1.removeLicenseHeader)(spotlight_fixed_positioning_story_raw_1.default);
+exports.SpotlightOnTabsSrc = (0, export_stories_utils_1.removeLicenseHeader)(spotlight_on_tabs_story_raw_1.default);
 //# sourceMappingURL=index.js.map

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

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

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

@@ -34,15 +34,10 @@ const Component = (props) => {
             setIsOpen(true);
         }
     }, [setActiveSpotlight, setIsOpen, targetId, props.isChromatic]);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-justify-center n-gap-token-64 n-h-[100px]", children: [(0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: () => setActiveSpotlight(targetId), children: "Activate Spotlight" }), (0, jsx_runtime_1.jsx)("div", { className: "n-left-[auto] n-top-[110px] n-fixed", children: (0, jsx_runtime_1.jsx)(react_1.SpotlightTarget, { id: targetId, hasPulse: !props.isChromatic, borderRadius: 4, backgroundColor: "var(--theme-color-neutral-bg-weak)", indicatorVariant: "border", indicatorPlacement: "middle-middle", children: (0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: () => alert('Target button clicked'), children: "Target" }) }) }), (0, jsx_runtime_1.jsxs)(react_1.Spotlight, { placement: "bottom-end-top-end", target: targetId, actions: [
-                    {
-                        label: 'Close',
-                        onClick: () => {
-                            setIsOpen(false);
-                            setActiveSpotlight(null);
-                        },
-                    },
-                ], children: [(0, jsx_runtime_1.jsx)(react_1.Spotlight.Header, { children: "This is a header" }), (0, jsx_runtime_1.jsx)(react_1.Spotlight.Body, { children: "This is content" })] })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-justify-center n-gap-token-64 n-h-[100px]", children: [(0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: () => setActiveSpotlight(targetId), children: "Activate Spotlight" }), (0, jsx_runtime_1.jsx)("div", { className: "n-left-[auto] n-top-[110px] n-fixed", children: (0, jsx_runtime_1.jsx)(react_1.SpotlightTarget, { id: targetId, hasPulse: !props.isChromatic, asChild: true, indicatorVariant: "border", indicatorPlacement: "middle-middle", children: (0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: () => alert('Target button clicked'), children: "Target" }) }) }), (0, jsx_runtime_1.jsxs)(react_1.Spotlight, { placement: "bottom-end-top-end", target: targetId, actions: (0, jsx_runtime_1.jsx)(react_1.OutlinedButton, { onClick: () => {
+                        setIsOpen(false);
+                        setActiveSpotlight(null);
+                    }, children: "Close" }), children: [(0, jsx_runtime_1.jsx)(react_1.Spotlight.Header, { children: "This is a header" }), (0, jsx_runtime_1.jsx)(react_1.Spotlight.Body, { children: "This is content" })] })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=spotlight-fixed-positioning.story.js.map

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

@@ -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,mDAAiD;AAEjD,4CAM0B;AAC1B,iCAAkC;AAMlC,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAE,EAAE;IAC1C,MAAM,EAAE,cAAc,EAAE,GAAG,IAAA,sBAAc,GAAE,CAAC;IAC5C,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAE,GAAG,IAAA,2BAAmB,GAAE,CAAC;IAEhE,MAAM,QAAQ,GAAG,eAAe,cAAc,EAAE,CAAC;IAEjD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,KAAK,CAAC,WAAW,EAAE,CAAC;YACtB,kBAAkB,CAAC,QAAQ,CAAC,CAAC;YAC7B,SAAS,CAAC,IAAI,CAAC,CAAC;QAClB,CAAC;IACH,CAAC,EAAE,CAAC,kBAAkB,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC;IAEjE,OAAO,CACL,iCAAK,SAAS,EAAC,oDAAoD,aACjE,uBAAC,oBAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,QAAQ,CAAC,mCAE1C,EACf,gCAAK,SAAS,EAAC,qCAAqC,YAClD,uBAAC,uBAAe,IACd,EAAE,EAAE,QAAQ,EACZ,QAAQ,EAAE,CAAC,KAAK,CAAC,WAAW,EAC5B,YAAY,EAAE,CAAC,EACf,eAAe,EAAC,oCAAoC,EACpD,gBAAgB,EAAC,QAAQ,EACzB,kBAAkB,EAAC,eAAe,YAElC,uBAAC,oBAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,uBAAuB,CAAC,uBAE5C,GACC,GACd,EACN,wBAAC,iBAAS,IACR,SAAS,EAAC,oBAAoB,EAC9B,MAAM,EAAE,QAAQ,EAChB,OAAO,EAAE;oBACP;wBACE,KAAK,EAAE,OAAO;wBACd,OAAO,EAAE,GAAG,EAAE;4BACZ,SAAS,CAAC,KAAK,CAAC,CAAC;4BACjB,kBAAkB,CAAC,IAAI,CAAC,CAAC;wBAC3B,CAAC;qBACF;iBACF,aAED,uBAAC,iBAAS,CAAC,MAAM,mCAAoC,EACrD,uBAAC,iBAAS,CAAC,IAAI,kCAAiC,IACtC,IACR,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC"}
+{"version":3,"file":"spotlight-fixed-positioning.story.js","sourceRoot":"","sources":["../../../../src/spotlight/stories/spotlight-fixed-positioning.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAO0B;AAC1B,iCAAkC;AAElC,MAAM,SAAS,GAAG,CAAC,KAA+B,EAAE,EAAE;IACpD,MAAM,EAAE,cAAc,EAAE,GAAG,IAAA,sBAAc,GAAE,CAAC;IAC5C,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAE,GAAG,IAAA,2BAAmB,GAAE,CAAC;IAEhE,MAAM,QAAQ,GAAG,eAAe,cAAc,EAAE,CAAC;IAEjD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,KAAK,CAAC,WAAW,EAAE,CAAC;YACtB,kBAAkB,CAAC,QAAQ,CAAC,CAAC;YAC7B,SAAS,CAAC,IAAI,CAAC,CAAC;QAClB,CAAC;IACH,CAAC,EAAE,CAAC,kBAAkB,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC;IAEjE,OAAO,CACL,iCAAK,SAAS,EAAC,oDAAoD,aACjE,uBAAC,oBAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,QAAQ,CAAC,mCAE1C,EACf,gCAAK,SAAS,EAAC,qCAAqC,YAClD,uBAAC,uBAAe,IACd,EAAE,EAAE,QAAQ,EACZ,QAAQ,EAAE,CAAC,KAAK,CAAC,WAAW,EAC5B,OAAO,QACP,gBAAgB,EAAC,QAAQ,EACzB,kBAAkB,EAAC,eAAe,YAElC,uBAAC,oBAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,uBAAuB,CAAC,uBAE5C,GACC,GACd,EACN,wBAAC,iBAAS,IACR,SAAS,EAAC,oBAAoB,EAC9B,MAAM,EAAE,QAAQ,EAChB,OAAO,EACL,uBAAC,sBAAc,IACb,OAAO,EAAE,GAAG,EAAE;wBACZ,SAAS,CAAC,KAAK,CAAC,CAAC;wBACjB,kBAAkB,CAAC,IAAI,CAAC,CAAC;oBAC3B,CAAC,sBAGc,aAGnB,uBAAC,iBAAS,CAAC,MAAM,mCAAoC,EACrD,uBAAC,iBAAS,CAAC,IAAI,kCAAiC,IACtC,IACR,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC"}

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

@@ -35,15 +35,10 @@ const Component = (props) => {
             setIsOpen(true);
         }
     }, [isModalOpen, setActiveSpotlight, setIsOpen, targetId, props.isChromatic]);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-justify-center n-gap-token-64", children: [(0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: () => setIsModalOpen(true), children: "Open Modal" }), (0, jsx_runtime_1.jsxs)(react_1.Dialog, { isOpen: isModalOpen, onClose: () => setIsModalOpen(false), "aria-label": "Dialog", modalProps: { className: themeClassName }, children: [(0, jsx_runtime_1.jsx)(react_1.Dialog.Header, { children: "Using Spotlight inside a modal" }), (0, jsx_runtime_1.jsxs)(react_1.Dialog.Description, { className: "n-flex n-flex-col n-gap-token-32", children: [(0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Make sure to set hasAnchorPortal to true for both Spotlight and SpotlightTarget when the target is in a Dialog" }), (0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-justify-center n-gap-token-64", children: [(0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: () => setActiveSpotlight(targetId), children: "Activate Spotlight" }), (0, jsx_runtime_1.jsx)(react_1.SpotlightTarget, { id: targetId, hasPulse: !props.isChromatic, borderRadius: 4, backgroundColor: "var(--theme-color-neutral-bg-weak)", indicatorVariant: "border", hasAnchorPortal: true, children: (0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: () => alert('Target button clicked'), children: "Target" }) })] })] }), (0, jsx_runtime_1.jsxs)(react_1.Spotlight, { placement: "bottom-end-top-end", hasAnchorPortal: true, target: targetId, actions: [
-                            {
-                                label: 'Close',
-                                onClick: () => {
-                                    setIsOpen(false);
-                                    setActiveSpotlight(null);
-                                },
-                            },
-                        ], children: [(0, jsx_runtime_1.jsx)(react_1.Spotlight.Header, { children: "This is a header" }), (0, jsx_runtime_1.jsx)(react_1.Spotlight.Body, { children: "This is content" })] })] })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-justify-center n-gap-token-64", children: [(0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: () => setIsModalOpen(true), children: "Open Dialog" }), (0, jsx_runtime_1.jsxs)(react_1.Dialog, { isOpen: isModalOpen, onClose: () => setIsModalOpen(false), "aria-label": "Dialog", className: themeClassName, children: [(0, jsx_runtime_1.jsx)(react_1.Dialog.Header, { children: "Using Spotlight inside a dialog" }), (0, jsx_runtime_1.jsxs)(react_1.Dialog.Content, { className: "n-flex n-flex-col n-gap-token-32", children: [(0, jsx_runtime_1.jsxs)(react_1.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", (0, jsx_runtime_1.jsx)("code", { children: "--spotlight-z-index" }), " css variable."] }), (0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-justify-center n-gap-token-64", children: [(0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: () => setActiveSpotlight(targetId), children: "Activate Spotlight" }), (0, jsx_runtime_1.jsx)(react_1.SpotlightTarget, { id: targetId, hasPulse: !props.isChromatic, asChild: true, indicatorVariant: "border", children: (0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: () => alert('Target button clicked'), children: "Target" }) })] })] }), (0, jsx_runtime_1.jsxs)(react_1.Spotlight, { placement: "bottom-end-top-end", target: targetId, actions: (0, jsx_runtime_1.jsx)(react_1.OutlinedButton, { onClick: () => {
+                                setIsOpen(false);
+                                setActiveSpotlight(null);
+                            }, children: "Close" }), children: [(0, jsx_runtime_1.jsx)(react_1.Spotlight.Header, { children: "This is a header" }), (0, jsx_runtime_1.jsx)(react_1.Spotlight.Body, { children: "This is content" })] })] })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=spotlight-in-dialog.story.js.map

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

@@ -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,mDAAiD;AAEjD,4CAQ0B;AAC1B,iCAA4C;AAM5C,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAE,EAAE;IAC1C,MAAM,EAAE,cAAc,EAAE,GAAG,IAAA,sBAAc,GAAE,CAAC;IAC5C,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAE,GAAG,IAAA,2BAAmB,GAAE,CAAC;IAEhE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,IAAA,gBAAQ,EAAU,KAAK,CAAC,WAAW,CAAC,CAAC;IAC3E,MAAM,QAAQ,GAAG,eAAe,cAAc,EAAE,CAAC;IAEjD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,KAAK,CAAC,WAAW,IAAI,WAAW,EAAE,CAAC;YACrC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;YAC7B,SAAS,CAAC,IAAI,CAAC,CAAC;QAClB,CAAC;IACH,CAAC,EAAE,CAAC,WAAW,EAAE,kBAAkB,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC;IAE9E,OAAO,CACL,iCAAK,SAAS,EAAC,wCAAwC,aACrD,uBAAC,oBAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,IAAI,CAAC,2BAElC,EACf,wBAAC,cAAM,IACL,MAAM,EAAE,WAAW,EACnB,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,gBACzB,QAAQ,EACnB,UAAU,EAAE,EAAE,SAAS,EAAE,cAAc,EAAE,aAEzC,uBAAC,cAAM,CAAC,MAAM,iDAA+C,EAC7D,wBAAC,cAAM,CAAC,WAAW,IAAC,SAAS,EAAC,kCAAkC,aAC9D,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,+HAGpB,EACb,iCAAK,SAAS,EAAC,wCAAwC,aACrD,uBAAC,oBAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,QAAQ,CAAC,mCAE1C,EACf,uBAAC,uBAAe,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,uBAAC,oBAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,uBAAuB,CAAC,uBAE5C,GACC,IACd,IACa,EACrB,wBAAC,iBAAS,IACR,SAAS,EAAC,oBAAoB,EAC9B,eAAe,EAAE,IAAI,EACrB,MAAM,EAAE,QAAQ,EAChB,OAAO,EAAE;4BACP;gCACE,KAAK,EAAE,OAAO;gCACd,OAAO,EAAE,GAAG,EAAE;oCACZ,SAAS,CAAC,KAAK,CAAC,CAAC;oCACjB,kBAAkB,CAAC,IAAI,CAAC,CAAC;gCAC3B,CAAC;6BACF;yBACF,aAED,uBAAC,iBAAS,CAAC,MAAM,mCAAoC,EACrD,uBAAC,iBAAS,CAAC,IAAI,kCAAiC,IACtC,IACL,IACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC"}
+{"version":3,"file":"spotlight-in-dialog.story.js","sourceRoot":"","sources":["../../../../src/spotlight/stories/spotlight-in-dialog.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAS0B;AAC1B,iCAA4C;AAE5C,MAAM,SAAS,GAAG,CAAC,KAA+B,EAAE,EAAE;IACpD,MAAM,EAAE,cAAc,EAAE,GAAG,IAAA,sBAAc,GAAE,CAAC;IAC5C,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAE,GAAG,IAAA,2BAAmB,GAAE,CAAC;IAEhE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,IAAA,gBAAQ,EAAU,KAAK,CAAC,WAAW,CAAC,CAAC;IAC3E,MAAM,QAAQ,GAAG,eAAe,cAAc,EAAE,CAAC;IAEjD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,KAAK,CAAC,WAAW,IAAI,WAAW,EAAE,CAAC;YACrC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;YAC7B,SAAS,CAAC,IAAI,CAAC,CAAC;QAClB,CAAC;IACH,CAAC,EAAE,CAAC,WAAW,EAAE,kBAAkB,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC;IAE9E,OAAO,CACL,iCAAK,SAAS,EAAC,wCAAwC,aACrD,uBAAC,oBAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,IAAI,CAAC,4BAElC,EACf,wBAAC,cAAM,IACL,MAAM,EAAE,WAAW,EACnB,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,gBACzB,QAAQ,EACnB,SAAS,EAAE,cAAc,aAEzB,uBAAC,cAAM,CAAC,MAAM,kDAAgD,EAC9D,wBAAC,cAAM,CAAC,OAAO,IAAC,SAAS,EAAC,kCAAkC,aAC1D,wBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,wLAI/B,mEAAgC,sBACrB,EACb,iCAAK,SAAS,EAAC,wCAAwC,aACrD,uBAAC,oBAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,QAAQ,CAAC,mCAE1C,EACf,uBAAC,uBAAe,IACd,EAAE,EAAE,QAAQ,EACZ,QAAQ,EAAE,CAAC,KAAK,CAAC,WAAW,EAC5B,OAAO,QACP,gBAAgB,EAAC,QAAQ,YAEzB,uBAAC,oBAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,uBAAuB,CAAC,uBAE5C,GACC,IACd,IACS,EACjB,wBAAC,iBAAS,IACR,SAAS,EAAC,oBAAoB,EAC9B,MAAM,EAAE,QAAQ,EAChB,OAAO,EACL,uBAAC,sBAAc,IACb,OAAO,EAAE,GAAG,EAAE;gCACZ,SAAS,CAAC,KAAK,CAAC,CAAC;gCACjB,kBAAkB,CAAC,IAAI,CAAC,CAAC;4BAC3B,CAAC,sBAGc,aAGnB,uBAAC,iBAAS,CAAC,MAAM,mCAAoC,EACrD,uBAAC,iBAAS,CAAC,IAAI,kCAAiC,IACtC,IACL,IACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC"}

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

@@ -23,7 +23,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
  */
 require("@neo4j-ndl/base/lib/neo4j-ds-styles.css");
 const react_1 = require("@neo4j-ndl/react");
-const next_1 = require("@neo4j-ndl/react/next");
 const react_2 = require("react");
 const Component = (props) => {
     const { themeClassName } = (0, react_1.useNeedleTheme)();
@@ -39,15 +38,10 @@ const Component = (props) => {
             setIsOpen(true);
         }
     }, [setActiveSpotlight, setIsOpen, targetId, props.isChromatic]);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-h-[500px] n-flex", children: [(0, jsx_runtime_1.jsx)(next_1.SideNavigation, { isExpanded: true, children: (0, jsx_runtime_1.jsxs)(next_1.SideNavigation.List, { children: [(0, jsx_runtime_1.jsx)(next_1.SideNavigation.CategoryHeader, { children: "AuraDB" }), (0, jsx_runtime_1.jsx)(next_1.SideNavigation.NavItem, { as: "button", onClick: () => handleClick('aura-db-instances'), isSelected: isSelected === 'aura-db-instances', label: "Instances" }), (0, jsx_runtime_1.jsx)(next_1.SideNavigation.NavItem, { as: "button", onClick: () => handleClick('aura-db-connect'), isSelected: isSelected === 'aura-db-connect', label: "Connect" }), (0, jsx_runtime_1.jsxs)(next_1.SideNavigation.List, { children: [(0, jsx_runtime_1.jsx)(next_1.SideNavigation.NavItem, { as: "button", onClick: () => handleClick('aura-db-python'), isSelected: isSelected === 'aura-db-python', label: "Python" }), (0, jsx_runtime_1.jsx)(react_1.SpotlightTarget, { id: targetId, hasPulse: !props.isChromatic, borderRadius: 4, backgroundColor: "var(--theme-color-neutral-bg-weak)", indicatorVariant: "point", indicatorPlacement: "top-right", children: (0, jsx_runtime_1.jsx)(next_1.SideNavigation.NavItem, { as: "button", onClick: () => handleClick('aura-db-javascript'), isSelected: isSelected === 'aura-db-javascript', label: "JavaScript" }) })] }), (0, jsx_runtime_1.jsx)(next_1.SideNavigation.CategoryHeader, { children: "AuraDS" }), (0, jsx_runtime_1.jsxs)(next_1.SideNavigation.List, { children: [(0, jsx_runtime_1.jsx)(next_1.SideNavigation.NavItem, { as: "button", onClick: () => handleClick('aura-ds-instances'), isSelected: isSelected === 'aura-ds-instances', label: "Instances" }), (0, jsx_runtime_1.jsx)(next_1.SideNavigation.NavItem, { as: "button", onClick: () => handleClick('aura-ds-getting-started'), isSelected: isSelected === 'aura-ds-getting-started', label: "Getting Started" })] })] }) }), (0, jsx_runtime_1.jsx)("div", { className: "n-w-full n-h-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md n-p-token-16", children: (0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: () => setActiveSpotlight(targetId), children: "Activate Spotlight" }) }), (0, jsx_runtime_1.jsxs)(react_1.Spotlight, { placement: "top-end-top-start", target: targetId, actions: [
-                    {
-                        label: 'Close',
-                        onClick: () => {
-                            setIsOpen(false);
-                            setActiveSpotlight(null);
-                        },
-                    },
-                ], children: [(0, jsx_runtime_1.jsx)(react_1.Spotlight.Header, { children: "This is a header" }), (0, jsx_runtime_1.jsx)(react_1.Spotlight.Body, { children: "This is content" })] })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-h-[500px] n-flex", children: [(0, jsx_runtime_1.jsxs)(react_1.SideNavigation, { isExpanded: true, ariaLabel: "Main side navigation", children: [(0, jsx_runtime_1.jsx)(react_1.SideNavigation.CategoryHeader, { children: "AuraDB" }), (0, jsx_runtime_1.jsx)(react_1.SideNavigation.ListItem, { children: (0, jsx_runtime_1.jsx)(react_1.SideNavigation.NavItem, { onClick: () => handleClick('aura-db-instances'), isActive: isSelected === 'aura-db-instances', label: "Instances" }) }), (0, jsx_runtime_1.jsx)(react_1.SideNavigation.ListItem, { children: (0, jsx_runtime_1.jsx)(react_1.SideNavigation.NavItem, { onClick: () => handleClick('aura-db-connect'), isActive: isSelected === 'aura-db-connect', label: "Connect" }) }), (0, jsx_runtime_1.jsx)(react_1.SideNavigation.ListItem, { children: (0, jsx_runtime_1.jsx)(react_1.SideNavigation.NavItem, { onClick: () => handleClick('aura-db-python'), isActive: isSelected === 'aura-db-python', label: "Python" }) }), (0, jsx_runtime_1.jsx)(react_1.SideNavigation.ListItem, { children: (0, jsx_runtime_1.jsx)(react_1.SpotlightTarget, { id: targetId, hasPulse: !props.isChromatic, borderRadius: 4, indicatorVariant: "point", indicatorPlacement: "top-right", asChild: true, children: (0, jsx_runtime_1.jsx)(react_1.SideNavigation.NavItem, { onClick: () => handleClick('aura-db-javascript'), isActive: isSelected === 'aura-db-javascript', label: "JavaScript" }) }) }), (0, jsx_runtime_1.jsx)(react_1.SideNavigation.CategoryHeader, { children: "AuraDS" }), (0, jsx_runtime_1.jsx)(react_1.SideNavigation.ListItem, { children: (0, jsx_runtime_1.jsx)(react_1.SideNavigation.NavItem, { onClick: () => handleClick('aura-ds-instances'), isActive: isSelected === 'aura-ds-instances', label: "Instances" }) }), (0, jsx_runtime_1.jsx)(react_1.SideNavigation.ListItem, { children: (0, jsx_runtime_1.jsx)(react_1.SideNavigation.NavItem, { onClick: () => handleClick('aura-ds-getting-started'), isActive: isSelected === 'aura-ds-getting-started', label: "Getting Started" }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "n-w-full n-h-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md n-p-token-16", children: (0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: () => setActiveSpotlight(targetId), children: "Activate Spotlight" }) }), (0, jsx_runtime_1.jsxs)(react_1.Spotlight, { placement: "top-end-top-start", target: targetId, actions: (0, jsx_runtime_1.jsx)(react_1.OutlinedButton, { onClick: () => {
+                        setIsOpen(false);
+                        setActiveSpotlight(null);
+                    }, children: "Close" }), children: [(0, jsx_runtime_1.jsx)(react_1.Spotlight.Header, { children: "This is a header" }), (0, jsx_runtime_1.jsx)(react_1.Spotlight.Body, { children: "This is content" })] })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=spotlight-in-side-nav.story.js.map

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

@@ -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/cjs/spotlight/stories/spotlight-on-tabs.story.js

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

package/lib/cjs/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,mDAAiD;AAEjD,4CAS0B;AAC1B,iCAAiC;AAEjC,MAAM,SAAS,GAAG,CAAC,EAAE,QAAQ,GAAG,IAAI,EAA0B,EAAE,EAAE;IAChE,MAAM,EAAE,cAAc,EAAE,GAAG,IAAA,sBAAc,GAAE,CAAC;IAC5C,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAE,GAAG,IAAA,2BAAmB,GAAE,CAAC;IAChE,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAC,GAAG,CAAC,CAAC;IAEhD,MAAM,QAAQ,GAAG,eAAe,cAAc,EAAE,CAAC;IAEjD,OAAO,CACL,iCAAK,SAAS,EAAC,wCAAwC,aACrD,uBAAC,oBAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,QAAQ,CAAC,mCAE1C,EACf,4CACE,wBAAC,YAAI,IAAC,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,YAAY,aAC5C,uBAAC,uBAAe,IACd,EAAE,EAAE,QAAQ,EACZ,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,CAAC,EACf,gBAAgB,EAAC,OAAO,YAExB,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,GACjB,EAClB,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,IAC5B,EACP,uBAAC,YAAI,CAAC,QAAQ,IAAC,SAAS,EAAC,aAAa,EAAC,KAAK,EAAE,SAAS,EAAE,KAAK,EAAC,GAAG,YAChE,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,SAAS,EAAC,aAAa,EAAC,KAAK,EAAE,SAAS,EAAE,KAAK,EAAC,GAAG,YAChE,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,SAAS,EAAC,aAAa,EAAC,KAAK,EAAE,SAAS,EAAE,KAAK,EAAC,GAAG,YAChE,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,IACZ,EACN,wBAAC,iBAAS,IACR,SAAS,EAAC,oBAAoB,EAC9B,MAAM,EAAE,QAAQ,EAChB,OAAO,EACL,uBAAC,sBAAc,IACb,OAAO,EAAE,GAAG,EAAE;wBACZ,SAAS,CAAC,KAAK,CAAC,CAAC;wBACjB,kBAAkB,CAAC,IAAI,CAAC,CAAC;oBAC3B,CAAC,sBAGc,aAGnB,uBAAC,iBAAS,CAAC,MAAM,mCAAoC,EACrD,uBAAC,iBAAS,CAAC,IAAI,kCAAiC,IACtC,IACR,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC"}

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

@@ -27,7 +27,7 @@ const icons_1 = require("@neo4j-ndl/react/icons");
 const Component = () => {
     const { themeClassName } = (0, react_1.useNeedleTheme)();
     const { setActiveSpotlight } = (0, react_1.useSpotlightContext)();
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-justify-center n-gap-token-64", children: [(0, jsx_runtime_1.jsx)(react_1.OutlinedButton, { onClick: () => setActiveSpotlight(`test-target-1-${themeClassName}`), children: "Start tour" }), (0, jsx_runtime_1.jsx)(react_1.SpotlightTarget, { id: `test-target-1-${themeClassName}`, hasPulse: true, borderRadius: 4, children: (0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: () => alert('Target 1 clicked'), children: "Target 1" }) }), (0, jsx_runtime_1.jsx)(react_1.SpotlightTarget, { id: `test-target-2-${themeClassName}`, hasPulse: true, borderRadius: 4, children: (0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: () => alert('Target 2 clicked'), children: "Target 2" }) }), (0, jsx_runtime_1.jsx)(react_1.SpotlightTarget, { id: `test-target-3-${themeClassName}`, hasPulse: true, borderRadius: 4, children: (0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: () => alert('Target 3 clicked'), children: "Target 3" }) }), (0, jsx_runtime_1.jsx)(react_1.SpotlightTour, { onAction: (target, action) => console.info(`Action ${action} was performed in spotlight ${target}`), spotlights: [
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-justify-center n-gap-token-64", children: [(0, jsx_runtime_1.jsx)(react_1.OutlinedButton, { onClick: () => setActiveSpotlight(`test-target-1-${themeClassName}`), children: "Start tour" }), (0, jsx_runtime_1.jsx)(react_1.SpotlightTarget, { id: `test-target-1-${themeClassName}`, hasPulse: true, asChild: true, children: (0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: () => alert('Target 1 clicked'), children: "Target 1" }) }), (0, jsx_runtime_1.jsx)(react_1.SpotlightTarget, { id: `test-target-2-${themeClassName}`, hasPulse: true, asChild: true, children: (0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: () => alert('Target 2 clicked'), children: "Target 2" }) }), (0, jsx_runtime_1.jsx)(react_1.SpotlightTarget, { id: `test-target-3-${themeClassName}`, hasPulse: true, asChild: true, children: (0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: () => alert('Target 3 clicked'), children: "Target 3" }) }), (0, jsx_runtime_1.jsx)(react_1.SpotlightTour, { onAction: (target, action) => console.info(`Action ${action} was performed in spotlight ${target}`), spotlights: [
                     {
                         children: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Spotlight.Label, { children: "NEW" }), (0, jsx_runtime_1.jsx)(react_1.Spotlight.Header, { children: "This is a header" }), (0, jsx_runtime_1.jsx)(react_1.Spotlight.Body, { children: "This is content" })] })),
                         target: `test-target-1-${themeClassName}`,

package/lib/cjs/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,mDAAiD;AAEjD,4CAQ0B;AAC1B,kDAAgE;AAEhE,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,EAAE,cAAc,EAAE,GAAG,IAAA,sBAAc,GAAE,CAAC;IAC5C,MAAM,EAAE,kBAAkB,EAAE,GAAG,IAAA,2BAAmB,GAAE,CAAC;IAErD,OAAO,CACL,iCAAK,SAAS,EAAC,wCAAwC,aACrD,uBAAC,sBAAc,IACb,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,iBAAiB,cAAc,EAAE,CAAC,2BAGrD,EACjB,uBAAC,uBAAe,IACd,EAAE,EAAE,iBAAiB,cAAc,EAAE,EACrC,QAAQ,QACR,YAAY,EAAE,CAAC,YAEf,uBAAC,oBAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,kBAAkB,CAAC,yBAEvC,GACC,EAClB,uBAAC,uBAAe,IACd,EAAE,EAAE,iBAAiB,cAAc,EAAE,EACrC,QAAQ,QACR,YAAY,EAAE,CAAC,YAEf,uBAAC,oBAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,kBAAkB,CAAC,yBAEvC,GACC,EAClB,uBAAC,uBAAe,IACd,EAAE,EAAE,iBAAiB,cAAc,EAAE,EACrC,QAAQ,QACR,YAAY,EAAE,CAAC,YAEf,uBAAC,oBAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,kBAAkB,CAAC,yBAEvC,GACC,EAClB,uBAAC,qBAAa,IACZ,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE,CAC3B,OAAO,CAAC,IAAI,CAAC,UAAU,MAAM,+BAA+B,MAAM,EAAE,CAAC,EAEvE,UAAU,EAAE;oBACV;wBACE,QAAQ,EAAE,CACR,6DACE,uBAAC,iBAAS,CAAC,KAAK,sBAAsB,EACtC,uBAAC,iBAAS,CAAC,MAAM,mCAAoC,EACrD,uBAAC,iBAAS,CAAC,IAAI,kCAAiC,IAC/C,CACJ;wBACD,MAAM,EAAE,iBAAiB,cAAc,EAAE;qBAC1C;oBACD;wBACE,QAAQ,EAAE,CACR,6DACE,uBAAC,iBAAS,CAAC,WAAW,cACpB,uBAAC,8BAAsB,KAAG,GACJ,EACxB,uBAAC,iBAAS,CAAC,MAAM,mCAAoC,EACrD,uBAAC,iBAAS,CAAC,IAAI,kCAAiC,IAC/C,CACJ;wBACD,MAAM,EAAE,iBAAiB,cAAc,EAAE;qBAC1C;oBACD;wBACE,QAAQ,EAAE,CACR,6DACE,uBAAC,iBAAS,CAAC,KAAK,IACd,GAAG,EAAC,wVAAwV,EAC5V,GAAG,EAAC,eAAe,GACnB,EACF,uBAAC,iBAAS,CAAC,IAAI,kCAAiC,IAC/C,CACJ;wBACD,MAAM,EAAE,iBAAiB,cAAc,EAAE;qBAC1C;iBACF,GACD,IACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC"}
+{"version":3,"file":"spotlight-tour.story.js","sourceRoot":"","sources":["../../../../src/spotlight/stories/spotlight-tour.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAQ0B;AAC1B,kDAAgE;AAEhE,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,EAAE,cAAc,EAAE,GAAG,IAAA,sBAAc,GAAE,CAAC;IAC5C,MAAM,EAAE,kBAAkB,EAAE,GAAG,IAAA,2BAAmB,GAAE,CAAC;IAErD,OAAO,CACL,iCAAK,SAAS,EAAC,wCAAwC,aACrD,uBAAC,sBAAc,IACb,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,iBAAiB,cAAc,EAAE,CAAC,2BAGrD,EACjB,uBAAC,uBAAe,IAAC,EAAE,EAAE,iBAAiB,cAAc,EAAE,EAAE,QAAQ,QAAC,OAAO,kBACtE,uBAAC,oBAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,kBAAkB,CAAC,yBAEvC,GACC,EAClB,uBAAC,uBAAe,IAAC,EAAE,EAAE,iBAAiB,cAAc,EAAE,EAAE,QAAQ,QAAC,OAAO,kBACtE,uBAAC,oBAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,kBAAkB,CAAC,yBAEvC,GACC,EAClB,uBAAC,uBAAe,IAAC,EAAE,EAAE,iBAAiB,cAAc,EAAE,EAAE,QAAQ,QAAC,OAAO,kBACtE,uBAAC,oBAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,kBAAkB,CAAC,yBAEvC,GACC,EAClB,uBAAC,qBAAa,IACZ,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE,CAC3B,OAAO,CAAC,IAAI,CAAC,UAAU,MAAM,+BAA+B,MAAM,EAAE,CAAC,EAEvE,UAAU,EAAE;oBACV;wBACE,QAAQ,EAAE,CACR,6DACE,uBAAC,iBAAS,CAAC,KAAK,sBAAsB,EACtC,uBAAC,iBAAS,CAAC,MAAM,mCAAoC,EACrD,uBAAC,iBAAS,CAAC,IAAI,kCAAiC,IAC/C,CACJ;wBACD,MAAM,EAAE,iBAAiB,cAAc,EAAE;qBAC1C;oBACD;wBACE,QAAQ,EAAE,CACR,6DACE,uBAAC,iBAAS,CAAC,WAAW,cACpB,uBAAC,8BAAsB,KAAG,GACJ,EACxB,uBAAC,iBAAS,CAAC,MAAM,mCAAoC,EACrD,uBAAC,iBAAS,CAAC,IAAI,kCAAiC,IAC/C,CACJ;wBACD,MAAM,EAAE,iBAAiB,cAAc,EAAE;qBAC1C;oBACD;wBACE,QAAQ,EAAE,CACR,6DACE,uBAAC,iBAAS,CAAC,KAAK,IACd,GAAG,EAAC,wVAAwV,EAC5V,GAAG,EAAC,eAAe,GACnB,EACF,uBAAC,iBAAS,CAAC,IAAI,kCAAiC,IAC/C,CACJ;wBACD,MAAM,EAAE,iBAAiB,cAAc,EAAE;qBAC1C;iBACF,GACD,IACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC"}

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

@@ -35,15 +35,10 @@ const Component = (props) => {
             setIsOpen(true);
         }
     }, [setActiveSpotlight, setIsOpen, targetId, props.isChromatic]);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-justify-center n-gap-token-64", children: [(0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: () => setActiveSpotlight(targetId), children: "Activate Spotlight" }), (0, jsx_runtime_1.jsx)(react_1.SpotlightTarget, { id: targetId, hasPulse: !props.isChromatic, borderRadius: 4, backgroundColor: "var(--theme-color-neutral-bg-weak)", indicatorVariant: "border", children: (0, jsx_runtime_1.jsx)(react_1.TextButton, { onClick: () => alert('Target button clicked'), children: "Target" }) }), (0, jsx_runtime_1.jsxs)(react_1.Spotlight, { placement: "bottom-end-top-end", target: targetId, actions: [
-                    {
-                        label: 'Close',
-                        onClick: () => {
-                            setIsOpen(false);
-                            setActiveSpotlight(null);
-                        },
-                    },
-                ], children: [(0, jsx_runtime_1.jsx)(react_1.Spotlight.IconWrapper, { children: (0, jsx_runtime_1.jsx)(icons_1.FingerPrintIconOutline, {}) }), (0, jsx_runtime_1.jsx)(react_1.Spotlight.Header, { children: "This is a header" }), (0, jsx_runtime_1.jsx)(react_1.Spotlight.Body, { children: "This is content" })] })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-justify-center n-gap-token-64", children: [(0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: () => setActiveSpotlight(targetId), children: "Activate Spotlight" }), (0, jsx_runtime_1.jsx)(react_1.SpotlightTarget, { id: targetId, hasPulse: !props.isChromatic, indicatorVariant: "border", asChild: true, children: (0, jsx_runtime_1.jsx)(react_1.TextButton, { onClick: () => alert('Target button clicked'), children: "Target" }) }), (0, jsx_runtime_1.jsxs)(react_1.Spotlight, { placement: "bottom-end-top-end", target: targetId, actions: (0, jsx_runtime_1.jsx)(react_1.OutlinedButton, { onClick: () => {
+                        setIsOpen(false);
+                        setActiveSpotlight(null);
+                    }, children: "Close" }), children: [(0, jsx_runtime_1.jsx)(react_1.Spotlight.IconWrapper, { children: (0, jsx_runtime_1.jsx)(icons_1.FingerPrintIconOutline, {}) }), (0, jsx_runtime_1.jsx)(react_1.Spotlight.Header, { children: "This is a header" }), (0, jsx_runtime_1.jsx)(react_1.Spotlight.Body, { children: "This is content" })] })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=spotlight-with-icon.story.js.map

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

@@ -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,mDAAiD;AAEjD,4CAO0B;AAC1B,kDAAgE;AAChE,iCAAkC;AAMlC,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAE,EAAE;IAC1C,MAAM,EAAE,cAAc,EAAE,GAAG,IAAA,sBAAc,GAAE,CAAC;IAC5C,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAE,GAAG,IAAA,2BAAmB,GAAE,CAAC;IAEhE,MAAM,QAAQ,GAAG,eAAe,cAAc,EAAE,CAAC;IAEjD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,KAAK,CAAC,WAAW,EAAE,CAAC;YACtB,kBAAkB,CAAC,QAAQ,CAAC,CAAC;YAC7B,SAAS,CAAC,IAAI,CAAC,CAAC;QAClB,CAAC;IACH,CAAC,EAAE,CAAC,kBAAkB,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC;IAEjE,OAAO,CACL,iCAAK,SAAS,EAAC,wCAAwC,aACrD,uBAAC,oBAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,QAAQ,CAAC,mCAE1C,EACf,uBAAC,uBAAe,IACd,EAAE,EAAE,QAAQ,EACZ,QAAQ,EAAE,CAAC,KAAK,CAAC,WAAW,EAC5B,YAAY,EAAE,CAAC,EACf,eAAe,EAAC,oCAAoC,EACpD,gBAAgB,EAAC,QAAQ,YAEzB,uBAAC,kBAAU,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,uBAAuB,CAAC,uBAE5C,GACG,EAClB,wBAAC,iBAAS,IACR,SAAS,EAAC,oBAAoB,EAC9B,MAAM,EAAE,QAAQ,EAChB,OAAO,EAAE;oBACP;wBACE,KAAK,EAAE,OAAO;wBACd,OAAO,EAAE,GAAG,EAAE;4BACZ,SAAS,CAAC,KAAK,CAAC,CAAC;4BACjB,kBAAkB,CAAC,IAAI,CAAC,CAAC;wBAC3B,CAAC;qBACF;iBACF,aAED,uBAAC,iBAAS,CAAC,WAAW,cACpB,uBAAC,8BAAsB,KAAG,GACJ,EACxB,uBAAC,iBAAS,CAAC,MAAM,mCAAoC,EACrD,uBAAC,iBAAS,CAAC,IAAI,kCAAiC,IACtC,IACR,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC"}
+{"version":3,"file":"spotlight-with-icon.story.js","sourceRoot":"","sources":["../../../../src/spotlight/stories/spotlight-with-icon.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAQ0B;AAC1B,kDAAgE;AAChE,iCAAkC;AAElC,MAAM,SAAS,GAAG,CAAC,KAA+B,EAAE,EAAE;IACpD,MAAM,EAAE,cAAc,EAAE,GAAG,IAAA,sBAAc,GAAE,CAAC;IAC5C,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAE,GAAG,IAAA,2BAAmB,GAAE,CAAC;IAEhE,MAAM,QAAQ,GAAG,eAAe,cAAc,EAAE,CAAC;IAEjD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,KAAK,CAAC,WAAW,EAAE,CAAC;YACtB,kBAAkB,CAAC,QAAQ,CAAC,CAAC;YAC7B,SAAS,CAAC,IAAI,CAAC,CAAC;QAClB,CAAC;IACH,CAAC,EAAE,CAAC,kBAAkB,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC;IAEjE,OAAO,CACL,iCAAK,SAAS,EAAC,wCAAwC,aACrD,uBAAC,oBAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,QAAQ,CAAC,mCAE1C,EACf,uBAAC,uBAAe,IACd,EAAE,EAAE,QAAQ,EACZ,QAAQ,EAAE,CAAC,KAAK,CAAC,WAAW,EAC5B,gBAAgB,EAAC,QAAQ,EACzB,OAAO,kBAEP,uBAAC,kBAAU,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,uBAAuB,CAAC,uBAE5C,GACG,EAClB,wBAAC,iBAAS,IACR,SAAS,EAAC,oBAAoB,EAC9B,MAAM,EAAE,QAAQ,EAChB,OAAO,EACL,uBAAC,sBAAc,IACb,OAAO,EAAE,GAAG,EAAE;wBACZ,SAAS,CAAC,KAAK,CAAC,CAAC;wBACjB,kBAAkB,CAAC,IAAI,CAAC,CAAC;oBAC3B,CAAC,sBAGc,aAGnB,uBAAC,iBAAS,CAAC,WAAW,cACpB,uBAAC,8BAAsB,KAAG,GACJ,EACxB,uBAAC,iBAAS,CAAC,MAAM,mCAAoC,EACrD,uBAAC,iBAAS,CAAC,IAAI,kCAAiC,IACtC,IACR,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC"}

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

@@ -34,15 +34,10 @@ const Component = (props) => {
             setIsOpen(true);
         }
     }, [setActiveSpotlight, setIsOpen, targetId, props.isChromatic]);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-justify-center n-gap-token-64", children: [(0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: () => setActiveSpotlight(targetId), children: "Activate Spotlight" }), (0, jsx_runtime_1.jsx)(react_1.SpotlightTarget, { id: targetId, hasPulse: !props.isChromatic, borderRadius: 4, backgroundColor: "var(--theme-color-neutral-bg-weak)", children: (0, jsx_runtime_1.jsx)(react_1.TextButton, { onClick: () => alert('Target button clicked'), children: "Target" }) }), (0, jsx_runtime_1.jsxs)(react_1.Spotlight, { placement: "bottom-end-top-end", target: targetId, actions: [
-                    {
-                        label: 'Close',
-                        onClick: () => {
-                            setIsOpen(false);
-                            setActiveSpotlight(null);
-                        },
-                    },
-                ], children: [(0, jsx_runtime_1.jsx)(react_1.Spotlight.Image, { src: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjY2NjIi8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZmlsbD0iIzMzMyIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZHk9Ii4zZW0iPkV4YW1wbGUgSW1hZ2U8L3RleHQ+PC9zdmc+", alt: "example image" }), (0, jsx_runtime_1.jsx)(react_1.Spotlight.Header, { children: "This is a header" }), (0, jsx_runtime_1.jsx)(react_1.Spotlight.Body, { children: "This is content" })] })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-justify-center n-gap-token-64", children: [(0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: () => setActiveSpotlight(targetId), children: "Activate Spotlight" }), (0, jsx_runtime_1.jsx)(react_1.SpotlightTarget, { id: targetId, hasPulse: !props.isChromatic, asChild: true, children: (0, jsx_runtime_1.jsx)(react_1.TextButton, { onClick: () => alert('Target button clicked'), children: "Target" }) }), (0, jsx_runtime_1.jsxs)(react_1.Spotlight, { placement: "bottom-end-top-end", target: targetId, actions: (0, jsx_runtime_1.jsx)(react_1.OutlinedButton, { onClick: () => {
+                        setIsOpen(false);
+                        setActiveSpotlight(null);
+                    }, children: "Close" }), children: [(0, jsx_runtime_1.jsx)(react_1.Spotlight.Image, { src: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjY2NjIi8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZmlsbD0iIzMzMyIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZHk9Ii4zZW0iPkV4YW1wbGUgSW1hZ2U8L3RleHQ+PC9zdmc+", alt: "example image" }), (0, jsx_runtime_1.jsx)(react_1.Spotlight.Header, { children: "This is a header" }), (0, jsx_runtime_1.jsx)(react_1.Spotlight.Body, { children: "This is content" })] })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=spotlight-with-image.story.js.map