@invopop/popui 0.1.28 → 0.1.30

package/dist/BaseCard.svelte

@@ -36,7 +36,7 @@
               class="flex items-center gap-2 px-[5px] py-0.5 rounded bg-background-default-secondary border border-border"
             >
               <span
-                class="font-medium text-xs leading-4 text-foreground-default-tertiary whitespace-nowrap"
+                class="font-medium text-sm leading-4 text-foreground-default-tertiary whitespace-nowrap"
               >
                 Soon
               </span>

package/dist/BaseCounter.svelte

@@ -6,7 +6,7 @@
 
   let styles = $derived(
     clsx(
-      'inline-flex items-center justify-center rounded px-[3px] pb-[1.5px] pt-[2.5px] font-mono font-medium text-xs leading-none',
+      'inline-flex items-center justify-center rounded px-[3px] pb-[1.5px] pt-[2.5px] font-mono font-medium text-sm leading-none',
       {
         'bg-background-default-tertiary text-foreground': theme === 'light',
         'bg-background-accent text-foreground-inverse': theme === 'accent',

package/dist/BaseFlag.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
+  import 'flag-icons/css/flag-icons.min.css'
   import type { BaseFlagProps } from './types'
 
-  let { country = '', width = 12 }: BaseFlagProps = $props()
+  let { country = '' }: BaseFlagProps = $props()
 
   let iso = $derived(country.toLowerCase())
 </script>
 
-<!-- https://github.com/HatScripts/circle-flags -->
-<img src={`https://hatscripts.github.io/circle-flags/flags/${iso}.svg`} alt={country} {width} />
+<div class="w-3.5 h-2.5 rounded-[1.5px] overflow-hidden flex items-center justify-center">
+  <span class="fi fi-{country.toLocaleLowerCase()} text-[14px] leading-none"></span>
+</div>

package/dist/BaseFlag.svelte.d.ts

@@ -1,3 +1,4 @@
+import 'flag-icons/css/flag-icons.min.css';
 import type { BaseFlagProps } from './types';
 declare const BaseFlag: import("svelte").Component<BaseFlagProps, {}, "">;
 type BaseFlag = ReturnType<typeof BaseFlag>;

package/dist/BaseTableCellContent.svelte

@@ -24,7 +24,7 @@
   <span class="flex items-center gap-2" class:justify-end={field.rightAlign}>
     {#if field.isCountry && data}
       <span class="flex items-center space-x-1">
-        <BaseFlag country={String(data)} width={16} />
+        <BaseFlag country={String(data)} />
         <span>{getCountryName(String(data))}</span>
       </span>
     {:else if field.copy && data}

package/dist/Breadcrumb.svelte

@@ -35,6 +35,6 @@
     </span>
   {/if}
   {#if breadcrumb.country}
-    <BaseFlag country={breadcrumb.country} width={14} />
+    <BaseFlag country={breadcrumb.country} />
   {/if}
 </li>

package/dist/ButtonFile.svelte

@@ -18,7 +18,7 @@
 
   let fileAvatarStyles = $derived(
     cn(
-      'size-8 rounded-md border border-border flex items-center justify-center text-xs font-black font-mono leading-4 uppercase',
+      'size-8 rounded-md border border-border flex items-center justify-center text-sm font-black font-mono leading-4 uppercase',
       {
         'text-foreground-document-pdf': fileType === 'pdf',
         'text-foreground-document-xml': fileType === 'xml',
@@ -55,7 +55,7 @@
       <div class="text-sm font-medium text-foreground truncate w-full">
         {name}
       </div>
-      <div class="text-xs text-foreground-default-secondary truncate w-full">
+      <div class="text-sm text-foreground-default-secondary truncate w-full">
         {date}
       </div>
     </div>

package/dist/DrawerContextItem.svelte

@@ -71,20 +71,16 @@
         class="w-4 h-4 {item.destructive ? 'text-icon-critical' : item.iconClass || 'text-icon'}"
       />
     {/if}
-    <div class="whitespace-nowrap flex-1 text-left flex flex-col truncate" {title}>
-      <span class="flex items-center space-x-1.5">
-        {#if item.color}
-          <TagStatus status={item.color} dot />
-        {/if}
-        <span class="{labelStyles} text-base font-medium truncate">{item.label}</span>
-      </span>
+    <div class="whitespace-nowrap flex-1 text-left flex items-center space-x-1.5 truncate" {title}>
+      {#if item.color}
+        <TagStatus status={item.color} dot />
+      {/if}
+      <span class="{labelStyles} text-base font-medium truncate">{item.label}</span>
 
       {#if item.country}
-        <span class="flex space-x-1 items-center">
-          <BaseFlag country={item.country} width={10} />
-          <span class="text-sm text-foreground-default-secondary">
-            {getCountryName(item.country)}
-          </span>
+        <BaseFlag country={item.country} />
+        <span class="text-xs font-medium text-foreground-default-secondary uppercase">
+          {item.country}
         </span>
       {/if}
     </div>

package/dist/InputError.svelte

@@ -6,7 +6,7 @@
   let { errorText = '' }: InputErrorProps = $props()
 </script>
 
-<p class="flex items-center gap-1 text-xs text-foreground-critical">
+<p class="flex items-center gap-1 text-sm text-foreground-critical">
   <Icon src={Alert} class="size-3 shrink-0" />
   <span>{errorText}</span>
 </p>

package/dist/InputSearch.svelte

@@ -82,7 +82,7 @@
     <div class="absolute right-2 flex items-center gap-1">
       {#each shortcutKeys as key}
         <ShortcutWrapper>
-          <span class="text-xs font-semibold">{key}</span>
+          <span class="text-sm font-semibold">{key}</span>
         </ShortcutWrapper>
       {/each}
     </div>

package/dist/TagBeta.svelte

@@ -4,7 +4,7 @@
   >
     <div class="border-[0.5px] border-white-60 rounded-[3px] relative shrink-0">
       <div class="flex gap-2 items-start overflow-hidden px-1 py-px rounded-[inherit]">
-        <span class="font-medium text-xs leading-4 text-white whitespace-nowrap">Beta</span>
+        <span class="font-medium text-sm leading-4 text-white whitespace-nowrap">Beta</span>
       </div>
     </div>
     <div class="absolute h-5 left-0 right-0 top-0 pointer-events-none">

package/dist/TagStatus.svelte

@@ -5,7 +5,7 @@
   let { label = '', status = 'grey', dot = false }: TagStatusProps = $props()
 
   let tagStyles = $derived(
-    clsx('rounded inline-flex items-center text-xs font-medium gap-1 box-border leading-4 py-0.5', {
+    clsx('rounded inline-flex items-center text-sm font-medium gap-1 box-border leading-4 py-0.5', {
       'bg-background-status-paid text-foreground-status-paid': status === 'green',
       'bg-background-status-processing text-foreground-status-processing': status === 'yellow',
       'bg-background-status-error text-foreground-status-error': status === 'red',

package/dist/range-calendar/range-calendar-day.svelte

@@ -33,7 +33,7 @@
     // Default text color
     'text-foreground-default-primary',
     // inner spans
-    '[&>span]:text-xs [&>span]:opacity-70',
+    '[&>span]:text-sm [&>span]:opacity-70',
     className
   )}
   {...restProps}

package/dist/range-calendar/range-calendar-head-cell.svelte

@@ -11,7 +11,7 @@
 <RangeCalendarPrimitive.HeadCell
   bind:ref
   class={cn(
-    'text-foreground-default-tertiary w-(--cell-size) h-(--cell-size) text-xs font-normal border-b border-border flex items-center justify-center',
+    'text-foreground-default-tertiary w-(--cell-size) h-(--cell-size) text-sm font-normal border-b border-border flex items-center justify-center',
     className
   )}
   {...restProps}

package/dist/sonner/sonner.svelte

@@ -18,7 +18,7 @@
       title: 'font-medium text-base text-foreground-inverse',
       description: 'font-normal text-base text-foreground-inverse-secondary',
       actionButton:
-        'bg-background-selected-inverse rounded px-2 py-1 text-xs font-medium text-foreground-inverse hover:bg-background-selected-inverse-hover transition-colors',
+        'bg-background-selected-inverse rounded px-2 py-1 text-sm font-medium text-foreground-inverse hover:bg-background-selected-inverse-hover transition-colors',
       closeButton: 'hidden'
     }
   }}

package/dist/tailwind.theme.css

@@ -821,6 +821,10 @@
   --text-sm: 12px;
   --text-sm--line-height: 16px;
   --text-sm--letter-spacing: var(--tracking-wide);
+  
+  --text-xs: 10px;
+  --text-xs--line-height: 12px;
+  --text-xs--letter-spacing: var(--tracking-wide);
 }
 
 @layer theme {

package/dist/types.d.ts

@@ -195,7 +195,6 @@ export interface BaseDropdownProps {
 }
 export interface BaseFlagProps {
     country?: string;
-    width?: number;
 }
 export interface BaseTableProps {
     sortBy?: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@invopop/popui",
   "license": "MIT",
-  "version": "0.1.28",
+  "version": "0.1.30",
   "scripts": {
     "dev": "vite dev",
     "dev:clean": "npm run clean && vite dev",
@@ -91,6 +91,7 @@
     "clsx": "^2.0.0",
     "date-fns": "^2.30.0",
     "dayjs": "^1.11.10",
+    "flag-icons": "^7.5.0",
     "flatpickr": "^4.6.13",
     "inter-ui": "^3.19.3",
     "lodash-es": "^4.17.21",