@warp-ds/elements 2.2.0-next.3 → 2.2.0-next.30

package/dist/packages/expandable/react.d.ts

@@ -0,0 +1,2 @@
+import { WarpExpandable } from '.';
+export declare const Expandable: import("@lit/react").ReactWebComponent<WarpExpandable, {}>;

package/dist/packages/expandable/react.js

@@ -0,0 +1,11 @@
+import { LitElement } from 'lit';
+import { createComponent } from '@lit/react';
+import React from 'react';
+// decouple from CDN by providing a dummy class
+class Component extends LitElement {
+}
+export const Expandable = createComponent({
+    tagName: 'w-expandable',
+    elementClass: Component,
+    react: React,
+});

package/dist/packages/expandable/styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/packages/expandable/styles.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const styles = css `*,:before,:after{--w-rotate:0;--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-scale-x:1;--w-scale-y:1;--w-scale-z:1;--w-skew-x:0;--w-skew-y:0;--w-translate-x:0;--w-translate-y:0;--w-translate-z:0}.t4{font-weight:700;font-size:var(--w-font-size-m);line-height:var(--w-line-height-m)}.text-left{text-align:left}.align-middle{vertical-align:middle}.bg-transparent{background-color:#0000}.appearance-none{-webkit-appearance:none;appearance:none}.will-change-height{will-change:height}.border-0{border-width:0}.border-2{border-width:2px}.rounded-8{border-radius:8px}.rounded-l-0{border-top-left-radius:0;border-bottom-left-radius:0}.rounded-r-0{border-top-right-radius:0;border-bottom-right-radius:0}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.hover\\:underline:hover{text-decoration-line:underline}.focus-visible\\:underline:focus-visible{text-decoration-line:underline}.overflow-hidden{overflow:hidden}.focus\\:outline-none:focus{outline-offset:2px;outline:2px solid #0000}.items-center{align-items:center}.justify-between{justify-content:space-between}.relative{position:relative}.static{position:static}.s-bg{background-color:var(--w-s-color-background)}.s-bg-info-subtle{background-color:var(--w-s-color-background-info-subtle)}.s-bg-subtle{background-color:var(--w-s-color-background-subtle)}.hover\\:s-bg-subtle-hover:hover{background-color:var(--w-s-color-background-subtle-hover)}.active\\:s-bg-subtle-active:active{background-color:var(--w-s-color-background-subtle-active)}.s-text{color:var(--w-s-color-text)}.s-icon{color:var(--w-s-color-icon)}.s-border{border-color:var(--w-s-color-border)}.s-surface-sunken{background-color:var(--w-s-color-surface-sunken)}.h-0{height:0}.w-full{width:100%}.m-0{margin:0}.-mx-16{margin-left:-1.6rem;margin-right:-1.6rem}.last-child\\:mb-0>:last-child{margin-bottom:0}.ml-8{margin-left:.8rem}.px-0{padding-left:0;padding-right:0}.px-16{padding-left:1.6rem;padding-right:1.6rem}.py-0{padding-top:0;padding-bottom:0}.py-16{padding-top:1.6rem;padding-bottom:1.6rem}.pt-0{padding-top:0}.pt-16{padding-top:1.6rem}.pt-8{padding-top:.8rem}.invisible{visibility:hidden}.break-words{overflow-wrap:break-word}.cursor-pointer{cursor:pointer}.-rotate-180{--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-rotate:-180deg;transform:translateX(var(--w-translate-x))translateY(var(--w-translate-y))translateZ(var(--w-translate-z))rotate(var(--w-rotate))rotateX(var(--w-rotate-x))rotateY(var(--w-rotate-y))rotateZ(var(--w-rotate-z))skewX(var(--w-skew-x))skewY(var(--w-skew-y))scaleX(var(--w-scale-x))scaleY(var(--w-scale-y))scaleZ(var(--w-scale-z))}.part-\\[w-icon-chevron-down-16-part\\]\\:-rotate-180::part(w-icon-chevron-down-16-part){--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-rotate:-180deg;transform:translateX(var(--w-translate-x))translateY(var(--w-translate-y))translateZ(var(--w-translate-z))rotate(var(--w-rotate))rotateX(var(--w-rotate-x))rotateY(var(--w-rotate-y))rotateZ(var(--w-rotate-z))skewX(var(--w-skew-x))skewY(var(--w-skew-y))scaleX(var(--w-scale-x))scaleY(var(--w-scale-y))scaleZ(var(--w-scale-z))}.rotate-180{--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-rotate:180deg;transform:translateX(var(--w-translate-x))translateY(var(--w-translate-y))translateZ(var(--w-translate-z))rotate(var(--w-rotate))rotateX(var(--w-rotate-x))rotateY(var(--w-rotate-y))rotateZ(var(--w-rotate-z))skewX(var(--w-skew-x))skewY(var(--w-skew-y))scaleX(var(--w-scale-x))scaleY(var(--w-scale-y))scaleZ(var(--w-scale-z))}.part-\\[w-icon-chevron-up-16-part\\]\\:rotate-180::part(w-icon-chevron-up-16-part){--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-rotate:180deg;transform:translateX(var(--w-translate-x))translateY(var(--w-translate-y))translateZ(var(--w-translate-z))rotate(var(--w-rotate))rotateX(var(--w-rotate-x))rotateY(var(--w-rotate-y))rotateZ(var(--w-rotate-z))skewX(var(--w-skew-x))skewY(var(--w-skew-y))scaleX(var(--w-scale-x))scaleY(var(--w-scale-y))scaleZ(var(--w-scale-z))}.transform{transform:translateX(var(--w-translate-x))translateY(var(--w-translate-y))translateZ(var(--w-translate-z))rotate(var(--w-rotate))rotateX(var(--w-rotate-x))rotateY(var(--w-rotate-y))rotateZ(var(--w-rotate-z))skewX(var(--w-skew-x))skewY(var(--w-skew-y))scaleX(var(--w-scale-x))scaleY(var(--w-scale-y))scaleZ(var(--w-scale-z))}.part-\\[w-icon-chevron-down-16-part\\]\\:transform::part(w-icon-chevron-down-16-part){transform:translateX(var(--w-translate-x))translateY(var(--w-translate-y))translateZ(var(--w-translate-z))rotate(var(--w-rotate))rotateX(var(--w-rotate-x))rotateY(var(--w-rotate-y))rotateZ(var(--w-rotate-z))skewX(var(--w-skew-x))skewY(var(--w-skew-y))scaleX(var(--w-scale-x))scaleY(var(--w-scale-y))scaleZ(var(--w-scale-z))}.part-\\[w-icon-chevron-up-16-part\\]\\:transform::part(w-icon-chevron-up-16-part){transform:translateX(var(--w-translate-x))translateY(var(--w-translate-y))translateZ(var(--w-translate-z))rotate(var(--w-rotate))rotateX(var(--w-rotate-x))rotateY(var(--w-rotate-y))rotateZ(var(--w-rotate-z))skewX(var(--w-skew-x))skewY(var(--w-skew-y))scaleX(var(--w-scale-x))scaleY(var(--w-scale-y))scaleZ(var(--w-scale-z))}.transform-gpu{transform:translate3d(var(--w-translate-x),var(--w-translate-y),var(--w-translate-z))rotate(var(--w-rotate))rotateX(var(--w-rotate-x))rotateY(var(--w-rotate-y))rotateZ(var(--w-rotate-z))skewX(var(--w-skew-x))skewY(var(--w-skew-y))scaleX(var(--w-scale-x))scaleY(var(--w-scale-y))scaleZ(var(--w-scale-z))}.part-\\[w-icon-chevron-down-16-part\\]\\:transform-gpu::part(w-icon-chevron-down-16-part){transform:translate3d(var(--w-translate-x),var(--w-translate-y),var(--w-translate-z))rotate(var(--w-rotate))rotateX(var(--w-rotate-x))rotateY(var(--w-rotate-y))rotateZ(var(--w-rotate-z))skewX(var(--w-skew-x))skewY(var(--w-skew-y))scaleX(var(--w-scale-x))scaleY(var(--w-scale-y))scaleZ(var(--w-scale-z))}.part-\\[w-icon-chevron-up-16-part\\]\\:transform-gpu::part(w-icon-chevron-up-16-part){transform:translate3d(var(--w-translate-x),var(--w-translate-y),var(--w-translate-z))rotate(var(--w-rotate))rotateX(var(--w-rotate-x))rotateY(var(--w-rotate-y))rotateZ(var(--w-rotate-z))skewX(var(--w-skew-x))skewY(var(--w-skew-y))scaleX(var(--w-scale-x))scaleY(var(--w-scale-y))scaleZ(var(--w-scale-z))}.transition-transform{transition-property:transform;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.part-\\[w-icon-chevron-down-16-part\\]\\:transition-transform::part(w-icon-chevron-down-16-part){transition-property:transform;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.part-\\[w-icon-chevron-up-16-part\\]\\:transition-transform::part(w-icon-chevron-up-16-part){transition-property:transform;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.part-\\[w-icon-chevron-down-16-part\\]\\:ease-in-out::part(w-icon-chevron-down-16-part){transition-timing-function:cubic-bezier(.4,0,.2,1)}.part-\\[w-icon-chevron-up-16-part\\]\\:ease-in-out::part(w-icon-chevron-up-16-part){transition-timing-function:cubic-bezier(.4,0,.2,1)}@media (min-width:480px){.sm\\:rounded-8{border-radius:8px}.sm\\:mx-0{margin-left:0;margin-right:0}}`;

package/dist/packages/i18n.js

@@ -0,0 +1,45 @@
+import { i18n } from '@lingui/core';
+export const supportedLocales = ['en', 'nb', 'fi', 'da', 'sv'];
+export const defaultLocale = 'en';
+export const getSupportedLocale = (usedLocale) => {
+    return (supportedLocales.find((locale) => usedLocale === locale || usedLocale.toLowerCase().includes(locale)) ||
+        defaultLocale);
+};
+export function detectLocale() {
+    if (typeof window === 'undefined') {
+        /**
+         * Server locale detection. This requires e.g LANG environment variable to be set on the server.
+         */
+        const serverLocale = process.env.NMP_LANGUAGE || Intl.DateTimeFormat().resolvedOptions().locale;
+        return getSupportedLocale(serverLocale);
+    }
+    try {
+        /**
+         * Client locale detection. Expects the lang attribute to be defined.
+         */
+        const htmlLocale = document.documentElement.lang;
+        return getSupportedLocale(htmlLocale);
+    }
+    catch (e) {
+        console.warn('could not detect locale, falling back to source locale', e);
+        return defaultLocale;
+    }
+}
+export const getMessages = (locale, enMsg, nbMsg, fiMsg, daMsg, svMsg) => {
+    if (locale === 'nb')
+        return nbMsg;
+    if (locale === 'fi')
+        return fiMsg;
+    if (locale === 'da')
+        return daMsg;
+    if (locale === 'sv')
+        return svMsg;
+    // Default to English
+    return enMsg;
+};
+export const activateI18n = (enMessages, nbMessages, fiMessages, daMessages, svMessages) => {
+    const locale = detectLocale();
+    const messages = getMessages(locale, enMessages, nbMessages, fiMessages, daMessages, svMessages);
+    i18n.load(locale, messages);
+    i18n.activate(locale);
+};

package/dist/packages/link/index.d.ts

@@ -0,0 +1,34 @@
+import { LitElement } from 'lit';
+type ButtonVariant = 'primary' | 'secondary' | 'negative' | 'negativeQuiet' | 'utility' | 'pill' | 'link' | 'quiet' | 'utilityQuiet';
+declare const WarpLink_base: import("@open-wc/form-control").Constructor<import("@open-wc/form-control").FormControlInterface> & typeof LitElement;
+/**
+ * Buttons are used to perform actions, with different visuals for different needs.
+ *
+ * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/buttons-link--docs)
+ */
+declare class WarpLink extends WarpLink_base {
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
+    autofocus: boolean;
+    variant: ButtonVariant;
+    quiet: boolean;
+    small: boolean;
+    href: string;
+    disabled: boolean;
+    target: string;
+    rel: string;
+    fullWidth: boolean;
+    buttonClass: string;
+    name: string;
+    classes: string;
+    static styles: import("lit").CSSResult[];
+    constructor();
+    connectedCallback(): void;
+    firstUpdated(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+export { WarpLink };

package/dist/packages/link/index.js

@@ -0,0 +1,99 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { FormControlMixin } from '@open-wc/form-control';
+import { html, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { reset } from '../styles.js';
+import { styles } from './styles.js';
+const variants = ['primary', 'secondary', 'negative', 'negativeQuiet', 'utility', 'utilityQuiet', 'pill', 'link'];
+/**
+ * Buttons are used to perform actions, with different visuals for different needs.
+ *
+ * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/buttons-link--docs)
+ */
+class WarpLink extends FormControlMixin(LitElement) {
+    static { this.shadowRootOptions = {
+        ...LitElement.shadowRootOptions,
+        delegatesFocus: true,
+    }; }
+    static { this.styles = [reset, styles]; }
+    constructor() {
+        super();
+        this.variant = 'secondary';
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (!variants.includes(this.variant)) {
+            throw new Error(`Invalid "variant" attribute. Set its value to one of the following:\n${variants.join(', ')}.`);
+        }
+    }
+    firstUpdated() {
+        if (this.autofocus) {
+            setTimeout(() => this.focus(), 0);
+        }
+    }
+    render() {
+        const classes = {
+            'w-button': this.variant !== 'link',
+            'w-button--primary': this.variant === 'primary',
+            'w-button--secondary': this.variant === 'secondary',
+            'w-button--negative': this.variant === 'negative',
+            'w-button--utility': this.variant === 'utility',
+            'w-button--quiet': this.variant === 'quiet',
+            'w-button--negative-quiet': this.variant === 'negativeQuiet',
+            'w-button--utility-quiet': this.variant === 'utilityQuiet',
+            'w-button--small': this.small,
+            'w-button--full-width': this.fullWidth,
+            'w-button--disabled': this.disabled,
+        };
+        return html `<a
+      href=${this.href}
+      target=${this.target}
+      rel=${this.target === '_blank' ? this.rel || 'noopener' : undefined}
+      class=${classMap(classes)}>
+      <slot></slot>
+    </a>`;
+    }
+}
+__decorate([
+    property({ type: Boolean, reflect: true })
+], WarpLink.prototype, "autofocus", void 0);
+__decorate([
+    property({ reflect: true })
+], WarpLink.prototype, "variant", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], WarpLink.prototype, "quiet", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], WarpLink.prototype, "small", void 0);
+__decorate([
+    property({ reflect: true })
+], WarpLink.prototype, "href", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], WarpLink.prototype, "disabled", void 0);
+__decorate([
+    property({ reflect: true })
+], WarpLink.prototype, "target", void 0);
+__decorate([
+    property({ reflect: true })
+], WarpLink.prototype, "rel", void 0);
+__decorate([
+    property({ attribute: 'full-width', type: Boolean, reflect: true })
+], WarpLink.prototype, "fullWidth", void 0);
+__decorate([
+    property({ attribute: 'button-class', reflect: true })
+], WarpLink.prototype, "buttonClass", void 0);
+__decorate([
+    property({ reflect: true })
+], WarpLink.prototype, "name", void 0);
+if (!customElements.get('w-link')) {
+    customElements.define('w-link', WarpLink);
+}
+export { WarpLink };

package/dist/packages/link/styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/packages/link/styles.js

@@ -0,0 +1,200 @@
+import { css } from 'lit';
+export const styles = css `.w-button,
+.w-button--secondary {
+    /* Local scoped variables, given the default button (the secondary variant) as a default */
+    --_background: var(--background, var(--w-s-color-background));
+    --_background-hover: var(--background-hover, var(--w-s-color-background-hover));
+    --_background-active: var(--background-active, var(--w-s-color-background-active));
+    --_text-color: var(--color, var(--w-s-color-text-link));
+    --_border-width: var(--border-width, 2px);
+    --_border: var(--border, var(--w-s-color-border));
+    --_border-hover: var(--border-hover, var(--w-s-color-border-hover));
+    --_border-active: var(--border-active, var(--w-s-color-border-active));
+    --_border-radius: var(--border-radius, 8px);
+    --_font-size: var(--font-size, var(--w-font-size-m));
+    --_line-height: var(--line-height, var(--w-line-height-m));
+    --_font-weight: var(--font-weight, bold);
+    --_padding-x: var(--padding-x, 16px);
+    --_padding-y: var(--padding-y, 13px);
+
+    /* Base setup for all buttons */
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    cursor: pointer;
+    transition:
+            color 150ms cubic-bezier(0.4, 0, 0.2, 1),
+            background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
+            border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
+            fill 150ms cubic-bezier(0.4, 0, 0.2, 1),
+            stroke 150ms cubic-bezier(0.4, 0, 0.2, 1);
+
+    /* Hook the local vars up to the button stuff  */
+    background-color: var(--_background);
+    color: var(--_text-color);
+    border: var(--_border-width) solid var(--_border);
+    border-radius: var(--_border-radius);
+    padding: calc(var(--_padding-y) - var(--_border-width)) calc(var(--_padding-x) - var(--_border-width));
+    font-size: var(--_font-size);
+    line-height: var(--_line-height);
+    font-weight: var(--_font-weight);
+}
+
+    .w-button:hover {
+        background-color: var(--_background-hover);
+        border-color: var(--_border-hover);
+    }
+
+    .w-button:active {
+        background-color: var(--_background-active);
+        border-color: var(--_border-active);
+    }
+
+    .w-button:focus-visible {
+        outline: 2px solid var(--w-s-color-border-focus);
+        outline-offset: var(--w-outline-offset, 1px);
+    }
+
+    /* Variants config */
+    .w-button--primary {
+        --background: var(--w-s-color-background-primary);
+        --background-hover: var(--w-s-color-background-primary-hover);
+        --background-active: var(--w-s-color-background-primary-active);
+        --color: var(--w-s-color-text-inverted);
+        --border-width: 0px;
+    }
+    .w-button--negative {
+        --background: var(--w-s-color-background-negative);
+        --background-hover: var(--w-s-color-background-negative-hover);
+        --background-active: var(--w-s-color-background-negative-active);
+        --color: var(--w-s-color-text-inverted);
+        --border-width: 0px;
+    }
+    .w-button--negative-quiet {
+        --background: transparent;
+        --background-hover: var(--w-s-color-background-negative-subtle-hover);
+        --background-active: var(--w-s-color-background-negative-subtle-active);
+        --color: var(--w-s-color-text-negative);
+        --border-width: 0px;
+    }
+    .w-button--utility {
+        --background: var(--w-s-color-background);
+        --background-hover: var(--w-s-color-background-hover);
+        --background-active: var(--w-s-color-background-active);
+        --color: var(--w-s-color-text);
+        --border-radius: 4px;
+        --border-width: 1px;
+    }
+    .w-button--utility-quiet {
+        --background: transparent;
+        --color: var(--w-s-color-text);
+        --border-width: 0px;
+    }
+    .w-button--overlay {
+        --background: var(--w-color-background);
+        --background-hover: var(--w-color-background-hover);
+        --background-active: var(--w-color-background-active);
+        --color: var(--w-s-color-text);
+        --border-radius: 9999px;
+        --border-width: 0px;
+    }
+    .w-button--overlay-quiet {
+        --background: transparent;
+        --background-hover: var(--w-s-color-background-hover);
+        --background-active: var(--w-s-color-background-active);
+        --color: var(--w-s-color-text);
+        --border-radius: 9999px;
+        --border-width: 0px;
+    }
+    .w-button--overlay-inverted {
+        --background: var(--w-s-color-background-inverted);
+        --background-hover: var(--w-s-color-background-inverted-hover);
+        --background-active: var(--w-s-color-background-inverted-active);
+        --color: var(--w-s-color-text-inverted);
+        --border-radius: 9999px;
+        --border-width: 0px;
+    }
+    .w-button--overlay-inverted-quiet {
+        --background: transparent;
+        --background-hover: var(--w-s-color-background-inverted-hover);
+        --background-active: var(--w-s-color-background-inverted-active);
+        --color: var(--w-s-color-text-inverted);
+        --border-radius: 9999px;
+        --border-width: 0px;
+    }
+
+    .w-button--link {
+        --background: none;
+        --background-hover: none;
+        --background-active: none;
+        --border-width: 0;
+        --font-weight: normal;
+        display: inline;
+    }
+
+    /* States config,  selects --loading as well since loading is always supposed to be disabled */
+    .w-button:disabled,
+    .w-button--disabled,
+    .w-button--loading {
+        --background: var(--w-s-color-background-disabled);
+        --background-hover: var(--w-s-color-background-disabled);
+        --background-active: var(--w-s-color-background-disabled);
+        --color: var(--w-s-color-text-inverted);
+        --border-width: 0px;
+        pointer-events: none;
+    }
+
+    .w-button--link:hover {
+        text-decoration: underline;
+    }
+
+    /* Sizes config */
+    .w-button--small {
+        --padding-x: 12px;
+        --padding-y: 8px;
+        --font-size: var(--w-font-size-xs);
+        --line-height: var(--w-line-height-xs);
+    }
+
+    /* Width config */
+    .w-button--full-width {
+        width: 100%;
+        max-width: 100%;
+    }
+
+    .w-button--has-icon-only {
+        width: auto;
+        max-width: none;
+        --_padding-x: var(--_padding-y);
+        aspect-ratio: 1 / 1;
+    }
+
+    a.w-button {
+        text-decoration: none !important;
+    }
+
+    /* Copy of loading animation from warp  */
+    .w-button--loading {
+        background-image: linear-gradient(
+                135deg,
+                rgba(0, 0, 0, 0.05) 25%,
+                transparent 25%,
+                transparent 50%,
+                rgba(0, 0, 0, 0.05) 50%,
+                rgba(0, 0, 0, 0.05) 75%,
+                transparent 75%,
+                transparent
+        );
+        background-size: 30px 30px;
+        animation: animate-inprogress 3s linear infinite;
+    }
+
+    @keyframes animate-inprogress {
+        0% {
+            background-position: 0 0;
+        }
+        100% {
+            background-position: 60px 0;
+        }
+    }`;

package/dist/packages/modal/index.d.ts

@@ -1,6 +1,5 @@
-import { ModalMain } from './modal-main.ts';
-import { ModalHeader } from './modal-header.ts';
-import { ModalFooter } from './modal-footer.ts';
-import { CanCloseMixin } from './util.js';
-import { ProvidesCanCloseToSlotsMixin } from './util.js';
-export { ModalMain as WarpModal, ModalHeader as WarpModalHeader, ModalFooter as WarpModalFooter, CanCloseMixin as ModalCanCloseMixin, ProvidesCanCloseToSlotsMixin as ModalProvidesCanCloseToSlotsMixin };
+import { ModalFooter } from './modal-footer.js';
+import { ModalHeader } from './modal-header.js';
+import { ModalMain } from './modal-main.js';
+import { CanCloseMixin, ProvidesCanCloseToSlotsMixin } from './util.js';
+export { ModalMain as WarpModal, ModalHeader as WarpModalHeader, ModalFooter as WarpModalFooter, CanCloseMixin as ModalCanCloseMixin, ProvidesCanCloseToSlotsMixin as ModalProvidesCanCloseToSlotsMixin, };