@ably/ui 13.2.2 → 14.0.0-dev.fbce38f

package/README.md

@@ -1,5 +1,3 @@
-**_Note:_** some features are still in development and their documentation might be incomplete. Lookout for the ⚠️ icon.
-
 # ably-ui
 
 `ably-ui` is the of home of the Ably design system library ([https://ably-ui.herokuapp.com/](https://ably-ui.herokuapp.com/)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.
@@ -20,13 +18,13 @@ In some cases, this is impractical. Some components will be more specialized and
 
 ### Library structure
 
-The library is built out of modules, assets, JavaScript & ruby modules and components. A module is a container for all of those.
+The library is built out of modules, assets, and JavaScript components. A module is a container for all of those.
 
-For example, the `core` module provides the most general elements one can build the “chrome” of a web-based interface — typography, colours, spacing (i.e., containers) etc. The components within the module support our most common needs to build that “chrome”, like navigation elements, footer, hero sections, code samples etc. Assets, JavaScript & ruby modules are all shared between the components in the module.
+For example, the `core` module provides the most general elements one can build the “chrome” of a web-based interface — typography, colours, spacing (i.e., containers) etc. The components within the module support our most common needs to build that “chrome”, like navigation elements, footer, hero sections, code samples etc. Assets, and JavaScript are all shared between the components in the module.
 
 Components do not require assets directly — instead, it's up to the consumer to load the assets and pass them to the components. This ensures flexibility in terms of URLs.
 
-Each module, apart from components, exposes a `scripts.js`, `styles.css` and `MODULE_NAME.rb` files. `scripts.js` contains helper functions, `MODULE_NAME.rb` contains modules that components can include. `styles.css` contains CSS that does not belong to any module in particular.
+Each module, apart from components, exposes a `scripts.js` and `styles.css`. `scripts.js` contains helper functions. `styles.css` contains CSS that does not belong to any module in particular.
 
 ### Installation
 
@@ -39,7 +37,7 @@ npm install @ably/ui
 
 # or
 
-yarn add @ably/ui
+yarn add @ably/ui # Preferred
 ```
 
 To attach the imported JavaScript from the `Core` module to the `window` object:
@@ -121,24 +119,6 @@ Note that depending on the component, you might still need to include CSS & JS f
 import Meganav from "@ably/ui/core/Meganav";
 ```
 
-#### Importing ViewComponent (Rails) components
-
-To use `ably-ui` with [Ruby on Rails](https://rubyonrails.org/) add the `ably-ui` gem to your `Gemfile`:
-
-```ruby
-gem 'ably-ui',
-    '1.0.0',
-    require: 'ably_ui'
-```
-
-Components are exposed as [View Components](https://github.com/github/view_component) and should be available in any view:
-
-```erb
-<%= render(AblyUi::Core::Meganav.new) %>
-```
-
-Note that this loads neither CSS nor JS — these need to still be loaded by a bundler like webpack.
-
 ## Usage
 
 ### Icons
@@ -147,16 +127,10 @@ Putting SVG files inside a`src/MODULE_NAME/icons` folder will add them to a per-
 
 Usage with the `Icon` React component:
 
-```jsx
+```tsx
 <Icon name="icon-display-live-chat" size="3rem" additionalCSS="block mb-16" />
 ```
 
-Usage with `Icon` VW component:
-
-```rb
-<%= render(AblyUi::Core::Icon.new(name: "icon-gui-disclosure-arrow", size: "1rem", additional_css: "align-middle transform rotate-180 mr-4")) %>
-```
-
 Usage without a component:
 
 ```html
@@ -168,7 +142,7 @@ Usage without a component:
 
 Usage without a component, in React, with hover states. Note the [group](https://tailwindcss.com/docs/hover-focus-and-other-states#group-hover) class:
 
-```jsx
+```tsx
 <a
   href="{url}"
   className="text-gui-default hover:text-gui-hover focus:text-gui-focus group"
@@ -186,12 +160,6 @@ See https://ably-ui.herokuapp.com/components/icon for more details.
 
 Font assets are not included automagically but are part of the repo, together with an example of font-face file; see `src/core/fonts` for examples. Make sure to include the licence file declaration on usage.
 
-See `preview/app/javascript/styles/application.css` for an example when using webpacker/rails.
-
-#### Rails
-
-Because the gem directories are on the asset path (see [Importing ViewComponent (Rails) components](#user-content-importing-viewcomponent-rails-components) section), they will work with standard asset helpers (i.e., `asset_path`).
-
 ### Accessibility
 
 An important part of ably-ui is ensuring the produced UI is accessible to as wide range of users as possible. All components should adhere to at least AA accessibility standards. In most cases, this can be accomplished by following a few simple rules:
@@ -205,73 +173,19 @@ An important part of ably-ui is ensuring the produced UI is accessible to as wid
 
 ## Development
 
-The repository includes a “preview” app, which is serves both as a showcase and development environment.
-
-To use, first make sure you install dependencies both for the library and the “preview” app:
-
-```bash
-yarn && bundle
-cd preview
-yarn && bundle
-```
-
-Then, from the root of the repository, run:
-
-```bash
-yarn dev
-```
-
-This will run the app and use the published versions of the `ably-ui`, specified in `preview/Gemfile` and `preview/package.json` NPM package.
-
-### Using the local ably-ui in the preview app
+To visualise the assets in `ably-ui`, there is a Storybook instance, which serves as both a showcase and a development environment.
 
-It's possible to use the local version of ably-ui in the “preview” app. Enabling this, requires separate steps for the `npm` and `ruby` packages.
+Firstly, ensure you have all of the required project dependencies by running `yarn` in the project root.
 
-For `npm`:
-
-```bash
-# in the root directory
-yarn link
-# in the "preview" directory
-yarn link @ably/ui
-```
+Then, to run Storybook, run `yarn storybook` in the project root - it should open automatically in your browser.
 
-For `ruby`:
-
-In `preview/Gemfile` replace the Ably UI gem version number with `path: '../'` like this:
-
-```bash
-# in preview
-gem 'ably-ui', path: '../', require: 'ably_ui'
-```
-
-and run:
-
-```bash
-# in preview
-bundle --no-cache
-```
-
-Why not `bundle config set local.ably-ui ../`? Because that feature is built around the local gem being a separate repo, and works poorly with our config.
-
-A caveat of this approach is that the change `preview/Gemfile` should not be committed, as it will cause the remote app to not build.
-
-### Using a deployed package of ably-ui in the preview app
-
-If at anytime you don't want to use the local NPM package and/or gems any more, you can do:
-
-```bash
-# in "preview" directory
-yarn unlink @ably/ui
-```
-
-Then change back `path` to source `source` in the `Gemfile`. If you need to update `Gemfile.lock` without installing gems, you can run `bundle lock`.
+To build Storybook as if it was a statically built site (i.e. what it looks like when deployed), run `yarn build-storybook` from the project root, go to the generated directory with `cd preview`, and then run `npx http-server` (accepting the prompt to install that package if you haven't done already). The built site will be available at the listed local URL.
 
 #### Publishing pre-release packages for review apps
 
-Make sure you commit & push your work and remove the [development-specific config](#using-the-development-build-of-ably-ui-in-the-preview-app) before doing this.
+Make sure you commit & push your work before doing this.
 
-You will need to authenticate with [npmjs](https://docs.npmjs.com/creating-and-viewing-access-tokens) and [Ruby Gems](https://guides.rubygems.org/api-key-scopes/) to publish.
+You will need to authenticate with [npmjs](https://docs.npmjs.com/creating-and-viewing-access-tokens) to publish.
 
 After the above, you should have:
 
@@ -280,11 +194,6 @@ After the above, you should have:
   ```
   //registry.npmjs.org/:_authToken=${NPM_TOKEN}
   ```
-- a `~/.gem/credentials` file that has your Rubygems API key:
-  ```
-  ---
-  :rubygems_api_key: REPLACE_THIS_WITH_YOUR_OWN_API_KEY
-  ```
 
 To deploy a review app with your in-progress code, you can use the `pre-release` script:
 
@@ -298,11 +207,10 @@ This script is a combination of two scripts:
 1. Pre-Release:
 
 - update your local dependencies for ably-ui and run a production build
-- release a gem and a NPM package with the version built from your current SemVer but adding a pre-release tag based on a short SHA of your HEAD commit
+- release an NPM package with the version built from your current SemVer but adding a pre-release tag based on a short SHA of your HEAD commit
 
 2. Update Pre-Release Version:
 
-- update the preview app
 - commit all the above and push to origin
 
 This will trigger a build of the review app.
@@ -318,8 +226,7 @@ All components live in `src` and follow a directory and filename convention:
   - component directory (TitleCase)
     - `component.js` - this is the entry file for a component and is the only required file
     - `components.css` - additional CSS
-    - for ruby components, you need `component.rb` and `component.html.erb`
-    - for react, `components.jsx`
+    - for react, `components.tsx`
 
 For example:
 
@@ -328,11 +235,9 @@ For example:
   - script.js
   - styles.css
   - Accordion
-    - component.rb
-    - component.html.erb
     - component.js
     - component.css
-    - component.jsx
+    - component.tsx
 ```
 
 #### CSS
@@ -345,50 +250,19 @@ If using positioning any other than static, be mindful of creating stacking cont
 
 By default, [Prettier](https://prettier.io/) & [ESLint](https://eslint.org/) will handle most of the frontend files. You can use them through your editor (which should pick up the relevant config files) or on the command line (see `scripts` in package.json).
 
-Neither handles `erb` and `rb` files. The only config for those files is at the moment in `editorconfig`.
-
-#### Note
-
-Until we have set up formatting scripts for `erb` it's worth setting up [htmlbeautifier](https://github.com/threedaymonk/htmlbeautifier) for your editor (for example with https://github.com/aliariff/vscode-erb-beautify if you use VS Code) and tracking [this issue in Prettier](https://github.com/prettier/plugin-ruby/issues/371), as Prettier is much faster and hopefully will get support for `erb`.
-
 ### Adding a new component
 
 #### To add a new component:
 
-1. Add it in `modules-config.js`
-2. Create a folder in `src`, in the module of your choice. The folder name should be TitleCase.
-3. Add a `component.js`
+1. Create a folder in `src`, in the module of your choice (i.e. `core`). The folder name should be TitleCase.
+2. Add a `component.tsx`
 
-- if the component has custom CSS, add a `component.css` file as well. Add `@layer components {}` to its contents. Import the CSS file in `component.js`
-- if you need a VW component, add `component.rb` and `component.html.erb`
-- if you need a React component, add a `components.jsx`
+- also add an empty `component.js` file (current legacy requirement)
+- if the component has custom CSS, add a `component.css` file as well.
 
-#### To see this component in the preview app:
+#### To see this component in Storybook:
 
-##### For React components:
-
-1. Import the file into `preview/app/javascript/packs/application.js` and add as input to the `reactRenderer`
-2. If it contains custom CSS, import it into `preview/app/javascript/styles/application.css`
-3. Add a template in `preview/app/views/components`, with a `_react` suffix, i.e. `my_component_react.html.erb`
-
-##### For VW components:
-
-1. You will need to restart the server for Rails to load the component (this will also need to happen after any changes to `component.rb`)
-1. If it contains custom CSS, import it into `preview/app/javascript/styles/application.css`
-1. Add a template in `preview/app/views/components`, with a `_vw` suffix, i.e. `my_component_vw.html.erb`
-1. If the component has any JavaScript, import it in the view (`preview/app/views/components/my_component_vw.html.erb`) and initialize:
-
-```rb
-<% content_for :component do %>
-  <%= javascript_include_tag 'ably_ui/core/my_component/component' %>
-  <script type="text/javascript">
-    document.addEventListener("DOMContentLoaded", () => {
-      const container = document.querySelector("[data-id=my_component]");
-      AblyUI.Core.MyComponent(container);
-    });
-  </script>
-<% end %>
-```
+Create a `[COMPONENT_NAME].stories.tsx` file alongside your `component` assets, following the examples of other Storybook stories, or their online documentation for guidance. When running Storybook, the story should be picked up and rendered in place automatically.
 
 ### Publishing
 
@@ -396,13 +270,13 @@ We use [Semantic Versioning 2.0.0](https://semver.org/) to version different lib
 
 Packages are published to the [GitHub private registry](https://github.com/features/packages).
 
-Publishing is done by tagging a release in GitHub. This triggers a GitHub action that pushes to the private NPM and gem registries as well as publishing new artefacts in the CDN, with the version taken from the tag of the GitHub release. ⚠️
+Publishing is done by tagging a release in GitHub. This triggers a GitHub action that pushes to the private NPM registry as well as publishing new artefacts in the CDN, with the version taken from the tag of the GitHub release.
 
 This will trigger GitHub actions in supported apps (currently [Voltaire](http://github.com/ably/voltaire) & [Website](http://github.com/ably/website)) to create a PR with an ably-ui version update.
 
 **To trigger a release:**
 
-- Make sure you have run pre-release script `./pre-release.sh` (This updates the gem and the npm package version for ably-ui in the following files `Gemfile`, `package.json`, `version.rb`).
+- Make sure you have run pre-release script `./pre-release.sh` (This updates the npm package version for ably-ui in `package.json`).
 - Merge your PR into `main` after it has been approved.
 - On the Github [Ably-UI](http://github.com/ably/ably-ui) repo, [create a new release](https://github.com/ably/ably-ui/releases/new) tag.
 - Create a new tag with the new version number for the release.
@@ -411,10 +285,9 @@ This will trigger GitHub actions in supported apps (currently [Voltaire](http://
 - Click on the Autogenerate release notes button.
 - Publish Release.
 - Check the Github `Actions` tab in the repo to make sure the release is green.
+- Upon successful release, a compiled version of the Storybook site will be deployed to Github Pages.
 
-This will release the packages, update library & preview app and create & push the commit & tag, and also create corresponding PRs in Voltaire & Website.
-
-_Note: If the version number of the gem has been yanked you will need to increment the version number._
+This will release the packages and update library and create & push the commit & tag, and also create corresponding PRs in Voltaire & Website. It will also deploy a new Storybook site to [https://ably.github.io/ably-ui/](https://ably.github.io/ably-ui/).
 
 ### Running tests
 

package/core/Accordion/component.js

@@ -0,0 +1 @@
+function _array_like_to_array(arr,len){if(len==null||len>arr.length)len=arr.length;for(var i=0,arr2=new Array(len);i<len;i++)arr2[i]=arr[i];return arr2}function _array_with_holes(arr){if(Array.isArray(arr))return arr}function _array_without_holes(arr){if(Array.isArray(arr))return _array_like_to_array(arr)}function _iterable_to_array(iter){if(typeof Symbol!=="undefined"&&iter[Symbol.iterator]!=null||iter["@@iterator"]!=null)return Array.from(iter)}function _iterable_to_array_limit(arr,i){var _i=arr==null?null:typeof Symbol!=="undefined"&&arr[Symbol.iterator]||arr["@@iterator"];if(_i==null)return;var _arr=[];var _n=true;var _d=false;var _s,_e;try{for(_i=_i.call(arr);!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break}}catch(err){_d=true;_e=err}finally{try{if(!_n&&_i["return"]!=null)_i["return"]()}finally{if(_d)throw _e}}return _arr}function _non_iterable_rest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _non_iterable_spread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _sliced_to_array(arr,i){return _array_with_holes(arr)||_iterable_to_array_limit(arr,i)||_unsupported_iterable_to_array(arr,i)||_non_iterable_rest()}function _to_consumable_array(arr){return _array_without_holes(arr)||_iterable_to_array(arr)||_unsupported_iterable_to_array(arr)||_non_iterable_spread()}function _unsupported_iterable_to_array(o,minLen){if(!o)return;if(typeof o==="string")return _array_like_to_array(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);if(n==="Object"&&o.constructor)n=o.constructor.name;if(n==="Map"||n==="Set")return Array.from(n);if(n==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _array_like_to_array(o,minLen)}import React,{useState}from"react";import Icon from"../Icon/component.tsx";var AccordionRow=function(param){var name=param.name,children=param.children,index=param.index,setActiveIndex=param.setActiveIndex,active=param.active,topBorder=param.topBorder,bottomBorder=param.bottomBorder,last=param.last,arrowIcon=param.arrowIcon;var iconActive,iconInactive;var handleSetIndex=function(){setActiveIndex(index)};if(arrowIcon){iconActive=React.createElement(Icon,{name:"icon-gui-disclosure-arrow",color:"text-dark-grey",size:"1.5rem",additionalCSS:"-rotate-90"});iconInactive=React.createElement(Icon,{name:"icon-gui-disclosure-arrow",color:"text-dark-grey",size:"1.5rem",additionalCSS:"rotate-90"})}else{iconActive=React.createElement(Icon,{name:"icon-gui-minus",color:"text-dark-grey",size:"1.5rem"});iconInactive=React.createElement(Icon,{name:"icon-gui-plus",color:"text-dark-grey",size:"1.5rem"})}return React.createElement("div",{className:"border-mid-grey ".concat(last&&!bottomBorder?"":"border-b"," ").concat(topBorder?"border-t":"")},React.createElement("button",{type:"button",onClick:handleSetIndex,className:"flex w-full px-0 focus:outline-none py-20"},React.createElement("span",{className:"ui-text-p1 font-bold text-left mr-8"},name),React.createElement("span",{className:"ml-auto"},active?iconActive:iconInactive)),React.createElement("section",{className:"ui-text-p2 transition-all overflow-hidden",style:{maxHeight:active?"500px":"0",paddingBottom:active?"1.5rem":"0"}},children))};var Accordion=function(param){var data=param.data,_param_id=param.id,id=_param_id===void 0?"id-accordion":_param_id,topBorder=param.topBorder,bottomBorder=param.bottomBorder,arrowIcon=param.arrowIcon,autoClose=param.autoClose;var _useState=_sliced_to_array(useState([]),2),activeIndexes=_useState[0],setActiveIndexes=_useState[1];var handleSetIndex=function(index){var currentIndexIsActive=activeIndexes.includes(index);if(autoClose){setActiveIndexes(currentIndexIsActive?[]:[index])}else{setActiveIndexes(currentIndexIsActive?activeIndexes.filter(function(i){return i!==index}):_to_consumable_array(activeIndexes).concat([index]))}};return React.createElement("div",{className:"ui-grid-mx max-w-screen-sm sm:mx-auto",id:id},data.map(function(item,currentIndex){return React.createElement(AccordionRow,{key:item.name,name:item.name,arrowIcon:arrowIcon,index:currentIndex,last:data.length===currentIndex+1,topBorder:topBorder&&currentIndex===0,bottomBorder:bottomBorder&&data.length===currentIndex+1,active:activeIndexes.includes(currentIndex),setActiveIndex:handleSetIndex},item.content)}))};export default Accordion;

package/core/Code/component.css

@@ -1,72 +1 @@
-@layer base {
-  @import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,600;0,700;1,600;1,700&display=swap");
-  @import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100;200;300;400;500;600;700;800&display=swap");
-  @import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap");
-}
-
-@layer components {
-  .hljs {
-    background: var(--syntax-black);
-    color: var(--syntax-light-grey);
-  }
-
-  .hljs-emphasis {
-    @apply italic;
-  }
-
-  .hljs-strong {
-    @apply font-bold;
-  }
-
-  .hljs-comment,
-  .hljs-quote {
-    color: var(--syntax-dark-grey);
-  }
-
-  .hljs-variable,
-  .hljs-template-variable,
-  .hljs-tag,
-  .hljs-name,
-  .hljs-selector-id,
-  .hljs-selector-class,
-  .hljs-regexp,
-  .hljs-deletion {
-    color: var(--syntax-red);
-  }
-
-  .hljs-number,
-  .hljs-built_in,
-  .hljs-literal,
-  .hljs-type,
-  .hljs-params,
-  .hljs-meta,
-  .hljs-link {
-    color: var(--syntax-orange);
-  }
-
-  .hljs-attribute {
-    color: var(--syntax-yellow);
-  }
-
-  .hljs-string,
-  .hljs-symbol,
-  .hljs-bullet,
-  .hljs-addition {
-    color: var(--syntax-green);
-  }
-
-  .hljs-title,
-  .hljs-section {
-    color: var(--syntax-blue);
-  }
-
-  .hljs-keyword,
-  .hljs-selector-tag {
-    color: var(--syntax-lilac);
-  }
-
-  .hljs-subst {
-    color: var(--syntax-mid-grey);
-  }
-}
-
+@import "../utils/syntax-highlighter.css";

package/core/Code/component.js

@@ -1 +1 @@
-!function(e,i){"object"==typeof exports&&"object"==typeof module?module.exports=i(require("highlight.js/lib/core"),require("highlight.js/lib/languages/bash"),require("highlight.js/lib/languages/cpp"),require("highlight.js/lib/languages/csharp"),require("highlight.js/lib/languages/css"),require("highlight.js/lib/languages/dart"),require("highlight.js/lib/languages/diff"),require("highlight.js/lib/languages/dos"),require("highlight.js/lib/languages/elixir"),require("highlight.js/lib/languages/erlang"),require("highlight.js/lib/languages/go"),require("highlight.js/lib/languages/http"),require("highlight.js/lib/languages/java"),require("highlight.js/lib/languages/javascript"),require("highlight.js/lib/languages/json"),require("highlight.js/lib/languages/kotlin"),require("highlight.js/lib/languages/objectivec"),require("highlight.js/lib/languages/php"),require("highlight.js/lib/languages/plaintext"),require("highlight.js/lib/languages/python"),require("highlight.js/lib/languages/ruby"),require("highlight.js/lib/languages/sql"),require("highlight.js/lib/languages/swift"),require("highlight.js/lib/languages/typescript"),require("highlight.js/lib/languages/xml"),require("highlight.js/lib/languages/yaml"),require("highlightjs-curl/src/languages/curl")):"function"==typeof define&&define.amd?define([,,,,,,,,,,,,,,,,,,,,,,,,,,],i):"object"==typeof exports?exports.AblyUi=i(require("highlight.js/lib/core"),require("highlight.js/lib/languages/bash"),require("highlight.js/lib/languages/cpp"),require("highlight.js/lib/languages/csharp"),require("highlight.js/lib/languages/css"),require("highlight.js/lib/languages/dart"),require("highlight.js/lib/languages/diff"),require("highlight.js/lib/languages/dos"),require("highlight.js/lib/languages/elixir"),require("highlight.js/lib/languages/erlang"),require("highlight.js/lib/languages/go"),require("highlight.js/lib/languages/http"),require("highlight.js/lib/languages/java"),require("highlight.js/lib/languages/javascript"),require("highlight.js/lib/languages/json"),require("highlight.js/lib/languages/kotlin"),require("highlight.js/lib/languages/objectivec"),require("highlight.js/lib/languages/php"),require("highlight.js/lib/languages/plaintext"),require("highlight.js/lib/languages/python"),require("highlight.js/lib/languages/ruby"),require("highlight.js/lib/languages/sql"),require("highlight.js/lib/languages/swift"),require("highlight.js/lib/languages/typescript"),require("highlight.js/lib/languages/xml"),require("highlight.js/lib/languages/yaml"),require("highlightjs-curl/src/languages/curl")):(e.AblyUi=e.AblyUi||{},e.AblyUi.Core=e.AblyUi.Core||{},e.AblyUi.Core.Code=i(e[void 0],e[void 0],e[void 0],e[void 0],e[void 0],e[void 0],e[void 0],e[void 0],e[void 0],e[void 0],e[void 0],e[void 0],e[void 0],e[void 0],e[void 0],e[void 0],e[void 0],e[void 0],e[void 0],e[void 0],e[void 0],e[void 0],e[void 0],e[void 0],e[void 0],e[void 0],e[void 0]))}(this,((e,i,l,a,r,g,s,t,h,u,o,n,b,c,d,p,j,y,q,v,x,k,m,f,S,L,w)=>(()=>{"use strict";var C={9302:i=>{i.exports=e},497:e=>{e.exports=i},6736:e=>{e.exports=l},4260:e=>{e.exports=a},7892:e=>{e.exports=r},8673:e=>{e.exports=g},3523:e=>{e.exports=s},9857:e=>{e.exports=t},2870:e=>{e.exports=h},5964:e=>{e.exports=u},3345:e=>{e.exports=o},132:e=>{e.exports=n},314:e=>{e.exports=b},6257:e=>{e.exports=c},5114:e=>{e.exports=d},6482:e=>{e.exports=p},2519:e=>{e.exports=j},1703:e=>{e.exports=y},7420:e=>{e.exports=q},6941:e=>{e.exports=v},7684:e=>{e.exports=x},5501:e=>{e.exports=k},5098:e=>{e.exports=m},9937:e=>{e.exports=f},6630:e=>{e.exports=S},1469:e=>{e.exports=L},8488:e=>{e.exports=w}},M={};function A(e){var i=M[e];if(void 0!==i)return i.exports;var l=M[e]={exports:{}};return C[e](l,l.exports,A),l.exports}A.n=e=>{var i=e&&e.__esModule?()=>e.default:()=>e;return A.d(i,{a:i}),i},A.d=(e,i)=>{for(var l in i)A.o(i,l)&&!A.o(e,l)&&Object.defineProperty(e,l,{enumerable:!0,get:i[l]})},A.o=(e,i)=>Object.prototype.hasOwnProperty.call(e,i);var T={};return(()=>{A.d(T,{default:()=>le});var e=A(9302),i=A.n(e),l=A(497),a=A.n(l),r=A(6736),g=A.n(r),s=A(4260),t=A.n(s),h=A(7892),u=A.n(h),o=A(8673),n=A.n(o),b=A(9857),c=A.n(b),d=A(3523),p=A.n(d),j=A(5964),y=A.n(j),q=A(2870),v=A.n(q),x=A(7420),k=A.n(x),m=A(3345),f=A.n(m),S=A(132),L=A.n(S),w=A(314),C=A.n(w),M=A(6257),U=A.n(M),H=A(9937),O=A.n(H),P=A(5114),D=A.n(P),E=A(2519),J=A.n(E),N=A(1703),R=A.n(N),_=A(6941),G=A.n(_),K=A(7684),Q=A.n(K),X=A(5098),Y=A.n(X),z=A(6482),B=A.n(z),F=A(5501),I=A.n(F),V=A(6630),W=A.n(V),Z=A(1469),$=A.n(Z),ee=A(8488),ie=A.n(ee);[{label:"Text",key:"text",module:k()},{label:"JS",key:"javascript",module:U()},{label:"TS",key:"typescript",module:O()},{label:"Java",key:"java",module:C()},{label:"Ruby",key:"ruby",module:Q()},{label:"Python",key:"python",module:G()},{label:"PHP",key:"php",module:R()},{label:"Shell",key:"bash",module:a()},{label:"C#",key:"cs",module:t()},{label:"CSS",key:"css",module:u()},{label:"Go",key:"go",module:f()},{label:"HTML",key:"xml",module:W()},{label:"HTTP",key:"http",module:L()},{label:"C++",key:"cpp",module:g()},{label:"Dart",key:"dart",module:n()},{label:"Swift",key:"swift",module:Y()},{label:"Kotlin",key:"kotlin",module:B()},{label:"Objective C",key:"objectivec",module:J()},{label:"Node.js",key:"javascript",module:U()},{label:"JSON",key:"json",module:D()},{label:"DOS",key:"dos",module:c()},{label:"YAML",key:"yaml",module:$()},{label:"Erlang",key:"erlang",module:y()},{label:"Elixir",key:"elixir",module:v()},{label:"Diff",key:"diff",module:p()},{label:"SQL",key:"sql",module:I()},{label:"cURL",key:"curl",module:ie()},{label:"HTML",key:"html",module:W()},{label:"XML",key:"xml",module:W()}].forEach((function(e){var l=e.key,a=e.module;return i().registerLanguage(l,a)}));const le=function(e){if(!e)throw"Missing code element";var l=e.querySelector("pre"),a=e.querySelector("code"),r=l.getAttribute("lang");if(!a||!l||!r)throw"Malformed code element";var g=function(e,l){var a=function(e){var i;switch(e||(e="text"),e.toLowerCase()){case"android":i="java";break;case".net":case"net":case"dotnet":case"csharp":case"c#":i="cs";break;case"objc":case"objective c":i="objectivec";break;case"laravel":i="php";break;case"flutter":i="dart";break;case"node.js":case"js":i="javascript";break;case"ts":i="typescript";break;case"kotlin":case"kt":i="kotlin";break;case"shell":case"fh":case"sh":i="bash";break;case"https":case"http":case"txt":case"plaintext":i="text";break;case"cmd":case"bat":i="dos";break;case"yml":i="yaml";break;case"erl":i="erlang";break;case"patch":i="diff";break;case"svg":i="xml"}return i||e}(e);if("string"==typeof l&&l&&a)return i().highlight(l,{language:a}).value}(r,a.innerHTML);a.innerHTML=g}})(),T.default})()));
+import React from"react";import"../utils/syntax-highlighter.css";import{highlightSnippet,registerDefaultLanguages}from"../utils/syntax-highlighter";import languagesRegistry from"../utils/syntax-highlighter-registry";registerDefaultLanguages(languagesRegistry);var Code=function(param){var language=param.language,snippet=param.snippet,_param_textSize=param.textSize,textSize=_param_textSize===void 0?"ui-text-code":_param_textSize,_param_padding=param.padding,padding=_param_padding===void 0?"p-32":_param_padding,_param_additionalCSS=param.additionalCSS,additionalCSS=_param_additionalCSS===void 0?"":_param_additionalCSS;var _highlightSnippet;var HTMLraw=(_highlightSnippet=highlightSnippet(language,"".concat(snippet).trim()))!==null&&_highlightSnippet!==void 0?_highlightSnippet:"";var className="language-".concat(language," ").concat(textSize);return React.createElement("div",{className:"hljs overflow-auto ".concat(padding," ").concat(additionalCSS),"data-id":"code"},React.createElement("pre",{lang:language},React.createElement("code",{className:className,dangerouslySetInnerHTML:{__html:HTMLraw}})))};export default Code;

package/core/ConnectStateWrapper/component.js

@@ -1 +1 @@
-!function(e,o){"object"==typeof exports&&"object"==typeof module?module.exports=o():"function"==typeof define&&define.amd?define([],o):"object"==typeof exports?exports.AblyUi=o():(e.AblyUi=e.AblyUi||{},e.AblyUi.Core=e.AblyUi.Core||{},e.AblyUi.Core.ConnectStateWrapper=o())}(this,(()=>({}.default)));
+function _array_like_to_array(arr,len){if(len==null||len>arr.length)len=arr.length;for(var i=0,arr2=new Array(len);i<len;i++)arr2[i]=arr[i];return arr2}function _array_with_holes(arr){if(Array.isArray(arr))return arr}function _define_property(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true})}else{obj[key]=value}return obj}function _iterable_to_array_limit(arr,i){var _i=arr==null?null:typeof Symbol!=="undefined"&&arr[Symbol.iterator]||arr["@@iterator"];if(_i==null)return;var _arr=[];var _n=true;var _d=false;var _s,_e;try{for(_i=_i.call(arr);!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break}}catch(err){_d=true;_e=err}finally{try{if(!_n&&_i["return"]!=null)_i["return"]()}finally{if(_d)throw _e}}return _arr}function _non_iterable_rest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _object_spread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};var ownKeys=Object.keys(source);if(typeof Object.getOwnPropertySymbols==="function"){ownKeys=ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym){return Object.getOwnPropertyDescriptor(source,sym).enumerable}))}ownKeys.forEach(function(key){_define_property(target,key,source[key])})}return target}function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);if(enumerableOnly){symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable})}keys.push.apply(keys,symbols)}return keys}function _object_spread_props(target,source){source=source!=null?source:{};if(Object.getOwnPropertyDescriptors){Object.defineProperties(target,Object.getOwnPropertyDescriptors(source))}else{ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key))})}return target}function _sliced_to_array(arr,i){return _array_with_holes(arr)||_iterable_to_array_limit(arr,i)||_unsupported_iterable_to_array(arr,i)||_non_iterable_rest()}function _unsupported_iterable_to_array(o,minLen){if(!o)return;if(typeof o==="string")return _array_like_to_array(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);if(n==="Object"&&o.constructor)n=o.constructor.name;if(n==="Map"||n==="Set")return Array.from(n);if(n==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _array_like_to_array(o,minLen)}import React,{useEffect,useState}from"react";import{connectState,getRemoteDataStore}from"../remote-data-store";var ConnectStateWrapper=function(Component,selectors){var _useState=_sliced_to_array(useState({}),2),state=_useState[0],setState=_useState[1];var setStateForKey=function(key){return function(storeState){return setState(function(){return _define_property({},key,storeState)})}};useEffect(function(){var store=getRemoteDataStore();var resolvedState=Object.keys(selectors).reduce(function(acc,key){return _object_spread_props(_object_spread({},acc),_define_property({},key,selectors[key](store)))},{});setState(resolvedState);Object.keys(selectors).forEach(function(key){connectState(selectors[key],setStateForKey(key))})},[]);var WrappedComponent=function(props){return React.createElement(Component,_object_spread({},props,state))};return WrappedComponent};export default ConnectStateWrapper;

package/core/ContactFooter/component.css

@@ -1,12 +1,9 @@
-@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;
-  }
+.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 +1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.AblyUi=t():(e.AblyUi=e.AblyUi||{},e.AblyUi.Core=e.AblyUi.Core||{},e.AblyUi.Core.ContactFooter=t())}(this,(()=>(()=>{"use strict";var e={d:(t,o)=>{for(var n in o)e.o(o,n)&&!e.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:o[n]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)},t={};e.d(t,{default:()=>r});var o=function(e){return(arguments.length>1&&void 0!==arguments[1]?arguments[1]:document).querySelector("[data-id=".concat(e,"]"))};function n(e,t){e.disabled=!0,e.innerText=t}var i=30;const r=function(){return function(){var e=(arguments.length>0&&void 0!==arguments[0]?arguments[0]:{}).dataId,t=o(e),r=o("open-chat-widget",t),a=r.dataset.enabledLabel,d=r.dataset.disabledLabel;if(e&&t){var c,u=o("open-chat-widget",t);return n(u,d),function e(t){var o,n,r,d,l=null===(o=window)||void 0===o||null===(n=o.HubSpotConversations)||void 0===n?void 0:n.widget,f=document.querySelector("#hubspot-messages-iframe-container");c=function(e){e.preventDefault(),l.open()},l&&f?(u.addEventListener("click",c),d=a,(r=u).disabled=!1,r.innerText=d):--i&&setTimeout((function(){return e(100)}),t)}(0),function(){n(u,d),u.removeEventListener("click",c)}}}({dataId:"contact-footer"})};return t.default})()));
+import React,{useEffect}from"react";import Icon from"../Icon/component.tsx";import _absUrl from"../url-base.js";import toggleChatWidget from"../hubspot-chat-toggle";import"./component.css";var ContactFooter=function(param){var urlBase=param.urlBase;useEffect(function(){return toggleChatWidget({dataId:"contact-footer"})},[]);var absUrl=function(path){return _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;

package/core/CookieMessage/component.css

@@ -1,14 +1,11 @@
-@layer components {
-  .ui-cookie-message {
-    @apply rounded-lg bg-white font-sans;
-    @apply justify-between items-center;
-    @apply opacity-100 z-50 bottom-0 fixed sm:flex;
-    @apply p-16 mb-16 ml-16;
-    max-width: 70vw;
-    box-shadow: 0px 24px 32px 0px #0000000d;
-    border: 1px solid var(--color-mid-grey);
-    border-left: 0.5rem solid var(--color-electric-cyan);
-    transition: bottom 250ms ease-out, opacity 150ms ease-out;
-  }
+.ui-cookie-message {
+  @apply rounded-lg bg-white font-sans;
+  @apply justify-between items-center;
+  @apply opacity-100 z-50 bottom-0 fixed sm:flex;
+  @apply p-16 mb-16 ml-16;
+  max-width: 70vw;
+  box-shadow: 0px 24px 32px 0px #0000000d;
+  border: 1px solid var(--color-mid-grey);
+  border-left: 0.5rem solid var(--color-electric-cyan);
+  transition: bottom 250ms ease-out, opacity 150ms ease-out;
 }
-

package/core/CookieMessage/component.js

@@ -1 +1 @@
-!function(e,o){"object"==typeof exports&&"object"==typeof module?module.exports=o():"function"==typeof define&&define.amd?define([],o):"object"==typeof exports?exports.AblyUi=o():(e.AblyUi=e.AblyUi||{},e.AblyUi.Core=e.AblyUi.Core||{},e.AblyUi.Core.CookieMessage=o())}(this,(()=>(()=>{"use strict";var e={};return e.default})()));
+import"./component.css";array(arr,len){if(len==null||len>arr.length)len=arr.length;for(var i=0,arr2=new Array(len);i<len;i++)arr2[i]=arr[i];return arr2}function _array_with_holes(arr){if(Array.isArray(arr))return arr}function _iterable_to_array_limit(arr,i){var _i=arr==null?null:typeof Symbol!=="undefined"&&arr[Symbol.iterator]||arr["@@iterator"];if(_i==null)return;var _arr=[];var _n=true;var _d=false;var _s,_e;try{for(_i=_i.call(arr);!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break}}catch(err){_d=true;_e=err}finally{try{if(!_n&&_i["return"]!=null)_i["return"]()}finally{if(_d)throw _e}}return _arr}function _non_iterable_rest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _sliced_to_array(arr,i){return _array_with_holes(arr)||_iterable_to_array_limit(arr,i)||_unsupported_iterable_to_array(arr,i)||_non_iterable_rest()}function _unsupported_iterable_to_array(o,minLen){if(!o)return;if(typeof o==="string")return _array_like_to_array(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);if(n==="Object"&&o.constructor)n=o.constructor.name;if(n==="Map"||n==="Set")return Array.from(n);if(n==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _array_like_to_array(o,minLen)}import React,{useRef,useEffect,useState}from"react";import Cookie from"js-cookie";import"./component.css";import _absUrl from"../url-base";var COOKIE_EXPIRY=365;var CookieMessage=function(param){var cookieId=param.cookieId,urlBase=param.urlBase;var ref=useRef(null);var _useState=_sliced_to_array(useState(true),2),hideCookieMessage=_useState[0],setHideCookieMessage=_useState[1];useEffect(function(){var isCookieSet=Cookie.get(cookieId)?true:false;setHideCookieMessage(isCookieSet)},[]);var handleClose=function(){var _ref_current;Cookie.set(cookieId,"1",{expires:COOKIE_EXPIRY});(_ref_current=ref.current)===null||_ref_current===void 0?void 0:_ref_current.classList.add("bottom-1","opacity-0");setTimeout(function(){return setHideCookieMessage(true)},500)};var absUrl=function(path){return _absUrl(path,urlBase)};if(hideCookieMessage)return null;return React.createElement("div",{className:"ui-cookie-message",ref:ref},React.createElement("p",{className:"ui-text-p2 pr-32"},React.createElement("a",{href:absUrl("/privacy"),className:"underline"},"How we use cookies")," ","to improve your experience."),React.createElement("button",{className:"ui-btn-secondary mt-12 sm:mt-0 whitespace-nowrap",onClick:handleClose},"Accept and close"))};export default CookieMessage;

package/core/CustomerLogos/component.js

@@ -1 +1 @@
-!function(e,o){"object"==typeof exports&&"object"==typeof module?module.exports=o():"function"==typeof define&&define.amd?define([],o):"object"==typeof exports?exports.AblyUi=o():(e.AblyUi=e.AblyUi||{},e.AblyUi.Core=e.AblyUi.Core||{},e.AblyUi.Core.CustomerLogos=o())}(this,(()=>({}.default)));
+import React from"react";var CustomerLogos=function(param){var companies=param.companies,_param_additionalCss=param.additionalCss,additionalCss=_param_additionalCss===void 0?"":_param_additionalCss;return React.createElement("section",{className:"w-full bg-white"},React.createElement("ul",{className:"py-64 flex flex-row flex-wrap md:flex-nowrap content-between m-auto items-center ".concat(additionalCss)},companies.map(function(company){return React.createElement("li",{key:company.label,className:"flex-auto text-center sm:w-1/3 w-1/2"},React.createElement("img",{alt:company.label,src:company.logo,className:"mx-auto"}))})))};export default CustomerLogos;

package/core/DropdownMenu/component.js

@@ -1 +1 @@
-!function(e,o){"object"==typeof exports&&"object"==typeof module?module.exports=o():"function"==typeof define&&define.amd?define([],o):"object"==typeof exports?exports.AblyUi=o():(e.AblyUi=e.AblyUi||{},e.AblyUi.Core=e.AblyUi.Core||{},e.AblyUi.Core.DropdownMenu=o())}(this,(()=>({}.default)));
+function _array_like_to_array(arr,len){if(len==null||len>arr.length)len=arr.length;for(var i=0,arr2=new Array(len);i<len;i++)arr2[i]=arr[i];return arr2}function _array_with_holes(arr){if(Array.isArray(arr))return arr}function _iterable_to_array_limit(arr,i){var _i=arr==null?null:typeof Symbol!=="undefined"&&arr[Symbol.iterator]||arr["@@iterator"];if(_i==null)return;var _arr=[];var _n=true;var _d=false;var _s,_e;try{for(_i=_i.call(arr);!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break}}catch(err){_d=true;_e=err}finally{try{if(!_n&&_i["return"]!=null)_i["return"]()}finally{if(_d)throw _e}}return _arr}function _non_iterable_rest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _sliced_to_array(arr,i){return _array_with_holes(arr)||_iterable_to_array_limit(arr,i)||_unsupported_iterable_to_array(arr,i)||_non_iterable_rest()}function _unsupported_iterable_to_array(o,minLen){if(!o)return;if(typeof o==="string")return _array_like_to_array(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);if(n==="Object"&&o.constructor)n=o.constructor.name;if(n==="Map"||n==="Set")return Array.from(n);if(n==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _array_like_to_array(o,minLen)}import React,{createContext,useContext,useState,useEffect,useRef}from"react";import Icon from"../Icon/component.tsx";var DropdownMenuContext=createContext({isOpen:false,setOpen:function(){}});var DropdownMenu=function(param){var children=param.children;var _useState=_sliced_to_array(useState(false),2),isOpen=_useState[0],setOpen=_useState[1];var ref=useRef(null);useEffect(function(){var clickHandler=function(e){var _ref_current;if((_ref_current=ref.current)===null||_ref_current===void 0?void 0:_ref_current.contains(e.target))return;setOpen(false)};document.addEventListener("click",clickHandler);return function(){document.removeEventListener("click",clickHandler)}},[]);return React.createElement(DropdownMenuContext.Provider,{value:{isOpen:isOpen,setOpen:setOpen}},React.createElement("div",{id:"dropdown-menu",className:"relative",ref:ref},children))};var Trigger=function(param){var children=param.children,_param_additionalTriggerCSS=param.additionalTriggerCSS,additionalTriggerCSS=_param_additionalTriggerCSS===void 0?"":_param_additionalTriggerCSS;var _useContext=useContext(DropdownMenuContext),isOpen=_useContext.isOpen,setOpen=_useContext.setOpen;return React.createElement("button",{id:"menu-trigger",onClick:function(){return setOpen(!isOpen)},className:"".concat(additionalTriggerCSS," flex items-center p-8 ml-8 group hover:text-gui-hover hover:bg-light-grey active:text-gui-active focus:text-gui-focus focus:outline-none rounded-lg")},React.createElement("span",{className:"leading-normal"},children),React.createElement(Icon,{name:"icon-gui-disclosure-arrow",color:"text-cool-black",size:"1.25rem",additionalCSS:"transform rotate-90 group-hover:text-gui-hover group-active:text-gui-active group-focus:text-gui-focus"}))};var Content=function(param){var children=param.children,_param_anchorPosition=param.anchorPosition,anchorPosition=_param_anchorPosition===void 0?"right":_param_anchorPosition,additionalContentCSS=param.additionalContentCSS;var isOpen=useContext(DropdownMenuContext).isOpen;if(!isOpen){return null}var anchorPositionClasses=anchorPosition==="right"?"right-0":"left-0";return React.createElement("div",{id:"menu-content",className:"".concat(additionalContentCSS," absolute p-8 z-10 border border-mid-grey bg-white rounded shadow-container ").concat(anchorPositionClasses),style:{minWidth:275,top:44}},children)};var Link=function(param){var url=param.url,title=param.title,subtitle=param.subtitle,iconName=param.iconName,children=param.children;return React.createElement("a",{href:url,className:"menu-link group block p-8 hover:bg-light-grey hover:text-cool-black rounded"},React.createElement("p",{className:"mb-4"},title,iconName?React.createElement(Icon,{name:iconName,size:"1rem",color:"text-cool-black",additionalCSS:"align-middle ml-8 relative -top-1 -left-4"}):null),subtitle?React.createElement("p",{className:"ui-text-p3 mb-16"},subtitle):null,children)};DropdownMenu.Trigger=Trigger;DropdownMenu.Content=Content;DropdownMenu.Link=Link;export default DropdownMenu;

package/core/FeaturedLink/component.js

@@ -1 +1 @@
-!function(e,o){"object"==typeof exports&&"object"==typeof module?module.exports=o():"function"==typeof define&&define.amd?define([],o):"object"==typeof exports?exports.AblyUi=o():(e.AblyUi=e.AblyUi||{},e.AblyUi.Core=e.AblyUi.Core||{},e.AblyUi.Core.FeaturedLink=o())}(this,(()=>({}.default)));
+function _define_property(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true})}else{obj[key]=value}return obj}function _object_spread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};var ownKeys=Object.keys(source);if(typeof Object.getOwnPropertySymbols==="function"){ownKeys=ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym){return Object.getOwnPropertyDescriptor(source,sym).enumerable}))}ownKeys.forEach(function(key){_define_property(target,key,source[key])})}return target}function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);if(enumerableOnly){symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable})}keys.push.apply(keys,symbols)}return keys}function _object_spread_props(target,source){source=source!=null?source:{};if(Object.getOwnPropertyDescriptors){Object.defineProperties(target,Object.getOwnPropertyDescriptors(source))}else{ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key))})}return target}import React from"react";import Icon from"../Icon/component.tsx";var buildTargetAndRel=function(url,newWindow){var props={};if(newWindow){props.target="_blank";if(url.startsWith("/")&&!url.startsWith("//")){props.rel="noopener"}else{props.rel="noopenner noreferrer"}}return props};var FeaturedLink=function(param){var url=param.url,_param_textSize=param.textSize,textSize=_param_textSize===void 0?"text-p2":_param_textSize,_param_iconColor=param.iconColor,iconColor=_param_iconColor===void 0?"text-cool-black":_param_iconColor,_param_flush=param.flush,flush=_param_flush===void 0?false:_param_flush,_param_reverse=param.reverse,reverse=_param_reverse===void 0?false:_param_reverse,_param_additionalCSS=param.additionalCSS,additionalCSS=_param_additionalCSS===void 0?"":_param_additionalCSS,_param_newWindow=param.newWindow,newWindow=_param_newWindow===void 0?false:_param_newWindow,_param_onClick=param.onClick,onClick=_param_onClick===void 0?undefined:_param_onClick,children=param.children;var targetAndRel=buildTargetAndRel(url,newWindow);return React.createElement("a",_object_spread_props(_object_spread({href:url,className:"font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ui-".concat(textSize," ").concat(flush?"":"py-8"," ").concat(additionalCSS),style:{"--featured-link-icon-size":"var(".concat(textSize.replace("text","--fs"),")")}},targetAndRel),{onClick:onClick}),reverse?React.createElement(React.Fragment,null,React.createElement(Icon,{name:"icon-gui-link-arrow",size:"calc(var(--featured-link-icon-size) * 1.25)",color:iconColor,additionalCSS:"align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"}),children):React.createElement(React.Fragment,null,children,React.createElement(Icon,{name:"icon-gui-link-arrow",size:"calc(var(--featured-link-icon-size) * 1.25)",color:iconColor,additionalCSS:"align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"})))};export default FeaturedLink;

package/core/Flash/component.css

@@ -1,26 +1,23 @@
-@layer components {
-  .ui-flash {
-    @apply w-full fixed;
-    top: 5.5rem;
-    z-index: calc(var(--stacking-context-page-meganav) - 10);
-    transition: margin-top 200ms;
-  }
-
-  .ui-flash-message {
-    @apply font-sans font-light antialiased max-w-screen-xl mx-auto mt-8 opacity-0 relative;
-    transition: opacity 200ms, transform 200ms, height 200ms 200ms,
-      margin-top 200ms 200ms;
-    transform: translateY(-200%) rotateX(-90deg);
-  }
+.ui-flash {
+  @apply w-full fixed;
+  top: 5.5rem;
+  z-index: calc(var(--stacking-context-page-meganav) - 10);
+  transition: margin-top 200ms;
+}
 
-  /* dynamic content inside flash, can't add classes */
-  .ui-flash-text a {
-    @apply underline;
-  }
+.ui-flash-message {
+  @apply font-sans font-light antialiased max-w-screen-xl mx-auto mt-8 opacity-0 relative;
+  transition: opacity 200ms, transform 200ms, height 200ms 200ms,
+    margin-top 200ms 200ms;
+  transform: translateY(-200%) rotateX(-90deg);
+}
 
-  .ui-flash-message-enter {
-    @apply opacity-100;
-    transform: translateY(0) rotateX(0);
-  }
+/* dynamic content inside flash, can't add classes */
+.ui-flash-text a {
+  @apply underline;
 }
 
+.ui-flash-message-enter {
+  @apply opacity-100;
+  transform: translateY(0) rotateX(0);
+}

package/core/Flash/component.js

@@ -1 +1 @@
-!function(e,o){"object"==typeof exports&&"object"==typeof module?module.exports=o():"function"==typeof define&&define.amd?define([],o):"object"==typeof exports?exports.AblyUi=o():(e.AblyUi=e.AblyUi||{},e.AblyUi.Core=e.AblyUi.Core||{},e.AblyUi.Core.Flash=o())}(this,(()=>(()=>{"use strict";var e={};return e.default})()));
+function _array_like_to_array(arr,len){if(len==null||len>arr.length)len=arr.length;for(var i=0,arr2=new Array(len);i<len;i++)arr2[i]=arr[i];return arr2}function _array_with_holes(arr){if(Array.isArray(arr))return arr}function _array_without_holes(arr){if(Array.isArray(arr))return _array_like_to_array(arr)}function _define_property(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true})}else{obj[key]=value}return obj}function _iterable_to_array(iter){if(typeof Symbol!=="undefined"&&iter[Symbol.iterator]!=null||iter["@@iterator"]!=null)return Array.from(iter)}function _iterable_to_array_limit(arr,i){var _i=arr==null?null:typeof Symbol!=="undefined"&&arr[Symbol.iterator]||arr["@@iterator"];if(_i==null)return;var _arr=[];var _n=true;var _d=false;var _s,_e;try{for(_i=_i.call(arr);!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break}}catch(err){_d=true;_e=err}finally{try{if(!_n&&_i["return"]!=null)_i["return"]()}finally{if(_d)throw _e}}return _arr}function _non_iterable_rest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _non_iterable_spread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _object_spread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};var ownKeys=Object.keys(source);if(typeof Object.getOwnPropertySymbols==="function"){ownKeys=ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym){return Object.getOwnPropertyDescriptor(source,sym).enumerable}))}ownKeys.forEach(function(key){_define_property(target,key,source[key])})}return target}function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);if(enumerableOnly){symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable})}keys.push.apply(keys,symbols)}return keys}function _object_spread_props(target,source){source=source!=null?source:{};if(Object.getOwnPropertyDescriptors){Object.defineProperties(target,Object.getOwnPropertyDescriptors(source))}else{ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key))})}return target}function _sliced_to_array(arr,i){return _array_with_holes(arr)||_iterable_to_array_limit(arr,i)||_unsupported_iterable_to_array(arr,i)||_non_iterable_rest()}function _to_consumable_array(arr){return _array_without_holes(arr)||_iterable_to_array(arr)||_unsupported_iterable_to_array(arr)||_non_iterable_spread()}function _unsupported_iterable_to_array(o,minLen){if(!o)return;if(typeof o==="string")return _array_like_to_array(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);if(n==="Object"&&o.constructor)n=o.constructor.name;if(n==="Map"||n==="Set")return Array.from(n);if(n==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _array_like_to_array(o,minLen)}import React,{useEffect,useState,useRef}from"react";import DOMPurify from"dompurify";import{nanoid}from"nanoid/non-secure";import{getRemoteDataStore}from"../remote-data-store.js";import ConnectStateWrapper from"../ConnectStateWrapper/component.tsx";import Icon from"../Icon/component.tsx";import"./component.css";var REDUCER_KEY="flashes";var FLASH_DATA_ID="ui-flashes";var initialState={items:[]};var reducerFlashes=_define_property({},REDUCER_KEY,function(){var state=arguments.length>0&&arguments[0]!==void 0?arguments[0]:initialState,action=arguments.length>1?arguments[1]:void 0;switch(action.type){case"flash/push":{var flashes=Array.isArray(action.payload)?action.payload:[action.payload];return{items:_to_consumable_array(state.items).concat(_to_consumable_array(flashes))}}default:return state}});var selectFlashes=function(store){return store.getState()[REDUCER_KEY]};var FLASH_BG_COLOR={error:"bg-gui-error",success:"bg-zingy-green",notice:"bg-electric-cyan",info:"bg-electric-cyan",alert:"bg-active-orange"};var FLASH_TEXT_COLOR={error:"text-white",success:"text-cool-black",notice:"text-cool-black",info:"text-cool-black",alert:"text-white"};var AUTO_HIDE=["success","info","notice"];var AUTO_HIDE_TIME=8e3;var useAutoHide=function(type,closeFlash){var timeoutId=useRef(null);useEffect(function(){if(AUTO_HIDE.includes(type)){timeoutId.current=setTimeout(function(){closeFlash()},AUTO_HIDE_TIME)}return function(){if(timeoutId.current){clearTimeout(timeoutId.current)}}},[])};var Flash=function(param){var id=param.id,type=param.type,content=param.content,removeFlash=param.removeFlash;var ref=useRef(null);var _useState=_sliced_to_array(useState(false),2),closed=_useState[0],setClosed=_useState[1];var _useState1=_sliced_to_array(useState(0),2),flashHeight=_useState1[0],setFlashHeight=_useState1[1];var _useState2=_sliced_to_array(useState(false),2),triggerEntryAnimation=_useState2[0],setTriggerEntryAnimation=_useState2[1];var closeFlash=function(){if(ref.current){setFlashHeight(ref.current.getBoundingClientRect().height)}setClosed(true);setTimeout(function(){id&&removeFlash(id)},100)};useEffect(function(){return setTriggerEntryAnimation(true)},[]);useAutoHide(type,closeFlash);var animateEntry=triggerEntryAnimation&&!closed;var style;if(flashHeight&&!closed){style={height:"".concat(flashHeight,"px")}}else if(closed){style={height:0,marginTop:0,zIndex:-1}}else{style={}}var safeContent=DOMPurify.sanitize(content,{ALLOWED_TAGS:["a"],ALLOWED_ATTR:["href","data-method","rel"]});var withIcons={notice:"icon-gui-ably-badge",success:"icon-gui-tick",error:"icon-gui-warning",alert:"icon-gui-warning"};var iconColor={notice:"text-cool-black",success:"text-cool-black",error:"text-white",alert:"text-white"};return React.createElement("div",{className:"ui-flash-message ui-grid-px ".concat(animateEntry?"ui-flash-message-enter":""),style:style,ref:ref,"data-id":"ui-flash"},React.createElement("div",{className:"".concat(FLASH_BG_COLOR[type]," p-32 flex align-center rounded shadow-container-subtle")},withIcons[type]&&React.createElement(Icon,{name:withIcons[type],color:iconColor[type],size:"1.5rem",additionalCSS:"mr-16 self-baseline"}),React.createElement("p",{className:"ui-text-p1 mr-16 ".concat(FLASH_TEXT_COLOR[type]),dangerouslySetInnerHTML:{__html:safeContent}}),React.createElement("button",{type:"button",className:"p-0 ml-auto self-start focus:outline-none",onClick:closeFlash},React.createElement(Icon,{name:"icon-gui-close",color:iconColor[type],size:"1.5rem",additionalCSS:"transition-colors"}))))};var Flashes=function(param){var flashes=param.flashes;var _useState=_sliced_to_array(useState([]),2),flashesWithIds=_useState[0],setFlashesWithIds=_useState[1];var removeFlash=function(flashId){return setFlashesWithIds(function(items){return items.filter(function(item){return item.id!==flashId})})};useEffect(function(){setFlashesWithIds(function(state){return _to_consumable_array(state).concat(_to_consumable_array((flashes===null||flashes===void 0?void 0:flashes.items).map(function(flash){return _object_spread_props(_object_spread({},flash),{id:nanoid(),removed:false})})))})},[flashes]);return React.createElement("div",{className:"ui-flash","data-id":FLASH_DATA_ID},flashesWithIds.filter(function(item){return!item.removed}).map(function(flash){return React.createElement(Flash,_object_spread_props(_object_spread({key:flash.id},flash),{removeFlash:removeFlash}))}))};var BackendFlashes=function(param){var flashes=param.flashes;useEffect(function(){var transformedFlashes=flashes.map(function(flash){var _flash=_sliced_to_array(flash,2),type=_flash[0],content=_flash[1];return{type:type,content:content}})||[];if(transformedFlashes.length>0){var store=getRemoteDataStore();store.dispatch({type:"flash/push",payload:transformedFlashes})}},[]);var WrappedFlashes=ConnectStateWrapper(Flashes,{flashes:selectFlashes});return React.createElement(WrappedFlashes,null)};export{reducerFlashes,FLASH_DATA_ID,Flashes};export default BackendFlashes;