@manafishrov/ui 1.0.4 → 1.1.0

package/src/components/Spinner.tsx

@@ -1,5 +1,6 @@
 import { type Component, type ComponentProps, splitProps } from 'solid-js';
 import { cn } from 'tailwind-variants';
+import ProgressActivityIcon from '~icons/material-symbols/progress-activity';
 
 import * as messages from '@/paraglide/messages';
 
@@ -13,15 +14,7 @@ export const Spinner: Component<ComponentProps<'span'>> = (props) => {
       class={cn('inline-flex items-center justify-center', local.class)}
       {...others}
     >
-      <svg
-        xmlns='http://www.w3.org/2000/svg'
-        viewBox='0 -960 960 960'
-        fill='currentColor'
-        class='size-4 animate-spin'
-        aria-hidden='true'
-      >
-        <path d='M325-111.5q-73-31.5-127.5-86t-86-127.5Q80-398 80-480.5t31.5-155q31.5-72.5 86-127t127.5-86Q398-880 480-880q17 0 28.5 11.5T520-840q0 17-11.5 28.5T480-800q-133 0-226.5 93.5T160-480q0 133 93.5 226.5T480-160q133 0 226.5-93.5T800-480q0-17 11.5-28.5T840-520q17 0 28.5 11.5T880-480q0 82-31.5 155t-86 127.5q-54.5 54.5-127 86T480.5-80Q398-80 325-111.5Z' />
-      </svg>
+      <ProgressActivityIcon class='size-4 animate-spin' aria-hidden='true' />
     </span>
   );
 };

package/src/components/TagsInput.tsx

@@ -1,7 +1,7 @@
 import { TagsInput as TagsInputPrimitive } from '@ark-ui/solid/tags-input';
 import { type Component, splitProps } from 'solid-js';
 import { cn } from 'tailwind-variants';
-import OutlineCloseIcon from '~icons/ic/outline-close';
+import CloseIcon from '~icons/material-symbols/close';
 
 export const TagsInput = TagsInputPrimitive.Root;
 export const TagsInputContext = TagsInputPrimitive.Context;
@@ -23,7 +23,7 @@ export const TagsInputControl: Component<TagsInputPrimitive.ControlProps> = (pro
   return (
     <TagsInputPrimitive.Control
       class={cn(
-        'group relative min-h-10 py-1.5 pr-8 pl-2.5 text-sm [&_svg:not([class*="size-"])]:size-4 gap-1 shadow-sm flex w-full flex-wrap items-center rounded-lg border border-input bg-transparent transition-colors outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:bg-input/30 dark:hover:bg-input/50 [&_svg]:pointer-events-none [&_svg]:shrink-0',
+        'group min-h-10 py-1.5 pr-8 pl-2.5 text-sm [&_svg:not([class*="size-"])]:size-4 gap-1 shadow-sm relative flex w-full flex-wrap items-center rounded-lg border border-input bg-transparent transition-colors outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:bg-input/30 dark:hover:bg-input/50 [&_svg]:pointer-events-none [&_svg]:shrink-0',
         'focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50',
         'data-[invalid=true]:border-destructive data-[invalid=true]:ring-[3px] data-[invalid=true]:ring-destructive/20 dark:data-[invalid=true]:ring-destructive/40',
         'data-[disabled=true]:bg-input/50 data-[disabled=true]:opacity-50 dark:data-[disabled=true]:bg-input/80',
@@ -57,12 +57,12 @@ export const TagsInputClearTrigger: Component<TagsInputPrimitive.ClearTriggerPro
   return (
     <TagsInputPrimitive.ClearTrigger
       class={cn(
-        'right-2 top-1/2 p-0.5 absolute -translate-y-1/2 rounded-sm text-muted-foreground transition-colors hover:text-foreground',
+        'right-2 p-0.5 absolute top-1/2 -translate-y-1/2 rounded-sm text-muted-foreground transition-colors hover:text-foreground',
         local.class,
       )}
       {...others}
     >
-      {local.children ?? <OutlineCloseIcon class='size-3.5 pointer-events-none' />}
+      {local.children ?? <CloseIcon class='size-3.5 pointer-events-none' />}
     </TagsInputPrimitive.ClearTrigger>
   );
 };
@@ -71,7 +71,7 @@ export const TagsInputItem: Component<TagsInputPrimitive.ItemProps> = (props) =>
   const [local, others] = splitProps(props, ['class', 'children']);
   return (
     <TagsInputPrimitive.Item
-      class={cn('inline-flex items-center outline-none cursor-default', local.class)}
+      class={cn('inline-flex cursor-default items-center outline-none', local.class)}
       {...others}
     >
       {local.children}
@@ -85,8 +85,8 @@ export const TagsInputItemPreview: Component<TagsInputPrimitive.ItemPreviewProps
     <TagsInputPrimitive.ItemPreview
       data-slot='tags-input-item-preview'
       class={cn(
-        'h-6 gap-1 px-1.5 text-xs font-medium border border-transparent has-data-[slot=tags-input-item-delete-trigger]:pr-0 inline-flex items-center justify-center rounded-md bg-muted whitespace-nowrap text-foreground transition-colors',
-        'data-highlighted:bg-accent data-highlighted:text-accent-foreground data-highlighted:border-ring',
+        'h-6 gap-1 px-1.5 text-xs font-medium has-data-[slot=tags-input-item-delete-trigger]:pr-0 inline-flex items-center justify-center rounded-md border border-transparent bg-muted whitespace-nowrap text-foreground transition-colors',
+        'data-highlighted:border-ring data-highlighted:bg-accent data-highlighted:text-accent-foreground',
         'data-disabled:pointer-events-none data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50',
         local.class,
       )}
@@ -106,7 +106,7 @@ export const TagsInputItemInput: Component<TagsInputPrimitive.ItemInputProps> =
     <TagsInputPrimitive.ItemInput
       class={cn(
         'py-0 px-1.5 h-6 text-xs rounded-md border border-input bg-background text-foreground outline-none',
-        'focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:border-ring',
+        'focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50',
         local.class,
       )}
       {...others}
@@ -127,7 +127,7 @@ export const TagsInputItemDeleteTrigger: Component<TagsInputPrimitive.ItemDelete
       )}
       {...others}
     >
-      {local.children ?? <OutlineCloseIcon class='size-3 pointer-events-none' />}
+      {local.children ?? <CloseIcon class='size-3 pointer-events-none' />}
     </TagsInputPrimitive.ItemDeleteTrigger>
   );
 };

package/src/components/TreeView.tsx

@@ -1,7 +1,7 @@
 import { TreeView as TreeViewPrimitive, createTreeCollection } from '@ark-ui/solid/tree-view';
 import { Show, splitProps, type Component } from 'solid-js';
 import { cn } from 'tailwind-variants';
-import OutlineChevronRightIcon from '~icons/ic/outline-chevron-right';
+import ChevronRightIcon from '~icons/material-symbols/chevron-right';
 
 export const TreeView = TreeViewPrimitive.Root;
 export const TreeViewLabel = TreeViewPrimitive.Label;
@@ -46,7 +46,7 @@ export const TreeViewBranchControl: Component<TreeViewPrimitive.BranchControlPro
       {...others}
     >
       <TreeViewPrimitive.BranchIndicator class='text-muted-foreground transition-transform data-[state=open]:rotate-90'>
-        <OutlineChevronRightIcon class='size-4' />
+        <ChevronRightIcon class='size-4' />
       </TreeViewPrimitive.BranchIndicator>
       <Show when={local.children} fallback={<TreeViewPrimitive.BranchText />}>
         {local.children}

package/src/components/sidebar/Sidebar.tsx

@@ -1,4 +1,6 @@
-import { type Component, type ComponentProps, createEffect } from 'solid-js';
+import { type Component, type ComponentProps, createEffect, onCleanup } from 'solid-js';
+
+import { createMediaQuery } from '@/primitives/createMediaQuery';
 
 import { useSidebar } from './context';
 import { SidebarDesktop } from './SidebarDesktop';
@@ -8,16 +10,30 @@ export type SidebarProps = ComponentProps<'div'> & {
   side?: 'left' | 'right';
   variant?: 'sidebar' | 'floating' | 'inset';
   collapsible?: 'offcanvas' | 'icon' | 'none';
+  disableMobileSidebar?: boolean;
 };
 
 export const Sidebar: Component<SidebarProps> = (props) => {
-  const { isMobile, setSide } = useSidebar();
+  const { isMobile, setMobileDisabled, setOpen, setSide } = useSidebar();
+  const isViewportMobile = createMediaQuery('(max-width: 768px)');
+
+  onCleanup(() => {
+    setMobileDisabled(false);
+  });
 
-  // Set side on initial render and track changes
   createEffect(() => {
     const currentSide = props.side ?? 'left';
+    const mobileDisabled = props.disableMobileSidebar ?? false;
     setSide(currentSide);
+    setMobileDisabled(mobileDisabled);
   });
+
+  createEffect(() => {
+    if (props.disableMobileSidebar === true && props.collapsible === 'icon') {
+      setOpen(!isViewportMobile());
+    }
+  });
+
   return (
     <Show
       when={!isMobile()}

package/src/components/sidebar/SidebarDesktop.tsx

@@ -46,13 +46,18 @@ export const SidebarDesktop: Component<SidebarProps> = (props) => {
     'side',
     'variant',
     'collapsible',
+    'disableMobileSidebar',
     'class',
     'children',
   ]);
 
   return (
     <div
-      class='group peer md:block hidden text-sidebar-foreground'
+      class={cn(
+        local.disableMobileSidebar === true
+          ? 'group peer block text-sidebar-foreground'
+          : 'group peer md:block hidden text-sidebar-foreground',
+      )}
       data-state={state()}
       data-collapsible={state() === 'collapsed' ? (local.collapsible ?? 'offcanvas') : ''}
       data-variant={local.variant ?? 'sidebar'}
@@ -73,7 +78,7 @@ export const SidebarDesktop: Component<SidebarProps> = (props) => {
       <SidebarDesktopContainer
         variant={local.variant ?? 'sidebar'}
         side={local.side ?? 'left'}
-        class={local.class}
+        class={cn(local.disableMobileSidebar === true ? 'flex' : 'md:flex hidden', local.class)}
         {...others}
       >
         {local.children}

package/src/components/sidebar/SidebarMenu.tsx

@@ -1,4 +1,5 @@
-import { createMemo, type Component, type ComponentProps } from 'solid-js';
+import { ark } from '@ark-ui/solid/factory';
+import { createMemo, type Component, type ComponentProps, type JSX } from 'solid-js';
 import { type VariantProps, tv, cn } from 'tailwind-variants';
 
 import { Skeleton } from '@/components/Skeleton';
@@ -57,12 +58,20 @@ export const sidebarMenuButtonVariants = tv({
   },
 });
 
-export type SidebarMenuButtonProps = ComponentProps<'button'> &
+type SidebarMenuButtonAsChild = ComponentProps<typeof ark.button>['asChild'];
+
+export type SidebarMenuButtonProps = Omit<ComponentProps<'button'>, 'asChild'> &
   VariantProps<typeof sidebarMenuButtonVariants> & {
+    asChild?: SidebarMenuButtonAsChild;
     isActive?: boolean;
     tooltip?: string | ComponentProps<typeof TooltipContent>;
   };
 
+type SidebarMenuButtonStyleProps = Pick<
+  SidebarMenuButtonProps,
+  'size' | 'isActive' | 'variant' | 'class'
+>;
+
 type SidebarMenuButtonDataProps = {
   'data-slot': 'sidebar-menu-button';
   'data-sidebar': 'menu-button';
@@ -88,32 +97,70 @@ const getTooltipChildren = (
   return tooltip.children;
 };
 
+const getSidebarMenuButtonDataProps = (
+  local: SidebarMenuButtonStyleProps,
+): SidebarMenuButtonDataProps => ({
+  'data-slot': 'sidebar-menu-button',
+  'data-sidebar': 'menu-button',
+  'data-size': local.size ?? 'default',
+  'data-active': local.isActive,
+  class: sidebarMenuButtonVariants({
+    variant: local.variant,
+    size: local.size,
+    class: local.class,
+  }),
+});
+
+const getSidebarMenuButtonAsChildProps = (
+  asChild: SidebarMenuButtonProps['asChild'],
+): Pick<ComponentProps<typeof ark.button>, 'asChild'> => (asChild ? { asChild } : {});
+
+const renderSidebarMenuButton = (
+  asChild: SidebarMenuButtonProps['asChild'],
+  props: ComponentProps<'button'>,
+  children: SidebarMenuButtonProps['children'],
+): JSX.Element => (
+  <ark.button {...props} {...getSidebarMenuButtonAsChildProps(asChild)}>
+    {children}
+  </ark.button>
+);
+
 export const SidebarMenuButton: Component<SidebarMenuButtonProps> = (props) => {
-  const [local, others] = splitProps(props, ['isActive', 'variant', 'size', 'tooltip', 'class']);
+  const [local, others] = splitProps(props, [
+    'asChild',
+    'children',
+    'isActive',
+    'variant',
+    'size',
+    'tooltip',
+    'class',
+  ]);
   const { isMobile, state, side } = useSidebar();
 
   const tooltipPlacement = createMemo(() => (side() === 'left' ? 'right' : 'left'));
-
-  const buttonProps = (): SidebarMenuButtonDataProps => ({
-    'data-slot': 'sidebar-menu-button',
-    'data-sidebar': 'menu-button',
-    'data-size': local.size ?? 'default',
-    'data-active': local.isActive,
-    class: sidebarMenuButtonVariants({
-      variant: local.variant,
-      size: local.size,
-      class: local.class,
-    }),
-  });
+  const buttonDataProps = createMemo(() => getSidebarMenuButtonDataProps(local));
 
   return (
-    <Show when={local.tooltip} fallback={<button {...buttonProps()} {...others} />}>
+    <Show
+      when={local.tooltip}
+      fallback={renderSidebarMenuButton(
+        local.asChild,
+        { ...buttonDataProps(), ...others },
+        local.children,
+      )}
+    >
       <Tooltip
         positioning={{ placement: tooltipPlacement() }}
         openDelay={100}
         disabled={state() !== 'collapsed' || isMobile()}
       >
-        <TooltipTrigger {...buttonProps()} {...others} />
+        <TooltipTrigger
+          {...buttonDataProps()}
+          {...others}
+          asChild={(triggerProps) =>
+            renderSidebarMenuButton(local.asChild, triggerProps(), local.children)
+          }
+        />
         <Portal>
           <TooltipPositioner>
             <TooltipContent {...getTooltipContentProps(local.tooltip)}>

package/src/components/sidebar/SidebarMobile.tsx

@@ -2,6 +2,7 @@ import type { Component } from 'solid-js';
 
 import {
   Sheet,
+  SheetCloseButton,
   SheetContent,
   SheetDescription,
   SheetHeader,
@@ -18,6 +19,7 @@ import { useSidebar } from './context';
 export const SidebarMobile: Component<SidebarProps> = (props) => {
   const [local] = splitProps(props, ['side', 'children']);
   const { openMobile, setOpenMobile } = useSidebar();
+  const side = local.side ?? 'left';
 
   return (
     <Sheet
@@ -26,16 +28,18 @@ export const SidebarMobile: Component<SidebarProps> = (props) => {
         setOpenMobile(event.open);
       }}
     >
-      <SheetPositioner side={local.side ?? 'left'}>
+      <SheetPositioner side={side}>
         <SheetContent
+          side={side}
           data-sidebar='sidebar'
           data-slot='sidebar'
           data-mobile='true'
-          class='p-0 w-(--sidebar-width) bg-sidebar text-sidebar-foreground [&>button]:hidden'
+          class='p-0 w-(--sidebar-width) bg-sidebar text-sidebar-foreground'
           style={{
             '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
           }}
         >
+          <SheetCloseButton />
           <div class='sr-only'>
             <SheetHeader>
               <SheetTitle>{messages.ui_sidebar_title()}</SheetTitle>

package/src/components/sidebar/SidebarProvider.tsx

@@ -26,6 +26,7 @@ const useSidebarState = (
   props: SidebarProviderProps,
 ): {
   isMobile: () => boolean;
+  setMobileDisabled: (value: boolean) => void;
   openMobile: () => boolean;
   setOpenMobile: (value: boolean | ((prev: boolean) => boolean)) => void;
   open: () => boolean;
@@ -33,7 +34,9 @@ const useSidebarState = (
   side: () => 'left' | 'right';
   setSide: (value: 'left' | 'right') => void;
 } => {
-  const isMobile = createMediaQuery('(max-width: 768px)');
+  const isViewportMobile = createMediaQuery('(max-width: 768px)');
+  const [mobileDisabled, setMobileDisabled] = createSignal(false);
+  const isMobile = (): boolean => isViewportMobile() && !mobileDisabled();
   const [openMobile, setOpenMobile] = createSignal(false);
   const [internalOpen, setInternalOpen] = createSignal(props.defaultOpen ?? true);
   const [side, setSide] = createSignal<'left' | 'right'>('left');
@@ -49,7 +52,16 @@ const useSidebarState = (
     setSidebarCookie(value);
   };
 
-  return { isMobile, openMobile, setOpenMobile, open, setOpen, side, setSide };
+  return {
+    isMobile,
+    setMobileDisabled,
+    openMobile,
+    setOpenMobile,
+    open,
+    setOpen,
+    side,
+    setSide,
+  };
 };
 const useSidebarEvents = (stateSet: ReturnType<typeof useSidebarState>): { toggle: () => void } => {
   const toggle = (): void => {
@@ -84,6 +96,7 @@ const createSidebarContextValue = (
   open: stateSet.open,
   setOpen: stateSet.setOpen,
   isMobile: stateSet.isMobile,
+  setMobileDisabled: stateSet.setMobileDisabled,
   openMobile: stateSet.openMobile,
   setOpenMobile: stateSet.setOpenMobile,
   toggleSidebar: toggle,

package/src/components/sidebar/SidebarSubComponents.tsx

@@ -1,7 +1,7 @@
 import type { Component, ComponentProps } from 'solid-js';
 
 import { cn } from 'tailwind-variants';
-import OutlineViewSidebarIcon from '~icons/ic/outline-view-sidebar';
+import ViewSidebarIcon from '~icons/material-symbols/side-navigation';
 
 import { Button } from '@/components/Button';
 import { ScrollArea } from '@/components/ScrollArea';
@@ -34,7 +34,7 @@ export const SidebarTrigger: Component<ComponentProps<typeof Button>> = (props)
       onClick={handleClick}
       {...others}
     >
-      <OutlineViewSidebarIcon aria-hidden='true' />
+      <ViewSidebarIcon aria-hidden='true' />
     </Button>
   );
 };
@@ -170,7 +170,7 @@ export const SidebarGroupLabel: Component<ComponentProps<'div'>> = (props) => {
       data-slot='sidebar-group-label'
       data-sidebar='group-label'
       class={cn(
-        'h-8 px-2 text-xs font-medium group-data-[collapsible=icon]:-mt-8 [&>svg]:size-4 flex shrink-0 items-center rounded-md text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:shrink-0',
+        'h-8 px-2 text-xs font-medium group-data-[collapsible=icon]:-mt-8 [&>svg]:size-4 flex shrink-0 items-center rounded-md font-heading text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:shrink-0',
         local.class,
       )}
       {...others}

package/src/components/sidebar/context.ts

@@ -5,6 +5,7 @@ export type SidebarContextProps = {
   openMobile: () => boolean;
   setOpenMobile: (open: boolean) => void;
   isMobile: () => boolean;
+  setMobileDisabled: (mobileDisabled: boolean) => void;
   toggleSidebar: () => void;
   side: () => 'left' | 'right';
   setSide: (side: 'left' | 'right') => void;

package/src/components/toaster/Toaster.tsx

@@ -7,11 +7,11 @@ import {
 import { type Component, type Accessor, Show } from 'solid-js';
 import { Portal } from 'solid-js/web';
 import { cn } from 'tailwind-variants';
-import OutlineCheckCircleIcon from '~icons/ic/outline-check-circle';
-import OutlineCloseIcon from '~icons/ic/outline-close';
-import OutlineErrorIcon from '~icons/ic/outline-error';
-import OutlineInfoIcon from '~icons/ic/outline-info';
-import OutlineWarningIcon from '~icons/ic/outline-warning';
+import CheckCircleIcon from '~icons/material-symbols/check-circle';
+import CloseIcon from '~icons/material-symbols/close';
+import ErrorIcon from '~icons/material-symbols/error';
+import InfoIcon from '~icons/material-symbols/info';
+import WarningIcon from '~icons/material-symbols/warning';
 
 import { Spinner } from '@/components/Spinner';
 
@@ -24,22 +24,22 @@ export const toast = createToaster({
 const ToastItem: Component<{ toast: Accessor<ToastOptions> }> = (props) => (
   <Toast.Root
     class={cn(
-      'group gap-3 p-4 pr-10 shadow-lg pointer-events-auto relative flex min-w-72 w-full items-center rounded-lg border bg-popover transition-all',
-      'data-[state=open]:animate-in data-[state=open]:sm:slide-in-from-bottom-full data-[state=open]:slide-in-from-top-full',
+      'group gap-3 p-4 pr-10 shadow-lg min-w-72 pointer-events-auto relative flex w-full items-center rounded-lg border bg-popover transition-all',
+      'data-[state=open]:sm:slide-in-from-bottom-full data-[state=open]:animate-in data-[state=open]:slide-in-from-top-full',
       'border-border text-popover-foreground',
     )}
   >
     <Show when={props.toast().type === 'success'}>
-      <OutlineCheckCircleIcon class={cn('size-5 text-green-500 shrink-0')} aria-hidden='true' />
+      <CheckCircleIcon class={cn('size-5 text-green-500 shrink-0')} aria-hidden='true' />
     </Show>
     <Show when={props.toast().type === 'info'}>
-      <OutlineInfoIcon class={cn('size-5 text-blue-500 shrink-0')} aria-hidden='true' />
+      <InfoIcon class={cn('size-5 text-blue-500 shrink-0')} aria-hidden='true' />
     </Show>
     <Show when={props.toast().type === 'warning'}>
-      <OutlineWarningIcon class={cn('size-5 text-amber-500 shrink-0')} aria-hidden='true' />
+      <WarningIcon class={cn('size-5 text-amber-500 shrink-0')} aria-hidden='true' />
     </Show>
     <Show when={props.toast().type === 'error'}>
-      <OutlineErrorIcon class={cn('size-5 text-red-500 shrink-0')} aria-hidden='true' />
+      <ErrorIcon class={cn('size-5 text-red-500 shrink-0')} aria-hidden='true' />
     </Show>
     <Show when={props.toast().type === 'loading'}>
       <Spinner class={cn('size-5 text-muted-foreground')} />
@@ -57,7 +57,7 @@ const ToastItem: Component<{ toast: Accessor<ToastOptions> }> = (props) => (
       </Show>
     </div>
     <Toast.CloseTrigger class='top-2 right-2 p-1 absolute cursor-pointer rounded-md text-foreground/50 opacity-0 transition-opacity group-hover:opacity-100 hover:text-foreground focus:opacity-100 focus:outline-none'>
-      <OutlineCloseIcon class='size-4' />
+      <CloseIcon class='size-4' />
     </Toast.CloseTrigger>
   </Toast.Root>
 );

package/src/theme.css

@@ -1,6 +1,6 @@
 @import 'tw-animate-css';
 @import '@fontsource/rajdhani';
-@import '@fontsource/roboto';
+@import '@fontsource-variable/google-sans-flex/index.css';
 @import '@fontsource/chakra-petch/500';
 @import './components/marquee/marquee.css';
 @import './components/toaster/toaster.css';
@@ -79,14 +79,14 @@
 
 @theme inline {
   --font-default:
-    'Roboto', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-    'Segoe UI Symbol', 'Noto Color Emoji';
+    'Google Sans Flex Variable', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
+    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
   --font-heading:
-    'Rajdhani', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-    'Segoe UI Symbol', 'Noto Color Emoji';
+    'Rajdhani', 'Google Sans Flex Variable', ui-sans-serif, system-ui, sans-serif,
+    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
   --font-branding:
-    'Chakra Petch', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-    'Segoe UI Symbol', 'Noto Color Emoji';
+    'Chakra Petch', 'Google Sans Flex Variable', ui-sans-serif, system-ui, sans-serif,
+    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);

package/dist/_virtual/outline-calendar-month.js

@@ -1,10 +0,0 @@
-import { template as t, spread as r } from "solid-js/web";
-var m = /* @__PURE__ */ t('<svg viewBox="0 0 24 24"width=1.2em height=1.2em><path fill=currentColor d="M19 4h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2m0 16H5V10h14zm0-12H5V6h14zM9 14H7v-2h2zm4 0h-2v-2h2zm4 0h-2v-2h2zm-8 4H7v-2h2zm4 0h-2v-2h2zm4 0h-2v-2h2z">');
-const a = (e = {}) => (() => {
-  var h = m();
-  return r(h, e, !0, !0), h;
-})();
-export {
-  a as default
-};
-//# sourceMappingURL=outline-calendar-month.js.map

package/dist/_virtual/outline-calendar-month.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"outline-calendar-month.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/_virtual/outline-check-circle.js

@@ -1,10 +0,0 @@
-import { template as r, spread as l } from "solid-js/web";
-var s = /* @__PURE__ */ r('<svg viewBox="0 0 24 24"width=1.2em height=1.2em><path fill=currentColor d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8s8 3.59 8 8s-3.59 8-8 8m4.59-12.42L10 14.17l-2.59-2.58L6 13l4 4l8-8z">');
-const o = (t = {}) => (() => {
-  var e = s();
-  return l(e, t, !0, !0), e;
-})();
-export {
-  o as default
-};
-//# sourceMappingURL=outline-check-circle.js.map

package/dist/_virtual/outline-check-circle.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"outline-check-circle.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/_virtual/outline-check.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"outline-check.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/_virtual/outline-chevron-left.js

@@ -1,10 +0,0 @@
-import { template as r, spread as l } from "solid-js/web";
-var o = /* @__PURE__ */ r('<svg viewBox="0 0 24 24"width=1.2em height=1.2em><path fill=currentColor d="M15.41 7.41L14 6l-6 6l6 6l1.41-1.41L10.83 12z">');
-const i = (t = {}) => (() => {
-  var e = o();
-  return l(e, t, !0, !0), e;
-})();
-export {
-  i as default
-};
-//# sourceMappingURL=outline-chevron-left.js.map

package/dist/_virtual/outline-chevron-left.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"outline-chevron-left.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/_virtual/outline-chevron-right.js

@@ -1,10 +0,0 @@
-import { template as r, spread as l } from "solid-js/web";
-var o = /* @__PURE__ */ r('<svg viewBox="0 0 24 24"width=1.2em height=1.2em><path fill=currentColor d="M10 6L8.59 7.41L13.17 12l-4.58 4.59L10 18l6-6z">');
-const i = (t = {}) => (() => {
-  var e = o();
-  return l(e, t, !0, !0), e;
-})();
-export {
-  i as default
-};
-//# sourceMappingURL=outline-chevron-right.js.map

package/dist/_virtual/outline-chevron-right.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"outline-chevron-right.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/_virtual/outline-close.js

@@ -1,10 +0,0 @@
-import { template as r, spread as L } from "solid-js/web";
-var l = /* @__PURE__ */ r('<svg viewBox="0 0 24 24"width=1.2em height=1.2em><path fill=currentColor d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12z">');
-const a = (t = {}) => (() => {
-  var e = l();
-  return L(e, t, !0, !0), e;
-})();
-export {
-  a as default
-};
-//# sourceMappingURL=outline-close.js.map

package/dist/_virtual/outline-close.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"outline-close.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/_virtual/outline-error.js

@@ -1,10 +0,0 @@
-import { template as t, spread as o } from "solid-js/web";
-var h = /* @__PURE__ */ t('<svg viewBox="0 0 24 24"width=1.2em height=1.2em><path fill=currentColor d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2m1 15h-2v-2h2zm0-4h-2V7h2z">');
-const m = (e = {}) => (() => {
-  var r = h();
-  return o(r, e, !0, !0), r;
-})();
-export {
-  m as default
-};
-//# sourceMappingURL=outline-error.js.map

package/dist/_virtual/outline-error.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"outline-error.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/_virtual/outline-expand-less.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"outline-expand-less.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/_virtual/outline-expand-more.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"outline-expand-more.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/_virtual/outline-info.js

@@ -1,10 +0,0 @@
-import { template as r, spread as m } from "solid-js/web";
-var o = /* @__PURE__ */ r('<svg viewBox="0 0 24 24"width=1.2em height=1.2em><path fill=currentColor d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8s8 3.59 8 8s-3.59 8-8 8">');
-const h = (t = {}) => (() => {
-  var e = o();
-  return m(e, t, !0, !0), e;
-})();
-export {
-  h as default
-};
-//# sourceMappingURL=outline-info.js.map

package/dist/_virtual/outline-info.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"outline-info.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/_virtual/outline-more-horiz.js

@@ -1,10 +0,0 @@
-import { template as t, spread as s } from "solid-js/web";
-var o = /* @__PURE__ */ t('<svg viewBox="0 0 24 24"width=1.2em height=1.2em><path fill=currentColor d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2s2-.9 2-2s-.9-2-2-2m12 0c-1.1 0-2 .9-2 2s.9 2 2 2s2-.9 2-2s-.9-2-2-2m-6 0c-1.1 0-2 .9-2 2s.9 2 2 2s2-.9 2-2s-.9-2-2-2">');
-const m = (r = {}) => (() => {
-  var e = o();
-  return s(e, r, !0, !0), e;
-})();
-export {
-  m as default
-};
-//# sourceMappingURL=outline-more-horiz.js.map

package/dist/_virtual/outline-more-horiz.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"outline-more-horiz.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}