@reown/appkit-cdn 1.8.15-viem-upgrade.0 → 1.8.15-viem-upgrade-2.0

package/dist/index-BPB7fVHQ.js

@@ -0,0 +1,281 @@
+import { p as proxy, s as subscribeKey, i as subscribe, m as css, r as resetStyles, o as i, x, O as OptionsController } from "./appkit-8yrMZRW-.js";
+import { n, r } from "./class-map-k3nlzPqR.js";
+import { c as customElement } from "./index-CNivx0yI.js";
+import { o } from "./if-defined-G2Q1ofvJ.js";
+import { e, n as n$1 } from "./ref-6sYmD-zI.js";
+const state = proxy({
+  isLegalCheckboxChecked: false
+});
+const OptionsStateController = {
+  state,
+  subscribe(callback) {
+    return subscribe(state, () => callback(state));
+  },
+  subscribeKey(key, callback) {
+    return subscribeKey(state, key, callback);
+  },
+  setIsLegalCheckboxChecked(isLegalCheckboxChecked) {
+    state.isLegalCheckboxChecked = isLegalCheckboxChecked;
+  }
+};
+const styles$1 = css`
+  label {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+    user-select: none;
+    column-gap: ${({ spacing }) => spacing[2]};
+  }
+
+  label > input[type='checkbox'] {
+    height: 0;
+    width: 0;
+    opacity: 0;
+    position: absolute;
+  }
+
+  label > span {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    width: 100%;
+    border: 1px solid ${({ colors }) => colors.neutrals400};
+    color: ${({ colors }) => colors.white};
+    background-color: transparent;
+    will-change: border-color, background-color;
+  }
+
+  label > span > wui-icon {
+    opacity: 0;
+    will-change: opacity;
+  }
+
+  label > input[type='checkbox']:checked + span > wui-icon {
+    color: ${({ colors }) => colors.white};
+  }
+
+  label > input[type='checkbox']:not(:checked) > span > wui-icon {
+    color: ${({ colors }) => colors.neutrals900};
+  }
+
+  label > input[type='checkbox']:checked + span > wui-icon {
+    opacity: 1;
+  }
+
+  /* -- Sizes --------------------------------------------------- */
+  label[data-size='lg'] > span {
+    width: 24px;
+    height: 24px;
+    min-width: 24px;
+    min-height: 24px;
+    border-radius: ${({ borderRadius }) => borderRadius[10]};
+  }
+
+  label[data-size='md'] > span {
+    width: 20px;
+    height: 20px;
+    min-width: 20px;
+    min-height: 20px;
+    border-radius: ${({ borderRadius }) => borderRadius[2]};
+  }
+
+  label[data-size='sm'] > span {
+    width: 16px;
+    height: 16px;
+    min-width: 16px;
+    min-height: 16px;
+    border-radius: ${({ borderRadius }) => borderRadius[1]};
+  }
+
+  /* -- Focus states --------------------------------------------------- */
+  label > input[type='checkbox']:focus-visible + span,
+  label > input[type='checkbox']:focus + span {
+    border: 1px solid ${({ tokens }) => tokens.core.borderAccentPrimary};
+    box-shadow: 0px 0px 0px 4px rgba(9, 136, 240, 0.2);
+  }
+
+  /* -- Checked states --------------------------------------------------- */
+  label > input[type='checkbox']:checked + span {
+    background-color: ${({ tokens }) => tokens.core.iconAccentPrimary};
+    border: 1px solid transparent;
+  }
+
+  /* -- Hover states --------------------------------------------------- */
+  input[type='checkbox']:not(:checked):not(:disabled) + span:hover {
+    border: 1px solid ${({ colors }) => colors.neutrals700};
+    background-color: ${({ colors }) => colors.neutrals800};
+    box-shadow: none;
+  }
+
+  input[type='checkbox']:checked:not(:disabled) + span:hover {
+    border: 1px solid transparent;
+    background-color: ${({ colors }) => colors.accent080};
+    box-shadow: none;
+  }
+
+  /* -- Disabled state --------------------------------------------------- */
+  label > input[type='checkbox']:checked:disabled + span {
+    border: 1px solid transparent;
+    opacity: 0.3;
+  }
+
+  label > input[type='checkbox']:not(:checked):disabled + span {
+    border: 1px solid ${({ colors }) => colors.neutrals700};
+  }
+
+  label:has(input[type='checkbox']:disabled) {
+    cursor: auto;
+  }
+
+  label > input[type='checkbox']:disabled + span {
+    cursor: not-allowed;
+  }
+`;
+var __decorate$1 = function(decorators, target, key, desc) {
+  var c = arguments.length, r2 = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r2 = Reflect.decorate(decorators, target, key, desc);
+  else for (var i2 = decorators.length - 1; i2 >= 0; i2--) if (d = decorators[i2]) r2 = (c < 3 ? d(r2) : c > 3 ? d(target, key, r2) : d(target, key)) || r2;
+  return c > 3 && r2 && Object.defineProperty(target, key, r2), r2;
+};
+const ICON_SIZE = {
+  lg: "md",
+  md: "sm",
+  sm: "sm"
+};
+let WuiCheckBox = class WuiCheckBox2 extends i {
+  constructor() {
+    super(...arguments);
+    this.inputElementRef = e();
+    this.checked = void 0;
+    this.disabled = false;
+    this.size = "md";
+  }
+  render() {
+    const iconSize = ICON_SIZE[this.size];
+    return x`
+      <label data-size=${this.size}>
+        <input
+          ${n$1(this.inputElementRef)}
+          ?checked=${o(this.checked)}
+          ?disabled=${this.disabled}
+          type="checkbox"
+          @change=${this.dispatchChangeEvent}
+        />
+        <span>
+          <wui-icon name="checkmarkBold" size=${iconSize}></wui-icon>
+        </span>
+        <slot></slot>
+      </label>
+    `;
+  }
+  dispatchChangeEvent() {
+    var _a;
+    this.dispatchEvent(new CustomEvent("checkboxChange", {
+      detail: (_a = this.inputElementRef.value) == null ? void 0 : _a.checked,
+      bubbles: true,
+      composed: true
+    }));
+  }
+};
+WuiCheckBox.styles = [resetStyles, styles$1];
+__decorate$1([
+  n({ type: Boolean })
+], WuiCheckBox.prototype, "checked", void 0);
+__decorate$1([
+  n({ type: Boolean })
+], WuiCheckBox.prototype, "disabled", void 0);
+__decorate$1([
+  n()
+], WuiCheckBox.prototype, "size", void 0);
+WuiCheckBox = __decorate$1([
+  customElement("wui-checkbox")
+], WuiCheckBox);
+const styles = css`
+  :host {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  wui-checkbox {
+    padding: ${({ spacing }) => spacing["3"]};
+  }
+  a {
+    text-decoration: none;
+    color: ${({ tokens }) => tokens.theme.textSecondary};
+    font-weight: 500;
+  }
+`;
+var __decorate = function(decorators, target, key, desc) {
+  var c = arguments.length, r2 = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r2 = Reflect.decorate(decorators, target, key, desc);
+  else for (var i2 = decorators.length - 1; i2 >= 0; i2--) if (d = decorators[i2]) r2 = (c < 3 ? d(r2) : c > 3 ? d(target, key, r2) : d(target, key)) || r2;
+  return c > 3 && r2 && Object.defineProperty(target, key, r2), r2;
+};
+let W3mLegalCheckbox = class W3mLegalCheckbox2 extends i {
+  constructor() {
+    super();
+    this.unsubscribe = [];
+    this.checked = OptionsStateController.state.isLegalCheckboxChecked;
+    this.unsubscribe.push(OptionsStateController.subscribeKey("isLegalCheckboxChecked", (val) => {
+      this.checked = val;
+    }));
+  }
+  disconnectedCallback() {
+    this.unsubscribe.forEach((unsubscribe) => unsubscribe());
+  }
+  render() {
+    var _a;
+    const { termsConditionsUrl, privacyPolicyUrl } = OptionsController.state;
+    const legalCheckbox = (_a = OptionsController.state.features) == null ? void 0 : _a.legalCheckbox;
+    if (!termsConditionsUrl && !privacyPolicyUrl) {
+      return null;
+    }
+    if (!legalCheckbox) {
+      return null;
+    }
+    return x`
+      <wui-checkbox
+        ?checked=${this.checked}
+        @checkboxChange=${this.onCheckboxChange.bind(this)}
+        data-testid="wui-checkbox"
+      >
+        <wui-text color="secondary" variant="sm-regular" align="left">
+          I agree to our ${this.termsTemplate()} ${this.andTemplate()} ${this.privacyTemplate()}
+        </wui-text>
+      </wui-checkbox>
+    `;
+  }
+  andTemplate() {
+    const { termsConditionsUrl, privacyPolicyUrl } = OptionsController.state;
+    return termsConditionsUrl && privacyPolicyUrl ? "and" : "";
+  }
+  termsTemplate() {
+    const { termsConditionsUrl } = OptionsController.state;
+    if (!termsConditionsUrl) {
+      return null;
+    }
+    return x`<a rel="noreferrer" target="_blank" href=${termsConditionsUrl}>terms of service</a>`;
+  }
+  privacyTemplate() {
+    const { privacyPolicyUrl } = OptionsController.state;
+    if (!privacyPolicyUrl) {
+      return null;
+    }
+    return x`<a rel="noreferrer" target="_blank" href=${privacyPolicyUrl}>privacy policy</a>`;
+  }
+  onCheckboxChange() {
+    OptionsStateController.setIsLegalCheckboxChecked(!this.checked);
+  }
+};
+W3mLegalCheckbox.styles = [styles];
+__decorate([
+  r()
+], W3mLegalCheckbox.prototype, "checked", void 0);
+W3mLegalCheckbox = __decorate([
+  customElement("w3m-legal-checkbox")
+], W3mLegalCheckbox);
+export {
+  OptionsStateController as O
+};
+//# sourceMappingURL=index-BPB7fVHQ.js.map

package/dist/index-BPB7fVHQ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-BPB7fVHQ.js","sources":["../../controllers/dist/esm/src/controllers/OptionsStateController.js","../../ui/dist/esm/src/composites/wui-checkbox/styles.js","../../ui/dist/esm/src/composites/wui-checkbox/index.js","../../scaffold-ui/dist/esm/src/partials/w3m-legal-checkbox/styles.js","../../scaffold-ui/dist/esm/src/partials/w3m-legal-checkbox/index.js"],"sourcesContent":["import { proxy, subscribe as sub } from 'valtio/vanilla';\nimport { subscribeKey as subKey } from 'valtio/vanilla/utils';\n// -- State --------------------------------------------- //\nconst state = proxy({\n    isLegalCheckboxChecked: false\n});\n// -- Controller ---------------------------------------- //\nexport const OptionsStateController = {\n    state,\n    subscribe(callback) {\n        return sub(state, () => callback(state));\n    },\n    subscribeKey(key, callback) {\n        return subKey(state, key, callback);\n    },\n    setIsLegalCheckboxChecked(isLegalCheckboxChecked) {\n        state.isLegalCheckboxChecked = isLegalCheckboxChecked;\n    }\n};\n//# sourceMappingURL=OptionsStateController.js.map","import { css } from '../../utils/ThemeHelperUtil.js';\nexport default css `\n  label {\n    display: inline-flex;\n    align-items: center;\n    cursor: pointer;\n    user-select: none;\n    column-gap: ${({ spacing }) => spacing[2]};\n  }\n\n  label > input[type='checkbox'] {\n    height: 0;\n    width: 0;\n    opacity: 0;\n    position: absolute;\n  }\n\n  label > span {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 100%;\n    width: 100%;\n    border: 1px solid ${({ colors }) => colors.neutrals400};\n    color: ${({ colors }) => colors.white};\n    background-color: transparent;\n    will-change: border-color, background-color;\n  }\n\n  label > span > wui-icon {\n    opacity: 0;\n    will-change: opacity;\n  }\n\n  label > input[type='checkbox']:checked + span > wui-icon {\n    color: ${({ colors }) => colors.white};\n  }\n\n  label > input[type='checkbox']:not(:checked) > span > wui-icon {\n    color: ${({ colors }) => colors.neutrals900};\n  }\n\n  label > input[type='checkbox']:checked + span > wui-icon {\n    opacity: 1;\n  }\n\n  /* -- Sizes --------------------------------------------------- */\n  label[data-size='lg'] > span {\n    width: 24px;\n    height: 24px;\n    min-width: 24px;\n    min-height: 24px;\n    border-radius: ${({ borderRadius }) => borderRadius[10]};\n  }\n\n  label[data-size='md'] > span {\n    width: 20px;\n    height: 20px;\n    min-width: 20px;\n    min-height: 20px;\n    border-radius: ${({ borderRadius }) => borderRadius[2]};\n  }\n\n  label[data-size='sm'] > span {\n    width: 16px;\n    height: 16px;\n    min-width: 16px;\n    min-height: 16px;\n    border-radius: ${({ borderRadius }) => borderRadius[1]};\n  }\n\n  /* -- Focus states --------------------------------------------------- */\n  label > input[type='checkbox']:focus-visible + span,\n  label > input[type='checkbox']:focus + span {\n    border: 1px solid ${({ tokens }) => tokens.core.borderAccentPrimary};\n    box-shadow: 0px 0px 0px 4px rgba(9, 136, 240, 0.2);\n  }\n\n  /* -- Checked states --------------------------------------------------- */\n  label > input[type='checkbox']:checked + span {\n    background-color: ${({ tokens }) => tokens.core.iconAccentPrimary};\n    border: 1px solid transparent;\n  }\n\n  /* -- Hover states --------------------------------------------------- */\n  input[type='checkbox']:not(:checked):not(:disabled) + span:hover {\n    border: 1px solid ${({ colors }) => colors.neutrals700};\n    background-color: ${({ colors }) => colors.neutrals800};\n    box-shadow: none;\n  }\n\n  input[type='checkbox']:checked:not(:disabled) + span:hover {\n    border: 1px solid transparent;\n    background-color: ${({ colors }) => colors.accent080};\n    box-shadow: none;\n  }\n\n  /* -- Disabled state --------------------------------------------------- */\n  label > input[type='checkbox']:checked:disabled + span {\n    border: 1px solid transparent;\n    opacity: 0.3;\n  }\n\n  label > input[type='checkbox']:not(:checked):disabled + span {\n    border: 1px solid ${({ colors }) => colors.neutrals700};\n  }\n\n  label:has(input[type='checkbox']:disabled) {\n    cursor: auto;\n  }\n\n  label > input[type='checkbox']:disabled + span {\n    cursor: not-allowed;\n  }\n`;\n//# sourceMappingURL=styles.js.map","var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n    if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n    return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { createRef, ref } from 'lit/directives/ref.js';\nimport '../../components/wui-icon/index.js';\nimport '../../components/wui-text/index.js';\nimport { resetStyles } from '../../utils/ThemeUtil.js';\nimport { customElement } from '../../utils/WebComponentsUtil.js';\nimport './index.js';\nimport styles from './styles.js';\nconst ICON_SIZE = {\n    lg: 'md',\n    md: 'sm',\n    sm: 'sm'\n};\nlet WuiCheckBox = class WuiCheckBox extends LitElement {\n    constructor() {\n        super(...arguments);\n        this.inputElementRef = createRef();\n        this.checked = undefined;\n        this.disabled = false;\n        this.size = 'md';\n    }\n    render() {\n        const iconSize = ICON_SIZE[this.size];\n        return html `\n      <label data-size=${this.size}>\n        <input\n          ${ref(this.inputElementRef)}\n          ?checked=${ifDefined(this.checked)}\n          ?disabled=${this.disabled}\n          type=\"checkbox\"\n          @change=${this.dispatchChangeEvent}\n        />\n        <span>\n          <wui-icon name=\"checkmarkBold\" size=${iconSize}></wui-icon>\n        </span>\n        <slot></slot>\n      </label>\n    `;\n    }\n    dispatchChangeEvent() {\n        this.dispatchEvent(new CustomEvent('checkboxChange', {\n            detail: this.inputElementRef.value?.checked,\n            bubbles: true,\n            composed: true\n        }));\n    }\n};\nWuiCheckBox.styles = [resetStyles, styles];\n__decorate([\n    property({ type: Boolean })\n], WuiCheckBox.prototype, \"checked\", void 0);\n__decorate([\n    property({ type: Boolean })\n], WuiCheckBox.prototype, \"disabled\", void 0);\n__decorate([\n    property()\n], WuiCheckBox.prototype, \"size\", void 0);\nWuiCheckBox = __decorate([\n    customElement('wui-checkbox')\n], WuiCheckBox);\nexport { WuiCheckBox };\n//# sourceMappingURL=index.js.map","import { css } from '@reown/appkit-ui';\nexport default css `\n  :host {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n  wui-checkbox {\n    padding: ${({ spacing }) => spacing['3']};\n  }\n  a {\n    text-decoration: none;\n    color: ${({ tokens }) => tokens.theme.textSecondary};\n    font-weight: 500;\n  }\n`;\n//# sourceMappingURL=styles.js.map","var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n    if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n    return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { LitElement, html } from 'lit';\nimport { state } from 'lit/decorators.js';\nimport { OptionsController, OptionsStateController } from '@reown/appkit-controllers';\nimport { customElement } from '@reown/appkit-ui';\nimport '@reown/appkit-ui/wui-checkbox';\nimport '@reown/appkit-ui/wui-text';\nimport styles from './styles.js';\nlet W3mLegalCheckbox = class W3mLegalCheckbox extends LitElement {\n    constructor() {\n        super();\n        this.unsubscribe = [];\n        this.checked = OptionsStateController.state.isLegalCheckboxChecked;\n        this.unsubscribe.push(OptionsStateController.subscribeKey('isLegalCheckboxChecked', val => {\n            this.checked = val;\n        }));\n    }\n    disconnectedCallback() {\n        this.unsubscribe.forEach(unsubscribe => unsubscribe());\n    }\n    render() {\n        const { termsConditionsUrl, privacyPolicyUrl } = OptionsController.state;\n        const legalCheckbox = OptionsController.state.features?.legalCheckbox;\n        if (!termsConditionsUrl && !privacyPolicyUrl) {\n            return null;\n        }\n        if (!legalCheckbox) {\n            return null;\n        }\n        return html `\n      <wui-checkbox\n        ?checked=${this.checked}\n        @checkboxChange=${this.onCheckboxChange.bind(this)}\n        data-testid=\"wui-checkbox\"\n      >\n        <wui-text color=\"secondary\" variant=\"sm-regular\" align=\"left\">\n          I agree to our ${this.termsTemplate()} ${this.andTemplate()} ${this.privacyTemplate()}\n        </wui-text>\n      </wui-checkbox>\n    `;\n    }\n    andTemplate() {\n        const { termsConditionsUrl, privacyPolicyUrl } = OptionsController.state;\n        return termsConditionsUrl && privacyPolicyUrl ? 'and' : '';\n    }\n    termsTemplate() {\n        const { termsConditionsUrl } = OptionsController.state;\n        if (!termsConditionsUrl) {\n            return null;\n        }\n        return html `<a rel=\"noreferrer\" target=\"_blank\" href=${termsConditionsUrl}>terms of service</a>`;\n    }\n    privacyTemplate() {\n        const { privacyPolicyUrl } = OptionsController.state;\n        if (!privacyPolicyUrl) {\n            return null;\n        }\n        return html `<a rel=\"noreferrer\" target=\"_blank\" href=${privacyPolicyUrl}>privacy policy</a>`;\n    }\n    onCheckboxChange() {\n        OptionsStateController.setIsLegalCheckboxChecked(!this.checked);\n    }\n};\nW3mLegalCheckbox.styles = [styles];\n__decorate([\n    state()\n], W3mLegalCheckbox.prototype, \"checked\", void 0);\nW3mLegalCheckbox = __decorate([\n    customElement('w3m-legal-checkbox')\n], W3mLegalCheckbox);\nexport { W3mLegalCheckbox };\n//# sourceMappingURL=index.js.map"],"names":["sub","subKey","__decorate","r","i","WuiCheckBox","LitElement","createRef","html","ref","ifDefined","styles","property","W3mLegalCheckbox","state"],"mappings":"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"}

package/dist/index-BdRMG5oJ.js

@@ -0,0 +1,126 @@
+import { m as css, r as resetStyles, n as elementStyles, o as i, x } from "./appkit-8yrMZRW-.js";
+import { n } from "./class-map-k3nlzPqR.js";
+import { o } from "./if-defined-G2Q1ofvJ.js";
+import { c as customElement } from "./index-CNivx0yI.js";
+const styles = css`
+  :host {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: ${({ borderRadius }) => borderRadius[2]};
+    padding: ${({ spacing }) => spacing[1]} !important;
+    background-color: ${({ tokens }) => tokens.theme.backgroundPrimary};
+    position: relative;
+  }
+
+  :host([data-padding='2']) {
+    padding: ${({ spacing }) => spacing[2]} !important;
+  }
+
+  :host:after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: ${({ borderRadius }) => borderRadius[2]};
+  }
+
+  :host > wui-icon {
+    z-index: 10;
+  }
+
+  /* -- Colors --------------------------------------------------- */
+  :host([data-color='accent-primary']) {
+    color: ${({ tokens }) => tokens.core.iconAccentPrimary};
+  }
+
+  :host([data-color='accent-primary']):after {
+    background-color: ${({ tokens }) => tokens.core.foregroundAccent010};
+  }
+
+  :host([data-color='default']),
+  :host([data-color='secondary']) {
+    color: ${({ tokens }) => tokens.theme.iconDefault};
+  }
+
+  :host([data-color='default']):after {
+    background-color: ${({ tokens }) => tokens.theme.foregroundPrimary};
+  }
+
+  :host([data-color='secondary']):after {
+    background-color: ${({ tokens }) => tokens.theme.foregroundSecondary};
+  }
+
+  :host([data-color='success']) {
+    color: ${({ tokens }) => tokens.core.iconSuccess};
+  }
+
+  :host([data-color='success']):after {
+    background-color: ${({ tokens }) => tokens.core.backgroundSuccess};
+  }
+
+  :host([data-color='error']) {
+    color: ${({ tokens }) => tokens.core.iconError};
+  }
+
+  :host([data-color='error']):after {
+    background-color: ${({ tokens }) => tokens.core.backgroundError};
+  }
+
+  :host([data-color='warning']) {
+    color: ${({ tokens }) => tokens.core.iconWarning};
+  }
+
+  :host([data-color='warning']):after {
+    background-color: ${({ tokens }) => tokens.core.backgroundWarning};
+  }
+
+  :host([data-color='inverse']) {
+    color: ${({ tokens }) => tokens.theme.iconInverse};
+  }
+
+  :host([data-color='inverse']):after {
+    background-color: transparent;
+  }
+`;
+var __decorate = function(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i2 = decorators.length - 1; i2 >= 0; i2--) if (d = decorators[i2]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+let WuiIconBox = class WuiIconBox2 extends i {
+  constructor() {
+    super(...arguments);
+    this.icon = "copy";
+    this.size = "md";
+    this.padding = "1";
+    this.color = "default";
+  }
+  render() {
+    this.dataset["padding"] = this.padding;
+    this.dataset["color"] = this.color;
+    return x`
+      <wui-icon size=${o(this.size)} name=${this.icon} color="inherit"></wui-icon>
+    `;
+  }
+};
+WuiIconBox.styles = [resetStyles, elementStyles, styles];
+__decorate([
+  n()
+], WuiIconBox.prototype, "icon", void 0);
+__decorate([
+  n()
+], WuiIconBox.prototype, "size", void 0);
+__decorate([
+  n()
+], WuiIconBox.prototype, "padding", void 0);
+__decorate([
+  n()
+], WuiIconBox.prototype, "color", void 0);
+WuiIconBox = __decorate([
+  customElement("wui-icon-box")
+], WuiIconBox);
+//# sourceMappingURL=index-BdRMG5oJ.js.map

package/dist/index-BdRMG5oJ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-BdRMG5oJ.js","sources":["../../ui/dist/esm/src/composites/wui-icon-box/styles.js","../../ui/dist/esm/src/composites/wui-icon-box/index.js"],"sourcesContent":["import { css } from '../../utils/ThemeHelperUtil.js';\nexport default css `\n  :host {\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    border-radius: ${({ borderRadius }) => borderRadius[2]};\n    padding: ${({ spacing }) => spacing[1]} !important;\n    background-color: ${({ tokens }) => tokens.theme.backgroundPrimary};\n    position: relative;\n  }\n\n  :host([data-padding='2']) {\n    padding: ${({ spacing }) => spacing[2]} !important;\n  }\n\n  :host:after {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    border-radius: ${({ borderRadius }) => borderRadius[2]};\n  }\n\n  :host > wui-icon {\n    z-index: 10;\n  }\n\n  /* -- Colors --------------------------------------------------- */\n  :host([data-color='accent-primary']) {\n    color: ${({ tokens }) => tokens.core.iconAccentPrimary};\n  }\n\n  :host([data-color='accent-primary']):after {\n    background-color: ${({ tokens }) => tokens.core.foregroundAccent010};\n  }\n\n  :host([data-color='default']),\n  :host([data-color='secondary']) {\n    color: ${({ tokens }) => tokens.theme.iconDefault};\n  }\n\n  :host([data-color='default']):after {\n    background-color: ${({ tokens }) => tokens.theme.foregroundPrimary};\n  }\n\n  :host([data-color='secondary']):after {\n    background-color: ${({ tokens }) => tokens.theme.foregroundSecondary};\n  }\n\n  :host([data-color='success']) {\n    color: ${({ tokens }) => tokens.core.iconSuccess};\n  }\n\n  :host([data-color='success']):after {\n    background-color: ${({ tokens }) => tokens.core.backgroundSuccess};\n  }\n\n  :host([data-color='error']) {\n    color: ${({ tokens }) => tokens.core.iconError};\n  }\n\n  :host([data-color='error']):after {\n    background-color: ${({ tokens }) => tokens.core.backgroundError};\n  }\n\n  :host([data-color='warning']) {\n    color: ${({ tokens }) => tokens.core.iconWarning};\n  }\n\n  :host([data-color='warning']):after {\n    background-color: ${({ tokens }) => tokens.core.backgroundWarning};\n  }\n\n  :host([data-color='inverse']) {\n    color: ${({ tokens }) => tokens.theme.iconInverse};\n  }\n\n  :host([data-color='inverse']):after {\n    background-color: transparent;\n  }\n`;\n//# sourceMappingURL=styles.js.map","var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n    if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n    return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport '../../components/wui-icon/index.js';\nimport { elementStyles, resetStyles } from '../../utils/ThemeUtil.js';\nimport { customElement } from '../../utils/WebComponentsUtil.js';\nimport styles from './styles.js';\nlet WuiIconBox = class WuiIconBox extends LitElement {\n    constructor() {\n        super(...arguments);\n        this.icon = 'copy';\n        this.size = 'md';\n        this.padding = '1';\n        this.color = 'default';\n    }\n    render() {\n        this.dataset['padding'] = this.padding;\n        this.dataset['color'] = this.color;\n        return html `\n      <wui-icon size=${ifDefined(this.size)} name=${this.icon} color=\"inherit\"></wui-icon>\n    `;\n    }\n};\nWuiIconBox.styles = [resetStyles, elementStyles, styles];\n__decorate([\n    property()\n], WuiIconBox.prototype, \"icon\", void 0);\n__decorate([\n    property()\n], WuiIconBox.prototype, \"size\", void 0);\n__decorate([\n    property()\n], WuiIconBox.prototype, \"padding\", void 0);\n__decorate([\n    property()\n], WuiIconBox.prototype, \"color\", void 0);\nWuiIconBox = __decorate([\n    customElement('wui-icon-box')\n], WuiIconBox);\nexport { WuiIconBox };\n//# sourceMappingURL=index.js.map"],"names":["i","WuiIconBox","LitElement","html","ifDefined","property"],"mappings":"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"}

package/dist/index-Bowi-aBJ.js

@@ -0,0 +1,147 @@
+import { m as css, r as resetStyles, o as i, x } from "./appkit-8yrMZRW-.js";
+import { n } from "./class-map-k3nlzPqR.js";
+import { o } from "./if-defined-G2Q1ofvJ.js";
+import { c as customElement } from "./index-CNivx0yI.js";
+const styles = css`
+  :host {
+    display: block;
+    width: var(--local-width);
+    height: var(--local-height);
+  }
+
+  img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: center center;
+    border-radius: inherit;
+    user-select: none;
+    user-drag: none;
+    -webkit-user-drag: none;
+    -khtml-user-drag: none;
+    -moz-user-drag: none;
+    -o-user-drag: none;
+  }
+
+  :host([data-boxed='true']) {
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: ${({ tokens }) => tokens.theme.foregroundPrimary};
+    border-radius: ${({ borderRadius }) => borderRadius[2]};
+  }
+
+  :host([data-boxed='true']) img {
+    width: 20px;
+    height: 20px;
+    border-radius: ${({ borderRadius }) => borderRadius[16]};
+  }
+
+  :host([data-full='true']) img {
+    width: 100%;
+    height: 100%;
+  }
+
+  :host([data-boxed='true']) wui-icon {
+    width: 20px;
+    height: 20px;
+  }
+
+  :host([data-icon='error']) {
+    background-color: ${({ tokens }) => tokens.core.backgroundError};
+  }
+
+  :host([data-rounded='true']) {
+    border-radius: ${({ borderRadius }) => borderRadius[16]};
+  }
+`;
+var __decorate = function(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i2 = decorators.length - 1; i2 >= 0; i2--) if (d = decorators[i2]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+let WuiImage = class WuiImage2 extends i {
+  constructor() {
+    super(...arguments);
+    this.src = "./path/to/image.jpg";
+    this.alt = "Image";
+    this.size = void 0;
+    this.boxed = false;
+    this.rounded = false;
+    this.fullSize = false;
+  }
+  render() {
+    const getSize = {
+      inherit: "inherit",
+      xxs: "2",
+      xs: "3",
+      sm: "4",
+      md: "4",
+      mdl: "5",
+      lg: "5",
+      xl: "6",
+      xxl: "7",
+      "3xl": "8",
+      "4xl": "9",
+      "5xl": "10"
+    };
+    this.style.cssText = `
+      --local-width: ${this.size ? `var(--apkt-spacing-${getSize[this.size]});` : "100%"};
+      --local-height: ${this.size ? `var(--apkt-spacing-${getSize[this.size]});` : "100%"};
+      `;
+    this.dataset["boxed"] = this.boxed ? "true" : "false";
+    this.dataset["rounded"] = this.rounded ? "true" : "false";
+    this.dataset["full"] = this.fullSize ? "true" : "false";
+    this.dataset["icon"] = this.iconColor || "inherit";
+    if (this.icon) {
+      return x`<wui-icon
+        color=${this.iconColor || "inherit"}
+        name=${this.icon}
+        size="lg"
+      ></wui-icon> `;
+    }
+    if (this.logo) {
+      return x`<wui-icon size="lg" color="inherit" name=${this.logo}></wui-icon> `;
+    }
+    return x`<img src=${o(this.src)} alt=${this.alt} @error=${this.handleImageError} />`;
+  }
+  handleImageError() {
+    this.dispatchEvent(new CustomEvent("onLoadError", { bubbles: true, composed: true }));
+  }
+};
+WuiImage.styles = [resetStyles, styles];
+__decorate([
+  n()
+], WuiImage.prototype, "src", void 0);
+__decorate([
+  n()
+], WuiImage.prototype, "logo", void 0);
+__decorate([
+  n()
+], WuiImage.prototype, "icon", void 0);
+__decorate([
+  n()
+], WuiImage.prototype, "iconColor", void 0);
+__decorate([
+  n()
+], WuiImage.prototype, "alt", void 0);
+__decorate([
+  n()
+], WuiImage.prototype, "size", void 0);
+__decorate([
+  n({ type: Boolean })
+], WuiImage.prototype, "boxed", void 0);
+__decorate([
+  n({ type: Boolean })
+], WuiImage.prototype, "rounded", void 0);
+__decorate([
+  n({ type: Boolean })
+], WuiImage.prototype, "fullSize", void 0);
+WuiImage = __decorate([
+  customElement("wui-image")
+], WuiImage);
+//# sourceMappingURL=index-Bowi-aBJ.js.map

package/dist/index-Bowi-aBJ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-Bowi-aBJ.js","sources":["../../ui/dist/esm/src/components/wui-image/styles.js","../../ui/dist/esm/src/components/wui-image/index.js"],"sourcesContent":["import { css } from '../../utils/ThemeHelperUtil.js';\nexport default css `\n  :host {\n    display: block;\n    width: var(--local-width);\n    height: var(--local-height);\n  }\n\n  img {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    object-position: center center;\n    border-radius: inherit;\n    user-select: none;\n    user-drag: none;\n    -webkit-user-drag: none;\n    -khtml-user-drag: none;\n    -moz-user-drag: none;\n    -o-user-drag: none;\n  }\n\n  :host([data-boxed='true']) {\n    width: 40px;\n    height: 40px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background-color: ${({ tokens }) => tokens.theme.foregroundPrimary};\n    border-radius: ${({ borderRadius }) => borderRadius[2]};\n  }\n\n  :host([data-boxed='true']) img {\n    width: 20px;\n    height: 20px;\n    border-radius: ${({ borderRadius }) => borderRadius[16]};\n  }\n\n  :host([data-full='true']) img {\n    width: 100%;\n    height: 100%;\n  }\n\n  :host([data-boxed='true']) wui-icon {\n    width: 20px;\n    height: 20px;\n  }\n\n  :host([data-icon='error']) {\n    background-color: ${({ tokens }) => tokens.core.backgroundError};\n  }\n\n  :host([data-rounded='true']) {\n    border-radius: ${({ borderRadius }) => borderRadius[16]};\n  }\n`;\n//# sourceMappingURL=styles.js.map","var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n    if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n    return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { resetStyles } from '../../utils/ThemeUtil.js';\nimport { customElement } from '../../utils/WebComponentsUtil.js';\nimport styles from './styles.js';\nlet WuiImage = class WuiImage extends LitElement {\n    constructor() {\n        super(...arguments);\n        this.src = './path/to/image.jpg';\n        this.alt = 'Image';\n        this.size = undefined;\n        this.boxed = false;\n        this.rounded = false;\n        this.fullSize = false;\n    }\n    render() {\n        const getSize = {\n            inherit: 'inherit',\n            xxs: '2',\n            xs: '3',\n            sm: '4',\n            md: '4',\n            mdl: '5',\n            lg: '5',\n            xl: '6',\n            xxl: '7',\n            '3xl': '8',\n            '4xl': '9',\n            '5xl': '10'\n        };\n        this.style.cssText = `\n      --local-width: ${this.size ? `var(--apkt-spacing-${getSize[this.size]});` : '100%'};\n      --local-height: ${this.size ? `var(--apkt-spacing-${getSize[this.size]});` : '100%'};\n      `;\n        this.dataset['boxed'] = this.boxed ? 'true' : 'false';\n        this.dataset['rounded'] = this.rounded ? 'true' : 'false';\n        this.dataset['full'] = this.fullSize ? 'true' : 'false';\n        this.dataset['icon'] = this.iconColor || 'inherit';\n        if (this.icon) {\n            return html `<wui-icon\n        color=${this.iconColor || 'inherit'}\n        name=${this.icon}\n        size=\"lg\"\n      ></wui-icon> `;\n        }\n        if (this.logo) {\n            return html `<wui-icon size=\"lg\" color=\"inherit\" name=${this.logo}></wui-icon> `;\n        }\n        return html `<img src=${ifDefined(this.src)} alt=${this.alt} @error=${this.handleImageError} />`;\n    }\n    handleImageError() {\n        this.dispatchEvent(new CustomEvent('onLoadError', { bubbles: true, composed: true }));\n    }\n};\nWuiImage.styles = [resetStyles, styles];\n__decorate([\n    property()\n], WuiImage.prototype, \"src\", void 0);\n__decorate([\n    property()\n], WuiImage.prototype, \"logo\", void 0);\n__decorate([\n    property()\n], WuiImage.prototype, \"icon\", void 0);\n__decorate([\n    property()\n], WuiImage.prototype, \"iconColor\", void 0);\n__decorate([\n    property()\n], WuiImage.prototype, \"alt\", void 0);\n__decorate([\n    property()\n], WuiImage.prototype, \"size\", void 0);\n__decorate([\n    property({ type: Boolean })\n], WuiImage.prototype, \"boxed\", void 0);\n__decorate([\n    property({ type: Boolean })\n], WuiImage.prototype, \"rounded\", void 0);\n__decorate([\n    property({ type: Boolean })\n], WuiImage.prototype, \"fullSize\", void 0);\nWuiImage = __decorate([\n    customElement('wui-image')\n], WuiImage);\nexport { WuiImage };\n//# sourceMappingURL=index.js.map"],"names":["i","WuiImage","LitElement","html","ifDefined","property"],"mappings":"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"}