noecosystem-design 0.2.3 → 0.4.0

package/packages/data-ui/src/table/data-table.tsx

@@ -0,0 +1,524 @@
+import { useId, useMemo, useState } from 'react';
+import type * as React from 'react';
+import { ArrowDown2, ArrowUp2 } from '@noe/icons';
+import { TechnicalValue } from '@noe/ui/bidi';
+import { Button } from '@noe/ui/button';
+import { Checkbox } from '@noe/ui/checkbox';
+import { cn } from '@noe/ui/lib/cn';
+import { Skeleton } from '@noe/ui/skeleton';
+import { functionalUpdate, useTable } from '@tanstack/react-table';
+import type {
+  ColumnFiltersState,
+  OnChangeFn,
+  RowSelectionState,
+  SortingState,
+} from '@tanstack/react-table';
+
+import { Pagination } from '../pagination';
+import {
+  fromTanStackFilters,
+  fromTanStackSelection,
+  fromTanStackSorting,
+  noeTableFeatures,
+  toTanStackColumns,
+  toTanStackFilters,
+  toTanStackSelection,
+  toTanStackSorting,
+} from './adapters/tanstack';
+import type { DataColumn, DataSort, FilterSpec, PageSpec, RowId, SelectionMode } from './contracts';
+
+export type {
+  DataColumn,
+  DataColumnSortFn,
+  DataQuery,
+  DataQueryInput,
+  DataSort,
+  DataSortDirection,
+  FilterOperator,
+  FilterSpec,
+  PageSpec,
+  RowId,
+  SelectionMode,
+  SelectionState,
+  TableStateAdapter,
+} from './contracts';
+export { createMemoryTableStateAdapter, toDataQuery } from './contracts';
+
+export interface DataTablePaginationStatusInfo {
+  /** One-based index of the first row on the page. */
+  startIndex: number;
+  /** One-based index of the last row on the page. */
+  endIndex: number;
+  /** Total row count across pages. */
+  total: number;
+}
+
+export interface DataTableSelectionInfo {
+  selectedIds: RowId[];
+}
+
+type DataTableFeatureProps<Row extends { id: string }> = {
+  /** Controlled NOE sorting state. */
+  sorting?: readonly DataSort[];
+  /** Initial sorting state for uncontrolled usage. */
+  defaultSorting?: readonly DataSort[];
+  onSortingChange?: (sorting: DataSort[]) => void;
+  /** Server owns row order; the table only reflects sorting state. */
+  manualSorting?: boolean;
+} & (
+  | {
+      filters?: undefined;
+      defaultFilters?: undefined;
+      onFiltersChange?: undefined;
+      manualFiltering?: undefined;
+    }
+  | {
+      /** Controlled NOE filter state. */
+      filters: readonly FilterSpec[];
+      defaultFilters?: undefined;
+      onFiltersChange: (filters: FilterSpec[]) => void;
+      manualFiltering?: boolean;
+    }
+  | {
+      filters?: undefined;
+      /** Initial filter state for uncontrolled usage. */
+      defaultFilters?: readonly FilterSpec[];
+      onFiltersChange?: (filters: FilterSpec[]) => void;
+      manualFiltering?: boolean;
+    }
+) &
+  (
+    | {
+        page?: undefined;
+        onPageChange?: undefined;
+        previousPageLabel?: undefined;
+        nextPageLabel?: undefined;
+        paginationLabel?: undefined;
+        paginationStatus?: undefined;
+        totalRowCount?: undefined;
+        manualPagination?: undefined;
+      }
+    | {
+        /** Controlled zero-based page state. */
+        page: PageSpec;
+        onPageChange: (page: PageSpec) => void;
+        /** Accessible names for the icon-only pagination controls. */
+        previousPageLabel: string;
+        nextPageLabel: string;
+        paginationLabel?: string;
+        paginationStatus?: (info: DataTablePaginationStatusInfo) => React.ReactNode;
+        /** Server-side total; required for accurate status in manual mode. */
+        totalRowCount?: number;
+        /** Server owns row slicing; `rows` holds exactly the current page. */
+        manualPagination?: boolean;
+      }
+  ) &
+  (
+    | {
+        selection?: undefined;
+        defaultSelection?: undefined;
+        onSelectionChange?: undefined;
+        selectionMode?: undefined;
+        selectAllLabel?: undefined;
+        rowSelectionLabel?: undefined;
+        selectedCountLabel?: undefined;
+        renderSelectionActions?: undefined;
+      }
+    | {
+        /** Controlled selected row ids. */
+        selection?: readonly RowId[];
+        /** Initial selection for uncontrolled usage. */
+        defaultSelection?: readonly RowId[];
+        onSelectionChange?: (ids: RowId[]) => void;
+        selectionMode?: SelectionMode;
+        /** Accessible name for the select-all header control. */
+        selectAllLabel: string;
+        /** Accessible name factory for row selection controls. */
+        rowSelectionLabel?: (row: Row) => string;
+        selectedCountLabel?: (count: number) => React.ReactNode;
+        renderSelectionActions?: (info: DataTableSelectionInfo) => React.ReactNode;
+      }
+  );
+
+export type DataTableProps<Row extends { id: string }> = {
+  columns: DataColumn<Row>[];
+  rows: Row[];
+  caption: string;
+  empty: React.ReactNode;
+  className?: string;
+  loading?: boolean;
+  /** Skeleton row count while `loading` is true. Default: 5. */
+  loadingRows?: number;
+  /** Visual rhythm: `regular` (default) or `compact` for dense workspaces. */
+  density?: 'compact' | 'regular';
+} & DataTableFeatureProps<Row>;
+
+/** Pagination state that keeps every row visible when paging is disabled. */
+const ALL_ROWS_PAGINATION = { pageIndex: 0, pageSize: Number.MAX_SAFE_INTEGER };
+
+export function DataTable<Row extends { id: string }>({
+  columns,
+  rows,
+  caption,
+  empty,
+  className,
+  loading = false,
+  loadingRows = 5,
+  density = 'regular',
+  sorting,
+  defaultSorting,
+  onSortingChange,
+  manualSorting,
+  filters,
+  defaultFilters,
+  onFiltersChange,
+  manualFiltering,
+  page,
+  onPageChange,
+  previousPageLabel,
+  nextPageLabel,
+  paginationLabel,
+  paginationStatus,
+  totalRowCount,
+  manualPagination,
+  selection,
+  defaultSelection,
+  onSelectionChange,
+  selectionMode = 'multiple',
+  selectAllLabel,
+  rowSelectionLabel,
+  selectedCountLabel,
+  renderSelectionActions,
+}: DataTableProps<Row>) {
+  const captionId = useId();
+  const selectionEnabled = selectAllLabel !== undefined;
+  const paginationEnabled = page !== undefined;
+
+  const [internalSorting, setInternalSorting] = useState<SortingState>(() =>
+    toTanStackSorting(defaultSorting ?? []),
+  );
+  const [internalFilters, setInternalFilters] = useState<ColumnFiltersState>(() =>
+    toTanStackFilters(defaultFilters ?? []),
+  );
+  const [internalSelection, setInternalSelection] = useState<RowSelectionState>(() =>
+    toTanStackSelection(defaultSelection ?? []),
+  );
+
+  const controlledSorting = useMemo(
+    () => (sorting !== undefined ? toTanStackSorting(sorting) : undefined),
+    [sorting],
+  );
+  const controlledFilters = useMemo(
+    () => (filters !== undefined ? toTanStackFilters(filters) : undefined),
+    [filters],
+  );
+  const controlledSelection = useMemo(
+    () => (selection !== undefined ? toTanStackSelection(selection) : undefined),
+    [selection],
+  );
+
+  const sortingState = controlledSorting ?? internalSorting;
+  const filtersState = controlledFilters ?? internalFilters;
+  const selectionState = controlledSelection ?? internalSelection;
+  const paginationState = useMemo(
+    () =>
+      page !== undefined ? { pageIndex: page.index, pageSize: page.size } : ALL_ROWS_PAGINATION,
+    [page],
+  );
+
+  const tanstackColumns = useMemo(() => toTanStackColumns(columns), [columns]);
+
+  const handleSortingChange: OnChangeFn<SortingState> = (updater) => {
+    const next = functionalUpdate(updater, sortingState);
+    setInternalSorting(next);
+    onSortingChange?.(fromTanStackSorting(next));
+  };
+
+  const handleFiltersChange: OnChangeFn<ColumnFiltersState> = (updater) => {
+    const next = functionalUpdate(updater, filtersState);
+    setInternalFilters(next);
+    onFiltersChange?.(fromTanStackFilters(next));
+  };
+
+  const handleSelectionChange: OnChangeFn<RowSelectionState> = (updater) => {
+    const next = functionalUpdate(updater, selectionState);
+    setInternalSelection(next);
+    onSelectionChange?.(fromTanStackSelection(next));
+  };
+
+  const table = useTable({
+    features: noeTableFeatures,
+    columns: tanstackColumns,
+    data: rows,
+    getRowId: (row: Row) => row.id,
+    state: {
+      sorting: sortingState,
+      columnFilters: filtersState,
+      rowSelection: selectionState,
+      pagination: paginationState,
+    },
+    onSortingChange: handleSortingChange,
+    onColumnFiltersChange: handleFiltersChange,
+    onRowSelectionChange: handleSelectionChange,
+    enableMultiSort: false,
+    autoResetPageIndex: false,
+    ...(manualSorting !== undefined ? { manualSorting } : {}),
+    ...(manualFiltering !== undefined ? { manualFiltering } : {}),
+    ...(manualPagination !== undefined ? { manualPagination } : {}),
+    ...(totalRowCount !== undefined ? { rowCount: totalRowCount } : {}),
+  });
+
+  const modelRows = table.getRowModel().rows;
+  const selectedIds =
+    selection !== undefined ? [...selection] : fromTanStackSelection(selectionState);
+
+  const toggleRowSelection = (rowId: RowId) => {
+    const isSelected = selectedIds.includes(rowId);
+    if (selectionMode === 'single') {
+      handleSelectionChange(isSelected ? {} : toTanStackSelection([rowId]));
+      return;
+    }
+    handleSelectionChange(
+      toTanStackSelection(
+        isSelected ? selectedIds.filter((id) => id !== rowId) : [...selectedIds, rowId],
+      ),
+    );
+  };
+
+  const allRowsSelected = table.getIsAllRowsSelected();
+  const someRowsSelected = table.getIsSomeRowsSelected();
+
+  const pageSize = page?.size ?? ALL_ROWS_PAGINATION.pageSize;
+  const pageIndex = page?.index ?? 0;
+  const totalRows =
+    manualPagination === true
+      ? (totalRowCount ?? pageIndex * pageSize + modelRows.length)
+      : table.getSortedRowModel().rows.length;
+  const canPreviousPage = paginationEnabled && pageIndex > 0;
+  const canNextPage = paginationEnabled
+    ? manualPagination === true
+      ? totalRowCount !== undefined
+        ? (pageIndex + 1) * pageSize < totalRowCount
+        : modelRows.length === pageSize
+      : pageIndex + 1 < table.getPageCount()
+    : false;
+  const paginationInfo: DataTablePaginationStatusInfo | undefined = paginationEnabled
+    ? {
+        startIndex: totalRows === 0 ? 0 : pageIndex * pageSize + 1,
+        endIndex: Math.min(totalRows, (pageIndex + 1) * pageSize),
+        total: totalRows,
+      }
+    : undefined;
+
+  const cellPadding = density === 'compact' ? 'px-3 py-1.5' : 'px-4 py-2.5';
+
+  if (!loading && modelRows.length === 0) {
+    return (
+      <div
+        className={cn(
+          'flex min-h-32 items-center justify-center rounded-lg border border-dashed border-border bg-surface-sunken/30 p-6 text-center text-sm text-muted-foreground',
+          className,
+        )}
+        data-slot="data-table-empty"
+      >
+        {empty}
+      </div>
+    );
+  }
+
+  const showSelectionBar =
+    selectionEnabled &&
+    selectedIds.length > 0 &&
+    (selectedCountLabel !== undefined || renderSelectionActions !== undefined);
+
+  return (
+    <div className={cn('flex flex-col gap-3', className)} data-slot="data-table-root">
+      {showSelectionBar ? (
+        <div
+          className="flex items-center gap-3 rounded-md border border-border bg-surface-sunken/40 px-4 py-2.5 text-sm"
+          data-slot="data-table-selection-bar"
+        >
+          {selectedCountLabel ? (
+            <span className="tabular-nums text-muted-foreground">
+              {selectedCountLabel(selectedIds.length)}
+            </span>
+          ) : null}
+          {renderSelectionActions ? (
+            <div className="ms-auto flex items-center gap-2">
+              {renderSelectionActions({ selectedIds })}
+            </div>
+          ) : null}
+        </div>
+      ) : null}
+      {/* WCAG 2.1: keyboard-accessible scrollable container for overflow tables. */}
+      <section
+        aria-labelledby={captionId}
+        className="overflow-x-auto rounded-lg border border-border"
+        data-slot="data-table-scroll"
+        // biome-ignore lint/a11y/noNoninteractiveTabindex: scrollable region focus pattern
+        tabIndex={0}
+      >
+        <table
+          className="w-full min-w-full border-collapse text-sm"
+          data-density={density}
+          data-slot="data-table"
+        >
+          <caption className="sr-only" id={captionId}>
+            {caption}
+          </caption>
+          <thead>
+            <tr className="border-b border-border bg-surface-sunken/60">
+              {selectionEnabled && selectionMode === 'multiple' ? (
+                <th className={cn('w-10', cellPadding)} data-slot="data-table-select-header">
+                  <Checkbox
+                    aria-label={selectAllLabel}
+                    checked={allRowsSelected}
+                    onChange={() => table.toggleAllRowsSelected(!allRowsSelected)}
+                    ref={(element) => {
+                      if (element) element.indeterminate = someRowsSelected && !allRowsSelected;
+                    }}
+                  />
+                </th>
+              ) : null}
+              {columns.map((column) => {
+                const tanstackColumn = table.getColumn(column.key);
+                const canSort = tanstackColumn?.getCanSort() ?? false;
+                const sorted = tanstackColumn?.getIsSorted() ?? false;
+                return (
+                  <th
+                    aria-sort={
+                      sorted === 'asc'
+                        ? 'ascending'
+                        : sorted === 'desc'
+                          ? 'descending'
+                          : canSort
+                            ? 'none'
+                            : undefined
+                    }
+                    className={cn(
+                      'whitespace-nowrap text-xs font-medium text-muted-foreground',
+                      cellPadding,
+                      column.align === 'end' ? 'text-end' : 'text-start',
+                    )}
+                    data-align={column.align ?? 'start'}
+                    key={column.key}
+                    scope="col"
+                  >
+                    {canSort && tanstackColumn ? (
+                      <Button
+                        className="-ms-2 text-muted-foreground hover:text-foreground"
+                        data-slot="data-table-sort-button"
+                        onClick={(event) => tanstackColumn.getToggleSortingHandler()?.(event)}
+                        size="sm"
+                        variant="ghost"
+                      >
+                        {column.header}
+                        {sorted === 'desc' ? (
+                          <ArrowDown2 className="size-3.5" />
+                        ) : (
+                          <ArrowUp2 className={cn('size-3.5', sorted === false && 'opacity-40')} />
+                        )}
+                      </Button>
+                    ) : (
+                      column.header
+                    )}
+                  </th>
+                );
+              })}
+            </tr>
+          </thead>
+          <tbody>
+            {loading
+              ? Array.from(
+                  { length: loadingRows },
+                  (_, index) => `data-table-loading-${index}`,
+                ).map((rowKey) => (
+                  <tr
+                    className="border-b border-border last:border-b-0"
+                    data-slot="data-table-loading-row"
+                    key={rowKey}
+                  >
+                    {selectionEnabled ? (
+                      <td className={cellPadding}>
+                        <Skeleton className="size-4" />
+                      </td>
+                    ) : null}
+                    {columns.map((column) => (
+                      <td className={cellPadding} key={column.key}>
+                        <Skeleton className="h-4 w-full max-w-32" />
+                      </td>
+                    ))}
+                  </tr>
+                ))
+              : modelRows.map((tanstackRow) => {
+                  const row = tanstackRow.original;
+                  const isSelected = tanstackRow.getIsSelected();
+                  return (
+                    <tr
+                      className="border-b border-border last:border-b-0 hover:bg-muted/50"
+                      data-selected={isSelected || undefined}
+                      key={tanstackRow.id}
+                    >
+                      {selectionEnabled ? (
+                        <td className={cellPadding} data-slot="data-table-select-cell">
+                          <Checkbox
+                            aria-label={rowSelectionLabel?.(row)}
+                            checked={isSelected}
+                            onChange={() => toggleRowSelection(tanstackRow.id)}
+                          />
+                        </td>
+                      ) : null}
+                      {columns.map((column) => {
+                        const content = column.render
+                          ? column.render(row)
+                          : String(row[column.key] ?? '');
+                        const value = column.technical ? (
+                          <TechnicalValue>{content}</TechnicalValue>
+                        ) : (
+                          content
+                        );
+                        return (
+                          <td
+                            className={cn(
+                              'whitespace-nowrap text-foreground',
+                              cellPadding,
+                              column.align === 'end' ? 'text-end' : 'text-start',
+                            )}
+                            data-align={column.align ?? 'start'}
+                            key={column.key}
+                          >
+                            {value}
+                          </td>
+                        );
+                      })}
+                    </tr>
+                  );
+                })}
+          </tbody>
+        </table>
+      </section>
+      {paginationEnabled && paginationInfo ? (
+        <Pagination
+          canNext={canNextPage}
+          canPrevious={canPreviousPage}
+          label={paginationLabel ?? caption}
+          nextLabel={nextPageLabel}
+          onNext={
+            canNextPage ? () => onPageChange({ index: pageIndex + 1, size: pageSize }) : undefined
+          }
+          onPrevious={
+            canPreviousPage
+              ? () => onPageChange({ index: pageIndex - 1, size: pageSize })
+              : undefined
+          }
+          previousLabel={previousPageLabel}
+          status={
+            paginationStatus
+              ? paginationStatus(paginationInfo)
+              : `${paginationInfo.startIndex}–${paginationInfo.endIndex} / ${paginationInfo.total}`
+          }
+        />
+      ) : null}
+    </div>
+  );
+}

package/packages/design-tokens/src/tailwind.css

@@ -1,3 +1,8 @@
 @import "tailwindcss";
 @import "./theme.css";
 @import "./base.css";
+
+/* Tailwind v4 resolves explicit sources relative to this stylesheet. Storybook and
+   product apps consume workspace source outside their own package roots. */
+@source "../../../packages";
+@source "../../../apps";

package/packages/design-tokens/src/tokens.css

@@ -13,11 +13,11 @@
   --noe-primitive-color-ink-500: #565c58;
   --noe-primitive-color-ink-600: #302f2e;
   --noe-primitive-color-ink-700: #252423;
-  --noe-primitive-color-ink-800: #302f2e;
-  --noe-primitive-color-ink-850: #302f2e;
+  --noe-primitive-color-ink-800: #2a2a2a;
+  --noe-primitive-color-ink-850: #202020;
   --noe-primitive-color-ink-900: #171918;
-  --noe-primitive-color-ink-950: #252423;
-  --noe-primitive-color-ink-1000: #1c1b1b;
+  --noe-primitive-color-ink-950: #161616;
+  --noe-primitive-color-ink-1000: #111111;
   --noe-primitive-color-mint-100: #98e8cf;
   --noe-primitive-color-mint-200: #abefd9;
   --noe-primitive-color-mint-300: #1dbf98;
@@ -140,6 +140,8 @@
   --noe-color-surface: var(--noe-primitive-color-paper-50);
   --noe-color-surface-raised: var(--noe-primitive-color-paper-0);
   --noe-color-surface-sunken: var(--noe-primitive-color-paper-200);
+  --noe-color-sidebar: var(--noe-primitive-color-paper-200);
+  --noe-color-sidebar-active: var(--noe-primitive-color-paper-0);
   --noe-color-foreground: var(--noe-primitive-color-ink-900);
   --noe-color-muted: var(--noe-primitive-color-paper-200);
   --noe-color-muted-foreground: var(--noe-primitive-color-ink-500);
@@ -170,6 +172,8 @@
   --noe-color-surface: var(--noe-primitive-color-ink-850);
   --noe-color-surface-raised: var(--noe-primitive-color-ink-800);
   --noe-color-surface-sunken: var(--noe-primitive-color-ink-1000);
+  --noe-color-sidebar: var(--noe-primitive-color-ink-850);
+  --noe-color-sidebar-active: var(--noe-primitive-color-ink-800);
   --noe-color-foreground: var(--noe-primitive-color-paper-250);
   --noe-color-muted: var(--noe-primitive-color-ink-800);
   --noe-color-muted-foreground: var(--noe-primitive-color-ink-400);
@@ -201,6 +205,8 @@
     --noe-color-surface: var(--noe-primitive-color-ink-850);
     --noe-color-surface-raised: var(--noe-primitive-color-ink-800);
     --noe-color-surface-sunken: var(--noe-primitive-color-ink-1000);
+    --noe-color-sidebar: var(--noe-primitive-color-ink-850);
+    --noe-color-sidebar-active: var(--noe-primitive-color-ink-800);
     --noe-color-foreground: var(--noe-primitive-color-paper-250);
     --noe-color-muted: var(--noe-primitive-color-ink-800);
     --noe-color-muted-foreground: var(--noe-primitive-color-ink-400);

package/packages/design-tokens/src/tokens.json

@@ -15,11 +15,11 @@
         "500": "#565c58",
         "600": "#302f2e",
         "700": "#252423",
-        "800": "#302f2e",
-        "850": "#302f2e",
+        "800": "#2a2a2a",
+        "850": "#202020",
         "900": "#171918",
-        "950": "#252423",
-        "1000": "#1c1b1b"
+        "950": "#161616",
+        "1000": "#111111"
       },
       "mint": {
         "100": "#98e8cf",
@@ -106,6 +106,8 @@
       "surface": "{primitive.color.paper.50}",
       "surfaceRaised": "{primitive.color.paper.0}",
       "surfaceSunken": "{primitive.color.paper.200}",
+      "sidebar": "{primitive.color.paper.200}",
+      "sidebarActive": "{primitive.color.paper.0}",
       "foreground": "{primitive.color.ink.900}",
       "muted": "{primitive.color.paper.200}",
       "mutedForeground": "{primitive.color.ink.500}",
@@ -131,6 +133,8 @@
       "surface": "{primitive.color.ink.850}",
       "surfaceRaised": "{primitive.color.ink.800}",
       "surfaceSunken": "{primitive.color.ink.1000}",
+      "sidebar": "{primitive.color.ink.850}",
+      "sidebarActive": "{primitive.color.ink.800}",
       "foreground": "{primitive.color.paper.250}",
       "muted": "{primitive.color.ink.800}",
       "mutedForeground": "{primitive.color.ink.400}",

package/packages/design-tokens/src/tokens.mjs

@@ -16,11 +16,11 @@ export const tokens = {
         "500": "#565c58",
         "600": "#302f2e",
         "700": "#252423",
-        "800": "#302f2e",
-        "850": "#302f2e",
+        "800": "#2a2a2a",
+        "850": "#202020",
         "900": "#171918",
-        "950": "#252423",
-        "1000": "#1c1b1b"
+        "950": "#161616",
+        "1000": "#111111"
       },
       "mint": {
         "100": "#98e8cf",
@@ -107,6 +107,8 @@ export const tokens = {
       "surface": "{primitive.color.paper.50}",
       "surfaceRaised": "{primitive.color.paper.0}",
       "surfaceSunken": "{primitive.color.paper.200}",
+      "sidebar": "{primitive.color.paper.200}",
+      "sidebarActive": "{primitive.color.paper.0}",
       "foreground": "{primitive.color.ink.900}",
       "muted": "{primitive.color.paper.200}",
       "mutedForeground": "{primitive.color.ink.500}",
@@ -132,6 +134,8 @@ export const tokens = {
       "surface": "{primitive.color.ink.850}",
       "surfaceRaised": "{primitive.color.ink.800}",
       "surfaceSunken": "{primitive.color.ink.1000}",
+      "sidebar": "{primitive.color.ink.850}",
+      "sidebarActive": "{primitive.color.ink.800}",
       "foreground": "{primitive.color.paper.250}",
       "muted": "{primitive.color.ink.800}",
       "mutedForeground": "{primitive.color.ink.400}",

package/packages/icons/package.json

@@ -7,9 +7,14 @@
     "react": "^19.2.0"
   },
   "exports": {
-    ".": "./src/index.tsx"
+    ".": "./src/index.tsx",
+    "./nocfo-logo": "./src/nocfo-logo.tsx"
   },
   "dependencies": {
     "iconsax-react": "0.0.8"
+  },
+  "devDependencies": {
+    "vitest": "4.1.11",
+    "vitest-browser-react": "2.2.0"
   }
 }

package/packages/icons/src/brands/nocfo.svg

@@ -0,0 +1,8 @@
+<svg width="698" height="115" viewBox="0 0 698 115" fill="none" xmlns="http://www.w3.org/2000/svg">
+<title>NOCFO</title>
+<path d="M636.475 42.5066C670.199 41.9183 699.188 36.762 697.24 78.3513C696.422 95.8057 694.599 107.431 674.435 113.115C655.219 113.967 618.693 118.485 614.59 94.2956C611.226 74.4705 609.538 47.9355 636.475 42.5066ZM688.198 76.031C690.086 45.5042 661.671 51.0544 637.899 51.5583C632.981 52.6653 629.35 53.7832 626.398 58.1775C620.114 67.5366 618.965 95.6618 630.797 101.452C639.35 105.639 662.895 104.297 672.995 103.76C688.139 98.6936 687.394 89.0325 688.198 76.031Z" fill="white"/>
+<path d="M467.517 43.3473C482.372 43.1323 513.647 39.1155 520.943 54.2547C522.502 57.4924 524.8 62.6848 523.304 66.1513C520.707 67.2164 520.514 67.0872 517.584 66.6572C510.654 62.2262 516.468 52.7675 499.371 52.2646C464.447 51.3928 449.226 48.4785 452.936 86.8645C454.824 106.392 466.853 104.769 485.656 104.5C526.417 104.971 504.703 92.1634 520.242 89.2117C523.238 90.3793 522.264 89.5509 523.759 92.4987C523.548 113.208 504.309 114.086 486.432 113.861C470.279 113.659 447.74 114.956 444.598 94.261C441.582 74.4048 439.949 48.4154 467.517 43.3473Z" fill="white"/>
+<path d="M554.993 43.2972C565.284 43.1654 601.126 41.0629 606.755 45.6961C607.862 48.7493 607.864 47.4537 606.659 50.5743C597.297 57.7393 541.771 40.7556 544.87 67.1734C546.493 81.0099 594.502 67.9992 602.929 74.1125C602.981 77.0923 603.463 79.5864 601.237 81.6661C587.929 82.9637 559.376 82.0993 544.925 82.017C544.823 90.3091 546.719 105.331 543.654 112.144C540.944 114.363 542.339 113.847 538.229 113.803L536.945 112.23C535.403 102.746 534.598 62.4579 539.522 52.2873C541.947 47.2793 549.2 44.6295 554.993 43.2972Z" fill="white"/>
+<path d="M56.7057 0.220818C59.4812 -0.0783868 66.655 0.00764426 69.5347 0.0238175C78.3794 0.0954738 87.2231 0.25451 96.0646 0.501376C100.5 0.589655 105.045 0.395802 109.484 0.256308C132.52 -0.467892 156.409 -0.133871 173.733 17.4305C179.379 23.0998 183.544 30.0721 185.86 37.7326C187.257 42.4387 187.682 48.1555 188.036 53.0969C189.467 73.0742 188.685 93.4045 188.559 113.42C181.836 113.656 173.963 113.499 167.156 113.523L167.227 75.7448C167.255 68.6649 167.379 61.7158 167.124 54.636C166.395 34.3692 151.889 21.6885 132.236 19.9335C117.122 18.9447 100.969 19.8066 85.8082 19.9052C66.7354 20.0292 45.5038 16.4282 30.7644 31.6442C24.6706 38.0679 22.4129 45.2014 21.9355 53.7631C20.8234 73.7101 21.3197 93.5171 21.552 113.465C15.0667 113.737 6.74555 113.517 0.174689 113.502C0.0536924 100.976 -0.00444898 88.4497 0.000265171 75.9236C0.023387 65.4894 -0.0850384 49.2196 2.53468 39.4846C4.44796 32.5183 7.8839 26.064 12.5947 20.589C24.2656 7.00099 39.1747 1.54859 56.7057 0.220818Z" fill="white"/>
+<path d="M319.568 0.193154C332.548 0.161706 345.543 -0.281296 358.514 0.29081C365.335 0.582372 372.427 0.7861 379.045 2.5828C396.211 7.24404 410.499 20.151 416.147 37.1297C418.006 42.7191 418.727 48.4357 418.961 54.3387C420.359 89.7317 395.124 112.994 360.341 113.954C346.371 114.201 332.168 113.892 318.17 113.936L293.926 114.03C272.33 113.981 254.719 113.713 238.029 98.2703C216.174 78.0453 215.513 41.0945 235.138 19.2088C247.145 5.81961 262.554 0.908067 279.985 0.192178L281.043 0.157021C293.831 -0.229988 306.771 0.224377 319.568 0.193154ZM329.095 19.2166C313.953 19.1948 298.232 18.934 283.14 19.2752C283.028 19.2772 282.918 19.2805 282.808 19.2859C271.122 19.6424 260.264 22.6589 252.265 31.5525C245.275 39.3273 242.217 48.2684 242.538 58.5779C242.751 68.5089 246.945 77.937 254.18 84.74C267.898 97.6367 287.634 94.6477 304.868 94.7137C322.102 94.7799 339.509 95.1774 356.733 94.7576C386.396 94.2072 404.261 71.1977 395.264 42.6101C391.991 32.2128 380.566 23.3761 370.269 20.8816C362.924 19.1026 354.048 19.1626 346.523 19.1844L329.095 19.2166Z" fill="white"/>
+</svg>