@solid-design-system/components 3.23.4 → 4.0.0-next.0

package/dist/versioned-package/components/audio/audio.js

@@ -1,353 +0,0 @@
-import { unsafeCSS, css, html } from "lit";
-import { customElement } from "../../internal/register-custom-element.js";
-import { HasSlotController } from "../../internal/slot.js";
-import { LocalizeController } from "../../utilities/localize.js";
-import { property, state, query } from "lit/decorators.js";
-import { Wave } from "./wave.js";
-import cx from "classix";
-import InteractiveStyles from "../../styles/interactive/interactive.css.js";
-import SolidElement from "../../internal/solid-element.js";
-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;
-};
-let SdAudio = class extends SolidElement {
-  constructor() {
-    super();
-    this.localize = new LocalizeController(this);
-    this.hasSlotController = new HasSlotController(this, "transcript");
-    this.reversedLayout = false;
-    this.hideTimestamps = false;
-    this.animated = false;
-    this.inverted = false;
-    this.speed = 1;
-    this.currentTime = this.formatTime(0);
-    this.duration = "";
-    this.isPlaying = false;
-    this.isMuted = false;
-    this.progress = 0;
-    this.setAudioProgress = () => {
-      this.progressSlider.max = Math.floor(this.audioElement.duration).toString();
-    };
-    this.updateCurrentTime = this.updateCurrentTime.bind(this);
-    this.handleAudioEnd = this.handleAudioEnd.bind(this);
-    this.handleAudioProgress = this.handleAudioProgress.bind(this);
-    this.handleAudioProgressKeydown = this.handleAudioProgressKeydown.bind(this);
-  }
-  firstUpdated() {
-    if (!this.audioElement) return;
-    this.audioElement.addEventListener("timeupdate", this.updateCurrentTime);
-    this.audioElement.addEventListener("ended", this.handleAudioEnd);
-    this.audioElement.setAttribute("controlsList", "nodownload");
-    this.audioElement.playbackRate = this.speed;
-    if (this.animated) {
-      this.initAnimation();
-    }
-  }
-  updated(changedProperties) {
-    if (changedProperties.has("animated")) {
-      const oldValue = changedProperties.get("animated");
-      if (!oldValue && this.animated) {
-        this.initAnimation();
-      } else if (oldValue && !this.animated) {
-        this.clear();
-      }
-    }
-  }
-  get audioElement() {
-    const slot = this.shadowRoot.querySelector("slot");
-    if ((slot == null ? void 0 : slot.assignedElements().length) > 0) {
-      return slot.assignedElements()[0];
-    }
-    return null;
-  }
-  updateCurrentTime() {
-    if (!this.audioElement) return;
-    const currentTime = this.audioElement.currentTime;
-    this.currentTime = this.formatTime(currentTime);
-    this.progress = Math.floor(currentTime);
-    if (this.progressSlider) {
-      this.progressSlider.value = this.progress.toString();
-    }
-  }
-  updateAudioDuration() {
-    if (!this.audioElement) return;
-    if (isNaN(this.audioElement.duration)) {
-      setTimeout(() => {
-        this.updateAudioDuration();
-      }, 100);
-      return;
-    }
-    this.duration = this.formatTime(this.audioElement.duration);
-    this.setAudioProgress();
-  }
-  playAudio() {
-    if (!this.audioElement) return;
-    this.isPlaying = true;
-    this.audioElement.play();
-    this.emit("sd-playback-start");
-    if (this.animated) {
-      this.draw();
-    }
-  }
-  pauseAudio() {
-    if (!this.audioElement) return;
-    this.isPlaying = false;
-    this.audioElement.pause();
-    this.emit("sd-playback-pause");
-    if (this.animated) {
-      this.stopAnimation();
-    }
-  }
-  handleAudioEnd() {
-    this.emit("sd-playback-end");
-    this.isPlaying = false;
-    this.progress = 0;
-    this.progressSlider.value = "0";
-    this.currentTime = this.formatTime(0);
-    if (this.animated) {
-      this.stopAnimation();
-    }
-  }
-  toggleMute() {
-    if (!this.audioElement) return;
-    this.isMuted = !this.isMuted;
-    if (this.isMuted) {
-      this.emit("sd-playback-mute");
-      this.audioElement.muted = true;
-    } else {
-      this.emit("sd-playback-unmute");
-      this.audioElement.muted = false;
-    }
-  }
-  toggleMuteKeydown(event) {
-    if (event.key === "Enter") {
-      event.preventDefault();
-      this.toggleMute();
-    }
-  }
-  togglePlaybackSpeed() {
-    if (!this.audioElement) return;
-    this.emit("sd-playback-speed");
-    this.speed = this.speed === 1.5 ? 1 : this.speed + 0.25;
-    this.audioElement.playbackRate = this.speed;
-  }
-  togglePlaybackSpeedKeydown(event) {
-    if (event.key === "Enter") {
-      event.preventDefault();
-      this.togglePlaybackSpeed();
-    }
-  }
-  formatTime(time) {
-    const minutes = Math.floor(time / 60);
-    const seconds = Math.floor(time % 60);
-    return `${minutes}:${seconds < 10 ? "0" : ""}${seconds}`;
-  }
-  handleAudioProgress() {
-    if (!this.audioElement) return;
-    const newTime = Number(this.progressSlider.value);
-    this.audioElement.currentTime = newTime;
-    this.progress = newTime;
-    this.currentTime = this.formatTime(newTime);
-  }
-  handleAudioProgressKeydown(event) {
-    if (event.key === "ArrowRight") {
-      this.progressSlider.value = (Number(this.progressSlider.value) + 1).toString();
-      this.handleAudioProgress();
-    }
-    if (event.key === "ArrowLeft") {
-      this.progressSlider.value = (Number(this.progressSlider.value) - 1).toString();
-      this.handleAudioProgress();
-    }
-  }
-  showTranscript() {
-    this.emit("sd-transcript-click");
-    this.drawer.open = true;
-  }
-  showTranscriptKeydown(event) {
-    if (event.key === "Enter" || event.key === " ") {
-      this.showTranscript();
-    }
-  }
-  rgbToHex(rgbString) {
-    const result = rgbString.match(/\d+/g);
-    if (result && result.length === 3) {
-      const r = parseInt(result[0]);
-      const g = parseInt(result[1]);
-      const b = parseInt(result[2]);
-      const valueToHex = (value) => value.toString(16).padStart(2, "0");
-      const hex = `#${valueToHex(r)}${valueToHex(g)}${valueToHex(b)}`.toUpperCase();
-      return hex;
-    }
-    return null;
-  }
-  initAnimation() {
-    this.context = this.canvas.getContext("2d");
-    const button = this.audioPlayerContainer.querySelector(".playback-speed");
-    const computedStyles = window.getComputedStyle(button);
-    const color = computedStyles.color;
-    let computedColor;
-    if (this.inverted) {
-      computedColor = `#FFFFFF33`;
-    } else {
-      computedColor = this.rgbToHex(color) + "33";
-    }
-    this.waveList = [
-      new Wave({
-        canvas: this.canvas,
-        color: computedColor,
-        phase: 240,
-        shift: 1.5,
-        amplitude: 230,
-        frequency: 0.012,
-        damping: 1
-      }),
-      new Wave({
-        canvas: this.canvas,
-        color: computedColor,
-        phase: 180,
-        shift: 2.5,
-        amplitude: 250,
-        frequency: 5e-3,
-        damping: 1
-      }),
-      new Wave({
-        canvas: this.canvas,
-        color: computedColor,
-        phase: 180,
-        shift: -2.5,
-        amplitude: 250,
-        frequency: 5e-3,
-        damping: 1
-      }),
-      new Wave({
-        canvas: this.canvas,
-        color: computedColor,
-        phase: 180,
-        shift: -1,
-        amplitude: 200,
-        frequency: 0.018,
-        damping: 1
-      }),
-      new Wave({
-        canvas: this.canvas,
-        color: computedColor,
-        phase: 180,
-        shift: 1.5,
-        amplitude: 150,
-        frequency: 0.01,
-        damping: 1
-      })
-    ];
-    if (this.animated) {
-      this.drawStillWaves();
-    }
-  }
-  drawStillWaves() {
-    this.waveList.forEach((wave) => {
-      wave.redraw();
-    });
-  }
-  stopAnimation() {
-    this.isPlaying = false;
-  }
-  clear() {
-    if (!this.context || !this.canvas) return;
-    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
-  }
-  async draw() {
-    if (!this.isPlaying || !this.animated) return;
-    this.clear();
-    this.waveList.forEach((wave) => {
-      wave.redraw();
-    });
-    await new Promise((resolve) => {
-      setTimeout(resolve, 1e3 / 30);
-    });
-    await this.draw();
-  }
-  render() {
-    const progressPercentage = this.audioElement ? this.progress / this.audioElement.duration * 100 : 0;
-    const renderAudioControls = html`<div class="${cx(
-      "controls grid grid-cols-3 justify-items-center items-center",
-      !this.animated && "relative",
-      this.animated && !this.reversedLayout && "absolute -top-4 left-0 w-full",
-      this.reversedLayout ? "mt-2" : "mb-2"
-    )}" part="audio-controls"><button class="${cx(
-      "playback-speed justify-self-start text-base font-bold hover:cursor-pointer sd-interactive",
-      this.inverted && "sd-interactive--inverted"
-    )}" aria-label="${this.localize.term("playbackSpeed")}" tabindex="0" @click="${this.togglePlaybackSpeed}" @keydown="${this.togglePlaybackSpeedKeydown}" part="playback-speed">${this.speed}x</button><sd-3-23-4-button ?inverted="${this.inverted ? true : false}" part="play-button" size="lg" @click="${!this.isPlaying ? this.playAudio : this.pauseAudio}" aria-label="${this.isPlaying ? this.localize.term("pauseAudio") : this.localize.term("playAudio")}">${this.isPlaying ? html`<sd-3-23-4-icon name="pause" library="system"></sd-3-23-4-icon>` : html`<sd-3-23-4-icon name="start" library="system"></sd-3-23-4-icon>`}</sd-3-23-4-button><div class="flex items-center justify-self-end">${this.hasSlotController.test("transcript") ? html`<button class="${cx(
-      "mr-6 w-6 h-6 hover:cursor-pointer sd-interactive",
-      this.inverted && "sd-interactive--inverted"
-    )}" @click="${this.showTranscript}" @keydown="${this.showTranscriptKeydown}" tab-index="0"><sd-3-23-4-icon class="w-6 h-6" name="transcript" library="system" label="${this.isMuted ? this.localize.term("unmute") : this.localize.term("mute")}"></sd-3-23-4-icon></button>` : null} <button class="${cx("w-6 h-6 hover:cursor-pointer sd-interactive", this.inverted && "sd-interactive--inverted")}" part="volume" aria-label="${this.localize.term("mute")}" tabindex="0" @click="${this.toggleMute}" @keydown="${this.toggleMuteKeydown}"><sd-3-23-4-icon class="w-6 h-6" name="${this.isMuted ? "mute" : "volume"}" library="system"></sd-3-23-4-icon></button></div></div>`;
-    const renderTimestamps = html`<div class="${cx(
-      "w-full flex justify-between",
-      this.reversedLayout ? "mb-2" : "mt-2",
-      this.animated && this.reversedLayout && "absolute bottom-0 left-0 mb-2",
-      this.animated && !this.reversedLayout && "mt-2"
-    )}" part="timestamps"><div class="${cx("current-time text-sm", this.inverted ? "text-primary-400" : "text-neutral-700")}">${this.currentTime}</div><div class="${cx("current-time text-sm", this.inverted ? "text-primary-400" : "text-neutral-700")}">${this.duration}</div></div>`;
-    return html`<div class="${cx("w-full flex relative", this.reversedLayout ? "flex-col-reverse" : "flex-col")}" aria-label="${this.localize.term("audioPlayer")}" part="audio-player"><slot @slotchange="${this.updateAudioDuration}"></slot>${!this.animated || this.animated && this.reversedLayout ? renderAudioControls : null}<div class="relative">${this.animated && !this.reversedLayout ? html`${renderAudioControls}` : null} ${this.animated ? html`<canvas class="w-full h-16"></canvas>` : null} ${!this.hideTimestamps && this.animated && this.reversedLayout ? renderTimestamps : null} <input class="${cx(
-      "progress-slider bg-primary appearance-none w-full cursor-pointer outline-none h-1 flex items-center sd-interactive",
-      this.inverted && "sd-interactive--inverted"
-    )}" type="range" max="100" step="0.001" value="${this.progress}" tabindex="0" @input="${this.handleAudioProgress}" @keydown="${this.handleAudioProgressKeydown}" part="progress-slider" style="background:linear-gradient(to right,${this.inverted ? "rgb(var(--sd-color-white, 255 255 255) / 1)" : "rgb(var(--sd-color-primary, 0 53 142) / 1)"} ${progressPercentage}%,${this.animated ? "transparent" : this.inverted ? "rgb(var(--sd-color-primary-400, 153 171 208) / 1)" : "rgb(var(--sd-color-grey-400, 195 195 195) / 1)"} ${progressPercentage}%)"></div>${this.hasSlotController.test("transcript") ? html`<sd-3-23-4-drawer><slot name="transcript"></slot></sd-3-23-4-drawer>` : null} ${!this.hideTimestamps && (!this.animated || !this.reversedLayout) ? renderTimestamps : null}</div>`;
-  }
-};
-SdAudio.styles = [
-  SolidElement.styles,
-  unsafeCSS(InteractiveStyles),
-  css`.progress-slider:focus-visible{outline:2px solid transparent;outline-offset:2px}.progress-slider::-webkit-slider-thumb{background-color:currentColor;height:var(--sd-spacing-4,1rem);width:var(--sd-spacing-4,1rem);-webkit-appearance:none;appearance:none;border-radius:var(--sd-border-radius-full,9999px);border-style:none;-webkit-transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.progress-slider:focus-visible::-webkit-slider-thumb{outline-style:solid;outline-offset:2px}.progress-slider::-moz-range-thumb{background-color:currentColor;height:var(--sd-spacing-4,1rem);width:var(--sd-spacing-4,1rem);-moz-appearance:none;appearance:none;border-radius:var(--sd-border-radius-full,9999px);border-style:none;-moz-transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.progress-slider:focus-visible::-moz-range-thumb{outline-style:solid;outline-offset:2px}sd-3-23-4-button::part(base){display:flex;height:var(--sd-spacing-16,4rem);width:var(--sd-spacing-16,4rem);align-items:center;justify-content:center;border-radius:var(--sd-border-radius-full,9999px)}sd-3-23-4-button::part(label){flex-grow:0}`
-];
-__decorateClass([
-  property({ type: Boolean, reflect: true, attribute: "reversed-layout" })
-], SdAudio.prototype, "reversedLayout", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true, attribute: "hide-timestamps" })
-], SdAudio.prototype, "hideTimestamps", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], SdAudio.prototype, "animated", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], SdAudio.prototype, "inverted", 2);
-__decorateClass([
-  property({ type: Number })
-], SdAudio.prototype, "speed", 2);
-__decorateClass([
-  state()
-], SdAudio.prototype, "currentTime", 2);
-__decorateClass([
-  state()
-], SdAudio.prototype, "duration", 2);
-__decorateClass([
-  state()
-], SdAudio.prototype, "isPlaying", 2);
-__decorateClass([
-  state()
-], SdAudio.prototype, "isMuted", 2);
-__decorateClass([
-  state()
-], SdAudio.prototype, "progress", 2);
-__decorateClass([
-  query('[part="progress-slider"]')
-], SdAudio.prototype, "progressSlider", 2);
-__decorateClass([
-  query('[part="audio-player"]')
-], SdAudio.prototype, "audioPlayerContainer", 2);
-__decorateClass([
-  query("sd-3-23-4-drawer")
-], SdAudio.prototype, "drawer", 2);
-__decorateClass([
-  query("canvas")
-], SdAudio.prototype, "canvas", 2);
-SdAudio = __decorateClass([
-  customElement("sd-3-23-4-audio")
-], SdAudio);
-export {
-  SdAudio as default
-};

package/dist/versioned-package/components/audio/wave.js

@@ -1,85 +0,0 @@
-class Wave {
-  constructor(config) {
-    this.fixedEnd = true;
-    this.fixedStart = true;
-    this.gradient = false;
-    this.outline = false;
-    this.map = (num, inMin, inMax, outMin, outMax) => (num - inMin) * (outMax - outMin) / (inMax - inMin) + outMin;
-    this.damp = (end, x, size) => {
-      const effectiveValue = 1 - x / end;
-      return 2 * effectiveValue * (x / end) * size;
-    };
-    this.canvas = config.canvas;
-    this.frequency = config.frequency;
-    this.phase = config.phase;
-    this.amplitude = config.amplitude;
-    this.color = config.color;
-    this.shift = config.shift;
-    this.lineWidth = 2;
-    this.damping = config.damping;
-    this.context = this.canvas.getContext("2d");
-    this.paused = true;
-    this.playbackSpeed = 1;
-    this.origin = {
-      x: 0,
-      y: this.canvas.height
-    };
-  }
-  /**
-   * Draw a single point on the canvas
-   * Uses arc() method of the context with radius 2
-   * Depending on the values of outline, fill and graient flags , it will draw a point on the wave
-   * */
-  drawPoint(x, y, color) {
-    if (!this.context) {
-      return;
-    }
-    const r = this.lineWidth / 2;
-    this.context.beginPath();
-    if (this.outline) {
-      this.context.fillStyle = color;
-      this.context.lineWidth = 2;
-      this.context.arc(x, y, r, 0, 2 * Math.PI);
-      this.context.fill();
-    }
-    if (this.gradient) {
-      const linearGradient = this.context.createLinearGradient(0, 0, 0, this.canvas.height);
-      linearGradient.addColorStop(0.1, color);
-      linearGradient.addColorStop(1, "transparent");
-      this.context.fillStyle = linearGradient;
-    } else {
-      this.context.fillStyle = color;
-    }
-    this.context.fillRect(x - r, y - r, r, this.canvas.height - y + r);
-  }
-  buildSine(wavelength, phase, color, amplitude, frequency) {
-    for (let i = this.origin.x, n = this.origin.x + wavelength; i < n; i += 1) {
-      const y = amplitude * Math.sin(frequency * (i + phase));
-      if (this.fixedStart && this.fixedEnd) {
-        this.drawPoint(i, this.origin.y + this.damp(n, i, this.damping) * y, color);
-      } else if (this.fixedStart) {
-        this.drawPoint(i, this.origin.y + this.map(i, this.origin.x, n, 0, this.damping) * y, color);
-      } else if (this.fixedEnd) {
-        this.drawPoint(i, this.origin.y + (this.damping - this.map(i, this.origin.x, n, 0, this.damping)) * y, color);
-      } else {
-        this.drawPoint(i, this.origin.y + y, color);
-      }
-    }
-  }
-  redraw() {
-    this.phase += this.shift * (this.paused ? 1 : 2 * this.playbackSpeed);
-    this.buildSine(this.canvas.width, this.phase, this.color, this.amplitude, this.frequency);
-  }
-  setPlay() {
-    this.paused = false;
-  }
-  setPause() {
-    this.paused = true;
-  }
-  setPlaybackSpeed(playbackSpeed) {
-    this.playbackSpeed = playbackSpeed;
-  }
-}
-export {
-  Wave
-};

package/dist/versioned-package/components/badge/badge.d.ts

@@ -1,13 +0,0 @@
-import SolidElement from '../../internal/solid-element';
-export default class SdBadge extends SolidElement {
-    size: 'lg' | 'md' | 'sm';
-    variant: 'default' | 'success' | 'error';
-    inverted: boolean;
-    render(): import("lit").TemplateResult<1>;
-    static styles: import("lit").CSSResultGroup[];
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'sd-3-23-4-badge': SdBadge;
-    }
-}

package/dist/versioned-package/components/badge/badge.js

@@ -1,59 +0,0 @@
-import { css, html } from "lit";
-import { customElement } from "../../internal/register-custom-element.js";
-import { property } from "lit/decorators.js";
-import cx from "classix";
-import SolidElement from "../../internal/solid-element.js";
-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;
-};
-let SdBadge = class extends SolidElement {
-  constructor() {
-    super(...arguments);
-    this.size = "lg";
-    this.variant = "default";
-    this.inverted = false;
-  }
-  render() {
-    return html`<span role="status" part="base" aria-labelledby="content" class="${cx(
-      "inline-flex items-center justify-center gap-x-[1px] text-center font-bold whitespace-nowrap border rounded-full select-none cursor-[inherit]",
-      {
-        /* variants */
-        default: !this.inverted ? "text-white bg-primary-500 border-white" : "text-primary bg-primary-100 border-primary",
-        success: !this.inverted ? "text-white bg-success border-white" : "text-white bg-success border-primary",
-        error: !this.inverted ? "text-white bg-error border-white" : "text-white bg-error border-primary"
-      }[this.variant],
-      {
-        /* size and fonts*/
-        sm: "h-2 min-w-2",
-        md: "h-4 px-1 min-w-4",
-        lg: "h-5 min-w-5"
-      }[this.size]
-    )}"><span id="content" part="content" class="${cx(this.size === "sm" && "sr-only")}"><slot></slot></span></span>`;
-  }
-};
-SdBadge.styles = [
-  SolidElement.styles,
-  css`:host{display:inline-flex;align-items:center;justify-content:center}:host([size=md]){font-size:.625rem}:host([size=lg]){font-size:.75rem}:host([size=lg])::part(base){padding-left:.313rem;padding-right:.313rem}`
-];
-__decorateClass([
-  property({ reflect: true })
-], SdBadge.prototype, "size", 2);
-__decorateClass([
-  property({ reflect: true })
-], SdBadge.prototype, "variant", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], SdBadge.prototype, "inverted", 2);
-SdBadge = __decorateClass([
-  customElement("sd-3-23-4-badge")
-], SdBadge);
-export {
-  SdBadge as default
-};

package/dist/versioned-package/components/brandshape/brandshape.d.ts

@@ -1,31 +0,0 @@
-import SolidElement from '../../internal/solid-element';
-import type { TemplateResult } from 'lit';
-type Breakpoints = 0 | 414 | 640;
-export default class SdBrandshape extends SolidElement {
-    containerElem: HTMLElement;
-    variant: 'neutral-100' | 'primary' | 'white' | 'border-primary' | 'border-white' | 'image';
-    shapes: ('top' | 'middle' | 'bottom')[];
-    componentBreakpoint: Breakpoints;
-    private resizeObserver;
-    private getSvg;
-    private largeSvg;
-    private mediumSvg;
-    private smallSvg;
-    private setBreakpoint;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    private renderTopBrandshape;
-    private renderMiddleBrandshape;
-    private renderBottomBrandshape;
-    private renderWhitespaceFix;
-    private renderStylizedVariant;
-    private renderShapes;
-    render(): TemplateResult<1>;
-    static styles: import("lit").CSSResultGroup[];
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'sd-3-23-4-brandshape': SdBrandshape;
-    }
-}
-export {};