@ttdk-design-system/library-react 0.0.0-stage → 1.0.0

package/src/web/accordion/manifest.json

@@ -0,0 +1,351 @@
+{
+  "name": "@ttdk-design-system/accordion",
+  "component": "Accordion",
+  "folder": "accordion",
+  "description": "Komponen Accordion untuk menyusun informasi berlapis yang dapat dibuka-tutup (collapse/expand) dengan dukungan multiple open, berbagai varian visual (default, bordered, separated, ghost), serta animasi transisi grid CSS yang sangat halus.",
+  "stylesheets": [
+    {
+      "theme": "common",
+      "file": "accordion.css",
+      "importPath": "web/accordion/accordion.css"
+    }
+  ],
+  "props": {
+    "items": {
+      "name": "items",
+      "type": "AccordionItem[]",
+      "optional": false,
+      "default": null,
+      "description": "Daftar item accordion yang akan dirender.",
+      "example": null,
+      "param": null
+    },
+    "value": {
+      "name": "value",
+      "type": "string | string[]",
+      "optional": true,
+      "default": null,
+      "description": "Nilai item yang sedang terbuka (controlled value). Bisa berupa string tunggal atau array string jika multiple={true}.",
+      "example": null,
+      "param": null
+    },
+    "defaultValue": {
+      "name": "defaultValue",
+      "type": "string | string[]",
+      "optional": true,
+      "default": null,
+      "description": "Nilai default item yang terbuka saat pertama kali dirender (uncontrolled initial value).",
+      "example": null,
+      "param": null
+    },
+    "multiple": {
+      "name": "multiple",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Mengizinkan lebih dari satu item terbuka secara bersamaan.",
+      "example": null,
+      "param": null
+    },
+    "collapsible": {
+      "name": "collapsible",
+      "type": "boolean",
+      "optional": true,
+      "default": "true",
+      "description": "Mengizinkan item yang terbuka untuk ditutup kembali saat diklik.",
+      "example": null,
+      "param": null
+    },
+    "variant": {
+      "name": "variant",
+      "type": "'default' | 'bordered' | 'separated' | 'ghost'",
+      "optional": true,
+      "default": "default",
+      "description": "Varian tampilan visual accordion: - `'default'`: Garis pembatas (divider) minimalis antar-item. - `'bordered'`: Pembungkus border luar dengan sudut melengkung. - `'separated'`: Setiap item berupa kartu terpisah mandiri dengan jarak celah (gap). - `'ghost'`: Tampilan bersih tanpa border luar, hanya hover background lembut.",
+      "example": null,
+      "param": null
+    },
+    "size": {
+      "name": "size",
+      "type": "'sm' | 'md' | 'lg'",
+      "optional": true,
+      "default": "md",
+      "description": "Skala ukuran proporsional accordion (padding, font, icon): - `'sm'`: Kompak (13px font, padding rapat). - `'md'`: Standar (14px font, padding normal). - `'lg'`: Besar (16px font, padding lapang).",
+      "example": null,
+      "param": null
+    },
+    "iconPosition": {
+      "name": "iconPosition",
+      "type": "'left' | 'right'",
+      "optional": true,
+      "default": "right",
+      "description": "Posisi indikator ikon panah / chevron: - `'right'`: Di ujung kanan (standar desain). - `'left'`: Di sebelah kiri sebelum judul.",
+      "example": null,
+      "param": null
+    },
+    "rounded": {
+      "name": "rounded",
+      "type": "'none' | 'sm' | 'md' | 'lg' | 'full'",
+      "optional": true,
+      "default": "md",
+      "description": "Sudut kelengkungan radius (khusus untuk varian 'bordered' dan 'separated'): - `'none'`: Sudut 0px. - `'sm'`: Sudut 6px. - `'md'`: Sudut 10px. - `'lg'`: Sudut 14px. - `'full'`: Sudut 20px.",
+      "example": null,
+      "param": null
+    },
+    "disabled": {
+      "name": "disabled",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Menonaktifkan seluruh interaksi accordion.",
+      "example": null,
+      "param": null
+    },
+    "ui": {
+      "name": "ui",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Kustomisasi visual granular root container (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "style": {
+      "name": "style",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Inline CSS style object native.",
+      "example": null,
+      "param": null
+    },
+    "className": {
+      "name": "className",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk root accordion.",
+      "example": null,
+      "param": null
+    },
+    "itemStyle": {
+      "name": "itemStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk tiap elemen item accordion (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "itemClass": {
+      "name": "itemClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk tiap elemen item accordion.",
+      "example": null,
+      "param": null
+    },
+    "triggerStyle": {
+      "name": "triggerStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk tombol trigger accordion (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "triggerClass": {
+      "name": "triggerClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk tombol trigger accordion.",
+      "example": null,
+      "param": null
+    },
+    "titleStyle": {
+      "name": "titleStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk teks judul trigger accordion (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "titleClass": {
+      "name": "titleClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk teks judul trigger accordion.",
+      "example": null,
+      "param": null
+    },
+    "subtitleStyle": {
+      "name": "subtitleStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk teks subtitle trigger accordion (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "subtitleClass": {
+      "name": "subtitleClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk teks subtitle trigger accordion.",
+      "example": null,
+      "param": null
+    },
+    "iconStyle": {
+      "name": "iconStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk indikator ikon panah / chevron (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "iconClass": {
+      "name": "iconClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk indikator ikon panah / chevron.",
+      "example": null,
+      "param": null
+    },
+    "icon": {
+      "name": "icon",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Ikon kustom untuk menggantikan ikon panah bawaan accordion secara global.",
+      "example": null,
+      "param": null
+    },
+    "contentStyle": {
+      "name": "contentStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk panel konten accordion (UiProps). Mengatur seluruh tampilan panel isi (background, padding, border, serta warna & tipografi teks isi).",
+      "example": null,
+      "param": null
+    },
+    "contentClass": {
+      "name": "contentClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk panel konten accordion.",
+      "example": null,
+      "param": null
+    },
+    "onChange": {
+      "name": "onChange",
+      "type": "(value: any) => void",
+      "optional": true,
+      "default": null,
+      "description": "Callback event saat status item yang terbuka berubah. Mengembalikan string atau array string sesuai mode `multiple`.",
+      "example": null,
+      "param": null
+    },
+    "children": {
+      "name": "children",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Konten anak atau slot kustom.",
+      "example": null,
+      "param": null
+    }
+  },
+  "subInterfaces": {
+    "AccordionItem": {
+      "value": {
+        "name": "value",
+        "type": "string",
+        "optional": false,
+        "default": null,
+        "description": "Nilai identifikasi unik untuk item accordion.",
+        "example": null,
+        "param": null
+      },
+      "title": {
+        "name": "title",
+        "type": "string",
+        "optional": false,
+        "default": null,
+        "description": "Judul teks yang ditampilkan pada header trigger accordion.",
+        "example": null,
+        "param": null
+      },
+      "subtitle": {
+        "name": "subtitle",
+        "type": "string",
+        "optional": true,
+        "default": null,
+        "description": "Subtitle atau deskripsi singkat sekunder di bawah judul.",
+        "example": null,
+        "param": null
+      },
+      "content": {
+        "name": "content",
+        "type": "any",
+        "optional": true,
+        "default": null,
+        "description": "Konten isi panel yang terbuka saat accordion di-expand.",
+        "example": null,
+        "param": null
+      },
+      "icon": {
+        "name": "icon",
+        "type": "any",
+        "optional": true,
+        "default": null,
+        "description": "Ikon atau elemen visual opsional di samping judul.",
+        "example": null,
+        "param": null
+      },
+      "badge": {
+        "name": "badge",
+        "type": "string | number",
+        "optional": true,
+        "default": null,
+        "description": "Badge teks atau counter angka opsional (misal: '12', 'Baru', 'Wajib').",
+        "example": null,
+        "param": null
+      },
+      "customIcon": {
+        "name": "customIcon",
+        "type": "any",
+        "optional": true,
+        "default": null,
+        "description": "Ikon kustom untuk menggantikan ikon panah bawaan khusus item ini.",
+        "example": null,
+        "param": null
+      },
+      "disabled": {
+        "name": "disabled",
+        "type": "boolean",
+        "optional": true,
+        "default": "false",
+        "description": "Menonaktifkan item ini dari interaksi buka/tutup.",
+        "example": null,
+        "param": null
+      }
+    }
+  },
+  "supportedFrameworks": [
+    "react",
+    "vue",
+    "svelte"
+  ],
+  "themes": [
+    "tw"
+  ]
+}

package/src/web/alert/AI_GUIDE.md

@@ -0,0 +1,139 @@
+# <Alert /> — TTDK Component Reference
+
+Komponen Alert untuk menampilkan pesan umpan balik kontekstual statis, instruksi peringatan, atau status penting pada halaman.
+
+## 1. Stylesheets & Theming (Pure CSS)
+Import the corresponding stylesheet for the theme you wish to use:
+- **COMMON Theme**: `import "@ttdk-design-system/library-<react|vue|svelte>/web/alert/alert.css";`
+
+## 2. Subpath Component Import
+```ts
+// React
+import Alert from "@ttdk-design-system/library-react/web/alert";
+
+// Vue 3
+import Alert from "@ttdk-design-system/library-vue/web/alert";
+
+// Svelte
+import Alert from "@ttdk-design-system/library-svelte/web/alert";
+```
+
+## 3. Props & API Reference
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `style?` | `any` | `-` | Inline CSS style kustom. |
+| `title?` | `string` | `-` | Judul utama alert. |
+| `description?` | `string` | `-` | Deskripsi atau pesan teks penjelasan alert. |
+| `variant?` | `| 'neutral'
+  | 'info'
+  | 'success'
+  | 'warning'
+  | 'danger'` | `neutral` | Varian warna semantik alert: - `'neutral'`: Netral (border hitam/putih, background base). - `'info'`: Biru informasi (#2196F3). - `'success'`: Hijau konfirmasi keberhasilan (#04B761). - `'warning'`: Kuning / amber peringatan (#F88000). - `'danger'`: Merah kesalahan / bahaya (#D0021B). |
+| `appearance?` | `'soft' | 'solid' | 'outline' | 'subtle'` | `soft` | Gaya tampilan visual alert: - `'soft'`: Latar belakang warna transparan lembut (standar). - `'solid'`: Latar belakang warna solid pekat dengan teks putih. - `'outline'`: Garis tepi dengan latar belakang transparan. - `'subtle'`: Latar belakang abu netral dengan aksen border tipis. |
+| `rounded?` | `'none' | 'sm' | 'md' | 'lg' | 'full'` | `md` | Sudut kelengkungan alert: - `'none'`: Sudut tajam 0px. - `'sm'`: Radius halus 4px. - `'md'`: Radius sedang 8px (standar). - `'lg'`: Radius melengkung 12px. - `'full'`: Lingkaran penuh 9999px. |
+| `icon?` | `any` | `true` | Ikon SVG kustom yang menggantikan ikon bawaan, atau boolean untuk menampilkan/menyembunyikan ikon. |
+| `iconColor?` | `string` | `-` | Warna ikon kustom secara langsung. |
+| `iconSize?` | `string` | `-` | Ukuran ikon kustom secara langsung (misal: '20px', '1.5rem'). |
+| `hideIcon?` | `boolean` | `false` | Menyembunyikan ikon pada alert. |
+| `closable?` | `boolean` | `false` | Menampilkan tombol tutup (silang) untuk menutup alert secara interaktif. |
+| `onClose?` | `(event: any) => void` | `-` | Callback saat tombol tutup diklik. |
+| `block?` | `boolean` | `false` | Membuat alert memenuhi lebar kontainer (100%). |
+| `titleStyle?` | `UiProps` | `-` | Style kustom untuk judul alert (UiProps / style object + pseudo support). |
+| `titleClass?` | `string` | `-` | Class CSS kustom untuk judul alert. |
+| `descStyle?` | `UiProps` | `-` | Style kustom untuk deskripsi alert (UiProps / style object + pseudo support). |
+| `descClass?` | `string` | `-` | Class CSS kustom untuk deskripsi alert. |
+| `iconStyle?` | `UiProps` | `-` | Style kustom untuk ikon alert (UiProps / style object + pseudo support). |
+| `iconClass?` | `string` | `-` | Class CSS kustom untuk ikon alert. |
+| `closableStyle?` | `UiProps` | `-` | Style kustom untuk tombol tutup alert (UiProps / style object + pseudo support). |
+| `closableClass?` | `string` | `-` | Class CSS kustom untuk tombol tutup alert. |
+| `ui?` | `UiProps` | `-` | Kustomisasi visual granular melalui style-like object (+ support pseudo-class: hover, active). |
+| `className?` | `string` | `-` | Class CSS kustom. |
+| `children?` | `any` | `-` | Konten kustom tambahan di dalam alert. |
+
+## 4. Usage Examples
+
+### React Example
+```tsx
+import Alert from "@ttdk-design-system/library-react/web/alert";
+import "@ttdk-design-system/library-react/web/alert/alert.css";
+
+export function Example() {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+      <Alert
+        variant="info"
+        title="Informasi Sinkronisasi"
+        description="Data fasilitas kesehatan berhasil disinkronkan dengan SATUSEHAT."
+      />
+      <Alert
+        variant="warning"
+        title="Peringatan Kuota API"
+        description="Batas kuota harian tersisa 15%. Harap periksa penggunaan layanan."
+        closable
+      />
+      <Alert
+        variant="danger"
+        title="Gagal Memproses Data"
+        description="Terjadi kesalahan validasi payload FHIR pada server."
+      />
+    </div>
+  );
+}
+```
+
+### Vue 3 Example
+```vue
+<script setup lang="ts">
+import Alert from "@ttdk-design-system/library-vue/web/alert";
+import "@ttdk-design-system/library-vue/web/alert/alert.css";
+</script>
+
+<template>
+  <div style="display: flex; flex-direction: column; gap: 12px;">
+    <Alert
+      variant="info"
+      title="Informasi Sinkronisasi"
+      description="Data fasilitas kesehatan berhasil disinkronkan dengan SATUSEHAT."
+    />
+    <Alert
+      variant="warning"
+      title="Peringatan Kuota API"
+      description="Batas kuota harian tersisa 15%. Harap periksa penggunaan layanan."
+      :closable="true"
+    />
+    <Alert
+      variant="danger"
+      title="Gagal Memproses Data"
+      description="Terjadi kesalahan validasi payload FHIR pada server."
+    />
+  </div>
+</template>
+```
+
+### Svelte Example
+```svelte
+<script lang="ts">
+  import Alert from "@ttdk-design-system/library-svelte/web/alert";
+  import "@ttdk-design-system/library-svelte/web/alert/alert.css";
+</script>
+
+<div style="display: flex; flex-direction: column; gap: 12px;">
+  <Alert
+    variant="info"
+    title="Informasi Sinkronisasi"
+    description="Data fasilitas kesehatan berhasil disinkronkan dengan SATUSEHAT."
+  />
+  <Alert
+    variant="warning"
+    title="Peringatan Kuota API"
+    description="Batas kuota harian tersisa 15%. Harap periksa penggunaan layanan."
+    closable={true}
+  />
+  <Alert
+    variant="danger"
+    title="Gagal Memproses Data"
+    description="Terjadi kesalahan validasi payload FHIR pada server."
+  />
+</div>
+```

package/src/web/alert/alert.css

@@ -0,0 +1 @@
+.ttdk-alert{box-sizing:border-box;width:fit-content;max-width:100%;font-family:var(--ttdk-font-sans);border-radius:var(--ttdk-radius-sm,8px);border-style:solid;border-width:1px;align-items:flex-start;gap:12px;padding:14px 16px;font-size:14px;line-height:1.5;transition:background-color .2s,border-color .2s,color .2s;display:flex;position:relative}.ttdk-alert[data-block=true]{width:100%}.ttdk-alert[data-rounded=none]{border-radius:var(--ttdk-radius-none,0)}.ttdk-alert[data-rounded=sm]{border-radius:var(--ttdk-radius-xs,4px)}.ttdk-alert[data-rounded=md]{border-radius:var(--ttdk-radius-sm,8px)}.ttdk-alert[data-rounded=lg]{border-radius:var(--ttdk-radius-md,12px)}.ttdk-alert[data-rounded=full]{border-radius:var(--ttdk-radius-full,9999px)}.ttdk-alert-icon-wrapper{flex-shrink:0;justify-content:center;align-items:center;margin-top:2px;display:flex}.ttdk-alert-icon{stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;width:18px;height:18px;display:block}.ttdk-alert-content{flex-direction:column;flex:1;gap:4px;min-width:0;display:flex}.ttdk-alert-title{color:var(--ttdk-ui-color,var(--ttdk-text-icon-primary));letter-spacing:.5px;font-size:14px;font-weight:600;line-height:125%}.ttdk-alert-desc,.ttdk-alert-description{color:var(--ttdk-ui-color,var(--ttdk-text-icon-primary));letter-spacing:.25px;font-size:14px;font-weight:400;line-height:150%}.ttdk-alert-slot{margin-top:8px}.ttdk-alert-close-btn{border-radius:var(--ttdk-radius-xs,6px);width:24px;height:24px;color:var(--ttdk-text-icon-primary,#141313);opacity:.65;cursor:pointer;background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;margin-left:auto;padding:0;transition:opacity .15s,background-color .15s;display:flex}.dark .ttdk-alert-close-btn{color:var(--ttdk-text-icon-primary,#fff)}.ttdk-alert-close-btn svg{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round}.ttdk-alert-close-btn:hover{opacity:1;background:#14131314}.dark .ttdk-alert-close-btn:hover{background:#ffffff1a}.ttdk-alert-close-btn:focus-visible{outline-offset:1px;outline:2px solid}.ttdk-alert[data-variant=neutral],.ttdk-alert[data-appearance=soft][data-variant=neutral],.ttdk-alert[data-appearance=solid][data-variant=neutral],.ttdk-alert[data-appearance=outline][data-variant=neutral],.ttdk-alert[data-appearance=subtle][data-variant=neutral]{background-color:var(--ttdk-bg-base-primary);border-color:var(--ttdk-stroke-stay-black);color:var(--ttdk-text-icon-primary)}.ttdk-alert[data-variant=neutral] .ttdk-alert-icon-wrapper,.ttdk-alert[data-appearance=soft][data-variant=neutral] .ttdk-alert-icon-wrapper,.ttdk-alert[data-appearance=solid][data-variant=neutral] .ttdk-alert-icon-wrapper,.ttdk-alert[data-appearance=outline][data-variant=neutral] .ttdk-alert-icon-wrapper,.ttdk-alert[data-appearance=subtle][data-variant=neutral] .ttdk-alert-icon-wrapper{color:var(--ttdk-text-icon-primary)}.ttdk-alert[data-appearance=soft][data-variant=success]{background-color:var(--ttdk-bg-status-success-subtle);border-color:var(--ttdk-stroke-status-success)}.ttdk-alert[data-appearance=soft][data-variant=success] .ttdk-alert-icon-wrapper{color:var(--ttdk-text-icon-status-success)}.ttdk-alert[data-appearance=soft][data-variant=info]{background-color:var(--ttdk-bg-status-info-subtle);border-color:var(--ttdk-stroke-status-info)}.ttdk-alert[data-appearance=soft][data-variant=info] .ttdk-alert-icon-wrapper{color:var(--ttdk-text-icon-status-info)}.ttdk-alert[data-appearance=soft][data-variant=warning]{background-color:var(--ttdk-bg-status-warning-subtle);border-color:var(--ttdk-stroke-status-warning)}.ttdk-alert[data-appearance=soft][data-variant=warning] .ttdk-alert-icon-wrapper{color:var(--ttdk-text-icon-status-warning)}.ttdk-alert[data-appearance=soft][data-variant=danger]{background-color:var(--ttdk-bg-status-error-subtle);border-color:var(--ttdk-stroke-status-error)}.ttdk-alert[data-appearance=soft][data-variant=danger] .ttdk-alert-icon-wrapper{color:var(--ttdk-text-icon-status-error)}.ttdk-alert[data-appearance=solid]:not([data-variant=neutral]),.ttdk-alert[data-appearance=solid]:not([data-variant=neutral]) .ttdk-alert-title,.ttdk-alert[data-appearance=solid]:not([data-variant=neutral]) .ttdk-alert-desc,.ttdk-alert[data-appearance=solid]:not([data-variant=neutral]) .ttdk-alert-description,.ttdk-alert[data-appearance=solid]:not([data-variant=neutral]) .ttdk-alert-icon-wrapper,.ttdk-alert[data-appearance=solid]:not([data-variant=neutral]) .ttdk-alert-close-btn{color:var(--ttdk-text-icon-stay-black)}.ttdk-alert[data-appearance=solid][data-variant=success]{background-color:var(--ttdk-bg-status-success);border-color:var(--ttdk-bg-status-success)}.ttdk-alert[data-appearance=solid][data-variant=info]{background-color:var(--ttdk-bg-status-info);border-color:var(--ttdk-bg-status-info);color:var(--ttdk-text-icon-stay-white)}.ttdk-alert[data-appearance=solid][data-variant=info] .ttdk-alert-title,.ttdk-alert[data-appearance=solid][data-variant=info] .ttdk-alert-desc,.ttdk-alert[data-appearance=solid][data-variant=info] .ttdk-alert-description,.ttdk-alert[data-appearance=solid][data-variant=info] .ttdk-alert-icon-wrapper,.ttdk-alert[data-appearance=solid][data-variant=info] .ttdk-alert-close-btn{color:var(--ttdk-text-icon-stay-white)}.ttdk-alert[data-appearance=solid][data-variant=warning]{background-color:var(--ttdk-bg-status-warning);border-color:var(--ttdk-bg-status-warning)}.ttdk-alert[data-appearance=solid][data-variant=danger]{background-color:var(--ttdk-bg-status-error);border-color:var(--ttdk-bg-status-error);color:var(--ttdk-text-icon-stay-white)}.ttdk-alert[data-appearance=solid][data-variant=danger] .ttdk-alert-title,.ttdk-alert[data-appearance=solid][data-variant=danger] .ttdk-alert-desc,.ttdk-alert[data-appearance=solid][data-variant=danger] .ttdk-alert-description,.ttdk-alert[data-appearance=solid][data-variant=danger] .ttdk-alert-icon-wrapper,.ttdk-alert[data-appearance=solid][data-variant=danger] .ttdk-alert-close-btn{color:var(--ttdk-text-icon-stay-white)}.ttdk-alert[data-appearance=outline]{background-color:#0000}.ttdk-alert[data-appearance=outline][data-variant=success]{border-color:var(--ttdk-stroke-status-success)}.ttdk-alert[data-appearance=outline][data-variant=success] .ttdk-alert-icon-wrapper{color:var(--ttdk-text-icon-status-success)}.ttdk-alert[data-appearance=outline][data-variant=info]{border-color:var(--ttdk-stroke-status-info)}.ttdk-alert[data-appearance=outline][data-variant=info] .ttdk-alert-icon-wrapper{color:var(--ttdk-text-icon-status-info)}.ttdk-alert[data-appearance=outline][data-variant=warning]{border-color:var(--ttdk-stroke-status-warning)}.ttdk-alert[data-appearance=outline][data-variant=warning] .ttdk-alert-icon-wrapper{color:var(--ttdk-text-icon-status-warning)}.ttdk-alert[data-appearance=outline][data-variant=danger]{border-color:var(--ttdk-stroke-status-error)}.ttdk-alert[data-appearance=outline][data-variant=danger] .ttdk-alert-icon-wrapper{color:var(--ttdk-text-icon-status-error)}.ttdk-alert[data-appearance=subtle]{background-color:var(--ttdk-bg-secondary-disabled);border-color:var(--ttdk-stroke-subtle)}.ttdk-alert[data-appearance=subtle][data-variant=success] .ttdk-alert-icon-wrapper{color:var(--ttdk-text-icon-status-success)}.ttdk-alert[data-appearance=subtle][data-variant=info] .ttdk-alert-icon-wrapper{color:var(--ttdk-text-icon-status-info)}.ttdk-alert[data-appearance=subtle][data-variant=warning] .ttdk-alert-icon-wrapper{color:var(--ttdk-text-icon-status-warning)}.ttdk-alert[data-appearance=subtle][data-variant=danger] .ttdk-alert-icon-wrapper{color:var(--ttdk-text-icon-status-error)}.dark .ttdk-alert[data-variant=neutral],[data-theme=dark] .ttdk-alert[data-variant=neutral],.dark .ttdk-alert[data-appearance=soft][data-variant=neutral],[data-theme=dark] .ttdk-alert[data-appearance=soft][data-variant=neutral],.dark .ttdk-alert[data-appearance=solid][data-variant=neutral],[data-theme=dark] .ttdk-alert[data-appearance=solid][data-variant=neutral],.dark .ttdk-alert[data-appearance=outline][data-variant=neutral],[data-theme=dark] .ttdk-alert[data-appearance=outline][data-variant=neutral],.dark .ttdk-alert[data-appearance=subtle][data-variant=neutral],[data-theme=dark] .ttdk-alert[data-appearance=subtle][data-variant=neutral]{background-color:var(--ttdk-bg-base-primary);border-color:var(--ttdk-stroke-stay-white);color:var(--ttdk-text-icon-primary)}.dark .ttdk-alert[data-variant=neutral] .ttdk-alert-icon-wrapper,[data-theme=dark] .ttdk-alert[data-variant=neutral] .ttdk-alert-icon-wrapper,.dark .ttdk-alert[data-appearance=soft][data-variant=neutral] .ttdk-alert-icon-wrapper,[data-theme=dark] .ttdk-alert[data-appearance=soft][data-variant=neutral] .ttdk-alert-icon-wrapper,.dark .ttdk-alert[data-appearance=solid][data-variant=neutral] .ttdk-alert-icon-wrapper,[data-theme=dark] .ttdk-alert[data-appearance=solid][data-variant=neutral] .ttdk-alert-icon-wrapper,.dark .ttdk-alert[data-appearance=outline][data-variant=neutral] .ttdk-alert-icon-wrapper,[data-theme=dark] .ttdk-alert[data-appearance=outline][data-variant=neutral] .ttdk-alert-icon-wrapper,.dark .ttdk-alert[data-appearance=subtle][data-variant=neutral] .ttdk-alert-icon-wrapper,[data-theme=dark] .ttdk-alert[data-appearance=subtle][data-variant=neutral] .ttdk-alert-icon-wrapper{color:var(--ttdk-text-icon-primary)}.dark .ttdk-alert[data-appearance=soft][data-variant=success],[data-theme=dark] .ttdk-alert[data-appearance=soft][data-variant=success]{background-color:var(--ttdk-bg-status-success-subtle);border-color:var(--ttdk-stroke-status-success)}.dark .ttdk-alert[data-appearance=soft][data-variant=info],[data-theme=dark] .ttdk-alert[data-appearance=soft][data-variant=info]{background-color:var(--ttdk-bg-status-info-subtle);border-color:var(--ttdk-stroke-status-info)}.dark .ttdk-alert[data-appearance=soft][data-variant=warning],[data-theme=dark] .ttdk-alert[data-appearance=soft][data-variant=warning]{background-color:var(--ttdk-bg-status-warning-subtle);border-color:var(--ttdk-stroke-status-warning)}.dark .ttdk-alert[data-appearance=soft][data-variant=danger],[data-theme=dark] .ttdk-alert[data-appearance=soft][data-variant=danger]{background-color:var(--ttdk-bg-status-error-subtle);border-color:var(--ttdk-stroke-status-error)}.dark .ttdk-alert[data-appearance=subtle],[data-theme=dark] .ttdk-alert[data-appearance=subtle]{background-color:var(--ttdk-bg-card);border-color:var(--ttdk-stroke-subtle)}.ttdk-alert[style*=--ttdk-ui-icon-color] .ttdk-alert-icon-wrapper,.ttdk-alert[style*=--ttdk-ui-icon-color] .ttdk-alert-icon{color:var(--ttdk-ui-icon-color)!important}.ttdk-alert[style*=--ttdk-ui-icon-size] .ttdk-alert-icon{width:var(--ttdk-ui-icon-size)!important;height:var(--ttdk-ui-icon-size)!important}