@mailstep/design-system 0.6.3-beta.9 → 0.6.3

package/ui/Elements/Select/themes/formStyles.d.ts

@@ -8,9 +8,6 @@ type CustomTheme = Omit<BaseStylesTheme, 'colors'> & {
         inputBorderHoverColor: string;
         menuHoverBackgroundColor: string;
         dropdownIndicatorColor: string;
-        hoverToActiveOptionBackground: string;
-        scrollbarThumbColor: string;
-        scrollbarTrackColor: string;
     };
     textWeightRegular: string;
     textWeightSemiBold: string;

package/ui/Elements/Select/themes/formStyles.js

@@ -58,13 +58,7 @@ export var CustomStyles = __assign(__assign({}, baseStylesConfig), { control: fu
             marginBottom: '2px',
             lineHeight: '22px',
             borderRadius: th.radius('ml')({ theme: selectProps === null || selectProps === void 0 ? void 0 : selectProps.systemTheme }),
-            '&:hover': {
-                backgroundColor: isSelected
-                    ? theme.colors.hoverToActiveOptionBackground
-                    : !isDisabled
-                        ? theme.colors.menuHoverBackgroundColor
-                        : undefined,
-            },
+            '&:hover': { backgroundColor: !isDisabled ? theme.colors.menuHoverBackgroundColor : undefined },
         };
     }, menu: function (styles, state) {
         var _a;
@@ -101,9 +95,6 @@ export var getCustomTheme = function (theme, optionVariant, useFilterSubvariant)
         menuBackgroundColor: th.color('white')({ theme: theme }),
         menuHoverBackgroundColor: th.color('bgLightGray1')({ theme: theme }),
         dropdownIndicatorColor: th.color('gray1')({ theme: theme }),
-        hoverToActiveOptionBackground: th.color('red30')({ theme: theme }),
-        scrollbarThumbColor: th.color('lightGray5')({ theme: theme }),
-        scrollbarTrackColor: th.color('bgLightGray1')({ theme: theme }),
     };
     return function (reactSelectTheme) {
         return __assign(__assign({}, reactSelectTheme), { colors: customColors, focusBoxShadow: null, height: useFilterSubvariant ? '32px' : '38px', textWeightRegular: th.fontWeight('regular')({ theme: theme }), textWeightSemiBold: th.fontWeight('semiBold')({ theme: theme }), textWeightBold: th.fontWeight('bold')({ theme: theme }), optionVariant: optionVariant, borderRadius: th.radius('lg')({ theme: theme }), font: th.font('primary')({ theme: theme }), narrowIndicators: !!useFilterSubvariant });

package/ui/Elements/Text/types.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import { ReactNode } from 'react';
 export type TextProps = {
-    children?: string | number | JSX.Element | (JSX.Element | undefined)[];
+    children?: ReactNode | ReactNode[];
     fontSize?: number;
     fontWeight?: string;
     variant?: 'normal' | 'medium' | 'semiBold' | 'bold';

package/ui/Forms/Checkbox/Checkbox.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo } from 'react';
+import { memo, useId } from 'react';
 import { CheckboxWrap, CheckIcon, FakeInput, Label } from './styles';
 import { th, useTheme } from '@xstyled/styled-components';
 var Checkbox = function (_a) {
     var name = _a.name, label = _a.label, onChange = _a.onChange, checked = _a.checked, defaultChecked = _a.defaultChecked, _b = _a.size, size = _b === void 0 ? 4 : _b, className = _a.className, disabled = _a.disabled, inputRef = _a.inputRef, readOnly = _a.readOnly, _c = _a.minusIcon, minusIcon = _c === void 0 ? false : _c;
     var theme = useTheme();
     var themeSize = th.fontSize(size)({ theme: theme });
-    return (_jsxs(CheckboxWrap, { size: themeSize, className: className, children: [_jsx("input", { type: "checkbox", ref: inputRef, name: name, checked: checked, defaultChecked: defaultChecked, disabled: disabled, onChange: onChange, value: "", readOnly: readOnly, "data-cy": name && "".concat(name, "Checkbox") }), _jsx(FakeInput, { size: themeSize, children: _jsx(CheckIcon, { icon: minusIcon ? 'minus' : 'check', size: themeSize }) }), label && _jsx(Label, { children: label })] }));
+    var id = useId();
+    return (_jsxs(CheckboxWrap, { size: themeSize, className: className, children: [_jsx("input", { type: "checkbox", ref: inputRef, name: name, checked: checked, defaultChecked: defaultChecked, disabled: disabled, onChange: onChange, value: "", readOnly: readOnly, "data-cy": name && "".concat(name, "Checkbox"), id: id }), _jsx(FakeInput, { size: themeSize, children: _jsx(CheckIcon, { icon: minusIcon ? 'minus' : 'check', size: themeSize }) }), label && _jsx(Label, { htmlFor: id, children: label })] }));
 };
 export default memo(Checkbox);

package/ui/Forms/Checkbox/stories/Checkbox.stories.js

@@ -9,7 +9,7 @@ export default meta;
 export var CheckboxChecked = {
     args: {
         checked: true,
-        onChange: function () { },
+        onChange: function () { return console.log('Clicked'); },
         label: 'Checked',
     },
 };

package/ui/Forms/Checkbox/styles.d.ts

@@ -8,4 +8,4 @@ export declare const CheckIcon: import("styled-components").StyledComponent<({ i
 export declare const CheckboxWrap: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     size: string | number;
 }, never>;
-export declare const Label: import("styled-components").StyledComponent<"span", import("@xstyled/system").Theme, {}, never>;
+export declare const Label: import("styled-components").StyledComponent<"label", import("@xstyled/system").Theme, {}, never>;

package/ui/Forms/Checkbox/styles.js

@@ -22,5 +22,5 @@ export var CheckboxWrap = styled.div(templateObject_3 || (templateObject_3 = __m
     var size = _a.size;
     return size;
 });
-export var Label = styled.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin: 0;\n  margin-left: 8px;\n  font-size: 14px;\n"], ["\n  margin: 0;\n  margin-left: 8px;\n  font-size: 14px;\n"])));
+export var Label = styled.label(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin: 0;\n  margin-left: 8px;\n  font-size: 14px;\n"], ["\n  margin: 0;\n  margin-left: 8px;\n  font-size: 14px;\n"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/ui/Forms/RadioButton/RadioButton.js

@@ -22,8 +22,11 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CenterDot, Item, Label, PaintoverLayer, StyledRadio, Wrapper } from './styles';
+import { useId } from 'react';
 var RadioButton = function (_a) {
     var label = _a.label, id = _a.id, name = _a.name, _b = _a.disabled, disabled = _b === void 0 ? false : _b, onChange = _a.onChange, rest = __rest(_a, ["label", "id", "name", "disabled", "onChange"]);
-    return (_jsxs(Wrapper, { children: [_jsxs(Item, { children: [_jsx(StyledRadio, __assign({ type: "radio", id: id, name: name, disabled: disabled, onChange: onChange }, rest)), _jsx(PaintoverLayer, { disabled: disabled, children: _jsx(CenterDot, {}) })] }), label && _jsx(Label, { children: label })] }));
+    var customId = useId();
+    var inputId = id || customId;
+    return (_jsxs(Wrapper, { children: [_jsxs(Item, { children: [_jsx(StyledRadio, __assign({ type: "radio", id: inputId, name: name, disabled: disabled, onChange: onChange }, rest)), _jsx(PaintoverLayer, { disabled: disabled, children: _jsx(CenterDot, {}) })] }), label && _jsx(Label, { htmlFor: inputId, children: label })] }));
 };
 export default RadioButton;

package/ui/Forms/RadioButton/styles.d.ts

@@ -7,4 +7,4 @@ export declare const CenterDot: import("styled-components").StyledComponent<"spa
 export declare const StyledRadio: import("styled-components").StyledComponent<"input", import("@xstyled/system").Theme, {
     disabled: boolean;
 }, never>;
-export declare const Label: import("styled-components").StyledComponent<"span", import("@xstyled/system").Theme, {}, never>;
+export declare const Label: import("styled-components").StyledComponent<"label", import("@xstyled/system").Theme, {}, never>;

package/ui/Forms/RadioButton/styles.js

@@ -11,5 +11,5 @@ export var StyledRadio = styled.input(templateObject_5 || (templateObject_5 = __
     var disabled = _a.disabled;
     return (disabled ? 'default' : 'pointer');
 });
-export var Label = styled.span(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  margin: 0;\n  margin-left: 8px;\n  font-size: 14px;\n"], ["\n  margin: 0;\n  margin-left: 8px;\n  font-size: 14px;\n"])));
+export var Label = styled.label(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  margin: 0;\n  margin-left: 8px;\n  font-size: 14px;\n"], ["\n  margin: 0;\n  margin-left: 8px;\n  font-size: 14px;\n"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/ui/ThemeProvider/themes/default.js

@@ -64,7 +64,7 @@ var defaultTheme = {
         yellow2: '#F2E871',
         red10: '#FFF6F4',
         red20: '#FFEBE6',
-        red30: '#FFDAD1',
+        red30: '#fec1cb',
         red50: '#ff7c7b',
         red70: '#CF2013',
         red1: '#DB2B19',

package/ui/index.d.ts

@@ -18,7 +18,6 @@ import Line from './Elements/Line';
 import Link from './Elements/Link';
 import Logo from './Elements/Logo';
 import Pagination from './Elements/Pagination';
-import Paragraph from './Elements/Paragraph';
 import Portal from './Elements/Portal';
 import ProgressBar from './Elements/ProgressBar';
 import SimpleLink from './Elements/SimpleLink';
@@ -41,7 +40,7 @@ import MultiSelect from './Elements/MultiSelect';
 import Select from './Elements/Select';
 import DropdownSelect from './Elements/DropdownSelect';
 import TextArea from './Forms/TextArea';
-export { DropdownSelect, DatePicker, CommonGrid, Popover, SingleSelect, MultiSelect, Select, Card, CornerDialog, ImageList, LightBox, Modal, Tabs, Alert, Avatar, Badge, BorderedBox, Button, Dropdown, ErrorMessage, Icon, Image, Label, Line, Link, Logo, Pagination, Paragraph, Portal, ProgressBar, SimpleLink, SpaceAround, Spinner, Tag, Toast, Toggle, Typography, Checkbox, Input, RadioButton, ThemeProvider, utils, TextArea, };
+export { DropdownSelect, DatePicker, CommonGrid, Popover, SingleSelect, MultiSelect, Select, Card, CornerDialog, ImageList, LightBox, Modal, Tabs, Alert, Avatar, Badge, BorderedBox, Button, Dropdown, ErrorMessage, Icon, Image, Label, Line, Link, Logo, Pagination, Portal, ProgressBar, SimpleLink, SpaceAround, Spinner, Tag, Toast, Toggle, Typography, Checkbox, Input, RadioButton, ThemeProvider, utils, TextArea, };
 export * from './Blocks/CornerDialog';
 export * from './Blocks/ImageList';
 export * from './Blocks/LightBox';
@@ -62,7 +61,6 @@ export * from './Elements/Line';
 export * from './Elements/Link';
 export * from './Elements/Logo';
 export * from './Elements/Pagination';
-export * from './Elements/Paragraph';
 export * from './Elements/Portal';
 export * from './Elements/ProgressBar';
 export * from './Elements/SimpleLink';