@ably/ui 14.0.0-dev.58ef698 → 14.0.0-dev.64a4085

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.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.58ef698",
+  "version": "14.0.0-dev.64a4085",
   "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"
@@ -47,7 +46,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",

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",

package/src/core/{Accordion/component.tsx → Accordion.tsx}

@@ -1,5 +1,5 @@
 import React, { useState, ReactNode, JSX } from "react";
-import Icon from "../Icon/component.tsx";
+import Icon from "./Icon";
 
 type AccordionData = {
   name: string;
@@ -7,14 +7,14 @@ type AccordionData = {
 };
 
 type AccordionRowProps = {
-  bottomBorder: boolean;
-  topBorder: boolean;
+  bottomBorder?: boolean;
+  topBorder?: boolean;
   active: boolean;
   last: boolean;
   name: string;
   index;
   children: ReactNode;
-  arrowIcon: boolean;
+  arrowIcon?: boolean;
   setActiveIndex: (index: number) => void;
 };
 
@@ -80,7 +80,7 @@ const AccordionRow = ({
         onClick={handleSetIndex}
         className={`flex w-full px-0 focus:outline-none py-20`}
       >
-        <span className="ui-text-p1 font-bold text-left mr-8">{name}</span>
+        <span className="ui-text-p1 !font-bold text-left mr-8">{name}</span>
         <span className="ml-auto">{active ? iconActive : iconInactive}</span>
       </button>
 
@@ -105,7 +105,7 @@ const Accordion = ({
   arrowIcon,
   autoClose,
 }: AccordionProps) => {
-  const [activeIndexes, setActiveIndexes] = useState([]);
+  const [activeIndexes, setActiveIndexes] = useState<number[]>([]);
 
   const handleSetIndex = (index: number) => {
     const currentIndexIsActive = activeIndexes.includes(index);

package/src/core/Code/Code.stories.tsx

@@ -1,4 +1,4 @@
-import Code from "./component.tsx";
+import Code from "../Code";
 
 export default {
   title: "Components/Code",

package/src/core/{Code/component.tsx → Code.tsx}

@@ -1,11 +1,11 @@
 import React from "react";
 
-import "../utils/syntax-highlighter.css";
+import "./utils/syntax-highlighter.css";
 import {
   highlightSnippet,
   registerDefaultLanguages,
-} from "../utils/syntax-highlighter";
-import languagesRegistry from "../utils/syntax-highlighter-registry";
+} from "./utils/syntax-highlighter";
+import languagesRegistry from "./utils/syntax-highlighter-registry";
 
 registerDefaultLanguages(languagesRegistry);
 

package/src/core/{ConnectStateWrapper/component.tsx → ConnectStateWrapper.tsx}

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 
-import { connectState, getRemoteDataStore } from "../remote-data-store";
+import { connectState, getRemoteDataStore } from "./remote-data-store";
 
 /*
   Connect a react component to a global store.

package/src/core/ContactFooter/ContactFooter.stories.tsx

@@ -1,4 +1,4 @@
-import ContactFooter from "./component.tsx";
+import ContactFooter from "../ContactFooter";
 
 export default {
   title: "Components/Contact Footer",

package/src/core/{ContactFooter/component.tsx → ContactFooter.tsx}

@@ -1,9 +1,9 @@
 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";
+import Icon from "./Icon";
+import _absUrl from "./url-base.js";
+import toggleChatWidget from "./hubspot-chat-toggle";
+import "./ContactFooter/component.css";
 
 type ContactFooterProps = {
   urlBase: string;

package/src/core/CookieMessage/CookieMessage.stories.tsx

@@ -1,4 +1,4 @@
-import CookieMessage from "./component.tsx";
+import CookieMessage from "../CookieMessage";
 
 export default {
   title: "Components/Cookie Message",

package/src/core/{CookieMessage/component.tsx → CookieMessage.tsx}

@@ -1,8 +1,8 @@
 import React, { useRef, useEffect, useState } from "react";
 import Cookie from "js-cookie";
-import "./component.css";
 
-import _absUrl from "../url-base";
+import "./CookieMessage/component.css";
+import _absUrl from "./url-base";
 
 const COOKIE_EXPIRY = 365;
 

package/src/core/CustomerLogos/CustomerLogos.stories.tsx

@@ -1,4 +1,4 @@
-import CustomerLogos from "./component.tsx";
+import CustomerLogos from "../CustomerLogos";
 
 import hubspot from "../images/cust-logo-hubspot-mono-pos.svg";
 import webflow from "../images/cust-logo-webflow-col-pos.svg";

package/src/core/DropdownMenu/DropdownMenu.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import Icon from "../Icon/component.tsx";
-import DropdownMenu from "./component.tsx";
+import Icon from "../Icon";
+import DropdownMenu from "../DropdownMenu";
 
 export default {
   title: "Components/Dropdown Menu",

package/src/core/{DropdownMenu/component.tsx → DropdownMenu.tsx}

@@ -7,7 +7,7 @@ import React, {
   ReactNode,
   Dispatch,
 } from "react";
-import Icon from "../Icon/component.tsx";
+import Icon from "./Icon";
 
 const DropdownMenuContext = createContext<{
   isOpen: boolean;

package/src/core/Expander/Expander.stories.tsx

@@ -0,0 +1,118 @@
+import React from "react";
+import Expander from "../Expander";
+
+export default {
+  title: "Components/Expander",
+  component: Expander,
+  tags: ["autodocs"],
+  args: {
+    height: 200,
+  },
+  argTypes: {
+    height: {
+      control: {
+        type: "number",
+      },
+    },
+  },
+};
+
+export const LongContent = {
+  render: () => (
+    <Expander>
+      <div>
+        <p>Ipsum</p>
+        <ul className="mb-16 list-inside list-disc">
+          <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
+          <li>
+            Sed convallis ex pharetra, tristique tellus vel, rhoncus velit.
+          </li>
+          <li>Mauris molestie felis et scelerisque ullamcorper.</li>
+          <li>Maecenas congue ligula ut commodo tristique.</li>
+          <li>
+            Pellentesque venenatis elit vitae urna condimentum, in mollis arcu
+            venenatis.
+          </li>
+          <li>Donec nec turpis vel urna egestas fringilla.</li>
+        </ul>
+        <p>Ipsum</p>
+        <ul className="mb-16 list-inside list-disc">
+          <li>Mauris ut nibh vel metus cursus semper.</li>
+          <li>Ut mattis tortor eu urna accumsan gravida.</li>
+          <li>Nunc pellentesque neque at elit pretium tempor.</li>
+          <li>Curabitur finibus magna vitae nunc varius fermentum.</li>
+        </ul>
+        <ul className="mb-16 list-inside list-disc">
+          <li>
+            Curabitur vehicula mi iaculis, luctus augue eu, venenatis quam.
+          </li>
+          <li>Praesent in eros efficitur, consequat ante eu, faucibus arcu.</li>
+          <li>Nulla laoreet nibh a odio interdum, non molestie diam auctor.</li>
+        </ul>
+        <p>Ipsum</p>
+        <ul className="mb-16 list-inside list-disc">
+          <li>
+            Praesent aliquam diam tincidunt, sollicitudin tortor eget, vulputate
+            lacus.
+          </li>
+          <li>Quisque in mi sed ex vulputate varius in a leo.</li>
+          <li>Etiam posuere dolor at tortor aliquam imperdiet.</li>
+          <li>
+            Maecenas quis neque consequat, ultricies est sit amet, congue est.
+          </li>
+          <li>Aenean a elit sed nibh pretium lacinia sed convallis sapien.</li>
+        </ul>
+        <p>Ipsum</p>
+        <ul className="mb-16 list-inside list-disc">
+          <li>
+            Nulla malesuada libero id dolor aliquam, non sagittis mi
+            scelerisque.
+          </li>
+          <li>
+            Etiam tincidunt lacus eu diam laoreet consectetur sit amet non est.
+          </li>
+          <li>In porta arcu nec purus tincidunt vulputate.</li>
+        </ul>
+      </div>
+    </Expander>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "A larger amount of content that exceeds the height cut-off, controls shown.",
+      },
+    },
+  },
+};
+
+export const ShortContent = {
+  render: () => (
+    <Expander>
+      <div>
+        <p>Ipsum</p>
+        <ul className="mb-16 list-inside list-disc">
+          <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
+          <li>
+            Sed convallis ex pharetra, tristique tellus vel, rhoncus velit.
+          </li>
+          <li>Mauris molestie felis et scelerisque ullamcorper.</li>
+          <li>Maecenas congue ligula ut commodo tristique.</li>
+          <li>
+            Pellentesque venenatis elit vitae urna condimentum, in mollis arcu
+            venenatis.
+          </li>
+          <li>Donec nec turpis vel urna egestas fringilla.</li>
+        </ul>
+      </div>
+    </Expander>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "A smaller amount of content that doesn't exceed the height cut-off, therefore no controls shown.",
+      },
+    },
+  },
+};

package/src/core/Expander.tsx

@@ -0,0 +1,46 @@
+import React, { PropsWithChildren, useEffect, useRef, useState } from "react";
+
+type ExpanderProps = {
+  height?: number;
+};
+
+const Expander = ({
+  height = 200,
+  children,
+}: PropsWithChildren<ExpanderProps>) => {
+  const innerRef = useRef<HTMLDivElement>(null);
+  const [contentHeight, setContentHeight] = useState(height);
+  const [expanded, setExpanded] = useState(false);
+
+  useEffect(() => {
+    setContentHeight(innerRef.current?.clientHeight ?? height);
+  }, [height, expanded]);
+
+  const showControls = contentHeight > height;
+
+  return (
+    <>
+      <div
+        style={{ height: expanded ? contentHeight : height }}
+        className="overflow-hidden transition-all relative"
+      >
+        {showControls && !expanded && (
+          <div className="h-64 w-full bg-gradient-to-t from-white to-transparent absolute bottom-0"></div>
+        )}
+        <div ref={innerRef}>{children}</div>
+      </div>
+      {showControls && (
+        <div
+          onClick={() => setExpanded(!expanded)}
+          onKeyDown={(e) => e.key === "Enter" && setExpanded(!expanded)}
+          tabIndex={0}
+          className="mt-16 cursor-pointer font-bold text-gui-blue-default-light hover:text-gui-blue-hover-light active:text-gui-blue-active-light focus:text-gui-blue-focus"
+        >
+          {expanded ? "View less -" : "View all +"}
+        </div>
+      )}
+    </>
+  );
+};
+
+export default Expander;

package/src/core/FeaturedLink/FeaturedLink.stories.tsx

@@ -1,4 +1,4 @@
-import FeaturedLink from "./component.tsx";
+import FeaturedLink from "../FeaturedLink";
 
 export default {
   title: "Components/Featured Link",

package/src/core/{FeaturedLink/component.tsx → FeaturedLink.tsx}

@@ -1,6 +1,6 @@
 import React, { CSSProperties, ReactNode } from "react";
 
-import Icon from "../Icon/component.tsx";
+import Icon from "./Icon";
 
 type FeaturedLinkProps = {
   url: string;

package/src/core/Flash/Flash.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import Flash, { reducerFlashes } from "./component.tsx";
+import Flash, { reducerFlashes } from "../Flash";
 
 import {
   attachStoreToWindow,

package/src/core/{Flash/component.tsx → Flash.tsx}

@@ -2,10 +2,10 @@ 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";
+import { getRemoteDataStore } from "./remote-data-store.js";
+import ConnectStateWrapper from "./ConnectStateWrapper";
+import Icon from "./Icon";
+import "./Flash/component.css";
 
 type FlashProps = {
   id: string;

package/src/core/Footer/Footer.stories.tsx

@@ -1,4 +1,4 @@
-import Footer from "./component.tsx";
+import Footer from "../Footer";
 
 import ablyStack from "../images/ably-stack.svg";
 import highestPerformer from "../images/high-performer-2023.svg";

package/src/core/{Footer/component.tsx → Footer.tsx}

@@ -1,8 +1,8 @@
 import React from "react";
 
-import Icon from "../Icon/component.tsx";
-import _absUrl from "../url-base.js";
-import "./component.css";
+import Icon from "./Icon";
+import _absUrl from "./url-base.js";
+import "./Footer/component.css";
 
 type FooterProps = {
   paths: {

package/src/core/Icon/Icon.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import Icon from "./component.tsx";
+import Icon from "../Icon";
 
 export default {
   title: "Components/Icon",
@@ -38,6 +38,7 @@ const coreIcons = [
   "icon-gui-link-arrow",
   "icon-gui-live-chat",
   "icon-gui-minus",
+  "icon-gui-partial",
   "icon-gui-plus",
   "icon-gui-quote-marks-solid",
   "icon-gui-refresh",

package/src/core/Loader/Loader.stories.tsx

@@ -1,4 +1,4 @@
-import Loader from "./component.tsx";
+import Loader from "../Loader";
 
 export default {
   title: "Components/Loader",

package/src/core/Logo/Logo.stories.tsx

@@ -1,4 +1,4 @@
-import Logo from "./component.tsx";
+import Logo from "../Logo";
 import logoUrl from "../images/ably-logo.png";
 
 export default {

package/src/core/Meganav/Meganav.stories.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from "react";
 import { rest } from "msw";
 
-import Meganav from "./component.tsx";
+import Meganav from "../Meganav";
 import loadIcons from "../icons.js";
 import logo from "../images/ably-logo.png";
 import ablyStack from "../images/ably-stack.svg";

package/src/core/{Meganav/component.tsx → Meganav.tsx}

@@ -1,24 +1,22 @@
 import React, { ReactNode, useEffect, useState } from "react";
 
-import { connectState } from "../remote-data-store.js";
-import { selectSessionData } from "../remote-session-data.js";
-
-import Logo from "../Logo/component.tsx";
-import "./component.css";
-
-import MeganavScripts from "./component.js";
-import MeganavItemsDesktop from "../MeganavItemsDesktop/component.tsx";
-import MeganavItemsSignedIn from "../MeganavItemsSignedIn/component.tsx";
-import MeganavItemsMobile from "../MeganavItemsMobile/component.tsx";
-import Notice from "../Notice/component.tsx";
-import MeganavData from "./component.json";
-import _absUrl from "../url-base.js";
-
-import MeganavContentProducts from "../MeganavContentProducts/component.tsx";
-import MeganavContentUseCases from "../MeganavContentUseCases/component.tsx";
-import MeganavContentCompany from "../MeganavContentCompany/component.tsx";
-import MeganavContentDevelopers from "../MeganavContentDevelopers/component.tsx";
-import MeganavSearch from "../MeganavSearch/component.tsx";
+import { connectState } from "./remote-data-store.js";
+import { selectSessionData } from "./remote-session-data.js";
+
+import Logo from "./Logo";
+import "./Meganav/component.css";
+import MeganavData from "./Meganav/component.json";
+import MeganavScripts from "./Meganav/component.js";
+import MeganavItemsDesktop from "./MeganavItemsDesktop";
+import MeganavItemsSignedIn from "./MeganavItemsSignedIn";
+import MeganavItemsMobile from "./MeganavItemsMobile";
+import Notice from "./Notice";
+import _absUrl from "./url-base.js";
+import MeganavContentProducts from "./MeganavContentProducts";
+import MeganavContentUseCases from "./MeganavContentUseCases";
+import MeganavContentCompany from "./MeganavContentCompany";
+import MeganavContentDevelopers from "./MeganavContentDevelopers";
+import MeganavSearch from "./MeganavSearch";
 
 export type MeganavTheme = {
   backgroundColor?: string;

package/src/core/{MeganavBlogPostsList/component.tsx → MeganavBlogPostsList.tsx}

@@ -1,7 +1,7 @@
 import React from "react";
 
-import FeaturedLink from "../FeaturedLink/component.tsx";
-import { AbsUrl } from "../Meganav/component.tsx";
+import FeaturedLink from "./FeaturedLink";
+import { AbsUrl } from "./Meganav";
 
 type MeganavBlogPostsListProps = {
   recentBlogPosts: {

package/src/core/{MeganavContentCompany/component.tsx → MeganavContentCompany.tsx}

@@ -1,10 +1,10 @@
 import React from "react";
 
-import MeganavBlogPostsList from "../MeganavBlogPostsList/component.tsx";
-import ConnectStateWrapper from "../ConnectStateWrapper/component.tsx";
-import { selectRecentBlogPosts } from "../remote-blogs-posts.js";
-import Icon from "../Icon/component.tsx";
-import { AbsUrl } from "../Meganav/component.tsx";
+import MeganavBlogPostsList from "./MeganavBlogPostsList";
+import ConnectStateWrapper from "./ConnectStateWrapper";
+import { selectRecentBlogPosts } from "./remote-blogs-posts.js";
+import Icon from "./Icon";
+import { AbsUrl } from "./Meganav";
 
 type MeganavContentCompanyProps = {
   absUrl: AbsUrl;

package/src/core/{MeganavContentDevelopers/component.tsx → MeganavContentDevelopers.tsx}

@@ -1,7 +1,7 @@
 import React from "react";
 
-import Icon from "../Icon/component.tsx";
-import { AbsUrl } from "../Meganav/component.tsx";
+import Icon from "./Icon";
+import { AbsUrl } from "./Meganav";
 
 const MeganavContentDevelopers = ({ absUrl }: { absUrl: AbsUrl }) => (
   <div className="flex max-w-screen-xl mx-auto">

package/src/core/{MeganavContentProducts/component.tsx → MeganavContentProducts.tsx}

@@ -1,7 +1,7 @@
 import React from "react";
 
-import FeaturedLink from "../FeaturedLink/component.tsx";
-import { AbsUrl } from "../Meganav/component.tsx";
+import FeaturedLink from "./FeaturedLink";
+import { AbsUrl } from "./Meganav";
 
 type MeganavContentProductsProps = {
   paths: {

package/src/core/{MeganavContentUseCases/component.tsx → MeganavContentUseCases.tsx}

@@ -1,7 +1,7 @@
 import React from "react";
 
-import Icon from "../Icon/component.tsx";
-import { AbsUrl } from "../Meganav/component.tsx";
+import Icon from "./Icon";
+import { AbsUrl } from "./Meganav";
 
 const MeganavContentUseCases = ({ absUrl }: { absUrl: AbsUrl }) => (
   <div className="flex max-w-screen-xl mx-auto">

package/src/core/{MeganavControl/component.tsx → MeganavControl.tsx}

@@ -1,7 +1,7 @@
 import React, { ReactNode } from "react";
 
-import Icon from "../Icon/component.tsx";
-import { MeganavTheme } from "../Meganav/component.tsx";
+import Icon from "./Icon";
+import { MeganavTheme } from "./Meganav";
 
 type MeganavControlProps = {
   ariaControls: string;