@invopop/popui 0.1.27 → 0.1.29

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/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/table/table-cell.svelte

@@ -15,7 +15,7 @@
   bind:this={ref}
   data-slot="table-cell"
   class={cn(
-    'py-[9.5px] pl-3 pr-3 align-middle text-foreground font-normal text-base [&:has([role=menu])]:pl-1 relative z-1 border-b border-border',
+    'py-[9.5px] [&:has([role=menu])]:py-[5px] pl-3 pr-3 align-middle text-foreground font-normal text-base [&:has([role=menu])]:pl-1 relative z-1 border-b border-border',
     className
   )}
   onclick={bubble('click')}

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.27",
+  "version": "0.1.29",
   "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",