npm - @roadtrip/components - Versions diffs - 3.39.0 → 3.39.1 - Mend

@roadtrip/components 3.39.0 → 3.39.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (305) hide show

package/dist/esm/index-PBFNUZjj.js DELETED Viewed

@@ -1,2851 +0,0 @@
-const NAMESPACE = 'roadtrip';
-const BUILD = /* roadtrip */ { hydratedSelectorName: "hydrated", lazyLoad: true, slotRelocation: true, updatable: true};
-const globalFn = () => { };
-const globalScripts = globalFn;
-const globalStyles = "/* BASE\n -------------------- */\n/**\n * Variables\n *\n * List of all reusable variables (colors, breakpoints...)\n * using CSS Custom properties (https://developer.mozilla.org/en-US/docs/Web/CSS/--*)\n *\n */\n\nbody {\n  /* BRAND\n   -------------------- */\n\n  /**\n   * Brand Primary\n   */\n  --road-brand-primary: #002b6f;\n\n  /**\n   * Primary\n   */\n  --road-primary-10: #001638;\n  --road-primary-20: #002b6f;\n  --road-primary-30: #004293;\n  --road-primary-40: #005ab8;\n  --road-primary-50: #0071dc;\n  --road-primary-60: #338de3;\n  --road-primary-70: #66aaea;\n  --road-primary-80: #99c6f1;\n  --road-primary-90: #cce3f8;\n\n  /**\n   * Brand Secondary\n   */\n  --road-brand-secondary: #fcb731;\n\n  /**\n   * Secondary\n   */\n  --road-secondary-10: #9c3305;\n  --road-secondary-20: #b14512;\n  --road-secondary-30: #c4621a;\n  --road-secondary-40: #d67e21;\n  --road-secondary-50: #e99b29;\n  --road-secondary-60: #fcb731;\n  --road-secondary-70: #fdca68;\n  --road-secondary-80: #fdde9f;\n  --road-secondary-90: #fef1d6;\n\n  /* GREYSCALE\n  -------------------- */\n  --road-grey-0: #000000;\n  --road-grey-5: #11151d;\n  --road-grey-10: #22293a;\n  --road-grey-15: #2c3345;\n  --road-grey-20: #353c50;\n  --road-grey-30: #51586c;\n  --road-grey-40: #6d7488;\n  --road-grey-50: #898fa0;\n  --road-grey-60: #a4a9b6;\n  --road-grey-70: #c1c4cd;\n  --road-grey-80: #dddfe4;\n  --road-grey-85: #e9eaed;\n  --road-grey-90: #f4f4f6;\n  --road-grey-95: #fafafb;\n  --road-grey-100-new: #ffffff;\n\n  /**\n   * Header\n   */\n  --road-header-surface: var(--road-primary-20);\n  --road-on-header-surface: var(--road-grey-100-new);\n  --road-header-surface-disabled: rgba(255, 255, 255, 0.32);\n  --road-on-header-surface-disabled: rgba(255, 255, 255, 0.4);\n  --road-header-outline: var(--road-primary-20);\n  --road-header-icon: var(--road-grey-100-new);\n  --road-header-icon-variant: var(--road-secondary-60);\n  --road-header-badge: var(--road-secondary-60);\n  --road-on-header-badge: var(--road-primary-10);\n\n  /**\n   * Neutral Surface\n  */\n  --road-surface: var(--road-grey-100-new);\n  --road-surface-inverse: var(--road-grey-90);\n  --road-surface-disabled: rgba(137, 143, 160, 0.24);\n  --road-on-surface: var(--road-grey-5);\n  --road-on-surface-weak: var(--road-grey-30);\n  --road-on-surface-extra-weak: var(--road-grey-40);\n  --road-on-surface-disabled: rgba(34, 41, 58, 0.32);\n\n  /**\n   * Brand Surface\n  */\n  --road-primary: var(--road-primary-50);\n  --road-primary-variant: var(--road-primary-20);\n  --road-on-primary: var(--road-grey-100-new);\n  --road-secondary: var(--road-secondary-60);\n  --road-secondary-variant: var(--road-secondary-40);\n  --road-on-secondary: var(--road-grey-10);\n\n  /**\n   * Outline\n  */\n  --road-outline: var(--road-grey-60);\n  --road-outline-weak: var(--road-grey-80);\n  --road-outline-variant: var(--road-primary-30);\n\n  /**\n   * Artwork\n  */\n  --road-icon: var(--road-grey-10);\n  --road-icon-variant: var(--road-secondary-50);\n  --road-icon-inverse: var(--road-grey-100-new);\n  --road-icon-inverse-variant: var(--road-secondary-60);\n\n  /**\n   * Overlay\n  */\n  --road-overlay: rgba(0, 0, 0, 0.64);\n  --road-overlay-inverse: rgba(255, 255, 255, 0.64);\n  --road-on-overlay: var(--road-grey-100-new);\n  --road-on-overlay-inverse: var(--road-grey-10);\n\n  /**\n   * Blur\n  */\n  --road-blur-light: blur(0.25rem);\n  --road-blur-medium: blur(0.5rem);\n\n  /**\n   * Buttons\n  */\n  --road-button-primary: var(--road-primary-40);\n  --road-button-primary-variant: var(--road-primary-30);\n  --road-on-button-primary: var(--road-grey-100-new);\n  --road-button-secondary: var(--road-secondary-60);\n  --road-button-secondary-variant: var(--road-secondary-40);\n  --road-on-button-secondary: var(--road-grey-10);\n  --road-button-tertiary: rgba(241, 187, 205, 0);\n  --road-button-tertiary-variant: var(--road-primary-90);\n  --road-button-tertiary-outline: var(--road-primary-40);\n  --road-on-button-tertiary: var(--road-primary-50);\n  --road-button-ghost: rgba(241, 187, 205, 0);\n  --road-button-ghost-variant: var(--road-primary-90);\n  --road-on-button-ghost: var(--road-primary-40);\n  --road-button-destructive-primary: var(--road-danger-50);\n  --road-button-destructive-primary-variant: var(--road-danger-40);\n  --road-button-destructive-outline: var(--road-danger-50);\n  --road-button-destructive-secondary: var(--road-grey-100-new);\n  --road-button-destructive-secondary-variant: var(--road-danger-90);\n  --road-on-button-destructive-secondary: var(--road-danger-50);\n  --road-on-button-destructive-primary: var(--road-grey-100-new);\n\n  /**\n   * Fab Button\n  */\n\n  --road-button-fab: var(--road-secondary-60);\n  --road-on-button-fab: var(--road-grey-10);\n  --road-button-fab-variant: var(--road-secondary-40);\n\n  /**\n   * Link\n  */\n  --road-link-primary: var(--road-primary-40);\n  --road-link-secondary: var(--road-grey-10);\n  --road-link-inverse: var(--road-grey-100-new);\n\n  /**\n   * Forms\n  */\n  --road-input-surface: var(--road-primary-50);\n  --road-input-surface-variant: var(--road-primary-30);\n  --road-input-outline: var(--road-grey-40);\n  --road-input-outline-variant: var(--road-primary-30);\n\n  /**\n   * Decorative\n  */\n  --road-decorative-surface: var(--road-secondary-50);\n  --road-decorative-surface-variant: var(--road-primary-50);\n\n  /**\n   * Shadow\n  */\n  --road-elevation-lowest: 0 1px 2px rgba(0, 0, 0, 0.24), 0 1px 3px 1px rgba(0, 0, 0, 0.08);\n  --road-elevation-low: 0 1px 2px rgba(41, 44, 51, 0.16), 0 3px 5px 1px rgba(41, 44, 51, 0.12);\n  --road-elevation-average: 0 3px 3px rgba(0, 0, 0, 0.16), 0 6px 8px 1px rgba(41, 44, 51, 0.12);\n  --road-elevation-hight: 0 3px 3px rgba(0, 0, 0, 0.2), 0 10px 13px 2px rgba(41, 44, 51, 0.12);\n  --road-elevation-highest: 0 4px 4px rgba(0, 0, 0, 0.24), 0 12px 16px 6px rgba(41, 44, 51, 0.16);\n\n  /* DECORATIVE\n  -------------------- */\n\n  --road-blue-klein-5: #000411;\n  --road-blue-klein-10: #000923;\n  --road-blue-klein-15: #000d34;\n  --road-blue-klein-20: #001146;\n  --road-blue-klein-30: #001a68;\n  --road-blue-klein-40: #00228b;\n  --road-blue-klein-50: #002bae;\n  --road-blue-klein-60: #3355be;\n  --road-blue-klein-70: #6680ce;\n  --road-blue-klein-80: #99aadf;\n  --road-blue-klein-85: #b3bfe7;\n  --road-blue-klein-90: #ccd5ef;\n  --road-blue-klein-95: #e6eaf7;\n  --road-violet-electric-5: #0e0019;\n  --road-violet-electric-10: #1c0032;\n  --road-violet-electric-15: #2a004a;\n  --road-violet-electric-20: #380063;\n  --road-violet-electric-30: #550095;\n  --road-violet-electric-40: #7100c6;\n  --road-violet-electric-50: #8d00f8;\n  --road-violet-electric-60: #a433f9;\n  --road-violet-electric-70: #bb66fb;\n  --road-violet-electric-80: #d199fc;\n  --road-violet-electric-85: #ddb2fd;\n  --road-violet-electric-90: #e8ccfe;\n  --road-violet-electric-95: #f4e5fe;\n  --road-green-monstera-5: #000c01;\n  --road-green-monstera-10: #001901;\n  --road-green-monstera-15: #002502;\n  --road-green-monstera-20: #003203;\n  --road-green-monstera-30: #005705;\n  --road-green-monstera-40: #007006;\n  --road-green-monstera-50: #007c07;\n  --road-green-monstera-60: #339639;\n  --road-green-monstera-70: #66b06a;\n  --road-green-monstera-80: #99cb9c;\n  --road-green-monstera-85: #b3d8b5;\n  --road-green-monstera-90: #cce5cd;\n  --road-green-monstera-95: #e6f2e6;\n  --road-red-pepper-5: #150000;\n  --road-red-pepper-10: #2a0000;\n  --road-red-pepper-15: #3f0000;\n  --road-red-pepper-20: #540000;\n  --road-red-pepper-30: #7f0000;\n  --road-red-pepper-40: #a90000;\n  --road-red-pepper-50: #d30000;\n  --road-red-pepper-60: #dc3333;\n  --road-red-pepper-70: #e56666;\n  --road-red-pepper-80: #ed9999;\n  --road-red-pepper-85: #f2b3b3;\n  --road-red-pepper-90: #f6cccc;\n  --road-red-pepper-95: #fbe6e6;\n  --road-yellow-gold-5: #130e00;\n  --road-yellow-gold-10: #261c00;\n  --road-yellow-gold-15: #3a2a00;\n  --road-yellow-gold-20: #4d3800;\n  --road-yellow-gold-30: #735400;\n  --road-yellow-gold-40: #9a7000;\n  --road-yellow-gold-50: #c08c00;\n  --road-yellow-gold-60: #cda333;\n  --road-yellow-gold-70: #d9ba66;\n  --road-yellow-gold-80: #e6d199;\n  --road-yellow-gold-85: #ecdcb2;\n  --road-yellow-gold-90: #f2e8cc;\n  --road-yellow-gold-95: #f9f4e6;\n  --road-yellow-mikado-5: #191401;\n  --road-yellow-mikado-10: #332702;\n  --road-yellow-mikado-15: #4c3b04;\n  --road-yellow-mikado-20: #664e05;\n  --road-yellow-mikado-30: #997607;\n  --road-yellow-mikado-40: #cc9d0a;\n  --road-yellow-mikado-50: #ffc40c;\n  --road-yellow-mikado-60: #ffd03d;\n  --road-yellow-mikado-70: #ffdc6d;\n  --road-yellow-mikado-80: #ffe79e;\n  --road-yellow-mikado-85: #ffedb6;\n  --road-yellow-mikado-90: #fff3ce;\n  --road-yellow-mikado-95: #fff9e7;\n\n  /**\n   * Tag\n  */\n\n  --road-tag-default: var(--road-blue-klein-50);\n  --road-tag-ecology: var(--road-green-monstera-50);\n  --road-tag-exclusivity: var(--road-yellow-gold-50);\n  --road-tag-offer: var(--road-red-pepper-50);\n  --road-tag-black-friday: var(--road-grey-0);\n\n  /**\n   * Leading Banner\n  */\n\n  --road-leading-banner: var(--road-secondary-60);\n  --road-on-leading-banner: var(--road-grey-10);\n\n  /**\n   * Rating level\n  */\n\n  --road-rating: var(--road-yellow-mikado-50);\n\n  /* STATUS\n   -------------------- */\n\n  --road-info-10: #0a1628;\n  --road-info-20: #142c51;\n  --road-info-30: #1d4379;\n  --road-info-40: #2759a2;\n  --road-info-50: #316fca;\n  --road-info-60: #5a8cd5;\n  --road-info-70: #83a9df;\n  --road-info-80: #adc5ea;\n  --road-info-90: #d6e2f4;\n  --road-info-95: #ebf1fa;\n  --road-success-10: #0d1b0e;\n  --road-success-20: #1a351b;\n  --road-success-30: #285029;\n  --road-success-40: #356a36;\n  --road-success-50: #428544;\n  --road-success-60: #689d69;\n  --road-success-70: #8eb68f;\n  --road-success-80: #b3ceb4;\n  --road-success-90: #d9e7da;\n  --road-success-95: #ecf3ec;\n  --road-warning-10: #4e3406;\n  --road-warning-20: #9c690d;\n  --road-warning-30: #ea9d13;\n  --road-warning-40: #fab815;\n  --road-warning-50: #fdc93e;\n  --road-warning-60: #ffd966;\n  --road-warning-70: #ffe38c;\n  --road-warning-80: #ffecb3;\n  --road-warning-90: #fff6d9;\n  --road-warning-95: #fffaec;\n  --road-danger-10: #240b09;\n  --road-danger-20: #471711;\n  --road-danger-30: #6b221a;\n  --road-danger-40: #8e2e22;\n  --road-danger-50: #b2392b;\n  --road-danger-60: #c16155;\n  --road-danger-70: #d18880;\n  --road-danger-80: #e0b0aa;\n  --road-danger-90: #f0d7d5;\n  --road-danger-95: #f7ebea;\n\n\n  /**\n  * Information\n  */\n  --road-info-surface: var(--road-info-95);\n  --road-info-surface-inverse: var(--road-info-50);\n  --road-on-info-surface: var(--road-info-30);\n  --road-on-info-surface-inverse: var(--road-grey-100-new);\n  --road-info-outline: var(--road-info-50);\n  --road-info-icon: var(--road-info-50);\n  --road-info-icon-inverse: var(--road-grey-100-new);\n  --road-info-background: var(--road-info-surface);\n  --road-info-default: var(--road-info-surface-inverse);\n  --road-info-text: var(--road-on-info-surface);\n  --road-info-contrast: var(--road-on-info-surface-inverse);\n\n  /**\n  * Success\n  */\n  --road-success-surface: var(--road-success-95);\n  --road-success-surface-inverse: var(--road-success-50);\n  --road-on-success-surface: var(--road-success-30);\n  --road-on-success-surface-inverse: var(--road-grey-100-new);\n  --road-success-outline: var(--road-success-50);\n  --road-success-icon: var(--road-success-50);\n  --road-success-icon-inverse: var(--road-grey-100-new);\n  --road-success-background: var(--road-success-surface);\n  --road-success-default: var(--road-success-surface-inverse);\n  --road-success-text: var(--road-on-success-surface);\n  --road-success-contrast: var(--road-on-success-surface-inverse);\n\n  /**\n  * Warning\n  */\n  --road-warning-surface: var(--road-warning-95);\n  --road-warning-surface-inverse: var(--road-warning-50);\n  --road-on-warning-surface: var(--road-warning-20);\n  --road-on-warning-surface-inverse: var(--road-warning-10);\n  --road-warning-outline: var(--road-warning-30);\n  --road-warning-icon: var(--road-warning-30);\n  --road-warning-icon-inverse: var(--road-warning-10);\n  --road-warning-background: var(--road-warning-surface);\n  --road-warning-default: var(--road-warning-surface-inverse);\n  --road-warning-text: var(--road-on-warning-surface);\n  --road-warning-contrast: var(--road-on-warning-surface-inverse);\n\n  /**\n  * Danger\n  */\n  --road-danger-surface: var(--road-danger-95);\n  --road-danger-surface-inverse: var(--road-danger-50);\n  --road-on-danger-surface: var(--road-danger-30);\n  --road-on-danger-surface-inverse: var(--road-grey-100-new);\n  --road-danger-outline: var(--road-danger-50);\n  --road-danger-icon: var(--road-danger-50);\n  --road-danger-icon-inverse: var(--road-grey-100-new);\n  --road-danger-background: var(--road-danger-surface);\n  --road-danger-default: var(--road-danger-surface-inverse);\n  --road-danger-text: var(--road-on-danger-surface);\n  --road-danger-contrast: var(--road-danger-surface-inverse);\n\n  /* FONT\n   -------------------- */\n  --road-font: muli, arial, sans-serif;\n\n  /* SIZE\n  -------------------- */\n  --road-font-size-75: 4.6875rem;\n  --road-font-size-65: 4.0625rem;\n  --road-font-size-57: 3.5625rem;\n  --road-font-size-49: 3.0625rem;\n  --road-font-size-43: 2.6875rem;\n  --road-font-size-37: 2.3125rem;\n  --road-font-size-32: 2rem;\n  --road-font-size-28: 1.75rem;\n  --road-font-size-24: 1.5rem;\n  --road-font-size-21: 1.325rem;\n  --road-font-size-18: 1.125rem;\n  --road-font-size-16: 1rem;\n  --road-font-size-14: 0.875rem;\n  --road-font-size-12: 0.75rem;\n  --road-font-size-10: 0.625rem;\n\n  /* OVERLINE\n    -------------------- */\n  --road-overline: var(--road-font-size-12);\n\n  /* UTILITY\n    -------------------- */\n  --road-legal-medium: var(--road-font-size-12);\n  --road-label-medium: var(--road-font-size-16);\n  --road-label-small: var(--road-font-size-12);\n  --road-label-extra-small: var(--road-font-size-10);\n  --road-caption-medium: var(--road-font-size-12);\n  --road-helper-medium: var(--road-font-size-14);\n\n  /* LINK\n    -------------------- */\n  --road-link-large: var(--road-font-size-18);\n  --road-link-medium: var(--road-font-size-16);\n  --road-link-small: var(--road-font-size-14);\n  --road-link-extra-small: var(--road-font-size-12);\n\n  /* BUTTON\n  -------------------- */\n  --road-button-medium: var(--road-font-size-16);\n  --road-button-small: var(--road-font-size-14);\n\n  /* FLUID\n    -------------------- */\n  --road-display-large: var(--road-font-size-57);\n  --road-display-medium: var(--road-font-size-49);\n  --road-display-small: var(--road-font-size-43);\n  --road-heading-01: var(--road-font-size-32);\n  --road-heading-02: var(--road-font-size-28);\n  --road-heading-03: var(--road-font-size-24);\n  --road-heading-04: var(--road-font-size-21);\n  --road-sub-heading-large: var(--road-font-size-24);\n  --road-sub-heading-medium: var(--road-font-size-21);\n  --road-sub-heading-small: var(--road-font-size-18);\n\n  /* BODY\n    -------------------- */\n  --road-body-large: var(--road-font-size-18);\n  --road-body-medium: var(--road-font-size-16);\n  --road-body-small: var(--road-font-size-14);\n\n  /* SPACING\n  -------------------- */\n  --road-spacing-01: 0.125rem;\n  --road-spacing-02: 0.25rem;\n  --road-spacing-03: 0.5rem;\n  --road-spacing-04: 0.75rem;\n  --road-spacing-05: 1rem;\n  --road-spacing-06: 1.5rem;\n  --road-spacing-07: 2rem;\n  --road-spacing-08: 2.5rem;\n  --road-spacing-09: 3rem;\n  --road-spacing-10: 4rem;\n  --road-spacing-11: 5rem;\n  --road-spacing-12: 6rem;\n  --road-spacing-13: 10rem;\n\n  /* OLD CSS VARIABLES\n   -------------------- */\n\n  /**\n  * Primary\n  */\n  --road-primary-100: var(--road-primary-90);\n  --road-primary-200: var(--road-primary-80);\n  --road-primary-300: var(--road-primary-70);\n  --road-primary-400: var(--road-primary-60);\n  --road-primary-500: var(--road-primary-50);\n  --road-primary-600: var(--road-primary-40);\n  --road-primary-700: var(--road-primary-30);\n  --road-primary-800: var(--road-primary-20);\n  --road-primary-900: var(--road-primary-10);\n  --road-primary-contrast: var(--road-on-primary);\n\n  /**\n  * Secondary\n  */\n  --road-secondary-100: var(--road-secondary-90);\n  --road-secondary-200: var(--road-secondary-80);\n  --road-secondary-300: var(--road-secondary-70);\n  --road-secondary-400: var(--road-secondary-60);\n  --road-secondary-500: var(--road-secondary-50);\n  --road-secondary-600: var(--road-secondary-40);\n  --road-secondary-700: var(--road-secondary-30);\n  --road-secondary-800: var(--road-secondary-20);\n  --road-secondary-900: var(--road-secondary-10);\n  --road-secondary-contrast: var(--road-on-secondary);\n\n  /**\n   * Primary\n   */\n  --primary: var(--road-brand-primary);\n  --primary-hover: var(--road-grey-999);\n  --primary-darken: var(--road-grey-999);\n  --primary-lighten: var(--road-primary-100);\n  --primary-contrast: var(--road-grey-000);\n\n  /**\n   * Secondary\n   */\n  --secondary: var(--road-primary-500);\n  --secondary-hover: var(--road-primary-700);\n  --secondary-darken: var(--road-primary-700);\n  --secondary-lighten: var(--road-primary-100);\n  --secondary-contrast: var(--road-grey-000);\n\n  /* GREYSCALE\n  -------------------- */\n  --road-grey-000: var(--road-grey-100-new);\n  --road-grey-100: var(--road-grey-90);\n  --road-grey-200: var(--road-grey-80);\n  --road-grey-300: var(--road-grey-70);\n  --road-grey-400: var(--road-grey-60);\n  --road-grey-500: var(--road-grey-50);\n  --road-grey-600: var(--road-grey-40);\n  --road-grey-700: var(--road-grey-30);\n  --road-grey-800: var(--road-grey-20);\n  --road-grey-900: var(--road-grey-10);\n  --road-grey-999: var(--road-grey-0);\n  --road-disabled: var(--road-surface-disabled);\n\n  /**\n   * Accent\n   */\n  --accent: var(--road-secondary-500);\n  --accent-hover: var(--road-secondary-700);\n  --accent-darken: var(--road-secondary-700);\n  --accent-lighten: var(--road-secondary-100);\n  --accent-contrast: var(--road-grey-900);\n\n  /* FEEDBACK\n   -------------------- */\n\n  /**\n   * Information\n   */\n  --info: var(--road-info-default);\n  --info-hover: var(--road-info-text);\n  --info-text: var(--road-info-text);\n  --info-background: var(--road-info-background);\n  --info-contrast: var(--road-grey-000);\n\n  /**\n   * Success\n   */\n  --success: var(--road-success-default);\n  --success-hover: var(--road-success-text);\n  --success-text: var(--road-success-text);\n  --success-background: var(--road-success-background);\n  --success-contrast: var(--road-grey-000);\n\n  /**\n   * Warning\n   */\n  --warning: var(--road-warning-default);\n  --warning-hover: var(--road-warning-text);\n  --warning-text: var(--road-warning-text);\n  --warning-background: var(--road-warning-background);\n  --warning-contrast: var(--road-grey-900);\n\n  /**\n   * Danger\n   */\n  --danger: var(--road-danger-default);\n  --danger-hover: var(--road-danger-text);\n  --danger-text: var(--road-danger-text);\n  --danger-background: var(--road-danger-background);\n  --danger-contrast: var(--road-grey-000);\n\n  /* MONOCHROME\n   -------------------- */\n  --icon: var(--road-grey-900);\n  --text: var(--road-grey-900);\n  --text-second: var(--road-grey-600);\n  --text-disabled: var(--road-grey-400);\n  --border-form: var(--road-grey-400);\n  --border: var(--road-grey-300);\n  --background: var(--road-grey-100);\n  --background-second: var(--road-grey-100);\n  --white: var(--road-grey-000);\n\n  /* FONT\n   -------------------- */\n  --font: var(--road-font);\n}\n\n@media (min-width: 768px) {\n\n  body {\n    --road-display-large: var(--road-font-size-75);\n    --road-display-medium: var(--road-font-size-65);\n    --road-display-small: var(--road-font-size-57);\n    --road-heading-01: var(--road-font-size-49);\n    --road-heading-02: var(--road-font-size-37);\n    --road-heading-03: var(--road-font-size-32);\n    --road-heading-04: var(--road-font-size-28);\n    --road-sub-heading-large: var(--road-font-size-32);\n    --road-sub-heading-medium: var(--road-font-size-28);\n    --road-sub-heading-small: var(--road-font-size-24);\n  }\n}\n\n/* AUTO5\n  -------------------- */\n\n.auto5-theme {\n  /**\n   * Brand Primary\n   */\n  --road-brand-primary: #002b6f;\n\n  /**\n   * Primary\n   */\n\n  --road-primary-10: #001638;\n  --road-primary-20: #002b6f;\n  --road-primary-30: #004293;\n  --road-primary-40: #005ab8;\n  --road-primary-50: #0071dc;\n  --road-primary-60: #338de3;\n  --road-primary-70: #66aaea;\n  --road-primary-80: #99c6f1;\n  --road-primary-90: #cce3f8;\n\n  /**\n   * Brand Secondary\n   */\n  --road-brand-secondary: #e00008;\n\n  /**\n    * Secondary\n    */\n  --road-secondary-10: #2d0002;\n  --road-secondary-20: #5a0003;\n  --road-secondary-30: #860005;\n  --road-secondary-40: #b30006;\n  --road-secondary-50: #e00008;\n  --road-secondary-60: #e63339;\n  --road-secondary-70: #ec666b;\n  --road-secondary-80: #f3999c;\n  --road-secondary-90: #f9ccce;\n\n  /* GREYSCALE\n  -------------------- */\n  --road-grey-0: #000000;\n  --road-grey-5: #11151d;\n  --road-grey-10: #22293a;\n  --road-grey-15: #2c3345;\n  --road-grey-20: #353c50;\n  --road-grey-30: #51586c;\n  --road-grey-40: #6d7488;\n  --road-grey-50: #898fa0;\n  --road-grey-60: #a4a9b6;\n  --road-grey-70: #c1c4cd;\n  --road-grey-80: #dddfe4;\n  --road-grey-85: #e9eaed;\n  --road-grey-90: #f4f4f6;\n  --road-grey-95: #fafafb;\n  --road-grey-100-new: #ffffff;\n\n  /**\n  * Header\n  */\n  --road-header-surface: var(--road-primary-20);\n  --road-on-header-surface: var(--road-grey-100-new);\n  --road-header-surface-disabled: rgba(255, 255, 255, 0.32);\n  --road-on-header-surface-disabled: rgba(255, 255, 255, 0.4);\n  --road-header-outline: var(--road-primary-20);\n  --road-header-icon: var(--road-grey-100-new);\n  --road-icon-header-variant: var(--road-secondary-60);\n  --road-header-badge: var(--road-secondary-60);\n  --road-on-header-badge: var(--road-grey-100-new);\n\n  /**\n   * Neutral Surface\n  */\n  --road-surface: var(--road-grey-100-new);\n  --road-surface-inverse: var(--road-grey-90);\n  --road-surface-disabled: rgba(137, 143, 160, 0.24);\n  --road-on-surface: var(--road-grey-10);\n  --road-on-surface-weak: var(--road-grey-30);\n  --road-on-surface-extra-weak: var(--road-grey-40);\n  --road-on-surface-disabled: rgba(34, 41, 58, 0.32);\n\n  /**\n   * Brand Surface\n  */\n  --road-primary: var(--road-primary-50);\n  --road-primary-variant: var(--road-primary-30);\n  --road-on-primary: var(--road-grey-100-new);\n  --road-secondary: var(--road-secondary-50);\n  --road-secondary-variant: var(--road-secondary-30);\n  --road-on-secondary: var(--road-grey-100-new);\n\n  /**\n   * Outline\n  */\n  --road-outline: var(--road-grey-30);\n  --road-outline-weak: var(--road-grey-80);\n  --road-outline-variant: var(--road-primary-30);\n\n  /**\n   * Artwork\n  */\n  --road-icon: var(--road-grey-10);\n  --road-icon-variant: var(--road-secondary-50);\n  --road-icon-inverse: var(--road-grey-100-new);\n  --road-icon-inverse-variant: var(--road-grey-70);\n\n  /**\n   * Overlay\n  */\n  --road-overlay: rgba(0, 0, 0, 0.64);\n  --road-overlay-inverse: rgba(255, 255, 255, 0.64);\n  --road-on-overlay: var(--road-grey-100-new);\n  --road-on-overlay-inverse: var(--road-grey-10);\n\n  /**\n   * Buttons\n  */\n  --road-button-primary: var(--road-primary-40);\n  --road-button-primary-variant: var(--road-primary-30);\n  --road-on-button-primary: var(--road-grey-100-new);\n  --road-button-secondary: var(--road-secondary-60);\n  --road-button-secondary-variant: var(--road-secondary-30);\n  --road-on-button-secondary: var(--road-grey-100-new);\n  --road-button-tertiary: rgba(241, 187, 205, 0);\n  --road-button-tertiary-variant: var(--road-primary-90);\n  --road-button-tertiary-outline: var(--road-primary-40);\n  --road-on-button-tertiary: var(--road-primary-50);\n  --road-button-ghost: rgba(241, 187, 205, 0);\n  --road-button-ghost-variant: var(--road-primary-90);\n  --road-on-button-ghost: var(--road-primary-40);\n\n  /**\n   * Fab Button\n  */\n\n  --road-button-fab: var(--road-primary-50);\n  --road-on-button-fab: var(--road-grey-100-new);\n  --road-button-fab-variant: var(--road-primary-30);\n\n  /**\n   * Link\n  */\n  --road-link-primary: var(--road-primary-40);\n  --road-link-secondary: var(--road-grey-10);\n  --road-link-inverse: var(--road-grey-100-new);\n\n  /**\n   * Forms\n  */\n  --road-input-surface: var(--road-primary-50);\n  --road-input-surface-variant: var(--road-primary-30);\n  --road-input-outline: var(--road-grey-40);\n  --road-input-outline-variant: var(--road-primary-30);\n\n  /**\n   * Decorative\n  */\n  --road-decorative-surface: var(--road-secondary-50);\n  --road-decorative-surface-variant: var(--road-primary-50);\n\n  /**\n   * Leading Banner\n  */\n\n  --road-leading-banner: var(--road-yellow-mikado-50);\n  --road-on-leading-banner: var(--road-grey-10);\n\n  /* OLD CSS VARIABLES\n   -------------------- */\n\n  /**\n  * Primary\n  */\n  --road-primary-100: var(--road-primary-90);\n  --road-primary-200: var(--road-primary-80);\n  --road-primary-300: var(--road-primary-70);\n  --road-primary-400: var(--road-primary-60);\n  --road-primary-500: var(--road-primary-50);\n  --road-primary-600: var(--road-primary-40);\n  --road-primary-700: var(--road-primary-30);\n  --road-primary-800: var(--road-primary-20);\n  --road-primary-900: var(--road-primary-10);\n  --road-primary-contrast: var(--road-on-primary);\n\n  /**\n  * Secondary\n  */\n  --road-secondary-100: var(--road-secondary-90);\n  --road-secondary-200: var(--road-secondary-80);\n  --road-secondary-300: var(--road-secondary-70);\n  --road-secondary-400: var(--road-secondary-60);\n  --road-secondary-500: var(--road-secondary-50);\n  --road-secondary-600: var(--road-secondary-40);\n  --road-secondary-700: var(--road-secondary-30);\n  --road-secondary-800: var(--road-secondary-20);\n  --road-secondary-900: var(--road-secondary-10);\n  --road-secondary-contrast: var(--road-on-secondary);\n\n  /**\n   * Primary\n   */\n  --primary: var(--road-brand-primary);\n  --primary-hover: var(--road-grey-999);\n  --primary-darken: var(--road-grey-999);\n  --primary-lighten: var(--road-primary-100);\n  --primary-contrast: var(--road-grey-000);\n\n  /**\n    * Secondary\n    */\n  --secondary: var(--road-brand-secondary);\n  --secondary-hover: var(--road-primary-700);\n  --secondary-darken: var(--road-primary-700);\n  --secondary-lighten: var(--road-primary-100);\n  --secondary-contrast: var(--road-grey-000);\n\n  /**\n    * Accent\n    */\n  --accent: var(--road-secondary-500);\n  --accent-hover: var(--road-secondary-700);\n  --accent-darken: var(--road-secondary-700);\n  --accent-lighten: var(--road-secondary-100);\n  --accent-contrast: var(--road-grey-900);\n}\n\n/* ATU\n  -------------------- */\n\n.atu-theme {\n  /**\n   * Brand Primary\n   */\n  --road-brand-primary: #bb1e10;\n\n  /**\n   * Primary\n   */\n  --road-primary-10: #250603;\n  --road-primary-20: #4b0b06;\n  --road-primary-30: #70120a;\n  --road-primary-40: #96180d;\n  --road-primary-50: #bb1e10;\n  --road-primary-60: #c94b40;\n  --road-primary-70: #d67870;\n  --road-primary-80: #e4a59f;\n  --road-primary-90: #f1d2cf;\n\n  /**\n   * Brand Secondary\n   */\n  --road-brand-secondary: #bb1e10;\n\n  /**\n  * Secondary\n  */\n\n  --road-secondary-10: #0c0a0a;\n  --road-secondary-20: #292727;\n  --road-secondary-30: #474545;\n  --road-secondary-40: #646262;\n  --road-secondary-50: #827f7f;\n  --road-secondary-60: #9f9c9c;\n  --road-secondary-70: #bcbaba;\n  --road-secondary-80: #dad7d7;\n  --road-secondary-90: #f7f4f4;\n\n  /* GREYSCALE\n  -------------------- */\n  --road-grey-0: #000000;\n  --road-grey-5: #060505;\n  --road-grey-10: #0c0a0a;\n  --road-grey-15: #1b1919;\n  --road-grey-20: #292727;\n  --road-grey-30: #474545;\n  --road-grey-40: #646262;\n  --road-grey-50: #827f7f;\n  --road-grey-60: #9f9c9c;\n  --road-grey-70: #bcbaba;\n  --road-grey-80: #dad7d7;\n  --road-grey-85: #e9e6e6;\n  --road-grey-90: #f7f4f4;\n  --road-grey-95: #fbfafa;\n  --road-grey-100-new: #ffffff;\n\n  /**\n  * Header\n  */\n  --road-header-surface: var(--road-grey-90);\n  --road-on-header-surface: var(--road-grey-20);\n  --road-header-surface-disabled: rgba(130, 127, 127, 0.24);\n  --road-on-header-surface-disabled: rgba(41, 39, 39, 0.32);\n  --road-header-outline: rgba(71, 69, 69, 0.24);\n  --road-header-icon: var(--road-grey-20);\n  --road-icon-header-variant: var(--road-primary-50);\n  --road-header-badge: var(--road-primary-50);\n  --road-on-header-badge: var(--road-grey-100-new);\n\n\n  /**\n   * Neutral Surface\n  */\n  --road-surface: var(--road-grey-100-new);\n  --road-surface-inverse: var(--road-grey-90);\n  --road-surface-disabled: rgba(137, 143, 160, 0.24);\n  --road-on-surface: var(--road-grey-20);\n  --road-on-surface-weak: var(--road-grey-20);\n  --road-on-surface-extra-weak: var(--road-grey-40);\n  --road-on-surface-disabled: rgba(34, 41, 58, 0.32);\n\n  /**\n   * Brand Surface\n  */\n  --road-primary: var(--road-primary-50);\n  --road-primary-variant: var(--road-primary-30);\n  --road-on-primary: var(--road-grey-100-new);\n  --road-secondary: var(--road-secondary-20);\n  --road-secondary-variant: var(--road-secondary-10);\n  --road-on-secondary: var(--road-grey-100-new);\n\n  /**\n   * Outline\n  */\n  --road-outline: var(--road-grey-30);\n  --road-outline-weak: var(--road-grey-40);\n  --road-outline-variant: var(--road-secondary-10);\n\n  /**\n   * Artwork\n  */\n  --road-icon: var(--road-grey-20);\n  --road-icon-variant: var(--road-primary-50);\n  --road-icon-inverse: var(--road-grey-100-new);\n  --road-icon-inverse-variant: var(--road-secondary-60);\n\n  /**\n   * Overlay\n  */\n  --road-overlay: rgba(0, 0, 0, 0.64);\n  --road-overlay-inverse: rgba(255, 255, 255, 0.64);\n  --road-on-overlay: var(--road-grey-100-new);\n  --road-on-overlay-inverse: var(--road-grey-20);\n\n  /**\n   * Buttons\n  */\n  --road-button-primary: var(--road-primary-50);\n  --road-button-primary-variant: var(--road-primary-30);\n  --road-on-button-primary: var(--road-grey-100-new);\n  --road-button-secondary: var(--road-secondary-10);\n  --road-button-secondary-variant: var(--road-secondary-40);\n  --road-on-button-secondary: var(--road-grey-100-new);\n  --road-button-tertiary: rgba(241, 187, 205, 0);\n  --road-button-tertiary-variant: var(--road-primary-90);\n  --road-button-tertiary-outline: var(--road-primary-50);\n  --road-on-button-tertiary: var(--road-primary-50);\n  --road-button-ghost: rgba(241, 187, 205, 0);\n  --road-button-ghost-variant: var(--road-primary-90);\n  --road-on-button-ghost: var(--road-primary-4à);\n\n  /**\n   * Fab Button\n  */\n\n  --road-button-fab: var(--road-primary-50);\n  --road-on-button-fab: var(--road-grey-100-new);\n  --road-button-fab-variant: var(--road-primary-30);\n\n  /**\n   * Link\n  */\n  --road-link-primary: var(--road-primary-40);\n  --road-link-secondary: var(--road-grey-20);\n  --road-link-inverse: var(--road-grey-100-new);\n\n  /**\n   * Forms\n  */\n  --road-input-surface: var(--road-secondary-10);\n  --road-input-surface-variant: var(--road-secondary-40);\n  --road-input-outline: var(--road-grey-40);\n  --road-input-outline-variant: var(--road-secondary-10);\n\n  /**\n   * Decorative\n  */\n  --road-decorative-surface: var(--road-primary-50);\n  --road-decorative-surface-variant: var(--road-primary-50);\n\n  /**\n   * Leading Banner\n  */\n\n  --road-leading-banner: var(--road-secondary-10);\n  --road-on-leading-banner: var(--road-grey-100-new);\n\n  /* OLD CSS VARIABLES\n    -------------------- */\n\n  /**\n  * Primary\n  */\n  --road-primary-100: var(--road-primary-90);\n  --road-primary-200: var(--road-primary-80);\n  --road-primary-300: var(--road-primary-70);\n  --road-primary-400: var(--road-primary-60);\n  --road-primary-500: var(--road-primary-50);\n  --road-primary-600: var(--road-primary-40);\n  --road-primary-700: var(--road-primary-30);\n  --road-primary-800: var(--road-primary-20);\n  --road-primary-900: var(--road-primary-10);\n  --road-primary-contrast: var(--road-on-primary);\n\n\n  /**\n    * Primary\n  */\n  --primary: var(--road-brand-primary);\n  --primary-hover: var(--road-grey-999);\n  --primary-darken: var(--road-grey-999);\n  --primary-lighten: var(--road-primary-100);\n  --primary-contrast: var(--road-grey-000);\n\n  /**\n     * Secondary\n     */\n  --road-secondary-100: #f5cccc;\n  --road-secondary-200: #e99d9a;\n  --road-secondary-300: #db706b;\n  --road-secondary-400: #cc463c;\n  --road-secondary-500: #bb1e10;\n  --road-secondary-600: #9e2013;\n  --road-secondary-700: #832114;\n  --road-secondary-800: #681f14;\n  --road-secondary-900: #501b12;\n  --road-secondary-contrast: var(--road-on-secondary);\n\n  /**\n     * Secondary\n     */\n  --secondary: var(--road-brand-secondary);\n  --secondary-hover: var(--road-primary-700);\n  --secondary-darken: var(--road-primary-700);\n  --secondary-lighten: var(--road-primary-100);\n  --secondary-contrast: var(--road-grey-000);\n\n  /**\n     * Accent\n     */\n  --accent: var(--road-secondary-500);\n  --accent-hover: var(--road-secondary-700);\n  --accent-darken: var(--road-secondary-700);\n  --accent-lighten: var(--road-secondary-100);\n  --accent-contrast: var(--road-grey-900);\n}\n\n.atu-theme road-banner{\n  color: var(--road-grey-100-new);\n}\n\n/* Midas\n  -------------------- */\n\n.midas-theme {\n  /**\n   * Brand Primary\n   */\n  --road-brand-primary: #ffd300;\n\n  /**\n   * Primary\n   */\n  --road-primary-10: #280f06;\n  --road-primary-20: #6e450d;\n  --road-primary-30: #b37a15;\n  --road-primary-40: #f9b01c;\n  --road-primary-50: #fcc20e;\n  --road-primary-60: #ffd300;\n  --road-primary-70: #ffde40;\n  --road-primary-80: #ffe980;\n  --road-primary-90: #fff4bf;\n\n  /**\n   * Brand Secondary\n   */\n  --road-brand-secondary: #000000;\n\n  /**\n   * Secondary\n   */\n  --road-secondary-10: #1a1a1a;\n  --road-secondary-20: #353535;\n  --road-secondary-30: #515151;\n  --road-secondary-40: #6c6c6c;\n  --road-secondary-50: #878787;\n  --road-secondary-60: #a2a2a2;\n  --road-secondary-70: #bebebe;\n  --road-secondary-80: #d9d9d9;\n  --road-secondary-90: #f4f4f4;\n\n  /* GREYSCALE\n  -------------------- */\n  --road-grey-0: #000000;\n  --road-grey-5: #0d0d0d;\n  --road-grey-10: #1a1a1a;\n  --road-grey-15: #282828;\n  --road-grey-20: #353535;\n  --road-grey-30: #515151;\n  --road-grey-40: #6c6c6c;\n  --road-grey-50: #878787;\n  --road-grey-60: #a2a2a2;\n  --road-grey-70: #bebebe;\n  --road-grey-80: #d9d9d9;\n  --road-grey-85: #e7e7e7;\n  --road-grey-90: #f4f4f4;\n  --road-grey-95: #fafafa;\n  --road-grey-100-new: #ffffff;\n\n  /**\n  * Header\n  */\n  --road-header-surface: var(--road-secondary-20);\n  --road-on-header-surface: var(--road-grey-100-new);\n  --road-header-surface-disabled: rgba(135, 135, 135, 0.24);\n  --road-on-header-surface-disabled: rgba(26, 26, 26, 0.32);\n  --road-header-outline: rgba(162, 162, 162, 0.24);\n  --road-header-icon: var(--road-grey-100-new);\n  --road-icon-header-variant: var(--road-primary-40);\n  --road-header-badge: var(--road-primary-60);\n  --road-on-header-badge: var(--road-grey-10);\n\n  /**\n   * Neutral Surface\n  */\n  --road-surface: var(--road-grey-100-new);\n  --road-surface-inverse: var(--road-grey-90);\n  --road-surface-disabled: rgba(137, 143, 160, 0.24);\n  --road-on-surface: var(--road-grey-10);\n  --road-on-surface-weak: var(--road-grey-20);\n  --road-on-surface-extra-weak: var(--road-grey-40);\n  --road-on-surface-disabled: rgba(34, 41, 58, 0.32);\n\n  /**\n   * Brand Surface\n  */\n  --road-primary: var(--road-primary-60);\n  --road-primary-variant: var(--road-primary-40);\n  --road-on-primary: var(--road-grey-10);\n  --road-secondary: var(--road-secondary-20);\n  --road-secondary-variant: var(--road-secondary-10);\n  --road-on-secondary: var(--road-grey-100-new);\n\n  /**\n   * Outline\n  */\n  --road-outline: var(--road-grey-30);\n  --road-outline-weak: var(--road-grey-80);\n  --road-outline-variant: var(--road-primary-40);\n\n  /**\n   * Artwork\n  */\n  --road-icon: var(--road-grey-10);\n  --road-icon-variant: var(--road-primary-40);\n  --road-icon-inverse: var(--road-grey-100-new);\n  --road-icon-inverse-variant: var(--road-primary-60);\n\n  /**\n   * Overlay\n  */\n  --road-overlay: rgba(0, 0, 0, 0.64);\n  --road-overlay-inverse: rgba(255, 255, 255, 0.64);\n  --road-on-overlay: var(--road-grey-100-new);\n  --road-on-overlay-inverse: var(--road-grey-10);\n\n  /**\n   * Buttons\n  */\n  --road-button-primary: var(--road-primary-60);\n  --road-button-primary-variant: var(--road-primary-40);\n  --road-on-button-primary: var(--road-grey-10);\n  --road-button-secondary: var(--road-secondary-20);\n  --road-button-secondary-variant: var(--road-secondary-10);\n  --road-on-button-secondary: var(--road-grey-10);\n  --road-button-tertiary: rgba(241, 187, 205, 0);\n  --road-button-tertiary-variant: var(--road-primary-80);\n  --road-button-tertiary-outline: var(--road-primary-60);\n  --road-on-button-tertiary: var(--road-grey-10);\n  --road-button-ghost: rgba(241, 187, 205, 0);\n  --road-button-ghost-variant: var(--road-primary-80);\n  --road-on-button-ghost: var(--road-grey-10);\n\n  /**\n   * Fab Button\n  */\n\n  --road-button-fab: var(--road-primary-60);\n  --road-on-button-fab: var(--road-grey-10);\n  --road-button-fab-variant: var(--road-primary-30);\n\n  /**\n   * Link\n  */\n  --road-link-primary: var(--road-grey-10);\n  --road-link-secondary: var(--road-primary-30);\n  --road-link-inverse: var(--road-grey-100-new);\n\n  /**\n   * Forms\n  */\n  --road-input-surface: var(--road-secondary-10);\n  --road-input-surface-variant: var(--road-secondary-20);\n  --road-input-outline: var(--road-grey-40);\n  --road-input-outline-variant: var(--road-secondary-10);\n\n  /**\n   * Decorative\n  */\n  --road-decorative-surface: var(--road-primary-40);\n  --road-decorative-surface-variant: var(--road-secondary-20);\n\n  /**\n   * Leading Banner\n  */\n\n  --road-leading-banner: var(--road-secondary-10);\n  --road-on-leading-banner: var(--road-grey-100-new);\n\n  /* OLD CSS VARIABLES\n    -------------------- */\n\n  /**\n  * Primary\n  */\n  --road-primary-100: var(--road-primary-90);\n  --road-primary-200: var(--road-primary-80);\n  --road-primary-300: var(--road-primary-70);\n  --road-primary-400: var(--road-primary-60);\n  --road-primary-500: var(--road-primary-50);\n  --road-primary-600: var(--road-primary-40);\n  --road-primary-700: var(--road-primary-30);\n  --road-primary-800: var(--road-primary-20);\n  --road-primary-900: var(--road-primary-10);\n  --road-primary-contrast: var(--road-on-primary);\n\n  /**\n  * Secondary\n  */\n  --road-secondary-100: var(--road-secondary-90);\n  --road-secondary-200: var(--road-secondary-80);\n  --road-secondary-300: var(--road-secondary-70);\n  --road-secondary-400: var(--road-secondary-60);\n  --road-secondary-500: var(--road-secondary-50);\n  --road-secondary-600: var(--road-secondary-40);\n  --road-secondary-700: var(--road-secondary-30);\n  --road-secondary-800: var(--road-secondary-20);\n  --road-secondary-900: var(--road-secondary-10);\n  --road-secondary-contrast: var(--road-on-secondary);\n\n  /**\n    * Primary\n  */\n  --primary: var(--road-brand-primary);\n  --primary-hover: var(--road-grey-999);\n  --primary-darken: var(--road-grey-999);\n  --primary-lighten: var(--road-primary-100);\n  --primary-contrast: var(--road-grey-000);\n\n  /**\n    * Secondary\n    */\n  --secondary: var(--road-brand-secondary);\n  --secondary-hover: var(--road-primary-700);\n  --secondary-darken: var(--road-primary-700);\n  --secondary-lighten: var(--road-primary-100);\n  --secondary-contrast: var(--road-grey-000);\n\n  /**\n    * Accent\n    */\n  --accent: var(--road-secondary-500);\n  --accent-hover: var(--road-secondary-700);\n  --accent-darken: var(--road-secondary-700);\n  --accent-lighten: var(--road-secondary-100);\n  --accent-contrast: var(--road-grey-900);\n}\n\n.midas-theme road-button[outline][color=\"primary\"],\n.midas-theme road-button[outline][color=\"secondary\"],\n.midas-theme .link {\n  color: var(--road-grey-900);\n}\n\n.midas-theme .link:focus,\n.midas-theme .link:hover {\n  color: var(--road-grey-600);\n}\n\n/* MOBIVIA\n  -------------------- */\n\n.mobivia-theme {\n  /**\n   * Brand Primary\n   */\n  --road-brand-primary: #b40063;\n\n  /**\n   * Primary\n   */\n  --road-primary-10: #2e0011;\n  --road-primary-20: #5c0026;\n  --road-primary-30: #7f003b;\n  --road-primary-40: #9b004f;\n  --road-primary-50: #b40063;\n  --road-primary-60: #c42674;\n  --road-primary-70: #d24d87;\n  --road-primary-80: #e282a6;\n  --road-primary-90: #f1bbcd;\n\n\n  /**\n   * Brand Secondary\n   */\n  --road-brand-secondary: #f8ab00;\n\n  /**\n   * Secondary\n   */\n  --road-secondary-10: #4c2800;\n  --road-secondary-20: #754300;\n  --road-secondary-30: #995e00;\n  --road-secondary-40: #bd7b00;\n  --road-secondary-50: #f8ab00;\n  --road-secondary-60: #ffbb21;\n  --road-secondary-70: #ffca42;\n  --road-secondary-80: #ffda70;\n  --road-secondary-90: #ffeaa8;\n\n  /* GREYSCALE\n   -------------------- */\n  --road-grey-0: #000000;\n  --road-grey-5: #141413;\n  --road-grey-10: #282826;\n  --road-grey-15: #333331;\n  --road-grey-20: #3d3d3c;\n  --road-grey-30: #565656;\n  --road-grey-40: #757574;\n  --road-grey-50: #8e8e8e;\n  --road-grey-60: #a9a8a7;\n  --road-grey-70: #c3c3c1;\n  --road-grey-80: #deddda;\n  --road-grey-85: #ebeae6;\n  --road-grey-90: #f8f7f3;\n  --road-grey-95: #fcfbf9;\n  --road-grey-100-new: #ffffff;\n\n  /**\n  * Header\n  */\n  --road-header-surface: var(--road-primary-50);\n  --road-on-header-surface: var(--road-grey-100-new);\n  --road-header-surface-disabled: rgba(255, 255, 255, 0.32);\n  --road-on-header-surface-disabled: rgba(255, 255, 255, 0.4);\n  --road-header-outline: var(--road-primary-50);\n  --road-header-icon: var(--road-grey-10-new);\n  --road-variant-icon-header: var(--road-secondary-60);\n  --road-header-badge: var(--road-secondary-60);\n  --road-on-header-badge: var(--road-grey-10);\n\n  /**\n   * Neutral Surface\n  */\n  --road-surface: var(--road-grey-100-new);\n  --road-surface-inverse: var(--road-grey-90);\n  --road-surface-disabled: rgba(137, 143, 160, 0.24);\n  --road-on-surface: var(--road-grey-10);\n  --road-on-surface-weak: var(--road-grey-20);\n  --road-on-surface-extra-weak: var(--road-grey-40);\n  --road-on-surface-disabled: rgba(34, 41, 58, 0.32);\n\n  /**\n   * Brand Surface\n  */\n  --road-primary: var(--road-primary-50);\n  --road-primary-variant: var(--road-primary-30);\n  --road-on-primary: var(--road-grey-100-new);\n  --road-secondary: var(--road-secondary-50);\n  --road-secondary-variant: var(--road-secondary-40);\n  --road-on-secondary: var(--road-grey-10);\n\n  /**\n   * Outline\n  */\n  --road-outline: var(--road-grey-30);\n  --road-outline-weak: var(--road-grey-40);\n  --road-outline-variant: var(--road-primary-30);\n\n  /**\n   * Artwork\n  */\n  --road-icon: var(--road-grey-10);\n  --road-icon-variant: var(--road-secondary-40);\n  --road-icon-inverse: var(--road-grey-100-new);\n  --road-icon-inverse-variant: var(--road-secondary-60);\n\n  /**\n   * Overlay\n  */\n  --road-overlay: rgba(0, 0, 0, 0.64);\n  --road-overlay-inverse: rgba(255, 255, 255, 0.64);\n  --road-on-overlay: var(--road-grey-100-new);\n  --road-on-overlay-inverse: var(--road-grey-10);\n\n  /**\n   * Buttons\n  */\n  --road-button-primary: var(--road-primary-50);\n  --road-button-primary-variant: var(--road-primary-30);\n  --road-on-button-primary: var(--road-grey-100-new);\n  --road-button-secondary: var(--road-secondary-50);\n  --road-button-secondary-variant: var(--road-secondary-40);\n  --road-on-button-secondary: var(--road-grey-10);\n  --road-button-tertiary: rgba(241, 187, 205, 0);\n  --road-button-tertiary-variant: var(--road-primary-90);\n  --road-button-tertiary-outline: var(--road-primary-50);\n  --road-on-button-tertiary: var(--road-grey-10);\n  --road-button-ghost: rgba(241, 187, 205, 0);\n  --road-button-ghost-variant: var(--road-primary-90);\n  --road-on-button-ghost: var(--road-primary-50);\n\n  /**\n   * Fab Button\n  */\n\n  --road-button-fab: var(--road-secondary-50);\n  --road-on-button-fab: var(--road-grey-10);\n  --road-button-fab-variant: var(--road-secondary-40);\n\n  /**\n   * Link\n  */\n  --road-link-primary: var(--road-primary-50);\n  --road-link-secondary: var(--road-grey-10);\n  --road-link-inverse: var(--road-grey-100-new);\n\n  /**\n   * Forms\n  */\n  --road-input-surface: var(--road-primary-50);\n  --road-input-surface-variant: var(--road-primary-30);\n  --road-input-outline: var(--road-grey-40);\n  --road-input-outline-variant: var(--road-grey-0);\n\n  /**\n   * Decorative\n  */\n  --road-decorative-surface: var(--road-secondary-50);\n  --road-decorative-surface-variant: var(--road-primary-50);\n\n  /**\n   * Leading Banner\n  */\n\n  --road-leading-banner: var(--road-secondary-50);\n  --road-on-leading-banner: var(--road-grey-10);\n\n  /* OLD CSS VARIABLES\n    -------------------- */\n\n  /* GREYSCALE\n  -------------------- */\n  --road-grey-000: var(--road-grey-100);\n  --road-grey-200: var(--road-grey-80);\n  --road-grey-300: var(--road-grey-70);\n  --road-grey-400: var(--road-grey-60);\n  --road-grey-500: var(--road-grey-50);\n  --road-grey-600: var(--road-grey-40);\n  --road-grey-700: var(--road-grey-30);\n  --road-grey-800: var(--road-grey-20);\n  --road-grey-900: var(--road-grey-10);\n  --road-grey-999: var(--road-grey-0);\n  --road-disabled: var(--road-surface-disabled);\n\n  /**\n   * Primary\n   */\n  --road-primary-100: var(--road-primary-90);\n  --road-primary-200: var(--road-primary-80);\n  --road-primary-300: var(--road-primary-70);\n  --road-primary-400: var(--road-primary-60);\n  --road-primary-500: var(--road-primary-50);\n  --road-primary-600: var(--road-primary-40);\n  --road-primary-700: var(--road-primary-30);\n  --road-primary-800: var(--road-primary-20);\n  --road-primary-900: var(--road-primary-10);\n  --road-primary-contrast: var(--road-on-primary);\n\n  /**\n   * Secondary\n   */\n  --road-secondary-100: var(--road-secondary-90);\n  --road-secondary-200: var(--road-secondary-80);\n  --road-secondary-300: var(--road-secondary-70);\n  --road-secondary-400: var(--road-secondary-60);\n  --road-secondary-500: var(--road-secondary-50);\n  --road-secondary-600: var(--road-secondary-40);\n  --road-secondary-700: var(--road-secondary-30);\n  --road-secondary-800: var(--road-secondary-20);\n  --road-secondary-900: var(--road-secondary-10);\n  --road-secondary-contrast: var(--road-on-secondary);\n\n  /**\n    * Primary\n  */\n  --primary: var(--road-brand-primary);\n  --primary-hover: var(--road-grey-999);\n  --primary-darken: var(--road-grey-999);\n  --primary-lighten: var(--road-primary-100);\n  --primary-contrast: var(--road-grey-000);\n\n  /**\n    * Secondary\n    */\n  --secondary: var(--road-brand-secondary);\n  --secondary-hover: var(--road-primary-700);\n  --secondary-darken: var(--road-primary-700);\n  --secondary-lighten: var(--road-primary-100);\n  --secondary-contrast: var(--road-grey-000);\n\n  /**\n    * Accent\n    */\n  --accent: var(--road-secondary-500);\n  --accent-hover: var(--road-secondary-700);\n  --accent-darken: var(--road-secondary-700);\n  --accent-lighten: var(--road-secondary-100);\n  --accent-contrast: var(--road-grey-900);\n}\n\n/* BYTHJUL\n  -------------------- */\n\n.bythjul-theme {\n  /**\n   * Brand Primary\n   */\n  --road-brand-primary: #103d6d;\n\n  /**\n   * Primary\n   */\n  --road-primary-10: #173557;\n  --road-primary-20: #103d6d;\n  --road-primary-30: #134b85;\n  --road-primary-40: #16579a;\n  --road-primary-50: #1961ac;\n  --road-primary-60: #748fbf;\n  --road-primary-70: #a2b2d1;\n  --road-primary-80: #c6cfe1;\n  --road-primary-90: #e4e8f1;\n  --road-primary-95: #f2f4f8;\n\n  /**\n   * Brand Secondary\n   */\n  --road-brand-secondary: #f5a973;\n\n  /**\n   * Secondary\n   */\n  --road-secondary-10: #6c3f07;\n  --road-secondary-20: #99590a;\n  --road-secondary-30: #bb6c0c;\n  --road-secondary-40: #d87d0e;\n  --road-secondary-50: #f28c10;\n  --road-secondary-60: #f5a973;\n  --road-secondary-70: #f7c2a2;\n  --road-secondary-80: #fad8c6;\n  --road-secondary-90: #fcede4;\n  --road-secondary-95: #fef6f2;\n\n  /* GREYSCALE\n   -------------------- */\n  --road-grey-0: #000000;\n  --road-grey-5: #141414;\n  --road-grey-10: #1c1c1c;\n  --road-grey-15: #232323;\n  --road-grey-20: #282828;\n  --road-grey-30: #2d2d2d;\n  --road-grey-40: #313131;\n  --road-grey-50: #333333;\n  --road-grey-60: #828282;\n  --road-grey-70: #a3a3a3;\n  --road-grey-80: #bebebe;\n  --road-grey-85: #d6d6d6;\n  --road-grey-90: #ebebeb;\n  --road-grey-95: #f8f8f8;\n  --road-grey-100-new: #ffffff;\n\n  /**\n  * Header\n  */\n  --road-header-surface: var(--road-primary-50);\n  --road-on-header-surface: var(--road-grey-100-new);\n  --road-header-surface-disabled: rgba(255, 255, 255, 0.32);\n  --road-on-header-surface-disabled: rgba(255, 255, 255, 0.4);\n  --road-header-outline: var(--road-primary-50);\n  --road-header-icon: var(--road-grey-10-new);\n  --road-variant-icon-header: var(--road-secondary-60);\n  --road-header-badge: var(--road-secondary-60);\n  --road-on-header-badge: var(--road-grey-10);\n\n  /**\n   * Neutral Surface\n  */\n  --road-surface: var(--road-grey-100-new);\n  --road-surface-inverse: var(--road-grey-90);\n  --road-surface-disabled: rgba(137, 143, 160, 0.24);\n  --road-on-surface: var(--road-grey-10);\n  --road-on-surface-weak: var(--road-grey-20);\n  --road-on-surface-extra-weak: var(--road-grey-40);\n  --road-on-surface-disabled: rgba(34, 41, 58, 0.32);\n\n  /**\n   * Brand Surface\n  */\n  --road-primary: var(--road-primary-50);\n  --road-primary-variant: var(--road-primary-30);\n  --road-on-primary: var(--road-grey-100-new);\n  --road-secondary: var(--road-secondary-50);\n  --road-secondary-variant: var(--road-secondary-40);\n  --road-on-secondary: var(--road-grey-10);\n\n  /**\n   * Outline\n  */\n  --road-outline: var(--road-grey-30);\n  --road-outline-weak: var(--road-grey-40);\n  --road-outline-variant: var(--road-primary-30);\n\n  /**\n   * Artwork\n  */\n  --road-icon: var(--road-grey-10);\n  --road-icon-variant: var(--road-secondary-40);\n  --road-icon-inverse: var(--road-grey-100-new);\n  --road-icon-inverse-variant: var(--road-secondary-60);\n\n  /**\n   * Overlay\n  */\n  --road-overlay: rgba(0, 0, 0, 0.64);\n  --road-overlay-inverse: rgba(255, 255, 255, 0.64);\n  --road-on-overlay: var(--road-grey-100-new);\n  --road-on-overlay-inverse: var(--road-grey-10);\n\n  /**\n   * Buttons\n  */\n  --road-button-primary: var(--road-primary-50);\n  --road-button-primary-variant: var(--road-primary-30);\n  --road-on-button-primary: var(--road-grey-100-new);\n  --road-button-secondary: var(--road-secondary-50);\n  --road-button-secondary-variant: var(--road-secondary-40);\n  --road-on-button-secondary: var(--road-grey-10);\n  --road-button-tertiary: rgba(241, 187, 205, 0);\n  --road-button-tertiary-variant: var(--road-primary-90);\n  --road-button-tertiary-outline: var(--road-primary-50);\n  --road-on-button-tertiary: var(--road-grey-10);\n  --road-button-ghost: rgba(241, 187, 205, 0);\n  --road-button-ghost-variant: var(--road-primary-90);\n  --road-on-button-ghost: var(--road-grey-10);\n\n  /**\n   * Fab Button\n  */\n\n  --road-button-fab: var(--road-secondary-50);\n  --road-on-button-fab: var(--road-grey-10);\n  --road-button-fab-variant: var(--road-secondary-40);\n\n  /**\n   * Link\n  */\n  --road-link-primary: var(--road-primary-50);\n  --road-link-secondary: var(--road-grey-10);\n  --road-link-inverse: var(--road-grey-100-new);\n\n  /**\n   * Forms\n  */\n  --road-input-surface: var(--road-primary-50);\n  --road-input-surface-variant: var(--road-primary-30);\n  --road-input-outline: var(--road-grey-40);\n  --road-input-outline-variant: var(--road-grey-0);\n\n  /**\n   * Decorative\n  */\n  --road-decorative-surface: var(--road-secondary-50);\n  --road-decorative-surface-variant: var(--road-primary-50);\n\n  /**\n   * Leading Banner\n  */\n\n  --road-leading-banner: var(--road-secondary-50);\n  --road-on-leading-banner: var(--road-grey-10);\n\n  /* OLD CSS VARIABLES\n    -------------------- */\n\n  /* GREYSCALE\n  -------------------- */\n  --road-grey-000: var(--road-grey-100);\n  --road-grey-200: var(--road-grey-80);\n  --road-grey-300: var(--road-grey-70);\n  --road-grey-400: var(--road-grey-60);\n  --road-grey-500: var(--road-grey-50);\n  --road-grey-600: var(--road-grey-40);\n  --road-grey-700: var(--road-grey-30);\n  --road-grey-800: var(--road-grey-20);\n  --road-grey-900: var(--road-grey-10);\n  --road-grey-999: var(--road-grey-0);\n  --road-disabled: var(--road-surface-disabled);\n\n  /**\n   * Primary\n   */\n  --road-primary-100: var(--road-primary-90);\n  --road-primary-200: var(--road-primary-80);\n  --road-primary-300: var(--road-primary-70);\n  --road-primary-400: var(--road-primary-60);\n  --road-primary-500: var(--road-primary-50);\n  --road-primary-600: var(--road-primary-40);\n  --road-primary-700: var(--road-primary-30);\n  --road-primary-800: var(--road-primary-20);\n  --road-primary-900: var(--road-primary-10);\n  --road-primary-contrast: var(--road-on-primary);\n\n  /**\n   * Secondary\n   */\n  --road-secondary-100: var(--road-secondary-90);\n  --road-secondary-200: var(--road-secondary-80);\n  --road-secondary-300: var(--road-secondary-70);\n  --road-secondary-400: var(--road-secondary-60);\n  --road-secondary-500: var(--road-secondary-50);\n  --road-secondary-600: var(--road-secondary-40);\n  --road-secondary-700: var(--road-secondary-30);\n  --road-secondary-800: var(--road-secondary-20);\n  --road-secondary-900: var(--road-secondary-10);\n  --road-secondary-contrast: var(--road-on-secondary);\n\n  /**\n    * Primary\n  */\n  --primary: var(--road-brand-primary);\n  --primary-hover: var(--road-grey-999);\n  --primary-darken: var(--road-grey-999);\n  --primary-lighten: var(--road-primary-100);\n  --primary-contrast: var(--road-grey-000);\n\n  /**\n    * Secondary\n    */\n  --secondary: var(--road-brand-secondary);\n  --secondary-hover: var(--road-primary-700);\n  --secondary-darken: var(--road-primary-700);\n  --secondary-lighten: var(--road-primary-100);\n  --secondary-contrast: var(--road-grey-000);\n\n  /**\n    * Accent\n    */\n  --accent: var(--road-secondary-500);\n  --accent-hover: var(--road-secondary-700);\n  --accent-darken: var(--road-secondary-700);\n  --accent-lighten: var(--road-secondary-100);\n  --accent-contrast: var(--road-grey-900);\n}\n\n/* SKRUVAT\n  -------------------- */\n\n.skruvat-theme {\n  /**\n   * Brand Primary\n   */\n  --road-brand-primary: #a73b0d;\n\n  /**\n   * Primary\n   */\n  --road-primary-10: #471c0b;\n  --road-primary-20: #a73b0d;\n  --road-primary-30: #ff4b00;\n  --road-primary-40: #ff6d2f;\n  --road-primary-50: #d7734b;\n  --road-primary-60: #ffaf8f;\n  --road-primary-70: #ffc3ab;\n  --road-primary-80: #ffe9e1;\n  --road-primary-90: #fffbfa;\n\n  /**\n   * Brand Secondary\n   */\n  --road-brand-secondary: #382e29;\n\n  /**\n   * Secondary\n   */\n  --road-secondary-10: #382e29;\n  --road-secondary-20: #6b6868;\n  --road-secondary-30: #807a7a;\n  --road-secondary-40: #958d8c;\n  --road-secondary-50: #aaa2a1;\n  --road-secondary-60: #bebab9;\n  --road-secondary-70: #d3d3d3;\n  --road-secondary-80: #dddddd;\n  --road-secondary-90: #f0f0f0;\n  --road-secondary-95: #fafafa;\n\n  /* GREYSCALE\n   -------------------- */\n  --road-grey-0: #000000;\n  --road-grey-5: #19160c;\n  --road-grey-10: #382e29;\n  --road-grey-15: #565656;\n  --road-grey-20: #6b6868;\n  --road-grey-30: #807a7a;\n  --road-grey-40: #958d8c;\n  --road-grey-50: #aaa2a1;\n  --road-grey-60: #bebab9;\n  --road-grey-70: #d3d3d3;\n  --road-grey-80: #dddddd;\n  --road-grey-85: #e7e7e7;\n  --road-grey-90: #f0f0f0;\n  --road-grey-95: #fafafa;\n  --road-grey-100-new: #ffffff;\n\n  /**\n  * Header\n  */\n  --road-header-surface: var(--road-primary-50);\n  --road-on-header-surface: var(--road-grey-100-new);\n  --road-header-surface-disabled: rgba(255, 255, 255, 0.32);\n  --road-on-header-surface-disabled: rgba(255, 255, 255, 0.4);\n  --road-header-outline: var(--road-primary-50);\n  --road-header-icon: var(--road-grey-10-new);\n  --road-variant-icon-header: var(--road-secondary-60);\n  --road-header-badge: var(--road-secondary-60);\n  --road-on-header-badge: var(--road-grey-10);\n\n  /**\n   * Neutral Surface\n  */\n  --road-surface: var(--road-grey-100-new);\n  --road-surface-inverse: var(--road-grey-90);\n  --road-surface-disabled: rgba(137, 143, 160, 0.24);\n  --road-on-surface: var(--road-grey-10);\n  --road-on-surface-weak: var(--road-grey-20);\n  --road-on-surface-extra-weak: var(--road-grey-40);\n  --road-on-surface-disabled: rgba(34, 41, 58, 0.32);\n\n  /**\n   * Brand Surface\n  */\n  --road-primary: var(--road-primary-50);\n  --road-primary-variant: var(--road-primary-30);\n  --road-on-primary: var(--road-grey-100-new);\n  --road-secondary: var(--road-secondary-50);\n  --road-secondary-variant: var(--road-secondary-40);\n  --road-on-secondary: var(--road-grey-10);\n\n  /**\n   * Outline\n  */\n  --road-outline: var(--road-grey-30);\n  --road-outline-weak: var(--road-grey-40);\n  --road-outline-variant: var(--road-primary-30);\n\n  /**\n   * Artwork\n  */\n  --road-icon: var(--road-grey-10);\n  --road-icon-variant: var(--road-primary-40);\n  --road-icon-inverse: var(--road-grey-100-new);\n  --road-icon-inverse-variant: var(--road-secondary-60);\n\n  /**\n   * Overlay\n  */\n  --road-overlay: rgba(0, 0, 0, 0.64);\n  --road-overlay-inverse: rgba(255, 255, 255, 0.64);\n  --road-on-overlay: var(--road-grey-100-new);\n  --road-on-overlay-inverse: var(--road-grey-10);\n\n  /**\n   * Buttons\n  */\n  --road-button-primary: var(--road-primary-50);\n  --road-button-primary-variant: var(--road-primary-30);\n  --road-on-button-primary: var(--road-grey-100-new);\n  --road-button-secondary: var(--road-secondary-50);\n  --road-button-secondary-variant: var(--road-secondary-40);\n  --road-on-button-secondary: var(--road-grey-10);\n  --road-button-tertiary: rgba(241, 187, 205, 0);\n  --road-button-tertiary-variant: var(--road-primary-90);\n  --road-button-tertiary-outline: var(--road-primary-50);\n  --road-on-button-tertiary: var(--road-grey-10);\n  --road-button-ghost: rgba(241, 187, 205, 0);\n  --road-button-ghost-variant: var(--road-primary-90);\n  --road-on-button-ghost: var(--road-grey-10);\n\n  /**\n   * Fab Button\n  */\n\n  --road-button-fab: var(--road-secondary-50);\n  --road-on-button-fab: var(--road-grey-10);\n  --road-button-fab-variant: var(--road-secondary-40);\n\n  /**\n   * Link\n  */\n  --road-link-primary: var(--road-primary-50);\n  --road-link-secondary: var(--road-grey-10);\n  --road-link-inverse: var(--road-grey-100-new);\n\n  /**\n   * Forms\n  */\n  --road-input-surface: var(--road-primary-50);\n  --road-input-surface-variant: var(--road-primary-30);\n  --road-input-outline: var(--road-grey-40);\n  --road-input-outline-variant: var(--road-grey-0);\n\n  /**\n   * Decorative\n  */\n  --road-decorative-surface: var(--road-secondary-50);\n  --road-decorative-surface-variant: var(--road-primary-50);\n\n  /**\n   * Leading Banner\n  */\n\n  --road-leading-banner: var(--road-secondary-50);\n  --road-on-leading-banner: var(--road-grey-10);\n\n  /* OLD CSS VARIABLES\n    -------------------- */\n\n  /* GREYSCALE\n  -------------------- */\n  --road-grey-000: var(--road-grey-100);\n  --road-grey-200: var(--road-grey-80);\n  --road-grey-300: var(--road-grey-70);\n  --road-grey-400: var(--road-grey-60);\n  --road-grey-500: var(--road-grey-50);\n  --road-grey-600: var(--road-grey-40);\n  --road-grey-700: var(--road-grey-30);\n  --road-grey-800: var(--road-grey-20);\n  --road-grey-900: var(--road-grey-10);\n  --road-grey-999: var(--road-grey-0);\n  --road-disabled: var(--road-surface-disabled);\n\n  /**\n   * Primary\n   */\n  --road-primary-100: var(--road-primary-90);\n  --road-primary-200: var(--road-primary-80);\n  --road-primary-300: var(--road-primary-70);\n  --road-primary-400: var(--road-primary-60);\n  --road-primary-500: var(--road-primary-50);\n  --road-primary-600: var(--road-primary-40);\n  --road-primary-700: var(--road-primary-30);\n  --road-primary-800: var(--road-primary-20);\n  --road-primary-900: var(--road-primary-10);\n  --road-primary-contrast: var(--road-on-primary);\n\n  /**\n   * Secondary\n   */\n  --road-secondary-100: var(--road-secondary-90);\n  --road-secondary-200: var(--road-secondary-80);\n  --road-secondary-300: var(--road-secondary-70);\n  --road-secondary-400: var(--road-secondary-60);\n  --road-secondary-500: var(--road-secondary-50);\n  --road-secondary-600: var(--road-secondary-40);\n  --road-secondary-700: var(--road-secondary-30);\n  --road-secondary-800: var(--road-secondary-20);\n  --road-secondary-900: var(--road-secondary-10);\n  --road-secondary-contrast: var(--road-on-secondary);\n\n  /**\n    * Primary\n  */\n  --primary: var(--road-brand-primary);\n  --primary-hover: var(--road-grey-999);\n  --primary-darken: var(--road-grey-999);\n  --primary-lighten: var(--road-primary-100);\n  --primary-contrast: var(--road-grey-000);\n\n  /**\n    * Secondary\n    */\n  --secondary: var(--road-brand-secondary);\n  --secondary-hover: var(--road-primary-700);\n  --secondary-darken: var(--road-primary-700);\n  --secondary-lighten: var(--road-primary-100);\n  --secondary-contrast: var(--road-grey-000);\n\n  /**\n    * Accent\n    */\n  --accent: var(--road-secondary-500);\n  --accent-hover: var(--road-secondary-700);\n  --accent-darken: var(--road-secondary-700);\n  --accent-lighten: var(--road-secondary-100);\n  --accent-contrast: var(--road-grey-900);\n}\n\n/* normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */\n/* stylelint-disable */\n\n/* Document\n   ========================================================================== */\n\n/**\n * Prevent adjustments of font size after orientation changes in iOS.\n */\n\nhtml {\n  -webkit-text-size-adjust: 100%;\n}\n\n/* Sections\n   ========================================================================== */\n\n/**\n * Remove the margin in all browsers.\n */\n\nbody {\n  margin: 0;\n}\n\n/**\n * Render the `main` element consistently in IE.\n */\n\nmain {\n  display: block;\n}\n\n/* Grouping content\n   ========================================================================== */\n\n/**\n * 1. Add the correct box sizing in Firefox.\n * 2. Show the overflow in Edge and IE.\n */\n\nhr {\n  box-sizing: content-box; /* 1 */\n  height: 0; /* 1 */\n  overflow: visible; /* 2 */\n  border: none;\n  border-bottom: 1px solid var(--road-outline-weak);\n}\n\n/* Text-level semantics\n   ========================================================================== */\n\n/**\n * Add the correct font weight in Chrome, Edge, and Safari.\n */\n\nb,\nstrong {\n  font-weight: bolder;\n}\n\n/**\n * Add the correct font size in all browsers.\n */\n\nsmall {\n  font-size: 80%;\n}\n\n/**\n * Prevent `sub` and `sup` elements from affecting the line height in\n * all browsers.\n */\n\nsub,\nsup {\n  position: relative;\n  font-size: 75%;\n  line-height: 0;\n  vertical-align: baseline;\n}\n\nsub {\n  bottom: -0.25em;\n}\n\nsup {\n  top: -0.5em;\n}\n\n/* Forms\n   ========================================================================== */\n\n/**\n * 1. Change the font styles in all browsers.\n * 2. Remove the margin in Firefox and Safari.\n */\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  margin: 0; /* 2 */\n  font-family: inherit; /* 1 */\n  font-size: 100%; /* 1 */\n  line-height: 1.15; /* 1 */\n}\n\n/**\n * Show the overflow in IE.\n * 1. Show the overflow in Edge.\n */\n\nbutton,\ninput { /* 1 */\n  overflow: visible;\n}\n\n/**\n * Remove the inheritance of text transform in Edge, Firefox, and IE.\n * 1. Remove the inheritance of text transform in Firefox.\n */\n\nbutton,\nselect { /* 1 */\n  text-transform: none;\n}\n\n/**\n * Correct the inability to style clickable types in iOS and Safari.\n */\n\n button,\n [type=\"button\"],\n [type=\"reset\"],\n [type=\"submit\"] {\n   -webkit-appearance: button;\n }\n\n/**\n * Remove the inner border and padding in Firefox.\n */\n\nbutton::-moz-focus-inner,\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner {\n  padding: 0;\n  border-style: none;\n}\n\n/**\n * Restore the focus styles unset by the previous rule.\n */\n\nbutton:-moz-focusring,\n[type=\"button\"]:-moz-focusring,\n[type=\"reset\"]:-moz-focusring,\n[type=\"submit\"]:-moz-focusring {\n  outline: 1px dotted ButtonText;\n}\n\n/**\n * Correct the padding in Firefox.\n */\n\nfieldset {\n  padding: 0.35em 0.75em 0.625em;\n}\n\n/**\n * 1. Correct the text wrapping in Edge and IE.\n * 2. Correct the color inheritance from `fieldset` elements in IE.\n * 3. Remove the padding so developers are not caught out when they zero out\n *    `fieldset` elements in all browsers.\n */\n\nlegend {\n  box-sizing: border-box; /* 1 */\n  display: table; /* 1 */\n  max-width: 100%; /* 1 */\n  padding: 0; /* 3 */\n  color: inherit; /* 2 */\n  white-space: normal; /* 1 */\n}\n\n/**\n * Add the correct vertical alignment in Chrome, Firefox, and Opera.\n */\n\nprogress {\n  vertical-align: baseline;\n}\n\n/**\n * Remove the default vertical scrollbar in IE 10+.\n */\n\ntextarea {\n  overflow: auto;\n}\n\n/**\n * Correct the cursor style of increment and decrement buttons in Chrome.\n */\n\n[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button {\n  -webkit-appearance: none;\n}\n\n/**\n * 1. Correct the odd appearance in Chrome and Safari.\n * 2. Correct the outline style in Safari.\n */\n\n[type=\"search\"] {\n  outline-offset: -2px; /* 2 */\n  -webkit-appearance: textfield; /* 1 */\n}\n\n/**\n * Remove the inner padding in Chrome and Safari on macOS.\n */\n\n[type=\"search\"]::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n\n/**\n * 1. Correct the inability to style clickable types in iOS and Safari.\n * 2. Change font properties to `inherit` in Safari.\n */\n\n::-webkit-file-upload-button {\n  font: inherit; /* 2 */\n  -webkit-appearance: button; /* 1 */\n}\n\n/* Interactive\n   ========================================================================== */\n\n/*\n * Add the correct display in Edge, IE 10+, and Firefox.\n */\n\ndetails {\n  display: block;\n}\n\n/*\n * Add the correct display in all browsers.\n */\n\nsummary {\n  display: list-item;\n}\n\n/* Misc\n   ========================================================================== */\n\n/**\n * Add the correct display in IE 10+.\n */\n\ntemplate {\n  display: none;\n}\n\n/**\n * Add the correct display in IE 10.\n */\n\n[hidden] {\n  display: none;\n}\n\n/**\n * Base\n *\n * Specific reset and base styles for every elements\n *\n * Index\n * - Body base style\n * - Responsive media\n * - Iframe\n * - Links\n * - Webfonts\n */\n/* stylelint-disable */\n\n\n/**\n * set box-sizing for all elements\n */\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n/**\n * Remove native arrow on type number\n */\n\ninput[type=\"number\"] {\n  appearance: textfield;\n}\n\n/* BODY BASE STYLE\n -------------------- */\n\nbody {\n  font-family: var(--road-font, sans-serif);\n  font-size: var(--road-font-size-14);\n  line-height: 1.5;\n  color: var(--road-grey-10);\n}\n\n/* RESPONSIVE MEDIA\n -------------------- */\n\nimg,\nembed,\niframe,\nobject,\naudio,\nvideo {\n  max-width: 100%;\n  height: auto;\n}\n\n/* IFRAME\n -------------------- */\n\niframe {\n  border: 0;\n}\n\n/* REMOVE MOBILE TAP HIGHLIGHT\n -------------------- */\n\ninput,\ntextarea,\nbutton,\nselect,\na {\n  -webkit-tap-highlight-color: rgba(0,0,0,0);\n}\n\n/* LINKS\n -------------------- */\n\na {\n  text-decoration: none;\n  cursor: pointer;\n}\n\n*.focus-visible {\n  outline: auto;\n}\n\n/*\n * Font\n *\n * Index\n * - Muli\n */\n\n/* MULI\n -------------------- */\n\n/*\n * Regular\n */\n\n/* latin-ext */\n@font-face {\n  font-family: Muli;\n  font-style: normal;\n  font-weight: 400;\n  font-display: swap;\n  src: local(\"Muli Regular\"), local(\"Muli-Regular\"), url(\"fonts/Muli-Regular.woff2\") format(\"woff2\"), url(\"fonts/Muli-Regular.woff\") format(\"woff\");\n  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;\n}\n\n/* latin */\n@font-face {\n  font-family: Muli;\n  font-style: normal;\n  font-weight: 400;\n  font-display: swap;\n  src: local(\"Muli Regular\"), local(\"Muli-Regular\"), url(\"fonts/Muli-Regular.woff2\") format(\"woff2\"), url(\"fonts/Muli-Regular.woff\") format(\"woff\");\n  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;\n}\n\n/*\n * Bold\n */\n\n/* latin-ext */\n@font-face {\n  font-family: Muli;\n  font-style: normal;\n  font-weight: 700;\n  font-display: swap;\n  src: local(\"Muli Bold\"), local(\"Muli-Bold\"), url(\"fonts/Muli-Bold.woff2\") format(\"woff2\"), url(\"fonts/Muli-Bold.woff\") format(\"woff\");\n  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;\n}\n\n/* latin */\n@font-face {\n  font-family: Muli;\n  font-style: normal;\n  font-weight: 700;\n  font-display: swap;\n  src: local(\"Muli Bold\"), local(\"Muli-Bold\"), url(\"fonts/Muli-Bold.woff2\") format(\"woff2\"), url(\"fonts/Muli-Bold.woff\") format(\"woff\");\n  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;\n}\n\n/*\n * SemiBold\n */\n\n/* latin-ext */\n@font-face {\n  font-family: Muli;\n  font-style: normal;\n  font-weight: 600;\n  font-display: swap;\n  src: local(\"Muli SemiBold\"), local(\"Muli-SemiBold\"), url(\"fonts/Muli-SemiBold.woff2\") format(\"woff2\"), url(\"fonts/Muli-SemiBold.woff\") format(\"woff\");\n  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;\n}\n\n/* latin */\n@font-face {\n  font-family: Muli;\n  font-style: normal;\n  font-weight: 600;\n  font-display: swap;\n  src: local(\"Muli SemiBold\"), local(\"Muli-SemiBold\"), url(\"fonts/Muli-SemiBold.woff2\") format(\"woff2\"), url(\"fonts/Muli-SemiBold.woff\") format(\"woff\");\n  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;\n}\n\n/*\n * Black\n */\n\n/* latin-ext */\n@font-face {\n  font-family: Muli;\n  font-style: normal;\n  font-weight: 900;\n  font-display: swap;\n  src: local(\"Muli Black\"), local(\"Muli-Black\"), url(\"fonts/Muli-Black.woff2\") format(\"woff2\"), url(\"fonts/Muli-Black.woff\") format(\"woff\");\n  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;\n}\n\n/* latin */\n@font-face {\n  font-family: Muli;\n  font-style: normal;\n  font-weight: 900;\n  font-display: swap;\n  src: local(\"Muli Black\"), local(\"Muli-Black\"), url(\"fonts/Muli-Black.woff2\") format(\"woff2\"), url(\"fonts/Muli-Black.woff\") format(\"woff\");\n  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;\n}\n\n/**\n * Typography\n *\n * Typography can help create clear hierarchies,\n * organize information, and guide users through a product or experience.\n *\n * We using Muli as the default font (https://github.com/vernnobile/MuliFont)\n *\n * Index\n * - Headings\n * - Content\n *\n */\n\n/* DISPLAY\n -------------------- */\n\n.display-large{\n  font-size: var(--road-display-large);\n  font-weight: 700;\n  line-height: 1.5;\n}\n\n.display-medium{\n  font-size: var(--road-display-medium);\n  font-weight: 700;\n  line-height: 1.5;\n}\n\n.display-small{\n  font-size: var(--road-display-small);\n  font-weight: 700;\n  line-height: 1.5;\n}\n\n/* HEADINGS\n -------------------- */\n\n.h1,\n.h2,\n.h3,\n.h4,\n.h5,\n.h6,\n.h7,\n.h8,\n.h9 {\n  padding: 0;\n  font-weight: 700;\n  line-height: 1.5;\n  color: var(--road-on-surface);\n}\n\n.title-primary{\n  color: var(--road-brand-primary);\n}\n\n.h1,\n.h2,\n.h3,\n.h4,\n.h5,\n.h6,\n.h7,\n.h8,\n.h9,\n.text-content,\n.text-small,\n.text-legal,\n.text-large,\n.text-medium\n {\n  margin: 0 0 1rem;\n  font-family: var(--road-font, sans-serif);\n}\n\n.h1 {\n  font-size: var(--road-heading-01);\n}\n\n.h2 {\n  font-size: var(--road-heading-02);\n}\n\n.h3 {\n  font-size: var(--road-heading-03);\n}\n\n.h4 {\n  font-size: var(--road-heading-04);\n}\n\n.h5 {\n  font-size: var(--road-font-size-24);\n}\n\n.h6 {\n  font-size: var(--road-font-size-21);\n}\n\n.h7 {\n  font-size: var(--road-font-size-18);\n}\n\n.h8 {\n  font-size: var(--road-font-size-16);\n}\n\n.h9 {\n  font-size: var(--road-font-size-12);\n  text-transform: uppercase;\n}\n\n\n/* SUB HEADINGS\n -------------------- */\n\n.sub-heading-large{\n  font-size: var(--road-sub-heading-large);\n  font-weight: 700;\n  line-height: 1.5;\n}\n\n.sub-heading-medium{\n  font-size: var(--road-sub-heading-medium);\n  font-weight: 700;\n  line-height: 1.5;\n}\n\n.sub-heading-small{\n  font-size: var(--road-sub-heading-small);\n  font-weight: 700;\n  line-height: 1.5;\n}\n\n.overline{\n  font-size: var(--road-overline);\n  font-weight: 700;\n  text-transform: uppercase;\n}\n\n/* CONTENT\n -------------------- */\n\n.text-content,\n.text-small,\n.text-legal,\n.text-large,\n.text-medium{\n  line-height: 1.5;\n}\n\n.text-large {\n  font-size: var(--road-body-large);\n  color: var(--road-grey-10);\n}\n\n.text-content {\n  font-size: var(--road-body-medium);\n  color: var(--road-on-surface);\n}\n\n.text-medium {\n  font-size: var(--road-body-small);\n  color: var(--road-on-surface);\n}\n\n.text-small {\n  font-size: var(--road-legal-medium);\n}\n\n.text-legal {\n  font-size: var(--road-legal-medium);\n  color: var(--road-on-surface-extra-weak);\n}\n\n/* Underline\n -------------------- */\n\n.title-underline::after{\n  display: block;\n  width: 50px;\n  height: 3px;\n  margin-top: 8px;\n  content: \"\";\n  background-color: var(--road-decorative-surface);\n}\n\n.text-center.title-underline::after{\n  margin: 8px auto 0;\n}\n\n.text-right.title-underline::after{\n  position: absolute;\n  right: 2rem;\n}\n\n/*\n * Link\n *\n * Index\n * - Link\n * - Default\n * - Sizes\n * - Icon\n *\n */\n\n.link {\n  color: var(--road-link-primary);\n  text-decoration: underline;\n  transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}\n\n/**\n * Hover state\n */\n\n.link:hover{\n  text-decoration: none;\n}\n\n.link:focus,\n.link.focus-visible {\n  outline: auto;\n}\n\n/* DEFAULT\n -------------------- */\n\n.link-default {\n  color: var(--road-link-secondary);\n}\n\n/* WHITE\n -------------------- */\n\n.link-white {\n  color: var(--road-link-inverse);\n}\n\n/* SIZES\n -------------------- */\n\n.link-md {\n  font-size: var(--road-link-medium);\n}\n\n.link-sm {\n  font-size: var(--road-link-small);\n}\n\n/* ICON\n -------------------- */\n\n.link road-icon {\n  color: currentColor;\n}\n\nul {\n  li {\n    list-style-type: none;\n\n    &:not(:last-child) {\n      &::after {\n        content: '/';\n        margin: 0 var(--road-spacing-03);\n      }\n    }\n  }\n}\n\n/* UTILITIES\n -------------------- */\n/*\n * Display utilities\n *\n */\n\n.d-none {\n  display: none;\n}\n\n.d-inline {\n  display: inline;\n}\n\n.d-inline-block {\n  display: inline-block;\n}\n\n.d-block {\n  display: block;\n}\n\n.d-flex {\n  display: flex;\n}\n\n.d-inline-flex {\n  display: inline-flex;\n}\n\n@media (min-width: 576px) {\n\n  .d-sm-none {\n    display: none;\n  }\n\n  .d-sm-inline {\n    display: inline;\n  }\n\n  .d-sm-inline-block {\n    display: inline-block;\n  }\n\n  .d-sm-block {\n    display: block;\n  }\n\n  .d-sm-flex {\n    display: flex;\n  }\n\n  .d-sm-inline-flex {\n    display: inline-flex;\n  }\n}\n\n@media (min-width: 768px) {\n\n  .d-md-none {\n    display: none;\n  }\n\n  .d-md-inline {\n    display: inline;\n  }\n\n  .d-md-inline-block {\n    display: inline-block;\n  }\n\n  .d-md-block {\n    display: block;\n  }\n\n  .d-md-flex {\n    display: flex;\n  }\n\n  .d-md-inline-flex {\n    display: inline-flex;\n  }\n}\n\n@media (min-width: 992px) {\n\n  .d-lg-none {\n    display: none;\n  }\n\n  .d-lg-inline {\n    display: inline;\n  }\n\n  .d-lg-inline-block {\n    display: inline-block;\n  }\n\n  .d-lg-block {\n    display: block;\n  }\n\n  .d-lg-flex {\n    display: flex;\n  }\n\n  .d-lg-inline-flex {\n    display: inline-flex;\n  }\n}\n\n@media (min-width: 1200px) {\n\n  .d-xl-none {\n    display: none;\n  }\n\n  .d-xl-inline {\n    display: inline;\n  }\n\n  .d-xl-inline-block {\n    display: inline-block;\n  }\n\n  .d-xl-block {\n    display: block;\n  }\n\n  .d-xl-flex {\n    display: flex;\n  }\n\n  .d-xl-inline-flex {\n    display: inline-flex;\n  }\n}\n\n\n/*\n * Compact\n *\n */\n\n\n@media (min-width: 1200px) {\n\n  .compact .d-xl-compact-none {\n    display: none;\n  }\n}\n\n/*\n * Flexbox utilities\n *\n * Index\n * - Flex direction\n * - Flex grow\n * - Flex shrink\n * - Flex wrap\n * - Justify content\n * - Align items\n */\n\n/* FLEX DIRECTION\n -------------------- */\n\n.flex-row {\n  flex-direction: row;\n}\n\n.flex-row-reverse {\n  flex-direction: row-reverse;\n}\n\n\n.flex-column {\n  flex-direction: column;\n}\n\n.flex-column-reverse {\n  flex-direction: column-reverse;\n}\n\n.flex-none{\n  flex: none;\n}\n\n/* FLEX WRAP\n -------------------- */\n\n.flex-wrap {\n  flex-wrap: wrap;\n}\n\n.flex-nowrap {\n  flex-wrap: nowrap;\n}\n\n/* FLEX GROW\n -------------------- */\n\n.flex-grow-0 {\n  flex-grow: 0;\n}\n\n.flex-grow-1 {\n  flex-grow: 1;\n}\n\n.flex-grow-2 {\n  flex-grow: 2;\n}\n\n\n/* FLEX SHRINK\n -------------------- */\n\n.flex-shrink-0 {\n  flex-shrink: 0;\n}\n\n.flex-shrink-1 {\n  flex-shrink: 1;\n}\n\n/* JUSTIFY CONTENT\n -------------------- */\n\n.justify-content-start {\n  justify-content: flex-start;\n}\n\n.justify-content-end {\n  justify-content: flex-end;\n}\n\n.justify-content-center {\n  justify-content: center;\n}\n\n.justify-content-between {\n  justify-content: space-between;\n}\n\n.justify-content-around {\n  justify-content: space-around;\n}\n\n/* ALIGN ITEMS\n -------------------- */\n\n.align-items-start {\n  align-items: flex-start;\n}\n\n.align-items-end {\n  align-items: flex-end;\n}\n\n.align-items-center {\n  align-items: center;\n}\n\n.align-items-baseline {\n  align-items: baseline;\n}\n\n.align-items-stretch {\n  align-items: stretch;\n}\n\n@media (min-width: 576px) {\n\n  .flex-sm-row {\n    flex-direction: row;\n  }\n\n  .flex-sm-row-reverse {\n    flex-direction: row-reverse;\n  }\n\n  .flex-sm-column {\n    flex-direction: column;\n  }\n\n  .flex-sm-column-reverse {\n    flex-direction: column-reverse;\n  }\n\n  .flex-sm-wrap {\n    flex-wrap: wrap;\n  }\n\n  .flex-sm-nowrap {\n    flex-wrap: nowrap;\n  }\n\n  .justify-content-sm-start {\n    justify-content: flex-start;\n  }\n\n  .justify-content-sm-end {\n    justify-content: flex-end;\n  }\n\n  .justify-content-sm-center {\n    justify-content: center;\n  }\n\n  .justify-content-sm-between {\n    justify-content: space-between;\n  }\n\n  .justify-content-sm-around {\n    justify-content: space-around;\n  }\n\n  .align-items-sm-start {\n    align-items: flex-start;\n  }\n\n  .align-items-sm-end {\n    align-items: flex-end;\n  }\n\n  .align-items-sm-center {\n    align-items: center;\n  }\n\n  .align-items-sm-baseline {\n    align-items: baseline;\n  }\n\n  .align-items-sm-stretch {\n    align-items: stretch;\n  }\n}\n\n@media (min-width: 768px) {\n\n  .flex-md-row {\n    flex-direction: row;\n  }\n\n  .flex-md-row-reverse {\n    flex-direction: row-reverse;\n  }\n\n  .flex-md-column {\n    flex-direction: column;\n  }\n\n  .flex-md-column-reverse {\n    flex-direction: column-reverse;\n  }\n\n  .flex-md-wrap {\n    flex-wrap: wrap;\n  }\n\n  .flex-md-nowrap {\n    flex-wrap: nowrap;\n  }\n\n  .justify-content-md-start {\n    justify-content: flex-start;\n  }\n\n  .justify-content-md-end {\n    justify-content: flex-end;\n  }\n\n  .justify-content-md-center {\n    justify-content: center;\n  }\n\n  .justify-content-md-between {\n    justify-content: space-between;\n  }\n\n  .justify-content-md-around {\n    justify-content: space-around;\n  }\n\n  .align-items-md-start {\n    align-items: flex-start;\n  }\n\n  .align-items-md-end {\n    align-items: flex-end;\n  }\n\n  .align-items-md-center {\n    align-items: center;\n  }\n\n  .align-items-md-baseline {\n    align-items: baseline;\n  }\n\n  .align-items-md-stretch {\n    align-items: stretch;\n  }\n}\n\n@media (min-width: 992px) {\n\n  .flex-lg-row {\n    flex-direction: row;\n  }\n\n  .flex-lg-row-reverse {\n    flex-direction: row-reverse;\n  }\n\n  .flex-lg-column {\n    flex-direction: column;\n  }\n\n  .flex-lg-column-reverse {\n    flex-direction: column-reverse;\n  }\n\n  .flex-lg-wrap {\n    flex-wrap: wrap;\n  }\n\n  .flex-lg-nowrap {\n    flex-wrap: nowrap;\n  }\n\n  .justify-content-lg-start {\n    justify-content: flex-start;\n  }\n\n  .justify-content-lg-end {\n    justify-content: flex-end;\n  }\n\n  .justify-content-lg-center {\n    justify-content: center;\n  }\n\n  .justify-content-lg-between {\n    justify-content: space-between;\n  }\n\n  .justify-content-lg-around {\n    justify-content: space-around;\n  }\n\n  .align-items-lg-start {\n    align-items: flex-start;\n  }\n\n  .align-items-lg-end {\n    align-items: flex-end;\n  }\n\n  .align-items-lg-center {\n    align-items: center;\n  }\n\n  .align-items-lg-baseline {\n    align-items: baseline;\n  }\n\n  .align-items-lg-stretch {\n    align-items: stretch;\n  }\n}\n\n@media (min-width: 1200px) {\n\n  .flex-xl-row {\n    flex-direction: row;\n  }\n\n  .flex-xl-row-reverse {\n    flex-direction: row-reverse;\n  }\n\n  .flex-xl-column {\n    flex-direction: column;\n  }\n\n  .flex-xl-column-reverse {\n    flex-direction: column-reverse;\n  }\n\n  .flex-xl-wrap {\n    flex-wrap: wrap;\n  }\n\n  .flex-xl-nowrap {\n    flex-wrap: nowrap;\n  }\n\n  .justify-content-xl-start {\n    justify-content: flex-start;\n  }\n\n  .justify-content-xl-end {\n    justify-content: flex-end;\n  }\n\n  .justify-content-xl-center {\n    justify-content: center;\n  }\n\n  .justify-content-lg-center {\n    justify-content: center;\n  }\n\n  .justify-content-xl-between {\n    justify-content: space-between;\n  }\n\n  .justify-content-xl-around {\n    justify-content: space-around;\n  }\n\n  .align-items-xl-start {\n    align-items: flex-start;\n  }\n\n  .align-items-xl-end {\n    align-items: flex-end;\n  }\n\n  .align-items-xl-center {\n    align-items: center;\n  }\n\n  .align-items-xl-baseline {\n    align-items: baseline;\n  }\n\n  .align-items-xl-stretch {\n    align-items: stretch;\n  }\n}\n\n.align-content-start {\n  align-content: flex-start;\n}\n\n.align-content-end {\n  align-content: flex-end;\n}\n\n.align-content-center {\n  align-content: center;\n}\n\n.align-content-between {\n  align-content: space-between;\n}\n\n.align-content-around {\n  align-content: space-around;\n}\n\n.align-content-stretch {\n  align-content: stretch;\n}\n\n.align-self-auto {\n  align-self: auto;\n}\n\n.align-self-start {\n  align-self: flex-start;\n}\n\n.align-self-end {\n  align-self: flex-end;\n}\n\n.align-self-center {\n  align-self: center;\n}\n\n.align-self-baseline {\n  align-self: baseline;\n}\n\n.align-self-stretch {\n  align-self: stretch;\n}\n\n/*\n * Spacing utitlities\n\n * Include all margin and padding individual properties\n * for 0, 8px, 16px 24px spacing\n *\n * Index\n * - Margin\n * - Padding\n *\n */\n\n\n/* MARGIN\n -------------------- */\n\n.m-0 {\n  margin: 0;\n}\n\n.m-4 {\n  margin: var(--road-spacing-02);\n}\n\n.m-8 {\n  margin: var(--road-spacing-03);\n}\n\n.m-12 {\n  margin: var(--road-spacing-04);\n}\n\n.m-16 {\n  margin: var(--road-spacing-05);\n}\n\n.m-24 {\n  margin: var(--road-spacing-06);\n}\n\n.m-auto {\n  margin: auto;\n}\n\n/**\n * Margin horizontal\n */\n\n.mx-0 {\n  margin-right: 0;\n  margin-left: 0;\n}\n\n.mx-4 {\n  margin-right: var(--road-spacing-02);\n  margin-left: var(--road-spacing-02);\n}\n\n.mx-8 {\n  margin-right: var(--road-spacing-03);\n  margin-left: var(--road-spacing-03);\n}\n\n.mx-12 {\n  margin-right: var(--road-spacing-04);\n  margin-left: var(--road-spacing-04);\n}\n\n.mx-16 {\n  margin-right: var(--road-spacing-05);\n  margin-left: var(--road-spacing-05);\n}\n\n.mx-24 {\n  margin-right: var(--road-spacing-06);\n  margin-left: var(--road-spacing-06);\n}\n\n.mx-auto {\n  margin-right: auto;\n  margin-left: auto;\n}\n\n/**\n * Margin vertical\n */\n\n.my-0 {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n\n.my-4 {\n  margin-top: var(--road-spacing-02);\n  margin-bottom: var(--road-spacing-02);\n}\n\n.my-8 {\n  margin-top: var(--road-spacing-03);\n  margin-bottom: var(--road-spacing-03);\n}\n\n.my-12 {\n  margin-top: var(--road-spacing-04);\n  margin-bottom: var(--road-spacing-04);\n}\n\n.my-16 {\n  margin-top: var(--road-spacing-05);\n  margin-bottom: var(--road-spacing-05);\n}\n\n.my-24 {\n  margin-top: var(--road-spacing-06);\n  margin-bottom: var(--road-spacing-06);\n}\n\n.my-auto {\n  margin-top: auto;\n  margin-bottom: auto;\n}\n\n/**\n * Margin top\n */\n\n.mt-0 {\n  margin-top: 0;\n}\n\n.mt-4 {\n  margin-top: var(--road-spacing-02);\n}\n\n.mt-8 {\n  margin-top: var(--road-spacing-03);\n}\n\n.mt-12 {\n  margin-top: var(--road-spacing-04);\n}\n\n.mt-16 {\n  margin-top: var(--road-spacing-05);\n}\n\n.mt-24 {\n  margin-top: var(--road-spacing-06);\n}\n\n/**\n * Margin right\n */\n\n.mr-0 {\n  margin-right: 0;\n}\n\n.mr-4 {\n  margin-right: var(--road-spacing-02);\n}\n\n.mr-8 {\n  margin-right: var(--road-spacing-03);\n}\n\n.mr-12 {\n  margin-right: var(--road-spacing-04);\n}\n\n.mr-16 {\n  margin-right: var(--road-spacing-05);\n}\n\n.mr-24 {\n  margin-right: var(--road-spacing-06);\n}\n\n/**\n * Margin bottom\n */\n\n.mb-0 {\n  margin-bottom: 0;\n}\n\n.mb-4 {\n  margin-bottom: var(--road-spacing-02);\n}\n\n.mb-8 {\n  margin-bottom: var(--road-spacing-03);\n}\n\n.mb-12 {\n  margin-bottom: var(--road-spacing-04);\n}\n\n.mb-16 {\n  margin-bottom: var(--road-spacing-05);\n}\n\n.mb-24 {\n  margin-bottom: var(--road-spacing-06);\n}\n\n/**\n * Margin left\n */\n\n.ml-0 {\n  margin-left: 0;\n}\n\n.ml-4 {\n  margin-left: var(--road-spacing-02);\n}\n\n.ml-8 {\n  margin-left: var(--road-spacing-03);\n}\n\n.ml-12 {\n  margin-left: var(--road-spacing-04);\n}\n\n.ml-16 {\n  margin-left: var(--road-spacing-05);\n}\n\n.ml-24 {\n  margin-left: var(--road-spacing-06);\n}\n\n/* PADDING\n -------------------- */\n\n.p-0 {\n  padding: 0;\n}\n\n.p-4 {\n  padding: var(--road-spacing-02);\n}\n\n.p-8 {\n  padding: var(--road-spacing-03);\n}\n\n.p-12 {\n  padding: var(--road-spacing-04);\n}\n\n.p-16 {\n  padding: var(--road-spacing-05);\n}\n\n.p-24 {\n  padding: var(--road-spacing-06);\n}\n\n/**\n * Padding horizontal\n */\n\n.px-0 {\n  padding-right: 0;\n  padding-left: 0;\n}\n\n.px-4 {\n  padding-right: var(--road-spacing-02);\n  padding-left: var(--road-spacing-02);\n}\n\n.px-8 {\n  padding-right: var(--road-spacing-03);\n  padding-left: var(--road-spacing-03);\n}\n\n.px-12 {\n  padding-right: var(--road-spacing-04);\n  padding-left: var(--road-spacing-04);\n}\n\n.px-16 {\n  padding-right: var(--road-spacing-05);\n  padding-left: var(--road-spacing-05);\n}\n\n.px-24 {\n  padding-right: var(--road-spacing-06);\n  padding-left: var(--road-spacing-06);\n}\n\n/**\n * Padding vertical\n */\n\n.py-0 {\n  padding-top: 0;\n  padding-bottom: 0;\n}\n\n.py-4 {\n  padding-top: var(--road-spacing-02);\n  padding-bottom: var(--road-spacing-02);\n}\n\n.py-8 {\n  padding-top: var(--road-spacing-03);\n  padding-bottom: var(--road-spacing-03);\n}\n\n.py-12 {\n  padding-top: var(--road-spacing-04);\n  padding-bottom: var(--road-spacing-04);\n}\n\n.py-16 {\n  padding-top: var(--road-spacing-05);\n  padding-bottom: var(--road-spacing-05);\n}\n\n.py-24 {\n  padding-top: var(--road-spacing-06);\n  padding-bottom: var(--road-spacing-06);\n}\n\n/**\n * Padding top\n */\n\n.pt-0 {\n  padding-top: 0;\n}\n\n.pt-4 {\n  padding-top: var(--road-spacing-02);\n}\n\n.pt-8 {\n  padding-top: var(--road-spacing-03);\n}\n\n.pt-12 {\n  padding-top: var(--road-spacing-04);\n}\n\n.pt-16 {\n  padding-top: var(--road-spacing-05);\n}\n\n.pt-24 {\n  padding-top: var(--road-spacing-06);\n}\n\n/**\n * Padding right\n */\n\n.pr-0 {\n  padding-right: 0;\n}\n\n.pr-4 {\n  padding-right: var(--road-spacing-02);\n}\n\n.pr-8 {\n  padding-right: var(--road-spacing-03);\n}\n\n.pr-12 {\n  padding-right: var(--road-spacing-04);\n}\n\n.pr-16 {\n  padding-right: var(--road-spacing-05);\n}\n\n.pr-24 {\n  padding-right: var(--road-spacing-06);\n}\n\n/**\n * Padding bottom\n */\n\n.pb-0 {\n  padding-bottom: 0;\n}\n\n.pb-4 {\n  padding-bottom: var(--road-spacing-02);\n}\n\n.pb-8 {\n  padding-bottom: var(--road-spacing-03);\n}\n\n.pb-12 {\n  padding-bottom: var(--road-spacing-04);\n}\n\n.pb-16 {\n  padding-bottom: var(--road-spacing-05);\n}\n\n.pb-24 {\n  padding-bottom: var(--road-spacing-06);\n}\n\n/**\n * Padding left\n */\n\n.pl-0 {\n  padding-left: 0;\n}\n\n.pl-4 {\n  padding-left: var(--road-spacing-02);\n}\n\n.pl-8 {\n  padding-left: var(--road-spacing-03);\n}\n\n.pl-12 {\n  padding-left: var(--road-spacing-04);\n}\n\n.pl-16 {\n  padding-left: var(--road-spacing-05);\n}\n\n.pl-24 {\n  padding-left: var(--road-spacing-06);\n}\n\n/**\n * Gap\n */\n\n.gap-0 {\n  gap: 0;\n}\n\n.gap-4 {\n  gap: var(--road-spacing-02);\n}\n\n.gap-8 {\n  gap: var(--road-spacing-03);\n}\n\n.gap-12 {\n  gap: var(--road-spacing-04);\n}\n\n.gap-16 {\n  gap: var(--road-spacing-05);\n}\n\n.gap-24 {\n  gap: var(--road-spacing-06);\n}\n\n@media (min-width: 576px) {\n\n  .m-sm-0 {\n    margin: 0;\n  }\n\n  .m-sm-4 {\n    margin: var(--road-spacing-02);\n  }\n\n  .m-sm-8 {\n    margin: var(--road-spacing-03);\n  }\n\n  .m-sm-12 {\n    margin: var(--road-spacing-04);\n  }\n\n  .m-sm-16 {\n    margin: var(--road-spacing-05);\n  }\n\n  .m-sm-24 {\n    margin: var(--road-spacing-06);\n  }\n\n  .m-sm-auto {\n    margin: auto;\n  }\n\n  .mt-sm-0 {\n    margin-top: 0;\n  }\n\n  .mt-sm-4 {\n    margin-top: var(--road-spacing-02);\n  }\n\n  .mt-sm-8 {\n    margin-top: var(--road-spacing-03);\n  }\n\n  .mt-sm-12 {\n    margin-top: var(--road-spacing-04);\n  }\n\n  .mt-sm-16 {\n    margin-top: var(--road-spacing-05);\n  }\n\n  .mt-sm-24 {\n    margin-top: var(--road-spacing-06);\n  }\n\n  .mr-sm-0 {\n    margin-right: 0;\n  }\n\n  .mr-sm-4 {\n    margin-right: var(--road-spacing-02);\n  }\n\n  .mr-sm-8 {\n    margin-right: var(--road-spacing-03);\n  }\n\n  .mr-sm-12 {\n    margin-right: var(--road-spacing-04);\n  }\n\n  .mr-sm-16 {\n    margin-right: var(--road-spacing-05);\n  }\n\n  .mr-sm-24 {\n    margin-right: var(--road-spacing-06);\n  }\n\n  .mb-sm-0 {\n    margin-bottom: 0;\n  }\n\n  .mb-sm-4 {\n    margin-bottom: var(--road-spacing-02);\n  }\n\n  .mb-sm-8 {\n    margin-bottom: var(--road-spacing-03);\n  }\n\n  .mb-sm-12 {\n    margin-bottom: var(--road-spacing-04);\n  }\n\n  .mb-sm-16 {\n    margin-bottom: var(--road-spacing-05);\n  }\n\n  .mb-sm-24 {\n    margin-bottom: var(--road-spacing-06);\n  }\n\n  .ml-sm-0 {\n    margin-left: 0;\n  }\n\n  .ml-sm-4 {\n    margin-left: var(--road-spacing-02);\n  }\n\n  .ml-sm-8 {\n    margin-left: var(--road-spacing-03);\n  }\n\n  .ml-sm-12 {\n    margin-left: var(--road-spacing-04);\n  }\n\n  .ml-sm-16 {\n    margin-left: var(--road-spacing-05);\n  }\n\n  .ml-sm-24 {\n    margin-left: var(--road-spacing-06);\n  }\n\n  .p-sm-0 {\n    padding: 0;\n  }\n\n  .p-sm-4 {\n    padding: var(--road-spacing-02);\n  }\n\n  .p-sm-8 {\n    padding: var(--road-spacing-03);\n  }\n\n  .p-sm-12 {\n    padding: var(--road-spacing-04);\n  }\n\n  .p-sm-16 {\n    padding: var(--road-spacing-05);\n  }\n\n  .p-sm-24 {\n    padding: var(--road-spacing-06);\n  }\n\n  .px-sm-0 {\n    padding-right: 0;\n    padding-left: 0;\n  }\n\n  .px-sm-4 {\n    padding-right: var(--road-spacing-02);\n    padding-left: var(--road-spacing-02);\n  }\n\n  .px-sm-8 {\n    padding-right: var(--road-spacing-03);\n    padding-left: var(--road-spacing-03);\n  }\n\n  .px-sm-12 {\n    padding-right: var(--road-spacing-04);\n    padding-left: var(--road-spacing-04);\n  }\n\n  .px-sm-16 {\n    padding-right: var(--road-spacing-05);\n    padding-left: var(--road-spacing-05);\n  }\n\n  .px-sm-24 {\n    padding-right: var(--road-spacing-06);\n    padding-left: var(--road-spacing-06);\n  }\n\n  .py-sm-0 {\n    padding-top: 0;\n    padding-bottom: 0;\n  }\n\n  .py-sm-4 {\n    padding-top: var(--road-spacing-02);\n    padding-bottom: var(--road-spacing-02);\n  }\n\n  .py-sm-8 {\n    padding-top: var(--road-spacing-03);\n    padding-bottom: var(--road-spacing-03);\n  }\n\n  .py-sm-12 {\n    padding-top: var(--road-spacing-04);\n    padding-bottom: var(--road-spacing-04);\n  }\n\n  .py-sm-16 {\n    padding-top: var(--road-spacing-05);\n    padding-bottom: var(--road-spacing-05);\n  }\n\n  .py-sm-24 {\n    padding-top: var(--road-spacing-06);\n    padding-bottom: var(--road-spacing-06);\n  }\n\n  .pt-sm-0 {\n    padding-top: 0;\n  }\n\n  .pt-sm-4 {\n    padding-top: var(--road-spacing-02);\n  }\n\n  .pt-sm-8 {\n    padding-top: var(--road-spacing-03);\n  }\n\n  .pt-sm-12 {\n    padding-top: var(--road-spacing-04);\n  }\n\n  .pt-sm-16 {\n    padding-top: var(--road-spacing-05);\n  }\n\n  .pt-sm-24 {\n    padding-top: var(--road-spacing-06);\n  }\n\n  .pr-sm-0 {\n    padding-right: 0;\n  }\n\n  .pr-sm-4 {\n    padding-right: var(--road-spacing-02);\n  }\n\n  .pr-sm-8 {\n    padding-right: var(--road-spacing-03);\n  }\n\n  .pr-sm-12 {\n    padding-right: var(--road-spacing-04);\n  }\n\n  .pr-sm-16 {\n    padding-right: var(--road-spacing-05);\n  }\n\n  .pr-sm-24 {\n    padding-right: var(--road-spacing-06);\n  }\n\n  .pb-sm-0 {\n    padding-bottom: 0;\n  }\n\n  .pb-sm-4 {\n    padding-bottom: var(--road-spacing-02);\n  }\n\n  .pb-sm-8 {\n    padding-bottom: var(--road-spacing-03);\n  }\n\n  .pb-sm-12 {\n    padding-bottom: var(--road-spacing-04);\n  }\n\n  .pb-sm-16 {\n    padding-bottom: var(--road-spacing-05);\n  }\n\n  .pb-sm-24 {\n    padding-bottom: var(--road-spacing-06);\n  }\n\n  .pl-sm-0 {\n    padding-left: 0;\n  }\n\n  .pl-sm-4 {\n    padding-left: var(--road-spacing-02);\n  }\n\n  .pl-sm-8 {\n    padding-left: var(--road-spacing-03);\n  }\n\n  .pl-sm-12 {\n    padding-left: var(--road-spacing-04);\n  }\n\n  .pl-sm-16 {\n    padding-left: var(--road-spacing-05);\n  }\n\n  .pl-sm-24 {\n    padding-left: var(--road-spacing-06);\n  }\n\n  .gap-sm-0 {\n    gap: 0;\n  }\n\n  .gap-sm-4 {\n    gap: var(--road-spacing-02);\n  }\n\n  .gap-sm-8 {\n    gap: var(--road-spacing-03);\n  }\n\n  .gap-sm-12 {\n    gap: var(--road-spacing-04);\n  }\n\n  .gap-sm-16 {\n    gap: var(--road-spacing-05);\n  }\n\n  .gap-sm-24 {\n    gap: var(--road-spacing-06);\n  }\n\n}\n\n@media (min-width: 768px) {\n\n  .m-md-0 {\n    margin: 0;\n  }\n\n  .m-md-4 {\n    margin: var(--road-spacing-02);\n  }\n\n  .m-md-8 {\n    margin: var(--road-spacing-03);\n  }\n\n  .m-md-12 {\n    margin: var(--road-spacing-04);\n  }\n\n  .m-md-16 {\n    margin: var(--road-spacing-05);\n  }\n\n  .m-md-24 {\n    margin: var(--road-spacing-06);\n  }\n\n  .m-md-auto {\n    margin: auto;\n  }\n\n  .mt-md-0 {\n    margin-top: 0;\n  }\n\n  .mt-md-4 {\n    margin-top: var(--road-spacing-02);\n  }\n\n  .mt-md-8 {\n    margin-top: var(--road-spacing-03);\n  }\n\n  .mt-md-12 {\n    margin-top: var(--road-spacing-04);\n  }\n\n  .mt-md-16 {\n    margin-top: var(--road-spacing-05);\n  }\n\n  .mt-md-24 {\n    margin-top: var(--road-spacing-06);\n  }\n\n  .mr-md-0 {\n    margin-right: 0;\n  }\n\n  .mr-md-4 {\n    margin-right: var(--road-spacing-02);\n  }\n\n  .mr-md-8 {\n    margin-right: var(--road-spacing-03);\n  }\n\n  .mr-md-12 {\n    margin-right: var(--road-spacing-04);\n  }\n\n  .mr-md-16 {\n    margin-right: var(--road-spacing-05);\n  }\n\n  .mr-md-24 {\n    margin-right: var(--road-spacing-06);\n  }\n\n  .mb-md-0 {\n    margin-bottom: 0;\n  }\n\n  .mb-md-4 {\n    margin-bottom: var(--road-spacing-02);\n  }\n\n  .mb-md-8 {\n    margin-bottom: var(--road-spacing-03);\n  }\n\n  .mb-md-12 {\n    margin-bottom: var(--road-spacing-04);\n  }\n\n  .mb-md-16 {\n    margin-bottom: var(--road-spacing-05);\n  }\n\n  .mb-md-24 {\n    margin-bottom: var(--road-spacing-06);\n  }\n\n  .ml-md-0 {\n    margin-left: 0;\n  }\n\n  .ml-md-4 {\n    margin-left: var(--road-spacing-02);\n  }\n\n  .ml-md-8 {\n    margin-left: var(--road-spacing-03);\n  }\n\n  .ml-md-12 {\n    margin-left: var(--road-spacing-04);\n  }\n\n  .ml-md-16 {\n    margin-left: var(--road-spacing-05);\n  }\n\n  .ml-md-24 {\n    margin-left: var(--road-spacing-06);\n  }\n\n  .p-md-0 {\n    padding: 0;\n  }\n\n  .p-md-4 {\n    padding: var(--road-spacing-02);\n  }\n\n  .p-md-8 {\n    padding: var(--road-spacing-03);\n  }\n\n  .p-md-12 {\n    padding: var(--road-spacing-04);\n  }\n\n  .p-md-16 {\n    padding: var(--road-spacing-05);\n  }\n\n  .p-md-24 {\n    padding: var(--road-spacing-06);\n  }\n\n  .px-md-0 {\n    padding-right: 0;\n    padding-left: 0;\n  }\n\n  .px-md-4 {\n    padding-right: var(--road-spacing-02);\n    padding-left: var(--road-spacing-02);\n  }\n\n  .px-md-8 {\n    padding-right: var(--road-spacing-03);\n    padding-left: var(--road-spacing-03);\n  }\n\n  .px-md-12 {\n    padding-right: var(--road-spacing-04);\n    padding-left: var(--road-spacing-04);\n  }\n\n  .px-md-16 {\n    padding-right: var(--road-spacing-05);\n    padding-left: var(--road-spacing-05);\n  }\n\n  .px-md-24 {\n    padding-right: var(--road-spacing-06);\n    padding-left: var(--road-spacing-06);\n  }\n\n  .py-md-0 {\n    padding-top: 0;\n    padding-bottom: 0;\n  }\n\n  .py-md-4 {\n    padding-top: var(--road-spacing-02);\n    padding-bottom: var(--road-spacing-02);\n  }\n\n  .py-md-8 {\n    padding-top: var(--road-spacing-03);\n    padding-bottom: var(--road-spacing-03);\n  }\n\n  .py-md-12 {\n    padding-top: var(--road-spacing-04);\n    padding-bottom: var(--road-spacing-04);\n  }\n\n  .py-md-16 {\n    padding-top: var(--road-spacing-05);\n    padding-bottom: var(--road-spacing-05);\n  }\n\n  .py-md-24 {\n    padding-top: var(--road-spacing-06);\n    padding-bottom: var(--road-spacing-06);\n  }\n\n  .pt-md-0 {\n    padding-top: 0;\n  }\n\n  .pt-md-4 {\n    padding-top: var(--road-spacing-02);\n  }\n\n  .pt-md-8 {\n    padding-top: var(--road-spacing-03);\n  }\n\n  .pt-md-12 {\n    padding-top: var(--road-spacing-04);\n  }\n\n  .pt-md-16 {\n    padding-top: var(--road-spacing-05);\n  }\n\n  .pt-md-24 {\n    padding-top: var(--road-spacing-06);\n  }\n\n  .pr-md-0 {\n    padding-right: 0;\n  }\n\n  .pr-md-4 {\n    padding-right: var(--road-spacing-02);\n  }\n\n  .pr-md-8 {\n    padding-right: var(--road-spacing-03);\n  }\n\n  .pr-md-12 {\n    padding-right: var(--road-spacing-04);\n  }\n\n  .pr-md-16 {\n    padding-right: var(--road-spacing-05);\n  }\n\n  .pr-md-24 {\n    padding-right: var(--road-spacing-06);\n  }\n\n  .pb-md-0 {\n    padding-bottom: 0;\n  }\n\n  .pb-md-4 {\n    padding-bottom: var(--road-spacing-02);\n  }\n\n  .pb-md-8 {\n    padding-bottom: var(--road-spacing-03);\n  }\n\n  .pb-md-12 {\n    padding-bottom: var(--road-spacing-04);\n  }\n\n  .pb-md-16 {\n    padding-bottom: var(--road-spacing-05);\n  }\n\n  .pb-md-24 {\n    padding-bottom: var(--road-spacing-06);\n  }\n\n  .pl-md-0 {\n    padding-left: 0;\n  }\n\n  .pl-md-4 {\n    padding-left: var(--road-spacing-02);\n  }\n\n  .pl-md-8 {\n    padding-left: var(--road-spacing-03);\n  }\n\n  .pl-md-12 {\n    padding-left: var(--road-spacing-04);\n  }\n\n  .pl-md-16 {\n    padding-left: var(--road-spacing-05);\n  }\n\n  .pl-md-24 {\n    padding-left: var(--road-spacing-06);\n  }\n\n  .gap-md-0 {\n    gap: 0;\n  }\n\n  .gap-md-4 {\n    gap: var(--road-spacing-02);\n  }\n\n  .gap-md-8 {\n    gap: var(--road-spacing-03);\n  }\n\n  .gap-md-12 {\n    gap: var(--road-spacing-04);\n  }\n\n  .gap-md-16 {\n    gap: var(--road-spacing-05);\n  }\n\n  .gap-md-24 {\n    gap: var(--road-spacing-06);\n  }\n\n}\n\n@media (min-width: 992px) {\n\n  .m-lg-0 {\n    margin: 0;\n  }\n\n  .m-lg-4 {\n    margin: var(--road-spacing-02);\n  }\n\n  .m-lg-8 {\n    margin: var(--road-spacing-03);\n  }\n\n  .m-lg-12 {\n    margin: var(--road-spacing-04);\n  }\n\n  .m-lg-16 {\n    margin: var(--road-spacing-05);\n  }\n\n  .m-lg-24 {\n    margin: var(--road-spacing-06);\n  }\n\n  .m-lg-auto {\n    margin: auto;\n  }\n\n  .mt-lg-0 {\n    margin-top: 0;\n  }\n\n  .mt-lg-4 {\n    margin-top: var(--road-spacing-02);\n  }\n\n  .mt-lg-8 {\n    margin-top: var(--road-spacing-03);\n  }\n\n  .mt-lg-12 {\n    margin-top: var(--road-spacing-04);\n  }\n\n  .mt-lg-16 {\n    margin-top: var(--road-spacing-05);\n  }\n\n  .mt-lg-24 {\n    margin-top: var(--road-spacing-06);\n  }\n\n  .mr-lg-0 {\n    margin-right: 0;\n  }\n\n  .mr-lg-4 {\n    margin-right: var(--road-spacing-02);\n  }\n\n  .mr-lg-8 {\n    margin-right: var(--road-spacing-03);\n  }\n\n  .mr-lg-12 {\n    margin-right: var(--road-spacing-04);\n  }\n\n  .mr-lg-16 {\n    margin-right: var(--road-spacing-05);\n  }\n\n  .mr-lg-24 {\n    margin-right: var(--road-spacing-06);\n  }\n\n  .mb-lg-0 {\n    margin-bottom: 0;\n  }\n\n  .mb-lg-4 {\n    margin-bottom: var(--road-spacing-02);\n  }\n\n  .mb-lg-8 {\n    margin-bottom: var(--road-spacing-03);\n  }\n\n  .mb-lg-12 {\n    margin-bottom: var(--road-spacing-04);\n  }\n\n  .mb-lg-16 {\n    margin-bottom: var(--road-spacing-05);\n  }\n\n  .mb-lg-24 {\n    margin-bottom: var(--road-spacing-06);\n  }\n\n  .ml-lg-0 {\n    margin-left: 0;\n  }\n\n  .ml-lg-4 {\n    margin-left: var(--road-spacing-02);\n  }\n\n  .ml-lg-8 {\n    margin-left: var(--road-spacing-03);\n  }\n\n  .ml-lg-12 {\n    margin-left: var(--road-spacing-04);\n  }\n\n  .ml-lg-16 {\n    margin-left: var(--road-spacing-05);\n  }\n\n  .ml-lg-24 {\n    margin-left: var(--road-spacing-06);\n  }\n\n  .p-lg-0 {\n    padding: 0;\n  }\n\n  .p-lg-4 {\n    padding: var(--road-spacing-02);\n  }\n\n  .p-lg-8 {\n    padding: var(--road-spacing-03);\n  }\n\n  .p-lg-12 {\n    padding: var(--road-spacing-04);\n  }\n\n  .p-lg-16 {\n    padding: var(--road-spacing-05);\n  }\n\n  .p-lg-24 {\n    padding: var(--road-spacing-06);\n  }\n\n  .px-lg-0 {\n    padding-right: 0;\n    padding-left: 0;\n  }\n\n  .px-lg-4 {\n    padding-right: var(--road-spacing-02);\n    padding-left: var(--road-spacing-02);\n  }\n\n  .px-lg-8 {\n    padding-right: var(--road-spacing-03);\n    padding-left: var(--road-spacing-03);\n  }\n\n  .px-lg-12 {\n    padding-right: var(--road-spacing-04);\n    padding-left: var(--road-spacing-04);\n  }\n\n  .px-lg-16 {\n    padding-right: var(--road-spacing-05);\n    padding-left: var(--road-spacing-05);\n  }\n\n  .px-lg-24 {\n    padding-right: var(--road-spacing-06);\n    padding-left: var(--road-spacing-06);\n  }\n\n  .py-lg-0 {\n    padding-top: 0;\n    padding-bottom: 0;\n  }\n\n  .py-lg-4 {\n    padding-top: var(--road-spacing-02);\n    padding-bottom: var(--road-spacing-02);\n  }\n\n  .py-lg-8 {\n    padding-top: var(--road-spacing-03);\n    padding-bottom: var(--road-spacing-03);\n  }\n\n  .py-lg-12 {\n    padding-top: var(--road-spacing-04);\n    padding-bottom: var(--road-spacing-04);\n  }\n\n  .py-lg-16 {\n    padding-top: var(--road-spacing-05);\n    padding-bottom: var(--road-spacing-05);\n  }\n\n  .py-lg-24 {\n    padding-top: var(--road-spacing-06);\n    padding-bottom: var(--road-spacing-06);\n  }\n\n  .pt-lg-0 {\n    padding-top: 0;\n  }\n\n  .pt-lg-4 {\n    padding-top: var(--road-spacing-02);\n  }\n\n  .pt-lg-8 {\n    padding-top: var(--road-spacing-03);\n  }\n\n  .pt-lg-12 {\n    padding-top: var(--road-spacing-04);\n  }\n\n  .pt-lg-16 {\n    padding-top: var(--road-spacing-05);\n  }\n\n  .pt-lg-24 {\n    padding-top: var(--road-spacing-06);\n  }\n\n  .pr-lg-0 {\n    padding-right: 0;\n  }\n\n  .pr-lg-4 {\n    padding-right: var(--road-spacing-02);\n  }\n\n  .pr-lg-8 {\n    padding-right: var(--road-spacing-03);\n  }\n\n  .pr-lg-12 {\n    padding-right: var(--road-spacing-04);\n  }\n\n  .pr-lg-16 {\n    padding-right: var(--road-spacing-05);\n  }\n\n  .pr-lg-24 {\n    padding-right: var(--road-spacing-06);\n  }\n\n  .pb-lg-0 {\n    padding-bottom: 0;\n  }\n\n  .pb-lg-4 {\n    padding-bottom: var(--road-spacing-02);\n  }\n\n  .pb-lg-8 {\n    padding-bottom: var(--road-spacing-03);\n  }\n\n  .pb-lg-12 {\n    padding-bottom: var(--road-spacing-04);\n  }\n\n  .pb-lg-16 {\n    padding-bottom: var(--road-spacing-05);\n  }\n\n  .pb-lg-24 {\n    padding-bottom: var(--road-spacing-06);\n  }\n\n  .pl-lg-0 {\n    padding-left: 0;\n  }\n\n  .pl-lg-4 {\n    padding-left: var(--road-spacing-02);\n  }\n\n  .pl-lg-8 {\n    padding-left: var(--road-spacing-03);\n  }\n\n  .pl-lg-12 {\n    padding-left: var(--road-spacing-04);\n  }\n\n  .pl-lg-16 {\n    padding-left: var(--road-spacing-05);\n  }\n\n  .pl-lg-24 {\n    padding-left: var(--road-spacing-06);\n  }\n\n  .gap-lg-0 {\n    gap: 0;\n  }\n\n  .gap-lg-4 {\n    gap: var(--road-spacing-02);\n  }\n\n  .gap-lg-8 {\n    gap: var(--road-spacing-03);\n  }\n\n  .gap-lg-12 {\n    gap: var(--road-spacing-04);\n  }\n\n  .gap-lg-16 {\n    gap: var(--road-spacing-05);\n  }\n\n  .gap-lg-24 {\n    gap: var(--road-spacing-06);\n  }\n\n}\n\n@media (min-width: 1200px) {\n\n  .m-xl-0 {\n    margin: 0;\n  }\n\n  .m-xl-4 {\n    margin: var(--road-spacing-02);\n  }\n\n  .m-xl-8 {\n    margin: var(--road-spacing-03);\n  }\n\n  .m-xl-12 {\n    margin: var(--road-spacing-04);\n  }\n\n  .m-xl-16 {\n    margin: var(--road-spacing-05);\n  }\n\n  .m-xl-24 {\n    margin: var(--road-spacing-06);\n  }\n\n  .m-xl-auto {\n    margin: auto;\n  }\n\n  .mt-xl-0 {\n    margin-top: 0;\n  }\n\n  .mt-xl-4 {\n    margin-top: var(--road-spacing-02);\n  }\n\n  .mt-xl-8 {\n    margin-top: var(--road-spacing-03);\n  }\n\n  .mt-xl-12 {\n    margin-top: var(--road-spacing-04);\n  }\n\n  .mt-xl-16 {\n    margin-top: var(--road-spacing-05);\n  }\n\n  .mt-xl-24 {\n    margin-top: var(--road-spacing-06);\n  }\n\n  .mr-xl-0 {\n    margin-right: 0;\n  }\n\n  .mr-xl-4 {\n    margin-right: var(--road-spacing-02);\n  }\n\n  .mr-xl-8 {\n    margin-right: var(--road-spacing-03);\n  }\n\n  .mr-xl-12 {\n    margin-right: var(--road-spacing-04);\n  }\n\n  .mr-xl-16 {\n    margin-right: var(--road-spacing-05);\n  }\n\n  .mr-xl-24 {\n    margin-right: var(--road-spacing-06);\n  }\n\n  .mb-xl-0 {\n    margin-bottom: 0;\n  }\n\n  .mb-xl-4 {\n    margin-bottom: var(--road-spacing-02);\n  }\n\n  .mb-xl-8 {\n    margin-bottom: var(--road-spacing-03);\n  }\n\n  .mb-xl-12 {\n    margin-bottom: var(--road-spacing-04);\n  }\n\n  .mb-xl-16 {\n    margin-bottom: var(--road-spacing-05);\n  }\n\n  .mb-xl-24 {\n    margin-bottom: var(--road-spacing-06);\n  }\n\n  .ml-xl-0 {\n    margin-left: 0;\n  }\n\n  .ml-xl-4 {\n    margin-left: var(--road-spacing-02);\n  }\n\n  .ml-xl-8 {\n    margin-left: var(--road-spacing-03);\n  }\n\n  .ml-xl-12 {\n    margin-left: var(--road-spacing-04);\n  }\n\n  .ml-xl-16 {\n    margin-left: var(--road-spacing-05);\n  }\n\n  .ml-xl-24 {\n    margin-left: var(--road-spacing-06);\n  }\n\n  .p-xl-0 {\n    padding: 0;\n  }\n\n  .p-xl-4 {\n    padding: var(--road-spacing-02);\n  }\n\n  .p-xl-8 {\n    padding: var(--road-spacing-03);\n  }\n\n  .p-xl-12 {\n    padding: var(--road-spacing-04);\n  }\n\n  .p-xl-16 {\n    padding: var(--road-spacing-05);\n  }\n\n  .p-xl-24 {\n    padding: var(--road-spacing-06);\n  }\n\n  .px-xl-0 {\n    padding-right: 0;\n    padding-left: 0;\n  }\n\n  .px-xl-4 {\n    padding-right: var(--road-spacing-02);\n    padding-left: var(--road-spacing-02);\n  }\n\n  .px-xl-8 {\n    padding-right: var(--road-spacing-03);\n    padding-left: var(--road-spacing-03);\n  }\n\n  .px-xl-12 {\n    padding-right: var(--road-spacing-04);\n    padding-left: var(--road-spacing-04);\n  }\n\n  .px-xl-16 {\n    padding-right: var(--road-spacing-05);\n    padding-left: var(--road-spacing-05);\n  }\n\n  .px-xl-24 {\n    padding-right: var(--road-spacing-06);\n    padding-left: var(--road-spacing-06);\n  }\n\n  .py-xl-0 {\n    padding-top: 0;\n    padding-bottom: 0;\n  }\n\n  .py-xl-4 {\n    padding-top: var(--road-spacing-02);\n    padding-bottom: var(--road-spacing-02);\n  }\n\n  .py-xl-8 {\n    padding-top: var(--road-spacing-03);\n    padding-bottom: var(--road-spacing-03);\n  }\n\n  .py-xl-12 {\n    padding-top: var(--road-spacing-04);\n    padding-bottom: var(--road-spacing-04);\n  }\n\n  .py-xl-16 {\n    padding-top: var(--road-spacing-05);\n    padding-bottom: var(--road-spacing-05);\n  }\n\n  .py-xl-24 {\n    padding-top: var(--road-spacing-06);\n    padding-bottom: var(--road-spacing-06);\n  }\n\n  .pt-xl-0 {\n    padding-top: 0;\n  }\n\n  .pt-xl-4 {\n    padding-top: var(--road-spacing-02);\n  }\n\n  .pt-xl-8 {\n    padding-top: var(--road-spacing-03);\n  }\n\n  .pt-xl-12 {\n    padding-top: var(--road-spacing-04);\n  }\n\n  .pt-xl-16 {\n    padding-top: var(--road-spacing-05);\n  }\n\n  .pt-xl-24 {\n    padding-top: var(--road-spacing-06);\n  }\n\n  .pr-xl-0 {\n    padding-right: 0;\n  }\n\n  .pr-xl-4 {\n    padding-right: var(--road-spacing-02);\n  }\n\n  .pr-xl-8 {\n    padding-right: var(--road-spacing-03);\n  }\n\n  .pr-xl-12 {\n    padding-right: var(--road-spacing-04);\n  }\n\n  .pr-xl-16 {\n    padding-right: var(--road-spacing-05);\n  }\n\n  .pr-xl-24 {\n    padding-right: var(--road-spacing-06);\n  }\n\n  .pb-xl-0 {\n    padding-bottom: 0;\n  }\n\n  .pb-xl-4 {\n    padding-bottom: var(--road-spacing-02);\n  }\n\n  .pb-xl-8 {\n    padding-bottom: var(--road-spacing-03);\n  }\n\n  .pb-xl-12 {\n    padding-bottom: var(--road-spacing-04);\n  }\n\n  .pb-xl-16 {\n    padding-bottom: var(--road-spacing-05);\n  }\n\n  .pb-xl-24 {\n    padding-bottom: var(--road-spacing-06);\n  }\n\n  .pl-xl-0 {\n    padding-left: 0;\n  }\n\n  .pl-xl-4 {\n    padding-left: var(--road-spacing-02);\n  }\n\n  .pl-xl-8 {\n    padding-left: var(--road-spacing-03);\n  }\n\n  .pl-xl-12 {\n    padding-left: var(--road-spacing-04);\n  }\n\n  .pl-xl-16 {\n    padding-left: var(--road-spacing-05);\n  }\n\n  .pl-xl-24 {\n    padding-left: var(--road-spacing-06);\n  }\n\n  .gap-xl-0 {\n    gap: 0;\n  }\n\n  .gap-xl-4 {\n    gap: var(--road-spacing-02);\n  }\n\n  .gap-xl-8 {\n    gap: var(--road-spacing-03);\n  }\n\n  .gap-xl-12 {\n    gap: var(--road-spacing-04);\n  }\n\n  .gap-xl-16 {\n    gap: var(--road-spacing-05);\n  }\n\n  .gap-xl-24 {\n    gap: var(--road-spacing-06);\n  }\n\n}\n\n/*\n * Compact\n *\n */\n\n@media (min-width: 1200px) {\n\n  .compact .mr-xl-compact-none {\n    margin-right: 0;\n  }\n\n  .compact .m-auto-xl-compact {\n    margin: auto;\n  }\n}\n\n/*\n * Text utilities\n *\n * Index\n * - Alignement\n * - Transformation\n * - Weight\n * - Style\n * - Truncate\n *\n */\n\n\n/* ALIGNMENT\n -------------------- */\n\n.text-left {\n  text-align: left;\n}\n\n.text-right {\n  text-align: right;\n}\n\n.text-center {\n  text-align: center;\n}\n\n/* TRANSFORMATION\n -------------------- */\n\n.text-lowercase {\n  text-transform: lowercase;\n}\n\n.text-uppercase {\n  text-transform: uppercase;\n}\n\n.text-capitalize {\n  text-transform: capitalize;\n}\n\n/* WEIGHT\n -------------------- */\n\n.font-weight-normal {\n  font-weight: 400;\n}\n\n.font-weight-bold {\n  font-weight: 700;\n}\n\n.font-weight-semibold {\n  font-weight: 600;\n}\n\n.font-weight-black {\n  font-weight: 900;\n}\n\n\n\n/* STYLE\n -------------------- */\n\n.font-italic {\n  font-style: italic;\n}\n\n/* TRUNCATE\n -------------------- */\n\n.text-truncate {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/*\n * Colors utitlities\n *\n * Index\n * - Text colors\n * - Backgriund colors\n * - Icon colors\n *\n */\n\n\n/* TEXT COLORS\n -------------------- */\n\n.text-primary {\n  color: var(--road-primary-10);\n}\n\n.text-secondary {\n  color: var(--road-primary-50);\n}\n\n.text-accent {\n  color: var(--road-secondary-50);\n}\n\n.text-info {\n  color: var(--road-on-info-surface);\n}\n\n.text-success {\n  color: var(--road-on-success-surface);\n}\n\n.text-warning {\n  color: var(--road-on-warning-surface);\n}\n\n.text-danger {\n  color: var(--road-on-danger-surface);\n}\n\n.text-gray {\n  color: var(--road-on-surface-weak);\n}\n\n.text-gray-second {\n  color: var(--road-on-surface-extra-weak);\n}\n\n.text-disabled {\n  color: var(--road-on-surface-disabled);\n}\n\n.text-white {\n  --text: var(--road-on-primary);\n  color: var(--road-on-primary);\n}\n\n/* BACKGROUND COLORS\n -------------------- */\n\n.bg-primary {\n  background-color: var(--road-primary-variant);\n}\n\n.bg-secondary {\n  background-color: var(--road-secondary);\n}\n\n.bg-accent {\n  background-color: var(--road-secondary-50);\n}\n\n.bg-info {\n  background-color: var(--road-info-surface-inverse);\n}\n\n.bg-success {\n  background-color: var(--road-success-surface-inverse);\n}\n\n.bg-warning {\n  background-color: var(--road-warning-surface-inverse);\n}\n\n.bg-danger {\n  background-color: var(--road-danger-surface-inverse);\n}\n\n.bg-rating {\n  background-color: var(--road-rating);\n}\n\n.bg-light {\n  background-color: var(--road-surface-inverse);\n}\n\n.bg-white {\n  background-color: var(--road-surface);\n}\n\n/*\n * Border utilities\n *\n * Index\n * - Additive\n * - Subtractive\n *\n */\n\n\n/* ADDITIVE\n -------------------- */\n\n.border {\n  border: 1px solid var(--road-outline);\n}\n\n.border-left {\n  border-left: 1px solid var(--road-outline);\n}\n\n.border-top {\n  border-top: 1px solid var(--road-outline);\n}\n\n.border-right {\n  border-right: 1px solid var(--road-outline);\n}\n\n.border-bottom {\n  border-bottom: 1px solid var(--road-outline);\n}\n\n/* SUBTRACTIVE\n -------------------- */\n\n/* stylelint-disable -- !important is needed for class how remove borders */\n\n.border-0 {\n  border: 0 !important;\n}\n\n.border-left-0 {\n  border-left: 0 !important;\n}\n\n.border-top-0 {\n  border-top: 0 !important;\n}\n\n.border-right-0 {\n  border-right: 0 !important;\n}\n\n.border-bottom-0 {\n  border-bottom: 0 !important;\n}\n\n/* stylelint-enable */\n\n/*\n * Position utilities\n *\n */\n\n.position-relative {\n  position: relative;\n}\n\n.position-absolute {\n  position: absolute;\n}\n\n.position-fixed {\n  position: fixed;\n}\n\n.position-static {\n  position: static;\n}\n\n.position-sticky {\n  position: sticky;\n}\n\n/*\n * Sizing utilities\n *\n * Index\n * - With\n * - Height\n *\n */\n\n/* WIDTH\n -------------------- */\n\n.w-full {\n  width: 100%;\n}\n\n.w-screen {\n  width: 100vh;\n}\n\n.w-auto {\n  width: auto;\n}\n\n\n/* HEIGHT\n -------------------- */\n\n.h-full {\n  height: 100%;\n}\n\n.h-screen {\n  height: 100vh;\n}\n\n.h-auto {\n  height: auto;\n}\n\n@media (min-width: 1200px) {\n\n  .compact .w-xl-revert-compact {\n    width: revert-layer;\n  }\n}\n\n\n/*\n * Z-index utilities\n *\n */\n\n.z-10 {\n  z-index: 10;\n}\n\n.z-20 {\n  z-index: 20;\n}\n\n.z-30 {\n  z-index: 30;\n}\n\n.z-40 {\n  z-index: 40;\n}\n\n.z-50 {\n  z-index: 50;\n}\n\n/*\n * Overflow utilities\n *\n */\n\n.overflow-auto {\n  overflow: auto;\n}\n\n.overflow-hidden {\n  overflow: hidden;\n}\n\n/*\n * Visibility utilities\n *\n */\n\n.visible {\n  visibility: visible;\n}\n\n.invisible {\n  visibility: hidden;\n}\n\n";
-/*
- Stencil Client Platform v4.35.0 | MIT Licensed | https://stenciljs.com
- */
-var __defProp = Object.defineProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-// src/utils/constants.ts
-var SVG_NS = "http://www.w3.org/2000/svg";
-var HTML_NS = "http://www.w3.org/1999/xhtml";
-var PrimitiveType = /* @__PURE__ */ ((PrimitiveType2) => {
-  PrimitiveType2["Undefined"] = "undefined";
-  PrimitiveType2["Null"] = "null";
-  PrimitiveType2["String"] = "string";
-  PrimitiveType2["Number"] = "number";
-  PrimitiveType2["SpecialNumber"] = "number";
-  PrimitiveType2["Boolean"] = "boolean";
-  PrimitiveType2["BigInt"] = "bigint";
-  return PrimitiveType2;
-})(PrimitiveType || {});
-var NonPrimitiveType = /* @__PURE__ */ ((NonPrimitiveType2) => {
-  NonPrimitiveType2["Array"] = "array";
-  NonPrimitiveType2["Date"] = "date";
-  NonPrimitiveType2["Map"] = "map";
-  NonPrimitiveType2["Object"] = "object";
-  NonPrimitiveType2["RegularExpression"] = "regexp";
-  NonPrimitiveType2["Set"] = "set";
-  NonPrimitiveType2["Channel"] = "channel";
-  NonPrimitiveType2["Symbol"] = "symbol";
-  return NonPrimitiveType2;
-})(NonPrimitiveType || {});
-var TYPE_CONSTANT = "type";
-var VALUE_CONSTANT = "value";
-var SERIALIZED_PREFIX = "serialized:";
-// src/client/client-host-ref.ts
-var getHostRef = (ref) => {
-  if (ref.__stencil__getHostRef) {
-    return ref.__stencil__getHostRef();
-  }
-  return void 0;
-};
-var registerInstance = (lazyInstance, hostRef) => {
-  lazyInstance.__stencil__getHostRef = () => hostRef;
-  hostRef.$lazyInstance$ = lazyInstance;
-};
-var registerHost = (hostElement, cmpMeta) => {
-  const hostRef = {
-    $flags$: 0,
-    $hostElement$: hostElement,
-    $cmpMeta$: cmpMeta,
-    $instanceValues$: /* @__PURE__ */ new Map()
-  };
-  {
-    hostRef.$onInstancePromise$ = new Promise((r) => hostRef.$onInstanceResolve$ = r);
-  }
-  {
-    hostRef.$onReadyPromise$ = new Promise((r) => hostRef.$onReadyResolve$ = r);
-    hostElement["s-p"] = [];
-    hostElement["s-rc"] = [];
-  }
-  const ref = hostRef;
-  hostElement.__stencil__getHostRef = () => ref;
-  return ref;
-};
-var isMemberInElement = (elm, memberName) => memberName in elm;
-var consoleError = (e, el) => (0, console.error)(e, el);
-// src/client/client-load-module.ts
-var cmpModules = /* @__PURE__ */ new Map();
-var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
-  const exportName = cmpMeta.$tagName$.replace(/-/g, "_");
-  const bundleId = cmpMeta.$lazyBundleId$;
-  if (!bundleId) {
-    return void 0;
-  }
-  const module = cmpModules.get(bundleId) ;
-  if (module) {
-    return module[exportName];
-  }
-        if (!hmrVersionId || !BUILD.hotModuleReplacement) {
-          const processMod = importedModule => {
-              cmpModules.set(bundleId, importedModule);
-              return importedModule[exportName];
-          }
-          switch(bundleId) {
-                case 'road-accordion':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './road-accordion.entry.js').then(processMod, consoleError);
-                case 'road-alert':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './road-alert.entry.js').then(processMod, consoleError);
-                case 'road-area-code':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './road-area-code.entry.js').then(processMod, consoleError);
-                case 'road-aspect-ratio':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './road-aspect-ratio.entry.js').then(processMod, consoleError);
-                case 'road-autocomplete':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './road-autocomplete.entry.js').then(processMod, consoleError);
-                case 'road-banner':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './road-banner.entry.js').then(processMod, consoleError);
-                case 'road-button-floating':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './road-button-floating.entry.js').then(processMod, consoleError);
-                case 'road-carousel-item':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './road-carousel-item.entry.js').then(processMod, consoleError);
-                case 'road-checkbox':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './road-checkbox.entry.js').then(processMod, consoleError);
-                case 'road-chip':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './road-chip.entry.js').then(processMod, consoleError);
-                case 'road-collapse':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './road-collapse.entry.js').then(processMod, consoleError);
-                case 'road-content-card':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './road-content-card.entry.js').then(processMod, consoleError);
-                case 'road-dialog':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './road-dialog.entry.js').then(processMod, consoleError);
-                case 'road-dropdown':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './road-dropdown.entry.js').then(processMod, consoleError);
-                case 'road-duration':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './road-duration.entry.js').then(processMod, consoleError);
-                case 'road-flap':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './road-flap.entry.js').then(processMod, consoleError);
-                case 'road-global-navigation':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './road-global-navigation.entry.js').then(processMod, consoleError);
-                case 'road-global-navigation-v2':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './road-global-navigation-v2.entry.js').then(processMod, consoleError);
-                case 'road-modal':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './road-modal.entry.js').then(processMod, consoleError);
-                case 'road-navbar':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './road-navbar.entry.js').then(processMod, consoleError);
-                case 'road-navbar-item':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './road-navbar-item.entry.js').then(processMod, consoleError);
-                case 'road-navbar-item-v2':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './road-navbar-item-v2.entry.js').then(processMod, consoleError);
-                case 'road-navbar-v2':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './road-navbar-v2.entry.js').then(processMod, consoleError);
-                case 'road-plate-number':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './road-plate-number.entry.js').then(processMod, consoleError);
-                case 'road-profil-dropdown':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './road-profil-dropdown.entry.js').then(processMod, consoleError);
-                case 'road-progress':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './road-progress.entry.js').then(processMod, consoleError);
-                case 'road-progress-indicator-horizontal':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './road-progress-indicator-horizontal.entry.js').then(processMod, consoleError);
-                case 'road-progress-indicator-vertical':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './road-progress-indicator-vertical.entry.js').then(processMod, consoleError);
-                case 'road-progress-indicator-vertical-item':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './road-progress-indicator-vertical-item.entry.js').then(processMod, consoleError);
-                case 'road-progress-tracker':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './road-progress-tracker.entry.js').then(processMod, consoleError);
-                case 'road-progress-tracker-item':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './road-progress-tracker-item.entry.js').then(processMod, consoleError);
-                case 'road-radio':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './road-radio.entry.js').then(processMod, consoleError);
-                case 'road-radio-card':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './road-radio-card.entry.js').then(processMod, consoleError);
-                case 'road-radio-group':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './road-radio-group.entry.js').then(processMod, consoleError);
-                case 'road-range':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './road-range.entry.js').then(processMod, consoleError);
-                case 'road-rating':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './road-rating.entry.js').then(processMod, consoleError);
-                case 'road-segmented-button':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './road-segmented-button.entry.js').then(processMod, consoleError);
-                case 'road-segmented-button-bar':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './road-segmented-button-bar.entry.js').then(processMod, consoleError);
-                case 'road-segmented-buttons':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './road-segmented-buttons.entry.js').then(processMod, consoleError);
-                case 'road-select':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './road-select.entry.js').then(processMod, consoleError);
-                case 'road-skeleton':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './road-skeleton.entry.js').then(processMod, consoleError);
-                case 'road-spinner':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './road-spinner.entry.js').then(processMod, consoleError);
-                case 'road-switch':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './road-switch.entry.js').then(processMod, consoleError);
-                case 'road-tab':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './road-tab.entry.js').then(processMod, consoleError);
-                case 'road-tab-bar':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './road-tab-bar.entry.js').then(processMod, consoleError);
-                case 'road-tab-button':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './road-tab-button.entry.js').then(processMod, consoleError);
-                case 'road-table':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './road-table.entry.js').then(processMod, consoleError);
-                case 'road-tabs':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './road-tabs.entry.js').then(processMod, consoleError);
-                case 'road-tag':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './road-tag.entry.js').then(processMod, consoleError);
-                case 'road-text':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './road-text.entry.js').then(processMod, consoleError);
-                case 'road-textarea':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './road-textarea.entry.js').then(processMod, consoleError);
-                case 'road-toast':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './road-toast.entry.js').then(processMod, consoleError);
-                case 'road-toggle':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './road-toggle.entry.js').then(processMod, consoleError);
-                case 'road-toolbar-title':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './road-toolbar-title.entry.js').then(processMod, consoleError);
-                case 'road-toolbar-title-page':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './road-toolbar-title-page.entry.js').then(processMod, consoleError);
-                case 'road-toolbar-v2':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './road-toolbar-v2.entry.js').then(processMod, consoleError);
-                case 'road-tooltip':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './road-tooltip.entry.js').then(processMod, consoleError);
-                case 'road-avatar':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './road-avatar.entry.js').then(processMod, consoleError);
-                case 'road-card':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './road-card.entry.js').then(processMod, consoleError);
-                case 'road-img':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './road-img.entry.js').then(processMod, consoleError);
-                case 'road-select-filter':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './road-select-filter.entry.js').then(processMod, consoleError);
-                case 'road-asset':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './road-asset.entry.js').then(processMod, consoleError);
-                case 'road-illustration':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './road-illustration.entry.js').then(processMod, consoleError);
-                case 'road-phone-number-input':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './road-phone-number-input.entry.js').then(processMod, consoleError);
-                case 'road-badge_14':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './road-badge_14.entry.js').then(processMod, consoleError);
-                case 'road-carousel':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './road-carousel.entry.js').then(processMod, consoleError);
-          }
-      }
-  return import(
-    /* @vite-ignore */
-    /* webpackInclude: /\.entry\.js$/ */
-    /* webpackExclude: /\.system\.entry\.js$/ */
-    /* webpackMode: "lazy" */
-    `./${bundleId}.entry.js${""}`
-  ).then(
-    (importedModule) => {
-      {
-        cmpModules.set(bundleId, importedModule);
-      }
-      return importedModule[exportName];
-    },
-    (e) => {
-      consoleError(e, hostRef.$hostElement$);
-    }
-  );
-};
-// src/client/client-style.ts
-var styles = /* @__PURE__ */ new Map();
-// src/runtime/runtime-constants.ts
-var CONTENT_REF_ID = "r";
-var ORG_LOCATION_ID = "o";
-var SLOT_NODE_ID = "s";
-var TEXT_NODE_ID = "t";
-var COMMENT_NODE_ID = "c";
-var HYDRATE_ID = "s-id";
-var HYDRATED_STYLE_ID = "sty-id";
-var HYDRATE_CHILD_ID = "c-id";
-var HYDRATED_CSS = "{visibility:hidden}.hydrated{visibility:inherit}";
-var SLOT_FB_CSS = "slot-fb{display:contents}slot-fb[hidden]{display:none}";
-var XLINK_NS = "http://www.w3.org/1999/xlink";
-var win = typeof window !== "undefined" ? window : {};
-var plt = {
-  $flags$: 0,
-  $resourcesUrl$: "",
-  jmp: (h2) => h2(),
-  raf: (h2) => requestAnimationFrame(h2),
-  ael: (el, eventName, listener, opts) => el.addEventListener(eventName, listener, opts),
-  rel: (el, eventName, listener, opts) => el.removeEventListener(eventName, listener, opts),
-  ce: (eventName, opts) => new CustomEvent(eventName, opts)
-};
-var supportsListenerOptions = /* @__PURE__ */ (() => {
-  var _a;
-  let supportsListenerOptions2 = false;
-  try {
-    (_a = win.document) == null ? void 0 : _a.addEventListener(
-      "e",
-      null,
-      Object.defineProperty({}, "passive", {
-        get() {
-          supportsListenerOptions2 = true;
-        }
-      })
-    );
-  } catch (e) {
-  }
-  return supportsListenerOptions2;
-})();
-var promiseResolve = (v) => Promise.resolve(v);
-var supportsConstructableStylesheets = /* @__PURE__ */ (() => {
-  try {
-    new CSSStyleSheet();
-    return typeof new CSSStyleSheet().replaceSync === "function";
-  } catch (e) {
-  }
-  return false;
-})() ;
-var queuePending = false;
-var queueDomReads = [];
-var queueDomWrites = [];
-var queueTask = (queue, write) => (cb) => {
-  queue.push(cb);
-  if (!queuePending) {
-    queuePending = true;
-    if (write && plt.$flags$ & 4 /* queueSync */) {
-      nextTick(flush);
-    } else {
-      plt.raf(flush);
-    }
-  }
-};
-var consume = (queue) => {
-  for (let i2 = 0; i2 < queue.length; i2++) {
-    try {
-      queue[i2](performance.now());
-    } catch (e) {
-      consoleError(e);
-    }
-  }
-  queue.length = 0;
-};
-var flush = () => {
-  consume(queueDomReads);
-  {
-    consume(queueDomWrites);
-    if (queuePending = queueDomReads.length > 0) {
-      plt.raf(flush);
-    }
-  }
-};
-var nextTick = (cb) => promiseResolve().then(cb);
-var writeTask = /* @__PURE__ */ queueTask(queueDomWrites, true);
-// src/runtime/asset-path.ts
-var getAssetPath = (path) => {
-  const assetUrl = new URL(path, plt.$resourcesUrl$);
-  return assetUrl.origin !== win.location.origin ? assetUrl.href : assetUrl.pathname;
-};
-// src/utils/helpers.ts
-var isDef = (v) => v != null && v !== void 0;
-var isComplexType = (o) => {
-  o = typeof o;
-  return o === "object" || o === "function";
-};
-// src/utils/query-nonce-meta-tag-content.ts
-function queryNonceMetaTagContent(doc) {
-  var _a, _b, _c;
-  return (_c = (_b = (_a = doc.head) == null ? void 0 : _a.querySelector('meta[name="csp-nonce"]')) == null ? void 0 : _b.getAttribute("content")) != null ? _c : void 0;
-}
-// src/utils/regular-expression.ts
-var escapeRegExpSpecialCharacters = (text) => {
-  return text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-};
-// src/utils/remote-value.ts
-var RemoteValue = class _RemoteValue {
-  /**
-   * Deserializes a LocalValue serialized object back to its original JavaScript representation
-   *
-   * @param serialized The serialized LocalValue object
-   * @returns The original JavaScript value/object
-   */
-  static fromLocalValue(serialized) {
-    const type = serialized[TYPE_CONSTANT];
-    const value = VALUE_CONSTANT in serialized ? serialized[VALUE_CONSTANT] : void 0;
-    switch (type) {
-      case "string" /* String */:
-        return value;
-      case "boolean" /* Boolean */:
-        return value;
-      case "bigint" /* BigInt */:
-        return BigInt(value);
-      case "undefined" /* Undefined */:
-        return void 0;
-      case "null" /* Null */:
-        return null;
-      case "number" /* Number */:
-        if (value === "NaN") return NaN;
-        if (value === "-0") return -0;
-        if (value === "Infinity") return Infinity;
-        if (value === "-Infinity") return -Infinity;
-        return value;
-      case "array" /* Array */:
-        return value.map((item) => _RemoteValue.fromLocalValue(item));
-      case "date" /* Date */:
-        return new Date(value);
-      case "map" /* Map */:
-        const map2 = /* @__PURE__ */ new Map();
-        for (const [key, val] of value) {
-          const deserializedKey = typeof key === "object" && key !== null ? _RemoteValue.fromLocalValue(key) : key;
-          const deserializedValue = _RemoteValue.fromLocalValue(val);
-          map2.set(deserializedKey, deserializedValue);
-        }
-        return map2;
-      case "object" /* Object */:
-        const obj = {};
-        for (const [key, val] of value) {
-          obj[key] = _RemoteValue.fromLocalValue(val);
-        }
-        return obj;
-      case "regexp" /* RegularExpression */:
-        const { pattern, flags } = value;
-        return new RegExp(pattern, flags);
-      case "set" /* Set */:
-        const set = /* @__PURE__ */ new Set();
-        for (const item of value) {
-          set.add(_RemoteValue.fromLocalValue(item));
-        }
-        return set;
-      case "symbol" /* Symbol */:
-        return Symbol(value);
-      default:
-        throw new Error(`Unsupported type: ${type}`);
-    }
-  }
-  /**
-   * Utility method to deserialize multiple LocalValues at once
-   *
-   * @param serializedValues Array of serialized LocalValue objects
-   * @returns Array of deserialized JavaScript values
-   */
-  static fromLocalValueArray(serializedValues) {
-    return serializedValues.map((value) => _RemoteValue.fromLocalValue(value));
-  }
-  /**
-   * Verifies if the given object matches the structure of a serialized LocalValue
-   *
-   * @param obj Object to verify
-   * @returns boolean indicating if the object has LocalValue structure
-   */
-  static isLocalValueObject(obj) {
-    if (typeof obj !== "object" || obj === null) {
-      return false;
-    }
-    if (!obj.hasOwnProperty(TYPE_CONSTANT)) {
-      return false;
-    }
-    const type = obj[TYPE_CONSTANT];
-    const hasTypeProperty = Object.values({ ...PrimitiveType, ...NonPrimitiveType }).includes(type);
-    if (!hasTypeProperty) {
-      return false;
-    }
-    if (type !== "null" /* Null */ && type !== "undefined" /* Undefined */) {
-      return obj.hasOwnProperty(VALUE_CONSTANT);
-    }
-    return true;
-  }
-};
-// src/utils/result.ts
-var result_exports = {};
-__export(result_exports, {
-  err: () => err,
-  map: () => map,
-  ok: () => ok,
-  unwrap: () => unwrap,
-  unwrapErr: () => unwrapErr
-});
-var ok = (value) => ({
-  isOk: true,
-  isErr: false,
-  value
-});
-var err = (value) => ({
-  isOk: false,
-  isErr: true,
-  value
-});
-function map(result, fn) {
-  if (result.isOk) {
-    const val = fn(result.value);
-    if (val instanceof Promise) {
-      return val.then((newVal) => ok(newVal));
-    } else {
-      return ok(val);
-    }
-  }
-  if (result.isErr) {
-    const value = result.value;
-    return err(value);
-  }
-  throw "should never get here";
-}
-var unwrap = (result) => {
-  if (result.isOk) {
-    return result.value;
-  } else {
-    throw result.value;
-  }
-};
-var unwrapErr = (result) => {
-  if (result.isErr) {
-    return result.value;
-  } else {
-    throw result.value;
-  }
-};
-// src/utils/serialize.ts
-function deserializeProperty(value) {
-  if (typeof value !== "string" || !value.startsWith(SERIALIZED_PREFIX)) {
-    return value;
-  }
-  return RemoteValue.fromLocalValue(JSON.parse(atob(value.slice(SERIALIZED_PREFIX.length))));
-}
-function createShadowRoot(cmpMeta) {
-  const shadowRoot = this.attachShadow({ mode: "open" });
-  if (supportsConstructableStylesheets) {
-    const sheet = new CSSStyleSheet();
-    sheet.replaceSync(globalStyles);
-    shadowRoot.adoptedStyleSheets.push(sheet);
-  }
-}
-var updateFallbackSlotVisibility = (elm) => {
-  const childNodes = internalCall(elm, "childNodes");
-  if (elm.tagName && elm.tagName.includes("-") && elm["s-cr"] && elm.tagName !== "SLOT-FB") {
-    getHostSlotNodes(childNodes, elm.tagName).forEach((slotNode) => {
-      if (slotNode.nodeType === 1 /* ElementNode */ && slotNode.tagName === "SLOT-FB") {
-        if (getSlotChildSiblings(slotNode, getSlotName(slotNode), false).length) {
-          slotNode.hidden = true;
-        } else {
-          slotNode.hidden = false;
-        }
-      }
-    });
-  }
-  let i2 = 0;
-  for (i2 = 0; i2 < childNodes.length; i2++) {
-    const childNode = childNodes[i2];
-    if (childNode.nodeType === 1 /* ElementNode */ && internalCall(childNode, "childNodes").length) {
-      updateFallbackSlotVisibility(childNode);
-    }
-  }
-};
-var getSlottedChildNodes = (childNodes) => {
-  const result = [];
-  for (let i2 = 0; i2 < childNodes.length; i2++) {
-    const slottedNode = childNodes[i2]["s-nr"] || void 0;
-    if (slottedNode && slottedNode.isConnected) {
-      result.push(slottedNode);
-    }
-  }
-  return result;
-};
-function getHostSlotNodes(childNodes, hostName, slotName) {
-  let i2 = 0;
-  let slottedNodes = [];
-  let childNode;
-  for (; i2 < childNodes.length; i2++) {
-    childNode = childNodes[i2];
-    if (childNode["s-sr"] && (!hostName || childNode["s-hn"] === hostName) && (slotName === void 0)) {
-      slottedNodes.push(childNode);
-    }
-    slottedNodes = [...slottedNodes, ...getHostSlotNodes(childNode.childNodes, hostName, slotName)];
-  }
-  return slottedNodes;
-}
-var getSlotChildSiblings = (slot, slotName, includeSlot = true) => {
-  const childNodes = [];
-  if (includeSlot && slot["s-sr"] || !slot["s-sr"]) childNodes.push(slot);
-  let node = slot;
-  while (node = node.nextSibling) {
-    if (getSlotName(node) === slotName && (includeSlot || !node["s-sr"])) childNodes.push(node);
-  }
-  return childNodes;
-};
-var isNodeLocatedInSlot = (nodeToRelocate, slotName) => {
-  if (nodeToRelocate.nodeType === 1 /* ElementNode */) {
-    if (nodeToRelocate.getAttribute("slot") === null && slotName === "") {
-      return true;
-    }
-    if (nodeToRelocate.getAttribute("slot") === slotName) {
-      return true;
-    }
-    return false;
-  }
-  if (nodeToRelocate["s-sn"] === slotName) {
-    return true;
-  }
-  return slotName === "";
-};
-var addSlotRelocateNode = (newChild, slotNode, prepend, position) => {
-  if (newChild["s-ol"] && newChild["s-ol"].isConnected) {
-    return;
-  }
-  const slottedNodeLocation = document.createTextNode("");
-  slottedNodeLocation["s-nr"] = newChild;
-  if (!slotNode["s-cr"] || !slotNode["s-cr"].parentNode) return;
-  const parent = slotNode["s-cr"].parentNode;
-  const appendMethod = internalCall(parent, "appendChild");
-  if (typeof position !== "undefined") {
-    slottedNodeLocation["s-oo"] = position;
-    const childNodes = internalCall(parent, "childNodes");
-    const slotRelocateNodes = [slottedNodeLocation];
-    childNodes.forEach((n) => {
-      if (n["s-nr"]) slotRelocateNodes.push(n);
-    });
-    slotRelocateNodes.sort((a, b) => {
-      if (!a["s-oo"] || a["s-oo"] < (b["s-oo"] || 0)) return -1;
-      else if (!b["s-oo"] || b["s-oo"] < a["s-oo"]) return 1;
-      return 0;
-    });
-    slotRelocateNodes.forEach((n) => appendMethod.call(parent, n));
-  } else {
-    appendMethod.call(parent, slottedNodeLocation);
-  }
-  newChild["s-ol"] = slottedNodeLocation;
-  newChild["s-sh"] = slotNode["s-hn"];
-};
-var getSlotName = (node) => typeof node["s-sn"] === "string" ? node["s-sn"] : node.nodeType === 1 && node.getAttribute("slot") || void 0;
-function patchSlotNode(node) {
-  if (node.assignedElements || node.assignedNodes || !node["s-sr"]) return;
-  const assignedFactory = (elementsOnly) => (function(opts) {
-    const toReturn = [];
-    const slotName = this["s-sn"];
-    if (opts == null ? void 0 : opts.flatten) {
-      console.error(`
-          Flattening is not supported for Stencil non-shadow slots.
-          You can use \`.childNodes\` to nested slot fallback content.
-          If you have a particular use case, please open an issue on the Stencil repo.
-        `);
-    }
-    const parent = this["s-cr"].parentElement;
-    const slottedNodes = parent.__childNodes ? parent.childNodes : getSlottedChildNodes(parent.childNodes);
-    slottedNodes.forEach((n) => {
-      if (slotName === getSlotName(n)) {
-        toReturn.push(n);
-      }
-    });
-    if (elementsOnly) {
-      return toReturn.filter((n) => n.nodeType === 1 /* ElementNode */);
-    }
-    return toReturn;
-  }).bind(node);
-  node.assignedElements = assignedFactory(true);
-  node.assignedNodes = assignedFactory(false);
-}
-function internalCall(node, method) {
-  if ("__" + method in node) {
-    const toReturn = node["__" + method];
-    if (typeof toReturn !== "function") return toReturn;
-    return toReturn.bind(node);
-  } else {
-    if (typeof node[method] !== "function") return node[method];
-    return node[method].bind(node);
-  }
-}
-var createTime = (fnName, tagName = "") => {
-  {
-    return () => {
-      return;
-    };
-  }
-};
-var uniqueTime = (key, measureText) => {
-  {
-    return () => {
-      return;
-    };
-  }
-};
-var h = (nodeName, vnodeData, ...children) => {
-  let child = null;
-  let key = null;
-  let slotName = null;
-  let simple = false;
-  let lastSimple = false;
-  const vNodeChildren = [];
-  const walk = (c) => {
-    for (let i2 = 0; i2 < c.length; i2++) {
-      child = c[i2];
-      if (Array.isArray(child)) {
-        walk(child);
-      } else if (child != null && typeof child !== "boolean") {
-        if (simple = typeof nodeName !== "function" && !isComplexType(child)) {
-          child = String(child);
-        }
-        if (simple && lastSimple) {
-          vNodeChildren[vNodeChildren.length - 1].$text$ += child;
-        } else {
-          vNodeChildren.push(simple ? newVNode(null, child) : child);
-        }
-        lastSimple = simple;
-      }
-    }
-  };
-  walk(children);
-  if (vnodeData) {
-    if (vnodeData.key) {
-      key = vnodeData.key;
-    }
-    if (vnodeData.name) {
-      slotName = vnodeData.name;
-    }
-    {
-      const classData = vnodeData.className || vnodeData.class;
-      if (classData) {
-        vnodeData.class = typeof classData !== "object" ? classData : Object.keys(classData).filter((k) => classData[k]).join(" ");
-      }
-    }
-  }
-  if (typeof nodeName === "function") {
-    return nodeName(
-      vnodeData === null ? {} : vnodeData,
-      vNodeChildren,
-      vdomFnUtils
-    );
-  }
-  const vnode = newVNode(nodeName, null);
-  vnode.$attrs$ = vnodeData;
-  if (vNodeChildren.length > 0) {
-    vnode.$children$ = vNodeChildren;
-  }
-  {
-    vnode.$key$ = key;
-  }
-  {
-    vnode.$name$ = slotName;
-  }
-  return vnode;
-};
-var newVNode = (tag, text) => {
-  const vnode = {
-    $flags$: 0,
-    $tag$: tag,
-    $text$: text,
-    $elm$: null,
-    $children$: null
-  };
-  {
-    vnode.$attrs$ = null;
-  }
-  {
-    vnode.$key$ = null;
-  }
-  {
-    vnode.$name$ = null;
-  }
-  return vnode;
-};
-var Host = {};
-var isHost = (node) => node && node.$tag$ === Host;
-var vdomFnUtils = {
-  forEach: (children, cb) => children.map(convertToPublic).forEach(cb),
-  map: (children, cb) => children.map(convertToPublic).map(cb).map(convertToPrivate)
-};
-var convertToPublic = (node) => ({
-  vattrs: node.$attrs$,
-  vchildren: node.$children$,
-  vkey: node.$key$,
-  vname: node.$name$,
-  vtag: node.$tag$,
-  vtext: node.$text$
-});
-var convertToPrivate = (node) => {
-  if (typeof node.vtag === "function") {
-    const vnodeData = { ...node.vattrs };
-    if (node.vkey) {
-      vnodeData.key = node.vkey;
-    }
-    if (node.vname) {
-      vnodeData.name = node.vname;
-    }
-    return h(node.vtag, vnodeData, ...node.vchildren || []);
-  }
-  const vnode = newVNode(node.vtag, node.vtext);
-  vnode.$attrs$ = node.vattrs;
-  vnode.$children$ = node.vchildren;
-  vnode.$key$ = node.vkey;
-  vnode.$name$ = node.vname;
-  return vnode;
-};
-// src/runtime/client-hydrate.ts
-var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
-  var _a;
-  const endHydrate = createTime("hydrateClient", tagName);
-  const shadowRoot = hostElm.shadowRoot;
-  const childRenderNodes = [];
-  const slotNodes = [];
-  const slottedNodes = [];
-  const shadowRootNodes = shadowRoot ? [] : null;
-  const vnode = newVNode(tagName, null);
-  vnode.$elm$ = hostElm;
-  const members = Object.entries(((_a = hostRef.$cmpMeta$) == null ? void 0 : _a.$members$) || {});
-  members.forEach(([memberName, [memberFlags, metaAttributeName]]) => {
-    var _b;
-    if (!(memberFlags & 31 /* Prop */)) {
-      return;
-    }
-    const attributeName = metaAttributeName || memberName;
-    const attrVal = hostElm.getAttribute(attributeName);
-    if (attrVal !== null) {
-      const attrPropVal = parsePropertyValue(
-        attrVal,
-        memberFlags);
-      (_b = hostRef == null ? void 0 : hostRef.$instanceValues$) == null ? void 0 : _b.set(memberName, attrPropVal);
-    }
-  });
-  let scopeId2;
-  {
-    const cmpMeta = hostRef.$cmpMeta$;
-    if (cmpMeta && cmpMeta.$flags$ & 10 /* needsScopedEncapsulation */ && hostElm["s-sc"]) {
-      scopeId2 = hostElm["s-sc"];
-      hostElm.classList.add(scopeId2 + "-h");
-    } else if (hostElm["s-sc"]) {
-      delete hostElm["s-sc"];
-    }
-  }
-  if (win.document && (!plt.$orgLocNodes$ || !plt.$orgLocNodes$.size)) {
-    initializeDocumentHydrate(win.document.body, plt.$orgLocNodes$ = /* @__PURE__ */ new Map());
-  }
-  hostElm[HYDRATE_ID] = hostId;
-  hostElm.removeAttribute(HYDRATE_ID);
-  hostRef.$vnode$ = clientHydrate(
-    vnode,
-    childRenderNodes,
-    slotNodes,
-    shadowRootNodes,
-    hostElm,
-    hostElm,
-    hostId,
-    slottedNodes
-  );
-  let crIndex = 0;
-  const crLength = childRenderNodes.length;
-  let childRenderNode;
-  for (crIndex; crIndex < crLength; crIndex++) {
-    childRenderNode = childRenderNodes[crIndex];
-    const orgLocationId = childRenderNode.$hostId$ + "." + childRenderNode.$nodeId$;
-    const orgLocationNode = plt.$orgLocNodes$.get(orgLocationId);
-    const node = childRenderNode.$elm$;
-    if (!shadowRoot) {
-      node["s-hn"] = tagName.toUpperCase();
-      if (childRenderNode.$tag$ === "slot") {
-        node["s-cr"] = hostElm["s-cr"];
-      }
-    }
-    if (childRenderNode.$tag$ === "slot") {
-      childRenderNode.$name$ = childRenderNode.$elm$["s-sn"] || childRenderNode.$elm$["name"] || null;
-      if (childRenderNode.$children$) {
-        childRenderNode.$flags$ |= 2 /* isSlotFallback */;
-        if (!childRenderNode.$elm$.childNodes.length) {
-          childRenderNode.$children$.forEach((c) => {
-            childRenderNode.$elm$.appendChild(c.$elm$);
-          });
-        }
-      } else {
-        childRenderNode.$flags$ |= 1 /* isSlotReference */;
-      }
-    }
-    if (orgLocationNode && orgLocationNode.isConnected) {
-      if (shadowRoot && orgLocationNode["s-en"] === "") {
-        orgLocationNode.parentNode.insertBefore(node, orgLocationNode.nextSibling);
-      }
-      orgLocationNode.parentNode.removeChild(orgLocationNode);
-      if (!shadowRoot) {
-        node["s-oo"] = parseInt(childRenderNode.$nodeId$);
-      }
-    }
-    plt.$orgLocNodes$.delete(orgLocationId);
-  }
-  const hosts = [];
-  const snLen = slottedNodes.length;
-  let snIndex = 0;
-  let slotGroup;
-  let snGroupIdx;
-  let snGroupLen;
-  let slottedItem;
-  for (snIndex; snIndex < snLen; snIndex++) {
-    slotGroup = slottedNodes[snIndex];
-    if (!slotGroup || !slotGroup.length) continue;
-    snGroupLen = slotGroup.length;
-    snGroupIdx = 0;
-    for (snGroupIdx; snGroupIdx < snGroupLen; snGroupIdx++) {
-      slottedItem = slotGroup[snGroupIdx];
-      if (!hosts[slottedItem.hostId]) {
-        hosts[slottedItem.hostId] = plt.$orgLocNodes$.get(slottedItem.hostId);
-      }
-      if (!hosts[slottedItem.hostId]) continue;
-      const hostEle = hosts[slottedItem.hostId];
-      if (!hostEle.shadowRoot || !shadowRoot) {
-        slottedItem.slot["s-cr"] = hostEle["s-cr"];
-        if (!slottedItem.slot["s-cr"] && hostEle.shadowRoot) {
-          slottedItem.slot["s-cr"] = hostEle;
-        } else {
-          slottedItem.slot["s-cr"] = (hostEle.__childNodes || hostEle.childNodes)[0];
-        }
-        addSlotRelocateNode(slottedItem.node, slottedItem.slot, false, slottedItem.node["s-oo"]);
-      }
-      if (hostEle.shadowRoot && slottedItem.node.parentElement !== hostEle) {
-        hostEle.appendChild(slottedItem.node);
-      }
-    }
-  }
-  if (scopeId2 && slotNodes.length) {
-    slotNodes.forEach((slot) => {
-      slot.$elm$.parentElement.classList.add(scopeId2 + "-s");
-    });
-  }
-  if (shadowRoot && !shadowRoot.childNodes.length) {
-    let rnIdex = 0;
-    const rnLen = shadowRootNodes.length;
-    if (rnLen) {
-      for (rnIdex; rnIdex < rnLen; rnIdex++) {
-        shadowRoot.appendChild(shadowRootNodes[rnIdex]);
-      }
-      Array.from(hostElm.childNodes).forEach((node) => {
-        if (typeof node["s-en"] !== "string" && typeof node["s-sn"] !== "string") {
-          if (node.nodeType === 1 /* ElementNode */ && node.slot && node.hidden) {
-            node.removeAttribute("hidden");
-          } else if (node.nodeType === 8 /* CommentNode */ || node.nodeType === 3 /* TextNode */ && !node.wholeText.trim()) {
-            node.parentNode.removeChild(node);
-          }
-        }
-      });
-    }
-  }
-  plt.$orgLocNodes$.delete(hostElm["s-id"]);
-  hostRef.$hostElement$ = hostElm;
-  endHydrate();
-};
-var clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes, hostElm, node, hostId, slottedNodes = []) => {
-  let childNodeType;
-  let childIdSplt;
-  let childVNode;
-  let i2;
-  const scopeId2 = hostElm["s-sc"];
-  if (node.nodeType === 1 /* ElementNode */) {
-    childNodeType = node.getAttribute(HYDRATE_CHILD_ID);
-    if (childNodeType) {
-      childIdSplt = childNodeType.split(".");
-      if (childIdSplt[0] === hostId || childIdSplt[0] === "0") {
-        childVNode = createSimpleVNode({
-          $flags$: 0,
-          $hostId$: childIdSplt[0],
-          $nodeId$: childIdSplt[1],
-          $depth$: childIdSplt[2],
-          $index$: childIdSplt[3],
-          $tag$: node.tagName.toLowerCase(),
-          $elm$: node,
-          // If we don't add the initial classes to the VNode, the first `vdom-render.ts` patch
-          // won't try to reconcile them. Classes set on the node will be blown away.
-          $attrs$: { class: node.className || "" }
-        });
-        childRenderNodes.push(childVNode);
-        node.removeAttribute(HYDRATE_CHILD_ID);
-        if (!parentVNode.$children$) {
-          parentVNode.$children$ = [];
-        }
-        if (scopeId2) {
-          node["s-si"] = scopeId2;
-          childVNode.$attrs$.class += " " + scopeId2;
-        }
-        const slotName = childVNode.$elm$.getAttribute("s-sn");
-        if (typeof slotName === "string") {
-          if (childVNode.$tag$ === "slot-fb") {
-            addSlot(
-              slotName,
-              childIdSplt[2],
-              childVNode,
-              node,
-              parentVNode,
-              childRenderNodes,
-              slotNodes,
-              shadowRootNodes,
-              slottedNodes
-            );
-            if (scopeId2) {
-              node.classList.add(scopeId2);
-            }
-          }
-          childVNode.$elm$["s-sn"] = slotName;
-          childVNode.$elm$.removeAttribute("s-sn");
-        }
-        if (childVNode.$index$ !== void 0) {
-          parentVNode.$children$[childVNode.$index$] = childVNode;
-        }
-        parentVNode = childVNode;
-        if (shadowRootNodes && childVNode.$depth$ === "0") {
-          shadowRootNodes[childVNode.$index$] = childVNode.$elm$;
-        }
-      }
-    }
-    if (node.shadowRoot) {
-      for (i2 = node.shadowRoot.childNodes.length - 1; i2 >= 0; i2--) {
-        clientHydrate(
-          parentVNode,
-          childRenderNodes,
-          slotNodes,
-          shadowRootNodes,
-          hostElm,
-          node.shadowRoot.childNodes[i2],
-          hostId,
-          slottedNodes
-        );
-      }
-    }
-    const nonShadowNodes = node.__childNodes || node.childNodes;
-    for (i2 = nonShadowNodes.length - 1; i2 >= 0; i2--) {
-      clientHydrate(
-        parentVNode,
-        childRenderNodes,
-        slotNodes,
-        shadowRootNodes,
-        hostElm,
-        nonShadowNodes[i2],
-        hostId,
-        slottedNodes
-      );
-    }
-  } else if (node.nodeType === 8 /* CommentNode */) {
-    childIdSplt = node.nodeValue.split(".");
-    if (childIdSplt[1] === hostId || childIdSplt[1] === "0") {
-      childNodeType = childIdSplt[0];
-      childVNode = createSimpleVNode({
-        $hostId$: childIdSplt[1],
-        $nodeId$: childIdSplt[2],
-        $depth$: childIdSplt[3],
-        $index$: childIdSplt[4] || "0",
-        $elm$: node,
-        $attrs$: null,
-        $children$: null,
-        $key$: null,
-        $name$: null,
-        $tag$: null,
-        $text$: null
-      });
-      if (childNodeType === TEXT_NODE_ID) {
-        childVNode.$elm$ = findCorrespondingNode(node, 3 /* TextNode */);
-        if (childVNode.$elm$ && childVNode.$elm$.nodeType === 3 /* TextNode */) {
-          childVNode.$text$ = childVNode.$elm$.textContent;
-          childRenderNodes.push(childVNode);
-          node.remove();
-          if (hostId === childVNode.$hostId$) {
-            if (!parentVNode.$children$) {
-              parentVNode.$children$ = [];
-            }
-            parentVNode.$children$[childVNode.$index$] = childVNode;
-          }
-          if (shadowRootNodes && childVNode.$depth$ === "0") {
-            shadowRootNodes[childVNode.$index$] = childVNode.$elm$;
-          }
-        }
-      } else if (childNodeType === COMMENT_NODE_ID) {
-        childVNode.$elm$ = findCorrespondingNode(node, 8 /* CommentNode */);
-        if (childVNode.$elm$ && childVNode.$elm$.nodeType === 8 /* CommentNode */) {
-          childRenderNodes.push(childVNode);
-          node.remove();
-        }
-      } else if (childVNode.$hostId$ === hostId) {
-        if (childNodeType === SLOT_NODE_ID) {
-          const slotName = node["s-sn"] = childIdSplt[5] || "";
-          addSlot(
-            slotName,
-            childIdSplt[2],
-            childVNode,
-            node,
-            parentVNode,
-            childRenderNodes,
-            slotNodes,
-            shadowRootNodes,
-            slottedNodes
-          );
-        } else if (childNodeType === CONTENT_REF_ID) {
-          if (shadowRootNodes) {
-            node.remove();
-          } else {
-            hostElm["s-cr"] = node;
-            node["s-cn"] = true;
-          }
-        }
-      }
-    }
-  } else if (parentVNode && parentVNode.$tag$ === "style") {
-    const vnode = newVNode(null, node.textContent);
-    vnode.$elm$ = node;
-    vnode.$index$ = "0";
-    parentVNode.$children$ = [vnode];
-  } else {
-    if (node.nodeType === 3 /* TextNode */ && !node.wholeText.trim()) {
-      node.remove();
-    }
-  }
-  return parentVNode;
-};
-var initializeDocumentHydrate = (node, orgLocNodes) => {
-  if (node.nodeType === 1 /* ElementNode */) {
-    const componentId = node[HYDRATE_ID] || node.getAttribute(HYDRATE_ID);
-    if (componentId) {
-      orgLocNodes.set(componentId, node);
-    }
-    let i2 = 0;
-    if (node.shadowRoot) {
-      for (; i2 < node.shadowRoot.childNodes.length; i2++) {
-        initializeDocumentHydrate(node.shadowRoot.childNodes[i2], orgLocNodes);
-      }
-    }
-    const nonShadowNodes = node.__childNodes || node.childNodes;
-    for (i2 = 0; i2 < nonShadowNodes.length; i2++) {
-      initializeDocumentHydrate(nonShadowNodes[i2], orgLocNodes);
-    }
-  } else if (node.nodeType === 8 /* CommentNode */) {
-    const childIdSplt = node.nodeValue.split(".");
-    if (childIdSplt[0] === ORG_LOCATION_ID) {
-      orgLocNodes.set(childIdSplt[1] + "." + childIdSplt[2], node);
-      node.nodeValue = "";
-      node["s-en"] = childIdSplt[3];
-    }
-  }
-};
-var createSimpleVNode = (vnode) => {
-  const defaultVNode = {
-    $flags$: 0,
-    $hostId$: null,
-    $nodeId$: null,
-    $depth$: null,
-    $index$: "0",
-    $elm$: null,
-    $attrs$: null,
-    $children$: null,
-    $key$: null,
-    $name$: null,
-    $tag$: null,
-    $text$: null
-  };
-  return { ...defaultVNode, ...vnode };
-};
-function addSlot(slotName, slotId, childVNode, node, parentVNode, childRenderNodes, slotNodes, shadowRootNodes, slottedNodes) {
-  node["s-sr"] = true;
-  childVNode.$name$ = slotName || null;
-  childVNode.$tag$ = "slot";
-  const parentNodeId = (parentVNode == null ? void 0 : parentVNode.$elm$) ? parentVNode.$elm$["s-id"] || parentVNode.$elm$.getAttribute("s-id") : "";
-  if (shadowRootNodes && win.document) {
-    const slot = childVNode.$elm$ = win.document.createElement(childVNode.$tag$);
-    if (childVNode.$name$) {
-      childVNode.$elm$.setAttribute("name", slotName);
-    }
-    if (parentNodeId && parentNodeId !== childVNode.$hostId$) {
-      parentVNode.$elm$.insertBefore(slot, parentVNode.$elm$.children[0]);
-    } else {
-      node.parentNode.insertBefore(childVNode.$elm$, node);
-    }
-    addSlottedNodes(slottedNodes, slotId, slotName, node, childVNode.$hostId$);
-    node.remove();
-    if (childVNode.$depth$ === "0") {
-      shadowRootNodes[childVNode.$index$] = childVNode.$elm$;
-    }
-  } else {
-    const slot = childVNode.$elm$;
-    const shouldMove = parentNodeId && parentNodeId !== childVNode.$hostId$ && parentVNode.$elm$.shadowRoot;
-    addSlottedNodes(slottedNodes, slotId, slotName, node, shouldMove ? parentNodeId : childVNode.$hostId$);
-    patchSlotNode(node);
-    if (shouldMove) {
-      parentVNode.$elm$.insertBefore(slot, parentVNode.$elm$.children[0]);
-    }
-    childRenderNodes.push(childVNode);
-  }
-  slotNodes.push(childVNode);
-  if (!parentVNode.$children$) {
-    parentVNode.$children$ = [];
-  }
-  parentVNode.$children$[childVNode.$index$] = childVNode;
-}
-var addSlottedNodes = (slottedNodes, slotNodeId, slotName, slotNode, hostId) => {
-  let slottedNode = slotNode.nextSibling;
-  slottedNodes[slotNodeId] = slottedNodes[slotNodeId] || [];
-  while (slottedNode && ((slottedNode["getAttribute"] && slottedNode.getAttribute("slot") || slottedNode["s-sn"]) === slotName || slotName === "" && !slottedNode["s-sn"] && (slottedNode.nodeType === 8 /* CommentNode */ && slottedNode.nodeValue.indexOf(".") !== 1 || slottedNode.nodeType === 3 /* TextNode */))) {
-    slottedNode["s-sn"] = slotName;
-    slottedNodes[slotNodeId].push({ slot: slotNode, node: slottedNode, hostId });
-    slottedNode = slottedNode.nextSibling;
-  }
-};
-var findCorrespondingNode = (node, type) => {
-  let sibling = node;
-  do {
-    sibling = sibling.nextSibling;
-  } while (sibling && (sibling.nodeType !== type || !sibling.nodeValue));
-  return sibling;
-};
-var createSupportsRuleRe = (selector) => {
-  const safeSelector2 = escapeRegExpSpecialCharacters(selector);
-  return new RegExp(
-    // First capture group: match any context before the selector that's not inside @supports selector()
-    // Using negative lookahead to avoid matching inside @supports selector(...) condition
-    `(^|[^@]|@(?!supports\\s+selector\\s*\\([^{]*?${safeSelector2}))(${safeSelector2}\\b)`,
-    "g"
-  );
-};
-createSupportsRuleRe("::slotted");
-createSupportsRuleRe(":host");
-createSupportsRuleRe(":host-context");
-var parsePropertyValue = (propValue, propType, isFormAssociated) => {
-  if (typeof propValue === "string" && (propValue.startsWith("{") && propValue.endsWith("}") || propValue.startsWith("[") && propValue.endsWith("]"))) {
-    try {
-      propValue = JSON.parse(propValue);
-      return propValue;
-    } catch (e) {
-    }
-  }
-  if (typeof propValue === "string" && propValue.startsWith(SERIALIZED_PREFIX)) {
-    propValue = deserializeProperty(propValue);
-    return propValue;
-  }
-  if (propValue != null && !isComplexType(propValue)) {
-    if (propType & 4 /* Boolean */) {
-      {
-        return propValue === "false" ? false : propValue === "" || !!propValue;
-      }
-    }
-    if (propType & 2 /* Number */) {
-      return typeof propValue === "string" ? parseFloat(propValue) : typeof propValue === "number" ? propValue : NaN;
-    }
-    if (propType & 1 /* String */) {
-      return String(propValue);
-    }
-    return propValue;
-  }
-  return propValue;
-};
-var getElement = (ref) => getHostRef(ref).$hostElement$ ;
-// src/runtime/event-emitter.ts
-var createEvent = (ref, name, flags) => {
-  const elm = getElement(ref);
-  return {
-    emit: (detail) => {
-      return emitEvent(elm, name, {
-        bubbles: !!(flags & 4 /* Bubbles */),
-        composed: !!(flags & 2 /* Composed */),
-        cancelable: !!(flags & 1 /* Cancellable */),
-        detail
-      });
-    }
-  };
-};
-var emitEvent = (elm, name, opts) => {
-  const ev = plt.ce(name, opts);
-  elm.dispatchEvent(ev);
-  return ev;
-};
-var rootAppliedStyles = /* @__PURE__ */ new WeakMap();
-var registerStyle = (scopeId2, cssText, allowCS) => {
-  let style = styles.get(scopeId2);
-  if (supportsConstructableStylesheets && allowCS) {
-    style = style || new CSSStyleSheet();
-    if (typeof style === "string") {
-      style = cssText;
-    } else {
-      style.replaceSync(cssText);
-    }
-  } else {
-    style = cssText;
-  }
-  styles.set(scopeId2, style);
-};
-var addStyle = (styleContainerNode, cmpMeta, mode) => {
-  var _a;
-  const scopeId2 = getScopeId(cmpMeta);
-  const style = styles.get(scopeId2);
-  if (!win.document) {
-    return scopeId2;
-  }
-  styleContainerNode = styleContainerNode.nodeType === 11 /* DocumentFragment */ ? styleContainerNode : win.document;
-  if (style) {
-    if (typeof style === "string") {
-      styleContainerNode = styleContainerNode.head || styleContainerNode;
-      let appliedStyles = rootAppliedStyles.get(styleContainerNode);
-      let styleElm;
-      if (!appliedStyles) {
-        rootAppliedStyles.set(styleContainerNode, appliedStyles = /* @__PURE__ */ new Set());
-      }
-      if (!appliedStyles.has(scopeId2)) {
-        if (styleContainerNode.host && (styleElm = styleContainerNode.querySelector(`[${HYDRATED_STYLE_ID}="${scopeId2}"]`))) {
-          styleElm.innerHTML = style;
-        } else {
-          styleElm = win.document.createElement("style");
-          styleElm.innerHTML = style;
-          const nonce = (_a = plt.$nonce$) != null ? _a : queryNonceMetaTagContent(win.document);
-          if (nonce != null) {
-            styleElm.setAttribute("nonce", nonce);
-          }
-          if (!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */)) {
-            if (styleContainerNode.nodeName === "HEAD") {
-              const preconnectLinks = styleContainerNode.querySelectorAll("link[rel=preconnect]");
-              const referenceNode2 = preconnectLinks.length > 0 ? preconnectLinks[preconnectLinks.length - 1].nextSibling : styleContainerNode.querySelector("style");
-              styleContainerNode.insertBefore(
-                styleElm,
-                (referenceNode2 == null ? void 0 : referenceNode2.parentNode) === styleContainerNode ? referenceNode2 : null
-              );
-            } else if ("host" in styleContainerNode) {
-              if (supportsConstructableStylesheets) {
-                const stylesheet = new CSSStyleSheet();
-                stylesheet.replaceSync(style);
-                styleContainerNode.adoptedStyleSheets = [stylesheet, ...styleContainerNode.adoptedStyleSheets];
-              } else {
-                const existingStyleContainer = styleContainerNode.querySelector("style");
-                if (existingStyleContainer) {
-                  existingStyleContainer.innerHTML = style + existingStyleContainer.innerHTML;
-                } else {
-                  styleContainerNode.prepend(styleElm);
-                }
-              }
-            } else {
-              styleContainerNode.append(styleElm);
-            }
-          }
-          if (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
-            styleContainerNode.insertBefore(styleElm, null);
-          }
-        }
-        if (cmpMeta.$flags$ & 4 /* hasSlotRelocation */) {
-          styleElm.innerHTML += SLOT_FB_CSS;
-        }
-        if (appliedStyles) {
-          appliedStyles.add(scopeId2);
-        }
-      }
-    } else if (!styleContainerNode.adoptedStyleSheets.includes(style)) {
-      styleContainerNode.adoptedStyleSheets = [...styleContainerNode.adoptedStyleSheets, style];
-    }
-  }
-  return scopeId2;
-};
-var attachStyles = (hostRef) => {
-  const cmpMeta = hostRef.$cmpMeta$;
-  const elm = hostRef.$hostElement$;
-  const flags = cmpMeta.$flags$;
-  const endAttachStyles = createTime("attachStyles", cmpMeta.$tagName$);
-  const scopeId2 = addStyle(
-    elm.shadowRoot ? elm.shadowRoot : elm.getRootNode(),
-    cmpMeta);
-  if (flags & 10 /* needsScopedEncapsulation */) {
-    elm["s-sc"] = scopeId2;
-    elm.classList.add(scopeId2 + "-h");
-  }
-  endAttachStyles();
-};
-var getScopeId = (cmp, mode) => "sc-" + (cmp.$tagName$);
-var convertScopedToShadow = (css) => css.replace(/\/\*!@([^\/]+)\*\/[^\{]+\{/g, "$1{");
-var hydrateScopedToShadow = () => {
-  if (!win.document) {
-    return;
-  }
-  const styles2 = win.document.querySelectorAll(`[${HYDRATED_STYLE_ID}]`);
-  let i2 = 0;
-  for (; i2 < styles2.length; i2++) {
-    registerStyle(styles2[i2].getAttribute(HYDRATED_STYLE_ID), convertScopedToShadow(styles2[i2].innerHTML), true);
-  }
-};
-var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRender) => {
-  if (oldValue === newValue) {
-    return;
-  }
-  let isProp = isMemberInElement(elm, memberName);
-  let ln = memberName.toLowerCase();
-  if (memberName === "class") {
-    const classList = elm.classList;
-    const oldClasses = parseClassList(oldValue);
-    let newClasses = parseClassList(newValue);
-    if (elm["s-si"] && initialRender) {
-      newClasses.push(elm["s-si"]);
-      oldClasses.forEach((c) => {
-        if (c.startsWith(elm["s-si"])) newClasses.push(c);
-      });
-      newClasses = [...new Set(newClasses)];
-      classList.add(...newClasses);
-    } else {
-      classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c)));
-      classList.add(...newClasses.filter((c) => c && !oldClasses.includes(c)));
-    }
-  } else if (memberName === "style") {
-    {
-      for (const prop in oldValue) {
-        if (!newValue || newValue[prop] == null) {
-          if (prop.includes("-")) {
-            elm.style.removeProperty(prop);
-          } else {
-            elm.style[prop] = "";
-          }
-        }
-      }
-    }
-    for (const prop in newValue) {
-      if (!oldValue || newValue[prop] !== oldValue[prop]) {
-        if (prop.includes("-")) {
-          elm.style.setProperty(prop, newValue[prop]);
-        } else {
-          elm.style[prop] = newValue[prop];
-        }
-      }
-    }
-  } else if (memberName === "key") ; else if (memberName === "ref") {
-    if (newValue) {
-      newValue(elm);
-    }
-  } else if ((!isProp ) && memberName[0] === "o" && memberName[1] === "n") {
-    if (memberName[2] === "-") {
-      memberName = memberName.slice(3);
-    } else if (isMemberInElement(win, ln)) {
-      memberName = ln.slice(2);
-    } else {
-      memberName = ln[2] + memberName.slice(3);
-    }
-    if (oldValue || newValue) {
-      const capture = memberName.endsWith(CAPTURE_EVENT_SUFFIX);
-      memberName = memberName.replace(CAPTURE_EVENT_REGEX, "");
-      if (oldValue) {
-        plt.rel(elm, memberName, oldValue, capture);
-      }
-      if (newValue) {
-        plt.ael(elm, memberName, newValue, capture);
-      }
-    }
-  } else {
-    const isComplex = isComplexType(newValue);
-    if ((isProp || isComplex && newValue !== null) && !isSvg) {
-      try {
-        if (!elm.tagName.includes("-")) {
-          const n = newValue == null ? "" : newValue;
-          if (memberName === "list") {
-            isProp = false;
-          } else if (oldValue == null || elm[memberName] != n) {
-            if (typeof elm.__lookupSetter__(memberName) === "function") {
-              elm[memberName] = n;
-            } else {
-              elm.setAttribute(memberName, n);
-            }
-          }
-        } else if (elm[memberName] !== newValue) {
-          elm[memberName] = newValue;
-        }
-      } catch (e) {
-      }
-    }
-    let xlink = false;
-    {
-      if (ln !== (ln = ln.replace(/^xlink\:?/, ""))) {
-        memberName = ln;
-        xlink = true;
-      }
-    }
-    if (newValue == null || newValue === false) {
-      if (newValue !== false || elm.getAttribute(memberName) === "") {
-        if (xlink) {
-          elm.removeAttributeNS(XLINK_NS, memberName);
-        } else {
-          elm.removeAttribute(memberName);
-        }
-      }
-    } else if ((!isProp || flags & 4 /* isHost */ || isSvg) && !isComplex && elm.nodeType === 1 /* ElementNode */) {
-      newValue = newValue === true ? "" : newValue;
-      if (xlink) {
-        elm.setAttributeNS(XLINK_NS, memberName, newValue);
-      } else {
-        elm.setAttribute(memberName, newValue);
-      }
-    }
-  }
-};
-var parseClassListRegex = /\s/;
-var parseClassList = (value) => {
-  if (typeof value === "object" && value && "baseVal" in value) {
-    value = value.baseVal;
-  }
-  if (!value || typeof value !== "string") {
-    return [];
-  }
-  return value.split(parseClassListRegex);
-};
-var CAPTURE_EVENT_SUFFIX = "Capture";
-var CAPTURE_EVENT_REGEX = new RegExp(CAPTURE_EVENT_SUFFIX + "$");
-// src/runtime/vdom/update-element.ts
-var updateElement = (oldVnode, newVnode, isSvgMode2, isInitialRender) => {
-  const elm = newVnode.$elm$.nodeType === 11 /* DocumentFragment */ && newVnode.$elm$.host ? newVnode.$elm$.host : newVnode.$elm$;
-  const oldVnodeAttrs = oldVnode && oldVnode.$attrs$ || {};
-  const newVnodeAttrs = newVnode.$attrs$ || {};
-  {
-    for (const memberName of sortedAttrNames(Object.keys(oldVnodeAttrs))) {
-      if (!(memberName in newVnodeAttrs)) {
-        setAccessor(
-          elm,
-          memberName,
-          oldVnodeAttrs[memberName],
-          void 0,
-          isSvgMode2,
-          newVnode.$flags$,
-          isInitialRender
-        );
-      }
-    }
-  }
-  for (const memberName of sortedAttrNames(Object.keys(newVnodeAttrs))) {
-    setAccessor(
-      elm,
-      memberName,
-      oldVnodeAttrs[memberName],
-      newVnodeAttrs[memberName],
-      isSvgMode2,
-      newVnode.$flags$,
-      isInitialRender
-    );
-  }
-};
-function sortedAttrNames(attrNames) {
-  return attrNames.includes("ref") ? (
-    // we need to sort these to ensure that `'ref'` is the last attr
-    [...attrNames.filter((attr) => attr !== "ref"), "ref"]
-  ) : (
-    // no need to sort, return the original array
-    attrNames
-  );
-}
-// src/runtime/vdom/vdom-render.ts
-var scopeId;
-var contentRef;
-var hostTagName;
-var useNativeShadowDom = false;
-var checkSlotFallbackVisibility = false;
-var checkSlotRelocate = false;
-var isSvgMode = false;
-var createElm = (oldParentVNode, newParentVNode, childIndex) => {
-  var _a;
-  const newVNode2 = newParentVNode.$children$[childIndex];
-  let i2 = 0;
-  let elm;
-  let childNode;
-  let oldVNode;
-  if (!useNativeShadowDom) {
-    checkSlotRelocate = true;
-    if (newVNode2.$tag$ === "slot") {
-      newVNode2.$flags$ |= newVNode2.$children$ ? (
-        // slot element has fallback content
-        // still create an element that "mocks" the slot element
-        2 /* isSlotFallback */
-      ) : (
-        // slot element does not have fallback content
-        // create an html comment we'll use to always reference
-        // where actual slot content should sit next to
-        1 /* isSlotReference */
-      );
-    }
-  }
-  if (newVNode2.$text$ !== null) {
-    elm = newVNode2.$elm$ = win.document.createTextNode(newVNode2.$text$);
-  } else if (newVNode2.$flags$ & 1 /* isSlotReference */) {
-    elm = newVNode2.$elm$ = win.document.createTextNode("");
-    {
-      updateElement(null, newVNode2, isSvgMode);
-    }
-  } else {
-    if (!isSvgMode) {
-      isSvgMode = newVNode2.$tag$ === "svg";
-    }
-    if (!win.document) {
-      throw new Error(
-        "You are trying to render a Stencil component in an environment that doesn't support the DOM. Make sure to populate the [`window`](https://developer.mozilla.org/en-US/docs/Web/API/Window/window) object before rendering a component."
-      );
-    }
-    elm = newVNode2.$elm$ = win.document.createElementNS(
-      isSvgMode ? SVG_NS : HTML_NS,
-      !useNativeShadowDom && BUILD.slotRelocation && newVNode2.$flags$ & 2 /* isSlotFallback */ ? "slot-fb" : newVNode2.$tag$
-    ) ;
-    if (isSvgMode && newVNode2.$tag$ === "foreignObject") {
-      isSvgMode = false;
-    }
-    {
-      updateElement(null, newVNode2, isSvgMode);
-    }
-    if (isDef(scopeId) && elm["s-si"] !== scopeId) {
-      elm.classList.add(elm["s-si"] = scopeId);
-    }
-    if (newVNode2.$children$) {
-      for (i2 = 0; i2 < newVNode2.$children$.length; ++i2) {
-        childNode = createElm(oldParentVNode, newVNode2, i2);
-        if (childNode) {
-          elm.appendChild(childNode);
-        }
-      }
-    }
-    {
-      if (newVNode2.$tag$ === "svg") {
-        isSvgMode = false;
-      } else if (elm.tagName === "foreignObject") {
-        isSvgMode = true;
-      }
-    }
-  }
-  elm["s-hn"] = hostTagName;
-  {
-    if (newVNode2.$flags$ & (2 /* isSlotFallback */ | 1 /* isSlotReference */)) {
-      elm["s-sr"] = true;
-      elm["s-cr"] = contentRef;
-      elm["s-sn"] = newVNode2.$name$ || "";
-      elm["s-rf"] = (_a = newVNode2.$attrs$) == null ? void 0 : _a.ref;
-      patchSlotNode(elm);
-      oldVNode = oldParentVNode && oldParentVNode.$children$ && oldParentVNode.$children$[childIndex];
-      if (oldVNode && oldVNode.$tag$ === newVNode2.$tag$ && oldParentVNode.$elm$) {
-        {
-          putBackInOriginalLocation(oldParentVNode.$elm$, false);
-        }
-      }
-      {
-        addRemoveSlotScopedClass(contentRef, elm, newParentVNode.$elm$, oldParentVNode == null ? void 0 : oldParentVNode.$elm$);
-      }
-    }
-  }
-  return elm;
-};
-var putBackInOriginalLocation = (parentElm, recursive) => {
-  plt.$flags$ |= 1 /* isTmpDisconnected */;
-  const oldSlotChildNodes = Array.from(parentElm.__childNodes || parentElm.childNodes);
-  for (let i2 = oldSlotChildNodes.length - 1; i2 >= 0; i2--) {
-    const childNode = oldSlotChildNodes[i2];
-    if (childNode["s-hn"] !== hostTagName && childNode["s-ol"]) {
-      insertBefore(referenceNode(childNode).parentNode, childNode, referenceNode(childNode));
-      childNode["s-ol"].remove();
-      childNode["s-ol"] = void 0;
-      childNode["s-sh"] = void 0;
-      checkSlotRelocate = true;
-    }
-    if (recursive) {
-      putBackInOriginalLocation(childNode, recursive);
-    }
-  }
-  plt.$flags$ &= -2 /* isTmpDisconnected */;
-};
-var addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) => {
-  let containerElm = parentElm["s-cr"] && parentElm["s-cr"].parentNode || parentElm;
-  let childNode;
-  if (containerElm.shadowRoot && containerElm.tagName === hostTagName) {
-    containerElm = containerElm.shadowRoot;
-  }
-  for (; startIdx <= endIdx; ++startIdx) {
-    if (vnodes[startIdx]) {
-      childNode = createElm(null, parentVNode, startIdx);
-      if (childNode) {
-        vnodes[startIdx].$elm$ = childNode;
-        insertBefore(containerElm, childNode, referenceNode(before) );
-      }
-    }
-  }
-};
-var removeVnodes = (vnodes, startIdx, endIdx) => {
-  for (let index = startIdx; index <= endIdx; ++index) {
-    const vnode = vnodes[index];
-    if (vnode) {
-      const elm = vnode.$elm$;
-      nullifyVNodeRefs(vnode);
-      if (elm) {
-        {
-          checkSlotFallbackVisibility = true;
-          if (elm["s-ol"]) {
-            elm["s-ol"].remove();
-          } else {
-            putBackInOriginalLocation(elm, true);
-          }
-        }
-        elm.remove();
-      }
-    }
-  }
-};
-var updateChildren = (parentElm, oldCh, newVNode2, newCh, isInitialRender = false) => {
-  let oldStartIdx = 0;
-  let newStartIdx = 0;
-  let idxInOld = 0;
-  let i2 = 0;
-  let oldEndIdx = oldCh.length - 1;
-  let oldStartVnode = oldCh[0];
-  let oldEndVnode = oldCh[oldEndIdx];
-  let newEndIdx = newCh.length - 1;
-  let newStartVnode = newCh[0];
-  let newEndVnode = newCh[newEndIdx];
-  let node;
-  let elmToMove;
-  while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
-    if (oldStartVnode == null) {
-      oldStartVnode = oldCh[++oldStartIdx];
-    } else if (oldEndVnode == null) {
-      oldEndVnode = oldCh[--oldEndIdx];
-    } else if (newStartVnode == null) {
-      newStartVnode = newCh[++newStartIdx];
-    } else if (newEndVnode == null) {
-      newEndVnode = newCh[--newEndIdx];
-    } else if (isSameVnode(oldStartVnode, newStartVnode, isInitialRender)) {
-      patch(oldStartVnode, newStartVnode, isInitialRender);
-      oldStartVnode = oldCh[++oldStartIdx];
-      newStartVnode = newCh[++newStartIdx];
-    } else if (isSameVnode(oldEndVnode, newEndVnode, isInitialRender)) {
-      patch(oldEndVnode, newEndVnode, isInitialRender);
-      oldEndVnode = oldCh[--oldEndIdx];
-      newEndVnode = newCh[--newEndIdx];
-    } else if (isSameVnode(oldStartVnode, newEndVnode, isInitialRender)) {
-      if ((oldStartVnode.$tag$ === "slot" || newEndVnode.$tag$ === "slot")) {
-        putBackInOriginalLocation(oldStartVnode.$elm$.parentNode, false);
-      }
-      patch(oldStartVnode, newEndVnode, isInitialRender);
-      insertBefore(parentElm, oldStartVnode.$elm$, oldEndVnode.$elm$.nextSibling);
-      oldStartVnode = oldCh[++oldStartIdx];
-      newEndVnode = newCh[--newEndIdx];
-    } else if (isSameVnode(oldEndVnode, newStartVnode, isInitialRender)) {
-      if ((oldStartVnode.$tag$ === "slot" || newEndVnode.$tag$ === "slot")) {
-        putBackInOriginalLocation(oldEndVnode.$elm$.parentNode, false);
-      }
-      patch(oldEndVnode, newStartVnode, isInitialRender);
-      insertBefore(parentElm, oldEndVnode.$elm$, oldStartVnode.$elm$);
-      oldEndVnode = oldCh[--oldEndIdx];
-      newStartVnode = newCh[++newStartIdx];
-    } else {
-      idxInOld = -1;
-      {
-        for (i2 = oldStartIdx; i2 <= oldEndIdx; ++i2) {
-          if (oldCh[i2] && oldCh[i2].$key$ !== null && oldCh[i2].$key$ === newStartVnode.$key$) {
-            idxInOld = i2;
-            break;
-          }
-        }
-      }
-      if (idxInOld >= 0) {
-        elmToMove = oldCh[idxInOld];
-        if (elmToMove.$tag$ !== newStartVnode.$tag$) {
-          node = createElm(oldCh && oldCh[newStartIdx], newVNode2, idxInOld);
-        } else {
-          patch(elmToMove, newStartVnode, isInitialRender);
-          oldCh[idxInOld] = void 0;
-          node = elmToMove.$elm$;
-        }
-        newStartVnode = newCh[++newStartIdx];
-      } else {
-        node = createElm(oldCh && oldCh[newStartIdx], newVNode2, newStartIdx);
-        newStartVnode = newCh[++newStartIdx];
-      }
-      if (node) {
-        {
-          insertBefore(
-            referenceNode(oldStartVnode.$elm$).parentNode,
-            node,
-            referenceNode(oldStartVnode.$elm$)
-          );
-        }
-      }
-    }
-  }
-  if (oldStartIdx > oldEndIdx) {
-    addVnodes(
-      parentElm,
-      newCh[newEndIdx + 1] == null ? null : newCh[newEndIdx + 1].$elm$,
-      newVNode2,
-      newCh,
-      newStartIdx,
-      newEndIdx
-    );
-  } else if (newStartIdx > newEndIdx) {
-    removeVnodes(oldCh, oldStartIdx, oldEndIdx);
-  }
-};
-var isSameVnode = (leftVNode, rightVNode, isInitialRender = false) => {
-  if (leftVNode.$tag$ === rightVNode.$tag$) {
-    if (leftVNode.$tag$ === "slot") {
-      return leftVNode.$name$ === rightVNode.$name$;
-    }
-    if (!isInitialRender) {
-      return leftVNode.$key$ === rightVNode.$key$;
-    }
-    if (isInitialRender && !leftVNode.$key$ && rightVNode.$key$) {
-      leftVNode.$key$ = rightVNode.$key$;
-    }
-    return true;
-  }
-  return false;
-};
-var referenceNode = (node) => node && node["s-ol"] || node;
-var patch = (oldVNode, newVNode2, isInitialRender = false) => {
-  const elm = newVNode2.$elm$ = oldVNode.$elm$;
-  const oldChildren = oldVNode.$children$;
-  const newChildren = newVNode2.$children$;
-  const tag = newVNode2.$tag$;
-  const text = newVNode2.$text$;
-  let defaultHolder;
-  if (text === null) {
-    {
-      isSvgMode = tag === "svg" ? true : tag === "foreignObject" ? false : isSvgMode;
-    }
-    {
-      updateElement(oldVNode, newVNode2, isSvgMode, isInitialRender);
-    }
-    if (oldChildren !== null && newChildren !== null) {
-      updateChildren(elm, oldChildren, newVNode2, newChildren, isInitialRender);
-    } else if (newChildren !== null) {
-      if (oldVNode.$text$ !== null) {
-        elm.textContent = "";
-      }
-      addVnodes(elm, null, newVNode2, newChildren, 0, newChildren.length - 1);
-    } else if (
-      // don't do this on initial render as it can cause non-hydrated content to be removed
-      !isInitialRender && BUILD.updatable && oldChildren !== null
-    ) {
-      removeVnodes(oldChildren, 0, oldChildren.length - 1);
-    }
-    if (isSvgMode && tag === "svg") {
-      isSvgMode = false;
-    }
-  } else if ((defaultHolder = elm["s-cr"])) {
-    defaultHolder.parentNode.textContent = text;
-  } else if (oldVNode.$text$ !== text) {
-    elm.data = text;
-  }
-};
-var relocateNodes = [];
-var markSlotContentForRelocation = (elm) => {
-  let node;
-  let hostContentNodes;
-  let j;
-  const children = elm.__childNodes || elm.childNodes;
-  for (const childNode of children) {
-    if (childNode["s-sr"] && (node = childNode["s-cr"]) && node.parentNode) {
-      hostContentNodes = node.parentNode.__childNodes || node.parentNode.childNodes;
-      const slotName = childNode["s-sn"];
-      for (j = hostContentNodes.length - 1; j >= 0; j--) {
-        node = hostContentNodes[j];
-        if (!node["s-cn"] && !node["s-nr"] && node["s-hn"] !== childNode["s-hn"] && (true)) {
-          if (isNodeLocatedInSlot(node, slotName)) {
-            let relocateNodeData = relocateNodes.find((r) => r.$nodeToRelocate$ === node);
-            checkSlotFallbackVisibility = true;
-            node["s-sn"] = node["s-sn"] || slotName;
-            if (relocateNodeData) {
-              relocateNodeData.$nodeToRelocate$["s-sh"] = childNode["s-hn"];
-              relocateNodeData.$slotRefNode$ = childNode;
-            } else {
-              node["s-sh"] = childNode["s-hn"];
-              relocateNodes.push({
-                $slotRefNode$: childNode,
-                $nodeToRelocate$: node
-              });
-            }
-            if (node["s-sr"]) {
-              relocateNodes.map((relocateNode) => {
-                if (isNodeLocatedInSlot(relocateNode.$nodeToRelocate$, node["s-sn"])) {
-                  relocateNodeData = relocateNodes.find((r) => r.$nodeToRelocate$ === node);
-                  if (relocateNodeData && !relocateNode.$slotRefNode$) {
-                    relocateNode.$slotRefNode$ = relocateNodeData.$slotRefNode$;
-                  }
-                }
-              });
-            }
-          } else if (!relocateNodes.some((r) => r.$nodeToRelocate$ === node)) {
-            relocateNodes.push({
-              $nodeToRelocate$: node
-            });
-          }
-        }
-      }
-    }
-    if (childNode.nodeType === 1 /* ElementNode */) {
-      markSlotContentForRelocation(childNode);
-    }
-  }
-};
-var nullifyVNodeRefs = (vNode) => {
-  {
-    vNode.$attrs$ && vNode.$attrs$.ref && vNode.$attrs$.ref(null);
-    vNode.$children$ && vNode.$children$.map(nullifyVNodeRefs);
-  }
-};
-var insertBefore = (parent, newNode, reference) => {
-  if (typeof newNode["s-sn"] === "string" && !!newNode["s-sr"] && !!newNode["s-cr"]) {
-    addRemoveSlotScopedClass(newNode["s-cr"], newNode, parent, newNode.parentElement);
-  }
-  {
-    return parent == null ? void 0 : parent.insertBefore(newNode, reference);
-  }
-};
-function addRemoveSlotScopedClass(reference, slotNode, newParent, oldParent) {
-  var _a, _b;
-  let scopeId2;
-  if (reference && typeof slotNode["s-sn"] === "string" && !!slotNode["s-sr"] && reference.parentNode && reference.parentNode["s-sc"] && (scopeId2 = slotNode["s-si"] || reference.parentNode["s-sc"])) {
-    const scopeName = slotNode["s-sn"];
-    const hostName = slotNode["s-hn"];
-    (_a = newParent.classList) == null ? void 0 : _a.add(scopeId2 + "-s");
-    if (oldParent && ((_b = oldParent.classList) == null ? void 0 : _b.contains(scopeId2 + "-s"))) {
-      let child = (oldParent.__childNodes || oldParent.childNodes)[0];
-      let found = false;
-      while (child) {
-        if (child["s-sn"] !== scopeName && child["s-hn"] === hostName && !!child["s-sr"]) {
-          found = true;
-          break;
-        }
-        child = child.nextSibling;
-      }
-      if (!found) oldParent.classList.remove(scopeId2 + "-s");
-    }
-  }
-}
-var renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
-  var _a, _b, _c, _d;
-  const hostElm = hostRef.$hostElement$;
-  const cmpMeta = hostRef.$cmpMeta$;
-  const oldVNode = hostRef.$vnode$ || newVNode(null, null);
-  const isHostElement = isHost(renderFnResults);
-  const rootVnode = isHostElement ? renderFnResults : h(null, null, renderFnResults);
-  hostTagName = hostElm.tagName;
-  if (cmpMeta.$attrsToReflect$) {
-    rootVnode.$attrs$ = rootVnode.$attrs$ || {};
-    cmpMeta.$attrsToReflect$.map(
-      ([propName, attribute]) => rootVnode.$attrs$[attribute] = hostElm[propName]
-    );
-  }
-  if (isInitialLoad && rootVnode.$attrs$) {
-    for (const key of Object.keys(rootVnode.$attrs$)) {
-      if (hostElm.hasAttribute(key) && !["key", "ref", "style", "class"].includes(key)) {
-        rootVnode.$attrs$[key] = hostElm[key];
-      }
-    }
-  }
-  rootVnode.$tag$ = null;
-  rootVnode.$flags$ |= 4 /* isHost */;
-  hostRef.$vnode$ = rootVnode;
-  rootVnode.$elm$ = oldVNode.$elm$ = hostElm.shadowRoot || hostElm ;
-  {
-    scopeId = hostElm["s-sc"];
-  }
-  useNativeShadowDom = !!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) && !(cmpMeta.$flags$ & 128 /* shadowNeedsScopedCss */);
-  {
-    contentRef = hostElm["s-cr"];
-    checkSlotFallbackVisibility = false;
-  }
-  patch(oldVNode, rootVnode, isInitialLoad);
-  {
-    plt.$flags$ |= 1 /* isTmpDisconnected */;
-    if (checkSlotRelocate) {
-      markSlotContentForRelocation(rootVnode.$elm$);
-      for (const relocateData of relocateNodes) {
-        const nodeToRelocate = relocateData.$nodeToRelocate$;
-        if (!nodeToRelocate["s-ol"] && win.document) {
-          const orgLocationNode = win.document.createTextNode("");
-          orgLocationNode["s-nr"] = nodeToRelocate;
-          insertBefore(nodeToRelocate.parentNode, nodeToRelocate["s-ol"] = orgLocationNode, nodeToRelocate);
-        }
-      }
-      for (const relocateData of relocateNodes) {
-        const nodeToRelocate = relocateData.$nodeToRelocate$;
-        const slotRefNode = relocateData.$slotRefNode$;
-        if (slotRefNode) {
-          const parentNodeRef = slotRefNode.parentNode;
-          let insertBeforeNode = slotRefNode.nextSibling;
-          {
-            let orgLocationNode = (_a = nodeToRelocate["s-ol"]) == null ? void 0 : _a.previousSibling;
-            while (orgLocationNode) {
-              let refNode = (_b = orgLocationNode["s-nr"]) != null ? _b : null;
-              if (refNode && refNode["s-sn"] === nodeToRelocate["s-sn"] && parentNodeRef === (refNode.__parentNode || refNode.parentNode)) {
-                refNode = refNode.nextSibling;
-                while (refNode === nodeToRelocate || (refNode == null ? void 0 : refNode["s-sr"])) {
-                  refNode = refNode == null ? void 0 : refNode.nextSibling;
-                }
-                if (!refNode || !refNode["s-nr"]) {
-                  insertBeforeNode = refNode;
-                  break;
-                }
-              }
-              orgLocationNode = orgLocationNode.previousSibling;
-            }
-          }
-          const parent = nodeToRelocate.__parentNode || nodeToRelocate.parentNode;
-          const nextSibling = nodeToRelocate.__nextSibling || nodeToRelocate.nextSibling;
-          if (!insertBeforeNode && parentNodeRef !== parent || nextSibling !== insertBeforeNode) {
-            if (nodeToRelocate !== insertBeforeNode) {
-              if (!nodeToRelocate["s-hn"] && nodeToRelocate["s-ol"]) {
-                nodeToRelocate["s-hn"] = nodeToRelocate["s-ol"].parentNode.nodeName;
-              }
-              insertBefore(parentNodeRef, nodeToRelocate, insertBeforeNode);
-              if (nodeToRelocate.nodeType === 1 /* ElementNode */ && nodeToRelocate.tagName !== "SLOT-FB") {
-                nodeToRelocate.hidden = (_c = nodeToRelocate["s-ih"]) != null ? _c : false;
-              }
-            }
-          }
-          nodeToRelocate && typeof slotRefNode["s-rf"] === "function" && slotRefNode["s-rf"](slotRefNode);
-        } else {
-          if (nodeToRelocate.nodeType === 1 /* ElementNode */) {
-            if (isInitialLoad) {
-              nodeToRelocate["s-ih"] = (_d = nodeToRelocate.hidden) != null ? _d : false;
-            }
-            nodeToRelocate.hidden = true;
-          }
-        }
-      }
-    }
-    if (checkSlotFallbackVisibility) {
-      updateFallbackSlotVisibility(rootVnode.$elm$);
-    }
-    plt.$flags$ &= -2 /* isTmpDisconnected */;
-    relocateNodes.length = 0;
-  }
-  contentRef = void 0;
-};
-// src/runtime/update-component.ts
-var attachToAncestor = (hostRef, ancestorComponent) => {
-  if (ancestorComponent && !hostRef.$onRenderResolve$ && ancestorComponent["s-p"]) {
-    const index = ancestorComponent["s-p"].push(
-      new Promise(
-        (r) => hostRef.$onRenderResolve$ = () => {
-          ancestorComponent["s-p"].splice(index - 1, 1);
-          r();
-        }
-      )
-    );
-  }
-};
-var scheduleUpdate = (hostRef, isInitialLoad) => {
-  {
-    hostRef.$flags$ |= 16 /* isQueuedForUpdate */;
-  }
-  if (hostRef.$flags$ & 4 /* isWaitingForChildren */) {
-    hostRef.$flags$ |= 512 /* needsRerender */;
-    return;
-  }
-  attachToAncestor(hostRef, hostRef.$ancestorComponent$);
-  const dispatch = () => dispatchHooks(hostRef, isInitialLoad);
-  return writeTask(dispatch) ;
-};
-var dispatchHooks = (hostRef, isInitialLoad) => {
-  const elm = hostRef.$hostElement$;
-  const endSchedule = createTime("scheduleUpdate", hostRef.$cmpMeta$.$tagName$);
-  const instance = hostRef.$lazyInstance$ ;
-  if (!instance) {
-    throw new Error(
-      `Can't render component <${elm.tagName.toLowerCase()} /> with invalid Stencil runtime! Make sure this imported component is compiled with a \`externalRuntime: true\` flag. For more information, please refer to https://stenciljs.com/docs/custom-elements#externalruntime`
-    );
-  }
-  let maybePromise;
-  if (isInitialLoad) {
-    {
-      hostRef.$flags$ |= 256 /* isListenReady */;
-      if (hostRef.$queuedListeners$) {
-        hostRef.$queuedListeners$.map(([methodName, event]) => safeCall(instance, methodName, event, elm));
-        hostRef.$queuedListeners$ = void 0;
-      }
-    }
-    maybePromise = safeCall(instance, "componentWillLoad", void 0, elm);
-  } else {
-    maybePromise = safeCall(instance, "componentWillUpdate", void 0, elm);
-  }
-  maybePromise = enqueue(maybePromise, () => safeCall(instance, "componentWillRender", void 0, elm));
-  endSchedule();
-  return enqueue(maybePromise, () => updateComponent(hostRef, instance, isInitialLoad));
-};
-var enqueue = (maybePromise, fn) => isPromisey(maybePromise) ? maybePromise.then(fn).catch((err2) => {
-  console.error(err2);
-  fn();
-}) : fn();
-var isPromisey = (maybePromise) => maybePromise instanceof Promise || maybePromise && maybePromise.then && typeof maybePromise.then === "function";
-var updateComponent = async (hostRef, instance, isInitialLoad) => {
-  var _a;
-  const elm = hostRef.$hostElement$;
-  const endUpdate = createTime("update", hostRef.$cmpMeta$.$tagName$);
-  const rc = elm["s-rc"];
-  if (isInitialLoad) {
-    attachStyles(hostRef);
-  }
-  const endRender = createTime("render", hostRef.$cmpMeta$.$tagName$);
-  {
-    callRender(hostRef, instance, elm, isInitialLoad);
-  }
-  if (rc) {
-    rc.map((cb) => cb());
-    elm["s-rc"] = void 0;
-  }
-  endRender();
-  endUpdate();
-  {
-    const childrenPromises = (_a = elm["s-p"]) != null ? _a : [];
-    const postUpdate = () => postUpdateComponent(hostRef);
-    if (childrenPromises.length === 0) {
-      postUpdate();
-    } else {
-      Promise.all(childrenPromises).then(postUpdate);
-      hostRef.$flags$ |= 4 /* isWaitingForChildren */;
-      childrenPromises.length = 0;
-    }
-  }
-};
-var callRender = (hostRef, instance, elm, isInitialLoad) => {
-  try {
-    instance = instance.render() ;
-    {
-      hostRef.$flags$ &= -17 /* isQueuedForUpdate */;
-    }
-    {
-      hostRef.$flags$ |= 2 /* hasRendered */;
-    }
-    {
-      {
-        {
-          renderVdom(hostRef, instance, isInitialLoad);
-        }
-      }
-    }
-  } catch (e) {
-    consoleError(e, hostRef.$hostElement$);
-  }
-  return null;
-};
-var postUpdateComponent = (hostRef) => {
-  const tagName = hostRef.$cmpMeta$.$tagName$;
-  const elm = hostRef.$hostElement$;
-  const endPostUpdate = createTime("postUpdate", tagName);
-  const instance = hostRef.$lazyInstance$ ;
-  const ancestorComponent = hostRef.$ancestorComponent$;
-  safeCall(instance, "componentDidRender", void 0, elm);
-  if (!(hostRef.$flags$ & 64 /* hasLoadedComponent */)) {
-    hostRef.$flags$ |= 64 /* hasLoadedComponent */;
-    {
-      addHydratedFlag(elm);
-    }
-    safeCall(instance, "componentDidLoad", void 0, elm);
-    endPostUpdate();
-    {
-      hostRef.$onReadyResolve$(elm);
-      if (!ancestorComponent) {
-        appDidLoad();
-      }
-    }
-  } else {
-    safeCall(instance, "componentDidUpdate", void 0, elm);
-    endPostUpdate();
-  }
-  {
-    hostRef.$onInstanceResolve$(elm);
-  }
-  {
-    if (hostRef.$onRenderResolve$) {
-      hostRef.$onRenderResolve$();
-      hostRef.$onRenderResolve$ = void 0;
-    }
-    if (hostRef.$flags$ & 512 /* needsRerender */) {
-      nextTick(() => scheduleUpdate(hostRef, false));
-    }
-    hostRef.$flags$ &= -517;
-  }
-};
-var appDidLoad = (who) => {
-  nextTick(() => emitEvent(win, "appload", { detail: { namespace: NAMESPACE } }));
-};
-var safeCall = (instance, method, arg, elm) => {
-  if (instance && instance[method]) {
-    try {
-      return instance[method](arg);
-    } catch (e) {
-      consoleError(e, elm);
-    }
-  }
-  return void 0;
-};
-var addHydratedFlag = (elm) => {
-  var _a;
-  return elm.classList.add((_a = BUILD.hydratedSelectorName) != null ? _a : "hydrated") ;
-};
-// src/runtime/set-value.ts
-var getValue = (ref, propName) => getHostRef(ref).$instanceValues$.get(propName);
-var setValue = (ref, propName, newVal, cmpMeta) => {
-  const hostRef = getHostRef(ref);
-  if (!hostRef) {
-    throw new Error(
-      `Couldn't find host element for "${cmpMeta.$tagName$}" as it is unknown to this Stencil runtime. This usually happens when integrating a 3rd party Stencil component with another Stencil component or application. Please reach out to the maintainers of the 3rd party Stencil component or report this on the Stencil Discord server (https://chat.stenciljs.com) or comment on this similar [GitHub issue](https://github.com/stenciljs/core/issues/5457).`
-    );
-  }
-  const elm = hostRef.$hostElement$ ;
-  const oldVal = hostRef.$instanceValues$.get(propName);
-  const flags = hostRef.$flags$;
-  const instance = hostRef.$lazyInstance$ ;
-  newVal = parsePropertyValue(
-    newVal,
-    cmpMeta.$members$[propName][0]);
-  const areBothNaN = Number.isNaN(oldVal) && Number.isNaN(newVal);
-  const didValueChange = newVal !== oldVal && !areBothNaN;
-  if ((!(flags & 8 /* isConstructingInstance */) || oldVal === void 0) && didValueChange) {
-    hostRef.$instanceValues$.set(propName, newVal);
-    if (instance) {
-      if (cmpMeta.$watchers$ && flags & 128 /* isWatchReady */) {
-        const watchMethods = cmpMeta.$watchers$[propName];
-        if (watchMethods) {
-          watchMethods.map((watchMethodName) => {
-            try {
-              instance[watchMethodName](newVal, oldVal, propName);
-            } catch (e) {
-              consoleError(e, elm);
-            }
-          });
-        }
-      }
-      if ((flags & (2 /* hasRendered */ | 16 /* isQueuedForUpdate */)) === 2 /* hasRendered */) {
-        if (instance.componentShouldUpdate) {
-          if (instance.componentShouldUpdate(newVal, oldVal, propName) === false) {
-            return;
-          }
-        }
-        scheduleUpdate(hostRef, false);
-      }
-    }
-  }
-};
-// src/runtime/proxy-component.ts
-var proxyComponent = (Cstr, cmpMeta, flags) => {
-  var _a, _b;
-  const prototype = Cstr.prototype;
-  if (cmpMeta.$members$ || (cmpMeta.$watchers$ || Cstr.watchers)) {
-    if (Cstr.watchers && !cmpMeta.$watchers$) {
-      cmpMeta.$watchers$ = Cstr.watchers;
-    }
-    const members = Object.entries((_a = cmpMeta.$members$) != null ? _a : {});
-    members.map(([memberName, [memberFlags]]) => {
-      if ((memberFlags & 31 /* Prop */ || (flags & 2 /* proxyState */) && memberFlags & 32 /* State */)) {
-        const { get: origGetter, set: origSetter } = Object.getOwnPropertyDescriptor(prototype, memberName) || {};
-        if (origGetter) cmpMeta.$members$[memberName][0] |= 2048 /* Getter */;
-        if (origSetter) cmpMeta.$members$[memberName][0] |= 4096 /* Setter */;
-        if (flags & 1 /* isElementConstructor */ || !origGetter) {
-          Object.defineProperty(prototype, memberName, {
-            get() {
-              {
-                if ((cmpMeta.$members$[memberName][0] & 2048 /* Getter */) === 0) {
-                  return getValue(this, memberName);
-                }
-                const ref = getHostRef(this);
-                const instance = ref ? ref.$lazyInstance$ : prototype;
-                if (!instance) return;
-                return instance[memberName];
-              }
-            },
-            configurable: true,
-            enumerable: true
-          });
-        }
-        Object.defineProperty(prototype, memberName, {
-          set(newValue) {
-            const ref = getHostRef(this);
-            if (origSetter) {
-              const currentValue = memberFlags & 32 /* State */ ? this[memberName] : ref.$hostElement$[memberName];
-              if (typeof currentValue === "undefined" && ref.$instanceValues$.get(memberName)) {
-                newValue = ref.$instanceValues$.get(memberName);
-              } else if (!ref.$instanceValues$.get(memberName) && currentValue) {
-                ref.$instanceValues$.set(memberName, currentValue);
-              }
-              origSetter.apply(this, [
-                parsePropertyValue(
-                  newValue,
-                  memberFlags)
-              ]);
-              newValue = memberFlags & 32 /* State */ ? this[memberName] : ref.$hostElement$[memberName];
-              setValue(this, memberName, newValue, cmpMeta);
-              return;
-            }
-            {
-              if ((flags & 1 /* isElementConstructor */) === 0 || (cmpMeta.$members$[memberName][0] & 4096 /* Setter */) === 0) {
-                setValue(this, memberName, newValue, cmpMeta);
-                if (flags & 1 /* isElementConstructor */ && !ref.$lazyInstance$) {
-                  ref.$onReadyPromise$.then(() => {
-                    if (cmpMeta.$members$[memberName][0] & 4096 /* Setter */ && ref.$lazyInstance$[memberName] !== ref.$instanceValues$.get(memberName)) {
-                      ref.$lazyInstance$[memberName] = newValue;
-                    }
-                  });
-                }
-                return;
-              }
-              const setterSetVal = () => {
-                const currentValue = ref.$lazyInstance$[memberName];
-                if (!ref.$instanceValues$.get(memberName) && currentValue) {
-                  ref.$instanceValues$.set(memberName, currentValue);
-                }
-                ref.$lazyInstance$[memberName] = parsePropertyValue(
-                  newValue,
-                  memberFlags);
-                setValue(this, memberName, ref.$lazyInstance$[memberName], cmpMeta);
-              };
-              if (ref.$lazyInstance$) {
-                setterSetVal();
-              } else {
-                ref.$onReadyPromise$.then(() => setterSetVal());
-              }
-            }
-          }
-        });
-      } else if (flags & 1 /* isElementConstructor */ && memberFlags & 64 /* Method */) {
-        Object.defineProperty(prototype, memberName, {
-          value(...args) {
-            var _a2;
-            const ref = getHostRef(this);
-            return (_a2 = ref == null ? void 0 : ref.$onInstancePromise$) == null ? void 0 : _a2.then(() => {
-              var _a3;
-              return (_a3 = ref.$lazyInstance$) == null ? void 0 : _a3[memberName](...args);
-            });
-          }
-        });
-      }
-    });
-    if ((flags & 1 /* isElementConstructor */)) {
-      const attrNameToPropName = /* @__PURE__ */ new Map();
-      prototype.attributeChangedCallback = function(attrName, oldValue, newValue) {
-        plt.jmp(() => {
-          var _a2;
-          const propName = attrNameToPropName.get(attrName);
-          if (this.hasOwnProperty(propName) && BUILD.lazyLoad) {
-            newValue = this[propName];
-            delete this[propName];
-          } else if (prototype.hasOwnProperty(propName) && typeof this[propName] === "number" && // cast type to number to avoid TS compiler issues
-          this[propName] == newValue) {
-            return;
-          } else if (propName == null) {
-            const hostRef = getHostRef(this);
-            const flags2 = hostRef == null ? void 0 : hostRef.$flags$;
-            if (flags2 && !(flags2 & 8 /* isConstructingInstance */) && flags2 & 128 /* isWatchReady */ && newValue !== oldValue) {
-              const instance = hostRef.$lazyInstance$ ;
-              const entry = (_a2 = cmpMeta.$watchers$) == null ? void 0 : _a2[attrName];
-              entry == null ? void 0 : entry.forEach((callbackName) => {
-                if (instance[callbackName] != null) {
-                  instance[callbackName].call(instance, newValue, oldValue, attrName);
-                }
-              });
-            }
-            return;
-          }
-          const propDesc = Object.getOwnPropertyDescriptor(prototype, propName);
-          newValue = newValue === null && typeof this[propName] === "boolean" ? false : newValue;
-          if (newValue !== this[propName] && (!propDesc.get || !!propDesc.set)) {
-            this[propName] = newValue;
-          }
-        });
-      };
-      Cstr.observedAttributes = Array.from(
-        /* @__PURE__ */ new Set([
-          ...Object.keys((_b = cmpMeta.$watchers$) != null ? _b : {}),
-          ...members.filter(([_, m]) => m[0] & 15 /* HasAttribute */).map(([propName, m]) => {
-            var _a2;
-            const attrName = m[1] || propName;
-            attrNameToPropName.set(attrName, propName);
-            if (m[0] & 512 /* ReflectAttr */) {
-              (_a2 = cmpMeta.$attrsToReflect$) == null ? void 0 : _a2.push([propName, attrName]);
-            }
-            return attrName;
-          })
-        ])
-      );
-    }
-  }
-  return Cstr;
-};
-// src/runtime/initialize-component.ts
-var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
-  let Cstr;
-  if ((hostRef.$flags$ & 32 /* hasInitializedComponent */) === 0) {
-    hostRef.$flags$ |= 32 /* hasInitializedComponent */;
-    const bundleId = cmpMeta.$lazyBundleId$;
-    if (bundleId) {
-      const CstrImport = loadModule(cmpMeta, hostRef);
-      if (CstrImport && "then" in CstrImport) {
-        const endLoad = uniqueTime();
-        Cstr = await CstrImport;
-        endLoad();
-      } else {
-        Cstr = CstrImport;
-      }
-      if (!Cstr) {
-        throw new Error(`Constructor for "${cmpMeta.$tagName$}#${hostRef.$modeName$}" was not found`);
-      }
-      if (!Cstr.isProxied) {
-        {
-          cmpMeta.$watchers$ = Cstr.watchers;
-        }
-        proxyComponent(Cstr, cmpMeta, 2 /* proxyState */);
-        Cstr.isProxied = true;
-      }
-      const endNewInstance = createTime("createInstance", cmpMeta.$tagName$);
-      {
-        hostRef.$flags$ |= 8 /* isConstructingInstance */;
-      }
-      try {
-        new Cstr(hostRef);
-      } catch (e) {
-        consoleError(e, elm);
-      }
-      {
-        hostRef.$flags$ &= -9 /* isConstructingInstance */;
-      }
-      {
-        hostRef.$flags$ |= 128 /* isWatchReady */;
-      }
-      endNewInstance();
-      fireConnectedCallback(hostRef.$lazyInstance$, elm);
-    } else {
-      Cstr = elm.constructor;
-      const cmpTag = elm.localName;
-      customElements.whenDefined(cmpTag).then(() => hostRef.$flags$ |= 128 /* isWatchReady */);
-    }
-    if (Cstr && Cstr.style) {
-      let style;
-      if (typeof Cstr.style === "string") {
-        style = Cstr.style;
-      }
-      const scopeId2 = getScopeId(cmpMeta);
-      if (!styles.has(scopeId2)) {
-        const endRegisterStyles = createTime("registerStyles", cmpMeta.$tagName$);
-        registerStyle(scopeId2, style, !!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */));
-        endRegisterStyles();
-      }
-    }
-  }
-  const ancestorComponent = hostRef.$ancestorComponent$;
-  const schedule = () => scheduleUpdate(hostRef, true);
-  if (ancestorComponent && ancestorComponent["s-rc"]) {
-    ancestorComponent["s-rc"].push(schedule);
-  } else {
-    schedule();
-  }
-};
-var fireConnectedCallback = (instance, elm) => {
-  {
-    safeCall(instance, "connectedCallback", void 0, elm);
-  }
-};
-// src/runtime/connected-callback.ts
-var connectedCallback = (elm) => {
-  if ((plt.$flags$ & 1 /* isTmpDisconnected */) === 0) {
-    const hostRef = getHostRef(elm);
-    const cmpMeta = hostRef.$cmpMeta$;
-    const endConnected = createTime("connectedCallback", cmpMeta.$tagName$);
-    if (!(hostRef.$flags$ & 1 /* hasConnected */)) {
-      hostRef.$flags$ |= 1 /* hasConnected */;
-      let hostId;
-      {
-        hostId = elm.getAttribute(HYDRATE_ID);
-        if (hostId) {
-          if (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
-            const scopeId2 = addStyle(elm.shadowRoot, cmpMeta);
-            elm.classList.remove(scopeId2 + "-h", scopeId2 + "-s");
-          } else if (cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */) {
-            const scopeId2 = getScopeId(cmpMeta);
-            elm["s-sc"] = scopeId2;
-          }
-          initializeClientHydrate(elm, cmpMeta.$tagName$, hostId, hostRef);
-        }
-      }
-      if (!hostId) {
-        if (// TODO(STENCIL-854): Remove code related to legacy shadowDomShim field
-        cmpMeta.$flags$ & (4 /* hasSlotRelocation */ | 8 /* needsShadowDomShim */)) {
-          setContentReference(elm);
-        }
-      }
-      {
-        let ancestorComponent = elm;
-        while (ancestorComponent = ancestorComponent.parentNode || ancestorComponent.host) {
-          if (ancestorComponent.nodeType === 1 /* ElementNode */ && ancestorComponent.hasAttribute("s-id") && ancestorComponent["s-p"] || ancestorComponent["s-p"]) {
-            attachToAncestor(hostRef, hostRef.$ancestorComponent$ = ancestorComponent);
-            break;
-          }
-        }
-      }
-      if (cmpMeta.$members$) {
-        Object.entries(cmpMeta.$members$).map(([memberName, [memberFlags]]) => {
-          if (memberFlags & 31 /* Prop */ && elm.hasOwnProperty(memberName)) {
-            const value = elm[memberName];
-            delete elm[memberName];
-            elm[memberName] = value;
-          }
-        });
-      }
-      {
-        initializeComponent(elm, hostRef, cmpMeta);
-      }
-    } else {
-      addHostEventListeners(elm, hostRef, cmpMeta.$listeners$);
-      if (hostRef == null ? void 0 : hostRef.$lazyInstance$) {
-        fireConnectedCallback(hostRef.$lazyInstance$, elm);
-      } else if (hostRef == null ? void 0 : hostRef.$onReadyPromise$) {
-        hostRef.$onReadyPromise$.then(() => fireConnectedCallback(hostRef.$lazyInstance$, elm));
-      }
-    }
-    endConnected();
-  }
-};
-var setContentReference = (elm) => {
-  if (!win.document) {
-    return;
-  }
-  const contentRefElm = elm["s-cr"] = win.document.createComment(
-    ""
-  );
-  contentRefElm["s-cn"] = true;
-  insertBefore(elm, contentRefElm, elm.firstChild);
-};
-var disconnectInstance = (instance, elm) => {
-  {
-    safeCall(instance, "disconnectedCallback", void 0, elm || instance);
-  }
-};
-var disconnectedCallback = async (elm) => {
-  if ((plt.$flags$ & 1 /* isTmpDisconnected */) === 0) {
-    const hostRef = getHostRef(elm);
-    {
-      if (hostRef.$rmListeners$) {
-        hostRef.$rmListeners$.map((rmListener) => rmListener());
-        hostRef.$rmListeners$ = void 0;
-      }
-    }
-    if (hostRef == null ? void 0 : hostRef.$lazyInstance$) {
-      disconnectInstance(hostRef.$lazyInstance$, elm);
-    } else if (hostRef == null ? void 0 : hostRef.$onReadyPromise$) {
-      hostRef.$onReadyPromise$.then(() => disconnectInstance(hostRef.$lazyInstance$, elm));
-    }
-  }
-  if (rootAppliedStyles.has(elm)) {
-    rootAppliedStyles.delete(elm);
-  }
-  if (elm.shadowRoot && rootAppliedStyles.has(elm.shadowRoot)) {
-    rootAppliedStyles.delete(elm.shadowRoot);
-  }
-};
-// src/runtime/bootstrap-lazy.ts
-var bootstrapLazy = (lazyBundles, options = {}) => {
-  var _a;
-  if (!win.document) {
-    console.warn("Stencil: No document found. Skipping bootstrapping lazy components.");
-    return;
-  }
-  const endBootstrap = createTime();
-  const cmpTags = [];
-  const exclude = options.exclude || [];
-  const customElements2 = win.customElements;
-  const head = win.document.head;
-  const metaCharset = /* @__PURE__ */ head.querySelector("meta[charset]");
-  const dataStyles = /* @__PURE__ */ win.document.createElement("style");
-  const deferredConnectedCallbacks = [];
-  let appLoadFallback;
-  let isBootstrapping = true;
-  Object.assign(plt, options);
-  plt.$resourcesUrl$ = new URL(options.resourcesUrl || "./", win.document.baseURI).href;
-  {
-    plt.$flags$ |= 2 /* appLoaded */;
-  }
-  {
-    hydrateScopedToShadow();
-  }
-  let hasSlotRelocation = false;
-  lazyBundles.map((lazyBundle) => {
-    lazyBundle[1].map((compactMeta) => {
-      var _a2;
-      const cmpMeta = {
-        $flags$: compactMeta[0],
-        $tagName$: compactMeta[1],
-        $members$: compactMeta[2],
-        $listeners$: compactMeta[3]
-      };
-      if (cmpMeta.$flags$ & 4 /* hasSlotRelocation */) {
-        hasSlotRelocation = true;
-      }
-      {
-        cmpMeta.$members$ = compactMeta[2];
-      }
-      {
-        cmpMeta.$listeners$ = compactMeta[3];
-      }
-      {
-        cmpMeta.$attrsToReflect$ = [];
-      }
-      {
-        cmpMeta.$watchers$ = (_a2 = compactMeta[4]) != null ? _a2 : {};
-      }
-      const tagName = cmpMeta.$tagName$;
-      const HostElement = class extends HTMLElement {
-        // StencilLazyHost
-        constructor(self) {
-          super(self);
-          this.hasRegisteredEventListeners = false;
-          self = this;
-          registerHost(self, cmpMeta);
-          if (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
-            {
-              if (!self.shadowRoot) {
-                createShadowRoot.call(self, cmpMeta);
-              } else {
-                if (self.shadowRoot.mode !== "open") {
-                  throw new Error(
-                    `Unable to re-use existing shadow root for ${cmpMeta.$tagName$}! Mode is set to ${self.shadowRoot.mode} but Stencil only supports open shadow roots.`
-                  );
-                }
-              }
-            }
-          }
-        }
-        connectedCallback() {
-          const hostRef = getHostRef(this);
-          if (!this.hasRegisteredEventListeners) {
-            this.hasRegisteredEventListeners = true;
-            addHostEventListeners(this, hostRef, cmpMeta.$listeners$);
-          }
-          if (appLoadFallback) {
-            clearTimeout(appLoadFallback);
-            appLoadFallback = null;
-          }
-          if (isBootstrapping) {
-            deferredConnectedCallbacks.push(this);
-          } else {
-            plt.jmp(() => connectedCallback(this));
-          }
-        }
-        disconnectedCallback() {
-          plt.jmp(() => disconnectedCallback(this));
-          plt.raf(() => {
-            var _a3;
-            const hostRef = getHostRef(this);
-            const i2 = deferredConnectedCallbacks.findIndex((host) => host === this);
-            if (i2 > -1) {
-              deferredConnectedCallbacks.splice(i2, 1);
-            }
-            if (((_a3 = hostRef == null ? void 0 : hostRef.$vnode$) == null ? void 0 : _a3.$elm$) instanceof Node && !hostRef.$vnode$.$elm$.isConnected) {
-              delete hostRef.$vnode$.$elm$;
-            }
-          });
-        }
-        componentOnReady() {
-          return getHostRef(this).$onReadyPromise$;
-        }
-      };
-      cmpMeta.$lazyBundleId$ = lazyBundle[0];
-      if (!exclude.includes(tagName) && !customElements2.get(tagName)) {
-        cmpTags.push(tagName);
-        customElements2.define(
-          tagName,
-          proxyComponent(HostElement, cmpMeta, 1 /* isElementConstructor */)
-        );
-      }
-    });
-  });
-  if (cmpTags.length > 0) {
-    if (hasSlotRelocation) {
-      dataStyles.textContent += SLOT_FB_CSS;
-    }
-    {
-      dataStyles.textContent += cmpTags.sort() + HYDRATED_CSS;
-    }
-    if (dataStyles.innerHTML.length) {
-      dataStyles.setAttribute("data-styles", "");
-      const nonce = (_a = plt.$nonce$) != null ? _a : queryNonceMetaTagContent(win.document);
-      if (nonce != null) {
-        dataStyles.setAttribute("nonce", nonce);
-      }
-      head.insertBefore(dataStyles, metaCharset ? metaCharset.nextSibling : head.firstChild);
-    }
-  }
-  isBootstrapping = false;
-  if (deferredConnectedCallbacks.length) {
-    deferredConnectedCallbacks.map((host) => host.connectedCallback());
-  } else {
-    {
-      plt.jmp(() => appLoadFallback = setTimeout(appDidLoad, 30));
-    }
-  }
-  endBootstrap();
-};
-var addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) => {
-  if (listeners && win.document) {
-    listeners.map(([flags, name, method]) => {
-      const target = getHostListenerTarget(win.document, elm, flags) ;
-      const handler = hostListenerProxy(hostRef, method);
-      const opts = hostListenerOpts(flags);
-      plt.ael(target, name, handler, opts);
-      (hostRef.$rmListeners$ = hostRef.$rmListeners$ || []).push(() => plt.rel(target, name, handler, opts));
-    });
-  }
-};
-var hostListenerProxy = (hostRef, methodName) => (ev) => {
-  var _a;
-  try {
-    {
-      if (hostRef.$flags$ & 256 /* isListenReady */) {
-        (_a = hostRef.$lazyInstance$) == null ? void 0 : _a[methodName](ev);
-      } else {
-        (hostRef.$queuedListeners$ = hostRef.$queuedListeners$ || []).push([methodName, ev]);
-      }
-    }
-  } catch (e) {
-    consoleError(e, hostRef.$hostElement$);
-  }
-};
-var getHostListenerTarget = (doc, elm, flags) => {
-  if (flags & 4 /* TargetDocument */) {
-    return doc;
-  }
-  if (flags & 8 /* TargetWindow */) {
-    return win;
-  }
-  return elm;
-};
-var hostListenerOpts = (flags) => supportsListenerOptions ? {
-  passive: (flags & 1 /* Passive */) !== 0,
-  capture: (flags & 2 /* Capture */) !== 0
-} : (flags & 2 /* Capture */) !== 0;
-// src/runtime/nonce.ts
-var setNonce = (nonce) => plt.$nonce$ = nonce;
-export { Host as H, getAssetPath as a, bootstrapLazy as b, createEvent as c, getElement as d, globalScripts as g, h, promiseResolve as p, registerInstance as r, setNonce as s };
-//# sourceMappingURL=index-PBFNUZjj.js.map
-//# sourceMappingURL=index-PBFNUZjj.js.map