@sd-angular/core 19.0.0-beta.99 → 19.0.3

package/README.md

@@ -3,7 +3,6 @@
 > **VI** — Thư viện UI nội bộ xây dựng trên Angular Material, hỗ trợ Angular 19+  
 > **EN** — Internal UI component library built on Angular Material, supporting Angular 19+
 
-[![Version](https://img.shields.io/badge/version-19.0.0--beta.47-blue)](./package.json)
 [![Angular](https://img.shields.io/badge/Angular-19%2B-red)](https://angular.dev)
 [![Angular Material](https://img.shields.io/badge/Angular_Material-19%2B-purple)](https://material.angular.io)
 
@@ -423,19 +422,18 @@ import {
   SdSelect,       // Dropdown
   SdAutocomplete, // Autocomplete
   SdDate,         // Date picker
-  SdSearch,       // Search với debounce
 } from '@sd-angular/core/forms';
 ```
 
 ```html
-<sd-input [(ngModel)]="form.name" label="Họ tên" [required]="true" />
+<sd-input [(model)]="form.name" label="Họ tên" [required]="true" />
 
-<sd-input-number [(ngModel)]="form.price" label="Đơn giá" [min]="0" suffix="VNĐ" />
+<sd-input-number [(model)]="form.price" label="Đơn giá" [min]="0" suffix="VNĐ" />
 
-<sd-select [(ngModel)]="form.status" label="Trạng thái"
+<sd-select [(model)]="form.status" label="Trạng thái"
   [items]="statusList" valueField="value" displayField="label" />
 
-<sd-date [(ngModel)]="form.birthday" label="Ngày sinh" />
+<sd-date [(model)]="form.birthday" label="Ngày sinh" />
 ```
 
 ---
@@ -560,17 +558,17 @@ export class ProductListComponent implements OnInit {
       <sd-section title="Thông tin sản phẩm" icon="inventory">
         <div class="row">
           <div class="col-6">
-            <sd-input [(ngModel)]="formData.code" label="Mã" [required]="true" />
+            <sd-input [(model)]="formData.code" label="Mã" [required]="true" />
           </div>
           <div class="col-6">
-            <sd-select [(ngModel)]="formData.status" label="Trạng thái"
+            <sd-select [(model)]="formData.status" label="Trạng thái"
               [items]="STATUS_LIST" valueField="value" displayField="label" />
           </div>
           <div class="col-12">
-            <sd-input [(ngModel)]="formData.name" label="Tên sản phẩm" [required]="true" />
+            <sd-input [(model)]="formData.name" label="Tên sản phẩm" [required]="true" />
           </div>
           <div class="col-6">
-            <sd-input-number [(ngModel)]="formData.price" label="Đơn giá" suffix="VNĐ" />
+            <sd-input-number [(model)]="formData.price" label="Đơn giá" suffix="VNĐ" />
           </div>
         </div>
       </sd-section>
@@ -714,7 +712,7 @@ Thư viện tuân theo [Semantic Versioning](https://semver.org):
 
 ## QA / E2E
 
-Core UI components expose runtime state via lowercase `data-*` attributes. See [`docs/E2E-ATTRIBUTES.md`](docs/E2E-ATTRIBUTES.md) for the full catalog, component matrix, selector cookbook, and YAML schema for AI agents.
+Core UI components expose runtime state via lowercase `data-*` attributes for e2e selectors. The full catalog, component matrix, selector cookbook, and YAML schema for AI agents live in `docs/E2E-ATTRIBUTES.md` in the source repository.
 
 ---
 

package/assets/images/coming-soon.svg

@@ -0,0 +1,23 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" viewBox="0 0 192 192" fill="none">
+  <circle cx="96" cy="98" r="64" fill="#F4F4F5"></circle>
+  <ellipse cx="96" cy="160" rx="50" ry="4.5" fill="#1C1B1F" fill-opacity="0.05"></ellipse>
+
+  
+  <rect x="44" y="62" width="104" height="84" rx="6" fill="#FFFFFF" stroke="#52525B" stroke-width="2"></rect>
+  
+  <path d="M44 78 v-10 a6 6 0 0 1 6 -6 h92 a6 6 0 0 1 6 6 v10 Z" fill="#E4E4E7" stroke="#52525B" stroke-width="2" stroke-linejoin="round"></path>
+  
+  <rect x="62" y="50" width="6" height="20" rx="2" fill="#52525B"></rect>
+  <rect x="124" y="50" width="6" height="20" rx="2" fill="#52525B"></rect>
+  
+  <circle cx="60" cy="92" r="1.6" fill="#D4D4D8"></circle><circle cx="78" cy="92" r="1.6" fill="#D4D4D8"></circle><circle cx="96" cy="92" r="1.6" fill="#D4D4D8"></circle><circle cx="114" cy="92" r="1.6" fill="#D4D4D8"></circle><circle cx="132" cy="92" r="1.6" fill="#D4D4D8"></circle><circle cx="60" cy="104" r="1.6" fill="#D4D4D8"></circle><circle cx="78" cy="104" r="1.6" fill="#D4D4D8"></circle><circle cx="96" cy="104" r="1.6" fill="#D4D4D8"></circle><circle cx="114" cy="104" r="1.6" fill="#D4D4D8"></circle><circle cx="132" cy="104" r="1.6" fill="#D4D4D8"></circle><circle cx="60" cy="116" r="1.6" fill="#D4D4D8"></circle><circle cx="78" cy="116" r="1.6" fill="#D4D4D8"></circle><circle cx="96" cy="116" r="1.6" fill="#D4D4D8"></circle><circle cx="114" cy="116" r="1.6" fill="#D4D4D8"></circle><circle cx="132" cy="116" r="1.6" fill="#D4D4D8"></circle><circle cx="60" cy="128" r="1.6" fill="#D4D4D8"></circle><circle cx="78" cy="128" r="1.6" fill="#D4D4D8"></circle><circle cx="96" cy="128" r="1.6" fill="#D4D4D8"></circle><circle cx="114" cy="128" r="1.6" fill="#D4D4D8"></circle><circle cx="132" cy="128" r="1.6" fill="#D4D4D8"></circle>
+  
+  <g transform="translate(114 122)">
+    <path d="M0 -10 L3 -3 L10 -2 L5 3 L6 10 L0 7 L-6 10 L-5 3 L-10 -2 L-3 -3 Z" fill="#52525B" stroke="#52525B" stroke-width="1.5" stroke-linejoin="round"></path>
+  </g>
+  
+  <path d="M36 50 l0 -8 M32 46 l8 0" stroke="#71717A" stroke-width="2" stroke-linecap="round"></path>
+  <circle cx="156" cy="44" r="3" fill="#D4D4D8"></circle>
+  <path d="M160 102 l0 -5 M157.5 99.5 l5 0" stroke="#71717A" stroke-width="1.8" stroke-linecap="round"></path>
+
+</svg>

package/assets/images/data-empty.svg

@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" viewBox="0 0 192 192" fill="none">
+  
+  <circle cx="96" cy="98" r="64" fill="#F4F4F5"></circle>
+  
+  <ellipse cx="96" cy="160" rx="50" ry="4.5" fill="#1C1B1F" fill-opacity="0.05"></ellipse>
+
+  <g>
+    <rect x="66" y="44" width="60" height="36" rx="5" fill="#FFFFFF" stroke="#52525B" stroke-width="2"></rect>
+    <line x1="74" y1="56" x2="118" y2="56" stroke="#A1A1AA" stroke-width="1.5" stroke-dasharray="3 3" stroke-linecap="round"></line>
+    <line x1="74" y1="64" x2="108" y2="64" stroke="#A1A1AA" stroke-width="1.5" stroke-dasharray="3 3" stroke-linecap="round"></line>
+    <line x1="74" y1="72" x2="100" y2="72" stroke="#A1A1AA" stroke-width="1.5" stroke-dasharray="3 3" stroke-linecap="round"></line>
+  </g>
+  <path d="M36 100 L156 100 L148 142 a4 4 0 0 1 -4 3.6 H48 a4 4 0 0 1 -4 -3.6 Z" fill="#E4E4E7" stroke="#52525B" stroke-width="2" stroke-linejoin="round"></path>
+  <rect x="32" y="94" width="128" height="10" rx="3" fill="#FFFFFF" stroke="#52525B" stroke-width="2"></rect>
+  <path d="M52 104 L140 104 L136 126 H56 Z" fill="#F4F4F5" stroke="#71717A" stroke-width="1.2" stroke-opacity="0.45"></path>
+  <circle cx="46" cy="58" r="2.5" fill="#71717A"></circle>
+  <circle cx="150" cy="50" r="3.5" fill="#D4D4D8"></circle>
+  <path d="M163 84 l0 -6 M160 81 l6 0" stroke="#71717A" stroke-width="2" stroke-linecap="round"></path>
+  <circle cx="30" cy="82" r="2" fill="#D4D4D8"></circle>
+
+</svg>

package/assets/images/expired.svg

@@ -0,0 +1,22 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" viewBox="0 0 192 192" fill="none">
+  <circle cx="96" cy="98" r="64" fill="#F4F4F5"></circle>
+  <ellipse cx="96" cy="160" rx="50" ry="4.5" fill="#1C1B1F" fill-opacity="0.05"></ellipse>
+
+  
+  <rect x="58" y="46" width="76" height="6" rx="2" fill="#52525B"></rect>
+  <rect x="58" y="140" width="76" height="6" rx="2" fill="#52525B"></rect>
+  
+  <path d="M62 52 L130 52 L102 94 L130 140 L62 140 L90 94 Z" fill="#FFFFFF" stroke="#52525B" stroke-width="2" stroke-linejoin="round"></path>
+  
+  <path d="M68 56 L124 56 L100 92 L92 92 Z" fill="#F4F4F5" stroke="#A1A1AA" stroke-width="1.2" stroke-dasharray="3 3" stroke-linejoin="round"></path>
+  
+  <path d="M68 136 L124 136 L100 100 L92 100 Z" fill="#E4E4E7" stroke="#52525B" stroke-width="1.5" stroke-linejoin="round"></path>
+  
+  <circle cx="96" cy="100" r="2" fill="#52525B"></circle>
+  
+  <circle cx="40" cy="58" r="2.5" fill="#71717A"></circle>
+  <circle cx="156" cy="64" r="2.8" fill="#D4D4D8"></circle>
+  <path d="M36 124 l0 -5 M33.5 121.5 l5 0" stroke="#71717A" stroke-width="1.8" stroke-linecap="round"></path>
+  <path d="M158 120 l0 -6 M155 117 l6 0" stroke="#71717A" stroke-width="2" stroke-linecap="round"></path>
+
+</svg>

package/assets/images/file-error.svg

@@ -0,0 +1,28 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" viewBox="0 0 192 192" fill="none">
+  <circle cx="96" cy="98" r="64" fill="#F4F4F5"></circle>
+  <ellipse cx="96" cy="160" rx="50" ry="4.5" fill="#1C1B1F" fill-opacity="0.05"></ellipse>
+
+  
+  <g transform="translate(64 44)">
+    <path d="M0 0 H44 L62 18 V96 a4 4 0 0 1 -4 4 H0 a4 4 0 0 1 -4 -4 V4 a4 4 0 0 1 4 -4 Z" fill="#FFFFFF" stroke="#A1A1AA" stroke-width="1.5" stroke-linejoin="round"></path>
+    <path d="M44 0 V14 a4 4 0 0 0 4 4 H62" fill="#F4F4F5" stroke="#A1A1AA" stroke-width="1.5" stroke-linejoin="round"></path>
+  </g>
+  
+  <g transform="translate(48 56)">
+    <path d="M0 0 H48 L68 20 V108 a4 4 0 0 1 -4 4 H0 a4 4 0 0 1 -4 -4 V4 a4 4 0 0 1 4 -4 Z" fill="#FFFFFF" stroke="#52525B" stroke-width="2" stroke-linejoin="round"></path>
+    
+    <path d="M48 0 V16 a4 4 0 0 0 4 4 H68 Z" fill="#E4E4E7" stroke="#52525B" stroke-width="2" stroke-linejoin="round"></path>
+    
+    <line x1="10" y1="36" x2="50" y2="36" stroke="#D4D4D8" stroke-width="2.5" stroke-linecap="round"></line>
+    <line x1="10" y1="48" x2="58" y2="48" stroke="#D4D4D8" stroke-width="2.5" stroke-linecap="round"></line>
+    <line x1="10" y1="60" x2="44" y2="60" stroke="#D4D4D8" stroke-width="2.5" stroke-linecap="round"></line>
+    
+    <path d="M16 78 L52 108 M52 78 L16 108" stroke="#52525B" stroke-width="5" stroke-linecap="round"></path>
+  </g>
+  
+  <circle cx="32" cy="58" r="2.5" fill="#71717A"></circle>
+  <path d="M158 60 l0 -6 M155 57 l6 0" stroke="#71717A" stroke-width="2" stroke-linecap="round"></path>
+  <circle cx="38" cy="128" r="2.2" fill="#D4D4D8"></circle>
+  <circle cx="160" cy="124" r="2.5" fill="#D4D4D8"></circle>
+
+</svg>

package/assets/images/filter-empty.svg

@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" viewBox="0 0 192 192" fill="none">
+  
+  <circle cx="96" cy="98" r="64" fill="#F4F4F5"></circle>
+  
+  <ellipse cx="96" cy="160" rx="50" ry="4.5" fill="#1C1B1F" fill-opacity="0.05"></ellipse>
+
+  <circle cx="76" cy="38" r="3" fill="#71717A"></circle>
+  <circle cx="92" cy="32" r="2.4" fill="#D4D4D8"></circle>
+  <circle cx="108" cy="40" r="3" fill="#52525B"></circle>
+  <circle cx="120" cy="34" r="2" fill="#D4D4D8"></circle>
+  <path d="M50 54 L142 54 L110 96 V118 a4 4 0 0 1 -2 3.4 l-16 8 a4 4 0 0 1 -6 -3.4 V96 Z" fill="#E4E4E7" stroke="#52525B" stroke-width="2" stroke-linejoin="round"></path>
+  <ellipse cx="96" cy="54" rx="46" ry="6" fill="#FFFFFF" stroke="#52525B" stroke-width="2"></ellipse>
+  <ellipse cx="96" cy="54" rx="40" ry="3.5" fill="#F4F4F5"></ellipse>
+  <ellipse cx="96" cy="148" rx="34" ry="6" fill="#FFFFFF" stroke="#52525B" stroke-width="2"></ellipse>
+  <path d="M62 148 a34 6 0 0 0 68 0" fill="#F4F4F5" stroke="#52525B" stroke-width="2"></path>
+  <line x1="84" y1="151" x2="108" y2="151" stroke="#71717A" stroke-width="2" stroke-linecap="round"></line>
+  <circle cx="36" cy="70" r="2.2" fill="#D4D4D8"></circle>
+  <path d="M160 92 l0 -5 M157.5 89.5 l5 0" stroke="#71717A" stroke-width="1.8" stroke-linecap="round"></path>
+
+</svg>

package/assets/images/filter-required.svg

@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" viewBox="0 0 192 192" fill="none">
+  
+  <circle cx="96" cy="98" r="64" fill="#F4F4F5"></circle>
+  
+  <ellipse cx="96" cy="160" rx="50" ry="4.5" fill="#1C1B1F" fill-opacity="0.05"></ellipse>
+
+  <circle cx="96" cy="90" r="58" stroke="#71717A" stroke-width="1.5" stroke-dasharray="3 4" fill="none" stroke-opacity="0.45"></circle>
+  <path d="M50 52 L142 52 L110 94 V118 a4 4 0 0 1 -2 3.4 l-16 8 a4 4 0 0 1 -6 -3.4 V94 Z" fill="#E4E4E7" stroke="#52525B" stroke-width="2" stroke-linejoin="round"></path>
+  <ellipse cx="96" cy="52" rx="46" ry="6" fill="#FFFFFF" stroke="#52525B" stroke-width="2"></ellipse>
+  <ellipse cx="96" cy="52" rx="40" ry="3.5" fill="#D4D4D8"></ellipse>
+  <line x1="68" y1="74" x2="124" y2="74" stroke="#52525B" stroke-width="1.5" stroke-linecap="round" stroke-opacity="0.4"></line>
+  <line x1="76" y1="84" x2="116" y2="84" stroke="#52525B" stroke-width="1.5" stroke-linecap="round" stroke-opacity="0.4"></line>
+  <g transform="translate(122 100)">
+    <path d="M0 0 L0 18 L4 14 L8 22 L11 20 L7 12 L13 12 Z" fill="#52525B" stroke="#FFFFFF" stroke-width="1.5" stroke-linejoin="round"></path>
+  </g>
+  <path d="M48 40 l0 -8 M44 36 l8 0" stroke="#71717A" stroke-width="2" stroke-linecap="round"></path>
+  <path d="M148 38 l0 -6 M145 35 l6 0" stroke="#71717A" stroke-width="2" stroke-linecap="round"></path>
+  <circle cx="40" cy="100" r="2.5" fill="#D4D4D8"></circle>
+  <circle cx="156" cy="76" r="3" fill="#71717A"></circle>
+
+</svg>

package/assets/images/forbidden.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" viewBox="0 0 192 192" fill="none">
+  
+  <circle cx="96" cy="98" r="64" fill="#F4F4F5"></circle>
+  
+  <ellipse cx="96" cy="160" rx="50" ry="4.5" fill="#1C1B1F" fill-opacity="0.05"></ellipse>
+
+  <path d="M96 38 L138 54 V96 c0 26 -20 44 -42 50 c-22 -6 -42 -24 -42 -50 V54 Z" fill="#E4E4E7" stroke="#52525B" stroke-width="2" stroke-linejoin="round"></path>
+  <path d="M96 50 L128 62 V92 c0 18 -14 32 -32 38 c-18 -6 -32 -20 -32 -38 V62 Z" fill="#FFFFFF" fill-opacity="0.55" stroke="#71717A" stroke-width="1.2" stroke-linejoin="round" stroke-opacity="0.5"></path>
+  <path d="M82 76 L110 104 M110 76 L82 104" stroke="#52525B" stroke-width="5" stroke-linecap="round"></path>
+  <circle cx="40" cy="60" r="2.5" fill="#71717A"></circle>
+  <circle cx="156" cy="50" r="3" fill="#D4D4D8"></circle>
+  <path d="M158 116 l0 -6 M155 113 l6 0" stroke="#71717A" stroke-width="2" stroke-linecap="round"></path>
+  <circle cx="36" cy="124" r="2.2" fill="#D4D4D8"></circle>
+
+</svg>

package/assets/images/image-error.svg

@@ -0,0 +1,27 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" viewBox="0 0 192 192" fill="none">
+  <circle cx="96" cy="98" r="64" fill="#F4F4F5"></circle>
+  <ellipse cx="96" cy="160" rx="50" ry="4.5" fill="#1C1B1F" fill-opacity="0.05"></ellipse>
+
+  
+  <rect x="40" y="50" width="112" height="92" rx="8" fill="#FFFFFF" stroke="#52525B" stroke-width="2"></rect>
+  
+  <rect x="46" y="56" width="100" height="80" rx="5" fill="#F4F4F5" stroke="#52525B" stroke-width="1.2" stroke-opacity="0.35"></rect>
+  
+  <circle cx="120" cy="78" r="6" fill="#D4D4D8" stroke="#52525B" stroke-width="2"></circle>
+  
+  <path d="M46 124 L80 86 L106 116 L118 104 L146 124 L146 136 H46 Z" fill="#E4E4E7" stroke="#52525B" stroke-width="2" stroke-linejoin="round"></path>
+  
+  <path d="M46 136 L70 110 L90 126 L114 108 L146 136 Z" fill="#D4D4D8" stroke="#52525B" stroke-width="2" stroke-linejoin="round"></path>
+  
+  <path d="M58 70 L76 88 L66 100 L86 116 L78 128" stroke="#52525B" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke-dasharray="6 5"></path>
+  
+  <g transform="translate(146 134)">
+    <circle r="14" fill="#FFFFFF" stroke="#52525B" stroke-width="2"></circle>
+    <path d="M-5 -5 L5 5 M5 -5 L-5 5" stroke="#52525B" stroke-width="2.6" stroke-linecap="round"></path>
+  </g>
+  
+  <circle cx="34" cy="50" r="2.5" fill="#71717A"></circle>
+  <path d="M158 50 l0 -6 M155 47 l6 0" stroke="#71717A" stroke-width="2" stroke-linecap="round"></path>
+  <circle cx="32" cy="120" r="2.2" fill="#D4D4D8"></circle>
+
+</svg>

package/assets/images/maintenance.svg

@@ -0,0 +1,23 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" viewBox="0 0 192 192" fill="none">
+  <circle cx="96" cy="98" r="64" fill="#F4F4F5"></circle>
+  <ellipse cx="96" cy="160" rx="50" ry="4.5" fill="#1C1B1F" fill-opacity="0.05"></ellipse>
+
+  
+  <g transform="translate(96 96)">
+    <g fill="#E4E4E7" stroke="#52525B" stroke-width="2" stroke-linejoin="round">
+      <rect x="34" y="-6" width="12" height="12" rx="2" transform="rotate(0 40 0)"></rect><rect x="22.284271247461902" y="22.2842712474619" width="12" height="12" rx="2" transform="rotate(45 28.284271247461902 28.2842712474619)"></rect><rect x="-5.999999999999997" y="34" width="12" height="12" rx="2" transform="rotate(90 2.4492935982947065e-15 40)"></rect><rect x="-34.2842712474619" y="22.284271247461902" width="12" height="12" rx="2" transform="rotate(135 -28.2842712474619 28.284271247461902)"></rect><rect x="-46" y="-5.999999999999995" width="12" height="12" rx="2" transform="rotate(180 -40 4.898587196589413e-15)"></rect><rect x="-34.28427124746191" y="-34.2842712474619" width="12" height="12" rx="2" transform="rotate(225 -28.28427124746191 -28.2842712474619)"></rect><rect x="-6.000000000000007" y="-46" width="12" height="12" rx="2" transform="rotate(270 -7.347880794884118e-15 -40)"></rect><rect x="22.284271247461895" y="-34.28427124746191" width="12" height="12" rx="2" transform="rotate(315 28.284271247461895 -28.28427124746191)"></rect>
+    </g>
+    <circle r="34" fill="#E4E4E7" stroke="#52525B" stroke-width="2"></circle>
+    <circle r="14" fill="#FFFFFF" stroke="#52525B" stroke-width="2"></circle>
+    <circle r="6" fill="#52525B"></circle>
+  </g>
+  
+  <g transform="translate(132 60) rotate(40)">
+    <path d="M0 -8 a10 10 0 1 0 8 17 L34 35 a4 4 0 0 0 6 0 l4 -4 a4 4 0 0 0 0 -6 L18 18 a10 10 0 0 0 -8 -18 a10 10 0 0 0 -10 0 Z" fill="#FFFFFF" stroke="#52525B" stroke-width="2" stroke-linejoin="round"></path>
+  </g>
+  
+  <circle cx="40" cy="56" r="2.5" fill="#71717A"></circle>
+  <path d="M40 132 l0 -6 M37 129 l6 0" stroke="#71717A" stroke-width="2" stroke-linecap="round"></path>
+  <circle cx="158" cy="124" r="2.5" fill="#D4D4D8"></circle>
+
+</svg>

package/assets/images/not-found.svg

@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" viewBox="0 0 192 192" fill="none">
+  
+  <circle cx="96" cy="98" r="64" fill="#F4F4F5"></circle>
+  
+  <ellipse cx="96" cy="160" rx="50" ry="4.5" fill="#1C1B1F" fill-opacity="0.05"></ellipse>
+
+  <rect x="46" y="58" width="80" height="80" rx="8" fill="#FFFFFF" stroke="#52525B" stroke-width="2"></rect>
+  <path d="M114 58 L126 70 H114 Z" fill="#E4E4E7" stroke="#52525B" stroke-width="2" stroke-linejoin="round"></path>
+  <path d="M76 86 a10 10 0 1 1 16 8 c-2 1.5 -6 4 -6 10" fill="none" stroke="#52525B" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"></path>
+  <circle cx="86" cy="118" r="3.2" fill="#52525B"></circle>
+  <g>
+    <circle cx="132" cy="112" r="22" fill="#E4E4E7" fill-opacity="0.65" stroke="#52525B" stroke-width="2.5"></circle>
+    <circle cx="132" cy="112" r="14" fill="none" stroke="#52525B" stroke-width="1.2" stroke-opacity="0.4"></circle>
+    <line x1="148" y1="128" x2="162" y2="144" stroke="#52525B" stroke-width="5" stroke-linecap="round"></line>
+  </g>
+  <circle cx="38" cy="50" r="2.5" fill="#71717A"></circle>
+  <circle cx="148" cy="44" r="3" fill="#D4D4D8"></circle>
+  <path d="M34 110 l0 -5 M31.5 107.5 l5 0" stroke="#71717A" stroke-width="1.8" stroke-linecap="round"></path>
+
+</svg>

package/assets/images/offline.svg

@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" viewBox="0 0 192 192" fill="none">
+  <circle cx="96" cy="98" r="64" fill="#F4F4F5"></circle>
+  <ellipse cx="96" cy="160" rx="50" ry="4.5" fill="#1C1B1F" fill-opacity="0.05"></ellipse>
+
+  
+  <path d="M62 110 a18 18 0 0 1 6 -35 a24 24 0 0 1 46 4 a16 16 0 0 1 12 31 Z" fill="#E4E4E7" stroke="#52525B" stroke-width="2" stroke-linejoin="round"></path>
+  
+  <path d="M72 102 a12 12 0 0 1 4 -22 a16 16 0 0 1 28 2" fill="none" stroke="#71717A" stroke-width="1.2" stroke-opacity="0.4" stroke-linecap="round"></path>
+  
+  <line x1="56" y1="56" x2="138" y2="132" stroke="#FFFFFF" stroke-width="8" stroke-linecap="round"></line>
+  <line x1="56" y1="56" x2="138" y2="132" stroke="#52525B" stroke-width="4" stroke-linecap="round"></line>
+  
+  <path d="M40 138 q4 -6 10 -6" stroke="#71717A" stroke-width="2" fill="none" stroke-linecap="round"></path>
+  <path d="M148 142 q4 -8 12 -8" stroke="#71717A" stroke-width="2" fill="none" stroke-linecap="round"></path>
+  
+  <circle cx="40" cy="60" r="2.5" fill="#71717A"></circle>
+  <circle cx="158" cy="48" r="3" fill="#D4D4D8"></circle>
+  <path d="M158 100 l0 -6 M155 97 l6 0" stroke="#71717A" stroke-width="2" stroke-linecap="round"></path>
+
+</svg>

package/assets/images/submitted.svg

@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" viewBox="0 0 192 192" fill="none">
+  <circle cx="96" cy="98" r="64" fill="#F4F4F5"></circle>
+  <ellipse cx="96" cy="160" rx="50" ry="4.5" fill="#1C1B1F" fill-opacity="0.05"></ellipse>
+
+  
+  <path d="M40 138 Q80 110 120 80" stroke="#A1A1AA" stroke-width="2" stroke-dasharray="4 4" stroke-linecap="round" fill="none"></path>
+  
+  <path d="M44 102 L150 50 L130 138 L100 110 L44 102 Z" fill="#E4E4E7" stroke="#52525B" stroke-width="2" stroke-linejoin="round"></path>
+  
+  <path d="M44 102 L100 110 L150 50" fill="none" stroke="#52525B" stroke-width="2" stroke-linejoin="round"></path>
+  
+  <path d="M100 110 L130 138 L116 96 Z" fill="#D4D4D8" stroke="#52525B" stroke-width="1.5" stroke-linejoin="round"></path>
+  
+  <circle cx="46" cy="50" r="2.5" fill="#71717A"></circle>
+  <path d="M152 100 l0 -6 M149 97 l6 0" stroke="#71717A" stroke-width="2" stroke-linecap="round"></path>
+  <circle cx="156" cy="138" r="2.5" fill="#D4D4D8"></circle>
+
+</svg>

package/assets/images/success.svg

@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" viewBox="0 0 192 192" fill="none">
+  <circle cx="96" cy="98" r="64" fill="#F4F4F5"></circle>
+  <ellipse cx="96" cy="160" rx="50" ry="4.5" fill="#1C1B1F" fill-opacity="0.05"></ellipse>
+
+  
+  <circle cx="96" cy="96" r="44" fill="#E4E4E7" stroke="#52525B" stroke-width="2"></circle>
+  <circle cx="96" cy="96" r="32" fill="#FFFFFF" stroke="#52525B" stroke-width="1.5" stroke-opacity="0.45"></circle>
+  
+  <path d="M80 96 L92 108 L114 84" fill="none" stroke="#52525B" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"></path>
+  
+  <circle cx="44" cy="50" r="3" fill="#71717A"></circle>
+  <rect x="148" y="44" width="6" height="6" rx="1.5" transform="rotate(20 151 47)" fill="#D4D4D8"></rect>
+  <circle cx="36" cy="118" r="2.5" fill="#D4D4D8"></circle>
+  <rect x="158" y="116" width="5" height="5" rx="1" transform="rotate(35 161 119)" fill="#71717A"></rect>
+  <path d="M50 84 l0 -6 M47 81 l6 0" stroke="#71717A" stroke-width="2" stroke-linecap="round"></path>
+  <path d="M150 90 l0 -5 M147.5 87.5 l5 0" stroke="#71717A" stroke-width="1.8" stroke-linecap="round"></path>
+
+</svg>

package/assets/images/unauthorized.svg

@@ -0,0 +1,22 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" viewBox="0 0 192 192" fill="none">
+  
+  <circle cx="96" cy="98" r="64" fill="#F4F4F5"></circle>
+  
+  <ellipse cx="96" cy="160" rx="50" ry="4.5" fill="#1C1B1F" fill-opacity="0.05"></ellipse>
+
+  <path d="M70 84 V64 a26 26 0 0 1 52 0 V84" fill="none" stroke="#52525B" stroke-width="6" stroke-linecap="round"></path>
+  <rect x="52" y="82" width="64" height="58" rx="8" fill="#E4E4E7" stroke="#52525B" stroke-width="2"></rect>
+  <circle cx="84" cy="106" r="6" fill="#52525B"></circle>
+  <path d="M84 108 L82 122 H86 Z" fill="#52525B"></path>
+  <g transform="translate(124 102) rotate(28)">
+    <circle cx="0" cy="0" r="10" fill="#FFFFFF" stroke="#52525B" stroke-width="2"></circle>
+    <circle cx="0" cy="0" r="4" fill="#E4E4E7" stroke="#52525B" stroke-width="1.5"></circle>
+    <rect x="8" y="-3" width="28" height="6" rx="1" fill="#FFFFFF" stroke="#52525B" stroke-width="2"></rect>
+    <rect x="26" y="3" width="4" height="6" fill="#52525B"></rect>
+    <rect x="32" y="3" width="4" height="6" fill="#52525B"></rect>
+  </g>
+  <circle cx="44" cy="50" r="2.5" fill="#71717A"></circle>
+  <circle cx="38" cy="118" r="2.2" fill="#D4D4D8"></circle>
+  <path d="M156 56 l0 -6 M153 53 l6 0" stroke="#71717A" stroke-width="2" stroke-linecap="round"></path>
+
+</svg>

package/assets/images/unknown-error.svg

@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" viewBox="0 0 192 192" fill="none">
+  
+  <circle cx="96" cy="98" r="64" fill="#F4F4F5"></circle>
+  
+  <ellipse cx="96" cy="160" rx="50" ry="4.5" fill="#1C1B1F" fill-opacity="0.05"></ellipse>
+
+  <path d="M96 44 L150 134 a6 6 0 0 1 -5 9 H51 a6 6 0 0 1 -5 -9 Z" fill="#E4E4E7" stroke="#52525B" stroke-width="2" stroke-linejoin="round"></path>
+  <path d="M96 60 L138 130 H54 Z" fill="#FFFFFF" fill-opacity="0.55"></path>
+  <path d="M96 80 L96 112" stroke="#52525B" stroke-width="6" stroke-linecap="round"></path>
+  <circle cx="96" cy="124" r="4" fill="#52525B"></circle>
+  <path d="M30 76 l8 4 l-4 8" stroke="#71717A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"></path>
+  <path d="M162 90 l-8 4 l4 8" stroke="#71717A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"></path>
+  <path d="M52 46 l0 -8 M48 42 l8 0" stroke="#71717A" stroke-width="2" stroke-linecap="round"></path>
+  <circle cx="146" cy="46" r="2.8" fill="#71717A"></circle>
+  <circle cx="40" cy="128" r="2.2" fill="#D4D4D8"></circle>
+  <circle cx="158" cy="130" r="2.5" fill="#71717A"></circle>
+
+</svg>