@cosxai/ui 1.0.0-alpha.0 → 1.0.0-alpha.1

package/src/components/core.test.tsx

@@ -0,0 +1,242 @@
+import { act, render, renderHook, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Share2, Star } from 'lucide-react';
+import { describe, expect, it, vi } from 'vitest';
+
+import { a11y } from '../../test/a11y';
+import { Badge } from './Badge';
+import { Button, formatCount } from './Button';
+import { Card } from './Card';
+import { Figure } from './Figure';
+import { IconButton } from './IconButton';
+import { Logo } from './Logo';
+import { Marker } from './Marker';
+import { MetaLabel } from './MetaLabel';
+import { Tag } from './Tag';
+import { ThemeProvider, useTheme } from './ThemeProvider';
+import { useButtonAction } from './useButtonAction';
+
+describe('Button', () => {
+  it('is a type=button that clicks', async () => {
+    const onClick = vi.fn();
+    render(<Button onClick={onClick}>Publish register</Button>);
+    const b = screen.getByRole('button', { name: 'Publish register' });
+    expect(b).toHaveAttribute('type', 'button');
+    await userEvent.click(b);
+    expect(onClick).toHaveBeenCalledOnce();
+  });
+
+  it('disabled with a reason stays focusable, explains itself, ignores clicks', async () => {
+    const onClick = vi.fn();
+    render(
+      <Button disabled disabledReason="Downloads are off for this share" onClick={onClick}>
+        Share
+      </Button>,
+    );
+    const b = screen.getByRole('button', { name: 'Share' });
+    expect(b).not.toBeDisabled();
+    expect(b).toHaveAttribute('aria-disabled', 'true');
+    expect(b).toHaveAttribute('title', 'Downloads are off for this share');
+    await userEvent.click(b);
+    expect(onClick).not.toHaveBeenCalled();
+  });
+
+  it('busy: aria-busy, keeps its name, ignores clicks', async () => {
+    const onClick = vi.fn();
+    render(
+      <Button state="busy" onClick={onClick}>
+        Publish
+      </Button>,
+    );
+    const b = screen.getByRole('button', { name: 'Publish' });
+    expect(b).toHaveAttribute('aria-busy', 'true');
+    await userEvent.click(b);
+    expect(onClick).not.toHaveBeenCalled();
+  });
+
+  it('done shows the confirmation in place', () => {
+    render(
+      <Button state="done" doneLabel="Published">
+        Publish
+      </Button>,
+    );
+    expect(screen.getByRole('button')).toHaveTextContent('Published');
+  });
+
+  it('count: hidden at zero, 99+ above 99', () => {
+    expect(formatCount(0)).toBeNull();
+    expect(formatCount(12)).toBe('12');
+    expect(formatCount(140)).toBe('99+');
+  });
+
+  it('primary flips to the yellow on an ink ground', () => {
+    render(<Button ground="ink">See what we do</Button>);
+    expect(screen.getByRole('button').className).toMatch(/bg-yellow-accent/);
+  });
+
+  it('asChild renders the link with the button look', () => {
+    render(
+      <Button asChild variant="secondary">
+        <a href="/x">Open</a>
+      </Button>,
+    );
+    expect(screen.getByRole('link', { name: 'Open' }).className).toMatch(/rounded-md/);
+  });
+
+  it('passes axe', async () => {
+    const { container } = render(
+      <div>
+        <Button>Publish</Button>
+        <Button variant="secondary" count={12}>
+          Comments
+        </Button>
+        <Button disabled disabledReason="Still converting to PDF">
+          Download
+        </Button>
+      </div>,
+    );
+    expect(await a11y(container)).toHaveNoViolations();
+  });
+});
+
+describe('useButtonAction', () => {
+  it('busy → done → idle', async () => {
+    vi.useFakeTimers();
+    let resolve!: () => void;
+    const { result } = renderHook(() => useButtonAction(() => new Promise<void>((r) => (resolve = r))));
+    let p!: Promise<void>;
+    act(() => {
+      p = result.current.run();
+    });
+    expect(result.current.state).toBe('busy');
+    await act(async () => {
+      resolve();
+      await p;
+    });
+    expect(result.current.state).toBe('done');
+    act(() => vi.advanceTimersByTime(1600));
+    expect(result.current.state).toBe('idle');
+    vi.useRealTimers();
+  });
+
+  it('a failure returns to idle with the error, and runs are not doubled while busy', async () => {
+    const action = vi.fn().mockRejectedValue(new Error("Couldn't reach the mail server."));
+    const { result } = renderHook(() => useButtonAction(action));
+    await act(async () => {
+      await Promise.all([result.current.run(), result.current.run()]);
+    });
+    expect(action).toHaveBeenCalledOnce();
+    expect(result.current.state).toBe('idle');
+    expect(String(result.current.error)).toMatch(/mail server/);
+  });
+});
+
+describe('IconButton', () => {
+  it('has a label, and the count joins it', () => {
+    render(<IconButton icon={Star} label="Comments" count={120} />);
+    expect(screen.getByRole('button', { name: 'Comments (99+)' })).toBeInTheDocument();
+  });
+  it('passes axe', async () => {
+    const { container } = render(<IconButton icon={Share2} label="Share" variant="outline" />);
+    expect(await a11y(container)).toHaveNoViolations();
+  });
+});
+
+describe('Badge', () => {
+  it('defaults the appearance by status', () => {
+    const { container } = render(
+      <>
+        <Badge status="attention">Awaiting you</Badge>
+        <Badge status="progress">In progress</Badge>
+        <Badge status="complete">Delivered</Badge>
+      </>,
+    );
+    const [a, p, c] = container.querySelectorAll('[data-status]');
+    expect(a!.className).toMatch(/bg-brand-mark/);
+    expect(p!.className).toMatch(/border-fg/);
+    expect(c!.querySelector('[aria-hidden]')!.className).toMatch(/bg-fg\b/);
+  });
+  it('unknown status falls back to neutral', () => {
+    const { container } = render(<Badge status="quarantined-ish">Draft</Badge>);
+    expect(container.querySelector('[data-status]')).toHaveAttribute('data-status', 'neutral');
+  });
+  it('compact keeps the wording for screen readers and on hover', () => {
+    render(
+      <Badge status="error" compact>
+        Overdue
+      </Badge>,
+    );
+    const text = screen.getByText('Overdue');
+    expect(text).toHaveClass('sr-only');
+    expect(text.parentElement).toHaveAttribute('title', 'Overdue');
+  });
+});
+
+describe('Tag', () => {
+  it('removes', async () => {
+    const onRemove = vi.fn();
+    render(
+      <Tag onRemove={onRemove} removeLabel="Remove PDF">
+        PDF
+      </Tag>,
+    );
+    await userEvent.click(screen.getByRole('button', { name: 'Remove PDF' }));
+    expect(onRemove).toHaveBeenCalledOnce();
+  });
+});
+
+describe('Logo, Card, Figure, Marker, MetaLabel', () => {
+  it('logo has an accessible name and never paints itself yellow', () => {
+    render(<Logo />);
+    const svg = screen.getByRole('img', { name: 'COSX' });
+    expect(svg).toHaveAttribute('fill', 'currentColor');
+  });
+  it('card outline defaults by ground', () => {
+    const { container } = render(
+      <>
+        <Card>a</Card>
+        <Card ground="sunk">b</Card>
+      </>,
+    );
+    const [page, sunk] = container.querySelectorAll('div');
+    expect(page!.className).toMatch(/border-rule/);
+    expect(sunk!.className).not.toMatch(/border-rule/);
+  });
+  it('figure, marker and label render', async () => {
+    const { container } = render(
+      <div>
+        <Figure value="117" label="Organisations" source="Verified September 2026" />
+        <h2>
+          Of 47 organisations, <Marker>20 name no regulator</Marker>
+        </h2>
+        <MetaLabel rule="yellow">03 / Who we serve</MetaLabel>
+      </div>,
+    );
+    expect(container.querySelector('.marker')).toHaveTextContent('20 name no regulator');
+    expect(await a11y(container)).toHaveNoViolations();
+  });
+});
+
+describe('ThemeProvider', () => {
+  it('sets data-mode="ink" when ink is chosen and clears it for light', () => {
+    function Switch() {
+      const { setMode, resolved } = useTheme();
+      return (
+        <>
+          <span>{resolved}</span>
+          <button onClick={() => setMode('ink')}>ink</button>
+          <button onClick={() => setMode('light')}>light</button>
+        </>
+      );
+    }
+    render(
+      <ThemeProvider storageKey={null}>
+        <Switch />
+      </ThemeProvider>,
+    );
+    act(() => screen.getByText('ink', { selector: 'button' }).click());
+    expect(document.documentElement).toHaveAttribute('data-mode', 'ink');
+    act(() => screen.getByText('light', { selector: 'button' }).click());
+    expect(document.documentElement).not.toHaveAttribute('data-mode');
+  });
+});

package/src/components/forms-control.ts

@@ -0,0 +1,36 @@
+import { cva } from 'class-variance-authority';
+
+/**
+ * The shared frame of text controls (Input, Textarea, Select trigger):
+ * sunk to linen, a --rule edge, ink edge + focus ring on focus, the one
+ * red on error, well + grey text when disabled. Single-line heights are
+ * fixed at 32 · 38 · 44 (Textarea overrides with h-auto).
+ */
+export const controlFrame = cva(
+  [
+    'flex w-full items-center gap-2 rounded-md border font-sans text-fg',
+    'transition-[border-color,background-color] duration-[120ms] ease-standard',
+  ],
+  {
+    variants: {
+      variant: {
+        default: 'border-rule bg-sunk focus-within:border-fg focus-within:shadow-(--focus-ring)',
+        borderless:
+          'border-transparent bg-transparent hover:bg-hover focus-within:border-fg focus-within:bg-sunk focus-within:shadow-(--focus-ring)',
+      },
+      size: {
+        sm: 'h-8 px-2.5 text-[13px]',
+        md: 'h-[38px] px-2.5 text-[13px]',
+        lg: 'h-11 px-3 text-[15px]',
+      },
+      invalid: { true: 'border-error focus-within:border-error', false: '' },
+      disabled: { true: 'cursor-not-allowed border-rule-soft bg-well text-fg-secondary', false: '' },
+      readOnly: { true: 'border-rule-soft', false: '' },
+    },
+    defaultVariants: { variant: 'default', size: 'md', invalid: false, disabled: false, readOnly: false },
+  },
+);
+
+/** The bare native element inside the frame. */
+export const controlInner =
+  'min-w-0 flex-1 border-none bg-transparent p-0 font-sans text-inherit outline-none placeholder:text-fg-secondary disabled:cursor-not-allowed';

package/src/components/forms.test.tsx

@@ -0,0 +1,280 @@
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { useState } from 'react';
+import { describe, expect, it, vi } from 'vitest';
+
+import { axe } from 'vitest-axe';
+
+import { a11y } from '../../test/a11y';
+import { Checkbox } from './Checkbox';
+import { Field } from './Field';
+import { Input } from './Input';
+import { RadioGroup } from './Radio';
+import { Select, type SelectOption } from './Select';
+import { Switch } from './Switch';
+import { Textarea } from './Textarea';
+
+
+describe('Field, Input, Textarea', () => {
+  it('ties label, hint and error to the input', () => {
+    render(<Input label="Email" hint="We send the code here" />);
+    const input = screen.getByLabelText('Email');
+    expect(input).toHaveAccessibleDescription('We send the code here');
+    expect(input).not.toHaveAttribute('aria-invalid');
+  });
+
+  it('an error replaces the hint and sets aria-invalid', () => {
+    render(<Input label="Code" hint="6 digits" error="That code has expired. Send a new one." />);
+    const input = screen.getByLabelText('Code');
+    expect(input).toHaveAttribute('aria-invalid', 'true');
+    expect(input).toHaveAccessibleDescription('That code has expired. Send a new one.');
+    expect(screen.queryByText('6 digits')).toBeNull();
+  });
+
+  it('a Field wraps any control, including a Textarea', () => {
+    render(
+      <Field label="Note" error="Say what changed.">
+        <Textarea />
+      </Field>,
+    );
+    const ta = screen.getByLabelText('Note');
+    expect(ta.tagName).toBe('TEXTAREA');
+    expect(ta).toHaveAttribute('aria-invalid', 'true');
+  });
+
+  it('keeps prefix and suffix inside the frame and types', async () => {
+    const onChange = vi.fn();
+    render(<Input label="Amount" prefix="£" suffix="GBP" onChange={onChange} />);
+    await userEvent.type(screen.getByLabelText('Amount'), '12');
+    expect(onChange).toHaveBeenCalledTimes(2);
+    expect(screen.getByText('£')).toBeInTheDocument();
+  });
+
+  it('disabled and read-only are native', () => {
+    render(
+      <>
+        <Input label="A" disabled />
+        <Input label="B" readOnly value="x" />
+      </>,
+    );
+    expect(screen.getByLabelText('A')).toBeDisabled();
+    expect(screen.getByLabelText('B')).toHaveAttribute('readonly');
+  });
+
+  it('passes axe', async () => {
+    const { container } = render(
+      <div>
+        <Input label="Email" hint="Work address" />
+        <Input label="Code" error="That code has expired." />
+        <Textarea label="Note" />
+      </div>,
+    );
+    expect(await a11y(container)).toHaveNoViolations();
+  });
+});
+
+const PEOPLE: SelectOption[] = [
+  { value: 'hv', label: 'Harbour Ventures', meta: '3 projects', group: 'Customers' },
+  { value: 'hw', label: 'Hardwick Family Office', group: 'Customers' },
+  { value: 'kb', label: 'Kowloon Bay', meta: 'Archived', group: 'Customers', disabled: true },
+  { value: 'lw', label: 'Li Wei', group: 'Staff' },
+  { value: 'am', label: 'Anna Kowalski', group: 'Staff' },
+];
+
+function Controlled(props: { options?: SelectOption[] | string[]; searchable?: boolean }) {
+  const [v, setV] = useState<string | undefined>(undefined);
+  return (
+    <Field label="Customer">
+      <Select options={props.options ?? PEOPLE} value={v} onChange={setV} searchable={props.searchable} />
+    </Field>
+  );
+}
+
+describe('Select', () => {
+  it('is a labelled combobox that opens a listbox with options', async () => {
+    render(<Controlled />);
+    const trigger = screen.getByRole('combobox', { name: 'Customer' });
+    expect(trigger).toHaveAttribute('aria-expanded', 'false');
+    await userEvent.click(trigger);
+    const list = await screen.findByRole('listbox');
+    expect(within(list).getAllByRole('option')).toHaveLength(5);
+    expect(within(list).getByRole('group', { name: 'Staff' })).toBeInTheDocument();
+  });
+
+  it('keyboard: arrows skip disabled rows, Home/End jump, Enter chooses', async () => {
+    const user = userEvent.setup();
+    render(<Controlled />);
+    const trigger = screen.getByRole('combobox', { name: 'Customer' });
+    trigger.focus();
+    await user.keyboard('{ArrowDown}');
+    const list = await screen.findByRole('listbox');
+    expect(list).toHaveAttribute('aria-activedescendant', screen.getByRole('option', { name: 'Harbour Ventures, 3 projects' }).id);
+    await user.keyboard('{ArrowDown}{ArrowDown}');
+    // Kowloon Bay (disabled) is skipped
+    expect(list).toHaveAttribute('aria-activedescendant', screen.getByRole('option', { name: 'Li Wei' }).id);
+    await user.keyboard('{End}');
+    expect(list).toHaveAttribute('aria-activedescendant', screen.getByRole('option', { name: 'Anna Kowalski' }).id);
+    await user.keyboard('{Home}{Enter}');
+    expect(trigger).toHaveTextContent('Harbour Ventures');
+    expect(trigger).toHaveAttribute('aria-expanded', 'false');
+  });
+
+  it('a letter jumps to it (closed and open)', async () => {
+    const user = userEvent.setup();
+    render(<Controlled />);
+    const trigger = screen.getByRole('combobox', { name: 'Customer' });
+    trigger.focus();
+    await user.keyboard('l');
+    const list = await screen.findByRole('listbox');
+    expect(list).toHaveAttribute('aria-activedescendant', screen.getByRole('option', { name: 'Li Wei' }).id);
+    await user.keyboard('i'); // fast typing matches a prefix: "li"
+    expect(list).toHaveAttribute('aria-activedescendant', screen.getByRole('option', { name: 'Li Wei' }).id);
+    const later = Date.now() + 1000; // a pause starts a new search
+    const spy = vi.spyOn(Date, 'now').mockReturnValue(later);
+    await user.keyboard('a');
+    expect(list).toHaveAttribute('aria-activedescendant', screen.getByRole('option', { name: 'Anna Kowalski' }).id);
+    spy.mockRestore();
+  });
+
+  it('Escape closes without choosing', async () => {
+    const user = userEvent.setup();
+    render(<Controlled />);
+    const trigger = screen.getByRole('combobox', { name: 'Customer' });
+    await user.click(trigger);
+    await screen.findByRole('listbox');
+    await user.keyboard('{Escape}');
+    expect(trigger).toHaveAttribute('aria-expanded', 'false');
+    expect(trigger).toHaveTextContent('Choose one');
+  });
+
+  it('disabled rows stay visible and cannot be chosen', async () => {
+    const user = userEvent.setup();
+    render(<Controlled />);
+    await user.click(screen.getByRole('combobox', { name: 'Customer' }));
+    const row = await screen.findByRole('option', { name: 'Kowloon Bay, Archived' });
+    expect(row).toHaveAttribute('aria-disabled', 'true');
+    await user.click(row);
+    expect(screen.getByRole('combobox', { name: 'Customer' })).toHaveTextContent('Choose one');
+  });
+
+  it('turns the filter on above 8 options and filters', async () => {
+    const user = userEvent.setup();
+    const many = ['Passport', 'Visa', 'BRP', 'Payslip', 'P60', 'Bank statement', 'Tenancy', 'Council tax', 'Utility bill'];
+    render(<Controlled options={many} />);
+    await user.click(screen.getByRole('combobox', { name: 'Customer' }));
+    const filter = await screen.findByRole('combobox', { name: 'Filter' });
+    expect(filter).toHaveFocus();
+    await user.type(filter, 'pa');
+    expect(within(screen.getByRole('listbox')).getAllByRole('option').map((o) => o.textContent)).toEqual(['Passport', 'Payslip']);
+    await user.keyboard('{ArrowDown}{Enter}');
+    expect(screen.getByRole('combobox', { name: 'Customer' })).toHaveTextContent('Passport');
+  });
+
+  it('shows the empty text when nothing matches', async () => {
+    const user = userEvent.setup();
+    render(<Controlled searchable />);
+    await user.click(screen.getByRole('combobox', { name: 'Customer' }));
+    await user.type(await screen.findByRole('combobox', { name: 'Filter' }), 'zzz');
+    expect(screen.getByText('Nothing matches that.')).toBeInTheDocument();
+  });
+
+  it('is invalid and described inside a Field with an error', () => {
+    render(
+      <Field label="Customer" error="Choose who this is for.">
+        <Select options={PEOPLE} />
+      </Field>,
+    );
+    const trigger = screen.getByRole('combobox', { name: 'Customer' });
+    expect(trigger).toHaveAttribute('aria-invalid', 'true');
+    expect(trigger).toHaveAccessibleDescription('Choose who this is for.');
+  });
+
+  it('passes axe (closed and open)', async () => {
+    const user = userEvent.setup();
+    const { container } = render(<Controlled />);
+    expect(await a11y(container)).toHaveNoViolations();
+    await user.click(screen.getByRole('combobox', { name: 'Customer' }));
+    await screen.findByRole('listbox');
+    // the open menu lives in a portal on <body>; 'region' is a page-level rule
+    const open = await axe(document.body, { rules: { 'color-contrast': { enabled: false }, region: { enabled: false } } });
+    expect(open).toHaveNoViolations();
+  });
+});
+
+describe('Checkbox', () => {
+  it('the label toggles; space toggles', async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<Checkbox label="Can comment" description="Recipients can leave comments" onChange={onChange} />);
+    const box = screen.getByRole('checkbox', { name: 'Can comment' });
+    expect(box).toHaveAccessibleDescription('Recipients can leave comments');
+    await user.click(screen.getByText('Can comment'));
+    expect(onChange).toHaveBeenLastCalledWith(true);
+    box.focus();
+    await user.keyboard(' ');
+    expect(onChange).toHaveBeenCalledTimes(2);
+  });
+
+  it('shows the mixed state', () => {
+    render(<Checkbox label="All documents" checked="indeterminate" />);
+    expect(screen.getByRole('checkbox', { name: 'All documents' })).toHaveAttribute('aria-checked', 'mixed');
+  });
+
+  it('disabled explains why and does not toggle', async () => {
+    const onChange = vi.fn();
+    render(<Checkbox label="Can forward" description="Turned off by the upstream share" disabled onChange={onChange} />);
+    const box = screen.getByRole('checkbox', { name: 'Can forward' });
+    expect(box).toBeDisabled();
+    expect(box).toHaveAccessibleDescription('Turned off by the upstream share');
+    await userEvent.click(screen.getByText('Can forward'));
+    expect(onChange).not.toHaveBeenCalled();
+  });
+});
+
+describe('RadioGroup', () => {
+  it('arrow keys move and choose', async () => {
+    const user = userEvent.setup();
+    function R() {
+      const [v, setV] = useState('view');
+      return <RadioGroup aria-label="Access" options={[{ value: 'view', label: 'View' }, { value: 'comment', label: 'Comment' }, { value: 'edit', label: 'Edit' }]} value={v} onChange={setV} />;
+    }
+    render(<R />);
+    const view = screen.getByRole('radio', { name: 'View' });
+    expect(view).toBeChecked();
+    view.focus();
+    // Radix moves focus on a timer and selects while the arrow is held —
+    // hold it like a real key press.
+    await user.keyboard('{ArrowDown>}');
+    await new Promise((r) => setTimeout(r, 0));
+    await user.keyboard('{/ArrowDown}');
+    expect(screen.getByRole('radio', { name: 'Comment' })).toBeChecked();
+    expect(screen.getByRole('radio', { name: 'Comment' })).toHaveFocus();
+  });
+});
+
+describe('Switch', () => {
+  it('is a switch; space and the label flip it at once', async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<Switch label="Require two-step verification" description="Including customers" onChange={onChange} />);
+    const sw = screen.getByRole('switch', { name: 'Require two-step verification' });
+    expect(sw).toHaveAttribute('aria-checked', 'false');
+    expect(sw).toHaveAccessibleDescription('Including customers');
+    sw.focus();
+    await user.keyboard(' ');
+    expect(onChange).toHaveBeenLastCalledWith(true);
+    await user.click(screen.getByText('Require two-step verification'));
+    expect(onChange).toHaveBeenCalledTimes(2);
+  });
+
+  it('checkbox, radio and switch pass axe', async () => {
+    const { container } = render(
+      <div>
+        <Checkbox label="Can comment" description="Recipients can leave comments" checked />
+        <RadioGroup aria-label="Access" options={['View', 'Comment']} value="View" />
+        <Switch label="Organise new documents" checked />
+      </div>,
+    );
+    expect(await a11y(container)).toHaveNoViolations();
+  });
+});

package/src/components/logo-art.ts

@@ -0,0 +1,4 @@
+// Generated by scripts/gen-logo.mjs from the COSX Design System 3.0
+// logo artwork. Do not edit — regenerate.
+export const WORDMARK = {"viewBox":"32 113 225 62","paths":["M242.79,170.43L228.93,152.02L215.07,170.43L204.43,170.43L223.66,145.02L204.29,119.29L214.99,119.29L229.06,137.89L243.14,119.29L253.58,119.29L234.34,144.85L253.7,170.43L242.79,170.43Z","M121.49,172.05a27.37,27.37,0,0,1-25.91-18.53l-1.17-3.42L84.33,161.86l-.49.58-.62.71A27.39,27.39,0,1,1,82,125l-5.92,5.89A18.25,18.25,0,0,0,63,125.36c-10.31,0-18.71,8.65-18.71,19.28s8.4,19.28,18.71,19.28A18.6,18.6,0,0,0,77.22,157c2.12-2.47,4.1-5.09,6-7.63,1-1.27,2-2.69,3.08-4l12.09-15.45.07-.09a25,25,0,0,1,2.91-3.48l.36-.38a27.07,27.07,0,0,1,19.74-8.69,27.38,27.38,0,1,1,0,54.76Zm0-46.69c-10.32,0-18.71,8.65-18.71,19.28s8.39,19.28,18.71,19.28,18.71-8.65,18.71-19.28S131.81,125.36,121.49,125.36Z","M177.23,171.65a34.27,34.27,0,0,1-22.3-8.3l3.65-7.11c5.58,4.82,12.57,7.68,18.81,7.68,6.85,0,10.93-2.65,10.93-7.08,0-5.71-6.22-7.48-12.82-9.35-8.16-2.31-17.41-4.94-17.41-15.42,0-8.94,7.83-14.72,19.94-14.72a36.71,36.71,0,0,1,19,5.31L193.51,130c-5.34-3.06-11.36-4.87-16.2-4.87-6,0-9.57,2.29-9.57,6.14,0,5.56,6.13,7.36,12.63,9.28,8.23,2.43,17.56,5.18,17.52,15.87C197.89,165.51,189.58,171.65,177.23,171.65Z"]} as const;
+export const LOOP = {"viewBox":"0 0 289.34 289.34","paths":["M193.32,99.1a45.06,45.06,0,0,0-32.85,14.46l-.59.64A41.46,41.46,0,0,0,155,120l-.1.16-20.13,25.7c-1.74,2.22-3.53,4.58-5.12,6.69-3.2,4.22-6.5,8.59-10,12.7-6.31,7.39-14.71,11.46-23.63,11.46-17.17,0-31.13-14.39-31.13-32.08h0c0-17.69,14-32.08,31.13-32.08a30.37,30.37,0,0,1,21.8,9.19l9.85-9.81a45.55,45.55,0,1,0,2,63.51l1-1.19.83-1,16.76-19.56,1.95,5.69a45.57,45.57,0,1,0,43.12-60.3Zm0,77.6c-17.17,0-31.14-14.39-31.14-32.08s14-32.08,31.14-32.08,31.13,14.39,31.13,32.08S210.49,176.7,193.32,176.7Z"]} as const;