@ably/ui 14.3.0-dev.7575817 → 14.3.1

package/README.md

@@ -289,20 +289,10 @@ This will release the packages and update library and create & push the commit &
 
 ### Running tests
 
-The repo includes [Cypress](https://www.cypress.io/) for snapshot, screenshot, parity and behaviour testing. Cypress runs against the "preview" server (e.g. the same server used for development).
+`ably-ui` uses Storybook's `test-runner`, which on push automatically turns all stories into executable tests, underpinned by Jest and Playright. This means that we don't have to explicitly write tests for stories, though we have the ability to write [https://storybook.js.org/docs/writing-stories/play-function](play functions), which allow us to test more detailed interactions. More information on the capabilities of `test-runner` can be found [https://storybook.js.org/docs/writing-tests/test-runner](here).
 
-**Snapshot testing** takes saves the DOM and compares it between runs - updating of snapshots can be done in the Cypress UI.
+Snapshots are also assessed via `test-runner`. To generate new snapshots, run `yarn test:update-snapshots`.
 
-**Screenshot testing** takes a screenshot of a component and compares it between runs. Diffs are located in `cypress/screenshots`. To update a screenshot, delete it.
+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.
 
-**Parity testing** checks VW/React components; screenshots are taken of both versions and fail if they are different.
-
-**Behaviour testing** clicks around the DOM and checks for singular elements on the page to be updated.
-
-To run integration tests (using [Cypress](https://www.cypress.io/)), you'll need to have the "preview app" running on port 5000, then run:
-
-```bash
-yarn cy:open
-```
-
-This will open the UI for Cypress, from which you can run the tests. Screenshots are saved in `cypress/screenshots`.
+A related quirk to mention here is that the SWC config has been renamed to `.swc` (away from the default `.swcrc`), as `test-runner` also uses SWC and its config conflicted with ours.

package/core/Code.js

@@ -1 +1 @@
-import React from"react";import{highlightSnippet,registerDefaultLanguages}from"./utils/syntax-highlighter";import languagesRegistry from"./utils/syntax-highlighter-registry";registerDefaultLanguages(languagesRegistry);const Code=({language,snippet,textSize="ui-text-code",padding="p-32",additionalCSS=""})=>{var _highlightSnippet;const HTMLraw=(_highlightSnippet=highlightSnippet(language,`${snippet}`.trim()))!==null&&_highlightSnippet!==void 0?_highlightSnippet:"";const className=`language-${language} ${textSize}`;return React.createElement("div",{className:`hljs overflow-auto ${padding} ${additionalCSS}`,"data-id":"code"},React.createElement("pre",{lang:language},React.createElement("code",{className:className,dangerouslySetInnerHTML:{__html:HTMLraw}})))};export default Code;
+import React from"react";import{highlightSnippet,registerDefaultLanguages}from"./utils/syntax-highlighter";import languagesRegistry from"./utils/syntax-highlighter-registry";registerDefaultLanguages(languagesRegistry);const Code=({language,snippet,textSize="ui-text-code",padding="p-32",additionalCSS=""})=>{const HTMLraw=highlightSnippet(language,`${snippet}`.trim())??"";const className=`language-${language} ${textSize}`;return React.createElement("div",{className:`hljs overflow-auto ${padding} ${additionalCSS}`,"data-id":"code"},React.createElement("pre",{lang:language},React.createElement("code",{className:className,dangerouslySetInnerHTML:{__html:HTMLraw}})))};export default Code;

package/core/CookieMessage.js

@@ -1 +1 @@
-import React,{useRef,useEffect,useState}from"react";import Cookie from"js-cookie";import _absUrl from"./url-base";const COOKIE_EXPIRY=365;const CookieMessage=({cookieId,urlBase})=>{const ref=useRef(null);const[hideCookieMessage,setHideCookieMessage]=useState(true);useEffect(()=>{const isCookieSet=Cookie.get(cookieId)?true:false;setHideCookieMessage(isCookieSet)},[]);const handleClose=()=>{var _ref_current;Cookie.set(cookieId,"1",{expires:COOKIE_EXPIRY});(_ref_current=ref.current)===null||_ref_current===void 0?void 0:_ref_current.classList.add("bottom-1","opacity-0");setTimeout(()=>setHideCookieMessage(true),500)};const absUrl=path=>_absUrl(path,urlBase);if(hideCookieMessage)return null;return React.createElement("div",{className:"ui-cookie-message",ref:ref},React.createElement("p",{className:"ui-text-p2 pr-32"},React.createElement("a",{href:absUrl("/privacy"),className:"underline"},"How we use cookies")," ","to improve your experience."),React.createElement("button",{className:"ui-btn-secondary mt-12 sm:mt-0 whitespace-nowrap",onClick:handleClose},"Accept and close"))};export default CookieMessage;
+import React,{useRef,useEffect,useState}from"react";import Cookie from"js-cookie";import _absUrl from"./url-base";const COOKIE_EXPIRY=365;const CookieMessage=({cookieId,urlBase})=>{const ref=useRef(null);const[hideCookieMessage,setHideCookieMessage]=useState(true);useEffect(()=>{const isCookieSet=Cookie.get(cookieId)?true:false;setHideCookieMessage(isCookieSet)},[]);const handleClose=()=>{Cookie.set(cookieId,"1",{expires:COOKIE_EXPIRY});ref.current?.classList.add("bottom-1","opacity-0");setTimeout(()=>setHideCookieMessage(true),500)};const absUrl=path=>_absUrl(path,urlBase);if(hideCookieMessage)return null;return React.createElement("div",{className:"ui-cookie-message",ref:ref},React.createElement("p",{className:"ui-text-p2 pr-32"},React.createElement("a",{href:absUrl("/privacy"),className:"underline"},"How we use cookies")," ","to improve your experience."),React.createElement("button",{className:"ui-btn-secondary mt-12 sm:mt-0 whitespace-nowrap",onClick:handleClose},"Accept and close"))};export default CookieMessage;

package/core/DropdownMenu.js

@@ -1 +1 @@
-import React,{createContext,useContext,useState,useEffect,useRef}from"react";import Icon from"./Icon";const DropdownMenuContext=createContext({isOpen:false,setOpen:()=>{}});const DropdownMenu=({children})=>{const[isOpen,setOpen]=useState(false);const ref=useRef(null);useEffect(()=>{const clickHandler=e=>{var _ref_current;if((_ref_current=ref.current)===null||_ref_current===void 0?void 0:_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,additionalTriggerCSS=""})=>{const{isOpen,setOpen}=useContext(DropdownMenuContext);return React.createElement("button",{id:"menu-trigger",onClick:()=>setOpen(!isOpen),className:`${additionalTriggerCSS} flex items-center p-8 ml-8 group hover:text-gui-hover hover:bg-light-grey active:text-gui-active focus:text-gui-focus focus:outline-none rounded-lg`},React.createElement("span",{className:"leading-normal"},children),React.createElement(Icon,{name:"icon-gui-disclosure-arrow",color:"text-cool-black",size:"1.25rem",additionalCSS:"transform rotate-90 group-hover:text-gui-hover group-active:text-gui-active group-focus:text-gui-focus"}))};const Content=({children,anchorPosition="right",additionalContentCSS})=>{const{isOpen}=useContext(DropdownMenuContext);if(!isOpen){return null}const anchorPositionClasses=anchorPosition==="right"?"right-0":"left-0";return React.createElement("div",{id:"menu-content",className:`${additionalContentCSS} absolute p-8 z-10 border border-mid-grey bg-white rounded shadow-container ${anchorPositionClasses}`,style:{minWidth:275,top:44}},children)};const Link=({url,title,subtitle,iconName,children})=>{return React.createElement("a",{href:url,className:"menu-link group block p-8 hover:bg-light-grey hover:text-cool-black rounded"},React.createElement("p",{className:"mb-4"},title,iconName?React.createElement(Icon,{name:iconName,size:"1rem",color:"text-cool-black",additionalCSS:"align-middle ml-8 relative -top-1 -left-4"}):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";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,additionalTriggerCSS=""})=>{const{isOpen,setOpen}=useContext(DropdownMenuContext);return React.createElement("button",{id:"menu-trigger",onClick:()=>setOpen(!isOpen),className:`${additionalTriggerCSS} flex items-center p-8 ml-8 group hover:text-gui-hover hover:bg-light-grey active:text-gui-active focus:text-gui-focus focus:outline-none rounded-lg`},React.createElement("span",{className:"leading-normal"},children),React.createElement(Icon,{name:"icon-gui-disclosure-arrow",color:"text-cool-black",size:"1.25rem",additionalCSS:"transform rotate-90 group-hover:text-gui-hover group-active:text-gui-active group-focus:text-gui-focus"}))};const Content=({children,anchorPosition="right",additionalContentCSS})=>{const{isOpen}=useContext(DropdownMenuContext);if(!isOpen){return null}const anchorPositionClasses=anchorPosition==="right"?"right-0":"left-0";return React.createElement("div",{id:"menu-content",className:`${additionalContentCSS} absolute p-8 z-10 border border-mid-grey bg-white rounded shadow-container ${anchorPositionClasses}`,style:{minWidth:275,top:44}},children)};const Link=({url,title,subtitle,iconName,children})=>{return React.createElement("a",{href:url,className:"menu-link group block p-8 hover:bg-light-grey hover:text-cool-black rounded"},React.createElement("p",{className:"mb-4"},title,iconName?React.createElement(Icon,{name:iconName,size:"1rem",color:"text-cool-black",additionalCSS:"align-middle ml-8 relative -top-1 -left-4"}):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;

package/core/Expander.js

@@ -1 +1 @@
-import React,{useEffect,useRef,useState}from"react";const Expander=({heightThreshold=200,className,fadeClassName,children})=>{const innerRef=useRef(null);const[showControls,setShowControls]=useState(false);const[height,setHeight]=useState(heightThreshold);const[expanded,setExpanded]=useState(false);useEffect(()=>{var _innerRef_current;var _innerRef_current_clientHeight;const contentHeight=(_innerRef_current_clientHeight=(_innerRef_current=innerRef.current)===null||_innerRef_current===void 0?void 0:_innerRef_current.clientHeight)!==null&&_innerRef_current_clientHeight!==void 0?_innerRef_current_clientHeight:heightThreshold;if(contentHeight<heightThreshold){setHeight("auto")}else if(expanded){setHeight(contentHeight)}else{setHeight(heightThreshold)}setShowControls(contentHeight>=heightThreshold)},[heightThreshold,expanded]);return React.createElement(React.Fragment,null,React.createElement("div",{style:{height},className:`overflow-hidden transition-all relative ${className!==null&&className!==void 0?className:""}`},showControls&&!expanded&&React.createElement("div",{className:`h-64 w-full bg-gradient-to-t from-white to-transparent absolute bottom-0 left-0 right-0 ${fadeClassName!==null&&fadeClassName!==void 0?fadeClassName:""}`}),React.createElement("div",{ref:innerRef},children)),showControls&&React.createElement("div",{onClick:()=>setExpanded(!expanded),onKeyDown:e=>e.key==="Enter"&&setExpanded(!expanded),tabIndex:0,className:"mt-16 cursor-pointer font-bold text-gui-blue-default-light hover:text-gui-blue-hover-light"},expanded?"View less -":"View all +"))};export default Expander;
+import React,{useEffect,useRef,useState}from"react";const Expander=({heightThreshold=200,className,fadeClassName,children})=>{const innerRef=useRef(null);const[showControls,setShowControls]=useState(false);const[height,setHeight]=useState(heightThreshold);const[expanded,setExpanded]=useState(false);useEffect(()=>{const contentHeight=innerRef.current?.clientHeight??heightThreshold;if(contentHeight<heightThreshold){setHeight("auto")}else if(expanded){setHeight(contentHeight)}else{setHeight(heightThreshold)}setShowControls(contentHeight>=heightThreshold)},[heightThreshold,expanded]);return React.createElement(React.Fragment,null,React.createElement("div",{style:{height},className:`overflow-hidden transition-all relative ${className??""}`},showControls&&!expanded&&React.createElement("div",{className:`h-64 w-full bg-gradient-to-t from-white to-transparent absolute bottom-0 left-0 right-0 ${fadeClassName??""}`}),React.createElement("div",{ref:innerRef},children)),showControls&&React.createElement("div",{onClick:()=>setExpanded(!expanded),onKeyDown:e=>e.key==="Enter"&&setExpanded(!expanded),tabIndex:0,className:"mt-16 cursor-pointer font-bold text-gui-blue-default-light hover:text-gui-blue-hover-light"},expanded?"View less -":"View all +"))};export default Expander;

package/core/Flash.js

@@ -1 +1 @@
-import React,{useEffect,useState,useRef}from"react";import DOMPurify from"dompurify";import{getRemoteDataStore}from"./remote-data-store.js";import ConnectStateWrapper from"./ConnectStateWrapper";import Icon from"./Icon";const REDUCER_KEY="flashes";const FLASH_DATA_ID="ui-flashes";const initialState={items:[]};const reducerFlashes={[REDUCER_KEY]:(state=initialState,action)=>{switch(action.type){case"flash/push":{const flashes=Array.isArray(action.payload)?action.payload:[action.payload];return{items:[...state.items,...flashes]}}default:return state}}};const selectFlashes=store=>store.getState()[REDUCER_KEY];const FLASH_BG_COLOR={error:"bg-gui-error",success:"bg-zingy-green",notice:"bg-electric-cyan",info:"bg-electric-cyan",alert:"bg-active-orange"};const FLASH_TEXT_COLOR={error:"text-white",success:"text-cool-black",notice:"text-cool-black",info:"text-cool-black",alert:"text-white"};const AUTO_HIDE=["success","info","notice"];const AUTO_HIDE_TIME=8e3;const useAutoHide=(type,closeFlash)=>{const timeoutId=useRef(null);useEffect(()=>{if(AUTO_HIDE.includes(type)){timeoutId.current=setTimeout(()=>{closeFlash()},AUTO_HIDE_TIME)}return()=>{if(timeoutId.current){clearTimeout(timeoutId.current)}}},[])};const Flash=({id,type,content,removeFlash})=>{const ref=useRef(null);const[closed,setClosed]=useState(false);const[flashHeight,setFlashHeight]=useState(0);const[triggerEntryAnimation,setTriggerEntryAnimation]=useState(false);const closeFlash=()=>{if(ref.current){setFlashHeight(ref.current.getBoundingClientRect().height)}setClosed(true);setTimeout(()=>{id&&removeFlash(id)},100)};useEffect(()=>setTriggerEntryAnimation(true),[]);useAutoHide(type,closeFlash);const animateEntry=triggerEntryAnimation&&!closed;let style;if(flashHeight&&!closed){style={height:`${flashHeight}px`}}else if(closed){style={height:0,marginTop:0,zIndex:-1}}else{style={}}const safeContent=DOMPurify.sanitize(content,{ALLOWED_TAGS:["a"],ALLOWED_ATTR:["href","data-method","rel"]});const withIcons={notice:"icon-gui-ably-badge",success:"icon-gui-tick",error:"icon-gui-warning",alert:"icon-gui-warning"};const iconColor={notice:"text-cool-black",success:"text-cool-black",error:"text-white",alert:"text-white"};return React.createElement("div",{className:`ui-flash-message ui-grid-px ${animateEntry?"ui-flash-message-enter":""}`,style:style,ref:ref,"data-id":"ui-flash"},React.createElement("div",{className:`${FLASH_BG_COLOR[type]} p-32 flex align-center rounded shadow-container-subtle`},withIcons[type]&&React.createElement(Icon,{name:withIcons[type],color:iconColor[type],size:"1.5rem",additionalCSS:"mr-16 self-baseline"}),React.createElement("p",{className:`ui-text-p1 mr-16 ${FLASH_TEXT_COLOR[type]}`,dangerouslySetInnerHTML:{__html:safeContent}}),React.createElement("button",{type:"button",className:"p-0 ml-auto self-start focus:outline-none",onClick:closeFlash},React.createElement(Icon,{name:"icon-gui-close",color:iconColor[type],size:"1.5rem",additionalCSS:"transition-colors"}))))};const Flashes=({flashes})=>{const[flashesWithIds,setFlashesWithIds]=useState([]);const removeFlash=flashId=>setFlashesWithIds(items=>items.filter(item=>item.id!==flashId));useEffect(()=>{setFlashesWithIds(state=>{var _flashes_items;return[...state,...((_flashes_items=flashes===null||flashes===void 0?void 0:flashes.items)!==null&&_flashes_items!==void 0?_flashes_items:[]).map(flash=>({...flash,id:Math.random().toString(36).slice(2),removed:false}))]})},[flashes]);return React.createElement("div",{className:"ui-flash","data-id":FLASH_DATA_ID},flashesWithIds.filter(item=>!item.removed).map(flash=>React.createElement(Flash,{key:flash.id,...flash,removeFlash:removeFlash})))};const BackendFlashes=({flashes})=>{useEffect(()=>{const transformedFlashes=flashes.map(flash=>{const[type,content]=flash;return{type,content}})||[];if(transformedFlashes.length>0){const store=getRemoteDataStore();store.dispatch({type:"flash/push",payload:transformedFlashes})}},[]);const WrappedFlashes=ConnectStateWrapper(Flashes,{flashes:selectFlashes});return React.createElement(WrappedFlashes,null)};export{reducerFlashes,FLASH_DATA_ID,Flashes};export default BackendFlashes;
+import React,{useEffect,useState,useRef}from"react";import DOMPurify from"dompurify";import{getRemoteDataStore}from"./remote-data-store.js";import ConnectStateWrapper from"./ConnectStateWrapper";import Icon from"./Icon";const REDUCER_KEY="flashes";const FLASH_DATA_ID="ui-flashes";const initialState={items:[]};const reducerFlashes={[REDUCER_KEY]:(state=initialState,action)=>{switch(action.type){case"flash/push":{const flashes=Array.isArray(action.payload)?action.payload:[action.payload];return{items:[...state.items,...flashes]}}default:return state}}};const selectFlashes=store=>store.getState()[REDUCER_KEY];const FLASH_BG_COLOR={error:"bg-gui-error",success:"bg-zingy-green",notice:"bg-electric-cyan",info:"bg-electric-cyan",alert:"bg-active-orange"};const FLASH_TEXT_COLOR={error:"text-white",success:"text-cool-black",notice:"text-cool-black",info:"text-cool-black",alert:"text-white"};const AUTO_HIDE=["success","info","notice"];const AUTO_HIDE_TIME=8e3;const useAutoHide=(type,closeFlash)=>{const timeoutId=useRef(null);useEffect(()=>{if(AUTO_HIDE.includes(type)){timeoutId.current=setTimeout(()=>{closeFlash()},AUTO_HIDE_TIME)}return()=>{if(timeoutId.current){clearTimeout(timeoutId.current)}}},[])};const Flash=({id,type,content,removeFlash})=>{const ref=useRef(null);const[closed,setClosed]=useState(false);const[flashHeight,setFlashHeight]=useState(0);const[triggerEntryAnimation,setTriggerEntryAnimation]=useState(false);const closeFlash=()=>{if(ref.current){setFlashHeight(ref.current.getBoundingClientRect().height)}setClosed(true);setTimeout(()=>{id&&removeFlash(id)},100)};useEffect(()=>setTriggerEntryAnimation(true),[]);useAutoHide(type,closeFlash);const animateEntry=triggerEntryAnimation&&!closed;let style;if(flashHeight&&!closed){style={height:`${flashHeight}px`}}else if(closed){style={height:0,marginTop:0,zIndex:-1}}else{style={}}const safeContent=DOMPurify.sanitize(content,{ALLOWED_TAGS:["a"],ALLOWED_ATTR:["href","data-method","rel"]});const withIcons={notice:"icon-gui-ably-badge",success:"icon-gui-tick",error:"icon-gui-warning",alert:"icon-gui-warning"};const iconColor={notice:"text-cool-black",success:"text-cool-black",error:"text-white",alert:"text-white"};return React.createElement("div",{className:`ui-flash-message ui-grid-px ${animateEntry?"ui-flash-message-enter":""}`,style:style,ref:ref,"data-id":"ui-flash"},React.createElement("div",{className:`${FLASH_BG_COLOR[type]} p-32 flex align-center rounded shadow-container-subtle`},withIcons[type]&&React.createElement(Icon,{name:withIcons[type],color:iconColor[type],size:"1.5rem",additionalCSS:"mr-16 self-baseline"}),React.createElement("p",{className:`ui-text-p1 mr-16 ${FLASH_TEXT_COLOR[type]}`,dangerouslySetInnerHTML:{__html:safeContent}}),React.createElement("button",{type:"button",className:"p-0 ml-auto self-start focus:outline-none",onClick:closeFlash},React.createElement(Icon,{name:"icon-gui-close",color:iconColor[type],size:"1.5rem",additionalCSS:"transition-colors"}))))};const Flashes=({flashes})=>{const[flashesWithIds,setFlashesWithIds]=useState([]);const removeFlash=flashId=>setFlashesWithIds(items=>items.filter(item=>item.id!==flashId));useEffect(()=>{setFlashesWithIds(state=>{return[...state,...(flashes?.items??[]).map(flash=>({...flash,id:Math.random().toString(36).slice(2),removed:false}))]})},[flashes]);return React.createElement("div",{className:"ui-flash","data-id":FLASH_DATA_ID},flashesWithIds.filter(item=>!item.removed).map(flash=>React.createElement(Flash,{key:flash.id,...flash,removeFlash:removeFlash})))};const BackendFlashes=({flashes})=>{useEffect(()=>{const transformedFlashes=flashes.map(flash=>{const[type,content]=flash;return{type,content}})||[];if(transformedFlashes.length>0){const store=getRemoteDataStore();store.dispatch({type:"flash/push",payload:transformedFlashes})}},[]);const WrappedFlashes=ConnectStateWrapper(Flashes,{flashes:selectFlashes});return React.createElement(WrappedFlashes,null)};export{reducerFlashes,FLASH_DATA_ID,Flashes};export default BackendFlashes;

package/core/Meganav/component.js

@@ -1 +1 @@
-import throttle from"lodash.throttle";import{queryId,queryIdAll}from"../dom-query";import MeganavControl from"../MeganavControl/component.js";import MeganavControlMobileDropdown from"../MeganavControlMobileDropdown/component.js";import MobilePanelOpenClick from"../MeganavControlMobilePanelOpen/component.js";import MobilePanelCloseClick from"../MeganavControlMobilePanelClose/component.js";import MeganavSearchAutocomplete from"../MeganavSearchAutocomplete/component.js";import MeganavSearchSuggestions from"../MeganavSearchSuggestions/component.js";const windowOnBlur=closeAll=>{window.onblur=()=>closeAll();return{teardown:()=>window.onblur=null}};const documentClick=closeAll=>{const meganav=queryId("meganav");const clickHandler=e=>{if(meganav.contains(e.target))return;closeAll()};document.addEventListener("click",clickHandler);return{teardown:()=>document.removeEventListener("click",clickHandler)}};const documentScroll=themeName=>{if(themeName!=="transparentToWhite")return{teardown:()=>{}};const meganav=queryId("meganav");const navItems=queryIdAll("meganav-link");const controlMobileDropdownMenu=queryId("meganav-control-mobile-dropdown-menu");const controlMobileDropdownClose=queryId("meganav-control-mobile-dropdown-close");const controls=queryIdAll("meganav-control");const signUpBtn=queryId("meganav-sign-up-btn");const invertTextCollection=[...Array.from(controls),...Array.from(navItems),queryId("meganav-logo")];const invertMobleDropdownColor=invert=>{const whiteToBlack=["ui-icon-white","ui-icon-cool-black"];const blackToWhite=[...whiteToBlack].reverse();if(invert){controlMobileDropdownMenu===null||controlMobileDropdownMenu===void 0?void 0:controlMobileDropdownMenu.classList.replace(...whiteToBlack);controlMobileDropdownClose===null||controlMobileDropdownClose===void 0?void 0:controlMobileDropdownClose.classList.replace(...whiteToBlack)}else{controlMobileDropdownMenu===null||controlMobileDropdownMenu===void 0?void 0:controlMobileDropdownMenu.classList.replace(...blackToWhite);controlMobileDropdownClose===null||controlMobileDropdownClose===void 0?void 0:controlMobileDropdownClose.classList.replace(...blackToWhite)}};const inverSignupBtnColors=invert=>{if(invert){signUpBtn===null||signUpBtn===void 0?void 0:signUpBtn.classList.replace("bg-white","bg-cool-black");signUpBtn===null||signUpBtn===void 0?void 0:signUpBtn.classList.replace("text-cool-black","text-white")}else{signUpBtn===null||signUpBtn===void 0?void 0:signUpBtn.classList.replace("bg-cool-black","bg-white");signUpBtn===null||signUpBtn===void 0?void 0:signUpBtn.classList.replace("text-white","text-cool-black")}};const scrollHandler=throttle(()=>{if(window.scrollY>5){meganav.classList.replace("bg-transparent","bg-white");inverSignupBtnColors(true);invertMobleDropdownColor(true);invertTextCollection.forEach(n=>n.classList.replace("text-white","text-cool-black"))}else{meganav.classList.replace("bg-white","bg-transparent");inverSignupBtnColors(false);invertMobleDropdownColor(false);invertTextCollection.forEach(n=>n.classList.replace("text-cool-black","text-white"))}},150);document.addEventListener("scroll",scrollHandler);return{teardown:()=>document.removeEventListener("scroll",scrollHandler)}};export default function Meganav({themeName,addSearchApiKey}={themeName:null}){const controls=MeganavControl();const panelOpenControls=MobilePanelOpenClick();const panelCloseControls=MobilePanelCloseClick();const search=MeganavSearchAutocomplete(addSearchApiKey);const searchSuggestions=MeganavSearchSuggestions();const mobileDropdownControl=MeganavControlMobileDropdown({clearPanels:()=>[...panelOpenControls,...panelCloseControls].forEach(i=>i.clear())});const closeAll=()=>[mobileDropdownControl,searchSuggestions,...panelOpenControls,...panelCloseControls,...controls,...search].forEach(i=>i.clear());const teardowns=[documentScroll(themeName),documentClick(closeAll),windowOnBlur(closeAll),mobileDropdownControl,searchSuggestions,...controls,...panelOpenControls,...panelCloseControls,...search].map(i=>i.teardown);return()=>teardowns.forEach(teardown=>teardown())}
+import throttle from"lodash.throttle";import{queryId,queryIdAll}from"../dom-query";import MeganavControl from"../MeganavControl/component.js";import MeganavControlMobileDropdown from"../MeganavControlMobileDropdown/component.js";import MobilePanelOpenClick from"../MeganavControlMobilePanelOpen/component.js";import MobilePanelCloseClick from"../MeganavControlMobilePanelClose/component.js";import MeganavSearchAutocomplete from"../MeganavSearchAutocomplete/component.js";import MeganavSearchSuggestions from"../MeganavSearchSuggestions/component.js";const windowOnBlur=closeAll=>{window.onblur=()=>closeAll();return{teardown:()=>window.onblur=null}};const documentClick=closeAll=>{const meganav=queryId("meganav");const clickHandler=e=>{if(meganav.contains(e.target))return;closeAll()};document.addEventListener("click",clickHandler);return{teardown:()=>document.removeEventListener("click",clickHandler)}};const documentScroll=themeName=>{if(themeName!=="transparentToWhite")return{teardown:()=>{}};const meganav=queryId("meganav");const navItems=queryIdAll("meganav-link");const controlMobileDropdownMenu=queryId("meganav-control-mobile-dropdown-menu");const controlMobileDropdownClose=queryId("meganav-control-mobile-dropdown-close");const controls=queryIdAll("meganav-control");const signUpBtn=queryId("meganav-sign-up-btn");const invertTextCollection=[...Array.from(controls),...Array.from(navItems),queryId("meganav-logo")];const invertMobleDropdownColor=invert=>{const whiteToBlack=["ui-icon-white","ui-icon-cool-black"];const blackToWhite=[...whiteToBlack].reverse();if(invert){controlMobileDropdownMenu?.classList.replace(...whiteToBlack);controlMobileDropdownClose?.classList.replace(...whiteToBlack)}else{controlMobileDropdownMenu?.classList.replace(...blackToWhite);controlMobileDropdownClose?.classList.replace(...blackToWhite)}};const inverSignupBtnColors=invert=>{if(invert){signUpBtn?.classList.replace("bg-white","bg-cool-black");signUpBtn?.classList.replace("text-cool-black","text-white")}else{signUpBtn?.classList.replace("bg-cool-black","bg-white");signUpBtn?.classList.replace("text-white","text-cool-black")}};const scrollHandler=throttle(()=>{if(window.scrollY>5){meganav.classList.replace("bg-transparent","bg-white");inverSignupBtnColors(true);invertMobleDropdownColor(true);invertTextCollection.forEach(n=>n.classList.replace("text-white","text-cool-black"))}else{meganav.classList.replace("bg-white","bg-transparent");inverSignupBtnColors(false);invertMobleDropdownColor(false);invertTextCollection.forEach(n=>n.classList.replace("text-cool-black","text-white"))}},150);document.addEventListener("scroll",scrollHandler);return{teardown:()=>document.removeEventListener("scroll",scrollHandler)}};export default function Meganav({themeName,addSearchApiKey}={themeName:null}){const controls=MeganavControl();const panelOpenControls=MobilePanelOpenClick();const panelCloseControls=MobilePanelCloseClick();const search=MeganavSearchAutocomplete(addSearchApiKey);const searchSuggestions=MeganavSearchSuggestions();const mobileDropdownControl=MeganavControlMobileDropdown({clearPanels:()=>[...panelOpenControls,...panelCloseControls].forEach(i=>i.clear())});const closeAll=()=>[mobileDropdownControl,searchSuggestions,...panelOpenControls,...panelCloseControls,...controls,...search].forEach(i=>i.clear());const teardowns=[documentScroll(themeName),documentClick(closeAll),windowOnBlur(closeAll),mobileDropdownControl,searchSuggestions,...controls,...panelOpenControls,...panelCloseControls,...search].map(i=>i.teardown);return()=>teardowns.forEach(teardown=>teardown())}

package/core/Meganav.js

@@ -1 +1 @@
-import React,{useEffect,useState}from"react";import{connectState}from"./remote-data-store.js";import{selectSessionData}from"./remote-session-data.js";import Logo from"./Logo";import MeganavData from"./Meganav/component.json";import MeganavScripts from"./Meganav/component.js";import MeganavItemsDesktop from"./MeganavItemsDesktop";import MeganavItemsSignedIn from"./MeganavItemsSignedIn";import MeganavItemsMobile from"./MeganavItemsMobile";import Notice from"./Notice";import _absUrl from"./url-base.js";import MeganavContentProducts from"./MeganavContentProducts";import MeganavContentUseCases from"./MeganavContentUseCases";import MeganavContentCompany from"./MeganavContentCompany";import MeganavContentDevelopers from"./MeganavContentDevelopers";import MeganavSearch from"./MeganavSearch";const SignIn=({sessionState,theme,loginLink,absUrl})=>{return sessionState.signedIn?React.createElement(MeganavItemsSignedIn,{absUrl:absUrl,sessionState:sessionState,theme:theme}):React.createElement("ul",{className:"hidden md:flex items-center"},React.createElement("li",{className:"ui-meganav-item"},React.createElement("a",{href:absUrl("/contact"),className:`ui-meganav-link ${theme.textColor}`,"data-id":"meganav-link"},"Contact us")),React.createElement("li",{className:"ui-meganav-item"},React.createElement("a",{href:absUrl(loginLink),className:`ui-meganav-link mr-0 ${theme.textColor}`,"data-id":"meganav-link"},"Login")),React.createElement("li",{className:"ui-meganav-item"},React.createElement(MeganavSearch,{absUrl:absUrl})),React.createElement("li",{className:"ui-meganav-item"},React.createElement("a",{href:absUrl("/sign-up"),"data-id":"meganav-sign-up-btn",className:`ui-btn p-btn-small ${theme.buttonBackgroundColor} ${theme.buttonTextColor}`},"Sign up free")))};const SignInPlaceholder=()=>React.createElement("div",null);const panels={MeganavContentProducts,MeganavContentUseCases,MeganavContentCompany,MeganavContentDevelopers};const Meganav=({paths,themeName="white",notice,loginLink="/login",urlBase,addSearchApiKey,statusUrl})=>{const[sessionState,setSessionState]=useState();useEffect(()=>{connectState(selectSessionData,setSessionState)},[]);useEffect(()=>{const teardown=MeganavScripts({themeName,addSearchApiKey});return()=>teardown()},[sessionState]);const theme=MeganavData.themes[themeName];const absUrl=path=>_absUrl(path,urlBase);var _paths_logo;return React.createElement("nav",{className:`ui-meganav-wrapper ${theme.backgroundColor} ${theme.barShadow}`,"data-id":"meganav","aria-label":"Main"},notice&&React.createElement(Notice,{...notice.props,config:notice.config}),React.createElement("div",{className:"ui-meganav ui-grid-px"},React.createElement("div",{className:"mr-24"},React.createElement(Logo,{dataId:"meganav-logo",href:urlBase,logoUrl:(_paths_logo=paths===null||paths===void 0?void 0:paths.logo)!==null&&_paths_logo!==void 0?_paths_logo:""})),React.createElement(MeganavItemsDesktop,{panels:panels,paths:paths,theme:theme,absUrl:absUrl,statusUrl:statusUrl}),sessionState?React.createElement(SignIn,{sessionState:sessionState,theme:theme,loginLink:loginLink,absUrl:absUrl}):React.createElement(SignInPlaceholder,null),React.createElement(MeganavItemsMobile,{panels:panels,sessionState:sessionState,paths:paths,theme:theme,loginLink:loginLink,absUrl:absUrl,statusUrl:statusUrl})))};export default Meganav;
+import React,{useEffect,useState}from"react";import{connectState}from"./remote-data-store.js";import{selectSessionData}from"./remote-session-data.js";import Logo from"./Logo";import MeganavData from"./Meganav/component.json";import MeganavScripts from"./Meganav/component.js";import MeganavItemsDesktop from"./MeganavItemsDesktop";import MeganavItemsSignedIn from"./MeganavItemsSignedIn";import MeganavItemsMobile from"./MeganavItemsMobile";import Notice from"./Notice";import _absUrl from"./url-base.js";import MeganavContentProducts from"./MeganavContentProducts";import MeganavContentUseCases from"./MeganavContentUseCases";import MeganavContentCompany from"./MeganavContentCompany";import MeganavContentDevelopers from"./MeganavContentDevelopers";import MeganavSearch from"./MeganavSearch";const SignIn=({sessionState,theme,loginLink,absUrl})=>{return sessionState.signedIn?React.createElement(MeganavItemsSignedIn,{absUrl:absUrl,sessionState:sessionState,theme:theme}):React.createElement("ul",{className:"hidden md:flex items-center"},React.createElement("li",{className:"ui-meganav-item"},React.createElement("a",{href:absUrl("/contact"),className:`ui-meganav-link ${theme.textColor}`,"data-id":"meganav-link"},"Contact us")),React.createElement("li",{className:"ui-meganav-item"},React.createElement("a",{href:absUrl(loginLink),className:`ui-meganav-link mr-0 ${theme.textColor}`,"data-id":"meganav-link"},"Login")),React.createElement("li",{className:"ui-meganav-item"},React.createElement(MeganavSearch,{absUrl:absUrl})),React.createElement("li",{className:"ui-meganav-item"},React.createElement("a",{href:absUrl("/sign-up"),"data-id":"meganav-sign-up-btn",className:`ui-btn p-btn-small ${theme.buttonBackgroundColor} ${theme.buttonTextColor}`},"Sign up free")))};const SignInPlaceholder=()=>React.createElement("div",null);const panels={MeganavContentProducts,MeganavContentUseCases,MeganavContentCompany,MeganavContentDevelopers};const Meganav=({paths,themeName="white",notice,loginLink="/login",urlBase,addSearchApiKey,statusUrl})=>{const[sessionState,setSessionState]=useState();useEffect(()=>{connectState(selectSessionData,setSessionState)},[]);useEffect(()=>{const teardown=MeganavScripts({themeName,addSearchApiKey});return()=>teardown()},[sessionState]);const theme=MeganavData.themes[themeName];const absUrl=path=>_absUrl(path,urlBase);return React.createElement("nav",{className:`ui-meganav-wrapper ${theme.backgroundColor} ${theme.barShadow}`,"data-id":"meganav","aria-label":"Main"},notice&&React.createElement(Notice,{...notice.props,config:notice.config}),React.createElement("div",{className:"ui-meganav ui-grid-px"},React.createElement("div",{className:"mr-24"},React.createElement(Logo,{dataId:"meganav-logo",href:urlBase,logoUrl:paths?.logo??""})),React.createElement(MeganavItemsDesktop,{panels:panels,paths:paths,theme:theme,absUrl:absUrl,statusUrl:statusUrl}),sessionState?React.createElement(SignIn,{sessionState:sessionState,theme:theme,loginLink:loginLink,absUrl:absUrl}):React.createElement(SignInPlaceholder,null),React.createElement(MeganavItemsMobile,{panels:panels,sessionState:sessionState,paths:paths,theme:theme,loginLink:loginLink,absUrl:absUrl,statusUrl:statusUrl})))};export default Meganav;

package/core/MeganavItemsMobile.js

@@ -1 +1 @@
-import React from"react";import SignOutLink from"./SignOutLink";import MeganavSearchSuggestions from"./MeganavSearchSuggestions";import Icon from"./Icon";import MeganavData from"./Meganav/component.json";import MeganavControlMobileDropdown from"./MeganavControlMobileDropdown";import MeganavControlMobilePanelClose from"./MeganavControlMobilePanelClose";import MeganavControlMobilePanelOpen from"./MeganavControlMobilePanelOpen";import MeganavSearchAutocomplete from"./MeganavSearchAutocomplete";const MeganavItemsMobile=({panels,paths,sessionState,theme,loginLink,absUrl,statusUrl})=>{const classNames=`ui-meganav-link ${theme.textColor}`;return React.createElement("ul",{className:"flex md:hidden items-center","data-id":"meganav-items-mobile"},React.createElement("li",null,(sessionState===null||sessionState===void 0?void 0:sessionState.signedIn)&&(sessionState===null||sessionState===void 0?void 0:sessionState.logOut)?React.createElement(SignOutLink,{absUrl:absUrl,...sessionState.logOut},({text,href,onClick})=>React.createElement("a",{onClick:onClick,href:absUrl(href),className:classNames,"data-id":"meganav-link"},text)):React.createElement("a",{href:absUrl(loginLink),className:classNames,"data-id":"meganav-link"},"Login")),React.createElement("li",{className:"ui-meganav-item"},React.createElement(MeganavControlMobileDropdown,{theme:theme}),React.createElement("div",{className:"ui-meganav-mobile-dropdown invisible",id:"meganav-mobile-dropdown","data-id":"meganav-mobile-dropdown"},React.createElement("div",{className:"pt-24 pb-16 ui-grid-px bg-white"},React.createElement("form",{className:"mb-16",action:absUrl("/search"),method:"get"},React.createElement("div",{className:"relative w-full"},React.createElement(Icon,{name:"icon-gui-search",color:"text-cool-black",size:"1.5rem",additionalCSS:"absolute top-12 left-16 hover:text-gui-hover"}),React.createElement("button",{type:"button",className:"absolute top-12 right-16 p-0 focus:outline-gui-focus m-0 md:hidden invisible","data-id":"meganav-search-input-clear"},React.createElement(Icon,{name:"icon-gui-cross-circled-fill",color:"text-dark-grey",size:"1.5rem",additionalCSS:""})),React.createElement("input",{type:"search",name:"q",className:"ui-input px-48 h-48",style:{maxWidth:"none"},placeholder:"Search",autoComplete:"off","data-id":"meganav-mobile-search-input"}),React.createElement(MeganavSearchAutocomplete,null))),React.createElement("div",{className:"max-h-0 overflow-hidden transition-all","data-id":"meganav-mobile-search-suggestions"},React.createElement(MeganavSearchSuggestions,{absUrl:absUrl,displaySupportLink:false})),React.createElement("ul",{className:"mb-16","data-id":"meganav-mobile-panel-controls"},MeganavData.panels.map(panel=>{const PanelComponent=panels[panel.component];const displayHr=["company-panel","developers-panel"].includes(panel.id);return React.createElement("li",{className:"ui-meganav-mobile-item",key:`${panel.id}-mobile`},React.createElement(MeganavControlMobilePanelOpen,{ariaControls:`${panel.id}-mobile`},panel.label),React.createElement("div",{className:"ui-meganav-panel-mobile hidden",id:`${panel.id}-mobile`,"data-scroll-lock-scrollable":true},React.createElement(MeganavControlMobilePanelClose,{ariaControls:`${panel.id}-mobile`,displayHr:displayHr}),React.createElement(PanelComponent,{paths:paths,absUrl:absUrl,statusUrl:statusUrl})))}),React.createElement("li",null,React.createElement("a",{href:absUrl("/pricing"),className:"ui-meganav-mobile-link"},"Pricing"))),React.createElement("hr",{className:"ui-meganav-hr mb-20"}),React.createElement("div",{className:"flex justify-between items-center mb-16"},React.createElement("a",{href:absUrl("/contact"),className:"text-menu2 font-medium block ml-0 mr-8 lg:mx-12 p-0 hover:text-gui-hover focus:text-gui-focus focus:outline-none"},"Contact us"),(sessionState===null||sessionState===void 0?void 0:sessionState.signedIn)&&(sessionState===null||sessionState===void 0?void 0:sessionState.account)?React.createElement("a",{href:absUrl(sessionState.account.links.dashboard.href),className:"ui-btn-secondary"},"Dashboard"):React.createElement("a",{href:absUrl("/sign-up"),className:"ui-btn"},"Sign up free"))))))};export default React.memo(MeganavItemsMobile,(oldState,newState)=>{const{paths:pathsOld,theme:themeOld}=oldState;const{paths:pathsNew,theme:themeNew}=newState;return pathsOld===pathsNew&&themeOld===themeNew&&Object.keys(newState.sessionState||{}).length===0});
+import React from"react";import SignOutLink from"./SignOutLink";import MeganavSearchSuggestions from"./MeganavSearchSuggestions";import Icon from"./Icon";import MeganavData from"./Meganav/component.json";import MeganavControlMobileDropdown from"./MeganavControlMobileDropdown";import MeganavControlMobilePanelClose from"./MeganavControlMobilePanelClose";import MeganavControlMobilePanelOpen from"./MeganavControlMobilePanelOpen";import MeganavSearchAutocomplete from"./MeganavSearchAutocomplete";const MeganavItemsMobile=({panels,paths,sessionState,theme,loginLink,absUrl,statusUrl})=>{const classNames=`ui-meganav-link ${theme.textColor}`;return React.createElement("ul",{className:"flex md:hidden items-center","data-id":"meganav-items-mobile"},React.createElement("li",null,sessionState?.signedIn&&sessionState?.logOut?React.createElement(SignOutLink,{absUrl:absUrl,...sessionState.logOut},({text,href,onClick})=>React.createElement("a",{onClick:onClick,href:absUrl(href),className:classNames,"data-id":"meganav-link"},text)):React.createElement("a",{href:absUrl(loginLink),className:classNames,"data-id":"meganav-link"},"Login")),React.createElement("li",{className:"ui-meganav-item"},React.createElement(MeganavControlMobileDropdown,{theme:theme}),React.createElement("div",{className:"ui-meganav-mobile-dropdown invisible",id:"meganav-mobile-dropdown","data-id":"meganav-mobile-dropdown"},React.createElement("div",{className:"pt-24 pb-16 ui-grid-px bg-white"},React.createElement("form",{className:"mb-16",action:absUrl("/search"),method:"get"},React.createElement("div",{className:"relative w-full"},React.createElement(Icon,{name:"icon-gui-search",color:"text-cool-black",size:"1.5rem",additionalCSS:"absolute top-12 left-16 hover:text-gui-hover"}),React.createElement("button",{type:"button",className:"absolute top-12 right-16 p-0 focus:outline-gui-focus m-0 md:hidden invisible","data-id":"meganav-search-input-clear"},React.createElement(Icon,{name:"icon-gui-cross-circled-fill",color:"text-dark-grey",size:"1.5rem",additionalCSS:""})),React.createElement("input",{type:"search",name:"q",className:"ui-input px-48 h-48",style:{maxWidth:"none"},placeholder:"Search",autoComplete:"off","data-id":"meganav-mobile-search-input"}),React.createElement(MeganavSearchAutocomplete,null))),React.createElement("div",{className:"max-h-0 overflow-hidden transition-all","data-id":"meganav-mobile-search-suggestions"},React.createElement(MeganavSearchSuggestions,{absUrl:absUrl,displaySupportLink:false})),React.createElement("ul",{className:"mb-16","data-id":"meganav-mobile-panel-controls"},MeganavData.panels.map(panel=>{const PanelComponent=panels[panel.component];const displayHr=["company-panel","developers-panel"].includes(panel.id);return React.createElement("li",{className:"ui-meganav-mobile-item",key:`${panel.id}-mobile`},React.createElement(MeganavControlMobilePanelOpen,{ariaControls:`${panel.id}-mobile`},panel.label),React.createElement("div",{className:"ui-meganav-panel-mobile hidden",id:`${panel.id}-mobile`,"data-scroll-lock-scrollable":true},React.createElement(MeganavControlMobilePanelClose,{ariaControls:`${panel.id}-mobile`,displayHr:displayHr}),React.createElement(PanelComponent,{paths:paths,absUrl:absUrl,statusUrl:statusUrl})))}),React.createElement("li",null,React.createElement("a",{href:absUrl("/pricing"),className:"ui-meganav-mobile-link"},"Pricing"))),React.createElement("hr",{className:"ui-meganav-hr mb-20"}),React.createElement("div",{className:"flex justify-between items-center mb-16"},React.createElement("a",{href:absUrl("/contact"),className:"text-menu2 font-medium block ml-0 mr-8 lg:mx-12 p-0 hover:text-gui-hover focus:text-gui-focus focus:outline-none"},"Contact us"),sessionState?.signedIn&&sessionState?.account?React.createElement("a",{href:absUrl(sessionState.account.links.dashboard.href),className:"ui-btn-secondary"},"Dashboard"):React.createElement("a",{href:absUrl("/sign-up"),className:"ui-btn"},"Sign up free"))))))};export default React.memo(MeganavItemsMobile,(oldState,newState)=>{const{paths:pathsOld,theme:themeOld}=oldState;const{paths:pathsNew,theme:themeNew}=newState;return pathsOld===pathsNew&&themeOld===themeNew&&Object.keys(newState.sessionState||{}).length===0});

package/core/MeganavItemsSignedIn.js

@@ -1 +1 @@
-import React from"react";import MeganavSearch from"./MeganavSearch";const truncate=(string,length)=>{return(string===null||string===void 0?void 0:string.length)&&string.length>length?`${string.slice(0,length-1)}…`:string};const MeganavItemsSignedIn=({sessionState,absUrl})=>{const accountName=truncate(sessionState.accountName,20);return React.createElement("ul",{className:"hidden md:flex items-center"},React.createElement("li",{className:"ui-meganav-item relative"},React.createElement("span",{className:"ui-meganav-link h-64 hover:text-cool-black mr-0"},accountName)),React.createElement("li",null,React.createElement(MeganavSearch,{absUrl:absUrl})),sessionState.account&&React.createElement("li",null,React.createElement("a",{href:absUrl(sessionState.account.links.dashboard.href),className:"ui-btn-secondary p-btn-small"},"Dashboard")))};export default MeganavItemsSignedIn;
+import React from"react";import MeganavSearch from"./MeganavSearch";const truncate=(string,length)=>{return string?.length&&string.length>length?`${string.slice(0,length-1)}…`:string};const MeganavItemsSignedIn=({sessionState,absUrl})=>{const accountName=truncate(sessionState.accountName,20);return React.createElement("ul",{className:"hidden md:flex items-center"},React.createElement("li",{className:"ui-meganav-item relative"},React.createElement("span",{className:"ui-meganav-link h-64 hover:text-cool-black mr-0"},accountName)),React.createElement("li",null,React.createElement(MeganavSearch,{absUrl:absUrl})),sessionState.account&&React.createElement("li",null,React.createElement("a",{href:absUrl(sessionState.account.links.dashboard.href),className:"ui-btn-secondary p-btn-small"},"Dashboard")))};export default MeganavItemsSignedIn;

package/core/MeganavSearchSuggestions/component.js

@@ -1 +1 @@
-import{queryId}from"../dom-query";const DRAG_BUFFER=5;const getTranslateX=node=>new DOMMatrix(window.getComputedStyle(node).transform).e;const updateTranslateX=(node,value)=>node.style.transform=`translateX(${value}px)`;const dragLeftBoundary=(translateX,threshold)=>translateX>=threshold;const dragRightBoundary=(translateX,itemsWidth,windowWidth,threshold)=>Math.abs(translateX-windowWidth+threshold)>itemsWidth;const getDistance=(e,touchStartX)=>{var _e_changedTouches_;return((_e_changedTouches_=e.changedTouches[0])===null||_e_changedTouches_===void 0?void 0:_e_changedTouches_.clientX)-touchStartX};const withinBuffer=distance=>Math.abs(distance)<DRAG_BUFFER;const getItemsTotalWidth=nodes=>nodes.map(item=>item.getBoundingClientRect().width).reduce((acc,val)=>acc+val,0);const MeganavSearchSuggestions=()=>{const suggestionsToggle=queryId("meganav-mobile-search-input");const suggestions=queryId("meganav-mobile-search-suggestions");const list=suggestions.querySelector("ul");const listItems=Array.from(list.querySelectorAll("li"));const dragLeft=(distance,threshold)=>{const currentTranslateX=getTranslateX(list);const translateX=Math.round(currentTranslateX+distance);if(dragLeftBoundary(translateX,threshold))return;updateTranslateX(list,translateX)};const dragLeftEnd=(distance,threshold)=>{const currentTranslateX=getTranslateX(list);let translateX=Math.round(currentTranslateX+distance);if(dragLeftBoundary(translateX,threshold)){translateX=0}updateTranslateX(list,translateX)};const dragRight=(distance,threshold)=>{const listWidth=list.getBoundingClientRect().width;const currentTranslateX=getTranslateX(list);const translateX=Math.round(currentTranslateX+distance);const itemsTotalWidth=getItemsTotalWidth(listItems);if(dragRightBoundary(translateX,itemsTotalWidth,listWidth,threshold)){return}updateTranslateX(list,translateX)};const dragRightEnd=(distance,threshold)=>{const listWidth=list.getBoundingClientRect().width;const currentTranslateX=getTranslateX(list);const itemsTotalWidth=getItemsTotalWidth(listItems);let translateX=Math.round(currentTranslateX+distance);if(dragRightBoundary(translateX,itemsTotalWidth,listWidth,threshold)){translateX=-(itemsTotalWidth-listWidth+threshold)}updateTranslateX(list,translateX)};let touchStartX;const touchstartHandler=e=>{var _e_touches_;touchStartX=(_e_touches_=e.touches[0])===null||_e_touches_===void 0?void 0:_e_touches_.clientX};const touchmoveHandler=e=>{const distance=getDistance(e,touchStartX);if(withinBuffer(distance))return;distance>0?dragLeft(distance,24):dragRight(distance,96)};const touchendHandler=e=>{const distance=getDistance(e,touchStartX);if(withinBuffer(distance))return;distance>0?dragLeftEnd(distance,24):dragRightEnd(distance,48)};const focusSuggestionsHandler=()=>{suggestions.classList.add("max-h-96")};const blurSuggestionsHandler=e=>{if(e.relatedTarget===suggestions.querySelectorAll("a")[0]){return}suggestions.classList.remove("max-h-96")};const wheelHandler=e=>{const distance=e.deltaY*4;if(withinBuffer(distance))return;distance>0?dragLeftEnd(distance,24):dragRightEnd(distance,48)};suggestionsToggle.addEventListener("focus",focusSuggestionsHandler);suggestionsToggle.addEventListener("blur",blurSuggestionsHandler);suggestions.addEventListener("touchstart",touchstartHandler);suggestions.addEventListener("touchmove",touchmoveHandler);suggestions.addEventListener("touchend",touchendHandler);suggestions.addEventListener("wheel",wheelHandler);return{teardown:()=>{suggestionsToggle.removeEventListener("focus",focusSuggestionsHandler);suggestionsToggle.removeEventListener("blur",blurSuggestionsHandler);suggestions.removeEventListener("touchstart",touchstartHandler);suggestions.removeEventListener("touchmove",touchmoveHandler);suggestions.removeEventListener("touchend",touchendHandler)},clear:()=>{suggestions.classList.remove("max-h-96");list.style.transform=`translateX(0px)`}}};export default MeganavSearchSuggestions;
+import{queryId}from"../dom-query";const DRAG_BUFFER=5;const getTranslateX=node=>new DOMMatrix(window.getComputedStyle(node).transform).e;const updateTranslateX=(node,value)=>node.style.transform=`translateX(${value}px)`;const dragLeftBoundary=(translateX,threshold)=>translateX>=threshold;const dragRightBoundary=(translateX,itemsWidth,windowWidth,threshold)=>Math.abs(translateX-windowWidth+threshold)>itemsWidth;const getDistance=(e,touchStartX)=>e.changedTouches[0]?.clientX-touchStartX;const withinBuffer=distance=>Math.abs(distance)<DRAG_BUFFER;const getItemsTotalWidth=nodes=>nodes.map(item=>item.getBoundingClientRect().width).reduce((acc,val)=>acc+val,0);const MeganavSearchSuggestions=()=>{const suggestionsToggle=queryId("meganav-mobile-search-input");const suggestions=queryId("meganav-mobile-search-suggestions");const list=suggestions.querySelector("ul");const listItems=Array.from(list.querySelectorAll("li"));const dragLeft=(distance,threshold)=>{const currentTranslateX=getTranslateX(list);const translateX=Math.round(currentTranslateX+distance);if(dragLeftBoundary(translateX,threshold))return;updateTranslateX(list,translateX)};const dragLeftEnd=(distance,threshold)=>{const currentTranslateX=getTranslateX(list);let translateX=Math.round(currentTranslateX+distance);if(dragLeftBoundary(translateX,threshold)){translateX=0}updateTranslateX(list,translateX)};const dragRight=(distance,threshold)=>{const listWidth=list.getBoundingClientRect().width;const currentTranslateX=getTranslateX(list);const translateX=Math.round(currentTranslateX+distance);const itemsTotalWidth=getItemsTotalWidth(listItems);if(dragRightBoundary(translateX,itemsTotalWidth,listWidth,threshold)){return}updateTranslateX(list,translateX)};const dragRightEnd=(distance,threshold)=>{const listWidth=list.getBoundingClientRect().width;const currentTranslateX=getTranslateX(list);const itemsTotalWidth=getItemsTotalWidth(listItems);let translateX=Math.round(currentTranslateX+distance);if(dragRightBoundary(translateX,itemsTotalWidth,listWidth,threshold)){translateX=-(itemsTotalWidth-listWidth+threshold)}updateTranslateX(list,translateX)};let touchStartX;const touchstartHandler=e=>{touchStartX=e.touches[0]?.clientX};const touchmoveHandler=e=>{const distance=getDistance(e,touchStartX);if(withinBuffer(distance))return;distance>0?dragLeft(distance,24):dragRight(distance,96)};const touchendHandler=e=>{const distance=getDistance(e,touchStartX);if(withinBuffer(distance))return;distance>0?dragLeftEnd(distance,24):dragRightEnd(distance,48)};const focusSuggestionsHandler=()=>{suggestions.classList.add("max-h-96")};const blurSuggestionsHandler=e=>{if(e.relatedTarget===suggestions.querySelectorAll("a")[0]){return}suggestions.classList.remove("max-h-96")};const wheelHandler=e=>{const distance=e.deltaY*4;if(withinBuffer(distance))return;distance>0?dragLeftEnd(distance,24):dragRightEnd(distance,48)};suggestionsToggle.addEventListener("focus",focusSuggestionsHandler);suggestionsToggle.addEventListener("blur",blurSuggestionsHandler);suggestions.addEventListener("touchstart",touchstartHandler);suggestions.addEventListener("touchmove",touchmoveHandler);suggestions.addEventListener("touchend",touchendHandler);suggestions.addEventListener("wheel",wheelHandler);return{teardown:()=>{suggestionsToggle.removeEventListener("focus",focusSuggestionsHandler);suggestionsToggle.removeEventListener("blur",blurSuggestionsHandler);suggestions.removeEventListener("touchstart",touchstartHandler);suggestions.removeEventListener("touchmove",touchmoveHandler);suggestions.removeEventListener("touchend",touchendHandler)},clear:()=>{suggestions.classList.remove("max-h-96");list.style.transform=`translateX(0px)`}}};export default MeganavSearchSuggestions;

package/core/Notice.js

@@ -1 +1 @@
-import React,{useEffect}from"react";import NoticeScripts from"./Notice/component.js";import Icon from"./Icon";const contentWrapperClasses="w-full pr-8 ui-text-p3 self-center";const ContentWrapper=({buttonLink,children})=>buttonLink?React.createElement("a",{href:buttonLink,className:contentWrapperClasses},children):React.createElement("div",{className:contentWrapperClasses},children);const Notice=({buttonLink,buttonLabel,bodyText,title,config,closeBtn,bgColor="bg-gradient-active-orange",textColor="text-white"})=>{useEffect(()=>{NoticeScripts({bannerContainer:document.querySelector('[data-id="ui-notice"]'),cookieId:config===null||config===void 0?void 0:config.cookieId,noticeId:config===null||config===void 0?void 0:config.noticeId,options:{collapse:(config===null||config===void 0?void 0:config.collapse)||false}})},[]);const wrapperClasses=["ui-announcement",bgColor,textColor].join(" ");return React.createElement("div",{className:wrapperClasses,"data-id":"ui-notice",style:{maxHeight:0,overflow:"hidden"}},React.createElement("div",{className:"ui-grid-px py-16 max-w-screen-xl mx-auto flex items-start"},React.createElement(ContentWrapper,{buttonLink:buttonLink!==null&&buttonLink!==void 0?buttonLink:"#"},React.createElement("strong",{className:"font-bold whitespace-nowrap pr-4"},title),React.createElement("span",{className:"pr-4"},bodyText),buttonLabel&&React.createElement("span",{className:"underline cursor-pointer whitespace-nowrap"},buttonLabel)),closeBtn&&React.createElement("button",{type:"button",className:"ml-auto h-20 w-20 border-none bg-none self-baseline"},React.createElement(Icon,{name:"icon-gui-close",size:"1.25rem",color:"text-cool-black"}))))};export default Notice;
+import React,{useEffect}from"react";import NoticeScripts from"./Notice/component.js";import Icon from"./Icon";const contentWrapperClasses="w-full pr-8 ui-text-p3 self-center";const ContentWrapper=({buttonLink,children})=>buttonLink?React.createElement("a",{href:buttonLink,className:contentWrapperClasses},children):React.createElement("div",{className:contentWrapperClasses},children);const Notice=({buttonLink,buttonLabel,bodyText,title,config,closeBtn,bgColor="bg-gradient-active-orange",textColor="text-white"})=>{useEffect(()=>{NoticeScripts({bannerContainer:document.querySelector('[data-id="ui-notice"]'),cookieId:config?.cookieId,noticeId:config?.noticeId,options:{collapse:config?.collapse||false}})},[]);const wrapperClasses=["ui-announcement",bgColor,textColor].join(" ");return React.createElement("div",{className:wrapperClasses,"data-id":"ui-notice",style:{maxHeight:0,overflow:"hidden"}},React.createElement("div",{className:"ui-grid-px py-16 max-w-screen-xl mx-auto flex items-start"},React.createElement(ContentWrapper,{buttonLink:buttonLink??"#"},React.createElement("strong",{className:"font-bold whitespace-nowrap pr-4"},title),React.createElement("span",{className:"pr-4"},bodyText),buttonLabel&&React.createElement("span",{className:"underline cursor-pointer whitespace-nowrap"},buttonLabel)),closeBtn&&React.createElement("button",{type:"button",className:"ml-auto h-20 w-20 border-none bg-none self-baseline"},React.createElement(Icon,{name:"icon-gui-close",size:"1.25rem",color:"text-cool-black"}))))};export default Notice;

package/core/SignOutLink.js

@@ -1 +1 @@
-import React,{useRef}from"react";const SignOutLink=({token,href,text,children,absUrl})=>{const formRef=useRef(null);const onClick=e=>{var _formRef_current;(_formRef_current=formRef.current)===null||_formRef_current===void 0?void 0:_formRef_current.submit();e.preventDefault()};return React.createElement(React.Fragment,null,React.createElement("form",{ref:formRef,method:"post",action:absUrl(href),className:"hidden"},React.createElement("input",{name:"_method",value:"delete",type:"hidden"}),React.createElement("input",{name:"authenticity_token",value:token,type:"hidden"})),children({href,text,onClick}))};export default SignOutLink;
+import React,{useRef}from"react";const SignOutLink=({token,href,text,children,absUrl})=>{const formRef=useRef(null);const onClick=e=>{formRef.current?.submit();e.preventDefault()};return React.createElement(React.Fragment,null,React.createElement("form",{ref:formRef,method:"post",action:absUrl(href),className:"hidden"},React.createElement("input",{name:"_method",value:"delete",type:"hidden"}),React.createElement("input",{name:"authenticity_token",value:token,type:"hidden"})),children({href,text,onClick}))};export default SignOutLink;

package/core/Slider/component.js

@@ -1 +1 @@
-import throttle from"lodash.throttle";import{queryId,queryIdAll}from"../dom-query";const mdBreakpoint=()=>window.matchMedia("(min-width: 48rem)").matches;const DRAG_BUFFER=20;const init=slidesContainer=>{const transformContainer=queryId("slider-strip",slidesContainer);const slides=Array.from(queryIdAll("slider-slide",slidesContainer));const slideLeftChevron=queryId("slider-previous",slidesContainer);const slideRightChevron=queryId("slider-next",slidesContainer);const slideMarkers=Array.from(queryIdAll("slider-marker",slidesContainer));const sliderControls=queryId("slider-controls",slidesContainer);sliderControls.classList.replace("hidden","flex");const slidesLength=slides.length;const slidesWidth=slidesContainer.getBoundingClientRect().width;const{width:slideWidth,left:slideLeftDistance}=slides[0].getBoundingClientRect();const{left:slideLeftDistanceSecond}=slides[1].getBoundingClientRect();const slideGap=slideLeftDistanceSecond-slideLeftDistance-slideWidth;const adjustment=(slidesWidth-slideWidth)/2;let currentIndex=0;let touchStartX=0;const calculateTransform=index=>index*-slideWidth+adjustment+index*-slideGap;const updateSlide=index=>transformContainer.style.transform=`translateX(${calculateTransform(index)}px)`;const updateMarkers=index=>{slideMarkers.forEach(marker=>marker.classList.remove("text-active-orange"));slideMarkers[index].classList.remove("text-cool-black");slideMarkers[index].classList.add("text-active-orange")};const slideLeft=()=>{currentIndex=currentIndex-1<=0?0:currentIndex-1;updateSlide(currentIndex);updateMarkers(currentIndex)};const slideRight=()=>{currentIndex=currentIndex+1>=slidesLength?currentIndex:currentIndex+1;updateSlide(currentIndex);updateMarkers(currentIndex)};updateSlide(0);updateMarkers(0);slideLeftChevron.addEventListener("click",slideLeft);transformContainer.addEventListener("touchstart",e=>{var _e_touches_;touchStartX=(_e_touches_=e.touches[0])===null||_e_touches_===void 0?void 0:_e_touches_.clientX});transformContainer.addEventListener("touchend",e=>{var _e_changedTouches_;const distance=((_e_changedTouches_=e.changedTouches[0])===null||_e_changedTouches_===void 0?void 0:_e_changedTouches_.clientX)-touchStartX;if(Math.abs(distance)<DRAG_BUFFER)return;const direction=distance>0?slideLeft:slideRight;direction()});slideRightChevron.addEventListener("click",slideRight);return()=>{transformContainer.style.transform=null;sliderControls.classList.replace("flex","hidden")}};const Slider=({container,mqEnableThreshold})=>{if(!container)return;const breakpointCheck=mqEnableThreshold||(()=>!mdBreakpoint());let unmount=()=>{};if(breakpointCheck())unmount=init(container);window.addEventListener("resize",throttle(()=>{if(breakpointCheck()){unmount=init(container)}else{unmount()}},100))};export default Slider;
+import throttle from"lodash.throttle";import{queryId,queryIdAll}from"../dom-query";const mdBreakpoint=()=>window.matchMedia("(min-width: 48rem)").matches;const DRAG_BUFFER=20;const init=slidesContainer=>{const transformContainer=queryId("slider-strip",slidesContainer);const slides=Array.from(queryIdAll("slider-slide",slidesContainer));const slideLeftChevron=queryId("slider-previous",slidesContainer);const slideRightChevron=queryId("slider-next",slidesContainer);const slideMarkers=Array.from(queryIdAll("slider-marker",slidesContainer));const sliderControls=queryId("slider-controls",slidesContainer);sliderControls.classList.replace("hidden","flex");const slidesLength=slides.length;const slidesWidth=slidesContainer.getBoundingClientRect().width;const{width:slideWidth,left:slideLeftDistance}=slides[0].getBoundingClientRect();const{left:slideLeftDistanceSecond}=slides[1].getBoundingClientRect();const slideGap=slideLeftDistanceSecond-slideLeftDistance-slideWidth;const adjustment=(slidesWidth-slideWidth)/2;let currentIndex=0;let touchStartX=0;const calculateTransform=index=>index*-slideWidth+adjustment+index*-slideGap;const updateSlide=index=>transformContainer.style.transform=`translateX(${calculateTransform(index)}px)`;const updateMarkers=index=>{slideMarkers.forEach(marker=>marker.classList.remove("text-active-orange"));slideMarkers[index].classList.remove("text-cool-black");slideMarkers[index].classList.add("text-active-orange")};const slideLeft=()=>{currentIndex=currentIndex-1<=0?0:currentIndex-1;updateSlide(currentIndex);updateMarkers(currentIndex)};const slideRight=()=>{currentIndex=currentIndex+1>=slidesLength?currentIndex:currentIndex+1;updateSlide(currentIndex);updateMarkers(currentIndex)};updateSlide(0);updateMarkers(0);slideLeftChevron.addEventListener("click",slideLeft);transformContainer.addEventListener("touchstart",e=>{touchStartX=e.touches[0]?.clientX});transformContainer.addEventListener("touchend",e=>{const distance=e.changedTouches[0]?.clientX-touchStartX;if(Math.abs(distance)<DRAG_BUFFER)return;const direction=distance>0?slideLeft:slideRight;direction()});slideRightChevron.addEventListener("click",slideRight);return()=>{transformContainer.style.transform=null;sliderControls.classList.replace("flex","hidden")}};const Slider=({container,mqEnableThreshold})=>{if(!container)return;const breakpointCheck=mqEnableThreshold||(()=>!mdBreakpoint());let unmount=()=>{};if(breakpointCheck())unmount=init(container);window.addEventListener("resize",throttle(()=>{if(breakpointCheck()){unmount=init(container)}else{unmount()}},100))};export default Slider;

package/core/Slider.js

@@ -1 +1 @@
-import React,{useState,useEffect,useRef}from"react";import Icon from"./Icon";const SLIDE_TRANSITION_LENGTH=300;const SlideIndicator=({numSlides,activeIndex,interval,intervalIndicator,isInline})=>{return React.createElement("ul",{className:`flex gap-4 left-1/2 ${isInline?"bottom-0":"absolute bottom-0 transform -translate-x-1/2"}`},Array.from({length:numSlides},(_,i)=>intervalIndicator?React.createElement("li",{key:i,className:"relative w-40 h-4 mx-1 rounded-full bg-neutral-500"},i===activeIndex&&React.createElement("span",{className:"absolute inset-0 rounded-full bg-active-orange",style:{animation:`fillAnimation ${interval}ms linear`}})):React.createElement("li",{key:i},React.createElement("span",{className:`ui-slider-marker ${i===activeIndex?"text-active-orange":"text-cool-black"}`,"data-id":"slider-marker"},"⬤"))))};const setupSlides=(children,activeIndex)=>[children[activeIndex===0?children.length-1:activeIndex-1],children[activeIndex],children[activeIndex===children.length-1?0:activeIndex+1]];const Slider=({children,options})=>{const[activeIndex,setActiveIndex]=useState(0);const[touchStartX,setTouchStartX]=useState(0);const[touchEndX,setTouchEndX]=useState(0);const[slides,setSlides]=useState(setupSlides(children,activeIndex));const[translationCoefficient,setTranslationCoefficient]=useState(0);const timerRef=useRef(null);const[slideLock,setSlideLock]=useState(false);const isInline=(options===null||options===void 0?void 0:options.controlPosition)==="inline";const next=()=>{if(!slideLock){setActiveIndex(prevIndex=>(prevIndex+1)%children.length);setTranslationCoefficient(1);resetInterval();setSlideLock(true)}};const prev=()=>{if(!slideLock){setActiveIndex(prevIndex=>prevIndex>0?prevIndex-1:children.length-1);setTranslationCoefficient(-1);resetInterval();setSlideLock(true)}};const resetInterval=()=>{if(timerRef.current)clearInterval(timerRef.current);var _options_interval;timerRef.current=setInterval(next,(_options_interval=options===null||options===void 0?void 0:options.interval)!==null&&_options_interval!==void 0?_options_interval:1e4)};const handleTouchStart=e=>{setTouchStartX(e.touches[0].clientX)};const handleTouchMove=e=>{setTouchEndX(e.touches[0].clientX)};const handleTouchEnd=()=>{if(touchStartX-touchEndX>50){next()}if(touchStartX-touchEndX<-50){prev()}};useEffect(()=>{resetInterval();return()=>{if(timerRef.current)clearInterval(timerRef.current)}},[children.length,options===null||options===void 0?void 0:options.interval]);useEffect(()=>{setTimeout(()=>{setSlides(setupSlides(children,activeIndex));setTranslationCoefficient(0);setSlideLock(false)},SLIDE_TRANSITION_LENGTH)},[activeIndex]);var _options_interval;return React.createElement("div",{className:"relative",onTouchStart:handleTouchStart,onTouchMove:handleTouchMove,onTouchEnd:handleTouchEnd},React.createElement("div",{className:"overflow-y-visible overflow-x-clip w-full py-40"},React.createElement("div",{className:`flex items-center ${translationCoefficient!==0?`transition-transform ease-in-out duration-${SLIDE_TRANSITION_LENGTH}`:""} `,style:{transform:`translateX(-${(translationCoefficient+1)*100}%)`}},slides.map((child,index)=>React.createElement("div",{key:index,className:"w-full flex-shrink-0 flex justify-center sm:px-60"},child)))),React.createElement("div",{className:`flex items-center pointer-events-none ${isInline?"ui-standard-container justify-center gap-24 -mt-16":"sm:flex sm:absolute inset-0 justify-between"}`},React.createElement("button",{className:`${isInline?"w-32 h-32":"hidden sm:flex w-48 h-48"} pointer-events-auto rounded border border-mid-grey hover:border-active-orange flex justify-center items-center ui-icon-cta ui-icon-cta-left`,onClick:prev},React.createElement("div",{className:"ui-icon-cta-holder flex w-48"},React.createElement("div",{className:"w-full h-full flex-shrink-0 flex items-center justify-center"},React.createElement(Icon,{name:"icon-gui-arrow-left",size:"1.5rem"})),React.createElement("div",{className:"w-full h-full flex-shrink-0 flex items-center justify-center"},React.createElement(Icon,{name:"icon-gui-arrow-left",size:"1.5rem"})))),React.createElement(SlideIndicator,{numSlides:children.length,activeIndex:activeIndex,interval:(_options_interval=options===null||options===void 0?void 0:options.interval)!==null&&_options_interval!==void 0?_options_interval:1e4,intervalIndicator:options===null||options===void 0?void 0:options.intervalIndicator,isInline:isInline}),React.createElement("button",{className:`${isInline?"w-32 h-32":"hidden sm:flex w-48 h-48"} pointer-events-auto rounded border border-mid-grey hover:border-active-orange justify-center items-center ui-icon-cta ui-icon-cta-right`,onClick:next},React.createElement("div",{className:"ui-icon-cta-holder flex w-48"},React.createElement("div",{className:"w-full h-full flex-shrink-0 flex items-center justify-center"},React.createElement(Icon,{name:"icon-gui-arrow-right",size:"1.5rem"})),React.createElement("div",{className:"w-full h-full flex-shrink-0 flex items-center justify-center"},React.createElement(Icon,{name:"icon-gui-arrow-right",size:"1.5rem"}))))))};export default Slider;
+import React,{useState,useEffect,useRef}from"react";import Icon from"./Icon";const SLIDE_TRANSITION_LENGTH=300;const SlideIndicator=({numSlides,activeIndex,interval,intervalIndicator,isInline})=>{return React.createElement("ul",{className:`flex gap-4 left-1/2 ${isInline?"bottom-0":"absolute bottom-0 transform -translate-x-1/2"}`},Array.from({length:numSlides},(_,i)=>intervalIndicator?React.createElement("li",{key:i,className:"relative w-40 h-4 mx-1 rounded-full bg-neutral-500"},i===activeIndex&&React.createElement("span",{className:"absolute inset-0 rounded-full bg-active-orange",style:{animation:`fillAnimation ${interval}ms linear`}})):React.createElement("li",{key:i},React.createElement("span",{className:`ui-slider-marker ${i===activeIndex?"text-active-orange":"text-cool-black"}`,"data-id":"slider-marker"},"⬤"))))};const setupSlides=(children,activeIndex)=>[children[activeIndex===0?children.length-1:activeIndex-1],children[activeIndex],children[activeIndex===children.length-1?0:activeIndex+1]];const Slider=({children,options})=>{const[activeIndex,setActiveIndex]=useState(0);const[touchStartX,setTouchStartX]=useState(0);const[touchEndX,setTouchEndX]=useState(0);const[slides,setSlides]=useState(setupSlides(children,activeIndex));const[translationCoefficient,setTranslationCoefficient]=useState(0);const timerRef=useRef(null);const[slideLock,setSlideLock]=useState(false);const isInline=options?.controlPosition==="inline";const next=()=>{if(!slideLock){setActiveIndex(prevIndex=>(prevIndex+1)%children.length);setTranslationCoefficient(1);resetInterval();setSlideLock(true)}};const prev=()=>{if(!slideLock){setActiveIndex(prevIndex=>prevIndex>0?prevIndex-1:children.length-1);setTranslationCoefficient(-1);resetInterval();setSlideLock(true)}};const resetInterval=()=>{if(timerRef.current)clearInterval(timerRef.current);timerRef.current=setInterval(next,options?.interval??1e4)};const handleTouchStart=e=>{setTouchStartX(e.touches[0].clientX)};const handleTouchMove=e=>{setTouchEndX(e.touches[0].clientX)};const handleTouchEnd=()=>{if(touchStartX-touchEndX>50){next()}if(touchStartX-touchEndX<-50){prev()}};useEffect(()=>{resetInterval();return()=>{if(timerRef.current)clearInterval(timerRef.current)}},[children.length,options?.interval]);useEffect(()=>{setTimeout(()=>{setSlides(setupSlides(children,activeIndex));setTranslationCoefficient(0);setSlideLock(false)},SLIDE_TRANSITION_LENGTH)},[activeIndex]);return React.createElement("div",{className:"relative",onTouchStart:handleTouchStart,onTouchMove:handleTouchMove,onTouchEnd:handleTouchEnd},React.createElement("div",{className:"overflow-y-visible overflow-x-clip w-full py-40"},React.createElement("div",{className:`flex items-center ${translationCoefficient!==0?`transition-transform ease-in-out duration-${SLIDE_TRANSITION_LENGTH}`:""} `,style:{transform:`translateX(-${(translationCoefficient+1)*100}%)`}},slides.map((child,index)=>React.createElement("div",{key:index,className:"w-full flex-shrink-0 flex justify-center sm:px-60"},child)))),React.createElement("div",{className:`flex items-center pointer-events-none ${isInline?"ui-standard-container justify-center gap-24 -mt-16":"sm:flex sm:absolute inset-0 justify-between"}`},React.createElement("button",{className:`${isInline?"w-32 h-32":"hidden sm:flex w-48 h-48"} pointer-events-auto rounded border border-mid-grey hover:border-active-orange flex justify-center items-center ui-icon-cta ui-icon-cta-left`,onClick:prev},React.createElement("div",{className:"ui-icon-cta-holder flex w-48"},React.createElement("div",{className:"w-full h-full flex-shrink-0 flex items-center justify-center"},React.createElement(Icon,{name:"icon-gui-arrow-left",size:"1.5rem"})),React.createElement("div",{className:"w-full h-full flex-shrink-0 flex items-center justify-center"},React.createElement(Icon,{name:"icon-gui-arrow-left",size:"1.5rem"})))),React.createElement(SlideIndicator,{numSlides:children.length,activeIndex:activeIndex,interval:options?.interval??1e4,intervalIndicator:options?.intervalIndicator,isInline:isInline}),React.createElement("button",{className:`${isInline?"w-32 h-32":"hidden sm:flex w-48 h-48"} pointer-events-auto rounded border border-mid-grey hover:border-active-orange justify-center items-center ui-icon-cta ui-icon-cta-right`,onClick:next},React.createElement("div",{className:"ui-icon-cta-holder flex w-48"},React.createElement("div",{className:"w-full h-full flex-shrink-0 flex items-center justify-center"},React.createElement(Icon,{name:"icon-gui-arrow-right",size:"1.5rem"})),React.createElement("div",{className:"w-full h-full flex-shrink-0 flex items-center justify-center"},React.createElement(Icon,{name:"icon-gui-arrow-right",size:"1.5rem"}))))))};export default Slider;

package/core/Status.js

@@ -1 +1 @@
-import React,{useEffect,useState}from"react";const indicatorClass=indicator=>{switch(indicator){case"none":return"bg-green-500";case"operational":return"bg-green-500";case"minor":return"bg-yellow-500";case"major":return"bg-orange-500";case"critical":return"bg-orange-800";default:return"bg-neutral-500"}};const Status=({statusUrl,additionalCSS})=>{var _data_status;const[data,setData]=useState(null);useEffect(()=>{let interval;if(statusUrl!==""){const fetchData=async()=>{try{const response=await fetch(statusUrl);const jsonData=await response.json();setData(jsonData)}catch(error){console.error("Error fetching status data:",error)}};fetchData();interval=setInterval(fetchData,6e4)}return()=>{clearInterval(interval)}},[statusUrl]);return React.createElement("a",{href:"https://status.ably.com",className:`inline-block ${additionalCSS}`,target:"_blank",rel:"noreferrer"},React.createElement("span",{className:"flex items-center h-[1.5rem] p-[0.25rem]"},React.createElement("span",{className:`w-[1rem] h-[1rem] leading-[1rem] rounded-full ${!data?"animate-pulse":""} ${indicatorClass(data===null||data===void 0?void 0:(_data_status=data.status)===null||_data_status===void 0?void 0:_data_status.indicator)}`})))};export default Status;
+import React,{useEffect,useState}from"react";const indicatorClass=indicator=>{switch(indicator){case"none":return"bg-green-500";case"operational":return"bg-green-500";case"minor":return"bg-yellow-500";case"major":return"bg-orange-500";case"critical":return"bg-orange-800";default:return"bg-neutral-500"}};const Status=({statusUrl,additionalCSS})=>{const[data,setData]=useState(null);useEffect(()=>{let interval;if(statusUrl!==""){const fetchData=async()=>{try{const response=await fetch(statusUrl);const jsonData=await response.json();setData(jsonData)}catch(error){console.error("Error fetching status data:",error)}};fetchData();interval=setInterval(fetchData,6e4)}return()=>{clearInterval(interval)}},[statusUrl]);return React.createElement("a",{href:"https://status.ably.com",className:`inline-block ${additionalCSS}`,target:"_blank",rel:"noreferrer"},React.createElement("span",{className:"flex items-center h-[1.5rem] p-[0.25rem]"},React.createElement("span",{className:`w-[1rem] h-[1rem] leading-[1rem] rounded-full ${!data?"animate-pulse":""} ${indicatorClass(data?.status?.indicator)}`})))};export default Status;

package/core/Table/Table.js

@@ -1 +1 @@
-import React,{cloneElement}from"react";export const Table=({id,children,...rest})=>{var _rest_className;return React.createElement("table",{id:id,...rest,className:`ui-standard-container mb-4 sm:table-fixed ${(_rest_className=rest===null||rest===void 0?void 0:rest.className)!==null&&_rest_className!==void 0?_rest_className:""}`},children)};export const TableBody=({children,...rest})=>React.createElement("tbody",rest,children);export const TableHeader=({children,...rest})=>{var _rest_className;return React.createElement("thead",{...rest,className:`sticky bg-white z-10 top-0 ${(_rest_className=rest===null||rest===void 0?void 0:rest.className)!==null&&_rest_className!==void 0?_rest_className:""}`},cloneElement(children,{isHeader:true}))};export const TableRowHeader=({children,...rest})=>{var _rest_className;return React.createElement("tr",{className:`-ml-24 mt-8 sm:ml-0 sm:mt-0 sm:sticky z-10 ${(_rest_className=rest===null||rest===void 0?void 0:rest.className)!==null&&_rest_className!==void 0?_rest_className:""}`},cloneElement(children,{isRowHeader:true}))};
+import React,{cloneElement}from"react";export const Table=({id,children,...rest})=>React.createElement("table",{id:id,...rest,className:`ui-standard-container mb-4 sm:table-fixed ${rest?.className??""}`},children);export const TableBody=({children,...rest})=>React.createElement("tbody",rest,children);export const TableHeader=({children,...rest})=>React.createElement("thead",{...rest,className:`sticky bg-white z-10 top-0 ${rest?.className??""}`},cloneElement(children,{isHeader:true}));export const TableRowHeader=({children,...rest})=>React.createElement("tr",{className:`-ml-24 mt-8 sm:ml-0 sm:mt-0 sm:sticky z-10 ${rest?.className??""}`},cloneElement(children,{isRowHeader:true}));

package/core/Table/TableCell.js

@@ -1,7 +1,7 @@
-import React from"react";const LabelCell=({children,...rest})=>{var _rest_className;const classes=`
-    ui-text-p1 font-bold pt-24 pb-8 border-light-grey sm:p-24 sm:relative sm:top-2 flex sm:table-cell ${(_rest_className=rest===null||rest===void 0?void 0:rest.className)!==null&&_rest_className!==void 0?_rest_className:""}
-  `;return React.createElement("td",{...rest,className:classes},children)};const TableCell=({children,isRowHeader,...rest})=>{var _rest_className;return React.createElement("td",{...rest,className:`
+import React from"react";const LabelCell=({children,...rest})=>{const classes=`
+    ui-text-p1 font-bold pt-24 pb-8 border-light-grey sm:p-24 sm:relative sm:top-2 flex sm:table-cell ${rest?.className??""}
+  `;return React.createElement("td",{...rest,className:classes},children)};const TableCell=({children,isRowHeader,...rest})=>React.createElement("td",{...rest,className:`
         border-light-grey sm:p-24 leading-none flex sm:table-cell
         ${isRowHeader?"rounded-l-none rounded-r sm:rounded-lg py-20 px-24":"py-6"}
-        ${(_rest_className=rest===null||rest===void 0?void 0:rest.className)!==null&&_rest_className!==void 0?_rest_className:""}
-      `},children)};const HeaderCell=({children,...rest})=>{var _rest_className;return React.createElement("td",{...rest,className:`ui-text-h3 px-24 py-24 hidden sm:table-cell ${(_rest_className=rest===null||rest===void 0?void 0:rest.className)!==null&&_rest_className!==void 0?_rest_className:""}`},children)};const CtaCell=({children,...rest})=>{var _rest_className;return React.createElement("td",{...rest,className:`pt-24 hidden sm:table-cell ${(_rest_className=rest===null||rest===void 0?void 0:rest.className)!==null&&_rest_className!==void 0?_rest_className:""}`},children)};export{TableCell,LabelCell,HeaderCell,CtaCell};
+        ${rest?.className??""}
+      `},children);const HeaderCell=({children,...rest})=>React.createElement("td",{...rest,className:`ui-text-h3 px-24 py-24 hidden sm:table-cell ${rest?.className??""}`},children);const CtaCell=({children,...rest})=>React.createElement("td",{...rest,className:`pt-24 hidden sm:table-cell ${rest?.className??""}`},children);export{TableCell,LabelCell,HeaderCell,CtaCell};

package/core/Tooltip.js

@@ -1 +1 @@
-import React,{useEffect,useRef,useState}from"react";import Icon from"./Icon";const Tooltip=({children,triggerProps,tooltipProps,...rest})=>{const[open,setOpen]=useState(false);const[position,setPosition]=useState({x:0,y:0});const offset=8;const reference=useRef(null);const floating=useRef(null);useEffect(()=>{if(open){var _floating_current,_reference_current;const floatingRect=(_floating_current=floating.current)===null||_floating_current===void 0?void 0:_floating_current.getBoundingClientRect();const referenceRect=(_reference_current=reference.current)===null||_reference_current===void 0?void 0:_reference_current.getBoundingClientRect();if(floatingRect&&referenceRect){setPosition({x:Math.min(floatingRect.width/2,floatingRect.left)-referenceRect.width/2,y:Math.min(floatingRect.height,floatingRect.top)+offset})}}else{setPosition({x:0,y:0})}},[open]);var _rest_className,_triggerProps_className,_tooltipProps_className;return React.createElement("div",{...rest,className:`relative inline-block align-top h-16 ${(_rest_className=rest===null||rest===void 0?void 0:rest.className)!==null&&_rest_className!==void 0?_rest_className:""}`},React.createElement("button",{onMouseEnter:()=>setOpen(true),onMouseLeave:()=>setOpen(false),type:"button",ref:reference,"aria-describedby":"tooltip",...triggerProps,className:`ml-8 p-0 relative top-1 focus:outline-none ${(_triggerProps_className=triggerProps===null||triggerProps===void 0?void 0:triggerProps.className)!==null&&_triggerProps_className!==void 0?_triggerProps_className:""}`},React.createElement(Icon,{name:"icon-gui-info",size:"1rem"})),open?React.createElement("div",{role:"tooltip",ref:floating,style:{top:-position.y,left:-position.x,boxShadow:"4px 4px 15px rgba(0, 0, 0, 0.2)"},...tooltipProps,className:`bg-light-grey p-12 rounded pointer-events-none absolute z-20 ${(_tooltipProps_className=tooltipProps===null||tooltipProps===void 0?void 0:tooltipProps.className)!==null&&_tooltipProps_className!==void 0?_tooltipProps_className:""}`},React.createElement("div",{className:"w-256"},children)):null)};export default Tooltip;
+import React,{useEffect,useRef,useState}from"react";import Icon from"./Icon";const Tooltip=({children,triggerProps,tooltipProps,...rest})=>{const[open,setOpen]=useState(false);const[position,setPosition]=useState({x:0,y:0});const offset=8;const reference=useRef(null);const floating=useRef(null);useEffect(()=>{if(open){const floatingRect=floating.current?.getBoundingClientRect();const referenceRect=reference.current?.getBoundingClientRect();if(floatingRect&&referenceRect){setPosition({x:Math.min(floatingRect.width/2,floatingRect.left)-referenceRect.width/2,y:Math.min(floatingRect.height,floatingRect.top)+offset})}}else{setPosition({x:0,y:0})}},[open]);return React.createElement("div",{...rest,className:`relative inline-block align-top h-16 ${rest?.className??""}`},React.createElement("button",{onMouseEnter:()=>setOpen(true),onMouseLeave:()=>setOpen(false),type:"button",ref:reference,"aria-describedby":"tooltip",...triggerProps,className:`ml-8 p-0 relative top-1 focus:outline-none ${triggerProps?.className??""}`},React.createElement(Icon,{name:"icon-gui-info",size:"1rem"})),open?React.createElement("div",{role:"tooltip",ref:floating,style:{top:-position.y,left:-position.x,boxShadow:"4px 4px 15px rgba(0, 0, 0, 0.2)"},...tooltipProps,className:`bg-light-grey p-12 rounded pointer-events-none absolute z-20 ${tooltipProps?.className??""}`},React.createElement("div",{className:"w-256"},children)):null)};export default Tooltip;

package/core/hubspot-chat-toggle.js

@@ -1 +1 @@
-import{queryId}from"./dom-query";function enableBtn(el,text){el.disabled=false;el.innerText=text}function disableBtn(el,text){el.disabled=true;el.innerText=text}const WAIT_BETWEEN_RETRIES_MS=100;let MAX_RETRY_COUNT=30;export default function toggleChatWidget(params={}){const{dataId}=params;const container=queryId(dataId);const chatButton=queryId("open-chat-widget",container);const textEnabled=chatButton.dataset.enabledLabel;const textDisabled=chatButton.dataset.disabledLabel;if(!dataId||!container)return;const trigger=queryId("open-chat-widget",container);let clickHandler;const waitForScript=delay=>{var _window_HubSpotConversations,_window;const widget=(_window=window)===null||_window===void 0?void 0:(_window_HubSpotConversations=_window.HubSpotConversations)===null||_window_HubSpotConversations===void 0?void 0:_window_HubSpotConversations.widget;const iframe=document.querySelector("#hubspot-messages-iframe-container");clickHandler=e=>{e.preventDefault();widget.open()};if(widget&&iframe){trigger.addEventListener("click",clickHandler);enableBtn(trigger,textEnabled)}else if(--MAX_RETRY_COUNT){setTimeout(()=>waitForScript(WAIT_BETWEEN_RETRIES_MS),delay)}};disableBtn(trigger,textDisabled);waitForScript(0);return()=>{disableBtn(trigger,textDisabled);trigger.removeEventListener("click",clickHandler)}}
+import{queryId}from"./dom-query";function enableBtn(el,text){el.disabled=false;el.innerText=text}function disableBtn(el,text){el.disabled=true;el.innerText=text}const WAIT_BETWEEN_RETRIES_MS=100;let MAX_RETRY_COUNT=30;export default function toggleChatWidget(params={}){const{dataId}=params;const container=queryId(dataId);const chatButton=queryId("open-chat-widget",container);const textEnabled=chatButton.dataset.enabledLabel;const textDisabled=chatButton.dataset.disabledLabel;if(!dataId||!container)return;const trigger=queryId("open-chat-widget",container);let clickHandler;const waitForScript=delay=>{const widget=window?.HubSpotConversations?.widget;const iframe=document.querySelector("#hubspot-messages-iframe-container");clickHandler=e=>{e.preventDefault();widget.open()};if(widget&&iframe){trigger.addEventListener("click",clickHandler);enableBtn(trigger,textEnabled)}else if(--MAX_RETRY_COUNT){setTimeout(()=>waitForScript(WAIT_BETWEEN_RETRIES_MS),delay)}};disableBtn(trigger,textDisabled);waitForScript(0);return()=>{disableBtn(trigger,textDisabled);trigger.removeEventListener("click",clickHandler)}}

package/core/icons/icon-display-architectural-guidance.svg

@@ -0,0 +1,15 @@
+<svg width="48" height="49" viewBox="0 0 48 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="31" y="6.92285" width="15" height="12" rx="2" stroke="#C6CED9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<rect x="18" y="28.9229" width="28" height="18" rx="2" stroke="#C6CED9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.25 4.92285C1.25 3.40407 2.48122 2.17285 4 2.17285H20C21.5188 2.17285 22.75 3.40407 22.75 4.92285V20.9229C22.75 22.4416 21.5188 23.6729 20 23.6729H4C2.48122 23.6729 1.25 22.4416 1.25 20.9229V4.92285Z" fill="#FF5416"/>
+<path d="M8.75 13.7979L5.5 11.3604L8.75 8.92285" stroke="#03020D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.625 17.4229L12.625 7.92285" stroke="#03020D" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M14.5 16.7979L17.75 14.3604L14.5 11.9229" stroke="#03020D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18 37.9229H13C11.8954 37.9229 11 37.0274 11 35.9229V26.9229" stroke="#C6CED9" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M31 12.9229L26 12.9229" stroke="#C6CED9" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M33 32.9229H22" stroke="#C6CED9" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M28 35.9229H22" stroke="#C6CED9" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M43 15.9229L40 15.9229" stroke="#C6CED9" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M38 21.4229L38 22.4229" stroke="#C6CED9" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M38 25.4229L38 26.4229" stroke="#C6CED9" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/core/icons/icon-display-authentication.svg

@@ -0,0 +1,7 @@
+<svg width="49" height="49" viewBox="0 0 49 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M42.8038 29.4229C44.6381 24.4724 44.4975 20.7393 44.4975 20.7393V6.00446C32.3864 7.44833 24.5338 1.92285 24.5338 1.92285C18.4473 5.3039 11.4322 6.68618 4.5 5.87035L4.56552 22.0583C5.43127 40.2871 24.5338 47.9229 24.5338 47.9229C26.067 47.2234 27.4825 46.4778 28.7895 45.6968" stroke="#C6CED9" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M30.5 16.9192C30.5007 18.106 30.1494 19.2664 29.4905 20.2536C28.8317 21.2408 27.8949 22.0104 26.7986 22.4651C25.7023 22.9198 24.4957 23.0391 23.3316 22.808C22.1675 22.5769 21.0982 22.0058 20.2587 21.1668C19.4192 20.3278 18.8473 19.2587 18.6155 18.0947C18.3837 16.9308 18.5024 15.7242 18.9564 14.6276C19.4105 13.531 20.1794 12.5937 21.1662 11.9343C22.153 11.2748 23.3131 10.9229 24.4999 10.9229C26.0906 10.9229 27.6162 11.5545 28.7413 12.6789C29.8664 13.8034 30.499 15.3285 30.5 16.9192Z" stroke="#C6CED9" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/>
+<path d="M32.7369 27.8108C31.6079 26.6019 30.0768 25.9229 28.4802 25.9229H20.5199C18.9233 25.9229 17.3921 26.6019 16.2631 27.8108C15.1342 29.0196 14.5 30.6591 14.5 32.3686V32.9229" stroke="#C6CED9" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M28.4492 37.9225C28.4492 33.5044 32.0308 29.9229 36.4489 29.9229C40.867 29.9229 44.4485 33.5044 44.4485 37.9225C44.4485 42.3406 40.867 45.9222 36.4489 45.9222C32.0308 45.9222 28.4492 42.3406 28.4492 37.9225Z" fill="#FF5416"/>
+<path d="M32.8105 37.4796L35.6912 40.3022L40.1681 35.6572" stroke="#03020D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/core/icons/icon-display-custom-cname.svg

@@ -0,0 +1,16 @@
+<svg width="49" height="49" viewBox="0 0 49 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3563_10959)">
+<path d="M35.4414 32.3451C34.7188 41.0685 27.4099 47.923 18.5 47.923C9.11116 47.923 1.5 40.3118 1.5 30.923C1.5 22.104 8.2153 14.8534 16.8114 14.0058L17.6557 13.9644" stroke="#C6CED9" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M31.5 41.9229C28.1813 40.0701 23.5823 38.9229 18.5 38.9229C13.4177 38.9229 8.81875 40.0701 5.5 41.9229" stroke="#C6CED9" stroke-width="1.5" stroke-miterlimit="10" stroke-linejoin="round"/>
+<path d="M5.5 20.9229C8.81875 22.7756 13.4177 23.9229 18.5 23.9229C19.005 23.9229 19.5053 23.9115 20 23.8893" stroke="#C6CED9" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M25.5 30.923C25.5 40.3118 22.1421 47.923 18 47.923C13.8579 47.923 10.5 40.3118 10.5 30.923C10.5 22.3027 13.3306 15.1809 17 14.0728" stroke="#C6CED9" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M1.5 30.9229L25.5 30.9229" stroke="#C6CED9" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<circle cx="34.5" cy="14.9229" r="14" fill="#FF5416"/>
+<path d="M28.5 15.7562L33.3 19.9229L40.5 9.92285" stroke="#03020D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_3563_10959">
+<rect width="48" height="48" fill="white" transform="translate(0.5 0.922852)"/>
+</clipPath>
+</defs>
+</svg>

package/core/icons/icon-display-dedicated-cluster.svg

@@ -0,0 +1,15 @@
+<svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 28.4229V33.4229" stroke="#C6CED9" stroke-width="1.25" stroke-linecap="round"/>
+<path d="M7.5 28.4229V33.4229" stroke="#C6CED9" stroke-width="1.25" stroke-linecap="round"/>
+<circle cx="34.1654" cy="30.9222" r="0.833333" fill="#C6CED9"/>
+<circle cx="29.1654" cy="30.9222" r="0.833333" fill="#C6CED9"/>
+<path d="M32.4987 16.7555H35.832C37.673 16.7555 39.1654 15.2631 39.1654 13.4222V8.4222C39.1654 6.58125 37.673 5.08887 35.832 5.08887H4.16536C2.32442 5.08887 0.832031 6.58125 0.832031 8.4222V13.4222C0.832031 15.2631 2.32441 16.7555 4.16536 16.7555H7.4987" stroke="#C6CED9" stroke-width="1.25" stroke-linecap="round"/>
+<path d="M32.4987 25.0892H35.832C37.673 25.0892 39.1654 26.5816 39.1654 28.4225V33.4225C39.1654 35.2635 37.673 36.7559 35.832 36.7559H4.16536C2.32442 36.7559 0.832031 35.2635 0.832031 33.4225V28.4225C0.832031 26.5816 2.32441 25.0892 4.16536 25.0892H7.4987" stroke="#C6CED9" stroke-width="1.25" stroke-linecap="round"/>
+<path d="M5 8.42285V13.4229" stroke="#C6CED9" stroke-width="1.25" stroke-linecap="round"/>
+<path d="M7.5 8.42285V13.4229" stroke="#C6CED9" stroke-width="1.25" stroke-linecap="round"/>
+<circle cx="34.1654" cy="10.9222" r="0.833333" fill="#C6CED9"/>
+<circle cx="29.1654" cy="10.9222" r="0.833333" fill="#C6CED9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.375 20.9229C9.375 15.0548 14.132 10.2979 20 10.2979C25.868 10.2979 30.625 15.0548 30.625 20.9229C30.625 26.7909 25.868 31.5479 20 31.5479C14.132 31.5479 9.375 26.7909 9.375 20.9229Z" fill="#FF5416"/>
+<rect x="15" y="18.4229" width="10" height="7.5" rx="0.830357" stroke="#03020D" stroke-width="1.25" stroke-linejoin="round"/>
+<path d="M22.5 18.4225V16.9074V16.7559C22.5 15.3751 21.3807 14.2559 20 14.2559V14.2559C18.6193 14.2559 17.5 15.3751 17.5 16.7559V16.9074V18.4225" stroke="#03020D" stroke-width="1.25" stroke-linejoin="round"/>
+</svg>

package/core/icons/icon-display-edge-network.svg

@@ -0,0 +1,17 @@
+<svg width="49" height="49" viewBox="0 0 49 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M44.6528 16.1816C45.2643 17.5705 45.7304 19.0219 46.0416 20.5129C46.3452 21.9855 46.4988 23.4848 46.5 24.9882C46.5001 28.1498 45.8147 31.2739 44.4907 34.1467C43.1667 37.0195 41.2354 39.5729 38.8292 41.6321C36.4231 43.6913 33.5988 45.2076 30.55 46.077C27.5012 46.9464 24.2999 47.1484 21.1655 46.6692C18.031 46.1901 15.0376 45.041 12.3901 43.3008C9.74271 41.5605 7.5039 39.2703 5.82714 36.5869C4.15037 33.9036 3.0753 30.8904 2.67553 27.7541C2.42796 25.8118 2.443 23.8507 2.71604 21.9226" stroke="#C6CED9" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/>
+<path d="M35.4116 5.92285C33.8755 5.02678 32.236 4.31827 30.5268 3.81519C27.7133 2.98708 24.7665 2.73183 21.8556 3.06416C18.9447 3.39649 16.1271 4.30994 13.5648 5.75179C11.7932 6.74871 10.1677 7.98468 8.7312 9.42285" stroke="#C6CED9" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.5 15.9229C2.5 13.7137 4.29086 11.9229 6.5 11.9229C8.70914 11.9229 10.5 13.7137 10.5 15.9229C10.5 18.132 8.70914 19.9229 6.5 19.9229C4.29086 19.9229 2.5 18.132 2.5 15.9229Z" fill="#FF5416"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M39 7.92285C36.7909 7.92285 35 9.71371 35 11.9229C35 14.132 36.7909 15.9229 39 15.9229C41.2091 15.9229 43 14.132 43 11.9229C43 9.71371 41.2091 7.92285 39 7.92285Z" fill="#FF5416"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23 16.9229C20.7909 16.9229 19 18.7137 19 20.9229C19 23.132 20.7909 24.9229 23 24.9229C25.2091 24.9229 27 23.132 27 20.9229C27 18.7137 25.2091 16.9229 23 16.9229Z" fill="#FF5416"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.5 35.4229C11.5 33.2137 13.2909 31.4229 15.5 31.4229C17.7091 31.4229 19.5 33.2137 19.5 35.4229C19.5 37.632 17.7091 39.4229 15.5 39.4229C13.2909 39.4229 11.5 37.632 11.5 35.4229Z" fill="#FF5416"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M31.5 34.4229C31.5 32.2137 33.2909 30.4229 35.5 30.4229C37.7091 30.4229 39.5 32.2137 39.5 34.4229C39.5 36.632 37.7091 38.4229 35.5 38.4229C33.2909 38.4229 31.5 36.632 31.5 34.4229Z" fill="#FF5416"/>
+<path d="M20.8206 3.61035C20.5257 5.17949 20.3767 6.76729 20.375 8.35788C20.3715 10.3236 20.5962 12.2822 21.044 14.2033" stroke="#C6CED9" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/>
+<path d="M26.8486 26.6138C27.8076 27.8505 28.8616 29.003 30 30.0597" stroke="#C6CED9" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/>
+<path d="M16.5001 23.3594C11.6894 25.8523 7.49818 29.2814 4.21643 33.4226" stroke="#C6CED9" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/>
+<path d="M45.8125 20.1103C40.5308 18.8002 34.9635 18.4229 29.5 18.9931" stroke="#C6CED9" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/>
+<path d="M11.1361 20.9229C12.7981 23.2246 14.0649 25.7553 14.8902 28.4229" stroke="#C6CED9" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/>
+<path d="M15 42.2319C14.8128 42.9696 14.5938 43.7005 14.3434 44.4226L15 42.2319Z" stroke="#C6CED9" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M30.354 39.104C28.9541 41.4341 27.9212 43.9967 27.3019 46.6919" stroke="#C6CED9" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/>
+<path d="M46 28.4526C44.1651 28.8077 42.3857 29.327 40.6934 30" stroke="#C6CED9" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/>
+</svg>

package/core/icons/icon-display-elasticity.svg

@@ -0,0 +1,16 @@
+<svg width="49" height="49" viewBox="0 0 49 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M46.499 8.92285L46.499 40.9229" stroke="#C6CED9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M42.499 12.9229L42.499 36.9229" stroke="#C6CED9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M38.499 15.9229L38.499 33.9229" stroke="#C6CED9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M34.499 19.9229L34.499 29.9229" stroke="#C6CED9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M30.499 21.9229L30.499 27.9229" stroke="#FF5416" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M26.499 22.9229L26.499 26.9229" stroke="#FF5416" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2.49902 40.9229L2.49902 8.92285" stroke="#C6CED9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.49902 36.9229L6.49902 12.9229" stroke="#C6CED9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.499 33.9229L10.499 15.9229" stroke="#C6CED9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.499 29.9229L14.499 19.9229" stroke="#C6CED9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18.499 27.9229L18.499 21.9229" stroke="#FF5416" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M22.499 26.9229L22.499 22.9229" stroke="#FF5416" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.7521 4.38731C24.0437 4.10137 24.5105 4.10137 24.8022 4.38731L28.0241 7.5462C28.2417 7.75951 28.3086 8.08326 28.1934 8.36533C28.0782 8.64741 27.8037 8.83174 27.499 8.83174L26.1778 8.83174L26.1778 14.1811L27.499 14.1811C27.8075 14.1811 28.0844 14.3699 28.1971 14.6569C28.3099 14.944 28.2354 15.2708 28.0094 15.4807L24.7875 18.4724C24.4997 18.7397 24.0545 18.7397 23.7668 18.4724L20.5449 15.4807C20.3189 15.2708 20.2444 14.944 20.3571 14.6569C20.4698 14.3699 20.7468 14.1811 21.0552 14.1811L22.3764 14.1811L22.3764 8.83174L21.0552 8.83174C20.7505 8.83174 20.4761 8.64741 20.3609 8.36533C20.2457 8.08326 20.3126 7.75951 20.5301 7.5462L23.7521 4.38731Z" fill="#FF5416"/>
+<path d="M23.7521 31.3873C24.0437 31.1014 24.5105 31.1014 24.8022 31.3873L28.0241 34.5462C28.2417 34.7595 28.3086 35.0833 28.1934 35.3653C28.0782 35.6474 27.8037 35.8317 27.499 35.8317L26.1778 35.8317L26.1778 41.1811L27.499 41.1811C27.8075 41.1811 28.0844 41.3699 28.1971 41.6569C28.3099 41.944 28.2354 42.2708 28.0094 42.4807L24.7875 45.4724C24.4997 45.7397 24.0545 45.7397 23.7668 45.4724L20.5449 42.4807C20.3189 42.2708 20.2444 41.944 20.3571 41.6569C20.4698 41.3699 20.7468 41.1811 21.0552 41.1811L22.3764 41.1811L22.3764 35.8317L21.0552 35.8317C20.7505 35.8317 20.4761 35.6474 20.3609 35.3653C20.2457 35.0833 20.3126 34.7595 20.5301 34.5462L23.7521 31.3873Z" fill="#FF5416"/>
+</svg>

package/core/icons/icon-display-firehose.svg

@@ -0,0 +1,12 @@
+<svg width="48" height="49" viewBox="0 0 48 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M39 21.9229H47" stroke="#FF5416" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M39 24.9229H47" stroke="#FF5416" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M1 24.9229L17 24.9229" stroke="#C6CED9" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M1 16.9229L2.63932 16.9229C4.19177 16.9229 5.7229 17.2843 7.11146 17.9786L10.8885 19.8671C12.2771 20.5614 13.8082 20.9229 15.3607 20.9229L17 20.9229" stroke="#C6CED9" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M1 4.92285L1.25371 4.92285C3.59419 4.92285 5.77981 6.09256 7.07807 8.03995L10.9219 13.8058C12.2202 15.7531 14.4058 16.9229 16.7463 16.9229L17 16.9229" stroke="#C6CED9" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M1 32.9229L2.63932 32.9229C4.19177 32.9229 5.7229 32.5614 7.11146 31.8671L10.8885 29.9786C12.2771 29.2843 13.8082 28.9229 15.3607 28.9229L17 28.9229" stroke="#C6CED9" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M1 44.9229L1.25371 44.9229C3.59419 44.9229 5.77981 43.7531 7.07807 41.8058L10.9219 36.0399C12.2202 34.0926 14.4058 32.9229 16.7463 32.9229L17 32.9229" stroke="#C6CED9" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M39 27.9229H47" stroke="#FF5416" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<rect x="20" y="12.9229" width="6" height="24" rx="2" stroke="#C6CED9" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M26 15.9229L34.5747 18.4953C35.4207 18.7491 36 19.5277 36 20.4109V29.4348C36 30.318 35.4207 31.0967 34.5747 31.3504L26 33.9229" stroke="#C6CED9" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/core/icons/icon-display-hipaa-mono.svg

@@ -0,0 +1,10 @@
+<svg width="48" height="49" viewBox="0 0 48 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3518_39132)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.0933 12.8383C23.6524 13.1938 24.6181 13.8184 25.1758 14.2396C25.1078 13.9058 25.0053 13.4899 24.8986 13.0571L24.8986 13.0571L24.8986 13.057C24.7465 12.4403 24.5861 11.7894 24.5053 11.2939C24.7514 11.0529 25.0985 10.7774 25.4837 10.4718C25.9071 10.1358 26.3764 9.7634 26.8081 9.36013C25.9342 9.23646 23.8403 9.15214 23.8403 9.15214C23.8403 9.15214 23.2846 7.99161 22.8782 7.16898C22.9611 6.97604 23.0414 6.79781 23.1154 6.64995C23.1154 6.12593 23.0947 5.38028 23.0748 4.66129C23.0563 3.99195 23.0384 3.34571 23.0384 2.92292C16.2785 2.90043 6.05625 8.56125 4.22614 14.2614C4.71498 14.2255 5.18728 14.0651 5.6001 13.7948C7.1383 13.0478 8.58922 12.1257 9.92533 11.0459C10.9993 10.1439 12.222 9.44524 13.5361 8.98286C16.284 8.15651 18.2076 9.21335 19.0539 11.996C19.2847 12.9235 19.5705 13.8398 19.9168 14.728C20.1383 15.4036 20.56 15.9918 21.1234 16.4109C21.5837 16.7533 22.1199 16.9689 22.6807 17.0404V17.5388C24.9175 17.2128 26.5662 16.1447 27.3631 13.9186C27.4621 13.6656 27.5775 13.4239 27.7094 13.1878C28.9459 10.7256 30.5892 10.1691 33.0623 11.3777C34.3478 12.0813 35.587 12.87 36.772 13.7387C39.1527 15.4051 41.8964 16.4492 44.763 16.7799C45.3562 16.8485 45.957 16.7762 46.5184 16.5685C47.0799 16.3608 47.5869 16.0234 48 15.5825C47.4922 15.4937 47.0147 15.4539 46.5547 15.4155C46.0538 15.3737 45.5738 15.3336 45.0982 15.234C41.5363 14.4605 38.1964 12.8582 35.3376 10.5513C34.1285 9.48323 32.6282 8.80866 31.0344 8.60628C28.9294 8.42077 27.6379 9.18529 26.874 11.1528C26.72 11.5968 26.5945 12.0539 26.4685 12.513L26.4685 12.5131C26.3472 12.9549 26.2254 13.3987 26.0771 13.8343C25.5551 15.3428 24.6452 16.4306 23.0672 16.7099C23.0891 15.4201 23.0927 13.7285 23.0933 12.8383ZM22.7414 12.616C22.6882 12.5827 22.6587 12.5644 22.6587 12.5644V7.69511C22.6158 7.80025 22.573 7.90567 22.531 8.00933C22.316 8.5397 22.1198 9.02366 22.0107 9.18524H19.0649L21.4831 11.1528L20.7302 13.8848C20.9379 13.7602 21.2095 13.5843 21.5065 13.392C21.9035 13.135 22.3458 12.8486 22.7414 12.616ZM22.5061 33.579L22.5064 33.5792L22.5064 33.5792C22.6937 33.7162 22.8807 33.8529 23.0663 33.9909C23.0211 34.0353 22.9768 34.0807 22.9337 34.1274V35.4878C23.5637 35.9691 24.169 36.4832 24.7473 37.0281C25.6871 38.0062 25.6706 38.737 24.7473 39.7039C24.3241 40.1424 23.8735 40.564 23.4283 40.98L22.9392 41.441V42.7901C22.2412 43.1949 21.4113 43.8807 21.4113 44.7689C21.4113 45.5559 21.9554 46.2361 22.4445 46.8376C22.6314 47.0624 22.8018 47.2817 22.9392 47.484V47.6414L22.9831 47.5627L22.997 47.5824L23.0106 47.6021C23.9996 47.1098 24.8295 46.3371 25.4013 45.376C26.1048 43.9931 25.2419 43.0093 24.3241 42.1268C24.7638 41.5365 25.2639 40.9969 25.808 40.4965C27.1875 38.8719 27.16 37.7195 25.7146 36.1118C25.5937 35.9769 25.4563 35.8532 25.3189 35.7296L25.3189 35.7295C25.0135 35.4899 24.7607 35.1873 24.5769 34.8413C25.187 34.1499 25.863 33.5259 26.5939 32.9638C26.864 32.7624 27.0894 32.505 27.2555 32.2084C27.4216 31.9118 27.5247 31.5827 27.5579 31.2426C27.5911 30.9025 27.5537 30.559 27.4482 30.2346C27.3427 29.9103 27.1714 29.6124 26.9456 29.3604C26.5372 28.8247 26.022 28.3839 25.4343 28.0675L25.2694 27.9775L25.2657 27.9757C25.0469 27.8694 24.8131 27.7559 24.7913 27.3311L25.863 26.7464C26.4914 26.407 27.1162 26.0603 27.737 25.7065C30.2981 24.1774 30.8807 22.4573 29.809 19.7027C29.9738 19.6184 30.1552 19.6072 30.3366 19.6015L30.363 19.6002C30.5744 19.5896 30.7901 19.5788 30.9906 19.4385C30.9906 19.3052 30.9208 19.1828 30.8449 19.0497L30.8422 19.045C30.6938 18.7921 30.5289 18.4997 30.8312 18.0219C31.4597 18.1571 32.0652 18.3863 32.6283 18.7021L32.643 18.7093C33.4517 19.1062 34.2774 19.5113 35.2334 19.4666C35.1802 19.1292 34.9621 18.9287 34.7487 18.7327L34.7278 18.7134L34.7261 18.7119C34.5068 18.5156 34.2935 18.3247 34.2496 18.0107C34.7589 18.1107 35.2442 18.2747 35.7279 18.4382L35.8269 18.4716L35.8367 18.475C36.8226 18.8168 37.7871 19.1511 38.9046 18.9382C38.7125 18.6762 38.4582 18.4937 38.2072 18.3136L38.1846 18.2974L38.1679 18.285C37.8218 18.0307 37.4784 17.7783 37.3053 17.3136C37.8329 17.4092 38.344 17.5328 38.8551 17.6565L38.8551 17.6565L38.8694 17.66C40.3208 18.0129 41.7404 18.3581 43.3947 18.0332L42.301 17.5947L42.195 17.5527C41.5283 17.2886 40.9243 17.0494 40.35 16.729C37.8439 15.571 35.4147 14.2555 33.0735 12.7827C31.106 11.4617 29.5507 11.9732 28.4845 14.0925C28.1767 14.694 27.8799 15.2955 27.6051 15.9139C26.7148 17.9039 25.0386 18.4773 23.1535 18.6065L23.0766 18.5166C23.0216 18.4604 22.9941 18.4323 22.9941 18.4042L22.8622 17.8982C20.576 17.5441 18.7074 15.8633 18.0644 13.6091C17.9709 13.3505 17.8555 13.1088 17.7126 12.8839C17.3351 12.0711 16.6589 11.4438 15.8314 11.1385C15.0038 10.8331 14.0918 10.8745 13.294 11.2537C12.3816 11.6247 11.5188 12.0969 10.7109 12.659C9.08446 13.9157 7.31916 14.9723 5.45139 15.8071C4.83703 16.0464 4.21834 16.2726 3.56078 16.5129L3.30801 16.6053L2.73095 16.8189C-0.302759 24.897 0.609551 32.3735 5.79763 39.2654C9.71617 44.4484 17.1905 47.5346 22.8897 47.7033C21.9664 47.113 20.576 45.9943 20.2627 44.9038C19.9714 43.875 20.5375 43.2117 21.197 42.4416C21.3783 42.228 21.5652 42.0031 21.7466 41.767C21.131 41.306 20.543 40.8057 19.9934 40.2661C18.7294 38.8495 18.7513 37.8263 19.9384 36.3142C20.0978 36.1118 20.2847 35.9375 20.4715 35.7633C20.7988 35.4914 21.0761 35.1621 21.2904 34.7908C20.9826 34.2399 20.4935 33.8913 20.0044 33.554C19.7296 33.3629 19.4548 33.1662 19.2185 32.9413C18.9601 32.7288 18.7469 32.4645 18.5921 32.1647C18.4373 31.8648 18.3442 31.5356 18.3185 31.1976C18.2927 30.8595 18.3349 30.5196 18.4424 30.1988C18.55 29.878 18.7206 29.5831 18.9437 29.3323C19.4039 28.7652 19.9773 28.3052 20.6254 27.9832L20.6503 27.9708C20.8685 27.8625 21.0966 27.7493 21.0596 27.3648C20.6749 27.0106 20.2242 26.7352 19.7406 26.5553C18.6106 26.0239 17.5567 25.3374 16.608 24.5147C15.1351 23.1318 15.0801 20.5797 16.4815 19.6353C17.1845 19.1884 18.019 19.0093 18.8382 19.1296C19.6575 19.2499 20.409 19.6618 20.9607 20.293C21.3016 20.7651 21.7156 21.1771 22.1862 21.5128C22.5709 21.7433 22.8073 22.1649 22.8073 22.6203C22.0049 23.8795 21.208 23.902 20.4111 22.6821C20.3396 22.5809 20.2792 22.4797 20.2132 22.3673L20.2016 22.3485C19.9418 21.9276 19.6838 21.5097 19.1965 21.2992C18.5755 21.0238 17.9544 20.9282 17.4928 21.5241C17.2942 21.7732 17.1904 22.0874 17.2005 22.4087C17.2106 22.73 17.3339 23.0368 17.5477 23.2724C17.7807 23.5525 18.0486 23.8001 18.3446 24.0088C19.2811 24.6961 20.2894 25.2749 21.3509 25.7346C21.9805 25.9382 22.5171 26.3673 22.8622 26.9432L22.92 28.0266C22.7444 28.1374 22.5689 28.2521 22.3923 28.3675L22.3923 28.3675L22.3922 28.3676C21.9882 28.6315 21.5791 28.8988 21.1529 29.1308C19.5536 29.9853 19.4766 31.2333 20.9165 32.3632C21.4339 32.7947 21.9714 33.1878 22.5061 33.579ZM22.9831 47.5627C22.9689 47.5363 22.9542 47.51 22.9392 47.484L22.9172 45.5446C22.9062 44.6733 22.8952 43.7401 22.8952 42.8463C23.5602 43.1667 24.2911 43.594 24.4285 44.3922C24.6201 45.5397 23.9235 46.3917 23.3912 47.0427L23.3843 47.0512C23.225 47.2367 23.0876 47.411 22.9831 47.5627ZM24.2197 33.1043C23.8349 33.3651 23.4502 33.6259 23.1149 33.944V28.3251C23.6443 28.7289 24.205 29.0883 24.7913 29.3998C25.1337 29.5397 25.4331 29.771 25.6583 30.0696C25.8836 30.3682 26.0263 30.7232 26.0718 31.0975C25.7608 32.0572 25.0004 32.5739 24.2366 33.0928L24.2197 33.1043ZM22.6477 41.526L22.6532 41.5318H22.6587L22.6477 41.5768V41.526ZM22.6477 41.526C22.4433 41.3105 22.2347 41.0983 22.0259 40.8858L22.0253 40.8852C21.6972 40.5514 21.3684 40.2169 21.0539 39.8679C20.1196 38.8335 20.1196 37.9566 21.0539 36.9166C21.383 36.5535 21.7495 36.2362 22.1164 35.9185C22.2948 35.764 22.4733 35.6094 22.6477 35.4494V41.526ZM22.9941 19.7421C23.6768 19.5489 24.3948 19.5258 25.088 19.6746C24.9042 20.1569 24.6254 20.5954 24.269 20.9628C23.9126 21.3303 23.4861 21.6189 23.0161 21.8108C22.8689 21.1302 22.8614 20.4258 22.9941 19.7421ZM25.154 25.3636C26.1284 24.931 27.0401 24.3635 27.8634 23.6771C28.6713 22.9351 28.8087 21.9907 28.1932 21.451C27.8397 21.2153 27.4096 21.1315 26.996 21.2177C26.5825 21.304 26.2189 21.5534 25.9839 21.912C25.8277 22.1231 25.6828 22.3426 25.5497 22.5697C25.3189 22.9632 25.088 23.3454 24.6319 23.5366C24.2527 23.694 23.9119 23.5815 23.5547 23.4635C23.3623 23.396 23.17 23.3342 22.9612 23.3117V26.5609C23.6551 26.0963 24.3891 25.6973 25.154 25.3692V25.3636Z" fill="#C6CED9"/>
+</g>
+<defs>
+<clipPath id="clip0_3518_39132">
+<rect width="48" height="48" fill="white" transform="translate(0 0.922852)"/>
+</clipPath>
+</defs>
+</svg>

package/core/icons/icon-display-observe-analytics.svg

@@ -0,0 +1,20 @@
+<svg width="49" height="49" viewBox="0 0 49 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3563_11119)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M40.5 19.9229C40.5 18.266 41.8431 16.9229 43.5 16.9229C45.1569 16.9229 46.5 18.266 46.5 19.9229C46.5 21.5797 45.1569 22.9229 43.5 22.9229C41.8431 22.9229 40.5 21.5797 40.5 19.9229Z" fill="#C6CED9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M26.5 36.9229C26.5 35.266 27.8431 33.9229 29.5 33.9229C31.1569 33.9229 32.5 35.266 32.5 36.9229C32.5 38.5797 31.1569 39.9229 29.5 39.9229C27.8431 39.9229 26.5 38.5797 26.5 36.9229Z" fill="#C6CED9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.5 44.9229C3.5 43.266 4.84315 41.9229 6.5 41.9229C8.15685 41.9229 9.5 43.266 9.5 44.9229C9.5 46.5797 8.15685 47.9229 6.5 47.9229C4.84315 47.9229 3.5 46.5797 3.5 44.9229Z" fill="#C6CED9"/>
+<path d="M6.5 44.9229L16.5844 31.4229M43.5 19.9229L36.7952 28.3612L29.8684 37.0797L25.3246 31.4425" stroke="#C6CED9" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M20.5 35.9229L20.5 32.9229" stroke="#FF5416" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M20.5 41.9229L20.5 38.9229" stroke="#FF5416" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M20.5 47.9229L20.5 44.9229" stroke="#FF5416" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<circle cx="20.5" cy="10.9229" r="8" stroke="#FF5416" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.5 7.92285C19.5 7.37057 19.9477 6.92285 20.5 6.92285C21.0523 6.92285 21.5 7.37057 21.5 7.92285C21.5 8.47514 21.0523 8.92285 20.5 8.92285C19.9477 8.92285 19.5 8.47514 19.5 7.92285Z" fill="#C6CED9"/>
+<path d="M20.5 14.9229L20.5 10.9229" stroke="#C6CED9" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.5 25.9229C16.5 23.7137 18.2909 21.9229 20.5 21.9229C22.7091 21.9229 24.5 23.7137 24.5 25.9229C24.5 28.132 22.7091 29.9229 20.5 29.9229C18.2909 29.9229 16.5 28.132 16.5 25.9229Z" fill="#FF5416"/>
+</g>
+<defs>
+<clipPath id="clip0_3563_11119">
+<rect width="48" height="48" fill="white" transform="translate(0.5 0.922852)"/>
+</clipPath>
+</defs>
+</svg>

package/core/icons/icon-display-premium-support.svg

@@ -0,0 +1,7 @@
+<svg width="48" height="49" viewBox="0 0 48 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="path-1-inside-1_3563_10992" fill="white">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M26.8953 4.76583C25.2327 5.6389 23.2472 5.6389 21.5847 4.76583C18.6041 3.20059 14.9229 4.54089 13.6453 7.65562C12.9329 9.39227 11.4122 10.6682 9.57816 11.0677C6.28902 11.7841 4.33177 15.1799 5.35595 18.3866C5.92719 20.1751 5.58234 22.1325 4.43355 23.6176C2.37446 26.2794 3.05379 30.1373 5.8994 31.9339C7.48676 32.9361 8.47959 34.6566 8.55439 36.5324C8.68851 39.8958 11.6897 42.4165 15.0251 41.9634C16.8856 41.7106 18.7517 42.3896 20.0151 43.7784C22.2806 46.2687 26.1994 46.2687 28.4648 43.7784C29.7283 42.3896 31.5944 41.7106 33.4549 41.9634C36.7903 42.4165 39.7915 39.8958 39.9256 36.5324C40.0004 34.6566 40.9932 32.9361 42.5806 31.9339C45.4262 30.1373 46.1055 26.2794 44.0464 23.6176C42.8976 22.1325 42.5528 20.1751 43.124 18.3866C44.1482 15.1799 42.191 11.7841 38.9018 11.0677C37.0677 10.6682 35.547 9.39227 34.8347 7.65562C33.5571 4.54089 29.8758 3.20059 26.8953 4.76583ZM24 37.9229C31.1797 37.9229 37 32.1026 37 24.9229C37 17.7431 31.1797 11.9229 24 11.9229C16.8203 11.9229 11 17.7431 11 24.9229C11 32.1026 16.8203 37.9229 24 37.9229Z"/>
+</mask>
+<path d="M21.5847 4.76583L20.8873 6.09385V6.09385L21.5847 4.76583ZM26.8953 4.76583L26.1979 3.43781L26.8953 4.76583ZM13.6453 7.65562L12.2575 7.08637V7.08637L13.6453 7.65562ZM9.57816 11.0677L9.89738 12.5333L9.57816 11.0677ZM5.35595 18.3866L3.92706 18.8429H3.92706L5.35595 18.3866ZM4.43355 23.6176L5.62 24.5354L4.43355 23.6176ZM5.8994 31.9339L6.70019 30.6655L5.8994 31.9339ZM8.55439 36.5324L10.0532 36.4726L8.55439 36.5324ZM15.0251 41.9634L15.227 43.4497H15.227L15.0251 41.9634ZM20.0151 43.7784L18.9056 44.7878L20.0151 43.7784ZM28.4648 43.7784L29.5744 44.7878L28.4648 43.7784ZM33.4549 41.9634L33.253 43.4497H33.253L33.4549 41.9634ZM39.9256 36.5324L38.4268 36.4726V36.4726L39.9256 36.5324ZM42.5806 31.9339L43.3814 33.2023L42.5806 31.9339ZM44.0464 23.6176L45.2329 22.6998H45.2329L44.0464 23.6176ZM43.124 18.3866L41.6951 17.9302L43.124 18.3866ZM38.9018 11.0677L38.5826 12.5333L38.9018 11.0677ZM34.8347 7.65562L33.4469 8.22486L33.4469 8.22487L34.8347 7.65562ZM20.8873 6.09385C22.9865 7.19623 25.4935 7.19623 27.5927 6.09385L26.1979 3.43781C24.972 4.08157 23.508 4.08157 22.2821 3.43781L20.8873 6.09385ZM15.0331 8.22486C15.9752 5.92791 18.6899 4.93988 20.8873 6.09385L22.2821 3.43781C18.5184 1.46131 13.8705 3.15388 12.2575 7.08637L15.0331 8.22486ZM9.89738 12.5333C12.2135 12.0289 14.1336 10.4177 15.0331 8.22486L12.2575 7.08637C11.7323 8.36685 10.611 9.30757 9.25893 9.60206L9.89738 12.5333ZM6.78484 17.9302C6.02934 15.5647 7.47379 13.0612 9.89738 12.5333L9.25893 9.60206C5.10426 10.507 2.6342 14.7951 3.92706 18.8429L6.78484 17.9302ZM5.62 24.5354C7.07089 22.6598 7.50612 20.1885 6.78484 17.9302L3.92706 18.8429C4.34826 20.1617 4.09379 21.6053 3.2471 22.6998L5.62 24.5354ZM6.70019 30.6655C4.60324 29.3416 4.10192 26.4979 5.62 24.5354L3.2471 22.6998C0.647007 26.061 1.50435 30.933 5.09862 33.2023L6.70019 30.6655ZM10.0532 36.4726C9.95875 34.1042 8.70528 31.9315 6.70019 30.6655L5.09862 33.2023C6.26824 33.9407 7.00043 35.2091 7.05558 36.5922L10.0532 36.4726ZM14.8232 40.477C12.3656 40.8109 10.1521 38.9532 10.0532 36.4726L7.05558 36.5922C7.2249 40.8384 11.0137 44.0221 15.227 43.4497L14.8232 40.477ZM21.1247 42.769C19.5293 41.0153 17.1728 40.1578 14.8232 40.477L15.227 43.4497C16.5983 43.2634 17.9741 43.7639 18.9056 44.7878L21.1247 42.769ZM27.3553 42.769C25.6849 44.6052 22.7951 44.6052 21.1247 42.769L18.9056 44.7878C21.7661 47.9322 26.7139 47.9322 29.5744 44.7878L27.3553 42.769ZM33.6568 40.477C31.3072 40.1578 28.9507 41.0153 27.3553 42.769L29.5744 44.7878C30.5059 43.7639 31.8817 43.2634 33.253 43.4497L33.6568 40.477ZM38.4268 36.4726C38.3279 38.9532 36.1144 40.8109 33.6568 40.477L33.253 43.4497C37.4663 44.0221 41.2551 40.8384 41.4244 36.5922L38.4268 36.4726ZM41.7798 30.6655C39.7747 31.9315 38.5212 34.1042 38.4268 36.4726L41.4244 36.5922C41.4795 35.2091 42.2117 33.9407 43.3814 33.2023L41.7798 30.6655ZM42.86 24.5354C44.3781 26.4979 43.8767 29.3416 41.7798 30.6655L43.3814 33.2023C46.9756 30.933 47.833 26.061 45.2329 22.6998L42.86 24.5354ZM41.6951 17.9302C40.9739 20.1885 41.4091 22.6598 42.86 24.5354L45.2329 22.6998C44.3862 21.6053 44.1317 20.1617 44.5529 18.8429L41.6951 17.9302ZM38.5826 12.5333C41.0062 13.0612 42.4506 15.5647 41.6951 17.9302L44.5529 18.8429C45.8458 14.7951 43.3757 10.507 39.221 9.60206L38.5826 12.5333ZM33.4469 8.22487C34.3464 10.4177 36.2665 12.0289 38.5826 12.5333L39.221 9.60206C37.869 9.30757 36.7477 8.36685 36.2225 7.08636L33.4469 8.22487ZM27.5927 6.09385C29.7901 4.93988 32.5047 5.92791 33.4469 8.22486L36.2225 7.08637C34.6094 3.15388 29.9616 1.46131 26.1979 3.43781L27.5927 6.09385ZM35.5 24.9229C35.5 31.2741 30.3513 36.4229 24 36.4229V39.4229C32.0081 39.4229 38.5 32.931 38.5 24.9229H35.5ZM24 13.4229C30.3513 13.4229 35.5 18.5716 35.5 24.9229H38.5C38.5 16.9147 32.0081 10.4229 24 10.4229V13.4229ZM12.5 24.9229C12.5 18.5716 17.6487 13.4229 24 13.4229V10.4229C15.9919 10.4229 9.5 16.9147 9.5 24.9229H12.5ZM24 36.4229C17.6487 36.4229 12.5 31.2741 12.5 24.9229H9.5C9.5 32.931 15.9919 39.4229 24 39.4229V36.4229Z" fill="#C6CED9" mask="url(#path-1-inside-1_3563_10992)"/>
+<path d="M23.1691 17.4182C23.4767 16.6795 24.5233 16.6795 24.8309 17.4182L26.2918 20.9269C26.4215 21.2384 26.7145 21.4511 27.0508 21.4781L30.8411 21.7816C31.6394 21.8455 31.9629 22.8419 31.3544 23.3625L28.4681 25.8322C28.2114 26.0518 28.0993 26.3966 28.1778 26.7251L29.0599 30.4189C29.2458 31.1974 28.399 31.8131 27.7157 31.3962L24.4687 29.4152C24.1809 29.2396 23.8191 29.2396 23.5313 29.4152L20.2843 31.3962C19.601 31.8131 18.7542 31.1974 18.9401 30.4189L19.8222 26.7251C19.9007 26.3966 19.7886 26.0518 19.5319 25.8322L16.6456 23.3625C16.0371 22.8419 16.3606 21.8455 17.1589 21.7816L20.9492 21.4781C21.2855 21.4511 21.5785 21.2384 21.7082 20.9269L23.1691 17.4182Z" fill="#FF5416"/>
+</svg>

package/core/icons/icon-display-sla.svg

@@ -1,3 +1,6 @@
-<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-	<path fill-rule="evenodd" clip-rule="evenodd" d="M38.5 42C38.5 42.2761 38.2761 42.5 38 42.5H10C9.72386 42.5 9.5 42.2761 9.5 42V6C9.5 5.72386 9.72386 5.5 10 5.5H30.3431C31.0062 5.5 31.6421 5.76339 32.1109 6.23223L37.7678 11.8891C38.2366 12.3579 38.5 12.9938 38.5 13.6569V42ZM10 44H38C39.1046 44 40 43.1046 40 42V13.6569C40 12.596 39.5786 11.5786 38.8284 10.8284L33.1716 5.17157C32.4214 4.42143 31.404 4 30.3431 4H10C8.89543 4 8 4.89543 8 6V42C8 43.1046 8.89543 44 10 44ZM24 19.6933L25.3733 22.7833L28.8177 23.2139L26.3807 25.7118L27.015 29.0567L24.1 27.366L21.1132 29.0983L21.7103 25.5754L19.2775 23.202L22.6267 22.7833L24 19.6933ZM29.1 32L28 26.2L32 22.1L26.4 21.4L24 16L21.6 21.4L16 22.1L20.1 26.1L19.1 32L24.1 29.1L29.1 32Z" fill="currentColor" />
+<svg width="48" height="49" viewBox="0 0 48 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.71967 5.64252C9.57493 4.78726 10.7561 4.17285 12 4.17285H28.847C30.1075 4.17285 31.3116 4.67377 32.2018 5.56404L39.3601 12.7223C40.2502 13.6123 40.75 14.8117 40.75 16.0725V40.9229C40.75 42.1668 40.1356 43.3479 39.2803 44.2032C38.4251 45.0584 37.2439 45.6729 36 45.6729H12C10.7561 45.6729 9.57493 45.0584 8.71967 44.2032C7.86441 43.3479 7.25 42.1668 7.25 40.9229V8.92285C7.25 7.67893 7.86441 6.49778 8.71967 5.64252Z" stroke="#C6CED9" stroke-width="1.5" stroke-linecap="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.4167 27.3398C16.4167 22.9216 19.9985 19.3398 24.4167 19.3398C28.835 19.3398 32.4167 22.9216 32.4167 27.3398C32.4167 31.7581 28.835 35.3398 24.4167 35.3398C19.9985 35.3398 16.4167 31.7581 16.4167 27.3398Z" fill="#FF5416" stroke="#FF5416" stroke-width="1.91997"/>
+<path d="M20.778 26.8967L23.6587 29.7194L28.1358 25.0742" stroke="#03020D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M29 4.42285C29 4.42285 29 9.46452 29 11.7562C29 14.0479 30.76 15.4229 32.52 15.4229C34.28 15.4229 40 15.4229 40 15.4229" stroke="#C6CED9" stroke-width="1.5" stroke-linecap="round"/>
 </svg>