@neo4j-ndl/react 4.25.7 → 5.0.0-alpha.0.3d763f7

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

@@ -38,7 +38,7 @@ 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.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: () => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "h-[500px] 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", shouldRenderAsChild: 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: "w-full h-full flex flex-col items-center justify-center rounded-md 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" })] })] }));

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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","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport {\n  FilledButton,\n  OutlinedButton,\n  SideNavigation,\n  Spotlight,\n  SpotlightTarget,\n  useNeedleTheme,\n  useSpotlightContext,\n} from '@neo4j-ndl/react';\nimport { useEffect, useState } from 'react';\n\nconst Component = (props: { isChromatic: boolean }) => {\n  const { themeClassName } = useNeedleTheme();\n  const { setActiveSpotlight, setIsOpen } = useSpotlightContext();\n\n  const [isSelected, setIsSelected] = useState<string | null>(\n    'aura-db-instances',\n  );\n  const targetId = `test-target-${themeClassName}`;\n\n  const handleClick = (item: string) => {\n    setIsSelected(item);\n  };\n\n  useEffect(() => {\n    if (props.isChromatic) {\n      setActiveSpotlight(targetId);\n      setIsOpen(true);\n    }\n  }, [setActiveSpotlight, setIsOpen, targetId, props.isChromatic]);\n\n  return (\n    <div className=\"n-h-[500px] n-flex\">\n      <SideNavigation isExpanded={true} ariaLabel=\"Main side navigation\">\n        <SideNavigation.CategoryHeader>AuraDB</SideNavigation.CategoryHeader>\n        <SideNavigation.ListItem>\n          <SideNavigation.NavItem\n            onClick={() => handleClick('aura-db-instances')}\n            isActive={isSelected === 'aura-db-instances'}\n            label=\"Instances\"\n          />\n        </SideNavigation.ListItem>\n        <SideNavigation.ListItem>\n          <SideNavigation.NavItem\n            onClick={() => handleClick('aura-db-connect')}\n            isActive={isSelected === 'aura-db-connect'}\n            label=\"Connect\"\n          />\n        </SideNavigation.ListItem>\n        <SideNavigation.ListItem>\n          <SideNavigation.NavItem\n            onClick={() => handleClick('aura-db-python')}\n            isActive={isSelected === 'aura-db-python'}\n            label=\"Python\"\n          />\n        </SideNavigation.ListItem>\n        <SideNavigation.ListItem>\n          <SpotlightTarget\n            id={targetId}\n            hasPulse={!props.isChromatic}\n            borderRadius={4}\n            indicatorVariant=\"point\"\n            indicatorPlacement=\"top-right\"\n            asChild\n          >\n            <SideNavigation.NavItem\n              onClick={() => handleClick('aura-db-javascript')}\n              isActive={isSelected === 'aura-db-javascript'}\n              label=\"JavaScript\"\n            />\n          </SpotlightTarget>\n        </SideNavigation.ListItem>\n        <SideNavigation.CategoryHeader>AuraDS</SideNavigation.CategoryHeader>\n        <SideNavigation.ListItem>\n          <SideNavigation.NavItem\n            onClick={() => handleClick('aura-ds-instances')}\n            isActive={isSelected === 'aura-ds-instances'}\n            label=\"Instances\"\n          />\n        </SideNavigation.ListItem>\n        <SideNavigation.ListItem>\n          <SideNavigation.NavItem\n            onClick={() => handleClick('aura-ds-getting-started')}\n            isActive={isSelected === 'aura-ds-getting-started'}\n            label=\"Getting Started\"\n          />\n        </SideNavigation.ListItem>\n      </SideNavigation>\n      <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\">\n        <FilledButton onClick={() => setActiveSpotlight(targetId)}>\n          Activate Spotlight\n        </FilledButton>\n      </div>\n      <Spotlight\n        placement=\"top-end-top-start\"\n        target={targetId}\n        actions={\n          <OutlinedButton\n            onClick={() => {\n              setIsOpen(false);\n              setActiveSpotlight(null);\n            }}\n          >\n            Close\n          </OutlinedButton>\n        }\n      >\n        <Spotlight.Header>This is a header</Spotlight.Header>\n        <Spotlight.Body>This is content</Spotlight.Body>\n      </Spotlight>\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"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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","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport {\n  FilledButton,\n  OutlinedButton,\n  SideNavigation,\n  Spotlight,\n  SpotlightTarget,\n  useNeedleTheme,\n  useSpotlightContext,\n} from '@neo4j-ndl/react';\nimport { useEffect, useState } from 'react';\n\nconst Component = (props: { isChromatic: boolean }) => {\n  const { themeClassName } = useNeedleTheme();\n  const { setActiveSpotlight, setIsOpen } = useSpotlightContext();\n\n  const [isSelected, setIsSelected] = useState<string | null>(\n    'aura-db-instances',\n  );\n  const targetId = `test-target-${themeClassName}`;\n\n  const handleClick = (item: string) => {\n    setIsSelected(item);\n  };\n\n  useEffect(() => {\n    if (props.isChromatic) {\n      setActiveSpotlight(targetId);\n      setIsOpen(true);\n    }\n  }, [setActiveSpotlight, setIsOpen, targetId, props.isChromatic]);\n\n  return (\n    <div className=\"h-[500px] flex\">\n      <SideNavigation isExpanded={true} ariaLabel=\"Main side navigation\">\n        <SideNavigation.CategoryHeader>AuraDB</SideNavigation.CategoryHeader>\n        <SideNavigation.ListItem>\n          <SideNavigation.NavItem\n            onClick={() => handleClick('aura-db-instances')}\n            isActive={isSelected === 'aura-db-instances'}\n            label=\"Instances\"\n          />\n        </SideNavigation.ListItem>\n        <SideNavigation.ListItem>\n          <SideNavigation.NavItem\n            onClick={() => handleClick('aura-db-connect')}\n            isActive={isSelected === 'aura-db-connect'}\n            label=\"Connect\"\n          />\n        </SideNavigation.ListItem>\n        <SideNavigation.ListItem>\n          <SideNavigation.NavItem\n            onClick={() => handleClick('aura-db-python')}\n            isActive={isSelected === 'aura-db-python'}\n            label=\"Python\"\n          />\n        </SideNavigation.ListItem>\n        <SideNavigation.ListItem>\n          <SpotlightTarget\n            id={targetId}\n            hasPulse={!props.isChromatic}\n            borderRadius={4}\n            indicatorVariant=\"point\"\n            indicatorPlacement=\"top-right\"\n            shouldRenderAsChild\n          >\n            <SideNavigation.NavItem\n              onClick={() => handleClick('aura-db-javascript')}\n              isActive={isSelected === 'aura-db-javascript'}\n              label=\"JavaScript\"\n            />\n          </SpotlightTarget>\n        </SideNavigation.ListItem>\n        <SideNavigation.CategoryHeader>AuraDS</SideNavigation.CategoryHeader>\n        <SideNavigation.ListItem>\n          <SideNavigation.NavItem\n            onClick={() => handleClick('aura-ds-instances')}\n            isActive={isSelected === 'aura-ds-instances'}\n            label=\"Instances\"\n          />\n        </SideNavigation.ListItem>\n        <SideNavigation.ListItem>\n          <SideNavigation.NavItem\n            onClick={() => handleClick('aura-ds-getting-started')}\n            isActive={isSelected === 'aura-ds-getting-started'}\n            label=\"Getting Started\"\n          />\n        </SideNavigation.ListItem>\n      </SideNavigation>\n      <div className=\"w-full h-full flex flex-col items-center justify-center rounded-md p-token-16\">\n        <FilledButton onClick={() => setActiveSpotlight(targetId)}>\n          Activate Spotlight\n        </FilledButton>\n      </div>\n      <Spotlight\n        placement=\"top-end-top-start\"\n        target={targetId}\n        actions={\n          <OutlinedButton\n            onClick={() => {\n              setIsOpen(false);\n              setActiveSpotlight(null);\n            }}\n          >\n            Close\n          </OutlinedButton>\n        }\n      >\n        <Spotlight.Header>This is a header</Spotlight.Header>\n        <Spotlight.Body>This is content</Spotlight.Body>\n      </Spotlight>\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/spotlight/stories/spotlight-on-tabs.story.js

@@ -29,7 +29,7 @@ const Component = ({ hasPulse = true }) => {
     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: () => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex justify-center 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: "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: "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: "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" })] })] }));

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

@@ -1 +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","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport {\n  FilledButton,\n  OutlinedButton,\n  Spotlight,\n  SpotlightTarget,\n  Tabs,\n  Typography,\n  useNeedleTheme,\n  useSpotlightContext,\n} from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\nconst Component = ({ hasPulse = true }: { hasPulse?: boolean }) => {\n  const { themeClassName } = useNeedleTheme();\n  const { setIsOpen, setActiveSpotlight } = useSpotlightContext();\n  const [tabsValue, setTabsValue] = useState('0');\n\n  const targetId = `test-target-${themeClassName}`;\n\n  return (\n    <div className=\"n-flex n-justify-center n-gap-token-10\">\n      <FilledButton onClick={() => setActiveSpotlight(targetId)}>\n        Activate Spotlight\n      </FilledButton>\n      <div>\n        <Tabs value={tabsValue} onChange={setTabsValue}>\n          <SpotlightTarget\n            id={targetId}\n            hasPulse={hasPulse}\n            borderRadius={4}\n            indicatorVariant=\"point\"\n          >\n            <Tabs.Tab id=\"0\">Tab 1</Tabs.Tab>\n          </SpotlightTarget>\n          <Tabs.Tab id=\"1\">Tab 2</Tabs.Tab>\n          <Tabs.Tab id=\"2\">Tab 3</Tabs.Tab>\n        </Tabs>\n        <Tabs.TabPanel className=\"n-p-token-4\" value={tabsValue} tabId=\"0\">\n          <Typography variant=\"body-medium\">Tab 1 content</Typography>\n        </Tabs.TabPanel>\n        <Tabs.TabPanel className=\"n-p-token-4\" value={tabsValue} tabId=\"1\">\n          <Typography variant=\"body-medium\">Tab 2 content</Typography>\n        </Tabs.TabPanel>\n        <Tabs.TabPanel className=\"n-p-token-4\" value={tabsValue} tabId=\"2\">\n          <Typography variant=\"body-medium\">Tab 3 content</Typography>\n        </Tabs.TabPanel>\n      </div>\n      <Spotlight\n        placement=\"bottom-end-top-end\"\n        target={targetId}\n        actions={\n          <OutlinedButton\n            onClick={() => {\n              setIsOpen(false);\n              setActiveSpotlight(null);\n            }}\n          >\n            Close\n          </OutlinedButton>\n        }\n      >\n        <Spotlight.Header>This is a header</Spotlight.Header>\n        <Spotlight.Body>This is content</Spotlight.Body>\n      </Spotlight>\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"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,kCAAkC,aAC/C,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,WAAW,EAAC,KAAK,EAAE,SAAS,EAAE,KAAK,EAAC,GAAG,YAC9D,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,SAAS,EAAC,WAAW,EAAC,KAAK,EAAE,SAAS,EAAE,KAAK,EAAC,GAAG,YAC9D,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,SAAS,EAAC,WAAW,EAAC,KAAK,EAAE,SAAS,EAAE,KAAK,EAAC,GAAG,YAC9D,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","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport {\n  FilledButton,\n  OutlinedButton,\n  Spotlight,\n  SpotlightTarget,\n  Tabs,\n  Typography,\n  useNeedleTheme,\n  useSpotlightContext,\n} from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\nconst Component = ({ hasPulse = true }: { hasPulse?: boolean }) => {\n  const { themeClassName } = useNeedleTheme();\n  const { setIsOpen, setActiveSpotlight } = useSpotlightContext();\n  const [tabsValue, setTabsValue] = useState('0');\n\n  const targetId = `test-target-${themeClassName}`;\n\n  return (\n    <div className=\"flex justify-center gap-token-10\">\n      <FilledButton onClick={() => setActiveSpotlight(targetId)}>\n        Activate Spotlight\n      </FilledButton>\n      <div>\n        <Tabs value={tabsValue} onChange={setTabsValue}>\n          <SpotlightTarget\n            id={targetId}\n            hasPulse={hasPulse}\n            borderRadius={4}\n            indicatorVariant=\"point\"\n          >\n            <Tabs.Tab id=\"0\">Tab 1</Tabs.Tab>\n          </SpotlightTarget>\n          <Tabs.Tab id=\"1\">Tab 2</Tabs.Tab>\n          <Tabs.Tab id=\"2\">Tab 3</Tabs.Tab>\n        </Tabs>\n        <Tabs.TabPanel className=\"p-token-4\" value={tabsValue} tabId=\"0\">\n          <Typography variant=\"body-medium\">Tab 1 content</Typography>\n        </Tabs.TabPanel>\n        <Tabs.TabPanel className=\"p-token-4\" value={tabsValue} tabId=\"1\">\n          <Typography variant=\"body-medium\">Tab 2 content</Typography>\n        </Tabs.TabPanel>\n        <Tabs.TabPanel className=\"p-token-4\" value={tabsValue} tabId=\"2\">\n          <Typography variant=\"body-medium\">Tab 3 content</Typography>\n        </Tabs.TabPanel>\n      </div>\n      <Spotlight\n        placement=\"bottom-end-top-end\"\n        target={targetId}\n        actions={\n          <OutlinedButton\n            onClick={() => {\n              setIsOpen(false);\n              setActiveSpotlight(null);\n            }}\n          >\n            Close\n          </OutlinedButton>\n        }\n      >\n        <Spotlight.Header>This is a header</Spotlight.Header>\n        <Spotlight.Body>This is content</Spotlight.Body>\n      </Spotlight>\n    </div>\n  );\n};\n\nexport default Component;\n"]}

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, 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: [
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex justify-center 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, shouldRenderAsChild: 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, shouldRenderAsChild: 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, shouldRenderAsChild: 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,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","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport {\n  FilledButton,\n  OutlinedButton,\n  Spotlight,\n  SpotlightTarget,\n  SpotlightTour,\n  useNeedleTheme,\n  useSpotlightContext,\n} from '@neo4j-ndl/react';\nimport { FingerPrintIconOutline } from '@neo4j-ndl/react/icons';\n\nconst Component = () => {\n  const { themeClassName } = useNeedleTheme();\n  const { setActiveSpotlight } = useSpotlightContext();\n\n  return (\n    <div className=\"n-flex n-justify-center n-gap-token-64\">\n      <OutlinedButton\n        onClick={() => setActiveSpotlight(`test-target-1-${themeClassName}`)}\n      >\n        Start tour\n      </OutlinedButton>\n      <SpotlightTarget id={`test-target-1-${themeClassName}`} hasPulse asChild>\n        <FilledButton onClick={() => alert('Target 1 clicked')}>\n          Target 1\n        </FilledButton>\n      </SpotlightTarget>\n      <SpotlightTarget id={`test-target-2-${themeClassName}`} hasPulse asChild>\n        <FilledButton onClick={() => alert('Target 2 clicked')}>\n          Target 2\n        </FilledButton>\n      </SpotlightTarget>\n      <SpotlightTarget id={`test-target-3-${themeClassName}`} hasPulse asChild>\n        <FilledButton onClick={() => alert('Target 3 clicked')}>\n          Target 3\n        </FilledButton>\n      </SpotlightTarget>\n      <SpotlightTour\n        onAction={(target, action) =>\n          console.info(`Action ${action} was performed in spotlight ${target}`)\n        }\n        spotlights={[\n          {\n            children: (\n              <>\n                <Spotlight.Label>NEW</Spotlight.Label>\n                <Spotlight.Header>This is a header</Spotlight.Header>\n                <Spotlight.Body>This is content</Spotlight.Body>\n              </>\n            ),\n            target: `test-target-1-${themeClassName}`,\n          },\n          {\n            children: (\n              <>\n                <Spotlight.IconWrapper>\n                  <FingerPrintIconOutline />\n                </Spotlight.IconWrapper>\n                <Spotlight.Header>This is a header</Spotlight.Header>\n                <Spotlight.Body>This is content</Spotlight.Body>\n              </>\n            ),\n            target: `test-target-2-${themeClassName}`,\n          },\n          {\n            children: (\n              <>\n                <Spotlight.Image\n                  src=\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjY2NjIi8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZmlsbD0iIzMzMyIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZHk9Ii4zZW0iPkV4YW1wbGUgSW1hZ2U8L3RleHQ+PC9zdmc+\"\n                  alt=\"example image\"\n                />\n                <Spotlight.Body>This is content</Spotlight.Body>\n              </>\n            ),\n            target: `test-target-3-${themeClassName}`,\n          },\n        ]}\n      />\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"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,kCAAkC,aAC/C,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,mBAAmB,kBAEnB,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,mBAAmB,kBAEnB,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,mBAAmB,kBAEnB,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","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport {\n  FilledButton,\n  OutlinedButton,\n  Spotlight,\n  SpotlightTarget,\n  SpotlightTour,\n  useNeedleTheme,\n  useSpotlightContext,\n} from '@neo4j-ndl/react';\nimport { FingerPrintIconOutline } from '@neo4j-ndl/react/icons';\n\nconst Component = () => {\n  const { themeClassName } = useNeedleTheme();\n  const { setActiveSpotlight } = useSpotlightContext();\n\n  return (\n    <div className=\"flex justify-center gap-token-64\">\n      <OutlinedButton\n        onClick={() => setActiveSpotlight(`test-target-1-${themeClassName}`)}\n      >\n        Start tour\n      </OutlinedButton>\n      <SpotlightTarget\n        id={`test-target-1-${themeClassName}`}\n        hasPulse\n        shouldRenderAsChild\n      >\n        <FilledButton onClick={() => alert('Target 1 clicked')}>\n          Target 1\n        </FilledButton>\n      </SpotlightTarget>\n      <SpotlightTarget\n        id={`test-target-2-${themeClassName}`}\n        hasPulse\n        shouldRenderAsChild\n      >\n        <FilledButton onClick={() => alert('Target 2 clicked')}>\n          Target 2\n        </FilledButton>\n      </SpotlightTarget>\n      <SpotlightTarget\n        id={`test-target-3-${themeClassName}`}\n        hasPulse\n        shouldRenderAsChild\n      >\n        <FilledButton onClick={() => alert('Target 3 clicked')}>\n          Target 3\n        </FilledButton>\n      </SpotlightTarget>\n      <SpotlightTour\n        onAction={(target, action) =>\n          console.info(`Action ${action} was performed in spotlight ${target}`)\n        }\n        spotlights={[\n          {\n            children: (\n              <>\n                <Spotlight.Label>NEW</Spotlight.Label>\n                <Spotlight.Header>This is a header</Spotlight.Header>\n                <Spotlight.Body>This is content</Spotlight.Body>\n              </>\n            ),\n            target: `test-target-1-${themeClassName}`,\n          },\n          {\n            children: (\n              <>\n                <Spotlight.IconWrapper>\n                  <FingerPrintIconOutline />\n                </Spotlight.IconWrapper>\n                <Spotlight.Header>This is a header</Spotlight.Header>\n                <Spotlight.Body>This is content</Spotlight.Body>\n              </>\n            ),\n            target: `test-target-2-${themeClassName}`,\n          },\n          {\n            children: (\n              <>\n                <Spotlight.Image\n                  src=\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjY2NjIi8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZmlsbD0iIzMzMyIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZHk9Ii4zZW0iPkV4YW1wbGUgSW1hZ2U8L3RleHQ+PC9zdmc+\"\n                  alt=\"example image\"\n                />\n                <Spotlight.Body>This is content</Spotlight.Body>\n              </>\n            ),\n            target: `test-target-3-${themeClassName}`,\n          },\n        ]}\n      />\n    </div>\n  );\n};\n\nexport default Component;\n"]}

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

@@ -35,7 +35,7 @@ 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, 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: () => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex justify-center 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", shouldRenderAsChild: 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" })] })] }));

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,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","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport {\n  FilledButton,\n  OutlinedButton,\n  Spotlight,\n  SpotlightTarget,\n  TextButton,\n  useNeedleTheme,\n  useSpotlightContext,\n} from '@neo4j-ndl/react';\nimport { FingerPrintIconOutline } from '@neo4j-ndl/react/icons';\nimport { useEffect } from 'react';\n\nconst Component = (props: { isChromatic: boolean }) => {\n  const { themeClassName } = useNeedleTheme();\n  const { setIsOpen, setActiveSpotlight } = useSpotlightContext();\n\n  const targetId = `test-target-${themeClassName}`;\n\n  useEffect(() => {\n    if (props.isChromatic) {\n      setActiveSpotlight(targetId);\n      setIsOpen(true);\n    }\n  }, [setActiveSpotlight, setIsOpen, targetId, props.isChromatic]);\n\n  return (\n    <div className=\"n-flex n-justify-center n-gap-token-64\">\n      <FilledButton onClick={() => setActiveSpotlight(targetId)}>\n        Activate Spotlight\n      </FilledButton>\n      <SpotlightTarget\n        id={targetId}\n        hasPulse={!props.isChromatic}\n        indicatorVariant=\"border\"\n        asChild\n      >\n        <TextButton onClick={() => alert('Target button clicked')}>\n          Target\n        </TextButton>\n      </SpotlightTarget>\n      <Spotlight\n        placement=\"bottom-end-top-end\"\n        target={targetId}\n        actions={\n          <OutlinedButton\n            onClick={() => {\n              setIsOpen(false);\n              setActiveSpotlight(null);\n            }}\n          >\n            Close\n          </OutlinedButton>\n        }\n      >\n        <Spotlight.IconWrapper>\n          <FingerPrintIconOutline />\n        </Spotlight.IconWrapper>\n        <Spotlight.Header>This is a header</Spotlight.Header>\n        <Spotlight.Body>This is content</Spotlight.Body>\n      </Spotlight>\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"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,kCAAkC,aAC/C,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,mBAAmB,kBAEnB,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","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport {\n  FilledButton,\n  OutlinedButton,\n  Spotlight,\n  SpotlightTarget,\n  TextButton,\n  useNeedleTheme,\n  useSpotlightContext,\n} from '@neo4j-ndl/react';\nimport { FingerPrintIconOutline } from '@neo4j-ndl/react/icons';\nimport { useEffect } from 'react';\n\nconst Component = (props: { isChromatic: boolean }) => {\n  const { themeClassName } = useNeedleTheme();\n  const { setIsOpen, setActiveSpotlight } = useSpotlightContext();\n\n  const targetId = `test-target-${themeClassName}`;\n\n  useEffect(() => {\n    if (props.isChromatic) {\n      setActiveSpotlight(targetId);\n      setIsOpen(true);\n    }\n  }, [setActiveSpotlight, setIsOpen, targetId, props.isChromatic]);\n\n  return (\n    <div className=\"flex justify-center gap-token-64\">\n      <FilledButton onClick={() => setActiveSpotlight(targetId)}>\n        Activate Spotlight\n      </FilledButton>\n      <SpotlightTarget\n        id={targetId}\n        hasPulse={!props.isChromatic}\n        indicatorVariant=\"border\"\n        shouldRenderAsChild\n      >\n        <TextButton onClick={() => alert('Target button clicked')}>\n          Target\n        </TextButton>\n      </SpotlightTarget>\n      <Spotlight\n        placement=\"bottom-end-top-end\"\n        target={targetId}\n        actions={\n          <OutlinedButton\n            onClick={() => {\n              setIsOpen(false);\n              setActiveSpotlight(null);\n            }}\n          >\n            Close\n          </OutlinedButton>\n        }\n      >\n        <Spotlight.IconWrapper>\n          <FingerPrintIconOutline />\n        </Spotlight.IconWrapper>\n        <Spotlight.Header>This is a header</Spotlight.Header>\n        <Spotlight.Body>This is content</Spotlight.Body>\n      </Spotlight>\n    </div>\n  );\n};\n\nexport default Component;\n"]}

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

@@ -34,7 +34,7 @@ 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, 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: () => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex justify-center 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, shouldRenderAsChild: 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" })] })] }));

package/lib/cjs/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,mDAAiD;AAEjD,4CAQ0B;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,wCAAwC,aACrD,uBAAC,oBAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,QAAQ,CAAC,mCAE1C,EACf,uBAAC,uBAAe,IAAC,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,KAAK,CAAC,WAAW,EAAE,OAAO,kBAClE,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,KAAK,IACd,GAAG,EAAC,wVAAwV,EAC5V,GAAG,EAAC,eAAe,GACnB,EACF,uBAAC,iBAAS,CAAC,MAAM,mCAAoC,EACrD,uBAAC,iBAAS,CAAC,IAAI,kCAAiC,IACtC,IACR,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport {\n  FilledButton,\n  OutlinedButton,\n  Spotlight,\n  SpotlightTarget,\n  TextButton,\n  useNeedleTheme,\n  useSpotlightContext,\n} from '@neo4j-ndl/react';\nimport { useEffect } from 'react';\n\nconst Component = (props: { isChromatic: boolean }) => {\n  const { themeClassName } = useNeedleTheme();\n  const { setIsOpen, setActiveSpotlight } = useSpotlightContext();\n\n  const targetId = `test-target-${themeClassName}`;\n\n  useEffect(() => {\n    if (props.isChromatic) {\n      setActiveSpotlight(targetId);\n      setIsOpen(true);\n    }\n  }, [setActiveSpotlight, setIsOpen, targetId, props.isChromatic]);\n\n  return (\n    <div className=\"n-flex n-justify-center n-gap-token-64\">\n      <FilledButton onClick={() => setActiveSpotlight(targetId)}>\n        Activate Spotlight\n      </FilledButton>\n      <SpotlightTarget id={targetId} hasPulse={!props.isChromatic} asChild>\n        <TextButton onClick={() => alert('Target button clicked')}>\n          Target\n        </TextButton>\n      </SpotlightTarget>\n      <Spotlight\n        placement=\"bottom-end-top-end\"\n        target={targetId}\n        actions={\n          <OutlinedButton\n            onClick={() => {\n              setIsOpen(false);\n              setActiveSpotlight(null);\n            }}\n          >\n            Close\n          </OutlinedButton>\n        }\n      >\n        <Spotlight.Image\n          src=\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjY2NjIi8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZmlsbD0iIzMzMyIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZHk9Ii4zZW0iPkV4YW1wbGUgSW1hZ2U8L3RleHQ+PC9zdmc+\"\n          alt=\"example image\"\n        />\n        <Spotlight.Header>This is a header</Spotlight.Header>\n        <Spotlight.Body>This is content</Spotlight.Body>\n      </Spotlight>\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"spotlight-with-image.story.js","sourceRoot":"","sources":["../../../../src/spotlight/stories/spotlight-with-image.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAQ0B;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,kCAAkC,aAC/C,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,mBAAmB,kBAEnB,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,KAAK,IACd,GAAG,EAAC,wVAAwV,EAC5V,GAAG,EAAC,eAAe,GACnB,EACF,uBAAC,iBAAS,CAAC,MAAM,mCAAoC,EACrD,uBAAC,iBAAS,CAAC,IAAI,kCAAiC,IACtC,IACR,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport {\n  FilledButton,\n  OutlinedButton,\n  Spotlight,\n  SpotlightTarget,\n  TextButton,\n  useNeedleTheme,\n  useSpotlightContext,\n} from '@neo4j-ndl/react';\nimport { useEffect } from 'react';\n\nconst Component = (props: { isChromatic: boolean }) => {\n  const { themeClassName } = useNeedleTheme();\n  const { setIsOpen, setActiveSpotlight } = useSpotlightContext();\n\n  const targetId = `test-target-${themeClassName}`;\n\n  useEffect(() => {\n    if (props.isChromatic) {\n      setActiveSpotlight(targetId);\n      setIsOpen(true);\n    }\n  }, [setActiveSpotlight, setIsOpen, targetId, props.isChromatic]);\n\n  return (\n    <div className=\"flex justify-center gap-token-64\">\n      <FilledButton onClick={() => setActiveSpotlight(targetId)}>\n        Activate Spotlight\n      </FilledButton>\n      <SpotlightTarget\n        id={targetId}\n        hasPulse={!props.isChromatic}\n        shouldRenderAsChild\n      >\n        <TextButton onClick={() => alert('Target button clicked')}>\n          Target\n        </TextButton>\n      </SpotlightTarget>\n      <Spotlight\n        placement=\"bottom-end-top-end\"\n        target={targetId}\n        actions={\n          <OutlinedButton\n            onClick={() => {\n              setIsOpen(false);\n              setActiveSpotlight(null);\n            }}\n          >\n            Close\n          </OutlinedButton>\n        }\n      >\n        <Spotlight.Image\n          src=\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjY2NjIi8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZmlsbD0iIzMzMyIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZHk9Ii4zZW0iPkV4YW1wbGUgSW1hZ2U8L3RleHQ+PC9zdmc+\"\n          alt=\"example image\"\n        />\n        <Spotlight.Header>This is a header</Spotlight.Header>\n        <Spotlight.Body>This is content</Spotlight.Body>\n      </Spotlight>\n    </div>\n  );\n};\n\nexport default Component;\n"]}

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

@@ -34,7 +34,7 @@ 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, 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: () => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex justify-center 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", shouldRenderAsChild: 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.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" })] })] }));

package/lib/cjs/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,mDAAiD;AAEjD,4CAQ0B;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,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,KAAK,sBAAsB,EACtC,uBAAC,iBAAS,CAAC,MAAM,mCAAoC,EACrD,uBAAC,iBAAS,CAAC,IAAI,kCAAiC,IACtC,IACR,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport {\n  FilledButton,\n  OutlinedButton,\n  Spotlight,\n  SpotlightTarget,\n  TextButton,\n  useNeedleTheme,\n  useSpotlightContext,\n} from '@neo4j-ndl/react';\nimport { useEffect } from 'react';\n\nconst Component = (props: { isChromatic: boolean }) => {\n  const { themeClassName } = useNeedleTheme();\n  const { setIsOpen, setActiveSpotlight } = useSpotlightContext();\n\n  const targetId = `test-target-${themeClassName}`;\n\n  useEffect(() => {\n    if (props.isChromatic) {\n      setActiveSpotlight(targetId);\n      setIsOpen(true);\n    }\n  }, [setActiveSpotlight, setIsOpen, targetId, props.isChromatic]);\n\n  return (\n    <div className=\"n-flex n-justify-center n-gap-token-64\">\n      <FilledButton onClick={() => setActiveSpotlight(targetId)}>\n        Activate Spotlight\n      </FilledButton>\n      <SpotlightTarget\n        id={targetId}\n        hasPulse={!props.isChromatic}\n        indicatorVariant=\"border\"\n        asChild\n      >\n        <TextButton onClick={() => alert('Target button clicked')}>\n          Target\n        </TextButton>\n      </SpotlightTarget>\n      <Spotlight\n        placement=\"bottom-end-top-end\"\n        target={targetId}\n        actions={\n          <OutlinedButton\n            onClick={() => {\n              setIsOpen(false);\n              setActiveSpotlight(null);\n            }}\n          >\n            Close\n          </OutlinedButton>\n        }\n      >\n        <Spotlight.Label>NEW</Spotlight.Label>\n        <Spotlight.Header>This is a header</Spotlight.Header>\n        <Spotlight.Body>This is content</Spotlight.Body>\n      </Spotlight>\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"spotlight-with-label.story.js","sourceRoot":"","sources":["../../../../src/spotlight/stories/spotlight-with-label.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAQ0B;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,kCAAkC,aAC/C,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,mBAAmB,kBAEnB,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,KAAK,sBAAsB,EACtC,uBAAC,iBAAS,CAAC,MAAM,mCAAoC,EACrD,uBAAC,iBAAS,CAAC,IAAI,kCAAiC,IACtC,IACR,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport {\n  FilledButton,\n  OutlinedButton,\n  Spotlight,\n  SpotlightTarget,\n  TextButton,\n  useNeedleTheme,\n  useSpotlightContext,\n} from '@neo4j-ndl/react';\nimport { useEffect } from 'react';\n\nconst Component = (props: { isChromatic: boolean }) => {\n  const { themeClassName } = useNeedleTheme();\n  const { setIsOpen, setActiveSpotlight } = useSpotlightContext();\n\n  const targetId = `test-target-${themeClassName}`;\n\n  useEffect(() => {\n    if (props.isChromatic) {\n      setActiveSpotlight(targetId);\n      setIsOpen(true);\n    }\n  }, [setActiveSpotlight, setIsOpen, targetId, props.isChromatic]);\n\n  return (\n    <div className=\"flex justify-center gap-token-64\">\n      <FilledButton onClick={() => setActiveSpotlight(targetId)}>\n        Activate Spotlight\n      </FilledButton>\n      <SpotlightTarget\n        id={targetId}\n        hasPulse={!props.isChromatic}\n        indicatorVariant=\"border\"\n        shouldRenderAsChild\n      >\n        <TextButton onClick={() => alert('Target button clicked')}>\n          Target\n        </TextButton>\n      </SpotlightTarget>\n      <Spotlight\n        placement=\"bottom-end-top-end\"\n        target={targetId}\n        actions={\n          <OutlinedButton\n            onClick={() => {\n              setIsOpen(false);\n              setActiveSpotlight(null);\n            }}\n          >\n            Close\n          </OutlinedButton>\n        }\n      >\n        <Spotlight.Label>NEW</Spotlight.Label>\n        <Spotlight.Header>This is a header</Spotlight.Header>\n        <Spotlight.Body>This is content</Spotlight.Body>\n      </Spotlight>\n    </div>\n  );\n};\n\nexport default Component;\n"]}

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

@@ -34,7 +34,7 @@ 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, asChild: true, indicatorVariant: "point", indicatorPlacement: "top-right", 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: () => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex justify-center 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, shouldRenderAsChild: true, indicatorVariant: "point", indicatorPlacement: "top-right", 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" })] })] }));

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

@@ -1 +1 @@
-{"version":3,"file":"spotlight-with-pointer.story.js","sourceRoot":"","sources":["../../../../src/spotlight/stories/spotlight-with-pointer.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,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,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,OAAO,EACxB,kBAAkB,EAAC,WAAW,YAE9B,uBAAC,oBAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,uBAAuB,CAAC,uBAE5C,GACC,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,MAAM,mCAAoC,EACrD,uBAAC,iBAAS,CAAC,IAAI,kCAAiC,IACtC,IACR,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport {\n  FilledButton,\n  OutlinedButton,\n  Spotlight,\n  SpotlightTarget,\n  useNeedleTheme,\n  useSpotlightContext,\n} from '@neo4j-ndl/react';\nimport { useEffect } from 'react';\n\nconst Component = (props: { isChromatic: boolean }) => {\n  const { themeClassName } = useNeedleTheme();\n  const { setIsOpen, setActiveSpotlight } = useSpotlightContext();\n\n  const targetId = `test-target-${themeClassName}`;\n\n  useEffect(() => {\n    if (props.isChromatic) {\n      setActiveSpotlight(targetId);\n      setIsOpen(true);\n    }\n  }, [setActiveSpotlight, setIsOpen, targetId, props.isChromatic]);\n\n  return (\n    <div className=\"n-flex n-justify-center n-gap-token-64\">\n      <FilledButton onClick={() => setActiveSpotlight(targetId)}>\n        Activate Spotlight\n      </FilledButton>\n      <SpotlightTarget\n        id={targetId}\n        hasPulse={!props.isChromatic}\n        asChild\n        indicatorVariant=\"point\"\n        indicatorPlacement=\"top-right\"\n      >\n        <FilledButton onClick={() => alert('Target button clicked')}>\n          Target\n        </FilledButton>\n      </SpotlightTarget>\n      <Spotlight\n        placement=\"bottom-end-top-end\"\n        target={targetId}\n        actions={\n          <OutlinedButton\n            onClick={() => {\n              setIsOpen(false);\n              setActiveSpotlight(null);\n            }}\n          >\n            Close\n          </OutlinedButton>\n        }\n      >\n        <Spotlight.Header>This is a header</Spotlight.Header>\n        <Spotlight.Body>This is content</Spotlight.Body>\n      </Spotlight>\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"spotlight-with-pointer.story.js","sourceRoot":"","sources":["../../../../src/spotlight/stories/spotlight-with-pointer.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,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,kCAAkC,aAC/C,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,mBAAmB,QACnB,gBAAgB,EAAC,OAAO,EACxB,kBAAkB,EAAC,WAAW,YAE9B,uBAAC,oBAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,uBAAuB,CAAC,uBAE5C,GACC,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,MAAM,mCAAoC,EACrD,uBAAC,iBAAS,CAAC,IAAI,kCAAiC,IACtC,IACR,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport {\n  FilledButton,\n  OutlinedButton,\n  Spotlight,\n  SpotlightTarget,\n  useNeedleTheme,\n  useSpotlightContext,\n} from '@neo4j-ndl/react';\nimport { useEffect } from 'react';\n\nconst Component = (props: { isChromatic: boolean }) => {\n  const { themeClassName } = useNeedleTheme();\n  const { setIsOpen, setActiveSpotlight } = useSpotlightContext();\n\n  const targetId = `test-target-${themeClassName}`;\n\n  useEffect(() => {\n    if (props.isChromatic) {\n      setActiveSpotlight(targetId);\n      setIsOpen(true);\n    }\n  }, [setActiveSpotlight, setIsOpen, targetId, props.isChromatic]);\n\n  return (\n    <div className=\"flex justify-center gap-token-64\">\n      <FilledButton onClick={() => setActiveSpotlight(targetId)}>\n        Activate Spotlight\n      </FilledButton>\n      <SpotlightTarget\n        id={targetId}\n        hasPulse={!props.isChromatic}\n        shouldRenderAsChild\n        indicatorVariant=\"point\"\n        indicatorPlacement=\"top-right\"\n      >\n        <FilledButton onClick={() => alert('Target button clicked')}>\n          Target\n        </FilledButton>\n      </SpotlightTarget>\n      <Spotlight\n        placement=\"bottom-end-top-end\"\n        target={targetId}\n        actions={\n          <OutlinedButton\n            onClick={() => {\n              setIsOpen(false);\n              setActiveSpotlight(null);\n            }}\n          >\n            Close\n          </OutlinedButton>\n        }\n      >\n        <Spotlight.Header>This is a header</Spotlight.Header>\n        <Spotlight.Body>This is content</Spotlight.Body>\n      </Spotlight>\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/spotlight/use-spotlight.js

@@ -24,7 +24,7 @@ exports.useSpotlight = useSpotlight;
 const react_1 = require("@floating-ui/react");
 const base_1 = require("@neo4j-ndl/base");
 const react_2 = require("react");
-function useSpotlight({ isInitialOpen = false, placement = 'bottom', isOpen: controlledOpen, onOpenChange: setControlledOpen, anchorElement, anchorElementAsPortalAnchor, initialFocus, closeOnClickOutside, strategy = 'absolute', } = {}) {
+function useSpotlight({ isInitialOpen = false, placement = 'bottom', isOpen: controlledOpen, onOpenChange: setControlledOpen, anchorElement, hasAnchorElementAsPortalAnchor, initialFocus, shouldCloseOnClickOutside, strategy = 'absolute', } = {}) {
     var _a;
     const [isOpenUncontrolled, setIsOpenUncontrolled] = (0, react_2.useState)(isInitialOpen);
     const [labelId, setLabelId] = (0, react_2.useState)();
@@ -58,7 +58,7 @@ function useSpotlight({ isInitialOpen = false, placement = 'bottom', isOpen: con
         enabled: controlledOpen === undefined,
     });
     const dismiss = (0, react_1.useDismiss)(context, {
-        outsidePress: closeOnClickOutside,
+        outsidePress: shouldCloseOnClickOutside,
     });
     const role = (0, react_1.useRole)(context, {
         role: 'dialog',
@@ -68,8 +68,8 @@ function useSpotlight({ isInitialOpen = false, placement = 'bottom', isOpen: con
         duration: (_a = Number.parseInt(base_1.tokens.motion.duration.quick)) !== null && _a !== void 0 ? _a : 0,
     });
     return (0, react_2.useMemo)(() => (Object.assign(Object.assign(Object.assign({ isOpen,
-        setIsOpen }, interactions), data), { anchorElementAsPortalAnchor,
-        descriptionId,
+        setIsOpen }, interactions), data), { descriptionId,
+        hasAnchorElementAsPortalAnchor,
         initialFocus,
         labelId,
         setDescriptionId,
@@ -81,7 +81,7 @@ function useSpotlight({ isInitialOpen = false, placement = 'bottom', isOpen: con
         data,
         transitionStyles,
         labelId,
-        anchorElementAsPortalAnchor,
+        hasAnchorElementAsPortalAnchor,
         descriptionId,
         initialFocus,
     ]);

package/lib/cjs/spotlight/use-spotlight.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-spotlight.js","sourceRoot":"","sources":["../../../src/spotlight/use-spotlight.tsx"],"names":[],"mappings":"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","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport {\n  autoUpdate,\n  flip,\n  offset,\n  type Placement,\n  shift,\n  useClick,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  type UseInteractionsReturn,\n  useRole,\n  useTransitionStyles,\n} from '@floating-ui/react';\nimport { tokens } from '@neo4j-ndl/base';\nimport { useMemo, useState } from 'react';\n\nexport interface SpotlightOptions {\n  isInitialOpen?: boolean;\n  placement?: Placement;\n  isOpen?: boolean;\n  onOpenChange?: (open: boolean, event?: Event) => void;\n  anchorElement?: Element | null;\n  // TODO v5: fix boolean naming convention\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  anchorElementAsPortalAnchor?: boolean;\n  initialFocus?: number | React.MutableRefObject<HTMLElement | null>;\n  // TODO v5: fix boolean naming convention\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  closeOnClickOutside?: boolean;\n  strategy?: 'fixed' | 'absolute';\n}\n\nexport interface UseSpotlightReturn\n  extends UseInteractionsReturn, ReturnType<typeof useFloating> {\n  isOpen: boolean;\n  setIsOpen: (isOpen: boolean) => void;\n  labelId: string | undefined;\n  transitionStyles: React.CSSProperties;\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  anchorElementAsPortalAnchor: boolean | undefined;\n  initialFocus: number | React.MutableRefObject<HTMLElement | null> | undefined;\n}\n\nexport function useSpotlight({\n  isInitialOpen = false,\n  placement = 'bottom',\n  isOpen: controlledOpen,\n  onOpenChange: setControlledOpen,\n  anchorElement,\n  anchorElementAsPortalAnchor,\n  initialFocus,\n  closeOnClickOutside,\n  strategy = 'absolute',\n}: SpotlightOptions = {}): UseSpotlightReturn {\n  const [isOpenUncontrolled, setIsOpenUncontrolled] = useState(isInitialOpen);\n  const [labelId, setLabelId] = useState<string | undefined>();\n  const [descriptionId, setDescriptionId] = useState<string | undefined>();\n  const isOpen = controlledOpen ?? isOpenUncontrolled;\n  const setIsOpen = setControlledOpen ?? setIsOpenUncontrolled;\n  const data = useFloating({\n    elements: {\n      reference: anchorElement,\n    },\n    middleware: [\n      offset(10),\n      flip({\n        crossAxis: placement.includes('-'),\n        fallbackAxisSideDirection: 'end',\n        padding: 5,\n      }),\n      shift({ padding: 5 }),\n    ],\n    onOpenChange: (open, event) => {\n      setIsOpen(open);\n      setControlledOpen?.(open, event);\n    },\n    open: isOpen,\n    placement: placement,\n    strategy,\n    whileElementsMounted: autoUpdate,\n  });\n  const context = data.context;\n\n  const click = useClick(context, {\n    enabled: controlledOpen === undefined,\n  });\n\n  const dismiss = useDismiss(context, {\n    outsidePress: closeOnClickOutside,\n  });\n  const role = useRole(context, {\n    role: 'dialog',\n  });\n\n  const interactions = useInteractions([click, dismiss, role]);\n\n  const { styles: transitionStyles } = useTransitionStyles(context, {\n    duration: Number.parseInt(tokens.motion.duration.quick) ?? 0,\n  });\n\n  return useMemo(\n    () => ({\n      isOpen,\n      setIsOpen,\n      ...interactions,\n      ...data,\n      anchorElementAsPortalAnchor,\n      descriptionId,\n      initialFocus,\n      labelId,\n      setDescriptionId,\n      setLabelId,\n      transitionStyles,\n    }),\n    [\n      isOpen,\n      setIsOpen,\n      interactions,\n      data,\n      transitionStyles,\n      labelId,\n      anchorElementAsPortalAnchor,\n      descriptionId,\n      initialFocus,\n    ],\n  );\n}\n"]}
+{"version":3,"file":"use-spotlight.js","sourceRoot":"","sources":["../../../src/spotlight/use-spotlight.tsx"],"names":[],"mappings":"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","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport {\n  autoUpdate,\n  flip,\n  offset,\n  type Placement,\n  shift,\n  useClick,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  type UseInteractionsReturn,\n  useRole,\n  useTransitionStyles,\n} from '@floating-ui/react';\nimport { tokens } from '@neo4j-ndl/base';\nimport { useMemo, useState } from 'react';\n\nexport interface SpotlightOptions {\n  isInitialOpen?: boolean;\n  placement?: Placement;\n  isOpen?: boolean;\n  onOpenChange?: (open: boolean, event?: Event) => void;\n  anchorElement?: Element | null;\n  hasAnchorElementAsPortalAnchor?: boolean;\n  initialFocus?: number | React.MutableRefObject<HTMLElement | null>;\n  shouldCloseOnClickOutside?: boolean;\n  strategy?: 'fixed' | 'absolute';\n}\n\nexport interface UseSpotlightReturn\n  extends UseInteractionsReturn, ReturnType<typeof useFloating> {\n  isOpen: boolean;\n  setIsOpen: (isOpen: boolean) => void;\n  labelId: string | undefined;\n  transitionStyles: React.CSSProperties;\n  hasAnchorElementAsPortalAnchor: boolean | undefined;\n  initialFocus: number | React.MutableRefObject<HTMLElement | null> | undefined;\n}\n\nexport function useSpotlight({\n  isInitialOpen = false,\n  placement = 'bottom',\n  isOpen: controlledOpen,\n  onOpenChange: setControlledOpen,\n  anchorElement,\n  hasAnchorElementAsPortalAnchor,\n  initialFocus,\n  shouldCloseOnClickOutside,\n  strategy = 'absolute',\n}: SpotlightOptions = {}): UseSpotlightReturn {\n  const [isOpenUncontrolled, setIsOpenUncontrolled] = useState(isInitialOpen);\n  const [labelId, setLabelId] = useState<string | undefined>();\n  const [descriptionId, setDescriptionId] = useState<string | undefined>();\n  const isOpen = controlledOpen ?? isOpenUncontrolled;\n  const setIsOpen = setControlledOpen ?? setIsOpenUncontrolled;\n  const data = useFloating({\n    elements: {\n      reference: anchorElement,\n    },\n    middleware: [\n      offset(10),\n      flip({\n        crossAxis: placement.includes('-'),\n        fallbackAxisSideDirection: 'end',\n        padding: 5,\n      }),\n      shift({ padding: 5 }),\n    ],\n    onOpenChange: (open, event) => {\n      setIsOpen(open);\n      setControlledOpen?.(open, event);\n    },\n    open: isOpen,\n    placement: placement,\n    strategy,\n    whileElementsMounted: autoUpdate,\n  });\n  const context = data.context;\n\n  const click = useClick(context, {\n    enabled: controlledOpen === undefined,\n  });\n\n  const dismiss = useDismiss(context, {\n    outsidePress: shouldCloseOnClickOutside,\n  });\n  const role = useRole(context, {\n    role: 'dialog',\n  });\n\n  const interactions = useInteractions([click, dismiss, role]);\n\n  const { styles: transitionStyles } = useTransitionStyles(context, {\n    duration: Number.parseInt(tokens.motion.duration.quick) ?? 0,\n  });\n\n  return useMemo(\n    () => ({\n      isOpen,\n      setIsOpen,\n      ...interactions,\n      ...data,\n      descriptionId,\n      hasAnchorElementAsPortalAnchor,\n      initialFocus,\n      labelId,\n      setDescriptionId,\n      setLabelId,\n      transitionStyles,\n    }),\n    [\n      isOpen,\n      setIsOpen,\n      interactions,\n      data,\n      transitionStyles,\n      labelId,\n      hasAnchorElementAsPortalAnchor,\n      descriptionId,\n      initialFocus,\n    ],\n  );\n}\n"]}

package/lib/cjs/status-indicator/stories/status-indicator-variants.story.js

@@ -24,7 +24,7 @@ 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 Component = () => {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-gap-token-16", children: [(0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-items-center n-gap-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.StatusIndicator, { variant: "unknown" }), (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "label", children: "Unknown" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-items-center n-gap-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.StatusIndicator, { variant: "success" }), (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "label", children: "Success" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-items-center n-gap-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.StatusIndicator, { variant: "info" }), (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "label", children: "Info" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-items-center n-gap-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.StatusIndicator, { variant: "warning" }), (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "label", children: "Warning" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-items-center n-gap-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.StatusIndicator, { variant: "danger" }), (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "label", children: "Danger" })] })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex gap-token-16", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center gap-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.StatusIndicator, { variant: "unknown" }), (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "label", children: "Unknown" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center gap-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.StatusIndicator, { variant: "success" }), (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "label", children: "Success" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center gap-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.StatusIndicator, { variant: "info" }), (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "label", children: "Info" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center gap-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.StatusIndicator, { variant: "warning" }), (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "label", children: "Warning" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center gap-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.StatusIndicator, { variant: "danger" }), (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "label", children: "Danger" })] })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=status-indicator-variants.story.js.map

package/lib/cjs/status-indicator/stories/status-indicator-variants.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"status-indicator-variants.story.js","sourceRoot":"","sources":["../../../../src/status-indicator/stories/status-indicator-variants.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA+D;AAE/D,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,iCAAK,SAAS,EAAC,uBAAuB,aACpC,iCAAK,SAAS,EAAC,gDAAgD,aAC7D,uBAAC,uBAAe,IAAC,OAAO,EAAC,SAAS,GAAG,EACrC,uBAAC,kBAAU,IAAC,OAAO,EAAC,OAAO,wBAAqB,IAC5C,EACN,iCAAK,SAAS,EAAC,gDAAgD,aAC7D,uBAAC,uBAAe,IAAC,OAAO,EAAC,SAAS,GAAG,EACrC,uBAAC,kBAAU,IAAC,OAAO,EAAC,OAAO,wBAAqB,IAC5C,EACN,iCAAK,SAAS,EAAC,gDAAgD,aAC7D,uBAAC,uBAAe,IAAC,OAAO,EAAC,MAAM,GAAG,EAClC,uBAAC,kBAAU,IAAC,OAAO,EAAC,OAAO,qBAAkB,IACzC,EACN,iCAAK,SAAS,EAAC,gDAAgD,aAC7D,uBAAC,uBAAe,IAAC,OAAO,EAAC,SAAS,GAAG,EACrC,uBAAC,kBAAU,IAAC,OAAO,EAAC,OAAO,wBAAqB,IAC5C,EACN,iCAAK,SAAS,EAAC,gDAAgD,aAC7D,uBAAC,uBAAe,IAAC,OAAO,EAAC,QAAQ,GAAG,EACpC,uBAAC,kBAAU,IAAC,OAAO,EAAC,OAAO,uBAAoB,IAC3C,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { StatusIndicator, Typography } from '@neo4j-ndl/react';\n\nconst Component = () => {\n  return (\n    <div className=\"n-flex n-gap-token-16\">\n      <div className=\"n-flex n-flex-col n-items-center n-gap-token-8\">\n        <StatusIndicator variant=\"unknown\" />\n        <Typography variant=\"label\">Unknown</Typography>\n      </div>\n      <div className=\"n-flex n-flex-col n-items-center n-gap-token-8\">\n        <StatusIndicator variant=\"success\" />\n        <Typography variant=\"label\">Success</Typography>\n      </div>\n      <div className=\"n-flex n-flex-col n-items-center n-gap-token-8\">\n        <StatusIndicator variant=\"info\" />\n        <Typography variant=\"label\">Info</Typography>\n      </div>\n      <div className=\"n-flex n-flex-col n-items-center n-gap-token-8\">\n        <StatusIndicator variant=\"warning\" />\n        <Typography variant=\"label\">Warning</Typography>\n      </div>\n      <div className=\"n-flex n-flex-col n-items-center n-gap-token-8\">\n        <StatusIndicator variant=\"danger\" />\n        <Typography variant=\"label\">Danger</Typography>\n      </div>\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"status-indicator-variants.story.js","sourceRoot":"","sources":["../../../../src/status-indicator/stories/status-indicator-variants.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA+D;AAE/D,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,iCAAK,SAAS,EAAC,mBAAmB,aAChC,iCAAK,SAAS,EAAC,wCAAwC,aACrD,uBAAC,uBAAe,IAAC,OAAO,EAAC,SAAS,GAAG,EACrC,uBAAC,kBAAU,IAAC,OAAO,EAAC,OAAO,wBAAqB,IAC5C,EACN,iCAAK,SAAS,EAAC,wCAAwC,aACrD,uBAAC,uBAAe,IAAC,OAAO,EAAC,SAAS,GAAG,EACrC,uBAAC,kBAAU,IAAC,OAAO,EAAC,OAAO,wBAAqB,IAC5C,EACN,iCAAK,SAAS,EAAC,wCAAwC,aACrD,uBAAC,uBAAe,IAAC,OAAO,EAAC,MAAM,GAAG,EAClC,uBAAC,kBAAU,IAAC,OAAO,EAAC,OAAO,qBAAkB,IACzC,EACN,iCAAK,SAAS,EAAC,wCAAwC,aACrD,uBAAC,uBAAe,IAAC,OAAO,EAAC,SAAS,GAAG,EACrC,uBAAC,kBAAU,IAAC,OAAO,EAAC,OAAO,wBAAqB,IAC5C,EACN,iCAAK,SAAS,EAAC,wCAAwC,aACrD,uBAAC,uBAAe,IAAC,OAAO,EAAC,QAAQ,GAAG,EACpC,uBAAC,kBAAU,IAAC,OAAO,EAAC,OAAO,uBAAoB,IAC3C,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { StatusIndicator, Typography } from '@neo4j-ndl/react';\n\nconst Component = () => {\n  return (\n    <div className=\"flex gap-token-16\">\n      <div className=\"flex flex-col items-center gap-token-8\">\n        <StatusIndicator variant=\"unknown\" />\n        <Typography variant=\"label\">Unknown</Typography>\n      </div>\n      <div className=\"flex flex-col items-center gap-token-8\">\n        <StatusIndicator variant=\"success\" />\n        <Typography variant=\"label\">Success</Typography>\n      </div>\n      <div className=\"flex flex-col items-center gap-token-8\">\n        <StatusIndicator variant=\"info\" />\n        <Typography variant=\"label\">Info</Typography>\n      </div>\n      <div className=\"flex flex-col items-center gap-token-8\">\n        <StatusIndicator variant=\"warning\" />\n        <Typography variant=\"label\">Warning</Typography>\n      </div>\n      <div className=\"flex flex-col items-center gap-token-8\">\n        <StatusIndicator variant=\"danger\" />\n        <Typography variant=\"label\">Danger</Typography>\n      </div>\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/status-label/stories/status-label-colors.story.js

@@ -24,7 +24,7 @@ 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 Component = () => {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-gap-token-16 n-flex-wrap", children: [(0, jsx_runtime_1.jsx)(react_1.StatusLabel, { variant: "default", children: "Default" }), (0, jsx_runtime_1.jsx)(react_1.StatusLabel, { variant: "info", children: "Info" }), (0, jsx_runtime_1.jsx)(react_1.StatusLabel, { variant: "success", children: "Success" }), (0, jsx_runtime_1.jsx)(react_1.StatusLabel, { variant: "warning", children: "Warning" }), (0, jsx_runtime_1.jsx)(react_1.StatusLabel, { variant: "danger", children: "Danger" }), (0, jsx_runtime_1.jsx)(react_1.StatusLabel, { variant: "discovery", children: "Discovery" })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex gap-token-16 flex-wrap", children: [(0, jsx_runtime_1.jsx)(react_1.StatusLabel, { variant: "default", children: "Default" }), (0, jsx_runtime_1.jsx)(react_1.StatusLabel, { variant: "info", children: "Info" }), (0, jsx_runtime_1.jsx)(react_1.StatusLabel, { variant: "success", children: "Success" }), (0, jsx_runtime_1.jsx)(react_1.StatusLabel, { variant: "warning", children: "Warning" }), (0, jsx_runtime_1.jsx)(react_1.StatusLabel, { variant: "danger", children: "Danger" }), (0, jsx_runtime_1.jsx)(react_1.StatusLabel, { variant: "discovery", children: "Discovery" })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=status-label-colors.story.js.map

package/lib/cjs/status-label/stories/status-label-colors.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"status-label-colors.story.js","sourceRoot":"","sources":["../../../../src/status-label/stories/status-label-colors.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA+C;AAE/C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,iCAAK,SAAS,EAAC,mCAAmC,aAChD,uBAAC,mBAAW,IAAC,OAAO,EAAC,SAAS,wBAAsB,EACpD,uBAAC,mBAAW,IAAC,OAAO,EAAC,MAAM,qBAAmB,EAC9C,uBAAC,mBAAW,IAAC,OAAO,EAAC,SAAS,wBAAsB,EACpD,uBAAC,mBAAW,IAAC,OAAO,EAAC,SAAS,wBAAsB,EACpD,uBAAC,mBAAW,IAAC,OAAO,EAAC,QAAQ,uBAAqB,EAClD,uBAAC,mBAAW,IAAC,OAAO,EAAC,WAAW,0BAAwB,IACpD,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { StatusLabel } from '@neo4j-ndl/react';\n\nconst Component = () => {\n  return (\n    <div className=\"n-flex n-gap-token-16 n-flex-wrap\">\n      <StatusLabel variant=\"default\">Default</StatusLabel>\n      <StatusLabel variant=\"info\">Info</StatusLabel>\n      <StatusLabel variant=\"success\">Success</StatusLabel>\n      <StatusLabel variant=\"warning\">Warning</StatusLabel>\n      <StatusLabel variant=\"danger\">Danger</StatusLabel>\n      <StatusLabel variant=\"discovery\">Discovery</StatusLabel>\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"status-label-colors.story.js","sourceRoot":"","sources":["../../../../src/status-label/stories/status-label-colors.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA+C;AAE/C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,iCAAK,SAAS,EAAC,6BAA6B,aAC1C,uBAAC,mBAAW,IAAC,OAAO,EAAC,SAAS,wBAAsB,EACpD,uBAAC,mBAAW,IAAC,OAAO,EAAC,MAAM,qBAAmB,EAC9C,uBAAC,mBAAW,IAAC,OAAO,EAAC,SAAS,wBAAsB,EACpD,uBAAC,mBAAW,IAAC,OAAO,EAAC,SAAS,wBAAsB,EACpD,uBAAC,mBAAW,IAAC,OAAO,EAAC,QAAQ,uBAAqB,EAClD,uBAAC,mBAAW,IAAC,OAAO,EAAC,WAAW,0BAAwB,IACpD,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { StatusLabel } from '@neo4j-ndl/react';\n\nconst Component = () => {\n  return (\n    <div className=\"flex gap-token-16 flex-wrap\">\n      <StatusLabel variant=\"default\">Default</StatusLabel>\n      <StatusLabel variant=\"info\">Info</StatusLabel>\n      <StatusLabel variant=\"success\">Success</StatusLabel>\n      <StatusLabel variant=\"warning\">Warning</StatusLabel>\n      <StatusLabel variant=\"danger\">Danger</StatusLabel>\n      <StatusLabel variant=\"discovery\">Discovery</StatusLabel>\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/status-label/stories/status-label-fills.story.js

@@ -24,7 +24,7 @@ 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 Component = () => {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-gap-token-16 n-flex-wrap", children: [(0, jsx_runtime_1.jsx)(react_1.StatusLabel, { fill: "filled", children: "Filled" }), (0, jsx_runtime_1.jsx)(react_1.StatusLabel, { fill: "outlined", children: "Outlined" }), (0, jsx_runtime_1.jsx)(react_1.StatusLabel, { fill: "semi-filled", children: "Semi-filled" }), (0, jsx_runtime_1.jsx)(react_1.StatusLabel, { fill: "clean", hasIcon: true, children: "Clean" })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex gap-token-16 flex-wrap", children: [(0, jsx_runtime_1.jsx)(react_1.StatusLabel, { fill: "filled", children: "Filled" }), (0, jsx_runtime_1.jsx)(react_1.StatusLabel, { fill: "outlined", children: "Outlined" }), (0, jsx_runtime_1.jsx)(react_1.StatusLabel, { fill: "semi-filled", children: "Semi-filled" }), (0, jsx_runtime_1.jsx)(react_1.StatusLabel, { fill: "clean", hasIcon: true, children: "Clean" })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=status-label-fills.story.js.map

package/lib/cjs/status-label/stories/status-label-fills.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"status-label-fills.story.js","sourceRoot":"","sources":["../../../../src/status-label/stories/status-label-fills.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA+C;AAE/C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,iCAAK,SAAS,EAAC,mCAAmC,aAChD,uBAAC,mBAAW,IAAC,IAAI,EAAC,QAAQ,uBAAqB,EAC/C,uBAAC,mBAAW,IAAC,IAAI,EAAC,UAAU,yBAAuB,EACnD,uBAAC,mBAAW,IAAC,IAAI,EAAC,aAAa,4BAA0B,EACzD,uBAAC,mBAAW,IAAC,IAAI,EAAC,OAAO,EAAC,OAAO,4BAEnB,IACV,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { StatusLabel } from '@neo4j-ndl/react';\n\nconst Component = () => {\n  return (\n    <div className=\"n-flex n-gap-token-16 n-flex-wrap\">\n      <StatusLabel fill=\"filled\">Filled</StatusLabel>\n      <StatusLabel fill=\"outlined\">Outlined</StatusLabel>\n      <StatusLabel fill=\"semi-filled\">Semi-filled</StatusLabel>\n      <StatusLabel fill=\"clean\" hasIcon>\n        Clean\n      </StatusLabel>\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"status-label-fills.story.js","sourceRoot":"","sources":["../../../../src/status-label/stories/status-label-fills.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA+C;AAE/C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,iCAAK,SAAS,EAAC,6BAA6B,aAC1C,uBAAC,mBAAW,IAAC,IAAI,EAAC,QAAQ,uBAAqB,EAC/C,uBAAC,mBAAW,IAAC,IAAI,EAAC,UAAU,yBAAuB,EACnD,uBAAC,mBAAW,IAAC,IAAI,EAAC,aAAa,4BAA0B,EACzD,uBAAC,mBAAW,IAAC,IAAI,EAAC,OAAO,EAAC,OAAO,4BAEnB,IACV,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { StatusLabel } from '@neo4j-ndl/react';\n\nconst Component = () => {\n  return (\n    <div className=\"flex gap-token-16 flex-wrap\">\n      <StatusLabel fill=\"filled\">Filled</StatusLabel>\n      <StatusLabel fill=\"outlined\">Outlined</StatusLabel>\n      <StatusLabel fill=\"semi-filled\">Semi-filled</StatusLabel>\n      <StatusLabel fill=\"clean\" hasIcon>\n        Clean\n      </StatusLabel>\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/status-label/stories/status-label-with-icons.story.js

@@ -24,7 +24,7 @@ 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 Component = () => {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-grid n-grid-cols-6 n-grid-rows-2 n-gap-token-16 n-items-center n-justify-items-center", children: [(0, jsx_runtime_1.jsx)(react_1.StatusLabel, { variant: "default", hasIcon: true, children: "Default" }), (0, jsx_runtime_1.jsx)(react_1.StatusLabel, { variant: "info", hasIcon: true, children: "Info" }), (0, jsx_runtime_1.jsx)(react_1.StatusLabel, { variant: "success", hasIcon: true, children: "Success" }), (0, jsx_runtime_1.jsx)(react_1.StatusLabel, { variant: "danger", hasIcon: true, children: "Danger" }), (0, jsx_runtime_1.jsx)(react_1.StatusLabel, { variant: "warning", hasIcon: true, children: "Warning" }), (0, jsx_runtime_1.jsx)(react_1.StatusLabel, { variant: "discovery", hasIcon: true, children: "Discovery" }), (0, jsx_runtime_1.jsx)(react_1.StatusLabel, { variant: "default", fill: "clean", hasIcon: true, children: "Default" }), (0, jsx_runtime_1.jsx)(react_1.StatusLabel, { variant: "info", fill: "clean", hasIcon: true, children: "Info" }), (0, jsx_runtime_1.jsx)(react_1.StatusLabel, { variant: "success", fill: "clean", hasIcon: true, children: "Success" }), (0, jsx_runtime_1.jsx)(react_1.StatusLabel, { variant: "danger", fill: "clean", hasIcon: true, children: "Danger" }), (0, jsx_runtime_1.jsx)(react_1.StatusLabel, { variant: "warning", fill: "clean", hasIcon: true, children: "Warning" }), (0, jsx_runtime_1.jsx)(react_1.StatusLabel, { variant: "discovery", fill: "clean", hasIcon: true, children: "Discovery" })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-6 grid-rows-2 gap-token-16 items-center justify-items-center", children: [(0, jsx_runtime_1.jsx)(react_1.StatusLabel, { variant: "default", hasIcon: true, children: "Default" }), (0, jsx_runtime_1.jsx)(react_1.StatusLabel, { variant: "info", hasIcon: true, children: "Info" }), (0, jsx_runtime_1.jsx)(react_1.StatusLabel, { variant: "success", hasIcon: true, children: "Success" }), (0, jsx_runtime_1.jsx)(react_1.StatusLabel, { variant: "danger", hasIcon: true, children: "Danger" }), (0, jsx_runtime_1.jsx)(react_1.StatusLabel, { variant: "warning", hasIcon: true, children: "Warning" }), (0, jsx_runtime_1.jsx)(react_1.StatusLabel, { variant: "discovery", hasIcon: true, children: "Discovery" }), (0, jsx_runtime_1.jsx)(react_1.StatusLabel, { variant: "default", fill: "clean", hasIcon: true, children: "Default" }), (0, jsx_runtime_1.jsx)(react_1.StatusLabel, { variant: "info", fill: "clean", hasIcon: true, children: "Info" }), (0, jsx_runtime_1.jsx)(react_1.StatusLabel, { variant: "success", fill: "clean", hasIcon: true, children: "Success" }), (0, jsx_runtime_1.jsx)(react_1.StatusLabel, { variant: "danger", fill: "clean", hasIcon: true, children: "Danger" }), (0, jsx_runtime_1.jsx)(react_1.StatusLabel, { variant: "warning", fill: "clean", hasIcon: true, children: "Warning" }), (0, jsx_runtime_1.jsx)(react_1.StatusLabel, { variant: "discovery", fill: "clean", hasIcon: true, children: "Discovery" })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=status-label-with-icons.story.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"status-label-with-icons.story.js","sourceRoot":"","sources":["../../../../src/status-label/stories/status-label-with-icons.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA+C;AAE/C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,iCAAK,SAAS,EAAC,yFAAyF,aACtG,uBAAC,mBAAW,IAAC,OAAO,EAAC,SAAS,EAAC,OAAO,8BAExB,EACd,uBAAC,mBAAW,IAAC,OAAO,EAAC,MAAM,EAAC,OAAO,2BAErB,EACd,uBAAC,mBAAW,IAAC,OAAO,EAAC,SAAS,EAAC,OAAO,8BAExB,EACd,uBAAC,mBAAW,IAAC,OAAO,EAAC,QAAQ,EAAC,OAAO,6BAEvB,EACd,uBAAC,mBAAW,IAAC,OAAO,EAAC,SAAS,EAAC,OAAO,8BAExB,EACd,uBAAC,mBAAW,IAAC,OAAO,EAAC,WAAW,EAAC,OAAO,gCAE1B,EACd,uBAAC,mBAAW,IAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,8BAErC,EACd,uBAAC,mBAAW,IAAC,OAAO,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,2BAElC,EACd,uBAAC,mBAAW,IAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,8BAErC,EACd,uBAAC,mBAAW,IAAC,OAAO,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,6BAEpC,EACd,uBAAC,mBAAW,IAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,8BAErC,EACd,uBAAC,mBAAW,IAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,gCAEvC,IACV,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { StatusLabel } from '@neo4j-ndl/react';\n\nconst Component = () => {\n  return (\n    <div className=\"n-grid n-grid-cols-6 n-grid-rows-2 n-gap-token-16 n-items-center n-justify-items-center\">\n      <StatusLabel variant=\"default\" hasIcon>\n        Default\n      </StatusLabel>\n      <StatusLabel variant=\"info\" hasIcon>\n        Info\n      </StatusLabel>\n      <StatusLabel variant=\"success\" hasIcon>\n        Success\n      </StatusLabel>\n      <StatusLabel variant=\"danger\" hasIcon>\n        Danger\n      </StatusLabel>\n      <StatusLabel variant=\"warning\" hasIcon>\n        Warning\n      </StatusLabel>\n      <StatusLabel variant=\"discovery\" hasIcon>\n        Discovery\n      </StatusLabel>\n      <StatusLabel variant=\"default\" fill=\"clean\" hasIcon>\n        Default\n      </StatusLabel>\n      <StatusLabel variant=\"info\" fill=\"clean\" hasIcon>\n        Info\n      </StatusLabel>\n      <StatusLabel variant=\"success\" fill=\"clean\" hasIcon>\n        Success\n      </StatusLabel>\n      <StatusLabel variant=\"danger\" fill=\"clean\" hasIcon>\n        Danger\n      </StatusLabel>\n      <StatusLabel variant=\"warning\" fill=\"clean\" hasIcon>\n        Warning\n      </StatusLabel>\n      <StatusLabel variant=\"discovery\" fill=\"clean\" hasIcon>\n        Discovery\n      </StatusLabel>\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"status-label-with-icons.story.js","sourceRoot":"","sources":["../../../../src/status-label/stories/status-label-with-icons.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA+C;AAE/C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,iCAAK,SAAS,EAAC,6EAA6E,aAC1F,uBAAC,mBAAW,IAAC,OAAO,EAAC,SAAS,EAAC,OAAO,8BAExB,EACd,uBAAC,mBAAW,IAAC,OAAO,EAAC,MAAM,EAAC,OAAO,2BAErB,EACd,uBAAC,mBAAW,IAAC,OAAO,EAAC,SAAS,EAAC,OAAO,8BAExB,EACd,uBAAC,mBAAW,IAAC,OAAO,EAAC,QAAQ,EAAC,OAAO,6BAEvB,EACd,uBAAC,mBAAW,IAAC,OAAO,EAAC,SAAS,EAAC,OAAO,8BAExB,EACd,uBAAC,mBAAW,IAAC,OAAO,EAAC,WAAW,EAAC,OAAO,gCAE1B,EACd,uBAAC,mBAAW,IAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,8BAErC,EACd,uBAAC,mBAAW,IAAC,OAAO,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,2BAElC,EACd,uBAAC,mBAAW,IAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,8BAErC,EACd,uBAAC,mBAAW,IAAC,OAAO,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,6BAEpC,EACd,uBAAC,mBAAW,IAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,8BAErC,EACd,uBAAC,mBAAW,IAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,gCAEvC,IACV,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { StatusLabel } from '@neo4j-ndl/react';\n\nconst Component = () => {\n  return (\n    <div className=\"grid grid-cols-6 grid-rows-2 gap-token-16 items-center justify-items-center\">\n      <StatusLabel variant=\"default\" hasIcon>\n        Default\n      </StatusLabel>\n      <StatusLabel variant=\"info\" hasIcon>\n        Info\n      </StatusLabel>\n      <StatusLabel variant=\"success\" hasIcon>\n        Success\n      </StatusLabel>\n      <StatusLabel variant=\"danger\" hasIcon>\n        Danger\n      </StatusLabel>\n      <StatusLabel variant=\"warning\" hasIcon>\n        Warning\n      </StatusLabel>\n      <StatusLabel variant=\"discovery\" hasIcon>\n        Discovery\n      </StatusLabel>\n      <StatusLabel variant=\"default\" fill=\"clean\" hasIcon>\n        Default\n      </StatusLabel>\n      <StatusLabel variant=\"info\" fill=\"clean\" hasIcon>\n        Info\n      </StatusLabel>\n      <StatusLabel variant=\"success\" fill=\"clean\" hasIcon>\n        Success\n      </StatusLabel>\n      <StatusLabel variant=\"danger\" fill=\"clean\" hasIcon>\n        Danger\n      </StatusLabel>\n      <StatusLabel variant=\"warning\" fill=\"clean\" hasIcon>\n        Warning\n      </StatusLabel>\n      <StatusLabel variant=\"discovery\" fill=\"clean\" hasIcon>\n        Discovery\n      </StatusLabel>\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/tabs/Tabs.js

@@ -219,7 +219,7 @@ const TabsComponent = (_a) => {
 };
 TabsComponent.displayName = 'Tabs';
 const TabsTab = (_a) => {
-    var { children, id: tabId, isDisabled = false, className, description, tooltipProps, style, as, htmlAttributes, ref } = _a, restProps = __rest(_a, ["children", "id", "isDisabled", "className", "description", "tooltipProps", "style", "as", "htmlAttributes", "ref"]);
+    var { children, id: tabId, isDisabled = false, className, description, tooltipProps, style, as, htmlAttributes, ref, trailingContent } = _a, restProps = __rest(_a, ["children", "id", "isDisabled", "className", "description", "tooltipProps", "style", "as", "htmlAttributes", "ref", "trailingContent"]);
     const { size, fill, value, onChange, registerTab, unregisterTab, scrollTabIntoView, firstTabId, isValuePresent, } = useTabsContext();
     const internalRef = (0, react_2.useRef)(null);
     // Create a merged ref that handles both ref objects and ref functions
@@ -245,7 +245,7 @@ const TabsTab = (_a) => {
                             onChange(tabId);
                             scrollTabIntoView(tabId);
                         }
-                    }, role: "tab", id: tabId, "aria-disabled": isDisabled, "aria-label": description, "aria-selected": value === tabId, "aria-controls": getTabPanelId(tabId), tabIndex: tabIndex, ref: mergedRef }, restProps, htmlAttributes, { children: [(0, jsx_runtime_1.jsx)("span", { className: "ndl-tab-content", children: children }), fill === 'underline' && (0, jsx_runtime_1.jsx)("span", { className: "ndl-tab-underline" })] })) })), (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip.Content, Object.assign({}, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.content, { children: description }))] })));
+                    }, role: "tab", id: tabId, "aria-disabled": isDisabled, "aria-label": description, "aria-selected": value === tabId, "aria-controls": getTabPanelId(tabId), tabIndex: tabIndex, ref: mergedRef }, restProps, htmlAttributes, { children: [(0, jsx_runtime_1.jsx)("span", { className: "ndl-tab-content", children: children }), trailingContent, fill === 'underline' && (0, jsx_runtime_1.jsx)("span", { className: "ndl-tab-underline" })] })) })), (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip.Content, Object.assign({}, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.content, { children: description }))] })));
 };
 TabsTab.displayName = 'Tabs.Tab';
 const TabsTabPanel = (_a) => {