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

package/dist/index-CG2tDcOE.js

@@ -0,0 +1,182 @@
+import { w as withErrorBoundary, p as proxy, s as subscribeKey, i as subscribe, m as css, o as i, x } from "./appkit-8yrMZRW-.js";
+import { r } from "./class-map-k3nlzPqR.js";
+import { c as customElement } from "./index-CNivx0yI.js";
+const state = proxy({
+  message: "",
+  open: false,
+  triggerRect: {
+    width: 0,
+    height: 0,
+    top: 0,
+    left: 0
+  },
+  variant: "shade"
+});
+const controller = {
+  state,
+  subscribe(callback) {
+    return subscribe(state, () => callback(state));
+  },
+  subscribeKey(key, callback) {
+    return subscribeKey(state, key, callback);
+  },
+  showTooltip({ message, triggerRect, variant }) {
+    state.open = true;
+    state.message = message;
+    state.triggerRect = triggerRect;
+    state.variant = variant;
+  },
+  hide() {
+    state.open = false;
+    state.message = "";
+    state.triggerRect = {
+      width: 0,
+      height: 0,
+      top: 0,
+      left: 0
+    };
+  }
+};
+const TooltipController = withErrorBoundary(controller);
+const styles = css`
+  :host {
+    pointer-events: none;
+  }
+
+  :host > wui-flex {
+    display: var(--w3m-tooltip-display);
+    opacity: var(--w3m-tooltip-opacity);
+    padding: 9px ${({ spacing }) => spacing["3"]} 10px ${({ spacing }) => spacing["3"]};
+    border-radius: ${({ borderRadius }) => borderRadius["3"]};
+    color: ${({ tokens }) => tokens.theme.backgroundPrimary};
+    position: absolute;
+    top: var(--w3m-tooltip-top);
+    left: var(--w3m-tooltip-left);
+    transform: translate(calc(-50% + var(--w3m-tooltip-parent-width)), calc(-100% - 8px));
+    max-width: calc(var(--apkt-modal-width) - ${({ spacing }) => spacing["5"]});
+    transition: opacity ${({ durations }) => durations["lg"]}
+      ${({ easings }) => easings["ease-out-power-2"]};
+    will-change: opacity;
+    opacity: 0;
+    animation-duration: ${({ durations }) => durations["xl"]};
+    animation-timing-function: ${({ easings }) => easings["ease-out-power-2"]};
+    animation-name: fade-in;
+    animation-fill-mode: forwards;
+  }
+
+  :host([data-variant='shade']) > wui-flex {
+    background-color: ${({ tokens }) => tokens.theme.foregroundPrimary};
+  }
+
+  :host([data-variant='shade']) > wui-flex > wui-text {
+    color: ${({ tokens }) => tokens.theme.textSecondary};
+  }
+
+  :host([data-variant='fill']) > wui-flex {
+    background-color: ${({ tokens }) => tokens.theme.textPrimary};
+    border: none;
+  }
+
+  wui-icon {
+    position: absolute;
+    width: 12px !important;
+    height: 4px !important;
+    color: ${({ tokens }) => tokens.theme.foregroundPrimary};
+  }
+
+  wui-icon[data-placement='top'] {
+    bottom: 0px;
+    left: 50%;
+    transform: translate(-50%, 95%);
+  }
+
+  wui-icon[data-placement='bottom'] {
+    top: 0;
+    left: 50%;
+    transform: translate(-50%, -95%) rotate(180deg);
+  }
+
+  wui-icon[data-placement='right'] {
+    top: 50%;
+    left: 0;
+    transform: translate(-65%, -50%) rotate(90deg);
+  }
+
+  wui-icon[data-placement='left'] {
+    top: 50%;
+    right: 0%;
+    transform: translate(65%, -50%) rotate(270deg);
+  }
+
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+`;
+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 W3mTooltip = class W3mTooltip2 extends i {
+  constructor() {
+    super();
+    this.unsubscribe = [];
+    this.open = TooltipController.state.open;
+    this.message = TooltipController.state.message;
+    this.triggerRect = TooltipController.state.triggerRect;
+    this.variant = TooltipController.state.variant;
+    this.unsubscribe.push(...[
+      TooltipController.subscribe((newState) => {
+        this.open = newState.open;
+        this.message = newState.message;
+        this.triggerRect = newState.triggerRect;
+        this.variant = newState.variant;
+      })
+    ]);
+  }
+  disconnectedCallback() {
+    this.unsubscribe.forEach((unsubscribe) => unsubscribe());
+  }
+  render() {
+    this.dataset["variant"] = this.variant;
+    const topValue = this.triggerRect.top;
+    const leftValue = this.triggerRect.left;
+    this.style.cssText = `
+    --w3m-tooltip-top: ${topValue}px;
+    --w3m-tooltip-left: ${leftValue}px;
+    --w3m-tooltip-parent-width: ${this.triggerRect.width / 2}px;
+    --w3m-tooltip-display: ${this.open ? "flex" : "none"};
+    --w3m-tooltip-opacity: ${this.open ? 1 : 0};
+    `;
+    return x`<wui-flex>
+      <wui-icon data-placement="top" size="inherit" name="cursor"></wui-icon>
+      <wui-text color="primary" variant="sm-regular">${this.message}</wui-text>
+    </wui-flex>`;
+  }
+};
+W3mTooltip.styles = [styles];
+__decorate([
+  r()
+], W3mTooltip.prototype, "open", void 0);
+__decorate([
+  r()
+], W3mTooltip.prototype, "message", void 0);
+__decorate([
+  r()
+], W3mTooltip.prototype, "triggerRect", void 0);
+__decorate([
+  r()
+], W3mTooltip.prototype, "variant", void 0);
+W3mTooltip = __decorate([
+  customElement("w3m-tooltip")
+], W3mTooltip);
+export {
+  TooltipController as T
+};
+//# sourceMappingURL=index-CG2tDcOE.js.map

package/dist/index-CG2tDcOE.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-CG2tDcOE.js","sources":["../../controllers/dist/esm/src/controllers/TooltipController.js","../../scaffold-ui/dist/esm/src/partials/w3m-tooltip/styles.js","../../scaffold-ui/dist/esm/src/partials/w3m-tooltip/index.js"],"sourcesContent":["import { proxy, subscribe as sub } from 'valtio/vanilla';\nimport { subscribeKey as subKey } from 'valtio/vanilla/utils';\nimport { withErrorBoundary } from '../utils/withErrorBoundary.js';\n// -- State --------------------------------------------- //\nconst state = proxy({\n    message: '',\n    open: false,\n    triggerRect: {\n        width: 0,\n        height: 0,\n        top: 0,\n        left: 0\n    },\n    variant: 'shade'\n});\n// -- Controller ---------------------------------------- //\nconst controller = {\n    state,\n    subscribe(callback) {\n        return sub(state, () => callback(state));\n    },\n    subscribeKey(key, callback) {\n        return subKey(state, key, callback);\n    },\n    showTooltip({ message, triggerRect, variant }) {\n        state.open = true;\n        state.message = message;\n        state.triggerRect = triggerRect;\n        state.variant = variant;\n    },\n    hide() {\n        state.open = false;\n        state.message = '';\n        state.triggerRect = {\n            width: 0,\n            height: 0,\n            top: 0,\n            left: 0\n        };\n    }\n};\n// Export the controller wrapped with our error boundary\nexport const TooltipController = withErrorBoundary(controller);\n//# sourceMappingURL=TooltipController.js.map","import { css } from '@reown/appkit-ui';\nexport default css `\n  :host {\n    pointer-events: none;\n  }\n\n  :host > wui-flex {\n    display: var(--w3m-tooltip-display);\n    opacity: var(--w3m-tooltip-opacity);\n    padding: 9px ${({ spacing }) => spacing['3']} 10px ${({ spacing }) => spacing['3']};\n    border-radius: ${({ borderRadius }) => borderRadius['3']};\n    color: ${({ tokens }) => tokens.theme.backgroundPrimary};\n    position: absolute;\n    top: var(--w3m-tooltip-top);\n    left: var(--w3m-tooltip-left);\n    transform: translate(calc(-50% + var(--w3m-tooltip-parent-width)), calc(-100% - 8px));\n    max-width: calc(var(--apkt-modal-width) - ${({ spacing }) => spacing['5']});\n    transition: opacity ${({ durations }) => durations['lg']}\n      ${({ easings }) => easings['ease-out-power-2']};\n    will-change: opacity;\n    opacity: 0;\n    animation-duration: ${({ durations }) => durations['xl']};\n    animation-timing-function: ${({ easings }) => easings['ease-out-power-2']};\n    animation-name: fade-in;\n    animation-fill-mode: forwards;\n  }\n\n  :host([data-variant='shade']) > wui-flex {\n    background-color: ${({ tokens }) => tokens.theme.foregroundPrimary};\n  }\n\n  :host([data-variant='shade']) > wui-flex > wui-text {\n    color: ${({ tokens }) => tokens.theme.textSecondary};\n  }\n\n  :host([data-variant='fill']) > wui-flex {\n    background-color: ${({ tokens }) => tokens.theme.textPrimary};\n    border: none;\n  }\n\n  wui-icon {\n    position: absolute;\n    width: 12px !important;\n    height: 4px !important;\n    color: ${({ tokens }) => tokens.theme.foregroundPrimary};\n  }\n\n  wui-icon[data-placement='top'] {\n    bottom: 0px;\n    left: 50%;\n    transform: translate(-50%, 95%);\n  }\n\n  wui-icon[data-placement='bottom'] {\n    top: 0;\n    left: 50%;\n    transform: translate(-50%, -95%) rotate(180deg);\n  }\n\n  wui-icon[data-placement='right'] {\n    top: 50%;\n    left: 0;\n    transform: translate(-65%, -50%) rotate(90deg);\n  }\n\n  wui-icon[data-placement='left'] {\n    top: 50%;\n    right: 0%;\n    transform: translate(65%, -50%) rotate(270deg);\n  }\n\n  @keyframes fade-in {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\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 { TooltipController } from '@reown/appkit-controllers';\nimport { customElement } from '@reown/appkit-ui';\nimport '@reown/appkit-ui/wui-flex';\nimport '@reown/appkit-ui/wui-icon';\nimport '@reown/appkit-ui/wui-text';\nimport styles from './styles.js';\nlet W3mTooltip = class W3mTooltip extends LitElement {\n    constructor() {\n        super();\n        this.unsubscribe = [];\n        this.open = TooltipController.state.open;\n        this.message = TooltipController.state.message;\n        this.triggerRect = TooltipController.state.triggerRect;\n        this.variant = TooltipController.state.variant;\n        this.unsubscribe.push(...[\n            TooltipController.subscribe(newState => {\n                this.open = newState.open;\n                this.message = newState.message;\n                this.triggerRect = newState.triggerRect;\n                this.variant = newState.variant;\n            })\n        ]);\n    }\n    disconnectedCallback() {\n        this.unsubscribe.forEach(unsubscribe => unsubscribe());\n    }\n    render() {\n        this.dataset['variant'] = this.variant;\n        const topValue = this.triggerRect.top;\n        const leftValue = this.triggerRect.left;\n        this.style.cssText = `\n    --w3m-tooltip-top: ${topValue}px;\n    --w3m-tooltip-left: ${leftValue}px;\n    --w3m-tooltip-parent-width: ${this.triggerRect.width / 2}px;\n    --w3m-tooltip-display: ${this.open ? 'flex' : 'none'};\n    --w3m-tooltip-opacity: ${this.open ? 1 : 0};\n    `;\n        return html `<wui-flex>\n      <wui-icon data-placement=\"top\" size=\"inherit\" name=\"cursor\"></wui-icon>\n      <wui-text color=\"primary\" variant=\"sm-regular\">${this.message}</wui-text>\n    </wui-flex>`;\n    }\n};\nW3mTooltip.styles = [styles];\n__decorate([\n    state()\n], W3mTooltip.prototype, \"open\", void 0);\n__decorate([\n    state()\n], W3mTooltip.prototype, \"message\", void 0);\n__decorate([\n    state()\n], W3mTooltip.prototype, \"triggerRect\", void 0);\n__decorate([\n    state()\n], W3mTooltip.prototype, \"variant\", void 0);\nW3mTooltip = __decorate([\n    customElement('w3m-tooltip')\n], W3mTooltip);\nexport { W3mTooltip };\n//# sourceMappingURL=index.js.map"],"names":["sub","subKey","r","i","W3mTooltip","LitElement","html","state"],"mappings":"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"}

package/dist/index-CM8qnUNO.js

@@ -0,0 +1,181 @@
+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 {
+    position: relative;
+  }
+
+  button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: transparent;
+    padding: ${({ spacing }) => spacing[1]};
+  }
+
+  /* -- Colors --------------------------------------------------- */
+  button[data-type='accent'] wui-icon {
+    color: ${({ tokens }) => tokens.core.iconAccentPrimary};
+  }
+
+  button[data-type='neutral'][data-variant='primary'] wui-icon {
+    color: ${({ tokens }) => tokens.theme.iconInverse};
+  }
+
+  button[data-type='neutral'][data-variant='secondary'] wui-icon {
+    color: ${({ tokens }) => tokens.theme.iconDefault};
+  }
+
+  button[data-type='success'] wui-icon {
+    color: ${({ tokens }) => tokens.core.iconSuccess};
+  }
+
+  button[data-type='error'] wui-icon {
+    color: ${({ tokens }) => tokens.core.iconError};
+  }
+
+  /* -- Sizes --------------------------------------------------- */
+  button[data-size='xs'] {
+    width: 16px;
+    height: 16px;
+
+    border-radius: ${({ borderRadius }) => borderRadius[1]};
+  }
+
+  button[data-size='sm'] {
+    width: 20px;
+    height: 20px;
+    border-radius: ${({ borderRadius }) => borderRadius[1]};
+  }
+
+  button[data-size='md'] {
+    width: 24px;
+    height: 24px;
+    border-radius: ${({ borderRadius }) => borderRadius[2]};
+  }
+
+  button[data-size='lg'] {
+    width: 28px;
+    height: 28px;
+    border-radius: ${({ borderRadius }) => borderRadius[2]};
+  }
+
+  button[data-size='xs'] wui-icon {
+    width: 8px;
+    height: 8px;
+  }
+
+  button[data-size='sm'] wui-icon {
+    width: 12px;
+    height: 12px;
+  }
+
+  button[data-size='md'] wui-icon {
+    width: 16px;
+    height: 16px;
+  }
+
+  button[data-size='lg'] wui-icon {
+    width: 20px;
+    height: 20px;
+  }
+
+  /* -- Hover --------------------------------------------------- */
+  @media (hover: hover) {
+    button[data-type='accent']:hover:enabled {
+      background-color: ${({ tokens }) => tokens.core.foregroundAccent010};
+    }
+
+    button[data-variant='primary'][data-type='neutral']:hover:enabled {
+      background-color: ${({ tokens }) => tokens.theme.foregroundSecondary};
+    }
+
+    button[data-variant='secondary'][data-type='neutral']:hover:enabled {
+      background-color: ${({ tokens }) => tokens.theme.foregroundSecondary};
+    }
+
+    button[data-type='success']:hover:enabled {
+      background-color: ${({ tokens }) => tokens.core.backgroundSuccess};
+    }
+
+    button[data-type='error']:hover:enabled {
+      background-color: ${({ tokens }) => tokens.core.backgroundError};
+    }
+  }
+
+  /* -- Focus --------------------------------------------------- */
+  button:focus-visible {
+    box-shadow: 0 0 0 4px ${({ tokens }) => tokens.core.foregroundAccent020};
+  }
+
+  /* -- Properties --------------------------------------------------- */
+  button[data-full-width='true'] {
+    width: 100%;
+  }
+
+  :host([fullWidth]) {
+    width: 100%;
+  }
+
+  button[disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`;
+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 WuiIconButton = class WuiIconButton2 extends i {
+  constructor() {
+    super(...arguments);
+    this.icon = "card";
+    this.variant = "primary";
+    this.type = "accent";
+    this.size = "md";
+    this.iconSize = void 0;
+    this.fullWidth = false;
+    this.disabled = false;
+  }
+  render() {
+    return x`<button
+      data-variant=${this.variant}
+      data-type=${this.type}
+      data-size=${this.size}
+      data-full-width=${this.fullWidth}
+      ?disabled=${this.disabled}
+    >
+      <wui-icon color="inherit" name=${this.icon} size=${o(this.iconSize)}></wui-icon>
+    </button>`;
+  }
+};
+WuiIconButton.styles = [resetStyles, elementStyles, styles];
+__decorate([
+  n()
+], WuiIconButton.prototype, "icon", void 0);
+__decorate([
+  n()
+], WuiIconButton.prototype, "variant", void 0);
+__decorate([
+  n()
+], WuiIconButton.prototype, "type", void 0);
+__decorate([
+  n()
+], WuiIconButton.prototype, "size", void 0);
+__decorate([
+  n()
+], WuiIconButton.prototype, "iconSize", void 0);
+__decorate([
+  n({ type: Boolean })
+], WuiIconButton.prototype, "fullWidth", void 0);
+__decorate([
+  n({ type: Boolean })
+], WuiIconButton.prototype, "disabled", void 0);
+WuiIconButton = __decorate([
+  customElement("wui-icon-button")
+], WuiIconButton);
+//# sourceMappingURL=index-CM8qnUNO.js.map

package/dist/index-CM8qnUNO.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-CM8qnUNO.js","sources":["../../ui/dist/esm/src/composites/wui-icon-button/styles.js","../../ui/dist/esm/src/composites/wui-icon-button/index.js"],"sourcesContent":["import { css } from '../../utils/ThemeHelperUtil.js';\nexport default css `\n  :host {\n    position: relative;\n  }\n\n  button {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background-color: transparent;\n    padding: ${({ spacing }) => spacing[1]};\n  }\n\n  /* -- Colors --------------------------------------------------- */\n  button[data-type='accent'] wui-icon {\n    color: ${({ tokens }) => tokens.core.iconAccentPrimary};\n  }\n\n  button[data-type='neutral'][data-variant='primary'] wui-icon {\n    color: ${({ tokens }) => tokens.theme.iconInverse};\n  }\n\n  button[data-type='neutral'][data-variant='secondary'] wui-icon {\n    color: ${({ tokens }) => tokens.theme.iconDefault};\n  }\n\n  button[data-type='success'] wui-icon {\n    color: ${({ tokens }) => tokens.core.iconSuccess};\n  }\n\n  button[data-type='error'] wui-icon {\n    color: ${({ tokens }) => tokens.core.iconError};\n  }\n\n  /* -- Sizes --------------------------------------------------- */\n  button[data-size='xs'] {\n    width: 16px;\n    height: 16px;\n\n    border-radius: ${({ borderRadius }) => borderRadius[1]};\n  }\n\n  button[data-size='sm'] {\n    width: 20px;\n    height: 20px;\n    border-radius: ${({ borderRadius }) => borderRadius[1]};\n  }\n\n  button[data-size='md'] {\n    width: 24px;\n    height: 24px;\n    border-radius: ${({ borderRadius }) => borderRadius[2]};\n  }\n\n  button[data-size='lg'] {\n    width: 28px;\n    height: 28px;\n    border-radius: ${({ borderRadius }) => borderRadius[2]};\n  }\n\n  button[data-size='xs'] wui-icon {\n    width: 8px;\n    height: 8px;\n  }\n\n  button[data-size='sm'] wui-icon {\n    width: 12px;\n    height: 12px;\n  }\n\n  button[data-size='md'] wui-icon {\n    width: 16px;\n    height: 16px;\n  }\n\n  button[data-size='lg'] wui-icon {\n    width: 20px;\n    height: 20px;\n  }\n\n  /* -- Hover --------------------------------------------------- */\n  @media (hover: hover) {\n    button[data-type='accent']:hover:enabled {\n      background-color: ${({ tokens }) => tokens.core.foregroundAccent010};\n    }\n\n    button[data-variant='primary'][data-type='neutral']:hover:enabled {\n      background-color: ${({ tokens }) => tokens.theme.foregroundSecondary};\n    }\n\n    button[data-variant='secondary'][data-type='neutral']:hover:enabled {\n      background-color: ${({ tokens }) => tokens.theme.foregroundSecondary};\n    }\n\n    button[data-type='success']:hover:enabled {\n      background-color: ${({ tokens }) => tokens.core.backgroundSuccess};\n    }\n\n    button[data-type='error']:hover:enabled {\n      background-color: ${({ tokens }) => tokens.core.backgroundError};\n    }\n  }\n\n  /* -- Focus --------------------------------------------------- */\n  button:focus-visible {\n    box-shadow: 0 0 0 4px ${({ tokens }) => tokens.core.foregroundAccent020};\n  }\n\n  /* -- Properties --------------------------------------------------- */\n  button[data-full-width='true'] {\n    width: 100%;\n  }\n\n  :host([fullWidth]) {\n    width: 100%;\n  }\n\n  button[disabled] {\n    opacity: 0.5;\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 '../../components/wui-icon/index.js';\nimport { elementStyles, resetStyles } from '../../utils/ThemeUtil.js';\nimport { customElement } from '../../utils/WebComponentsUtil.js';\nimport styles from './styles.js';\nlet WuiIconButton = class WuiIconButton extends LitElement {\n    constructor() {\n        super(...arguments);\n        this.icon = 'card';\n        this.variant = 'primary';\n        this.type = 'accent';\n        this.size = 'md';\n        this.iconSize = undefined;\n        this.fullWidth = false;\n        this.disabled = false;\n    }\n    render() {\n        return html `<button\n      data-variant=${this.variant}\n      data-type=${this.type}\n      data-size=${this.size}\n      data-full-width=${this.fullWidth}\n      ?disabled=${this.disabled}\n    >\n      <wui-icon color=\"inherit\" name=${this.icon} size=${ifDefined(this.iconSize)}></wui-icon>\n    </button>`;\n    }\n};\nWuiIconButton.styles = [resetStyles, elementStyles, styles];\n__decorate([\n    property()\n], WuiIconButton.prototype, \"icon\", void 0);\n__decorate([\n    property()\n], WuiIconButton.prototype, \"variant\", void 0);\n__decorate([\n    property()\n], WuiIconButton.prototype, \"type\", void 0);\n__decorate([\n    property()\n], WuiIconButton.prototype, \"size\", void 0);\n__decorate([\n    property()\n], WuiIconButton.prototype, \"iconSize\", void 0);\n__decorate([\n    property({ type: Boolean })\n], WuiIconButton.prototype, \"fullWidth\", void 0);\n__decorate([\n    property({ type: Boolean })\n], WuiIconButton.prototype, \"disabled\", void 0);\nWuiIconButton = __decorate([\n    customElement('wui-icon-button')\n], WuiIconButton);\nexport { WuiIconButton };\n//# sourceMappingURL=index.js.map"],"names":["i","WuiIconButton","LitElement","html","ifDefined","property"],"mappings":"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"}