@cupra/ui-kit 1.0.0-canary.9 → 1.0.0

package/dist-react/components/ds-slider/ds-slider.js

@@ -0,0 +1,409 @@
+import { UiKitElement as $ } from "../base/UiKitElement.js";
+import { getStepValue as d } from "./utils/getStepValue/getStepValue.js";
+import { roundToDecimals as S } from "./utils/roundToDecimals/roundToDecimals.js";
+import { customUiKitElement as V } from "../../decorators/customUiKitElement.js";
+import { ViewportMixin as T } from "../../mixins/ViewportMixin.js";
+import { booleanConverter as L } from "../../utils/booleanConverter.js";
+import { formatNumber as P } from "../../utils/formatNumber/formatNumber.js";
+import { htmlWithTokens as D } from "../../utils/htmlWithTokens.js";
+import { objectConverter as k } from "../../utils/objectConverter.js";
+import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
+import { nothing as h, html as l } 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 r } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { state as p } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
+import { query as E } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query.js";
+import { classMap as F } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import { commonStyles as N, trackStyles as I, thumbStyles as C, currentValueStyles as A, rangeValueStyles as O } from "./styles/common.styles.js";
+var R = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, a = (t, e, i, o) => {
+  for (var n = o > 1 ? void 0 : o ? _(e, i) : e, u = t.length - 1, m; u >= 0; u--)
+    (m = t[u]) && (n = (o ? m(e, i, n) : m(n)) || n);
+  return o && n && R(e, i, n), n;
+};
+let s = class extends T($) {
+  constructor() {
+    super(...arguments), this.min = 0, this.max = 100, this.minLabel = "", this.maxLabel = "", this.step = 1, this.initialValueMin = 0, this.mode = "light", this.locale = void 0, this.localeMatcher = "lookup", this.useGrouping = !0, this.minimumIntegerDigits = 1, this.minimumFractionDigits = 0, this.maximumFractionDigits = 3, this.size = "medium", this.disabled = !1, this.keyboardMode = !1, this.getNewValue = (t) => {
+      const { width: e, left: i } = this.track.getBoundingClientRect(), o = t.type.indexOf("mouse") !== -1 ? t.clientX : t.touches[0].clientX, u = Math.min(Math.max(0, o - i), e) * 100 / e;
+      return this.min + u * (this.max - this.min) / 100;
+    }, this.setActiveThumb = (t) => {
+      const e = this.getNewValue(t);
+      typeof this.valueMax != "number" || e <= this.valueMin ? this.activeThumb = "min" : e >= this.valueMax ? this.activeThumb = "max" : e - this.valueMin < this.valueMax - e ? this.activeThumb = "min" : this.activeThumb = "max";
+    }, this.handleMouseMove = (t) => {
+      this.animationFrameRequest && cancelAnimationFrame(this.animationFrameRequest), this.animationFrameRequest = requestAnimationFrame(() => {
+        const e = this.getNewValue(t), i = this.activeThumb ?? "min", { stepValue: o } = d({
+          step: this.step,
+          min: this.min,
+          max: this.max,
+          proposedValue: e,
+          role: i,
+          currentValues: {
+            1: this.valueMin,
+            ...typeof this.valueMax == "number" ? { 2: this.valueMax } : {}
+          }
+        });
+        this.handleChange({ value: o, role: i });
+      });
+    }, this.handleMouseDown = (t) => {
+      var e;
+      this.disabled || ((e = t == null ? void 0 : t.preventDefault) == null || e.call(t), this.setActiveThumb(t), this.handleMouseMove(t), window == null || window.addEventListener("mousemove", this.handleMouseMove), window == null || window.addEventListener("touchmove", this.handleMouseMove), window == null || window.addEventListener("pointerup", this.handlePointerUp));
+    }, this.handlePointerUp = () => {
+      window == null || window.removeEventListener("mousemove", this.handleMouseMove), window == null || window.removeEventListener("touchmove", this.handleMouseMove), window == null || window.removeEventListener("pointerup", this.handlePointerUp);
+    }, this.handleKeydown = () => {
+      this.keyboardMode = !0;
+    }, this.handlePointerOrMouseDown = () => {
+      this.keyboardMode = !1;
+    }, this.onInputFocus = (t, e) => {
+      const i = t.currentTarget, o = e === 1 ? "min" : "max";
+      this.editingField = o, i.type = "number", i.step = String(this.step ?? 1);
+      const n = o === "min" ? this.valueMin : this.valueMax;
+      i.value = String(n ?? ""), this.keyboardMode && i.classList.add("focus-visible");
+    }, this.commitInputValue = (t, e) => {
+      const i = t.currentTarget, o = e === 1 ? "min" : "max", { stepValue: n } = d({
+        step: this.step,
+        min: this.min,
+        max: this.max,
+        proposedValue: Number(i.value),
+        role: o,
+        currentValues: {
+          1: this.valueMin,
+          ...typeof this.valueMax == "number" ? { 2: this.valueMax } : {}
+        }
+      });
+      this.handleChange({ value: n, role: o }), i.value = String(n);
+    }, this.onInputBlur = (t) => {
+      var i;
+      this.editingField = void 0;
+      const e = t.currentTarget;
+      (i = e == null ? void 0 : e.classList) == null || i.remove("focus-visible");
+    }, this.onInputKeyDown = (t, e) => {
+      t.key === "Enter" && (t.preventDefault(), this.commitInputValue(t, e));
+    }, this.onThumbKeyDown = (t, e) => {
+      if (!this.disabled && (t.key === "ArrowLeft" || t.key === "ArrowRight")) {
+        t.preventDefault();
+        const i = this.step ?? 1, o = t.key === "ArrowLeft" ? -i : i, n = e === 1 ? "min" : "max", m = (n === "min" ? this.valueMin : this.valueMax) + o, { stepValue: b } = d({
+          step: this.step,
+          min: this.min,
+          max: this.max,
+          proposedValue: m,
+          role: n,
+          currentValues: {
+            1: this.valueMin,
+            ...typeof this.valueMax == "number" ? { 2: this.valueMax } : {}
+          }
+        });
+        this.handleChange({ value: b, role: n });
+      }
+    };
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), window == null || window.removeEventListener("mousemove", this.handleMouseMove), window == null || window.removeEventListener("touchmove", this.handleMouseMove), window == null || window.removeEventListener("pointerup", this.handlePointerUp), window == null || window.removeEventListener("keydown", this.handleKeydown), window == null || window.removeEventListener("mousedown", this.handlePointerOrMouseDown), window == null || window.removeEventListener("pointerdown", this.handlePointerOrMouseDown);
+  }
+  firstUpdated(t) {
+    super.firstUpdated(t), window == null || window.addEventListener("keydown", this.handleKeydown), window == null || window.addEventListener("mousedown", this.handlePointerOrMouseDown), window == null || window.addEventListener("pointerdown", this.handlePointerOrMouseDown), ["min", "max"].forEach((i) => {
+      const n = this[i === "min" ? "initialValueMin" : "initialValueMax"];
+      if (typeof n != "number") return;
+      const { stepValue: u } = d({
+        step: this.step,
+        min: this.min,
+        max: this.max,
+        proposedValue: n,
+        role: i,
+        currentValues: {
+          1: this.valueMin,
+          ...typeof this.valueMax == "number" ? { 2: this.valueMax } : {}
+        }
+      });
+      this[i === "min" ? "valueMin" : "valueMax"] !== u && this.handleChange({ value: u, role: i });
+    });
+  }
+  getTrackPct(t) {
+    const e = this.max - this.min;
+    return e === 0 ? 0 : (t - this.min) / e * 100;
+  }
+  handleChange({ value: t, role: e }) {
+    const i = S({ value: t, fractionDigits: this.maximumFractionDigits }), o = e === "min" ? "valueMin" : "valueMax";
+    this[o] !== i && (this[o] = i, this.dispatchEvent(
+      new CustomEvent("change", {
+        bubbles: !0,
+        composed: !0,
+        detail: {
+          role: e,
+          value: i
+        }
+      })
+    ));
+  }
+  formatNumber(t) {
+    const e = {
+      value: t,
+      locale: this.locale,
+      ...this.unitStyle && { style: this.unitStyle },
+      ...this.currency && { currency: this.currency },
+      ...this.unit && { unit: this.unit },
+      localeMatcher: this.localeMatcher,
+      minimumIntegerDigits: this.minimumIntegerDigits,
+      minimumFractionDigits: this.minimumFractionDigits,
+      maximumFractionDigits: this.maximumFractionDigits,
+      thousandSeparator: this.thousandSeparator,
+      fractionSeparator: this.fractionSeparator,
+      useGrouping: this.useGrouping
+    };
+    return P(e);
+  }
+  get rangeValuesTemplates() {
+    const {
+      formattedValue: t,
+      unitSymbol: e,
+      unitSymbolPosition: i
+    } = this.formatNumber(this.min), o = this.unitSymbol ?? e, n = this.unitSymbolPosition ?? i, { formattedValue: u } = this.formatNumber(this.max);
+    return l`
+            <div class="range-value-text">
+                ${this.minLabel ? l`<span class="range-value-label">${this.minLabel}</span>` : h}
+                ${n === "left" ? l`<span>${o}</span>` : h}
+                <span>${t}</span>
+                ${n === "right" ? l`<span>${o}</span>` : h}
+            </div>
+            <div class="range-value-text">
+                ${this.maxLabel ? l` <span class="range-value-label">${this.maxLabel}</span>` : h}
+                ${n === "left" ? l`<span>${o}</span>` : h}
+                <span>${u}</span>
+                ${n === "right" ? l`<span>${o}</span>` : h}
+            </div>
+        `;
+  }
+  getThumbTemplate(t) {
+    const e = t === 1 ? "min" : "max", i = e === "min" ? this.valueMin : this.valueMax, { minLimit: o, maxLimit: n } = d({
+      step: this.step,
+      min: this.min,
+      max: this.max,
+      proposedValue: i,
+      role: e,
+      currentValues: {
+        1: this.valueMin,
+        ...typeof this.valueMax == "number" ? { 2: this.valueMax } : {}
+      }
+    }), u = this.getTrackPct(i);
+    return l`
+            <style>
+                .thumb${t} {
+                    left: ${u}%;
+                }
+            </style>
+            <div
+                class="thumb${t} thumb"
+                @focus=${() => {
+      this.activeThumb = t === 1 ? "min" : "max";
+    }}
+                @keydown=${(m) => this.onThumbKeyDown(m, t)}
+                role="slider"
+                tabindex=${this.disabled ? -1 : 0}
+                aria-disabled=${String(!!this.disabled)}
+                aria-label=${t === 1 ? "Minumum value" : "Maximum Value"}
+                aria-valuemin=${o}
+                aria-valuemax=${n}
+                aria-valuenow=${i}
+            >
+                <svg
+                    class="thumb-svg"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 34 34"
+                    fill="none"
+                >
+                    <circle cx="17" cy="17" r="16" class="thumb-circle" />
+                </svg>
+            </div>
+        `;
+  }
+  get thumbTemplates() {
+    return l`
+            ${this.getThumbTemplate(1)}
+            ${typeof this.initialValueMax == "number" ? this.getThumbTemplate(2) : h}
+        `;
+  }
+  get trackRangeTemplate() {
+    let t, e;
+    return typeof this.initialValueMax != "number" ? (t = 0, e = this.getTrackPct(this.valueMin)) : (t = this.getTrackPct(this.valueMin), e = this.getTrackPct(this.valueMax) - t), l`
+            <style>
+                .track-range {
+                    left: ${t}%;
+                    width: ${e}%;
+                }
+            </style>
+            <div class="track-range" role="presentation"></div>
+        `;
+  }
+  getInputTemplate(t) {
+    const e = t === 1 ? "min" : "max", i = this.editingField === e, o = e === "min" ? this.valueMin : this.valueMax, {
+      formattedValue: n,
+      unitSymbol: u,
+      unitSymbolPosition: m
+    } = this.formatNumber(o), b = this.unitSymbolPosition ?? m, y = this.unitSymbol ?? u, g = y ? b === "left" ? `${y} ${n}` : `${n} ${y}` : `${n}`, f = i ? "number" : "text", v = i ? String(o ?? "") : g, M = t === 1 ? this.inputMinAriaLabel : this.inputMaxAriaLabel, x = typeof this.initialValueMax == "number" ? t === 1 ? "Start value" : "End value" : "Value", w = M ?? x;
+    return l`
+            <div class="input-wrapper">
+                <input
+                    class="input-value input-value-${t}"
+                    type=${f}
+                    .value=${v}
+                    step=${String(this.step ?? 1)}
+                    ?disabled=${this.disabled}
+                    tabindex=${this.disabled ? -1 : 0}
+                    aria-disabled=${String(!!this.disabled)}
+                    aria-label=${w}
+                    ?readonly=${this.disabled}
+                    @focus=${(c) => this.onInputFocus(c, t)}
+                    @blur=${this.onInputBlur}
+                    @change=${(c) => this.commitInputValue(c, t)}
+                    @keydown=${(c) => this.onInputKeyDown(c, t)}
+                    title=${v}
+                />
+            </div>
+        `;
+  }
+  get inputsTemplate() {
+    return l`
+            <div class="inputs-container">
+                ${this.getInputTemplate(1)}
+                ${typeof this.initialValueMax == "number" ? this.getInputTemplate(2) : h}
+            </div>
+        `;
+  }
+  get containerClasses() {
+    var e;
+    const t = typeof this.size == "string" ? this.size : (e = this.size) == null ? void 0 : e[this.viewport];
+    return {
+      container: !0,
+      [this.mode]: !!this.mode,
+      [t]: !!t,
+      disabled: !!this.disabled
+    };
+  }
+  get styleTokens() {
+    return D`
+            <style>
+                :host{
+                    color-scheme: ${this.mode};
+                }
+            </style>
+        `;
+  }
+  render() {
+    return l`
+            ${this.styleTokens}
+            <div class=${F(this.containerClasses)}>
+                <div @touchstart=${this.handleMouseDown} @mousedown=${this.handleMouseDown} class="track"  role="presentation">
+                    ${this.thumbTemplates}
+                    ${this.trackRangeTemplate}
+                </div>
+                <div class="range-value-container">${this.rangeValuesTemplates}</div>
+                ${this.inputsTemplate}
+            </div>
+        `;
+  }
+};
+s.styles = [N, I, C, A, O];
+a([
+  r({ type: Number })
+], s.prototype, "min", 2);
+a([
+  r({ type: Number })
+], s.prototype, "max", 2);
+a([
+  r({ type: String, attribute: "min-label" })
+], s.prototype, "minLabel", 2);
+a([
+  r({ type: String, attribute: "max-label" })
+], s.prototype, "maxLabel", 2);
+a([
+  r({ type: Number })
+], s.prototype, "step", 2);
+a([
+  r({ type: Number, attribute: "initial-value-min" })
+], s.prototype, "initialValueMin", 2);
+a([
+  r({ type: Number, attribute: "initial-value-max" })
+], s.prototype, "initialValueMax", 2);
+a([
+  r({ type: String, reflect: !0 })
+], s.prototype, "mode", 2);
+a([
+  r({ type: String, attribute: "locale" })
+], s.prototype, "locale", 2);
+a([
+  r({ type: String, attribute: "locale-matcher" })
+], s.prototype, "localeMatcher", 2);
+a([
+  r({ type: String, attribute: "unit-symbol" })
+], s.prototype, "unitSymbol", 2);
+a([
+  r({ type: String, attribute: "unit-symbol-position" })
+], s.prototype, "unitSymbolPosition", 2);
+a([
+  r({ type: String, attribute: "unit-style" })
+], s.prototype, "unitStyle", 2);
+a([
+  r({ type: String, attribute: "currency" })
+], s.prototype, "currency", 2);
+a([
+  r({ type: String, attribute: "unit" })
+], s.prototype, "unit", 2);
+a([
+  r({
+    type: String,
+    attribute: "use-grouping",
+    converter: (t) => t === "auto" ? "auto" : typeof t == "boolean" ? t : t === "true" || t === "" ? !0 : t !== "false"
+  })
+], s.prototype, "useGrouping", 2);
+a([
+  r({ type: Number, attribute: "minimum-integer-digits" })
+], s.prototype, "minimumIntegerDigits", 2);
+a([
+  r({ type: Number, attribute: "minimum-fraction-digits" })
+], s.prototype, "minimumFractionDigits", 2);
+a([
+  r({ type: Number, attribute: "maximum-fraction-digits" })
+], s.prototype, "maximumFractionDigits", 2);
+a([
+  r({ type: String, attribute: "thousand-separator" })
+], s.prototype, "thousandSeparator", 2);
+a([
+  r({ type: String, attribute: "fraction-separator" })
+], s.prototype, "fractionSeparator", 2);
+a([
+  r({ type: String, converter: k })
+], s.prototype, "size", 2);
+a([
+  r({ type: Boolean, converter: L })
+], s.prototype, "disabled", 2);
+a([
+  r({ type: String, attribute: "input-min-aria-label" })
+], s.prototype, "inputMinAriaLabel", 2);
+a([
+  r({ type: String, attribute: "input-max-aria-label" })
+], s.prototype, "inputMaxAriaLabel", 2);
+a([
+  E(".track")
+], s.prototype, "track", 2);
+a([
+  p()
+], s.prototype, "valueMin", 2);
+a([
+  p()
+], s.prototype, "valueMax", 2);
+a([
+  p()
+], s.prototype, "activeThumb", 2);
+a([
+  p()
+], s.prototype, "animationFrameRequest", 2);
+a([
+  p()
+], s.prototype, "editingField", 2);
+a([
+  p()
+], s.prototype, "keyboardMode", 2);
+s = a([
+  V("ds-slider")
+], s);
+export {
+  s as DsSlider
+};

package/dist-react/components/ds-slider/styles/common.styles.js

@@ -0,0 +1,61 @@
+import { cssWithTokens as t } from "../../../utils/cssWithTokens.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 e } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+const s = e`
+    :host {
+        display: block;
+    }
+`, l = t`
+    .current-value-container {
+        position: relative;
+    }
+    
+    .current-value-text {
+        display: inline-flex;
+        position: absolute;
+    }
+`, c = t`
+    .range-value-container {
+        display: flex;
+        justify-content: space-between;
+    }
+    
+    .range-value-text {
+        display: inline-flex;
+    }
+
+    .range-value-label:after {
+        content: ':';
+    }
+`, p = t`
+    .track {
+        position: relative;
+        cursor: pointer;
+        top: 0;
+    }
+
+    .track-range {
+        z-index: 1;
+        top: 50%;
+        transform: translateY(-50%);
+        position: absolute;
+    }
+
+    .track, .track-range {
+        background-clip: content-box;
+    }
+`, u = t`
+    .thumb {
+        z-index: 2;
+        position: absolute;
+    }
+`;
+export {
+  s as commonStyles,
+  l as currentValueStyles,
+  c as rangeValueStyles,
+  u as thumbStyles,
+  p as trackStyles
+};

package/dist-react/components/ds-slider/utils/getStepValue/getStepValue.js

@@ -0,0 +1,28 @@
+function M({ value: a, min: n, max: l }) {
+  return Math.min(Math.max(a, n), l);
+}
+const d = (a, n, l = 10) => {
+  const f = Math.pow(10, l), m = Math.round(a * f), o = Math.round(n * f);
+  return (m + o) / f;
+}, S = ({ step: a = 1, min: n = 0, max: l = 100, proposedValue: f, role: m, currentValues: o }) => {
+  const c = m === "min" ? 1 : 2, u = f;
+  let i, t = n, e = l;
+  return Number.isFinite(u) ? (Object.keys(o).forEach((h) => {
+    if (Number(h) < c && o[h] >= t) {
+      if (t = o[h], a === 0) return;
+      let r = n;
+      for (; r <= t; ) r = d(r, a);
+      t = r;
+    }
+    if (Number(h) > c && o[h] <= e) {
+      if (e = o[h], a === 0) return;
+      let r = n;
+      for (; r + a < e; ) r = d(r, a);
+      e = r;
+    }
+    t = M({ value: t, min: n, max: l }), e = M({ value: e, min: n, max: l });
+  }), u <= t || u >= e ? (i = Math.max(t, Math.min(e, u)), { stepValue: i, minLimit: t, maxLimit: e }) : a === 0 ? { stepValue: u, minLimit: t, maxLimit: e } : (i = Math.round((u - t) / a) * a + t, i = u - i > e - u ? e : i, i = M({ value: i, min: t, max: e }), { stepValue: i, minLimit: t, maxLimit: e })) : { stepValue: o[String(c)], minLimit: t, maxLimit: e };
+};
+export {
+  S as getStepValue
+};

package/dist-react/components/ds-slider/utils/roundToDecimals/roundToDecimals.js

@@ -0,0 +1,7 @@
+const n = ({ value: t, fractionDigits: r }) => {
+  const o = Math.pow(10, r);
+  return Math.round(t * o) / o;
+};
+export {
+  n as roundToDecimals
+};

package/dist-react/components/ds-static-box/ds-static-box.js

@@ -0,0 +1,77 @@
+import { UiKitElement as p } from "../base/UiKitElement.js";
+import { customUiKitElement as d } from "../../decorators/customUiKitElement.js";
+import { ViewportMixin as c } from "../../mixins/ViewportMixin.js";
+import { htmlWithTokens as f } from "../../utils/htmlWithTokens.js";
+import { objectConverter as h } from "../../utils/objectConverter.js";
+import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
+import { 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 y } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { queryAssignedNodes as m } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query-assigned-nodes.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 b } from "./styles/common.styles.js";
+var g = Object.defineProperty, x = Object.getOwnPropertyDescriptor, i = (t, e, a, o) => {
+  for (var s = o > 1 ? void 0 : o ? x(e, a) : e, n = t.length - 1, l; n >= 0; n--)
+    (l = t[n]) && (s = (o ? l(e, a, s) : l(s)) || s);
+  return o && s && g(e, a, s), s;
+};
+let r = class extends c(p) {
+  constructor() {
+    super(...arguments), this.size = "medium";
+  }
+  get classes() {
+    const t = typeof this.size == "string" ? this.size : this.size[this.viewport];
+    return {
+      container: !0,
+      [t]: !!t
+    };
+  }
+  get styleTokens() {
+    var t, e;
+    return f`
+            <style>
+                .header {
+                    display: ${((t = this.headerItems) == null ? void 0 : t.length) > 0 ? "block" : "none"};
+                }
+                
+                .footer {
+                    display: ${((e = this.footerItems) == null ? void 0 : e.length) > 0 ? "block" : "none"};
+                }
+            </style>
+        `;
+  }
+  render() {
+    return v`
+            ${this.styleTokens}
+            <div part="container" data-testid="ds-static-box-container" class=${u(this.classes)}>
+                <div class="body">
+                    <div part="header" class="header">
+                        <slot name="header"></slot>
+                    </div>
+                    <div part="main" class="main ds-scroll">
+                        <slot name="main"></slot>
+                    </div>
+                </div>
+                <div part="footer" class="footer">
+                    <slot name="footer"></slot>
+                </div>
+            </div>
+        `;
+  }
+};
+r.styles = [b];
+i([
+  y({ type: String, converter: h })
+], r.prototype, "size", 2);
+i([
+  m({ slot: "header", flatten: !0 })
+], r.prototype, "headerItems", 2);
+i([
+  m({ slot: "footer", flatten: !0 })
+], r.prototype, "footerItems", 2);
+r = i([
+  d("ds-static-box")
+], r);
+export {
+  r as DsStaticBox
+};

package/dist-react/components/ds-static-box/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: contents;
+    }
+`;
+export {
+  p as commonStyles
+};

package/dist-react/components/ds-stepper/ds-stepper.js

@@ -0,0 +1,57 @@
+import { UiKitElement as u } from "../base/UiKitElement.js";
+import { customUiKitElement as f } from "../../decorators/customUiKitElement.js";
+import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
+import { nothing as h, html as c } 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 m } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { classMap as l } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import { commonStyles as v } from "./styles/common.styles.js";
+var y = Object.defineProperty, b = Object.getOwnPropertyDescriptor, n = (r, p, e, s) => {
+  for (var t = s > 1 ? void 0 : s ? b(p, e) : p, a = r.length - 1, o; a >= 0; a--)
+    (o = r[a]) && (t = (s ? o(p, e, t) : o(t)) || t);
+  return s && t && y(p, e, t), t;
+};
+let i = class extends u {
+  constructor() {
+    super(...arguments), this.steps = 0, this.currentStep = -1;
+  }
+  get classes() {
+    return {
+      container: !0
+    };
+  }
+  render() {
+    if (!this.steps) return h;
+    const r = Math.max(-1, Math.min(this.currentStep, this.steps));
+    return c`
+            <div
+                data-testid="ds-stepper-container"
+                class=${l(this.classes)}
+                role="list"
+                aria-label="Steps"
+            >
+                ${Array.from({ length: this.steps }, (p, e) => {
+      const s = e <= r, t = e === r;
+      return c`<span class=${l({
+        step: !0,
+        active: s,
+        current: t
+      })} role="listitem" aria-posinset=${e + 1} aria-setsize=${this.steps} aria-current=${t ? "step" : "false"}></span>`;
+    })}
+            </div>
+        `;
+  }
+};
+i.styles = [v];
+n([
+  m({ type: Number, attribute: "steps", reflect: !0 })
+], i.prototype, "steps", 2);
+n([
+  m({ type: Number, attribute: "current-step", reflect: !0 })
+], i.prototype, "currentStep", 2);
+i = n([
+  f("ds-stepper")
+], i);
+export {
+  i as DsStepper
+};

package/dist-react/components/ds-stepper/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: contents;
+    }
+`;
+export {
+  p as commonStyles
+};