@ably/ui 14.0.0-dev.fbce38f → 14.0.1

package/core/styles/text.css

@@ -1,166 +1,168 @@
-.ui-text-title {
-  @apply font-sans font-extrabold text-cool-black;
-  @apply text-title-xs xs:text-title xl:text-title-xl;
-  @apply tracking-tighten-0.015 xs:tracking-tighten-0.02 xl:tracking-tighten-0.02;
-}
-
-.ui-text-h1 {
-  @apply font-sans font-extrabold text-cool-black;
-  @apply text-h1-xs xs:text-h1 xl:text-h1-xl;
-  @apply tracking-tighten-0.0125 xs:tracking-tighten-0.015;
-}
-
-.ui-text-h2 {
-  @apply font-sans font-extrabold text-cool-black;
-  @apply text-h2-xs xs:text-h2 xl:text-h2-xl;
-  @apply tracking-tighten-0.015 xs:tracking-tighten-0.01;
-}
-
-.ui-text-h3 {
-  @apply font-sans font-extrabold text-cool-black;
-  @apply text-h3;
-  @apply tracking-tighten-0.005;
-}
-
-.ui-text-h4 {
-  @apply font-sans font-extrabold text-cool-black;
-  @apply text-h4;
-  @apply tracking-tighten-0.0015;
-}
-
-.ui-text-h5 {
-  @apply font-sans font-extrabold text-cool-black;
-  @apply text-h5;
-  @apply tracking-tighten-0.0025;
-}
-
-.ui-text-p1 {
-  @apply font-sans font-medium text-charcoal-grey;
-  @apply text-p1;
-}
-
-.ui-text-p2 {
-  @apply font-sans font-medium text-charcoal-grey;
-  @apply text-p2;
-}
-
-.ui-text-p3 {
-  @apply font-sans font-medium text-charcoal-grey;
-  @apply text-p3;
-}
-
-.ui-text-standfirst {
-  @apply font-sans font-light text-active-orange;
-  @apply text-standfirst xl:text-standfirst-xl;
-  @apply tracking-tighten-0.025 xl:tracking-tighten-0.015;
-}
-
-.ui-text-quote {
-  @apply font-sans font-normal text-cool-black;
-  @apply text-quote leading-normal;
-  @apply tracking-tighten-0.0015;
-}
-
-.ui-text-sub-header {
-  @apply font-sans font-semibold text-neutral-800;
-  @apply text-sub-header-xs xs:text-sub-header leading-normal;
-}
-
-.ui-text-overline1 {
-  @apply font-mono font-medium text-active-orange uppercase;
-  @apply text-overline1 leading-normal;
-  @apply tracking-widen-0.16;
-}
-
-.ui-text-overline2 {
-  @apply font-mono font-medium text-active-orange uppercase;
-  @apply text-overline2 leading-normal;
-  @apply tracking-widen-0.16;
-}
-
-.ui-text-menu1 {
-  @apply font-sans font-medium text-cool-black;
-  @apply text-menu1 leading-snug;
-}
-
-.ui-text-menu2 {
-  @apply font-sans font-medium text-cool-black;
-  @apply text-menu2 leading-snug;
-}
-
-.ui-text-menu3 {
-  @apply font-sans font-medium text-cool-black;
-  @apply text-menu3 leading-snug;
-}
-
-.ui-text-code {
-  @apply font-mono font-normal text-code;
-}
-
-.ui-text-code2 {
-  @apply font-mono font-normal text-code2;
-}
-
-.ui-text-code-inline {
-  @apply font-mono font-normal text-code text-charcoal-grey bg-light-grey p-inline-code rounded-sm mx-1;
-}
-
-.ui-unordered-list {
-  @apply text-p1 font-medium text-charcoal-grey;
-  @apply ml-32 my-16;
-  @apply list-disc;
-}
-
-.ui-ordered-list {
-  @apply text-p1 font-medium text-charcoal-grey;
-  @apply ml-32 my-16;
-  @apply list-decimal;
-}
-
-.ui-ordered-list li,
-.ui-unordered-list li {
-  @apply mb-8;
-}
-
-.ui-unordered-list li > *:last-of-type:not(ul):not(ol),
-.ui-ordered-list li > *:last-of-type:not(ul):not(ol) {
-  margin-bottom: 0;
-}
-
-.ui-unordered-list ul {
-  @apply ml-24 my-8 list-circle;
-}
-
-.ui-ordered-list ol {
-  @apply ml-24 my-16 list-decimal;
-}
-
-.ui-unordered-list ul ul {
-  @apply list-square my-8;
-}
-
-.ui-unordered-list ul ul {
-  @apply my-8;
-}
-
-.ui-link {
-  @apply text-gui-default;
-  @apply hover:text-gui-hover active:text-gui-active disabled:text-gui-unavailable;
-  @apply focus:text-gui-default focus:outline-gui-focus;
-  @apply no-underline;
-}
-
-.ui-link-neutral {
-  @apply hover:text-dark-grey active:text-cool-black disabled:text-gui-unavailable;
-  @apply focus:text-charcoal-grey;
-  @apply underline;
-}
-
-/* focus:outline-gui-focus-neutral does not get created under Tailwind 3.3.5, not sure why */
-.ui-link-neutral:focus {
-  outline: 2px solid var(--color-neutral-000);
-}
-
-.ui-figcaption {
-  @apply font-mono text-p3 text-neutral-800;
+@layer components {
+  .ui-text-title {
+    @apply font-sans font-extrabold text-cool-black;
+    @apply text-title-xs xs:text-title xl:text-title-xl;
+    @apply tracking-tighten-0.015 xs:tracking-tighten-0.02 xl:tracking-tighten-0.02;
+  }
+
+  .ui-text-h1 {
+    @apply font-sans font-extrabold text-cool-black;
+    @apply text-h1-xs xs:text-h1 xl:text-h1-xl;
+    @apply tracking-tighten-0.0125 xs:tracking-tighten-0.015;
+  }
+
+  .ui-text-h2 {
+    @apply font-sans font-extrabold text-cool-black;
+    @apply text-h2-xs xs:text-h2 xl:text-h2-xl;
+    @apply tracking-tighten-0.015 xs:tracking-tighten-0.01;
+  }
+
+  .ui-text-h3 {
+    @apply font-sans font-extrabold text-cool-black;
+    @apply text-h3;
+    @apply tracking-tighten-0.005;
+  }
+
+  .ui-text-h4 {
+    @apply font-sans font-extrabold text-cool-black;
+    @apply text-h4;
+    @apply tracking-tighten-0.0015;
+  }
+
+  .ui-text-h5 {
+    @apply font-sans font-extrabold text-cool-black;
+    @apply text-h5;
+    @apply tracking-tighten-0.0025;
+  }
+
+  .ui-text-p1 {
+    @apply font-sans font-medium text-charcoal-grey;
+    @apply text-p1;
+  }
+
+  .ui-text-p2 {
+    @apply font-sans font-medium text-charcoal-grey;
+    @apply text-p2;
+  }
+
+  .ui-text-p3 {
+    @apply font-sans font-medium text-charcoal-grey;
+    @apply text-p3;
+  }
+
+  .ui-text-standfirst {
+    @apply font-sans font-light text-active-orange;
+    @apply text-standfirst xl:text-standfirst-xl;
+    @apply tracking-tighten-0.025 xl:tracking-tighten-0.015;
+  }
+
+  .ui-text-quote {
+    @apply font-sans font-normal text-cool-black;
+    @apply text-quote leading-normal;
+    @apply tracking-tighten-0.0015;
+  }
+
+  .ui-text-sub-header {
+    @apply font-sans font-semibold text-neutral-800;
+    @apply text-sub-header-xs xs:text-sub-header leading-normal;
+  }
+
+  .ui-text-overline1 {
+    @apply font-mono font-medium text-active-orange uppercase;
+    @apply text-overline1 leading-normal;
+    @apply tracking-widen-0.16;
+  }
+
+  .ui-text-overline2 {
+    @apply font-mono font-medium text-active-orange uppercase;
+    @apply text-overline2 leading-normal;
+    @apply tracking-widen-0.16;
+  }
+
+  .ui-text-menu1 {
+    @apply font-sans font-medium text-cool-black;
+    @apply text-menu1 leading-snug;
+  }
+
+  .ui-text-menu2 {
+    @apply font-sans font-medium text-cool-black;
+    @apply text-menu2 leading-snug;
+  }
+
+  .ui-text-menu3 {
+    @apply font-sans font-medium text-cool-black;
+    @apply text-menu3 leading-snug;
+  }
+
+  .ui-text-code {
+    @apply font-mono font-normal text-code;
+  }
+
+  .ui-text-code2 {
+    @apply font-mono font-normal text-code2;
+  }
+
+  .ui-text-code-inline {
+    @apply font-mono font-normal text-code text-charcoal-grey bg-light-grey p-inline-code rounded-sm mx-1;
+  }
+
+  .ui-unordered-list {
+    @apply text-p1 font-medium text-charcoal-grey;
+    @apply ml-32 my-16;
+    @apply list-disc;
+  }
+
+  .ui-ordered-list {
+    @apply text-p1 font-medium text-charcoal-grey;
+    @apply ml-32 my-16;
+    @apply list-decimal;
+  }
+
+  .ui-ordered-list li,
+  .ui-unordered-list li {
+    @apply mb-8;
+  }
+
+  .ui-unordered-list li > *:last-of-type:not(ul):not(ol),
+  .ui-ordered-list li > *:last-of-type:not(ul):not(ol) {
+    margin-bottom: 0;
+  }
+
+  .ui-unordered-list ul {
+    @apply ml-24 my-8 list-circle;
+  }
+
+  .ui-ordered-list ol {
+    @apply ml-24 my-16 list-decimal;
+  }
+
+  .ui-unordered-list ul ul {
+    @apply list-square my-8;
+  }
+
+  .ui-unordered-list ul ul {
+    @apply my-8;
+  }
+
+  .ui-link {
+    @apply text-gui-default;
+    @apply hover:text-gui-hover active:text-gui-active disabled:text-gui-unavailable;
+    @apply focus:text-gui-default focus:outline-gui-focus;
+    @apply no-underline;
+  }
+
+  .ui-link-neutral {
+    @apply hover:text-dark-grey active:text-cool-black disabled:text-gui-unavailable;
+    @apply focus:text-charcoal-grey;
+    @apply underline;
+  }
+
+  /* focus:outline-gui-focus-neutral does not get created under Tailwind 3.3.5, not sure why */
+  .ui-link-neutral:focus {
+    outline: 2px solid var(--color-neutral-000);
+  }
+
+  .ui-figcaption {
+    @apply font-mono text-p3 text-neutral-800;
+  }
 }

package/core/styles.components.css

@@ -3,31 +3,33 @@
 @import "./styles/text.css";
 @import "./styles/forms.css";
 
-.ui-input {
-  @apply text-p2 font-medium bg-light-grey rounded p-input w-full leading-none appearance-none border border-mid-grey transition-input;
-  @apply hover:bg-white hover:shadow-input hover:border-transparent;
-  @apply focus:bg-white focus:shadow-input focus:border-transparent focus:outline-gui-focus;
-  @apply max-w-screen-sm;
-}
+@layer components {
+  .ui-input {
+    @apply text-p2 font-medium bg-light-grey rounded p-input w-full leading-none appearance-none border border-mid-grey transition-input;
+    @apply hover:bg-white hover:shadow-input hover:border-transparent;
+    @apply focus:bg-white focus:shadow-input focus:border-transparent focus:outline-gui-focus;
+    @apply max-w-screen-sm;
+  }
 
-/* Basis for icon component */
-.ui-icon-cool-black {
-  stroke: var(--color-cool-black);
-}
+  /* Basis for icon component */
+  .ui-icon-cool-black {
+    stroke: var(--color-cool-black);
+  }
 
-.ui-icon-white {
-  stroke: var(--color-white);
-}
+  .ui-icon-white {
+    stroke: var(--color-white);
+  }
 
-.ui-icon-dark-grey {
-  stroke: var(--color-dark-grey);
-}
+  .ui-icon-dark-grey {
+    stroke: var(--color-dark-grey);
+  }
 
-.ui-version-tag {
-  @apply inline-block absolute align-top uppercase font-bold whitespace-nowrap;
+  .ui-version-tag {
+    @apply inline-block absolute align-top uppercase font-bold whitespace-nowrap;
 
-  position: relative;
-  vertical-align: super;
-  margin-left: 3px;
-  font-size: 8px;
+    position: relative;
+    vertical-align: super;
+    margin-left: 3px;
+    font-size: 8px;
+  }
 }

package/core/url-base.js

@@ -1 +1 @@
-var DEFAULT_URL_BASE="";var absUrl=function(path){var urlBase=arguments.length>1&&arguments[1]!==void 0?arguments[1]:DEFAULT_URL_BASE;return"".concat(urlBase).concat(path)};export default absUrl;
+const DEFAULT_URL_BASE="";const absUrl=(path,urlBase=DEFAULT_URL_BASE)=>{return`${urlBase}${path}`};export default absUrl;

package/core/utils/syntax-highlighter-registry.js

@@ -1 +1 @@
-import bash from"highlight.js/lib/languages/bash";import cpp from"highlight.js/lib/languages/cpp";import csharp from"highlight.js/lib/languages/csharp";import css from"highlight.js/lib/languages/css";import dart from"highlight.js/lib/languages/dart";import dos from"highlight.js/lib/languages/dos";import diff from"highlight.js/lib/languages/diff";import erlang from"highlight.js/lib/languages/erlang";import elixir from"highlight.js/lib/languages/elixir";import plaintext from"highlight.js/lib/languages/plaintext";import go from"highlight.js/lib/languages/go";import http from"highlight.js/lib/languages/http";import java from"highlight.js/lib/languages/java";import javascript from"highlight.js/lib/languages/javascript";import typescript from"highlight.js/lib/languages/typescript";import json from"highlight.js/lib/languages/json";import objectivec from"highlight.js/lib/languages/objectivec";import php from"highlight.js/lib/languages/php";import python from"highlight.js/lib/languages/python";import ruby from"highlight.js/lib/languages/ruby";import swift from"highlight.js/lib/languages/swift";import kotlin from"highlight.js/lib/languages/kotlin";import sql from"highlight.js/lib/languages/sql";import xml from"highlight.js/lib/languages/xml";import yaml from"highlight.js/lib/languages/yaml";import curl from"highlightjs-curl/src/languages/curl";var registry=[{label:"Text",key:"text",module:plaintext},{label:"JS",key:"javascript",module:javascript},{label:"TS",key:"typescript",module:typescript},{label:"Java",key:"java",module:java},{label:"Ruby",key:"ruby",module:ruby},{label:"Python",key:"python",module:python},{label:"PHP",key:"php",module:php},{label:"Shell",key:"bash",module:bash},{label:"C#",key:"cs",module:csharp},{label:"CSS",key:"css",module:css},{label:"Go",key:"go",module:go},{label:"HTML",key:"xml",module:xml},{label:"HTTP",key:"http",module:http},{label:"C++",key:"cpp",module:cpp},{label:"Dart",key:"dart",module:dart},{label:"Swift",key:"swift",module:swift},{label:"Kotlin",key:"kotlin",module:kotlin},{label:"Objective C",key:"objectivec",module:objectivec},{label:"Node.js",key:"javascript",module:javascript},{label:"JSON",key:"json",module:json},{label:"DOS",key:"dos",module:dos},{label:"YAML",key:"yaml",module:yaml},{label:"Erlang",key:"erlang",module:erlang},{label:"Elixir",key:"elixir",module:elixir},{label:"Diff",key:"diff",module:diff},{label:"SQL",key:"sql",module:sql},{label:"cURL",key:"curl",module:curl},{label:"HTML",key:"html",module:xml},{label:"XML",key:"xml",module:xml}];export default registry;
+import bash from"highlight.js/lib/languages/bash";import cpp from"highlight.js/lib/languages/cpp";import csharp from"highlight.js/lib/languages/csharp";import css from"highlight.js/lib/languages/css";import dart from"highlight.js/lib/languages/dart";import dos from"highlight.js/lib/languages/dos";import diff from"highlight.js/lib/languages/diff";import erlang from"highlight.js/lib/languages/erlang";import elixir from"highlight.js/lib/languages/elixir";import plaintext from"highlight.js/lib/languages/plaintext";import go from"highlight.js/lib/languages/go";import http from"highlight.js/lib/languages/http";import java from"highlight.js/lib/languages/java";import javascript from"highlight.js/lib/languages/javascript";import typescript from"highlight.js/lib/languages/typescript";import json from"highlight.js/lib/languages/json";import objectivec from"highlight.js/lib/languages/objectivec";import php from"highlight.js/lib/languages/php";import python from"highlight.js/lib/languages/python";import ruby from"highlight.js/lib/languages/ruby";import swift from"highlight.js/lib/languages/swift";import kotlin from"highlight.js/lib/languages/kotlin";import sql from"highlight.js/lib/languages/sql";import xml from"highlight.js/lib/languages/xml";import yaml from"highlight.js/lib/languages/yaml";import curl from"highlightjs-curl/src/languages/curl";const registry=[{label:"Text",key:"text",module:plaintext},{label:"JS",key:"javascript",module:javascript},{label:"TS",key:"typescript",module:typescript},{label:"Java",key:"java",module:java},{label:"Ruby",key:"ruby",module:ruby},{label:"Python",key:"python",module:python},{label:"PHP",key:"php",module:php},{label:"Shell",key:"bash",module:bash},{label:"C#",key:"cs",module:csharp},{label:"CSS",key:"css",module:css},{label:"Go",key:"go",module:go},{label:"HTML",key:"xml",module:xml},{label:"HTTP",key:"http",module:http},{label:"C++",key:"cpp",module:cpp},{label:"Dart",key:"dart",module:dart},{label:"Swift",key:"swift",module:swift},{label:"Kotlin",key:"kotlin",module:kotlin},{label:"Objective C",key:"objectivec",module:objectivec},{label:"Node.js",key:"javascript",module:javascript},{label:"JSON",key:"json",module:json},{label:"DOS",key:"dos",module:dos},{label:"YAML",key:"yaml",module:yaml},{label:"Erlang",key:"erlang",module:erlang},{label:"Elixir",key:"elixir",module:elixir},{label:"Diff",key:"diff",module:diff},{label:"SQL",key:"sql",module:sql},{label:"cURL",key:"curl",module:curl},{label:"HTML",key:"html",module:xml},{label:"XML",key:"xml",module:xml}];export default registry;

package/core/utils/syntax-highlighter.css

@@ -1,67 +1,71 @@
-@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");
-
-.hljs {
-  background: var(--syntax-black);
-  color: var(--syntax-light-grey);
+@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");
 }
 
-.hljs-emphasis {
-  @apply italic;
-}
+@layer components {
+  .hljs {
+    background: var(--syntax-black);
+    color: var(--syntax-light-grey);
+  }
 
-.hljs-strong {
-  @apply font-bold;
-}
+  .hljs-emphasis {
+    @apply italic;
+  }
 
-.hljs-comment,
-.hljs-quote {
-  color: var(--syntax-dark-grey);
-}
+  .hljs-strong {
+    @apply font-bold;
+  }
 
-.hljs-variable,
-.hljs-template-variable,
-.hljs-tag,
-.hljs-name,
-.hljs-selector-id,
-.hljs-selector-class,
-.hljs-regexp,
-.hljs-deletion {
-  color: var(--syntax-red);
-}
+  .hljs-comment,
+  .hljs-quote {
+    color: var(--syntax-dark-grey);
+  }
 
-.hljs-number,
-.hljs-built_in,
-.hljs-literal,
-.hljs-type,
-.hljs-params,
-.hljs-meta,
-.hljs-link {
-  color: var(--syntax-orange);
-}
+  .hljs-variable,
+  .hljs-template-variable,
+  .hljs-tag,
+  .hljs-name,
+  .hljs-selector-id,
+  .hljs-selector-class,
+  .hljs-regexp,
+  .hljs-deletion {
+    color: var(--syntax-red);
+  }
 
-.hljs-attribute {
-  color: var(--syntax-yellow);
-}
+  .hljs-number,
+  .hljs-built_in,
+  .hljs-literal,
+  .hljs-type,
+  .hljs-params,
+  .hljs-meta,
+  .hljs-link {
+    color: var(--syntax-orange);
+  }
 
-.hljs-string,
-.hljs-symbol,
-.hljs-bullet,
-.hljs-addition {
-  color: var(--syntax-green);
-}
+  .hljs-attribute {
+    color: var(--syntax-yellow);
+  }
 
-.hljs-title,
-.hljs-section {
-  color: var(--syntax-blue);
-}
+  .hljs-string,
+  .hljs-symbol,
+  .hljs-bullet,
+  .hljs-addition {
+    color: var(--syntax-green);
+  }
 
-.hljs-keyword,
-.hljs-selector-tag {
-  color: var(--syntax-lilac);
-}
+  .hljs-title,
+  .hljs-section {
+    color: var(--syntax-blue);
+  }
+
+  .hljs-keyword,
+  .hljs-selector-tag {
+    color: var(--syntax-lilac);
+  }
 
-.hljs-subst {
-  color: var(--syntax-mid-grey);
+  .hljs-subst {
+    color: var(--syntax-mid-grey);
+  }
 }

package/core/utils/syntax-highlighter.js

@@ -1 +1 @@
-import hljs from"highlight.js/lib/core";var languageToHighlightKey=function(lang){var id;if(!lang){lang="text"}switch(lang.toLowerCase()){case"android":id="java";break;case".net":case"net":case"dotnet":case"csharp":case"c#":id="cs";break;case"objc":case"objective c":id="objectivec";break;case"laravel":id="php";break;case"flutter":id="dart";break;case"node.js":case"js":id="javascript";break;case"ts":id="typescript";break;case"kotlin":case"kt":id="kotlin";break;case"shell":case"fh":case"sh":id="bash";break;case"https":case"http":case"txt":case"plaintext":id="text";break;case"cmd":case"bat":id="dos";break;case"yml":id="yaml";break;case"erl":id="erlang";break;case"patch":id="diff";break;case"svg":id="xml";break;default:break}return id||lang};var registerDefaultLanguages=function(register){register.forEach(function(param){var key=param.key,module=param.module;return hljs.registerLanguage(key,module)})};var highlightSnippet=function(languageKeyword,snippet){var language=languageToHighlightKey(languageKeyword);if(typeof snippet!=="string"||!snippet||!language)return;return hljs.highlight(snippet,{language:language}).value};export{highlightSnippet,languageToHighlightKey,registerDefaultLanguages};
+import hljs from"highlight.js/lib/core";const languageToHighlightKey=lang=>{let id;if(!lang){lang="text"}switch(lang.toLowerCase()){case"android":id="java";break;case".net":case"net":case"dotnet":case"csharp":case"c#":id="cs";break;case"objc":case"objective c":id="objectivec";break;case"laravel":id="php";break;case"flutter":id="dart";break;case"node.js":case"js":id="javascript";break;case"ts":id="typescript";break;case"kotlin":case"kt":id="kotlin";break;case"shell":case"fh":case"sh":id="bash";break;case"https":case"http":case"txt":case"plaintext":id="text";break;case"cmd":case"bat":id="dos";break;case"yml":id="yaml";break;case"erl":id="erlang";break;case"patch":id="diff";break;case"svg":id="xml";break;default:break}return id||lang};const registerDefaultLanguages=register=>{register.forEach(({key,module})=>hljs.registerLanguage(key,module))};const highlightSnippet=(languageKeyword,snippet)=>{const language=languageToHighlightKey(languageKeyword);if(typeof snippet!=="string"||!snippet||!language)return;return hljs.highlight(snippet,{language}).value};export{highlightSnippet,languageToHighlightKey,registerDefaultLanguages};

package/package.json

@@ -1,8 +1,7 @@
 {
   "name": "@ably/ui",
-  "version": "14.0.0-dev.fbce38f",
+  "version": "14.0.1",
   "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.",
-  "type": "module",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/ably/ably-ui.git"
@@ -16,6 +15,7 @@
     "tailwind.extend.js"
   ],
   "devDependencies": {
+    "@mrtkrcm/cypress-plugin-snapshots": "https://github.com/mrtkrcm/cypress-plugin-snapshots#v1.13.0",
     "@storybook/addon-essentials": "^7.6.17",
     "@storybook/addon-interactions": "^7.6.17",
     "@storybook/addon-links": "^7.6.17",
@@ -37,8 +37,6 @@
     "eslint-plugin-storybook": "^0.6.15",
     "msw": "1.3.2",
     "msw-storybook-addon": "^1.10.0",
-    "postcss": "^8.4.35",
-    "postcss-import": "^13.0.0",
     "prettier": "^2.3.0",
     "storybook": "^7.6.4",
     "svg-sprite": "^2.0.4",
@@ -47,7 +45,7 @@
     "vite": "^4.5.2"
   },
   "scripts": {
-    "build:prebuild": "rm -r core reset",
+    "build:prebuild": "rm -rf core reset",
     "build:swc": "swc src/core src/reset -d dist --copy-files --include-dotfiles --strip-leading-paths",
     "build:sprites": "svg-sprite -C .svgrc src/core/icons/*.svg",
     "build:cleanup": "mv dist/* . && rm -r dist",
@@ -63,10 +61,9 @@
     "release": "./scripts/release.sh",
     "start": "vite --port 5000",
     "storybook": "yarn build && storybook dev -p 6006 --no-version-updates",
-    "build-storybook": "storybook build -o preview"
+    "build-storybook": "yarn build && storybook build -o preview"
   },
   "dependencies": {
-    "@mrtkrcm/cypress-plugin-snapshots": "https://github.com/mrtkrcm/cypress-plugin-snapshots#v1.13.0",
     "addsearch-js-client": "^0.7.0",
     "array-flat-polyfill": "^1.0.1",
     "dompurify": "^2.2.9",

package/src/core/Accordion/Accordion.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import Accordion, { AccordionProps } from "./component.tsx";
+import Accordion, { AccordionProps } from "../Accordion";
 
 export default {
   title: "Components/Accordion",