legalesign-document-viewer 0.3.5 → 0.3.6

package/dist/collection/components/ls-tooltip/ls-tooltip.css

@@ -0,0 +1,55 @@
+:host {
+  position: absolute;
+  pointer-events: none;
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+.tooltip {
+  position: absolute;
+  border-radius: 0.5rem;
+  background: var(--gray-100, #45484d);
+  color: var(--white, #fff);
+  font-size: 0.75rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1rem;
+  padding: 0.5rem 0.75rem;
+  max-width: 200px;
+  width: max-content;
+  white-space: wrap;
+  z-index: 1000;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 -1px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
+}
+
+.tooltip-title {
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 1rem;
+  margin-bottom: 0.25rem;
+}
+
+.tooltip.visible {
+  opacity: 1;
+  visibility: block;
+  scale: 1;
+  transition: opacity 0.3s 1s ease-out, scale 0.1s 0.5s ease-out;
+}
+
+.tooltip.hidden {
+  opacity: 0;
+  scale: 0.85;
+  transition: opacity 0.2s ease-in, scale 0.1s 0.5s ease-in;
+}
+#arrow {
+  position: absolute;
+  background: var(--gray-100, #45484d);
+  width: 0.625rem;
+  height: 0.625rem;
+  transform: rotate(45deg);
+  border-radius: 0.125rem;
+}

package/dist/collection/components/ls-tooltip/ls-tooltip.js

@@ -0,0 +1,206 @@
+import { arrow, computePosition, flip, offset, shift } from "@floating-ui/dom";
+import { h } from "@stencil/core";
+export class LsTooltip {
+    el;
+    referenceElement;
+    placement = 'top';
+    tooltipText;
+    tooltipTitle;
+    tooltipLocked = false;
+    updateReferenceHandler(newReference) {
+        if (!newReference)
+            return;
+        this.tooltipText = newReference.getAttribute('data-tooltip');
+        this.tooltipTitle = newReference.getAttribute('data-tooltip-title');
+        this.placement = newReference.getAttribute('data-tooltip-placement') || 'top';
+        const arrowElement = this.el.shadowRoot.querySelector('#arrow');
+        const innerTooltip = this.el.shadowRoot.getElementById('ls-tooltip-inner');
+        computePosition(this.referenceElement, innerTooltip, {
+            placement: this.placement,
+            middleware: [offset(6), flip(), shift({ padding: 5 }), arrow({ element: arrowElement })],
+        })
+            .then(({ x, y, placement, middlewareData }) => {
+            Object.assign(innerTooltip.style, {
+                left: `${x}px`,
+                top: `${y}px`,
+            });
+            const { x: arrowX, y: arrowY } = middlewareData.arrow || {};
+            const staticSide = {
+                top: 'bottom',
+                right: 'left',
+                bottom: 'top',
+                left: 'right',
+            }[placement.split('-')[0]];
+            Object.assign(arrowElement.style, {
+                left: arrowX != null ? `${arrowX}px` : '',
+                top: arrowY != null ? `${arrowY}px` : '',
+                right: '',
+                bottom: '',
+                [staticSide]: '-4px',
+            });
+        })
+            .then(() => {
+            innerTooltip.classList.remove('hidden');
+            innerTooltip.classList.add('visible');
+            this.referenceElement = null;
+        });
+    }
+    async hide() {
+        const innerTooltip = this.el.shadowRoot.getElementById('ls-tooltip-inner');
+        innerTooltip.classList.remove('visible');
+        innerTooltip.classList.add('hidden');
+    }
+    render() {
+        return (h("div", { key: '7d2b151a35ae84bfa25ff2d27b9fa76d2dd45d4a', id: "ls-tooltip-inner", class: "tooltip hidden", role: "tooltip" }, h("div", { key: 'f073ac2345096a57ec21d2afd415663834127785', id: "arrow" }), this.tooltipTitle && h("p", { key: 'b012f0ba9c38eb51d314526e2c4df680de6e2ab3', class: "tooltip-title" }, this.tooltipTitle), this.tooltipText, h("slot", { key: '017e306bbd2880220134a46c5284b05dedcf8a39' })));
+    }
+    static get is() { return "ls-tooltip"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ls-tooltip.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ls-tooltip.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "referenceElement": {
+                "type": "unknown",
+                "attribute": "reference-element",
+                "mutable": true,
+                "complexType": {
+                    "original": "HTMLElement",
+                    "resolved": "HTMLElement",
+                    "references": {
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "placement": {
+                "type": "string",
+                "attribute": "placement",
+                "mutable": true,
+                "complexType": {
+                    "original": "'top' | 'bottom' | 'left' | 'right'",
+                    "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'top'"
+            },
+            "tooltipText": {
+                "type": "string",
+                "attribute": "tooltip-text",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "tooltipTitle": {
+                "type": "string",
+                "attribute": "tooltip-title",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "tooltipLocked": {
+                "type": "boolean",
+                "attribute": "tooltip-locked",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get methods() {
+        return {
+            "hide": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "referenceElement",
+                "methodName": "updateReferenceHandler"
+            }];
+    }
+}
+//# sourceMappingURL=ls-tooltip.js.map

package/dist/collection/components/ls-tooltip/ls-tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ls-tooltip.js","sourceRoot":"","sources":["../../../src/components/ls-tooltip/ls-tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { arrow, computePosition, flip, offset, shift } from '@floating-ui/dom';\nimport { Component, Element, Method, Prop, Watch, h } from '@stencil/core';\n\n@Component({\n  tag: 'ls-tooltip',\n  styleUrl: 'ls-tooltip.css',\n  shadow: true,\n})\nexport class LsTooltip {\n  @Element() el: HTMLElement;\n  @Prop({ mutable: true }) referenceElement: HTMLElement;\n  @Prop({ mutable: true }) placement: 'top' | 'bottom' | 'left' | 'right' = 'top';\n  @Prop({ mutable: true }) tooltipText: string;\n  @Prop({ mutable: true }) tooltipTitle: string;\n  @Prop() tooltipLocked = false;\n\n  @Watch('referenceElement')\n  updateReferenceHandler(newReference: HTMLElement) {\n    if (!newReference) return;\n\n    this.tooltipText = newReference.getAttribute('data-tooltip');\n    this.tooltipTitle = newReference.getAttribute('data-tooltip-title');\n    this.placement = (newReference.getAttribute('data-tooltip-placement') as 'top' | 'bottom' | 'left' | 'right') || 'top';\n\n    const arrowElement = this.el.shadowRoot.querySelector('#arrow');\n    const innerTooltip = this.el.shadowRoot.getElementById('ls-tooltip-inner') as HTMLElement;\n\n    computePosition(this.referenceElement, innerTooltip, {\n      placement: this.placement,\n      middleware: [offset(6), flip(), shift({ padding: 5 }), arrow({ element: arrowElement })],\n    })\n      .then(({ x, y, placement, middlewareData }) => {\n        Object.assign(innerTooltip.style, {\n          left: `${x}px`,\n          top: `${y}px`,\n        });\n\n        const { x: arrowX, y: arrowY } = middlewareData.arrow || {};\n        const staticSide = {\n          top: 'bottom',\n          right: 'left',\n          bottom: 'top',\n          left: 'right',\n        }[placement.split('-')[0]];\n\n        Object.assign((arrowElement as HTMLElement).style, {\n          left: arrowX != null ? `${arrowX}px` : '',\n          top: arrowY != null ? `${arrowY}px` : '',\n          right: '',\n          bottom: '',\n          [staticSide]: '-4px',\n        });\n      })\n      .then(() => {\n        innerTooltip.classList.remove('hidden');\n        innerTooltip.classList.add('visible');\n        this.referenceElement = null;\n      });\n  }\n\n  @Method()\n  async hide() {\n    const innerTooltip = this.el.shadowRoot.getElementById('ls-tooltip-inner') as HTMLElement;\n    innerTooltip.classList.remove('visible');\n    innerTooltip.classList.add('hidden');\n  }\n\n  render() {\n    return (\n      <div id=\"ls-tooltip-inner\" class=\"tooltip hidden\" role=\"tooltip\">\n        <div id=\"arrow\"></div>\n        {this.tooltipTitle && <p class=\"tooltip-title\">{this.tooltipTitle}</p>}\n        {this.tooltipText}\n        <slot />\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/ls-validation-tag/ls-validation-tag.css

@@ -0,0 +1,143 @@
+:host {
+  position: relative;
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+}
+
+.valid-label {
+  display: flex;
+  padding: 2px 0.5rem;
+  justify-content: center;
+  align-items: center;
+  gap: 0.25rem;
+  border-radius: 1rem;
+  font-size: 0.75rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 1.25rem; /* 142.857% */
+  width: fit-content;
+}
+
+.valid {
+  background-color: var(--green-30, #9df5d4);
+  color: var(--green-100, #125241);
+}
+
+.invalid {
+  background: var(--yellow-20, #fff3c2);
+  color: var(--yellow-90, #8a3f0e);
+}
+
+.field-counter {
+  display: flex;
+  padding: 0.125rem;
+  justify-content: center;
+  align-items: center;
+  border-radius: 1rem;
+  font-size: 0.625rem;
+  line-height: 0.75rem;
+  font-style: normal;
+  font-weight: 500;
+  color: var(--yellow-20, #fff3c2);
+  background: #e17100;
+  min-width: 1rem;
+}
+
+.field-dropdown {
+  position: absolute;
+  top: 2rem;
+  right: 0;
+  background: white;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  width: 20rem;
+  padding: 1rem;
+  border-radius: 1rem;
+  border: 1px solid #e5e7eb;
+  background: #fff;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+  max-height: 20rem;
+  overflow-y: auto;
+  flex-direction: column;
+  align-items: flex-start;
+  z-index: 1000;
+}
+
+.required-field {
+  position: relative;
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.5rem;
+  border-radius: 0.75rem;
+  padding: 0.5rem 0.5rem 0.5rem 1rem;
+  background: var(--field-background);
+  color: var(--field-text-color);
+  border: 1px solid var(--field-border-color);
+  transition: all 0.1s ease-in-out;
+}
+
+.required-field:hover {
+  background: var(--field-background-hover);
+  color: var(--field-text-color-hover);
+  border: 1px solid var(--field-border-color-hover);
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+}
+
+.required-field-items-left {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  width: 100%;
+}
+
+.required-field-items-left p {
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 0.875rem; /* 142.857% */
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dot {
+  height: 0.5rem;
+  width: 0.5rem;
+  border-radius: 50%;
+}
+
+.role-label {
+  display: flex;
+  padding: 2px 3px;
+  justify-content: center;
+  align-items: center;
+  border-radius: 0.25rem;
+  font-size: 0.75rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1rem; /* 133.333% */
+  text-transform: capitalize;
+}
+
+.dropdown-header h2 {
+  color: var(--gray-100, #45484d);
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 1.25rem; /* 142.857% */
+  margin-bottom: 0.125rem;
+}
+
+.dropdown-header p {
+  color: var(--gray-80, #6c6e73);
+  font-size: 0.75rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1rem; /* 133.333% */
+}

package/dist/collection/components/ls-validation-tag/ls-validation-tag.js

@@ -0,0 +1,103 @@
+import { Host, h } from "@stencil/core";
+import { defaultRolePalette } from "../ls-document-viewer/defaultPalette";
+export class LsValidationTag {
+    status = 'Invalid';
+    validationErrors = [];
+    isExpanded = false;
+    render() {
+        return (h(Host, { key: 'e9550ce2a25fecb9450646da2975ebc3ee2cc7d8' }, h("div", { key: '1029ed6832847a4d1de6d625a8826aff345a0582', class: `valid-label ${this.validationErrors.length === 0 ? 'valid' : 'invalid'}`, onClick: this.validationErrors.length && (() => (this.isExpanded = !this.isExpanded)) }, this.validationErrors.length === 0 ? 'Ready to Send' : `Requires Fields`, this.validationErrors.length > 0 && h("div", { key: '8f8c59ead9f8a4ca774d1726a780511425ce2d34', class: 'field-counter' }, this.validationErrors.length), this.validationErrors.length > 0 && (h("ls-icon", { key: 'fd05f640ad20f6063b7e66980b7f7362be663df1', name: this.isExpanded ? 'chevron-up' : 'chevron-down', style: { cursor: 'pointer', scale: '0.60', margin: '0 -0.25rem' } }))), this.isExpanded && this.validationErrors.length !== 0 && (h("div", { key: '32e9a993a48711b36861d80e9f86c37815b74772', class: 'field-dropdown' }, h("div", { key: '0c316ce402bed2bbc05eac98dba857f56beedfbc', class: 'dropdown-header' }, h("h2", { key: '706747fcd41484e6d94d2dfbb53caf3acd457b43' }, "Signature Fields Required"), h("p", { key: 'b9fa0d6fceb95df99a49843d6a9100877fd01d06' }, this.validationErrors.length, " ", this.validationErrors.length === 1 ? 'Recipient needs a Signature Field' : 'Recipients need Signature Fields', " placed for them")), this.validationErrors.map((field, idx) => {
+            const signerIndex = field?.role?.signerIndex ? field?.role?.signerIndex % 100 : null;
+            const pallette = defaultRolePalette[signerIndex || field?.element?.signer || 0];
+            return (h("div", { key: idx, class: 'required-field', style: {
+                    '--field-background': pallette.s10,
+                    '--field-border-color': pallette.s10,
+                    '--field-background-hover': pallette.s20,
+                    '--field-text-color': pallette.s70,
+                    '--field-text-color-hover': pallette.s80,
+                    '--field-border-color-hover': pallette.s60,
+                } }, h("div", { class: 'required-field-items-left' }, h("div", { class: 'dot', style: { background: pallette.s60 } }), field?.role && (h("div", { class: 'required-field-items-left' }, h("p", { style: { color: pallette.s80 } }, field.role?.name || `Signer ${field?.role?.signerIndex + 1}`), h("div", { class: 'role-label', style: { background: pallette.s30, color: pallette.s70 } }, field.role?.roleType.toLowerCase() || `Signer ${field.role?.signerIndex + 1}`))), field?.element && (h(h.Fragment, null, h("p", { style: { color: pallette.s80 } }, field.role?.name || `${field.element.formElementType} ${field?.element?.label + 1}`), h("div", { class: 'role-label', style: { background: pallette.s30, color: pallette.s70 } }, field.description))))));
+        })))));
+    }
+    static get is() { return "ls-validation-tag"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ls-validation-tag.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ls-validation-tag.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "status": {
+                "type": "string",
+                "attribute": "status",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'Invalid'"
+            },
+            "validationErrors": {
+                "type": "unknown",
+                "attribute": "validation-errors",
+                "mutable": true,
+                "complexType": {
+                    "original": "ValidationError[]",
+                    "resolved": "ValidationError[]",
+                    "references": {
+                        "ValidationError": {
+                            "location": "import",
+                            "path": "../../types/ValidationError",
+                            "id": "src/types/ValidationError.ts::ValidationError"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "isExpanded": {
+                "type": "boolean",
+                "attribute": "is-expanded",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+}
+//# sourceMappingURL=ls-validation-tag.js.map

package/dist/collection/components/ls-validation-tag/ls-validation-tag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ls-validation-tag.js","sourceRoot":"","sources":["../../../src/components/ls-validation-tag/ls-validation-tag.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\nimport { defaultRolePalette } from '../ls-document-viewer/defaultPalette';\nimport { ValidationError } from '../../types/ValidationError';\n\n@Component({\n  tag: 'ls-validation-tag',\n  styleUrl: 'ls-validation-tag.css',\n  shadow: true,\n})\nexport class LsValidationTag {\n  @Prop({ mutable: true }) status: string = 'Invalid';\n  @Prop({ mutable: true }) validationErrors: ValidationError[] = [];\n  @Prop({ mutable: true }) isExpanded: boolean = false;\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={`valid-label ${this.validationErrors.length === 0 ? 'valid' : 'invalid'}`}\n          onClick={this.validationErrors.length && (() => (this.isExpanded = !this.isExpanded))}\n        >\n          {this.validationErrors.length === 0 ? 'Ready to Send' : `Requires Fields`}\n          {this.validationErrors.length > 0 && <div class={'field-counter'}>{this.validationErrors.length}</div>}\n          {this.validationErrors.length > 0 && (\n            <ls-icon name={this.isExpanded ? 'chevron-up' : 'chevron-down'} style={{ cursor: 'pointer', scale: '0.60', margin: '0 -0.25rem' }} />\n          )}\n        </div>\n        {this.isExpanded && this.validationErrors.length !== 0 && (\n          <div class={'field-dropdown'}>\n            <div class={'dropdown-header'}>\n              <h2>Signature Fields Required</h2>\n              <p>\n                {this.validationErrors.length} {this.validationErrors.length === 1 ? 'Recipient needs a Signature Field' : 'Recipients need Signature Fields'} placed for them\n              </p>\n            </div>\n            {this.validationErrors.map((field, idx) => {\n              const signerIndex = field?.role?.signerIndex ? field?.role?.signerIndex % 100 : null;\n              const pallette = defaultRolePalette[signerIndex || field?.element?.signer || 0];\n\n              return (\n                <div\n                  key={idx}\n                  class={'required-field'}\n                  style={{\n                    '--field-background': pallette.s10,\n                    '--field-border-color': pallette.s10,\n                    '--field-background-hover': pallette.s20,\n                    '--field-text-color': pallette.s70,\n                    '--field-text-color-hover': pallette.s80,\n                    '--field-border-color-hover': pallette.s60,\n                  }}\n                >\n                  <div class={'required-field-items-left'}>\n                    <div class={'dot'} style={{ background: pallette.s60 }} />\n                    {field?.role && (\n                      <div class={'required-field-items-left'}>\n                        <p style={{ color: pallette.s80 }}>{field.role?.name || `Signer ${field?.role?.signerIndex + 1}`}</p>\n                        <div class={'role-label'} style={{ background: pallette.s30, color: pallette.s70 }}>\n                          {field.role?.roleType.toLowerCase() || `Signer ${field.role?.signerIndex + 1}`}\n                        </div>\n                      </div>\n                    )}\n                    {field?.element && (\n                      <>\n                        <p style={{ color: pallette.s80 }}>{field.role?.name || `${field.element.formElementType} ${field?.element?.label + 1}`}</p>\n                        <div class={'role-label'} style={{ background: pallette.s30, color: pallette.s70 }}>\n                          {field.description}\n                        </div>\n                      </>\n                    )}\n                  </div>\n                </div>\n              );\n            })}\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/index.js

@@ -0,0 +1,11 @@
+/**
+ * @fileoverview entry point for your component library
+ *
+ * This is the entry point for your component library. Use this file to export utilities,
+ * constants or data structure that accompany your components.
+ *
+ * DO NOT use this file to export your components. Instead, use the recommended approaches
+ * to consume components of this package as outlined in the `README.md`.
+ */
+export { format } from './utils/utils';
+//# sourceMappingURL=index.js.map

package/dist/collection/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC","sourcesContent":["/**\n * @fileoverview entry point for your component library\n *\n * This is the entry point for your component library. Use this file to export utilities,\n * constants or data structure that accompany your components.\n *\n * DO NOT use this file to export your components. Instead, use the recommended approaches\n * to consume components of this package as outlined in the `README.md`.\n */\n\nexport { format } from './utils/utils';\nexport type * from './components.d.ts';\n"]}