@umbraco-ui/uui 2.0.0-alpha.1 → 2.0.0-rc.1

package/dist/components/toast-notification/toast-notification.element.js

@@ -1,10 +1,42 @@
+import "../icon-registry-essential/svgs/iconAdd.js";
+import "../icon-registry-essential/svgs/iconAlert.js";
+import "../icon-registry-essential/svgs/iconAttachment.js";
+import "../icon-registry-essential/svgs/iconCalendar.js";
+import "../icon-registry-essential/svgs/iconCheck.js";
+import "../icon-registry-essential/svgs/iconClipboard.js";
+import "../icon-registry-essential/svgs/iconCode.js";
+import "../icon-registry-essential/svgs/iconColorPicker.js";
+import "../icon-registry-essential/svgs/iconCopy.js";
+import "../icon-registry-essential/svgs/iconDelete.js";
+import "../icon-registry-essential/svgs/iconDocument.js";
+import "../icon-registry-essential/svgs/iconDownload.js";
+import "../icon-registry-essential/svgs/iconDrag.js";
+import "../icon-registry-essential/svgs/iconEdit.js";
+import "../icon-registry-essential/svgs/iconFavorite.js";
+import "../icon-registry-essential/svgs/iconFolder.js";
+import "../icon-registry-essential/svgs/iconForbidden.js";
+import "../icon-registry-essential/svgs/iconInfo.js";
+import "../icon-registry-essential/svgs/iconLink.js";
+import "../icon-registry-essential/svgs/iconLock.js";
+import "../icon-registry-essential/svgs/iconPause.js";
+import "../icon-registry-essential/svgs/iconPicture.js";
+import "../icon-registry-essential/svgs/iconPlay.js";
+import { iconRemove } from "../icon-registry-essential/svgs/iconRemove.js";
+import "../icon-registry-essential/svgs/iconSearch.js";
+import "../icon-registry-essential/svgs/iconSee.js";
+import "../icon-registry-essential/svgs/iconSettings.js";
+import "../icon-registry-essential/svgs/iconSubtract.js";
+import "../icon-registry-essential/svgs/iconSync.js";
+import "../icon-registry-essential/svgs/iconUnlock.js";
+import "../icon-registry-essential/svgs/iconUnsee.js";
+import "../icon-registry-essential/svgs/iconWand.js";
+import "../icon-registry-essential/svgs/iconWrong.js";
 import { LitElement, html, css } from "lit";
 import { property, query, state } from "lit/decorators.js";
 import { UUIToastNotificationEvent } from "./UUIToastNotificationEvent.js";
 import "../button/button.js";
 import "../icon/icon.js";
 import { UUITimer } from "../../internal/utils/Timer.js";
-import { iconRemove } from "../icon-registry-essential/svgs/iconRemove.js";
 import { UUITextStyles } from "../../styles/uui-text.styles.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -230,7 +262,7 @@ _UUIToastNotificationElement.styles = [
         display: block;
 
         box-sizing: border-box;
-        box-shadow: var(--uui-shadow-depth-1);
+        box-shadow: var(--uui-shadow-depth-3);
         background-color: var(--uui-color-surface);
         padding: var(--uui-size-layout-1);
         padding-right: var(--uui-size-layout-1);

package/dist/components/toast-notification/toast-notification.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"toast-notification.element.js","sources":["../../../src/components/toast-notification/toast-notification.element.ts"],"sourcesContent":["import { UUITimer } from '../../internal/utils/index.js';\nimport { UUITextStyles } from '../../styles/index.js';\nimport { iconRemove } from '../icon-registry-essential/svgs/index.js';\nimport { css, html, LitElement } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\n\nimport { UUIToastNotificationEvent } from './UUIToastNotificationEvent.js';\nimport type { UUIInterfaceColor } from '../../internal/index.js';\n\nimport '../button/button.js';\nimport '../icon/icon.js';\n\n/**\n *  @element uui-toast-notification\n *  @fires {UUIToastNotificationEvent} opening - fires when the toast is starting to open\n *  @fires {UUIToastNotificationEvent} opened - fires when the toast is open after the open-animation\n *  @fires {UUIToastNotificationEvent} closing - fires when the toast is starting to close\n *  @fires {UUIToastNotificationEvent} closed - fires when the toast is closed\n *  @description - Component for displaying a toast notification, preferably used in toast-notification-container.\n *  @slot - slot for dialog layout/content\n */\nexport class UUIToastNotificationElement extends LitElement {\n  /**\n   * Changes the color of the notification to one of the predefined, symbolic colors. Example: set this to danger to indicate errors.\n   * @type {UUIInterfaceColor}\n   * @attr\n   * @default \"\"\n   */\n  @property({ reflect: true })\n  color: UUIInterfaceColor = '';\n\n  private _autoClose: number | null = null;\n  /**\n   * Set an auto-close timer.\n   * @type number\n   * @attr\n   * @default null\n   */\n  @property({ type: Number })\n  public get autoClose(): number | null {\n    return this._autoClose;\n  }\n  public set autoClose(value: number | null) {\n    this._autoClose = value;\n    if (value === null) {\n      this._timer?.destroy();\n      this._timer = null;\n    } else {\n      if (this._timer === null) {\n        this._timer = new UUITimer(this._onOpenTimerComplete, value);\n      } else {\n        this._timer.setDuration(value);\n      }\n      if (\n        this._pauseTimer === false &&\n        this.isOpen === true &&\n        this._animate === false\n      ) {\n        this._timer.start();\n      }\n    }\n  }\n\n  /**\n   * Pause the auto close timer.\n   */\n  public pauseAutoClose() {\n    this._pauseTimer = true;\n    if (this._timer !== null) {\n      this._timer.pause();\n    }\n  }\n  /**\n   * Resume the auto close timer.\n   */\n  public resumeAutoClose() {\n    this._pauseTimer = false;\n    if (\n      this._timer !== null &&\n      this.isOpen === true &&\n      this._animate === false\n    ) {\n      this._timer.restart();\n    }\n  }\n\n  private readonly _onOpenTimerComplete = () => {\n    if (this._open) {\n      this.open = false;\n    }\n  };\n\n  @query('#toast')\n  private readonly _toastEl!: HTMLElement;\n  private _timer: UUITimer | null = null;\n  private _pauseTimer: boolean = false;\n\n  protected isOpen = false;\n  private _open = false;\n\n  @state()\n  private _animate = false;\n  private _animationTimeout?: number;\n\n  /**\n   * define if this toast should open or close.\n   * @type boolean\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  public get open() {\n    return this._open;\n  }\n  public set open(value: boolean) {\n    if (value === true) {\n      this._makeOpen();\n    } else {\n      this._makeClose();\n    }\n  }\n\n  constructor() {\n    super();\n    this.addEventListener('keyup', (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        this.open = false;\n      }\n    });\n  }\n\n  private _getAnimationDuration(): number {\n    return (\n      Number.parseInt(\n        getComputedStyle(this).getPropertyValue(\n          '--uui-toast-notification-animation-duration',\n        ),\n        10,\n      ) || 480\n    );\n  }\n\n  private _requestAnimationUpdate = 0;\n  private _makeOpen() {\n    if (this._open === true) {\n      return;\n    }\n    this._open = true;\n    this.updateComplete.then(() => {\n      if (this._open !== true) {\n        return;\n      }\n      cancelAnimationFrame(this._requestAnimationUpdate);\n      this._requestAnimationUpdate = requestAnimationFrame(() => {\n        clearTimeout(this._animationTimeout as number);\n        this.isOpen = true;\n        this.setAttribute('is-open', '');\n\n        this.style.height = this._toastEl.getBoundingClientRect().height + 'px';\n        this._animate = true;\n\n        this.dispatchEvent(\n          new UUIToastNotificationEvent(UUIToastNotificationEvent.OPENING),\n        );\n\n        this._animationTimeout = globalThis.setTimeout(() => {\n          if (this.isOpen === true) {\n            this.style.height = 'auto';\n            this._animate = false;\n            if (this._pauseTimer === false) {\n              this._timer?.start();\n            }\n\n            this.dispatchEvent(\n              new UUIToastNotificationEvent(UUIToastNotificationEvent.OPENED),\n            );\n          }\n        }, this._getAnimationDuration());\n      });\n    });\n  }\n  private _makeClose() {\n    if (this._open === false) {\n      return;\n    }\n\n    const event = new UUIToastNotificationEvent(\n      UUIToastNotificationEvent.CLOSING,\n      { cancelable: true },\n    );\n    this.dispatchEvent(event);\n\n    if (event.defaultPrevented === true) {\n      return;\n    }\n\n    this._open = false;\n    this._timer?.pause();\n    cancelAnimationFrame(this._requestAnimationUpdate); // do cancel though isOpen wasn't set jet.\n    if (this.isOpen === true) {\n      this._requestAnimationUpdate = requestAnimationFrame(() => {\n        clearTimeout(this._animationTimeout as number);\n        this.isOpen = false;\n        this.removeAttribute('is-open');\n\n        this.style.height = this._toastEl.getBoundingClientRect().height + 'px';\n        this._animate = true;\n\n        requestAnimationFrame(() => {\n          // Dont overwrite the height instantly, but instead wait one frame to ensure animate is set before setting the goal of the animation.\n          this.style.height = '0';\n        });\n\n        this._animationTimeout = globalThis.setTimeout(() => {\n          if (this.isOpen === false) {\n            this._animate = false;\n\n            this.dispatchEvent(\n              new UUIToastNotificationEvent(UUIToastNotificationEvent.CLOSED),\n            );\n            this.remove();\n          }\n        }, this._getAnimationDuration());\n      });\n    }\n  }\n\n  render() {\n    return html`\n      <div id=\"toast\" class=${this._animate ? 'animate' : ''}>\n        <div>\n          <div id=\"close\">\n            <uui-button\n              .label=${'close'}\n              .color=${this.color}\n              .look=${this.color ? 'primary' : 'default'}\n              @click=${() => (this.open = false)}>\n              <uui-icon\n                name=\"remove\"\n                .fallback=${iconRemove.strings[0]}></uui-icon>\n            </uui-button>\n          </div>\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  static override readonly styles = [\n    UUITextStyles,\n    css`\n      :host {\n        --uui-toast-notification-margin: var(--uui-size-space-2);\n\n        position: relative;\n        display: block;\n        width: 100%;\n        max-width: 400px;\n        margin: 0 var(--uui-toast-notification-margin);\n        box-sizing: border-box;\n\n        height: 0;\n        pointer-events: none;\n\n        transition: height\n          var(--uui-toast-notification-animation-duration, 480ms) ease-in-out;\n      }\n      :host([is-open]) {\n        pointer-events: all;\n        transition-timing-function: cubic-bezier(\n          0.19,\n          1,\n          0.22,\n          1\n        ); /* easeOutExpo */\n      }\n\n      #toast {\n        position: relative;\n        display: block;\n        padding: calc(var(--uui-toast-notification-margin) * 0.5) 0;\n        width: 100%;\n        max-width: 400px;\n      }\n      #toast.animate {\n        position: absolute;\n      }\n\n      #toast > div {\n        position: relative;\n        display: block;\n\n        box-sizing: border-box;\n        box-shadow: var(--uui-shadow-depth-1);\n        background-color: var(--uui-color-surface);\n        padding: var(--uui-size-layout-1);\n        padding-right: var(--uui-size-layout-1);\n        padding-left: var(--uui-size-layout-3);\n        border-radius: var(--uui-border-radius-3);\n\n        opacity: 0;\n        transition: opacity\n          var(--uui-toast-notification-animation-duration, 480ms);\n      }\n      :host([is-open]) #toast > div {\n        opacity: 1;\n      }\n\n      #close {\n        float: right;\n        margin-top: -6px;\n        margin-left: var(--uui-size-space-1);\n        margin-bottom: -4px;\n      }\n\n      #close > uui-button {\n        --uui-button-border-radius: 50px 50px 50px 50px;\n        --uui-button-padding-left-factor: 1.5;\n        --uui-button-padding-right-factor: 1.5;\n      }\n\n      :host #toast > div {\n        background-color: var(--uui-color-surface);\n        color: var(--uui-color-text);\n        border-color: var(--uui-color-surface);\n      }\n      :host([color='default']) #toast > div {\n        background-color: var(--uui-color-default);\n        color: var(--uui-color-default-contrast);\n        border-color: var(--uui-color-default-standalone);\n      }\n      :host([color='positive']) #toast > div {\n        background-color: var(--uui-color-positive);\n        color: var(--uui-color-positive-contrast);\n        border-color: var(--uui-color-positive-standalone);\n      }\n      :host([color='warning']) #toast > div {\n        background-color: var(--uui-color-warning);\n        color: var(--uui-color-warning-contrast);\n        border-color: var(--uui-color-warning-standalone);\n      }\n      :host([color='danger']) #toast > div {\n        background-color: var(--uui-color-danger);\n        color: var(--uui-color-danger-contrast);\n        border-color: var(--uui-color-danger-standalone);\n      }\n      :host([color='invalid']) #toast > div {\n        background-color: var(--uui-color-invalid);\n        color: var(--uui-color-invalid-contrast);\n        border-color: var(--uui-color-invalid-standalone);\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"toast-notification.element.js","sources":["../../../src/components/toast-notification/toast-notification.element.ts"],"sourcesContent":["import { UUITimer } from '../../internal/utils/index.js';\nimport { UUITextStyles } from '../../styles/index.js';\nimport { iconRemove } from '../icon-registry-essential/svgs/index.js';\nimport { css, html, LitElement } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\n\nimport { UUIToastNotificationEvent } from './UUIToastNotificationEvent.js';\nimport type { UUIInterfaceColor } from '../../internal/index.js';\n\nimport '../button/button.js';\nimport '../icon/icon.js';\n\n/**\n *  @element uui-toast-notification\n *  @fires {UUIToastNotificationEvent} opening - fires when the toast is starting to open\n *  @fires {UUIToastNotificationEvent} opened - fires when the toast is open after the open-animation\n *  @fires {UUIToastNotificationEvent} closing - fires when the toast is starting to close\n *  @fires {UUIToastNotificationEvent} closed - fires when the toast is closed\n *  @description - Component for displaying a toast notification, preferably used in toast-notification-container.\n *  @slot - slot for dialog layout/content\n */\nexport class UUIToastNotificationElement extends LitElement {\n  /**\n   * Changes the color of the notification to one of the predefined, symbolic colors. Example: set this to danger to indicate errors.\n   * @type {UUIInterfaceColor}\n   * @attr\n   * @default \"\"\n   */\n  @property({ reflect: true })\n  color: UUIInterfaceColor = '';\n\n  private _autoClose: number | null = null;\n  /**\n   * Set an auto-close timer.\n   * @type number\n   * @attr\n   * @default null\n   */\n  @property({ type: Number })\n  public get autoClose(): number | null {\n    return this._autoClose;\n  }\n  public set autoClose(value: number | null) {\n    this._autoClose = value;\n    if (value === null) {\n      this._timer?.destroy();\n      this._timer = null;\n    } else {\n      if (this._timer === null) {\n        this._timer = new UUITimer(this._onOpenTimerComplete, value);\n      } else {\n        this._timer.setDuration(value);\n      }\n      if (\n        this._pauseTimer === false &&\n        this.isOpen === true &&\n        this._animate === false\n      ) {\n        this._timer.start();\n      }\n    }\n  }\n\n  /**\n   * Pause the auto close timer.\n   */\n  public pauseAutoClose() {\n    this._pauseTimer = true;\n    if (this._timer !== null) {\n      this._timer.pause();\n    }\n  }\n  /**\n   * Resume the auto close timer.\n   */\n  public resumeAutoClose() {\n    this._pauseTimer = false;\n    if (\n      this._timer !== null &&\n      this.isOpen === true &&\n      this._animate === false\n    ) {\n      this._timer.restart();\n    }\n  }\n\n  private readonly _onOpenTimerComplete = () => {\n    if (this._open) {\n      this.open = false;\n    }\n  };\n\n  @query('#toast')\n  private readonly _toastEl!: HTMLElement;\n  private _timer: UUITimer | null = null;\n  private _pauseTimer: boolean = false;\n\n  protected isOpen = false;\n  private _open = false;\n\n  @state()\n  private _animate = false;\n  private _animationTimeout?: number;\n\n  /**\n   * define if this toast should open or close.\n   * @type boolean\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  public get open() {\n    return this._open;\n  }\n  public set open(value: boolean) {\n    if (value === true) {\n      this._makeOpen();\n    } else {\n      this._makeClose();\n    }\n  }\n\n  constructor() {\n    super();\n    this.addEventListener('keyup', (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        this.open = false;\n      }\n    });\n  }\n\n  private _getAnimationDuration(): number {\n    return (\n      Number.parseInt(\n        getComputedStyle(this).getPropertyValue(\n          '--uui-toast-notification-animation-duration',\n        ),\n        10,\n      ) || 480\n    );\n  }\n\n  private _requestAnimationUpdate = 0;\n  private _makeOpen() {\n    if (this._open === true) {\n      return;\n    }\n    this._open = true;\n    this.updateComplete.then(() => {\n      if (this._open !== true) {\n        return;\n      }\n      cancelAnimationFrame(this._requestAnimationUpdate);\n      this._requestAnimationUpdate = requestAnimationFrame(() => {\n        clearTimeout(this._animationTimeout as number);\n        this.isOpen = true;\n        this.setAttribute('is-open', '');\n\n        this.style.height = this._toastEl.getBoundingClientRect().height + 'px';\n        this._animate = true;\n\n        this.dispatchEvent(\n          new UUIToastNotificationEvent(UUIToastNotificationEvent.OPENING),\n        );\n\n        this._animationTimeout = globalThis.setTimeout(() => {\n          if (this.isOpen === true) {\n            this.style.height = 'auto';\n            this._animate = false;\n            if (this._pauseTimer === false) {\n              this._timer?.start();\n            }\n\n            this.dispatchEvent(\n              new UUIToastNotificationEvent(UUIToastNotificationEvent.OPENED),\n            );\n          }\n        }, this._getAnimationDuration());\n      });\n    });\n  }\n  private _makeClose() {\n    if (this._open === false) {\n      return;\n    }\n\n    const event = new UUIToastNotificationEvent(\n      UUIToastNotificationEvent.CLOSING,\n      { cancelable: true },\n    );\n    this.dispatchEvent(event);\n\n    if (event.defaultPrevented === true) {\n      return;\n    }\n\n    this._open = false;\n    this._timer?.pause();\n    cancelAnimationFrame(this._requestAnimationUpdate); // do cancel though isOpen wasn't set jet.\n    if (this.isOpen === true) {\n      this._requestAnimationUpdate = requestAnimationFrame(() => {\n        clearTimeout(this._animationTimeout as number);\n        this.isOpen = false;\n        this.removeAttribute('is-open');\n\n        this.style.height = this._toastEl.getBoundingClientRect().height + 'px';\n        this._animate = true;\n\n        requestAnimationFrame(() => {\n          // Dont overwrite the height instantly, but instead wait one frame to ensure animate is set before setting the goal of the animation.\n          this.style.height = '0';\n        });\n\n        this._animationTimeout = globalThis.setTimeout(() => {\n          if (this.isOpen === false) {\n            this._animate = false;\n\n            this.dispatchEvent(\n              new UUIToastNotificationEvent(UUIToastNotificationEvent.CLOSED),\n            );\n            this.remove();\n          }\n        }, this._getAnimationDuration());\n      });\n    }\n  }\n\n  render() {\n    return html`\n      <div id=\"toast\" class=${this._animate ? 'animate' : ''}>\n        <div>\n          <div id=\"close\">\n            <uui-button\n              .label=${'close'}\n              .color=${this.color}\n              .look=${this.color ? 'primary' : 'default'}\n              @click=${() => (this.open = false)}>\n              <uui-icon\n                name=\"remove\"\n                .fallback=${iconRemove.strings[0]}></uui-icon>\n            </uui-button>\n          </div>\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  static override readonly styles = [\n    UUITextStyles,\n    css`\n      :host {\n        --uui-toast-notification-margin: var(--uui-size-space-2);\n\n        position: relative;\n        display: block;\n        width: 100%;\n        max-width: 400px;\n        margin: 0 var(--uui-toast-notification-margin);\n        box-sizing: border-box;\n\n        height: 0;\n        pointer-events: none;\n\n        transition: height\n          var(--uui-toast-notification-animation-duration, 480ms) ease-in-out;\n      }\n      :host([is-open]) {\n        pointer-events: all;\n        transition-timing-function: cubic-bezier(\n          0.19,\n          1,\n          0.22,\n          1\n        ); /* easeOutExpo */\n      }\n\n      #toast {\n        position: relative;\n        display: block;\n        padding: calc(var(--uui-toast-notification-margin) * 0.5) 0;\n        width: 100%;\n        max-width: 400px;\n      }\n      #toast.animate {\n        position: absolute;\n      }\n\n      #toast > div {\n        position: relative;\n        display: block;\n\n        box-sizing: border-box;\n        box-shadow: var(--uui-shadow-depth-3);\n        background-color: var(--uui-color-surface);\n        padding: var(--uui-size-layout-1);\n        padding-right: var(--uui-size-layout-1);\n        padding-left: var(--uui-size-layout-3);\n        border-radius: var(--uui-border-radius-3);\n\n        opacity: 0;\n        transition: opacity\n          var(--uui-toast-notification-animation-duration, 480ms);\n      }\n      :host([is-open]) #toast > div {\n        opacity: 1;\n      }\n\n      #close {\n        float: right;\n        margin-top: -6px;\n        margin-left: var(--uui-size-space-1);\n        margin-bottom: -4px;\n      }\n\n      #close > uui-button {\n        --uui-button-border-radius: 50px 50px 50px 50px;\n        --uui-button-padding-left-factor: 1.5;\n        --uui-button-padding-right-factor: 1.5;\n      }\n\n      :host #toast > div {\n        background-color: var(--uui-color-surface);\n        color: var(--uui-color-text);\n        border-color: var(--uui-color-surface);\n      }\n      :host([color='default']) #toast > div {\n        background-color: var(--uui-color-default);\n        color: var(--uui-color-default-contrast);\n        border-color: var(--uui-color-default-standalone);\n      }\n      :host([color='positive']) #toast > div {\n        background-color: var(--uui-color-positive);\n        color: var(--uui-color-positive-contrast);\n        border-color: var(--uui-color-positive-standalone);\n      }\n      :host([color='warning']) #toast > div {\n        background-color: var(--uui-color-warning);\n        color: var(--uui-color-warning-contrast);\n        border-color: var(--uui-color-warning-standalone);\n      }\n      :host([color='danger']) #toast > div {\n        background-color: var(--uui-color-danger);\n        color: var(--uui-color-danger-contrast);\n        border-color: var(--uui-color-danger-standalone);\n      }\n      :host([color='invalid']) #toast > div {\n        background-color: var(--uui-color-invalid);\n        color: var(--uui-color-invalid-contrast);\n        border-color: var(--uui-color-invalid-standalone);\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":"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"}

package/dist/components/toggle/toggle.element.js

@@ -1,8 +1,39 @@
 import { UUIBooleanInputElement } from "../boolean-input/boolean-input.element.js";
 import "../boolean-input/UUIBooleanInputEvent.js";
-import { html, css } from "lit";
+import "../icon-registry-essential/svgs/iconAdd.js";
+import "../icon-registry-essential/svgs/iconAlert.js";
+import "../icon-registry-essential/svgs/iconAttachment.js";
+import "../icon-registry-essential/svgs/iconCalendar.js";
 import { iconCheck } from "../icon-registry-essential/svgs/iconCheck.js";
+import "../icon-registry-essential/svgs/iconClipboard.js";
+import "../icon-registry-essential/svgs/iconCode.js";
+import "../icon-registry-essential/svgs/iconColorPicker.js";
+import "../icon-registry-essential/svgs/iconCopy.js";
+import "../icon-registry-essential/svgs/iconDelete.js";
+import "../icon-registry-essential/svgs/iconDocument.js";
+import "../icon-registry-essential/svgs/iconDownload.js";
+import "../icon-registry-essential/svgs/iconDrag.js";
+import "../icon-registry-essential/svgs/iconEdit.js";
+import "../icon-registry-essential/svgs/iconFavorite.js";
+import "../icon-registry-essential/svgs/iconFolder.js";
+import "../icon-registry-essential/svgs/iconForbidden.js";
+import "../icon-registry-essential/svgs/iconInfo.js";
+import "../icon-registry-essential/svgs/iconLink.js";
+import "../icon-registry-essential/svgs/iconLock.js";
+import "../icon-registry-essential/svgs/iconPause.js";
+import "../icon-registry-essential/svgs/iconPicture.js";
+import "../icon-registry-essential/svgs/iconPlay.js";
 import { iconRemove } from "../icon-registry-essential/svgs/iconRemove.js";
+import "../icon-registry-essential/svgs/iconSearch.js";
+import "../icon-registry-essential/svgs/iconSee.js";
+import "../icon-registry-essential/svgs/iconSettings.js";
+import "../icon-registry-essential/svgs/iconSubtract.js";
+import "../icon-registry-essential/svgs/iconSync.js";
+import "../icon-registry-essential/svgs/iconUnlock.js";
+import "../icon-registry-essential/svgs/iconUnsee.js";
+import "../icon-registry-essential/svgs/iconWand.js";
+import "../icon-registry-essential/svgs/iconWrong.js";
+import { html, css } from "lit";
 import { UUIHorizontalShakeKeyframes, UUIHorizontalShakeAnimationValue } from "../../internal/animations/uui-shake.js";
 const _UUIToggleElement = class _UUIToggleElement extends UUIBooleanInputElement {
   constructor() {
@@ -41,11 +72,15 @@ _UUIToggleElement.styles = [
 
         background-color: var(
           --uui-toggle-background-color,
-          var(--uui-color-border)
+          var(--uui-color-divider-standalone)
         );
         border: 1px solid
           var(--uui-toggle-border-color, var(--uui-color-border-standalone));
         font-size: calc(var(--uui-toggle-size) * 0.6);
+
+        transition:
+          background-color 60ms,
+          border-color 60ms;
       }
 
       label:hover input:not([disabled]) ~ #toggle {
@@ -55,7 +90,7 @@ _UUIToggleElement.styles = [
         );
         background-color: var(
           --uui-toggle-background-color-hover,
-          var(--uui-color-border)
+          var(--uui-color-divider)
         );
       }
 

package/dist/components/toggle/toggle.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle.element.js","sources":["../../../src/components/toggle/toggle.element.ts"],"sourcesContent":["import {\n  UUIHorizontalShakeAnimationValue,\n  UUIHorizontalShakeKeyframes,\n} from '../../internal/animations/index.js';\nimport { UUIBooleanInputElement } from '../boolean-input/boolean-input.js';\nimport {\n  iconCheck,\n  iconRemove,\n} from '../icon-registry-essential/svgs/index.js';\nimport { css, html } from 'lit';\n\n/**\n *  Umbraco Toggle-switch, toggles between off/on. Technically a checkbox.\n *  @element uui-toggle\n *  @fires UUIBooleanInputEvent#change- fires when the element is begin checked by a user action\n *  @cssprop --uui-toggle-size - Define the toggle size.\n *  @cssprop --uui-toggle-switch-width - Define the slider width.\n *  @cssprop --uui-toggle-background-color - Set the toggle background color\n *  @cssprop --uui-toggle-border-color - Set the toggle border color\n *  @cssprop --uui-toggle-border-color-hover - Set the toggle background color when hovered\n *  @cssprop --uui-toggle-background-color-hover - Set the toggle background color when hovered\n *  @cssprop --uui-toggle-border-color-focus - Set the toggle background color when focused\n *  @cssprop --uui-toggle-background-color-focus - Set the toggle background color when focused\n *  @extends UUIBooleanInputElement\n */\nexport class UUIToggleElement extends UUIBooleanInputElement {\n  /**\n   * This is a static class field indicating that the element is can be used inside a native form and participate in its events. It may require a polyfill, check support here https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals.  Read more about form controls here https://web.dev/more-capable-form-controls/\n   * @type {boolean}\n   */\n  static readonly formAssociated = true;\n\n  constructor() {\n    super('switch');\n  }\n\n  renderCheckbox() {\n    return html`\n      <div id=\"toggle\">\n        <div id=\"icon-checked\">${iconCheck}</div>\n        <div id=\"icon-unchecked\">${iconRemove}</div>\n      </div>\n    `;\n  }\n\n  static override readonly styles = [\n    ...UUIBooleanInputElement.styles,\n    UUIHorizontalShakeKeyframes,\n    css`\n      :host {\n        --uui-toggle-size: 18px;\n        --uui-toggle-switch-width: calc(2 * var(--uui-toggle-size));\n      }\n\n      #toggle {\n        position: relative;\n        grid-area: 'input';\n        display: flex;\n        align-items: center;\n\n        flex-shrink: 0;\n\n        width: var(--uui-toggle-switch-width);\n        height: var(--uui-toggle-size);\n        border-radius: 100px;\n\n        background-color: var(\n          --uui-toggle-background-color,\n          var(--uui-color-border)\n        );\n        border: 1px solid\n          var(--uui-toggle-border-color, var(--uui-color-border-standalone));\n        font-size: calc(var(--uui-toggle-size) * 0.6);\n      }\n\n      label:hover input:not([disabled]) ~ #toggle {\n        border-color: var(\n          --uui-toggle-border-color-hover,\n          var(--uui-color-border-emphasis)\n        );\n        background-color: var(\n          --uui-toggle-background-color-hover,\n          var(--uui-color-border)\n        );\n      }\n\n      label:focus #toggle {\n        border-color: var(\n          --uui-toggle-border-color-focus,\n          var(--uui-color-focus)\n        );\n        background-color: var(\n          --uui-toggle-background-color-focus,\n          var(--uui-color-surface-emphasis)\n        );\n      }\n\n      input:checked ~ #toggle {\n        background-color: var(--uui-color-selected);\n      }\n      input:checked ~ #toggle::after {\n        border-color: var(--uui-color-selected-standalone);\n      }\n\n      label:hover input:checked:not([disabled]) ~ #toggle {\n        background-color: var(--uui-color-selected-emphasis);\n      }\n\n      label:focus input:checked ~ #toggle {\n        background-color: var(--uui-color-selected-emphasis);\n      }\n\n      #icon-checked,\n      #icon-unchecked {\n        position: absolute;\n        vertical-align: middle;\n        width: 1em;\n        height: 1em;\n        line-height: 0;\n        transition: color 120ms;\n        svg {\n          stroke-width: 2.5;\n        }\n      }\n\n      #icon-checked {\n        margin-left: -0.45em;\n        left: calc((var(--uui-toggle-size) + 1px) * 0.5);\n        color: var(--uui-color-interactive);\n      }\n\n      #icon-unchecked {\n        margin-right: -0.5em;\n        right: calc((var(--uui-toggle-size) + 1px) * 0.5);\n        color: var(--uui-color-interactive);\n      }\n\n      input:checked ~ #toggle #icon-checked {\n        color: var(--uui-color-selected-contrast);\n      }\n\n      #toggle::after {\n        content: '';\n        position: absolute;\n        top: 1px;\n        left: 1px;\n        width: calc(var(--uui-toggle-size) - 2px);\n        height: calc(var(--uui-toggle-size) - 2px);\n        border-radius: 100px;\n        background-color: var(--uui-color-selected-contrast);\n        border: 1px solid var(--uui-color-border-standalone);\n        box-sizing: border-box;\n        transition:\n          width 120ms ease,\n          left 120ms ease,\n          transform 120ms ease,\n          background-color 120ms;\n      }\n\n      input:checked ~ #toggle::after {\n        left: calc(100% - 2px);\n        transform: translateX(-100%);\n      }\n\n      input:focus-visible ~ #toggle {\n        outline: 2px solid var(--uui-color-focus);\n      }\n\n      :host(:not([disabled], [readonly])) label:active #toggle::after {\n        /** Stretch when mouse down */\n        width: calc(1.06 * var(--uui-toggle-size));\n      }\n\n      :host([disabled]) #toggle {\n        background-color: var(--uui-color-disabled-standalone);\n      }\n      :host([disabled]) input:checked ~ #toggle {\n        background-color: var(--uui-color-disabled-contrast);\n      }\n      :host([disabled]) #toggle::after {\n        background-color: var(--uui-color-disabled);\n      }\n      :host([disabled]) #toggle #icon-unchecked {\n        color: var(--uui-color-disabled-contrast);\n      }\n      :host([disabled]) label:active #toggle {\n        animation: ${UUIHorizontalShakeAnimationValue};\n      }\n      :host([disabled]) input:checked #toggle #icon-checked {\n        color: var(--uui-color-disabled-contrast);\n      }\n\n      :host(:not([pristine]):invalid) #toggle,\n      :host(:not([pristine]):invalid) label:hover #toggle,\n      /* polyfill support */\n      :host(:not([pristine])[internals-invalid]) #toggle,\n      :host(:not([pristine])[internals-invalid]) label:hover #toggle {\n        border: 1px solid var(--uui-color-invalid-standalone);\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":";;;;;;AAyBO,MAAM,oBAAN,MAAM,0BAAyB,uBAAuB;AAAA,EAO3D,cAAc;AACZ,UAAM,QAAQ;AAAA,EAChB;AAAA,EAEA,iBAAiB;AACf,WAAO;AAAA;AAAA,iCAEsB,SAAS;AAAA,mCACP,UAAU;AAAA;AAAA;AAAA,EAG3C;AA8JF;AA3KE,kBAAgB,iBAAiB;AAejC,kBAAyB,SAAS;AAAA,EAChC,GAAG,uBAAuB;AAAA,EAC1B;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBA0IiB,gCAAgC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAjK9C,IAAM,mBAAN;"}
+{"version":3,"file":"toggle.element.js","sources":["../../../src/components/toggle/toggle.element.ts"],"sourcesContent":["import {\n  UUIHorizontalShakeAnimationValue,\n  UUIHorizontalShakeKeyframes,\n} from '../../internal/animations/index.js';\nimport { UUIBooleanInputElement } from '../boolean-input/boolean-input.js';\nimport {\n  iconCheck,\n  iconRemove,\n} from '../icon-registry-essential/svgs/index.js';\nimport { css, html } from 'lit';\n\n/**\n *  Umbraco Toggle-switch, toggles between off/on. Technically a checkbox.\n *  @element uui-toggle\n *  @fires UUIBooleanInputEvent#change- fires when the element is begin checked by a user action\n *  @cssprop --uui-toggle-size - Define the toggle size.\n *  @cssprop --uui-toggle-switch-width - Define the slider width.\n *  @cssprop --uui-toggle-background-color - Set the toggle background color\n *  @cssprop --uui-toggle-border-color - Set the toggle border color\n *  @cssprop --uui-toggle-border-color-hover - Set the toggle background color when hovered\n *  @cssprop --uui-toggle-background-color-hover - Set the toggle background color when hovered\n *  @cssprop --uui-toggle-border-color-focus - Set the toggle background color when focused\n *  @cssprop --uui-toggle-background-color-focus - Set the toggle background color when focused\n *  @extends UUIBooleanInputElement\n */\nexport class UUIToggleElement extends UUIBooleanInputElement {\n  /**\n   * This is a static class field indicating that the element is can be used inside a native form and participate in its events. It may require a polyfill, check support here https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals.  Read more about form controls here https://web.dev/more-capable-form-controls/\n   * @type {boolean}\n   */\n  static readonly formAssociated = true;\n\n  constructor() {\n    super('switch');\n  }\n\n  renderCheckbox() {\n    return html`\n      <div id=\"toggle\">\n        <div id=\"icon-checked\">${iconCheck}</div>\n        <div id=\"icon-unchecked\">${iconRemove}</div>\n      </div>\n    `;\n  }\n\n  static override readonly styles = [\n    ...UUIBooleanInputElement.styles,\n    UUIHorizontalShakeKeyframes,\n    css`\n      :host {\n        --uui-toggle-size: 18px;\n        --uui-toggle-switch-width: calc(2 * var(--uui-toggle-size));\n      }\n\n      #toggle {\n        position: relative;\n        grid-area: 'input';\n        display: flex;\n        align-items: center;\n\n        flex-shrink: 0;\n\n        width: var(--uui-toggle-switch-width);\n        height: var(--uui-toggle-size);\n        border-radius: 100px;\n\n        background-color: var(\n          --uui-toggle-background-color,\n          var(--uui-color-divider-standalone)\n        );\n        border: 1px solid\n          var(--uui-toggle-border-color, var(--uui-color-border-standalone));\n        font-size: calc(var(--uui-toggle-size) * 0.6);\n\n        transition:\n          background-color 60ms,\n          border-color 60ms;\n      }\n\n      label:hover input:not([disabled]) ~ #toggle {\n        border-color: var(\n          --uui-toggle-border-color-hover,\n          var(--uui-color-border-emphasis)\n        );\n        background-color: var(\n          --uui-toggle-background-color-hover,\n          var(--uui-color-divider)\n        );\n      }\n\n      label:focus #toggle {\n        border-color: var(\n          --uui-toggle-border-color-focus,\n          var(--uui-color-focus)\n        );\n        background-color: var(\n          --uui-toggle-background-color-focus,\n          var(--uui-color-surface-emphasis)\n        );\n      }\n\n      input:checked ~ #toggle {\n        background-color: var(--uui-color-selected);\n      }\n      input:checked ~ #toggle::after {\n        border-color: var(--uui-color-selected-standalone);\n      }\n\n      label:hover input:checked:not([disabled]) ~ #toggle {\n        background-color: var(--uui-color-selected-emphasis);\n      }\n\n      label:focus input:checked ~ #toggle {\n        background-color: var(--uui-color-selected-emphasis);\n      }\n\n      #icon-checked,\n      #icon-unchecked {\n        position: absolute;\n        vertical-align: middle;\n        width: 1em;\n        height: 1em;\n        line-height: 0;\n        transition: color 120ms;\n        svg {\n          stroke-width: 2.5;\n        }\n      }\n\n      #icon-checked {\n        margin-left: -0.45em;\n        left: calc((var(--uui-toggle-size) + 1px) * 0.5);\n        color: var(--uui-color-interactive);\n      }\n\n      #icon-unchecked {\n        margin-right: -0.5em;\n        right: calc((var(--uui-toggle-size) + 1px) * 0.5);\n        color: var(--uui-color-interactive);\n      }\n\n      input:checked ~ #toggle #icon-checked {\n        color: var(--uui-color-selected-contrast);\n      }\n\n      #toggle::after {\n        content: '';\n        position: absolute;\n        top: 1px;\n        left: 1px;\n        width: calc(var(--uui-toggle-size) - 2px);\n        height: calc(var(--uui-toggle-size) - 2px);\n        border-radius: 100px;\n        background-color: var(--uui-color-selected-contrast);\n        border: 1px solid var(--uui-color-border-standalone);\n        box-sizing: border-box;\n        transition:\n          width 120ms ease,\n          left 120ms ease,\n          transform 120ms ease,\n          background-color 120ms;\n      }\n\n      input:checked ~ #toggle::after {\n        left: calc(100% - 2px);\n        transform: translateX(-100%);\n      }\n\n      input:focus-visible ~ #toggle {\n        outline: 2px solid var(--uui-color-focus);\n      }\n\n      :host(:not([disabled], [readonly])) label:active #toggle::after {\n        /** Stretch when mouse down */\n        width: calc(1.06 * var(--uui-toggle-size));\n      }\n\n      :host([disabled]) #toggle {\n        background-color: var(--uui-color-disabled-standalone);\n      }\n      :host([disabled]) input:checked ~ #toggle {\n        background-color: var(--uui-color-disabled-contrast);\n      }\n      :host([disabled]) #toggle::after {\n        background-color: var(--uui-color-disabled);\n      }\n      :host([disabled]) #toggle #icon-unchecked {\n        color: var(--uui-color-disabled-contrast);\n      }\n      :host([disabled]) label:active #toggle {\n        animation: ${UUIHorizontalShakeAnimationValue};\n      }\n      :host([disabled]) input:checked #toggle #icon-checked {\n        color: var(--uui-color-disabled-contrast);\n      }\n\n      :host(:not([pristine]):invalid) #toggle,\n      :host(:not([pristine]):invalid) label:hover #toggle,\n      /* polyfill support */\n      :host(:not([pristine])[internals-invalid]) #toggle,\n      :host(:not([pristine])[internals-invalid]) label:hover #toggle {\n        border: 1px solid var(--uui-color-invalid-standalone);\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyBO,MAAM,oBAAN,MAAM,0BAAyB,uBAAuB;AAAA,EAO3D,cAAc;AACZ,UAAM,QAAQ;AAAA,EAChB;AAAA,EAEA,iBAAiB;AACf,WAAO;AAAA;AAAA,iCAEsB,SAAS;AAAA,mCACP,UAAU;AAAA;AAAA;AAAA,EAG3C;AAkKF;AA/KE,kBAAgB,iBAAiB;AAejC,kBAAyB,SAAS;AAAA,EAChC,GAAG,uBAAuB;AAAA,EAC1B;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBA8IiB,gCAAgC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AArK9C,IAAM,mBAAN;"}

package/dist/index.d.ts

@@ -1,83 +1,3 @@
 export * from './internal/index.js';
 export * from './styles/index.js';
-export * from './components/button/button.js';
-export * from './components/badge/badge.js';
-export * from './components/icon/icon.js';
-export * from './components/icon-registry/icon-registry.js';
-export * from './components/icon-registry-essential/icon-registry-essential.js';
-export * from './components/input/input.js';
-export * from './components/input-password/input-password.js';
-export * from './components/dialog/dialog.js';
-export * from './components/dialog-layout/dialog-layout.js';
-export * from './components/table/table.js';
-export * from './components/label/label.js';
-export * from './components/action-bar/action-bar.js';
-export * from './components/avatar/avatar.js';
-export * from './components/boolean-input/boolean-input.js';
-export * from './components/breadcrumbs/breadcrumbs.js';
-export * from './components/checkbox/checkbox.js';
-export * from './components/color-area/color-area.js';
-export * from './components/color-slider/color-slider.js';
-export * from './components/color-swatch/color-swatch.js';
-export * from './components/form/form.js';
-export * from './components/form-layout-item/form-layout-item.js';
-export * from './components/form-validation-message/form-validation-message.js';
-export * from './components/keyboard-shortcut/keyboard-shortcut.js';
-export * from './components/loader/loader.js';
-export * from './components/loader-bar/loader-bar.js';
-export * from './components/loader-circle/loader-circle.js';
-export * from './components/modal/modal.js';
-export * from './components/popover-container/popover-container.js';
-export * from './components/progress-bar/progress-bar.js';
-export * from './components/radio/radio.js';
-export * from './components/range-slider/range-slider.js';
-export * from './components/responsive-container/responsive-container.js';
-export * from './components/scroll-container/scroll-container.js';
-export * from './components/select/select.js';
-export * from './components/slider/slider.js';
-export * from './components/symbol-drag-handle/symbol-drag-handle.js';
-export * from './components/symbol-expand/symbol-expand.js';
-export * from './components/symbol-file/symbol-file.js';
-export * from './components/symbol-folder/symbol-folder.js';
-export * from './components/symbol-lock/symbol-lock.js';
-export * from './components/symbol-more/symbol-more.js';
-export * from './components/symbol-sort/symbol-sort.js';
-export * from './components/tag/tag.js';
-export * from './components/textarea/textarea.js';
-export * from './components/toggle/toggle.js';
-export * from './components/visually-hidden/visually-hidden.js';
-export * from './components/box/box.js';
-export * from './components/card/card.js';
-export * from './components/avatar-group/avatar-group.js';
-export * from './components/button-group/button-group.js';
-export * from './components/button-inline-create/button-inline-create.js';
-export * from './components/button-copy-text/button-copy-text.js';
-export * from './components/color-swatches/color-swatches.js';
-export * from './components/combobox-list/combobox-list.js';
-export * from './components/menu-item/menu-item.js';
-export * from './components/ref/ref.js';
-export * from './components/symbol-file-dropzone/symbol-file-dropzone.js';
-export * from './components/tabs/tabs.js';
-export * from './components/toast-notification/toast-notification.js';
-export * from './components/card-block-type/card-block-type.js';
-export * from './components/card-content-node/card-content-node.js';
-export * from './components/card-media/card-media.js';
-export * from './components/card-user/card-user.js';
-export * from './components/ref-list/ref-list.js';
-export * from './components/ref-node/ref-node.js';
-export * from './components/symbol-file-thumbnail/symbol-file-thumbnail.js';
-export * from './components/toast-notification-container/toast-notification-container.js';
-export * from './components/toast-notification-layout/toast-notification-layout.js';
-export * from './components/input-lock/input-lock.js';
-export * from './components/pagination/pagination.js';
-export * from './components/ref-node-data-type/ref-node-data-type.js';
-export * from './components/ref-node-document-type/ref-node-document-type.js';
-export * from './components/ref-node-form/ref-node-form.js';
-export * from './components/ref-node-member/ref-node-member.js';
-export * from './components/ref-node-package/ref-node-package.js';
-export * from './components/ref-node-user/ref-node-user.js';
-export * from './components/file-dropzone/file-dropzone.js';
-export * from './components/file-preview/file-preview.js';
-export * from './components/input-file/input-file.js';
-export * from './components/combobox/combobox.js';
-export * from './components/color-picker/color-picker.js';
+export * from './components/index.js';

package/dist/internal/mixins/LabelMixin.js

@@ -15,9 +15,22 @@ const LabelMixin = (labelSlotName, superClass) => {
       super(...arguments);
       this._labelSlotHasContent = false;
     }
+    connectedCallback() {
+      super.connectedCallback();
+      this._ariaObserver = new MutationObserver(() => this.requestUpdate());
+      this._ariaObserver.observe(this, {
+        attributes: true,
+        attributeFilter: ["aria-label", "aria-labelledby"]
+      });
+    }
+    disconnectedCallback() {
+      super.disconnectedCallback();
+      this._ariaObserver?.disconnect();
+      this._ariaObserver = void 0;
+    }
     firstUpdated(_changedProperties) {
       super.firstUpdated(_changedProperties);
-      if (!this.label) {
+      if (!this.label && !this.getAttribute("aria-label") && !this.getAttribute("aria-labelledby")) {
         console.warn(this.tagName + " needs a `label`", this);
       }
     }

package/dist/internal/mixins/LabelMixin.js.map

@@ -1 +1 @@
-{"version":3,"file":"LabelMixin.js","sources":["../../../src/internal/mixins/LabelMixin.ts"],"sourcesContent":["import type { LitElement, TemplateResult } from 'lit';\nimport { html } from 'lit';\nimport { property, state } from 'lit/decorators.js';\n\ntype Constructor<T = {}> = new (...args: any[]) => T;\n\nexport declare class UUILabelMixinInterface {\n  /**\n   * Label to be used for aria-label and potentially as visual label for some components\n   * @type {string}\n   * @prop\n   * @attr\n   */\n  label: string;\n  protected renderLabel(): TemplateResult;\n}\n\n/**\n * This mixin provides label functionality to other components. In the mixed component the label can be provided either via reactive label property, or through slot that this mixin contains. You can style the label template through .label selector.\n *\n * @param {string} labelSlotName - Name that will be assigned for the label slot\n * @param {Object} superClass - superclass to be extended.\n * @mixin\n */\nexport const LabelMixin = <T extends Constructor<LitElement>>(\n  labelSlotName: string | null,\n  superClass: T,\n) => {\n  /**\n   * Label mixin class containing the label functionality.\n   */\n  class UUILabelMixinClass extends superClass {\n    /**\n     * Label to be used for aria-label and potentially as visual label for some components\n     * @type {string}\n     * @attr\n     */\n    @property({ type: String })\n    public label!: string;\n\n    firstUpdated(_changedProperties: Map<string | number | symbol, unknown>) {\n      super.firstUpdated(_changedProperties);\n      if (!this.label) {\n        console.warn(this.tagName + ' needs a `label`', this);\n      }\n    }\n\n    @state()\n    private _labelSlotHasContent = false;\n\n    private labelSlotChanged(e: Event): void {\n      this._labelSlotHasContent =\n        (e.target as HTMLSlotElement).assignedNodes({ flatten: true }).length >\n        0;\n    }\n\n    /**\n     * Call in the mixed element to render the label template. It contains a slot. This is optional.\n     * @method renderLabel\n     * @returns {TemplateResult}\n     */\n    protected renderLabel() {\n      return html`\n        ${this._labelSlotHasContent === false\n          ? html`<span class=\"label\">${this.label}</span>`\n          : ''}\n        <slot\n          class=\"label\"\n          style=${this._labelSlotHasContent ? '' : 'display: none'}\n          name=${labelSlotName || ''}\n          @slotchange=${this.labelSlotChanged}></slot>\n      `;\n    }\n  }\n  return UUILabelMixinClass as unknown as Constructor<UUILabelMixinInterface> &\n    T;\n};\n"],"names":[],"mappings":";;;;;;;;;;;AAwBO,MAAM,aAAa,CACxB,eACA,eACG;AAAA,EAIH,MAAM,2BAA2B,WAAW;AAAA,IAA5C,cAAA;AAAA,YAAA,GAAA,SAAA;AAiBE,WAAQ,uBAAuB;AAAA,IAAA;AAAA,IAR/B,aAAa,oBAA4D;AACvE,YAAM,aAAa,kBAAkB;AACrC,UAAI,CAAC,KAAK,OAAO;AACf,gBAAQ,KAAK,KAAK,UAAU,oBAAoB,IAAI;AAAA,MACtD;AAAA,IACF;AAAA,IAKQ,iBAAiB,GAAgB;AACvC,WAAK,uBACF,EAAE,OAA2B,cAAc,EAAE,SAAS,KAAA,CAAM,EAAE,SAC/D;AAAA,IACJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOU,cAAc;AACtB,aAAO;AAAA,UACH,KAAK,yBAAyB,QAC5B,2BAA2B,KAAK,KAAK,YACrC,EAAE;AAAA;AAAA;AAAA,kBAGI,KAAK,uBAAuB,KAAK,eAAe;AAAA,iBACjD,iBAAiB,EAAE;AAAA,wBACZ,KAAK,gBAAgB;AAAA;AAAA,IAEzC;AAAA,EAAA;AAlCO,kBAAA;AAAA,IADN,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,EAAA,GANtB,mBAOG,WAAA,OAAA;AAUC,kBAAA;AAAA,IADP,MAAA;AAAA,EAAM,GAhBH,mBAiBI,WAAA,sBAAA;AA0BV,SAAO;AAET;"}
+{"version":3,"file":"LabelMixin.js","sources":["../../../src/internal/mixins/LabelMixin.ts"],"sourcesContent":["import type { LitElement, TemplateResult } from 'lit';\nimport { html } from 'lit';\nimport { property, state } from 'lit/decorators.js';\n\ntype Constructor<T = {}> = new (...args: any[]) => T;\n\nexport declare class UUILabelMixinInterface {\n  /**\n   * Label to be used for aria-label and potentially as visual label for some components\n   * @type {string}\n   * @prop\n   * @attr\n   */\n  label: string;\n  protected renderLabel(): TemplateResult;\n}\n\n/**\n * This mixin provides label functionality to other components. In the mixed component the label can be provided either via reactive label property, or through slot that this mixin contains. You can style the label template through .label selector.\n *\n * @param {string} labelSlotName - Name that will be assigned for the label slot\n * @param {Object} superClass - superclass to be extended.\n * @mixin\n */\nexport const LabelMixin = <T extends Constructor<LitElement>>(\n  labelSlotName: string | null,\n  superClass: T,\n) => {\n  /**\n   * Label mixin class containing the label functionality.\n   */\n  class UUILabelMixinClass extends superClass {\n    /**\n     * Label to be used for aria-label and potentially as visual label for some components\n     * @type {string}\n     * @attr\n     */\n    @property({ type: String })\n    public label!: string;\n\n    private _ariaObserver: MutationObserver | undefined;\n\n    connectedCallback() {\n      super.connectedCallback();\n      this._ariaObserver = new MutationObserver(() => this.requestUpdate());\n      this._ariaObserver.observe(this, {\n        attributes: true,\n        attributeFilter: ['aria-label', 'aria-labelledby'],\n      });\n    }\n\n    disconnectedCallback() {\n      super.disconnectedCallback();\n      this._ariaObserver?.disconnect();\n      this._ariaObserver = undefined;\n    }\n\n    firstUpdated(_changedProperties: Map<string | number | symbol, unknown>) {\n      super.firstUpdated(_changedProperties);\n      if (\n        !this.label &&\n        !this.getAttribute('aria-label') &&\n        !this.getAttribute('aria-labelledby')\n      ) {\n        console.warn(this.tagName + ' needs a `label`', this);\n      }\n    }\n\n    @state()\n    private _labelSlotHasContent = false;\n\n    private labelSlotChanged(e: Event): void {\n      this._labelSlotHasContent =\n        (e.target as HTMLSlotElement).assignedNodes({ flatten: true }).length >\n        0;\n    }\n\n    /**\n     * Call in the mixed element to render the label template. It contains a slot. This is optional.\n     * @method renderLabel\n     * @returns {TemplateResult}\n     */\n    protected renderLabel() {\n      return html`\n        ${this._labelSlotHasContent === false\n          ? html`<span class=\"label\">${this.label}</span>`\n          : ''}\n        <slot\n          class=\"label\"\n          style=${this._labelSlotHasContent ? '' : 'display: none'}\n          name=${labelSlotName || ''}\n          @slotchange=${this.labelSlotChanged}></slot>\n      `;\n    }\n  }\n  return UUILabelMixinClass as unknown as Constructor<UUILabelMixinInterface> &\n    T;\n};\n"],"names":[],"mappings":";;;;;;;;;;;AAwBO,MAAM,aAAa,CACxB,eACA,eACG;AAAA,EAIH,MAAM,2BAA2B,WAAW;AAAA,IAA5C,cAAA;AAAA,YAAA,GAAA,SAAA;AAsCE,WAAQ,uBAAuB;AAAA,IAAA;AAAA,IA3B/B,oBAAoB;AAClB,YAAM,kBAAA;AACN,WAAK,gBAAgB,IAAI,iBAAiB,MAAM,KAAK,eAAe;AACpE,WAAK,cAAc,QAAQ,MAAM;AAAA,QAC/B,YAAY;AAAA,QACZ,iBAAiB,CAAC,cAAc,iBAAiB;AAAA,MAAA,CAClD;AAAA,IACH;AAAA,IAEA,uBAAuB;AACrB,YAAM,qBAAA;AACN,WAAK,eAAe,WAAA;AACpB,WAAK,gBAAgB;AAAA,IACvB;AAAA,IAEA,aAAa,oBAA4D;AACvE,YAAM,aAAa,kBAAkB;AACrC,UACE,CAAC,KAAK,SACN,CAAC,KAAK,aAAa,YAAY,KAC/B,CAAC,KAAK,aAAa,iBAAiB,GACpC;AACA,gBAAQ,KAAK,KAAK,UAAU,oBAAoB,IAAI;AAAA,MACtD;AAAA,IACF;AAAA,IAKQ,iBAAiB,GAAgB;AACvC,WAAK,uBACF,EAAE,OAA2B,cAAc,EAAE,SAAS,KAAA,CAAM,EAAE,SAC/D;AAAA,IACJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOU,cAAc;AACtB,aAAO;AAAA,UACH,KAAK,yBAAyB,QAC5B,2BAA2B,KAAK,KAAK,YACrC,EAAE;AAAA;AAAA;AAAA,kBAGI,KAAK,uBAAuB,KAAK,eAAe;AAAA,iBACjD,iBAAiB,EAAE;AAAA,wBACZ,KAAK,gBAAgB;AAAA;AAAA,IAEzC;AAAA,EAAA;AAvDO,kBAAA;AAAA,IADN,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,EAAA,GANtB,mBAOG,WAAA,OAAA;AA+BC,kBAAA;AAAA,IADP,MAAA;AAAA,EAAM,GArCH,mBAsCI,WAAA,sBAAA;AA0BV,SAAO;AAET;"}

package/dist/internal/mixins/SelectOnlyMixin.d.ts

@@ -1,4 +1,4 @@
-import { UUISelectableMixinInterface } from './SelectableMixin.js';
+import type { UUISelectableMixinInterface } from './SelectableMixin.js';
 type Constructor<T = {}> = new (...args: any[]) => T;
 export declare class UUISelectOnlyMixinInterface extends UUISelectableMixinInterface {
     selectOnly: boolean;

package/dist/internal/mixins/SelectOnlyMixin.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectOnlyMixin.js","sources":["../../../src/internal/mixins/SelectOnlyMixin.ts"],"sourcesContent":["import { property } from 'lit/decorators.js';\nimport { UUISelectableMixinInterface } from './SelectableMixin.js';\n\ntype Constructor<T = {}> = new (...args: any[]) => T;\n\nexport declare class UUISelectOnlyMixinInterface extends UUISelectableMixinInterface {\n  selectOnly: boolean;\n}\n\n/**\n * This mixin partly provides the select-only functionality.\n * Each component still need to implement its own code for disabling interaction when select only is active.\n *\n * @param {Object} superClass - superclass to be extended.\n * @mixin\n */\nexport const SelectOnlyMixin = <\n  T extends Constructor<UUISelectableMixinInterface>,\n>(\n  superClass: T,\n) => {\n  class UUISelectOnlyMixinClass extends superClass {\n    private _selectOnly = false;\n\n    /**\n     * Enforce selection interaction and prevent all other interactions, set this when the UI is turned into Selection-Mode.\n     * @attr\n     * @type boolean\n     */\n    @property({ type: Boolean, reflect: true, attribute: 'select-only' })\n    get selectOnly() {\n      return this._selectOnly;\n    }\n    set selectOnly(newVal) {\n      const oldVal = this._selectOnly;\n      this._selectOnly = newVal;\n      this.requestUpdate('selectOnly', oldVal);\n    }\n  }\n  // prettier-ignore\n  return (UUISelectOnlyMixinClass as unknown) as Constructor<UUISelectOnlyMixinInterface> & T;\n};\n"],"names":[],"mappings":";;;;;;;;;;;AAgBO,MAAM,kBAAkB,CAG7B,eACG;AAAA,EACH,MAAM,gCAAgC,WAAW;AAAA,IAAjD,cAAA;AAAA,YAAA,GAAA,SAAA;AACE,WAAQ,cAAc;AAAA,IAAA;AAAA,IAQtB,IAAI,aAAa;AACf,aAAO,KAAK;AAAA,IACd;AAAA,IACA,IAAI,WAAW,QAAQ;AACrB,YAAM,SAAS,KAAK;AACpB,WAAK,cAAc;AACnB,WAAK,cAAc,cAAc,MAAM;AAAA,IACzC;AAAA,EAAA;AAPI,kBAAA;AAAA,IADH,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM,WAAW,eAAe;AAAA,EAAA,GARhE,wBASA,WAAA,YAAA;AAUN,SAAQ;AACV;"}
+{"version":3,"file":"SelectOnlyMixin.js","sources":["../../../src/internal/mixins/SelectOnlyMixin.ts"],"sourcesContent":["import { property } from 'lit/decorators.js';\nimport type { UUISelectableMixinInterface } from './SelectableMixin.js';\n\ntype Constructor<T = {}> = new (...args: any[]) => T;\n\nexport declare class UUISelectOnlyMixinInterface extends UUISelectableMixinInterface {\n  selectOnly: boolean;\n}\n\n/**\n * This mixin partly provides the select-only functionality.\n * Each component still need to implement its own code for disabling interaction when select only is active.\n *\n * @param {Object} superClass - superclass to be extended.\n * @mixin\n */\nexport const SelectOnlyMixin = <\n  T extends Constructor<UUISelectableMixinInterface>,\n>(\n  superClass: T,\n) => {\n  class UUISelectOnlyMixinClass extends superClass {\n    private _selectOnly = false;\n\n    /**\n     * Enforce selection interaction and prevent all other interactions, set this when the UI is turned into Selection-Mode.\n     * @attr\n     * @type boolean\n     */\n    @property({ type: Boolean, reflect: true, attribute: 'select-only' })\n    get selectOnly() {\n      return this._selectOnly;\n    }\n    set selectOnly(newVal) {\n      const oldVal = this._selectOnly;\n      this._selectOnly = newVal;\n      this.requestUpdate('selectOnly', oldVal);\n    }\n  }\n  // prettier-ignore\n  return (UUISelectOnlyMixinClass as unknown) as Constructor<UUISelectOnlyMixinInterface> & T;\n};\n"],"names":[],"mappings":";;;;;;;;;;;AAgBO,MAAM,kBAAkB,CAG7B,eACG;AAAA,EACH,MAAM,gCAAgC,WAAW;AAAA,IAAjD,cAAA;AAAA,YAAA,GAAA,SAAA;AACE,WAAQ,cAAc;AAAA,IAAA;AAAA,IAQtB,IAAI,aAAa;AACf,aAAO,KAAK;AAAA,IACd;AAAA,IACA,IAAI,WAAW,QAAQ;AACrB,YAAM,SAAS,KAAK;AACpB,WAAK,cAAc;AACnB,WAAK,cAAc,cAAc,MAAM;AAAA,IACzC;AAAA,EAAA;AAPI,kBAAA;AAAA,IADH,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM,WAAW,eAAe;AAAA,EAAA,GARhE,wBASA,WAAA,YAAA;AAUN,SAAQ;AACV;"}

package/dist/package.json.js

@@ -1,4 +1,4 @@
-const version = "2.0.0-alpha.1";
+const version = "2.0.0-rc.1";
 export {
   version
 };

package/dist/themes/dark.css

@@ -1 +1 @@
-@font-face{font-family:Lato;src:local("LatoLatin Black"),local("LatoLatin-Black"),url(../assets/fonts/LatoLatin-Black.woff2) format("woff2");font-style:normal;font-display:swap;font-weight:900;text-rendering:optimizeLegibility}@font-face{font-family:Lato;src:local("LatoLatin BlackItalic"),local("LatoLatin-BlackItalic"),url(../assets/fonts/LatoLatin-BlackItalic.woff2) format("woff2");font-style:italic;font-weight:900;font-display:swap;text-rendering:optimizeLegibility}@font-face{font-family:Lato;src:local("LatoLatin Bold"),local("LatoLatin-Bold"),url(../assets/fonts/LatoLatin-Bold.woff2) format("woff2");font-style:normal;font-weight:700;font-display:swap;text-rendering:optimizeLegibility}@font-face{font-family:Lato;src:local("LatoLatin BoldItalic"),local("LatoLatin-BoldItalic"),url(../assets/fonts/LatoLatin-BoldItalic.woff2) format("woff2");font-style:italic;font-weight:700;font-display:swap;text-rendering:optimizeLegibility}@font-face{font-family:Lato;src:local("LatoLatin Italic"),local("LatoLatin-Italic"),url(../assets/fonts/LatoLatin-Italic.woff2) format("woff2");font-style:italic;font-weight:400;font-display:swap;text-rendering:optimizeLegibility}@font-face{font-family:Lato;src:local("LatoLatin Regular"),local("LatoLatin-Regular"),url(../assets/fonts/LatoLatin-Regular.woff2) format("woff2");font-style:normal;font-weight:400;font-display:swap;text-rendering:optimizeLegibility}@font-face{font-family:Lato;src:local("LatoLatin Light"),local("LatoLatin-Light"),url(../assets/fonts/LatoLatin-Light.woff2) format("woff2");font-style:normal;font-weight:300;font-display:swap;text-rendering:optimizeLegibility}@font-face{font-family:Lato;src:local("LatoLatin LightItalic"),local("LatoLatin-LightItalic"),url(../assets/fonts/LatoLatin-LightItalic.woff2) format("woff2");font-style:italic;font-weight:300;font-display:swap;text-rendering:optimizeLegibility}:root{--uui-size-1: 3px;--uui-size-2: 6px;--uui-size-3: 9px;--uui-size-4: 12px;--uui-size-5: 15px;--uui-size-6: 18px;--uui-size-7: 21px;--uui-size-8: 24px;--uui-size-9: 27px;--uui-size-10: 30px;--uui-size-11: 33px;--uui-size-12: 36px;--uui-size-14: 42px;--uui-size-16: 48px;--uui-size-20: 60px;--uui-size-22: 66px;--uui-size-24: 72px;--uui-size-28: 84px;--uui-size-32: 96px;--uui-size-36: 108px;--uui-size-40: 120px;--uui-size-44: 132px;--uui-size-46: 138px;--uui-size-48: 144px;--uui-size-52: 156px;--uui-size-56: 168px;--uui-size-60: 180px;--uui-size-64: 192px;--uui-size-72: 216px;--uui-size-80: 240px;--uui-size-96: 288px;--uui-size-100: 300px;--uui-size-space-1: 3px;--uui-size-space-2: 6px;--uui-size-space-3: 9px;--uui-size-space-4: 12px;--uui-size-space-5: 18px;--uui-size-space-6: 24px;--uui-size-layout-1: 24px;--uui-size-layout-2: 30px;--uui-size-layout-3: 42px;--uui-size-layout-4: 66px;--uui-size-layout-5: 96px;--uui-size-layout-6: 138px;--uui-border-radius: var(--uui-size-3);--uui-border-radius-1: var(--uui-size-2);--uui-border-radius-2: var(--uui-size-3);--uui-border-radius-3: var(--uui-size-5);--uui-type-default-size: 14px;--uui-type-small-size: 12px;--uui-type-h1-size: 60px;--uui-type-h2-size: 42px;--uui-type-h3-size: 30px;--uui-type-h4-size: 21px;--uui-type-h5-size: var(--uui-type-default-size);--uui-type-h6-size: var(--uui-type-small-size)}:root{--uui-shadow-depth-1: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);--uui-shadow-depth-2: 0 3px 6px rgba(0, 0, 0, .16), 0 3px 6px rgba(0, 0, 0, .23);--uui-shadow-depth-3: 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23);--uui-shadow-depth-4: 0 14px 28px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .22);--uui-shadow-depth-5: 0 19px 38px rgba(0, 0, 0, .3), 0 15px 12px rgba(0, 0, 0, .22)}:root{--uui-palette-deep-saffron: #f79c37;--uui-palette-deep-saffron-light: rgb(249, 181, 103);--uui-palette-deep-saffron-dark: rgb(222, 145, 56);--uui-palette-deep-saffron-dimmed: rgb(166, 150, 133);--uui-palette-sunglow: #fad634;--uui-palette-sunglow-light: rgb(251, 224, 101);--uui-palette-sunglow-dark: rgb(224, 193, 51);--uui-palette-sunglow-dimmed: rgb(166, 160, 133);--uui-palette-spanish-pink: #f5c1bc;--uui-palette-spanish-pink-light: rgb(248, 214, 211);--uui-palette-spanish-pink-dark: rgb(232, 192, 189);--uui-palette-spanish-pink-dimmed: rgb(219, 212, 212);--uui-palette-gunmetal: #162335;--uui-palette-gunmetal-light: rgb(35, 55, 83);--uui-palette-gunmetal-dark: rgb(23, 27, 33);--uui-palette-gunmetal-dimmed: rgb(54, 54, 54);--uui-palette-space-cadet: #1b264f;--uui-palette-space-cadet-light: rgb(38, 53, 110);--uui-palette-space-cadet-dark: rgb(28, 35, 59);--uui-palette-space-cadet-dimmed: rgb(106, 117, 154);--uui-palette-violet-blue: #283a97;--uui-palette-violet-blue-light: #2d42ab;--uui-palette-violet-blue-dark: #25358b;--uui-palette-violet-blue-dimmed: #2c3669;--uui-palette-malibu: #3879ff;--uui-palette-malibu-light: rgb(97, 150, 255);--uui-palette-malibu-dark: rgb(56, 116, 235);--uui-palette-malibu-dimmed: rgb(115, 120, 130);--uui-palette-maroon-flush: #c31d4c;--uui-palette-maroon-flush-light: rgb(223, 42, 93);--uui-palette-maroon-flush-dark: rgb(174, 30, 71);--uui-palette-maroon-flush-dimmed: rgb(122, 98, 104);--uui-palette-jungle-green: #2bc37c;--uui-palette-jungle-green-light: rgb(58, 212, 140);--uui-palette-jungle-green-dark: rgb(43, 179, 115);--uui-palette-jungle-green-dimmed: rgb(102, 135, 120);--uui-palette-forest-green: #0b8152;--uui-palette-forest-green-light: rgb(13, 155, 98);--uui-palette-forest-green-dark: rgb(10, 115, 73);--uui-palette-forest-green-dimmed: rgb(46, 89, 72);--uui-palette-cocoa-black: #191715;--uui-palette-cocoa-black-light: rgb(39, 36, 32);--uui-palette-cocoa-black-dark: rgb(20, 20, 20);--uui-palette-cocoa-black-dimmed: rgb(48, 48, 48);--uui-palette-dune-black: #2e2b29;--uui-palette-dune-black-light: rgb(57, 53, 50);--uui-palette-dune-black-dark: rgb(38, 38, 38);--uui-palette-dune-black-dimmed: rgb(64, 64, 64);--uui-palette-cocoa-brown: #332a24;--uui-palette-cocoa-brown-light: rgb(66, 54, 47);--uui-palette-cocoa-brown-dark: rgb(38, 37, 36);--uui-palette-cocoa-brown-dimmed: rgb(43, 43, 43);--uui-palette-chamoisee: #9d8057;--uui-palette-chamoisee-light: rgb(175, 148, 110);--uui-palette-chamoisee-dark: rgb(138, 116, 87);--uui-palette-chamoisee-dimmed: rgb(115, 113, 110);--uui-palette-timberwolf: #e2dad4;--uui-palette-timberwolf-light: rgb(243, 239, 237);--uui-palette-timberwolf-dark: rgb(208, 208, 208);--uui-palette-timberwolf-dimmed: rgb(207, 207, 207);--uui-palette-gravel: #d8d7d9;--uui-palette-gravel-light: rgb(237, 237, 238);--uui-palette-gravel-dark: rgb(200, 200, 200);--uui-palette-gravel-dimmed: rgb(204, 204, 204);--uui-palette-sand: #f6f6f7;--uui-palette-sand-light: rgb(255, 255, 255);--uui-palette-sand-dark: rgb(226, 226, 226);--uui-palette-sand-dimmed: rgb(231, 231, 231);--uui-palette-white: #fefefe;--uui-palette-white-light: rgb(255, 255, 255);--uui-palette-white-dark: rgb(250, 250, 250);--uui-palette-white-dimmed: rgb(228, 228, 228);--uui-palette-black: #060606;--uui-palette-black-light: rgb(26, 26, 26);--uui-palette-black-dark: rgb(5, 5, 5);--uui-palette-black-dimmed: rgb(36, 36, 36);--uui-palette-grey: #c4c4c4;--uui-palette-grey-light: rgb(222, 222, 222);--uui-palette-grey-dark: rgb(179, 179, 179);--uui-palette-grey-dimmed: rgb(189, 189, 189);--uui-palette-dusty-grey: #9b9b9b;--uui-palette-dusty-grey-light: rgb(176, 176, 176);--uui-palette-dusty-grey-dark: rgb(141, 141, 141);--uui-palette-dusty-grey-dimmed: rgb(186, 186, 186);--uui-palette-mine-grey: #3e3e3e;--uui-palette-mine-grey-light: rgb(82, 82, 82);--uui-palette-mine-grey-dark: rgb(56, 56, 56);--uui-palette-mine-grey-dimmed: rgb(87, 87, 87)}:root{--uui-font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif}.uui-font{font-family:Lato,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:14px;line-height:calc(var(--uui-size-2) * 4);-webkit-font-smoothing:antialiased}.uui-h1,.uui-h2,.uui-h3,.uui-h4,.uui-h5,.uui-a,.uui-p,.uui-p-lead,.uui-small,.uui-quoteblock,.uui-ul,.uui-ol,.uui-text{font-family:Lato,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:14px;line-height:21px;-webkit-font-smoothing:antialiased}.uui-text h1,.uui-h1.uui-h1{font-size:var(--uui-type-h1-size);line-height:var(--uui-size-layout-4);font-weight:400;margin-left:-5px;margin-top:var(--uui-size-layout-1);margin-bottom:var(--uui-size-layout-1)}.uui-text p+h1,.uui-text p+.uui-h1{margin-top:var(--uui-size-layout-4)}.uui-text h1.--no-top-margin,.uui-text h1:first-child,.uui-h1.--no-top-margin,.uui-h1:first-child{margin-top:0}.uui-text h2,.uui-h2.uui-h2{font-size:var(--uui-type-h2-size);line-height:var(--uui-size-layout-3);font-weight:400;margin-left:-3px;margin-top:var(--uui-size-layout-1);margin-bottom:var(--uui-size-layout-1)}.uui-text p+h2,.uui-text p+.uui-h2{margin-top:var(--uui-size-layout-3)}.uui-text h2.--no-top-margin,.uui-text h2:first-child,.uui-h2.--no-top-margin,.uui-h2:first-child{margin-top:0}.uui-text h3,.uui-h3.uui-h3{font-size:var(--uui-type-h3-size);line-height:var(--uui-size-large);font-weight:400;margin-left:-2px;margin-top:var(--uui-size-layout-1);margin-bottom:var(--uui-size-layout-1)}.uui-text h3.--no-top-margin,.uui-text h3:first-child,.uui-h3.--no-top-margin,.uui-h3:first-child{margin-top:0}.uui-text h4,.uui-h4.uui-h4{font-size:var(--uui-type-h4-size);line-height:21px;font-weight:400;margin-left:-1px;margin-top:var(--uui-size-layout-1);margin-bottom:var(--uui-size-layout-1)}.uui-text h4.--no-top-margin,.uui-text h4:first-child,.uui-h4.--no-top-margin,.uui-h4:first-child{margin-top:0}.uui-text h5,.uui-h5.uui-h5{font-size:var(--uui-type-h5-size);line-height:inherit;font-weight:400;margin-left:0;margin-top:var(--uui-size-layout-1);margin-bottom:0}.uui-text h5.--no-top-margin,.uui-text h5:first-child,.uui-h5.--no-top-margin,.uui-h5:first-child{margin-top:0}.uui-p,.uui-text p{margin-top:var(--uui-size-layout-1);margin-bottom:var(--uui-size-layout-1)}.uui-p-lead,.uui-text p.uui-lead{font-size:var(--uui-size-6);line-height:var(--uui-size-8)}.uui-a,.uui-text a,.uui-a:link,.uui-a:active .uui-text a:link,.uui-text a:active{color:var(--uui-color-interactive)}.uui-a:hover,.uui-text a:hover{color:var(--uui-color-interactive-emphasis)}.uui-small,.uui-text small{display:inline-block;font-size:var(--uui-type-small-size);line-height:18px}.uui-quoteblock,.uui-text blockquote{float:right;font-size:14px;line-height:inherit;font-weight:400;font-style:italic;margin-top:0;margin-bottom:var(--uui-size-layout-1);margin-right:-.035em;max-width:16em;quotes:"“" "”" "‘" "’"}.uui-quoteblock:before,.uui-text blockquote:before{content:open-quote;margin-left:-.4em;margin-right:.08em;vertical-align:bottom;font-weight:400;font-size:2em}.uui-quoteblock:after,.uui-text blockquote:after{content:close-quote;margin-left:.04em;margin-right:-.4em;vertical-align:bottom;font-weight:400;font-size:2em;margin-bottom:-2px;display:inline-block}.uui-ul,.uui-text ul{list-style-type:square;padding-left:var(--uui-size-layout-1);margin-top:var(--uui-size-layout-1);margin-bottom:var(--uui-size-layout-1)}.uui-ol,.uui-text ol{padding-left:var(--uui-size-layout-1);margin-top:var(--uui-size-layout-1);margin-bottom:var(--uui-size-layout-1)}:root{--uui-color-selected: #316dca;--uui-color-selected-emphasis: #3e79d0;--uui-color-selected-standalone: #5b8dd7;--uui-color-selected-contrast: #eeeeef;--uui-color-current: #316dca;--uui-color-current-emphasis: #3e79d0;--uui-color-current-standalone: #5b8dd7;--uui-color-current-contrast: #eeeeef;--uui-color-header-surface: #21262e;--uui-color-header-contrast: #eeeeef;--uui-color-header-contrast-emphasis: #eeeeef;--uui-color-focus: #316dca;--uui-color-disabled: #434c56;--uui-color-disabled-standalone: #545d68;--uui-color-disabled-contrast: #fcfcfc4d;--uui-color-surface: #2d333b;--uui-color-surface-alt: #373e47;--uui-color-surface-emphasis: #333a42;--uui-color-background: #21262e;--uui-color-text: #eeeeef;--uui-color-text-alt: #eeeeef;--uui-color-interactive: #eeeeef;--uui-color-interactive-emphasis: #eeeeef;--uui-color-border: #434c56;--uui-color-border-standalone: #545d68;--uui-color-border-emphasis: #626e7b;--uui-color-divider: #373e47;--uui-color-divider-standalone: #434c56;--uui-color-divider-emphasis: #545d68;--uui-color-default: #316dca;--uui-color-default-emphasis: #5387d5;--uui-color-default-standalone: #eeeeef;--uui-color-default-contrast: #eeeeef;--uui-color-warning: #af7c12;--uui-color-warning-emphasis: #af7c12;--uui-color-warning-standalone: #af7c12;--uui-color-warning-contrast: #eeeeef;--uui-color-danger: #ca3b37;--uui-color-danger-emphasis: #ca3b37;--uui-color-danger-standalone: #ca3b37;--uui-color-danger-contrast: #eeeeef;--uui-color-invalid: #ca3b37;--uui-color-invalid-emphasis: #ca3b37;--uui-color-invalid-standalone: #ca3b37;--uui-color-invalid-contrast: #eeeeef;--uui-color-positive: #347d39;--uui-color-positive-emphasis: #347d39;--uui-color-positive-standalone: #347d39;--uui-color-positive-contrast: #eeeeef;--uui-color-scheme: dark}
+@font-face{font-family:Lato;src:local("LatoLatin Black"),local("LatoLatin-Black"),url(../assets/fonts/LatoLatin-Black.woff2) format("woff2");font-style:normal;font-display:swap;font-weight:900;text-rendering:optimizeLegibility}@font-face{font-family:Lato;src:local("LatoLatin BlackItalic"),local("LatoLatin-BlackItalic"),url(../assets/fonts/LatoLatin-BlackItalic.woff2) format("woff2");font-style:italic;font-weight:900;font-display:swap;text-rendering:optimizeLegibility}@font-face{font-family:Lato;src:local("LatoLatin Bold"),local("LatoLatin-Bold"),url(../assets/fonts/LatoLatin-Bold.woff2) format("woff2");font-style:normal;font-weight:700;font-display:swap;text-rendering:optimizeLegibility}@font-face{font-family:Lato;src:local("LatoLatin BoldItalic"),local("LatoLatin-BoldItalic"),url(../assets/fonts/LatoLatin-BoldItalic.woff2) format("woff2");font-style:italic;font-weight:700;font-display:swap;text-rendering:optimizeLegibility}@font-face{font-family:Lato;src:local("LatoLatin Italic"),local("LatoLatin-Italic"),url(../assets/fonts/LatoLatin-Italic.woff2) format("woff2");font-style:italic;font-weight:400;font-display:swap;text-rendering:optimizeLegibility}@font-face{font-family:Lato;src:local("LatoLatin Regular"),local("LatoLatin-Regular"),url(../assets/fonts/LatoLatin-Regular.woff2) format("woff2");font-style:normal;font-weight:400;font-display:swap;text-rendering:optimizeLegibility}@font-face{font-family:Lato;src:local("LatoLatin Light"),local("LatoLatin-Light"),url(../assets/fonts/LatoLatin-Light.woff2) format("woff2");font-style:normal;font-weight:300;font-display:swap;text-rendering:optimizeLegibility}@font-face{font-family:Lato;src:local("LatoLatin LightItalic"),local("LatoLatin-LightItalic"),url(../assets/fonts/LatoLatin-LightItalic.woff2) format("woff2");font-style:italic;font-weight:300;font-display:swap;text-rendering:optimizeLegibility}:root{--uui-size-1: 3px;--uui-size-2: 6px;--uui-size-3: 9px;--uui-size-4: 12px;--uui-size-5: 15px;--uui-size-6: 18px;--uui-size-7: 21px;--uui-size-8: 24px;--uui-size-9: 27px;--uui-size-10: 30px;--uui-size-11: 33px;--uui-size-12: 36px;--uui-size-14: 42px;--uui-size-16: 48px;--uui-size-20: 60px;--uui-size-22: 66px;--uui-size-24: 72px;--uui-size-28: 84px;--uui-size-32: 96px;--uui-size-36: 108px;--uui-size-40: 120px;--uui-size-44: 132px;--uui-size-46: 138px;--uui-size-48: 144px;--uui-size-52: 156px;--uui-size-56: 168px;--uui-size-60: 180px;--uui-size-64: 192px;--uui-size-72: 216px;--uui-size-80: 240px;--uui-size-96: 288px;--uui-size-100: 300px;--uui-size-space-1: 3px;--uui-size-space-2: 6px;--uui-size-space-3: 9px;--uui-size-space-4: 12px;--uui-size-space-5: 18px;--uui-size-space-6: 24px;--uui-size-layout-1: 24px;--uui-size-layout-2: 30px;--uui-size-layout-3: 42px;--uui-size-layout-4: 66px;--uui-size-layout-5: 96px;--uui-size-layout-6: 138px;--uui-border-radius: var(--uui-size-3);--uui-border-radius-1: var(--uui-size-2);--uui-border-radius-2: var(--uui-size-3);--uui-border-radius-3: var(--uui-size-5);--uui-type-default-size: 14px;--uui-type-small-size: 12px;--uui-type-h1-size: 60px;--uui-type-h2-size: 42px;--uui-type-h3-size: 30px;--uui-type-h4-size: 21px;--uui-type-h5-size: var(--uui-type-default-size);--uui-type-h6-size: var(--uui-type-small-size)}:root{--uui-shadow-depth-1: rgba(0, 0, 0, .1) 0px 1px 6px 0, rgba(0, 0, 0, .1) 0 0 1px 0;--uui-shadow-depth-2: rgba(0, 0, 0, .1) 0px 3px 12px 0, rgba(0, 0, 0, .1) 0 0 1px 0;--uui-shadow-depth-3: rgba(0, 0, 0, .1) 0px 6px 16px 0, rgba(0, 0, 0, .1) 0 0 2px 0;--uui-shadow-depth-4: rgba(0, 0, 0, .2) 0px 9px 20px 0, rgba(0, 0, 0, .18) 0 0 3px 0;--uui-shadow-depth-5: rgba(0, 0, 0, .3) 0px 12px 24px 0, rgba(0, 0, 0, .1) 0px 6px 16px 0, rgba(0, 0, 0, .1) 0 0 2px 0}:root{--uui-palette-deep-saffron: #f79c37;--uui-palette-deep-saffron-light: rgb(249, 181, 103);--uui-palette-deep-saffron-dark: rgb(222, 145, 56);--uui-palette-deep-saffron-dimmed: rgb(166, 150, 133);--uui-palette-sunglow: #fad634;--uui-palette-sunglow-light: rgb(251, 224, 101);--uui-palette-sunglow-dark: #a17700;--uui-palette-sunglow-dimmed: rgb(166, 160, 133);--uui-palette-spanish-pink: #ffe8e6;--uui-palette-spanish-pink-light: #ffeceb;--uui-palette-spanish-pink-dark: #ffe2e0;--uui-palette-spanish-pink-dimmed: #fae6e5;--uui-palette-gunmetal: #162335;--uui-palette-gunmetal-light: rgb(35, 55, 83);--uui-palette-gunmetal-dark: rgb(23, 27, 33);--uui-palette-gunmetal-dimmed: rgb(54, 54, 54);--uui-palette-space-cadet: #1b264f;--uui-palette-space-cadet-light: rgb(38, 53, 110);--uui-palette-space-cadet-dark: rgb(28, 35, 59);--uui-palette-space-cadet-dimmed: rgb(106, 117, 154);--uui-palette-violet-blue: #283a97;--uui-palette-violet-blue-light: #2d42ab;--uui-palette-violet-blue-dark: #25358b;--uui-palette-violet-blue-dimmed: #2c3669;--uui-palette-malibu: #3879ff;--uui-palette-malibu-light: rgb(97, 150, 255);--uui-palette-malibu-dark: rgb(56, 116, 235);--uui-palette-malibu-dimmed: rgb(115, 120, 130);--uui-palette-maroon-flush: #df2a5d;--uui-palette-maroon-flush-light: #ec275f;--uui-palette-maroon-flush-dark: rgb(174, 30, 71);--uui-palette-maroon-flush-dimmed: rgb(122, 98, 104);--uui-palette-jungle-green: #2bc37c;--uui-palette-jungle-green-light: rgb(58, 212, 140);--uui-palette-jungle-green-dark: rgb(43, 179, 115);--uui-palette-jungle-green-dimmed: rgb(102, 135, 120);--uui-palette-forest-green: #0b8152;--uui-palette-forest-green-light: rgb(13, 155, 98);--uui-palette-forest-green-dark: rgb(10, 115, 73);--uui-palette-forest-green-dimmed: rgb(46, 89, 72);--uui-palette-cocoa-black: #191715;--uui-palette-cocoa-black-light: rgb(39, 36, 32);--uui-palette-cocoa-black-dark: rgb(20, 20, 20);--uui-palette-cocoa-black-dimmed: rgb(48, 48, 48);--uui-palette-dune-black: #2e2b29;--uui-palette-dune-black-light: rgb(57, 53, 50);--uui-palette-dune-black-dark: rgb(38, 38, 38);--uui-palette-dune-black-dimmed: rgb(64, 64, 64);--uui-palette-cocoa-brown: #332a24;--uui-palette-cocoa-brown-light: rgb(66, 54, 47);--uui-palette-cocoa-brown-dark: rgb(38, 37, 36);--uui-palette-cocoa-brown-dimmed: rgb(43, 43, 43);--uui-palette-chamoisee: #9d8057;--uui-palette-chamoisee-light: rgb(175, 148, 110);--uui-palette-chamoisee-dark: rgb(138, 116, 87);--uui-palette-chamoisee-dimmed: rgb(115, 113, 110);--uui-palette-timberwolf: #e2dad4;--uui-palette-timberwolf-light: rgb(243, 239, 237);--uui-palette-timberwolf-dark: rgb(208, 208, 208);--uui-palette-timberwolf-dimmed: rgb(207, 207, 207);--uui-palette-gravel: #d8d7d9;--uui-palette-gravel-light: rgb(237, 237, 238);--uui-palette-gravel-dark: rgb(200, 200, 200);--uui-palette-gravel-dimmed: rgb(204, 204, 204);--uui-palette-sand: #f7f7f8;--uui-palette-sand-light: rgb(255, 255, 255);--uui-palette-sand-dark: rgb(226, 226, 226);--uui-palette-sand-dimmed: rgb(231, 231, 231);--uui-palette-white: #fefefe;--uui-palette-white-light: rgb(255, 255, 255);--uui-palette-white-dark: rgb(250, 250, 250);--uui-palette-white-dimmed: rgb(228, 228, 228);--uui-palette-black: #060606;--uui-palette-black-light: rgb(26, 26, 26);--uui-palette-black-dark: rgb(5, 5, 5);--uui-palette-black-dimmed: rgb(36, 36, 36);--uui-palette-grey: #c4c4c4;--uui-palette-grey-light: rgb(222, 222, 222);--uui-palette-grey-dark: rgb(179, 179, 179);--uui-palette-grey-dimmed: rgb(189, 189, 189);--uui-palette-dusty-grey: #9b9b9b;--uui-palette-dusty-grey-light: rgb(176, 176, 176);--uui-palette-dusty-grey-dark: rgb(141, 141, 141);--uui-palette-dusty-grey-dimmed: rgb(186, 186, 186);--uui-palette-mine-grey: #3e3e3e;--uui-palette-mine-grey-light: rgb(82, 82, 82);--uui-palette-mine-grey-dark: rgb(56, 56, 56);--uui-palette-mine-grey-dimmed: rgb(87, 87, 87)}:root{--uui-font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif}.uui-font{font-family:Lato,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:14px;line-height:calc(var(--uui-size-2) * 4);-webkit-font-smoothing:antialiased}.uui-h1,.uui-h2,.uui-h3,.uui-h4,.uui-h5,.uui-a,.uui-p,.uui-p-lead,.uui-small,.uui-quoteblock,.uui-ul,.uui-ol,.uui-text{font-family:Lato,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:14px;line-height:21px;-webkit-font-smoothing:antialiased}.uui-text h1,.uui-h1.uui-h1{font-size:var(--uui-type-h1-size);line-height:var(--uui-size-layout-4);font-weight:400;margin-left:-5px;margin-top:var(--uui-size-layout-1);margin-bottom:var(--uui-size-layout-1)}.uui-text p+h1,.uui-text p+.uui-h1{margin-top:var(--uui-size-layout-4)}.uui-text h1.--no-top-margin,.uui-text h1:first-child,.uui-h1.--no-top-margin,.uui-h1:first-child{margin-top:0}.uui-text h2,.uui-h2.uui-h2{font-size:var(--uui-type-h2-size);line-height:var(--uui-size-layout-3);font-weight:400;margin-left:-3px;margin-top:var(--uui-size-layout-1);margin-bottom:var(--uui-size-layout-1)}.uui-text p+h2,.uui-text p+.uui-h2{margin-top:var(--uui-size-layout-3)}.uui-text h2.--no-top-margin,.uui-text h2:first-child,.uui-h2.--no-top-margin,.uui-h2:first-child{margin-top:0}.uui-text h3,.uui-h3.uui-h3{font-size:var(--uui-type-h3-size);line-height:var(--uui-size-large);font-weight:400;margin-left:-2px;margin-top:var(--uui-size-layout-1);margin-bottom:var(--uui-size-layout-1)}.uui-text h3.--no-top-margin,.uui-text h3:first-child,.uui-h3.--no-top-margin,.uui-h3:first-child{margin-top:0}.uui-text h4,.uui-h4.uui-h4{font-size:var(--uui-type-h4-size);line-height:21px;font-weight:400;margin-left:-1px;margin-top:var(--uui-size-layout-1);margin-bottom:var(--uui-size-layout-1)}.uui-text h4.--no-top-margin,.uui-text h4:first-child,.uui-h4.--no-top-margin,.uui-h4:first-child{margin-top:0}.uui-text h5,.uui-h5.uui-h5{font-size:var(--uui-type-h5-size);line-height:inherit;font-weight:400;margin-left:0;margin-top:var(--uui-size-layout-1);margin-bottom:0}.uui-text h5.--no-top-margin,.uui-text h5:first-child,.uui-h5.--no-top-margin,.uui-h5:first-child{margin-top:0}.uui-p,.uui-text p{margin-top:var(--uui-size-layout-1);margin-bottom:var(--uui-size-layout-1)}.uui-p-lead,.uui-text p.uui-lead{font-size:var(--uui-size-6);line-height:var(--uui-size-8)}.uui-a,.uui-text a,.uui-a:link,.uui-a:active .uui-text a:link,.uui-text a:active{color:var(--uui-color-interactive)}.uui-a:hover,.uui-text a:hover{color:var(--uui-color-interactive-emphasis)}.uui-small,.uui-text small{display:inline-block;font-size:var(--uui-type-small-size);line-height:18px}.uui-quoteblock,.uui-text blockquote{float:right;font-size:14px;line-height:inherit;font-weight:400;font-style:italic;margin-top:0;margin-bottom:var(--uui-size-layout-1);margin-right:-.035em;max-width:16em;quotes:"“" "”" "‘" "’"}.uui-quoteblock:before,.uui-text blockquote:before{content:open-quote;margin-left:-.4em;margin-right:.08em;vertical-align:bottom;font-weight:400;font-size:2em}.uui-quoteblock:after,.uui-text blockquote:after{content:close-quote;margin-left:.04em;margin-right:-.4em;vertical-align:bottom;font-weight:400;font-size:2em;margin-bottom:-2px;display:inline-block}.uui-ul,.uui-text ul{list-style-type:square;padding-left:var(--uui-size-layout-1);margin-top:var(--uui-size-layout-1);margin-bottom:var(--uui-size-layout-1)}.uui-ol,.uui-text ol{padding-left:var(--uui-size-layout-1);margin-top:var(--uui-size-layout-1);margin-bottom:var(--uui-size-layout-1)}:root{--uui-color-selected: #316dca;--uui-color-selected-emphasis: #3e79d0;--uui-color-selected-standalone: #5b8dd7;--uui-color-selected-contrast: #eeeeef;--uui-color-current: #316dca;--uui-color-current-emphasis: #3e79d0;--uui-color-current-standalone: #5b8dd7;--uui-color-current-contrast: #eeeeef;--uui-color-header-surface: #21262e;--uui-color-header-contrast: #eeeeef;--uui-color-header-contrast-emphasis: #eeeeef;--uui-color-focus: #316dca;--uui-color-disabled: #434c56;--uui-color-disabled-standalone: #545d68;--uui-color-disabled-contrast: #fcfcfc4d;--uui-color-surface: #2d333b;--uui-color-surface-alt: #373e47;--uui-color-surface-emphasis: #333a42;--uui-color-background: #21262e;--uui-color-text: #eeeeef;--uui-color-text-alt: #eeeeef;--uui-color-interactive: #eeeeef;--uui-color-interactive-contrast: #21262e;--uui-color-interactive-emphasis: #eeeeef;--uui-color-border: #434c56;--uui-color-border-standalone: #545d68;--uui-color-border-emphasis: #626e7b;--uui-color-divider: #373e47;--uui-color-divider-standalone: #434c56;--uui-color-divider-emphasis: #545d68;--uui-color-default: #316dca;--uui-color-default-emphasis: #5387d5;--uui-color-default-standalone: #eeeeef;--uui-color-default-contrast: #eeeeef;--uui-color-warning: #af7c12;--uui-color-warning-emphasis: #af7c12;--uui-color-warning-standalone: #af7c12;--uui-color-warning-contrast: #eeeeef;--uui-color-danger: #ca3b37;--uui-color-danger-emphasis: #ca3b37;--uui-color-danger-standalone: #ca3b37;--uui-color-danger-contrast: #eeeeef;--uui-color-invalid: #ca3b37;--uui-color-invalid-emphasis: #ca3b37;--uui-color-invalid-standalone: #ca3b37;--uui-color-invalid-contrast: #eeeeef;--uui-color-positive: #347d39;--uui-color-positive-emphasis: #347d39;--uui-color-positive-standalone: #347d39;--uui-color-positive-contrast: #eeeeef;--uui-color-scheme: dark}

package/dist/themes/high-contrast.css

@@ -1 +1 @@
-@font-face{font-family:Lato;src:local("LatoLatin Black"),local("LatoLatin-Black"),url(../assets/fonts/LatoLatin-Black.woff2) format("woff2");font-style:normal;font-display:swap;font-weight:900;text-rendering:optimizeLegibility}@font-face{font-family:Lato;src:local("LatoLatin BlackItalic"),local("LatoLatin-BlackItalic"),url(../assets/fonts/LatoLatin-BlackItalic.woff2) format("woff2");font-style:italic;font-weight:900;font-display:swap;text-rendering:optimizeLegibility}@font-face{font-family:Lato;src:local("LatoLatin Bold"),local("LatoLatin-Bold"),url(../assets/fonts/LatoLatin-Bold.woff2) format("woff2");font-style:normal;font-weight:700;font-display:swap;text-rendering:optimizeLegibility}@font-face{font-family:Lato;src:local("LatoLatin BoldItalic"),local("LatoLatin-BoldItalic"),url(../assets/fonts/LatoLatin-BoldItalic.woff2) format("woff2");font-style:italic;font-weight:700;font-display:swap;text-rendering:optimizeLegibility}@font-face{font-family:Lato;src:local("LatoLatin Italic"),local("LatoLatin-Italic"),url(../assets/fonts/LatoLatin-Italic.woff2) format("woff2");font-style:italic;font-weight:400;font-display:swap;text-rendering:optimizeLegibility}@font-face{font-family:Lato;src:local("LatoLatin Regular"),local("LatoLatin-Regular"),url(../assets/fonts/LatoLatin-Regular.woff2) format("woff2");font-style:normal;font-weight:400;font-display:swap;text-rendering:optimizeLegibility}@font-face{font-family:Lato;src:local("LatoLatin Light"),local("LatoLatin-Light"),url(../assets/fonts/LatoLatin-Light.woff2) format("woff2");font-style:normal;font-weight:300;font-display:swap;text-rendering:optimizeLegibility}@font-face{font-family:Lato;src:local("LatoLatin LightItalic"),local("LatoLatin-LightItalic"),url(../assets/fonts/LatoLatin-LightItalic.woff2) format("woff2");font-style:italic;font-weight:300;font-display:swap;text-rendering:optimizeLegibility}:root{--uui-size-1: 3px;--uui-size-2: 6px;--uui-size-3: 9px;--uui-size-4: 12px;--uui-size-5: 15px;--uui-size-6: 18px;--uui-size-7: 21px;--uui-size-8: 24px;--uui-size-9: 27px;--uui-size-10: 30px;--uui-size-11: 33px;--uui-size-12: 36px;--uui-size-14: 42px;--uui-size-16: 48px;--uui-size-20: 60px;--uui-size-22: 66px;--uui-size-24: 72px;--uui-size-28: 84px;--uui-size-32: 96px;--uui-size-36: 108px;--uui-size-40: 120px;--uui-size-44: 132px;--uui-size-46: 138px;--uui-size-48: 144px;--uui-size-52: 156px;--uui-size-56: 168px;--uui-size-60: 180px;--uui-size-64: 192px;--uui-size-72: 216px;--uui-size-80: 240px;--uui-size-96: 288px;--uui-size-100: 300px;--uui-size-space-1: 3px;--uui-size-space-2: 6px;--uui-size-space-3: 9px;--uui-size-space-4: 12px;--uui-size-space-5: 18px;--uui-size-space-6: 24px;--uui-size-layout-1: 24px;--uui-size-layout-2: 30px;--uui-size-layout-3: 42px;--uui-size-layout-4: 66px;--uui-size-layout-5: 96px;--uui-size-layout-6: 138px;--uui-border-radius: var(--uui-size-3);--uui-border-radius-1: var(--uui-size-2);--uui-border-radius-2: var(--uui-size-3);--uui-border-radius-3: var(--uui-size-5);--uui-type-default-size: 14px;--uui-type-small-size: 12px;--uui-type-h1-size: 60px;--uui-type-h2-size: 42px;--uui-type-h3-size: 30px;--uui-type-h4-size: 21px;--uui-type-h5-size: var(--uui-type-default-size);--uui-type-h6-size: var(--uui-type-small-size)}:root{--uui-shadow-depth-1: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);--uui-shadow-depth-2: 0 3px 6px rgba(0, 0, 0, .16), 0 3px 6px rgba(0, 0, 0, .23);--uui-shadow-depth-3: 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23);--uui-shadow-depth-4: 0 14px 28px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .22);--uui-shadow-depth-5: 0 19px 38px rgba(0, 0, 0, .3), 0 15px 12px rgba(0, 0, 0, .22)}:root{--uui-palette-deep-saffron: #f79c37;--uui-palette-deep-saffron-light: rgb(249, 181, 103);--uui-palette-deep-saffron-dark: rgb(222, 145, 56);--uui-palette-deep-saffron-dimmed: rgb(166, 150, 133);--uui-palette-sunglow: #fad634;--uui-palette-sunglow-light: rgb(251, 224, 101);--uui-palette-sunglow-dark: rgb(224, 193, 51);--uui-palette-sunglow-dimmed: rgb(166, 160, 133);--uui-palette-spanish-pink: #f5c1bc;--uui-palette-spanish-pink-light: rgb(248, 214, 211);--uui-palette-spanish-pink-dark: rgb(232, 192, 189);--uui-palette-spanish-pink-dimmed: rgb(219, 212, 212);--uui-palette-gunmetal: #162335;--uui-palette-gunmetal-light: rgb(35, 55, 83);--uui-palette-gunmetal-dark: rgb(23, 27, 33);--uui-palette-gunmetal-dimmed: rgb(54, 54, 54);--uui-palette-space-cadet: #1b264f;--uui-palette-space-cadet-light: rgb(38, 53, 110);--uui-palette-space-cadet-dark: rgb(28, 35, 59);--uui-palette-space-cadet-dimmed: rgb(106, 117, 154);--uui-palette-violet-blue: #283a97;--uui-palette-violet-blue-light: #2d42ab;--uui-palette-violet-blue-dark: #25358b;--uui-palette-violet-blue-dimmed: #2c3669;--uui-palette-malibu: #3879ff;--uui-palette-malibu-light: rgb(97, 150, 255);--uui-palette-malibu-dark: rgb(56, 116, 235);--uui-palette-malibu-dimmed: rgb(115, 120, 130);--uui-palette-maroon-flush: #c31d4c;--uui-palette-maroon-flush-light: rgb(223, 42, 93);--uui-palette-maroon-flush-dark: rgb(174, 30, 71);--uui-palette-maroon-flush-dimmed: rgb(122, 98, 104);--uui-palette-jungle-green: #2bc37c;--uui-palette-jungle-green-light: rgb(58, 212, 140);--uui-palette-jungle-green-dark: rgb(43, 179, 115);--uui-palette-jungle-green-dimmed: rgb(102, 135, 120);--uui-palette-forest-green: #0b8152;--uui-palette-forest-green-light: rgb(13, 155, 98);--uui-palette-forest-green-dark: rgb(10, 115, 73);--uui-palette-forest-green-dimmed: rgb(46, 89, 72);--uui-palette-cocoa-black: #191715;--uui-palette-cocoa-black-light: rgb(39, 36, 32);--uui-palette-cocoa-black-dark: rgb(20, 20, 20);--uui-palette-cocoa-black-dimmed: rgb(48, 48, 48);--uui-palette-dune-black: #2e2b29;--uui-palette-dune-black-light: rgb(57, 53, 50);--uui-palette-dune-black-dark: rgb(38, 38, 38);--uui-palette-dune-black-dimmed: rgb(64, 64, 64);--uui-palette-cocoa-brown: #332a24;--uui-palette-cocoa-brown-light: rgb(66, 54, 47);--uui-palette-cocoa-brown-dark: rgb(38, 37, 36);--uui-palette-cocoa-brown-dimmed: rgb(43, 43, 43);--uui-palette-chamoisee: #9d8057;--uui-palette-chamoisee-light: rgb(175, 148, 110);--uui-palette-chamoisee-dark: rgb(138, 116, 87);--uui-palette-chamoisee-dimmed: rgb(115, 113, 110);--uui-palette-timberwolf: #e2dad4;--uui-palette-timberwolf-light: rgb(243, 239, 237);--uui-palette-timberwolf-dark: rgb(208, 208, 208);--uui-palette-timberwolf-dimmed: rgb(207, 207, 207);--uui-palette-gravel: #d8d7d9;--uui-palette-gravel-light: rgb(237, 237, 238);--uui-palette-gravel-dark: rgb(200, 200, 200);--uui-palette-gravel-dimmed: rgb(204, 204, 204);--uui-palette-sand: #f6f6f7;--uui-palette-sand-light: rgb(255, 255, 255);--uui-palette-sand-dark: rgb(226, 226, 226);--uui-palette-sand-dimmed: rgb(231, 231, 231);--uui-palette-white: #fefefe;--uui-palette-white-light: rgb(255, 255, 255);--uui-palette-white-dark: rgb(250, 250, 250);--uui-palette-white-dimmed: rgb(228, 228, 228);--uui-palette-black: #060606;--uui-palette-black-light: rgb(26, 26, 26);--uui-palette-black-dark: rgb(5, 5, 5);--uui-palette-black-dimmed: rgb(36, 36, 36);--uui-palette-grey: #c4c4c4;--uui-palette-grey-light: rgb(222, 222, 222);--uui-palette-grey-dark: rgb(179, 179, 179);--uui-palette-grey-dimmed: rgb(189, 189, 189);--uui-palette-dusty-grey: #9b9b9b;--uui-palette-dusty-grey-light: rgb(176, 176, 176);--uui-palette-dusty-grey-dark: rgb(141, 141, 141);--uui-palette-dusty-grey-dimmed: rgb(186, 186, 186);--uui-palette-mine-grey: #3e3e3e;--uui-palette-mine-grey-light: rgb(82, 82, 82);--uui-palette-mine-grey-dark: rgb(56, 56, 56);--uui-palette-mine-grey-dimmed: rgb(87, 87, 87)}:root{--uui-font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif}.uui-font{font-family:Lato,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:14px;line-height:calc(var(--uui-size-2) * 4);-webkit-font-smoothing:antialiased}.uui-h1,.uui-h2,.uui-h3,.uui-h4,.uui-h5,.uui-a,.uui-p,.uui-p-lead,.uui-small,.uui-quoteblock,.uui-ul,.uui-ol,.uui-text{font-family:Lato,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:14px;line-height:21px;-webkit-font-smoothing:antialiased}.uui-text h1,.uui-h1.uui-h1{font-size:var(--uui-type-h1-size);line-height:var(--uui-size-layout-4);font-weight:400;margin-left:-5px;margin-top:var(--uui-size-layout-1);margin-bottom:var(--uui-size-layout-1)}.uui-text p+h1,.uui-text p+.uui-h1{margin-top:var(--uui-size-layout-4)}.uui-text h1.--no-top-margin,.uui-text h1:first-child,.uui-h1.--no-top-margin,.uui-h1:first-child{margin-top:0}.uui-text h2,.uui-h2.uui-h2{font-size:var(--uui-type-h2-size);line-height:var(--uui-size-layout-3);font-weight:400;margin-left:-3px;margin-top:var(--uui-size-layout-1);margin-bottom:var(--uui-size-layout-1)}.uui-text p+h2,.uui-text p+.uui-h2{margin-top:var(--uui-size-layout-3)}.uui-text h2.--no-top-margin,.uui-text h2:first-child,.uui-h2.--no-top-margin,.uui-h2:first-child{margin-top:0}.uui-text h3,.uui-h3.uui-h3{font-size:var(--uui-type-h3-size);line-height:var(--uui-size-large);font-weight:400;margin-left:-2px;margin-top:var(--uui-size-layout-1);margin-bottom:var(--uui-size-layout-1)}.uui-text h3.--no-top-margin,.uui-text h3:first-child,.uui-h3.--no-top-margin,.uui-h3:first-child{margin-top:0}.uui-text h4,.uui-h4.uui-h4{font-size:var(--uui-type-h4-size);line-height:21px;font-weight:400;margin-left:-1px;margin-top:var(--uui-size-layout-1);margin-bottom:var(--uui-size-layout-1)}.uui-text h4.--no-top-margin,.uui-text h4:first-child,.uui-h4.--no-top-margin,.uui-h4:first-child{margin-top:0}.uui-text h5,.uui-h5.uui-h5{font-size:var(--uui-type-h5-size);line-height:inherit;font-weight:400;margin-left:0;margin-top:var(--uui-size-layout-1);margin-bottom:0}.uui-text h5.--no-top-margin,.uui-text h5:first-child,.uui-h5.--no-top-margin,.uui-h5:first-child{margin-top:0}.uui-p,.uui-text p{margin-top:var(--uui-size-layout-1);margin-bottom:var(--uui-size-layout-1)}.uui-p-lead,.uui-text p.uui-lead{font-size:var(--uui-size-6);line-height:var(--uui-size-8)}.uui-a,.uui-text a,.uui-a:link,.uui-a:active .uui-text a:link,.uui-text a:active{color:var(--uui-color-interactive)}.uui-a:hover,.uui-text a:hover{color:var(--uui-color-interactive-emphasis)}.uui-small,.uui-text small{display:inline-block;font-size:var(--uui-type-small-size);line-height:18px}.uui-quoteblock,.uui-text blockquote{float:right;font-size:14px;line-height:inherit;font-weight:400;font-style:italic;margin-top:0;margin-bottom:var(--uui-size-layout-1);margin-right:-.035em;max-width:16em;quotes:"“" "”" "‘" "’"}.uui-quoteblock:before,.uui-text blockquote:before{content:open-quote;margin-left:-.4em;margin-right:.08em;vertical-align:bottom;font-weight:400;font-size:2em}.uui-quoteblock:after,.uui-text blockquote:after{content:close-quote;margin-left:.04em;margin-right:-.4em;vertical-align:bottom;font-weight:400;font-size:2em;margin-bottom:-2px;display:inline-block}.uui-ul,.uui-text ul{list-style-type:square;padding-left:var(--uui-size-layout-1);margin-top:var(--uui-size-layout-1);margin-bottom:var(--uui-size-layout-1)}.uui-ol,.uui-text ol{padding-left:var(--uui-size-layout-1);margin-top:var(--uui-size-layout-1);margin-bottom:var(--uui-size-layout-1)}:root{--uui-color-selected: var(--uui-palette-violet-blue);--uui-color-selected-emphasis: var(--uui-palette-violet-blue-light);--uui-color-selected-standalone: var(--uui-palette-violet-blue-dark);--uui-color-selected-contrast: #fff;--uui-color-current: var(--uui-palette-spanish-pink);--uui-color-current-emphasis: var(--uui-palette-spanish-pink-light);--uui-color-current-standalone: var(--uui-palette-spanish-pink-dark);--uui-color-current-contrast: var(--uui-palette-space-cadet);--uui-color-header-surface: var(--uui-palette-space-cadet);--uui-color-header-contrast: #fff;--uui-color-header-contrast-emphasis: #fff;--uui-color-focus: var(--uui-palette-malibu);--uui-color-disabled: var(--uui-palette-sand);--uui-color-disabled-standalone: var(--uui-palette-sand-dark);--uui-color-disabled-contrast: var(--uui-palette-grey);--uui-color-surface: #fff;--uui-color-surface-alt: #fff;--uui-color-surface-emphasis: #dadada;--uui-color-background: #fff;--uui-color-text: var(--uui-palette-black);--uui-color-text-alt: var(--uui-palette-dune-black);--uui-color-interactive: var(--uui-palette-space-cadet);--uui-color-interactive-emphasis: var(--uui-palette-violet-blue);--uui-color-border: #000;--uui-color-border-standalone: #000;--uui-color-border-emphasis: #000;--uui-color-divider: #000;--uui-color-divider-standalone: #000;--uui-color-divider-emphasis: #000;--uui-color-default: var(--uui-palette-space-cadet);--uui-color-default-emphasis: var(--uui-palette-violet-blue);--uui-color-default-standalone: var(--uui-palette-space-cadet-dark);--uui-color-default-contrast: #fff;--uui-color-warning: #ffd621;--uui-color-warning-emphasis: #ffdc41;--uui-color-warning-standalone: #ffdd43;--uui-color-warning-contrast: #000;--uui-color-danger: #c60239;--uui-color-danger-emphasis: #da114a;--uui-color-danger-standalone: #d0003b;--uui-color-danger-contrast: white;--uui-color-invalid: #c60239;--uui-color-invalid-emphasis: #da114a;--uui-color-invalid-standalone: #d0003b;--uui-color-invalid-contrast: white;--uui-color-positive: #0d8844;--uui-color-positive-emphasis: #159c52;--uui-color-positive-standalone: #1cae5e;--uui-color-positive-contrast: #fff;--uui-shadow-depth-1: 0 0 0px 1px #000;--uui-shadow-depth-2: 0 0 0px 1px #000;--uui-shadow-depth-3: 0 0 0px 1px #000;--uui-shadow-depth-4: 0 0 0px 1px #000;--uui-shadow-depth-5: 0 0 0px 1px #000}
+@font-face{font-family:Lato;src:local("LatoLatin Black"),local("LatoLatin-Black"),url(../assets/fonts/LatoLatin-Black.woff2) format("woff2");font-style:normal;font-display:swap;font-weight:900;text-rendering:optimizeLegibility}@font-face{font-family:Lato;src:local("LatoLatin BlackItalic"),local("LatoLatin-BlackItalic"),url(../assets/fonts/LatoLatin-BlackItalic.woff2) format("woff2");font-style:italic;font-weight:900;font-display:swap;text-rendering:optimizeLegibility}@font-face{font-family:Lato;src:local("LatoLatin Bold"),local("LatoLatin-Bold"),url(../assets/fonts/LatoLatin-Bold.woff2) format("woff2");font-style:normal;font-weight:700;font-display:swap;text-rendering:optimizeLegibility}@font-face{font-family:Lato;src:local("LatoLatin BoldItalic"),local("LatoLatin-BoldItalic"),url(../assets/fonts/LatoLatin-BoldItalic.woff2) format("woff2");font-style:italic;font-weight:700;font-display:swap;text-rendering:optimizeLegibility}@font-face{font-family:Lato;src:local("LatoLatin Italic"),local("LatoLatin-Italic"),url(../assets/fonts/LatoLatin-Italic.woff2) format("woff2");font-style:italic;font-weight:400;font-display:swap;text-rendering:optimizeLegibility}@font-face{font-family:Lato;src:local("LatoLatin Regular"),local("LatoLatin-Regular"),url(../assets/fonts/LatoLatin-Regular.woff2) format("woff2");font-style:normal;font-weight:400;font-display:swap;text-rendering:optimizeLegibility}@font-face{font-family:Lato;src:local("LatoLatin Light"),local("LatoLatin-Light"),url(../assets/fonts/LatoLatin-Light.woff2) format("woff2");font-style:normal;font-weight:300;font-display:swap;text-rendering:optimizeLegibility}@font-face{font-family:Lato;src:local("LatoLatin LightItalic"),local("LatoLatin-LightItalic"),url(../assets/fonts/LatoLatin-LightItalic.woff2) format("woff2");font-style:italic;font-weight:300;font-display:swap;text-rendering:optimizeLegibility}:root{--uui-size-1: 3px;--uui-size-2: 6px;--uui-size-3: 9px;--uui-size-4: 12px;--uui-size-5: 15px;--uui-size-6: 18px;--uui-size-7: 21px;--uui-size-8: 24px;--uui-size-9: 27px;--uui-size-10: 30px;--uui-size-11: 33px;--uui-size-12: 36px;--uui-size-14: 42px;--uui-size-16: 48px;--uui-size-20: 60px;--uui-size-22: 66px;--uui-size-24: 72px;--uui-size-28: 84px;--uui-size-32: 96px;--uui-size-36: 108px;--uui-size-40: 120px;--uui-size-44: 132px;--uui-size-46: 138px;--uui-size-48: 144px;--uui-size-52: 156px;--uui-size-56: 168px;--uui-size-60: 180px;--uui-size-64: 192px;--uui-size-72: 216px;--uui-size-80: 240px;--uui-size-96: 288px;--uui-size-100: 300px;--uui-size-space-1: 3px;--uui-size-space-2: 6px;--uui-size-space-3: 9px;--uui-size-space-4: 12px;--uui-size-space-5: 18px;--uui-size-space-6: 24px;--uui-size-layout-1: 24px;--uui-size-layout-2: 30px;--uui-size-layout-3: 42px;--uui-size-layout-4: 66px;--uui-size-layout-5: 96px;--uui-size-layout-6: 138px;--uui-border-radius: var(--uui-size-3);--uui-border-radius-1: var(--uui-size-2);--uui-border-radius-2: var(--uui-size-3);--uui-border-radius-3: var(--uui-size-5);--uui-type-default-size: 14px;--uui-type-small-size: 12px;--uui-type-h1-size: 60px;--uui-type-h2-size: 42px;--uui-type-h3-size: 30px;--uui-type-h4-size: 21px;--uui-type-h5-size: var(--uui-type-default-size);--uui-type-h6-size: var(--uui-type-small-size)}:root{--uui-shadow-depth-1: rgba(0, 0, 0, .1) 0px 1px 6px 0, rgba(0, 0, 0, .1) 0 0 1px 0;--uui-shadow-depth-2: rgba(0, 0, 0, .1) 0px 3px 12px 0, rgba(0, 0, 0, .1) 0 0 1px 0;--uui-shadow-depth-3: rgba(0, 0, 0, .1) 0px 6px 16px 0, rgba(0, 0, 0, .1) 0 0 2px 0;--uui-shadow-depth-4: rgba(0, 0, 0, .2) 0px 9px 20px 0, rgba(0, 0, 0, .18) 0 0 3px 0;--uui-shadow-depth-5: rgba(0, 0, 0, .3) 0px 12px 24px 0, rgba(0, 0, 0, .1) 0px 6px 16px 0, rgba(0, 0, 0, .1) 0 0 2px 0}:root{--uui-palette-deep-saffron: #f79c37;--uui-palette-deep-saffron-light: rgb(249, 181, 103);--uui-palette-deep-saffron-dark: rgb(222, 145, 56);--uui-palette-deep-saffron-dimmed: rgb(166, 150, 133);--uui-palette-sunglow: #fad634;--uui-palette-sunglow-light: rgb(251, 224, 101);--uui-palette-sunglow-dark: #a17700;--uui-palette-sunglow-dimmed: rgb(166, 160, 133);--uui-palette-spanish-pink: #ffe8e6;--uui-palette-spanish-pink-light: #ffeceb;--uui-palette-spanish-pink-dark: #ffe2e0;--uui-palette-spanish-pink-dimmed: #fae6e5;--uui-palette-gunmetal: #162335;--uui-palette-gunmetal-light: rgb(35, 55, 83);--uui-palette-gunmetal-dark: rgb(23, 27, 33);--uui-palette-gunmetal-dimmed: rgb(54, 54, 54);--uui-palette-space-cadet: #1b264f;--uui-palette-space-cadet-light: rgb(38, 53, 110);--uui-palette-space-cadet-dark: rgb(28, 35, 59);--uui-palette-space-cadet-dimmed: rgb(106, 117, 154);--uui-palette-violet-blue: #283a97;--uui-palette-violet-blue-light: #2d42ab;--uui-palette-violet-blue-dark: #25358b;--uui-palette-violet-blue-dimmed: #2c3669;--uui-palette-malibu: #3879ff;--uui-palette-malibu-light: rgb(97, 150, 255);--uui-palette-malibu-dark: rgb(56, 116, 235);--uui-palette-malibu-dimmed: rgb(115, 120, 130);--uui-palette-maroon-flush: #df2a5d;--uui-palette-maroon-flush-light: #ec275f;--uui-palette-maroon-flush-dark: rgb(174, 30, 71);--uui-palette-maroon-flush-dimmed: rgb(122, 98, 104);--uui-palette-jungle-green: #2bc37c;--uui-palette-jungle-green-light: rgb(58, 212, 140);--uui-palette-jungle-green-dark: rgb(43, 179, 115);--uui-palette-jungle-green-dimmed: rgb(102, 135, 120);--uui-palette-forest-green: #0b8152;--uui-palette-forest-green-light: rgb(13, 155, 98);--uui-palette-forest-green-dark: rgb(10, 115, 73);--uui-palette-forest-green-dimmed: rgb(46, 89, 72);--uui-palette-cocoa-black: #191715;--uui-palette-cocoa-black-light: rgb(39, 36, 32);--uui-palette-cocoa-black-dark: rgb(20, 20, 20);--uui-palette-cocoa-black-dimmed: rgb(48, 48, 48);--uui-palette-dune-black: #2e2b29;--uui-palette-dune-black-light: rgb(57, 53, 50);--uui-palette-dune-black-dark: rgb(38, 38, 38);--uui-palette-dune-black-dimmed: rgb(64, 64, 64);--uui-palette-cocoa-brown: #332a24;--uui-palette-cocoa-brown-light: rgb(66, 54, 47);--uui-palette-cocoa-brown-dark: rgb(38, 37, 36);--uui-palette-cocoa-brown-dimmed: rgb(43, 43, 43);--uui-palette-chamoisee: #9d8057;--uui-palette-chamoisee-light: rgb(175, 148, 110);--uui-palette-chamoisee-dark: rgb(138, 116, 87);--uui-palette-chamoisee-dimmed: rgb(115, 113, 110);--uui-palette-timberwolf: #e2dad4;--uui-palette-timberwolf-light: rgb(243, 239, 237);--uui-palette-timberwolf-dark: rgb(208, 208, 208);--uui-palette-timberwolf-dimmed: rgb(207, 207, 207);--uui-palette-gravel: #d8d7d9;--uui-palette-gravel-light: rgb(237, 237, 238);--uui-palette-gravel-dark: rgb(200, 200, 200);--uui-palette-gravel-dimmed: rgb(204, 204, 204);--uui-palette-sand: #f7f7f8;--uui-palette-sand-light: rgb(255, 255, 255);--uui-palette-sand-dark: rgb(226, 226, 226);--uui-palette-sand-dimmed: rgb(231, 231, 231);--uui-palette-white: #fefefe;--uui-palette-white-light: rgb(255, 255, 255);--uui-palette-white-dark: rgb(250, 250, 250);--uui-palette-white-dimmed: rgb(228, 228, 228);--uui-palette-black: #060606;--uui-palette-black-light: rgb(26, 26, 26);--uui-palette-black-dark: rgb(5, 5, 5);--uui-palette-black-dimmed: rgb(36, 36, 36);--uui-palette-grey: #c4c4c4;--uui-palette-grey-light: rgb(222, 222, 222);--uui-palette-grey-dark: rgb(179, 179, 179);--uui-palette-grey-dimmed: rgb(189, 189, 189);--uui-palette-dusty-grey: #9b9b9b;--uui-palette-dusty-grey-light: rgb(176, 176, 176);--uui-palette-dusty-grey-dark: rgb(141, 141, 141);--uui-palette-dusty-grey-dimmed: rgb(186, 186, 186);--uui-palette-mine-grey: #3e3e3e;--uui-palette-mine-grey-light: rgb(82, 82, 82);--uui-palette-mine-grey-dark: rgb(56, 56, 56);--uui-palette-mine-grey-dimmed: rgb(87, 87, 87)}:root{--uui-font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif}.uui-font{font-family:Lato,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:14px;line-height:calc(var(--uui-size-2) * 4);-webkit-font-smoothing:antialiased}.uui-h1,.uui-h2,.uui-h3,.uui-h4,.uui-h5,.uui-a,.uui-p,.uui-p-lead,.uui-small,.uui-quoteblock,.uui-ul,.uui-ol,.uui-text{font-family:Lato,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:14px;line-height:21px;-webkit-font-smoothing:antialiased}.uui-text h1,.uui-h1.uui-h1{font-size:var(--uui-type-h1-size);line-height:var(--uui-size-layout-4);font-weight:400;margin-left:-5px;margin-top:var(--uui-size-layout-1);margin-bottom:var(--uui-size-layout-1)}.uui-text p+h1,.uui-text p+.uui-h1{margin-top:var(--uui-size-layout-4)}.uui-text h1.--no-top-margin,.uui-text h1:first-child,.uui-h1.--no-top-margin,.uui-h1:first-child{margin-top:0}.uui-text h2,.uui-h2.uui-h2{font-size:var(--uui-type-h2-size);line-height:var(--uui-size-layout-3);font-weight:400;margin-left:-3px;margin-top:var(--uui-size-layout-1);margin-bottom:var(--uui-size-layout-1)}.uui-text p+h2,.uui-text p+.uui-h2{margin-top:var(--uui-size-layout-3)}.uui-text h2.--no-top-margin,.uui-text h2:first-child,.uui-h2.--no-top-margin,.uui-h2:first-child{margin-top:0}.uui-text h3,.uui-h3.uui-h3{font-size:var(--uui-type-h3-size);line-height:var(--uui-size-large);font-weight:400;margin-left:-2px;margin-top:var(--uui-size-layout-1);margin-bottom:var(--uui-size-layout-1)}.uui-text h3.--no-top-margin,.uui-text h3:first-child,.uui-h3.--no-top-margin,.uui-h3:first-child{margin-top:0}.uui-text h4,.uui-h4.uui-h4{font-size:var(--uui-type-h4-size);line-height:21px;font-weight:400;margin-left:-1px;margin-top:var(--uui-size-layout-1);margin-bottom:var(--uui-size-layout-1)}.uui-text h4.--no-top-margin,.uui-text h4:first-child,.uui-h4.--no-top-margin,.uui-h4:first-child{margin-top:0}.uui-text h5,.uui-h5.uui-h5{font-size:var(--uui-type-h5-size);line-height:inherit;font-weight:400;margin-left:0;margin-top:var(--uui-size-layout-1);margin-bottom:0}.uui-text h5.--no-top-margin,.uui-text h5:first-child,.uui-h5.--no-top-margin,.uui-h5:first-child{margin-top:0}.uui-p,.uui-text p{margin-top:var(--uui-size-layout-1);margin-bottom:var(--uui-size-layout-1)}.uui-p-lead,.uui-text p.uui-lead{font-size:var(--uui-size-6);line-height:var(--uui-size-8)}.uui-a,.uui-text a,.uui-a:link,.uui-a:active .uui-text a:link,.uui-text a:active{color:var(--uui-color-interactive)}.uui-a:hover,.uui-text a:hover{color:var(--uui-color-interactive-emphasis)}.uui-small,.uui-text small{display:inline-block;font-size:var(--uui-type-small-size);line-height:18px}.uui-quoteblock,.uui-text blockquote{float:right;font-size:14px;line-height:inherit;font-weight:400;font-style:italic;margin-top:0;margin-bottom:var(--uui-size-layout-1);margin-right:-.035em;max-width:16em;quotes:"“" "”" "‘" "’"}.uui-quoteblock:before,.uui-text blockquote:before{content:open-quote;margin-left:-.4em;margin-right:.08em;vertical-align:bottom;font-weight:400;font-size:2em}.uui-quoteblock:after,.uui-text blockquote:after{content:close-quote;margin-left:.04em;margin-right:-.4em;vertical-align:bottom;font-weight:400;font-size:2em;margin-bottom:-2px;display:inline-block}.uui-ul,.uui-text ul{list-style-type:square;padding-left:var(--uui-size-layout-1);margin-top:var(--uui-size-layout-1);margin-bottom:var(--uui-size-layout-1)}.uui-ol,.uui-text ol{padding-left:var(--uui-size-layout-1);margin-top:var(--uui-size-layout-1);margin-bottom:var(--uui-size-layout-1)}:root{--uui-color-selected: var(--uui-palette-violet-blue);--uui-color-selected-emphasis: var(--uui-palette-violet-blue-light);--uui-color-selected-standalone: var(--uui-palette-violet-blue-dark);--uui-color-selected-contrast: #fff;--uui-color-current: var(--uui-palette-spanish-pink);--uui-color-current-emphasis: var(--uui-palette-spanish-pink-light);--uui-color-current-standalone: var(--uui-palette-spanish-pink-dark);--uui-color-current-contrast: var(--uui-palette-space-cadet);--uui-color-header-surface: var(--uui-palette-space-cadet);--uui-color-header-contrast: #fff;--uui-color-header-contrast-emphasis: #fff;--uui-color-focus: var(--uui-palette-malibu);--uui-color-disabled: var(--uui-palette-sand);--uui-color-disabled-standalone: var(--uui-palette-sand-dark);--uui-color-disabled-contrast: var(--uui-palette-grey);--uui-color-surface: #fff;--uui-color-surface-alt: #fff;--uui-color-surface-emphasis: #dadada;--uui-color-background: #fff;--uui-color-text: var(--uui-palette-black);--uui-color-text-alt: var(--uui-palette-dune-black);--uui-color-interactive: var(--uui-palette-space-cadet);--uui-color-interactive-contrast: #fff;--uui-color-interactive-emphasis: var(--uui-palette-violet-blue);--uui-color-border: #000;--uui-color-border-standalone: #000;--uui-color-border-emphasis: #000;--uui-color-divider: #000;--uui-color-divider-standalone: #000;--uui-color-divider-emphasis: #000;--uui-color-default: var(--uui-palette-space-cadet);--uui-color-default-emphasis: var(--uui-palette-violet-blue);--uui-color-default-standalone: var(--uui-palette-space-cadet-dark);--uui-color-default-contrast: #fff;--uui-color-warning: #ffd621;--uui-color-warning-emphasis: #ffdc41;--uui-color-warning-standalone: #ffdd43;--uui-color-warning-contrast: #000;--uui-color-danger: #c60239;--uui-color-danger-emphasis: #da114a;--uui-color-danger-standalone: #d0003b;--uui-color-danger-contrast: #fff;--uui-color-invalid: #c60239;--uui-color-invalid-emphasis: #da114a;--uui-color-invalid-standalone: #d0003b;--uui-color-invalid-contrast: #fff;--uui-color-positive: #0d8844;--uui-color-positive-emphasis: #159c52;--uui-color-positive-standalone: #1cae5e;--uui-color-positive-contrast: #fff;--uui-shadow-depth-1: 0 0 0px 1px #000;--uui-shadow-depth-2: 0 0 0px 1px #000;--uui-shadow-depth-3: 0 0 0px 1px #000;--uui-shadow-depth-4: 0 0 0px 1px #000;--uui-shadow-depth-5: 0 0 0px 1px #000}

package/dist/themes/light.css

@@ -1 +1 @@
-@font-face{font-family:Lato;src:local("LatoLatin Black"),local("LatoLatin-Black"),url(../assets/fonts/LatoLatin-Black.woff2) format("woff2");font-style:normal;font-display:swap;font-weight:900;text-rendering:optimizeLegibility}@font-face{font-family:Lato;src:local("LatoLatin BlackItalic"),local("LatoLatin-BlackItalic"),url(../assets/fonts/LatoLatin-BlackItalic.woff2) format("woff2");font-style:italic;font-weight:900;font-display:swap;text-rendering:optimizeLegibility}@font-face{font-family:Lato;src:local("LatoLatin Bold"),local("LatoLatin-Bold"),url(../assets/fonts/LatoLatin-Bold.woff2) format("woff2");font-style:normal;font-weight:700;font-display:swap;text-rendering:optimizeLegibility}@font-face{font-family:Lato;src:local("LatoLatin BoldItalic"),local("LatoLatin-BoldItalic"),url(../assets/fonts/LatoLatin-BoldItalic.woff2) format("woff2");font-style:italic;font-weight:700;font-display:swap;text-rendering:optimizeLegibility}@font-face{font-family:Lato;src:local("LatoLatin Italic"),local("LatoLatin-Italic"),url(../assets/fonts/LatoLatin-Italic.woff2) format("woff2");font-style:italic;font-weight:400;font-display:swap;text-rendering:optimizeLegibility}@font-face{font-family:Lato;src:local("LatoLatin Regular"),local("LatoLatin-Regular"),url(../assets/fonts/LatoLatin-Regular.woff2) format("woff2");font-style:normal;font-weight:400;font-display:swap;text-rendering:optimizeLegibility}@font-face{font-family:Lato;src:local("LatoLatin Light"),local("LatoLatin-Light"),url(../assets/fonts/LatoLatin-Light.woff2) format("woff2");font-style:normal;font-weight:300;font-display:swap;text-rendering:optimizeLegibility}@font-face{font-family:Lato;src:local("LatoLatin LightItalic"),local("LatoLatin-LightItalic"),url(../assets/fonts/LatoLatin-LightItalic.woff2) format("woff2");font-style:italic;font-weight:300;font-display:swap;text-rendering:optimizeLegibility}:root{--uui-size-1: 3px;--uui-size-2: 6px;--uui-size-3: 9px;--uui-size-4: 12px;--uui-size-5: 15px;--uui-size-6: 18px;--uui-size-7: 21px;--uui-size-8: 24px;--uui-size-9: 27px;--uui-size-10: 30px;--uui-size-11: 33px;--uui-size-12: 36px;--uui-size-14: 42px;--uui-size-16: 48px;--uui-size-20: 60px;--uui-size-22: 66px;--uui-size-24: 72px;--uui-size-28: 84px;--uui-size-32: 96px;--uui-size-36: 108px;--uui-size-40: 120px;--uui-size-44: 132px;--uui-size-46: 138px;--uui-size-48: 144px;--uui-size-52: 156px;--uui-size-56: 168px;--uui-size-60: 180px;--uui-size-64: 192px;--uui-size-72: 216px;--uui-size-80: 240px;--uui-size-96: 288px;--uui-size-100: 300px;--uui-size-space-1: 3px;--uui-size-space-2: 6px;--uui-size-space-3: 9px;--uui-size-space-4: 12px;--uui-size-space-5: 18px;--uui-size-space-6: 24px;--uui-size-layout-1: 24px;--uui-size-layout-2: 30px;--uui-size-layout-3: 42px;--uui-size-layout-4: 66px;--uui-size-layout-5: 96px;--uui-size-layout-6: 138px;--uui-border-radius: var(--uui-size-3);--uui-border-radius-1: var(--uui-size-2);--uui-border-radius-2: var(--uui-size-3);--uui-border-radius-3: var(--uui-size-5);--uui-type-default-size: 14px;--uui-type-small-size: 12px;--uui-type-h1-size: 60px;--uui-type-h2-size: 42px;--uui-type-h3-size: 30px;--uui-type-h4-size: 21px;--uui-type-h5-size: var(--uui-type-default-size);--uui-type-h6-size: var(--uui-type-small-size)}:root{--uui-shadow-depth-1: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);--uui-shadow-depth-2: 0 3px 6px rgba(0, 0, 0, .16), 0 3px 6px rgba(0, 0, 0, .23);--uui-shadow-depth-3: 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23);--uui-shadow-depth-4: 0 14px 28px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .22);--uui-shadow-depth-5: 0 19px 38px rgba(0, 0, 0, .3), 0 15px 12px rgba(0, 0, 0, .22)}:root{--uui-palette-deep-saffron: #f79c37;--uui-palette-deep-saffron-light: rgb(249, 181, 103);--uui-palette-deep-saffron-dark: rgb(222, 145, 56);--uui-palette-deep-saffron-dimmed: rgb(166, 150, 133);--uui-palette-sunglow: #fad634;--uui-palette-sunglow-light: rgb(251, 224, 101);--uui-palette-sunglow-dark: rgb(224, 193, 51);--uui-palette-sunglow-dimmed: rgb(166, 160, 133);--uui-palette-spanish-pink: #f5c1bc;--uui-palette-spanish-pink-light: rgb(248, 214, 211);--uui-palette-spanish-pink-dark: rgb(232, 192, 189);--uui-palette-spanish-pink-dimmed: rgb(219, 212, 212);--uui-palette-gunmetal: #162335;--uui-palette-gunmetal-light: rgb(35, 55, 83);--uui-palette-gunmetal-dark: rgb(23, 27, 33);--uui-palette-gunmetal-dimmed: rgb(54, 54, 54);--uui-palette-space-cadet: #1b264f;--uui-palette-space-cadet-light: rgb(38, 53, 110);--uui-palette-space-cadet-dark: rgb(28, 35, 59);--uui-palette-space-cadet-dimmed: rgb(106, 117, 154);--uui-palette-violet-blue: #283a97;--uui-palette-violet-blue-light: #2d42ab;--uui-palette-violet-blue-dark: #25358b;--uui-palette-violet-blue-dimmed: #2c3669;--uui-palette-malibu: #3879ff;--uui-palette-malibu-light: rgb(97, 150, 255);--uui-palette-malibu-dark: rgb(56, 116, 235);--uui-palette-malibu-dimmed: rgb(115, 120, 130);--uui-palette-maroon-flush: #c31d4c;--uui-palette-maroon-flush-light: rgb(223, 42, 93);--uui-palette-maroon-flush-dark: rgb(174, 30, 71);--uui-palette-maroon-flush-dimmed: rgb(122, 98, 104);--uui-palette-jungle-green: #2bc37c;--uui-palette-jungle-green-light: rgb(58, 212, 140);--uui-palette-jungle-green-dark: rgb(43, 179, 115);--uui-palette-jungle-green-dimmed: rgb(102, 135, 120);--uui-palette-forest-green: #0b8152;--uui-palette-forest-green-light: rgb(13, 155, 98);--uui-palette-forest-green-dark: rgb(10, 115, 73);--uui-palette-forest-green-dimmed: rgb(46, 89, 72);--uui-palette-cocoa-black: #191715;--uui-palette-cocoa-black-light: rgb(39, 36, 32);--uui-palette-cocoa-black-dark: rgb(20, 20, 20);--uui-palette-cocoa-black-dimmed: rgb(48, 48, 48);--uui-palette-dune-black: #2e2b29;--uui-palette-dune-black-light: rgb(57, 53, 50);--uui-palette-dune-black-dark: rgb(38, 38, 38);--uui-palette-dune-black-dimmed: rgb(64, 64, 64);--uui-palette-cocoa-brown: #332a24;--uui-palette-cocoa-brown-light: rgb(66, 54, 47);--uui-palette-cocoa-brown-dark: rgb(38, 37, 36);--uui-palette-cocoa-brown-dimmed: rgb(43, 43, 43);--uui-palette-chamoisee: #9d8057;--uui-palette-chamoisee-light: rgb(175, 148, 110);--uui-palette-chamoisee-dark: rgb(138, 116, 87);--uui-palette-chamoisee-dimmed: rgb(115, 113, 110);--uui-palette-timberwolf: #e2dad4;--uui-palette-timberwolf-light: rgb(243, 239, 237);--uui-palette-timberwolf-dark: rgb(208, 208, 208);--uui-palette-timberwolf-dimmed: rgb(207, 207, 207);--uui-palette-gravel: #d8d7d9;--uui-palette-gravel-light: rgb(237, 237, 238);--uui-palette-gravel-dark: rgb(200, 200, 200);--uui-palette-gravel-dimmed: rgb(204, 204, 204);--uui-palette-sand: #f6f6f7;--uui-palette-sand-light: rgb(255, 255, 255);--uui-palette-sand-dark: rgb(226, 226, 226);--uui-palette-sand-dimmed: rgb(231, 231, 231);--uui-palette-white: #fefefe;--uui-palette-white-light: rgb(255, 255, 255);--uui-palette-white-dark: rgb(250, 250, 250);--uui-palette-white-dimmed: rgb(228, 228, 228);--uui-palette-black: #060606;--uui-palette-black-light: rgb(26, 26, 26);--uui-palette-black-dark: rgb(5, 5, 5);--uui-palette-black-dimmed: rgb(36, 36, 36);--uui-palette-grey: #c4c4c4;--uui-palette-grey-light: rgb(222, 222, 222);--uui-palette-grey-dark: rgb(179, 179, 179);--uui-palette-grey-dimmed: rgb(189, 189, 189);--uui-palette-dusty-grey: #9b9b9b;--uui-palette-dusty-grey-light: rgb(176, 176, 176);--uui-palette-dusty-grey-dark: rgb(141, 141, 141);--uui-palette-dusty-grey-dimmed: rgb(186, 186, 186);--uui-palette-mine-grey: #3e3e3e;--uui-palette-mine-grey-light: rgb(82, 82, 82);--uui-palette-mine-grey-dark: rgb(56, 56, 56);--uui-palette-mine-grey-dimmed: rgb(87, 87, 87)}:root{--uui-font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif}.uui-font{font-family:Lato,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:14px;line-height:calc(var(--uui-size-2) * 4);-webkit-font-smoothing:antialiased}.uui-h1,.uui-h2,.uui-h3,.uui-h4,.uui-h5,.uui-a,.uui-p,.uui-p-lead,.uui-small,.uui-quoteblock,.uui-ul,.uui-ol,.uui-text{font-family:Lato,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:14px;line-height:21px;-webkit-font-smoothing:antialiased}.uui-text h1,.uui-h1.uui-h1{font-size:var(--uui-type-h1-size);line-height:var(--uui-size-layout-4);font-weight:400;margin-left:-5px;margin-top:var(--uui-size-layout-1);margin-bottom:var(--uui-size-layout-1)}.uui-text p+h1,.uui-text p+.uui-h1{margin-top:var(--uui-size-layout-4)}.uui-text h1.--no-top-margin,.uui-text h1:first-child,.uui-h1.--no-top-margin,.uui-h1:first-child{margin-top:0}.uui-text h2,.uui-h2.uui-h2{font-size:var(--uui-type-h2-size);line-height:var(--uui-size-layout-3);font-weight:400;margin-left:-3px;margin-top:var(--uui-size-layout-1);margin-bottom:var(--uui-size-layout-1)}.uui-text p+h2,.uui-text p+.uui-h2{margin-top:var(--uui-size-layout-3)}.uui-text h2.--no-top-margin,.uui-text h2:first-child,.uui-h2.--no-top-margin,.uui-h2:first-child{margin-top:0}.uui-text h3,.uui-h3.uui-h3{font-size:var(--uui-type-h3-size);line-height:var(--uui-size-large);font-weight:400;margin-left:-2px;margin-top:var(--uui-size-layout-1);margin-bottom:var(--uui-size-layout-1)}.uui-text h3.--no-top-margin,.uui-text h3:first-child,.uui-h3.--no-top-margin,.uui-h3:first-child{margin-top:0}.uui-text h4,.uui-h4.uui-h4{font-size:var(--uui-type-h4-size);line-height:21px;font-weight:400;margin-left:-1px;margin-top:var(--uui-size-layout-1);margin-bottom:var(--uui-size-layout-1)}.uui-text h4.--no-top-margin,.uui-text h4:first-child,.uui-h4.--no-top-margin,.uui-h4:first-child{margin-top:0}.uui-text h5,.uui-h5.uui-h5{font-size:var(--uui-type-h5-size);line-height:inherit;font-weight:400;margin-left:0;margin-top:var(--uui-size-layout-1);margin-bottom:0}.uui-text h5.--no-top-margin,.uui-text h5:first-child,.uui-h5.--no-top-margin,.uui-h5:first-child{margin-top:0}.uui-p,.uui-text p{margin-top:var(--uui-size-layout-1);margin-bottom:var(--uui-size-layout-1)}.uui-p-lead,.uui-text p.uui-lead{font-size:var(--uui-size-6);line-height:var(--uui-size-8)}.uui-a,.uui-text a,.uui-a:link,.uui-a:active .uui-text a:link,.uui-text a:active{color:var(--uui-color-interactive)}.uui-a:hover,.uui-text a:hover{color:var(--uui-color-interactive-emphasis)}.uui-small,.uui-text small{display:inline-block;font-size:var(--uui-type-small-size);line-height:18px}.uui-quoteblock,.uui-text blockquote{float:right;font-size:14px;line-height:inherit;font-weight:400;font-style:italic;margin-top:0;margin-bottom:var(--uui-size-layout-1);margin-right:-.035em;max-width:16em;quotes:"“" "”" "‘" "’"}.uui-quoteblock:before,.uui-text blockquote:before{content:open-quote;margin-left:-.4em;margin-right:.08em;vertical-align:bottom;font-weight:400;font-size:2em}.uui-quoteblock:after,.uui-text blockquote:after{content:close-quote;margin-left:.04em;margin-right:-.4em;vertical-align:bottom;font-weight:400;font-size:2em;margin-bottom:-2px;display:inline-block}.uui-ul,.uui-text ul{list-style-type:square;padding-left:var(--uui-size-layout-1);margin-top:var(--uui-size-layout-1);margin-bottom:var(--uui-size-layout-1)}.uui-ol,.uui-text ol{padding-left:var(--uui-size-layout-1);margin-top:var(--uui-size-layout-1);margin-bottom:var(--uui-size-layout-1)}:root{--uui-color-selected: var(--uui-palette-violet-blue);--uui-color-selected-emphasis: var(--uui-palette-violet-blue-light);--uui-color-selected-standalone: var(--uui-palette-violet-blue-dark);--uui-color-selected-contrast: #fff;--uui-color-current: var(--uui-palette-spanish-pink);--uui-color-current-emphasis: var(--uui-palette-spanish-pink-light);--uui-color-current-standalone: var(--uui-palette-spanish-pink-dark);--uui-color-current-contrast: var(--uui-palette-space-cadet);--uui-color-disabled: var(--uui-palette-sand);--uui-color-disabled-standalone: var(--uui-palette-sand-dark);--uui-color-disabled-contrast: var(--uui-palette-grey);--uui-color-header-surface: var(--uui-palette-space-cadet);--uui-color-header-contrast: rgba(255, 255, 255, .8);--uui-color-header-contrast-emphasis: #fff;--uui-color-focus: var(--uui-palette-malibu);--uui-color-surface: #fff;--uui-color-surface-alt: var(--uui-palette-sand);--uui-color-surface-emphasis: var(--uui-palette-white-dark);--uui-color-background: var(--uui-palette-sand);--uui-color-text: var(--uui-palette-black);--uui-color-text-alt: var(--uui-palette-dune-black);--uui-color-interactive: var(--uui-palette-violet-blue);--uui-color-interactive-emphasis: var(--uui-palette-violet-blue-light);--uui-color-border: #d8d7d9;--uui-color-border-standalone: #c2c2c2;--uui-color-border-emphasis: #a1a1a1;--uui-color-divider: #f6f6f7;--uui-color-divider-standalone: #e9e9eb;--uui-color-divider-emphasis: #bdbdbd;--uui-color-default: var(--uui-palette-violet-blue);--uui-color-default-emphasis: var(--uui-palette-violet-blue-light);--uui-color-default-standalone: var(--uui-palette-violet-blue-dark);--uui-color-default-contrast: #fff;--uui-color-warning: #fbd142;--uui-color-warning-emphasis: var(--uui-palette-sunglow-light);--uui-color-warning-standalone: #a17700;--uui-color-warning-contrast: #000;--uui-color-danger: var(--uui-palette-maroon-flush);--uui-color-danger-emphasis: var(--uui-palette-maroon-flush-light);--uui-color-danger-standalone: var(--uui-palette-maroon-flush-dark);--uui-color-danger-contrast: white;--uui-color-invalid: var(--uui-palette-maroon-flush);--uui-color-invalid-emphasis: var(--uui-palette-maroon-flush-light);--uui-color-invalid-standalone: var(--uui-palette-maroon-flush-dark);--uui-color-invalid-contrast: white;--uui-color-positive: var(--uui-palette-forest-green);--uui-color-positive-emphasis: var(--uui-palette-forest-green-light);--uui-color-positive-standalone: var(--uui-palette-forest-green-dark);--uui-color-positive-contrast: #fff}
+@font-face{font-family:Lato;src:local("LatoLatin Black"),local("LatoLatin-Black"),url(../assets/fonts/LatoLatin-Black.woff2) format("woff2");font-style:normal;font-display:swap;font-weight:900;text-rendering:optimizeLegibility}@font-face{font-family:Lato;src:local("LatoLatin BlackItalic"),local("LatoLatin-BlackItalic"),url(../assets/fonts/LatoLatin-BlackItalic.woff2) format("woff2");font-style:italic;font-weight:900;font-display:swap;text-rendering:optimizeLegibility}@font-face{font-family:Lato;src:local("LatoLatin Bold"),local("LatoLatin-Bold"),url(../assets/fonts/LatoLatin-Bold.woff2) format("woff2");font-style:normal;font-weight:700;font-display:swap;text-rendering:optimizeLegibility}@font-face{font-family:Lato;src:local("LatoLatin BoldItalic"),local("LatoLatin-BoldItalic"),url(../assets/fonts/LatoLatin-BoldItalic.woff2) format("woff2");font-style:italic;font-weight:700;font-display:swap;text-rendering:optimizeLegibility}@font-face{font-family:Lato;src:local("LatoLatin Italic"),local("LatoLatin-Italic"),url(../assets/fonts/LatoLatin-Italic.woff2) format("woff2");font-style:italic;font-weight:400;font-display:swap;text-rendering:optimizeLegibility}@font-face{font-family:Lato;src:local("LatoLatin Regular"),local("LatoLatin-Regular"),url(../assets/fonts/LatoLatin-Regular.woff2) format("woff2");font-style:normal;font-weight:400;font-display:swap;text-rendering:optimizeLegibility}@font-face{font-family:Lato;src:local("LatoLatin Light"),local("LatoLatin-Light"),url(../assets/fonts/LatoLatin-Light.woff2) format("woff2");font-style:normal;font-weight:300;font-display:swap;text-rendering:optimizeLegibility}@font-face{font-family:Lato;src:local("LatoLatin LightItalic"),local("LatoLatin-LightItalic"),url(../assets/fonts/LatoLatin-LightItalic.woff2) format("woff2");font-style:italic;font-weight:300;font-display:swap;text-rendering:optimizeLegibility}:root{--uui-size-1: 3px;--uui-size-2: 6px;--uui-size-3: 9px;--uui-size-4: 12px;--uui-size-5: 15px;--uui-size-6: 18px;--uui-size-7: 21px;--uui-size-8: 24px;--uui-size-9: 27px;--uui-size-10: 30px;--uui-size-11: 33px;--uui-size-12: 36px;--uui-size-14: 42px;--uui-size-16: 48px;--uui-size-20: 60px;--uui-size-22: 66px;--uui-size-24: 72px;--uui-size-28: 84px;--uui-size-32: 96px;--uui-size-36: 108px;--uui-size-40: 120px;--uui-size-44: 132px;--uui-size-46: 138px;--uui-size-48: 144px;--uui-size-52: 156px;--uui-size-56: 168px;--uui-size-60: 180px;--uui-size-64: 192px;--uui-size-72: 216px;--uui-size-80: 240px;--uui-size-96: 288px;--uui-size-100: 300px;--uui-size-space-1: 3px;--uui-size-space-2: 6px;--uui-size-space-3: 9px;--uui-size-space-4: 12px;--uui-size-space-5: 18px;--uui-size-space-6: 24px;--uui-size-layout-1: 24px;--uui-size-layout-2: 30px;--uui-size-layout-3: 42px;--uui-size-layout-4: 66px;--uui-size-layout-5: 96px;--uui-size-layout-6: 138px;--uui-border-radius: var(--uui-size-3);--uui-border-radius-1: var(--uui-size-2);--uui-border-radius-2: var(--uui-size-3);--uui-border-radius-3: var(--uui-size-5);--uui-type-default-size: 14px;--uui-type-small-size: 12px;--uui-type-h1-size: 60px;--uui-type-h2-size: 42px;--uui-type-h3-size: 30px;--uui-type-h4-size: 21px;--uui-type-h5-size: var(--uui-type-default-size);--uui-type-h6-size: var(--uui-type-small-size)}:root{--uui-shadow-depth-1: rgba(0, 0, 0, .1) 0px 1px 6px 0, rgba(0, 0, 0, .1) 0 0 1px 0;--uui-shadow-depth-2: rgba(0, 0, 0, .1) 0px 3px 12px 0, rgba(0, 0, 0, .1) 0 0 1px 0;--uui-shadow-depth-3: rgba(0, 0, 0, .1) 0px 6px 16px 0, rgba(0, 0, 0, .1) 0 0 2px 0;--uui-shadow-depth-4: rgba(0, 0, 0, .2) 0px 9px 20px 0, rgba(0, 0, 0, .18) 0 0 3px 0;--uui-shadow-depth-5: rgba(0, 0, 0, .3) 0px 12px 24px 0, rgba(0, 0, 0, .1) 0px 6px 16px 0, rgba(0, 0, 0, .1) 0 0 2px 0}:root{--uui-palette-deep-saffron: #f79c37;--uui-palette-deep-saffron-light: rgb(249, 181, 103);--uui-palette-deep-saffron-dark: rgb(222, 145, 56);--uui-palette-deep-saffron-dimmed: rgb(166, 150, 133);--uui-palette-sunglow: #fad634;--uui-palette-sunglow-light: rgb(251, 224, 101);--uui-palette-sunglow-dark: #a17700;--uui-palette-sunglow-dimmed: rgb(166, 160, 133);--uui-palette-spanish-pink: #ffe8e6;--uui-palette-spanish-pink-light: #ffeceb;--uui-palette-spanish-pink-dark: #ffe2e0;--uui-palette-spanish-pink-dimmed: #fae6e5;--uui-palette-gunmetal: #162335;--uui-palette-gunmetal-light: rgb(35, 55, 83);--uui-palette-gunmetal-dark: rgb(23, 27, 33);--uui-palette-gunmetal-dimmed: rgb(54, 54, 54);--uui-palette-space-cadet: #1b264f;--uui-palette-space-cadet-light: rgb(38, 53, 110);--uui-palette-space-cadet-dark: rgb(28, 35, 59);--uui-palette-space-cadet-dimmed: rgb(106, 117, 154);--uui-palette-violet-blue: #283a97;--uui-palette-violet-blue-light: #2d42ab;--uui-palette-violet-blue-dark: #25358b;--uui-palette-violet-blue-dimmed: #2c3669;--uui-palette-malibu: #3879ff;--uui-palette-malibu-light: rgb(97, 150, 255);--uui-palette-malibu-dark: rgb(56, 116, 235);--uui-palette-malibu-dimmed: rgb(115, 120, 130);--uui-palette-maroon-flush: #df2a5d;--uui-palette-maroon-flush-light: #ec275f;--uui-palette-maroon-flush-dark: rgb(174, 30, 71);--uui-palette-maroon-flush-dimmed: rgb(122, 98, 104);--uui-palette-jungle-green: #2bc37c;--uui-palette-jungle-green-light: rgb(58, 212, 140);--uui-palette-jungle-green-dark: rgb(43, 179, 115);--uui-palette-jungle-green-dimmed: rgb(102, 135, 120);--uui-palette-forest-green: #0b8152;--uui-palette-forest-green-light: rgb(13, 155, 98);--uui-palette-forest-green-dark: rgb(10, 115, 73);--uui-palette-forest-green-dimmed: rgb(46, 89, 72);--uui-palette-cocoa-black: #191715;--uui-palette-cocoa-black-light: rgb(39, 36, 32);--uui-palette-cocoa-black-dark: rgb(20, 20, 20);--uui-palette-cocoa-black-dimmed: rgb(48, 48, 48);--uui-palette-dune-black: #2e2b29;--uui-palette-dune-black-light: rgb(57, 53, 50);--uui-palette-dune-black-dark: rgb(38, 38, 38);--uui-palette-dune-black-dimmed: rgb(64, 64, 64);--uui-palette-cocoa-brown: #332a24;--uui-palette-cocoa-brown-light: rgb(66, 54, 47);--uui-palette-cocoa-brown-dark: rgb(38, 37, 36);--uui-palette-cocoa-brown-dimmed: rgb(43, 43, 43);--uui-palette-chamoisee: #9d8057;--uui-palette-chamoisee-light: rgb(175, 148, 110);--uui-palette-chamoisee-dark: rgb(138, 116, 87);--uui-palette-chamoisee-dimmed: rgb(115, 113, 110);--uui-palette-timberwolf: #e2dad4;--uui-palette-timberwolf-light: rgb(243, 239, 237);--uui-palette-timberwolf-dark: rgb(208, 208, 208);--uui-palette-timberwolf-dimmed: rgb(207, 207, 207);--uui-palette-gravel: #d8d7d9;--uui-palette-gravel-light: rgb(237, 237, 238);--uui-palette-gravel-dark: rgb(200, 200, 200);--uui-palette-gravel-dimmed: rgb(204, 204, 204);--uui-palette-sand: #f7f7f8;--uui-palette-sand-light: rgb(255, 255, 255);--uui-palette-sand-dark: rgb(226, 226, 226);--uui-palette-sand-dimmed: rgb(231, 231, 231);--uui-palette-white: #fefefe;--uui-palette-white-light: rgb(255, 255, 255);--uui-palette-white-dark: rgb(250, 250, 250);--uui-palette-white-dimmed: rgb(228, 228, 228);--uui-palette-black: #060606;--uui-palette-black-light: rgb(26, 26, 26);--uui-palette-black-dark: rgb(5, 5, 5);--uui-palette-black-dimmed: rgb(36, 36, 36);--uui-palette-grey: #c4c4c4;--uui-palette-grey-light: rgb(222, 222, 222);--uui-palette-grey-dark: rgb(179, 179, 179);--uui-palette-grey-dimmed: rgb(189, 189, 189);--uui-palette-dusty-grey: #9b9b9b;--uui-palette-dusty-grey-light: rgb(176, 176, 176);--uui-palette-dusty-grey-dark: rgb(141, 141, 141);--uui-palette-dusty-grey-dimmed: rgb(186, 186, 186);--uui-palette-mine-grey: #3e3e3e;--uui-palette-mine-grey-light: rgb(82, 82, 82);--uui-palette-mine-grey-dark: rgb(56, 56, 56);--uui-palette-mine-grey-dimmed: rgb(87, 87, 87)}:root{--uui-font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif}.uui-font{font-family:Lato,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:14px;line-height:calc(var(--uui-size-2) * 4);-webkit-font-smoothing:antialiased}.uui-h1,.uui-h2,.uui-h3,.uui-h4,.uui-h5,.uui-a,.uui-p,.uui-p-lead,.uui-small,.uui-quoteblock,.uui-ul,.uui-ol,.uui-text{font-family:Lato,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:14px;line-height:21px;-webkit-font-smoothing:antialiased}.uui-text h1,.uui-h1.uui-h1{font-size:var(--uui-type-h1-size);line-height:var(--uui-size-layout-4);font-weight:400;margin-left:-5px;margin-top:var(--uui-size-layout-1);margin-bottom:var(--uui-size-layout-1)}.uui-text p+h1,.uui-text p+.uui-h1{margin-top:var(--uui-size-layout-4)}.uui-text h1.--no-top-margin,.uui-text h1:first-child,.uui-h1.--no-top-margin,.uui-h1:first-child{margin-top:0}.uui-text h2,.uui-h2.uui-h2{font-size:var(--uui-type-h2-size);line-height:var(--uui-size-layout-3);font-weight:400;margin-left:-3px;margin-top:var(--uui-size-layout-1);margin-bottom:var(--uui-size-layout-1)}.uui-text p+h2,.uui-text p+.uui-h2{margin-top:var(--uui-size-layout-3)}.uui-text h2.--no-top-margin,.uui-text h2:first-child,.uui-h2.--no-top-margin,.uui-h2:first-child{margin-top:0}.uui-text h3,.uui-h3.uui-h3{font-size:var(--uui-type-h3-size);line-height:var(--uui-size-large);font-weight:400;margin-left:-2px;margin-top:var(--uui-size-layout-1);margin-bottom:var(--uui-size-layout-1)}.uui-text h3.--no-top-margin,.uui-text h3:first-child,.uui-h3.--no-top-margin,.uui-h3:first-child{margin-top:0}.uui-text h4,.uui-h4.uui-h4{font-size:var(--uui-type-h4-size);line-height:21px;font-weight:400;margin-left:-1px;margin-top:var(--uui-size-layout-1);margin-bottom:var(--uui-size-layout-1)}.uui-text h4.--no-top-margin,.uui-text h4:first-child,.uui-h4.--no-top-margin,.uui-h4:first-child{margin-top:0}.uui-text h5,.uui-h5.uui-h5{font-size:var(--uui-type-h5-size);line-height:inherit;font-weight:400;margin-left:0;margin-top:var(--uui-size-layout-1);margin-bottom:0}.uui-text h5.--no-top-margin,.uui-text h5:first-child,.uui-h5.--no-top-margin,.uui-h5:first-child{margin-top:0}.uui-p,.uui-text p{margin-top:var(--uui-size-layout-1);margin-bottom:var(--uui-size-layout-1)}.uui-p-lead,.uui-text p.uui-lead{font-size:var(--uui-size-6);line-height:var(--uui-size-8)}.uui-a,.uui-text a,.uui-a:link,.uui-a:active .uui-text a:link,.uui-text a:active{color:var(--uui-color-interactive)}.uui-a:hover,.uui-text a:hover{color:var(--uui-color-interactive-emphasis)}.uui-small,.uui-text small{display:inline-block;font-size:var(--uui-type-small-size);line-height:18px}.uui-quoteblock,.uui-text blockquote{float:right;font-size:14px;line-height:inherit;font-weight:400;font-style:italic;margin-top:0;margin-bottom:var(--uui-size-layout-1);margin-right:-.035em;max-width:16em;quotes:"“" "”" "‘" "’"}.uui-quoteblock:before,.uui-text blockquote:before{content:open-quote;margin-left:-.4em;margin-right:.08em;vertical-align:bottom;font-weight:400;font-size:2em}.uui-quoteblock:after,.uui-text blockquote:after{content:close-quote;margin-left:.04em;margin-right:-.4em;vertical-align:bottom;font-weight:400;font-size:2em;margin-bottom:-2px;display:inline-block}.uui-ul,.uui-text ul{list-style-type:square;padding-left:var(--uui-size-layout-1);margin-top:var(--uui-size-layout-1);margin-bottom:var(--uui-size-layout-1)}.uui-ol,.uui-text ol{padding-left:var(--uui-size-layout-1);margin-top:var(--uui-size-layout-1);margin-bottom:var(--uui-size-layout-1)}:root{--uui-color-selected: var(--uui-palette-violet-blue);--uui-color-selected-emphasis: var(--uui-palette-violet-blue-light);--uui-color-selected-standalone: var(--uui-palette-violet-blue-dark);--uui-color-selected-contrast: #fff;--uui-color-current: var(--uui-palette-spanish-pink);--uui-color-current-emphasis: var(--uui-palette-spanish-pink-light);--uui-color-current-standalone: var(--uui-palette-spanish-pink-dark);--uui-color-current-contrast: var(--uui-palette-space-cadet);--uui-color-disabled: var(--uui-palette-sand);--uui-color-disabled-standalone: var(--uui-palette-sand-dark);--uui-color-disabled-contrast: var(--uui-palette-grey);--uui-color-header-surface: var(--uui-palette-space-cadet);--uui-color-header-contrast: rgba(255, 255, 255, .8);--uui-color-header-contrast-emphasis: #fff;--uui-color-focus: var(--uui-palette-malibu);--uui-color-surface: #fff;--uui-color-surface-alt: var(--uui-palette-sand);--uui-color-surface-emphasis: var(--uui-palette-white-dark);--uui-color-background: var(--uui-palette-sand);--uui-color-text: var(--uui-palette-black);--uui-color-text-alt: var(--uui-palette-dune-black);--uui-color-interactive: var(--uui-palette-space-cadet);--uui-color-interactive-emphasis: var(--uui-palette-violet-blue-light);--uui-color-interactive-contrast: #fff;--uui-color-border: #d8d7d9;--uui-color-border-standalone: #c2c2c2;--uui-color-border-emphasis: #a1a1a1;--uui-color-divider: #f6f6f7;--uui-color-divider-standalone: #e9e9eb;--uui-color-divider-emphasis: #bdbdbd;--uui-color-default: var(--uui-palette-violet-blue);--uui-color-default-emphasis: var(--uui-palette-violet-blue-light);--uui-color-default-standalone: var(--uui-palette-violet-blue-dark);--uui-color-default-contrast: #fff;--uui-color-warning: var(--uui-palette-sunglow);--uui-color-warning-emphasis: var(--uui-palette-sunglow-light);--uui-color-warning-standalone: var(--uui-palette-sunglow-dark);--uui-color-warning-contrast: #000;--uui-color-danger: var(--uui-palette-maroon-flush);--uui-color-danger-emphasis: var(--uui-palette-maroon-flush-light);--uui-color-danger-standalone: var(--uui-palette-maroon-flush-dark);--uui-color-danger-contrast: white;--uui-color-invalid: var(--uui-palette-maroon-flush);--uui-color-invalid-emphasis: var(--uui-palette-maroon-flush-light);--uui-color-invalid-standalone: var(--uui-palette-maroon-flush-dark);--uui-color-invalid-contrast: white;--uui-color-positive: var(--uui-palette-forest-green);--uui-color-positive-emphasis: var(--uui-palette-forest-green-light);--uui-color-positive-standalone: var(--uui-palette-forest-green-dark);--uui-color-positive-contrast: #fff}