colibri-ui 0.8.76 → 0.8.78

package/esm/Theme/themes/jaipur.js

@@ -110,14 +110,17 @@ var theme_jaipur = {
   "color-action-secondary-hover": Color.PINK_JP_300,
   "color-action-secondary-pressed": Color.PINK_JP_500,
   "color-action-secondary-text": Color.BRAND_JP_EGGPLANT,
+  "color-action-clear-text-hover": Color.PINK_JP_800,
   "color-action-disabled": Color.NEUTRAL_JP_100,
   "color-action-disabled-text": Color.NEUTRAL_JP_400,
   "color-focus-ring": Color.BRAND_JP_PINK,
   "color-status-success": Color.STATUS_JP_SUCCESS,
   "color-status-success-bg": Color.STATUS_JP_SUCCESS_BG,
+  "color-status-success-bg-hover": Color.STATUS_JP_SUCCESS_BG_HOVER,
   "color-status-warning": Color.STATUS_JP_WARNING,
   "color-status-warning-bg": Color.STATUS_JP_WARNING_BG,
   "color-status-error": Color.STATUS_JP_ERROR,
+  "color-status-error-hover": Color.STATUS_JP_ERROR_HOVER,
   "color-status-error-accent": Color.STATUS_JP_ERROR_ACCENT,
   "color-status-error-bg": Color.STATUS_JP_ERROR_BG,
   "color-status-info": Color.STATUS_JP_INFO,
@@ -225,6 +228,36 @@ var theme_jaipur = {
   "component-input-padding-block": "0.3125rem",
   "component-input-padding-inline": "0.625rem",
   "component-input-content-margin-block": "0.4375rem",
+  "component-autocomplete-inline-size": "calc(var(--space-32) * 2 + var(--space-16))",
+  "component-autocomplete-border-success": Color.STATUS_JP_SUCCESS,
+  "component-autocomplete-end-icon-gap": "var(--space-1)",
+  "component-autocomplete-icon-size": "var(--component-input-icon-size)",
+  "component-autocomplete-clear-size": "var(--space-6)",
+  "component-autocomplete-clear-radius": "var(--radius-xs)",
+  "component-autocomplete-clear-icon": Color.NEUTRAL_JP_600,
+  "component-autocomplete-clear-bg-hover": Color.NEUTRAL_JP_100,
+  "component-autocomplete-chevron": Color.NEUTRAL_JP_600,
+  "component-autocomplete-popup-bg": Color.NEUTRAL_JP_0,
+  "component-autocomplete-popup-border": Color.NEUTRAL_JP_200,
+  "component-autocomplete-popup-radius": "var(--radius-md)",
+  "component-autocomplete-popup-shadow": "var(--shadow-raised)",
+  "component-autocomplete-popup-offset": "var(--space-2)",
+  "component-autocomplete-popup-z-index": "1001",
+  "component-autocomplete-list-max-height": "13.75rem",
+  "component-autocomplete-list-padding": "var(--space-1)",
+  "component-autocomplete-option-min-height": "var(--component-input-height-l)",
+  "component-autocomplete-option-padding-block": "var(--component-input-padding-block)",
+  "component-autocomplete-option-padding-inline": "var(--component-input-padding-inline)",
+  "component-autocomplete-option-radius": "var(--radius-xs)",
+  "component-autocomplete-option-gap": "var(--space-2)",
+  "component-autocomplete-option-bg-hover": Color.NEUTRAL_JP_100,
+  "component-autocomplete-option-text": Color.BRAND_JP_EGGPLANT,
+  "component-autocomplete-option-text-selected": Color.BRAND_JP_EGGPLANT,
+  "component-autocomplete-option-text-disabled": Color.NEUTRAL_JP_400,
+  "component-autocomplete-option-description": Color.NEUTRAL_JP_600,
+  "component-autocomplete-description-offset": "var(--space-1)",
+  "component-autocomplete-message-text": Color.NEUTRAL_JP_600,
+  "component-autocomplete-message-padding": "var(--space-4)",
   "component-editable-icon-size": "1rem",
   "component-code-field-height-m": "3rem",
   "component-code-field-height-l": "3.5rem",
@@ -273,82 +306,6 @@ var theme_jaipur = {
   "component-switch-thumb-size": "1rem",
   "component-switch-thumb-offset": "0.125rem",
   "component-switch-thumb-translate": "1.125rem",
-  "component-button-font-size-xs": "0.75rem",
-  "component-button-font-size-s": "0.8125rem",
-  "component-button-font-size-m": "0.9375rem",
-  "component-button-font-size-l": "1.125rem",
-  "component-button-height-xs": "1.8125rem",
-  "component-button-height-s": "2rem",
-  "component-button-height-m": "2.25rem",
-  "component-button-height-l": "2.625rem",
-  "component-button-radius": "1.125rem",
-  "component-button-radius-lg": "1.5rem",
-  "component-button-primary-bg": Color.BRAND_JP_EGGPLANT,
-  "component-button-primary-border": Color.BRAND_JP_EGGPLANT,
-  "component-button-primary-text": Color.BRAND_JP_PINK,
-  "component-button-primary-bg-hover": Color.BRAND_JP_INK,
-  "component-button-primary-border-hover": Color.BRAND_JP_INK,
-  "component-button-primary-text-hover": Color.BRAND_JP_PINK,
-  "component-button-primary-bg-pressed": Color.BRAND_JP_PINK,
-  "component-button-primary-border-pressed": Color.BRAND_JP_PINK,
-  "component-button-primary-text-pressed": Color.BRAND_JP_EGGPLANT,
-  "component-button-secondary-bg": Color.NEUTRAL_JP_200,
-  "component-button-secondary-border": Color.NEUTRAL_JP_300,
-  "component-button-secondary-text": Color.BRAND_JP_EGGPLANT,
-  "component-button-secondary-bg-hover": Color.NEUTRAL_JP_300,
-  "component-button-secondary-border-hover": Color.NEUTRAL_JP_500,
-  "component-button-secondary-text-hover": Color.BRAND_JP_EGGPLANT,
-  "component-button-secondary-bg-pressed": Color.BRAND_JP_EGGPLANT,
-  "component-button-secondary-border-pressed": Color.BRAND_JP_EGGPLANT,
-  "component-button-secondary-text-pressed": Color.BRAND_JP_PINK,
-  "component-button-outline-bg": Color.NEUTRAL_JP_0,
-  "component-button-outline-border": Color.NEUTRAL_JP_300,
-  "component-button-outline-text": Color.BRAND_JP_EGGPLANT,
-  "component-button-outline-bg-hover": Color.NEUTRAL_JP_100,
-  "component-button-outline-border-hover": Color.NEUTRAL_JP_500,
-  "component-button-outline-text-hover": Color.BRAND_JP_EGGPLANT,
-  "component-button-outline-bg-pressed": Color.NEUTRAL_JP_200,
-  "component-button-outline-border-pressed": Color.BRAND_JP_EGGPLANT,
-  "component-button-outline-text-pressed": Color.BRAND_JP_INK,
-  "component-button-pseudo-bg": Color.NEUTRAL_JP_50,
-  "component-button-pseudo-border": Color.NEUTRAL_JP_50,
-  "component-button-pseudo-text": Color.BRAND_JP_EGGPLANT,
-  "component-button-pseudo-bg-hover": Color.NEUTRAL_JP_100,
-  "component-button-pseudo-border-hover": Color.NEUTRAL_JP_100,
-  "component-button-pseudo-text-hover": Color.BRAND_JP_EGGPLANT,
-  "component-button-pseudo-bg-pressed": Color.NEUTRAL_JP_200,
-  "component-button-pseudo-border-pressed": Color.NEUTRAL_JP_200,
-  "component-button-pseudo-text-pressed": Color.BRAND_JP_EGGPLANT,
-  "component-button-clear-bg": "transparent",
-  "component-button-clear-border": "transparent",
-  "component-button-clear-text": Color.BRAND_JP_EGGPLANT,
-  "component-button-clear-bg-hover": "transparent",
-  "component-button-clear-border-hover": "transparent",
-  "component-button-clear-text-hover": Color.PINK_JP_800,
-  "component-button-clear-bg-pressed": "transparent",
-  "component-button-clear-border-pressed": "transparent",
-  "component-button-clear-text-pressed": Color.BRAND_JP_INK,
-  "component-button-alert-bg": Color.STATUS_JP_ERROR,
-  "component-button-alert-border": Color.STATUS_JP_ERROR,
-  "component-button-alert-text": Color.BRAND_JP_WHITE,
-  "component-button-alert-bg-hover": Color.PINK_JP_600,
-  "component-button-alert-border-hover": Color.PINK_JP_600,
-  "component-button-alert-text-hover": Color.BRAND_JP_WHITE,
-  "component-button-alert-bg-pressed": Color.STATUS_JP_ERROR_ACCENT,
-  "component-button-alert-border-pressed": Color.STATUS_JP_ERROR_ACCENT,
-  "component-button-alert-text-pressed": Color.BRAND_JP_WHITE,
-  "component-button-success-bg": Color.STATUS_JP_SUCCESS_BG,
-  "component-button-success-border": Color.STATUS_JP_SUCCESS_BG,
-  "component-button-success-text": Color.BRAND_JP_EGGPLANT,
-  "component-button-success-bg-hover": Color.LIME_JP_200,
-  "component-button-success-border-hover": Color.LIME_JP_200,
-  "component-button-success-text-hover": Color.BRAND_JP_EGGPLANT,
-  "component-button-success-bg-pressed": Color.STATUS_JP_SUCCESS,
-  "component-button-success-border-pressed": Color.STATUS_JP_SUCCESS,
-  "component-button-success-text-pressed": Color.BRAND_JP_WHITE,
-  "component-button-bg-disabled": Color.NEUTRAL_JP_100,
-  "component-button-border-disabled": Color.NEUTRAL_JP_100,
-  "component-button-text-disabled": Color.NEUTRAL_JP_400,
   "component-menu-bg": Color.NEUTRAL_JP_0,
   "component-menu-text": Color.BRAND_JP_EGGPLANT,
   "component-menu-border": Color.NEUTRAL_JP_200,
@@ -358,6 +315,46 @@ var theme_jaipur = {
   "component-menu-item-bg-pressed": Color.NEUTRAL_JP_200,
   "component-menu-item-bg-selected": Color.BRAND_JP_EGGPLANT,
   "component-menu-item-text-disabled": Color.NEUTRAL_JP_400,
+  "component-list-bg": Color.NEUTRAL_JP_0,
+  "component-list-text": Color.BRAND_JP_EGGPLANT,
+  "component-list-text-disabled": Color.NEUTRAL_JP_400,
+  "component-list-description": Color.NEUTRAL_JP_700,
+  "component-list-description-selected": Color.BRAND_JP_EGGPLANT,
+  "component-list-divider": Color.NEUTRAL_JP_200,
+  "component-list-focus-ring": Color.BRAND_JP_PINK,
+  "component-list-container-radius": "var(--radius-lg)",
+  "component-list-container-padding": "var(--space-1)",
+  "component-list-items-gap": "var(--space-1)",
+  "component-list-item-bg-hover": Color.NEUTRAL_JP_100,
+  "component-list-item-bg-selected": Color.NEUTRAL_JP_100,
+  "component-list-item-text-selected": Color.BRAND_JP_EGGPLANT,
+  "component-list-item-text-disabled": Color.NEUTRAL_JP_400,
+  "component-list-item-radius": "var(--radius-md)",
+  "component-list-item-surface-radius": "var(--radius-md)",
+  "component-list-item-gap": "var(--space-3)",
+  "component-list-item-min-height-s": "calc(var(--space-10) + var(--space-1))",
+  "component-list-item-min-height-m": "calc(var(--space-10) + var(--space-4))",
+  "component-list-item-min-height-l": "var(--space-16)",
+  "component-list-item-min-height-compact": "calc(var(--space-10) + var(--space-1))",
+  "component-list-item-padding-block": "var(--component-input-padding-inline)",
+  "component-list-item-padding-block-compact": "var(--space-1)",
+  "component-list-item-padding-inline": "var(--space-3)",
+  "component-list-item-padding-inline-l": "var(--space-4)",
+  "component-list-font-size-s": "var(--font-size-text-sm)",
+  "component-list-line-height-s": "var(--line-height-text-sm)",
+  "component-list-font-size-m": "var(--font-size-text-md)",
+  "component-list-line-height-m": "var(--line-height-text-md)",
+  "component-list-font-size-l": "var(--font-size-text-md)",
+  "component-list-line-height-l": "var(--line-height-text-md)",
+  "component-list-description-font-size": "var(--font-size-text-xs)",
+  "component-list-description-line-height": "var(--line-height-text-xs)",
+  "component-list-description-offset": "var(--space-1)",
+  "component-list-section-gap": "var(--space-3)",
+  "component-list-section-title": Color.NEUTRAL_JP_700,
+  "component-list-section-title-font-size": "var(--font-size-text-xs)",
+  "component-list-section-title-line-height": "var(--line-height-text-xs)",
+  "component-list-section-title-padding-block-start": "var(--space-2)",
+  "component-list-section-title-padding-block-end": "var(--component-input-padding-block)",
   "component-tab-bg": Color.NEUTRAL_JP_0,
   "component-tab-bg-hover": Color.NEUTRAL_JP_100,
   "component-tab-bg-pressed": Color.NEUTRAL_JP_200,

package/esm/hooks/useMediaSizes/index.d.ts

@@ -1,5 +1,5 @@
-import type { BreakpointsTheme } from "../../Theme/breakpoints";
-export type QueryInputFunction = (breakpoints: BreakpointsTheme) => string;
+import type { Media } from "../../Theme/breakpoints";
+export type QueryInputFunction = (breakpoints: Media) => string;
 type QueryInput = QueryInputFunction | string;
 export declare const useMediaSizes: (queryInput: QueryInput) => boolean;
 export {};

package/esm/hooks/useMediaSizes/index.js

@@ -1,10 +1,10 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { useState, useEffect } from 'react';
-import Breakpoints from '../../Theme/breakpoints.js';
+import { media } from '../../Theme/breakpoints.js';
 
 var supportMatchMedia = typeof window !== "undefined" && typeof window.matchMedia !== "undefined";
 var useMediaSizes = function useMediaSizes(queryInput) {
-  var query = typeof queryInput === "function" ? queryInput(Breakpoints) : queryInput;
+  var query = typeof queryInput === "function" ? queryInput(media) : queryInput;
   query = query.replace(/^@media( ?)/m, "");
   var matchMedia = supportMatchMedia ? window.matchMedia : null;
   var _useState = useState(function () {

package/esm/hooks/useTrapFocus/index.d.ts

@@ -1,2 +1,2 @@
 import type { RefObject } from "react";
-export declare function useTrapFocus(refObject: RefObject<HTMLElement | null>): void;
+export declare function useTrapFocus(refObject: RefObject<HTMLElement | null>, isActive?: () => boolean): void;

package/esm/hooks/useTrapFocus/index.js

@@ -3,10 +3,11 @@ import { useEffect } from 'react';
 var getFocusableModalElements = function getFocusableModalElements(element) {
   return element.querySelectorAll('a[href], button, textarea, input[type="text"], input[type="password"], input[type="radio"], input[type="checkbox"], select');
 };
-function useTrapFocus(refObject) {
+function useTrapFocus(refObject, isActive) {
   useEffect(function () {
     var handler = function handler(event) {
       if (!refObject.current || event.code !== "Tab") return;
+      if (isActive && !isActive()) return;
       var focusable = Array.from(getFocusableModalElements(refObject.current));
       var firstElement = focusable[0];
       var lastElement = focusable[focusable.length - 1];
@@ -24,7 +25,7 @@ function useTrapFocus(refObject) {
     return function () {
       document.removeEventListener("keydown", handler);
     };
-  }, [refObject]);
+  }, [refObject, isActive]);
 }
 
 export { useTrapFocus };

package/esm/index.d.ts

@@ -2,6 +2,8 @@ export { Accordion } from "./Accordion";
 export type { AccordionProps } from "./Accordion/index.props";
 export { Avatar } from "./Avatar";
 export type { AvatarProps } from "./Avatar/index.props";
+export { Autocomplete } from "./Autocomplete";
+export type { AutocompleteOption, AutocompleteOptionState, AutocompleteProps, AutocompleteSize, } from "./Autocomplete/index.props";
 export { Badge } from "./Badge";
 export type { Props as BadgeProps } from "./Badge/index.props";
 export { Button } from "./Button";
@@ -38,12 +40,14 @@ export { Image } from "./Image";
 export type { ImageProps } from "./Image/index.props";
 export { Input } from "./Input";
 export type { InputProps } from "./Input/index.props";
+export { List, ListItem, ListSection } from "./List";
+export type { ListDensity, ListItemBaseProps, ListItemButtonProps, ListItemLinkProps, ListItemProps, ListItemStaticProps, ListProps, ListSectionProps, ListSize, ListSurface, } from "./List/index.props";
 export { Menu } from "./Menu";
 export type { Props as MenuProps } from "./Menu/index.props";
 export { MenuItem } from "./Menu/components/MenuItem";
 export type { MenuItemProps } from "./Menu/components/MenuItem/index.props";
-export { Modal } from "./Modal";
-export type { ModalProps } from "./Modal/index.props";
+export { Modal, ModalHeader, ModalTitle, ModalBody, ModalFooter, } from "./Modal";
+export type { ModalProps, ModalHeaderProps, ModalTitleProps, ModalBodyProps, ModalFooterProps, } from "./Modal/index.props";
 export { MultiSelect } from "./MultiSelect";
 export type { MultiSelectProps } from "./MultiSelect/index.props";
 export { NumberInput } from "./NumberInput";
@@ -74,7 +78,8 @@ export { TabsPanels } from "./TabsPanels";
 export type { TabsPanelsProps } from "./TabsPanels/index.props";
 export { TextArea } from "./TextArea";
 export type { ITextAreaProps } from "./TextArea/index.props";
-export { THEMES } from "./Theme";
+export { THEMES, BREAKPOINTS, media } from "./Theme";
+export type { BreakpointName, Media } from "./Theme";
 export { TimeSelect } from "./TimeSelect";
 export type { TimeSelectProps } from "./TimeSelect/index.props";
 export { Tooltip } from "./Tooltip";

package/esm/index.js

@@ -1,5 +1,6 @@
 export { Accordion } from './Accordion/index.js';
 export { Avatar } from './Avatar/index.js';
+export { Autocomplete } from './Autocomplete/Autocomplete.js';
 export { Badge } from './Badge/index.js';
 export { Button } from './Button/index.js';
 export { Calendar } from './Calendar/Calendar.js';
@@ -18,6 +19,7 @@ export { Grid } from './Grid/index.js';
 export { GridItem } from './Grid/Item/index.js';
 export { Image } from './Image/index.js';
 export { Input } from './Input/index.js';
+export { List, ListItem, ListSection } from './List/List.js';
 export { Menu } from './Menu/index.js';
 export { MenuItem } from './Menu/components/MenuItem/index.js';
 export { Modal } from './Modal/index.js';
@@ -63,3 +65,8 @@ export { Setting } from './Icons/Setting.js';
 export { Shield } from './Icons/Shield.js';
 export { Trash } from './Icons/Trash.js';
 export { User } from './Icons/User.js';
+export { BREAKPOINTS, media } from './Theme/breakpoints.js';
+export { Body as ModalBody } from './Modal/components/Body/index.js';
+export { Footer as ModalFooter } from './Modal/components/Footer/index.js';
+export { Header as ModalHeader } from './Modal/components/Header/index.js';
+export { Title as ModalTitle } from './Modal/components/Title/index.js';

package/esm/theme_ba_variables.css

@@ -108,14 +108,17 @@
 --color-action-secondary-hover: #B9F18E;
 --color-action-secondary-pressed: #82D257;
 --color-action-secondary-text: #163300;
+--color-action-clear-text-hover: #2D681A;
 --color-action-disabled: #EDF0EA;
 --color-action-disabled-text: #AAB3A8;
 --color-focus-ring: #9FE870;
 --color-status-success: #244F18;
 --color-status-success-bg: #E4FFD2;
+--color-status-success-bg-hover: #D0FBAF;
 --color-status-warning: #59470C;
 --color-status-warning-bg: #FFF4BD;
 --color-status-error: #7A1D21;
+--color-status-error-hover: #5F1519;
 --color-status-error-accent: #E5484D;
 --color-status-error-bg: #FFE8E5;
 --color-status-info: #123B40;
@@ -223,6 +226,36 @@
 --component-input-padding-block: 0.3125rem;
 --component-input-padding-inline: 0.625rem;
 --component-input-content-margin-block: 0.4375rem;
+--component-autocomplete-inline-size: calc(var(--space-32) * 2 + var(--space-16));
+--component-autocomplete-border-success: #244F18;
+--component-autocomplete-end-icon-gap: var(--space-1);
+--component-autocomplete-icon-size: var(--component-input-icon-size);
+--component-autocomplete-clear-size: var(--space-6);
+--component-autocomplete-clear-radius: var(--radius-xs);
+--component-autocomplete-clear-icon: #687568;
+--component-autocomplete-clear-bg-hover: #EDF0EA;
+--component-autocomplete-chevron: #687568;
+--component-autocomplete-popup-bg: #FFFFFF;
+--component-autocomplete-popup-border: #E2E7DF;
+--component-autocomplete-popup-radius: var(--radius-md);
+--component-autocomplete-popup-shadow: var(--shadow-raised);
+--component-autocomplete-popup-offset: var(--space-2);
+--component-autocomplete-popup-z-index: 1001;
+--component-autocomplete-list-max-height: 13.75rem;
+--component-autocomplete-list-padding: var(--space-1);
+--component-autocomplete-option-min-height: var(--component-input-height-l);
+--component-autocomplete-option-padding-block: var(--component-input-padding-block);
+--component-autocomplete-option-padding-inline: var(--component-input-padding-inline);
+--component-autocomplete-option-radius: var(--radius-xs);
+--component-autocomplete-option-gap: var(--space-2);
+--component-autocomplete-option-bg-hover: #EDF0EA;
+--component-autocomplete-option-text: #163300;
+--component-autocomplete-option-text-selected: #163300;
+--component-autocomplete-option-text-disabled: #AAB3A8;
+--component-autocomplete-option-description: #687568;
+--component-autocomplete-description-offset: var(--space-1);
+--component-autocomplete-message-text: #687568;
+--component-autocomplete-message-padding: var(--space-4);
 --component-editable-icon-size: 1rem;
 --component-code-field-height-m: 3rem;
 --component-code-field-height-l: 3.5rem;
@@ -271,82 +304,6 @@
 --component-switch-thumb-size: 1rem;
 --component-switch-thumb-offset: 0.125rem;
 --component-switch-thumb-translate: 1.125rem;
---component-button-font-size-xs: 0.75rem;
---component-button-font-size-s: 0.8125rem;
---component-button-font-size-m: 0.9375rem;
---component-button-font-size-l: 1.125rem;
---component-button-height-xs: 1.8125rem;
---component-button-height-s: 2rem;
---component-button-height-m: 2.25rem;
---component-button-height-l: 2.625rem;
---component-button-radius: 1.125rem;
---component-button-radius-lg: 1.5rem;
---component-button-primary-bg: #163300;
---component-button-primary-border: #163300;
---component-button-primary-text: #9FE870;
---component-button-primary-bg-hover: #203F21;
---component-button-primary-border-hover: #203F21;
---component-button-primary-text-hover: #9FE870;
---component-button-primary-bg-pressed: #9FE870;
---component-button-primary-border-pressed: #9FE870;
---component-button-primary-text-pressed: #163300;
---component-button-secondary-bg: #E2E7DF;
---component-button-secondary-border: #CBD2C8;
---component-button-secondary-text: #163300;
---component-button-secondary-bg-hover: #CBD2C8;
---component-button-secondary-border-hover: #879285;
---component-button-secondary-text-hover: #163300;
---component-button-secondary-bg-pressed: #163300;
---component-button-secondary-border-pressed: #163300;
---component-button-secondary-text-pressed: #9FE870;
---component-button-outline-bg: #FFFFFF;
---component-button-outline-border: #CBD2C8;
---component-button-outline-text: #163300;
---component-button-outline-bg-hover: #EDF0EA;
---component-button-outline-border-hover: #879285;
---component-button-outline-text-hover: #163300;
---component-button-outline-bg-pressed: #E2E7DF;
---component-button-outline-border-pressed: #163300;
---component-button-outline-text-pressed: #0D1F12;
---component-button-pseudo-bg: #F5F7F2;
---component-button-pseudo-border: #F5F7F2;
---component-button-pseudo-text: #163300;
---component-button-pseudo-bg-hover: #EDF0EA;
---component-button-pseudo-border-hover: #EDF0EA;
---component-button-pseudo-text-hover: #163300;
---component-button-pseudo-bg-pressed: #E2E7DF;
---component-button-pseudo-border-pressed: #E2E7DF;
---component-button-pseudo-text-pressed: #163300;
---component-button-clear-bg: transparent;
---component-button-clear-border: transparent;
---component-button-clear-text: #163300;
---component-button-clear-bg-hover: transparent;
---component-button-clear-border-hover: transparent;
---component-button-clear-text-hover: #2D681A;
---component-button-clear-bg-pressed: transparent;
---component-button-clear-border-pressed: transparent;
---component-button-clear-text-pressed: #0D1F12;
---component-button-alert-bg: #7A1D21;
---component-button-alert-border: #7A1D21;
---component-button-alert-text: #FFFFFF;
---component-button-alert-bg-hover: #5F1519;
---component-button-alert-border-hover: #5F1519;
---component-button-alert-text-hover: #FFFFFF;
---component-button-alert-bg-pressed: #E5484D;
---component-button-alert-border-pressed: #E5484D;
---component-button-alert-text-pressed: #FFFFFF;
---component-button-success-bg: #E4FFD2;
---component-button-success-border: #E4FFD2;
---component-button-success-text: #163300;
---component-button-success-bg-hover: #D0FBAF;
---component-button-success-border-hover: #D0FBAF;
---component-button-success-text-hover: #163300;
---component-button-success-bg-pressed: #244F18;
---component-button-success-border-pressed: #244F18;
---component-button-success-text-pressed: #FFFFFF;
---component-button-bg-disabled: #EDF0EA;
---component-button-border-disabled: #EDF0EA;
---component-button-text-disabled: #AAB3A8;
 --component-menu-bg: #FFFFFF;
 --component-menu-text: #163300;
 --component-menu-border: #E2E7DF;
@@ -356,6 +313,46 @@
 --component-menu-item-bg-pressed: #E2E7DF;
 --component-menu-item-bg-selected: #163300;
 --component-menu-item-text-disabled: #AAB3A8;
+--component-list-bg: #FFFFFF;
+--component-list-text: #163300;
+--component-list-text-disabled: #AAB3A8;
+--component-list-description: #4B584D;
+--component-list-description-selected: #163300;
+--component-list-divider: #E2E7DF;
+--component-list-focus-ring: #9FE870;
+--component-list-container-radius: var(--radius-lg);
+--component-list-container-padding: var(--space-1);
+--component-list-items-gap: var(--space-1);
+--component-list-item-bg-hover: #EDF0EA;
+--component-list-item-bg-selected: #EDF0EA;
+--component-list-item-text-selected: #163300;
+--component-list-item-text-disabled: #AAB3A8;
+--component-list-item-radius: var(--radius-md);
+--component-list-item-surface-radius: var(--radius-md);
+--component-list-item-gap: var(--space-3);
+--component-list-item-min-height-s: calc(var(--space-10) + var(--space-1));
+--component-list-item-min-height-m: calc(var(--space-10) + var(--space-4));
+--component-list-item-min-height-l: var(--space-16);
+--component-list-item-min-height-compact: calc(var(--space-10) + var(--space-1));
+--component-list-item-padding-block: var(--component-input-padding-inline);
+--component-list-item-padding-block-compact: var(--space-1);
+--component-list-item-padding-inline: var(--space-3);
+--component-list-item-padding-inline-l: var(--space-4);
+--component-list-font-size-s: var(--font-size-text-sm);
+--component-list-line-height-s: var(--line-height-text-sm);
+--component-list-font-size-m: var(--font-size-text-md);
+--component-list-line-height-m: var(--line-height-text-md);
+--component-list-font-size-l: var(--font-size-text-md);
+--component-list-line-height-l: var(--line-height-text-md);
+--component-list-description-font-size: var(--font-size-text-xs);
+--component-list-description-line-height: var(--line-height-text-xs);
+--component-list-description-offset: var(--space-1);
+--component-list-section-gap: var(--space-3);
+--component-list-section-title: #4B584D;
+--component-list-section-title-font-size: var(--font-size-text-xs);
+--component-list-section-title-line-height: var(--line-height-text-xs);
+--component-list-section-title-padding-block-start: var(--space-2);
+--component-list-section-title-padding-block-end: var(--component-input-padding-block);
 --component-tab-bg: #FFFFFF;
 --component-tab-bg-hover: #EDF0EA;
 --component-tab-bg-pressed: #E2E7DF;
@@ -711,4 +708,80 @@
 --promo-mint: #E4FFD2;
 --promo-sky: #DDF7F7;
 --promo-neon: #EAE4FF;
+--component-button-font-size-xs: 0.75rem;
+--component-button-font-size-s: 0.8125rem;
+--component-button-font-size-m: 0.9375rem;
+--component-button-font-size-l: 1.125rem;
+--component-button-height-xs: 1.8125rem;
+--component-button-height-s: 2rem;
+--component-button-height-m: 2.25rem;
+--component-button-height-l: 2.625rem;
+--component-button-radius: 1.125rem;
+--component-button-radius-lg: 1.5rem;
+--component-button-primary-bg: var(--color-action-primary);
+--component-button-primary-border: var(--color-action-primary);
+--component-button-primary-text: var(--color-action-secondary);
+--component-button-primary-bg-hover: var(--color-action-primary-hover);
+--component-button-primary-border-hover: var(--color-action-primary-hover);
+--component-button-primary-text-hover: var(--color-action-secondary);
+--component-button-primary-bg-pressed: var(--color-action-secondary);
+--component-button-primary-border-pressed: var(--color-action-secondary);
+--component-button-primary-text-pressed: var(--color-text-on-brand);
+--component-button-secondary-bg: var(--color-bg-surface-strong);
+--component-button-secondary-border: var(--color-border-default);
+--component-button-secondary-text: var(--color-text-primary);
+--component-button-secondary-bg-hover: var(--color-neutral-300);
+--component-button-secondary-border-hover: var(--color-border-strong);
+--component-button-secondary-text-hover: var(--color-text-primary);
+--component-button-secondary-bg-pressed: var(--color-action-primary);
+--component-button-secondary-border-pressed: var(--color-action-primary);
+--component-button-secondary-text-pressed: var(--color-action-secondary);
+--component-button-outline-bg: var(--color-bg-surface);
+--component-button-outline-border: var(--color-border-default);
+--component-button-outline-text: var(--color-text-primary);
+--component-button-outline-bg-hover: var(--color-bg-surface-subtle);
+--component-button-outline-border-hover: var(--color-border-strong);
+--component-button-outline-text-hover: var(--color-text-primary);
+--component-button-outline-bg-pressed: var(--color-bg-surface-strong);
+--component-button-outline-border-pressed: var(--color-action-primary);
+--component-button-outline-text-pressed: var(--color-action-primary-pressed);
+--component-button-pseudo-bg: var(--color-bg-canvas);
+--component-button-pseudo-border: var(--color-bg-canvas);
+--component-button-pseudo-text: var(--color-text-primary);
+--component-button-pseudo-bg-hover: var(--color-bg-surface-subtle);
+--component-button-pseudo-border-hover: var(--color-bg-surface-subtle);
+--component-button-pseudo-text-hover: var(--color-text-primary);
+--component-button-pseudo-bg-pressed: var(--color-bg-surface-strong);
+--component-button-pseudo-border-pressed: var(--color-bg-surface-strong);
+--component-button-pseudo-text-pressed: var(--color-text-primary);
+--component-button-clear-bg: transparent;
+--component-button-clear-border: transparent;
+--component-button-clear-text: var(--color-text-primary);
+--component-button-clear-bg-hover: transparent;
+--component-button-clear-border-hover: transparent;
+--component-button-clear-text-hover: var(--color-action-clear-text-hover);
+--component-button-clear-bg-pressed: transparent;
+--component-button-clear-border-pressed: transparent;
+--component-button-clear-text-pressed: var(--color-action-primary-pressed);
+--component-button-alert-bg: var(--color-status-error);
+--component-button-alert-border: var(--color-status-error);
+--component-button-alert-text: var(--color-brand-white);
+--component-button-alert-bg-hover: var(--color-status-error-hover);
+--component-button-alert-border-hover: var(--color-status-error-hover);
+--component-button-alert-text-hover: var(--color-brand-white);
+--component-button-alert-bg-pressed: var(--color-status-error-accent);
+--component-button-alert-border-pressed: var(--color-status-error-accent);
+--component-button-alert-text-pressed: var(--color-brand-white);
+--component-button-success-bg: var(--color-status-success-bg);
+--component-button-success-border: var(--color-status-success-bg);
+--component-button-success-text: var(--color-text-primary);
+--component-button-success-bg-hover: var(--color-status-success-bg-hover);
+--component-button-success-border-hover: var(--color-status-success-bg-hover);
+--component-button-success-text-hover: var(--color-text-primary);
+--component-button-success-bg-pressed: var(--color-status-success);
+--component-button-success-border-pressed: var(--color-status-success);
+--component-button-success-text-pressed: var(--color-brand-white);
+--component-button-bg-disabled: var(--color-action-disabled);
+--component-button-border-disabled: var(--color-action-disabled);
+--component-button-text-disabled: var(--color-action-disabled-text);
 }