colibri-ui 0.7.54 → 0.7.56

package/Checkbox/Checkbox.module.css

@@ -53,8 +53,8 @@
 }
 
 .variant_primary_error {
-  border-color: red;
-  box-shadow: 0 0 0 2px red;
+  border-color: var(--palette-alert);
+  box-shadow: 0 0 0 2px var(--palette-alert);
 }
 .variant_primary_checked::after {
   border-block-end: 2px solid var(--palette-white);

package/DotsLoader/DotsLoader.module.css

@@ -4,16 +4,6 @@
   width: 70px;
 }
 
-.dot {
-  animation-duration: 1.6s;
-  animation-iteration-count: infinite;
-  animation-name: pending;
-  background-color: var(--palette-black);
-  border-radius: 5px;
-  height: 10px;
-  transform: scale(0);
-  width: 10px;
-}
 @keyframes pending {
   0% {
     transform: scale(0);
@@ -25,6 +15,16 @@
     transform: scale(0);
   }
 }
+.dot {
+  animation-duration: 1.6s;
+  animation-iteration-count: infinite;
+  animation-name: pending;
+  background-color: var(--palette-black);
+  border-radius: 5px;
+  height: 10px;
+  transform: scale(0);
+  width: 10px;
+}
 .dot_first {
   animation-delay: 0s;
 }

package/InputRadio/InputRadio.module.css

@@ -0,0 +1,97 @@
+.label {
+  display: inline-block;
+  vertical-align: baseline;
+}
+
+.text {
+  flex-basis: auto;
+  flex-grow: 1;
+  flex-shrink: 1;
+  line-height: 18px;
+  margin-inline-start: 8px;
+}
+
+.icon {
+  background-color: var(--palette-white);
+  block-size: 16px;
+  border: solid 1px var(--palette-bg-3);
+  border-radius: 100%;
+  box-sizing: border-box;
+  display: block;
+  flex-shrink: 0;
+  inline-size: 16px;
+  margin-block-start: 1px;
+  position: relative;
+  transition: border-color 0.16s ease, box-shadow 0.16s ease;
+}
+
+.container {
+  align-items: flex-start;
+  cursor: pointer;
+  display: flex;
+  padding: 3px 0;
+}
+.container_disabled {
+  cursor: inherit;
+}
+.container_error .text {
+  color: var(--palette-alert);
+}
+.container_error .icon {
+  border-color: var(--palette-alert);
+  box-shadow: 0 0 0 2px var(--palette-tretiary-2);
+}
+
+.input {
+  block-size: 1px;
+  border: 0;
+  clip: rect(0 0 0 0);
+  inline-size: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+}
+.input:not(.input_disabled):not(.input_error):hover + .icon {
+  border-color: var(--inputradio-primary-background-color-hovered);
+}
+.input:not(.input_disabled):not(.input_error):focus + .icon {
+  box-shadow: 0 0 0 2px var(--inputradio-primary-box-shadow-focused);
+}
+.input:not(.input_disabled):not(.input_error):active + .icon {
+  background-color: var(--inputradio-primary-background-color-focused);
+  border-color: var(--inputradio-primary-border-color-focused);
+  box-shadow: 0 0 0 2px var(--inputradio-primary-box-shadow-focused);
+}
+.input:not(.input_disabled):not(.input_error) .input_checked:hover + .icon {
+  border-color: var(--inputradio-primary-background-color-hovered);
+}
+.input:not(.input_disabled):not(.input_error) .input_checked:active + .icon {
+  background-color: var(--palette-white);
+  border: 4px solid var(--inputradio-primary-background-color-checked);
+}
+.input_checked + .icon {
+  background-color: var(--palette-white);
+  border: 4px solid var(--inputradio-primary-background-color-checked);
+}
+.input_disabled + .icon {
+  border-radius: 50%;
+}
+.input_disabled + .icon::after {
+  background-color: rgba(246, 246, 246, 0.8);
+  content: "";
+  display: block;
+  inset: 0;
+  margin: -1px;
+  position: absolute;
+  border-radius: 50%;
+}
+.input_checked:disabled + .icon::after {
+  margin: -4px;
+}
+
+.note {
+  color: var(--palette-bg-5);
+  margin-block-start: 4px;
+  padding-inline-start: 24px;
+}

package/InputRadio/index.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+import type { FC, CSSProperties, PropsWithChildren, FocusEvent, ChangeEvent } from "react";
+type Props = {
+    checked?: boolean;
+    className?: string;
+    containerClassName?: string;
+    disabled?: boolean;
+    error?: string;
+    id?: string;
+    name?: string;
+    note?: string;
+    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
+    onFocus?: (event: FocusEvent<HTMLInputElement>) => void;
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    onClick?: (event: React.MouseEvent<HTMLLabelElement, MouseEvent>) => void;
+    onMouseEnter?: (event: React.MouseEvent<HTMLLabelElement, MouseEvent>) => void;
+    style?: CSSProperties;
+    text?: string;
+    value: string | number;
+    testid?: string;
+};
+declare const InputRadio: FC<PropsWithChildren<Props>>;
+export default InputRadio;

package/InputRadio/index.js

@@ -0,0 +1,76 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var classNames = require('classnames/bind');
+var index = require('../Typography/index.js');
+var styles = require('./InputRadio.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+var clx = classNames__default.default.bind(styles__default.default);
+var InputRadio = /*#__PURE__*/React.memo(function (_a) {
+  var checked = _a.checked,
+    children = _a.children,
+    className = _a.className,
+    containerClassName = _a.containerClassName,
+    disabled = _a.disabled,
+    error = _a.error,
+    id = _a.id,
+    name = _a.name,
+    note = _a.note,
+    onBlur = _a.onBlur,
+    onFocus = _a.onFocus,
+    onChange = _a.onChange,
+    onClick = _a.onClick,
+    onMouseEnter = _a.onMouseEnter,
+    style = _a.style,
+    text = _a.text,
+    value = _a.value,
+    testid = _a.testid,
+    rest = tslib.__rest(_a, ["checked", "children", "className", "containerClassName", "disabled", "error", "id", "name", "note", "onBlur", "onFocus", "onChange", "onClick", "onMouseEnter", "style", "text", "value", "testid"]);
+  return /*#__PURE__*/React__default.default.createElement("label", {
+    className: clx(styles__default.default.label, className),
+    htmlFor: id,
+    style: style,
+    onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    "data-testid": testid
+  }, /*#__PURE__*/React__default.default.createElement("div", {
+    className: clx(styles__default.default.container, {
+      container_disabled: !!disabled,
+      container_error: !!error
+    }, containerClassName)
+  }, /*#__PURE__*/React__default.default.createElement("input", tslib.__assign({
+    type: "radio",
+    id: id,
+    value: value,
+    name: name,
+    className: clx(styles__default.default.input, {
+      input_error: !!error,
+      input_checked: !!checked,
+      input_disabled: !!disabled
+    }),
+    checked: checked,
+    disabled: disabled,
+    onChange: onChange,
+    onFocus: onFocus,
+    onBlur: onBlur
+  }, rest)), /*#__PURE__*/React__default.default.createElement("span", {
+    className: clx(styles__default.default.icon)
+  }), /*#__PURE__*/React__default.default.createElement("span", {
+    className: clx(styles__default.default.text)
+  }, !children && text, !text && children)), !!note && ( /*#__PURE__*/React__default.default.createElement(index.default, {
+    tag: "p",
+    size: "s",
+    className: clx(styles__default.default.note)
+  }, note)));
+});
+
+exports.default = InputRadio;

package/InputRadio/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../esm/InputRadio/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/RadioGroup/Radio.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import type { ChangeEvent, FC, FocusEvent } from "react";
+type Props = {
+    value: string | number;
+    text: string;
+    id?: string;
+    note?: string;
+    name?: string;
+    checked?: boolean;
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
+    onClick?: (event: React.MouseEvent<HTMLLabelElement, MouseEvent>) => void;
+    onMouseEnter?: (event: React.MouseEvent<HTMLLabelElement, MouseEvent>) => void;
+    className: string;
+    disabled?: boolean;
+    testId?: string;
+};
+declare const Radio: FC<Props>;
+export default Radio;

package/RadioGroup/Radio.js

@@ -0,0 +1,45 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var index = require('../InputRadio/index.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+var Radio = function Radio(_a) {
+  var id = _a.id,
+    value = _a.value,
+    text = _a.text,
+    note = _a.note,
+    name = _a.name,
+    _b = _a.checked,
+    checked = _b === void 0 ? false : _b,
+    onChange = _a.onChange,
+    onBlur = _a.onBlur,
+    onClick = _a.onClick,
+    onMouseEnter = _a.onMouseEnter,
+    className = _a.className,
+    _c = _a.disabled,
+    disabled = _c === void 0 ? false : _c,
+    testId = _a.testId;
+  return /*#__PURE__*/React__default.default.createElement(index.default, {
+    id: id,
+    value: value,
+    checked: checked,
+    onChange: onChange,
+    onBlur: onBlur,
+    onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    text: text,
+    note: note,
+    name: name,
+    className: className,
+    disabled: disabled,
+    testid: testId
+  });
+};
+
+exports.default = Radio;

package/RadioGroup/RadioGroup.module.css

@@ -0,0 +1,30 @@
+.group {
+  display: inline-flex;
+}
+.group_wide {
+  inline-size: 100%;
+}
+.group_column {
+  flex-direction: column;
+}
+.group_column .radio:not(:last-child) {
+  margin-block-end: 16px;
+}
+.group_wrapped {
+  flex-wrap: wrap;
+}
+.group_wrapped .radio {
+  inline-size: 100%;
+  margin: 8px auto;
+}
+.group_wrapped .radio:first-child {
+  margin-block-start: 0;
+}
+.group_wrapped .radio:last-child {
+  margin-block-end: 0;
+}
+
+.radio {
+  line-height: 16px;
+  margin-inline-end: 20px;
+}

package/RadioGroup/index.d.ts

@@ -0,0 +1,26 @@
+import React, { FC } from "react";
+export interface Option {
+    id?: string;
+    val: string | number;
+    text: string;
+    note?: string;
+    name?: string;
+    tooltipContent?: () => React.ReactElement;
+    onClick?: (event: React.MouseEvent<HTMLLabelElement, MouseEvent>) => void;
+    onMouseEnter?: (event: React.MouseEvent<HTMLLabelElement, MouseEvent>) => void;
+    className?: string;
+    disabled?: boolean;
+}
+interface Props {
+    val?: string | number;
+    options: Option[];
+    onChange: (value: string) => void;
+    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    column?: boolean;
+    wrapped?: boolean;
+    className?: string;
+    disabled?: boolean;
+    hasError?: boolean;
+}
+declare const RadioGroup: FC<Props>;
+export default RadioGroup;

package/RadioGroup/index.js

@@ -0,0 +1,68 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var classNames = require('classnames/bind');
+var Radio = require('./Radio.js');
+var styles = require('./RadioGroup.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+var clx = classNames__default.default.bind(styles__default.default);
+var RadioGroup = /*#__PURE__*/React.memo(function (_a) {
+  var val = _a.val,
+    options = _a.options,
+    _onChange = _a.onChange,
+    onBlur = _a.onBlur,
+    _b = _a.column,
+    column = _b === void 0 ? false : _b,
+    _c = _a.wrapped,
+    wrapped = _c === void 0 ? false : _c,
+    className = _a.className,
+    _d = _a.disabled,
+    disabled = _d === void 0 ? false : _d,
+    _e = _a.hasError,
+    hasError = _e === void 0 ? false : _e;
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: clx(styles__default.default.group, {
+      column: column,
+      wrapped: wrapped,
+      hasError: hasError
+    }, className)
+  }, options.map(function (option) {
+    var id = option.id,
+      optionVal = option.val,
+      text = option.text,
+      note = option.note,
+      name = option.name,
+      onClick = option.onClick,
+      onMouseEnter = option.onMouseEnter,
+      optionClassName = option.className,
+      optionDisabled = option.disabled;
+    return /*#__PURE__*/React__default.default.createElement(Radio.default, {
+      key: optionVal,
+      id: id,
+      testId: id,
+      value: optionVal,
+      text: text,
+      note: note,
+      name: name,
+      className: clx(styles__default.default.radio, optionClassName),
+      checked: val === optionVal,
+      onChange: function onChange(e) {
+        return _onChange(e.target.value);
+      },
+      onBlur: onBlur,
+      onClick: onClick,
+      onMouseEnter: onMouseEnter,
+      disabled: disabled || optionDisabled
+    });
+  }));
+});
+
+exports.default = RadioGroup;

package/RadioGroup/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../esm/RadioGroup/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/Theme/global.css

@@ -17,6 +17,9 @@
   margin: 0;
   padding: 0;
 }
+[data-page=colibri-ui] *, [data-page=colibri-ui] *::before, [data-page=colibri-ui] *::after {
+  box-sizing: inherit;
+}
 [data-page=colibri-ui] input,
 [data-page=colibri-ui] textarea,
 [data-page=colibri-ui] select,

package/Theme/index.d.ts

@@ -73,6 +73,11 @@ export declare const THEMES: {
         "checkbox-primary-border-color-active": string;
         "checkbox-primary-box-shadow-active": string;
         "checkbox-primary-background-color-disabled": string;
+        "inputradio-primary-background-color-checked": string;
+        "inputradio-primary-background-color-hovered": string;
+        "inputradio-primary-box-shadow-focused": string;
+        "inputradio-primary-background-color-focused": string;
+        "inputradio-primary-border-color-focused": string;
         "switch-primary-background-color": string;
         "switch-primary-border-color": string;
         "switch-primary-background-color-checked": string;

package/Theme/themes/default.d.ts

@@ -72,6 +72,11 @@ declare const _default: {
     "checkbox-primary-border-color-active": string;
     "checkbox-primary-box-shadow-active": string;
     "checkbox-primary-background-color-disabled": string;
+    "inputradio-primary-background-color-checked": string;
+    "inputradio-primary-background-color-hovered": string;
+    "inputradio-primary-box-shadow-focused": string;
+    "inputradio-primary-background-color-focused": string;
+    "inputradio-primary-border-color-focused": string;
     "switch-primary-background-color": string;
     "switch-primary-border-color": string;
     "switch-primary-background-color-checked": string;

package/Theme/themes/default.js

@@ -78,6 +78,11 @@ var THEME_DEFAULT = {
   "checkbox-primary-border-color-active": color.Color.PRIMARY_4,
   "checkbox-primary-box-shadow-active": color.Color.PRIMARY_4,
   "checkbox-primary-background-color-disabled": color.Color.PRIMARY_1,
+  "inputradio-primary-background-color-checked": color.Color.PRIMARY_4,
+  "inputradio-primary-background-color-hovered": color.Color.PRIMARY_4,
+  "inputradio-primary-box-shadow-focused": color.Color.PRIMARY_1,
+  "inputradio-primary-background-color-focused": color.Color.PRIMARY_1,
+  "inputradio-primary-border-color-focused": color.Color.PRIMARY_1,
   "switch-primary-background-color": color.Color.BG_2,
   "switch-primary-border-color": color.Color.BG_2,
   "switch-primary-background-color-checked": color.Color.PRIMARY_5,

package/Typography/index.props.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties } from "react";
+import type { CSSProperties } from "react";
 export type TypographyVariant = "alert" | "success" | "secondary";
 export type TypographyFontWeight = "normal" | "medium" | "bold";
 export type TypographySize = "xs" | "s" | "m" | "l" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";

package/esm/Checkbox/Checkbox.module.css

@@ -53,8 +53,8 @@
 }
 
 .variant_primary_error {
-  border-color: red;
-  box-shadow: 0 0 0 2px red;
+  border-color: var(--palette-alert);
+  box-shadow: 0 0 0 2px var(--palette-alert);
 }
 .variant_primary_checked::after {
   border-block-end: 2px solid var(--palette-white);

package/esm/DotsLoader/DotsLoader.module.css

@@ -4,16 +4,6 @@
   width: 70px;
 }
 
-.dot {
-  animation-duration: 1.6s;
-  animation-iteration-count: infinite;
-  animation-name: pending;
-  background-color: var(--palette-black);
-  border-radius: 5px;
-  height: 10px;
-  transform: scale(0);
-  width: 10px;
-}
 @keyframes pending {
   0% {
     transform: scale(0);
@@ -25,6 +15,16 @@
     transform: scale(0);
   }
 }
+.dot {
+  animation-duration: 1.6s;
+  animation-iteration-count: infinite;
+  animation-name: pending;
+  background-color: var(--palette-black);
+  border-radius: 5px;
+  height: 10px;
+  transform: scale(0);
+  width: 10px;
+}
 .dot_first {
   animation-delay: 0s;
 }

package/esm/InputRadio/InputRadio.module.css

@@ -0,0 +1,97 @@
+.label {
+  display: inline-block;
+  vertical-align: baseline;
+}
+
+.text {
+  flex-basis: auto;
+  flex-grow: 1;
+  flex-shrink: 1;
+  line-height: 18px;
+  margin-inline-start: 8px;
+}
+
+.icon {
+  background-color: var(--palette-white);
+  block-size: 16px;
+  border: solid 1px var(--palette-bg-3);
+  border-radius: 100%;
+  box-sizing: border-box;
+  display: block;
+  flex-shrink: 0;
+  inline-size: 16px;
+  margin-block-start: 1px;
+  position: relative;
+  transition: border-color 0.16s ease, box-shadow 0.16s ease;
+}
+
+.container {
+  align-items: flex-start;
+  cursor: pointer;
+  display: flex;
+  padding: 3px 0;
+}
+.container_disabled {
+  cursor: inherit;
+}
+.container_error .text {
+  color: var(--palette-alert);
+}
+.container_error .icon {
+  border-color: var(--palette-alert);
+  box-shadow: 0 0 0 2px var(--palette-tretiary-2);
+}
+
+.input {
+  block-size: 1px;
+  border: 0;
+  clip: rect(0 0 0 0);
+  inline-size: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+}
+.input:not(.input_disabled):not(.input_error):hover + .icon {
+  border-color: var(--inputradio-primary-background-color-hovered);
+}
+.input:not(.input_disabled):not(.input_error):focus + .icon {
+  box-shadow: 0 0 0 2px var(--inputradio-primary-box-shadow-focused);
+}
+.input:not(.input_disabled):not(.input_error):active + .icon {
+  background-color: var(--inputradio-primary-background-color-focused);
+  border-color: var(--inputradio-primary-border-color-focused);
+  box-shadow: 0 0 0 2px var(--inputradio-primary-box-shadow-focused);
+}
+.input:not(.input_disabled):not(.input_error) .input_checked:hover + .icon {
+  border-color: var(--inputradio-primary-background-color-hovered);
+}
+.input:not(.input_disabled):not(.input_error) .input_checked:active + .icon {
+  background-color: var(--palette-white);
+  border: 4px solid var(--inputradio-primary-background-color-checked);
+}
+.input_checked + .icon {
+  background-color: var(--palette-white);
+  border: 4px solid var(--inputradio-primary-background-color-checked);
+}
+.input_disabled + .icon {
+  border-radius: 50%;
+}
+.input_disabled + .icon::after {
+  background-color: rgba(246, 246, 246, 0.8);
+  content: "";
+  display: block;
+  inset: 0;
+  margin: -1px;
+  position: absolute;
+  border-radius: 50%;
+}
+.input_checked:disabled + .icon::after {
+  margin: -4px;
+}
+
+.note {
+  color: var(--palette-bg-5);
+  margin-block-start: 4px;
+  padding-inline-start: 24px;
+}

package/esm/InputRadio/index.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+import type { FC, CSSProperties, PropsWithChildren, FocusEvent, ChangeEvent } from "react";
+type Props = {
+    checked?: boolean;
+    className?: string;
+    containerClassName?: string;
+    disabled?: boolean;
+    error?: string;
+    id?: string;
+    name?: string;
+    note?: string;
+    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
+    onFocus?: (event: FocusEvent<HTMLInputElement>) => void;
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    onClick?: (event: React.MouseEvent<HTMLLabelElement, MouseEvent>) => void;
+    onMouseEnter?: (event: React.MouseEvent<HTMLLabelElement, MouseEvent>) => void;
+    style?: CSSProperties;
+    text?: string;
+    value: string | number;
+    testid?: string;
+};
+declare const InputRadio: FC<PropsWithChildren<Props>>;
+export default InputRadio;

package/esm/InputRadio/index.js

@@ -0,0 +1,66 @@
+import { __rest, __assign } from 'tslib';
+import React, { memo } from 'react';
+import classNames from 'classnames/bind';
+import Typography from '../Typography/index.js';
+import styles from './InputRadio.module.css';
+
+var clx = classNames.bind(styles);
+var InputRadio = /*#__PURE__*/memo(function (_a) {
+  var checked = _a.checked,
+    children = _a.children,
+    className = _a.className,
+    containerClassName = _a.containerClassName,
+    disabled = _a.disabled,
+    error = _a.error,
+    id = _a.id,
+    name = _a.name,
+    note = _a.note,
+    onBlur = _a.onBlur,
+    onFocus = _a.onFocus,
+    onChange = _a.onChange,
+    onClick = _a.onClick,
+    onMouseEnter = _a.onMouseEnter,
+    style = _a.style,
+    text = _a.text,
+    value = _a.value,
+    testid = _a.testid,
+    rest = __rest(_a, ["checked", "children", "className", "containerClassName", "disabled", "error", "id", "name", "note", "onBlur", "onFocus", "onChange", "onClick", "onMouseEnter", "style", "text", "value", "testid"]);
+  return /*#__PURE__*/React.createElement("label", {
+    className: clx(styles.label, className),
+    htmlFor: id,
+    style: style,
+    onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    "data-testid": testid
+  }, /*#__PURE__*/React.createElement("div", {
+    className: clx(styles.container, {
+      container_disabled: !!disabled,
+      container_error: !!error
+    }, containerClassName)
+  }, /*#__PURE__*/React.createElement("input", __assign({
+    type: "radio",
+    id: id,
+    value: value,
+    name: name,
+    className: clx(styles.input, {
+      input_error: !!error,
+      input_checked: !!checked,
+      input_disabled: !!disabled
+    }),
+    checked: checked,
+    disabled: disabled,
+    onChange: onChange,
+    onFocus: onFocus,
+    onBlur: onBlur
+  }, rest)), /*#__PURE__*/React.createElement("span", {
+    className: clx(styles.icon)
+  }), /*#__PURE__*/React.createElement("span", {
+    className: clx(styles.text)
+  }, !children && text, !text && children)), !!note && ( /*#__PURE__*/React.createElement(Typography, {
+    tag: "p",
+    size: "s",
+    className: clx(styles.note)
+  }, note)));
+});
+
+export { InputRadio as default };

package/esm/RadioGroup/Radio.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import type { ChangeEvent, FC, FocusEvent } from "react";
+type Props = {
+    value: string | number;
+    text: string;
+    id?: string;
+    note?: string;
+    name?: string;
+    checked?: boolean;
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
+    onClick?: (event: React.MouseEvent<HTMLLabelElement, MouseEvent>) => void;
+    onMouseEnter?: (event: React.MouseEvent<HTMLLabelElement, MouseEvent>) => void;
+    className: string;
+    disabled?: boolean;
+    testId?: string;
+};
+declare const Radio: FC<Props>;
+export default Radio;

package/esm/RadioGroup/Radio.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import InputRadio from '../InputRadio/index.js';
+
+var Radio = function Radio(_a) {
+  var id = _a.id,
+    value = _a.value,
+    text = _a.text,
+    note = _a.note,
+    name = _a.name,
+    _b = _a.checked,
+    checked = _b === void 0 ? false : _b,
+    onChange = _a.onChange,
+    onBlur = _a.onBlur,
+    onClick = _a.onClick,
+    onMouseEnter = _a.onMouseEnter,
+    className = _a.className,
+    _c = _a.disabled,
+    disabled = _c === void 0 ? false : _c,
+    testId = _a.testId;
+  return /*#__PURE__*/React.createElement(InputRadio, {
+    id: id,
+    value: value,
+    checked: checked,
+    onChange: onChange,
+    onBlur: onBlur,
+    onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    text: text,
+    note: note,
+    name: name,
+    className: className,
+    disabled: disabled,
+    testid: testId
+  });
+};
+
+export { Radio as default };

package/esm/RadioGroup/RadioGroup.module.css

@@ -0,0 +1,30 @@
+.group {
+  display: inline-flex;
+}
+.group_wide {
+  inline-size: 100%;
+}
+.group_column {
+  flex-direction: column;
+}
+.group_column .radio:not(:last-child) {
+  margin-block-end: 16px;
+}
+.group_wrapped {
+  flex-wrap: wrap;
+}
+.group_wrapped .radio {
+  inline-size: 100%;
+  margin: 8px auto;
+}
+.group_wrapped .radio:first-child {
+  margin-block-start: 0;
+}
+.group_wrapped .radio:last-child {
+  margin-block-end: 0;
+}
+
+.radio {
+  line-height: 16px;
+  margin-inline-end: 20px;
+}

package/esm/RadioGroup/index.d.ts

@@ -0,0 +1,26 @@
+import React, { FC } from "react";
+export interface Option {
+    id?: string;
+    val: string | number;
+    text: string;
+    note?: string;
+    name?: string;
+    tooltipContent?: () => React.ReactElement;
+    onClick?: (event: React.MouseEvent<HTMLLabelElement, MouseEvent>) => void;
+    onMouseEnter?: (event: React.MouseEvent<HTMLLabelElement, MouseEvent>) => void;
+    className?: string;
+    disabled?: boolean;
+}
+interface Props {
+    val?: string | number;
+    options: Option[];
+    onChange: (value: string) => void;
+    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    column?: boolean;
+    wrapped?: boolean;
+    className?: string;
+    disabled?: boolean;
+    hasError?: boolean;
+}
+declare const RadioGroup: FC<Props>;
+export default RadioGroup;

package/esm/RadioGroup/index.js

@@ -0,0 +1,58 @@
+import React, { memo } from 'react';
+import classNames from 'classnames/bind';
+import Radio from './Radio.js';
+import styles from './RadioGroup.module.css';
+
+var clx = classNames.bind(styles);
+var RadioGroup = /*#__PURE__*/memo(function (_a) {
+  var val = _a.val,
+    options = _a.options,
+    _onChange = _a.onChange,
+    onBlur = _a.onBlur,
+    _b = _a.column,
+    column = _b === void 0 ? false : _b,
+    _c = _a.wrapped,
+    wrapped = _c === void 0 ? false : _c,
+    className = _a.className,
+    _d = _a.disabled,
+    disabled = _d === void 0 ? false : _d,
+    _e = _a.hasError,
+    hasError = _e === void 0 ? false : _e;
+  return /*#__PURE__*/React.createElement("div", {
+    className: clx(styles.group, {
+      column: column,
+      wrapped: wrapped,
+      hasError: hasError
+    }, className)
+  }, options.map(function (option) {
+    var id = option.id,
+      optionVal = option.val,
+      text = option.text,
+      note = option.note,
+      name = option.name,
+      onClick = option.onClick,
+      onMouseEnter = option.onMouseEnter,
+      optionClassName = option.className,
+      optionDisabled = option.disabled;
+    return /*#__PURE__*/React.createElement(Radio, {
+      key: optionVal,
+      id: id,
+      testId: id,
+      value: optionVal,
+      text: text,
+      note: note,
+      name: name,
+      className: clx(styles.radio, optionClassName),
+      checked: val === optionVal,
+      onChange: function onChange(e) {
+        return _onChange(e.target.value);
+      },
+      onBlur: onBlur,
+      onClick: onClick,
+      onMouseEnter: onMouseEnter,
+      disabled: disabled || optionDisabled
+    });
+  }));
+});
+
+export { RadioGroup as default };

package/esm/Theme/global.css

@@ -17,6 +17,9 @@
   margin: 0;
   padding: 0;
 }
+[data-page=colibri-ui] *, [data-page=colibri-ui] *::before, [data-page=colibri-ui] *::after {
+  box-sizing: inherit;
+}
 [data-page=colibri-ui] input,
 [data-page=colibri-ui] textarea,
 [data-page=colibri-ui] select,

package/esm/Theme/index.d.ts

@@ -73,6 +73,11 @@ export declare const THEMES: {
         "checkbox-primary-border-color-active": string;
         "checkbox-primary-box-shadow-active": string;
         "checkbox-primary-background-color-disabled": string;
+        "inputradio-primary-background-color-checked": string;
+        "inputradio-primary-background-color-hovered": string;
+        "inputradio-primary-box-shadow-focused": string;
+        "inputradio-primary-background-color-focused": string;
+        "inputradio-primary-border-color-focused": string;
         "switch-primary-background-color": string;
         "switch-primary-border-color": string;
         "switch-primary-background-color-checked": string;

package/esm/Theme/themes/default.d.ts

@@ -72,6 +72,11 @@ declare const _default: {
     "checkbox-primary-border-color-active": string;
     "checkbox-primary-box-shadow-active": string;
     "checkbox-primary-background-color-disabled": string;
+    "inputradio-primary-background-color-checked": string;
+    "inputradio-primary-background-color-hovered": string;
+    "inputradio-primary-box-shadow-focused": string;
+    "inputradio-primary-background-color-focused": string;
+    "inputradio-primary-border-color-focused": string;
     "switch-primary-background-color": string;
     "switch-primary-border-color": string;
     "switch-primary-background-color-checked": string;

package/esm/Theme/themes/default.js

@@ -74,6 +74,11 @@ var THEME_DEFAULT = {
   "checkbox-primary-border-color-active": Color.PRIMARY_4,
   "checkbox-primary-box-shadow-active": Color.PRIMARY_4,
   "checkbox-primary-background-color-disabled": Color.PRIMARY_1,
+  "inputradio-primary-background-color-checked": Color.PRIMARY_4,
+  "inputradio-primary-background-color-hovered": Color.PRIMARY_4,
+  "inputradio-primary-box-shadow-focused": Color.PRIMARY_1,
+  "inputradio-primary-background-color-focused": Color.PRIMARY_1,
+  "inputradio-primary-border-color-focused": Color.PRIMARY_1,
   "switch-primary-background-color": Color.BG_2,
   "switch-primary-border-color": Color.BG_2,
   "switch-primary-background-color-checked": Color.PRIMARY_5,

package/esm/Typography/index.props.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties } from "react";
+import type { CSSProperties } from "react";
 export type TypographyVariant = "alert" | "success" | "secondary";
 export type TypographyFontWeight = "normal" | "medium" | "bold";
 export type TypographySize = "xs" | "s" | "m" | "l" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";

package/esm/index.d.ts

@@ -11,6 +11,7 @@ export { default as Input } from "./Input";
 export { default as Menu } from "./Menu";
 export { default as Modal } from "./Modal";
 export { default as Portal } from "./Portal";
+export { default as RadioGroup } from './RadioGroup';
 export { default as Select } from "./Select";
 export { default as Separator } from "./Separator";
 export { SkeletonText, SkeletonRect } from "./Skeleton";

package/esm/index.js

@@ -11,6 +11,7 @@ export { default as Input } from './Input/index.js';
 export { default as Menu } from './Menu/index.js';
 export { default as Modal } from './Modal/index.js';
 export { default as Portal } from './Portal/index.js';
+export { default as RadioGroup } from './RadioGroup/index.js';
 export { default as Select } from './Select/index.js';
 export { default as Separator } from './Separator/index.js';
 export { SkeletonRect, SkeletonText } from './Skeleton/index.js';

package/esm/theme_default_variables.css

@@ -72,6 +72,11 @@
 --checkbox-primary-border-color-active: #067AFF;
 --checkbox-primary-box-shadow-active: #067AFF;
 --checkbox-primary-background-color-disabled: #E8F0FE;
+--inputradio-primary-background-color-checked: #067AFF;
+--inputradio-primary-background-color-hovered: #067AFF;
+--inputradio-primary-box-shadow-focused: #E8F0FE;
+--inputradio-primary-background-color-focused: #E8F0FE;
+--inputradio-primary-border-color-focused: #E8F0FE;
 --switch-primary-background-color: #e6e6e6;
 --switch-primary-border-color: #e6e6e6;
 --switch-primary-background-color-checked: #0066DC;

package/index.d.ts

@@ -11,6 +11,7 @@ export { default as Input } from "./Input";
 export { default as Menu } from "./Menu";
 export { default as Modal } from "./Modal";
 export { default as Portal } from "./Portal";
+export { default as RadioGroup } from './RadioGroup';
 export { default as Select } from "./Select";
 export { default as Separator } from "./Separator";
 export { SkeletonText, SkeletonRect } from "./Skeleton";

package/index.js

@@ -13,13 +13,14 @@ var index$9 = require('./Input/index.js');
 var index$a = require('./Menu/index.js');
 var index$b = require('./Modal/index.js');
 var index$c = require('./Portal/index.js');
-var index$d = require('./Select/index.js');
-var index$e = require('./Separator/index.js');
-var index$f = require('./Skeleton/index.js');
-var index$g = require('./Switch/index.js');
-var index$h = require('./Theme/index.js');
-var index$i = require('./Typography/index.js');
-var index$j = require('./hooks/useMediaSizes/index.js');
+var index$d = require('./RadioGroup/index.js');
+var index$e = require('./Select/index.js');
+var index$f = require('./Separator/index.js');
+var index$g = require('./Skeleton/index.js');
+var index$h = require('./Switch/index.js');
+var index$i = require('./Theme/index.js');
+var index$j = require('./Typography/index.js');
+var index$k = require('./hooks/useMediaSizes/index.js');
 require('./Icons/index.js');
 var Cart = require('./Icons/Cart.js');
 var Chevron = require('./Icons/Chevron.js');
@@ -49,14 +50,15 @@ exports.Input = index$9.default;
 exports.Menu = index$a.default;
 exports.Modal = index$b.default;
 exports.Portal = index$c.default;
-exports.Select = index$d.default;
-exports.Separator = index$e.default;
-exports.SkeletonRect = index$f.SkeletonRect;
-exports.SkeletonText = index$f.SkeletonText;
-exports.Switch = index$g.default;
-exports.THEMES = index$h.THEMES;
-exports.Typography = index$i.default;
-exports.useMediaSizes = index$j.default;
+exports.RadioGroup = index$d.default;
+exports.Select = index$e.default;
+exports.Separator = index$f.default;
+exports.SkeletonRect = index$g.SkeletonRect;
+exports.SkeletonText = index$g.SkeletonText;
+exports.Switch = index$h.default;
+exports.THEMES = index$i.THEMES;
+exports.Typography = index$j.default;
+exports.useMediaSizes = index$k.default;
 exports.Cart = Cart.default;
 exports.Chevron = Chevron.default;
 exports.Close = Close.default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "colibri-ui",
-  "version": "0.7.54",
+  "version": "0.7.56",
   "description": "React UI components library",
   "main": "index.js",
   "scripts": {},
@@ -24,7 +24,6 @@
   "dependencies": {
     "@popperjs/core": "^2.11.8",
     "classnames": "^2.5.1",
-    "cssmem": "^1.3.0",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0",
     "react-popper": "^2.3.0"

package/theme_default_variables.css

@@ -72,6 +72,11 @@
 --checkbox-primary-border-color-active: #067AFF;
 --checkbox-primary-box-shadow-active: #067AFF;
 --checkbox-primary-background-color-disabled: #E8F0FE;
+--inputradio-primary-background-color-checked: #067AFF;
+--inputradio-primary-background-color-hovered: #067AFF;
+--inputradio-primary-box-shadow-focused: #E8F0FE;
+--inputradio-primary-background-color-focused: #E8F0FE;
+--inputradio-primary-border-color-focused: #E8F0FE;
 --switch-primary-background-color: #e6e6e6;
 --switch-primary-border-color: #e6e6e6;
 --switch-primary-background-color-checked: #0066DC;