@vinyasa/navigation 1.0.26

package/dist/esm/694.js

@@ -0,0 +1,227 @@
+import "./694.css";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronRightIcon } from "@vinyasa/icons";
+import { useThemedRef } from "@vinyasa/tokens";
+import { createContext, forwardRef, useContext, useLayoutEffect, useRef, useState } from "react";
+var expandTrigger = '_1o0hep24';
+var expandTriggerSpacer = '_1o0hep25';
+var group = '_1o0hep21';
+var icon = '_1o0hep26';
+var item = '_1o0hep22';
+var label = '_1o0hep27';
+var root = '_1o0hep20';
+var row = '_1o0hep23';
+const TreeViewContext = /*#__PURE__*/ createContext(null);
+const useTreeViewContext = ()=>{
+    const context = useContext(TreeViewContext);
+    if (!context) throw new Error('TreeView parts must be rendered inside <TreeView.Root>.');
+    return context;
+};
+const TreeViewLevelContext = /*#__PURE__*/ createContext(1);
+const TreeViewRoot = /*#__PURE__*/ forwardRef(({ selectedId, onSelect, expandedIds: expandedIdsProp, defaultExpandedIds = [], onExpandedChange, className, children, ...rest }, ref)=>{
+    const [internalExpandedIds, setInternalExpandedIds] = useState(defaultExpandedIds);
+    const [activeId, setActiveId] = useState(null);
+    const rootElementRef = useRef(null);
+    const themedRef = useThemedRef(ref);
+    const isControlled = void 0 !== expandedIdsProp;
+    const expandedIdsArray = isControlled ? expandedIdsProp : internalExpandedIds;
+    const expandedIds = new Set(expandedIdsArray);
+    const toggleExpanded = (id)=>{
+        const next = expandedIds.has(id) ? expandedIdsArray.filter((existing)=>existing !== id) : [
+            ...expandedIdsArray,
+            id
+        ];
+        if (!isControlled) setInternalExpandedIds(next);
+        onExpandedChange?.(next);
+    };
+    useLayoutEffect(()=>{
+        if (null !== activeId) return;
+        const firstItem = rootElementRef.current?.querySelector('[role="treeitem"]');
+        const firstId = firstItem?.dataset.treeId;
+        if (firstId) setActiveId(firstId);
+    }, [
+        activeId
+    ]);
+    const focusItem = (element)=>{
+        if (!element) return;
+        element.focus();
+        const id = element.dataset.treeId;
+        if (id) setActiveId(id);
+    };
+    const focusSibling = (rootElement, target, delta)=>{
+        const items = Array.from(rootElement.querySelectorAll('[role="treeitem"]'));
+        focusItem(items[items.indexOf(target) + delta]);
+    };
+    const focusFirst = (rootElement)=>{
+        focusItem(rootElement.querySelector('[role="treeitem"]'));
+    };
+    const focusLast = (rootElement)=>{
+        const items = rootElement.querySelectorAll('[role="treeitem"]');
+        focusItem(items[items.length - 1]);
+    };
+    const expandOrFocusFirstChild = (target, targetId)=>{
+        if ('true' !== target.dataset.hasChildren) return;
+        if ('true' !== target.getAttribute('aria-expanded')) return void toggleExpanded(targetId);
+        const childGroup = target.parentElement?.querySelector(':scope > [role="group"]');
+        focusItem(childGroup?.querySelector('[role="treeitem"]'));
+    };
+    const collapseOrFocusParent = (target, targetId)=>{
+        if ('true' === target.getAttribute('aria-expanded')) return void toggleExpanded(targetId);
+        const parentGroup = target.closest('[role="group"]');
+        focusItem(parentGroup?.parentElement?.querySelector(':scope > [role="treeitem"]'));
+    };
+    const keyHandlers = {
+        ArrowDown: (rootElement, target)=>{
+            focusSibling(rootElement, target, 1);
+        },
+        ArrowUp: (rootElement, target)=>{
+            focusSibling(rootElement, target, -1);
+        },
+        Home: (rootElement)=>{
+            focusFirst(rootElement);
+        },
+        End: (rootElement)=>{
+            focusLast(rootElement);
+        },
+        ArrowRight: (_rootElement, target, targetId)=>{
+            expandOrFocusFirstChild(target, targetId);
+        },
+        ArrowLeft: (_rootElement, target, targetId)=>{
+            collapseOrFocusParent(target, targetId);
+        },
+        Enter: (_rootElement, _target, targetId)=>{
+            onSelect?.(targetId);
+        },
+        ' ': (_rootElement, _target, targetId)=>{
+            onSelect?.(targetId);
+        }
+    };
+    const handleKeyDown = (event)=>{
+        const target = event.target;
+        if (!(target instanceof HTMLElement) || 'treeitem' !== target.getAttribute('role')) return;
+        const rootElement = rootElementRef.current;
+        const targetId = target.dataset.treeId;
+        const handler = keyHandlers[event.key];
+        if (!rootElement || !targetId || !handler) return;
+        event.preventDefault();
+        handler(rootElement, target, targetId);
+    };
+    return /*#__PURE__*/ jsx(TreeViewContext.Provider, {
+        value: {
+            expandedIds,
+            toggleExpanded,
+            selectedId,
+            onSelect: onSelect ?? (()=>void 0),
+            activeId,
+            setActiveId
+        },
+        children: /*#__PURE__*/ jsx("ul", {
+            ref: (node)=>{
+                rootElementRef.current = node;
+                if ('function' == typeof themedRef) themedRef(node);
+            },
+            role: "tree",
+            className: className ? `${root} ${className}` : root,
+            onKeyDown: handleKeyDown,
+            ...rest,
+            children: children
+        })
+    });
+});
+TreeViewRoot.displayName = 'TreeViewRoot';
+const TreeViewGroup = ({ className, children, ...rest })=>{
+    const level = useContext(TreeViewLevelContext);
+    return /*#__PURE__*/ jsx(TreeViewLevelContext.Provider, {
+        value: level + 1,
+        children: /*#__PURE__*/ jsx("ul", {
+            role: "group",
+            className: className ? `${group} ${className}` : group,
+            ...rest,
+            children: children
+        })
+    });
+};
+TreeViewGroup.displayName = 'TreeViewGroup';
+const TreeViewItem = ({ id, label: labelContent, icon: iconContent, disabled, children, className, ...rest })=>{
+    const { expandedIds, toggleExpanded, selectedId, onSelect, activeId, setActiveId } = useTreeViewContext();
+    const level = useContext(TreeViewLevelContext);
+    const hasChildren = Boolean(children);
+    const isExpanded = expandedIds.has(id);
+    const isSelected = selectedId === id;
+    return /*#__PURE__*/ jsxs("li", {
+        className: className ? `${item} ${className}` : item,
+        role: "none",
+        ...rest,
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                role: "treeitem",
+                "data-tree-id": id,
+                "data-has-children": hasChildren,
+                "aria-expanded": hasChildren ? isExpanded : void 0,
+                "aria-selected": isSelected,
+                "aria-disabled": disabled,
+                "aria-level": level,
+                tabIndex: activeId === id ? 0 : -1,
+                className: row,
+                onFocus: ()=>{
+                    setActiveId(id);
+                },
+                onClick: ()=>{
+                    if (disabled) return;
+                    onSelect(id);
+                    if (hasChildren) toggleExpanded(id);
+                },
+                children: [
+                    hasChildren ? /*#__PURE__*/ jsx("button", {
+                        type: "button",
+                        tabIndex: -1,
+                        "aria-hidden": "true",
+                        "data-expanded": isExpanded,
+                        className: expandTrigger,
+                        onClick: (event)=>{
+                            event.stopPropagation();
+                            if (!disabled) toggleExpanded(id);
+                        },
+                        children: /*#__PURE__*/ jsx(ChevronRightIcon, {})
+                    }) : /*#__PURE__*/ jsx("span", {
+                        className: expandTriggerSpacer,
+                        "aria-hidden": "true"
+                    }),
+                    iconContent ? /*#__PURE__*/ jsx("span", {
+                        className: icon,
+                        "aria-hidden": "true",
+                        children: iconContent
+                    }) : null,
+                    /*#__PURE__*/ jsx("span", {
+                        className: label,
+                        children: labelContent
+                    })
+                ]
+            }),
+            hasChildren && isExpanded ? children : null
+        ]
+    });
+};
+TreeViewItem.displayName = 'TreeViewItem';
+const renderNodes = (nodes)=>/*#__PURE__*/ jsx(Fragment, {
+        children: nodes.map((node)=>/*#__PURE__*/ jsx(TreeViewItem, {
+                id: node.id,
+                label: node.label,
+                icon: node.icon,
+                disabled: node.disabled,
+                children: node.children && node.children.length > 0 ? /*#__PURE__*/ jsx(TreeViewGroup, {
+                    children: renderNodes(node.children)
+                }) : void 0
+            }, node.id))
+    });
+const TreeViewImpl = ({ items, ...rest })=>/*#__PURE__*/ jsx(TreeViewRoot, {
+        ...rest,
+        children: renderNodes(items)
+    });
+TreeViewImpl.displayName = 'TreeView';
+const TreeView = Object.assign(TreeViewImpl, {
+    Root: TreeViewRoot,
+    Group: TreeViewGroup,
+    Item: TreeViewItem
+});
+export { TreeView };

package/dist/esm/814.css

@@ -0,0 +1,197 @@
+@keyframes bzjbii7 {
+  from {
+    opacity: 0;
+    transform: translateY(-.25rem);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.bzjbii0 {
+  position: relative;
+}
+
+.bzjbii1 {
+  align-items: center;
+  gap: var(--vinyasa-space1);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  position: relative;
+}
+
+.bzjbii2 {
+  align-items: center;
+  gap: var(--vinyasa-space1);
+  height: 2.5rem;
+  padding: 0 var(--vinyasa-space3);
+  border-radius: var(--vinyasa-radius-sm);
+  color: var(--vinyasa-text-muted);
+  font-family: var(--vinyasa-font-family-sans);
+  font-size: var(--vinyasa-font-size-sm);
+  font-weight: var(--vinyasa-font-weight-medium);
+  cursor: pointer;
+  transition: background-color var(--vinyasa-motion-duration-fast) var(--vinyasa-motion-easing-standard), color var(--vinyasa-motion-duration-fast) var(--vinyasa-motion-easing-standard);
+  background-color: #0000;
+  border: none;
+  display: inline-flex;
+}
+
+.bzjbii2:hover {
+  background-color: var(--vinyasa-secondary);
+  color: var(--vinyasa-text-default);
+}
+
+.bzjbii2:focus-visible {
+  outline: 2px solid var(--vinyasa-focus);
+  outline-offset: -2px;
+}
+
+.bzjbii2[data-state="open"] {
+  background-color: var(--vinyasa-secondary);
+  color: var(--vinyasa-text-default);
+}
+
+.bzjbii3 {
+  transition: transform var(--vinyasa-motion-duration-fast) var(--vinyasa-motion-easing-standard);
+  font-size: .875rem;
+  display: inline-flex;
+}
+
+[data-state="open"] > .bzjbii3 {
+  transform: rotate(180deg);
+}
+
+.bzjbii4 {
+  height: 2.5rem;
+  padding: 0 var(--vinyasa-space3);
+  border-radius: var(--vinyasa-radius-sm);
+  color: var(--vinyasa-text-muted);
+  font-family: var(--vinyasa-font-family-sans);
+  font-size: var(--vinyasa-font-size-sm);
+  font-weight: var(--vinyasa-font-weight-medium);
+  cursor: pointer;
+  transition: background-color var(--vinyasa-motion-duration-fast) var(--vinyasa-motion-easing-standard), color var(--vinyasa-motion-duration-fast) var(--vinyasa-motion-easing-standard);
+  align-items: center;
+  text-decoration: none;
+  display: inline-flex;
+}
+
+.bzjbii4:hover {
+  background-color: var(--vinyasa-secondary);
+  color: var(--vinyasa-text-default);
+}
+
+.bzjbii4:focus-visible {
+  outline: 2px solid var(--vinyasa-focus);
+  outline-offset: -2px;
+}
+
+.bzjbii4[data-active] {
+  background-color: var(--vinyasa-tertiary);
+  color: var(--vinyasa-on-tertiary);
+  font-weight: var(--vinyasa-font-weight-semibold);
+}
+
+.bzjbii5 {
+  background-color: var(--vinyasa-primary);
+  height: 2px;
+  transition: transform var(--vinyasa-motion-duration-fast) var(--vinyasa-motion-easing-standard), width var(--vinyasa-motion-duration-fast) var(--vinyasa-motion-easing-standard);
+  bottom: 0;
+}
+
+.bzjbii5[data-state="hidden"] {
+  opacity: 0;
+}
+
+.bzjbii6 {
+  width: 100%;
+  padding-top: var(--vinyasa-space2);
+  justify-content: center;
+  display: flex;
+  position: absolute;
+  top: 100%;
+  left: 0;
+}
+
+.bzjbii8 {
+  transform-origin: top;
+  width: var(--radix-navigation-menu-viewport-width);
+  height: var(--radix-navigation-menu-viewport-height);
+  border-radius: var(--vinyasa-radius-md);
+  background-color: var(--vinyasa-surface);
+  box-shadow: var(--vinyasa-elevation-overlay);
+  transition: width var(--vinyasa-motion-duration-normal) var(--vinyasa-motion-easing-standard), height var(--vinyasa-motion-duration-normal) var(--vinyasa-motion-easing-standard);
+  flex-shrink: 0;
+  position: relative;
+  overflow: hidden;
+}
+
+.bzjbii9 {
+  padding: var(--vinyasa-space4);
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.bzjbii9[data-state="open"] {
+  animation: bzjbii7 var(--vinyasa-motion-duration-fast) var(--vinyasa-motion-easing-standard);
+}
+
+.bzjbiia {
+  gap: var(--vinyasa-space2);
+  grid-template-columns: repeat(2, minmax(12rem, 1fr));
+  display: grid;
+}
+
+.bzjbiib {
+  align-items: flex-start;
+  gap: var(--vinyasa-space1);
+  height: auto;
+  padding: var(--vinyasa-space3);
+  border-radius: var(--vinyasa-radius-sm);
+  color: inherit;
+  transition: background-color var(--vinyasa-motion-duration-fast) var(--vinyasa-motion-easing-standard);
+  flex-direction: column;
+  text-decoration: none;
+  display: flex;
+}
+
+.bzjbiib:hover {
+  background-color: var(--vinyasa-secondary);
+}
+
+.bzjbiib:focus-visible {
+  outline: 2px solid var(--vinyasa-focus);
+  outline-offset: -2px;
+}
+
+.bzjbiib[data-active] {
+  background-color: var(--vinyasa-tertiary);
+}
+
+.bzjbiic {
+  font-size: var(--vinyasa-font-size-sm);
+  font-weight: var(--vinyasa-font-weight-medium);
+  color: var(--vinyasa-text-default);
+}
+
+[data-active] .bzjbiic {
+  color: var(--vinyasa-on-tertiary);
+  font-weight: var(--vinyasa-font-weight-semibold);
+}
+
+.bzjbiid {
+  font-size: var(--vinyasa-font-size-xs);
+  color: var(--vinyasa-text-muted);
+}
+
+[data-active] .bzjbiid {
+  color: var(--vinyasa-on-tertiary);
+  opacity: .8;
+}
+

package/dist/esm/814.js

@@ -0,0 +1,146 @@
+import "./814.css";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDownIcon } from "@vinyasa/icons";
+import { useThemedRef } from "@vinyasa/tokens";
+import { forwardRef } from "react";
+import * as __rspack_external__radix_ui_react_navigation_menu_25af01f6 from "@radix-ui/react-navigation-menu";
+var content = 'bzjbii9';
+var contentGrid = 'bzjbiia';
+var contentLink = 'bzjbiib';
+var contentLinkDescription = 'bzjbiid';
+var contentLinkTitle = 'bzjbiic';
+var indicator = 'bzjbii5';
+var NavigationMenu_css_link = 'bzjbii4';
+var list = 'bzjbii1';
+var root = 'bzjbii0';
+var trigger = 'bzjbii2';
+var triggerIcon = 'bzjbii3';
+var viewport = 'bzjbii8';
+var viewportPosition = 'bzjbii6';
+const NavigationMenuRoot = /*#__PURE__*/ forwardRef(({ className, children, ...rest }, ref)=>{
+    const themedRef = useThemedRef(ref);
+    return /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_navigation_menu_25af01f6.Root, {
+        ref: themedRef,
+        className: className ? `${root} ${className}` : root,
+        ...rest,
+        children: children
+    });
+});
+NavigationMenuRoot.displayName = 'NavigationMenuRoot';
+const NavigationMenuList = ({ className, ...rest })=>/*#__PURE__*/ jsx(__rspack_external__radix_ui_react_navigation_menu_25af01f6.List, {
+        className: className ? `${list} ${className}` : list,
+        ...rest
+    });
+NavigationMenuList.displayName = 'NavigationMenuList';
+const NavigationMenuItem = __rspack_external__radix_ui_react_navigation_menu_25af01f6.Item;
+const NavigationMenuTrigger = /*#__PURE__*/ forwardRef(({ className, children, ...rest }, ref)=>/*#__PURE__*/ jsxs(__rspack_external__radix_ui_react_navigation_menu_25af01f6.Trigger, {
+        ref: ref,
+        className: className ? `${trigger} ${className}` : trigger,
+        ...rest,
+        children: [
+            children,
+            /*#__PURE__*/ jsx(ChevronDownIcon, {
+                className: triggerIcon,
+                "aria-hidden": true
+            })
+        ]
+    }));
+NavigationMenuTrigger.displayName = 'NavigationMenuTrigger';
+const NavigationMenuLink = ({ className, ...rest })=>/*#__PURE__*/ jsx(__rspack_external__radix_ui_react_navigation_menu_25af01f6.Link, {
+        className: className ? `${NavigationMenu_css_link} ${className}` : NavigationMenu_css_link,
+        ...rest
+    });
+NavigationMenuLink.displayName = 'NavigationMenuLink';
+const NavigationMenuContent = ({ className, ...rest })=>/*#__PURE__*/ jsx(__rspack_external__radix_ui_react_navigation_menu_25af01f6.Content, {
+        className: className ? `${content} ${className}` : content,
+        ...rest
+    });
+NavigationMenuContent.displayName = 'NavigationMenuContent';
+const NavigationMenuIndicator = ({ className, ...rest })=>/*#__PURE__*/ jsx(__rspack_external__radix_ui_react_navigation_menu_25af01f6.Indicator, {
+        className: className ? `${indicator} ${className}` : indicator,
+        ...rest
+    });
+NavigationMenuIndicator.displayName = 'NavigationMenuIndicator';
+const NavigationMenuViewport = ({ className, ...rest })=>/*#__PURE__*/ jsx("div", {
+        className: viewportPosition,
+        children: /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_navigation_menu_25af01f6.Viewport, {
+            className: className ? `${viewport} ${className}` : viewport,
+            ...rest
+        })
+    });
+NavigationMenuViewport.displayName = 'NavigationMenuViewport';
+const SimpleLink = ({ href, active, linkComponent: Link, className, children })=>{
+    if (Link) return /*#__PURE__*/ jsx(NavigationMenuLink, {
+        asChild: true,
+        active: active,
+        className: className,
+        children: /*#__PURE__*/ jsx(Link, {
+            href: href,
+            children: children
+        })
+    });
+    return /*#__PURE__*/ jsx(NavigationMenuLink, {
+        href: href,
+        active: active,
+        className: className,
+        children: children
+    });
+};
+const NavigationMenuImpl = ({ items, linkComponent, ...rest })=>/*#__PURE__*/ jsxs(NavigationMenuRoot, {
+        ...rest,
+        children: [
+            /*#__PURE__*/ jsxs(NavigationMenuList, {
+                children: [
+                    items.map((itemSpec)=>/*#__PURE__*/ jsx(NavigationMenuItem, {
+                            children: itemSpec.links ? /*#__PURE__*/ jsxs(Fragment, {
+                                children: [
+                                    /*#__PURE__*/ jsx(NavigationMenuTrigger, {
+                                        children: itemSpec.label
+                                    }),
+                                    /*#__PURE__*/ jsx(NavigationMenuContent, {
+                                        children: /*#__PURE__*/ jsx("div", {
+                                            className: contentGrid,
+                                            children: itemSpec.links.map((linkSpec)=>/*#__PURE__*/ jsxs(SimpleLink, {
+                                                    href: linkSpec.href,
+                                                    active: linkSpec.active,
+                                                    linkComponent: linkComponent,
+                                                    className: contentLink,
+                                                    children: [
+                                                        /*#__PURE__*/ jsx("span", {
+                                                            className: contentLinkTitle,
+                                                            children: linkSpec.label
+                                                        }),
+                                                        linkSpec.description ? /*#__PURE__*/ jsx("span", {
+                                                            className: contentLinkDescription,
+                                                            children: linkSpec.description
+                                                        }) : null
+                                                    ]
+                                                }, linkSpec.key))
+                                        })
+                                    })
+                                ]
+                            }) : /*#__PURE__*/ jsx(SimpleLink, {
+                                href: itemSpec.href,
+                                active: itemSpec.active,
+                                linkComponent: linkComponent,
+                                children: itemSpec.label
+                            })
+                        }, itemSpec.key)),
+                    /*#__PURE__*/ jsx(NavigationMenuIndicator, {})
+                ]
+            }),
+            /*#__PURE__*/ jsx(NavigationMenuViewport, {})
+        ]
+    });
+NavigationMenuImpl.displayName = 'NavigationMenu';
+const NavigationMenu = Object.assign(NavigationMenuImpl, {
+    Root: NavigationMenuRoot,
+    List: NavigationMenuList,
+    Item: NavigationMenuItem,
+    Trigger: NavigationMenuTrigger,
+    Link: NavigationMenuLink,
+    Content: NavigationMenuContent,
+    Indicator: NavigationMenuIndicator,
+    Viewport: NavigationMenuViewport
+});
+export { NavigationMenu };

package/dist/esm/862.css

@@ -0,0 +1,127 @@
+._383lbb0 {
+  align-items: center;
+  gap: var(--vinyasa-space4);
+  height: 3.5rem;
+  padding: 0 var(--vinyasa-space4);
+  background-color: var(--vinyasa-surface);
+  border-bottom: var(--vinyasa-border-width-thin) solid var(--vinyasa-border-color-default);
+  display: flex;
+  position: relative;
+}
+
+._383lbb1 {
+  font-family: var(--vinyasa-font-family-sans);
+  font-size: var(--vinyasa-font-size-md);
+  font-weight: var(--vinyasa-font-weight-semibold);
+  color: var(--vinyasa-text-default);
+  flex-shrink: 0;
+  align-items: center;
+  text-decoration: none;
+  display: flex;
+}
+
+._383lbb2 {
+  align-items: center;
+  gap: var(--vinyasa-space1);
+  flex: 1;
+  display: flex;
+}
+
+._383lbb3 {
+  align-items: center;
+  gap: var(--vinyasa-space2);
+  flex-shrink: 0;
+  display: flex;
+}
+
+._383lbb4 {
+  height: 100%;
+  padding: 0 var(--vinyasa-space3);
+  color: var(--vinyasa-text-muted);
+  font-family: var(--vinyasa-font-family-sans);
+  font-size: var(--vinyasa-font-size-sm);
+  font-weight: var(--vinyasa-font-weight-medium);
+  cursor: pointer;
+  white-space: nowrap;
+  background-color: #0000;
+  border: none;
+  border-bottom: 2px solid #0000;
+  align-items: center;
+  text-decoration: none;
+  display: inline-flex;
+}
+
+._383lbb4:hover:not(:disabled) {
+  color: var(--vinyasa-text-default);
+}
+
+._383lbb4:focus-visible {
+  outline: 2px solid var(--vinyasa-focus);
+  outline-offset: -2px;
+}
+
+._383lbb4:disabled {
+  opacity: var(--vinyasa-opacity-disabled);
+  cursor: not-allowed;
+}
+
+._383lbb5 {
+  border-bottom-color: var(--vinyasa-primary);
+  color: var(--vinyasa-text-default);
+}
+
+._383lbb6 {
+  border-radius: var(--vinyasa-radius-sm);
+  width: 2rem;
+  height: 2rem;
+  color: var(--vinyasa-text-default);
+  cursor: pointer;
+  background-color: #0000;
+  border: none;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  margin-left: auto;
+  display: none;
+}
+
+._383lbb6:hover {
+  background-color: var(--vinyasa-secondary);
+}
+
+._383lbb6:focus-visible {
+  outline: 2px solid var(--vinyasa-focus);
+  outline-offset: 2px;
+}
+
+@media (max-width: 768px) {
+  ._383lbb2 {
+    padding: var(--vinyasa-space2);
+    background-color: var(--vinyasa-surface);
+    border-bottom: var(--vinyasa-border-width-thin) solid var(--vinyasa-border-color-default);
+    box-shadow: var(--vinyasa-elevation-overlay);
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+  }
+
+  ._383lbb2:not([data-open="true"]) {
+    display: none;
+  }
+
+  ._383lbb4 {
+    height: auto;
+    padding: var(--vinyasa-space3) var(--vinyasa-space3);
+    border-radius: var(--vinyasa-radius-sm);
+    border-bottom: none;
+  }
+
+  ._383lbb6 {
+    display: inline-flex;
+  }
+}
+