@invopop/popui 0.0.1

package/dist/BaseTable.svelte.d.ts

@@ -0,0 +1,33 @@
+import { SvelteComponent } from "svelte";
+import type { TableActionProp, TableDataRow, TableField, TableGroupLabelProp, TableSortBy } from './types.js';
+declare const __propDef: {
+    props: {
+        sortBy?: string | undefined;
+        sortDirection?: TableSortBy | undefined;
+        fields?: TableField[] | undefined;
+        data?: TableDataRow[] | undefined;
+        getActions?: TableActionProp;
+        groupLabel?: TableGroupLabelProp;
+        disableRowClick?: boolean | undefined;
+        hideCounter?: boolean | undefined;
+        freeWrap?: boolean | undefined;
+    };
+    events: {
+        orderBy: CustomEvent<any>;
+        action: CustomEvent<any>;
+        copied: CustomEvent<any>;
+        rowNewTabClick: CustomEvent<any>;
+        rowClick: CustomEvent<any>;
+        rowRightClick: CustomEvent<any>;
+        tableEndReached: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type BaseTableProps = typeof __propDef.props;
+export type BaseTableEvents = typeof __propDef.events;
+export type BaseTableSlots = typeof __propDef.slots;
+export default class BaseTable extends SvelteComponent<BaseTableProps, BaseTableEvents, BaseTableSlots> {
+}
+export {};

package/dist/BaseTableActions.svelte

@@ -0,0 +1,31 @@
+<script>import { Icon } from "@steeze-ui/svelte-icon";
+import BaseDropdown from "./BaseDropdown.svelte";
+import { createEventDispatcher } from "svelte";
+import DrawerContext from "./DrawerContext.svelte";
+import { Options } from "@invopop/ui-icons";
+const dispatch = createEventDispatcher();
+export let actions;
+let actionDropdown;
+$:
+  items = actions.map((a) => ({
+    label: a.label,
+    value: a,
+    icon: a.icon,
+    footer: a.footer,
+    destructive: a.destructive
+  }));
+export const toggle = () => {
+  actionDropdown.toggle();
+};
+</script>
+
+<BaseDropdown bind:this={actionDropdown}>
+  <Icon slot="trigger" src={Options} class="w-4 mt-1 text-neutral-500" />
+  <DrawerContext
+    {items}
+    on:click={(e) => {
+      dispatch('clickAction', e.detail)
+      actionDropdown.toggle()
+    }}
+  />
+</BaseDropdown>

package/dist/BaseTableActions.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+import type { TableAction } from './types.js';
+declare const __propDef: {
+    props: {
+        actions: TableAction[];
+        toggle?: (() => void) | undefined;
+    };
+    events: {
+        clickAction: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type BaseTableActionsProps = typeof __propDef.props;
+export type BaseTableActionsEvents = typeof __propDef.events;
+export type BaseTableActionsSlots = typeof __propDef.slots;
+export default class BaseTableActions extends SvelteComponent<BaseTableActionsProps, BaseTableActionsEvents, BaseTableActionsSlots> {
+    get toggle(): () => void;
+}
+export {};

package/dist/BaseTableCell.svelte

@@ -0,0 +1,90 @@
+<script>import Viewport from "svelte-viewport-info";
+import clsx from "clsx";
+import TagStatus from "./TagStatus.svelte";
+import FeedIconStatus from "./FeedIconStatus.svelte";
+import BaseFlag from "./BaseFlag.svelte";
+import { getCountryName } from "./helpers.js";
+import UuidCopy from "./UuidCopy.svelte";
+import { Icon } from "@steeze-ui/svelte-icon";
+export let field;
+export let currentIndex;
+export let badge = null;
+export let status = null;
+export let icons = null;
+export let data = "";
+export let freeWrap = false;
+export let tag = "td";
+$:
+  cellStyles = clsx(
+    { "tabular-nums slashed-zero lining-nums": field.monospacedNums },
+    { "font-mono": field.monospaced },
+    { "text-neutral-800 font-medium": currentIndex === 0 && !field.grayed },
+    { "text-neutral-800 md:text-neutral-500": currentIndex > 0 || field.grayed },
+    { "md:text-right": field.rightAlign },
+    { "md:w-full md:max-w-0": field.fullWidth },
+    { "py-2 md:py-[11.25px]": badge },
+    { "py-2 md:py-[11.75px]": !badge },
+    { "px-3": !field.noPadding },
+    { "px-0": field.noPadding },
+    { "whitespace-nowrap truncate": !freeWrap }
+  );
+$:
+  isMobile = Viewport.Width < 769;
+</script>
+
+<svelte:element
+  this={tag}
+  class="{cellStyles} text-base tracking-normal"
+  style:min-width={field.width}
+  style:max-width={isMobile ? `${Viewport.Width}px` : field.width}
+>
+  <div class="flex flex-col">
+    <span class="md:hidden text-sm text-neutral-600 font-normal">
+      {field.headerLabel}
+    </span>
+    <span class="flex items-center" class:justify-end={field.rightAlign}>
+      {#if field.isCountry && data}
+        <span class="flex items-center space-x-1">
+          <BaseFlag country={String(data)} width={16} />
+          <span>{getCountryName(String(data))}</span>
+        </span>
+      {:else if field.copy && data}
+        <UuidCopy
+          rightAlign={isMobile ? false : field.rightAlign}
+          uuid={String(data)}
+          prefixLength={4}
+          suffixLength={4}
+          compact
+          dark={isMobile}
+          on:copied
+        />
+      {:else}
+        <span class="hidden md:inline">{data}</span>
+        <span class="md:hidden">{data ? data : badge || status ? '' : '-'}</span>
+      {/if}
+      {#if badge}
+        <span class:ml-2={!!data}>
+          <TagStatus label={badge.label} status={badge.status} dot={Boolean(badge.dot)} />
+        </span>
+      {/if}
+      {#if status}
+        <span class:ml-2={!!data}>
+          <FeedIconStatus {status} />
+        </span>
+      {/if}
+      {#if icons}
+        <span class:ml-2={!!data} class="flex items-center gap-1 flex-shrink-0">
+          {#each icons as icon}
+            <div class="border border-neutral-200 rounded-md p-px">
+              {#if typeof icon === 'string'}
+                <img alt="icon" src={icon} class="h-4 w-4" />
+              {:else}
+                <Icon src={icon} class="h-4 w-4" />
+              {/if}
+            </div>
+          {/each}
+        </span>
+      {/if}
+    </span>
+  </div>
+</svelte:element>

package/dist/BaseTableCell.svelte.d.ts

@@ -0,0 +1,26 @@
+import { SvelteComponent } from "svelte";
+import type { Badge, FeedItemStatus, TableField, TableIcon } from './types.js';
+declare const __propDef: {
+    props: {
+        field: TableField;
+        currentIndex: number;
+        badge?: Badge | null | undefined;
+        status?: FeedItemStatus | null | undefined;
+        icons?: TableIcon[] | null | undefined;
+        data?: unknown;
+        freeWrap?: boolean | undefined;
+        tag?: string | undefined;
+    };
+    events: {
+        copied: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type BaseTableCellProps = typeof __propDef.props;
+export type BaseTableCellEvents = typeof __propDef.events;
+export type BaseTableCellSlots = typeof __propDef.slots;
+export default class BaseTableCell extends SvelteComponent<BaseTableCellProps, BaseTableCellEvents, BaseTableCellSlots> {
+}
+export {};

package/dist/BaseTableHeader.svelte

@@ -0,0 +1,75 @@
+<script>import clsx from "clsx";
+import { createEventDispatcher } from "svelte";
+import BaseDropdown from "./BaseDropdown.svelte";
+import BaseTableHeaderSortBy from "./BaseTableHeaderSortBy.svelte";
+const dispatch = createEventDispatcher();
+let sortDropdown;
+export let field;
+export let sortBy = "";
+export let sortDirection;
+export let isFirst = false;
+export let isLast = false;
+$:
+  outerStyles = clsx({
+    "w-full": field.fullWidth,
+    "rounded-tl-md": isFirst,
+    "rounded-tr-md": isLast
+  });
+$:
+  headerStyles = clsx({
+    "justify-end": field.rightAlign,
+    "hover:bg-neutral-50 focus:bg-neutral-100": field.sortable
+  });
+function handleSortBy(event) {
+  sortDirection = event.detail;
+  dispatch("orderBy", { field: field.slug, direction: sortDirection });
+  sortDropdown.toggle();
+}
+</script>
+
+<th
+  scope="col"
+  class="{outerStyles} bg-white text-neutral-500 group sticky z-10 top-0"
+  style:min-width={field.width}
+  style:max-width={field.width}
+>
+  <span class="flex">
+    {#if field.sortable}
+      <BaseDropdown bind:this={sortDropdown} fullWidth>
+        <span
+          slot="trigger"
+          class="{headerStyles} w-full p-3 flex items-center justify-start space-x-1 text-left text-base tracking-normal whitespace-nowrap font-normal"
+        >
+          <span>{field.headerLabel}</span>
+          {#if sortBy === field.slug}
+            <svg
+              viewBox="0 0 12 12"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+              class:rotate-180={sortDirection === 'asc'}
+              class="mt-px text-neutral-400 h-3 w-3"
+            >
+              <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M6.56519 8.8272L7.9966 7.39579L8.7037 8.1029L6.41082 10.3958L6.05726 10.7493L5.70371 10.3958L3.41082 8.1029L4.11793 7.39579L5.56507 8.84293L5.61453 1.24609L6.61451 1.2526L6.56519 8.8272Z"
+                fill="currentColor"
+              />
+            </svg>
+          {/if}
+        </span>
+        <BaseTableHeaderSortBy
+          {sortDirection}
+          isActive={sortBy === field.slug}
+          on:sortBy={handleSortBy}
+        />
+      </BaseDropdown>
+    {:else}
+      <div
+        class="{headerStyles} p-3 text-left text-base font-normal tracking-normal whitespace-nowrap"
+      >
+        {field.headerLabel}
+      </div>
+    {/if}
+  </span>
+</th>

package/dist/BaseTableHeader.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+import type { TableField, TableSortBy } from './types.js';
+declare const __propDef: {
+    props: {
+        field: TableField;
+        sortBy?: string | undefined;
+        sortDirection: TableSortBy;
+        isFirst?: boolean | undefined;
+        isLast?: boolean | undefined;
+    };
+    events: {
+        orderBy: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type BaseTableHeaderProps = typeof __propDef.props;
+export type BaseTableHeaderEvents = typeof __propDef.events;
+export type BaseTableHeaderSlots = typeof __propDef.slots;
+export default class BaseTableHeader extends SvelteComponent<BaseTableHeaderProps, BaseTableHeaderEvents, BaseTableHeaderSlots> {
+}
+export {};

package/dist/BaseTableHeaderSortBy.svelte

@@ -0,0 +1,22 @@
+<script>import { SortAscending, SortDescending } from "@invopop/ui-icons";
+import { createEventDispatcher } from "svelte";
+import DrawerContext from "./DrawerContext.svelte";
+const dispatch = createEventDispatcher();
+export let isActive = false;
+export let sortDirection;
+$:
+  items = [
+    { icon: SortAscending, label: "Sort Ascending", value: "asc" },
+    { icon: SortDescending, label: "Sort Descending", value: "desc" }
+  ].map((o) => ({
+    ...o,
+    selected: isActive && sortDirection === o.value
+  }));
+</script>
+
+<DrawerContext
+  {items}
+  on:click={(e) => {
+    dispatch('sortBy', e.detail)
+  }}
+/>

package/dist/BaseTableHeaderSortBy.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+import type { TableSortBy } from './types.js';
+declare const __propDef: {
+    props: {
+        isActive?: boolean | undefined;
+        sortDirection: TableSortBy;
+    };
+    events: {
+        sortBy: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type BaseTableHeaderSortByProps = typeof __propDef.props;
+export type BaseTableHeaderSortByEvents = typeof __propDef.events;
+export type BaseTableHeaderSortBySlots = typeof __propDef.slots;
+export default class BaseTableHeaderSortBy extends SvelteComponent<BaseTableHeaderSortByProps, BaseTableHeaderSortByEvents, BaseTableHeaderSortBySlots> {
+}
+export {};

package/dist/BaseTableRow.svelte

@@ -0,0 +1,48 @@
+<script>import { createEventDispatcher } from "svelte";
+import BaseTableActions from "./BaseTableActions.svelte";
+import BaseTableCell from "./BaseTableCell.svelte";
+const dispatch = createEventDispatcher();
+let actionsDropdown;
+export let row;
+export let getActions = void 0;
+export let fields = [];
+export let disableRowClick = false;
+export let freeWrap = false;
+$:
+  actions = getActions instanceof Function ? getActions(row) : [];
+</script>
+
+<tr
+  class:cursor-pointer={!disableRowClick}
+  class="hover:bg-neutral-50"
+  on:click
+  on:contextmenu|preventDefault={() => {
+    if (!actionsDropdown) return
+
+    actionsDropdown.toggle()
+  }}
+>
+  {#each fields as field, i (i)}
+    <BaseTableCell
+      currentIndex={i}
+      {field}
+      {freeWrap}
+      badge={field.helperBadge ? field.helperBadge(row) : null}
+      status={field.helperStatus ? field.helperStatus(row) : null}
+      icons={field.helperIcons ? field.helperIcons(row) : null}
+      data={field.formatter ? field.formatter(row) : row[field.slug] || ''}
+      on:copied
+    />
+  {/each}
+  {#if actions.length}
+    <td class="pl-1 pr-3">
+      <BaseTableActions
+        bind:this={actionsDropdown}
+        {actions}
+        on:clickAction={(event) => {
+          dispatch('action', { row, action: event.detail })
+        }}
+      />
+    </td>
+  {/if}
+</tr>

package/dist/BaseTableRow.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponent } from "svelte";
+import type { TableActionProp, TableDataRow, TableField } from './types.js';
+declare const __propDef: {
+    props: {
+        row: TableDataRow;
+        getActions?: TableActionProp;
+        fields?: TableField[] | undefined;
+        disableRowClick?: boolean | undefined;
+        freeWrap?: boolean | undefined;
+    };
+    events: {
+        click: MouseEvent;
+        copied: CustomEvent<any>;
+        action: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type BaseTableRowProps = typeof __propDef.props;
+export type BaseTableRowEvents = typeof __propDef.events;
+export type BaseTableRowSlots = typeof __propDef.slots;
+export default class BaseTableRow extends SvelteComponent<BaseTableRowProps, BaseTableRowEvents, BaseTableRowSlots> {
+}
+export {};

package/dist/ButtonFile.svelte

@@ -0,0 +1,51 @@
+<script>import { createEventDispatcher } from "svelte";
+import { Icon } from "@steeze-ui/svelte-icon";
+import { DocumentText, Download } from "@invopop/ui-icons";
+import BaseButton from "./BaseButton.svelte";
+import clsx from "clsx";
+export let icon = DocumentText;
+export let name = "";
+export let disabled = false;
+export let date = "";
+export let iconColor = "grey";
+const dispatch = createEventDispatcher();
+$:
+  iconStyles = clsx({
+    "border-positive-100 bg-positive-50 text-positive-500": iconColor === "green",
+    "border-yellow-100 bg-yellow-50 text-yellow-500": iconColor === "yellow",
+    "border-red-100 bg-red-50 text-red-500": iconColor === "red",
+    "border-warning-100 bg-warning-50 text-warning-500": iconColor === "orange",
+    "border-blue-100 bg-blue-50 text-blue-500": iconColor === "blue",
+    "border-purple-100 bg-purple-50 text-purple-500": iconColor === "purple",
+    "border-dashed border-neutral-100 text-neutral-400": iconColor === "empty",
+    "border-neutral-100 bg-neutral-50 text-neutral-500": iconColor === "grey"
+  });
+</script>
+
+<button
+  class:opacity-40={disabled}
+  class="border border-neutral-100 hover:bg-neutral-50 active:bg-neutral-100 hover:border-neutral-200 active:border-neutral-300 rounded-lg flex items-center space-x-3 py-1.5 pr-3 pl-2.5 w-full"
+  {disabled}
+  on:click|stopPropagation={() => {
+    dispatch('preview')
+  }}
+>
+  <span class="flex items-center justify-start space-x-2.5 flex-1">
+    <div class="{iconStyles} p-2 border rounded">
+      <Icon src={icon} class="w-4 h-4" />
+    </div>
+    <div class="flex flex-col items-start space-y-0.5">
+      <span class="text-base font-medium text-neutral-800 tracking-tight max-w-[174px] truncate">
+        {name}
+      </span>
+      <span class="text-sm text-neutral-500">{date}</span>
+    </div>
+  </span>
+  <BaseButton
+    {disabled}
+    icon={Download}
+    on:click={() => {
+      dispatch('download')
+    }}
+  />
+</button>

package/dist/ButtonFile.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponent } from "svelte";
+import { type IconSource } from '@steeze-ui/svelte-icon';
+import type { StatusType } from './types.js';
+declare const __propDef: {
+    props: {
+        icon?: IconSource | undefined;
+        name?: string | undefined;
+        disabled?: boolean | undefined;
+        date?: string | undefined;
+        iconColor?: StatusType | undefined;
+    };
+    events: {
+        preview: CustomEvent<any>;
+        download: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ButtonFileProps = typeof __propDef.props;
+export type ButtonFileEvents = typeof __propDef.events;
+export type ButtonFileSlots = typeof __propDef.slots;
+export default class ButtonFile extends SvelteComponent<ButtonFileProps, ButtonFileEvents, ButtonFileSlots> {
+}
+export {};

package/dist/CardRelation.svelte

@@ -0,0 +1,29 @@
+<script>import { Icon } from "@steeze-ui/svelte-icon";
+import { ChevronRight } from "@invopop/ui-icons";
+import SeparatorHorizontal from "./SeparatorHorizontal.svelte";
+export let title = "";
+export let icon = void 0;
+export let items = [];
+</script>
+
+<div class="border rounded-lg">
+  <button class="pl-3 py-2 pr-2 flex items-center justify-between space-x-3 w-full" on:click>
+    <div class="flex items-center space-x-1.5">
+      {#if icon}
+        <Icon src={icon} class="h-4 w-4 text-neutral-500" />
+      {/if}
+      <span class="text-base font-medium text-neutral-800">{title}</span>
+    </div>
+
+    <Icon src={ChevronRight} class="h-4 w-4 text-neutral-500" />
+  </button>
+  <SeparatorHorizontal />
+  <div class="py-1.5 text-sm">
+    {#each items as item}
+      <div class="px-3 py-1 flex items-center space-x-3">
+        <div class="min-w-[88px] text-neutral-500">{item.label}</div>
+        <div class="text-neutral-800">{item.value}</div>
+      </div>
+    {/each}
+  </div>
+</div>

package/dist/CardRelation.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+import { type IconSource } from '@steeze-ui/svelte-icon';
+import type { DataListItem } from './types.js';
+declare const __propDef: {
+    props: {
+        title?: string | undefined;
+        icon?: IconSource | undefined;
+        items?: DataListItem[] | undefined;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type CardRelationProps = typeof __propDef.props;
+export type CardRelationEvents = typeof __propDef.events;
+export type CardRelationSlots = typeof __propDef.slots;
+export default class CardRelation extends SvelteComponent<CardRelationProps, CardRelationEvents, CardRelationSlots> {
+}
+export {};

package/dist/CompanySelector.svelte

@@ -0,0 +1,74 @@
+<script>import { Icon } from "@steeze-ui/svelte-icon";
+import ProfileAvatar from "./ProfileAvatar.svelte";
+import BaseDropdown from "./BaseDropdown.svelte";
+import DrawerContextWorkspace from "./DrawerContextWorkspace.svelte";
+import { createEventDispatcher } from "svelte";
+import clsx from "clsx";
+import { DoubleArrow } from "@invopop/ui-icons";
+const dispatch = createEventDispatcher();
+export let companies = [];
+export let selectedCompany = null;
+let companyDropdown;
+let isOpen = false;
+export let collapsed = false;
+$:
+  name = selectedCompany?.name || "";
+$:
+  country = selectedCompany?.country || "";
+$:
+  picture = selectedCompany?.logo_url || "";
+$:
+  items = [
+    ...companies.map((c) => ({
+      value: c.id,
+      label: c.name,
+      selected: c.slug === selectedCompany?.slug,
+      country: c.country,
+      picture: c.logo_url
+    }))
+  ];
+$:
+  styles = clsx(
+    { "p-1": collapsed },
+    { "space-x-2 w-full p-[7px]": !collapsed },
+    { "border-white-10 bg-white-5": isOpen },
+    { "border-transparent": !isOpen }
+  );
+function selectCompany(event) {
+  companyDropdown.toggle();
+  if (event.detail === "add") {
+    dispatch("add");
+    return;
+  }
+  if (event.detail === "settings") {
+    dispatch("settings");
+    return;
+  }
+  selectedCompany = companies.find((c) => c.id === event.detail) || null;
+  dispatch("select", selectedCompany);
+}
+</script>
+
+<BaseDropdown
+  bind:isOpen
+  bind:this={companyDropdown}
+  placement="bottom-start"
+  fullWidth={!collapsed}
+>
+  <span
+    slot="trigger"
+    title={name}
+    class="{styles} text-white text-base font-semibold flex items-center justify-between border focus:border-white-10 active:border-white-10 hover:bg-white-5 rounded"
+  >
+    <span class:space-x-2={!collapsed} class="flex items-center">
+      <ProfileAvatar {name} {picture} {country} dark large />
+      {#if !collapsed}
+        <div class="whitespace-nowrap max-w-[140px] truncate tracking-tight">{name}</div>
+      {/if}
+    </span>
+    {#if !collapsed}
+      <Icon src={DoubleArrow} class="h-4 w-4 text-white-40 mt-px" />
+    {/if}
+  </span>
+  <DrawerContextWorkspace {items} on:click={selectCompany} />
+</BaseDropdown>

package/dist/CompanySelector.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+import type { Company } from './types.js';
+declare const __propDef: {
+    props: {
+        companies?: Company[] | undefined;
+        selectedCompany?: Company | null | undefined;
+        collapsed?: boolean | undefined;
+    };
+    events: {
+        add: CustomEvent<any>;
+        settings: CustomEvent<any>;
+        select: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type CompanySelectorProps = typeof __propDef.props;
+export type CompanySelectorEvents = typeof __propDef.events;
+export type CompanySelectorSlots = typeof __propDef.slots;
+export default class CompanySelector extends SvelteComponent<CompanySelectorProps, CompanySelectorEvents, CompanySelectorSlots> {
+}
+export {};

package/dist/CounterWorkflow.svelte

@@ -0,0 +1,15 @@
+<script>import clsx from "clsx";
+export let content;
+export let variant = "default";
+$:
+  styles = clsx({
+    "bg-white rounded-md": variant === "default",
+    rounded: variant === "transparent"
+  });
+</script>
+
+<div
+  class="{styles} border border-neutral-200 inline-flex items-center justify-center p-[3px] text-neutral-500 text-sm font-medium h-5 min-w-[20px] tracking-wide tabular-nums slashed-zero lining-nums"
+>
+  {content}
+</div>