@telia-ace/alliance-ui 1.0.16-next.0 → 1.0.16

package/components/{chunk-ADFC4JKF.js → chunk-4546RD56.js}

@@ -1,105 +1,16 @@
-import { layers, colors, borders, shadows, breakpoints, spacing } from './chunk-B6YHD7BN.js';
-import { __name, define } from './chunk-NB6ODBZJ.js';
+import { spacing, borders, colors, layers, shadows, breakpoints } from './chunk-5A2VXG2P.js';
+import { __decorateClass, define } from './chunk-AW7BCYX5.js';
 import { close } from '@teliads/components/icons';
-import { LitElement, css, unsafeCSS, html } from 'lit';
+import { LitElement, html, unsafeCSS, css } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 
-function _ts_decorate(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;
-}
-__name(_ts_decorate, "_ts_decorate");
-function _ts_metadata(k, v) {
-  if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
-    return Reflect.metadata(k, v);
-}
-__name(_ts_metadata, "_ts_metadata");
 var Modal = class extends LitElement {
-  static {
-    __name(this, "Modal");
-  }
   constructor() {
     super();
-    this.header = "";
-    this.actions = [];
-    this.required = false;
-    this.scrollMode = "outside";
-    this.hasSubHeader = false;
-  }
-  static styles = css`
-        :host {
-            display: block;
-            inset: 0;
-            z-index: ${unsafeCSS(parseInt(layers.modal) - 2)};
-        }
-
-        .backdrop {
-            inset: 0;
-            z-index: ${unsafeCSS(parseInt(layers.modal) - 1)};
-            background-color: ${unsafeCSS(colors.black)};
-            opacity: 0.3;
-        }
-
-        .container {
-            margin: 0 auto;
-            display: flex;
-            justify-content: center;
-            height: 100%;
-            width: 100%;
-        }
-
-        dialog {
-            background-color: ${unsafeCSS(colors.white)};
-            border-radius: ${unsafeCSS(borders.radiusLg)};
-            box-shadow: ${unsafeCSS(shadows.md)};
-            z-index: ${unsafeCSS(parseInt(layers.modal))};
-            max-width: ${unsafeCSS(breakpoints.breakpointLg)};
-            position: static;
-            padding: 0;
-            border: none;
-        }
-
-        .header {
-            position: relative;
-            display: flex;
-            align-items: center;
-            padding: ${unsafeCSS(spacing.spacing24)} ${unsafeCSS(spacing.spacing32)};
-            border-bottom: ${unsafeCSS(borders.widthXs)} solid ${unsafeCSS(colors.gray200)};
-            min-height: 40px;
-        }
-
-        .header telia-button {
-            position: absolute;
-            top: ${unsafeCSS(spacing.spacing20)};
-            right: ${unsafeCSS(spacing.spacing24)};
-        }
-
-        .sub-header {
-            padding: ${unsafeCSS(spacing.spacing24)} ${unsafeCSS(spacing.spacing32)};
-            border-bottom: ${unsafeCSS(borders.widthXs)} solid ${unsafeCSS(colors.gray200)};
-            display: none;
-        }
-
-        .body {
-            min-width: calc(${unsafeCSS(spacing.spacing128)} * 2);
-        }
-
-        .footer {
-            display: flex;
-            justify-content: flex-end;
-            gap: ${unsafeCSS(spacing.spacing16)};
-        }
-    `;
-  containStyling = () => {
-    if (!this.contain) {
-      return html`<style>
+    this.containStyling = () => {
+      if (!this.contain) {
+        return html`<style>
                 :host {
                     position: fixed;
                 }
@@ -108,8 +19,8 @@ var Modal = class extends LitElement {
                     position: absolute;
                 }
             </style>`;
-    }
-    return html`<style>
+      }
+      return html`<style>
             :host {
                 height: 500px;
                 position: static;
@@ -118,10 +29,10 @@ var Modal = class extends LitElement {
                 position: absolute;
             }
         </style>`;
-  };
-  scrollStyling = () => {
-    if (this.scrollMode === "inside") {
-      return html`<style>
+    };
+    this.scrollStyling = () => {
+      if (this.scrollMode === "inside") {
+        return html`<style>
                 .container {
                     align-items: center;
                 }
@@ -145,8 +56,8 @@ var Modal = class extends LitElement {
                     padding: ${unsafeCSS(spacing.spacing24)} ${unsafeCSS(spacing.spacing32)};
                 }
             </style>`;
-    }
-    return html`<style>
+      }
+      return html`<style>
             .container {
                 overflow-x: hidden;
                 overflow-y: overlay;
@@ -164,35 +75,37 @@ var Modal = class extends LitElement {
                 padding: 0 ${unsafeCSS(spacing.spacing32)};
             }
         </style>`;
-  };
-  subHeaderStyling = () => {
-    if (this.hasSubHeader) {
-      return html`<style>
+    };
+    this.subHeaderStyling = () => {
+      if (this.hasSubHeader) {
+        return html`<style>
                 div.sub-header {
                     display: block;
                 }
             </style>`;
-    }
-  };
-  closeButton = () => {
-    if (this.required) {
-      return "";
-    }
-    return html`<telia-button
+      }
+    };
+    this.closeButton = () => {
+      if (this.required) {
+        return "";
+      }
+      return html`<telia-button
             size="sm"
             variant="text"
             data-testid="close-modal-button"
             @click=${this.onCloseClick}
             ><telia-icon size="md" svg="${close.svg}"
         /></telia-button>`;
-  };
-  footer = () => {
-    if (!this.actions.length) {
-      return "";
-    }
-    return html`
+    };
+    this.footer = () => {
+      if (!this.actions.length) {
+        return "";
+      }
+      return html`
             <div class="footer">
-                ${repeat(this.actions, ({ disabled, variant, action, label }) => html`
+                ${repeat(
+        this.actions,
+        ({ disabled, variant, action, label }) => html`
                         <telia-button
                             disabled="${disabled ? "true" : "false"}"
                             variant="${variant || "primary"}"
@@ -202,35 +115,117 @@ var Modal = class extends LitElement {
                         >
                             ${label}
                         </telia-button>
-                    `)}
+                    `
+      )}
             </div>
         `;
-  };
-  onBackdropClick = () => {
-    if (this.required) {
-      return;
-    }
-    return this.action("close");
-  };
-  onCloseClick = () => {
-    if (this.required) {
-      return;
-    }
-    return this.action("close");
-  };
-  onKeyDown = (event) => {
-    if (event.defaultPrevented) {
-      return;
-    }
-    if (!this.required && event.key === "Escape") {
-      this.action("close");
-    }
-  };
-  // The slotchange event is only triggered if slot changes content
-  // So if event is triggered, that means sub-header is populated and should be shown
-  onSubHeaderSlotChange = () => {
-    this.hasSubHeader = true;
-  };
+    };
+    this.onBackdropClick = () => {
+      if (this.required) {
+        return;
+      }
+      return this.action("close");
+    };
+    this.onCloseClick = () => {
+      if (this.required) {
+        return;
+      }
+      return this.action("close");
+    };
+    this.onKeyDown = (event) => {
+      if (event.defaultPrevented) {
+        return;
+      }
+      if (!this.required && event.key === "Escape") {
+        this.action("close");
+      }
+    };
+    // The slotchange event is only triggered if slot changes content
+    // So if event is triggered, that means sub-header is populated and should be shown
+    this.onSubHeaderSlotChange = () => {
+      this.hasSubHeader = true;
+    };
+    this.action = (action) => {
+      const event = new CustomEvent("action", {
+        bubbles: true,
+        composed: true,
+        detail: { action },
+        cancelable: true
+      });
+      return this.dispatchEvent(event);
+    };
+    this.header = "";
+    this.actions = [];
+    this.required = false;
+    this.scrollMode = "outside";
+    this.hasSubHeader = false;
+  }
+  static {
+    this.styles = css`
+        :host {
+            display: block;
+            inset: 0;
+            z-index: ${unsafeCSS(parseInt(layers.modal) - 2)};
+        }
+
+        .backdrop {
+            inset: 0;
+            z-index: ${unsafeCSS(parseInt(layers.modal) - 1)};
+            background-color: ${unsafeCSS(colors.black)};
+            opacity: 0.3;
+        }
+
+        .container {
+            margin: 0 auto;
+            display: flex;
+            justify-content: center;
+            height: 100%;
+            width: 100%;
+        }
+
+        dialog {
+            background-color: ${unsafeCSS(colors.white)};
+            border-radius: ${unsafeCSS(borders.radiusLg)};
+            box-shadow: ${unsafeCSS(shadows.md)};
+            z-index: ${unsafeCSS(parseInt(layers.modal))};
+            max-width: ${unsafeCSS(breakpoints.breakpointLg)};
+            position: static;
+            padding: 0;
+            border: none;
+        }
+
+        .header {
+            position: relative;
+            display: flex;
+            align-items: center;
+            padding: ${unsafeCSS(spacing.spacing24)} ${unsafeCSS(spacing.spacing32)};
+            border-bottom: ${unsafeCSS(borders.widthXs)} solid ${unsafeCSS(colors.gray200)};
+            min-height: 40px;
+        }
+
+        .header telia-button {
+            position: absolute;
+            top: ${unsafeCSS(spacing.spacing20)};
+            right: ${unsafeCSS(spacing.spacing24)};
+        }
+
+        .sub-header {
+            padding: ${unsafeCSS(spacing.spacing24)} ${unsafeCSS(spacing.spacing32)};
+            border-bottom: ${unsafeCSS(borders.widthXs)} solid ${unsafeCSS(colors.gray200)};
+            display: none;
+        }
+
+        .body {
+            min-width: calc(${unsafeCSS(spacing.spacing128)} * 2);
+        }
+
+        .footer {
+            display: flex;
+            justify-content: flex-end;
+            gap: ${unsafeCSS(spacing.spacing16)};
+        }
+    `;
+  }
   connectedCallback() {
     super.connectedCallback();
     window.addEventListener("keydown", this.onKeyDown);
@@ -239,17 +234,6 @@ var Modal = class extends LitElement {
     window.removeEventListener("keydown", this.onKeyDown);
     super.disconnectedCallback();
   }
-  action = (action) => {
-    const event = new CustomEvent("action", {
-      bubbles: true,
-      composed: true,
-      detail: {
-        action
-      },
-      cancelable: true
-    });
-    return this.dispatchEvent(event);
-  };
   render() {
     return html`
             ${this.containStyling()} ${this.scrollStyling()} ${this.subHeaderStyling()}
@@ -272,44 +256,24 @@ var Modal = class extends LitElement {
         `;
   }
 };
-_ts_decorate([
-  property({
-    type: String,
-    attribute: "header"
-  }),
-  _ts_metadata("design:type", String)
-], Modal.prototype, "header", void 0);
-_ts_decorate([
-  property({
-    type: Array
-  }),
-  _ts_metadata("design:type", Array)
-], Modal.prototype, "actions", void 0);
-_ts_decorate([
-  property({
-    type: Boolean,
-    attribute: "required"
-  }),
-  _ts_metadata("design:type", Boolean)
-], Modal.prototype, "required", void 0);
-_ts_decorate([
-  property({
-    type: String,
-    attribute: "scroll-mode"
-  }),
-  _ts_metadata("design:type", String)
-], Modal.prototype, "scrollMode", void 0);
-_ts_decorate([
-  state(),
-  _ts_metadata("design:type", Boolean)
-], Modal.prototype, "hasSubHeader", void 0);
-_ts_decorate([
-  property({
-    type: Boolean,
-    attribute: "contain"
-  }),
-  _ts_metadata("design:type", Boolean)
-], Modal.prototype, "contain", void 0);
+__decorateClass([
+  property({ type: String, attribute: "header" })
+], Modal.prototype, "header", 2);
+__decorateClass([
+  property({ type: Array })
+], Modal.prototype, "actions", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "required" })
+], Modal.prototype, "required", 2);
+__decorateClass([
+  property({ type: String, attribute: "scroll-mode" })
+], Modal.prototype, "scrollMode", 2);
+__decorateClass([
+  state()
+], Modal.prototype, "hasSubHeader", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "contain" })
+], Modal.prototype, "contain", 2);
 define("alliance-modal", Modal);
 //# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-ADFC4JKF.js.map
+//# sourceMappingURL=chunk-4546RD56.js.map

package/components/chunk-4546RD56.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/alliance-modal/alliance-modal.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ButtonVariantType } from '@teliads/components/dist/types/types/ButtonVariant';\nimport { close } from '@teliads/components/icons';\nimport { LitElement, css, html, unsafeCSS } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { repeat } from 'lit/directives/repeat.js';\n\nimport { define } from '@/utils';\nimport '@/voca/components/telia-button';\nimport '@/voca/components/telia-heading';\nimport '@/voca/components/telia-icon';\nimport { borders, breakpoints, colors, layers, shadows, spacing } from '@/voca/foundations';\n\nexport type Action = {\n    variant: ButtonVariantType;\n    label: string;\n    action: string;\n    disabled?: boolean;\n};\n\n/**\n * Event dispatched when clicking the close button, the backdrop, an action button or pressing escape.\n *\n * Event: `action`\n *\n * Detail: Object containing the property `action`.\n */\nexport type ActionEvent = CustomEvent<{ action: string }>;\n\nexport class Modal extends LitElement {\n    constructor() {\n        super();\n        this.header = '';\n        this.actions = [];\n        this.required = false;\n        this.scrollMode = 'outside';\n        this.hasSubHeader = false;\n    }\n\n    static styles = css`\n        :host {\n            display: block;\n            inset: 0;\n            z-index: ${unsafeCSS(parseInt(layers.modal) - 2)};\n        }\n\n        .backdrop {\n            inset: 0;\n            z-index: ${unsafeCSS(parseInt(layers.modal) - 1)};\n            background-color: ${unsafeCSS(colors.black)};\n            opacity: 0.3;\n        }\n\n        .container {\n            margin: 0 auto;\n            display: flex;\n            justify-content: center;\n            height: 100%;\n            width: 100%;\n        }\n\n        dialog {\n            background-color: ${unsafeCSS(colors.white)};\n            border-radius: ${unsafeCSS(borders.radiusLg)};\n            box-shadow: ${unsafeCSS(shadows.md)};\n            z-index: ${unsafeCSS(parseInt(layers.modal))};\n            max-width: ${unsafeCSS(breakpoints.breakpointLg)};\n            position: static;\n            padding: 0;\n            border: none;\n        }\n\n        .header {\n            position: relative;\n            display: flex;\n            align-items: center;\n            padding: ${unsafeCSS(spacing.spacing24)} ${unsafeCSS(spacing.spacing32)};\n            border-bottom: ${unsafeCSS(borders.widthXs)} solid ${unsafeCSS(colors.gray200)};\n            min-height: 40px;\n        }\n\n        .header telia-button {\n            position: absolute;\n            top: ${unsafeCSS(spacing.spacing20)};\n            right: ${unsafeCSS(spacing.spacing24)};\n        }\n\n        .sub-header {\n            padding: ${unsafeCSS(spacing.spacing24)} ${unsafeCSS(spacing.spacing32)};\n            border-bottom: ${unsafeCSS(borders.widthXs)} solid ${unsafeCSS(colors.gray200)};\n            display: none;\n        }\n\n        .body {\n            min-width: calc(${unsafeCSS(spacing.spacing128)} * 2);\n        }\n\n        .footer {\n            display: flex;\n            justify-content: flex-end;\n            gap: ${unsafeCSS(spacing.spacing16)};\n        }\n    `;\n\n    @property({ type: String, attribute: 'header' })\n    declare header: string;\n\n    @property({ type: Array })\n    declare actions: Action[];\n\n    @property({ type: Boolean, attribute: 'required' })\n    declare required: boolean;\n\n    @property({ type: String, attribute: 'scroll-mode' })\n    declare scrollMode: 'outside' | 'inside';\n\n    @state()\n    declare hasSubHeader: boolean;\n\n    // Internal usage only\n    // Used in Storybook to contain modal in story\n    @property({ type: Boolean, attribute: 'contain' })\n    declare contain?: boolean;\n\n    containStyling = () => {\n        if (!this.contain) {\n            return html`<style>\n                :host {\n                    position: fixed;\n                }\n\n                .backdrop {\n                    position: absolute;\n                }\n            </style>`;\n        }\n\n        return html`<style>\n            :host {\n                height: 500px;\n                position: static;\n            }\n            .backdrop {\n                position: absolute;\n            }\n        </style>`;\n    };\n\n    scrollStyling = () => {\n        if (this.scrollMode === 'inside') {\n            return html`<style>\n                .container {\n                    align-items: center;\n                }\n\n                dialog {\n                    max-height: 80%;\n                    display: flex;\n                    flex-direction: column;\n                }\n\n                .body {\n                    flex: 1;\n                    padding: ${unsafeCSS(spacing.spacing24)} ${unsafeCSS(spacing.spacing32)};\n                    height: 80%;\n                    overflow-x: hidden;\n                    overflow-y: auto;\n                }\n\n                .footer {\n                    border-top: ${unsafeCSS(borders.widthXs)} solid ${unsafeCSS(colors.gray200)};\n                    padding: ${unsafeCSS(spacing.spacing24)} ${unsafeCSS(spacing.spacing32)};\n                }\n            </style>`;\n        }\n\n        return html`<style>\n            .container {\n                overflow-x: hidden;\n                overflow-y: overlay;\n                align-items: flex-start;\n            }\n\n            dialog {\n                display: block;\n                margin: ${unsafeCSS(spacing.spacing128)} ${unsafeCSS(spacing.spacing24)};\n            }\n\n            .footer,\n            .body {\n                margin: ${unsafeCSS(spacing.spacing24)} 0;\n                padding: 0 ${unsafeCSS(spacing.spacing32)};\n            }\n        </style>`;\n    };\n\n    subHeaderStyling = () => {\n        if (this.hasSubHeader) {\n            return html`<style>\n                div.sub-header {\n                    display: block;\n                }\n            </style>`;\n        }\n    };\n\n    closeButton = () => {\n        if (this.required) {\n            return '';\n        }\n\n        return html`<telia-button\n            size=\"sm\"\n            variant=\"text\"\n            data-testid=\"close-modal-button\"\n            @click=${this.onCloseClick}\n            ><telia-icon size=\"md\" svg=\"${close.svg}\"\n        /></telia-button>`;\n    };\n\n    footer = () => {\n        if (!this.actions.length) {\n            return '';\n        }\n\n        return html`\n            <div class=\"footer\">\n                ${repeat(\n                    this.actions,\n                    ({ disabled, variant, action, label }) => html`\n                        <telia-button\n                            disabled=\"${disabled ? 'true' : 'false'}\"\n                            variant=\"${variant || 'primary'}\"\n                            size=\"sm\"\n                            @click=${() => this.action(action)}\n                            data-testid=\"${action}-action-button\"\n                        >\n                            ${label}\n                        </telia-button>\n                    `,\n                )}\n            </div>\n        `;\n    };\n\n    onBackdropClick = () => {\n        if (this.required) {\n            return;\n        }\n\n        return this.action('close');\n    };\n\n    onCloseClick = () => {\n        if (this.required) {\n            return;\n        }\n\n        return this.action('close');\n    };\n\n    onKeyDown = (event: KeyboardEvent) => {\n        if (event.defaultPrevented) {\n            return;\n        }\n\n        if (!this.required && event.key === 'Escape') {\n            this.action('close');\n        }\n    };\n\n    // The slotchange event is only triggered if slot changes content\n    // So if event is triggered, that means sub-header is populated and should be shown\n    onSubHeaderSlotChange = () => {\n        this.hasSubHeader = true;\n    };\n\n    connectedCallback() {\n        super.connectedCallback();\n        window.addEventListener('keydown', this.onKeyDown);\n    }\n\n    disconnectedCallback() {\n        window.removeEventListener('keydown', this.onKeyDown);\n        super.disconnectedCallback();\n    }\n\n    action = (action: string) => {\n        const event: ActionEvent = new CustomEvent('action', {\n            bubbles: true,\n            composed: true,\n            detail: { action },\n            cancelable: true,\n        });\n        return this.dispatchEvent(event);\n    };\n\n    render() {\n        return html`\n            ${this.containStyling()} ${this.scrollStyling()} ${this.subHeaderStyling()}\n            <div class=\"backdrop\" @click=${this.onBackdropClick}></div>\n            <div class=\"container\">\n                <dialog open>\n                    <div class=\"header\">\n                        <telia-heading tag=\"h3\" variant=\"title-100\">${this.header}</telia-heading>\n                        ${this.closeButton()}\n                    </div>\n                    <div class=\"sub-header\">\n                        <slot name=\"sub-header\" @slotchange=${this.onSubHeaderSlotChange}></slot>\n                    </div>\n                    <div class=\"body\">\n                        <slot></slot>\n                    </div>\n                    ${this.footer()}\n                </dialog>\n            </div>\n        `;\n    }\n}\n\ndefine('alliance-modal', Modal);\n"]}

package/components/{chunk-B6YHD7BN.js → chunk-5A2VXG2P.js}

@@ -1,4 +1,4 @@
 export { borders, breakpoints, colors, layers, motion, shadows, spacing } from '@teliads/components/foundations';
 export { default as focus } from '@teliads/components/foundations/focus/variables.json';
 //# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-B6YHD7BN.js.map
+//# sourceMappingURL=chunk-5A2VXG2P.js.map

package/components/chunk-5A2VXG2P.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/voca/foundations/index.ts"],"names":[],"mappings":";AAAA;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACG;AACP,OAAO,WAAW","sourcesContent":["import {\n    borders,\n    breakpoints,\n    colors,\n    grid,\n    layers,\n    motion,\n    shadows,\n    spacing,\n    typography,\n} from '@teliads/components/foundations';\nimport focus from '@teliads/components/foundations/focus/variables.json';\n\nexport { borders, breakpoints, colors, grid, layers, motion, shadows, spacing, typography, focus };\n\nexport const addCssVariables = () => {\n    const styleId = 'voca-foundations-style-tag';\n    const existing = document.getElementById(styleId);\n    const element = document.createElement('style');\n    element.id = styleId;\n\n    const variables: Record<string, string> = {\n        '--font-telia-heading':\n            'TeliaSansHeading, TeliaSans, HelveticaNeue, Helvetica, Arial, sans-serif',\n        '--font-telia-sans': 'TeliaSans, Helvetica, Arial, Lucida Grande, sans-serif',\n        '--font-normal': typography.weightNormal,\n        '--font-medium': typography.weightMedium,\n        '--font-bold': typography.weightBold,\n\n        '--spacing-0': spacing.spacing0,\n        '--spacing-2': spacing.spacing2,\n        '--spacing-4': spacing.spacing4,\n        '--spacing-8': spacing.spacing8,\n        '--spacing-12': spacing.spacing12,\n        '--spacing-16': spacing.spacing16,\n        '--spacing-20': spacing.spacing20,\n        '--spacing-24': spacing.spacing24,\n        '--spacing-32': spacing.spacing32,\n        '--spacing-48': spacing.spacing48,\n        '--spacing-64': spacing.spacing64,\n        '--spacing-80': spacing.spacing80,\n        '--spacing-96': spacing.spacing96,\n        '--spacing-128': spacing.spacing128,\n\n        '--box-shadow-none': shadows.none,\n        '--box-shadow-sm': shadows.sm,\n        '--box-shadow-md': shadows.md,\n        '--box-shadow-lg': shadows.lg,\n\n        '--duration-50': motion.duration50,\n        '--duration-100': motion.duration100,\n        '--duration-150': motion.duration150,\n        '--duration-200': motion.duration200,\n        '--duration-250': motion.duration250,\n        '--duration-300': motion.duration300,\n        '--duration-350': motion.duration350,\n        '--duration-400': motion.duration400,\n        '--duration-500': motion.duration500,\n        '--duration-1500': motion.duration1500,\n        '--duration-2000': motion.duration2000,\n\n        '--timing-ease-in': motion.easeIn,\n        '--timing-ease-out': motion.easeOut,\n        '--timing-ease-in-out': motion.easeInOut,\n\n        '--layer-base': layers.base,\n        '--layer-dropdown': layers.dropdown,\n        '--layer-header': layers.header,\n        '--layer-modal': layers.modal,\n\n        '--border-width-none': borders.widthNone,\n        '--border-width-xs': borders.widthXs,\n        '--border-width-sm': borders.widthSm,\n        '--border-width-md': borders.widthMd,\n\n        '--border-radius-none': borders.radiusNone,\n        '--border-radius-default': borders.radiusDefault,\n        '--border-radius-sm': borders.radiusSm,\n        '--border-radius-lg': borders.radiusLg,\n        '--border-radius-full': borders.radiusFull,\n\n        '--screen-size-sm': breakpoints.breakpointSm,\n        '--screen-size-md': breakpoints.breakpointMd,\n        '--screen-size-lg': breakpoints.breakpointLg,\n        '--screen-size-xl': breakpoints.breakpointXl,\n\n        '--purple-100': colors.purple100,\n        '--purple-200': colors.purple200,\n        '--purple-300': colors.purple300,\n        '--purple-400': colors.purple400,\n        '--purple-500': colors.purple500,\n        '--purple-600': colors.purple600,\n        '--purple-700': colors.purple700,\n        '--purple-800': colors.purple800,\n        '--purple-850': colors.purple850,\n        '--purple-900': colors.purple900,\n\n        '--beige-50': colors.beige50,\n        '--beige-100': colors.beige100,\n        '--beige-200': colors.beige200,\n        '--beige-300': colors.beige300,\n        '--beige-400': colors.beige400,\n        '--beige-500': colors.beige500,\n        '--beige-600': colors.beige600,\n        '--beige-700': colors.beige700,\n        '--beige-800': colors.beige800,\n        '--beige-900': colors.beige900,\n\n        '--gray-50': colors.gray50,\n        '--gray-100': colors.gray100,\n        '--gray-200': colors.gray200,\n        '--gray-300': colors.gray300,\n        '--gray-400': colors.gray400,\n        '--gray-500': colors.gray500,\n        '--gray-600': colors.gray600,\n        '--gray-700': colors.gray700,\n        '--gray-800': colors.gray800,\n        '--gray-900': colors.gray900,\n\n        '--green-100': colors.green100,\n        '--green-200': colors.green200,\n        '--green-300': colors.green300,\n        '--green-400': colors.green400,\n        '--green-500': colors.green500,\n        '--green-600': colors.green600,\n        '--green-700': colors.green700,\n        '--green-800': colors.green800,\n        '--green-900': colors.green900,\n\n        '--red-100': colors.red100,\n        '--red-200': colors.red200,\n        '--red-300': colors.red300,\n        '--red-400': colors.red400,\n        '--red-500': colors.red500,\n        '--red-600': colors.red600,\n        '--red-700': colors.red700,\n        '--red-800': colors.red800,\n        '--red-900': colors.red900,\n\n        '--orange-100': colors.orange100,\n        '--orange-200': colors.orange200,\n        '--orange-300': colors.orange300,\n        '--orange-400': colors.orange400,\n        '--orange-500': colors.orange500,\n        '--orange-600': colors.orange600,\n        '--orange-700': colors.orange700,\n        '--orange-800': colors.orange800,\n        '--orange-900': colors.orange900,\n\n        '--blue-100': colors.blue100,\n        '--blue-200': colors.blue200,\n        '--blue-300': colors.blue300,\n        '--blue-400': colors.blue400,\n        '--blue-500': colors.blue500,\n        '--blue-600': colors.blue600,\n        '--blue-700': colors.blue700,\n        '--blue-800': colors.blue800,\n        '--blue-900': colors.blue900,\n\n        '--white': colors.white,\n        '--black': colors.black,\n        '--functional-black': colors.functionalBlack,\n\n        /* DEPRECATED */\n        '--grid-gutter': grid.gutter,\n        '--grid-gutter-medium': grid.gutterMedium,\n        '--grid-gutter-large': grid.gutterLarge,\n        '--grid-page-padding': grid.pagePadding,\n        '--grid-page-padding-m': grid.pagePaddingM,\n        '--grid-page-padding-l': grid.pagePaddingL,\n\n        '--grid-gutter-sm': grid.gutter,\n        '--grid-gutter-md': grid.gutterMedium,\n        '--grid-gutter-lg': grid.gutterLarge,\n        '--grid-page-padding-sm': grid.pagePadding,\n        '--grid-page-padding-md': grid.pagePaddingM,\n        '--grid-page-padding-lg': grid.pagePaddingL,\n        '--grid-page-padding-xl': grid.pagePaddingXl,\n\n        // The following are not available in JS variables for some reason\n        '--functional-transparent': 'transparent',\n        '--transparent-black-50': 'rgba(0, 0, 0, 0.05)',\n        '--transparent-black-100': 'rgba(0, 0, 0, 0.1)',\n        '--transparent-black-200': 'rgba(0, 0, 0, 0.2)',\n        '--transparent-black-300': 'rgba(0, 0, 0, 0.3)',\n        '--transparent-black-400': 'rgba(0, 0, 0, 0.4)',\n        '--transparent-black-500': 'rgba(0, 0, 0, 0.5)',\n        '--transparent-black-600': 'rgba(0, 0, 0, 0.6)',\n        '--transparent-black-700': 'rgba(0, 0, 0, 0.7)',\n        '--transparent-black-800': 'rgba(0, 0, 0, 0.8)',\n        '--transparent-black-850': 'rgba(0, 0, 0, 0.85)',\n        '--transparent-black-900': 'rgba(0, 0, 0, 0.9)',\n        '--transparent-white-50': 'rgba(0, 0, 0, 0.05)',\n        '--transparent-white-100': 'rgba(0, 0, 0, 0.1)',\n        '--transparent-white-200': 'rgba(0, 0, 0, 0.2)',\n        '--transparent-white-300': 'rgba(0, 0, 0, 0.3)',\n        '--transparent-white-400': 'rgba(0, 0, 0, 0.4)',\n        '--transparent-white-500': 'rgba(0, 0, 0, 0.5)',\n        '--transparent-white-600': 'rgba(0, 0, 0, 0.6)',\n        '--transparent-white-700': 'rgba(0, 0, 0, 0.7)',\n        '--transparent-white-800': 'rgba(0, 0, 0, 0.8)',\n        '--transparent-white-850': 'rgba(0, 0, 0, 0.85)',\n        '--transparent-white-900': 'rgba(0, 0, 0, 0.9)',\n\n        '--focus-border': `${focus.focusBorderWidth} solid ${focus.focusColor}`,\n    };\n\n    const variableString = Object.keys(variables)\n        .map((key) => `${key}:${variables[key]};`)\n        .join('');\n\n    element.innerHTML = `\n        :root {\n            ${variableString}\n        }\n    `;\n\n    if (existing) {\n        document.head.replaceChild(element, existing);\n        return;\n    }\n    return document.head.append(element);\n};\n"]}

package/components/chunk-AW7BCYX5.js

@@ -0,0 +1,22 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+
+// src/utils.ts
+var define = (tag, ...args) => {
+  if (!customElements.get(tag)) {
+    return customElements.define(tag, ...args);
+  }
+};
+
+export { __decorateClass, define };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-AW7BCYX5.js.map

package/components/chunk-AW7BCYX5.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils.ts"],"names":[],"mappings":";;;;;;;;;;;;;AAAO,IAAM,SAAuC,CAAC,QAAQ,SAAS;AAClE,MAAI,CAAC,eAAe,IAAI,GAAG,GAAG;AAC1B,WAAO,eAAe,OAAO,KAAK,GAAG,IAAI;AAAA,EAC7C;AACJ","sourcesContent":["export const define: typeof customElements.define = (tag, ...args) => {\n    if (!customElements.get(tag)) {\n        return customElements.define(tag, ...args);\n    }\n};\n"]}