@carbon/ibm-products-web-components 0.30.0-rc.0 → 0.30.0

package/es/components/truncated-text/truncated-text.js

@@ -0,0 +1,257 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { __decorate } from 'tslib';
+import { LitElement, html } from 'lit';
+import { property, state, query } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { carbonElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';
+import { prefix, carbonPrefix } from '../../globals/settings.js';
+import '@carbon/web-components/es/components/tooltip/index.js';
+import '@carbon/web-components/es/components/button/button.js';
+import '@carbon/web-components/es/components/link/index.js';
+import styles from './truncated-text.scss.js';
+
+const componentName = 'truncated-text';
+const blockClass = `${prefix}--${componentName}`;
+const elementName = `${prefix}-${componentName}`; // c4p-truncated-text
+/**
+ * TruncatedText.
+ *
+ * @element c4p-truncated-text
+ */
+let CDSTruncatedText = class CDSTruncatedText extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Specify how the tooltip should align with the content.
+         */
+        this.align = 'top';
+        /**
+         * Specify whether a auto align functionality should be applied
+         */
+        this.autoalign = false;
+        /**
+         * The label on the collapse button.
+         */
+        this.collapseLabel = '';
+        /**
+         * The label on expand button.
+         */
+        this.expandLabel = '';
+        /**
+         * Unique identifier for the element.
+         */
+        this.id = '';
+        /**
+         * The maximum number of lines to display before truncation.
+         */
+        this.lines = 0;
+        /**
+         * The method to display the full text when truncated. Options are "tooltip" or "expand". if not passed, the text would just be truncated with ellipsis.
+         */
+        this.type = 'tooltip';
+        /**
+         * The string value to be truncated.
+         */
+        this.value = '';
+        this._isOverflowing = false;
+        this._isExpanded = false;
+        this._maxHeight = 'none';
+        this._lineHeight = 0;
+        this._isLayered = false;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._isLayered = !!this.closest(`${carbonPrefix}-layer`);
+        this.type = this.type || 'tooltip';
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this._resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        super.disconnectedCallback();
+    }
+    firstUpdated() {
+        requestAnimationFrame(() => {
+            const computedStyle = getComputedStyle(this._textElement);
+            this._lineHeight = parseFloat(computedStyle.lineHeight);
+            this._setupResizeObserver();
+        });
+    }
+    updated(changed) {
+        if (changed.has('lines') || changed.has('value')) {
+            this._updateOverflowStatus();
+            this._updateMaxHeight();
+        }
+    }
+    _updateMaxHeight() {
+        if (this.type !== 'expand') {
+            return;
+        }
+        requestAnimationFrame(() => {
+            if (!this._textElement) {
+                return;
+            }
+            this._maxHeight =
+                this.lines > 0 && !this._isExpanded
+                    ? `${this.lines * this._lineHeight}px`
+                    : `${this._textElement.scrollHeight}px`;
+        });
+    }
+    _setupResizeObserver() {
+        if (!this._textElement) {
+            return;
+        }
+        if (this._resizeObserver) {
+            this._resizeObserver.disconnect();
+        }
+        this._resizeObserver = new ResizeObserver(() => {
+            this._updateOverflowStatus();
+        });
+        this._resizeObserver.observe(this);
+    }
+    _updateOverflowStatus() {
+        if (!this._textElement || this.lines <= 0) {
+            return;
+        }
+        this._updateMaxHeight();
+        const { scrollHeight, clientHeight } = this._textElement;
+        const buffer = this._lineHeight / 2; // buffer of at least half of line height for a stable outcome
+        const isOverflowing = scrollHeight > clientHeight + buffer;
+        if (isOverflowing !== this._isOverflowing) {
+            this._isOverflowing = isOverflowing;
+        }
+    }
+    _handleKeydown(evt) {
+        const { key } = evt;
+        if (key === 'Enter' || key === ' ') {
+            this._toggleExpansion();
+        }
+    }
+    _toggleExpansion() {
+        var _a, _b, _c;
+        this._isExpanded = !this._isExpanded;
+        this._updateMaxHeight();
+        (_a = this._textElement) === null || _a === void 0 ? void 0 : _a.classList.add(`${blockClass}_transition`);
+        const onTransitionEnd = () => {
+            var _a, _b, _c;
+            (_b = (_a = this._textElement) === null || _a === void 0 ? void 0 : _a.querySelector('button')) === null || _b === void 0 ? void 0 : _b.focus();
+            (_c = this._textElement) === null || _c === void 0 ? void 0 : _c.removeEventListener('transitionend', onTransitionEnd);
+        };
+        (_b = this._textElement) === null || _b === void 0 ? void 0 : _b.addEventListener('transitionend', onTransitionEnd);
+        /**
+         * currently you cannot animate line-clamping
+         * you can however animate max-height
+         * this removes the clamping and then quickly adds it so you can see the ellipsis
+         */
+        if (this._isExpanded === false) {
+            (_c = this._textElement) === null || _c === void 0 ? void 0 : _c.classList.add(`${blockClass}_content--closing`);
+            setTimeout(() => {
+                var _a;
+                (_a = this._textElement) === null || _a === void 0 ? void 0 : _a.classList.remove(`${blockClass}_content--closing`);
+            }, 100);
+        }
+    }
+    _renderToggleButton() {
+        const className = classMap({
+            [`${blockClass}_button-collapse`]: this._isExpanded,
+            [`${blockClass}_button-expand`]: !this._isExpanded,
+            [`${blockClass}_button-layered`]: this._isLayered,
+            [`${blockClass}_button-hide`]: !this._isOverflowing && !this._isExpanded,
+        });
+        const label = this._isExpanded ? this.collapseLabel : this.expandLabel;
+        return html `
+      <span
+        aria-controls=${this.id}
+        aria-expanded=${this._isExpanded}
+        class=${className}
+        @click=${this._toggleExpansion}
+        @keydown=${this._handleKeydown}
+        role="button"
+        tabIndex="0"
+      >
+        ${label}
+      </span>
+    `;
+    }
+    render() {
+        // Apply different styles based on truncation method
+        const contentStyle = {
+            ['--line-clamp']: this._isExpanded ? 'none' : this.lines,
+            ['max-block-size']: this.type === 'expand' ? this._maxHeight : 'none',
+        };
+        const valueBody = html `
+      <div
+        id=${this.id}
+        class="${blockClass}_content"
+        style=${styleMap(contentStyle)}
+      >
+        ${this.value}
+      </div>
+    `;
+        const tooltipVariant = html `
+      <cds-tooltip
+        align=${this.align}
+        autoalign=${this.autoalign}
+        enter-delay-ms="0"
+        leave-delay-ms="0"
+      >
+        ${valueBody}
+        <cds-tooltip-content>${this.value}</cds-tooltip-content>
+      </cds-tooltip>
+    `;
+        const expandVariant = html `${valueBody} ${this._renderToggleButton()}`;
+        return this.type === 'tooltip' && this._isOverflowing
+            ? tooltipVariant
+            : expandVariant;
+    }
+};
+CDSTruncatedText.styles = styles;
+__decorate([
+    property({ reflect: true, type: String })
+], CDSTruncatedText.prototype, "align", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], CDSTruncatedText.prototype, "autoalign", void 0);
+__decorate([
+    property({ attribute: 'collapse-label', type: String, reflect: true })
+], CDSTruncatedText.prototype, "collapseLabel", void 0);
+__decorate([
+    property({ attribute: 'expand-label', type: String, reflect: true })
+], CDSTruncatedText.prototype, "expandLabel", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], CDSTruncatedText.prototype, "id", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], CDSTruncatedText.prototype, "lines", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], CDSTruncatedText.prototype, "type", void 0);
+__decorate([
+    property({ type: String, attribute: 'value', reflect: true })
+], CDSTruncatedText.prototype, "value", void 0);
+__decorate([
+    state()
+], CDSTruncatedText.prototype, "_isOverflowing", void 0);
+__decorate([
+    state()
+], CDSTruncatedText.prototype, "_isExpanded", void 0);
+__decorate([
+    state()
+], CDSTruncatedText.prototype, "_maxHeight", void 0);
+__decorate([
+    query(`.${blockClass}_content`)
+], CDSTruncatedText.prototype, "_textElement", void 0);
+CDSTruncatedText = __decorate([
+    carbonElement(elementName)
+], CDSTruncatedText);
+var CDSTruncatedText$1 = CDSTruncatedText;
+
+export { CDSTruncatedText, blockClass, CDSTruncatedText$1 as default };
+//# sourceMappingURL=truncated-text.js.map

package/es/components/truncated-text/truncated-text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"truncated-text.js","sources":["../../../src/components/truncated-text/truncated-text.ts"],"sourcesContent":[null],"names":["customElement"],"mappings":"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"}

package/es/components/truncated-text/truncated-text.scss.js

@@ -0,0 +1,13 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { css } from 'lit';
+
+var styles = css(["@keyframes cds--hide-feedback{0%{opacity:1;visibility:inherit}to{opacity:0;visibility:hidden}}@keyframes cds--show-feedback{0%{opacity:0;visibility:hidden}to{opacity:1;visibility:inherit}}@keyframes cds--skeleton{0%{opacity:.3;transform:scaleX(0);transform-origin:left}20%{opacity:1;transform:scaleX(1);transform-origin:left}28%{transform:scaleX(1);transform-origin:right}51%{transform:scaleX(0);transform-origin:right}58%{transform:scaleX(0);transform-origin:right}82%{transform:scaleX(1);transform-origin:right}83%{transform:scaleX(1);transform-origin:left}96%{transform:scaleX(0);transform-origin:left}to{opacity:.3;transform:scaleX(0);transform-origin:left}}.cds--layout--size-xs{--cds-layout-size-height-context:var(--cds-layout-size-height-xs,1.5rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-xs{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-xs,1.5rem))}.cds--layout-constraint--size__min-xs{--cds-layout-size-height-min:var(--cds-layout-size-height-xs,1.5rem)}.cds--layout-constraint--size__max-xs{--cds-layout-size-height-max:var(--cds-layout-size-height-xs,1.5rem)}.cds--layout--size-sm{--cds-layout-size-height-context:var(--cds-layout-size-height-sm,2rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-sm{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-sm,2rem))}.cds--layout-constraint--size__min-sm{--cds-layout-size-height-min:var(--cds-layout-size-height-sm,2rem)}.cds--layout-constraint--size__max-sm{--cds-layout-size-height-max:var(--cds-layout-size-height-sm,2rem)}.cds--layout--size-md{--cds-layout-size-height-context:var(--cds-layout-size-height-md,2.5rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-md{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-md,2.5rem))}.cds--layout-constraint--size__min-md{--cds-layout-size-height-min:var(--cds-layout-size-height-md,2.5rem)}.cds--layout-constraint--size__max-md{--cds-layout-size-height-max:var(--cds-layout-size-height-md,2.5rem)}.cds--layout--size-lg{--cds-layout-size-height-context:var(--cds-layout-size-height-lg,3rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-lg{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-lg,3rem))}.cds--layout-constraint--size__min-lg{--cds-layout-size-height-min:var(--cds-layout-size-height-lg,3rem)}.cds--layout-constraint--size__max-lg{--cds-layout-size-height-max:var(--cds-layout-size-height-lg,3rem)}.cds--layout--size-xl{--cds-layout-size-height-context:var(--cds-layout-size-height-xl,4rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-xl{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-xl,4rem))}.cds--layout-constraint--size__min-xl{--cds-layout-size-height-min:var(--cds-layout-size-height-xl,4rem)}.cds--layout-constraint--size__max-xl{--cds-layout-size-height-max:var(--cds-layout-size-height-xl,4rem)}.cds--layout--size-2xl{--cds-layout-size-height-context:var(--cds-layout-size-height-2xl,5rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-2xl{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-2xl,5rem))}.cds--layout-constraint--size__min-2xl{--cds-layout-size-height-min:var(--cds-layout-size-height-2xl,5rem)}.cds--layout-constraint--size__max-2xl{--cds-layout-size-height-max:var(--cds-layout-size-height-2xl,5rem)}.cds--layout--density-condensed{--cds-layout-density-padding-inline-context:var(--cds-layout-density-padding-inline-condensed,0.5rem);--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context)}.cds--layout-constraint--density__default-condensed{--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context,var(--cds-layout-density-padding-inline-condensed,0.5rem))}.cds--layout-constraint--density__min-condensed{--cds-layout-density-padding-inline-min:var(--cds-layout-density-padding-inline-condensed,0.5rem)}.cds--layout-constraint--density__max-condensed{--cds-layout-density-padding-inline-max:var(--cds-layout-density-padding-inline-condensed,0.5rem)}.cds--layout--density-normal{--cds-layout-density-padding-inline-context:var(--cds-layout-density-padding-inline-normal,1rem);--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context)}.cds--layout-constraint--density__default-normal{--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context,var(--cds-layout-density-padding-inline-normal,1rem))}.cds--layout-constraint--density__min-normal{--cds-layout-density-padding-inline-min:var(--cds-layout-density-padding-inline-normal,1rem)}.cds--layout-constraint--density__max-normal{--cds-layout-density-padding-inline-max:var(--cds-layout-density-padding-inline-normal,1rem)}:root{--cds-layout-size-height-xs:1.5rem;--cds-layout-size-height-sm:2rem;--cds-layout-size-height-md:2.5rem;--cds-layout-size-height-lg:3rem;--cds-layout-size-height-xl:4rem;--cds-layout-size-height-2xl:5rem;--cds-layout-size-height-min:0px;--cds-layout-size-height-max:999999999px;--cds-layout-density-padding-inline-condensed:0.5rem;--cds-layout-density-padding-inline-normal:1rem;--cds-layout-density-padding-inline-min:0px;--cds-layout-density-padding-inline-max:999999999px}.cds--assistive-text,.cds--visually-hidden{block-size:1px;border:0;margin:-1px;overflow:hidden;padding:0;position:absolute;clip:rect(0,0,0,0);inline-size:1px;visibility:inherit;white-space:nowrap}.c4p--truncated-text_button-collapse,.c4p--truncated-text_button-expand{border:none;cursor:pointer;font:inherit;line-height:inherit}:host(c4p-truncated-text){display:block;inline-size:100%}@media (prefers-reduced-motion:no-preference){:host(c4p-truncated-text) .c4p--truncated-text_transition{transition:max-height .11s cubic-bezier(.2,0,.38,.9)}}:host(c4p-truncated-text) .c4p--truncated-text_content{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--line-clamp,0);text-overflow:clip;white-space:normal}:host(c4p-truncated-text) .c4p--truncated-text_content:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){:host(c4p-truncated-text) .c4p--truncated-text_content:focus{outline-style:dotted}}:host(c4p-truncated-text) .c4p--truncated-text_content--closing{-webkit-line-clamp:none}:host(c4p-truncated-text) cds-tooltip{display:inline-flex}:host(c4p-truncated-text) .c4p--truncated-text_button-collapse:focus,:host(c4p-truncated-text) .c4p--truncated-text_button-expand:focus,:host(c4p-truncated-text) button:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){:host(c4p-truncated-text) .c4p--truncated-text_button-collapse:focus,:host(c4p-truncated-text) .c4p--truncated-text_button-expand:focus,:host(c4p-truncated-text) button:focus{outline-style:dotted}}.c4p--truncated-text_button-collapse,.c4p--truncated-text_button-expand{color:var(--cds-link-primary,#0f62fe);padding:0 .125rem}.c4p--truncated-text_button-collapse.c4p--truncated-text_button-hide,.c4p--truncated-text_button-expand.c4p--truncated-text_button-hide{display:none}.c4p--truncated-text_button-expand.c4p--truncated-text_button-layered{background-color:var(--cds-layer)}.c4p--truncated-text_button-expand:dir(ltr):before{background:linear-gradient(90deg,hsla(0,0%,100%,0) 0,var(--cds-background,#fff) 0)}.c4p--truncated-text_button-expand.c4p--truncated-text_button-layered:dir(ltr):before{background:linear-gradient(90deg,hsla(0,0%,100%,0) 0,var(--cds-layer) 0)}.c4p--truncated-text_button-expand:dir(rtl):before{background:linear-gradient(270deg,hsla(0,0%,100%,0) 0,var(--cds-background,#fff) 0)}.c4p--truncated-text_button-expand.c4p--truncated-text_button-layered:dir(rtl):before{background:linear-gradient(270deg,hsla(0,0%,100%,0) 0,var(--cds-layer) 0)}.c4p--truncated-text_button-collapse{background-color:transparent}"]);
+
+export { styles as default };
+//# sourceMappingURL=truncated-text.scss.js.map

package/es/components/truncated-text/truncated-text.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"truncated-text.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}

package/es/components/truncated-text/truncated-text.test.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Copyright IBM Corp. 2025, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import './index';

package/es/components/truncated-text/truncated-text.test.js

@@ -0,0 +1,77 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { describe, it, expect } from 'vitest';
+import { fixture, html } from '@open-wc/testing';
+import { prefix, carbonPrefix } from '../../globals/settings.js';
+import './truncated-text.js';
+
+/**
+ * Copyright IBM Corp. 2025, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+const defaultProps = {
+    lines: 2,
+    text: 'Buttons are used to initialize an action, either in the background or foreground of an experience. There are several kinds of buttons. Primary buttons should be used for the principle call to action on the page.',
+    type: '',
+};
+const template = (props = defaultProps, templateWidth) => html `
+  <div style=${templateWidth ? `width: ${templateWidth}px;` : ''}>
+    <c4p-truncated-text
+      value=${props.text}
+      lines=${props.lines}
+      type=${props.type}
+    ></c4p-truncated-text>
+  </div>
+`;
+describe('c4p-truncated-text', () => {
+    it('renders the component', async () => {
+        const wrapper = await fixture(template());
+        const el = wrapper.querySelector(`${prefix}-truncated-text`);
+        expect(el).toBeTruthy();
+    });
+    it('renders a tooltip when text is truncated with tooltip', async () => {
+        var _a;
+        const wrapper = await fixture(template(Object.assign(Object.assign({}, defaultProps), { type: 'tooltip' }), 200));
+        const el = wrapper.querySelector(`${prefix}-truncated-text`);
+        const tooltip = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`${carbonPrefix}-tooltip`);
+        expect(tooltip).toBeTruthy();
+    });
+    it('does not render a tooltip if the text fits', async () => {
+        var _a;
+        const wrapper = await fixture(template(Object.assign(Object.assign({}, defaultProps), { type: 'tooltip' }), 9000));
+        const el = wrapper.querySelector(`${prefix}-truncated-text`);
+        const tooltip = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`${carbonPrefix}-tooltip`);
+        expect(tooltip).not.toBeTruthy();
+    });
+    it('tests lines prop/attribute with tooltip', async () => {
+        var _a;
+        for (let lines = 1; lines <= 4; lines++) {
+            const wrapper = await fixture(template(Object.assign(Object.assign({}, defaultProps), { lines, type: 'tooltip' }), 600));
+            const el = wrapper.querySelector(`${prefix}-truncated-text`);
+            await el.updateComplete;
+            const tooltip = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`${carbonPrefix}-tooltip`);
+            if (lines <= 2) {
+                expect(tooltip).toBeTruthy();
+            }
+            else {
+                expect(tooltip).not.toBeTruthy();
+            }
+        }
+    });
+    it('renders a expandable button when text is truncated with expand', async () => {
+        var _a;
+        const wrapper = await fixture(template(Object.assign(Object.assign({}, defaultProps), { lines: 2, type: 'expand' }), 400));
+        const el = wrapper.querySelector(`${prefix}-truncated-text`);
+        await el.updateComplete;
+        const expandButton = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`.${prefix}--truncated-text_button-expand`);
+        expect(expandButton).toBeTruthy();
+    });
+});
+//# sourceMappingURL=truncated-text.test.js.map

package/es/components/truncated-text/truncated-text.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"truncated-text.test.js","sources":["../../../src/components/truncated-text/truncated-text.test.ts"],"sourcesContent":[null],"names":[],"mappings":"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"}

package/es/components/user-avatar/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2025, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import './user-avatar';

package/es/components/user-avatar/index.js

@@ -0,0 +1,9 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import './user-avatar.js';
+//# sourceMappingURL=index.js.map

package/es/components/user-avatar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}