@actabldesign/bellhop-core 0.0.3

package/collection/components/bh-chart-tooltip/bh-chart-tooltip.css

@@ -0,0 +1,301 @@
+/**
+ * BellhopOS Stencil Global Styles
+ *
+ * This file imports all design tokens and provides global CSS custom properties
+ * that are available to all Stencil components.
+ */
+
+/* ==========================================================================
+   FONT IMPORTS
+   ========================================================================== */
+
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap');
+
+/* ==========================================================================
+   DESIGN TOKENS
+   ========================================================================== */
+
+:root {
+  /* -------------------------------------------------------------------------
+     COLORS - Primary
+     ------------------------------------------------------------------------- */
+  --color-white: hsl(0, 0%, 100%);
+  --color-black: hsl(0, 0%, 0%);
+  --color-transparent: hsla(0, 0%, 100%, 0);
+
+  /* Neutral */
+  --color-neutral-25: hsl(240, 20%, 99%);
+  --color-neutral-50: hsl(240, 20%, 98%);
+  --color-neutral-100: hsl(240, 17%, 95%);
+  --color-neutral-200: hsl(227, 25%, 89%);
+  --color-neutral-300: hsl(224, 24%, 78%);
+  --color-neutral-400: hsl(226, 24%, 59%);
+  --color-neutral-500: hsl(226, 24%, 48%);
+  --color-neutral-600: hsl(226, 24%, 38%);
+  --color-neutral-700: hsl(226, 24%, 25%);
+  --color-neutral-800: hsl(233, 33%, 10%);
+  --color-neutral-900: hsl(231, 32%, 8%);
+  --color-neutral-950: hsl(231, 32%, 8%);
+
+  /* Brand */
+  --color-brand-25: hsl(220, 82%, 98%);
+  --color-brand-50: hsl(222, 87%, 97%);
+  --color-brand-100: hsl(221, 94%, 94%);
+  --color-brand-200: hsl(221, 92%, 86%);
+  --color-brand-300: hsl(224, 95%, 77%);
+  --color-brand-400: hsl(224, 94%, 72%);
+  --color-brand-500: hsl(230, 67%, 58%);
+  --color-brand-600: hsl(230, 69%, 48%);
+  --color-brand-700: hsl(230, 75%, 34%);
+  --color-brand-800: hsl(243, 86%, 44%);
+  --color-brand-900: hsl(237, 69%, 24%);
+  --color-brand-950: hsl(237, 61%, 20%);
+
+  /* Error */
+  --color-error-25: hsl(12, 100%, 99%);
+  --color-error-50: hsl(5, 86%, 97%);
+  --color-error-100: hsl(4, 93%, 94%);
+  --color-error-200: hsl(3, 96%, 89%);
+  --color-error-300: hsl(4, 96%, 80%);
+  --color-error-400: hsl(4, 92%, 69%);
+  --color-error-500: hsl(4, 86%, 58%);
+  --color-error-600: hsl(4, 74%, 49%);
+  --color-error-700: hsl(4, 76%, 40%);
+  --color-error-800: hsl(4, 72%, 33%);
+  --color-error-900: hsl(8, 65%, 29%);
+  --color-error-950: hsl(8, 75%, 19%);
+
+  /* Warning */
+  --color-warning-25: hsl(42, 100%, 98%);
+  --color-warning-50: hsl(45, 100%, 96%);
+  --color-warning-100: hsl(45, 96%, 89%);
+  --color-warning-200: hsl(44, 98%, 77%);
+  --color-warning-300: hsl(42, 99%, 65%);
+  --color-warning-400: hsl(39, 98%, 56%);
+  --color-warning-500: hsl(34, 94%, 50%);
+  --color-warning-600: hsl(28, 97%, 44%);
+  --color-warning-700: hsl(22, 92%, 37%);
+  --color-warning-800: hsl(19, 84%, 31%);
+  --color-warning-900: hsl(18, 79%, 27%);
+  --color-warning-950: hsl(17, 79%, 17%);
+
+  /* Success */
+  --color-success-25: hsl(142, 80%, 98%);
+  --color-success-50: hsl(145, 81%, 96%);
+  --color-success-100: hsl(140, 80%, 90%);
+  --color-success-200: hsl(144, 78%, 80%);
+  --color-success-300: hsl(148, 63%, 67%);
+  --color-success-400: hsl(150, 57%, 54%);
+  --color-success-500: hsl(152, 77%, 39%);
+  --color-success-600: hsl(153, 91%, 30%);
+  --color-success-700: hsl(155, 90%, 24%);
+  --color-success-800: hsl(155, 84%, 20%);
+  --color-success-900: hsl(156, 83%, 16%);
+  --color-success-950: hsl(157, 82%, 11%);
+
+  /* -------------------------------------------------------------------------
+     TYPOGRAPHY
+     ------------------------------------------------------------------------- */
+  --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI',
+    Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    'Liberation Mono', 'Courier New', monospace;
+
+  /* Weights */
+  --weight-regular: 400;
+  --weight-medium: 500;
+  --weight-semibold: 600;
+  --weight-bold: 700;
+
+  /* Text Sizes */
+  --text-xl-size: 1.25rem;
+  --text-lg-size: 1.125rem;
+  --text-md-size: 1rem;
+  --text-sm-size: 0.875rem;
+  --text-xs-size: 0.75rem;
+
+  /* Line Heights */
+  --text-xl-line: 1.875rem;
+  --text-lg-line: 1.75rem;
+  --text-md-line: 1.5rem;
+  --text-sm-line: 1.25rem;
+  --text-xs-line: 1.125rem;
+
+  /* -------------------------------------------------------------------------
+     SPACING
+     ------------------------------------------------------------------------- */
+  --spacing-none: 0rem;
+  --spacing-xxs: 0.125rem;
+  --spacing-xs: 0.25rem;
+  --spacing-sm: 0.375rem;
+  --spacing-md: 0.5rem;
+  --spacing-lg: 0.75rem;
+  --spacing-xl: 1rem;
+  --spacing-2xl: 1.25rem;
+  --spacing-3xl: 1.5rem;
+  --spacing-4xl: 2rem;
+  --spacing-5xl: 2.5rem;
+  --spacing-6xl: 3rem;
+
+  /* -------------------------------------------------------------------------
+     RADIUS
+     ------------------------------------------------------------------------- */
+  --radius-none: 0rem;
+  --radius-xxs: 0.125rem;
+  --radius-xs: 0.25rem;
+  --radius-sm: 0.375rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.625rem;
+  --radius-xl: 0.75rem;
+  --radius-2xl: 1rem;
+  --radius-3xl: 1.25rem;
+  --radius-4xl: 1.5rem;
+  --radius-full: 9999px;
+
+  /* -------------------------------------------------------------------------
+     SHADOWS
+     ------------------------------------------------------------------------- */
+  --shadow-xs: 0px 1px 2px rgba(16, 24, 40, 0.05);
+  --shadow-sm: 0px 1px 3px rgba(16, 24, 40, 0.1),
+    0px 1px 2px rgba(16, 24, 40, 0.06);
+  --shadow-md: 0px 4px 8px -2px rgba(16, 24, 40, 0.1),
+    0px 2px 4px -2px rgba(16, 24, 40, 0.06);
+  --shadow-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.08),
+    0px 4px 6px -2px rgba(16, 24, 40, 0.03);
+  --shadow-xl: 0px 20px 24px -4px rgba(16, 24, 40, 0.08),
+    0px 8px 8px -4px rgba(16, 24, 40, 0.03);
+
+  /* -------------------------------------------------------------------------
+     ICON COMPENSATION (for buttons with icons)
+     ------------------------------------------------------------------------- */
+  --icon-compensation-xs-btn: calc(var(--spacing-lg) - var(--spacing-xs));
+  --icon-compensation-sm-btn: calc(var(--spacing-xl) - var(--spacing-xs));
+  --icon-compensation-md-btn: calc(var(--spacing-xl) - var(--spacing-xs));
+  --icon-compensation-lg-btn: calc(var(--spacing-xl) - var(--spacing-xs));
+}
+
+/* ==========================================================================
+   BASE STYLES
+   ========================================================================== */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* Material Symbols base styling */
+.material-symbols-outlined {
+  font-family: 'Material Symbols Outlined';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  font-feature-settings: 'liga';
+  -webkit-font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+}
+
+
+:host {
+  display: block;
+}
+
+.chart-tooltip {
+  position: fixed;
+  z-index: 10000;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+  transform: translate(-50%, -100%);
+  margin-top: var(--spacing-sm);
+  width: max-content;
+  min-width: 120px;
+  max-width: 240px;
+}
+
+.chart-tooltip.storybook-mode {
+  position: absolute;
+  transform: translate(-50%, -100%);
+  margin-top: -10px;
+}
+
+.chart-tooltip.visible {
+  opacity: 1;
+}
+
+.tooltip-content {
+  background: var(--color-white);
+  color: var(--color-neutral-900);
+  padding: var(--spacing-sm) var(--spacing-md);
+  border-radius: var(--radius-md);
+  font-family: var(--font-inter);
+  font-size: var(--text-xs-size);
+  line-height: var(--text-xs-line);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12), 0 0 1px rgba(0, 0, 0, 0.08);
+  border: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+.tooltip-header {
+  font-weight: var(--weight-semibold);
+  margin-bottom: var(--spacing-xs);
+  padding-bottom: var(--spacing-xs);
+  border-bottom: 1px solid var(--color-neutral-100);
+}
+
+.tooltip-items {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+}
+
+.tooltip-item {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  white-space: nowrap;
+}
+
+.tooltip-dot {
+  width: var(--spacing-sm);
+  height: var(--spacing-sm);
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.tooltip-label {
+  color: var(--color-neutral-600);
+  font-weight: var(--weight-regular);
+  flex-shrink: 0;
+}
+
+.tooltip-value {
+  color: var(--color-neutral-900);
+  font-weight: var(--weight-medium);
+}
+
+.tooltip-total {
+  margin-top: var(--spacing-xs);
+  padding-top: var(--spacing-xs);
+  border-top: 1px solid var(--color-neutral-100);
+  display: flex;
+  justify-content: space-between;
+  gap: var(--spacing-md);
+}
+
+.total-label {
+  color: var(--color-neutral-600);
+  font-weight: var(--weight-medium);
+}
+
+.total-value {
+  color: var(--color-neutral-900);
+  font-weight: var(--weight-semibold);
+}

package/collection/components/bh-chart-tooltip/bh-chart-tooltip.js

@@ -0,0 +1,226 @@
+import { h, Host } from "@stencil/core";
+export class BhChartTooltip {
+    /**
+     * Whether the tooltip is visible
+     */
+    visible = false;
+    /**
+     * X position of the tooltip (in pixels)
+     */
+    x = 0;
+    /**
+     * Y position of the tooltip (in pixels)
+     */
+    y = 0;
+    /**
+     * Header text for the tooltip
+     */
+    header = '';
+    /**
+     * Items to display in the tooltip
+     */
+    items = [];
+    /**
+     * Total value to display
+     */
+    total = '';
+    /**
+     * Whether to show the total
+     */
+    showTotal = false;
+    /**
+     * Whether in storybook mode (for static positioning)
+     */
+    storybookMode = false;
+    render() {
+        return (h(Host, { key: '57397b8dd557ccf795a68896c7f1913fb0bc9b9e' }, h("div", { key: 'ff10c37825a1b62a08b168248b7d05b49fca5a79', class: {
+                'chart-tooltip': true,
+                visible: this.visible,
+                'storybook-mode': this.storybookMode,
+            }, style: {
+                left: `${this.x}px`,
+                top: `${this.y}px`,
+            } }, h("div", { key: '1eec265888955e2d073b85c4e2a5cde44b816233', class: "tooltip-content" }, this.header && h("div", { key: 'b287d571062079c274941e20863562898e1de7de', class: "tooltip-header" }, this.header), h("div", { key: 'f4db62e0a0bc52422546fff47e0fb11abffdf744', class: "tooltip-items" }, this.items.map((item, index) => (h("div", { key: index, class: "tooltip-item" }, item.color && (h("span", { class: "tooltip-dot", style: { backgroundColor: item.color } })), item.label && (h("span", { class: "tooltip-label" }, item.label, ":")), h("span", { class: "tooltip-value" }, item.value))))), this.showTotal && this.total && (h("div", { key: '46ade21e6d662ae224d6e2d019609b270b8e1989', class: "tooltip-total" }, h("span", { key: '8ad8d17c70c5b9a4a6fd98b54db5da98e9025875', class: "total-label" }, "Total:"), h("span", { key: '57e0ee054526971a7e4b8b8e43b2e0c1b685b9e4', class: "total-value" }, this.total)))))));
+    }
+    static get is() { return "bh-chart-tooltip"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bh-chart-tooltip.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bh-chart-tooltip.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "visible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the tooltip is visible"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "visible",
+                "defaultValue": "false"
+            },
+            "x": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "X position of the tooltip (in pixels)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "x",
+                "defaultValue": "0"
+            },
+            "y": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Y position of the tooltip (in pixels)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "y",
+                "defaultValue": "0"
+            },
+            "header": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Header text for the tooltip"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "header",
+                "defaultValue": "''"
+            },
+            "items": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "TooltipItem[]",
+                    "resolved": "TooltipItem[]",
+                    "references": {
+                        "TooltipItem": {
+                            "location": "local",
+                            "path": "/home/runner/work/bellhopos/bellhopos/packages/bellhop-core/src/components/bh-chart-tooltip/bh-chart-tooltip.tsx",
+                            "id": "src/components/bh-chart-tooltip/bh-chart-tooltip.tsx::TooltipItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Items to display in the tooltip"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "total": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Total value to display"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "total",
+                "defaultValue": "''"
+            },
+            "showTotal": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show the total"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-total",
+                "defaultValue": "false"
+            },
+            "storybookMode": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether in storybook mode (for static positioning)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "storybook-mode",
+                "defaultValue": "false"
+            }
+        };
+    }
+}
+//# sourceMappingURL=bh-chart-tooltip.js.map

package/collection/components/bh-chart-tooltip/bh-chart-tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bh-chart-tooltip.js","sourceRoot":"","sources":["../../../src/components/bh-chart-tooltip/bh-chart-tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAazD,MAAM,OAAO,cAAc;IACzB;;OAEG;IACK,OAAO,GAAY,KAAK,CAAC;IAEjC;;OAEG;IACK,CAAC,GAAW,CAAC,CAAC;IAEtB;;OAEG;IACK,CAAC,GAAW,CAAC,CAAC;IAEtB;;OAEG;IACK,MAAM,GAAW,EAAE,CAAC;IAE5B;;OAEG;IACK,KAAK,GAAkB,EAAE,CAAC;IAElC;;OAEG;IACK,KAAK,GAAW,EAAE,CAAC;IAE3B;;OAEG;IACK,SAAS,GAAY,KAAK,CAAC;IAEnC;;OAEG;IACK,aAAa,GAAY,KAAK,CAAC;IAEvC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DACE,KAAK,EAAE;oBACL,eAAe,EAAE,IAAI;oBACrB,OAAO,EAAE,IAAI,CAAC,OAAO;oBACrB,gBAAgB,EAAE,IAAI,CAAC,aAAa;iBACrC,EACD,KAAK,EAAE;oBACL,IAAI,EAAE,GAAG,IAAI,CAAC,CAAC,IAAI;oBACnB,GAAG,EAAE,GAAG,IAAI,CAAC,CAAC,IAAI;iBACnB;gBAED,4DAAK,KAAK,EAAC,iBAAiB;oBACzB,IAAI,CAAC,MAAM,IAAI,4DAAK,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,MAAM,CAAO;oBAC/D,4DAAK,KAAK,EAAC,eAAe,IACvB,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC/B,WAAK,GAAG,EAAE,KAAK,EAAE,KAAK,EAAC,cAAc;wBAClC,IAAI,CAAC,KAAK,IAAI,CACb,YACE,KAAK,EAAC,aAAa,EACnB,KAAK,EAAE,EAAE,eAAe,EAAE,IAAI,CAAC,KAAK,EAAE,GACtC,CACH;wBACA,IAAI,CAAC,KAAK,IAAI,CACb,YAAM,KAAK,EAAC,eAAe;4BAAE,IAAI,CAAC,KAAK;gCAAS,CACjD;wBACD,YAAM,KAAK,EAAC,eAAe,IAAE,IAAI,CAAC,KAAK,CAAQ,CAC3C,CACP,CAAC,CACE;oBACL,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,KAAK,IAAI,CAC/B,4DAAK,KAAK,EAAC,eAAe;wBACxB,6DAAM,KAAK,EAAC,aAAa,aAAc;wBACvC,6DAAM,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,KAAK,CAAQ,CACzC,CACP,CACG,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\n\nexport interface TooltipItem {\n  color?: string;\n  label?: string;\n  value: string;\n}\n\n@Component({\n  tag: 'bh-chart-tooltip',\n  styleUrl: 'bh-chart-tooltip.css',\n  shadow: true,\n})\nexport class BhChartTooltip {\n  /**\n   * Whether the tooltip is visible\n   */\n  @Prop() visible: boolean = false;\n\n  /**\n   * X position of the tooltip (in pixels)\n   */\n  @Prop() x: number = 0;\n\n  /**\n   * Y position of the tooltip (in pixels)\n   */\n  @Prop() y: number = 0;\n\n  /**\n   * Header text for the tooltip\n   */\n  @Prop() header: string = '';\n\n  /**\n   * Items to display in the tooltip\n   */\n  @Prop() items: TooltipItem[] = [];\n\n  /**\n   * Total value to display\n   */\n  @Prop() total: string = '';\n\n  /**\n   * Whether to show the total\n   */\n  @Prop() showTotal: boolean = false;\n\n  /**\n   * Whether in storybook mode (for static positioning)\n   */\n  @Prop() storybookMode: boolean = false;\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            'chart-tooltip': true,\n            visible: this.visible,\n            'storybook-mode': this.storybookMode,\n          }}\n          style={{\n            left: `${this.x}px`,\n            top: `${this.y}px`,\n          }}\n        >\n          <div class=\"tooltip-content\">\n            {this.header && <div class=\"tooltip-header\">{this.header}</div>}\n            <div class=\"tooltip-items\">\n              {this.items.map((item, index) => (\n                <div key={index} class=\"tooltip-item\">\n                  {item.color && (\n                    <span\n                      class=\"tooltip-dot\"\n                      style={{ backgroundColor: item.color }}\n                    />\n                  )}\n                  {item.label && (\n                    <span class=\"tooltip-label\">{item.label}:</span>\n                  )}\n                  <span class=\"tooltip-value\">{item.value}</span>\n                </div>\n              ))}\n            </div>\n            {this.showTotal && this.total && (\n              <div class=\"tooltip-total\">\n                <span class=\"total-label\">Total:</span>\n                <span class=\"total-value\">{this.total}</span>\n              </div>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}