@mmb-digital/ds-lilly 1.0.0-alpha.3 → 1.0.0-alpha.5

package/cjs/ds-lilly.css

@@ -1032,8 +1032,12 @@ body {
   --minWidthBtn: 120px;
   --fontSizeSmallBtn: var(--fontSizeSmall);
   --lineHeightSmallBtn: var(--lineHeightMedium);
-  --paddingSmallBtn: var(--spaceXXSmall) var(--spaceXSmall);
+  --paddingSmallBtn: var(--spaceXXSmall) var(--spaceSmall);
   --minWidthSmallBtn: 0;
+  --fontSizeXSmallBtn: var(--fontSizeXSmall);
+  --lineHeightXSmallBtn: var(--lineHeightXXSmall);
+  --paddingXSmallBtn: var(--spaceXXSmall) var(--spaceXSmall);
+  --minWidthXSmallBtn: 0;
   --backgroundBtn: var(--bgBrandBold);
   --backgroundHoverBtn: var(--bgBrandBoldHover);
   --backgroundActiveBtn: var(--bgBrandBoldPressed);
@@ -1095,10 +1099,14 @@ body {
   --lineHeightOnlyIconBtn: 40px;
   --widthOnlyIconBtn: 40px;
   --minWidthOnlyIconBtn: 0;
-  --heightOnlyIconSmallBtn: 34px;
-  --lineHeightOnlyIconSmallBtn: 34px;
-  --widthOnlyIconSmallBtn: 34px;
+  --heightOnlyIconSmallBtn: 32px;
+  --lineHeightOnlyIconSmallBtn: 32px;
+  --widthOnlyIconSmallBtn: 32px;
   --minWidthOnlyIconSmallBtn: 0;
+  --heightOnlyIconXSmallBtn: 24px;
+  --lineHeightOnlyIconXSmallBtn: 24px;
+  --widthOnlyIconXSmallBtn: 24px;
+  --minWidthOnlyIconXSmallBtn: 0;
   --backgroundCard: var(--bgNeutralSubtlest);
   --borderCard: none;
   --borderRadiusCard: var(--borderRadiusMedium);
@@ -1465,6 +1473,15 @@ body {
   --fontSizeListMobileMenu: var(--fontSizeSmall);
   --marginTopItemMobileMenu: 0;
   --paddingLinkMobileMenu: var(--spaceMedium) var(--spaceXSmall);
+  --fontSizeTitleStepper: var(--fontSizeXSmall);
+  --fontSizeIconStepper: var(--fontSizeSmall);
+  --fontWeightIconStepper: var(--fontWeightBold);
+  --colorIconStepper: var(--fgInverseDefault);
+  --colorTitleStepper: var(--fgNeutralSubtlest);
+  --colorActiveTitleStepper: var(--fgNeutralDefault);
+  --fontWeightItemDoneTitleStepper: var(--fontWeightBold);
+  --leftLineStepper: calc(50% + 35px);
+  --widthLineStepper: calc(100% - 45px);
   --fontSizeAmount: var(--fontSizeMedium);
   --fontWeightAmount: var(--fontWeightNormal);
   --lineHeightAmount: var(--lineHeightMedium);
@@ -4106,6 +4123,16 @@ body.dark .l-mobilePanel--secondary .l-mobilePanel__close {
   margin-left: var(--spaceMedium);
 }
 
+.c-btn--xSmall {
+  font-size: var(--fontSizeXSmallBtn);
+  line-height: var(--lineHeightXSmallBtn);
+  min-width: var(--minWidthXSmallBtn);
+  padding: var(--paddingXSmallBtn);
+}
+.c-btn--xSmall + .c-btn--xSmall {
+  margin-left: var(--spaceMedium);
+}
+
 .c-btn--success {
   background: var(--backgroundSuccessBtn);
   border: var(--borderSuccessBtn);
@@ -4359,6 +4386,12 @@ body.dark .l-mobilePanel--secondary .l-mobilePanel__close {
   min-width: var(--minWidthOnlyIconSmallBtn);
   width: var(--widthOnlyIconSmallBtn);
 }
+.c-btn--onlyIcon.c-btn--xSmall {
+  height: var(--heightOnlyIconXSmallBtn);
+  line-height: var(--lineHeightOnlyIconXSmallBtn);
+  min-width: var(--minWidthOnlyIconXSmallBtn);
+  width: var(--widthOnlyIconXSmallBtn);
+}
 .c-btn--onlyIcon > .c-avatar {
   margin-top: 0;
 }
@@ -6842,6 +6875,89 @@ body.dark .l-mobilePanel--secondary .l-mobilePanel__close {
   color: var(--colorUserAuthLink);
 }
 
+.c-superModal {
+  background: var(--backgroundContentModal);
+  border-radius: 4px 4px 0 0;
+  bottom: 0;
+  box-shadow: 0 8px 16px rgba(25, 25, 25, 0.1), 0 0 24px rgba(25, 25, 25, 0.2);
+  display: flex;
+  flex-direction: column;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: 4600;
+}
+@media screen and (min-width: 800px) {
+  .c-superModal {
+    left: 16px;
+    right: 16px;
+    top: 16px;
+  }
+}
+
+.c-superModal__header {
+  align-items: center;
+  display: flex;
+  min-height: 76px;
+  padding: 16px 88px 16px 32px;
+  position: relative;
+}
+
+.c-superModal__header--fixed::after {
+  background: var(--backgroundContentModal);
+  bottom: 0;
+  content: "";
+  height: 1px;
+  left: 32px;
+  position: absolute;
+  right: 32px;
+}
+
+.c-superModal__body {
+  height: 100%;
+  overflow: hidden auto;
+  padding-left: 16px;
+  padding-right: 16px;
+  padding-top: 40px;
+}
+
+.c-superModal__content {
+  margin: 0 auto;
+  max-width: 760px;
+}
+
+.c-superModal__close {
+  height: var(--heightOnlyIconBtn);
+  min-width: var(--minWidthOnlyIconBtn);
+  padding: 0;
+  position: absolute;
+  right: 24px;
+  text-align: center;
+  top: 50%;
+  transform: translateY(-50%);
+  width: var(--widthOnlyIconBtn);
+}
+
+.c-superModal--scrolled .c-superModal__header {
+  box-shadow: 0 2px 4px rgba(25, 25, 25, 0.1), 0 0 4px rgba(25, 25, 25, 0.05);
+}
+.c-superModal--scrolled .c-superModal__headerTitle {
+  display: block;
+}
+.c-superModal--scrolled .c-superModal__header--fixed::after {
+  background: transparent;
+}
+.c-superModal--scrolled .c-superModal__header--fixed .c-superModal__headerTitle {
+  display: none;
+}
+
+@media screen and (min-width: 800px) {
+  .c-superModal {
+    left: 16px;
+    right: 16px;
+  }
+}
 .f-autocomplete {
   flex-direction: column;
 }
@@ -7203,9 +7319,11 @@ body.dark .l-mobilePanel--secondary .l-mobilePanel__close {
   padding-bottom: 3px;
 }
 .custom-datepicker .react-datepicker__triangle {
+  display: none;
   stroke: unset !important;
-  fill: var(--bgBrandDefaultHover) !important;
-  color: var(--bgBrandDefaultHover) !important;
+  margin-top: 1px;
+  fill: var(--fgInverseDefault) !important;
+  color: var(--fgInverseDefault) !important;
 }
 .custom-datepicker .react-datepicker-year-header {
   background: var(--bgBrandDefaultHover);
@@ -7218,6 +7336,7 @@ body.dark .l-mobilePanel--secondary .l-mobilePanel__close {
 }
 .custom-datepicker .react-datepicker__header {
   padding-top: 0;
+  border-bottom: none;
 }
 .custom-datepicker .react-datepicker__header__dropdown {
   background: var(--bgBrandDefaultHover);
@@ -7234,15 +7353,18 @@ body.dark .l-mobilePanel--secondary .l-mobilePanel__close {
   line-height: 26px;
   height: 26px;
   user-select: none;
+  color: var(--bgBrandBold);
 }
 .custom-datepicker .react-datepicker__month-option:hover, .custom-datepicker .react-datepicker__month-option:focus, .custom-datepicker .react-datepicker__year-option:hover, .custom-datepicker .react-datepicker__year-option:focus {
-  background: var(--bgBrandDefaultHover);
-  color: var(--bgBrandBold);
+  background: none;
   cursor: pointer;
   outline: 0;
+  font-weight: 600;
 }
-.custom-datepicker .react-datepicker__month-option--selected_month, .custom-datepicker .react-datepicker__month-option--selected_year, .custom-datepicker .react-datepicker__year-option--selected_month, .custom-datepicker .react-datepicker__year-option--selected_year {
-  color: var(--fgBrandDefault);
+.custom-datepicker .react-datepicker__month-option--selected_month, .custom-datepicker .react-datepicker__month-option--selected_year, .custom-datepicker .react-datepicker__month-option--selected_month:hover, .custom-datepicker .react-datepicker__month-option--selected_year:hover, .custom-datepicker .react-datepicker__year-option--selected_month, .custom-datepicker .react-datepicker__year-option--selected_year, .custom-datepicker .react-datepicker__year-option--selected_month:hover, .custom-datepicker .react-datepicker__year-option--selected_year:hover {
+  background: var(--bgBrandBold);
+  color: var(--fgInverseDefault);
+  font-weight: 500;
 }
 .custom-datepicker .react-datepicker__month-option--selected, .custom-datepicker .react-datepicker__year-option--selected {
   display: none;
@@ -7294,9 +7416,9 @@ body.dark .l-mobilePanel--secondary .l-mobilePanel__close {
   height: 2.25rem;
   line-height: 2.25rem;
   margin: 0.025rem;
-  color: var(--fgNeutralDefault);
+  color: var(--bgBrandBold);
 }
-.custom-datepicker .react-datepicker__month-text--outside-month, .custom-datepicker .react-datepicker__day--outside-month {
+.custom-datepicker .react-datepicker__month-text--outside-month, .custom-datepicker .react-datepicker__month-text--disabled, .custom-datepicker .react-datepicker__day--outside-month, .custom-datepicker .react-datepicker__day--disabled {
   color: var(--fgDisabledDefault);
 }
 .custom-datepicker .react-datepicker__month-text:hover, .custom-datepicker .react-datepicker__month-text:focus, .custom-datepicker .react-datepicker__day:hover, .custom-datepicker .react-datepicker__day:focus {
@@ -7306,6 +7428,13 @@ body.dark .l-mobilePanel--secondary .l-mobilePanel__close {
   cursor: pointer;
   outline: 0;
 }
+.custom-datepicker .react-datepicker__month-text--disabled:hover, .custom-datepicker .react-datepicker__month-text--disabled:focus, .custom-datepicker .react-datepicker__day--disabled:hover, .custom-datepicker .react-datepicker__day--disabled:focus {
+  background: unset !important;
+  cursor: default !important;
+  color: var(--fgDisabledDefault) !important;
+  outline: unset !important;
+  border-color: unset !important;
+}
 .custom-datepicker .react-datepicker__month-text--selected, .custom-datepicker .react-datepicker__month-text--today, .custom-datepicker .react-datepicker__month-text--keyboard-selected, .custom-datepicker .react-datepicker__month-text:hover, .custom-datepicker .react-datepicker__month-text:focus, .custom-datepicker .react-datepicker__day--selected, .custom-datepicker .react-datepicker__day--today, .custom-datepicker .react-datepicker__day--keyboard-selected, .custom-datepicker .react-datepicker__day:hover, .custom-datepicker .react-datepicker__day:focus {
   border-radius: 50% !important;
 }
@@ -7333,11 +7462,11 @@ body.dark .l-mobilePanel--secondary .l-mobilePanel__close {
   border-radius: 20px !important;
 }
 .custom-datepicker .react-datepicker__month-dropdown, .custom-datepicker .react-datepicker__year-dropdown {
-  border-radius: 0;
-  border: 0;
-  box-shadow: var(--boxShadowXXSmall);
-  background: var(--fgInverseDefault);
-  color: var(--fgNeutralDefault);
+  border-radius: var(--borderRadiusControl2);
+  border: var(--borderControl2);
+  box-shadow: none;
+  background: var(--fgInverseDefault) !important;
+  color: var(--fgNeutralDefault) !important;
 }
 .custom-datepicker .react-datepicker__month-read-view, .custom-datepicker .react-datepicker__year-read-view, .custom-datepicker .react-datepicker__month-option {
   visibility: visible !important;
@@ -8223,8 +8352,10 @@ body.dark .l-mobilePanel--secondary .l-mobilePanel__close {
 .m-stepper__icon {
   align-items: center;
   background: var(--bgNeutralDefault);
+  font-size: var(--fontSizeIconStepper);
+  font-weight: var(--fontWeightIconStepper);
   border-radius: 50%;
-  color: var(--fgNeutralDefault);
+  color: var(--colorIconStepper);
   display: flex;
   height: 32px;
   justify-content: center;
@@ -8238,23 +8369,25 @@ body.dark .l-mobilePanel--secondary .l-mobilePanel__close {
 }
 
 .m-stepper__title {
+  color: var(--colorTitleStepper);
   display: inline-block;
-  font-size: var(--fontSizeSmall);
+  font-size: var(--fontSizeTitleStepper);
   font-weight: normal;
   line-height: var(--lineHeightSmall);
   margin: var(--spaceXSmall) 0 0 0;
 }
 
 .m-stepper__line {
-  background: var(--bgNeutralDefault);
   display: block;
   height: 2px;
-  left: 50%;
+  left: var(--leftLineStepper);
   position: absolute;
   top: 16px;
-  width: 100%;
+  width: var(--widthLineStepper);
+  background: var(--bgNeutralDefault);
 }
 .m-stepper__line .col {
+  float: left;
   height: 2px;
 }
 
@@ -8262,16 +8395,38 @@ body.dark .l-mobilePanel--secondary .l-mobilePanel__close {
   font-weight: var(--fontWeightBold);
 }
 
+.m-stepper__item--active .m-stepper__title,
+.m-stepper__item--done .m-stepper__title {
+  color: var(--colorActiveTitleStepper);
+  font-weight: var(--fontWeightItemDoneTitleStepper);
+}
 .m-stepper__item--active .m-stepper__icon,
 .m-stepper__item--done .m-stepper__icon {
   background: var(--bgBrandBold);
-  color: var(--fgInverseDefault);
 }
-.m-stepper__item--active .m-stepper__line .col,
-.m-stepper__item--done .m-stepper__line .col {
+.m-stepper__item--active .m-stepper__line .col:first-child,
+.m-stepper__item--done .m-stepper__line .col:first-child {
   background: var(--bgBrandBold);
 }
 
+.m-stepper__item--active .m-stepper__line--with-substep {
+  background: none;
+}
+.m-stepper__item--active .m-stepper__line .col:first-child {
+  background: var(--bgBrandBold);
+}
+.m-stepper__item--active .m-stepper__line .col:nth-child(2) {
+  position: relative;
+}
+.m-stepper__item--active .m-stepper__line .col:nth-child(2)::before {
+  content: "";
+  position: absolute;
+  left: 10px;
+  height: 100%;
+  width: calc(100% - 10px);
+  background: var(--bgNeutralDefault);
+}
+
 .u-vHide {
   border: 0;
   clip: rect(0 0 0 0);
@@ -9161,7 +9316,7 @@ body.dark .l-mobilePanel--secondary .l-mobilePanel__close {
 /* Slider */
 .slick-loading .slick-list
 {
-    background: #fff url('assets/0d519c52dd8a14621a76.gif') center center no-repeat;
+    background: #fff url('assets/f4ea1400e397e6adb50d.gif') center center no-repeat;
 }
 
 /* Icons */
@@ -9171,8 +9326,8 @@ body.dark .l-mobilePanel--secondary .l-mobilePanel__close {
     font-weight: normal;
     font-style: normal;
 
-    src: url('assets/c466d7639c1a1dde4db7.eot');
-    src: url('assets/2eb49959d1f0bbb2d6b1.eot') format('embedded-opentype'), url('assets/4cc56d94b5081ca6ce97.woff') format('woff'), url('assets/3252d3689d760225064c.ttf') format('truetype'), url('assets/e016481bcf92544102fd.svg') format('svg');
+    src: url('assets/fd762a36308258602380.eot');
+    src: url('assets/037a36d28ebd87f051d3.eot') format('embedded-opentype'), url('assets/4189e2d90dd307138afb.woff') format('woff'), url('assets/f618d3159c3aa8488754.ttf') format('truetype'), url('assets/4d5a327a1a44681f2458.svg') format('svg');
 }
 /* Arrows */
 .slick-prev,