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

package/lib/cjs/ai/response/stories/response-full-example.story.js

@@ -142,7 +142,7 @@ const Component = () => {
             }, 50);
         }, 2000);
     };
-    return ((0, jsx_runtime_1.jsx)("section", { className: "n-h-screen", children: (0, jsx_runtime_1.jsxs)("div", { className: "n-w-[440px] n-h-full n-flex n-flex-col n-bg-neutral-bg-weak", children: [(0, jsx_runtime_1.jsx)("div", { className: "n-flex n-flex-row n-border-b n-border-neutral-border-weak n-p-3", children: (0, jsx_runtime_1.jsxs)("div", { className: "n-ml-auto", children: [(0, jsx_runtime_1.jsx)(react_1.CleanIconButton, { description: "settings", tooltipProps: {}, children: (0, jsx_runtime_1.jsx)(icons_1.Cog6ToothIconOutline, {}) }), (0, jsx_runtime_1.jsx)(react_1.CleanIconButton, { description: "close", children: (0, jsx_runtime_1.jsx)(icons_1.XMarkIconOutline, {}) })] }) }), (0, jsx_runtime_1.jsx)("div", { className: "n-p-4 n-flex n-flex-col n-grow n-overflow-y-auto", children: messages.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "n-flex n-flex-col ", children: (0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-gap-12", children: [(0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "display", children: "Hi [User], how can I help you today?" }), (0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-gap-4", children: [(0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Suggestions" }), (0, jsx_runtime_1.jsx)(ai_1.Suggestion, { isPrimary: true, onClick: () => {
+    return ((0, jsx_runtime_1.jsx)("section", { className: "h-screen", children: (0, jsx_runtime_1.jsxs)("div", { className: "w-[440px] h-full flex flex-col bg-neutral-bg-weak", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex flex-row border-b border-neutral-border-weak p-3", children: (0, jsx_runtime_1.jsxs)("div", { className: "ml-auto", children: [(0, jsx_runtime_1.jsx)(react_1.CleanIconButton, { description: "settings", tooltipProps: {}, children: (0, jsx_runtime_1.jsx)(icons_1.Cog6ToothIconOutline, {}) }), (0, jsx_runtime_1.jsx)(react_1.CleanIconButton, { description: "close", children: (0, jsx_runtime_1.jsx)(icons_1.XMarkIconOutline, {}) })] }) }), (0, jsx_runtime_1.jsx)("div", { className: "p-4 flex flex-col grow overflow-y-auto", children: messages.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-col ", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-12", children: [(0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "display", children: "Hi [User], how can I help you today?" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-4", children: [(0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Suggestions" }), (0, jsx_runtime_1.jsx)(ai_1.Suggestion, { isPrimary: true, onClick: () => {
                                                 handleSend('I want to import data');
                                             }, children: "I want to import data" }), (0, jsx_runtime_1.jsx)(ai_1.Suggestion, { onClick: () => {
                                                 handleSend('Create an AI agent');
@@ -150,10 +150,10 @@ const Component = () => {
                                                 handleSend('Invite project members');
                                             }, children: "Invite project members" }), (0, jsx_runtime_1.jsx)(ai_1.Suggestion, { onClick: () => {
                                                 handleSend('Generate a report');
-                                            }, children: "Generate a report" })] }), (0, jsx_runtime_1.jsxs)(react_1.Typography, { variant: "body-medium", children: ["You can also drag and drop files here, or", ' ', (0, jsx_runtime_1.jsx)(react_1.TextLink, { as: "button", type: "internal-underline", children: "browse" }), ". Supports CVG, MOV, PDF"] })] }) })) : ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-gap-4 n-pb-4", children: [messages.map((msg, idx) => ((0, jsx_runtime_1.jsx)("div", { className: `n-flex ${msg.role === 'user' ? 'n-justify-end' : 'n-justify-start'}`, children: msg.role === 'user' ? ((0, jsx_runtime_1.jsx)("div", { className: "n-max-w-[85%]", children: (0, jsx_runtime_1.jsx)(ai_1.UserBubble, { avatarProps: {
+                                            }, children: "Generate a report" })] }), (0, jsx_runtime_1.jsxs)(react_1.Typography, { variant: "body-medium", children: ["You can also drag and drop files here, or", ' ', (0, jsx_runtime_1.jsx)(react_1.TextLink, { as: "button", type: "internal", children: "browse" }), ". Supports CVG, MOV, PDF"] })] }) })) : ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-4 pb-4", children: [messages.map((msg, idx) => ((0, jsx_runtime_1.jsx)("div", { className: `flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`, children: msg.role === 'user' ? ((0, jsx_runtime_1.jsx)("div", { className: "max-w-[85%]", children: (0, jsx_runtime_1.jsx)(ai_1.UserBubble, { avatarProps: {
                                             name: 'NM',
                                             type: 'letters',
-                                        }, children: msg.content }) })) : ((0, jsx_runtime_1.jsxs)("div", { className: "n-w-full n-flex n-flex-col n-gap-2", children: [msg.thinkingTime !== undefined && ((0, jsx_runtime_1.jsx)(ai_1.Thinking, { isThinking: false, thinkingMs: msg.thinkingTime })), (0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-gap-2", children: [(0, jsx_runtime_1.jsx)(ai_1.Response, { children: msg.content }), msg.isDone === true && ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-row n-gap-1.5", children: [(0, jsx_runtime_1.jsx)(react_1.CleanIconButton, { size: "small", description: "Dislike", children: (0, jsx_runtime_1.jsx)(icons_1.HandThumbDownIconOutline, {}) }), (0, jsx_runtime_1.jsx)(react_1.CleanIconButton, { size: "small", description: "Re-run", children: (0, jsx_runtime_1.jsx)(icons_1.ArrowPathIconOutline, {}) }), (0, jsx_runtime_1.jsx)(react_1.CleanIconButton, { size: "small", description: "Copy", children: (0, jsx_runtime_1.jsx)(icons_1.Square2StackIconOutline, {}) })] }))] })] })) }, idx))), isThinking && (0, jsx_runtime_1.jsx)(ai_1.Thinking, { isThinking: true }), (0, jsx_runtime_1.jsx)("div", { ref: messagesEndRef })] })) }), (0, jsx_runtime_1.jsx)("div", { className: "n-px-4 n-pt-4 n-pb-1 n-mt-auto", children: (0, jsx_runtime_1.jsx)(ai_1.Prompt, { value: prompt, onChange: (event) => setPrompt(event.target.value), onSubmitPrompt: () => handleSend(), onCancelPrompt: handleCancel, isRunningPrompt: isThinking || isStreaming, isSubmitDisabled: prompt.length === 0 && !(isThinking || isStreaming), bottomContent: (0, jsx_runtime_1.jsx)(react_1.CleanIconButton, { description: "Add files", size: "small", children: (0, jsx_runtime_1.jsx)(icons_1.PlusIconOutline, {}) }) }) })] }) }));
+                                        }, children: msg.content }) })) : ((0, jsx_runtime_1.jsxs)("div", { className: "w-full flex flex-col gap-2", children: [msg.thinkingTime !== undefined && ((0, jsx_runtime_1.jsx)(ai_1.Thinking, { isThinking: false, thinkingMs: msg.thinkingTime })), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-2", children: [(0, jsx_runtime_1.jsx)(ai_1.Response, { children: msg.content }), msg.isDone === true && ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-row gap-1.5", children: [(0, jsx_runtime_1.jsx)(react_1.CleanIconButton, { size: "small", description: "Dislike", children: (0, jsx_runtime_1.jsx)(icons_1.HandThumbDownIconOutline, {}) }), (0, jsx_runtime_1.jsx)(react_1.CleanIconButton, { size: "small", description: "Re-run", children: (0, jsx_runtime_1.jsx)(icons_1.ArrowPathIconOutline, {}) }), (0, jsx_runtime_1.jsx)(react_1.CleanIconButton, { size: "small", description: "Copy", children: (0, jsx_runtime_1.jsx)(icons_1.Square2StackIconOutline, {}) })] }))] })] })) }, idx))), isThinking && (0, jsx_runtime_1.jsx)(ai_1.Thinking, { isThinking: true }), (0, jsx_runtime_1.jsx)("div", { ref: messagesEndRef })] })) }), (0, jsx_runtime_1.jsx)("div", { className: "px-4 pt-4 pb-1 mt-auto", children: (0, jsx_runtime_1.jsx)(ai_1.Prompt, { value: prompt, onChange: (event) => setPrompt(event.target.value), onSubmitPrompt: () => handleSend(), onCancelPrompt: handleCancel, isRunningPrompt: isThinking || isStreaming, isSubmitDisabled: prompt.length === 0 && !(isThinking || isStreaming), bottomContent: (0, jsx_runtime_1.jsx)(react_1.CleanIconButton, { description: "Add files", size: "small", children: (0, jsx_runtime_1.jsx)(icons_1.PlusIconOutline, {}) }) }) })] }) }));
 };
 exports.Component = Component;
 exports.default = exports.Component;

package/lib/cjs/ai/response/stories/response-full-example.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"response-full-example.story.js","sourceRoot":"","sources":["../../../../../src/ai/response/stories/response-full-example.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 */\nimport { CleanIconButton, TextLink, Typography } from '@neo4j-ndl/react';\nimport {\n  Prompt,\n  Response,\n  Suggestion,\n  Thinking,\n  UserBubble,\n} from '@neo4j-ndl/react/ai';\nimport {\n  ArrowPathIconOutline,\n  Cog6ToothIconOutline,\n  HandThumbDownIconOutline,\n  PlusIconOutline,\n  Square2StackIconOutline,\n  XMarkIconOutline,\n} from '@neo4j-ndl/react/icons';\nimport { useEffect, useRef, useState } from 'react';\n\nconst FAKE_RESPONSES = [\n  `Here is a simple response with some **bold text** and *italics*.`,\n  `Here is a list of items:\n- Item 1\n- Item 2\n- Item 3`,\n  `Here is a code block example:\n\n\\`\\`\\`typescript\nconst greeting = \"Hello World\";\nconsole.log(greeting);\n\\`\\`\\`\n`,\n  `# Heading 1\n## Heading 2\n### Heading 3\n\nSome text under headings.`,\n  `You can also use tables:\n\n| Header 1 | Header 2 |\n|Data 1|Data 2|\n|Data 3|Data 4|\n`,\n];\n\nexport const Component = () => {\n  const [messages, setMessages] = useState<\n    {\n      role: 'user' | 'assistant';\n      content: string;\n      thinkingTime?: number;\n      isDone?: boolean;\n    }[]\n  >([]);\n  const [prompt, setPrompt] = useState('');\n  const [isThinking, setIsThinking] = useState(false);\n  const [isStreaming, setIsStreaming] = useState(false);\n  const [responseIndex, setResponseIndex] = useState(0);\n  const messagesEndRef = useRef<HTMLDivElement>(null);\n  const timeoutRef = useRef<NodeJS.Timeout | null>(null);\n  const intervalRef = useRef<NodeJS.Timeout | null>(null);\n\n  const scrollToBottom = () => {\n    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });\n  };\n\n  useEffect(() => {\n    scrollToBottom();\n  }, [messages, isThinking]);\n\n  const handleCancel = () => {\n    if (timeoutRef.current) {\n      clearTimeout(timeoutRef.current);\n    }\n    if (intervalRef.current) {\n      clearInterval(intervalRef.current);\n    }\n    setIsThinking(false);\n    setIsStreaming(false);\n\n    // Mark the last message as done if stopped\n    setMessages((prev) => {\n      const newMessages = [...prev];\n      const lastMessage = newMessages[newMessages.length - 1];\n      if (lastMessage?.role === 'assistant') {\n        lastMessage.isDone = true;\n      }\n      return newMessages;\n    });\n  };\n\n  const handleSend = (overridePrompt?: string) => {\n    const textToSend = overridePrompt || prompt;\n\n    if (!textToSend.trim()) {\n      return;\n    }\n\n    setMessages((prev) => [...prev, { content: textToSend, role: 'user' }]);\n    setPrompt('');\n    setIsThinking(true);\n    const startTime = Date.now();\n\n    // Simulate network delay (thinking time)\n    timeoutRef.current = setTimeout(() => {\n      const endTime = Date.now();\n      const thinkingTime = endTime - startTime;\n      setIsThinking(false);\n      setIsStreaming(true);\n\n      const responseText = FAKE_RESPONSES[responseIndex];\n      setResponseIndex((prev) => (prev + 1) % FAKE_RESPONSES.length);\n\n      let currentText = '';\n      setMessages((prev) => [\n        ...prev,\n        { content: '', isDone: false, role: 'assistant', thinkingTime },\n      ]);\n\n      // Simulate streaming\n      intervalRef.current = setInterval(() => {\n        if (currentText.length < responseText.length) {\n          // Add a few characters at a time to simulate chunks\n          // Ensure we don't split newlines incorrectly if that's an issue,\n          // but simple slicing should be fine as long as the source has \\n.\n          const chunk = responseText.slice(\n            currentText.length,\n            currentText.length + 2,\n          );\n          currentText += chunk;\n\n          setMessages((prev) => {\n            const newMessages = [...prev];\n            const lastMessage = newMessages[newMessages.length - 1];\n            if (lastMessage.role === 'assistant') {\n              lastMessage.content = currentText;\n            }\n            return newMessages;\n          });\n        } else {\n          if (intervalRef.current) {\n            clearInterval(intervalRef.current);\n          }\n          setIsStreaming(false);\n          setMessages((prev) => {\n            const newMessages = [...prev];\n            const lastMessage = newMessages[newMessages.length - 1];\n            if (lastMessage.role === 'assistant') {\n              lastMessage.isDone = true;\n            }\n            return newMessages;\n          });\n        }\n      }, 50);\n    }, 2000);\n  };\n\n  return (\n    <section className=\"n-h-screen\">\n      <div className=\"n-w-[440px] n-h-full n-flex n-flex-col n-bg-neutral-bg-weak\">\n        <div className=\"n-flex n-flex-row n-border-b n-border-neutral-border-weak n-p-3\">\n          <div className=\"n-ml-auto\">\n            <CleanIconButton description=\"settings\" tooltipProps={{}}>\n              <Cog6ToothIconOutline />\n            </CleanIconButton>\n            <CleanIconButton description=\"close\">\n              <XMarkIconOutline />\n            </CleanIconButton>\n          </div>\n        </div>\n        <div className=\"n-p-4 n-flex n-flex-col n-grow n-overflow-y-auto\">\n          {messages.length === 0 ? (\n            <div className=\"n-flex n-flex-col \">\n              <div className=\"n-flex n-flex-col n-gap-12\">\n                <Typography variant=\"display\">\n                  Hi [User], how can I help you today?\n                </Typography>\n                <div className=\"n-flex n-flex-col n-gap-4\">\n                  <Typography variant=\"body-medium\">Suggestions</Typography>\n                  <Suggestion\n                    isPrimary\n                    onClick={() => {\n                      handleSend('I want to import data');\n                    }}\n                  >\n                    I want to import data\n                  </Suggestion>\n                  <Suggestion\n                    onClick={() => {\n                      handleSend('Create an AI agent');\n                    }}\n                  >\n                    Create an AI agent\n                  </Suggestion>\n                  <Suggestion\n                    onClick={() => {\n                      handleSend('Invite project members');\n                    }}\n                  >\n                    Invite project members\n                  </Suggestion>\n                  <Suggestion\n                    onClick={() => {\n                      handleSend('Generate a report');\n                    }}\n                  >\n                    Generate a report\n                  </Suggestion>\n                </div>\n                <Typography variant=\"body-medium\">\n                  You can also drag and drop files here, or{' '}\n                  <TextLink as=\"button\" type=\"internal-underline\">\n                    browse\n                  </TextLink>\n                  . Supports CVG, MOV, PDF\n                </Typography>\n              </div>\n            </div>\n          ) : (\n            <div className=\"n-flex n-flex-col n-gap-4 n-pb-4\">\n              {messages.map((msg, idx) => (\n                <div\n                  key={idx}\n                  className={`n-flex ${\n                    msg.role === 'user' ? 'n-justify-end' : 'n-justify-start'\n                  }`}\n                >\n                  {msg.role === 'user' ? (\n                    <div className=\"n-max-w-[85%]\">\n                      <UserBubble\n                        avatarProps={{\n                          name: 'NM',\n                          type: 'letters',\n                        }}\n                      >\n                        {msg.content}\n                      </UserBubble>\n                    </div>\n                  ) : (\n                    <div className=\"n-w-full n-flex n-flex-col n-gap-2\">\n                      {msg.thinkingTime !== undefined && (\n                        <Thinking\n                          isThinking={false}\n                          thinkingMs={msg.thinkingTime}\n                        />\n                      )}\n                      <div className=\"n-flex n-flex-col n-gap-2\">\n                        <Response>{msg.content}</Response>\n\n                        {msg.isDone === true && (\n                          <div className=\"n-flex n-flex-row n-gap-1.5\">\n                            <CleanIconButton size=\"small\" description=\"Dislike\">\n                              <HandThumbDownIconOutline />\n                            </CleanIconButton>\n                            <CleanIconButton size=\"small\" description=\"Re-run\">\n                              <ArrowPathIconOutline />\n                            </CleanIconButton>\n                            <CleanIconButton size=\"small\" description=\"Copy\">\n                              <Square2StackIconOutline />\n                            </CleanIconButton>\n                          </div>\n                        )}\n                      </div>\n                    </div>\n                  )}\n                </div>\n              ))}\n              {isThinking && <Thinking isThinking={true} />}\n              <div ref={messagesEndRef} />\n            </div>\n          )}\n        </div>\n        <div className=\"n-px-4 n-pt-4 n-pb-1 n-mt-auto\">\n          <Prompt\n            value={prompt}\n            onChange={(event) => setPrompt(event.target.value)}\n            onSubmitPrompt={() => handleSend()}\n            onCancelPrompt={handleCancel}\n            isRunningPrompt={isThinking || isStreaming}\n            isSubmitDisabled={\n              prompt.length === 0 && !(isThinking || isStreaming)\n            }\n            bottomContent={\n              <CleanIconButton description=\"Add files\" size=\"small\">\n                <PlusIconOutline />\n              </CleanIconButton>\n            }\n          />\n        </div>\n      </div>\n    </section>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"response-full-example.story.js","sourceRoot":"","sources":["../../../../../src/ai/response/stories/response-full-example.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 */\nimport { CleanIconButton, TextLink, Typography } from '@neo4j-ndl/react';\nimport {\n  Prompt,\n  Response,\n  Suggestion,\n  Thinking,\n  UserBubble,\n} from '@neo4j-ndl/react/ai';\nimport {\n  ArrowPathIconOutline,\n  Cog6ToothIconOutline,\n  HandThumbDownIconOutline,\n  PlusIconOutline,\n  Square2StackIconOutline,\n  XMarkIconOutline,\n} from '@neo4j-ndl/react/icons';\nimport { useEffect, useRef, useState } from 'react';\n\nconst FAKE_RESPONSES = [\n  `Here is a simple response with some **bold text** and *italics*.`,\n  `Here is a list of items:\n- Item 1\n- Item 2\n- Item 3`,\n  `Here is a code block example:\n\n\\`\\`\\`typescript\nconst greeting = \"Hello World\";\nconsole.log(greeting);\n\\`\\`\\`\n`,\n  `# Heading 1\n## Heading 2\n### Heading 3\n\nSome text under headings.`,\n  `You can also use tables:\n\n| Header 1 | Header 2 |\n|Data 1|Data 2|\n|Data 3|Data 4|\n`,\n];\n\nexport const Component = () => {\n  const [messages, setMessages] = useState<\n    {\n      role: 'user' | 'assistant';\n      content: string;\n      thinkingTime?: number;\n      isDone?: boolean;\n    }[]\n  >([]);\n  const [prompt, setPrompt] = useState('');\n  const [isThinking, setIsThinking] = useState(false);\n  const [isStreaming, setIsStreaming] = useState(false);\n  const [responseIndex, setResponseIndex] = useState(0);\n  const messagesEndRef = useRef<HTMLDivElement>(null);\n  const timeoutRef = useRef<NodeJS.Timeout | null>(null);\n  const intervalRef = useRef<NodeJS.Timeout | null>(null);\n\n  const scrollToBottom = () => {\n    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });\n  };\n\n  useEffect(() => {\n    scrollToBottom();\n  }, [messages, isThinking]);\n\n  const handleCancel = () => {\n    if (timeoutRef.current) {\n      clearTimeout(timeoutRef.current);\n    }\n    if (intervalRef.current) {\n      clearInterval(intervalRef.current);\n    }\n    setIsThinking(false);\n    setIsStreaming(false);\n\n    // Mark the last message as done if stopped\n    setMessages((prev) => {\n      const newMessages = [...prev];\n      const lastMessage = newMessages[newMessages.length - 1];\n      if (lastMessage?.role === 'assistant') {\n        lastMessage.isDone = true;\n      }\n      return newMessages;\n    });\n  };\n\n  const handleSend = (overridePrompt?: string) => {\n    const textToSend = overridePrompt || prompt;\n\n    if (!textToSend.trim()) {\n      return;\n    }\n\n    setMessages((prev) => [...prev, { content: textToSend, role: 'user' }]);\n    setPrompt('');\n    setIsThinking(true);\n    const startTime = Date.now();\n\n    // Simulate network delay (thinking time)\n    timeoutRef.current = setTimeout(() => {\n      const endTime = Date.now();\n      const thinkingTime = endTime - startTime;\n      setIsThinking(false);\n      setIsStreaming(true);\n\n      const responseText = FAKE_RESPONSES[responseIndex];\n      setResponseIndex((prev) => (prev + 1) % FAKE_RESPONSES.length);\n\n      let currentText = '';\n      setMessages((prev) => [\n        ...prev,\n        { content: '', isDone: false, role: 'assistant', thinkingTime },\n      ]);\n\n      // Simulate streaming\n      intervalRef.current = setInterval(() => {\n        if (currentText.length < responseText.length) {\n          // Add a few characters at a time to simulate chunks\n          // Ensure we don't split newlines incorrectly if that's an issue,\n          // but simple slicing should be fine as long as the source has \\n.\n          const chunk = responseText.slice(\n            currentText.length,\n            currentText.length + 2,\n          );\n          currentText += chunk;\n\n          setMessages((prev) => {\n            const newMessages = [...prev];\n            const lastMessage = newMessages[newMessages.length - 1];\n            if (lastMessage.role === 'assistant') {\n              lastMessage.content = currentText;\n            }\n            return newMessages;\n          });\n        } else {\n          if (intervalRef.current) {\n            clearInterval(intervalRef.current);\n          }\n          setIsStreaming(false);\n          setMessages((prev) => {\n            const newMessages = [...prev];\n            const lastMessage = newMessages[newMessages.length - 1];\n            if (lastMessage.role === 'assistant') {\n              lastMessage.isDone = true;\n            }\n            return newMessages;\n          });\n        }\n      }, 50);\n    }, 2000);\n  };\n\n  return (\n    <section className=\"h-screen\">\n      <div className=\"w-[440px] h-full flex flex-col bg-neutral-bg-weak\">\n        <div className=\"flex flex-row border-b border-neutral-border-weak p-3\">\n          <div className=\"ml-auto\">\n            <CleanIconButton description=\"settings\" tooltipProps={{}}>\n              <Cog6ToothIconOutline />\n            </CleanIconButton>\n            <CleanIconButton description=\"close\">\n              <XMarkIconOutline />\n            </CleanIconButton>\n          </div>\n        </div>\n        <div className=\"p-4 flex flex-col grow overflow-y-auto\">\n          {messages.length === 0 ? (\n            <div className=\"flex flex-col \">\n              <div className=\"flex flex-col gap-12\">\n                <Typography variant=\"display\">\n                  Hi [User], how can I help you today?\n                </Typography>\n                <div className=\"flex flex-col gap-4\">\n                  <Typography variant=\"body-medium\">Suggestions</Typography>\n                  <Suggestion\n                    isPrimary\n                    onClick={() => {\n                      handleSend('I want to import data');\n                    }}\n                  >\n                    I want to import data\n                  </Suggestion>\n                  <Suggestion\n                    onClick={() => {\n                      handleSend('Create an AI agent');\n                    }}\n                  >\n                    Create an AI agent\n                  </Suggestion>\n                  <Suggestion\n                    onClick={() => {\n                      handleSend('Invite project members');\n                    }}\n                  >\n                    Invite project members\n                  </Suggestion>\n                  <Suggestion\n                    onClick={() => {\n                      handleSend('Generate a report');\n                    }}\n                  >\n                    Generate a report\n                  </Suggestion>\n                </div>\n                <Typography variant=\"body-medium\">\n                  You can also drag and drop files here, or{' '}\n                  <TextLink as=\"button\" type=\"internal\">\n                    browse\n                  </TextLink>\n                  . Supports CVG, MOV, PDF\n                </Typography>\n              </div>\n            </div>\n          ) : (\n            <div className=\"flex flex-col gap-4 pb-4\">\n              {messages.map((msg, idx) => (\n                <div\n                  key={idx}\n                  className={`flex ${\n                    msg.role === 'user' ? 'justify-end' : 'justify-start'\n                  }`}\n                >\n                  {msg.role === 'user' ? (\n                    <div className=\"max-w-[85%]\">\n                      <UserBubble\n                        avatarProps={{\n                          name: 'NM',\n                          type: 'letters',\n                        }}\n                      >\n                        {msg.content}\n                      </UserBubble>\n                    </div>\n                  ) : (\n                    <div className=\"w-full flex flex-col gap-2\">\n                      {msg.thinkingTime !== undefined && (\n                        <Thinking\n                          isThinking={false}\n                          thinkingMs={msg.thinkingTime}\n                        />\n                      )}\n                      <div className=\"flex flex-col gap-2\">\n                        <Response>{msg.content}</Response>\n\n                        {msg.isDone === true && (\n                          <div className=\"flex flex-row gap-1.5\">\n                            <CleanIconButton size=\"small\" description=\"Dislike\">\n                              <HandThumbDownIconOutline />\n                            </CleanIconButton>\n                            <CleanIconButton size=\"small\" description=\"Re-run\">\n                              <ArrowPathIconOutline />\n                            </CleanIconButton>\n                            <CleanIconButton size=\"small\" description=\"Copy\">\n                              <Square2StackIconOutline />\n                            </CleanIconButton>\n                          </div>\n                        )}\n                      </div>\n                    </div>\n                  )}\n                </div>\n              ))}\n              {isThinking && <Thinking isThinking={true} />}\n              <div ref={messagesEndRef} />\n            </div>\n          )}\n        </div>\n        <div className=\"px-4 pt-4 pb-1 mt-auto\">\n          <Prompt\n            value={prompt}\n            onChange={(event) => setPrompt(event.target.value)}\n            onSubmitPrompt={() => handleSend()}\n            onCancelPrompt={handleCancel}\n            isRunningPrompt={isThinking || isStreaming}\n            isSubmitDisabled={\n              prompt.length === 0 && !(isThinking || isStreaming)\n            }\n            bottomContent={\n              <CleanIconButton description=\"Add files\" size=\"small\">\n                <PlusIconOutline />\n              </CleanIconButton>\n            }\n          />\n        </div>\n      </div>\n    </section>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/ai/suggestion/stories/suggestion-sizes.story.js

@@ -24,7 +24,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 require("@neo4j-ndl/base/lib/neo4j-ds-styles.css");
 const ai_1 = require("@neo4j-ndl/react/ai");
 const Component = () => {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-row n-gap-token-8", children: [(0, jsx_runtime_1.jsx)(ai_1.Suggestion, { size: "small", children: "This is a small suggestion" }), (0, jsx_runtime_1.jsx)(ai_1.Suggestion, { size: "large", children: "This is a large suggestion" })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-row gap-token-8", children: [(0, jsx_runtime_1.jsx)(ai_1.Suggestion, { size: "small", children: "This is a small suggestion" }), (0, jsx_runtime_1.jsx)(ai_1.Suggestion, { size: "large", children: "This is a large suggestion" })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=suggestion-sizes.story.js.map

package/lib/cjs/ai/suggestion/stories/suggestion-sizes.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"suggestion-sizes.story.js","sourceRoot":"","sources":["../../../../../src/ai/suggestion/stories/suggestion-sizes.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAiD;AAEjD,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,iCAAK,SAAS,EAAC,iCAAiC,aAC9C,uBAAC,eAAU,IAAC,IAAI,EAAC,OAAO,2CAAwC,EAChE,uBAAC,eAAU,IAAC,IAAI,EAAC,OAAO,2CAAwC,IAC5D,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 { Suggestion } from '@neo4j-ndl/react/ai';\n\nconst Component = () => {\n  return (\n    <div className=\"n-flex n-flex-row n-gap-token-8\">\n      <Suggestion size=\"small\">This is a small suggestion</Suggestion>\n      <Suggestion size=\"large\">This is a large suggestion</Suggestion>\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"suggestion-sizes.story.js","sourceRoot":"","sources":["../../../../../src/ai/suggestion/stories/suggestion-sizes.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAiD;AAEjD,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,iCAAK,SAAS,EAAC,2BAA2B,aACxC,uBAAC,eAAU,IAAC,IAAI,EAAC,OAAO,2CAAwC,EAChE,uBAAC,eAAU,IAAC,IAAI,EAAC,OAAO,2CAAwC,IAC5D,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 { Suggestion } from '@neo4j-ndl/react/ai';\n\nconst Component = () => {\n  return (\n    <div className=\"flex flex-row gap-token-8\">\n      <Suggestion size=\"small\">This is a small suggestion</Suggestion>\n      <Suggestion size=\"large\">This is a large suggestion</Suggestion>\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/ai/user-bubble/stories/user-bubble-and-files.story.js

@@ -29,7 +29,7 @@ const react_2 = require("react");
 const Component = () => {
     const [isMenuOpen, setIsMenuOpen] = (0, react_2.useState)(false);
     const anchorRef = (0, react_2.useRef)(null);
-    return ((0, jsx_runtime_1.jsx)("div", { className: "n-flex n-flex-coln-gap-token-64 n-w-full n-justify-end", children: (0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-gap-token-8 n-items-end", children: [(0, jsx_runtime_1.jsx)(ai_1.MoreFiles, { count: 3, isActive: isMenuOpen, onClick: () => setIsMenuOpen(!isMenuOpen), ref: anchorRef }), (0, jsx_runtime_1.jsxs)(react_1.Menu, { isOpen: isMenuOpen, anchorRef: anchorRef, onClose: () => setIsMenuOpen(false), children: [(0, jsx_runtime_1.jsx)(react_1.Menu.Item, { leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.DocumentIconOutline, {}), title: "Gardening tips", description: "PDF", onClick: () => alert('Gardening tips') }), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.TableCellsIconOutline, {}), title: "TvSeries", description: "CSV", onClick: () => alert('TvSeries') }), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.PhotoIconOutline, {}), title: "Family photo", description: "JPG", onClick: () => alert('Family photo') })] }), (0, jsx_runtime_1.jsx)(ai_1.ImageTag, { src: "https://plus.unsplash.com/premium_photo-1676496046182-356a6a0ed002?q=80&w=2952&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", alt: "Landscape image", fileName: "Landscape image", fileType: "jpg" }), (0, jsx_runtime_1.jsx)(ai_1.FileTag, { icon: (0, jsx_runtime_1.jsx)(icons_1.TableCellsIconOutline, {}), fileName: "MoviesDecade", fileType: "csv" }), (0, jsx_runtime_1.jsx)(ai_1.FileTag, { icon: (0, jsx_runtime_1.jsx)(icons_1.DocumentIconOutline, {}), fileName: "Science Fiction Bestsellers", fileType: "pdf" }), (0, jsx_runtime_1.jsx)(ai_1.UserBubble, { avatarProps: {
+    return ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-coln-gap-token-64 w-full justify-end", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-token-8 items-end", children: [(0, jsx_runtime_1.jsx)(ai_1.MoreFiles, { count: 3, isActive: isMenuOpen, onClick: () => setIsMenuOpen(!isMenuOpen), ref: anchorRef }), (0, jsx_runtime_1.jsxs)(react_1.Menu, { isOpen: isMenuOpen, anchorRef: anchorRef, onClose: () => setIsMenuOpen(false), children: [(0, jsx_runtime_1.jsx)(react_1.Menu.Item, { leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.DocumentIconOutline, {}), title: "Gardening tips", description: "PDF", onClick: () => alert('Gardening tips') }), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.TableCellsIconOutline, {}), title: "TvSeries", description: "CSV", onClick: () => alert('TvSeries') }), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.PhotoIconOutline, {}), title: "Family photo", description: "JPG", onClick: () => alert('Family photo') })] }), (0, jsx_runtime_1.jsx)(ai_1.ImageTag, { src: "https://plus.unsplash.com/premium_photo-1676496046182-356a6a0ed002?q=80&w=2952&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", alt: "Landscape image", fileName: "Landscape image", fileType: "jpg" }), (0, jsx_runtime_1.jsx)(ai_1.FileTag, { icon: (0, jsx_runtime_1.jsx)(icons_1.TableCellsIconOutline, {}), fileName: "MoviesDecade", fileType: "csv" }), (0, jsx_runtime_1.jsx)(ai_1.FileTag, { icon: (0, jsx_runtime_1.jsx)(icons_1.DocumentIconOutline, {}), fileName: "Science Fiction Bestsellers", fileType: "pdf" }), (0, jsx_runtime_1.jsx)(ai_1.UserBubble, { avatarProps: {
                         name: 'KM',
                         source: 'https://media.istockphoto.com/id/1334716681/photo/a-smiling-man.jpg?s=612x612&w=0&k=20&c=U6rkSDpQMzkcJEqx2hAa63fNLIhqnZb31Xuc_QSi648=',
                         type: 'image',

package/lib/cjs/ai/user-bubble/stories/user-bubble-and-files.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"user-bubble-and-files.story.js","sourceRoot":"","sources":["../../../../../src/ai/user-bubble/stories/user-bubble-and-files.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAwC;AACxC,4CAA+E;AAC/E,kDAIgC;AAChC,iCAAyC;AAEzC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IACpD,MAAM,SAAS,GAAG,IAAA,cAAM,EAA2B,IAAI,CAAC,CAAC;IAEzD,OAAO,CACL,gCAAK,SAAS,EAAC,wDAAwD,YACrE,iCAAK,SAAS,EAAC,6CAA6C,aAC1D,uBAAC,cAAS,IACR,KAAK,EAAE,CAAC,EACR,QAAQ,EAAE,UAAU,EACpB,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,CAAC,UAAU,CAAC,EACzC,GAAG,EAAE,SAAS,GACd,EACF,wBAAC,YAAI,IACH,MAAM,EAAE,UAAU,EAClB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,aAEnC,uBAAC,YAAI,CAAC,IAAI,IACR,aAAa,EAAE,uBAAC,2BAAmB,KAAG,EACtC,KAAK,EAAC,gBAAgB,EACtB,WAAW,EAAC,KAAK,EACjB,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,gBAAgB,CAAC,GACtC,EACF,uBAAC,YAAI,CAAC,IAAI,IACR,aAAa,EAAE,uBAAC,6BAAqB,KAAG,EACxC,KAAK,EAAC,UAAU,EAChB,WAAW,EAAC,KAAK,EACjB,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,GAChC,EACF,uBAAC,YAAI,CAAC,IAAI,IACR,aAAa,EAAE,uBAAC,wBAAgB,KAAG,EACnC,KAAK,EAAC,cAAc,EACpB,WAAW,EAAC,KAAK,EACjB,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,cAAc,CAAC,GACpC,IACG,EACP,uBAAC,aAAQ,IACP,GAAG,EAAC,8KAA8K,EAClL,GAAG,EAAC,iBAAiB,EACrB,QAAQ,EAAC,iBAAiB,EAC1B,QAAQ,EAAC,KAAK,GACd,EACF,uBAAC,YAAO,IACN,IAAI,EAAE,uBAAC,6BAAqB,KAAG,EAC/B,QAAQ,EAAC,cAAc,EACvB,QAAQ,EAAC,KAAK,GACd,EACF,uBAAC,YAAO,IACN,IAAI,EAAE,uBAAC,2BAAmB,KAAG,EAC7B,QAAQ,EAAC,6BAA6B,EACtC,QAAQ,EAAC,KAAK,GACd,EACF,uBAAC,eAAU,IACT,WAAW,EAAE;wBACX,IAAI,EAAE,IAAI;wBACV,MAAM,EACJ,uIAAuI;wBACzI,IAAI,EAAE,OAAO;qBACd,8DAGU,IACT,GACF,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 { Menu } from '@neo4j-ndl/react';\nimport { FileTag, ImageTag, MoreFiles, UserBubble } from '@neo4j-ndl/react/ai';\nimport {\n  DocumentIconOutline,\n  PhotoIconOutline,\n  TableCellsIconOutline,\n} from '@neo4j-ndl/react/icons';\nimport { useRef, useState } from 'react';\n\nconst Component = () => {\n  const [isMenuOpen, setIsMenuOpen] = useState(false);\n  const anchorRef = useRef<HTMLButtonElement | null>(null);\n\n  return (\n    <div className=\"n-flex n-flex-coln-gap-token-64 n-w-full n-justify-end\">\n      <div className=\"n-flex n-flex-col n-gap-token-8 n-items-end\">\n        <MoreFiles\n          count={3}\n          isActive={isMenuOpen}\n          onClick={() => setIsMenuOpen(!isMenuOpen)}\n          ref={anchorRef}\n        />\n        <Menu\n          isOpen={isMenuOpen}\n          anchorRef={anchorRef}\n          onClose={() => setIsMenuOpen(false)}\n        >\n          <Menu.Item\n            leadingVisual={<DocumentIconOutline />}\n            title=\"Gardening tips\"\n            description=\"PDF\"\n            onClick={() => alert('Gardening tips')}\n          />\n          <Menu.Item\n            leadingVisual={<TableCellsIconOutline />}\n            title=\"TvSeries\"\n            description=\"CSV\"\n            onClick={() => alert('TvSeries')}\n          />\n          <Menu.Item\n            leadingVisual={<PhotoIconOutline />}\n            title=\"Family photo\"\n            description=\"JPG\"\n            onClick={() => alert('Family photo')}\n          />\n        </Menu>\n        <ImageTag\n          src=\"https://plus.unsplash.com/premium_photo-1676496046182-356a6a0ed002?q=80&w=2952&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Landscape image\"\n          fileName=\"Landscape image\"\n          fileType=\"jpg\"\n        />\n        <FileTag\n          icon={<TableCellsIconOutline />}\n          fileName=\"MoviesDecade\"\n          fileType=\"csv\"\n        />\n        <FileTag\n          icon={<DocumentIconOutline />}\n          fileName=\"Science Fiction Bestsellers\"\n          fileType=\"pdf\"\n        />\n        <UserBubble\n          avatarProps={{\n            name: 'KM',\n            source:\n              'https://media.istockphoto.com/id/1334716681/photo/a-smiling-man.jpg?s=612x612&w=0&k=20&c=U6rkSDpQMzkcJEqx2hAa63fNLIhqnZb31Xuc_QSi648=',\n            type: 'image',\n          }}\n        >\n          Can you analyse my data and tell me about...?\n        </UserBubble>\n      </div>\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"user-bubble-and-files.story.js","sourceRoot":"","sources":["../../../../../src/ai/user-bubble/stories/user-bubble-and-files.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAwC;AACxC,4CAA+E;AAC/E,kDAIgC;AAChC,iCAAyC;AAEzC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IACpD,MAAM,SAAS,GAAG,IAAA,cAAM,EAA2B,IAAI,CAAC,CAAC;IAEzD,OAAO,CACL,gCAAK,SAAS,EAAC,gDAAgD,YAC7D,iCAAK,SAAS,EAAC,qCAAqC,aAClD,uBAAC,cAAS,IACR,KAAK,EAAE,CAAC,EACR,QAAQ,EAAE,UAAU,EACpB,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,CAAC,UAAU,CAAC,EACzC,GAAG,EAAE,SAAS,GACd,EACF,wBAAC,YAAI,IACH,MAAM,EAAE,UAAU,EAClB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,aAEnC,uBAAC,YAAI,CAAC,IAAI,IACR,aAAa,EAAE,uBAAC,2BAAmB,KAAG,EACtC,KAAK,EAAC,gBAAgB,EACtB,WAAW,EAAC,KAAK,EACjB,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,gBAAgB,CAAC,GACtC,EACF,uBAAC,YAAI,CAAC,IAAI,IACR,aAAa,EAAE,uBAAC,6BAAqB,KAAG,EACxC,KAAK,EAAC,UAAU,EAChB,WAAW,EAAC,KAAK,EACjB,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,GAChC,EACF,uBAAC,YAAI,CAAC,IAAI,IACR,aAAa,EAAE,uBAAC,wBAAgB,KAAG,EACnC,KAAK,EAAC,cAAc,EACpB,WAAW,EAAC,KAAK,EACjB,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,cAAc,CAAC,GACpC,IACG,EACP,uBAAC,aAAQ,IACP,GAAG,EAAC,8KAA8K,EAClL,GAAG,EAAC,iBAAiB,EACrB,QAAQ,EAAC,iBAAiB,EAC1B,QAAQ,EAAC,KAAK,GACd,EACF,uBAAC,YAAO,IACN,IAAI,EAAE,uBAAC,6BAAqB,KAAG,EAC/B,QAAQ,EAAC,cAAc,EACvB,QAAQ,EAAC,KAAK,GACd,EACF,uBAAC,YAAO,IACN,IAAI,EAAE,uBAAC,2BAAmB,KAAG,EAC7B,QAAQ,EAAC,6BAA6B,EACtC,QAAQ,EAAC,KAAK,GACd,EACF,uBAAC,eAAU,IACT,WAAW,EAAE;wBACX,IAAI,EAAE,IAAI;wBACV,MAAM,EACJ,uIAAuI;wBACzI,IAAI,EAAE,OAAO;qBACd,8DAGU,IACT,GACF,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 { Menu } from '@neo4j-ndl/react';\nimport { FileTag, ImageTag, MoreFiles, UserBubble } from '@neo4j-ndl/react/ai';\nimport {\n  DocumentIconOutline,\n  PhotoIconOutline,\n  TableCellsIconOutline,\n} from '@neo4j-ndl/react/icons';\nimport { useRef, useState } from 'react';\n\nconst Component = () => {\n  const [isMenuOpen, setIsMenuOpen] = useState(false);\n  const anchorRef = useRef<HTMLButtonElement | null>(null);\n\n  return (\n    <div className=\"flex flex-coln-gap-token-64 w-full justify-end\">\n      <div className=\"flex flex-col gap-token-8 items-end\">\n        <MoreFiles\n          count={3}\n          isActive={isMenuOpen}\n          onClick={() => setIsMenuOpen(!isMenuOpen)}\n          ref={anchorRef}\n        />\n        <Menu\n          isOpen={isMenuOpen}\n          anchorRef={anchorRef}\n          onClose={() => setIsMenuOpen(false)}\n        >\n          <Menu.Item\n            leadingVisual={<DocumentIconOutline />}\n            title=\"Gardening tips\"\n            description=\"PDF\"\n            onClick={() => alert('Gardening tips')}\n          />\n          <Menu.Item\n            leadingVisual={<TableCellsIconOutline />}\n            title=\"TvSeries\"\n            description=\"CSV\"\n            onClick={() => alert('TvSeries')}\n          />\n          <Menu.Item\n            leadingVisual={<PhotoIconOutline />}\n            title=\"Family photo\"\n            description=\"JPG\"\n            onClick={() => alert('Family photo')}\n          />\n        </Menu>\n        <ImageTag\n          src=\"https://plus.unsplash.com/premium_photo-1676496046182-356a6a0ed002?q=80&w=2952&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Landscape image\"\n          fileName=\"Landscape image\"\n          fileType=\"jpg\"\n        />\n        <FileTag\n          icon={<TableCellsIconOutline />}\n          fileName=\"MoviesDecade\"\n          fileType=\"csv\"\n        />\n        <FileTag\n          icon={<DocumentIconOutline />}\n          fileName=\"Science Fiction Bestsellers\"\n          fileType=\"pdf\"\n        />\n        <UserBubble\n          avatarProps={{\n            name: 'KM',\n            source:\n              'https://media.istockphoto.com/id/1334716681/photo/a-smiling-man.jpg?s=612x612&w=0&k=20&c=U6rkSDpQMzkcJEqx2hAa63fNLIhqnZb31Xuc_QSi648=',\n            type: 'image',\n          }}\n        >\n          Can you analyse my data and tell me about...?\n        </UserBubble>\n      </div>\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/announcement-banner/stories/announcement-banner-custom-icons.story.js

@@ -25,7 +25,7 @@ require("@neo4j-ndl/base/lib/neo4j-ds-styles.css");
 const react_1 = require("@neo4j-ndl/react");
 const icons_1 = require("@neo4j-ndl/react/icons");
 const Component = () => {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-gap-token-8 n-w-full", children: [(0, jsx_runtime_1.jsx)(react_1.AnnouncementBanner, { variant: "discovery", hasIcon: true, children: (0, jsx_runtime_1.jsx)(react_1.AnnouncementBanner.Header, { children: "Discovery with the default Sparkles icon" }) }), (0, jsx_runtime_1.jsx)(react_1.AnnouncementBanner, { variant: "discovery", hasIcon: true, icon: (0, jsx_runtime_1.jsx)(icons_1.GiftIconSolid, {}), children: (0, jsx_runtime_1.jsx)(react_1.AnnouncementBanner.Header, { children: "Discovery with a custom gift icon" }) }), (0, jsx_runtime_1.jsx)(react_1.AnnouncementBanner, { variant: "neutral", hasIcon: true, children: (0, jsx_runtime_1.jsx)(react_1.AnnouncementBanner.Header, { children: "Neutral with the default Bolt icon" }) }), (0, jsx_runtime_1.jsx)(react_1.AnnouncementBanner, { variant: "neutral", hasIcon: true, icon: (0, jsx_runtime_1.jsx)(icons_1.RocketLaunchIconSolid, {}), children: (0, jsx_runtime_1.jsx)(react_1.AnnouncementBanner.Header, { children: "Neutral with a custom rocket icon" }) })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-token-8 w-full", children: [(0, jsx_runtime_1.jsx)(react_1.AnnouncementBanner, { variant: "discovery", hasIcon: true, children: (0, jsx_runtime_1.jsx)(react_1.AnnouncementBanner.Header, { children: "Discovery with the default Sparkles icon" }) }), (0, jsx_runtime_1.jsx)(react_1.AnnouncementBanner, { variant: "discovery", hasIcon: true, icon: (0, jsx_runtime_1.jsx)(icons_1.GiftIconSolid, {}), children: (0, jsx_runtime_1.jsx)(react_1.AnnouncementBanner.Header, { children: "Discovery with a custom gift icon" }) }), (0, jsx_runtime_1.jsx)(react_1.AnnouncementBanner, { variant: "neutral", hasIcon: true, children: (0, jsx_runtime_1.jsx)(react_1.AnnouncementBanner.Header, { children: "Neutral with the default Bolt icon" }) }), (0, jsx_runtime_1.jsx)(react_1.AnnouncementBanner, { variant: "neutral", hasIcon: true, icon: (0, jsx_runtime_1.jsx)(icons_1.RocketLaunchIconSolid, {}), children: (0, jsx_runtime_1.jsx)(react_1.AnnouncementBanner.Header, { children: "Neutral with a custom rocket icon" }) })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=announcement-banner-custom-icons.story.js.map

package/lib/cjs/announcement-banner/stories/announcement-banner-custom-icons.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"announcement-banner-custom-icons.story.js","sourceRoot":"","sources":["../../../../src/announcement-banner/stories/announcement-banner-custom-icons.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAsD;AACtD,kDAA8E;AAE9E,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,iCAAK,SAAS,EAAC,0CAA0C,aACvD,uBAAC,0BAAkB,IAAC,OAAO,EAAC,WAAW,EAAC,OAAO,EAAE,IAAI,YACnD,uBAAC,0BAAkB,CAAC,MAAM,2DAEE,GACT,EACrB,uBAAC,0BAAkB,IACjB,OAAO,EAAC,WAAW,EACnB,OAAO,EAAE,IAAI,EACb,IAAI,EAAE,uBAAC,qBAAa,KAAG,YAEvB,uBAAC,0BAAkB,CAAC,MAAM,oDAEE,GACT,EACrB,uBAAC,0BAAkB,IAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,IAAI,YACjD,uBAAC,0BAAkB,CAAC,MAAM,qDAEE,GACT,EACrB,uBAAC,0BAAkB,IACjB,OAAO,EAAC,SAAS,EACjB,OAAO,EAAE,IAAI,EACb,IAAI,EAAE,uBAAC,6BAAqB,KAAG,YAE/B,uBAAC,0BAAkB,CAAC,MAAM,oDAEE,GACT,IACjB,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 { AnnouncementBanner } from '@neo4j-ndl/react';\nimport { GiftIconSolid, RocketLaunchIconSolid } from '@neo4j-ndl/react/icons';\n\nconst Component = () => {\n  return (\n    <div className=\"n-flex n-flex-col n-gap-token-8 n-w-full\">\n      <AnnouncementBanner variant=\"discovery\" hasIcon={true}>\n        <AnnouncementBanner.Header>\n          Discovery with the default Sparkles icon\n        </AnnouncementBanner.Header>\n      </AnnouncementBanner>\n      <AnnouncementBanner\n        variant=\"discovery\"\n        hasIcon={true}\n        icon={<GiftIconSolid />}\n      >\n        <AnnouncementBanner.Header>\n          Discovery with a custom gift icon\n        </AnnouncementBanner.Header>\n      </AnnouncementBanner>\n      <AnnouncementBanner variant=\"neutral\" hasIcon={true}>\n        <AnnouncementBanner.Header>\n          Neutral with the default Bolt icon\n        </AnnouncementBanner.Header>\n      </AnnouncementBanner>\n      <AnnouncementBanner\n        variant=\"neutral\"\n        hasIcon={true}\n        icon={<RocketLaunchIconSolid />}\n      >\n        <AnnouncementBanner.Header>\n          Neutral with a custom rocket icon\n        </AnnouncementBanner.Header>\n      </AnnouncementBanner>\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"announcement-banner-custom-icons.story.js","sourceRoot":"","sources":["../../../../src/announcement-banner/stories/announcement-banner-custom-icons.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAsD;AACtD,kDAA8E;AAE9E,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,iCAAK,SAAS,EAAC,kCAAkC,aAC/C,uBAAC,0BAAkB,IAAC,OAAO,EAAC,WAAW,EAAC,OAAO,EAAE,IAAI,YACnD,uBAAC,0BAAkB,CAAC,MAAM,2DAEE,GACT,EACrB,uBAAC,0BAAkB,IACjB,OAAO,EAAC,WAAW,EACnB,OAAO,EAAE,IAAI,EACb,IAAI,EAAE,uBAAC,qBAAa,KAAG,YAEvB,uBAAC,0BAAkB,CAAC,MAAM,oDAEE,GACT,EACrB,uBAAC,0BAAkB,IAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,IAAI,YACjD,uBAAC,0BAAkB,CAAC,MAAM,qDAEE,GACT,EACrB,uBAAC,0BAAkB,IACjB,OAAO,EAAC,SAAS,EACjB,OAAO,EAAE,IAAI,EACb,IAAI,EAAE,uBAAC,6BAAqB,KAAG,YAE/B,uBAAC,0BAAkB,CAAC,MAAM,oDAEE,GACT,IACjB,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 { AnnouncementBanner } from '@neo4j-ndl/react';\nimport { GiftIconSolid, RocketLaunchIconSolid } from '@neo4j-ndl/react/icons';\n\nconst Component = () => {\n  return (\n    <div className=\"flex flex-col gap-token-8 w-full\">\n      <AnnouncementBanner variant=\"discovery\" hasIcon={true}>\n        <AnnouncementBanner.Header>\n          Discovery with the default Sparkles icon\n        </AnnouncementBanner.Header>\n      </AnnouncementBanner>\n      <AnnouncementBanner\n        variant=\"discovery\"\n        hasIcon={true}\n        icon={<GiftIconSolid />}\n      >\n        <AnnouncementBanner.Header>\n          Discovery with a custom gift icon\n        </AnnouncementBanner.Header>\n      </AnnouncementBanner>\n      <AnnouncementBanner variant=\"neutral\" hasIcon={true}>\n        <AnnouncementBanner.Header>\n          Neutral with the default Bolt icon\n        </AnnouncementBanner.Header>\n      </AnnouncementBanner>\n      <AnnouncementBanner\n        variant=\"neutral\"\n        hasIcon={true}\n        icon={<RocketLaunchIconSolid />}\n      >\n        <AnnouncementBanner.Header>\n          Neutral with a custom rocket icon\n        </AnnouncementBanner.Header>\n      </AnnouncementBanner>\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/announcement-banner/stories/announcement-banner-injected-non-urgent.story.js

@@ -26,7 +26,7 @@ const react_1 = require("@neo4j-ndl/react");
 const react_2 = require("react");
 const Component = () => {
     const [isVisible, setIsVisible] = (0, react_2.useState)(false);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-w-full", children: [isVisible && ((0, jsx_runtime_1.jsx)(react_1.AnnouncementBanner, { variant: "discovery", hasIcon: true, liveRegion: "status", isCloseable: true, onClose: () => setIsVisible(false), children: (0, jsx_runtime_1.jsx)(react_1.AnnouncementBanner.Header, { children: "New Aura features are available for your organization." }) })), (0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-gap-token-16 n-p-token-24 n-bg-neutral-bg-default", children: [(0, jsx_runtime_1.jsx)(react_1.OutlinedButton, { onClick: () => setIsVisible((visible) => !visible), children: isVisible ? 'Hide announcement' : 'Show announcement' }), (0, jsx_runtime_1.jsxs)(react_1.Typography, { variant: "body-medium", children: ["The page is already loaded. Toggle the announcement in to simulate a later campaign or poll. ", (0, jsx_runtime_1.jsx)("code", { children: "liveRegion=\"status\"" }), ' ', "announces politely without interrupting."] })] })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col w-full", children: [isVisible && ((0, jsx_runtime_1.jsx)(react_1.AnnouncementBanner, { variant: "discovery", hasIcon: true, liveRegion: "status", isCloseable: true, onClose: () => setIsVisible(false), children: (0, jsx_runtime_1.jsx)(react_1.AnnouncementBanner.Header, { children: "New Aura features are available for your organization." }) })), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-token-16 p-token-24 bg-neutral-bg-default", children: [(0, jsx_runtime_1.jsx)(react_1.OutlinedButton, { onClick: () => setIsVisible((visible) => !visible), children: isVisible ? 'Hide announcement' : 'Show announcement' }), (0, jsx_runtime_1.jsxs)(react_1.Typography, { variant: "body-medium", children: ["The page is already loaded. Toggle the announcement in to simulate a later campaign or poll. ", (0, jsx_runtime_1.jsx)("code", { children: "liveRegion=\"status\"" }), ' ', "announces politely without interrupting."] })] })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=announcement-banner-injected-non-urgent.story.js.map

package/lib/cjs/announcement-banner/stories/announcement-banner-injected-non-urgent.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"announcement-banner-injected-non-urgent.story.js","sourceRoot":"","sources":["../../../../src/announcement-banner/stories/announcement-banner-injected-non-urgent.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAI0B;AAC1B,iCAAiC;AAEjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAElD,OAAO,CACL,iCAAK,SAAS,EAAC,4BAA4B,aACxC,SAAS,IAAI,CACZ,uBAAC,0BAAkB,IACjB,OAAO,EAAC,WAAW,EACnB,OAAO,EAAE,IAAI,EACb,UAAU,EAAC,QAAQ,EACnB,WAAW,EAAE,IAAI,EACjB,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,YAElC,uBAAC,0BAAkB,CAAC,MAAM,yEAEE,GACT,CACtB,EACD,iCAAK,SAAS,EAAC,uEAAuE,aACpF,uBAAC,sBAAc,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,YAC/D,SAAS,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,mBAAmB,GACvC,EACjB,wBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8GAEP,qEAA0C,EAAC,GAAG,gDAE3D,IACT,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 {\n  AnnouncementBanner,\n  OutlinedButton,\n  Typography,\n} from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\nconst Component = () => {\n  const [isVisible, setIsVisible] = useState(false);\n\n  return (\n    <div className=\"n-flex n-flex-col n-w-full\">\n      {isVisible && (\n        <AnnouncementBanner\n          variant=\"discovery\"\n          hasIcon={true}\n          liveRegion=\"status\"\n          isCloseable={true}\n          onClose={() => setIsVisible(false)}\n        >\n          <AnnouncementBanner.Header>\n            New Aura features are available for your organization.\n          </AnnouncementBanner.Header>\n        </AnnouncementBanner>\n      )}\n      <div className=\"n-flex n-flex-col n-gap-token-16 n-p-token-24 n-bg-neutral-bg-default\">\n        <OutlinedButton onClick={() => setIsVisible((visible) => !visible)}>\n          {isVisible ? 'Hide announcement' : 'Show announcement'}\n        </OutlinedButton>\n        <Typography variant=\"body-medium\">\n          The page is already loaded. Toggle the announcement in to simulate a\n          later campaign or poll. <code>liveRegion=&quot;status&quot;</code>{' '}\n          announces politely without interrupting.\n        </Typography>\n      </div>\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"announcement-banner-injected-non-urgent.story.js","sourceRoot":"","sources":["../../../../src/announcement-banner/stories/announcement-banner-injected-non-urgent.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAI0B;AAC1B,iCAAiC;AAEjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAElD,OAAO,CACL,iCAAK,SAAS,EAAC,sBAAsB,aAClC,SAAS,IAAI,CACZ,uBAAC,0BAAkB,IACjB,OAAO,EAAC,WAAW,EACnB,OAAO,EAAE,IAAI,EACb,UAAU,EAAC,QAAQ,EACnB,WAAW,EAAE,IAAI,EACjB,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,YAElC,uBAAC,0BAAkB,CAAC,MAAM,yEAEE,GACT,CACtB,EACD,iCAAK,SAAS,EAAC,6DAA6D,aAC1E,uBAAC,sBAAc,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,YAC/D,SAAS,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,mBAAmB,GACvC,EACjB,wBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8GAEP,qEAA0C,EAAC,GAAG,gDAE3D,IACT,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 {\n  AnnouncementBanner,\n  OutlinedButton,\n  Typography,\n} from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\nconst Component = () => {\n  const [isVisible, setIsVisible] = useState(false);\n\n  return (\n    <div className=\"flex flex-col w-full\">\n      {isVisible && (\n        <AnnouncementBanner\n          variant=\"discovery\"\n          hasIcon={true}\n          liveRegion=\"status\"\n          isCloseable={true}\n          onClose={() => setIsVisible(false)}\n        >\n          <AnnouncementBanner.Header>\n            New Aura features are available for your organization.\n          </AnnouncementBanner.Header>\n        </AnnouncementBanner>\n      )}\n      <div className=\"flex flex-col gap-token-16 p-token-24 bg-neutral-bg-default\">\n        <OutlinedButton onClick={() => setIsVisible((visible) => !visible)}>\n          {isVisible ? 'Hide announcement' : 'Show announcement'}\n        </OutlinedButton>\n        <Typography variant=\"body-medium\">\n          The page is already loaded. Toggle the announcement in to simulate a\n          later campaign or poll. <code>liveRegion=&quot;status&quot;</code>{' '}\n          announces politely without interrupting.\n        </Typography>\n      </div>\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/announcement-banner/stories/announcement-banner-injected-urgent.story.js

@@ -26,7 +26,7 @@ const react_1 = require("@neo4j-ndl/react");
 const react_2 = require("react");
 const Component = () => {
     const [isVisible, setIsVisible] = (0, react_2.useState)(false);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-w-full", children: [isVisible && ((0, jsx_runtime_1.jsx)(react_1.AnnouncementBanner, { variant: "danger", hasIcon: true, liveRegion: "alert", children: (0, jsx_runtime_1.jsx)(react_1.AnnouncementBanner.Header, { children: "Error: connection to the database was lost. Reconnecting\u2026" }) })), (0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-gap-token-16 n-p-token-24 n-bg-neutral-bg-default", children: [(0, jsx_runtime_1.jsx)(react_1.OutlinedButton, { onClick: () => setIsVisible((visible) => !visible), children: isVisible ? 'Hide announcement' : 'Show announcement' }), (0, jsx_runtime_1.jsxs)(react_1.Typography, { variant: "body-medium", children: ["The page is already loaded. Toggle the announcement in to simulate a connection loss or session expiry.", ' ', (0, jsx_runtime_1.jsx)("code", { children: "liveRegion=\"alert\"" }), " interrupts the screen reader because the message is time-sensitive."] })] })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col w-full", children: [isVisible && ((0, jsx_runtime_1.jsx)(react_1.AnnouncementBanner, { variant: "danger", hasIcon: true, liveRegion: "alert", children: (0, jsx_runtime_1.jsx)(react_1.AnnouncementBanner.Header, { children: "Error: connection to the database was lost. Reconnecting\u2026" }) })), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-token-16 p-token-24 bg-neutral-bg-default", children: [(0, jsx_runtime_1.jsx)(react_1.OutlinedButton, { onClick: () => setIsVisible((visible) => !visible), children: isVisible ? 'Hide announcement' : 'Show announcement' }), (0, jsx_runtime_1.jsxs)(react_1.Typography, { variant: "body-medium", children: ["The page is already loaded. Toggle the announcement in to simulate a connection loss or session expiry.", ' ', (0, jsx_runtime_1.jsx)("code", { children: "liveRegion=\"alert\"" }), " interrupts the screen reader because the message is time-sensitive."] })] })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=announcement-banner-injected-urgent.story.js.map

package/lib/cjs/announcement-banner/stories/announcement-banner-injected-urgent.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"announcement-banner-injected-urgent.story.js","sourceRoot":"","sources":["../../../../src/announcement-banner/stories/announcement-banner-injected-urgent.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAI0B;AAC1B,iCAAiC;AAEjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAElD,OAAO,CACL,iCAAK,SAAS,EAAC,4BAA4B,aACxC,SAAS,IAAI,CACZ,uBAAC,0BAAkB,IAAC,OAAO,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,EAAE,UAAU,EAAC,OAAO,YACpE,uBAAC,0BAAkB,CAAC,MAAM,iFAEE,GACT,CACtB,EACD,iCAAK,SAAS,EAAC,uEAAuE,aACpF,uBAAC,sBAAc,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,YAC/D,SAAS,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,mBAAmB,GACvC,EACjB,wBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,wHAEI,GAAG,EACtC,oEAAyC,4EAE9B,IACT,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 {\n  AnnouncementBanner,\n  OutlinedButton,\n  Typography,\n} from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\nconst Component = () => {\n  const [isVisible, setIsVisible] = useState(false);\n\n  return (\n    <div className=\"n-flex n-flex-col n-w-full\">\n      {isVisible && (\n        <AnnouncementBanner variant=\"danger\" hasIcon={true} liveRegion=\"alert\">\n          <AnnouncementBanner.Header>\n            Error: connection to the database was lost. Reconnecting…\n          </AnnouncementBanner.Header>\n        </AnnouncementBanner>\n      )}\n      <div className=\"n-flex n-flex-col n-gap-token-16 n-p-token-24 n-bg-neutral-bg-default\">\n        <OutlinedButton onClick={() => setIsVisible((visible) => !visible)}>\n          {isVisible ? 'Hide announcement' : 'Show announcement'}\n        </OutlinedButton>\n        <Typography variant=\"body-medium\">\n          The page is already loaded. Toggle the announcement in to simulate a\n          connection loss or session expiry.{' '}\n          <code>liveRegion=&quot;alert&quot;</code> interrupts the screen reader\n          because the message is time-sensitive.\n        </Typography>\n      </div>\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"announcement-banner-injected-urgent.story.js","sourceRoot":"","sources":["../../../../src/announcement-banner/stories/announcement-banner-injected-urgent.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAI0B;AAC1B,iCAAiC;AAEjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAElD,OAAO,CACL,iCAAK,SAAS,EAAC,sBAAsB,aAClC,SAAS,IAAI,CACZ,uBAAC,0BAAkB,IAAC,OAAO,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,EAAE,UAAU,EAAC,OAAO,YACpE,uBAAC,0BAAkB,CAAC,MAAM,iFAEE,GACT,CACtB,EACD,iCAAK,SAAS,EAAC,6DAA6D,aAC1E,uBAAC,sBAAc,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,YAC/D,SAAS,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,mBAAmB,GACvC,EACjB,wBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,wHAEI,GAAG,EACtC,oEAAyC,4EAE9B,IACT,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 {\n  AnnouncementBanner,\n  OutlinedButton,\n  Typography,\n} from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\nconst Component = () => {\n  const [isVisible, setIsVisible] = useState(false);\n\n  return (\n    <div className=\"flex flex-col w-full\">\n      {isVisible && (\n        <AnnouncementBanner variant=\"danger\" hasIcon={true} liveRegion=\"alert\">\n          <AnnouncementBanner.Header>\n            Error: connection to the database was lost. Reconnecting…\n          </AnnouncementBanner.Header>\n        </AnnouncementBanner>\n      )}\n      <div className=\"flex flex-col gap-token-16 p-token-24 bg-neutral-bg-default\">\n        <OutlinedButton onClick={() => setIsVisible((visible) => !visible)}>\n          {isVisible ? 'Hide announcement' : 'Show announcement'}\n        </OutlinedButton>\n        <Typography variant=\"body-medium\">\n          The page is already loaded. Toggle the announcement in to simulate a\n          connection loss or session expiry.{' '}\n          <code>liveRegion=&quot;alert&quot;</code> interrupts the screen reader\n          because the message is time-sensitive.\n        </Typography>\n      </div>\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/announcement-banner/stories/announcement-banner-present-at-page-render.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-flex-col n-w-full", children: [(0, jsx_runtime_1.jsx)(react_1.AnnouncementBanner, { variant: "danger", hasIcon: true, children: (0, jsx_runtime_1.jsx)(react_1.AnnouncementBanner.Header, { children: "Warning: your marketplace subscription will be deprecated on September 19, 2026." }) }), (0, jsx_runtime_1.jsx)("div", { className: "n-p-token-24 n-bg-neutral-bg-default", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "This banner is part of the initial page render, so `liveRegion` is omitted. Screen reader users hear it when they reach it in the page, not as an interruption." }) })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col w-full", children: [(0, jsx_runtime_1.jsx)(react_1.AnnouncementBanner, { variant: "danger", hasIcon: true, children: (0, jsx_runtime_1.jsx)(react_1.AnnouncementBanner.Header, { children: "Warning: your marketplace subscription will be deprecated on September 19, 2026." }) }), (0, jsx_runtime_1.jsx)("div", { className: "p-token-24 bg-neutral-bg-default", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "This banner is part of the initial page render, so `liveRegion` is omitted. Screen reader users hear it when they reach it in the page, not as an interruption." }) })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=announcement-banner-present-at-page-render.story.js.map

package/lib/cjs/announcement-banner/stories/announcement-banner-present-at-page-render.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"announcement-banner-present-at-page-render.story.js","sourceRoot":"","sources":["../../../../src/announcement-banner/stories/announcement-banner-present-at-page-render.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAkE;AAElE,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,iCAAK,SAAS,EAAC,4BAA4B,aACzC,uBAAC,0BAAkB,IAAC,OAAO,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,YAChD,uBAAC,0BAAkB,CAAC,MAAM,mGAGE,GACT,EACrB,gCAAK,SAAS,EAAC,sCAAsC,YACnD,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,gLAIpB,GACT,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 { AnnouncementBanner, Typography } from '@neo4j-ndl/react';\n\nconst Component = () => {\n  return (\n    <div className=\"n-flex n-flex-col n-w-full\">\n      <AnnouncementBanner variant=\"danger\" hasIcon={true}>\n        <AnnouncementBanner.Header>\n          Warning: your marketplace subscription will be deprecated on September\n          19, 2026.\n        </AnnouncementBanner.Header>\n      </AnnouncementBanner>\n      <div className=\"n-p-token-24 n-bg-neutral-bg-default\">\n        <Typography variant=\"body-medium\">\n          This banner is part of the initial page render, so `liveRegion` is\n          omitted. Screen reader users hear it when they reach it in the page,\n          not as an interruption.\n        </Typography>\n      </div>\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"announcement-banner-present-at-page-render.story.js","sourceRoot":"","sources":["../../../../src/announcement-banner/stories/announcement-banner-present-at-page-render.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAkE;AAElE,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,iCAAK,SAAS,EAAC,sBAAsB,aACnC,uBAAC,0BAAkB,IAAC,OAAO,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,YAChD,uBAAC,0BAAkB,CAAC,MAAM,mGAGE,GACT,EACrB,gCAAK,SAAS,EAAC,kCAAkC,YAC/C,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,gLAIpB,GACT,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 { AnnouncementBanner, Typography } from '@neo4j-ndl/react';\n\nconst Component = () => {\n  return (\n    <div className=\"flex flex-col w-full\">\n      <AnnouncementBanner variant=\"danger\" hasIcon={true}>\n        <AnnouncementBanner.Header>\n          Warning: your marketplace subscription will be deprecated on September\n          19, 2026.\n        </AnnouncementBanner.Header>\n      </AnnouncementBanner>\n      <div className=\"p-token-24 bg-neutral-bg-default\">\n        <Typography variant=\"body-medium\">\n          This banner is part of the initial page render, so `liveRegion` is\n          omitted. Screen reader users hear it when they reach it in the page,\n          not as an interruption.\n        </Typography>\n      </div>\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/announcement-banner/stories/announcement-banner-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-flex-col n-gap-token-8 n-w-full", children: [(0, jsx_runtime_1.jsx)(react_1.AnnouncementBanner, { variant: "info", hasIcon: true, children: (0, jsx_runtime_1.jsx)(react_1.AnnouncementBanner.Header, { children: "Info announcement" }) }), (0, jsx_runtime_1.jsx)(react_1.AnnouncementBanner, { variant: "warning", hasIcon: true, children: (0, jsx_runtime_1.jsx)(react_1.AnnouncementBanner.Header, { children: "Warning announcement" }) }), (0, jsx_runtime_1.jsx)(react_1.AnnouncementBanner, { variant: "danger", hasIcon: true, children: (0, jsx_runtime_1.jsx)(react_1.AnnouncementBanner.Header, { children: "Danger announcement" }) }), (0, jsx_runtime_1.jsx)(react_1.AnnouncementBanner, { variant: "discovery", hasIcon: true, children: (0, jsx_runtime_1.jsx)(react_1.AnnouncementBanner.Header, { children: "Discovery announcement" }) }), (0, jsx_runtime_1.jsx)(react_1.AnnouncementBanner, { variant: "neutral", hasIcon: true, children: (0, jsx_runtime_1.jsx)(react_1.AnnouncementBanner.Header, { children: "Neutral announcement" }) })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-token-8 w-full", children: [(0, jsx_runtime_1.jsx)(react_1.AnnouncementBanner, { variant: "info", hasIcon: true, children: (0, jsx_runtime_1.jsx)(react_1.AnnouncementBanner.Header, { children: "Info announcement" }) }), (0, jsx_runtime_1.jsx)(react_1.AnnouncementBanner, { variant: "warning", hasIcon: true, children: (0, jsx_runtime_1.jsx)(react_1.AnnouncementBanner.Header, { children: "Warning announcement" }) }), (0, jsx_runtime_1.jsx)(react_1.AnnouncementBanner, { variant: "danger", hasIcon: true, children: (0, jsx_runtime_1.jsx)(react_1.AnnouncementBanner.Header, { children: "Danger announcement" }) }), (0, jsx_runtime_1.jsx)(react_1.AnnouncementBanner, { variant: "discovery", hasIcon: true, children: (0, jsx_runtime_1.jsx)(react_1.AnnouncementBanner.Header, { children: "Discovery announcement" }) }), (0, jsx_runtime_1.jsx)(react_1.AnnouncementBanner, { variant: "neutral", hasIcon: true, children: (0, jsx_runtime_1.jsx)(react_1.AnnouncementBanner.Header, { children: "Neutral announcement" }) })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=announcement-banner-variants.story.js.map

package/lib/cjs/announcement-banner/stories/announcement-banner-variants.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"announcement-banner-variants.story.js","sourceRoot":"","sources":["../../../../src/announcement-banner/stories/announcement-banner-variants.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAsD;AAEtD,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,iCAAK,SAAS,EAAC,0CAA0C,aACvD,uBAAC,0BAAkB,IAAC,OAAO,EAAC,MAAM,EAAC,OAAO,EAAE,IAAI,YAC9C,uBAAC,0BAAkB,CAAC,MAAM,oCAA8C,GACrD,EACrB,uBAAC,0BAAkB,IAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,IAAI,YACjD,uBAAC,0BAAkB,CAAC,MAAM,uCAEE,GACT,EACrB,uBAAC,0BAAkB,IAAC,OAAO,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,YAChD,uBAAC,0BAAkB,CAAC,MAAM,sCAEE,GACT,EACrB,uBAAC,0BAAkB,IAAC,OAAO,EAAC,WAAW,EAAC,OAAO,EAAE,IAAI,YACnD,uBAAC,0BAAkB,CAAC,MAAM,yCAEE,GACT,EACrB,uBAAC,0BAAkB,IAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,IAAI,YACjD,uBAAC,0BAAkB,CAAC,MAAM,uCAEE,GACT,IACjB,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 { AnnouncementBanner } from '@neo4j-ndl/react';\n\nconst Component = () => {\n  return (\n    <div className=\"n-flex n-flex-col n-gap-token-8 n-w-full\">\n      <AnnouncementBanner variant=\"info\" hasIcon={true}>\n        <AnnouncementBanner.Header>Info announcement</AnnouncementBanner.Header>\n      </AnnouncementBanner>\n      <AnnouncementBanner variant=\"warning\" hasIcon={true}>\n        <AnnouncementBanner.Header>\n          Warning announcement\n        </AnnouncementBanner.Header>\n      </AnnouncementBanner>\n      <AnnouncementBanner variant=\"danger\" hasIcon={true}>\n        <AnnouncementBanner.Header>\n          Danger announcement\n        </AnnouncementBanner.Header>\n      </AnnouncementBanner>\n      <AnnouncementBanner variant=\"discovery\" hasIcon={true}>\n        <AnnouncementBanner.Header>\n          Discovery announcement\n        </AnnouncementBanner.Header>\n      </AnnouncementBanner>\n      <AnnouncementBanner variant=\"neutral\" hasIcon={true}>\n        <AnnouncementBanner.Header>\n          Neutral announcement\n        </AnnouncementBanner.Header>\n      </AnnouncementBanner>\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"announcement-banner-variants.story.js","sourceRoot":"","sources":["../../../../src/announcement-banner/stories/announcement-banner-variants.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAsD;AAEtD,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,iCAAK,SAAS,EAAC,kCAAkC,aAC/C,uBAAC,0BAAkB,IAAC,OAAO,EAAC,MAAM,EAAC,OAAO,EAAE,IAAI,YAC9C,uBAAC,0BAAkB,CAAC,MAAM,oCAA8C,GACrD,EACrB,uBAAC,0BAAkB,IAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,IAAI,YACjD,uBAAC,0BAAkB,CAAC,MAAM,uCAEE,GACT,EACrB,uBAAC,0BAAkB,IAAC,OAAO,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,YAChD,uBAAC,0BAAkB,CAAC,MAAM,sCAEE,GACT,EACrB,uBAAC,0BAAkB,IAAC,OAAO,EAAC,WAAW,EAAC,OAAO,EAAE,IAAI,YACnD,uBAAC,0BAAkB,CAAC,MAAM,yCAEE,GACT,EACrB,uBAAC,0BAAkB,IAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,IAAI,YACjD,uBAAC,0BAAkB,CAAC,MAAM,uCAEE,GACT,IACjB,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 { AnnouncementBanner } from '@neo4j-ndl/react';\n\nconst Component = () => {\n  return (\n    <div className=\"flex flex-col gap-token-8 w-full\">\n      <AnnouncementBanner variant=\"info\" hasIcon={true}>\n        <AnnouncementBanner.Header>Info announcement</AnnouncementBanner.Header>\n      </AnnouncementBanner>\n      <AnnouncementBanner variant=\"warning\" hasIcon={true}>\n        <AnnouncementBanner.Header>\n          Warning announcement\n        </AnnouncementBanner.Header>\n      </AnnouncementBanner>\n      <AnnouncementBanner variant=\"danger\" hasIcon={true}>\n        <AnnouncementBanner.Header>\n          Danger announcement\n        </AnnouncementBanner.Header>\n      </AnnouncementBanner>\n      <AnnouncementBanner variant=\"discovery\" hasIcon={true}>\n        <AnnouncementBanner.Header>\n          Discovery announcement\n        </AnnouncementBanner.Header>\n      </AnnouncementBanner>\n      <AnnouncementBanner variant=\"neutral\" hasIcon={true}>\n        <AnnouncementBanner.Header>\n          Neutral announcement\n        </AnnouncementBanner.Header>\n      </AnnouncementBanner>\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/announcement-banner/stories/announcement-banner-with-page-content.story.js

@@ -26,7 +26,7 @@ const react_1 = require("@neo4j-ndl/react");
 const react_2 = require("react");
 const Component = () => {
     const [isVisible, setIsVisible] = (0, react_2.useState)(true);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-max-w-[768px] n-h-52", children: [isVisible && ((0, jsx_runtime_1.jsxs)(react_1.AnnouncementBanner, { variant: "warning", hasIcon: true, isCloseable: true, onClose: () => setIsVisible(false), children: [(0, jsx_runtime_1.jsx)(react_1.AnnouncementBanner.Header, { children: "Scheduled maintenance starts tonight at 22:00 UTC." }), (0, jsx_runtime_1.jsx)(react_1.AnnouncementBanner.Actions, { children: (0, jsx_runtime_1.jsx)(react_1.OutlinedButton, { children: "Learn more" }) })] })), (0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-gap-token-16 n-p-token-24 n-bg-neutral-bg-default n-flex-1 n-min-h-0 n-overflow-y-auto", children: [!isVisible && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_1.TextButton, { onClick: () => setIsVisible(true), children: "Show announcement again" }) })), (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "title-2", children: "Page title" }), (0, jsx_runtime_1.jsx)(react_1.OutlinedButton, { children: "Can focus" }), (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tempus, quam non molestie faucibus, orci nibh bibendum urna, ut lacinia orci dui a augue. Nullam at risus quam. Fusce pulvinar, metus vitae finibus dapibus, nisi ipsum venenatis sapien, at facilisis eros massa ac nunc. Aliquam sed odio orci. Vivamus condimentum sit amet ipsum bibendum sollicitudin. Etiam eget vehicula urna, et ullamcorper libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin sodales euismod sem, posuere maximus libero interdum semper. Nunc mollis posuere arcu non elementum. Vivamus sed laoreet mauris. Etiam fringilla arcu convallis erat vehicula iaculis. Pellentesque dictum aliquam cursus." }), (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Integer vehicula turpis quis risus aliquet congue. Vivamus pellentesque nibh ac blandit varius. Fusce placerat lacus ut mauris porta, nec facilisis risus pulvinar. Nullam elementum nulla ut laoreet imperdiet. Maecenas eget erat erat. Phasellus in turpis placerat, imperdiet ante nec, tincidunt nisl. Donec a lacus neque. Nullam iaculis ante molestie ultrices semper. Sed non lorem ullamcorper ligula elementum convallis. Aenean egestas risus quis tortor cursus dapibus. Nulla hendrerit at orci ut scelerisque. Nullam vel bibendum tellus. Praesent efficitur ultrices lectus at posuere. Maecenas facilisis lacus ac turpis malesuada, sit amet imperdiet ipsum condimentum. Donec et nibh eget justo luctus ornare. Maecenas suscipit nulla at ullamcorper congue." }), (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Vestibulum vehicula nibh mi, ultrices condimentum massa venenatis sit amet. Pellentesque accumsan mollis ex, id lobortis lacus venenatis id. Proin sem dui, mollis id gravida ac, vulputate et lacus. In pharetra nunc odio, in fermentum elit dignissim at. Nunc ut justo elit. Proin ligula orci, faucibus vitae vehicula nec, faucibus sit amet erat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque pharetra venenatis rutrum. Sed pharetra turpis id arcu maximus, interdum rhoncus eros mollis. Donec vitae sapien et odio interdum bibendum. Quisque eleifend, sem ut ornare mollis, orci nunc dapibus odio, aliquam fringilla augue nulla id magna. Phasellus consectetur, velit egestas sodales ultricies, odio nunc facilisis libero, vel vehicula nisi quam quis nisl. Proin vel massa libero." }), (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Sed mollis lacinia tincidunt. Curabitur blandit pellentesque consequat. Maecenas mollis pharetra dolor in ornare. Cras vel nibh eu nisi venenatis convallis id vel nisl. Curabitur et viverra nisl. Phasellus et finibus turpis. Praesent scelerisque vel lectus at imperdiet. Curabitur porta egestas magna ullamcorper hendrerit." }), (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Curabitur hendrerit egestas mi, ut venenatis turpis sagittis nec. Proin consectetur, nisi et vehicula placerat, tellus augue luctus odio, in commodo mauris urna nec libero. Maecenas eu placerat sapien, in aliquam tellus. Sed pharetra nunc id urna iaculis tincidunt. In hac habitasse platea dictumst. Donec tincidunt risus vitae congue congue. Fusce consequat ut justo ut tristique. Nunc ut urna quis neque consequat venenatis. Praesent nec feugiat orci. Vestibulum rutrum dui lacus, sit amet vulputate dolor finibus ut. Donec placerat urna eu fringilla convallis. Praesent sollicitudin felis at lacus semper, vel convallis magna scelerisque." })] })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col max-w-[768px] h-52", children: [isVisible && ((0, jsx_runtime_1.jsxs)(react_1.AnnouncementBanner, { variant: "warning", hasIcon: true, isCloseable: true, onClose: () => setIsVisible(false), children: [(0, jsx_runtime_1.jsx)(react_1.AnnouncementBanner.Header, { children: "Scheduled maintenance starts tonight at 22:00 UTC." }), (0, jsx_runtime_1.jsx)(react_1.AnnouncementBanner.Actions, { children: (0, jsx_runtime_1.jsx)(react_1.OutlinedButton, { children: "Learn more" }) })] })), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-token-16 p-token-24 bg-neutral-bg-default flex-1 min-h-0 overflow-y-auto", children: [!isVisible && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_1.TextButton, { onClick: () => setIsVisible(true), children: "Show announcement again" }) })), (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "title-2", children: "Page title" }), (0, jsx_runtime_1.jsx)(react_1.OutlinedButton, { children: "Can focus" }), (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tempus, quam non molestie faucibus, orci nibh bibendum urna, ut lacinia orci dui a augue. Nullam at risus quam. Fusce pulvinar, metus vitae finibus dapibus, nisi ipsum venenatis sapien, at facilisis eros massa ac nunc. Aliquam sed odio orci. Vivamus condimentum sit amet ipsum bibendum sollicitudin. Etiam eget vehicula urna, et ullamcorper libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin sodales euismod sem, posuere maximus libero interdum semper. Nunc mollis posuere arcu non elementum. Vivamus sed laoreet mauris. Etiam fringilla arcu convallis erat vehicula iaculis. Pellentesque dictum aliquam cursus." }), (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Integer vehicula turpis quis risus aliquet congue. Vivamus pellentesque nibh ac blandit varius. Fusce placerat lacus ut mauris porta, nec facilisis risus pulvinar. Nullam elementum nulla ut laoreet imperdiet. Maecenas eget erat erat. Phasellus in turpis placerat, imperdiet ante nec, tincidunt nisl. Donec a lacus neque. Nullam iaculis ante molestie ultrices semper. Sed non lorem ullamcorper ligula elementum convallis. Aenean egestas risus quis tortor cursus dapibus. Nulla hendrerit at orci ut scelerisque. Nullam vel bibendum tellus. Praesent efficitur ultrices lectus at posuere. Maecenas facilisis lacus ac turpis malesuada, sit amet imperdiet ipsum condimentum. Donec et nibh eget justo luctus ornare. Maecenas suscipit nulla at ullamcorper congue." }), (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Vestibulum vehicula nibh mi, ultrices condimentum massa venenatis sit amet. Pellentesque accumsan mollis ex, id lobortis lacus venenatis id. Proin sem dui, mollis id gravida ac, vulputate et lacus. In pharetra nunc odio, in fermentum elit dignissim at. Nunc ut justo elit. Proin ligula orci, faucibus vitae vehicula nec, faucibus sit amet erat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque pharetra venenatis rutrum. Sed pharetra turpis id arcu maximus, interdum rhoncus eros mollis. Donec vitae sapien et odio interdum bibendum. Quisque eleifend, sem ut ornare mollis, orci nunc dapibus odio, aliquam fringilla augue nulla id magna. Phasellus consectetur, velit egestas sodales ultricies, odio nunc facilisis libero, vel vehicula nisi quam quis nisl. Proin vel massa libero." }), (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Sed mollis lacinia tincidunt. Curabitur blandit pellentesque consequat. Maecenas mollis pharetra dolor in ornare. Cras vel nibh eu nisi venenatis convallis id vel nisl. Curabitur et viverra nisl. Phasellus et finibus turpis. Praesent scelerisque vel lectus at imperdiet. Curabitur porta egestas magna ullamcorper hendrerit." }), (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Curabitur hendrerit egestas mi, ut venenatis turpis sagittis nec. Proin consectetur, nisi et vehicula placerat, tellus augue luctus odio, in commodo mauris urna nec libero. Maecenas eu placerat sapien, in aliquam tellus. Sed pharetra nunc id urna iaculis tincidunt. In hac habitasse platea dictumst. Donec tincidunt risus vitae congue congue. Fusce consequat ut justo ut tristique. Nunc ut urna quis neque consequat venenatis. Praesent nec feugiat orci. Vestibulum rutrum dui lacus, sit amet vulputate dolor finibus ut. Donec placerat urna eu fringilla convallis. Praesent sollicitudin felis at lacus semper, vel convallis magna scelerisque." })] })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=announcement-banner-with-page-content.story.js.map

package/lib/cjs/announcement-banner/stories/announcement-banner-with-page-content.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"announcement-banner-with-page-content.story.js","sourceRoot":"","sources":["../../../../src/announcement-banner/stories/announcement-banner-with-page-content.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAK0B;AAC1B,iCAAiC;AAEjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAC,IAAI,CAAC,CAAC;IAEjD,OAAO,CACL,iCAAK,SAAS,EAAC,0CAA0C,aACtD,SAAS,IAAI,CACZ,wBAAC,0BAAkB,IACjB,OAAO,EAAC,SAAS,EACjB,OAAO,EAAE,IAAI,EACb,WAAW,EAAE,IAAI,EACjB,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,aAElC,uBAAC,0BAAkB,CAAC,MAAM,qEAEE,EAC5B,uBAAC,0BAAkB,CAAC,OAAO,cACzB,uBAAC,sBAAc,6BAA4B,GAChB,IACV,CACtB,EACD,iCAAK,SAAS,EAAC,4GAA4G,aACxH,CAAC,SAAS,IAAI,CACb,0CACE,uBAAC,kBAAU,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,wCAEhC,GACT,CACP,EACD,uBAAC,kBAAU,IAAC,OAAO,EAAC,SAAS,2BAAwB,EACrD,uBAAC,sBAAc,4BAA2B,EAC1C,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,6sBAYpB,EACb,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,owBAapB,EACb,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,izBAapB,EACb,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,oVAMpB,EACb,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,kpBAWpB,IACT,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 {\n  AnnouncementBanner,\n  OutlinedButton,\n  TextButton,\n  Typography,\n} from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\nconst Component = () => {\n  const [isVisible, setIsVisible] = useState(true);\n\n  return (\n    <div className=\"n-flex n-flex-col n-max-w-[768px] n-h-52\">\n      {isVisible && (\n        <AnnouncementBanner\n          variant=\"warning\"\n          hasIcon={true}\n          isCloseable={true}\n          onClose={() => setIsVisible(false)}\n        >\n          <AnnouncementBanner.Header>\n            Scheduled maintenance starts tonight at 22:00 UTC.\n          </AnnouncementBanner.Header>\n          <AnnouncementBanner.Actions>\n            <OutlinedButton>Learn more</OutlinedButton>\n          </AnnouncementBanner.Actions>\n        </AnnouncementBanner>\n      )}\n      <div className=\"n-flex n-flex-col n-gap-token-16 n-p-token-24 n-bg-neutral-bg-default n-flex-1 n-min-h-0 n-overflow-y-auto\">\n        {!isVisible && (\n          <div>\n            <TextButton onClick={() => setIsVisible(true)}>\n              Show announcement again\n            </TextButton>\n          </div>\n        )}\n        <Typography variant=\"title-2\">Page title</Typography>\n        <OutlinedButton>Can focus</OutlinedButton>\n        <Typography variant=\"body-medium\">\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque\n          tempus, quam non molestie faucibus, orci nibh bibendum urna, ut\n          lacinia orci dui a augue. Nullam at risus quam. Fusce pulvinar, metus\n          vitae finibus dapibus, nisi ipsum venenatis sapien, at facilisis eros\n          massa ac nunc. Aliquam sed odio orci. Vivamus condimentum sit amet\n          ipsum bibendum sollicitudin. Etiam eget vehicula urna, et ullamcorper\n          libero. Interdum et malesuada fames ac ante ipsum primis in faucibus.\n          Proin sodales euismod sem, posuere maximus libero interdum semper.\n          Nunc mollis posuere arcu non elementum. Vivamus sed laoreet mauris.\n          Etiam fringilla arcu convallis erat vehicula iaculis. Pellentesque\n          dictum aliquam cursus.\n        </Typography>\n        <Typography variant=\"body-medium\">\n          Integer vehicula turpis quis risus aliquet congue. Vivamus\n          pellentesque nibh ac blandit varius. Fusce placerat lacus ut mauris\n          porta, nec facilisis risus pulvinar. Nullam elementum nulla ut laoreet\n          imperdiet. Maecenas eget erat erat. Phasellus in turpis placerat,\n          imperdiet ante nec, tincidunt nisl. Donec a lacus neque. Nullam\n          iaculis ante molestie ultrices semper. Sed non lorem ullamcorper\n          ligula elementum convallis. Aenean egestas risus quis tortor cursus\n          dapibus. Nulla hendrerit at orci ut scelerisque. Nullam vel bibendum\n          tellus. Praesent efficitur ultrices lectus at posuere. Maecenas\n          facilisis lacus ac turpis malesuada, sit amet imperdiet ipsum\n          condimentum. Donec et nibh eget justo luctus ornare. Maecenas suscipit\n          nulla at ullamcorper congue.\n        </Typography>\n        <Typography variant=\"body-medium\">\n          Vestibulum vehicula nibh mi, ultrices condimentum massa venenatis sit\n          amet. Pellentesque accumsan mollis ex, id lobortis lacus venenatis id.\n          Proin sem dui, mollis id gravida ac, vulputate et lacus. In pharetra\n          nunc odio, in fermentum elit dignissim at. Nunc ut justo elit. Proin\n          ligula orci, faucibus vitae vehicula nec, faucibus sit amet erat.\n          Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque\n          pharetra venenatis rutrum. Sed pharetra turpis id arcu maximus,\n          interdum rhoncus eros mollis. Donec vitae sapien et odio interdum\n          bibendum. Quisque eleifend, sem ut ornare mollis, orci nunc dapibus\n          odio, aliquam fringilla augue nulla id magna. Phasellus consectetur,\n          velit egestas sodales ultricies, odio nunc facilisis libero, vel\n          vehicula nisi quam quis nisl. Proin vel massa libero.\n        </Typography>\n        <Typography variant=\"body-medium\">\n          Sed mollis lacinia tincidunt. Curabitur blandit pellentesque\n          consequat. Maecenas mollis pharetra dolor in ornare. Cras vel nibh eu\n          nisi venenatis convallis id vel nisl. Curabitur et viverra nisl.\n          Phasellus et finibus turpis. Praesent scelerisque vel lectus at\n          imperdiet. Curabitur porta egestas magna ullamcorper hendrerit.\n        </Typography>\n        <Typography variant=\"body-medium\">\n          Curabitur hendrerit egestas mi, ut venenatis turpis sagittis nec.\n          Proin consectetur, nisi et vehicula placerat, tellus augue luctus\n          odio, in commodo mauris urna nec libero. Maecenas eu placerat sapien,\n          in aliquam tellus. Sed pharetra nunc id urna iaculis tincidunt. In hac\n          habitasse platea dictumst. Donec tincidunt risus vitae congue congue.\n          Fusce consequat ut justo ut tristique. Nunc ut urna quis neque\n          consequat venenatis. Praesent nec feugiat orci. Vestibulum rutrum dui\n          lacus, sit amet vulputate dolor finibus ut. Donec placerat urna eu\n          fringilla convallis. Praesent sollicitudin felis at lacus semper, vel\n          convallis magna scelerisque.\n        </Typography>\n      </div>\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"announcement-banner-with-page-content.story.js","sourceRoot":"","sources":["../../../../src/announcement-banner/stories/announcement-banner-with-page-content.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAK0B;AAC1B,iCAAiC;AAEjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAC,IAAI,CAAC,CAAC;IAEjD,OAAO,CACL,iCAAK,SAAS,EAAC,kCAAkC,aAC9C,SAAS,IAAI,CACZ,wBAAC,0BAAkB,IACjB,OAAO,EAAC,SAAS,EACjB,OAAO,EAAE,IAAI,EACb,WAAW,EAAE,IAAI,EACjB,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,aAElC,uBAAC,0BAAkB,CAAC,MAAM,qEAEE,EAC5B,uBAAC,0BAAkB,CAAC,OAAO,cACzB,uBAAC,sBAAc,6BAA4B,GAChB,IACV,CACtB,EACD,iCAAK,SAAS,EAAC,4FAA4F,aACxG,CAAC,SAAS,IAAI,CACb,0CACE,uBAAC,kBAAU,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,wCAEhC,GACT,CACP,EACD,uBAAC,kBAAU,IAAC,OAAO,EAAC,SAAS,2BAAwB,EACrD,uBAAC,sBAAc,4BAA2B,EAC1C,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,6sBAYpB,EACb,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,owBAapB,EACb,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,izBAapB,EACb,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,oVAMpB,EACb,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,kpBAWpB,IACT,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 {\n  AnnouncementBanner,\n  OutlinedButton,\n  TextButton,\n  Typography,\n} from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\nconst Component = () => {\n  const [isVisible, setIsVisible] = useState(true);\n\n  return (\n    <div className=\"flex flex-col max-w-[768px] h-52\">\n      {isVisible && (\n        <AnnouncementBanner\n          variant=\"warning\"\n          hasIcon={true}\n          isCloseable={true}\n          onClose={() => setIsVisible(false)}\n        >\n          <AnnouncementBanner.Header>\n            Scheduled maintenance starts tonight at 22:00 UTC.\n          </AnnouncementBanner.Header>\n          <AnnouncementBanner.Actions>\n            <OutlinedButton>Learn more</OutlinedButton>\n          </AnnouncementBanner.Actions>\n        </AnnouncementBanner>\n      )}\n      <div className=\"flex flex-col gap-token-16 p-token-24 bg-neutral-bg-default flex-1 min-h-0 overflow-y-auto\">\n        {!isVisible && (\n          <div>\n            <TextButton onClick={() => setIsVisible(true)}>\n              Show announcement again\n            </TextButton>\n          </div>\n        )}\n        <Typography variant=\"title-2\">Page title</Typography>\n        <OutlinedButton>Can focus</OutlinedButton>\n        <Typography variant=\"body-medium\">\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque\n          tempus, quam non molestie faucibus, orci nibh bibendum urna, ut\n          lacinia orci dui a augue. Nullam at risus quam. Fusce pulvinar, metus\n          vitae finibus dapibus, nisi ipsum venenatis sapien, at facilisis eros\n          massa ac nunc. Aliquam sed odio orci. Vivamus condimentum sit amet\n          ipsum bibendum sollicitudin. Etiam eget vehicula urna, et ullamcorper\n          libero. Interdum et malesuada fames ac ante ipsum primis in faucibus.\n          Proin sodales euismod sem, posuere maximus libero interdum semper.\n          Nunc mollis posuere arcu non elementum. Vivamus sed laoreet mauris.\n          Etiam fringilla arcu convallis erat vehicula iaculis. Pellentesque\n          dictum aliquam cursus.\n        </Typography>\n        <Typography variant=\"body-medium\">\n          Integer vehicula turpis quis risus aliquet congue. Vivamus\n          pellentesque nibh ac blandit varius. Fusce placerat lacus ut mauris\n          porta, nec facilisis risus pulvinar. Nullam elementum nulla ut laoreet\n          imperdiet. Maecenas eget erat erat. Phasellus in turpis placerat,\n          imperdiet ante nec, tincidunt nisl. Donec a lacus neque. Nullam\n          iaculis ante molestie ultrices semper. Sed non lorem ullamcorper\n          ligula elementum convallis. Aenean egestas risus quis tortor cursus\n          dapibus. Nulla hendrerit at orci ut scelerisque. Nullam vel bibendum\n          tellus. Praesent efficitur ultrices lectus at posuere. Maecenas\n          facilisis lacus ac turpis malesuada, sit amet imperdiet ipsum\n          condimentum. Donec et nibh eget justo luctus ornare. Maecenas suscipit\n          nulla at ullamcorper congue.\n        </Typography>\n        <Typography variant=\"body-medium\">\n          Vestibulum vehicula nibh mi, ultrices condimentum massa venenatis sit\n          amet. Pellentesque accumsan mollis ex, id lobortis lacus venenatis id.\n          Proin sem dui, mollis id gravida ac, vulputate et lacus. In pharetra\n          nunc odio, in fermentum elit dignissim at. Nunc ut justo elit. Proin\n          ligula orci, faucibus vitae vehicula nec, faucibus sit amet erat.\n          Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque\n          pharetra venenatis rutrum. Sed pharetra turpis id arcu maximus,\n          interdum rhoncus eros mollis. Donec vitae sapien et odio interdum\n          bibendum. Quisque eleifend, sem ut ornare mollis, orci nunc dapibus\n          odio, aliquam fringilla augue nulla id magna. Phasellus consectetur,\n          velit egestas sodales ultricies, odio nunc facilisis libero, vel\n          vehicula nisi quam quis nisl. Proin vel massa libero.\n        </Typography>\n        <Typography variant=\"body-medium\">\n          Sed mollis lacinia tincidunt. Curabitur blandit pellentesque\n          consequat. Maecenas mollis pharetra dolor in ornare. Cras vel nibh eu\n          nisi venenatis convallis id vel nisl. Curabitur et viverra nisl.\n          Phasellus et finibus turpis. Praesent scelerisque vel lectus at\n          imperdiet. Curabitur porta egestas magna ullamcorper hendrerit.\n        </Typography>\n        <Typography variant=\"body-medium\">\n          Curabitur hendrerit egestas mi, ut venenatis turpis sagittis nec.\n          Proin consectetur, nisi et vehicula placerat, tellus augue luctus\n          odio, in commodo mauris urna nec libero. Maecenas eu placerat sapien,\n          in aliquam tellus. Sed pharetra nunc id urna iaculis tincidunt. In hac\n          habitasse platea dictumst. Donec tincidunt risus vitae congue congue.\n          Fusce consequat ut justo ut tristique. Nunc ut urna quis neque\n          consequat venenatis. Praesent nec feugiat orci. Vestibulum rutrum dui\n          lacus, sit amet vulputate dolor finibus ut. Donec placerat urna eu\n          fringilla convallis. Praesent sollicitudin felis at lacus semper, vel\n          convallis magna scelerisque.\n        </Typography>\n      </div>\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/avatar/stories/avatar-custom-icon.story.js

@@ -25,7 +25,7 @@ require("@neo4j-ndl/base/lib/neo4j-ds-styles.css");
 const react_1 = require("@neo4j-ndl/react");
 const icons_1 = require("@neo4j-ndl/react/icons");
 const Component = () => {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-gap-token-16", children: [(0, jsx_runtime_1.jsx)(react_1.Avatar, { type: "icon", name: "Favorites", icon: (0, jsx_runtime_1.jsx)(icons_1.StarIconOutline, {}) }), (0, jsx_runtime_1.jsx)(react_1.Avatar, { type: "icon", name: "Notifications", icon: (0, jsx_runtime_1.jsx)(icons_1.BellIconOutline, {}) }), (0, jsx_runtime_1.jsx)(react_1.Avatar, { type: "icon", name: "Likes", icon: (0, jsx_runtime_1.jsx)(icons_1.HeartIconOutline, {}) })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex gap-token-16", children: [(0, jsx_runtime_1.jsx)(react_1.Avatar, { type: "icon", name: "Favorites", icon: (0, jsx_runtime_1.jsx)(icons_1.StarIconOutline, {}) }), (0, jsx_runtime_1.jsx)(react_1.Avatar, { type: "icon", name: "Notifications", icon: (0, jsx_runtime_1.jsx)(icons_1.BellIconOutline, {}) }), (0, jsx_runtime_1.jsx)(react_1.Avatar, { type: "icon", name: "Likes", icon: (0, jsx_runtime_1.jsx)(icons_1.HeartIconOutline, {}) })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=avatar-custom-icon.story.js.map

package/lib/cjs/avatar/stories/avatar-custom-icon.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar-custom-icon.story.js","sourceRoot":"","sources":["../../../../src/avatar/stories/avatar-custom-icon.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA0C;AAC1C,kDAIgC;AAEhC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,iCAAK,SAAS,EAAC,uBAAuB,aACpC,uBAAC,cAAM,IAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,WAAW,EAAC,IAAI,EAAE,uBAAC,uBAAe,KAAG,GAAI,EAClE,uBAAC,cAAM,IAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,eAAe,EAAC,IAAI,EAAE,uBAAC,uBAAe,KAAG,GAAI,EACtE,uBAAC,cAAM,IAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAE,uBAAC,wBAAgB,KAAG,GAAI,IAC3D,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 { Avatar } from '@neo4j-ndl/react';\nimport {\n  BellIconOutline,\n  HeartIconOutline,\n  StarIconOutline,\n} from '@neo4j-ndl/react/icons';\n\nconst Component = () => {\n  return (\n    <div className=\"n-flex n-gap-token-16\">\n      <Avatar type=\"icon\" name=\"Favorites\" icon={<StarIconOutline />} />\n      <Avatar type=\"icon\" name=\"Notifications\" icon={<BellIconOutline />} />\n      <Avatar type=\"icon\" name=\"Likes\" icon={<HeartIconOutline />} />\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"avatar-custom-icon.story.js","sourceRoot":"","sources":["../../../../src/avatar/stories/avatar-custom-icon.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA0C;AAC1C,kDAIgC;AAEhC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,iCAAK,SAAS,EAAC,mBAAmB,aAChC,uBAAC,cAAM,IAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,WAAW,EAAC,IAAI,EAAE,uBAAC,uBAAe,KAAG,GAAI,EAClE,uBAAC,cAAM,IAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,eAAe,EAAC,IAAI,EAAE,uBAAC,uBAAe,KAAG,GAAI,EACtE,uBAAC,cAAM,IAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAE,uBAAC,wBAAgB,KAAG,GAAI,IAC3D,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 { Avatar } from '@neo4j-ndl/react';\nimport {\n  BellIconOutline,\n  HeartIconOutline,\n  StarIconOutline,\n} from '@neo4j-ndl/react/icons';\n\nconst Component = () => {\n  return (\n    <div className=\"flex gap-token-16\">\n      <Avatar type=\"icon\" name=\"Favorites\" icon={<StarIconOutline />} />\n      <Avatar type=\"icon\" name=\"Notifications\" icon={<BellIconOutline />} />\n      <Avatar type=\"icon\" name=\"Likes\" icon={<HeartIconOutline />} />\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/avatar/stories/avatar-shapes.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.jsx)(react_1.Avatar, { shape: "circle" }), (0, jsx_runtime_1.jsx)(react_1.Avatar, { shape: "square" })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex gap-token-16", children: [(0, jsx_runtime_1.jsx)(react_1.Avatar, { shape: "circle" }), (0, jsx_runtime_1.jsx)(react_1.Avatar, { shape: "square" })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=avatar-shapes.story.js.map

package/lib/cjs/avatar/stories/avatar-shapes.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar-shapes.story.js","sourceRoot":"","sources":["../../../../src/avatar/stories/avatar-shapes.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA0C;AAE1C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,iCAAK,SAAS,EAAC,uBAAuB,aACpC,uBAAC,cAAM,IAAC,KAAK,EAAC,QAAQ,GAAG,EACzB,uBAAC,cAAM,IAAC,KAAK,EAAC,QAAQ,GAAG,IACrB,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 { Avatar } from '@neo4j-ndl/react';\n\nconst Component = () => {\n  return (\n    <div className=\"n-flex n-gap-token-16\">\n      <Avatar shape=\"circle\" />\n      <Avatar shape=\"square\" />\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"avatar-shapes.story.js","sourceRoot":"","sources":["../../../../src/avatar/stories/avatar-shapes.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA0C;AAE1C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,iCAAK,SAAS,EAAC,mBAAmB,aAChC,uBAAC,cAAM,IAAC,KAAK,EAAC,QAAQ,GAAG,EACzB,uBAAC,cAAM,IAAC,KAAK,EAAC,QAAQ,GAAG,IACrB,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 { Avatar } from '@neo4j-ndl/react';\n\nconst Component = () => {\n  return (\n    <div className=\"flex gap-token-16\">\n      <Avatar shape=\"circle\" />\n      <Avatar shape=\"square\" />\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/avatar/stories/avatar-sizes.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.jsx)(react_1.Avatar, { size: "x-small" }), (0, jsx_runtime_1.jsx)(react_1.Avatar, { size: "small" }), (0, jsx_runtime_1.jsx)(react_1.Avatar, { size: "medium" }), (0, jsx_runtime_1.jsx)(react_1.Avatar, { size: "large" }), (0, jsx_runtime_1.jsx)(react_1.Avatar, { size: "x-large" })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex gap-token-16", children: [(0, jsx_runtime_1.jsx)(react_1.Avatar, { size: "x-small" }), (0, jsx_runtime_1.jsx)(react_1.Avatar, { size: "small" }), (0, jsx_runtime_1.jsx)(react_1.Avatar, { size: "medium" }), (0, jsx_runtime_1.jsx)(react_1.Avatar, { size: "large" }), (0, jsx_runtime_1.jsx)(react_1.Avatar, { size: "x-large" })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=avatar-sizes.story.js.map

package/lib/cjs/avatar/stories/avatar-sizes.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar-sizes.story.js","sourceRoot":"","sources":["../../../../src/avatar/stories/avatar-sizes.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA0C;AAE1C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,iCAAK,SAAS,EAAC,uBAAuB,aACpC,uBAAC,cAAM,IAAC,IAAI,EAAC,SAAS,GAAG,EACzB,uBAAC,cAAM,IAAC,IAAI,EAAC,OAAO,GAAG,EACvB,uBAAC,cAAM,IAAC,IAAI,EAAC,QAAQ,GAAG,EACxB,uBAAC,cAAM,IAAC,IAAI,EAAC,OAAO,GAAG,EACvB,uBAAC,cAAM,IAAC,IAAI,EAAC,SAAS,GAAG,IACrB,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 { Avatar } from '@neo4j-ndl/react';\n\nconst Component = () => {\n  return (\n    <div className=\"n-flex n-gap-token-16\">\n      <Avatar size=\"x-small\" />\n      <Avatar size=\"small\" />\n      <Avatar size=\"medium\" />\n      <Avatar size=\"large\" />\n      <Avatar size=\"x-large\" />\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"avatar-sizes.story.js","sourceRoot":"","sources":["../../../../src/avatar/stories/avatar-sizes.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA0C;AAE1C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,iCAAK,SAAS,EAAC,mBAAmB,aAChC,uBAAC,cAAM,IAAC,IAAI,EAAC,SAAS,GAAG,EACzB,uBAAC,cAAM,IAAC,IAAI,EAAC,OAAO,GAAG,EACvB,uBAAC,cAAM,IAAC,IAAI,EAAC,QAAQ,GAAG,EACxB,uBAAC,cAAM,IAAC,IAAI,EAAC,OAAO,GAAG,EACvB,uBAAC,cAAM,IAAC,IAAI,EAAC,SAAS,GAAG,IACrB,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 { Avatar } from '@neo4j-ndl/react';\n\nconst Component = () => {\n  return (\n    <div className=\"flex gap-token-16\">\n      <Avatar size=\"x-small\" />\n      <Avatar size=\"small\" />\n      <Avatar size=\"medium\" />\n      <Avatar size=\"large\" />\n      <Avatar size=\"x-large\" />\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/avatar/stories/avatar-statuses.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-items-center", children: [(0, jsx_runtime_1.jsx)(react_1.Avatar, { hasStatus: false }), (0, jsx_runtime_1.jsx)(react_1.Avatar, { hasStatus: true, status: "online" }), (0, jsx_runtime_1.jsx)(react_1.Avatar, { hasStatus: true, status: "offline" }), (0, jsx_runtime_1.jsx)(react_1.Avatar, { hasStatus: true, status: "unknown" })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex gap-token-16 items-center", children: [(0, jsx_runtime_1.jsx)(react_1.Avatar, { hasStatus: false }), (0, jsx_runtime_1.jsx)(react_1.Avatar, { hasStatus: true, status: "online" }), (0, jsx_runtime_1.jsx)(react_1.Avatar, { hasStatus: true, status: "offline" }), (0, jsx_runtime_1.jsx)(react_1.Avatar, { hasStatus: true, status: "unknown" })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=avatar-statuses.story.js.map

package/lib/cjs/avatar/stories/avatar-statuses.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar-statuses.story.js","sourceRoot":"","sources":["../../../../src/avatar/stories/avatar-statuses.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA0C;AAE1C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,iCAAK,SAAS,EAAC,sCAAsC,aACnD,uBAAC,cAAM,IAAC,SAAS,EAAE,KAAK,GAAI,EAC5B,uBAAC,cAAM,IAAC,SAAS,QAAC,MAAM,EAAC,QAAQ,GAAG,EACpC,uBAAC,cAAM,IAAC,SAAS,QAAC,MAAM,EAAC,SAAS,GAAG,EACrC,uBAAC,cAAM,IAAC,SAAS,QAAC,MAAM,EAAC,SAAS,GAAG,IACjC,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 { Avatar } from '@neo4j-ndl/react';\n\nconst Component = () => {\n  return (\n    <div className=\"n-flex n-gap-token-16 n-items-center\">\n      <Avatar hasStatus={false} />\n      <Avatar hasStatus status=\"online\" />\n      <Avatar hasStatus status=\"offline\" />\n      <Avatar hasStatus status=\"unknown\" />\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"avatar-statuses.story.js","sourceRoot":"","sources":["../../../../src/avatar/stories/avatar-statuses.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA0C;AAE1C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,iCAAK,SAAS,EAAC,gCAAgC,aAC7C,uBAAC,cAAM,IAAC,SAAS,EAAE,KAAK,GAAI,EAC5B,uBAAC,cAAM,IAAC,SAAS,QAAC,MAAM,EAAC,QAAQ,GAAG,EACpC,uBAAC,cAAM,IAAC,SAAS,QAAC,MAAM,EAAC,SAAS,GAAG,EACrC,uBAAC,cAAM,IAAC,SAAS,QAAC,MAAM,EAAC,SAAS,GAAG,IACjC,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 { Avatar } from '@neo4j-ndl/react';\n\nconst Component = () => {\n  return (\n    <div className=\"flex gap-token-16 items-center\">\n      <Avatar hasStatus={false} />\n      <Avatar hasStatus status=\"online\" />\n      <Avatar hasStatus status=\"offline\" />\n      <Avatar hasStatus status=\"unknown\" />\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/avatar/stories/avatar-types.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.jsx)(react_1.Avatar, { type: "icon", name: "Karl Morrison" }), (0, jsx_runtime_1.jsx)(react_1.Avatar, { type: "letters", name: "Karl Morrison" }), (0, jsx_runtime_1.jsx)(react_1.Avatar, { type: "image", name: "Karl Morrison", source: "https://media.istockphoto.com/id/1334716681/photo/a-smiling-man.jpg?s=612x612&w=0&k=20&c=U6rkSDpQMzkcJEqx2hAa63fNLIhqnZb31Xuc_QSi648=" })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex gap-token-16", children: [(0, jsx_runtime_1.jsx)(react_1.Avatar, { type: "icon", name: "Karl Morrison" }), (0, jsx_runtime_1.jsx)(react_1.Avatar, { type: "letters", name: "Karl Morrison" }), (0, jsx_runtime_1.jsx)(react_1.Avatar, { type: "image", name: "Karl Morrison", source: "https://media.istockphoto.com/id/1334716681/photo/a-smiling-man.jpg?s=612x612&w=0&k=20&c=U6rkSDpQMzkcJEqx2hAa63fNLIhqnZb31Xuc_QSi648=" })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=avatar-types.story.js.map

package/lib/cjs/avatar/stories/avatar-types.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar-types.story.js","sourceRoot":"","sources":["../../../../src/avatar/stories/avatar-types.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA0C;AAE1C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,iCAAK,SAAS,EAAC,uBAAuB,aACpC,uBAAC,cAAM,IAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,eAAe,GAAG,EAC3C,uBAAC,cAAM,IAAC,IAAI,EAAC,SAAS,EAAC,IAAI,EAAC,eAAe,GAAG,EAC9C,uBAAC,cAAM,IACL,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,eAAe,EACpB,MAAM,EAAC,uIAAuI,GAC9I,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 { Avatar } from '@neo4j-ndl/react';\n\nconst Component = () => {\n  return (\n    <div className=\"n-flex n-gap-token-16\">\n      <Avatar type=\"icon\" name=\"Karl Morrison\" />\n      <Avatar type=\"letters\" name=\"Karl Morrison\" />\n      <Avatar\n        type=\"image\"\n        name=\"Karl Morrison\"\n        source=\"https://media.istockphoto.com/id/1334716681/photo/a-smiling-man.jpg?s=612x612&w=0&k=20&c=U6rkSDpQMzkcJEqx2hAa63fNLIhqnZb31Xuc_QSi648=\"\n      />\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"avatar-types.story.js","sourceRoot":"","sources":["../../../../src/avatar/stories/avatar-types.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA0C;AAE1C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,iCAAK,SAAS,EAAC,mBAAmB,aAChC,uBAAC,cAAM,IAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,eAAe,GAAG,EAC3C,uBAAC,cAAM,IAAC,IAAI,EAAC,SAAS,EAAC,IAAI,EAAC,eAAe,GAAG,EAC9C,uBAAC,cAAM,IACL,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,eAAe,EACpB,MAAM,EAAC,uIAAuI,GAC9I,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 { Avatar } from '@neo4j-ndl/react';\n\nconst Component = () => {\n  return (\n    <div className=\"flex gap-token-16\">\n      <Avatar type=\"icon\" name=\"Karl Morrison\" />\n      <Avatar type=\"letters\" name=\"Karl Morrison\" />\n      <Avatar\n        type=\"image\"\n        name=\"Karl Morrison\"\n        source=\"https://media.istockphoto.com/id/1334716681/photo/a-smiling-man.jpg?s=612x612&w=0&k=20&c=U6rkSDpQMzkcJEqx2hAa63fNLIhqnZb31Xuc_QSi648=\"\n      />\n    </div>\n  );\n};\n\nexport default Component;\n"]}