diff --git a/review/feat-figma-properties-alignment/404.html b/review/feat-figma-properties-alignment/404.html index 316b12c8d64..609bd89d99e 100644 --- a/review/feat-figma-properties-alignment/404.html +++ b/review/feat-figma-properties-alignment/404.html @@ -1 +1 @@ -DB UI Mono
\ No newline at end of file +DB UI Mono
\ No newline at end of file diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/accordion-item.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/accordion-item.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/accordion-item.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/accordion-item.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/accordion-item/overview.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/accordion-item/overview.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/accordion-item/overview.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/accordion-item/overview.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/accordion.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/accordion.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/accordion.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/accordion.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/accordion/overview.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/accordion/overview.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/accordion/overview.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/accordion/overview.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/action.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/action.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/action.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/action.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/action/button.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/action/button.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/action/button.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/action/button.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/action/button/overview.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/action/button/overview.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/action/button/overview.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/action/button/overview.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/action/link.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/action/link.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/action/link.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/action/link.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/action/link/overview.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/action/link/overview.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/action/link/overview.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/action/link/overview.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/badge.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/badge.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/badge.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/badge.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/badge/overview.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/badge/overview.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/badge/overview.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/badge/overview.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/brand.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/brand.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/brand.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/brand.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/brand/overview.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/brand/overview.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/brand/overview.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/brand/overview.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/button.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/button.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/button.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/button.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/button/overview.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/button/overview.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/button/overview.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/button/overview.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/card.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/card.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/card.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/card.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/card/overview.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/card/overview.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/card/overview.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/card/overview.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/checkbox.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/checkbox.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/checkbox.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/checkbox.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/checkbox/overview.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/checkbox/overview.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/checkbox/overview.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/checkbox/overview.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/data-display.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/data-display.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/data-display.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/data-display.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/data-display/accordion-item.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/data-display/accordion-item.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/data-display/accordion-item.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/data-display/accordion-item.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/data-display/accordion-item/overview.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/data-display/accordion-item/overview.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/data-display/accordion-item/overview.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/data-display/accordion-item/overview.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/data-display/accordion.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/data-display/accordion.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/data-display/accordion.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/data-display/accordion.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/data-display/accordion/overview.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/data-display/accordion/overview.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/data-display/accordion/overview.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/data-display/accordion/overview.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/data-display/brand.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/data-display/brand.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/data-display/brand.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/data-display/brand.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/data-display/brand/overview.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/data-display/brand/overview.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/data-display/brand/overview.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/data-display/brand/overview.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/data-display/infotext.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/data-display/infotext.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/data-display/infotext.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/data-display/infotext.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/data-display/infotext/overview.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/data-display/infotext/overview.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/data-display/infotext/overview.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/data-display/infotext/overview.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/data-display/tab-item.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/data-display/tab-item.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/data-display/tab-item.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/data-display/tab-item.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/data-display/tab-item/overview.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/data-display/tab-item/overview.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/data-display/tab-item/overview.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/data-display/tab-item/overview.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/data-display/tabs.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/data-display/tabs.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/data-display/tabs.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/data-display/tabs.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/data-display/tabs/overview.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/data-display/tabs/overview.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/data-display/tabs/overview.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/data-display/tabs/overview.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/data-display/tag.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/data-display/tag.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/data-display/tag.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/data-display/tag.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/data-display/tag/overview.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/data-display/tag/overview.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/data-display/tag/overview.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/data-display/tag/overview.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/data-display/tooltip.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/data-display/tooltip.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/data-display/tooltip.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/data-display/tooltip.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/data-display/tooltip/overview.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/data-display/tooltip/overview.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/data-display/tooltip/overview.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/data-display/tooltip/overview.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/data-input.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/data-input.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/data-input.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/data-input.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/data-input/checkbox.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/data-input/checkbox.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/data-input/checkbox.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/data-input/checkbox.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/data-input/checkbox/overview.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/data-input/checkbox/overview.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/data-input/checkbox/overview.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/data-input/checkbox/overview.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/data-input/input.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/data-input/input.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/data-input/input.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/data-input/input.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/data-input/input/overview.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/data-input/input/overview.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/data-input/input/overview.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/data-input/input/overview.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/data-input/radio.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/data-input/radio.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/data-input/radio.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/data-input/radio.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/data-input/radio/overview.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/data-input/radio/overview.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/data-input/radio/overview.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/data-input/radio/overview.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/data-input/select.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/data-input/select.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/data-input/select.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/data-input/select.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/data-input/select/overview.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/data-input/select/overview.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/data-input/select/overview.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/data-input/select/overview.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/data-input/switch.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/data-input/switch.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/data-input/switch.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/data-input/switch.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/data-input/switch/overview.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/data-input/switch/overview.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/data-input/switch/overview.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/data-input/switch/overview.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/data-input/textarea.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/data-input/textarea.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/data-input/textarea.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/data-input/textarea.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/data-input/textarea/overview.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/data-input/textarea/overview.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/data-input/textarea/overview.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/data-input/textarea/overview.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/divider.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/divider.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/divider.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/divider.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/divider/overview.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/divider/overview.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/divider/overview.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/divider/overview.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/drawer.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/drawer.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/drawer.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/drawer.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/drawer/overview.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/drawer/overview.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/drawer/overview.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/drawer/overview.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/feedback.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/feedback.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/feedback.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/feedback.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/feedback/badge.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/feedback/badge.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/feedback/badge.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/feedback/badge.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/feedback/badge/overview.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/feedback/badge/overview.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/feedback/badge/overview.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/feedback/badge/overview.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/feedback/notification.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/feedback/notification.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/feedback/notification.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/feedback/notification.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/feedback/notification/overview.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/feedback/notification/overview.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/feedback/notification/overview.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/feedback/notification/overview.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/header.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/header.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/header.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/header.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/header/overview.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/header/overview.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/header/overview.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/header/overview.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/infotext.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/infotext.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/infotext.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/infotext.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/infotext/overview.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/infotext/overview.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/infotext/overview.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/infotext/overview.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/input.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/input.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/input.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/input.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/input/overview.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/input/overview.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/input/overview.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/input/overview.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/layout.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/layout.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/layout.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/layout.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/layout/card.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/layout/card.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/layout/card.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/layout/card.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/layout/card/overview.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/layout/card/overview.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/layout/card/overview.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/layout/card/overview.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/layout/divider.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/layout/divider.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/layout/divider.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/layout/divider.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/layout/divider/overview.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/layout/divider/overview.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/layout/divider/overview.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/layout/divider/overview.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/layout/drawer.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/layout/drawer.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/layout/drawer.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/layout/drawer.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/layout/drawer/overview.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/layout/drawer/overview.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/layout/drawer/overview.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/layout/drawer/overview.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/layout/header.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/layout/header.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/layout/header.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/layout/header.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/layout/header/overview.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/layout/header/overview.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/layout/header/overview.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/layout/header/overview.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/layout/section.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/layout/section.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/layout/section.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/layout/section.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/layout/section/overview.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/layout/section/overview.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/layout/section/overview.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/layout/section/overview.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/link.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/layout/stack.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/link.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/layout/stack.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/link/overview.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/layout/stack/overview.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/link/overview.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/layout/stack/overview.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/navigation-item.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/link.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/navigation-item.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/link.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/navigation-item/overview.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/link/overview.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/navigation-item/overview.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/link/overview.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/navigation/navigation-item.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/navigation-item.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/navigation/navigation-item.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/navigation-item.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/navigation/navigation-item/overview.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/navigation-item/overview.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/navigation/navigation-item/overview.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/navigation-item/overview.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/navigation.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/navigation.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/navigation.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/navigation.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/navigation/navigation.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/navigation/navigation-item.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/navigation/navigation.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/navigation/navigation-item.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/navigation/navigation/overview.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/navigation/navigation-item/overview.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/navigation/navigation/overview.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/navigation/navigation-item/overview.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/navigation/overview.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/navigation/navigation.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/navigation/overview.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/navigation/navigation.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/notification/overview.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/navigation/navigation/overview.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/notification/overview.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/navigation/navigation/overview.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/popover/overview.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/navigation/overview.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/popover/overview.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/navigation/overview.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/notification.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/notification.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/notification.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/notification.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/radio/overview.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/notification/overview.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/radio/overview.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/notification/overview.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/popover.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/popover.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/popover.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/popover.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/section/overview.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/popover/overview.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/section/overview.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/popover/overview.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/radio.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/radio.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/radio.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/radio.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/select/overview.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/radio/overview.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/select/overview.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/radio/overview.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/section.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/section.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/section.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/section.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/switch/overview.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/section/overview.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/switch/overview.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/section/overview.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/select.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/select.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/select.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/select.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/tab-item/overview.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/select/overview.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/tab-item/overview.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/select/overview.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/switch.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/stack.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/switch.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/stack.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/tabs/overview.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/stack/overview.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/tabs/overview.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/stack/overview.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/tab-item.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/switch.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/tab-item.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/switch.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/tag/overview.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/switch/overview.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/tag/overview.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/switch/overview.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/tabs.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/tab-item.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/tabs.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/tab-item.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/textarea/overview.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/tab-item/overview.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/textarea/overview.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/tab-item/overview.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/tag.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/tabs.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/tag.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/tabs.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/tooltip/overview.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/tabs/overview.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/tooltip/overview.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/tabs/overview.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/textarea.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/tag.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/textarea.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/tag.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/utilities/popover/overview.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/tag/overview.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/utilities/popover/overview.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/tag/overview.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/tooltip.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/textarea.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/tooltip.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/textarea.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/utilities.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/textarea/overview.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/utilities.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/textarea/overview.json diff --git a/review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/utilities/popover.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/tooltip.json similarity index 100% rename from review/feat-figma-properties-alignment/_next/data/e1F3yPhoLm5CS9EQpHopy/components/utilities/popover.json rename to review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/tooltip.json diff --git a/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/tooltip/overview.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/tooltip/overview.json new file mode 100644 index 00000000000..70c8d10acbd --- /dev/null +++ b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/tooltip/overview.json @@ -0,0 +1 @@ +{"pageProps":{},"__N_SSG":true} \ No newline at end of file diff --git a/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/utilities.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/utilities.json new file mode 100644 index 00000000000..70c8d10acbd --- /dev/null +++ b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/utilities.json @@ -0,0 +1 @@ +{"pageProps":{},"__N_SSG":true} \ No newline at end of file diff --git a/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/utilities/popover.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/utilities/popover.json new file mode 100644 index 00000000000..70c8d10acbd --- /dev/null +++ b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/utilities/popover.json @@ -0,0 +1 @@ +{"pageProps":{},"__N_SSG":true} \ No newline at end of file diff --git a/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/utilities/popover/overview.json b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/utilities/popover/overview.json new file mode 100644 index 00000000000..70c8d10acbd --- /dev/null +++ b/review/feat-figma-properties-alignment/_next/data/vlMNn5T3XxIMrDQGXp5rD/components/utilities/popover/overview.json @@ -0,0 +1 @@ +{"pageProps":{},"__N_SSG":true} \ No newline at end of file diff --git a/review/feat-figma-properties-alignment/_next/static/chunks/1446-deb4f55cc57b2c82.js b/review/feat-figma-properties-alignment/_next/static/chunks/1446-deb4f55cc57b2c82.js new file mode 100644 index 00000000000..35f8deadb39 --- /dev/null +++ b/review/feat-figma-properties-alignment/_next/static/chunks/1446-deb4f55cc57b2c82.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[1446],{50402:(e,a,t)=>{t.d(a,{A:()=>s});var i=t(31085),n=t(14041),l=t(5188),r=t(81947);let s=(0,n.forwardRef)(function(e,a){let t=a||(0,n.useRef)(a),[s,d]=(0,n.useState)(()=>r.Ye),[c,o]=(0,n.useState)(()=>!1);return(0,n.useEffect)(()=>{d(e.id||"accordion-item-"+(0,l.uR)()),e.defaultOpen&&o(e.defaultOpen)},[]),(0,i.jsx)("li",{id:s,className:(0,l.xF)("db-accordion-item",e.className),children:(0,i.jsxs)("details",{"aria-disabled":(0,l.EB)(e.disabled),ref:t,...(0,l.MD)(e,[]),open:c,children:[(0,i.jsxs)("summary",{onClick:a=>(function(a){null==a||a.preventDefault();let t=!c;e.onToggle&&e.onToggle(t),o(t)})(a),children:[e.headlinePlain?(0,i.jsx)(i.Fragment,{children:e.headlinePlain}):null,e.headlinePlain?null:(0,i.jsx)(i.Fragment,{children:e.headline})]}),(0,i.jsx)("div",{children:e.content?(0,i.jsx)(i.Fragment,{children:e.content}):(0,i.jsx)(i.Fragment,{children:e.children})})]})})})},54116:(e,a,t)=>{t.d(a,{A:()=>d});var i=t(31085),n=t(14041),l=t(5188),r=t(50402),s=t(81947);let d=(0,n.forwardRef)(function(e,a){var t;let d=a||(0,n.useRef)(a),[c,o]=(0,n.useState)(()=>s.Ye),[u,v]=(0,n.useState)(()=>""),[h,m]=(0,n.useState)(()=>!1),[b,f]=(0,n.useState)(()=>!1);return(0,n.useEffect)(()=>{o(e.id||"accordion-"+(0,l.uR)()),m(!0),f(!0)},[]),(0,n.useEffect)(()=>{h&&("single"===e.behaviour?e.name?u!==e.name&&v(e.name):u!==c&&c&&v(c):v(""))},[h,e.name,e.behaviour,c]),(0,n.useEffect)(()=>{if(null==d?void 0:d.current){let e=d.current.getElementsByTagName("details");if(e)for(let a of Array.from(e))""===u?a.removeAttribute("name"):a.name=u}},[d.current,u]),(0,n.useEffect)(()=>{if(d.current&&b){var a;if((null==e?void 0:e.initOpenIndex)&&(null===(a=e.initOpenIndex)||void 0===a?void 0:a.length)>0){let a=d.current.getElementsByTagName("details");if(a){let t="single"===e.behaviour&&e.initOpenIndex.length>1?[e.initOpenIndex[0]]:e.initOpenIndex;Array.from(a).forEach((e,a)=>{t.includes(a)&&(e.open=!0)})}}f(!1)}},[d.current,b,e.initOpenIndex]),(0,i.jsxs)("ul",{ref:d,...(0,l.MD)(e,[]),id:c,className:(0,l.xF)("db-accordion",e.className),"data-variant":e.variant,children:[e.items?null:(0,i.jsx)(i.Fragment,{children:e.children}),e.items?(0,i.jsx)(i.Fragment,{children:null===(t=function(e){try{if("string"==typeof e)return JSON.parse(e);return e}catch(e){console.error(e)}return[]}(e.items))||void 0===t?void 0:t.map((e,a)=>(0,i.jsx)(r.A,{headlinePlain:e.headlinePlain,disabled:e.disabled,content:e.content},"accordion-item-".concat(a)))}):null]})})},22076:(e,a,t)=>{t.d(a,{A:()=>s});var i=t(31085),n=t(14041),l=t(5188),r=t(81947);let s=(0,n.forwardRef)(function(e,a){var t,s;let d=a||(0,n.useRef)(a),[c,o]=(0,n.useState)(()=>!1);return(0,n.useEffect)(()=>{o(!0)},[]),(0,n.useEffect)(()=>{if(d.current&&c){var a;if(null===(a=e.placement)||void 0===a?void 0:a.startsWith("corner")){let e=d.current.parentElement;e&&e.localName.includes("badge")&&(e=e.parentElement),e&&e.setAttribute("data-has-badge","true")}}},[d.current,c]),(0,i.jsx)("span",{ref:d,...(0,l.MD)(e,[]),id:e.id,className:(0,l.xF)("db-badge",e.className),"data-semantic":e.semantic,"data-size":e.size,"data-emphasis":e.emphasis,"data-placement":e.placement,"data-label":(null===(t=e.placement)||void 0===t?void 0:t.startsWith("corner"))&&(null!==(s=e.label)&&void 0!==s?s:r.$6),children:e.text?(0,i.jsx)(i.Fragment,{children:e.text}):(0,i.jsx)(i.Fragment,{children:e.children})})})},23944:(e,a,t)=>{t.d(a,{A:()=>s});var i=t(31085),n=t(14041),l=t(5188),r=t(81947);let s=(0,n.forwardRef)(function(e,a){var t;let s=a||(0,n.useRef)(a);return(0,i.jsx)("div",{ref:s,...(0,l.MD)(e,[]),"data-icon":e.hideLogo?"none":null!==(t=e.icon)&&void 0!==t?t:r.iT,"data-hide-icon":(0,l.Oh)(e.showIcon),id:e.id,className:(0,l.xF)("db-brand",e.className),children:e.text?(0,i.jsx)(i.Fragment,{children:e.text}):(0,i.jsx)(i.Fragment,{children:e.children})})})},95374:(e,a,t)=>{t.d(a,{A:()=>r});var i=t(31085),n=t(14041),l=t(5188);let r=(0,n.forwardRef)(function(e,a){let t=a||(0,n.useRef)(a);return(0,i.jsx)("button",{ref:t,...(0,l.MD)(e,[]),id:e.id,className:(0,l.xF)("db-button",e.className),type:e.type||"button",disabled:e.disabled,"aria-label":e.label,"data-icon":e.icon,"data-hide-icon":(0,l.Oh)(e.showIcon),"data-size":e.size,"data-state":e.state,"data-width":e.width,"data-variant":e.variant,"data-no-text":(0,l.EB)(e.noText),name:e.name,value:e.value,"aria-describedby":e.describedbyid,"aria-expanded":e.ariaexpanded,"aria-pressed":e.ariapressed,onClick:a=>{e.onClick&&e.onClick(a)},children:e.text?(0,i.jsx)(i.Fragment,{children:e.text}):(0,i.jsx)(i.Fragment,{children:e.children})})})},64286:(e,a,t)=>{t.d(a,{A:()=>r});var i=t(31085),n=t(14041),l=t(5188);let r=(0,n.forwardRef)(function(e,a){let t=a||(0,n.useRef)(a);return(0,i.jsx)("div",{ref:t,...(0,l.MD)(e,[]),id:e.id,className:(0,l.xF)("db-card",e.className),"data-behaviour":e.behaviour,"data-elevation-level":e.elevationLevel,"data-spacing":e.spacing,role:"interactive"===e.behaviour?"button":void 0,tabIndex:"interactive"===e.behaviour?0:void 0,onClick:a=>{e.onClick&&e.onClick(a)},children:e.children})})},39892:(e,a,t)=>{t.d(a,{A:()=>c});var i=t(31085),n=t(14041),l=t(5188),r=t(81947),s=t(60293),d=t(64140);let c=(0,n.forwardRef)(function(e,a){var t,c,o,u;let v=a||(0,n.useRef)(a),[h,m]=(0,n.useState)(()=>!1),[b,f]=(0,n.useState)(()=>void 0),[g,p]=(0,n.useState)(()=>void 0),[x,N]=(0,n.useState)(()=>void 0),[E,A]=(0,n.useState)(()=>void 0),[R,_]=(0,n.useState)(()=>""),[L,S]=(0,n.useState)(()=>"");return(0,n.useEffect)(()=>{var a;m(!0);let t=null!==(a=e.id)&&void 0!==a?a:"checkbox-".concat((0,l.uR)());f(t),p(t+r.kc),N(t+r.Pm),A(t+r.e5)},[]),(0,n.useEffect)(()=>{if(b){let a=b+r.kc;p(a),N(b+r.Pm),A(b+r.e5),e.message&&_(a)}},[b]),(0,n.useEffect)(()=>{if(h&&document&&b){var a;let t=null===(a=document)||void 0===a?void 0:a.getElementById(b);t&&(void 0!=e.checked&&(t.checked=e.checked),void 0!==e.indeterminate&&(t.indeterminate=e.indeterminate),m(!1))}},[h,e.indeterminate,e.checked]),(0,i.jsxs)("div",{className:(0,l.xF)("db-checkbox",e.className),"data-size":e.size,"data-variant":e.variant,children:[(0,i.jsxs)("label",{htmlFor:b,children:[(0,i.jsx)("input",{type:"checkbox","aria-invalid":"invalid"===e.customValidity,"data-custom-validity":e.customValidity,ref:v,...(0,l.MD)(e,[]),id:b,name:e.name,checked:e.checked,disabled:e.disabled,value:e.value,required:e.required,onChange:a=>{var t,i,n,s,d,c;e.onChange&&e.onChange(a),e.change&&e.change(a),(null===(t=v.current)||void 0===t?void 0:t.validity.valid)&&"invalid"!==e.customValidity?"valid"===e.customValidity||(null===(i=v.current)||void 0===i?void 0:i.validity.valid)&&e.required?(_(x),(0,l.LB)()&&(S(null!==(c=e.validMessage)&&void 0!==c?c:r.r2),(0,l.cb)(()=>S(""),1e3))):e.message?_(g):_(""):(_(E),(0,l.LB)()&&(S(null!==(d=null!==(s=e.invalidMessage)&&void 0!==s?s:null===(n=v.current)||void 0===n?void 0:n.validationMessage)&&void 0!==d?d:r.MA),(0,l.cb)(()=>S(""),1e3)))},onBlur:a=>{e.onBlur&&e.onBlur(a),e.blur&&e.blur(a)},onFocus:a=>{e.onFocus&&e.onFocus(a),e.focus&&e.focus(a)},"aria-describedby":R}),e.label?(0,i.jsx)(i.Fragment,{children:e.label}):(0,i.jsx)(i.Fragment,{children:e.children})]}),(0,s.SH)(e.message,e.showMessage)?(0,i.jsx)(d.A,{size:"small",icon:e.messageIcon,id:g,children:e.message}):null,(0,i.jsx)(d.A,{size:"small",semantic:"successful",id:x,children:null!==(c=e.validMessage)&&void 0!==c?c:r.r2}),(0,i.jsx)(d.A,{size:"small",semantic:"critical",id:E,children:null!==(u=null!==(o=e.invalidMessage)&&void 0!==o?o:null===(t=v.current)||void 0===t?void 0:t.validationMessage)&&void 0!==u?u:r.MA}),(0,i.jsx)("span",{"data-visually-hidden":"true",role:"status",children:L})]})})},40956:(e,a,t)=>{t.d(a,{A:()=>r});var i=t(31085),n=t(14041),l=t(5188);let r=(0,n.forwardRef)(function(e,a){let t=a||(0,n.useRef)(a);return(0,i.jsx)("div",{ref:t,...(0,l.MD)(e,[]),id:e.id,"data-margin":e.margin,"data-variant":e.variant,"data-emphasis":e.emphasis,"data-width":e.width,className:(0,l.xF)("db-divider",e.className)})})},87612:(e,a,t)=>{t.d(a,{A:()=>d});var i=t(31085),n=t(14041),l=t(95374),r=t(81947),s=t(5188);let d=(0,n.forwardRef)(function(e,a){var t;let d=a||(0,n.useRef)(a),c=(0,n.useRef)(null);function o(a){"Escape"===a.key&&a.preventDefault(),("close"===a||"Escape"===a.key||"DIALOG"===a.target.nodeName&&"click"===a.type&&"none"!==e.backdrop)&&e.onClose&&e.onClose(a)}function u(){(null==d?void 0:d.current)&&(e.open&&!d.current.open&&(c.current&&(c.current.hidden=!1),"none"===e.backdrop||"inside"===e.variant?d.current.show():d.current.showModal()),!e.open&&d.current.open&&(c.current&&(c.current.hidden=!0),(0,s.cb)(()=>{var e;c.current&&(c.current.hidden=!1),null===(e=d.current)||void 0===e||e.close()},401)))}return(0,n.useEffect)(()=>{u()},[]),(0,n.useEffect)(()=>{u()},[e.open]),(0,i.jsx)("dialog",{className:"db-drawer",id:e.id,ref:d,...(0,s.MD)(e,["onClose"]),onClick:e=>{o(e)},onKeyDown:e=>o(e),"data-backdrop":e.backdrop,"data-variant":e.variant,children:(0,i.jsxs)("article",{ref:c,className:(0,s.xF)("db-drawer-container",e.className),"data-spacing":e.spacing,"data-width":e.width,"data-direction":e.direction,"data-rounded":e.rounded,children:[(0,i.jsxs)("header",{className:"db-drawer-header",children:[(0,i.jsx)("div",{className:"db-drawer-header-text",children:(0,i.jsx)(i.Fragment,{children:e.drawerHeader})}),(0,i.jsx)(l.A,{className:"button-close-drawer",icon:"cross",variant:"ghost",id:e.closeButtonId,noText:!0,onClick:e=>o("close"),children:null!==(t=e.closeButtonText)&&void 0!==t?t:r.mt})]}),(0,i.jsx)("div",{className:"db-drawer-content",children:e.children})]})})})},23116:(e,a,t)=>{t.d(a,{A:()=>o});var i=t(31085),n=t(14041),l=t(5188),r=t(95374),s=t(87612),d=t(81947),c=t(44608);let o=(0,n.forwardRef)(function(e,a){var t;let o=a||(0,n.useRef)(a),[u,v]=(0,n.useState)(()=>d.Ye),[h,m]=(0,n.useState)(()=>!1),[b,f]=(0,n.useState)(()=>!1);function g(){e.onToggle&&e.onToggle(!e.drawerOpen)}return(0,n.useEffect)(()=>{m(!0),v(e.id||"header-"+(0,l.uR)())},[]),(0,n.useEffect)(()=>{if(h&&document&&u&&e.forceMobile){let e=document.getElementById(u);e&&(0,l.AU)(e,{key:"data-force-mobile",value:"true"}),f(!0)}},[h]),(0,i.jsxs)("header",{ref:o,...(0,l.MD)(e,[]),className:(0,l.xF)("db-header",e.className),id:u,"data-width":e.width,"data-on-forcing-mobile":e.forceMobile&&!b,children:[(0,i.jsxs)(s.A,{className:"db-header-drawer",spacing:"small",rounded:!0,open:e.drawerOpen,onClose:()=>g(),children:[(0,i.jsxs)("div",{className:"db-header-drawer-navigation",children:[(0,i.jsx)("div",{className:"db-header-navigation",onClick:e=>{(0,c.JR)(e)&&g()},children:e.children}),(0,i.jsx)("div",{className:"db-header-meta-navigation",children:(0,i.jsx)(i.Fragment,{children:e.metaNavigation})})]}),(0,i.jsx)("div",{className:"db-header-secondary-action",children:(0,i.jsx)(i.Fragment,{children:e.secondaryAction})})]}),(0,i.jsx)("div",{className:"db-header-meta-navigation",children:(0,i.jsx)(i.Fragment,{children:e.metaNavigation})}),(0,i.jsxs)("div",{className:"db-header-navigation-bar",children:[(0,i.jsx)("div",{className:"db-header-brand-container",children:(0,i.jsx)(i.Fragment,{children:e.brand})}),(0,i.jsxs)("div",{className:"db-header-navigation-container",children:[(0,i.jsx)("div",{className:"db-header-navigation",children:e.children}),(0,i.jsx)("div",{className:"db-header-primary-action",children:(0,i.jsx)(i.Fragment,{children:e.primaryAction})})]}),(0,i.jsxs)("div",{className:"db-header-action-container",children:[(0,i.jsx)("div",{className:"db-header-burger-menu-container",children:(0,i.jsx)(r.A,{icon:"menu",variant:"ghost",id:u+"-burger-menu",noText:!0,onClick:()=>g(),children:null!==(t=e.burgerMenuLabel)&&void 0!==t?t:d.Mv})}),(0,i.jsx)("div",{className:"db-header-secondary-action",children:(0,i.jsx)(i.Fragment,{children:e.secondaryAction})})]})]})]})})},64140:(e,a,t)=>{t.d(a,{A:()=>r});var i=t(31085),n=t(14041),l=t(5188);let r=(0,n.forwardRef)(function(e,a){var t;let r=a||(0,n.useRef)(a);return(0,i.jsx)("span",{ref:r,...(0,l.MD)(e,[]),id:e.id,className:(0,l.xF)("db-infotext",e.className),"data-icon":e.icon,"data-semantic":e.semantic,"data-size":e.size,"data-hide-icon-after":(0,l.Oh)(null===(t=e.showIcon)||void 0===t||t),children:e.text?(0,i.jsx)(i.Fragment,{children:e.text}):(0,i.jsx)(i.Fragment,{children:e.children})})})},59916:(e,a,t)=>{t.d(a,{A:()=>c});var i=t(31085),n=t(14041),l=t(5188),r=t(81947),s=t(64140),d=t(60293);let c=(0,n.forwardRef)(function(e,a){var t,c,o,u,v,h,m,b;let f=a||(0,n.useRef)(a),[g,p]=(0,n.useState)(()=>void 0),[x,N]=(0,n.useState)(()=>void 0),[E,A]=(0,n.useState)(()=>void 0),[R,_]=(0,n.useState)(()=>void 0),[L,S]=(0,n.useState)(()=>void 0),[j,F]=(0,n.useState)(()=>""),[B,y]=(0,n.useState)(()=>""),[I,w]=(0,n.useState)(()=>"");return(0,n.useEffect)(()=>{var a;let t=null!==(a=e.id)&&void 0!==a?a:"input-".concat((0,l.uR)());p(t),N(t+r.kc),A(t+r.Pm),_(t+r.e5),S(t+r.x9)},[]),(0,n.useEffect)(()=>{if(g){var a;let t=g+r.kc;N(t),A(g+r.Pm),_(g+r.e5),S(null!==(a=e.dataListId)&&void 0!==a?a:g+r.x9),e.message&&F(t)}},[g]),(0,n.useEffect)(()=>{y(e.value)},[e.value]),(0,i.jsxs)("div",{className:(0,l.xF)("db-input",e.className),"data-variant":e.variant,"data-hide-icon":(0,l.Oh)(e.showIcon),"data-icon":e.icon,"data-icon-after":e.iconAfter,"data-hide-icon-after":(0,l.Oh)(e.showIcon),children:[(0,i.jsx)("label",{htmlFor:g,children:null!==(o=e.label)&&void 0!==o?o:r.$6}),(0,i.jsx)("input",{"aria-invalid":"invalid"===e.customValidity,"data-custom-validity":e.customValidity,ref:f,...(0,l.MD)(e,[]),id:g,name:e.name,type:e.type||"text",placeholder:null!==(u=e.placeholder)&&void 0!==u?u:r.GW,disabled:e.disabled,required:e.required,step:e.step,value:e.value,maxLength:e.maxLength,minLength:e.minLength,max:e.max,min:e.min,readOnly:e.readOnly,form:e.form,pattern:e.pattern,autoComplete:e.autocomplete,onInput:a=>{e.onInput&&e.onInput(a),e.input&&e.input(a)},onChange:a=>{var t,i,n,s,d,c;e.onChange&&e.onChange(a),e.change&&e.change(a),(null===(t=f.current)||void 0===t?void 0:t.validity.valid)&&"invalid"!==e.customValidity?"valid"===e.customValidity||(null===(i=f.current)||void 0===i?void 0:i.validity.valid)&&(e.required||e.minLength||e.maxLength||e.pattern)?(F(E),(0,l.LB)()&&(w(null!==(c=e.validMessage)&&void 0!==c?c:r.r2),(0,l.cb)(()=>w(""),1e3))):e.message?F(x):F(""):(F(R),(0,l.LB)()&&(w(null!==(d=null!==(s=e.invalidMessage)&&void 0!==s?s:null===(n=f.current)||void 0===n?void 0:n.validationMessage)&&void 0!==d?d:r.MA),(0,l.cb)(()=>w(""),1e3)))},onBlur:a=>{e.onBlur&&e.onBlur(a),e.blur&&e.blur(a)},onFocus:a=>{e.onFocus&&e.onFocus(a),e.focus&&e.focus(a)},list:e.dataList&&L,"aria-describedby":j}),e.dataList?(0,i.jsx)("datalist",{id:L,children:null===(b=e.dataList,t=Array.from(((0,l.dr)(b)?b.map(e=>({value:e,label:void 0})):b)||[]))||void 0===t?void 0:t.map(e=>(0,i.jsx)("option",{value:e.value,children:e.label},L+"-option-"+e.value))}):null,e.children,(0,d.SH)(e.message,e.showMessage)?(0,i.jsx)(s.A,{size:"small",icon:e.messageIcon,id:x,children:e.message}):null,(0,i.jsx)(s.A,{size:"small",semantic:"successful",id:E,children:null!==(v=e.validMessage)&&void 0!==v?v:r.r2}),(0,i.jsx)(s.A,{size:"small",semantic:"critical",id:R,children:null!==(m=null!==(h=e.invalidMessage)&&void 0!==h?h:null===(c=f.current)||void 0===c?void 0:c.validationMessage)&&void 0!==m?m:r.MA}),(0,i.jsx)("span",{"data-visually-hidden":"true",role:"status",children:I})]})})},13210:(e,a,t)=>{t.d(a,{A:()=>s});var i=t(31085),n=t(14041),l=t(5188),r=t(81947);let s=(0,n.forwardRef)(function(e,a){var t;let s=a||(0,n.useRef)(a),[d,c]=(0,n.useState)(()=>r.Ye);return(0,i.jsx)("a",{ref:s,...(0,l.MD)(e,[]),id:e.id,className:(0,l.xF)("db-link",e.className),href:e.href,target:e.target,rel:e.rel,role:e.role,hrefLang:e.hreflang,"aria-disabled":(0,l.EB)(e.disabled),tabIndex:e.disabled?-1:0,"aria-selected":e.selected,"aria-label":e.label,"aria-current":e.current,"data-size":e.size,"data-hide-icon-after":(0,l.Oh)(null===(t=e.showIcon)||void 0===t||t),"data-variant":e.variant,"data-content":e.content||"internal",onClick:a=>{e.onClick&&e.onClick(a)},children:e.text?(0,i.jsx)(i.Fragment,{children:e.text}):(0,i.jsx)(i.Fragment,{children:e.children})})})},6900:(e,a,t)=>{t.d(a,{A:()=>c});var i=t(31085),n=t(14041),l=t(95374),r=t(5188),s=t(44608),d=t(81947);let c=(0,n.forwardRef)(function(e,a){var t;let c=a||(0,n.useRef)(a),[o,u]=(0,n.useState)(()=>!1),[v,h]=(0,n.useState)(()=>!1),[m,b]=(0,n.useState)(()=>!0),[f,g]=(0,n.useState)(()=>!1),[p,x]=(0,n.useState)(()=>"sub-navigation-"+(0,r.uR)()),[N,E]=(0,n.useState)(()=>void 0);return(0,n.useEffect)(()=>{u(!0)},[]),(0,n.useEffect)(()=>{void 0!==e.subNavigationExpanded&&g(!!e.subNavigationExpanded)},[e.subNavigationExpanded]),(0,n.useEffect)(()=>{!function(){if(o&&document&&p){var e,a;let t=null===(e=document)||void 0===e?void 0:e.getElementById(p);t&&((null===(a=t.children)||void 0===a?void 0:a.length)>0?(h(!0),N||E(new s.D1(c.current,t))):b(!1))}}()},[o]),(0,i.jsxs)("li",{ref:c,...(0,r.MD)(e,[]),id:e.id,onMouseOver:e=>null==N?void 0:N.enableFollow(),onMouseLeave:e=>null==N?void 0:N.disableFollow(),onMouseMove:e=>null==N?void 0:N.followByMouseEvent(e),className:(0,r.xF)("db-navigation-item",e.className),"data-width":e.width,"data-icon":e.icon,"data-hide-icon":(0,r.Oh)(e.showIcon),"data-active":e.active,"aria-disabled":(0,r.EB)(e.disabled),children:[m?null:(0,i.jsx)(i.Fragment,{children:e.text?(0,i.jsx)(i.Fragment,{children:e.text}):(0,i.jsx)(i.Fragment,{children:e.children})}),m?(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)("button",{className:"db-navigation-item-expand-button","aria-haspopup":v,"aria-expanded":f,disabled:e.disabled,onClick:a=>{e.onClick&&e.onClick(a),v&&g(!0)},children:e.text?(0,i.jsx)(i.Fragment,{children:e.text}):(0,i.jsx)(i.Fragment,{children:e.children})}),(0,i.jsxs)("menu",{className:"db-sub-navigation",id:p,children:[v?(0,i.jsx)("div",{className:"db-mobile-navigation-back",children:(0,i.jsx)(l.A,{icon:"arrow_left",variant:"ghost",id:e.backButtonId,onClick:e=>{e.stopPropagation(),g(!1)},children:null!==(t=e.backButtonText)&&void 0!==t?t:d.sR})}):null,(0,i.jsx)(i.Fragment,{children:e.subNavigation})]})]}):null]})})},61338:(e,a,t)=>{t.d(a,{A:()=>s});var i=t(31085),n=t(14041),l=t(5188),r=t(81947);let s=(0,n.forwardRef)(function(e,a){let t=a||(0,n.useRef)(a),[s,d]=(0,n.useState)(()=>r.Ye);return(0,n.useEffect)(()=>{d(e.id||"navigation-"+(0,l.uR)())},[]),(0,i.jsx)("nav",{ref:t,...(0,l.MD)(e,[]),id:s,"aria-labelledby":e.labelledBy,className:(0,l.xF)("db-navigation",e.className),children:(0,i.jsx)("menu",{children:e.children})})})},91836:(e,a,t)=>{t.d(a,{A:()=>d});var i=t(31085),n=t(14041),l=t(95374),r=t(81947),s=t(5188);let d=(0,n.forwardRef)(function(e,a){var t;let d=a||(0,n.useRef)(a);return(0,i.jsxs)("article",{ref:d,...(0,s.MD)(e,[]),id:e.id,className:(0,s.xF)("db-notification",e.className),"aria-live":e.ariaLive,"data-semantic":e.semantic,"data-variant":e.variant,"data-icon":e.icon,"data-hide-icon":(0,s.Oh)(e.showIcon),"data-link-variant":e.linkVariant,children:[(0,i.jsx)(i.Fragment,{children:e.image}),e.headline?(0,i.jsx)("header",{children:e.headline}):null,(0,i.jsx)("p",{children:e.text?(0,i.jsx)(i.Fragment,{children:e.text}):(0,i.jsx)(i.Fragment,{children:e.children})}),e.timestamp?(0,i.jsx)("span",{children:e.timestamp}):null,(0,i.jsx)(i.Fragment,{children:e.link}),"permanent"!==e.behaviour?(0,i.jsx)(l.A,{icon:"cross",variant:"ghost",size:"small",id:e.closeButtonId,noText:!0,onClick:a=>{e.onClose&&e.onClose()},children:null!==(t=e.closeButtonText)&&void 0!==t?t:r.mt}):null]})})},36428:(e,a,t)=>{t.d(a,{A:()=>r});var i=t(31085),n=t(14041),l=t(5188);let r=(0,n.forwardRef)(function(e,a){let t=a||(0,n.useRef)(a),[r,s]=(0,n.useState)(()=>!1),[d,c]=(0,n.useState)(()=>!1);function o(){if(c(!0),!t.current)return;let e=t.current.querySelector("article");e&&(0,l.ef)(e)}function u(e){let a=e.target;a.parentNode&&(a.parentNode.querySelector(":focus")===a||a.parentNode.querySelector(":focus-within")===a||a.parentNode.querySelector(":hover")===a)||c(!1)}function v(){if(null==t?void 0:t.current){let a=Array.from(t.current.children);if(a.length>=2){var e;let t=a[0];return t.tagName.includes("-")?(null===(e=t.children)||void 0===e?void 0:e.length)>0?t.children[0]:null:t}}return null}return(0,n.useEffect)(()=>{s(!0)},[]),(0,n.useEffect)(()=>{if(t.current&&r){let e=v();e&&(e.ariaHasPopup="true"),s(!1)}},[t.current,r]),(0,n.useEffect)(()=>{if(t.current){let e=v();e&&(e.ariaExpanded=(!!d).toString())}},[t.current,d]),(0,i.jsxs)("div",{ref:t,...(0,l.MD)(e,[]),id:e.id,className:(0,l.xF)("db-popover",e.className),onFocus:e=>o(),onBlur:e=>u(e),onMouseEnter:e=>o(),onMouseLeave:e=>u(e),children:[(0,i.jsx)(i.Fragment,{children:e.trigger}),(0,i.jsx)("article",{className:"db-popover-content","data-spacing":e.spacing,"data-gap":(0,l.EB)(e.gap),"data-animation":e.animation,"data-open":e.open,"data-delay":e.delay,"data-width":e.width,"data-placement":e.placement,children:e.children})]})})},85980:(e,a,t)=>{t.d(a,{A:()=>r});var i=t(31085),n=t(14041),l=t(5188);let r=(0,n.forwardRef)(function(e,a){let t=a||(0,n.useRef)(a),[r,s]=(0,n.useState)(()=>!1),[d,c]=(0,n.useState)(()=>void 0);return(0,n.useEffect)(()=>{var a;s(!0),c(null!==(a=e.id)&&void 0!==a?a:"radio-".concat((0,l.uR)()))},[]),(0,n.useEffect)(()=>{if(e.checked&&r&&document&&d){var a;let t=null===(a=document)||void 0===a?void 0:a.getElementById(d);t&&void 0!=e.checked&&(t.checked=!0)}},[r,e.checked]),(0,i.jsxs)("label",{"data-size":e.size,"data-variant":e.variant,className:(0,l.xF)("db-radio",e.className),htmlFor:d,children:[(0,i.jsx)("input",{type:"radio","aria-invalid":"invalid"===e.customValidity,"data-custom-validity":e.customValidity,ref:t,...(0,l.MD)(e,[]),id:d,name:e.name,checked:e.checked,disabled:e.disabled,"aria-describedby":e.describedbyid,value:e.value,required:e.required,onChange:a=>{e.onChange&&e.onChange(a),e.change&&e.change(a)},onBlur:a=>{e.onBlur&&e.onBlur(a),e.blur&&e.blur(a)},onFocus:a=>{e.onFocus&&e.onFocus(a),e.focus&&e.focus(a)}}),e.label?(0,i.jsx)(i.Fragment,{children:e.label}):(0,i.jsx)(i.Fragment,{children:e.children})]})})},12764:(e,a,t)=>{t.d(a,{A:()=>s});var i=t(31085),n=t(14041),l=t(5188),r=t(81947);let s=(0,n.forwardRef)(function(e,a){let t=a||(0,n.useRef)(a),[s,d]=(0,n.useState)(()=>r.Ye);return(0,n.useEffect)(()=>{d(e.id||"section-"+(0,l.uR)())},[]),(0,i.jsx)("section",{ref:t,...(0,l.MD)(e,[]),id:s,className:(0,l.xF)("db-section",e.className),"data-spacing":e.spacing||"medium","data-width":e.width,children:e.children})})},47982:(e,a,t)=>{t.d(a,{A:()=>c});var i=t(31085),n=t(14041),l=t(5188),r=t(81947),s=t(64140),d=t(60293);let c=(0,n.forwardRef)(function(e,a){var t,c,o,u,v,h,m;let b=a||(0,n.useRef)(a),[f,g]=(0,n.useState)(()=>void 0),[p,x]=(0,n.useState)(()=>void 0),[N,E]=(0,n.useState)(()=>void 0),[A,R]=(0,n.useState)(()=>void 0),[_,L]=(0,n.useState)(()=>""),[S,j]=(0,n.useState)(()=>""),[F,B]=(0,n.useState)(()=>""),[y,I]=(0,n.useState)(()=>!1),[w,C]=(0,n.useState)(()=>"");function T(e){var a;return null!==(a=e.label)&&void 0!==a?a:e.value.toString()}return(0,n.useEffect)(()=>{var a;I(!0);let t=null!==(a=e.id)&&void 0!==a?a:"select-".concat((0,l.uR)());g(t),x(t+r.kc),E(t+r.Pm),R(t+r.e5),L(t+r.mu)},[]),(0,n.useEffect)(()=>{if(f&&y){let a=f+r.kc,t=f+r.mu;x(a),E(f+r.Pm),R(f+r.e5),L(t),e.message?j(a):j(t),I(!1)}},[f,y]),(0,n.useEffect)(()=>{B(e.value)},[e.value]),(0,i.jsxs)("div",{className:(0,l.xF)("db-select",e.className),"data-variant":e.variant,"data-icon":e.icon,"data-hide-icon":(0,l.Oh)(e.showIcon),children:[(0,i.jsx)("label",{htmlFor:f,children:null!==(o=e.label)&&void 0!==o?o:r.$6}),(0,i.jsxs)("select",{"aria-invalid":"invalid"===e.customValidity,"data-custom-validity":e.customValidity,ref:b,...(0,l.MD)(e,[]),required:e.required,disabled:e.disabled,id:f,name:e.name,value:e.value,autoComplete:e.autocomplete,onInput:a=>{e.onInput&&e.onInput(a),e.input&&e.input(a)},onClick:a=>{e.onClick&&e.onClick(a)},onChange:a=>{var t,i,n,s,d,c;e.onChange&&e.onChange(a),e.change&&e.change(a),(null===(t=b.current)||void 0===t?void 0:t.validity.valid)&&"invalid"!==e.customValidity?"valid"===e.customValidity||(null===(i=b.current)||void 0===i?void 0:i.validity.valid)&&e.required?(j(N),(0,l.LB)()&&(C(null!==(c=e.validMessage)&&void 0!==c?c:r.r2),(0,l.cb)(()=>C(""),1e3))):e.message?j(p):j(_):(j(A),(0,l.LB)()&&(C(null!==(d=null!==(s=e.invalidMessage)&&void 0!==s?s:null===(n=b.current)||void 0===n?void 0:n.validationMessage)&&void 0!==d?d:r.MA),(0,l.cb)(()=>C(""),1e3)))},onBlur:a=>{e.onBlur&&e.onBlur(a),e.blur&&e.blur(a)},onFocus:a=>{e.onFocus&&e.onFocus(a),e.focus&&e.focus(a)},"aria-describedby":S,children:[(0,i.jsx)("option",{hidden:!0}),e.options?(0,i.jsx)(n.Fragment,{children:null===(t=e.options)||void 0===t?void 0:t.map(e=>{var a;return(0,i.jsxs)(n.Fragment,{children:[e.options?(0,i.jsx)("optgroup",{label:T(e),children:null===(a=e.options)||void 0===a?void 0:a.map(e=>(0,i.jsx)("option",{value:e.value,disabled:e.disabled,children:T(e)},e.value.toString()))}):null,e.options?null:(0,i.jsx)("option",{value:e.value,disabled:e.disabled,children:T(e)})]},(0,l.uR)())})},(0,l.uR)()):null,e.children]}),(0,i.jsx)("span",{id:_,children:null!==(u=e.placeholder)&&void 0!==u?u:e.label}),(0,d.SH)(e.message,e.showMessage)?(0,i.jsx)(s.A,{size:"small",icon:e.messageIcon,id:p,children:e.message}):null,(0,i.jsx)(s.A,{size:"small",semantic:"successful",id:N,children:null!==(v=e.validMessage)&&void 0!==v?v:r.r2}),(0,i.jsx)(s.A,{size:"small",semantic:"critical",id:A,children:null!==(m=null!==(h=e.invalidMessage)&&void 0!==h?h:null===(c=b.current)||void 0===c?void 0:c.validationMessage)&&void 0!==m?m:r.MA}),(0,i.jsx)("span",{"data-visually-hidden":"true",role:"status",children:w})]})})},29820:(e,a,t)=>{t.d(a,{A:()=>r});var i=t(31085),n=t(14041),l=t(5188);let r=(0,n.forwardRef)(function(e,a){let t=a||(0,n.useRef)(a);return(0,i.jsx)("div",{ref:t,...(0,l.MD)(e,[]),id:e.id,className:(0,l.xF)("db-stack",e.className),"data-gap":e.gap,"data-variant":e.variant,"data-direction":e.direction,"data-alignment":e.alignment,"data-justify-content":e.justifyContent,"data-wrap":(0,l.EB)(e.wrap),children:e.children})})},98142:(e,a,t)=>{t.d(a,{A:()=>r});var i=t(31085),n=t(14041),l=t(5188);let r=(0,n.forwardRef)(function(e,a){let t=a||(0,n.useRef)(a),[r,s]=(0,n.useState)(()=>void 0),[d,c]=(0,n.useState)(()=>!1),[o,u]=(0,n.useState)(()=>!1);return(0,n.useEffect)(()=>{var a;s(null!==(a=e.id)&&void 0!==a?a:"switch-".concat((0,l.uR)()))},[]),(0,i.jsxs)("label",{"data-visual-aid":e.visualAid,"data-size":e.size,"data-variant":e.variant,"data-emphasis":e.emphasis,htmlFor:r,className:(0,l.xF)("db-switch",e.className),children:[(0,i.jsx)("input",{type:"checkbox",role:"switch",id:r,"aria-checked":d,ref:t,...(0,l.MD)(e,[]),checked:e.checked,disabled:e.disabled,"aria-describedby":e.describedbyid,"aria-invalid":"invalid"===e.customValidity,"data-custom-validity":e.customValidity,name:e.name,required:e.required,"data-aid-icon":e.icon,"data-aid-icon-after":e.iconAfter,onChange:a=>{var t;e.onChange&&e.onChange(a),e.change&&e.change(a),c(null===(t=a.target)||void 0===t?void 0:t.checked)},onBlur:a=>{e.onBlur&&e.onBlur(a),e.blur&&e.blur(a)},onFocus:a=>{e.onFocus&&e.onFocus(a),e.focus&&e.focus(a)}}),e.label?(0,i.jsx)(i.Fragment,{children:e.label}):(0,i.jsx)(i.Fragment,{children:e.children})]})})},10300:(e,a,t)=>{t.d(a,{A:()=>r});var i=t(31085),n=t(14041),l=t(5188);let r=(0,n.forwardRef)(function(e,a){let t=a||(0,n.useRef)(a),[r,s]=(0,n.useState)(()=>!1),[d,c]=(0,n.useState)(()=>!1);return(0,n.useEffect)(()=>{s(!0)},[]),(0,n.useEffect)(()=>{e.active&&r&&t.current&&(t.current.click(),s(!1))},[t.current,r]),(0,i.jsx)("li",{role:"none",className:(0,l.xF)("db-tab-item",e.className),children:(0,i.jsxs)("label",{htmlFor:e.id,"data-icon":e.icon,"data-icon-after":e.iconAfter,"data-hide-icon":(0,l.Oh)(e.showIcon),"data-hide-icon-after":(0,l.Oh)(e.showIcon),"data-no-text":e.noText,children:[(0,i.jsx)("input",{type:"radio",role:"tab",disabled:e.disabled,"aria-selected":d,"aria-controls":e.controls,checked:e.checked,ref:t,...(0,l.MD)(e,[]),id:e.id,onChange:a=>{var t;e.onChange&&e.onChange(a),e.change&&e.change(a),c(null===(t=a.target)||void 0===t?void 0:t.checked)}}),e.label?(0,i.jsx)(i.Fragment,{children:e.label}):null,e.children]})})})},97518:(e,a,t)=>{t.d(a,{A:()=>s});var i=t(31085),n=t(14041),l=t(5188),r=t(81947);let s=(0,n.forwardRef)(function(e,a){let t=a||(0,n.useRef)(a),[s,d]=(0,n.useState)(()=>r.Ye);return(0,n.useEffect)(()=>{d(e.id||"tab-list-"+(0,l.uR)())},[]),(0,i.jsx)("div",{ref:t,...(0,l.MD)(e,[]),id:s,className:(0,l.xF)("db-tab-list",e.className),children:(0,i.jsx)("ul",{role:"tablist",children:e.children})})})},7852:(e,a,t)=>{t.d(a,{A:()=>r});var i=t(31085),n=t(14041),l=t(5188);let r=(0,n.forwardRef)(function(e,a){let t=a||(0,n.useRef)(a);return(0,n.useEffect)(()=>{},[]),(0,i.jsxs)("section",{role:"tabpanel",ref:t,...(0,l.MD)(e,[]),className:(0,l.xF)("db-tab-panel",e.className),id:e.id,"aria-labelledby":e.labelledBy,children:[e.content?(0,i.jsx)(i.Fragment,{children:e.content}):null,e.children]})})},79834:(e,a,t)=>{t.d(a,{A:()=>o});var i=t(31085),n=t(14041),l=t(5188),r=t(95374),s=t(97518),d=t(10300),c=t(7852);let o=(0,n.forwardRef)(function(e,a){var t,o,u,v;let h=a||(0,n.useRef)(a),[m,b]=(0,n.useState)(()=>"tabs-"+(0,l.uR)()),[f,g]=(0,n.useState)(()=>""),[p,x]=(0,n.useState)(()=>!1),[N,E]=(0,n.useState)(()=>!1),[A,R]=(0,n.useState)(()=>!1),[_,L]=(0,n.useState)(()=>null);function S(e){try{if("string"==typeof e)return JSON.parse(e);return e}catch(e){console.error(e)}return[]}function j(e){let a=e.scrollWidth>e.clientWidth;E(a&&e.scrollLeft>1),R(a&&e.scrollLeft{j(t)}))}}}function y(a){if(h.current){let t=Array.from(h.current.getElementsByClassName("db-tab-item"));for(let i of t){let n=t.indexOf(i),l=i.querySelector("label"),r=i.querySelector("input");if(r&&l){if(!r.id){let e="".concat(f,"-tab-").concat(n);l.setAttribute("for",e),r.setAttribute("aria-controls","".concat(f,"-tab-panel-").concat(n)),r.id=e,r.setAttribute("name",f)}if(a){let a=!e.initialSelectedMode||"auto"===e.initialSelectedMode,t=null==e.initialSelectedIndex&&0===n||e.initialSelectedIndex===n;a&&t&&r.click()}}}let i=Array.from(h.current.querySelectorAll(":is(& > .db-tab-panel, & > db-tab-panel > .db-tab-panel)"));for(let e of i){if(e.id)continue;let a=i.indexOf(e);e.id="".concat(f,"-tab-panel-").concat(a),e.setAttribute("aria-labelledby","".concat(f,"-tab-").concat(a))}}}return(0,n.useEffect)(()=>{b(e.id||m),g(e.name||(0,l.uR)()),x(!0)},[]),(0,n.useEffect)(()=>{if(h.current&&p){B(),y(!0);let e=h.current.querySelector(".db-tab-list");e&&new MutationObserver(e=>{e.forEach(e=>{(e.removedNodes.length||e.addedNodes.length)&&(B(),y())})}).observe(e,{childList:!0,subtree:!0}),x(!1)}},[h.current,p]),(0,i.jsxs)("div",{ref:h,...(0,l.MD)(e,[]),id:m,className:(0,l.xF)("db-tabs",e.className),"data-orientation":e.orientation,"data-scroll-behaviour":e.behaviour,"data-alignment":null!==(u=e.alignment)&&void 0!==u?u:"start","data-width":null!==(v=e.width)&&void 0!==v?v:"auto",children:[N?(0,i.jsx)(r.A,{className:"tabs-scroll-left",variant:"ghost",icon:"chevron_left",noText:!0,onClick:e=>F(!0),children:"Scroll left"}):null,e.tabs?(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(s.A,{children:null===(t=S(e.tabs))||void 0===t?void 0:t.map((a,t)=>(0,i.jsx)(d.A,{active:a.active,label:a.label,iconAfter:a.iconAfter,icon:a.icon,noText:a.noText},e.name+"tab-item"+t))}),null===(o=S(e.tabs))||void 0===o?void 0:o.map((a,t)=>(0,i.jsx)(c.A,{content:a.content,children:a.children},e.name+"tab-panel"+t))]}):null,A?(0,i.jsx)(r.A,{className:"tabs-scroll-right",variant:"ghost",icon:"chevron_right",noText:!0,onClick:e=>F(),children:"Scroll right"}):null,e.children]})})},85776:(e,a,t)=>{t.d(a,{A:()=>r});var i=t(31085),n=t(14041),l=t(5188);let r=(0,n.forwardRef)(function(e,a){let t=a||(0,n.useRef)(a),[r,s]=(0,n.useState)(()=>!1);function d(){return e.removeButton?e.removeButton:"Remove tag"}let c=(0,n.useRef)(!1);return c.current||(s(!0),c.current=!0),(0,n.useEffect)(()=>{if(r&&t.current&&void 0!==e.disabled){var a,i;for(let n of[null===(a=t.current)||void 0===a?void 0:a.querySelector("button:not(.db-tab-remove-button)"),null===(i=t.current)||void 0===i?void 0:i.querySelector("input")])n&&(n.disabled=e.disabled)}},[r,e.disabled,t.current]),(0,i.jsxs)("div",{ref:t,...(0,l.MD)(e,[]),id:e.id,className:(0,l.xF)("db-tag",e.className),"data-disabled":(0,l.EB)(e.disabled),"data-semantic":e.semantic,"data-emphasis":e.emphasis,"data-icon":e.icon,"data-hide-icon":(0,l.Oh)(e.showIcon),"data-no-text":(0,l.EB)(e.noText),"data-overflow":(0,l.EB)(e.overflow),children:[e.children,e.text?(0,i.jsx)(i.Fragment,{children:e.text}):null,"removable"===e.behaviour?(0,i.jsx)("button",{className:"db-button db-tab-remove-button","data-icon":"cross","data-size":"small","data-no-text":"true","data-variant":"ghost",onClick:a=>void(e.onRemove&&e.onRemove()),title:d(),children:d()}):null]})})},85194:(e,a,t)=>{t.d(a,{A:()=>c});var i=t(31085),n=t(14041),l=t(64140),r=t(5188),s=t(81947),d=t(60293);let c=(0,n.forwardRef)(function(e,a){var t,c,o,u,v,h,m;let b=a||(0,n.useRef)(a),[f,g]=(0,n.useState)(()=>void 0),[p,x]=(0,n.useState)(()=>void 0),[N,E]=(0,n.useState)(()=>void 0),[A,R]=(0,n.useState)(()=>void 0),[_,L]=(0,n.useState)(()=>""),[S,j]=(0,n.useState)(()=>""),[F,B]=(0,n.useState)(()=>"");return(0,n.useEffect)(()=>{var a;let t=null!==(a=e.id)&&void 0!==a?a:"textarea-".concat((0,r.uR)());g(t),x(t+s.kc),E(t+s.Pm),R(t+s.e5)},[]),(0,n.useEffect)(()=>{if(f){let a=f+s.kc;x(a),E(f+s.Pm),R(f+s.e5),e.message&&L(a)}},[f]),(0,n.useEffect)(()=>{j(e.value)},[e.value]),(0,i.jsxs)("div",{className:(0,r.xF)("db-textarea",e.className),"data-variant":e.variant,children:[(0,i.jsx)("label",{htmlFor:f,children:null!==(c=e.label)&&void 0!==c?c:s.$6}),(0,i.jsx)("textarea",{"aria-invalid":"invalid"===e.customValidity,"data-custom-validity":e.customValidity,ref:b,...(0,r.MD)(e,[]),id:f,"data-resize":e.resize,disabled:e.disabled,required:e.required,readOnly:e.readOnly,form:e.form,maxLength:e.maxLength,minLength:e.minLength,name:e.name,wrap:e.wrap,spellCheck:e.spellCheck,autoComplete:e.autocomplete,onInput:a=>{e.onInput&&e.onInput(a),e.input&&e.input(a)},onChange:a=>{var t,i,n,l,d,c;e.onChange&&e.onChange(a),e.change&&e.change(a),(null===(t=b.current)||void 0===t?void 0:t.validity.valid)&&"invalid"!==e.customValidity?"valid"===e.customValidity||(null===(i=b.current)||void 0===i?void 0:i.validity.valid)&&(e.required||e.minLength||e.maxLength)?(L(N),(0,r.LB)()&&(B(null!==(c=e.validMessage)&&void 0!==c?c:s.r2),(0,r.cb)(()=>B(""),1e3))):e.message?L(p):L(""):(L(A),(0,r.LB)()&&(B(null!==(d=null!==(l=e.invalidMessage)&&void 0!==l?l:null===(n=b.current)||void 0===n?void 0:n.validationMessage)&&void 0!==d?d:s.MA),(0,r.cb)(()=>B(""),1e3)))},onBlur:a=>{e.onBlur&&e.onBlur(a),e.blur&&e.blur(a)},onFocus:a=>{e.onFocus&&e.onFocus(a),e.focus&&e.focus(a)},value:e.value,"aria-describedby":_,placeholder:null!==(o=e.placeholder)&&void 0!==o?o:s.GW,rows:null!==(u=e.rows)&&void 0!==u?u:s.YK,cols:e.cols}),(0,d.SH)(e.message,e.showMessage)?(0,i.jsx)(l.A,{size:"small",icon:e.messageIcon,id:p,children:e.message}):null,(0,i.jsx)(l.A,{size:"small",semantic:"successful",id:N,children:null!==(v=e.validMessage)&&void 0!==v?v:s.r2}),(0,i.jsx)(l.A,{size:"small",semantic:"critical",id:A,children:null!==(m=null!==(h=e.invalidMessage)&&void 0!==h?h:null===(t=b.current)||void 0===t?void 0:t.validationMessage)&&void 0!==m?m:s.MA}),(0,i.jsx)("span",{"data-visually-hidden":"true",role:"status",children:F})]})})},20156:(e,a,t)=>{t.d(a,{A:()=>s});var i=t(31085),n=t(14041),l=t(5188),r=t(81947);let s=(0,n.forwardRef)(function(e,a){let t=a||(0,n.useRef)(a),[s,d]=(0,n.useState)(()=>r.Ye),[c,o]=(0,n.useState)(()=>!1);return(0,n.useEffect)(()=>{d(e.id||"tooltip-"+(0,l.uR)()),o(!0)},[]),(0,n.useEffect)(()=>{if(t.current&&c){let e=t.current.parentElement;e&&e.localName.includes("tooltip")&&(e=e.parentElement),e&&(["mouseenter","focus"].forEach(a=>{e.addEventListener(a,()=>void((null==t?void 0:t.current)&&(0,l.ef)(t.current)))}),e.setAttribute("data-has-tooltip","true"),e.setAttribute("aria-describedby",s)),o(!1)}},[t.current,c]),(0,i.jsx)("i",{role:"tooltip","aria-hidden":"true","data-gap":"true",ref:t,...(0,l.MD)(e,[]),className:(0,l.xF)("db-tooltip",e.className),id:s,"data-emphasis":e.emphasis,"data-animation":e.animation,"data-delay":e.delay,"data-width":e.width,"data-variant":e.variant,"data-placement":e.placement,onClick:e=>(function(e){e.stopPropagation()})(e),children:e.children})})},81947:(e,a,t)=>{t.d(a,{$6:()=>n,GW:()=>l,MA:()=>v,Mv:()=>m,Pm:()=>s,YK:()=>f,Ye:()=>i,e5:()=>d,iT:()=>b,kc:()=>r,mt:()=>g,mu:()=>c,r2:()=>u,sR:()=>h,x9:()=>o});let i="OVERWRITE_DEFAULT_ID",n="LABEL SHOULD BE SET",l=" ",r="-message",s="-valid-message",d="-invalid-message",c="-placeholder",o="-datalist",u="TODO: Add a validMessage",v="TODO: Add an invalidMessage",h="Back",m="BurgerMenu",b="db",f=4,g="Close Button";Object.entries(function(e){return e.FUNCTIONAL="functional",e.REGULAR="regular",e.EXPRESSIVE="expressive",e}({})).map(e=>{let[,a]=e;return a});var p=function(e){return e.PRIMARY="primary",e}({});Object.entries(function(e){return e.NEUTRAL_BG_LEVEL_1="neutral-bg-basic-level-1",e.NEUTRAL_BG_LEVEL_2="neutral-bg-basic-level-2",e.NEUTRAL_BG_LEVEL_3="neutral-bg-basic-level-3",e.NEUTRAL_BG_TRANSPARENT_SEMI="neutral-bg-basic-transparent-semi",e.NEUTRAL_BG_TRANSPARENT_FULL="neutral-bg-basic-transparent-full",e.BRAND_BG_LEVEL_1="brand-bg-basic-level-1",e.BRAND_BG_LEVEL_2="brand-bg-basic-level-2",e.BRAND_BG_LEVEL_3="brand-bg-basic-level-3",e.BRAND_BG_TRANSPARENT_SEMI="brand-bg-basic-transparent-semi",e.BRAND_BG_TRANSPARENT_FULL="brand-bg-basic-transparent-full",e.SUCCESSFUL_BG_LEVEL_1="successful-bg-basic-level-1",e.SUCCESSFUL_BG_LEVEL_2="successful-bg-basic-level-2",e.SUCCESSFUL_BG_LEVEL_3="successful-bg-basic-level-3",e.SUCCESSFUL_BG_TRANSPARENT_SEMI="successful-bg-basic-transparent-semi",e.SUCCESSFUL_BG_TRANSPARENT_FULL="successful-bg-basic-transparent-full",e.CRITICAL_BG_LEVEL_1="critical-bg-basic-level-1",e.CRITICAL_BG_LEVEL_2="critical-bg-basic-level-2",e.CRITICAL_BG_LEVEL_3="critical-bg-basic-level-3",e.CRITICAL_BG_TRANSPARENT_SEMI="critical-bg-basic-transparent-semi",e.CRITICAL_BG_TRANSPARENT_Full="critical-bg-basic-transparent-full",e.WARNING_BG_LEVEL_1="warning-bg-basic-level-1",e.WARNING_BG_LEVEL_2="warning-bg-basic-level-2",e.WARNING_BG_LEVEL_3="warning-bg-basic-level-3",e.WARNING_BG_TRANSPARENT_SEMI="warning-bg-basic-transparent-semi",e.WARNING_BG_TRANSPARENT_FULL="warning-bg-basic-transparent-full",e.INFORMATIONAL_BG_LEVEL_1="informational-bg-basic-level-1",e.INFORMATIONAL_BG_LEVEL_2="informational-bg-basic-level-2",e.INFORMATIONAL_BG_LEVEL_3="informational-bg-basic-level-3",e.INFORMATIONAL_BG_TRANSPARENT_SEMI="informational-bg-basic-transparent-semi",e.INFORMATIONAL_BG_TRANSPARENT_FULL="informational-bg-basic-transparent-full",e}({})).map(e=>{let[,a]=e;return a}),Object.entries(p).map(e=>{let[,a]=e;return a}),Object.entries(function(e){return e.CRITICAL="critical",e.INFORMATIONAL="informational",e.WARNING="warning",e.SUCCESSFUL="successful",e}({})).map(e=>{let[,a]=e;return a})},60293:(e,a,t)=>{t.d(a,{SH:()=>i});let i=(e,a)=>void 0===a?!!e:a&&e},44608:(e,a,t)=>{t.d(a,{D1:()=>l,JR:()=>n});var i=t(5188);let n=e=>{var a,t;let{target:i}=e;return!!(!(null==i?void 0:null===(a=i.classList)||void 0===a?void 0:a.contains("db-navigation-item-expand-button"))&&(null==i?void 0:null===(t=i.parentElement)||void 0===t?void 0:t.classList.contains("db-navigation-item")))};class l{init(){var e,a;let t=null!==(a=null===(e=this.parentSubNavigation)||void 0===e?void 0:e.getBoundingClientRect().width)&&void 0!==a?a:0;this.element.style.setProperty("--db-navigation-item-inline-size","".concat(t,"px")),this.initialized=!0}enableFollow(){var e,a;if(!this.initialized||this.triangleData)return;let t=(0,i.ef)(this.subNavigation),n=this.element.getBoundingClientRect(),l=null!==(a=null===(e=this.parentSubNavigation)||void 0===e?void 0:e.getBoundingClientRect().width)&&void 0!==a?a:0;this.triangleData={itemRect:n,parentElementWidth:l,subNavigationHeight:this.subNavigation.getBoundingClientRect().height,padding:(l-n.width)/2,outsideVX:t.vx,outsideVY:t.vy}}disableFollow(){this.triangleData=void 0}getTriangleTipX(){return this.triangleData?"right"===this.triangleData.outsideVX?this.triangleData.itemRect.width-this.mouseX:Math.min(this.mouseX,.75*this.triangleData.itemRect.width):0}getTriangleTipY(){if(!this.triangleData)return 0;let e=Math.max(Math.min(this.mouseY,this.triangleData.itemRect.height),0)+this.triangleData.padding;return"bottom"===this.triangleData.outsideVY?e+(this.triangleData.subNavigationHeight-2*this.triangleData.padding-this.triangleData.itemRect.height):e}hasMouseEnteredSubNavigation(){if(!this.triangleData)return!1;let e="right"===this.triangleData.outsideVX;return!!e&&this.mouseX<-1*this.triangleData.padding||!e&&this.mouseX>this.triangleData.parentElementWidth-this.triangleData.padding}getTriangleCoordinates(e){if(!this.triangleData)return;if("fill-gap"===e){let e="".concat(this.triangleData.itemRect.height+2*this.triangleData.padding,"px"),a="".concat(this.triangleData.parentElementWidth-this.triangleData.padding,"px");return{lb:"".concat(a," ").concat(e),lt:"".concat(a," 0"),rt:"100% 0",rb:"100% ".concat(e)}}let a=this.getTriangleTipX(),t=this.getTriangleTipY();return{lb:"".concat(a,"px ").concat(t,"px"),lt:"".concat(a,"px ").concat(t,"px"),rt:"100% 0",rb:"100% 100%"}}followByMouseEvent(e){if(!this.initialized||!this.triangleData)return;this.mouseX=e.clientX-this.triangleData.itemRect.left,this.mouseY=e.clientY-this.triangleData.itemRect.top;let a=this.hasMouseEnteredSubNavigation(),t=this.getTriangleCoordinates(a?"fill-gap":"safe-triangle");t&&(this.element.style.setProperty("--db-navigation-item-clip-path","polygon(".concat(t.lb,", ").concat(t.lt,", ").concat(t.rt,", ").concat(t.rb,")")),a&&(this.triangleData=void 0))}constructor(e,a){this.initialized=!1,this.mouseX=0,this.mouseY=0,this.element=e,this.subNavigation=a,this.parentSubNavigation=this.element.closest(".db-sub-navigation"),this.parentSubNavigation&&!this.element.closest(".db-drawer")&&this.init()}}},51034:(e,a,t)=>{t.d(a,{D_:()=>r,HI:()=>i,fY:()=>l,kC:()=>o,lm:()=>c,o$:()=>d,wr:()=>n});let i="density",n="color";var l=function(e){return e.FUNCTIONAL="functional",e.REGULAR="regular",e.EXPRESSIVE="expressive",e}({});let r=Object.entries(l).map(e=>{let[,a]=e;return a});var s=function(e){return e.PRIMARY="primary",e}({}),d=function(e){return e.NEUTRAL_BG_LEVEL_1="neutral-bg-basic-level-1",e.NEUTRAL_BG_LEVEL_2="neutral-bg-basic-level-2",e.NEUTRAL_BG_LEVEL_3="neutral-bg-basic-level-3",e.NEUTRAL_BG_TRANSPARENT_SEMI="neutral-bg-basic-transparent-semi",e.NEUTRAL_BG_TRANSPARENT_FULL="neutral-bg-basic-transparent-full",e.BRAND_BG_LEVEL_1="brand-bg-basic-level-1",e.BRAND_BG_LEVEL_2="brand-bg-basic-level-2",e.BRAND_BG_LEVEL_3="brand-bg-basic-level-3",e.BRAND_BG_TRANSPARENT_SEMI="brand-bg-basic-transparent-semi",e.BRAND_BG_TRANSPARENT_FULL="brand-bg-basic-transparent-full",e.SUCCESSFUL_BG_LEVEL_1="successful-bg-basic-level-1",e.SUCCESSFUL_BG_LEVEL_2="successful-bg-basic-level-2",e.SUCCESSFUL_BG_LEVEL_3="successful-bg-basic-level-3",e.SUCCESSFUL_BG_TRANSPARENT_SEMI="successful-bg-basic-transparent-semi",e.SUCCESSFUL_BG_TRANSPARENT_FULL="successful-bg-basic-transparent-full",e.CRITICAL_BG_LEVEL_1="critical-bg-basic-level-1",e.CRITICAL_BG_LEVEL_2="critical-bg-basic-level-2",e.CRITICAL_BG_LEVEL_3="critical-bg-basic-level-3",e.CRITICAL_BG_TRANSPARENT_SEMI="critical-bg-basic-transparent-semi",e.CRITICAL_BG_TRANSPARENT_Full="critical-bg-basic-transparent-full",e.WARNING_BG_LEVEL_1="warning-bg-basic-level-1",e.WARNING_BG_LEVEL_2="warning-bg-basic-level-2",e.WARNING_BG_LEVEL_3="warning-bg-basic-level-3",e.WARNING_BG_TRANSPARENT_SEMI="warning-bg-basic-transparent-semi",e.WARNING_BG_TRANSPARENT_FULL="warning-bg-basic-transparent-full",e.INFORMATIONAL_BG_LEVEL_1="informational-bg-basic-level-1",e.INFORMATIONAL_BG_LEVEL_2="informational-bg-basic-level-2",e.INFORMATIONAL_BG_LEVEL_3="informational-bg-basic-level-3",e.INFORMATIONAL_BG_TRANSPARENT_SEMI="informational-bg-basic-transparent-semi",e.INFORMATIONAL_BG_TRANSPARENT_FULL="informational-bg-basic-transparent-full",e}({});let c=Object.entries(d).map(e=>{let[,a]=e;return a});Object.entries(s).map(e=>{let[,a]=e;return a});let o=Object.entries(function(e){return e.CRITICAL="critical",e.INFORMATIONAL="informational",e.WARNING="warning",e.SUCCESSFUL="successful",e}({})).map(e=>{let[,a]=e;return a})}}]); \ No newline at end of file diff --git a/review/feat-figma-properties-alignment/_next/static/chunks/2372-83f0dffda5d292bf.js b/review/feat-figma-properties-alignment/_next/static/chunks/2372-83f0dffda5d292bf.js deleted file mode 100644 index 3b068c5778e..00000000000 --- a/review/feat-figma-properties-alignment/_next/static/chunks/2372-83f0dffda5d292bf.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[2372],{42372:(n,e,a)=>{a.d(e,{bw:()=>tj,ll:()=>tB,sr:()=>tk,g9:()=>tT,Oj:()=>ty,Pb:()=>tA});var t,i={};a.r(i),a.d(i,{Behaviour:()=>eg,Content:()=>ex,Density:()=>eb,Size:()=>ep,State:()=>eu,Variant:()=>eh});var o={};a.r(o),a.d(o,{Content:()=>ej,Density:()=>em,InteractionStates:()=>eD,Semantic:()=>ev,Size:()=>eB});var l={};a.r(l),a.d(l,{Behaviour:()=>eA,Density:()=>ef,Variant:()=>eT});var s={};a.r(s),a.d(s,{ContentStates:()=>ew,Density:()=>ey,InteractionStates:()=>ek});var r={};a.r(r),a.d(r,{Density:()=>eN,Variants:()=>eI});var c={};a.r(c),a.d(c,{Animations:()=>eR,Density:()=>eC,Emphasis:()=>eH,Placement:()=>e_,Variant:()=>eL,Width:()=>eP});var d={};a.r(d),a.d(d,{Density:()=>eS,Semantic:()=>eE,Size:()=>eO});var b={};a.r(b),a.d(b,{Behaviour:()=>eW,Content:()=>eU,Density:()=>eF,Emphasis:()=>eM,Example:()=>eJ,Overflow:()=>eq,Semantic:()=>eV,State:()=>ez});var h={};a.r(h),a.d(h,{Density:()=>eG,Examples:()=>eQ,Orientation:()=>eY,Overflow:()=>eK,Width:()=>e$});var u={};a.r(u),a.d(u,{Behaviour:()=>e1,Content:()=>e0,ContentAlignmentFullWidth:()=>e2,Density:()=>eX,States:()=>eZ});var p={};a.r(p),a.d(p,{Content:()=>e6,Density:()=>e3,InteractionStates:()=>e4,Requirement:()=>e7,Size:()=>e8,States:()=>e5});var x={};a.r(x),a.d(x,{Content:()=>ai,Density:()=>e9,ExampleTypes:()=>al,ExampleTypesFloatingLabel:()=>as,Requirement:()=>ao,StatesFloatingLabel:()=>at,StatesLabelAbove:()=>aa,VariantHelperMessage:()=>ae,VariantLabel:()=>an});var g={};a.r(g),a.d(g,{Content:()=>au,Density:()=>ar,InteractionStates:()=>ac,Requirement:()=>ah,Size:()=>ab,States:()=>ad});var m={};a.r(m),a.d(m,{Content:()=>aD,Density:()=>ap,Requirement:()=>aB,StatesFloatingLabel:()=>av,StatesLabelAbove:()=>am,VariantHelperMessage:()=>ag,VariantLabel:()=>ax});var v={};a.r(v),a.d(v,{Content:()=>ak,Density:()=>aj,Emphasis:()=>aT,Examples:()=>aw,Size:()=>ay,States:()=>af,VisualAid:()=>aA});var D={};a.r(D),a.d(D,{Density:()=>aN,Requirement:()=>a_,Rows:()=>aP,StatesFloatingLabel:()=>aH,StatesLabelAbove:()=>aL,VariantHelperMessage:()=>aC,VariantLabel:()=>aI});var B={};a.r(B),a.d(B,{Behaviour:()=>aO,ContentVariantDocked:()=>aF,ContentVariantOverlay:()=>aV,ContentVariantStandalone:()=>aM,Density:()=>aR,Semantic:()=>aE,Variant:()=>aS});var j={};a.r(j),a.d(j,{Content:()=>aJ,Density:()=>aW,Emphasis:()=>az,Examples:()=>aY,Placement:()=>aG,Semantic:()=>aU,Size:()=>aq});var f={};a.r(f),a.d(f,{Behaviour:()=>aX,Density:()=>a$,ElevationLevel:()=>aK,Example:()=>aZ,Spacing:()=>aQ});var T={};a.r(T),a.d(T,{Density:()=>a0,Emphasis:()=>a2,Variant:()=>a1});var A={};a.r(A),a.d(A,{Backdrop:()=>a7,Density:()=>a3,Directions:()=>a6,Example:()=>a9,Rounded:()=>a5,Size:()=>a4,Spacing:()=>a8});var y={};a.r(y),a.d(y,{Behaviour:()=>ta,Density:()=>tn,Examples:()=>tt,Width:()=>te});var k={};a.r(k),a.d(k,{Density:()=>ti,Spacing:()=>tl,Width:()=>to});var w={};a.r(w),a.d(w,{Density:()=>ts});var N={};a.r(N),a.d(N,{Content:()=>td,Density:()=>tr,InteractionStates:()=>tc,Width:()=>tb});var I={};a.r(I),a.d(I,{Animations:()=>tg,Density:()=>th,Gap:()=>tx,Placement:()=>tp,Spacing:()=>tu,Width:()=>tm});var C=a(31085),L=a(95374),H=a(14041),_=a(64286),P=a(40956),R=a(13210),S=a(51034),E=a(42305);let O=()=>{let n=(0,E.useRouter)(),e=(0,E.usePathname)(),[a,t]=[(0,E.useSearchParams)()];return[a,a=>{{let n=new URLSearchParams(window.location.href.split("?")[1]);n.sort();let e=new URLSearchParams(a);if(e.sort(),n.toString()===e.toString())return}t?t(a):e&&(null==n||n.push("".concat(e,"?").concat(new URLSearchParams(a).toString())))}]},F=function(){var n,e;let a=!(arguments.length>0)||void 0===arguments[0]||arguments[0],[t,i]=O(),[o,l]=(0,H.useState)(null!==(n=t.get(S.HI))&&void 0!==n?n:S.fY.REGULAR),[s,r]=(0,H.useState)(null!==(e=t.get(S.wr))&&void 0!==e?e:S.o$.NEUTRAL_BG_LEVEL_1),[c,d]=(0,H.useState)(void 0),[b,h]=(0,H.useState)(!1),[u,p]=(0,H.useState)(!1);return(0,H.useEffect)(()=>{for(let[n,e]of Array.from(t.entries()))e&&(n===S.HI&&o!==e&&l(e),n===S.wr&&s!==e&&r(e),"page"===n&&c!==e.toLowerCase()&&d(e.toLowerCase()),"fullscreen"===n&&!!e!==b&&h(!!e));p(!0)},[t]),(0,H.useEffect)(()=>{if(u){let n={density:o,color:s};c&&(n.page=c),b&&(n.fullscreen=!0),a&&i(n)}},[s,o,c,b,u]),[o,l,s,r,c,b]};var M=a(39907);let V=null==M||null===(t=M.env)||void 0===t,W=n=>{let{name:e,examples:a,color:t,role:i,SlotCode:o}=n,l=(0,H.useCallback)(()=>(null==t?void 0:t.includes("3"))?"3":(null==t?void 0:t.includes("2"))?"2":"1",[t]),[s,r]=(0,H.useState)(),c=a.filter(n=>V||!n.experimental);return(0,C.jsxs)(_.A,{className:"variants-card db-code-docs",elevationLevel:l(),children:[(0,C.jsx)("div",{role:i,"aria-label":i?e:void 0,className:"variants-list",children:c.map((n,e)=>(0,C.jsx)("div",{style:n.style,className:n.className,"data-density":n.density,children:n.example},"".concat(n.name,"-").concat(e)))}),o&&(0,C.jsxs)("details",{className:"code-details",onToggle:()=>{r(!s)},children:[(0,C.jsx)("summary",{className:"db-button code-button","data-size":"small","data-variant":"filled",children:s?"Hide code":"Show code"}),(0,C.jsxs)("div",{"data-density":"functional",children:[(0,C.jsx)("div",{className:"backdrop"}),(0,C.jsx)(_.A,{className:"code",spacing:"small",children:(0,C.jsx)(o,{})})]})]})]})},z=n=>{let{title:e,variants:a,subComponent:t,isSubComponent:i,componentName:o}=n,l=F(V)[4],s=F(V)[2],r=n=>{{let e=new URLSearchParams(window.location.href.split("?")[1]);return e.set("page",n.toLowerCase()),"".concat(window.location.href.split("?")[0],"?").concat(e.toString())}},c=(n,e)=>{var a;if(!window.location.origin||!window.location.href)return;let t=window.location.href.split("?"),i=t[0],l=new URLSearchParams(null!==(a=t[1])&&void 0!==a?a:"");l.set("page",e.toLowerCase());let s=o?"".concat(i.replace(/\/[a-z\d\-_]*\/overview/,"/".concat(o,"/overview")),"?").concat(l.toString()):"".concat(t[0],"?").concat(l.toString());window.open(s,"_blank")};if(l){let n=a.find(n=>n.name.toLowerCase()===l);if(n)return(0,C.jsx)(W,{...n,color:s})}return(0,C.jsxs)(C.Fragment,{children:[(0,C.jsxs)("div",{className:"default-container",children:[(0,C.jsx)(i?"h2":"h1",{children:e}),null==a?void 0:a.filter(n=>V||n.examples.find(n=>!n.experimental)).map((n,e)=>(0,C.jsxs)("div",{children:[(0,C.jsx)(P.A,{}),(0,C.jsx)(R.A,{className:"link-headline",content:"external",target:"_blank",onClick:e=>{c(e,n.name)},href:r(n.name),children:n.name}),(0,C.jsx)(W,{...n,color:s})]},"".concat(n.name,"-").concat(e)))]}),t]})},U=JSON.parse('[{"name":"Density","examples":[{"name":"Functional","density":"functional","props":{}},{"name":"(Default) Regular","density":"regular","props":{}},{"name":"Expressive","density":"expressive","props":{}}]},{"name":"Variant","examples":[{"name":"(Default) Outlined - Adaptive"},{"name":"Filled - Adaptive","props":{"variant":"filled"}},{"name":"Ghost - Adaptive","props":{"variant":"ghost"}},{"name":"Brand","props":{"variant":"brand"}}]},{"name":"State","examples":[{"name":"(Default) Enabled"},{"name":"Disabled","props":{"disabled":true}}]},{"name":"Size","examples":[{"name":"(Default) Medium"},{"name":"Small","props":{"size":"small"}}]},{"name":"Content","examples":[{"name":"(Default) Text"},{"name":"Icon & Text","props":{"icon":"person"}},{"name":"Icon","props":{"icon":"person","noText":true}}]},{"name":"Behaviour","examples":[{"name":"(Default) Auto Width"},{"name":"Width full","style":{"width":"500px"},"props":{"width":"full"}}]}]'),q=(n,e,a)=>n.map((n,t)=>{var i;return{...n,SlotCode:null==a?void 0:a[null!==(i=n.codeFileName)&&void 0!==i?i:n.name.replaceAll(" ","")],examples:n.examples.map((n,a)=>{var t,i,o,l;return{...n,example:e({...n.props,id:null!==(o=null===(t=n.props)||void 0===t?void 0:t.id)&&void 0!==o?o:n.name,children:null!==(l=null===(i=n.props)||void 0===i?void 0:i.children)&&void 0!==l?l:n.name})}})}}),J=n=>{let{variant:e,state:a,size:t,noText:i,icon:o,width:l,disabled:s,children:r,type:c}=n;return(0,C.jsx)(L.A,{variant:e,state:a,size:t,noText:i,icon:o,disabled:s,width:l,onClick:()=>{alert(r.toString())},type:c,children:r})},G=JSON.parse('[{"name":"Density","examples":[{"name":"Functional","density":"functional","props":{"href":"#"}},{"name":"(Default) Regular","density":"regular","props":{"href":"#"}},{"name":"Expressive","density":"expressive","props":{"href":"#"}}]},{"name":"Semantic","examples":[{"name":"(Default) Adaptive","props":{"href":"#"}},{"name":"Brand","props":{"href":"#","variant":"brand"}}]},{"name":"Interaction-States","examples":[{"name":"Enabled (Default)/Hover/Pressed","props":{"href":"#"}},{"name":"Disabled","props":{"href":"#","disabled":true}}]},{"name":"Size","examples":[{"name":"(Default) Medium","props":{"href":"#"}},{"name":"Small","props":{"href":"#","size":"small"}}]},{"name":"Content","examples":[{"name":"(Default) Internal","props":{"href":"#"}},{"name":"External","props":{"href":"#","content":"external"}},{"name":"Show Icon","props":{"href":"#","content":"external","showIcon":false}}]}]'),Y=n=>{let{href:e,variant:a,disabled:t,size:i,content:o,children:l,showIcon:s}=n;return(0,C.jsx)(R.A,{href:e,variant:a,disabled:t,size:i,content:o,showIcon:s,children:l})};var $=a(64140),K=a(54116),Q=a(50402);let X=JSON.parse('[{"name":"Density","children":[{"name":"accordion-item","content":"Content 1","props":{"headline":"Item 1"}},{"name":"accordion-item","content":"Content 2","props":{"headline":"Item 2"}},{"name":"accordion-item","content":"Content 3","props":{"headline":"Item 3"}}],"examples":[{"name":"Functional","density":"functional","props":{}},{"name":"(Default) Regular","density":"regular","props":{}},{"name":"Expressive","density":"expressive","props":{}}]},{"name":"Variant","children":[{"name":"accordion-item","content":"Content 1","props":{"headline":"Item 1"}},{"name":"accordion-item","content":"Content 2","props":{"headline":"Item 2"}},{"name":"accordion-item","content":"Content 3","props":{"headline":"Item 3"}}],"examples":[{"name":"background (default)"},{"name":"card","props":{"variant":"card"}}]},{"name":"Behaviour","children":[{"name":"accordion-item","content":"Content 1","props":{"headline":"Item 1"}},{"name":"accordion-item","content":"Content 2","props":{"headline":"Item 2"}},{"name":"accordion-item","content":"Content 3","props":{"headline":"Item 3"}}],"examples":[{"name":"(Default) Multiple","props":{"behaviour":"multiple"}},{"name":"Single","props":{"behaviour":"single"}}]}]'),Z=n=>{let{behaviour:e,children:a,variant:t}=n;return(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)($.A,{size:"small",semantic:"informational",icon:"none",children:a}),(0,C.jsxs)(K.A,{behaviour:e,variant:t,children:[(0,C.jsx)(Q.A,{headlinePlain:"Item 1",content:"Content 1"}),(0,C.jsx)(Q.A,{headlinePlain:"Item 2",content:"Content 2"}),(0,C.jsx)(Q.A,{headlinePlain:"Item 3",content:"Content 3"})]})]})},nn=JSON.parse('[{"name":"Density","examples":[{"name":"Functional","density":"functional","props":{"headlinePlain":"Functional"}},{"name":"(Default) Regular","density":"regular","props":{"headlinePlain":"(Default) Regular"}},{"name":"Expressive","density":"expressive","props":{"headlinePlain":"Expressive"}}]},{"name":"Interaction States","examples":[{"name":"Enabled (Default)/Hover/Pressed","props":{"headlinePlain":"Enabled (Default)/Hover/Pressed"}},{"name":"Disabled","props":{"headlinePlain":"Disabled","disabled":true}}]},{"name":"Content States","examples":[{"name":"(Default) Collapsed","props":{"headlinePlain":"(Default) Collapsed"}},{"name":"Open","props":{"headlinePlain":"Open","open":true}}]}]'),ne=n=>{let{children:e,disabled:a,open:t,headlinePlain:i}=n;return(0,C.jsx)(Q.A,{headlinePlain:i,disabled:a,defaultOpen:t,children:e})},na=n=>(0,C.jsx)(z,{title:"DBAccordionItem",isSubComponent:n.isSubComponent,componentName:n.componentName,variants:q(nn,ne,n.slotCode)});var nt=a(23944);let ni=JSON.parse('[{"name":"Density","examples":[{"name":"Functional","density":"functional","props":{}},{"name":"(Default) Regular","density":"regular","props":{}},{"name":"Expressive","density":"expressive","props":{}}]},{"name":"Variants","examples":[{"name":"(Default) With Logo"},{"name":"No Logo","props":{"hideLogo":true}},{"name":"Custom Logo","props":{"hideLogo":true,"customLogo":true}}]}]');var no=a(39907);let nl=n=>{var e,a;let{children:t,hideLogo:i,customLogo:o}=n;return(0,C.jsxs)(nt.A,{hideLogo:i,children:[o&&(0,C.jsx)("img",{src:"".concat(null!==(a=null==no?void 0:null===(e=no.env)||void 0===e?void 0:"/mono/review/feat-figma-properties-alignment")&&void 0!==a?a:"/react-showcase","/assets/images/placeholder.jpg"),alt:"this is a fancy placeholder logo"}),t]})};var ns=a(20156);let nr=JSON.parse('[{"name":"Density","children":[{"name":"button"}],"examples":[{"name":"Functional","density":"functional","props":{"content":"Tooltip","id":"tooltip-01"}},{"name":"(Default) Regular","density":"regular","props":{"content":"Tooltip","id":"tooltip-02"}},{"name":"Expressive","density":"expressive","props":{"content":"Tooltip","id":"tooltip-03"}}]},{"name":"Variant","children":[{"name":"button"}],"examples":[{"name":"(Default) With arrow","props":{"content":"Tooltip","id":"tooltip-04"}},{"name":"Basic","props":{"content":"Tooltip","variant":"basic","id":"tooltip-05"}}]},{"name":"Emphasis","children":[{"name":"button"}],"examples":[{"name":"(Default) Weak","props":{"content":"Tooltip","id":"tooltip-06"}},{"name":"Strong","props":{"content":"Tooltip","emphasis":"strong","id":"tooltip-07"}}]},{"name":"Placement","children":[{"name":"button"}],"examples":[{"name":"bottom-start","props":{"content":"Tooltip","placement":"bottom-start","id":"tooltip-08-start"}},{"name":"(Default) bottom","props":{"content":"Tooltip","placement":"bottom","id":"tooltip-08"}},{"name":"bottom-end","props":{"content":"Tooltip","placement":"bottom-end","id":"tooltip-08-end"}},{"name":"left-start","props":{"content":"Tooltip","placement":"left-start","id":"tooltip-10-start"}},{"name":"left","props":{"content":"Tooltip","placement":"left","id":"tooltip-10"}},{"name":"left-end","props":{"content":"Tooltip","placement":"left-end","id":"tooltip-10-end"}},{"name":"right-start","props":{"content":"Tooltip","placement":"right-start","id":"tooltip-11-start"}},{"name":"right","props":{"content":"Tooltip","placement":"right","id":"tooltip-11"}},{"name":"right-end","props":{"content":"Tooltip","placement":"right-end","id":"tooltip-11-end"}},{"name":"top-start","props":{"content":"Tooltip","placement":"top-start","id":"tooltip-09-start"}},{"name":"top","props":{"content":"Tooltip","placement":"top","id":"tooltip-09"}},{"name":"top-end","props":{"content":"Tooltip","placement":"top-end","id":"tooltip-09-end"}}]},{"name":"Width","children":[{"name":"button"}],"examples":[{"name":"(Default) Auto","props":{"content":"Max width, lorem ipsum dolor sit amet, consetetur sadipscing","id":"tooltip-12"}},{"name":"Fixed","props":{"content":"Max width, lorem ipsum dolor sit amet, consetetur sadipscing","width":"fixed","id":"tooltip-13"}}]},{"name":"Animations","children":[{"name":"button"}],"examples":[{"name":"(Default) Animation no delay","props":{"content":"Tooltip","id":"tooltip-14"}},{"name":"Delay slow","props":{"content":"Tooltip","delay":"slow","id":"tooltip-15"}},{"name":"Delay fast","props":{"content":"Tooltip","delay":"fast","id":"tooltip-16"}},{"name":"No animation","props":{"content":"Tooltip","animation":"disabled","id":"tooltip-17"}}]}]'),nc=n=>{let{children:e,width:a,emphasis:t,placement:i,delay:o,content:l,animation:s,variant:r}=n;return(0,C.jsxs)(L.A,{children:[e,(0,C.jsx)(ns.A,{width:a,emphasis:t,placement:i,animation:s,delay:o,variant:r,children:l})]})},nd=JSON.parse('[{"name":"Density","examples":[{"name":"Functional","density":"functional","props":{}},{"name":"(Default) Regular","density":"regular","props":{}},{"name":"Expressive","density":"expressive","props":{}}]},{"name":"Semantic","examples":[{"name":"(Default) Adaptive"},{"name":"Neutral","props":{"semantic":"neutral"}},{"name":"Critical","props":{"semantic":"critical"}},{"name":"Informational","props":{"semantic":"informational"}},{"name":"Successful","props":{"semantic":"successful"}},{"name":"Warning","props":{"semantic":"warning"}}]},{"name":"Size","examples":[{"name":"(Default) Medium"},{"name":"Small","props":{"size":"small"}}]}]'),nb=n=>{let{semantic:e,size:a,icon:t,children:i}=n;return(0,C.jsx)($.A,{semantic:e,size:a,icon:t,children:i})};var nh=a(85776);let nu=JSON.parse('[{"name":"Density","examples":[{"name":"Functional","density":"functional","props":{}},{"name":"(Default) Regular","density":"regular","props":{}},{"name":"Expressive","density":"expressive","props":{}}]},{"name":"Emphasis","examples":[{"name":"(Default) Weak"},{"name":"Strong","props":{"emphasis":"strong"}}]},{"name":"Semantic","examples":[{"name":"(Default) Adaptive"},{"name":"Neutral","props":{"semantic":"neutral"}},{"name":"Critical","props":{"semantic":"critical"}},{"name":"Informational","props":{"semantic":"informational"}},{"name":"Successful","props":{"semantic":"successful"}},{"name":"Warning","props":{"semantic":"warning"}},{"name":"Adaptive Strong","props":{"emphasis":"strong"}},{"name":"Neutral Strong","props":{"semantic":"neutral","emphasis":"strong"}},{"name":"Critical Strong","props":{"semantic":"critical","emphasis":"strong"}},{"name":"Informational Strong","props":{"semantic":"informational","emphasis":"strong"}},{"name":"Successful Strong","props":{"semantic":"successful","emphasis":"strong"}},{"name":"Warning Strong","props":{"semantic":"warning","emphasis":"strong"}}]},{"name":"Behaviour","role":"group","examples":[{"name":"(Default) Static"},{"name":"Interactive Button","props":{"component":"button"},"children":[{"name":"button","native":true,"content":"Interactive Button"}]},{"name":"Interactive Link","props":{"component":"link"},"children":[{"name":"a","native":true,"content":"Interactive Link","props":{"href":"#"}}]},{"name":"Interactive Checkbox","props":{"component":"checkbox"},"children":[{"name":"label","native":true,"content":"Interactive Checkbox","props":{"for":"checkbox01"},"children":[{"name":"input","native":true,"props":{"id":"checkbox01","type":"checkbox"}}]}]},{"name":"Interactive Radio 1","props":{"component":"radio","identifier":"radio01"},"children":[{"name":"label","native":true,"content":"Interactive Radio 1","props":{"for":"radio01"},"children":[{"name":"input","native":true,"props":{"name":"radio01","id":"radio01","type":"radio"}}]}]},{"name":"Interactive Radio 2","props":{"component":"radio","identifier":"radio01"},"children":[{"name":"label","native":true,"content":"Interactive Radio 2","props":{"for":"radio02"},"children":[{"name":"input","native":true,"props":{"name":"radio02","id":"radio02","type":"radio"}}]}]},{"name":"Removeable","props":{"behaviour":"removable"}}]},{"name":"State","role":"group","examples":[{"name":"(Default) Unchecked","props":{"component":"checkbox"},"children":[{"name":"label","native":true,"content":"Interactive Checkbox","props":{"for":"checkbox02"},"children":[{"name":"input","native":true,"props":{"for":"checkbox02","type":"checkbox"}}]}]},{"name":"Checked","props":{"component":"checkbox","checked":true},"children":[{"name":"label","native":true,"content":"Interactive Checkbox","props":{"for":"checkbox03"},"children":[{"name":"input","native":true,"props":{"checked":true,"id":"checkbox03","type":"checkbox"}}]}]},{"name":"Disabled","props":{"component":"checkbox","checked":true,"disabled":true},"children":[{"name":"label","native":true,"content":"Interactive Checkbox","props":{"for":"checkbox04"},"children":[{"name":"input","native":true,"props":{"checked":true,"disabled":true,"id":"checkbox04","type":"checkbox"}}]}]}]},{"name":"Content","examples":[{"name":"(Default) Text"},{"name":"Icon","props":{"icon":"person","noText":true}},{"name":"Icon & Text","props":{"icon":"person"}}]},{"name":"Overflow","examples":[{"name":"(Default) No Overflow"},{"name":"With Overflow (max-width)","props":{"overflow":true}}]},{"name":"Example","role":"group","examples":[{"name":"Interactive Strong Button with Icon","props":{"component":"button","emphasis":"strong","icon":"person","behaviour":"removable"},"children":[{"name":"button","native":true,"content":"Interactive Button"}]},{"name":"Interactive Strong Link with Icon","props":{"component":"link","emphasis":"strong","icon":"person"},"children":[{"name":"a","native":true,"content":"Interactive Link","props":{"href":"#"}}]},{"name":"Interactive Strong Checkbox with Icon","props":{"component":"checkbox","emphasis":"strong","icon":"person"},"children":[{"name":"label","native":true,"content":"Interactive Checkbox","props":{"for":"checkbox05"},"children":[{"name":"input","native":true,"id":"checkbox05","type":"checkbox"}]}]},{"name":"Interactive Strong Radio 1 with Icon","props":{"component":"radio","emphasis":"strong","icon":"person","identifier":"radio03"},"children":[{"name":"label","native":true,"content":"Interactive Radio 3","props":{"for":"radio03"},"children":[{"name":"input","native":true,"props":{"name":"radio03","id":"radio03","type":"radio"}}]}]},{"name":"Interactive Strong Radio 2 with Icon","props":{"component":"radio","emphasis":"strong","icon":"person","identifier":"radio02"},"children":[{"name":"label","native":true,"content":"Interactive Radio 4","props":{"for":"radio04"},"children":[{"name":"input","native":true,"props":{"name":"radio04","id":"radio04","type":"radio"}}]}]}]}]'),np=n=>{let{semantic:e,disabled:a,children:t,icon:i,overflow:o,noText:l,behaviour:s,emphasis:r,removeButton:c,checked:d,component:b,identifier:h}=n,[u,p]=(0,H.useState)(null!=d&&d);return(0,C.jsxs)(nh.A,{semantic:e,icon:i,noText:l,behaviour:s,emphasis:r,overflow:o,removeButton:c,onRemove:()=>{alert(t.toString())},children:["button"===b&&(0,C.jsx)("button",{children:t}),"link"===b&&(0,C.jsx)("a",{href:"#",children:t}),"checkbox"===b&&(0,C.jsxs)("label",{children:[(0,C.jsx)("input",{type:"checkbox",checked:u,disabled:a,onChange:n=>{p(n.target.checked)}}),t]}),"radio"===b&&(0,C.jsxs)("label",{children:[(0,C.jsx)("input",{type:"radio",checked:d,name:h}),t]}),!b&&!o&&(0,C.jsx)(C.Fragment,{children:t}),!b&&o&&(0,C.jsx)("span",{children:t})]})};var nx=a(79834),ng=a(97518),nm=a(10300),nv=a(7852);let nD=JSON.parse('[{"name":"Density","children":[{"name":"tab-list","children":[{"name":"tab-item","content":"Tab 1"},{"name":"tab-item","content":"Tab 2"},{"name":"tab-item","content":"Tab 3"}]},{"name":"tab-panel","content":"Tab Panel 1"},{"name":"tab-panel","content":"Tab Panel 2"},{"name":"tab-panel","content":"Tab Panel 3"}],"examples":[{"name":"Functional","density":"functional","props":{}},{"name":"(Default) Regular","density":"regular","props":{}},{"name":"Expressive","density":"expressive","props":{}}]},{"name":"Orientation","children":[{"name":"tab-list","children":[{"name":"tab-item","content":"Tab 1"},{"name":"tab-item","content":"Tab 2"},{"name":"tab-item","content":"Tab 3"}]},{"name":"tab-panel","content":"Tab Panel 1"},{"name":"tab-panel","content":"Tab Panel 2"},{"name":"tab-panel","content":"Tab Panel 3"}],"examples":[{"name":"horizontal","props":{"orientation":"horizontal"}},{"name":"vertical","props":{"orientation":"vertical"}}]},{"name":"Width","children":[{"name":"tab-list","children":[{"name":"tab-item","content":"Tab 1"},{"name":"tab-item","content":"Tab 2"},{"name":"tab-item","content":"Tab 3"}]},{"name":"tab-panel","content":"Tab Panel 1"},{"name":"tab-panel","content":"Tab Panel 2"},{"name":"tab-panel","content":"Tab Panel 3"}],"examples":[{"name":"auto","style":{"width":"100%"},"props":{"width":"auto"}},{"name":"full - alignment: start","style":{"width":"100%"},"props":{"width":"full"}},{"name":"full - alignment: center","style":{"width":"100%"},"props":{"width":"full","alignment":"center"}}]},{"name":"Overflow","children":[{"name":"tab-list","children":[{"name":"tab-item","content":"Tab 1"},{"name":"tab-item","content":"Tab 2"},{"name":"tab-item","content":"Tab 3"}]},{"name":"tab-panel","content":"Tab Panel 1"},{"name":"tab-panel","content":"Tab Panel 2"},{"name":"tab-panel","content":"Tab Panel 3"}],"examples":[{"name":"no overflow","style":{"width":"300px"},"props":{"width":"auto"}},{"name":"with overflow - behaviour: arrows","style":{"width":"300px"},"props":{"overflow":true,"behaviour":"arrows"}},{"name":"with overflow - behaviour: scrollbar","style":{"width":"300px"},"props":{"overflow":true}}]},{"name":"Examples","children":[{"name":"tab-list","children":[{"name":"tab-item","content":"Tab 1"},{"name":"tab-item","content":"Tab 2"},{"name":"tab-item","content":"Tab 3"}]},{"name":"tab-panel","content":"Tab Panel 1"},{"name":"tab-panel","content":"Tab Panel 2"},{"name":"tab-panel","content":"Tab Panel 3"}],"examples":[{"name":"2 tab selected","props":{"initialSelectedIndex":1}},{"name":"nothing selected","props":{"initialSelectedMode":"manually"}}]}]'),nB=n=>{let{children:e,orientation:a,width:t,alignment:i,overflow:o,behaviour:l,initialSelectedMode:s,initialSelectedIndex:r}=n;return(0,C.jsxs)("div",{className:"w-full",children:[(0,C.jsxs)($.A,{icon:"none",size:"small",semantic:"informational",children:[e,":"]}),(0,C.jsxs)(nx.A,{orientation:a,width:t,alignment:i,behaviour:l,initialSelectedIndex:r,initialSelectedMode:s,arrowScrollDistance:75,children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Test 1"}),(0,C.jsx)(nm.A,{children:"Test 2"}),(0,C.jsx)(nm.A,{children:"Test 3"}),o&&(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(nm.A,{children:"Test 4"}),(0,C.jsx)(nm.A,{children:"Test 5"})]})]}),(0,C.jsx)(nv.A,{children:"Tab Panel 1"}),(0,C.jsx)(nv.A,{children:"Tab Panel 2"}),(0,C.jsx)(nv.A,{children:"Tab Panel 3"}),o&&(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(nv.A,{children:"Tab Panel 4"}),(0,C.jsx)(nv.A,{children:"Tab Panel 5"})]})]})]})},nj=JSON.parse('[{"name":"Density","examples":[{"name":"Functional","density":"functional","className":"tab-hide-article","props":{"label":"functional"}},{"name":"(Default) Regular","density":"regular","className":"tab-hide-article","props":{"label":"(Default) Regular"}},{"name":"Expressive","density":"expressive","className":"tab-hide-article","props":{"label":"expressive"}}]},{"name":"States","examples":[{"name":"(Default) Enabled","props":{"label":"(Default) Enabled"}},{"name":"active","props":{"label":"active","active":true}},{"name":"disabled","props":{"label":"active","disabled":true}}]},{"name":"Content","examples":[{"name":"(Default) Text","props":{"label":"(Default) Text"}},{"name":"Text - Icon (Leading)","props":{"label":"Text - Icon (Leading)","icon":"db"}},{"name":"Text - Icon (Trailing)","props":{"label":"Text - Icon (Trailing)","iconAfter":"db"}},{"name":"Icon","props":{"icon":"db","noText":true}}]},{"name":"Behaviour","examples":[{"name":"(Default) Auto Width","props":{"label":"(Default) Auto Width"}},{"name":"Width full","style":{"width":"500px"},"props":{"label":"Width full","width":"full"}}]},{"name":"Content Alignment Full Width","examples":[{"name":"Left","style":{"width":"500px"},"props":{"label":"Left","width":"full"}},{"name":"Centered","style":{"width":"500px"},"props":{"label":"Centered","width":"full","alignment":"center"}}]}]'),nf=n=>{let{children:e,active:a,noText:t,icon:i,iconAfter:o,disabled:l}=n;return(0,C.jsx)(ng.A,{children:(0,C.jsx)(nm.A,{active:a,noText:t,icon:i,iconAfter:o,disabled:l,children:e})})},nT=n=>(0,C.jsx)(z,{title:"DBTabItem",isSubComponent:n.isSubComponent,componentName:n.componentName,variants:q(nj,nf,n.slotCode)});var nA=a(39892);let ny=JSON.parse('[{"name":"Density","role":"group","examples":[{"name":"Functional","density":"functional","props":{"name":"Density"}},{"name":"(Default) Regular","density":"regular","props":{"name":"Density"}},{"name":"Expressive","density":"expressive","props":{"name":"Density"}}]},{"name":"Interaction States","role":"group","examples":[{"name":"(Default) Enabled","props":{"name":"Interaction States"}},{"name":"Disabled","props":{"name":"Interaction States","disabled":true}}]},{"name":"States","role":"group","examples":[{"name":"(Default) Unchecked","props":{"name":"States"}},{"name":"Unchecked - Invalid","props":{"name":"States","required":true}},{"name":"Checked","props":{"name":"States","checked":true}},{"name":"Checked - Valid","props":{"name":"States","required":true,"checked":true}},{"name":"Indeterminate","props":{"name":"States","indeterminate":true}},{"name":"Indeterminate - Invalid","props":{"name":"States","indeterminate":true,"required":true}},{"name":"Indeterminate - Valid","props":{"name":"States","indeterminate":true,"required":true}}]},{"name":"Size","role":"group","examples":[{"name":"(Default) Medium","props":{"name":"Size"}},{"name":"Small","props":{"name":"Size","size":"small"}}]},{"name":"Requirement","role":"group","examples":[{"name":"(Default) Optional","props":{"name":"Requirement"}},{"name":"Required","props":{"name":"Requirement","required":true}},{"name":"Required - Indeterminate","props":{"name":"Requirement","indeterminate":true,"required":true}}]},{"name":"Content","role":"group","examples":[{"name":"(Default) Label","props":{"name":"Content"}},{"name":"Long label","style":{"width":"100px"},"props":{"checked":true,"name":"Long label"}},{"name":"No Label","props":{"name":"Content","variant":"hidden"}}]}]'),nk=n=>{let{label:e,size:a,name:t,checked:i,required:o,children:l,disabled:s,indeterminate:r,variant:c}=n;return(0,C.jsx)(nA.A,{label:e,size:a,name:t,defaultChecked:i,required:o,disabled:s,variant:c,indeterminate:r,children:l})};var nw=a(59916);let nN=JSON.parse('[{"name":"Density","examples":[{"name":"Functional","density":"functional","props":{"label":"Label"}},{"name":"(Default) Regular","density":"regular","props":{"label":"Label"}},{"name":"Expressive","density":"expressive","props":{"label":"Label"}}]},{"name":"Variant Label","examples":[{"name":"(Default) Label Above","props":{"label":"Label"}},{"name":"Floating Label","props":{"label":"Label","variant":"floating","value":"Floating Label"}},{"name":"Hidden Label","props":{"label":"Label","variant":"hidden"}}]},{"name":"Variant Helper Message","examples":[{"name":"(Default) Basic","props":{"label":"Label"}},{"name":"Helper Message","props":{"label":"Label","message":"Helper Message"}}]},{"name":"States Label Above","examples":[{"name":"(Default) Empty","props":{"label":"Label"}},{"name":"Filled","props":{"label":"Label","value":"Filled"}},{"name":"Disabled","props":{"label":"Label","disabled":true}},{"name":"Readonly - Filled","props":{"label":"Label","value":"Readonly - Filled","readOnly":true}}]},{"name":"States Floating Label","examples":[{"name":"(Default) Empty","props":{"label":"Label","variant":"floating"}},{"name":"Filled","props":{"label":"Label","value":"Filled","variant":"floating"}},{"name":"Disabled","props":{"label":"Label","disabled":true,"variant":"floating"}},{"name":"Readonly - Filled","props":{"label":"Label","value":"Readonly - Filled","readOnly":true,"variant":"floating"}}]},{"name":"Content","examples":[{"name":"(Default) Text","props":{"label":"Label","value":"(Default) Text"}},{"name":"Filled Number","props":{"label":"Number","value":"123456","type":"number"}},{"name":"Text - Leading Icon","props":{"label":"Label","icon":"db"}},{"name":"Text - Leading Icon - Trailing Icon","props":{"label":"Label","icon":"db","iconAfter":"db"}},{"name":"Text - Trailing Icon","props":{"label":"Label","iconAfter":"db"}}]},{"name":"Requirement","examples":[{"name":"(Default) Optional","props":{"label":"Label"}},{"name":"Required","props":{"label":"Label","required":true}}]},{"name":"Example - Types","examples":[{"name":"(Default) Text","props":{"label":"Label"}},{"name":"Password","props":{"label":"Label","type":"password"}},{"name":"Search","props":{"label":"Label","type":"search"}},{"name":"E-Mail","props":{"label":"Label","type":"email"}},{"name":"Number","props":{"label":"Label","type":"number"}},{"name":"Tel","props":{"label":"Label","type":"tel"}},{"name":"URL","props":{"label":"Label","type":"url"}},{"name":"Date","props":{"label":"Label","type":"date"}},{"name":"Datetime Local","props":{"label":"Label","type":"datetime-local"}},{"name":"Month","props":{"label":"Label","type":"month"}},{"name":"Time","props":{"label":"Label","type":"time"}},{"name":"Week","props":{"label":"Label","type":"week"}},{"name":"Datalist","experimental":true,"props":{"label":"Label","dataList":true}},{"name":"File","experimental":true,"props":{"label":"Label","type":"file"}}]},{"name":"Example - Types - Floating Label","examples":[{"name":"(Default) Text","props":{"label":"Label","variant":"floating"}},{"name":"Password","props":{"label":"Label","type":"password","variant":"floating"}},{"name":"Search","props":{"label":"Label","type":"search","variant":"floating"}},{"name":"E-Mail","props":{"label":"Label","type":"email","variant":"floating"}},{"name":"Number","props":{"label":"Label","type":"number","variant":"floating"}},{"name":"Tel","props":{"label":"Label","type":"tel","variant":"floating"}},{"name":"URL","props":{"label":"Label","type":"url","variant":"floating"}},{"name":"Date","props":{"label":"Label","type":"date","variant":"floating"}},{"name":"Datetime Local","props":{"label":"Label","type":"datetime-local","variant":"floating"}},{"name":"Month","props":{"label":"Label","type":"month","variant":"floating"}},{"name":"Time","props":{"label":"Label","type":"time","variant":"floating"}},{"name":"Week","props":{"label":"Label","type":"week","variant":"floating"}},{"name":"Datalist","experimental":true,"props":{"label":"Label","variant":"floating","dataList":true}},{"name":"File","experimental":true,"props":{"label":"Label","type":"file","variant":"floating"}}]}]'),nI=n=>"floating"===n?["Test 1","Test 2"]:[{value:"test1",label:"Test 1"},{value:"test2",label:"Test 2"}],nC=n=>{let{label:e,value:a,type:t,minLength:i,required:o,disabled:l,iconAfter:s,icon:r,children:c,message:d,variant:b,readOnly:h,dataList:u}=n;return(0,C.jsx)(nw.A,{label:e,message:d,placeholder:c,variant:b,defaultValue:a,type:t,minLength:i,required:o,disabled:l,readOnly:h,iconAfter:s,icon:r,dataList:u?nI(b):void 0})};var nL=a(85980);let nH=JSON.parse('[{"name":"Density","role":"radiogroup","examples":[{"name":"Functional","density":"functional","props":{"name":"Density","value":"functional"}},{"name":"(Default) Regular","density":"regular","props":{"name":"Density","value":"regular"}},{"name":"Expressive","density":"expressive","props":{"name":"Density","value":"expressive"}}]},{"name":"Interaction States","role":"radiogroup","examples":[{"name":"(Default) Enabled","props":{"name":"Interaction States"}},{"name":"Disabled","props":{"name":"Interaction States","disabled":true}}]},{"name":"States","role":"radiogroup","examples":[{"name":"(Default) Unselected","props":{"name":"States"}},{"name":"Unselected - Invalid","props":{"name":"States Required","required":true}},{"name":"Selected","props":{"name":"States","checked":true}},{"name":"Selected - Valid","props":{"name":"States Required","required":true,"checked":true}}]},{"name":"Size","role":"radiogroup","examples":[{"name":"(Default) Medium","props":{"name":"Size"}},{"name":"Small","props":{"name":"Size","size":"small"}}]},{"name":"Requirement","role":"radiogroup","examples":[{"name":"(Default) Optional","props":{"name":"Requirement"}},{"name":"Required","props":{"name":"Requirement","required":true}}]},{"name":"Content","role":"radiogroup","examples":[{"name":"(Default) Label","props":{"name":"Content"}},{"name":"Hidden Label","props":{"name":"Content","variant":"hidden"}}]}]'),n_=n=>{let{label:e,size:a,name:t,checked:i,required:o,children:l,disabled:s,value:r,variant:c}=n;return(0,C.jsx)(nL.A,{label:e,size:a,name:t,defaultChecked:i,required:o,disabled:s,variant:c,value:r,children:l})};var nP=a(47982);let nR=JSON.parse('[{"name":"Density","examples":[{"name":"Functional","density":"functional","style":{"width":"300px"},"props":{"options":[{"value":"Option 1"},{"value":"Option 2"}],"label":"Label"}},{"name":"(Default) Regular","density":"regular","style":{"width":"300px"},"props":{"options":[{"value":"Option 1"},{"value":"Option 2"}],"label":"Label"}},{"name":"Expressive","density":"expressive","style":{"width":"300px"},"props":{"options":[{"value":"Option 1"},{"value":"Option 2"}],"label":"Label"}}]},{"name":"Variant Label","examples":[{"name":"(Default) Label Above","style":{"width":"300px"},"props":{"options":[{"value":"Option 1"},{"value":"Option 2"}],"label":"Label"}},{"name":"Floating Label","style":{"width":"300px"},"props":{"options":[{"value":"Floating Label","selected":true},{"value":"Option 2"}],"label":"Label","variant":"floating","value":"Floating Label"}},{"name":"Hidden Label","style":{"width":"300px"},"props":{"options":[{"value":"Option 1"},{"value":"Option 2"}],"label":"Label","variant":"hidden"}}]},{"name":"Variant Helper Message","examples":[{"name":"(Default) Basic","style":{"width":"300px"},"props":{"options":[{"value":"Option 1"},{"value":"Option 2"}],"label":"Label"}},{"name":"Helper Message","style":{"width":"300px"},"props":{"options":[{"value":"Option 1"},{"value":"Option 2"}],"label":"Label","message":"Helper Message"}}]},{"name":"States Label Above","examples":[{"name":"(Default) Empty","style":{"width":"300px"},"props":{"options":[{"value":"Option 1"},{"value":"Option 2"}],"label":"Label"}},{"name":"Filled","style":{"width":"300px"},"props":{"options":[{"value":"Filled","selected":true},{"value":"Option 2"}],"label":"Label","value":"Filled"}},{"name":"Disabled","style":{"width":"300px"},"props":{"options":[{"value":"Option 1"},{"value":"Option 2"}],"label":"Label","disabled":true}}]},{"name":"States Floating Label","examples":[{"name":"(Default) Empty","style":{"width":"300px"},"props":{"options":[{"value":"Option 1"},{"value":"Option 2"}],"label":"Label","variant":"floating"}},{"name":"Filled","style":{"width":"300px"},"props":{"options":[{"value":"Filled","selected":true},{"value":"Option 2"}],"label":"Label","value":"Filled","variant":"floating"}},{"name":"Disabled","style":{"width":"300px"},"props":{"options":[{"value":"Disabled","selected":true},{"value":"Option 2"}],"label":"Label","disabled":true,"variant":"floating","value":"Disabled"}}]},{"name":"Content","examples":[{"name":"(Default) Text","style":{"width":"300px"},"props":{"options":[{"value":"Option 1"},{"value":"Option 2"}],"label":"Label"}},{"name":"Text - Leading Icon","style":{"width":"300px"},"props":{"options":[{"value":"Option 1"},{"value":"Option 2"}],"label":"Label","icon":"db"}}]},{"name":"Requirement","examples":[{"name":"(Default) Optional","style":{"width":"300px"},"props":{"options":[{"value":"Option 1"},{"value":"Option 2"}],"label":"Label"}},{"name":"Required","style":{"width":"300px"},"props":{"options":[{"value":"Option 1"},{"value":"Option 2"}],"label":"Label","required":true}}]}]'),nS=n=>{let{children:e,label:a,options:t,icon:i,message:o,disabled:l,value:s,required:r,variant:c}=n,[d,b]=(0,H.useState)(s);return(0,C.jsx)(nP.A,{label:a,placeholder:e,options:t,disabled:l,variant:c,icon:i,value:d,onChange:n=>{b(n.target.value)},message:o,required:r,children:e})};var nE=a(98142);let nO=JSON.parse('[{"name":"Density","examples":[{"name":"functional","density":"functional","props":{}},{"name":"regular (Default)","density":"regular","props":{}},{"name":"expressive","density":"expressive","props":{}}]},{"name":"States","examples":[{"name":"(Def) Enabled"},{"name":"Checked","props":{"checked":true}},{"name":"Disabled","props":{"disabled":true}}]},{"name":"Emphasis","examples":[{"name":"(Def) Weak + unchecked","props":{"emphasis":"weak"}},{"name":"Strong + unchecked","props":{"emphasis":"strong"}},{"name":"(Def) Weak + checked","props":{"emphasis":"weak","checked":true}},{"name":"Strong + checked","props":{"emphasis":"strong","checked":true}}]},{"name":"Visual Aid","examples":[{"name":"(Def) No Visual Aid + unchecked","props":{"visualAid":false}},{"name":"Visual Aid + unchecked","props":{"visualAid":true}},{"name":"(Def) No Visual Aid + checked","props":{"visualAid":false,"checked":true}},{"name":"Visual Aid + checked","props":{"visualAid":true,"checked":true}}]},{"name":"Size","examples":[{"name":"(Def) Medium"},{"name":"Small","props":{"size":"small"}}]},{"name":"Content","examples":[{"name":"(Def) Label"},{"name":"No Label","props":{"variant":"hidden"}}]},{"name":"Examples","examples":[{"name":"Custom Icons","props":{"visualAid":true,"icon":"night","iconAfter":"day"}},{"name":"Custom Icons+ Emphasis","props":{"visualAid":true,"icon":"lock_closed","iconAfter":"lock_open","emphasis":"strong"}}]}]'),nF=n=>{let{children:e,checked:a,visualAid:t,disabled:i,variant:o,emphasis:l,size:s,icon:r,iconAfter:c}=n;return(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(nE.A,{visualAid:t,defaultChecked:a,disabled:i,variant:o,size:s,emphasis:l,icon:r,iconAfter:c,children:e}),"hidden"===o&&(0,C.jsx)($.A,{semantic:"informational",icon:"none",children:e})]})};var nM=a(85194);let nV=JSON.parse('[{"name":"Density","examples":[{"name":"Functional","density":"functional","props":{"label":"Label"}},{"name":"(Default) Regular","density":"regular","props":{"label":"Label"}},{"name":"Expressive","density":"expressive","props":{"label":"Label"}}]},{"name":"Variant Label","examples":[{"name":"(Default) Label Above","props":{"label":"Label"}},{"name":"Floating Label","props":{"label":"Label","variant":"floating","value":"Floating Label"}},{"name":"Hidden Label","props":{"label":"Label","variant":"hidden"}}]},{"name":"Variant Helper Message","examples":[{"name":"(Default) Basic","props":{"label":"Label"}},{"name":"Helper Message","props":{"label":"Label","message":"Helper Message"}}]},{"name":"States Label Above","examples":[{"name":"(Default) Empty","props":{"label":"Label"}},{"name":"Filled","props":{"label":"Label","value":"Filled"}},{"name":"Disabled","props":{"label":"Label","disabled":true}},{"name":"Readonly - Filled","props":{"label":"Label","value":"Readonly - Filled","readOnly":true}}]},{"name":"States Floating Label","examples":[{"name":"(Default) Empty","props":{"label":"Label","variant":"floating"}},{"name":"Filled","props":{"label":"Label","value":"Filled","variant":"floating"}},{"name":"Disabled","props":{"label":"Label","disabled":true,"variant":"floating"}},{"name":"Readonly - Filled","props":{"label":"Label","value":"Readonly - Filled","readOnly":true,"variant":"floating"}}]},{"name":"Requirement","examples":[{"name":"(Default) Optional","props":{"label":"Label"}},{"name":"Required","props":{"label":"Label","required":true}}]},{"name":"Rows","examples":[{"name":"(Default) 4 Rows","style":{"width":"328px"},"props":{"label":"(Default) 4 Rows","value":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua."}},{"name":"Custom","style":{"width":"328px"},"props":{"label":"Custom Example 8 Rows","rows":8,"value":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua."}}]}]'),nW=n=>{let{cols:e,disabled:a,message:t,label:i,placeholder:o,rows:l,value:s,readOnly:r,required:c,children:d,variant:b}=n,[h,u]=(0,H.useState)(s);return(0,C.jsx)(nM.A,{cols:e,disabled:a,message:t,label:i,variant:b,readOnly:r,onChange:n=>{u(n.target.value)},required:c,placeholder:null!=o?o:d,rows:l,value:h})};var nz=a(91836);let nU=JSON.parse('[{"name":"Density","examples":[{"name":"functional","density":"functional","style":{"width":"300px"},"props":{"headline":"Headline","icon":"information_circle","behaviour":"closable"}},{"name":"regular (Default)","density":"regular","style":{"width":"300px"},"props":{"headline":"Headline","icon":"information_circle","behaviour":"closable"}},{"name":"expressive","density":"expressive","style":{"width":"300px"},"props":{"headline":"Headline","icon":"information_circle","behaviour":"closable"}}]},{"name":"Variant","examples":[{"name":"(Default) Docked","style":{"width":"300px"},"props":{"variant":"docked","headline":"Headline","icon":"information_circle","behaviour":"closable"}},{"name":"Standalone","style":{"width":"300px"},"props":{"variant":"standalone","headline":"Headline","icon":"information_circle","behaviour":"closable"}},{"name":"Overlay","style":{"width":"300px"},"props":{"variant":"overlay","headline":"Headline","icon":"information_circle","behaviour":"closable","timestamp":"10 min ago"}}]},{"name":"Semantic","examples":[{"name":"(Default) Adaptive","style":{"width":"300px"},"props":{"type":"alert","headline":"Headline","behaviour":"closable"}},{"name":"Neutral","style":{"width":"300px"},"props":{"type":"alert","semantic":"neutral","headline":"Headline","behaviour":"closable"}},{"name":"Critical","style":{"width":"300px"},"props":{"type":"alert","semantic":"critical","headline":"Headline","behaviour":"closable"}},{"name":"Informational","style":{"width":"300px"},"props":{"type":"alert","semantic":"informational","headline":"Headline","behaviour":"closable"}},{"name":"Successful","style":{"width":"300px"},"props":{"type":"alert","semantic":"successful","headline":"Headline","behaviour":"closable"}},{"name":"Warning","style":{"width":"300px"},"props":{"type":"alert","semantic":"warning","headline":"Headline","behaviour":"closable"}}]},{"name":"Behaviour","examples":[{"name":"(Default) Permanent","style":{"width":"300px"},"props":{"behaviour":"permanent"}},{"name":"Closeable","style":{"width":"300px"},"props":{"behaviour":"closable"}}]},{"name":"Content - Variant:Docked","codeFileName":"ContentVariantDocked","examples":[{"name":"Text","style":{"width":"300px"},"props":{"behaviour":"permanent"}},{"name":"Text & Icon","style":{"width":"300px"},"props":{"icon":"information_circle","behaviour":"permanent"}},{"name":"Text & Preview Image","style":{"width":"300px"},"props":{"img":true,"behaviour":"permanent"},"children":[{"name":"img","native":true,"slot":"image","content":"","props":{"src":"/assets/images/placeholder.jpg","alt":""}}]},{"name":"Text & Headline","style":{"width":"300px"},"props":{"headline":"Headline","behaviour":"permanent"}},{"name":"Text & Textlink Block","style":{"width":"300px"},"props":{"link":true,"behaviour":"permanent"},"children":[{"name":"link","slot":"link","content":"Textlink","props":{"href":"#"}}]},{"name":"Text & Textlink Inline","style":{"width":"300px"},"props":{"link":true,"linkVariant":"inline","behaviour":"permanent"},"children":[{"name":"link","slot":"link","content":"Textlink","props":{"href":"#"}}]},{"name":"Text & Headline & Textlink Inline & Cloaseable","style":{"width":"300px"},"props":{"headline":"Headline","link":true,"linkVariant":"inline"},"children":[{"name":"link","slot":"link","content":"Textlink","props":{"href":"#"}}]},{"name":"Text & Icon & Headline & Textlink Inline & Cloaseable","style":{"width":"300px"},"props":{"icon":"information_circle","headline":"Headline","link":true,"linkVariant":"inline"},"children":[{"name":"link","slot":"link","content":"Textlink","props":{"href":"#"}}]}]},{"name":"Content - Variant:Standalone","codeFileName":"ContentVariantStandalone","examples":[{"name":"Text","style":{"width":"300px"},"props":{"variant":"standalone","behaviour":"permanent"}},{"name":"Text & Icon","style":{"width":"300px"},"props":{"icon":"information_circle","variant":"standalone","behaviour":"permanent"}},{"name":"Text & Preview Image","style":{"width":"300px"},"props":{"img":true,"variant":"standalone","behaviour":"permanent"},"children":[{"name":"img","native":true,"slot":"image","content":"","props":{"src":"/assets/images/placeholder.jpg","alt":""}}]},{"name":"Text & Headline","style":{"width":"300px"},"props":{"headline":"Headline","variant":"standalone","behaviour":"permanent"}},{"name":"Text & Textlink Block","style":{"width":"300px"},"props":{"link":true,"variant":"standalone","behaviour":"permanent"},"children":[{"name":"link","slot":"link","content":"Textlink","props":{"href":"#"}}]},{"name":"Text & Textlink Inline","style":{"width":"300px"},"props":{"link":true,"linkVariant":"inline","variant":"standalone","behaviour":"permanent"},"children":[{"name":"link","slot":"link","content":"Textlink","props":{"href":"#"}}]},{"name":"Text & Headline & Textlink Inline & Cloaseable","style":{"width":"300px"},"props":{"headline":"Headline","link":true,"linkVariant":"inline","variant":"standalone"},"children":[{"name":"link","slot":"link","content":"Textlink","props":{"href":"#"}}]},{"name":"Text & Icon & Headline & Textlink Inline & Cloaseable","style":{"width":"300px"},"props":{"icon":"information_circle","headline":"Headline","link":true,"linkVariant":"inline","variant":"standalone"},"children":[{"name":"link","slot":"link","content":"Textlink","props":{"href":"#"}}]}]},{"name":"Content - Variant:Overlay","codeFileName":"ContentVariantOverlay","examples":[{"name":"Text","style":{"width":"300px"},"props":{"variant":"overlay","behaviour":"permanent"}},{"name":"Text & Icon","style":{"width":"300px"},"props":{"icon":"information_circle","variant":"overlay","behaviour":"permanent"}},{"name":"Text & Preview Image","style":{"width":"300px"},"props":{"img":true,"variant":"overlay","behaviour":"permanent"},"children":[{"name":"img","native":true,"slot":"image","content":"","props":{"src":"/assets/images/placeholder.jpg","alt":""}}]},{"name":"Text & Headline","style":{"width":"300px"},"props":{"headline":"Headline","variant":"overlay","behaviour":"permanent"}},{"name":"Text & Textlink Inline","style":{"width":"300px"},"props":{"link":true,"variant":"overlay","behaviour":"permanent"}},{"name":"Text & Headline & Textlink Inline & Cloaseable","style":{"width":"300px"},"props":{"headline":"Headline","link":true,"variant":"overlay"}},{"name":"Text & Icon & Headline & Textlink Inline & Cloaseable","style":{"width":"300px"},"props":{"icon":"information_circle","headline":"Headline","link":true,"variant":"overlay"}},{"name":"Text & Timed","style":{"width":"300px"},"props":{"timestamp":"10 min ago","variant":"overlay","behaviour":"permanent"}},{"name":"Text & Timed & Cloaseable","style":{"width":"300px"},"props":{"timestamp":"10 min ago","variant":"overlay"}},{"name":"Text & Headline & Timed & Cloaseable","style":{"width":"300px"},"props":{"headline":"Headline","timestamp":"10 min ago","variant":"overlay"}},{"name":"Text & Icon & Headline & Timed & Cloaseable","style":{"width":"300px"},"props":{"icon":"information_circle","headline":"Headline","timestamp":"10 min ago","variant":"overlay"}}]}]');var nq=a(39907);let nJ=()=>{var n,e;return(null==nq?void 0:null===(n=nq.env)||void 0===n?void 0:"/mono/review/feat-figma-properties-alignment")?"/mono/review/feat-figma-properties-alignment":null===(e=window.env)||void 0===e?void 0:e.BASE_URL},nG=n=>{let{semantic:e,icon:a,headline:t,variant:i,children:o,behaviour:l,link:s,timestamp:r,linkVariant:c,img:d}=n;return(0,C.jsx)(nz.A,{semantic:e,icon:a,headline:t,link:s?(0,C.jsx)(R.A,{href:"#",children:"Textlink"}):void 0,image:d?(0,C.jsx)("img",{src:"".concat(nJ(),"/assets/images/placeholder.jpg"),alt:"this is a fancy placeholder"}):void 0,variant:i,behaviour:l,linkVariant:c,timestamp:r,onClose:()=>{alert(o.toString())},children:o})};var nY=a(22076),n$=a(80692);let nK=JSON.parse('[{"name":"Density","examples":[{"name":"Functional","density":"functional","props":{}},{"name":"(Default) Regular","density":"regular","props":{}},{"name":"Expressive","density":"expressive","props":{}}]},{"name":"Emphasis","examples":[{"name":"(Default) Weak"},{"name":"Strong","props":{"emphasis":"strong"}}]},{"name":"Semantic","examples":[{"name":"(Default) Adaptive"},{"name":"Neutral","props":{"semantic":"neutral"}},{"name":"Critical","props":{"semantic":"critical"}},{"name":"Informational","props":{"semantic":"informational"}},{"name":"Successful","props":{"semantic":"successful"}},{"name":"Warning","props":{"semantic":"warning"}},{"name":"Adaptive Strong","props":{"emphasis":"strong"}},{"name":"Neutral Strong","props":{"semantic":"neutral","emphasis":"strong"}},{"name":"Critical Strong","props":{"semantic":"critical","emphasis":"strong"}},{"name":"Informational Strong","props":{"semantic":"informational","emphasis":"strong"}},{"name":"Successful Strong","props":{"semantic":"successful","emphasis":"strong"}},{"name":"Warning Strong","props":{"semantic":"warning","emphasis":"strong"}}]},{"name":"Size","examples":[{"name":"(Default) Small"},{"name":"Medium","props":{"size":"medium"}}]},{"name":"Content","examples":[{"name":"(Default) Text"},{"name":"(Default) Text - Medium","props":{"size":"medium"}},{"name":"Dot - Small","content":"","props":{"noContent":true}},{"name":"Dot - Medium","content":"","props":{"noContent":true,"size":"medium"}},{"name":"Icon - Small","props":{"example":"icon"}},{"name":"Icon - Medium","props":{"example":"icon","size":"medium"}}]},{"name":"Placement","examples":[{"name":"(Default) Inline","props":{"placement":"inline"}},{"name":"Corner - Top - Left","content":"","props":{"placement":"corner-top-left"}},{"name":"Corner - Center - Left","content":"","props":{"placement":"corner-center-left"}},{"name":"Corner - Bottom- Left","content":"","props":{"placement":"corner-bottom-left"}},{"name":"Corner - Top - Right","content":"","props":{"placement":"corner-top-right"}},{"name":"Corner - Center - Right","content":"","props":{"placement":"corner-center-right"}},{"name":"Corner - Bottom- Right","content":"","props":{"placement":"corner-bottom-right"}}]},{"name":"Examples","examples":[{"name":"Numbers","props":{"example":"number"}}]}]'),nQ=n=>{let{children:e,semantic:a,emphasis:t,noContent:i,size:o,placement:l,example:s}=n;return(0,C.jsxs)(C.Fragment,{children:[!l&&!s&&(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(nY.A,{semantic:a,emphasis:t,size:o,children:i?"":e}),i&&(0,C.jsx)($.A,{semantic:"informational",size:"small",icon:"none",children:e})]}),l&&"inline"!==l&&!s&&(0,C.jsxs)(C.Fragment,{children:[(0,C.jsxs)(L.A,{icon:"person",variant:"outlined",noText:!0,children:[(0,C.jsx)(nY.A,{size:"small",emphasis:"strong",semantic:"critical",placement:l}),e]}),(0,C.jsx)($.A,{semantic:"informational",size:"small",icon:"none",children:e})]}),"inline"===l&&(0,C.jsx)(C.Fragment,{children:(0,C.jsxs)("div",{className:"badge-inline-container",children:[(0,C.jsx)(n$.A,{icon:"person"}),(0,C.jsx)("span",{children:e}),(0,C.jsx)(nY.A,{size:"small",emphasis:"strong",semantic:"critical",children:"Label"}),(0,C.jsx)(n$.A,{icon:"error"})]})}),"icon"===s&&(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(nY.A,{semantic:"critical",emphasis:"strong",size:o,children:(0,C.jsx)(n$.A,{icon:"person",children:e})}),(0,C.jsx)($.A,{semantic:"informational",size:"small",icon:"none",children:e})]}),"number"===s&&(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(nY.A,{semantic:"successful",children:"9"}),(0,C.jsx)(nY.A,{semantic:"informational",children:"12"}),(0,C.jsx)(nY.A,{semantic:"warning",children:"123"}),(0,C.jsx)(nY.A,{size:"small",emphasis:"strong",semantic:"successful",children:"9"}),(0,C.jsx)(nY.A,{size:"small",emphasis:"strong",semantic:"informational",children:"12"}),(0,C.jsx)(nY.A,{size:"small",emphasis:"strong",semantic:"warning",children:"123"}),(0,C.jsx)($.A,{semantic:"informational",size:"small",icon:"none",children:e})]})]})},nX=JSON.parse('[{"name":"Density","examples":[{"name":"Functional","density":"functional","props":{}},{"name":"(Default) Regular","density":"regular","props":{}},{"name":"Expressive","density":"expressive","props":{}}]},{"name":"Elevation Level","examples":[{"name":"(Default) Level 1 - Adaptive","props":{"elevationLevel":"1"}},{"name":"Level 2 - Adaptive","props":{"elevationLevel":"2"}},{"name":"Level 3 - Adaptive","props":{"elevationLevel":"3"}}]},{"name":"Spacing","examples":[{"name":"(Default) Small","props":{"spacing":"small"}},{"name":"Medium","props":{"spacing":"medium"}},{"name":"Large","props":{"spacing":"large"}},{"name":"None","props":{"spacing":"none"}}]},{"name":"Behaviour","examples":[{"name":"(Default) Non interactive"},{"name":"Interactive","props":{"behaviour":"interactive"}}]},{"name":"Example","examples":[{"name":"Level 1 - Interactive","props":{"elevationLevel":"1","behaviour":"interactive"}},{"name":"Level 2 - Interactive","props":{"elevationLevel":"2","behaviour":"interactive"}},{"name":"Level 3 - Interactive","props":{"elevationLevel":"3","behaviour":"interactive"}}]}]'),nZ=n=>{let{behaviour:e,children:a,spacing:t,elevationLevel:i}=n;return(0,C.jsx)(_.A,{behaviour:e,spacing:t,elevationLevel:i,children:(0,C.jsx)("strong",{children:a})})},n0=JSON.parse('[{"name":"Density","examples":[{"name":"Functional","style":{"width":"200px"},"content":"","density":"functional","props":{"width":"full"}},{"name":"(Default) Regular","style":{"width":"200px"},"content":"","density":"regular","props":{"width":"full"}},{"name":"Expressive","style":{"width":"200px"},"content":"","density":"expressive","props":{"width":"full"}}]},{"name":"Variant","examples":[{"name":"(Default) Adaptive - Horizontal","style":{"width":"200px"},"content":"","props":{"width":"full"}},{"name":"Adaptive - Vertical","style":{"height":"100px"},"content":"","props":{"variant":"vertical","width":"full"}}]},{"name":"Emphasis","examples":[{"name":"(Default) Weak","style":{"width":"200px"},"content":"","props":{"width":"full"}},{"name":"Strong","style":{"width":"200px"},"content":"","props":{"emphasis":"strong","width":"full"}}]}]'),n1=n=>{let{variant:e,emphasis:a,children:t,width:i}=n;return(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)($.A,{size:"small",semantic:"informational",children:t}),(0,C.jsx)(P.A,{variant:e,emphasis:a,width:i})]})};var n2=a(87612);let n3=JSON.parse('[{"name":"Density","examples":[{"name":"Functional","density":"functional","props":{"open":"open","onClose":"toggleDrawer(false)"}},{"name":"(Default) Regular","density":"regular","props":{"open":"open","onClose":"toggleDrawer(false)"}},{"name":"Expressive","density":"expressive","props":{"open":"open","onClose":"toggleDrawer(false)"}}]},{"name":"Size","examples":[{"name":"(Default) Medium","props":{"open":"open","onClose":"toggleDrawer(false)"}},{"name":"Full","props":{"width":"full","open":"open","onClose":"toggleDrawer(false)"}}]},{"name":"Rounded","examples":[{"name":"(Default) No rounding","props":{"open":"open","onClose":"toggleDrawer(false)"}},{"name":"Rounded","props":{"rounded":true,"open":"open","onClose":"toggleDrawer(false)"}}]},{"name":"Spacing","examples":[{"name":"(Default) Medium","props":{"open":"open","onClose":"toggleDrawer(false)"}},{"name":"Small","props":{"spacing":"small","open":"open","onClose":"toggleDrawer(false)"}},{"name":"Large","props":{"spacing":"large","open":"open","onClose":"toggleDrawer(false)"}},{"name":"None","props":{"spacing":"none","open":"open","onClose":"toggleDrawer(false)"}}]},{"name":"Backdrop","examples":[{"name":"(Default) With Backdrop","props":{"open":"open","onClose":"toggleDrawer(false)"}},{"name":"Backdrop-weak","props":{"backdrop":"weak","open":"open","onClose":"toggleDrawer(false)"}},{"name":"Invisible","props":{"backdrop":"invisible","open":"open","onClose":"toggleDrawer(false)"}},{"name":"No Backdrop","props":{"backdrop":"none","open":"open","onClose":"toggleDrawer(false)"}}]},{"name":"Directions","examples":[{"name":"(Default) Right","props":{"open":"open","onClose":"toggleDrawer(false)"}},{"name":"Left","props":{"direction":"left","open":"open","onClose":"toggleDrawer(false)"}},{"name":"Up","props":{"direction":"up","open":"open","onClose":"toggleDrawer(false)"}},{"name":"Down","props":{"direction":"down","open":"open","onClose":"toggleDrawer(false)"}}]},{"name":"Example","examples":[{"name":"(Default) As modal","props":{"variant":"modal","open":"open","onClose":"toggleDrawer(false)"}},{"name":"Inside","props":{"variant":"inside","open":"open","onClose":"toggleDrawer(false)"}}]}]'),n4=n=>{let{id:e,width:a,rounded:t,spacing:i,openDrawer:o,setOpenDrawer:l,direction:s,children:r,backdrop:c,variant:d}=n;return(0,C.jsxs)("div",{children:[(0,C.jsxs)(L.A,{onClick:()=>{l(e)},children:["Open: ",r]}),(0,C.jsx)(n2.A,{rounded:t,width:a,spacing:i,backdrop:c,direction:s,variant:d,open:o===e,onClose:()=>{l(void 0)},children:r})]})};var n5=a(23116),n8=a(61338),n7=a(6900);let n6=JSON.parse('[{"name":"Density","children":[{"name":"brand","slot":"brand","content":"DBHeader"},{"name":"link","slot":"meta-navigation","angularDirective":true,"content":"Imprint","props":{"href":"#"}},{"name":"button","slot":"primary-action","content":"Search","props":{"icon":"magnifying_glass","variant":"ghost","noText":true}},{"name":"button","slot":"secondary-action","angularDirective":true,"content":"Profile","props":{"icon":"person","variant":"ghost","noText":true}},{"name":"navigation","slot":"Navigation","angularDirective":true,"children":[{"name":"navigation-item","props":{"icon":"person"},"children":[{"name":"a","native":true,"slot":"NavigationContent","angularDirective":true,"content":"Link","props":{"href":"#"}}]},{"name":"navigation-item","props":{"icon":"person","disabled":true},"children":[{"name":"a","native":true,"slot":"NavigationContent","angularDirective":true,"content":"Link disabled","props":{"href":"#"}}]}]}],"examples":[{"name":"Functional","density":"functional","props":{},"style":{"width":"100%","display":"block"}},{"name":"(Default) Regular","density":"regular","props":{},"style":{"width":"100%","display":"block"}},{"name":"Expressive","density":"expressive","props":{},"style":{"width":"100%","display":"block"}}]},{"name":"Width","children":[{"name":"brand","slot":"brand","content":"DBHeader"},{"name":"link","slot":"meta-navigation","angularDirective":true,"content":"Imprint","props":{"href":"#"}},{"name":"button","slot":"primary-action","content":"Search","props":{"icon":"magnifying_glass","variant":"ghost","noText":true}},{"name":"button","slot":"secondary-action","angularDirective":true,"content":"Profile","props":{"icon":"person","variant":"ghost","noText":true}},{"name":"navigation","slot":"Navigation","angularDirective":true,"children":[{"name":"navigation-item","props":{"icon":"person"},"children":[{"name":"a","native":true,"slot":"NavigationContent","angularDirective":true,"content":"Link","props":{"href":"#"}}]},{"name":"navigation-item","props":{"icon":"person","disabled":true},"children":[{"name":"a","native":true,"slot":"NavigationContent","angularDirective":true,"content":"Link disabled","props":{"href":"#"}}]}]}],"examples":[{"name":"Full","style":{"width":"100%","display":"block"}},{"name":"Medium","style":{"width":"100%","display":"block"},"props":{"width":"medium"}},{"name":"Large","style":{"width":"100%","display":"block"},"props":{"width":"large"}}]},{"name":"Behaviour","children":[{"name":"brand","slot":"brand","content":"DBHeader"},{"name":"link","slot":"meta-navigation","angularDirective":true,"content":"Imprint","props":{"href":"#"}},{"name":"button","slot":"primary-action","content":"Search","props":{"icon":"magnifying_glass","variant":"ghost","noText":true}},{"name":"button","slot":"secondary-action","angularDirective":true,"content":"Profile","props":{"icon":"person","variant":"ghost","noText":true}},{"name":"navigation","slot":"Navigation","angularDirective":true,"children":[{"name":"navigation-item","props":{"icon":"person"},"children":[{"name":"a","native":true,"slot":"NavigationContent","angularDirective":true,"content":"Link","props":{"href":"#"}}]},{"name":"navigation-item","props":{"icon":"person","disabled":true},"children":[{"name":"a","native":true,"slot":"NavigationContent","angularDirective":true,"content":"Link disabled","props":{"href":"#"}}]}]}],"examples":[{"name":"Desktop (full width)","style":{"width":"100%","display":"block"}},{"name":"Mobile","style":{"width":"100%","display":"block"},"props":{"forceMobile":"true"}}]},{"name":"Examples","children":[{"name":"brand","slot":"brand","content":"DBHeader"},{"name":"link","slot":"meta-navigation","angularDirective":true,"content":"Imprint","props":{"href":"#"}},{"name":"button","slot":"primary-action","content":"Search","props":{"icon":"magnifying_glass","variant":"ghost","noText":true}},{"name":"button","slot":"secondary-action","angularDirective":true,"content":"Profile","props":{"icon":"person","variant":"ghost","noText":true}},{"name":"navigation","slot":"Navigation","angularDirective":true,"children":[{"name":"navigation-item","props":{"icon":"person"},"children":[{"name":"a","native":true,"slot":"NavigationContent","angularDirective":true,"content":"Link","props":{"href":"#"}}]},{"name":"navigation-item","props":{"icon":"person","disabled":true},"children":[{"name":"a","native":true,"slot":"NavigationContent","angularDirective":true,"content":"Link disabled","props":{"href":"#"}}]}]}],"examples":[{"name":"With Application Name + Navigation","style":{"width":"100%","display":"block"},"props":{"example":true,"withName":true,"withNavigation":true}},{"name":"Without Navigation","style":{"width":"100%","display":"block"},"props":{"example":true,"withName":true,"withNavigation":false}},{"name":"Without Application Name","style":{"width":"100%","display":"block"},"props":{"example":true,"withName":false,"withNavigation":true}},{"name":"Without Application Name + Navigation","style":{"width":"100%","display":"block"},"props":{"example":true,"withName":false,"withNavigation":false}}]}]'),n9=n=>{let{drawerOpen:e,forceMobile:a,burgerMenuLabel:t,children:i,className:o,describedbyid:l,id:s,key:r,onToggle:c,width:d,example:b,withNavigation:h,withName:u}=n;return(0,C.jsx)(n5.A,{width:d,brand:(0,C.jsx)(nt.A,{title:"DBHeader",children:(!b||u)&&"DBHeader"}),metaNavigation:!b&&(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(R.A,{href:"#",children:"Imprint"}),(0,C.jsx)(R.A,{href:"#",children:"Help"})]}),primaryAction:!b&&(0,C.jsx)(L.A,{icon:"magnifying_glass",variant:"ghost",noText:!0,children:"Search"}),secondaryAction:!b&&(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(L.A,{icon:"person",variant:"ghost",noText:!0,children:"Profile"}),(0,C.jsx)(L.A,{icon:"bell",variant:"ghost",noText:!0,children:"Notification"}),(0,C.jsx)(L.A,{icon:"question_mark_circle",variant:"ghost",noText:!0,children:"Help"})]}),drawerOpen:e,forceMobile:a,burgerMenuLabel:t,className:o,describedbyid:l,id:s,onToggle:c,children:(!b||h)&&(0,C.jsxs)(n8.A,{"aria-label":i,children:[(0,C.jsx)(n7.A,{icon:"person",children:(0,C.jsx)("a",{href:"#",children:i})}),(0,C.jsx)(n7.A,{disabled:!0,children:(0,C.jsxs)("a",{href:"#",children:[i," disabled"]})})]})},r)};var en=a(12764);let ee=JSON.parse('[{"name":"Density","examples":[{"name":"Functional","density":"functional","props":{}},{"name":"(Default) Regular","density":"regular","props":{}},{"name":"Expressive","density":"expressive","props":{}}]},{"name":"Width","examples":[{"name":"(Default) Full","style":{"width":"100%","display":"block"}},{"name":"Medium","style":{"width":"100%","display":"block"},"props":{"width":"medium"}},{"name":"Large","style":{"width":"100%","display":"block"},"props":{"width":"large"}}]},{"name":"Spacing","examples":[{"name":"(Default) Medium","props":{"spacing":"medium"}},{"name":"Large","props":{"spacing":"large"}},{"name":"Small","props":{"spacing":"small"}},{"name":"None","props":{"spacing":"none"}}]}]'),ea=n=>{let{width:e,spacing:a,children:t}=n;return(0,C.jsx)(en.A,{className:"db-informational-bg-basic-level-2",spacing:a,width:e,children:t})},et=JSON.parse('[{"name":"Density","children":[{"name":"navigation-item","content":"Navi-Item 1","children":[{"name":"navigation-item","content":"Sub-Navi-Item 1","slot":"sub-navigation","children":[{"name":"navigation-item","slot":"sub-navigation","props":{"active":true},"children":[{"name":"a","native":true,"content":"Sub-Sub-Navi-Item 1","props":{"href":"#"}}]}]}]},{"name":"navigation-item","children":[{"name":"a","native":true,"content":"Navi-Item 2","props":{"href":"#"}}]}],"examples":[{"name":"Functional","density":"functional","props":{}},{"name":"(Default) Regular","density":"regular","props":{}},{"name":"Expressive","density":"expressive","props":{}}]}]'),ei=n=>{let{children:e}=n,a="".concat(e.replaceAll(/\W/g,"_").toLowerCase());return(0,C.jsxs)("div",{children:[(0,C.jsx)($.A,{id:a,size:"small",semantic:"informational",icon:"none",children:e}),(0,C.jsxs)(n8.A,{labelledBy:a,children:[(0,C.jsx)(n7.A,{subNavigation:(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(n7.A,{subNavigation:(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(n7.A,{children:(0,C.jsx)("a",{href:"#","aria-current":"page",children:"Sub-Sub-Navi-Item 1"})}),(0,C.jsx)(n7.A,{children:(0,C.jsx)("a",{href:"#",children:"Sub-Sub-Navi-Item 2"})})]}),children:"Sub-Navi-Item 1"}),(0,C.jsx)(n7.A,{children:(0,C.jsx)("a",{href:"#",children:"Sub-Navi-Item 2"})})]}),children:"Navi-Item 1"}),(0,C.jsx)(n7.A,{icon:"person",children:(0,C.jsx)("a",{href:"#",children:"Navi-Item 2"})}),(0,C.jsx)(n7.A,{disabled:!0,children:(0,C.jsx)("a",{href:"#",children:"Navi-Item 3"})})]})]})},eo=JSON.parse('[{"name":"Density","examples":[{"name":"Functional","density":"functional","props":{},"children":[{"name":"a","native":true,"props":{"href":"#"},"content":"Functional"}]},{"name":"(Default) Regular","density":"regular","props":{},"children":[{"name":"a","native":true,"props":{"href":"#"},"content":"(Default) Regular"}]},{"name":"Expressive","density":"expressive","props":{},"children":[{"name":"a","native":true,"props":{"href":"#"},"content":"Expressive"}]}]},{"name":"Interaction-States","examples":[{"name":"Enabled (Default)/Hover/Pressed","children":[{"name":"a","native":true,"props":{"href":"#"},"content":"Enabled (Default)/Hover/Pressed"}]},{"name":"Active","props":{"active":true},"children":[{"name":"a","native":true,"props":{"href":"#"},"content":"Active"}]},{"name":"Disabled","props":{"disabled":true},"children":[{"name":"a","native":true,"props":{"href":"#"},"content":"Disabled"}]}]},{"name":"Content","examples":[{"name":"(Default) Text","props":{"areaPopup":false},"children":[{"name":"a","native":true,"props":{"href":"#"},"content":"(Default) Text"}]},{"name":"Text - Icon (Leading)","props":{"icon":"person"},"children":[{"name":"a","native":true,"props":{"href":"#"},"content":"Text - Icon (Leading)"}]},{"name":"Text - Icons (Leading, Chevron)","props":{"icon":"person","areaPopup":true},"children":[{"name":"a","native":true,"props":{"href":"#"},"content":"Text - Icons (Leading, Chevron)"}]},{"name":"Text - Icon (Chevron)","props":{"areaPopup":true},"children":[{"name":"a","native":true,"props":{"href":"#"},"content":"Text - Icon (Chevron)"}]}]},{"name":"Width","examples":[{"name":"(Default) Auto","style":{"width":"400px"},"children":[{"name":"a","native":true,"props":{"href":"#"},"content":"(Default) Auto"}]},{"name":"Full","style":{"width":"400px"},"props":{"width":"full"},"children":[{"name":"a","native":true,"props":{"href":"#"},"content":"Full"}]}]}]'),el=n=>{let{children:e,icon:a,disabled:t,active:i,width:o,areaPopup:l}=n;return(0,C.jsx)("ul",{children:(0,C.jsx)(n7.A,{icon:a,disabled:t,active:i,width:o,onClick:()=>{alert(e.toString())},subNavigation:l&&(0,C.jsxs)("ul",{children:[(0,C.jsx)(n7.A,{children:(0,C.jsx)("a",{href:"#",children:"Test1"})}),(0,C.jsx)(n7.A,{children:(0,C.jsx)("a",{href:"#",children:"Test2"})})]}),children:l?e:(0,C.jsx)("a",{href:"#",children:e})})})},es=n=>(0,C.jsx)(z,{title:"DBNavigationItem",isSubComponent:n.isSubComponent,componentName:n.componentName,variants:q(eo,el,n.slotCode)});var er=a(36428);let ec=JSON.parse('[{"name":"Density","children":[{"name":"button","slot":"trigger"},{"name":"button","content":"Inside Popover"}],"examples":[{"name":"Functional","density":"functional","props":{"id":"popover-01"}},{"name":"(Default) Regular","density":"regular","props":{"id":"popover-02"}},{"name":"Expressive","density":"expressive","props":{"id":"popover-03"}}]},{"name":"Spacing","children":[{"name":"button","slot":"trigger"},{"name":"button","content":"Inside Popover"}],"examples":[{"name":"(Default) Small","props":{"spacing":"small","id":"popover-04"}},{"name":"Medium","props":{"spacing":"medium","id":"popover-05"}},{"name":"Large","props":{"spacing":"large","id":"popover-055"}},{"name":"None","props":{"spacing":"none","id":"popover-06"}}]},{"name":"Placement","children":[{"name":"button","slot":"trigger"},{"name":"button","content":"Inside Popover"}],"examples":[{"name":"bottom-start","props":{"placement":"bottom-start","id":"popover-07-start"}},{"name":"(Default) bottom","props":{"placement":"bottom","id":"popover-07"}},{"name":"bottom-end","props":{"placement":"bottom-end","id":"popover-07-end"}},{"name":"left-start","props":{"placement":"left-start","id":"popover-09-start"}},{"name":"left","props":{"placement":"left","id":"popover-09"}},{"name":"left-end","props":{"placement":"left-end","id":"popover-09-end"}},{"name":"right-start","props":{"placement":"right-start","id":"popover-10-start"}},{"name":"right","props":{"placement":"right","id":"popover-10"}},{"name":"right-end","props":{"placement":"right-end","id":"popover-10-end"}},{"name":"top-start","props":{"placement":"top-start","id":"popover-08-start"}},{"name":"top","props":{"placement":"top","id":"popover-08"}},{"name":"top-end","props":{"placement":"top-end","id":"popover-08-end"}}]},{"name":"Gap","children":[{"name":"button","slot":"trigger"},{"name":"button","content":"Inside Popover"}],"examples":[{"name":"(Default) No gap","props":{"id":"popover-11"}},{"name":"With gap","props":{"gap":true,"id":"popover-12"}}]},{"name":"Animations","children":[{"name":"button","slot":"trigger"},{"name":"button","content":"Inside Popover"}],"examples":[{"name":"(Default) Animation no delay","props":{"id":"popover-13"}},{"name":"Delay slow","props":{"delay":"slow","id":"popover-14"}},{"name":"Delay fast","props":{"delay":"fast","id":"popover-15"}},{"name":"No animation","props":{"animation":"disabled","id":"popover-16"}}]},{"name":"Width","children":[{"name":"button","slot":"trigger"},{"name":"button","content":"Inside Popover"}],"examples":[{"name":"(Default) Auto","props":{"content":"Max width, lorem ipsum dolor sit amet, consetetur sadipscing","id":"popover-17"}},{"name":"Fixed","props":{"content":"Max width, lorem ipsum dolor sit amet, consetetur sadipscing","width":"fixed","id":"popover-18"}}]}]'),ed=n=>{let{id:e,children:a,width:t,gap:i,spacing:o,placement:l,delay:s,content:r,animation:c}=n;return(0,C.jsx)(er.A,{trigger:(0,C.jsx)(L.A,{children:a}),width:t,gap:i,spacing:o,placement:l,animation:c,delay:s,id:e,children:null!=r?r:(0,C.jsxs)(C.Fragment,{children:[(0,C.jsxs)("ul",{className:"popover-list",children:[(0,C.jsx)("li",{children:"Popover Custom Item 1"}),(0,C.jsx)("li",{children:"Popover Custom Item 2"})]}),(0,C.jsx)(L.A,{children:"Popover Custom Item 3"})]})})},eb=()=>{let[n,e]=(0,H.useState)();return(0,H.useEffect)(()=>{n&&setTimeout(()=>e(""),1500)},[n]),(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:" Functional "})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:" Functional "===n?"check":"copy",variant:"ghost",onClick:()=>{e(" Functional "),navigator.clipboard.writeText(" Functional ")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:''})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:''===n?"check":"copy",variant:"ghost",onClick:()=>{e(''),navigator.clipboard.writeText('')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:"Functional"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"Functional"===n?"check":"copy",variant:"ghost",onClick:()=>{e("Functional"),navigator.clipboard.writeText("Functional")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:"\nFunctional\n"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"\nFunctional\n"===n?"check":"copy",variant:"ghost",onClick:()=>{e("\nFunctional\n"),navigator.clipboard.writeText("\nFunctional\n")},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:" (Default) Regular "})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:" (Default) Regular "===n?"check":"copy",variant:"ghost",onClick:()=>{e(" (Default) Regular "),navigator.clipboard.writeText(" (Default) Regular ")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:''})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:''===n?"check":"copy",variant:"ghost",onClick:()=>{e(''),navigator.clipboard.writeText('')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:"(Default) Regular"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"(Default) Regular"===n?"check":"copy",variant:"ghost",onClick:()=>{e("(Default) Regular"),navigator.clipboard.writeText("(Default) Regular")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:"\n(Default) Regular\n"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"\n(Default) Regular\n"===n?"check":"copy",variant:"ghost",onClick:()=>{e("\n(Default) Regular\n"),navigator.clipboard.writeText("\n(Default) Regular\n")},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:" Expressive "})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:" Expressive "===n?"check":"copy",variant:"ghost",onClick:()=>{e(" Expressive "),navigator.clipboard.writeText(" Expressive ")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:''})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:''===n?"check":"copy",variant:"ghost",onClick:()=>{e(''),navigator.clipboard.writeText('')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:"Expressive"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"Expressive"===n?"check":"copy",variant:"ghost",onClick:()=>{e("Expressive"),navigator.clipboard.writeText("Expressive")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:"\nExpressive\n"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"\nExpressive\n"===n?"check":"copy",variant:"ghost",onClick:()=>{e("\nExpressive\n"),navigator.clipboard.writeText("\nExpressive\n")},children:"Copy code"})]})]})})]})},eh=()=>{let[n,e]=(0,H.useState)();return(0,H.useEffect)(()=>{n&&setTimeout(()=>e(""),1500)},[n]),(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:" (Default) Outlined - Adaptive "})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:" (Default) Outlined - Adaptive "===n?"check":"copy",variant:"ghost",onClick:()=>{e(" (Default) Outlined - Adaptive "),navigator.clipboard.writeText(" (Default) Outlined - Adaptive ")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:''})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:''===n?"check":"copy",variant:"ghost",onClick:()=>{e(''),navigator.clipboard.writeText('')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:"(Default) Outlined - Adaptive"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"(Default) Outlined - Adaptive"===n?"check":"copy",variant:"ghost",onClick:()=>{e("(Default) Outlined - Adaptive"),navigator.clipboard.writeText("(Default) Outlined - Adaptive")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:"\n(Default) Outlined - Adaptive\n"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"\n(Default) Outlined - Adaptive\n"===n?"check":"copy",variant:"ghost",onClick:()=>{e("\n(Default) Outlined - Adaptive\n"),navigator.clipboard.writeText("\n(Default) Outlined - Adaptive\n")},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' Filled - Adaptive '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' Filled - Adaptive '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' Filled - Adaptive '),navigator.clipboard.writeText(' Filled - Adaptive ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:''})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:''===n?"check":"copy",variant:"ghost",onClick:()=>{e(''),navigator.clipboard.writeText('')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'Filled - Adaptive'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'Filled - Adaptive'===n?"check":"copy",variant:"ghost",onClick:()=>{e('Filled - Adaptive'),navigator.clipboard.writeText('Filled - Adaptive')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nFilled - Adaptive\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nFilled - Adaptive\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nFilled - Adaptive\n'),navigator.clipboard.writeText('\nFilled - Adaptive\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' Ghost - Adaptive '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' Ghost - Adaptive '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' Ghost - Adaptive '),navigator.clipboard.writeText(' Ghost - Adaptive ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:''})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:''===n?"check":"copy",variant:"ghost",onClick:()=>{e(''),navigator.clipboard.writeText('')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'Ghost - Adaptive'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'Ghost - Adaptive'===n?"check":"copy",variant:"ghost",onClick:()=>{e('Ghost - Adaptive'),navigator.clipboard.writeText('Ghost - Adaptive')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nGhost - Adaptive\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nGhost - Adaptive\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nGhost - Adaptive\n'),navigator.clipboard.writeText('\nGhost - Adaptive\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' Brand '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' Brand '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' Brand '),navigator.clipboard.writeText(' Brand ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:''})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:''===n?"check":"copy",variant:"ghost",onClick:()=>{e(''),navigator.clipboard.writeText('')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'Brand'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'Brand'===n?"check":"copy",variant:"ghost",onClick:()=>{e('Brand'),navigator.clipboard.writeText('Brand')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nBrand\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nBrand\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nBrand\n'),navigator.clipboard.writeText('\nBrand\n')},children:"Copy code"})]})]})})]})},eu=()=>{let[n,e]=(0,H.useState)();return(0,H.useEffect)(()=>{n&&setTimeout(()=>e(""),1500)},[n]),(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:" (Default) Enabled "})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:" (Default) Enabled "===n?"check":"copy",variant:"ghost",onClick:()=>{e(" (Default) Enabled "),navigator.clipboard.writeText(" (Default) Enabled ")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:''})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:''===n?"check":"copy",variant:"ghost",onClick:()=>{e(''),navigator.clipboard.writeText('')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:"(Default) Enabled"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"(Default) Enabled"===n?"check":"copy",variant:"ghost",onClick:()=>{e("(Default) Enabled"),navigator.clipboard.writeText("(Default) Enabled")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:"\n(Default) Enabled\n"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"\n(Default) Enabled\n"===n?"check":"copy",variant:"ghost",onClick:()=>{e("\n(Default) Enabled\n"),navigator.clipboard.writeText("\n(Default) Enabled\n")},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' Disabled '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' Disabled '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' Disabled '),navigator.clipboard.writeText(' Disabled ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:''})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:''===n?"check":"copy",variant:"ghost",onClick:()=>{e(''),navigator.clipboard.writeText('')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:"Disabled"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"Disabled"===n?"check":"copy",variant:"ghost",onClick:()=>{e("Disabled"),navigator.clipboard.writeText("Disabled")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nDisabled\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nDisabled\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nDisabled\n'),navigator.clipboard.writeText('\nDisabled\n')},children:"Copy code"})]})]})})]})},ep=()=>{let[n,e]=(0,H.useState)();return(0,H.useEffect)(()=>{n&&setTimeout(()=>e(""),1500)},[n]),(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:" (Default) Medium "})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:" (Default) Medium "===n?"check":"copy",variant:"ghost",onClick:()=>{e(" (Default) Medium "),navigator.clipboard.writeText(" (Default) Medium ")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:''})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:''===n?"check":"copy",variant:"ghost",onClick:()=>{e(''),navigator.clipboard.writeText('')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:"(Default) Medium"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"(Default) Medium"===n?"check":"copy",variant:"ghost",onClick:()=>{e("(Default) Medium"),navigator.clipboard.writeText("(Default) Medium")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:"\n(Default) Medium\n"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"\n(Default) Medium\n"===n?"check":"copy",variant:"ghost",onClick:()=>{e("\n(Default) Medium\n"),navigator.clipboard.writeText("\n(Default) Medium\n")},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' Small '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' Small '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' Small '),navigator.clipboard.writeText(' Small ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:''})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:''===n?"check":"copy",variant:"ghost",onClick:()=>{e(''),navigator.clipboard.writeText('')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'Small'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'Small'===n?"check":"copy",variant:"ghost",onClick:()=>{e('Small'),navigator.clipboard.writeText('Small')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nSmall\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nSmall\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nSmall\n'),navigator.clipboard.writeText('\nSmall\n')},children:"Copy code"})]})]})})]})},ex=()=>{let[n,e]=(0,H.useState)();return(0,H.useEffect)(()=>{n&&setTimeout(()=>e(""),1500)},[n]),(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:" (Default) Text "})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:" (Default) Text "===n?"check":"copy",variant:"ghost",onClick:()=>{e(" (Default) Text "),navigator.clipboard.writeText(" (Default) Text ")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:''})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:''===n?"check":"copy",variant:"ghost",onClick:()=>{e(''),navigator.clipboard.writeText('')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:"(Default) Text"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"(Default) Text"===n?"check":"copy",variant:"ghost",onClick:()=>{e("(Default) Text"),navigator.clipboard.writeText("(Default) Text")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:"\n(Default) Text\n"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"\n(Default) Text\n"===n?"check":"copy",variant:"ghost",onClick:()=>{e("\n(Default) Text\n"),navigator.clipboard.writeText("\n(Default) Text\n")},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' Icon & Text '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' Icon & Text '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' Icon & Text '),navigator.clipboard.writeText(' Icon & Text ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:''})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:''===n?"check":"copy",variant:"ghost",onClick:()=>{e(''),navigator.clipboard.writeText('')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'Icon & Text'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'Icon & Text'===n?"check":"copy",variant:"ghost",onClick:()=>{e('Icon & Text'),navigator.clipboard.writeText('Icon & Text')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nIcon & Text\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nIcon & Text\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nIcon & Text\n'),navigator.clipboard.writeText('\nIcon & Text\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' Icon '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' Icon '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' Icon '),navigator.clipboard.writeText(' Icon ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:''})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:''===n?"check":"copy",variant:"ghost",onClick:()=>{e(''),navigator.clipboard.writeText('')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n Icon\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Icon\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Icon\n'),navigator.clipboard.writeText('\n Icon\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nIcon\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nIcon\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nIcon\n'),navigator.clipboard.writeText('\nIcon\n')},children:"Copy code"})]})]})})]})},eg=()=>{let[n,e]=(0,H.useState)();return(0,H.useEffect)(()=>{n&&setTimeout(()=>e(""),1500)},[n]),(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:" (Default) Auto Width "})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:" (Default) Auto Width "===n?"check":"copy",variant:"ghost",onClick:()=>{e(" (Default) Auto Width "),navigator.clipboard.writeText(" (Default) Auto Width ")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:''})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:''===n?"check":"copy",variant:"ghost",onClick:()=>{e(''),navigator.clipboard.writeText('')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:"(Default) Auto Width"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"(Default) Auto Width"===n?"check":"copy",variant:"ghost",onClick:()=>{e("(Default) Auto Width"),navigator.clipboard.writeText("(Default) Auto Width")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:"\n(Default) Auto Width\n"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"\n(Default) Auto Width\n"===n?"check":"copy",variant:"ghost",onClick:()=>{e("\n(Default) Auto Width\n"),navigator.clipboard.writeText("\n(Default) Auto Width\n")},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' Width full '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' Width full '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' Width full '),navigator.clipboard.writeText(' Width full ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:''})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:''===n?"check":"copy",variant:"ghost",onClick:()=>{e(''),navigator.clipboard.writeText('')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'Width full'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'Width full'===n?"check":"copy",variant:"ghost",onClick:()=>{e('Width full'),navigator.clipboard.writeText('Width full')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nWidth full\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nWidth full\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nWidth full\n'),navigator.clipboard.writeText('\nWidth full\n')},children:"Copy code"})]})]})})]})},em=()=>{let[n,e]=(0,H.useState)();return(0,H.useEffect)(()=>{n&&setTimeout(()=>e(""),1500)},[n]),(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' Functional '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' Functional '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' Functional '),navigator.clipboard.writeText(' Functional ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'Functional'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'Functional'===n?"check":"copy",variant:"ghost",onClick:()=>{e('Functional'),navigator.clipboard.writeText('Functional')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'Functional'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'Functional'===n?"check":"copy",variant:"ghost",onClick:()=>{e('Functional'),navigator.clipboard.writeText('Functional')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nFunctional\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nFunctional\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nFunctional\n'),navigator.clipboard.writeText('\nFunctional\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' (Default) Regular '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' (Default) Regular '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' (Default) Regular '),navigator.clipboard.writeText(' (Default) Regular ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'(Default) Regular'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'(Default) Regular'===n?"check":"copy",variant:"ghost",onClick:()=>{e('(Default) Regular'),navigator.clipboard.writeText('(Default) Regular')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'(Default) Regular'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'(Default) Regular'===n?"check":"copy",variant:"ghost",onClick:()=>{e('(Default) Regular'),navigator.clipboard.writeText('(Default) Regular')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n(Default) Regular\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n(Default) Regular\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n(Default) Regular\n'),navigator.clipboard.writeText('\n(Default) Regular\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' Expressive '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' Expressive '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' Expressive '),navigator.clipboard.writeText(' Expressive ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'Expressive'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'Expressive'===n?"check":"copy",variant:"ghost",onClick:()=>{e('Expressive'),navigator.clipboard.writeText('Expressive')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'Expressive'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'Expressive'===n?"check":"copy",variant:"ghost",onClick:()=>{e('Expressive'),navigator.clipboard.writeText('Expressive')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nExpressive\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nExpressive\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nExpressive\n'),navigator.clipboard.writeText('\nExpressive\n')},children:"Copy code"})]})]})})]})},ev=()=>{let[n,e]=(0,H.useState)();return(0,H.useEffect)(()=>{n&&setTimeout(()=>e(""),1500)},[n]),(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' (Default) Adaptive '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' (Default) Adaptive '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' (Default) Adaptive '),navigator.clipboard.writeText(' (Default) Adaptive ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'(Default) Adaptive'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'(Default) Adaptive'===n?"check":"copy",variant:"ghost",onClick:()=>{e('(Default) Adaptive'),navigator.clipboard.writeText('(Default) Adaptive')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'(Default) Adaptive'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'(Default) Adaptive'===n?"check":"copy",variant:"ghost",onClick:()=>{e('(Default) Adaptive'),navigator.clipboard.writeText('(Default) Adaptive')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n(Default) Adaptive\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n(Default) Adaptive\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n(Default) Adaptive\n'),navigator.clipboard.writeText('\n(Default) Adaptive\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' Brand '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' Brand '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' Brand '),navigator.clipboard.writeText(' Brand ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'Brand'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'Brand'===n?"check":"copy",variant:"ghost",onClick:()=>{e('Brand'),navigator.clipboard.writeText('Brand')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n Brand\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Brand\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Brand\n'),navigator.clipboard.writeText('\n Brand\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nBrand\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nBrand\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nBrand\n'),navigator.clipboard.writeText('\nBrand\n')},children:"Copy code"})]})]})})]})},eD=()=>{let[n,e]=(0,H.useState)();return(0,H.useEffect)(()=>{n&&setTimeout(()=>e(""),1500)},[n]),(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' Enabled (Default)/Hover/Pressed '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' Enabled (Default)/Hover/Pressed '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' Enabled (Default)/Hover/Pressed '),navigator.clipboard.writeText(' Enabled (Default)/Hover/Pressed ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:"undefined"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"undefined"===n?"check":"copy",variant:"ghost",onClick:()=>{e("undefined"),navigator.clipboard.writeText("undefined")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'Enabled (Default)/Hover/Pressed'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'Enabled (Default)/Hover/Pressed'===n?"check":"copy",variant:"ghost",onClick:()=>{e('Enabled (Default)/Hover/Pressed'),navigator.clipboard.writeText('Enabled (Default)/Hover/Pressed')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nEnabled (Default)/Hover/Pressed\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nEnabled (Default)/Hover/Pressed\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nEnabled (Default)/Hover/Pressed\n'),navigator.clipboard.writeText('\nEnabled (Default)/Hover/Pressed\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' Disabled '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' Disabled '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' Disabled '),navigator.clipboard.writeText(' Disabled ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:"undefined"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"undefined"===n?"check":"copy",variant:"ghost",onClick:()=>{e("undefined"),navigator.clipboard.writeText("undefined")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n Disabled\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Disabled\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Disabled\n'),navigator.clipboard.writeText('\n Disabled\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nDisabled\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nDisabled\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nDisabled\n'),navigator.clipboard.writeText('\nDisabled\n')},children:"Copy code"})]})]})})]})},eB=()=>{let[n,e]=(0,H.useState)();return(0,H.useEffect)(()=>{n&&setTimeout(()=>e(""),1500)},[n]),(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' (Default) Medium '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' (Default) Medium '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' (Default) Medium '),navigator.clipboard.writeText(' (Default) Medium ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'(Default) Medium'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'(Default) Medium'===n?"check":"copy",variant:"ghost",onClick:()=>{e('(Default) Medium'),navigator.clipboard.writeText('(Default) Medium')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'(Default) Medium'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'(Default) Medium'===n?"check":"copy",variant:"ghost",onClick:()=>{e('(Default) Medium'),navigator.clipboard.writeText('(Default) Medium')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n(Default) Medium\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n(Default) Medium\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n(Default) Medium\n'),navigator.clipboard.writeText('\n(Default) Medium\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' Small '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' Small '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' Small '),navigator.clipboard.writeText(' Small ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'Small'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'Small'===n?"check":"copy",variant:"ghost",onClick:()=>{e('Small'),navigator.clipboard.writeText('Small')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n Small\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Small\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Small\n'),navigator.clipboard.writeText('\n Small\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nSmall\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nSmall\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nSmall\n'),navigator.clipboard.writeText('\nSmall\n')},children:"Copy code"})]})]})})]})},ej=()=>{let[n,e]=(0,H.useState)();return(0,H.useEffect)(()=>{n&&setTimeout(()=>e(""),1500)},[n]),(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' (Default) Internal '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' (Default) Internal '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' (Default) Internal '),navigator.clipboard.writeText(' (Default) Internal ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'(Default) Internal'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'(Default) Internal'===n?"check":"copy",variant:"ghost",onClick:()=>{e('(Default) Internal'),navigator.clipboard.writeText('(Default) Internal')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'(Default) Internal'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'(Default) Internal'===n?"check":"copy",variant:"ghost",onClick:()=>{e('(Default) Internal'),navigator.clipboard.writeText('(Default) Internal')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n(Default) Internal\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n(Default) Internal\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n(Default) Internal\n'),navigator.clipboard.writeText('\n(Default) Internal\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' External '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' External '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' External '),navigator.clipboard.writeText(' External ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'External'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'External'===n?"check":"copy",variant:"ghost",onClick:()=>{e('External'),navigator.clipboard.writeText('External')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n External\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n External\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n External\n'),navigator.clipboard.writeText('\n External\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nExternal\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nExternal\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nExternal\n'),navigator.clipboard.writeText('\nExternal\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' Show Icon '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' Show Icon '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' Show Icon '),navigator.clipboard.writeText(' Show Icon ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'Show Icon'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'Show Icon'===n?"check":"copy",variant:"ghost",onClick:()=>{e('Show Icon'),navigator.clipboard.writeText('Show Icon')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n Show Icon\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Show Icon\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Show Icon\n'),navigator.clipboard.writeText('\n Show Icon\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nShow Icon\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nShow Icon\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nShow Icon\n'),navigator.clipboard.writeText('\nShow Icon\n')},children:"Copy code"})]})]})})]})},ef=()=>{let[n,e]=(0,H.useState)();return(0,H.useEffect)(()=>{n&&setTimeout(()=>e(""),1500)},[n]),(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n Content 1 \n Content 2 \n Content 3 \n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Content 1 \n Content 2 \n Content 3 \n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Content 1 \n Content 2 \n Content 3 \n'),navigator.clipboard.writeText('\n Content 1 \n Content 2 \n Content 3 \n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
\n
\n Item 1\n
Content 1
\n
\n
\n Item 2\n
Content 2
\n
\n
\n Item 3\n
Content 3
\n
\n
'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
\n
\n Item 1\n
Content 1
\n
\n
\n Item 2\n
Content 2
\n
\n
\n Item 3\n
Content 3
\n
\n
'===n?"check":"copy",variant:"ghost",onClick:()=>{e('
\n
\n Item 1\n
Content 1
\n
\n
\n Item 2\n
Content 2
\n
\n
\n Item 3\n
Content 3
\n
\n
'),navigator.clipboard.writeText('
\n
\n Item 1\n
Content 1
\n
\n
\n Item 2\n
Content 2
\n
\n
\n Item 3\n
Content 3
\n
\n
')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n Content 1\n Content 2\n Content 3\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Content 1\n Content 2\n Content 3\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Content 1\n Content 2\n Content 3\n'),navigator.clipboard.writeText('\n Content 1\n Content 2\n Content 3\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n \nContent 1\n\n\nContent 2\n\n\nContent 3\n\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n \nContent 1\n\n\nContent 2\n\n\nContent 3\n\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n \nContent 1\n\n\nContent 2\n\n\nContent 3\n\n'),navigator.clipboard.writeText('\n \nContent 1\n\n\nContent 2\n\n\nContent 3\n\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n Content 1 \n Content 2 \n Content 3 \n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Content 1 \n Content 2 \n Content 3 \n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Content 1 \n Content 2 \n Content 3 \n'),navigator.clipboard.writeText('\n Content 1 \n Content 2 \n Content 3 \n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
\n
\n Item 1\n
Content 1
\n
\n
\n Item 2\n
Content 2
\n
\n
\n Item 3\n
Content 3
\n
\n
'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
\n
\n Item 1\n
Content 1
\n
\n
\n Item 2\n
Content 2
\n
\n
\n Item 3\n
Content 3
\n
\n
'===n?"check":"copy",variant:"ghost",onClick:()=>{e('
\n
\n Item 1\n
Content 1
\n
\n
\n Item 2\n
Content 2
\n
\n
\n Item 3\n
Content 3
\n
\n
'),navigator.clipboard.writeText('
\n
\n Item 1\n
Content 1
\n
\n
\n Item 2\n
Content 2
\n
\n
\n Item 3\n
Content 3
\n
\n
')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n Content 1\n Content 2\n Content 3\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Content 1\n Content 2\n Content 3\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Content 1\n Content 2\n Content 3\n'),navigator.clipboard.writeText('\n Content 1\n Content 2\n Content 3\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n \nContent 1\n\n\nContent 2\n\n\nContent 3\n\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n \nContent 1\n\n\nContent 2\n\n\nContent 3\n\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n \nContent 1\n\n\nContent 2\n\n\nContent 3\n\n'),navigator.clipboard.writeText('\n \nContent 1\n\n\nContent 2\n\n\nContent 3\n\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n Content 1 \n Content 2 \n Content 3 \n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Content 1 \n Content 2 \n Content 3 \n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Content 1 \n Content 2 \n Content 3 \n'),navigator.clipboard.writeText('\n Content 1 \n Content 2 \n Content 3 \n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
\n
\n Item 1\n
Content 1
\n
\n
\n Item 2\n
Content 2
\n
\n
\n Item 3\n
Content 3
\n
\n
'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
\n
\n Item 1\n
Content 1
\n
\n
\n Item 2\n
Content 2
\n
\n
\n Item 3\n
Content 3
\n
\n
'===n?"check":"copy",variant:"ghost",onClick:()=>{e('
\n
\n Item 1\n
Content 1
\n
\n
\n Item 2\n
Content 2
\n
\n
\n Item 3\n
Content 3
\n
\n
'),navigator.clipboard.writeText('
\n
\n Item 1\n
Content 1
\n
\n
\n Item 2\n
Content 2
\n
\n
\n Item 3\n
Content 3
\n
\n
')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n Content 1\n Content 2\n Content 3\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Content 1\n Content 2\n Content 3\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Content 1\n Content 2\n Content 3\n'),navigator.clipboard.writeText('\n Content 1\n Content 2\n Content 3\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n \nContent 1\n\n\nContent 2\n\n\nContent 3\n\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n \nContent 1\n\n\nContent 2\n\n\nContent 3\n\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n \nContent 1\n\n\nContent 2\n\n\nContent 3\n\n'),navigator.clipboard.writeText('\n \nContent 1\n\n\nContent 2\n\n\nContent 3\n\n')},children:"Copy code"})]})]})})]})},eT=()=>{let[n,e]=(0,H.useState)();return(0,H.useEffect)(()=>{n&&setTimeout(()=>e(""),1500)},[n]),(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n Content 1 \n Content 2 \n Content 3 \n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Content 1 \n Content 2 \n Content 3 \n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Content 1 \n Content 2 \n Content 3 \n'),navigator.clipboard.writeText('\n Content 1 \n Content 2 \n Content 3 \n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
\n
\n Item 1\n
Content 1
\n
\n
\n Item 2\n
Content 2
\n
\n
\n Item 3\n
Content 3
\n
\n
'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
\n
\n Item 1\n
Content 1
\n
\n
\n Item 2\n
Content 2
\n
\n
\n Item 3\n
Content 3
\n
\n
'===n?"check":"copy",variant:"ghost",onClick:()=>{e('
\n
\n Item 1\n
Content 1
\n
\n
\n Item 2\n
Content 2
\n
\n
\n Item 3\n
Content 3
\n
\n
'),navigator.clipboard.writeText('
\n
\n Item 1\n
Content 1
\n
\n
\n Item 2\n
Content 2
\n
\n
\n Item 3\n
Content 3
\n
\n
')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n Content 1\n Content 2\n Content 3\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Content 1\n Content 2\n Content 3\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Content 1\n Content 2\n Content 3\n'),navigator.clipboard.writeText('\n Content 1\n Content 2\n Content 3\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n \nContent 1\n\n\nContent 2\n\n\nContent 3\n\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n \nContent 1\n\n\nContent 2\n\n\nContent 3\n\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n \nContent 1\n\n\nContent 2\n\n\nContent 3\n\n'),navigator.clipboard.writeText('\n \nContent 1\n\n\nContent 2\n\n\nContent 3\n\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n Content 1 \n Content 2 \n Content 3 \n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Content 1 \n Content 2 \n Content 3 \n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Content 1 \n Content 2 \n Content 3 \n'),navigator.clipboard.writeText('\n Content 1 \n Content 2 \n Content 3 \n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
\n
\n Item 1\n
Content 1
\n
\n
\n Item 2\n
Content 2
\n
\n
\n Item 3\n
Content 3
\n
\n
'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
\n
\n Item 1\n
Content 1
\n
\n
\n Item 2\n
Content 2
\n
\n
\n Item 3\n
Content 3
\n
\n
'===n?"check":"copy",variant:"ghost",onClick:()=>{e('
\n
\n Item 1\n
Content 1
\n
\n
\n Item 2\n
Content 2
\n
\n
\n Item 3\n
Content 3
\n
\n
'),navigator.clipboard.writeText('
\n
\n Item 1\n
Content 1
\n
\n
\n Item 2\n
Content 2
\n
\n
\n Item 3\n
Content 3
\n
\n
')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n Content 1\n Content 2\n Content 3\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Content 1\n Content 2\n Content 3\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Content 1\n Content 2\n Content 3\n'),navigator.clipboard.writeText('\n Content 1\n Content 2\n Content 3\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n \nContent 1\n\n\nContent 2\n\n\nContent 3\n\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n \nContent 1\n\n\nContent 2\n\n\nContent 3\n\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n \nContent 1\n\n\nContent 2\n\n\nContent 3\n\n'),navigator.clipboard.writeText('\n \nContent 1\n\n\nContent 2\n\n\nContent 3\n\n')},children:"Copy code"})]})]})})]})},eA=()=>{let[n,e]=(0,H.useState)();return(0,H.useEffect)(()=>{n&&setTimeout(()=>e(""),1500)},[n]),(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n Content 1 \n Content 2 \n Content 3 \n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Content 1 \n Content 2 \n Content 3 \n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Content 1 \n Content 2 \n Content 3 \n'),navigator.clipboard.writeText('\n Content 1 \n Content 2 \n Content 3 \n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
\n
\n Item 1\n
Content 1
\n
\n
\n Item 2\n
Content 2
\n
\n
\n Item 3\n
Content 3
\n
\n
'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
\n
\n Item 1\n
Content 1
\n
\n
\n Item 2\n
Content 2
\n
\n
\n Item 3\n
Content 3
\n
\n
'===n?"check":"copy",variant:"ghost",onClick:()=>{e('
\n
\n Item 1\n
Content 1
\n
\n
\n Item 2\n
Content 2
\n
\n
\n Item 3\n
Content 3
\n
\n
'),navigator.clipboard.writeText('
\n
\n Item 1\n
Content 1
\n
\n
\n Item 2\n
Content 2
\n
\n
\n Item 3\n
Content 3
\n
\n
')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n Content 1\n Content 2\n Content 3\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Content 1\n Content 2\n Content 3\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Content 1\n Content 2\n Content 3\n'),navigator.clipboard.writeText('\n Content 1\n Content 2\n Content 3\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n \nContent 1\n\n\nContent 2\n\n\nContent 3\n\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n \nContent 1\n\n\nContent 2\n\n\nContent 3\n\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n \nContent 1\n\n\nContent 2\n\n\nContent 3\n\n'),navigator.clipboard.writeText('\n \nContent 1\n\n\nContent 2\n\n\nContent 3\n\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n Content 1 \n Content 2 \n Content 3 \n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Content 1 \n Content 2 \n Content 3 \n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Content 1 \n Content 2 \n Content 3 \n'),navigator.clipboard.writeText('\n Content 1 \n Content 2 \n Content 3 \n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
\n
\n Item 1\n
Content 1
\n
\n
\n Item 2\n
Content 2
\n
\n
\n Item 3\n
Content 3
\n
\n
'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
\n
\n Item 1\n
Content 1
\n
\n
\n Item 2\n
Content 2
\n
\n
\n Item 3\n
Content 3
\n
\n
'===n?"check":"copy",variant:"ghost",onClick:()=>{e('
\n
\n Item 1\n
Content 1
\n
\n
\n Item 2\n
Content 2
\n
\n
\n Item 3\n
Content 3
\n
\n
'),navigator.clipboard.writeText('
\n
\n Item 1\n
Content 1
\n
\n
\n Item 2\n
Content 2
\n
\n
\n Item 3\n
Content 3
\n
\n
')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n Content 1\n Content 2\n Content 3\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Content 1\n Content 2\n Content 3\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Content 1\n Content 2\n Content 3\n'),navigator.clipboard.writeText('\n Content 1\n Content 2\n Content 3\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n \nContent 1\n\n\nContent 2\n\n\nContent 3\n\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n \nContent 1\n\n\nContent 2\n\n\nContent 3\n\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n \nContent 1\n\n\nContent 2\n\n\nContent 3\n\n'),navigator.clipboard.writeText('\n \nContent 1\n\n\nContent 2\n\n\nContent 3\n\n')},children:"Copy code"})]})]})})]})},ey=()=>{let[n,e]=(0,H.useState)();return(0,H.useEffect)(()=>{n&&setTimeout(()=>e(""),1500)},[n]),(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' Functional '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' Functional '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' Functional '),navigator.clipboard.writeText(' Functional ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
\n Functional\n
Functional
\n
'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
\n Functional\n
Functional
\n
'===n?"check":"copy",variant:"ghost",onClick:()=>{e('
\n Functional\n
Functional
\n
'),navigator.clipboard.writeText('
\n Functional\n
Functional
\n
')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'Functional'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'Functional'===n?"check":"copy",variant:"ghost",onClick:()=>{e('Functional'),navigator.clipboard.writeText('Functional')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nFunctional\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nFunctional\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nFunctional\n'),navigator.clipboard.writeText('\nFunctional\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n (Default) Regular\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n (Default) Regular\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n (Default) Regular\n'),navigator.clipboard.writeText('\n (Default) Regular\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
\n (Default) Regular\n
(Default) Regular
\n
'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
\n (Default) Regular\n
(Default) Regular
\n
'===n?"check":"copy",variant:"ghost",onClick:()=>{e('
\n (Default) Regular\n
(Default) Regular
\n
'),navigator.clipboard.writeText('
\n (Default) Regular\n
(Default) Regular
\n
')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n (Default) Regular\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n (Default) Regular\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n (Default) Regular\n'),navigator.clipboard.writeText('\n (Default) Regular\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n(Default) Regular\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n(Default) Regular\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n(Default) Regular\n'),navigator.clipboard.writeText('\n(Default) Regular\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' Expressive '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' Expressive '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' Expressive '),navigator.clipboard.writeText(' Expressive ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
\n Expressive\n
Expressive
\n
'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
\n Expressive\n
Expressive
\n
'===n?"check":"copy",variant:"ghost",onClick:()=>{e('
\n Expressive\n
Expressive
\n
'),navigator.clipboard.writeText('
\n Expressive\n
Expressive
\n
')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'Expressive'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'Expressive'===n?"check":"copy",variant:"ghost",onClick:()=>{e('Expressive'),navigator.clipboard.writeText('Expressive')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nExpressive\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nExpressive\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nExpressive\n'),navigator.clipboard.writeText('\nExpressive\n')},children:"Copy code"})]})]})})]})},ek=()=>{let[n,e]=(0,H.useState)();return(0,H.useEffect)(()=>{n&&setTimeout(()=>e(""),1500)},[n]),(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n Enabled (Default)/Hover/Pressed\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Enabled (Default)/Hover/Pressed\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Enabled (Default)/Hover/Pressed\n'),navigator.clipboard.writeText('\n Enabled (Default)/Hover/Pressed\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:"undefined"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"undefined"===n?"check":"copy",variant:"ghost",onClick:()=>{e("undefined"),navigator.clipboard.writeText("undefined")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n Enabled (Default)/Hover/Pressed\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Enabled (Default)/Hover/Pressed\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Enabled (Default)/Hover/Pressed\n'),navigator.clipboard.writeText('\n Enabled (Default)/Hover/Pressed\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nEnabled (Default)/Hover/Pressed\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nEnabled (Default)/Hover/Pressed\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nEnabled (Default)/Hover/Pressed\n'),navigator.clipboard.writeText('\nEnabled (Default)/Hover/Pressed\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n Disabled\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Disabled\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Disabled\n'),navigator.clipboard.writeText('\n Disabled\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:"undefined"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"undefined"===n?"check":"copy",variant:"ghost",onClick:()=>{e("undefined"),navigator.clipboard.writeText("undefined")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n Disabled\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Disabled\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Disabled\n'),navigator.clipboard.writeText('\n Disabled\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nDisabled\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nDisabled\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nDisabled\n'),navigator.clipboard.writeText('\nDisabled\n')},children:"Copy code"})]})]})})]})},ew=()=>{let[n,e]=(0,H.useState)();return(0,H.useEffect)(()=>{n&&setTimeout(()=>e(""),1500)},[n]),(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n (Default) Collapsed\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n (Default) Collapsed\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n (Default) Collapsed\n'),navigator.clipboard.writeText('\n (Default) Collapsed\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:"undefined"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"undefined"===n?"check":"copy",variant:"ghost",onClick:()=>{e("undefined"),navigator.clipboard.writeText("undefined")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n (Default) Collapsed\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n (Default) Collapsed\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n (Default) Collapsed\n'),navigator.clipboard.writeText('\n (Default) Collapsed\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n(Default) Collapsed\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n(Default) Collapsed\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n(Default) Collapsed\n'),navigator.clipboard.writeText('\n(Default) Collapsed\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' Open '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' Open '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' Open '),navigator.clipboard.writeText(' Open ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:"undefined"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"undefined"===n?"check":"copy",variant:"ghost",onClick:()=>{e("undefined"),navigator.clipboard.writeText("undefined")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n Open\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Open\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Open\n'),navigator.clipboard.writeText('\n Open\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nOpen\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nOpen\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nOpen\n'),navigator.clipboard.writeText('\nOpen\n')},children:"Copy code"})]})]})})]})},eN=()=>{let[n,e]=(0,H.useState)();return(0,H.useEffect)(()=>{n&&setTimeout(()=>e(""),1500)},[n]),(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:" Functional "})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:" Functional "===n?"check":"copy",variant:"ghost",onClick:()=>{e(" Functional "),navigator.clipboard.writeText(" Functional ")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
Functional
'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
Functional
'===n?"check":"copy",variant:"ghost",onClick:()=>{e('
Functional
'),navigator.clipboard.writeText('
Functional
')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:"Functional"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"Functional"===n?"check":"copy",variant:"ghost",onClick:()=>{e("Functional"),navigator.clipboard.writeText("Functional")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:"\nFunctional\n"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"\nFunctional\n"===n?"check":"copy",variant:"ghost",onClick:()=>{e("\nFunctional\n"),navigator.clipboard.writeText("\nFunctional\n")},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:" (Default) Regular "})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:" (Default) Regular "===n?"check":"copy",variant:"ghost",onClick:()=>{e(" (Default) Regular "),navigator.clipboard.writeText(" (Default) Regular ")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
(Default) Regular
'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
(Default) Regular
'===n?"check":"copy",variant:"ghost",onClick:()=>{e('
(Default) Regular
'),navigator.clipboard.writeText('
(Default) Regular
')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:"(Default) Regular"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"(Default) Regular"===n?"check":"copy",variant:"ghost",onClick:()=>{e("(Default) Regular"),navigator.clipboard.writeText("(Default) Regular")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:"\n(Default) Regular\n"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"\n(Default) Regular\n"===n?"check":"copy",variant:"ghost",onClick:()=>{e("\n(Default) Regular\n"),navigator.clipboard.writeText("\n(Default) Regular\n")},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:" Expressive "})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:" Expressive "===n?"check":"copy",variant:"ghost",onClick:()=>{e(" Expressive "),navigator.clipboard.writeText(" Expressive ")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
Expressive
'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
Expressive
'===n?"check":"copy",variant:"ghost",onClick:()=>{e('
Expressive
'),navigator.clipboard.writeText('
Expressive
')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:"Expressive"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"Expressive"===n?"check":"copy",variant:"ghost",onClick:()=>{e("Expressive"),navigator.clipboard.writeText("Expressive")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:"\nExpressive\n"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"\nExpressive\n"===n?"check":"copy",variant:"ghost",onClick:()=>{e("\nExpressive\n"),navigator.clipboard.writeText("\nExpressive\n")},children:"Copy code"})]})]})})]})},eI=()=>{let[n,e]=(0,H.useState)();return(0,H.useEffect)(()=>{n&&setTimeout(()=>e(""),1500)},[n]),(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:" (Default) With Logo "})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:" (Default) With Logo "===n?"check":"copy",variant:"ghost",onClick:()=>{e(" (Default) With Logo "),navigator.clipboard.writeText(" (Default) With Logo ")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
(Default) With Logo
'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
(Default) With Logo
'===n?"check":"copy",variant:"ghost",onClick:()=>{e('
(Default) With Logo
'),navigator.clipboard.writeText('
(Default) With Logo
')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:"(Default) With Logo"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"(Default) With Logo"===n?"check":"copy",variant:"ghost",onClick:()=>{e("(Default) With Logo"),navigator.clipboard.writeText("(Default) With Logo")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:"\n(Default) With Logo\n"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"\n(Default) With Logo\n"===n?"check":"copy",variant:"ghost",onClick:()=>{e("\n(Default) With Logo\n"),navigator.clipboard.writeText("\n(Default) With Logo\n")},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' No Logo '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' No Logo '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' No Logo '),navigator.clipboard.writeText(' No Logo ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
No Logo
'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
No Logo
'===n?"check":"copy",variant:"ghost",onClick:()=>{e('
No Logo
'),navigator.clipboard.writeText('
No Logo
')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:"No Logo"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"No Logo"===n?"check":"copy",variant:"ghost",onClick:()=>{e("No Logo"),navigator.clipboard.writeText("No Logo")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nNo Logo\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nNo Logo\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nNo Logo\n'),navigator.clipboard.writeText('\nNo Logo\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' Custom Logo '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' Custom Logo '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' Custom Logo '),navigator.clipboard.writeText(' Custom Logo ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
Custom Logo
'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
Custom Logo
'===n?"check":"copy",variant:"ghost",onClick:()=>{e('
Custom Logo
'),navigator.clipboard.writeText('
Custom Logo
')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:"\n Custom Logo\n"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"\n Custom Logo\n"===n?"check":"copy",variant:"ghost",onClick:()=>{e("\n Custom Logo\n"),navigator.clipboard.writeText("\n Custom Logo\n")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nCustom Logo\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nCustom Logo\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nCustom Logo\n'),navigator.clipboard.writeText('\nCustom Logo\n')},children:"Copy code"})]})]})})]})},eC=()=>{let[n,e]=(0,H.useState)();return(0,H.useEffect)(()=>{n&&setTimeout(()=>e(""),1500)},[n]),(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n button\n '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n button\n '===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n button\n '),navigator.clipboard.writeText('\n button\n ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:''})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:''===n?"check":"copy",variant:"ghost",onClick:()=>{e(''),navigator.clipboard.writeText('')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n button\n \n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n button\n \n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n button\n \n'),navigator.clipboard.writeText('\n button\n \n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nbutton\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nbutton\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nbutton\n'),navigator.clipboard.writeText('\nbutton\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n button\n '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n button\n '===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n button\n '),navigator.clipboard.writeText('\n button\n ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:''})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:''===n?"check":"copy",variant:"ghost",onClick:()=>{e(''),navigator.clipboard.writeText('')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n button\n \n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n button\n \n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n button\n \n'),navigator.clipboard.writeText('\n button\n \n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nbutton\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nbutton\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nbutton\n'),navigator.clipboard.writeText('\nbutton\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n button\n '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n button\n '===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n button\n '),navigator.clipboard.writeText('\n button\n ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:''})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:''===n?"check":"copy",variant:"ghost",onClick:()=>{e(''),navigator.clipboard.writeText('')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n button\n \n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n button\n \n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n button\n \n'),navigator.clipboard.writeText('\n button\n \n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nbutton\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nbutton\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nbutton\n'),navigator.clipboard.writeText('\nbutton\n')},children:"Copy code"})]})]})})]})},eL=()=>{let[n,e]=(0,H.useState)();return(0,H.useEffect)(()=>{n&&setTimeout(()=>e(""),1500)},[n]),(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n button\n '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n button\n '===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n button\n '),navigator.clipboard.writeText('\n button\n ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:''})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:''===n?"check":"copy",variant:"ghost",onClick:()=>{e(''),navigator.clipboard.writeText('')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n button\n \n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n button\n \n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n button\n \n'),navigator.clipboard.writeText('\n button\n \n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nbutton\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nbutton\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nbutton\n'),navigator.clipboard.writeText('\nbutton\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n button\n '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n button\n '===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n button\n '),navigator.clipboard.writeText('\n button\n ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:''})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:''===n?"check":"copy",variant:"ghost",onClick:()=>{e(''),navigator.clipboard.writeText('')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n button\n \n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n button\n \n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n button\n \n'),navigator.clipboard.writeText('\n button\n \n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nbutton\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nbutton\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nbutton\n'),navigator.clipboard.writeText('\nbutton\n')},children:"Copy code"})]})]})})]})},eH=()=>{let[n,e]=(0,H.useState)();return(0,H.useEffect)(()=>{n&&setTimeout(()=>e(""),1500)},[n]),(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n button\n '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n button\n '===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n button\n '),navigator.clipboard.writeText('\n button\n ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:''})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:''===n?"check":"copy",variant:"ghost",onClick:()=>{e(''),navigator.clipboard.writeText('')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n button\n \n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n button\n \n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n button\n \n'),navigator.clipboard.writeText('\n button\n \n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nbutton\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nbutton\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nbutton\n'),navigator.clipboard.writeText('\nbutton\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n button\n '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n button\n '===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n button\n '),navigator.clipboard.writeText('\n button\n ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:''})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:''===n?"check":"copy",variant:"ghost",onClick:()=>{e(''),navigator.clipboard.writeText('')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n button\n \n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n button\n \n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n button\n \n'),navigator.clipboard.writeText('\n button\n \n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nbutton\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nbutton\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nbutton\n'),navigator.clipboard.writeText('\nbutton\n')},children:"Copy code"})]})]})})]})},e_=()=>{let[n,e]=(0,H.useState)();return(0,H.useEffect)(()=>{n&&setTimeout(()=>e(""),1500)},[n]),(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n button\n '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n button\n '===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n button\n '),navigator.clipboard.writeText('\n button\n ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:''})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:''===n?"check":"copy",variant:"ghost",onClick:()=>{e(''),navigator.clipboard.writeText('')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n button\n \n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n button\n \n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n button\n \n'),navigator.clipboard.writeText('\n button\n \n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nbutton\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nbutton\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nbutton\n'),navigator.clipboard.writeText('\nbutton\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n button\n '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n button\n '===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n button\n '),navigator.clipboard.writeText('\n button\n ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:''})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:''===n?"check":"copy",variant:"ghost",onClick:()=>{e(''),navigator.clipboard.writeText('')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n button\n \n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n button\n \n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n button\n \n'),navigator.clipboard.writeText('\n button\n \n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nbutton\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nbutton\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nbutton\n'),navigator.clipboard.writeText('\nbutton\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n button\n '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n button\n '===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n button\n '),navigator.clipboard.writeText('\n button\n ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:''})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:''===n?"check":"copy",variant:"ghost",onClick:()=>{e(''),navigator.clipboard.writeText('')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n button\n \n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n button\n \n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n button\n \n'),navigator.clipboard.writeText('\n button\n \n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nbutton\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nbutton\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nbutton\n'),navigator.clipboard.writeText('\nbutton\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n button\n '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n button\n '===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n button\n '),navigator.clipboard.writeText('\n button\n ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:''})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:''===n?"check":"copy",variant:"ghost",onClick:()=>{e(''),navigator.clipboard.writeText('')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n button\n \n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n button\n \n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n button\n \n'),navigator.clipboard.writeText('\n button\n \n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nbutton\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nbutton\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nbutton\n'),navigator.clipboard.writeText('\nbutton\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n button\n '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n button\n '===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n button\n '),navigator.clipboard.writeText('\n button\n ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:''})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:''===n?"check":"copy",variant:"ghost",onClick:()=>{e(''),navigator.clipboard.writeText('')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n button\n \n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n button\n \n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n button\n \n'),navigator.clipboard.writeText('\n button\n \n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nbutton\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nbutton\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nbutton\n'),navigator.clipboard.writeText('\nbutton\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n button\n '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n button\n '===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n button\n '),navigator.clipboard.writeText('\n button\n ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:''})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:''===n?"check":"copy",variant:"ghost",onClick:()=>{e(''),navigator.clipboard.writeText('')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n button\n \n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n button\n \n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n button\n \n'),navigator.clipboard.writeText('\n button\n \n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nbutton\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nbutton\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nbutton\n'),navigator.clipboard.writeText('\nbutton\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n button\n '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n button\n '===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n button\n '),navigator.clipboard.writeText('\n button\n ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:''})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:''===n?"check":"copy",variant:"ghost",onClick:()=>{e(''),navigator.clipboard.writeText('')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n button\n \n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n button\n \n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n button\n \n'),navigator.clipboard.writeText('\n button\n \n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nbutton\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nbutton\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nbutton\n'),navigator.clipboard.writeText('\nbutton\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n button\n '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n button\n '===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n button\n '),navigator.clipboard.writeText('\n button\n ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:''})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:''===n?"check":"copy",variant:"ghost",onClick:()=>{e(''),navigator.clipboard.writeText('')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n button\n \n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n button\n \n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n button\n \n'),navigator.clipboard.writeText('\n button\n \n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nbutton\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nbutton\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nbutton\n'),navigator.clipboard.writeText('\nbutton\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n button\n '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n button\n '===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n button\n '),navigator.clipboard.writeText('\n button\n ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:''})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:''===n?"check":"copy",variant:"ghost",onClick:()=>{e(''),navigator.clipboard.writeText('')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n button\n \n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n button\n \n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n button\n \n'),navigator.clipboard.writeText('\n button\n \n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nbutton\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nbutton\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nbutton\n'),navigator.clipboard.writeText('\nbutton\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n button\n '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n button\n '===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n button\n '),navigator.clipboard.writeText('\n button\n ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:''})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:''===n?"check":"copy",variant:"ghost",onClick:()=>{e(''),navigator.clipboard.writeText('')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n button\n \n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n button\n \n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n button\n \n'),navigator.clipboard.writeText('\n button\n \n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nbutton\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nbutton\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nbutton\n'),navigator.clipboard.writeText('\nbutton\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n button\n '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n button\n '===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n button\n '),navigator.clipboard.writeText('\n button\n ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:''})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:''===n?"check":"copy",variant:"ghost",onClick:()=>{e(''),navigator.clipboard.writeText('')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n button\n \n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n button\n \n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n button\n \n'),navigator.clipboard.writeText('\n button\n \n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nbutton\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nbutton\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nbutton\n'),navigator.clipboard.writeText('\nbutton\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n button\n '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n button\n '===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n button\n '),navigator.clipboard.writeText('\n button\n ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:''})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:''===n?"check":"copy",variant:"ghost",onClick:()=>{e(''),navigator.clipboard.writeText('')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n button\n \n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n button\n \n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n button\n \n'),navigator.clipboard.writeText('\n button\n \n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nbutton\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nbutton\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nbutton\n'),navigator.clipboard.writeText('\nbutton\n')},children:"Copy code"})]})]})})]})},eP=()=>{let[n,e]=(0,H.useState)();return(0,H.useEffect)(()=>{n&&setTimeout(()=>e(""),1500)},[n]),(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n button\n '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n button\n '===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n button\n '),navigator.clipboard.writeText('\n button\n ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:''})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:''===n?"check":"copy",variant:"ghost",onClick:()=>{e(''),navigator.clipboard.writeText('')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n button\n \n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n button\n \n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n button\n \n'),navigator.clipboard.writeText('\n button\n \n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nbutton\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nbutton\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nbutton\n'),navigator.clipboard.writeText('\nbutton\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n button\n '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n button\n '===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n button\n '),navigator.clipboard.writeText('\n button\n ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:''})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:''===n?"check":"copy",variant:"ghost",onClick:()=>{e(''),navigator.clipboard.writeText('')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n button\n \n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n button\n \n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n button\n \n'),navigator.clipboard.writeText('\n button\n \n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nbutton\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nbutton\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nbutton\n'),navigator.clipboard.writeText('\nbutton\n')},children:"Copy code"})]})]})})]})},eR=()=>{let[n,e]=(0,H.useState)();return(0,H.useEffect)(()=>{n&&setTimeout(()=>e(""),1500)},[n]),(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n button\n '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n button\n '===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n button\n '),navigator.clipboard.writeText('\n button\n ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:''})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:''===n?"check":"copy",variant:"ghost",onClick:()=>{e(''),navigator.clipboard.writeText('')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n button\n \n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n button\n \n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n button\n \n'),navigator.clipboard.writeText('\n button\n \n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nbutton\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nbutton\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nbutton\n'),navigator.clipboard.writeText('\nbutton\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n button\n '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n button\n '===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n button\n '),navigator.clipboard.writeText('\n button\n ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:''})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:''===n?"check":"copy",variant:"ghost",onClick:()=>{e(''),navigator.clipboard.writeText('')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n button\n \n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n button\n \n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n button\n \n'),navigator.clipboard.writeText('\n button\n \n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nbutton\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nbutton\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nbutton\n'),navigator.clipboard.writeText('\nbutton\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n button\n '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n button\n '===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n button\n '),navigator.clipboard.writeText('\n button\n ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:''})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:''===n?"check":"copy",variant:"ghost",onClick:()=>{e(''),navigator.clipboard.writeText('')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n button\n \n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n button\n \n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n button\n \n'),navigator.clipboard.writeText('\n button\n \n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nbutton\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nbutton\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nbutton\n'),navigator.clipboard.writeText('\nbutton\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n button\n '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n button\n '===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n button\n '),navigator.clipboard.writeText('\n button\n ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:''})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:''===n?"check":"copy",variant:"ghost",onClick:()=>{e(''),navigator.clipboard.writeText('')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n button\n \n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n button\n \n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n button\n \n'),navigator.clipboard.writeText('\n button\n \n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nbutton\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nbutton\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nbutton\n'),navigator.clipboard.writeText('\nbutton\n')},children:"Copy code"})]})]})})]})},eS=()=>{let[n,e]=(0,H.useState)();return(0,H.useEffect)(()=>{n&&setTimeout(()=>e(""),1500)},[n]),(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:" Functional "})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:" Functional "===n?"check":"copy",variant:"ghost",onClick:()=>{e(" Functional "),navigator.clipboard.writeText(" Functional ")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'Functional'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'Functional'===n?"check":"copy",variant:"ghost",onClick:()=>{e('Functional'),navigator.clipboard.writeText('Functional')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:"Functional"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"Functional"===n?"check":"copy",variant:"ghost",onClick:()=>{e("Functional"),navigator.clipboard.writeText("Functional")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:"\nFunctional\n"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"\nFunctional\n"===n?"check":"copy",variant:"ghost",onClick:()=>{e("\nFunctional\n"),navigator.clipboard.writeText("\nFunctional\n")},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:" (Default) Regular "})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:" (Default) Regular "===n?"check":"copy",variant:"ghost",onClick:()=>{e(" (Default) Regular "),navigator.clipboard.writeText(" (Default) Regular ")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'(Default) Regular'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'(Default) Regular'===n?"check":"copy",variant:"ghost",onClick:()=>{e('(Default) Regular'),navigator.clipboard.writeText('(Default) Regular')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:"(Default) Regular"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"(Default) Regular"===n?"check":"copy",variant:"ghost",onClick:()=>{e("(Default) Regular"),navigator.clipboard.writeText("(Default) Regular")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:"\n(Default) Regular\n"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"\n(Default) Regular\n"===n?"check":"copy",variant:"ghost",onClick:()=>{e("\n(Default) Regular\n"),navigator.clipboard.writeText("\n(Default) Regular\n")},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:" Expressive "})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:" Expressive "===n?"check":"copy",variant:"ghost",onClick:()=>{e(" Expressive "),navigator.clipboard.writeText(" Expressive ")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'Expressive'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'Expressive'===n?"check":"copy",variant:"ghost",onClick:()=>{e('Expressive'),navigator.clipboard.writeText('Expressive')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:"Expressive"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"Expressive"===n?"check":"copy",variant:"ghost",onClick:()=>{e("Expressive"),navigator.clipboard.writeText("Expressive")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:"\nExpressive\n"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"\nExpressive\n"===n?"check":"copy",variant:"ghost",onClick:()=>{e("\nExpressive\n"),navigator.clipboard.writeText("\nExpressive\n")},children:"Copy code"})]})]})})]})},eE=()=>{let[n,e]=(0,H.useState)();return(0,H.useEffect)(()=>{n&&setTimeout(()=>e(""),1500)},[n]),(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:" (Default) Adaptive "})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:" (Default) Adaptive "===n?"check":"copy",variant:"ghost",onClick:()=>{e(" (Default) Adaptive "),navigator.clipboard.writeText(" (Default) Adaptive ")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'(Default) Adaptive'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'(Default) Adaptive'===n?"check":"copy",variant:"ghost",onClick:()=>{e('(Default) Adaptive'),navigator.clipboard.writeText('(Default) Adaptive')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:"(Default) Adaptive"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"(Default) Adaptive"===n?"check":"copy",variant:"ghost",onClick:()=>{e("(Default) Adaptive"),navigator.clipboard.writeText("(Default) Adaptive")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:"\n(Default) Adaptive\n"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"\n(Default) Adaptive\n"===n?"check":"copy",variant:"ghost",onClick:()=>{e("\n(Default) Adaptive\n"),navigator.clipboard.writeText("\n(Default) Adaptive\n")},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' Neutral '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' Neutral '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' Neutral '),navigator.clipboard.writeText(' Neutral ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'Neutral'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'Neutral'===n?"check":"copy",variant:"ghost",onClick:()=>{e('Neutral'),navigator.clipboard.writeText('Neutral')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'Neutral'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'Neutral'===n?"check":"copy",variant:"ghost",onClick:()=>{e('Neutral'),navigator.clipboard.writeText('Neutral')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nNeutral\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nNeutral\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nNeutral\n'),navigator.clipboard.writeText('\nNeutral\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' Critical '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' Critical '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' Critical '),navigator.clipboard.writeText(' Critical ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'Critical'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'Critical'===n?"check":"copy",variant:"ghost",onClick:()=>{e('Critical'),navigator.clipboard.writeText('Critical')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'Critical'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'Critical'===n?"check":"copy",variant:"ghost",onClick:()=>{e('Critical'),navigator.clipboard.writeText('Critical')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nCritical\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nCritical\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nCritical\n'),navigator.clipboard.writeText('\nCritical\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' Informational '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' Informational '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' Informational '),navigator.clipboard.writeText(' Informational ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'Informational'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'Informational'===n?"check":"copy",variant:"ghost",onClick:()=>{e('Informational'),navigator.clipboard.writeText('Informational')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'Informational'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'Informational'===n?"check":"copy",variant:"ghost",onClick:()=>{e('Informational'),navigator.clipboard.writeText('Informational')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nInformational\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nInformational\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nInformational\n'),navigator.clipboard.writeText('\nInformational\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' Successful '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' Successful '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' Successful '),navigator.clipboard.writeText(' Successful ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'Successful'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'Successful'===n?"check":"copy",variant:"ghost",onClick:()=>{e('Successful'),navigator.clipboard.writeText('Successful')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'Successful'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'Successful'===n?"check":"copy",variant:"ghost",onClick:()=>{e('Successful'),navigator.clipboard.writeText('Successful')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nSuccessful\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nSuccessful\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nSuccessful\n'),navigator.clipboard.writeText('\nSuccessful\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' Warning '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' Warning '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' Warning '),navigator.clipboard.writeText(' Warning ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'Warning'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'Warning'===n?"check":"copy",variant:"ghost",onClick:()=>{e('Warning'),navigator.clipboard.writeText('Warning')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'Warning'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'Warning'===n?"check":"copy",variant:"ghost",onClick:()=>{e('Warning'),navigator.clipboard.writeText('Warning')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nWarning\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nWarning\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nWarning\n'),navigator.clipboard.writeText('\nWarning\n')},children:"Copy code"})]})]})})]})},eO=()=>{let[n,e]=(0,H.useState)();return(0,H.useEffect)(()=>{n&&setTimeout(()=>e(""),1500)},[n]),(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:" (Default) Medium "})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:" (Default) Medium "===n?"check":"copy",variant:"ghost",onClick:()=>{e(" (Default) Medium "),navigator.clipboard.writeText(" (Default) Medium ")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'(Default) Medium'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'(Default) Medium'===n?"check":"copy",variant:"ghost",onClick:()=>{e('(Default) Medium'),navigator.clipboard.writeText('(Default) Medium')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:"(Default) Medium"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"(Default) Medium"===n?"check":"copy",variant:"ghost",onClick:()=>{e("(Default) Medium"),navigator.clipboard.writeText("(Default) Medium")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:"\n(Default) Medium\n"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"\n(Default) Medium\n"===n?"check":"copy",variant:"ghost",onClick:()=>{e("\n(Default) Medium\n"),navigator.clipboard.writeText("\n(Default) Medium\n")},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' Small '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' Small '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' Small '),navigator.clipboard.writeText(' Small ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'Small'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'Small'===n?"check":"copy",variant:"ghost",onClick:()=>{e('Small'),navigator.clipboard.writeText('Small')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'Small'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'Small'===n?"check":"copy",variant:"ghost",onClick:()=>{e('Small'),navigator.clipboard.writeText('Small')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nSmall\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nSmall\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nSmall\n'),navigator.clipboard.writeText('\nSmall\n')},children:"Copy code"})]})]})})]})},eF=()=>{let[n,e]=(0,H.useState)();return(0,H.useEffect)(()=>{n&&setTimeout(()=>e(""),1500)},[n]),(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:" Functional "})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:" Functional "===n?"check":"copy",variant:"ghost",onClick:()=>{e(" Functional "),navigator.clipboard.writeText(" Functional ")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
Functional
'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
Functional
'===n?"check":"copy",variant:"ghost",onClick:()=>{e('
Functional
'),navigator.clipboard.writeText('
Functional
')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:"Functional"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"Functional"===n?"check":"copy",variant:"ghost",onClick:()=>{e("Functional"),navigator.clipboard.writeText("Functional")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:"\nFunctional\n"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"\nFunctional\n"===n?"check":"copy",variant:"ghost",onClick:()=>{e("\nFunctional\n"),navigator.clipboard.writeText("\nFunctional\n")},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:" (Default) Regular "})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:" (Default) Regular "===n?"check":"copy",variant:"ghost",onClick:()=>{e(" (Default) Regular "),navigator.clipboard.writeText(" (Default) Regular ")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
(Default) Regular
'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
(Default) Regular
'===n?"check":"copy",variant:"ghost",onClick:()=>{e('
(Default) Regular
'),navigator.clipboard.writeText('
(Default) Regular
')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:"(Default) Regular"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"(Default) Regular"===n?"check":"copy",variant:"ghost",onClick:()=>{e("(Default) Regular"),navigator.clipboard.writeText("(Default) Regular")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:"\n(Default) Regular\n"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"\n(Default) Regular\n"===n?"check":"copy",variant:"ghost",onClick:()=>{e("\n(Default) Regular\n"),navigator.clipboard.writeText("\n(Default) Regular\n")},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:" Expressive "})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:" Expressive "===n?"check":"copy",variant:"ghost",onClick:()=>{e(" Expressive "),navigator.clipboard.writeText(" Expressive ")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
Expressive
'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
Expressive
'===n?"check":"copy",variant:"ghost",onClick:()=>{e('
Expressive
'),navigator.clipboard.writeText('
Expressive
')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:"Expressive"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"Expressive"===n?"check":"copy",variant:"ghost",onClick:()=>{e("Expressive"),navigator.clipboard.writeText("Expressive")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:"\nExpressive\n"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"\nExpressive\n"===n?"check":"copy",variant:"ghost",onClick:()=>{e("\nExpressive\n"),navigator.clipboard.writeText("\nExpressive\n")},children:"Copy code"})]})]})})]})},eM=()=>{let[n,e]=(0,H.useState)();return(0,H.useEffect)(()=>{n&&setTimeout(()=>e(""),1500)},[n]),(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:" (Default) Weak "})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:" (Default) Weak "===n?"check":"copy",variant:"ghost",onClick:()=>{e(" (Default) Weak "),navigator.clipboard.writeText(" (Default) Weak ")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
(Default) Weak
'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
(Default) Weak
'===n?"check":"copy",variant:"ghost",onClick:()=>{e('
(Default) Weak
'),navigator.clipboard.writeText('
(Default) Weak
')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:"(Default) Weak"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"(Default) Weak"===n?"check":"copy",variant:"ghost",onClick:()=>{e("(Default) Weak"),navigator.clipboard.writeText("(Default) Weak")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:"\n(Default) Weak\n"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"\n(Default) Weak\n"===n?"check":"copy",variant:"ghost",onClick:()=>{e("\n(Default) Weak\n"),navigator.clipboard.writeText("\n(Default) Weak\n")},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' Strong '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' Strong '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' Strong '),navigator.clipboard.writeText(' Strong ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
Strong
'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
Strong
'===n?"check":"copy",variant:"ghost",onClick:()=>{e('
Strong
'),navigator.clipboard.writeText('
Strong
')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'Strong'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'Strong'===n?"check":"copy",variant:"ghost",onClick:()=>{e('Strong'),navigator.clipboard.writeText('Strong')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nStrong\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nStrong\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nStrong\n'),navigator.clipboard.writeText('\nStrong\n')},children:"Copy code"})]})]})})]})},eV=()=>{let[n,e]=(0,H.useState)();return(0,H.useEffect)(()=>{n&&setTimeout(()=>e(""),1500)},[n]),(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:" (Default) Adaptive "})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:" (Default) Adaptive "===n?"check":"copy",variant:"ghost",onClick:()=>{e(" (Default) Adaptive "),navigator.clipboard.writeText(" (Default) Adaptive ")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
(Default) Adaptive
'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
(Default) Adaptive
'===n?"check":"copy",variant:"ghost",onClick:()=>{e('
(Default) Adaptive
'),navigator.clipboard.writeText('
(Default) Adaptive
')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:"(Default) Adaptive"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"(Default) Adaptive"===n?"check":"copy",variant:"ghost",onClick:()=>{e("(Default) Adaptive"),navigator.clipboard.writeText("(Default) Adaptive")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:"\n(Default) Adaptive\n"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"\n(Default) Adaptive\n"===n?"check":"copy",variant:"ghost",onClick:()=>{e("\n(Default) Adaptive\n"),navigator.clipboard.writeText("\n(Default) Adaptive\n")},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' Neutral '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' Neutral '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' Neutral '),navigator.clipboard.writeText(' Neutral ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
Neutral
'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
Neutral
'===n?"check":"copy",variant:"ghost",onClick:()=>{e('
Neutral
'),navigator.clipboard.writeText('
Neutral
')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'Neutral'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'Neutral'===n?"check":"copy",variant:"ghost",onClick:()=>{e('Neutral'),navigator.clipboard.writeText('Neutral')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nNeutral\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nNeutral\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nNeutral\n'),navigator.clipboard.writeText('\nNeutral\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' Critical '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' Critical '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' Critical '),navigator.clipboard.writeText(' Critical ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
Critical
'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
Critical
'===n?"check":"copy",variant:"ghost",onClick:()=>{e('
Critical
'),navigator.clipboard.writeText('
Critical
')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'Critical'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'Critical'===n?"check":"copy",variant:"ghost",onClick:()=>{e('Critical'),navigator.clipboard.writeText('Critical')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nCritical\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nCritical\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nCritical\n'),navigator.clipboard.writeText('\nCritical\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' Informational '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' Informational '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' Informational '),navigator.clipboard.writeText(' Informational ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
Informational
'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
Informational
'===n?"check":"copy",variant:"ghost",onClick:()=>{e('
Informational
'),navigator.clipboard.writeText('
Informational
')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'Informational'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'Informational'===n?"check":"copy",variant:"ghost",onClick:()=>{e('Informational'),navigator.clipboard.writeText('Informational')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nInformational\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nInformational\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nInformational\n'),navigator.clipboard.writeText('\nInformational\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' Successful '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' Successful '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' Successful '),navigator.clipboard.writeText(' Successful ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
Successful
'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
Successful
'===n?"check":"copy",variant:"ghost",onClick:()=>{e('
Successful
'),navigator.clipboard.writeText('
Successful
')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'Successful'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'Successful'===n?"check":"copy",variant:"ghost",onClick:()=>{e('Successful'),navigator.clipboard.writeText('Successful')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nSuccessful\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nSuccessful\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nSuccessful\n'),navigator.clipboard.writeText('\nSuccessful\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' Warning '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' Warning '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' Warning '),navigator.clipboard.writeText(' Warning ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
Warning
'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
Warning
'===n?"check":"copy",variant:"ghost",onClick:()=>{e('
Warning
'),navigator.clipboard.writeText('
Warning
')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'Warning'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'Warning'===n?"check":"copy",variant:"ghost",onClick:()=>{e('Warning'),navigator.clipboard.writeText('Warning')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nWarning\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nWarning\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nWarning\n'),navigator.clipboard.writeText('\nWarning\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' Adaptive Strong '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' Adaptive Strong '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' Adaptive Strong '),navigator.clipboard.writeText(' Adaptive Strong ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
Adaptive Strong
'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
Adaptive Strong
'===n?"check":"copy",variant:"ghost",onClick:()=>{e('
Adaptive Strong
'),navigator.clipboard.writeText('
Adaptive Strong
')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'Adaptive Strong'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'Adaptive Strong'===n?"check":"copy",variant:"ghost",onClick:()=>{e('Adaptive Strong'),navigator.clipboard.writeText('Adaptive Strong')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nAdaptive Strong\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nAdaptive Strong\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nAdaptive Strong\n'),navigator.clipboard.writeText('\nAdaptive Strong\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' Neutral Strong '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' Neutral Strong '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' Neutral Strong '),navigator.clipboard.writeText(' Neutral Strong ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
\n Neutral Strong\n
'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
\n Neutral Strong\n
'===n?"check":"copy",variant:"ghost",onClick:()=>{e('
\n Neutral Strong\n
'),navigator.clipboard.writeText('
\n Neutral Strong\n
')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n Neutral Strong\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Neutral Strong\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Neutral Strong\n'),navigator.clipboard.writeText('\n Neutral Strong\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nNeutral Strong\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nNeutral Strong\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nNeutral Strong\n'),navigator.clipboard.writeText('\nNeutral Strong\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' Critical Strong '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' Critical Strong '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' Critical Strong '),navigator.clipboard.writeText(' Critical Strong ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
\n Critical Strong\n
'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
\n Critical Strong\n
'===n?"check":"copy",variant:"ghost",onClick:()=>{e('
\n Critical Strong\n
'),navigator.clipboard.writeText('
\n Critical Strong\n
')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n Critical Strong\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Critical Strong\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Critical Strong\n'),navigator.clipboard.writeText('\n Critical Strong\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nCritical Strong\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nCritical Strong\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nCritical Strong\n'),navigator.clipboard.writeText('\nCritical Strong\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n Informational Strong\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Informational Strong\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Informational Strong\n'),navigator.clipboard.writeText('\n Informational Strong\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
\n Informational Strong\n
'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
\n Informational Strong\n
'===n?"check":"copy",variant:"ghost",onClick:()=>{e('
\n Informational Strong\n
'),navigator.clipboard.writeText('
\n Informational Strong\n
')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n Informational Strong\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Informational Strong\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Informational Strong\n'),navigator.clipboard.writeText('\n Informational Strong\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nInformational Strong\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nInformational Strong\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nInformational Strong\n'),navigator.clipboard.writeText('\nInformational Strong\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' Successful Strong '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' Successful Strong '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' Successful Strong '),navigator.clipboard.writeText(' Successful Strong ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
\n Successful Strong\n
'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
\n Successful Strong\n
'===n?"check":"copy",variant:"ghost",onClick:()=>{e('
\n Successful Strong\n
'),navigator.clipboard.writeText('
\n Successful Strong\n
')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n Successful Strong\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Successful Strong\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Successful Strong\n'),navigator.clipboard.writeText('\n Successful Strong\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nSuccessful Strong\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nSuccessful Strong\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nSuccessful Strong\n'),navigator.clipboard.writeText('\nSuccessful Strong\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' Warning Strong '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' Warning Strong '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' Warning Strong '),navigator.clipboard.writeText(' Warning Strong ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
\n Warning Strong\n
'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
\n Warning Strong\n
'===n?"check":"copy",variant:"ghost",onClick:()=>{e('
\n Warning Strong\n
'),navigator.clipboard.writeText('
\n Warning Strong\n
')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n Warning Strong\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Warning Strong\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Warning Strong\n'),navigator.clipboard.writeText('\n Warning Strong\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nWarning Strong\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nWarning Strong\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nWarning Strong\n'),navigator.clipboard.writeText('\nWarning Strong\n')},children:"Copy code"})]})]})})]})},eW=()=>{let[n,e]=(0,H.useState)();return(0,H.useEffect)(()=>{n&&setTimeout(()=>e(""),1500)},[n]),(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:" (Default) Static "})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:" (Default) Static "===n?"check":"copy",variant:"ghost",onClick:()=>{e(" (Default) Static "),navigator.clipboard.writeText(" (Default) Static ")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
(Default) Static
'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
(Default) Static
'===n?"check":"copy",variant:"ghost",onClick:()=>{e('
(Default) Static
'),navigator.clipboard.writeText('
(Default) Static
')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:"(Default) Static"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"(Default) Static"===n?"check":"copy",variant:"ghost",onClick:()=>{e("(Default) Static"),navigator.clipboard.writeText("(Default) Static")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:"\n(Default) Static\n"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"\n(Default) Static\n"===n?"check":"copy",variant:"ghost",onClick:()=>{e("\n(Default) Static\n"),navigator.clipboard.writeText("\n(Default) Static\n")},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:"\n \n"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"\n \n"===n?"check":"copy",variant:"ghost",onClick:()=>{e("\n \n"),navigator.clipboard.writeText("\n \n")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
'===n?"check":"copy",variant:"ghost",onClick:()=>{e('
'),navigator.clipboard.writeText('
')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:"\n \n"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"\n \n"===n?"check":"copy",variant:"ghost",onClick:()=>{e("\n \n"),navigator.clipboard.writeText("\n \n")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:"\n \n"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"\n \n"===n?"check":"copy",variant:"ghost",onClick:()=>{e("\n \n"),navigator.clipboard.writeText("\n \n")},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n Interactive Link \n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Interactive Link \n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Interactive Link \n'),navigator.clipboard.writeText('\n Interactive Link \n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
Interactive Link
'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
Interactive Link
'===n?"check":"copy",variant:"ghost",onClick:()=>{e('
Interactive Link
'),navigator.clipboard.writeText('
Interactive Link
')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n Interactive Link\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Interactive Link\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Interactive Link\n'),navigator.clipboard.writeText('\n Interactive Link\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n \nInteractive Link\n\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n \nInteractive Link\n\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n \nInteractive Link\n\n'),navigator.clipboard.writeText('\n \nInteractive Link\n\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n \n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n \n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n \n'),navigator.clipboard.writeText('\n \n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
\n
'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
\n
'===n?"check":"copy",variant:"ghost",onClick:()=>{e('
\n
'),navigator.clipboard.writeText('
\n
')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n \n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n \n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n \n'),navigator.clipboard.writeText('\n \n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n \n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n \n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n \n'),navigator.clipboard.writeText('\n \n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n \n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n \n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n \n'),navigator.clipboard.writeText('\n \n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
\n
'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
\n
'===n?"check":"copy",variant:"ghost",onClick:()=>{e('
\n
'),navigator.clipboard.writeText('
\n
')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n \n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n \n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n \n'),navigator.clipboard.writeText('\n \n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n \n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n \n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n \n'),navigator.clipboard.writeText('\n \n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n \n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n \n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n \n'),navigator.clipboard.writeText('\n \n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
\n
'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
\n
'===n?"check":"copy",variant:"ghost",onClick:()=>{e('
\n
'),navigator.clipboard.writeText('
\n
')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n \n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n \n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n \n'),navigator.clipboard.writeText('\n \n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n \n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n \n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n \n'),navigator.clipboard.writeText('\n \n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' Removeable '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' Removeable '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' Removeable '),navigator.clipboard.writeText(' Removeable ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
\n Removeable\n Remove tag\n \n
'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
\n Removeable\n Remove tag\n \n
'===n?"check":"copy",variant:"ghost",onClick:()=>{e('
\n Removeable\n Remove tag\n \n
'),navigator.clipboard.writeText('
\n Removeable\n Remove tag\n \n
')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'Removeable'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'Removeable'===n?"check":"copy",variant:"ghost",onClick:()=>{e('Removeable'),navigator.clipboard.writeText('Removeable')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nRemoveable\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nRemoveable\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nRemoveable\n'),navigator.clipboard.writeText('\nRemoveable\n')},children:"Copy code"})]})]})})]})},ez=()=>{let[n,e]=(0,H.useState)();return(0,H.useEffect)(()=>{n&&setTimeout(()=>e(""),1500)},[n]),(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n \n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n \n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n \n'),navigator.clipboard.writeText('\n \n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
\n
'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
\n
'===n?"check":"copy",variant:"ghost",onClick:()=>{e('
\n
'),navigator.clipboard.writeText('
\n
')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n \n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n \n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n \n'),navigator.clipboard.writeText('\n \n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n \n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n \n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n \n'),navigator.clipboard.writeText('\n \n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n \n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n \n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n \n'),navigator.clipboard.writeText('\n \n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
\n
'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
\n
'===n?"check":"copy",variant:"ghost",onClick:()=>{e('
\n
'),navigator.clipboard.writeText('
\n
')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n \n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n \n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n \n'),navigator.clipboard.writeText('\n \n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n \n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n \n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n \n'),navigator.clipboard.writeText('\n \n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n \n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n \n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n \n'),navigator.clipboard.writeText('\n \n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
\n
'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
\n
'===n?"check":"copy",variant:"ghost",onClick:()=>{e('
\n
'),navigator.clipboard.writeText('
\n
')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n \n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n \n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n \n'),navigator.clipboard.writeText('\n \n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n \n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n \n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n \n'),navigator.clipboard.writeText('\n \n')},children:"Copy code"})]})]})})]})},eU=()=>{let[n,e]=(0,H.useState)();return(0,H.useEffect)(()=>{n&&setTimeout(()=>e(""),1500)},[n]),(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:" (Default) Text "})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:" (Default) Text "===n?"check":"copy",variant:"ghost",onClick:()=>{e(" (Default) Text "),navigator.clipboard.writeText(" (Default) Text ")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
(Default) Text
'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
(Default) Text
'===n?"check":"copy",variant:"ghost",onClick:()=>{e('
(Default) Text
'),navigator.clipboard.writeText('
(Default) Text
')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:"(Default) Text"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"(Default) Text"===n?"check":"copy",variant:"ghost",onClick:()=>{e("(Default) Text"),navigator.clipboard.writeText("(Default) Text")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:"\n(Default) Text\n"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"\n(Default) Text\n"===n?"check":"copy",variant:"ghost",onClick:()=>{e("\n(Default) Text\n"),navigator.clipboard.writeText("\n(Default) Text\n")},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' Icon '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' Icon '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' Icon '),navigator.clipboard.writeText(' Icon ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
Icon
'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
Icon
'===n?"check":"copy",variant:"ghost",onClick:()=>{e('
Icon
'),navigator.clipboard.writeText('
Icon
')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n Icon\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Icon\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Icon\n'),navigator.clipboard.writeText('\n Icon\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nIcon\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nIcon\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nIcon\n'),navigator.clipboard.writeText('\nIcon\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' Icon & Text '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' Icon & Text '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' Icon & Text '),navigator.clipboard.writeText(' Icon & Text ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
Icon & Text
'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
Icon & Text
'===n?"check":"copy",variant:"ghost",onClick:()=>{e('
Icon & Text
'),navigator.clipboard.writeText('
Icon & Text
')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'Icon & Text'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'Icon & Text'===n?"check":"copy",variant:"ghost",onClick:()=>{e('Icon & Text'),navigator.clipboard.writeText('Icon & Text')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nIcon & Text\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nIcon & Text\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nIcon & Text\n'),navigator.clipboard.writeText('\nIcon & Text\n')},children:"Copy code"})]})]})})]})},eq=()=>{let[n,e]=(0,H.useState)();return(0,H.useEffect)(()=>{n&&setTimeout(()=>e(""),1500)},[n]),(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:" (Default) No Overflow "})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:" (Default) No Overflow "===n?"check":"copy",variant:"ghost",onClick:()=>{e(" (Default) No Overflow "),navigator.clipboard.writeText(" (Default) No Overflow ")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
(Default) No Overflow
'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
(Default) No Overflow
'===n?"check":"copy",variant:"ghost",onClick:()=>{e('
(Default) No Overflow
'),navigator.clipboard.writeText('
(Default) No Overflow
')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:"(Default) No Overflow"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"(Default) No Overflow"===n?"check":"copy",variant:"ghost",onClick:()=>{e("(Default) No Overflow"),navigator.clipboard.writeText("(Default) No Overflow")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:"\n(Default) No Overflow\n"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"\n(Default) No Overflow\n"===n?"check":"copy",variant:"ghost",onClick:()=>{e("\n(Default) No Overflow\n"),navigator.clipboard.writeText("\n(Default) No Overflow\n")},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' With Overflow (max-width) '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' With Overflow (max-width) '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' With Overflow (max-width) '),navigator.clipboard.writeText(' With Overflow (max-width) ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
With Overflow (max-width)
'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
With Overflow (max-width)
'===n?"check":"copy",variant:"ghost",onClick:()=>{e('
With Overflow (max-width)
'),navigator.clipboard.writeText('
With Overflow (max-width)
')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:"With Overflow (max-width)"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"With Overflow (max-width)"===n?"check":"copy",variant:"ghost",onClick:()=>{e("With Overflow (max-width)"),navigator.clipboard.writeText("With Overflow (max-width)")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nWith Overflow (max-width)\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nWith Overflow (max-width)\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nWith Overflow (max-width)\n'),navigator.clipboard.writeText('\nWith Overflow (max-width)\n')},children:"Copy code"})]})]})})]})},eJ=()=>{let[n,e]=(0,H.useState)();return(0,H.useEffect)(()=>{n&&setTimeout(()=>e(""),1500)},[n]),(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n \n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n \n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n \n'),navigator.clipboard.writeText('\n \n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
\n \n
'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
\n \n
'===n?"check":"copy",variant:"ghost",onClick:()=>{e('
\n \n
'),navigator.clipboard.writeText('
\n \n
')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n \n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n \n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n \n'),navigator.clipboard.writeText('\n \n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n \n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n \n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n \n'),navigator.clipboard.writeText('\n \n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n Interactive Link \n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Interactive Link \n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Interactive Link \n'),navigator.clipboard.writeText('\n Interactive Link \n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
\n Interactive Link\n
'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
\n Interactive Link\n
'===n?"check":"copy",variant:"ghost",onClick:()=>{e('
\n Interactive Link\n
'),navigator.clipboard.writeText('
\n Interactive Link\n
')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n Interactive Link\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Interactive Link\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Interactive Link\n'),navigator.clipboard.writeText('\n Interactive Link\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n \nInteractive Link\n\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n \nInteractive Link\n\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n \nInteractive Link\n\n'),navigator.clipboard.writeText('\n \nInteractive Link\n\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n \n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n \n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n \n'),navigator.clipboard.writeText('\n \n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
\n \n
'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
\n \n
'===n?"check":"copy",variant:"ghost",onClick:()=>{e('
\n \n
'),navigator.clipboard.writeText('
\n \n
')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n \n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n \n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n \n'),navigator.clipboard.writeText('\n \n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n \n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n \n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n \n'),navigator.clipboard.writeText('\n \n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n \n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n \n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n \n'),navigator.clipboard.writeText('\n \n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
\n
'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
\n
'===n?"check":"copy",variant:"ghost",onClick:()=>{e('
\n
'),navigator.clipboard.writeText('
\n
')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n \n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n \n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n \n'),navigator.clipboard.writeText('\n \n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n \n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n \n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n \n'),navigator.clipboard.writeText('\n \n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n \n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n \n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n \n'),navigator.clipboard.writeText('\n \n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
\n
'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
\n
'===n?"check":"copy",variant:"ghost",onClick:()=>{e('
\n
'),navigator.clipboard.writeText('
\n
')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n \n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n \n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n \n'),navigator.clipboard.writeText('\n \n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n \n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n \n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n \n'),navigator.clipboard.writeText('\n \n')},children:"Copy code"})]})]})})]})},eG=()=>{let[n,e]=(0,H.useState)();return(0,H.useEffect)(()=>{n&&setTimeout(()=>e(""),1500)},[n]),(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:"\n \n Tab 1 \n Tab 2 \n Tab 3 \n \n Tab Panel 1 \n Tab Panel 2 \n Tab Panel 3 \n"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"\n \n Tab 1 \n Tab 2 \n Tab 3 \n \n Tab Panel 1 \n Tab Panel 2 \n Tab Panel 3 \n"===n?"check":"copy",variant:"ghost",onClick:()=>{e("\n \n Tab 1 \n Tab 2 \n Tab 3 \n \n Tab Panel 1 \n Tab Panel 2 \n Tab Panel 3 \n"),navigator.clipboard.writeText("\n \n Tab 1 \n Tab 2 \n Tab 3 \n \n Tab Panel 1 \n Tab Panel 2 \n Tab Panel 3 \n")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n
\n
    \n
  • \n Tab 1\n
    • \n
  • \n Tab 2\n
    • \n
  • \n Tab 3\n
    • \n
\n
\n
Tab Panel 1
\n
Tab Panel 2
\n
Tab Panel 3
\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n
\n
    \n
  • \n Tab 1\n
    • \n
  • \n Tab 2\n
    • \n
  • \n Tab 3\n
    • \n
\n
\n
Tab Panel 1
\n
Tab Panel 2
\n
Tab Panel 3
\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n
\n
    \n
  • \n Tab 1\n
    • \n
  • \n Tab 2\n
    • \n
  • \n Tab 3\n
    • \n
\n
\n
Tab Panel 1
\n
Tab Panel 2
\n
Tab Panel 3
\n'),navigator.clipboard.writeText('\n
\n
    \n
  • \n Tab 1\n
    • \n
  • \n Tab 2\n
    • \n
  • \n Tab 3\n
    • \n
\n
\n
Tab Panel 1
\n
Tab Panel 2
\n
Tab Panel 3
\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:"\n \n Tab 1\n Tab 2\n Tab 3\n \n Tab Panel 1\n Tab Panel 2\n Tab Panel 3\n"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"\n \n Tab 1\n Tab 2\n Tab 3\n \n Tab Panel 1\n Tab Panel 2\n Tab Panel 3\n"===n?"check":"copy",variant:"ghost",onClick:()=>{e("\n \n Tab 1\n Tab 2\n Tab 3\n \n Tab Panel 1\n Tab Panel 2\n Tab Panel 3\n"),navigator.clipboard.writeText("\n \n Tab 1\n Tab 2\n Tab 3\n \n Tab Panel 1\n Tab Panel 2\n Tab Panel 3\n")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:"\n \n \nTab 1\n\n\nTab 2\n\n\nTab 3\n\n\n\nTab Panel 1\n\n\nTab Panel 2\n\n\nTab Panel 3\n\n"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"\n \n \nTab 1\n\n\nTab 2\n\n\nTab 3\n\n\n\nTab Panel 1\n\n\nTab Panel 2\n\n\nTab Panel 3\n\n"===n?"check":"copy",variant:"ghost",onClick:()=>{e("\n \n \nTab 1\n\n\nTab 2\n\n\nTab 3\n\n\n\nTab Panel 1\n\n\nTab Panel 2\n\n\nTab Panel 3\n\n"),navigator.clipboard.writeText("\n \n \nTab 1\n\n\nTab 2\n\n\nTab 3\n\n\n\nTab Panel 1\n\n\nTab Panel 2\n\n\nTab Panel 3\n\n")},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:"\n \n Tab 1 \n Tab 2 \n Tab 3 \n \n Tab Panel 1 \n Tab Panel 2 \n Tab Panel 3 \n"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"\n \n Tab 1 \n Tab 2 \n Tab 3 \n \n Tab Panel 1 \n Tab Panel 2 \n Tab Panel 3 \n"===n?"check":"copy",variant:"ghost",onClick:()=>{e("\n \n Tab 1 \n Tab 2 \n Tab 3 \n \n Tab Panel 1 \n Tab Panel 2 \n Tab Panel 3 \n"),navigator.clipboard.writeText("\n \n Tab 1 \n Tab 2 \n Tab 3 \n \n Tab Panel 1 \n Tab Panel 2 \n Tab Panel 3 \n")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n
\n
    \n
  • \n Tab 1\n
    • \n
  • \n Tab 2\n
    • \n
  • \n Tab 3\n
    • \n
\n
\n
Tab Panel 1
\n
Tab Panel 2
\n
Tab Panel 3
\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n
\n
    \n
  • \n Tab 1\n
    • \n
  • \n Tab 2\n
    • \n
  • \n Tab 3\n
    • \n
\n
\n
Tab Panel 1
\n
Tab Panel 2
\n
Tab Panel 3
\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n
\n
    \n
  • \n Tab 1\n
    • \n
  • \n Tab 2\n
    • \n
  • \n Tab 3\n
    • \n
\n
\n
Tab Panel 1
\n
Tab Panel 2
\n
Tab Panel 3
\n'),navigator.clipboard.writeText('\n
\n
    \n
  • \n Tab 1\n
    • \n
  • \n Tab 2\n
    • \n
  • \n Tab 3\n
    • \n
\n
\n
Tab Panel 1
\n
Tab Panel 2
\n
Tab Panel 3
\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:"\n \n Tab 1\n Tab 2\n Tab 3\n \n Tab Panel 1\n Tab Panel 2\n Tab Panel 3\n"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"\n \n Tab 1\n Tab 2\n Tab 3\n \n Tab Panel 1\n Tab Panel 2\n Tab Panel 3\n"===n?"check":"copy",variant:"ghost",onClick:()=>{e("\n \n Tab 1\n Tab 2\n Tab 3\n \n Tab Panel 1\n Tab Panel 2\n Tab Panel 3\n"),navigator.clipboard.writeText("\n \n Tab 1\n Tab 2\n Tab 3\n \n Tab Panel 1\n Tab Panel 2\n Tab Panel 3\n")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:"\n \n \nTab 1\n\n\nTab 2\n\n\nTab 3\n\n\n\nTab Panel 1\n\n\nTab Panel 2\n\n\nTab Panel 3\n\n"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"\n \n \nTab 1\n\n\nTab 2\n\n\nTab 3\n\n\n\nTab Panel 1\n\n\nTab Panel 2\n\n\nTab Panel 3\n\n"===n?"check":"copy",variant:"ghost",onClick:()=>{e("\n \n \nTab 1\n\n\nTab 2\n\n\nTab 3\n\n\n\nTab Panel 1\n\n\nTab Panel 2\n\n\nTab Panel 3\n\n"),navigator.clipboard.writeText("\n \n \nTab 1\n\n\nTab 2\n\n\nTab 3\n\n\n\nTab Panel 1\n\n\nTab Panel 2\n\n\nTab Panel 3\n\n")},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:"\n \n Tab 1 \n Tab 2 \n Tab 3 \n \n Tab Panel 1 \n Tab Panel 2 \n Tab Panel 3 \n"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"\n \n Tab 1 \n Tab 2 \n Tab 3 \n \n Tab Panel 1 \n Tab Panel 2 \n Tab Panel 3 \n"===n?"check":"copy",variant:"ghost",onClick:()=>{e("\n \n Tab 1 \n Tab 2 \n Tab 3 \n \n Tab Panel 1 \n Tab Panel 2 \n Tab Panel 3 \n"),navigator.clipboard.writeText("\n \n Tab 1 \n Tab 2 \n Tab 3 \n \n Tab Panel 1 \n Tab Panel 2 \n Tab Panel 3 \n")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n
\n
    \n
  • \n Tab 1\n
    • \n
  • \n Tab 2\n
    • \n
  • \n Tab 3\n
    • \n
\n
\n
Tab Panel 1
\n
Tab Panel 2
\n
Tab Panel 3
\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n
\n
    \n
  • \n Tab 1\n
    • \n
  • \n Tab 2\n
    • \n
  • \n Tab 3\n
    • \n
\n
\n
Tab Panel 1
\n
Tab Panel 2
\n
Tab Panel 3
\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n
\n
    \n
  • \n Tab 1\n
    • \n
  • \n Tab 2\n
    • \n
  • \n Tab 3\n
    • \n
\n
\n
Tab Panel 1
\n
Tab Panel 2
\n
Tab Panel 3
\n'),navigator.clipboard.writeText('\n
\n
    \n
  • \n Tab 1\n
    • \n
  • \n Tab 2\n
    • \n
  • \n Tab 3\n
    • \n
\n
\n
Tab Panel 1
\n
Tab Panel 2
\n
Tab Panel 3
\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:"\n \n Tab 1\n Tab 2\n Tab 3\n \n Tab Panel 1\n Tab Panel 2\n Tab Panel 3\n"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"\n \n Tab 1\n Tab 2\n Tab 3\n \n Tab Panel 1\n Tab Panel 2\n Tab Panel 3\n"===n?"check":"copy",variant:"ghost",onClick:()=>{e("\n \n Tab 1\n Tab 2\n Tab 3\n \n Tab Panel 1\n Tab Panel 2\n Tab Panel 3\n"),navigator.clipboard.writeText("\n \n Tab 1\n Tab 2\n Tab 3\n \n Tab Panel 1\n Tab Panel 2\n Tab Panel 3\n")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:"\n \n \nTab 1\n\n\nTab 2\n\n\nTab 3\n\n\n\nTab Panel 1\n\n\nTab Panel 2\n\n\nTab Panel 3\n\n"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"\n \n \nTab 1\n\n\nTab 2\n\n\nTab 3\n\n\n\nTab Panel 1\n\n\nTab Panel 2\n\n\nTab Panel 3\n\n"===n?"check":"copy",variant:"ghost",onClick:()=>{e("\n \n \nTab 1\n\n\nTab 2\n\n\nTab 3\n\n\n\nTab Panel 1\n\n\nTab Panel 2\n\n\nTab Panel 3\n\n"),navigator.clipboard.writeText("\n \n \nTab 1\n\n\nTab 2\n\n\nTab 3\n\n\n\nTab Panel 1\n\n\nTab Panel 2\n\n\nTab Panel 3\n\n")},children:"Copy code"})]})]})})]})},eY=()=>{let[n,e]=(0,H.useState)();return(0,H.useEffect)(()=>{n&&setTimeout(()=>e(""),1500)},[n]),(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n \n Tab 1 \n Tab 2 \n Tab 3 \n \n Tab Panel 1 \n Tab Panel 2 \n Tab Panel 3 \n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n \n Tab 1 \n Tab 2 \n Tab 3 \n \n Tab Panel 1 \n Tab Panel 2 \n Tab Panel 3 \n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n \n Tab 1 \n Tab 2 \n Tab 3 \n \n Tab Panel 1 \n Tab Panel 2 \n Tab Panel 3 \n'),navigator.clipboard.writeText('\n \n Tab 1 \n Tab 2 \n Tab 3 \n \n Tab Panel 1 \n Tab Panel 2 \n Tab Panel 3 \n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n
\n
    \n
  • \n Tab 1\n
    • \n
  • \n Tab 2\n
    • \n
  • \n Tab 3\n
    • \n
\n
\n
Tab Panel 1
\n
Tab Panel 2
\n
Tab Panel 3
\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n
\n
    \n
  • \n Tab 1\n
    • \n
  • \n Tab 2\n
    • \n
  • \n Tab 3\n
    • \n
\n
\n
Tab Panel 1
\n
Tab Panel 2
\n
Tab Panel 3
\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n
\n
    \n
  • \n Tab 1\n
    • \n
  • \n Tab 2\n
    • \n
  • \n Tab 3\n
    • \n
\n
\n
Tab Panel 1
\n
Tab Panel 2
\n
Tab Panel 3
\n'),navigator.clipboard.writeText('\n
\n
    \n
  • \n Tab 1\n
    • \n
  • \n Tab 2\n
    • \n
  • \n Tab 3\n
    • \n
\n
\n
Tab Panel 1
\n
Tab Panel 2
\n
Tab Panel 3
\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n \n Tab 1\n Tab 2\n Tab 3\n \n Tab Panel 1\n Tab Panel 2\n Tab Panel 3\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n \n Tab 1\n Tab 2\n Tab 3\n \n Tab Panel 1\n Tab Panel 2\n Tab Panel 3\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n \n Tab 1\n Tab 2\n Tab 3\n \n Tab Panel 1\n Tab Panel 2\n Tab Panel 3\n'),navigator.clipboard.writeText('\n \n Tab 1\n Tab 2\n Tab 3\n \n Tab Panel 1\n Tab Panel 2\n Tab Panel 3\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n \n \nTab 1\n\n\nTab 2\n\n\nTab 3\n\n\n\nTab Panel 1\n\n\nTab Panel 2\n\n\nTab Panel 3\n\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n \n \nTab 1\n\n\nTab 2\n\n\nTab 3\n\n\n\nTab Panel 1\n\n\nTab Panel 2\n\n\nTab Panel 3\n\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n \n \nTab 1\n\n\nTab 2\n\n\nTab 3\n\n\n\nTab Panel 1\n\n\nTab Panel 2\n\n\nTab Panel 3\n\n'),navigator.clipboard.writeText('\n \n \nTab 1\n\n\nTab 2\n\n\nTab 3\n\n\n\nTab Panel 1\n\n\nTab Panel 2\n\n\nTab Panel 3\n\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n \n Tab 1 \n Tab 2 \n Tab 3 \n \n Tab Panel 1 \n Tab Panel 2 \n Tab Panel 3 \n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n \n Tab 1 \n Tab 2 \n Tab 3 \n \n Tab Panel 1 \n Tab Panel 2 \n Tab Panel 3 \n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n \n Tab 1 \n Tab 2 \n Tab 3 \n \n Tab Panel 1 \n Tab Panel 2 \n Tab Panel 3 \n'),navigator.clipboard.writeText('\n \n Tab 1 \n Tab 2 \n Tab 3 \n \n Tab Panel 1 \n Tab Panel 2 \n Tab Panel 3 \n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n
\n
    \n
  • \n Tab 1\n
    • \n
  • \n Tab 2\n
    • \n
  • \n Tab 3\n
    • \n
\n
\n
Tab Panel 1
\n
Tab Panel 2
\n
Tab Panel 3
\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n
\n
    \n
  • \n Tab 1\n
    • \n
  • \n Tab 2\n
    • \n
  • \n Tab 3\n
    • \n
\n
\n
Tab Panel 1
\n
Tab Panel 2
\n
Tab Panel 3
\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n
\n
    \n
  • \n Tab 1\n
    • \n
  • \n Tab 2\n
    • \n
  • \n Tab 3\n
    • \n
\n
\n
Tab Panel 1
\n
Tab Panel 2
\n
Tab Panel 3
\n'),navigator.clipboard.writeText('\n
\n
    \n
  • \n Tab 1\n
    • \n
  • \n Tab 2\n
    • \n
  • \n Tab 3\n
    • \n
\n
\n
Tab Panel 1
\n
Tab Panel 2
\n
Tab Panel 3
\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n \n Tab 1\n Tab 2\n Tab 3\n \n Tab Panel 1\n Tab Panel 2\n Tab Panel 3\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n \n Tab 1\n Tab 2\n Tab 3\n \n Tab Panel 1\n Tab Panel 2\n Tab Panel 3\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n \n Tab 1\n Tab 2\n Tab 3\n \n Tab Panel 1\n Tab Panel 2\n Tab Panel 3\n'),navigator.clipboard.writeText('\n \n Tab 1\n Tab 2\n Tab 3\n \n Tab Panel 1\n Tab Panel 2\n Tab Panel 3\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n \n \nTab 1\n\n\nTab 2\n\n\nTab 3\n\n\n\nTab Panel 1\n\n\nTab Panel 2\n\n\nTab Panel 3\n\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n \n \nTab 1\n\n\nTab 2\n\n\nTab 3\n\n\n\nTab Panel 1\n\n\nTab Panel 2\n\n\nTab Panel 3\n\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n \n \nTab 1\n\n\nTab 2\n\n\nTab 3\n\n\n\nTab Panel 1\n\n\nTab Panel 2\n\n\nTab Panel 3\n\n'),navigator.clipboard.writeText('\n \n \nTab 1\n\n\nTab 2\n\n\nTab 3\n\n\n\nTab Panel 1\n\n\nTab Panel 2\n\n\nTab Panel 3\n\n')},children:"Copy code"})]})]})})]})},e$=()=>{let[n,e]=(0,H.useState)();return(0,H.useEffect)(()=>{n&&setTimeout(()=>e(""),1500)},[n]),(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n \n Tab 1 \n Tab 2 \n Tab 3 \n \n Tab Panel 1 \n Tab Panel 2 \n Tab Panel 3 \n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n \n Tab 1 \n Tab 2 \n Tab 3 \n \n Tab Panel 1 \n Tab Panel 2 \n Tab Panel 3 \n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n \n Tab 1 \n Tab 2 \n Tab 3 \n \n Tab Panel 1 \n Tab Panel 2 \n Tab Panel 3 \n'),navigator.clipboard.writeText('\n \n Tab 1 \n Tab 2 \n Tab 3 \n \n Tab Panel 1 \n Tab Panel 2 \n Tab Panel 3 \n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n
\n
    \n
  • \n Tab 1\n
    • \n
  • \n Tab 2\n
    • \n
  • \n Tab 3\n
    • \n
\n
\n
Tab Panel 1
\n
Tab Panel 2
\n
Tab Panel 3
\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n
\n
    \n
  • \n Tab 1\n
    • \n
  • \n Tab 2\n
    • \n
  • \n Tab 3\n
    • \n
\n
\n
Tab Panel 1
\n
Tab Panel 2
\n
Tab Panel 3
\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n
\n
    \n
  • \n Tab 1\n
    • \n
  • \n Tab 2\n
    • \n
  • \n Tab 3\n
    • \n
\n
\n
Tab Panel 1
\n
Tab Panel 2
\n
Tab Panel 3
\n'),navigator.clipboard.writeText('\n
\n
    \n
  • \n Tab 1\n
    • \n
  • \n Tab 2\n
    • \n
  • \n Tab 3\n
    • \n
\n
\n
Tab Panel 1
\n
Tab Panel 2
\n
Tab Panel 3
\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n \n Tab 1\n Tab 2\n Tab 3\n \n Tab Panel 1\n Tab Panel 2\n Tab Panel 3\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n \n Tab 1\n Tab 2\n Tab 3\n \n Tab Panel 1\n Tab Panel 2\n Tab Panel 3\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n \n Tab 1\n Tab 2\n Tab 3\n \n Tab Panel 1\n Tab Panel 2\n Tab Panel 3\n'),navigator.clipboard.writeText('\n \n Tab 1\n Tab 2\n Tab 3\n \n Tab Panel 1\n Tab Panel 2\n Tab Panel 3\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n \n \nTab 1\n\n\nTab 2\n\n\nTab 3\n\n\n\nTab Panel 1\n\n\nTab Panel 2\n\n\nTab Panel 3\n\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n \n \nTab 1\n\n\nTab 2\n\n\nTab 3\n\n\n\nTab Panel 1\n\n\nTab Panel 2\n\n\nTab Panel 3\n\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n \n \nTab 1\n\n\nTab 2\n\n\nTab 3\n\n\n\nTab Panel 1\n\n\nTab Panel 2\n\n\nTab Panel 3\n\n'),navigator.clipboard.writeText('\n \n \nTab 1\n\n\nTab 2\n\n\nTab 3\n\n\n\nTab Panel 1\n\n\nTab Panel 2\n\n\nTab Panel 3\n\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n \n Tab 1 \n Tab 2 \n Tab 3 \n \n Tab Panel 1 \n Tab Panel 2 \n Tab Panel 3 \n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n \n Tab 1 \n Tab 2 \n Tab 3 \n \n Tab Panel 1 \n Tab Panel 2 \n Tab Panel 3 \n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n \n Tab 1 \n Tab 2 \n Tab 3 \n \n Tab Panel 1 \n Tab Panel 2 \n Tab Panel 3 \n'),navigator.clipboard.writeText('\n \n Tab 1 \n Tab 2 \n Tab 3 \n \n Tab Panel 1 \n Tab Panel 2 \n Tab Panel 3 \n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n
\n
    \n
  • \n Tab 1\n
    • \n
  • \n Tab 2\n
    • \n
  • \n Tab 3\n
    • \n
\n
\n
Tab Panel 1
\n
Tab Panel 2
\n
Tab Panel 3
\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n
\n
    \n
  • \n Tab 1\n
    • \n
  • \n Tab 2\n
    • \n
  • \n Tab 3\n
    • \n
\n
\n
Tab Panel 1
\n
Tab Panel 2
\n
Tab Panel 3
\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n
\n
    \n
  • \n Tab 1\n
    • \n
  • \n Tab 2\n
    • \n
  • \n Tab 3\n
    • \n
\n
\n
Tab Panel 1
\n
Tab Panel 2
\n
Tab Panel 3
\n'),navigator.clipboard.writeText('\n
\n
    \n
  • \n Tab 1\n
    • \n
  • \n Tab 2\n
    • \n
  • \n Tab 3\n
    • \n
\n
\n
Tab Panel 1
\n
Tab Panel 2
\n
Tab Panel 3
\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n \n Tab 1\n Tab 2\n Tab 3\n \n Tab Panel 1\n Tab Panel 2\n Tab Panel 3\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n \n Tab 1\n Tab 2\n Tab 3\n \n Tab Panel 1\n Tab Panel 2\n Tab Panel 3\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n \n Tab 1\n Tab 2\n Tab 3\n \n Tab Panel 1\n Tab Panel 2\n Tab Panel 3\n'),navigator.clipboard.writeText('\n \n Tab 1\n Tab 2\n Tab 3\n \n Tab Panel 1\n Tab Panel 2\n Tab Panel 3\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n \n \nTab 1\n\n\nTab 2\n\n\nTab 3\n\n\n\nTab Panel 1\n\n\nTab Panel 2\n\n\nTab Panel 3\n\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n \n \nTab 1\n\n\nTab 2\n\n\nTab 3\n\n\n\nTab Panel 1\n\n\nTab Panel 2\n\n\nTab Panel 3\n\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n \n \nTab 1\n\n\nTab 2\n\n\nTab 3\n\n\n\nTab Panel 1\n\n\nTab Panel 2\n\n\nTab Panel 3\n\n'),navigator.clipboard.writeText('\n \n \nTab 1\n\n\nTab 2\n\n\nTab 3\n\n\n\nTab Panel 1\n\n\nTab Panel 2\n\n\nTab Panel 3\n\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n \n Tab 1 \n Tab 2 \n Tab 3 \n \n Tab Panel 1 \n Tab Panel 2 \n Tab Panel 3 \n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n \n Tab 1 \n Tab 2 \n Tab 3 \n \n Tab Panel 1 \n Tab Panel 2 \n Tab Panel 3 \n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n \n Tab 1 \n Tab 2 \n Tab 3 \n \n Tab Panel 1 \n Tab Panel 2 \n Tab Panel 3 \n'),navigator.clipboard.writeText('\n \n Tab 1 \n Tab 2 \n Tab 3 \n \n Tab Panel 1 \n Tab Panel 2 \n Tab Panel 3 \n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n
\n
    \n
  • \n Tab 1\n
    • \n
  • \n Tab 2\n
    • \n
  • \n Tab 3\n
    • \n
\n
\n
Tab Panel 1
\n
Tab Panel 2
\n
Tab Panel 3
\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n
\n
    \n
  • \n Tab 1\n
    • \n
  • \n Tab 2\n
    • \n
  • \n Tab 3\n
    • \n
\n
\n
Tab Panel 1
\n
Tab Panel 2
\n
Tab Panel 3
\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n
\n
    \n
  • \n Tab 1\n
    • \n
  • \n Tab 2\n
    • \n
  • \n Tab 3\n
    • \n
\n
\n
Tab Panel 1
\n
Tab Panel 2
\n
Tab Panel 3
\n'),navigator.clipboard.writeText('\n
\n
    \n
  • \n Tab 1\n
    • \n
  • \n Tab 2\n
    • \n
  • \n Tab 3\n
    • \n
\n
\n
Tab Panel 1
\n
Tab Panel 2
\n
Tab Panel 3
\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n \n Tab 1\n Tab 2\n Tab 3\n \n Tab Panel 1\n Tab Panel 2\n Tab Panel 3\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n \n Tab 1\n Tab 2\n Tab 3\n \n Tab Panel 1\n Tab Panel 2\n Tab Panel 3\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n \n Tab 1\n Tab 2\n Tab 3\n \n Tab Panel 1\n Tab Panel 2\n Tab Panel 3\n'),navigator.clipboard.writeText('\n \n Tab 1\n Tab 2\n Tab 3\n \n Tab Panel 1\n Tab Panel 2\n Tab Panel 3\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n \n \nTab 1\n\n\nTab 2\n\n\nTab 3\n\n\n\nTab Panel 1\n\n\nTab Panel 2\n\n\nTab Panel 3\n\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n \n \nTab 1\n\n\nTab 2\n\n\nTab 3\n\n\n\nTab Panel 1\n\n\nTab Panel 2\n\n\nTab Panel 3\n\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n \n \nTab 1\n\n\nTab 2\n\n\nTab 3\n\n\n\nTab Panel 1\n\n\nTab Panel 2\n\n\nTab Panel 3\n\n'),navigator.clipboard.writeText('\n \n \nTab 1\n\n\nTab 2\n\n\nTab 3\n\n\n\nTab Panel 1\n\n\nTab Panel 2\n\n\nTab Panel 3\n\n')},children:"Copy code"})]})]})})]})},eK=()=>{let[n,e]=(0,H.useState)();return(0,H.useEffect)(()=>{n&&setTimeout(()=>e(""),1500)},[n]),(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n \n Tab 1 \n Tab 2 \n Tab 3 \n \n Tab Panel 1 \n Tab Panel 2 \n Tab Panel 3 \n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n \n Tab 1 \n Tab 2 \n Tab 3 \n \n Tab Panel 1 \n Tab Panel 2 \n Tab Panel 3 \n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n \n Tab 1 \n Tab 2 \n Tab 3 \n \n Tab Panel 1 \n Tab Panel 2 \n Tab Panel 3 \n'),navigator.clipboard.writeText('\n \n Tab 1 \n Tab 2 \n Tab 3 \n \n Tab Panel 1 \n Tab Panel 2 \n Tab Panel 3 \n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n
\n
    \n
  • \n Tab 1\n
    • \n
  • \n Tab 2\n
    • \n
  • \n Tab 3\n
    • \n
\n
\n
Tab Panel 1
\n
Tab Panel 2
\n
Tab Panel 3
\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n
\n
    \n
  • \n Tab 1\n
    • \n
  • \n Tab 2\n
    • \n
  • \n Tab 3\n
    • \n
\n
\n
Tab Panel 1
\n
Tab Panel 2
\n
Tab Panel 3
\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n
\n
    \n
  • \n Tab 1\n
    • \n
  • \n Tab 2\n
    • \n
  • \n Tab 3\n
    • \n
\n
\n
Tab Panel 1
\n
Tab Panel 2
\n
Tab Panel 3
\n'),navigator.clipboard.writeText('\n
\n
    \n
  • \n Tab 1\n
    • \n
  • \n Tab 2\n
    • \n
  • \n Tab 3\n
    • \n
\n
\n
Tab Panel 1
\n
Tab Panel 2
\n
Tab Panel 3
\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n \n Tab 1\n Tab 2\n Tab 3\n \n Tab Panel 1\n Tab Panel 2\n Tab Panel 3\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n \n Tab 1\n Tab 2\n Tab 3\n \n Tab Panel 1\n Tab Panel 2\n Tab Panel 3\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n \n Tab 1\n Tab 2\n Tab 3\n \n Tab Panel 1\n Tab Panel 2\n Tab Panel 3\n'),navigator.clipboard.writeText('\n \n Tab 1\n Tab 2\n Tab 3\n \n Tab Panel 1\n Tab Panel 2\n Tab Panel 3\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n \n \nTab 1\n\n\nTab 2\n\n\nTab 3\n\n\n\nTab Panel 1\n\n\nTab Panel 2\n\n\nTab Panel 3\n\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n \n \nTab 1\n\n\nTab 2\n\n\nTab 3\n\n\n\nTab Panel 1\n\n\nTab Panel 2\n\n\nTab Panel 3\n\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n \n \nTab 1\n\n\nTab 2\n\n\nTab 3\n\n\n\nTab Panel 1\n\n\nTab Panel 2\n\n\nTab Panel 3\n\n'),navigator.clipboard.writeText('\n \n \nTab 1\n\n\nTab 2\n\n\nTab 3\n\n\n\nTab Panel 1\n\n\nTab Panel 2\n\n\nTab Panel 3\n\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n \n Tab 1 \n Tab 2 \n Tab 3 \n \n Tab Panel 1 \n Tab Panel 2 \n Tab Panel 3 \n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n \n Tab 1 \n Tab 2 \n Tab 3 \n \n Tab Panel 1 \n Tab Panel 2 \n Tab Panel 3 \n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n \n Tab 1 \n Tab 2 \n Tab 3 \n \n Tab Panel 1 \n Tab Panel 2 \n Tab Panel 3 \n'),navigator.clipboard.writeText('\n \n Tab 1 \n Tab 2 \n Tab 3 \n \n Tab Panel 1 \n Tab Panel 2 \n Tab Panel 3 \n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n
\n
    \n
  • \n Tab 1\n
    • \n
  • \n Tab 2\n
    • \n
  • \n Tab 3\n
    • \n
\n
\n
Tab Panel 1
\n
Tab Panel 2
\n
Tab Panel 3
\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n
\n
    \n
  • \n Tab 1\n
    • \n
  • \n Tab 2\n
    • \n
  • \n Tab 3\n
    • \n
\n
\n
Tab Panel 1
\n
Tab Panel 2
\n
Tab Panel 3
\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n
\n
    \n
  • \n Tab 1\n
    • \n
  • \n Tab 2\n
    • \n
  • \n Tab 3\n
    • \n
\n
\n
Tab Panel 1
\n
Tab Panel 2
\n
Tab Panel 3
\n'),navigator.clipboard.writeText('\n
\n
    \n
  • \n Tab 1\n
    • \n
  • \n Tab 2\n
    • \n
  • \n Tab 3\n
    • \n
\n
\n
Tab Panel 1
\n
Tab Panel 2
\n
Tab Panel 3
\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n \n Tab 1\n Tab 2\n Tab 3\n \n Tab Panel 1\n Tab Panel 2\n Tab Panel 3\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n \n Tab 1\n Tab 2\n Tab 3\n \n Tab Panel 1\n Tab Panel 2\n Tab Panel 3\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n \n Tab 1\n Tab 2\n Tab 3\n \n Tab Panel 1\n Tab Panel 2\n Tab Panel 3\n'),navigator.clipboard.writeText('\n \n Tab 1\n Tab 2\n Tab 3\n \n Tab Panel 1\n Tab Panel 2\n Tab Panel 3\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n \n \nTab 1\n\n\nTab 2\n\n\nTab 3\n\n\n\nTab Panel 1\n\n\nTab Panel 2\n\n\nTab Panel 3\n\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n \n \nTab 1\n\n\nTab 2\n\n\nTab 3\n\n\n\nTab Panel 1\n\n\nTab Panel 2\n\n\nTab Panel 3\n\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n \n \nTab 1\n\n\nTab 2\n\n\nTab 3\n\n\n\nTab Panel 1\n\n\nTab Panel 2\n\n\nTab Panel 3\n\n'),navigator.clipboard.writeText('\n \n \nTab 1\n\n\nTab 2\n\n\nTab 3\n\n\n\nTab Panel 1\n\n\nTab Panel 2\n\n\nTab Panel 3\n\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n \n Tab 1 \n Tab 2 \n Tab 3 \n \n Tab Panel 1 \n Tab Panel 2 \n Tab Panel 3 \n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n \n Tab 1 \n Tab 2 \n Tab 3 \n \n Tab Panel 1 \n Tab Panel 2 \n Tab Panel 3 \n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n \n Tab 1 \n Tab 2 \n Tab 3 \n \n Tab Panel 1 \n Tab Panel 2 \n Tab Panel 3 \n'),navigator.clipboard.writeText('\n \n Tab 1 \n Tab 2 \n Tab 3 \n \n Tab Panel 1 \n Tab Panel 2 \n Tab Panel 3 \n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n
\n
    \n
  • \n Tab 1\n
    • \n
  • \n Tab 2\n
    • \n
  • \n Tab 3\n
    • \n
\n
\n
Tab Panel 1
\n
Tab Panel 2
\n
Tab Panel 3
\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n
\n
    \n
  • \n Tab 1\n
    • \n
  • \n Tab 2\n
    • \n
  • \n Tab 3\n
    • \n
\n
\n
Tab Panel 1
\n
Tab Panel 2
\n
Tab Panel 3
\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n
\n
    \n
  • \n Tab 1\n
    • \n
  • \n Tab 2\n
    • \n
  • \n Tab 3\n
    • \n
\n
\n
Tab Panel 1
\n
Tab Panel 2
\n
Tab Panel 3
\n'),navigator.clipboard.writeText('\n
\n
    \n
  • \n Tab 1\n
    • \n
  • \n Tab 2\n
    • \n
  • \n Tab 3\n
    • \n
\n
\n
Tab Panel 1
\n
Tab Panel 2
\n
Tab Panel 3
\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:"\n \n Tab 1\n Tab 2\n Tab 3\n \n Tab Panel 1\n Tab Panel 2\n Tab Panel 3\n"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"\n \n Tab 1\n Tab 2\n Tab 3\n \n Tab Panel 1\n Tab Panel 2\n Tab Panel 3\n"===n?"check":"copy",variant:"ghost",onClick:()=>{e("\n \n Tab 1\n Tab 2\n Tab 3\n \n Tab Panel 1\n Tab Panel 2\n Tab Panel 3\n"),navigator.clipboard.writeText("\n \n Tab 1\n Tab 2\n Tab 3\n \n Tab Panel 1\n Tab Panel 2\n Tab Panel 3\n")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n \n \nTab 1\n\n\nTab 2\n\n\nTab 3\n\n\n\nTab Panel 1\n\n\nTab Panel 2\n\n\nTab Panel 3\n\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n \n \nTab 1\n\n\nTab 2\n\n\nTab 3\n\n\n\nTab Panel 1\n\n\nTab Panel 2\n\n\nTab Panel 3\n\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n \n \nTab 1\n\n\nTab 2\n\n\nTab 3\n\n\n\nTab Panel 1\n\n\nTab Panel 2\n\n\nTab Panel 3\n\n'),navigator.clipboard.writeText('\n \n \nTab 1\n\n\nTab 2\n\n\nTab 3\n\n\n\nTab Panel 1\n\n\nTab Panel 2\n\n\nTab Panel 3\n\n')},children:"Copy code"})]})]})})]})},eQ=()=>{let[n,e]=(0,H.useState)();return(0,H.useEffect)(()=>{n&&setTimeout(()=>e(""),1500)},[n]),(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n \n Tab 1 \n Tab 2 \n Tab 3 \n \n Tab Panel 1 \n Tab Panel 2 \n Tab Panel 3 \n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n \n Tab 1 \n Tab 2 \n Tab 3 \n \n Tab Panel 1 \n Tab Panel 2 \n Tab Panel 3 \n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n \n Tab 1 \n Tab 2 \n Tab 3 \n \n Tab Panel 1 \n Tab Panel 2 \n Tab Panel 3 \n'),navigator.clipboard.writeText('\n \n Tab 1 \n Tab 2 \n Tab 3 \n \n Tab Panel 1 \n Tab Panel 2 \n Tab Panel 3 \n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n
\n
    \n
  • \n Tab 1\n
    • \n
  • \n Tab 2\n
    • \n
  • \n Tab 3\n
    • \n
\n
\n
Tab Panel 1
\n
Tab Panel 2
\n
Tab Panel 3
\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n
\n
    \n
  • \n Tab 1\n
    • \n
  • \n Tab 2\n
    • \n
  • \n Tab 3\n
    • \n
\n
\n
Tab Panel 1
\n
Tab Panel 2
\n
Tab Panel 3
\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n
\n
    \n
  • \n Tab 1\n
    • \n
  • \n Tab 2\n
    • \n
  • \n Tab 3\n
    • \n
\n
\n
Tab Panel 1
\n
Tab Panel 2
\n
Tab Panel 3
\n'),navigator.clipboard.writeText('\n
\n
    \n
  • \n Tab 1\n
    • \n
  • \n Tab 2\n
    • \n
  • \n Tab 3\n
    • \n
\n
\n
Tab Panel 1
\n
Tab Panel 2
\n
Tab Panel 3
\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:"\n \n Tab 1\n Tab 2\n Tab 3\n \n Tab Panel 1\n Tab Panel 2\n Tab Panel 3\n"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"\n \n Tab 1\n Tab 2\n Tab 3\n \n Tab Panel 1\n Tab Panel 2\n Tab Panel 3\n"===n?"check":"copy",variant:"ghost",onClick:()=>{e("\n \n Tab 1\n Tab 2\n Tab 3\n \n Tab Panel 1\n Tab Panel 2\n Tab Panel 3\n"),navigator.clipboard.writeText("\n \n Tab 1\n Tab 2\n Tab 3\n \n Tab Panel 1\n Tab Panel 2\n Tab Panel 3\n")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n \n \nTab 1\n\n\nTab 2\n\n\nTab 3\n\n\n\nTab Panel 1\n\n\nTab Panel 2\n\n\nTab Panel 3\n\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n \n \nTab 1\n\n\nTab 2\n\n\nTab 3\n\n\n\nTab Panel 1\n\n\nTab Panel 2\n\n\nTab Panel 3\n\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n \n \nTab 1\n\n\nTab 2\n\n\nTab 3\n\n\n\nTab Panel 1\n\n\nTab Panel 2\n\n\nTab Panel 3\n\n'),navigator.clipboard.writeText('\n \n \nTab 1\n\n\nTab 2\n\n\nTab 3\n\n\n\nTab Panel 1\n\n\nTab Panel 2\n\n\nTab Panel 3\n\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n \n Tab 1 \n Tab 2 \n Tab 3 \n \n Tab Panel 1 \n Tab Panel 2 \n Tab Panel 3 \n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n \n Tab 1 \n Tab 2 \n Tab 3 \n \n Tab Panel 1 \n Tab Panel 2 \n Tab Panel 3 \n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n \n Tab 1 \n Tab 2 \n Tab 3 \n \n Tab Panel 1 \n Tab Panel 2 \n Tab Panel 3 \n'),navigator.clipboard.writeText('\n \n Tab 1 \n Tab 2 \n Tab 3 \n \n Tab Panel 1 \n Tab Panel 2 \n Tab Panel 3 \n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n
\n
    \n
  • \n Tab 1\n
    • \n
  • \n Tab 2\n
    • \n
  • \n Tab 3\n
    • \n
\n
\n
Tab Panel 1
\n
Tab Panel 2
\n
Tab Panel 3
\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n
\n
    \n
  • \n Tab 1\n
    • \n
  • \n Tab 2\n
    • \n
  • \n Tab 3\n
    • \n
\n
\n
Tab Panel 1
\n
Tab Panel 2
\n
Tab Panel 3
\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n
\n
    \n
  • \n Tab 1\n
    • \n
  • \n Tab 2\n
    • \n
  • \n Tab 3\n
    • \n
\n
\n
Tab Panel 1
\n
Tab Panel 2
\n
Tab Panel 3
\n'),navigator.clipboard.writeText('\n
\n
    \n
  • \n Tab 1\n
    • \n
  • \n Tab 2\n
    • \n
  • \n Tab 3\n
    • \n
\n
\n
Tab Panel 1
\n
Tab Panel 2
\n
Tab Panel 3
\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n \n Tab 1\n Tab 2\n Tab 3\n \n Tab Panel 1\n Tab Panel 2\n Tab Panel 3\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n \n Tab 1\n Tab 2\n Tab 3\n \n Tab Panel 1\n Tab Panel 2\n Tab Panel 3\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n \n Tab 1\n Tab 2\n Tab 3\n \n Tab Panel 1\n Tab Panel 2\n Tab Panel 3\n'),navigator.clipboard.writeText('\n \n Tab 1\n Tab 2\n Tab 3\n \n Tab Panel 1\n Tab Panel 2\n Tab Panel 3\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n \n \nTab 1\n\n\nTab 2\n\n\nTab 3\n\n\n\nTab Panel 1\n\n\nTab Panel 2\n\n\nTab Panel 3\n\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n \n \nTab 1\n\n\nTab 2\n\n\nTab 3\n\n\n\nTab Panel 1\n\n\nTab Panel 2\n\n\nTab Panel 3\n\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n \n \nTab 1\n\n\nTab 2\n\n\nTab 3\n\n\n\nTab Panel 1\n\n\nTab Panel 2\n\n\nTab Panel 3\n\n'),navigator.clipboard.writeText('\n \n \nTab 1\n\n\nTab 2\n\n\nTab 3\n\n\n\nTab Panel 1\n\n\nTab Panel 2\n\n\nTab Panel 3\n\n')},children:"Copy code"})]})]})})]})},eX=()=>{let[n,e]=(0,H.useState)();return(0,H.useEffect)(()=>{n&&setTimeout(()=>e(""),1500)},[n]),(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n Functional\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Functional\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Functional\n'),navigator.clipboard.writeText('\n Functional\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
  • \n functionalFunctional\n
    • '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
  • \n functionalFunctional\n
    • '===n?"check":"copy",variant:"ghost",onClick:()=>{e('
  • \n functionalFunctional\n
    • '),navigator.clipboard.writeText('
  • \n functionalFunctional\n
    • ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n Functional\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Functional\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Functional\n'),navigator.clipboard.writeText('\n Functional\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nFunctional\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nFunctional\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nFunctional\n'),navigator.clipboard.writeText('\nFunctional\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n (Default) Regular\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n (Default) Regular\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n (Default) Regular\n'),navigator.clipboard.writeText('\n (Default) Regular\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
  • \n (Default) Regular(Default)\n Regular\n
    • '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
  • \n (Default) Regular(Default)\n Regular\n
    • '===n?"check":"copy",variant:"ghost",onClick:()=>{e('
  • \n (Default) Regular(Default)\n Regular\n
    • '),navigator.clipboard.writeText('
  • \n (Default) Regular(Default)\n Regular\n
    • ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n (Default) Regular\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n (Default) Regular\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n (Default) Regular\n'),navigator.clipboard.writeText('\n (Default) Regular\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n(Default) Regular\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n(Default) Regular\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n(Default) Regular\n'),navigator.clipboard.writeText('\n(Default) Regular\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n Expressive\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Expressive\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Expressive\n'),navigator.clipboard.writeText('\n Expressive\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
  • \n expressiveExpressive\n
    • '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
  • \n expressiveExpressive\n
    • '===n?"check":"copy",variant:"ghost",onClick:()=>{e('
  • \n expressiveExpressive\n
    • '),navigator.clipboard.writeText('
  • \n expressiveExpressive\n
    • ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n Expressive\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Expressive\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Expressive\n'),navigator.clipboard.writeText('\n Expressive\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nExpressive\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nExpressive\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nExpressive\n'),navigator.clipboard.writeText('\nExpressive\n')},children:"Copy code"})]})]})})]})},eZ=()=>{let[n,e]=(0,H.useState)();return(0,H.useEffect)(()=>{n&&setTimeout(()=>e(""),1500)},[n]),(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' (Default) Enabled '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' (Default) Enabled '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' (Default) Enabled '),navigator.clipboard.writeText(' (Default) Enabled ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
  • \n (Default) Enabled(Default)\n Enabled\n
    • '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
  • \n (Default) Enabled(Default)\n Enabled\n
    • '===n?"check":"copy",variant:"ghost",onClick:()=>{e('
  • \n (Default) Enabled(Default)\n Enabled\n
    • '),navigator.clipboard.writeText('
  • \n (Default) Enabled(Default)\n Enabled\n
    • ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'(Default) Enabled'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'(Default) Enabled'===n?"check":"copy",variant:"ghost",onClick:()=>{e('(Default) Enabled'),navigator.clipboard.writeText('(Default) Enabled')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n(Default) Enabled\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n(Default) Enabled\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n(Default) Enabled\n'),navigator.clipboard.writeText('\n(Default) Enabled\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' active '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' active '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' active '),navigator.clipboard.writeText(' active ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
  • \n activeactive\n
    • '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
  • \n activeactive\n
    • '===n?"check":"copy",variant:"ghost",onClick:()=>{e('
  • \n activeactive\n
    • '),navigator.clipboard.writeText('
  • \n activeactive\n
    • ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n active\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n active\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n active\n'),navigator.clipboard.writeText('\n active\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nactive\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nactive\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nactive\n'),navigator.clipboard.writeText('\nactive\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' disabled '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' disabled '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' disabled '),navigator.clipboard.writeText(' disabled ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
  • \n activedisabled\n
    • '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
  • \n activedisabled\n
    • '===n?"check":"copy",variant:"ghost",onClick:()=>{e('
  • \n activedisabled\n
    • '),navigator.clipboard.writeText('
  • \n activedisabled\n
    • ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n disabled\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n disabled\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n disabled\n'),navigator.clipboard.writeText('\n disabled\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\ndisabled\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\ndisabled\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\ndisabled\n'),navigator.clipboard.writeText('\ndisabled\n')},children:"Copy code"})]})]})})]})},e0=()=>{let[n,e]=(0,H.useState)();return(0,H.useEffect)(()=>{n&&setTimeout(()=>e(""),1500)},[n]),(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' (Default) Text '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' (Default) Text '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' (Default) Text '),navigator.clipboard.writeText(' (Default) Text ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
  • \n (Default) Text(Default)\n Text\n
    • '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
  • \n (Default) Text(Default)\n Text\n
    • '===n?"check":"copy",variant:"ghost",onClick:()=>{e('
  • \n (Default) Text(Default)\n Text\n
    • '),navigator.clipboard.writeText('
  • \n (Default) Text(Default)\n Text\n
    • ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'(Default) Text'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'(Default) Text'===n?"check":"copy",variant:"ghost",onClick:()=>{e('(Default) Text'),navigator.clipboard.writeText('(Default) Text')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n(Default) Text\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n(Default) Text\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n(Default) Text\n'),navigator.clipboard.writeText('\n(Default) Text\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n Text - Icon (Leading)\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Text - Icon (Leading)\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Text - Icon (Leading)\n'),navigator.clipboard.writeText('\n Text - Icon (Leading)\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
  • \n
    • '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
  • \n
    • '===n?"check":"copy",variant:"ghost",onClick:()=>{e('
  • \n
    • '),navigator.clipboard.writeText('
  • \n
    • ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n Text - Icon (Leading)\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Text - Icon (Leading)\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Text - Icon (Leading)\n'),navigator.clipboard.writeText('\n Text - Icon (Leading)\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nText - Icon (Leading)\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nText - Icon (Leading)\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nText - Icon (Leading)\n'),navigator.clipboard.writeText('\nText - Icon (Leading)\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n Text - Icon (Trailing)\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Text - Icon (Trailing)\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Text - Icon (Trailing)\n'),navigator.clipboard.writeText('\n Text - Icon (Trailing)\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
  • \n
    • '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
  • \n
    • '===n?"check":"copy",variant:"ghost",onClick:()=>{e('
  • \n
    • '),navigator.clipboard.writeText('
  • \n
    • ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n Text - Icon (Trailing)\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Text - Icon (Trailing)\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Text - Icon (Trailing)\n'),navigator.clipboard.writeText('\n Text - Icon (Trailing)\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nText - Icon (Trailing)\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nText - Icon (Trailing)\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nText - Icon (Trailing)\n'),navigator.clipboard.writeText('\nText - Icon (Trailing)\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' Icon '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' Icon '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' Icon '),navigator.clipboard.writeText(' Icon ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
  • \n
    • '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
  • \n
    • '===n?"check":"copy",variant:"ghost",onClick:()=>{e('
  • \n
    • '),navigator.clipboard.writeText('
  • \n
    • ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n Icon\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Icon\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Icon\n'),navigator.clipboard.writeText('\n Icon\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nIcon\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nIcon\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nIcon\n'),navigator.clipboard.writeText('\nIcon\n')},children:"Copy code"})]})]})})]})},e1=()=>{let[n,e]=(0,H.useState)();return(0,H.useEffect)(()=>{n&&setTimeout(()=>e(""),1500)},[n]),(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' (Default) Auto Width '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' (Default) Auto Width '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' (Default) Auto Width '),navigator.clipboard.writeText(' (Default) Auto Width ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
  • \n (Default) Auto Width(Default)\n Auto Width\n
    • '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
  • \n (Default) Auto Width(Default)\n Auto Width\n
    • '===n?"check":"copy",variant:"ghost",onClick:()=>{e('
  • \n (Default) Auto Width(Default)\n Auto Width\n
    • '),navigator.clipboard.writeText('
  • \n (Default) Auto Width(Default)\n Auto Width\n
    • ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'(Default) Auto Width'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'(Default) Auto Width'===n?"check":"copy",variant:"ghost",onClick:()=>{e('(Default) Auto Width'),navigator.clipboard.writeText('(Default) Auto Width')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n(Default) Auto Width\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n(Default) Auto Width\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n(Default) Auto Width\n'),navigator.clipboard.writeText('\n(Default) Auto Width\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' Width full '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' Width full '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' Width full '),navigator.clipboard.writeText(' Width full ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
  • \n Width fullWidth\n full\n
    • '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
  • \n Width fullWidth\n full\n
    • '===n?"check":"copy",variant:"ghost",onClick:()=>{e('
  • \n Width fullWidth\n full\n
    • '),navigator.clipboard.writeText('
  • \n Width fullWidth\n full\n
    • ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n Width full\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Width full\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Width full\n'),navigator.clipboard.writeText('\n Width full\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nWidth full\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nWidth full\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nWidth full\n'),navigator.clipboard.writeText('\nWidth full\n')},children:"Copy code"})]})]})})]})},e2=()=>{let[n,e]=(0,H.useState)();return(0,H.useEffect)(()=>{n&&setTimeout(()=>e(""),1500)},[n]),(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' Left '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' Left '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' Left '),navigator.clipboard.writeText(' Left ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:"undefined"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"undefined"===n?"check":"copy",variant:"ghost",onClick:()=>{e("undefined"),navigator.clipboard.writeText("undefined")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n Left\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Left\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Left\n'),navigator.clipboard.writeText('\n Left\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nLeft\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nLeft\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nLeft\n'),navigator.clipboard.writeText('\nLeft\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n Centered\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Centered\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Centered\n'),navigator.clipboard.writeText('\n Centered\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:"undefined"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"undefined"===n?"check":"copy",variant:"ghost",onClick:()=>{e("undefined"),navigator.clipboard.writeText("undefined")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n Centered\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Centered\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Centered\n'),navigator.clipboard.writeText('\n Centered\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nCentered\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nCentered\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nCentered\n'),navigator.clipboard.writeText('\nCentered\n')},children:"Copy code"})]})]})})]})},e3=()=>{let[n,e]=(0,H.useState)();return(0,H.useEffect)(()=>{n&&setTimeout(()=>e(""),1500)},[n]),(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' Functional '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' Functional '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' Functional '),navigator.clipboard.writeText(' Functional ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
    \n FunctionalTODO: Add a validMessageTODO: Add an invalidMessage\n
    '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
    \n FunctionalTODO: Add a validMessageTODO: Add an invalidMessage\n
    '===n?"check":"copy",variant:"ghost",onClick:()=>{e('
    \n FunctionalTODO: Add a validMessageTODO: Add an invalidMessage\n
    '),navigator.clipboard.writeText('
    \n FunctionalTODO: Add a validMessageTODO: Add an invalidMessage\n
    ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'Functional'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'Functional'===n?"check":"copy",variant:"ghost",onClick:()=>{e('Functional'),navigator.clipboard.writeText('Functional')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nFunctional\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nFunctional\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nFunctional\n'),navigator.clipboard.writeText('\nFunctional\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' (Default) Regular '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' (Default) Regular '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' (Default) Regular '),navigator.clipboard.writeText(' (Default) Regular ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
    \n (Default) RegularTODO: Add a validMessageTODO: Add an invalidMessage\n
    '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
    \n (Default) RegularTODO: Add a validMessageTODO: Add an invalidMessage\n
    '===n?"check":"copy",variant:"ghost",onClick:()=>{e('
    \n (Default) RegularTODO: Add a validMessageTODO: Add an invalidMessage\n
    '),navigator.clipboard.writeText('
    \n (Default) RegularTODO: Add a validMessageTODO: Add an invalidMessage\n
    ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'(Default) Regular'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'(Default) Regular'===n?"check":"copy",variant:"ghost",onClick:()=>{e('(Default) Regular'),navigator.clipboard.writeText('(Default) Regular')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n(Default) Regular\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n(Default) Regular\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n(Default) Regular\n'),navigator.clipboard.writeText('\n(Default) Regular\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' Expressive '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' Expressive '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' Expressive '),navigator.clipboard.writeText(' Expressive ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
    \n ExpressiveTODO: Add a validMessageTODO: Add an invalidMessage\n
    '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
    \n ExpressiveTODO: Add a validMessageTODO: Add an invalidMessage\n
    '===n?"check":"copy",variant:"ghost",onClick:()=>{e('
    \n ExpressiveTODO: Add a validMessageTODO: Add an invalidMessage\n
    '),navigator.clipboard.writeText('
    \n ExpressiveTODO: Add a validMessageTODO: Add an invalidMessage\n
    ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'Expressive'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'Expressive'===n?"check":"copy",variant:"ghost",onClick:()=>{e('Expressive'),navigator.clipboard.writeText('Expressive')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nExpressive\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nExpressive\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nExpressive\n'),navigator.clipboard.writeText('\nExpressive\n')},children:"Copy code"})]})]})})]})},e4=()=>{let[n,e]=(0,H.useState)();return(0,H.useEffect)(()=>{n&&setTimeout(()=>e(""),1500)},[n]),(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' (Default) Enabled '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' (Default) Enabled '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' (Default) Enabled '),navigator.clipboard.writeText(' (Default) Enabled ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:"undefined"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"undefined"===n?"check":"copy",variant:"ghost",onClick:()=>{e("undefined"),navigator.clipboard.writeText("undefined")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'(Default) Enabled'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'(Default) Enabled'===n?"check":"copy",variant:"ghost",onClick:()=>{e('(Default) Enabled'),navigator.clipboard.writeText('(Default) Enabled')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n(Default) Enabled\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n(Default) Enabled\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n(Default) Enabled\n'),navigator.clipboard.writeText('\n(Default) Enabled\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n Disabled\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Disabled\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Disabled\n'),navigator.clipboard.writeText('\n Disabled\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:"undefined"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"undefined"===n?"check":"copy",variant:"ghost",onClick:()=>{e("undefined"),navigator.clipboard.writeText("undefined")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n Disabled\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Disabled\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Disabled\n'),navigator.clipboard.writeText('\n Disabled\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nDisabled\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nDisabled\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nDisabled\n'),navigator.clipboard.writeText('\nDisabled\n')},children:"Copy code"})]})]})})]})},e5=()=>{let[n,e]=(0,H.useState)();return(0,H.useEffect)(()=>{n&&setTimeout(()=>e(""),1500)},[n]),(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' (Default) Unchecked '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' (Default) Unchecked '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' (Default) Unchecked '),navigator.clipboard.writeText(' (Default) Unchecked ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
    \n (Default) UncheckedTODO: Add a validMessageTODO: Add an invalidMessage\n
    '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
    \n (Default) UncheckedTODO: Add a validMessageTODO: Add an invalidMessage\n
    '===n?"check":"copy",variant:"ghost",onClick:()=>{e('
    \n (Default) UncheckedTODO: Add a validMessageTODO: Add an invalidMessage\n
    '),navigator.clipboard.writeText('
    \n (Default) UncheckedTODO: Add a validMessageTODO: Add an invalidMessage\n
    ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'(Default) Unchecked'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'(Default) Unchecked'===n?"check":"copy",variant:"ghost",onClick:()=>{e('(Default) Unchecked'),navigator.clipboard.writeText('(Default) Unchecked')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n(Default) Unchecked\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n(Default) Unchecked\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n(Default) Unchecked\n'),navigator.clipboard.writeText('\n(Default) Unchecked\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' Unchecked - Invalid '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' Unchecked - Invalid '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' Unchecked - Invalid '),navigator.clipboard.writeText(' Unchecked - Invalid ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
    \n Unchecked - InvalidTODO: Add a validMessageTODO: Add an invalidMessage\n
    '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
    \n Unchecked - InvalidTODO: Add a validMessageTODO: Add an invalidMessage\n
    '===n?"check":"copy",variant:"ghost",onClick:()=>{e('
    \n Unchecked - InvalidTODO: Add a validMessageTODO: Add an invalidMessage\n
    '),navigator.clipboard.writeText('
    \n Unchecked - InvalidTODO: Add a validMessageTODO: Add an invalidMessage\n
    ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n Unchecked - Invalid\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Unchecked - Invalid\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Unchecked - Invalid\n'),navigator.clipboard.writeText('\n Unchecked - Invalid\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nUnchecked - Invalid\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nUnchecked - Invalid\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nUnchecked - Invalid\n'),navigator.clipboard.writeText('\nUnchecked - Invalid\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' Checked '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' Checked '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' Checked '),navigator.clipboard.writeText(' Checked ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
    \n CheckedTODO: Add a validMessageTODO: Add an invalidMessage\n
    '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
    \n CheckedTODO: Add a validMessageTODO: Add an invalidMessage\n
    '===n?"check":"copy",variant:"ghost",onClick:()=>{e('
    \n CheckedTODO: Add a validMessageTODO: Add an invalidMessage\n
    '),navigator.clipboard.writeText('
    \n CheckedTODO: Add a validMessageTODO: Add an invalidMessage\n
    ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n Checked\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Checked\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Checked\n'),navigator.clipboard.writeText('\n Checked\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nChecked\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nChecked\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nChecked\n'),navigator.clipboard.writeText('\nChecked\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n Checked - Valid\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Checked - Valid\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Checked - Valid\n'),navigator.clipboard.writeText('\n Checked - Valid\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
    \n Checked - ValidTODO: Add a validMessageTODO: Add an invalidMessage\n
    '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
    \n Checked - ValidTODO: Add a validMessageTODO: Add an invalidMessage\n
    '===n?"check":"copy",variant:"ghost",onClick:()=>{e('
    \n Checked - ValidTODO: Add a validMessageTODO: Add an invalidMessage\n
    '),navigator.clipboard.writeText('
    \n Checked - ValidTODO: Add a validMessageTODO: Add an invalidMessage\n
    ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n Checked - Valid\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Checked - Valid\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Checked - Valid\n'),navigator.clipboard.writeText('\n Checked - Valid\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nChecked - Valid\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nChecked - Valid\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nChecked - Valid\n'),navigator.clipboard.writeText('\nChecked - Valid\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' Indeterminate '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' Indeterminate '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' Indeterminate '),navigator.clipboard.writeText(' Indeterminate ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
    \n IndeterminateTODO: Add a validMessageTODO: Add an invalidMessage\n
    '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
    \n IndeterminateTODO: Add a validMessageTODO: Add an invalidMessage\n
    '===n?"check":"copy",variant:"ghost",onClick:()=>{e('
    \n IndeterminateTODO: Add a validMessageTODO: Add an invalidMessage\n
    '),navigator.clipboard.writeText('
    \n IndeterminateTODO: Add a validMessageTODO: Add an invalidMessage\n
    ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n Indeterminate\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Indeterminate\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Indeterminate\n'),navigator.clipboard.writeText('\n Indeterminate\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nIndeterminate\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nIndeterminate\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nIndeterminate\n'),navigator.clipboard.writeText('\nIndeterminate\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n Indeterminate - Invalid\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Indeterminate - Invalid\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Indeterminate - Invalid\n'),navigator.clipboard.writeText('\n Indeterminate - Invalid\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
    \n Indeterminate - InvalidTODO: Add a validMessageTODO: Add an invalidMessage\n
    '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
    \n Indeterminate - InvalidTODO: Add a validMessageTODO: Add an invalidMessage\n
    '===n?"check":"copy",variant:"ghost",onClick:()=>{e('
    \n Indeterminate - InvalidTODO: Add a validMessageTODO: Add an invalidMessage\n
    '),navigator.clipboard.writeText('
    \n Indeterminate - InvalidTODO: Add a validMessageTODO: Add an invalidMessage\n
    ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n Indeterminate - Invalid\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Indeterminate - Invalid\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Indeterminate - Invalid\n'),navigator.clipboard.writeText('\n Indeterminate - Invalid\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nIndeterminate - Invalid\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nIndeterminate - Invalid\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nIndeterminate - Invalid\n'),navigator.clipboard.writeText('\nIndeterminate - Invalid\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n Indeterminate - Valid\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Indeterminate - Valid\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Indeterminate - Valid\n'),navigator.clipboard.writeText('\n Indeterminate - Valid\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
    \n Indeterminate - ValidTODO: Add a validMessageTODO: Add an invalidMessage\n
    '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
    \n Indeterminate - ValidTODO: Add a validMessageTODO: Add an invalidMessage\n
    '===n?"check":"copy",variant:"ghost",onClick:()=>{e('
    \n Indeterminate - ValidTODO: Add a validMessageTODO: Add an invalidMessage\n
    '),navigator.clipboard.writeText('
    \n Indeterminate - ValidTODO: Add a validMessageTODO: Add an invalidMessage\n
    ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n Indeterminate - Valid\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Indeterminate - Valid\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Indeterminate - Valid\n'),navigator.clipboard.writeText('\n Indeterminate - Valid\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nIndeterminate - Valid\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nIndeterminate - Valid\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nIndeterminate - Valid\n'),navigator.clipboard.writeText('\nIndeterminate - Valid\n')},children:"Copy code"})]})]})})]})},e8=()=>{let[n,e]=(0,H.useState)();return(0,H.useEffect)(()=>{n&&setTimeout(()=>e(""),1500)},[n]),(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' (Default) Medium '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' (Default) Medium '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' (Default) Medium '),navigator.clipboard.writeText(' (Default) Medium ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
    \n (Default) MediumTODO: Add a validMessageTODO: Add an invalidMessage\n
    '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
    \n (Default) MediumTODO: Add a validMessageTODO: Add an invalidMessage\n
    '===n?"check":"copy",variant:"ghost",onClick:()=>{e('
    \n (Default) MediumTODO: Add a validMessageTODO: Add an invalidMessage\n
    '),navigator.clipboard.writeText('
    \n (Default) MediumTODO: Add a validMessageTODO: Add an invalidMessage\n
    ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'(Default) Medium'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'(Default) Medium'===n?"check":"copy",variant:"ghost",onClick:()=>{e('(Default) Medium'),navigator.clipboard.writeText('(Default) Medium')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n(Default) Medium\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n(Default) Medium\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n(Default) Medium\n'),navigator.clipboard.writeText('\n(Default) Medium\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' Small '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' Small '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' Small '),navigator.clipboard.writeText(' Small ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
    \n SmallTODO: Add a validMessageTODO: Add an invalidMessage\n
    '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
    \n SmallTODO: Add a validMessageTODO: Add an invalidMessage\n
    '===n?"check":"copy",variant:"ghost",onClick:()=>{e('
    \n SmallTODO: Add a validMessageTODO: Add an invalidMessage\n
    '),navigator.clipboard.writeText('
    \n SmallTODO: Add a validMessageTODO: Add an invalidMessage\n
    ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n Small\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Small\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Small\n'),navigator.clipboard.writeText('\n Small\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nSmall\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nSmall\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nSmall\n'),navigator.clipboard.writeText('\nSmall\n')},children:"Copy code"})]})]})})]})},e7=()=>{let[n,e]=(0,H.useState)();return(0,H.useEffect)(()=>{n&&setTimeout(()=>e(""),1500)},[n]),(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' (Default) Optional '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' (Default) Optional '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' (Default) Optional '),navigator.clipboard.writeText(' (Default) Optional ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
    \n (Default) OptionalTODO: Add a validMessageTODO: Add an invalidMessage\n
    '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
    \n (Default) OptionalTODO: Add a validMessageTODO: Add an invalidMessage\n
    '===n?"check":"copy",variant:"ghost",onClick:()=>{e('
    \n (Default) OptionalTODO: Add a validMessageTODO: Add an invalidMessage\n
    '),navigator.clipboard.writeText('
    \n (Default) OptionalTODO: Add a validMessageTODO: Add an invalidMessage\n
    ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'(Default) Optional'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'(Default) Optional'===n?"check":"copy",variant:"ghost",onClick:()=>{e('(Default) Optional'),navigator.clipboard.writeText('(Default) Optional')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n(Default) Optional\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n(Default) Optional\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n(Default) Optional\n'),navigator.clipboard.writeText('\n(Default) Optional\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' Required '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' Required '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' Required '),navigator.clipboard.writeText(' Required ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
    \n RequiredTODO: Add a validMessageTODO: Add an invalidMessage\n
    '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
    \n RequiredTODO: Add a validMessageTODO: Add an invalidMessage\n
    '===n?"check":"copy",variant:"ghost",onClick:()=>{e('
    \n RequiredTODO: Add a validMessageTODO: Add an invalidMessage\n
    '),navigator.clipboard.writeText('
    \n RequiredTODO: Add a validMessageTODO: Add an invalidMessage\n
    ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n Required\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Required\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Required\n'),navigator.clipboard.writeText('\n Required\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nRequired\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nRequired\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nRequired\n'),navigator.clipboard.writeText('\nRequired\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n Required - Indeterminate\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Required - Indeterminate\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Required - Indeterminate\n'),navigator.clipboard.writeText('\n Required - Indeterminate\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
    \n Required - IndeterminateTODO: Add a validMessageTODO: Add an invalidMessage\n
    '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
    \n Required - IndeterminateTODO: Add a validMessageTODO: Add an invalidMessage\n
    '===n?"check":"copy",variant:"ghost",onClick:()=>{e('
    \n Required - IndeterminateTODO: Add a validMessageTODO: Add an invalidMessage\n
    '),navigator.clipboard.writeText('
    \n Required - IndeterminateTODO: Add a validMessageTODO: Add an invalidMessage\n
    ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n Required - Indeterminate\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Required - Indeterminate\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Required - Indeterminate\n'),navigator.clipboard.writeText('\n Required - Indeterminate\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nRequired - Indeterminate\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nRequired - Indeterminate\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nRequired - Indeterminate\n'),navigator.clipboard.writeText('\nRequired - Indeterminate\n')},children:"Copy code"})]})]})})]})},e6=()=>{let[n,e]=(0,H.useState)();return(0,H.useEffect)(()=>{n&&setTimeout(()=>e(""),1500)},[n]),(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' (Default) Label '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' (Default) Label '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' (Default) Label '),navigator.clipboard.writeText(' (Default) Label ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
    \n (Default) LabelTODO: Add a validMessageTODO: Add an invalidMessage\n
    '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
    \n (Default) LabelTODO: Add a validMessageTODO: Add an invalidMessage\n
    '===n?"check":"copy",variant:"ghost",onClick:()=>{e('
    \n (Default) LabelTODO: Add a validMessageTODO: Add an invalidMessage\n
    '),navigator.clipboard.writeText('
    \n (Default) LabelTODO: Add a validMessageTODO: Add an invalidMessage\n
    ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'(Default) Label'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'(Default) Label'===n?"check":"copy",variant:"ghost",onClick:()=>{e('(Default) Label'),navigator.clipboard.writeText('(Default) Label')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n(Default) Label\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n(Default) Label\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n(Default) Label\n'),navigator.clipboard.writeText('\n(Default) Label\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' Long label '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' Long label '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' Long label '),navigator.clipboard.writeText(' Long label ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
    \n Long labelTODO: Add a validMessageTODO: Add an invalidMessage\n
    '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
    \n Long labelTODO: Add a validMessageTODO: Add an invalidMessage\n
    '===n?"check":"copy",variant:"ghost",onClick:()=>{e('
    \n Long labelTODO: Add a validMessageTODO: Add an invalidMessage\n
    '),navigator.clipboard.writeText('
    \n Long labelTODO: Add a validMessageTODO: Add an invalidMessage\n
    ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n Long label\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Long label\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Long label\n'),navigator.clipboard.writeText('\n Long label\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nLong label\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nLong label\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nLong label\n'),navigator.clipboard.writeText('\nLong label\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' No Label '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' No Label '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' No Label '),navigator.clipboard.writeText(' No Label ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
    \n No LabelTODO: Add a validMessageTODO: Add an invalidMessage\n
    '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
    \n No LabelTODO: Add a validMessageTODO: Add an invalidMessage\n
    '===n?"check":"copy",variant:"ghost",onClick:()=>{e('
    \n No LabelTODO: Add a validMessageTODO: Add an invalidMessage\n
    '),navigator.clipboard.writeText('
    \n No LabelTODO: Add a validMessageTODO: Add an invalidMessage\n
    ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n No Label\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n No Label\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n No Label\n'),navigator.clipboard.writeText('\n No Label\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nNo Label\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nNo Label\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nNo Label\n'),navigator.clipboard.writeText('\nNo Label\n')},children:"Copy code"})]})]})})]})},e9=()=>{let[n,e]=(0,H.useState)();return(0,H.useEffect)(()=>{n&&setTimeout(()=>e(""),1500)},[n]),(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' Functional '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' Functional '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' Functional '),navigator.clipboard.writeText(' Functional ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
    \n
    '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
    \n
    '===n?"check":"copy",variant:"ghost",onClick:()=>{e('
    \n
    '),navigator.clipboard.writeText('
    \n
    ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'Functional'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'Functional'===n?"check":"copy",variant:"ghost",onClick:()=>{e('Functional'),navigator.clipboard.writeText('Functional')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nFunctional\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nFunctional\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nFunctional\n'),navigator.clipboard.writeText('\nFunctional\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' (Default) Regular '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' (Default) Regular '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' (Default) Regular '),navigator.clipboard.writeText(' (Default) Regular ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
    \n
    '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
    \n
    '===n?"check":"copy",variant:"ghost",onClick:()=>{e('
    \n
    '),navigator.clipboard.writeText('
    \n
    ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'(Default) Regular'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'(Default) Regular'===n?"check":"copy",variant:"ghost",onClick:()=>{e('(Default) Regular'),navigator.clipboard.writeText('(Default) Regular')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n(Default) Regular\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n(Default) Regular\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n(Default) Regular\n'),navigator.clipboard.writeText('\n(Default) Regular\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' Expressive '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' Expressive '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' Expressive '),navigator.clipboard.writeText(' Expressive ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
    \n
    '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
    \n
    '===n?"check":"copy",variant:"ghost",onClick:()=>{e('
    \n
    '),navigator.clipboard.writeText('
    \n
    ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'Expressive'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'Expressive'===n?"check":"copy",variant:"ghost",onClick:()=>{e('Expressive'),navigator.clipboard.writeText('Expressive')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nExpressive\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nExpressive\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nExpressive\n'),navigator.clipboard.writeText('\nExpressive\n')},children:"Copy code"})]})]})})]})},an=()=>{let[n,e]=(0,H.useState)();return(0,H.useEffect)(()=>{n&&setTimeout(()=>e(""),1500)},[n]),(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' (Default) Label Above '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' (Default) Label Above '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' (Default) Label Above '),navigator.clipboard.writeText(' (Default) Label Above ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:"undefined"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"undefined"===n?"check":"copy",variant:"ghost",onClick:()=>{e("undefined"),navigator.clipboard.writeText("undefined")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'(Default) Label Above'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'(Default) Label Above'===n?"check":"copy",variant:"ghost",onClick:()=>{e('(Default) Label Above'),navigator.clipboard.writeText('(Default) Label Above')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n(Default) Label Above\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n(Default) Label Above\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n(Default) Label Above\n'),navigator.clipboard.writeText('\n(Default) Label Above\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n Floating Label\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Floating Label\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Floating Label\n'),navigator.clipboard.writeText('\n Floating Label\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:"undefined"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"undefined"===n?"check":"copy",variant:"ghost",onClick:()=>{e("undefined"),navigator.clipboard.writeText("undefined")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n Floating Label\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Floating Label\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Floating Label\n'),navigator.clipboard.writeText('\n Floating Label\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nFloating Label\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nFloating Label\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nFloating Label\n'),navigator.clipboard.writeText('\nFloating Label\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' Hidden Label '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' Hidden Label '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' Hidden Label '),navigator.clipboard.writeText(' Hidden Label ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:"undefined"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"undefined"===n?"check":"copy",variant:"ghost",onClick:()=>{e("undefined"),navigator.clipboard.writeText("undefined")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n Hidden Label\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Hidden Label\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Hidden Label\n'),navigator.clipboard.writeText('\n Hidden Label\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nHidden Label\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nHidden Label\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nHidden Label\n'),navigator.clipboard.writeText('\nHidden Label\n')},children:"Copy code"})]})]})})]})},ae=()=>{let[n,e]=(0,H.useState)();return(0,H.useEffect)(()=>{n&&setTimeout(()=>e(""),1500)},[n]),(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' (Default) Basic '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' (Default) Basic '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' (Default) Basic '),navigator.clipboard.writeText(' (Default) Basic ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:"undefined"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"undefined"===n?"check":"copy",variant:"ghost",onClick:()=>{e("undefined"),navigator.clipboard.writeText("undefined")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'(Default) Basic'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'(Default) Basic'===n?"check":"copy",variant:"ghost",onClick:()=>{e('(Default) Basic'),navigator.clipboard.writeText('(Default) Basic')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n(Default) Basic\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n(Default) Basic\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n(Default) Basic\n'),navigator.clipboard.writeText('\n(Default) Basic\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' Helper Message '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' Helper Message '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' Helper Message '),navigator.clipboard.writeText(' Helper Message ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:"undefined"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"undefined"===n?"check":"copy",variant:"ghost",onClick:()=>{e("undefined"),navigator.clipboard.writeText("undefined")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n Helper Message\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Helper Message\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Helper Message\n'),navigator.clipboard.writeText('\n Helper Message\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nHelper Message\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nHelper Message\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nHelper Message\n'),navigator.clipboard.writeText('\nHelper Message\n')},children:"Copy code"})]})]})})]})},aa=()=>{let[n,e]=(0,H.useState)();return(0,H.useEffect)(()=>{n&&setTimeout(()=>e(""),1500)},[n]),(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' (Default) Empty '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' (Default) Empty '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' (Default) Empty '),navigator.clipboard.writeText(' (Default) Empty ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:"undefined"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"undefined"===n?"check":"copy",variant:"ghost",onClick:()=>{e("undefined"),navigator.clipboard.writeText("undefined")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'(Default) Empty'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'(Default) Empty'===n?"check":"copy",variant:"ghost",onClick:()=>{e('(Default) Empty'),navigator.clipboard.writeText('(Default) Empty')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n(Default) Empty\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n(Default) Empty\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n(Default) Empty\n'),navigator.clipboard.writeText('\n(Default) Empty\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' Filled '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' Filled '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' Filled '),navigator.clipboard.writeText(' Filled ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:"undefined"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"undefined"===n?"check":"copy",variant:"ghost",onClick:()=>{e("undefined"),navigator.clipboard.writeText("undefined")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n Filled\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Filled\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Filled\n'),navigator.clipboard.writeText('\n Filled\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nFilled\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nFilled\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nFilled\n'),navigator.clipboard.writeText('\nFilled\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' Disabled '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' Disabled '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' Disabled '),navigator.clipboard.writeText(' Disabled ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:"undefined"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"undefined"===n?"check":"copy",variant:"ghost",onClick:()=>{e("undefined"),navigator.clipboard.writeText("undefined")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n Disabled\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Disabled\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Disabled\n'),navigator.clipboard.writeText('\n Disabled\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nDisabled\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nDisabled\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nDisabled\n'),navigator.clipboard.writeText('\nDisabled\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n Readonly - Filled\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Readonly - Filled\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Readonly - Filled\n'),navigator.clipboard.writeText('\n Readonly - Filled\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:"undefined"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"undefined"===n?"check":"copy",variant:"ghost",onClick:()=>{e("undefined"),navigator.clipboard.writeText("undefined")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n Readonly - Filled\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Readonly - Filled\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Readonly - Filled\n'),navigator.clipboard.writeText('\n Readonly - Filled\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nReadonly - Filled\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nReadonly - Filled\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nReadonly - Filled\n'),navigator.clipboard.writeText('\nReadonly - Filled\n')},children:"Copy code"})]})]})})]})},at=()=>{let[n,e]=(0,H.useState)();return(0,H.useEffect)(()=>{n&&setTimeout(()=>e(""),1500)},[n]),(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' (Default) Empty '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' (Default) Empty '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' (Default) Empty '),navigator.clipboard.writeText(' (Default) Empty ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:"undefined"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"undefined"===n?"check":"copy",variant:"ghost",onClick:()=>{e("undefined"),navigator.clipboard.writeText("undefined")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n (Default) Empty\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n (Default) Empty\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n (Default) Empty\n'),navigator.clipboard.writeText('\n (Default) Empty\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n(Default) Empty\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n(Default) Empty\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n(Default) Empty\n'),navigator.clipboard.writeText('\n(Default) Empty\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' Filled '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' Filled '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' Filled '),navigator.clipboard.writeText(' Filled ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:"undefined"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"undefined"===n?"check":"copy",variant:"ghost",onClick:()=>{e("undefined"),navigator.clipboard.writeText("undefined")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n Filled\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Filled\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Filled\n'),navigator.clipboard.writeText('\n Filled\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nFilled\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nFilled\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nFilled\n'),navigator.clipboard.writeText('\nFilled\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n Disabled\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Disabled\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Disabled\n'),navigator.clipboard.writeText('\n Disabled\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:"undefined"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"undefined"===n?"check":"copy",variant:"ghost",onClick:()=>{e("undefined"),navigator.clipboard.writeText("undefined")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n Disabled\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Disabled\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Disabled\n'),navigator.clipboard.writeText('\n Disabled\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nDisabled\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nDisabled\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nDisabled\n'),navigator.clipboard.writeText('\nDisabled\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n Readonly - Filled\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Readonly - Filled\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Readonly - Filled\n'),navigator.clipboard.writeText('\n Readonly - Filled\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:"undefined"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"undefined"===n?"check":"copy",variant:"ghost",onClick:()=>{e("undefined"),navigator.clipboard.writeText("undefined")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n Readonly - Filled\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Readonly - Filled\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Readonly - Filled\n'),navigator.clipboard.writeText('\n Readonly - Filled\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nReadonly - Filled\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nReadonly - Filled\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nReadonly - Filled\n'),navigator.clipboard.writeText('\nReadonly - Filled\n')},children:"Copy code"})]})]})})]})},ai=()=>{let[n,e]=(0,H.useState)();return(0,H.useEffect)(()=>{n&&setTimeout(()=>e(""),1500)},[n]),(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' (Default) Text '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' (Default) Text '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' (Default) Text '),navigator.clipboard.writeText(' (Default) Text ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
    \n
    '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
    \n
    '===n?"check":"copy",variant:"ghost",onClick:()=>{e('
    \n
    '),navigator.clipboard.writeText('
    \n
    ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n (Default) Text\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n (Default) Text\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n (Default) Text\n'),navigator.clipboard.writeText('\n (Default) Text\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n(Default) Text\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n(Default) Text\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n(Default) Text\n'),navigator.clipboard.writeText('\n(Default) Text\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' Filled Number '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' Filled Number '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' Filled Number '),navigator.clipboard.writeText(' Filled Number ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
    \n
    '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
    \n
    '===n?"check":"copy",variant:"ghost",onClick:()=>{e('
    \n
    '),navigator.clipboard.writeText('
    \n
    ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n Filled Number\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Filled Number\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Filled Number\n'),navigator.clipboard.writeText('\n Filled Number\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nFilled Number\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nFilled Number\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nFilled Number\n'),navigator.clipboard.writeText('\nFilled Number\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' Text - Leading Icon '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' Text - Leading Icon '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' Text - Leading Icon '),navigator.clipboard.writeText(' Text - Leading Icon ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
    \n
    '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
    \n
    '===n?"check":"copy",variant:"ghost",onClick:()=>{e('
    \n
    '),navigator.clipboard.writeText('
    \n
    ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n Text - Leading Icon\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Text - Leading Icon\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Text - Leading Icon\n'),navigator.clipboard.writeText('\n Text - Leading Icon\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nText - Leading Icon\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nText - Leading Icon\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nText - Leading Icon\n'),navigator.clipboard.writeText('\nText - Leading Icon\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n Text - Leading Icon - Trailing Icon\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Text - Leading Icon - Trailing Icon\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Text - Leading Icon - Trailing Icon\n'),navigator.clipboard.writeText('\n Text - Leading Icon - Trailing Icon\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
    \n
    '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
    \n
    '===n?"check":"copy",variant:"ghost",onClick:()=>{e('
    \n
    '),navigator.clipboard.writeText('
    \n
    ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n Text - Leading Icon - Trailing Icon\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Text - Leading Icon - Trailing Icon\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Text - Leading Icon - Trailing Icon\n'),navigator.clipboard.writeText('\n Text - Leading Icon - Trailing Icon\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nText - Leading Icon - Trailing Icon\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nText - Leading Icon - Trailing Icon\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nText - Leading Icon - Trailing Icon\n'),navigator.clipboard.writeText('\nText - Leading Icon - Trailing Icon\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' Text - Trailing Icon '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' Text - Trailing Icon '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' Text - Trailing Icon '),navigator.clipboard.writeText(' Text - Trailing Icon ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
    \n
    '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
    \n
    '===n?"check":"copy",variant:"ghost",onClick:()=>{e('
    \n
    '),navigator.clipboard.writeText('
    \n
    ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n Text - Trailing Icon\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Text - Trailing Icon\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Text - Trailing Icon\n'),navigator.clipboard.writeText('\n Text - Trailing Icon\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nText - Trailing Icon\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nText - Trailing Icon\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nText - Trailing Icon\n'),navigator.clipboard.writeText('\nText - Trailing Icon\n')},children:"Copy code"})]})]})})]})},ao=()=>{let[n,e]=(0,H.useState)();return(0,H.useEffect)(()=>{n&&setTimeout(()=>e(""),1500)},[n]),(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' (Default) Optional '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' (Default) Optional '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' (Default) Optional '),navigator.clipboard.writeText(' (Default) Optional ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
    \n
    '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
    \n
    '===n?"check":"copy",variant:"ghost",onClick:()=>{e('
    \n
    '),navigator.clipboard.writeText('
    \n
    ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'(Default) Optional'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'(Default) Optional'===n?"check":"copy",variant:"ghost",onClick:()=>{e('(Default) Optional'),navigator.clipboard.writeText('(Default) Optional')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n(Default) Optional\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n(Default) Optional\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n(Default) Optional\n'),navigator.clipboard.writeText('\n(Default) Optional\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' Required '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' Required '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' Required '),navigator.clipboard.writeText(' Required ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'
    \n
    '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'
    \n
    '===n?"check":"copy",variant:"ghost",onClick:()=>{e('
    \n
    '),navigator.clipboard.writeText('
    \n
    ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n Required\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Required\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Required\n'),navigator.clipboard.writeText('\n Required\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nRequired\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nRequired\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nRequired\n'),navigator.clipboard.writeText('\nRequired\n')},children:"Copy code"})]})]})})]})},al=()=>{let[n,e]=(0,H.useState)();return(0,H.useEffect)(()=>{n&&setTimeout(()=>e(""),1500)},[n]),(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' (Default) Text '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' (Default) Text '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' (Default) Text '),navigator.clipboard.writeText(' (Default) Text ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:"undefined"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"undefined"===n?"check":"copy",variant:"ghost",onClick:()=>{e("undefined"),navigator.clipboard.writeText("undefined")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'(Default) Text'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'(Default) Text'===n?"check":"copy",variant:"ghost",onClick:()=>{e('(Default) Text'),navigator.clipboard.writeText('(Default) Text')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n(Default) Text\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n(Default) Text\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n(Default) Text\n'),navigator.clipboard.writeText('\n(Default) Text\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' Password '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' Password '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' Password '),navigator.clipboard.writeText(' Password ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:"undefined"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"undefined"===n?"check":"copy",variant:"ghost",onClick:()=>{e("undefined"),navigator.clipboard.writeText("undefined")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n Password\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Password\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Password\n'),navigator.clipboard.writeText('\n Password\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nPassword\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nPassword\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nPassword\n'),navigator.clipboard.writeText('\nPassword\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' Search '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' Search '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' Search '),navigator.clipboard.writeText(' Search ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:"undefined"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"undefined"===n?"check":"copy",variant:"ghost",onClick:()=>{e("undefined"),navigator.clipboard.writeText("undefined")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n Search\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Search\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Search\n'),navigator.clipboard.writeText('\n Search\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nSearch\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nSearch\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nSearch\n'),navigator.clipboard.writeText('\nSearch\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' E-Mail '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' E-Mail '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' E-Mail '),navigator.clipboard.writeText(' E-Mail ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:"undefined"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"undefined"===n?"check":"copy",variant:"ghost",onClick:()=>{e("undefined"),navigator.clipboard.writeText("undefined")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n E-Mail\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n E-Mail\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n E-Mail\n'),navigator.clipboard.writeText('\n E-Mail\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nE-Mail\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nE-Mail\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nE-Mail\n'),navigator.clipboard.writeText('\nE-Mail\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' Number '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' Number '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' Number '),navigator.clipboard.writeText(' Number ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:"undefined"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"undefined"===n?"check":"copy",variant:"ghost",onClick:()=>{e("undefined"),navigator.clipboard.writeText("undefined")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n Number\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Number\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Number\n'),navigator.clipboard.writeText('\n Number\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nNumber\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nNumber\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nNumber\n'),navigator.clipboard.writeText('\nNumber\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' Tel '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' Tel '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' Tel '),navigator.clipboard.writeText(' Tel ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:"undefined"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"undefined"===n?"check":"copy",variant:"ghost",onClick:()=>{e("undefined"),navigator.clipboard.writeText("undefined")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n Tel\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Tel\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Tel\n'),navigator.clipboard.writeText('\n Tel\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nTel\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nTel\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nTel\n'),navigator.clipboard.writeText('\nTel\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' URL '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' URL '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' URL '),navigator.clipboard.writeText(' URL ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:"undefined"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"undefined"===n?"check":"copy",variant:"ghost",onClick:()=>{e("undefined"),navigator.clipboard.writeText("undefined")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n URL\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n URL\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n URL\n'),navigator.clipboard.writeText('\n URL\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nURL\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nURL\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nURL\n'),navigator.clipboard.writeText('\nURL\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' Date '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' Date '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' Date '),navigator.clipboard.writeText(' Date ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:"undefined"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"undefined"===n?"check":"copy",variant:"ghost",onClick:()=>{e("undefined"),navigator.clipboard.writeText("undefined")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n Date\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Date\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Date\n'),navigator.clipboard.writeText('\n Date\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nDate\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nDate\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nDate\n'),navigator.clipboard.writeText('\nDate\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' Datetime Local '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' Datetime Local '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' Datetime Local '),navigator.clipboard.writeText(' Datetime Local ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:"undefined"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"undefined"===n?"check":"copy",variant:"ghost",onClick:()=>{e("undefined"),navigator.clipboard.writeText("undefined")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n Datetime Local\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Datetime Local\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Datetime Local\n'),navigator.clipboard.writeText('\n Datetime Local\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nDatetime Local\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nDatetime Local\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nDatetime Local\n'),navigator.clipboard.writeText('\nDatetime Local\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' Month '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' Month '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' Month '),navigator.clipboard.writeText(' Month ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:"undefined"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"undefined"===n?"check":"copy",variant:"ghost",onClick:()=>{e("undefined"),navigator.clipboard.writeText("undefined")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n Month\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Month\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Month\n'),navigator.clipboard.writeText('\n Month\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nMonth\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nMonth\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nMonth\n'),navigator.clipboard.writeText('\nMonth\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' Time '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' Time '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' Time '),navigator.clipboard.writeText(' Time ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:"undefined"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"undefined"===n?"check":"copy",variant:"ghost",onClick:()=>{e("undefined"),navigator.clipboard.writeText("undefined")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n Time\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Time\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Time\n'),navigator.clipboard.writeText('\n Time\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nTime\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nTime\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nTime\n'),navigator.clipboard.writeText('\nTime\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' Week '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' Week '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' Week '),navigator.clipboard.writeText(' Week ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:"undefined"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"undefined"===n?"check":"copy",variant:"ghost",onClick:()=>{e("undefined"),navigator.clipboard.writeText("undefined")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n Week\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Week\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Week\n'),navigator.clipboard.writeText('\n Week\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nWeek\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nWeek\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nWeek\n'),navigator.clipboard.writeText('\nWeek\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' Datalist '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' Datalist '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' Datalist '),navigator.clipboard.writeText(' Datalist ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:"undefined"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"undefined"===n?"check":"copy",variant:"ghost",onClick:()=>{e("undefined"),navigator.clipboard.writeText("undefined")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n Datalist\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Datalist\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Datalist\n'),navigator.clipboard.writeText('\n Datalist\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nDatalist\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nDatalist\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nDatalist\n'),navigator.clipboard.writeText('\nDatalist\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' File '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' File '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' File '),navigator.clipboard.writeText(' File ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:"undefined"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"undefined"===n?"check":"copy",variant:"ghost",onClick:()=>{e("undefined"),navigator.clipboard.writeText("undefined")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n File\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n File\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n File\n'),navigator.clipboard.writeText('\n File\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nFile\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nFile\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nFile\n'),navigator.clipboard.writeText('\nFile\n')},children:"Copy code"})]})]})})]})},as=()=>{let[n,e]=(0,H.useState)();return(0,H.useEffect)(()=>{n&&setTimeout(()=>e(""),1500)},[n]),(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' (Default) Text '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' (Default) Text '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' (Default) Text '),navigator.clipboard.writeText(' (Default) Text ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:"undefined"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"undefined"===n?"check":"copy",variant:"ghost",onClick:()=>{e("undefined"),navigator.clipboard.writeText("undefined")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n (Default) Text\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n (Default) Text\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n (Default) Text\n'),navigator.clipboard.writeText('\n (Default) Text\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n(Default) Text\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n(Default) Text\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n(Default) Text\n'),navigator.clipboard.writeText('\n(Default) Text\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' Password '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' Password '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' Password '),navigator.clipboard.writeText(' Password ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:"undefined"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"undefined"===n?"check":"copy",variant:"ghost",onClick:()=>{e("undefined"),navigator.clipboard.writeText("undefined")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n Password\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Password\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Password\n'),navigator.clipboard.writeText('\n Password\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nPassword\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nPassword\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nPassword\n'),navigator.clipboard.writeText('\nPassword\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' Search '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' Search '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' Search '),navigator.clipboard.writeText(' Search ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:"undefined"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"undefined"===n?"check":"copy",variant:"ghost",onClick:()=>{e("undefined"),navigator.clipboard.writeText("undefined")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n Search\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Search\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Search\n'),navigator.clipboard.writeText('\n Search\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nSearch\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nSearch\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nSearch\n'),navigator.clipboard.writeText('\nSearch\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' E-Mail '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' E-Mail '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' E-Mail '),navigator.clipboard.writeText(' E-Mail ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:"undefined"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"undefined"===n?"check":"copy",variant:"ghost",onClick:()=>{e("undefined"),navigator.clipboard.writeText("undefined")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n E-Mail\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n E-Mail\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n E-Mail\n'),navigator.clipboard.writeText('\n E-Mail\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nE-Mail\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nE-Mail\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nE-Mail\n'),navigator.clipboard.writeText('\nE-Mail\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' Number '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' Number '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' Number '),navigator.clipboard.writeText(' Number ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:"undefined"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"undefined"===n?"check":"copy",variant:"ghost",onClick:()=>{e("undefined"),navigator.clipboard.writeText("undefined")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n Number\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Number\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Number\n'),navigator.clipboard.writeText('\n Number\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nNumber\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nNumber\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nNumber\n'),navigator.clipboard.writeText('\nNumber\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' Tel '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' Tel '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' Tel '),navigator.clipboard.writeText(' Tel ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:"undefined"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"undefined"===n?"check":"copy",variant:"ghost",onClick:()=>{e("undefined"),navigator.clipboard.writeText("undefined")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n Tel\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Tel\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Tel\n'),navigator.clipboard.writeText('\n Tel\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nTel\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nTel\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nTel\n'),navigator.clipboard.writeText('\nTel\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' URL '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' URL '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' URL '),navigator.clipboard.writeText(' URL ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:"undefined"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"undefined"===n?"check":"copy",variant:"ghost",onClick:()=>{e("undefined"),navigator.clipboard.writeText("undefined")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n URL\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n URL\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n URL\n'),navigator.clipboard.writeText('\n URL\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nURL\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nURL\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nURL\n'),navigator.clipboard.writeText('\nURL\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' Date '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' Date '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' Date '),navigator.clipboard.writeText(' Date ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:"undefined"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"undefined"===n?"check":"copy",variant:"ghost",onClick:()=>{e("undefined"),navigator.clipboard.writeText("undefined")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n Date\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Date\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Date\n'),navigator.clipboard.writeText('\n Date\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nDate\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nDate\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nDate\n'),navigator.clipboard.writeText('\nDate\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n Datetime Local\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Datetime Local\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Datetime Local\n'),navigator.clipboard.writeText('\n Datetime Local\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:"undefined"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"undefined"===n?"check":"copy",variant:"ghost",onClick:()=>{e("undefined"),navigator.clipboard.writeText("undefined")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n Datetime Local\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Datetime Local\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Datetime Local\n'),navigator.clipboard.writeText('\n Datetime Local\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nDatetime Local\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nDatetime Local\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nDatetime Local\n'),navigator.clipboard.writeText('\nDatetime Local\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' Month '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' Month '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' Month '),navigator.clipboard.writeText(' Month ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:"undefined"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"undefined"===n?"check":"copy",variant:"ghost",onClick:()=>{e("undefined"),navigator.clipboard.writeText("undefined")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n Month\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Month\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Month\n'),navigator.clipboard.writeText('\n Month\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nMonth\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nMonth\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nMonth\n'),navigator.clipboard.writeText('\nMonth\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' Time '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' Time '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' Time '),navigator.clipboard.writeText(' Time ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:"undefined"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"undefined"===n?"check":"copy",variant:"ghost",onClick:()=>{e("undefined"),navigator.clipboard.writeText("undefined")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n Time\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Time\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Time\n'),navigator.clipboard.writeText('\n Time\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nTime\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nTime\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nTime\n'),navigator.clipboard.writeText('\nTime\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' Week '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' Week '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' Week '),navigator.clipboard.writeText(' Week ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:"undefined"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"undefined"===n?"check":"copy",variant:"ghost",onClick:()=>{e("undefined"),navigator.clipboard.writeText("undefined")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n Week\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Week\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Week\n'),navigator.clipboard.writeText('\n Week\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nWeek\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nWeek\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nWeek\n'),navigator.clipboard.writeText('\nWeek\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'\n Datalist\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Datalist\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Datalist\n'),navigator.clipboard.writeText('\n Datalist\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:"undefined"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"undefined"===n?"check":"copy",variant:"ghost",onClick:()=>{e("undefined"),navigator.clipboard.writeText("undefined")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n Datalist\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n Datalist\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n Datalist\n'),navigator.clipboard.writeText('\n Datalist\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nDatalist\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nDatalist\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nDatalist\n'),navigator.clipboard.writeText('\nDatalist\n')},children:"Copy code"})]})]})}),(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' File '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' File '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' File '),navigator.clipboard.writeText(' File ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:"undefined"})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:"undefined"===n?"check":"copy",variant:"ghost",onClick:()=>{e("undefined"),navigator.clipboard.writeText("undefined")},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=react",children:"How to use this in react"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\n File\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\n File\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\n File\n'),navigator.clipboard.writeText('\n File\n')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=vue",children:"How to use this in vue"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-tsx",children:'\nFile\n'})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:'\nFile\n'===n?"check":"copy",variant:"ghost",onClick:()=>{e('\nFile\n'),navigator.clipboard.writeText('\nFile\n')},children:"Copy code"})]})]})})]})},ar=()=>{let[n,e]=(0,H.useState)();return(0,H.useEffect)(()=>{n&&setTimeout(()=>e(""),1500)},[n]),(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(_.A,{className:"tab-container",children:(0,C.jsxs)(nx.A,{children:[(0,C.jsxs)(ng.A,{children:[(0,C.jsx)(nm.A,{children:"Angular"}),(0,C.jsx)(nm.A,{children:"HTML"}),(0,C.jsx)(nm.A,{children:"React"}),(0,C.jsx)(nm.A,{children:"Vue"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=angular",children:"How to use this in angular"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:' Functional '})}),(0,C.jsx)(L.A,{className:"copy-button",noText:!0,icon:' Functional '===n?"check":"copy",variant:"ghost",onClick:()=>{e(' Functional '),navigator.clipboard.writeText(' Functional ')},children:"Copy code"})]}),(0,C.jsxs)(nv.A,{children:[(0,C.jsx)(R.A,{content:"external",target:"_blank",href:"how-to-use?current=html",children:"How to use this in html"}),(0,C.jsx)("pre",{children:(0,C.jsx)("code",{className:"hljs language-html",children:'