@citygross/components 0.8.149 → 0.8.151

package/build/@types/components/FormElements/Input/Input.d.ts

@@ -1,11 +1,11 @@
 import React from 'react';
 import { TFormElement } from '../FormElement.types';
 export declare type TInput = {
-    clearFunction?: () => void;
+    elementLeft?: React.ReactElement;
+    elementRight?: React.ReactElement;
     hideLabel?: boolean;
-    icon?: React.ReactElement;
     label: string;
     paddingLeft?: number;
     unit?: string;
 } & TFormElement & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>;
-export declare const Input: ({ clearFunction, hideLabel, icon, error, errorLabel, label, paddingLeft, size, unit, ...props }: TInput) => JSX.Element;
+export declare const Input: ({ elementLeft, elementRight, hideLabel, error, errorLabel, label, paddingLeft, size, unit, ...props }: TInput) => JSX.Element;

package/build/@types/components/FormElements/Radio/Radio.d.ts

@@ -1,7 +1,6 @@
 import { InputHTMLAttributes } from 'react';
 export declare type TRadio = {
-    hideRadioButton?: boolean;
     label: string;
     showLabel?: boolean;
 } & InputHTMLAttributes<HTMLInputElement>;
-export declare const Radio: ({ hideRadioButton, label, showLabel, ...props }: TRadio) => JSX.Element;
+export declare const Radio: ({ label, showLabel, ...props }: TRadio) => JSX.Element;

package/build/@types/components/RadioBox/RadioBoxItem.d.ts

@@ -1,15 +1,13 @@
 import React from 'react';
 import * as styles from './RadioBoxItem.styles';
 export declare type TRadioBox = styles.TBaseRadioBox & {
-    ariaLabel: string;
     background?: string;
     border?: string;
     children: React.ReactNode;
     hideRadioButton?: boolean;
     flexDirection?: string;
-    id: string;
     name: string;
     padding?: number;
     setActive?: () => void;
 };
-export declare const RadioBoxItem: ({ align, ariaLabel, background, border, boxShadow, checked, children, hideRadioButton, flexDirection, id, isDisabled, name, padding, setActive }: TRadioBox) => JSX.Element;
+export declare const RadioBoxItem: ({ align, background, border, boxShadow, checked, children, hideRadioButton, flexDirection, isDisabled, name, padding, setActive }: TRadioBox) => JSX.Element;

package/build/@types/components/RadioBox/RadioBoxItem.styles.d.ts

@@ -1,22 +1,18 @@
+import React from 'react';
 export declare enum Alignment {
     'flex-start' = 0,
     'center' = 1
 }
 export declare type TBaseRadioBox = {
-    align?: keyof typeof Alignment;
-    boxShadow?: boolean;
     checked?: boolean;
     isDisabled?: boolean;
+    align?: keyof typeof Alignment;
+    onClick?: React.Dispatch<React.SetStateAction<undefined>> | (() => void);
+    boxShadow?: boolean;
 };
 export declare const BaseRadioBox: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TBaseRadioBox & {
-    background?: string | undefined;
     border?: string | undefined;
+    background?: string | undefined;
     flexDirection?: string | undefined;
     padding?: number | undefined;
 }, never>;
-declare type TRadioBoxWrapper = {
-    disabled?: boolean;
-};
-export declare const RadioBoxWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TRadioBoxWrapper, never>;
-export declare const RadioBoxLabel: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, {}, never>;
-export {};

package/build/cjs/components/src/components/FormElements/FormElement.styles.js

@@ -31,7 +31,7 @@ var Label = styled__default["default"].label(templateObject_2 || (templateObject
     var theme = _a.theme;
     return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xxs;
 });
-var sharedFormElementStyles = styled.css(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  appearance: none;\n  border: 1px solid\n    ", ";\n  border-radius: ", "px;\n  color: ", ";\n  cursor: pointer;\n  font-family: ", ";\n  font-size: ", "px;\n  height: ", "px;\n  overflow: hidden;\n  padding: 0 ", "px;\n  text-overflow: ellipsis;\n  width: 100%;\n\n  &:not(:disabled):focus,\n  &:not(:disabled):active {\n    outline: 1px solid\n      ", ";\n    border: 1px solid\n      ", ";\n  }\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    cursor: not-allowed;\n  }\n"], ["\n  appearance: none;\n  border: 1px solid\n    ", ";\n  border-radius: ", "px;\n  color: ", ";\n  cursor: pointer;\n  font-family: ", ";\n  font-size: ", "px;\n  height: ", "px;\n  overflow: hidden;\n  padding: 0 ", "px;\n  text-overflow: ellipsis;\n  width: 100%;\n\n  &:not(:disabled):focus,\n  &:not(:disabled):active {\n    outline: 1px solid\n      ", ";\n    border: 1px solid\n      ", ";\n  }\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    cursor: not-allowed;\n  }\n"])), function (_a) {
+var sharedFormElementStyles = styled.css(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  appearance: none;\n  border: 1px solid\n    ", ";\n  border-radius: ", "px;\n  color: ", ";\n  font-family: ", ";\n  font-size: ", "px;\n  height: ", "px;\n  overflow: hidden;\n  padding: 0 ", "px;\n  text-overflow: ellipsis;\n  width: 100%;\n\n  &:not(:disabled):focus,\n  &:not(:disabled):active {\n    outline: 1px solid\n      ", ";\n    border: 1px solid\n      ", ";\n  }\n\n  &:hover {\n    border-color: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    cursor: not-allowed;\n  }\n"], ["\n  appearance: none;\n  border: 1px solid\n    ", ";\n  border-radius: ", "px;\n  color: ", ";\n  font-family: ", ";\n  font-size: ", "px;\n  height: ", "px;\n  overflow: hidden;\n  padding: 0 ", "px;\n  text-overflow: ellipsis;\n  width: 100%;\n\n  &:not(:disabled):focus,\n  &:not(:disabled):active {\n    outline: 1px solid\n      ", ";\n    border: 1px solid\n      ", ";\n  }\n\n  &:hover {\n    border-color: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    cursor: not-allowed;\n  }\n"])), function (_a) {
     var _b, _c;
     var error = _a.error, theme = _a.theme;
     return error ? (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.alertRed : (_c = theme.palette) === null || _c === void 0 ? void 0 : _c.placeholder;
@@ -67,7 +67,7 @@ var sharedFormElementStyles = styled.css(templateObject_3 || (templateObject_3 =
 }, function (_a) {
     var _b;
     var theme = _a.theme;
-    return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.lightest;
+    return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.darkest;
 }, function (_a) {
     var _b;
     var theme = _a.theme;

package/build/cjs/components/src/components/FormElements/Input/Input.js

@@ -4,24 +4,21 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _tslib = require('../../../../../_virtual/_tslib.js');
 var React = require('react');
+var designTokens = require('@citygross/design-tokens');
+var typography = require('@citygross/typography');
 var formElement = require('../../../helpers/form-element.js');
+var ScreenReader = require('../../ScreenReader/ScreenReader.js');
 var FormElement_styles = require('../FormElement.styles.js');
 var Input_styles = require('./Input.styles.js');
 var FormElement_types = require('../FormElement.types.js');
-var designTokens = require('@citygross/design-tokens');
-var icons = require('@citygross/icons');
-var typography = require('@citygross/typography');
-var CgButton = require('../../CgButton/CgButton.js');
-var ScreenReader = require('../../ScreenReader/ScreenReader.js');
-var CgButton_types = require('../../CgButton/CgButton.types.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var Input = function (_a) {
-    var _b, _c, _d;
-    var clearFunction = _a.clearFunction, hideLabel = _a.hideLabel, icon = _a.icon, error = _a.error, errorLabel = _a.errorLabel, label = _a.label, paddingLeft = _a.paddingLeft, _e = _a.size, size = _e === void 0 ? FormElement_types.EFormElementSize.large : _e, unit = _a.unit, props = _tslib.__rest(_a, ["clearFunction", "hideLabel", "icon", "error", "errorLabel", "label", "paddingLeft", "size", "unit"]);
+    var _b;
+    var elementLeft = _a.elementLeft, elementRight = _a.elementRight, hideLabel = _a.hideLabel, error = _a.error, errorLabel = _a.errorLabel, label = _a.label, paddingLeft = _a.paddingLeft, _c = _a.size, size = _c === void 0 ? FormElement_types.EFormElementSize.large : _c, unit = _a.unit, props = _tslib.__rest(_a, ["elementLeft", "elementRight", "hideLabel", "error", "errorLabel", "label", "paddingLeft", "size", "unit"]);
     var id = props.id, required = props.required;
     var sizeAttributes = formElement.getSizeAttributes(size);
     var errorId = "".concat(id, "-error");
@@ -31,12 +28,10 @@ var Input = function (_a) {
             required ? ' *' : '')),
         React__default["default"].createElement(Input_styles.InputWrapper, null,
             React__default["default"].createElement(Input_styles.InputContainer, null,
-                icon && (React__default["default"].createElement(Input_styles.AbsoluteContainer, null, icon)),
+                elementLeft && (React__default["default"].createElement(Input_styles.AbsoluteContainer, null, elementLeft)),
                 React__default["default"].createElement(Input_styles.InputElement, _tslib.__assign({ "aria-describedby": error && errorLabel ? errorId : undefined, "aria-invalid": !!error, error: error, paddingLeft: paddingLeft, sizeAttributes: sizeAttributes }, props)),
-                clearFunction && (React__default["default"].createElement(Input_styles.AbsoluteContainer, { right: true },
-                    React__default["default"].createElement(CgButton.CgButton, { circle: true, onClick: clearFunction, size: CgButton_types.EButtonSize.small, variant: CgButton_types.EButtonVariant.ghost },
-                        React__default["default"].createElement(icons.Icons.Cross, { height: (_b = designTokens.theme.spacings) === null || _b === void 0 ? void 0 : _b.sm, width: (_c = designTokens.theme.spacings) === null || _c === void 0 ? void 0 : _c.sm }))))),
-            unit && React__default["default"].createElement(typography.BodyText, { color: (_d = designTokens.theme.palette) === null || _d === void 0 ? void 0 : _d.darkest }, unit)),
+                elementRight && (React__default["default"].createElement(Input_styles.AbsoluteContainer, { right: true }, elementRight))),
+            unit && React__default["default"].createElement(typography.BodyText, { color: (_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.darkest }, unit)),
         error && errorLabel && (React__default["default"].createElement(FormElement_styles.ErrorLabel, { id: errorId }, errorLabel))));
 };
 

package/build/cjs/components/src/components/FormElements/Input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Input.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/cjs/components/src/components/FormElements/Radio/Radio.js

@@ -15,13 +15,10 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var Radio = function (_a) {
-    var hideRadioButton = _a.hideRadioButton, label = _a.label, showLabel = _a.showLabel, props = _tslib.__rest(_a, ["hideRadioButton", "label", "showLabel"]);
+    var label = _a.label, showLabel = _a.showLabel, props = _tslib.__rest(_a, ["label", "showLabel"]);
     var checked = props.checked, disabled = props.disabled;
     var borderSize = formElement.getBorderSize(checked, disabled);
     var _b = formElement.getColorAttributes(checked, disabled, true), labelColor = _b.labelColor, attributes = _tslib.__rest(_b, ["labelColor"]);
-    if (hideRadioButton) {
-        return React__default["default"].createElement(FormElement_styles.HiddenInput, _tslib.__assign({ type: "radio" }, props));
-    }
     return (React__default["default"].createElement(FormElement_styles.OptionInputWrapper, { as: "label", disabled: disabled },
         React__default["default"].createElement(FormElement_styles.HiddenInput, _tslib.__assign({ type: "radio" }, props)),
         React__default["default"].createElement(Radio_styles.RadioContainer, { attributes: attributes, borderSize: borderSize, checked: checked, disabled: disabled }),

package/build/cjs/components/src/components/FormElements/Radio/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Radio.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/cjs/components/src/components/FormElements/Select/Select.styles.js

@@ -11,7 +11,11 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 var SelectContainer = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
-var SelectElement = styled__default["default"].select(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), FormElement_styles.sharedFormElementStyles);
+var SelectElement = styled__default["default"].select(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  ", "\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n  }\n"], ["\n  ", "\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), FormElement_styles.sharedFormElementStyles, function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.lightest;
+});
 var SelectIcon = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  position: absolute;\n  top: 50%;\n  right: ", "px;\n  transform: translateY(-50%);\n  pointer-events: none;\n\n  svg {\n    display: block;\n  }\n"], ["\n  position: absolute;\n  top: 50%;\n  right: ", "px;\n  transform: translateY(-50%);\n  pointer-events: none;\n\n  svg {\n    display: block;\n  }\n"])), function (_a) {
     var _b;
     var theme = _a.theme;

package/build/cjs/components/src/components/FormElements/Select/Select.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Select.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/cjs/components/src/components/RadioBox/RadioBoxItem.js

@@ -13,11 +13,18 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var RadioBoxItem = function (_a) {
     var _b, _c, _d;
-    var _e = _a.align, align = _e === void 0 ? 'flex-start' : _e, ariaLabel = _a.ariaLabel, _f = _a.background, background = _f === void 0 ? (_b = designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.white : _f, _g = _a.border, border = _g === void 0 ? (_c = designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette) === null || _c === void 0 ? void 0 : _c.border : _g, _h = _a.boxShadow, boxShadow = _h === void 0 ? true : _h, checked = _a.checked, children = _a.children, _j = _a.hideRadioButton, hideRadioButton = _j === void 0 ? false : _j, flexDirection = _a.flexDirection, id = _a.id, isDisabled = _a.isDisabled, name = _a.name, _k = _a.padding, padding = _k === void 0 ? (_d = designTokens.theme.spacings) === null || _d === void 0 ? void 0 : _d.md : _k, setActive = _a.setActive;
-    return (React__default["default"].createElement(RadioBoxItem_styles.RadioBoxWrapper, { disabled: isDisabled },
-        React__default["default"].createElement(RadioBoxItem_styles.BaseRadioBox, { align: align, background: background, border: border, boxShadow: boxShadow, checked: checked, flexDirection: flexDirection, isDisabled: isDisabled, padding: padding },
-            React__default["default"].createElement(Radio.Radio, { checked: checked, disabled: isDisabled, hideRadioButton: hideRadioButton, id: id, label: ariaLabel, name: name, onChange: setActive !== null && setActive !== void 0 ? setActive : undefined }),
-            React__default["default"].createElement(RadioBoxItem_styles.RadioBoxLabel, { htmlFor: id }, children))));
+    var _e = _a.align, align = _e === void 0 ? 'flex-start' : _e, _f = _a.background, background = _f === void 0 ? (_b = designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.white : _f, _g = _a.border, border = _g === void 0 ? (_c = designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette) === null || _c === void 0 ? void 0 : _c.border : _g, _h = _a.boxShadow, boxShadow = _h === void 0 ? true : _h, checked = _a.checked, children = _a.children, _j = _a.hideRadioButton, hideRadioButton = _j === void 0 ? false : _j, flexDirection = _a.flexDirection, isDisabled = _a.isDisabled, name = _a.name, _k = _a.padding, padding = _k === void 0 ? (_d = designTokens.theme.spacings) === null || _d === void 0 ? void 0 : _d.md : _k, setActive = _a.setActive;
+    return (React__default["default"].createElement(RadioBoxItem_styles.BaseRadioBox, { align: align, "aria-checked": checked, background: background, border: border, boxShadow: boxShadow, checked: checked, flexDirection: flexDirection, isDisabled: isDisabled, onClick: !isDisabled ? setActive : undefined, onKeyDown: !isDisabled && setActive
+            ? function (e) {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    if (e.key === ' ')
+                        e.preventDefault();
+                    setActive();
+                }
+            }
+            : undefined, padding: padding, role: "radio", tabIndex: 0 },
+        !hideRadioButton && (React__default["default"].createElement(Radio.Radio, { checked: checked, disabled: isDisabled, label: "", name: name, onChange: setActive !== null && setActive !== void 0 ? setActive : undefined })),
+        children));
 };
 
 exports.RadioBoxItem = RadioBoxItem;

package/build/cjs/components/src/components/RadioBox/RadioBoxItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioBoxItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"RadioBoxItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/cjs/components/src/components/RadioBox/RadioBoxItem.styles.js

@@ -14,33 +14,18 @@ exports.Alignment = void 0;
     Alignment[Alignment["flex-start"] = 0] = "flex-start";
     Alignment[Alignment["center"] = 1] = "center";
 })(exports.Alignment || (exports.Alignment = {}));
-var BaseRadioBox = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: ", ";\n  flex-basis: 100%;\n  padding: ", "px;\n  align-items: ", ";\n  gap: ", "px;\n  ", ";\n\n  background: ", ";\n  border: solid 1px ", ";\n  ", ";\n  border-radius: ", "px;\n  ", ";\n  -webkit-transition: background-color 400ms linear;\n  -ms-transition: background-color 400ms linear;\n  transition: background-color 400ms linear;\n"], ["\n  display: flex;\n  flex-direction: ", ";\n  flex-basis: 100%;\n  padding: ", "px;\n  align-items: ", ";\n  gap: ", "px;\n  ", ";\n\n  background: ", ";\n  border: solid 1px ", ";\n  ", ";\n  border-radius: ", "px;\n  ", ";\n  -webkit-transition: background-color 400ms linear;\n  -ms-transition: background-color 400ms linear;\n  transition: background-color 400ms linear;\n"])), function (props) {
+var BaseRadioBox = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: ", ";\n  flex-basis: 100%;\n  padding: ", "px;\n  align-items: ", ";\n  gap: ", "px;\n  cursor: ", ";\n  ", ";\n\n  background: ", ";\n  border: solid 1px ", ";\n  ", ";\n  border-radius: 5px;\n  ", ";\n  -webkit-transition: background-color 400ms linear;\n  -ms-transition: background-color 400ms linear;\n  transition: background-color 400ms linear;\n"], ["\n  display: flex;\n  flex-direction: ", ";\n  flex-basis: 100%;\n  padding: ", "px;\n  align-items: ", ";\n  gap: ", "px;\n  cursor: ", ";\n  ", ";\n\n  background: ", ";\n  border: solid 1px ", ";\n  ", ";\n  border-radius: 5px;\n  ", ";\n  -webkit-transition: background-color 400ms linear;\n  -ms-transition: background-color 400ms linear;\n  transition: background-color 400ms linear;\n"])), function (props) {
     return props.flexDirection ? props.flexDirection : 'row';
-}, function (props) { return props.padding; }, function (props) { return props.align; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { return props.isDisabled && 'opacity: 0.4'; }, function (props) { var _a; return props.checked ? (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.blueLight : props.background; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.medium; }, function (props) {
+}, function (props) { return props.padding; }, function (props) { return props.align; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { return (props.isDisabled ? 'default' : 'pointer'); }, function (props) { return props.isDisabled && 'opacity: 0.4'; }, function (props) { var _a; return props.checked ? (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.blueLight : props.background; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.medium; }, function (props) {
     return props.checked &&
         props.border &&
         "border: 1px solid ".concat(props.border && props.border);
-}, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.small; }, function (props) {
+}, function (props) {
     return props.boxShadow &&
         props.checked &&
         'box-shadow: 0px 2px 5px rgba(7, 52, 99, 0.15)';
 });
-var RadioBoxWrapper = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  width: 100%;\n  cursor: ", ";\n\n  &:hover {\n    ", " {\n      border: 1px solid ", ";\n    }\n  }\n\n  &:active {\n    ", " {\n      background: ", ";\n    }\n  }\n"], ["\n  width: 100%;\n  cursor: ", ";\n\n  &:hover {\n    ", " {\n      border: 1px solid ", ";\n    }\n  }\n\n  &:active {\n    ", " {\n      background: ", ";\n    }\n  }\n"])), function (_a) {
-    var disabled = _a.disabled;
-    return (disabled ? 'not-allowed' : 'pointer');
-}, BaseRadioBox, function (_a) {
-    var _b;
-    var theme = _a.theme;
-    return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.darkest;
-}, BaseRadioBox, function (_a) {
-    var _b;
-    var theme = _a.theme;
-    return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.lightest;
-});
-var RadioBoxLabel = styled__default["default"].label(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  flex: 1;\n"], ["\n  flex: 1;\n"])));
-var templateObject_1, templateObject_2, templateObject_3;
+var templateObject_1;
 
 exports.BaseRadioBox = BaseRadioBox;
-exports.RadioBoxLabel = RadioBoxLabel;
-exports.RadioBoxWrapper = RadioBoxWrapper;
 //# sourceMappingURL=RadioBoxItem.styles.js.map

package/build/cjs/components/src/components/RadioBox/RadioBoxItem.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioBoxItem.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"RadioBoxItem.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/cjs/components/src/components/RadioBox/RadioBoxList.js

@@ -17,7 +17,7 @@ function RadioBoxList(_a) {
     var _b, _c, _d;
     var isDisabled = _a.isDisabled, name = _a.name, _e = _a.align, align = _e === void 0 ? 'flex-start' : _e, setActive = _a.setActive, title = _a.title, text = _a.text, checked = _a.checked, children = _a.children;
     return (React__default["default"].createElement(RadioBoxList_styles.BaseRadioBoxList, { checked: checked },
-        React__default["default"].createElement(RadioBoxItem.RadioBoxItem, { ariaLabel: title, id: "radio-box-list", checked: checked, align: align, isDisabled: isDisabled, border: (_b = designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.none, boxShadow: false, setActive: setActive, name: name },
+        React__default["default"].createElement(RadioBoxItem.RadioBoxItem, { checked: checked, align: align, isDisabled: isDisabled, border: (_b = designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.none, boxShadow: false, setActive: setActive, name: name },
             React__default["default"].createElement("div", null,
                 React__default["default"].createElement(typography.H3, null, title),
                 React__default["default"].createElement(RadioBoxList_styles.RadioBoxListParagraph, null, text))),

package/build/es/components/src/components/FormElements/FormElement.styles.js

@@ -23,7 +23,7 @@ var Label = styled.label(templateObject_2 || (templateObject_2 = __makeTemplateO
     var theme = _a.theme;
     return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xxs;
 });
-var sharedFormElementStyles = css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  appearance: none;\n  border: 1px solid\n    ", ";\n  border-radius: ", "px;\n  color: ", ";\n  cursor: pointer;\n  font-family: ", ";\n  font-size: ", "px;\n  height: ", "px;\n  overflow: hidden;\n  padding: 0 ", "px;\n  text-overflow: ellipsis;\n  width: 100%;\n\n  &:not(:disabled):focus,\n  &:not(:disabled):active {\n    outline: 1px solid\n      ", ";\n    border: 1px solid\n      ", ";\n  }\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    cursor: not-allowed;\n  }\n"], ["\n  appearance: none;\n  border: 1px solid\n    ", ";\n  border-radius: ", "px;\n  color: ", ";\n  cursor: pointer;\n  font-family: ", ";\n  font-size: ", "px;\n  height: ", "px;\n  overflow: hidden;\n  padding: 0 ", "px;\n  text-overflow: ellipsis;\n  width: 100%;\n\n  &:not(:disabled):focus,\n  &:not(:disabled):active {\n    outline: 1px solid\n      ", ";\n    border: 1px solid\n      ", ";\n  }\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    cursor: not-allowed;\n  }\n"])), function (_a) {
+var sharedFormElementStyles = css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  appearance: none;\n  border: 1px solid\n    ", ";\n  border-radius: ", "px;\n  color: ", ";\n  font-family: ", ";\n  font-size: ", "px;\n  height: ", "px;\n  overflow: hidden;\n  padding: 0 ", "px;\n  text-overflow: ellipsis;\n  width: 100%;\n\n  &:not(:disabled):focus,\n  &:not(:disabled):active {\n    outline: 1px solid\n      ", ";\n    border: 1px solid\n      ", ";\n  }\n\n  &:hover {\n    border-color: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    cursor: not-allowed;\n  }\n"], ["\n  appearance: none;\n  border: 1px solid\n    ", ";\n  border-radius: ", "px;\n  color: ", ";\n  font-family: ", ";\n  font-size: ", "px;\n  height: ", "px;\n  overflow: hidden;\n  padding: 0 ", "px;\n  text-overflow: ellipsis;\n  width: 100%;\n\n  &:not(:disabled):focus,\n  &:not(:disabled):active {\n    outline: 1px solid\n      ", ";\n    border: 1px solid\n      ", ";\n  }\n\n  &:hover {\n    border-color: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    cursor: not-allowed;\n  }\n"])), function (_a) {
     var _b, _c;
     var error = _a.error, theme = _a.theme;
     return error ? (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.alertRed : (_c = theme.palette) === null || _c === void 0 ? void 0 : _c.placeholder;
@@ -59,7 +59,7 @@ var sharedFormElementStyles = css(templateObject_3 || (templateObject_3 = __make
 }, function (_a) {
     var _b;
     var theme = _a.theme;
-    return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.lightest;
+    return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.darkest;
 }, function (_a) {
     var _b;
     var theme = _a.theme;

package/build/es/components/src/components/FormElements/Input/Input.js

@@ -1,19 +1,16 @@
 import { __rest, __assign } from '../../../../../_virtual/_tslib.js';
 import React from 'react';
+import { theme } from '@citygross/design-tokens';
+import { BodyText } from '@citygross/typography';
 import { getSizeAttributes } from '../../../helpers/form-element.js';
+import { ScreenReader } from '../../ScreenReader/ScreenReader.js';
 import { Wrapper, Label, ErrorLabel } from '../FormElement.styles.js';
 import { InputWrapper, InputContainer, AbsoluteContainer, InputElement } from './Input.styles.js';
 import { EFormElementSize } from '../FormElement.types.js';
-import { theme } from '@citygross/design-tokens';
-import { Icons } from '@citygross/icons';
-import { BodyText } from '@citygross/typography';
-import { CgButton } from '../../CgButton/CgButton.js';
-import { ScreenReader } from '../../ScreenReader/ScreenReader.js';
-import { EButtonSize, EButtonVariant } from '../../CgButton/CgButton.types.js';
 
 var Input = function (_a) {
-    var _b, _c, _d;
-    var clearFunction = _a.clearFunction, hideLabel = _a.hideLabel, icon = _a.icon, error = _a.error, errorLabel = _a.errorLabel, label = _a.label, paddingLeft = _a.paddingLeft, _e = _a.size, size = _e === void 0 ? EFormElementSize.large : _e, unit = _a.unit, props = __rest(_a, ["clearFunction", "hideLabel", "icon", "error", "errorLabel", "label", "paddingLeft", "size", "unit"]);
+    var _b;
+    var elementLeft = _a.elementLeft, elementRight = _a.elementRight, hideLabel = _a.hideLabel, error = _a.error, errorLabel = _a.errorLabel, label = _a.label, paddingLeft = _a.paddingLeft, _c = _a.size, size = _c === void 0 ? EFormElementSize.large : _c, unit = _a.unit, props = __rest(_a, ["elementLeft", "elementRight", "hideLabel", "error", "errorLabel", "label", "paddingLeft", "size", "unit"]);
     var id = props.id, required = props.required;
     var sizeAttributes = getSizeAttributes(size);
     var errorId = "".concat(id, "-error");
@@ -23,12 +20,10 @@ var Input = function (_a) {
             required ? ' *' : '')),
         React.createElement(InputWrapper, null,
             React.createElement(InputContainer, null,
-                icon && (React.createElement(AbsoluteContainer, null, icon)),
+                elementLeft && (React.createElement(AbsoluteContainer, null, elementLeft)),
                 React.createElement(InputElement, __assign({ "aria-describedby": error && errorLabel ? errorId : undefined, "aria-invalid": !!error, error: error, paddingLeft: paddingLeft, sizeAttributes: sizeAttributes }, props)),
-                clearFunction && (React.createElement(AbsoluteContainer, { right: true },
-                    React.createElement(CgButton, { circle: true, onClick: clearFunction, size: EButtonSize.small, variant: EButtonVariant.ghost },
-                        React.createElement(Icons.Cross, { height: (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.sm, width: (_c = theme.spacings) === null || _c === void 0 ? void 0 : _c.sm }))))),
-            unit && React.createElement(BodyText, { color: (_d = theme.palette) === null || _d === void 0 ? void 0 : _d.darkest }, unit)),
+                elementRight && (React.createElement(AbsoluteContainer, { right: true }, elementRight))),
+            unit && React.createElement(BodyText, { color: (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.darkest }, unit)),
         error && errorLabel && (React.createElement(ErrorLabel, { id: errorId }, errorLabel))));
 };
 

package/build/es/components/src/components/FormElements/Input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Input.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/es/components/src/components/FormElements/Radio/Radio.js

@@ -4,16 +4,13 @@ import { ScreenReader } from '../../ScreenReader/ScreenReader.js';
 import { BodyText, TextTypes } from '@citygross/typography';
 import { getColorAttributes, getBorderSize } from '../../../helpers/form-element.js';
 import { RadioContainer } from './Radio.styles.js';
-import { HiddenInput, OptionInputWrapper } from '../FormElement.styles.js';
+import { OptionInputWrapper, HiddenInput } from '../FormElement.styles.js';
 
 var Radio = function (_a) {
-    var hideRadioButton = _a.hideRadioButton, label = _a.label, showLabel = _a.showLabel, props = __rest(_a, ["hideRadioButton", "label", "showLabel"]);
+    var label = _a.label, showLabel = _a.showLabel, props = __rest(_a, ["label", "showLabel"]);
     var checked = props.checked, disabled = props.disabled;
     var borderSize = getBorderSize(checked, disabled);
     var _b = getColorAttributes(checked, disabled, true), labelColor = _b.labelColor, attributes = __rest(_b, ["labelColor"]);
-    if (hideRadioButton) {
-        return React.createElement(HiddenInput, __assign({ type: "radio" }, props));
-    }
     return (React.createElement(OptionInputWrapper, { as: "label", disabled: disabled },
         React.createElement(HiddenInput, __assign({ type: "radio" }, props)),
         React.createElement(RadioContainer, { attributes: attributes, borderSize: borderSize, checked: checked, disabled: disabled }),

package/build/es/components/src/components/FormElements/Radio/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Radio.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;"}

package/build/es/components/src/components/FormElements/Select/Select.styles.js

@@ -3,7 +3,11 @@ import styled from 'styled-components';
 import { sharedFormElementStyles } from '../FormElement.styles.js';
 
 var SelectContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
-var SelectElement = styled.select(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), sharedFormElementStyles);
+var SelectElement = styled.select(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n  }\n"], ["\n  ", "\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), sharedFormElementStyles, function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.lightest;
+});
 var SelectIcon = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  top: 50%;\n  right: ", "px;\n  transform: translateY(-50%);\n  pointer-events: none;\n\n  svg {\n    display: block;\n  }\n"], ["\n  position: absolute;\n  top: 50%;\n  right: ", "px;\n  transform: translateY(-50%);\n  pointer-events: none;\n\n  svg {\n    display: block;\n  }\n"])), function (_a) {
     var _b;
     var theme = _a.theme;

package/build/es/components/src/components/FormElements/Select/Select.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}
+{"version":3,"file":"Select.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;"}

package/build/es/components/src/components/RadioBox/RadioBoxItem.js

@@ -1,15 +1,22 @@
 import React from 'react';
 import { theme } from '@citygross/design-tokens';
 import { Radio } from '../FormElements/Radio/Radio.js';
-import { RadioBoxWrapper, BaseRadioBox, RadioBoxLabel } from './RadioBoxItem.styles.js';
+import { BaseRadioBox } from './RadioBoxItem.styles.js';
 
 var RadioBoxItem = function (_a) {
     var _b, _c, _d;
-    var _e = _a.align, align = _e === void 0 ? 'flex-start' : _e, ariaLabel = _a.ariaLabel, _f = _a.background, background = _f === void 0 ? (_b = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _b === void 0 ? void 0 : _b.white : _f, _g = _a.border, border = _g === void 0 ? (_c = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _c === void 0 ? void 0 : _c.border : _g, _h = _a.boxShadow, boxShadow = _h === void 0 ? true : _h, checked = _a.checked, children = _a.children, _j = _a.hideRadioButton, hideRadioButton = _j === void 0 ? false : _j, flexDirection = _a.flexDirection, id = _a.id, isDisabled = _a.isDisabled, name = _a.name, _k = _a.padding, padding = _k === void 0 ? (_d = theme.spacings) === null || _d === void 0 ? void 0 : _d.md : _k, setActive = _a.setActive;
-    return (React.createElement(RadioBoxWrapper, { disabled: isDisabled },
-        React.createElement(BaseRadioBox, { align: align, background: background, border: border, boxShadow: boxShadow, checked: checked, flexDirection: flexDirection, isDisabled: isDisabled, padding: padding },
-            React.createElement(Radio, { checked: checked, disabled: isDisabled, hideRadioButton: hideRadioButton, id: id, label: ariaLabel, name: name, onChange: setActive !== null && setActive !== void 0 ? setActive : undefined }),
-            React.createElement(RadioBoxLabel, { htmlFor: id }, children))));
+    var _e = _a.align, align = _e === void 0 ? 'flex-start' : _e, _f = _a.background, background = _f === void 0 ? (_b = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _b === void 0 ? void 0 : _b.white : _f, _g = _a.border, border = _g === void 0 ? (_c = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _c === void 0 ? void 0 : _c.border : _g, _h = _a.boxShadow, boxShadow = _h === void 0 ? true : _h, checked = _a.checked, children = _a.children, _j = _a.hideRadioButton, hideRadioButton = _j === void 0 ? false : _j, flexDirection = _a.flexDirection, isDisabled = _a.isDisabled, name = _a.name, _k = _a.padding, padding = _k === void 0 ? (_d = theme.spacings) === null || _d === void 0 ? void 0 : _d.md : _k, setActive = _a.setActive;
+    return (React.createElement(BaseRadioBox, { align: align, "aria-checked": checked, background: background, border: border, boxShadow: boxShadow, checked: checked, flexDirection: flexDirection, isDisabled: isDisabled, onClick: !isDisabled ? setActive : undefined, onKeyDown: !isDisabled && setActive
+            ? function (e) {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    if (e.key === ' ')
+                        e.preventDefault();
+                    setActive();
+                }
+            }
+            : undefined, padding: padding, role: "radio", tabIndex: 0 },
+        !hideRadioButton && (React.createElement(Radio, { checked: checked, disabled: isDisabled, label: "", name: name, onChange: setActive !== null && setActive !== void 0 ? setActive : undefined })),
+        children));
 };
 
 export { RadioBoxItem };

package/build/es/components/src/components/RadioBox/RadioBoxItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioBoxItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}
+{"version":3,"file":"RadioBoxItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;"}

package/build/es/components/src/components/RadioBox/RadioBoxItem.styles.js

@@ -6,31 +6,18 @@ var Alignment;
     Alignment[Alignment["flex-start"] = 0] = "flex-start";
     Alignment[Alignment["center"] = 1] = "center";
 })(Alignment || (Alignment = {}));
-var BaseRadioBox = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: ", ";\n  flex-basis: 100%;\n  padding: ", "px;\n  align-items: ", ";\n  gap: ", "px;\n  ", ";\n\n  background: ", ";\n  border: solid 1px ", ";\n  ", ";\n  border-radius: ", "px;\n  ", ";\n  -webkit-transition: background-color 400ms linear;\n  -ms-transition: background-color 400ms linear;\n  transition: background-color 400ms linear;\n"], ["\n  display: flex;\n  flex-direction: ", ";\n  flex-basis: 100%;\n  padding: ", "px;\n  align-items: ", ";\n  gap: ", "px;\n  ", ";\n\n  background: ", ";\n  border: solid 1px ", ";\n  ", ";\n  border-radius: ", "px;\n  ", ";\n  -webkit-transition: background-color 400ms linear;\n  -ms-transition: background-color 400ms linear;\n  transition: background-color 400ms linear;\n"])), function (props) {
+var BaseRadioBox = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: ", ";\n  flex-basis: 100%;\n  padding: ", "px;\n  align-items: ", ";\n  gap: ", "px;\n  cursor: ", ";\n  ", ";\n\n  background: ", ";\n  border: solid 1px ", ";\n  ", ";\n  border-radius: 5px;\n  ", ";\n  -webkit-transition: background-color 400ms linear;\n  -ms-transition: background-color 400ms linear;\n  transition: background-color 400ms linear;\n"], ["\n  display: flex;\n  flex-direction: ", ";\n  flex-basis: 100%;\n  padding: ", "px;\n  align-items: ", ";\n  gap: ", "px;\n  cursor: ", ";\n  ", ";\n\n  background: ", ";\n  border: solid 1px ", ";\n  ", ";\n  border-radius: 5px;\n  ", ";\n  -webkit-transition: background-color 400ms linear;\n  -ms-transition: background-color 400ms linear;\n  transition: background-color 400ms linear;\n"])), function (props) {
     return props.flexDirection ? props.flexDirection : 'row';
-}, function (props) { return props.padding; }, function (props) { return props.align; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { return props.isDisabled && 'opacity: 0.4'; }, function (props) { var _a; return props.checked ? (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.blueLight : props.background; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.medium; }, function (props) {
+}, function (props) { return props.padding; }, function (props) { return props.align; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { return (props.isDisabled ? 'default' : 'pointer'); }, function (props) { return props.isDisabled && 'opacity: 0.4'; }, function (props) { var _a; return props.checked ? (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.blueLight : props.background; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.medium; }, function (props) {
     return props.checked &&
         props.border &&
         "border: 1px solid ".concat(props.border && props.border);
-}, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.small; }, function (props) {
+}, function (props) {
     return props.boxShadow &&
         props.checked &&
         'box-shadow: 0px 2px 5px rgba(7, 52, 99, 0.15)';
 });
-var RadioBoxWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 100%;\n  cursor: ", ";\n\n  &:hover {\n    ", " {\n      border: 1px solid ", ";\n    }\n  }\n\n  &:active {\n    ", " {\n      background: ", ";\n    }\n  }\n"], ["\n  width: 100%;\n  cursor: ", ";\n\n  &:hover {\n    ", " {\n      border: 1px solid ", ";\n    }\n  }\n\n  &:active {\n    ", " {\n      background: ", ";\n    }\n  }\n"])), function (_a) {
-    var disabled = _a.disabled;
-    return (disabled ? 'not-allowed' : 'pointer');
-}, BaseRadioBox, function (_a) {
-    var _b;
-    var theme = _a.theme;
-    return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.darkest;
-}, BaseRadioBox, function (_a) {
-    var _b;
-    var theme = _a.theme;
-    return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.lightest;
-});
-var RadioBoxLabel = styled.label(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  flex: 1;\n"], ["\n  flex: 1;\n"])));
-var templateObject_1, templateObject_2, templateObject_3;
+var templateObject_1;
 
-export { Alignment, BaseRadioBox, RadioBoxLabel, RadioBoxWrapper };
+export { Alignment, BaseRadioBox };
 //# sourceMappingURL=RadioBoxItem.styles.js.map

package/build/es/components/src/components/RadioBox/RadioBoxItem.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioBoxItem.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"RadioBoxItem.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;"}

package/build/es/components/src/components/RadioBox/RadioBoxList.js

@@ -9,7 +9,7 @@ function RadioBoxList(_a) {
     var _b, _c, _d;
     var isDisabled = _a.isDisabled, name = _a.name, _e = _a.align, align = _e === void 0 ? 'flex-start' : _e, setActive = _a.setActive, title = _a.title, text = _a.text, checked = _a.checked, children = _a.children;
     return (React.createElement(BaseRadioBoxList, { checked: checked },
-        React.createElement(RadioBoxItem, { ariaLabel: title, id: "radio-box-list", checked: checked, align: align, isDisabled: isDisabled, border: (_b = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _b === void 0 ? void 0 : _b.none, boxShadow: false, setActive: setActive, name: name },
+        React.createElement(RadioBoxItem, { checked: checked, align: align, isDisabled: isDisabled, border: (_b = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _b === void 0 ? void 0 : _b.none, boxShadow: false, setActive: setActive, name: name },
             React.createElement("div", null,
                 React.createElement(H3, null, title),
                 React.createElement(RadioBoxListParagraph, null, text))),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citygross/components",
-  "version": "0.8.149",
+  "version": "0.8.151",
   "license": "ISC",
   "sideEffects": false,
   "main": "./build/cjs/components/src/index.js",
@@ -74,5 +74,5 @@
     "react-slick": "^0.30.1",
     "slick-carousel": "^1.8.1"
   },
-  "gitHead": "d5bed235b25278ed25df5511b658c02073f4b18b"
+  "gitHead": "bc7fd0c3968256a58419993dde7d4f6b412fd3f2"
 }