@ably/ui 11.7.1-dev.d65c98c → 12.0.0-dev.31bc8d9

package/src/core/MeganavContentDevelopers/component.html.erb

@@ -1,129 +0,0 @@
-<div class="flex max-w-screen-xl mx-auto">
-  <div class="ui-meganav-content-spacer"></div>
-  <section class="grid grid-cols-12 ui-grid-gap-x w-full">
-    <div class="col-span-full md:col-span-4 pt-24 md:py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24">
-      <h3 class="ui-meganav-overline uppercase" id="meganav-developers-panel-explore">
-        Explore
-      </h3>
-      <ul aria-labelledby="meganav-developers-panel-explore">
-        <li>
-          <%= link_to abs_url("/docs"), class: "ui-meganav-media-with-image group" do %>
-            <%= render(AblyUi::Core::Icon.new(name: "icon-display-docs-col", size: "2.5rem")) %>
-            <div class="flex flex-col justify-center">
-              <p class="ui-meganav-media-heading">Documentation</p>
-              <p class="ui-meganav-media-copy">Technical guides to help you build with Ably.</p>
-            </div>
-          <% end %>
-        </li>
-        <li>
-          <%= link_to abs_url("/docs/quick-start-guide"), class: "ui-meganav-media-with-image group" do %>
-            <%= render(AblyUi::Core::Icon.new(name: "icon-display-quickstart-guides-col", size: "2.5rem")) %>
-            <div class="flex flex-col justify-center">
-              <p class="ui-meganav-media-heading">Quickstart guides</p>
-              <p class="ui-meganav-media-copy">Documentation to help you get started quickly.</p>
-            </div>
-          <% end %>
-        </li>
-        <li>
-          <%= link_to abs_url("/integrations"), class: "ui-meganav-media-with-image group" do %>
-            <%= render(AblyUi::Core::Icon.new(name: "icon-display-integrations-col", size: "2.5rem")) %>
-            <div class="flex flex-col justify-center">
-              <p class="ui-meganav-media-heading">Integrations</p>
-              <p class="ui-meganav-media-copy">Find out more about Ably integrations. </p>
-            </div>
-          <% end %>
-        </li>
-        <li>
-          <%= link_to abs_url("/examples"), class: "ui-meganav-media-with-image group" do %>
-            <%= render(AblyUi::Core::Icon.new(name: "icon-display-examples-col", size: "2.5rem")) %>
-            <div class="flex flex-col justify-center">
-              <p class="ui-meganav-media-heading">Live examples</p>
-              <p class="ui-meganav-media-copy">Discover our features and their use cases.</p>
-            </div>
-          <% end %>
-        </li>
-      </ul>
-    </div>
-    <div class="col-span-full md:col-span-4 pb-8 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0">
-      <ul class="md:mt-40" aria-labelledby="meganav-developers-panel-explore">
-        <li>
-          <%= link_to abs_url("/docs/sdks"), class: "ui-meganav-media-with-image group" do %>
-            <%= render(AblyUi::Core::Icon.new(name: "icon-display-sdks-col", size: "2.5rem")) %>
-            <div class="flex flex-col justify-center">
-              <p class="ui-meganav-media-heading">SDKs</p>
-              <p class="ui-meganav-media-copy">Download an SDK to help you build realtime apps faster.</p>
-            </div>
-          <% end %>
-        </li>
-        <li>
-          <%= link_to abs_url("/tutorials"), class: "ui-meganav-media-with-image group" do %>
-            <%= render(AblyUi::Core::Icon.new(name: "icon-display-tutorials-demos-col", size: "2.5rem")) %>
-            <div class="flex flex-col justify-center">
-              <p class="ui-meganav-media-heading">Tutorials & Demos</p>
-              <p class="ui-meganav-media-copy">Get stuck in with our hands-on resources. </p>
-            </div>
-          <% end %>
-        </li>
-        <li>
-          <%= link_to abs_url("/reference-guide-chat"), class: "ui-meganav-media-with-image group" do %>
-            <%= render(AblyUi::Core::Icon.new(name: "icon-display-chat-col", size: "2.5rem")) %>
-            <div class="flex flex-col justify-center">
-              <p class="ui-meganav-media-heading">Chat apps reference guide</p>
-              <p class="ui-meganav-media-copy">Learn how to build chat apps with Ably.</p>
-            </div>
-          <% end %>
-        </li>
-        <li>
-          <%= link_to abs_url("/reference-guide-multiplayer"), class: "ui-meganav-media-with-image group" do %>
-            <%= render(AblyUi::Core::Icon.new(name: "icon-multi-user-spaces-col", size: "2.5rem")) %>
-            <div class="flex flex-col justify-center">
-              <p class="ui-meganav-media-heading">Multiplayer reference guide</p>
-              <p class="ui-meganav-media-copy">Learn how to build collaborative features with Ably.</p>
-            </div>
-          <% end %>
-        </li>
-      </ul>
-    </div>
-    <div class="col-span-full md:col-span-4 pt-8 pb-24 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0">
-      <h3 class="ui-meganav-overline uppercase" id="meganav-developers-panel-quick-links">
-        Quick links
-      </h3>
-      <ul aria-labelledby="meganav-developers-panel-quick-links">
-        <li>
-          <%= link_to "https://discord.gg/jwBPhEZ9g5", class: "group ui-meganav-media py-12" do %>
-            <p class="ui-meganav-media-heading">Discord</p>
-          <% end %>
-        </li>
-        <li>
-          <%= link_to "https://github.com/ably", class: "group ui-meganav-media py-12" do %>
-            <p class="ui-meganav-media-heading">GitHub</p>
-          <% end %>
-        </li>
-        <li>
-          <%= link_to "https://changelog.ably.com/", class: "group ui-meganav-media py-12" do %>
-            <p class="ui-meganav-media-heading">Changelog</p>
-          <% end %>
-        </li>
-        <li>
-          <a href="https://status.ably.com/" class="group ui-meganav-media py-12">
-            <p class="ui-meganav-media-heading">
-              Status<iframe
-                src="https://status.ably.com/embed/icon"
-                allowtransparency="true"
-                frameborder="0"
-                scrolling="no"
-                class="w-24 h-24 ml-4 border-none pointer-events-none align-middle"
-              ></iframe>
-            </p>
-          </a>
-        </li>
-        <li>
-          <%= link_to abs_url("/support"), class: "group ui-meganav-media py-12" do %>
-            <p class="ui-meganav-media-heading">Support & FAQs</p>
-          <% end %>
-        </li>
-      </ul>
-    </div>
-  </section>
-  <div class="ui-meganav-content-spacer"></div>
-</div>

package/src/core/MeganavContentDevelopers/component.rb

@@ -1,13 +0,0 @@
-module AblyUi
-  module Core
-    class MeganavContentDevelopers < ViewComponent::Base
-      include AblyUi::Core::Util
-
-      attr_reader :url_base
-
-      def initialize(url_base:)
-        @url_base = url_base
-      end
-    end
-  end
-end

package/src/core/MeganavContentProducts/component.html.erb

@@ -1,83 +0,0 @@
-<div class="flex max-w-screen-xl mx-auto">
-  <div class="ui-meganav-content-spacer bg-extra-light-grey"></div>
-  <section class="grid grid-cols-12 ui-grid-gap-x w-full">
-    <div class="col-span-full md:col-span-4 py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24 bg-extra-light-grey">
-      <div class="flex mb-20">
-        <%= image_tag(ably_stack_path, alt: "Ably homepage") %>
-        <h3 class="ui-meganav-overline ml-24">The Ably Platform</h3>
-      </div>
-
-      <p class="text-p2 font-bold text-cool-black mb-24 leading-normal" style="max-width: 330px">
-        Easily power any realtime experience in your application. No complex infrastructure to manage or provision. Just a simple API that handles everything
-        realtime, and lets you focus on your code.
-      </p>
-
-      <%= render(AblyUi::Core::FeaturedLink.new(url: abs_url("/platform"), text_size: 'text-p2')) do %>Explore how it works<% end %>
-    </div>
-
-    <div class="col-span-full md:col-span-4 pt-24 pb-8 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white">
-      <h3 class="ui-meganav-overline" id="meganav-products-panel-list-examples">
-        Products
-      </h3>
-      <ul class="mb-16" aria-labelledby="meganav-products-panel-list-examples">
-        <li>
-          <%= link_to abs_url("/solutions/channels"), class: "ui-meganav-media group" do %>
-            <p class="ui-meganav-media-heading">Pub/Sub Channels</p>
-            <p class="ui-meganav-media-copy">Build infinitely scalable realtime applications.</p>
-          <% end %>
-        </li>
-        <li>
-          <%= link_to abs_url("/spaces"), class: "ui-meganav-media group" do %>
-            <p class="ui-meganav-media-heading">Spaces (Beta)</p>
-            <p class="ui-meganav-media-copy">Create multi-user collaborative environments.</p>
-          <% end %>
-        </li>
-        <li>
-          <%= link_to abs_url("/livesync"), class: "ui-meganav-media group" do %>
-            <p class="ui-meganav-media-heading">LiveSync (Pre release)</p>
-            <p class="ui-meganav-media-copy">Keep clients in sync with any relational database.</p>
-          <% end %>
-        </li>
-      </ul>
-    </div>
-
-    <div class="col-span-full md:col-span-4 pt-8 pb-24 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white">
-      <h3 class="ui-meganav-overline" id="meganav-products-panel-list-our-technology">Technology</h3>
-      <ul class="mb-16" aria-labelledby="meganav-products-panel-list-our-technology">
-        <li>
-          <%= link_to abs_url("/four-pillars-of-dependability#performance"), class: "ui-meganav-media group" do %>
-            <p class="ui-meganav-media-heading">Predictable performance</p>
-            <p class="ui-meganav-media-copy">A low-latency and high-throughput global network.</p>
-          <% end %>
-        </li>
-        <li>
-          <%= link_to abs_url("/four-pillars-of-dependability#integrity"), class: "ui-meganav-media group" do %>
-            <p class="ui-meganav-media-heading">Guaranteed ordering & delivery</p>
-            <p class="ui-meganav-media-copy">Data is delivered - in order - even after disconnections.</p>
-          <% end %>
-        </li>
-        <li>
-          <%= link_to abs_url("/four-pillars-of-dependability#reliability"), class: "ui-meganav-media group" do %>
-            <p class="ui-meganav-media-heading">Fault tolerant infrastructure</p>
-            <p class="ui-meganav-media-copy">Redundancy is built in at global and regional levels.</p>
-          <% end %>
-        </li>
-        <li>
-          <%= link_to abs_url("/four-pillars-of-dependability#availability"), class: "ui-meganav-media group" do %>
-            <p class="ui-meganav-media-heading">High scalability & availability</p>
-            <p class="ui-meganav-media-copy">Built for scale with legitimate 99.999% uptime SLAs.</p>
-          <% end %>
-        </li>
-        <li>
-          <%= link_to abs_url("/network"), class: "ui-meganav-media group" do %>
-            <p class="ui-meganav-media-heading">Global edge network</p>
-            <p class="ui-meganav-media-copy">An edge network of 15 core routing datacenters and 205+ PoPs.</p>
-          <% end %>
-        </li>
-      </ul>
-
-      <%= render(AblyUi::Core::FeaturedLink.new(url: abs_url("/four-pillars-of-dependability"), text_size: 'text-p3')) do %>Explore Four Pillars of Dependability<% end %>
-    </div>
-  </section>
-  <div class="ui-meganav-content-spacer"></div>
-</div>

package/src/core/MeganavContentProducts/component.rb

@@ -1,14 +0,0 @@
-module AblyUi
-  module Core
-    class MeganavContentProducts < ViewComponent::Base
-      include SharedAssets
-      include Util
-
-      attr_reader :url_base
-
-      def initialize(url_base:)
-        @url_base = url_base
-      end
-    end
-  end
-end

package/src/core/MeganavContentUseCases/component.html.erb

@@ -1,135 +0,0 @@
-<div class="flex max-w-screen-xl mx-auto">
-  <div class="ui-meganav-content-spacer bg-extra-light-grey"></div>
-  <section class="grid grid-cols-12 ui-grid-gap-x w-full">
-    <div class="col-span-full md:col-span-4 py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24 bg-extra-light-grey">
-      <h3 class="ui-meganav-overline" id="meganav-use-cases-panel-use-cases">
-          Solutions
-        </h3>
-      <ul aria-labelledby="meganav-use-cases-panel-industry-use-cases">
-
-        <li>
-          <%= link_to abs_url("/solutions/chat"), class: "ui-meganav-media-with-image group" do %>
-            <%= render(AblyUi::Core::Icon.new(name: "icon-display-chat-stack-col", size: "2.5rem")) %>
-            <div class="flex flex-col justify-center">
-              <p class="ui-meganav-media-heading">Live Chat</p>
-              <p class="ui-meganav-media-copy">Deliver highly reliable chat experiences at scale.</p>
-            </div>
-          <% end %>
-        </li>
-        <li>
-          <%= link_to abs_url("/solutions/multiplayer-collaboration"), class: "ui-meganav-media-with-image group" do %>
-            <%= render(AblyUi::Core::Icon.new(name: "icon-multi-user-spaces-col", size: "2.5rem")) %>
-            <div class="flex flex-col justify-center">
-              <p class="ui-meganav-media-heading">Multiplayer Collaboration</p>
-              <p class="ui-meganav-media-copy">Bring collaborative multiplayer experiences to your users.</p>
-            </div>
-          <% end %>
-        </li>
-        <li>
-          <%= link_to abs_url("/solutions/data-broadcast"), class: "ui-meganav-media-with-image group" do %>
-            <%= render(AblyUi::Core::Icon.new(name: "icon-display-data-broadcast-col", size: "2.5rem")) %>
-            <div class="flex flex-col justify-center">
-              <p class="ui-meganav-media-heading">Data Broadcast</p>
-              <p class="ui-meganav-media-copy">Broadcast realtime event data to millions of devices around the globe.</p>
-            </div>
-          <% end %>
-        </li>
-        <li>
-          <%= link_to abs_url("/solutions/data-synchronization"), class: "ui-meganav-media-with-image group" do %>
-            <%= render(AblyUi::Core::Icon.new(name: "icon-display-data-synchronization-col", size: "2.5rem")) %>
-            <div class="flex flex-col justify-center">
-              <p class="ui-meganav-media-heading">Data Synchronization</p>
-              <p class="ui-meganav-media-copy">Keep your frontend and backend in realtime sync, at global scale.</p>
-            </div>
-          <% end %>
-        </li>
-         <li>
-          <%= link_to abs_url("/push-notifications"), class: "ui-meganav-media-with-image group" do %>
-            <%= render(AblyUi::Core::Icon.new(name: "icon-display-push-notifications-col", size: "2.5rem")) %>
-            <div class="flex flex-col justify-center">
-              <p class="ui-meganav-media-heading">Notifications</p>
-              <p class="ui-meganav-media-copy">Deliver cross-platform push notifications with a simple unified API.</p>
-            </div>
-          <% end %>
-        </li>
-        <li>
-          <%= link_to abs_url("/solutions/asset-tracking"), class: "ui-meganav-media-with-image group" do %>
-            <%= render(AblyUi::Core::Icon.new(name: "icon-display-asset-tracking-col", size: "2.5rem")) %>
-            <div class="flex flex-col justify-center">
-              <p class="ui-meganav-media-heading">Asset Tracking (Beta)</p>
-              <p class="ui-meganav-media-copy">Track assets in realtime with a solution optimised for last mile logistics.</p>
-            </div>
-          <% end %>
-        </li>
-      </ul>
-    </div>
-
-    <div class="col-span-full md:col-span-4 pt-24 pb-0 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white">
-      <h3 class="ui-meganav-overline" id="meganav-use-cases-panel-industry">
-        Industry
-      </h3>
-      <ul aria-labelledby="meganav-use-cases-panel-industry">
-        <li>
-          <%= link_to abs_url("/solutions/edtech"), class: "ui-meganav-media group" do %>
-            <p class="ui-meganav-media-heading">EdTech</p>
-            <p class="ui-meganav-media-copy">Deliver interactive learning experiences.</p>
-          <% end %>
-        </li>
-        <li>
-          <%= link_to abs_url("/solutions/fintech"), class: "ui-meganav-media group" do %>
-            <p class="ui-meganav-media-heading">FinTech</p>
-            <p class="ui-meganav-media-copy">Deliver personalised financial data in realtime.</p>
-          <% end %>
-        </li>
-        <li>
-          <%= link_to abs_url("/solutions/automotive-logistics-and-mobility"), class: "ui-meganav-media group" do %>
-            <p class="ui-meganav-media-heading">Automotive, Logistics, & Mobility</p>
-            <p class="ui-meganav-media-copy">Power diagnostics, order tracking and more.</p>
-          <% end %>
-        </li>
-        <li>
-          <%= link_to abs_url("/solutions/b2b-platforms"), class: "ui-meganav-media group" do %>
-            <p class="ui-meganav-media-heading">B2B Platforms</p>
-            <p class="ui-meganav-media-copy">Empower your customers with realtime solutions.</p>
-          <% end %>
-        </li>
-        <li>
-          <%= link_to abs_url("/solutions/healthcare"), class: "ui-meganav-media group" do %>
-            <p class="ui-meganav-media-heading">Healthcare (HIPAA)</p>
-            <p class="ui-meganav-media-copy">Provide trustworthy, HIPAA-compliant realtime apps.</p>
-          <% end %>
-        </li>
-      </ul>
-    </div>
-
-    <div class="col-span-full md:col-span-4 pt-0 pb-24 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white">
-      <ul aria-labelledby="meganav-use-cases-panel-solutions" class="mt-0 md:mt-40">
-        <li>
-          <%= link_to abs_url("/solutions/ecommerce-and-retail"), class: "ui-meganav-media group" do %>
-            <p class="ui-meganav-media-heading">eCommerce & Retail</p>
-            <p class="ui-meganav-media-copy">Enrich customer experiences with realtime updates.</p>
-          <% end %>
-        </li>
-        <li>
-          <%= link_to abs_url("/solutions/sports-and-media"), class: "ui-meganav-media group" do %>
-            <p class="ui-meganav-media-heading">Sports, Media & Audience Engagement</p>
-            <p class="ui-meganav-media-copy">Deliver engaging global realtime experiences.</p>
-          <% end %>
-        </li>
-        <li>
-          <%= link_to abs_url("/solutions/gaming"), class: "ui-meganav-media group" do %>
-            <p class="ui-meganav-media-heading">Gaming</p>
-            <p class="ui-meganav-media-copy">Power ultra fast and reliable gaming experiences.</p>
-          <% end %>
-        </li>
-        <li>
-          <%= link_to abs_url("/solutions/iot-and-connected-devices"), class: "ui-meganav-media group" do %>
-            <p class="ui-meganav-media-heading">IoT & Connected Devices</p>
-            <p class="ui-meganav-media-copy">Monitor and control global IoT deployments in realtime.</p>
-          <% end %>
-        </li>
-      </ul>
-    </div>
-  </section>
-  <div class="ui-meganav-content-spacer"></div>
-</div>

package/src/core/MeganavContentUseCases/component.rb

@@ -1,13 +0,0 @@
-module AblyUi
-  module Core
-    class MeganavContentUseCases < ViewComponent::Base
-      include Util
-
-      attr_reader :url_base
-
-      def initialize(url_base:)
-        @url_base = url_base
-      end
-    end
-  end
-end

package/src/core/MeganavControl/component.html.erb

@@ -1,6 +0,0 @@
-<%= button_tag(type: "button",
-               class: ["ui-meganav-link", "h-64", "flex", "items-center", "group", theme(:text_color), additional_css],
-               data: { id: "meganav-control" },
-               aria: { expanded: false, controls: aria_controls, label: "Show #{aria_label} panel" }) do -%>
-  <%= content -%><%= render(AblyUi::Core::Icon.new(name: "icon-gui-disclosure-arrow", size: "1.5rem", color: "text-cool-black", additional_css: "transform rotate-90 group-hover:text-gui-hover group-focus:text-gui-focus")) %>
-<% end %>

package/src/core/MeganavControl/component.rb

@@ -1,20 +0,0 @@
-module AblyUi
-  module Core
-    class MeganavControl < ViewComponent::Base
-      include AblyUi::Core::MeganavConfig
-      attr_reader :aria_controls, :aria_label, :additional_css
-
-      def initialize(
-        aria_controls:,
-        aria_label:,
-        theme_name:,
-        additional_css: ''
-      )
-        @aria_controls = aria_controls
-        @aria_label = aria_label
-        @additional_css = additional_css
-        theme_setup(theme_name)
-      end
-    end
-  end
-end

package/src/core/MeganavControlMobileDropdown/component.html.erb

@@ -1,7 +0,0 @@
-<%= button_tag(type: "button",
-               class: "block ml-24 mr-0 px-0 py-16 hover:text-gui-hover focus:text-gui-focus focus:outline-none",
-               data: { id: "meganav-control-mobile-dropdown" },
-               aria: { expanded: false, controls: "meganav-mobile-dropdown" }) do %>
-  <%= render(AblyUi::Core::Icon.new(name: "icon-gui-burger-menu", size: "1.5rem", color: theme(:mobile_menu_color), additional_css: "transition-colors", data: { id: "meganav-control-mobile-dropdown-menu" })) %>
-  <%= render(AblyUi::Core::Icon.new(name: "icon-gui-close", size: "1.5rem", color: theme(:mobile_menu_color), additional_css: "transition-colors hidden", data: { id: "meganav-control-mobile-dropdown-close" })) %>
-<% end %>

package/src/core/MeganavControlMobileDropdown/component.rb

@@ -1,11 +0,0 @@
-module AblyUi
-  module Core
-    class MeganavControlMobileDropdown < ViewComponent::Base
-      include AblyUi::Core::MeganavConfig
-
-      def initialize(theme_name:)
-        theme_setup(theme_name)
-      end
-    end
-  end
-end

package/src/core/MeganavControlMobilePanelClose/component.html.erb

@@ -1,12 +0,0 @@
-<div class="mx-24 md:mx-32">
-  <%= button_tag(type: "button",
-                 class: "ui-meganav-mobile-link text-gui-default mb-16",
-                 data: { id: "meganav-control-mobile-panel-close" },
-                 aria: { expanded: false, controls: aria_controls, label: "Hide panel" }) do -%>
-    <%= render(AblyUi::Core::Icon.new(name: "icon-gui-disclosure-arrow", size: "1.5rem", color: "text-cool-black", additional_css: "relative -top-1 transform rotate-180")) %>
-    Back
-  <% end %>
-  <% if display_hr %>
-    <hr class="ui-meganav-hr" />
-  <% end %>
-</div>

package/src/core/MeganavControlMobilePanelClose/component.rb

@@ -1,12 +0,0 @@
-module AblyUi
-  module Core
-    class MeganavControlMobilePanelClose < ViewComponent::Base
-      attr_reader :aria_controls, :display_hr
-
-      def initialize(aria_controls:, display_hr: true)
-        @aria_controls = aria_controls
-        @display_hr = display_hr
-      end
-    end
-  end
-end

package/src/core/MeganavControlMobilePanelOpen/component.html.erb

@@ -1,7 +0,0 @@
-<%= button_tag(type: "button",
-               class: "ui-meganav-mobile-link",
-               data: { id: "meganav-control-mobile-panel-open" },
-               aria: { expanded: false, controls: @aria_controls, label: "Show #{content}" }) do %>
-  <%= content %>
-  <%= render(AblyUi::Core::Icon.new(name: "icon-gui-disclosure-arrow", size: "1.5rem", color: "text-cool-black", additional_css: "relative -top-1 ml-auto float-right")) %>
-<% end %>

package/src/core/MeganavControlMobilePanelOpen/component.rb

@@ -1,9 +0,0 @@
-module AblyUi
-  module Core
-    class MeganavControlMobilePanelOpen < ViewComponent::Base
-      def initialize(aria_controls:)
-        @aria_controls = aria_controls
-      end
-    end
-  end
-end

package/src/core/MeganavItemsDesktop/component.html.erb

@@ -1,17 +0,0 @@
-<ul class="hidden md:flex" data-id="meganav-items-desktop">
-  <% panels.each do |panel| %>
-    <li class="ui-meganav-item">
-      <%= render(AblyUi::Core::MeganavControl.new(aria_controls: panel[:id], aria_label: panel[:label], theme_name: @theme_name)) do %>
-        <span class="hidden lg:inline"><%= panel[:label] %></span>
-        <span class="lg:hidden"><%= panel[:short_label] %></span>
-      <% end %>
-
-      <%= content_tag :div, class: "ui-meganav-panel invisible #{bg_css(panel[:id])}", data: { id: "meganav-panel" }, id: panel[:id] do %>
-        <%= render("AblyUi::Core::#{panel[:component]}".constantize.new(url_base: url_base)) %>
-      <% end %>
-    </li>
-  <% end %>
-  <li>
-    <%= link_to "Pricing", abs_url("/pricing"), data: { id: "meganav-link" }, class: ["ui-meganav-link", "h-64", "items-center", "flex", theme(:text_color)] %>
-  </li>
-</ul>

package/src/core/MeganavItemsDesktop/component.rb

@@ -1,23 +0,0 @@
-module AblyUi
-  module Core
-    class MeganavItemsDesktop < ViewComponent::Base
-      include MeganavConfig
-      include Util
-
-      attr_reader :url_base
-
-      def initialize(theme_name:, url_base:)
-        @theme_name = theme_name
-        @url_base = url_base
-      end
-
-      def bg_css(panel_id)
-        if %w[products-panel use-cases-panel].include?(panel_id)
-          'ui-meganav-panel-split-bg'
-        else
-          ''
-        end
-      end
-    end
-  end
-end

package/src/core/MeganavItemsMobile/component.html.erb

@@ -1,75 +0,0 @@
-<ul class="flex md:hidden" data-id="meganav-items-mobile">
-  <li>
-    <% if @session_data[:signedIn] && @session_data[:logOut] %>
-      <%= render(AblyUi::Core::SignOutLink.new(session_data: @session_data, classes: ["ui-meganav-link", theme(:text_color)], url_base: url_base)) %>
-    <% else %>
-      <%= link_to "Login", abs_url(login_link), data: { id: "meganav-link" }, class: ["ui-meganav-link", theme(:text_color)] %>
-    <% end %>
-  </li>
-
-  <li class="ui-meganav-item">
-    <%= render(AblyUi::Core::MeganavControlMobileDropdown.new(theme_name: @theme_name)) %>
-
-    <div class="ui-meganav-mobile-dropdown invisible" id="meganav-mobile-dropdown" data-id="meganav-mobile-dropdown">
-      <div class="pt-24 pb-16 ui-grid-px bg-white">
-        <%= tag.form class: "mb-16", action: abs_url("/search"), method: "get" do %>
-          <div class="relative w-full">
-            <%= render(AblyUi::Core::Icon.new(name: "icon-gui-search", size: "1.5rem", color: "text-cool-black", additional_css: "absolute top-12 left-16 hover:text-gui-hover")) %>
-            <button
-              type="button"
-              class="absolute top-12 right-16 p-0 focus:outline-gui-focus m-0 md:hidden invisible"
-              data-id="meganav-search-input-clear"
-            >
-              <%= render(AblyUi::Core::Icon.new(name: "icon-gui-cross-circled-fill", size: "1.5rem", color: "text-dark-grey")) %>
-            </button>
-            <input
-              type="search"
-              name="q"
-              class="ui-input px-48 h-48"
-              style={{ maxWidth: "none" }}
-              placeholder="Search"
-              autocomplete="off"
-              data-id="meganav-mobile-search-input"
-            />
-
-            <%= render(AblyUi::Core::MeganavSearchAutocomplete.new) %>
-          </div>
-        <% end %>
-
-        <div class="max-h-0 overflow-hidden transition-all" data-id="meganav-mobile-search-suggestions">
-           <%= render(AblyUi::Core::MeganavSearchSuggestions.new(url_base: url_base, display_support_link: false)) %>
-        </div>
-
-        <ul class="mb-16" data-id="meganav-mobile-panel-controls">
-          <% panels.each do |panel| %>
-            <li class="ui-meganav-mobile-item">
-              <%= render(AblyUi::Core::MeganavControlMobilePanelOpen.new(aria_controls: "#{panel[:id]}-mobile")) do %>
-                <%= panel[:label] %>
-              <% end %>
-
-              <%= content_tag(:div, class: "ui-meganav-panel-mobile hidden", id: "#{panel[:id]}-mobile", data: { scroll_lock_scrollable: true }) do %>
-                <%= render(AblyUi::Core::MeganavControlMobilePanelClose.new(aria_controls: "#{panel[:id]}-mobile", display_hr: display_hr(panel[:id]))) %>
-                <%= render("AblyUi::Core::#{panel[:component]}".constantize.new(url_base: url_base)) %>
-              <% end %>
-            </li>
-          <% end %>
-          <li>
-            <%= link_to "Pricing", abs_url("/pricing"), class: "ui-meganav-mobile-link" %>
-          </li>
-        </ul>
-
-        <hr class="ui-meganav-hr mb-20" />
-
-        <div class="flex justify-between items-center mb-16">
-          <%= link_to "Contact us", abs_url("/contact"), class: "text-menu2 font-medium block ml-0 mr-8 lg:mx-12 p-0 hover:text-gui-hover focus:text-gui-focus focus:outline-none" %>
-
-          <% if @session_data[:signedIn] && @session_data[:account] %>
-            <%= link_to "Dashboard", abs_url(@session_data[:account][:links][:dashboard][:href]), class: "ui-btn-secondary" %>
-          <% else %>
-            <%= link_to "Sign up free", abs_url("/sign-up"), class: "ui-btn" %>
-          <% end %>
-        </div>
-      </div>
-    </div>
-  </li>
-</ul>

package/src/core/MeganavItemsMobile/component.rb

@@ -1,21 +0,0 @@
-module AblyUi
-  module Core
-    class MeganavItemsMobile < ViewComponent::Base
-      include MeganavConfig
-      include Util
-
-      attr_reader :options, :login_link, :url_base
-
-      def initialize(session_data:, theme_name:, login_link:, url_base:)
-        @theme_name = theme_name
-        @session_data = session_data
-        @login_link = login_link
-        @url_base = url_base
-      end
-
-      def display_hr(panel_id)
-        %w[company-panel developers-panel].include?(panel_id)
-      end
-    end
-  end
-end