@pathscale/ui 0.0.138 → 0.0.140

package/dist/components/floating-dock/FloatingDock.d.ts

@@ -1,18 +1,60 @@
 import { type JSX } from "solid-js";
 import type { IComponentBaseProps } from "../types";
 export type FloatingDockItem = {
+    /** Tooltip label. */
     title: string;
+    /** Icon element rendered inside the dock button. */
     icon: JSX.Element;
-    href: string;
+    /** Navigation URL. Ignored when `onClick` is provided. */
+    href?: string;
+    /** Click handler. When provided, renders a `<button>` instead of `<a>`. */
+    onClick?: (e: MouseEvent) => void;
 };
+export type FloatingDockDirection = "top" | "bottom" | "left" | "right";
 export type FloatingDockProps = {
     items: FloatingDockItem[];
+    /** Direction the dock is oriented. @default "horizontal" */
+    orientation?: "horizontal" | "vertical";
+    /** Where the tooltip appears relative to each icon. @default "top" */
+    tooltipDirection?: FloatingDockDirection;
+    /** Where the mobile popup opens. @default "top" */
+    mobilePopupDirection?: FloatingDockDirection;
+    /** Gap between items in px. @default 16 */
+    gap?: number;
+    /** Icon container resting size in px. @default 40 */
+    baseSize?: number;
+    /** Icon container size when hovered/nearest to cursor in px. @default 80 */
+    hoverSize?: number;
+    /** Icon resting size in px. @default 20 */
+    iconSize?: number;
+    /** Icon size when hovered/nearest in px. @default 40 */
+    hoverIconSize?: number;
+    /** Distance in px within which magnification activates. @default 150 */
+    magnifyRange?: number;
+    /** Enable the spring magnification effect. @default true */
+    magnify?: boolean;
+    /** Show desktop dock. @default true */
+    showDesktop?: boolean;
+    /** Show mobile toggle dock. @default true */
+    showMobile?: boolean;
+    /** Show the dock container background. @default true */
+    showContainer?: boolean;
     /** Classes applied to the desktop dock container. */
     desktopClass?: string;
     /** Classes applied to the mobile dock container. */
     mobileClass?: string;
-    /** Icon shown in the mobile toggle button (defaults to ☰). */
+    /** Classes applied to each item wrapper. */
+    itemClass?: string;
+    /** Classes applied to the tooltip. */
+    tooltipClass?: string;
+    /** Icon shown in the mobile toggle button. */
     mobileToggleIcon?: JSX.Element;
+    /** Spring mass. @default 0.1 */
+    springMass?: number;
+    /** Spring stiffness. @default 150 */
+    springStiffness?: number;
+    /** Spring damping. @default 12 */
+    springDamping?: number;
 } & IComponentBaseProps;
 declare const FloatingDock: (rawProps: FloatingDockProps) => JSX.Element;
 export default FloatingDock;

package/dist/components/floating-dock/index.d.ts

@@ -1,2 +1,2 @@
 export { default } from "./FloatingDock";
-export type { FloatingDockProps, FloatingDockItem } from "./FloatingDock";
+export type { FloatingDockProps, FloatingDockItem, FloatingDockDirection, } from "./FloatingDock";

package/dist/index.d.ts

@@ -31,7 +31,7 @@ export { default as Drawer, type DrawerProps } from "./components/drawer";
 export { default as Dropdown } from "./components/dropdown";
 export { default as FileInput } from "./components/fileinput";
 export { default as FloatingDock } from "./components/floating-dock";
-export type { FloatingDockProps, FloatingDockItem } from "./components/floating-dock";
+export type { FloatingDockProps, FloatingDockItem, FloatingDockDirection } from "./components/floating-dock";
 export { default as Flex } from "./components/flex";
 export { default as Footer } from "./components/footer";
 export type { FooterProps, FooterTitleProps } from "./components/footer";

package/dist/index.js

@@ -9409,7 +9409,7 @@ const DropdownDetails = Object.assign(Details, {
     Toggle: DropdownToggle_Summary
 });
 var DropdownItem_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<li role=menuitem>"), DropdownItem_tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<a>"), DropdownItem_tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<button>");
-const DropdownItem = (props)=>{
+const DropdownItem_DropdownItem = (props)=>{
     const dropdownContext = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.useContext)(DropdownContext);
     const defaultProps = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.mergeProps)({
         closeOnClick: true
@@ -9451,7 +9451,7 @@ const DropdownItem = (props)=>{
         return _el$;
     })();
 };
-const dropdown_DropdownItem = DropdownItem;
+const DropdownItem = DropdownItem_DropdownItem;
 var DropdownMenu_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<ul>");
 const DropdownMenu = (props)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
@@ -9653,7 +9653,7 @@ const dropdown_Dropdown = Object.assign(Dropdown, {
     Details: DropdownDetails,
     Toggle: dropdown_DropdownToggle,
     Menu: dropdown_DropdownMenu,
-    Item: dropdown_DropdownItem
+    Item: DropdownItem
 });
 const dropdown = dropdown_Dropdown;
 var FileInput_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<input>");
@@ -9701,7 +9701,7 @@ const FileInput_FileInput = (props)=>{
     })();
 };
 const FileInput = FileInput_FileInput;
-var FloatingDock_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class="absolute -top-8 left-1/2 w-fit -translate-x-1/2 rounded-md border border-base-300 bg-base-100 px-2 py-0.5 text-xs whitespace-pre text-base-content animate-fade-in">'), FloatingDock_tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<a><div class="relative flex aspect-square items-center justify-center rounded-full bg-base-200"><div class="flex items-center justify-center">'), FloatingDock_tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>"), FloatingDock_tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class="absolute inset-x-0 bottom-full mb-2 flex flex-col gap-2">'), FloatingDock_tmpl$5 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div><button class="flex h-10 w-10 items-center justify-center rounded-full bg-base-200">'), _tmpl$6 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class=animate-fade-in><a class="flex h-10 w-10 items-center justify-center rounded-full bg-base-100"><div class="h-4 w-4">'), _tmpl$7 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<svg xmlns=http://www.w3.org/2000/svg class="h-5 w-5 text-base-content/60"viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M4 6h16"></path><path d="M4 12h16"></path><path d="M4 18h16">');
+var FloatingDock_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>"), FloatingDock_tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div><div class="flex items-center justify-center shrink-0">'), FloatingDock_tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<button type=button class="appearance-none bg-transparent border-0 p-0 cursor-pointer">'), FloatingDock_tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<a>"), FloatingDock_tmpl$5 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div><button type=button class="flex items-center justify-center rounded-full bg-base-200 cursor-pointer border-0 p-0">'), _tmpl$6 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<button type=button class="flex items-center justify-center rounded-full bg-base-100 cursor-pointer border-0 p-0">'), _tmpl$7 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div class=animate-fade-in>"), _tmpl$8 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<a class="flex items-center justify-center rounded-full bg-base-100">'), _tmpl$9 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class="flex items-center justify-center rounded-full bg-base-100">'), _tmpl$0 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<svg xmlns=http://www.w3.org/2000/svg class="h-5 w-5 text-base-content/60"viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M4 6h16"></path><path d="M4 12h16"></path><path d="M4 18h16">');
 function createSpring(initial, opts = {}) {
     const mass = opts.mass ?? 1;
     const stiffness = opts.stiffness ?? 150;
@@ -9718,13 +9718,9 @@ function createSpring(initial, opts = {}) {
         },
         step (dt) {
             const force = -stiffness * (current - target);
-            const dampForce = -damping * velocity;
-            const accel = (force + dampForce) / mass;
+            const accel = (force - damping * velocity) / mass;
             velocity += accel * dt;
             current += velocity * dt;
-        },
-        settled () {
-            return Math.abs(current - target) < 0.5 && Math.abs(velocity) < 0.5;
         }
     };
 }
@@ -9732,48 +9728,54 @@ function mapRange(value, inMin, inMax, outMin, outMax) {
     const t = Math.max(0, Math.min(1, (value - inMin) / (inMax - inMin)));
     return outMin + t * (outMax - outMin);
 }
-const SPRING_OPTS = {
-    mass: 0.1,
-    stiffness: 150,
-    damping: 12
+const TOOLTIP_POS = {
+    top: "absolute -top-8 left-1/2 -translate-x-1/2",
+    bottom: "absolute -bottom-8 left-1/2 -translate-x-1/2",
+    left: "absolute top-1/2 -translate-y-1/2 right-full mr-2",
+    right: "absolute top-1/2 -translate-y-1/2 left-full ml-2"
 };
-const IconContainer = (props)=>{
-    let ref;
+const FloatingDock_DockItem = (props)=>{
+    let wrapRef;
     let iconRef;
     const [hovered, setHovered] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
-    const sWidth = createSpring(40, SPRING_OPTS);
-    const sHeight = createSpring(40, SPRING_OPTS);
-    const sIconW = createSpring(20, SPRING_OPTS);
-    const sIconH = createSpring(20, SPRING_OPTS);
+    const cfg = props.cfg;
+    const sW = createSpring(cfg.baseSize, cfg.springOpts);
+    const sH = createSpring(cfg.baseSize, cfg.springOpts);
+    const sIW = createSpring(cfg.iconSize, cfg.springOpts);
+    const sIH = createSpring(cfg.iconSize, cfg.springOpts);
     let rafId;
     let prevTime = 0;
     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onMount)(()=>{
+        if (!cfg.magnify) return;
         const tick = (time)=>{
             const dt = prevTime ? Math.min((time - prevTime) / 1000, 0.05) : 1 / 60;
             prevTime = time;
-            const mx = props.mouseX();
-            if (ref) {
-                const bounds = ref.getBoundingClientRect();
-                const center = bounds.x + bounds.width / 2;
-                const dist = mx - center;
-                const targetSize = mx === 1 / 0 ? 40 : mapRange(Math.abs(dist), 0, 150, 80, 40);
-                const targetIcon = mx === 1 / 0 ? 20 : mapRange(Math.abs(dist), 0, 150, 40, 20);
-                sWidth.set(targetSize);
-                sHeight.set(targetSize);
-                sIconW.set(targetIcon);
-                sIconH.set(targetIcon);
+            const mp = props.mousePos();
+            if (wrapRef) {
+                const b = wrapRef.getBoundingClientRect();
+                const isH = "horizontal" === cfg.orientation;
+                const center = isH ? b.x + b.width / 2 : b.y + b.height / 2;
+                const dist = Math.abs(mp - center);
+                const ts = mp === 1 / 0 ? cfg.baseSize : mapRange(dist, 0, cfg.magnifyRange, cfg.hoverSize, cfg.baseSize);
+                const ti = mp === 1 / 0 ? cfg.iconSize : mapRange(dist, 0, cfg.magnifyRange, cfg.hoverIconSize, cfg.iconSize);
+                sW.set(ts);
+                sH.set(ts);
+                sIW.set(ti);
+                sIH.set(ti);
             }
-            sWidth.step(dt);
-            sHeight.step(dt);
-            sIconW.step(dt);
-            sIconH.step(dt);
-            if (ref) {
-                ref.style.width = `${sWidth.get()}px`;
-                ref.style.height = `${sHeight.get()}px`;
+            sW.step(dt);
+            sH.step(dt);
+            sIW.step(dt);
+            sIH.step(dt);
+            if (wrapRef) {
+                const w = sW.get();
+                const h = sH.get();
+                wrapRef.style.width = `${w}px`;
+                wrapRef.style.height = `${h}px`;
             }
             if (iconRef) {
-                iconRef.style.width = `${sIconW.get()}px`;
-                iconRef.style.height = `${sIconH.get()}px`;
+                iconRef.style.width = `${sIW.get()}px`;
+                iconRef.style.height = `${sIH.get()}px`;
             }
             rafId = requestAnimationFrame(tick);
         };
@@ -9782,135 +9784,335 @@ const IconContainer = (props)=>{
     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
         if (void 0 !== rafId) cancelAnimationFrame(rafId);
     });
-    return (()=>{
-        var _el$ = FloatingDock_tmpl$2(), _el$2 = _el$.firstChild, _el$4 = _el$2.firstChild;
-        _el$2.addEventListener("mouseleave", ()=>setHovered(false));
-        _el$2.addEventListener("mouseenter", ()=>setHovered(true));
-        var _ref$ = ref;
-        "function" == typeof _ref$ ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$, _el$2) : ref = _el$2;
-        _el$2.style.setProperty("width", "40px");
-        _el$2.style.setProperty("height", "40px");
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+    const handleClick = (e)=>{
+        if (props.item.onClick) {
+            e.preventDefault();
+            props.item.onClick(e);
+        }
+    };
+    const inner = (()=>{
+        var _el$ = FloatingDock_tmpl$2(), _el$3 = _el$.firstChild;
+        _el$.addEventListener("mouseleave", ()=>setHovered(false));
+        _el$.addEventListener("mouseenter", ()=>setHovered(true));
+        var _ref$ = wrapRef;
+        "function" == typeof _ref$ ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$, _el$) : wrapRef = _el$;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
             get when () {
                 return hovered();
             },
             get children () {
-                var _el$3 = FloatingDock_tmpl$();
-                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, ()=>props.item.title);
-                return _el$3;
+                var _el$2 = FloatingDock_tmpl$();
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, ()=>props.item.title);
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$2, twMerge(TOOLTIP_POS[cfg.tooltipDir], "w-fit rounded-md border border-base-300 bg-base-100 px-2 py-0.5 text-xs whitespace-pre text-base-content animate-fade-in z-50", cfg.tooltipClass)));
+                return _el$2;
             }
-        }), _el$4);
+        }), _el$3);
         var _ref$2 = iconRef;
-        "function" == typeof _ref$2 ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$2, _el$4) : iconRef = _el$4;
-        _el$4.style.setProperty("width", "20px");
-        _el$4.style.setProperty("height", "20px");
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, ()=>props.item.icon);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "href", props.item.href));
+        "function" == typeof _ref$2 ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$2, _el$3) : iconRef = _el$3;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, ()=>props.item.icon);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+            var _v$ = twMerge("relative flex items-center justify-center rounded-full bg-base-200", cfg.itemClass), _v$2 = `${cfg.baseSize}px`, _v$3 = `${cfg.baseSize}px`;
+            _v$ !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$, _p$.e = _v$);
+            _v$2 !== _p$.t && (null != (_p$.t = _v$2) ? _el$.style.setProperty("width", _v$2) : _el$.style.removeProperty("width"));
+            _v$3 !== _p$.a && (null != (_p$.a = _v$3) ? _el$.style.setProperty("height", _v$3) : _el$.style.removeProperty("height"));
+            return _p$;
+        }, {
+            e: void 0,
+            t: void 0,
+            a: void 0
+        });
         return _el$;
     })();
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+        get when () {
+            return props.item.onClick;
+        },
+        get fallback () {
+            return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+                get when () {
+                    return props.item.href;
+                },
+                fallback: inner,
+                get children () {
+                    var _el$5 = FloatingDock_tmpl$4();
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$5, inner);
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$5, "href", props.item.href));
+                    return _el$5;
+                }
+            });
+        },
+        get children () {
+            var _el$4 = FloatingDock_tmpl$3();
+            _el$4.$$click = handleClick;
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, inner);
+            return _el$4;
+        }
+    });
 };
 const FloatingDockDesktop = (props)=>{
-    const [mouseX, setMouseX] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(1 / 0);
+    const [mousePos, setMousePos] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(1 / 0);
+    const isH = ()=>"horizontal" === props.cfg.orientation;
     return (()=>{
-        var _el$5 = FloatingDock_tmpl$3();
-        _el$5.addEventListener("mouseleave", ()=>setMouseX(1 / 0));
-        _el$5.$$mousemove = (e)=>setMouseX(e.pageX);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$5, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.For, {
+        var _el$6 = FloatingDock_tmpl$();
+        _el$6.addEventListener("mouseleave", ()=>setMousePos(1 / 0));
+        _el$6.$$mousemove = (e)=>setMousePos(isH() ? e.clientX : e.clientY);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$6, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.For, {
             get each () {
                 return props.items;
             },
-            children: (item)=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(IconContainer, {
+            children: (item)=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(FloatingDock_DockItem, {
                     item: item,
-                    mouseX: mouseX
+                    mousePos: mousePos,
+                    get cfg () {
+                        return props.cfg;
+                    }
                 })
         }));
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$5, twMerge("mx-auto hidden h-16 items-end gap-4 rounded-2xl bg-base-100 px-4 pb-3 md:flex", "shadow-[0px_1px_0px_0px_var(--color-base-300)_inset,0px_1px_0px_0px_var(--color-base-100)]", props.class)));
-        return _el$5;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+            var _v$4 = twMerge("mx-auto", isH() ? "items-end" : "items-center", props.showContainer && "rounded-2xl bg-base-100 shadow-[0px_1px_0px_0px_var(--color-base-300)_inset,0px_1px_0px_0px_var(--color-base-100)]", isH() && props.showContainer && "h-16 px-4 pb-3", !isH() && props.showContainer && "w-16 py-4 pl-3", props.class), _v$5 = {
+                display: "flex",
+                "flex-direction": isH() ? "row" : "column",
+                gap: `${props.cfg.gap}px`,
+                ...!props.showContainer && isH() ? {
+                    height: `${props.cfg.baseSize}px`
+                } : {},
+                overflow: "visible"
+            };
+            _v$4 !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$6, _p$.e = _v$4);
+            _p$.t = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.style)(_el$6, _v$5, _p$.t);
+            return _p$;
+        }, {
+            e: void 0,
+            t: void 0
+        });
+        return _el$6;
     })();
 };
+const MOBILE_POPUP = {
+    top: "absolute inset-x-0 bottom-full mb-2 flex flex-col gap-2",
+    bottom: "absolute inset-x-0 top-full mt-2 flex flex-col gap-2",
+    left: "absolute right-full top-0 mr-2 flex flex-col gap-2",
+    right: "absolute left-full top-0 ml-2 flex flex-col gap-2"
+};
 const FloatingDockMobile = (props)=>{
     const [open, setOpen] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
+    const handleItemClick = (item, e)=>{
+        if (item.onClick) {
+            e.preventDefault();
+            item.onClick(e);
+        }
+        setOpen(false);
+    };
     return (()=>{
-        var _el$6 = FloatingDock_tmpl$5(), _el$8 = _el$6.firstChild;
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$6, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+        var _el$7 = FloatingDock_tmpl$5(), _el$9 = _el$7.firstChild;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$7, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
             get when () {
                 return open();
             },
             get children () {
-                var _el$7 = FloatingDock_tmpl$4();
-                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$7, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.For, {
+                var _el$8 = FloatingDock_tmpl$();
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$8, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.For, {
                     get each () {
                         return props.items;
                     },
                     children: (item, idx)=>(()=>{
-                            var _el$9 = _tmpl$6(), _el$0 = _el$9.firstChild, _el$1 = _el$0.firstChild;
-                            _el$9.style.setProperty("animation-fill-mode", "backwards");
-                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$1, ()=>item.icon);
-                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
-                                var _v$ = `${(props.items.length - 1 - idx()) * 0.05}s`, _v$2 = item.href;
-                                _v$ !== _p$.e && (null != (_p$.e = _v$) ? _el$9.style.setProperty("animation-delay", _v$) : _el$9.style.removeProperty("animation-delay"));
-                                _v$2 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$0, "href", _p$.t = _v$2);
-                                return _p$;
-                            }, {
-                                e: void 0,
-                                t: void 0
-                            });
-                            return _el$9;
+                            var _el$0 = _tmpl$7();
+                            _el$0.style.setProperty("animation-fill-mode", "backwards");
+                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$0, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+                                get when () {
+                                    return item.onClick;
+                                },
+                                get fallback () {
+                                    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+                                        get when () {
+                                            return item.href;
+                                        },
+                                        get fallback () {
+                                            return (()=>{
+                                                var _el$11 = _tmpl$9();
+                                                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$11, ()=>item.icon);
+                                                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+                                                    var _v$14 = `${props.cfg.baseSize}px`, _v$15 = `${props.cfg.baseSize}px`, _v$16 = item.title;
+                                                    _v$14 !== _p$.e && (null != (_p$.e = _v$14) ? _el$11.style.setProperty("width", _v$14) : _el$11.style.removeProperty("width"));
+                                                    _v$15 !== _p$.t && (null != (_p$.t = _v$15) ? _el$11.style.setProperty("height", _v$15) : _el$11.style.removeProperty("height"));
+                                                    _v$16 !== _p$.a && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$11, "title", _p$.a = _v$16);
+                                                    return _p$;
+                                                }, {
+                                                    e: void 0,
+                                                    t: void 0,
+                                                    a: void 0
+                                                });
+                                                return _el$11;
+                                            })();
+                                        },
+                                        get children () {
+                                            var _el$10 = _tmpl$8();
+                                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$10, ()=>item.icon);
+                                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+                                                var _v$10 = item.href, _v$11 = `${props.cfg.baseSize}px`, _v$12 = `${props.cfg.baseSize}px`, _v$13 = item.title;
+                                                _v$10 !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$10, "href", _p$.e = _v$10);
+                                                _v$11 !== _p$.t && (null != (_p$.t = _v$11) ? _el$10.style.setProperty("width", _v$11) : _el$10.style.removeProperty("width"));
+                                                _v$12 !== _p$.a && (null != (_p$.a = _v$12) ? _el$10.style.setProperty("height", _v$12) : _el$10.style.removeProperty("height"));
+                                                _v$13 !== _p$.o && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$10, "title", _p$.o = _v$13);
+                                                return _p$;
+                                            }, {
+                                                e: void 0,
+                                                t: void 0,
+                                                a: void 0,
+                                                o: void 0
+                                            });
+                                            return _el$10;
+                                        }
+                                    });
+                                },
+                                get children () {
+                                    var _el$1 = _tmpl$6();
+                                    _el$1.$$click = (e)=>handleItemClick(item, e);
+                                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$1, ()=>item.icon);
+                                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+                                        var _v$9 = `${props.cfg.baseSize}px`, _v$0 = `${props.cfg.baseSize}px`, _v$1 = item.title;
+                                        _v$9 !== _p$.e && (null != (_p$.e = _v$9) ? _el$1.style.setProperty("width", _v$9) : _el$1.style.removeProperty("width"));
+                                        _v$0 !== _p$.t && (null != (_p$.t = _v$0) ? _el$1.style.setProperty("height", _v$0) : _el$1.style.removeProperty("height"));
+                                        _v$1 !== _p$.a && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$1, "title", _p$.a = _v$1);
+                                        return _p$;
+                                    }, {
+                                        e: void 0,
+                                        t: void 0,
+                                        a: void 0
+                                    });
+                                    return _el$1;
+                                }
+                            }));
+                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_$p)=>(_$p = `${(props.items.length - 1 - idx()) * 0.05}s`, _el$0.style.setProperty("animation-delay", _$p)));
+                            return _el$0;
                         })()
                 }));
-                return _el$7;
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$8, MOBILE_POPUP[props.popupDirection]));
+                return _el$8;
             }
-        }), _el$8);
-        _el$8.$$click = ()=>setOpen(!open());
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$8, ()=>props.toggleIcon ?? _tmpl$7());
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$6, twMerge("relative block md:hidden", props.class)));
-        return _el$6;
+        }), _el$9);
+        _el$9.$$click = ()=>setOpen(!open());
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$9, ()=>props.toggleIcon ?? _tmpl$0());
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+            var _v$6 = twMerge("relative block md:hidden", props.class), _v$7 = `${props.cfg.baseSize}px`, _v$8 = `${props.cfg.baseSize}px`;
+            _v$6 !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$7, _p$.e = _v$6);
+            _v$7 !== _p$.t && (null != (_p$.t = _v$7) ? _el$9.style.setProperty("width", _v$7) : _el$9.style.removeProperty("width"));
+            _v$8 !== _p$.a && (null != (_p$.a = _v$8) ? _el$9.style.setProperty("height", _v$8) : _el$9.style.removeProperty("height"));
+            return _p$;
+        }, {
+            e: void 0,
+            t: void 0,
+            a: void 0
+        });
+        return _el$7;
     })();
 };
-const FloatingDock_FloatingDock = (rawProps)=>{
+const FloatingDock = (rawProps)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(rawProps, [
         "items",
+        "orientation",
+        "tooltipDirection",
+        "mobilePopupDirection",
+        "gap",
+        "baseSize",
+        "hoverSize",
+        "iconSize",
+        "hoverIconSize",
+        "magnifyRange",
+        "magnify",
+        "showDesktop",
+        "showMobile",
+        "showContainer",
         "desktopClass",
         "mobileClass",
+        "itemClass",
+        "tooltipClass",
         "mobileToggleIcon",
+        "springMass",
+        "springStiffness",
+        "springDamping",
         "class",
         "className",
         "dataTheme",
         "style"
     ]);
+    const cfg = ()=>({
+            baseSize: local.baseSize ?? 40,
+            hoverSize: local.hoverSize ?? 80,
+            iconSize: local.iconSize ?? 20,
+            hoverIconSize: local.hoverIconSize ?? 40,
+            magnifyRange: local.magnifyRange ?? 150,
+            magnify: false !== local.magnify,
+            gap: local.gap ?? 16,
+            tooltipDir: local.tooltipDirection ?? "top",
+            orientation: local.orientation ?? "horizontal",
+            itemClass: local.itemClass,
+            tooltipClass: local.tooltipClass,
+            springOpts: {
+                mass: local.springMass ?? 0.1,
+                stiffness: local.springStiffness ?? 150,
+                damping: local.springDamping ?? 12
+            }
+        });
     return (()=>{
-        var _el$11 = FloatingDock_tmpl$3();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$11, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+        var _el$13 = FloatingDock_tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$13, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
             get ["data-theme"] () {
                 return local.dataTheme;
             }
         }, others), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$11, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(FloatingDockDesktop, {
-            get items () {
-                return local.items;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$13, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+            get when () {
+                return false !== local.showDesktop;
             },
-            get ["class"] () {
-                return twMerge(local.class, local.className, local.desktopClass);
+            get children () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(FloatingDockDesktop, {
+                    get items () {
+                        return local.items;
+                    },
+                    get ["class"] () {
+                        return twMerge(local.class, local.className, local.desktopClass);
+                    },
+                    get cfg () {
+                        return cfg();
+                    },
+                    get showContainer () {
+                        return false !== local.showContainer;
+                    }
+                });
             }
         }), null);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$11, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(FloatingDockMobile, {
-            get items () {
-                return local.items;
-            },
-            get ["class"] () {
-                return local.mobileClass;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$13, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+            get when () {
+                return false !== local.showMobile;
             },
-            get toggleIcon () {
-                return local.mobileToggleIcon;
+            get children () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(FloatingDockMobile, {
+                    get items () {
+                        return local.items;
+                    },
+                    get ["class"] () {
+                        return local.mobileClass;
+                    },
+                    get toggleIcon () {
+                        return local.mobileToggleIcon;
+                    },
+                    get popupDirection () {
+                        return local.mobilePopupDirection ?? "top";
+                    },
+                    get cfg () {
+                        return cfg();
+                    }
+                });
             }
         }), null);
-        return _el$11;
+        return _el$13;
     })();
 };
-const FloatingDock = FloatingDock_FloatingDock;
+const floating_dock_FloatingDock = FloatingDock;
 (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.delegateEvents)([
-    "mousemove",
-    "click"
+    "click",
+    "mousemove"
 ]);
 var FooterTitle_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<h6>");
 const FooterTitle = (props)=>{
@@ -14837,7 +15039,7 @@ const steps_Steps = Object.assign(Steps, {
     Step: steps_Step
 });
 const steps = steps_Steps;
-var SvgBackground_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><ellipse></svg>", false, true, false), SvgBackground_tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle></svg>", false, true, false), SvgBackground_tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle cx=0 cy=0 r=100 opacity=0.7></svg>", false, true, false), SvgBackground_tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle cx=400 cy=0 r=120></svg>", false, true, false), SvgBackground_tmpl$5 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle cx=0 cy=400 r=100 opacity=0.7></svg>", false, true, false), SvgBackground_tmpl$6 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle cx=400 cy=400 r=120></svg>", false, true, false), SvgBackground_tmpl$7 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle cx=0 cy=200 r=70 opacity=0.6></svg>", false, true, false), _tmpl$8 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle cx=200 cy=0 r=100></svg>", false, true, false), _tmpl$9 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle cx=400 cy=200 r=100></svg>", false, true, false), _tmpl$0 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle cx=200 cy=400 r=100></svg>", false, true, false), _tmpl$1 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div><div><svg viewBox="0 0 400 400"xmlns=http://www.w3.org/2000/svg><rect width=400 height=400></rect></svg></div><canvas></canvas><div class="relative z-10 h-full w-full">'), _tmpl$10 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class="absolute inset-0 z-5">');
+var SvgBackground_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><ellipse></svg>", false, true, false), SvgBackground_tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle></svg>", false, true, false), SvgBackground_tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle cx=0 cy=0 r=100 opacity=0.7></svg>", false, true, false), SvgBackground_tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle cx=400 cy=0 r=120></svg>", false, true, false), SvgBackground_tmpl$5 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle cx=0 cy=400 r=100 opacity=0.7></svg>", false, true, false), SvgBackground_tmpl$6 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle cx=400 cy=400 r=120></svg>", false, true, false), SvgBackground_tmpl$7 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle cx=0 cy=200 r=70 opacity=0.6></svg>", false, true, false), SvgBackground_tmpl$8 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle cx=200 cy=0 r=100></svg>", false, true, false), SvgBackground_tmpl$9 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle cx=400 cy=200 r=100></svg>", false, true, false), SvgBackground_tmpl$0 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle cx=200 cy=400 r=100></svg>", false, true, false), _tmpl$1 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div><div><svg viewBox="0 0 400 400"xmlns=http://www.w3.org/2000/svg><rect width=400 height=400></rect></svg></div><canvas></canvas><div class="relative z-10 h-full w-full">'), _tmpl$10 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class="absolute inset-0 z-5">');
 function SvgBackground_hexToRgb(hex) {
     hex = hex.replace(/^#/, "");
     const bigint = Number.parseInt(hex, 16);
@@ -15007,17 +15209,17 @@ function SvgBackground(props) {
                 return _el$8;
             })(),
             (()=>{
-                var _el$9 = _tmpl$8();
+                var _el$9 = SvgBackground_tmpl$8();
                 (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$9, "fill", getIntermediateColor(0.15)));
                 return _el$9;
             })(),
             (()=>{
-                var _el$0 = _tmpl$9();
+                var _el$0 = SvgBackground_tmpl$9();
                 (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$0, "fill", getIntermediateColor(0.4)));
                 return _el$0;
             })(),
             (()=>{
-                var _el$1 = _tmpl$0();
+                var _el$1 = SvgBackground_tmpl$0();
                 (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$1, "fill", getIntermediateColor(0.85)));
                 return _el$1;
             })()
@@ -15247,12 +15449,12 @@ function Swap(props) {
     const onEl = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>wrapWithElementIfInvalid({
             node: local.onElement,
             wrapper: "div",
-            className: "swap-on"
+            className: "swap-on flex h-full w-full items-center justify-center"
         }));
     const offEl = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>wrapWithElementIfInvalid({
             node: local.offElement,
             wrapper: "div",
-            className: "swap-off"
+            className: "swap-off flex h-full w-full items-center justify-center"
         }));
     return (()=>{
         var _el$ = Swap_tmpl$(), _el$2 = _el$.firstChild;
@@ -18035,4 +18237,4 @@ const createRouteTransitionResolver = (options)=>{
         return fallback ?? noMotion;
     };
 };
-export { accordion_Accordion as Accordion, alert_Alert as Alert, AlphaSlider, artboard_Artboard as Artboard, avatar as Avatar, background_Background as Background, Badge, bottom_sheet_BottomSheet as BottomSheet, Breadcrumbs, breadcrumbs_BreadcrumbsItem as BreadcrumbsItem, browsermockup_BrowserMockup as BrowserMockup, button_Button as Button, Calendar, card_Card as Card, carousel_Carousel as Carousel, chatbubble_ChatBubble as ChatBubble, checkbox_Checkbox as Checkbox, codemockup_CodeMockup as CodeMockup, CodeMockupLine, collapse_Collapse as Collapse, CollapseContent, CollapseDetails, CollapseTitle, colorpicker_ColorInput as ColorInput, colorpicker_ColorPicker as ColorPicker, ColorPickerContext, ColorPickerFlowerSelector, colorpicker_ColorPickerGradientSelector as ColorPickerGradientSelector, ColorPickerWheelSelector, colorpicker_ColorPreview as ColorPreview, colorpicker_ColorSwatches as ColorSwatches, ColorWheel, colorpicker_ColorWheelFlower as ColorWheelFlower, connectionstatus_ConnectionStatus as ConnectionStatus, CookieConsent, CopyButton, countdown_Countdown as Countdown, diff_Diff as Diff, divider as Divider, dock as Dock, Drawer, dropdown as Dropdown, EnhancedTable, FileInput, FirefoxPWABanner, flex_Flex as Flex, FloatingDock, footer_Footer as Footer, form_Form as Form, Grid, hero_Hero as Hero, colorpicker_HueSlider as HueSlider, I18nContext, I18nProvider, icon_Icon as Icon, immersive_landing_ImmersiveLanding as ImmersiveLanding, ImmersiveLandingContext, indicator_Indicator as Indicator, input as Input, join_Join as Join, kbd_Kbd as Kbd, language_switcher_LanguageSwitcher as LanguageSwitcher, LightnessSlider, link_Link as Link, live_chat_LiveChatBubble as LiveChatBubble, LiveChatPanel, loading_Loading as Loading, mask as Mask, menu_Menu as Menu, modal_Modal as Modal, MotionDiv, navbar_Navbar as Navbar, noise_background_NoiseBackground as NoiseBackground, PWAInstallPrompt, pagination_Pagination as Pagination, phonemockup_PhoneMockup as PhoneMockup, Progress, props_table_PropsTable as PropsTable, radialprogress_RadialProgress as RadialProgress, radio_Radio as Radio, range_Range as Range, Rating, colorpicker_SaturationBrightness as SaturationBrightness, select_Select as Select, showcase_ShowcaseBlock as ShowcaseBlock, ShowcaseSection, sidenav_Sidenav as Sidenav, sidenav_SidenavButton as SidenavButton, sidenav_SidenavGroup as SidenavGroup, sidenav_SidenavItem as SidenavItem, sidenav_SidenavLink as SidenavLink, sidenav_SidenavMenu as SidenavMenu, skeleton_Skeleton as Skeleton, Stack, stat_card_StatCard as StatCard, stats_Stats as Stats, status_Status as Status, steps as Steps, streaming_table_StreamingTable as StreamingTable, Summary, SvgBackground, Swap, table_Table as Table, tabs_Tabs as Tabs, textarea_Textarea as Textarea, ThemeColorPicker, Timeline, timeline_TimelineEnd as TimelineEnd, timeline_TimelineItem as TimelineItem, timeline_TimelineMiddle as TimelineMiddle, timeline_TimelineStart as TimelineStart, toast_Toast as Toast, ToastContainer, ToastStack_ToastStack as ToastStack, toggle_Toggle as Toggle, tooltip_Tooltip as Tooltip, windowmockup_WindowMockup as WindowMockup, createHueShiftStore, createI18n, createMotionPresets, createMotionSystem, createPopmotionDriver, createRouteTransitionResolver, createStreamingTableStore, connectionstatus_ConnectionStatus as default, defaultMotionTokens, enablePopmotion, getDefaultHueShiftStore, getMotionDriver, presets_getPreset as getPreset, immediateDriver, mergeMotionTokens, motionDistances, motionDurations, motionEasings, motionPresets, noMotion, prefersReducedMotion, presets_registerPreset as registerPreset, resetHueShift, resolveEase, presets_resolvePreset as resolvePreset, routeTransition, runMotion, setMotionDriver, toastStore, useColorPickerContext, useDesktop, useFormValidation, useI18n, useImmersiveLanding, useImmersiveLandingContext };
+export { accordion_Accordion as Accordion, alert_Alert as Alert, AlphaSlider, artboard_Artboard as Artboard, avatar as Avatar, background_Background as Background, Badge, bottom_sheet_BottomSheet as BottomSheet, Breadcrumbs, breadcrumbs_BreadcrumbsItem as BreadcrumbsItem, browsermockup_BrowserMockup as BrowserMockup, button_Button as Button, Calendar, card_Card as Card, carousel_Carousel as Carousel, chatbubble_ChatBubble as ChatBubble, checkbox_Checkbox as Checkbox, codemockup_CodeMockup as CodeMockup, CodeMockupLine, collapse_Collapse as Collapse, CollapseContent, CollapseDetails, CollapseTitle, colorpicker_ColorInput as ColorInput, colorpicker_ColorPicker as ColorPicker, ColorPickerContext, ColorPickerFlowerSelector, colorpicker_ColorPickerGradientSelector as ColorPickerGradientSelector, ColorPickerWheelSelector, colorpicker_ColorPreview as ColorPreview, colorpicker_ColorSwatches as ColorSwatches, ColorWheel, colorpicker_ColorWheelFlower as ColorWheelFlower, connectionstatus_ConnectionStatus as ConnectionStatus, CookieConsent, CopyButton, countdown_Countdown as Countdown, diff_Diff as Diff, divider as Divider, dock as Dock, Drawer, dropdown as Dropdown, EnhancedTable, FileInput, FirefoxPWABanner, flex_Flex as Flex, floating_dock_FloatingDock as FloatingDock, footer_Footer as Footer, form_Form as Form, Grid, hero_Hero as Hero, colorpicker_HueSlider as HueSlider, I18nContext, I18nProvider, icon_Icon as Icon, immersive_landing_ImmersiveLanding as ImmersiveLanding, ImmersiveLandingContext, indicator_Indicator as Indicator, input as Input, join_Join as Join, kbd_Kbd as Kbd, language_switcher_LanguageSwitcher as LanguageSwitcher, LightnessSlider, link_Link as Link, live_chat_LiveChatBubble as LiveChatBubble, LiveChatPanel, loading_Loading as Loading, mask as Mask, menu_Menu as Menu, modal_Modal as Modal, MotionDiv, navbar_Navbar as Navbar, noise_background_NoiseBackground as NoiseBackground, PWAInstallPrompt, pagination_Pagination as Pagination, phonemockup_PhoneMockup as PhoneMockup, Progress, props_table_PropsTable as PropsTable, radialprogress_RadialProgress as RadialProgress, radio_Radio as Radio, range_Range as Range, Rating, colorpicker_SaturationBrightness as SaturationBrightness, select_Select as Select, showcase_ShowcaseBlock as ShowcaseBlock, ShowcaseSection, sidenav_Sidenav as Sidenav, sidenav_SidenavButton as SidenavButton, sidenav_SidenavGroup as SidenavGroup, sidenav_SidenavItem as SidenavItem, sidenav_SidenavLink as SidenavLink, sidenav_SidenavMenu as SidenavMenu, skeleton_Skeleton as Skeleton, Stack, stat_card_StatCard as StatCard, stats_Stats as Stats, status_Status as Status, steps as Steps, streaming_table_StreamingTable as StreamingTable, Summary, SvgBackground, Swap, table_Table as Table, tabs_Tabs as Tabs, textarea_Textarea as Textarea, ThemeColorPicker, Timeline, timeline_TimelineEnd as TimelineEnd, timeline_TimelineItem as TimelineItem, timeline_TimelineMiddle as TimelineMiddle, timeline_TimelineStart as TimelineStart, toast_Toast as Toast, ToastContainer, ToastStack_ToastStack as ToastStack, toggle_Toggle as Toggle, tooltip_Tooltip as Tooltip, windowmockup_WindowMockup as WindowMockup, createHueShiftStore, createI18n, createMotionPresets, createMotionSystem, createPopmotionDriver, createRouteTransitionResolver, createStreamingTableStore, connectionstatus_ConnectionStatus as default, defaultMotionTokens, enablePopmotion, getDefaultHueShiftStore, getMotionDriver, presets_getPreset as getPreset, immediateDriver, mergeMotionTokens, motionDistances, motionDurations, motionEasings, motionPresets, noMotion, prefersReducedMotion, presets_registerPreset as registerPreset, resetHueShift, resolveEase, presets_resolvePreset as resolvePreset, routeTransition, runMotion, setMotionDriver, toastStore, useColorPickerContext, useDesktop, useFormValidation, useI18n, useImmersiveLanding, useImmersiveLandingContext };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pathscale/ui",
-  "version": "0.0.138",
+  "version": "0.0.140",
   "author": "pathscale",
   "repository": {
     "type": "git",