@pathscale/ui 1.1.37 → 1.1.39

package/dist/components/immersive-landing/ImmersiveLanding.css

@@ -0,0 +1,562 @@
+@layer components {
+  .immersive-landing {
+    position: fixed;
+    inset: 0;
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+    isolation: isolate;
+    background: transparent;
+  }
+
+  .immersive-landing__viewport {
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+
+  .immersive-landing__page-layer {
+    position: relative;
+    z-index: 10;
+    width: 100%;
+    height: 100%;
+  }
+
+  .immersive-landing__overlay {
+    pointer-events: none;
+    position: fixed;
+    inset: 0;
+    z-index: 30;
+  }
+
+  .immersive-landing__version-wrap {
+    position: absolute;
+    right: 1.5rem;
+    bottom: 5rem;
+  }
+
+  .immersive-landing__version-label {
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+      "Liberation Mono", "Courier New", monospace;
+    color: color-mix(in oklab, var(--color-base-content) 20%, transparent);
+    font-size: clamp(0.75rem, 2vw, 1.25rem);
+    letter-spacing: 0.4em;
+  }
+
+  .immersive-landing-page {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    background: transparent;
+    transition-property: opacity;
+    transition-timing-function: ease-in-out;
+  }
+
+  .immersive-landing-page--active {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .immersive-landing-page--inactive {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .immersive-landing-page__content {
+    position: relative;
+    z-index: 10;
+    height: 100%;
+    overflow: hidden;
+  }
+
+  .immersive-landing-arrows__button {
+    position: fixed;
+    top: 50%;
+    z-index: 40;
+    display: none;
+    align-items: center;
+    justify-content: center;
+    min-width: 48px;
+    min-height: 48px;
+    border-radius: 9999px;
+    border: 0;
+    background: color-mix(in oklab, var(--color-base-content) 10%, transparent);
+    cursor: pointer;
+    transform: translateY(-50%);
+    transition: background-color 160ms ease;
+  }
+
+  .immersive-landing-arrows__button:hover {
+    background: color-mix(in oklab, var(--color-base-content) 20%, transparent);
+  }
+
+  .immersive-landing-arrows__button--prev {
+    left: 1rem;
+  }
+
+  .immersive-landing-arrows__button--next {
+    right: 1rem;
+  }
+
+  .immersive-landing-arrows__icon {
+    width: 1.5rem;
+    height: 1.5rem;
+    color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
+  }
+
+  .immersive-landing-navigation {
+    position: fixed;
+    left: 50%;
+    z-index: 50;
+    width: auto;
+    padding-inline: 0.5rem;
+    transform: translateX(-50%);
+  }
+
+  .immersive-landing-navigation__shell {
+    border-radius: 9999px;
+    border: 1px solid color-mix(in oklab, var(--color-base-content) 10%, transparent);
+    background: color-mix(in oklab, var(--color-base-100) 90%, transparent);
+    padding: 0.375rem 0.5rem;
+    backdrop-filter: blur(8px);
+    box-shadow: 0 12px 28px color-mix(in oklab, var(--color-base-content) 18%, transparent);
+  }
+
+  .immersive-landing-navigation__row {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+  }
+
+  .immersive-landing-navigation__mobile-arrow {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 44px;
+    min-height: 44px;
+    border-radius: 9999px;
+    border: 0;
+    color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
+    background: transparent;
+    cursor: pointer;
+    transition: background-color 150ms ease, color 150ms ease;
+  }
+
+  .immersive-landing-navigation__mobile-arrow:hover {
+    background: color-mix(in oklab, var(--color-base-content) 10%, transparent);
+  }
+
+  .immersive-landing-navigation__mobile-arrow:active {
+    background: color-mix(in oklab, var(--color-base-content) 20%, transparent);
+  }
+
+  .immersive-landing-navigation__mobile-arrow--disabled {
+    color: color-mix(in oklab, var(--color-base-content) 20%, transparent);
+    cursor: not-allowed;
+  }
+
+  .immersive-landing-navigation__mobile-arrow--disabled:hover,
+  .immersive-landing-navigation__mobile-arrow--disabled:active {
+    background: transparent;
+  }
+
+  .immersive-landing-navigation__icon {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+
+  .immersive-landing-navigation__dots {
+    display: none;
+    align-items: center;
+    gap: 0.375rem;
+    padding-inline: 0.5rem;
+  }
+
+  .immersive-landing-navigation__dot {
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 9999px;
+    border: 0;
+    background: color-mix(in oklab, var(--color-base-content) 30%, transparent);
+    cursor: pointer;
+    transition: transform 150ms ease, background-color 150ms ease;
+  }
+
+  .immersive-landing-navigation__dot:hover {
+    background: color-mix(in oklab, var(--color-base-content) 50%, transparent);
+  }
+
+  .immersive-landing-navigation__dot--active {
+    background: var(--color-primary);
+    transform: scale(1.25);
+  }
+
+  .immersive-landing-navigation__counter {
+    min-width: 3ch;
+    text-align: center;
+    font-size: 0.875rem;
+    font-variant-numeric: tabular-nums;
+    font-weight: 500;
+    color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
+  }
+
+  .immersive-landing-pwa,
+  .immersive-landing-firefox {
+    position: fixed;
+    right: 1rem;
+    bottom: 1rem;
+    left: 1rem;
+    z-index: 51;
+    animation: immersive-landing-slide-up 220ms ease;
+  }
+
+  .immersive-landing-pwa__card,
+  .immersive-landing-firefox__card {
+    position: relative;
+    border: 1px solid var(--color-base-300);
+  }
+
+  .immersive-landing-pwa__close,
+  .immersive-landing-firefox__close {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+  }
+
+  .immersive-landing-pwa__body,
+  .immersive-landing-firefox__body {
+    display: block;
+  }
+
+  .immersive-landing-pwa__media,
+  .immersive-landing-firefox__media {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.75rem;
+  }
+
+  .immersive-landing-pwa__app-icon-wrap,
+  .immersive-landing-firefox__icon-wrap {
+    display: flex;
+    width: 3.5rem;
+    height: 3.5rem;
+    align-items: center;
+    justify-content: center;
+    border-radius: 0.75rem;
+    background: var(--color-base-200);
+    flex-shrink: 0;
+    padding: 0.5rem;
+  }
+
+  .immersive-landing-pwa__app-icon {
+    width: 100%;
+    height: 100%;
+  }
+
+  .immersive-landing-firefox__browser-icon {
+    color: #f97316;
+  }
+
+  .immersive-landing-pwa__text-wrap,
+  .immersive-landing-firefox__text-wrap {
+    display: flex;
+    min-width: 0;
+    flex: 1;
+    flex-direction: column;
+    gap: 0.5rem;
+    padding-right: 1.5rem;
+  }
+
+  .immersive-landing-pwa__title,
+  .immersive-landing-firefox__title {
+    font-size: 1rem;
+    line-height: 1.5rem;
+    font-weight: 500;
+  }
+
+  .immersive-landing-pwa__description,
+  .immersive-landing-firefox__description {
+    font-size: 0.875rem;
+    color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
+  }
+
+  .immersive-landing-pwa__footer,
+  .immersive-landing-firefox__footer {
+    margin-top: 0.25rem;
+  }
+
+  .immersive-landing-pwa__action,
+  .immersive-landing-firefox__action {
+    flex: 1;
+  }
+
+  .immersive-landing-cookie {
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 52;
+    border-top: 1px solid color-mix(in oklab, var(--color-base-content) 10%, transparent);
+    background: color-mix(in oklab, var(--color-base-300) 95%, transparent);
+    backdrop-filter: blur(8px);
+    transition: transform 300ms ease, opacity 300ms ease;
+    animation: immersive-landing-slide-up 220ms ease;
+  }
+
+  .immersive-landing-cookie--closing {
+    transform: translateY(100%);
+    opacity: 0;
+    animation: none;
+  }
+
+  .immersive-landing-cookie__container {
+    max-width: 80rem;
+    margin-inline: auto;
+    padding: 1rem;
+  }
+
+  .immersive-landing-cookie__row {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  .immersive-landing-cookie__message {
+    font-size: 0.875rem;
+    color: var(--color-base-content);
+    flex: 1;
+  }
+
+  .immersive-landing-cookie__actions {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    flex-shrink: 0;
+  }
+
+  .immersive-landing-cookie__action-button {
+    width: 100%;
+  }
+
+  .immersive-landing-cookie__manage-button {
+    border: 0;
+    background: transparent;
+    color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
+    font-size: 0.875rem;
+    text-decoration: underline;
+    cursor: pointer;
+    transition: color 150ms ease;
+  }
+
+  .immersive-landing-cookie__manage-button:hover {
+    color: var(--color-base-content);
+    text-decoration: none;
+  }
+
+  .immersive-landing-cookie__modal-backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: 50;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgb(0 0 0 / 50%);
+    backdrop-filter: blur(4px);
+    padding: 1rem;
+    animation: immersive-landing-fade-in 200ms ease;
+  }
+
+  .immersive-landing-cookie__modal-card {
+    width: 100%;
+    max-width: 28rem;
+    border-radius: 0.5rem;
+    background: var(--color-base-100);
+    box-shadow: 0 20px 50px color-mix(in oklab, var(--color-base-content) 25%, transparent);
+    padding: 1.5rem;
+    animation: immersive-landing-scale-in 200ms ease;
+  }
+
+  .immersive-landing-cookie__modal-header {
+    margin-bottom: 1rem;
+  }
+
+  .immersive-landing-cookie__modal-title {
+    font-size: 1.125rem;
+    font-weight: 600;
+  }
+
+  .immersive-landing-cookie__preferences {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    margin-bottom: 1.5rem;
+  }
+
+  .immersive-landing-cookie__preference-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-radius: 0.5rem;
+    padding: 0.75rem;
+    cursor: pointer;
+    transition: background-color 150ms ease;
+  }
+
+  .immersive-landing-cookie__preference-row:hover {
+    background: color-mix(in oklab, var(--color-base-200) 50%, transparent);
+  }
+
+  .immersive-landing-cookie__preference-row--locked {
+    cursor: not-allowed;
+    background: color-mix(in oklab, var(--color-base-200) 50%, transparent);
+  }
+
+  .immersive-landing-cookie__preference-row--locked:hover {
+    background: color-mix(in oklab, var(--color-base-200) 50%, transparent);
+  }
+
+  .immersive-landing-cookie__preference-label {
+    font-size: 0.875rem;
+    font-weight: 500;
+  }
+
+  .immersive-landing-cookie__preference-row--locked .immersive-landing-cookie__preference-label {
+    color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
+  }
+
+  .immersive-landing-cookie__toggle {
+    width: 2.25rem;
+    height: 1.25rem;
+    border-radius: 9999px;
+    border: 1px solid color-mix(in oklab, var(--color-base-content) 24%, transparent);
+    appearance: none;
+    position: relative;
+    background: var(--color-base-200);
+    transition: background-color 150ms ease, border-color 150ms ease;
+  }
+
+  .immersive-landing-cookie__toggle::after {
+    content: "";
+    position: absolute;
+    top: 1px;
+    left: 1px;
+    width: 0.95rem;
+    height: 0.95rem;
+    border-radius: 9999px;
+    background: white;
+    box-shadow: 0 1px 2px rgb(0 0 0 / 25%);
+    transition: transform 150ms ease;
+  }
+
+  .immersive-landing-cookie__toggle:checked {
+    background: var(--color-primary);
+    border-color: var(--color-primary);
+  }
+
+  .immersive-landing-cookie__toggle:checked::after {
+    transform: translateX(1rem);
+  }
+
+  .immersive-landing-cookie__toggle:disabled {
+    opacity: 0.7;
+    cursor: not-allowed;
+  }
+
+  .immersive-landing-cookie__modal-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.5rem;
+  }
+
+  .immersive-landing-cookie__save-button {
+    transition: transform 150ms ease;
+  }
+
+  .immersive-landing-cookie__save-button:hover {
+    transform: scale(1.02);
+  }
+
+  .immersive-landing-cookie__save-button:active {
+    transform: scale(0.98);
+  }
+
+  @media (min-width: 768px) {
+    .immersive-landing-arrows__button {
+      display: inline-flex;
+    }
+
+    .immersive-landing-navigation__shell {
+      padding: 0.5rem 0.75rem;
+    }
+
+    .immersive-landing-navigation__row {
+      gap: 0.75rem;
+    }
+
+    .immersive-landing-navigation__mobile-arrow {
+      display: none;
+    }
+
+    .immersive-landing-navigation__dots {
+      display: flex;
+    }
+
+    .immersive-landing-cookie__row {
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .immersive-landing-cookie__actions {
+      flex-direction: row;
+      align-items: center;
+    }
+
+    .immersive-landing-cookie__action-button {
+      width: auto;
+    }
+  }
+
+  @media (min-width: 768px) {
+    .immersive-landing-pwa,
+    .immersive-landing-firefox {
+      left: auto;
+      max-width: 24rem;
+    }
+  }
+
+  @keyframes immersive-landing-slide-up {
+    from {
+      transform: translateY(100%);
+      opacity: 0;
+    }
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+
+  @keyframes immersive-landing-fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes immersive-landing-scale-in {
+    from {
+      opacity: 0;
+      transform: scale(0.98);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+}
+

package/dist/components/immersive-landing/ImmersiveLanding.d.ts

@@ -1,3 +1,4 @@
+import "./ImmersiveLanding.css";
 import { type Component } from "solid-js";
 import type { ImmersiveLandingProps } from "./types";
 declare const _default: Component<ImmersiveLandingProps> & {

package/dist/components/immersive-landing/ImmersiveLanding.js

@@ -1,6 +1,8 @@
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import "./ImmersiveLanding.css";
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
 import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+import * as __WEBPACK_EXTERNAL_MODULE__ImmersiveLanding_classes_js_ecd495a7__ from "./ImmersiveLanding.classes.js";
 import * as __WEBPACK_EXTERNAL_MODULE__useImmersiveLanding_js_66194376__ from "./useImmersiveLanding.js";
 import * as __WEBPACK_EXTERNAL_MODULE__ImmersiveLandingContext_js_0e3f38c0__ from "./ImmersiveLandingContext.js";
 import * as __WEBPACK_EXTERNAL_MODULE__ImmersiveLandingPage_js_df221ed4__ from "./ImmersiveLandingPage.js";
@@ -9,7 +11,7 @@ import * as __WEBPACK_EXTERNAL_MODULE__ImmersiveLandingNavigation_js_3c874fb2__
 import * as __WEBPACK_EXTERNAL_MODULE__components_PWAInstallPrompt_js_a5e100bf__ from "./components/PWAInstallPrompt.js";
 import * as __WEBPACK_EXTERNAL_MODULE__components_FirefoxPWABanner_js_46fc5861__ from "./components/FirefoxPWABanner.js";
 import * as __WEBPACK_EXTERNAL_MODULE__components_CookieConsent_js_dd55e062__ from "./components/CookieConsent.js";
-var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div><div class="relative h-full w-full"><div class="relative z-10 h-full w-full">'), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class="absolute bottom-20 right-6"aria-hidden=true><span class="font-mono text-base-content/20 text-[clamp(0.75rem,2vw,1.25rem)] tracking-[0.4em]">v'), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class="pointer-events-none fixed inset-0 z-30">');
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div><div><div>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div aria-hidden=true><span>v"), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
 const ImmersiveLanding = (props)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
         "pages",
@@ -59,7 +61,7 @@ const ImmersiveLanding = (props)=>{
     };
     const showNav = ()=>false !== local.showNavigation;
     const showArrowNav = ()=>false !== local.showArrows;
-    const classes = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("fixed inset-0 h-screen w-screen overflow-hidden bg-transparent relative isolate", local.class, local.className);
+    const classes = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__ImmersiveLanding_classes_js_ecd495a7__.CLASSES.landing.base, local.class, local.className);
     const renderChildren = ()=>"function" == typeof local.children ? local.children(contextValue) : local.children;
     const renderOverlay = ()=>"function" == typeof local.overlay ? local.overlay(contextValue) : local.overlay;
     return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__ImmersiveLandingContext_js_0e3f38c0__.ImmersiveLandingContext.Provider, {
@@ -77,6 +79,15 @@ const ImmersiveLanding = (props)=>{
                         }
                     }, others), false, true);
                     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, renderChildren);
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+                        var _v$ = __WEBPACK_EXTERNAL_MODULE__ImmersiveLanding_classes_js_ecd495a7__.CLASSES.landing.viewport, _v$2 = __WEBPACK_EXTERNAL_MODULE__ImmersiveLanding_classes_js_ecd495a7__.CLASSES.landing.pageLayer;
+                        _v$ !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$2, _p$.e = _v$);
+                        _v$2 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$3, _p$.t = _v$2);
+                        return _p$;
+                    }, {
+                        e: void 0,
+                        t: void 0
+                    });
                     return _el$;
                 })(),
                 (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
@@ -94,9 +105,19 @@ const ImmersiveLanding = (props)=>{
                                 var _el$5 = _tmpl$2(), _el$6 = _el$5.firstChild;
                                 _el$6.firstChild;
                                 (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$6, ()=>local.appVersion, null);
+                                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+                                    var _v$3 = __WEBPACK_EXTERNAL_MODULE__ImmersiveLanding_classes_js_ecd495a7__.CLASSES.landing.versionWrap, _v$4 = __WEBPACK_EXTERNAL_MODULE__ImmersiveLanding_classes_js_ecd495a7__.CLASSES.landing.versionLabel;
+                                    _v$3 !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$5, _p$.e = _v$3);
+                                    _v$4 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$6, _p$.t = _v$4);
+                                    return _p$;
+                                }, {
+                                    e: void 0,
+                                    t: void 0
+                                });
                                 return _el$5;
                             }
                         }), null);
+                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$4, __WEBPACK_EXTERNAL_MODULE__ImmersiveLanding_classes_js_ecd495a7__.CLASSES.landing.overlay));
                         return _el$4;
                     }
                 }),

package/dist/components/immersive-landing/ImmersiveLandingArrows.js

@@ -1,7 +1,8 @@
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
 import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
-var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<button type=button aria-label="Previous page"><svg class="w-6 h-6 text-base-content/70"fill=none viewBox="0 0 24 24"stroke=currentColor stroke-width=2><path stroke-linecap=round stroke-linejoin=round d="M15 19l-7-7 7-7">'), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<button type=button aria-label="Next page"><svg class="w-6 h-6 text-base-content/70"fill=none viewBox="0 0 24 24"stroke=currentColor stroke-width=2><path stroke-linecap=round stroke-linejoin=round d="M9 5l7 7-7 7">');
+import * as __WEBPACK_EXTERNAL_MODULE__ImmersiveLanding_classes_js_ecd495a7__ from "./ImmersiveLanding.classes.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<button type=button aria-label="Previous page"><svg fill=none viewBox="0 0 24 24"stroke=currentColor stroke-width=2><path stroke-linecap=round stroke-linejoin=round d="M15 19l-7-7 7-7">'), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<button type=button aria-label="Next page"><svg fill=none viewBox="0 0 24 24"stroke=currentColor stroke-width=2><path stroke-linecap=round stroke-linejoin=round d="M9 5l7 7-7 7">');
 const ImmersiveLandingArrows = (props)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
         "onPrev",
@@ -12,27 +13,25 @@ const ImmersiveLandingArrows = (props)=>{
         "className"
     ]);
     const handleNext = ()=>{
-        console.log("ImmersiveLandingArrows: handleNext called, onNext is:", typeof local.onNext);
         if (local.onNext) local.onNext();
     };
     const handlePrev = ()=>{
-        console.log("ImmersiveLandingArrows: handlePrev called, onPrev is:", typeof local.onPrev);
         if (local.onPrev) local.onPrev();
     };
-    const buttonClasses = "fixed top-1/2 -translate-y-1/2 z-40 hidden md:flex items-center justify-center min-w-[48px] min-h-[48px] rounded-full bg-base-content/10 hover:bg-base-content/20 transition-colors cursor-pointer";
     return [
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
             get when () {
                 return !local.isFirstPage;
             },
             get children () {
-                var _el$ = _tmpl$();
+                var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
                 _el$.$$click = handlePrev;
                 (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
                     get ["class"] () {
-                        return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(buttonClasses, "left-4", local.class, local.className);
+                        return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__ImmersiveLanding_classes_js_ecd495a7__.CLASSES.arrows.button, __WEBPACK_EXTERNAL_MODULE__ImmersiveLanding_classes_js_ecd495a7__.CLASSES.arrows.prev, local.class, local.className);
                     }
                 }, others), false, true);
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$2, "class", __WEBPACK_EXTERNAL_MODULE__ImmersiveLanding_classes_js_ecd495a7__.CLASSES.arrows.icon));
                 return _el$;
             }
         }),
@@ -41,14 +40,15 @@ const ImmersiveLandingArrows = (props)=>{
                 return !local.isLastPage;
             },
             get children () {
-                var _el$2 = _tmpl$2();
-                _el$2.$$click = handleNext;
-                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+                var _el$3 = _tmpl$2(), _el$4 = _el$3.firstChild;
+                _el$3.$$click = handleNext;
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
                     get ["class"] () {
-                        return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(buttonClasses, "right-4", local.class, local.className);
+                        return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__ImmersiveLanding_classes_js_ecd495a7__.CLASSES.arrows.button, __WEBPACK_EXTERNAL_MODULE__ImmersiveLanding_classes_js_ecd495a7__.CLASSES.arrows.next, local.class, local.className);
                     }
                 }, others), false, true);
-                return _el$2;
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$4, "class", __WEBPACK_EXTERNAL_MODULE__ImmersiveLanding_classes_js_ecd495a7__.CLASSES.arrows.icon));
+                return _el$3;
             }
         })
     ];