@cupra/ui-kit 0.2.0-canary.0 → 1.0.0-canary.10

package/dist/components/ds-chips/ds-chips.js

@@ -0,0 +1,143 @@
+import { UiKitElement as p } from "../base/UiKitElement.js";
+import { customUiKitElement as d } from "../../decorators/customUiKitElement.js";
+import { arrayConverter as m } from "../../utils/arrayConverter.js";
+import { booleanConverter as u } from "../../utils/booleanConverter.js";
+import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
+import { nothing as C, html as v } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
+import "../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
+import { property as o } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { state as n } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
+import { query as f } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query.js";
+import { queryAssignedElements as S } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";
+import { classMap as b } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import { commonStyles as y } from "./styles/common.styles.js";
+var g = Object.defineProperty, z = Object.getOwnPropertyDescriptor, h = (e, t, s, i) => {
+  for (var r = i > 1 ? void 0 : i ? z(t, s) : t, a = e.length - 1, c; a >= 0; a--)
+    (c = e[a]) && (r = (i ? c(t, s, r) : c(r)) || r);
+  return i && r && g(t, s, r), r;
+};
+let l = class extends p {
+  constructor() {
+    super(...arguments), this.multiChoice = null, this.size = "medium", this.mode = "light", this.hasScrollLeft = !1, this.hasScrollRight = !1, this.resizeObserver = new ResizeObserver(() => {
+      this.handleScrollNav();
+    }), this.handleScrollNav = () => {
+      var t, s, i, r;
+      const e = ((t = this.chipsContainer) == null ? void 0 : t.scrollLeft) + ((s = this.chipsContainer) == null ? void 0 : s.clientWidth);
+      this.hasScrollLeft = ((i = this.chipsContainer) == null ? void 0 : i.scrollLeft) > 0, this.hasScrollRight = e < ((r = this.chipsContainer) == null ? void 0 : r.scrollWidth);
+    }, this.handleScrollLeft = () => {
+      this.chipsContainer.scrollBy({ left: -150, behavior: "smooth" });
+    }, this.handleScrollRight = () => {
+      this.chipsContainer.scrollBy({ left: 150, behavior: "smooth" });
+    };
+  }
+  firstUpdated() {
+    this.handleScrollNav(), this.resizeObserver.observe(this.chipsContainer), this.chips.forEach((e) => this.resizeObserver.observe(e)), window.addEventListener("resize", this.handleScrollNav), this.chipsContainer.addEventListener("scroll", this.handleScrollNav);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.resizeObserver.disconnect(), window.removeEventListener("resize", this.handleScrollNav), this.chipsContainer.removeEventListener("scroll", this.handleScrollNav);
+  }
+  getScrollButtonTemplate(e, t) {
+    if (e === "left" && !this.hasScrollLeft || e === "right" && !this.hasScrollRight)
+      return C;
+    const s = `arrow-${e}`;
+    return this.componentFactory.createIconButton({
+      class: `scroll-button ${e}`,
+      "data-testid": `scroll-button-${e}`,
+      "data-aria-label": `scroll-button-${e}`,
+      "@click": t,
+      size: this.size || "large",
+      "icon-name": s,
+      variant: "standard",
+      mode: this.mode
+    });
+  }
+  updated(e) {
+    super.updated(e), (e.has("selectedChips") || e.has("multiChoice") || e.has("size") || e.has("mode")) && this.updateChildChips();
+  }
+  updateChildChips() {
+    var e;
+    (e = this.chips) == null || e.forEach((t) => {
+      var s, i;
+      t.size = this.size, t.selected = (i = (s = this.selectedChips) == null ? void 0 : s.includes) == null ? void 0 : i.call(s, t.value), t.deselectable = !!this.multiChoice, t.mode = this.mode;
+    });
+  }
+  get chipsContainerClasses() {
+    return {
+      "chips-container": !0,
+      "scroll-left": this.hasScrollLeft,
+      "scroll-right": this.hasScrollRight
+    };
+  }
+  handleSelect(e) {
+    var s, i;
+    let t;
+    this.multiChoice && !((i = (s = this.selectedChips) == null ? void 0 : s.includes) != null && i.call(s, e.detail.value)) ? t = [...this.selectedChips || [], e.detail.value] : t = [e.detail.value], this.selectedChips = t, this.updateChildChips(), this.dispatchEvent(
+      new CustomEvent("ds-chips:change", {
+        bubbles: !0,
+        composed: !0,
+        detail: {
+          selectedChips: t
+        }
+      })
+    );
+  }
+  handleDeselect(e) {
+    const t = [...(this.selectedChips || []).filter((s) => s !== e.detail.value)];
+    this.selectedChips = t, this.updateChildChips(), this.dispatchEvent(
+      new CustomEvent("ds-chips:change", {
+        bubbles: !0,
+        composed: !0,
+        detail: {
+          selectedChips: t
+        }
+      })
+    );
+  }
+  render() {
+    return v`
+            <div
+                class="container"
+                data-testid="ds-chips-container"
+                @select=${this.handleSelect}
+                @deselect=${this.handleDeselect}
+            >
+                ${this.getScrollButtonTemplate("left", this.handleScrollLeft)}
+                <nav tabindex="0" class=${b(this.chipsContainerClasses)}>
+                    <slot @slotchange=${this.updateChildChips}></slot>
+                </nav>
+                ${this.getScrollButtonTemplate("right", this.handleScrollRight)}
+            </div>
+        `;
+  }
+};
+l.styles = [y];
+h([
+  o({ type: Array, attribute: "selected-chips", converter: m, reflect: !0 })
+], l.prototype, "selectedChips", 2);
+h([
+  o({ type: Boolean, attribute: "multi-choice", converter: u })
+], l.prototype, "multiChoice", 2);
+h([
+  o({ type: String })
+], l.prototype, "size", 2);
+h([
+  o({ type: String, reflect: !0 })
+], l.prototype, "mode", 2);
+h([
+  n()
+], l.prototype, "hasScrollLeft", 2);
+h([
+  n()
+], l.prototype, "hasScrollRight", 2);
+h([
+  S({ slot: "" })
+], l.prototype, "chips", 2);
+h([
+  f(".chips-container")
+], l.prototype, "chipsContainer", 2);
+l = h([
+  d("ds-chips")
+], l);
+export {
+  l as DsChips
+};

package/dist/components/ds-chips/styles/common.styles.js

@@ -0,0 +1,78 @@
+import "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
+import "../../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
+import "../../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
+import { css as r } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+const l = r`
+    .container {
+        display: inline-flex;
+        position: relative;
+        max-width: 100%;
+    }
+
+    .chips-container {
+        box-sizing: border-box;
+        display: inline-flex;
+        justify-content: flex-start;
+        overflow-y: auto;
+        scrollbar-width: none;
+        scroll-behavior: smooth;
+    }
+
+    .chips-container.scroll-left {
+        mask-image: linear-gradient(
+            to left,
+            rgba(0, 0, 0, 1) 0,
+            rgba(0, 0, 0, 1) calc(100% - 48px),
+            rgba(0, 0, 0, 0) calc(100% - 32px),
+            rgba(0, 0, 0, 0) 100%
+        );
+    }
+
+    .chips-container.scroll-right {
+        mask-image: linear-gradient(
+            to right,
+            rgba(0, 0, 0, 1) 0,
+            rgba(0, 0, 0, 1) calc(100% - 48px),
+            rgba(0, 0, 0, 0) calc(100% - 32px),
+            rgba(0, 0, 0, 0) 100%
+        );
+    }
+
+    .chips-container.scroll-left.scroll-right {
+        mask-image: linear-gradient(
+            to right,
+            rgba(0, 0, 0, 0) 0px,
+            rgba(0, 0, 0, 0) 32px,
+            rgba(0, 0, 0, 1) 48px,
+            rgba(0, 0, 0, 1) calc(100% - 48px),
+            rgba(0, 0, 0, 0) calc(100% - 32px),
+            rgba(0, 0, 0, 0) 100%
+        );
+    }
+
+    .chips-container::-webkit-scrollbar {
+        display: none;
+    }
+
+    ::slotted(*) {
+        white-space: nowrap;
+        flex: 0 1 auto;
+    }
+
+    .scroll-button {
+        position: absolute;
+        top: 0;
+        z-index: 1;
+    }
+
+    .scroll-button.left {
+        left: 0;
+    }
+
+    .scroll-button.right {
+        right: 0;
+    }
+`;
+export {
+  l as commonStyles
+};

package/dist/components/ds-currency/ds-currency.js

@@ -0,0 +1,139 @@
+import { UiKitElement as y } from "../base/UiKitElement.js";
+import { customUiKitElement as g } from "../../decorators/customUiKitElement.js";
+import { formatNumber as l } from "../../utils/formatNumber/formatNumber.js";
+import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
+import { nothing as c, html as a } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
+import "../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
+import { property as i } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { classMap as m } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import { commonStyles as d } from "./styles/common.styles.js";
+var S = Object.defineProperty, b = Object.getOwnPropertyDescriptor, e = (n, r, s, p) => {
+  for (var o = p > 1 ? void 0 : p ? b(r, s) : r, u = n.length - 1, h; u >= 0; u--)
+    (h = n[u]) && (o = (p ? h(r, s, o) : h(o)) || o);
+  return p && o && S(r, s, o), o;
+};
+let t = class extends y {
+  constructor() {
+    super(...arguments), this.minimumFractionDigits = 0, this.maximumFractionDigits = 20, this.amountSize = "medium", this.amountWeight = "medium", this.currencySize = "medium", this.currencyWeight = "medium", this.periodSize = "medium", this.periodWeight = "medium", this.noteSize = "medium", this.noteWeight = "medium";
+  }
+  get valueTemplate() {
+    const { formattedValue: n, unitSymbol: r, unitSymbolPosition: s } = l({
+      value: this.amountNumber ?? 0,
+      locale: this.locale,
+      style: "currency",
+      currency: this.currencyCode,
+      localeMatcher: "lookup",
+      minimumFractionDigits: this.minimumFractionDigits,
+      maximumFractionDigits: this.maximumFractionDigits
+    }), p = this.amountText || n, o = {
+      amount: !0,
+      text: !0,
+      [`size-${this.amountSize}`]: !0,
+      [`weight-${this.amountWeight}`]: !0
+    }, u = {
+      currency: !0,
+      left: s === "left",
+      right: s === "right",
+      text: !0,
+      [`size-${this.currencySize}`]: !0,
+      [`weight-${this.currencyWeight}`]: !0
+    };
+    return a`
+            ${s === "left" ? a`<span class=${m(u)}>${r}</span>` : c}
+            <span class=${m(o)}>${p}</span>
+            ${s === "right" ? a`<span class=${m(u)}>${r}</span>` : c}
+        `;
+  }
+  get periodTemplate() {
+    if (!this.period) return c;
+    const n = new Intl.DisplayNames(this.locale, { type: "dateTimeField" }), r = {
+      period: !0,
+      text: !0,
+      [`size-${this.periodSize}`]: !0,
+      [`weight-${this.periodWeight}`]: !0
+    };
+    return a`
+            <span class=${m(r)}"period">/${n.of(this.period)}</span>
+        `;
+  }
+  get noteTemplate() {
+    if (!this.note) return c;
+    const n = {
+      note: !0,
+      text: !0,
+      [`size-${this.noteSize}`]: !0,
+      [`weight-${this.noteWeight}`]: !0
+    };
+    return a` <span class=${m(n)}>${this.note}</span> `;
+  }
+  render() {
+    return a`
+            <div class="container">
+                ${this.valueTemplate}
+                ${this.noteTemplate}
+                ${this.periodTemplate}
+            </div>
+        `;
+  }
+};
+t.styles = [d];
+e([
+  i({ type: String })
+], t.prototype, "locale", 2);
+e([
+  i({ type: String, attribute: "currency-code" })
+], t.prototype, "currencyCode", 2);
+e([
+  i({ type: String, attribute: "amount-text" })
+], t.prototype, "amountText", 2);
+e([
+  i({ type: Number, attribute: "amount-number" })
+], t.prototype, "amountNumber", 2);
+e([
+  i({ type: Number, attribute: "minimum-fraction-digits" })
+], t.prototype, "minimumFractionDigits", 2);
+e([
+  i({ type: Number, attribute: "maximum-fraction-digits" })
+], t.prototype, "maximumFractionDigits", 2);
+e([
+  i({ type: String })
+], t.prototype, "period", 2);
+e([
+  i({ type: String })
+], t.prototype, "note", 2);
+e([
+  i({ type: String, attribute: "thousand-separator" })
+], t.prototype, "thousandSeparator", 2);
+e([
+  i({ type: String, attribute: "fraction-separator" })
+], t.prototype, "fractionSeparator", 2);
+e([
+  i({ type: String, attribute: "amount-size" })
+], t.prototype, "amountSize", 2);
+e([
+  i({ type: String, attribute: "amount-weight" })
+], t.prototype, "amountWeight", 2);
+e([
+  i({ type: String, attribute: "currency-size" })
+], t.prototype, "currencySize", 2);
+e([
+  i({ type: String, attribute: "currency-weight" })
+], t.prototype, "currencyWeight", 2);
+e([
+  i({ type: String, attribute: "period-size" })
+], t.prototype, "periodSize", 2);
+e([
+  i({ type: String, attribute: "period-weight" })
+], t.prototype, "periodWeight", 2);
+e([
+  i({ type: String, attribute: "note-size" })
+], t.prototype, "noteSize", 2);
+e([
+  i({ type: String, attribute: "note-weight" })
+], t.prototype, "noteWeight", 2);
+t = e([
+  g("ds-currency")
+], t);
+export {
+  t as DsCurrency
+};

package/dist/components/ds-currency/styles/common.styles.js

@@ -0,0 +1,17 @@
+import "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
+import "../../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
+import "../../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
+import { css as i } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+const s = i`
+    :host {
+        display: inline;
+    }
+
+    .container {
+        display: inline-flex;
+        align-items: flex-end;
+    }
+`;
+export {
+  s as commonStyles
+};

package/dist/components/ds-dialog/ds-dialog.js

@@ -0,0 +1,107 @@
+import { UiKitElement as p } from "../base/UiKitElement.js";
+import { customUiKitElement as m } from "../../decorators/customUiKitElement.js";
+import { booleanConverter as v } from "../../utils/booleanConverter.js";
+import { debounce as u } from "../../utils/debounce.js";
+import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
+import { nothing as f, html as b } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
+import "../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
+import { property as c } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { state as d } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
+import { query as y } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query.js";
+import { classMap as h } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import { commonStyles as w } from "./styles/common.styles.js";
+var O = Object.defineProperty, C = Object.getOwnPropertyDescriptor, i = (e, t, r, n) => {
+  for (var o = n > 1 ? void 0 : n ? C(t, r) : t, l = e.length - 1, a; l >= 0; l--)
+    (a = e[l]) && (o = (n ? a(t, r, o) : a(o)) || o);
+  return n && o && O(t, r, o), o;
+};
+let s = class extends p {
+  constructor() {
+    super(...arguments), this.open = !1, this.size = "medium", this.hasBeenOpened = !1, this.hasScroll = !1, this.debouncedCheckScroll = u({ func: () => this.checkScroll() }), this.handleKeyDown = (e) => {
+      this.open && e.key === "Escape" && this.handleClose();
+    };
+  }
+  async updated(e) {
+    super.updated(e), !this.hasBeenOpened && e.has("open") && this.open && (this.hasBeenOpened = !0), e.has("open") && this.handleResizeObserver(), e.has("open") && this.open && (await this.updateComplete, this.requestUpdate());
+  }
+  async handleResizeObserver() {
+    var e;
+    document.body.style.overflow = this.open ? "hidden" : "", (e = this.resizeObserver) == null || e.disconnect(), this.content && (this.resizeObserver.observe(this.content), await new Promise(requestAnimationFrame), this.checkScroll());
+  }
+  get containerClasses() {
+    return {
+      container: !0,
+      close: !this.open,
+      "with-scroll": this.open && this.hasScroll
+    };
+  }
+  get dialogClasses() {
+    return {
+      dialog: !0,
+      [this.size]: !!this.size
+    };
+  }
+  handleClose() {
+    this.open = !1, this.dispatchEvent(
+      new Event("ds-dialog:close", {
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  connectedCallback() {
+    super.connectedCallback(), window.addEventListener("keydown", this.handleKeyDown), this.resizeObserver = new ResizeObserver(this.debouncedCheckScroll), this.handleResizeObserver();
+  }
+  disconnectedCallback() {
+    var e;
+    super.disconnectedCallback(), window.removeEventListener("keydown", this.handleKeyDown), document.body.style.overflow = "", (e = this.resizeObserver) == null || e.disconnect();
+  }
+  checkScroll() {
+    var e, t;
+    this.hasScroll = ((e = this.content) == null ? void 0 : e.scrollHeight) > ((t = this.content) == null ? void 0 : t.clientHeight);
+  }
+  render() {
+    return !this.hasBeenOpened && !this.open ? f : b`
+            <style>
+                :host {
+                    display: ${this.open ? "flex" : "none"};
+                }
+            </style>
+
+            <div class=${h(this.containerClasses)}>
+                <div class="overlay" @click=${this.handleClose}></div>
+                <dialog ?open=${this.open} data-testid="ds-dialog-container" class=${h(this.dialogClasses)}>
+                    <slot name="close-button" @click=${this.handleClose}></slot>
+                    <div class="content-container">
+                        <div tabindex="0" class="content ds-scroll">
+                            <slot @slotchange=${this.handleResizeObserver}></slot>
+                        </div>
+                        <slot name="footer"></slot>
+                    </div>
+                </dialog>
+            </div>
+        `;
+  }
+};
+s.styles = [w];
+i([
+  c({ type: Boolean, converter: v })
+], s.prototype, "open", 2);
+i([
+  c({ type: String })
+], s.prototype, "size", 2);
+i([
+  d()
+], s.prototype, "hasBeenOpened", 2);
+i([
+  d()
+], s.prototype, "hasScroll", 2);
+i([
+  y(".content")
+], s.prototype, "content", 2);
+s = i([
+  m("ds-dialog")
+], s);
+export {
+  s as DsDialog
+};

package/dist/components/ds-dialog/styles/common.styles.js

@@ -0,0 +1,82 @@
+import { cssQueries as l } from "../../../utils/cssQueries.js";
+import "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
+import "../../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
+import "../../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
+import { css as o } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+const a = o`
+    :host {
+        transition: display 0.3s cubic-bezier(0, 0, 0.2, 1) allow-discrete;
+    }
+
+    .container.close {
+        display: none;
+        opacity: 0;
+    }
+
+    .container {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100dvw;
+        height: 100dvh;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        z-index: var(--ds-z-index-modal);
+        transition:
+            opacity 0.3s cubic-bezier(0, 0, 0.2, 1),
+            display 0.3s cubic-bezier(0, 0, 0.2, 1) allow-discrete;
+        opacity: 1;
+        @starting-style {
+            opacity: 0;
+        }
+    }
+
+    .dialog {
+        padding: 0;
+        position: relative;
+    }
+
+    .content-container {
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+    }
+
+    .ds-scroll::-webkit-scrollbar,
+    .ds-scroll-global *::-webkit-scrollbar {
+        appearance: none;
+        display: initial;
+    }
+
+    .ds-scroll::-webkit-scrollbar-thumb,
+    .ds-scroll-global *::-webkit-scrollbar-thumb {
+        border-radius: var(--dg-border-radius-full);
+        background-clip: padding-box;
+        background-color: var(--dg-global-opacity-white-70);
+    }
+
+    .ds-scroll::-webkit-scrollbar-track,
+    .ds-scroll-global *::-webkit-scrollbar-track {
+        background-color: transparent;
+    }
+
+    ${l.xs} {
+        .ds-scroll::-webkit-scrollbar,
+        .ds-scroll-global *::-webkit-scrollbar {
+            height: 4px;
+            width: 4px;
+        }
+    }
+
+    ${l.m} {
+        .ds-scroll::-webkit-scrollbar,
+        .ds-scroll-global *::-webkit-scrollbar {
+            height: 8px;
+            width: 8px;
+        }
+    }
+`;
+export {
+  a as commonStyles
+};

package/dist/components/ds-dialog-body/ds-dialog-body.js

@@ -0,0 +1,46 @@
+import { UiKitElement as a } from "../base/UiKitElement.js";
+import { customUiKitElement as n } from "../../decorators/customUiKitElement.js";
+import { htmlWithTokens as d } from "../../utils/htmlWithTokens.js";
+import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
+import { html as p } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
+import "../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
+import { classMap as c } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import { commonStyles as y } from "./styles/common.styles.js";
+var g = Object.getOwnPropertyDescriptor, f = (o, r, m, l) => {
+  for (var t = l > 1 ? void 0 : l ? g(r, m) : r, e = o.length - 1, i; e >= 0; e--)
+    (i = o[e]) && (t = i(t) || t);
+  return t;
+};
+let s = class extends a {
+  get classes() {
+    return {
+      container: !0
+    };
+  }
+  get styleTokens() {
+    return d`
+                <style>
+                    :host{
+                        grid-area: body;
+                    }
+                </style>
+        `;
+  }
+  render() {
+    return p`
+            ${this.styleTokens}
+            <div data-testid="ds-dialog-body-container" class=${c(this.classes)}>
+                <slot name="description"></slot>
+                <slot name="image"></slot>
+                <slot></slot>
+            </div>
+        `;
+  }
+};
+s.styles = [y];
+s = f([
+  n("ds-dialog-body")
+], s);
+export {
+  s as DsDialogBody
+};

package/dist/components/ds-dialog-body/styles/common.styles.js

@@ -0,0 +1,12 @@
+import "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
+import "../../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
+import "../../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
+import { css as o } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+const p = o`
+    :host {
+        display: inline-block;
+    }
+`;
+export {
+  p as commonStyles
+};

package/dist/components/ds-dialog-footer/ds-dialog-footer.js

@@ -0,0 +1,47 @@
+import { UiKitElement as p } from "../base/UiKitElement.js";
+import { customUiKitElement as d } from "../../decorators/customUiKitElement.js";
+import { booleanConverter as v } from "../../utils/booleanConverter.js";
+import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
+import { nothing as c, html as m } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
+import "../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
+import { property as f } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { classMap as u } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import { commonStyles as h } from "./styles/common.styles.js";
+var D = Object.defineProperty, g = Object.getOwnPropertyDescriptor, n = (l, r, i, e) => {
+  for (var t = e > 1 ? void 0 : e ? g(r, i) : r, s = l.length - 1, a; s >= 0; s--)
+    (a = l[s]) && (t = (e ? a(r, i, t) : a(t)) || t);
+  return e && t && D(r, i, t), t;
+};
+let o = class extends p {
+  constructor() {
+    super(...arguments), this.withDivider = !0;
+  }
+  get classes() {
+    return {
+      container: !0
+    };
+  }
+  render() {
+    return m`
+            <div data-testid="ds-dialog-footer-container" class=${u(this.classes)}>
+                ${this.withDivider ? m`<div class="divider"></div>` : c}
+                <slot></slot>
+                <slot name="actions"></slot>
+            </div>
+        `;
+  }
+};
+o.styles = [h];
+n([
+  f({
+    type: Boolean,
+    attribute: "with-divider",
+    converter: v
+  })
+], o.prototype, "withDivider", 2);
+o = n([
+  d("ds-dialog-footer")
+], o);
+export {
+  o as DsDialogFooter
+};