Tree Row Pinning

1
import "@1771technologies/lytenyte-pro/light-dark.css";
2
import { Grid, useTreeDataSource } from "@1771technologies/lytenyte-pro";
3
import { data } from "./tree.js";
4
import { AvatarCell, GroupCell, ModifiedCell, SizeCell } from "./components.jsx";
5

6
export interface GridSpec {
7
  readonly data: {
8
    kind: string;
9
    name: string;
10
    size: number;
11
    modified: string;
12
    lastEditedBy: string;
13
    permissions: string;
14
  };
15
}
16

17
const group: Grid.RowGroupColumn<GridSpec> = {
18
  width: 240,
19
  cellRenderer: GroupCell,
20
  pin: "start",
21
};
22

23
const columns: Grid.Column<GridSpec>[] = [
24
  { id: "size", type: "number", name: "Size", cellRenderer: SizeCell },
25
  { id: "modified", name: "Modified", cellRenderer: ModifiedCell, width: 130 },
26
  { id: "lastEditedBy", name: "Last Edited By", cellRenderer: AvatarCell },
27
  { id: "permissions", name: "Permissions" },
28
];
29

30
const base: Grid.ColumnBase<GridSpec> = { widthFlex: 1, width: 120 };
31

32
export default function TreeDataDemo() {
33
  const ds = useTreeDataSource({
34
    data: data,
35
    rowGroupDefaultExpansion: true,
36

37
    topData: [
38
      {
39
        name: ".gitignore",
40
        kind: "file",
41
        size: 180,
42
        modified: "2026-01-19T09:00:00Z",
43
        lastEditedBy: "Betty Hall",
44
        permissions: "rw-r--r--",
45
      },
46
      {
47
        name: ".env",
48
        kind: "file",
49
        size: 220,
50
        modified: "2026-01-21T08:30:00Z",
51
        lastEditedBy: "Nancy Lewis",
52
        permissions: "rw-------",
53
      },
54
    ].map(
55
      (x) => ({ kind: "leaf", id: x.name, data: x, depth: 0 }) satisfies Grid.T.RowLeaf<GridSpec["data"]>,
56
    ),
57
  });
58

59
  return (
60
    <div className="ln-grid" style={{ height: 500 }}>
61
      <Grid rowSource={ds} rowGroupColumn={group} columnBase={base} columns={columns} />
62
    </div>
63
  );
64
}

1
import "@1771technologies/lytenyte-pro/components.css";
2
import type { Grid } from "@1771technologies/lytenyte-pro";
3
import type { GridSpec } from "./demo.jsx";
4
import {
5
  ComponentsFolderClose,
6
  ComponentsFolderOpen,
7
  ConfigFolderClosed,
8
  ConfigFolderOpen,
9
  CSSIcon,
10
  DocumentIcon,
11
  DotFile,
12
  FolderBaseOpen,
13
  FolderIcon,
14
  GitIcon,
15
  HooksFolderClosedIcon,
16
  HooksFolderOpenIcon,
17
  HtmlIcon,
18
  IcoIcon,
19
  ImageIcon,
20
  JSIcon,
21
  JSONIcon,
22
  JSXIcon,
23
  MarkdownIcon,
24
  PublicFolderClosed,
25
  PublicFolderOpen,
26
  SrcFolderClosed,
27
  SrcFolderOpen,
28
  SvgIcon,
29
  TestsFolderClosed,
30
  TestsFolderOpen,
31
  TestsIcon,
32
  UtilsFolderClosedIcon,
33
  UtilsFolderOpenIcon,
34
} from "./icons.jsx";
35
import { useMemo } from "react";
36
import { format } from "date-fns";
37
import { customerToAvatar } from "@1771technologies/grid-sample-data/orders";
38

39
export function GroupCell({ api, row }: Grid.T.CellRendererParams<GridSpec>) {
40
  const expanded = api.rowIsGroup(row) && row.expandable && row.expanded;
41
  const expandable = api.rowIsGroup(row) && row.expandable;
42
  const name = api.rowIsGroup(row) ? (row.key ?? "") : ((row.data.name as string) ?? "");
43

44
  const Icon = useMemo(() => {
45
    if (name.includes(".test")) return TestsIcon;
46
    if (name.includes(".git")) return GitIcon;
47
    if (name.includes(".env")) return DotFile;
48

49
    if (name === "public") return expanded ? PublicFolderOpen : PublicFolderClosed;
50

51
    if (name === "src") return expanded ? SrcFolderOpen : SrcFolderClosed;
52
    if (name === "utils") return expanded ? UtilsFolderOpenIcon : UtilsFolderClosedIcon;
53
    if (name === "components") return expanded ? ComponentsFolderOpen : ComponentsFolderClose;
54
    if (name === "tests") return expanded ? TestsFolderOpen : TestsFolderClosed;
55
    if (name === "hooks") return expanded ? HooksFolderOpenIcon : HooksFolderClosedIcon;
56
    if (name === "config") return expanded ? ConfigFolderOpen : ConfigFolderClosed;
57

58
    if (name.endsWith(".jsx")) return JSXIcon;
59
    if (name.endsWith(".js")) return JSIcon;
60
    if (name.endsWith(".png") || name.endsWith(".jpg") || name.endsWith(".jpeg")) return ImageIcon;
61
    if (name.endsWith(".json")) return JSONIcon;
62
    if (name.endsWith(".md") || name.endsWith(".mdx")) return MarkdownIcon;
63
    if (name.endsWith(".html")) return HtmlIcon;
64
    if (name.endsWith(".ico")) return IcoIcon;
65
    if (name.endsWith(".svg")) return SvgIcon;
66
    if (name.endsWith(".css")) return CSSIcon;
67

68
    if (name.includes(".") || !expandable) return DocumentIcon;
69
    return expanded ? FolderBaseOpen : FolderIcon;
70
  }, [expandable, expanded, name]);
71

72
  return (
73
    <div
74
      className="relative flex h-full w-full items-center text-sm"
75
      style={{ paddingInlineStart: row.depth * 22 }}
76
    >
77
      {row.depth > 0 &&
78
        Array.from({ length: row.depth }, (_, i) => {
79
          return (
80
            <div
81
              key={i}
82
              className="border-ln-gray-30 absolute h-full border-s border-dashed"
83
              style={{ left: i === 0 ? 16 : i * 16 + 16 + i * 6 }}
84
            />
85
          );
86
        })}
87
      {expandable && (
88
        <button
89
          onClick={() => api.rowGroupToggle(row.id)}
90
          data-ln-button="secondary"
91
          data-ln-size="md"
92
          data-ln-icon
93
        >
94
          <Icon className="size-4" />
95
        </button>
96
      )}
97
      {!expandable && (
98
        <div className="flex size-8 items-center justify-center">
99
          <Icon className="size-4" />
100
        </div>
101
      )}
102
      <div>{name}</div>
103
    </div>
104
  );
105
}
106

107
const number = new Intl.NumberFormat("en-US", { maximumFractionDigits: 0, minimumFractionDigits: 0 });
108

109
export function SizeCell({ api, column, row }: Grid.T.CellRendererParams<GridSpec>) {
110
  const field = api.columnField(column, row);
111

112
  if (typeof field !== "number") return "-";
113

114
  return (
115
    <div className="flex items-baseline gap-1 tabular-nums">
116
      {number.format(field)}
117
      <span className="text-ln-text-xlight text-xs font-semibold">kb</span>
118
    </div>
119
  );
120
}
121

122
export function ModifiedCell({ api, column, row }: Grid.T.CellRendererParams<GridSpec>) {
123
  const field = api.columnField(column, row);
124

125
  if (typeof field !== "string") return "-";
126

127
  return <div className="text-sm tabular-nums">{format(field, "yyyy MMM dd | hh:mm")}</div>;
128
}
129

130
export function AvatarCell({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
131
  const name = api.columnField(column, row);
132

133
  if (typeof name !== "string") return;
134
  const url = customerToAvatar[name];
135

136
  return (
137
    <div className="flex h-full w-full items-center gap-2">
138
      <img className="border-ln-border-strong h-7 w-7 rounded-full border" src={url} alt={name} />
139
      <div className="text-ln-text-dark flex flex-col gap-0.5">
140
        <div>{name}</div>
141
      </div>
142
    </div>
143
  );
144
}

1
import React from "react";
2
import type { SVGProps } from "react";
3

4
export function ImageIcon(props: SVGProps<SVGSVGElement>) {
5
  return (
6
    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" {...props}>
7
      <path
8
        fill="#26a69a"
9
        d="M8.5 6h4l-4-4zM3.875 1H9.5l4 4v8.6c0 .773-.616 1.4-1.375 1.4h-8.25c-.76 0-1.375-.627-1.375-1.4V2.4c0-.777.612-1.4 1.375-1.4M4 13.6h8V8l-2.625 2.8L8 9.4zm1.25-7.7c-.76 0-1.375.627-1.375 1.4s.616 1.4 1.375 1.4c.76 0 1.375-.627 1.375-1.4S6.009 5.9 5.25 5.9"
10
      ></path>
11
    </svg>
12
  );
13
}
14

15
export function FolderIcon(props: SVGProps<SVGSVGElement>) {
16
  return (
17
    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 32 32" {...props}>
18
      <path
19
        fill="#8d6e63"
20
        d="m13.844 7.536l-1.288-1.072A2 2 0 0 0 11.276 6H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h24a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2H15.124a2 2 0 0 1-1.28-.464"
21
      ></path>
22
      <rect width={18} height={6} x={14} y={22} fill="#d7ccc8" rx={1}></rect>
23
    </svg>
24
  );
25
}
26

27
export function FolderBaseOpen(props: SVGProps<SVGSVGElement>) {
28
  return (
29
    <svg xmlns="http://www.w3.org/2000/svg" width={32} height={32} viewBox="0 0 32 32" {...props}>
30
      <path
31
        fill="#8d6e63"
32
        d="M28.967 12H9.442a2 2 0 0 0-1.898 1.368L4 24V10h24a2 2 0 0 0-2-2H15.124a2 2 0 0 1-1.28-.464l-1.288-1.072A2 2 0 0 0 11.276 6H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h22l4.805-11.212A2 2 0 0 0 28.967 12"
33
      ></path>
34
      <rect width={18} height={6} x={14} y={22} fill="#d7ccc8" rx={1}></rect>
35
    </svg>
36
  );
37
}
38

39
export function DocumentIcon(props: SVGProps<SVGSVGElement>) {
40
  return (
41
    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 24 24" {...props}>
42
      <g fill="none">
43
        <path d="M0 0h24v24H0z"></path>
44
        <path
45
          fill="#42a5f5"
46
          d="M8 16h8v2H8zm0-4h8v2H8zm6-10H6c-1.1 0-2 .9-2 2v16c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8zm4 18H6V4h7v5h5z"
47
        ></path>
48
      </g>
49
    </svg>
50
  );
51
}
52

53
export function JSONIcon(props: SVGProps<SVGSVGElement>) {
54
  return (
55
    <svg xmlns="http://www.w3.org/2000/svg" width={960} height={960} viewBox="0 -960 960 960" {...props}>
56
      <path
57
        fill="#f9a825"
58
        d="M560-160v-80h120q17 0 28.5-11.5T720-280v-80q0-38 22-69t58-44v-14q-36-13-58-44t-22-69v-80q0-17-11.5-28.5T680-720H560v-80h120q50 0 85 35t35 85v80q0 17 11.5 28.5T840-560h40v160h-40q-17 0-28.5 11.5T800-360v80q0 50-35 85t-85 35zm-280 0q-50 0-85-35t-35-85v-80q0-17-11.5-28.5T120-400H80v-160h40q17 0 28.5-11.5T160-600v-80q0-50 35-85t85-35h120v80H280q-17 0-28.5 11.5T240-680v80q0 38-22 69t-58 44v14q36 13 58 44t22 69v80q0 17 11.5 28.5T280-240h120v80z"
59
      ></path>
60
    </svg>
61
  );
62
}
63

64
export function MarkdownIcon(props: SVGProps<SVGSVGElement>) {
65
  return (
66
    <svg xmlns="http://www.w3.org/2000/svg" width={32} height={32} viewBox="0 0 32 32" {...props}>
67
      <path fill="#ffca28" d="m14 10l-4 3.5L6 10H4v12h4v-6l2 2l2-2v6h4V10zm12 6v-6h-4v6h-4l6 8l6-8z"></path>
68
    </svg>
69
  );
70
}
71

72
export function HtmlIcon(props: SVGProps<SVGSVGElement>) {
73
  return (
74
    <svg xmlns="http://www.w3.org/2000/svg" width={32} height={32} viewBox="0 0 32 32" {...props}>
75
      <path
76
        fill="#e65100"
77
        d="m4 4l2 22l10 2l10-2l2-22Zm19.72 7H11.28l.29 3h11.86l-.802 9.335L15.99 25l-6.635-1.646L8.93 19h3.02l.19 2l3.86.77l3.84-.77l.29-4H8.84L8 8h16Z"
78
      ></path>
79
    </svg>
80
  );
81
}
82

83
export function IcoIcon(props: SVGProps<SVGSVGElement>) {
84
  return (
85
    <svg xmlns="http://www.w3.org/2000/svg" width={32} height={32} viewBox="0 0 32 32" {...props}>
86
      <path fill="#ffd54f" d="m16 24l10 6l-4-10l8-8l-10-.032L16 2l-4 10H2l8 8l-4 10Z"></path>
87
    </svg>
88
  );
89
}
90

91
export function SvgIcon(props: SVGProps<SVGSVGElement>) {
92
  return (
93
    <svg xmlns="http://www.w3.org/2000/svg" width={32} height={32} viewBox="0 0 32 32" {...props}>
94
      <path
95
        fill="#ffb300"
96
        d="M29.168 14.03a2.7 2.7 0 0 0-1.968-.83a2.51 2.51 0 0 0-1.929.8h-4.443l3.078-3.078a2.835 2.835 0 0 0 2.857-2.842a2.6 2.6 0 0 0-.831-1.969a2.82 2.82 0 0 0-2.014-.788a2.67 2.67 0 0 0-1.968.788a2.36 2.36 0 0 0-.812 1.922L18 11.17V6.726a2.51 2.51 0 0 0 .8-1.929a2.7 2.7 0 0 0-.832-1.968a2.745 2.745 0 0 0-3.936 0a2.7 2.7 0 0 0-.832 1.968a2.51 2.51 0 0 0 .8 1.93v4.443l-3.138-3.138a2.36 2.36 0 0 0-.812-1.922a2.66 2.66 0 0 0-1.968-.788a2.83 2.83 0 0 0-2.014.788a2.6 2.6 0 0 0-.831 1.969a2.74 2.74 0 0 0 .831 2.013a2.8 2.8 0 0 0 2.026.829l3.078 3.078H6.729a2.51 2.51 0 0 0-1.929-.8a2.7 2.7 0 0 0-1.968.831a2.745 2.745 0 0 0 0 3.937a2.7 2.7 0 0 0 1.968.832a2.51 2.51 0 0 0 1.929-.8h4.443l-3.078 3.077a2.835 2.835 0 0 0-2.857 2.842a2.6 2.6 0 0 0 .831 1.969a2.82 2.82 0 0 0 2.014.788a2.67 2.67 0 0 0 1.968-.788a2.36 2.36 0 0 0 .812-1.922L14 20.827v4.444a2.51 2.51 0 0 0-.8 1.929a2.784 2.784 0 0 0 4.768 1.968A2.7 2.7 0 0 0 18.8 27.2a2.51 2.51 0 0 0-.8-1.929v-4.444l3.138 3.138a2.36 2.36 0 0 0 .812 1.922a2.66 2.66 0 0 0 1.968.788a2.83 2.83 0 0 0 2.014-.788a2.6 2.6 0 0 0 .831-1.969a2.74 2.74 0 0 0-.831-2.013a2.8 2.8 0 0 0-2.026-.829L20.828 18h4.443a2.51 2.51 0 0 0 1.93.8a2.784 2.784 0 0 0 1.967-4.769Z"
97
      ></path>
98
    </svg>
99
  );
100
}
101

102
export function PublicFolderClosed(props: SVGProps<SVGSVGElement>) {
103
  return (
104
    <svg xmlns="http://www.w3.org/2000/svg" width={32} height={32} viewBox="0 0 32 32" {...props}>
105
      <path
106
        fill="#039be5"
107
        d="m13.844 7.536l-1.288-1.072A2 2 0 0 0 11.276 6H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h24a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2H15.124a2 2 0 0 1-1.28-.464"
108
      ></path>
109
      <path
110
        fill="#b3e5fc"
111
        d="M22 10a10 10 0 1 0 10 10a10 10 0 0 0-10-10m6.918 6H25.96a15.8 15.8 0 0 0-1.342-3.54a8.04 8.04 0 0 1 4.3 3.54M22 12a14.1 14.1 0 0 1 1.89 4h-3.78A14.1 14.1 0 0 1 22 12m-2.618.46A15.8 15.8 0 0 0 18.04 16h-2.958a8.04 8.04 0 0 1 4.3-3.54M14.263 22a7.7 7.7 0 0 1 0-4h3.407a15.5 15.5 0 0 0 0 4Zm.82 2h2.957a15.8 15.8 0 0 0 1.342 3.54a8.04 8.04 0 0 1-4.3-3.54ZM22 28a14.1 14.1 0 0 1-1.89-4h3.78A14.1 14.1 0 0 1 22 28m2.31-6h-4.62a13.4 13.4 0 0 1 0-4h4.62a13.4 13.4 0 0 1 0 4m.308 5.54A15.8 15.8 0 0 0 25.96 24h2.958a8.04 8.04 0 0 1-4.3 3.54M29.737 22H26.33a15.5 15.5 0 0 0 0-4h3.407a7.7 7.7 0 0 1 0 4"
112
      ></path>
113
    </svg>
114
  );
115
}
116

117
export function PublicFolderOpen(props: SVGProps<SVGSVGElement>) {
118
  return (
119
    <svg xmlns="http://www.w3.org/2000/svg" width={32} height={32} viewBox="0 0 32 32" {...props}>
120
      <path
121
        fill="#039be5"
122
        d="M28.967 12H9.442a2 2 0 0 0-1.898 1.368L4 24V10h24a2 2 0 0 0-2-2H15.124a2 2 0 0 1-1.28-.464l-1.288-1.072A2 2 0 0 0 11.276 6H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h22l4.805-11.212A2 2 0 0 0 28.967 12"
123
      ></path>
124
      <path
125
        fill="#b3e5fc"
126
        d="M22 10a10 10 0 1 0 10 10a10 10 0 0 0-10-10m6.918 6H25.96a15.8 15.8 0 0 0-1.342-3.54a8.04 8.04 0 0 1 4.3 3.54M22 12a14.1 14.1 0 0 1 1.89 4h-3.78A14.1 14.1 0 0 1 22 12m-2.618.46A15.8 15.8 0 0 0 18.04 16h-2.958a8.04 8.04 0 0 1 4.3-3.54M14.263 22a7.7 7.7 0 0 1 0-4h3.407a15.5 15.5 0 0 0 0 4Zm.82 2h2.957a15.8 15.8 0 0 0 1.342 3.54a8.04 8.04 0 0 1-4.3-3.54ZM22 28a14.1 14.1 0 0 1-1.89-4h3.78A14.1 14.1 0 0 1 22 28m2.31-6h-4.62a13.4 13.4 0 0 1 0-4h4.62a13.4 13.4 0 0 1 0 4m.308 5.54A15.8 15.8 0 0 0 25.96 24h2.958a8.04 8.04 0 0 1-4.3 3.54M29.737 22H26.33a15.5 15.5 0 0 0 0-4h3.407a7.7 7.7 0 0 1 0 4"
127
      ></path>
128
    </svg>
129
  );
130
}
131

132
export function ComponentsFolderClose(props: SVGProps<SVGSVGElement>) {
133
  return (
134
    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" {...props}>
135
      <path
136
        fill="#00bcd4"
137
        d="m6.922 3.768l-.644-.536A1 1 0 0 0 5.638 3H2a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H7.562a1 1 0 0 1-.64-.232"
138
      ></path>
139
      <g fill="#b2ebf2">
140
        <path d="M10.5 8.399c2.924 0 4.714 1.037 4.714 1.6s-1.79 1.602-4.714 1.602S5.785 10.564 5.785 10s1.79-1.601 4.715-1.601m0-.8c-3.038 0-5.5 1.075-5.5 2.4s2.462 2.402 5.5 2.402S16 11.326 16 10s-2.463-2.401-5.5-2.401"></path>
141
        <path d="M10.5 9.2a.786.8 0 1 0 .785.8a.786.8 0 0 0-.785-.8"></path>
142
        <path d="M8.322 5.8c.793 0 2.333 1.272 3.538 3.4c1.463 2.58 1.476 4.677.997 4.959a.354.36 0 0 1-.18.04c-.792 0-2.333-1.271-3.538-3.399c-1.463-2.58-1.476-4.677-.997-4.96a.354.36 0 0 1 .18-.04m0-.8a1.128 1.149 0 0 0-.572.147c-1.128.663-.81 3.374.708 6.054C9.748 13.478 11.491 15 12.678 15a1.128 1.149 0 0 0 .572-.148c1.127-.663.81-3.373-.71-6.053C11.25 6.522 9.509 5 8.323 5Z"></path>
143
        <path d="M12.677 5.8a.354.36 0 0 1 .18.04c.48.283.466 2.38-.997 4.96c-1.206 2.128-2.746 3.4-3.538 3.4a.354.36 0 0 1-.18-.04c-.48-.284-.466-2.38.997-4.96c1.206-2.128 2.746-3.4 3.538-3.4m0-.8c-1.186 0-2.929 1.522-4.22 3.8c-1.517 2.68-1.835 5.39-.707 6.052a1.128 1.149 0 0 0 .572.148c1.186 0 2.929-1.523 4.22-3.8c1.517-2.68 1.835-5.39.708-6.052A1.128 1.149 0 0 0 12.677 5"></path>
144
      </g>
145
    </svg>
146
  );
147
}
148

149
export function ComponentsFolderOpen(props: SVGProps<SVGSVGElement>) {
150
  return (
151
    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" {...props}>
152
      <path
153
        fill="#00bcd4"
154
        d="M14.484 6H4.72a1 1 0 0 0-.949.684L2 12V5h13a1 1 0 0 0-1-1H7.562a1 1 0 0 1-.64-.232l-.644-.536A1 1 0 0 0 5.638 3H2a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h11l2.403-5.606A1 1 0 0 0 14.483 6"
155
      ></path>
156
      <g fill="#b2ebf2">
157
        <path d="M10.5 8.399c2.924 0 4.714 1.037 4.714 1.6s-1.79 1.602-4.714 1.602S5.785 10.564 5.785 10s1.79-1.601 4.715-1.601m0-.8c-3.038 0-5.5 1.075-5.5 2.4s2.462 2.402 5.5 2.402S16 11.326 16 10s-2.463-2.401-5.5-2.401"></path>
158
        <path d="M10.5 9.2a.786.8 0 1 0 .785.8a.786.8 0 0 0-.785-.8"></path>
159
        <path d="M8.322 5.8c.793 0 2.333 1.272 3.538 3.4c1.463 2.58 1.476 4.677.997 4.959a.354.36 0 0 1-.18.04c-.792 0-2.333-1.271-3.538-3.399c-1.463-2.58-1.476-4.677-.997-4.96a.354.36 0 0 1 .18-.04m0-.8a1.128 1.149 0 0 0-.572.147c-1.128.663-.81 3.374.708 6.054C9.748 13.478 11.491 15 12.678 15a1.128 1.149 0 0 0 .572-.148c1.127-.663.81-3.373-.71-6.053C11.25 6.522 9.509 5 8.323 5Z"></path>
160
        <path d="M12.677 5.8a.354.36 0 0 1 .18.04c.48.283.466 2.38-.997 4.96c-1.206 2.128-2.746 3.4-3.538 3.4a.354.36 0 0 1-.18-.04c-.48-.284-.466-2.38.997-4.96c1.206-2.128 2.746-3.4 3.538-3.4m0-.8c-1.186 0-2.929 1.522-4.22 3.8c-1.517 2.68-1.835 5.39-.707 6.052a1.128 1.149 0 0 0 .572.148c1.186 0 2.929-1.523 4.22-3.8c1.517-2.68 1.835-5.39.708-6.052A1.128 1.149 0 0 0 12.677 5"></path>
161
      </g>
162
    </svg>
163
  );
164
}
165

166
export function CSSIcon(props: SVGProps<SVGSVGElement>) {
167
  return (
168
    <svg xmlns="http://www.w3.org/2000/svg" width={32} height={32} viewBox="0 0 32 32" {...props}>
169
      <path
170
        fill="#7e57c2"
171
        d="M20 18h-2v-2h-2v2c0 .193 0 .703 1.254 1.033A3.345 3.345 0 0 1 20 22h2v2h2v-2c0-.388-.562-.851-1.254-1.034C20.356 20.34 20 18.84 20 18m-3.254 2.966C14.356 20.34 14 18.84 14 18h-2v-2h-2v8h2v-2h4v2h2v-2c0-.388-.562-.851-1.254-1.034"
172
      ></path>
173
      <path
174
        fill="#7e57c2"
175
        d="M24 4H4v20a4 4 0 0 0 4 4h16.16A3.84 3.84 0 0 0 28 24.16V8a4 4 0 0 0-4-4m2 14h-2v-2h-2v2c0 .193 0 .703 1.254 1.033A3.345 3.345 0 0 1 26 22v2a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2Z"
176
      ></path>
177
    </svg>
178
  );
179
}
180

181
export function SrcFolderClosed(props: SVGProps<SVGSVGElement>) {
182
  return (
183
    <svg xmlns="http://www.w3.org/2000/svg" width={32} height={32} viewBox="0 0 32 32" {...props}>
184
      <path
185
        fill="#4caf50"
186
        d="m13.844 7.536l-1.288-1.072A2 2 0 0 0 11.276 6H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h24a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2H15.124a2 2 0 0 1-1.28-.464"
187
      ></path>
188
      <path
189
        fill="#c8e6c9"
190
        d="M18.435 30a1 1 0 0 1-.238-.028a1.137 1.137 0 0 1-.828-1.323l3.093-15.744a1.13 1.13 0 0 1 .507-.744a1.06 1.06 0 0 1 .8-.134a1.14 1.14 0 0 1 .828 1.324l-3.1 15.744a1.12 1.12 0 0 1-.505.743a1.06 1.06 0 0 1-.557.162m6.2-2h-.077a1.08 1.08 0 0 1-.762-.412a1.164 1.164 0 0 1 .113-1.548l5.32-4.967l-5.297-4.623a1.165 1.165 0 0 1-.162-1.544a1.08 1.08 0 0 1 .754-.437a1.06 1.06 0 0 1 .81.258l6.244 5.455a1.156 1.156 0 0 1 .004 1.723l-6.22 5.808a1.07 1.07 0 0 1-.728.289Zm-9.31 0a1.07 1.07 0 0 1-.728-.292l-6.225-5.811a1.16 1.16 0 0 1-.01-1.692l.02-.018l6.246-5.454a1.03 1.03 0 0 1 .8-.26a1.08 1.08 0 0 1 .758.436a1.165 1.165 0 0 1-.16 1.547l-5.293 4.62l5.32 4.964a1.156 1.156 0 0 1 .112 1.548a1.07 1.07 0 0 1-.762.412Z"
191
      ></path>
192
    </svg>
193
  );
194
}
195

196
export function SrcFolderOpen(props: SVGProps<SVGSVGElement>) {
197
  return (
198
    <svg xmlns="http://www.w3.org/2000/svg" width={32} height={32} viewBox="0 0 32 32" {...props}>
199
      <path
200
        fill="#4caf50"
201
        d="M28.967 12H9.442a2 2 0 0 0-1.898 1.368L4 24V10h24a2 2 0 0 0-2-2H15.124a2 2 0 0 1-1.28-.464l-1.288-1.072A2 2 0 0 0 11.276 6H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h22l4.805-11.212A2 2 0 0 0 28.967 12"
202
      ></path>
203
      <path
204
        fill="#c8e6c9"
205
        d="M18.473 30a1 1 0 0 1-.238-.028a1.137 1.137 0 0 1-.828-1.323L20.5 12.905a1.13 1.13 0 0 1 .507-.744a1.06 1.06 0 0 1 .8-.134a1.14 1.14 0 0 1 .828 1.324l-3.101 15.744a1.12 1.12 0 0 1-.504.743a1.06 1.06 0 0 1-.557.162m6.2-2h-.077a1.08 1.08 0 0 1-.762-.412a1.164 1.164 0 0 1 .113-1.548l5.319-4.967l-5.296-4.623a1.165 1.165 0 0 1-.162-1.544a1.08 1.08 0 0 1 .754-.437a1.06 1.06 0 0 1 .81.258l6.244 5.455a1.156 1.156 0 0 1 .003 1.723l-6.218 5.808a1.07 1.07 0 0 1-.729.289Zm-9.31 0a1.07 1.07 0 0 1-.728-.292l-6.226-5.811a1.16 1.16 0 0 1-.01-1.692l.02-.018l6.246-5.454a1.03 1.03 0 0 1 .8-.26a1.08 1.08 0 0 1 .76.436a1.165 1.165 0 0 1-.16 1.547l-5.294 4.62l5.32 4.964a1.156 1.156 0 0 1 .112 1.548a1.07 1.07 0 0 1-.762.412Z"
206
      ></path>
207
    </svg>
208
  );
209
}
210

211
export function JSXIcon(props: SVGProps<SVGSVGElement>) {
212
  return (
213
    <svg xmlns="http://www.w3.org/2000/svg" width={32} height={32} viewBox="0 0 32 32" {...props}>
214
      <path
215
        fill="#0288d1"
216
        d="M16 12c7.444 0 12 2.59 12 4s-4.556 4-12 4s-12-2.59-12-4s4.556-4 12-4m0-2c-7.732 0-14 2.686-14 6s6.268 6 14 6s14-2.686 14-6s-6.268-6-14-6"
217
      ></path>
218
      <path fill="#0288d1" d="M16 14a2 2 0 1 0 2 2a2 2 0 0 0-2-2"></path>
219
      <path
220
        fill="#0288d1"
221
        d="M10.458 5.507c2.017 0 5.937 3.177 9.006 8.493c3.722 6.447 3.757 11.687 2.536 12.392a.9.9 0 0 1-.457.1c-2.017 0-5.938-3.176-9.007-8.492C8.814 11.553 8.779 6.313 10 5.608a.9.9 0 0 1 .458-.1m-.001-2A2.87 2.87 0 0 0 9 3.875C6.13 5.532 6.938 12.304 10.804 19c3.284 5.69 7.72 9.493 10.74 9.493A2.87 2.87 0 0 0 23 28.124c2.87-1.656 2.062-8.428-1.804-15.124c-3.284-5.69-7.72-9.493-10.74-9.493Z"
222
      ></path>
223
      <path
224
        fill="#0288d1"
225
        d="M21.543 5.507a.9.9 0 0 1 .457.1c1.221.706 1.186 5.946-2.536 12.393c-3.07 5.316-6.99 8.493-9.007 8.493a.9.9 0 0 1-.457-.1C8.779 25.686 8.814 20.446 12.536 14c3.07-5.316 6.99-8.493 9.007-8.493m0-2c-3.02 0-7.455 3.804-10.74 9.493C6.939 19.696 6.13 26.468 9 28.124a2.87 2.87 0 0 0 1.457.369c3.02 0 7.455-3.804 10.74-9.493C25.061 12.304 25.87 5.532 23 3.876a2.87 2.87 0 0 0-1.457-.369"
226
      ></path>
227
    </svg>
228
  );
229
}
230

231
export function JSIcon(props: SVGProps<SVGSVGElement>) {
232
  return (
233
    <svg xmlns="http://www.w3.org/2000/svg" width={32} height={32} viewBox="0 0 32 32" {...props}>
234
      <path
235
        fill="#8bc34a"
236
        d="M16 20.003v2h4a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2h-2v-2h4v-2h-4a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h2v2Z"
237
      ></path>
238
      <path
239
        fill="#8bc34a"
240
        d="m16 3.003l-12 7v14l4 2h6v-13.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v11.5H8l-2-1.034V11.15l10-5.833l10 5.833v11.703l-10 5.833l-1.745-1.022L13 29.253l3 1.75l12-7v-14Z"
241
      ></path>
242
    </svg>
243
  );
244
}
245

246
export function TestsFolderClosed(props: SVGProps<SVGSVGElement>) {
247
  return (
248
    <svg xmlns="http://www.w3.org/2000/svg" width={32} height={32} viewBox="0 0 32 32" {...props}>
249
      <path
250
        fill="#00bfa5"
251
        d="m13.844 7.536l-1.288-1.072A2 2 0 0 0 11.276 6H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h24a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2H15.124a2 2 0 0 1-1.28-.464"
252
      ></path>
253
      <path
254
        fill="#a7ffeb"
255
        d="M16 12v2h2v12a4 4 0 0 0 8 0V14h2v-2Zm5 14a1 1 0 1 1 1-1a1 1 0 0 1-1 1m2-4a1 1 0 1 1 1-1a1 1 0 0 1-1 1m1-4h-4v-4h4Z"
256
      ></path>
257
    </svg>
258
  );
259
}
260

261
export function TestsFolderOpen(props: SVGProps<SVGSVGElement>) {
262
  return (
263
    <svg xmlns="http://www.w3.org/2000/svg" width={32} height={32} viewBox="0 0 32 32" {...props}>
264
      <path
265
        fill="#00bfa5"
266
        d="M28.967 12H9.442a2 2 0 0 0-1.898 1.368L4 24V10h24a2 2 0 0 0-2-2H15.124a2 2 0 0 1-1.28-.464l-1.288-1.072A2 2 0 0 0 11.276 6H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h22l4.805-11.212A2 2 0 0 0 28.967 12"
267
      ></path>
268
      <path
269
        fill="#a7ffeb"
270
        d="M16 12v2h2v12a4 4 0 0 0 8 0V14h2v-2Zm5 14a1 1 0 1 1 1-1a1 1 0 0 1-1 1m2-4a1 1 0 1 1 1-1a1 1 0 0 1-1 1m1-4h-4v-4h4Z"
271
      ></path>
272
    </svg>
273
  );
274
}
275

276
export function TestsIcon(props: SVGProps<SVGSVGElement>) {
277
  return (
278
    <svg xmlns="http://www.w3.org/2000/svg" width={32} height={32} viewBox="0 0 32 32" {...props}>
279
      <path
280
        fill="#0288d1"
281
        d="M20 4v2h-2v4.531l.264.461l7.473 13.078a2 2 0 0 1 .263.992V26a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2v-.938a2 2 0 0 1 .264-.992l7.473-13.078l.263-.46V6h-2V4zm0-2h-8a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2v2L4.527 23.078A4 4 0 0 0 4 25.062V26a4 4 0 0 0 4 4h16a4 4 0 0 0 4-4v-.938a4 4 0 0 0-.527-1.984L20 10V8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2"
282
      ></path>
283
      <circle cx={17} cy={17} r={1} fill="#0288d1"></circle>
284
      <path
285
        fill="#0288d1"
286
        d="M19.72 20.715a1 1 0 0 0-1.134-.318a5 5 0 0 1-1.18.262a3.95 3.95 0 0 1-1.862-.292a2.74 2.74 0 0 0-3.371.489a2 2 0 0 0-.237.35L10 24h12Z"
287
      ></path>
288
    </svg>
289
  );
290
}
291

292
export function ConfigFolderClosed(props: SVGProps<SVGSVGElement>) {
293
  return (
294
    <svg xmlns="http://www.w3.org/2000/svg" width={32} height={32} viewBox="0 0 32 32" {...props}>
295
      <path
296
        fill="#00acc1"
297
        d="m13.844 7.536l-1.288-1.072A2 2 0 0 0 11.276 6H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h24a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2H15.124a2 2 0 0 1-1.28-.464"
298
      ></path>
299
      <path
300
        fill="#80deea"
301
        d="M23.001 24.15A3.195 3.195 0 0 1 19.762 21a3.24 3.24 0 1 1 3.239 3.15m6.875-2.277a7 7 0 0 0 .064-.874a8 8 0 0 0-.064-.9l1.951-1.467a.446.446 0 0 0 .113-.576l-1.853-3.112a.46.46 0 0 0-.564-.199l-2.302.9a6.8 6.8 0 0 0-1.565-.882l-.342-2.385A.464.464 0 0 0 24.85 12h-3.7a.464.464 0 0 0-.463.378l-.341 2.385a6.8 6.8 0 0 0-1.563.881l-2.304-.899a.46.46 0 0 0-.564.198l-1.851 3.113a.436.436 0 0 0 .112.576l1.95 1.468a8 8 0 0 0-.064.9a7 7 0 0 0 .064.873l-1.95 1.493a.436.436 0 0 0-.112.576l1.85 3.115a.47.47 0 0 0 .565.198l2.304-.91a6.4 6.4 0 0 0 1.563.892l.342 2.385a.464.464 0 0 0 .463.378h3.7a.464.464 0 0 0 .464-.378l.34-2.385a6.8 6.8 0 0 0 1.566-.891l2.302.909a.475.475 0 0 0 .566-.198l1.85-3.115a.446.446 0 0 0-.112-.576Z"
302
      ></path>
303
    </svg>
304
  );
305
}
306

307
export function ConfigFolderOpen(props: SVGProps<SVGSVGElement>) {
308
  return (
309
    <svg xmlns="http://www.w3.org/2000/svg" width={32} height={32} viewBox="0 0 32 32" {...props}>
310
      <path
311
        fill="#00acc1"
312
        d="M28.967 12H9.442a2 2 0 0 0-1.898 1.368L4 24V10h24a2 2 0 0 0-2-2H15.124a2 2 0 0 1-1.28-.464l-1.288-1.072A2 2 0 0 0 11.276 6H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h22l4.805-11.212A2 2 0 0 0 28.967 12"
313
      ></path>
314
      <path
315
        fill="#80deea"
316
        d="M23.001 24.15A3.195 3.195 0 0 1 19.762 21a3.24 3.24 0 1 1 3.239 3.15m6.875-2.277a7 7 0 0 0 .064-.874a8 8 0 0 0-.064-.9l1.951-1.467a.446.446 0 0 0 .113-.576l-1.853-3.112a.46.46 0 0 0-.564-.199l-2.302.9a6.8 6.8 0 0 0-1.565-.882l-.342-2.385A.464.464 0 0 0 24.85 12h-3.7a.464.464 0 0 0-.463.378l-.341 2.385a6.8 6.8 0 0 0-1.563.881l-2.304-.899a.46.46 0 0 0-.564.198l-1.851 3.113a.436.436 0 0 0 .112.576l1.95 1.468a8 8 0 0 0-.064.9a7 7 0 0 0 .064.873l-1.95 1.493a.436.436 0 0 0-.112.576l1.85 3.115a.47.47 0 0 0 .565.198l2.304-.91a6.4 6.4 0 0 0 1.563.892l.342 2.385a.464.464 0 0 0 .463.378h3.7a.464.464 0 0 0 .464-.378l.34-2.385a6.8 6.8 0 0 0 1.566-.891l2.302.909a.475.475 0 0 0 .566-.198l1.85-3.115a.446.446 0 0 0-.112-.576Z"
317
      ></path>
318
    </svg>
319
  );
320
}
321

322
export function UtilsFolderClosedIcon(props: SVGProps<SVGSVGElement>) {
323
  return (
324
    <svg xmlns="http://www.w3.org/2000/svg" width={32} height={32} viewBox="0 0 32 32" {...props}>
325
      <path
326
        fill="#7cb342"
327
        d="m13.844 7.536l-1.288-1.072A2 2 0 0 0 11.276 6H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h24a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2H15.124a2 2 0 0 1-1.28-.464"
328
      ></path>
329
      <path
330
        fill="#dcedc8"
331
        d="M31 12H19a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V13a1 1 0 0 0-1-1m-1 8h-4v4h-2v-4h-4v-2h4v-4h2v4h4Z"
332
      ></path>
333
      <path fill="#dcedc8" d="M16 28V16h-2v13a1 1 0 0 0 1 1h13v-2Z"></path>
334
    </svg>
335
  );
336
}
337

338
export function UtilsFolderOpenIcon(props: SVGProps<SVGSVGElement>) {
339
  return (
340
    <svg xmlns="http://www.w3.org/2000/svg" width={32} height={32} viewBox="0 0 32 32" {...props}>
341
      <path
342
        fill="#7cb342"
343
        d="M28.967 12H9.442a2 2 0 0 0-1.898 1.368L4 24V10h24a2 2 0 0 0-2-2H15.124a2 2 0 0 1-1.28-.464l-1.288-1.072A2 2 0 0 0 11.276 6H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h22l4.805-11.212A2 2 0 0 0 28.967 12"
344
      ></path>
345
      <path
346
        fill="#dcedc8"
347
        d="M31 12H19a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V13a1 1 0 0 0-1-1m-1 8h-4v4h-2v-4h-4v-2h4v-4h2v4h4Z"
348
      ></path>
349
      <path fill="#dcedc8" d="M16 28V16h-2v13a1 1 0 0 0 1 1h13v-2Z"></path>
350
    </svg>
351
  );
352
}
353

354
export function HooksFolderClosedIcon(props: SVGProps<SVGSVGElement>) {
355
  return (
356
    <svg xmlns="http://www.w3.org/2000/svg" width={1024} height={1024} viewBox="0 0 1024 1024" {...props}>
357
      <path
358
        fill="#7e57c2"
359
        d="m443.008 241.152l-41.216-34.304A64 64 0 0 0 360.832 192H128a64 64 0 0 0-64 64v512a64 64 0 0 0 64 64h768a64 64 0 0 0 64-64V320a64 64 0 0 0-64-64H483.968a64 64 0 0 1-40.96-14.848"
360
      ></path>
361
      <path
362
        fill="#d1c4e9"
363
        d="M800 320c-53.02 0-96 42.98-96 96c.104 40.593 25.729 76.733 64 90.264V768c0 35.346-28.654 64-64 64s-64-28.654-64-64v-64h64L576 576v192c0 70.692 57.308 128 128 128s128-57.308 128-128V506.264c38.271-13.531 63.896-49.671 64-90.264c0-53.02-42.98-96-96-96m0 64c17.673 0 32 14.327 32 32s-14.327 32-32 32s-32-14.327-32-32s14.327-32 32-32"
364
      ></path>
365
    </svg>
366
  );
367
}
368

369
export function HooksFolderOpenIcon(props: SVGProps<SVGSVGElement>) {
370
  return (
371
    <svg xmlns="http://www.w3.org/2000/svg" width={1024} height={1024} viewBox="0 0 1024 1024" {...props}>
372
      <path
373
        fill="#7e57c2"
374
        d="M926.944 384h-624.8a64 64 0 0 0-60.736 43.776L128 768V320h768a64 64 0 0 0-64-64H483.968a64 64 0 0 1-40.96-14.848l-41.216-34.304A64 64 0 0 0 360.832 192H128a64 64 0 0 0-64 64v512a64 64 0 0 0 64 64h704l153.76-358.784A64 64 0 0 0 926.944 384"
375
      ></path>
376
      <path
377
        fill="#d1c4e9"
378
        d="M800 320c-53.02 0-96 42.98-96 96c.104 40.593 25.729 76.733 64 90.264V768c0 35.346-28.654 64-64 64s-64-28.654-64-64v-64h64L576 576v192c0 70.692 57.308 128 128 128s128-57.308 128-128V506.264c38.271-13.531 63.896-49.671 64-90.264c0-53.02-42.98-96-96-96m0 64c17.673 0 32 14.327 32 32s-14.327 32-32 32s-32-14.327-32-32s14.327-32 32-32"
379
      ></path>
380
    </svg>
381
  );
382
}
383

384
export function GitIcon(props: SVGProps<SVGSVGElement>) {
385
  return (
386
    <svg xmlns="http://www.w3.org/2000/svg" width={32} height={32} viewBox="0 0 32 32" {...props}>
387
      <path
388
        fill="#e64a19"
389
        d="M13.172 2.828L11.78 4.22l1.91 1.91l2 2A2.986 2.986 0 0 1 20 10.81a3.25 3.25 0 0 1-.31 1.31l2.06 2a2.68 2.68 0 0 1 3.37.57a2.86 2.86 0 0 1 .88 2.117a3.02 3.02 0 0 1-.856 2.109A2.9 2.9 0 0 1 23 19.81a2.93 2.93 0 0 1-2.13-.87a2.694 2.694 0 0 1-.56-3.38l-2-2.06a3 3 0 0 1-.31.12V20a3 3 0 0 1 1.44 1.09a2.92 2.92 0 0 1 .56 1.72a2.88 2.88 0 0 1-.878 2.128a2.98 2.98 0 0 1-2.048.871a2.981 2.981 0 0 1-2.514-4.719A3 3 0 0 1 16 20v-6.38a2.96 2.96 0 0 1-1.44-1.09a2.9 2.9 0 0 1-.56-1.72a2.9 2.9 0 0 1 .31-1.31l-3.9-3.9l-7.579 7.572a4 4 0 0 0-.001 5.658l10.342 10.342a4 4 0 0 0 5.656 0l10.344-10.344a4 4 0 0 0 0-5.656L18.828 2.828a4 4 0 0 0-5.656 0"
390
      ></path>
391
    </svg>
392
  );
393
}
394

395
export function DotFile(props: SVGProps<SVGSVGElement>) {
396
  return (
397
    <svg xmlns="http://www.w3.org/2000/svg" width={400} height={400} viewBox="0 0 400 400" {...props}>
398
      <g fill="#2196f3" fillOpacity={0.604} transform="translate(-6.66 100.49)">
399
        <ellipse
400
          cx={37.18}
401
          cy={-256.97}
402
          rx={110.14}
403
          ry={139.47}
404
          transform="matrix(-.3005 .95378 -.96071 -.27755 0 0)"
405
        ></ellipse>
406
        <ellipse
407
          cx={38.835}
408
          cy={-197.03}
409
          rx={110.14}
410
          ry={139.47}
411
          transform="matrix(-.3005 .95378 -.96071 -.27755 0 0)"
412
        ></ellipse>
413
        <ellipse
414
          cx={-224.78}
415
          cy={-5.066}
416
          rx={110.14}
417
          ry={139.47}
418
          transform="matrix(-.95378 -.3005 .27755 -.96071 0 0)"
419
        ></ellipse>
420
        <ellipse
421
          cx={-228.55}
422
          cy={-60.291}
423
          rx={110.14}
424
          ry={139.47}
425
          transform="matrix(-.95378 -.3005 .27755 -.96071 0 0)"
426
        ></ellipse>
427
      </g>
428
    </svg>
429
  );
430
}