@ably/ui 16.0.4 → 16.1.0

package/README.md

@@ -107,7 +107,6 @@ module.exports = extendConfig((ablyUIConfig) => ({
 
 @import "@ably/ui/reset/styles.css"; /* needed as we disable the default Tailwind reset */
 @import "@ably/ui/core/styles.css"; /* styles for core module components and more */
-@import "@ably/ui/core/Meganav/component.css";
 @import "@ably/ui/core/Flash/component.css";
 ```
 
@@ -187,21 +186,21 @@ We have a dynamic SWC configuration which allows us to support compile-time feat
 
 For example, there could be a flag somewhere in our code that logs additional debug information in development that is useless in a released version. It could look like this:
 
-~~~ts
+```ts
 // Example usage in api-client.ts
 declare const __DEBUG_MODE__: boolean;
 
 const api = createApiClient();
 if (__DEBUG_MODE__) {
-  console.log('Debug mode enabled');
+  console.log("Debug mode enabled");
 }
-~~~
+```
 
 The flag can be added to the list in `swc.config.ts`, and enabled with an environment variable:
 
-~~~
+```
 $ DEBUG_MODE=true yarn build
-~~~
+```
 
 ### Publishing pre-release packages for review apps
 
@@ -316,4 +315,3 @@ This will release the packages and update library and create & push the commit &
 Snapshots are also assessed via `test-runner`. To generate new snapshots, run `yarn test:update-snapshots`.
 
 You can run the tests by either running a dev instance of Storybook locally and then running `yarn test`, or by pushing a branch to GitHub.
-

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,role:"button",onClick:()=>setOpen(!isOpen),className:cn("flex items-center ui-text-button3 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-8 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-4"},title,iconName?React.createElement(Icon,{name:iconName,size:"1rem",additionalCSS:"align-middle ml-8 relative -top-1 -left-4 text-neutral-1300 dark:text-neutral-000"}):null),subtitle?React.createElement("p",{className:"ui-text-p3 mb-16"},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,role:"button",onClick:()=>setOpen(!isOpen),className:cn("flex items-center ui-text-label3 font-bold 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-8 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-4"},title,iconName?React.createElement(Icon,{name:iconName,size:"1rem",additionalCSS:"align-middle ml-8 relative -top-1 -left-4 text-neutral-1300 dark:text-neutral-000"}):null),subtitle?React.createElement("p",{className:"ui-text-p3 mb-16"},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      role=\"button\"\n      onClick={() => setOpen(!isOpen)}\n      className={cn(\n        \"flex items-center ui-text-button3 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-8 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-4\">\n        {title}\n        {iconName ? (\n          <Icon\n            name={iconName}\n            size=\"1rem\"\n            additionalCSS=\"align-middle ml-8 relative -top-1 -left-4 text-neutral-1300 dark:text-neutral-000\"\n          />\n        ) : null}\n      </p>\n      {subtitle ? <p className=\"ui-text-p3 mb-16\">{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","role","onClick","name","size","additionalCSS","Content","anchorPosition","contentClassNames","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,KAAK,SACLC,QAAS,IAAMvB,QAAQ,CAACD,QACxBiB,UAAWnB,GACT,+FACAqB,oBAGDhB,SACD,oBAACN,MACC4B,KACEzB,OAAS,2BAA6B,6BAExC0B,KAAK,UACLC,cAAc,4CAItB,EAEA,MAAMC,QAAU,CAAC,CACfzB,QAAQ,CACR0B,eAAiB,OAAO,CACxBC,iBAAiB,CACJ,IACb,KAAM,CAAE9B,MAAM,CAAE,CAAGP,WAAWM,qBAE9B,GAAI,CAACC,OAAQ,CACX,OAAO,IACT,CAEA,OACE,oBAACe,OACCC,GAAG,eACHO,KAAK,OACLN,UAAWnB,GACT,iJACA+B,iBAAmB,QAAU,UAAY,SACzCC,oBAGD3B,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,MACC4B,KAAMU,SACNT,KAAK,OACLC,cAAc,sFAEd,MAELO,SAAW,oBAACI,KAAErB,UAAU,oBAAoBiB,UAAgB,KAC5D/B,SAGP,CAEAD,CAAAA,aAAagB,OAAO,CAAGA,OACvBhB,CAAAA,aAAa0B,OAAO,CAAGA,OACvB1B,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      role=\"button\"\n      onClick={() => setOpen(!isOpen)}\n      className={cn(\n        \"flex items-center ui-text-label3 font-bold 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-8 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-4\">\n        {title}\n        {iconName ? (\n          <Icon\n            name={iconName}\n            size=\"1rem\"\n            additionalCSS=\"align-middle ml-8 relative -top-1 -left-4 text-neutral-1300 dark:text-neutral-000\"\n          />\n        ) : null}\n      </p>\n      {subtitle ? <p className=\"ui-text-p3 mb-16\">{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","role","onClick","name","size","additionalCSS","Content","anchorPosition","contentClassNames","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,KAAK,SACLC,QAAS,IAAMvB,QAAQ,CAACD,QACxBiB,UAAWnB,GACT,wGACAqB,oBAGDhB,SACD,oBAACN,MACC4B,KACEzB,OAAS,2BAA6B,6BAExC0B,KAAK,UACLC,cAAc,4CAItB,EAEA,MAAMC,QAAU,CAAC,CACfzB,QAAQ,CACR0B,eAAiB,OAAO,CACxBC,iBAAiB,CACJ,IACb,KAAM,CAAE9B,MAAM,CAAE,CAAGP,WAAWM,qBAE9B,GAAI,CAACC,OAAQ,CACX,OAAO,IACT,CAEA,OACE,oBAACe,OACCC,GAAG,eACHO,KAAK,OACLN,UAAWnB,GACT,iJACA+B,iBAAmB,QAAU,UAAY,SACzCC,oBAGD3B,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,MACC4B,KAAMU,SACNT,KAAK,OACLC,cAAc,sFAEd,MAELO,SAAW,oBAACI,KAAErB,UAAU,oBAAoBiB,UAAgB,KAC5D/B,SAGP,CAEAD,CAAAA,aAAagB,OAAO,CAAGA,OACvBhB,CAAAA,aAAa0B,OAAO,CAAGA,OACvB1B,CAAAA,aAAa6B,IAAI,CAAGA,IAEpB,gBAAe7B,YAAa"}

package/core/Flyout.js

@@ -1,2 +1,2 @@
-import React,{useState}from"react";import{NavigationMenu,NavigationMenuItem,NavigationMenuList,NavigationMenuTrigger,NavigationMenuContent,NavigationMenuViewport,NavigationMenuLink}from"@radix-ui/react-navigation-menu";import cn from"./utils/cn";import{componentMaxHeight,HEADER_HEIGHT}from"./utils/heights";const DEFAULT_MENU_LINK_STYLING="ui-text-menu3 font-bold text-neutral-1000 dark:neutral-300 hover:text-neutral-1300 dark:hover:text-neutral-000 px-12 py-8 flex items-center justify-between";const DEFAULT_VIEWPORT_STYLING="relative overflow-hidden w-full h-[var(--radix-navigation-menu-viewport-height)] origin-[top_center] transition-[width,_height] duration-300 data-[state=closed]:animate-scale-out data-[state=open]:animate-scale-in sm:w-[var(--radix-navigation-menu-viewport-width)]";const PANEL_ANIMATION="data-[motion=from-end]:animate-enter-from-right data-[motion=from-start]:animate-enter-from-left data-[motion=to-end]:animate-exit-to-right data-[motion=to-start]:animate-exit-to-left";const FlyOverlay=({className,fadingOut})=>React.createElement("div",{className:cn("absolute left-0 right-0 h-screen w-full opacity-0",{"animate-[fade-in-ten-percent_150ms_ease-in-out_forwards]":!fadingOut,"animate-[fade-out-ten-percent_150ms_ease-in-out_forwards]":fadingOut},className),style:{height:componentMaxHeight(HEADER_HEIGHT),top:HEADER_HEIGHT}});const Flyout=({menuItems,className,flyOutClassName,menuLinkClassName,viewPortClassName})=>{const[isOpen,setIsOpen]=useState(false);const[fadingOut,setFadingOut]=useState(false);const closeMenu=()=>{setFadingOut(true);setTimeout(()=>{setIsOpen(false);setFadingOut(false)},150)};return React.createElement(React.Fragment,null,React.createElement(NavigationMenu,{className:cn(className,"flex w-full"),onValueChange:val=>val?setIsOpen(true):closeMenu(),delayDuration:0},React.createElement(NavigationMenuList,{className:"flex list-none center"},menuItems.map(({name,content,link,panelClassName})=>content?React.createElement(NavigationMenuItem,{key:name},React.createElement(NavigationMenuTrigger,{className:cn("group outline-none focus:outline-none select-none cursor-pointer relative","rounded-md hover:bg-neutral-100 dark:hover:bg-neutral-1200","[&[data-state=open]]:bg-neutral-100 dark:[&[data-state=open]]:bg-neutral-1200","[&[data-state=open]]:text-neutral-1300 dark:[&[data-state=open]]:text-neutral-000",DEFAULT_MENU_LINK_STYLING,menuLinkClassName)},name),React.createElement(NavigationMenuContent,{className:cn("absolute right-0 top-0 p-24 z-10",PANEL_ANIMATION,panelClassName)},content)):React.createElement(NavigationMenuLink,{key:name,href:link,className:cn(DEFAULT_MENU_LINK_STYLING,menuLinkClassName)},name))),React.createElement("div",{className:cn("absolute top-full",flyOutClassName)},React.createElement(NavigationMenuViewport,{className:cn(DEFAULT_VIEWPORT_STYLING,viewPortClassName)}))),isOpen?React.createElement(FlyOverlay,{className:"bg-neutral-1300 opacity-10 z-20 h-screen mix-blend-multiply",fadingOut:fadingOut}):null)};export default Flyout;
+import React,{useState}from"react";import{NavigationMenu,NavigationMenuItem,NavigationMenuList,NavigationMenuTrigger,NavigationMenuContent,NavigationMenuViewport,NavigationMenuLink}from"@radix-ui/react-navigation-menu";import cn from"./utils/cn";import{componentMaxHeight,HEADER_HEIGHT}from"./utils/heights";const DEFAULT_MENU_LINK_STYLING="ui-text-label3 font-bold text-neutral-1000 dark:text-neutral-300 hover:text-neutral-1300 dark:hover:text-neutral-000 px-12 py-8 flex items-center justify-between";const DEFAULT_VIEWPORT_STYLING="relative overflow-hidden w-full h-[var(--radix-navigation-menu-viewport-height)] origin-[top_center] transition-[width,_height] duration-300 data-[state=closed]:animate-scale-out data-[state=open]:animate-scale-in sm:w-[var(--radix-navigation-menu-viewport-width)]";const PANEL_ANIMATION="data-[motion=from-end]:animate-enter-from-right data-[motion=from-start]:animate-enter-from-left data-[motion=to-end]:animate-exit-to-right data-[motion=to-start]:animate-exit-to-left";const FlyOverlay=({className,fadingOut})=>React.createElement("div",{className:cn("absolute left-0 right-0 h-screen w-full opacity-0",{"animate-[fade-in-ten-percent_150ms_ease-in-out_forwards]":!fadingOut,"animate-[fade-out-ten-percent_150ms_ease-in-out_forwards]":fadingOut},className),style:{height:componentMaxHeight(HEADER_HEIGHT),top:HEADER_HEIGHT}});const Flyout=({menuItems,className,flyOutClassName,menuLinkClassName,viewPortClassName})=>{const[isOpen,setIsOpen]=useState(false);const[fadingOut,setFadingOut]=useState(false);const closeMenu=()=>{setFadingOut(true);setTimeout(()=>{setIsOpen(false);setFadingOut(false)},150)};return React.createElement(React.Fragment,null,React.createElement(NavigationMenu,{className:cn(className,"flex w-full"),onValueChange:val=>val?setIsOpen(true):closeMenu(),delayDuration:0},React.createElement(NavigationMenuList,{className:"flex list-none center"},menuItems.map(({name,content,link,panelClassName})=>content?React.createElement(NavigationMenuItem,{key:name},React.createElement(NavigationMenuTrigger,{className:cn("group outline-none focus:outline-none select-none cursor-pointer relative","rounded-md hover:bg-neutral-100 dark:hover:bg-neutral-1200","[&[data-state=open]]:bg-neutral-100 dark:[&[data-state=open]]:bg-neutral-1200","[&[data-state=open]]:text-neutral-1300 dark:[&[data-state=open]]:text-neutral-000",DEFAULT_MENU_LINK_STYLING,menuLinkClassName)},name),React.createElement(NavigationMenuContent,{className:cn("absolute right-0 top-0 p-24 z-10",PANEL_ANIMATION,panelClassName)},content)):React.createElement(NavigationMenuLink,{key:name,href:link,className:cn(DEFAULT_MENU_LINK_STYLING,menuLinkClassName)},name))),React.createElement("div",{className:cn("absolute top-full",flyOutClassName)},React.createElement(NavigationMenuViewport,{className:cn(DEFAULT_VIEWPORT_STYLING,viewPortClassName)}))),isOpen?React.createElement(FlyOverlay,{className:"bg-neutral-1300 opacity-10 z-20 h-screen mix-blend-multiply",fadingOut:fadingOut}):null)};export default Flyout;
 //# sourceMappingURL=Flyout.js.map

package/core/Flyout.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/core/Flyout.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  NavigationMenuContent,\n  NavigationMenuViewport,\n  NavigationMenuLink,\n} from \"@radix-ui/react-navigation-menu\";\nimport cn from \"./utils/cn\";\nimport { componentMaxHeight, HEADER_HEIGHT } from \"./utils/heights\";\n\n/**\n * Props for the Flyout component.\n */\ntype FlyoutProps = {\n  /**\n   * Array of menu items to be displayed in the flyout.\n   */\n  menuItems: {\n    /**\n     * Name for the menu item.\n     */\n    name: string;\n    /**\n     * Optional content to be displayed in the flyout panel.\n     */\n    content?: React.ReactNode;\n    /**\n     * Optional link for the menu item.\n     */\n    link?: string;\n    /**\n     * Optional styling for the flyout panel.\n     */\n    panelClassName?: string;\n  }[];\n  /**\n   * Optional class name for the flyout container.\n   */\n  className?: string;\n  /**\n   * Optional class name for the flyout element.\n   */\n  flyOutClassName?: string;\n  /**\n   * Optional class name for the menu link.\n   */\n  menuLinkClassName?: string;\n  /**\n   * Optional class name for the viewport.\n   */\n  viewPortClassName?: string;\n};\n\nconst DEFAULT_MENU_LINK_STYLING =\n  \"ui-text-menu3 font-bold text-neutral-1000 dark:neutral-300 hover:text-neutral-1300 dark:hover:text-neutral-000 px-12 py-8 flex items-center justify-between\";\nconst DEFAULT_VIEWPORT_STYLING =\n  \"relative overflow-hidden w-full h-[var(--radix-navigation-menu-viewport-height)] origin-[top_center] transition-[width,_height] duration-300 data-[state=closed]:animate-scale-out data-[state=open]:animate-scale-in sm:w-[var(--radix-navigation-menu-viewport-width)]\";\nconst PANEL_ANIMATION =\n  \"data-[motion=from-end]:animate-enter-from-right data-[motion=from-start]:animate-enter-from-left data-[motion=to-end]:animate-exit-to-right data-[motion=to-start]:animate-exit-to-left\";\n\nconst FlyOverlay = ({\n  className,\n  fadingOut,\n}: {\n  className: string;\n  fadingOut: boolean;\n}) => (\n  <div\n    className={cn(\n      \"absolute left-0 right-0 h-screen w-full opacity-0\",\n      {\n        \"animate-[fade-in-ten-percent_150ms_ease-in-out_forwards]\": !fadingOut,\n        \"animate-[fade-out-ten-percent_150ms_ease-in-out_forwards]\": fadingOut,\n      },\n      className,\n    )}\n    style={{ height: componentMaxHeight(HEADER_HEIGHT), top: HEADER_HEIGHT }}\n  ></div>\n);\n\nconst Flyout = ({\n  menuItems,\n  className,\n  flyOutClassName,\n  menuLinkClassName,\n  viewPortClassName,\n}: FlyoutProps) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const [fadingOut, setFadingOut] = useState(false);\n\n  const closeMenu = () => {\n    setFadingOut(true);\n\n    setTimeout(() => {\n      setIsOpen(false);\n      setFadingOut(false);\n    }, 150);\n  };\n\n  return (\n    <>\n      <NavigationMenu\n        className={cn(className, \"flex w-full\")}\n        onValueChange={(val) => (val ? setIsOpen(true) : closeMenu())}\n        delayDuration={0}\n      >\n        <NavigationMenuList className=\"flex list-none center\">\n          {menuItems.map(({ name, content, link, panelClassName }) =>\n            content ? (\n              <NavigationMenuItem key={name}>\n                <NavigationMenuTrigger\n                  className={cn(\n                    \"group outline-none focus:outline-none select-none cursor-pointer relative\",\n                    \"rounded-md hover:bg-neutral-100 dark:hover:bg-neutral-1200\",\n                    \"[&[data-state=open]]:bg-neutral-100 dark:[&[data-state=open]]:bg-neutral-1200\",\n                    \"[&[data-state=open]]:text-neutral-1300 dark:[&[data-state=open]]:text-neutral-000\",\n                    DEFAULT_MENU_LINK_STYLING,\n                    menuLinkClassName,\n                  )}\n                >\n                  {name}\n                </NavigationMenuTrigger>\n                <NavigationMenuContent\n                  className={cn(\n                    \"absolute right-0 top-0 p-24 z-10\",\n                    PANEL_ANIMATION,\n                    panelClassName,\n                  )}\n                >\n                  {content}\n                </NavigationMenuContent>\n              </NavigationMenuItem>\n            ) : (\n              <NavigationMenuLink\n                key={name}\n                href={link}\n                className={cn(DEFAULT_MENU_LINK_STYLING, menuLinkClassName)}\n              >\n                {name}\n              </NavigationMenuLink>\n            ),\n          )}\n        </NavigationMenuList>\n\n        <div className={cn(\"absolute top-full\", flyOutClassName)}>\n          <NavigationMenuViewport\n            className={cn(DEFAULT_VIEWPORT_STYLING, viewPortClassName)}\n          />\n        </div>\n      </NavigationMenu>\n      {isOpen ? (\n        <FlyOverlay\n          className=\"bg-neutral-1300 opacity-10 z-20 h-screen mix-blend-multiply\"\n          fadingOut={fadingOut}\n        />\n      ) : null}\n    </>\n  );\n};\n\nexport default Flyout;\n"],"names":["React","useState","NavigationMenu","NavigationMenuItem","NavigationMenuList","NavigationMenuTrigger","NavigationMenuContent","NavigationMenuViewport","NavigationMenuLink","cn","componentMaxHeight","HEADER_HEIGHT","DEFAULT_MENU_LINK_STYLING","DEFAULT_VIEWPORT_STYLING","PANEL_ANIMATION","FlyOverlay","className","fadingOut","div","style","height","top","Flyout","menuItems","flyOutClassName","menuLinkClassName","viewPortClassName","isOpen","setIsOpen","setFadingOut","closeMenu","setTimeout","onValueChange","val","delayDuration","map","name","content","link","panelClassName","key","href"],"mappings":"AAAA,OAAOA,OAASC,QAAQ,KAAQ,OAAQ,AACxC,QACEC,cAAc,CACdC,kBAAkB,CAClBC,kBAAkB,CAClBC,qBAAqB,CACrBC,qBAAqB,CACrBC,sBAAsB,CACtBC,kBAAkB,KACb,iCAAkC,AACzC,QAAOC,OAAQ,YAAa,AAC5B,QAASC,kBAAkB,CAAEC,aAAa,KAAQ,iBAAkB,CA6CpE,MAAMC,0BACJ,8JACF,MAAMC,yBACJ,2QACF,MAAMC,gBACJ,0LAEF,MAAMC,WAAa,CAAC,CAClBC,SAAS,CACTC,SAAS,CAIV,GACC,oBAACC,OACCF,UAAWP,GACT,oDACA,CACE,2DAA4D,CAACQ,UAC7D,4DAA6DA,SAC/D,EACAD,WAEFG,MAAO,CAAEC,OAAQV,mBAAmBC,eAAgBU,IAAKV,aAAc,IAI3E,MAAMW,OAAS,CAAC,CACdC,SAAS,CACTP,SAAS,CACTQ,eAAe,CACfC,iBAAiB,CACjBC,iBAAiB,CACL,IACZ,KAAM,CAACC,OAAQC,UAAU,CAAG3B,SAAS,OACrC,KAAM,CAACgB,UAAWY,aAAa,CAAG5B,SAAS,OAE3C,MAAM6B,UAAY,KAChBD,aAAa,MAEbE,WAAW,KACTH,UAAU,OACVC,aAAa,MACf,EAAG,IACL,EAEA,OACE,wCACE,oBAAC3B,gBACCc,UAAWP,GAAGO,UAAW,eACzBgB,cAAe,AAACC,KAASA,IAAML,UAAU,MAAQE,YACjDI,cAAe,GAEf,oBAAC9B,oBAAmBY,UAAU,yBAC3BO,UAAUY,GAAG,CAAC,CAAC,CAAEC,IAAI,CAAEC,OAAO,CAAEC,IAAI,CAAEC,cAAc,CAAE,GACrDF,QACE,oBAAClC,oBAAmBqC,IAAKJ,MACvB,oBAAC/B,uBACCW,UAAWP,GACT,4EACA,6DACA,gFACA,oFACAG,0BACAa,oBAGDW,MAEH,oBAAC9B,uBACCU,UAAWP,GACT,mCACAK,gBACAyB,iBAGDF,UAIL,oBAAC7B,oBACCgC,IAAKJ,KACLK,KAAMH,KACNtB,UAAWP,GAAGG,0BAA2Ba,oBAExCW,QAMT,oBAAClB,OAAIF,UAAWP,GAAG,oBAAqBe,kBACtC,oBAACjB,wBACCS,UAAWP,GAAGI,yBAA0Ba,uBAI7CC,OACC,oBAACZ,YACCC,UAAU,8DACVC,UAAWA,YAEX,KAGV,CAEA,gBAAeK,MAAO"}
+{"version":3,"sources":["../../src/core/Flyout.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  NavigationMenuContent,\n  NavigationMenuViewport,\n  NavigationMenuLink,\n} from \"@radix-ui/react-navigation-menu\";\nimport cn from \"./utils/cn\";\nimport { componentMaxHeight, HEADER_HEIGHT } from \"./utils/heights\";\n\n/**\n * Props for the Flyout component.\n */\ntype FlyoutProps = {\n  /**\n   * Array of menu items to be displayed in the flyout.\n   */\n  menuItems: {\n    /**\n     * Name for the menu item.\n     */\n    name: string;\n    /**\n     * Optional content to be displayed in the flyout panel.\n     */\n    content?: React.ReactNode;\n    /**\n     * Optional link for the menu item.\n     */\n    link?: string;\n    /**\n     * Optional styling for the flyout panel.\n     */\n    panelClassName?: string;\n  }[];\n  /**\n   * Optional class name for the flyout container.\n   */\n  className?: string;\n  /**\n   * Optional class name for the flyout element.\n   */\n  flyOutClassName?: string;\n  /**\n   * Optional class name for the menu link.\n   */\n  menuLinkClassName?: string;\n  /**\n   * Optional class name for the viewport.\n   */\n  viewPortClassName?: string;\n};\n\nconst DEFAULT_MENU_LINK_STYLING =\n  \"ui-text-label3 font-bold text-neutral-1000 dark:text-neutral-300 hover:text-neutral-1300 dark:hover:text-neutral-000 px-12 py-8 flex items-center justify-between\";\nconst DEFAULT_VIEWPORT_STYLING =\n  \"relative overflow-hidden w-full h-[var(--radix-navigation-menu-viewport-height)] origin-[top_center] transition-[width,_height] duration-300 data-[state=closed]:animate-scale-out data-[state=open]:animate-scale-in sm:w-[var(--radix-navigation-menu-viewport-width)]\";\nconst PANEL_ANIMATION =\n  \"data-[motion=from-end]:animate-enter-from-right data-[motion=from-start]:animate-enter-from-left data-[motion=to-end]:animate-exit-to-right data-[motion=to-start]:animate-exit-to-left\";\n\nconst FlyOverlay = ({\n  className,\n  fadingOut,\n}: {\n  className: string;\n  fadingOut: boolean;\n}) => (\n  <div\n    className={cn(\n      \"absolute left-0 right-0 h-screen w-full opacity-0\",\n      {\n        \"animate-[fade-in-ten-percent_150ms_ease-in-out_forwards]\": !fadingOut,\n        \"animate-[fade-out-ten-percent_150ms_ease-in-out_forwards]\": fadingOut,\n      },\n      className,\n    )}\n    style={{ height: componentMaxHeight(HEADER_HEIGHT), top: HEADER_HEIGHT }}\n  ></div>\n);\n\nconst Flyout = ({\n  menuItems,\n  className,\n  flyOutClassName,\n  menuLinkClassName,\n  viewPortClassName,\n}: FlyoutProps) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const [fadingOut, setFadingOut] = useState(false);\n\n  const closeMenu = () => {\n    setFadingOut(true);\n\n    setTimeout(() => {\n      setIsOpen(false);\n      setFadingOut(false);\n    }, 150);\n  };\n\n  return (\n    <>\n      <NavigationMenu\n        className={cn(className, \"flex w-full\")}\n        onValueChange={(val) => (val ? setIsOpen(true) : closeMenu())}\n        delayDuration={0}\n      >\n        <NavigationMenuList className=\"flex list-none center\">\n          {menuItems.map(({ name, content, link, panelClassName }) =>\n            content ? (\n              <NavigationMenuItem key={name}>\n                <NavigationMenuTrigger\n                  className={cn(\n                    \"group outline-none focus:outline-none select-none cursor-pointer relative\",\n                    \"rounded-md hover:bg-neutral-100 dark:hover:bg-neutral-1200\",\n                    \"[&[data-state=open]]:bg-neutral-100 dark:[&[data-state=open]]:bg-neutral-1200\",\n                    \"[&[data-state=open]]:text-neutral-1300 dark:[&[data-state=open]]:text-neutral-000\",\n                    DEFAULT_MENU_LINK_STYLING,\n                    menuLinkClassName,\n                  )}\n                >\n                  {name}\n                </NavigationMenuTrigger>\n                <NavigationMenuContent\n                  className={cn(\n                    \"absolute right-0 top-0 p-24 z-10\",\n                    PANEL_ANIMATION,\n                    panelClassName,\n                  )}\n                >\n                  {content}\n                </NavigationMenuContent>\n              </NavigationMenuItem>\n            ) : (\n              <NavigationMenuLink\n                key={name}\n                href={link}\n                className={cn(DEFAULT_MENU_LINK_STYLING, menuLinkClassName)}\n              >\n                {name}\n              </NavigationMenuLink>\n            ),\n          )}\n        </NavigationMenuList>\n\n        <div className={cn(\"absolute top-full\", flyOutClassName)}>\n          <NavigationMenuViewport\n            className={cn(DEFAULT_VIEWPORT_STYLING, viewPortClassName)}\n          />\n        </div>\n      </NavigationMenu>\n      {isOpen ? (\n        <FlyOverlay\n          className=\"bg-neutral-1300 opacity-10 z-20 h-screen mix-blend-multiply\"\n          fadingOut={fadingOut}\n        />\n      ) : null}\n    </>\n  );\n};\n\nexport default Flyout;\n"],"names":["React","useState","NavigationMenu","NavigationMenuItem","NavigationMenuList","NavigationMenuTrigger","NavigationMenuContent","NavigationMenuViewport","NavigationMenuLink","cn","componentMaxHeight","HEADER_HEIGHT","DEFAULT_MENU_LINK_STYLING","DEFAULT_VIEWPORT_STYLING","PANEL_ANIMATION","FlyOverlay","className","fadingOut","div","style","height","top","Flyout","menuItems","flyOutClassName","menuLinkClassName","viewPortClassName","isOpen","setIsOpen","setFadingOut","closeMenu","setTimeout","onValueChange","val","delayDuration","map","name","content","link","panelClassName","key","href"],"mappings":"AAAA,OAAOA,OAASC,QAAQ,KAAQ,OAAQ,AACxC,QACEC,cAAc,CACdC,kBAAkB,CAClBC,kBAAkB,CAClBC,qBAAqB,CACrBC,qBAAqB,CACrBC,sBAAsB,CACtBC,kBAAkB,KACb,iCAAkC,AACzC,QAAOC,OAAQ,YAAa,AAC5B,QAASC,kBAAkB,CAAEC,aAAa,KAAQ,iBAAkB,CA6CpE,MAAMC,0BACJ,oKACF,MAAMC,yBACJ,2QACF,MAAMC,gBACJ,0LAEF,MAAMC,WAAa,CAAC,CAClBC,SAAS,CACTC,SAAS,CAIV,GACC,oBAACC,OACCF,UAAWP,GACT,oDACA,CACE,2DAA4D,CAACQ,UAC7D,4DAA6DA,SAC/D,EACAD,WAEFG,MAAO,CAAEC,OAAQV,mBAAmBC,eAAgBU,IAAKV,aAAc,IAI3E,MAAMW,OAAS,CAAC,CACdC,SAAS,CACTP,SAAS,CACTQ,eAAe,CACfC,iBAAiB,CACjBC,iBAAiB,CACL,IACZ,KAAM,CAACC,OAAQC,UAAU,CAAG3B,SAAS,OACrC,KAAM,CAACgB,UAAWY,aAAa,CAAG5B,SAAS,OAE3C,MAAM6B,UAAY,KAChBD,aAAa,MAEbE,WAAW,KACTH,UAAU,OACVC,aAAa,MACf,EAAG,IACL,EAEA,OACE,wCACE,oBAAC3B,gBACCc,UAAWP,GAAGO,UAAW,eACzBgB,cAAe,AAACC,KAASA,IAAML,UAAU,MAAQE,YACjDI,cAAe,GAEf,oBAAC9B,oBAAmBY,UAAU,yBAC3BO,UAAUY,GAAG,CAAC,CAAC,CAAEC,IAAI,CAAEC,OAAO,CAAEC,IAAI,CAAEC,cAAc,CAAE,GACrDF,QACE,oBAAClC,oBAAmBqC,IAAKJ,MACvB,oBAAC/B,uBACCW,UAAWP,GACT,4EACA,6DACA,gFACA,oFACAG,0BACAa,oBAGDW,MAEH,oBAAC9B,uBACCU,UAAWP,GACT,mCACAK,gBACAyB,iBAGDF,UAIL,oBAAC7B,oBACCgC,IAAKJ,KACLK,KAAMH,KACNtB,UAAWP,GAAGG,0BAA2Ba,oBAExCW,QAMT,oBAAClB,OAAIF,UAAWP,GAAG,oBAAqBe,kBACtC,oBAACjB,wBACCS,UAAWP,GAAGI,yBAA0Ba,uBAI7CC,OACC,oBAACZ,YACCC,UAAU,8DACVC,UAAWA,YAEX,KAGV,CAEA,gBAAeK,MAAO"}

package/core/Footer.js

@@ -1,2 +1,2 @@
-import React from"react";import cn from"./utils/cn";import Icon from"./Icon";import Status,{StatusUrl}from"./Status";import Logo from"./Logo";import Badge from"./Badge";import{bottomFooterLinks,footerLinks,socialLinks}from"./Footer/data";import{ablyAwards}from"./Meganav/data";const Footer=()=>{const textColorClassnames="ui-text-menu3 font-medium transition-colors text-neutral-1000 dark:text-neutral-300 hover:text-neutral-1300 hover:dark:text-neutral-000 active:text-neutral-800 active:dark:text-neutral-400 focus:outline focus:outline-gui-focus";return React.createElement("footer",{className:"w-full bg-neutral-100 dark:bg-neutral-1200 border-t border-neutral-300 dark:border-neutral-1000","data-id":"footer"},React.createElement("div",{className:"max-w-screen-xl mx-auto ui-grid-px pt-40 sm:pt-48 md:pt-64 pb-40"},React.createElement("div",{className:"flex flex-col sm:flex-row gap-x-24 gap-y-48 mb-64 justify-between"},React.createElement("div",{className:"flex-1 flex flex-col gap-24"},["light","dark"].map(theme=>React.createElement(Logo,{key:theme,href:"/",theme:theme,additionalLinkAttrs:{className:cn("focus-base rounded w-[102px]",{"flex dark:hidden":theme==="light","hidden dark:flex":theme==="dark"})}})),React.createElement(Status,{statusUrl:StatusUrl,showDescription:true}),React.createElement("div",{className:"flex gap-x-24"},socialLinks.map(link=>React.createElement("a",{key:link.key,href:link.link,target:"_blank",rel:"noreferrer noopener","aria-label":`Visit Ably on ${link.key}`,className:"w-20 h-20 group/social-icon"},React.createElement(Icon,{name:link.monoIcon,size:"20px",additionalCSS:"text-neutral-1000 dark:text-neutral-300 group-hover/social-icon:hidden"}),React.createElement(Icon,{name:link.colorIcon,size:"20px",additionalCSS:"hidden group-hover/social-icon:flex"})))),React.createElement("div",{className:"flex gap-8 mt-16"},ablyAwards.map(award=>React.createElement("img",{key:award.desc,src:award.image,alt:award.desc,width:"57",height:"64"})))),React.createElement("div",{className:"flex-1 md:flex-[2] flex flex-row flex-wrap gap-x-24 gap-y-48"},footerLinks.map(({title,links})=>React.createElement("div",{key:title,className:"flex-1 basis-1/3 md:basis-1"},React.createElement("h3",{className:"ui-text-overline2 text-neutral-700 dark:text-neutral-600 mb-16"},title),React.createElement("ul",{className:"flex flex-col gap-y-12"},links.map(({label,link,badge})=>React.createElement("li",{key:label,className:"flex gap-x-8"},React.createElement("a",{href:link,className:textColorClassnames,"aria-label":`Visit ${label}`},label),badge&&React.createElement(Badge,{size:"xs",className:"ui-text-p4 font-[10px]"},badge)))))))),React.createElement("div",{className:"pt-24 border-t border-neutral-300 dark:border-neutral-1000"},React.createElement("div",{className:"flex gap-24"},bottomFooterLinks.map(link=>React.createElement("a",{key:link.label,href:link.link,className:textColorClassnames,"aria-label":`Visit ${link.label}`},link.label))))))};export default Footer;
+import React from"react";import cn from"./utils/cn";import Icon from"./Icon";import Status,{StatusUrl}from"./Status";import Logo from"./Logo";import Badge from"./Badge";import{bottomFooterLinks,footerLinks,socialLinks}from"./Footer/data";import{ablyAwards}from"./Meganav/data";const Footer=()=>{const textColorClassnames="ui-text-label3 font-medium transition-colors text-neutral-1000 dark:text-neutral-300 hover:text-neutral-1300 hover:dark:text-neutral-000 active:text-neutral-800 active:dark:text-neutral-400 focus:outline focus:outline-gui-focus";return React.createElement("footer",{className:"w-full bg-neutral-100 dark:bg-neutral-1200 border-t border-neutral-300 dark:border-neutral-1000","data-id":"footer"},React.createElement("div",{className:"max-w-screen-xl mx-auto ui-grid-px pt-40 sm:pt-48 md:pt-64 pb-40"},React.createElement("div",{className:"flex flex-col sm:flex-row gap-x-24 gap-y-48 mb-64 justify-between"},React.createElement("div",{className:"flex-1 flex flex-col gap-24"},["light","dark"].map(theme=>React.createElement(Logo,{key:theme,href:"/",theme:theme,additionalLinkAttrs:{className:cn("focus-base rounded w-[102px]",{"flex dark:hidden":theme==="light","hidden dark:flex":theme==="dark"})}})),React.createElement(Status,{statusUrl:StatusUrl,showDescription:true}),React.createElement("div",{className:"flex gap-x-24"},socialLinks.map(link=>React.createElement("a",{key:link.key,href:link.link,target:"_blank",rel:"noreferrer noopener","aria-label":`Visit Ably on ${link.key}`,className:"w-20 h-20 group/social-icon"},React.createElement(Icon,{name:link.monoIcon,size:"20px",additionalCSS:"text-neutral-1000 dark:text-neutral-300 group-hover/social-icon:hidden"}),React.createElement(Icon,{name:link.colorIcon,size:"20px",additionalCSS:"hidden group-hover/social-icon:flex"})))),React.createElement("div",{className:"flex gap-8 mt-16"},ablyAwards.map(award=>React.createElement("img",{key:award.desc,src:award.image,alt:award.desc,width:"57",height:"64"})))),React.createElement("div",{className:"flex-1 md:flex-[2] flex flex-row flex-wrap gap-x-24 gap-y-48"},footerLinks.map(({title,links})=>React.createElement("div",{key:title,className:"flex-1 basis-1/3 md:basis-1"},React.createElement("h3",{className:"ui-text-overline2 text-neutral-700 dark:text-neutral-600 mb-16"},title),React.createElement("ul",{className:"flex flex-col gap-y-12"},links.map(({label,link,badge})=>React.createElement("li",{key:label,className:"flex gap-x-8"},React.createElement("a",{href:link,className:textColorClassnames,"aria-label":`Visit ${label}`},label),badge&&React.createElement(Badge,{size:"xs",className:"ui-text-p4 font-[10px]"},badge)))))))),React.createElement("div",{className:"pt-24 border-t border-neutral-300 dark:border-neutral-1000"},React.createElement("div",{className:"flex gap-24"},bottomFooterLinks.map(link=>React.createElement("a",{key:link.label,href:link.link,className:textColorClassnames,"aria-label":`Visit ${link.label}`},link.label))))))};export default Footer;
 //# sourceMappingURL=Footer.js.map

package/core/Footer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/core/Footer.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"./utils/cn\";\nimport Icon from \"./Icon\";\nimport Status, { StatusUrl } from \"./Status\";\nimport { Theme } from \"./styles/colors/types\";\nimport Logo from \"./Logo\";\nimport Badge from \"./Badge\";\nimport { bottomFooterLinks, footerLinks, socialLinks } from \"./Footer/data\";\nimport { ablyAwards } from \"./Meganav/data\";\n\nconst Footer = () => {\n  const textColorClassnames =\n    \"ui-text-menu3 font-medium transition-colors text-neutral-1000 dark:text-neutral-300 hover:text-neutral-1300 hover:dark:text-neutral-000 active:text-neutral-800 active:dark:text-neutral-400 focus:outline focus:outline-gui-focus\";\n\n  return (\n    <footer\n      className=\"w-full bg-neutral-100 dark:bg-neutral-1200 border-t border-neutral-300 dark:border-neutral-1000\"\n      data-id=\"footer\"\n    >\n      <div className=\"max-w-screen-xl mx-auto ui-grid-px pt-40 sm:pt-48 md:pt-64 pb-40\">\n        <div className=\"flex flex-col sm:flex-row gap-x-24 gap-y-48 mb-64 justify-between\">\n          <div className=\"flex-1 flex flex-col gap-24\">\n            {([\"light\", \"dark\"] as Theme[]).map((theme) => (\n              <Logo\n                key={theme}\n                href=\"/\"\n                theme={theme}\n                additionalLinkAttrs={{\n                  className: cn(\"focus-base rounded w-[102px]\", {\n                    \"flex dark:hidden\": theme === \"light\",\n                    \"hidden dark:flex\": theme === \"dark\",\n                  }),\n                }}\n              />\n            ))}\n\n            <Status statusUrl={StatusUrl} showDescription />\n\n            <div className=\"flex gap-x-24\">\n              {socialLinks.map((link) => (\n                <a\n                  key={link.key}\n                  href={link.link}\n                  target=\"_blank\"\n                  rel=\"noreferrer noopener\"\n                  aria-label={`Visit Ably on ${link.key}`}\n                  className=\"w-20 h-20 group/social-icon\"\n                >\n                  <Icon\n                    name={link.monoIcon}\n                    size=\"20px\"\n                    additionalCSS=\"text-neutral-1000 dark:text-neutral-300 group-hover/social-icon:hidden\"\n                  />\n                  <Icon\n                    name={link.colorIcon}\n                    size=\"20px\"\n                    additionalCSS=\"hidden group-hover/social-icon:flex\"\n                  />\n                </a>\n              ))}\n            </div>\n            <div className=\"flex gap-8 mt-16\">\n              {ablyAwards.map((award) => (\n                <img\n                  key={award.desc}\n                  src={award.image}\n                  alt={award.desc}\n                  width=\"57\"\n                  height=\"64\"\n                />\n              ))}\n            </div>\n          </div>\n          <div className=\"flex-1 md:flex-[2] flex flex-row flex-wrap gap-x-24 gap-y-48\">\n            {footerLinks.map(({ title, links }) => (\n              <div key={title} className=\"flex-1 basis-1/3 md:basis-1\">\n                <h3 className=\"ui-text-overline2 text-neutral-700 dark:text-neutral-600 mb-16\">\n                  {title}\n                </h3>\n                <ul className=\"flex flex-col gap-y-12\">\n                  {links.map(({ label, link, badge }) => (\n                    <li key={label} className=\"flex gap-x-8\">\n                      <a\n                        href={link}\n                        className={textColorClassnames}\n                        aria-label={`Visit ${label}`}\n                      >\n                        {label}\n                      </a>\n                      {badge && (\n                        <Badge size=\"xs\" className=\"ui-text-p4 font-[10px]\">\n                          {badge}\n                        </Badge>\n                      )}\n                    </li>\n                  ))}\n                </ul>\n              </div>\n            ))}\n          </div>\n        </div>\n\n        <div className=\"pt-24 border-t border-neutral-300 dark:border-neutral-1000\">\n          <div className=\"flex gap-24\">\n            {bottomFooterLinks.map((link) => (\n              <a\n                key={link.label}\n                href={link.link}\n                className={textColorClassnames}\n                aria-label={`Visit ${link.label}`}\n              >\n                {link.label}\n              </a>\n            ))}\n          </div>\n        </div>\n      </div>\n    </footer>\n  );\n};\n\nexport default Footer;\n"],"names":["React","cn","Icon","Status","StatusUrl","Logo","Badge","bottomFooterLinks","footerLinks","socialLinks","ablyAwards","Footer","textColorClassnames","footer","className","data-id","div","map","theme","key","href","additionalLinkAttrs","statusUrl","showDescription","link","a","target","rel","aria-label","name","monoIcon","size","additionalCSS","colorIcon","award","img","desc","src","image","alt","width","height","title","links","h3","ul","label","badge","li"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QAAOC,OAAQ,YAAa,AAC5B,QAAOC,SAAU,QAAS,AAC1B,QAAOC,QAAUC,SAAS,KAAQ,UAAW,AAE7C,QAAOC,SAAU,QAAS,AAC1B,QAAOC,UAAW,SAAU,AAC5B,QAASC,iBAAiB,CAAEC,WAAW,CAAEC,WAAW,KAAQ,eAAgB,AAC5E,QAASC,UAAU,KAAQ,gBAAiB,CAE5C,MAAMC,OAAS,KACb,MAAMC,oBACJ,qOAEF,OACE,oBAACC,UACCC,UAAU,kGACVC,UAAQ,UAER,oBAACC,OAAIF,UAAU,oEACb,oBAACE,OAAIF,UAAU,qEACb,oBAACE,OAAIF,UAAU,+BACZ,AAAC,CAAC,QAAS,OAAO,CAAaG,GAAG,CAAC,AAACC,OACnC,oBAACb,MACCc,IAAKD,MACLE,KAAK,IACLF,MAAOA,MACPG,oBAAqB,CACnBP,UAAWb,GAAG,+BAAgC,CAC5C,mBAAoBiB,QAAU,QAC9B,mBAAoBA,QAAU,MAChC,EACF,KAIJ,oBAACf,QAAOmB,UAAWlB,UAAWmB,gBAAAA,OAE9B,oBAACP,OAAIF,UAAU,iBACZL,YAAYQ,GAAG,CAAC,AAACO,MAChB,oBAACC,KACCN,IAAKK,KAAKL,GAAG,CACbC,KAAMI,KAAKA,IAAI,CACfE,OAAO,SACPC,IAAI,sBACJC,aAAY,CAAC,cAAc,EAAEJ,KAAKL,GAAG,CAAC,CAAC,CACvCL,UAAU,+BAEV,oBAACZ,MACC2B,KAAML,KAAKM,QAAQ,CACnBC,KAAK,OACLC,cAAc,2EAEhB,oBAAC9B,MACC2B,KAAML,KAAKS,SAAS,CACpBF,KAAK,OACLC,cAAc,2CAKtB,oBAAChB,OAAIF,UAAU,oBACZJ,WAAWO,GAAG,CAAC,AAACiB,OACf,oBAACC,OACChB,IAAKe,MAAME,IAAI,CACfC,IAAKH,MAAMI,KAAK,CAChBC,IAAKL,MAAME,IAAI,CACfI,MAAM,KACNC,OAAO,UAKf,oBAACzB,OAAIF,UAAU,gEACZN,YAAYS,GAAG,CAAC,CAAC,CAAEyB,KAAK,CAAEC,KAAK,CAAE,GAChC,oBAAC3B,OAAIG,IAAKuB,MAAO5B,UAAU,+BACzB,oBAAC8B,MAAG9B,UAAU,kEACX4B,OAEH,oBAACG,MAAG/B,UAAU,0BACX6B,MAAM1B,GAAG,CAAC,CAAC,CAAE6B,KAAK,CAAEtB,IAAI,CAAEuB,KAAK,CAAE,GAChC,oBAACC,MAAG7B,IAAK2B,MAAOhC,UAAU,gBACxB,oBAACW,KACCL,KAAMI,KACNV,UAAWF,oBACXgB,aAAY,CAAC,MAAM,EAAEkB,MAAM,CAAC,EAE3BA,OAEFC,OACC,oBAACzC,OAAMyB,KAAK,KAAKjB,UAAU,0BACxBiC,cAWnB,oBAAC/B,OAAIF,UAAU,8DACb,oBAACE,OAAIF,UAAU,eACZP,kBAAkBU,GAAG,CAAC,AAACO,MACtB,oBAACC,KACCN,IAAKK,KAAKsB,KAAK,CACf1B,KAAMI,KAAKA,IAAI,CACfV,UAAWF,oBACXgB,aAAY,CAAC,MAAM,EAAEJ,KAAKsB,KAAK,CAAC,CAAC,EAEhCtB,KAAKsB,KAAK,MAQ3B,CAEA,gBAAenC,MAAO"}
+{"version":3,"sources":["../../src/core/Footer.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"./utils/cn\";\nimport Icon from \"./Icon\";\nimport Status, { StatusUrl } from \"./Status\";\nimport { Theme } from \"./styles/colors/types\";\nimport Logo from \"./Logo\";\nimport Badge from \"./Badge\";\nimport { bottomFooterLinks, footerLinks, socialLinks } from \"./Footer/data\";\nimport { ablyAwards } from \"./Meganav/data\";\n\nconst Footer = () => {\n  const textColorClassnames =\n    \"ui-text-label3 font-medium transition-colors text-neutral-1000 dark:text-neutral-300 hover:text-neutral-1300 hover:dark:text-neutral-000 active:text-neutral-800 active:dark:text-neutral-400 focus:outline focus:outline-gui-focus\";\n\n  return (\n    <footer\n      className=\"w-full bg-neutral-100 dark:bg-neutral-1200 border-t border-neutral-300 dark:border-neutral-1000\"\n      data-id=\"footer\"\n    >\n      <div className=\"max-w-screen-xl mx-auto ui-grid-px pt-40 sm:pt-48 md:pt-64 pb-40\">\n        <div className=\"flex flex-col sm:flex-row gap-x-24 gap-y-48 mb-64 justify-between\">\n          <div className=\"flex-1 flex flex-col gap-24\">\n            {([\"light\", \"dark\"] as Theme[]).map((theme) => (\n              <Logo\n                key={theme}\n                href=\"/\"\n                theme={theme}\n                additionalLinkAttrs={{\n                  className: cn(\"focus-base rounded w-[102px]\", {\n                    \"flex dark:hidden\": theme === \"light\",\n                    \"hidden dark:flex\": theme === \"dark\",\n                  }),\n                }}\n              />\n            ))}\n\n            <Status statusUrl={StatusUrl} showDescription />\n\n            <div className=\"flex gap-x-24\">\n              {socialLinks.map((link) => (\n                <a\n                  key={link.key}\n                  href={link.link}\n                  target=\"_blank\"\n                  rel=\"noreferrer noopener\"\n                  aria-label={`Visit Ably on ${link.key}`}\n                  className=\"w-20 h-20 group/social-icon\"\n                >\n                  <Icon\n                    name={link.monoIcon}\n                    size=\"20px\"\n                    additionalCSS=\"text-neutral-1000 dark:text-neutral-300 group-hover/social-icon:hidden\"\n                  />\n                  <Icon\n                    name={link.colorIcon}\n                    size=\"20px\"\n                    additionalCSS=\"hidden group-hover/social-icon:flex\"\n                  />\n                </a>\n              ))}\n            </div>\n            <div className=\"flex gap-8 mt-16\">\n              {ablyAwards.map((award) => (\n                <img\n                  key={award.desc}\n                  src={award.image}\n                  alt={award.desc}\n                  width=\"57\"\n                  height=\"64\"\n                />\n              ))}\n            </div>\n          </div>\n          <div className=\"flex-1 md:flex-[2] flex flex-row flex-wrap gap-x-24 gap-y-48\">\n            {footerLinks.map(({ title, links }) => (\n              <div key={title} className=\"flex-1 basis-1/3 md:basis-1\">\n                <h3 className=\"ui-text-overline2 text-neutral-700 dark:text-neutral-600 mb-16\">\n                  {title}\n                </h3>\n                <ul className=\"flex flex-col gap-y-12\">\n                  {links.map(({ label, link, badge }) => (\n                    <li key={label} className=\"flex gap-x-8\">\n                      <a\n                        href={link}\n                        className={textColorClassnames}\n                        aria-label={`Visit ${label}`}\n                      >\n                        {label}\n                      </a>\n                      {badge && (\n                        <Badge size=\"xs\" className=\"ui-text-p4 font-[10px]\">\n                          {badge}\n                        </Badge>\n                      )}\n                    </li>\n                  ))}\n                </ul>\n              </div>\n            ))}\n          </div>\n        </div>\n\n        <div className=\"pt-24 border-t border-neutral-300 dark:border-neutral-1000\">\n          <div className=\"flex gap-24\">\n            {bottomFooterLinks.map((link) => (\n              <a\n                key={link.label}\n                href={link.link}\n                className={textColorClassnames}\n                aria-label={`Visit ${link.label}`}\n              >\n                {link.label}\n              </a>\n            ))}\n          </div>\n        </div>\n      </div>\n    </footer>\n  );\n};\n\nexport default Footer;\n"],"names":["React","cn","Icon","Status","StatusUrl","Logo","Badge","bottomFooterLinks","footerLinks","socialLinks","ablyAwards","Footer","textColorClassnames","footer","className","data-id","div","map","theme","key","href","additionalLinkAttrs","statusUrl","showDescription","link","a","target","rel","aria-label","name","monoIcon","size","additionalCSS","colorIcon","award","img","desc","src","image","alt","width","height","title","links","h3","ul","label","badge","li"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QAAOC,OAAQ,YAAa,AAC5B,QAAOC,SAAU,QAAS,AAC1B,QAAOC,QAAUC,SAAS,KAAQ,UAAW,AAE7C,QAAOC,SAAU,QAAS,AAC1B,QAAOC,UAAW,SAAU,AAC5B,QAASC,iBAAiB,CAAEC,WAAW,CAAEC,WAAW,KAAQ,eAAgB,AAC5E,QAASC,UAAU,KAAQ,gBAAiB,CAE5C,MAAMC,OAAS,KACb,MAAMC,oBACJ,sOAEF,OACE,oBAACC,UACCC,UAAU,kGACVC,UAAQ,UAER,oBAACC,OAAIF,UAAU,oEACb,oBAACE,OAAIF,UAAU,qEACb,oBAACE,OAAIF,UAAU,+BACZ,AAAC,CAAC,QAAS,OAAO,CAAaG,GAAG,CAAC,AAACC,OACnC,oBAACb,MACCc,IAAKD,MACLE,KAAK,IACLF,MAAOA,MACPG,oBAAqB,CACnBP,UAAWb,GAAG,+BAAgC,CAC5C,mBAAoBiB,QAAU,QAC9B,mBAAoBA,QAAU,MAChC,EACF,KAIJ,oBAACf,QAAOmB,UAAWlB,UAAWmB,gBAAAA,OAE9B,oBAACP,OAAIF,UAAU,iBACZL,YAAYQ,GAAG,CAAC,AAACO,MAChB,oBAACC,KACCN,IAAKK,KAAKL,GAAG,CACbC,KAAMI,KAAKA,IAAI,CACfE,OAAO,SACPC,IAAI,sBACJC,aAAY,CAAC,cAAc,EAAEJ,KAAKL,GAAG,CAAC,CAAC,CACvCL,UAAU,+BAEV,oBAACZ,MACC2B,KAAML,KAAKM,QAAQ,CACnBC,KAAK,OACLC,cAAc,2EAEhB,oBAAC9B,MACC2B,KAAML,KAAKS,SAAS,CACpBF,KAAK,OACLC,cAAc,2CAKtB,oBAAChB,OAAIF,UAAU,oBACZJ,WAAWO,GAAG,CAAC,AAACiB,OACf,oBAACC,OACChB,IAAKe,MAAME,IAAI,CACfC,IAAKH,MAAMI,KAAK,CAChBC,IAAKL,MAAME,IAAI,CACfI,MAAM,KACNC,OAAO,UAKf,oBAACzB,OAAIF,UAAU,gEACZN,YAAYS,GAAG,CAAC,CAAC,CAAEyB,KAAK,CAAEC,KAAK,CAAE,GAChC,oBAAC3B,OAAIG,IAAKuB,MAAO5B,UAAU,+BACzB,oBAAC8B,MAAG9B,UAAU,kEACX4B,OAEH,oBAACG,MAAG/B,UAAU,0BACX6B,MAAM1B,GAAG,CAAC,CAAC,CAAE6B,KAAK,CAAEtB,IAAI,CAAEuB,KAAK,CAAE,GAChC,oBAACC,MAAG7B,IAAK2B,MAAOhC,UAAU,gBACxB,oBAACW,KACCL,KAAMI,KACNV,UAAWF,oBACXgB,aAAY,CAAC,MAAM,EAAEkB,MAAM,CAAC,EAE3BA,OAEFC,OACC,oBAACzC,OAAMyB,KAAK,KAAKjB,UAAU,0BACxBiC,cAWnB,oBAAC/B,OAAIF,UAAU,8DACb,oBAACE,OAAIF,UAAU,eACZP,kBAAkBU,GAAG,CAAC,AAACO,MACtB,oBAACC,KACCN,IAAKK,KAAKsB,KAAK,CACf1B,KAAMI,KAAKA,IAAI,CACfV,UAAWF,oBACXgB,aAAY,CAAC,MAAM,EAAEJ,KAAKsB,KAAK,CAAC,CAAC,EAEhCtB,KAAKsB,KAAK,MAQ3B,CAEA,gBAAenC,MAAO"}

package/core/Header/HeaderLinks.js

@@ -1,2 +1,2 @@
-import React,{useRef}from"react";import Icon from"../Icon";import LinkButton from"../LinkButton";import cn from"../utils/cn";import DropdownMenu from"../DropdownMenu";const testSessionState={signedIn:false,logOut:{token:"0000",href:"accounts/sign_out"},accountName:"Ably"};export const HeaderLinks=({sessionState=testSessionState,headerLinks,searchButtonVisibility,searchButton,className})=>{const{signedIn,logOut}=sessionState;const formRef=useRef(null);const headerLinkClasses="ui-text-menu2 md:ui-text-menu3 !font-bold py-16 text-neutral-1300 dark:text-neutral-000 md:text-neutral-1000 dark:md:text-neutral-300 hover:text-neutral-1300 dark:hover:text-neutral-000 active:text-neutral-1300 dark:active:text-neutral-000 transition-colors";const dropdownMenuLinkClasses="block p-8 ui-text-menu3 font-semibold text-neutral-1000 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-1200 active:bg-neutral-200 dark:active:bg-neutral-1100 rounded-lg";const onClickLogout=e=>{e.preventDefault();formRef.current?.submit()};const DashboardLink=({className})=>React.createElement("a",{href:"/dashboard",className:className},"Dashboard");const LogoutForm=React.createElement("form",{ref:formRef,method:"post",action:logOut.href,className:"hidden"},React.createElement("input",{name:"_method",value:"delete",type:"hidden"}),React.createElement("input",{name:"authenticity_token",value:logOut.token,type:"hidden"}));return React.createElement("nav",{className:cn("flex md:flex-1 md:items-center md:justify-end flex-col md:flex-row border-t-[1px] border-neutral-300 md:border-t-0 md:gap-16 pt-12 pb-16 md:py-0",className)},signedIn&&React.createElement(React.Fragment,null,LogoutForm,React.createElement("div",{className:"block md:hidden"},React.createElement("div",{className:"flex flex-col border-b-[1px] border-neutral-300 px-16 pb-12 mb-12"},React.createElement("span",{className:"py-12 ui-text-sub-header text-[18px] text-neutral-700 dark:text-neutral-600 font-bold"},sessionState.accountName),React.createElement(DashboardLink,{className:headerLinkClasses})))),headerLinks?.map(({href,label,external})=>React.createElement("a",{key:href,className:cn(headerLinkClasses,"flex items-center gap-6 px-16 md:px-0 leading-none"),href:href,target:external?"_blank":undefined,rel:external?"noreferrer noopener":undefined},label,external&&React.createElement(Icon,{name:"icon-gui-arrow-top-right-on-square-mini",size:"20px"}))),searchButtonVisibility!=="mobile"?searchButton:null,signedIn?React.createElement(React.Fragment,null,React.createElement("div",{className:"hidden md:block relative"},React.createElement(DropdownMenu,null,React.createElement(DropdownMenu.Trigger,{description:`Account menu for ${sessionState.accountName}`},React.createElement("span",{className:"block text-ellipsis overflow-hidden whitespace-nowrap w-full max-w-[150px] leading-normal"},sessionState.accountName)),React.createElement(DropdownMenu.Content,{anchorPosition:"right",contentClassNames:"w-[240px] mt-[12px]"},React.createElement("div",{className:"p-8"},React.createElement(DashboardLink,{className:dropdownMenuLinkClasses}),React.createElement("a",{onClick:onClickLogout,href:"#",className:dropdownMenuLinkClasses},"Logout"))))),React.createElement("div",{className:"block md:hidden px-16 pt-16 pb-0"},React.createElement(LinkButton,{onClick:onClickLogout,variant:"secondary",className:"w-full md:ui-button-secondary-xs","aria-label":"Logout",rightIcon:"icon-gui-arrow-right-end-on-rectangle-outline"},"Logout"))):React.createElement("div",{className:"flex gap-12 pt-12 md:py-0 px-16 md:px-0"},React.createElement(LinkButton,{href:"/login",variant:"secondary",className:"flex-1 md:flex-none md:ui-button-secondary-xs hover:text-neutral-1300 dark:hover:text-neutral-000"},"Login"),React.createElement(LinkButton,{href:"/sign-up",variant:"primary",className:"flex-1 md:flex-none md:ui-button-primary-xs hover:text-neutral-000 dark:hover:text-neutral-1300"},"Start free")))};
+import React,{useRef}from"react";import Icon from"../Icon";import LinkButton from"../LinkButton";import cn from"../utils/cn";import DropdownMenu from"../DropdownMenu";const testSessionState={signedIn:false,logOut:{token:"0000",href:"accounts/sign_out"},accountName:"Ably"};export const HeaderLinks=({sessionState=testSessionState,headerLinks,searchButtonVisibility,searchButton,className})=>{const{signedIn,logOut}=sessionState;const formRef=useRef(null);const headerLinkClasses="ui-text-label2 md:ui-text-label3 !font-bold py-16 text-neutral-1300 dark:text-neutral-000 md:text-neutral-1000 dark:md:text-neutral-300 hover:text-neutral-1300 dark:hover:text-neutral-000 active:text-neutral-1300 dark:active:text-neutral-000 transition-colors";const dropdownMenuLinkClasses="block p-8 ui-text-label3 font-semibold text-neutral-1000 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-1200 active:bg-neutral-200 dark:active:bg-neutral-1100 rounded-lg";const onClickLogout=e=>{e.preventDefault();formRef.current?.submit()};const DashboardLink=({className})=>React.createElement("a",{href:"/dashboard",className:className},"Dashboard");const LogoutForm=React.createElement("form",{ref:formRef,method:"post",action:logOut.href,className:"hidden"},React.createElement("input",{name:"_method",value:"delete",type:"hidden"}),React.createElement("input",{name:"authenticity_token",value:logOut.token,type:"hidden"}));return React.createElement("nav",{className:cn("flex md:flex-1 md:items-center md:justify-end flex-col md:flex-row border-t-[1px] border-neutral-300 md:border-t-0 md:gap-16 pt-12 pb-16 md:py-0",className)},signedIn&&React.createElement(React.Fragment,null,LogoutForm,React.createElement("div",{className:"block md:hidden"},React.createElement("div",{className:"flex flex-col border-b-[1px] border-neutral-300 px-16 pb-12 mb-12"},React.createElement("span",{className:"py-12 ui-text-sub-header text-[18px] text-neutral-700 dark:text-neutral-600 font-bold"},sessionState.accountName),React.createElement(DashboardLink,{className:headerLinkClasses})))),headerLinks?.map(({href,label,external})=>React.createElement("a",{key:href,className:cn(headerLinkClasses,"flex items-center gap-6 px-16 md:px-0 leading-none"),href:href,target:external?"_blank":undefined,rel:external?"noreferrer noopener":undefined},label,external&&React.createElement(Icon,{name:"icon-gui-arrow-top-right-on-square-mini",size:"20px"}))),searchButtonVisibility!=="mobile"?searchButton:null,signedIn?React.createElement(React.Fragment,null,React.createElement("div",{className:"hidden md:block relative"},React.createElement(DropdownMenu,null,React.createElement(DropdownMenu.Trigger,{description:`Account menu for ${sessionState.accountName}`},React.createElement("span",{className:"block text-ellipsis overflow-hidden whitespace-nowrap w-full max-w-[150px] leading-normal"},sessionState.accountName)),React.createElement(DropdownMenu.Content,{anchorPosition:"right",contentClassNames:"w-[240px] mt-[12px]"},React.createElement("div",{className:"p-8"},React.createElement(DashboardLink,{className:dropdownMenuLinkClasses}),React.createElement("a",{onClick:onClickLogout,href:"#",className:dropdownMenuLinkClasses},"Logout"))))),React.createElement("div",{className:"block md:hidden px-16 pt-16 pb-0"},React.createElement(LinkButton,{onClick:onClickLogout,variant:"secondary",className:"w-full md:ui-button-secondary-xs","aria-label":"Logout",rightIcon:"icon-gui-arrow-right-end-on-rectangle-outline"},"Logout"))):React.createElement("div",{className:"flex gap-12 pt-12 md:py-0 px-16 md:px-0"},React.createElement(LinkButton,{href:"/login",variant:"secondary",className:"flex-1 md:flex-none md:ui-button-secondary-xs hover:text-neutral-1300 dark:hover:text-neutral-000"},"Login"),React.createElement(LinkButton,{href:"/sign-up",variant:"primary",className:"flex-1 md:flex-none md:ui-button-primary-xs hover:text-neutral-000 dark:hover:text-neutral-1300"},"Start free")))};
 //# sourceMappingURL=HeaderLinks.js.map

package/core/Header/HeaderLinks.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/core/Header/HeaderLinks.tsx"],"sourcesContent":["import React, { MouseEvent, useRef } from \"react\";\nimport { HeaderProps } from \"../Header\";\nimport Icon from \"../Icon\";\nimport LinkButton from \"../LinkButton\";\nimport cn from \"../utils/cn\";\nimport DropdownMenu from \"../DropdownMenu\";\n\nconst testSessionState = {\n  signedIn: false,\n  logOut: {\n    token: \"0000\",\n    href: \"accounts/sign_out\",\n  },\n  accountName: \"Ably\",\n};\n\nexport const HeaderLinks: React.FC<\n  Pick<\n    HeaderProps,\n    | \"sessionState\"\n    | \"headerLinks\"\n    | \"searchButtonVisibility\"\n    | \"searchButton\"\n    | \"className\"\n  >\n> = ({\n  sessionState = testSessionState,\n  headerLinks,\n  searchButtonVisibility,\n  searchButton,\n  className,\n}) => {\n  const { signedIn, logOut } = sessionState;\n  const formRef = useRef<HTMLFormElement>(null);\n\n  const headerLinkClasses =\n    \"ui-text-menu2 md:ui-text-menu3 !font-bold py-16 text-neutral-1300 dark:text-neutral-000 md:text-neutral-1000 dark:md:text-neutral-300 hover:text-neutral-1300 dark:hover:text-neutral-000 active:text-neutral-1300 dark:active:text-neutral-000 transition-colors\";\n\n  const dropdownMenuLinkClasses =\n    \"block p-8 ui-text-menu3 font-semibold text-neutral-1000 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-1200 active:bg-neutral-200 dark:active:bg-neutral-1100 rounded-lg\";\n\n  const onClickLogout = (e: MouseEvent) => {\n    e.preventDefault();\n    formRef.current?.submit();\n  };\n\n  const DashboardLink = ({ className }: { className: string }) => (\n    <a href=\"/dashboard\" className={className}>\n      Dashboard\n    </a>\n  );\n\n  const LogoutForm = (\n    <form ref={formRef} method=\"post\" action={logOut.href} className=\"hidden\">\n      <input name=\"_method\" value=\"delete\" type=\"hidden\" />\n      <input name=\"authenticity_token\" value={logOut.token} type=\"hidden\" />\n    </form>\n  );\n\n  return (\n    <nav\n      className={cn(\n        \"flex md:flex-1 md:items-center md:justify-end flex-col md:flex-row border-t-[1px] border-neutral-300 md:border-t-0 md:gap-16 pt-12 pb-16 md:py-0\",\n        className,\n      )}\n    >\n      {signedIn && (\n        <>\n          {LogoutForm}\n          <div className=\"block md:hidden\">\n            <div className=\"flex flex-col border-b-[1px] border-neutral-300 px-16 pb-12 mb-12\">\n              <span className=\"py-12 ui-text-sub-header text-[18px] text-neutral-700 dark:text-neutral-600 font-bold\">\n                {sessionState.accountName}\n              </span>\n              {<DashboardLink className={headerLinkClasses} />}\n            </div>\n          </div>\n        </>\n      )}\n\n      {headerLinks?.map(({ href, label, external }) => (\n        <a\n          key={href}\n          className={cn(\n            headerLinkClasses,\n            \"flex items-center gap-6 px-16 md:px-0 leading-none\",\n          )}\n          href={href}\n          target={external ? \"_blank\" : undefined}\n          rel={external ? \"noreferrer noopener\" : undefined}\n        >\n          {label}\n          {external && (\n            <Icon name=\"icon-gui-arrow-top-right-on-square-mini\" size=\"20px\" />\n          )}\n        </a>\n      ))}\n\n      {searchButtonVisibility !== \"mobile\" ? searchButton : null}\n      {signedIn ? (\n        <>\n          <div className=\"hidden md:block relative\">\n            <DropdownMenu>\n              <DropdownMenu.Trigger\n                description={`Account menu for ${sessionState.accountName}`}\n              >\n                <span className=\"block text-ellipsis overflow-hidden whitespace-nowrap w-full max-w-[150px] leading-normal\">\n                  {sessionState.accountName}\n                </span>\n              </DropdownMenu.Trigger>\n              <DropdownMenu.Content\n                anchorPosition=\"right\"\n                contentClassNames=\"w-[240px] mt-[12px]\"\n              >\n                <div className=\"p-8\">\n                  {<DashboardLink className={dropdownMenuLinkClasses} />}\n                  <a\n                    onClick={onClickLogout}\n                    href=\"#\"\n                    className={dropdownMenuLinkClasses}\n                  >\n                    Logout\n                  </a>\n                </div>\n              </DropdownMenu.Content>\n            </DropdownMenu>\n          </div>\n          <div className=\"block md:hidden px-16 pt-16 pb-0\">\n            <LinkButton\n              onClick={onClickLogout}\n              variant=\"secondary\"\n              className=\"w-full md:ui-button-secondary-xs\"\n              aria-label=\"Logout\"\n              rightIcon=\"icon-gui-arrow-right-end-on-rectangle-outline\"\n            >\n              Logout\n            </LinkButton>\n          </div>\n        </>\n      ) : (\n        <div className=\"flex gap-12 pt-12 md:py-0 px-16 md:px-0\">\n          <LinkButton\n            href=\"/login\"\n            variant=\"secondary\"\n            className=\"flex-1 md:flex-none md:ui-button-secondary-xs hover:text-neutral-1300 dark:hover:text-neutral-000\"\n          >\n            Login\n          </LinkButton>\n          <LinkButton\n            href=\"/sign-up\"\n            variant=\"primary\"\n            className=\"flex-1 md:flex-none md:ui-button-primary-xs hover:text-neutral-000 dark:hover:text-neutral-1300\"\n          >\n            Start free\n          </LinkButton>\n        </div>\n      )}\n    </nav>\n  );\n};\n"],"names":["React","useRef","Icon","LinkButton","cn","DropdownMenu","testSessionState","signedIn","logOut","token","href","accountName","HeaderLinks","sessionState","headerLinks","searchButtonVisibility","searchButton","className","formRef","headerLinkClasses","dropdownMenuLinkClasses","onClickLogout","e","preventDefault","current","submit","DashboardLink","a","LogoutForm","form","ref","method","action","input","name","value","type","nav","div","span","map","label","external","key","target","undefined","rel","size","Trigger","description","Content","anchorPosition","contentClassNames","onClick","variant","aria-label","rightIcon"],"mappings":"AAAA,OAAOA,OAAqBC,MAAM,KAAQ,OAAQ,AAElD,QAAOC,SAAU,SAAU,AAC3B,QAAOC,eAAgB,eAAgB,AACvC,QAAOC,OAAQ,aAAc,AAC7B,QAAOC,iBAAkB,iBAAkB,CAE3C,MAAMC,iBAAmB,CACvBC,SAAU,MACVC,OAAQ,CACNC,MAAO,OACPC,KAAM,mBACR,EACAC,YAAa,MACf,CAEA,QAAO,MAAMC,YAST,CAAC,CACHC,aAAeP,gBAAgB,CAC/BQ,WAAW,CACXC,sBAAsB,CACtBC,YAAY,CACZC,SAAS,CACV,IACC,KAAM,CAAEV,QAAQ,CAAEC,MAAM,CAAE,CAAGK,aAC7B,MAAMK,QAAUjB,OAAwB,MAExC,MAAMkB,kBACJ,oQAEF,MAAMC,wBACJ,6LAEF,MAAMC,cAAgB,AAACC,IACrBA,EAAEC,cAAc,EAChBL,CAAAA,QAAQM,OAAO,EAAEC,QACnB,EAEA,MAAMC,cAAgB,CAAC,CAAET,SAAS,CAAyB,GACzD,oBAACU,KAAEjB,KAAK,aAAaO,UAAWA,WAAW,aAK7C,MAAMW,WACJ,oBAACC,QAAKC,IAAKZ,QAASa,OAAO,OAAOC,OAAQxB,OAAOE,IAAI,CAAEO,UAAU,UAC/D,oBAACgB,SAAMC,KAAK,UAAUC,MAAM,SAASC,KAAK,WAC1C,oBAACH,SAAMC,KAAK,qBAAqBC,MAAO3B,OAAOC,KAAK,CAAE2B,KAAK,YAI/D,OACE,oBAACC,OACCpB,UAAWb,GACT,mJACAa,YAGDV,UACC,wCACGqB,WACD,oBAACU,OAAIrB,UAAU,mBACb,oBAACqB,OAAIrB,UAAU,qEACb,oBAACsB,QAAKtB,UAAU,yFACbJ,aAAaF,WAAW,EAE1B,oBAACe,eAAcT,UAAWE,uBAMlCL,aAAa0B,IAAI,CAAC,CAAE9B,IAAI,CAAE+B,KAAK,CAAEC,QAAQ,CAAE,GAC1C,oBAACf,KACCgB,IAAKjC,KACLO,UAAWb,GACTe,kBACA,sDAEFT,KAAMA,KACNkC,OAAQF,SAAW,SAAWG,UAC9BC,IAAKJ,SAAW,sBAAwBG,WAEvCJ,MACAC,UACC,oBAACxC,MAAKgC,KAAK,0CAA0Ca,KAAK,WAK/DhC,yBAA2B,SAAWC,aAAe,KACrDT,SACC,wCACE,oBAAC+B,OAAIrB,UAAU,4BACb,oBAACZ,kBACC,oBAACA,aAAa2C,OAAO,EACnBC,YAAa,CAAC,iBAAiB,EAAEpC,aAAaF,WAAW,CAAC,CAAC,EAE3D,oBAAC4B,QAAKtB,UAAU,6FACbJ,aAAaF,WAAW,GAG7B,oBAACN,aAAa6C,OAAO,EACnBC,eAAe,QACfC,kBAAkB,uBAElB,oBAACd,OAAIrB,UAAU,OACZ,oBAACS,eAAcT,UAAWG,0BAC3B,oBAACO,KACC0B,QAAShC,cACTX,KAAK,IACLO,UAAWG,yBACZ,cAOT,oBAACkB,OAAIrB,UAAU,oCACb,oBAACd,YACCkD,QAAShC,cACTiC,QAAQ,YACRrC,UAAU,mCACVsC,aAAW,SACXC,UAAU,iDACX,YAML,oBAAClB,OAAIrB,UAAU,2CACb,oBAACd,YACCO,KAAK,SACL4C,QAAQ,YACRrC,UAAU,qGACX,SAGD,oBAACd,YACCO,KAAK,WACL4C,QAAQ,UACRrC,UAAU,mGACX,eAOX,CAAE"}
+{"version":3,"sources":["../../../src/core/Header/HeaderLinks.tsx"],"sourcesContent":["import React, { MouseEvent, useRef } from \"react\";\nimport { HeaderProps } from \"../Header\";\nimport Icon from \"../Icon\";\nimport LinkButton from \"../LinkButton\";\nimport cn from \"../utils/cn\";\nimport DropdownMenu from \"../DropdownMenu\";\n\nconst testSessionState = {\n  signedIn: false,\n  logOut: {\n    token: \"0000\",\n    href: \"accounts/sign_out\",\n  },\n  accountName: \"Ably\",\n};\n\nexport const HeaderLinks: React.FC<\n  Pick<\n    HeaderProps,\n    | \"sessionState\"\n    | \"headerLinks\"\n    | \"searchButtonVisibility\"\n    | \"searchButton\"\n    | \"className\"\n  >\n> = ({\n  sessionState = testSessionState,\n  headerLinks,\n  searchButtonVisibility,\n  searchButton,\n  className,\n}) => {\n  const { signedIn, logOut } = sessionState;\n  const formRef = useRef<HTMLFormElement>(null);\n\n  const headerLinkClasses =\n    \"ui-text-label2 md:ui-text-label3 !font-bold py-16 text-neutral-1300 dark:text-neutral-000 md:text-neutral-1000 dark:md:text-neutral-300 hover:text-neutral-1300 dark:hover:text-neutral-000 active:text-neutral-1300 dark:active:text-neutral-000 transition-colors\";\n\n  const dropdownMenuLinkClasses =\n    \"block p-8 ui-text-label3 font-semibold text-neutral-1000 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-1200 active:bg-neutral-200 dark:active:bg-neutral-1100 rounded-lg\";\n\n  const onClickLogout = (e: MouseEvent) => {\n    e.preventDefault();\n    formRef.current?.submit();\n  };\n\n  const DashboardLink = ({ className }: { className: string }) => (\n    <a href=\"/dashboard\" className={className}>\n      Dashboard\n    </a>\n  );\n\n  const LogoutForm = (\n    <form ref={formRef} method=\"post\" action={logOut.href} className=\"hidden\">\n      <input name=\"_method\" value=\"delete\" type=\"hidden\" />\n      <input name=\"authenticity_token\" value={logOut.token} type=\"hidden\" />\n    </form>\n  );\n\n  return (\n    <nav\n      className={cn(\n        \"flex md:flex-1 md:items-center md:justify-end flex-col md:flex-row border-t-[1px] border-neutral-300 md:border-t-0 md:gap-16 pt-12 pb-16 md:py-0\",\n        className,\n      )}\n    >\n      {signedIn && (\n        <>\n          {LogoutForm}\n          <div className=\"block md:hidden\">\n            <div className=\"flex flex-col border-b-[1px] border-neutral-300 px-16 pb-12 mb-12\">\n              <span className=\"py-12 ui-text-sub-header text-[18px] text-neutral-700 dark:text-neutral-600 font-bold\">\n                {sessionState.accountName}\n              </span>\n              {<DashboardLink className={headerLinkClasses} />}\n            </div>\n          </div>\n        </>\n      )}\n\n      {headerLinks?.map(({ href, label, external }) => (\n        <a\n          key={href}\n          className={cn(\n            headerLinkClasses,\n            \"flex items-center gap-6 px-16 md:px-0 leading-none\",\n          )}\n          href={href}\n          target={external ? \"_blank\" : undefined}\n          rel={external ? \"noreferrer noopener\" : undefined}\n        >\n          {label}\n          {external && (\n            <Icon name=\"icon-gui-arrow-top-right-on-square-mini\" size=\"20px\" />\n          )}\n        </a>\n      ))}\n\n      {searchButtonVisibility !== \"mobile\" ? searchButton : null}\n      {signedIn ? (\n        <>\n          <div className=\"hidden md:block relative\">\n            <DropdownMenu>\n              <DropdownMenu.Trigger\n                description={`Account menu for ${sessionState.accountName}`}\n              >\n                <span className=\"block text-ellipsis overflow-hidden whitespace-nowrap w-full max-w-[150px] leading-normal\">\n                  {sessionState.accountName}\n                </span>\n              </DropdownMenu.Trigger>\n              <DropdownMenu.Content\n                anchorPosition=\"right\"\n                contentClassNames=\"w-[240px] mt-[12px]\"\n              >\n                <div className=\"p-8\">\n                  {<DashboardLink className={dropdownMenuLinkClasses} />}\n                  <a\n                    onClick={onClickLogout}\n                    href=\"#\"\n                    className={dropdownMenuLinkClasses}\n                  >\n                    Logout\n                  </a>\n                </div>\n              </DropdownMenu.Content>\n            </DropdownMenu>\n          </div>\n          <div className=\"block md:hidden px-16 pt-16 pb-0\">\n            <LinkButton\n              onClick={onClickLogout}\n              variant=\"secondary\"\n              className=\"w-full md:ui-button-secondary-xs\"\n              aria-label=\"Logout\"\n              rightIcon=\"icon-gui-arrow-right-end-on-rectangle-outline\"\n            >\n              Logout\n            </LinkButton>\n          </div>\n        </>\n      ) : (\n        <div className=\"flex gap-12 pt-12 md:py-0 px-16 md:px-0\">\n          <LinkButton\n            href=\"/login\"\n            variant=\"secondary\"\n            className=\"flex-1 md:flex-none md:ui-button-secondary-xs hover:text-neutral-1300 dark:hover:text-neutral-000\"\n          >\n            Login\n          </LinkButton>\n          <LinkButton\n            href=\"/sign-up\"\n            variant=\"primary\"\n            className=\"flex-1 md:flex-none md:ui-button-primary-xs hover:text-neutral-000 dark:hover:text-neutral-1300\"\n          >\n            Start free\n          </LinkButton>\n        </div>\n      )}\n    </nav>\n  );\n};\n"],"names":["React","useRef","Icon","LinkButton","cn","DropdownMenu","testSessionState","signedIn","logOut","token","href","accountName","HeaderLinks","sessionState","headerLinks","searchButtonVisibility","searchButton","className","formRef","headerLinkClasses","dropdownMenuLinkClasses","onClickLogout","e","preventDefault","current","submit","DashboardLink","a","LogoutForm","form","ref","method","action","input","name","value","type","nav","div","span","map","label","external","key","target","undefined","rel","size","Trigger","description","Content","anchorPosition","contentClassNames","onClick","variant","aria-label","rightIcon"],"mappings":"AAAA,OAAOA,OAAqBC,MAAM,KAAQ,OAAQ,AAElD,QAAOC,SAAU,SAAU,AAC3B,QAAOC,eAAgB,eAAgB,AACvC,QAAOC,OAAQ,aAAc,AAC7B,QAAOC,iBAAkB,iBAAkB,CAE3C,MAAMC,iBAAmB,CACvBC,SAAU,MACVC,OAAQ,CACNC,MAAO,OACPC,KAAM,mBACR,EACAC,YAAa,MACf,CAEA,QAAO,MAAMC,YAST,CAAC,CACHC,aAAeP,gBAAgB,CAC/BQ,WAAW,CACXC,sBAAsB,CACtBC,YAAY,CACZC,SAAS,CACV,IACC,KAAM,CAAEV,QAAQ,CAAEC,MAAM,CAAE,CAAGK,aAC7B,MAAMK,QAAUjB,OAAwB,MAExC,MAAMkB,kBACJ,sQAEF,MAAMC,wBACJ,8LAEF,MAAMC,cAAgB,AAACC,IACrBA,EAAEC,cAAc,EAChBL,CAAAA,QAAQM,OAAO,EAAEC,QACnB,EAEA,MAAMC,cAAgB,CAAC,CAAET,SAAS,CAAyB,GACzD,oBAACU,KAAEjB,KAAK,aAAaO,UAAWA,WAAW,aAK7C,MAAMW,WACJ,oBAACC,QAAKC,IAAKZ,QAASa,OAAO,OAAOC,OAAQxB,OAAOE,IAAI,CAAEO,UAAU,UAC/D,oBAACgB,SAAMC,KAAK,UAAUC,MAAM,SAASC,KAAK,WAC1C,oBAACH,SAAMC,KAAK,qBAAqBC,MAAO3B,OAAOC,KAAK,CAAE2B,KAAK,YAI/D,OACE,oBAACC,OACCpB,UAAWb,GACT,mJACAa,YAGDV,UACC,wCACGqB,WACD,oBAACU,OAAIrB,UAAU,mBACb,oBAACqB,OAAIrB,UAAU,qEACb,oBAACsB,QAAKtB,UAAU,yFACbJ,aAAaF,WAAW,EAE1B,oBAACe,eAAcT,UAAWE,uBAMlCL,aAAa0B,IAAI,CAAC,CAAE9B,IAAI,CAAE+B,KAAK,CAAEC,QAAQ,CAAE,GAC1C,oBAACf,KACCgB,IAAKjC,KACLO,UAAWb,GACTe,kBACA,sDAEFT,KAAMA,KACNkC,OAAQF,SAAW,SAAWG,UAC9BC,IAAKJ,SAAW,sBAAwBG,WAEvCJ,MACAC,UACC,oBAACxC,MAAKgC,KAAK,0CAA0Ca,KAAK,WAK/DhC,yBAA2B,SAAWC,aAAe,KACrDT,SACC,wCACE,oBAAC+B,OAAIrB,UAAU,4BACb,oBAACZ,kBACC,oBAACA,aAAa2C,OAAO,EACnBC,YAAa,CAAC,iBAAiB,EAAEpC,aAAaF,WAAW,CAAC,CAAC,EAE3D,oBAAC4B,QAAKtB,UAAU,6FACbJ,aAAaF,WAAW,GAG7B,oBAACN,aAAa6C,OAAO,EACnBC,eAAe,QACfC,kBAAkB,uBAElB,oBAACd,OAAIrB,UAAU,OACZ,oBAACS,eAAcT,UAAWG,0BAC3B,oBAACO,KACC0B,QAAShC,cACTX,KAAK,IACLO,UAAWG,yBACZ,cAOT,oBAACkB,OAAIrB,UAAU,oCACb,oBAACd,YACCkD,QAAShC,cACTiC,QAAQ,YACRrC,UAAU,mCACVsC,aAAW,SACXC,UAAU,iDACX,YAML,oBAAClB,OAAIrB,UAAU,2CACb,oBAACd,YACCO,KAAK,SACL4C,QAAQ,YACRrC,UAAU,qGACX,SAGD,oBAACd,YACCO,KAAK,WACL4C,QAAQ,UACRrC,UAAU,mGACX,eAOX,CAAE"}

package/core/Meganav/MeganavPanel.js

@@ -1,2 +1,2 @@
-import React from"react";import cn from"../utils/cn";import Icon from"../Icon";import{productsForNav}from"./data";import{productNames}from"../ProductTile/data";import MeganavProductTile from"./MeganavProductTile";export const MeganavPanel=({displayProductTile,panelLeft,panelLeftClassName,panelRightHeading,panelRightItems,panelRightBottom})=>{return React.createElement("div",{className:"flex flex-col md:flex-row gap-x-24 bg-neutral-000 dark:bg-neutral-1300"},React.createElement("div",{className:cn("flex-[7] flex-shrink-0 group",{"grid-cols-1 xs:grid-cols-2":displayProductTile},panelLeftClassName)},displayProductTile?productNames.map(product=>React.createElement(MeganavProductTile,{name:product,key:product,productLink:productsForNav[product].link??"#",animateIcons:true})):panelLeft&&React.createElement("a",{className:"grid grid-cols-1 xs:grid-cols-2 pointer-events-auto",href:panelLeft.url},React.createElement("span",{className:"block w-full p-24"},React.createElement("h4",{className:"ui-text-h4 text-neutral-1300 dark:text-neutral-000"},panelLeft.heading),React.createElement("span",{className:"block ui-text-p3 text-neutral-800 dark:text-neutral-500 mt-8"},panelLeft.content),React.createElement("span",{className:"py-8 font-sans font-bold block group/featured-link text-neutral-1300 dark:text-neutral-000 mt-16 ui-text-p3 hover:text-neutral-1300 dark:hover:text-neutral-000"},panelLeft.labelLink,React.createElement(Icon,{name:"icon-gui-arrow-long-right-outline",size:"18px",color:"text-orange-600",additionalCSS:cn("align-middle ml-8 relative -top-1 -left-4 transition-[left]","group-hover/featured-link:left-0 group-hover/meganav-panel:left-0")}))),React.createElement("span",{className:"flex justify-end"},React.createElement("img",{src:panelLeft.image,alt:panelLeft.heading,className:"w-full z-10 rounded-lg"})))),React.createElement("div",{className:"flex-[3] flex-shrink-0 flex flex-col justify-between"},React.createElement("ul",null,panelRightHeading&&React.createElement("p",{className:"ui-text-overline2 text-neutral-700 dark:text-neutral-600 my-12"},panelRightHeading),panelRightItems.map(item=>React.createElement("li",{className:cn("list-none py-[10px] md:py-8  my-0 flex gap-x-[10px] group hover:cursor-pointer",item.isMobile?"md:hidden":"md:flex"),key:item.label},React.createElement(Icon,{name:item.icon,size:"1.25rem",additionalCSS:"text-neutral-1000 dark:text-neutral-300"}),React.createElement("a",{className:"pointer-events-auto ui-text-menu2 md:ui-text-menu3 font-semibold text-neutral-1000 dark:text-neutral-300 group-hover:text-neutral-1300 dark:group-hover:text-neutral-000",href:item.link},item.label)))),panelRightBottom&&React.createElement("div",{className:"items-end mt-16 md:mt-0"},panelRightBottom)))};
+import React from"react";import cn from"../utils/cn";import Icon from"../Icon";import{productsForNav}from"./data";import{productNames}from"../ProductTile/data";import MeganavProductTile from"./MeganavProductTile";export const MeganavPanel=({displayProductTile,panelLeft,panelLeftClassName,panelRightHeading,panelRightItems,panelRightBottom})=>{return React.createElement("div",{className:"flex flex-col md:flex-row gap-x-24 bg-neutral-000 dark:bg-neutral-1300"},React.createElement("div",{className:cn("flex-[7] flex-shrink-0 group",{"grid-cols-1 xs:grid-cols-2":displayProductTile},panelLeftClassName)},displayProductTile?productNames.map(product=>React.createElement(MeganavProductTile,{name:product,key:product,productLink:productsForNav[product].link??"#",animateIcons:true})):panelLeft&&React.createElement("a",{className:"grid grid-cols-1 xs:grid-cols-2 pointer-events-auto",href:panelLeft.url},React.createElement("span",{className:"block w-full p-24"},React.createElement("h4",{className:"ui-text-h4 text-neutral-1300 dark:text-neutral-000"},panelLeft.heading),React.createElement("span",{className:"block ui-text-p3 text-neutral-800 dark:text-neutral-500 mt-8"},panelLeft.content),React.createElement("span",{className:"py-8 font-sans font-bold block group/featured-link text-neutral-1300 dark:text-neutral-000 mt-16 ui-text-p3 hover:text-neutral-1300 dark:hover:text-neutral-000"},panelLeft.labelLink,React.createElement(Icon,{name:"icon-gui-arrow-long-right-outline",size:"18px",color:"text-orange-600",additionalCSS:cn("align-middle ml-8 relative -top-1 -left-4 transition-[left]","group-hover/featured-link:left-0 group-hover/meganav-panel:left-0")}))),React.createElement("span",{className:"flex justify-end"},React.createElement("img",{src:panelLeft.image,alt:panelLeft.heading,className:"w-full z-10 rounded-lg"})))),React.createElement("div",{className:"flex-[3] flex-shrink-0 flex flex-col justify-between"},React.createElement("ul",null,panelRightHeading&&React.createElement("p",{className:"ui-text-overline2 text-neutral-700 dark:text-neutral-600 my-12"},panelRightHeading),panelRightItems.map(item=>React.createElement("li",{className:cn("list-none py-[10px] md:py-8  my-0 flex gap-x-[10px] group hover:cursor-pointer",item.isMobile?"md:hidden":"md:flex"),key:item.label},React.createElement(Icon,{name:item.icon,size:"1.25rem",additionalCSS:"text-neutral-1000 dark:text-neutral-300"}),React.createElement("a",{className:"pointer-events-auto ui-text-label2 md:ui-text-label3 font-semibold text-neutral-1000 dark:text-neutral-300 group-hover:text-neutral-1300 dark:group-hover:text-neutral-000",href:item.link},item.label)))),panelRightBottom&&React.createElement("div",{className:"items-end mt-16 md:mt-0"},panelRightBottom)))};
 //# sourceMappingURL=MeganavPanel.js.map

package/core/Meganav/MeganavPanel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/core/Meganav/MeganavPanel.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"../utils/cn\";\nimport Icon from \"../Icon\";\nimport { FlyoutPanelHighlight, FlyoutPanelList, productsForNav } from \"./data\";\nimport { ProductName, productNames } from \"../ProductTile/data\";\nimport MeganavProductTile from \"./MeganavProductTile\";\n\nexport const MeganavPanel = ({\n  displayProductTile,\n  panelLeft,\n  panelLeftClassName,\n  panelRightHeading,\n  panelRightItems,\n  panelRightBottom,\n}: {\n  displayProductTile?: boolean;\n  panelLeft?: FlyoutPanelHighlight;\n  panelLeftClassName?: string;\n  panelRightHeading?: string;\n  panelRightItems: FlyoutPanelList[];\n  panelRightBottom?: React.ReactNode;\n}) => {\n  return (\n    <div className=\"flex flex-col md:flex-row gap-x-24 bg-neutral-000 dark:bg-neutral-1300\">\n      <div\n        className={cn(\n          \"flex-[7] flex-shrink-0 group\",\n          { \"grid-cols-1 xs:grid-cols-2\": displayProductTile },\n          panelLeftClassName,\n        )}\n      >\n        {displayProductTile\n          ? productNames.map((product) => (\n              <MeganavProductTile\n                name={product as ProductName}\n                key={product}\n                productLink={productsForNav[product].link ?? \"#\"}\n                animateIcons={true}\n              />\n            ))\n          : panelLeft && (\n              <a\n                className=\"grid grid-cols-1 xs:grid-cols-2 pointer-events-auto\"\n                href={panelLeft.url}\n              >\n                <span className=\"block w-full p-24\">\n                  <h4 className=\"ui-text-h4 text-neutral-1300 dark:text-neutral-000\">\n                    {panelLeft.heading}\n                  </h4>\n                  <span className=\"block ui-text-p3 text-neutral-800 dark:text-neutral-500 mt-8\">\n                    {panelLeft.content}\n                  </span>\n                  <span className=\"py-8 font-sans font-bold block group/featured-link text-neutral-1300 dark:text-neutral-000 mt-16 ui-text-p3 hover:text-neutral-1300 dark:hover:text-neutral-000\">\n                    {panelLeft.labelLink}\n                    <Icon\n                      name=\"icon-gui-arrow-long-right-outline\"\n                      size=\"18px\"\n                      color=\"text-orange-600\"\n                      additionalCSS={cn(\n                        \"align-middle ml-8 relative -top-1 -left-4 transition-[left]\",\n                        \"group-hover/featured-link:left-0 group-hover/meganav-panel:left-0\",\n                      )}\n                    />\n                  </span>\n                </span>\n                <span className=\"flex justify-end\">\n                  <img\n                    src={panelLeft.image}\n                    alt={panelLeft.heading}\n                    className=\"w-full z-10 rounded-lg\"\n                  />\n                </span>\n              </a>\n            )}\n      </div>\n      <div className=\"flex-[3] flex-shrink-0 flex flex-col justify-between\">\n        <ul>\n          {panelRightHeading && (\n            <p className=\"ui-text-overline2 text-neutral-700 dark:text-neutral-600 my-12\">\n              {panelRightHeading}\n            </p>\n          )}\n\n          {panelRightItems.map((item) => (\n            <li\n              className={cn(\n                \"list-none py-[10px] md:py-8  my-0 flex gap-x-[10px] group hover:cursor-pointer\",\n                item.isMobile ? \"md:hidden\" : \"md:flex\",\n              )}\n              key={item.label}\n            >\n              <Icon\n                name={item.icon}\n                size=\"1.25rem\"\n                additionalCSS=\"text-neutral-1000 dark:text-neutral-300\"\n              />\n              <a\n                className=\"pointer-events-auto ui-text-menu2 md:ui-text-menu3 font-semibold text-neutral-1000 dark:text-neutral-300 group-hover:text-neutral-1300 dark:group-hover:text-neutral-000\"\n                href={item.link}\n              >\n                {item.label}\n              </a>\n            </li>\n          ))}\n        </ul>\n        {panelRightBottom && (\n          <div className=\"items-end mt-16 md:mt-0\">{panelRightBottom}</div>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"names":["React","cn","Icon","productsForNav","productNames","MeganavProductTile","MeganavPanel","displayProductTile","panelLeft","panelLeftClassName","panelRightHeading","panelRightItems","panelRightBottom","div","className","map","product","name","key","productLink","link","animateIcons","a","href","url","span","h4","heading","content","labelLink","size","color","additionalCSS","img","src","image","alt","ul","p","item","li","isMobile","label","icon"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QAAOC,OAAQ,aAAc,AAC7B,QAAOC,SAAU,SAAU,AAC3B,QAAgDC,cAAc,KAAQ,QAAS,AAC/E,QAAsBC,YAAY,KAAQ,qBAAsB,AAChE,QAAOC,uBAAwB,sBAAuB,AAEtD,QAAO,MAAMC,aAAe,CAAC,CAC3BC,kBAAkB,CAClBC,SAAS,CACTC,kBAAkB,CAClBC,iBAAiB,CACjBC,eAAe,CACfC,gBAAgB,CAQjB,IACC,OACE,oBAACC,OAAIC,UAAU,0EACb,oBAACD,OACCC,UAAWb,GACT,+BACA,CAAE,6BAA8BM,kBAAmB,EACnDE,qBAGDF,mBACGH,aAAaW,GAAG,CAAC,AAACC,SAChB,oBAACX,oBACCY,KAAMD,QACNE,IAAKF,QACLG,YAAahB,cAAc,CAACa,QAAQ,CAACI,IAAI,EAAI,IAC7CC,aAAc,QAGlBb,WACE,oBAACc,KACCR,UAAU,sDACVS,KAAMf,UAAUgB,GAAG,EAEnB,oBAACC,QAAKX,UAAU,qBACd,oBAACY,MAAGZ,UAAU,sDACXN,UAAUmB,OAAO,EAEpB,oBAACF,QAAKX,UAAU,gEACbN,UAAUoB,OAAO,EAEpB,oBAACH,QAAKX,UAAU,mKACbN,UAAUqB,SAAS,CACpB,oBAAC3B,MACCe,KAAK,oCACLa,KAAK,OACLC,MAAM,kBACNC,cAAe/B,GACb,8DACA,yEAKR,oBAACwB,QAAKX,UAAU,oBACd,oBAACmB,OACCC,IAAK1B,UAAU2B,KAAK,CACpBC,IAAK5B,UAAUmB,OAAO,CACtBb,UAAU,8BAMxB,oBAACD,OAAIC,UAAU,wDACb,oBAACuB,UACE3B,mBACC,oBAAC4B,KAAExB,UAAU,kEACVJ,mBAIJC,gBAAgBI,GAAG,CAAC,AAACwB,MACpB,oBAACC,MACC1B,UAAWb,GACT,iFACAsC,KAAKE,QAAQ,CAAG,YAAc,WAEhCvB,IAAKqB,KAAKG,KAAK,EAEf,oBAACxC,MACCe,KAAMsB,KAAKI,IAAI,CACfb,KAAK,UACLE,cAAc,4CAEhB,oBAACV,KACCR,UAAU,2KACVS,KAAMgB,KAAKnB,IAAI,EAEdmB,KAAKG,KAAK,KAKlB9B,kBACC,oBAACC,OAAIC,UAAU,2BAA2BF,mBAKpD,CAAE"}
+{"version":3,"sources":["../../../src/core/Meganav/MeganavPanel.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"../utils/cn\";\nimport Icon from \"../Icon\";\nimport { FlyoutPanelHighlight, FlyoutPanelList, productsForNav } from \"./data\";\nimport { ProductName, productNames } from \"../ProductTile/data\";\nimport MeganavProductTile from \"./MeganavProductTile\";\n\nexport const MeganavPanel = ({\n  displayProductTile,\n  panelLeft,\n  panelLeftClassName,\n  panelRightHeading,\n  panelRightItems,\n  panelRightBottom,\n}: {\n  displayProductTile?: boolean;\n  panelLeft?: FlyoutPanelHighlight;\n  panelLeftClassName?: string;\n  panelRightHeading?: string;\n  panelRightItems: FlyoutPanelList[];\n  panelRightBottom?: React.ReactNode;\n}) => {\n  return (\n    <div className=\"flex flex-col md:flex-row gap-x-24 bg-neutral-000 dark:bg-neutral-1300\">\n      <div\n        className={cn(\n          \"flex-[7] flex-shrink-0 group\",\n          { \"grid-cols-1 xs:grid-cols-2\": displayProductTile },\n          panelLeftClassName,\n        )}\n      >\n        {displayProductTile\n          ? productNames.map((product) => (\n              <MeganavProductTile\n                name={product as ProductName}\n                key={product}\n                productLink={productsForNav[product].link ?? \"#\"}\n                animateIcons={true}\n              />\n            ))\n          : panelLeft && (\n              <a\n                className=\"grid grid-cols-1 xs:grid-cols-2 pointer-events-auto\"\n                href={panelLeft.url}\n              >\n                <span className=\"block w-full p-24\">\n                  <h4 className=\"ui-text-h4 text-neutral-1300 dark:text-neutral-000\">\n                    {panelLeft.heading}\n                  </h4>\n                  <span className=\"block ui-text-p3 text-neutral-800 dark:text-neutral-500 mt-8\">\n                    {panelLeft.content}\n                  </span>\n                  <span className=\"py-8 font-sans font-bold block group/featured-link text-neutral-1300 dark:text-neutral-000 mt-16 ui-text-p3 hover:text-neutral-1300 dark:hover:text-neutral-000\">\n                    {panelLeft.labelLink}\n                    <Icon\n                      name=\"icon-gui-arrow-long-right-outline\"\n                      size=\"18px\"\n                      color=\"text-orange-600\"\n                      additionalCSS={cn(\n                        \"align-middle ml-8 relative -top-1 -left-4 transition-[left]\",\n                        \"group-hover/featured-link:left-0 group-hover/meganav-panel:left-0\",\n                      )}\n                    />\n                  </span>\n                </span>\n                <span className=\"flex justify-end\">\n                  <img\n                    src={panelLeft.image}\n                    alt={panelLeft.heading}\n                    className=\"w-full z-10 rounded-lg\"\n                  />\n                </span>\n              </a>\n            )}\n      </div>\n      <div className=\"flex-[3] flex-shrink-0 flex flex-col justify-between\">\n        <ul>\n          {panelRightHeading && (\n            <p className=\"ui-text-overline2 text-neutral-700 dark:text-neutral-600 my-12\">\n              {panelRightHeading}\n            </p>\n          )}\n\n          {panelRightItems.map((item) => (\n            <li\n              className={cn(\n                \"list-none py-[10px] md:py-8  my-0 flex gap-x-[10px] group hover:cursor-pointer\",\n                item.isMobile ? \"md:hidden\" : \"md:flex\",\n              )}\n              key={item.label}\n            >\n              <Icon\n                name={item.icon}\n                size=\"1.25rem\"\n                additionalCSS=\"text-neutral-1000 dark:text-neutral-300\"\n              />\n              <a\n                className=\"pointer-events-auto ui-text-label2 md:ui-text-label3 font-semibold text-neutral-1000 dark:text-neutral-300 group-hover:text-neutral-1300 dark:group-hover:text-neutral-000\"\n                href={item.link}\n              >\n                {item.label}\n              </a>\n            </li>\n          ))}\n        </ul>\n        {panelRightBottom && (\n          <div className=\"items-end mt-16 md:mt-0\">{panelRightBottom}</div>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"names":["React","cn","Icon","productsForNav","productNames","MeganavProductTile","MeganavPanel","displayProductTile","panelLeft","panelLeftClassName","panelRightHeading","panelRightItems","panelRightBottom","div","className","map","product","name","key","productLink","link","animateIcons","a","href","url","span","h4","heading","content","labelLink","size","color","additionalCSS","img","src","image","alt","ul","p","item","li","isMobile","label","icon"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QAAOC,OAAQ,aAAc,AAC7B,QAAOC,SAAU,SAAU,AAC3B,QAAgDC,cAAc,KAAQ,QAAS,AAC/E,QAAsBC,YAAY,KAAQ,qBAAsB,AAChE,QAAOC,uBAAwB,sBAAuB,AAEtD,QAAO,MAAMC,aAAe,CAAC,CAC3BC,kBAAkB,CAClBC,SAAS,CACTC,kBAAkB,CAClBC,iBAAiB,CACjBC,eAAe,CACfC,gBAAgB,CAQjB,IACC,OACE,oBAACC,OAAIC,UAAU,0EACb,oBAACD,OACCC,UAAWb,GACT,+BACA,CAAE,6BAA8BM,kBAAmB,EACnDE,qBAGDF,mBACGH,aAAaW,GAAG,CAAC,AAACC,SAChB,oBAACX,oBACCY,KAAMD,QACNE,IAAKF,QACLG,YAAahB,cAAc,CAACa,QAAQ,CAACI,IAAI,EAAI,IAC7CC,aAAc,QAGlBb,WACE,oBAACc,KACCR,UAAU,sDACVS,KAAMf,UAAUgB,GAAG,EAEnB,oBAACC,QAAKX,UAAU,qBACd,oBAACY,MAAGZ,UAAU,sDACXN,UAAUmB,OAAO,EAEpB,oBAACF,QAAKX,UAAU,gEACbN,UAAUoB,OAAO,EAEpB,oBAACH,QAAKX,UAAU,mKACbN,UAAUqB,SAAS,CACpB,oBAAC3B,MACCe,KAAK,oCACLa,KAAK,OACLC,MAAM,kBACNC,cAAe/B,GACb,8DACA,yEAKR,oBAACwB,QAAKX,UAAU,oBACd,oBAACmB,OACCC,IAAK1B,UAAU2B,KAAK,CACpBC,IAAK5B,UAAUmB,OAAO,CACtBb,UAAU,8BAMxB,oBAACD,OAAIC,UAAU,wDACb,oBAACuB,UACE3B,mBACC,oBAAC4B,KAAExB,UAAU,kEACVJ,mBAIJC,gBAAgBI,GAAG,CAAC,AAACwB,MACpB,oBAACC,MACC1B,UAAWb,GACT,iFACAsC,KAAKE,QAAQ,CAAG,YAAc,WAEhCvB,IAAKqB,KAAKG,KAAK,EAEf,oBAACxC,MACCe,KAAMsB,KAAKI,IAAI,CACfb,KAAK,UACLE,cAAc,4CAEhB,oBAACV,KACCR,UAAU,6KACVS,KAAMgB,KAAKnB,IAAI,EAEdmB,KAAKG,KAAK,KAKlB9B,kBACC,oBAACC,OAAIC,UAAU,2BAA2BF,mBAKpD,CAAE"}

package/core/SegmentedControl.js

@@ -1,2 +1,2 @@
-import React from"react";import cn from"./utils/cn";import Icon from"./Icon";const SegmentedControl=({className,rounded=false,leftIcon,rightIcon,active=false,variant="default",size="md",children,onClick,disabled})=>{const colorStyles={default:{active:"bg-neutral-200 dark:bg-neutral-1100",inactive:"bg-neutral-000 dark:bg-neutral-1300 hover:bg-neutral-100 dark:hover:bg-neutral-1200 active:bg-neutral-100 dark:active:bg-neutral-1200"},subtle:{active:"bg-neutral-000 dark:bg-neutral-1000",inactive:"bg-neutral-100 dark:bg-neutral-1200 hover:bg-neutral-200 dark:hover:bg-neutral-1100 active:bg-neutral-200 dark:active:bg-neutral-1100"},strong:{active:"bg-neutral-1000 dark:bg-neutral-300",inactive:"bg-neutral-100 dark:bg-neutral-1200 hover:bg-neutral-200 dark:hover:bg-neutral-1100 active:bg-neutral-200 dark:active:bg-neutral-1100"}};const contentColorStyles={default:{active:"text-neutral-1300 dark:text-neutral-000",inactive:"text-neutral-1000 dark:text-neutral-300 hover:text-neutral-1300 dark:hover:text-neutral-000"},subtle:{active:"text-neutral-1300 dark:text-neutral-000",inactive:"text-neutral-1000 dark:text-neutral-300 hover:text-neutral-1300 dark:hover:text-neutral-000"},strong:{active:"text-neutral-000 dark:text-neutral-1300",inactive:"text-neutral-1000 dark:text-neutral-300 hover:text-neutral-1300 dark:hover:text-neutral-000"}};const sizeStyles={md:cn("h-48 p-12 gap-[10px]",rounded&&"px-[18px]"),sm:cn("h-40 p-[9px] gap-[9px]",rounded&&"px-[14px]"),xs:cn("h-36 p-8 gap-8",rounded&&"px-12")};const textStyles={md:"ui-text-menu2",sm:"ui-text-menu3",xs:"ui-text-menu4"};const iconSizes={md:"23px",sm:"22px",xs:"20px"};const activeKey=active?"active":"inactive";return React.createElement("div",{onClick:!disabled?onClick:undefined,onKeyDown:e=>{if((e.key==="Enter"||e.key===" ")&&!disabled&&onClick){e.preventDefault();onClick()}},className:cn("focus-base flex items-center justify-center cursor-pointer select-none transition-colors",colorStyles[variant][activeKey],contentColorStyles[variant][activeKey],sizeStyles[size],textStyles[size],disabled&&"cursor-not-allowed hover:bg-inherit dark:hover:bg-inherit active:bg-inherit dark:active:bg-inherit",rounded?"rounded-full":"rounded-lg",className),tabIndex:disabled?-1:0,role:"button","aria-pressed":active,"aria-disabled":disabled},leftIcon&&React.createElement(Icon,{name:leftIcon,size:iconSizes[size],"aria-hidden":"true"}),React.createElement("span",{className:cn("font-semibold transition-colors",contentColorStyles[variant][activeKey],disabled&&"text-gui-unavailable dark:text-gui-unavailable-dark hover:text-gui-unavailable dark:hover:text-gui-unavailable-dark")},children),rightIcon&&React.createElement(Icon,{name:rightIcon,size:iconSizes[size],"aria-hidden":"true"}))};export default SegmentedControl;
+import React from"react";import cn from"./utils/cn";import Icon from"./Icon";const SegmentedControl=({className,rounded=false,leftIcon,rightIcon,active=false,variant="default",size="md",children,onClick,disabled})=>{const colorStyles={default:{active:"bg-neutral-200 dark:bg-neutral-1100",inactive:"bg-neutral-000 dark:bg-neutral-1300 hover:bg-neutral-100 dark:hover:bg-neutral-1200 active:bg-neutral-100 dark:active:bg-neutral-1200"},subtle:{active:"bg-neutral-000 dark:bg-neutral-1000",inactive:"bg-neutral-100 dark:bg-neutral-1200 hover:bg-neutral-200 dark:hover:bg-neutral-1100 active:bg-neutral-200 dark:active:bg-neutral-1100"},strong:{active:"bg-neutral-1000 dark:bg-neutral-300",inactive:"bg-neutral-100 dark:bg-neutral-1200 hover:bg-neutral-200 dark:hover:bg-neutral-1100 active:bg-neutral-200 dark:active:bg-neutral-1100"}};const contentColorStyles={default:{active:"text-neutral-1300 dark:text-neutral-000",inactive:"text-neutral-1000 dark:text-neutral-300 hover:text-neutral-1300 dark:hover:text-neutral-000"},subtle:{active:"text-neutral-1300 dark:text-neutral-000",inactive:"text-neutral-1000 dark:text-neutral-300 hover:text-neutral-1300 dark:hover:text-neutral-000"},strong:{active:"text-neutral-000 dark:text-neutral-1300",inactive:"text-neutral-1000 dark:text-neutral-300 hover:text-neutral-1300 dark:hover:text-neutral-000"}};const sizeStyles={md:cn("h-48 p-12 gap-[10px]",rounded&&"px-[18px]"),sm:cn("h-40 p-[9px] gap-[9px]",rounded&&"px-[14px]"),xs:cn("h-36 p-8 gap-8",rounded&&"px-12")};const textStyles={md:"ui-text-label2",sm:"ui-text-label3",xs:"ui-text-label4"};const iconSizes={md:"23px",sm:"22px",xs:"20px"};const activeKey=active?"active":"inactive";return React.createElement("div",{onClick:!disabled?onClick:undefined,onKeyDown:e=>{if((e.key==="Enter"||e.key===" ")&&!disabled&&onClick){e.preventDefault();onClick()}},className:cn("focus-base flex items-center justify-center cursor-pointer select-none transition-colors",colorStyles[variant][activeKey],contentColorStyles[variant][activeKey],sizeStyles[size],textStyles[size],disabled&&"cursor-not-allowed hover:bg-inherit dark:hover:bg-inherit active:bg-inherit dark:active:bg-inherit",rounded?"rounded-full":"rounded-lg",className),tabIndex:disabled?-1:0,role:"button","aria-pressed":active,"aria-disabled":disabled},leftIcon&&React.createElement(Icon,{name:leftIcon,size:iconSizes[size],"aria-hidden":"true"}),React.createElement("span",{className:cn("font-semibold transition-colors",contentColorStyles[variant][activeKey],disabled&&"text-gui-unavailable dark:text-gui-unavailable-dark hover:text-gui-unavailable dark:hover:text-gui-unavailable-dark")},children),rightIcon&&React.createElement(Icon,{name:rightIcon,size:iconSizes[size],"aria-hidden":"true"}))};export default SegmentedControl;
 //# sourceMappingURL=SegmentedControl.js.map

package/core/SegmentedControl.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/core/SegmentedControl.tsx"],"sourcesContent":["import React, { PropsWithChildren } from \"react\";\nimport cn from \"./utils/cn\";\nimport Icon from \"./Icon\";\nimport type { IconName, IconSize } from \"./Icon/types\";\n\nexport type SegmentedControlSize = \"md\" | \"sm\" | \"xs\";\n\nexport type SegmentedControlProps = {\n  className?: string;\n  rounded?: boolean;\n  leftIcon?: IconName;\n  rightIcon?: IconName;\n  active?: boolean;\n  variant?: \"default\" | \"subtle\" | \"strong\";\n  size?: SegmentedControlSize;\n  onClick?: () => void;\n  disabled?: boolean;\n};\n\nconst SegmentedControl: React.FC<PropsWithChildren<SegmentedControlProps>> = ({\n  className,\n  rounded = false,\n  leftIcon,\n  rightIcon,\n  active = false,\n  variant = \"default\",\n  size = \"md\",\n  children,\n  onClick,\n  disabled,\n}) => {\n  const colorStyles = {\n    default: {\n      active: \"bg-neutral-200 dark:bg-neutral-1100\",\n      inactive:\n        \"bg-neutral-000 dark:bg-neutral-1300 hover:bg-neutral-100 dark:hover:bg-neutral-1200 active:bg-neutral-100 dark:active:bg-neutral-1200\",\n    },\n    subtle: {\n      active: \"bg-neutral-000 dark:bg-neutral-1000\",\n      inactive:\n        \"bg-neutral-100 dark:bg-neutral-1200 hover:bg-neutral-200 dark:hover:bg-neutral-1100 active:bg-neutral-200 dark:active:bg-neutral-1100\",\n    },\n    strong: {\n      active: \"bg-neutral-1000 dark:bg-neutral-300\",\n      inactive:\n        \"bg-neutral-100 dark:bg-neutral-1200 hover:bg-neutral-200 dark:hover:bg-neutral-1100 active:bg-neutral-200 dark:active:bg-neutral-1100\",\n    },\n  };\n\n  const contentColorStyles = {\n    default: {\n      active: \"text-neutral-1300 dark:text-neutral-000\",\n      inactive:\n        \"text-neutral-1000 dark:text-neutral-300 hover:text-neutral-1300 dark:hover:text-neutral-000\",\n    },\n    subtle: {\n      active: \"text-neutral-1300 dark:text-neutral-000\",\n      inactive:\n        \"text-neutral-1000 dark:text-neutral-300 hover:text-neutral-1300 dark:hover:text-neutral-000\",\n    },\n    strong: {\n      active: \"text-neutral-000 dark:text-neutral-1300\",\n      inactive:\n        \"text-neutral-1000 dark:text-neutral-300 hover:text-neutral-1300 dark:hover:text-neutral-000\",\n    },\n  };\n\n  const sizeStyles = {\n    md: cn(\"h-48 p-12 gap-[10px]\", rounded && \"px-[18px]\"),\n    sm: cn(\"h-40 p-[9px] gap-[9px]\", rounded && \"px-[14px]\"),\n    xs: cn(\"h-36 p-8 gap-8\", rounded && \"px-12\"),\n  };\n\n  const textStyles = {\n    md: \"ui-text-menu2\",\n    sm: \"ui-text-menu3\",\n    xs: \"ui-text-menu4\",\n  };\n\n  const iconSizes: Record<SegmentedControlSize, IconSize> = {\n    md: \"23px\",\n    sm: \"22px\",\n    xs: \"20px\",\n  };\n\n  const activeKey = active ? \"active\" : \"inactive\";\n\n  return (\n    <div\n      onClick={!disabled ? onClick : undefined}\n      onKeyDown={(e) => {\n        if ((e.key === \"Enter\" || e.key === \" \") && !disabled && onClick) {\n          e.preventDefault();\n          onClick();\n        }\n      }}\n      className={cn(\n        \"focus-base flex items-center justify-center cursor-pointer select-none transition-colors\",\n        colorStyles[variant][activeKey],\n        contentColorStyles[variant][activeKey],\n        sizeStyles[size],\n        textStyles[size],\n        disabled &&\n          \"cursor-not-allowed hover:bg-inherit dark:hover:bg-inherit active:bg-inherit dark:active:bg-inherit\",\n        rounded ? \"rounded-full\" : \"rounded-lg\",\n        className,\n      )}\n      tabIndex={disabled ? -1 : 0}\n      role=\"button\"\n      aria-pressed={active}\n      aria-disabled={disabled}\n    >\n      {leftIcon && (\n        <Icon name={leftIcon} size={iconSizes[size]} aria-hidden=\"true\" />\n      )}\n      <span\n        className={cn(\n          \"font-semibold transition-colors\",\n          contentColorStyles[variant][activeKey],\n          disabled &&\n            \"text-gui-unavailable dark:text-gui-unavailable-dark hover:text-gui-unavailable dark:hover:text-gui-unavailable-dark\",\n        )}\n      >\n        {children}\n      </span>\n      {rightIcon && (\n        <Icon name={rightIcon} size={iconSizes[size]} aria-hidden=\"true\" />\n      )}\n    </div>\n  );\n};\n\nexport default SegmentedControl;\n"],"names":["React","cn","Icon","SegmentedControl","className","rounded","leftIcon","rightIcon","active","variant","size","children","onClick","disabled","colorStyles","default","inactive","subtle","strong","contentColorStyles","sizeStyles","md","sm","xs","textStyles","iconSizes","activeKey","div","undefined","onKeyDown","e","key","preventDefault","tabIndex","role","aria-pressed","aria-disabled","name","aria-hidden","span"],"mappings":"AAAA,OAAOA,UAAkC,OAAQ,AACjD,QAAOC,OAAQ,YAAa,AAC5B,QAAOC,SAAU,QAAS,CAiB1B,MAAMC,iBAAuE,CAAC,CAC5EC,SAAS,CACTC,QAAU,KAAK,CACfC,QAAQ,CACRC,SAAS,CACTC,OAAS,KAAK,CACdC,QAAU,SAAS,CACnBC,KAAO,IAAI,CACXC,QAAQ,CACRC,OAAO,CACPC,QAAQ,CACT,IACC,MAAMC,YAAc,CAClBC,QAAS,CACPP,OAAQ,sCACRQ,SACE,uIACJ,EACAC,OAAQ,CACNT,OAAQ,sCACRQ,SACE,uIACJ,EACAE,OAAQ,CACNV,OAAQ,sCACRQ,SACE,uIACJ,CACF,EAEA,MAAMG,mBAAqB,CACzBJ,QAAS,CACPP,OAAQ,0CACRQ,SACE,6FACJ,EACAC,OAAQ,CACNT,OAAQ,0CACRQ,SACE,6FACJ,EACAE,OAAQ,CACNV,OAAQ,0CACRQ,SACE,6FACJ,CACF,EAEA,MAAMI,WAAa,CACjBC,GAAIpB,GAAG,uBAAwBI,SAAW,aAC1CiB,GAAIrB,GAAG,yBAA0BI,SAAW,aAC5CkB,GAAItB,GAAG,iBAAkBI,SAAW,QACtC,EAEA,MAAMmB,WAAa,CACjBH,GAAI,gBACJC,GAAI,gBACJC,GAAI,eACN,EAEA,MAAME,UAAoD,CACxDJ,GAAI,OACJC,GAAI,OACJC,GAAI,MACN,EAEA,MAAMG,UAAYlB,OAAS,SAAW,WAEtC,OACE,oBAACmB,OACCf,QAAS,CAACC,SAAWD,QAAUgB,UAC/BC,UAAW,AAACC,IACV,GAAI,AAACA,CAAAA,EAAEC,GAAG,GAAK,SAAWD,EAAEC,GAAG,GAAK,GAAE,GAAM,CAAClB,UAAYD,QAAS,CAChEkB,EAAEE,cAAc,GAChBpB,SACF,CACF,EACAR,UAAWH,GACT,2FACAa,WAAW,CAACL,QAAQ,CAACiB,UAAU,CAC/BP,kBAAkB,CAACV,QAAQ,CAACiB,UAAU,CACtCN,UAAU,CAACV,KAAK,CAChBc,UAAU,CAACd,KAAK,CAChBG,UACE,qGACFR,QAAU,eAAiB,aAC3BD,WAEF6B,SAAUpB,SAAW,CAAC,EAAI,EAC1BqB,KAAK,SACLC,eAAc3B,OACd4B,gBAAevB,UAEdP,UACC,oBAACJ,MAAKmC,KAAM/B,SAAUI,KAAMe,SAAS,CAACf,KAAK,CAAE4B,cAAY,SAE3D,oBAACC,QACCnC,UAAWH,GACT,kCACAkB,kBAAkB,CAACV,QAAQ,CAACiB,UAAU,CACtCb,UACE,wHAGHF,UAEFJ,WACC,oBAACL,MAAKmC,KAAM9B,UAAWG,KAAMe,SAAS,CAACf,KAAK,CAAE4B,cAAY,SAIlE,CAEA,gBAAenC,gBAAiB"}
+{"version":3,"sources":["../../src/core/SegmentedControl.tsx"],"sourcesContent":["import React, { PropsWithChildren } from \"react\";\nimport cn from \"./utils/cn\";\nimport Icon from \"./Icon\";\nimport type { IconName, IconSize } from \"./Icon/types\";\n\nexport type SegmentedControlSize = \"md\" | \"sm\" | \"xs\";\n\nexport type SegmentedControlProps = {\n  className?: string;\n  rounded?: boolean;\n  leftIcon?: IconName;\n  rightIcon?: IconName;\n  active?: boolean;\n  variant?: \"default\" | \"subtle\" | \"strong\";\n  size?: SegmentedControlSize;\n  onClick?: () => void;\n  disabled?: boolean;\n};\n\nconst SegmentedControl: React.FC<PropsWithChildren<SegmentedControlProps>> = ({\n  className,\n  rounded = false,\n  leftIcon,\n  rightIcon,\n  active = false,\n  variant = \"default\",\n  size = \"md\",\n  children,\n  onClick,\n  disabled,\n}) => {\n  const colorStyles = {\n    default: {\n      active: \"bg-neutral-200 dark:bg-neutral-1100\",\n      inactive:\n        \"bg-neutral-000 dark:bg-neutral-1300 hover:bg-neutral-100 dark:hover:bg-neutral-1200 active:bg-neutral-100 dark:active:bg-neutral-1200\",\n    },\n    subtle: {\n      active: \"bg-neutral-000 dark:bg-neutral-1000\",\n      inactive:\n        \"bg-neutral-100 dark:bg-neutral-1200 hover:bg-neutral-200 dark:hover:bg-neutral-1100 active:bg-neutral-200 dark:active:bg-neutral-1100\",\n    },\n    strong: {\n      active: \"bg-neutral-1000 dark:bg-neutral-300\",\n      inactive:\n        \"bg-neutral-100 dark:bg-neutral-1200 hover:bg-neutral-200 dark:hover:bg-neutral-1100 active:bg-neutral-200 dark:active:bg-neutral-1100\",\n    },\n  };\n\n  const contentColorStyles = {\n    default: {\n      active: \"text-neutral-1300 dark:text-neutral-000\",\n      inactive:\n        \"text-neutral-1000 dark:text-neutral-300 hover:text-neutral-1300 dark:hover:text-neutral-000\",\n    },\n    subtle: {\n      active: \"text-neutral-1300 dark:text-neutral-000\",\n      inactive:\n        \"text-neutral-1000 dark:text-neutral-300 hover:text-neutral-1300 dark:hover:text-neutral-000\",\n    },\n    strong: {\n      active: \"text-neutral-000 dark:text-neutral-1300\",\n      inactive:\n        \"text-neutral-1000 dark:text-neutral-300 hover:text-neutral-1300 dark:hover:text-neutral-000\",\n    },\n  };\n\n  const sizeStyles = {\n    md: cn(\"h-48 p-12 gap-[10px]\", rounded && \"px-[18px]\"),\n    sm: cn(\"h-40 p-[9px] gap-[9px]\", rounded && \"px-[14px]\"),\n    xs: cn(\"h-36 p-8 gap-8\", rounded && \"px-12\"),\n  };\n\n  const textStyles = {\n    md: \"ui-text-label2\",\n    sm: \"ui-text-label3\",\n    xs: \"ui-text-label4\",\n  };\n\n  const iconSizes: Record<SegmentedControlSize, IconSize> = {\n    md: \"23px\",\n    sm: \"22px\",\n    xs: \"20px\",\n  };\n\n  const activeKey = active ? \"active\" : \"inactive\";\n\n  return (\n    <div\n      onClick={!disabled ? onClick : undefined}\n      onKeyDown={(e) => {\n        if ((e.key === \"Enter\" || e.key === \" \") && !disabled && onClick) {\n          e.preventDefault();\n          onClick();\n        }\n      }}\n      className={cn(\n        \"focus-base flex items-center justify-center cursor-pointer select-none transition-colors\",\n        colorStyles[variant][activeKey],\n        contentColorStyles[variant][activeKey],\n        sizeStyles[size],\n        textStyles[size],\n        disabled &&\n          \"cursor-not-allowed hover:bg-inherit dark:hover:bg-inherit active:bg-inherit dark:active:bg-inherit\",\n        rounded ? \"rounded-full\" : \"rounded-lg\",\n        className,\n      )}\n      tabIndex={disabled ? -1 : 0}\n      role=\"button\"\n      aria-pressed={active}\n      aria-disabled={disabled}\n    >\n      {leftIcon && (\n        <Icon name={leftIcon} size={iconSizes[size]} aria-hidden=\"true\" />\n      )}\n      <span\n        className={cn(\n          \"font-semibold transition-colors\",\n          contentColorStyles[variant][activeKey],\n          disabled &&\n            \"text-gui-unavailable dark:text-gui-unavailable-dark hover:text-gui-unavailable dark:hover:text-gui-unavailable-dark\",\n        )}\n      >\n        {children}\n      </span>\n      {rightIcon && (\n        <Icon name={rightIcon} size={iconSizes[size]} aria-hidden=\"true\" />\n      )}\n    </div>\n  );\n};\n\nexport default SegmentedControl;\n"],"names":["React","cn","Icon","SegmentedControl","className","rounded","leftIcon","rightIcon","active","variant","size","children","onClick","disabled","colorStyles","default","inactive","subtle","strong","contentColorStyles","sizeStyles","md","sm","xs","textStyles","iconSizes","activeKey","div","undefined","onKeyDown","e","key","preventDefault","tabIndex","role","aria-pressed","aria-disabled","name","aria-hidden","span"],"mappings":"AAAA,OAAOA,UAAkC,OAAQ,AACjD,QAAOC,OAAQ,YAAa,AAC5B,QAAOC,SAAU,QAAS,CAiB1B,MAAMC,iBAAuE,CAAC,CAC5EC,SAAS,CACTC,QAAU,KAAK,CACfC,QAAQ,CACRC,SAAS,CACTC,OAAS,KAAK,CACdC,QAAU,SAAS,CACnBC,KAAO,IAAI,CACXC,QAAQ,CACRC,OAAO,CACPC,QAAQ,CACT,IACC,MAAMC,YAAc,CAClBC,QAAS,CACPP,OAAQ,sCACRQ,SACE,uIACJ,EACAC,OAAQ,CACNT,OAAQ,sCACRQ,SACE,uIACJ,EACAE,OAAQ,CACNV,OAAQ,sCACRQ,SACE,uIACJ,CACF,EAEA,MAAMG,mBAAqB,CACzBJ,QAAS,CACPP,OAAQ,0CACRQ,SACE,6FACJ,EACAC,OAAQ,CACNT,OAAQ,0CACRQ,SACE,6FACJ,EACAE,OAAQ,CACNV,OAAQ,0CACRQ,SACE,6FACJ,CACF,EAEA,MAAMI,WAAa,CACjBC,GAAIpB,GAAG,uBAAwBI,SAAW,aAC1CiB,GAAIrB,GAAG,yBAA0BI,SAAW,aAC5CkB,GAAItB,GAAG,iBAAkBI,SAAW,QACtC,EAEA,MAAMmB,WAAa,CACjBH,GAAI,iBACJC,GAAI,iBACJC,GAAI,gBACN,EAEA,MAAME,UAAoD,CACxDJ,GAAI,OACJC,GAAI,OACJC,GAAI,MACN,EAEA,MAAMG,UAAYlB,OAAS,SAAW,WAEtC,OACE,oBAACmB,OACCf,QAAS,CAACC,SAAWD,QAAUgB,UAC/BC,UAAW,AAACC,IACV,GAAI,AAACA,CAAAA,EAAEC,GAAG,GAAK,SAAWD,EAAEC,GAAG,GAAK,GAAE,GAAM,CAAClB,UAAYD,QAAS,CAChEkB,EAAEE,cAAc,GAChBpB,SACF,CACF,EACAR,UAAWH,GACT,2FACAa,WAAW,CAACL,QAAQ,CAACiB,UAAU,CAC/BP,kBAAkB,CAACV,QAAQ,CAACiB,UAAU,CACtCN,UAAU,CAACV,KAAK,CAChBc,UAAU,CAACd,KAAK,CAChBG,UACE,qGACFR,QAAU,eAAiB,aAC3BD,WAEF6B,SAAUpB,SAAW,CAAC,EAAI,EAC1BqB,KAAK,SACLC,eAAc3B,OACd4B,gBAAevB,UAEdP,UACC,oBAACJ,MAAKmC,KAAM/B,SAAUI,KAAMe,SAAS,CAACf,KAAK,CAAE4B,cAAY,SAE3D,oBAACC,QACCnC,UAAWH,GACT,kCACAkB,kBAAkB,CAACV,QAAQ,CAACiB,UAAU,CACtCb,UACE,wHAGHF,UAEFJ,WACC,oBAACL,MAAKmC,KAAM9B,UAAWG,KAAMe,SAAS,CAACf,KAAK,CAAE4B,cAAY,SAIlE,CAEA,gBAAenC,gBAAiB"}

package/core/Status.js

@@ -1,2 +1,2 @@
-import React from"react";import useSWR from"swr";import cn from"./utils/cn";import Icon from"./Icon";export const statusTypes=["none","operational","minor","major","critical","unknown"];export const StatusUrl="https://ntqy1wz94gjv.statuspage.io/api/v2/status.json";const fetcher=url=>fetch(url).then(res=>res.json());const indicatorClass=indicator=>{switch(indicator){case"none":case"operational":return"bg-gui-success-green";case"minor":return"bg-yellow-500";case"major":return"bg-orange-500";case"critical":return"bg-gui-error-red";default:return"bg-neutral-500"}};export const StatusIcon=({statusUrl,refreshInterval=1e3*60})=>{const{data,error,isLoading}=useSWR(statusUrl,fetcher,{refreshInterval});return React.createElement("span",{className:cn("inline-flex h-8 aspect-square rounded-full",indicatorClass(data?.status?.indicator),{"animate-pulse":isLoading||error})})};const Status=({statusUrl=StatusUrl,additionalCSS,refreshInterval=1e3*60,showDescription=false})=>{const{data}=useSWR(statusUrl,fetcher,{refreshInterval});return React.createElement("a",{href:"https://status.ably.com",className:cn("inline-flex group/status items-center gap-8",additionalCSS),target:"_blank",rel:"noreferrer"},React.createElement(StatusIcon,{statusUrl:statusUrl,refreshInterval:refreshInterval??1e3*60}),showDescription&&data?.status?.description&&React.createElement("div",{className:"flex gap-8 ui-text-menu4 font-medium text-neutral-900 group-hover/status:text-neutral-1300 dark:text-neutral-400 dark:group-hover/status:text-neutral-000 transition-colors"},React.createElement("span",null,data.status.description.charAt(0).toUpperCase()+data.status.description.slice(1).toLowerCase()),React.createElement(Icon,{name:"icon-gui-arrow-top-right-on-square-outline",size:"16px"})))};export default Status;
+import React from"react";import useSWR from"swr";import cn from"./utils/cn";import Icon from"./Icon";export const statusTypes=["none","operational","minor","major","critical","unknown"];export const StatusUrl="https://ntqy1wz94gjv.statuspage.io/api/v2/status.json";const fetcher=url=>fetch(url).then(res=>res.json());const indicatorClass=indicator=>{switch(indicator){case"none":case"operational":return"bg-gui-success-green";case"minor":return"bg-yellow-500";case"major":return"bg-orange-500";case"critical":return"bg-gui-error-red";default:return"bg-neutral-500"}};export const StatusIcon=({statusUrl,refreshInterval=1e3*60})=>{const{data,error,isLoading}=useSWR(statusUrl,fetcher,{refreshInterval});return React.createElement("span",{className:cn("inline-flex h-8 aspect-square rounded-full",indicatorClass(data?.status?.indicator),{"animate-pulse":isLoading||error})})};const Status=({statusUrl=StatusUrl,additionalCSS,refreshInterval=1e3*60,showDescription=false})=>{const{data}=useSWR(statusUrl,fetcher,{refreshInterval});return React.createElement("a",{href:"https://status.ably.com",className:cn("inline-flex group/status items-center gap-8",additionalCSS),target:"_blank",rel:"noreferrer"},React.createElement(StatusIcon,{statusUrl:statusUrl,refreshInterval:refreshInterval??1e3*60}),showDescription&&data?.status?.description&&React.createElement("div",{className:"flex gap-8 ui-text-label4 font-medium text-neutral-900 group-hover/status:text-neutral-1300 dark:text-neutral-400 dark:group-hover/status:text-neutral-000 transition-colors"},React.createElement("span",null,data.status.description.charAt(0).toUpperCase()+data.status.description.slice(1).toLowerCase()),React.createElement(Icon,{name:"icon-gui-arrow-top-right-on-square-outline",size:"16px"})))};export default Status;
 //# sourceMappingURL=Status.js.map

package/core/Status.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/core/Status.tsx"],"sourcesContent":["import React from \"react\";\nimport useSWR from \"swr\";\nimport cn from \"./utils/cn\";\nimport Icon from \"./Icon\";\n\ntype StatusProps = {\n  statusUrl: string;\n  additionalCSS?: string;\n  refreshInterval?: number;\n  showDescription?: boolean;\n};\n\nexport const statusTypes = [\n  \"none\",\n  \"operational\",\n  \"minor\",\n  \"major\",\n  \"critical\",\n  \"unknown\",\n] as const;\n\nexport type StatusType = (typeof statusTypes)[number];\n\nexport const StatusUrl =\n  \"https://ntqy1wz94gjv.statuspage.io/api/v2/status.json\";\n\n// Our SWR fetcher function\nconst fetcher = (url: string) => fetch(url).then((res) => res.json());\n\nconst indicatorClass = (indicator?: StatusType) => {\n  switch (indicator) {\n    case \"none\":\n    case \"operational\":\n      return \"bg-gui-success-green\";\n    case \"minor\":\n      return \"bg-yellow-500\";\n    case \"major\":\n      return \"bg-orange-500\";\n    case \"critical\":\n      return \"bg-gui-error-red\";\n    default:\n      return \"bg-neutral-500\";\n  }\n};\n\nexport const StatusIcon = ({\n  statusUrl,\n  refreshInterval = 1000 * 60,\n}: StatusProps) => {\n  const { data, error, isLoading } = useSWR(statusUrl, fetcher, {\n    refreshInterval,\n  });\n\n  return (\n    <span\n      className={cn(\n        \"inline-flex h-8 aspect-square rounded-full\",\n        indicatorClass(data?.status?.indicator),\n        { \"animate-pulse\": isLoading || error },\n      )}\n    ></span>\n  );\n};\n\nconst Status = ({\n  statusUrl = StatusUrl,\n  additionalCSS,\n  refreshInterval = 1000 * 60,\n  showDescription = false,\n}: StatusProps) => {\n  const { data } = useSWR(statusUrl, fetcher, {\n    refreshInterval,\n  });\n\n  return (\n    <a\n      href=\"https://status.ably.com\"\n      className={cn(\n        \"inline-flex group/status items-center gap-8\",\n        additionalCSS,\n      )}\n      target=\"_blank\"\n      rel=\"noreferrer\"\n    >\n      <StatusIcon\n        statusUrl={statusUrl}\n        refreshInterval={refreshInterval ?? 1000 * 60}\n      />\n      {showDescription && data?.status?.description && (\n        <div className=\"flex gap-8 ui-text-menu4 font-medium text-neutral-900 group-hover/status:text-neutral-1300 dark:text-neutral-400 dark:group-hover/status:text-neutral-000 transition-colors\">\n          <span>\n            {data.status.description.charAt(0).toUpperCase() +\n              data.status.description.slice(1).toLowerCase()}\n          </span>\n          <Icon name=\"icon-gui-arrow-top-right-on-square-outline\" size=\"16px\" />\n        </div>\n      )}\n    </a>\n  );\n};\n\nexport default Status;\n"],"names":["React","useSWR","cn","Icon","statusTypes","StatusUrl","fetcher","url","fetch","then","res","json","indicatorClass","indicator","StatusIcon","statusUrl","refreshInterval","data","error","isLoading","span","className","status","Status","additionalCSS","showDescription","a","href","target","rel","description","div","charAt","toUpperCase","slice","toLowerCase","name","size"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QAAOC,WAAY,KAAM,AACzB,QAAOC,OAAQ,YAAa,AAC5B,QAAOC,SAAU,QAAS,AAS1B,QAAO,MAAMC,YAAc,CACzB,OACA,cACA,QACA,QACA,WACA,UACD,AAAU,AAIX,QAAO,MAAMC,UACX,uDAAwD,CAG1D,MAAMC,QAAU,AAACC,KAAgBC,MAAMD,KAAKE,IAAI,CAAC,AAACC,KAAQA,IAAIC,IAAI,IAElE,MAAMC,eAAiB,AAACC,YACtB,OAAQA,WACN,IAAK,OACL,IAAK,cACH,MAAO,sBACT,KAAK,QACH,MAAO,eACT,KAAK,QACH,MAAO,eACT,KAAK,WACH,MAAO,kBACT,SACE,MAAO,gBACX,CACF,CAEA,QAAO,MAAMC,WAAa,CAAC,CACzBC,SAAS,CACTC,gBAAkB,IAAO,EAAE,CACf,IACZ,KAAM,CAAEC,IAAI,CAAEC,KAAK,CAAEC,SAAS,CAAE,CAAGlB,OAAOc,UAAWT,QAAS,CAC5DU,eACF,GAEA,OACE,oBAACI,QACCC,UAAWnB,GACT,6CACAU,eAAeK,MAAMK,QAAQT,WAC7B,CAAE,gBAAiBM,WAAaD,KAAM,IAI9C,CAAE,CAEF,MAAMK,OAAS,CAAC,CACdR,UAAYV,SAAS,CACrBmB,aAAa,CACbR,gBAAkB,IAAO,EAAE,CAC3BS,gBAAkB,KAAK,CACX,IACZ,KAAM,CAAER,IAAI,CAAE,CAAGhB,OAAOc,UAAWT,QAAS,CAC1CU,eACF,GAEA,OACE,oBAACU,KACCC,KAAK,0BACLN,UAAWnB,GACT,8CACAsB,eAEFI,OAAO,SACPC,IAAI,cAEJ,oBAACf,YACCC,UAAWA,UACXC,gBAAiBA,iBAAmB,IAAO,KAE5CS,iBAAmBR,MAAMK,QAAQQ,aAChC,oBAACC,OAAIV,UAAU,+KACb,oBAACD,YACEH,KAAKK,MAAM,CAACQ,WAAW,CAACE,MAAM,CAAC,GAAGC,WAAW,GAC5ChB,KAAKK,MAAM,CAACQ,WAAW,CAACI,KAAK,CAAC,GAAGC,WAAW,IAEhD,oBAAChC,MAAKiC,KAAK,6CAA6CC,KAAK,UAKvE,CAEA,gBAAed,MAAO"}
+{"version":3,"sources":["../../src/core/Status.tsx"],"sourcesContent":["import React from \"react\";\nimport useSWR from \"swr\";\nimport cn from \"./utils/cn\";\nimport Icon from \"./Icon\";\n\ntype StatusProps = {\n  statusUrl: string;\n  additionalCSS?: string;\n  refreshInterval?: number;\n  showDescription?: boolean;\n};\n\nexport const statusTypes = [\n  \"none\",\n  \"operational\",\n  \"minor\",\n  \"major\",\n  \"critical\",\n  \"unknown\",\n] as const;\n\nexport type StatusType = (typeof statusTypes)[number];\n\nexport const StatusUrl =\n  \"https://ntqy1wz94gjv.statuspage.io/api/v2/status.json\";\n\n// Our SWR fetcher function\nconst fetcher = (url: string) => fetch(url).then((res) => res.json());\n\nconst indicatorClass = (indicator?: StatusType) => {\n  switch (indicator) {\n    case \"none\":\n    case \"operational\":\n      return \"bg-gui-success-green\";\n    case \"minor\":\n      return \"bg-yellow-500\";\n    case \"major\":\n      return \"bg-orange-500\";\n    case \"critical\":\n      return \"bg-gui-error-red\";\n    default:\n      return \"bg-neutral-500\";\n  }\n};\n\nexport const StatusIcon = ({\n  statusUrl,\n  refreshInterval = 1000 * 60,\n}: StatusProps) => {\n  const { data, error, isLoading } = useSWR(statusUrl, fetcher, {\n    refreshInterval,\n  });\n\n  return (\n    <span\n      className={cn(\n        \"inline-flex h-8 aspect-square rounded-full\",\n        indicatorClass(data?.status?.indicator),\n        { \"animate-pulse\": isLoading || error },\n      )}\n    ></span>\n  );\n};\n\nconst Status = ({\n  statusUrl = StatusUrl,\n  additionalCSS,\n  refreshInterval = 1000 * 60,\n  showDescription = false,\n}: StatusProps) => {\n  const { data } = useSWR(statusUrl, fetcher, {\n    refreshInterval,\n  });\n\n  return (\n    <a\n      href=\"https://status.ably.com\"\n      className={cn(\n        \"inline-flex group/status items-center gap-8\",\n        additionalCSS,\n      )}\n      target=\"_blank\"\n      rel=\"noreferrer\"\n    >\n      <StatusIcon\n        statusUrl={statusUrl}\n        refreshInterval={refreshInterval ?? 1000 * 60}\n      />\n      {showDescription && data?.status?.description && (\n        <div className=\"flex gap-8 ui-text-label4 font-medium text-neutral-900 group-hover/status:text-neutral-1300 dark:text-neutral-400 dark:group-hover/status:text-neutral-000 transition-colors\">\n          <span>\n            {data.status.description.charAt(0).toUpperCase() +\n              data.status.description.slice(1).toLowerCase()}\n          </span>\n          <Icon name=\"icon-gui-arrow-top-right-on-square-outline\" size=\"16px\" />\n        </div>\n      )}\n    </a>\n  );\n};\n\nexport default Status;\n"],"names":["React","useSWR","cn","Icon","statusTypes","StatusUrl","fetcher","url","fetch","then","res","json","indicatorClass","indicator","StatusIcon","statusUrl","refreshInterval","data","error","isLoading","span","className","status","Status","additionalCSS","showDescription","a","href","target","rel","description","div","charAt","toUpperCase","slice","toLowerCase","name","size"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QAAOC,WAAY,KAAM,AACzB,QAAOC,OAAQ,YAAa,AAC5B,QAAOC,SAAU,QAAS,AAS1B,QAAO,MAAMC,YAAc,CACzB,OACA,cACA,QACA,QACA,WACA,UACD,AAAU,AAIX,QAAO,MAAMC,UACX,uDAAwD,CAG1D,MAAMC,QAAU,AAACC,KAAgBC,MAAMD,KAAKE,IAAI,CAAC,AAACC,KAAQA,IAAIC,IAAI,IAElE,MAAMC,eAAiB,AAACC,YACtB,OAAQA,WACN,IAAK,OACL,IAAK,cACH,MAAO,sBACT,KAAK,QACH,MAAO,eACT,KAAK,QACH,MAAO,eACT,KAAK,WACH,MAAO,kBACT,SACE,MAAO,gBACX,CACF,CAEA,QAAO,MAAMC,WAAa,CAAC,CACzBC,SAAS,CACTC,gBAAkB,IAAO,EAAE,CACf,IACZ,KAAM,CAAEC,IAAI,CAAEC,KAAK,CAAEC,SAAS,CAAE,CAAGlB,OAAOc,UAAWT,QAAS,CAC5DU,eACF,GAEA,OACE,oBAACI,QACCC,UAAWnB,GACT,6CACAU,eAAeK,MAAMK,QAAQT,WAC7B,CAAE,gBAAiBM,WAAaD,KAAM,IAI9C,CAAE,CAEF,MAAMK,OAAS,CAAC,CACdR,UAAYV,SAAS,CACrBmB,aAAa,CACbR,gBAAkB,IAAO,EAAE,CAC3BS,gBAAkB,KAAK,CACX,IACZ,KAAM,CAAER,IAAI,CAAE,CAAGhB,OAAOc,UAAWT,QAAS,CAC1CU,eACF,GAEA,OACE,oBAACU,KACCC,KAAK,0BACLN,UAAWnB,GACT,8CACAsB,eAEFI,OAAO,SACPC,IAAI,cAEJ,oBAACf,YACCC,UAAWA,UACXC,gBAAiBA,iBAAmB,IAAO,KAE5CS,iBAAmBR,MAAMK,QAAQQ,aAChC,oBAACC,OAAIV,UAAU,gLACb,oBAACD,YACEH,KAAKK,MAAM,CAACQ,WAAW,CAACE,MAAM,CAAC,GAAGC,WAAW,GAC5ChB,KAAKK,MAAM,CAACQ,WAAW,CAACI,KAAK,CAAC,GAAGC,WAAW,IAEhD,oBAAChC,MAAKiC,KAAK,6CAA6CC,KAAK,UAKvE,CAEA,gBAAed,MAAO"}

package/core/TabMenu.js

@@ -1,2 +1,2 @@
-import React,{useEffect}from"react";import*as Tabs from"@radix-ui/react-tabs";import throttle from"lodash.throttle";import cn from"./utils/cn";const DEFAULT_TAILWIND_ANIMATION_DURATION=150;const TabMenu=({tabs=[],contents=[],tabOnClick,tabClassName,rootClassName,contentClassName,options})=>{const{defaultTabIndex=0,underline=true,animated:animatedOption=true,flexibleTabWidth=false,flexibleTabHeight=false}=options??{};const listRef=React.useRef(null);const[animated,setAnimated]=React.useState(false);const[highlight,setHighlight]=React.useState({offset:0,width:0});useEffect(()=>{if(animatedOption&&highlight.width>0){setTimeout(()=>{setAnimated(true)},DEFAULT_TAILWIND_ANIMATION_DURATION)}},[animatedOption,highlight.width]);useEffect(()=>{const handleResize=throttle(()=>{const activeTabElement=listRef.current?.querySelector(`[data-state="active"]`);if(activeTabElement){updateHighlightDimensions(activeTabElement)}},100);handleResize();window.addEventListener("resize",handleResize);return()=>{window.removeEventListener("resize",handleResize)}},[]);const updateHighlightDimensions=element=>{const{left:parentLeft}=listRef.current?.getBoundingClientRect()??{};const{left,width}=element.getBoundingClientRect()??{};setHighlight({offset:(left??0)-(parentLeft??0),width:width??0})};const handleTabClick=(event,index)=>{tabOnClick?.(index);updateHighlightDimensions(event.currentTarget)};return React.createElement(Tabs.Root,{defaultValue:`tab-${defaultTabIndex}`,className:cn({"h-full":flexibleTabHeight},rootClassName)},React.createElement(Tabs.List,{ref:listRef,className:cn("relative",{"flex border-b border-neutral-300 dark:border-neutral-1000":underline},{"h-full":flexibleTabHeight})},tabs.map((tab,index)=>React.createElement(Tabs.Trigger,{key:`tab-${index}`,className:cn("lg:px-24 md:px-20 px-16 py-16 ui-text-menu1 font-bold data-[state=active]:text-neutral-1300 text-neutral-1000 dark:data-[state=active]:text-neutral-000 dark:text-neutral-300 focus:outline-none focus-visible:outline-gui-focus transition-colors hover:text-neutral-1300 dark:hover:text-neutral-000 active:text-neutral-900 dark:active:text-neutral-400 disabled:text-gui-unavailable dark:disabled:text-gui-unavailable-dark disabled:cursor-not-allowed",{"flex-1":flexibleTabWidth},{"h-full":flexibleTabHeight},tabClassName),value:`tab-${index}`,onClick:event=>handleTabClick(event,index),disabled:typeof tab==="object"?tab.disabled:false},typeof tab==="object"?tab.label:tab)),React.createElement("div",{className:cn("absolute bottom-0 bg-neutral-1300 dark:bg-neutral-000 h-[3px] w-24",{"transition-[transform,width]":animated}),style:{transform:`translateX(${highlight.offset}px)`,width:`${highlight.width}px`}})),contents.map((content,index)=>React.createElement(Tabs.Content,{key:`tab-${index}`,value:`tab-${index}`,className:contentClassName},content)))};export default TabMenu;
+import React,{useEffect}from"react";import*as Tabs from"@radix-ui/react-tabs";import throttle from"lodash.throttle";import cn from"./utils/cn";const DEFAULT_TAILWIND_ANIMATION_DURATION=150;const TabMenu=({tabs=[],contents=[],tabOnClick,tabClassName,rootClassName,contentClassName,options})=>{const{defaultTabIndex=0,underline=true,animated:animatedOption=true,flexibleTabWidth=false,flexibleTabHeight=false}=options??{};const listRef=React.useRef(null);const[animated,setAnimated]=React.useState(false);const[highlight,setHighlight]=React.useState({offset:0,width:0});useEffect(()=>{if(animatedOption&&highlight.width>0){setTimeout(()=>{setAnimated(true)},DEFAULT_TAILWIND_ANIMATION_DURATION)}},[animatedOption,highlight.width]);useEffect(()=>{const handleResize=throttle(()=>{const activeTabElement=listRef.current?.querySelector(`[data-state="active"]`);if(activeTabElement){updateHighlightDimensions(activeTabElement)}},100);handleResize();window.addEventListener("resize",handleResize);return()=>{window.removeEventListener("resize",handleResize)}},[]);const updateHighlightDimensions=element=>{const{left:parentLeft}=listRef.current?.getBoundingClientRect()??{};const{left,width}=element.getBoundingClientRect()??{};setHighlight({offset:(left??0)-(parentLeft??0),width:width??0})};const handleTabClick=(event,index)=>{tabOnClick?.(index);updateHighlightDimensions(event.currentTarget)};return React.createElement(Tabs.Root,{defaultValue:`tab-${defaultTabIndex}`,className:cn({"h-full":flexibleTabHeight},rootClassName)},React.createElement(Tabs.List,{ref:listRef,className:cn("relative",{"flex border-b border-neutral-300 dark:border-neutral-1000":underline},{"h-full":flexibleTabHeight})},tabs.map((tab,index)=>React.createElement(Tabs.Trigger,{key:`tab-${index}`,className:cn("lg:px-24 md:px-20 px-16 py-16 ui-text-label1 font-bold data-[state=active]:text-neutral-1300 text-neutral-1000 dark:data-[state=active]:text-neutral-000 dark:text-neutral-300 focus:outline-none focus-visible:outline-gui-focus transition-colors hover:text-neutral-1300 dark:hover:text-neutral-000 active:text-neutral-900 dark:active:text-neutral-400 disabled:text-gui-unavailable dark:disabled:text-gui-unavailable-dark disabled:cursor-not-allowed",{"flex-1":flexibleTabWidth},{"h-full":flexibleTabHeight},tabClassName),value:`tab-${index}`,onClick:event=>handleTabClick(event,index),disabled:typeof tab==="object"?tab.disabled:false},typeof tab==="object"?tab.label:tab)),React.createElement("div",{className:cn("absolute bottom-0 bg-neutral-1300 dark:bg-neutral-000 h-[3px] w-24",{"transition-[transform,width]":animated}),style:{transform:`translateX(${highlight.offset}px)`,width:`${highlight.width}px`}})),contents.map((content,index)=>React.createElement(Tabs.Content,{key:`tab-${index}`,value:`tab-${index}`,className:contentClassName},content)))};export default TabMenu;
 //# sourceMappingURL=TabMenu.js.map

package/core/TabMenu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/core/TabMenu.tsx"],"sourcesContent":["import React, { ReactNode, useEffect } from \"react\";\nimport * as Tabs from \"@radix-ui/react-tabs\";\nimport throttle from \"lodash.throttle\";\nimport cn from \"./utils/cn\";\n\n/**\n * Props for the TabMenu component.\n */\nexport type TabMenuProps = {\n  /**\n   * An array of tabs, which can be either a string or an object with a label and an optional disabled state.\n   */\n  tabs: (string | { label: string; disabled?: boolean })[];\n\n  /**\n   * An optional array of React nodes representing the content for each tab.\n   */\n  contents?: ReactNode[];\n\n  /**\n   * An optional callback function that is called when a tab is clicked, receiving the index of the clicked tab.\n   */\n  tabOnClick?: (index: number) => void;\n\n  /**\n   * An optional class name to apply to each tab.\n   */\n  tabClassName?: string;\n\n  /**\n   * An optional class name to apply to the Tabs.Root element.\n   */\n  rootClassName?: string;\n\n  /**\n   * An optional class name to apply to the Tabs.Content element.\n   */\n  contentClassName?: string;\n\n  /**\n   * Optional configuration options for the TabMenu.\n   */\n  options?: {\n    /**\n     * The index of the tab that should be selected by default.\n     */\n    defaultTabIndex?: number;\n\n    /**\n     * Whether to show an underline below the selected tab.\n     */\n    underline?: boolean;\n\n    /**\n     * Whether to animate the transition between tabs.\n     */\n    animated?: boolean;\n\n    /**\n     * Whether the tab width should be flexible.\n     */\n    flexibleTabWidth?: boolean;\n\n    /**\n     * Whether the tab height should be flexible.\n     */\n    flexibleTabHeight?: boolean;\n  };\n};\n\nconst DEFAULT_TAILWIND_ANIMATION_DURATION = 150;\n\nconst TabMenu: React.FC<TabMenuProps> = ({\n  tabs = [],\n  contents = [],\n  tabOnClick,\n  tabClassName,\n  rootClassName,\n  contentClassName,\n  options,\n}) => {\n  const {\n    defaultTabIndex = 0,\n    underline = true,\n    animated: animatedOption = true,\n    flexibleTabWidth = false,\n    flexibleTabHeight = false,\n  } = options ?? {};\n\n  const listRef = React.useRef<HTMLDivElement>(null);\n  const [animated, setAnimated] = React.useState(false);\n  const [highlight, setHighlight] = React.useState({ offset: 0, width: 0 });\n\n  useEffect(() => {\n    if (animatedOption && highlight.width > 0) {\n      setTimeout(() => {\n        setAnimated(true);\n      }, DEFAULT_TAILWIND_ANIMATION_DURATION);\n    }\n  }, [animatedOption, highlight.width]);\n\n  useEffect(() => {\n    const handleResize = throttle(() => {\n      const activeTabElement =\n        listRef.current?.querySelector<HTMLButtonElement>(\n          `[data-state=\"active\"]`,\n        );\n\n      if (activeTabElement) {\n        updateHighlightDimensions(activeTabElement);\n      }\n    }, 100);\n\n    handleResize();\n\n    window.addEventListener(\"resize\", handleResize);\n\n    return () => {\n      window.removeEventListener(\"resize\", handleResize);\n    };\n  }, []);\n\n  const updateHighlightDimensions = (element: HTMLButtonElement) => {\n    const { left: parentLeft } = listRef.current?.getBoundingClientRect() ?? {};\n    const { left, width } = element.getBoundingClientRect() ?? {};\n\n    setHighlight({\n      offset: (left ?? 0) - (parentLeft ?? 0),\n      width: width ?? 0,\n    });\n  };\n\n  const handleTabClick = (\n    event: React.MouseEvent<HTMLButtonElement>,\n    index: number,\n  ) => {\n    tabOnClick?.(index);\n    updateHighlightDimensions(event.currentTarget as HTMLButtonElement);\n  };\n\n  return (\n    <Tabs.Root\n      defaultValue={`tab-${defaultTabIndex}`}\n      className={cn({ \"h-full\": flexibleTabHeight }, rootClassName)}\n    >\n      <Tabs.List\n        ref={listRef}\n        className={cn(\n          \"relative\",\n          {\n            \"flex border-b border-neutral-300 dark:border-neutral-1000\":\n              underline,\n          },\n          { \"h-full\": flexibleTabHeight },\n        )}\n      >\n        {tabs.map((tab, index) => (\n          <Tabs.Trigger\n            key={`tab-${index}`}\n            className={cn(\n              \"lg:px-24 md:px-20 px-16 py-16 ui-text-menu1 font-bold data-[state=active]:text-neutral-1300 text-neutral-1000 dark:data-[state=active]:text-neutral-000 dark:text-neutral-300 focus:outline-none focus-visible:outline-gui-focus transition-colors hover:text-neutral-1300 dark:hover:text-neutral-000 active:text-neutral-900 dark:active:text-neutral-400 disabled:text-gui-unavailable dark:disabled:text-gui-unavailable-dark disabled:cursor-not-allowed\",\n              { \"flex-1\": flexibleTabWidth },\n              { \"h-full\": flexibleTabHeight },\n              tabClassName,\n            )}\n            value={`tab-${index}`}\n            onClick={(event) => handleTabClick(event, index)}\n            disabled={typeof tab === \"object\" ? tab.disabled : false}\n          >\n            {typeof tab === \"object\" ? tab.label : tab}\n          </Tabs.Trigger>\n        ))}\n        <div\n          className={cn(\n            \"absolute bottom-0 bg-neutral-1300 dark:bg-neutral-000 h-[3px] w-24\",\n            { \"transition-[transform,width]\": animated },\n          )}\n          style={{\n            transform: `translateX(${highlight.offset}px)`,\n            width: `${highlight.width}px`,\n          }}\n        ></div>\n      </Tabs.List>\n      {contents.map((content, index) => (\n        <Tabs.Content\n          key={`tab-${index}`}\n          value={`tab-${index}`}\n          className={contentClassName}\n        >\n          {content}\n        </Tabs.Content>\n      ))}\n    </Tabs.Root>\n  );\n};\n\nexport default TabMenu;\n"],"names":["React","useEffect","Tabs","throttle","cn","DEFAULT_TAILWIND_ANIMATION_DURATION","TabMenu","tabs","contents","tabOnClick","tabClassName","rootClassName","contentClassName","options","defaultTabIndex","underline","animated","animatedOption","flexibleTabWidth","flexibleTabHeight","listRef","useRef","setAnimated","useState","highlight","setHighlight","offset","width","setTimeout","handleResize","activeTabElement","current","querySelector","updateHighlightDimensions","window","addEventListener","removeEventListener","element","left","parentLeft","getBoundingClientRect","handleTabClick","event","index","currentTarget","Root","defaultValue","className","List","ref","map","tab","Trigger","key","value","onClick","disabled","label","div","style","transform","content","Content"],"mappings":"AAAA,OAAOA,OAAoBC,SAAS,KAAQ,OAAQ,AACpD,WAAYC,SAAU,sBAAuB,AAC7C,QAAOC,aAAc,iBAAkB,AACvC,QAAOC,OAAQ,YAAa,CAmE5B,MAAMC,oCAAsC,IAE5C,MAAMC,QAAkC,CAAC,CACvCC,KAAO,EAAE,CACTC,SAAW,EAAE,CACbC,UAAU,CACVC,YAAY,CACZC,aAAa,CACbC,gBAAgB,CAChBC,OAAO,CACR,IACC,KAAM,CACJC,gBAAkB,CAAC,CACnBC,UAAY,IAAI,CAChBC,SAAUC,eAAiB,IAAI,CAC/BC,iBAAmB,KAAK,CACxBC,kBAAoB,KAAK,CAC1B,CAAGN,SAAW,CAAC,EAEhB,MAAMO,QAAUpB,MAAMqB,MAAM,CAAiB,MAC7C,KAAM,CAACL,SAAUM,YAAY,CAAGtB,MAAMuB,QAAQ,CAAC,OAC/C,KAAM,CAACC,UAAWC,aAAa,CAAGzB,MAAMuB,QAAQ,CAAC,CAAEG,OAAQ,EAAGC,MAAO,CAAE,GAEvE1B,UAAU,KACR,GAAIgB,gBAAkBO,UAAUG,KAAK,CAAG,EAAG,CACzCC,WAAW,KACTN,YAAY,KACd,EAAGjB,oCACL,CACF,EAAG,CAACY,eAAgBO,UAAUG,KAAK,CAAC,EAEpC1B,UAAU,KACR,MAAM4B,aAAe1B,SAAS,KAC5B,MAAM2B,iBACJV,QAAQW,OAAO,EAAEC,cACf,CAAC,qBAAqB,CAAC,EAG3B,GAAIF,iBAAkB,CACpBG,0BAA0BH,iBAC5B,CACF,EAAG,KAEHD,eAEAK,OAAOC,gBAAgB,CAAC,SAAUN,cAElC,MAAO,KACLK,OAAOE,mBAAmB,CAAC,SAAUP,aACvC,CACF,EAAG,EAAE,EAEL,MAAMI,0BAA4B,AAACI,UACjC,KAAM,CAAEC,KAAMC,UAAU,CAAE,CAAGnB,QAAQW,OAAO,EAAES,yBAA2B,CAAC,EAC1E,KAAM,CAAEF,IAAI,CAAEX,KAAK,CAAE,CAAGU,QAAQG,qBAAqB,IAAM,CAAC,EAE5Df,aAAa,CACXC,OAAQ,AAACY,CAAAA,MAAQ,CAAA,EAAMC,CAAAA,YAAc,CAAA,EACrCZ,MAAOA,OAAS,CAClB,EACF,EAEA,MAAMc,eAAiB,CACrBC,MACAC,SAEAlC,aAAakC,OACbV,0BAA0BS,MAAME,aAAa,CAC/C,EAEA,OACE,oBAAC1C,KAAK2C,IAAI,EACRC,aAAc,CAAC,IAAI,EAAEhC,gBAAgB,CAAC,CACtCiC,UAAW3C,GAAG,CAAE,SAAUe,iBAAkB,EAAGR,gBAE/C,oBAACT,KAAK8C,IAAI,EACRC,IAAK7B,QACL2B,UAAW3C,GACT,WACA,CACE,4DACEW,SACJ,EACA,CAAE,SAAUI,iBAAkB,IAG/BZ,KAAK2C,GAAG,CAAC,CAACC,IAAKR,QACd,oBAACzC,KAAKkD,OAAO,EACXC,IAAK,CAAC,IAAI,EAAEV,MAAM,CAAC,CACnBI,UAAW3C,GACT,gcACA,CAAE,SAAUc,gBAAiB,EAC7B,CAAE,SAAUC,iBAAkB,EAC9BT,cAEF4C,MAAO,CAAC,IAAI,EAAEX,MAAM,CAAC,CACrBY,QAAS,AAACb,OAAUD,eAAeC,MAAOC,OAC1Ca,SAAU,OAAOL,MAAQ,SAAWA,IAAIK,QAAQ,CAAG,OAElD,OAAOL,MAAQ,SAAWA,IAAIM,KAAK,CAAGN,MAG3C,oBAACO,OACCX,UAAW3C,GACT,qEACA,CAAE,+BAAgCY,QAAS,GAE7C2C,MAAO,CACLC,UAAW,CAAC,WAAW,EAAEpC,UAAUE,MAAM,CAAC,GAAG,CAAC,CAC9CC,MAAO,CAAC,EAAEH,UAAUG,KAAK,CAAC,EAAE,CAAC,AAC/B,KAGHnB,SAAS0C,GAAG,CAAC,CAACW,QAASlB,QACtB,oBAACzC,KAAK4D,OAAO,EACXT,IAAK,CAAC,IAAI,EAAEV,MAAM,CAAC,CACnBW,MAAO,CAAC,IAAI,EAAEX,MAAM,CAAC,CACrBI,UAAWnC,kBAEViD,UAKX,CAEA,gBAAevD,OAAQ"}
+{"version":3,"sources":["../../src/core/TabMenu.tsx"],"sourcesContent":["import React, { ReactNode, useEffect } from \"react\";\nimport * as Tabs from \"@radix-ui/react-tabs\";\nimport throttle from \"lodash.throttle\";\nimport cn from \"./utils/cn\";\n\n/**\n * Props for the TabMenu component.\n */\nexport type TabMenuProps = {\n  /**\n   * An array of tabs, which can be either a string or an object with a label and an optional disabled state.\n   */\n  tabs: (string | { label: string; disabled?: boolean })[];\n\n  /**\n   * An optional array of React nodes representing the content for each tab.\n   */\n  contents?: ReactNode[];\n\n  /**\n   * An optional callback function that is called when a tab is clicked, receiving the index of the clicked tab.\n   */\n  tabOnClick?: (index: number) => void;\n\n  /**\n   * An optional class name to apply to each tab.\n   */\n  tabClassName?: string;\n\n  /**\n   * An optional class name to apply to the Tabs.Root element.\n   */\n  rootClassName?: string;\n\n  /**\n   * An optional class name to apply to the Tabs.Content element.\n   */\n  contentClassName?: string;\n\n  /**\n   * Optional configuration options for the TabMenu.\n   */\n  options?: {\n    /**\n     * The index of the tab that should be selected by default.\n     */\n    defaultTabIndex?: number;\n\n    /**\n     * Whether to show an underline below the selected tab.\n     */\n    underline?: boolean;\n\n    /**\n     * Whether to animate the transition between tabs.\n     */\n    animated?: boolean;\n\n    /**\n     * Whether the tab width should be flexible.\n     */\n    flexibleTabWidth?: boolean;\n\n    /**\n     * Whether the tab height should be flexible.\n     */\n    flexibleTabHeight?: boolean;\n  };\n};\n\nconst DEFAULT_TAILWIND_ANIMATION_DURATION = 150;\n\nconst TabMenu: React.FC<TabMenuProps> = ({\n  tabs = [],\n  contents = [],\n  tabOnClick,\n  tabClassName,\n  rootClassName,\n  contentClassName,\n  options,\n}) => {\n  const {\n    defaultTabIndex = 0,\n    underline = true,\n    animated: animatedOption = true,\n    flexibleTabWidth = false,\n    flexibleTabHeight = false,\n  } = options ?? {};\n\n  const listRef = React.useRef<HTMLDivElement>(null);\n  const [animated, setAnimated] = React.useState(false);\n  const [highlight, setHighlight] = React.useState({ offset: 0, width: 0 });\n\n  useEffect(() => {\n    if (animatedOption && highlight.width > 0) {\n      setTimeout(() => {\n        setAnimated(true);\n      }, DEFAULT_TAILWIND_ANIMATION_DURATION);\n    }\n  }, [animatedOption, highlight.width]);\n\n  useEffect(() => {\n    const handleResize = throttle(() => {\n      const activeTabElement =\n        listRef.current?.querySelector<HTMLButtonElement>(\n          `[data-state=\"active\"]`,\n        );\n\n      if (activeTabElement) {\n        updateHighlightDimensions(activeTabElement);\n      }\n    }, 100);\n\n    handleResize();\n\n    window.addEventListener(\"resize\", handleResize);\n\n    return () => {\n      window.removeEventListener(\"resize\", handleResize);\n    };\n  }, []);\n\n  const updateHighlightDimensions = (element: HTMLButtonElement) => {\n    const { left: parentLeft } = listRef.current?.getBoundingClientRect() ?? {};\n    const { left, width } = element.getBoundingClientRect() ?? {};\n\n    setHighlight({\n      offset: (left ?? 0) - (parentLeft ?? 0),\n      width: width ?? 0,\n    });\n  };\n\n  const handleTabClick = (\n    event: React.MouseEvent<HTMLButtonElement>,\n    index: number,\n  ) => {\n    tabOnClick?.(index);\n    updateHighlightDimensions(event.currentTarget as HTMLButtonElement);\n  };\n\n  return (\n    <Tabs.Root\n      defaultValue={`tab-${defaultTabIndex}`}\n      className={cn({ \"h-full\": flexibleTabHeight }, rootClassName)}\n    >\n      <Tabs.List\n        ref={listRef}\n        className={cn(\n          \"relative\",\n          {\n            \"flex border-b border-neutral-300 dark:border-neutral-1000\":\n              underline,\n          },\n          { \"h-full\": flexibleTabHeight },\n        )}\n      >\n        {tabs.map((tab, index) => (\n          <Tabs.Trigger\n            key={`tab-${index}`}\n            className={cn(\n              \"lg:px-24 md:px-20 px-16 py-16 ui-text-label1 font-bold data-[state=active]:text-neutral-1300 text-neutral-1000 dark:data-[state=active]:text-neutral-000 dark:text-neutral-300 focus:outline-none focus-visible:outline-gui-focus transition-colors hover:text-neutral-1300 dark:hover:text-neutral-000 active:text-neutral-900 dark:active:text-neutral-400 disabled:text-gui-unavailable dark:disabled:text-gui-unavailable-dark disabled:cursor-not-allowed\",\n              { \"flex-1\": flexibleTabWidth },\n              { \"h-full\": flexibleTabHeight },\n              tabClassName,\n            )}\n            value={`tab-${index}`}\n            onClick={(event) => handleTabClick(event, index)}\n            disabled={typeof tab === \"object\" ? tab.disabled : false}\n          >\n            {typeof tab === \"object\" ? tab.label : tab}\n          </Tabs.Trigger>\n        ))}\n        <div\n          className={cn(\n            \"absolute bottom-0 bg-neutral-1300 dark:bg-neutral-000 h-[3px] w-24\",\n            { \"transition-[transform,width]\": animated },\n          )}\n          style={{\n            transform: `translateX(${highlight.offset}px)`,\n            width: `${highlight.width}px`,\n          }}\n        ></div>\n      </Tabs.List>\n      {contents.map((content, index) => (\n        <Tabs.Content\n          key={`tab-${index}`}\n          value={`tab-${index}`}\n          className={contentClassName}\n        >\n          {content}\n        </Tabs.Content>\n      ))}\n    </Tabs.Root>\n  );\n};\n\nexport default TabMenu;\n"],"names":["React","useEffect","Tabs","throttle","cn","DEFAULT_TAILWIND_ANIMATION_DURATION","TabMenu","tabs","contents","tabOnClick","tabClassName","rootClassName","contentClassName","options","defaultTabIndex","underline","animated","animatedOption","flexibleTabWidth","flexibleTabHeight","listRef","useRef","setAnimated","useState","highlight","setHighlight","offset","width","setTimeout","handleResize","activeTabElement","current","querySelector","updateHighlightDimensions","window","addEventListener","removeEventListener","element","left","parentLeft","getBoundingClientRect","handleTabClick","event","index","currentTarget","Root","defaultValue","className","List","ref","map","tab","Trigger","key","value","onClick","disabled","label","div","style","transform","content","Content"],"mappings":"AAAA,OAAOA,OAAoBC,SAAS,KAAQ,OAAQ,AACpD,WAAYC,SAAU,sBAAuB,AAC7C,QAAOC,aAAc,iBAAkB,AACvC,QAAOC,OAAQ,YAAa,CAmE5B,MAAMC,oCAAsC,IAE5C,MAAMC,QAAkC,CAAC,CACvCC,KAAO,EAAE,CACTC,SAAW,EAAE,CACbC,UAAU,CACVC,YAAY,CACZC,aAAa,CACbC,gBAAgB,CAChBC,OAAO,CACR,IACC,KAAM,CACJC,gBAAkB,CAAC,CACnBC,UAAY,IAAI,CAChBC,SAAUC,eAAiB,IAAI,CAC/BC,iBAAmB,KAAK,CACxBC,kBAAoB,KAAK,CAC1B,CAAGN,SAAW,CAAC,EAEhB,MAAMO,QAAUpB,MAAMqB,MAAM,CAAiB,MAC7C,KAAM,CAACL,SAAUM,YAAY,CAAGtB,MAAMuB,QAAQ,CAAC,OAC/C,KAAM,CAACC,UAAWC,aAAa,CAAGzB,MAAMuB,QAAQ,CAAC,CAAEG,OAAQ,EAAGC,MAAO,CAAE,GAEvE1B,UAAU,KACR,GAAIgB,gBAAkBO,UAAUG,KAAK,CAAG,EAAG,CACzCC,WAAW,KACTN,YAAY,KACd,EAAGjB,oCACL,CACF,EAAG,CAACY,eAAgBO,UAAUG,KAAK,CAAC,EAEpC1B,UAAU,KACR,MAAM4B,aAAe1B,SAAS,KAC5B,MAAM2B,iBACJV,QAAQW,OAAO,EAAEC,cACf,CAAC,qBAAqB,CAAC,EAG3B,GAAIF,iBAAkB,CACpBG,0BAA0BH,iBAC5B,CACF,EAAG,KAEHD,eAEAK,OAAOC,gBAAgB,CAAC,SAAUN,cAElC,MAAO,KACLK,OAAOE,mBAAmB,CAAC,SAAUP,aACvC,CACF,EAAG,EAAE,EAEL,MAAMI,0BAA4B,AAACI,UACjC,KAAM,CAAEC,KAAMC,UAAU,CAAE,CAAGnB,QAAQW,OAAO,EAAES,yBAA2B,CAAC,EAC1E,KAAM,CAAEF,IAAI,CAAEX,KAAK,CAAE,CAAGU,QAAQG,qBAAqB,IAAM,CAAC,EAE5Df,aAAa,CACXC,OAAQ,AAACY,CAAAA,MAAQ,CAAA,EAAMC,CAAAA,YAAc,CAAA,EACrCZ,MAAOA,OAAS,CAClB,EACF,EAEA,MAAMc,eAAiB,CACrBC,MACAC,SAEAlC,aAAakC,OACbV,0BAA0BS,MAAME,aAAa,CAC/C,EAEA,OACE,oBAAC1C,KAAK2C,IAAI,EACRC,aAAc,CAAC,IAAI,EAAEhC,gBAAgB,CAAC,CACtCiC,UAAW3C,GAAG,CAAE,SAAUe,iBAAkB,EAAGR,gBAE/C,oBAACT,KAAK8C,IAAI,EACRC,IAAK7B,QACL2B,UAAW3C,GACT,WACA,CACE,4DACEW,SACJ,EACA,CAAE,SAAUI,iBAAkB,IAG/BZ,KAAK2C,GAAG,CAAC,CAACC,IAAKR,QACd,oBAACzC,KAAKkD,OAAO,EACXC,IAAK,CAAC,IAAI,EAAEV,MAAM,CAAC,CACnBI,UAAW3C,GACT,icACA,CAAE,SAAUc,gBAAiB,EAC7B,CAAE,SAAUC,iBAAkB,EAC9BT,cAEF4C,MAAO,CAAC,IAAI,EAAEX,MAAM,CAAC,CACrBY,QAAS,AAACb,OAAUD,eAAeC,MAAOC,OAC1Ca,SAAU,OAAOL,MAAQ,SAAWA,IAAIK,QAAQ,CAAG,OAElD,OAAOL,MAAQ,SAAWA,IAAIM,KAAK,CAAGN,MAG3C,oBAACO,OACCX,UAAW3C,GACT,qEACA,CAAE,+BAAgCY,QAAS,GAE7C2C,MAAO,CACLC,UAAW,CAAC,WAAW,EAAEpC,UAAUE,MAAM,CAAC,GAAG,CAAC,CAC9CC,MAAO,CAAC,EAAEH,UAAUG,KAAK,CAAC,EAAE,CAAC,AAC/B,KAGHnB,SAAS0C,GAAG,CAAC,CAACW,QAASlB,QACtB,oBAACzC,KAAK4D,OAAO,EACXT,IAAK,CAAC,IAAI,EAAEV,MAAM,CAAC,CACnBW,MAAO,CAAC,IAAI,EAAEX,MAAM,CAAC,CACrBI,UAAWnC,kBAEViD,UAKX,CAEA,gBAAevD,OAAQ"}

package/core/remote-blogs-posts.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/core/remote-blogs-posts.js"],"sourcesContent":["/* global __ENABLE_FETCH_WITH_CREDENTIALS__ */\n\nimport { isJsonResponse } from \"./remote-data-util\";\n\nconst fetchBlogPosts = async (store, blogUrl) => {\n  try {\n    if (!blogUrl) {\n      console.log(\n        `Skipping fetching blog posts, invalid blogUrl: \"${blogUrl}\"`,\n      );\n      return;\n    }\n\n    const options = {\n      headers: {\n        accept: \"application/json\",\n      },\n      cache: \"no-cache\",\n    };\n\n    if (__ENABLE_FETCH_WITH_CREDENTIALS__) {\n      options.credentials = \"include\";\n    }\n\n    const res = await fetch(blogUrl, options);\n\n    if (isJsonResponse(res.headers.get(\"content-type\"))) {\n      const payload = await res.json();\n      store.dispatch({ type: \"blog/loaded\", payload });\n    } else {\n      throw new Error(\"Blog posts url is not serving json\");\n    }\n  } catch (e) {\n    console.warn(\"Could not fetch blog posts due to error:\", e);\n  }\n};\n\nconst initialState = { recent: null };\n\nconst REDUCER_KEY = \"blogPosts\";\n\nconst reducerBlogPosts = {\n  [REDUCER_KEY]: (state = initialState, action) => {\n    switch (action.type) {\n      case \"blog/loaded\":\n        return { ...state, recent: action.payload };\n      default:\n        return state;\n    }\n  },\n};\n\nconst selectRecentBlogPosts = (store) => store.getState()[REDUCER_KEY]?.recent;\n\nexport { fetchBlogPosts, reducerBlogPosts, selectRecentBlogPosts };\n"],"names":["isJsonResponse","fetchBlogPosts","store","blogUrl","console","log","options","headers","accept","cache","credentials","res","fetch","get","payload","json","dispatch","type","Error","e","warn","initialState","recent","REDUCER_KEY","reducerBlogPosts","state","action","selectRecentBlogPosts","getState"],"mappings":"AAEA,OAASA,cAAc,KAAQ,oBAAqB,CAEpD,MAAMC,eAAiB,MAAOC,MAAOC,WACnC,GAAI,CACF,GAAI,CAACA,QAAS,CACZC,QAAQC,GAAG,CACT,CAAC,gDAAgD,EAAEF,QAAQ,CAAC,CAAC,EAE/D,MACF,CAEA,MAAMG,QAAU,CACdC,QAAS,CACPC,OAAQ,kBACV,EACAC,MAAO,UACT,EAEA,GApBJ,MAoB2C,CACrCH,QAAQI,WAAW,CAAG,SACxB,CAEA,MAAMC,IAAM,MAAMC,MAAMT,QAASG,SAEjC,GAAIN,eAAeW,IAAIJ,OAAO,CAACM,GAAG,CAAC,iBAAkB,CACnD,MAAMC,QAAU,MAAMH,IAAII,IAAI,GAC9Bb,MAAMc,QAAQ,CAAC,CAAEC,KAAM,cAAeH,OAAQ,EAChD,KAAO,CACL,MAAM,IAAII,MAAM,qCAClB,CACF,CAAE,MAAOC,EAAG,CACVf,QAAQgB,IAAI,CAAC,2CAA4CD,EAC3D,CACF,EAEA,MAAME,aAAe,CAAEC,OAAQ,IAAK,EAEpC,MAAMC,YAAc,YAEpB,MAAMC,iBAAmB,CACvB,CAACD,YAAY,CAAE,CAACE,MAAQJ,YAAY,CAAEK,UACpC,OAAQA,OAAOT,IAAI,EACjB,IAAK,cACH,MAAO,CAAE,GAAGQ,KAAK,CAAEH,OAAQI,OAAOZ,OAAO,AAAC,CAC5C,SACE,OAAOW,KACX,CACF,CACF,EAEA,MAAME,sBAAwB,AAACzB,OAAUA,MAAM0B,QAAQ,EAAE,CAACL,YAAY,EAAED,MAExE,QAASrB,cAAc,CAAEuB,gBAAgB,CAAEG,qBAAqB,CAAG"}
+{"version":3,"sources":["../../src/core/remote-blogs-posts.js"],"sourcesContent":["/* global __ENABLE_FETCH_WITH_CREDENTIALS__ */\n\nimport { isJsonResponse } from \"./remote-data-util\";\n\nconst fetchBlogPosts = async (store, blogUrl) => {\n  try {\n    if (!blogUrl) {\n      console.log(\n        `Skipping fetching blog posts, invalid blogUrl: \"${blogUrl}\"`,\n      );\n      return;\n    }\n\n    const options = {\n      headers: {\n        accept: \"application/json\",\n      },\n      cache: \"no-cache\",\n    };\n\n    if (__ENABLE_FETCH_WITH_CREDENTIALS__) {\n      options.credentials = \"include\";\n    }\n\n    const res = await fetch(blogUrl, options);\n\n    if (isJsonResponse(res.headers.get(\"content-type\"))) {\n      const payload = await res.json();\n      store.dispatch({ type: \"blog/loaded\", payload });\n    } else {\n      throw new Error(\"Blog posts url is not serving json\");\n    }\n  } catch (e) {\n    console.warn(\"Could not fetch blog posts due to error:\", e);\n  }\n};\n\nconst initialState = { recent: null };\n\nconst REDUCER_KEY = \"blogPosts\";\n\nconst reducerBlogPosts = {\n  [REDUCER_KEY]: (state = initialState, action) => {\n    switch (action.type) {\n      case \"blog/loaded\":\n        return { ...state, recent: action.payload };\n      default:\n        return state;\n    }\n  },\n};\n\nconst selectRecentBlogPosts = (store) => store.getState()[REDUCER_KEY]?.recent;\n\nexport { fetchBlogPosts, reducerBlogPosts, selectRecentBlogPosts };\n"],"names":["isJsonResponse","fetchBlogPosts","store","blogUrl","console","log","options","headers","accept","cache","credentials","res","fetch","get","payload","json","dispatch","type","Error","e","warn","initialState","recent","REDUCER_KEY","reducerBlogPosts","state","action","selectRecentBlogPosts","getState"],"mappings":"AAEA,OAASA,cAAc,KAAQ,oBAAqB,CAEpD,MAAMC,eAAiB,MAAOC,MAAOC,WACnC,GAAI,CACF,GAAI,CAACA,QAAS,CACZC,QAAQC,GAAG,CACT,CAAC,gDAAgD,EAAEF,QAAQ,CAAC,CAAC,EAE/D,MACF,CAEA,MAAMG,QAAU,CACdC,QAAS,CACPC,OAAQ,kBACV,EACAC,MAAO,UACT,EAEA,SAAuC,CACrCH,QAAQI,WAAW,CAAG,SACxB,CAEA,MAAMC,IAAM,MAAMC,MAAMT,QAASG,SAEjC,GAAIN,eAAeW,IAAIJ,OAAO,CAACM,GAAG,CAAC,iBAAkB,CACnD,MAAMC,QAAU,MAAMH,IAAII,IAAI,GAC9Bb,MAAMc,QAAQ,CAAC,CAAEC,KAAM,cAAeH,OAAQ,EAChD,KAAO,CACL,MAAM,IAAII,MAAM,qCAClB,CACF,CAAE,MAAOC,EAAG,CACVf,QAAQgB,IAAI,CAAC,2CAA4CD,EAC3D,CACF,EAEA,MAAME,aAAe,CAAEC,OAAQ,IAAK,EAEpC,MAAMC,YAAc,YAEpB,MAAMC,iBAAmB,CACvB,CAACD,YAAY,CAAE,CAACE,MAAQJ,YAAY,CAAEK,UACpC,OAAQA,OAAOT,IAAI,EACjB,IAAK,cACH,MAAO,CAAE,GAAGQ,KAAK,CAAEH,OAAQI,OAAOZ,OAAO,AAAC,CAC5C,SACE,OAAOW,KACX,CACF,CACF,EAEA,MAAME,sBAAwB,AAACzB,OAAUA,MAAM0B,QAAQ,EAAE,CAACL,YAAY,EAAED,MAExE,QAASrB,cAAc,CAAEuB,gBAAgB,CAAEG,qBAAqB,CAAG"}

package/core/remote-session-data.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/core/remote-session-data.js"],"sourcesContent":["/* global __ENABLE_FETCH_WITH_CREDENTIALS__ */\n\n// Fetches current users session data\n// Assumes an authenticated session, so will only work when used on ably.com/ably.io\n\nimport { isJsonResponse } from \"./remote-data-util\";\n\nconst NOT_FOUND_ERROR_CODE = \"not-found\";\n\nconst fetchSessionData = async (store, sessionUrl) => {\n  const sessionLoaded = (payload = {}) =>\n    store.dispatch({ type: \"session/loaded\", payload });\n\n  try {\n    if (!sessionUrl) {\n      console.log(\n        `Skipping fetching session, invalid sessionUrl: \"${sessionUrl}\"`,\n      );\n      sessionLoaded();\n      return;\n    }\n\n    const options = {\n      headers: {\n        accept: \"application/json\",\n      },\n      cache: \"no-cache\",\n    };\n\n    if (__ENABLE_FETCH_WITH_CREDENTIALS__) {\n      options.credentials = \"include\";\n    }\n\n    const res = await fetch(sessionUrl, options);\n    const jsonResponse = isJsonResponse(res.headers.get(\"content-type\"));\n\n    if (!jsonResponse) {\n      throw new Error(\"Session endpoint is not serving json\");\n    }\n\n    const payload = await res.json();\n\n    if (payload.error === NOT_FOUND_ERROR_CODE) {\n      sessionLoaded();\n    } else {\n      sessionLoaded(payload);\n    }\n  } catch (e) {\n    sessionLoaded();\n    console.warn(\"Could not fetch session data due to error:\", e);\n  }\n};\n\nconst initialState = { data: null };\n\nconst REDUCER_KEY = \"session\";\n\nconst reducerSessionData = {\n  [REDUCER_KEY]: (state = initialState, action) => {\n    switch (action.type) {\n      case \"session/loaded\":\n        return { ...state, data: action.payload };\n      default:\n        return state;\n    }\n  },\n};\n\nconst selectSessionData = (store) => store.getState()[REDUCER_KEY]?.data;\n\nexport { fetchSessionData, reducerSessionData, selectSessionData };\n"],"names":["isJsonResponse","NOT_FOUND_ERROR_CODE","fetchSessionData","store","sessionUrl","sessionLoaded","payload","dispatch","type","console","log","options","headers","accept","cache","credentials","res","fetch","jsonResponse","get","Error","json","error","e","warn","initialState","data","REDUCER_KEY","reducerSessionData","state","action","selectSessionData","getState"],"mappings":"AAKA,OAASA,cAAc,KAAQ,oBAAqB,CAEpD,MAAMC,qBAAuB,YAE7B,MAAMC,iBAAmB,MAAOC,MAAOC,cACrC,MAAMC,cAAgB,CAACC,QAAU,CAAC,CAAC,GACjCH,MAAMI,QAAQ,CAAC,CAAEC,KAAM,iBAAkBF,OAAQ,GAEnD,GAAI,CACF,GAAI,CAACF,WAAY,CACfK,QAAQC,GAAG,CACT,CAAC,gDAAgD,EAAEN,WAAW,CAAC,CAAC,EAElEC,gBACA,MACF,CAEA,MAAMM,QAAU,CACdC,QAAS,CACPC,OAAQ,kBACV,EACAC,MAAO,UACT,EAEA,GA7BJ,MA6B2C,CACrCH,QAAQI,WAAW,CAAG,SACxB,CAEA,MAAMC,IAAM,MAAMC,MAAMb,WAAYO,SACpC,MAAMO,aAAelB,eAAegB,IAAIJ,OAAO,CAACO,GAAG,CAAC,iBAEpD,GAAI,CAACD,aAAc,CACjB,MAAM,IAAIE,MAAM,uCAClB,CAEA,MAAMd,QAAU,MAAMU,IAAIK,IAAI,GAE9B,GAAIf,QAAQgB,KAAK,GAAKrB,qBAAsB,CAC1CI,eACF,KAAO,CACLA,cAAcC,QAChB,CACF,CAAE,MAAOiB,EAAG,CACVlB,gBACAI,QAAQe,IAAI,CAAC,6CAA8CD,EAC7D,CACF,EAEA,MAAME,aAAe,CAAEC,KAAM,IAAK,EAElC,MAAMC,YAAc,UAEpB,MAAMC,mBAAqB,CACzB,CAACD,YAAY,CAAE,CAACE,MAAQJ,YAAY,CAAEK,UACpC,OAAQA,OAAOtB,IAAI,EACjB,IAAK,iBACH,MAAO,CAAE,GAAGqB,KAAK,CAAEH,KAAMI,OAAOxB,OAAO,AAAC,CAC1C,SACE,OAAOuB,KACX,CACF,CACF,EAEA,MAAME,kBAAoB,AAAC5B,OAAUA,MAAM6B,QAAQ,EAAE,CAACL,YAAY,EAAED,IAEpE,QAASxB,gBAAgB,CAAE0B,kBAAkB,CAAEG,iBAAiB,CAAG"}
+{"version":3,"sources":["../../src/core/remote-session-data.js"],"sourcesContent":["/* global __ENABLE_FETCH_WITH_CREDENTIALS__ */\n\n// Fetches current users session data\n// Assumes an authenticated session, so will only work when used on ably.com/ably.io\n\nimport { isJsonResponse } from \"./remote-data-util\";\n\nconst NOT_FOUND_ERROR_CODE = \"not-found\";\n\nconst fetchSessionData = async (store, sessionUrl) => {\n  const sessionLoaded = (payload = {}) =>\n    store.dispatch({ type: \"session/loaded\", payload });\n\n  try {\n    if (!sessionUrl) {\n      console.log(\n        `Skipping fetching session, invalid sessionUrl: \"${sessionUrl}\"`,\n      );\n      sessionLoaded();\n      return;\n    }\n\n    const options = {\n      headers: {\n        accept: \"application/json\",\n      },\n      cache: \"no-cache\",\n    };\n\n    if (__ENABLE_FETCH_WITH_CREDENTIALS__) {\n      options.credentials = \"include\";\n    }\n\n    const res = await fetch(sessionUrl, options);\n    const jsonResponse = isJsonResponse(res.headers.get(\"content-type\"));\n\n    if (!jsonResponse) {\n      throw new Error(\"Session endpoint is not serving json\");\n    }\n\n    const payload = await res.json();\n\n    if (payload.error === NOT_FOUND_ERROR_CODE) {\n      sessionLoaded();\n    } else {\n      sessionLoaded(payload);\n    }\n  } catch (e) {\n    sessionLoaded();\n    console.warn(\"Could not fetch session data due to error:\", e);\n  }\n};\n\nconst initialState = { data: null };\n\nconst REDUCER_KEY = \"session\";\n\nconst reducerSessionData = {\n  [REDUCER_KEY]: (state = initialState, action) => {\n    switch (action.type) {\n      case \"session/loaded\":\n        return { ...state, data: action.payload };\n      default:\n        return state;\n    }\n  },\n};\n\nconst selectSessionData = (store) => store.getState()[REDUCER_KEY]?.data;\n\nexport { fetchSessionData, reducerSessionData, selectSessionData };\n"],"names":["isJsonResponse","NOT_FOUND_ERROR_CODE","fetchSessionData","store","sessionUrl","sessionLoaded","payload","dispatch","type","console","log","options","headers","accept","cache","credentials","res","fetch","jsonResponse","get","Error","json","error","e","warn","initialState","data","REDUCER_KEY","reducerSessionData","state","action","selectSessionData","getState"],"mappings":"AAKA,OAASA,cAAc,KAAQ,oBAAqB,CAEpD,MAAMC,qBAAuB,YAE7B,MAAMC,iBAAmB,MAAOC,MAAOC,cACrC,MAAMC,cAAgB,CAACC,QAAU,CAAC,CAAC,GACjCH,MAAMI,QAAQ,CAAC,CAAEC,KAAM,iBAAkBF,OAAQ,GAEnD,GAAI,CACF,GAAI,CAACF,WAAY,CACfK,QAAQC,GAAG,CACT,CAAC,gDAAgD,EAAEN,WAAW,CAAC,CAAC,EAElEC,gBACA,MACF,CAEA,MAAMM,QAAU,CACdC,QAAS,CACPC,OAAQ,kBACV,EACAC,MAAO,UACT,EAEA,SAAuC,CACrCH,QAAQI,WAAW,CAAG,SACxB,CAEA,MAAMC,IAAM,MAAMC,MAAMb,WAAYO,SACpC,MAAMO,aAAelB,eAAegB,IAAIJ,OAAO,CAACO,GAAG,CAAC,iBAEpD,GAAI,CAACD,aAAc,CACjB,MAAM,IAAIE,MAAM,uCAClB,CAEA,MAAMd,QAAU,MAAMU,IAAIK,IAAI,GAE9B,GAAIf,QAAQgB,KAAK,GAAKrB,qBAAsB,CAC1CI,eACF,KAAO,CACLA,cAAcC,QAChB,CACF,CAAE,MAAOiB,EAAG,CACVlB,gBACAI,QAAQe,IAAI,CAAC,6CAA8CD,EAC7D,CACF,EAEA,MAAME,aAAe,CAAEC,KAAM,IAAK,EAElC,MAAMC,YAAc,UAEpB,MAAMC,mBAAqB,CACzB,CAACD,YAAY,CAAE,CAACE,MAAQJ,YAAY,CAAEK,UACpC,OAAQA,OAAOtB,IAAI,EACjB,IAAK,iBACH,MAAO,CAAE,GAAGqB,KAAK,CAAEH,KAAMI,OAAOxB,OAAO,AAAC,CAC1C,SACE,OAAOuB,KACX,CACF,CACF,EAEA,MAAME,kBAAoB,AAAC5B,OAAUA,MAAM6B,QAAQ,EAAE,CAACL,YAAY,EAAED,IAEpE,QAASxB,gBAAgB,CAAE0B,kBAAkB,CAAEG,iBAAiB,CAAG"}

package/core/styles/buttons.css

@@ -4,19 +4,19 @@
   }
 
   .ui-button-lg-base {
-    @apply ui-button-base ui-text-button1 h-[56px] px-[28px] py-[17px] gap-12 [&>svg]:!w-24 [&>svg]:!h-24;
+    @apply ui-button-base ui-text-label1 font-bold h-[56px] px-[28px] py-[17px] gap-12 [&>svg]:!w-24 [&>svg]:!h-24;
   }
 
   .ui-button-md-base {
-    @apply ui-button-base ui-text-button2 h-[48px] px-24 py-[13.5px] gap-[10px] [&>svg]:!w-24 [&>svg]:!h-24;
+    @apply ui-button-base ui-text-label2 font-bold h-[48px] px-24 py-[13.5px] gap-[10px] [&>svg]:!w-24 [&>svg]:!h-24;
   }
 
   .ui-button-sm-base {
-    @apply ui-button-base ui-text-button3 h-[40px] px-20 py-[10px] gap-8 [&>svg]:!w-20 [&>svg]:!h-20;
+    @apply ui-button-base ui-text-label3 font-bold h-[40px] px-20 py-[10px] gap-8 [&>svg]:!w-20 [&>svg]:!h-20;
   }
 
   .ui-button-xs-base {
-    @apply ui-button-base ui-text-button4 h-[36px] px-12 py-[9px] gap-6 [&>svg]:!w-16 [&>svg]:!h-16;
+    @apply ui-button-base ui-text-label4 font-bold h-[36px] px-12 py-[9px] gap-6 [&>svg]:!w-16 [&>svg]:!h-16;
   }
 
   .ui-button-disabled-base {