@mailstep/design-system 0.7.25-beta.14 → 0.7.25-beta.17

package/package.json

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

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  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  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: max-content;\n  flex: 0 0 auto;\n"], ["\n  height: ", "px;\n  display: flex;\n  border-bottom: 1px solid ", ";\n  width: max-content;\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  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  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: max-content;\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: max-content;\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/index.es.js

@@ -51550,7 +51550,7 @@ const Jke = (e = !0) => {
   height: ${qke}px;
   display: flex;
   border-bottom: 1px solid ${W.color("lightGray6")};
-  width: 100%;
+  width: max-content;
   flex: 0 0 auto;
 `, eOe = Z.div`
   background-color: ${({
@@ -51559,8 +51559,7 @@ const Jke = (e = !0) => {
   width: ${({
   groupsCount: e
 }) => `calc((100% / ${e}) - (${n0}px / ${e}))`};
-  max-width: 400px;
-  min-width: 300px;
+  min-width: 350px;
   height: 100%;
   font-size: 14px;
   font-weight: 600;
@@ -51757,7 +51756,7 @@ const cP = /* @__PURE__ */ Tn(aOe), oOe = Z.div`
   overflow-y: auto;
   display: flex;
   flex-direction: column;
-  width: 100%;
+  width: max-content;
 
   -ms-overflow-style: none;
   scrollbar-width: none;
@@ -51771,8 +51770,7 @@ const cP = /* @__PURE__ */ Tn(aOe), oOe = Z.div`
   width: ${({
   groupsCount: e
 }) => `calc((100% / ${e}) - (${n0}px / ${e}))`};
-  max-width: 400px;
-  min-width: 300px;
+  min-width: 350px;
   position: relative;
   background-color: ${({
   isSlotSelected: e

package/ui/index.umd.js

@@ -3581,13 +3581,12 @@ function print() { __p += __j.call(arguments, '') }
   height: ${$Oe}px;
   display: flex;
   border-bottom: 1px solid ${H.color("lightGray6")};
-  width: 100%;
+  width: max-content;
   flex: 0 0 auto;
 `,tPe=Y.div`
   background-color: ${({bg:e})=>e||H.color("bgLightGray")};
   width: ${({groupsCount:e})=>`calc((100% / ${e}) - (${id}px / ${e}))`};
-  max-width: 400px;
-  min-width: 300px;
+  min-width: 350px;
   height: 100%;
   font-size: 14px;
   font-weight: 600;
@@ -3658,7 +3657,7 @@ function print() { __p += __j.call(arguments, '') }
   overflow-y: auto;
   display: flex;
   flex-direction: column;
-  width: 100%;
+  width: max-content;
 
   -ms-overflow-style: none;
   scrollbar-width: none;
@@ -3670,8 +3669,7 @@ function print() { __p += __j.call(arguments, '') }
 `,bPe=Y.div`
   height: ${pf*ad}px;
   width: ${({groupsCount:e})=>`calc((100% / ${e}) - (${id}px / ${e}))`};
-  max-width: 400px;
-  min-width: 300px;
+  min-width: 350px;
   position: relative;
   background-color: ${({isSlotSelected:e})=>e?H.color("blue20"):""};
   cursor: ${({isSlotSelected:e,activeTime:t})=>e||!t?"default":"pointer"};