@mailstep/design-system 0.7.25-beta.9 → 0.7.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.7.25-beta.9",
+  "version": "0.7.26",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",

package/ui/Blocks/Scheduler/Scheduler.js

@@ -8,8 +8,7 @@ import { TimeSlots } from './components/TimeSlots';
 import { useChangeDate } from './hooks/useChangeDate';
 import { generateTimeArray } from './utils/generateTimeArray';
 import { getClosestStep } from './utils/getClosestStep';
-import { x } from '@xstyled/styled-components';
-import { Container } from './styles';
+import { Block, Container } from './styles';
 var timeArray = generateTimeArray();
 export var Scheduler = function (_a) {
     var groups = _a.groups, activeHours = _a.activeHours, data = _a.data, handleSelectTimeSlot = _a.handleSelectTimeSlot, handleReloadTimeSlots = _a.handleReloadTimeSlots, handleTimeSlotClick = _a.handleTimeSlotClick, isLoading = _a.isLoading, timeSlotDefinitions = _a.timeSlotDefinitions;
@@ -24,5 +23,5 @@ export var Scheduler = function (_a) {
     }), handlePrevDay = _c.handlePrevDay, handleNextDay = _c.handleNextDay, handleChangeDate = _c.handleChangeDate, date = _c.date, isTodayDate = _c.isTodayDate;
     if (!(groups === null || groups === void 0 ? void 0 : groups.length))
         return null;
-    return (_jsxs(x.div, { w: "100%", h: "100%", children: [_jsx(DateChanger, { isLoading: isLoading, isDatepickerOpen: isDatepickerOpen, toggleDatepicker: toggleDatepicker, closeDatePicker: closeDatePicker, handlePrevDay: handlePrevDay, handleNextDay: handleNextDay, handleChangeDate: handleChangeDate, date: date }), _jsxs(Container, { children: [_jsx(Groups, { groups: groups }), _jsx(TimeSlots, { timeArray: timeArray, groups: groups, activeHours: activeHours, timeSlots: groupedTimeSlots, handleSelectTimeSlot: !isLoading ? handleSelectTimeSlot : undefined, handleTimeSlotClick: !isLoading ? handleTimeSlotClick : undefined, isTodayDate: isTodayDate, date: date, timeSlotDefinitions: timeSlotDefinitions })] })] }));
+    return (_jsxs(Container, { children: [_jsx(DateChanger, { isLoading: isLoading, isDatepickerOpen: isDatepickerOpen, toggleDatepicker: toggleDatepicker, closeDatePicker: closeDatePicker, handlePrevDay: handlePrevDay, handleNextDay: handleNextDay, handleChangeDate: handleChangeDate, date: date }), _jsxs(Block, { children: [_jsx(Groups, { groups: groups }), _jsx(TimeSlots, { timeArray: timeArray, groups: groups, activeHours: activeHours, timeSlots: groupedTimeSlots, handleSelectTimeSlot: !isLoading ? handleSelectTimeSlot : undefined, handleTimeSlotClick: !isLoading ? handleTimeSlotClick : undefined, isTodayDate: isTodayDate, date: date, timeSlotDefinitions: timeSlotDefinitions })] })] }));
 };

package/ui/Blocks/Scheduler/components/Groups/styles.js

@@ -4,8 +4,8 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 };
 import { groupsHeight, timeIntervalWidth } from '../../utils/constants';
 import styled, { th } from '@xstyled/styled-components';
-export var GroupContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: ", "px;\n  display: flex;\n  border-bottom: 1px solid ", ";\n  width: 100%;\n"], ["\n  height: ", "px;\n  display: flex;\n  border-bottom: 1px solid ", ";\n  width: 100%;\n"])), groupsHeight, th.color('lightGray6'));
-export var GroupItem = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  width: ", ";\n  max-width: 400px;\n  min-width: 300px;\n  height: 100%;\n  font-size: 14px;\n  font-weight: 600;\n  padding: 10px;\n  border-right: 1px solid ", ";\n\n  &:last-child {\n    border-right: none;\n  }\n"], ["\n  background-color: ", ";\n  width: ", ";\n  max-width: 400px;\n  min-width: 300px;\n  height: 100%;\n  font-size: 14px;\n  font-weight: 600;\n  padding: 10px;\n  border-right: 1px solid ", ";\n\n  &:last-child {\n    border-right: none;\n  }\n"])), function (_a) {
+export var GroupContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: ", "px;\n  display: flex;\n  border-bottom: 1px solid ", ";\n  width: 100%;\n  flex: 0 0 auto;\n"], ["\n  height: ", "px;\n  display: flex;\n  border-bottom: 1px solid ", ";\n  width: 100%;\n  flex: 0 0 auto;\n"])), groupsHeight, th.color('lightGray6'));
+export var GroupItem = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  width: ", ";\n  min-width: 350px;\n  height: 100%;\n  font-size: 14px;\n  font-weight: 600;\n  padding: 10px;\n  border-right: 1px solid ", ";\n\n  &:last-child {\n    border-right: none;\n  }\n"], ["\n  background-color: ", ";\n  width: ", ";\n  min-width: 350px;\n  height: 100%;\n  font-size: 14px;\n  font-weight: 600;\n  padding: 10px;\n  border-right: 1px solid ", ";\n\n  &:last-child {\n    border-right: none;\n  }\n"])), function (_a) {
     var bg = _a.bg;
     return bg || th.color('bgLightGray');
 }, function (_a) {

package/ui/Blocks/Scheduler/components/TimeSlots/styles.js

@@ -4,8 +4,8 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 };
 import { minuteHeight, stepInMinutes, timeIntervalWidth } from '../../utils/constants';
 import styled, { th } from '@xstyled/styled-components';
-export var TimeSlotsContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  overflow-y: auto;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  scroll-behavior: smooth;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n"], ["\n  position: relative;\n  overflow-y: auto;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  scroll-behavior: smooth;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n"])));
-export var EmptyTimeSlot = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: ", "px;\n  width: ", ";\n  max-width: 400px;\n  min-width: 300px;\n  position: relative;\n  background-color: ", ";\n  cursor: ", ";\n  border-right: 1px solid ", ";\n\n  &:last-child {\n    border-right: none;\n  }\n\n  &:hover {\n    background-color: ", ";\n  }\n"], ["\n  height: ", "px;\n  width: ", ";\n  max-width: 400px;\n  min-width: 300px;\n  position: relative;\n  background-color: ", ";\n  cursor: ", ";\n  border-right: 1px solid ", ";\n\n  &:last-child {\n    border-right: none;\n  }\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), minuteHeight * stepInMinutes, function (_a) {
+export var TimeSlotsContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  flex: 1 1 auto;\n  overflow-y: auto;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  scroll-behavior: smooth;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n"], ["\n  position: relative;\n  flex: 1 1 auto;\n  overflow-y: auto;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  scroll-behavior: smooth;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n"])));
+export var EmptyTimeSlot = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: ", "px;\n  width: ", ";\n  min-width: 350px;\n  position: relative;\n  background-color: ", ";\n  cursor: ", ";\n  border-right: 1px solid ", ";\n\n  &:last-child {\n    border-right: none;\n  }\n\n  &:hover {\n    background-color: ", ";\n  }\n"], ["\n  height: ", "px;\n  width: ", ";\n  min-width: 350px;\n  position: relative;\n  background-color: ", ";\n  cursor: ", ";\n  border-right: 1px solid ", ";\n\n  &:last-child {\n    border-right: none;\n  }\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), minuteHeight * stepInMinutes, function (_a) {
     var groupsCount = _a.groupsCount;
     return "calc((100% / ".concat(groupsCount, ") - (").concat(timeIntervalWidth, "px / ").concat(groupsCount, "))");
 }, function (_a) {

package/ui/Blocks/Scheduler/index.d.ts

@@ -1,2 +1,2 @@
 export { Scheduler as default } from './Scheduler';
-export type { GroupType, ActiveHours, TimeSlotType, SelectedTimeSlotType, TimeSlotDefinitionType } from './types';
+export type { GroupType, ActiveHours, TimeSlotType, SelectedTimeSlotType } from './types';

package/ui/Blocks/Scheduler/styles.d.ts

@@ -1 +1,2 @@
+export declare const Block: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
 export declare const Container: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;

package/ui/Blocks/Scheduler/styles.js

@@ -3,5 +3,6 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 import styled, { th } from '@xstyled/styled-components';
-export var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: white;\n  color: ", ";\n  overflow-x: auto;\n  text-align: center;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  max-height: 80vh;\n  border: 1px solid ", ";\n  user-select: none;\n}\n"], ["\n  background-color: white;\n  color: ", ";\n  overflow-x: auto;\n  text-align: center;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  max-height: 80vh;\n  border: 1px solid ", ";\n  user-select: none;\n}\n"])), th.color('typoPrimary'), th.color('lightGray6'));
-var templateObject_1;
+export var Block = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: white;\n  color: ", ";\n  overflow-x: auto;\n  overflow-y: hidden;\n  text-align: center;\n  display: flex;\n  flex-direction: column;\n  flex: 1 1 auto;\n  border: 1px solid ", ";\n  user-select: none;\n  width: 100%;\n}\n"], ["\n  background-color: white;\n  color: ", ";\n  overflow-x: auto;\n  overflow-y: hidden;\n  text-align: center;\n  display: flex;\n  flex-direction: column;\n  flex: 1 1 auto;\n  border: 1px solid ", ";\n  user-select: none;\n  width: 100%;\n}\n"])), th.color('typoPrimary'), th.color('lightGray6'));
+export var Container = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  flex: 1 1 auto;\n  overflow-y: hidden;\n"], ["\n  display: flex;\n  flex-direction: column;\n  flex: 1 1 auto;\n  overflow-y: hidden;\n"])));
+var templateObject_1, templateObject_2;

package/ui/Blocks/SideMenu/MenuItem.js

@@ -49,6 +49,6 @@ var MenuItem = function (_a) {
     }, [items, link]);
     return (_jsxs(_Fragment, { children: [separator && _jsx(ItemsSeparator, {}), _jsxs(MenuItemContainer, { ref: parentRef, "$isCompact": isCompact, "$lightMode": lightMode, hasChildren: hasChildren, isHovering: isHovering, children: [_jsxs(ItemLinkWrap, __assign({}, linkProps, { onMouseOver: handleMouseOver, exact: true, activeClassName: hasChildren ? 'selected' : undefined, onClick: toggleChildren, "$isCompact": isCompact, className: itemLinkWrapClassName, 
                         // @ts-ignore
-                        isActive: isActive, "$lightMode": lightMode, children: [_jsxs(ItemLabel, { "$isCompact": isCompact, isSubitem: isSubitem, children: [!isSubitem && icon && (_jsx(ItemIcon, { className: "mainIcon", "$isCompact": isCompact, children: typeof icon === 'string' ? _jsx(Icon, { icon: icon, fill: "none" }) : icon })), _jsx(Title, { variant: "semiBold", mt: 0, mb: 0, children: _jsx(OverflowWithEllipsis, { children: title }) })] }), !isCompact && hasChildren && _jsx(ItemDropdownArrow, { icon: "goDown", "$lightMode": lightMode })] })), isHovering && isCompact && hasChildren && !listExpandedItems && (_jsx(SubitemTooltip, { items: items, childRef: childRef, parentRef: parentRef, isLeftMenuOpen: isLeftMenuOpen, onCloseLeftMenu: onCloseLeftMenu, lightMode: lightMode }))] }), hasChildren && listExpandedItems && (_jsx(SubItemsWrap, { children: items === null || items === void 0 ? void 0 : items.map(function (item, index) { return (_jsx(MenuItem, __assign({ isCompact: isCompact, lightMode: lightMode }, item, { onCloseLeftMenu: onCloseLeftMenu, isSubitem: true }), "".concat(index))); }) }))] }));
+                        isActive: isActive, "$lightMode": lightMode, children: [_jsxs(ItemLabel, { "$isCompact": isCompact, isSubitem: isSubitem, children: [!isSubitem && icon && (_jsx(ItemIcon, { className: "mainIcon", "$isCompact": isCompact, children: typeof icon === 'string' ? _jsx(Icon, { icon: icon, fill: "none" }) : icon })), _jsx(Title, { variant: "semiBold", mt: 0, mb: 0, textAlign: "left", children: _jsx(OverflowWithEllipsis, { children: title }) })] }), !isCompact && hasChildren && _jsx(ItemDropdownArrow, { icon: "goDown", "$lightMode": lightMode })] })), isHovering && isCompact && hasChildren && !listExpandedItems && (_jsx(SubitemTooltip, { items: items, childRef: childRef, parentRef: parentRef, isLeftMenuOpen: isLeftMenuOpen, onCloseLeftMenu: onCloseLeftMenu, lightMode: lightMode }))] }), hasChildren && listExpandedItems && (_jsx(SubItemsWrap, { children: items === null || items === void 0 ? void 0 : items.map(function (item, index) { return (_jsx(MenuItem, __assign({ isCompact: isCompact, lightMode: lightMode }, item, { onCloseLeftMenu: onCloseLeftMenu, isSubitem: true }), "".concat(index))); }) }))] }));
 };
 export default memo(MenuItem);

package/ui/Forms/Input/stories/Input.stories.d.ts

@@ -14,4 +14,5 @@ export declare const WithIcon: Story;
 export declare const Loading: Story;
 export declare const WithSuffix: Story;
 export declare const Password: Story;
+export declare const Checkbox: Story;
 export declare const ForceFocus: Story;

package/ui/Forms/Input/stories/Input.stories.js

@@ -60,6 +60,12 @@ export var Password = {
         defaultValue: "Password text"
     },
 };
+export var Checkbox = {
+    args: {
+        type: 'checkbox',
+        label: 'checkbox input',
+    },
+};
 export var ForceFocus = {
     args: {
         type: 'text',

package/ui/Forms/Input/styles.js

@@ -29,10 +29,10 @@ export var IconsController = styled.div(templateObject_3 || (templateObject_3 =
 export var IconWrapper = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  svg {\n    :hover {\n      cursor: pointer;\n      color: blue2;\n    }\n  }\n"], ["\n  display: flex;\n  svg {\n    :hover {\n      cursor: pointer;\n      color: blue2;\n    }\n  }\n"])));
 export var StyledInput = styled.input.attrs(function (props) { return ({
     as: props.$asTextArea ? 'textarea' : 'input'
-}); })(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  ", ";\n  border: slim;\n  border-color: ", ";\n  box-sizing: border-box;\n  background-clip: padding-box;\n  padding-top: 0.5em;\n  padding-bottom: 0.5em;\n  padding-right: ", "em;\n  display: block;\n  width: 100%;\n  font-family: ", ";\n  font-size: 14px;\n  font-weight: normal;\n  transition: inputTransition;\n  resize: none;\n  overflow: hidden;\n\n  ~ ", " {\n    svg {\n      stroke: lightGray3;\n    }\n  }\n\n  ::placeholder {\n    color: gray1;\n    opacity: 1;\n  }\n\n  :focus {\n    background-color: white;\n    border-color: blue2;\n    color: typoPrimary;\n    outline: 0;\n\n    ~ ", " {\n      svg {\n        stroke: blue2;\n        color: blue2;\n      }\n    }\n  }\n  ", ";\n  ", ";\n  :disabled,\n  :disabled:hover {\n    background-color: bgLightGray1;\n    border-color: lightGray6;\n    color: neutral300;\n  }\n\n  text-overflow: ellipsis;\n\n  -moz-appearance: textfield;\n  appearance: textfield;\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n  }\n"], ["\n  ", ";\n  border: slim;\n  border-color: ", ";\n  box-sizing: border-box;\n  background-clip: padding-box;\n  padding-top: 0.5em;\n  padding-bottom: 0.5em;\n  padding-right: ", "em;\n  display: block;\n  width: 100%;\n  font-family: ", ";\n  font-size: 14px;\n  font-weight: normal;\n  transition: inputTransition;\n  resize: none;\n  overflow: hidden;\n\n  ~ ", " {\n    svg {\n      stroke: lightGray3;\n    }\n  }\n\n  ::placeholder {\n    color: gray1;\n    opacity: 1;\n  }\n\n  :focus {\n    background-color: white;\n    border-color: blue2;\n    color: typoPrimary;\n    outline: 0;\n\n    ~ ", " {\n      svg {\n        stroke: blue2;\n        color: blue2;\n      }\n    }\n  }\n  ", ";\n  ", ";\n  :disabled,\n  :disabled:hover {\n    background-color: bgLightGray1;\n    border-color: lightGray6;\n    color: neutral300;\n  }\n\n  text-overflow: ellipsis;\n\n  -moz-appearance: textfield;\n  appearance: textfield;\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n  }\n"])), system, function (_a) {
+}); })(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  ", ";\n  border: slim;\n  border-color: ", ";\n  box-sizing: border-box;\n  background-clip: padding-box;\n  padding-top: 0.5em;\n  padding-bottom: 0.5em;\n  padding-right: ", "em;\n  display: block;\n  width: ", ";\n  font-family: ", ";\n  font-size: 14px;\n  font-weight: normal;\n  transition: inputTransition;\n  resize: none;\n  overflow: hidden;\n\n  ~ ", " {\n    svg {\n      stroke: lightGray3;\n    }\n  }\n\n  ::placeholder {\n    color: gray1;\n    opacity: 1;\n  }\n\n  :focus {\n    background-color: white;\n    border-color: blue2;\n    color: typoPrimary;\n    outline: 0;\n\n    ~ ", " {\n      svg {\n        stroke: blue2;\n        color: blue2;\n      }\n    }\n  }\n  ", ";\n  ", ";\n  :disabled,\n  :disabled:hover {\n    background-color: bgLightGray1;\n    border-color: lightGray6;\n    color: neutral300;\n  }\n\n  text-overflow: ellipsis;\n\n  -moz-appearance: textfield;\n  appearance: textfield;\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n  }\n"], ["\n  ", ";\n  border: slim;\n  border-color: ", ";\n  box-sizing: border-box;\n  background-clip: padding-box;\n  padding-top: 0.5em;\n  padding-bottom: 0.5em;\n  padding-right: ", "em;\n  display: block;\n  width: ", ";\n  font-family: ", ";\n  font-size: 14px;\n  font-weight: normal;\n  transition: inputTransition;\n  resize: none;\n  overflow: hidden;\n\n  ~ ", " {\n    svg {\n      stroke: lightGray3;\n    }\n  }\n\n  ::placeholder {\n    color: gray1;\n    opacity: 1;\n  }\n\n  :focus {\n    background-color: white;\n    border-color: blue2;\n    color: typoPrimary;\n    outline: 0;\n\n    ~ ", " {\n      svg {\n        stroke: blue2;\n        color: blue2;\n      }\n    }\n  }\n  ", ";\n  ", ";\n  :disabled,\n  :disabled:hover {\n    background-color: bgLightGray1;\n    border-color: lightGray6;\n    color: neutral300;\n  }\n\n  text-overflow: ellipsis;\n\n  -moz-appearance: textfield;\n  appearance: textfield;\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n  }\n"])), system, function (_a) {
     var $isInvalid = _a.$isInvalid;
     return ($isInvalid ? th.color('red1') : th.color('lightGray6'));
-}, function (props) { return resolvePaddingRight(props); }, th('fonts.primary'), InputIcon, InputIcon, function (_a) {
+}, function (props) { return resolvePaddingRight(props); }, function (props) { return props.type !== 'checkbox' ? '100%' : 'auto'; }, th('fonts.primary'), InputIcon, InputIcon, function (_a) {
     var big = _a.big;
     return big
         ? css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n          font-size: 30px;\n          color: gray;\n          font-weight: semiBold;\n          padding: 0 0.5rem 0 1.25rem;\n        "], ["\n          font-size: 30px;\n          color: gray;\n          font-weight: semiBold;\n          padding: 0 0.5rem 0 1.25rem;\n        "]))) : '';