crdx-components 1.0.0

package/src/lib/components/sidebar/sidebar.css

@@ -0,0 +1,234 @@
+:host {
+  display: block;
+  height: 100%;
+}
+
+.sidebar {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: calc(var(--navigation-rail-nav-rail-collapsed-nav-rail-collapsed-container-width, 96) * 1px);
+  min-width: calc(var(--navigation-rail-nav-rail-collapsed-nav-rail-collapsed-container-width, 96) * 1px);
+  height: 100%;
+  padding: calc(var(--navigation-rail-nav-rail-collapsed-nav-rail-collapsed-item-top-space, 44) * 1px) 0
+    calc(var(--navigation-rail-nav-rail-collapsed-nav-rail-collapsed-item-vertical-space, 4) * 1px);
+  box-sizing: border-box;
+  gap: calc(var(--navigation-rail-nav-rail-collapsed-nav-rail-collapsed-item-vertical-space, 4) * 1px);
+  background-color: var(--navigation-rail-nav-rail-collapsed-nav-rail-collapsed-container-color, #ebeef0);
+  border-radius: calc(var(--navigation-rail-nav-rail-collapsed-nav-rail-collapsed-container-shape, 0) * 1px);
+  color: var(--navigation-rail-nav-rail-item-vertical-nav-rail-item-vertical-text-color, #434749);
+  transition: width 280ms ease, min-width 280ms ease, padding 280ms ease;
+}
+
+.sidebar--show-labels {
+  align-items: stretch;
+  width: calc(var(--navigation-rail-nav-rail-expanded-nav-rail-expanded-container-width-minimum, 220) * 1px);
+  min-width: calc(var(--navigation-rail-nav-rail-expanded-nav-rail-expanded-container-width-minimum, 220) * 1px);
+}
+
+.sidebar__header,
+.sidebar__footer {
+  display: flex;
+  justify-content: center;
+  padding-inline: calc(var(--navigation-rail-nav-rail-item-vertical-nav-rail-item-vertical-leading-space, 16) * 1px);
+  width: 100%;
+}
+
+.sidebar__header {
+  min-height: calc(var(--navigation-rail-nav-rail-item-common-nav-rail-item-header-space-minimum, 40) * 1px);
+  align-items: center;
+}
+
+.sidebar__header:empty,
+.sidebar__footer:empty {
+  display: none;
+}
+
+.sidebar__nav {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding: 0 var(--padding-container-main, 16px) 0;
+}
+
+.sidebar__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: calc(var(--navigation-rail-nav-rail-item-common-nav-rail-item-container-vertical-space, 6) * 1px);
+}
+
+.sidebar--show-labels .sidebar__list {
+  align-items: stretch;
+}
+
+.sidebar__item {
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.sidebar--show-labels .sidebar__item {
+  justify-content: flex-start;
+}
+
+.sidebar__button {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  width: auto;
+  max-width: 100%;
+  height: calc(var(--navigation-rail-nav-rail-item-common-nav-rail-item-container-height, 64) * 1px);
+  margin: 0;
+  padding-inline: 0;
+  padding-block: 0;
+  border: 0;
+  background: none;
+  cursor: pointer;
+  color: var(--navigation-rail-nav-rail-item-common-nav-rail-item-icon-color, #181c1e);
+  text-decoration: none;
+  transition:
+    color 180ms ease,
+    height 320ms ease,
+    max-width 320ms ease,
+    padding 320ms ease;
+}
+
+.sidebar__button--expanded {
+  align-self: center;
+  width: auto;
+  max-width: 100%;
+  height: calc(var(--navigation-rail-nav-rail-item-common-nav-rail-item-container-height, 64) * 1px);
+  justify-content: flex-start;
+  padding-inline: 0;
+}
+
+.sidebar__button:focus-visible {
+  outline: 2px solid var(--navigation-rail-nav-rail-item-common-nav-rail-item-focus-indicator, #5b5f61);
+  outline-offset: 4px;
+}
+
+.sidebar__button:disabled {
+  cursor: default;
+  opacity: 0.48;
+}
+
+.sidebar__active {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: calc(var(--navigation-rail-nav-rail-item-common-nav-rail-item-active-indicator-icon-label-space, 8) * 1px);
+  height: calc(var(--navigation-rail-nav-rail-item-vertical-nav-rail-item-vertical-active-indicator-height, 32) * 1px);
+  padding-inline: calc(var(--navigation-rail-nav-rail-item-common-nav-rail-item-active-indicator-leading-space, 16) * 1px)
+    calc(var(--navigation-rail-nav-rail-item-common-nav-rail-item-active-indicator-trailing-space, 16) * 1px);
+  border-radius: calc(var(--navigation-rail-nav-rail-item-common-nav-rail-item-active-indicator-shape, 1000) * 1px);
+  background-color: transparent;
+  transition:
+    background-color 180ms ease,
+    color 180ms ease,
+    gap 320ms cubic-bezier(0.4, 0, 0.2, 1),
+    padding 320ms cubic-bezier(0.4, 0, 0.2, 1),
+    width 320ms cubic-bezier(0.4, 0, 0.2, 1),
+    max-width 320ms cubic-bezier(0.4, 0, 0.2, 1);
+  max-width: calc(var(--navigation-rail-nav-rail-expanded-nav-rail-expanded-container-width-minimum, 220) * 1px);
+  overflow: hidden;
+}
+
+.sidebar__button--expanded .sidebar__active,
+.sidebar__active--expanded {
+  width: auto;
+  max-width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: flex-start;
+  padding-inline: calc(var(--navigation-rail-nav-rail-item-horizontal-nav-rail-item-horizontal-full-width-leading-space, 16) * 1px);
+  gap: calc(var(--navigation-rail-nav-rail-item-horizontal-nav-rail-item-horizontal-icon-label-space, 8) * 1px);
+}
+
+.sidebar__button:not(:disabled):hover .sidebar__active {
+  background-color: rgba(24, 28, 30, 0.08);
+}
+
+.sidebar__button:not(:disabled):active .sidebar__active {
+  background-color: rgba(24, 28, 30, 0.12);
+}
+
+.sidebar__button--selected .sidebar__active {
+  background-color: var(--navigation-rail-nav-rail-item-common-nav-rail-item-container-selected-color, #e42313);
+  color: var(--navigation-rail-nav-rail-item-common-nav-rail-item-icon-selected-color, #ffffff);
+}
+
+.sidebar__button--selected:not(:disabled):hover .sidebar__active {
+  background-color: rgba(228, 35, 19, 0.88);
+}
+
+.sidebar__button--selected:not(:disabled):active .sidebar__active {
+  background-color: rgba(228, 35, 19, 0.76);
+}
+
+.sidebar__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: calc(var(--navigation-rail-nav-rail-item-common-nav-rail-item-icon-size, 24) * 1px);
+  height: calc(var(--navigation-rail-nav-rail-item-common-nav-rail-item-icon-size, 24) * 1px);
+  color: currentColor;
+}
+
+.sidebar__icon-svg,
+.sidebar__icon-img {
+  width: 100%;
+  height: 100%;
+}
+
+.sidebar__icon-svg {
+  fill: currentColor;
+}
+
+.sidebar__icon-img {
+  object-fit: contain;
+}
+
+.sidebar__label {
+  flex: 1 1 auto;
+  min-width: 0;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+  line-height: 1.2;
+  color: inherit;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  transition: opacity 200ms ease;
+}
+
+.sidebar__accessory {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  margin-left: auto;
+  color: inherit;
+}
+
+.sidebar__accessory-svg,
+.sidebar__accessory-img {
+  width: 100%;
+  height: 100%;
+  fill: currentColor;
+}
+
+.sidebar__footer {
+  margin-top: auto;
+  align-items: flex-end;
+  padding-bottom: calc(var(--navigation-rail-nav-rail-collapsed-nav-rail-collapsed-item-vertical-space, 4) * 1px);
+}

package/src/lib/components/sidebar/sidebar.html

@@ -0,0 +1,67 @@
+<aside class="sidebar" role="navigation" aria-label="Navegación principal" [class.sidebar--show-labels]="hasLabels()">
+  <div class="sidebar__header">
+    <ng-content select="[sidebar-header]"></ng-content>
+  </div>
+
+  <nav class="sidebar__nav" aria-label="Secciones">
+    <ul class="sidebar__list">
+      @for (item of items(); track trackById($index, item)) {
+        <li
+          class="sidebar__item"
+          [class.sidebar__item--selected]="isSelected(item)"
+          [class.sidebar__item--disabled]="item.disabled"
+        >
+          <button
+            type="button"
+            class="sidebar__button"
+            [class.sidebar__button--expanded]="hasLabels()"
+            [class.sidebar__button--selected]="isSelected(item)"
+            [attr.aria-label]="item.ariaLabel ?? item.label"
+            [attr.aria-current]="isSelected(item) ? 'page' : null"
+            [attr.title]="shouldShowLabel(item) ? null : (item.ariaLabel || item.label)"
+            [disabled]="item.disabled"
+            (click)="onSelect(item)"
+          >
+            <span class="sidebar__active" [class.sidebar__active--expanded]="hasLabels()">
+              @if (iconRef(item); as iconSrc) {
+                <span class="sidebar__icon" aria-hidden="true">
+                  <ng-container
+                    [ngTemplateOutlet]="renderIcon"
+                    [ngTemplateOutletContext]="{ $implicit: iconSrc, svgClass: 'sidebar__icon-svg', imgClass: 'sidebar__icon-img' }"
+                  ></ng-container>
+                </span>
+              }
+
+              @if (shouldShowLabel(item)) {
+                <span class="sidebar__label">{{ item.label }}</span>
+              }
+
+              @if (accessoryRef(item); as accessorySrc) {
+                <span class="sidebar__accessory" aria-hidden="true">
+                  <ng-container
+                    [ngTemplateOutlet]="renderIcon"
+                    [ngTemplateOutletContext]="{ $implicit: accessorySrc, svgClass: 'sidebar__accessory-svg', imgClass: 'sidebar__accessory-img' }"
+                  ></ng-container>
+                </span>
+              }
+            </span>
+          </button>
+        </li>
+      }
+    </ul>
+  </nav>
+
+  <div class="sidebar__footer">
+    <ng-content select="[sidebar-footer]"></ng-content>
+  </div>
+
+  <ng-template #renderIcon let-src let-svgClass="svgClass" let-imgClass="imgClass">
+    @if (isSprite(src)) {
+      <svg [attr.class]="svgClass">
+        <use [attr.href]="src"></use>
+      </svg>
+    } @else {
+      <img [attr.class]="imgClass" [src]="src" alt="" />
+    }
+  </ng-template>
+</aside>

package/src/lib/components/sidebar/sidebar.ts

@@ -0,0 +1,92 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Output, computed, input } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+
+export interface SidebarNavItem {
+  id: string;
+  label: string;
+  icon: string;
+  iconPath?: string;
+  accessoryIcon?: string;
+  accessoryIconPath?: string;
+  ariaLabel?: string;
+  disabled?: boolean;
+}
+
+@Component({
+  selector: 'lib-sidebar',
+  standalone: true,
+  imports: [NgTemplateOutlet],
+  templateUrl: './sidebar.html',
+  styleUrl: './sidebar.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SidebarComponent {
+  readonly items = input<readonly SidebarNavItem[]>([]);
+  readonly selectedId = input<string | null>(null);
+  readonly showLabels = input(true);
+  readonly spritePath = input('assets/icons/sprite.svg');
+
+  @Output() readonly itemSelected = new EventEmitter<SidebarNavItem>();
+
+  protected readonly hasLabels = computed(() => this.showLabels() && this.items().some(({ label }) => !!label));
+
+  protected onSelect(item: SidebarNavItem): void {
+    if (item.disabled) {
+      return;
+    }
+
+    this.itemSelected.emit(item);
+  }
+
+  protected isSelected(item: SidebarNavItem): boolean {
+    return item.id === this.selectedId();
+  }
+
+  protected trackById(_index: number, item: SidebarNavItem): string {
+    return item.id;
+  }
+
+  protected iconHref(icon: string): string {
+    return `${this.spritePath()}#${icon}`;
+  }
+
+  protected accessoryHref(accessoryIcon: string): string {
+    return `${this.spritePath()}#${accessoryIcon}`;
+  }
+
+  protected iconRef(item: SidebarNavItem): string | null {
+    if (item.iconPath) {
+      return item.iconPath;
+    }
+
+    if (item.icon) {
+      return this.iconHref(item.icon);
+    }
+
+    return null;
+  }
+
+  protected accessoryRef(item: SidebarNavItem): string | null {
+    if (item.accessoryIconPath) {
+      return item.accessoryIconPath;
+    }
+
+    if (item.accessoryIcon) {
+      return this.accessoryHref(item.accessoryIcon);
+    }
+
+    return null;
+  }
+
+  protected isSprite(ref: string | null | undefined): ref is string {
+    return !!ref && ref.includes('#');
+  }
+
+  protected shouldShowLabel(item: SidebarNavItem): boolean {
+    if (!item.label) {
+      return false;
+    }
+
+    return this.showLabels();
+  }
+}

package/src/lib/components/slide-toggle/slide-toggle.html

@@ -0,0 +1,3 @@
+<mat-slide-toggle [checked]="checked()" [hideIcon]="true" (change)="onChange($event)">
+	<ng-content></ng-content>
+</mat-slide-toggle>

package/src/lib/components/slide-toggle/slide-toggle.ts

@@ -0,0 +1,18 @@
+import { Component, input, output } from '@angular/core';
+import { MatSlideToggleModule, MatSlideToggleChange } from '@angular/material/slide-toggle';
+
+@Component({
+  selector: 'lib-slide-toggle, slide-toggle',
+  standalone: true, 
+  imports: [MatSlideToggleModule],
+  templateUrl: './slide-toggle.html',
+  styleUrl: './slide-toggle.css',
+})
+export class SlideToggle {
+  checked = input(false);
+  checkedChange = output<boolean>();
+
+  onChange(event: MatSlideToggleChange) {
+    this.checkedChange.emit(event.checked);
+  }
+}

package/src/lib/components/spinner/spinner.css

@@ -0,0 +1,9 @@
+:host {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+:host ::ng-deep .lib-spinner {
+  --mdc-circular-progress-active-indicator-color: var(--lib-spinner-color, var(--Rojo-400, #e30613));
+}

package/src/lib/components/spinner/spinner.html

@@ -0,0 +1,9 @@
+<mat-spinner
+  mode="indeterminate"
+  class="lib-spinner"
+  [attr.aria-label]="ariaLabel()"
+  [diameter]="diameter()"
+  [strokeWidth]="strokeWidth()"
+  [style.--lib-spinner-color]="color()"
+></mat-spinner>
+

package/src/lib/components/spinner/spinner.ts

@@ -0,0 +1,17 @@
+import { Component, input } from '@angular/core';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+
+@Component({
+  selector: 'lib-spinner, spinner',
+  standalone: true,
+  imports: [MatProgressSpinnerModule],
+  templateUrl: './spinner.html',
+  styleUrl: './spinner.css',
+})
+export class LibSpinnerComponent {
+  diameter = input<number>(48);
+  strokeWidth = input<number>(4);
+  color = input<string>('var(--Rojo-400, #e30613)');
+  ariaLabel = input<string>('Cargando');
+}
+

package/src/lib/components/tooltip/tooltip.css

@@ -0,0 +1,32 @@
+:host.ui-tooltip-host {
+  display: inline-flex;
+}
+
+.ui-tooltip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 24px;
+  padding: 4px 8px;
+  border-radius: calc(var(--tooltips-plain-enabled-container-plain-tooltip-container-shape, 4) * 1px);
+  background: var(--tooltips-plain-enabled-container-plain-tooltip-container-color, #2d3133);
+  box-sizing: border-box;
+}
+
+.ui-tooltip__text {
+  color: var(--tooltips-plain-enabled-supporting-text-plain-tooltip-supporting-text-color, #eef1f3);
+  font-family: var(--tooltips-plain-enabled-supporting-text-plain-tooltip-supporting-text-font, 'Heebo'), sans-serif;
+  font-size: var(--tooltips-plain-enabled-supporting-text-plain-tooltip-supporting-text-size, 12px);
+  font-style: normal;
+  font-weight: var(--tooltips-plain-enabled-supporting-text-plain-tooltip-supporting-text-weight, 400);
+  line-height: calc(var(--tooltips-plain-enabled-supporting-text-plain-tooltip-supporting-text-line-height, 16) * 1px);
+  letter-spacing: var(--tooltips-plain-enabled-supporting-text-plain-tooltip-supporting-text-tracking, 0.4px);
+}
+
+.ui-tooltip--single-line .ui-tooltip__text {
+  white-space: nowrap;
+}
+
+.ui-tooltip--multi-line .ui-tooltip__text {
+  white-space: normal;
+}

package/src/lib/components/tooltip/tooltip.html

@@ -0,0 +1,3 @@
+<div class="ui-tooltip" [ngClass]="classes()" [style.max-width]="maxWidth()">
+  <span class="ui-tooltip__text">{{ text() }}</span>
+</div>

package/src/lib/components/tooltip/tooltip.ts

@@ -0,0 +1,31 @@
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { NgClass } from '@angular/common';
+
+export type LibTooltipType = 'single-line' | 'multi-line';
+
+@Component({
+  selector: 'lib-tooltip',
+  standalone: true,
+  imports: [NgClass],
+  templateUrl: './tooltip.html',
+  styleUrl: './tooltip.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    '[class.ui-tooltip-host]': 'true',
+  },
+})
+export class LibTooltipComponent {
+  /** Texto del tooltip. */
+  text = input('Supporting text');
+
+  /** Variante del tooltip según Figma: single-line o multi-line. */
+  type = input<LibTooltipType>('single-line');
+
+  /** Ancho máximo opcional para controlar el wrap en multi-line (ej: "12.5rem", "200px"). */
+  maxWidth = input<string | null>(null);
+
+  readonly classes = computed(() => ({
+    'ui-tooltip--single-line': this.type() === 'single-line',
+    'ui-tooltip--multi-line': this.type() === 'multi-line',
+  }));
+}

package/src/lib/icons/configuration-countable.svg

@@ -0,0 +1,8 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_6882_6295" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="48" height="48">
+<rect width="48" height="48" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_6882_6295)">
+<path d="M12 44C10.3333 44 8.91667 43.4167 7.75 42.25C6.58333 41.0833 6 39.6667 6 38V32H12V4L15 7L18 4L21 7L24 4L27 7L30 4L33 7L36 4L39 7L42 4V38C42 39.6667 41.4167 41.0833 40.25 42.25C39.0833 43.4167 37.6667 44 36 44H12ZM36 40C36.5667 40 37.0417 39.8083 37.425 39.425C37.8083 39.0417 38 38.5667 38 38V10H16V32H34V38C34 38.5667 34.1917 39.0417 34.575 39.425C34.9583 39.8083 35.4333 40 36 40ZM18 18V14H30V18H18ZM18 24V20H30V24H18ZM34 18C33.4333 18 32.9583 17.8083 32.575 17.425C32.1917 17.0417 32 16.5667 32 16C32 15.4333 32.1917 14.9583 32.575 14.575C32.9583 14.1917 33.4333 14 34 14C34.5667 14 35.0417 14.1917 35.425 14.575C35.8083 14.9583 36 15.4333 36 16C36 16.5667 35.8083 17.0417 35.425 17.425C35.0417 17.8083 34.5667 18 34 18ZM34 24C33.4333 24 32.9583 23.8083 32.575 23.425C32.1917 23.0417 32 22.5667 32 22C32 21.4333 32.1917 20.9583 32.575 20.575C32.9583 20.1917 33.4333 20 34 20C34.5667 20 35.0417 20.1917 35.425 20.575C35.8083 20.9583 36 21.4333 36 22C36 22.5667 35.8083 23.0417 35.425 23.425C35.0417 23.8083 34.5667 24 34 24ZM12 40H30V36H10V38C10 38.5667 10.1917 39.0417 10.575 39.425C10.9583 39.8083 11.4333 40 12 40Z" fill="#3E3E3E"/>
+</g>
+</svg>

package/src/lib/icons/edit-table.svg

@@ -0,0 +1,3 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13 27H14.425L24.2 17.225L22.775 15.8L13 25.575V27ZM11 29V24.75L24.2 11.575C24.4 11.3917 24.6208 11.25 24.8625 11.15C25.1042 11.05 25.3583 11 25.625 11C25.8917 11 26.15 11.05 26.4 11.15C26.65 11.25 26.8667 11.4 27.05 11.6L28.425 13C28.625 13.1833 28.7708 13.4 28.8625 13.65C28.9542 13.9 29 14.15 29 14.4C29 14.6667 28.9542 14.9208 28.8625 15.1625C28.7708 15.4042 28.625 15.625 28.425 15.825L15.25 29H11ZM23.475 16.525L22.775 15.8L24.2 17.225L23.475 16.525Z" fill="#434749"/>
+</svg>

package/src/lib/icons/edit.svg

@@ -0,0 +1,3 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 32H6.85L26.4 12.45L23.55 9.6L4 29.15V32ZM0 36V27.5L26.4 1.15C26.8 0.783333 27.2417 0.5 27.725 0.3C28.2083 0.1 28.7167 0 29.25 0C29.7833 0 30.3 0.1 30.8 0.3C31.3 0.5 31.7333 0.8 32.1 1.2L34.85 4C35.25 4.36667 35.5417 4.8 35.725 5.3C35.9083 5.8 36 6.3 36 6.8C36 7.33333 35.9083 7.84167 35.725 8.325C35.5417 8.80833 35.25 9.25 34.85 9.65L8.5 36H0ZM24.95 11.05L23.55 9.6L26.4 12.45L24.95 11.05Z" fill="#3E3E3E"/>
+</svg>

package/src/lib/icons/error-circle.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_1307_40" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+<rect width="24" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_1307_40)">
+<path d="M8.4 17L12 13.4L15.6 17L17 15.6L13.4 12L17 8.4L15.6 7L12 10.6L8.4 7L7 8.4L10.6 12L7 15.6L8.4 17ZM12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22ZM12 20C14.2333 20 16.125 19.225 17.675 17.675C19.225 16.125 20 14.2333 20 12C20 9.76667 19.225 7.875 17.675 6.325C16.125 4.775 14.2333 4 12 4C9.76667 4 7.875 4.775 6.325 6.325C4.775 7.875 4 9.76667 4 12C4 14.2333 4.775 16.125 6.325 17.675C7.875 19.225 9.76667 20 12 20Z" fill="#434749"/>
+</g>
+</svg>

package/src/lib/icons/hub.svg

@@ -0,0 +1,3 @@
+<svg width="48" height="46" viewBox="0 0 48 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 46C10.3333 46 8.91667 45.4167 7.75 44.25C6.58333 43.0833 6 41.6667 6 40C6 38.3333 6.58333 36.9167 7.75 35.75C8.91667 34.5833 10.3333 34 12 34C12.4667 34 12.9 34.05 13.3 34.15C13.7 34.25 14.0833 34.3833 14.45 34.55L17.3 31C16.3667 29.9667 15.7167 28.8 15.35 27.5C14.9833 26.2 14.9 24.9 15.1 23.6L11.05 22.25C10.4833 23.0833 9.76667 23.75 8.9 24.25C8.03333 24.75 7.06667 25 6 25C4.33333 25 2.91667 24.4167 1.75 23.25C0.583333 22.0833 0 20.6667 0 19C0 17.3333 0.583333 15.9167 1.75 14.75C2.91667 13.5833 4.33333 13 6 13C7.66667 13 9.08333 13.5833 10.25 14.75C11.4167 15.9167 12 17.3333 12 19V19.4L16.05 20.8C16.7167 19.6 17.6083 18.5833 18.725 17.75C19.8417 16.9167 21.1 16.3833 22.5 16.15V11.8C21.2 11.4333 20.125 10.725 19.275 9.675C18.425 8.625 18 7.4 18 6C18 4.33333 18.5833 2.91667 19.75 1.75C20.9167 0.583333 22.3333 0 24 0C25.6667 0 27.0833 0.583333 28.25 1.75C29.4167 2.91667 30 4.33333 30 6C30 7.4 29.5667 8.625 28.7 9.675C27.8333 10.725 26.7667 11.4333 25.5 11.8V16.15C26.9 16.3833 28.1583 16.9167 29.275 17.75C30.3917 18.5833 31.2833 19.6 31.95 20.8L36 19.4V19C36 17.3333 36.5833 15.9167 37.75 14.75C38.9167 13.5833 40.3333 13 42 13C43.6667 13 45.0833 13.5833 46.25 14.75C47.4167 15.9167 48 17.3333 48 19C48 20.6667 47.4167 22.0833 46.25 23.25C45.0833 24.4167 43.6667 25 42 25C40.9333 25 39.9583 24.75 39.075 24.25C38.1917 23.75 37.4833 23.0833 36.95 22.25L32.9 23.6C33.1 24.9 33.0167 26.1917 32.65 27.475C32.2833 28.7583 31.6333 29.9333 30.7 31L33.55 34.5C33.9167 34.3333 34.3 34.2083 34.7 34.125C35.1 34.0417 35.5333 34 36 34C37.6667 34 39.0833 34.5833 40.25 35.75C41.4167 36.9167 42 38.3333 42 40C42 41.6667 41.4167 43.0833 40.25 44.25C39.0833 45.4167 37.6667 46 36 46C34.3333 46 32.9167 45.4167 31.75 44.25C30.5833 43.0833 30 41.6667 30 40C30 39.3333 30.1083 38.6917 30.325 38.075C30.5417 37.4583 30.8333 36.9 31.2 36.4L28.35 32.85C26.9833 33.6167 25.525 34 23.975 34C22.425 34 20.9667 33.6167 19.6 32.85L16.8 36.4C17.1667 36.9 17.4583 37.4583 17.675 38.075C17.8917 38.6917 18 39.3333 18 40C18 41.6667 17.4167 43.0833 16.25 44.25C15.0833 45.4167 13.6667 46 12 46ZM6 21C6.56667 21 7.04167 20.8083 7.425 20.425C7.80833 20.0417 8 19.5667 8 19C8 18.4333 7.80833 17.9583 7.425 17.575C7.04167 17.1917 6.56667 17 6 17C5.43333 17 4.95833 17.1917 4.575 17.575C4.19167 17.9583 4 18.4333 4 19C4 19.5667 4.19167 20.0417 4.575 20.425C4.95833 20.8083 5.43333 21 6 21ZM12 42C12.5667 42 13.0417 41.8083 13.425 41.425C13.8083 41.0417 14 40.5667 14 40C14 39.4333 13.8083 38.9583 13.425 38.575C13.0417 38.1917 12.5667 38 12 38C11.4333 38 10.9583 38.1917 10.575 38.575C10.1917 38.9583 10 39.4333 10 40C10 40.5667 10.1917 41.0417 10.575 41.425C10.9583 41.8083 11.4333 42 12 42ZM24 8C24.5667 8 25.0417 7.80833 25.425 7.425C25.8083 7.04167 26 6.56667 26 6C26 5.43333 25.8083 4.95833 25.425 4.575C25.0417 4.19167 24.5667 4 24 4C23.4333 4 22.9583 4.19167 22.575 4.575C22.1917 4.95833 22 5.43333 22 6C22 6.56667 22.1917 7.04167 22.575 7.425C22.9583 7.80833 23.4333 8 24 8ZM24 30C25.4 30 26.5833 29.5167 27.55 28.55C28.5167 27.5833 29 26.4 29 25C29 23.6 28.5167 22.4167 27.55 21.45C26.5833 20.4833 25.4 20 24 20C22.6 20 21.4167 20.4833 20.45 21.45C19.4833 22.4167 19 23.6 19 25C19 26.4 19.4833 27.5833 20.45 28.55C21.4167 29.5167 22.6 30 24 30ZM36 42C36.5667 42 37.0417 41.8083 37.425 41.425C37.8083 41.0417 38 40.5667 38 40C38 39.4333 37.8083 38.9583 37.425 38.575C37.0417 38.1917 36.5667 38 36 38C35.4333 38 34.9583 38.1917 34.575 38.575C34.1917 38.9583 34 39.4333 34 40C34 40.5667 34.1917 41.0417 34.575 41.425C34.9583 41.8083 35.4333 42 36 42ZM42 21C42.5667 21 43.0417 20.8083 43.425 20.425C43.8083 20.0417 44 19.5667 44 19C44 18.4333 43.8083 17.9583 43.425 17.575C43.0417 17.1917 42.5667 17 42 17C41.4333 17 40.9583 17.1917 40.575 17.575C40.1917 17.9583 40 18.4333 40 19C40 19.5667 40.1917 20.0417 40.575 20.425C40.9583 20.8083 41.4333 21 42 21Z" fill="white"/>
+</svg>

package/src/lib/icons/icon-menu.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_8126_1421" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+<rect width="24" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_8126_1421)">
+<path d="M3 18V16H21V18H3ZM3 13V11H21V13H3ZM3 8V6H21V8H3Z" fill="#181C1E"/>
+</g>
+</svg>

package/src/lib/icons/info-error.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_1307_212" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+<rect width="24" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_1307_212)">
+<path d="M12 17C12.2833 17 12.5208 16.9042 12.7125 16.7125C12.9042 16.5208 13 16.2833 13 16C13 15.7167 12.9042 15.4792 12.7125 15.2875C12.5208 15.0958 12.2833 15 12 15C11.7167 15 11.4792 15.0958 11.2875 15.2875C11.0958 15.4792 11 15.7167 11 16C11 16.2833 11.0958 16.5208 11.2875 16.7125C11.4792 16.9042 11.7167 17 12 17ZM11 13H13V7H11V13ZM12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22Z" fill="#FF4965"/>
+</g>
+</svg>

package/src/lib/icons/keyboard_arrow_down.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z"/></svg>