ui-svelte 0.2.1 → 0.2.3

package/dist/hooks/use-search.svelte.d.ts

@@ -1,8 +1,9 @@
+import type { IconData } from '../types.svelte.js';
 export interface SearchOption {
     id: string | number;
     label: string;
     description?: string;
-    icon?: string;
+    icon?: IconData;
     src?: string;
     disabled?: boolean;
     [key: string]: unknown;

package/dist/index.css

@@ -51,12 +51,13 @@
 @import './layout/css/app-bar.css';
 @import './layout/css/bottom-bar.css';
 @import './layout/css/footer.css';
-@import './layout/css/footer-links.css';
 @import './layout/css/scaffold.css';
 @import './layout/css/sidebar.css';
 
 @import './navigation/css/bottom-nav.css';
 @import './navigation/css/nav-menu.css';
+@import './navigation/css/footer-nav.css';
+@import './navigation/css/footer-group.css';
 @import './navigation/css/side-nav.css';
 @import './navigation/css/tabs.css';
 

package/dist/index.d.ts

@@ -22,7 +22,7 @@ import Code from './display/Code.svelte';
 import Collapsible from './display/Collapsible.svelte';
 import Divider from './display/Divider.svelte';
 import Empty from './display/Empty.svelte';
-import Icon from './display/Icon.svelte';
+import Icon, { type IconData } from './display/Icon.svelte';
 import Item from './display/Item.svelte';
 import Marquee from './display/Marquee.svelte';
 import Section from './display/Section.svelte';
@@ -45,12 +45,13 @@ import Toggle from './form/Toggle.svelte';
 import AppBar from './layout/AppBar.svelte';
 import Provider from './layout/Provider.svelte';
 import Footer from './layout/Footer.svelte';
-import FooterLinks from './layout/FooterLinks.svelte';
 import Scaffold from './layout/Scaffold.svelte';
 import Sidebar from './layout/Sidebar.svelte';
 import NavMenu from './navigation/NavMenu.svelte';
 import BottomNav from './navigation/BottomNav.svelte';
-import SideNav from './navigation/SideNav.svelte';
+import FooterNav from './navigation/FooterNav.svelte';
+import FooterGroup from './navigation/FooterGroup.svelte';
+import SideNav, { type SideNavItem, type SideNavSubItem } from './navigation/SideNav.svelte';
 import Tabs from './navigation/Tabs.svelte';
 import AlertDialog from './overlay/AlertDialog.svelte';
 import Command from './overlay/Command.svelte';
@@ -73,4 +74,5 @@ import { useAuth } from './hooks/use-auth.svelte.js';
 import { theme } from './stores/theme.svelte.js';
 import { useSearch } from './hooks/use-search.svelte.js';
 import { useChat } from './hooks/use-chat.svelte.js';
-export { AreaChart, ArcChart, BarChart, Candlestick, LineChart, PieChart, Alert, AlertDialog, AppBar, Accordion, Avatar, Audio, Badge, Button, BottomNav, Carousel, Card, ChatBox, Checkbox, Chip, Code, Collapsible, Command, ComboBox, CsvField, DateField, Drawer, Dropzone, Divider, Dropdown, Empty, Footer, FooterLinks, formatCurrency, formatDate, formatNumber, getWeekdays, i18n, Icon, IconButton, ImageCropper, Item, initLanguage, Modal, Marquee, NavMenu, PasswordField, PhoneField, PinField, plural, PopoverStack, Provider, RadioGroup, Record, Scaffold, Section, Select, setLanguage, Sidebar, SideNav, Slider, t, Table, Tabs, TextField, Textarea, theme, Toast, toast, Toggle, ToggleTheme, Tooltip, useAuth, useChat, useClipboard, useFetch, useForm, useLocalStorage, useScroll, useSearch, useTable, useWebSocket, Video };
+export { AreaChart, ArcChart, BarChart, Candlestick, LineChart, PieChart, Alert, AlertDialog, AppBar, Accordion, Avatar, Audio, Badge, Button, BottomNav, Carousel, Card, ChatBox, Checkbox, Chip, Code, Collapsible, Command, ComboBox, CsvField, DateField, Drawer, Dropzone, Divider, Dropdown, Empty, Footer, FooterNav, FooterGroup, formatCurrency, formatDate, formatNumber, getWeekdays, i18n, Icon, IconButton, ImageCropper, Item, initLanguage, Modal, Marquee, NavMenu, PasswordField, PhoneField, PinField, plural, PopoverStack, Provider, RadioGroup, Record, Scaffold, Section, Select, setLanguage, Sidebar, SideNav, Slider, t, Table, Tabs, TextField, Textarea, theme, Toast, toast, Toggle, ToggleTheme, Tooltip, useAuth, useChat, useClipboard, useFetch, useForm, useLocalStorage, useScroll, useSearch, useTable, useWebSocket, Video };
+export type { IconData, SideNavItem, SideNavSubItem };

package/dist/index.js

@@ -22,7 +22,7 @@ import Code from './display/Code.svelte';
 import Collapsible from './display/Collapsible.svelte';
 import Divider from './display/Divider.svelte';
 import Empty from './display/Empty.svelte';
-import Icon from './display/Icon.svelte';
+import Icon, {} from './display/Icon.svelte';
 import Item from './display/Item.svelte';
 import Marquee from './display/Marquee.svelte';
 import Section from './display/Section.svelte';
@@ -45,12 +45,13 @@ import Toggle from './form/Toggle.svelte';
 import AppBar from './layout/AppBar.svelte';
 import Provider from './layout/Provider.svelte';
 import Footer from './layout/Footer.svelte';
-import FooterLinks from './layout/FooterLinks.svelte';
 import Scaffold from './layout/Scaffold.svelte';
 import Sidebar from './layout/Sidebar.svelte';
 import NavMenu from './navigation/NavMenu.svelte';
 import BottomNav from './navigation/BottomNav.svelte';
-import SideNav from './navigation/SideNav.svelte';
+import FooterNav from './navigation/FooterNav.svelte';
+import FooterGroup from './navigation/FooterGroup.svelte';
+import SideNav, {} from './navigation/SideNav.svelte';
 import Tabs from './navigation/Tabs.svelte';
 import AlertDialog from './overlay/AlertDialog.svelte';
 import Command from './overlay/Command.svelte';
@@ -73,4 +74,4 @@ import { useAuth } from './hooks/use-auth.svelte.js';
 import { theme } from './stores/theme.svelte.js';
 import { useSearch } from './hooks/use-search.svelte.js';
 import { useChat } from './hooks/use-chat.svelte.js';
-export { AreaChart, ArcChart, BarChart, Candlestick, LineChart, PieChart, Alert, AlertDialog, AppBar, Accordion, Avatar, Audio, Badge, Button, BottomNav, Carousel, Card, ChatBox, Checkbox, Chip, Code, Collapsible, Command, ComboBox, CsvField, DateField, Drawer, Dropzone, Divider, Dropdown, Empty, Footer, FooterLinks, formatCurrency, formatDate, formatNumber, getWeekdays, i18n, Icon, IconButton, ImageCropper, Item, initLanguage, Modal, Marquee, NavMenu, PasswordField, PhoneField, PinField, plural, PopoverStack, Provider, RadioGroup, Record, Scaffold, Section, Select, setLanguage, Sidebar, SideNav, Slider, t, Table, Tabs, TextField, Textarea, theme, Toast, toast, Toggle, ToggleTheme, Tooltip, useAuth, useChat, useClipboard, useFetch, useForm, useLocalStorage, useScroll, useSearch, useTable, useWebSocket, Video };
+export { AreaChart, ArcChart, BarChart, Candlestick, LineChart, PieChart, Alert, AlertDialog, AppBar, Accordion, Avatar, Audio, Badge, Button, BottomNav, Carousel, Card, ChatBox, Checkbox, Chip, Code, Collapsible, Command, ComboBox, CsvField, DateField, Drawer, Dropzone, Divider, Dropdown, Empty, Footer, FooterNav, FooterGroup, formatCurrency, formatDate, formatNumber, getWeekdays, i18n, Icon, IconButton, ImageCropper, Item, initLanguage, Modal, Marquee, NavMenu, PasswordField, PhoneField, PinField, plural, PopoverStack, Provider, RadioGroup, Record, Scaffold, Section, Select, setLanguage, Sidebar, SideNav, Slider, t, Table, Tabs, TextField, Textarea, theme, Toast, toast, Toggle, ToggleTheme, Tooltip, useAuth, useChat, useClipboard, useFetch, useForm, useLocalStorage, useScroll, useSearch, useTable, useWebSocket, Video };

package/dist/layout/AppBar.svelte

@@ -7,7 +7,7 @@
 		start?: Snippet;
 		center?: Snippet;
 		end?: Snippet;
-		class?: string;
+		rootClass?: string;
 		contentClass?: string;
 		startClass?: string;
 		centerClass?: string;
@@ -23,7 +23,7 @@
 		start,
 		center,
 		end,
-		class: className,
+		rootClass,
 		contentClass,
 		startClass,
 		centerClass,
@@ -80,7 +80,7 @@
 		shouldBlur && 'is-blurred',
 		isHidden && 'is-hidden',
 		isSticky && 'is-sticky',
-		className
+		rootClass
 	)}
 >
 	<div class={cn('appbar-content', isBoxed && 'boxed', contentClass)}>

package/dist/layout/AppBar.svelte.d.ts

@@ -3,7 +3,7 @@ type Props = {
     start?: Snippet;
     center?: Snippet;
     end?: Snippet;
-    class?: string;
+    rootClass?: string;
     contentClass?: string;
     startClass?: string;
     centerClass?: string;

package/dist/layout/Footer.svelte

@@ -7,7 +7,7 @@
 		start?: Snippet;
 		center?: Snippet;
 		end?: Snippet;
-		class?: string;
+		rootClass?: string;
 		contentClass?: string;
 		startClass?: string;
 		centerClass?: string;
@@ -22,7 +22,7 @@
 		start,
 		center,
 		end,
-		class: className,
+		rootClass,
 		contentClass,
 		startClass,
 		centerClass,
@@ -73,7 +73,7 @@
 		isBordered && 'is-bordered',
 		shouldBlur && 'is-blurred',
 		isHidden && 'is-hidden',
-		className
+		rootClass
 	)}
 >
 	<div class={cn('footer-content', isBoxed && 'boxed', contentClass)}>

package/dist/layout/Footer.svelte.d.ts

@@ -3,7 +3,7 @@ type Props = {
     start?: Snippet;
     center?: Snippet;
     end?: Snippet;
-    class?: string;
+    rootClass?: string;
     contentClass?: string;
     startClass?: string;
     centerClass?: string;

package/dist/layout/Sidebar.svelte

@@ -6,24 +6,17 @@
 		children: Snippet;
 		header?: Snippet;
 		footer?: Snippet;
-		class?: string;
+		rootClass?: string;
 		contentClass?: string;
 		headerClass?: string;
 		footerClass?: string;
 	};
 
-	const {
-		children,
-		header,
-		footer,
-		class: className,
-		contentClass,
-		headerClass,
-		footerClass
-	}: Props = $props();
+	const { children, header, footer, rootClass, contentClass, headerClass, footerClass }: Props =
+		$props();
 </script>
 
-<aside class={cn('sidebar', className)}>
+<aside class={cn('sidebar', rootClass)}>
 	{#if header}
 		<div class={cn('sidebar-header', headerClass)}>
 			{@render header()}

package/dist/layout/Sidebar.svelte.d.ts

@@ -3,7 +3,7 @@ type Props = {
     children: Snippet;
     header?: Snippet;
     footer?: Snippet;
-    class?: string;
+    rootClass?: string;
     contentClass?: string;
     headerClass?: string;
     footerClass?: string;

package/dist/navigation/BottomNav.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+	import { page } from '$app/state';
+	import { Icon, type IconData } from '../index.js';
+	import { cn } from '../utils/class-names.js';
+
+	type BottomNavItem = {
+		id: string;
+		label?: string;
+		icon: IconData;
+		href?: string;
+		onclick?: (item: BottomNavItem) => void;
+	};
+
+	type Props = {
+		items: BottomNavItem[];
+		variant?: 'primary' | 'secondary' | 'muted';
+		size?: 'sm' | 'md' | 'lg';
+		showLabels?: boolean;
+		class?: string;
+	};
+
+	const {
+		items = [],
+		class: className,
+		variant = 'primary',
+		size = 'md',
+		showLabels = true
+	}: Props = $props();
+
+	const variantClasses = {
+		primary: 'bottomnav-primary',
+		secondary: 'bottomnav-secondary',
+		muted: 'bottomnav-muted'
+	};
+
+	const sizeClasses = {
+		sm: 'is-sm',
+		md: 'is-md',
+		lg: 'is-lg'
+	};
+
+	function isItemActive(href?: string): boolean {
+		if (!href) return false;
+		return page.url.pathname === href || page.url.pathname.startsWith(href + '/');
+	}
+
+	function handleItemClick(item: BottomNavItem) {
+		if (item.onclick) {
+			item.onclick(item);
+		}
+	}
+</script>
+
+<nav
+	class={cn(
+		'bottomnav',
+		variantClasses[variant],
+		sizeClasses[size],
+		!showLabels && 'is-icon-only',
+		className
+	)}
+>
+	{#each items as item}
+		{#if item.href}
+			<a href={item.href} class={cn('bottomnav-item', isItemActive(item.href) && 'is-active')}>
+				<Icon icon={item.icon} class="bottomnav-icon" />
+				{#if showLabels && item.label}
+					<span class="bottomnav-label">{item.label}</span>
+				{/if}
+			</a>
+		{:else}
+			<button type="button" class="bottomnav-item" onclick={() => handleItemClick(item)}>
+				<Icon icon={item.icon} class="bottomnav-icon" />
+				{#if showLabels && item.label}
+					<span class="bottomnav-label">{item.label}</span>
+				{/if}
+			</button>
+		{/if}
+	{/each}
+</nav>

package/dist/navigation/FooterGroup.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+	import { cn } from '../utils/class-names.js';
+	import type { Snippet } from 'svelte';
+
+	type FooterLink = {
+		label: string;
+		href: string;
+		external?: boolean;
+	};
+
+	type Props = {
+		title?: string;
+		links?: FooterLink[];
+		children?: Snippet;
+		class?: string;
+	};
+
+	const { title, links = [], children, class: className }: Props = $props();
+</script>
+
+<div class={cn('footer-group', className)}>
+	{#if title}
+		<h3 class="footer-group-title">{title}</h3>
+	{/if}
+
+	{#if links.length > 0}
+		<ul class="footer-group-links">
+			{#each links as link}
+				<li>
+					<a
+						href={link.href}
+						class="footer-group-link"
+						target={link.external ? '_blank' : undefined}
+						rel={link.external ? 'noopener noreferrer' : undefined}
+					>
+						{link.label}
+						{#if link.external}
+							<span class="sr-only">(abre en nueva ventana)</span>
+						{/if}
+					</a>
+				</li>
+			{/each}
+		</ul>
+	{/if}
+
+	{#if children}
+		<div class="footer-group-content">
+			{@render children()}
+		</div>
+	{/if}
+</div>

package/dist/navigation/FooterGroup.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+type FooterLink = {
+    label: string;
+    href: string;
+    external?: boolean;
+};
+type Props = {
+    title?: string;
+    links?: FooterLink[];
+    children?: Snippet;
+    class?: string;
+};
+declare const FooterGroup: import("svelte").Component<Props, {}, "">;
+type FooterGroup = ReturnType<typeof FooterGroup>;
+export default FooterGroup;

package/dist/{layout/FooterLinks.svelte → navigation/FooterNav.svelte}

@@ -19,9 +19,9 @@
 	}
 </script>
 
-<div class={cn('footer-links', className)}>
+<div class={cn('footer-nav', className)}>
 	{#each links as link}
-		<a href={link.href} class={cn('footer-link', isLinkActive(link.href) && 'is-active')}>
+		<a href={link.href} class={cn('footer-nav-link', isLinkActive(link.href) && 'is-active')}>
 			{link.label}
 		</a>
 	{/each}

package/dist/navigation/FooterNav.svelte.d.ts

@@ -0,0 +1,11 @@
+type FooterLink = {
+    label: string;
+    href: string;
+};
+type Props = {
+    links: FooterLink[];
+    class?: string;
+};
+declare const FooterNav: import("svelte").Component<Props, {}, "">;
+type FooterNav = ReturnType<typeof FooterNav>;
+export default FooterNav;

package/dist/navigation/SideNav.svelte

@@ -1,35 +1,36 @@
-<script lang="ts">
-	import { page } from '$app/state';
-	import type { IconData } from '../display/Icon.svelte';
-	import { ChevronRight24RegularIcon } from '../icons/index.js';
-	import { Icon } from '../index.js';
-	import { cn } from '../utils/class-names.js';
-	import type { Snippet } from 'svelte';
-	import { slide } from 'svelte/transition';
-
-	type SubmenuItem = {
+<script lang="ts" module>
+	export type SideNavSubItem = {
 		label: string;
 		href?: string;
-		onclick?: (item: SubmenuItem) => void;
+		onclick?: (item: SideNavSubItem) => void;
 		description?: string;
 		status?: string | Snippet;
 		icon?: IconData;
 	};
 
-	type NavItem = {
+	export type SideNavItem = {
 		type?: 'item' | 'divider' | 'header' | 'submenu';
 		label?: string;
 		description?: string;
 		href?: string;
-		onclick?: (item: NavItem) => void;
+		onclick?: (item: SideNavItem) => void;
 		status?: string | Snippet;
 		icon?: IconData;
-		subitems?: SubmenuItem[];
+		subitems?: SideNavSubItem[];
 		open?: boolean;
 	};
+</script>
+
+<script lang="ts">
+	import { page } from '$app/state';
+	import { ChevronRight24RegularIcon } from '../icons/index.js';
+	import { Icon, type IconData } from '../index.js';
+	import { cn } from '../utils/class-names.js';
+	import type { Snippet } from 'svelte';
+	import { slide } from 'svelte/transition';
 
 	type Props = {
-		items: NavItem[];
+		items: SideNavItem[];
 		variant?: 'primary' | 'secondary' | 'muted';
 		size?: 'sm' | 'md' | 'lg';
 		class?: string;
@@ -97,7 +98,7 @@
 	}
 </script>
 
-{#snippet navItemContent(item: NavItem | SubmenuItem, isSubitem = false)}
+{#snippet navItemContent(item: SideNavItem | SideNavSubItem, isSubitem = false)}
 	<div class="sidenav-content">
 		<div class="sidenav-label">{item.label}</div>
 		{#if item.description && (isExpanded || !isCollapsible)}

package/dist/navigation/SideNav.svelte.d.ts

@@ -0,0 +1,33 @@
+export type SideNavSubItem = {
+    label: string;
+    href?: string;
+    onclick?: (item: SideNavSubItem) => void;
+    description?: string;
+    status?: string | Snippet;
+    icon?: IconData;
+};
+export type SideNavItem = {
+    type?: 'item' | 'divider' | 'header' | 'submenu';
+    label?: string;
+    description?: string;
+    href?: string;
+    onclick?: (item: SideNavItem) => void;
+    status?: string | Snippet;
+    icon?: IconData;
+    subitems?: SideNavSubItem[];
+    open?: boolean;
+};
+import { type IconData } from '../index.js';
+import type { Snippet } from 'svelte';
+type Props = {
+    items: SideNavItem[];
+    variant?: 'primary' | 'secondary' | 'muted';
+    size?: 'sm' | 'md' | 'lg';
+    class?: string;
+    isWide?: boolean;
+    isCompact?: boolean;
+    isCollapsible?: boolean;
+};
+declare const SideNav: import("svelte").Component<Props, {}, "">;
+type SideNav = ReturnType<typeof SideNav>;
+export default SideNav;

package/dist/navigation/Tabs.svelte

@@ -12,13 +12,13 @@
 		position?: 'top' | 'bottom' | 'start' | 'end';
 		variant?: 'primary' | 'secondary' | 'muted' | 'outline' | 'line' | 'ghost';
 		pill?: boolean;
-		class?: string;
+		rootClass?: string;
 		tabListClass?: string;
 		tabClass?: string;
 		tabContentClass?: string;
 	};
 	const {
-		class: className,
+		rootClass,
 		tabClass,
 		tabListClass,
 		tabContentClass,
@@ -51,7 +51,7 @@
 	}
 </script>
 
-<div class={cn('tabs', positionClasses[position], className)}>
+<div class={cn('tabs', positionClasses[position], rootClass)}>
 	<div class={cn('tabs-list', variantClasses[variant], pill && 'is-pill', tabListClass)}>
 		{#each tabs as tab}
 			<!-- svelte-ignore a11y_click_events_have_key_events -->

package/dist/navigation/Tabs.svelte.d.ts

@@ -9,7 +9,7 @@ type Props = {
     position?: 'top' | 'bottom' | 'start' | 'end';
     variant?: 'primary' | 'secondary' | 'muted' | 'outline' | 'line' | 'ghost';
     pill?: boolean;
-    class?: string;
+    rootClass?: string;
     tabListClass?: string;
     tabClass?: string;
     tabContentClass?: string;

package/dist/navigation/css/bottom-nav.css

@@ -0,0 +1,134 @@
+@layer components {
+    .bottomnav {
+        @apply fixed bottom-0 left-0 right-0 z-50;
+        @apply flex items-center justify-around;
+        @apply bg-background text-on-background;
+        @apply border-t border-muted;
+        @apply shadow-lg;
+        padding-bottom: env(safe-area-inset-bottom);
+
+        .bottomnav-item {
+            @apply flex flex-col items-center justify-center gap-1;
+            @apply flex-1 py-2 px-1;
+            @apply cursor-pointer select-none outline-none;
+            @apply transition-all duration-200;
+            @apply relative;
+
+            .bottomnav-icon {
+                @apply h-6 w-6 shrink-0;
+                @apply transition-all duration-200;
+            }
+
+            .bottomnav-label {
+                @apply text-xs font-medium whitespace-nowrap;
+                @apply transition-all duration-200;
+            }
+
+            &:hover {
+                @apply bg-muted/50;
+            }
+
+            &.is-active {
+                @apply text-primary;
+
+                .bottomnav-icon {
+                    @apply text-primary;
+                }
+            }
+        }
+
+        &.is-sm {
+            .bottomnav-item {
+                @apply gap-0.5 py-1.5;
+
+                .bottomnav-icon {
+                    @apply h-5 w-5;
+                }
+
+                .bottomnav-label {
+                    @apply text-[10px];
+                }
+            }
+        }
+
+        &.is-md {
+            .bottomnav-item {
+                @apply gap-1 py-2;
+
+                .bottomnav-icon {
+                    @apply h-6 w-6;
+                }
+
+                .bottomnav-label {
+                    @apply text-xs;
+                }
+            }
+        }
+
+        &.is-lg {
+            .bottomnav-item {
+                @apply gap-1.5 py-3;
+
+                .bottomnav-icon {
+                    @apply h-7 w-7;
+                }
+
+                .bottomnav-label {
+                    @apply text-sm;
+                }
+            }
+        }
+
+        &.is-icon-only {
+            .bottomnav-item {
+                @apply gap-0;
+
+                .bottomnav-icon {
+                    @apply h-7 w-7;
+                }
+            }
+        }
+
+        &.bottomnav-primary {
+            .bottomnav-item.is-active {
+                @apply text-primary;
+
+                .bottomnav-icon {
+                    @apply text-primary;
+                }
+
+                .bottomnav-label {
+                    @apply text-primary;
+                }
+            }
+        }
+
+        &.bottomnav-secondary {
+            .bottomnav-item.is-active {
+                @apply text-secondary;
+
+                .bottomnav-icon {
+                    @apply text-secondary;
+                }
+
+                .bottomnav-label {
+                    @apply text-secondary;
+                }
+            }
+        }
+
+        &.bottomnav-muted {
+            .bottomnav-item.is-active {
+                @apply bg-muted text-on-muted;
+
+                .bottomnav-icon {
+                    @apply text-on-muted;
+                }
+
+                .bottomnav-label {
+                    @apply text-on-muted;
+                }
+            }
+        }
+    }
+}

package/dist/navigation/css/footer-group.css

@@ -0,0 +1,27 @@
+@layer components {
+	.footer-group {
+		@apply flex flex-col gap-4;
+
+		.footer-group-title {
+			@apply text-base font-semibold;
+			@apply mb-2;
+		}
+
+		.footer-group-links {
+			@apply flex flex-col gap-2;
+			@apply list-none p-0 m-0;
+
+			.footer-group-link {
+				@apply text-sm text-on-muted;
+				@apply transition-colors duration-200;
+				@apply hover:underline;
+				@apply focus:outline-none;
+				@apply inline-flex items-center gap-1;
+			}
+		}
+
+		.footer-group-content {
+			@apply flex flex-col gap-3;
+		}
+	}
+}