@tempoxyz/id 0.0.0-pr-187.sha-eed04d3

package/src/app/components/CodeInput.tsx

@@ -0,0 +1,186 @@
+/**
+ * Renders a one-time code field as a row of boxes, after Link's sign-in screen.
+ * @module
+ */
+import {
+  type ChangeEvent,
+  type FocusEvent,
+  Fragment,
+  type InputHTMLAttributes,
+  type ReactNode,
+  useEffect,
+  useRef,
+  useState,
+} from 'react'
+import { style } from '../zyzz.config.js'
+
+/**
+ * One native input drawn as `length` boxes. The input stays uncontrolled, so forms read it from
+ * `FormData`, and autofill and paste fill every box at once. The boxes show its letters and digits,
+ * uppercased. `aria-invalid` draws them in red until the next keystroke. When `aria-invalid` turns
+ * on, the field clears, takes focus, and shakes, so a refused code can be typed again at once.
+ * `verified` tints the boxes green.
+ */
+export function CodeInput(props: CodeInput.Props): ReactNode {
+  const { length, onBlur, onChange, onFocus, separator, verified, ...rest } =
+    props
+  const [value, setValue] = useState(String(rest.defaultValue ?? ''))
+  const [focused, setFocused] = useState(false)
+  // Typing after a refusal clears the red, while the refusal stands until the next submission.
+  const [edited, setEdited] = useState(false)
+  const [nudging, setNudging] = useState(false)
+  const input = useRef<HTMLInputElement>(null)
+
+  const characters = clean(value)
+  const active = Math.min(characters.length, length - 1)
+  const invalid =
+    rest['aria-invalid'] === true || rest['aria-invalid'] === 'true'
+
+  // A field that renders invalid keeps its value, so only a later refusal clears it.
+  const previous = useRef(invalid)
+  useEffect(() => {
+    const refused = invalid && !previous.current
+    previous.current = invalid
+    if (!refused || !input.current) return
+    input.current.value = ''
+    input.current.focus()
+    setEdited(false)
+    setNudging(true)
+    setValue('')
+  }, [invalid])
+
+  return (
+    <div {...styles.root()}>
+      <div
+        {...styles.boxes()}
+        aria-hidden
+        data-nudging={nudging}
+        onAnimationEnd={() => setNudging(false)}
+      >
+        {Array.from({ length }, (_, index) => (
+          <Fragment key={index}>
+            {index === separator ? <span {...styles.separator()} /> : null}
+            <span
+              {...styles.box()}
+              data-active={focused && !rest.readOnly && index === active}
+              data-invalid={invalid && !edited}
+              data-verified={Boolean(verified)}
+            >
+              {characters[index]}
+            </span>
+          </Fragment>
+        ))}
+      </div>
+      <input
+        autoCapitalize="characters"
+        autoComplete="one-time-code"
+        spellCheck={false}
+        {...rest}
+        {...styles.input()}
+        ref={input}
+        onBlur={(event: FocusEvent<HTMLInputElement>) => {
+          setFocused(false)
+          onBlur?.(event)
+        }}
+        onChange={(event: ChangeEvent<HTMLInputElement>) => {
+          // The input holds only what the boxes show, so a paste cannot submit hidden characters.
+          const characters = clean(event.currentTarget.value).slice(0, length)
+          if (characters !== event.currentTarget.value)
+            event.currentTarget.value = characters
+          setEdited(true)
+          setValue(characters)
+          onChange?.(event)
+        }}
+        onFocus={(event: FocusEvent<HTMLInputElement>) => {
+          setFocused(true)
+          onFocus?.(event)
+        }}
+      />
+    </div>
+  )
+}
+
+/** A code's letters and digits, uppercased. */
+function clean(value: string) {
+  return value.replace(/[^0-9a-z]/gi, '').toUpperCase()
+}
+
+export declare namespace CodeInput {
+  /** A text input's attributes, except `value`, since the input stays uncontrolled. */
+  type Props = Omit<InputHTMLAttributes<HTMLInputElement>, 'value'> & {
+    /** The number of boxes. */
+    length: number
+    /** The box index a dash precedes, as in `BCDF–GHJK`. */
+    separator?: number | undefined
+    /** Whether the code was accepted, which tints the boxes green. */
+    verified?: boolean | undefined
+  }
+}
+
+namespace styles {
+  // The boxes match `Input`: a gray fill, and a border in the text color on the active box.
+  export const box = style({
+    alignItems: 'center',
+    aspectRatio: 'code',
+    backgroundColor: 'gray.100',
+    border: '2px solid',
+    borderColor: 'transparent',
+    borderRadius: 'xl',
+    display: 'flex',
+    flex: '1 1 0',
+    justifyContent: 'center',
+    maxWidth: 12,
+    transitionDuration: '150ms',
+    transitionProperty: 'background-color, border-color, color',
+    transitionTimingFunction: 'in-out',
+    typography: 'label.20',
+    '&[data-active="true"]': { borderColor: 'foreground' },
+    // An empty active box shows a caret, since the real input's caret is hidden.
+    '&[data-active="true"]:empty::after': {
+      backgroundColor: 'foreground',
+      content: '""',
+      height: 5,
+      width: 'px',
+      '@media (prefers-reduced-motion: no-preference)': { animation: 'pulse' },
+    },
+    '&[data-invalid="true"]': { borderColor: 'red.800', color: 'gray.700' },
+    '&[data-verified="true"]': {
+      backgroundColor: 'green.100',
+      borderColor: 'green.700',
+      color: 'green.900',
+    },
+  })
+
+  export const boxes = style({
+    display: 'flex',
+    gap: 2,
+    justifyContent: 'center',
+    '&[data-nudging="true"]': {
+      '@media (prefers-reduced-motion: no-preference)': { animation: 'nudge' },
+    },
+  })
+
+  // Covers the boxes so a tap anywhere on them focuses the input, which draws nothing itself.
+  export const input = style({
+    backgroundColor: 'transparent',
+    border: 'none',
+    caretColor: 'transparent',
+    color: 'transparent',
+    cursor: 'text',
+    inset: 0,
+    outline: 'none',
+    position: 'absolute',
+    width: 'full',
+    '::selection': { backgroundColor: 'transparent' },
+  })
+
+  export const root = style({ position: 'relative' })
+
+  export const separator = style({
+    alignSelf: 'center',
+    backgroundColor: 'gray.500',
+    flexShrink: 0,
+    height: 'px',
+    width: 3,
+  })
+}

package/src/app/components/ErrorMessage.tsx

@@ -0,0 +1,66 @@
+/** Renders an inline error, which also serves as a page's live status region. @module */
+import type { ReactNode } from 'react'
+import Alert from '~icons/lucide/circle-alert'
+import type { Props } from 'zyzz'
+import { style, variants } from '../zyzz.config.js'
+
+/**
+ * An error message with an alert icon, aligned to the start or the center. It always renders its
+ * live region, so screen readers announce a message that appears after the page loads.
+ */
+export function ErrorMessage(props: ErrorMessage.Props): ReactNode {
+  return (
+    <p
+      {...styles.message({ align: props.align })}
+      aria-live="polite"
+      id={props.id}
+      role="status"
+    >
+      {props.children ? (
+        <>
+          <Alert {...styles.icon()} aria-hidden />
+          <span>{props.children}</span>
+        </>
+      ) : null}
+    </p>
+  )
+}
+
+export declare namespace ErrorMessage {
+  /** The message, its alignment, and an `id` that controls reference. */
+  type Props = Props.Variants<typeof styles.message> & {
+    /** The message. Nothing shows without one. */
+    children?: ReactNode | undefined
+    /** Lets a control name the message with `aria-describedby`. */
+    id?: string | undefined
+  }
+}
+
+namespace styles {
+  export const icon = style({
+    flexShrink: 0,
+    height: 4,
+    marginTop: 'px',
+    width: 4,
+  })
+
+  export const message = variants({
+    base: {
+      alignItems: 'start',
+      color: 'red.900',
+      display: 'flex',
+      gap: 2,
+      typography: 'copy.14',
+      // An empty region leaves the layout, so its parent's gap does not reserve space for it. The
+      // region stays rendered, so screen readers still announce a message that appears.
+      ':empty': { position: 'absolute' },
+    },
+    defaultVariants: { align: 'start' },
+    variants: {
+      align: {
+        center: { justifyContent: 'center', textAlign: 'center' },
+        start: {},
+      },
+    },
+  })
+}

package/src/app/components/Grant.tsx

@@ -0,0 +1,323 @@
+/**
+ * What a key that an app requests may do, its spending limits and expiry, as the approval and device
+ * screens show it.
+ * @module
+ */
+import { type ReactNode, useId } from 'react'
+import Info from '~icons/lucide/info'
+import type * as KeyAuthorization from '../../internal/KeyAuthorization.js'
+import { style } from '../zyzz.config.js'
+import { Tooltip } from './Tooltip.js'
+
+/** Each listed token's icon URL, by symbol. */
+const icons = Object.fromEntries(
+  Object.entries(
+    import.meta.glob<string>('./icons/*.{png,svg,webp}', {
+      eager: true,
+      import: 'default',
+      query: '?url',
+    }),
+  ).map(([file, url]) => [
+    file.slice('./icons/'.length, file.lastIndexOf('.')),
+    url,
+  ]),
+)
+
+/**
+ * Logos in `logos/`, as `<symbol>.light.svg` and `<symbol>.dark.svg`, by symbol and the color
+ * scheme each one stands out on. They take the place of an icon.
+ */
+const logos = Object.entries(
+  import.meta.glob<string>('./logos/*.{light,dark}.{png,svg,webp}', {
+    eager: true,
+    import: 'default',
+    query: '?url',
+  }),
+).reduce<Record<string, { dark?: string; light?: string }>>(
+  (result, [file, url]) => {
+    const [, symbol, scheme] = file.match(
+      /^\.\/logos\/(.+)\.(light|dark)\.\w+$/,
+    )!
+    result[symbol!] = { ...result[symbol!], [scheme!]: url }
+    return result
+  },
+  {},
+)
+
+/** What the key that an app requests may do: its limits and expiry. */
+export function Grant(props: Grant.Props): ReactNode {
+  // Several grants can share a document, so each derives its own ID.
+  const id = useId()
+  const { expiry, limits } = props.keyAuthorization
+  const Heading = props.heading ?? 'h2'
+  // A one-time limit states this beside periodic ones, which would otherwise read the same.
+  const periodic = limits.some((limit) => limit.period)
+  return (
+    <section {...styles.section()} aria-labelledby={id}>
+      <Heading {...styles.heading()} id={id}>
+        This app can spend up to
+      </Heading>
+      <ul {...styles.list()}>
+        {limits.map((limit) => (
+          <li
+            {...styles.limit()}
+            key={`${limit.currency}:${limit.period ?? 0}`}
+          >
+            <span>
+              {(() => {
+                if (limit.period)
+                  return `${format(limit)} ${every(limit.period)}`
+                if (periodic) return `${format(limit)} in total`
+                return format(limit)
+              })()}
+            </span>
+            <span {...styles.icons()}>
+              {limit.tokens.map((token) => {
+                // Each token's own limit shows on its icon, since the total spans several.
+                const label = `${token.symbol}: ${format({ amount: token.amount, currency: limit.currency })}`
+                const logo = logos[token.symbol]
+                const icon = logo?.light ?? icons[token.symbol]
+                return (
+                  <Tooltip key={token.symbol} label={label}>
+                    <span {...styles.token()} tabIndex={0}>
+                      {icon ? (
+                        // The page follows the system color scheme, so the image does too.
+                        <picture>
+                          {logo?.dark ? (
+                            <source
+                              media="(prefers-color-scheme: dark)"
+                              srcSet={logo.dark}
+                            />
+                          ) : null}
+                          <img
+                            {...styles.icon()}
+                            alt={label}
+                            height={20}
+                            src={icon}
+                            width={20}
+                          />
+                        </picture>
+                      ) : (
+                        // A token without a logo shows its initial.
+                        <span
+                          {...styles.placeholder()}
+                          aria-label={label}
+                          role="img"
+                        >
+                          {token.symbol[0]}
+                        </span>
+                      )}
+                    </span>
+                  </Tooltip>
+                )
+              })}
+            </span>
+          </li>
+        ))}
+      </ul>
+      <dl {...styles.details()}>
+        <div>
+          <dt {...styles.term()}>Expires</dt>{' '}
+          <dd {...styles.value()}>
+            {until(expiry)}{' '}
+            {/* The tooltip's text never reaches the server render, so it shows the visitor's own time zone. */}
+            <Tooltip
+              label={new Date(expiry * 1000).toLocaleString(undefined, {
+                day: 'numeric',
+                hour: 'numeric',
+                minute: '2-digit',
+                month: 'short',
+                timeZoneName: 'short',
+                year: 'numeric',
+              })}
+            >
+              <Info
+                {...styles.info()}
+                aria-label="Expiry date"
+                role="img"
+                tabIndex={0}
+              />
+            </Tooltip>
+          </dd>
+        </div>
+      </dl>
+    </section>
+  )
+}
+
+export declare namespace Grant {
+  type Props = {
+    /** The level of the section's heading, one below the screen's title: `h2` by default, or `h5` on the flows canvas. */
+    heading?: 'h2' | 'h5' | undefined
+    /** The key that the app requests. */
+    keyAuthorization: KeyAuthorization.Description
+  }
+}
+
+/** Groups thousands and keeps every decimal the amount has. */
+const decimal = new Intl.NumberFormat('en-US', { maximumFractionDigits: 20 })
+
+/** The expiry's distance from now, such as `in 7 days`. */
+const relative = new Intl.RelativeTimeFormat('en-US', { numeric: 'always' })
+
+/** Spans an expiry reads in, largest first. Months and years are approximate. */
+const spans = [
+  ['year', 31_536_000],
+  ['month', 2_592_000],
+  ['week', 604_800],
+  ['day', 86_400],
+  ['hour', 3_600],
+  ['minute', 60],
+] as const
+
+/** Units a period reads in, largest first. */
+const units = [
+  ['week', 604_800],
+  ['day', 86_400],
+  ['hour', 3_600],
+  ['minute', 60],
+  ['second', 1],
+] as const
+
+/** How often a limit resets, such as `per day` or `every 2 weeks`. */
+function every(period: number) {
+  const [unit, seconds] = units.find((entry) => period % entry[1] === 0)!
+  const count = period / seconds
+  return count === 1 ? `per ${unit}` : `every ${count} ${unit}s`
+}
+
+/** A limit in its currency's format, such as `$1,000`, or with its code when Intl has no currency for it. */
+function format(
+  limit: Pick<
+    KeyAuthorization.Description['limits'][number],
+    'amount' | 'currency'
+  >,
+) {
+  const amount = limit.amount as Intl.StringNumericLiteral
+  try {
+    return new Intl.NumberFormat('en-US', {
+      currency: limit.currency,
+      maximumFractionDigits: 6,
+      style: 'currency',
+      trailingZeroDisplay: 'stripIfInteger',
+    }).format(amount)
+  } catch {
+    // A yield-bearing token's own symbol is not a currency code.
+    return `${decimal.format(amount)} ${limit.currency}`
+  }
+}
+
+/**
+ * How long until `expiry`, in Unix seconds, in its largest whole span, such as `in 3 months`. A
+ * span counts from a minute short of it, so a key that lasts a year reads `in 1 year` while the
+ * page loads.
+ */
+function until(expiry: number) {
+  const remaining = expiry - Date.now() / 1000
+  const [unit, seconds] =
+    spans.find((entry) => remaining + 60 >= entry[1]) ?? spans.at(-1)!
+  return relative.format(Math.max(1, Math.round(remaining / seconds)), unit)
+}
+
+namespace styles {
+  // Each term and its value read as one line of text.
+  export const details = style({
+    display: 'grid',
+    gap: 2,
+    margin: 0,
+    typography: 'copy.14',
+  })
+
+  export const heading = style({
+    color: 'gray.900',
+    margin: 0,
+    typography: 'copy.14',
+  })
+
+  export const icon = style({
+    borderRadius: 'full',
+    display: 'block',
+    height: 5,
+    width: 5,
+  })
+
+  // Several tokens overlap, and spread apart while hovered so each symbol can show.
+  export const icons = style({
+    display: 'flex',
+    flexShrink: 0,
+    '& > span + span': { marginInlineStart: 'overlap' },
+    '&:hover > span + span': { marginInlineStart: 1 },
+  })
+
+  export const info = style({
+    color: 'gray.900',
+    display: 'inline',
+    height: 4,
+    outline: 'none',
+    verticalAlign: 'middle',
+    width: 4,
+    ':focus-visible': {
+      outline: '2px solid',
+      outlineColor: 'blue.700',
+      outlineOffset: '2px',
+    },
+  })
+
+  export const limit = style({
+    alignItems: 'center',
+    display: 'flex',
+    gap: 2,
+  })
+
+  export const list = style({
+    display: 'grid',
+    gap: 2,
+    listStyle: 'none',
+    margin: 0,
+    padding: 0,
+    typography: 'copy.16.strong',
+  })
+
+  export const placeholder = style({
+    alignItems: 'center',
+    backgroundColor: 'background.surface',
+    borderRadius: 'full',
+    color: 'gray.900',
+    display: 'flex',
+    height: 5,
+    justifyContent: 'center',
+    typography: 'label.12',
+    width: 5,
+  })
+
+  export const section = style({
+    backgroundColor: 'gray.100',
+    borderRadius: '2xl',
+    display: 'grid',
+    gap: 3,
+    margin: 0,
+    padding: 5,
+  })
+
+  export const term = style({ color: 'gray.900', display: 'inline' })
+
+  // The ring matches the section's fill, so overlapping tokens stay apart.
+  export const token = style({
+    borderRadius: 'full',
+    outline: '2px solid',
+    outlineColor: 'gray.100',
+    ':focus-visible': { outlineColor: 'blue.700' },
+    // Under reduced motion, the tokens spread apart without a transition.
+    '@media (prefers-reduced-motion: no-preference)': {
+      transitionDuration: '150ms',
+      transitionProperty: 'margin',
+      transitionTimingFunction: 'in-out',
+    },
+  })
+
+  export const value = style({
+    display: 'inline',
+    margin: 0,
+    overflowWrap: 'anywhere',
+  })
+}

package/src/app/components/Input.tsx

@@ -0,0 +1,48 @@
+/** Renders the text input. @module */
+import type { InputHTMLAttributes, ReactNode } from 'react'
+import type { Props } from 'zyzz'
+import { variants } from '../zyzz.config.js'
+
+/** A text input in the `medium` or `large` size. `aria-invalid` draws it in red. */
+export function Input(props: Input.Props): ReactNode {
+  const { size, ...rest } = props
+  return <input {...rest} {...styles.input({ size })} />
+}
+
+export declare namespace Input {
+  /** The size, with a text input's attributes. */
+  type Props = Props.Variants<typeof styles.input> &
+    Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>
+}
+
+namespace styles {
+  // A gray fill with no visible border. Focus draws the border in the text color.
+  export const input = variants({
+    base: {
+      backgroundColor: 'gray.100',
+      border: '2px solid',
+      borderColor: 'transparent',
+      borderRadius: 'xl',
+      color: 'foreground',
+      minWidth: 0,
+      outline: 'none',
+      paddingInline: 4,
+      transitionDuration: '150ms',
+      transitionProperty: 'background-color, border-color',
+      transitionTimingFunction: 'in-out',
+      width: 'full',
+      '::placeholder': { color: 'gray.900' },
+      ':hover': { backgroundColor: 'gray.200' },
+      ':focus': { backgroundColor: 'gray.100', borderColor: 'foreground' },
+      '&[aria-invalid="true"]': { borderColor: 'red.800' },
+      ':disabled': { color: 'gray.700', cursor: 'not-allowed' },
+    },
+    defaultVariants: { size: 'large' },
+    variants: {
+      size: {
+        large: { height: 12, typography: 'copy.16' },
+        medium: { height: 9, typography: 'copy.14' },
+      },
+    },
+  })
+}

package/src/app/components/Tooltip.tsx

@@ -0,0 +1,45 @@
+/** Renders a hint above an element while it is hovered or focused, on Base UI's tooltip. @module */
+import { Tooltip as Base } from '@base-ui/react/tooltip'
+import type { ReactElement, ReactNode } from 'react'
+import { style } from '../zyzz.config.js'
+
+/**
+ * Shows `label` above `children` while it is hovered or focused. `children` is the trigger element,
+ * which receives the tooltip's props and ref, so it renders a DOM element.
+ */
+export function Tooltip(props: Tooltip.Props): ReactNode {
+  return (
+    <Base.Root>
+      <Base.Trigger delay={150} render={props.children} />
+      <Base.Portal>
+        <Base.Positioner sideOffset={8}>
+          <Base.Popup {...styles.popup()}>{props.label}</Base.Popup>
+        </Base.Positioner>
+      </Base.Portal>
+    </Base.Root>
+  )
+}
+
+export declare namespace Tooltip {
+  type Props = {
+    /** The element the tooltip attaches to. */
+    children: ReactElement
+    /** The hint. */
+    label: ReactNode
+  }
+}
+
+namespace styles {
+  export const popup = style({
+    backgroundColor: 'foreground',
+    borderRadius: 'lg',
+    color: 'background.primary',
+    paddingBlock: 1,
+    paddingInline: 2,
+    transitionDuration: '150ms',
+    transitionProperty: 'opacity',
+    transitionTimingFunction: 'in-out',
+    typography: 'label.12',
+    '&[data-starting-style], &[data-ending-style]': { opacity: 0 },
+  })
+}

package/src/app/components/icons/BRZ.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg"> <g id="sub_brz-Brand assets"> <g id="sub_brz-Frame 11"> <g id="sub_brz-Frame 55"> <g id="sub_brz-Frame 53"> <g id="sub_brz-Currencies" clip-path="url(#sub_brz-clip0_1741_2949)"> <g id="sub_brz-BRZ"> <path id="sub_brz-Background" d="M40 80C62.0914 80 80 62.0914 80 40C80 17.9086 62.0914 0 40 0C17.9086 0 0 17.9086 0 40C0 62.0914 17.9086 80 40 80Z" fill="url(#sub_brz-paint0_linear_1741_2949)"/> <path id="sub_brz-Inner Circle" d="M39.9998 76.144C59.9616 76.144 76.1438 59.9617 76.1438 40C76.1438 20.0382 59.9616 3.85596 39.9998 3.85596C20.0381 3.85596 3.85583 20.0382 3.85583 40C3.85583 59.9617 20.0381 76.144 39.9998 76.144Z" fill="#160F29"/> <g id="sub_brz-Icon"> <path id="sub_brz-Path 1" d="M40.0025 43.5679L32.609 50.9614L40.0025 58.3549L47.396 50.9614L40.0025 43.5679Z" fill="white"/> <path id="sub_brz-Path 2" d="M62.1799 36.1719L54.7879 28.7759L47.392 36.1719L39.9999 28.7759H25.2119L17.8199 36.1719L25.2119 43.5639L32.6079 36.1719L39.9999 43.5639H54.7879L62.1799 36.1719Z" fill="white"/> </g> </g> </g> </g> </g> </g> </g> <defs> <linearGradient id="sub_brz-paint0_linear_1741_2949" x1="11.196" y1="68.804" x2="67.692" y2="12.308" gradientUnits="userSpaceOnUse"> <stop offset="0.04" stop-color="#FFC100"/> <stop offset="1" stop-color="#00C800"/> </linearGradient> <clipPath id="sub_brz-clip0_1741_2949"> <rect width="80" height="80" fill="white"/> </clipPath> </defs> </svg>

package/src/app/components/icons/EURAU.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="720" height="714" fill="none" viewBox="0 0 720 714"><circle cx="357" cy="357" r="357" fill="#000"/><path fill="#fff" d="M405.18 357.091H457C452.59 408.451 417.308 440 363.65 440c-55.863 0-90.778-33.751-99.598-95.015H242l4.778-25.68h14.701V304.63H242l4.778-25.679h16.539c8.82-63.1 44.102-97.951 101.435-97.951 54.394 0 87.838 31.183 91.146 81.809H405.18c-3.675-23.479-17.641-38.153-40.428-38.153-26.094 0-43 18.71-48.88 54.295h80.487l-4.777 25.679h-77.915v14.675h74.974l-4.777 25.68h-67.257c5.881 33.75 22.051 51.359 47.043 51.359 22.786 0 37.855-15.041 41.53-39.253"/><path fill="url(#a)" d="M357 96.15c143.852 0 260.465 116.148 260.465 259.425h96.768C714.233 159.197 554.165 0 357 0S0 159.197 0 355.575h96.536C96.536 212.298 213.148 96.151 357 96.151"/><path fill="url(#b)" d="M357.001 514.313c-88.02 0-159.375-71.07-159.375-158.739H96.536c0 143.278 116.613 259.425 260.465 259.425s260.465-116.147 260.464-259.425H516.376c0 87.669-71.354 158.739-159.375 158.739"/><defs><linearGradient id="a" x1="714.233" x2="51.769" y1="355.575" y2="-78.929" gradientUnits="userSpaceOnUse"><stop stop-color="#30c0fe"/><stop offset="1" stop-color="#00ffea"/></linearGradient><linearGradient id="b" x1="617.466" x2="134.2" y1="614.999" y2="298.132" gradientUnits="userSpaceOnUse"><stop stop-color="#30c0fe"/><stop offset="1" stop-color="#00ffea"/></linearGradient></defs></svg>

package/src/app/components/icons/EURC.e.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 96 96"><g clip-path="url(#a)"><path fill="#0b53bf" d="M48 96c26.51 0 48-21.49 48-48S74.51 0 48 0 0 21.49 0 48s21.49 48 48 48"/><path fill="#fff" stroke="#0b53bf" stroke-miterlimit="10" stroke-width=".03" d="M58.2 59.43c-2.1.84-4.38 1.32-6.57 1.32-4.337 0-8.426-1.847-10.38-6.3h9.54l1.86-4.5H40.14q-.09-.93-.09-1.95c0-1.02.03-1.33.09-1.95h14.1l1.86-4.5H41.25c1.954-4.452 6.043-6.3 10.38-6.3 2.19 0 4.47.48 6.57 1.32l1.92-4.56c-2.58-1.35-5.49-2.01-8.4-2.01-7.024 0-14.123 3.927-16.693 11.55H30.42v4.5h3.684a22.5 22.5 0 0 0 0 3.9H30.42v4.5h4.607C37.597 62.075 44.697 66 51.72 66c2.91 0 5.82-.66 8.4-2.01z"/><path fill="#fff" stroke="#0b53bf" stroke-miterlimit="10" stroke-width=".03" d="M18 48c0-13.59 9.03-25.05 21.36-28.77v-6.18C23.64 16.89 12 31.08 12 48s11.64 31.11 27.36 34.95v-6.18C27.03 73.08 18 61.59 18 48Zm38.64-34.95v6.18C68.97 22.95 78 34.41 78 48s-9.03 25.05-21.36 28.77v6.18C72.36 79.11 84 64.92 84 48S72.36 16.89 56.64 13.05Z"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h96v96H0z"/></clipPath></defs></svg>