@ably/ui 15.8.0-dev.1527ef06 → 15.8.0

package/README.md

@@ -108,7 +108,7 @@ module.exports = extendConfig((ablyUIConfig) => ({
 @import "@ably/ui/reset/styles.css"; /* needed as we disable the default Tailwind reset */
 @import "@ably/ui/core/styles.css"; /* styles for core module components and more */
 @import "@ably/ui/core/Meganav/component.css";
-@import "@ably/ui/core/ContactFooter/component.css";
+@import "@ably/ui/core/Flash/component.css";
 ```
 
 #### Importing React components

package/core/Flash.js

@@ -1,2 +1,2 @@
-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(()=>{if(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-check-outline",error:"icon-gui-exclamation-triangle-outline",alert:"icon-gui-exclamation-triangle-outline",info:""};const iconColor={notice:"text-cool-black",success:"text-cool-black",error:"text-white",alert:"text-white",info:""};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]&&iconColor[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},iconColor[type]&&React.createElement(Icon,{name:"icon-gui-x-mark-outline",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,removeFlash}))]})},[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})))};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(()=>{if(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-check-outline",error:"icon-gui-exclamation-triangle-outline",alert:"icon-gui-exclamation-triangle-outline",info:""};const iconColor={notice:"text-cool-black",success:"text-cool-black",error:"text-white",alert:"text-white",info:""};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]&&iconColor[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},iconColor[type]&&React.createElement(Icon,{name:"icon-gui-x-mark-outline",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;
 //# sourceMappingURL=Flash.js.map

package/core/Flash.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/core/Flash.tsx"],"sourcesContent":["import React, { useEffect, useState, useRef } from \"react\";\nimport DOMPurify from \"dompurify\";\nimport { getRemoteDataStore } from \"./remote-data-store.js\";\nimport ConnectStateWrapper from \"./ConnectStateWrapper\";\nimport Icon from \"./Icon\";\nimport { ColorClass } from \"./styles/colors/types\";\nimport { IconName } from \"./Icon/types\";\n\ntype FlashPropsType = \"error\" | \"success\" | \"notice\" | \"info\" | \"alert\";\n\ntype FlashProps = {\n  id: string;\n  removed: boolean;\n  type: FlashPropsType;\n  content: string;\n  removeFlash: (id: string) => void;\n};\n\ntype FlashesProps = {\n  flashes: { items: Pick<FlashProps, \"type\" | \"content\">[] };\n};\n\ntype BackendFlashesProps = {\n  flashes: string[][];\n};\n\nconst REDUCER_KEY = \"flashes\";\nconst FLASH_DATA_ID = \"ui-flashes\";\n\nconst initialState = { items: [] };\n\nconst reducerFlashes = {\n  [REDUCER_KEY]: (\n    state: {\n      items: FlashProps[];\n    } = initialState,\n    action: { type: string; payload: FlashProps | FlashProps[] },\n  ) => {\n    switch (action.type) {\n      case \"flash/push\": {\n        const flashes = Array.isArray(action.payload)\n          ? action.payload\n          : [action.payload];\n        return { items: [...state.items, ...flashes] };\n      }\n      default:\n        return state;\n    }\n  },\n};\n\n// Not cool but redux isn't a long term plan here\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst selectFlashes = (store: any): { items: FlashProps[] } =>\n  store.getState()[REDUCER_KEY];\n\nconst FLASH_BG_COLOR = {\n  error: \"bg-gui-error\",\n  success: \"bg-zingy-green\",\n  notice: \"bg-electric-cyan\",\n  info: \"bg-electric-cyan\",\n  alert: \"bg-active-orange\",\n};\n\nconst FLASH_TEXT_COLOR = {\n  error: \"text-white\",\n  success: \"text-cool-black\",\n  notice: \"text-cool-black\",\n  info: \"text-cool-black\",\n  alert: \"text-white\",\n};\n\nconst AUTO_HIDE = [\"success\", \"info\", \"notice\"];\nconst AUTO_HIDE_TIME = 8000;\n\nconst useAutoHide = (type: string, closeFlash: () => void) => {\n  const timeoutId = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  useEffect(() => {\n    if (AUTO_HIDE.includes(type)) {\n      timeoutId.current = setTimeout(() => {\n        closeFlash();\n      }, AUTO_HIDE_TIME);\n    }\n\n    return () => {\n      if (timeoutId.current) {\n        clearTimeout(timeoutId.current);\n      }\n    };\n  }, []);\n};\n\nconst Flash = ({ id, type, content, removeFlash }: FlashProps) => {\n  const ref = useRef<HTMLDivElement>(null);\n  const [closed, setClosed] = useState(false);\n  const [flashHeight, setFlashHeight] = useState(0);\n  const [triggerEntryAnimation, setTriggerEntryAnimation] = useState(false);\n\n  const closeFlash = () => {\n    if (ref.current) {\n      setFlashHeight(ref.current.getBoundingClientRect().height);\n    }\n\n    setClosed(true);\n\n    setTimeout(() => {\n      if (id) {\n        removeFlash(id);\n      }\n    }, 100);\n  };\n\n  useEffect(() => setTriggerEntryAnimation(true), []);\n  useAutoHide(type, closeFlash);\n\n  const animateEntry = triggerEntryAnimation && !closed;\n\n  let style;\n\n  if (flashHeight && !closed) {\n    style = { height: `${flashHeight}px` };\n  } else if (closed) {\n    style = { height: 0, marginTop: 0, zIndex: -1 };\n  } else {\n    style = {};\n  }\n\n  const safeContent = DOMPurify.sanitize(content, {\n    ALLOWED_TAGS: [\"a\"],\n    ALLOWED_ATTR: [\"href\", \"data-method\", \"rel\"],\n  });\n\n  const withIcons: Record<FlashPropsType, IconName | \"\"> = {\n    notice: \"icon-gui-ably-badge\",\n    success: \"icon-gui-check-outline\",\n    error: \"icon-gui-exclamation-triangle-outline\",\n    alert: \"icon-gui-exclamation-triangle-outline\",\n    info: \"\",\n  };\n\n  const iconColor: Record<FlashPropsType, ColorClass | \"\"> = {\n    notice: \"text-cool-black\",\n    success: \"text-cool-black\",\n    error: \"text-white\",\n    alert: \"text-white\",\n    info: \"\",\n  };\n\n  return (\n    <div\n      className={`ui-flash-message ui-grid-px ${\n        animateEntry ? \"ui-flash-message-enter\" : \"\"\n      }`}\n      style={style}\n      ref={ref}\n      data-id=\"ui-flash\"\n    >\n      <div\n        className={`${FLASH_BG_COLOR[type]} p-32 flex align-center rounded shadow-container-subtle`}\n      >\n        {withIcons[type] && iconColor[type] && (\n          <Icon\n            name={withIcons[type]}\n            color={iconColor[type]}\n            size=\"1.5rem\"\n            additionalCSS=\"mr-16 self-baseline\"\n          />\n        )}\n        <p\n          className={`ui-text-p1 mr-16 ${FLASH_TEXT_COLOR[type]}`}\n          dangerouslySetInnerHTML={{ __html: safeContent }}\n        />\n        <button\n          type=\"button\"\n          className=\"p-0 ml-auto self-start focus:outline-none\"\n          onClick={closeFlash}\n        >\n          {iconColor[type] && (\n            <Icon\n              name=\"icon-gui-x-mark-outline\"\n              color={iconColor[type]}\n              size=\"1.5rem\"\n              additionalCSS=\"transition-colors\"\n            />\n          )}\n        </button>\n      </div>\n    </div>\n  );\n};\n\nconst Flashes = ({ flashes }: FlashesProps) => {\n  const [flashesWithIds, setFlashesWithIds] = useState<FlashProps[]>([]);\n\n  const removeFlash = (flashId: string) =>\n    setFlashesWithIds((items) => items.filter((item) => item.id !== flashId));\n\n  useEffect(() => {\n    setFlashesWithIds((state) => {\n      return [\n        ...state,\n        ...(flashes?.items ?? []).map((flash) => ({\n          ...flash,\n          id: Math.random().toString(36).slice(2),\n          removed: false,\n          removeFlash,\n        })),\n      ];\n    });\n  }, [flashes]);\n\n  return (\n    <div className=\"ui-flash\" data-id={FLASH_DATA_ID}>\n      {flashesWithIds\n        .filter((item) => !item.removed)\n        .map((flash) => (\n          <Flash key={flash.id} {...flash} />\n        ))}\n    </div>\n  );\n};\n\nconst BackendFlashes = ({ flashes }: BackendFlashesProps) => {\n  useEffect(() => {\n    const transformedFlashes =\n      flashes.map((flash) => {\n        const [type, content] = flash;\n        return { type, content };\n      }) || [];\n\n    if (transformedFlashes.length > 0) {\n      const store = getRemoteDataStore();\n\n      store.dispatch({\n        type: \"flash/push\",\n        payload: transformedFlashes,\n      });\n    }\n  }, []);\n\n  const WrappedFlashes = ConnectStateWrapper(Flashes, {\n    flashes: selectFlashes,\n  });\n\n  return <WrappedFlashes />;\n};\n\nexport { reducerFlashes, FLASH_DATA_ID, Flashes };\nexport default BackendFlashes;\n"],"names":["React","useEffect","useState","useRef","DOMPurify","getRemoteDataStore","ConnectStateWrapper","Icon","REDUCER_KEY","FLASH_DATA_ID","initialState","items","reducerFlashes","state","action","type","flashes","Array","isArray","payload","selectFlashes","store","getState","FLASH_BG_COLOR","error","success","notice","info","alert","FLASH_TEXT_COLOR","AUTO_HIDE","AUTO_HIDE_TIME","useAutoHide","closeFlash","timeoutId","includes","current","setTimeout","clearTimeout","Flash","id","content","removeFlash","ref","closed","setClosed","flashHeight","setFlashHeight","triggerEntryAnimation","setTriggerEntryAnimation","getBoundingClientRect","height","animateEntry","style","marginTop","zIndex","safeContent","sanitize","ALLOWED_TAGS","ALLOWED_ATTR","withIcons","iconColor","div","className","data-id","name","color","size","additionalCSS","p","dangerouslySetInnerHTML","__html","button","onClick","Flashes","flashesWithIds","setFlashesWithIds","flashId","filter","item","map","flash","Math","random","toString","slice","removed","key","BackendFlashes","transformedFlashes","length","dispatch","WrappedFlashes"],"mappings":"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"}
+{"version":3,"sources":["../../src/core/Flash.tsx"],"sourcesContent":["import React, { useEffect, useState, useRef } from \"react\";\nimport DOMPurify from \"dompurify\";\nimport { getRemoteDataStore } from \"./remote-data-store.js\";\nimport ConnectStateWrapper from \"./ConnectStateWrapper\";\nimport Icon from \"./Icon\";\nimport { ColorClass } from \"./styles/colors/types\";\nimport { IconName } from \"./Icon/types\";\n\ntype FlashPropsType = \"error\" | \"success\" | \"notice\" | \"info\" | \"alert\";\n\ntype FlashProps = {\n  id: string;\n  removed: boolean;\n  type: FlashPropsType;\n  content: string;\n  removeFlash: (id: string) => void;\n};\n\ntype FlashesProps = {\n  flashes: { items: FlashProps[] };\n};\n\ntype BackendFlashesProps = {\n  flashes: string[][];\n};\n\nconst REDUCER_KEY = \"flashes\";\nconst FLASH_DATA_ID = \"ui-flashes\";\n\nconst initialState = { items: [] };\n\nconst reducerFlashes = {\n  [REDUCER_KEY]: (\n    state: {\n      items: FlashProps[];\n    } = initialState,\n    action: { type: string; payload: FlashProps | FlashProps[] },\n  ) => {\n    switch (action.type) {\n      case \"flash/push\": {\n        const flashes = Array.isArray(action.payload)\n          ? action.payload\n          : [action.payload];\n        return { items: [...state.items, ...flashes] };\n      }\n      default:\n        return state;\n    }\n  },\n};\n\n// Not cool but redux isn't a long term plan here\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst selectFlashes = (store: any): { items: FlashProps[] } =>\n  store.getState()[REDUCER_KEY];\n\nconst FLASH_BG_COLOR = {\n  error: \"bg-gui-error\",\n  success: \"bg-zingy-green\",\n  notice: \"bg-electric-cyan\",\n  info: \"bg-electric-cyan\",\n  alert: \"bg-active-orange\",\n};\n\nconst FLASH_TEXT_COLOR = {\n  error: \"text-white\",\n  success: \"text-cool-black\",\n  notice: \"text-cool-black\",\n  info: \"text-cool-black\",\n  alert: \"text-white\",\n};\n\nconst AUTO_HIDE = [\"success\", \"info\", \"notice\"];\nconst AUTO_HIDE_TIME = 8000;\n\nconst useAutoHide = (type: string, closeFlash: () => void) => {\n  const timeoutId = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  useEffect(() => {\n    if (AUTO_HIDE.includes(type)) {\n      timeoutId.current = setTimeout(() => {\n        closeFlash();\n      }, AUTO_HIDE_TIME);\n    }\n\n    return () => {\n      if (timeoutId.current) {\n        clearTimeout(timeoutId.current);\n      }\n    };\n  }, []);\n};\n\nconst Flash = ({ id, type, content, removeFlash }: FlashProps) => {\n  const ref = useRef<HTMLDivElement>(null);\n  const [closed, setClosed] = useState(false);\n  const [flashHeight, setFlashHeight] = useState(0);\n  const [triggerEntryAnimation, setTriggerEntryAnimation] = useState(false);\n\n  const closeFlash = () => {\n    if (ref.current) {\n      setFlashHeight(ref.current.getBoundingClientRect().height);\n    }\n\n    setClosed(true);\n\n    setTimeout(() => {\n      if (id) {\n        removeFlash(id);\n      }\n    }, 100);\n  };\n\n  useEffect(() => setTriggerEntryAnimation(true), []);\n  useAutoHide(type, closeFlash);\n\n  const animateEntry = triggerEntryAnimation && !closed;\n\n  let style;\n\n  if (flashHeight && !closed) {\n    style = { height: `${flashHeight}px` };\n  } else if (closed) {\n    style = { height: 0, marginTop: 0, zIndex: -1 };\n  } else {\n    style = {};\n  }\n\n  const safeContent = DOMPurify.sanitize(content, {\n    ALLOWED_TAGS: [\"a\"],\n    ALLOWED_ATTR: [\"href\", \"data-method\", \"rel\"],\n  });\n\n  const withIcons: Record<FlashPropsType, IconName | \"\"> = {\n    notice: \"icon-gui-ably-badge\",\n    success: \"icon-gui-check-outline\",\n    error: \"icon-gui-exclamation-triangle-outline\",\n    alert: \"icon-gui-exclamation-triangle-outline\",\n    info: \"\",\n  };\n\n  const iconColor: Record<FlashPropsType, ColorClass | \"\"> = {\n    notice: \"text-cool-black\",\n    success: \"text-cool-black\",\n    error: \"text-white\",\n    alert: \"text-white\",\n    info: \"\",\n  };\n\n  return (\n    <div\n      className={`ui-flash-message ui-grid-px ${\n        animateEntry ? \"ui-flash-message-enter\" : \"\"\n      }`}\n      style={style}\n      ref={ref}\n      data-id=\"ui-flash\"\n    >\n      <div\n        className={`${FLASH_BG_COLOR[type]} p-32 flex align-center rounded shadow-container-subtle`}\n      >\n        {withIcons[type] && iconColor[type] && (\n          <Icon\n            name={withIcons[type]}\n            color={iconColor[type]}\n            size=\"1.5rem\"\n            additionalCSS=\"mr-16 self-baseline\"\n          />\n        )}\n        <p\n          className={`ui-text-p1 mr-16 ${FLASH_TEXT_COLOR[type]}`}\n          dangerouslySetInnerHTML={{ __html: safeContent }}\n        />\n        <button\n          type=\"button\"\n          className=\"p-0 ml-auto self-start focus:outline-none\"\n          onClick={closeFlash}\n        >\n          {iconColor[type] && (\n            <Icon\n              name=\"icon-gui-x-mark-outline\"\n              color={iconColor[type]}\n              size=\"1.5rem\"\n              additionalCSS=\"transition-colors\"\n            />\n          )}\n        </button>\n      </div>\n    </div>\n  );\n};\n\nconst Flashes = ({ flashes }: FlashesProps) => {\n  const [flashesWithIds, setFlashesWithIds] = useState<FlashProps[]>([]);\n\n  const removeFlash = (flashId: string) =>\n    setFlashesWithIds((items) => items.filter((item) => item.id !== flashId));\n\n  useEffect(() => {\n    setFlashesWithIds((state) => {\n      return [\n        ...state,\n        ...(flashes?.items ?? []).map((flash) => ({\n          ...flash,\n          id: Math.random().toString(36).slice(2),\n          removed: false,\n        })),\n      ];\n    });\n  }, [flashes]);\n\n  return (\n    <div className=\"ui-flash\" data-id={FLASH_DATA_ID}>\n      {flashesWithIds\n        .filter((item) => !item.removed)\n        .map((flash) => (\n          <Flash key={flash.id} {...flash} removeFlash={removeFlash} />\n        ))}\n    </div>\n  );\n};\n\nconst BackendFlashes = ({ flashes }: BackendFlashesProps) => {\n  useEffect(() => {\n    const transformedFlashes =\n      flashes.map((flash) => {\n        const [type, content] = flash;\n        return { type, content };\n      }) || [];\n\n    if (transformedFlashes.length > 0) {\n      const store = getRemoteDataStore();\n\n      store.dispatch({\n        type: \"flash/push\",\n        payload: transformedFlashes,\n      });\n    }\n  }, []);\n\n  const WrappedFlashes = ConnectStateWrapper(Flashes, {\n    flashes: selectFlashes,\n  });\n\n  return <WrappedFlashes />;\n};\n\nexport { reducerFlashes, FLASH_DATA_ID, Flashes };\nexport default BackendFlashes;\n"],"names":["React","useEffect","useState","useRef","DOMPurify","getRemoteDataStore","ConnectStateWrapper","Icon","REDUCER_KEY","FLASH_DATA_ID","initialState","items","reducerFlashes","state","action","type","flashes","Array","isArray","payload","selectFlashes","store","getState","FLASH_BG_COLOR","error","success","notice","info","alert","FLASH_TEXT_COLOR","AUTO_HIDE","AUTO_HIDE_TIME","useAutoHide","closeFlash","timeoutId","includes","current","setTimeout","clearTimeout","Flash","id","content","removeFlash","ref","closed","setClosed","flashHeight","setFlashHeight","triggerEntryAnimation","setTriggerEntryAnimation","getBoundingClientRect","height","animateEntry","style","marginTop","zIndex","safeContent","sanitize","ALLOWED_TAGS","ALLOWED_ATTR","withIcons","iconColor","div","className","data-id","name","color","size","additionalCSS","p","dangerouslySetInnerHTML","__html","button","onClick","Flashes","flashesWithIds","setFlashesWithIds","flashId","filter","item","map","flash","Math","random","toString","slice","removed","key","BackendFlashes","transformedFlashes","length","dispatch","WrappedFlashes"],"mappings":"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"}

package/core/Meganav.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/core/Meganav.tsx"],"sourcesContent":["import React, { ReactNode, useEffect, useState } from \"react\";\n\nimport { connectState } from \"./remote-data-store.js\";\nimport { selectSessionData } from \"./remote-session-data.js\";\n\nimport Logo from \"./Logo\";\nimport MeganavData from \"./Meganav/component.json\";\nimport MeganavScripts from \"./Meganav/component.js\";\nimport MeganavItemsDesktop from \"./MeganavItemsDesktop\";\nimport MeganavItemsSignedIn from \"./MeganavItemsSignedIn\";\nimport MeganavItemsMobile from \"./MeganavItemsMobile\";\nimport Notice from \"./Notice\";\nimport _absUrl from \"./url-base.js\";\nimport MeganavContentProducts from \"./MeganavContentProducts\";\nimport MeganavContentUseCases from \"./MeganavContentUseCases\";\nimport MeganavContentCompany from \"./MeganavContentCompany\";\nimport MeganavContentDevelopers from \"./MeganavContentDevelopers\";\nimport MeganavSearch from \"./MeganavSearch\";\nimport { ColorClass } from \"./styles/colors/types\";\n\nexport type MeganavTheme = {\n  backgroundColor?: ColorClass;\n  textColor?: ColorClass;\n  buttonBackgroundColor?: ColorClass;\n  buttonTextColor?: ColorClass;\n  mobileMenuColor: ColorClass;\n  logoTextColor?: ColorClass;\n  barShadow?: string;\n};\n\nexport type AbsUrl = (path: string) => string;\n\nexport type MeganavPaths = {\n  logo?: string;\n  iconSprites: string;\n  ablyStack: string;\n  awsLogo?: string;\n};\n\nexport type MeganavPanels = {\n  [index: string]: ({\n    paths,\n    absUrl,\n    statusUrl,\n  }: {\n    paths?: MeganavPaths;\n    absUrl: (path: string) => string;\n    statusUrl: string;\n  }) => ReactNode;\n};\n\nexport type MeganavSessionState = {\n  signedIn: boolean;\n  logOut: {\n    token: string;\n    href: string;\n    text: string;\n  };\n  accountName: string;\n  preferredEmail: string;\n  account: {\n    links: {\n      dashboard: {\n        href: string;\n      };\n    };\n  };\n  mySettings: {\n    text: string;\n    href: string;\n  };\n  myAccessTokens: {\n    text: string;\n    href: string;\n  };\n};\n\ntype SignInProps = {\n  sessionState: MeganavSessionState;\n  theme: MeganavTheme;\n  loginLink: string;\n  absUrl: AbsUrl;\n  searchDataId?: string;\n};\n\n// This type is based on the API response from the notice API and the data\n// passed into the Meganav component, which then turns it into something\n// the Notice component can use. The type is exported for the benefit of\n// Voltaire\nexport type NoticeApiProps = {\n  props: {\n    title: string;\n    bodyText: string;\n    buttonLink: string;\n    buttonLabel: string;\n    closeBtn: boolean;\n  };\n  config: {\n    cookieId: string;\n    noticeId: string | number;\n    options: {\n      collapse: boolean;\n    };\n  };\n};\n\ntype MeganavProps = {\n  paths?: MeganavPaths;\n  themeName: \"white\" | \"black\" | \"transparentToWhite\";\n  notice?: NoticeApiProps;\n  loginLink?: string;\n  urlBase?: string;\n  addSearchApiKey: string;\n  statusUrl: string;\n  searchDataId?: string;\n};\n\nconst SignIn = ({\n  sessionState,\n  theme,\n  loginLink,\n  absUrl,\n  searchDataId,\n}: SignInProps) => {\n  return sessionState.signedIn ? (\n    <MeganavItemsSignedIn\n      absUrl={absUrl}\n      sessionState={sessionState}\n      theme={theme}\n      searchDataId={searchDataId}\n    />\n  ) : (\n    <ul className=\"hidden md:flex items-center\">\n      <li className=\"ui-meganav-item\">\n        <a\n          href={absUrl(\"/contact\")}\n          className={`ui-meganav-link ${theme.textColor}`}\n          data-id=\"meganav-link\"\n        >\n          Contact us\n        </a>\n      </li>\n      <li className=\"ui-meganav-item\">\n        <a\n          href={absUrl(loginLink)}\n          className={`ui-meganav-link mr-0 ${theme.textColor}`}\n          data-id=\"meganav-link\"\n        >\n          Login\n        </a>\n      </li>\n      <li className=\"ui-meganav-item\">\n        <MeganavSearch absUrl={absUrl} dataId={searchDataId} />\n      </li>\n      <li className=\"ui-meganav-item\">\n        <a\n          href={absUrl(\"/sign-up\")}\n          data-id=\"meganav-sign-up-btn\"\n          className={`ui-btn p-btn-small ${theme.buttonBackgroundColor} ${theme.buttonTextColor}`}\n        >\n          Sign up free\n        </a>\n      </li>\n    </ul>\n  );\n};\n\nconst SignInPlaceholder = () => <div />;\n\nconst panels = {\n  MeganavContentProducts,\n  MeganavContentUseCases,\n  MeganavContentCompany,\n  MeganavContentDevelopers,\n};\n\nconst Meganav = ({\n  paths,\n  themeName = \"white\",\n  notice,\n  loginLink = \"/login\",\n  urlBase,\n  addSearchApiKey,\n  statusUrl,\n  searchDataId,\n}: MeganavProps) => {\n  const [sessionState, setSessionState] = useState<MeganavSessionState>();\n\n  useEffect(() => {\n    // Note if state is never updated, sessionState stays null and never removes the placeholder.\n    // This makes SSR consistent (ie. we always show the placeholder)\n    connectState(selectSessionData, setSessionState);\n  }, []);\n\n  useEffect(() => {\n    const teardown = MeganavScripts({ themeName, addSearchApiKey });\n    return () => teardown();\n  }, [sessionState]);\n\n  const theme = MeganavData.themes[themeName] as MeganavTheme;\n  const absUrl = (path: string) => _absUrl(path, urlBase);\n\n  return (\n    <nav\n      className={`ui-meganav-wrapper ${theme.backgroundColor} ${theme.barShadow}`}\n      data-id=\"meganav\"\n      aria-label=\"Main\"\n    >\n      {notice && <Notice {...notice.props} config={notice.config} />}\n      <div className=\"ui-meganav ui-grid-px\">\n        <div className=\"mr-24\">\n          <Logo dataId=\"meganav-logo\" href={urlBase} logoUrl={paths?.logo} />\n        </div>\n\n        <MeganavItemsDesktop\n          panels={panels}\n          paths={paths}\n          theme={theme}\n          absUrl={absUrl}\n          statusUrl={statusUrl}\n        />\n\n        {/* Because we load the session state through fetch, we display a placeholder until fetch returns */}\n        {sessionState ? (\n          <SignIn\n            sessionState={sessionState}\n            theme={theme}\n            loginLink={loginLink}\n            absUrl={absUrl}\n            searchDataId={searchDataId}\n          />\n        ) : (\n          <SignInPlaceholder />\n        )}\n\n        <MeganavItemsMobile\n          panels={panels}\n          sessionState={sessionState}\n          paths={paths}\n          theme={theme}\n          loginLink={loginLink}\n          absUrl={absUrl}\n          statusUrl={statusUrl}\n          searchDataId={searchDataId}\n        />\n      </div>\n    </nav>\n  );\n};\n\nexport default Meganav;\n"],"names":["React","useEffect","useState","connectState","selectSessionData","Logo","MeganavData","MeganavScripts","MeganavItemsDesktop","MeganavItemsSignedIn","MeganavItemsMobile","Notice","_absUrl","MeganavContentProducts","MeganavContentUseCases","MeganavContentCompany","MeganavContentDevelopers","MeganavSearch","SignIn","sessionState","theme","loginLink","absUrl","searchDataId","signedIn","ul","className","li","a","href","textColor","data-id","dataId","buttonBackgroundColor","buttonTextColor","SignInPlaceholder","div","panels","Meganav","paths","themeName","notice","urlBase","addSearchApiKey","statusUrl","setSessionState","teardown","themes","path","nav","backgroundColor","barShadow","aria-label","props","config","logoUrl","logo"],"mappings":"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"}
+{"version":3,"sources":["../../src/core/Meganav.tsx"],"sourcesContent":["import React, { ReactNode, useEffect, useState } from \"react\";\n\nimport { connectState } from \"./remote-data-store.js\";\nimport { selectSessionData } from \"./remote-session-data.js\";\n\nimport Logo from \"./Logo\";\nimport MeganavData from \"./Meganav/component.json\";\nimport MeganavScripts from \"./Meganav/component.js\";\nimport MeganavItemsDesktop from \"./MeganavItemsDesktop\";\nimport MeganavItemsSignedIn from \"./MeganavItemsSignedIn\";\nimport MeganavItemsMobile from \"./MeganavItemsMobile\";\nimport Notice from \"./Notice\";\nimport _absUrl from \"./url-base.js\";\nimport MeganavContentProducts from \"./MeganavContentProducts\";\nimport MeganavContentUseCases from \"./MeganavContentUseCases\";\nimport MeganavContentCompany from \"./MeganavContentCompany\";\nimport MeganavContentDevelopers from \"./MeganavContentDevelopers\";\nimport MeganavSearch from \"./MeganavSearch\";\nimport { ColorClass } from \"./styles/colors/types\";\n\nexport type MeganavTheme = {\n  backgroundColor?: ColorClass;\n  textColor?: ColorClass;\n  buttonBackgroundColor?: ColorClass;\n  buttonTextColor?: ColorClass;\n  mobileMenuColor: ColorClass;\n  logoTextColor?: ColorClass;\n  barShadow?: string;\n};\n\nexport type AbsUrl = (path: string) => string;\n\nexport type MeganavPaths = {\n  logo?: string;\n  iconSprites: string;\n  ablyStack: string;\n  blogThumb1: string;\n  blogThumb2: string;\n  blogThumb3: string;\n  awsLogo?: string;\n};\n\nexport type MeganavPanels = {\n  [index: string]: ({\n    paths,\n    absUrl,\n    statusUrl,\n  }: {\n    paths?: MeganavPaths;\n    absUrl: (path: string) => string;\n    statusUrl: string;\n  }) => ReactNode;\n};\n\nexport type MeganavSessionState = {\n  signedIn: boolean;\n  logOut: {\n    token: string;\n    href: string;\n    text: string;\n  };\n  accountName: string;\n  preferredEmail: string;\n  account: {\n    links: {\n      dashboard: {\n        href: string;\n      };\n    };\n  };\n  mySettings: {\n    text: string;\n    href: string;\n  };\n  myAccessTokens: {\n    text: string;\n    href: string;\n  };\n};\n\ntype SignInProps = {\n  sessionState: MeganavSessionState;\n  theme: MeganavTheme;\n  loginLink: string;\n  absUrl: AbsUrl;\n  searchDataId?: string;\n};\n\n// This type is based on the API response from the notice API and the data\n// passed into the Meganav component, which then turns it into something\n// the Notice component can use. The type is exported for the benefit of\n// Voltaire\nexport type MeganavNoticeProps = {\n  props: {\n    title: string;\n    bodyText: string;\n    buttonLink: string;\n    buttonLabel: string;\n    closeBtn: boolean;\n  };\n  config: {\n    cookieId: string;\n    noticeId: string | number;\n    options: {\n      collapse: boolean;\n    };\n  };\n};\n\ntype MeganavProps = {\n  paths?: MeganavPaths;\n  themeName: \"white\" | \"black\" | \"transparentToWhite\";\n  notice?: MeganavNoticeProps;\n  loginLink?: string;\n  urlBase?: string;\n  addSearchApiKey: string;\n  statusUrl: string;\n  searchDataId?: string;\n};\n\nconst SignIn = ({\n  sessionState,\n  theme,\n  loginLink,\n  absUrl,\n  searchDataId,\n}: SignInProps) => {\n  return sessionState.signedIn ? (\n    <MeganavItemsSignedIn\n      absUrl={absUrl}\n      sessionState={sessionState}\n      theme={theme}\n      searchDataId={searchDataId}\n    />\n  ) : (\n    <ul className=\"hidden md:flex items-center\">\n      <li className=\"ui-meganav-item\">\n        <a\n          href={absUrl(\"/contact\")}\n          className={`ui-meganav-link ${theme.textColor}`}\n          data-id=\"meganav-link\"\n        >\n          Contact us\n        </a>\n      </li>\n      <li className=\"ui-meganav-item\">\n        <a\n          href={absUrl(loginLink)}\n          className={`ui-meganav-link mr-0 ${theme.textColor}`}\n          data-id=\"meganav-link\"\n        >\n          Login\n        </a>\n      </li>\n      <li className=\"ui-meganav-item\">\n        <MeganavSearch absUrl={absUrl} dataId={searchDataId} />\n      </li>\n      <li className=\"ui-meganav-item\">\n        <a\n          href={absUrl(\"/sign-up\")}\n          data-id=\"meganav-sign-up-btn\"\n          className={`ui-btn p-btn-small ${theme.buttonBackgroundColor} ${theme.buttonTextColor}`}\n        >\n          Sign up free\n        </a>\n      </li>\n    </ul>\n  );\n};\n\nconst SignInPlaceholder = () => <div />;\n\nconst panels = {\n  MeganavContentProducts,\n  MeganavContentUseCases,\n  MeganavContentCompany,\n  MeganavContentDevelopers,\n};\n\nconst Meganav = ({\n  paths,\n  themeName = \"white\",\n  notice,\n  loginLink = \"/login\",\n  urlBase,\n  addSearchApiKey,\n  statusUrl,\n  searchDataId,\n}: MeganavProps) => {\n  const [sessionState, setSessionState] = useState<MeganavSessionState>();\n\n  useEffect(() => {\n    // Note if state is never updated, sessionState stays null and never removes the placeholder.\n    // This makes SSR consistent (ie. we always show the placeholder)\n    connectState(selectSessionData, setSessionState);\n  }, []);\n\n  useEffect(() => {\n    const teardown = MeganavScripts({ themeName, addSearchApiKey });\n    return () => teardown();\n  }, [sessionState]);\n\n  const theme = MeganavData.themes[themeName] as MeganavTheme;\n  const absUrl = (path: string) => _absUrl(path, urlBase);\n\n  return (\n    <nav\n      className={`ui-meganav-wrapper ${theme.backgroundColor} ${theme.barShadow}`}\n      data-id=\"meganav\"\n      aria-label=\"Main\"\n    >\n      {notice && <Notice {...notice.props} config={notice.config} />}\n      <div className=\"ui-meganav ui-grid-px\">\n        <div className=\"mr-24\">\n          <Logo dataId=\"meganav-logo\" href={urlBase} logoUrl={paths?.logo} />\n        </div>\n\n        <MeganavItemsDesktop\n          panels={panels}\n          paths={paths}\n          theme={theme}\n          absUrl={absUrl}\n          statusUrl={statusUrl}\n        />\n\n        {/* Because we load the session state through fetch, we display a placeholder until fetch returns */}\n        {sessionState ? (\n          <SignIn\n            sessionState={sessionState}\n            theme={theme}\n            loginLink={loginLink}\n            absUrl={absUrl}\n            searchDataId={searchDataId}\n          />\n        ) : (\n          <SignInPlaceholder />\n        )}\n\n        <MeganavItemsMobile\n          panels={panels}\n          sessionState={sessionState}\n          paths={paths}\n          theme={theme}\n          loginLink={loginLink}\n          absUrl={absUrl}\n          statusUrl={statusUrl}\n          searchDataId={searchDataId}\n        />\n      </div>\n    </nav>\n  );\n};\n\nexport default Meganav;\n"],"names":["React","useEffect","useState","connectState","selectSessionData","Logo","MeganavData","MeganavScripts","MeganavItemsDesktop","MeganavItemsSignedIn","MeganavItemsMobile","Notice","_absUrl","MeganavContentProducts","MeganavContentUseCases","MeganavContentCompany","MeganavContentDevelopers","MeganavSearch","SignIn","sessionState","theme","loginLink","absUrl","searchDataId","signedIn","ul","className","li","a","href","textColor","data-id","dataId","buttonBackgroundColor","buttonTextColor","SignInPlaceholder","div","panels","Meganav","paths","themeName","notice","urlBase","addSearchApiKey","statusUrl","setSessionState","teardown","themes","path","nav","backgroundColor","barShadow","aria-label","props","config","logoUrl","logo"],"mappings":"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"}

package/core/Notice.js

@@ -1,2 +1,2 @@
-import React,{useEffect}from"react";import DOMPurify from"dompurify";import Icon from"./Icon";import cn from"./utils/cn.js";import NoticeScripts from"./Notice/component.js";import useRailsUjsLinks from"./hooks/use-rails-ujs-hooks";const defaultTextColor="text-neutral-1300";const contentWrapperClasses="w-full pr-8 ui-text-p4 self-center";const ContentWrapper=({buttonLink,textColor=defaultTextColor,children})=>buttonLink?React.createElement("a",{href:buttonLink,className:cn(contentWrapperClasses,textColor)},children):React.createElement("div",{className:cn(contentWrapperClasses,textColor)},children);const Notice=({buttonLink,buttonLabel,bodyText="",title,config,closeBtn,bgColor="bg-orange-100",textColor=defaultTextColor})=>{useEffect(()=>{NoticeScripts({bannerContainer:document.querySelector('[data-id="ui-notice"]'),cookieId:config?.cookieId,noticeId:config?.noticeId,options:{collapse:config?.options?.collapse||false}})},[]);const safeContent=DOMPurify.sanitize(bodyText,{ALLOWED_TAGS:["a"],ALLOWED_ATTR:["href","data-method","rel"]});const contentRef=useRailsUjsLinks();return React.createElement("div",{className:cn("ui-announcement",bgColor,textColor),"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",{ref:contentRef,className:"pr-4",dangerouslySetInnerHTML:{__html:safeContent}}),buttonLabel&&React.createElement("span",{className:"cursor-pointer whitespace-nowrap text-gui-blue-default-light"},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-x-mark-outline",size:"1.25rem",color:textColor}))))};export default Notice;
+import React,{useEffect}from"react";import Icon from"./Icon";import cn from"./utils/cn.js";import NoticeScripts from"./Notice/component.js";const defaultTextColor="text-neutral-1300";const contentWrapperClasses="w-full pr-8 ui-text-p4 self-center";const ContentWrapper=({buttonLink,textColor=defaultTextColor,children})=>buttonLink?React.createElement("a",{href:buttonLink,className:cn(contentWrapperClasses,textColor)},children):React.createElement("div",{className:cn(contentWrapperClasses,textColor)},children);const Notice=({buttonLink,buttonLabel,bodyText,title,config,closeBtn,bgColor="bg-orange-100",textColor=defaultTextColor})=>{useEffect(()=>{NoticeScripts({bannerContainer:document.querySelector('[data-id="ui-notice"]'),cookieId:config?.cookieId,noticeId:config?.noticeId,options:{collapse:config?.options?.collapse||false}})},[]);return React.createElement("div",{className:cn("ui-announcement",bgColor,textColor),"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:"cursor-pointer whitespace-nowrap text-gui-blue-default-light"},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-x-mark-outline",size:"1.25rem",color:textColor}))))};export default Notice;
 //# sourceMappingURL=Notice.js.map

package/core/Notice.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/core/Notice.tsx"],"sourcesContent":["import React, { ReactNode, useEffect } from \"react\";\nimport DOMPurify from \"dompurify\";\n\nimport { ColorClass, ColorThemeSet } from \"./styles/colors/types\";\nimport Icon from \"./Icon\";\nimport cn from \"./utils/cn.js\";\nimport NoticeScripts from \"./Notice/component.js\";\n\ntype ContentWrapperProps = {\n  buttonLink: string;\n  children: ReactNode;\n  textColor?: ColorClass | ColorThemeSet;\n};\nimport useRailsUjsLinks from \"./hooks/use-rails-ujs-hooks\";\n\n// TODO(jamiehenson):\n// This type is a bit messed up currently due to the NoticeScripts import being interpreted as NoticeProps.\n// Plan is to TS-ify the JS assets too, so this can be rectified then. The NoticeScripts-oriented props are\n// the ones after the line break.\nexport type NoticeProps = {\n  buttonLink?: string;\n  buttonLabel?: string;\n  bodyText?: string;\n  title?: string;\n  closeBtn?: boolean;\n  config?: {\n    options: {\n      collapse: boolean;\n    };\n    noticeId: string | number;\n    cookieId: string;\n  };\n  bgColor?: string;\n  textColor?: ColorClass | ColorThemeSet;\n\n  bannerContainer?: Element | null;\n  cookieId?: string;\n  noticeId?: string;\n  options?: { collapse: boolean };\n};\n\nconst defaultTextColor = \"text-neutral-1300\";\n\nconst contentWrapperClasses = \"w-full pr-8 ui-text-p4 self-center\";\n\nconst ContentWrapper = ({\n  buttonLink,\n  textColor = defaultTextColor,\n  children,\n}: ContentWrapperProps) =>\n  buttonLink ? (\n    <a href={buttonLink} className={cn(contentWrapperClasses, textColor)}>\n      {children}\n    </a>\n  ) : (\n    <div className={cn(contentWrapperClasses, textColor)}>{children}</div>\n  );\n\nconst Notice = ({\n  buttonLink,\n  buttonLabel,\n  bodyText = \"\",\n  title,\n  config,\n  closeBtn,\n  bgColor = \"bg-orange-100\",\n  textColor = defaultTextColor,\n}: NoticeProps) => {\n  useEffect(() => {\n    NoticeScripts({\n      bannerContainer: document.querySelector('[data-id=\"ui-notice\"]'),\n      cookieId: config?.cookieId,\n      noticeId: config?.noticeId,\n      options: {\n        collapse: config?.options?.collapse || false,\n      },\n    });\n  }, []);\n\n  const safeContent = DOMPurify.sanitize(bodyText, {\n    ALLOWED_TAGS: [\"a\"],\n    ALLOWED_ATTR: [\"href\", \"data-method\", \"rel\"],\n  });\n\n  const contentRef = useRailsUjsLinks();\n\n  return (\n    <div\n      className={cn(\"ui-announcement\", bgColor, textColor)}\n      data-id=\"ui-notice\"\n      style={{ maxHeight: 0, overflow: \"hidden\" }}\n    >\n      <div className=\"ui-grid-px py-16 max-w-screen-xl mx-auto flex items-start\">\n        <ContentWrapper buttonLink={buttonLink ?? \"#\"}>\n          <strong className=\"font-bold whitespace-nowrap pr-4\">{title}</strong>\n          <span\n            ref={contentRef}\n            className=\"pr-4\"\n            dangerouslySetInnerHTML={{\n              __html: safeContent,\n            }}\n          ></span>\n          {buttonLabel && (\n            <span className=\"cursor-pointer whitespace-nowrap text-gui-blue-default-light\">\n              {buttonLabel}\n            </span>\n          )}\n        </ContentWrapper>\n\n        {closeBtn && (\n          <button\n            type=\"button\"\n            className=\"ml-auto h-20 w-20 border-none bg-none self-baseline\"\n          >\n            <Icon\n              name=\"icon-gui-x-mark-outline\"\n              size=\"1.25rem\"\n              color={textColor}\n            />\n          </button>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default Notice;\n"],"names":["React","useEffect","DOMPurify","Icon","cn","NoticeScripts","useRailsUjsLinks","defaultTextColor","contentWrapperClasses","ContentWrapper","buttonLink","textColor","children","a","href","className","div","Notice","buttonLabel","bodyText","title","config","closeBtn","bgColor","bannerContainer","document","querySelector","cookieId","noticeId","options","collapse","safeContent","sanitize","ALLOWED_TAGS","ALLOWED_ATTR","contentRef","data-id","style","maxHeight","overflow","strong","span","ref","dangerouslySetInnerHTML","__html","button","type","name","size","color"],"mappings":"AAAA,OAAOA,OAAoBC,SAAS,KAAQ,OAAQ,AACpD,QAAOC,cAAe,WAAY,AAGlC,QAAOC,SAAU,QAAS,AAC1B,QAAOC,OAAQ,eAAgB,AAC/B,QAAOC,kBAAmB,uBAAwB,AAOlD,QAAOC,qBAAsB,6BAA8B,CA4B3D,MAAMC,iBAAmB,oBAEzB,MAAMC,sBAAwB,qCAE9B,MAAMC,eAAiB,CAAC,CACtBC,UAAU,CACVC,UAAYJ,gBAAgB,CAC5BK,QAAQ,CACY,GACpBF,WACE,oBAACG,KAAEC,KAAMJ,WAAYK,UAAWX,GAAGI,sBAAuBG,YACvDC,UAGH,oBAACI,OAAID,UAAWX,GAAGI,sBAAuBG,YAAaC,UAG3D,MAAMK,OAAS,CAAC,CACdP,UAAU,CACVQ,WAAW,CACXC,SAAW,EAAE,CACbC,KAAK,CACLC,MAAM,CACNC,QAAQ,CACRC,QAAU,eAAe,CACzBZ,UAAYJ,gBAAgB,CAChB,IACZN,UAAU,KACRI,cAAc,CACZmB,gBAAiBC,SAASC,aAAa,CAAC,yBACxCC,SAAUN,QAAQM,SAClBC,SAAUP,QAAQO,SAClBC,QAAS,CACPC,SAAUT,QAAQQ,SAASC,UAAY,KACzC,CACF,EACF,EAAG,EAAE,EAEL,MAAMC,YAAc7B,UAAU8B,QAAQ,CAACb,SAAU,CAC/Cc,aAAc,CAAC,IAAI,CACnBC,aAAc,CAAC,OAAQ,cAAe,MAAM,AAC9C,GAEA,MAAMC,WAAa7B,mBAEnB,OACE,oBAACU,OACCD,UAAWX,GAAG,kBAAmBmB,QAASZ,WAC1CyB,UAAQ,YACRC,MAAO,CAAEC,UAAW,EAAGC,SAAU,QAAS,GAE1C,oBAACvB,OAAID,UAAU,6DACb,oBAACN,gBAAeC,WAAYA,YAAc,KACxC,oBAAC8B,UAAOzB,UAAU,oCAAoCK,OACtD,oBAACqB,QACCC,IAAKP,WACLpB,UAAU,OACV4B,wBAAyB,CACvBC,OAAQb,WACV,IAEDb,aACC,oBAACuB,QAAK1B,UAAU,gEACbG,cAKNI,UACC,oBAACuB,UACCC,KAAK,SACL/B,UAAU,uDAEV,oBAACZ,MACC4C,KAAK,0BACLC,KAAK,UACLC,MAAOtC,cAOrB,CAEA,gBAAeM,MAAO"}
+{"version":3,"sources":["../../src/core/Notice.tsx"],"sourcesContent":["import React, { ReactNode, useEffect } from \"react\";\n\nimport { ColorClass, ColorThemeSet } from \"./styles/colors/types\";\nimport Icon from \"./Icon\";\nimport cn from \"./utils/cn.js\";\nimport NoticeScripts from \"./Notice/component.js\";\n\ntype ContentWrapperProps = {\n  buttonLink: string;\n  children: ReactNode;\n  textColor?: ColorClass | ColorThemeSet;\n};\n\n// TODO(jamiehenson):\n// This type is a bit messed up currently due to the NoticeScripts import being interpreted as NoticeProps.\n// Plan is to TS-ify the JS assets too, so this can be rectified then. The NoticeScripts-oriented props are\n// the ones after the line break.\nexport type NoticeProps = {\n  buttonLink?: string;\n  buttonLabel?: string;\n  bodyText?: string;\n  title?: string;\n  closeBtn?: boolean;\n  config?: {\n    options: {\n      collapse: boolean;\n    };\n    noticeId: string | number;\n    cookieId: string;\n  };\n  bgColor?: string;\n  textColor?: ColorClass | ColorThemeSet;\n\n  bannerContainer?: Element | null;\n  cookieId?: string;\n  noticeId?: string;\n  options?: { collapse: boolean };\n};\n\nconst defaultTextColor = \"text-neutral-1300\";\n\nconst contentWrapperClasses = \"w-full pr-8 ui-text-p4 self-center\";\n\nconst ContentWrapper = ({\n  buttonLink,\n  textColor = defaultTextColor,\n  children,\n}: ContentWrapperProps) =>\n  buttonLink ? (\n    <a href={buttonLink} className={cn(contentWrapperClasses, textColor)}>\n      {children}\n    </a>\n  ) : (\n    <div className={cn(contentWrapperClasses, textColor)}>{children}</div>\n  );\n\nconst Notice = ({\n  buttonLink,\n  buttonLabel,\n  bodyText,\n  title,\n  config,\n  closeBtn,\n  bgColor = \"bg-orange-100\",\n  textColor = defaultTextColor,\n}: NoticeProps) => {\n  useEffect(() => {\n    NoticeScripts({\n      bannerContainer: document.querySelector('[data-id=\"ui-notice\"]'),\n      cookieId: config?.cookieId,\n      noticeId: config?.noticeId,\n      options: {\n        collapse: config?.options?.collapse || false,\n      },\n    });\n  }, []);\n\n  return (\n    <div\n      className={cn(\"ui-announcement\", bgColor, textColor)}\n      data-id=\"ui-notice\"\n      style={{ maxHeight: 0, overflow: \"hidden\" }}\n    >\n      <div className=\"ui-grid-px py-16 max-w-screen-xl mx-auto flex items-start\">\n        <ContentWrapper buttonLink={buttonLink ?? \"#\"}>\n          <strong className=\"font-bold whitespace-nowrap pr-4\">{title}</strong>\n          <span className=\"pr-4\">{bodyText}</span>\n          {buttonLabel && (\n            <span className=\"cursor-pointer whitespace-nowrap text-gui-blue-default-light\">\n              {buttonLabel}\n            </span>\n          )}\n        </ContentWrapper>\n\n        {closeBtn && (\n          <button\n            type=\"button\"\n            className=\"ml-auto h-20 w-20 border-none bg-none self-baseline\"\n          >\n            <Icon\n              name=\"icon-gui-x-mark-outline\"\n              size=\"1.25rem\"\n              color={textColor}\n            />\n          </button>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default Notice;\n"],"names":["React","useEffect","Icon","cn","NoticeScripts","defaultTextColor","contentWrapperClasses","ContentWrapper","buttonLink","textColor","children","a","href","className","div","Notice","buttonLabel","bodyText","title","config","closeBtn","bgColor","bannerContainer","document","querySelector","cookieId","noticeId","options","collapse","data-id","style","maxHeight","overflow","strong","span","button","type","name","size","color"],"mappings":"AAAA,OAAOA,OAAoBC,SAAS,KAAQ,OAAQ,AAGpD,QAAOC,SAAU,QAAS,AAC1B,QAAOC,OAAQ,eAAgB,AAC/B,QAAOC,kBAAmB,uBAAwB,CAkClD,MAAMC,iBAAmB,oBAEzB,MAAMC,sBAAwB,qCAE9B,MAAMC,eAAiB,CAAC,CACtBC,UAAU,CACVC,UAAYJ,gBAAgB,CAC5BK,QAAQ,CACY,GACpBF,WACE,oBAACG,KAAEC,KAAMJ,WAAYK,UAAWV,GAAGG,sBAAuBG,YACvDC,UAGH,oBAACI,OAAID,UAAWV,GAAGG,sBAAuBG,YAAaC,UAG3D,MAAMK,OAAS,CAAC,CACdP,UAAU,CACVQ,WAAW,CACXC,QAAQ,CACRC,KAAK,CACLC,MAAM,CACNC,QAAQ,CACRC,QAAU,eAAe,CACzBZ,UAAYJ,gBAAgB,CAChB,IACZJ,UAAU,KACRG,cAAc,CACZkB,gBAAiBC,SAASC,aAAa,CAAC,yBACxCC,SAAUN,QAAQM,SAClBC,SAAUP,QAAQO,SAClBC,QAAS,CACPC,SAAUT,QAAQQ,SAASC,UAAY,KACzC,CACF,EACF,EAAG,EAAE,EAEL,OACE,oBAACd,OACCD,UAAWV,GAAG,kBAAmBkB,QAASZ,WAC1CoB,UAAQ,YACRC,MAAO,CAAEC,UAAW,EAAGC,SAAU,QAAS,GAE1C,oBAAClB,OAAID,UAAU,6DACb,oBAACN,gBAAeC,WAAYA,YAAc,KACxC,oBAACyB,UAAOpB,UAAU,oCAAoCK,OACtD,oBAACgB,QAAKrB,UAAU,QAAQI,UACvBD,aACC,oBAACkB,QAAKrB,UAAU,gEACbG,cAKNI,UACC,oBAACe,UACCC,KAAK,SACLvB,UAAU,uDAEV,oBAACX,MACCmC,KAAK,0BACLC,KAAK,UACLC,MAAO9B,cAOrB,CAEA,gBAAeM,MAAO"}

package/core/SegmentedControl.js

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

package/core/SegmentedControl.js.map

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

package/core/scripts.js

@@ -1,2 +1,2 @@
-import"array-flat-polyfill";export{default as reactRenderer,renderComponent}from"./react-renderer";export{default as loadSprites}from"./load-sprites";export{default as toggleChatWidget}from"./hubspot-chat-toggle";export*from"./remote-data-store";export*from"./remote-blogs-posts";export*from"./remote-session-data";export*from"./dom-query";
+import"array-flat-polyfill";export{default as reactRenderer,renderComponent}from"./react-renderer";export{default as loadSprites}from"./load-sprites";export*from"./remote-data-store";export*from"./remote-blogs-posts";export*from"./remote-session-data";export*from"./dom-query";
 //# sourceMappingURL=scripts.js.map

package/core/scripts.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/core/scripts.js"],"sourcesContent":["import \"array-flat-polyfill\";\n\nexport { default as reactRenderer, renderComponent } from \"./react-renderer\";\nexport { default as loadSprites } from \"./load-sprites\";\nexport { default as toggleChatWidget } from \"./hubspot-chat-toggle\";\n\nexport * from \"./remote-data-store\";\nexport * from \"./remote-blogs-posts\";\nexport * from \"./remote-session-data\";\nexport * from \"./dom-query\";\n"],"names":["default","reactRenderer","renderComponent","loadSprites","toggleChatWidget"],"mappings":"AAAA,MAAO,qBAAsB,AAE7B,QAASA,WAAWC,aAAa,CAAEC,eAAe,KAAQ,kBAAmB,AAC7E,QAASF,WAAWG,WAAW,KAAQ,gBAAiB,AACxD,QAASH,WAAWI,gBAAgB,KAAQ,uBAAwB,AAEpE,YAAc,qBAAsB,AACpC,YAAc,sBAAuB,AACrC,YAAc,uBAAwB,AACtC,YAAc,aAAc"}
+{"version":3,"sources":["../../src/core/scripts.js"],"sourcesContent":["import \"array-flat-polyfill\";\n\nexport { default as reactRenderer, renderComponent } from \"./react-renderer\";\nexport { default as loadSprites } from \"./load-sprites\";\n\nexport * from \"./remote-data-store\";\nexport * from \"./remote-blogs-posts\";\nexport * from \"./remote-session-data\";\nexport * from \"./dom-query\";\n"],"names":["default","reactRenderer","renderComponent","loadSprites"],"mappings":"AAAA,MAAO,qBAAsB,AAE7B,QAASA,WAAWC,aAAa,CAAEC,eAAe,KAAQ,kBAAmB,AAC7E,QAASF,WAAWG,WAAW,KAAQ,gBAAiB,AAExD,YAAc,qBAAsB,AACpC,YAAc,sBAAuB,AACrC,YAAc,uBAAwB,AACtC,YAAc,aAAc"}

package/index.d.ts

@@ -306,15 +306,6 @@ export default ConnectStateWrapper;
 //# sourceMappingURL=ConnectStateWrapper.d.ts.map
 }
 
-declare module '@ably/ui/core/ContactFooter' {
-type ContactFooterProps = {
-    urlBase: string;
-};
-const ContactFooter: ({ urlBase }: ContactFooterProps) => import("react/jsx-runtime").JSX.Element;
-export default ContactFooter;
-//# sourceMappingURL=ContactFooter.d.ts.map
-}
-
 declare module '@ably/ui/core/CookieMessage' {
 type CookieMessageProps = {
     cookieId: string;
@@ -440,7 +431,7 @@ type FlashProps = {
 };
 type FlashesProps = {
     flashes: {
-        items: Pick<FlashProps, "type" | "content">[];
+        items: FlashProps[];
     };
 };
 type BackendFlashesProps = {
@@ -751,6 +742,9 @@ export type MeganavPaths = {
     logo?: string;
     iconSprites: string;
     ablyStack: string;
+    blogThumb1: string;
+    blogThumb2: string;
+    blogThumb3: string;
     awsLogo?: string;
 };
 export type MeganavPanels = {
@@ -785,7 +779,7 @@ export type MeganavSessionState = {
         href: string;
     };
 };
-export type NoticeApiProps = {
+export type MeganavNoticeProps = {
     props: {
         title: string;
         bodyText: string;
@@ -804,7 +798,7 @@ export type NoticeApiProps = {
 type MeganavProps = {
     paths?: MeganavPaths;
     themeName: "white" | "black" | "transparentToWhite";
-    notice?: NoticeApiProps;
+    notice?: MeganavNoticeProps;
     loginLink?: string;
     urlBase?: string;
     addSearchApiKey: string;
@@ -1271,6 +1265,26 @@ export default ProductTile;
 //# sourceMappingURL=ProductTile.d.ts.map
 }
 
+declare module '@ably/ui/core/SegmentedControl' {
+import React, { PropsWithChildren } from "react";
+import type { IconName } from "@ably/ui/core/Icon/types";
+export type SegmentedControlSize = "md" | "sm" | "xs";
+export type SegmentedControlProps = {
+    className?: string;
+    rounded?: boolean;
+    leftIcon?: IconName;
+    rightIcon?: IconName;
+    active?: boolean;
+    variant?: "default" | "subtle" | "strong";
+    size?: SegmentedControlSize;
+    onClick?: () => void;
+    disabled?: boolean;
+};
+const SegmentedControl: React.FC<PropsWithChildren<SegmentedControlProps>>;
+export default SegmentedControl;
+//# sourceMappingURL=SegmentedControl.d.ts.map
+}
+
 declare module '@ably/ui/core/SignOutLink' {
 import { MouseEventHandler, ReactNode } from "react";
 import { AbsUrl } from "@ably/ui/core/Meganav";
@@ -1487,18 +1501,6 @@ export function queryIdAll(val: any, root?: Document): NodeListOf<Element>;
 //# sourceMappingURL=dom-query.d.ts.map
 }
 
-declare module '@ably/ui/core/hooks/use-rails-ujs-hooks' {
-import { RefObject } from "react";
-const useRailsUjsLinks: () => RefObject<HTMLDivElement>;
-export default useRailsUjsLinks;
-//# sourceMappingURL=use-rails-ujs-hooks.d.ts.map
-}
-
-declare module '@ably/ui/core/hubspot-chat-toggle' {
-export default function toggleChatWidget(params: any): (() => void) | undefined;
-//# sourceMappingURL=hubspot-chat-toggle.d.ts.map
-}
-
 declare module '@ably/ui/core/remote-blogs-posts' {
 export function fetchBlogPosts(store: any, blogUrl: any): Promise<void>;
 export namespace reducerBlogPosts {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "15.8.0-dev.1527ef06",
+  "version": "15.8.0",
   "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
   "repository": {
     "type": "git",
@@ -45,7 +45,7 @@
     "http-server": "14.1.1",
     "jsdom": "^26.0.0",
     "mixpanel-browser": "^2.60.0",
-    "msw": "2.7.1",
+    "msw": "2.7.3",
     "msw-storybook-addon": "^2.0.2",
     "playwright": "^1.49.1",
     "posthog-js": "^1.217.4",
@@ -77,7 +77,7 @@
     "start": "vite --port 5000",
     "storybook": "yarn build && storybook dev -p 6006",
     "build-storybook": "yarn build && storybook build --quiet -o preview",
-    "test": "yarn test:storybook && yarn test:vitest",
+    "test": "yarn test:storybook && yarn test:vitest run",
     "test:storybook": "npx concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"yarn build-storybook && yarn http-server preview --port 6007 --silent\" \"wait-on tcp:6007 && yarn test-storybook --url http://127.0.0.1:6007\"",
     "test:update-snapshots": "npx concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"yarn build-storybook && yarn http-server preview --port 6007 --silent\" \"wait-on tcp:6007 && yarn test-storybook -u --url http://127.0.0.1:6007\"",
     "test:vitest": "vitest --environment=jsdom --dir=src"

package/core/ContactFooter/component.css

@@ -1,11 +0,0 @@
-@layer components {
-  .ui-contact-footer {
-    background-size: 100% 100%;
-    background-position: right center;
-    @apply w-full bg-gradient-active-orange;
-  }
-
-  .ui-contact-footer-box {
-    @apply p-24 sm:p-32 xl:p-40 bg-white flex flex-col justify-between rounded-sm;
-  }
-}

package/core/ContactFooter/component.js

@@ -1,2 +0,0 @@
-import toggleChatWidget from"../hubspot-chat-toggle";export default(()=>toggleChatWidget({dataId:"contact-footer"}));
-//# sourceMappingURL=component.js.map

package/core/ContactFooter/component.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/core/ContactFooter/component.js"],"sourcesContent":["import toggleChatWidget from \"../hubspot-chat-toggle\";\nexport default () => toggleChatWidget({ dataId: \"contact-footer\" });\n"],"names":["toggleChatWidget","dataId"],"mappings":"AAAA,OAAOA,qBAAsB,wBAAyB,AACtD,eAAe,CAAA,IAAMA,iBAAiB,CAAEC,OAAQ,gBAAiB,EAAC,CAAE"}

package/core/ContactFooter.js

@@ -1,2 +0,0 @@
-import React,{useEffect}from"react";import Icon from"./Icon";import _absUrl from"./url-base.js";import toggleChatWidget from"./hubspot-chat-toggle";const ContactFooter=({urlBase})=>{useEffect(()=>toggleChatWidget({dataId:"contact-footer"}),[]);const absUrl=path=>_absUrl(path,urlBase);return React.createElement("div",{className:"ui-contact-footer font-sans antialiased","data-id":"contact-footer"},React.createElement("div",{className:"w-full bp-lg max-w-screen-xl mx-auto py-64 grid grid-cols-1 md:grid-cols-3 ui-grid-gap ui-grid-px"},React.createElement("div",{className:"ui-contact-footer-box"},React.createElement(Icon,{name:"icon-display-live-chat",size:"3rem",additionalCSS:"block mb-16"}),React.createElement("div",null,React.createElement("div",{className:"ui-text-h3 mb-24"},"Live Chat"),React.createElement("p",{className:"ui-text-p1"},"Reach out team of experts over chat powered by Ably.")),React.createElement("button",{type:"button",className:"ui-btn-secondary self-start mt-16",disabled:true,"data-id":"open-chat-widget","data-enabled-label":"Start a live chat","data-disabled-label":"Live chat unavailable"},"Live chat unavailable")),React.createElement("div",{className:"ui-contact-footer-box"},React.createElement(Icon,{name:"icon-display-call-mobile",size:"3rem",additionalCSS:"block mb-16"}),React.createElement("div",{className:"flex-grow"},React.createElement("div",{className:"ui-text-h3 mb-24"},"Call us"),React.createElement("p",{className:"ui-text-p1"},React.createElement("span",{className:"block"},React.createElement("strong",{className:"font-bold"},"+1 877 434 5287")," (USA, toll free)"),React.createElement("span",{className:"block"},React.createElement("strong",{className:"font-bold"},"+44 20 3318 4689")," (UK)")))),React.createElement("div",{className:"ui-contact-footer-box"},React.createElement(Icon,{name:"icon-display-tech-account-comms",size:"3rem",additionalCSS:"block mb-16"}),React.createElement("div",null,React.createElement("div",{className:"ui-text-h3 mb-24"},"Technical and account support"),React.createElement("p",{className:"ui-text-p1"},"We're standing by to help with any questions or code.")),React.createElement("a",{className:"ui-btn-secondary self-start p-btn mt-16",href:absUrl("/support")},"Get support now"))))};export default ContactFooter;
-//# sourceMappingURL=ContactFooter.js.map

package/core/ContactFooter.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/core/ContactFooter.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\n\nimport Icon from \"./Icon\";\nimport _absUrl from \"./url-base.js\";\nimport toggleChatWidget from \"./hubspot-chat-toggle\";\n\ntype ContactFooterProps = {\n  urlBase: string;\n};\n\nconst ContactFooter = ({ urlBase }: ContactFooterProps) => {\n  useEffect(() => toggleChatWidget({ dataId: \"contact-footer\" }), []);\n  const absUrl = (path: string) => _absUrl(path, urlBase);\n\n  return (\n    <div\n      className=\"ui-contact-footer font-sans antialiased\"\n      data-id=\"contact-footer\"\n    >\n      <div className=\"w-full bp-lg max-w-screen-xl mx-auto py-64 grid grid-cols-1 md:grid-cols-3 ui-grid-gap ui-grid-px\">\n        <div className=\"ui-contact-footer-box\">\n          <Icon\n            name=\"icon-display-live-chat\"\n            size=\"3rem\"\n            additionalCSS=\"block mb-16\"\n          />\n          <div>\n            <div className=\"ui-text-h3 mb-24\">Live Chat</div>\n            <p className=\"ui-text-p1\">\n              Reach out team of experts over chat powered by Ably.\n            </p>\n          </div>\n          <button\n            type=\"button\"\n            className=\"ui-btn-secondary self-start mt-16\"\n            disabled\n            data-id=\"open-chat-widget\"\n            data-enabled-label=\"Start a live chat\"\n            data-disabled-label=\"Live chat unavailable\"\n          >\n            Live chat unavailable\n          </button>\n        </div>\n\n        <div className=\"ui-contact-footer-box\">\n          <Icon\n            name=\"icon-display-call-mobile\"\n            size=\"3rem\"\n            additionalCSS=\"block mb-16\"\n          />\n          <div className=\"flex-grow\">\n            <div className=\"ui-text-h3 mb-24\">Call us</div>\n            <p className=\"ui-text-p1\">\n              <span className=\"block\">\n                <strong className=\"font-bold\">+1 877 434 5287</strong> (USA,\n                toll free)\n              </span>\n              <span className=\"block\">\n                <strong className=\"font-bold\">+44 20 3318 4689</strong> (UK)\n              </span>\n            </p>\n          </div>\n        </div>\n\n        <div className=\"ui-contact-footer-box\">\n          <Icon\n            name=\"icon-display-tech-account-comms\"\n            size=\"3rem\"\n            additionalCSS=\"block mb-16\"\n          />\n          <div>\n            <div className=\"ui-text-h3 mb-24\">\n              Technical and account support\n            </div>\n            <p className=\"ui-text-p1\">\n              We&apos;re standing by to help with any questions or code.\n            </p>\n          </div>\n          <a\n            className=\"ui-btn-secondary self-start p-btn mt-16\"\n            href={absUrl(\"/support\")}\n          >\n            Get support now\n          </a>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default ContactFooter;\n"],"names":["React","useEffect","Icon","_absUrl","toggleChatWidget","ContactFooter","urlBase","dataId","absUrl","path","div","className","data-id","name","size","additionalCSS","p","button","type","disabled","data-enabled-label","data-disabled-label","span","strong","a","href"],"mappings":"AAAA,OAAOA,OAASC,SAAS,KAAQ,OAAQ,AAEzC,QAAOC,SAAU,QAAS,AAC1B,QAAOC,YAAa,eAAgB,AACpC,QAAOC,qBAAsB,uBAAwB,CAMrD,MAAMC,cAAgB,CAAC,CAAEC,OAAO,CAAsB,IACpDL,UAAU,IAAMG,iBAAiB,CAAEG,OAAQ,gBAAiB,GAAI,EAAE,EAClE,MAAMC,OAAS,AAACC,MAAiBN,QAAQM,KAAMH,SAE/C,OACE,oBAACI,OACCC,UAAU,0CACVC,UAAQ,kBAER,oBAACF,OAAIC,UAAU,qGACb,oBAACD,OAAIC,UAAU,yBACb,oBAACT,MACCW,KAAK,yBACLC,KAAK,OACLC,cAAc,gBAEhB,oBAACL,WACC,oBAACA,OAAIC,UAAU,oBAAmB,aAClC,oBAACK,KAAEL,UAAU,cAAa,yDAI5B,oBAACM,UACCC,KAAK,SACLP,UAAU,oCACVQ,SAAAA,KACAP,UAAQ,mBACRQ,qBAAmB,oBACnBC,sBAAoB,yBACrB,0BAKH,oBAACX,OAAIC,UAAU,yBACb,oBAACT,MACCW,KAAK,2BACLC,KAAK,OACLC,cAAc,gBAEhB,oBAACL,OAAIC,UAAU,aACb,oBAACD,OAAIC,UAAU,oBAAmB,WAClC,oBAACK,KAAEL,UAAU,cACX,oBAACW,QAAKX,UAAU,SACd,oBAACY,UAAOZ,UAAU,aAAY,mBAAwB,qBAGxD,oBAACW,QAAKX,UAAU,SACd,oBAACY,UAAOZ,UAAU,aAAY,oBAAyB,YAM/D,oBAACD,OAAIC,UAAU,yBACb,oBAACT,MACCW,KAAK,kCACLC,KAAK,OACLC,cAAc,gBAEhB,oBAACL,WACC,oBAACA,OAAIC,UAAU,oBAAmB,iCAGlC,oBAACK,KAAEL,UAAU,cAAa,0DAI5B,oBAACa,KACCb,UAAU,0CACVc,KAAMjB,OAAO,aACd,qBAOX,CAEA,gBAAeH,aAAc"}

package/core/hooks/use-rails-ujs-hooks.js

@@ -1,2 +0,0 @@
-import{useEffect,useRef}from"react";const useRailsUjsLinks=()=>{const containerRef=useRef(null);useEffect(()=>{const container=containerRef.current;if(!container)return;const handleClick=event=>{const target=event.target;const link=target.closest("a[data-method]");if(!link)return;if(!container.contains(link))return;event.preventDefault();const method=link.dataset.method?.toLowerCase()??"get";const href=link.getAttribute("href");if(!href){console.warn("Rails UJS link has no href attribute");return}if(method!=="post"&&method!=="delete")return;const csrfParam=document.querySelector('meta[name="csrf-param"]')?.content;const csrfToken=document.querySelector('meta[name="csrf-token"]')?.content;const form=document.createElement("form");form.method="POST";form.action=href;form.style.display="none";if(csrfParam&&csrfToken){const csrfInput=document.createElement("input");csrfInput.type="hidden";csrfInput.name=csrfParam;csrfInput.value=csrfToken;form.appendChild(csrfInput)}else{console.warn("No CSRF token found in document")}if(method!=="post"){const methodInput=document.createElement("input");methodInput.type="hidden";methodInput.name="_method";methodInput.value=method;form.appendChild(methodInput)}document.body.appendChild(form);form.submit()};container.addEventListener("click",handleClick);return()=>container.removeEventListener("click",handleClick)},[]);return containerRef};export default useRailsUjsLinks;
-//# sourceMappingURL=use-rails-ujs-hooks.js.map

package/core/hooks/use-rails-ujs-hooks.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/core/hooks/use-rails-ujs-hooks.ts"],"sourcesContent":["import { useEffect, useRef, RefObject } from \"react\";\n\ntype HttpMethod = \"get\" | \"post\" | \"put\" | \"patch\" | \"delete\";\n\ninterface RailsUjsLink extends HTMLAnchorElement {\n  dataset: {\n    method?: string;\n    confirm?: string;\n    remote?: string;\n  };\n}\n\ninterface CsrfMetaTag extends HTMLMetaElement {\n  content: string;\n}\n\nconst useRailsUjsLinks = (): RefObject<HTMLDivElement> => {\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const container = containerRef.current;\n    if (!container) return;\n\n    const handleClick = (event: MouseEvent): void => {\n      const target = event.target as HTMLElement;\n      const link = target.closest<RailsUjsLink>(\"a[data-method]\");\n      if (!link) return;\n\n      // Check if the clicked link is within this component's container\n      if (!container.contains(link)) return;\n\n      event.preventDefault();\n\n      const method = (link.dataset.method?.toLowerCase() ??\n        \"get\") as HttpMethod;\n      const href = link.getAttribute(\"href\");\n\n      if (!href) {\n        console.warn(\"Rails UJS link has no href attribute\");\n        return;\n      }\n\n      // Only handle POST requests for now, expand for other methods if needed\n      if (method !== \"post\" && method !== \"delete\") return;\n\n      const csrfParam = document.querySelector<CsrfMetaTag>(\n        'meta[name=\"csrf-param\"]',\n      )?.content;\n\n      const csrfToken = document.querySelector<CsrfMetaTag>(\n        'meta[name=\"csrf-token\"]',\n      )?.content;\n\n      // Create and submit a hidden form\n      const form = document.createElement(\"form\");\n      form.method = \"POST\";\n      form.action = href;\n      form.style.display = \"none\";\n\n      // Add CSRF token if present\n      if (csrfParam && csrfToken) {\n        const csrfInput = document.createElement(\"input\");\n        csrfInput.type = \"hidden\";\n        csrfInput.name = csrfParam;\n        csrfInput.value = csrfToken;\n        form.appendChild(csrfInput);\n      } else {\n        console.warn(\"No CSRF token found in document\");\n      }\n\n      // Add method override for non-POST methods\n      if (method !== \"post\") {\n        const methodInput = document.createElement(\"input\");\n        methodInput.type = \"hidden\";\n        methodInput.name = \"_method\";\n        methodInput.value = method;\n        form.appendChild(methodInput);\n      }\n\n      document.body.appendChild(form);\n      form.submit();\n    };\n\n    container.addEventListener(\"click\", handleClick);\n    return () => container.removeEventListener(\"click\", handleClick);\n  }, []);\n\n  return containerRef;\n};\n\nexport default useRailsUjsLinks;\n"],"names":["useEffect","useRef","useRailsUjsLinks","containerRef","container","current","handleClick","event","target","link","closest","contains","preventDefault","method","dataset","toLowerCase","href","getAttribute","console","warn","csrfParam","document","querySelector","content","csrfToken","form","createElement","action","style","display","csrfInput","type","name","value","appendChild","methodInput","body","submit","addEventListener","removeEventListener"],"mappings":"AAAA,OAASA,SAAS,CAAEC,MAAM,KAAmB,OAAQ,CAgBrD,MAAMC,iBAAmB,KACvB,MAAMC,aAAeF,OAAuB,MAE5CD,UAAU,KACR,MAAMI,UAAYD,aAAaE,OAAO,CACtC,GAAI,CAACD,UAAW,OAEhB,MAAME,YAAc,AAACC,QACnB,MAAMC,OAASD,MAAMC,MAAM,CAC3B,MAAMC,KAAOD,OAAOE,OAAO,CAAe,kBAC1C,GAAI,CAACD,KAAM,OAGX,GAAI,CAACL,UAAUO,QAAQ,CAACF,MAAO,OAE/BF,MAAMK,cAAc,GAEpB,MAAMC,OAAUJ,KAAKK,OAAO,CAACD,MAAM,EAAEE,eACnC,MACF,MAAMC,KAAOP,KAAKQ,YAAY,CAAC,QAE/B,GAAI,CAACD,KAAM,CACTE,QAAQC,IAAI,CAAC,wCACb,MACF,CAGA,GAAIN,SAAW,QAAUA,SAAW,SAAU,OAE9C,MAAMO,UAAYC,SAASC,aAAa,CACtC,4BACCC,QAEH,MAAMC,UAAYH,SAASC,aAAa,CACtC,4BACCC,QAGH,MAAME,KAAOJ,SAASK,aAAa,CAAC,OACpCD,CAAAA,KAAKZ,MAAM,CAAG,MACdY,CAAAA,KAAKE,MAAM,CAAGX,IACdS,CAAAA,KAAKG,KAAK,CAACC,OAAO,CAAG,OAGrB,GAAIT,WAAaI,UAAW,CAC1B,MAAMM,UAAYT,SAASK,aAAa,CAAC,QACzCI,CAAAA,UAAUC,IAAI,CAAG,QACjBD,CAAAA,UAAUE,IAAI,CAAGZ,SACjBU,CAAAA,UAAUG,KAAK,CAAGT,UAClBC,KAAKS,WAAW,CAACJ,UACnB,KAAO,CACLZ,QAAQC,IAAI,CAAC,kCACf,CAGA,GAAIN,SAAW,OAAQ,CACrB,MAAMsB,YAAcd,SAASK,aAAa,CAAC,QAC3CS,CAAAA,YAAYJ,IAAI,CAAG,QACnBI,CAAAA,YAAYH,IAAI,CAAG,SACnBG,CAAAA,YAAYF,KAAK,CAAGpB,OACpBY,KAAKS,WAAW,CAACC,YACnB,CAEAd,SAASe,IAAI,CAACF,WAAW,CAACT,MAC1BA,KAAKY,MAAM,EACb,EAEAjC,UAAUkC,gBAAgB,CAAC,QAAShC,aACpC,MAAO,IAAMF,UAAUmC,mBAAmB,CAAC,QAASjC,YACtD,EAAG,EAAE,EAEL,OAAOH,YACT,CAEA,gBAAeD,gBAAiB"}

package/core/hubspot-chat-toggle.js

@@ -1,2 +0,0 @@
-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)}}
-//# sourceMappingURL=hubspot-chat-toggle.js.map

package/core/hubspot-chat-toggle.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/core/hubspot-chat-toggle.js"],"sourcesContent":["import { queryId } from \"./dom-query\";\n\n/*\n    A method to enable/disable a CTA that\n    is used to open the HubSpot chat widget\n\n    If the Chat widget is unavailable this script\n    will apply a disabled property and change\n    the text on the button, to warn the user.\n\n    Params:\n    - dataId        the parent container data-id\n\n*/\n\nfunction enableBtn(el, text) {\n  el.disabled = false;\n  el.innerText = text;\n}\n\nfunction disableBtn(el, text) {\n  el.disabled = true;\n  el.innerText = text;\n}\n\nconst WAIT_BETWEEN_RETRIES_MS = 100;\nlet MAX_RETRY_COUNT = 30;\n\nexport default function toggleChatWidget(params) {\n  const { dataId } = params ?? {};\n  const container = queryId(dataId);\n  const chatButton = queryId(\"open-chat-widget\", container);\n  const textEnabled = chatButton.dataset.enabledLabel;\n  const textDisabled = chatButton.dataset.disabledLabel;\n\n  if (!dataId || !container) return;\n  const trigger = queryId(\"open-chat-widget\", container);\n\n  let clickHandler;\n\n  const waitForScript = (delay) => {\n    const widget = window?.HubSpotConversations?.widget;\n\n    // If the chat is set to be hidden out of hours this will return null\n    const iframe = document.querySelector(\"#hubspot-messages-iframe-container\");\n\n    clickHandler = (e) => {\n      e.preventDefault();\n      widget.open();\n    };\n\n    if (widget && iframe) {\n      trigger.addEventListener(\"click\", clickHandler);\n      enableBtn(trigger, textEnabled);\n    } else if (--MAX_RETRY_COUNT) {\n      setTimeout(() => waitForScript(WAIT_BETWEEN_RETRIES_MS), delay);\n    }\n  };\n\n  disableBtn(trigger, textDisabled);\n  waitForScript(0);\n\n  return () => {\n    disableBtn(trigger, textDisabled);\n    trigger.removeEventListener(\"click\", clickHandler);\n  };\n}\n"],"names":["queryId","enableBtn","el","text","disabled","innerText","disableBtn","WAIT_BETWEEN_RETRIES_MS","MAX_RETRY_COUNT","toggleChatWidget","params","dataId","container","chatButton","textEnabled","dataset","enabledLabel","textDisabled","disabledLabel","trigger","clickHandler","waitForScript","delay","widget","window","HubSpotConversations","iframe","document","querySelector","e","preventDefault","open","addEventListener","setTimeout","removeEventListener"],"mappings":"AAAA,OAASA,OAAO,KAAQ,aAAc,CAetC,SAASC,UAAUC,EAAE,CAAEC,IAAI,EACzBD,GAAGE,QAAQ,CAAG,KACdF,CAAAA,GAAGG,SAAS,CAAGF,IACjB,CAEA,SAASG,WAAWJ,EAAE,CAAEC,IAAI,EAC1BD,GAAGE,QAAQ,CAAG,IACdF,CAAAA,GAAGG,SAAS,CAAGF,IACjB,CAEA,MAAMI,wBAA0B,IAChC,IAAIC,gBAAkB,EAEtB,gBAAe,SAASC,iBAAiBC,MAAM,EAC7C,KAAM,CAAEC,MAAM,CAAE,CAAGD,QAAU,CAAC,EAC9B,MAAME,UAAYZ,QAAQW,QAC1B,MAAME,WAAab,QAAQ,mBAAoBY,WAC/C,MAAME,YAAcD,WAAWE,OAAO,CAACC,YAAY,CACnD,MAAMC,aAAeJ,WAAWE,OAAO,CAACG,aAAa,CAErD,GAAI,CAACP,QAAU,CAACC,UAAW,OAC3B,MAAMO,QAAUnB,QAAQ,mBAAoBY,WAE5C,IAAIQ,aAEJ,MAAMC,cAAgB,AAACC,QACrB,MAAMC,OAASC,QAAQC,sBAAsBF,OAG7C,MAAMG,OAASC,SAASC,aAAa,CAAC,sCAEtCR,aAAe,AAACS,IACdA,EAAEC,cAAc,GAChBP,OAAOQ,IAAI,EACb,EAEA,GAAIR,QAAUG,OAAQ,CACpBP,QAAQa,gBAAgB,CAAC,QAASZ,cAClCnB,UAAUkB,QAASL,YACrB,MAAO,GAAI,EAAEN,gBAAiB,CAC5ByB,WAAW,IAAMZ,cAAcd,yBAA0Be,MAC3D,CACF,EAEAhB,WAAWa,QAASF,cACpBI,cAAc,GAEd,MAAO,KACLf,WAAWa,QAASF,cACpBE,QAAQe,mBAAmB,CAAC,QAASd,aACvC,CACF"}

package/core/styles/colors/computed-colors.json

@@ -1 +0,0 @@
-["bg-blue-400","bg-blue-100","bg-neutral-1300","bg-neutral-300","bg-neutral-200","bg-neutral-100","bg-neutral-000","bg-neutral-600","bg-orange-900","bg-orange-600","border-blue-400","border-neutral-200","border-neutral-600","border-neutral-500","border-orange-600","from-neutral-400","group-hover:bg-neutral-100","text-blue-600","text-blue-200","text-neutral-1300","text-neutral-300","text-neutral-000","text-neutral-1100","text-neutral-1000","text-neutral-800","text-neutral-700","text-neutral-600","text-neutral-500","text-orange-200","text-orange-600"]