@vertexvis/ui 0.1.5-testing.0 → 1.0.0-testing.0

package/dist/esm/auto-resize-textarea-087fecdb.js

@@ -1,135 +0,0 @@
-import { r as registerInstance, h, H as Host, c as readTask, g as getElement } from './index-72f28b71.js';
-import { g as getFirstSlottedElement } from './slots-fbb5afb3.js';
-
-function isTextareaElement(el) {
-  return (el === null || el === void 0 ? void 0 : el.tagName) === 'TEXTAREA';
-}
-
-const autoResizeTextareaCss = ":host{position:relative;width:100%;height:100%;font-size:0}.hidden-text{position:absolute;box-sizing:border-box;top:0;left:0;height:0;width:100%;padding:0;margin:0;border:none;visibility:hidden;pointer-events:none;overflow:hidden}";
-
-const AutoResizeTextArea = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.previousScrollTop = 0;
-    this.rowCount = 0;
-    this.textareaSelector = undefined;
-    this.initialValue = undefined;
-    this.minRows = 1;
-    this.maxRows = undefined;
-    this.textValue = undefined;
-    this.prepareHiddenTextElement = this.prepareHiddenTextElement.bind(this);
-    this.updateScrollTop = this.updateScrollTop.bind(this);
-    this.computeRowHeights = this.computeRowHeights.bind(this);
-    this.updateValue = this.updateValue.bind(this);
-    this.updatePreviousScrollTop = this.updatePreviousScrollTop.bind(this);
-    this.updateOverflow = this.updateOverflow.bind(this);
-    this.resizeObserver = new ResizeObserver(this.computeRowHeights);
-  }
-  componentWillLoad() {
-    this.computeRowHeights();
-  }
-  componentDidLoad() {
-    this.slottedElement = this.getSlottedTextareaElement();
-    this.textValue = this.initialValue;
-    this.prepareHiddenTextElement();
-    this.computeRowHeights();
-    if (this.slottedElement != null) {
-      this.resizeObserver.observe(this.slottedElement);
-      this.addEventListener();
-    }
-  }
-  componentDidRender() {
-    // This re-computes the number of rows after a rerender has
-    // rendered the current value to the hidden textarea.
-    this.computeRowHeights();
-  }
-  disconnectedCallback() {
-    this.removeEventListener();
-    this.resizeObserver.disconnect();
-  }
-  render() {
-    return (h(Host, null, h("textarea", { class: "hidden-text", ref: (el) => {
-        this.hiddenTextRef = el;
-      } }, this.textValue), h("slot", null)));
-  }
-  addEventListener() {
-    var _a, _b;
-    (_a = this.slottedElement) === null || _a === void 0 ? void 0 : _a.addEventListener('input', this.updateValue);
-    (_b = this.slottedElement) === null || _b === void 0 ? void 0 : _b.addEventListener('keydown', this.updatePreviousScrollTop);
-  }
-  removeEventListener() {
-    var _a, _b;
-    (_a = this.slottedElement) === null || _a === void 0 ? void 0 : _a.removeEventListener('input', this.updateValue);
-    (_b = this.slottedElement) === null || _b === void 0 ? void 0 : _b.removeEventListener('keydown', this.updatePreviousScrollTop);
-  }
-  updateValue() {
-    if (this.slottedElement != null) {
-      this.textValue = this.slottedElement.value;
-      this.updateOverflow();
-    }
-  }
-  updatePreviousScrollTop() {
-    if (this.slottedElement != null) {
-      this.previousScrollTop = this.slottedElement.scrollTop;
-    }
-  }
-  updateScrollTop() {
-    if (this.slottedElement != null) {
-      // This prevents an issue where the slotted textarea auto-scrolls
-      // to a newline. This is desired behavior if we're capped at the
-      // max rows, but undesired if the component will continue to expand.
-      this.slottedElement.scrollTop =
-        this.maxRows == null || this.rowCount >= this.maxRows
-          ? this.slottedElement.scrollTop
-          : this.previousScrollTop;
-    }
-  }
-  computeRowHeights() {
-    this.updateScrollTop();
-    readTask(() => {
-      var _a;
-      if (typeof window !== 'undefined' &&
-        this.slottedElement != null &&
-        this.hiddenTextRef != null) {
-        const computedStyles = window.getComputedStyle(this.slottedElement);
-        const lineHeight = Math.floor(parseFloat(computedStyles.lineHeight));
-        const totalRows = Math.floor(this.hiddenTextRef.scrollHeight / lineHeight);
-        this.rowCount = Math.max(this.minRows, Math.min((_a = this.maxRows) !== null && _a !== void 0 ? _a : totalRows, totalRows));
-        this.slottedElement.rows = this.rowCount;
-        this.updateOverflow();
-      }
-    });
-  }
-  prepareHiddenTextElement() {
-    readTask(() => {
-      if (typeof window !== 'undefined' &&
-        this.slottedElement != null &&
-        this.hiddenTextRef != null) {
-        const computedStyles = window.getComputedStyle(this.slottedElement);
-        this.hiddenTextRef.setAttribute('style', `line-height: ${computedStyles.lineHeight}; font-size: ${computedStyles.fontSize}; font-family: ${computedStyles.fontFamily}; padding-left: ${computedStyles.paddingLeft}; padding-right: ${computedStyles.paddingRight};`);
-      }
-    });
-  }
-  getSlottedTextareaElement() {
-    const el = getFirstSlottedElement({
-      hostElement: this.hostElement,
-      selector: this.textareaSelector,
-    });
-    if (isTextareaElement(el)) {
-      return el;
-    }
-    else {
-      throw new Error('The vertex-auto-resize-textarea component is only compatible with `HTMLTextAreaElement`s');
-    }
-  }
-  updateOverflow() {
-    var _a;
-    (_a = this.slottedElement) === null || _a === void 0 ? void 0 : _a.setAttribute('style', this.maxRows && this.rowCount >= this.maxRows
-      ? 'overflow-y: auto;'
-      : 'overflow: hidden;');
-  }
-  get hostElement() { return getElement(this); }
-};
-AutoResizeTextArea.style = autoResizeTextareaCss;
-
-export { AutoResizeTextArea as A };

package/dist/esm/avatar-775455a5.js

@@ -1,43 +0,0 @@
-import { r as registerInstance, h } from './index-72f28b71.js';
-import { c as classnames } from './index-9c609209.js';
-
-const avatarCss = ".root{width:1.875rem;height:1.875rem;font-size:var(--vertex-ui-text-xs)}.small{width:1.5rem;height:1.5rem;font-size:var(--vertex-ui-text-t)}.avatar{border-radius:50%;font-weight:var(--vertex-ui-font-weight-medium);font-family:var(--vertex-ui-font-family);color:var(--vertex-ui-blue-800);border:solid 1px var(--vertex-ui-blue-800);background-color:var(--vertex-ui-neutral-050);display:flex;align-items:center;justify-content:center;user-select:none}.avatar.value{color:var(--vertex-ui-white);border:solid 1px var(--vertex-ui-white);background-color:var(--vertex-ui-neutral-500)}.avatar.active{cursor:pointer}.avatar.active:hover{background-color:var(--vertex-ui-neutral-200)}";
-
-const Avatar = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.firstName = undefined;
-    this.lastName = undefined;
-    this.value = undefined;
-    this.active = false;
-    this.variant = 'default';
-  }
-  render() {
-    if (!this.isValidStringValue(this.firstName) &&
-      !this.isValidStringValue(this.value)) {
-      return h("div", null);
-    }
-    return (h("div", { class: classnames('avatar', {
-        root: this.variant === 'default',
-        small: this.variant === 'small',
-        active: this.active,
-        value: !this.isValidStringValue(this.firstName),
-      }) }, this.getDisplayValue()));
-  }
-  isValidStringValue(value) {
-    return value != null && value !== '';
-  }
-  getDisplayValue() {
-    if (this.isValidStringValue(this.firstName)) {
-      return this.isValidStringValue(this.lastName)
-        ? `${this.firstName[0]}${this.lastName[0]}`
-        : this.firstName[0];
-    }
-    else if (this.isValidStringValue(this.value)) {
-      return this.value;
-    }
-  }
-};
-Avatar.style = avatarCss;
-
-export { Avatar as A };

package/dist/esm/avatar-group-e5ca86bf.js

@@ -1,15 +0,0 @@
-import { r as registerInstance, h } from './index-72f28b71.js';
-
-const avatarGroupCss = ".root{position:relative}.base{position:absolute;left:0;top:0}.top{position:absolute;left:0.5rem;top:0.5rem}";
-
-const AvatarGroup = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-  }
-  render() {
-    return (h("div", { class: "root" }, h("div", { class: "base" }, h("slot", { name: "base" })), h("div", { class: "top" }, h("slot", null))));
-  }
-};
-AvatarGroup.style = avatarGroupCss;
-
-export { AvatarGroup as A };

package/dist/esm/badge-6d27ca92.js

@@ -1,21 +0,0 @@
-import { r as registerInstance, h, H as Host } from './index-72f28b71.js';
-import { c as classnames } from './index-9c609209.js';
-
-const badgeCss = ".string-overlay{width:100%;line-height:1.0rem;margin-left:5px;margin-right:5px;border-radius:10px;font-size:var(--vertex-ui-text-xxs)}.string-overlay.primary{color:var(--vertex-ui-white);background-color:var(--vertex-ui-blue-600)}.string-overlay.secondary{color:var(--vertex-ui-black);background-color:var(--vertex-ui-neutral-300)}";
-
-const Badge = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.badgeText = undefined;
-    this.badgeColor = 'primary';
-  }
-  render() {
-    return (h(Host, null, h("div", { class: classnames('string-overlay', {
-        primary: this.badgeColor === 'primary',
-        secondary: this.badgeColor === 'secondary',
-      }) }, this.badgeText)));
-  }
-};
-Badge.style = badgeCss;
-
-export { Badge as B };

package/dist/esm/banner-b292060d.js

@@ -1,102 +0,0 @@
-import { r as registerInstance, e as createEvent, h } from './index-72f28b71.js';
-import { c as classnames } from './index-9c609209.js';
-import { g as getSvg } from './icon-helper-7437b548.js';
-
-const bannerCss = ":host{--banner-width:auto;--banner-min-width:25rem;--banner-max-width:35rem;--banner-white-space:normal}.anchor{position:fixed}.top-left{left:24px;top:24px}.top{left:50vw;top:24px}.top-right{right:24px;top:24px}.popover{position:fixed;--open-animation-name:open-fade-in;--close-animation-name:close-fade-out}.actions{display:flex;align-items:center;margin-left:auto}.close{cursor:pointer;margin-left:16px}.close:hover{color:var(--vertex-ui-blue-500)}.banner{position:relative;display:flex;align-items:center;width:var(--banner-width);min-width:var(--banner-min-width);max-width:var(--banner-max-width);padding:16px;font-family:var(--vertex-ui-font-family);font-size:var(--vertex-ui-text-base);border-radius:4px;white-space:var(--banner-white-space);user-select:none;filter:drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));border:1px solid var(--vertex-ui-neutral-300)}.banner.hidden{pointer-events:none}.icon{display:flex;margin-right:16px;justify-content:center;align-items:center;fill:currentColor;height:1.25rem;width:1.25rem}.icon-info{color:var(--vertex-ui-blue-600)}.icon-success{color:var(--vertex-ui-green-600)}.icon-warn{color:var(--vertex-ui-orange-600)}.icon-error{color:var(--vertex-ui-red-600)}.message{align-items:center}.info{background-color:var(--vertex-ui-blue-100);color:var(--vertex-ui-neutral-800)}.success{background-color:var(--vertex-ui-green-100);color:var(--vertex-ui-neutral-800)}.warn{background-color:var(--vertex-ui-orange-100);color:var(--vertex-ui-neutral-800)}.error{background-color:var(--vertex-ui-red-100);color:var(--vertex-ui-neutral-800)}";
-
-const DEFAULT_BANNER_DURATION = 3000;
-const Banner = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.closed = createEvent(this, "closed", 7);
-    this.content = undefined;
-    this.placement = 'top';
-    this.duration = DEFAULT_BANNER_DURATION;
-    this.animated = true;
-    this.open = false;
-    this.type = 'info';
-    this.isOpen = undefined;
-    this.handleClose = this.handleClose.bind(this);
-    this.startCloseTimeout = this.startCloseTimeout.bind(this);
-    this.clearCloseTimeout = this.clearCloseTimeout.bind(this);
-    this.restartCloseTimeout = this.restartCloseTimeout.bind(this);
-  }
-  componentDidLoad() {
-    // This allows the component to render once initially to correctly
-    // place the popover anchor.
-    this.isOpen = this.open;
-    if (this.isOpen) {
-      this.restartCloseTimeout();
-    }
-  }
-  async handleOpenChanged(open) {
-    if (open) {
-      this.restartCloseTimeout();
-      this.isOpen = open;
-    }
-  }
-  render() {
-    return (h("vertex-popover", { class: "popover", open: this.isOpen, resizeBehavior: "fixed", backdrop: false, placement: this.getPopoverPlacement(), animated: this.animated }, h("div", { slot: "anchor", class: classnames('anchor', this.placement) }), h("div", { class: classnames('banner', {
-        hidden: !this.isOpen,
-        info: this.type === 'info',
-        success: this.type === 'success',
-        warn: this.type === 'warn',
-        error: this.type === 'error',
-      }) }, h("div", { class: classnames('icon', {
-        'icon-info': this.type === 'info',
-        'icon-success': this.type === 'success',
-        'icon-warn': this.type === 'warn',
-        'icon-error': this.type === 'error',
-      }) }, getSvg(this.getIconName())), this.content ? h("div", { class: "message" }, this.content) : h("slot", null), h("div", { class: "actions" }, h("slot", { name: "action" }), h("vertex-icon-button", { class: "close", iconName: "close", iconSize: "sm", variant: "plain", onClick: this.handleClose })))));
-  }
-  handleClose() {
-    this.clearCloseTimeout();
-    this.isOpen = false;
-    this.closed.emit();
-  }
-  startCloseTimeout() {
-    if (this.closeTimeout == null && this.duration > 0) {
-      this.closeTimeout = setTimeout(() => {
-        this.handleClose();
-      }, this.duration);
-    }
-  }
-  clearCloseTimeout() {
-    if (this.closeTimeout != null) {
-      clearTimeout(this.closeTimeout);
-      this.closeTimeout = undefined;
-    }
-  }
-  restartCloseTimeout() {
-    this.clearCloseTimeout();
-    this.startCloseTimeout();
-  }
-  getPopoverPlacement() {
-    switch (this.placement) {
-      case 'top-left':
-        return 'bottom-start';
-      case 'top':
-        return 'bottom';
-      case 'top-right':
-        return 'bottom-end';
-    }
-  }
-  getIconName() {
-    switch (this.type) {
-      case 'info':
-        return 'info';
-      case 'success':
-        return 'check-circle';
-      case 'warn':
-        return 'caution';
-      case 'error':
-        return 'error-circle';
-    }
-  }
-  static get watchers() { return {
-    "open": ["handleOpenChanged"]
-  }; }
-};
-Banner.style = bannerCss;
-
-export { Banner as B };

package/dist/esm/button-81207236.js

@@ -1,68 +0,0 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-72f28b71.js';
-import { c as classnames } from './index-9c609209.js';
-
-const buttonCss = "button{border:none;background-color:transparent;font-family:var(--vertex-ui-font-family);font-size:0.875rem;padding:0}a{text-decoration:none;font-family:var(--vertex-ui-font-family)}:host{--enabled-cursor:pointer;--disabled-cursor:not-allowed}:host([type]){-webkit-appearance:none !important}:host([disabled=\"\"]){pointer-events:none}.btn{display:flex;align-items:center;justify-content:center;border-radius:0.25rem;box-sizing:border-box;text-decoration:none;cursor:var(--enabled-cursor)}.btn-full{width:100%}.btn.disabled,.btn:not(.disabled):focus-visible,.btn:not(.disabled):active{outline:none}.btn.disabled{cursor:var(--disabled-cursor)}.btn-sm{font-size:var(--vertex-ui-text-sm)}.btn-sm:not(.btn-plaintext){padding:0 0.25rem}.btn-md{font-size:var(--vertex-ui-text-base)}.btn-md:not(.btn-plaintext){padding:0.5rem 1rem}.btn-lg{font-size:var(--vertex-ui-text-lg)}.btn-lg:not(.btn-plaintext){padding:0.75rem 0.75rem}.btn-plaintext{color:var(--vertex-ui-neutral-800)}.btn-primary{color:white;background-color:var(--vertex-ui-blue-700)}.btn-primary:not(.disabled):hover{background-color:var(--vertex-ui-blue-500)}.btn-primary:not(.disabled):focus-visible,.btn-primary:not(.disabled):active{background-color:var(--vertex-ui-blue-600)}.btn-primary:not(.disabled):focus-visible{box-shadow:0 0 0 1px var(--vertex-ui-blue-900)}.btn-primary:not(.disabled):active{box-shadow:none}.btn-primary.disabled{background-color:var(--vertex-ui-blue-200);cursor:var(--disabled-cursor)}.btn-secondary{color:var(--vertex-ui-neutral-800);background-color:var(--vertex-ui-neutral-300)}.btn-secondary:not(.disabled):hover{box-shadow:0 2px 2px rgb(0 0 0 / 20%)}.btn-secondary:not(.disabled):focus-visible,.btn-secondary:not(.disabled):active{background-color:var(--vertex-ui-neutral-400)}.btn-secondary:not(.disabled):focus-visible{box-shadow:0 0 0 1px var(--vertex-ui-neutral-900)}.btn-secondary:not(.disabled):active{box-shadow:none}.btn-secondary.disabled{background-color:var(--vertex-ui-neutral-200);color:var(--vertex-ui-neutral-400)}.btn-danger{color:white;background-color:var(--vertex-ui-red-600)}.btn-danger:not(.disabled):hover{background-color:var(--vertex-ui-red-400)}.btn-danger:not(.disabled):focus-visible{background-color:var(--vertex-ui-red-500);box-shadow:0 0 0 1px var(--vertex-ui-red-900)}.btn-danger:not(.disabled):active{background-color:var(--vertex-ui-red-600);box-shadow:none}.btn-danger.disabled{background-color:var(--vertex-ui-red-200);box-shadow:none}.btn-txt-primary{color:var(--vertex-ui-blue-600)}.btn-txt-primary:not(.disabled):hover{color:var(--vertex-ui-blue-800);background-color:var(--vertex-ui-blue-200)}.btn-txt-primary:not(.disabled):focus-visible,.btn-txt-primary:not(.disabled):active{color:var(--vertex-ui-blue-800);background-color:var(--vertex-ui-blue-300)}.btn-txt-primary:not(.disabled):focus-visible{box-shadow:0 0 0 1px var(--vertex-ui-blue-900)}.btn-txt-primary:not(.disabled):active{box-shadow:none}.btn-txt-primary.disabled{color:var(--vertex-ui-blue-300);box-shadow:none}.btn-txt-secondary{color:var(--vertex-ui-neutral-700)}.btn-txt-secondary:not(.disabled):hover,.btn-txt-secondary:not(.disabled):active,.btn-txt-secondary:not(.disabled):focus-visible{color:var(--vertex-ui-neutral-800);background-color:var(--vertex-ui-neutral-300)}.btn-txt-secondary:not(.disabled):focus-visible{box-shadow:0 0 0 1px var(--vertex-ui-neutral-900)}.btn-txt-secondary.disabled{color:var(--vertex-ui-neutral-300);box-shadow:none}.btn-txt-danger{color:var(--vertex-ui-red-600)}.btn-txt-danger:not(.disabled):focus-visible,.btn-txt-danger:not(.disabled):active,.btn-txt-danger:not(.disabled):hover{color:var(--vertex-ui-red-800)}.btn-txt-danger:not(.disabled):hover{background-color:var(--vertex-ui-red-200)}.btn-txt-danger:not(.disabled):focus-visible,.btn-txt-danger:not(.disabled):active{background-color:var(--vertex-ui-red-300)}.btn-txt-danger:not(.disabled):focus-visible{box-shadow:0 0 0 1px var(--vertex-ui-red-900)}.btn-txt-danger:not(.disabled):active{box-shadow:none}.btn-txt-danger.disabled{color:var(--vertex-ui-red-300);box-shadow:none}.btn-outline-primary{color:var(--vertex-ui-blue-600);border:1px solid var(--vertex-ui-blue-600)}.btn-outline-primary:not(.disabled):hover{color:var(--vertex-ui-blue-800);background-color:var(--vertex-ui-blue-200)}.btn-outline-primary:not(.disabled):focus-visible,.btn-outline-primary:not(.disabled):active{color:var(--vertex-ui-blue-800);background-color:var(--vertex-ui-blue-300)}.btn-outline-primary:not(.disabled):focus-visible{box-shadow:0 0 0 1px var(--vertex-ui-blue-900)}.btn-outline-primary:not(.disabled):active{box-shadow:none}.btn-outline-primary.disabled{color:var(--vertex-ui-blue-300);box-shadow:none}.btn-outline-secondary{color:var(--vertex-ui-neutral-700);border:1px solid var(--vertex-ui-neutral-700)}.btn-outline-secondary:not(.disabled):hover{box-shadow:0 2px 2px rgb(0 0 0 / 20%);background-color:var(--vertex-ui-neutral-300)}.btn-outline-secondary:not(.disabled):focus-visible,.btn-outline-secondary:not(.disabled):active{background-color:var(--vertex-ui-neutral-400)}.btn-outline-secondary:not(.disabled):focus-visible{box-shadow:0 0 0 1px var(--vertex-ui-neutral-900)}.btn-outline-secondary.disabled{color:var(--vertex-ui-neutral-300);box-shadow:none}.btn-outline-danger{color:var(--vertex-ui-red-600);border:1px solid var(--vertex-ui-red-600)}.btn-outline-danger:not(.disabled):focus-visible,.btn-outline-danger:not(.disabled):active,.btn-outline-danger:not(.disabled):hover{color:var(--vertex-ui-red-800)}.btn-outline-danger:not(.disabled):hover{background-color:var(--vertex-ui-red-200)}.btn-outline-danger:not(.disabled):focus-visible,.btn-outline-danger:not(.disabled):active{background-color:var(--vertex-ui-red-300)}.btn-outline-danger:not(.disabled):focus-visible{box-shadow:0 0 0 1px var(--vertex-ui-red-900)}.btn-outline-danger:not(.disabled):active{box-shadow:none}.btn-outline-danger.disabled{color:var(--vertex-ui-red-300);box-shadow:none}";
-
-const Button = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.type = undefined;
-    this.color = 'secondary';
-    this.variant = 'solid';
-    this.size = 'md';
-    this.expand = 'block';
-    this.href = undefined;
-    this.target = undefined;
-    this.disabled = undefined;
-  }
-  connectedCallback() {
-    if (this.hostElement != null && this.type === 'submit') {
-      const form = this.hostElement.closest('form');
-      if (form != null) {
-        this.fakeButton = document.createElement('button');
-        this.fakeButton.setAttribute('type', this.type);
-        this.fakeButton.setAttribute('style', 'display: none');
-        this.fakeButton.setAttribute('data-testid', 'vertex-fake-button');
-        form.appendChild(this.fakeButton);
-      }
-    }
-  }
-  disconnectedCallback() {
-    if (this.hostElement != null && this.fakeButton != null) {
-      this.fakeButton.remove();
-    }
-  }
-  render() {
-    const classes = classnames('btn', {
-      'btn-full': this.expand === 'full',
-      'btn-sm': this.size === 'sm',
-      'btn-md': this.size === 'md',
-      'btn-lg': this.size === 'lg',
-      'btn-primary': this.color === 'primary' && this.variant === 'solid',
-      'btn-secondary': this.color === 'secondary' && this.variant === 'solid',
-      'btn-danger': this.color === 'danger' && this.variant === 'solid',
-      'btn-txt-primary': this.color === 'primary' && this.variant === 'text',
-      'btn-txt-secondary': this.color === 'secondary' && this.variant === 'text',
-      'btn-txt-danger': this.color === 'danger' && this.variant === 'text',
-      'btn-outline-primary': this.color === 'primary' && this.variant === 'outline',
-      'btn-outline-secondary': this.color === 'secondary' && this.variant === 'outline',
-      'btn-outline-danger': this.color === 'danger' && this.variant === 'outline',
-      'btn-plaintext': this.variant === 'plaintext',
-      disabled: this.disabled,
-    });
-    if (this.href != null && this.type != null) {
-      console.warn('The type attribute is ignored when href is provided');
-    }
-    return (h(Host, { style: { pointerEvents: this.disabled ? 'none' : undefined } }, this.href != null && this.href !== '' ? (h("a", { href: this.href, target: this.target, class: classes, tabIndex: this.disabled ? -1 : 0 }, h("slot", null))) : (h("button", { class: classes, disabled: this.disabled, type: this.type, onClick: (event) => this.handleClick(event) }, h("slot", { name: "left" }), h("slot", null)))));
-  }
-  handleClick(event) {
-    if (this.fakeButton != null) {
-      event.preventDefault();
-      this.fakeButton.click();
-    }
-  }
-  get hostElement() { return getElement(this); }
-};
-Button.style = buttonCss;
-
-export { Button as B };

package/dist/esm/card-1e8790aa.js

@@ -1,28 +0,0 @@
-import { r as registerInstance, e as createEvent, h, H as Host } from './index-72f28b71.js';
-
-const cardCss = ":host{width:100%;height:100%;display:flex;position:relative;--border:1px solid var(--vertex-ui-neutral-200)}.content{display:flex;flex-direction:column;width:100%;height:100%;font-family:var(--vertex-ui-font-family);font-size:var(--vertex-ui-text-base);color:var(--vertex-ui-neutral-800);border:var(--border)}.header{display:flex;align-items:center;padding:0.5rem 0.5rem 0 0.5rem}.header-text{display:flex;flex-direction:column}.text{padding:0.75rem 0.5rem 0.75rem 1rem;color:var(--vertex-ui-neutral-700);white-space:pre-line}.avatar{padding-left:0.25rem;padding-right:0.75rem}.label slot::slotted(*){font-weight:var(--vertex-ui-font-weight-bold)}.timestamp slot::slotted(*){padding-top:0.125rem;font-size:var(--vertex-ui-text-sm);color:var(--vertex-ui-neutral-500)}.action{margin-left:auto;margin-bottom:auto}.actions *::slotted(*){display:flex;justify-content:flex-end;padding:0 0.5rem 0.5rem 0.5rem}";
-
-const Card = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.contentClick = createEvent(this, "contentClick", 7);
-    this.handleContentClick = (event) => {
-      this.contentClick.emit(event);
-    };
-    this.handleTextClick = (event) => {
-      if (this.mode === 'edit') {
-        event.stopImmediatePropagation();
-      }
-      else {
-        this.contentClick.emit(event);
-      }
-    };
-    this.mode = 'display';
-  }
-  render() {
-    return (h(Host, null, h("div", { class: "content" }, h("div", { class: "header", onClick: this.handleContentClick }, h("div", { class: "avatar" }, h("slot", { name: "avatar" })), h("div", { class: "header-text" }, h("div", { class: "label" }, h("slot", { name: "label" })), h("div", { class: "timestamp" }, h("slot", { name: "timestamp" }))), h("div", { class: "action" }, h("slot", { name: "action" }))), h("div", { class: "text", onClick: this.handleTextClick }, h("slot", null)), h("div", { class: "actions" }, h("slot", { name: "actions" }))), h("slot", { name: "overlay" })));
-  }
-};
-Card.style = cardCss;
-
-export { Card as C };

package/dist/esm/card-group-4e8e0421.js

@@ -1,28 +0,0 @@
-import { r as registerInstance, h, H as Host } from './index-72f28b71.js';
-import { c as classnames } from './index-9c609209.js';
-
-const cardGroupCss = ":host{width:100%;height:100%;position:relative;display:inline-block;--selected-color:var(--vertex-ui-blue-700);--hovered-color:var(--vertex-ui-blue-400)}.root{position:relative}.root.selected,.root:hover{box-shadow:0 2px 4px rgba(0, 0, 0, 0.25)}.content{cursor:pointer}.selected::after{content:\" \";position:absolute;width:0.1875rem;height:100%;left:0;top:0;background-color:var(--selected-color)}.hovered::after{content:\" \";position:absolute;width:0.1875rem;height:100%;left:0;top:0;background-color:var(--hovered-color)}.expand-target{font-family:var(--vertex-ui-font-family);font-size:var(--vertex-ui-text-base);color:var(--vertex-ui-neutral-700);cursor:pointer}.expand-target slot::slotted(*){padding:0.5rem 0.5rem 0.5rem 0.75rem}.hidden{display:none}";
-
-const CardGroup = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.selected = false;
-    this.hovered = false;
-    this.expanded = false;
-  }
-  render() {
-    return (h(Host, null, h("div", { class: classnames('root', {
-        selected: this.selected,
-        hovered: this.hovered,
-      }) }, h("div", { class: "content" }, h("slot", { name: "primary" })), h("div", { class: classnames({
-        hidden: !this.selected,
-      }) }, h("slot", null), h("div", { "data-testid": "expanded-content-wrapper", class: classnames({
-        hidden: !this.expanded,
-      }) }, h("slot", { name: "expanded-content" })), h("div", { "data-testid": "expanded-target-wrapper", class: classnames({
-        hidden: this.expanded,
-      }) }, h("div", { class: "expand-target" }, h("slot", { name: "expand-target" })))), h("div", { class: "action" }, h("slot", { name: "action" }))), h("slot", { name: "overlay" })));
-  }
-};
-CardGroup.style = cardGroupCss;
-
-export { CardGroup as C };

package/dist/esm/chip-4e568eee.js

@@ -1,23 +0,0 @@
-import { r as registerInstance, h } from './index-72f28b71.js';
-import { c as classnames } from './index-9c609209.js';
-
-const chipCss = ".root{display:flex;align-items:center;width:fit-content;border-radius:16px;font-size:var(--vertex-ui-text-base);padding:0.5rem;padding-left:0.25rem;max-height:1rem}.filled{color:white}.chip-primary{color:white}.chip-secondary{color:var(--vertex-ui-neutral-800)}.filled.chip-secondary{color:var(--vertex-ui-neutral-800);background-color:var(--vertex-ui-neutral-300)}.filled.chip-primary{background-color:var(--vertex-ui-blue-700)}.outlined.chip-primary{border:1px solid var(--vertex-ui-blue-700);color:var(--vertex-ui-blue-700)}.outlined.chip-secondary{border:1px solid var(--vertex-ui-neutral-300);color:var(--vertex-ui-neutral-700)}.avatar{margin-right:0.25rem}";
-
-const Chip = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.variant = 'filled';
-    this.color = 'secondary';
-  }
-  render() {
-    return (h("div", { class: classnames('root', {
-        filled: this.variant === 'filled',
-        outlined: this.variant === 'outlined',
-        'chip-primary': this.color === 'primary',
-        'chip-secondary': this.color === 'secondary',
-      }) }, h("div", { class: "avatar" }, h("slot", { name: "avatar" })), h("slot", null), h("slot", { name: "icon" })));
-  }
-};
-Chip.style = chipCss;
-
-export { Chip as C };

package/dist/esm/click-to-edit-text-field-d9b27cd0.js

@@ -1,103 +0,0 @@
-import { r as registerInstance, e as createEvent, h } from './index-72f28b71.js';
-import { c as classnames } from './index-9c609209.js';
-
-const ClickToEditTextField = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.inputFocus = createEvent(this, "inputFocus", 7);
-    this.inputBlur = createEvent(this, "inputBlur", 7);
-    this.inputInput = createEvent(this, "inputInput", 7);
-    this.inputChange = createEvent(this, "inputChange", 7);
-    this.inputSubmit = createEvent(this, "inputSubmit", 7);
-    var _a;
-    this.handleKeyDown = (ev) => {
-      var _a, _b;
-      if (ev.detail.key === 'Enter' && !this.multiline) {
-        (_a = this.textFieldRef) === null || _a === void 0 ? void 0 : _a.blurInput();
-      }
-      if (ev.detail.key === 'Escape') {
-        this.resetOnEscape();
-        (_b = this.textFieldRef) === null || _b === void 0 ? void 0 : _b.blurInput();
-      }
-    };
-    this.resetOnEscape = () => {
-      if (this.textFieldRef != null && this.defaultValue != null) {
-        this.textFieldRef.updateInput(this.defaultValue);
-        this.editing = false;
-      }
-    };
-    this.handleSubmit = async () => {
-      var _a;
-      const value = await ((_a = this.textFieldRef) === null || _a === void 0 ? void 0 : _a.getInputValue());
-      if (value != null && value !== this.defaultValue) {
-        this.defaultValue = value;
-        this.inputSubmit.emit({ value });
-      }
-      this.editing = false;
-    };
-    this.placeholder = undefined;
-    this.fontSize = 'standard';
-    this.disabled = undefined;
-    this.multiline = false;
-    this.minRows = undefined;
-    this.maxRows = undefined;
-    this.value = '';
-    this.autoFocus = undefined;
-    this.editing = false;
-    this.hasError = undefined;
-    this.handleInputBlur = this.handleInputBlur.bind(this);
-    this.handleInputFocus = this.handleInputFocus.bind(this);
-    this.handleInputInput = this.handleInputInput.bind(this);
-    this.handleInputChange = this.handleInputChange.bind(this);
-    this.handleSubmit = this.handleSubmit.bind(this);
-    this.handleKeyDown = this.handleKeyDown.bind(this);
-    this.defaultValue = (_a = this.value) === null || _a === void 0 ? void 0 : _a.toString();
-  }
-  render() {
-    return (h("div", { class: "click-to-edit" }, h("div", { class: "click-to-edit-text" }, h("vertex-textfield", { ref: (element) => {
-        this.textFieldRef = element;
-      }, onInputBlur: this.handleInputBlur, onInputFocus: this.handleInputFocus, onInputInput: this.handleInputInput, onInputChange: this.handleInputChange, disabled: this.disabled, fontSize: this.fontSize, autoFocus: this.autoFocus, placeholder: this.placeholder, multiline: this.multiline, minRows: this.minRows, maxRows: this.maxRows, type: "text", value: this.value, variant: "blank", onTextFieldKeyDown: this.handleKeyDown, "data-testid": "click-to-edit-text-field", hasError: this.hasError })), this.renderIcon()));
-  }
-  renderIcon() {
-    if (this.editing) {
-      return (h("div", { class: "click-to-edit-icon-wrapper" }, h("slot", { name: "edit-icon" }, h("div", { class: "click-to-edit-button" }, h("vertex-icon-button", { iconSize: "sm", iconName: "check" })))));
-    }
-    else if (!this.disabled) {
-      return (h("div", { class: "click-to-edit-icon-wrapper" }, h("slot", { name: "pencil-icon" }, h("vertex-icon", { size: "sm", name: "pencil", class: classnames('icon-visibility', 'hover-icon') }))));
-    }
-    else {
-      return h("div", null);
-    }
-  }
-  handleInputBlur(event) {
-    event.stopPropagation();
-    this.inputBlur.emit();
-    this.handleSubmit();
-  }
-  handleInputFocus(event) {
-    var _a;
-    event.stopPropagation();
-    this.inputFocus.emit();
-    (_a = this.textFieldRef) === null || _a === void 0 ? void 0 : _a.selectAll();
-    this.editing = true;
-  }
-  handleInputInput(event) {
-    event.stopPropagation();
-    this.inputInput.emit({ value: event.detail.value });
-  }
-  handleInputChange(event) {
-    event.stopPropagation();
-    this.inputChange.emit({ value: event.detail.value });
-  }
-  handleValueChanged(newValue) {
-    // If the value changed outside of edit mode, then update the default value
-    if (!this.editing) {
-      this.defaultValue = newValue === null || newValue === void 0 ? void 0 : newValue.toString();
-    }
-  }
-  static get watchers() { return {
-    "value": ["handleValueChanged"]
-  }; }
-};
-
-export { ClickToEditTextField as C };

package/dist/esm/collapsible-b52960e6.js

@@ -1,23 +0,0 @@
-import { r as registerInstance, h } from './index-72f28b71.js';
-import { c as classnames } from './index-9c609209.js';
-
-const collapsibleCss = "button{border:none;background-color:transparent;font-family:var(--vertex-ui-font-family);font-size:0.875rem;padding:0}:host{--hover-color:var(--vertex-ui-blue-700)}.collapsible-target{width:100%;display:flex;align-items:center;cursor:pointer;padding:0.75rem 0.25rem;outline:none}.collapsible-target:focus-visible{border-radius:0.25rem;box-shadow:0 0 0 1px var(--hover-color, var(--vertex-ui-blue-700))}.collapsible-target:focus-visible,.collapsible-target:hover{color:var(--hover-color, var(--vertex-ui-blue-700))}.collapsible-expand{display:flex;justify-content:center;align-items:center;transition-property:transform;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:200ms;margin-left:auto}.rotated{transform:rotateZ(90deg)}.collapsible-content{font-family:var(--vertex-ui-font-family);font-size:var(--vertex-ui-text-base);box-sizing:border-box}";
-
-const Collapsible = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.label = undefined;
-    this.open = false;
-  }
-  render() {
-    return (h("vertex-expandable", { controlled: true, expanded: this.open }, h("button", { slot: "header", "data-testid": "expand-click-target", class: "collapsible-target", onClick: () => this.setOpen(!this.open), onSubmit: () => this.setOpen(!this.open) }, this.label != null ? (h("span", null, this.label)) : (h("slot", { name: "label" })), h("div", { class: classnames('collapsible-expand', {
-        rotated: this.open,
-      }) }, h("slot", { name: "expand-icon" }, h("vertex-icon", { name: "caret-right" })))), h("div", { class: "collapsible-content-container" }, h("slot", null))));
-  }
-  setOpen(open) {
-    this.open = open;
-  }
-};
-Collapsible.style = collapsibleCss;
-
-export { Collapsible as C };