@via-profit/ui-kit 0.3.0 → 0.5.0

package/Radio/index.js

@@ -0,0 +1,50 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const RadioContainer_1 = __importDefault(require("./RadioContainer"));
+const RadioBox_1 = __importDefault(require("./RadioBox"));
+const RadioTextWrapper_1 = __importDefault(require("./RadioTextWrapper"));
+const RadioGroupContext_1 = __importDefault(require("../RadioGroup/RadioGroupContext"));
+const useThemeProps_1 = __importDefault(require("../ThemeProvider/useThemeProps"));
+const Radio = (props, ref) => {
+    var _a;
+    const group = react_1.default.useContext(RadioGroupContext_1.default);
+    const _b = (0, useThemeProps_1.default)('Radio', props), { children, value, checked, defaultChecked, onChange, disabled, color, labelPosition, error, name, required, overrides, className, style } = _b, nativeProps = __rest(_b, ["children", "value", "checked", "defaultChecked", "onChange", "disabled", "color", "labelPosition", "error", "name", "required", "overrides", "className", "style"]);
+    const overridesMap = react_1.default.useMemo(() => ({
+        Container: (overrides === null || overrides === void 0 ? void 0 : overrides.Container) || RadioContainer_1.default,
+        Box: (overrides === null || overrides === void 0 ? void 0 : overrides.Box) || RadioBox_1.default,
+        TextWrapper: (overrides === null || overrides === void 0 ? void 0 : overrides.TextWrapper) || RadioTextWrapper_1.default,
+    }), [overrides]);
+    // Inside a group the group decides; the own props of the radio button win where it makes sense
+    const isDisabled = disabled !== null && disabled !== void 0 ? disabled : group === null || group === void 0 ? void 0 : group.disabled;
+    const groupChecked = group && typeof value !== 'undefined' && typeof group.value !== 'undefined'
+        ? group.value === value
+        : undefined;
+    const groupDefaultChecked = group && typeof value !== 'undefined' && typeof group.value === 'undefined'
+        ? group.defaultValue === value
+        : undefined;
+    const handleChange = event => {
+        onChange === null || onChange === void 0 ? void 0 : onChange(event);
+        if (group && typeof value !== 'undefined') {
+            group.onChange(value, event);
+        }
+    };
+    return (react_1.default.createElement(overridesMap.Container, { className: className, style: style, labelPosition: labelPosition, disabled: isDisabled },
+        react_1.default.createElement(overridesMap.Box, Object.assign({}, nativeProps, { value: value, name: (_a = group === null || group === void 0 ? void 0 : group.name) !== null && _a !== void 0 ? _a : name, checked: checked !== null && checked !== void 0 ? checked : groupChecked, defaultChecked: defaultChecked !== null && defaultChecked !== void 0 ? defaultChecked : groupDefaultChecked, onChange: handleChange, disabled: isDisabled, required: required !== null && required !== void 0 ? required : group === null || group === void 0 ? void 0 : group.required, color: color !== null && color !== void 0 ? color : group === null || group === void 0 ? void 0 : group.color, error: error !== null && error !== void 0 ? error : group === null || group === void 0 ? void 0 : group.error, ref: ref })),
+        typeof children !== 'undefined' && (react_1.default.createElement(overridesMap.TextWrapper, null, children))));
+};
+exports.default = react_1.default.forwardRef(Radio);

package/Radio/useRadioColor.d.ts

@@ -0,0 +1,6 @@
+import Color from '../Color';
+/**
+ * Resolves the `color` property of the Radio to the Color instance
+ */
+declare const useRadioColor: (color: 'default' | 'primary' | 'secondary' | string | undefined) => Color;
+export default useRadioColor;

package/Radio/useRadioColor.js

@@ -0,0 +1,33 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@emotion/react");
+const Color_1 = __importDefault(require("../Color"));
+/**
+ * Resolves the `color` property of the Radio to the Color instance
+ */
+const useRadioColor = (color) => {
+    const theme = (0, react_2.useTheme)();
+    return react_1.default.useMemo(() => {
+        switch (true) {
+            case color === 'secondary':
+                return theme.color.accentSecondary;
+            case typeof color === 'undefined':
+            case color === 'default':
+            case color === 'primary':
+                return theme.color.accentPrimary;
+            default:
+                try {
+                    return Color_1.default.fromString(String(color));
+                }
+                catch (err) {
+                    console.error(`invalid color value «${color}»`);
+                    return theme.color.accentPrimary;
+                }
+        }
+    }, [color, theme.color]);
+};
+exports.default = useRadioColor;

package/RadioGroup/RadioGroupAsterisk.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export interface RadioGroupAsteriskProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /**
+     * If true, the asterisk will be set the error color
+     */
+    readonly error?: boolean;
+    /**
+     * Not used
+     */
+    readonly focused?: boolean;
+}
+declare const _default: React.ForwardRefExoticComponent<RadioGroupAsteriskProps & React.RefAttributes<HTMLSpanElement>>;
+export default _default;

package/RadioGroup/RadioGroupAsterisk.js

@@ -0,0 +1,53 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const Asterisk = styled_1.default.span `
+  font-size: 0.8em;
+  margin-left: 0.2em;
+  position: relative;
+  top: -0.4em;
+  color: ${({ theme }) => theme.color.error.toString()};
+`;
+const RadioGroupAsterisk = (props, ref) => {
+    const { children, error, focused } = props, nativeProps = __rest(props, ["children", "error", "focused"]);
+    return (React.createElement(Asterisk, Object.assign({}, nativeProps, { "$error": error, "$focused": focused, ref: ref }), children));
+};
+exports.default = React.forwardRef(RadioGroupAsterisk);

package/RadioGroup/RadioGroupContainer.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export type RadioGroupContainerProps = React.FieldsetHTMLAttributes<HTMLFieldSetElement>;
+declare const _default: React.ForwardRefExoticComponent<RadioGroupContainerProps & React.RefAttributes<HTMLFieldSetElement>>;
+export default _default;

package/RadioGroup/RadioGroupContainer.js

@@ -0,0 +1,36 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+/**
+ * `<fieldset>`: the legend names the group, `disabled` disables all the radio buttons inside
+ */
+const StyledContainer = styled_1.default.fieldset `
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.5em;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+`;
+const RadioGroupContainer = (props, ref) => {
+    const { children } = props, nativeProps = __rest(props, ["children"]);
+    return (react_1.default.createElement(StyledContainer, Object.assign({}, nativeProps, { ref: ref }), children));
+};
+exports.default = react_1.default.forwardRef(RadioGroupContainer);

package/RadioGroup/RadioGroupContext.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+export type RadioGroupContextValue = {
+    readonly name: string;
+    /**
+     * The selected value. `undefined` — the group is uncontrolled and the radio buttons are not
+     * controlled either, `null` — nothing is selected
+     */
+    readonly value: string | null | undefined;
+    readonly defaultValue?: string | null;
+    readonly onChange: (value: string, event: React.ChangeEvent<HTMLInputElement>) => void;
+    readonly disabled?: boolean;
+    readonly required?: boolean;
+    readonly error?: boolean;
+    readonly color?: string;
+};
+/**
+ * Radio buttons inside the RadioGroup read the name, the value and the change handler from this context
+ */
+declare const RadioGroupContext: React.Context<RadioGroupContextValue | null>;
+export default RadioGroupContext;

package/RadioGroup/RadioGroupContext.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+/**
+ * Radio buttons inside the RadioGroup read the name, the value and the change handler from this context
+ */
+const RadioGroupContext = react_1.default.createContext(null);
+exports.default = RadioGroupContext;

package/RadioGroup/RadioGroupErrorText.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+export interface RadioGroupErrorTextProps extends React.HTMLAttributes<HTMLSpanElement> {
+    readonly error?: boolean;
+}
+declare const _default: React.ForwardRefExoticComponent<RadioGroupErrorTextProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/RadioGroup/RadioGroupErrorText.js

@@ -0,0 +1,76 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const NoSSR_1 = __importDefault(require("../NoSSR"));
+const ErrorTextContainer = styled_1.default.div `
+  margin-left: 0;
+  max-height: 0;
+  max-height: ${({ $maxHeight }) => typeof $maxHeight === 'number' ? `${$maxHeight}px` : $maxHeight};
+  transition: max-height 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
+  overflow: hidden;
+`;
+const ErrorTextInner = styled_1.default.div `
+  color: ${({ theme }) => theme.color.error.toString()};
+  font-size: 0.8em;
+  transform: translateY(${({ $error }) => ($error ? 0 : '0.2em')});
+  opacity: ${({ $error }) => ($error ? 1 : 0)};
+  transition: all 240ms 240ms ease-out;
+`;
+const RadioGroupErrorText = (props, ref) => {
+    const { children, error } = props, nativeProps = __rest(props, ["children", "error"]);
+    const innerRef = React.useRef(null);
+    const [maxHeight, setMaxHeight] = React.useState('initial');
+    React.useEffect(() => {
+        const updateMaxHeight = () => {
+            if (innerRef.current && innerRef.current.getBoundingClientRect().height > 0) {
+                setMaxHeight(innerRef.current.getBoundingClientRect().height);
+            }
+        };
+        updateMaxHeight();
+        window.addEventListener('resize', updateMaxHeight);
+        return () => {
+            window.removeEventListener('resize', updateMaxHeight);
+        };
+    }, [children]);
+    return (React.createElement(ErrorTextContainer, Object.assign({}, nativeProps, { "$maxHeight": error ? maxHeight : 0, ref: ref }),
+        React.createElement(ErrorTextInner, { ref: innerRef, "$error": Boolean(error) }, children ? React.createElement(NoSSR_1.default, null, children) : React.createElement(React.Fragment, null, "\u00A0"))));
+};
+exports.default = React.forwardRef(RadioGroupErrorText);

package/RadioGroup/RadioGroupItems.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export type RadioGroupOrientation = 'vertical' | 'horizontal';
+export type RadioGroupItemsProps = React.HTMLAttributes<HTMLDivElement> & {
+    readonly orientation?: RadioGroupOrientation;
+};
+declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    readonly orientation?: RadioGroupOrientation | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/RadioGroup/RadioGroupItems.js

@@ -0,0 +1,30 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const StyledItems = styled_1.default.div `
+  display: flex;
+  flex-direction: ${({ $orientation }) => ($orientation === 'horizontal' ? 'row' : 'column')};
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: ${({ $orientation }) => ($orientation === 'horizontal' ? '0.5em 1.5em' : '0.75em')};
+`;
+const RadioGroupItems = (props, ref) => {
+    const { children, orientation = 'vertical' } = props, nativeProps = __rest(props, ["children", "orientation"]);
+    return (react_1.default.createElement(StyledItems, Object.assign({}, nativeProps, { "$orientation": orientation, ref: ref }), children));
+};
+exports.default = react_1.default.forwardRef(RadioGroupItems);

package/RadioGroup/RadioGroupLegend.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export type RadioGroupLegendProps = React.HTMLAttributes<HTMLLegendElement>;
+declare const _default: React.ForwardRefExoticComponent<RadioGroupLegendProps & React.RefAttributes<HTMLLegendElement>>;
+export default _default;

package/RadioGroup/RadioGroupLegend.js

@@ -0,0 +1,37 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const StyledLegend = styled_1.default.legend `
+  float: left;
+  width: 100%;
+  padding: 0;
+  margin-bottom: 0.25em;
+  font-size: 0.86em;
+  font-weight: 600;
+  color: ${({ theme }) => theme.color.textPrimary.toString()};
+
+  /* The floated legend does not break the flex layout of the fieldset */
+  & + * {
+    clear: both;
+  }
+`;
+const RadioGroupLegend = (props, ref) => {
+    const { children } = props, nativeProps = __rest(props, ["children"]);
+    return (react_1.default.createElement(StyledLegend, Object.assign({}, nativeProps, { ref: ref }), children));
+};
+exports.default = react_1.default.forwardRef(RadioGroupLegend);

package/RadioGroup/index.d.ts

@@ -0,0 +1,134 @@
+import React from 'react';
+import { RadioGroupContainerProps } from './RadioGroupContainer';
+import { RadioGroupLegendProps } from './RadioGroupLegend';
+import { RadioGroupItemsProps, RadioGroupOrientation } from './RadioGroupItems';
+import { RadioGroupAsteriskProps } from './RadioGroupAsterisk';
+import { RadioGroupErrorTextProps } from './RadioGroupErrorText';
+export type { RadioGroupOrientation };
+export type RadioGroupProps = Omit<RadioGroupContainerProps, 'onChange' | 'defaultValue' | 'color'> & {
+    /**
+     * The name of the radio buttons. Generated if not passed
+     */
+    readonly name?: string;
+    /**
+     * The selected value of the controlled group, `null` — nothing is selected
+     */
+    readonly value?: string | null;
+    /**
+     * The initially selected value of the uncontrolled group
+     */
+    readonly defaultValue?: string | null;
+    /**
+     * Called with the value of the selected radio button
+     */
+    readonly onChange?: (value: string, event: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * The title of the group (`<legend>`)
+     */
+    readonly label?: React.ReactNode;
+    /**
+     * **Default:** `vertical`
+     */
+    readonly orientation?: RadioGroupOrientation;
+    /**
+     * The color of all the radio buttons
+     */
+    readonly color?: 'default' | 'primary' | 'secondary' | string;
+    /**
+     * Disables all the radio buttons
+     */
+    readonly disabled?: boolean;
+    /**
+     * The native `required` of the radio buttons: the browser does not submit the form without a choice
+     */
+    readonly required?: boolean;
+    /**
+     * If is true then the asterisk will be displayed after the label\
+     * If is ReactNode then ReactNode will be displayed
+     */
+    readonly requiredAsterisk?: boolean | React.ReactNode;
+    /**
+     * Paints the radio buttons with the error color and shows `errorText`
+     */
+    readonly error?: boolean;
+    /**
+     * Text or ReactNode to show under the group when `error` is true
+     */
+    readonly errorText?: React.ReactNode;
+    readonly overrides?: RadioGroupOverrides;
+};
+export interface RadioGroupOverrides {
+    /**
+     * The `<fieldset>` element
+     */
+    readonly Container?: React.ComponentType<RadioGroupContainerProps & React.RefAttributes<HTMLFieldSetElement>>;
+    /**
+     * The `<legend>` with the label
+     */
+    readonly Legend?: React.ComponentType<RadioGroupLegendProps & React.RefAttributes<HTMLLegendElement>>;
+    /**
+     * The asterisk of the required group
+     */
+    readonly Asterisk?: React.ComponentType<RadioGroupAsteriskProps & React.RefAttributes<HTMLSpanElement>>;
+    /**
+     * The wrapper of the radio buttons
+     */
+    readonly Items?: React.ComponentType<RadioGroupItemsProps & React.RefAttributes<HTMLDivElement>>;
+    /**
+     * The error text
+     */
+    readonly ErrorText?: React.ComponentType<RadioGroupErrorTextProps & React.RefAttributes<HTMLDivElement>>;
+}
+declare const _default: React.ForwardRefExoticComponent<Omit<RadioGroupContainerProps, "color" | "defaultValue" | "onChange"> & {
+    /**
+     * The name of the radio buttons. Generated if not passed
+     */
+    readonly name?: string | undefined;
+    /**
+     * The selected value of the controlled group, `null` — nothing is selected
+     */
+    readonly value?: string | null | undefined;
+    /**
+     * The initially selected value of the uncontrolled group
+     */
+    readonly defaultValue?: string | null | undefined;
+    /**
+     * Called with the value of the selected radio button
+     */
+    readonly onChange?: ((value: string, event: React.ChangeEvent<HTMLInputElement>) => void) | undefined;
+    /**
+     * The title of the group (`<legend>`)
+     */
+    readonly label?: React.ReactNode;
+    /**
+     * **Default:** `vertical`
+     */
+    readonly orientation?: RadioGroupOrientation | undefined;
+    /**
+     * The color of all the radio buttons
+     */
+    readonly color?: string | undefined;
+    /**
+     * Disables all the radio buttons
+     */
+    readonly disabled?: boolean | undefined;
+    /**
+     * The native `required` of the radio buttons: the browser does not submit the form without a choice
+     */
+    readonly required?: boolean | undefined;
+    /**
+     * If is true then the asterisk will be displayed after the label\
+     * If is ReactNode then ReactNode will be displayed
+     */
+    readonly requiredAsterisk?: React.ReactNode;
+    /**
+     * Paints the radio buttons with the error color and shows `errorText`
+     */
+    readonly error?: boolean | undefined;
+    /**
+     * Text or ReactNode to show under the group when `error` is true
+     */
+    readonly errorText?: React.ReactNode;
+    readonly overrides?: RadioGroupOverrides | undefined;
+} & React.RefAttributes<HTMLFieldSetElement>>;
+export default _default;

package/RadioGroup/index.js

@@ -0,0 +1,63 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const RadioGroupContainer_1 = __importDefault(require("./RadioGroupContainer"));
+const RadioGroupLegend_1 = __importDefault(require("./RadioGroupLegend"));
+const RadioGroupItems_1 = __importDefault(require("./RadioGroupItems"));
+const RadioGroupAsterisk_1 = __importDefault(require("./RadioGroupAsterisk"));
+const RadioGroupErrorText_1 = __importDefault(require("./RadioGroupErrorText"));
+const RadioGroupContext_1 = __importDefault(require("./RadioGroupContext"));
+const useThemeProps_1 = __importDefault(require("../ThemeProvider/useThemeProps"));
+const RadioGroup = (props, ref) => {
+    const _a = (0, useThemeProps_1.default)('RadioGroup', props), { children, name: inputName, value, defaultValue, onChange, label, orientation = 'vertical', color, disabled, required, requiredAsterisk, error, errorText, overrides } = _a, nativeProps = __rest(_a, ["children", "name", "value", "defaultValue", "onChange", "label", "orientation", "color", "disabled", "required", "requiredAsterisk", "error", "errorText", "overrides"]);
+    const id = react_1.default.useId().replace(/:/g, '');
+    const name = inputName !== null && inputName !== void 0 ? inputName : `radio-group-${id}`;
+    const legendID = `radio-group-${id}-legend`;
+    const errorID = `radio-group-${id}-error`;
+    const hasErrorText = Boolean(error) && typeof errorText !== 'undefined';
+    const overridesMap = react_1.default.useMemo(() => ({
+        Container: (overrides === null || overrides === void 0 ? void 0 : overrides.Container) || RadioGroupContainer_1.default,
+        Legend: (overrides === null || overrides === void 0 ? void 0 : overrides.Legend) || RadioGroupLegend_1.default,
+        Asterisk: (overrides === null || overrides === void 0 ? void 0 : overrides.Asterisk) || RadioGroupAsterisk_1.default,
+        Items: (overrides === null || overrides === void 0 ? void 0 : overrides.Items) || RadioGroupItems_1.default,
+        ErrorText: (overrides === null || overrides === void 0 ? void 0 : overrides.ErrorText) || RadioGroupErrorText_1.default,
+    }), [overrides]);
+    // The latest handler, so the context does not change on every render
+    const onChangeRef = react_1.default.useRef(onChange);
+    onChangeRef.current = onChange;
+    const handleChange = react_1.default.useCallback((selected, event) => { var _a; return (_a = onChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onChangeRef, selected, event); }, []);
+    // The initial value of the uncontrolled group, read once
+    const [initialValue] = react_1.default.useState(defaultValue);
+    const contextValue = react_1.default.useMemo(() => ({
+        name,
+        value,
+        defaultValue: initialValue,
+        onChange: handleChange,
+        disabled,
+        required,
+        error,
+        color,
+    }), [name, value, initialValue, handleChange, disabled, required, error, color]);
+    return (react_1.default.createElement(RadioGroupContext_1.default.Provider, { value: contextValue },
+        react_1.default.createElement(overridesMap.Container, Object.assign({ role: "radiogroup", "aria-labelledby": typeof label !== 'undefined' ? legendID : undefined, "aria-required": required || undefined, "aria-invalid": error || undefined, "aria-describedby": hasErrorText ? errorID : undefined, disabled: disabled }, nativeProps, { ref: ref }),
+            typeof label !== 'undefined' && (react_1.default.createElement(overridesMap.Legend, { id: legendID },
+                label,
+                requiredAsterisk != null && requiredAsterisk !== false && (react_1.default.createElement(overridesMap.Asterisk, { "aria-hidden": true }, typeof requiredAsterisk === 'boolean' ? '*' : requiredAsterisk)))),
+            react_1.default.createElement(overridesMap.Items, { orientation: orientation }, children),
+            typeof errorText !== 'undefined' && (react_1.default.createElement(overridesMap.ErrorText, { id: errorID, error: error }, errorText)))));
+};
+exports.default = react_1.default.forwardRef(RadioGroup);

package/Selectbox/SelectboxButton.js

@@ -68,8 +68,10 @@ const StyledSelectboxButton = (0, styled_1.default)(Button_1.default) `
   transition: none;
   
 `;
+// The value has the size of the text in the fields, so the selectbox has the height of the TextField
 const StyledButtonTextWrapper = (0, styled_1.default)(ButtonTextWrapper_1.default) `
   flex: 1;
+  font-size: 1em;
 `;
 const SelectboxButton = (props, ref) => {
     const { children, fullWidth, error, anchorPos, isOpen } = props, nativeProps = __rest(props, ["children", "fullWidth", "error", "anchorPos", "isOpen"]);