@ably/ui 18.5.0 → 19.0.0

package/AGENTS.md

@@ -7,7 +7,7 @@
 - `pnpm build` - Build the library (prebuild, icons, swc, tsc, cleanup)
 - `pnpm test` - Run all tests with Vitest
 - `pnpm test -- src/core/insights/index.test.ts` - Run a single test file
-- `pnpm lint` - Run ESLint on all files
+- `pnpm lint` - Run oxlint on all files, then ESLint for the storybook and comment rules
 - `pnpm format:check` - Check formatting with Prettier
 - `pnpm format:write` - Auto-format all files with Prettier
 - `pnpm storybook` - Start Storybook dev server on port 3200
@@ -46,7 +46,7 @@
 
 ### Chrome DevTools MCP (Optional)
 
-See the [root AGENTS.md](../../AGENTS.md) for the tool decision table. Use Chrome DevTools MCP for performance profiling and visual verification. Storybook URL: `http://localhost:3200` (port varies by worktree index).
+See [docs/BROWSER-TOOLS.md](../../docs/BROWSER-TOOLS.md) for which browser tool to reach for. Use Chrome DevTools MCP for performance profiling and visual verification. Storybook URL: `http://localhost:3200` (port varies by worktree index).
 
 ## Styling Guide
 

package/README.md

@@ -216,7 +216,7 @@ The easiest way to get started is to use the development script:
 
 This script will:
 
-- Check that all required tools (Node.js, pnpm) are installed at the correct versions via mise or asdf
+- Check that all required tools (Node.js, pnpm) are installed at the correct versions via mise
 - Install all project dependencies
 - Start Storybook automatically
 
@@ -261,10 +261,11 @@ You will need to authenticate with [npmjs](https://docs.npmjs.com/creating-and-v
 After the above, you should have:
 
 - NPM_TOKEN set in your environment
-- `.npmrc` file to read NPM_TOKEN from your environment like this:
+- your user-level `~/.npmrc` (not this package's `.npmrc`) reading it:
   ```
   //registry.npmjs.org/:_authToken=${NPM_TOKEN}
   ```
+  pnpm ignores environment-variable credentials in a committed project `.npmrc`.
 
 To deploy a review app with your in-progress code, you can use the `pre-release` script:
 
@@ -324,7 +325,7 @@ If using positioning any other than static, be mindful of creating stacking cont
 
 ### Formatting & linting files
 
-By default, [Prettier](https://prettier.io/) & [ESLint](https://eslint.org/) will handle most of the frontend files. You can use them through your editor (which should pick up the relevant config files) or on the command line (see `scripts` in package.json).
+By default, [Prettier](https://prettier.io/) & [oxlint](https://oxc.rs/docs/guide/usage/linter) (plus a small ESLint for the storybook and comment rules) will handle most of the frontend files. You can use them through your editor (which should pick up the relevant config files) or on the command line (see `scripts` in package.json).
 
 ### Adding a new component
 

package/core/Code.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/core/Code.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n  highlightSnippet,\n  LINE_HIGHLIGHT_CLASSES,\n  registerDefaultLanguages,\n  splitHtmlLines,\n} from \"./utils/syntax-highlighter\";\nimport languagesRegistry from \"./utils/syntax-highlighter-registry\";\nimport cn from \"./utils/cn\";\n\nregisterDefaultLanguages(languagesRegistry);\n\nexport type LineHighlightType = \"addition\" | \"removal\" | \"highlight\";\n\ntype CodeProps = {\n  language: string;\n  snippet: string;\n  textSize?: string;\n  padding?: string;\n  additionalCSS?: string;\n  showLines?: boolean;\n  lineCSS?: string;\n  wrap?: boolean;\n  lineHighlights?: Record<number, LineHighlightType>;\n};\n\nconst Code = ({\n  language,\n  snippet,\n  textSize = \"ui-text-code\",\n  padding = \"p-8\",\n  additionalCSS = \"\",\n  showLines,\n  lineCSS,\n  wrap = false,\n  lineHighlights,\n}: CodeProps) => {\n  // Trim the snippet and remove trailing empty lines\n  const trimmedSnippet = snippet.trimEnd();\n  const HTMLraw = highlightSnippet(language, trimmedSnippet) ?? \"\";\n  const className = `language-${language} ${textSize}`;\n\n  // Calculate line count after removing trailing empty lines\n  const lines = trimmedSnippet.split(/\\r\\n|\\r|\\n/);\n  const lineCount = lines.length;\n\n  const hasHighlights =\n    lineHighlights && Object.keys(lineHighlights).length > 0;\n\n  // Per-line rendering when highlights are present\n  if (hasHighlights) {\n    const htmlLines = splitHtmlLines(HTMLraw);\n\n    return (\n      <div\n        className={cn(\"hljs overflow-y-auto\", padding, additionalCSS)}\n        data-id=\"code\"\n      >\n        <pre\n          lang={language}\n          className={cn(\n            \"h-full flex-1 text-p4 leading-normal\",\n            wrap ? \"whitespace-pre-wrap break-words\" : \"overflow-x-auto\",\n          )}\n        >\n          <code className={className}>\n            {htmlLines.map((lineHtml, i) => {\n              const lineNum = i + 1;\n              const highlightType = lineHighlights[lineNum];\n              const highlightClass = highlightType\n                ? LINE_HIGHLIGHT_CLASSES[highlightType]\n                : undefined;\n\n              return (\n                <span\n                  key={i}\n                  className={cn(\"flex min-w-full pl-2\", highlightClass)}\n                >\n                  {showLines && (\n                    <span\n                      className={cn(\n                        \"mr-4 font-mono text-right text-neutral-800 select-none shrink-0 inline-block leading-normal\",\n                        lineCSS,\n                      )}\n                      style={{ minWidth: `${String(lineCount).length}ch` }}\n                    >\n                      {lineNum}\n                    </span>\n                  )}\n                  <span\n                    className=\"flex-1 !leading-normal\"\n                    // lineHtml comes from highlightSnippet() which HTML-escapes\n                    // its input before emitting tokens. The fallback is the\n                    // literal \"&nbsp;\" entity. No caller-controlled HTML reaches\n                    // this sink.\n                    // eslint-disable-next-line react/no-danger\n                    dangerouslySetInnerHTML={{\n                      __html: lineHtml || \"&nbsp;\",\n                    }}\n                  />\n                </span>\n              );\n            })}\n          </code>\n        </pre>\n      </div>\n    );\n  }\n\n  // Default: single-block rendering (no highlights)\n  return (\n    <div\n      className={cn(\"hljs overflow-y-auto flex\", padding, additionalCSS)}\n      data-id=\"code\"\n    >\n      {showLines ? (\n        <div className=\"text-p4 leading-normal pt-px\">\n          {[...Array(lineCount)].map((_, i) => (\n            <p\n              className={cn(\n                \"mr-4 font-mono text-right text-neutral-800\",\n                lineCSS,\n              )}\n              key={i}\n            >\n              {i + 1}\n            </p>\n          ))}\n        </div>\n      ) : null}\n      <pre\n        lang={language}\n        className={cn(\n          \"h-full flex-1 text-p4 leading-normal\",\n          wrap ? \"whitespace-pre-wrap break-words\" : \"overflow-x-auto\",\n        )}\n      >\n        <code\n          className={className}\n          // HTMLraw is produced by highlightSnippet(); same trust analysis as\n          // the lineHtml site above — the highlighter escapes input before\n          // emitting tokens.\n          // eslint-disable-next-line react/no-danger\n          dangerouslySetInnerHTML={{ __html: HTMLraw }}\n        />\n      </pre>\n    </div>\n  );\n};\n\nexport default Code;\n"],"names":["React","highlightSnippet","LINE_HIGHLIGHT_CLASSES","registerDefaultLanguages","splitHtmlLines","languagesRegistry","cn","Code","language","snippet","textSize","padding","additionalCSS","showLines","lineCSS","wrap","lineHighlights","trimmedSnippet","trimEnd","HTMLraw","className","lines","split","lineCount","length","hasHighlights","Object","keys","htmlLines","div","data-id","pre","lang","code","map","lineHtml","i","lineNum","highlightType","highlightClass","undefined","span","key","style","minWidth","String","dangerouslySetInnerHTML","__html","Array","_","p"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QACEC,gBAAgB,CAChBC,sBAAsB,CACtBC,wBAAwB,CACxBC,cAAc,KACT,4BAA6B,AACpC,QAAOC,sBAAuB,qCAAsC,AACpE,QAAOC,OAAQ,YAAa,CAE5BH,yBAAyBE,mBAgBzB,MAAME,KAAO,CAAC,CACZC,QAAQ,CACRC,OAAO,CACPC,SAAW,cAAc,CACzBC,QAAU,KAAK,CACfC,cAAgB,EAAE,CAClBC,SAAS,CACTC,OAAO,CACPC,KAAO,KAAK,CACZC,cAAc,CACJ,IAEV,MAAMC,eAAiBR,QAAQS,OAAO,GACtC,MAAMC,QAAUlB,iBAAiBO,SAAUS,iBAAmB,GAC9D,MAAMG,UAAY,CAAC,SAAS,EAAEZ,SAAS,CAAC,EAAEE,SAAS,CAAC,CAGpD,MAAMW,MAAQJ,eAAeK,KAAK,CAAC,cACnC,MAAMC,UAAYF,MAAMG,MAAM,CAE9B,MAAMC,cACJT,gBAAkBU,OAAOC,IAAI,CAACX,gBAAgBQ,MAAM,CAAG,EAGzD,GAAIC,cAAe,CACjB,MAAMG,UAAYxB,eAAee,SAEjC,OACE,oBAACU,OACCT,UAAWd,GAAG,uBAAwBK,QAASC,eAC/CkB,UAAQ,QAER,oBAACC,OACCC,KAAMxB,SACNY,UAAWd,GACT,uCACAS,KAAO,kCAAoC,oBAG7C,oBAACkB,QAAKb,UAAWA,WACdQ,UAAUM,GAAG,CAAC,CAACC,SAAUC,KACxB,MAAMC,QAAUD,EAAI,EACpB,MAAME,cAAgBtB,cAAc,CAACqB,QAAQ,CAC7C,MAAME,eAAiBD,cACnBpC,sBAAsB,CAACoC,cAAc,CACrCE,UAEJ,OACE,oBAACC,QACCC,IAAKN,EACLhB,UAAWd,GAAG,uBAAwBiC,iBAErC1B,WACC,oBAAC4B,QACCrB,UAAWd,GACT,8FACAQ,SAEF6B,MAAO,CAAEC,SAAU,CAAC,EAAEC,OAAOtB,WAAWC,MAAM,CAAC,EAAE,CAAC,AAAC,GAElDa,SAGL,oBAACI,QACCrB,UAAU,yBAMV0B,wBAAyB,CACvBC,OAAQZ,UAAY,QACtB,IAIR,KAKV,CAGA,OACE,oBAACN,OACCT,UAAWd,GAAG,4BAA6BK,QAASC,eACpDkB,UAAQ,QAEPjB,UACC,oBAACgB,OAAIT,UAAU,gCACZ,IAAI4B,MAAMzB,WAAW,CAACW,GAAG,CAAC,CAACe,EAAGb,IAC7B,oBAACc,KACC9B,UAAWd,GACT,6CACAQ,SAEF4B,IAAKN,GAEJA,EAAI,KAIT,KACJ,oBAACL,OACCC,KAAMxB,SACNY,UAAWd,GACT,uCACAS,KAAO,kCAAoC,oBAG7C,oBAACkB,QACCb,UAAWA,UAKX0B,wBAAyB,CAAEC,OAAQ5B,OAAQ,KAKrD,CAEA,gBAAeZ,IAAK"}
+{"version":3,"sources":["../../src/core/Code.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n  highlightSnippet,\n  LINE_HIGHLIGHT_CLASSES,\n  registerDefaultLanguages,\n  splitHtmlLines,\n} from \"./utils/syntax-highlighter\";\nimport languagesRegistry from \"./utils/syntax-highlighter-registry\";\nimport cn from \"./utils/cn\";\n\nregisterDefaultLanguages(languagesRegistry);\n\nexport type LineHighlightType = \"addition\" | \"removal\" | \"highlight\";\n\ntype CodeProps = {\n  language: string;\n  snippet: string;\n  textSize?: string;\n  padding?: string;\n  additionalCSS?: string;\n  showLines?: boolean;\n  lineCSS?: string;\n  wrap?: boolean;\n  lineHighlights?: Record<number, LineHighlightType>;\n};\n\nconst Code = ({\n  language,\n  snippet,\n  textSize = \"ui-text-code\",\n  padding = \"p-8\",\n  additionalCSS = \"\",\n  showLines,\n  lineCSS,\n  wrap = false,\n  lineHighlights,\n}: CodeProps) => {\n  // Trim the snippet and remove trailing empty lines\n  const trimmedSnippet = snippet.trimEnd();\n  const HTMLraw = highlightSnippet(language, trimmedSnippet) ?? \"\";\n  const className = `language-${language} ${textSize}`;\n\n  // Calculate line count after removing trailing empty lines\n  const lines = trimmedSnippet.split(/\\r\\n|\\r|\\n/);\n  const lineCount = lines.length;\n\n  const hasHighlights =\n    lineHighlights && Object.keys(lineHighlights).length > 0;\n\n  // Per-line rendering when highlights are present\n  if (hasHighlights) {\n    const htmlLines = splitHtmlLines(HTMLraw);\n\n    return (\n      <div\n        className={cn(\"hljs overflow-y-auto\", padding, additionalCSS)}\n        data-id=\"code\"\n      >\n        <pre\n          lang={language}\n          className={cn(\n            \"h-full flex-1 text-p4 leading-normal\",\n            wrap ? \"whitespace-pre-wrap break-words\" : \"overflow-x-auto\",\n          )}\n        >\n          <code className={className}>\n            {htmlLines.map((lineHtml, i) => {\n              const lineNum = i + 1;\n              const highlightType = lineHighlights[lineNum];\n              const highlightClass = highlightType\n                ? LINE_HIGHLIGHT_CLASSES[highlightType]\n                : undefined;\n\n              return (\n                <span\n                  key={i}\n                  className={cn(\"flex min-w-full pl-2\", highlightClass)}\n                >\n                  {showLines && (\n                    <span\n                      className={cn(\n                        \"mr-4 font-mono text-right text-neutral-800 select-none shrink-0 inline-block leading-normal\",\n                        lineCSS,\n                      )}\n                      style={{ minWidth: `${String(lineCount).length}ch` }}\n                    >\n                      {lineNum}\n                    </span>\n                  )}\n                  <span\n                    className=\"flex-1 !leading-normal\"\n                    // lineHtml comes from highlightSnippet() which HTML-escapes\n                    // its input before emitting tokens. The fallback is the\n                    // literal \"&nbsp;\" entity. No caller-controlled HTML reaches\n                    // this sink.\n                    // oxlint-disable-next-line react/no-danger\n                    dangerouslySetInnerHTML={{\n                      __html: lineHtml || \"&nbsp;\",\n                    }}\n                  />\n                </span>\n              );\n            })}\n          </code>\n        </pre>\n      </div>\n    );\n  }\n\n  // Default: single-block rendering (no highlights)\n  return (\n    <div\n      className={cn(\"hljs overflow-y-auto flex\", padding, additionalCSS)}\n      data-id=\"code\"\n    >\n      {showLines ? (\n        <div className=\"text-p4 leading-normal pt-px\">\n          {[...Array(lineCount)].map((_, i) => (\n            <p\n              className={cn(\n                \"mr-4 font-mono text-right text-neutral-800\",\n                lineCSS,\n              )}\n              key={i}\n            >\n              {i + 1}\n            </p>\n          ))}\n        </div>\n      ) : null}\n      <pre\n        lang={language}\n        className={cn(\n          \"h-full flex-1 text-p4 leading-normal\",\n          wrap ? \"whitespace-pre-wrap break-words\" : \"overflow-x-auto\",\n        )}\n      >\n        <code\n          className={className}\n          // HTMLraw is produced by highlightSnippet(); same trust analysis as\n          // the lineHtml site above — the highlighter escapes input before\n          // emitting tokens.\n          // oxlint-disable-next-line react/no-danger\n          dangerouslySetInnerHTML={{ __html: HTMLraw }}\n        />\n      </pre>\n    </div>\n  );\n};\n\nexport default Code;\n"],"names":["React","highlightSnippet","LINE_HIGHLIGHT_CLASSES","registerDefaultLanguages","splitHtmlLines","languagesRegistry","cn","Code","language","snippet","textSize","padding","additionalCSS","showLines","lineCSS","wrap","lineHighlights","trimmedSnippet","trimEnd","HTMLraw","className","lines","split","lineCount","length","hasHighlights","Object","keys","htmlLines","div","data-id","pre","lang","code","map","lineHtml","i","lineNum","highlightType","highlightClass","undefined","span","key","style","minWidth","String","dangerouslySetInnerHTML","__html","Array","_","p"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QACEC,gBAAgB,CAChBC,sBAAsB,CACtBC,wBAAwB,CACxBC,cAAc,KACT,4BAA6B,AACpC,QAAOC,sBAAuB,qCAAsC,AACpE,QAAOC,OAAQ,YAAa,CAE5BH,yBAAyBE,mBAgBzB,MAAME,KAAO,CAAC,CACZC,QAAQ,CACRC,OAAO,CACPC,SAAW,cAAc,CACzBC,QAAU,KAAK,CACfC,cAAgB,EAAE,CAClBC,SAAS,CACTC,OAAO,CACPC,KAAO,KAAK,CACZC,cAAc,CACJ,IAEV,MAAMC,eAAiBR,QAAQS,OAAO,GACtC,MAAMC,QAAUlB,iBAAiBO,SAAUS,iBAAmB,GAC9D,MAAMG,UAAY,CAAC,SAAS,EAAEZ,SAAS,CAAC,EAAEE,SAAS,CAAC,CAGpD,MAAMW,MAAQJ,eAAeK,KAAK,CAAC,cACnC,MAAMC,UAAYF,MAAMG,MAAM,CAE9B,MAAMC,cACJT,gBAAkBU,OAAOC,IAAI,CAACX,gBAAgBQ,MAAM,CAAG,EAGzD,GAAIC,cAAe,CACjB,MAAMG,UAAYxB,eAAee,SAEjC,OACE,oBAACU,OACCT,UAAWd,GAAG,uBAAwBK,QAASC,eAC/CkB,UAAQ,QAER,oBAACC,OACCC,KAAMxB,SACNY,UAAWd,GACT,uCACAS,KAAO,kCAAoC,oBAG7C,oBAACkB,QAAKb,UAAWA,WACdQ,UAAUM,GAAG,CAAC,CAACC,SAAUC,KACxB,MAAMC,QAAUD,EAAI,EACpB,MAAME,cAAgBtB,cAAc,CAACqB,QAAQ,CAC7C,MAAME,eAAiBD,cACnBpC,sBAAsB,CAACoC,cAAc,CACrCE,UAEJ,OACE,oBAACC,QACCC,IAAKN,EACLhB,UAAWd,GAAG,uBAAwBiC,iBAErC1B,WACC,oBAAC4B,QACCrB,UAAWd,GACT,8FACAQ,SAEF6B,MAAO,CAAEC,SAAU,CAAC,EAAEC,OAAOtB,WAAWC,MAAM,CAAC,EAAE,CAAC,AAAC,GAElDa,SAGL,oBAACI,QACCrB,UAAU,yBAMV0B,wBAAyB,CACvBC,OAAQZ,UAAY,QACtB,IAIR,KAKV,CAGA,OACE,oBAACN,OACCT,UAAWd,GAAG,4BAA6BK,QAASC,eACpDkB,UAAQ,QAEPjB,UACC,oBAACgB,OAAIT,UAAU,gCACZ,IAAI4B,MAAMzB,WAAW,CAACW,GAAG,CAAC,CAACe,EAAGb,IAC7B,oBAACc,KACC9B,UAAWd,GACT,6CACAQ,SAEF4B,IAAKN,GAEJA,EAAI,KAIT,KACJ,oBAACL,OACCC,KAAMxB,SACNY,UAAWd,GACT,uCACAS,KAAO,kCAAoC,oBAG7C,oBAACkB,QACCb,UAAWA,UAKX0B,wBAAyB,CAAEC,OAAQ5B,OAAQ,KAKrD,CAEA,gBAAeZ,IAAK"}

package/core/DropdownMenu.js

@@ -1,2 +1,2 @@
-import React,{createContext,useContext,useState,useEffect,useRef}from"react";import Icon from"./Icon";import cn from"./utils/cn";const DropdownMenuContext=createContext({isOpen:false,setOpen:()=>{}});const DropdownMenu=({children})=>{const[isOpen,setOpen]=useState(false);const ref=useRef(null);useEffect(()=>{const clickHandler=e=>{if(ref.current?.contains(e.target))return;setOpen(false)};document.addEventListener("click",clickHandler);return()=>document.removeEventListener("click",clickHandler)},[]);return React.createElement(DropdownMenuContext.Provider,{value:{isOpen,setOpen}},React.createElement("div",{id:"dropdown-menu",className:"relative",ref:ref},children))};const Trigger=({children,triggerClassNames="",description})=>{const{isOpen,setOpen}=useContext(DropdownMenuContext);return React.createElement("button",{id:"menu-trigger","aria-label":description,onClick:()=>setOpen(!isOpen),className:cn("flex items-center ui-text-label3 font-semibold text-neutral-1000 dark:text-neutral-300 focus:outline-none",triggerClassNames)},children,React.createElement(Icon,{name:isOpen?"icon-gui-chevron-up-mini":"icon-gui-chevron-down-mini",size:"1.25rem",additionalCSS:"text-neutral-1300 dark:text-neutral-000"}))};const Content=({children,anchorPosition="right",contentClassNames})=>{const{isOpen}=useContext(DropdownMenuContext);if(!isOpen){return null}return React.createElement("div",{id:"menu-content",role:"menu",className:cn("flex flex-col absolute z-10 border border-neutral-400 dark:border-neutral-900 bg-neutral-000 dark:bg-neutral-1300 rounded-lg ui-shadow-md-soft",anchorPosition==="right"?"right-0":"left-0",contentClassNames)},children)};const Link=({url,title,subtitle,iconName,children})=>{return React.createElement("a",{href:url,className:"menu-link group block p-2 rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-1200 active:bg-neutral-200 dark:active:bg-neutral-1100 text-neutral-1000 dark:text-neutral-300 hover:text-neutral-1300 hover:dark:text-neutral-000"},React.createElement("p",{className:"mb-1"},title,iconName?React.createElement(Icon,{name:iconName,size:"1rem",additionalCSS:"align-middle ml-2 relative -top-px -left-1 text-neutral-1300 dark:text-neutral-000"}):null),subtitle?React.createElement("p",{className:"ui-text-p3 mb-4"},subtitle):null,children)};DropdownMenu.Trigger=Trigger;DropdownMenu.Content=Content;DropdownMenu.Link=Link;export default DropdownMenu;
+import React,{createContext,useContext,useState,useEffect,useRef}from"react";import Icon from"./Icon";import cn from"./utils/cn";const DropdownMenuContext=createContext({isOpen:false,setOpen:()=>{}});const DropdownMenu=({children})=>{const[isOpen,setOpen]=useState(false);const ref=useRef(null);useEffect(()=>{const clickHandler=e=>{if(ref.current?.contains(e.target))return;setOpen(false)};document.addEventListener("click",clickHandler);return()=>document.removeEventListener("click",clickHandler)},[]);return React.createElement(DropdownMenuContext.Provider,{value:{isOpen,setOpen}},React.createElement("div",{id:"dropdown-menu",className:"relative",ref:ref},children))};const Trigger=({children,triggerClassNames="",description})=>{const{isOpen,setOpen}=useContext(DropdownMenuContext);return React.createElement("button",{id:"menu-trigger","aria-label":description,onClick:()=>setOpen(!isOpen),className:cn("flex items-center ui-text-label3 font-semibold text-neutral-1000 dark:text-neutral-300 focus:outline-none",triggerClassNames)},children,React.createElement(Icon,{name:isOpen?"icon-gui-chevron-up-mini":"icon-gui-chevron-down-mini",size:"1.25rem",additionalCSS:"text-neutral-1300 dark:text-neutral-000"}))};const Content=({children,anchorPosition="right",contentClassNames})=>{const{isOpen}=useContext(DropdownMenuContext);if(!isOpen){return null}return React.createElement("div",{id:"menu-content",role:"menu",className:cn("flex flex-col absolute z-10 border border-neutral-400 dark:border-neutral-900 bg-neutral-000 dark:bg-neutral-1300 rounded-lg ui-shadow-md-soft",anchorPosition==="right"?"right-0":"left-0",contentClassNames)},children)};const Link=({url,title,subtitle,iconName,children})=>{return React.createElement("a",{href:url,className:"menu-link group block p-2 rounded-lg\n      hover:bg-neutral-100 dark:hover:bg-neutral-1200 active:bg-neutral-200 dark:active:bg-neutral-1100 text-neutral-1000 dark:text-neutral-300 hover:text-neutral-1300 hover:dark:text-neutral-000"},React.createElement("p",{className:"mb-1"},title,iconName?React.createElement(Icon,{name:iconName,size:"1rem",additionalCSS:"align-middle ml-2 relative -top-px -left-1 text-neutral-1300 dark:text-neutral-000"}):null),subtitle?React.createElement("p",{className:"ui-text-p3 mb-4"},subtitle):null,children)};DropdownMenu.Trigger=Trigger;DropdownMenu.Content=Content;DropdownMenu.Link=Link;export default DropdownMenu;
 //# sourceMappingURL=DropdownMenu.js.map

package/core/DropdownMenu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/core/DropdownMenu.tsx"],"sourcesContent":["import React, {\n  createContext,\n  useContext,\n  useState,\n  useEffect,\n  useRef,\n  ReactNode,\n  Dispatch,\n} from \"react\";\nimport Icon from \"./Icon\";\nimport { IconName } from \"./Icon/types\";\nimport cn from \"./utils/cn\";\n\nconst DropdownMenuContext = createContext<{\n  isOpen: boolean;\n  setOpen: Dispatch<React.SetStateAction<boolean>>;\n}>({\n  isOpen: false,\n  setOpen: () => {},\n});\n\ntype DropdownMenuProps = {\n  /**\n   * The content to be displayed within the dropdown menu.\n   */\n  children: ReactNode;\n};\n\ntype TriggerProps = {\n  /**\n   * The content to be displayed within the trigger element.\n   */\n  children: ReactNode;\n  /**\n   * Additional class names to apply to the trigger element.\n   */\n  triggerClassNames?: string;\n  /**\n   * A description for the trigger element, used for accessibility purposes.\n   */\n  description?: string;\n};\n\ntype ContentProps = {\n  /**\n   * The content to be displayed within the dropdown menu.\n   */\n  children: ReactNode;\n  /**\n   * The position of the dropdown menu relative to the trigger element.\n   * Defaults to \"right\".\n   */\n  anchorPosition?: string;\n  /**\n   * Additional class names to apply to the content container.\n   */\n  contentClassNames?: string;\n};\n\ntype LinkProps = {\n  url: string;\n  title: string;\n  subtitle?: string;\n  iconName?: IconName;\n  children?: ReactNode;\n};\n\nconst DropdownMenu = ({ children }: DropdownMenuProps) => {\n  const [isOpen, setOpen] = useState(false);\n  const ref = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const clickHandler = (e: MouseEvent) => {\n      if (ref.current?.contains(e.target as Node)) return;\n      setOpen(false);\n    };\n    document.addEventListener(\"click\", clickHandler);\n    return () => document.removeEventListener(\"click\", clickHandler);\n  }, []);\n\n  return (\n    <DropdownMenuContext.Provider value={{ isOpen, setOpen }}>\n      <div id=\"dropdown-menu\" className=\"relative\" ref={ref}>\n        {children}\n      </div>\n    </DropdownMenuContext.Provider>\n  );\n};\n\nconst Trigger = ({\n  children,\n  triggerClassNames = \"\",\n  description,\n}: TriggerProps) => {\n  const { isOpen, setOpen } = useContext(DropdownMenuContext);\n\n  return (\n    <button\n      id=\"menu-trigger\"\n      aria-label={description}\n      onClick={() => setOpen(!isOpen)}\n      className={cn(\n        \"flex items-center ui-text-label3 font-semibold text-neutral-1000 dark:text-neutral-300 focus:outline-none\",\n        triggerClassNames,\n      )}\n    >\n      {children}\n      <Icon\n        name={\n          isOpen ? \"icon-gui-chevron-up-mini\" : \"icon-gui-chevron-down-mini\"\n        }\n        size=\"1.25rem\"\n        additionalCSS=\"text-neutral-1300 dark:text-neutral-000\"\n      />\n    </button>\n  );\n};\n\nconst Content = ({\n  children,\n  anchorPosition = \"right\",\n  contentClassNames,\n}: ContentProps) => {\n  const { isOpen } = useContext(DropdownMenuContext);\n\n  if (!isOpen) {\n    return null;\n  }\n\n  return (\n    <div\n      id=\"menu-content\"\n      role=\"menu\"\n      className={cn(\n        \"flex flex-col absolute z-10 border border-neutral-400 dark:border-neutral-900 bg-neutral-000 dark:bg-neutral-1300 rounded-lg ui-shadow-md-soft\",\n        anchorPosition === \"right\" ? \"right-0\" : \"left-0\",\n        contentClassNames,\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n\nconst Link = ({ url, title, subtitle, iconName, children }: LinkProps) => {\n  return (\n    <a\n      href={url}\n      className=\"menu-link group block p-2 rounded-lg\n      hover:bg-neutral-100 dark:hover:bg-neutral-1200 active:bg-neutral-200 dark:active:bg-neutral-1100 text-neutral-1000 dark:text-neutral-300 hover:text-neutral-1300 hover:dark:text-neutral-000\"\n    >\n      <p className=\"mb-1\">\n        {title}\n        {iconName ? (\n          <Icon\n            name={iconName}\n            size=\"1rem\"\n            additionalCSS=\"align-middle ml-2 relative -top-px -left-1 text-neutral-1300 dark:text-neutral-000\"\n          />\n        ) : null}\n      </p>\n      {subtitle ? <p className=\"ui-text-p3 mb-4\">{subtitle}</p> : null}\n      {children}\n    </a>\n  );\n};\n\nDropdownMenu.Trigger = Trigger;\nDropdownMenu.Content = Content;\nDropdownMenu.Link = Link;\n\nexport default DropdownMenu;\n"],"names":["React","createContext","useContext","useState","useEffect","useRef","Icon","cn","DropdownMenuContext","isOpen","setOpen","DropdownMenu","children","ref","clickHandler","e","current","contains","target","document","addEventListener","removeEventListener","Provider","value","div","id","className","Trigger","triggerClassNames","description","button","aria-label","onClick","name","size","additionalCSS","Content","anchorPosition","contentClassNames","role","Link","url","title","subtitle","iconName","a","href","p"],"mappings":"AAAA,OAAOA,OACLC,aAAa,CACbC,UAAU,CACVC,QAAQ,CACRC,SAAS,CACTC,MAAM,KAGD,OAAQ,AACf,QAAOC,SAAU,QAAS,AAE1B,QAAOC,OAAQ,YAAa,CAE5B,MAAMC,oBAAsBP,cAGzB,CACDQ,OAAQ,MACRC,QAAS,KAAO,CAClB,GAgDA,MAAMC,aAAe,CAAC,CAAEC,QAAQ,CAAqB,IACnD,KAAM,CAACH,OAAQC,QAAQ,CAAGP,SAAS,OACnC,MAAMU,IAAMR,OAAuB,MAEnCD,UAAU,KACR,MAAMU,aAAe,AAACC,IACpB,GAAIF,IAAIG,OAAO,EAAEC,SAASF,EAAEG,MAAM,EAAW,OAC7CR,QAAQ,MACV,EACAS,SAASC,gBAAgB,CAAC,QAASN,cACnC,MAAO,IAAMK,SAASE,mBAAmB,CAAC,QAASP,aACrD,EAAG,EAAE,EAEL,OACE,oBAACN,oBAAoBc,QAAQ,EAACC,MAAO,CAAEd,OAAQC,OAAQ,GACrD,oBAACc,OAAIC,GAAG,gBAAgBC,UAAU,WAAWb,IAAKA,KAC/CD,UAIT,EAEA,MAAMe,QAAU,CAAC,CACff,QAAQ,CACRgB,kBAAoB,EAAE,CACtBC,WAAW,CACE,IACb,KAAM,CAAEpB,MAAM,CAAEC,OAAO,CAAE,CAAGR,WAAWM,qBAEvC,OACE,oBAACsB,UACCL,GAAG,eACHM,aAAYF,YACZG,QAAS,IAAMtB,QAAQ,CAACD,QACxBiB,UAAWnB,GACT,4GACAqB,oBAGDhB,SACD,oBAACN,MACC2B,KACExB,OAAS,2BAA6B,6BAExCyB,KAAK,UACLC,cAAc,4CAItB,EAEA,MAAMC,QAAU,CAAC,CACfxB,QAAQ,CACRyB,eAAiB,OAAO,CACxBC,iBAAiB,CACJ,IACb,KAAM,CAAE7B,MAAM,CAAE,CAAGP,WAAWM,qBAE9B,GAAI,CAACC,OAAQ,CACX,OAAO,IACT,CAEA,OACE,oBAACe,OACCC,GAAG,eACHc,KAAK,OACLb,UAAWnB,GACT,iJACA8B,iBAAmB,QAAU,UAAY,SACzCC,oBAGD1B,SAGP,EAEA,MAAM4B,KAAO,CAAC,CAAEC,GAAG,CAAEC,KAAK,CAAEC,QAAQ,CAAEC,QAAQ,CAAEhC,QAAQ,CAAa,IACnE,OACE,oBAACiC,KACCC,KAAML,IACNf,UAAU,sOAGV,oBAACqB,KAAErB,UAAU,QACVgB,MACAE,SACC,oBAACtC,MACC2B,KAAMW,SACNV,KAAK,OACLC,cAAc,uFAEd,MAELQ,SAAW,oBAACI,KAAErB,UAAU,mBAAmBiB,UAAgB,KAC3D/B,SAGP,CAEAD,CAAAA,aAAagB,OAAO,CAAGA,OACvBhB,CAAAA,aAAayB,OAAO,CAAGA,OACvBzB,CAAAA,aAAa6B,IAAI,CAAGA,IAEpB,gBAAe7B,YAAa"}
+{"version":3,"sources":["../../src/core/DropdownMenu.tsx"],"sourcesContent":["import React, {\n  createContext,\n  useContext,\n  useState,\n  useEffect,\n  useRef,\n  ReactNode,\n  Dispatch,\n} from \"react\";\nimport Icon from \"./Icon\";\nimport { IconName } from \"./Icon/types\";\nimport cn from \"./utils/cn\";\n\nconst DropdownMenuContext = createContext<{\n  isOpen: boolean;\n  setOpen: Dispatch<React.SetStateAction<boolean>>;\n}>({\n  isOpen: false,\n  setOpen: () => {},\n});\n\ntype DropdownMenuProps = {\n  /**\n   * The content to be displayed within the dropdown menu.\n   */\n  children: ReactNode;\n};\n\ntype TriggerProps = {\n  /**\n   * The content to be displayed within the trigger element.\n   */\n  children: ReactNode;\n  /**\n   * Additional class names to apply to the trigger element.\n   */\n  triggerClassNames?: string;\n  /**\n   * A description for the trigger element, used for accessibility purposes.\n   */\n  description?: string;\n};\n\ntype ContentProps = {\n  /**\n   * The content to be displayed within the dropdown menu.\n   */\n  children: ReactNode;\n  /**\n   * The position of the dropdown menu relative to the trigger element.\n   * Defaults to \"right\".\n   */\n  anchorPosition?: string;\n  /**\n   * Additional class names to apply to the content container.\n   */\n  contentClassNames?: string;\n};\n\ntype LinkProps = {\n  url: string;\n  title: string;\n  subtitle?: string;\n  iconName?: IconName;\n  children?: ReactNode;\n};\n\nconst DropdownMenu = ({ children }: DropdownMenuProps) => {\n  const [isOpen, setOpen] = useState(false);\n  const ref = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const clickHandler = (e: MouseEvent) => {\n      if (ref.current?.contains(e.target as Node)) return;\n      setOpen(false);\n    };\n    document.addEventListener(\"click\", clickHandler);\n    return () => document.removeEventListener(\"click\", clickHandler);\n  }, []);\n\n  return (\n    <DropdownMenuContext.Provider value={{ isOpen, setOpen }}>\n      <div id=\"dropdown-menu\" className=\"relative\" ref={ref}>\n        {children}\n      </div>\n    </DropdownMenuContext.Provider>\n  );\n};\n\nconst Trigger = ({\n  children,\n  triggerClassNames = \"\",\n  description,\n}: TriggerProps) => {\n  const { isOpen, setOpen } = useContext(DropdownMenuContext);\n\n  return (\n    <button\n      id=\"menu-trigger\"\n      aria-label={description}\n      onClick={() => setOpen(!isOpen)}\n      className={cn(\n        \"flex items-center ui-text-label3 font-semibold text-neutral-1000 dark:text-neutral-300 focus:outline-none\",\n        triggerClassNames,\n      )}\n    >\n      {children}\n      <Icon\n        name={\n          isOpen ? \"icon-gui-chevron-up-mini\" : \"icon-gui-chevron-down-mini\"\n        }\n        size=\"1.25rem\"\n        additionalCSS=\"text-neutral-1300 dark:text-neutral-000\"\n      />\n    </button>\n  );\n};\n\nconst Content = ({\n  children,\n  anchorPosition = \"right\",\n  contentClassNames,\n}: ContentProps) => {\n  const { isOpen } = useContext(DropdownMenuContext);\n\n  if (!isOpen) {\n    return null;\n  }\n\n  return (\n    <div\n      id=\"menu-content\"\n      role=\"menu\"\n      className={cn(\n        \"flex flex-col absolute z-10 border border-neutral-400 dark:border-neutral-900 bg-neutral-000 dark:bg-neutral-1300 rounded-lg ui-shadow-md-soft\",\n        anchorPosition === \"right\" ? \"right-0\" : \"left-0\",\n        contentClassNames,\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n\nconst Link = ({ url, title, subtitle, iconName, children }: LinkProps) => {\n  return (\n    <a\n      href={url}\n      className=\"menu-link group block p-2 rounded-lg\n      hover:bg-neutral-100 dark:hover:bg-neutral-1200 active:bg-neutral-200 dark:active:bg-neutral-1100 text-neutral-1000 dark:text-neutral-300 hover:text-neutral-1300 hover:dark:text-neutral-000\"\n    >\n      <p className=\"mb-1\">\n        {title}\n        {iconName ? (\n          <Icon\n            name={iconName}\n            size=\"1rem\"\n            additionalCSS=\"align-middle ml-2 relative -top-px -left-1 text-neutral-1300 dark:text-neutral-000\"\n          />\n        ) : null}\n      </p>\n      {subtitle ? <p className=\"ui-text-p3 mb-4\">{subtitle}</p> : null}\n      {children}\n    </a>\n  );\n};\n\nDropdownMenu.Trigger = Trigger;\nDropdownMenu.Content = Content;\nDropdownMenu.Link = Link;\n\nexport default DropdownMenu;\n"],"names":["React","createContext","useContext","useState","useEffect","useRef","Icon","cn","DropdownMenuContext","isOpen","setOpen","DropdownMenu","children","ref","clickHandler","e","current","contains","target","document","addEventListener","removeEventListener","Provider","value","div","id","className","Trigger","triggerClassNames","description","button","aria-label","onClick","name","size","additionalCSS","Content","anchorPosition","contentClassNames","role","Link","url","title","subtitle","iconName","a","href","p"],"mappings":"AAAA,OAAOA,OACLC,aAAa,CACbC,UAAU,CACVC,QAAQ,CACRC,SAAS,CACTC,MAAM,KAGD,OAAQ,AACf,QAAOC,SAAU,QAAS,AAE1B,QAAOC,OAAQ,YAAa,CAE5B,MAAMC,oBAAsBP,cAGzB,CACDQ,OAAQ,MACRC,QAAS,KAAO,CAClB,GAgDA,MAAMC,aAAe,CAAC,CAAEC,QAAQ,CAAqB,IACnD,KAAM,CAACH,OAAQC,QAAQ,CAAGP,SAAS,OACnC,MAAMU,IAAMR,OAAuB,MAEnCD,UAAU,KACR,MAAMU,aAAe,AAACC,IACpB,GAAIF,IAAIG,OAAO,EAAEC,SAASF,EAAEG,MAAM,EAAW,OAC7CR,QAAQ,MACV,EACAS,SAASC,gBAAgB,CAAC,QAASN,cACnC,MAAO,IAAMK,SAASE,mBAAmB,CAAC,QAASP,aACrD,EAAG,EAAE,EAEL,OACE,oBAACN,oBAAoBc,QAAQ,EAACC,MAAO,CAAEd,OAAQC,OAAQ,GACrD,oBAACc,OAAIC,GAAG,gBAAgBC,UAAU,WAAWb,IAAKA,KAC/CD,UAIT,EAEA,MAAMe,QAAU,CAAC,CACff,QAAQ,CACRgB,kBAAoB,EAAE,CACtBC,WAAW,CACE,IACb,KAAM,CAAEpB,MAAM,CAAEC,OAAO,CAAE,CAAGR,WAAWM,qBAEvC,OACE,oBAACsB,UACCL,GAAG,eACHM,aAAYF,YACZG,QAAS,IAAMtB,QAAQ,CAACD,QACxBiB,UAAWnB,GACT,4GACAqB,oBAGDhB,SACD,oBAACN,MACC2B,KACExB,OAAS,2BAA6B,6BAExCyB,KAAK,UACLC,cAAc,4CAItB,EAEA,MAAMC,QAAU,CAAC,CACfxB,QAAQ,CACRyB,eAAiB,OAAO,CACxBC,iBAAiB,CACJ,IACb,KAAM,CAAE7B,MAAM,CAAE,CAAGP,WAAWM,qBAE9B,GAAI,CAACC,OAAQ,CACX,OAAO,IACT,CAEA,OACE,oBAACe,OACCC,GAAG,eACHc,KAAK,OACLb,UAAWnB,GACT,iJACA8B,iBAAmB,QAAU,UAAY,SACzCC,oBAGD1B,SAGP,EAEA,MAAM4B,KAAO,CAAC,CAAEC,GAAG,CAAEC,KAAK,CAAEC,QAAQ,CAAEC,QAAQ,CAAEhC,QAAQ,CAAa,IACnE,OACE,oBAACiC,KACCC,KAAML,IACNf,UAAU,6OAGV,oBAACqB,KAAErB,UAAU,QACVgB,MACAE,SACC,oBAACtC,MACC2B,KAAMW,SACNV,KAAK,OACLC,cAAc,uFAEd,MAELQ,SAAW,oBAACI,KAAErB,UAAU,mBAAmBiB,UAAgB,KAC3D/B,SAGP,CAEAD,CAAAA,aAAagB,OAAO,CAAGA,OACvBhB,CAAAA,aAAayB,OAAO,CAAGA,OACvBzB,CAAAA,aAAa6B,IAAI,CAAGA,IAEpB,gBAAe7B,YAAa"}

package/core/Flash.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/core/Flash.tsx"],"sourcesContent":["import React, {\n  useEffect,\n  useState,\n  useRef,\n  createContext,\n  useContext,\n  useCallback,\n  useMemo,\n  PropsWithChildren,\n} from \"react\";\nimport DOMPurify from \"dompurify\";\nimport Icon from \"./Icon\";\nimport { ColorClass } from \"./styles/colors/types\";\nimport { IconName } from \"./Icon/types\";\n\ntype FlashPropsType = \"error\" | \"success\" | \"notice\" | \"info\" | \"alert\";\n\ntype FlashProps = {\n  id: string;\n  removed: boolean;\n  type: FlashPropsType;\n  content: string;\n  removeFlash: (id: string) => void;\n};\n\ntype BackendFlashesProps = {\n  flashes: string[][];\n};\n\nconst FLASH_DATA_ID = \"ui-flashes\";\n\ntype FlashContextType = {\n  flashes: FlashProps[];\n  addFlashes: (flashes: Pick<FlashProps, \"type\" | \"content\">[]) => void;\n  removeFlash: (id: string) => void;\n};\n\nconst FlashContext = createContext<FlashContextType | undefined>(undefined);\n\ntype FlashProviderProps = PropsWithChildren;\n\n/**\n * FlashProvider - Context provider for managing flash messages throughout the application.\n *\n * Maintains a global list of flash messages and provides methods to add/remove them.\n * Automatically deduplicates messages with the same type and content to prevent duplicates.\n * Use this at the app root level and access via useFlashContext() in child components.\n */\nconst FlashProvider = ({ children }: FlashProviderProps) => {\n  const [flashes, setFlashes] = useState<FlashProps[]>([]);\n\n  const removeFlash = useCallback((flashId: string) => {\n    setFlashes((prev) => prev.filter((item) => item.id !== flashId));\n  }, []);\n\n  const addFlashes = useCallback(\n    (newFlashes: Pick<FlashProps, \"type\" | \"content\">[]) => {\n      setFlashes((prev) => {\n        const withIds = newFlashes\n          .filter(\n            (flash) =>\n              !prev.some(\n                (existing) =>\n                  existing.content === flash.content &&\n                  existing.type === flash.type,\n              ),\n          )\n          .map((flash) => ({\n            ...flash,\n            id: Math.random().toString(36).slice(2),\n            removed: false,\n            removeFlash,\n          }));\n\n        return [...prev, ...withIds];\n      });\n    },\n    [removeFlash],\n  );\n\n  const contextValue = useMemo(\n    () => ({ flashes, addFlashes, removeFlash }),\n    [flashes, addFlashes, removeFlash],\n  );\n\n  return (\n    <FlashContext.Provider value={contextValue}>\n      {children}\n    </FlashContext.Provider>\n  );\n};\n\nconst useFlashContext = () => {\n  const context = useContext(FlashContext);\n  if (context === undefined) {\n    throw new Error(\"useFlashContext must be used within FlashProvider\");\n  }\n  return context;\n};\n\nconst FLASH_BG_COLOR = {\n  error: \"bg-gui-error\",\n  success: \"bg-zingy-green\",\n  notice: \"bg-electric-cyan\",\n  info: \"bg-electric-cyan\",\n  alert: \"bg-active-orange\",\n};\n\nconst FLASH_TEXT_COLOR = {\n  error: \"text-white\",\n  success: \"text-cool-black\",\n  notice: \"text-cool-black\",\n  info: \"text-cool-black\",\n  alert: \"text-white\",\n};\n\nconst AUTO_HIDE = [\"success\", \"info\", \"notice\"];\nconst AUTO_HIDE_TIME = 8000;\n\nconst useAutoHide = (type: string, closeFlash: () => void) => {\n  const timeoutId = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  useEffect(() => {\n    if (AUTO_HIDE.includes(type)) {\n      timeoutId.current = setTimeout(() => {\n        closeFlash();\n      }, AUTO_HIDE_TIME);\n    }\n\n    return () => {\n      if (timeoutId.current) {\n        clearTimeout(timeoutId.current);\n      }\n    };\n  }, [type, closeFlash]);\n};\n\n/**\n * Flash - Individual flash message component with animations and auto-dismiss.\n *\n * Displays a colored notification banner with an icon, message content, and close button.\n * Success/info/notice messages auto-hide after 8 seconds. Error/alert messages require\n * manual dismissal. Uses CSS animations for smooth entry/exit and height transitions\n * on close. Content is sanitized with DOMPurify to allow safe HTML links from backend.\n */\nconst Flash = ({ id, type, content, removeFlash }: FlashProps) => {\n  const ref = useRef<HTMLDivElement>(null);\n  const [closed, setClosed] = useState(false);\n  const [flashHeight, setFlashHeight] = useState(0);\n\n  const closeFlash = () => {\n    if (ref.current) {\n      setFlashHeight(ref.current.getBoundingClientRect().height);\n    }\n\n    setClosed(true);\n\n    setTimeout(() => {\n      if (id) {\n        removeFlash(id);\n      }\n    }, 100);\n  };\n\n  useAutoHide(type, closeFlash);\n\n  const animateEntry = !closed;\n\n  let style;\n\n  if (flashHeight && !closed) {\n    style = { height: `${flashHeight}px` };\n  } else if (closed) {\n    style = { height: 0, marginTop: 0, zIndex: -1 };\n  } else {\n    style = {};\n  }\n\n  const safeContent = DOMPurify.sanitize(content, {\n    ALLOWED_TAGS: [\"a\"],\n    ALLOWED_ATTR: [\"href\", \"data-method\"],\n    ALLOWED_URI_REGEXP: /^\\/[^/]/,\n  });\n\n  const withIcons: Record<FlashPropsType, IconName | \"\"> = {\n    notice: \"icon-gui-ably-badge\",\n    success: \"icon-gui-check-outline\",\n    error: \"icon-gui-exclamation-triangle-outline\",\n    alert: \"icon-gui-exclamation-triangle-outline\",\n    info: \"\",\n  };\n\n  const iconColor: Record<FlashPropsType, ColorClass | \"\"> = {\n    notice: \"text-cool-black\",\n    success: \"text-cool-black\",\n    error: \"text-white\",\n    alert: \"text-white\",\n    info: \"\",\n  };\n\n  return (\n    <div\n      className={`ui-flash-message ui-grid-px ${\n        animateEntry ? \"ui-flash-message-enter\" : \"\"\n      }`}\n      style={style}\n      ref={ref}\n      data-id=\"ui-flash\"\n      data-testid=\"ui-flash\"\n    >\n      <div\n        className={`${FLASH_BG_COLOR[type]} p-8 flex align-center rounded shadow-container-subtle`}\n      >\n        {withIcons[type] && iconColor[type] && (\n          <Icon\n            name={withIcons[type]}\n            color={iconColor[type]}\n            size=\"1.5rem\"\n            additionalCSS=\"mr-4 self-baseline\"\n          />\n        )}\n        <p\n          className={`ui-text-p1 mr-4 ${FLASH_TEXT_COLOR[type]}`}\n          // Sanitised inline-markup allowlist (a + relative href) applied above\n          // via DOMPurify. Slice 3a replaces the local config with the shared\n          // sanitizeInlineMarkup helper.\n          // eslint-disable-next-line react/no-danger\n          dangerouslySetInnerHTML={{ __html: safeContent }}\n        />\n        <button\n          type=\"button\"\n          className=\"p-0 ml-auto self-start focus:outline-none focus-base\"\n          onClick={closeFlash}\n        >\n          {iconColor[type] && (\n            <Icon\n              name=\"icon-gui-x-mark-outline\"\n              color={iconColor[type]}\n              size=\"1.5rem\"\n              additionalCSS=\"transition-colors\"\n            />\n          )}\n        </button>\n      </div>\n    </div>\n  );\n};\n\n/**\n * Flashes - Container component that renders all active flash messages.\n *\n * Reads from FlashContext and displays each flash message in order.\n * Use this component where you want flash messages to appear in your layout\n * (typically near the top of the page). Filters out removed messages.\n */\nconst Flashes = () => {\n  const { flashes } = useFlashContext();\n\n  return (\n    <div className=\"ui-flash\" data-id={FLASH_DATA_ID}>\n      {flashes\n        .filter((item) => !item.removed)\n        .map((flash) => (\n          <Flash key={flash.id} {...flash} />\n        ))}\n    </div>\n  );\n};\n\n/**\n * BackendFlashes - Integration component for server-side flash messages (default export).\n *\n * Receives flash messages from backend as an array of [type, content] tuples and adds\n * them to the FlashContext on mount. Primary use case is hydrating flash messages from\n * Rails or other backend frameworks. Renders the Flashes component to display messages.\n * Must be used within FlashProvider.\n */\nconst BackendFlashes = ({ flashes }: BackendFlashesProps) => {\n  const context = useContext(FlashContext);\n  const addFlashes = context?.addFlashes;\n\n  useEffect(() => {\n    if (!addFlashes) {\n      console.warn(\"BackendFlashes must be used within FlashProvider\");\n      return;\n    }\n\n    const transformedFlashes = flashes.map((flash) => {\n      const [type, content] = flash;\n      return { type: type as FlashPropsType, content };\n    });\n\n    if (transformedFlashes.length > 0) {\n      addFlashes(transformedFlashes);\n    }\n  }, [flashes, addFlashes]);\n\n  if (!context) return null;\n\n  return <Flashes />;\n};\n\nexport { FLASH_DATA_ID, Flashes, FlashProvider, useFlashContext };\nexport default BackendFlashes;\n"],"names":["React","useEffect","useState","useRef","createContext","useContext","useCallback","useMemo","DOMPurify","Icon","FLASH_DATA_ID","FlashContext","undefined","FlashProvider","children","flashes","setFlashes","removeFlash","flashId","prev","filter","item","id","addFlashes","newFlashes","withIds","flash","some","existing","content","type","map","Math","random","toString","slice","removed","contextValue","Provider","value","useFlashContext","context","Error","FLASH_BG_COLOR","error","success","notice","info","alert","FLASH_TEXT_COLOR","AUTO_HIDE","AUTO_HIDE_TIME","useAutoHide","closeFlash","timeoutId","includes","current","setTimeout","clearTimeout","Flash","ref","closed","setClosed","flashHeight","setFlashHeight","getBoundingClientRect","height","animateEntry","style","marginTop","zIndex","safeContent","sanitize","ALLOWED_TAGS","ALLOWED_ATTR","ALLOWED_URI_REGEXP","withIcons","iconColor","div","className","data-id","data-testid","name","color","size","additionalCSS","p","dangerouslySetInnerHTML","__html","button","onClick","Flashes","key","BackendFlashes","console","warn","transformedFlashes","length"],"mappings":"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"}
+{"version":3,"sources":["../../src/core/Flash.tsx"],"sourcesContent":["import React, {\n  useEffect,\n  useState,\n  useRef,\n  createContext,\n  useContext,\n  useCallback,\n  useMemo,\n  PropsWithChildren,\n} from \"react\";\nimport DOMPurify from \"dompurify\";\nimport Icon from \"./Icon\";\nimport { ColorClass } from \"./styles/colors/types\";\nimport { IconName } from \"./Icon/types\";\n\ntype FlashPropsType = \"error\" | \"success\" | \"notice\" | \"info\" | \"alert\";\n\ntype FlashProps = {\n  id: string;\n  removed: boolean;\n  type: FlashPropsType;\n  content: string;\n  removeFlash: (id: string) => void;\n};\n\ntype BackendFlashesProps = {\n  flashes: string[][];\n};\n\nconst FLASH_DATA_ID = \"ui-flashes\";\n\ntype FlashContextType = {\n  flashes: FlashProps[];\n  addFlashes: (flashes: Pick<FlashProps, \"type\" | \"content\">[]) => void;\n  removeFlash: (id: string) => void;\n};\n\nconst FlashContext = createContext<FlashContextType | undefined>(undefined);\n\ntype FlashProviderProps = PropsWithChildren;\n\n/**\n * FlashProvider - Context provider for managing flash messages throughout the application.\n *\n * Maintains a global list of flash messages and provides methods to add/remove them.\n * Automatically deduplicates messages with the same type and content to prevent duplicates.\n * Use this at the app root level and access via useFlashContext() in child components.\n */\nconst FlashProvider = ({ children }: FlashProviderProps) => {\n  const [flashes, setFlashes] = useState<FlashProps[]>([]);\n\n  const removeFlash = useCallback((flashId: string) => {\n    setFlashes((prev) => prev.filter((item) => item.id !== flashId));\n  }, []);\n\n  const addFlashes = useCallback(\n    (newFlashes: Pick<FlashProps, \"type\" | \"content\">[]) => {\n      setFlashes((prev) => {\n        const withIds = newFlashes\n          .filter(\n            (flash) =>\n              !prev.some(\n                (existing) =>\n                  existing.content === flash.content &&\n                  existing.type === flash.type,\n              ),\n          )\n          .map((flash) => ({\n            ...flash,\n            id: Math.random().toString(36).slice(2),\n            removed: false,\n            removeFlash,\n          }));\n\n        return [...prev, ...withIds];\n      });\n    },\n    [removeFlash],\n  );\n\n  const contextValue = useMemo(\n    () => ({ flashes, addFlashes, removeFlash }),\n    [flashes, addFlashes, removeFlash],\n  );\n\n  return (\n    <FlashContext.Provider value={contextValue}>\n      {children}\n    </FlashContext.Provider>\n  );\n};\n\nconst useFlashContext = () => {\n  const context = useContext(FlashContext);\n  if (context === undefined) {\n    throw new Error(\"useFlashContext must be used within FlashProvider\");\n  }\n  return context;\n};\n\nconst FLASH_BG_COLOR = {\n  error: \"bg-gui-error\",\n  success: \"bg-zingy-green\",\n  notice: \"bg-electric-cyan\",\n  info: \"bg-electric-cyan\",\n  alert: \"bg-active-orange\",\n};\n\nconst FLASH_TEXT_COLOR = {\n  error: \"text-white\",\n  success: \"text-cool-black\",\n  notice: \"text-cool-black\",\n  info: \"text-cool-black\",\n  alert: \"text-white\",\n};\n\nconst AUTO_HIDE = [\"success\", \"info\", \"notice\"];\nconst AUTO_HIDE_TIME = 8000;\n\nconst useAutoHide = (type: string, closeFlash: () => void) => {\n  const timeoutId = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  useEffect(() => {\n    if (AUTO_HIDE.includes(type)) {\n      timeoutId.current = setTimeout(() => {\n        closeFlash();\n      }, AUTO_HIDE_TIME);\n    }\n\n    return () => {\n      if (timeoutId.current) {\n        clearTimeout(timeoutId.current);\n      }\n    };\n  }, [type, closeFlash]);\n};\n\n/**\n * Flash - Individual flash message component with animations and auto-dismiss.\n *\n * Displays a colored notification banner with an icon, message content, and close button.\n * Success/info/notice messages auto-hide after 8 seconds. Error/alert messages require\n * manual dismissal. Uses CSS animations for smooth entry/exit and height transitions\n * on close. Content is sanitized with DOMPurify to allow safe HTML links from backend.\n */\nconst Flash = ({ id, type, content, removeFlash }: FlashProps) => {\n  const ref = useRef<HTMLDivElement>(null);\n  const [closed, setClosed] = useState(false);\n  const [flashHeight, setFlashHeight] = useState(0);\n\n  const closeFlash = () => {\n    if (ref.current) {\n      setFlashHeight(ref.current.getBoundingClientRect().height);\n    }\n\n    setClosed(true);\n\n    setTimeout(() => {\n      if (id) {\n        removeFlash(id);\n      }\n    }, 100);\n  };\n\n  useAutoHide(type, closeFlash);\n\n  const animateEntry = !closed;\n\n  let style;\n\n  if (flashHeight && !closed) {\n    style = { height: `${flashHeight}px` };\n  } else if (closed) {\n    style = { height: 0, marginTop: 0, zIndex: -1 };\n  } else {\n    style = {};\n  }\n\n  const safeContent = DOMPurify.sanitize(content, {\n    ALLOWED_TAGS: [\"a\"],\n    ALLOWED_ATTR: [\"href\", \"data-method\"],\n    ALLOWED_URI_REGEXP: /^\\/[^/]/,\n  });\n\n  const withIcons: Record<FlashPropsType, IconName | \"\"> = {\n    notice: \"icon-gui-ably-badge\",\n    success: \"icon-gui-check-outline\",\n    error: \"icon-gui-exclamation-triangle-outline\",\n    alert: \"icon-gui-exclamation-triangle-outline\",\n    info: \"\",\n  };\n\n  const iconColor: Record<FlashPropsType, ColorClass | \"\"> = {\n    notice: \"text-cool-black\",\n    success: \"text-cool-black\",\n    error: \"text-white\",\n    alert: \"text-white\",\n    info: \"\",\n  };\n\n  return (\n    <div\n      className={`ui-flash-message ui-grid-px ${\n        animateEntry ? \"ui-flash-message-enter\" : \"\"\n      }`}\n      style={style}\n      ref={ref}\n      data-id=\"ui-flash\"\n      data-testid=\"ui-flash\"\n    >\n      <div\n        className={`${FLASH_BG_COLOR[type]} p-8 flex align-center rounded shadow-container-subtle`}\n      >\n        {withIcons[type] && iconColor[type] && (\n          <Icon\n            name={withIcons[type]}\n            color={iconColor[type]}\n            size=\"1.5rem\"\n            additionalCSS=\"mr-4 self-baseline\"\n          />\n        )}\n        <p\n          className={`ui-text-p1 mr-4 ${FLASH_TEXT_COLOR[type]}`}\n          // Sanitised inline-markup allowlist (a + relative href) applied above\n          // via DOMPurify. Slice 3a replaces the local config with the shared\n          // sanitizeInlineMarkup helper.\n          // oxlint-disable-next-line react/no-danger\n          dangerouslySetInnerHTML={{ __html: safeContent }}\n        />\n        <button\n          type=\"button\"\n          className=\"p-0 ml-auto self-start focus:outline-none focus-base\"\n          onClick={closeFlash}\n        >\n          {iconColor[type] && (\n            <Icon\n              name=\"icon-gui-x-mark-outline\"\n              color={iconColor[type]}\n              size=\"1.5rem\"\n              additionalCSS=\"transition-colors\"\n            />\n          )}\n        </button>\n      </div>\n    </div>\n  );\n};\n\n/**\n * Flashes - Container component that renders all active flash messages.\n *\n * Reads from FlashContext and displays each flash message in order.\n * Use this component where you want flash messages to appear in your layout\n * (typically near the top of the page). Filters out removed messages.\n */\nconst Flashes = () => {\n  const { flashes } = useFlashContext();\n\n  return (\n    <div className=\"ui-flash\" data-id={FLASH_DATA_ID}>\n      {flashes\n        .filter((item) => !item.removed)\n        .map((flash) => (\n          <Flash key={flash.id} {...flash} />\n        ))}\n    </div>\n  );\n};\n\n/**\n * BackendFlashes - Integration component for server-side flash messages (default export).\n *\n * Receives flash messages from backend as an array of [type, content] tuples and adds\n * them to the FlashContext on mount. Primary use case is hydrating flash messages from\n * Rails or other backend frameworks. Renders the Flashes component to display messages.\n * Must be used within FlashProvider.\n */\nconst BackendFlashes = ({ flashes }: BackendFlashesProps) => {\n  const context = useContext(FlashContext);\n  const addFlashes = context?.addFlashes;\n\n  useEffect(() => {\n    if (!addFlashes) {\n      console.warn(\"BackendFlashes must be used within FlashProvider\");\n      return;\n    }\n\n    const transformedFlashes = flashes.map((flash) => {\n      const [type, content] = flash;\n      return { type: type as FlashPropsType, content };\n    });\n\n    if (transformedFlashes.length > 0) {\n      addFlashes(transformedFlashes);\n    }\n  }, [flashes, addFlashes]);\n\n  if (!context) return null;\n\n  return <Flashes />;\n};\n\nexport { FLASH_DATA_ID, Flashes, FlashProvider, useFlashContext };\nexport default BackendFlashes;\n"],"names":["React","useEffect","useState","useRef","createContext","useContext","useCallback","useMemo","DOMPurify","Icon","FLASH_DATA_ID","FlashContext","undefined","FlashProvider","children","flashes","setFlashes","removeFlash","flashId","prev","filter","item","id","addFlashes","newFlashes","withIds","flash","some","existing","content","type","map","Math","random","toString","slice","removed","contextValue","Provider","value","useFlashContext","context","Error","FLASH_BG_COLOR","error","success","notice","info","alert","FLASH_TEXT_COLOR","AUTO_HIDE","AUTO_HIDE_TIME","useAutoHide","closeFlash","timeoutId","includes","current","setTimeout","clearTimeout","Flash","ref","closed","setClosed","flashHeight","setFlashHeight","getBoundingClientRect","height","animateEntry","style","marginTop","zIndex","safeContent","sanitize","ALLOWED_TAGS","ALLOWED_ATTR","ALLOWED_URI_REGEXP","withIcons","iconColor","div","className","data-id","data-testid","name","color","size","additionalCSS","p","dangerouslySetInnerHTML","__html","button","onClick","Flashes","key","BackendFlashes","console","warn","transformedFlashes","length"],"mappings":"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"}

package/core/Loader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/core/Loader.tsx"],"sourcesContent":["import React from \"react\";\n\ntype LoaderProps = {\n  size?: string;\n  ringColor?: string;\n  additionalCSS?: string;\n};\n\nconst Loader = ({\n  ringColor = \"text-dark-grey\",\n  size = \"1.5rem\",\n  additionalCSS = \"\",\n}: LoaderProps) => (\n  <svg\n    className={`${ringColor} ${additionalCSS}`}\n    style={{ width: size, height: size }}\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n    width=\"24\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <style\n      // Hardcoded CSS keyframes — no caller-supplied input. Required because\n      // styled-components / CSS-in-JS would force a build step on consumers.\n      // eslint-disable-next-line react/no-danger\n      dangerouslySetInnerHTML={{\n        __html: `\n      @keyframes chunk-animation {\n        to {\n          transform: rotate(360deg);\n        }\n      }\n\n      .chunk {\n        transform: rotate(0deg);\n        transform-origin: center;\n        animation: chunk-animation 0.6s cubic-bezier(.44,.15,.66,.98) forwards infinite;\n      }\n    `,\n      }}\n    ></style>\n    <path\n      fill=\"currentColor\"\n      d=\"m12 1.99976c-1.9778 0-3.91121.58649-5.5557 1.6853s-2.92621 2.6606-3.68309 4.48786c-.75688 1.82728-.95491 3.83788-.56906 5.77778.38585 1.9398 1.33826 3.7216 2.73679 5.1201 1.39852 1.3985 3.18035 2.351 5.12016 2.7368 1.9398.3859 3.9505.1878 5.7777-.569 1.8273-.7569 3.3891-2.0387 4.4879-3.6831 1.0988-1.6445 1.6853-3.5779 1.6853-5.5557 0-1.3133-.2587-2.61362-.7612-3.82688-.5025-1.21325-1.2391-2.31565-2.1677-3.24423-.9286-.92859-2.031-1.66518-3.2443-2.16773-1.2132-.50255-2.5136-.7612-3.8268-.7612zm0 18.00004c-1.5822 0-3.12896-.4692-4.44456-1.3483-1.31559-.879-2.34097-2.1285-2.94647-3.5903s-.76393-3.0703-.45525-4.6222c.30868-1.55181 1.07061-2.97728 2.18943-4.0961s2.54428-1.88074 4.09615-2.18943c1.5518-.30868 3.1604-.15025 4.6222.45525s2.7112 1.63088 3.5903 2.94647c.879 1.3156 1.3482 2.86231 1.3482 4.44461 0 2.1217-.8428 4.1565-2.3431 5.6568s-3.5352 2.3432-5.6569 2.3432z\"\n      opacity=\".5\"\n    />\n    <path\n      className=\"chunk\"\n      d=\"m20 11.9998h2c0-1.3133-.2587-2.61362-.7612-3.82688-.5026-1.21325-1.2391-2.31565-2.1677-3.24423-.9286-.92859-2.031-1.66518-3.2443-2.16773-1.2132-.50255-2.5136-.7612-3.8268-.7612v2c2.1217 0 4.1566.84285 5.6569 2.34314 1.5002 1.50029 2.3431 3.53512 2.3431 5.6569z\"\n      fill=\"#ff5416\"\n    />\n  </svg>\n);\n\nexport default Loader;\n"],"names":["React","Loader","ringColor","size","additionalCSS","svg","className","style","width","height","viewBox","xmlns","dangerouslySetInnerHTML","__html","path","fill","d","opacity"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,CAQ1B,MAAMC,OAAS,CAAC,CACdC,UAAY,gBAAgB,CAC5BC,KAAO,QAAQ,CACfC,cAAgB,EAAE,CACN,GACZ,oBAACC,OACCC,UAAW,CAAC,EAAEJ,UAAU,CAAC,EAAEE,cAAc,CAAC,CAC1CG,MAAO,CAAEC,MAAOL,KAAMM,OAAQN,IAAK,EACnCM,OAAO,KACPC,QAAQ,YACRF,MAAM,KACNG,MAAM,8BAEN,oBAACJ,SAICK,wBAAyB,CACvBC,OAAQ;AAChB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI,CAAC,AACC,IAEF,oBAACC,QACCC,KAAK,eACLC,EAAE,+2BACFC,QAAQ,OAEV,oBAACH,QACCR,UAAU,QACVU,EAAE,uQACFD,KAAK,YAKX,gBAAed,MAAO"}
+{"version":3,"sources":["../../src/core/Loader.tsx"],"sourcesContent":["import React from \"react\";\n\ntype LoaderProps = {\n  size?: string;\n  ringColor?: string;\n  additionalCSS?: string;\n};\n\nconst Loader = ({\n  ringColor = \"text-dark-grey\",\n  size = \"1.5rem\",\n  additionalCSS = \"\",\n}: LoaderProps) => (\n  <svg\n    className={`${ringColor} ${additionalCSS}`}\n    style={{ width: size, height: size }}\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n    width=\"24\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <style\n      // Hardcoded CSS keyframes — no caller-supplied input. Required because\n      // styled-components / CSS-in-JS would force a build step on consumers.\n      // oxlint-disable-next-line react/no-danger\n      dangerouslySetInnerHTML={{\n        __html: `\n      @keyframes chunk-animation {\n        to {\n          transform: rotate(360deg);\n        }\n      }\n\n      .chunk {\n        transform: rotate(0deg);\n        transform-origin: center;\n        animation: chunk-animation 0.6s cubic-bezier(.44,.15,.66,.98) forwards infinite;\n      }\n    `,\n      }}\n    ></style>\n    <path\n      fill=\"currentColor\"\n      d=\"m12 1.99976c-1.9778 0-3.91121.58649-5.5557 1.6853s-2.92621 2.6606-3.68309 4.48786c-.75688 1.82728-.95491 3.83788-.56906 5.77778.38585 1.9398 1.33826 3.7216 2.73679 5.1201 1.39852 1.3985 3.18035 2.351 5.12016 2.7368 1.9398.3859 3.9505.1878 5.7777-.569 1.8273-.7569 3.3891-2.0387 4.4879-3.6831 1.0988-1.6445 1.6853-3.5779 1.6853-5.5557 0-1.3133-.2587-2.61362-.7612-3.82688-.5025-1.21325-1.2391-2.31565-2.1677-3.24423-.9286-.92859-2.031-1.66518-3.2443-2.16773-1.2132-.50255-2.5136-.7612-3.8268-.7612zm0 18.00004c-1.5822 0-3.12896-.4692-4.44456-1.3483-1.31559-.879-2.34097-2.1285-2.94647-3.5903s-.76393-3.0703-.45525-4.6222c.30868-1.55181 1.07061-2.97728 2.18943-4.0961s2.54428-1.88074 4.09615-2.18943c1.5518-.30868 3.1604-.15025 4.6222.45525s2.7112 1.63088 3.5903 2.94647c.879 1.3156 1.3482 2.86231 1.3482 4.44461 0 2.1217-.8428 4.1565-2.3431 5.6568s-3.5352 2.3432-5.6569 2.3432z\"\n      opacity=\".5\"\n    />\n    <path\n      className=\"chunk\"\n      d=\"m20 11.9998h2c0-1.3133-.2587-2.61362-.7612-3.82688-.5026-1.21325-1.2391-2.31565-2.1677-3.24423-.9286-.92859-2.031-1.66518-3.2443-2.16773-1.2132-.50255-2.5136-.7612-3.8268-.7612v2c2.1217 0 4.1566.84285 5.6569 2.34314 1.5002 1.50029 2.3431 3.53512 2.3431 5.6569z\"\n      fill=\"#ff5416\"\n    />\n  </svg>\n);\n\nexport default Loader;\n"],"names":["React","Loader","ringColor","size","additionalCSS","svg","className","style","width","height","viewBox","xmlns","dangerouslySetInnerHTML","__html","path","fill","d","opacity"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,CAQ1B,MAAMC,OAAS,CAAC,CACdC,UAAY,gBAAgB,CAC5BC,KAAO,QAAQ,CACfC,cAAgB,EAAE,CACN,GACZ,oBAACC,OACCC,UAAW,CAAC,EAAEJ,UAAU,CAAC,EAAEE,cAAc,CAAC,CAC1CG,MAAO,CAAEC,MAAOL,KAAMM,OAAQN,IAAK,EACnCM,OAAO,KACPC,QAAQ,YACRF,MAAM,KACNG,MAAM,8BAEN,oBAACJ,SAICK,wBAAyB,CACvBC,OAAQ;AAChB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI,CAAC,AACC,IAEF,oBAACC,QACCC,KAAK,eACLC,EAAE,+2BACFC,QAAQ,OAEV,oBAACH,QACCR,UAAU,QACVU,EAAE,uQACFD,KAAK,YAKX,gBAAed,MAAO"}

package/core/Meganav/MeganavBlog.js

@@ -1,2 +1,2 @@
-import React from"react";import{PanelTitle}from"./PanelTitle";import Badge from"../Badge";import MeganavPanelItemLinks from"./MeganavPanelItemLinks";const getCategoryColor=category=>{const upperCategory=category.toUpperCase();if(["NEW RELEASE","ABLY ENGINEERING","ABLY NEWS","NEW FEATURE","REALTIME EXPERIENCES"].includes(upperCategory))return"orange";if(["CHAT","SPACES"].includes(upperCategory))return"blue";if(["LIVEOBJECTS","LIVESYNC"].includes(upperCategory))return"green";if(upperCategory==="PUBSUB")return"pink";if(upperCategory==="AI TRANSPORT")return"violet";return"neutral"};const MeganavBlog=({title,link,icon,posts})=>{return React.createElement(React.Fragment,null,React.createElement("div",{className:"mt-3 hidden md:block"},React.createElement(PanelTitle,{title:title,link:link}),posts.map(post=>React.createElement("a",{href:post.link,className:"flex flex-col gap-1 p-3   transition-colors group/blog-post rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-1200  active:bg-neutral-200 dark:active:bg-neutral-1100 focus-base",key:post.link},React.createElement("span",{className:"flex flex-wrap gap-2"},post.categories.map(category=>React.createElement(Badge,{color:getCategoryColor(category),key:category,size:"xs",className:"group-hover/blog-post:bg-neutral-000 dark:group-hover/blog-post:bg-neutral-1300"},category.toUpperCase()))),React.createElement("span",{className:"ui-text-label3 font-semibold text-neutral-1000 dark:text-neutral-300 group-hover/blog-post:text-neutral-1300 dark:group-hover/blog-post:text-neutral-000"},post.title),React.createElement("span",{className:"text-[11px] font-medium leading-[1.4] text-neutral-700 dark:text-neutral-600"},post.pubDate)))),React.createElement("div",{className:"block md:hidden"},React.createElement(MeganavPanelItemLinks,{listItems:[{label:title,link:link,icon:icon}]})))};export default MeganavBlog;
+import React from"react";import{PanelTitle}from"./PanelTitle";import Badge from"../Badge";import MeganavPanelItemLinks from"./MeganavPanelItemLinks";const getCategoryColor=category=>{const upperCategory=category.toUpperCase();if(["NEW RELEASE","ABLY ENGINEERING","ABLY NEWS","NEW FEATURE","REALTIME EXPERIENCES"].includes(upperCategory))return"orange";if(["CHAT","SPACES"].includes(upperCategory))return"blue";if(["LIVEOBJECTS","LIVESYNC"].includes(upperCategory))return"green";if(upperCategory==="PUBSUB")return"pink";if(upperCategory==="AI TRANSPORT")return"violet";return"neutral"};const MeganavBlog=({title,link,icon,posts})=>{return React.createElement(React.Fragment,null,React.createElement("div",{className:"mt-3 hidden md:block"},React.createElement(PanelTitle,{title:title,link:link}),posts.map(post=>React.createElement("a",{href:post.link,className:"flex flex-col gap-1 p-3  \n          transition-colors group/blog-post rounded-lg\n      hover:bg-neutral-100 dark:hover:bg-neutral-1200 \n      active:bg-neutral-200 dark:active:bg-neutral-1100 focus-base",key:post.link},React.createElement("span",{className:"flex flex-wrap gap-2"},post.categories.map(category=>React.createElement(Badge,{color:getCategoryColor(category),key:category,size:"xs",className:"group-hover/blog-post:bg-neutral-000 dark:group-hover/blog-post:bg-neutral-1300"},category.toUpperCase()))),React.createElement("span",{className:"ui-text-label3 font-semibold text-neutral-1000 dark:text-neutral-300\n          group-hover/blog-post:text-neutral-1300 dark:group-hover/blog-post:text-neutral-000"},post.title),React.createElement("span",{className:"text-[11px] font-medium leading-[1.4] text-neutral-700 dark:text-neutral-600"},post.pubDate)))),React.createElement("div",{className:"block md:hidden"},React.createElement(MeganavPanelItemLinks,{listItems:[{label:title,link:link,icon:icon}]})))};export default MeganavBlog;
 //# sourceMappingURL=MeganavBlog.js.map

package/core/Meganav/MeganavBlog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/core/Meganav/MeganavBlog.tsx"],"sourcesContent":["import React from \"react\";\nimport { PanelTitle } from \"./PanelTitle\";\nimport Badge from \"../Badge\";\n\nimport { ColorClassColorGroups } from \"../styles/colors/types\";\nimport MeganavPanelItemLinks from \"./MeganavPanelItemLinks\";\nimport { IconName } from \"../Icon/types\";\n\nexport type BlogPost = {\n  title: string;\n  link: string;\n  categories: string[];\n  pubDate: string;\n};\n\nexport type MeganavBlogProps = {\n  title: string;\n  link: string;\n  icon?: IconName;\n  posts: BlogPost[];\n};\n\nconst getCategoryColor = (category: string): ColorClassColorGroups => {\n  const upperCategory = category.toUpperCase();\n  if (\n    [\n      \"NEW RELEASE\",\n      \"ABLY ENGINEERING\",\n      \"ABLY NEWS\",\n      \"NEW FEATURE\",\n      \"REALTIME EXPERIENCES\",\n    ].includes(upperCategory)\n  )\n    return \"orange\";\n  if ([\"CHAT\", \"SPACES\"].includes(upperCategory)) return \"blue\";\n  if ([\"LIVEOBJECTS\", \"LIVESYNC\"].includes(upperCategory)) return \"green\";\n  if (upperCategory === \"PUBSUB\") return \"pink\";\n  if (upperCategory === \"AI TRANSPORT\") return \"violet\";\n  return \"neutral\";\n};\n\nconst MeganavBlog = ({ title, link, icon, posts }: MeganavBlogProps) => {\n  return (\n    <>\n      <div className=\"mt-3 hidden md:block\">\n        <PanelTitle title={title} link={link} />\n        {posts.map((post) => (\n          <a\n            href={post.link}\n            className=\"flex flex-col gap-1 p-3  \n          transition-colors group/blog-post rounded-lg\n      hover:bg-neutral-100 dark:hover:bg-neutral-1200 \n      active:bg-neutral-200 dark:active:bg-neutral-1100 focus-base\"\n            key={post.link}\n          >\n            <span className=\"flex flex-wrap gap-2\">\n              {post.categories.map((category: string) => (\n                <Badge\n                  color={getCategoryColor(category)}\n                  key={category}\n                  size=\"xs\"\n                  className=\"group-hover/blog-post:bg-neutral-000 dark:group-hover/blog-post:bg-neutral-1300\"\n                >\n                  {category.toUpperCase()}\n                </Badge>\n              ))}\n            </span>\n            <span\n              className=\"ui-text-label3 font-semibold text-neutral-1000 dark:text-neutral-300\n          group-hover/blog-post:text-neutral-1300 dark:group-hover/blog-post:text-neutral-000\"\n            >\n              {post.title}\n            </span>\n\n            <span className=\"text-[11px] font-medium leading-[1.4] text-neutral-700 dark:text-neutral-600\">\n              {post.pubDate}\n            </span>\n          </a>\n        ))}\n      </div>\n      <div className=\"block md:hidden\">\n        <MeganavPanelItemLinks\n          listItems={[\n            {\n              label: title,\n              link: link,\n              icon: icon,\n            },\n          ]}\n        />\n      </div>\n    </>\n  );\n};\n\nexport default MeganavBlog;\n"],"names":["React","PanelTitle","Badge","MeganavPanelItemLinks","getCategoryColor","category","upperCategory","toUpperCase","includes","MeganavBlog","title","link","icon","posts","div","className","map","post","a","href","key","span","categories","color","size","pubDate","listItems","label"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QAASC,UAAU,KAAQ,cAAe,AAC1C,QAAOC,UAAW,UAAW,AAG7B,QAAOC,0BAA2B,yBAA0B,CAiB5D,MAAMC,iBAAmB,AAACC,WACxB,MAAMC,cAAgBD,SAASE,WAAW,GAC1C,GACE,CACE,cACA,mBACA,YACA,cACA,uBACD,CAACC,QAAQ,CAACF,eAEX,MAAO,SACT,GAAI,CAAC,OAAQ,SAAS,CAACE,QAAQ,CAACF,eAAgB,MAAO,OACvD,GAAI,CAAC,cAAe,WAAW,CAACE,QAAQ,CAACF,eAAgB,MAAO,QAChE,GAAIA,gBAAkB,SAAU,MAAO,OACvC,GAAIA,gBAAkB,eAAgB,MAAO,SAC7C,MAAO,SACT,EAEA,MAAMG,YAAc,CAAC,CAAEC,KAAK,CAAEC,IAAI,CAAEC,IAAI,CAAEC,KAAK,CAAoB,IACjE,OACE,wCACE,oBAACC,OAAIC,UAAU,wBACb,oBAACd,YAAWS,MAAOA,MAAOC,KAAMA,OAC/BE,MAAMG,GAAG,CAAC,AAACC,MACV,oBAACC,KACCC,KAAMF,KAAKN,IAAI,CACfI,UAAU,uLAIVK,IAAKH,KAAKN,IAAI,EAEd,oBAACU,QAAKN,UAAU,wBACbE,KAAKK,UAAU,CAACN,GAAG,CAAC,AAACX,UACpB,oBAACH,OACCqB,MAAOnB,iBAAiBC,UACxBe,IAAKf,SACLmB,KAAK,KACLT,UAAU,mFAETV,SAASE,WAAW,MAI3B,oBAACc,QACCN,UAAU,4JAGTE,KAAKP,KAAK,EAGb,oBAACW,QAAKN,UAAU,gFACbE,KAAKQ,OAAO,KAKrB,oBAACX,OAAIC,UAAU,mBACb,oBAACZ,uBACCuB,UAAW,CACT,CACEC,MAAOjB,MACPC,KAAMA,KACNC,KAAMA,IACR,EACD,IAKX,CAEA,gBAAeH,WAAY"}
+{"version":3,"sources":["../../../src/core/Meganav/MeganavBlog.tsx"],"sourcesContent":["import React from \"react\";\nimport { PanelTitle } from \"./PanelTitle\";\nimport Badge from \"../Badge\";\n\nimport { ColorClassColorGroups } from \"../styles/colors/types\";\nimport MeganavPanelItemLinks from \"./MeganavPanelItemLinks\";\nimport { IconName } from \"../Icon/types\";\n\nexport type BlogPost = {\n  title: string;\n  link: string;\n  categories: string[];\n  pubDate: string;\n};\n\nexport type MeganavBlogProps = {\n  title: string;\n  link: string;\n  icon?: IconName;\n  posts: BlogPost[];\n};\n\nconst getCategoryColor = (category: string): ColorClassColorGroups => {\n  const upperCategory = category.toUpperCase();\n  if (\n    [\n      \"NEW RELEASE\",\n      \"ABLY ENGINEERING\",\n      \"ABLY NEWS\",\n      \"NEW FEATURE\",\n      \"REALTIME EXPERIENCES\",\n    ].includes(upperCategory)\n  )\n    return \"orange\";\n  if ([\"CHAT\", \"SPACES\"].includes(upperCategory)) return \"blue\";\n  if ([\"LIVEOBJECTS\", \"LIVESYNC\"].includes(upperCategory)) return \"green\";\n  if (upperCategory === \"PUBSUB\") return \"pink\";\n  if (upperCategory === \"AI TRANSPORT\") return \"violet\";\n  return \"neutral\";\n};\n\nconst MeganavBlog = ({ title, link, icon, posts }: MeganavBlogProps) => {\n  return (\n    <>\n      <div className=\"mt-3 hidden md:block\">\n        <PanelTitle title={title} link={link} />\n        {posts.map((post) => (\n          <a\n            href={post.link}\n            className=\"flex flex-col gap-1 p-3  \n          transition-colors group/blog-post rounded-lg\n      hover:bg-neutral-100 dark:hover:bg-neutral-1200 \n      active:bg-neutral-200 dark:active:bg-neutral-1100 focus-base\"\n            key={post.link}\n          >\n            <span className=\"flex flex-wrap gap-2\">\n              {post.categories.map((category: string) => (\n                <Badge\n                  color={getCategoryColor(category)}\n                  key={category}\n                  size=\"xs\"\n                  className=\"group-hover/blog-post:bg-neutral-000 dark:group-hover/blog-post:bg-neutral-1300\"\n                >\n                  {category.toUpperCase()}\n                </Badge>\n              ))}\n            </span>\n            <span\n              className=\"ui-text-label3 font-semibold text-neutral-1000 dark:text-neutral-300\n          group-hover/blog-post:text-neutral-1300 dark:group-hover/blog-post:text-neutral-000\"\n            >\n              {post.title}\n            </span>\n\n            <span className=\"text-[11px] font-medium leading-[1.4] text-neutral-700 dark:text-neutral-600\">\n              {post.pubDate}\n            </span>\n          </a>\n        ))}\n      </div>\n      <div className=\"block md:hidden\">\n        <MeganavPanelItemLinks\n          listItems={[\n            {\n              label: title,\n              link: link,\n              icon: icon,\n            },\n          ]}\n        />\n      </div>\n    </>\n  );\n};\n\nexport default MeganavBlog;\n"],"names":["React","PanelTitle","Badge","MeganavPanelItemLinks","getCategoryColor","category","upperCategory","toUpperCase","includes","MeganavBlog","title","link","icon","posts","div","className","map","post","a","href","key","span","categories","color","size","pubDate","listItems","label"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QAASC,UAAU,KAAQ,cAAe,AAC1C,QAAOC,UAAW,UAAW,AAG7B,QAAOC,0BAA2B,yBAA0B,CAiB5D,MAAMC,iBAAmB,AAACC,WACxB,MAAMC,cAAgBD,SAASE,WAAW,GAC1C,GACE,CACE,cACA,mBACA,YACA,cACA,uBACD,CAACC,QAAQ,CAACF,eAEX,MAAO,SACT,GAAI,CAAC,OAAQ,SAAS,CAACE,QAAQ,CAACF,eAAgB,MAAO,OACvD,GAAI,CAAC,cAAe,WAAW,CAACE,QAAQ,CAACF,eAAgB,MAAO,QAChE,GAAIA,gBAAkB,SAAU,MAAO,OACvC,GAAIA,gBAAkB,eAAgB,MAAO,SAC7C,MAAO,SACT,EAEA,MAAMG,YAAc,CAAC,CAAEC,KAAK,CAAEC,IAAI,CAAEC,IAAI,CAAEC,KAAK,CAAoB,IACjE,OACE,wCACE,oBAACC,OAAIC,UAAU,wBACb,oBAACd,YAAWS,MAAOA,MAAOC,KAAMA,OAC/BE,MAAMG,GAAG,CAAC,AAACC,MACV,oBAACC,KACCC,KAAMF,KAAKN,IAAI,CACfI,UAAU,gNAIVK,IAAKH,KAAKN,IAAI,EAEd,oBAACU,QAAKN,UAAU,wBACbE,KAAKK,UAAU,CAACN,GAAG,CAAC,AAACX,UACpB,oBAACH,OACCqB,MAAOnB,iBAAiBC,UACxBe,IAAKf,SACLmB,KAAK,KACLT,UAAU,mFAETV,SAASE,WAAW,MAI3B,oBAACc,QACCN,UAAU,uKAGTE,KAAKP,KAAK,EAGb,oBAACW,QAAKN,UAAU,gFACbE,KAAKQ,OAAO,KAKrB,oBAACX,OAAIC,UAAU,mBACb,oBAACZ,uBACCuB,UAAW,CACT,CACEC,MAAOjB,MACPC,KAAMA,KACNC,KAAMA,IACR,EACD,IAKX,CAEA,gBAAeH,WAAY"}

package/core/Meganav/MeganavCustomerStories.js

@@ -1,2 +1,2 @@
-import React from"react";import{PanelTitle}from"./PanelTitle";import MeganavPanelItemLinks from"./MeganavPanelItemLinks";const MeganavCustomerStories=({customerStoriesHighlight,title,link,icon})=>{const{companyName,companyDesc,companyLink,companyLogo,companyLogoDark}=customerStoriesHighlight;return React.createElement(React.Fragment,null,React.createElement("div",{className:"mt-3 hidden md:block"},React.createElement(PanelTitle,{title:title,link:link}),React.createElement("a",{href:companyLink,className:"flex flex-col gap-y-2.5 p-3 pointer-events-auto rounded-lg transition-colors group/customer-story-highlight  hover:bg-neutral-100 dark:hover:bg-neutral-1200 focus-base active:bg-neutral-200 dark:active:bg-neutral-1100"},React.createElement("figure",{className:"rounded bg-neutral-100 dark:bg-neutral-1200  group-hover/customer-story-highlight:bg-neutral-000  dark:group-hover/customer-story-highlight:bg-neutral-1300 flex justify-center items-center gap-4 h-[120px]"},React.createElement("img",{src:companyLogo,alt:companyName,className:"max-h-[90px] max-w-[180px] dark:hidden"}),companyLogoDark&&React.createElement("img",{src:companyLogoDark,alt:companyName,className:"max-h-[90px] max-w-[180px] hidden dark:block"})),React.createElement("span",{className:"flex flex-col gap-2"},React.createElement("span",{className:"ui-text-p4 text-neutral-1000 dark:text-neutral-300"},React.createElement("strong",{className:"font-semibold text-neutral-1300 dark:text-neutral-000"},companyName)," ",companyDesc)))),React.createElement("div",{className:"block md:hidden"},React.createElement(MeganavPanelItemLinks,{listItems:[{label:title,link:link,icon:icon}]})))};export default MeganavCustomerStories;
+import React from"react";import{PanelTitle}from"./PanelTitle";import MeganavPanelItemLinks from"./MeganavPanelItemLinks";const MeganavCustomerStories=({customerStoriesHighlight,title,link,icon})=>{const{companyName,companyDesc,companyLink,companyLogo,companyLogoDark}=customerStoriesHighlight;return React.createElement(React.Fragment,null,React.createElement("div",{className:"mt-3 hidden md:block"},React.createElement(PanelTitle,{title:title,link:link}),React.createElement("a",{href:companyLink,className:"flex flex-col gap-y-2.5 p-3 pointer-events-auto rounded-lg\n        transition-colors group/customer-story-highlight \n      hover:bg-neutral-100 dark:hover:bg-neutral-1200 focus-base\n      active:bg-neutral-200 dark:active:bg-neutral-1100"},React.createElement("figure",{className:"rounded bg-neutral-100 dark:bg-neutral-1200 \n            group-hover/customer-story-highlight:bg-neutral-000 \n            dark:group-hover/customer-story-highlight:bg-neutral-1300\n          flex justify-center items-center gap-4 h-[120px]"},React.createElement("img",{src:companyLogo,alt:companyName,className:"max-h-[90px] max-w-[180px] dark:hidden"}),companyLogoDark&&React.createElement("img",{src:companyLogoDark,alt:companyName,className:"max-h-[90px] max-w-[180px] hidden dark:block"})),React.createElement("span",{className:"flex flex-col gap-2"},React.createElement("span",{className:"ui-text-p4 text-neutral-1000 dark:text-neutral-300"},React.createElement("strong",{className:"font-semibold text-neutral-1300 dark:text-neutral-000"},companyName)," ",companyDesc)))),React.createElement("div",{className:"block md:hidden"},React.createElement(MeganavPanelItemLinks,{listItems:[{label:title,link:link,icon:icon}]})))};export default MeganavCustomerStories;
 //# sourceMappingURL=MeganavCustomerStories.js.map

package/core/Meganav/MeganavCustomerStories.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/core/Meganav/MeganavCustomerStories.tsx"],"sourcesContent":["import React from \"react\";\nimport { PanelTitle } from \"./PanelTitle\";\nimport MeganavPanelItemLinks from \"./MeganavPanelItemLinks\";\nimport { IconName } from \"../Icon/types\";\n\nexport type CustomerStoryHighlight = {\n  companyName: string;\n  companyDesc: string;\n  companyLink: string;\n  companyLogo: string;\n  companyLogoDark?: string;\n};\n\nconst MeganavCustomerStories = ({\n  customerStoriesHighlight,\n  title,\n  link,\n  icon,\n}: {\n  customerStoriesHighlight: CustomerStoryHighlight;\n  title: string;\n  link: string;\n  icon?: IconName;\n}) => {\n  const {\n    companyName,\n    companyDesc,\n    companyLink,\n    companyLogo,\n    companyLogoDark,\n  } = customerStoriesHighlight;\n  return (\n    <>\n      <div className=\"mt-3 hidden md:block\">\n        <PanelTitle title={title} link={link} />\n        <a\n          href={companyLink}\n          className=\"flex flex-col gap-y-2.5 p-3 pointer-events-auto rounded-lg\n        transition-colors group/customer-story-highlight \n      hover:bg-neutral-100 dark:hover:bg-neutral-1200 focus-base\n      active:bg-neutral-200 dark:active:bg-neutral-1100\"\n        >\n          <figure\n            className=\"rounded bg-neutral-100 dark:bg-neutral-1200 \n            group-hover/customer-story-highlight:bg-neutral-000 \n            dark:group-hover/customer-story-highlight:bg-neutral-1300\n          flex justify-center items-center gap-4 h-[120px]\"\n          >\n            <img\n              src={companyLogo}\n              alt={companyName}\n              className=\"max-h-[90px] max-w-[180px] dark:hidden\"\n            />\n            {companyLogoDark && (\n              <img\n                src={companyLogoDark}\n                alt={companyName}\n                className=\"max-h-[90px] max-w-[180px] hidden dark:block\"\n              />\n            )}\n          </figure>\n          <span className=\"flex flex-col gap-2\">\n            <span className=\"ui-text-p4 text-neutral-1000 dark:text-neutral-300\">\n              <strong className=\"font-semibold text-neutral-1300 dark:text-neutral-000\">\n                {companyName}\n              </strong>{\" \"}\n              {companyDesc}\n            </span>\n          </span>\n        </a>\n      </div>\n      <div className=\"block md:hidden\">\n        <MeganavPanelItemLinks\n          listItems={[\n            {\n              label: title,\n              link: link,\n              icon: icon,\n            },\n          ]}\n        />\n      </div>\n    </>\n  );\n};\n\nexport default MeganavCustomerStories;\n"],"names":["React","PanelTitle","MeganavPanelItemLinks","MeganavCustomerStories","customerStoriesHighlight","title","link","icon","companyName","companyDesc","companyLink","companyLogo","companyLogoDark","div","className","a","href","figure","img","src","alt","span","strong","listItems","label"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QAASC,UAAU,KAAQ,cAAe,AAC1C,QAAOC,0BAA2B,yBAA0B,CAW5D,MAAMC,uBAAyB,CAAC,CAC9BC,wBAAwB,CACxBC,KAAK,CACLC,IAAI,CACJC,IAAI,CAML,IACC,KAAM,CACJC,WAAW,CACXC,WAAW,CACXC,WAAW,CACXC,WAAW,CACXC,eAAe,CAChB,CAAGR,yBACJ,OACE,wCACE,oBAACS,OAAIC,UAAU,wBACb,oBAACb,YAAWI,MAAOA,MAAOC,KAAMA,OAChC,oBAACS,KACCC,KAAMN,YACNI,UAAU,6NAKV,oBAACG,UACCH,UAAU,gNAKV,oBAACI,OACCC,IAAKR,YACLS,IAAKZ,YACLM,UAAU,2CAEXF,iBACC,oBAACM,OACCC,IAAKP,gBACLQ,IAAKZ,YACLM,UAAU,kDAIhB,oBAACO,QAAKP,UAAU,uBACd,oBAACO,QAAKP,UAAU,sDACd,oBAACQ,UAAOR,UAAU,yDACfN,aACO,IACTC,gBAKT,oBAACI,OAAIC,UAAU,mBACb,oBAACZ,uBACCqB,UAAW,CACT,CACEC,MAAOnB,MACPC,KAAMA,KACNC,KAAMA,IACR,EACD,IAKX,CAEA,gBAAeJ,sBAAuB"}
+{"version":3,"sources":["../../../src/core/Meganav/MeganavCustomerStories.tsx"],"sourcesContent":["import React from \"react\";\nimport { PanelTitle } from \"./PanelTitle\";\nimport MeganavPanelItemLinks from \"./MeganavPanelItemLinks\";\nimport { IconName } from \"../Icon/types\";\n\nexport type CustomerStoryHighlight = {\n  companyName: string;\n  companyDesc: string;\n  companyLink: string;\n  companyLogo: string;\n  companyLogoDark?: string;\n};\n\nconst MeganavCustomerStories = ({\n  customerStoriesHighlight,\n  title,\n  link,\n  icon,\n}: {\n  customerStoriesHighlight: CustomerStoryHighlight;\n  title: string;\n  link: string;\n  icon?: IconName;\n}) => {\n  const {\n    companyName,\n    companyDesc,\n    companyLink,\n    companyLogo,\n    companyLogoDark,\n  } = customerStoriesHighlight;\n  return (\n    <>\n      <div className=\"mt-3 hidden md:block\">\n        <PanelTitle title={title} link={link} />\n        <a\n          href={companyLink}\n          className=\"flex flex-col gap-y-2.5 p-3 pointer-events-auto rounded-lg\n        transition-colors group/customer-story-highlight \n      hover:bg-neutral-100 dark:hover:bg-neutral-1200 focus-base\n      active:bg-neutral-200 dark:active:bg-neutral-1100\"\n        >\n          <figure\n            className=\"rounded bg-neutral-100 dark:bg-neutral-1200 \n            group-hover/customer-story-highlight:bg-neutral-000 \n            dark:group-hover/customer-story-highlight:bg-neutral-1300\n          flex justify-center items-center gap-4 h-[120px]\"\n          >\n            <img\n              src={companyLogo}\n              alt={companyName}\n              className=\"max-h-[90px] max-w-[180px] dark:hidden\"\n            />\n            {companyLogoDark && (\n              <img\n                src={companyLogoDark}\n                alt={companyName}\n                className=\"max-h-[90px] max-w-[180px] hidden dark:block\"\n              />\n            )}\n          </figure>\n          <span className=\"flex flex-col gap-2\">\n            <span className=\"ui-text-p4 text-neutral-1000 dark:text-neutral-300\">\n              <strong className=\"font-semibold text-neutral-1300 dark:text-neutral-000\">\n                {companyName}\n              </strong>{\" \"}\n              {companyDesc}\n            </span>\n          </span>\n        </a>\n      </div>\n      <div className=\"block md:hidden\">\n        <MeganavPanelItemLinks\n          listItems={[\n            {\n              label: title,\n              link: link,\n              icon: icon,\n            },\n          ]}\n        />\n      </div>\n    </>\n  );\n};\n\nexport default MeganavCustomerStories;\n"],"names":["React","PanelTitle","MeganavPanelItemLinks","MeganavCustomerStories","customerStoriesHighlight","title","link","icon","companyName","companyDesc","companyLink","companyLogo","companyLogoDark","div","className","a","href","figure","img","src","alt","span","strong","listItems","label"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QAASC,UAAU,KAAQ,cAAe,AAC1C,QAAOC,0BAA2B,yBAA0B,CAW5D,MAAMC,uBAAyB,CAAC,CAC9BC,wBAAwB,CACxBC,KAAK,CACLC,IAAI,CACJC,IAAI,CAML,IACC,KAAM,CACJC,WAAW,CACXC,WAAW,CACXC,WAAW,CACXC,WAAW,CACXC,eAAe,CAChB,CAAGR,yBACJ,OACE,wCACE,oBAACS,OAAIC,UAAU,wBACb,oBAACb,YAAWI,MAAOA,MAAOC,KAAMA,OAChC,oBAACS,KACCC,KAAMN,YACNI,UAAU,oPAKV,oBAACG,UACCH,UAAU,qPAKV,oBAACI,OACCC,IAAKR,YACLS,IAAKZ,YACLM,UAAU,2CAEXF,iBACC,oBAACM,OACCC,IAAKP,gBACLQ,IAAKZ,YACLM,UAAU,kDAIhB,oBAACO,QAAKP,UAAU,uBACd,oBAACO,QAAKP,UAAU,sDACd,oBAACQ,UAAOR,UAAU,yDACfN,aACO,IACTC,gBAKT,oBAACI,OAAIC,UAAU,mBACb,oBAACZ,uBACCqB,UAAW,CACT,CACEC,MAAOnB,MACPC,KAAMA,KACNC,KAAMA,IACR,EACD,IAKX,CAEA,gBAAeJ,sBAAuB"}

package/core/Meganav/MeganavPanelItemLinks.js

@@ -1,2 +1,2 @@
-import React from"react";import Icon from"../Icon";import cn from"../utils/cn";import Badge from"../Badge";import{PanelTitle}from"./PanelTitle";const MeganavPanelItemLinks=({label,listItems,link,displayTitleInMobile=true})=>{return React.createElement("ul",{className:cn(!displayTitleInMobile&&"-mt-3 md:mt-0")},(link?.label||label)&&React.createElement(PanelTitle,{title:link?.label||label||"",link:link?.link??"",displayTitleInMobile:displayTitleInMobile}),listItems&&listItems.map(listItem=>React.createElement("li",{className:cn("list-none py-2.5 md:py-2 px-3 my-0 flex gap-x-2.5 rounded-lg group hover:cursor-pointer","hover:bg-neutral-100 dark:hover:bg-neutral-1200 active:bg-neutral-200 dark:active:bg-neutral-1100",listItem.isMobile?"md:hidden":"md:flex"),key:listItem.label},listItem.icon&&React.createElement(Icon,{name:listItem.icon,size:"1.25rem",additionalCSS:"text-neutral-1000 dark:text-neutral-300"}),React.createElement("a",{className:"pointer-events-auto font-sans text-label2 md:text-label3 font-semibold text-neutral-1000 dark:text-neutral-300  group-hover:text-neutral-1300 dark:group-hover:text-neutral-000 focus-base",href:listItem.link},listItem.label),listItem.badge&&React.createElement(Badge,{size:"xs"},listItem.badge))))};export default MeganavPanelItemLinks;
+import React from"react";import Icon from"../Icon";import cn from"../utils/cn";import Badge from"../Badge";import{PanelTitle}from"./PanelTitle";const MeganavPanelItemLinks=({label,listItems,link,displayTitleInMobile=true})=>{return React.createElement("ul",{className:cn(!displayTitleInMobile&&"-mt-3 md:mt-0")},(link?.label||label)&&React.createElement(PanelTitle,{title:link?.label||label||"",link:link?.link??"",displayTitleInMobile:displayTitleInMobile}),listItems&&listItems.map(listItem=>React.createElement("li",{className:cn("list-none py-2.5 md:py-2 px-3 my-0 flex gap-x-2.5 rounded-lg group hover:cursor-pointer","hover:bg-neutral-100 dark:hover:bg-neutral-1200 active:bg-neutral-200 dark:active:bg-neutral-1100",listItem.isMobile?"md:hidden":"md:flex"),key:listItem.label},listItem.icon&&React.createElement(Icon,{name:listItem.icon,size:"1.25rem",additionalCSS:"text-neutral-1000 dark:text-neutral-300"}),React.createElement("a",{className:"pointer-events-auto font-sans text-label2 md:text-label3 font-semibold text-neutral-1000 dark:text-neutral-300 \n              group-hover:text-neutral-1300 dark:group-hover:text-neutral-000 focus-base",href:listItem.link},listItem.label),listItem.badge&&React.createElement(Badge,{size:"xs"},listItem.badge))))};export default MeganavPanelItemLinks;
 //# sourceMappingURL=MeganavPanelItemLinks.js.map

package/core/Meganav/MeganavPanelItemLinks.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/core/Meganav/MeganavPanelItemLinks.tsx"],"sourcesContent":["import React from \"react\";\nimport Icon from \"../Icon\";\nimport cn from \"../utils/cn\";\nimport Badge from \"../Badge\";\nimport { PanelTitle } from \"./PanelTitle\";\nimport { IconName } from \"../Icon/types\";\nimport { FlyoutPanelList } from \"./data\";\n\nexport type MeganavPanelItemLink = {\n  label?: string;\n  listItems: FlyoutPanelList[];\n  icon?: IconName;\n  link?: {\n    label: string;\n    link: string;\n  };\n  displayTitleInMobile?: boolean;\n};\n\nconst MeganavPanelItemLinks = ({\n  label,\n  listItems,\n  link,\n  displayTitleInMobile = true,\n}: MeganavPanelItemLink) => {\n  return (\n    <ul className={cn(!displayTitleInMobile && \"-mt-3 md:mt-0\")}>\n      {(link?.label || label) && (\n        <PanelTitle\n          title={link?.label || label || \"\"}\n          link={link?.link ?? \"\"}\n          displayTitleInMobile={displayTitleInMobile}\n        />\n      )}\n\n      {listItems &&\n        listItems.map((listItem) => (\n          <li\n            className={cn(\n              \"list-none py-2.5 md:py-2 px-3 my-0 flex gap-x-2.5 rounded-lg group hover:cursor-pointer\",\n              \"hover:bg-neutral-100 dark:hover:bg-neutral-1200 active:bg-neutral-200 dark:active:bg-neutral-1100\",\n              listItem.isMobile ? \"md:hidden\" : \"md:flex\",\n            )}\n            key={listItem.label}\n          >\n            {listItem.icon && (\n              <Icon\n                name={listItem.icon}\n                size=\"1.25rem\"\n                additionalCSS=\"text-neutral-1000 dark:text-neutral-300\"\n              />\n            )}\n            <a\n              className=\"pointer-events-auto font-sans text-label2 md:text-label3 font-semibold text-neutral-1000 dark:text-neutral-300 \n              group-hover:text-neutral-1300 dark:group-hover:text-neutral-000 focus-base\"\n              href={listItem.link}\n            >\n              {listItem.label}\n            </a>\n            {listItem.badge && <Badge size=\"xs\">{listItem.badge}</Badge>}\n          </li>\n        ))}\n    </ul>\n  );\n};\n\nexport default MeganavPanelItemLinks;\n"],"names":["React","Icon","cn","Badge","PanelTitle","MeganavPanelItemLinks","label","listItems","link","displayTitleInMobile","ul","className","title","map","listItem","li","isMobile","key","icon","name","size","additionalCSS","a","href","badge"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QAAOC,SAAU,SAAU,AAC3B,QAAOC,OAAQ,aAAc,AAC7B,QAAOC,UAAW,UAAW,AAC7B,QAASC,UAAU,KAAQ,cAAe,CAe1C,MAAMC,sBAAwB,CAAC,CAC7BC,KAAK,CACLC,SAAS,CACTC,IAAI,CACJC,qBAAuB,IAAI,CACN,IACrB,OACE,oBAACC,MAAGC,UAAWT,GAAG,CAACO,sBAAwB,kBACxC,AAACD,CAAAA,MAAMF,OAASA,KAAI,GACnB,oBAACF,YACCQ,MAAOJ,MAAMF,OAASA,OAAS,GAC/BE,KAAMA,MAAMA,MAAQ,GACpBC,qBAAsBA,uBAIzBF,WACCA,UAAUM,GAAG,CAAC,AAACC,UACb,oBAACC,MACCJ,UAAWT,GACT,0FACA,oGACAY,SAASE,QAAQ,CAAG,YAAc,WAEpCC,IAAKH,SAASR,KAAK,EAElBQ,SAASI,IAAI,EACZ,oBAACjB,MACCkB,KAAML,SAASI,IAAI,CACnBE,KAAK,UACLC,cAAc,4CAGlB,oBAACC,KACCX,UAAU,6LAEVY,KAAMT,SAASN,IAAI,EAElBM,SAASR,KAAK,EAEhBQ,SAASU,KAAK,EAAI,oBAACrB,OAAMiB,KAAK,MAAMN,SAASU,KAAK,IAK/D,CAEA,gBAAenB,qBAAsB"}
+{"version":3,"sources":["../../../src/core/Meganav/MeganavPanelItemLinks.tsx"],"sourcesContent":["import React from \"react\";\nimport Icon from \"../Icon\";\nimport cn from \"../utils/cn\";\nimport Badge from \"../Badge\";\nimport { PanelTitle } from \"./PanelTitle\";\nimport { IconName } from \"../Icon/types\";\nimport { FlyoutPanelList } from \"./data\";\n\nexport type MeganavPanelItemLink = {\n  label?: string;\n  listItems: FlyoutPanelList[];\n  icon?: IconName;\n  link?: {\n    label: string;\n    link: string;\n  };\n  displayTitleInMobile?: boolean;\n};\n\nconst MeganavPanelItemLinks = ({\n  label,\n  listItems,\n  link,\n  displayTitleInMobile = true,\n}: MeganavPanelItemLink) => {\n  return (\n    <ul className={cn(!displayTitleInMobile && \"-mt-3 md:mt-0\")}>\n      {(link?.label || label) && (\n        <PanelTitle\n          title={link?.label || label || \"\"}\n          link={link?.link ?? \"\"}\n          displayTitleInMobile={displayTitleInMobile}\n        />\n      )}\n\n      {listItems &&\n        listItems.map((listItem) => (\n          <li\n            className={cn(\n              \"list-none py-2.5 md:py-2 px-3 my-0 flex gap-x-2.5 rounded-lg group hover:cursor-pointer\",\n              \"hover:bg-neutral-100 dark:hover:bg-neutral-1200 active:bg-neutral-200 dark:active:bg-neutral-1100\",\n              listItem.isMobile ? \"md:hidden\" : \"md:flex\",\n            )}\n            key={listItem.label}\n          >\n            {listItem.icon && (\n              <Icon\n                name={listItem.icon}\n                size=\"1.25rem\"\n                additionalCSS=\"text-neutral-1000 dark:text-neutral-300\"\n              />\n            )}\n            <a\n              className=\"pointer-events-auto font-sans text-label2 md:text-label3 font-semibold text-neutral-1000 dark:text-neutral-300 \n              group-hover:text-neutral-1300 dark:group-hover:text-neutral-000 focus-base\"\n              href={listItem.link}\n            >\n              {listItem.label}\n            </a>\n            {listItem.badge && <Badge size=\"xs\">{listItem.badge}</Badge>}\n          </li>\n        ))}\n    </ul>\n  );\n};\n\nexport default MeganavPanelItemLinks;\n"],"names":["React","Icon","cn","Badge","PanelTitle","MeganavPanelItemLinks","label","listItems","link","displayTitleInMobile","ul","className","title","map","listItem","li","isMobile","key","icon","name","size","additionalCSS","a","href","badge"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QAAOC,SAAU,SAAU,AAC3B,QAAOC,OAAQ,aAAc,AAC7B,QAAOC,UAAW,UAAW,AAC7B,QAASC,UAAU,KAAQ,cAAe,CAe1C,MAAMC,sBAAwB,CAAC,CAC7BC,KAAK,CACLC,SAAS,CACTC,IAAI,CACJC,qBAAuB,IAAI,CACN,IACrB,OACE,oBAACC,MAAGC,UAAWT,GAAG,CAACO,sBAAwB,kBACxC,AAACD,CAAAA,MAAMF,OAASA,KAAI,GACnB,oBAACF,YACCQ,MAAOJ,MAAMF,OAASA,OAAS,GAC/BE,KAAMA,MAAMA,MAAQ,GACpBC,qBAAsBA,uBAIzBF,WACCA,UAAUM,GAAG,CAAC,AAACC,UACb,oBAACC,MACCJ,UAAWT,GACT,0FACA,oGACAY,SAASE,QAAQ,CAAG,YAAc,WAEpCC,IAAKH,SAASR,KAAK,EAElBQ,SAASI,IAAI,EACZ,oBAACjB,MACCkB,KAAML,SAASI,IAAI,CACnBE,KAAK,UACLC,cAAc,4CAGlB,oBAACC,KACCX,UAAU,4MAEVY,KAAMT,SAASN,IAAI,EAElBM,SAASR,KAAK,EAEhBQ,SAASU,KAAK,EAAI,oBAACrB,OAAMiB,KAAK,MAAMN,SAASU,KAAK,IAK/D,CAEA,gBAAenB,qBAAsB"}

package/core/Meganav/PanelTitle.js

@@ -1,2 +1,2 @@
-import React from"react";import FeaturedLink from"../FeaturedLink";import cn from"../utils/cn";export const PanelTitle=({title,link,displayTitleInMobile=true})=>{return React.createElement("div",{className:cn("mb-3 px-3",displayTitleInMobile?"block":"hidden md:block")},link?React.createElement(FeaturedLink,{url:link,textSize:"text-overline2",additionalCSS:"ui-text-overline2 mb-0 py-0 font-medium font-mono text-neutral-700 dark:text-neutral-600 hover:text-neutral-1300 dark:hover:text-neutral-000 active:text-neutral-1100 dark:active:text-neutral-200 focus-base"},title):React.createElement("p",{className:"ui-text-overline2 text-neutral-700 dark:text-neutral-600 font-medium font-mono"},title))};
+import React from"react";import FeaturedLink from"../FeaturedLink";import cn from"../utils/cn";export const PanelTitle=({title,link,displayTitleInMobile=true})=>{return React.createElement("div",{className:cn("mb-3 px-3",displayTitleInMobile?"block":"hidden md:block")},link?React.createElement(FeaturedLink,{url:link,textSize:"text-overline2",additionalCSS:"ui-text-overline2 mb-0 py-0 font-medium font-mono\n          text-neutral-700 dark:text-neutral-600 hover:text-neutral-1300 dark:hover:text-neutral-000\n          active:text-neutral-1100 dark:active:text-neutral-200 focus-base"},title):React.createElement("p",{className:"ui-text-overline2 text-neutral-700 dark:text-neutral-600 font-medium font-mono"},title))};
 //# sourceMappingURL=PanelTitle.js.map

package/core/Meganav/PanelTitle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/core/Meganav/PanelTitle.tsx"],"sourcesContent":["import React from \"react\";\nimport FeaturedLink from \"../FeaturedLink\";\nimport cn from \"../utils/cn\";\n\nexport const PanelTitle = ({\n  title,\n  link,\n  displayTitleInMobile = true,\n}: {\n  title: string;\n  link?: string;\n  displayTitleInMobile?: boolean;\n}) => {\n  return (\n    <div\n      className={cn(\n        \"mb-3 px-3\",\n        displayTitleInMobile ? \"block\" : \"hidden md:block\",\n      )}\n    >\n      {link ? (\n        <FeaturedLink\n          url={link}\n          textSize=\"text-overline2\"\n          additionalCSS=\"ui-text-overline2 mb-0 py-0 font-medium font-mono\n          text-neutral-700 dark:text-neutral-600 hover:text-neutral-1300 dark:hover:text-neutral-000\n          active:text-neutral-1100 dark:active:text-neutral-200 focus-base\"\n        >\n          {title}\n        </FeaturedLink>\n      ) : (\n        <p className=\"ui-text-overline2 text-neutral-700 dark:text-neutral-600 font-medium font-mono\">\n          {title}\n        </p>\n      )}\n    </div>\n  );\n};\n"],"names":["React","FeaturedLink","cn","PanelTitle","title","link","displayTitleInMobile","div","className","url","textSize","additionalCSS","p"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QAAOC,iBAAkB,iBAAkB,AAC3C,QAAOC,OAAQ,aAAc,AAE7B,QAAO,MAAMC,WAAa,CAAC,CACzBC,KAAK,CACLC,IAAI,CACJC,qBAAuB,IAAI,CAK5B,IACC,OACE,oBAACC,OACCC,UAAWN,GACT,YACAI,qBAAuB,QAAU,oBAGlCD,KACC,oBAACJ,cACCQ,IAAKJ,KACLK,SAAS,iBACTC,cAAc,iNAIbP,OAGH,oBAACQ,KAAEJ,UAAU,kFACVJ,OAKX,CAAE"}
+{"version":3,"sources":["../../../src/core/Meganav/PanelTitle.tsx"],"sourcesContent":["import React from \"react\";\nimport FeaturedLink from \"../FeaturedLink\";\nimport cn from \"../utils/cn\";\n\nexport const PanelTitle = ({\n  title,\n  link,\n  displayTitleInMobile = true,\n}: {\n  title: string;\n  link?: string;\n  displayTitleInMobile?: boolean;\n}) => {\n  return (\n    <div\n      className={cn(\n        \"mb-3 px-3\",\n        displayTitleInMobile ? \"block\" : \"hidden md:block\",\n      )}\n    >\n      {link ? (\n        <FeaturedLink\n          url={link}\n          textSize=\"text-overline2\"\n          additionalCSS=\"ui-text-overline2 mb-0 py-0 font-medium font-mono\n          text-neutral-700 dark:text-neutral-600 hover:text-neutral-1300 dark:hover:text-neutral-000\n          active:text-neutral-1100 dark:active:text-neutral-200 focus-base\"\n        >\n          {title}\n        </FeaturedLink>\n      ) : (\n        <p className=\"ui-text-overline2 text-neutral-700 dark:text-neutral-600 font-medium font-mono\">\n          {title}\n        </p>\n      )}\n    </div>\n  );\n};\n"],"names":["React","FeaturedLink","cn","PanelTitle","title","link","displayTitleInMobile","div","className","url","textSize","additionalCSS","p"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QAAOC,iBAAkB,iBAAkB,AAC3C,QAAOC,OAAQ,aAAc,AAE7B,QAAO,MAAMC,WAAa,CAAC,CACzBC,KAAK,CACLC,IAAI,CACJC,qBAAuB,IAAI,CAK5B,IACC,OACE,oBAACC,OACCC,UAAWN,GACT,YACAI,qBAAuB,QAAU,oBAGlCD,KACC,oBAACJ,cACCQ,IAAKJ,KACLK,SAAS,iBACTC,cAAc,uOAIbP,OAGH,oBAACQ,KAAEJ,UAAU,kFACVJ,OAKX,CAAE"}

package/core/Notice.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/core/Notice.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\nimport DOMPurify from \"dompurify\";\n\nimport { ColorClass, ColorThemeSet } from \"./styles/colors/types\";\nimport Icon from \"./Icon\";\nimport cn from \"./utils/cn.js\";\nimport NoticeScripts from \"./Notice/component.js\";\nimport useRailsUjsLinks from \"./hooks/use-rails-ujs-hooks\";\n\n// TODO(jamiehenson):\n// This type is a bit messed up currently due to the NoticeScripts import being interpreted as NoticeProps.\n// Plan is to TS-ify the JS assets too, so this can be rectified then. The NoticeScripts-oriented props are\n// the ones after the line break.\nexport type NoticeProps = {\n  buttonLink?: string;\n  buttonLabel?: string;\n  bodyText?: string;\n  title?: string;\n  closeBtn?: boolean;\n  config?: {\n    options: {\n      collapse: boolean;\n    };\n    noticeId: string | number;\n    cookieId: string;\n  };\n  bgColor?: string;\n  textColor?: ColorClass | ColorThemeSet;\n  onClose?: () => void;\n\n  bannerContainer?: Element | null;\n  cookieId?: string;\n  noticeId?: string;\n  options?: { collapse: boolean };\n};\n\nconst defaultTextColor = \"text-neutral-1300 dark:text-neutral-000\";\n\nconst contentWrapperClasses = \"w-full pr-2 ui-text-p4 self-center\";\n\nconst Notice = ({\n  buttonLink,\n  buttonLabel,\n  bodyText,\n  title,\n  config,\n  closeBtn,\n  bgColor = \"bg-orange-100 dark:bg-orange-1100\",\n  textColor = defaultTextColor,\n  onClose,\n}: NoticeProps) => {\n  const contentRef = useRef<HTMLSpanElement>(null);\n  const [isClosing, setIsClosing] = useState(false);\n  useRailsUjsLinks(contentRef);\n\n  useEffect(() => {\n    const cleanup = NoticeScripts({\n      bannerContainer: document.querySelector('[data-id=\"ui-notice\"]'),\n      cookieId: config?.cookieId,\n      noticeId: config?.noticeId,\n      options: {\n        collapse: config?.options?.collapse || false,\n      },\n    });\n\n    return cleanup;\n  }, [config?.cookieId, config?.noticeId, config?.options?.collapse]);\n\n  const safeContent = DOMPurify.sanitize(bodyText ?? \"\", {\n    ALLOWED_TAGS: [\"a\"],\n    ALLOWED_ATTR: [\"href\", \"data-method\"],\n    ALLOWED_URI_REGEXP: /^\\/[^/]/,\n  });\n\n  const isSafeButtonLink =\n    typeof buttonLink === \"string\" &&\n    (/^\\/(?!\\/)/.test(buttonLink) || /^https?:\\/\\//.test(buttonLink));\n\n  // have to add the style classes here as src/core/Notice/component.css is not being properly imported or distributed when ably-ui is used as a package.\n  return (\n    <div\n      className={cn(\n        \"ui-announcement relative z-[60]\",\n        isClosing\n          ? \"ui-announcement-hidden max-h-0 -translate-y-full opacity-0 overflow-hidden\"\n          : \"ui-announcement-visible\",\n        bgColor,\n        textColor,\n      )}\n      data-id=\"ui-notice\"\n    >\n      <div className=\"ui-grid-px py-4 max-w-screen-xl mx-auto flex items-start\">\n        <div className={cn(contentWrapperClasses, textColor)}>\n          <strong className=\"font-bold whitespace-nowrap pr-1\">{title}</strong>\n          <span\n            ref={contentRef}\n            className=\"pr-1\"\n            // Sanitised inline-markup allowlist (a + relative href) applied above\n            // via DOMPurify. Slice 3a replaces the local config with the shared\n            // sanitizeInlineMarkup helper.\n            // eslint-disable-next-line react/no-danger\n            dangerouslySetInnerHTML={{\n              __html: safeContent,\n            }}\n          ></span>\n          {buttonLabel &&\n            (isSafeButtonLink ? (\n              <a\n                href={buttonLink}\n                className=\"focus-base transition-colors cursor-pointer whitespace-nowrap text-gui-blue-default-light dark:text-gui-blue-default-dark\"\n              >\n                {buttonLabel}\n              </a>\n            ) : (\n              <span className=\"focus-base transition-colors cursor-pointer whitespace-nowrap text-gui-blue-default-light dark:text-gui-blue-default-dark\">\n                {buttonLabel}\n              </span>\n            ))}\n        </div>\n\n        {closeBtn && (\n          <button\n            type=\"button\"\n            className=\"ml-auto h-5 w-5 border-none bg-none self-baseline outline-none focus:outline-none focus:ring-0 focus:border-transparent\"\n            onClick={() => {\n              setIsClosing(true);\n              setTimeout(() => {\n                document.dispatchEvent(new CustomEvent(\"notice-closed\"));\n                onClose?.();\n              }, 300);\n            }}\n          >\n            <Icon\n              name=\"icon-gui-x-mark-outline\"\n              size=\"1.25rem\"\n              color={textColor}\n            />\n          </button>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default Notice;\n"],"names":["React","useEffect","useRef","useState","DOMPurify","Icon","cn","NoticeScripts","useRailsUjsLinks","defaultTextColor","contentWrapperClasses","Notice","buttonLink","buttonLabel","bodyText","title","config","closeBtn","bgColor","textColor","onClose","contentRef","isClosing","setIsClosing","cleanup","bannerContainer","document","querySelector","cookieId","noticeId","options","collapse","safeContent","sanitize","ALLOWED_TAGS","ALLOWED_ATTR","ALLOWED_URI_REGEXP","isSafeButtonLink","test","div","className","data-id","strong","span","ref","dangerouslySetInnerHTML","__html","a","href","button","type","onClick","setTimeout","dispatchEvent","CustomEvent","name","size","color"],"mappings":"AAAA,OAAOA,OAASC,SAAS,CAAEC,MAAM,CAAEC,QAAQ,KAAQ,OAAQ,AAC3D,QAAOC,cAAe,WAAY,AAGlC,QAAOC,SAAU,QAAS,AAC1B,QAAOC,OAAQ,eAAgB,AAC/B,QAAOC,kBAAmB,uBAAwB,AAClD,QAAOC,qBAAsB,6BAA8B,CA6B3D,MAAMC,iBAAmB,0CAEzB,MAAMC,sBAAwB,qCAE9B,MAAMC,OAAS,CAAC,CACdC,UAAU,CACVC,WAAW,CACXC,QAAQ,CACRC,KAAK,CACLC,MAAM,CACNC,QAAQ,CACRC,QAAU,mCAAmC,CAC7CC,UAAYV,gBAAgB,CAC5BW,OAAO,CACK,IACZ,MAAMC,WAAanB,OAAwB,MAC3C,KAAM,CAACoB,UAAWC,aAAa,CAAGpB,SAAS,OAC3CK,iBAAiBa,YAEjBpB,UAAU,KACR,MAAMuB,QAAUjB,cAAc,CAC5BkB,gBAAiBC,SAASC,aAAa,CAAC,yBACxCC,SAAUZ,QAAQY,SAClBC,SAAUb,QAAQa,SAClBC,QAAS,CACPC,SAAUf,QAAQc,SAASC,UAAY,KACzC,CACF,GAEA,OAAOP,OACT,EAAG,CAACR,QAAQY,SAAUZ,QAAQa,SAAUb,QAAQc,SAASC,SAAS,EAElE,MAAMC,YAAc5B,UAAU6B,QAAQ,CAACnB,UAAY,GAAI,CACrDoB,aAAc,CAAC,IAAI,CACnBC,aAAc,CAAC,OAAQ,cAAc,CACrCC,mBAAoB,SACtB,GAEA,MAAMC,iBACJ,OAAOzB,aAAe,UACrB,CAAA,YAAY0B,IAAI,CAAC1B,aAAe,eAAe0B,IAAI,CAAC1B,WAAU,EAGjE,OACE,oBAAC2B,OACCC,UAAWlC,GACT,kCACAgB,UACI,6EACA,0BACJJ,QACAC,WAEFsB,UAAQ,aAER,oBAACF,OAAIC,UAAU,4DACb,oBAACD,OAAIC,UAAWlC,GAAGI,sBAAuBS,YACxC,oBAACuB,UAAOF,UAAU,oCAAoCzB,OACtD,oBAAC4B,QACCC,IAAKvB,WACLmB,UAAU,OAKVK,wBAAyB,CACvBC,OAAQd,WACV,IAEDnB,aACEwB,CAAAA,iBACC,oBAACU,KACCC,KAAMpC,WACN4B,UAAU,6HAET3B,aAGH,oBAAC8B,QAAKH,UAAU,6HACb3B,YAEL,GAGHI,UACC,oBAACgC,UACCC,KAAK,SACLV,UAAU,0HACVW,QAAS,KACP5B,aAAa,MACb6B,WAAW,KACT1B,SAAS2B,aAAa,CAAC,IAAIC,YAAY,kBACvClC,WACF,EAAG,IACL,GAEA,oBAACf,MACCkD,KAAK,0BACLC,KAAK,UACLC,MAAOtC,cAOrB,CAEA,gBAAeR,MAAO"}
+{"version":3,"sources":["../../src/core/Notice.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\nimport DOMPurify from \"dompurify\";\n\nimport { ColorClass, ColorThemeSet } from \"./styles/colors/types\";\nimport Icon from \"./Icon\";\nimport cn from \"./utils/cn.js\";\nimport NoticeScripts from \"./Notice/component.js\";\nimport useRailsUjsLinks from \"./hooks/use-rails-ujs-hooks\";\n\n// TODO(jamiehenson):\n// This type is a bit messed up currently due to the NoticeScripts import being interpreted as NoticeProps.\n// Plan is to TS-ify the JS assets too, so this can be rectified then. The NoticeScripts-oriented props are\n// the ones after the line break.\nexport type NoticeProps = {\n  buttonLink?: string;\n  buttonLabel?: string;\n  bodyText?: string;\n  title?: string;\n  closeBtn?: boolean;\n  config?: {\n    options: {\n      collapse: boolean;\n    };\n    noticeId: string | number;\n    cookieId: string;\n  };\n  bgColor?: string;\n  textColor?: ColorClass | ColorThemeSet;\n  onClose?: () => void;\n\n  bannerContainer?: Element | null;\n  cookieId?: string;\n  noticeId?: string;\n  options?: { collapse: boolean };\n};\n\nconst defaultTextColor = \"text-neutral-1300 dark:text-neutral-000\";\n\nconst contentWrapperClasses = \"w-full pr-2 ui-text-p4 self-center\";\n\nconst Notice = ({\n  buttonLink,\n  buttonLabel,\n  bodyText,\n  title,\n  config,\n  closeBtn,\n  bgColor = \"bg-orange-100 dark:bg-orange-1100\",\n  textColor = defaultTextColor,\n  onClose,\n}: NoticeProps) => {\n  const contentRef = useRef<HTMLSpanElement>(null);\n  const [isClosing, setIsClosing] = useState(false);\n  useRailsUjsLinks(contentRef);\n\n  useEffect(() => {\n    const cleanup = NoticeScripts({\n      bannerContainer: document.querySelector('[data-id=\"ui-notice\"]'),\n      cookieId: config?.cookieId,\n      noticeId: config?.noticeId,\n      options: {\n        collapse: config?.options?.collapse || false,\n      },\n    });\n\n    return cleanup;\n  }, [config?.cookieId, config?.noticeId, config?.options?.collapse]);\n\n  const safeContent = DOMPurify.sanitize(bodyText ?? \"\", {\n    ALLOWED_TAGS: [\"a\"],\n    ALLOWED_ATTR: [\"href\", \"data-method\"],\n    ALLOWED_URI_REGEXP: /^\\/[^/]/,\n  });\n\n  const isSafeButtonLink =\n    typeof buttonLink === \"string\" &&\n    (/^\\/(?!\\/)/.test(buttonLink) || /^https?:\\/\\//.test(buttonLink));\n\n  // have to add the style classes here as src/core/Notice/component.css is not being properly imported or distributed when ably-ui is used as a package.\n  return (\n    <div\n      className={cn(\n        \"ui-announcement relative z-[60]\",\n        isClosing\n          ? \"ui-announcement-hidden max-h-0 -translate-y-full opacity-0 overflow-hidden\"\n          : \"ui-announcement-visible\",\n        bgColor,\n        textColor,\n      )}\n      data-id=\"ui-notice\"\n    >\n      <div className=\"ui-grid-px py-4 max-w-screen-xl mx-auto flex items-start\">\n        <div className={cn(contentWrapperClasses, textColor)}>\n          <strong className=\"font-bold whitespace-nowrap pr-1\">{title}</strong>\n          <span\n            ref={contentRef}\n            className=\"pr-1\"\n            // Sanitised inline-markup allowlist (a + relative href) applied above\n            // via DOMPurify. Slice 3a replaces the local config with the shared\n            // sanitizeInlineMarkup helper.\n            // oxlint-disable-next-line react/no-danger\n            dangerouslySetInnerHTML={{\n              __html: safeContent,\n            }}\n          ></span>\n          {buttonLabel &&\n            (isSafeButtonLink ? (\n              <a\n                href={buttonLink}\n                className=\"focus-base transition-colors cursor-pointer whitespace-nowrap text-gui-blue-default-light dark:text-gui-blue-default-dark\"\n              >\n                {buttonLabel}\n              </a>\n            ) : (\n              <span className=\"focus-base transition-colors cursor-pointer whitespace-nowrap text-gui-blue-default-light dark:text-gui-blue-default-dark\">\n                {buttonLabel}\n              </span>\n            ))}\n        </div>\n\n        {closeBtn && (\n          <button\n            type=\"button\"\n            className=\"ml-auto h-5 w-5 border-none bg-none self-baseline outline-none focus:outline-none focus:ring-0 focus:border-transparent\"\n            onClick={() => {\n              setIsClosing(true);\n              setTimeout(() => {\n                document.dispatchEvent(new CustomEvent(\"notice-closed\"));\n                onClose?.();\n              }, 300);\n            }}\n          >\n            <Icon\n              name=\"icon-gui-x-mark-outline\"\n              size=\"1.25rem\"\n              color={textColor}\n            />\n          </button>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default Notice;\n"],"names":["React","useEffect","useRef","useState","DOMPurify","Icon","cn","NoticeScripts","useRailsUjsLinks","defaultTextColor","contentWrapperClasses","Notice","buttonLink","buttonLabel","bodyText","title","config","closeBtn","bgColor","textColor","onClose","contentRef","isClosing","setIsClosing","cleanup","bannerContainer","document","querySelector","cookieId","noticeId","options","collapse","safeContent","sanitize","ALLOWED_TAGS","ALLOWED_ATTR","ALLOWED_URI_REGEXP","isSafeButtonLink","test","div","className","data-id","strong","span","ref","dangerouslySetInnerHTML","__html","a","href","button","type","onClick","setTimeout","dispatchEvent","CustomEvent","name","size","color"],"mappings":"AAAA,OAAOA,OAASC,SAAS,CAAEC,MAAM,CAAEC,QAAQ,KAAQ,OAAQ,AAC3D,QAAOC,cAAe,WAAY,AAGlC,QAAOC,SAAU,QAAS,AAC1B,QAAOC,OAAQ,eAAgB,AAC/B,QAAOC,kBAAmB,uBAAwB,AAClD,QAAOC,qBAAsB,6BAA8B,CA6B3D,MAAMC,iBAAmB,0CAEzB,MAAMC,sBAAwB,qCAE9B,MAAMC,OAAS,CAAC,CACdC,UAAU,CACVC,WAAW,CACXC,QAAQ,CACRC,KAAK,CACLC,MAAM,CACNC,QAAQ,CACRC,QAAU,mCAAmC,CAC7CC,UAAYV,gBAAgB,CAC5BW,OAAO,CACK,IACZ,MAAMC,WAAanB,OAAwB,MAC3C,KAAM,CAACoB,UAAWC,aAAa,CAAGpB,SAAS,OAC3CK,iBAAiBa,YAEjBpB,UAAU,KACR,MAAMuB,QAAUjB,cAAc,CAC5BkB,gBAAiBC,SAASC,aAAa,CAAC,yBACxCC,SAAUZ,QAAQY,SAClBC,SAAUb,QAAQa,SAClBC,QAAS,CACPC,SAAUf,QAAQc,SAASC,UAAY,KACzC,CACF,GAEA,OAAOP,OACT,EAAG,CAACR,QAAQY,SAAUZ,QAAQa,SAAUb,QAAQc,SAASC,SAAS,EAElE,MAAMC,YAAc5B,UAAU6B,QAAQ,CAACnB,UAAY,GAAI,CACrDoB,aAAc,CAAC,IAAI,CACnBC,aAAc,CAAC,OAAQ,cAAc,CACrCC,mBAAoB,SACtB,GAEA,MAAMC,iBACJ,OAAOzB,aAAe,UACrB,CAAA,YAAY0B,IAAI,CAAC1B,aAAe,eAAe0B,IAAI,CAAC1B,WAAU,EAGjE,OACE,oBAAC2B,OACCC,UAAWlC,GACT,kCACAgB,UACI,6EACA,0BACJJ,QACAC,WAEFsB,UAAQ,aAER,oBAACF,OAAIC,UAAU,4DACb,oBAACD,OAAIC,UAAWlC,GAAGI,sBAAuBS,YACxC,oBAACuB,UAAOF,UAAU,oCAAoCzB,OACtD,oBAAC4B,QACCC,IAAKvB,WACLmB,UAAU,OAKVK,wBAAyB,CACvBC,OAAQd,WACV,IAEDnB,aACEwB,CAAAA,iBACC,oBAACU,KACCC,KAAMpC,WACN4B,UAAU,6HAET3B,aAGH,oBAAC8B,QAAKH,UAAU,6HACb3B,YAEL,GAGHI,UACC,oBAACgC,UACCC,KAAK,SACLV,UAAU,0HACVW,QAAS,KACP5B,aAAa,MACb6B,WAAW,KACT1B,SAAS2B,aAAa,CAAC,IAAIC,YAAY,kBACvClC,WACF,EAAG,IACL,GAEA,oBAACf,MACCkD,KAAK,0BACLC,KAAK,UACLC,MAAOtC,cAOrB,CAEA,gBAAeR,MAAO"}

package/core/Pricing/data.js

@@ -1,2 +1,2 @@
-import React from"react";import Tooltip from"../Tooltip";export const planData=[{title:{content:"Free",className:"ui-text-h4 tracking-[-0.002rem]",color:"text-neutral-1300 dark:text-neutral-000"},description:{content:"Build a proof of concept.",className:"ui-text-p3",color:"text-neutral-700 dark:text-neutral-600"},price:{amount:"$0"},cta:{text:"Start for free",url:"/sign-up",iconColor:"text-neutral-600 dark:text-neutral-700"},sections:[{title:"Capacity",items:["200 concurrent connections","500 messages / second","6M messages / month"]},{title:"Includes",items:["Build with any Ably product","Community & email support (best effort)","No commitment"],listItemColors:{foreground:"text-neutral-700 dark:text-neutral-600",background:"text-neutral-100 dark:text-neutral-1200"}}],bottomCta:{text:"See all features",url:"#pricing-table"}},{title:{content:"Standard",className:"ui-text-h4 tracking-[-0.002rem]",color:"text-neutral-1300 dark:text-neutral-000"},description:{content:"Roll-out into production.",className:"ui-text-p3",color:"text-neutral-700 dark:text-neutral-600"},price:{amount:"$29",content:React.createElement(React.Fragment,null,React.createElement("p",{className:"ui-text-p3 font-medium",style:{color:"currentColor"}},"/ month"),React.createElement("div",{className:"flex -mt-1"},React.createElement("p",{className:"ui-text-p3 font-bold text-gui-blue-default-dark leading-[1.4rem]"},"+ usage"),React.createElement(Tooltip,{interactive:true,iconSize:"1.25rem"},"Usage is billed on top of your plan. You'll be charged monthly based on how many messages, channel minutes, and connection minutes you use. See rates above.")))},cta:{text:"Get started",url:"/users/paid_sign_up?package=standard",iconColor:"text-neutral-600 dark:text-neutral-700"},sections:[{title:"Capacity",items:["10k concurrent channels","10k concurrent connections","2.5k messages / second"]},{title:"Includes",items:["Build with any Ably product","1 day email support SLA","Uptime SLO"],listItemColors:{foreground:"text-neutral-700 dark:text-neutral-600",background:"text-neutral-100 dark:text-neutral-1200"}}],bottomCta:{text:"See all features",url:"#pricing-table"}},{title:{content:"Pro",className:"ui-text-h4 tracking-[-0.002rem]",color:"text-neutral-1300 dark:text-neutral-000"},description:{content:"Scale business critical workloads.",className:"ui-text-p3",color:"text-neutral-700 dark:text-neutral-600"},price:{amount:"$399",content:React.createElement(React.Fragment,null,React.createElement("p",{className:"ui-text-p3 font-medium",style:{color:"currentColor"}},"/ month"),React.createElement("div",{className:"flex -mt-1"},React.createElement("p",{className:"ui-text-p3 font-bold text-gui-blue-default-dark leading-[1.4rem]"},"+ usage"),React.createElement(Tooltip,{interactive:true,iconSize:"1.25rem"},"Usage is billed on top of your plan. You'll be charged monthly based on how many messages, channel minutes, and connection minutes you use. See rates above.")))},cta:{text:"Get started",url:"/users/paid_sign_up?package=pro",iconColor:"text-neutral-600 dark:text-neutral-700"},sections:[{title:"Capacity",items:["50k concurrent channels","50k concurrent connections","10k messages / second"]},{title:"Includes",items:["Build with any Ably product","4 hour email support SLA","Datadog (lite)","Uptime SLO"],listItemColors:{foreground:"text-neutral-700 dark:text-neutral-600",background:"text-neutral-100 dark:text-neutral-1200"}}],bottomCta:{text:"See all features",url:"#pricing-table"}},{title:{content:"Enterprise",className:"ui-text-h4 tracking-[-0.002rem]",color:"text-orange-600"},description:{content:"Serious workloads without limits.",className:"ui-text-p3",color:"text-neutral-700 dark:text-neutral-600"},price:{amount:"Custom"},cta:{text:"Contact us",url:"/contact",isPriority:true},sections:[{title:"Capacity",items:["Unlimited concurrent channels","Unlimited connections","Unlimited messages / second"]},{title:"Includes",items:["Build with any Ably product","24/7 mission critical support","99.999% uptime SLAs","Committed use discounts","Datadog","CNAME, SSO, & more"],listItemColors:{foreground:"text-orange-700 dark:text-orange-500",background:"text-neutral-100 dark:text-neutral-1200"}}],bottomCta:{text:"See all features",url:"#pricing-table"}}];export const consumptionData=[{title:{content:"Messages",className:"ui-text-h3",color:"text-neutral-1300 dark:text-neutral-000"},description:{content:"Messages contain the data that a client is communicating, such as the contents of a chat message.",className:"ui-text-p3",color:"text-neutral-700 dark:text-neutral-600"},price:{amount:"$2.50",content:"/ million"},sections:[{title:"Volume discounts",items:[["Consumption","$ / million msgs"],["First 50 million msgs","$2.50"],["Next 450 million msgs","$2.25"],["Next 4.5 billion msgs","$1.95"],["Next 15 billion msgs","$1.65"],["Next 30 billion msgs","$1.40"],["Over 50 billion msgs","$1.25"]]}],subtext:"As low as $0.50/M with volume discount"},{title:{content:"Channels",className:"ui-text-h3",color:"text-neutral-1300 dark:text-neutral-000",tooltip:React.createElement("p",null,"We charge you for the amount of time a channel is active in our network by the minute. For example, if ten channels are in use for 45 minutes, you will be charged a total of 450 channel minutes.")},description:{content:"Channels are used to route messages from publishers to subscribers. Channels are billed by the minute when actively being used by a connected client.",className:"ui-text-p3",color:"text-neutral-700 dark:text-neutral-600"},price:{amount:"$1.00",content:"/ million mins"},sections:[{title:"Volume discounts",items:[["Consumption","$ / million mins"],["First 10 million mins","$1.00"],["Next 90 million mins","$0.95"],["Next 900 million mins","$0.85"],["Next 4 billion mins","$0.75"],["Next 10 billion mins","$0.65"],["Over 15 billion mins","$0.60"]]}],subtext:"As low as $0.20/M with volume discount"},{title:{content:"Connections",className:"ui-text-h3",color:"text-neutral-1300 dark:text-neutral-000",tooltip:React.createElement("p",null,"We charge you for the amount of time devices are connected to our network by the minute. For example, if ten devices are each connected for 45 minutes, you will be charged a total of 450 connection minutes.")},description:{content:"Clients establish and maintain a connection to the Ably service, typically over WebSockets.",className:"ui-text-p3",color:"text-neutral-700 dark:text-neutral-600"},price:{amount:"$1.00",content:"/ million mins"},sections:[{title:"Volume discounts",items:[["Consumption","$ / million mins"],["First 10 million mins","$1.00"],["Next 90 million mins","$0.95"],["Next 900 million mins","$0.85"],["Next 4 billion mins","$0.75"],["Next 10 billion mins","$0.65"],["Over 15 billion mins","$0.60"]]}],subtext:"As low as $0.20/M with volume discount"}];
+import React from"react";import Tooltip from"../Tooltip";export const planData=[{title:{content:"Free",className:"ui-text-h4 tracking-[-0.002rem]",color:"text-neutral-1300 dark:text-neutral-000"},description:{content:"Build a proof of concept.",className:"ui-text-p3",color:"text-neutral-700 dark:text-neutral-600"},price:{amount:"$0"},cta:{text:"Start for free",url:"/sign-up",iconColor:"text-neutral-600 dark:text-neutral-700"},sections:[{title:"Capacity",items:["200 concurrent connections","500 messages / second","6M messages / month"]},{title:"Includes",items:["Build with any Ably product","Community & email support (best effort)","No commitment"],listItemColors:{foreground:"text-neutral-700 dark:text-neutral-600",background:"text-neutral-100 dark:text-neutral-1200"}}],bottomCta:{text:"See all features",url:"#pricing-table"}},{title:{content:"Standard",className:"ui-text-h4 tracking-[-0.002rem]",color:"text-neutral-1300 dark:text-neutral-000"},description:{content:"Roll-out into production.",className:"ui-text-p3",color:"text-neutral-700 dark:text-neutral-600"},price:{amount:"$29",content:React.createElement(React.Fragment,null,React.createElement("p",{className:"ui-text-p3 font-medium",style:{color:"currentColor"}},"/ month"),React.createElement("div",{className:"flex -mt-1"},React.createElement("p",{className:"ui-text-p3 font-bold text-gui-blue-default-dark leading-[1.4rem]"},"+ usage"),React.createElement(Tooltip,{interactive:true,iconSize:"1.25rem"},"Usage is billed on top of your plan. You'll be charged monthly based on how many messages, channel minutes, and connection minutes you use. See rates above.")))},cta:{text:"Get started",url:"/sign-up?next=package",iconColor:"text-neutral-600 dark:text-neutral-700"},sections:[{title:"Capacity",items:["10k concurrent channels","10k concurrent connections","2.5k messages / second"]},{title:"Includes",items:["Build with any Ably product","1 day email support SLA","Uptime SLO"],listItemColors:{foreground:"text-neutral-700 dark:text-neutral-600",background:"text-neutral-100 dark:text-neutral-1200"}}],bottomCta:{text:"See all features",url:"#pricing-table"}},{title:{content:"Pro",className:"ui-text-h4 tracking-[-0.002rem]",color:"text-neutral-1300 dark:text-neutral-000"},description:{content:"Scale business critical workloads.",className:"ui-text-p3",color:"text-neutral-700 dark:text-neutral-600"},price:{amount:"$399",content:React.createElement(React.Fragment,null,React.createElement("p",{className:"ui-text-p3 font-medium",style:{color:"currentColor"}},"/ month"),React.createElement("div",{className:"flex -mt-1"},React.createElement("p",{className:"ui-text-p3 font-bold text-gui-blue-default-dark leading-[1.4rem]"},"+ usage"),React.createElement(Tooltip,{interactive:true,iconSize:"1.25rem"},"Usage is billed on top of your plan. You'll be charged monthly based on how many messages, channel minutes, and connection minutes you use. See rates above.")))},cta:{text:"Get started",url:"/sign-up?next=package",iconColor:"text-neutral-600 dark:text-neutral-700"},sections:[{title:"Capacity",items:["50k concurrent channels","50k concurrent connections","10k messages / second"]},{title:"Includes",items:["Build with any Ably product","4 hour email support SLA","Datadog (lite)","Uptime SLO"],listItemColors:{foreground:"text-neutral-700 dark:text-neutral-600",background:"text-neutral-100 dark:text-neutral-1200"}}],bottomCta:{text:"See all features",url:"#pricing-table"}},{title:{content:"Enterprise",className:"ui-text-h4 tracking-[-0.002rem]",color:"text-orange-600"},description:{content:"Serious workloads without limits.",className:"ui-text-p3",color:"text-neutral-700 dark:text-neutral-600"},price:{amount:"Custom"},cta:{text:"Contact us",url:"/contact",isPriority:true},sections:[{title:"Capacity",items:["Unlimited concurrent channels","Unlimited connections","Unlimited messages / second"]},{title:"Includes",items:["Build with any Ably product","24/7 mission critical support","99.999% uptime SLAs","Committed use discounts","Datadog","CNAME, SSO, & more"],listItemColors:{foreground:"text-orange-700 dark:text-orange-500",background:"text-neutral-100 dark:text-neutral-1200"}}],bottomCta:{text:"See all features",url:"#pricing-table"}}];export const consumptionData=[{title:{content:"Messages",className:"ui-text-h3",color:"text-neutral-1300 dark:text-neutral-000"},description:{content:"Messages contain the data that a client is communicating, such as the contents of a chat message.",className:"ui-text-p3",color:"text-neutral-700 dark:text-neutral-600"},price:{amount:"$2.50",content:"/ million"},sections:[{title:"Volume discounts",items:[["Consumption","$ / million msgs"],["First 50 million msgs","$2.50"],["Next 450 million msgs","$2.25"],["Next 4.5 billion msgs","$1.95"],["Next 15 billion msgs","$1.65"],["Next 30 billion msgs","$1.40"],["Over 50 billion msgs","$1.25"]]}],subtext:"As low as $0.50/M with volume discount"},{title:{content:"Channels",className:"ui-text-h3",color:"text-neutral-1300 dark:text-neutral-000",tooltip:React.createElement("p",null,"We charge you for the amount of time a channel is active in our network by the minute. For example, if ten channels are in use for 45 minutes, you will be charged a total of 450 channel minutes.")},description:{content:"Channels are used to route messages from publishers to subscribers. Channels are billed by the minute when actively being used by a connected client.",className:"ui-text-p3",color:"text-neutral-700 dark:text-neutral-600"},price:{amount:"$1.00",content:"/ million mins"},sections:[{title:"Volume discounts",items:[["Consumption","$ / million mins"],["First 10 million mins","$1.00"],["Next 90 million mins","$0.95"],["Next 900 million mins","$0.85"],["Next 4 billion mins","$0.75"],["Next 10 billion mins","$0.65"],["Over 15 billion mins","$0.60"]]}],subtext:"As low as $0.20/M with volume discount"},{title:{content:"Connections",className:"ui-text-h3",color:"text-neutral-1300 dark:text-neutral-000",tooltip:React.createElement("p",null,"We charge you for the amount of time devices are connected to our network by the minute. For example, if ten devices are each connected for 45 minutes, you will be charged a total of 450 connection minutes.")},description:{content:"Clients establish and maintain a connection to the Ably service, typically over WebSockets.",className:"ui-text-p3",color:"text-neutral-700 dark:text-neutral-600"},price:{amount:"$1.00",content:"/ million mins"},sections:[{title:"Volume discounts",items:[["Consumption","$ / million mins"],["First 10 million mins","$1.00"],["Next 90 million mins","$0.95"],["Next 900 million mins","$0.85"],["Next 4 billion mins","$0.75"],["Next 10 billion mins","$0.65"],["Over 15 billion mins","$0.60"]]}],subtext:"As low as $0.20/M with volume discount"}];
 //# sourceMappingURL=data.js.map

package/core/Pricing/data.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/core/Pricing/data.tsx"],"sourcesContent":["import React from \"react\";\nimport { PricingDataFeature } from \"./types\";\nimport Tooltip from \"../Tooltip\";\n\nexport const planData: PricingDataFeature[] = [\n  {\n    title: {\n      content: \"Free\",\n      className: \"ui-text-h4 tracking-[-0.002rem]\",\n      color: \"text-neutral-1300 dark:text-neutral-000\",\n    },\n    description: {\n      content: \"Build a proof of concept.\",\n      className: \"ui-text-p3\",\n      color: \"text-neutral-700 dark:text-neutral-600\",\n    },\n    price: { amount: \"$0\" },\n    cta: {\n      text: \"Start for free\",\n      url: \"/sign-up\",\n      iconColor: \"text-neutral-600 dark:text-neutral-700\",\n    },\n    sections: [\n      {\n        title: \"Capacity\",\n        items: [\n          \"200 concurrent connections\",\n          \"500 messages / second\",\n          \"6M messages / month\",\n        ],\n      },\n      {\n        title: \"Includes\",\n        items: [\n          \"Build with any Ably product\",\n          \"Community & email support (best effort)\",\n          \"No commitment\",\n        ],\n        listItemColors: {\n          foreground: \"text-neutral-700 dark:text-neutral-600\",\n          background: \"text-neutral-100 dark:text-neutral-1200\",\n        },\n      },\n    ],\n    bottomCta: {\n      text: \"See all features\",\n      url: \"#pricing-table\",\n    },\n  },\n  {\n    title: {\n      content: \"Standard\",\n      className: \"ui-text-h4 tracking-[-0.002rem]\",\n      color: \"text-neutral-1300 dark:text-neutral-000\",\n    },\n    description: {\n      content: \"Roll-out into production.\",\n      className: \"ui-text-p3\",\n      color: \"text-neutral-700 dark:text-neutral-600\",\n    },\n    price: {\n      amount: \"$29\",\n      content: (\n        <>\n          <p\n            className=\"ui-text-p3 font-medium\"\n            style={{ color: \"currentColor\" }}\n          >\n            / month\n          </p>\n          <div className=\"flex -mt-1\">\n            <p className=\"ui-text-p3 font-bold text-gui-blue-default-dark leading-[1.4rem]\">\n              + usage\n            </p>\n            <Tooltip interactive={true} iconSize=\"1.25rem\">\n              Usage is billed on top of your plan. You&apos;ll be charged\n              monthly based on how many messages, channel minutes, and\n              connection minutes you use. See rates above.\n            </Tooltip>\n          </div>\n        </>\n      ),\n    },\n    cta: {\n      text: \"Get started\",\n      url: \"/users/paid_sign_up?package=standard\",\n      iconColor: \"text-neutral-600 dark:text-neutral-700\",\n    },\n    sections: [\n      {\n        title: \"Capacity\",\n        items: [\n          \"10k concurrent channels\",\n          \"10k concurrent connections\",\n          \"2.5k messages / second\",\n        ],\n      },\n      {\n        title: \"Includes\",\n        items: [\n          \"Build with any Ably product\",\n          \"1 day email support SLA\",\n          \"Uptime SLO\",\n        ],\n        listItemColors: {\n          foreground: \"text-neutral-700 dark:text-neutral-600\",\n          background: \"text-neutral-100 dark:text-neutral-1200\",\n        },\n      },\n    ],\n    bottomCta: {\n      text: \"See all features\",\n      url: \"#pricing-table\",\n    },\n  },\n  {\n    title: {\n      content: \"Pro\",\n      className: \"ui-text-h4 tracking-[-0.002rem]\",\n      color: \"text-neutral-1300 dark:text-neutral-000\",\n    },\n    description: {\n      content: \"Scale business critical workloads.\",\n      className: \"ui-text-p3\",\n      color: \"text-neutral-700 dark:text-neutral-600\",\n    },\n    price: {\n      amount: \"$399\",\n      content: (\n        <>\n          <p\n            className=\"ui-text-p3 font-medium\"\n            style={{ color: \"currentColor\" }}\n          >\n            / month\n          </p>\n          <div className=\"flex -mt-1\">\n            <p className=\"ui-text-p3 font-bold text-gui-blue-default-dark leading-[1.4rem]\">\n              + usage\n            </p>\n            <Tooltip interactive={true} iconSize=\"1.25rem\">\n              Usage is billed on top of your plan. You&apos;ll be charged\n              monthly based on how many messages, channel minutes, and\n              connection minutes you use. See rates above.\n            </Tooltip>\n          </div>\n        </>\n      ),\n    },\n    cta: {\n      text: \"Get started\",\n      url: \"/users/paid_sign_up?package=pro\",\n      iconColor: \"text-neutral-600 dark:text-neutral-700\",\n    },\n    sections: [\n      {\n        title: \"Capacity\",\n        items: [\n          \"50k concurrent channels\",\n          \"50k concurrent connections\",\n          \"10k messages / second\",\n        ],\n      },\n      {\n        title: \"Includes\",\n        items: [\n          \"Build with any Ably product\",\n          \"4 hour email support SLA\",\n          \"Datadog (lite)\",\n          \"Uptime SLO\",\n        ],\n        listItemColors: {\n          foreground: \"text-neutral-700 dark:text-neutral-600\",\n          background: \"text-neutral-100 dark:text-neutral-1200\",\n        },\n      },\n    ],\n    bottomCta: {\n      text: \"See all features\",\n      url: \"#pricing-table\",\n    },\n  },\n\n  {\n    title: {\n      content: \"Enterprise\",\n      className: \"ui-text-h4 tracking-[-0.002rem]\",\n      color: \"text-orange-600\",\n    },\n    description: {\n      content: \"Serious workloads without limits.\",\n      className: \"ui-text-p3\",\n      color: \"text-neutral-700 dark:text-neutral-600\",\n    },\n    price: { amount: \"Custom\" },\n    cta: {\n      text: \"Contact us\",\n      url: \"/contact\",\n      isPriority: true,\n    },\n    sections: [\n      {\n        title: \"Capacity\",\n        items: [\n          \"Unlimited concurrent channels\",\n          \"Unlimited connections\",\n          \"Unlimited messages / second\",\n        ],\n      },\n      {\n        title: \"Includes\",\n        items: [\n          \"Build with any Ably product\",\n          \"24/7 mission critical support\",\n          \"99.999% uptime SLAs\",\n          \"Committed use discounts\",\n          \"Datadog\",\n          \"CNAME, SSO, & more\",\n        ],\n        listItemColors: {\n          foreground: \"text-orange-700 dark:text-orange-500\",\n          background: \"text-neutral-100 dark:text-neutral-1200\",\n        },\n      },\n    ],\n    bottomCta: {\n      text: \"See all features\",\n      url: \"#pricing-table\",\n    },\n  },\n];\n\nexport const consumptionData: PricingDataFeature[] = [\n  {\n    title: {\n      content: \"Messages\",\n      className: \"ui-text-h3\",\n      color: \"text-neutral-1300 dark:text-neutral-000\",\n    },\n    description: {\n      content:\n        \"Messages contain the data that a client is communicating, such as the contents of a chat message.\",\n      className: \"ui-text-p3\",\n      color: \"text-neutral-700 dark:text-neutral-600\",\n    },\n    price: { amount: \"$2.50\", content: \"/ million\" },\n    sections: [\n      {\n        title: \"Volume discounts\",\n        items: [\n          [\"Consumption\", \"$ / million msgs\"],\n          [\"First 50 million msgs\", \"$2.50\"],\n          [\"Next 450 million msgs\", \"$2.25\"],\n          [\"Next 4.5 billion msgs\", \"$1.95\"],\n          [\"Next 15 billion msgs\", \"$1.65\"],\n          [\"Next 30 billion msgs\", \"$1.40\"],\n          [\"Over 50 billion msgs\", \"$1.25\"],\n        ],\n      },\n    ],\n    subtext: \"As low as $0.50/M with volume discount\",\n  },\n  {\n    title: {\n      content: \"Channels\",\n      className: \"ui-text-h3\",\n      color: \"text-neutral-1300 dark:text-neutral-000\",\n      tooltip: (\n        <p>\n          We charge you for the amount of time a channel is active in our\n          network by the minute. For example, if ten channels are in use for 45\n          minutes, you will be charged a total of 450 channel minutes.\n        </p>\n      ),\n    },\n    description: {\n      content:\n        \"Channels are used to route messages from publishers to subscribers. Channels are billed by the minute when actively being used by a connected client.\",\n      className: \"ui-text-p3\",\n      color: \"text-neutral-700 dark:text-neutral-600\",\n    },\n    price: { amount: \"$1.00\", content: \"/ million mins\" },\n    sections: [\n      {\n        title: \"Volume discounts\",\n        items: [\n          [\"Consumption\", \"$ / million mins\"],\n          [\"First 10 million mins\", \"$1.00\"],\n          [\"Next 90 million mins\", \"$0.95\"],\n          [\"Next 900 million mins\", \"$0.85\"],\n          [\"Next 4 billion mins\", \"$0.75\"],\n          [\"Next 10 billion mins\", \"$0.65\"],\n          [\"Over 15 billion mins\", \"$0.60\"],\n        ],\n      },\n    ],\n    subtext: \"As low as $0.20/M with volume discount\",\n  },\n  {\n    title: {\n      content: \"Connections\",\n      className: \"ui-text-h3\",\n      color: \"text-neutral-1300 dark:text-neutral-000\",\n      tooltip: (\n        <p>\n          We charge you for the amount of time devices are connected to our\n          network by the minute. For example, if ten devices are each connected\n          for 45 minutes, you will be charged a total of 450 connection minutes.\n        </p>\n      ),\n    },\n    description: {\n      content:\n        \"Clients establish and maintain a connection to the Ably service, typically over WebSockets.\",\n      className: \"ui-text-p3\",\n      color: \"text-neutral-700 dark:text-neutral-600\",\n    },\n    price: { amount: \"$1.00\", content: \"/ million mins\" },\n    sections: [\n      {\n        title: \"Volume discounts\",\n        items: [\n          [\"Consumption\", \"$ / million mins\"],\n          [\"First 10 million mins\", \"$1.00\"],\n          [\"Next 90 million mins\", \"$0.95\"],\n          [\"Next 900 million mins\", \"$0.85\"],\n          [\"Next 4 billion mins\", \"$0.75\"],\n          [\"Next 10 billion mins\", \"$0.65\"],\n          [\"Over 15 billion mins\", \"$0.60\"],\n        ],\n      },\n    ],\n    subtext: \"As low as $0.20/M with volume discount\",\n  },\n];\n"],"names":["React","Tooltip","planData","title","content","className","color","description","price","amount","cta","text","url","iconColor","sections","items","listItemColors","foreground","background","bottomCta","p","style","div","interactive","iconSize","isPriority","consumptionData","subtext","tooltip"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAE1B,QAAOC,YAAa,YAAa,AAEjC,QAAO,MAAMC,SAAiC,CAC5C,CACEC,MAAO,CACLC,QAAS,OACTC,UAAW,kCACXC,MAAO,yCACT,EACAC,YAAa,CACXH,QAAS,4BACTC,UAAW,aACXC,MAAO,wCACT,EACAE,MAAO,CAAEC,OAAQ,IAAK,EACtBC,IAAK,CACHC,KAAM,iBACNC,IAAK,WACLC,UAAW,wCACb,EACAC,SAAU,CACR,CACEX,MAAO,WACPY,MAAO,CACL,6BACA,wBACA,sBACD,AACH,EACA,CACEZ,MAAO,WACPY,MAAO,CACL,8BACA,0CACA,gBACD,CACDC,eAAgB,CACdC,WAAY,yCACZC,WAAY,yCACd,CACF,EACD,CACDC,UAAW,CACTR,KAAM,mBACNC,IAAK,gBACP,CACF,EACA,CACET,MAAO,CACLC,QAAS,WACTC,UAAW,kCACXC,MAAO,yCACT,EACAC,YAAa,CACXH,QAAS,4BACTC,UAAW,aACXC,MAAO,wCACT,EACAE,MAAO,CACLC,OAAQ,MACRL,QACE,wCACE,oBAACgB,KACCf,UAAU,yBACVgB,MAAO,CAAEf,MAAO,cAAe,GAChC,WAGD,oBAACgB,OAAIjB,UAAU,cACb,oBAACe,KAAEf,UAAU,oEAAmE,WAGhF,oBAACJ,SAAQsB,YAAa,KAAMC,SAAS,WAAU,iKAQvD,EACAd,IAAK,CACHC,KAAM,cACNC,IAAK,uCACLC,UAAW,wCACb,EACAC,SAAU,CACR,CACEX,MAAO,WACPY,MAAO,CACL,0BACA,6BACA,yBACD,AACH,EACA,CACEZ,MAAO,WACPY,MAAO,CACL,8BACA,0BACA,aACD,CACDC,eAAgB,CACdC,WAAY,yCACZC,WAAY,yCACd,CACF,EACD,CACDC,UAAW,CACTR,KAAM,mBACNC,IAAK,gBACP,CACF,EACA,CACET,MAAO,CACLC,QAAS,MACTC,UAAW,kCACXC,MAAO,yCACT,EACAC,YAAa,CACXH,QAAS,qCACTC,UAAW,aACXC,MAAO,wCACT,EACAE,MAAO,CACLC,OAAQ,OACRL,QACE,wCACE,oBAACgB,KACCf,UAAU,yBACV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"}
+{"version":3,"sources":["../../../src/core/Pricing/data.tsx"],"sourcesContent":["import React from \"react\";\nimport { PricingDataFeature } from \"./types\";\nimport Tooltip from \"../Tooltip\";\n\nexport const planData: PricingDataFeature[] = [\n  {\n    title: {\n      content: \"Free\",\n      className: \"ui-text-h4 tracking-[-0.002rem]\",\n      color: \"text-neutral-1300 dark:text-neutral-000\",\n    },\n    description: {\n      content: \"Build a proof of concept.\",\n      className: \"ui-text-p3\",\n      color: \"text-neutral-700 dark:text-neutral-600\",\n    },\n    price: { amount: \"$0\" },\n    cta: {\n      text: \"Start for free\",\n      url: \"/sign-up\",\n      iconColor: \"text-neutral-600 dark:text-neutral-700\",\n    },\n    sections: [\n      {\n        title: \"Capacity\",\n        items: [\n          \"200 concurrent connections\",\n          \"500 messages / second\",\n          \"6M messages / month\",\n        ],\n      },\n      {\n        title: \"Includes\",\n        items: [\n          \"Build with any Ably product\",\n          \"Community & email support (best effort)\",\n          \"No commitment\",\n        ],\n        listItemColors: {\n          foreground: \"text-neutral-700 dark:text-neutral-600\",\n          background: \"text-neutral-100 dark:text-neutral-1200\",\n        },\n      },\n    ],\n    bottomCta: {\n      text: \"See all features\",\n      url: \"#pricing-table\",\n    },\n  },\n  {\n    title: {\n      content: \"Standard\",\n      className: \"ui-text-h4 tracking-[-0.002rem]\",\n      color: \"text-neutral-1300 dark:text-neutral-000\",\n    },\n    description: {\n      content: \"Roll-out into production.\",\n      className: \"ui-text-p3\",\n      color: \"text-neutral-700 dark:text-neutral-600\",\n    },\n    price: {\n      amount: \"$29\",\n      content: (\n        <>\n          <p\n            className=\"ui-text-p3 font-medium\"\n            style={{ color: \"currentColor\" }}\n          >\n            / month\n          </p>\n          <div className=\"flex -mt-1\">\n            <p className=\"ui-text-p3 font-bold text-gui-blue-default-dark leading-[1.4rem]\">\n              + usage\n            </p>\n            <Tooltip interactive={true} iconSize=\"1.25rem\">\n              Usage is billed on top of your plan. You&apos;ll be charged\n              monthly based on how many messages, channel minutes, and\n              connection minutes you use. See rates above.\n            </Tooltip>\n          </div>\n        </>\n      ),\n    },\n    cta: {\n      text: \"Get started\",\n      url: \"/sign-up?next=package\",\n      iconColor: \"text-neutral-600 dark:text-neutral-700\",\n    },\n    sections: [\n      {\n        title: \"Capacity\",\n        items: [\n          \"10k concurrent channels\",\n          \"10k concurrent connections\",\n          \"2.5k messages / second\",\n        ],\n      },\n      {\n        title: \"Includes\",\n        items: [\n          \"Build with any Ably product\",\n          \"1 day email support SLA\",\n          \"Uptime SLO\",\n        ],\n        listItemColors: {\n          foreground: \"text-neutral-700 dark:text-neutral-600\",\n          background: \"text-neutral-100 dark:text-neutral-1200\",\n        },\n      },\n    ],\n    bottomCta: {\n      text: \"See all features\",\n      url: \"#pricing-table\",\n    },\n  },\n  {\n    title: {\n      content: \"Pro\",\n      className: \"ui-text-h4 tracking-[-0.002rem]\",\n      color: \"text-neutral-1300 dark:text-neutral-000\",\n    },\n    description: {\n      content: \"Scale business critical workloads.\",\n      className: \"ui-text-p3\",\n      color: \"text-neutral-700 dark:text-neutral-600\",\n    },\n    price: {\n      amount: \"$399\",\n      content: (\n        <>\n          <p\n            className=\"ui-text-p3 font-medium\"\n            style={{ color: \"currentColor\" }}\n          >\n            / month\n          </p>\n          <div className=\"flex -mt-1\">\n            <p className=\"ui-text-p3 font-bold text-gui-blue-default-dark leading-[1.4rem]\">\n              + usage\n            </p>\n            <Tooltip interactive={true} iconSize=\"1.25rem\">\n              Usage is billed on top of your plan. You&apos;ll be charged\n              monthly based on how many messages, channel minutes, and\n              connection minutes you use. See rates above.\n            </Tooltip>\n          </div>\n        </>\n      ),\n    },\n    cta: {\n      text: \"Get started\",\n      url: \"/sign-up?next=package\",\n      iconColor: \"text-neutral-600 dark:text-neutral-700\",\n    },\n    sections: [\n      {\n        title: \"Capacity\",\n        items: [\n          \"50k concurrent channels\",\n          \"50k concurrent connections\",\n          \"10k messages / second\",\n        ],\n      },\n      {\n        title: \"Includes\",\n        items: [\n          \"Build with any Ably product\",\n          \"4 hour email support SLA\",\n          \"Datadog (lite)\",\n          \"Uptime SLO\",\n        ],\n        listItemColors: {\n          foreground: \"text-neutral-700 dark:text-neutral-600\",\n          background: \"text-neutral-100 dark:text-neutral-1200\",\n        },\n      },\n    ],\n    bottomCta: {\n      text: \"See all features\",\n      url: \"#pricing-table\",\n    },\n  },\n\n  {\n    title: {\n      content: \"Enterprise\",\n      className: \"ui-text-h4 tracking-[-0.002rem]\",\n      color: \"text-orange-600\",\n    },\n    description: {\n      content: \"Serious workloads without limits.\",\n      className: \"ui-text-p3\",\n      color: \"text-neutral-700 dark:text-neutral-600\",\n    },\n    price: { amount: \"Custom\" },\n    cta: {\n      text: \"Contact us\",\n      url: \"/contact\",\n      isPriority: true,\n    },\n    sections: [\n      {\n        title: \"Capacity\",\n        items: [\n          \"Unlimited concurrent channels\",\n          \"Unlimited connections\",\n          \"Unlimited messages / second\",\n        ],\n      },\n      {\n        title: \"Includes\",\n        items: [\n          \"Build with any Ably product\",\n          \"24/7 mission critical support\",\n          \"99.999% uptime SLAs\",\n          \"Committed use discounts\",\n          \"Datadog\",\n          \"CNAME, SSO, & more\",\n        ],\n        listItemColors: {\n          foreground: \"text-orange-700 dark:text-orange-500\",\n          background: \"text-neutral-100 dark:text-neutral-1200\",\n        },\n      },\n    ],\n    bottomCta: {\n      text: \"See all features\",\n      url: \"#pricing-table\",\n    },\n  },\n];\n\nexport const consumptionData: PricingDataFeature[] = [\n  {\n    title: {\n      content: \"Messages\",\n      className: \"ui-text-h3\",\n      color: \"text-neutral-1300 dark:text-neutral-000\",\n    },\n    description: {\n      content:\n        \"Messages contain the data that a client is communicating, such as the contents of a chat message.\",\n      className: \"ui-text-p3\",\n      color: \"text-neutral-700 dark:text-neutral-600\",\n    },\n    price: { amount: \"$2.50\", content: \"/ million\" },\n    sections: [\n      {\n        title: \"Volume discounts\",\n        items: [\n          [\"Consumption\", \"$ / million msgs\"],\n          [\"First 50 million msgs\", \"$2.50\"],\n          [\"Next 450 million msgs\", \"$2.25\"],\n          [\"Next 4.5 billion msgs\", \"$1.95\"],\n          [\"Next 15 billion msgs\", \"$1.65\"],\n          [\"Next 30 billion msgs\", \"$1.40\"],\n          [\"Over 50 billion msgs\", \"$1.25\"],\n        ],\n      },\n    ],\n    subtext: \"As low as $0.50/M with volume discount\",\n  },\n  {\n    title: {\n      content: \"Channels\",\n      className: \"ui-text-h3\",\n      color: \"text-neutral-1300 dark:text-neutral-000\",\n      tooltip: (\n        <p>\n          We charge you for the amount of time a channel is active in our\n          network by the minute. For example, if ten channels are in use for 45\n          minutes, you will be charged a total of 450 channel minutes.\n        </p>\n      ),\n    },\n    description: {\n      content:\n        \"Channels are used to route messages from publishers to subscribers. Channels are billed by the minute when actively being used by a connected client.\",\n      className: \"ui-text-p3\",\n      color: \"text-neutral-700 dark:text-neutral-600\",\n    },\n    price: { amount: \"$1.00\", content: \"/ million mins\" },\n    sections: [\n      {\n        title: \"Volume discounts\",\n        items: [\n          [\"Consumption\", \"$ / million mins\"],\n          [\"First 10 million mins\", \"$1.00\"],\n          [\"Next 90 million mins\", \"$0.95\"],\n          [\"Next 900 million mins\", \"$0.85\"],\n          [\"Next 4 billion mins\", \"$0.75\"],\n          [\"Next 10 billion mins\", \"$0.65\"],\n          [\"Over 15 billion mins\", \"$0.60\"],\n        ],\n      },\n    ],\n    subtext: \"As low as $0.20/M with volume discount\",\n  },\n  {\n    title: {\n      content: \"Connections\",\n      className: \"ui-text-h3\",\n      color: \"text-neutral-1300 dark:text-neutral-000\",\n      tooltip: (\n        <p>\n          We charge you for the amount of time devices are connected to our\n          network by the minute. For example, if ten devices are each connected\n          for 45 minutes, you will be charged a total of 450 connection minutes.\n        </p>\n      ),\n    },\n    description: {\n      content:\n        \"Clients establish and maintain a connection to the Ably service, typically over WebSockets.\",\n      className: \"ui-text-p3\",\n      color: \"text-neutral-700 dark:text-neutral-600\",\n    },\n    price: { amount: \"$1.00\", content: \"/ million mins\" },\n    sections: [\n      {\n        title: \"Volume discounts\",\n        items: [\n          [\"Consumption\", \"$ / million mins\"],\n          [\"First 10 million mins\", \"$1.00\"],\n          [\"Next 90 million mins\", \"$0.95\"],\n          [\"Next 900 million mins\", \"$0.85\"],\n          [\"Next 4 billion mins\", \"$0.75\"],\n          [\"Next 10 billion mins\", \"$0.65\"],\n          [\"Over 15 billion mins\", \"$0.60\"],\n        ],\n      },\n    ],\n    subtext: \"As low as $0.20/M with volume discount\",\n  },\n];\n"],"names":["React","Tooltip","planData","title","content","className","color","description","price","amount","cta","text","url","iconColor","sections","items","listItemColors","foreground","background","bottomCta","p","style","div","interactive","iconSize","isPriority","consumptionData","subtext","tooltip"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAE1B,QAAOC,YAAa,YAAa,AAEjC,QAAO,MAAMC,SAAiC,CAC5C,CACEC,MAAO,CACLC,QAAS,OACTC,UAAW,kCACXC,MAAO,yCACT,EACAC,YAAa,CACXH,QAAS,4BACTC,UAAW,aACXC,MAAO,wCACT,EACAE,MAAO,CAAEC,OAAQ,IAAK,EACtBC,IAAK,CACHC,KAAM,iBACNC,IAAK,WACLC,UAAW,wCACb,EACAC,SAAU,CACR,CACEX,MAAO,WACPY,MAAO,CACL,6BACA,wBACA,sBACD,AACH,EACA,CACEZ,MAAO,WACPY,MAAO,CACL,8BACA,0CACA,gBACD,CACDC,eAAgB,CACdC,WAAY,yCACZC,WAAY,yCACd,CACF,EACD,CACDC,UAAW,CACTR,KAAM,mBACNC,IAAK,gBACP,CACF,EACA,CACET,MAAO,CACLC,QAAS,WACTC,UAAW,kCACXC,MAAO,yCACT,EACAC,YAAa,CACXH,QAAS,4BACTC,UAAW,aACXC,MAAO,wCACT,EACAE,MAAO,CACLC,OAAQ,MACRL,QACE,wCACE,oBAACgB,KACCf,UAAU,yBACVgB,MAAO,CAAEf,MAAO,cAAe,GAChC,WAGD,oBAACgB,OAAIjB,UAAU,cACb,oBAACe,KAAEf,UAAU,oEAAmE,WAGhF,oBAACJ,SAAQsB,YAAa,KAAMC,SAAS,WAAU,iKAQvD,EACAd,IAAK,CACHC,KAAM,cACNC,IAAK,wBACLC,UAAW,wCACb,EACAC,SAAU,CACR,CACEX,MAAO,WACPY,MAAO,CACL,0BACA,6BACA,yBACD,AACH,EACA,CACEZ,MAAO,WACPY,MAAO,CACL,8BACA,0BACA,aACD,CACDC,eAAgB,CACdC,WAAY,yCACZC,WAAY,yCACd,CACF,EACD,CACDC,UAAW,CACTR,KAAM,mBACNC,IAAK,gBACP,CACF,EACA,CACET,MAAO,CACLC,QAAS,MACTC,UAAW,kCACXC,MAAO,yCACT,EACAC,YAAa,CACXH,QAAS,qCACTC,UAAW,aACXC,MAAO,wCACT,EACAE,MAAO,CACLC,OAAQ,OACRL,QACE,wCACE,oBAACgB,KACCf,UAAU,yBACV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"}

package/core/Pricing/data.test.js

@@ -0,0 +1,2 @@
+import{describe,expect,it}from"vitest";import{planData}from"./data";const PAID_SIGNUP_URL="/sign-up?next=package";describe("paid plan CTAs",()=>{const paidCtaUrls=planData.filter(plan=>plan.cta?.text==="Get started").map(plan=>plan.cta?.url);it("sends the paid plans to signup rather than the retired payment form",()=>{expect(paidCtaUrls).toEqual([PAID_SIGNUP_URL,PAID_SIGNUP_URL])});it("leaves no route to the retired signup-and-payment form",()=>{const allUrls=planData.map(plan=>plan.cta?.url);expect(allUrls.filter(url=>url?.includes("paid_sign_up"))).toEqual([])})});
+//# sourceMappingURL=data.test.js.map

package/core/Pricing/data.test.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/core/Pricing/data.test.ts"],"sourcesContent":["import { describe, expect, it } from \"vitest\";\n\nimport { planData } from \"./data\";\n\nconst PAID_SIGNUP_URL = \"/sign-up?next=package\";\n\ndescribe(\"paid plan CTAs\", () => {\n  const paidCtaUrls = planData\n    .filter((plan) => plan.cta?.text === \"Get started\")\n    .map((plan) => plan.cta?.url);\n\n  it(\"sends the paid plans to signup rather than the retired payment form\", () => {\n    expect(paidCtaUrls).toEqual([PAID_SIGNUP_URL, PAID_SIGNUP_URL]);\n  });\n\n  it(\"leaves no route to the retired signup-and-payment form\", () => {\n    const allUrls = planData.map((plan) => plan.cta?.url);\n    expect(allUrls.filter((url) => url?.includes(\"paid_sign_up\"))).toEqual([]);\n  });\n});\n"],"names":["describe","expect","it","planData","PAID_SIGNUP_URL","paidCtaUrls","filter","plan","cta","text","map","url","toEqual","allUrls","includes"],"mappings":"AAAA,OAASA,QAAQ,CAAEC,MAAM,CAAEC,EAAE,KAAQ,QAAS,AAE9C,QAASC,QAAQ,KAAQ,QAAS,CAElC,MAAMC,gBAAkB,wBAExBJ,SAAS,iBAAkB,KACzB,MAAMK,YAAcF,SACjBG,MAAM,CAAC,AAACC,MAASA,KAAKC,GAAG,EAAEC,OAAS,eACpCC,GAAG,CAAC,AAACH,MAASA,KAAKC,GAAG,EAAEG,KAE3BT,GAAG,sEAAuE,KACxED,OAAOI,aAAaO,OAAO,CAAC,CAACR,gBAAiBA,gBAAgB,CAChE,GAEAF,GAAG,yDAA0D,KAC3D,MAAMW,QAAUV,SAASO,GAAG,CAAC,AAACH,MAASA,KAAKC,GAAG,EAAEG,KACjDV,OAAOY,QAAQP,MAAM,CAAC,AAACK,KAAQA,KAAKG,SAAS,kBAAkBF,OAAO,CAAC,EAAE,CAC3E,EACF"}

package/core/SessionData.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/core/SessionData.tsx"],"sourcesContent":["import React, {\n  createContext,\n  useContext,\n  PropsWithChildren,\n  useMemo,\n} from \"react\";\nimport useSWR from \"swr\";\n\n// Feature flag for enabling credentials in fetch requests\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\ndeclare const __ENABLE_FETCH_WITH_CREDENTIALS__: boolean | undefined;\n\ntype SessionUser = {\n  firstName?: string;\n  lastName?: string;\n  email?: string;\n};\n\ntype SessionData = {\n  user?: SessionUser;\n} | null;\n\ntype SessionDataContextType = {\n  sessionData: SessionData;\n  isLoading: boolean;\n  error: Error | undefined;\n};\n\nconst SessionDataContext = createContext<SessionDataContextType | undefined>(\n  undefined,\n);\n\ntype SessionDataProviderProps = PropsWithChildren<{\n  sessionDataUrl?: string;\n}>;\n\n/**\n * fetcher - Retrieves session data from a backend API endpoint.\n *\n * Makes a JSON request to fetch current user session information. Optionally includes\n * credentials (cookies) based on the __ENABLE_FETCH_WITH_CREDENTIALS__ feature flag.\n * Handles \"not-found\" responses gracefully by returning null instead of throwing.\n * Validates response is JSON to prevent parsing errors.\n */\nconst fetcher = async (url: string): Promise<SessionData> => {\n  const options: RequestInit = {\n    headers: {\n      accept: \"application/json\",\n    },\n    cache: \"no-cache\",\n  };\n\n  // Check if credentials should be included (feature flag)\n  if (\n    typeof __ENABLE_FETCH_WITH_CREDENTIALS__ !== \"undefined\" &&\n    __ENABLE_FETCH_WITH_CREDENTIALS__\n  ) {\n    options.credentials = \"include\";\n  }\n\n  const res = await fetch(url, options);\n\n  if (!res.ok) {\n    throw new Error(\"Failed to fetch session data\");\n  }\n\n  const contentType = res.headers.get(\"content-type\");\n  if (!contentType?.includes(\"application/json\")) {\n    throw new Error(\"Session endpoint is not serving json\");\n  }\n\n  const data = await res.json();\n\n  // Handle \"not found\" error gracefully\n  if (data.error === \"not-found\") {\n    return null;\n  }\n\n  return data;\n};\n\nconst SESSION_SWR_OPTIONS = {\n  revalidateOnFocus: false,\n  revalidateOnReconnect: false,\n  shouldRetryOnError: false,\n  onError: (err: Error) => {\n    console.warn(\"Could not fetch session data due to error:\", err);\n  },\n};\n\n/**\n * SessionDataProvider - Context provider for managing user session data throughout the app.\n *\n * Fetches and caches session data using SWR (stale-while-revalidate) from the provided URL.\n * Exposes session data, loading state, and errors through context. Use this at the app root\n * level and access via useSessionData() hook in child components. Disables auto-revalidation\n * to avoid excessive network requests - session data is fetched once on mount.\n */\nexport const SessionDataProvider = ({\n  children,\n  sessionDataUrl,\n}: SessionDataProviderProps) => {\n  const { data, error, isLoading } = useSWR<SessionData>(\n    sessionDataUrl || null,\n    fetcher,\n    SESSION_SWR_OPTIONS,\n  );\n\n  const contextValue = useMemo(\n    () => ({\n      sessionData: data ?? null,\n      isLoading,\n      error,\n    }),\n    [data, isLoading, error],\n  );\n\n  return (\n    <SessionDataContext.Provider value={contextValue}>\n      {children}\n    </SessionDataContext.Provider>\n  );\n};\n\n/**\n * useSessionData - Hook to access session data from SessionDataProvider context.\n *\n * Returns the current user session data, loading state, and any errors from the provider.\n * Must be used within a SessionDataProvider or will throw an error. Use this hook in\n * components that need to read or display user session information.\n */\nexport const useSessionData = () => {\n  const context = useContext(SessionDataContext);\n  if (context === undefined) {\n    throw new Error(\"useSessionData must be used within SessionDataProvider\");\n  }\n  return context;\n};\n\n/**\n * useSessionDataDirect - Direct session data hook without requiring a provider (legacy).\n *\n * Fetches session data using SWR directly, bypassing the context provider pattern.\n * Provided for backward compatibility with code that doesn't use SessionDataProvider.\n * For new code, prefer using SessionDataProvider + useSessionData() for better\n * performance and centralized session management.\n */\nexport const useSessionDataDirect = (sessionDataUrl?: string) => {\n  const { data, error, isLoading } = useSWR<SessionData>(\n    sessionDataUrl || null,\n    fetcher,\n    SESSION_SWR_OPTIONS,\n  );\n\n  return {\n    sessionData: data ?? null,\n    isLoading,\n    error,\n  };\n};\n"],"names":["React","createContext","useContext","useMemo","useSWR","SessionDataContext","undefined","fetcher","url","options","headers","accept","cache","credentials","res","fetch","ok","Error","contentType","get","includes","data","json","error","SESSION_SWR_OPTIONS","revalidateOnFocus","revalidateOnReconnect","shouldRetryOnError","onError","err","console","warn","SessionDataProvider","children","sessionDataUrl","isLoading","contextValue","sessionData","Provider","value","useSessionData","context","useSessionDataDirect"],"mappings":"AAAA,OAAOA,OACLC,aAAa,CACbC,UAAU,CAEVC,OAAO,KACF,OAAQ,AACf,QAAOC,WAAY,KAAM,CAsBzB,MAAMC,mBAAqBJ,cACzBK,WAeF,MAAMC,QAAU,MAAOC,MACrB,MAAMC,QAAuB,CAC3BC,QAAS,CACPC,OAAQ,kBACV,EACAC,MAAO,UACT,EAGA,GACE,OAgGD,QAhG8C,aAgG9C,MA9FC,CACAH,QAAQI,WAAW,CAAG,SACxB,CAEA,MAAMC,IAAM,MAAMC,MAAMP,IAAKC,SAE7B,GAAI,CAACK,IAAIE,EAAE,CAAE,CACX,MAAM,IAAIC,MAAM,+BAClB,CAEA,MAAMC,YAAcJ,IAAIJ,OAAO,CAACS,GAAG,CAAC,gBACpC,GAAI,CAACD,aAAaE,SAAS,oBAAqB,CAC9C,MAAM,IAAIH,MAAM,uCAClB,CAEA,MAAMI,KAAO,MAAMP,IAAIQ,IAAI,GAG3B,GAAID,KAAKE,KAAK,GAAK,YAAa,CAC9B,OAAO,IACT,CAEA,OAAOF,IACT,EAEA,MAAMG,oBAAsB,CAC1BC,kBAAmB,MACnBC,sBAAuB,MACvBC,mBAAoB,MACpBC,QAAS,AAACC,MACRC,QAAQC,IAAI,CAAC,6CAA8CF,IAC7D,CACF,CAUA,QAAO,MAAMG,oBAAsB,CAAC,CAClCC,QAAQ,CACRC,cAAc,CACW,IACzB,KAAM,CAAEb,IAAI,CAAEE,KAAK,CAAEY,SAAS,CAAE,CAAG/B,OACjC8B,gBAAkB,KAClB3B,QACAiB,qBAGF,MAAMY,aAAejC,QACnB,IAAO,CAAA,CACLkC,YAAahB,MAAQ,KACrBc,UACAZ,KACF,CAAA,EACA,CAACF,KAAMc,UAAWZ,MAAM,EAG1B,OACE,oBAAClB,mBAAmBiC,QAAQ,EAACC,MAAOH,cACjCH,SAGP,CAAE,AASF,QAAO,MAAMO,eAAiB,KAC5B,MAAMC,QAAUvC,WAAWG,oBAC3B,GAAIoC,UAAYnC,UAAW,CACzB,MAAM,IAAIW,MAAM,yDAClB,CACA,OAAOwB,OACT,CAAE,AAUF,QAAO,MAAMC,qBAAuB,AAACR,iBACnC,KAAM,CAAEb,IAAI,CAAEE,KAAK,CAAEY,SAAS,CAAE,CAAG/B,OACjC8B,gBAAkB,KAClB3B,QACAiB,qBAGF,MAAO,CACLa,YAAahB,MAAQ,KACrBc,UACAZ,KACF,CACF,CAAE"}
+{"version":3,"sources":["../../src/core/SessionData.tsx"],"sourcesContent":["import React, {\n  createContext,\n  useContext,\n  PropsWithChildren,\n  useMemo,\n} from \"react\";\nimport useSWR from \"swr\";\n\n// Feature flag for enabling credentials in fetch requests\ndeclare const __ENABLE_FETCH_WITH_CREDENTIALS__: boolean | undefined;\n\ntype SessionUser = {\n  firstName?: string;\n  lastName?: string;\n  email?: string;\n};\n\ntype SessionData = {\n  user?: SessionUser;\n} | null;\n\ntype SessionDataContextType = {\n  sessionData: SessionData;\n  isLoading: boolean;\n  error: Error | undefined;\n};\n\nconst SessionDataContext = createContext<SessionDataContextType | undefined>(\n  undefined,\n);\n\ntype SessionDataProviderProps = PropsWithChildren<{\n  sessionDataUrl?: string;\n}>;\n\n/**\n * fetcher - Retrieves session data from a backend API endpoint.\n *\n * Makes a JSON request to fetch current user session information. Optionally includes\n * credentials (cookies) based on the __ENABLE_FETCH_WITH_CREDENTIALS__ feature flag.\n * Handles \"not-found\" responses gracefully by returning null instead of throwing.\n * Validates response is JSON to prevent parsing errors.\n */\nconst fetcher = async (url: string): Promise<SessionData> => {\n  const options: RequestInit = {\n    headers: {\n      accept: \"application/json\",\n    },\n    cache: \"no-cache\",\n  };\n\n  // Check if credentials should be included (feature flag)\n  if (\n    typeof __ENABLE_FETCH_WITH_CREDENTIALS__ !== \"undefined\" &&\n    __ENABLE_FETCH_WITH_CREDENTIALS__\n  ) {\n    options.credentials = \"include\";\n  }\n\n  const res = await fetch(url, options);\n\n  if (!res.ok) {\n    throw new Error(\"Failed to fetch session data\");\n  }\n\n  const contentType = res.headers.get(\"content-type\");\n  if (!contentType?.includes(\"application/json\")) {\n    throw new Error(\"Session endpoint is not serving json\");\n  }\n\n  const data = await res.json();\n\n  // Handle \"not found\" error gracefully\n  if (data.error === \"not-found\") {\n    return null;\n  }\n\n  return data;\n};\n\nconst SESSION_SWR_OPTIONS = {\n  revalidateOnFocus: false,\n  revalidateOnReconnect: false,\n  shouldRetryOnError: false,\n  onError: (err: Error) => {\n    console.warn(\"Could not fetch session data due to error:\", err);\n  },\n};\n\n/**\n * SessionDataProvider - Context provider for managing user session data throughout the app.\n *\n * Fetches and caches session data using SWR (stale-while-revalidate) from the provided URL.\n * Exposes session data, loading state, and errors through context. Use this at the app root\n * level and access via useSessionData() hook in child components. Disables auto-revalidation\n * to avoid excessive network requests - session data is fetched once on mount.\n */\nexport const SessionDataProvider = ({\n  children,\n  sessionDataUrl,\n}: SessionDataProviderProps) => {\n  const { data, error, isLoading } = useSWR<SessionData>(\n    sessionDataUrl || null,\n    fetcher,\n    SESSION_SWR_OPTIONS,\n  );\n\n  const contextValue = useMemo(\n    () => ({\n      sessionData: data ?? null,\n      isLoading,\n      error,\n    }),\n    [data, isLoading, error],\n  );\n\n  return (\n    <SessionDataContext.Provider value={contextValue}>\n      {children}\n    </SessionDataContext.Provider>\n  );\n};\n\n/**\n * useSessionData - Hook to access session data from SessionDataProvider context.\n *\n * Returns the current user session data, loading state, and any errors from the provider.\n * Must be used within a SessionDataProvider or will throw an error. Use this hook in\n * components that need to read or display user session information.\n */\nexport const useSessionData = () => {\n  const context = useContext(SessionDataContext);\n  if (context === undefined) {\n    throw new Error(\"useSessionData must be used within SessionDataProvider\");\n  }\n  return context;\n};\n\n/**\n * useSessionDataDirect - Direct session data hook without requiring a provider (legacy).\n *\n * Fetches session data using SWR directly, bypassing the context provider pattern.\n * Provided for backward compatibility with code that doesn't use SessionDataProvider.\n * For new code, prefer using SessionDataProvider + useSessionData() for better\n * performance and centralized session management.\n */\nexport const useSessionDataDirect = (sessionDataUrl?: string) => {\n  const { data, error, isLoading } = useSWR<SessionData>(\n    sessionDataUrl || null,\n    fetcher,\n    SESSION_SWR_OPTIONS,\n  );\n\n  return {\n    sessionData: data ?? null,\n    isLoading,\n    error,\n  };\n};\n"],"names":["React","createContext","useContext","useMemo","useSWR","SessionDataContext","undefined","fetcher","url","options","headers","accept","cache","credentials","res","fetch","ok","Error","contentType","get","includes","data","json","error","SESSION_SWR_OPTIONS","revalidateOnFocus","revalidateOnReconnect","shouldRetryOnError","onError","err","console","warn","SessionDataProvider","children","sessionDataUrl","isLoading","contextValue","sessionData","Provider","value","useSessionData","context","useSessionDataDirect"],"mappings":"AAAA,OAAOA,OACLC,aAAa,CACbC,UAAU,CAEVC,OAAO,KACF,OAAQ,AACf,QAAOC,WAAY,KAAM,CAqBzB,MAAMC,mBAAqBJ,cACzBK,WAeF,MAAMC,QAAU,MAAOC,MACrB,MAAMC,QAAuB,CAC3BC,QAAS,CACPC,OAAQ,kBACV,EACAC,MAAO,UACT,EAGA,GACE,OAqGM,QArGuC,aAqGvC,MAnGN,CACAH,QAAQI,WAAW,CAAG,SACxB,CAEA,MAAMC,IAAM,MAAMC,MAAMP,IAAKC,SAE7B,GAAI,CAACK,IAAIE,EAAE,CAAE,CACX,MAAM,IAAIC,MAAM,+BAClB,CAEA,MAAMC,YAAcJ,IAAIJ,OAAO,CAACS,GAAG,CAAC,gBACpC,GAAI,CAACD,aAAaE,SAAS,oBAAqB,CAC9C,MAAM,IAAIH,MAAM,uCAClB,CAEA,MAAMI,KAAO,MAAMP,IAAIQ,IAAI,GAG3B,GAAID,KAAKE,KAAK,GAAK,YAAa,CAC9B,OAAO,IACT,CAEA,OAAOF,IACT,EAEA,MAAMG,oBAAsB,CAC1BC,kBAAmB,MACnBC,sBAAuB,MACvBC,mBAAoB,MACpBC,QAAS,AAACC,MACRC,QAAQC,IAAI,CAAC,6CAA8CF,IAC7D,CACF,CAUA,QAAO,MAAMG,oBAAsB,CAAC,CAClCC,QAAQ,CACRC,cAAc,CACW,IACzB,KAAM,CAAEb,IAAI,CAAEE,KAAK,CAAEY,SAAS,CAAE,CAAG/B,OACjC8B,gBAAkB,KAClB3B,QACAiB,qBAGF,MAAMY,aAAejC,QACnB,IAAO,CAAA,CACLkC,YAAahB,MAAQ,KACrBc,UACAZ,KACF,CAAA,EACA,CAACF,KAAMc,UAAWZ,MAAM,EAG1B,OACE,oBAAClB,mBAAmBiC,QAAQ,EAACC,MAAOH,cACjCH,SAGP,CAAE,AASF,QAAO,MAAMO,eAAiB,KAC5B,MAAMC,QAAUvC,WAAWG,oBAC3B,GAAIoC,UAAYnC,UAAW,CACzB,MAAM,IAAIW,MAAM,yDAClB,CACA,OAAOwB,OACT,CAAE,AAUF,QAAO,MAAMC,qBAAuB,AAACR,iBACnC,KAAM,CAAEb,IAAI,CAAEE,KAAK,CAAEY,SAAS,CAAE,CAAG/B,OACjC8B,gBAAkB,KAClB3B,QACAiB,qBAGF,MAAO,CACLa,YAAahB,MAAQ,KACrBc,UACAZ,KACF,CACF,CAAE"}

package/core/hooks/use-themed-scrollpoints.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/core/hooks/use-themed-scrollpoints.ts"],"sourcesContent":["import { useState, useEffect, useRef } from \"react\";\nimport { ThemedScrollpoint } from \"../Header/types\";\n\nconst HEADER_HEIGHT = 64;\n\nexport function useThemedScrollpoints(\n  scrollpoints: ThemedScrollpoint[],\n): string {\n  const [activeClassName, setActiveClassName] = useState<string>(\"\");\n\n  const previousClassNameRef = useRef<string>(\"\");\n  const observerRef = useRef<IntersectionObserver | null>(null);\n  const initialCheckDoneRef = useRef<boolean>(false);\n  const rafIdRef = useRef<number | null>(null);\n  const intersectingElementsRef = useRef<\n    Map<string, IntersectionObserverEntry>\n  >(new Map());\n\n  useEffect(() => {\n    if (scrollpoints.length === 0) {\n      // Clear active className when scrollpoints becomes empty\n      // eslint-disable-next-line react-hooks/set-state-in-effect\n      setActiveClassName(\"\");\n      previousClassNameRef.current = \"\";\n      return;\n    }\n\n    let isMounted = true;\n    const intersectingElements = intersectingElementsRef.current;\n\n    // Function to find and update the best matching scrollpoint\n    const updateBestMatch = (useEntryRects = false) => {\n      // Find the best match from ALL currently intersecting elements\n      // Strategy: Pick the element whose top edge is closest to the header position\n      // Use scrollpoints array order as tiebreaker when distances are equal\n      let bestMatch: {\n        scrollpoint: ThemedScrollpoint;\n        distance: number;\n        index: number;\n      } | null = null;\n\n      for (const [id, entry] of intersectingElements) {\n        const scrollpointIndex = scrollpoints.findIndex((sp) => sp.id === id);\n        if (scrollpointIndex === -1) continue;\n\n        const scrollpoint = scrollpoints[scrollpointIndex];\n\n        // For observer callbacks, use entry.boundingClientRect (for test compatibility)\n        // For scroll handler, get fresh position data\n        const rect = useEntryRects\n          ? (entry.boundingClientRect ?? entry.target.getBoundingClientRect())\n          : entry.target.getBoundingClientRect();\n\n        // Only consider elements at or past the header line\n        // This prevents selecting elements that are marked as \"intersecting\" by rootMargin\n        // but haven't actually reached the header position yet\n        if (rect.top > HEADER_HEIGHT) continue;\n\n        // Calculate distance from element's top edge to header position\n        const distance = Math.abs(rect.top - HEADER_HEIGHT);\n\n        // Pick element with smallest distance; if equal, pick earlier in scrollpoints array\n        if (\n          !bestMatch ||\n          distance < bestMatch.distance ||\n          (distance === bestMatch.distance &&\n            scrollpointIndex < bestMatch.index)\n        ) {\n          bestMatch = { scrollpoint, distance, index: scrollpointIndex };\n        }\n      }\n\n      if (\n        bestMatch &&\n        bestMatch.scrollpoint.className !== previousClassNameRef.current\n      ) {\n        previousClassNameRef.current = bestMatch.scrollpoint.className;\n        setActiveClassName(bestMatch.scrollpoint.className);\n      }\n    };\n\n    observerRef.current = new IntersectionObserver(\n      (entries) => {\n        // Update the map of currently intersecting elements\n        for (const entry of entries) {\n          const id = (entry.target as HTMLElement).id;\n          if (entry.isIntersecting) {\n            intersectingElements.set(id, entry);\n          } else {\n            intersectingElements.delete(id);\n          }\n        }\n\n        // Schedule best match calculation using entry rects\n        if (rafIdRef.current !== null) {\n          cancelAnimationFrame(rafIdRef.current);\n        }\n\n        rafIdRef.current = requestAnimationFrame(() => {\n          rafIdRef.current = null;\n          if (!isMounted) return;\n          updateBestMatch(true); // Use entry.boundingClientRect\n        });\n      },\n      {\n        rootMargin: `-${HEADER_HEIGHT}px 0px 0px 0px`,\n        threshold: 0,\n      },\n    );\n\n    // Lightweight scroll handler to re-evaluate on scroll (gets fresh position data)\n    const handleScroll = () => {\n      if (rafIdRef.current !== null) {\n        cancelAnimationFrame(rafIdRef.current);\n      }\n\n      rafIdRef.current = requestAnimationFrame(() => {\n        rafIdRef.current = null;\n        if (!isMounted) return;\n        updateBestMatch(false); // Get fresh position data\n      });\n    };\n\n    window.addEventListener(\"scroll\", handleScroll, { passive: true });\n\n    scrollpoints.forEach(({ id }) => {\n      const element = document.getElementById(id);\n      if (element) {\n        observerRef.current?.observe(element);\n      } else {\n        console.warn(\n          `useThemedScrollpoints: Element with id \"${id}\" not found in DOM`,\n        );\n      }\n    });\n\n    // Manually check initial intersection state since IntersectionObserver\n    // callbacks only fire on changes, not on initial observation\n    // Use a small timeout to ensure DOM is fully laid out\n    const timeoutId = setTimeout(() => {\n      if (initialCheckDoneRef.current) {\n        return;\n      }\n      initialCheckDoneRef.current = true;\n\n      // Manually populate the intersection map for initial check\n      // (observer callbacks haven't fired yet)\n      for (const scrollpoint of scrollpoints) {\n        const element = document.getElementById(scrollpoint.id);\n        if (element) {\n          // Create a minimal entry with just the target\n          intersectingElements.set(scrollpoint.id, {\n            target: element,\n          } as unknown as IntersectionObserverEntry);\n        }\n      }\n\n      // Run initial best match calculation (gets fresh position data)\n      updateBestMatch(false);\n    }, 0);\n\n    return () => {\n      isMounted = false;\n      clearTimeout(timeoutId);\n      window.removeEventListener(\"scroll\", handleScroll);\n      if (rafIdRef.current !== null) {\n        cancelAnimationFrame(rafIdRef.current);\n        rafIdRef.current = null;\n      }\n      observerRef.current?.disconnect();\n      observerRef.current = null;\n      initialCheckDoneRef.current = false;\n      intersectingElements.clear();\n    };\n  }, [scrollpoints]);\n\n  return activeClassName;\n}\n"],"names":["useState","useEffect","useRef","HEADER_HEIGHT","useThemedScrollpoints","scrollpoints","activeClassName","setActiveClassName","previousClassNameRef","observerRef","initialCheckDoneRef","rafIdRef","intersectingElementsRef","Map","length","current","isMounted","intersectingElements","updateBestMatch","useEntryRects","bestMatch","id","entry","scrollpointIndex","findIndex","sp","scrollpoint","rect","boundingClientRect","target","getBoundingClientRect","top","distance","Math","abs","index","className","IntersectionObserver","entries","isIntersecting","set","delete","cancelAnimationFrame","requestAnimationFrame","rootMargin","threshold","handleScroll","window","addEventListener","passive","forEach","element","document","getElementById","observe","console","warn","timeoutId","setTimeout","clearTimeout","removeEventListener","disconnect","clear"],"mappings":"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"}
+{"version":3,"sources":["../../../src/core/hooks/use-themed-scrollpoints.ts"],"sourcesContent":["import { useState, useEffect, useRef } from \"react\";\nimport { ThemedScrollpoint } from \"../Header/types\";\n\nconst HEADER_HEIGHT = 64;\n\nexport function useThemedScrollpoints(\n  scrollpoints: ThemedScrollpoint[],\n): string {\n  const [activeClassName, setActiveClassName] = useState<string>(\"\");\n\n  const previousClassNameRef = useRef<string>(\"\");\n  const observerRef = useRef<IntersectionObserver | null>(null);\n  const initialCheckDoneRef = useRef<boolean>(false);\n  const rafIdRef = useRef<number | null>(null);\n  const intersectingElementsRef = useRef<\n    Map<string, IntersectionObserverEntry>\n  >(new Map());\n\n  useEffect(() => {\n    if (scrollpoints.length === 0) {\n      // Clear active className when scrollpoints becomes empty\n      setActiveClassName(\"\");\n      previousClassNameRef.current = \"\";\n      return;\n    }\n\n    let isMounted = true;\n    const intersectingElements = intersectingElementsRef.current;\n\n    // Function to find and update the best matching scrollpoint\n    const updateBestMatch = (useEntryRects = false) => {\n      // Find the best match from ALL currently intersecting elements\n      // Strategy: Pick the element whose top edge is closest to the header position\n      // Use scrollpoints array order as tiebreaker when distances are equal\n      let bestMatch: {\n        scrollpoint: ThemedScrollpoint;\n        distance: number;\n        index: number;\n      } | null = null;\n\n      for (const [id, entry] of intersectingElements) {\n        const scrollpointIndex = scrollpoints.findIndex((sp) => sp.id === id);\n        if (scrollpointIndex === -1) continue;\n\n        const scrollpoint = scrollpoints[scrollpointIndex];\n\n        // For observer callbacks, use entry.boundingClientRect (for test compatibility)\n        // For scroll handler, get fresh position data\n        const rect = useEntryRects\n          ? (entry.boundingClientRect ?? entry.target.getBoundingClientRect())\n          : entry.target.getBoundingClientRect();\n\n        // Only consider elements at or past the header line\n        // This prevents selecting elements that are marked as \"intersecting\" by rootMargin\n        // but haven't actually reached the header position yet\n        if (rect.top > HEADER_HEIGHT) continue;\n\n        // Calculate distance from element's top edge to header position\n        const distance = Math.abs(rect.top - HEADER_HEIGHT);\n\n        // Pick element with smallest distance; if equal, pick earlier in scrollpoints array\n        if (\n          !bestMatch ||\n          distance < bestMatch.distance ||\n          (distance === bestMatch.distance &&\n            scrollpointIndex < bestMatch.index)\n        ) {\n          bestMatch = { scrollpoint, distance, index: scrollpointIndex };\n        }\n      }\n\n      if (\n        bestMatch &&\n        bestMatch.scrollpoint.className !== previousClassNameRef.current\n      ) {\n        previousClassNameRef.current = bestMatch.scrollpoint.className;\n        setActiveClassName(bestMatch.scrollpoint.className);\n      }\n    };\n\n    observerRef.current = new IntersectionObserver(\n      (entries) => {\n        // Update the map of currently intersecting elements\n        for (const entry of entries) {\n          const id = (entry.target as HTMLElement).id;\n          if (entry.isIntersecting) {\n            intersectingElements.set(id, entry);\n          } else {\n            intersectingElements.delete(id);\n          }\n        }\n\n        // Schedule best match calculation using entry rects\n        if (rafIdRef.current !== null) {\n          cancelAnimationFrame(rafIdRef.current);\n        }\n\n        rafIdRef.current = requestAnimationFrame(() => {\n          rafIdRef.current = null;\n          if (!isMounted) return;\n          updateBestMatch(true); // Use entry.boundingClientRect\n        });\n      },\n      {\n        rootMargin: `-${HEADER_HEIGHT}px 0px 0px 0px`,\n        threshold: 0,\n      },\n    );\n\n    // Lightweight scroll handler to re-evaluate on scroll (gets fresh position data)\n    const handleScroll = () => {\n      if (rafIdRef.current !== null) {\n        cancelAnimationFrame(rafIdRef.current);\n      }\n\n      rafIdRef.current = requestAnimationFrame(() => {\n        rafIdRef.current = null;\n        if (!isMounted) return;\n        updateBestMatch(false); // Get fresh position data\n      });\n    };\n\n    window.addEventListener(\"scroll\", handleScroll, { passive: true });\n\n    scrollpoints.forEach(({ id }) => {\n      const element = document.getElementById(id);\n      if (element) {\n        observerRef.current?.observe(element);\n      } else {\n        console.warn(\n          `useThemedScrollpoints: Element with id \"${id}\" not found in DOM`,\n        );\n      }\n    });\n\n    // Manually check initial intersection state since IntersectionObserver\n    // callbacks only fire on changes, not on initial observation\n    // Use a small timeout to ensure DOM is fully laid out\n    const timeoutId = setTimeout(() => {\n      if (initialCheckDoneRef.current) {\n        return;\n      }\n      initialCheckDoneRef.current = true;\n\n      // Manually populate the intersection map for initial check\n      // (observer callbacks haven't fired yet)\n      for (const scrollpoint of scrollpoints) {\n        const element = document.getElementById(scrollpoint.id);\n        if (element) {\n          // Create a minimal entry with just the target\n          intersectingElements.set(scrollpoint.id, {\n            target: element,\n          } as unknown as IntersectionObserverEntry);\n        }\n      }\n\n      // Run initial best match calculation (gets fresh position data)\n      updateBestMatch(false);\n    }, 0);\n\n    return () => {\n      isMounted = false;\n      clearTimeout(timeoutId);\n      window.removeEventListener(\"scroll\", handleScroll);\n      if (rafIdRef.current !== null) {\n        cancelAnimationFrame(rafIdRef.current);\n        rafIdRef.current = null;\n      }\n      observerRef.current?.disconnect();\n      observerRef.current = null;\n      initialCheckDoneRef.current = false;\n      intersectingElements.clear();\n    };\n  }, [scrollpoints]);\n\n  return activeClassName;\n}\n"],"names":["useState","useEffect","useRef","HEADER_HEIGHT","useThemedScrollpoints","scrollpoints","activeClassName","setActiveClassName","previousClassNameRef","observerRef","initialCheckDoneRef","rafIdRef","intersectingElementsRef","Map","length","current","isMounted","intersectingElements","updateBestMatch","useEntryRects","bestMatch","id","entry","scrollpointIndex","findIndex","sp","scrollpoint","rect","boundingClientRect","target","getBoundingClientRect","top","distance","Math","abs","index","className","IntersectionObserver","entries","isIntersecting","set","delete","cancelAnimationFrame","requestAnimationFrame","rootMargin","threshold","handleScroll","window","addEventListener","passive","forEach","element","document","getElementById","observe","console","warn","timeoutId","setTimeout","clearTimeout","removeEventListener","disconnect","clear"],"mappings":"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"}

package/core/insights/command-queue.js

@@ -1,2 +1,2 @@
-function _define_property(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true})}else{obj[key]=value}return obj}import{InsightsService}from"./service";import{isLikelyAutomated}from"./bot-detection";import*as logger from"./logger";class NoopAnalyticsService{initInsights(_config){}enableDebugMode(){}disableDebugMode(){}identify(_identity){}trackPageView(_options){}track(_event,_properties){}setupObserver(){return()=>{}}}export class InsightsCommandQueue{executeInitInsights(config){this.debugMode=!!config.debug;if(isLikelyAutomated()){if(this.debugMode){logger.debug("Automated client detected, installing no-op analytics")}this.realImplementation=new NoopAnalyticsService;this.isInitialized=true;this.queue=[];return}if(this.debugMode){logger.debug("Initializing insights")}this.realImplementation=new InsightsService;this.realImplementation.initInsights(config);this.isInitialized=true;this.processQueue()}processQueue(){if(this.debugMode){logger.debug(`Processing ${this.queue.length} queued commands`)}while(this.queue.length>0){const cmd=this.queue.shift();if(cmd&&this.realImplementation&&typeof this.realImplementation[cmd.methodName]==="function"){try{if(this.debugMode){logger.debug(`Executing queued command: ${cmd.methodName}`,cmd.args)}const fn=this.realImplementation[cmd.methodName];fn.apply(this.realImplementation,cmd.args)}catch(e){if(this.debugMode){logger.error(`Error executing queued command: ${cmd.methodName}`,e)}}}}}initInsights(_config){}enableDebugMode(){}disableDebugMode(){}identify(_identity){}trackPageView(_options){}track(_event,_properties){}setupObserver(){return()=>{}}constructor(){_define_property(this,"isInitialized",false);_define_property(this,"queue",[]);_define_property(this,"debugMode",false);_define_property(this,"realImplementation",null);return new Proxy(this,{get:(target,prop)=>{if(prop in target&&typeof target[prop]!=="function"){return target[prop]}return(...args)=>{if(!target.isInitialized||!target.realImplementation){if(prop==="initInsights"){target.executeInitInsights(args[0]);return}if(target.debugMode){logger.debug(`Queuing method call: ${String(prop)}`,args)}target.queue.push({methodName:prop,args});return}if(typeof target.realImplementation[prop]==="function"){return target.realImplementation[prop](...args)}}}})}}
+function _define_property(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true})}else obj[key]=value;return obj}import{InsightsService}from"./service";import{isLikelyAutomated}from"./bot-detection";import*as logger from"./logger";class NoopAnalyticsService{initInsights(_config){}enableDebugMode(){}disableDebugMode(){}identify(_identity){}trackPageView(_options){}track(_event,_properties){}setupObserver(){return()=>{}}}export class InsightsCommandQueue{executeInitInsights(config){this.debugMode=!!config.debug;if(isLikelyAutomated()){if(this.debugMode){logger.debug("Automated client detected, installing no-op analytics")}this.realImplementation=new NoopAnalyticsService;this.isInitialized=true;this.queue=[];return}if(this.debugMode){logger.debug("Initializing insights")}this.realImplementation=new InsightsService;this.realImplementation.initInsights(config);this.isInitialized=true;this.processQueue()}processQueue(){if(this.debugMode){logger.debug(`Processing ${this.queue.length} queued commands`)}while(this.queue.length>0){const cmd=this.queue.shift();if(cmd&&this.realImplementation&&typeof this.realImplementation[cmd.methodName]==="function"){try{if(this.debugMode){logger.debug(`Executing queued command: ${cmd.methodName}`,cmd.args)}const fn=this.realImplementation[cmd.methodName];fn.apply(this.realImplementation,cmd.args)}catch(e){if(this.debugMode){logger.error(`Error executing queued command: ${cmd.methodName}`,e)}}}}}initInsights(_config){}enableDebugMode(){}disableDebugMode(){}identify(_identity){}trackPageView(_options){}track(_event,_properties){}setupObserver(){return()=>{}}constructor(){_define_property(this,"isInitialized",false);_define_property(this,"queue",[]);_define_property(this,"debugMode",false);_define_property(this,"realImplementation",null);return new Proxy(this,{get:(target,prop)=>{if(prop in target&&typeof target[prop]!=="function"){return target[prop]}return(...args)=>{if(!target.isInitialized||!target.realImplementation){if(prop==="initInsights"){target.executeInitInsights(args[0]);return}if(target.debugMode){logger.debug(`Queuing method call: ${String(prop)}`,args)}target.queue.push({methodName:prop,args});return}if(typeof target.realImplementation[prop]==="function"){return target.realImplementation[prop](...args)}}}})}}
 //# sourceMappingURL=command-queue.js.map

package/core/insights/service.js

@@ -1,2 +1,2 @@
-function _define_property(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true})}else{obj[key]=value}return obj}import*as datalayer from"./datalayer";import*as mixpanel from"./mixpanel";import*as posthog from"./posthog";import*as logger from"./logger";import{isLikelyAutomated}from"./bot-detection";export class InsightsService{initInsights({mixpanelToken,mixpanelAutoCapture,mixpanelApiHost,posthogApiKey,posthogApiHost,debug=false}){this.debugMode=!!debug;if(isLikelyAutomated()){if(this.debugMode){logger.debug("InsightService: automated client detected, skipping insights initialization")}return}if(this.debugMode){logger.debug("InsightService: Initializing insights")}try{mixpanel.initMixpanel(mixpanelToken,mixpanelAutoCapture,this.debugMode,mixpanelApiHost)}catch(e){if(this.debugMode){logger.error("Failed to initialize Mixpanel",e)}}try{posthog.initPosthog(posthogApiKey,posthogApiHost)}catch(e){if(this.debugMode){logger.error("Failed to initialize Posthog",e)}}}enableDebugMode(){this.debugMode=true;logger.debug("Enabling debug mode");try{mixpanel.enableDebugMode();posthog.enableDebugMode()}catch(e){logger.error("Failed to enable debug mode",e)}}disableDebugMode(){this.debugMode=false;logger.debug("Disabling debug mode");try{mixpanel.disableDebugMode();posthog.disableDebugMode()}catch(e){logger.error("Failed to disable debug mode",e)}}identify(identity){const{userId,accountId,organisationId,email,name,...properties}=identity;if(!userId){if(this.debugMode){logger.warn("User ID not provided, skipping identify")}return}if(this.debugMode){logger.info("Identifying user",{userId,accountId,organisationId,email,name,...properties})}try{mixpanel.identify({userId,accountId,organisationId,email,name,...properties})}catch(e){if(this.debugMode){logger.error("Failed to identify user in Mixpanel",e)}}try{posthog.identify({userId,accountId,organisationId,email,name,...properties})}catch(e){if(this.debugMode){logger.error("Failed to identify user in Posthog",e)}}}trackPageView(options){const{excludeIds,includeDataLayer,...properties}=options??{};if(this.debugMode){logger.info("Tracking page view")}try{mixpanel.trackPageView({excludeIds,...properties})}catch(e){if(this.debugMode){logger.error("Failed to track page view in Mixpanel",e)}}try{posthog.trackPageView(properties)}catch(e){if(this.debugMode){logger.error("Failed to track page view in Posthog",e)}}if(includeDataLayer){try{datalayer.trackPageView(properties)}catch(e){if(this.debugMode){logger.error("Failed to track page view in GTM",e)}}}}track(event,properties){if(this.debugMode){logger.info("Tracking event",{event,properties})}try{mixpanel.track(event,properties)}catch(e){if(this.debugMode){logger.error("Failed to track event in Mixpanel",e)}}try{posthog.track(event,properties)}catch(e){if(this.debugMode){logger.error("Failed to track event in Posthog",e)}}try{datalayer.track(event,properties)}catch(e){if(this.debugMode){logger.error("Failed to track event in Datalayer",e)}}}setupObserver(){const getInsightAttributes=element=>{const MAX_ATTRIBUTES=10;let count=0;const attributes={};for(const attr of Array.from(element.attributes)){if(count>=MAX_ATTRIBUTES)break;if(attr.name.startsWith("data-insight-")){if(!/^data-insight-[a-zA-Z0-9-]+$/.test(attr.name))continue;if(typeof attr.value!=="string"||attr.value.length>100)continue;const key=attr.name.replace("data-insight-","").split("-").map((part,index)=>index===0?part:part.charAt(0).toUpperCase()+part.slice(1)).join("");attributes[key]=attr.value;count++}}return attributes};const findClosestElementWithInsights=element=>{let current=element;while(current&&current!==document.body){const insights=getInsightAttributes(current);if(Object.keys(insights).length>0){return insights}current=current.parentElement}return null};const handleClick=event=>{if(!(event.target instanceof HTMLElement))return;const insights=findClosestElementWithInsights(event.target);if(insights){const{event:eventName,...properties}=insights;this.track(eventName||"element_clicked",properties)}};document.body.addEventListener("click",handleClick);return()=>{document.body.removeEventListener("click",handleClick)}}constructor(){_define_property(this,"debugMode",false)}}
+function _define_property(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true})}else obj[key]=value;return obj}import*as datalayer from"./datalayer";import*as mixpanel from"./mixpanel";import*as posthog from"./posthog";import*as logger from"./logger";import{isLikelyAutomated}from"./bot-detection";export class InsightsService{initInsights({mixpanelToken,mixpanelAutoCapture,mixpanelApiHost,posthogApiKey,posthogApiHost,debug=false}){this.debugMode=!!debug;if(isLikelyAutomated()){if(this.debugMode){logger.debug("InsightService: automated client detected, skipping insights initialization")}return}if(this.debugMode){logger.debug("InsightService: Initializing insights")}try{mixpanel.initMixpanel(mixpanelToken,mixpanelAutoCapture,this.debugMode,mixpanelApiHost)}catch(e){if(this.debugMode){logger.error("Failed to initialize Mixpanel",e)}}try{posthog.initPosthog(posthogApiKey,posthogApiHost)}catch(e){if(this.debugMode){logger.error("Failed to initialize Posthog",e)}}}enableDebugMode(){this.debugMode=true;logger.debug("Enabling debug mode");try{mixpanel.enableDebugMode();posthog.enableDebugMode()}catch(e){logger.error("Failed to enable debug mode",e)}}disableDebugMode(){this.debugMode=false;logger.debug("Disabling debug mode");try{mixpanel.disableDebugMode();posthog.disableDebugMode()}catch(e){logger.error("Failed to disable debug mode",e)}}identify(identity){const{userId,accountId,organisationId,email,name,...properties}=identity;if(!userId){if(this.debugMode){logger.warn("User ID not provided, skipping identify")}return}if(this.debugMode){logger.info("Identifying user",{userId,accountId,organisationId,email,name,...properties})}try{mixpanel.identify({userId,accountId,organisationId,email,name,...properties})}catch(e){if(this.debugMode){logger.error("Failed to identify user in Mixpanel",e)}}try{posthog.identify({userId,accountId,organisationId,email,name,...properties})}catch(e){if(this.debugMode){logger.error("Failed to identify user in Posthog",e)}}}trackPageView(options){const{excludeIds,includeDataLayer,...properties}=options??{};if(this.debugMode){logger.info("Tracking page view")}try{mixpanel.trackPageView({excludeIds,...properties})}catch(e){if(this.debugMode){logger.error("Failed to track page view in Mixpanel",e)}}try{posthog.trackPageView(properties)}catch(e){if(this.debugMode){logger.error("Failed to track page view in Posthog",e)}}if(includeDataLayer){try{datalayer.trackPageView(properties)}catch(e){if(this.debugMode){logger.error("Failed to track page view in GTM",e)}}}}track(event,properties){if(this.debugMode){logger.info("Tracking event",{event,properties})}try{mixpanel.track(event,properties)}catch(e){if(this.debugMode){logger.error("Failed to track event in Mixpanel",e)}}try{posthog.track(event,properties)}catch(e){if(this.debugMode){logger.error("Failed to track event in Posthog",e)}}try{datalayer.track(event,properties)}catch(e){if(this.debugMode){logger.error("Failed to track event in Datalayer",e)}}}setupObserver(){const getInsightAttributes=element=>{const MAX_ATTRIBUTES=10;let count=0;const attributes={};for(const attr of Array.from(element.attributes)){if(count>=MAX_ATTRIBUTES)break;if(attr.name.startsWith("data-insight-")){if(!/^data-insight-[a-zA-Z0-9-]+$/.test(attr.name))continue;if(typeof attr.value!=="string"||attr.value.length>100)continue;const key=attr.name.replace("data-insight-","").split("-").map((part,index)=>index===0?part:part.charAt(0).toUpperCase()+part.slice(1)).join("");attributes[key]=attr.value;count++}}return attributes};const findClosestElementWithInsights=element=>{let current=element;while(current&&current!==document.body){const insights=getInsightAttributes(current);if(Object.keys(insights).length>0){return insights}current=current.parentElement}return null};const handleClick=event=>{if(!(event.target instanceof HTMLElement))return;const insights=findClosestElementWithInsights(event.target);if(insights){const{event:eventName,...properties}=insights;this.track(eventName||"element_clicked",properties)}};document.body.addEventListener("click",handleClick);return()=>{document.body.removeEventListener("click",handleClick)}}constructor(){_define_property(this,"debugMode",false)}}
 //# sourceMappingURL=service.js.map

package/core/styles/colors/utils.js

@@ -1,2 +1,2 @@
-import{colorGroupLengths}from"./types";export const convertTailwindClassToVar=className=>className.replace(/(text|bg|from|to)-([a-z0-9-]+)/gi,"var(--color-$2)");export const invertTailwindClassVariant=className=>{const splitMatch=className.split("-");if(splitMatch.length<3){throw new Error("Invalid TW class format")}const color=splitMatch[splitMatch.length-2];const variant=splitMatch[splitMatch.length-1];const property=splitMatch.slice(0,splitMatch.length-1).join("-");const numericalVariant=Number(variant.slice(0,-2))??0;if(isNaN(numericalVariant)){throw new Error(`Invalid variant value in TW class: ${className}`)}const flippedVariant=colorGroupLengths[color]-numericalVariant-(color==="neutral"?1:-1);const flippedMatch=`${property}-${flippedVariant}00`;return flippedMatch};
+import{colorGroupLengths}from"./types";export const convertTailwindClassToVar=className=>className.replace(/(text|bg|from|to)-([a-z0-9-]+)/gi,"var(--color-$2)");export const invertTailwindClassVariant=className=>{const splitMatch=className.split("-");if(splitMatch.length<3){throw new Error("Invalid TW class format")}const color=splitMatch[splitMatch.length-2];const variant=splitMatch[splitMatch.length-1];const property=splitMatch.slice(0,splitMatch.length-1).join("-");const numericalVariant=Number(variant.slice(0,-2));if(isNaN(numericalVariant)){throw new Error(`Invalid variant value in TW class: ${className}`)}const flippedVariant=colorGroupLengths[color]-numericalVariant-(color==="neutral"?1:-1);const flippedMatch=`${property}-${flippedVariant}00`;return flippedMatch};
 //# sourceMappingURL=utils.js.map

package/core/styles/colors/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/core/styles/colors/utils.ts"],"sourcesContent":["import { ColorClass, ColorClassColorGroups, colorGroupLengths } from \"./types\";\n\nexport const convertTailwindClassToVar = (className: string) =>\n  className.replace(/(text|bg|from|to)-([a-z0-9-]+)/gi, \"var(--color-$2)\");\n\nexport const invertTailwindClassVariant = (className: string): ColorClass => {\n  const splitMatch = className.split(\"-\");\n  if (splitMatch.length < 3) {\n    throw new Error(\"Invalid TW class format\");\n  }\n\n  const color = splitMatch[splitMatch.length - 2];\n  const variant = splitMatch[splitMatch.length - 1];\n  const property = splitMatch.slice(0, splitMatch.length - 1).join(\"-\");\n\n  const numericalVariant = Number(variant.slice(0, -2)) ?? 0;\n  if (isNaN(numericalVariant)) {\n    throw new Error(`Invalid variant value in TW class: ${className}`);\n  }\n\n  const flippedVariant =\n    colorGroupLengths[color as ColorClassColorGroups] -\n    numericalVariant -\n    (color === \"neutral\" ? 1 : -1);\n  const flippedMatch = `${property}-${flippedVariant}00`;\n\n  return flippedMatch as ColorClass;\n};\n"],"names":["colorGroupLengths","convertTailwindClassToVar","className","replace","invertTailwindClassVariant","splitMatch","split","length","Error","color","variant","property","slice","join","numericalVariant","Number","isNaN","flippedVariant","flippedMatch"],"mappings":"AAAA,OAA4CA,iBAAiB,KAAQ,SAAU,AAE/E,QAAO,MAAMC,0BAA4B,AAACC,WACxCA,UAAUC,OAAO,CAAC,mCAAoC,kBAAmB,AAE3E,QAAO,MAAMC,2BAA6B,AAACF,YACzC,MAAMG,WAAaH,UAAUI,KAAK,CAAC,KACnC,GAAID,WAAWE,MAAM,CAAG,EAAG,CACzB,MAAM,IAAIC,MAAM,0BAClB,CAEA,MAAMC,MAAQJ,UAAU,CAACA,WAAWE,MAAM,CAAG,EAAE,CAC/C,MAAMG,QAAUL,UAAU,CAACA,WAAWE,MAAM,CAAG,EAAE,CACjD,MAAMI,SAAWN,WAAWO,KAAK,CAAC,EAAGP,WAAWE,MAAM,CAAG,GAAGM,IAAI,CAAC,KAEjE,MAAMC,iBAAmBC,OAAOL,QAAQE,KAAK,CAAC,EAAG,CAAC,KAAO,EACzD,GAAII,MAAMF,kBAAmB,CAC3B,MAAM,IAAIN,MAAM,CAAC,mCAAmC,EAAEN,UAAU,CAAC,CACnE,CAEA,MAAMe,eACJjB,iBAAiB,CAACS,MAA+B,CACjDK,iBACCL,CAAAA,QAAU,UAAY,EAAI,CAAC,CAAA,EAC9B,MAAMS,aAAe,CAAC,EAAEP,SAAS,CAAC,EAAEM,eAAe,EAAE,CAAC,CAEtD,OAAOC,YACT,CAAE"}
+{"version":3,"sources":["../../../../src/core/styles/colors/utils.ts"],"sourcesContent":["import { ColorClass, ColorClassColorGroups, colorGroupLengths } from \"./types\";\n\nexport const convertTailwindClassToVar = (className: string) =>\n  className.replace(/(text|bg|from|to)-([a-z0-9-]+)/gi, \"var(--color-$2)\");\n\nexport const invertTailwindClassVariant = (className: string): ColorClass => {\n  const splitMatch = className.split(\"-\");\n  if (splitMatch.length < 3) {\n    throw new Error(\"Invalid TW class format\");\n  }\n\n  const color = splitMatch[splitMatch.length - 2];\n  const variant = splitMatch[splitMatch.length - 1];\n  const property = splitMatch.slice(0, splitMatch.length - 1).join(\"-\");\n\n  const numericalVariant = Number(variant.slice(0, -2));\n  if (isNaN(numericalVariant)) {\n    throw new Error(`Invalid variant value in TW class: ${className}`);\n  }\n\n  const flippedVariant =\n    colorGroupLengths[color as ColorClassColorGroups] -\n    numericalVariant -\n    (color === \"neutral\" ? 1 : -1);\n  const flippedMatch = `${property}-${flippedVariant}00`;\n\n  return flippedMatch as ColorClass;\n};\n"],"names":["colorGroupLengths","convertTailwindClassToVar","className","replace","invertTailwindClassVariant","splitMatch","split","length","Error","color","variant","property","slice","join","numericalVariant","Number","isNaN","flippedVariant","flippedMatch"],"mappings":"AAAA,OAA4CA,iBAAiB,KAAQ,SAAU,AAE/E,QAAO,MAAMC,0BAA4B,AAACC,WACxCA,UAAUC,OAAO,CAAC,mCAAoC,kBAAmB,AAE3E,QAAO,MAAMC,2BAA6B,AAACF,YACzC,MAAMG,WAAaH,UAAUI,KAAK,CAAC,KACnC,GAAID,WAAWE,MAAM,CAAG,EAAG,CACzB,MAAM,IAAIC,MAAM,0BAClB,CAEA,MAAMC,MAAQJ,UAAU,CAACA,WAAWE,MAAM,CAAG,EAAE,CAC/C,MAAMG,QAAUL,UAAU,CAACA,WAAWE,MAAM,CAAG,EAAE,CACjD,MAAMI,SAAWN,WAAWO,KAAK,CAAC,EAAGP,WAAWE,MAAM,CAAG,GAAGM,IAAI,CAAC,KAEjE,MAAMC,iBAAmBC,OAAOL,QAAQE,KAAK,CAAC,EAAG,CAAC,IAClD,GAAII,MAAMF,kBAAmB,CAC3B,MAAM,IAAIN,MAAM,CAAC,mCAAmC,EAAEN,UAAU,CAAC,CACnE,CAEA,MAAMe,eACJjB,iBAAiB,CAACS,MAA+B,CACjDK,iBACCL,CAAAA,QAAU,UAAY,EAAI,CAAC,CAAA,EAC9B,MAAMS,aAAe,CAAC,EAAEP,SAAS,CAAC,EAAEM,eAAe,EAAE,CAAC,CAEtD,OAAOC,YACT,CAAE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "18.5.0",
+  "version": "19.0.0",
   "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
   "repository": {
     "type": "git",
@@ -21,15 +21,15 @@
     "workerDirectory": "./public"
   },
   "devDependencies": {
-    "@storybook/addon-docs": "^10.5.0",
-    "@storybook/addon-themes": "^10.5.0",
-    "@storybook/addon-vitest": "^10.5.0",
-    "@storybook/react-vite": "^10.5.0",
+    "@storybook/addon-docs": "^10.6.0",
+    "@storybook/addon-themes": "^10.6.0",
+    "@storybook/addon-vitest": "^10.6.0",
+    "@storybook/react-vite": "^10.6.0",
     "@svgr/core": "^8.1.0",
     "@svgr/plugin-jsx": "^8.1.0",
     "@svgr/plugin-svgo": "^8.1.0",
     "@swc/cli": "^0.8.1",
-    "@swc/core": "^1.13.5",
+    "@swc/core": "^1.16.0",
     "@tailwindcss/container-queries": "^0.1.1",
     "@testing-library/react": "^16.3.0",
     "@types/js-cookie": "^3.0.6",
@@ -37,36 +37,33 @@
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.0",
     "@types/svg-sprite": "^0.0.39",
-    "@typescript-eslint/eslint-plugin": "^8.66.0",
-    "@typescript-eslint/parser": "^8.66.0",
+    "@typescript-eslint/parser": "^8.70.0",
     "@vitejs/plugin-react-swc": "^4.3.0",
     "@vitest/browser": "^4.1.10",
     "@vitest/browser-playwright": "^4.1.10",
     "@vitest/coverage-v8": "^4.1.10",
     "autoprefixer": "^10.5.0",
-    "eslint": "^8.57.1",
-    "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-jsx-a11y": "^6.10.2",
-    "eslint-plugin-react": "^7.35.0",
-    "eslint-plugin-react-hooks": "^7.1.1",
-    "eslint-plugin-react-perf": "^3.3.3",
-    "eslint-plugin-storybook": "^10.5.0",
+    "eslint": "^10.8.1",
+    "eslint-plugin-storybook": "^10.6.0",
     "heroicons": "^2.2.0",
     "http-server": "14.1.1",
-    "jsdom": "^29.1.0",
-    "mixpanel-browser": "^2.81.0",
+    "jsdom": "^30.0.1",
+    "mixpanel-browser": "^2.82.1",
     "msw": "2.15.0",
-    "msw-storybook-addon": "^2.0.7",
-    "playwright": "^1.61.1",
-    "posthog-js": "1.413.2",
+    "msw-storybook-addon": "^3.0.0",
+    "oxlint": "1.87.0",
+    "playwright": "^1.62.1",
+    "posthog-js": "1.434.2",
     "prettier": "^3.9.4",
-    "storybook": "^10.5.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.3.1",
+    "storybook": "^10.6.0",
     "svg-sprite": "^2.0.4",
     "tailwindcss": "^3.3.6",
     "ts-node": "^10.9.2",
     "typescript": "6.0.2",
-    "update-browserslist-db": "^1.2.3",
-    "vite": "^8.1.2",
+    "update-browserslist-db": "^1.3.1",
+    "vite": "^8.2.1",
     "vitest": "^4.1.10"
   },
   "dependencies": {
@@ -80,24 +77,24 @@
     "@radix-ui/react-tooltip": "^1.2.8",
     "array-flat-polyfill": "^1.0.1",
     "clsx": "^2.1.1",
-    "dompurify": "^3.4.13",
+    "dompurify": "^3.4.16",
     "embla-carousel": "^8.6.0",
     "embla-carousel-autoplay": "^8.6.0",
     "embla-carousel-react": "^8.6.0",
     "es-toolkit": "^1.49.0",
-    "highlight.js": "^11.11.1",
+    "highlight.js": "^11.12.0",
     "highlightjs-curl": "^1.3.0",
     "isbot": "5.2.1",
     "js-cookie": "^3.0.7",
-    "react": "^18.2.0",
-    "react-dom": "^18.3.1",
     "scroll-lock": "^2.1.4",
-    "swr": "^2.4.0",
-    "tailwind-merge": "^3.6.0"
+    "swr": "^2.5.0",
+    "tailwind-merge": "^3.7.0"
   },
   "peerDependencies": {
     "mixpanel-browser": "^2.60.0 || <3",
-    "posthog-js": "^1.217.4 || <2"
+    "posthog-js": "^1.217.4 || <2",
+    "react": "^18.2.0 || ^19.0.0",
+    "react-dom": "^18.2.0 || ^19.0.0"
   },
   "bugs": {
     "url": "https://github.com/ably/ably-ui/issues"
@@ -120,7 +117,7 @@
     "watch": "pnpm build:swc -w",
     "format:check": "prettier -c \"*.{js,ts}\" \".storybook/*.{js,ts,tsx}\" \"src/**/*.{js,ts,tsx}\"",
     "format:write": "prettier -w \"*.{js,ts}\" \".storybook/*.{js,ts,tsx}\" \"src/**/*.{js,ts,tsx}\"",
-    "lint": "eslint \"*.{js,ts}\" \".storybook/*.{js,ts,tsx}\" \"src/**/*.{js,ts,tsx}\"",
+    "lint": "oxlint --report-unused-disable-directives *.js *.ts .storybook src && eslint \"*.{js,ts}\" \".storybook/*.{js,ts,tsx}\" \"src/**/*.{js,ts,tsx}\"",
     "update:all": "./scripts/update-dependents.sh",
     "pre-release": "./scripts/pre-release.sh",
     "release": "./scripts/release.sh",

package/core/images/cust-logo-split-mono-pos.svg

@@ -1,9 +0,0 @@
-<svg width="244" height="122" viewBox="0 0 244 122" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M71.2253 77.7648V87.7101L100.67 71.0517V61.1064L71.2253 77.7648Z" fill="#03020D"/>
-<path d="M71.2253 54.1445L100.67 70.8028V60.8576L71.2253 44.1992V54.1445Z" fill="#03020D"/>
-<path d="M58 61.8515L87.4448 78.5099V68.5646L58 51.9062V61.8515Z" fill="#03020D"/>
-<path d="M58 61.8515L87.4448 78.5099V68.5646L58 51.9062V61.8515Z" fill="#03020D"/>
-<path d="M87.4448 35L58 51.6583V61.6036L87.4448 44.9453V35Z" fill="#03020D"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M79.9946 49.1603L71.2253 44.1992V54.1213L79.9946 49.1603ZM78.6755 73.5494L87.4449 78.5104V68.5884L78.6755 73.5494Z" fill="#03020D"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M158.472 72.6461H162.694V42.7075H158.472V72.6461ZM186 54.0766V50.2328H182.305V42.7075H178.082V50.2328H175.037V54.0766H178.082V72.6461H182.305V54.0766H186ZM167.932 72.6461H172.155V50.2328H167.932V72.6461ZM172.155 47.6437H167.932V42.7075H172.155V47.6437ZM142.596 69.3692C147.022 69.3692 150.189 65.769 150.189 61.4801C150.189 57.2318 146.818 53.4691 142.474 53.4691C138.13 53.4691 134.962 57.192 134.962 61.3997C134.962 65.7284 138.13 69.3692 142.596 69.3692ZM154.412 61.7229C154.412 54.9668 149.702 49.6228 142.759 49.6228C139.551 49.6228 136.628 50.9986 134.759 53.6689H134.676V50.2328H130.821V80.1308H135.044V69.4098H135.127C136.751 72.0801 140.039 73.2122 143.045 73.2122C149.496 73.2122 154.412 68.0746 154.412 61.7229ZM120.629 58.7692C124.325 59.9021 127.411 61.7229 127.411 66.0516C127.411 70.4615 124.162 73.2122 119.856 73.2122C118.873 73.1984 117.898 73.0205 116.974 72.6859C113.646 71.5132 111.9 68.8023 111.9 65.2825H116.119C116.282 67.5881 117.419 69.3683 119.936 69.3683C121.804 69.3683 123.184 68.2354 123.184 66.2936C123.184 64.2537 121.243 63.5595 119.047 62.7747C116.194 61.7545 112.912 60.5812 112.912 56.0997C112.912 52.2558 116.282 49.6261 119.977 49.6261C123.836 49.6261 126.798 52.2964 126.881 56.1801H122.658C122.455 54.5623 121.48 53.4692 119.775 53.4692C118.354 53.4692 117.136 54.3593 117.136 55.856C117.136 57.6957 118.815 58.2114 120.29 58.6643C120.405 58.6994 120.518 58.7342 120.629 58.7692Z" fill="#03020D"/>
-</svg>