colibri-ui 0.8.76 → 0.8.78

package/Autocomplete/Autocomplete.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import type { ForwardedRef } from "react";
+import type { AutocompleteOption, AutocompleteProps } from "./index.props";
+export declare const Autocomplete: <T extends AutocompleteOption = AutocompleteOption>(props: AutocompleteProps<T> & {
+    ref?: ForwardedRef<HTMLInputElement>;
+}) => React.ReactElement;

package/Autocomplete/Autocomplete.js

@@ -0,0 +1,298 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var tslib = require('tslib');
+var React = require('react');
+var clsx = require('clsx');
+var index = require('../Input/index.js');
+var Chevron = require('../Icons/Chevron.js');
+var Cross = require('../Icons/Cross.js');
+var styles = require('./Autocomplete.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty);
+var _slicedToArray__default = /*#__PURE__*/_interopDefault(_slicedToArray);
+var React__default = /*#__PURE__*/_interopDefault(React);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+var AutocompleteInner = function AutocompleteInner(props, forwardedRef) {
+  var options = props.options,
+    value = props.value,
+    _props$defaultValue = props.defaultValue,
+    defaultValue = _props$defaultValue === void 0 ? "" : _props$defaultValue,
+    onValueChange = props.onValueChange,
+    onOptionSelect = props.onOptionSelect,
+    filterOption = props.filterOption,
+    renderOption = props.renderOption,
+    _props$getOptionKey = props.getOptionKey,
+    getOptionKey = _props$getOptionKey === void 0 ? function (option) {
+      return option.value;
+    } : _props$getOptionKey,
+    _props$minQueryLength = props.minQueryLength,
+    minQueryLength = _props$minQueryLength === void 0 ? 0 : _props$minQueryLength,
+    open = props.open,
+    _props$defaultOpen = props.defaultOpen,
+    defaultOpen = _props$defaultOpen === void 0 ? false : _props$defaultOpen,
+    onOpenChange = props.onOpenChange,
+    _props$openOnFocus = props.openOnFocus,
+    openOnFocus = _props$openOnFocus === void 0 ? true : _props$openOnFocus,
+    _props$loading = props.loading,
+    loading = _props$loading === void 0 ? false : _props$loading,
+    _props$loadingText = props.loadingText,
+    loadingText = _props$loadingText === void 0 ? "Loading..." : _props$loadingText,
+    _props$emptyText = props.emptyText,
+    emptyText = _props$emptyText === void 0 ? "No results found" : _props$emptyText,
+    label = props.label,
+    hint = props.hint,
+    hasError = props.hasError,
+    success = props.success,
+    _props$clearable = props.clearable,
+    clearable = _props$clearable === void 0 ? true : _props$clearable,
+    _props$clearLabel = props.clearLabel,
+    clearLabel = _props$clearLabel === void 0 ? "Clear value" : _props$clearLabel,
+    _props$size = props.size,
+    size = _props$size === void 0 ? "m" : _props$size,
+    _props$listMaxHeight = props.listMaxHeight,
+    listMaxHeight = _props$listMaxHeight === void 0 ? "var(--component-autocomplete-list-max-height)" : _props$listMaxHeight,
+    containerClassName = props.containerClassName,
+    className = props.className,
+    disabled = props.disabled,
+    readOnly = props.readOnly,
+    required = props.required,
+    id = props.id,
+    _onFocus = props.onFocus,
+    onBlur = props.onBlur,
+    onKeyDown = props.onKeyDown,
+    inputProps = tslib.__rest(props, ["options", "value", "defaultValue", "onValueChange", "onOptionSelect", "filterOption", "renderOption", "getOptionKey", "minQueryLength", "open", "defaultOpen", "onOpenChange", "openOnFocus", "loading", "loadingText", "emptyText", "label", "hint", "hasError", "success", "clearable", "clearLabel", "size", "listMaxHeight", "containerClassName", "className", "disabled", "readOnly", "required", "id", "onFocus", "onBlur", "onKeyDown"]);
+  var generatedId = React.useId();
+  var inputId = id !== null && id !== void 0 ? id : generatedId;
+  var listId = "".concat(inputId, "-listbox");
+  var controlled = value !== undefined;
+  var _useState = React.useState(defaultValue),
+    _useState2 = _slicedToArray__default.default(_useState, 2),
+    internalValue = _useState2[0],
+    setInternalValue = _useState2[1];
+  var _useState3 = React.useState(defaultOpen),
+    _useState4 = _slicedToArray__default.default(_useState3, 2),
+    internalOpen = _useState4[0],
+    setInternalOpen = _useState4[1];
+  var _useState5 = React.useState(-1),
+    _useState6 = _slicedToArray__default.default(_useState5, 2),
+    activeIndex = _useState6[0],
+    setActiveIndex = _useState6[1];
+  var rootRef = React.useRef(null);
+  var controlRef = React.useRef(null);
+  var inputRef = React.useRef(null);
+  var optionRefs = React.useRef([]);
+  var query = controlled ? value : internalValue;
+  var isOpen = open !== null && open !== void 0 ? open : internalOpen;
+  var setInputRef = function setInputRef(node) {
+    inputRef.current = node;
+    if (typeof forwardedRef === "function") forwardedRef(node);else if (forwardedRef) forwardedRef.current = node;
+  };
+  var setOpen = React.useCallback(function (next) {
+    if (open === undefined) setInternalOpen(next);
+    onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(next);
+    if (!next) setActiveIndex(-1);
+  }, [onOpenChange, open]);
+  var filteredOptions = React.useMemo(function () {
+    if (query.length < minQueryLength) return [];
+    var normalized = query.trim().toLocaleLowerCase();
+    var predicate = filterOption !== null && filterOption !== void 0 ? filterOption : function (option) {
+      return option.label.toLocaleLowerCase().includes(normalized);
+    };
+    return options.filter(function (option) {
+      return predicate(option, query);
+    });
+  }, [filterOption, minQueryLength, options, query]);
+  var showPopup = isOpen && !disabled && !readOnly && query.length >= minQueryLength;
+  React.useEffect(function () {
+    if (!showPopup) return undefined;
+    var closeOutside = function closeOutside(event) {
+      var _a;
+      if (!((_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) setOpen(false);
+    };
+    document.addEventListener("mousedown", closeOutside);
+    return function () {
+      return document.removeEventListener("mousedown", closeOutside);
+    };
+  }, [setOpen, showPopup]);
+  React.useEffect(function () {
+    setActiveIndex(-1);
+  }, [query]);
+  React.useEffect(function () {
+    var _a;
+    if (activeIndex >= 0) {
+      (_a = optionRefs.current[activeIndex]) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
+        block: "nearest"
+      });
+    }
+  }, [activeIndex]);
+  var changeValue = function changeValue(next) {
+    if (!controlled) setInternalValue(next);
+    onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(next);
+  };
+  var selectOption = function selectOption(option) {
+    var _a;
+    if (option.disabled) return;
+    changeValue(option.label);
+    onOptionSelect === null || onOptionSelect === void 0 ? void 0 : onOptionSelect(option);
+    setOpen(false);
+    (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+  };
+  var moveActive = function moveActive(direction) {
+    if (!showPopup) setOpen(true);
+    if (!filteredOptions.length) return;
+    var next = activeIndex;
+    for (var attempts = 0; attempts < filteredOptions.length; attempts += 1) {
+      next = (next + direction + filteredOptions.length) % filteredOptions.length;
+      if (!filteredOptions[next].disabled) break;
+    }
+    setActiveIndex(next);
+  };
+  var handleChange = function handleChange(_event, next) {
+    changeValue(next);
+    setOpen(next.length >= minQueryLength);
+  };
+  var handleKeyDown = function handleKeyDown(event) {
+    onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+    if (event.defaultPrevented) return;
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      event.preventDefault();
+      moveActive(event.key === "ArrowDown" ? 1 : -1);
+    } else if (event.key === "Enter" && showPopup && activeIndex >= 0) {
+      event.preventDefault();
+      selectOption(filteredOptions[activeIndex]);
+    } else if (event.key === "Escape") {
+      event.preventDefault();
+      setOpen(false);
+    } else if (event.key === "Home" && showPopup) {
+      event.preventDefault();
+      var first = filteredOptions.findIndex(function (option) {
+        return !option.disabled;
+      });
+      setActiveIndex(first);
+    } else if (event.key === "End" && showPopup) {
+      event.preventDefault();
+      var last = filteredOptions.length - 1;
+      while (last >= 0 && filteredOptions[last].disabled) last -= 1;
+      setActiveIndex(last);
+    } else if (event.key === "Tab") {
+      setOpen(false);
+    }
+  };
+  var clearButton = clearable && query && !disabled && !readOnly && (/*#__PURE__*/React__default.default.createElement("button", {
+    type: "button",
+    className: styles__default.default.clear,
+    "aria-label": clearLabel,
+    onMouseDown: function onMouseDown(event) {
+      return event.preventDefault();
+    },
+    onClick: function onClick() {
+      var _a;
+      changeValue("");
+      setOpen(openOnFocus && minQueryLength === 0);
+      (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+  }, /*#__PURE__*/React__default.default.createElement(Cross.Cross, null)));
+  var endIcon = /*#__PURE__*/React__default.default.createElement("span", {
+    className: styles__default.default["end-icons"]
+  }, clearButton, /*#__PURE__*/React__default.default.createElement(Chevron.Chevron, {
+    className: clsx__default.default(styles__default.default.chevron, _defineProperty__default.default({}, styles__default.default["chevron_open"], showPopup)),
+    "aria-hidden": "true"
+  }));
+  var popup = showPopup && (/*#__PURE__*/React__default.default.createElement("div", {
+    className: styles__default.default.popup
+  }, /*#__PURE__*/React__default.default.createElement("ul", {
+    id: listId,
+    role: "listbox",
+    "aria-label": typeof label === "string" ? label : undefined,
+    className: styles__default.default.list,
+    style: {
+      maxHeight: listMaxHeight
+    }
+  }, loading ? (/*#__PURE__*/React__default.default.createElement("li", {
+    className: styles__default.default.message
+  }, loadingText)) : filteredOptions.length === 0 ? (/*#__PURE__*/React__default.default.createElement("li", {
+    className: styles__default.default.message
+  }, emptyText)) : filteredOptions.map(function (option, index) {
+    var active = index === activeIndex;
+    var selected = option.label === query;
+    return /*#__PURE__*/React__default.default.createElement("li", {
+      ref: function ref(node) {
+        optionRefs.current[index] = node;
+      },
+      id: "".concat(listId, "-").concat(index),
+      key: getOptionKey(option),
+      role: "option",
+      "aria-selected": selected,
+      "aria-disabled": option.disabled || undefined,
+      className: clsx__default.default(styles__default.default.option, _defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default({}, styles__default.default.active, active), styles__default.default.selected, selected), styles__default.default["option_disabled"], option.disabled)),
+      onMouseDown: function onMouseDown(event) {
+        return event.preventDefault();
+      },
+      onMouseEnter: function onMouseEnter() {
+        if (!option.disabled) setActiveIndex(index);
+      },
+      onKeyDown: function onKeyDown(event) {
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          selectOption(option);
+        }
+      },
+      onClick: function onClick() {
+        return selectOption(option);
+      }
+    }, renderOption ? renderOption(option, {
+      active: active,
+      selected: selected
+    }) : (/*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, option.contentLeft && (/*#__PURE__*/React__default.default.createElement("span", {
+      className: styles__default.default.side
+    }, option.contentLeft)), /*#__PURE__*/React__default.default.createElement("span", {
+      className: styles__default.default["option-text"]
+    }, /*#__PURE__*/React__default.default.createElement("span", null, option.label), option.description && (/*#__PURE__*/React__default.default.createElement("small", null, option.description))), option.contentRight && (/*#__PURE__*/React__default.default.createElement("span", {
+      className: styles__default.default.side
+    }, option.contentRight)))));
+  }))));
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    ref: rootRef,
+    className: clsx__default.default(styles__default.default.root, styles__default.default["size_".concat(size)], _defineProperty__default.default({}, styles__default.default.success, success), containerClassName)
+  }, /*#__PURE__*/React__default.default.createElement(index.Input, Object.assign({}, inputProps, {
+    id: inputId,
+    type: "text",
+    role: "combobox",
+    "aria-autocomplete": "list",
+    "aria-expanded": showPopup,
+    "aria-controls": showPopup ? listId : undefined,
+    "aria-activedescendant": activeIndex >= 0 ? "".concat(listId, "-").concat(activeIndex) : undefined,
+    "aria-invalid": hasError || undefined,
+    autoComplete: "off",
+    className: clsx__default.default(styles__default.default.field, className),
+    controlAfter: popup,
+    controlClassName: styles__default.default.control,
+    controlRef: controlRef,
+    disabled: disabled,
+    endIcon: endIcon,
+    hasError: hasError,
+    hint: hint,
+    inputRef: setInputRef,
+    label: label,
+    readOnly: readOnly,
+    required: required,
+    size: size,
+    value: query,
+    onBlur: onBlur,
+    onChange: handleChange,
+    onFocus: function onFocus(event) {
+      _onFocus === null || _onFocus === void 0 ? void 0 : _onFocus(event);
+      if (openOnFocus && query.length >= minQueryLength) setOpen(true);
+    },
+    onKeyDown: handleKeyDown
+  })));
+};
+var Autocomplete = /*#__PURE__*/React.forwardRef(AutocompleteInner);
+
+exports.Autocomplete = Autocomplete;

package/Autocomplete/Autocomplete.module.css

@@ -0,0 +1,147 @@
+.root {
+  display: inline-flex;
+  flex-direction: column;
+  width: var(--component-autocomplete-inline-size);
+}
+
+.field {
+  width: 100%;
+}
+
+.control {
+  position: relative;
+  width: 100%;
+}
+.control > div {
+  width: 100%;
+}
+
+.success {
+  --component-input-border: var(--component-autocomplete-border-success);
+  --component-input-border-focus: var(--component-autocomplete-border-success);
+}
+
+.end-icons {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--component-autocomplete-end-icon-gap);
+}
+
+.clear {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-radius: var(--component-autocomplete-clear-radius);
+  color: var(--component-autocomplete-clear-icon);
+  cursor: pointer;
+  display: inline-flex;
+  flex: none;
+  height: var(--component-autocomplete-clear-size);
+  justify-content: center;
+  padding: var(--space-0);
+  width: var(--component-autocomplete-clear-size);
+}
+.clear:hover {
+  background: var(--component-autocomplete-clear-bg-hover);
+}
+.clear svg {
+  height: var(--component-autocomplete-icon-size);
+  width: var(--component-autocomplete-icon-size);
+}
+
+.chevron {
+  color: var(--component-autocomplete-chevron);
+  flex: none;
+  height: var(--component-autocomplete-icon-size);
+  transition: transform 0.16s ease-in;
+  width: var(--component-autocomplete-icon-size);
+}
+
+.chevron_open {
+  transform: rotate(180deg);
+}
+
+.popup {
+  background: var(--component-autocomplete-popup-bg);
+  border-color: var(--component-autocomplete-popup-border);
+  border-radius: var(--component-autocomplete-popup-radius);
+  border-style: solid;
+  border-width: var(--border-width-hairline);
+  box-shadow: var(--component-autocomplete-popup-shadow);
+  left: 0;
+  overflow: hidden;
+  position: absolute;
+  right: 0;
+  top: calc(100% + var(--component-autocomplete-popup-offset));
+  z-index: var(--component-autocomplete-popup-z-index);
+}
+
+.list {
+  box-sizing: border-box;
+  list-style: none;
+  margin: var(--space-0);
+  overflow: auto;
+  padding: var(--component-autocomplete-list-padding);
+}
+
+.option {
+  align-items: center;
+  border-radius: var(--component-autocomplete-option-radius);
+  color: var(--component-autocomplete-option-text);
+  cursor: pointer;
+  display: flex;
+  gap: var(--component-autocomplete-option-gap);
+  min-height: var(--component-autocomplete-option-min-height);
+  padding: var(--component-autocomplete-option-padding-block) var(--component-autocomplete-option-padding-inline);
+}
+.option:hover {
+  background: var(--component-autocomplete-option-bg-hover);
+}
+
+.active {
+  background: var(--component-autocomplete-option-bg-hover);
+}
+
+.selected {
+  color: var(--component-autocomplete-option-text-selected);
+}
+
+.option_disabled {
+  color: var(--component-autocomplete-option-text-disabled);
+  cursor: not-allowed;
+}
+.option_disabled:hover {
+  background: transparent;
+}
+
+.option-text {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-width: 0;
+}
+.option-text > span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.option-text small {
+  color: var(--component-autocomplete-option-description);
+  font-size: var(--font-size-text-xs);
+  line-height: var(--line-height-text-xs);
+  margin-top: var(--component-autocomplete-description-offset);
+}
+
+.side {
+  align-items: center;
+  display: inline-flex;
+  flex: none;
+}
+
+.message {
+  color: var(--component-autocomplete-message-text);
+  font-size: var(--font-size-text-sm);
+  line-height: var(--line-height-text-sm);
+  padding: var(--component-autocomplete-message-padding);
+  text-align: center;
+}

package/Autocomplete/index.d.ts

@@ -0,0 +1,2 @@
+export { Autocomplete } from "./Autocomplete";
+export type { AutocompleteOption, AutocompleteOptionState, AutocompleteProps, AutocompleteSize, } from "./index.props";

package/Autocomplete/index.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var Autocomplete = require('./Autocomplete.js');
+
+
+
+exports.Autocomplete = Autocomplete.Autocomplete;

package/Autocomplete/index.props.d.ts

@@ -0,0 +1,39 @@
+import type { CSSProperties, ReactNode } from "react";
+import type { InputProps } from "../Input/index.props";
+export interface AutocompleteOption {
+    contentLeft?: ReactNode;
+    contentRight?: ReactNode;
+    description?: string;
+    disabled?: boolean;
+    label: string;
+    value: string;
+}
+export type AutocompleteSize = "s" | "m" | "l";
+export interface AutocompleteOptionState {
+    active: boolean;
+    selected: boolean;
+}
+export interface AutocompleteProps<T extends AutocompleteOption = AutocompleteOption> extends Omit<InputProps, "controlAfter" | "controlClassName" | "controlRef" | "defaultValue" | "endIcon" | "inputRef" | "onChange" | "size" | "value"> {
+    clearLabel?: string;
+    clearable?: boolean;
+    containerClassName?: string;
+    defaultOpen?: boolean;
+    defaultValue?: string;
+    emptyText?: ReactNode;
+    filterOption?: (option: T, query: string) => boolean;
+    getOptionKey?: (option: T) => string;
+    listMaxHeight?: CSSProperties["maxHeight"];
+    loading?: boolean;
+    loadingText?: ReactNode;
+    minQueryLength?: number;
+    onOpenChange?: (open: boolean) => void;
+    onOptionSelect?: (option: T) => void;
+    onValueChange?: (value: string) => void;
+    open?: boolean;
+    openOnFocus?: boolean;
+    options: T[];
+    renderOption?: (option: T, state: AutocompleteOptionState) => ReactNode;
+    size?: AutocompleteSize;
+    success?: boolean;
+    value?: string;
+}

package/Autocomplete/package.json

@@ -0,0 +1,9 @@
+{
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss"
+  ],
+  "module": "../esm/Autocomplete/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/Button/tokens.d.ts

@@ -0,0 +1,78 @@
+export declare const BUTTON_TOKENS: {
+    readonly "component-button-primary-bg": "var(--color-action-primary)";
+    readonly "component-button-primary-border": "var(--color-action-primary)";
+    readonly "component-button-primary-text": "var(--color-action-secondary)";
+    readonly "component-button-primary-bg-hover": "var(--color-action-primary-hover)";
+    readonly "component-button-primary-border-hover": "var(--color-action-primary-hover)";
+    readonly "component-button-primary-text-hover": "var(--color-action-secondary)";
+    readonly "component-button-primary-bg-pressed": "var(--color-action-secondary)";
+    readonly "component-button-primary-border-pressed": "var(--color-action-secondary)";
+    readonly "component-button-primary-text-pressed": "var(--color-text-on-brand)";
+    readonly "component-button-secondary-bg": "var(--color-bg-surface-strong)";
+    readonly "component-button-secondary-border": "var(--color-border-default)";
+    readonly "component-button-secondary-text": "var(--color-text-primary)";
+    readonly "component-button-secondary-bg-hover": "var(--color-neutral-300)";
+    readonly "component-button-secondary-border-hover": "var(--color-border-strong)";
+    readonly "component-button-secondary-text-hover": "var(--color-text-primary)";
+    readonly "component-button-secondary-bg-pressed": "var(--color-action-primary)";
+    readonly "component-button-secondary-border-pressed": "var(--color-action-primary)";
+    readonly "component-button-secondary-text-pressed": "var(--color-action-secondary)";
+    readonly "component-button-outline-bg": "var(--color-bg-surface)";
+    readonly "component-button-outline-border": "var(--color-border-default)";
+    readonly "component-button-outline-text": "var(--color-text-primary)";
+    readonly "component-button-outline-bg-hover": "var(--color-bg-surface-subtle)";
+    readonly "component-button-outline-border-hover": "var(--color-border-strong)";
+    readonly "component-button-outline-text-hover": "var(--color-text-primary)";
+    readonly "component-button-outline-bg-pressed": "var(--color-bg-surface-strong)";
+    readonly "component-button-outline-border-pressed": "var(--color-action-primary)";
+    readonly "component-button-outline-text-pressed": "var(--color-action-primary-pressed)";
+    readonly "component-button-pseudo-bg": "var(--color-bg-canvas)";
+    readonly "component-button-pseudo-border": "var(--color-bg-canvas)";
+    readonly "component-button-pseudo-text": "var(--color-text-primary)";
+    readonly "component-button-pseudo-bg-hover": "var(--color-bg-surface-subtle)";
+    readonly "component-button-pseudo-border-hover": "var(--color-bg-surface-subtle)";
+    readonly "component-button-pseudo-text-hover": "var(--color-text-primary)";
+    readonly "component-button-pseudo-bg-pressed": "var(--color-bg-surface-strong)";
+    readonly "component-button-pseudo-border-pressed": "var(--color-bg-surface-strong)";
+    readonly "component-button-pseudo-text-pressed": "var(--color-text-primary)";
+    readonly "component-button-clear-bg": "transparent";
+    readonly "component-button-clear-border": "transparent";
+    readonly "component-button-clear-text": "var(--color-text-primary)";
+    readonly "component-button-clear-bg-hover": "transparent";
+    readonly "component-button-clear-border-hover": "transparent";
+    readonly "component-button-clear-text-hover": "var(--color-action-clear-text-hover)";
+    readonly "component-button-clear-bg-pressed": "transparent";
+    readonly "component-button-clear-border-pressed": "transparent";
+    readonly "component-button-clear-text-pressed": "var(--color-action-primary-pressed)";
+    readonly "component-button-alert-bg": "var(--color-status-error)";
+    readonly "component-button-alert-border": "var(--color-status-error)";
+    readonly "component-button-alert-text": "var(--color-brand-white)";
+    readonly "component-button-alert-bg-hover": "var(--color-status-error-hover)";
+    readonly "component-button-alert-border-hover": "var(--color-status-error-hover)";
+    readonly "component-button-alert-text-hover": "var(--color-brand-white)";
+    readonly "component-button-alert-bg-pressed": "var(--color-status-error-accent)";
+    readonly "component-button-alert-border-pressed": "var(--color-status-error-accent)";
+    readonly "component-button-alert-text-pressed": "var(--color-brand-white)";
+    readonly "component-button-success-bg": "var(--color-status-success-bg)";
+    readonly "component-button-success-border": "var(--color-status-success-bg)";
+    readonly "component-button-success-text": "var(--color-text-primary)";
+    readonly "component-button-success-bg-hover": "var(--color-status-success-bg-hover)";
+    readonly "component-button-success-border-hover": "var(--color-status-success-bg-hover)";
+    readonly "component-button-success-text-hover": "var(--color-text-primary)";
+    readonly "component-button-success-bg-pressed": "var(--color-status-success)";
+    readonly "component-button-success-border-pressed": "var(--color-status-success)";
+    readonly "component-button-success-text-pressed": "var(--color-brand-white)";
+    readonly "component-button-bg-disabled": "var(--color-action-disabled)";
+    readonly "component-button-border-disabled": "var(--color-action-disabled)";
+    readonly "component-button-text-disabled": "var(--color-action-disabled-text)";
+    readonly "component-button-font-size-xs": string;
+    readonly "component-button-font-size-s": string;
+    readonly "component-button-font-size-m": string;
+    readonly "component-button-font-size-l": string;
+    readonly "component-button-height-xs": string;
+    readonly "component-button-height-s": string;
+    readonly "component-button-height-m": string;
+    readonly "component-button-height-l": string;
+    readonly "component-button-radius": string;
+    readonly "component-button-radius-lg": string;
+};