@ably/ui 15.7.0 → 15.8.0-dev.d7f8fc22

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/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;
@@ -1274,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";
@@ -1490,11 +1501,6 @@ export function queryIdAll(val: any, root?: Document): NodeListOf<Element>;
 //# sourceMappingURL=dom-query.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.7.0",
+  "version": "15.8.0-dev.d7f8fc22",
   "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",
@@ -34,7 +34,7 @@
     "@types/svg-sprite": "^0.0.39",
     "@typescript-eslint/eslint-plugin": "^8.25.0",
     "@typescript-eslint/parser": "^8.25.0",
-    "@vitejs/plugin-react": "^4.2.1",
+    "@vitejs/plugin-react-swc": "^3.8.0",
     "@whitespace/storybook-addon-html": "^6.1.1",
     "autoprefixer": "^10.0.2",
     "eslint": "^8.57.0",
@@ -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/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"}