@12-apps/ui 4.0.1 → 4.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/ui",
-  "version": "4.0.1",
+  "version": "4.1.0",
   "license": "MIT",
   "packageManager": "pnpm@9.0.0",
   "type": "module",
@@ -78,6 +78,7 @@
     "./form/Autocomplete": "./src/components/form/Autocomplete/index.ts",
     "./form/Button": "./src/components/form/Button/index.ts",
     "./form/Calendar": "./src/components/form/Calendar/index.ts",
+    "./form/CategorySelect": "./src/components/form/CategorySelect/index.ts",
     "./form/CepField": "./src/components/form/CepField/index.ts",
     "./form/Checkbox": "./src/components/form/Checkbox/index.ts",
     "./form/CodeEditor": "./src/components/form/CodeEditor/index.ts",

package/src/components/data-display/Alert/Alert.styles.tsx

@@ -2,7 +2,7 @@ import Error from '@mui/icons-material/Error';
 import Info from '@mui/icons-material/Info';
 import CheckCircle from '@mui/icons-material/CheckCircle';
 import Warning from '@mui/icons-material/Warning';
-import { alpha, keyframes } from '@mui/material';
+import { alpha, darken, keyframes, lighten } from '@mui/material';
 import type { CSSObject, Theme } from '@mui/material/styles';
 import React from 'react';
 
@@ -117,58 +117,165 @@ export const getVariantIcon = (variant: string) => {
 // which is narrower than MUI's PaletteColor.
 export type AlertPalette = { main: string; light?: string; dark?: string };
 
-// The six visual variants. Each block is spread in only when it matches, which
-// is how the original inline version read; keeping that shape here means the
-// styled() callback carries one branch instead of six.
-export const alertVariantStyles = (
+/** The four semantic variants, which differ only in which palette they read. */
+const SEMANTIC_VARIANTS = new Set(['info', 'success', 'warning', 'danger']);
+
+/**
+ * The room the message is given — padding, the stack's rhythm, and where the
+ * icon and the close button sit relative to it.
+ *
+ * Extracted for the same reason {@link alertVariantStyles} and
+ * {@link alertEmphasisStyles} were: `styled()`'s callback is one function, and
+ * every block written inline is counted against its length by the complexity
+ * gate. Keeping the layout here means the callback assembles four named pieces
+ * instead of carrying all of them.
+ */
+export const alertLayoutStyles = (
   theme: Theme,
-  customVariant: string | undefined,
   colorPalette: AlertPalette,
+  animate: boolean | undefined,
 ): CSSObject => ({
-...(customVariant === 'info' && {
-  backgroundColor: alpha(colorPalette.main, 0.1),
-  color: colorPalette.main,
-  border: `1px solid ${alpha(colorPalette.main, 0.2)}`,
-  '.MuiAlert-icon': {
-    color: colorPalette.main,
-  },
-}),
+  // ROOM TO READ.
+  //
+  // MUI's `6px 16px` is sized for one line of text and nothing else. This Alert
+  // routinely carries three things stacked — a sentence, a smaller explanation,
+  // then a control — and at 6px they touched top and bottom and ran together
+  // vertically, so the whole card read as one dense block instead of as a
+  // message with parts. The generosity is what makes the structure legible; it
+  // is not decoration.
+  //
+  // Padding stays overridable by an `sx` (a full-bleed strip legitimately wants
+  // it tight), because this is a default rather than a rule.
+  padding: theme.spacing(1.75, 2),
 
-...(customVariant === 'success' && {
-  backgroundColor: alpha(colorPalette.main, 0.1),
-  color: colorPalette.main,
-  border: `1px solid ${alpha(colorPalette.main, 0.2)}`,
-  '.MuiAlert-icon': {
-    color: colorPalette.main,
+  '.MuiAlert-message': {
+    display: 'flex',
+    flexDirection: 'column',
+    // 0.5 put a title, its explanation and a button 4px apart, which reads as a
+    // spacing bug rather than as a group. 1 separates the lines; the extra
+    // margin below goes to whatever CONTROL sits at the end, because the gap
+    // between prose and a thing you press has to be bigger than the gap between
+    // two lines of prose or the button looks like part of the text.
+    gap: theme.spacing(1),
+    fontSize: '0.95rem',
+    lineHeight: 1.5,
+    // No padding of its own — the root's is now doing that job, and MUI's
+    // default `8px 0` on top of it would double the vertical space.
+    padding: 0,
+    // A CONTROL ON A TINTED PANEL NEEDS AN EDGE.
+    //
+    // `ghost` and `text` paint no background and no border — bare labels, which
+    // works on white where the surrounding page is obviously not clickable.
+    // Inside a coloured Alert it stops working: the label is one more coloured
+    // phrase among several, and a "Cancelar" beside two lines of prose reads as
+    // part of the prose.
+    //
+    // Only the BORDER is set, never the background or the colour, and that is
+    // what makes it safe to apply to every button rather than just the bare
+    // ones: a `solid` keeps its fill and its light label and gains a hairline
+    // in the same hue, while a `ghost` gains the whole affordance.
+    '.MuiButton-root': {
+      marginTop: theme.spacing(0.5),
+      border: `1px solid ${alpha(colorPalette.main, 0.45)}` },
   },
-}),
 
-...(customVariant === 'warning' && {
-  backgroundColor: alpha(colorPalette.main, 0.1),
-  color: colorPalette.main,
-  border: `1px solid ${alpha(colorPalette.main, 0.2)}`,
   '.MuiAlert-icon': {
-    color: colorPalette.main,
-  },
-}),
+    transition: 'transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+    alignItems: 'center',
+    // Clear of the words rather than nearly touching them, and aligned to the
+    // FIRST line instead of centred on the whole block — an icon floating
+    // halfway down a three-line message points at nothing.
+    alignSelf: 'flex-start',
+    marginRight: theme.spacing(1.75),
+    paddingTop: theme.spacing(0.25),
+    animation: animate ? `${iconRotate} 0.6s ease-out` : 'none' },
 
-...(customVariant === 'danger' && {
-  backgroundColor: alpha(colorPalette.main, 0.1),
-  color: colorPalette.main,
-  border: `1px solid ${alpha(colorPalette.main, 0.2)}`,
-  '.MuiAlert-icon': {
-    color: colorPalette.main,
-  },
-}),
+  // The close button, kept off the text it sits beside.
+  '.MuiAlert-action': {
+    alignItems: 'flex-start',
+    paddingLeft: theme.spacing(2) },
+});
+
+/**
+ * A semantic Alert's surface and ink.
+ *
+ * ## Why this is not `alpha(main, 0.1)`
+ *
+ * It used to be, four times over, with `color: main` for the text. Both halves
+ * were wrong, and independently so.
+ *
+ * The fill was TRANSLUCENT. A 10% wash only reads as a banner when something
+ * opaque is behind it, so the component silently depended on where a consumer
+ * put it. Placed over content — a floating notice, an invite anchored above a
+ * catalogue — the page came straight through and the sentence interleaved with
+ * whatever it was over. That is not a faint banner; it is an unreadable one,
+ * and nothing in the component said so.
+ *
+ * The ink was the SEVERITY HUE at body size. `#0288d1`, this library's info
+ * blue, is 3.03:1 on white — under the 4.5:1 WCAG AA floor before any wash is
+ * involved. So the text failed on a plain white page too, where the fill was
+ * behaving exactly as intended.
+ *
+ * ## Why `lighten`/`darken` rather than a hand-picked pair
+ *
+ * These are the same transforms MUI's own `standard` Alert uses, at the same
+ * ratios — the recipe this component overrode. Reusing it means an OPAQUE tint
+ * with a dark ink of the same hue, contrast that holds on any surface because
+ * it no longer depends on one, and a pairing already proven across MUI's
+ * palette rather than eyeballed here. Both modes are handled: on a dark theme
+ * the tint darkens and the ink lightens, which an alpha wash could never do
+ * because it carries the seed's own lightness through unchanged.
+ *
+ * The border keeps an alpha — it is a hairline over the tint it belongs to, so
+ * translucency there costs nothing and lets the edge follow the fill.
+ */
+const semanticSurface = (theme: Theme, colorPalette: AlertPalette): CSSObject => {
+  const dark = theme.palette.mode === 'dark';
+  return {
+    backgroundColor: dark ? darken(colorPalette.main, 0.8) : lighten(colorPalette.main, 0.9),
+    color: dark ? lighten(colorPalette.main, 0.6) : darken(colorPalette.main, 0.6),
+    border: `1px solid ${alpha(colorPalette.main, 0.35)}`,
+    '.MuiAlert-icon': {
+      color: colorPalette.main,
+    },
+  };
+};
+
+// The six visual variants. Each block is spread in only when it matches, which
+// is how the original inline version read; keeping that shape here means the
+// styled() callback carries one branch instead of six. The four semantics were
+// four IDENTICAL copies of the same block — they now share one, so the next
+// change to a banner's surface cannot land on three of them.
+export const alertVariantStyles = (
+  theme: Theme,
+  customVariant: string | undefined,
+  colorPalette: AlertPalette,
+): CSSObject => ({
+...(customVariant !== undefined &&
+  SEMANTIC_VARIANTS.has(customVariant) &&
+  semanticSurface(theme, colorPalette)),
 
 ...(customVariant === 'glass' && {
-  backgroundColor: alpha(theme.palette.background.paper, 0.1),
-  backdropFilter: 'blur(20px)',
-  border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
+  // 85%, not 10%. This is the variant that is MEANT to be see-through, and it
+  // was the same mistake in a costume: at 0.1 the blur had almost nothing to
+  // sit on, so `glass` was not frosted, it was a window. A frosted pane has to
+  // be mostly pane — the backdrop should be legible AS texture behind the
+  // text, never as competition with it.
+  backgroundColor: alpha(theme.palette.background.paper, 0.85),
+  backdropFilter: 'blur(20px) saturate(180%)',
+  WebkitBackdropFilter: 'blur(20px) saturate(180%)',
+  border: `1px solid ${alpha(theme.palette.divider, 0.4)}`,
   color: theme.palette.text.primary,
   '.MuiAlert-icon': {
     color: theme.palette.primary.main,
   },
+  // Safari before 18 and Firefox with the filter disabled paint the declared
+  // alpha with nothing blurred behind it — the see-through banner this is
+  // fixing. There is no degraded frost to fall back to, so it falls back to an
+  // opaque pane: less pretty, still readable.
+  '@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)))': {
+    backgroundColor: theme.palette.background.paper,
+  },
 }),
 
 ...(customVariant === 'gradient' && {

package/src/components/data-display/Alert/Alert.tsx

@@ -11,11 +11,11 @@ import React from 'react';
 
 import {
   alertEmphasisStyles,
+  alertLayoutStyles,
   alertVariantStyles,
   fadeInScale,
   getColorFromTheme,
-  getVariantIcon,
-  iconRotate } from './Alert.styles';
+  getVariantIcon } from './Alert.styles';
 import type { AlertColor } from '@mui/material';
 import type { AlertProps } from './Alert.types';
 
@@ -39,18 +39,7 @@ const StyledAlert = styled(MuiAlert, {
     animation: animate ? `${fadeInScale} 0.3s ease-out` : 'none',
     willChange: 'transform, opacity',
 
-    // Enhanced base styles
-    '.MuiAlert-message': {
-      display: 'flex',
-      flexDirection: 'column',
-      gap: theme.spacing(0.5),
-      fontSize: '0.95rem',
-      lineHeight: 1.5 },
-
-    '.MuiAlert-icon': {
-      transition: 'transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
-      alignItems: 'center',
-      animation: animate ? `${iconRotate} 0.6s ease-out` : 'none' },
+    ...alertLayoutStyles(theme, colorPalette, animate),
 
     // Hover effects
     '&:hover': {

package/src/components/data-display/DataViews/data-views-category-pill.tsx

@@ -0,0 +1,98 @@
+"use client";
+
+import { CategorySelect } from "../../form/CategorySelect";
+import { MultiSelectDropdown } from "../../layout/ContentToolbar";
+
+import type { FilterFieldConfig, FilterOption } from "./data-views-types";
+
+/**
+ * Diff a whole-array selection back into per-value toggles.
+ *
+ * The filter state's only channel is `onTogglePill(field, value, checked)`, but
+ * a tree hands back the entire selection at once. Diffing here keeps that one
+ * channel the single way a pill ever changes, rather than giving the
+ * hierarchical control a private path into the state.
+ */
+export function emitPillDiff(
+  fieldId: string,
+  before: readonly string[],
+  after: readonly string[],
+  onTogglePill: (fieldId: string, value: string, checked: boolean) => void,
+): void {
+  const had = new Set(before);
+  const wants = new Set(after);
+  after.forEach((value) => {
+    if (!had.has(value)) onTogglePill(fieldId, value, true);
+  });
+  before.forEach((value) => {
+    if (!wants.has(value)) onTogglePill(fieldId, value, false);
+  });
+}
+
+/** A filter option as the category tree wants it. */
+const toCategoryOption = (option: FilterOption) => ({
+  id: option.value,
+  name: option.label,
+  parentId: option.parentId ?? null,
+});
+
+interface PillControlProps<T extends Record<string, unknown>> {
+  fieldId: string;
+  pill: FilterFieldConfig<T>;
+  selected: string[];
+  onTogglePill: (fieldId: string, value: string, checked: boolean) => void;
+  onClearField: (fieldId: string) => void;
+  onOpenChange?: (open: boolean) => void;
+  testIdPrefix: string;
+  /** `stacked` in the filter panel, `pill` on the inline bar. */
+  layout?: "stacked" | "pill";
+}
+
+/**
+ * One filter pill: the hierarchical category tree, or the flat multi-select.
+ *
+ * A category set nests, and flattening it into one list is what made "Massas"
+ * (mercearia) indistinguishable from "Massas" (pratos principais). `control:
+ * "category"` opts a field into the tree, which shows each hit under its parent.
+ */
+export function PillControl<T extends Record<string, unknown>>({
+  fieldId,
+  pill,
+  selected,
+  onTogglePill,
+  onClearField,
+  onOpenChange,
+  testIdPrefix,
+  layout = "pill",
+}: PillControlProps<T>): React.JSX.Element {
+  const testId = `${testIdPrefix}-filter-${fieldId}`;
+  if (pill.control === "category") {
+    return (
+      <CategorySelect
+        placeholder={pill.label}
+        label={layout === "stacked" ? pill.label : undefined}
+        fullWidth={layout === "stacked"}
+        options={pill.options.map(toCategoryOption)}
+        value={selected}
+        onChange={(next) => emitPillDiff(fieldId, selected, next, onTogglePill)}
+        dataTestId={testId}
+      />
+    );
+  }
+  return (
+    <MultiSelectDropdown
+      label={pill.label}
+      options={pill.options}
+      selected={new Set(selected)}
+      onToggle={(value, checked) => onTogglePill(fieldId, value, checked)}
+      onClear={() => onClearField(fieldId)}
+      allLabel="Todas"
+      searchable={pill.searchEnabled ? true : undefined}
+      searchPlaceholder="Buscar…"
+      noResultsLabel="Nenhum resultado"
+      layout={layout}
+      onOpenChange={onOpenChange}
+      data-testid={testId}
+    />
+  );
+}

package/src/components/data-display/DataViews/data-views-filter-panel.tsx

@@ -3,9 +3,9 @@
 import { Box, Link } from "@mui/material";
 
 import { StackedModal, StackedModalContent } from "../../feedback/StackedModal";
-import { MultiSelectDropdown } from "../../layout/ContentToolbar";
 import { TableFilter } from "../../layout/TableFilter";
 
+import { PillControl } from "./data-views-category-pill";
 import { PanelRangeField } from "./data-views-range-pill";
 import type {
   FilterFieldConfig,
@@ -45,21 +45,18 @@ function PillField<T extends Record<string, unknown>>({
 }): React.JSX.Element {
   const testId = `${testIdPrefix}-filter-${field.id}`;
   // `searchEnabled` forces the searchable multi-select; a plain `multiselect`
-  // keeps the auto "search only when the list is long" rule.
-  if (field.searchEnabled || field.control === "multiselect") {
+  // keeps the auto "search only when the list is long" rule. `category` is the
+  // hierarchical tree — see PillControl.
+  if (field.searchEnabled || field.control === "multiselect" || field.control === "category") {
     return (
-      <MultiSelectDropdown
-        label={field.label}
-        options={field.options}
-        selected={new Set(selected)}
-        onToggle={(value, checked) => onTogglePill(field.id, value, checked)}
-        onClear={() => onClearField(field.id)}
-        allLabel="Todas"
-        searchable={field.searchEnabled ? true : undefined}
-        searchPlaceholder="Buscar…"
-        noResultsLabel="Nenhum resultado"
+      <PillControl
+        fieldId={field.id}
+        pill={field}
+        selected={selected}
+        onTogglePill={onTogglePill}
+        onClearField={onClearField}
+        testIdPrefix={testIdPrefix}
         layout="stacked"
-        data-testid={testId}
       />
     );
   }

package/src/components/data-display/DataViews/data-views-inline-bar.tsx

@@ -18,13 +18,13 @@
 import { Box } from "@mui/material";
 import { useState } from "react";
 
-import { MultiSelectDropdown } from "../../layout/ContentToolbar";
 
 import { ClearAllControl, CloseSearchControl } from "./data-views-bar-controls";
 import type { GridFilterPanelProps } from "./data-views-filter-panel";
 import { MoreFilters } from "./data-views-more-filters";
 import type { OverflowField, OverflowSplit } from "./data-views-overflow";
 import { CollapsedSearch, InlineKeyword } from "./data-views-search";
+import { PillControl } from "./data-views-category-pill";
 import { RangePill } from "./data-views-range-pill";
 import type { RangeValue } from "./data-views-types";
 
@@ -116,19 +116,14 @@ function InlineControl<T extends Record<string, unknown>>({
 }): React.JSX.Element | null {
   if (field.group === "pill" && field.pill) {
     return (
-      <MultiSelectDropdown
-        label={field.pill.label}
-        options={field.pill.options}
-        selected={new Set(pills[field.id] ?? [])}
-        onToggle={(value, checked) => onTogglePill(field.id, value, checked)}
-        onClear={() => onClearField(field.id)}
-        allLabel="Todas"
-        searchable={field.pill.searchEnabled ? true : undefined}
-        searchPlaceholder="Buscar…"
-        noResultsLabel="Nenhum resultado"
-        layout="pill"
+      <PillControl
+        fieldId={field.id}
+        pill={field.pill}
+        selected={pills[field.id] ?? []}
+        onTogglePill={onTogglePill}
+        onClearField={onClearField}
         onOpenChange={onOpenChange}
-        data-testid={`${testIdPrefix}-filter-${field.id}`}
+        testIdPrefix={testIdPrefix}
       />
     );
   }

package/src/components/data-display/DataViews/data-views-types.ts

@@ -87,6 +87,11 @@ export const CARD_ASPECT_RATIOS: Record<CardAspectRatio, number> = {
 export interface FilterOption {
   value: string;
   label: string;
+  /**
+   * Parent option's `value`, for a hierarchical field (`control: "category"`).
+   * Ignored by the flat controls, so one option list serves both.
+   */
+  parentId?: string | null;
 }
 
 /** A typed, multi-select filter pill's configuration for a table. */
@@ -98,9 +103,12 @@ export interface FilterFieldConfig<T extends Record<string, unknown>> {
   /**
    * How the field renders in the filter panel. `checkboxes` (default) is best for
    * a few fixed options; `multiselect` is a compact dropdown for long option
-   * lists (e.g. many categories).
+   * lists; `category` is the hierarchical picker, for an option set that nests
+   * via {@link FilterOption.parentId} — it renders parents as headings and
+   * their children as the selectable rows, rather than flattening the tree into
+   * one indistinguishable list.
    */
-  control?: "checkboxes" | "multiselect";
+  control?: "checkboxes" | "multiselect" | "category";
   /**
    * Forces this filter to render as a searchable multi-select dropdown with the
    * search box always shown, regardless of how many options are currently

package/src/components/form/Button/Button.styles.ts

@@ -1,4 +1,4 @@
-import { alpha, keyframes } from '@mui/material';
+import { alpha, darken, keyframes, lighten } from '@mui/material';
 import type { CSSObject, Theme } from '@mui/material';
 
 // Define pulse animation globally
@@ -146,6 +146,25 @@ const gradientFor = (theme: Theme, color: string, palette: ColorPalette): string
   return `linear-gradient(135deg, ${from} 0%, ${to} 100%)`;
 };
 
+/**
+ * The label colour for the two variants that paint no background of their own.
+ *
+ * `ghost` and `text` used `palette.main` directly, which is the same mistake
+ * the Alert made with its body text: a palette's `main` is chosen to sit UNDER
+ * white — it is the fill of a solid button — and it is not chosen to be read AS
+ * text. `#6366F1`, the default primary, is 3.6:1 on white and worse on any
+ * tinted surface, so a "Cancelar" or an "Agora não" placed on a coloured panel
+ * turned into a smudge. That is precisely where these two variants belong: they
+ * exist to be the quiet option NEXT to a solid one, so they are the buttons
+ * most likely to be sitting on something other than plain paper.
+ *
+ * One step darker (lighter, on a dark theme) keeps the hue the caller asked for
+ * and buys the contrast back. `main` still drives the hover wash and every
+ * bordered variant, so nothing that was already legible moves.
+ */
+const quietInk = (theme: Theme, palette: ColorPalette): string =>
+  theme.palette.mode === 'dark' ? lighten(palette.main, 0.35) : darken(palette.main, 0.3);
+
 const VARIANT_STYLES: Record<
   string,
   (theme: Theme, palette: ColorPalette, color: string) => CSSObject
@@ -168,23 +187,23 @@ const VARIANT_STYLES: Record<
       borderColor: palette.dark,
     },
   }),
-  ghost: (_theme, palette) => ({
+  ghost: (theme, palette) => ({
     backgroundColor: 'transparent',
-    color: palette.main,
+    color: quietInk(theme, palette),
     '&:hover': {
       backgroundColor: alpha(palette.main, 0.1),
     },
   }),
-  text: (_theme, palette) => ({
+  text: (theme, palette) => ({
     backgroundColor: 'transparent',
-    color: palette.main,
+    color: quietInk(theme, palette),
     border: `none`,
     '&:hover': {
       backgroundColor: alpha(palette.main, 0.1),
     },
     '&.active': {
       backgroundColor: alpha(palette.main, 0.1),
-      color: palette.main,
+      color: quietInk(theme, palette),
     },
   }),
   glass: (theme, palette) => ({

package/src/components/form/CategorySelect/CategoryIcons.tsx

@@ -0,0 +1,52 @@
+/**
+ * The prototype's four glyphs, inlined.
+ *
+ * Inline SVG rather than `@mui/icons-material` because these are drawn at the
+ * design's own weights (2.4 for the chevrons, 3.2 for the tick) and sizes; the
+ * Material set is a 24px grid at a fixed weight and would not land on the same
+ * pixels.
+ */
+
+const STROKE = {
+  fill: 'none',
+  stroke: 'currentColor',
+  strokeLinecap: 'round',
+  strokeLinejoin: 'round',
+} as const;
+
+/** The tick inside a checked box. */
+export function CheckGlyph(): React.JSX.Element {
+  return (
+    <svg viewBox="0 0 24 24" strokeWidth={3.2} aria-hidden="true" {...STROKE}>
+      <path d="M20 6 9 17l-5-5" />
+    </svg>
+  );
+}
+
+/** The disclosure chevron on a category row (points right; rotates when open). */
+export function DisclosureGlyph(): React.JSX.Element {
+  return (
+    <svg viewBox="0 0 24 24" strokeWidth={2.4} aria-hidden="true" {...STROKE}>
+      <path d="m9 5 7 7-7 7" />
+    </svg>
+  );
+}
+
+/** The trigger's caret (points down; rotates when the panel is open). */
+export function CaretGlyph({ style }: { style?: React.CSSProperties }): React.JSX.Element {
+  return (
+    <svg viewBox="0 0 24 24" strokeWidth={2.4} style={style} aria-hidden="true" {...STROKE}>
+      <path d="m6 9 6 6 6-6" />
+    </svg>
+  );
+}
+
+/** The magnifier in the panel's search field. */
+export function SearchGlyph({ style }: { style?: React.CSSProperties }): React.JSX.Element {
+  return (
+    <svg viewBox="0 0 24 24" strokeWidth={2} style={style} aria-hidden="true" {...STROKE}>
+      <circle cx="11" cy="11" r="7" />
+      <path d="m20 20-3.5-3.5" />
+    </svg>
+  );
+}