@ably/ui 16.1.0-dev.d9810f04 → 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/Accordion/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/core/Accordion/types.ts"],"sourcesContent":["import { ReactNode } from \"react\";\nimport { IconName, IconSize } from \"../Icon/types\";\nimport { ColorThemeSet } from \"../styles/colors/types\";\n\n/**\n * Represents the data structure for an Accordion component.\n */\nexport type AccordionData = {\n  /**\n   * The name of the accordion item.\n   */\n  name: string;\n\n  /**\n   * The optional icon name to be displayed alongside the accordion item.\n   */\n  icon?: IconName;\n\n  /**\n   * The content to be displayed when the accordion item is expanded.\n   */\n  content: ReactNode;\n\n  /**\n   * Optional click handler function that is called when the accordion item is clicked.\n   * @param index - The index of the clicked accordion item.\n   */\n  onClick?: (index: number) => void;\n};\n\nexport type AccordionIcons = {\n  closed: {\n    name: IconName;\n    css?: string;\n  };\n  open: {\n    name: IconName;\n    css?: string;\n  };\n};\n\nexport const accordionThemes = [\"default\", \"transparent\", \"static\"] as const;\n\nexport type AccordionTheme = (typeof accordionThemes)[number];\n\n/**\n * Represents the theme colors for an accordion component.\n */\nexport type AccordionThemeColors = {\n  /**\n   * Background color class for the accordion.\n   */\n  bg: ColorThemeSet;\n\n  /**\n   * Background color when the accordion item is hovered.\n   */\n  hoverBg: ColorThemeSet;\n\n  /**\n   * Text color class for the accordion.\n   */\n  text: ColorThemeSet;\n\n  /**\n   * Color class for the toggle icon of the accordion.\n   */\n  toggleIconColor: ColorThemeSet;\n\n  /**\n   * Optional background color class for selectable accordion items.\n   */\n  selectableBg?: ColorThemeSet;\n\n  /**\n   * Optional text color class for selectable accordion items.\n   */\n  selectableText?: ColorThemeSet;\n\n  /**\n   * Optional border color for the accordion.\n   */\n  border?: string;\n};\n\n/**\n * Options for configuring the Accordion component.\n */\nexport type AccordionOptions = {\n  /**\n   * If true, only one accordion item can be open at a time.\n   * @default false\n   */\n  autoClose?: boolean;\n\n  /**\n   * If true, accordion items can be selected.\n   * @default false\n   */\n  selectable?: boolean;\n\n  /**\n   * If true, the accordion header will stick to the top when scrolling.\n   * @default false\n   */\n  sticky?: boolean;\n\n  /**\n   * An array of indexes indicating which accordion items should be open by default.\n   * @default []\n   */\n  defaultOpenIndexes?: number[];\n\n  /**\n   * If true, all accordion items will be fully open.\n   * @default false\n   */\n  fullyOpen?: boolean;\n\n  /**\n   * Custom CSS class to apply to the accordion header.\n   * @default \"\"\n   */\n  headerCSS?: string;\n\n  /**\n   * If true, borders between accordion items will be hidden.\n   * @default false\n   */\n  hideBorders?: boolean;\n\n  /**\n   * Size of the row icon.\n   * @default \"32px\"\n   */\n  rowIconSize?: IconSize;\n\n  /**\n   * Size of the accordion icon.\n   * @default \"16px\"\n   */\n  iconSize?: IconSize;\n\n  /**\n   * Custom CSS classes to apply to the selected accordion header.\n   * @default \"\"\n   */\n  selectedHeaderCSS?: string;\n\n  /**\n   * Custom CSS classes to apply to the accordion content.\n   * @default \"\"\n   */\n  contentCSS?: string;\n};\n"],"names":["accordionThemes"],"mappings":"AAyCA,OAAO,MAAMA,gBAAkB,CAAC,UAAW,cAAe,SAAS,AAAU"}
+{"version":3,"sources":["../../../src/core/Accordion/types.ts"],"sourcesContent":["import { ReactNode } from \"react\";\nimport { IconName, IconSize } from \"../Icon/types\";\nimport { ColorThemeSet } from \"../styles/colors/types\";\n\n/**\n * Represents the data structure for an Accordion component.\n */\nexport type AccordionData = {\n  /**\n   * The name of the accordion item.\n   */\n  name: string;\n\n  /**\n   * The optional icon name to be displayed alongside the accordion item.\n   */\n  icon?: IconName;\n\n  /**\n   * The content to be displayed when the accordion item is expanded.\n   */\n  content: ReactNode;\n\n  /**\n   * Optional click handler function that is called when the accordion item is clicked.\n   * @param index - The index of the clicked accordion item.\n   */\n  onClick?: (index: number) => void;\n\n  /**\n   * Indicates whether the accordion item is interactive.\n   * When false, the item cannot be expanded or collapsed by user interaction.\n   * @default true\n   */\n  interactive?: boolean;\n};\n\nexport type AccordionIcons = {\n  closed: {\n    name: IconName;\n    css?: string;\n  };\n  open: {\n    name: IconName;\n    css?: string;\n  };\n};\n\nexport const accordionThemes = [\"default\", \"transparent\", \"static\"] as const;\n\nexport type AccordionTheme = (typeof accordionThemes)[number];\n\n/**\n * Represents the theme colors for an accordion component.\n */\nexport type AccordionThemeColors = {\n  /**\n   * Background color class for the accordion.\n   */\n  bg: ColorThemeSet;\n\n  /**\n   * Background color when the accordion item is hovered.\n   */\n  hoverBg: ColorThemeSet;\n\n  /**\n   * Text color class for the accordion.\n   */\n  text: ColorThemeSet;\n\n  /**\n   * Color class for the toggle icon of the accordion.\n   */\n  toggleIconColor: ColorThemeSet;\n\n  /**\n   * Optional background color class for selectable accordion items.\n   */\n  selectableBg?: ColorThemeSet;\n\n  /**\n   * Optional text color class for selectable accordion items.\n   */\n  selectableText?: ColorThemeSet;\n\n  /**\n   * Optional border color for the accordion.\n   */\n  border?: string;\n};\n\n/**\n * Options for configuring the Accordion component.\n */\nexport type AccordionOptions = {\n  /**\n   * If true, only one accordion item can be open at a time.\n   * @default false\n   */\n  autoClose?: boolean;\n\n  /**\n   * If true, accordion items can be selected.\n   * @default false\n   */\n  selectable?: boolean;\n\n  /**\n   * If true, the accordion header will stick to the top when scrolling.\n   * @default false\n   */\n  sticky?: boolean;\n\n  /**\n   * An array of indexes indicating which accordion items should be open by default.\n   * @default []\n   */\n  defaultOpenIndexes?: number[];\n\n  /**\n   * If true, all accordion items will be fully open.\n   * @default false\n   */\n  fullyOpen?: boolean;\n\n  /**\n   * Custom CSS class to apply to the accordion header.\n   * @default \"\"\n   */\n  headerCSS?: string;\n\n  /**\n   * If true, borders between accordion items will be hidden.\n   * @default false\n   */\n  hideBorders?: boolean;\n\n  /**\n   * Size of the row icon.\n   * @default \"32px\"\n   */\n  rowIconSize?: IconSize;\n\n  /**\n   * Size of the accordion icon.\n   * @default \"16px\"\n   */\n  iconSize?: IconSize;\n\n  /**\n   * Custom CSS classes to apply to the selected accordion header.\n   * @default \"\"\n   */\n  selectedHeaderCSS?: string;\n\n  /**\n   * Custom CSS classes to apply to the accordion content.\n   * @default \"\"\n   */\n  contentCSS?: string;\n};\n"],"names":["accordionThemes"],"mappings":"AAgDA,OAAO,MAAMA,gBAAkB,CAAC,UAAW,cAAe,SAAS,AAAU"}

package/core/Accordion.js

@@ -1,2 +1,2 @@
-import React,{useMemo,useState,forwardRef}from"react";import{AccordionContent,AccordionItem,AccordionTrigger,Accordion as RadixAccordion}from"@radix-ui/react-accordion";import Icon from"./Icon";import{themeClasses,isNonTransparentTheme,isStaticTheme}from"./Accordion/utils";import cn from"./utils/cn";const AccordionRow=({name,children,rowIcon,options,toggleIcons,theme,index,onClick,openRowValues})=>{const{selectable,sticky}=options||{};const rowKey=`accordion-item-${index}`;const isOpen=openRowValues.includes(rowKey);const{text,bg,hoverBg,selectableBg,selectableText,border,toggleIconColor}=themeClasses[theme];const textClass=selectable&&isOpen&&selectableText||text;return React.createElement(AccordionItem,{value:rowKey,className:cn({[`${border}`]:border&&!options?.hideBorders})},React.createElement(AccordionTrigger,{onClick:onClick,className:cn({"flex w-full group/accordion-trigger py-16 ui-text-p1 font-bold text-left items-center gap-12 transition-colors focus:outline-none":true,"px-16 mb-16 rounded-lg":isNonTransparentTheme(theme),"rounded-none":!isNonTransparentTheme(theme),"pointer-events-none focus-visible:outline-none":isStaticTheme(theme),"focus-base":!isStaticTheme(theme),"sticky top-0":sticky,[`${bg} ${hoverBg} ${text}`]:!(selectable&&isOpen),[`${selectableBg} ${selectableText}`]:selectable&&isOpen,[options?.headerCSS??""]:options?.headerCSS,[options?.selectedHeaderCSS??""]:options?.selectedHeaderCSS&&isOpen})},rowIcon?React.createElement(Icon,{name:rowIcon,color:textClass,size:options?.rowIconSize??"32px"}):null,React.createElement("span",null,name),!selectable&&!isStaticTheme(theme)?React.createElement("span",{className:"flex-1 justify-end flex items-center"},React.createElement(Icon,{name:isOpen?toggleIcons.open.name:toggleIcons.closed.name,color:toggleIconColor,size:options?.iconSize??"16px"})):null),React.createElement(AccordionContent,{className:cn({"ui-text-p2 overflow-hidden transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down":true,[options?.contentCSS??""]:options?.contentCSS})},React.createElement("div",{className:"pb-16"},children)))};const Accordion=forwardRef(({data,theme="transparent",icons={closed:{name:"icon-gui-plus-outline"},open:{name:"icon-gui-minus-outline"}},options,...props},ref)=>{const openIndexes=useMemo(()=>{const indexValues=data.map((_,i)=>`accordion-item-${i}`);return options?.fullyOpen?indexValues:indexValues.filter((_,index)=>options?.defaultOpenIndexes?.includes(index))},[options?.defaultOpenIndexes,options?.fullyOpen,data.length]);const[openRowValues,setOpenRowValues]=useState(openIndexes);const innerAccordion=data.map((item,index)=>React.createElement(AccordionRow,{key:item.name,name:item.name,rowIcon:item.icon,toggleIcons:icons,theme:theme,options:options,index:index,onClick:()=>{item.onClick?.(index)},openRowValues:openRowValues},item.content));return React.createElement("div",{ref:ref,...props},options?.autoClose?React.createElement(RadixAccordion,{type:"single",collapsible:true,defaultValue:openIndexes[0],onValueChange:values=>setOpenRowValues(values)},innerAccordion):React.createElement(RadixAccordion,{type:"multiple",defaultValue:openIndexes,onValueChange:values=>setOpenRowValues(values)},innerAccordion))});Accordion.displayName="Accordion";export default Accordion;
+import React,{useMemo,useState,forwardRef}from"react";import{AccordionContent,AccordionItem,AccordionTrigger,Accordion as RadixAccordion}from"@radix-ui/react-accordion";import Icon from"./Icon";import{themeClasses,isNonTransparentTheme,isStaticTheme}from"./Accordion/utils";import cn from"./utils/cn";const AccordionRow=({name,children,rowIcon,options,toggleIcons,theme,index,onClick,openRowValues,rowInteractive=true})=>{const{selectable,sticky}=options||{};const rowKey=`accordion-item-${index}`;const isOpen=openRowValues.includes(rowKey);const{text,bg,hoverBg,selectableBg,selectableText,border,toggleIconColor}=themeClasses[theme];const textClass=selectable&&isOpen&&selectableText||text;return React.createElement(AccordionItem,{value:rowKey,className:cn({[`${border}`]:border&&!options?.hideBorders})},React.createElement(AccordionTrigger,{onClick:onClick,className:cn({"flex w-full group/accordion-trigger py-16 ui-text-p1 font-bold text-left items-center gap-12 transition-colors focus:outline-none":true,"px-16 mb-16 rounded-lg":isNonTransparentTheme(theme),"px-0 rounded-none":!isNonTransparentTheme(theme),"pointer-events-none focus-visible:outline-none":isStaticTheme(theme),"focus-base":!isStaticTheme(theme),"sticky top-0":sticky,[`${bg} ${hoverBg} ${text}`]:!(selectable&&isOpen),[`${selectableBg} ${selectableText}`]:selectable&&isOpen,[options?.headerCSS??""]:options?.headerCSS,[options?.selectedHeaderCSS??""]:options?.selectedHeaderCSS&&isOpen})},rowIcon?React.createElement(Icon,{name:rowIcon,color:textClass,size:options?.rowIconSize??"32px"}):null,React.createElement("span",null,name),!selectable&&!isStaticTheme(theme)&&rowInteractive?React.createElement("span",{className:"flex-1 justify-end flex items-center"},React.createElement(Icon,{name:isOpen?toggleIcons.open.name:toggleIcons.closed.name,color:toggleIconColor,size:options?.iconSize??"16px"})):null),rowInteractive&&React.createElement(AccordionContent,{className:cn({"ui-text-p2 overflow-hidden transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down":true,[options?.contentCSS??""]:options?.contentCSS})},React.createElement("div",{className:"pb-16"},children)))};const Accordion=forwardRef(({data,theme="transparent",icons={closed:{name:"icon-gui-plus-outline"},open:{name:"icon-gui-minus-outline"}},options,...props},ref)=>{const openIndexes=useMemo(()=>{const indexValues=data.map((_,i)=>`accordion-item-${i}`);return options?.fullyOpen?indexValues:indexValues.filter((_,index)=>options?.defaultOpenIndexes?.includes(index))},[options?.defaultOpenIndexes,options?.fullyOpen,data.length]);const[openRowValues,setOpenRowValues]=useState(openIndexes);const innerAccordion=data.map((item,index)=>React.createElement(AccordionRow,{key:item.name,name:item.name,rowIcon:item.icon,toggleIcons:icons,theme:theme,options:options,index:index,onClick:()=>{item.onClick?.(index)},openRowValues:openRowValues,rowInteractive:item.interactive},item.content));return React.createElement("div",{ref:ref,...props},options?.autoClose?React.createElement(RadixAccordion,{type:"single",collapsible:true,defaultValue:openIndexes[0],onValueChange:values=>setOpenRowValues(values)},innerAccordion):React.createElement(RadixAccordion,{type:"multiple",defaultValue:openIndexes,onValueChange:values=>setOpenRowValues(values)},innerAccordion))});Accordion.displayName="Accordion";export default Accordion;
 //# sourceMappingURL=Accordion.js.map

package/core/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/core/Accordion.tsx"],"sourcesContent":["import React, { ReactNode, useMemo, useState, forwardRef } from \"react\";\nimport {\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n  Accordion as RadixAccordion,\n} from \"@radix-ui/react-accordion\";\n\nimport Icon from \"./Icon\";\nimport type { IconName } from \"./Icon/types\";\nimport type {\n  AccordionData,\n  AccordionIcons,\n  AccordionOptions,\n  AccordionTheme,\n} from \"./Accordion/types\";\nimport {\n  themeClasses,\n  isNonTransparentTheme,\n  isStaticTheme,\n} from \"./Accordion/utils\";\nimport cn from \"./utils/cn\";\n\ntype AccordionRowProps = {\n  children: ReactNode;\n  name: string;\n  rowIcon?: IconName;\n  theme: AccordionTheme;\n  toggleIcons: AccordionIcons;\n  options?: AccordionOptions;\n  index: number;\n  onClick: () => void;\n  openRowValues: string | string[];\n};\n\nexport type AccordionProps = {\n  /**\n   * The data for the accordion items.\n   */\n  data: AccordionData[];\n\n  /**\n   * Icons for the accordion toggle.\n   */\n  icons?: AccordionIcons;\n\n  /**\n   * Theme for the accordion.\n   */\n  theme?: AccordionTheme;\n\n  /**\n   * Options for the accordion behavior.\n   */\n  options?: AccordionOptions;\n} & React.HTMLAttributes<HTMLDivElement>;\n\nconst AccordionRow = ({\n  name,\n  children,\n  rowIcon,\n  options,\n  toggleIcons,\n  theme,\n  index,\n  onClick,\n  openRowValues,\n}: AccordionRowProps) => {\n  const { selectable, sticky } = options || {};\n  const rowKey = `accordion-item-${index}`;\n  const isOpen = openRowValues.includes(rowKey);\n\n  const {\n    text,\n    bg,\n    hoverBg,\n    selectableBg,\n    selectableText,\n    border,\n    toggleIconColor,\n  } = themeClasses[theme];\n\n  const textClass = (selectable && isOpen && selectableText) || text;\n\n  return (\n    <AccordionItem\n      value={rowKey}\n      className={cn({\n        [`${border}`]: border && !options?.hideBorders,\n      })}\n    >\n      <AccordionTrigger\n        onClick={onClick}\n        className={cn({\n          \"flex w-full group/accordion-trigger py-16 ui-text-p1 font-bold text-left items-center gap-12 transition-colors focus:outline-none\":\n            true,\n          \"px-16 mb-16 rounded-lg\": isNonTransparentTheme(theme),\n          \"rounded-none\": !isNonTransparentTheme(theme),\n          \"pointer-events-none focus-visible:outline-none\":\n            isStaticTheme(theme),\n          \"focus-base\": !isStaticTheme(theme),\n          \"sticky top-0\": sticky,\n          [`${bg} ${hoverBg} ${text}`]: !(selectable && isOpen),\n          [`${selectableBg} ${selectableText}`]: selectable && isOpen,\n          [options?.headerCSS ?? \"\"]: options?.headerCSS,\n          [options?.selectedHeaderCSS ?? \"\"]:\n            options?.selectedHeaderCSS && isOpen,\n        })}\n      >\n        {rowIcon ? (\n          <Icon\n            name={rowIcon}\n            color={textClass}\n            size={options?.rowIconSize ?? \"32px\"}\n          />\n        ) : null}\n        <span>{name}</span>\n        {!selectable && !isStaticTheme(theme) ? (\n          <span className=\"flex-1 justify-end flex items-center\">\n            <Icon\n              name={isOpen ? toggleIcons.open.name : toggleIcons.closed.name}\n              color={toggleIconColor}\n              size={options?.iconSize ?? \"16px\"}\n            />\n          </span>\n        ) : null}\n      </AccordionTrigger>\n      <AccordionContent\n        className={cn({\n          \"ui-text-p2 overflow-hidden transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\":\n            true,\n          [options?.contentCSS ?? \"\"]: options?.contentCSS,\n        })}\n      >\n        <div className=\"pb-16\">{children}</div>\n      </AccordionContent>\n    </AccordionItem>\n  );\n};\n\nconst Accordion = forwardRef<HTMLDivElement, AccordionProps>(\n  (\n    {\n      data,\n      theme = \"transparent\",\n      icons = {\n        closed: { name: \"icon-gui-plus-outline\" },\n        open: { name: \"icon-gui-minus-outline\" },\n      },\n      options,\n      ...props\n    },\n    ref,\n  ) => {\n    const openIndexes = useMemo(() => {\n      const indexValues = data.map((_, i) => `accordion-item-${i}`);\n      return options?.fullyOpen\n        ? indexValues\n        : indexValues.filter((_, index) =>\n            options?.defaultOpenIndexes?.includes(index),\n          );\n    }, [options?.defaultOpenIndexes, options?.fullyOpen, data.length]);\n\n    const [openRowValues, setOpenRowValues] = useState<string | string[]>(\n      openIndexes,\n    );\n    const innerAccordion = data.map((item, index) => (\n      <AccordionRow\n        key={item.name}\n        name={item.name}\n        rowIcon={item.icon}\n        toggleIcons={icons}\n        theme={theme}\n        options={options}\n        index={index}\n        onClick={() => {\n          item.onClick?.(index);\n        }}\n        openRowValues={openRowValues}\n      >\n        {item.content}\n      </AccordionRow>\n    ));\n\n    return (\n      <div ref={ref} {...props}>\n        {options?.autoClose ? (\n          <RadixAccordion\n            type=\"single\"\n            collapsible\n            defaultValue={openIndexes[0]}\n            onValueChange={(values) => setOpenRowValues(values)}\n          >\n            {innerAccordion}\n          </RadixAccordion>\n        ) : (\n          <RadixAccordion\n            type=\"multiple\"\n            defaultValue={openIndexes}\n            onValueChange={(values) => setOpenRowValues(values)}\n          >\n            {innerAccordion}\n          </RadixAccordion>\n        )}\n      </div>\n    );\n  },\n);\n\nAccordion.displayName = \"Accordion\";\n\nexport default Accordion;\n"],"names":["React","useMemo","useState","forwardRef","AccordionContent","AccordionItem","AccordionTrigger","Accordion","RadixAccordion","Icon","themeClasses","isNonTransparentTheme","isStaticTheme","cn","AccordionRow","name","children","rowIcon","options","toggleIcons","theme","index","onClick","openRowValues","selectable","sticky","rowKey","isOpen","includes","text","bg","hoverBg","selectableBg","selectableText","border","toggleIconColor","textClass","value","className","hideBorders","headerCSS","selectedHeaderCSS","color","size","rowIconSize","span","open","closed","iconSize","contentCSS","div","data","icons","props","ref","openIndexes","indexValues","map","_","i","fullyOpen","filter","defaultOpenIndexes","length","setOpenRowValues","innerAccordion","item","key","icon","content","autoClose","type","collapsible","defaultValue","onValueChange","values","displayName"],"mappings":"AAAA,OAAOA,OAAoBC,OAAO,CAAEC,QAAQ,CAAEC,UAAU,KAAQ,OAAQ,AACxE,QACEC,gBAAgB,CAChBC,aAAa,CACbC,gBAAgB,CAChBC,aAAaC,cAAc,KACtB,2BAA4B,AAEnC,QAAOC,SAAU,QAAS,AAQ1B,QACEC,YAAY,CACZC,qBAAqB,CACrBC,aAAa,KACR,mBAAoB,AAC3B,QAAOC,OAAQ,YAAa,CAoC5B,MAAMC,aAAe,CAAC,CACpBC,IAAI,CACJC,QAAQ,CACRC,OAAO,CACPC,OAAO,CACPC,WAAW,CACXC,KAAK,CACLC,KAAK,CACLC,OAAO,CACPC,aAAa,CACK,IAClB,KAAM,CAAEC,UAAU,CAAEC,MAAM,CAAE,CAAGP,SAAW,CAAC,EAC3C,MAAMQ,OAAS,CAAC,eAAe,EAAEL,MAAM,CAAC,CACxC,MAAMM,OAASJ,cAAcK,QAAQ,CAACF,QAEtC,KAAM,CACJG,IAAI,CACJC,EAAE,CACFC,OAAO,CACPC,YAAY,CACZC,cAAc,CACdC,MAAM,CACNC,eAAe,CAChB,CAAGzB,YAAY,CAACU,MAAM,CAEvB,MAAMgB,UAAY,AAACZ,YAAcG,QAAUM,gBAAmBJ,KAE9D,OACE,oBAACxB,eACCgC,MAAOX,OACPY,UAAWzB,GAAG,CACZ,CAAC,CAAC,EAAEqB,OAAO,CAAC,CAAC,CAAEA,QAAU,CAAChB,SAASqB,WACrC,IAEA,oBAACjC,kBACCgB,QAASA,QACTgB,UAAWzB,GAAG,CACZ,oIACE,KACF,yBAA0BF,sBAAsBS,OAChD,eAAgB,CAACT,sBAAsBS,OACvC,iDACER,cAAcQ,OAChB,aAAc,CAACR,cAAcQ,OAC7B,eAAgBK,OAChB,CAAC,CAAC,EAAEK,GAAG,CAAC,EAAEC,QAAQ,CAAC,EAAEF,KAAK,CAAC,CAAC,CAAE,CAAEL,CAAAA,YAAcG,MAAK,EACnD,CAAC,CAAC,EAAEK,aAAa,CAAC,EAAEC,eAAe,CAAC,CAAC,CAAET,YAAcG,OACrD,CAACT,SAASsB,WAAa,GAAG,CAAEtB,SAASsB,UACrC,CAACtB,SAASuB,mBAAqB,GAAG,CAChCvB,SAASuB,mBAAqBd,MAClC,IAECV,QACC,oBAACR,MACCM,KAAME,QACNyB,MAAON,UACPO,KAAMzB,SAAS0B,aAAe,SAE9B,KACJ,oBAACC,YAAM9B,MACN,CAACS,YAAc,CAACZ,cAAcQ,OAC7B,oBAACyB,QAAKP,UAAU,wCACd,oBAAC7B,MACCM,KAAMY,OAASR,YAAY2B,IAAI,CAAC/B,IAAI,CAAGI,YAAY4B,MAAM,CAAChC,IAAI,CAC9D2B,MAAOP,gBACPQ,KAAMzB,SAAS8B,UAAY,UAG7B,MAEN,oBAAC5C,kBACCkC,UAAWzB,GAAG,CACZ,8HACE,KACF,CAACK,SAAS+B,YAAc,GAAG,CAAE/B,SAAS+B,UACxC,IAEA,oBAACC,OAAIZ,UAAU,SAAStB,WAIhC,EAEA,MAAMT,UAAYJ,WAChB,CACE,CACEgD,IAAI,CACJ/B,MAAQ,aAAa,CACrBgC,MAAQ,CACNL,OAAQ,CAAEhC,KAAM,uBAAwB,EACxC+B,KAAM,CAAE/B,KAAM,wBAAyB,CACzC,CAAC,CACDG,OAAO,CACP,GAAGmC,MACJ,CACDC,OAEA,MAAMC,YAActD,QAAQ,KAC1B,MAAMuD,YAAcL,KAAKM,GAAG,CAAC,CAACC,EAAGC,IAAM,CAAC,eAAe,EAAEA,EAAE,CAAC,EAC5D,OAAOzC,SAAS0C,UACZJ,YACAA,YAAYK,MAAM,CAAC,CAACH,EAAGrC,QACrBH,SAAS4C,oBAAoBlC,SAASP,OAE9C,EAAG,CAACH,SAAS4C,mBAAoB5C,SAAS0C,UAAWT,KAAKY,MAAM,CAAC,EAEjE,KAAM,CAACxC,cAAeyC,iBAAiB,CAAG9D,SACxCqD,aAEF,MAAMU,eAAiBd,KAAKM,GAAG,CAAC,CAACS,KAAM7C,QACrC,oBAACP,cACCqD,IAAKD,KAAKnD,IAAI,CACdA,KAAMmD,KAAKnD,IAAI,CACfE,QAASiD,KAAKE,IAAI,CAClBjD,YAAaiC,MACbhC,MAAOA,MACPF,QAASA,QACTG,MAAOA,MACPC,QAAS,KACP4C,KAAK5C,OAAO,GAAGD,MACjB,EACAE,cAAeA,eAEd2C,KAAKG,OAAO,GAIjB,OACE,oBAACnB,OAAII,IAAKA,IAAM,GAAGD,KAAK,EACrBnC,SAASoD,UACR,oBAAC9D,gBACC+D,KAAK,SACLC,YAAAA,KACAC,aAAclB,WAAW,CAAC,EAAE,CAC5BmB,cAAe,AAACC,QAAWX,iBAAiBW,SAE3CV,gBAGH,oBAACzD,gBACC+D,KAAK,WACLE,aAAclB,YACdmB,cAAe,AAACC,QAAWX,iBAAiBW,SAE3CV,gBAKX,EAGF1D,CAAAA,UAAUqE,WAAW,CAAG,WAExB,gBAAerE,SAAU"}
+{"version":3,"sources":["../../src/core/Accordion.tsx"],"sourcesContent":["import React, { ReactNode, useMemo, useState, forwardRef } from \"react\";\nimport {\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n  Accordion as RadixAccordion,\n} from \"@radix-ui/react-accordion\";\n\nimport Icon from \"./Icon\";\nimport type { IconName } from \"./Icon/types\";\nimport type {\n  AccordionData,\n  AccordionIcons,\n  AccordionOptions,\n  AccordionTheme,\n} from \"./Accordion/types\";\nimport {\n  themeClasses,\n  isNonTransparentTheme,\n  isStaticTheme,\n} from \"./Accordion/utils\";\nimport cn from \"./utils/cn\";\n\ntype AccordionRowProps = {\n  children: ReactNode;\n  name: string;\n  rowIcon?: IconName;\n  theme: AccordionTheme;\n  toggleIcons: AccordionIcons;\n  options?: AccordionOptions;\n  index: number;\n  onClick: () => void;\n  openRowValues: string | string[];\n  rowInteractive?: boolean;\n};\n\nexport type AccordionProps = {\n  /**\n   * The data for the accordion items.\n   */\n  data: AccordionData[];\n\n  /**\n   * Icons for the accordion toggle.\n   */\n  icons?: AccordionIcons;\n\n  /**\n   * Theme for the accordion.\n   */\n  theme?: AccordionTheme;\n\n  /**\n   * Options for the accordion behavior.\n   */\n  options?: AccordionOptions;\n} & React.HTMLAttributes<HTMLDivElement>;\n\nconst AccordionRow = ({\n  name,\n  children,\n  rowIcon,\n  options,\n  toggleIcons,\n  theme,\n  index,\n  onClick,\n  openRowValues,\n  rowInteractive = true,\n}: AccordionRowProps) => {\n  const { selectable, sticky } = options || {};\n  const rowKey = `accordion-item-${index}`;\n  const isOpen = openRowValues.includes(rowKey);\n\n  const {\n    text,\n    bg,\n    hoverBg,\n    selectableBg,\n    selectableText,\n    border,\n    toggleIconColor,\n  } = themeClasses[theme];\n\n  const textClass = (selectable && isOpen && selectableText) || text;\n\n  return (\n    <AccordionItem\n      value={rowKey}\n      className={cn({\n        [`${border}`]: border && !options?.hideBorders,\n      })}\n    >\n      <AccordionTrigger\n        onClick={onClick}\n        className={cn({\n          \"flex w-full group/accordion-trigger py-16 ui-text-p1 font-bold text-left items-center gap-12 transition-colors focus:outline-none\":\n            true,\n          \"px-16 mb-16 rounded-lg\": isNonTransparentTheme(theme),\n          \"px-0 rounded-none\": !isNonTransparentTheme(theme),\n          \"pointer-events-none focus-visible:outline-none\":\n            isStaticTheme(theme),\n          \"focus-base\": !isStaticTheme(theme),\n          \"sticky top-0\": sticky,\n          [`${bg} ${hoverBg} ${text}`]: !(selectable && isOpen),\n          [`${selectableBg} ${selectableText}`]: selectable && isOpen,\n          [options?.headerCSS ?? \"\"]: options?.headerCSS,\n          [options?.selectedHeaderCSS ?? \"\"]:\n            options?.selectedHeaderCSS && isOpen,\n        })}\n      >\n        {rowIcon ? (\n          <Icon\n            name={rowIcon}\n            color={textClass}\n            size={options?.rowIconSize ?? \"32px\"}\n          />\n        ) : null}\n        <span>{name}</span>\n        {!selectable && !isStaticTheme(theme) && rowInteractive ? (\n          <span className=\"flex-1 justify-end flex items-center\">\n            <Icon\n              name={isOpen ? toggleIcons.open.name : toggleIcons.closed.name}\n              color={toggleIconColor}\n              size={options?.iconSize ?? \"16px\"}\n            />\n          </span>\n        ) : null}\n      </AccordionTrigger>\n      {rowInteractive && (\n        <AccordionContent\n          className={cn({\n            \"ui-text-p2 overflow-hidden transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\":\n              true,\n            [options?.contentCSS ?? \"\"]: options?.contentCSS,\n          })}\n        >\n          <div className=\"pb-16\">{children}</div>\n        </AccordionContent>\n      )}\n    </AccordionItem>\n  );\n};\n\nconst Accordion = forwardRef<HTMLDivElement, AccordionProps>(\n  (\n    {\n      data,\n      theme = \"transparent\",\n      icons = {\n        closed: { name: \"icon-gui-plus-outline\" },\n        open: { name: \"icon-gui-minus-outline\" },\n      },\n      options,\n      ...props\n    },\n    ref,\n  ) => {\n    const openIndexes = useMemo(() => {\n      const indexValues = data.map((_, i) => `accordion-item-${i}`);\n      return options?.fullyOpen\n        ? indexValues\n        : indexValues.filter((_, index) =>\n            options?.defaultOpenIndexes?.includes(index),\n          );\n    }, [options?.defaultOpenIndexes, options?.fullyOpen, data.length]);\n\n    const [openRowValues, setOpenRowValues] = useState<string | string[]>(\n      openIndexes,\n    );\n    const innerAccordion = data.map((item, index) => (\n      <AccordionRow\n        key={item.name}\n        name={item.name}\n        rowIcon={item.icon}\n        toggleIcons={icons}\n        theme={theme}\n        options={options}\n        index={index}\n        onClick={() => {\n          item.onClick?.(index);\n        }}\n        openRowValues={openRowValues}\n        rowInteractive={item.interactive}\n      >\n        {item.content}\n      </AccordionRow>\n    ));\n\n    return (\n      <div ref={ref} {...props}>\n        {options?.autoClose ? (\n          <RadixAccordion\n            type=\"single\"\n            collapsible\n            defaultValue={openIndexes[0]}\n            onValueChange={(values) => setOpenRowValues(values)}\n          >\n            {innerAccordion}\n          </RadixAccordion>\n        ) : (\n          <RadixAccordion\n            type=\"multiple\"\n            defaultValue={openIndexes}\n            onValueChange={(values) => setOpenRowValues(values)}\n          >\n            {innerAccordion}\n          </RadixAccordion>\n        )}\n      </div>\n    );\n  },\n);\n\nAccordion.displayName = \"Accordion\";\n\nexport default Accordion;\n"],"names":["React","useMemo","useState","forwardRef","AccordionContent","AccordionItem","AccordionTrigger","Accordion","RadixAccordion","Icon","themeClasses","isNonTransparentTheme","isStaticTheme","cn","AccordionRow","name","children","rowIcon","options","toggleIcons","theme","index","onClick","openRowValues","rowInteractive","selectable","sticky","rowKey","isOpen","includes","text","bg","hoverBg","selectableBg","selectableText","border","toggleIconColor","textClass","value","className","hideBorders","headerCSS","selectedHeaderCSS","color","size","rowIconSize","span","open","closed","iconSize","contentCSS","div","data","icons","props","ref","openIndexes","indexValues","map","_","i","fullyOpen","filter","defaultOpenIndexes","length","setOpenRowValues","innerAccordion","item","key","icon","interactive","content","autoClose","type","collapsible","defaultValue","onValueChange","values","displayName"],"mappings":"AAAA,OAAOA,OAAoBC,OAAO,CAAEC,QAAQ,CAAEC,UAAU,KAAQ,OAAQ,AACxE,QACEC,gBAAgB,CAChBC,aAAa,CACbC,gBAAgB,CAChBC,aAAaC,cAAc,KACtB,2BAA4B,AAEnC,QAAOC,SAAU,QAAS,AAQ1B,QACEC,YAAY,CACZC,qBAAqB,CACrBC,aAAa,KACR,mBAAoB,AAC3B,QAAOC,OAAQ,YAAa,CAqC5B,MAAMC,aAAe,CAAC,CACpBC,IAAI,CACJC,QAAQ,CACRC,OAAO,CACPC,OAAO,CACPC,WAAW,CACXC,KAAK,CACLC,KAAK,CACLC,OAAO,CACPC,aAAa,CACbC,eAAiB,IAAI,CACH,IAClB,KAAM,CAAEC,UAAU,CAAEC,MAAM,CAAE,CAAGR,SAAW,CAAC,EAC3C,MAAMS,OAAS,CAAC,eAAe,EAAEN,MAAM,CAAC,CACxC,MAAMO,OAASL,cAAcM,QAAQ,CAACF,QAEtC,KAAM,CACJG,IAAI,CACJC,EAAE,CACFC,OAAO,CACPC,YAAY,CACZC,cAAc,CACdC,MAAM,CACNC,eAAe,CAChB,CAAG1B,YAAY,CAACU,MAAM,CAEvB,MAAMiB,UAAY,AAACZ,YAAcG,QAAUM,gBAAmBJ,KAE9D,OACE,oBAACzB,eACCiC,MAAOX,OACPY,UAAW1B,GAAG,CACZ,CAAC,CAAC,EAAEsB,OAAO,CAAC,CAAC,CAAEA,QAAU,CAACjB,SAASsB,WACrC,IAEA,oBAAClC,kBACCgB,QAASA,QACTiB,UAAW1B,GAAG,CACZ,oIACE,KACF,yBAA0BF,sBAAsBS,OAChD,oBAAqB,CAACT,sBAAsBS,OAC5C,iDACER,cAAcQ,OAChB,aAAc,CAACR,cAAcQ,OAC7B,eAAgBM,OAChB,CAAC,CAAC,EAAEK,GAAG,CAAC,EAAEC,QAAQ,CAAC,EAAEF,KAAK,CAAC,CAAC,CAAE,CAAEL,CAAAA,YAAcG,MAAK,EACnD,CAAC,CAAC,EAAEK,aAAa,CAAC,EAAEC,eAAe,CAAC,CAAC,CAAET,YAAcG,OACrD,CAACV,SAASuB,WAAa,GAAG,CAAEvB,SAASuB,UACrC,CAACvB,SAASwB,mBAAqB,GAAG,CAChCxB,SAASwB,mBAAqBd,MAClC,IAECX,QACC,oBAACR,MACCM,KAAME,QACN0B,MAAON,UACPO,KAAM1B,SAAS2B,aAAe,SAE9B,KACJ,oBAACC,YAAM/B,MACN,CAACU,YAAc,CAACb,cAAcQ,QAAUI,eACvC,oBAACsB,QAAKP,UAAU,wCACd,oBAAC9B,MACCM,KAAMa,OAAST,YAAY4B,IAAI,CAAChC,IAAI,CAAGI,YAAY6B,MAAM,CAACjC,IAAI,CAC9D4B,MAAOP,gBACPQ,KAAM1B,SAAS+B,UAAY,UAG7B,MAELzB,gBACC,oBAACpB,kBACCmC,UAAW1B,GAAG,CACZ,8HACE,KACF,CAACK,SAASgC,YAAc,GAAG,CAAEhC,SAASgC,UACxC,IAEA,oBAACC,OAAIZ,UAAU,SAASvB,WAKlC,EAEA,MAAMT,UAAYJ,WAChB,CACE,CACEiD,IAAI,CACJhC,MAAQ,aAAa,CACrBiC,MAAQ,CACNL,OAAQ,CAAEjC,KAAM,uBAAwB,EACxCgC,KAAM,CAAEhC,KAAM,wBAAyB,CACzC,CAAC,CACDG,OAAO,CACP,GAAGoC,MACJ,CACDC,OAEA,MAAMC,YAAcvD,QAAQ,KAC1B,MAAMwD,YAAcL,KAAKM,GAAG,CAAC,CAACC,EAAGC,IAAM,CAAC,eAAe,EAAEA,EAAE,CAAC,EAC5D,OAAO1C,SAAS2C,UACZJ,YACAA,YAAYK,MAAM,CAAC,CAACH,EAAGtC,QACrBH,SAAS6C,oBAAoBlC,SAASR,OAE9C,EAAG,CAACH,SAAS6C,mBAAoB7C,SAAS2C,UAAWT,KAAKY,MAAM,CAAC,EAEjE,KAAM,CAACzC,cAAe0C,iBAAiB,CAAG/D,SACxCsD,aAEF,MAAMU,eAAiBd,KAAKM,GAAG,CAAC,CAACS,KAAM9C,QACrC,oBAACP,cACCsD,IAAKD,KAAKpD,IAAI,CACdA,KAAMoD,KAAKpD,IAAI,CACfE,QAASkD,KAAKE,IAAI,CAClBlD,YAAakC,MACbjC,MAAOA,MACPF,QAASA,QACTG,MAAOA,MACPC,QAAS,KACP6C,KAAK7C,OAAO,GAAGD,MACjB,EACAE,cAAeA,cACfC,eAAgB2C,KAAKG,WAAW,EAE/BH,KAAKI,OAAO,GAIjB,OACE,oBAACpB,OAAII,IAAKA,IAAM,GAAGD,KAAK,EACrBpC,SAASsD,UACR,oBAAChE,gBACCiE,KAAK,SACLC,YAAAA,KACAC,aAAcnB,WAAW,CAAC,EAAE,CAC5BoB,cAAe,AAACC,QAAWZ,iBAAiBY,SAE3CX,gBAGH,oBAAC1D,gBACCiE,KAAK,WACLE,aAAcnB,YACdoB,cAAe,AAACC,QAAWZ,iBAAiBY,SAE3CX,gBAKX,EAGF3D,CAAAA,UAAUuE,WAAW,CAAG,WAExB,gBAAevE,SAAU"}

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/FeaturedLink.js

@@ -1,2 +1,2 @@
-import React from"react";import Icon from"./Icon";import cn from"./utils/cn";const buildTargetAndRel=(url,newWindow)=>{const props={};if(newWindow){props.target="_blank";if(url.startsWith("/")&&!url.startsWith("//")){props.rel="noopener"}else{props.rel="noopenner noreferrer"}}return props};const FeaturedLink=({url,textSize="text-p2",iconColor,flush=false,reverse=false,additionalCSS="",newWindow=false,onClick=undefined,children,disabled=false})=>{const targetAndRel=buildTargetAndRel(url,newWindow);return React.createElement("a",{...onClick?{}:{href:url},className:cn("font-sans font-bold block group/featured-link",{"text-gui-unavailable pointer-events-none":disabled},{"text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-none focus-visible:outline-gui-focus":!disabled},{"py-8":!flush},`ui-${textSize}`,additionalCSS),style:{"--featured-link-icon-size":`var(${textSize.replace("text","--fs")})`},...targetAndRel,onClick:onClick},reverse?React.createElement(React.Fragment,null,React.createElement(Icon,{name:"icon-gui-arrow-long-right-outline",size:`calc(var(--featured-link-icon-size) * 1.25)`,color:iconColor,additionalCSS:cn("align-middle mr-8 relative -top-1 -right-4 transition-[right] transform rotate-180",{"group-hover/featured-link:right-0":!disabled})}),children):React.createElement(React.Fragment,null,children,React.createElement(Icon,{name:"icon-gui-arrow-long-right-outline",size:`calc(var(--featured-link-icon-size) * 1.25)`,color:iconColor,additionalCSS:cn("align-middle ml-8 relative -top-1 -left-4 transition-[left]",{"group-hover/featured-link:left-0":!disabled})})))};export default FeaturedLink;
+import React from"react";import Icon from"./Icon";import cn from"./utils/cn";const buildTargetAndRel=(url,newWindow)=>{const props={};if(newWindow){props.target="_blank";if(url.startsWith("/")&&!url.startsWith("//")){props.rel="noopener"}else{props.rel="noopenner noreferrer"}}return props};const FeaturedLink=({url,textSize="text-p2",iconColor,flush=false,reverse=false,additionalCSS="",newWindow=false,onClick=undefined,children,disabled=false,iconClassName=""})=>{const targetAndRel=buildTargetAndRel(url,newWindow);return React.createElement("a",{...onClick?{}:{href:url},className:cn("font-sans font-bold block group/featured-link",{"text-gui-unavailable pointer-events-none":disabled},{"text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-none focus-visible:outline-gui-focus":!disabled},{"py-8":!flush},`ui-${textSize}`,additionalCSS),style:{"--featured-link-icon-size":`var(${textSize.replace("text","--fs")})`},...targetAndRel,onClick:onClick},reverse?React.createElement(React.Fragment,null,React.createElement(Icon,{name:"icon-gui-arrow-long-right-outline",size:`calc(var(--featured-link-icon-size) * 1.25)`,color:iconColor,additionalCSS:cn("align-middle mr-8 relative -top-1 -right-4 transition-[right] transform rotate-180",{"group-hover/featured-link:right-0":!disabled},iconClassName)}),children):React.createElement(React.Fragment,null,children,React.createElement(Icon,{name:"icon-gui-arrow-long-right-outline",size:`calc(var(--featured-link-icon-size) * 1.25)`,color:iconColor,additionalCSS:cn("align-middle ml-8 relative -top-1 -left-4 transition-[left]",{"group-hover/featured-link:left-0":!disabled},iconClassName)})))};export default FeaturedLink;
 //# sourceMappingURL=FeaturedLink.js.map

package/core/FeaturedLink.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/core/FeaturedLink.tsx"],"sourcesContent":["import React, { CSSProperties, ReactNode } from \"react\";\n\nimport Icon from \"./Icon\";\nimport { ColorClass, ColorThemeSet } from \"./styles/colors/types\";\nimport cn from \"./utils/cn\";\n\ntype FeaturedLinkProps = {\n  url: string;\n  children: ReactNode;\n  textSize?: string;\n  iconColor?: ColorClass | ColorThemeSet;\n  flush?: boolean;\n  reverse?: boolean;\n  additionalCSS?: string;\n  newWindow?: boolean;\n  onClick?: () => void;\n  disabled?: boolean;\n};\n\ntype TargetProps = { target?: string; rel?: string };\n\n// When generating links with target=_blank, we only add `noreferrer` to\n// links that don't start with `/`, so we can continue tracking referrers\n// across our own domains\nconst buildTargetAndRel = (url: string, newWindow: boolean) => {\n  const props: TargetProps = {};\n\n  if (newWindow) {\n    props.target = \"_blank\";\n\n    if (url.startsWith(\"/\") && !url.startsWith(\"//\")) {\n      props.rel = \"noopener\";\n    } else {\n      props.rel = \"noopenner noreferrer\";\n    }\n  }\n\n  return props;\n};\n\nconst FeaturedLink = ({\n  url,\n  textSize = \"text-p2\",\n  iconColor,\n  flush = false,\n  reverse = false,\n  additionalCSS = \"\",\n  newWindow = false,\n  onClick = undefined,\n  children,\n  disabled = false,\n}: FeaturedLinkProps) => {\n  const targetAndRel = buildTargetAndRel(url, newWindow);\n\n  return (\n    <a\n      {...(onClick ? {} : { href: url })}\n      className={cn(\n        \"font-sans font-bold block group/featured-link\",\n        { \"text-gui-unavailable pointer-events-none\": disabled },\n        {\n          \"text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-none focus-visible:outline-gui-focus\":\n            !disabled,\n        },\n        { \"py-8\": !flush },\n        `ui-${textSize}`,\n        additionalCSS,\n      )}\n      style={\n        {\n          \"--featured-link-icon-size\": `var(${textSize.replace(\n            \"text\",\n            \"--fs\",\n          )})`,\n        } as CSSProperties\n      }\n      {...targetAndRel}\n      onClick={onClick}\n    >\n      {reverse ? (\n        <>\n          <Icon\n            name=\"icon-gui-arrow-long-right-outline\"\n            size={`calc(var(--featured-link-icon-size) * 1.25)`}\n            color={iconColor}\n            additionalCSS={cn(\n              \"align-middle mr-8 relative -top-1 -right-4 transition-[right] transform rotate-180\",\n              { \"group-hover/featured-link:right-0\": !disabled },\n            )}\n          />\n          {children}\n        </>\n      ) : (\n        <>\n          {children}\n          <Icon\n            name=\"icon-gui-arrow-long-right-outline\"\n            size={`calc(var(--featured-link-icon-size) * 1.25)`}\n            color={iconColor}\n            additionalCSS={cn(\n              \"align-middle ml-8 relative -top-1 -left-4 transition-[left]\",\n              { \"group-hover/featured-link:left-0\": !disabled },\n            )}\n          />\n        </>\n      )}\n    </a>\n  );\n};\n\nexport default FeaturedLink;\n"],"names":["React","Icon","cn","buildTargetAndRel","url","newWindow","props","target","startsWith","rel","FeaturedLink","textSize","iconColor","flush","reverse","additionalCSS","onClick","undefined","children","disabled","targetAndRel","a","href","className","style","replace","name","size","color"],"mappings":"AAAA,OAAOA,UAAyC,OAAQ,AAExD,QAAOC,SAAU,QAAS,AAE1B,QAAOC,OAAQ,YAAa,CAoB5B,MAAMC,kBAAoB,CAACC,IAAaC,aACtC,MAAMC,MAAqB,CAAC,EAE5B,GAAID,UAAW,CACbC,MAAMC,MAAM,CAAG,SAEf,GAAIH,IAAII,UAAU,CAAC,MAAQ,CAACJ,IAAII,UAAU,CAAC,MAAO,CAChDF,MAAMG,GAAG,CAAG,UACd,KAAO,CACLH,MAAMG,GAAG,CAAG,sBACd,CACF,CAEA,OAAOH,KACT,EAEA,MAAMI,aAAe,CAAC,CACpBN,GAAG,CACHO,SAAW,SAAS,CACpBC,SAAS,CACTC,MAAQ,KAAK,CACbC,QAAU,KAAK,CACfC,cAAgB,EAAE,CAClBV,UAAY,KAAK,CACjBW,QAAUC,SAAS,CACnBC,QAAQ,CACRC,SAAW,KAAK,CACE,IAClB,MAAMC,aAAejB,kBAAkBC,IAAKC,WAE5C,OACE,oBAACgB,KACE,GAAIL,QAAU,CAAC,EAAI,CAAEM,KAAMlB,GAAI,CAAC,CACjCmB,UAAWrB,GACT,gDACA,CAAE,2CAA4CiB,QAAS,EACvD,CACE,gHACE,CAACA,QACL,EACA,CAAE,OAAQ,CAACN,KAAM,EACjB,CAAC,GAAG,EAAEF,SAAS,CAAC,CAChBI,eAEFS,MACE,CACE,4BAA6B,CAAC,IAAI,EAAEb,SAASc,OAAO,CAClD,OACA,QACA,CAAC,CAAC,AACN,EAED,GAAGL,YAAY,CAChBJ,QAASA,SAERF,QACC,wCACE,oBAACb,MACCyB,KAAK,oCACLC,KAAM,CAAC,2CAA2C,CAAC,CACnDC,MAAOhB,UACPG,cAAeb,GACb,qFACA,CAAE,oCAAqC,CAACiB,QAAS,KAGpDD,UAGH,wCACGA,SACD,oBAACjB,MACCyB,KAAK,oCACLC,KAAM,CAAC,2CAA2C,CAAC,CACnDC,MAAOhB,UACPG,cAAeb,GACb,8DACA,CAAE,mCAAoC,CAACiB,QAAS,MAO9D,CAEA,gBAAeT,YAAa"}
+{"version":3,"sources":["../../src/core/FeaturedLink.tsx"],"sourcesContent":["import React, { CSSProperties, ReactNode } from \"react\";\n\nimport Icon from \"./Icon\";\nimport { ColorClass, ColorThemeSet } from \"./styles/colors/types\";\nimport cn from \"./utils/cn\";\n\ntype FeaturedLinkProps = {\n  url: string;\n  children: ReactNode;\n  textSize?: string;\n  iconColor?: ColorClass | ColorThemeSet;\n  flush?: boolean;\n  reverse?: boolean;\n  additionalCSS?: string;\n  newWindow?: boolean;\n  onClick?: () => void;\n  disabled?: boolean;\n  /**\n   * Optional class name for the icon.\n   */\n  iconClassName?: string;\n};\n\ntype TargetProps = { target?: string; rel?: string };\n\n// When generating links with target=_blank, we only add `noreferrer` to\n// links that don't start with `/`, so we can continue tracking referrers\n// across our own domains\nconst buildTargetAndRel = (url: string, newWindow: boolean) => {\n  const props: TargetProps = {};\n\n  if (newWindow) {\n    props.target = \"_blank\";\n\n    if (url.startsWith(\"/\") && !url.startsWith(\"//\")) {\n      props.rel = \"noopener\";\n    } else {\n      props.rel = \"noopenner noreferrer\";\n    }\n  }\n\n  return props;\n};\n\nconst FeaturedLink = ({\n  url,\n  textSize = \"text-p2\",\n  iconColor,\n  flush = false,\n  reverse = false,\n  additionalCSS = \"\",\n  newWindow = false,\n  onClick = undefined,\n  children,\n  disabled = false,\n  iconClassName = \"\",\n}: FeaturedLinkProps) => {\n  const targetAndRel = buildTargetAndRel(url, newWindow);\n\n  return (\n    <a\n      {...(onClick ? {} : { href: url })}\n      className={cn(\n        \"font-sans font-bold block group/featured-link\",\n        { \"text-gui-unavailable pointer-events-none\": disabled },\n        {\n          \"text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-none focus-visible:outline-gui-focus\":\n            !disabled,\n        },\n        { \"py-8\": !flush },\n        `ui-${textSize}`,\n        additionalCSS,\n      )}\n      style={\n        {\n          \"--featured-link-icon-size\": `var(${textSize.replace(\n            \"text\",\n            \"--fs\",\n          )})`,\n        } as CSSProperties\n      }\n      {...targetAndRel}\n      onClick={onClick}\n    >\n      {reverse ? (\n        <>\n          <Icon\n            name=\"icon-gui-arrow-long-right-outline\"\n            size={`calc(var(--featured-link-icon-size) * 1.25)`}\n            color={iconColor}\n            additionalCSS={cn(\n              \"align-middle mr-8 relative -top-1 -right-4 transition-[right] transform rotate-180\",\n              { \"group-hover/featured-link:right-0\": !disabled },\n              iconClassName,\n            )}\n          />\n          {children}\n        </>\n      ) : (\n        <>\n          {children}\n          <Icon\n            name=\"icon-gui-arrow-long-right-outline\"\n            size={`calc(var(--featured-link-icon-size) * 1.25)`}\n            color={iconColor}\n            additionalCSS={cn(\n              \"align-middle ml-8 relative -top-1 -left-4 transition-[left]\",\n              {\n                \"group-hover/featured-link:left-0\": !disabled,\n              },\n              iconClassName,\n            )}\n          />\n        </>\n      )}\n    </a>\n  );\n};\n\nexport default FeaturedLink;\n"],"names":["React","Icon","cn","buildTargetAndRel","url","newWindow","props","target","startsWith","rel","FeaturedLink","textSize","iconColor","flush","reverse","additionalCSS","onClick","undefined","children","disabled","iconClassName","targetAndRel","a","href","className","style","replace","name","size","color"],"mappings":"AAAA,OAAOA,UAAyC,OAAQ,AAExD,QAAOC,SAAU,QAAS,AAE1B,QAAOC,OAAQ,YAAa,CAwB5B,MAAMC,kBAAoB,CAACC,IAAaC,aACtC,MAAMC,MAAqB,CAAC,EAE5B,GAAID,UAAW,CACbC,MAAMC,MAAM,CAAG,SAEf,GAAIH,IAAII,UAAU,CAAC,MAAQ,CAACJ,IAAII,UAAU,CAAC,MAAO,CAChDF,MAAMG,GAAG,CAAG,UACd,KAAO,CACLH,MAAMG,GAAG,CAAG,sBACd,CACF,CAEA,OAAOH,KACT,EAEA,MAAMI,aAAe,CAAC,CACpBN,GAAG,CACHO,SAAW,SAAS,CACpBC,SAAS,CACTC,MAAQ,KAAK,CACbC,QAAU,KAAK,CACfC,cAAgB,EAAE,CAClBV,UAAY,KAAK,CACjBW,QAAUC,SAAS,CACnBC,QAAQ,CACRC,SAAW,KAAK,CAChBC,cAAgB,EAAE,CACA,IAClB,MAAMC,aAAelB,kBAAkBC,IAAKC,WAE5C,OACE,oBAACiB,KACE,GAAIN,QAAU,CAAC,EAAI,CAAEO,KAAMnB,GAAI,CAAC,CACjCoB,UAAWtB,GACT,gDACA,CAAE,2CAA4CiB,QAAS,EACvD,CACE,gHACE,CAACA,QACL,EACA,CAAE,OAAQ,CAACN,KAAM,EACjB,CAAC,GAAG,EAAEF,SAAS,CAAC,CAChBI,eAEFU,MACE,CACE,4BAA6B,CAAC,IAAI,EAAEd,SAASe,OAAO,CAClD,OACA,QACA,CAAC,CAAC,AACN,EAED,GAAGL,YAAY,CAChBL,QAASA,SAERF,QACC,wCACE,oBAACb,MACC0B,KAAK,oCACLC,KAAM,CAAC,2CAA2C,CAAC,CACnDC,MAAOjB,UACPG,cAAeb,GACb,qFACA,CAAE,oCAAqC,CAACiB,QAAS,EACjDC,iBAGHF,UAGH,wCACGA,SACD,oBAACjB,MACC0B,KAAK,oCACLC,KAAM,CAAC,2CAA2C,CAAC,CACnDC,MAAOjB,UACPG,cAAeb,GACb,8DACA,CACE,mCAAoC,CAACiB,QACvC,EACAC,kBAOd,CAEA,gBAAeV,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:bg-neutral-100 dark:hover:bg-neutral-1200 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)}});const Flyout=({menuItems,className,flyOutClassName,menuLinkClassName,viewPortClassName,hasAnimation})=>{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(({label,content,link,panelClassName})=>content?React.createElement(NavigationMenuItem,{key:label},React.createElement(NavigationMenuTrigger,{className:cn("group outline-none focus:outline-none select-none cursor-pointer relative",DEFAULT_MENU_LINK_STYLING,menuLinkClassName)},label),React.createElement(NavigationMenuContent,{className:cn("absolute inset-x-0 top-0 p-24 z-10",hasAnimation&&PANEL_ANIMATION,panelClassName)},content)):React.createElement(NavigationMenuLink,{key:label},React.createElement("a",{href:link,className:cn(DEFAULT_MENU_LINK_STYLING,menuLinkClassName)},label)))),React.createElement("div",{className:cn("absolute left-0 top-full",flyOutClassName)},React.createElement(NavigationMenuViewport,{className:cn(DEFAULT_VIEWPORT_STYLING,viewPortClassName)}))),isOpen?React.createElement(FlyOverlay,{className:"bg-neutral-1300 dark:bg-neutral-000 opacity-10 z-20 h-screen",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     * Label for the menu item.\n     */\n    label: 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   * Flag to indicate if animation should be applied.\n   */\n  hasAnimation: boolean;\n};\n\nconst DEFAULT_MENU_LINK_STYLING =\n  \"ui-text-menu3 font-bold text-neutral-1000 dark:neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-1200 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) }}\n  ></div>\n);\n\nconst Flyout = ({\n  menuItems,\n  className,\n  flyOutClassName,\n  menuLinkClassName,\n  viewPortClassName,\n  hasAnimation,\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(({ label, content, link, panelClassName }) =>\n            content ? (\n              <NavigationMenuItem key={label}>\n                <NavigationMenuTrigger\n                  className={cn(\n                    \"group outline-none focus:outline-none select-none cursor-pointer relative\",\n                    DEFAULT_MENU_LINK_STYLING,\n                    menuLinkClassName,\n                  )}\n                >\n                  {label}\n                </NavigationMenuTrigger>\n                <NavigationMenuContent\n                  className={cn(\n                    \"absolute inset-x-0 top-0 p-24 z-10\",\n                    hasAnimation && PANEL_ANIMATION,\n                    panelClassName,\n                  )}\n                >\n                  {content}\n                </NavigationMenuContent>\n              </NavigationMenuItem>\n            ) : (\n              <NavigationMenuLink key={label}>\n                <a\n                  href={link}\n                  className={cn(DEFAULT_MENU_LINK_STYLING, menuLinkClassName)}\n                >\n                  {label}\n                </a>\n              </NavigationMenuLink>\n            ),\n          )}\n        </NavigationMenuList>\n\n        <div className={cn(\"absolute left-0 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 dark:bg-neutral-000 opacity-10 z-20 h-screen\"\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","Flyout","menuItems","flyOutClassName","menuLinkClassName","viewPortClassName","hasAnimation","isOpen","setIsOpen","setFadingOut","closeMenu","setTimeout","onValueChange","val","delayDuration","map","label","content","link","panelClassName","key","a","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,CAiDpE,MAAMC,0BACJ,8MACF,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,cAAe,IAIvD,MAAMU,OAAS,CAAC,CACdC,SAAS,CACTN,SAAS,CACTO,eAAe,CACfC,iBAAiB,CACjBC,iBAAiB,CACjBC,YAAY,CACA,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,yBAC3BM,UAAUa,GAAG,CAAC,CAAC,CAAEC,KAAK,CAAEC,OAAO,CAAEC,IAAI,CAAEC,cAAc,CAAE,GACtDF,QACE,oBAAClC,oBAAmBqC,IAAKJ,OACvB,oBAAC/B,uBACCW,UAAWP,GACT,4EACAG,0BACAY,oBAGDY,OAEH,oBAAC9B,uBACCU,UAAWP,GACT,qCACAiB,cAAgBZ,gBAChByB,iBAGDF,UAIL,oBAAC7B,oBAAmBgC,IAAKJ,OACvB,oBAACK,KACCC,KAAMJ,KACNtB,UAAWP,GAAGG,0BAA2BY,oBAExCY,UAOX,oBAAClB,OAAIF,UAAWP,GAAG,2BAA4Bc,kBAC7C,oBAAChB,wBACCS,UAAWP,GAAGI,yBAA0BY,uBAI7CE,OACC,oBAACZ,YACCC,UAAU,+DACVC,UAAWA,YAEX,KAGV,CAEA,gBAAeI,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/data.js

@@ -1,2 +1,2 @@
-import BestRequirementsWinter2025 from"../images/g2-best-meets-requirements-2025.svg";import BestSupportWinter2025 from"../images/g2-best-support-2025.svg";import HighPerformerWinter2025 from"../images/g2-high-performer-2025.svg";import UsersMostLikelyToRecommend from"../images/g2-users-most-likely-to-recommend-2025.svg";export const footerLinks=[{title:"Products",links:[{label:"Ably Pub/Sub",link:"/pubsub"},{label:"Ably LiveSync",link:"/livesync"},{label:"Ably Chat",link:"/chat"},{label:"Ably Spaces",link:"/spaces"},{label:"Ably Asset Tracking",link:"/docs/asset-tracking"},{label:"Compare our tech",link:"/compare"}]},{title:"Platform",links:[{label:"Infrastructure",link:"/four-pillars-of-dependability"},{label:"Integrations",link:"/integrations"},{label:"SDKs",link:"/docs/sdks"},{label:"Changelog",link:"https://changelog.ably.com/"},{label:"Security & Compliance",link:"/"}]},{title:"Get started",links:[{label:"Documentation",link:"/docs"},{label:"Examples",link:"/examples"},{label:"Pricing",link:"/pricing"},{label:"Realtime A-Z",link:"/topics"},{label:"Support",link:"/support"}]},{title:"Company",links:[{label:"About Ably",link:"/about"},{label:"Blog",link:"/blog"},{label:"Careers",link:"/careers",badge:"WE’RE HIRING"},{label:"Contact us",link:"/contact"}]}];export const bottomFooterLinks=[{label:"Data protection",link:"/data-protection"},{label:"Privacy",link:"/privacy"},{label:"Legals",link:"/legals"},{label:"Cookies",link:"/privacy"}];export const socialLinks=[{key:"x",colorIcon:"icon-social-x",monoIcon:"icon-social-x-mono",link:"https://x.com/ablyrealtime"},{key:"linkedin",colorIcon:"icon-social-linkedin",monoIcon:"icon-social-linkedin-mono",link:"https://www.linkedin.com/company/ably-realtime"},{key:"github",colorIcon:"icon-social-github",monoIcon:"icon-social-github-mono",link:"https://github.com/ably/"},{key:"discord",colorIcon:"icon-social-discord",monoIcon:"icon-social-discord-mono",link:"https://discord.gg/g8yqePUVDn"},{key:"youtube",colorIcon:"icon-social-youtube",monoIcon:"icon-social-youtube-mono",link:"https://www.youtube.com/c/AblyRealtime"}];export const ablyAwards=[{image:BestRequirementsWinter2025,desc:"G2 Best Requirements Winter 2025"},{image:BestSupportWinter2025,desc:"G2 Best Support Winter 2025"},{image:HighPerformerWinter2025,desc:"G2 High Performer Winter 2025"},{image:UsersMostLikelyToRecommend,desc:"G2 Users Most Likely to Recommend Winter 2025"}];
+export const footerLinks=[{title:"Products",links:[{label:"Ably Pub/Sub",link:"/pubsub"},{label:"Ably LiveSync",link:"/livesync"},{label:"Ably Chat",link:"/chat"},{label:"Ably Spaces",link:"/spaces"},{label:"Ably Asset Tracking",link:"/solutions/asset-tracking"},{label:"Compare our tech",link:"/compare"}]},{title:"Platform",links:[{label:"Infrastructure",link:"/four-pillars-of-dependability"},{label:"Integrations",link:"/integrations"},{label:"SDKs",link:"/docs/sdks"},{label:"Changelog",link:"https://changelog.ably.com/"},{label:"Security & Compliance",link:"/security-and-compliance"}]},{title:"Get started",links:[{label:"Documentation",link:"/docs"},{label:"Examples",link:"/examples"},{label:"Pricing",link:"/pricing"},{label:"Realtime A-Z",link:"/topics"},{label:"Support",link:"/support"}]},{title:"Company",links:[{label:"About Ably",link:"/about"},{label:"Blog",link:"/blog"},{label:"Careers",link:"/careers",badge:"WE’RE HIRING"},{label:"Contact us",link:"/contact"}]}];export const bottomFooterLinks=[{label:"Data protection",link:"/data-protection"},{label:"Privacy",link:"/privacy"},{label:"Legals",link:"/legals"},{label:"Cookies",link:"/privacy"}];export const socialLinks=[{key:"x",colorIcon:"icon-social-x",monoIcon:"icon-social-x-mono",link:"https://x.com/ablyrealtime"},{key:"linkedin",colorIcon:"icon-social-linkedin",monoIcon:"icon-social-linkedin-mono",link:"https://www.linkedin.com/company/ably-realtime"},{key:"github",colorIcon:"icon-social-github",monoIcon:"icon-social-github-mono",link:"https://github.com/ably/"},{key:"discord",colorIcon:"icon-social-discord",monoIcon:"icon-social-discord-mono",link:"https://discord.gg/g8yqePUVDn"},{key:"youtube",colorIcon:"icon-social-youtube",monoIcon:"icon-social-youtube-mono",link:"https://www.youtube.com/c/AblyRealtime"}];
 //# sourceMappingURL=data.js.map

package/core/Footer/data.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/core/Footer/data.ts"],"sourcesContent":["import { IconName } from \"../Icon/types\";\nimport BestRequirementsWinter2025 from \"../images/g2-best-meets-requirements-2025.svg\";\nimport BestSupportWinter2025 from \"../images/g2-best-support-2025.svg\";\nimport HighPerformerWinter2025 from \"../images/g2-high-performer-2025.svg\";\nimport UsersMostLikelyToRecommend from \"../images/g2-users-most-likely-to-recommend-2025.svg\";\n\ntype FooterLinksProps = {\n  title: string;\n  links: {\n    label: string;\n    link: string;\n    badge?: string;\n  }[];\n};\n\nexport const footerLinks: FooterLinksProps[] = [\n  {\n    title: \"Products\",\n    links: [\n      { label: \"Ably Pub/Sub\", link: \"/pubsub\" },\n      { label: \"Ably LiveSync\", link: \"/livesync\" },\n      { label: \"Ably Chat\", link: \"/chat\" },\n      { label: \"Ably Spaces\", link: \"/spaces\" },\n      { label: \"Ably Asset Tracking\", link: \"/docs/asset-tracking\" },\n      { label: \"Compare our tech\", link: \"/compare\" },\n    ],\n  },\n  {\n    title: \"Platform\",\n    links: [\n      { label: \"Infrastructure\", link: \"/four-pillars-of-dependability\" },\n      { label: \"Integrations\", link: \"/integrations\" },\n      { label: \"SDKs\", link: \"/docs/sdks\" },\n      { label: \"Changelog\", link: \"https://changelog.ably.com/\" },\n      { label: \"Security & Compliance\", link: \"/\" },\n    ],\n  },\n  {\n    title: \"Get started\",\n    links: [\n      { label: \"Documentation\", link: \"/docs\" },\n      { label: \"Examples\", link: \"/examples\" },\n      { label: \"Pricing\", link: \"/pricing\" },\n      { label: \"Realtime A-Z\", link: \"/topics\" },\n      { label: \"Support\", link: \"/support\" },\n    ],\n  },\n  {\n    title: \"Company\",\n    links: [\n      { label: \"About Ably\", link: \"/about\" },\n      { label: \"Blog\", link: \"/blog\" },\n      { label: \"Careers\", link: \"/careers\", badge: \"WE’RE HIRING\" },\n      { label: \"Contact us\", link: \"/contact\" },\n    ],\n  },\n];\n\nexport const bottomFooterLinks = [\n  { label: \"Data protection\", link: \"/data-protection\" },\n  { label: \"Privacy\", link: \"/privacy\" },\n  { label: \"Legals\", link: \"/legals\" },\n  { label: \"Cookies\", link: \"/privacy\" },\n];\n\nexport const socialLinks: {\n  key: string;\n  colorIcon: IconName;\n  monoIcon: IconName;\n  link: string;\n}[] = [\n  {\n    key: \"x\",\n    colorIcon: \"icon-social-x\",\n    monoIcon: \"icon-social-x-mono\",\n    link: \"https://x.com/ablyrealtime\",\n  },\n  {\n    key: \"linkedin\",\n    colorIcon: \"icon-social-linkedin\",\n    monoIcon: \"icon-social-linkedin-mono\",\n    link: \"https://www.linkedin.com/company/ably-realtime\",\n  },\n  {\n    key: \"github\",\n    colorIcon: \"icon-social-github\",\n    monoIcon: \"icon-social-github-mono\",\n    link: \"https://github.com/ably/\",\n  },\n  {\n    key: \"discord\",\n    colorIcon: \"icon-social-discord\",\n    monoIcon: \"icon-social-discord-mono\",\n    link: \"https://discord.gg/g8yqePUVDn\",\n  },\n  {\n    key: \"youtube\",\n    colorIcon: \"icon-social-youtube\",\n    monoIcon: \"icon-social-youtube-mono\",\n    link: \"https://www.youtube.com/c/AblyRealtime\",\n  },\n];\n\nexport const ablyAwards = [\n  {\n    image: BestRequirementsWinter2025,\n    desc: \"G2 Best Requirements Winter 2025\",\n  },\n  {\n    image: BestSupportWinter2025,\n    desc: \"G2 Best Support Winter 2025\",\n  },\n  {\n    image: HighPerformerWinter2025,\n    desc: \"G2 High Performer Winter 2025\",\n  },\n  {\n    image: UsersMostLikelyToRecommend,\n    desc: \"G2 Users Most Likely to Recommend Winter 2025\",\n  },\n];\n"],"names":["BestRequirementsWinter2025","BestSupportWinter2025","HighPerformerWinter2025","UsersMostLikelyToRecommend","footerLinks","title","links","label","link","badge","bottomFooterLinks","socialLinks","key","colorIcon","monoIcon","ablyAwards","image","desc"],"mappings":"AACA,OAAOA,+BAAgC,+CAAgD,AACvF,QAAOC,0BAA2B,oCAAqC,AACvE,QAAOC,4BAA6B,sCAAuC,AAC3E,QAAOC,+BAAgC,sDAAuD,AAW9F,QAAO,MAAMC,YAAkC,CAC7C,CACEC,MAAO,WACPC,MAAO,CACL,CAAEC,MAAO,eAAgBC,KAAM,SAAU,EACzC,CAAED,MAAO,gBAAiBC,KAAM,WAAY,EAC5C,CAAED,MAAO,YAAaC,KAAM,OAAQ,EACpC,CAAED,MAAO,cAAeC,KAAM,SAAU,EACxC,CAAED,MAAO,sBAAuBC,KAAM,sBAAuB,EAC7D,CAAED,MAAO,mBAAoBC,KAAM,UAAW,EAC/C,AACH,EACA,CACEH,MAAO,WACPC,MAAO,CACL,CAAEC,MAAO,iBAAkBC,KAAM,gCAAiC,EAClE,CAAED,MAAO,eAAgBC,KAAM,eAAgB,EAC/C,CAAED,MAAO,OAAQC,KAAM,YAAa,EACpC,CAAED,MAAO,YAAaC,KAAM,6BAA8B,EAC1D,CAAED,MAAO,wBAAyBC,KAAM,GAAI,EAC7C,AACH,EACA,CACEH,MAAO,cACPC,MAAO,CACL,CAAEC,MAAO,gBAAiBC,KAAM,OAAQ,EACxC,CAAED,MAAO,WAAYC,KAAM,WAAY,EACvC,CAAED,MAAO,UAAWC,KAAM,UAAW,EACrC,CAAED,MAAO,eAAgBC,KAAM,SAAU,EACzC,CAAED,MAAO,UAAWC,KAAM,UAAW,EACtC,AACH,EACA,CACEH,MAAO,UACPC,MAAO,CACL,CAAEC,MAAO,aAAcC,KAAM,QAAS,EACtC,CAAED,MAAO,OAAQC,KAAM,OAAQ,EAC/B,CAAED,MAAO,UAAWC,KAAM,WAAYC,MAAO,cAAe,EAC5D,CAAEF,MAAO,aAAcC,KAAM,UAAW,EACzC,AACH,EACD,AAAC,AAEF,QAAO,MAAME,kBAAoB,CAC/B,CAAEH,MAAO,kBAAmBC,KAAM,kBAAmB,EACrD,CAAED,MAAO,UAAWC,KAAM,UAAW,EACrC,CAAED,MAAO,SAAUC,KAAM,SAAU,EACnC,CAAED,MAAO,UAAWC,KAAM,UAAW,EACtC,AAAC,AAEF,QAAO,MAAMG,YAKP,CACJ,CACEC,IAAK,IACLC,UAAW,gBACXC,SAAU,qBACVN,KAAM,4BACR,EACA,CACEI,IAAK,WACLC,UAAW,uBACXC,SAAU,4BACVN,KAAM,gDACR,EACA,CACEI,IAAK,SACLC,UAAW,qBACXC,SAAU,0BACVN,KAAM,0BACR,EACA,CACEI,IAAK,UACLC,UAAW,sBACXC,SAAU,2BACVN,KAAM,+BACR,EACA,CACEI,IAAK,UACLC,UAAW,sBACXC,SAAU,2BACVN,KAAM,wCACR,EACD,AAAC,AAEF,QAAO,MAAMO,WAAa,CACxB,CACEC,MAAOhB,2BACPiB,KAAM,kCACR,EACA,CACED,MAAOf,sBACPgB,KAAM,6BACR,EACA,CACED,MAAOd,wBACPe,KAAM,+BACR,EACA,CACED,MAAOb,2BACPc,KAAM,+CACR,EACD,AAAC"}
+{"version":3,"sources":["../../../src/core/Footer/data.ts"],"sourcesContent":["import { IconName } from \"../Icon/types\";\n\ntype FooterLinksProps = {\n  title: string;\n  links: {\n    label: string;\n    link: string;\n    badge?: string;\n  }[];\n};\n\nexport const footerLinks: FooterLinksProps[] = [\n  {\n    title: \"Products\",\n    links: [\n      { label: \"Ably Pub/Sub\", link: \"/pubsub\" },\n      { label: \"Ably LiveSync\", link: \"/livesync\" },\n      { label: \"Ably Chat\", link: \"/chat\" },\n      { label: \"Ably Spaces\", link: \"/spaces\" },\n      { label: \"Ably Asset Tracking\", link: \"/solutions/asset-tracking\" },\n      { label: \"Compare our tech\", link: \"/compare\" },\n    ],\n  },\n  {\n    title: \"Platform\",\n    links: [\n      { label: \"Infrastructure\", link: \"/four-pillars-of-dependability\" },\n      { label: \"Integrations\", link: \"/integrations\" },\n      { label: \"SDKs\", link: \"/docs/sdks\" },\n      { label: \"Changelog\", link: \"https://changelog.ably.com/\" },\n      { label: \"Security & Compliance\", link: \"/security-and-compliance\" },\n    ],\n  },\n  {\n    title: \"Get started\",\n    links: [\n      { label: \"Documentation\", link: \"/docs\" },\n      { label: \"Examples\", link: \"/examples\" },\n      { label: \"Pricing\", link: \"/pricing\" },\n      { label: \"Realtime A-Z\", link: \"/topics\" },\n      { label: \"Support\", link: \"/support\" },\n    ],\n  },\n  {\n    title: \"Company\",\n    links: [\n      { label: \"About Ably\", link: \"/about\" },\n      { label: \"Blog\", link: \"/blog\" },\n      { label: \"Careers\", link: \"/careers\", badge: \"WE’RE HIRING\" },\n      { label: \"Contact us\", link: \"/contact\" },\n    ],\n  },\n];\n\nexport const bottomFooterLinks = [\n  { label: \"Data protection\", link: \"/data-protection\" },\n  { label: \"Privacy\", link: \"/privacy\" },\n  { label: \"Legals\", link: \"/legals\" },\n  { label: \"Cookies\", link: \"/privacy\" },\n];\n\nexport const socialLinks: {\n  key: string;\n  colorIcon: IconName;\n  monoIcon: IconName;\n  link: string;\n}[] = [\n  {\n    key: \"x\",\n    colorIcon: \"icon-social-x\",\n    monoIcon: \"icon-social-x-mono\",\n    link: \"https://x.com/ablyrealtime\",\n  },\n  {\n    key: \"linkedin\",\n    colorIcon: \"icon-social-linkedin\",\n    monoIcon: \"icon-social-linkedin-mono\",\n    link: \"https://www.linkedin.com/company/ably-realtime\",\n  },\n  {\n    key: \"github\",\n    colorIcon: \"icon-social-github\",\n    monoIcon: \"icon-social-github-mono\",\n    link: \"https://github.com/ably/\",\n  },\n  {\n    key: \"discord\",\n    colorIcon: \"icon-social-discord\",\n    monoIcon: \"icon-social-discord-mono\",\n    link: \"https://discord.gg/g8yqePUVDn\",\n  },\n  {\n    key: \"youtube\",\n    colorIcon: \"icon-social-youtube\",\n    monoIcon: \"icon-social-youtube-mono\",\n    link: \"https://www.youtube.com/c/AblyRealtime\",\n  },\n];\n"],"names":["footerLinks","title","links","label","link","badge","bottomFooterLinks","socialLinks","key","colorIcon","monoIcon"],"mappings":"AAWA,OAAO,MAAMA,YAAkC,CAC7C,CACEC,MAAO,WACPC,MAAO,CACL,CAAEC,MAAO,eAAgBC,KAAM,SAAU,EACzC,CAAED,MAAO,gBAAiBC,KAAM,WAAY,EAC5C,CAAED,MAAO,YAAaC,KAAM,OAAQ,EACpC,CAAED,MAAO,cAAeC,KAAM,SAAU,EACxC,CAAED,MAAO,sBAAuBC,KAAM,2BAA4B,EAClE,CAAED,MAAO,mBAAoBC,KAAM,UAAW,EAC/C,AACH,EACA,CACEH,MAAO,WACPC,MAAO,CACL,CAAEC,MAAO,iBAAkBC,KAAM,gCAAiC,EAClE,CAAED,MAAO,eAAgBC,KAAM,eAAgB,EAC/C,CAAED,MAAO,OAAQC,KAAM,YAAa,EACpC,CAAED,MAAO,YAAaC,KAAM,6BAA8B,EAC1D,CAAED,MAAO,wBAAyBC,KAAM,0BAA2B,EACpE,AACH,EACA,CACEH,MAAO,cACPC,MAAO,CACL,CAAEC,MAAO,gBAAiBC,KAAM,OAAQ,EACxC,CAAED,MAAO,WAAYC,KAAM,WAAY,EACvC,CAAED,MAAO,UAAWC,KAAM,UAAW,EACrC,CAAED,MAAO,eAAgBC,KAAM,SAAU,EACzC,CAAED,MAAO,UAAWC,KAAM,UAAW,EACtC,AACH,EACA,CACEH,MAAO,UACPC,MAAO,CACL,CAAEC,MAAO,aAAcC,KAAM,QAAS,EACtC,CAAED,MAAO,OAAQC,KAAM,OAAQ,EAC/B,CAAED,MAAO,UAAWC,KAAM,WAAYC,MAAO,cAAe,EAC5D,CAAEF,MAAO,aAAcC,KAAM,UAAW,EACzC,AACH,EACD,AAAC,AAEF,QAAO,MAAME,kBAAoB,CAC/B,CAAEH,MAAO,kBAAmBC,KAAM,kBAAmB,EACrD,CAAED,MAAO,UAAWC,KAAM,UAAW,EACrC,CAAED,MAAO,SAAUC,KAAM,SAAU,EACnC,CAAED,MAAO,UAAWC,KAAM,UAAW,EACtC,AAAC,AAEF,QAAO,MAAMG,YAKP,CACJ,CACEC,IAAK,IACLC,UAAW,gBACXC,SAAU,qBACVN,KAAM,4BACR,EACA,CACEI,IAAK,WACLC,UAAW,uBACXC,SAAU,4BACVN,KAAM,gDACR,EACA,CACEI,IAAK,SACLC,UAAW,qBACXC,SAAU,0BACVN,KAAM,0BACR,EACA,CACEI,IAAK,UACLC,UAAW,sBACXC,SAAU,2BACVN,KAAM,+BACR,EACA,CACEI,IAAK,UACLC,UAAW,sBACXC,SAAU,2BACVN,KAAM,wCACR,EACD,AAAC"}

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{ablyAwards,bottomFooterLinks,footerLinks,socialLinks}from"./Footer/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:"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,additionalCSS:"border border-neutral-300 dark:border-neutral-1000 py-12 px-16 rounded-lg relative w-[fit-content]"}),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"},badge)))))))),React.createElement("div",{className:"pt-24 border-t border-neutral-300 dark:border-neutral-1000"},[bottomFooterLinks].map((links,index)=>React.createElement("div",{key:`link-set-${index}`,className:"flex gap-24"},links.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 {\n  ablyAwards,\n  bottomFooterLinks,\n  footerLinks,\n  socialLinks,\n} from \"./Footer/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  return (\n    <footer 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\n            statusUrl={StatusUrl}\n            showDescription\n            additionalCSS=\"border border-neutral-300 dark:border-neutral-1000 py-12 px-16 rounded-lg relative w-[fit-content]\"\n          />\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 && <Badge size=\"xs\">{badge}</Badge>}\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        {[bottomFooterLinks].map((links, index) => (\n          <div key={`link-set-${index}`} className=\"flex gap-24\">\n            {links.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        ))}\n      </div>\n    </footer>\n  );\n};\n\nexport default Footer;\n"],"names":["React","cn","Icon","Status","StatusUrl","Logo","Badge","ablyAwards","bottomFooterLinks","footerLinks","socialLinks","Footer","textColorClassnames","footer","className","div","map","theme","key","href","additionalLinkAttrs","statusUrl","showDescription","additionalCSS","link","a","target","rel","aria-label","name","monoIcon","size","colorIcon","award","img","desc","src","image","alt","width","height","title","links","h3","ul","label","badge","li","index"],"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,QACEC,UAAU,CACVC,iBAAiB,CACjBC,WAAW,CACXC,WAAW,KACN,eAAgB,CAEvB,MAAMC,OAAS,KACb,MAAMC,oBACJ,qOACF,OACE,oBAACC,UAAOC,UAAU,oEAChB,oBAACC,OAAID,UAAU,qEACb,oBAACC,OAAID,UAAU,+BACZ,AAAC,CAAC,QAAS,OAAO,CAAaE,GAAG,CAAC,AAACC,OACnC,oBAACZ,MACCa,IAAKD,MACLE,KAAK,IACLF,MAAOA,MACPG,oBAAqB,CACnBN,UAAWb,GAAG,gCAAiC,CAC7C,mBAAoBgB,QAAU,QAC9B,mBAAoBA,QAAU,MAChC,EACF,KAIJ,oBAACd,QACCkB,UAAWjB,UACXkB,gBAAAA,KACAC,cAAc,uGAGhB,oBAACR,OAAID,UAAU,iBACZJ,YAAYM,GAAG,CAAC,AAACQ,MAChB,oBAACC,KACCP,IAAKM,KAAKN,GAAG,CACbC,KAAMK,KAAKA,IAAI,CACfE,OAAO,SACPC,IAAI,sBACJC,aAAY,CAAC,cAAc,EAAEJ,KAAKN,GAAG,CAAC,CAAC,CACvCJ,UAAU,+BAEV,oBAACZ,MACC2B,KAAML,KAAKM,QAAQ,CACnBC,KAAK,OACLR,cAAc,2EAEhB,oBAACrB,MACC2B,KAAML,KAAKQ,SAAS,CACpBD,KAAK,OACLR,cAAc,2CAKtB,oBAACR,OAAID,UAAU,oBACZP,WAAWS,GAAG,CAAC,AAACiB,OACf,oBAACC,OACChB,IAAKe,MAAME,IAAI,CACfC,IAAKH,MAAMI,KAAK,CAChBC,IAAKL,MAAME,IAAI,CACfI,MAAM,KACNC,OAAO,UAKf,oBAACzB,OAAID,UAAU,gEACZL,YAAYO,GAAG,CAAC,CAAC,CAAEyB,KAAK,CAAEC,KAAK,CAAE,GAChC,oBAAC3B,OAAIG,IAAKuB,MAAO3B,UAAU,+BACzB,oBAAC6B,MAAG7B,UAAU,kEACX2B,OAEH,oBAACG,MAAG9B,UAAU,0BACX4B,MAAM1B,GAAG,CAAC,CAAC,CAAE6B,KAAK,CAAErB,IAAI,CAAEsB,KAAK,CAAE,GAChC,oBAACC,MAAG7B,IAAK2B,MAAO/B,UAAU,gBACxB,oBAACW,KACCN,KAAMK,KACNV,UAAWF,oBACXgB,aAAY,CAAC,MAAM,EAAEiB,MAAM,CAAC,EAE3BA,OAEFC,OAAS,oBAACxC,OAAMyB,KAAK,MAAMe,cAS1C,oBAAC/B,OAAID,UAAU,8DACZ,CAACN,kBAAkB,CAACQ,GAAG,CAAC,CAAC0B,MAAOM,QAC/B,oBAACjC,OAAIG,IAAK,CAAC,SAAS,EAAE8B,MAAM,CAAC,CAAElC,UAAU,eACtC4B,MAAM1B,GAAG,CAAC,AAACQ,MACV,oBAACC,KACCP,IAAKM,KAAKqB,KAAK,CACf1B,KAAMK,KAAKA,IAAI,CACfV,UAAWF,oBACXgB,aAAY,CAAC,MAAM,EAAEJ,KAAKqB,KAAK,CAAC,CAAC,EAEhCrB,KAAKqB,KAAK,MAQ3B,CAEA,gBAAelC,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-12 py-12 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-4 px-16 md:px-0"),href:href,target:external?"_blank":undefined,rel:external?"noreferrer noopener":undefined},label,external&&React.createElement(Icon,{name:"icon-gui-arrow-top-right-on-square-outline"}))),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 p-16"},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 py-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"},"Login"),React.createElement(LinkButton,{href:"/sign-up",variant:"primary",className:"flex-1 md:flex-none md:ui-button-primary-xs"},"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\" | \"headerLinks\" | \"searchButtonVisibility\" | \"searchButton\"\n  > & {\n    className?: string;\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-12 py-12 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-4 px-16 md:px-0\",\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-outline\" />\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 p-16\">\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 py-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\"\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\"\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","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,YAOT,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,6IACAa,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,yCAEFT,KAAMA,KACNkC,OAAQF,SAAW,SAAWG,UAC9BC,IAAKJ,SAAW,sBAAwBG,WAEvCJ,MACAC,UACC,oBAACxC,MAAKgC,KAAK,iDAKhBnB,yBAA2B,SAAWC,aAAe,KACrDT,SACC,wCACE,oBAAC+B,OAAIrB,UAAU,4BACb,oBAACZ,kBACC,oBAACA,aAAa0C,OAAO,EACnBC,YAAa,CAAC,iBAAiB,EAAEnC,aAAaF,WAAW,CAAC,CAAC,EAE3D,oBAAC4B,QAAKtB,UAAU,6FACbJ,aAAaF,WAAW,GAG7B,oBAACN,aAAa4C,OAAO,EACnBC,eAAe,QACfC,kBAAkB,uBAElB,oBAACb,OAAIrB,UAAU,OACZ,oBAACS,eAAcT,UAAWG,0BAC3B,oBAACO,KACCyB,QAAS/B,cACTX,KAAK,IACLO,UAAWG,yBACZ,cAOT,oBAACkB,OAAIrB,UAAU,wBACb,oBAACd,YACCiD,QAAS/B,cACTgC,QAAQ,YACRpC,UAAU,mCACVqC,aAAW,SACXC,UAAU,iDACX,YAML,oBAACjB,OAAIrB,UAAU,2CACb,oBAACd,YACCO,KAAK,SACL2C,QAAQ,YACRpC,UAAU,iDACX,SAGD,oBAACd,YACCO,KAAK,WACL2C,QAAQ,UACRpC,UAAU,+CACX,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/Header.js

@@ -1,2 +1,2 @@
-import React,{useState,useEffect,useRef,useMemo}from"react";import Icon from"./Icon";import cn from"./utils/cn";import Logo from"./Logo";import{componentMaxHeight,HEADER_BOTTOM_MARGIN,HEADER_HEIGHT}from"./utils/heights";import{HeaderLinks}from"./Header/HeaderLinks";import throttle from"lodash.throttle";const FLEXIBLE_DESKTOP_CLASSES="hidden md:flex flex-1 items-center h-full";const MAX_MOBILE_MENU_WIDTH="560px";const Header=({searchBar,searchButton,logoHref,headerLinks,nav,mobileNav,sessionState,themedScrollpoints=[],searchButtonVisibility="all"})=>{const[showMenu,setShowMenu]=useState(false);const[fadingOut,setFadingOut]=useState(false);const[scrollpointClasses,setScrollpointClasses]=useState("");const menuRef=useRef(null);const closeMenu=()=>{setFadingOut(true);setTimeout(()=>{setShowMenu(false);setFadingOut(false)},150)};useEffect(()=>{const handleResize=()=>{if(window.innerWidth>=1040){setShowMenu(false)}};window.addEventListener("resize",handleResize);return()=>window.removeEventListener("resize",handleResize)},[]);useEffect(()=>{if(showMenu){document.body.classList.add("overflow-hidden")}else{document.body.classList.remove("overflow-hidden")}return()=>{document.body.classList.remove("overflow-hidden")}},[showMenu]);useEffect(()=>{const handleScroll=()=>{for(const scrollpoint of themedScrollpoints){const element=document.getElementById(scrollpoint.id);if(element){const rect=element.getBoundingClientRect();if(rect.top<=HEADER_HEIGHT&&rect.bottom>=HEADER_HEIGHT){setScrollpointClasses(scrollpoint.className);return}}}};const throttledHandleScroll=throttle(handleScroll,150);handleScroll();window.addEventListener("scroll",throttledHandleScroll);return()=>window.removeEventListener("scroll",throttledHandleScroll)},[themedScrollpoints]);const wrappedSearchButton=useMemo(()=>searchButton?React.createElement("div",{className:"text-neutral-1300 dark:text-neutral-000 flex items-center p-6"},searchButton):null,[searchButton]);return React.createElement(React.Fragment,null,React.createElement("header",{role:"banner",className:cn("fixed top-0 left-0 w-full z-10 bg-neutral-000 dark:bg-neutral-1300 border-b border-neutral-300 dark:border-neutral-1000 transition-colors px-24 md:px-64",scrollpointClasses),style:{height:HEADER_HEIGHT}},React.createElement("div",{className:"flex items-center h-full"},React.createElement("nav",{className:"flex flex-1 h-full items-center"},["light","dark"].map(theme=>React.createElement(Logo,{key:theme,href:logoHref,theme:theme,additionalLinkAttrs:{className:cn("h-full focus-base rounded mr-32 w-[108px]",{"flex dark:hidden":theme==="light","hidden dark:flex":theme==="dark"})}})),React.createElement("div",{className:FLEXIBLE_DESKTOP_CLASSES},nav)),React.createElement("div",{className:"flex md:hidden flex-1 items-center justify-end gap-24 h-full"},searchButtonVisibility!=="desktop"?wrappedSearchButton:null,React.createElement("button",{className:"cursor-pointer focus-base rounded flex items-center",onClick:()=>setShowMenu(!showMenu),"aria-expanded":showMenu,"aria-controls":"mobile-menu","aria-label":"Toggle menu"},React.createElement(Icon,{name:showMenu?"icon-gui-x-mark-outline":"icon-gui-bars-3-outline",additionalCSS:"text-neutral-1300 dark:text-neutral-000",size:"1.5rem"}))),searchBar?React.createElement("div",{className:cn(FLEXIBLE_DESKTOP_CLASSES,"justify-center")},searchBar):null,React.createElement(HeaderLinks,{className:FLEXIBLE_DESKTOP_CLASSES,headerLinks:headerLinks,sessionState:sessionState,searchButton:wrappedSearchButton,searchButtonVisibility:searchButtonVisibility}))),showMenu?React.createElement(React.Fragment,null,React.createElement("div",{className:cn("fixed inset-0 bg-neutral-1300 dark:bg-neutral-1300",{"animate-[fade-in-ten-percent_150ms_ease-in-out_forwards]":!fadingOut,"animate-[fade-out-ten-percent_150ms_ease-in-out_forwards]":fadingOut}),onClick:closeMenu,onKeyDown:e=>e.key==="Escape"&&closeMenu(),role:"presentation"}),React.createElement("div",{id:"mobile-menu",className:"md:hidden fixed flex flex-col top-[76px] overflow-y-hidden mx-12 right-0 w-[calc(100%-24px)] bg-neutral-000 dark:bg-neutral-1300 rounded-2xl ui-shadow-lg-medium z-20",style:{maxWidth:MAX_MOBILE_MENU_WIDTH,maxHeight:componentMaxHeight(HEADER_HEIGHT,HEADER_BOTTOM_MARGIN)},ref:menuRef,role:"navigation"},mobileNav,React.createElement(HeaderLinks,{headerLinks:headerLinks,sessionState:sessionState}))):null)};export default Header;
+import React,{useState,useEffect,useRef,useMemo}from"react";import Icon from"./Icon";import cn from"./utils/cn";import Logo from"./Logo";import{componentMaxHeight,HEADER_BOTTOM_MARGIN,HEADER_HEIGHT}from"./utils/heights";import{HeaderLinks}from"./Header/HeaderLinks";import throttle from"lodash.throttle";import{COLLAPSE_TRIGGER_DISTANCE}from"./Notice/component";const FLEXIBLE_DESKTOP_CLASSES="hidden md:flex flex-1 items-center h-full";const MAX_MOBILE_MENU_WIDTH="560px";const Header=({className,isNoticeVisible=false,searchBar,searchButton,logoHref,headerLinks,headerLinksClassName,nav,mobileNav,sessionState,themedScrollpoints=[],searchButtonVisibility="all",location})=>{const[showMenu,setShowMenu]=useState(false);const[fadingOut,setFadingOut]=useState(false);const[bannerVisible,setBannerVisible]=useState(isNoticeVisible);const menuRef=useRef(null);const[scrollpointClasses,setScrollpointClasses]=useState(themedScrollpoints.length>0?themedScrollpoints[0].className:"");const closeMenu=()=>{setFadingOut(true);setTimeout(()=>{setShowMenu(false);setFadingOut(false)},150)};useEffect(()=>{const handleScroll=()=>{setBannerVisible(window.scrollY<=COLLAPSE_TRIGGER_DISTANCE&&isNoticeVisible);for(const scrollpoint of themedScrollpoints){const element=document.getElementById(scrollpoint.id);if(element){const rect=element.getBoundingClientRect();if(rect.top<=HEADER_HEIGHT&&rect.bottom>=HEADER_HEIGHT){setScrollpointClasses(scrollpoint.className);return}}}};const throttledHandleScroll=throttle(handleScroll,150);handleScroll();window.addEventListener("scroll",throttledHandleScroll);return()=>window.removeEventListener("scroll",throttledHandleScroll)},[themedScrollpoints]);useEffect(()=>{const handleResize=()=>{if(window.innerWidth>=1040){setShowMenu(false)}};window.addEventListener("resize",handleResize);return()=>window.removeEventListener("resize",handleResize)},[]);useEffect(()=>{if(showMenu){document.body.classList.add("overflow-hidden")}else{document.body.classList.remove("overflow-hidden")}return()=>{document.body.classList.remove("overflow-hidden")}},[showMenu]);useEffect(()=>{if(location&&showMenu){closeMenu()}},[location]);const wrappedSearchButton=useMemo(()=>searchButton?React.createElement("div",{className:"text-neutral-1300 dark:text-neutral-000 flex items-center"},searchButton):null,[searchButton]);return React.createElement(React.Fragment,null,React.createElement("header",{role:"banner",className:cn("fixed left-0 top-0 w-full z-50 bg-neutral-000 dark:bg-neutral-1300 border-b border-neutral-300 dark:border-neutral-1000 transition-colors px-24 md:px-64",scrollpointClasses,{"md:top-auto":bannerVisible}),style:{height:HEADER_HEIGHT}},React.createElement("div",{className:cn("flex items-center h-full",className)},React.createElement("nav",{className:"flex flex-1 h-full items-center"},["light","dark"].map(theme=>React.createElement(Logo,{key:theme,href:logoHref,theme:theme,additionalLinkAttrs:{className:cn("h-full focus-base rounded mr-32 w-[96px]",{"flex dark:hidden":theme==="light","hidden dark:flex":theme==="dark"})}})),React.createElement("div",{className:FLEXIBLE_DESKTOP_CLASSES},nav)),React.createElement("div",{className:"flex md:hidden flex-1 items-center justify-end gap-24 h-full"},searchButtonVisibility!=="desktop"?wrappedSearchButton:null,React.createElement("button",{className:"cursor-pointer focus-base rounded flex items-center p-0",onClick:()=>setShowMenu(!showMenu),"aria-expanded":showMenu,"aria-controls":"mobile-menu","aria-label":"Toggle menu"},React.createElement(Icon,{name:showMenu?"icon-gui-x-mark-outline":"icon-gui-bars-3-outline",additionalCSS:"text-neutral-1300 dark:text-neutral-000",size:"1.5rem"}))),searchBar?React.createElement("div",{className:cn(FLEXIBLE_DESKTOP_CLASSES,"justify-center")},searchBar):null,React.createElement(HeaderLinks,{className:cn(FLEXIBLE_DESKTOP_CLASSES,headerLinksClassName),headerLinks:headerLinks,sessionState:sessionState,searchButton:wrappedSearchButton,searchButtonVisibility:searchButtonVisibility}))),showMenu?React.createElement(React.Fragment,null,React.createElement("div",{className:cn("fixed inset-0 bg-neutral-1300 dark:bg-neutral-1300 z-40",{"animate-[fade-in-ten-percent_150ms_ease-in-out_forwards]":!fadingOut,"animate-[fade-out-ten-percent_150ms_ease-in-out_forwards]":fadingOut}),onClick:closeMenu,onKeyDown:e=>e.key==="Escape"&&closeMenu(),role:"presentation"}),React.createElement("div",{id:"mobile-menu",className:"md:hidden fixed flex flex-col top-[76px] overflow-y-hidden mx-12 right-0 w-[calc(100%-24px)] bg-neutral-000 dark:bg-neutral-1300 rounded-2xl ui-shadow-lg-medium z-50",style:{maxWidth:MAX_MOBILE_MENU_WIDTH,maxHeight:componentMaxHeight(HEADER_HEIGHT,HEADER_BOTTOM_MARGIN)},ref:menuRef,role:"navigation"},mobileNav,React.createElement(HeaderLinks,{headerLinks:headerLinks,sessionState:sessionState}))):null)};export default Header;
 //# sourceMappingURL=Header.js.map