@dynamic-framework/ui-react 1.1.5 → 1.2.1

package/src/style/components/_m-card-account.scss

@@ -0,0 +1,15 @@
+.m-card-account {
+  // Card
+  --#{$prefix}card-border-width: 0px;
+  --#{$prefix}card-spacer-y: #{$spacer};
+  --#{$prefix}card-spacer-x: #{$spacer};
+  --#{$prefix}card-color: var(--#{$prefix}body-color);
+  // Card body
+  --#{$prefix}card-body-gap: #{$spacer};
+
+  .card-body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--#{$prefix}card-body-gap);
+  }
+}

package/src/style/components/_m-carousel.scss

@@ -0,0 +1,44 @@
+@import "@splidejs/splide/src/css/template/default/index";
+
+.m-carousel {
+  // Arrows
+  --#{$prefix}m-carousel-arrow-space: calc(var(--#{$prefix}ref-spacer-3) * -1);
+  // Pagination
+  --#{$prefix}m-carousel-pagination-bottom: calc(var(--#{$prefix}ref-spacer-3) * -1);
+  --#{$prefix}m-carousel-pagination-page-bg: var(--#{$prefix}secondary-100);
+  --#{$prefix}m-carousel-pagination-active-page-bg: var(--#{$prefix}secondary);
+  // :focus
+  --#{$prefix}m-carousel-focus-outline-color: var(--#{$prefix}focus-ring-color);
+
+  .m-carousel-arrows {
+
+    .m-carousel-arrow.m-carousel-arrow-prev {
+      left: var(--#{$prefix}m-carousel-arrow-space);
+    }
+    .m-carousel-arrow.m-carousel-arrow-next {
+      right: var(--#{$prefix}m-carousel-arrow-space);
+    }
+  }
+  .m-carousel-pagination {
+    bottom: var(--#{$prefix}m-carousel-pagination-bottom);
+
+    .m-carousel-pagination-page {
+      background-color: var(--#{$prefix}m-carousel-pagination-page-bg);
+
+      &.is-active {
+        background-color: var(--#{$prefix}m-carousel-pagination-active-page-bg);
+      }
+    }
+  }
+
+  &.splide.is-focus-in .m-carousel-arrow:focus,
+  &.splide.is-focus-in .m-carousel-pagination-page:focus {
+    outline-color: var(--#{$prefix}m-carousel-focus-outline-color);
+  }
+
+  .m-carousel-slide.is-active.is-visible {
+    > * {
+      // TODO: ASK. Exist active state on slide(?)
+    }
+  }
+}

package/src/style/components/_m-datepicker.scss

@@ -0,0 +1,224 @@
+@import "react-datepicker/src/stylesheets/datepicker";
+
+// stylelint-disable selector-class-pattern
+
+.react-datepicker {
+  --#{$prefix}m-datepicker-font-family: var(--#{$prefix}font-sans-serif);
+  --#{$prefix}m-datepicker-border: 0px;
+  --#{$prefix}m-datepicker-box-shadow: var(--#{$prefix}box-shadow);
+  --#{$prefix}m-datepicker-font-size: var(--#{$prefix}ref-spacer-3);
+
+  // Header variables
+  --#{$prefix}m-datepicker-header-gap: var(--#{$prefix}ref-spacer-3);
+  --#{$prefix}m-datepicker-header-padding: var(--#{$prefix}ref-spacer-3) var(--#{$prefix}ref-spacer-4);
+  --#{$prefix}m-datepicker-header-background-color: var(--#{$prefix}indigo-soft);
+  --#{$prefix}m-datepicker-header-border: 0;
+  --#{$prefix}m-datepicker-header-font-size: var(--#{$prefix}ref-fs-6);
+
+  --#{$prefix}m-datepicker-day-names-margin: 0;
+  --#{$prefix}m-datepicker-day-names-font-size: var(--#{$prefix}ref-spacer-3);
+
+  --#{$prefix}m-datepicker-day-name-weight: var(--#{$prefix}ref-fw-bold);
+  --#{$prefix}m-datepicker-day-name-margin: 0;
+  --#{$prefix}m-datepicker-day-name-size: 20px;
+  --#{$prefix}m-datepicker-day-name-color: var(--#{$prefix}gray-500);
+
+  // Calendar variables
+  --#{$prefix}m-datepicker-month-gap: var(--#{$prefix}ref-fs-subparagraph);
+  --#{$prefix}m-datepicker-month-padding: var(--#{$prefix}ref-spacer-3) var(--#{$prefix}ref-spacer-4) var(--#{$prefix}ref-spacer-4);
+  --#{$prefix}m-datepicker-month-margin: 0;
+
+  --#{$prefix}m-datepicker-week-gap: 1.875rem;
+
+  // Day variables
+  --#{$prefix}m-datepicker-day-margin: 0;
+  --#{$prefix}m-datepicker-day-font-size: var(--#{$prefix}ref-fs-subparagraph);
+  --#{$prefix}m-datepicker-day-size: 20px;
+  --#{$prefix}m-datepicker-day-radius: 100%;
+
+  --#{$prefix}m-datepicker-day-bg-hover: var(--#{$prefix}body);
+  --#{$prefix}m-datepicker-day-color-hover: var(--#{$prefix}info-100);
+
+  --#{$prefix}m-datepicker-day-selected-color: var(--#{$prefix}white);
+  --#{$prefix}m-datepicker-day-selected-bg: var(--#{$prefix}secondary-500);
+
+  --#{$prefix}m-datepicker-day-in-range-color: var(--#{$prefix}dark);
+  --#{$prefix}m-datepicker-day-in-range-bg: var(--#{$prefix}secondary-100);
+
+  --#{$prefix}m-datepicker-day-outside-month-color: var(--#{$prefix}gray-400);
+
+  --#{$prefix}m-datepicker-day-today-font-weight: var(--#{$prefix}ref-fw-normal);
+  --#{$prefix}m-datepicker-day-today-box-shadow: 0 0 0 2px inset var(--#{$prefix}secondary);
+
+  // Time variables
+  --#{$prefix}m-datepicker-time-container-margin: 0;
+  --#{$prefix}m-datepicker-time-container-align: center;
+  --#{$prefix}m-datepicker-time-input-width: 50%;
+  --#{$prefix}m-datepicker-time-input-margin: 0;
+  --#{$prefix}m-datepicker-time-input-align: center;
+
+  --#{$prefix}m-datepicker-time-input-padding: var(--#{$prefix}ref-spacer-3);
+  --#{$prefix}m-datepicker-time-input-gap: var(--#{$prefix}ref-spacer-2);
+  --#{$prefix}m-datepicker-time-input-label-weight: var(--#{$prefix}ref-fw-bold);
+  --#{$prefix}m-datepicker-time-input-label-color: var(--#{$prefix}gray-700);
+  --#{$prefix}m-datepicker-time-input-label-size: var(--#{$prefix}ref-fs-small);
+
+  font-family: var(--#{$prefix}m-datepicker-font-family);
+  font-size: var(--#{$prefix}m-datepicker-font-size);
+  border: var(--#{$prefix}m-datepicker-border);
+  box-shadow: var(--#{$prefix}m-datepicker-box-shadow);
+
+  .react-datepicker__header {
+    display: flex;
+    flex-direction: column;
+    gap: var(--#{$prefix}m-datepicker-header-gap);
+    padding: var(--#{$prefix}m-datepicker-header-padding);
+    font-size: var(--#{$prefix}m-datepicker-header-font-size);
+    background-color: var(--#{$prefix}m-datepicker-header-background-color);
+    border: var(--#{$prefix}m-datepicker-header-border);
+
+    .react-datepicker__day-names {
+      display: flex;
+      justify-content: space-between;
+      margin: var(--#{$prefix}m-datepicker-day-names-margin);
+      font-size: var(--#{$prefix}m-datepicker-day-names-font-size);
+    }
+    .react-datepicker__day-name {
+      width: var(--#{$prefix}m-datepicker-day-name-size);
+      height: var(--#{$prefix}m-datepicker-day-name-size);
+      margin: var(--#{$prefix}m-datepicker-day-name-margin);
+      font-weight: var(--#{$prefix}m-datepicker-day-name-weight);
+      line-height: var(--#{$prefix}m-datepicker-day-name-size);
+      color: var(--#{$prefix}m-datepicker-day-name-color);
+    }
+  }
+
+  .react-datepicker__month {
+    display: flex;
+    flex-direction: column;
+    gap: var(--#{$prefix}m-datepicker-month-gap);
+    padding: var(--#{$prefix}m-datepicker-month-padding);
+    margin: var(--#{$prefix}m-datepicker-month-margin);
+
+    .react-datepicker__week {
+      display: flex;
+      gap: var(--#{$prefix}m-datepicker-week-gap);
+    }
+
+    .react-datepicker__day {
+      width: var(--#{$prefix}m-datepicker-day-size);
+      height: var(--#{$prefix}m-datepicker-day-size);
+      margin: var(--#{$prefix}m-datepicker-day-margin);
+      font-size: var(--#{$prefix}m-datepicker-day-font-size);
+      line-height: var(--#{$prefix}m-datepicker-day-size);
+    }
+  }
+
+  // Hover state
+  .react-datepicker__day,
+  .react-datepicker__month-text,
+  .react-datepicker__quarter-text,
+  .react-datepicker__year-text {
+    &:not(
+    .react-datepicker__day--selected,
+    .react-datepicker__month-text--selected,
+    .react-datepicker__quarter-text--selected,
+    .react-datepicker__year-text--selected):hover {
+      color: var(--#{$prefix}m-datepicker-day-bg-hover);
+      background-color: var(--#{$prefix}m-datepicker-day-color-hover);
+      border-radius: var(--#{$prefix}m-datepicker-day-radius);
+    }
+  }
+
+  // Selected single item
+  .react-datepicker__day--selected,
+  .react-datepicker__month--selected,
+  .react-datepicker__quarter--selected,
+  .react-datepicker__year--selected {
+    color: var(--#{$prefix}m-datepicker-day-selected-color);
+    background-color: var(--#{$prefix}m-datepicker-day-selected-bg);
+    border-radius: var(--#{$prefix}m-datepicker-day-radius);
+  }
+
+  .react-datepicker__day--selected {
+    &.react-datepicker__day--in-range.react-datepicker__day--range-start,
+    &.react-datepicker__day--in-selecting-range.react-datepicker__day--selecting-range-start {
+      color: var(--#{$prefix}m-datepicker-day-selected-color);
+      background-color: var(--#{$prefix}m-datepicker-day-selected-bg);
+    }
+  }
+  .react-datepicker__day {
+    &.react-datepicker__day--in-range.react-datepicker__day--range-end,
+    &.react-datepicker__day--in-selecting-range.react-datepicker__day--selecting-range-end {
+      color: var(--#{$prefix}m-datepicker-day-selected-color);
+      background-color: var(--#{$prefix}m-datepicker-day-selected-bg);
+    }
+  }
+
+  .react-datepicker__day--in-range,
+  .react-datepicker__month-text--in-range,
+  .react-datepicker__quarter-text--in-range,
+  .react-datepicker__year-text--in-range,
+  .react-datepicker__day--in-selecting-range,
+  .react-datepicker__month-text--in-selecting-range,
+  .react-datepicker__quarter-text--in-selecting-range,
+  .react-datepicker__year-text--in-selecting-range,
+  .react-datepicker__day--keyboard-selected,
+  .react-datepicker__month-text--keyboard-selected,
+  .react-datepicker__quarter-text--keyboard-selected,
+  .react-datepicker__year-text--keyboard-selected {
+    color: var(--#{$prefix}m-datepicker-day-in-range-color);
+    background-color: var(--#{$prefix}m-datepicker-day-in-range-bg);
+    border-radius: var(--#{$prefix}m-datepicker-day-radius);
+  }
+
+  .react-datepicker__day--outside-month {
+    color: var(--#{$prefix}m-datepicker-day-outside-month-color);
+  }
+
+  /* Start time selector */
+  .react-datepicker__input-time-container {
+    width: 100%;
+    margin: var(--#{$prefix}m-datepicker-time-container-margin);
+    text-align: var(--#{$prefix}m-datepicker-time-container-align);
+    border-top: var(--#{$prefix}border-width) solid var(--#{$prefix}light);
+
+    .react-datepicker-time__caption {
+      display: none;
+    }
+
+    .react-datepicker-time__input-container {
+      width: 100%;
+
+      .react-datepicker-time__input {
+        width: var(--#{$prefix}m-datepicker-time-input-width);
+        margin: var(--#{$prefix}m-datepicker-time-input-margin);
+        text-align: var(--#{$prefix}m-datepicker-time-input-align);
+        outline: 0;
+      }
+    }
+  }
+
+  /* End time selector */
+
+  .react-datepicker__day--today {
+    font-weight: var(--#{$prefix}m-datepicker-day-today-font-weight);
+    border-radius: var(--#{$prefix}m-datepicker-day-radius);
+    box-shadow: var(--#{$prefix}m-datepicker-day-today-box-shadow);
+  }
+
+  .m-datepicker-time {
+    gap: var(--#{$prefix}m-datepicker-time-input-gap);
+    padding: var(--#{$prefix}m-datepicker-time-input-padding);
+    .m-datepicker-time-label {
+      font-size: var(--#{$prefix}m-datepicker-time-input-label-size);
+      font-weight: var(--#{$prefix}m-datepicker-time-input-label-weight);
+      color: var(--#{$prefix}m-datepicker-time-input-label-color);
+    }
+  }
+  .m-datepicker-header {
+    font-size: var(--#{$prefix}ref-fs-6);
+  }
+}
+
+// stylelint-enable selector-class-pattern

package/src/style/components/_m-monthpicker.scss

@@ -0,0 +1,90 @@
+// stylelint-disable selector-class-pattern
+
+.react-datepicker.m-month-picker {
+  // Month variables
+  --#{$prefix}m-monthpicker-header-padding: var(--#{$prefix}ref-spacer-3) var(--#{$prefix}ref-spacer-2) 0;
+  --#{$prefix}m-monthpicker-font-weight: var(--#{$prefix}ref-fw-normal);
+  --#{$prefix}m-monthpicker-header-color: var(--#{$prefix}white);
+  --#{$prefix}m-monthpicker-header-bg: var(--#{$prefix}dark);
+
+  --#{$prefix}m-monthpicker-month-gap: 0;
+  --#{$prefix}m-monthpicker-month-padding: var(--#{$prefix}ref-spacer-2) var(--#{$prefix}ref-spacer-4) var(--#{$prefix}ref-spacer-3);
+  --#{$prefix}m-monthpicker-month-color: var(--#{$prefix}white);
+  --#{$prefix}m-monthpicker-month-bg: var(--#{$prefix}dark);
+
+  --#{$prefix}m-monthpicker-month-today-color: var(--#{$prefix}white);
+  --#{$prefix}m-monthpicker-month-selected-bg: var(--#{$prefix}gray-500);
+  --#{$prefix}m-monthpicker-month-selected-box-shadow: 0 0 0 1px inset var(--#{$prefix}gray-100);
+
+  --#{$prefix}m-monthpicker-month-hover-bg: var(--#{$prefix}gray-700);
+
+  --#{$prefix}m-monthpicker-month-wrapper-gap: var(--#{$prefix}ref-spacer-2);
+  --#{$prefix}m-monthpicker-month-wrapper-font-size: var(--#{$prefix}-ref-fs-small);
+
+  --#{$prefix}m-monthpicker-single-month-width: 46px;
+  --#{$prefix}m-monthpicker-single-month-padding: var(--#{$prefix}ref-spacer-2);
+  --#{$prefix}m-monthpicker-single-month-margin: 0;
+  --#{$prefix}m-monthpicker-single-month-text-transform: capitalize;
+  --#{$prefix}m-monthpicker-single-month-radius: var(--#{$prefix}ref-spacer-4);
+
+  --#{$prefix}m-monthpicker-single-month-after-display: ".";
+  --#{$prefix}m-monthpicker-single-month-after-content: ".";
+
+  --#{$prefix}m-datepicker-triangle-color: var(--#{$prefix}dark);
+
+  font-family: var(--#{$prefix}m-datepicker-font-family);
+  border: var(--#{$prefix}m-datepicker-border);
+  box-shadow: var(--#{$prefix}m-datepicker-box-shadow);
+
+  .react-datepicker__header {
+    padding: var(--#{$prefix}m-monthpicker-header-padding);
+    font-weight: var(--#{$prefix}m-monthpicker-font-weight);
+    color: var(--#{$prefix}m-monthpicker-header-color);
+    background-color: var(--#{$prefix}m-monthpicker-header-bg);
+  }
+
+  .react-datepicker__month.react-datepicker__monthPicker,
+  .react-datepicker__header.react-datepicker-year-header {
+    gap: var(--#{$prefix}m-monthpicker-month-gap);
+    padding: var(--#{$prefix}m-monthpicker-month-padding);
+    color: var(--#{$prefix}m-monthpicker-month-color);
+    background-color: var(--#{$prefix}m-monthpicker-month-bg);
+
+  }
+  .react-datepicker__month--selected,
+  .react-datepicker__month-text--in-range,
+  .react-datepicker__month-text--in-selecting-range,
+  .react-datepicker__month-text--keyboard-selected {
+    color: var(--#{$prefix}m-monthpicker-month-today-color);
+    background-color: var(--#{$prefix}m-monthpicker-month-selected-bg);
+    box-shadow: var(--#{$prefix}m-monthpicker-month-selected-box-shadow);
+  }
+  .react-datepicker__month-text:hover {
+    background-color: var(--#{$prefix}m-monthpicker-month-hover-bg);
+  }
+  .react-datepicker__month-wrapper {
+    display: flex;
+    gap: var(--#{$prefix}m-monthpicker-month-wrapper-gap);
+    font-size: var(--#{$prefix}m-monthpicker-month-wrapper-font-size);
+    .react-datepicker__month-text {
+      width: var(--#{$prefix}m-monthpicker-single-month-width);
+      padding: var(--#{$prefix}m-monthpicker-single-month-padding);
+      margin: var(--#{$prefix}m-monthpicker-single-month-margin);
+      text-transform: var(--#{$prefix}m-monthpicker-single-month-text-transform);
+      border-radius: var(--#{$prefix}m-monthpicker-single-month-radius);
+      &::after {
+        display: var(--#{$prefix}m-monthpicker-single-month-after-display);
+        content: var(--#{$prefix}m-monthpicker-single-month-after-content);
+      }
+    }
+  }
+  .react-datepicker__triangle {
+    &::after,
+    &::before {
+      top: 0;
+      border-bottom-color: var(--#{$prefix}m-datepicker-triangle-color);
+    }
+  }
+}
+
+// stylelint-enable selector-class-pattern

package/src/style/components/_m-paginator.scss

@@ -0,0 +1,98 @@
+.m-pagination {
+  // Page link
+  --#{$prefix}m-pagination-page-item-size: 2.125rem;
+  --#{$prefix}m-pagination-page-link-bg: transparent;
+  --#{$prefix}m-pagination-page-border-radius: 50%;
+  // Arrow
+  --#{$prefix}m-pagination-arrow-font-size: var(--#{$prefix}ref-fs-subparagraph);
+  --#{$prefix}m-pagination-arrow-padding-y: var(--#{$prefix}ref-spacer-1);
+  --#{$prefix}m-pagination-arrow-padding-x: var(--#{$prefix}ref-spacer-2);
+  --#{$prefix}m-pagination-arrow-border-radius: var(--#{$prefix}border-radius);
+  --#{$prefix}m-pagination-arrow-color: var(--#{$prefix}secondary);
+  // Arrow :focus
+  --#{$prefix}m-pagination-focus-arrow-bg: var(--#{$prefix}secondary-100);
+  // Arrow previous
+  --#{$prefix}m-pagination-arrow-prev-icon-bg-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%234848b7" class="bi bi-chevron-left" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/></svg>');
+  --#{$prefix}m-pagination-disabled-arrow-prev-icon-bg-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23a1a1b5" class="bi bi-chevron-left" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/></svg>');
+  // Arrow next
+  --#{$prefix}m-pagination-arrow-next-icon-bg-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%234848b7" class="bi bi-chevron-right" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/></svg>');
+  --#{$prefix}m-pagination-disabled-arrow-next-icon-bg-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23a1a1b5" class="bi bi-chevron-right" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/></svg>');
+  margin: 0;
+
+  .page-item {
+    min-width: var(--#{$prefix}m-pagination-page-item-size);
+    min-height: var(--#{$prefix}m-pagination-page-item-size);
+
+    &:not(.active, :hover) .page-link {
+      background-color: var(--#{$prefix}m-pagination-page-link-bg);
+    }
+  }
+
+  .m-arrow .page-link {
+    min-width: fit-content;
+    padding: var(--#{$prefix}m-pagination-arrow-padding-y) var(--#{$prefix}m-pagination-arrow-padding-x);
+    font-size: var(--#{$prefix}m-pagination-arrow-font-size);
+    border-radius: var(--#{$prefix}m-pagination-arrow-border-radius);
+
+    &:focus {
+      background-color: var(--#{$prefix}m-pagination-focus-arrow-bg);
+    }
+
+    &::after,
+    &::before {
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-repeat: no-repeat;
+      background-size: var(--#{$prefix}m-pagination-arrow-font-size);
+    }
+  }
+
+  .m-arrow:is(.m-arrow-prev, .m-arrow-next):not(.disabled) .page-link {
+    color: var(--#{$prefix}m-pagination-arrow-color);
+  }
+
+  // Arrow prev
+  .m-arrow.m-arrow-prev .page-link::before {
+    min-width: var(--#{$prefix}m-pagination-arrow-font-size);
+    min-height: var(--#{$prefix}m-pagination-arrow-font-size);
+    margin-right: var(--#{$prefix}ref-spacer-1);
+    content: "";
+    background-image: var(--#{$prefix}m-pagination-arrow-prev-icon-bg-image);
+    background-position: center left;
+  }
+
+  // Arrow next
+  .m-arrow.m-arrow-next .page-link::after {
+    width: var(--#{$prefix}m-pagination-arrow-font-size);
+    height: var(--#{$prefix}m-pagination-arrow-font-size);
+    margin-left: var(--#{$prefix}ref-spacer-1);
+    content: "";
+    background-image: var(--#{$prefix}m-pagination-arrow-next-icon-bg-image);
+    background-position: center right;
+  }
+
+  // Hide default icon
+  .m-arrow:is(.m-arrow-next, .m-arrow-prev).no-label .page-link > span {
+    display: none;
+  }
+
+  .m-arrow-prev.disabled .page-link::before {
+    background-image: var(--#{$prefix}m-pagination-disabled-arrow-prev-icon-bg-image);
+  }
+
+  .m-arrow-next.disabled .page-link::after {
+    background-image: var(--#{$prefix}m-pagination-disabled-arrow-next-icon-bg-image);
+  }
+
+  .page-link {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    border-radius: var(--#{$prefix}m-pagination-page-border-radius);
+  }
+}

package/src/style/components/_m-stepper.scss

@@ -0,0 +1,156 @@
+.m-stepper {
+  /* Icon container */
+  --#{$prefix}m-step-icon-container-color: var(--#{$prefix}secondary);
+  --#{$prefix}m-step-icon-container-background-color: var(--#{$prefix}white);
+  --#{$prefix}m-step-icon-container-size: 34px;
+  --#{$prefix}m-step-icon-container-border-width: 1px;
+  --#{$prefix}m-step-icon-container-border-color: var(--#{$prefix}secondary);
+  --#{$prefix}m-step-icon-container-border-radius: 100%;
+  --#{$prefix}m-step-icon-container-z-index: 3;
+
+  /* Base step */
+  --#{$prefix}m-step-label-height: 3rem;
+  --#{$prefix}m-step-icon-size: 1.125rem;
+  --#{$prefix}m-step-gap: .5rem;
+  --#{$prefix}m-step-z-index: 2;
+
+  /* Checked step */
+  --#{$prefix}m-step-check-text-color: var(--#{$prefix}white);
+  --#{$prefix}m-step-check-background-color: var(--#{$prefix}success);
+  --#{$prefix}m-step-check-border-color: var(--#{$prefix}success);
+
+  /* Current step */
+  --#{$prefix}m-step-current-text-color: var(--#{$prefix}white);
+  --#{$prefix}m-step-current-background-color: var(--#{$prefix}secondary);
+
+  /* Step line */
+  --#{$prefix}m-step-line-stroke: 1px;
+  --#{$prefix}m-step-line-color: var(--#{$prefix}secondary);
+
+  /* Step label */
+  --#{$prefix}m-step-label-padding: var(--#{$prefix}ref-spacer-4);
+  --#{$prefix}m-vertical-step-label-padding: var(--#{$prefix}ref-spacer-3);
+
+
+  position: relative;
+  display: flex;
+
+  .m-step {
+    display: flex;
+    flex: 1 1 0;
+    flex-direction: column;
+    gap: var(--#{$prefix}m-step-gap);
+
+    .m-step-value {
+      position: relative;
+      display: flex;
+      justify-content: center;
+    }
+
+    .m-step-icon-container {
+      position: relative;
+      z-index: var(--#{$prefix}m-step-icon-container-z-index);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: var(--#{$prefix}m-step-icon-container-size);
+      height: var(--#{$prefix}m-step-icon-container-size);
+
+      color: var(--#{$prefix}m-step-icon-container-color);
+      background-color: var(--#{$prefix}m-step-icon-container-background-color);
+      border: var(--#{$prefix}m-step-icon-container-border-width) solid var(--#{$prefix}m-step-icon-container-border-color);
+      border-radius: var(--#{$prefix}m-step-icon-container-border-radius);
+    }
+
+    .m-step-check {
+      color: var(--#{$prefix}m-step-check-text-color);
+      background-color: var(--#{$prefix}m-step-check-background-color);
+      border-color: var(--#{$prefix}m-step-check-border-color);
+    }
+
+    .m-step-current {
+      color: var(--#{$prefix}m-step-current-text-color);
+      background-color: var(--#{$prefix}m-step-current-background-color);
+    }
+
+    .m-step-value::after {
+      position: absolute;
+      top: 50%;
+      z-index: var(--#{$prefix}m-step-z-index);
+      width: 100%;
+      height: var(--#{$prefix}m-step-line-stroke);
+      content: "";
+      background-color: var(--#{$prefix}m-step-line-color);
+    }
+
+    &:first-child .m-step-value::after {
+      left: 50%;
+      z-index: var(--#{$prefix}m-step-z-index);
+      width: 50%;
+    }
+
+    &:last-child .m-step-value::after {
+      right: 50%;
+      z-index: var(--#{$prefix}m-step-z-index);
+      width: 50%;
+    }
+
+    .m-step-label {
+      padding-right: var(--#{$prefix}m-step-label-padding);
+      padding-left: var(--#{$prefix}m-step-label-padding);
+      text-align: center;
+    }
+  }
+
+  &.is-vertical {
+    flex-direction: column;
+
+    .m-step {
+      flex-direction: row;
+      align-items: center;
+
+      .m-step-value {
+        align-items: center;
+        height: 100%;
+      }
+
+      .m-step-label {
+        display: flex;
+        flex-grow: 1;
+        align-items: center;
+        min-height: var(--#{$prefix}m-step-label-height);
+        padding: var(--#{$prefix}m-vertical-step-label-padding);
+        text-align: left;
+      }
+
+      .m-step-value::after {
+        position: absolute;
+        top: 0;
+        left: calc(50% - var(--#{$prefix}m-step-line-stroke));
+        z-index: var(--#{$prefix}m-step-z-index);
+        width: 0;
+        height: 100%;
+        content: "";
+        border: var(--#{$prefix}m-step-icon-container-border-width) solid var(--#{$prefix}m-step-icon-container-border-color);
+      }
+
+      &:first-child .m-step-value::after {
+        top: 50%;
+        z-index: var(--#{$prefix}m-step-z-index);
+        width: 0;
+        height: 50%;
+      }
+
+      &:last-child .m-step-value::after {
+        z-index: var(--#{$prefix}m-step-z-index);
+        width: 0;
+        height: 50%;
+      }
+    }
+  }
+
+  .m-step-icon {
+    display: flex;
+    font-size: var(--#{$prefix}m-step-icon-size);
+  }
+}

package/src/style/components/_m-timepicker.scss

@@ -0,0 +1,37 @@
+.m-datepicker-time {
+  --#{$prefix}m-datepicker-time-m-input: 100%;
+  --#{$prefix}m-datepicker-webkit-time-color: var(--#{$prefix}black);
+  --#{$prefix}m-datepicker-webkit-time-align: left;
+  --#{$prefix}m-datepicker-webkit-edit-text-padding: 2px;
+
+  --#{$prefix}m-datepicker-webkit-edit-ampm-padding: 0 4px;
+  --#{$prefix}m-datepicker-webkit-edit-ampm-color: var(--#{$prefix}secondary-900);
+  --#{$prefix}m-datepicker-webkit-edit-ampm-bg: var(--#{$prefix}secondary-100);
+  --#{$prefix}m-datepicker-webkit-edit-ampm-radius: 4px;
+
+  --#{$prefix}m-datepicker-calendar-picker-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-clock' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z'/%3E%3Cpath d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z'/%3E%3C/svg%3E");
+
+  .m-input {
+    width: var(--#{$prefix}m-datepicker-time-m-input);
+  }
+  // stylelint-disable selector-no-qualifying-type
+  input[type="time"] {
+    &::-webkit-datetime-edit {
+      color: var(--#{$prefix}m-datepicker-webkit-time-color);
+      text-align: var(--#{$prefix}m-datepicker-webkit-time-align);
+    }
+    &::-webkit-datetime-edit-text {
+      padding-inline: var(--#{$prefix}m-datepicker-webkit-edit-text-padding);
+    }
+    &::-webkit-datetime-edit-ampm-field {
+      padding: var(--#{$prefix}m-datepicker-webkit-edit-ampm-padding);
+      color: var(--#{$prefix}m-datepicker-webkit-edit-ampm-color);
+      background-color: var(--#{$prefix}m-datepicker-webkit-edit-ampm-bg);
+      border-radius: var(--#{$prefix}m-datepicker-webkit-edit-ampm-radius);
+    }
+    &::-webkit-calendar-picker-indicator {
+      background-image: var(--#{$prefix}m-datepicker-calendar-picker-icon);
+    }
+  }
+
+}

package/src/style/dynamic-ui-all.scss

@@ -0,0 +1,3 @@
+@import "@dynamic-framework/ui/src/style/dynamic-ui";
+
+@import "dynamic-ui-react";

package/src/style/dynamic-ui.scss

@@ -0,0 +1 @@
+@import "@dynamic-framework/ui/src/style/dynamic-ui";