colibri-ui 0.8.76 → 0.8.77

package/Button/tokens.js

@@ -0,0 +1,84 @@
+'use strict';
+
+var commonButtonTokens = {
+  "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"
+};
+var BUTTON_TOKENS = Object.assign(Object.assign({}, commonButtonTokens), {
+  "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)"
+});
+
+exports.BUTTON_TOKENS = BUTTON_TOKENS;

package/Calendar/Calendar.js

@@ -7,6 +7,7 @@ var React = require('react');
 var index = require('../Button/index.js');
 require('../Icons/index.js');
 var styles = require('./Calendar.module.css');
+var index$1 = require('../Typography/index.js');
 var Chevron = require('../Icons/Chevron.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -441,7 +442,8 @@ var Calendar = function Calendar(props) {
       className: styles__default.default.month,
       key: dayKey(month),
       "aria-label": heading
-    }, monthsToShow === 2 && (/*#__PURE__*/React__default.default.createElement("h2", {
+    }, monthsToShow === 2 && (/*#__PURE__*/React__default.default.createElement(index$1.Typography, {
+      tag: "h2",
       className: styles__default.default.heading
     }, heading)), /*#__PURE__*/React__default.default.createElement("div", {
       className: styles__default.default.weekdays,

package/Input/index.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import type { InputProps } from "./index.props";
-export declare const Input: ({ className, startIcon, endIcon, label, hint, hasError, required, onChange, onFocus, onBlur, onKeyDown, inputRef, disabled, variant, size, ref, ...props }: InputProps) => React.JSX.Element;
+export declare const Input: ({ className, startIcon, endIcon, label, hint, hasError, required, onChange, onFocus, onBlur, onKeyDown, inputRef, controlAfter, controlClassName, controlRef, disabled, variant, size, ref, ...props }: InputProps) => React.JSX.Element;

package/Input/index.js

@@ -3,9 +3,9 @@
 var tslib = require('tslib');
 var React = require('react');
 var clsx = require('clsx');
-var index = require('../base/FormField/index.js');
-var index$1 = require('../base/InputRoot/index.js');
-var index$2 = require('../base/BaseInput/index.js');
+var index$2 = require('../base/FormField/index.js');
+var index = require('../base/InputRoot/index.js');
+var index$1 = require('../base/BaseInput/index.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -25,35 +25,41 @@ var Input = function Input(_a) {
     onBlur = _a.onBlur,
     onKeyDown = _a.onKeyDown,
     inputRef = _a.inputRef,
+    controlAfter = _a.controlAfter,
+    controlClassName = _a.controlClassName,
+    controlRef = _a.controlRef,
     disabled = _a.disabled,
     _a$variant = _a.variant,
     variant = _a$variant === void 0 ? "primary" : _a$variant,
     _a$size = _a.size,
     size = _a$size === void 0 ? "m" : _a$size,
     ref = _a.ref,
-    props = tslib.__rest(_a, ["className", "startIcon", "endIcon", "label", "hint", "hasError", "required", "onChange", "onFocus", "onBlur", "onKeyDown", "inputRef", "disabled", "variant", "size", "ref"]);
-  return /*#__PURE__*/React__default.default.createElement(index.FormField, {
-    className: clsx__default.default(className),
-    label: label,
-    required: required,
-    hint: hint,
-    hasError: hasError
-  }, /*#__PURE__*/React__default.default.createElement(index$1.InputRoot, {
-    ref: ref,
+    props = tslib.__rest(_a, ["className", "startIcon", "endIcon", "label", "hint", "hasError", "required", "onChange", "onFocus", "onBlur", "onKeyDown", "inputRef", "controlAfter", "controlClassName", "controlRef", "disabled", "variant", "size", "ref"]);
+  var control = /*#__PURE__*/React__default.default.createElement(index.InputRoot, {
+    ref: controlRef !== null && controlRef !== void 0 ? controlRef : ref,
     startIcon: startIcon,
     endIcon: endIcon,
     variant: variant,
     size: size,
     disabled: !!disabled,
     hasError: hasError
-  }, /*#__PURE__*/React__default.default.createElement(index$2.BaseInput, Object.assign({
+  }, /*#__PURE__*/React__default.default.createElement(index$1.BaseInput, Object.assign({
     ref: inputRef,
     onChange: onChange,
     onFocus: onFocus,
     onBlur: onBlur,
     onKeyDown: onKeyDown,
     type: "text"
-  }, props))));
+  }, props)));
+  return /*#__PURE__*/React__default.default.createElement(index$2.FormField, {
+    className: clsx__default.default(className),
+    label: label,
+    required: required,
+    hint: hint,
+    hasError: hasError
+  }, controlAfter || controlClassName || controlRef ? (/*#__PURE__*/React__default.default.createElement("div", {
+    className: controlClassName
+  }, control, controlAfter)) : control);
 };
 
 exports.Input = Input;

package/Input/index.props.d.ts

@@ -2,6 +2,9 @@ import type { ChangeEvent, ForwardedRef, InputHTMLAttributes, ReactNode, FocusEv
 import type { FormFieldProps } from "../base/FormField/index.props";
 import type { Size, Variant } from "../base/InputRoot/index.props";
 export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "size">, Omit<FormFieldProps, "children"> {
+    controlAfter?: ReactNode;
+    controlClassName?: string;
+    controlRef?: Ref<HTMLDivElement>;
     endIcon?: ReactNode;
     hasError?: boolean;
     hint?: ReactNode;
@@ -12,7 +15,7 @@ export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
     onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
     onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
     onInput?: (event: FormEvent<HTMLInputElement>) => void;
-    ref?: Ref<HTMLInputElement>;
+    ref?: Ref<HTMLDivElement>;
     required?: boolean;
     size?: Size;
     startIcon?: ReactNode;

package/List/List.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import type { ListItemProps, ListProps, ListSectionProps } from "./index.props";
+export declare const List: React.ForwardRefExoticComponent<ListProps & React.RefAttributes<HTMLUListElement>>;
+export declare const ListItem: React.ForwardRefExoticComponent<ListItemProps & React.RefAttributes<HTMLLIElement>>;
+export declare const ListSection: React.ForwardRefExoticComponent<ListSectionProps & React.RefAttributes<HTMLLIElement>>;

package/List/List.js

@@ -0,0 +1,161 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var tslib = require('tslib');
+var React = require('react');
+var clsx = require('clsx');
+var styles = require('./List.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty);
+var React__default = /*#__PURE__*/_interopDefault(React);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+var ListContext = /*#__PURE__*/React.createContext({
+  disabled: false,
+  dividers: false,
+  surface: "none"
+});
+var ItemContent = function ItemContent(_ref) {
+  var children = _ref.children,
+    description = _ref.description,
+    contentLeft = _ref.contentLeft,
+    contentRight = _ref.contentRight;
+  return /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, contentLeft != null && /*#__PURE__*/React__default.default.createElement("span", {
+    className: styles__default.default.left
+  }, contentLeft), /*#__PURE__*/React__default.default.createElement("span", {
+    className: styles__default.default.content
+  }, /*#__PURE__*/React__default.default.createElement("span", {
+    className: styles__default.default.title
+  }, children), description != null && (/*#__PURE__*/React__default.default.createElement("span", {
+    className: styles__default.default.description
+  }, description))), contentRight != null && (/*#__PURE__*/React__default.default.createElement("span", {
+    className: styles__default.default.right
+  }, contentRight)));
+};
+var List = /*#__PURE__*/React.forwardRef(function (_a, ref) {
+  var _a$size = _a.size,
+    size = _a$size === void 0 ? "m" : _a$size,
+    _a$density = _a.density,
+    density = _a$density === void 0 ? "normal" : _a$density,
+    _a$surface = _a.surface,
+    surface = _a$surface === void 0 ? "none" : _a$surface,
+    _a$dividers = _a.dividers,
+    dividers = _a$dividers === void 0 ? false : _a$dividers,
+    _a$disabled = _a.disabled,
+    disabled = _a$disabled === void 0 ? false : _a$disabled,
+    ariaLabel = _a.ariaLabel,
+    className = _a.className,
+    children = _a.children,
+    rest = tslib.__rest(_a, ["size", "density", "surface", "dividers", "disabled", "ariaLabel", "className", "children"]);
+  var context = React.useMemo(function () {
+    return {
+      disabled: disabled,
+      dividers: dividers,
+      surface: surface
+    };
+  }, [disabled, dividers, surface]);
+  return /*#__PURE__*/React__default.default.createElement(ListContext.Provider, {
+    value: context
+  }, /*#__PURE__*/React__default.default.createElement("ul", Object.assign({}, rest, {
+    ref: ref,
+    "aria-label": ariaLabel,
+    "aria-disabled": disabled || undefined,
+    className: clsx__default.default(styles__default.default.list, styles__default.default["size_".concat(size)], styles__default.default["density_".concat(density)], styles__default.default["surface_".concat(surface)], _defineProperty__default.default(_defineProperty__default.default({}, styles__default.default.dividers, dividers), styles__default.default["list_disabled"], disabled), className)
+  }), children));
+});
+List.displayName = "List";
+var ListItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _a;
+  var _useContext = React.useContext(ListContext),
+    listDisabled = _useContext.disabled,
+    dividers = _useContext.dividers,
+    surface = _useContext.surface;
+  var children = props.children,
+    description = props.description,
+    contentLeft = props.contentLeft,
+    contentRight = props.contentRight,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
+    _props$selected = props.selected,
+    selected = _props$selected === void 0 ? false : _props$selected,
+    className = props.className,
+    interactiveProps = tslib.__rest(props, ["children", "description", "contentLeft", "contentRight", "disabled", "selected", "className"]);
+  var isDisabled = listDisabled || disabled;
+  var itemClassName = clsx__default.default(styles__default.default.item, _defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default({}, styles__default.default["item_surface"], surface === "items"), styles__default.default["item_divider"], dividers), styles__default.default.selected, selected), styles__default.default["item_disabled"], isDisabled), className);
+  var content = /*#__PURE__*/React__default.default.createElement(ItemContent, {
+    contentLeft: contentLeft,
+    contentRight: contentRight,
+    description: description
+  }, children);
+  if ("href" in interactiveProps && interactiveProps.href) {
+    var _b = interactiveProps,
+      href = _b.href,
+      onAction = _b.onAction,
+      _onClick = _b.onClick,
+      anchorProps = tslib.__rest(_b, ["href", "onAction", "onClick"]);
+    return /*#__PURE__*/React__default.default.createElement("li", {
+      ref: ref,
+      className: itemClassName,
+      "aria-disabled": isDisabled || undefined
+    }, /*#__PURE__*/React__default.default.createElement("a", Object.assign({}, anchorProps, {
+      href: isDisabled ? undefined : href,
+      tabIndex: isDisabled ? -1 : anchorProps.tabIndex,
+      "aria-current": selected ? "page" : undefined,
+      className: styles__default.default.action,
+      onClick: function onClick(event) {
+        if (isDisabled) {
+          event.preventDefault();
+          return;
+        }
+        _onClick === null || _onClick === void 0 ? void 0 : _onClick(event);
+        if (!event.defaultPrevented) onAction === null || onAction === void 0 ? void 0 : onAction();
+      }
+    }), content));
+  }
+  if ("onAction" in interactiveProps && interactiveProps.onAction) {
+    var _c = interactiveProps,
+      _onAction = _c.onAction,
+      buttonProps = tslib.__rest(_c, ["onAction"]);
+    return /*#__PURE__*/React__default.default.createElement("li", {
+      ref: ref,
+      className: itemClassName
+    }, /*#__PURE__*/React__default.default.createElement("button", Object.assign({}, buttonProps, {
+      type: (_a = buttonProps.type) !== null && _a !== void 0 ? _a : "button",
+      disabled: isDisabled,
+      "aria-pressed": selected || undefined,
+      className: styles__default.default.action,
+      onClick: _onAction
+    }), content));
+  }
+  return /*#__PURE__*/React__default.default.createElement("li", Object.assign({}, interactiveProps, {
+    ref: ref,
+    className: itemClassName,
+    "aria-disabled": isDisabled || undefined,
+    "aria-current": selected || undefined
+  }), /*#__PURE__*/React__default.default.createElement("div", {
+    className: styles__default.default["static-content"]
+  }, content));
+});
+ListItem.displayName = "ListItem";
+var ListSection = /*#__PURE__*/React.forwardRef(function (_a, ref) {
+  var title = _a.title,
+    children = _a.children,
+    className = _a.className,
+    rest = tslib.__rest(_a, ["title", "children", "className"]);
+  return /*#__PURE__*/React__default.default.createElement("li", Object.assign({}, rest, {
+    ref: ref,
+    className: clsx__default.default(styles__default.default.section, className)
+  }), title != null && /*#__PURE__*/React__default.default.createElement("div", {
+    className: styles__default.default["section-title"]
+  }, title), /*#__PURE__*/React__default.default.createElement("ul", {
+    className: styles__default.default["nested-list"]
+  }, children));
+});
+ListSection.displayName = "ListSection";
+
+exports.List = List;
+exports.ListItem = ListItem;
+exports.ListSection = ListSection;

package/List/List.module.css

@@ -0,0 +1,185 @@
+.list {
+  box-sizing: border-box;
+  color: var(--component-list-text);
+  font-family: var(--font-family-ui);
+  list-style: none;
+  margin: var(--space-0);
+  padding: var(--space-0);
+  width: 100%;
+}
+
+.surface_container {
+  background: var(--component-list-bg);
+  border-radius: var(--component-list-container-radius);
+  padding: var(--component-list-container-padding);
+}
+
+.surface_items {
+  display: flex;
+  flex-direction: column;
+  gap: var(--component-list-items-gap);
+}
+
+.item {
+  display: block;
+  margin: var(--space-0);
+  position: relative;
+}
+
+.item_surface {
+  background: var(--component-list-bg);
+  border-radius: var(--component-list-item-surface-radius);
+  overflow: hidden;
+}
+
+.action,
+.static-content {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-radius: var(--component-list-item-radius);
+  box-sizing: border-box;
+  color: inherit;
+  display: flex;
+  font: inherit;
+  gap: var(--component-list-item-gap);
+  min-height: var(--component-list-item-min-height-m);
+  padding: var(--component-list-item-padding-block) var(--component-list-item-padding-inline);
+  text-align: left;
+  text-decoration: none;
+  width: 100%;
+}
+
+.action {
+  cursor: pointer;
+}
+.action:hover {
+  background: var(--component-list-item-bg-hover);
+}
+.action:focus-visible {
+  outline: var(--focus-ring-width) solid var(--component-list-focus-ring);
+  outline-offset: calc(var(--focus-ring-width) * -1);
+}
+
+.content {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: center;
+  min-width: 0;
+}
+
+.title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.description {
+  color: var(--component-list-description);
+  font-size: var(--component-list-description-font-size);
+  line-height: var(--component-list-description-line-height);
+  margin-top: var(--component-list-description-offset);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.left,
+.right {
+  align-items: center;
+  display: inline-flex;
+  flex: none;
+  justify-content: center;
+}
+
+.selected .action,
+.selected .static-content {
+  background: var(--component-list-item-bg-selected);
+  color: var(--component-list-item-text-selected);
+}
+.selected .description {
+  color: var(--component-list-description-selected);
+}
+
+.list_disabled {
+  color: var(--component-list-text-disabled);
+}
+
+.item_divider:not(:last-child)::after {
+  background: var(--component-list-divider);
+  bottom: 0;
+  content: "";
+  height: var(--border-width-hairline);
+  left: var(--component-list-item-padding-inline);
+  position: absolute;
+  right: var(--component-list-item-padding-inline);
+}
+
+.density_compact .action,
+.density_compact .static-content {
+  min-height: var(--component-list-item-min-height-compact);
+  padding-bottom: var(--component-list-item-padding-block-compact);
+  padding-top: var(--component-list-item-padding-block-compact);
+}
+
+.size_s {
+  font-size: var(--component-list-font-size-s);
+  line-height: var(--component-list-line-height-s);
+}
+.size_s .action,
+.size_s .static-content {
+  min-height: var(--component-list-item-min-height-s);
+}
+
+.size_m {
+  font-size: var(--component-list-font-size-m);
+  line-height: var(--component-list-line-height-m);
+}
+
+.size_l {
+  font-size: var(--component-list-font-size-l);
+  line-height: var(--component-list-line-height-l);
+}
+.size_l .action,
+.size_l .static-content {
+  min-height: var(--component-list-item-min-height-l);
+  padding-left: var(--component-list-item-padding-inline-l);
+  padding-right: var(--component-list-item-padding-inline-l);
+}
+
+.item_disabled {
+  color: var(--component-list-item-text-disabled);
+}
+.item_disabled .action {
+  cursor: not-allowed;
+}
+.item_disabled .action:hover {
+  background: transparent;
+}
+
+.section {
+  list-style: none;
+  margin: var(--space-0);
+  padding: var(--space-0);
+}
+
+.section + .section {
+  margin-top: var(--component-list-section-gap);
+}
+
+.section-title {
+  color: var(--component-list-section-title);
+  font-size: var(--component-list-section-title-font-size);
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: var(--letter-spacing-ui);
+  line-height: var(--component-list-section-title-line-height);
+  padding: var(--component-list-section-title-padding-block-start) var(--component-list-item-padding-inline) var(--component-list-section-title-padding-block-end);
+  text-transform: uppercase;
+}
+
+.nested-list {
+  list-style: none;
+  margin: var(--space-0);
+  padding: var(--space-0);
+}

package/List/index.d.ts

@@ -0,0 +1,2 @@
+export { List, ListItem, ListSection } from "./List";
+export type { ListDensity, ListItemBaseProps, ListItemButtonProps, ListItemLinkProps, ListItemProps, ListItemStaticProps, ListProps, ListSectionProps, ListSize, ListSurface, } from "./index.props";

package/List/index.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var List = require('./List.js');
+
+
+
+exports.List = List.List;
+exports.ListItem = List.ListItem;
+exports.ListSection = List.ListSection;

package/List/index.props.d.ts

@@ -0,0 +1,43 @@
+import type { AnchorHTMLAttributes, ButtonHTMLAttributes, HTMLAttributes, ReactNode } from "react";
+export type ListSize = "s" | "m" | "l";
+export type ListDensity = "compact" | "normal";
+export type ListSurface = "none" | "container" | "items";
+export interface ListContextValue {
+    disabled: boolean;
+    dividers: boolean;
+    surface: ListSurface;
+}
+export interface ListProps extends HTMLAttributes<HTMLUListElement> {
+    ariaLabel?: string;
+    density?: ListDensity;
+    disabled?: boolean;
+    dividers?: boolean;
+    size?: ListSize;
+    surface?: ListSurface;
+}
+export interface ListItemBaseProps {
+    children: ReactNode;
+    className?: string;
+    contentLeft?: ReactNode;
+    contentRight?: ReactNode;
+    description?: ReactNode;
+    disabled?: boolean;
+    selected?: boolean;
+}
+export interface ListItemStaticProps extends ListItemBaseProps, Omit<HTMLAttributes<HTMLLIElement>, "children" | "onClick"> {
+    href?: never;
+    onAction?: never;
+}
+export interface ListItemButtonProps extends ListItemBaseProps, Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "disabled" | "onClick"> {
+    href?: never;
+    onAction: () => void;
+}
+export interface ListItemLinkProps extends ListItemBaseProps, Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "children" | "href"> {
+    href: string;
+    onAction?: () => void;
+}
+export type ListItemProps = ListItemStaticProps | ListItemButtonProps | ListItemLinkProps;
+export interface ListSectionProps extends Omit<HTMLAttributes<HTMLLIElement>, "title"> {
+    children: ReactNode;
+    title?: ReactNode;
+}

package/List/package.json

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

package/Modal/Modal.module.css

@@ -6,19 +6,17 @@
   width: 100%;
   z-index: 1000;
 }
-
-.title-wrapper {
-  align-items: center;
-  border-bottom: var(--border-width-hairline) solid var(--component-modal-border);
-  display: flex;
-  justify-content: space-between;
-  padding: var(--space-4) var(--space-5);
+.root_contained {
+  left: 0;
+  position: absolute;
+  z-index: 2;
 }
 
 .close-wrapper {
   align-items: center;
   box-sizing: border-box;
   display: flex;
+  flex: none;
   justify-content: flex-end;
   min-height: var(--component-modal-close-min-height);
   padding: 0 var(--space-5);
@@ -32,6 +30,9 @@
   top: 0;
   width: 100%;
 }
+.root_contained .modal-overlay {
+  position: absolute;
+}
 
 .modal-wrapper {
   background-color: var(--component-modal-bg);
@@ -53,4 +54,10 @@
   max-height: calc(100vh - var(--component-modal-viewport-offset));
   max-width: calc(100vw - var(--component-modal-viewport-offset));
   min-width: var(--component-modal-desktop-min-width);
+}
+
+.modal-wrapper_contained.modal-wrapper_desktop {
+  max-height: calc(100% - var(--space-8));
+  max-width: calc(100% - var(--space-8));
+  min-width: 0;
 }