npm - @rolster/styles-foundations - Versions diffs - 2.7.3 → 3.0.1 - Mend

@rolster/styles-foundations 2.7.3 → 3.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (192) hide show

package/dist/design-system-bordered.css ADDED Viewed

@@ -0,0 +1,4868 @@
+.rls-design-system-bordered * {
+  scrollbar-width: thin;
+  scrollbar-color: var(--rls-app-color-500) var(--rls-app-color-200);
+}
+.rls-design-system-bordered .rls-app__body {
+  --pvt-navbar-dimension: 0rem;
+  --pvt-navbar-width: var(--rlc-app-navbar-width, 160rem);
+  --pvt-navbar-width-condense: 36rem;
+  --pvt-navbar-snackbar: var(--pvt-navbar-width);
+  display: flex;
+  flex-direction: column;
+  padding: 0rem;
+  margin: 0rem;
+  width: var(--rls-html-max-width);
+  height: var(--rls-html-max-height);
+  overflow: hidden;
+  z-index: var(--rls-z-index-8);
+}
+.rls-design-system-bordered .rls-app__body--navbar-snackbar {
+  --rlc-snackbar-left: calc(50% + calc(var(--pvt-navbar-snackbar) / 2));
+}
+.rls-design-system-bordered .rls-app__body--navbar-condense {
+  --pvt-navbar-width: var(--pvt-navbar-width-condense);
+  --pvt-nabvar-snackbar: var(--pvt-navbar-width-condense);
+}
+.rls-design-system-bordered .rls-app__header {
+  --rlc-toolbar-height: 100%;
+  --pvt-header-height: var(--rlc-app-header-height, var(--rls-sizing-x28));
+  position: relative;
+  width: 100%;
+  height: var(--pvt-header-height);
+  box-sizing: border-box;
+  z-index: var(--rls-z-index-8);
+  background: var(--rlc-app-header-background, var(--rls-app-color-050));
+}
+.rls-design-system-bordered .rls-app__header + .rls-app__page,
+.rls-design-system-bordered .rls-app__header + .rls-app__content {
+  height: calc(var(--rls-html-max-height) - var(--pvt-header-height));
+}
+.rls-design-system-bordered .rls-app__content {
+  position: relative;
+  width: 100%;
+  height: var(--rls-html-max-height);
+  margin: 0rem;
+  padding: 0rem;
+  overflow: auto;
+  box-sizing: border-box;
+  background: var(--rlc-app-content-background, var(--rls-app-color-050));
+}
+.rls-design-system-bordered .rls-app__page {
+  --pvt-toolbar-height: var(
+    --rls-app-page-toolbar-height,
+    var(--rls-sizing-x32)
+  );
+  position: relative;
+  display: flex;
+  width: 100%;
+  height: var(--rls-html-max-height);
+  margin: 0rem;
+  padding: 0rem;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+.rls-design-system-bordered .rls-app__page__nav {
+  position: relative;
+  width: var(--pvt-navbar-width);
+  height: 100%;
+  margin: 0rem;
+  padding: 0rem;
+  background: var(--rlc-app-navbar-background, var(--rls-theme-color-200));
+  transition: width 280ms var(--rls-acceleration-curve);
+}
+.rls-design-system-bordered .rls-app__page__nav + .rls-app__page__body {
+  --rlc-snackbar-left: calc(50% + calc(var(--pvt-navbar-width) / 2));
+  width: calc(100% - var(--pvt-navbar-width));
+}
+.rls-design-system-bordered .rls-app__page__nav__content {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background: var(
+    --rlc-app-navbar-content-background,
+    rgba(255, 255, 255, 0.84)
+  );
+  backdrop-filter: blur(2px);
+  overflow-x: hidden;
+  overflow-y: auto;
+  box-sizing: border-box;
+  border-right: var(--rls-app-border-1-200);
+}
+.rls-design-system-bordered .rls-app__page__nav__menu {
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--rls-sizing-x8);
+}
+.rls-design-system-bordered .rls-app__page__nav__option {
+  display: flex;
+  align-items: center;
+  column-gap: var(--rls-sizing-x6);
+  padding: var(--rls-sizing-x4) var(--rls-sizing-x6);
+  cursor: default;
+  border-radius: var(--rls-sizing-x4);
+  color: var(--rls-app-color-700);
+  border: var(--rls-app-border-1-200);
+}
+.rls-design-system-bordered .rls-app__page__nav__option:hover {
+  color: var(--rls-app-color-900);
+  background: var(--rls-app-color-100);
+}
+.rls-design-system-bordered .rls-app__page__nav__option > span {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.rls-design-system-bordered .rls-app__page__body {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  margin: 0rem;
+  padding: 0rem;
+  overflow: hidden;
+  box-sizing: border-box;
+  transition: width 240ms var(--rls-acceleration-curve);
+}
+.rls-design-system-bordered .rls-app__page__toolbar {
+  position: absolute;
+  top: 0rem;
+  display: flex;
+  width: 100%;
+  height: var(--pvt-toolbar-height);
+  justify-content: space-between;
+  align-items: center;
+  column-gap: var(--rls-sizing-x8);
+  padding: var(--rlc-app-toolbar-padding, 0rem var(--rls-sizing-x12));
+  box-sizing: border-box;
+  z-index: var(--rls-z-index-8);
+  background: var(--rls-app-color-050);
+  border-bottom: var(--rls-app-border-1-200);
+}
+.rls-design-system-bordered .rls-app__page__toolbar + .rls-app__page__content {
+  padding: calc(var(--pvt-toolbar-height) + var(--rls-sizing-x8))
+    var(--rls-sizing-x8) 0rem var(--rls-sizing-x8);
+}
+.rls-design-system-bordered .rls-app__page__content {
+  display: flex;
+  flex-direction: column;
+  width: calc(100% - var(--rls-sizing-x16));
+  height: 100%;
+  padding: var(--rls-sizing-x8) var(--rls-sizing-x8) 0rem var(--rls-sizing-x8);
+  overflow-y: auto;
+  overflow-x: hidden;
+  background: var(--rls-app-color-050);
+}
+.rls-design-system-bordered .rls-divider {
+  height: var(--rlc-divider-height, var(--rls-sizing-x1));
+  background-image: linear-gradient(
+    to right,
+    var(--rlc-divider-background, var(--rls-app-color-300)) 50%,
+    rgba(255, 255, 255, 0) 0%
+  );
+  background-position: bottom;
+  background-size: var(--rlc-divider-size, var(--rls-sizing-x4));
+  background-repeat: repeat-x;
+}
+@media screen and (max-width: 640px) {
+  .rls-design-system-bordered .rls-app__body {
+    --pvt-navbar-dimension: 140rem;
+    --pvt-navbar-width: var(--pvt-navbar-dimension);
+    --pvt-navbar-width-condense: var(--pvt-navbar-dimension);
+    --pvt-section-navbar: 0rem;
+    --pvt-navbar-snackbar: 0rem;
+  }
+  .rls-design-system-bordered .rls-app__body--navbar-condense {
+    --pvt-section-navbar: var(--pvt-navbar-dimension);
+  }
+  .rls-design-system-bordered .rls-app__page {
+    width: calc(var(--rls-html-max-width) + var(--pvt-navbar-width));
+    left: calc(var(--pvt-section-navbar) * -1);
+    transition: left 280ms var(--rls-standard-curve);
+  }
+}
+@media screen and (max-width: 480px) {
+  .rls-design-system-bordered .rls-app__body {
+    --pvt-navbar-dimension: calc(100vw - 32rem);
+  }
+}
+.rls-design-system-bordered .rls-amount {
+  --pvt-font-size: var(--rlc-amount-font-size, inherit);
+  --pvt-font-weight: var(--rlc-amount-font-weight, inherit);
+  --pvt-decimal-width: var(--rlc-amount-decimal-width, 0.5);
+  --pvt-decimal-size: var(--rlc-amount-decimal-size, 0.6);
+  --pvt-width-separator: var(--rlc-amount-separator, 1.25);
+  --rlc-tabular-text-font-size: var(--pvt-font-size);
+  --rlc-tabular-text-font-weight: var(--pvt-font-weight);
+  --rlc-tabular-text-char-width: calc(
+    var(--pvt-font-size) / var(--pvt-width-separator)
+  );
+  display: flex;
+  width: var(--rlc-amount-width, auto);
+  height: var(--rlc-amount-height, auto);
+  justify-content: var(--rlc-amount-text-align, flex-start);
+  align-items: var(--rlc-amount-align-items, initial);
+  column-gap: var(--rls-sizing-x2);
+  font-size: var(--pvt-font-size);
+  font-weight: var(--pvt-font-weight);
+  color: var(--rlc-amount-font-color, inherit);
+}
+.rls-design-system-bordered .rls-amount[rls-theme] {
+  color: var(--rls-theme-color-500);
+}
+.rls-design-system-bordered .rls-amount__symbol {
+  display: block;
+  line-height: calc(var(--pvt-font-size) + 1rem);
+  height: calc(var(--pvt-font-size) + 1rem);
+}
+.rls-design-system-bordered .rls-amount__content {
+  display: flex;
+  justify-content: var(--rlc-amount-text-align, flex-start);
+  align-items: var(--rlc-amount-align-items, center);
+}
+.rls-design-system-bordered .rls-amount__decimal {
+  --rlc-tabular-text-char-width: calc(
+    var(--pvt-font-size) * var(--pvt-decimal-width)
+  );
+  --rlc-tabular-text-font-size: calc(
+    var(--pvt-font-size) * var(--pvt-decimal-size)
+  );
+  align-self: flex-end;
+}
+.rls-design-system-bordered .rls-area-text {
+  --pvt-font-color: var(--rlc-area-text-font-color, var(--rls-app-color-900));
+  --pvt-font-size: var(--rlc-area-text-font-size, var(--rls-input-font-size));
+  --pvt-font-weight: var(
+    --rlc-area-text-font-weight,
+    var(--rls-input-font-weight)
+  );
+  --pvt-letter-spacing: var(
+    --rlc-area-text-letter-spacing,
+    var(--rls-input-letter-spacing)
+  );
+  --pvt-line-height: var(--rlc-area-text-line-height, --rls-input-line-height);
+  --pvt-min-height: var(
+    --rlc-area-text-min-height,
+    var(--rls-input-line-height)
+  );
+  --pvt-padding: var(--rlc-area-text-padding, var(--rls-sizing-x3) 0rem);
+  --pvt-text-align: var(--rlc-area-text-text-align, left);
+  --pvt-value-font-color: var(--pvt-font-color);
+  --pvt-value-opacity: 1;
+  --pvt-component-font-color: transparent;
+  position: relative;
+  width: var(--rlc-area-text-width, 100%);
+}
+.rls-design-system-bordered .rls-area-text--focused {
+  --pvt-component-font-color: var(--pvt-font-color);
+  --pvt-value-font-color: transparent;
+}
+.rls-design-system-bordered .rls-area-text--disabled {
+  --pvt-value-opacity: 0.5;
+}
+.rls-design-system-bordered .rls-area-text__component {
+  position: relative;
+  width: 100%;
+  min-height: var(--pvt-min-height);
+  padding: 0rem;
+  cursor: text;
+  border: none;
+  outline: none;
+  background: rgba(0, 0, 0, 0);
+  resize: none;
+  overflow: hidden;
+  color: var(--pvt-component-font-color);
+  font-weight: var(--pvt-font-weight);
+  font-size: var(--pvt-font-size);
+  line-height: var(--pvt-line-height);
+  text-align: var(--pvt-text-align);
+  letter-spacing: var(--pvt-letter-spacing);
+}
+.rls-design-system-bordered .rls-area-text__component::placeholder {
+  color: var(--rls-app-color-400);
+}
+.rls-design-system-bordered .rls-area-text__component::selection {
+  background: var(--rls-theme-color-700);
+  color: var(--rls-app-color-050);
+}
+.rls-design-system-bordered .rls-area-text__component:read-only {
+  pointer-events: none;
+}
+.rls-design-system-bordered .rls-area-text__component:disabled {
+  opacity: 0.5;
+}
+.rls-design-system-bordered .rls-area-text__value {
+  position: absolute;
+  top: 0rem;
+  left: 0rem;
+  width: 100%;
+  min-height: var(--pvt-min-height);
+  background: rgba(0, 0, 0, 0);
+  pointer-events: none;
+  overflow: hidden;
+  white-space: pre-wrap;
+  word-break: break-word;
+  opacity: var(--pvt-value-opacity);
+  color: var(--pvt-value-font-color);
+  font-weight: var(--pvt-font-weight);
+  font-size: var(--pvt-font-size);
+  line-height: var(--pvt-line-height);
+  text-align: var(--pvt-text-align);
+  letter-spacing: var(--pvt-letter-spacing);
+}
+.rls-design-system-bordered .rls-avatar {
+  --rlc-image-width: var(--rlc-avatar-width);
+  --rlc-image-height: var(--rlc-avatar-height);
+  position: relative;
+  display: flex;
+  flex: 0 0 auto;
+  width: var(--rlc-avatar-width, var(--rls-sizing-x24));
+  height: var(--rlc-avatar-height, var(--rls-sizing-x24));
+  justify-content: center;
+  align-items: center;
+  border-radius: var(--rlc-avatar-radius, var(--rls-sizing-x4));
+  font-size: var(--rlc-avatar-font-size, var(--rls-title-font-size));
+  color: var(--rlc-avatar-color, var(--rls-theme-color-050));
+  background: var(--rlc-avatar-background, var(--rls-theme-gradient-500));
+  overflow: hidden;
+}
+.rls-design-system-bordered .rls-avatar--skeleton {
+  background: var(--rls-theme-color-200);
+}
+.rls-design-system-bordered .rls-avatar--skeleton > * {
+  display: none;
+}
+.rls-design-system-bordered .rls-avatar--rounded {
+  border-radius: 50%;
+}
+.rls-design-system-bordered .rls-avatar--contrasted {
+  color: var(--rlc-avatar-color, var(--rls-theme-color-500));
+  background: var(--rlc-avatar-background, var(--rls-theme-color-100));
+}
+.rls-design-system-bordered .rls-avatar > span {
+  font-size: inherit;
+}
+.rls-design-system-bordered .rls-avatar > img {
+  width: 100%;
+  object-fit: cover;
+}
+.rls-design-system-bordered .rls-badge {
+  --pvt-dimension: var(--rlc-badge-dimension, var(--rls-sizing-x12));
+  --pvt-font-color: var(--rls-app-color-050);
+  --pvt-background: var(--rls-app-color-700);
+  --pvt-contrasted-font-color: var(--rls-app-color-600);
+  --pvt-contrasted-background: var(--rls-app-color-200);
+  position: relative;
+  display: inline-block;
+  width: auto;
+  min-width: var(--pvt-dimension);
+  height: var(--pvt-dimension);
+  line-height: var(--pvt-dimension);
+  padding: var(--rlc-badge-padding, 0rem var(--rls-sizing-x2));
+  box-sizing: var(--rlc-badge-box-sizing, border-box);
+  font-size: var(--rlc-badge-font-size, var(--rls-smalltext-font-size));
+  font-weight: var(--rlc-badge-font-weight, var(--rls-font-weight-regular));
+  text-align: center;
+  letter-spacing: var(
+    --rlc-badge-letter-spacing,
+    var(--rls-smalltext-letter-spacing)
+  );
+  color: var(--pvt-font-color);
+  background: var(--pvt-background);
+  border-radius: var(--rlc-badge-radius, calc(var(--pvt-dimension) / 2));
+}
+.rls-design-system-bordered .rls-badge--contrasted {
+  color: var(--pvt-contrasted-font-color);
+  background: var(--pvt-contrasted-background);
+}
+.rls-design-system-bordered .rls-badge[rls-theme] {
+  --pvt-font-color: var(--rls-theme-color-050);
+  --pvt-background: var(--rls-theme-color-500);
+  --pvt-contrasted-font-color: var(--rls-theme-color-700);
+  --pvt-contrasted-background: var(--rls-theme-color-100);
+}
+.rls-design-system-bordered .rls-badge > span {
+  font-size: inherit;
+  letter-spacing: inherit;
+  line-height: inherit;
+}
+.rls-design-system-bordered .rls-breadcrumb {
+  --pvt-height: var(--rlc-breadcrumb-height, var(--rls-sizing-x18));
+  --pvt-link-font-color: var(--rls-app-color-600);
+  --pvt-label-font-size: var(
+    --rlc-breadcrumb-font-size,
+    var(--rls-body-font-size)
+  );
+  --pvt-label-font-weight: var(--rlc-breadcrumb-font-weight, inherit);
+  --pvt-label-letter-spacing: var(
+    --rlc-breadcrumb-letter-spacing,
+    var(--rls-body-letter-spacing)
+  );
+  display: -webkit-box;
+  width: 100%;
+  height: var(--pvt-height);
+  line-height: var(--pvt-height);
+  padding: var(--rlc-breadcrumb-padding, 0rem var(--rls-sizing-x8));
+  box-sizing: border-box;
+  user-select: none;
+  overflow-x: var(--rlc-breadcrumb-overflow-x, auto);
+  overflow-y: hidden;
+  color: var(--rls-app-color-600);
+  font-weight: var(--rls-font-weight-medium);
+}
+.rls-design-system-bordered .rls-breadcrumb::-webkit-scrollbar {
+  width: 0rem;
+  height: 0rem;
+}
+.rls-design-system-bordered .rls-breadcrumb__label {
+  display: block;
+  height: inherit;
+  color: inherit;
+  line-height: inherit;
+  font-weight: var(--pvt-label-font-weight);
+  font-size: var(--pvt-label-font-size);
+  letter-spacing: var(--pvt-label-letter-spacing);
+}
+.rls-design-system-bordered .rls-breadcrumb__label:first-child::before {
+  display: none;
+}
+.rls-design-system-bordered .rls-breadcrumb__label::before {
+  font-family: -rolster-icons;
+  display: inline-block;
+  content: '';
+  margin: 0rem var(--rls-sizing-x2);
+  cursor: default;
+  color: inherit;
+  font-size: var(--rls-sizing-x12);
+  font-weight: normal;
+  font-style: normal;
+  letter-spacing: normal;
+  vertical-align: top;
+  -webkit-font-smoothing: antialiased;
+}
+.rls-design-system-bordered .rls-breadcrumb__label__a {
+  display: inline-block;
+}
+.rls-design-system-bordered .rls-breadcrumb__label__a[rls-theme] {
+  color: var(--rls-theme-color-500);
+}
+.rls-design-system-bordered .rls-breadcrumb__label__a--actionable {
+  cursor: pointer;
+}
+.rls-design-system-bordered .rls-breadcrumb__label__a--actionable:hover {
+  text-decoration: underline;
+}
+.rls-design-system-bordered .rls-button {
+  --pvt-button-content-background: none;
+  --pvt-button-content-border: none;
+  --pvt-button-content-box-shadow: var(--rlc-button-content-box-shadow, none);
+  --pvt-button-content-font-color: var(--rls-theme-color-500);
+  --pvt-button-content-animation: none;
+  --pvt-button-content-visibility: hidden;
+  --pvt-button-ripple-background: var(--rls-theme-color-700);
+  --pvt-ghost-background: none;
+  --pvt-ghost-font-color: var(--rls-theme-color-500);
+  --pvt-ghost-border: none;
+  --pvt-outline-background: var(--rls-app-color-050);
+  --pvt-outline-font-color: var(--rls-app-color-500);
+  --pvt-outline-border: var(--rls-app-border-1-300);
+  --pvt-flat-background: var(--rls-theme-color-100);
+  --pvt-flat-font-color: var(--rls-theme-color-500);
+  --pvt-flat-border: none;
+  --pvt-stroked-background: var(--rls-app-color-050);
+  --pvt-stroked-font-color: var(--rls-theme-color-500);
+  --pvt-stroked-border: var(--rls-theme-border-1-300);
+  --pvt-classic-background: var(--rls-theme-color-050);
+  --pvt-classic-font-color: var(--rls-theme-color-500);
+  --pvt-classic-border: var(--rls-theme-border-1-300);
+  --pvt-raised-background: var(--rls-theme-color-500);
+  --pvt-raised-font-color: var(--rls-theme-color-050);
+  --pvt-raised-border: none;
+  --pvt-gradient-background: var(--rls-theme-gradient-500);
+  --pvt-gradient-font-color: var(--rls-theme-color-050);
+  --pvt-gradient-border: none;
+  position: relative;
+  padding: 0rem;
+  width: var(--rlc-button-width, auto);
+  outline: none;
+  background: rgba(0, 0, 0, 0);
+}
+.rls-design-system-bordered .rls-button:not(:disabled):not(:active) {
+  --pvt-button-content-animation: ripple-squarecenter 1000ms
+    var(--rls-standard-curve);
+}
+.rls-design-system-bordered .rls-button:not(:disabled):focus {
+  --pvt-button-content-visibility: visible;
+}
+.rls-design-system-bordered .rls-button:not(:disabled):hover {
+  --pvt-ghost-background: var(--rls-theme-color-200);
+  --pvt-ghost-font-color: var(--rls-theme-font-100);
+  --pvt-ghost-border: none;
+  --pvt-outline-background: transparent;
+  --pvt-outline-font-color: var(--rls-theme-color-500);
+  --pvt-outline-border: var(--rls-theme-border-1-500);
+  --pvt-stroked-background: var(--rls-theme-color-100);
+  --pvt-stroked-font-color: var(--rls-theme-color-700);
+  --pvt-stroked-border: var(--rls-theme-border-1-700);
+  --pvt-classic-background: var(--rls-theme-color-100);
+  --pvt-classic-font-color: var(--rls-theme-color-700);
+  --pvt-classic-border: var(--rls-theme-border-1-700);
+  --pvt-flat-background: var(--rls-theme-color-200);
+  --pvt-flat-font-color: var(--rls-theme-color-700);
+  --pvt-flat-border: none;
+  --pvt-raised-background: var(--rls-theme-color-700);
+  --pvt-raised-font-color: var(--rls-theme-font-900);
+  --pvt-raised-border: none;
+  --pvt-gradient-background: var(--rls-theme-color-700);
+  --pvt-gradient-font-color: var(--rls-theme-font-900);
+  --pvt-gradient-border: none;
+}
+.rls-design-system-bordered .rls-button:disabled {
+  --pvt-button-content-box-shadow: none;
+  --pvt-ghost-background: transparent;
+  --pvt-ghost-font-color: var(--rls-app-color-400);
+  --pvt-ghost-border: none;
+  --pvt-outline-background: transparent;
+  --pvt-outline-font-color: var(--rls-app-color-400);
+  --pvt-outline-border: var(--rls-app-border-1-300);
+  --pvt-stroked-background: transparent;
+  --pvt-stroked-font-color: var(--rls-app-color-400);
+  --pvt-stroked-border: var(--rls-app-border-1-300);
+  --pvt-classic-background: var(--rls-app-color-100);
+  --pvt-classic-font-color: var(--rls-app-color-400);
+  --pvt-classic-border: var(--rls-app-border-1-300);
+  --pvt-flat-background: var(--rls-app-color-100);
+  --pvt-flat-font-color: var(--rls-app-color-400);
+  --pvt-flat-border: none;
+  --pvt-raised-background: var(--rls-app-color-100);
+  --pvt-raised-font-color: var(--rls-app-color-400);
+  --pvt-raised-border: none;
+  --pvt-gradient-background: var(--rls-app-color-100);
+  --pvt-gradient-font-color: var(--rls-app-color-400);
+  --pvt-gradient-border: none;
+  pointer-events: none;
+}
+.rls-design-system-bordered .rls-button__content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  column-gap: var(--rlc-button-content-gap, var(--rls-sizing-x2));
+  line-height: var(--rls-sizing-x20);
+  height: var(--rls-sizing-x20);
+  padding: var(--rlc-button-content-padding, 0rem var(--rls-sizing-x4));
+  box-sizing: border-box;
+  border-radius: var(--rlc-button-content-radius, var(--rls-sizing-x4));
+  box-shadow: var(--pvt-button-content-box-shadow);
+  color: var(--pvt-button-content-font-color);
+  border: var(--pvt-button-content-border);
+  background: var(--pvt-button-content-background);
+  pointer-events: none;
+}
+.rls-design-system-bordered .rls-button__content::before {
+  position: absolute;
+  display: block;
+  content: '';
+  top: 50%;
+  left: 50%;
+  padding-top: calc(100% - var(--rls-sizing-x8));
+  padding-left: calc(100% - var(--rls-sizing-x8));
+  margin-top: calc(-50% + var(--rls-sizing-x4));
+  margin-left: calc(-50% + var(--rls-sizing-x4));
+  border-radius: 50%;
+  opacity: 0.26;
+  transform: scale(0);
+  z-index: var(--rls-z-index-2);
+  background: var(--pvt-button-ripple-background);
+  animation: var(--pvt-button-content-animation);
+  visibility: var(--pvt-button-content-visibility);
+}
+.rls-design-system-bordered .rls-button__content--ghost {
+  --rlc-spinner-color: var(--pvt-ghost-font-color);
+  --pvt-button-content-font-color: var(--pvt-ghost-font-color);
+  --pvt-button-content-background: var(--pvt-ghost-background);
+  --pvt-button-content-border: var(--pvt-ghost-border);
+}
+.rls-design-system-bordered .rls-button__content--outline {
+  --rlc-spinner-color: var(--pvt-outline-font-color);
+  --pvt-button-content-font-color: var(--pvt-outline-font-color);
+  --pvt-button-content-background: var(--pvt-outline-background);
+  --pvt-button-content-border: var(--pvt-outline-border);
+}
+.rls-design-system-bordered .rls-button__content--stroked {
+  --rlc-spinner-color: var(--pvt-stroked-font-color);
+  --pvt-button-content-font-color: var(--pvt-stroked-font-color);
+  --pvt-button-content-background: var(--pvt-stroked-background);
+  --pvt-button-content-border: var(--pvt-stroked-border);
+}
+.rls-design-system-bordered .rls-button__content--classic {
+  --rlc-spinner-color: var(--pvt-classic-font-color);
+  --pvt-button-content-font-color: var(--pvt-classic-font-color);
+  --pvt-button-content-background: var(--pvt-classic-background);
+  --pvt-button-content-border: var(--pvt-classic-border);
+  --pvt-button-ripple-background: var(--rls-theme-font-100);
+}
+.rls-design-system-bordered .rls-button__content--flat {
+  --rlc-spinner-color: var(--pvt-flat-font-color);
+  --pvt-button-content-font-color: var(--pvt-flat-font-color);
+  --pvt-button-content-background: var(--pvt-flat-background);
+  --pvt-button-content-border: var(--pvt-flat-border);
+  --pvt-button-ripple-background: var(--rls-theme-font-100);
+}
+.rls-design-system-bordered .rls-button__content--raised {
+  --rlc-spinner-color: var(--pvt-raised-font-color);
+  --pvt-button-content-font-color: var(--pvt-raised-font-color);
+  --pvt-button-content-background: var(--pvt-raised-background);
+  --pvt-button-content-border: var(--pvt-raised-border);
+  --pvt-button-ripple-background: var(--rls-theme-font-900);
+}
+.rls-design-system-bordered .rls-button__content--gradient {
+  --rlc-spinner-color: var(--pvt-gradient-font-color);
+  --pvt-button-content-font-color: var(--pvt-gradient-font-color);
+  --pvt-button-content-background: var(--pvt-gradient-background);
+  --pvt-button-content-border: var(--pvt-gradient-border);
+  --pvt-button-ripple-background: var(--rls-theme-font-900);
+}
+.rls-design-system-bordered .rls-button__description {
+  display: flex;
+  width: auto;
+  align-items: center;
+  column-gap: var(--rlc-button-description-gap, var(--rls-sizing-x2));
+  padding: 0rem var(--rls-sizing-x2);
+  line-height: initial;
+  font-size: var(--rls-button-font-size);
+  letter-spacing: var(--rls-button-letter-spacing);
+  font-weight: var(--rlc-button-font-weight, var(--rls-font-weight-medium));
+  text-transform: var(--rlc-button-label-text-transform, uppercase);
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.rls-design-system-bordered .rls-button__description a {
+  text-decoration: none;
+  color: inherit;
+}
+@keyframes ripple-squarecenter {
+  0% {
+    transform: scale(0);
+  }
+  20% {
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(1);
+  }
+}
+.rls-design-system-bordered .rls-button-action {
+  --pvt-ripple-dimension: var(
+    --rlc-action-ripple-dimension,
+    var(--rls-sizing-x18)
+  );
+  --pvt-ripple-position: var(--rlc-action-ripple-position, -9rem);
+  --pvt-ripple-color: var(--rlc-action-ripple-color, var(--rls-app-color-600));
+  --pvt-tooltip-transition-delay: 0ms;
+  --pvt-tooltip-opacity: 0;
+  position: relative;
+  width: var(--rls-sizing-x16);
+  height: var(--rls-sizing-x16);
+  border: none;
+  outline: none;
+  padding: var(--rls-sizing-x2);
+  box-sizing: border-box;
+  user-select: none;
+  cursor: default;
+  border-radius: var(--rlc-action-radius, 50%);
+  color: var(--rlc-action-color, var(--rls-app-color-600));
+  background: var(--rlc-action-background, transparent);
+}
+.rls-design-system-bordered .rls-button-action::before {
+  position: absolute;
+  display: block;
+  content: '';
+  top: 50%;
+  left: 50%;
+  opacity: 0.32;
+  visibility: hidden;
+  border-radius: 50%;
+  transform: scale(0);
+  background: var(--pvt-ripple-color);
+  padding-top: calc(120% - var(--rls-sizing-x4));
+  padding-left: calc(120% - var(--rls-sizing-x4));
+  margin-top: calc(-60% + var(--rls-sizing-x2));
+  margin-left: calc(-60% + var(--rls-sizing-x2));
+}
+.rls-design-system-bordered .rls-button-action:not(:active)::before {
+  animation: ripple-button-action 1000ms var(--rls-standard-curve);
+}
+.rls-design-system-bordered .rls-button-action:focus::before {
+  visibility: visible;
+}
+.rls-design-system-bordered .rls-button-action::after {
+  position: absolute;
+  content: '';
+  top: 50%;
+  left: 50%;
+  opacity: 0.24;
+  width: var(--pvt-ripple-dimension);
+  height: var(--pvt-ripple-dimension);
+  margin-top: var(--pvt-ripple-position);
+  margin-left: var(--pvt-ripple-position);
+  border-radius: 50%;
+  background: var(--pvt-ripple-color);
+  transform: scale(0);
+  transition: transform 160ms 0ms var(--rls-sharp-curve);
+}
+.rls-design-system-bordered .rls-button-action:not(:disabled):hover {
+  --pvt-tooltip-opacity: 1;
+  --pvt-tooltip-transition-delay: 480ms;
+}
+.rls-design-system-bordered .rls-button-action:not(:disabled):hover::after {
+  transform: scale(1);
+}
+.rls-design-system-bordered .rls-button-action:disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+.rls-design-system-bordered .rls-button-action__content {
+  pointer-events: none;
+}
+.rls-design-system-bordered .rls-button-action__tooltip {
+  position: absolute;
+  top: calc(100% + var(--rls-sizing-x6));
+  left: 50%;
+  width: auto;
+  float: initial;
+  padding: var(--rls-sizing-x4);
+  border-radius: var(--rls-sizing-x2);
+  white-space: nowrap;
+  pointer-events: none;
+  transform: translateX(-50%);
+  background: var(--rls-app-color-900);
+  color: var(--rls-app-color-050);
+  transition: opacity 200ms 0ms var(--rls-deceleration-curve);
+  opacity: var(--pvt-tooltip-opacity);
+  transition-delay: var(--pvt-tooltip-transition-delay);
+}
+@keyframes ripple-button-action {
+  0% {
+    transform: scale(0);
+  }
+  20% {
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(1);
+  }
+}
+.rls-design-system-bordered .rls-button-option {
+  --pvt-span-color: var(--rls-app-color-800);
+  --pvt-background-hover: var(--rls-theme-color-100);
+  --rlc-icon-color: var(--rls-app-color-600);
+  display: flex;
+  width: var(--rlc-button-option, auto);
+  flex-direction: column;
+  row-gap: var(--rls-sizing-x3);
+  align-items: center;
+  padding: var(--rls-sizing-x4) var(--rls-sizing-x3);
+  box-sizing: border-box;
+  outline: none;
+  background: rgba(0, 0, 0, 0);
+  border: var(--rls-app-border-1-300);
+  border-radius: var(--rls-sizing-x4);
+  overflow: hidden;
+}
+.rls-design-system-bordered .rls-button-option:not(:disabled):hover {
+  background: var(--pvt-background-hover);
+}
+.rls-design-system-bordered .rls-button-option:disabled {
+  opacity: 0.5;
+}
+.rls-design-system-bordered .rls-button-option--checked {
+  --pvt-background-hover: var(--rls-theme-color-800);
+  --pvt-span-color: var(--rls-theme-color-050);
+  --rlc-icon-color: var(--rls-theme-color-050);
+  background: var(--rls-theme-gradient-500);
+  border: var(--rls-theme-border-1-500);
+}
+.rls-design-system-bordered .rls-button-option > span {
+  font-size: var(--rls-span-font-size);
+  letter-spacing: var(--rls-span-letter-spacing);
+  color: var(--pvt-span-color);
+  font-weight: var(--rls-font-weight-medium);
+}
+.rls-design-system-bordered .rls-checkbox {
+  --rlc-icon-color: transparent;
+  --pvt-dimension: var(--rlc-checkbox-dimension, var(--rls-sizing-x12));
+  --rlc-icon-dimension: calc(var(--pvt-dimension) - 2rem);
+  --pvt-component-background: transparent;
+  position: relative;
+  display: flex;
+  width: var(--pvt-dimension);
+  height: var(--pvt-dimension);
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  outline: none;
+  border-radius: var(--rls-sizing-x3);
+  background: rgba(0, 0, 0, 0);
+  border: var(--rls-app-border-1-400);
+  transition: all 160ms 0ms var(--rls-standard-curve);
+}
+.rls-design-system-bordered .rls-checkbox:hover {
+  cursor: var(--rlc-checkbox-cursor, initial);
+}
+.rls-design-system-bordered .rls-checkbox--checked {
+  --rlc-icon-color: var(--rls-app-color-050);
+  --pvt-component-background: var(--rls-theme-color-200);
+  background: var(--rls-theme-gradient-500);
+  border: var(--rls-theme-border-1-500);
+}
+.rls-design-system-bordered .rls-checkbox--disabled {
+  opacity: 0.5;
+  pointer-events: none;
+  background: var(--rls-app-color-300);
+  border: none;
+}
+.rls-design-system-bordered .rls-checkbox--disabled.rls-checkbox--checked {
+  --rlc-icon-color: var(--rls-app-color-500);
+}
+.rls-design-system-bordered .rls-icon {
+  --pvt-icon-dimension: var(--rlc-icon-dimension, var(--rls-sizing-x12));
+  --pvt-icon-display: block;
+  --pvt-icon-color: var(--rlc-icon-color);
+  position: relative;
+  flex: 0 0 auto;
+  font-size: var(--pvt-icon-dimension);
+  width: var(--pvt-icon-dimension);
+  height: var(--pvt-icon-dimension);
+  line-height: var(--pvt-icon-dimension);
+}
+.rls-design-system-bordered .rls-icon--skeleton {
+  --pvt-icon-display: none;
+  background: var(--rls-theme-color-300);
+  border-radius: var(--rls-sizing-x2);
+}
+.rls-design-system-bordered .rls-icon[rls-theme] {
+  --pvt-icon-color: var(--rls-theme-color-500);
+}
+.rls-design-system-bordered .rls-icon > i {
+  display: var(--pvt-icon-display);
+  color: var(--pvt-icon-color, inherit);
+  width: 100%;
+  height: 100%;
+  line-height: inherit;
+  font-size: inherit;
+}
+.rls-design-system-bordered .rls-image {
+  --pvt-background: transparent;
+  --pvt-width: var(--rlc-image-width, 100%);
+  --pvt-height: var(--rlc-image-height, 100%);
+  --pvt-img-display: none;
+  --rlc-skeleton-width: var(--pvt-width);
+  --rlc-skeleton-height: var(--pvt-height);
+  width: var(--pvt-width);
+  height: var(--pvt-height);
+  overflow: hidden;
+}
+.rls-design-system-bordered .rls-image--complet {
+  --pvt-img-display: block;
+  background: var(--pvt-background);
+}
+.rls-design-system-bordered .rls-image[rls-theme] {
+  --pvt-background: var(--rls-theme-color-600);
+}
+.rls-design-system-bordered .rls-image > img {
+  display: var(--pvt-img-display);
+  width: var(--pvt-width);
+  height: var(--pvt-height);
+  content-visibility: auto;
+}
+.rls-design-system-bordered .rls-input {
+  --pvt-font-color: var(--rlc-input-font-color, var(--rls-app-color-900));
+  --pvt-font-size: var(--rlc-input-font-size, var(--rls-input-font-size));
+  --pvt-letter-spacing: var(
+    --rlc-input-letter-spacing,
+    var(--rls-input-letter-spacing)
+  );
+  --pvt-height: var(--rlc-input-height, var(--rls-sizing-x12));
+  --pvt-text-align: var(--rlc-input-text-align, left);
+  --pvt-value-font-color: var(--pvt-font-color);
+  --pvt-value-opacity: 1;
+  --pvt-component-font-color: transparent;
+  --rlc-amount-height: var(--pvt-height);
+  --rlc-amount-align-items: center;
+  position: relative;
+  width: var(--rlc-input-width, 100%);
+}
+.rls-design-system-bordered .rls-input--focused {
+  --pvt-component-font-color: var(--pvt-font-color);
+  --pvt-value-font-color: transparent;
+}
+.rls-design-system-bordered .rls-input--disabled {
+  --pvt-value-opacity: 0.5;
+}
+.rls-design-system-bordered .rls-input__component {
+  position: relative;
+  width: 100%;
+  height: var(--pvt-height);
+  line-height: var(--pvt-height);
+  padding: 0rem;
+  cursor: text;
+  border: none;
+  outline: none;
+  background: rgba(0, 0, 0, 0);
+  color: var(--pvt-component-font-color);
+  font-weight: var(--rls-font-weight-medium);
+  font-size: var(--pvt-font-size);
+  text-align: var(--pvt-text-align);
+  letter-spacing: var(--pvt-letter-spacing);
+}
+.rls-design-system-bordered .rls-input__component::-webkit-outer-spin-button,
+.rls-design-system-bordered .rls-input__component::-webkit-inner-spin-button {
+  margin: 0rem;
+  -webkit-appearance: none;
+}
+.rls-design-system-bordered .rls-input__component::placeholder {
+  color: var(--rls-app-color-400);
+}
+.rls-design-system-bordered .rls-input__component::selection {
+  background: var(--rls-theme-color-700);
+  color: var(--rls-app-color-050);
+}
+.rls-design-system-bordered .rls-input__component:read-only {
+  pointer-events: none;
+}
+.rls-design-system-bordered .rls-input__component:disabled {
+  opacity: 0.5;
+}
+.rls-design-system-bordered .rls-input__value {
+  position: absolute;
+  top: 0rem;
+  left: 0rem;
+  width: 100%;
+  height: var(--pvt-height);
+  line-height: var(--pvt-height);
+  background: rgba(0, 0, 0, 0);
+  pointer-events: none;
+  overflow: hidden;
+  white-space: nowrap;
+  opacity: var(--pvt-value-opacity);
+  color: var(--pvt-value-font-color);
+  font-weight: var(--rls-font-weight-medium);
+  font-size: var(--pvt-font-size);
+  text-align: var(--pvt-text-align);
+  letter-spacing: var(--pvt-letter-spacing);
+}
+.rls-design-system-bordered .rls-input-decimal {
+  --rlc-tabular-text-font-size: var(--rls-input-font-size);
+  --rlc-tabular-text-char-width: 5.25rem;
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+}
+.rls-design-system-bordered .rls-input-money {
+  --rlc-tabular-text-font-size: var(--rls-input-font-size);
+  --rlc-tabular-text-char-width: 5.25rem;
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+}
+.rls-design-system-bordered .rls-input-number {
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+}
+.rls-design-system-bordered .rls-input-password {
+  position: relative;
+  width: var(--rlc-input-password-width, 100%);
+  box-sizing: border-box;
+}
+.rls-design-system-bordered .rls-input-password__component {
+  position: relative;
+  float: left;
+  width: 100%;
+  height: var(--rls-sizing-x12);
+  line-height: var(--rls-sizing-x12);
+  padding: 0rem;
+  cursor: text;
+  border: none;
+  outline: none;
+  background: rgba(0, 0, 0, 0);
+  color: var(--rlc-input-font-color);
+  font-weight: var(--rls-font-weight-medium);
+  font-size: var(--rls-input-font-size);
+  letter-spacing: var(--rls-input-letter-spacing);
+}
+.rls-design-system-bordered
+  .rls-input-password__component::-webkit-outer-spin-button,
+.rls-design-system-bordered
+  .rls-input-password__component::-webkit-inner-spin-button {
+  margin: 0rem;
+  -webkit-appearance: none;
+}
+.rls-design-system-bordered .rls-input-password__component::placeholder {
+  color: var(--rls-app-color-400);
+}
+.rls-design-system-bordered .rls-input-password__component::selection {
+  background: var(--rls-theme-color-700);
+  color: var(--rls-app-color-050);
+}
+.rls-design-system-bordered .rls-input-password__component:disabled {
+  opacity: 0.5;
+}
+.rls-design-system-bordered .rls-input-percentage {
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+}
+.rls-design-system-bordered .rls-input-search {
+  --rlc-input-height: var(--rls-sizing-x14);
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: var(--rls-sizing-x4) var(--rls-sizing-x6);
+  box-sizing: border-box;
+  background: var(--rlc-input-search-background, transparent);
+  border-radius: var(--rls-sizing-x4);
+  border: var(--rlc-input-search-border, var(--rls-app-border-1-200));
+}
+.rls-design-system-bordered .rls-input-search--disabled {
+  opacity: 0.5;
+}
+.rls-design-system-bordered .rls-input-search .rls-input__component:disabled,
+.rls-design-system-bordered .rls-input-search .rls-button-action:disabled {
+  opacity: 1 !important;
+}
+.rls-design-system-bordered .rls-input-text {
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+}
+.rls-design-system-bordered .rls-label {
+  font-size: var(--rlc-label-font-size, var(--rls-smalltext-font-size));
+  letter-spacing: var(
+    --rlc-label-letter-spacing,
+    var(--rls-smalltext-letter-spacing)
+  );
+  line-height: var(--rlc-label-height, var(--rls-smalltext-line-height));
+  font-weight: var(--rlc-label-weight, inherit);
+}
+.rls-design-system-bordered .rls-label[rls-theme] {
+  color: var(--rls-theme-color-500);
+}
+.rls-design-system-bordered .rls-message-icon {
+  --rlc-icon-color: var(--rls-theme-color-500);
+  --rlc-icon-dimension: var(--rls-sizing-x8);
+  display: flex;
+  align-items: center;
+  column-gap: var(--rls-sizing-x2);
+}
+.rls-design-system-bordered .rls-message-icon span {
+  font-size: var(--rls-caption-font-size);
+  letter-spacing: var(--rls-caption-letter-spacing);
+  color: var(--rls-app-color-600);
+}
+.rls-design-system-bordered .rls-poster {
+  --pvt-height: var(--rlc-poster-height, var(--rls-smalltext-line-height));
+  position: relative;
+  display: block;
+  width: var(--rlc-poster-width, auto);
+  font-weight: inherit;
+  font-size: var(--rlc-poster-font-size, var(--rls-smalltext-font-size));
+  letter-spacing: var(
+    --rlc-poster-letter-spacing,
+    var(--rls-body-letter-spacing)
+  );
+  height: var(--pvt-height);
+  line-height: var(--pvt-height);
+  padding: var(--rlc-poster-padding, var(--rls-sizing-x2) var(--rls-sizing-x4));
+  text-align: var(--rlc-poster-text-align, center);
+  border-radius: var(--rlc-poster-radius, var(--rls-sizing-x4));
+  color: var(--rls-app-color-050);
+  background: var(--rls-app-color-600);
+}
+.rls-design-system-bordered .rls-poster[rls-theme] {
+  color: var(--rls-theme-color-050);
+  background: var(--rls-theme-color-500);
+}
+.rls-design-system-bordered .rls-poster--contrasted {
+  color: var(--rls-app-color-700);
+  background: var(--rls-app-color-200);
+}
+.rls-design-system-bordered .rls-poster--contrasted[rls-theme] {
+  color: var(--rls-theme-color-700);
+  background: var(--rls-theme-color-100);
+}
+.rls-design-system-bordered .rls-progress-bar {
+  --pvt-component-display: block;
+  --pvt-component-height: var(--rlc-progress-bar-height, var(--rls-sizing-x2));
+  --pvt-component-radius: var(--rlc-progress-bar-radius, 0rem);
+  position: relative;
+  width: 100%;
+  height: var(--pvt-component-height);
+  overflow: hidden;
+  background: var(--rlc-progress-bar-background, var(--rls-theme-color-100));
+  border-radius: var(--pvt-component-radius);
+}
+.rls-design-system-bordered .rls-progress-bar--indeterminate {
+  --pvt-component-display: none;
+}
+.rls-design-system-bordered .rls-progress-bar--indeterminate::after,
+.rls-design-system-bordered .rls-progress-bar--indeterminate::before {
+  position: absolute;
+  content: '';
+  top: 0rem;
+  width: 0%;
+  height: var(--pvt-component-height);
+  background: var(--rls-theme-gradient-500);
+  border-radius: var(--pvt-component-radius);
+}
+.rls-design-system-bordered .rls-progress-bar--indeterminate::after {
+  animation: progress-bar-indeterminate-after 2000ms infinite;
+}
+.rls-design-system-bordered .rls-progress-bar--indeterminate::before {
+  animation: progress-bar-indeterminate-before 2000ms infinite;
+}
+.rls-design-system-bordered .rls-progress-bar__component {
+  position: absolute;
+  display: var(--pvt-component-display);
+  top: 0rem;
+  width: 0%;
+  height: var(--pvt-component-height);
+  background: var(--rls-theme-gradient-500);
+  transition: width 320ms 0ms var(--rls-standard-curve);
+  border-radius: var(--pvt-component-radius);
+}
+@keyframes progress-bar-indeterminate-before {
+  0% {
+    width: 100%;
+    left: -125%;
+  }
+  20% {
+    width: 100%;
+    left: -125%;
+  }
+  100% {
+    width: 12.5%;
+    left: 100%;
+  }
+}
+@keyframes progress-bar-indeterminate-after {
+  0% {
+    width: 12.5%;
+    left: -12.5%;
+  }
+  80% {
+    width: 100%;
+    left: 125%;
+  }
+  100% {
+    width: 100%;
+    left: 125%;
+  }
+}
+.rls-design-system-bordered .rls-progress-circular {
+  --pvt-dimension: var(
+    --rlc-progress-circular-dimension,
+    var(--rls-sizing-x28)
+  );
+  position: relative;
+  width: var(--pvt-dimension);
+  height: var(--pvt-dimension);
+  padding: var(--rls-sizing-x2);
+  box-sizing: border-box;
+  stroke: var(--rls-theme-color-500);
+}
+.rls-design-system-bordered .rls-progress-circular__svg {
+  height: 100%;
+  width: 100%;
+  transform: rotate(990deg);
+  animation: progress-circular-svg 3500ms linear infinite;
+}
+.rls-design-system-bordered .rls-progress-circular__circle {
+  fill: none;
+  stroke-width: 4px;
+  stroke: inherit;
+  stroke-dasharray: 65;
+  stroke-dashoffset: 65;
+  opacity: 1;
+  animation: progress-circular-circle 1750ms var(--rls-standard-curve) infinite;
+}
+@keyframes progress-circular-svg {
+  0% {
+    transform: rotate(0deg);
+  }
+  50% {
+    transform: rotate(180deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes progress-circular-circle {
+  50% {
+    stroke-dashoffset: 0;
+  }
+  100% {
+    stroke-dashoffset: -65;
+  }
+}
+.rls-design-system-bordered .rls-radiobutton {
+  --pvt-dimension: var(--rlc-radiobutton-dimension, var(--rls-sizing-x12));
+  --pvt-component-dimension: calc(var(--pvt-dimension) / 2);
+  --pvt-component-background: transparent;
+  position: relative;
+  display: flex;
+  width: var(--pvt-dimension);
+  height: var(--pvt-dimension);
+  justify-content: center;
+  align-items: center;
+  outline: none;
+  border-radius: 50%;
+  box-sizing: border-box;
+  background: rgba(0, 0, 0, 0);
+  border: var(--rls-app-border-1-400);
+  transition: all 160ms 0ms var(--rls-standard-curve);
+}
+.rls-design-system-bordered .rls-radiobutton:hover {
+  cursor: var(--rlc-radiobutton-cursor, initial);
+}
+.rls-design-system-bordered .rls-radiobutton--checked {
+  --pvt-component-background: var(--rls-app-color-050);
+  background: var(--rls-theme-gradient-500);
+  border: var(--rls-theme-border-1-500);
+}
+.rls-design-system-bordered .rls-radiobutton--disabled {
+  opacity: 0.5;
+  pointer-events: none;
+  background: var(--rls-app-color-300);
+  border: none;
+}
+.rls-design-system-bordered
+  .rls-radiobutton--disabled.rls-radiobutton--checked {
+  --pvt-component-background: var(--rls-app-color-500);
+}
+.rls-design-system-bordered .rls-radiobutton__component {
+  width: var(--pvt-component-dimension);
+  height: var(--pvt-component-dimension);
+  border-radius: 50%;
+  background: var(--pvt-component-background);
+  transition: all 160ms 0ms var(--rls-standard-curve);
+}
+.rls-design-system-bordered .rls-skeleton {
+  --pvt-height: var(--rlc-skeleton-height, inherit);
+  --pvt-max-height: var(--rlc-skeleton-max-height, inherit);
+  --pvt-min-height: var(--rlc-skeleton-min-height, inherit);
+  --pvt-color-primary: var(--rls-app-color-100);
+  --pvt-color-secondary: var(--rls-app-color-200);
+  position: relative;
+  width: 100%;
+  height: var(--pvt-height);
+  max-height: var(--pvt-max-height);
+  min-height: var(--pvt-min-height);
+  line-height: var(--pvt-height);
+  background: linear-gradient(
+    90deg,
+    var(--pvt-color-primary) 25%,
+    var(--pvt-color-secondary) 50%,
+    var(--pvt-color-primary) 75%
+  );
+  overflow: hidden;
+  background-size: 200% 100%;
+  animation: skeleton-animation 1600ms infinite;
+  border-radius: var(--rls-sizing-x2);
+}
+.rls-design-system-bordered .rls-skeleton[rls-theme] {
+  --pvt-color-primary: var(--rls-theme-color-100);
+  --pvt-color-secondary: var(--rls-theme-color-200);
+}
+@keyframes skeleton-animation {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+.rls-design-system-bordered .rls-skeleton-text {
+  --pvt-height: var(--rlc-skeleton-text-height, var(--rls-body-line-height));
+  --rlc-skeleton-height: var(--pvt-height);
+  position: relative;
+  display: block;
+  overflow: inherit;
+  font-weight: inherit;
+  font-size: var(--rlc-skeleton-text-font-size, var(--rls-body-font-size));
+  letter-spacing: var(
+    --rlc-skeleton-text-letter-spacing,
+    var(--rls-body-letter-spacing)
+  );
+  line-height: var(--pvt-height);
+}
+.rls-design-system-bordered .rls-skeleton-text__value {
+  display: flex;
+  column-gap: var(--rlc-skeleton-text-column-gap, var(--rls-sizing-x4));
+  align-items: center;
+  font-weight: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+}
+.rls-design-system-bordered .rls-skeleton-text__value > span {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.rls-design-system-bordered .rls-spinner {
+  position: relative;
+  display: block;
+  width: var(--rlc-spinner-dimension, var(--rls-sizing-x12));
+  height: var(--rlc-spinner-dimension, var(--rls-sizing-x12));
+  fill: var(--rlc-spinner-color, var(--rls-app-color-800));
+}
+.rls-design-system-bordered .rls-spinner__svg {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  fill: inherit;
+  transform-origin: center center;
+  transform: translateZ(0px);
+  animation: 1s linear 0s infinite normal none running rls-spinner-scale-out;
+}
+.rls-design-system-bordered .rls-spinner__svg > circle {
+  r: 5;
+  transform: translate(32px, 32px);
+}
+.rls-design-system-bordered .rls-spinner__svg--1 {
+  top: 0px;
+  left: 9px;
+  animation-delay: -1000ms;
+  animation-duration: 1000ms;
+}
+.rls-design-system-bordered .rls-spinner__svg--2 {
+  top: 5.78509px;
+  left: 6.8944px;
+  animation-delay: -888.889ms;
+  animation-duration: 1000ms;
+}
+.rls-design-system-bordered .rls-spinner__svg--3 {
+  top: 8.86327px;
+  left: 1.56283px;
+  animation-delay: -777.778ms;
+  animation-duration: 1000ms;
+}
+.rls-design-system-bordered .rls-spinner__svg--4 {
+  top: 7.79423px;
+  left: -4.5px;
+  animation-delay: -666.667ms;
+  animation-duration: 1000ms;
+}
+.rls-design-system-bordered .rls-spinner__svg--5 {
+  top: 3.07818px;
+  left: -8.45723px;
+  animation-delay: -555.556ms;
+  animation-duration: 1000ms;
+}
+.rls-design-system-bordered .rls-spinner__svg--6 {
+  top: -3.07818px;
+  left: -8.45723px;
+  animation-delay: -444.444ms;
+  animation-duration: 1000ms;
+}
+.rls-design-system-bordered .rls-spinner__svg--7 {
+  top: -7.79423px;
+  left: -4.5px;
+  animation-delay: -333.333ms;
+  animation-duration: 1000ms;
+}
+.rls-design-system-bordered .rls-spinner__svg--8 {
+  top: -8.86327px;
+  left: 1.56283px;
+  animation-delay: -222.222ms;
+  animation-duration: 1000ms;
+}
+.rls-design-system-bordered .rls-spinner__svg--9 {
+  top: -5.78509px;
+  left: 6.8944px;
+  animation-delay: -111.111ms;
+  animation-duration: 1000ms;
+}
+@keyframes rls-spinner-scale-out {
+  0% {
+    transform: scale(1, 1);
+  }
+  100% {
+    transform: scale(0, 0);
+  }
+}
+.rls-design-system-bordered .rls-switch {
+  --pvt-component-background: var(--rls-app-color-400);
+  --pvt-component-height: var(
+    --rlc-switch-component-height,
+    var(--rls-sizing-x12)
+  );
+  --pvt-element-left: var(--rls-sizing-x2);
+  --pvt-element-width: var(--rlc-switch-element-width, var(--rls-sizing-x8));
+  --pvt-element-height: var(--rlc-switch-element-height, var(--rls-sizing-x8));
+  --pvt-element-radius: var(--rlc-switch-element-radius, 50%);
+  max-width: var(--rlc-switch-max-width, var(--rls-sizing-x20));
+}
+.rls-design-system-bordered .rls-switch:hover {
+  cursor: var(--rlc-switch-cursor, initial);
+}
+.rls-design-system-bordered .rls-switch--capsule {
+  --pvt-component-height: var(--rls-sizing-x8);
+  --pvt-element-height: var(--rls-sizing-x4);
+  --pvt-element-radius: var(--rls-sizing-x4);
+}
+.rls-design-system-bordered .rls-switch--checked {
+  --pvt-component-background: var(--rls-theme-gradient-500);
+  --pvt-element-left: calc(
+    100% - var(--pvt-element-width) - var(--rls-sizing-x2)
+  );
+}
+.rls-design-system-bordered .rls-switch--disabled {
+  --pvt-component-background: var(--rls-app-color-300);
+  opacity: 0.5;
+  pointer-events: none;
+}
+.rls-design-system-bordered .rls-switch--disabled.rls-switch--checked {
+  --pvt-component-background: var(--rls-theme-color-400);
+}
+.rls-design-system-bordered .rls-switch__component {
+  position: relative;
+  width: 100%;
+  height: var(--pvt-component-height);
+  background: var(--pvt-component-background);
+  border-radius: var(--rls-sizing-x6);
+}
+.rls-design-system-bordered .rls-switch__component__element {
+  position: absolute;
+  top: var(--rls-sizing-x2);
+  left: var(--pvt-element-left);
+  width: var(--pvt-element-width);
+  height: var(--pvt-element-height);
+  border-radius: var(--pvt-element-radius);
+  padding: var(--rls-sizing-x2);
+  box-sizing: border-box;
+  z-index: var(--rls-z-index-2);
+  background: var(--rls-app-color-050);
+  transition: all 160ms var(--rls-standard-curve);
+}
+.rls-design-system-bordered .rls-tabular-text {
+  --pvt-char-font-size: var(
+    --rlc-tabular-text-font-size,
+    var(--rls-body-font-size)
+  );
+  --pvt-char-font-weight: var(--rlc-tabular-text-font-weight, inherit);
+  --pvt-char-height: var(--pvt-char-font-size);
+  --pvt-char-width: var(--rlc-tabular-text-char-width, 5.5rem);
+  --pvt-pointer-width: var(--rlc-tabular-text-pointer-width, 2rem);
+  display: flex;
+  width: auto;
+  height: var(--pvt-char-height);
+  line-height: var(--pvt-char-height);
+  font-size: var(--pvt-char-font-size);
+  font-weight: var(--pvt-char-font-weight);
+  justify-content: var(--rlc-tabular-text-align, flex-start);
+}
+.rls-design-system-bordered .rls-tabular-text__char {
+  display: block;
+  width: var(--pvt-char-width);
+  text-align: center;
+}
+.rls-design-system-bordered .rls-tabular-text__pointer {
+  display: block;
+  width: var(--pvt-pointer-width);
+  text-align: center;
+}
+.rls-design-system-bordered .rls-accordion {
+  --pvt-background: var(--rls-app-color-050);
+  --pvt-border: var(--rls-app-border-1-200);
+  --pvt-header-background: var(--rls-app-color-100);
+  --pvt-header-hover-background: var(--rls-app-color-200);
+  --pvt-header-radius: var(--rls-sizing-x4);
+  --pvt-title-font-color: var(--rls-app-color-800);
+  --pvt-indicator-color: var(--rls-app-color-600);
+  --pvt-indicator-background: transparent;
+  --pvt-body-overflow: hidden;
+  --pvt-content-font-color: var(--rls-app-color-700);
+  --pvt-divider: var(--rls-app-border-1-200);
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  background: var(--pvt-background);
+  border: var(--pvt-border);
+  border-radius: var(--rls-sizing-x4);
+  box-sizing: border-box;
+  transition:
+    box-shadow 240ms var(--rls-standard-curve),
+    border-color 240ms var(--rls-standard-curve);
+}
+.rls-design-system-bordered .rls-accordion__header {
+  position: relative;
+  display: flex;
+  width: 100%;
+  min-height: var(--rls-sizing-x24);
+  align-items: center;
+  justify-content: space-between;
+  column-gap: var(--rls-sizing-x4);
+  padding: var(--rls-sizing-x4) var(--rls-sizing-x6);
+  background: var(--pvt-header-background);
+  border: none;
+  border-radius: var(--pvt-header-radius);
+  box-sizing: border-box;
+  cursor: pointer;
+  text-align: left;
+  font-family: inherit;
+  transition: background 240ms var(--rls-standard-curve);
+}
+.rls-design-system-bordered .rls-accordion__header:hover {
+  background: var(--pvt-header-hover-background);
+}
+.rls-design-system-bordered .rls-accordion__header:focus-visible {
+  outline: var(--rls-app-border-2-500);
+  outline-offset: -2rem;
+}
+.rls-design-system-bordered .rls-accordion__title {
+  flex: 1 1 auto;
+  color: var(--pvt-title-font-color);
+  font-size: var(--rls-paragraph-font-size);
+  font-weight: var(--rls-font-weight-semibold);
+  letter-spacing: var(--rls-paragraph-letter-spacing);
+}
+.rls-design-system-bordered .rls-accordion__indicator {
+  --rlc-icon-color: var(--pvt-indicator-color);
+  display: flex;
+  flex: 0 0 auto;
+  width: var(--rls-sizing-x12);
+  height: var(--rls-sizing-x12);
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: var(--pvt-indicator-background);
+  transform: rotate(0deg);
+  transition:
+    transform 360ms var(--rls-standard-curve),
+    background 240ms var(--rls-standard-curve);
+}
+.rls-design-system-bordered .rls-accordion__body {
+  height: 0rem;
+  overflow: var(--pvt-body-overflow);
+  opacity: 0;
+  transform: translateY(-8rem);
+  transition:
+    height 360ms var(--rls-standard-curve),
+    opacity 280ms var(--rls-deceleration-curve),
+    transform 360ms var(--rls-deceleration-curve);
+}
+.rls-design-system-bordered .rls-accordion__content {
+  padding: var(--rlc-accordion-content-padding, var(--rls-sizing-x8));
+  border-top: var(--pvt-divider);
+  color: var(--pvt-content-font-color);
+  font-size: var(--rls-paragraph-font-size);
+  letter-spacing: var(--rls-paragraph-letter-spacing);
+  box-sizing: border-box;
+}
+.rls-design-system-bordered .rls-accordion--open {
+  --pvt-indicator-background: var(--rls-app-color-200);
+  --pvt-header-radius: var(--rls-sizing-x4) var(--rls-sizing-x4) 0rem 0rem;
+  --pvt-body-overflow: initial;
+}
+.rls-design-system-bordered .rls-accordion--open .rls-accordion__body {
+  opacity: 1;
+  transform: translateY(0rem);
+}
+.rls-design-system-bordered .rls-accordion--open .rls-accordion__indicator {
+  transform: rotate(180deg);
+}
+.rls-design-system-bordered .rls-accordion--disabled {
+  --pvt-header-background: var(--rls-app-color-100);
+  --pvt-header-hover-background: var(--rls-app-color-100);
+  --pvt-title-font-color: var(--rls-app-color-400);
+  --pvt-indicator-color: var(--rls-app-color-400);
+}
+.rls-design-system-bordered .rls-accordion--disabled .rls-accordion__header {
+  cursor: not-allowed;
+}
+.rls-design-system-bordered .rls-accordion[rls-theme] {
+  --pvt-background: var(--rls-theme-color-050);
+  --pvt-border: var(--rls-theme-border-1-200);
+  --pvt-header-background: var(--rls-theme-color-100);
+  --pvt-header-hover-background: var(--rls-theme-color-200);
+  --pvt-title-font-color: var(--rls-theme-color-800);
+  --pvt-indicator-color: var(--rls-theme-color-700);
+  --pvt-content-font-color: var(--rls-theme-color-700);
+  --pvt-divider: var(--rls-theme-border-1-200);
+}
+.rls-design-system-bordered .rls-accordion[rls-theme].rls-accordion--open {
+  --pvt-indicator-background: var(--rls-theme-color-200);
+}
+.rls-design-system-bordered .rls-alert {
+  --pvt-icon-background: var(--rls-app-color-600);
+  --pvt-icon-color: var(--rls-app-color-050);
+  --pvt-content-font-color: var(--rls-app-color-500);
+  position: relative;
+  display: flex;
+  align-items: var(--rlc-alert-align-items, flex-start);
+  column-gap: var(--rls-sizing-x6);
+  padding: var(--rls-sizing-x4) var(--rls-sizing-x6);
+  box-sizing: border-box;
+  background: var(--rls-app-color-100);
+  border: var(--rls-app-border-1-300);
+  border-radius: var(--rls-sizing-x4);
+}
+.rls-design-system-bordered .rls-alert[rls-theme] {
+  --pvt-icon-background: var(--rls-theme-color-500);
+  --pvt-icon-color: var(--rls-theme-color-050);
+  --pvt-content-font-color: var(--rls-theme-color-700);
+  background: var(--rls-theme-color-050);
+  border: var(--rls-theme-border-1-200);
+}
+.rls-design-system-bordered .rls-alert__icon {
+  --rlc-icon-color: var(--pvt-icon-color);
+  display: flex;
+  width: var(--rls-sizing-x16);
+  height: var(--rls-sizing-x16);
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: var(--pvt-icon-background);
+}
+.rls-design-system-bordered .rls-alert__icon + .rls-alert__content {
+  max-width: calc(100% - 22rem);
+}
+.rls-design-system-bordered .rls-alert__content {
+  width: auto;
+  color: var(--pvt-content-font-color);
+}
+.rls-design-system-bordered .rls-ballot {
+  --rlc-avatar-width: var(--rls-sizing-x20);
+  --rlc-avatar-height: var(--rls-sizing-x20);
+  --pvt-title-font-size: var(
+    --rlc-ballot-title-font-size,
+    var(--rls-label-font-size)
+  );
+  --pvt-title-letter-spacing: var(
+    --rlc-ballot-title-letter-spacing,
+    var(--rls-label-letter-spacing)
+  );
+  --pvt-title-line-height: var(
+    --rlc-ballot-title-line-height,
+    var(--rls-label-line-height)
+  );
+  --pvt-subtitle-font-size: var(
+    --rlc-ballot-subtitle-font-size,
+    var(--rls-smalltext-font-size)
+  );
+  --pvt-subtitle-letter-spacing: var(
+    --rlc-ballot-subtitle-letter-spacing,
+    var(--rls-smalltext-letter-spacing)
+  );
+  --pvt-subtitle-line-height: var(
+    --rlc-ballot-subtitle-line-height,
+    var(--rls-smalltext-line-height)
+  );
+  position: relative;
+  display: flex;
+  width: var(--rlc-ballot-width, 100%);
+  align-items: center;
+  column-gap: var(--rls-sizing-x4);
+  padding: var(--rlc-ballot-padding, var(--rls-sizing-x4));
+  box-sizing: border-box;
+  overflow: hidden;
+}
+.rls-design-system-bordered .rls-ballot--bordered {
+  border-radius: var(--rls-sizing-x4);
+  border: var(--rls-app-border-2-100);
+}
+.rls-design-system-bordered .rls-ballot--skeleton {
+  --rls-subtitle-width: 60%;
+}
+.rls-design-system-bordered .rls-ballot__component {
+  display: flex;
+  overflow: hidden;
+  flex-direction: column;
+  row-gap: var(--rlc-ballot-component-row-gap, var(--rls-sizing-x1));
+}
+.rls-design-system-bordered .rls-ballot .rls-avatar + .rls-ballot__component {
+  width: calc(100% - var(--rlc-avatar-width) - var(--rls-sizing-x4));
+}
+.rls-design-system-bordered .rls-ballot__title {
+  --rlc-skeleton-text-font-size: var(--pvt-title-font-size);
+  --rlc-skeleton-text-height: auto;
+  --rlc-skeleton-text-letter-spacing: var(--pvt-title-letter-spacing);
+  position: relative;
+  width: 100%;
+  color: var(--rls-app-color-900);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  font-weight: var(
+    --rlc-ballot-title-font-weight,
+    var(--rls-font-weight-medium)
+  );
+  font-size: var(--pvt-title-font-size);
+  letter-spacing: var(--pvt-title-letter-spacing);
+  line-height: var(--pvt-title-line-height);
+}
+.rls-design-system-bordered .rls-ballot__subtitle {
+  --rlc-skeleton-text-font-size: var(--pvt-subtitle-font-size);
+  --rlc-skeleton-text-height: auto;
+  --rlc-skeleton-text-letter-spacing: var(--pvt-subtitle-letter-spacing);
+  position: relative;
+  width: var(--rlc-ballot-subtitle-width, 100%);
+  color: var(--rls-app-color-500);
+  font-weight: var(
+    --rlc-ballot-subtitle-font-weight,
+    var(--rls-font-weight-medium)
+  );
+  font-size: var(--pvt-subtitle-font-size);
+  letter-spacing: var(--pvt-subtitle-letter-spacing);
+  line-height: var(--pvt-subtitle-line-height);
+  overflow: var(--rlc-ballot-subtitle-overflow, initial);
+  text-overflow: var(--rlc-ballot-subtitle-text-overflow, initial);
+  white-space: var(--rlc-ballot-subtitle-white-space, initial);
+}
+.rls-design-system-bordered .rls-button-progress {
+  --rlc-progress-circular-dimension: var(--rls-sizing-x16);
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.rls-design-system-bordered .rls-button-toggle {
+  width: auto;
+}
+.rls-design-system-bordered .rls-button-toggle__content {
+  display: flex;
+  justify-content: center;
+}
+.rls-design-system-bordered .rls-button-toggle__action {
+  --rlc-button-content-radius: var(--rls-sizing-x2) 0rem 0rem
+    var(--rls-sizing-x2);
+  width: auto;
+}
+.rls-design-system-bordered .rls-button-toggle__icon {
+  --rlc-button-content-radius: 0rem var(--rls-sizing-x2) var(--rls-sizing-x2)
+    0rem;
+  --rlc-button-content-padding: var(--rls-sizing-x2);
+  width: auto;
+}
+.rls-design-system-bordered .rls-button-toggle__list {
+  --rlc-button-toggle-ul-height: 0rem;
+  --rlc-button-toggle-ul-opacity: 0;
+  --rlc-button-toggle-ul-transform: none;
+  position: absolute;
+  top: 22.5rem;
+  left: 0rem;
+  width: 100%;
+  height: 0rem;
+  overflow: hidden;
+  z-index: var(--rls-z-index-4);
+}
+.rls-design-system-bordered .rls-button-toggle__list--hide {
+  --rlc-button-toggle-ul-opacity: 0;
+  --rlc-button-toggle-ul-transform: scale(0, 0);
+}
+.rls-design-system-bordered .rls-button-toggle__list--visible {
+  --rlc-button-toggle-ul-height: auto;
+  --rlc-button-toggle-ul-opacity: 1;
+  --rlc-button-toggle-ul-transform: scale(1, 1);
+  overflow: initial;
+  opacity: 1;
+  height: auto;
+}
+.rls-design-system-bordered .rls-button-toggle__list ul {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  float: left;
+  width: 100%;
+  height: var(--rlc-button-toggle-ul-height);
+  opacity: var(--rlc-button-toggle-ul-opacity);
+  padding: var(--rls-sizing-x4) 0rem;
+  border-radius: var(--rls-sizing-x4);
+  box-sizing: border-box;
+  overflow-y: auto;
+  overflow-x: hidden;
+  z-index: var(--rls-z-index-2);
+  background: var(--rls-app-color-050);
+  border: var(--rls-theme-border-1-500);
+  transform: var(--rlc-button-toggle-ul-transform);
+  transform-origin: 0% 0%;
+  box-shadow: var(--rls-theme-shadow-500);
+  transition:
+    transform 240ms 0ms var(--rls-standard-curve),
+    opacity 240ms 0ms var(--rls-standard-curve);
+}
+.rls-design-system-bordered .rls-button-toggle__list ul li {
+  padding: 0rem var(--rls-sizing-x6);
+  box-sizing: border-box;
+  height: var(--rls-sizing-x20);
+  line-height: var(--rls-sizing-x20);
+  cursor: default;
+  font-weight: var(--rls-font-weight-semibold);
+  font-size: var(--rls-smalltext-font-size);
+  letter-spacing: var(--rls-smalltext-letter-spacing);
+  text-transform: uppercase;
+  color: var(--rls-app-color-600);
+}
+.rls-design-system-bordered .rls-button-toggle__list ul li:hover {
+  background: var(--rls-app-color-100);
+  color: var(--rls-app-color-900);
+}
+.rls-design-system-bordered .rls-field-area {
+  --rlc-field-box-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+}
+.rls-design-system-bordered .rls-field-box {
+  --pvt-body-background: var(--rlc-field-box-body-background, transparent);
+  --pvt-body-background-disabled: var(
+    --rlc-field-box-body-background-disabled,
+    var(--rls-app-color-100)
+  );
+  --pvt-body-border: var(
+    --rlc-field-box-body-border,
+    var(--rls-app-border-1-300)
+  );
+  --pvt-body-border-focused: var(
+    --rlc-field-box-body-border-focused,
+    var(--rls-theme-border-1-500)
+  );
+  --pvt-body-border-error: var(
+    --rlc-field-box-body-border-error,
+    var(--rls-danger-border-1-500)
+  );
+  --pvt-body-border-disabled: var(
+    --rlc-field-box-body-border-disabled,
+    var(--rls-app-border-1-300)
+  );
+  --pvt-body-shadow: none;
+  --pvt-label-font-color: var(
+    --rlc-field-box-label-font-color,
+    var(--rls-app-color-600)
+  );
+  --pvt-action-dimension: var(
+    --rlc-field-box-action-dimension,
+    var(--rls-sizing-x12)
+  );
+  --pvt-action-background: var(
+    --rlc-field-box-action-background,
+    var(--rls-app-color-200)
+  );
+  --pvt-label-opacity: 1;
+  --pvt-body-opacity: 1;
+  position: relative;
+  display: flex;
+  width: var(--rlc-field-box-width, 100%);
+  flex-direction: column;
+  row-gap: var(--rls-sizing-x2);
+  padding: var(--rlc-field-box-padding, 0rem);
+  box-sizing: border-box;
+  transition: height 160ms 0ms var(--rls-standard-curve);
+}
+.rls-design-system-bordered .rls-field-box--focused {
+  --pvt-body-shadow: var(
+    --rlc-field-box-body-shadow,
+    var(--rls-theme-shadow-500)
+  );
+  --pvt-label-font-color: var(--rls-theme-color-500);
+  --pvt-body-border: var(--pvt-body-border-focused);
+}
+.rls-design-system-bordered .rls-field-box--error {
+  --pvt-body-shadow: var(
+    --rlc-field-box-body-shadow-error,
+    0px 0px 0px 3px var(--rls-danger-shadow-color-500)
+  );
+  --pvt-label-font-color: var(--rls-danger-color-500);
+  --pvt-body-border: var(--pvt-body-border-error);
+}
+.rls-design-system-bordered .rls-field-box--disabled {
+  --pvt-body-opacity: 0.75;
+  --pvt-label-opacity: 0.5;
+  --pvt-body-background: var(--pvt-body-background-disabled);
+  --pvt-body-border: var(--pvt-body-border-disabled);
+}
+.rls-design-system-bordered .rls-field-box--readonly {
+  --rlc-input-font-color: var(--rls-app-color-600);
+}
+.rls-design-system-bordered .rls-field-box__label {
+  position: relative;
+  display: var(--rlc-field-box-label-display, block);
+  width: 100%;
+  padding: 0rem 5rem;
+  box-sizing: border-box;
+  color: var(--pvt-label-font-color);
+  opacity: var(--pvt-label-opacity);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  font-weight: var(--rls-font-weight-medium);
+  font-size: var(--rls-smalltext-font-size);
+  letter-spacing: var(--rls-smalltext-letter-spacing);
+  min-height: var(--rls-smalltext-line-height);
+  line-height: var(--rls-smalltext-line-height);
+}
+.rls-design-system-bordered .rls-field-box__label span {
+  color: var(--rls-danger-color-500);
+}
+.rls-design-system-bordered .rls-field-box__body {
+  display: flex;
+  align-items: center;
+  column-gap: var(--rls-sizing-x2);
+  overflow: hidden;
+  background: var(--pvt-body-background);
+  opacity: var(--pvt-body-opacity);
+  border-radius: var(--rlc-field-box-body-radius, var(--rls-sizing-x3));
+  padding: var(--rlc-field-box-body-padding, 0rem);
+  box-sizing: border-box;
+  border: var(--pvt-body-border);
+  box-shadow: var(--pvt-body-shadow);
+}
+.rls-design-system-bordered .rls-field-box__action {
+  --rlc-icon-dimension: calc(var(--pvt-action-dimension) - 2rem);
+  display: flex;
+  flex: 0 0 auto;
+  width: var(--pvt-action-dimension);
+  height: var(--pvt-action-dimension);
+  align-items: center;
+  justify-content: center;
+  color: var(--rls-app-color-600);
+  padding: 0rem;
+  outline: none;
+  border-radius: var(--rlc-field-box-action-radius, var(--rls-sizing-x2));
+  background: var(--pvt-action-background);
+}
+.rls-design-system-bordered .rls-field-box__action:disabled {
+  opacity: 0.5;
+  background: rgba(0, 0, 0, 0);
+}
+.rls-design-system-bordered .rls-field-box__helper {
+  color: var(--rls-app-color-400);
+  padding: 0rem 5rem;
+  box-sizing: border-box;
+  font-weight: var(--rls-font-weight-medium);
+  font-size: var(--rls-overline-font-size);
+  letter-spacing: var(--rls-overline-letter-spacing);
+  min-height: var(--rls-overline-line-height);
+  line-height: var(--rls-overline-line-height);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.rls-design-system-bordered .rls-field-box__error {
+  display: var(--rlc-field-box-error-display, block);
+  padding: 0rem var(--rls-sizing-x4);
+  box-sizing: border-box;
+}
+.rls-design-system-bordered .rls-field-decimal {
+  --rlc-field-box-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+}
+.rls-design-system-bordered .rls-field-file {
+  --rlc-field-box-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
+  --rlc-action-ripple-dimension: var(--rls-sizing-x12);
+  --rlc-action-ripple-position: -6rem;
+  --pvt-font-color: var(--rlc-input-font-color, var(--rls-app-color-900));
+  --pvt-font-size: var(--rlc-input-font-size, var(--rls-input-font-size));
+  --pvt-letter-spacing: var(
+    --rlc-input-letter-spacing,
+    var(--rls-input-letter-spacing)
+  );
+  --pvt-height: var(--rlc-input-height, var(--rls-sizing-x12));
+  --pvt-text-align: var(--rlc-input-text-align, left);
+  --pvt-component-font-color: var(--pvt-font-color);
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+}
+.rls-design-system-bordered .rls-field-file .rls-field-file__input {
+  display: none;
+}
+.rls-design-system-bordered .rls-field-file .rls-input__component {
+  cursor: pointer;
+}
+.rls-design-system-bordered .rls-field-file .rls-button-action {
+  padding: 0rem;
+  width: var(--rls-sizing-x12);
+  height: var(--rls-sizing-x12);
+  z-index: 2;
+}
+.rls-design-system-bordered .rls-field-list {
+  --pvt-control-pointer-events: initial;
+  --pvt-list-height: 0rem;
+  --pvt-list-max-height: 180rem;
+  --pvt-list-opacity: 0;
+  --pvt-list-transform: none;
+  --pvt-list-body-component-display: none;
+  --pvt-list-body-height: 0rem;
+  --pvt-list-body-max-height: 180rem;
+  --pvt-list-body-border: var(--rls-theme-border-1-500);
+  --pvt-list-component-padding: 0rem var(--rls-sizing-x4);
+  --pvt-element-opacity: 1;
+  --pvt-element-pointer-events: initial;
+  --pvt-backdrop-opacity: 0;
+  --pvt-backdrop-bottom: initial;
+  --rlc-field-box-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
+  position: relative;
+  box-sizing: border-box;
+}
+.rls-design-system-bordered .rls-field-list.rls-field-box--disabled {
+  --pvt-action-font-color: var(--rls-app-color-400);
+  --pvt-action-background: transparent;
+}
+.rls-design-system-bordered .rls-field-list.rls-field-box--readonly {
+  --pvt-control-width: 100%;
+  --pvt-control-pointer-events: none;
+}
+.rls-design-system-bordered .rls-field-list__control {
+  position: relative;
+  width: 100%;
+  height: var(--rls-sizing-x12);
+  line-height: var(--rls-sizing-x12);
+  padding: 0rem;
+  cursor: var(--rlc-field-list-control-cursor, default);
+  border: none;
+  outline: none;
+  background: rgba(0, 0, 0, 0);
+  font-weight: var(
+    --rlc-field-list-control-font-weight,
+    var(--rls-font-weight-medium)
+  );
+  font-size: var(
+    --rlc-field-list-control-font-size,
+    var(--rls-input-font-size)
+  );
+  letter-spacing: var(
+    --rlc-field-list-control-letter-spacing,
+    var(--rls-input-letter-spacing)
+  );
+  color: var(--rlc-input-font-color);
+  pointer-events: var(--pvt-control-pointer-events);
+}
+.rls-design-system-bordered .rls-field-list__control::placeholder {
+  color: var(--rls-app-color-400);
+}
+.rls-design-system-bordered .rls-field-list__control::selection {
+  background: var(--rls-theme-color-700);
+  color: var(--rls-app-color-050);
+}
+.rls-design-system-bordered .rls-field-list__control:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.rls-design-system-bordered .rls-field-list__suggestions {
+  position: absolute;
+  top: var(--rlc-field-list-suggestions-top, calc(100% + var(--rls-sizing-x6)));
+  bottom: initial;
+  left: 0rem;
+  width: 100%;
+  height: var(--pvt-list-height);
+  max-height: var(--pvt-list-max-height);
+  opacity: 0;
+  z-index: -1;
+  overflow: hidden;
+  padding-bottom: var(--rls-sizing-x6);
+}
+.rls-design-system-bordered .rls-field-list__suggestions--visible {
+  --pvt-list-height: auto;
+  --pvt-list-body-height: auto;
+  --pvt-list-opacity: 1;
+  overflow: initial;
+  opacity: 1;
+  z-index: var(--rls-z-index-8);
+}
+.rls-design-system-bordered .rls-field-list__suggestions--higher {
+  top: initial;
+  bottom: var(
+    --rlc-field-list-suggestions-bottom,
+    calc(100% - var(--rls-sizing-x4))
+  );
+}
+.rls-design-system-bordered .rls-field-list__suggestions--disabled {
+  --pvt-element-opacity: 0.5;
+  --pvt-element-pointer-events: none;
+}
+.rls-design-system-bordered .rls-field-list__suggestions__body {
+  display: flex;
+  width: 100%;
+  height: var(--pvt-list-body-height);
+  max-height: var(--pvt-list-body-max-height);
+  flex-direction: column;
+  align-items: center;
+  row-gap: var(--rls-sizing-x6);
+  padding: var(--rls-sizing-x4) var(--rls-sizing-x2);
+  box-sizing: border-box;
+  border-radius: var(--rls-sizing-x4);
+  opacity: var(--pvt-list-opacity);
+  overflow: hidden;
+  z-index: var(--rls-z-index-2);
+  border: var(--pvt-list-body-border);
+  background: var(--rls-app-color-050);
+  box-shadow: var(--rls-theme-shadow-500);
+  transform: var(--pvt-list-transform);
+}
+.rls-design-system-bordered .rls-field-list__suggestions__body::before {
+  display: var(--pvt-list-body-component-display);
+  content: '';
+  width: var(--rls-sizing-x24);
+  height: var(--rls-sizing-x2);
+  margin: var(--rls-sizing-x3) auto;
+  border-radius: var(--rls-sizing-x2);
+  background: var(--rls-app-color-300);
+}
+.rls-design-system-bordered .rls-field-list__ul {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  row-gap: var(--rls-sizing-x1);
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: var(--pvt-list-component-padding);
+  box-sizing: border-box;
+}
+.rls-design-system-bordered .rls-field-list__element {
+  --rlc-ballot-subtitle-overflow: hidden;
+  --rlc-ballot-subtitle-text-overflow: ellipsis;
+  --rlc-ballot-subtitle-white-space: nowrap;
+  box-sizing: border-box;
+  outline: none;
+  border-radius: var(--rls-sizing-x4);
+  padding: var(--rlc-field-list-element-padding, var(--rls-sizing-x2));
+  box-sizing: border-box;
+  cursor: default;
+  opacity: var(--pvt-element-opacity);
+  pointer-events: var(--pvt-element-pointer-events);
+}
+.rls-design-system-bordered .rls-field-list__element:hover {
+  background: var(--rls-app-color-100);
+}
+.rls-design-system-bordered .rls-field-list__element:not(:hover):focus {
+  background: var(--rls-theme-color-100);
+}
+.rls-design-system-bordered .rls-field-list__action {
+  padding: var(--pvt-list-component-padding);
+  box-sizing: border-box;
+}
+.rls-design-system-bordered .rls-field-list__action > button {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  column-gap: var(--rls-sizing-x4);
+  padding: var(--rls-sizing-x4);
+  box-sizing: border-box;
+  background: rgba(0, 0, 0, 0);
+  border: none;
+  outline: none;
+  border-radius: var(--rls-sizing-x4);
+  color: var(--rls-theme-color-500);
+  font-size: var(--rls-label-font-size);
+  font-weight: var(--rls-font-weight-medium);
+  letter-spacing: var(--rls-label-letter-spacing);
+}
+.rls-design-system-bordered
+  .rls-field-list__action
+  > button:hover:not(:disabled) {
+  background: var(--rls-theme-color-100);
+}
+.rls-design-system-bordered
+  .rls-field-list__action
+  > button:focus-visible:not(:disabled) {
+  background: var(--rls-theme-color-100);
+}
+.rls-design-system-bordered .rls-field-list__action > button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.rls-design-system-bordered .rls-field-list__action__description {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.rls-design-system-bordered .rls-field-list__ballot {
+  --rlc-ballot-padding: var(--rls-sizing-x4) var(--rls-sizing-x2);
+  --rlc-ballot-component-row-gap: var(--rls-sizing-x2);
+  --rlc-ballot-title-letter-spacing: var(--rls-label-letter-spacing);
+  --rlc-ballot-title-font-size: var(--rls-label-font-size);
+  --rlc-ballot-title-line-height: var(--rls-label-line-height);
+  --rlc-ballot-subtitle-letter-spacing: var(--rls-smalltext-letter-spacing);
+  --rlc-ballot-subtitle-font-size: var(--rls-smalltext-font-size);
+  --rlc-ballot-subtitle-line-height: var(--rls-smalltext-line-height);
+}
+.rls-design-system-bordered .rls-field-list__empty {
+  display: flex;
+  padding: 0rem var(--rls-sizing-x4);
+  box-sizing: border-box;
+}
+.rls-design-system-bordered .rls-field-list__empty__avatar {
+  width: var(--rls-sizing-x20);
+  height: var(--rls-sizing-x20);
+}
+.rls-design-system-bordered .rls-field-list__empty__avatar img {
+  width: 100%;
+}
+.rls-design-system-bordered .rls-field-list__empty__description {
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--rls-sizing-x2);
+  overflow: hidden;
+}
+.rls-design-system-bordered .rls-field-list__empty__description label {
+  display: block;
+  width: 100%;
+  color: var(--rls-app-color-600);
+}
+.rls-design-system-bordered .rls-field-list__empty__description p {
+  white-space: initial;
+  color: var(--rls-app-color-600);
+}
+.rls-design-system-bordered .rls-field-list__backdrop {
+  position: absolute;
+  display: block;
+  top: 0rem;
+  left: 0rem;
+  right: 0rem;
+  bottom: var(--pvt-backdrop-bottom);
+  opacity: var(--pvt-backdrop-opacity);
+  z-index: var(--rls-z-index-2);
+  background: var(--rls-theme-backdrop-900);
+  backdrop-filter: blur(2px);
+  transition:
+    opacity 120ms 0ms var(--rls-deceleration-curve),
+    bottom 120ms 0ms var(--rls-deceleration-curve);
+}
+@media screen and (max-width: 480px) {
+  .rls-design-system-bordered .rls-field-list {
+    --pvt-list-transform: translateY(100%);
+    --pvt-list-body-component-display: block;
+    --pvt-list-body-border: none;
+    --pvt-list-component-padding: var(--rls-sizing-x6) var(--rls-sizing-x4);
+  }
+  .rls-design-system-bordered .rls-field-list__suggestions {
+    position: fixed;
+    display: flex;
+    justify-content: center;
+    top: 0rem;
+    left: 0rem;
+    z-index: var(--rls-z-index-32);
+  }
+  .rls-design-system-bordered .rls-field-list__suggestions--visible {
+    --pvt-list-max-height: initial;
+    --pvt-list-body-max-height: calc(100% - 28rem);
+    --pvt-list-transform: translateY(0%);
+    --pvt-backdrop-opacity: 1;
+    --pvt-backdrop-bottom: 0rem;
+    height: 100%;
+  }
+  .rls-design-system-bordered .rls-field-list__suggestions__body {
+    position: absolute;
+    bottom: 0px;
+    z-index: var(--rls-z-index-4);
+    box-shadow: none;
+    transition:
+      opacity 240ms 0ms var(--rls-standard-curve),
+      transform 240ms 0ms var(--rls-standard-curve);
+  }
+  .rls-design-system-bordered .rls-field-list__empty {
+    flex-direction: column;
+    padding: var(--rls-sizing-x12) var(--rls-sizing-x2);
+  }
+  .rls-design-system-bordered .rls-field-list__empty__avatar {
+    width: 100%;
+    height: auto;
+    max-width: var(--rls-sizing-x8);
+    margin: auto;
+    padding-bottom: var(--rls-sizing-x6);
+  }
+  .rls-design-system-bordered .rls-field-list__empty__description label,
+  .rls-design-system-bordered .rls-field-list__empty__description p {
+    text-align: center;
+  }
+}
+.rls-design-system-bordered .rls-field-list__ul__search {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  margin-top: var(--rls-sizing-x2);
+  margin-bottom: var(--rls-sizing-x6);
+  background: var(--rls-app-color-100);
+  border-radius: var(--rls-sizing-x4);
+  padding: var(--rls-sizing-x4);
+  box-sizing: border-box;
+}
+.rls-design-system-bordered .rls-field-list__ul__search button {
+  color: var(--rls-app-color-600);
+  background: rgba(0, 0, 0, 0);
+}
+.rls-design-system-bordered
+  .rls-field-list__ul__search
+  button:not(:disabled):hover {
+  color: var(--rls-theme-color-300);
+}
+.rls-design-system-bordered .rls-field-list__ul__search button:disabled {
+  opacity: 0.5;
+}
+.rls-design-system-bordered .rls-field-list__ul__control {
+  width: 100%;
+  height: var(--rls-sizing-x12);
+  line-height: var(--rls-sizing-x12);
+  padding: 0rem;
+  cursor: text;
+  border: none;
+  outline: none;
+  background: rgba(0, 0, 0, 0);
+  color: var(--rls-app-color-900);
+  font-size: var(--rls-input-font-size);
+  font-weight: var(--rls-font-weight-medium);
+  letter-spacing: var(--rls-input-letter-spacing);
+}
+.rls-design-system-bordered .rls-field-list__ul__control::placeholder {
+  color: var(--rls-app-color-400);
+}
+.rls-design-system-bordered .rls-field-list__ul__control::selection {
+  background: var(--rls-theme-color-700);
+  color: var(--rls-app-color-050);
+}
+.rls-design-system-bordered .rls-field-list__ul__control:disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+.rls-design-system-bordered .rls-field-list__ul .rls-progress-bar {
+  margin-bottom: var(--rls-sizing-x8);
+}
+.rls-design-system-bordered .rls-field-money {
+  --rlc-field-box-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+}
+.rls-design-system-bordered .rls-field-number {
+  --rlc-field-box-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+}
+.rls-design-system-bordered .rls-field-password {
+  --rlc-field-box-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
+  --rlc-action-ripple-dimension: var(--rls-sizing-x12);
+  --rlc-action-ripple-position: -6rem;
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+}
+.rls-design-system-bordered .rls-field-password .rls-button-action {
+  padding: 0rem;
+  width: var(--rls-sizing-x12);
+  height: var(--rls-sizing-x12);
+  z-index: 2;
+}
+.rls-design-system-bordered .rls-field-percentage {
+  --rlc-field-box-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+}
+.rls-design-system-bordered .rls-field-readonly {
+  --rlc-field-box-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
+  --pvt-font-color: var(--rlc-input-font-color, var(--rls-app-color-600));
+  --pvt-font-size: var(--rlc-input-font-size, var(--rls-input-font-size));
+  --pvt-letter-spacing: var(
+    --rlc-input-letter-spacing,
+    var(--rls-input-letter-spacing)
+  );
+  --pvt-height: var(--rlc-input-height, var(--rls-sizing-x12));
+  --pvt-text-align: var(--rlc-input-text-align, left);
+  --pvt-component-font-color: var(--pvt-font-color);
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+}
+.rls-design-system-bordered .rls-field-text {
+  --rlc-field-box-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+}
+.rls-design-system-bordered .rls-label-checkbox {
+  --pvt-dimension: var(--rlc-label-checkbox-dimension, var(--rls-sizing-x12));
+  --pvt-label-font-size: var(
+    --rlc-label-checkbox-font-size,
+    var(--rls-label-font-size)
+  );
+  --pvt-label-letter-spacing: var(
+    --rlc-label-checkbox-letter-spacing,
+    var(--rls-label-letter-spacing)
+  );
+  --rlc-checkbox-dimension: var(--pvt-dimension);
+  --rlc-checkbox-cursor: pointer;
+  --rlc-ballot-padding: 0rem;
+  --pvt-text-opacity: 1;
+  --pvt-text-overflow: hidden;
+  --pvt-text-white-space: nowrap;
+  --pvt-text-text-overflow: ellipsis;
+  display: flex;
+  column-gap: var(--rls-sizing-x4);
+  align-items: center;
+}
+.rls-design-system-bordered .rls-label-checkbox--disabled {
+  --pvt-text-opacity: 0.5;
+  pointer-events: none;
+}
+.rls-design-system-bordered .rls-label-checkbox--reverse {
+  flex-direction: row-reverse;
+}
+.rls-design-system-bordered .rls-label-checkbox--extended {
+  --pvt-text-text-overflow: initial;
+  --pvt-text-overflow: initial;
+  --pvt-text-white-space: initial;
+}
+.rls-design-system-bordered .rls-label-checkbox__component {
+  width: var(--pvt-dimension);
+  flex: 0 0 auto;
+}
+.rls-design-system-bordered .rls-label-checkbox__text {
+  flex: 1 1 auto;
+  font-size: var(--pvt-label-font-size);
+  font-weight: var(--rls-font-weight-medium);
+  letter-spacing: var(--pvt-label-letter-spacing);
+  line-height: var(--rlc-label-checkbox-line-height, var(--rls-sizing-x12));
+  color: var(--rlc-label-checkbox-font-color, var(--rls-app-color-500));
+  user-select: none;
+  opacity: var(--pvt-text-opacity);
+  overflow: hidden;
+}
+.rls-design-system-bordered .rls-label-checkbox__text > p {
+  height: initial;
+  overflow: initial;
+  text-overflow: initial;
+  white-space: initial;
+}
+.rls-design-system-bordered .rls-label-radiobutton {
+  --pvt-dimension: var(
+    --rlc-label-radiobutton-dimension,
+    var(--rls-sizing-x12)
+  );
+  --pvt-label-font-size: var(
+    --rlc-label-radiobutton-font-size,
+    var(--rls-label-font-size)
+  );
+  --pvt-label-letter-spacing: var(
+    --rlc-label-radiobutton-letter-spacing,
+    var(--rls-label-letter-spacing)
+  );
+  --rlc-radiobutton-dimension: var(--pvt-dimension);
+  --rlc-radiobutton-cursor: pointer;
+  --rlc-ballot-padding: 0rem;
+  --pvt-text-opacity: 1;
+  --pvt-text-overflow: hidden;
+  --pvt-text-white-space: nowrap;
+  --pvt-text-text-overflow: ellipsis;
+  display: flex;
+  column-gap: var(--rls-sizing-x4);
+  align-items: center;
+}
+.rls-design-system-bordered .rls-label-radiobutton--disabled {
+  --pvt-text-opacity: 0.5;
+  pointer-events: none;
+}
+.rls-design-system-bordered .rls-label-radiobutton--reverse {
+  flex-direction: row-reverse;
+}
+.rls-design-system-bordered .rls-label-radiobutton--extended {
+  --pvt-text-text-overflow: initial;
+  --pvt-text-overflow: initial;
+  --pvt-text-white-space: initial;
+}
+.rls-design-system-bordered .rls-label-radiobutton__component {
+  width: var(--pvt-dimension);
+  flex: 0 0 auto;
+}
+.rls-design-system-bordered .rls-label-radiobutton__text {
+  flex: 1 1 auto;
+  font-size: var(--pvt-label-font-size);
+  font-weight: var(--rls-font-weight-medium);
+  letter-spacing: var(--pvt-label-letter-spacing);
+  line-height: var(--rlc-label-radiobutton-line-height, var(--rls-sizing-x12));
+  color: var(--rlc-label-radiobutton-font-color, var(--rls-app-color-500));
+  user-select: none;
+  opacity: var(--pvt-text-opacity);
+  overflow: hidden;
+}
+.rls-design-system-bordered .rls-label-radiobutton__text > p {
+  height: initial;
+  overflow: initial;
+  text-overflow: initial;
+  white-space: initial;
+}
+.rls-design-system-bordered .rls-label-switch {
+  --rlc-switch-cursor: pointer;
+  --rlc-ballot-padding: 0rem;
+  --pvt-label-font-size: var(
+    --rlc-label-switch-font-size,
+    var(--rls-label-font-size)
+  );
+  --pvt-label-letter-spacing: var(
+    --rlc-label-switch-letter-spacing,
+    var(--rls-label-letter-spacing)
+  );
+  --pvt-text-opacity: 1;
+  --pvt-text-overflow: hidden;
+  --pvt-text-white-space: nowrap;
+  --pvt-text-text-overflow: ellipsis;
+  display: flex;
+  column-gap: var(--rls-sizing-x4);
+  align-items: center;
+}
+.rls-design-system-bordered .rls-label-switch--disabled {
+  --pvt-text-opacity: 0.5;
+  pointer-events: none;
+}
+.rls-design-system-bordered .rls-label-switch--reverse {
+  flex-direction: row-reverse;
+}
+.rls-design-system-bordered .rls-label-switch--extended {
+  --pvt-text-text-overflow: initial;
+  --pvt-text-overflow: initial;
+  --pvt-text-white-space: initial;
+  --pvt-text-height: auto;
+}
+.rls-design-system-bordered .rls-label-switch__component {
+  width: var(--rlc-switch-max-width, var(--rls-sizing-x20));
+  flex: 0 0 auto;
+}
+.rls-design-system-bordered .rls-label-switch__text {
+  flex: 1 1 auto;
+  font-size: var(--pvt-label-font-size);
+  font-weight: var(--rls-font-weight-medium);
+  letter-spacing: var(--pvt-label-letter-spacing);
+  line-height: var(--rlc-label-switch-line-height, var(--rls-sizing-x12));
+  color: var(--rlc-label-switch-font-color, var(--rls-app-color-500));
+  user-select: none;
+  opacity: var(--pvt-text-opacity);
+  overflow: hidden;
+}
+.rls-design-system-bordered .rls-label-switch__text > p {
+  height: initial;
+  overflow: initial;
+  text-overflow: initial;
+  white-space: initial;
+}
+.rls-design-system-bordered .rls-message-empty {
+  --pvt-logo-size: var(--rlc-message-empty-logo-size, var(--rls-sizing-x32));
+  --pvt-logo-background: var(--rls-app-color-100);
+  --pvt-logo-color: var(--rls-app-color-600);
+  --pvt-title-font-color: var(--rls-app-color-900);
+  --pvt-content-font-color: var(--rls-app-color-500);
+  position: relative;
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  align-items: var(--rlc-message-empty-align-items, center);
+  row-gap: var(--rls-sizing-x4);
+  padding: var(--rlc-message-empty-padding, var(--rls-sizing-x8));
+  box-sizing: border-box;
+  text-align: var(--rlc-message-empty-text-align, center);
+}
+.rls-design-system-bordered .rls-message-empty__logo {
+  --rlc-icon-color: var(--pvt-logo-color);
+  --rlc-icon-font-size: calc(var(--pvt-logo-size) * 0.5);
+  display: flex;
+  width: var(--pvt-logo-size);
+  height: var(--pvt-logo-size);
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: var(--pvt-logo-background);
+  overflow: hidden;
+  box-sizing: border-box;
+}
+.rls-design-system-bordered .rls-message-empty__logo--emoji {
+  font-size: calc(var(--pvt-logo-size) * 0.7);
+  line-height: 1;
+}
+.rls-design-system-bordered .rls-message-empty__logo--image {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+.rls-design-system-bordered .rls-message-empty__title {
+  width: 100%;
+  color: var(--pvt-title-font-color);
+  font-size: var(
+    --rlc-message-empty-title-font-size,
+    var(--rls-subtitle-font-size)
+  );
+  font-weight: var(--rls-font-weight-semibold);
+  letter-spacing: var(--rls-subtitle-letter-spacing);
+  line-height: var(--rls-subtitle-line-height);
+}
+.rls-design-system-bordered .rls-message-empty__content {
+  width: 100%;
+  color: var(--pvt-content-font-color);
+  font-size: var(
+    --rlc-message-empty-content-font-size,
+    var(--rls-paragraph-font-size)
+  );
+  letter-spacing: var(--rls-paragraph-letter-spacing);
+  line-height: var(--rls-paragraph-line-height);
+}
+.rls-design-system-bordered .rls-message-empty[rls-theme] {
+  --pvt-logo-background: var(--rls-theme-color-100);
+  --pvt-logo-color: var(--rls-theme-color-600);
+  --pvt-title-font-color: var(--rls-theme-color-900);
+  --pvt-content-font-color: var(--rls-theme-color-700);
+}
+.rls-design-system-bordered .rls-pagination {
+  --pvt-dimension: var(--rlc-pagination-dimension, var(--rls-sizing-x16));
+  --pvt-description-display: block;
+  --pvt-count-display: none;
+  position: relative;
+  display: flex;
+  width: 100%;
+  column-gap: var(--rlc-pagination-column-gap, var(--rls-sizing-x4));
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  height: var(
+    --rlc-pagination-height,
+    calc(var(--pvt-dimension) + var(--rls-sizing-x4))
+  );
+  padding: var(--rlc-pagination-padding, 0rem var(--rls-sizing-x6));
+  box-sizing: border-box;
+}
+.rls-design-system-bordered .rls-pagination__body {
+  display: flex;
+  width: auto;
+  column-gap: var(--rls-sizing-x8);
+  align-items: center;
+}
+.rls-design-system-bordered .rls-pagination__pages {
+  display: flex;
+  width: auto;
+  column-gap: var(--rls-sizing-x4);
+  align-items: center;
+}
+.rls-design-system-bordered .rls-pagination__page {
+  background: var(--rls-app-color-200);
+  color: var(--rls-app-color-900);
+  cursor: default;
+  text-align: center;
+  width: var(--pvt-dimension);
+  height: var(--pvt-dimension);
+  line-height: var(--pvt-dimension);
+  border-radius: var(--rls-sizing-x2);
+  font-size: var(--rls-body-font-size);
+  letter-spacing: var(--rls-body-letter-spacing);
+}
+.rls-design-system-bordered .rls-pagination__page:hover {
+  background: var(--rls-theme-color-300);
+  color: var(--rls-theme-color-900);
+}
+.rls-design-system-bordered .rls-pagination__page--active {
+  background: var(--rls-theme-gradient-500);
+  color: var(--rls-app-color-050);
+}
+.rls-design-system-bordered .rls-pagination__description {
+  display: var(--pvt-description-display);
+  width: auto;
+  font-size: var(--rls-body-font-size);
+  font-weight: var(--rls-font-weight-bold);
+  letter-spacing: var(--rls-body-letter-spacing);
+  color: var(--rls-app-color-900);
+}
+.rls-design-system-bordered .rls-pagination__count {
+  display: var(--pvt-count-display);
+  font-size: var(--rls-body-font-size);
+  font-weight: var(--rls-font-weight-bold);
+  letter-spacing: var(--rls-body-letter-spacing);
+  color: var(--rls-app-color-900);
+}
+.rls-design-system-bordered .rls-pagination__actions {
+  display: flex;
+  width: auto;
+  column-gap: var(--rls-sizing-x2);
+}
+.rls-design-system-bordered .rls-pagination__action {
+  --rlc-icon-dimension: calc(var(--pvt-dimension) - var(--rls-sizing-x4));
+  background: none;
+  outline: none;
+  color: var(--rls-app-color-600);
+  padding: var(--rls-sizing-x2);
+}
+.rls-design-system-bordered .rls-pagination__action:hover {
+  color: var(--rls-theme-color-300);
+  cursor: pointer;
+}
+.rls-design-system-bordered .rls-pagination__action:disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+@media screen and (max-width: 640px) {
+  .rls-design-system-bordered .rls-pagination {
+    --pvt-description-display: none;
+    --pvt-count-display: block;
+    padding: 0rem;
+  }
+}
+.rls-design-system-bordered .rls-picker-day {
+  --pvt-span-background: transparent;
+  --pvt-span-font-color: var(--rls-app-color-900);
+  --pvt-span-border: var(--rls-app-border-1-transparent);
+  --pvt-span-box-shadow: none;
+  position: relative;
+  display: var(--rlc-picker-day-display, flex);
+  width: 100%;
+  max-width: 140rem;
+  flex-direction: column;
+  row-gap: var(--rls-sizing-x2);
+  box-sizing: border-box;
+  user-select: none;
+}
+.rls-design-system-bordered .rls-picker-day__header {
+  display: flex;
+}
+.rls-design-system-bordered .rls-picker-day__label {
+  width: 100%;
+  height: var(--rls-sizing-x20);
+  line-height: var(--rls-sizing-x20);
+  text-align: center;
+  font-size: var(--rls-caption-font-size);
+  color: var(--rls-app-color-600);
+  font-weight: var(--rls-font-weight-regular);
+  letter-spacing: var(--rls-caption-letter-spacing);
+}
+.rls-design-system-bordered .rls-picker-day__component {
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--rls-sizing-x3);
+}
+.rls-design-system-bordered .rls-picker-day__week {
+  display: flex;
+}
+.rls-design-system-bordered .rls-picker-day__element {
+  text-align: center;
+  padding: var(--rls-sizing-x1);
+  box-sizing: border-box;
+}
+.rls-design-system-bordered .rls-picker-day__element--today {
+  --pvt-span-background: transparent;
+  --pvt-span-font-color: var(--rls-theme-color-500);
+  --pvt-span-border: none;
+  --pvt-span-box-shadow: var(--rls-theme-shadow-500);
+}
+.rls-design-system-bordered .rls-picker-day__element--selected {
+  --pvt-span-background: var(--rls-theme-color-200);
+  --pvt-span-font-color: var(--rls-theme-color-600);
+  --pvt-span-border: none;
+  --pvt-span-box-shadow: none;
+}
+.rls-design-system-bordered .rls-picker-day__element--focused {
+  --pvt-span-background: var(--rls-theme-gradient-500);
+  --pvt-span-font-color: var(--rls-theme-color-050);
+  --pvt-span-border: none;
+  --pvt-span-box-shadow: none;
+}
+.rls-design-system-bordered .rls-picker-day__element--forbidden {
+  --pvt-span-background: var(--rls-app-color-100);
+  --pvt-span-font-color: var(--rls-app-color-400);
+  --pvt-span-border: var(--rls-app-border-1-100);
+  --pvt-span-box-shadow: none;
+  pointer-events: none;
+}
+.rls-design-system-bordered .rls-picker-day__element--disabled {
+  --pvt-span-background: transparent;
+  --pvt-span-font-color: var(--rls-app-color-400);
+  --pvt-span-border: var(--rls-app-border-1-transparent);
+  --pvt-span-box-shadow: none;
+  pointer-events: none;
+}
+.rls-design-system-bordered .rls-picker-day__element__span {
+  position: relative;
+  display: block;
+  font-size: var(--rls-paragraph-font-size);
+  font-weight: var(--rls-font-weight-semibold);
+  border-radius: var(--rls-sizing-x4);
+  height: var(--rls-sizing-x18);
+  line-height: var(--rls-sizing-x18);
+  box-sizing: border-box;
+  letter-spacing: var(--rls-paragraph-letter-spacing);
+  box-shadow: var(--pvt-span-box-shadow);
+}
+.rls-design-system-bordered .rls-picker-day__element__span:not(:hover) {
+  color: var(--pvt-span-font-color);
+  border: var(--pvt-span-border);
+  background: var(--pvt-span-background);
+}
+.rls-design-system-bordered .rls-picker-day__element__span:hover {
+  background: var(--rls-theme-color-800);
+  color: var(--rls-theme-color-050);
+  border: var(--rls-theme-border-1-800);
+}
+.rls-design-system-bordered .rls-picker-day-range {
+  --pvt-span-nothover-background: transparent;
+  --pvt-span-nothover-font-color: inherit;
+  --pvt-span-background: transparent;
+  position: relative;
+  display: var(--rlc-picker-day-range-display, flex);
+  width: 100%;
+  max-width: 140rem;
+  flex-direction: column;
+  row-gap: var(--rls-sizing-x4);
+  box-sizing: border-box;
+  user-select: none;
+}
+.rls-design-system-bordered .rls-picker-day-range__title {
+  color: var(--rls-app-color-600);
+  text-align: center;
+  font-size: var(--rls-body-font-size);
+  letter-spacing: var(--rls-body-letter-spacing);
+  line-height: var(--rls-body-line-height);
+  font-weight: var(--rls-font-weight-bold);
+}
+.rls-design-system-bordered .rls-picker-day-range__header {
+  display: flex;
+}
+.rls-design-system-bordered .rls-picker-day-range__label {
+  width: 100%;
+  height: var(--rls-sizing-x20);
+  line-height: var(--rls-sizing-x20);
+  text-align: center;
+  font-size: var(--rls-caption-font-size);
+  color: var(--rls-app-color-600);
+  font-weight: var(--rls-font-weight-regular);
+  letter-spacing: var(--rls-caption-letter-spacing);
+}
+.rls-design-system-bordered .rls-picker-day-range__component {
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--rls-sizing-x3);
+}
+.rls-design-system-bordered .rls-picker-day-range__week {
+  display: flex;
+}
+.rls-design-system-bordered .rls-picker-day-range__element {
+  text-align: center;
+  padding: var(--rls-sizing-x1);
+  box-sizing: border-box;
+}
+.rls-design-system-bordered .rls-picker-day-range__element--ranged {
+  --pvt-span-nothover-background: var(--rls-theme-color-100);
+}
+.rls-design-system-bordered .rls-picker-day-range__element--end {
+  --pvt-span-nothover-background: var(--rls-app-color-900);
+  --pvt-span-nothover-font-color: var(--rls-app-color-050);
+}
+.rls-design-system-bordered .rls-picker-day-range__element--source {
+  --pvt-span-nothover-background: var(--rls-theme-color-500);
+  --pvt-span-nothover-font-color: var(--rls-app-color-050);
+}
+.rls-design-system-bordered .rls-picker-day-range__element--forbidden {
+  --pvt-span-background: var(--rls-app-color-200);
+  pointer-events: none;
+  opacity: 0.5;
+}
+.rls-design-system-bordered .rls-picker-day-range__element--disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+.rls-design-system-bordered .rls-picker-day-range__element__span {
+  position: relative;
+  display: block;
+  font-size: var(--rls-paragraph-font-size);
+  font-weight: var(--rls-font-weight-semibold);
+  border-radius: var(--rls-sizing-x4);
+  height: var(--rls-sizing-x18);
+  line-height: var(--rls-sizing-x18);
+  box-sizing: border-box;
+  letter-spacing: var(--rls-paragraph-letter-spacing);
+}
+.rls-design-system-bordered .rls-picker-day-range__element__span:not(:hover) {
+  background: var(--pvt-span-nothover-background);
+  color: var(--pvt-span-nothover-font-color);
+}
+.rls-design-system-bordered .rls-picker-day-range__element__span:hover {
+  color: var(--rls-app-color-050);
+  background: var(--rls-theme-color-900);
+}
+.rls-design-system-bordered .rls-picker-month {
+  --pvt-component-background: transparent;
+  --pvt-component-font-color: var(--rls-app-color-900);
+  position: relative;
+  display: var(--rlc-picker-month-display, grid);
+  grid-template-columns: repeat(3, 1fr);
+  width: 100%;
+  max-width: 140rem;
+  column-gap: var(--rls-sizing-x2);
+  row-gap: var(--rls-sizing-x4);
+  padding: var(--rls-sizing-x1);
+  box-sizing: border-box;
+}
+.rls-design-system-bordered .rls-picker-month__component {
+  position: relative;
+  display: flex;
+  box-sizing: border-box;
+  justify-content: center;
+  align-items: center;
+  height: var(--rls-sizing-x20);
+  border-radius: var(--rls-sizing-x4);
+  box-sizing: border-box;
+}
+.rls-design-system-bordered .rls-picker-month__component:not(:hover) {
+  color: var(--pvt-component-font-color);
+  background: var(--pvt-component-background);
+}
+.rls-design-system-bordered .rls-picker-month__component:hover {
+  background: var(--rls-theme-color-900);
+  color: var(--rls-theme-font-900);
+}
+.rls-design-system-bordered .rls-picker-month__component--selected {
+  --pvt-component-background: var(--rls-theme-color-200);
+  --pvt-component-font-color: var(--rls-theme-color-600);
+}
+.rls-design-system-bordered .rls-picker-month__component--focused {
+  --pvt-component-background: var(--rls-theme-gradient-500);
+  --pvt-component-font-color: var(--rls-theme-color-050);
+}
+.rls-design-system-bordered .rls-picker-month__component--disabled {
+  --pvt-component-background: transparent;
+  --pvt-component-font-color: var(--rls-app-color-400);
+  pointer-events: none;
+}
+.rls-design-system-bordered .rls-picker-month__span {
+  font-weight: var(--rls-font-weight-semibold);
+  font-size: var(--rls-caption-font-size);
+  cursor: default;
+  pointer-events: none;
+  letter-spacing: 0.325rem;
+}
+.rls-design-system-bordered .rls-picker-selector-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--rlc-picker-selector-title-padding, 0rem);
+  box-sizing: border-box;
+  border-radius: var(--rlc-picker-selector-title-radius, 0rem);
+  background: var(--rlc-picker-selector-title-background, transparent);
+}
+.rls-design-system-bordered .rls-picker-selector-title__label {
+  display: flex;
+  column-gap: var(--rls-sizing-x3);
+  justify-content: center;
+}
+.rls-design-system-bordered .rls-picker-selector-title__label > span {
+  font-size: var(--rls-body-font-size);
+  font-weight: var(--rls-font-weight-bold);
+  cursor: default;
+  height: var(--rls-sizing-x14);
+  line-height: var(--rls-sizing-x14);
+}
+.rls-design-system-bordered .rls-picker-selector-title__label > span:hover {
+  color: var(--rls-theme-color-500);
+}
+.rls-design-system-bordered .rls-picker-selector-title > button {
+  --rlc-icon-dimension: var(--rls-sizing-x10);
+  background: var(--rls-app-color-050);
+  outline: none;
+  padding: var(--rls-sizing-x2);
+  border-radius: var(--rls-sizing-x4);
+  color: var(--rls-app-color-900);
+}
+.rls-design-system-bordered .rls-picker-selector-title > button:hover {
+  background: var(--rls-app-color-300);
+}
+.rls-design-system-bordered .rls-picker-selector-title > button:disabled {
+  opacity: 0.5;
+  background: rgba(0, 0, 0, 0);
+  color: var(--rls-app-color-600);
+}
+.rls-design-system-bordered .rls-picker-year {
+  --pvt-component-background: transparent;
+  --pvt-component-font-color: var(--rls-app-color-600);
+  position: relative;
+  display: var(--rlc-picker-year-display, block);
+  width: 100%;
+  max-width: 140rem;
+  box-sizing: border-box;
+  overflow: hidden;
+  user-select: none;
+}
+.rls-design-system-bordered .rls-picker-year__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-sizing: border-box;
+  padding: var(--rls-sizing-x4);
+  border-radius: var(--rls-sizing-x4);
+}
+.rls-design-system-bordered .rls-picker-year__header > span {
+  font-size: var(--rls-body-font-size);
+  font-weight: var(--rls-font-weight-semibold);
+  letter-spacing: 0.325rem;
+  color: var(--rls-app-color-900);
+}
+.rls-design-system-bordered .rls-picker-year__action {
+  --rlc-icon-dimension: var(--rls-sizing-x10);
+  background: var(--rls-theme-color-100);
+  color: var(--rls-theme-color-600);
+  outline: none;
+  padding: var(--rls-sizing-x2);
+  border-radius: var(--rls-sizing-x4);
+}
+.rls-design-system-bordered .rls-picker-year__action:not(:disabled):hover {
+  color: var(--rls-theme-color-500);
+}
+.rls-design-system-bordered .rls-picker-year__action:disabled {
+  opacity: 0.5;
+  background: rgba(0, 0, 0, 0);
+  color: var(--rls-theme-color-300);
+}
+.rls-design-system-bordered .rls-picker-year__component {
+  position: relative;
+  display: grid;
+  width: 100%;
+  grid-template-columns: repeat(3, 1fr);
+  padding: var(--rls-sizing-x4);
+  box-sizing: border-box;
+  row-gap: var(--rls-sizing-x6);
+  column-gap: var(--rls-sizing-x8);
+}
+.rls-design-system-bordered .rls-picker-year__element {
+  position: relative;
+  display: flex;
+  height: var(--rls-sizing-x20);
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  text-align: center;
+  border-radius: var(--rls-sizing-x4);
+  box-shadow: none;
+}
+.rls-design-system-bordered .rls-picker-year__element:not(:hover) {
+  color: var(--pvt-component-font-color);
+  background: var(--pvt-component-background);
+}
+.rls-design-system-bordered .rls-picker-year__element:hover {
+  background: var(--rls-theme-color-900);
+  color: var(--rls-theme-color-050);
+}
+.rls-design-system-bordered .rls-picker-year__element--selected {
+  --pvt-component-background: var(--rls-theme-color-200);
+  --pvt-component-font-color: var(--rls-theme-color-600);
+}
+.rls-design-system-bordered .rls-picker-year__element--focused {
+  --pvt-component-background: var(--rls-theme-gradient-500);
+  --pvt-component-font-color: var(--rls-theme-color-050);
+}
+.rls-design-system-bordered .rls-picker-year__element--disabled {
+  --pvt-span-background: var(--rls-app-color-100);
+  --pvt-component-font-color: var(--rls-app-color-400);
+  pointer-events: none;
+}
+.rls-design-system-bordered .rls-picker-year__span {
+  font-size: var(--rls-body-font-size);
+  letter-spacing: var(--rls-body-letter-spacing);
+  font-weight: var(--rls-font-weight-medium);
+  cursor: default;
+  pointer-events: none;
+}
+.rls-design-system-bordered .rls-slider {
+  --pvt-track-height: var(--rls-sizing-x3);
+  --pvt-thumb-background: var(--rls-theme-color-600);
+  --pvt-thumb-color: var(--rls-theme-color-050);
+}
+.rls-design-system-bordered .rls-slider--empty {
+  --pvt-thumb-background: var(--rls-app-color-300);
+  --pvt-thumb-color: var(--rls-app-color-900);
+}
+.rls-design-system-bordered .rls-slider__component {
+  position: relative;
+  width: calc(100% - var(--rls-sizing-x10));
+  margin: 0rem 5rem;
+  padding: var(--rls-sizing-x4) 0rem;
+  box-sizing: border-box;
+}
+.rls-design-system-bordered .rls-slider__body {
+  display: flex;
+  column-gap: var(--rls-sizing-x4);
+  align-items: center;
+}
+.rls-design-system-bordered .rls-slider__body .rls-icon {
+  padding: var(--rls-sizing-x4);
+  border-radius: 50%;
+  background: var(--rls-app-color-300);
+}
+.rls-design-system-bordered .rls-slider__track {
+  position: relative;
+  width: 100%;
+  height: var(--pvt-track-height);
+  cursor: pointer;
+  background: var(--rls-app-color-300);
+}
+.rls-design-system-bordered .rls-slider__track__on {
+  position: absolute;
+  width: 0%;
+  height: var(--pvt-track-height);
+  overflow: hidden;
+  z-index: var(--rls-z-index-4);
+  transition: width 200ms 0ms var(--rls-standard-curve);
+  background: var(--rls-theme-color-600);
+}
+.rls-design-system-bordered .rls-slider__thumb {
+  position: absolute;
+  top: 0.5rem;
+  left: 0rem;
+  cursor: pointer;
+  width: var(--rls-sizing-x10);
+  height: var(--rls-sizing-x10);
+  line-height: var(--rls-sizing-x10);
+  text-align: center;
+  font-size: var(--rls-tiny-font-size);
+  font-weight: var(--rls-font-weight-medium);
+  color: var(--pvt-thumb-color);
+  z-index: var(--rls-z-index-4);
+  border-radius: 50%;
+  background: var(--pvt-thumb-background);
+  transform: translateX(-50%);
+  transition: left 200ms 0ms var(--rls-standard-curve);
+}
+.rls-design-system-bordered .rls-tabs {
+  --pvt-background: var(--rls-app-color-100);
+  --pvt-border: var(--rls-app-border-1-200);
+  --pvt-children-font-color: var(--rls-app-color-800);
+  display: flex;
+  background: var(--pvt-background);
+  padding: var(--rls-sizing-x2);
+  box-sizing: border-box;
+  border-radius: var(--rls-sizing-x4);
+  border: var(--pvt-border);
+}
+.rls-design-system-bordered .rls-tabs__children {
+  height: var(--rls-sizing-x12);
+  line-height: var(--rls-sizing-x12);
+  border-radius: var(--rls-sizing-x4);
+  color: var(--rls-app-color-500);
+  font-size: var(--rls-smalltext-font-size);
+  font-weight: var(--rls-font-weight-medium);
+  letter-spacing: var(--rls-smalltext-letter-spacing);
+  text-align: center;
+  cursor: pointer;
+  transition: all 240ms var(--rls-standard-curve);
+}
+.rls-design-system-bordered .rls-tabs__children--active {
+  color: var(--pvt-children-font-color);
+  font-weight: var(--rls-font-weight-bold);
+  background: var(--rls-app-color-050);
+}
+.rls-design-system-bordered .rls-tabs__children--disabled {
+  color: var(--rls-app-color-400);
+  font-weight: var(--rls-font-weight-regular);
+  background: rgba(0, 0, 0, 0);
+  cursor: not-allowed;
+}
+.rls-design-system-bordered .rls-tabs[rls-theme] {
+  --pvt-background: var(--rls-theme-color-050);
+  --pvt-border: var(--rls-theme-border-1-200);
+  --pvt-children-font-color: var(--rls-theme-color-600);
+}
+.rls-design-system-bordered .rls-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  column-gap: var(--rls-sizing-x6);
+  height: var(--rlc-toolbar-height, var(--rls-sizing-x28));
+}
+.rls-design-system-bordered .rls-toolbar > * {
+  width: auto;
+}
+.rls-design-system-bordered .rls-toolbar__description {
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--rls-sizing-x2);
+  overflow: hidden;
+}
+.rls-design-system-bordered .rls-toolbar__description > label {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.rls-design-system-bordered .rls-toolbar__title {
+  color: var(--rls-app-color-900);
+  height: var(--rls-sizing-x12);
+  line-height: var(--rls-sizing-x12);
+  font-size: var(--rls-body-font-size);
+  letter-spacing: var(--rls-label-letter-spacing);
+  font-weight: var(--rls-font-weight-bold);
+}
+.rls-design-system-bordered .rls-toolbar__subtitle {
+  color: var(--rls-app-color-600);
+}
+.rls-design-system-bordered .rls-toolbar__actions {
+  display: flex;
+  box-sizing: border-box;
+  column-gap: var(--rls-sizing-x8);
+  align-items: center;
+}
+.rls-design-system-bordered .rls-bottom-sheet {
+  --pvt-component-transform: translateY(100%);
+  --pvt-component-height: 0rem;
+  --pvt-component-max-height: 75%;
+  --pvt-component-opacity: 0;
+  --pvt-component-visibility: hidden;
+  --pvt-component-transition: 320ms;
+  --pvt-backdrop-opacity: 0;
+  --pvt-backdrop-bottom: initial;
+  position: fixed;
+  display: flex;
+  top: 0rem;
+  left: 0rem;
+  width: 100%;
+  height: 100%;
+  justify-content: center;
+  z-index: var(--rls-z-index-24);
+  visibility: hidden;
+}
+.rls-design-system-bordered .rls-bottom-sheet--visible {
+  --pvt-component-visibility: visible;
+  --pvt-component-height: auto;
+  --pvt-component-opacity: 1;
+  --pvt-component-transform: translateY(0);
+  --pvt-backdrop-bottom: 0rem;
+  --pvt-backdrop-opacity: 1;
+  visibility: visible;
+}
+.rls-design-system-bordered .rls-bottom-sheet__component {
+  position: absolute;
+  display: flex;
+  bottom: 0px;
+  width: 100%;
+  max-width: 240rem;
+  max-height: var(--pvt-component-max-height);
+  flex-direction: column;
+  opacity: var(--pvt-component-opacity);
+  visibility: var(--pvt-component-visibility);
+  z-index: var(--rls-z-index-2);
+  border-radius: var(--rls-sizing-x4) var(--rls-sizing-x4) 0rem 0rem;
+  background: var(--rlc-bottom-sheet-background, var(--rls-app-color-050));
+  transform: var(--pvt-component-transform);
+  transition:
+    opacity var(--pvt-component-transition) 0ms var(--rls-deceleration-curve),
+    transform var(--pvt-component-transition) 0ms var(--rls-deceleration-curve),
+    visibility var(--pvt-component-transition) 0ms var(--rls-deceleration-curve);
+}
+.rls-design-system-bordered .rls-bottom-sheet__component::before {
+  display: block;
+  content: '';
+  width: var(--rls-sizing-x24);
+  height: var(--rls-sizing-x2);
+  border-radius: var(--rls-sizing-x2);
+  background: var(--rls-app-color-300);
+  margin: var(--rls-sizing-x3) auto;
+}
+.rls-design-system-bordered .rls-bottom-sheet__backdrop {
+  position: absolute;
+  display: block;
+  top: 0rem;
+  left: 0rem;
+  right: 0rem;
+  bottom: var(--pvt-backdrop-bottom);
+  opacity: var(--pvt-backdrop-opacity);
+  z-index: var(--rls-z-index-1);
+  background: var(
+    --rlc-bottom-sheet-backdrop-color,
+    var(--rls-theme-backdrop-400)
+  );
+  backdrop-filter: var(--rlc-bottom-sheet-backdrop-filter, blur(2px));
+  transition:
+    opacity 120ms 0ms var(--rls-deceleration-curve),
+    bottom 120ms 0ms var(--rls-deceleration-curve);
+}
+@media screen and (max-height: 960px) {
+  .rls-design-system-bordered .rls-bottom-sheet {
+    --pvt-component-max-height: calc(100% - 32rem);
+  }
+}
+@media screen and (max-height: 720px) {
+  .rls-design-system-bordered .rls-bottom-sheet {
+    --pvt-component-max-height: calc(100% - 24rem);
+  }
+}
+@media screen and (max-height: 560px) {
+  .rls-design-system-bordered .rls-bottom-sheet {
+    --pvt-component-max-height: calc(100% - 16rem);
+  }
+}
+.rls-design-system-bordered .rls-card {
+  --rlc-divider-background: var(--rls-app-color-300);
+  --pvt-background: var(--rls-app-color-050);
+  --pvt-border: var(--rlc-card-border, var(--rls-app-border-1-300));
+  --pvt-box-shadow: var(--rlc-card-box-shadow, var(--rls-app-shadow-center-6));
+  background: var(--pvt-background);
+  border-radius: var(--rls-sizing-x4);
+  box-shadow: var(--pvt-box-shadow);
+}
+.rls-design-system-bordered .rls-card[rls-theme] {
+  --rlc-divider-background: var(--rls-theme-color-200);
+  --pvt-background: var(--rls-theme-color-050);
+  --pvt-border: var(--rlc-card-border, var(--rls-theme-border-1-200));
+}
+.rls-design-system-bordered .rls-card--outline {
+  border: var(--pvt-border);
+  box-sizing: border-box;
+}
+.rls-design-system-bordered .rls-card__content {
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--rlc-card-content-gap, var(--rls-sizing-x4));
+  padding: var(--rlc-card-content-padding, var(--rls-sizing-x8));
+  box-sizing: border-box;
+}
+.rls-design-system-bordered .rls-confirmation {
+  --pvt-component-transform: translateY(150px) scale(0.6);
+  --pvt-component-height: 0rem;
+  --pvt-component-opacity: 0;
+  --pvt-component-visibility: hidden;
+  --pvt-title-font-size: var(--rls-heading6-font-size);
+  --pvt-title-letter-spacing: var(--rls-heading6-letter-spacing);
+  --pvt-title-line-height: var(--rls-heading6-line-height);
+  --pvt-title-text-transform: initial;
+  --pvt-subtitle-font-size: var(--rls-body-font-size);
+  --pvt-subtitle-letter-spacing: var(--rls-body-letter-spacing);
+  --pvt-subtitle-line-height: var(--rls-body-line-height);
+  --pvt-subtitle-text-transform: initial;
+  --pvt-content-font-size: var(--rls-input-font-size);
+  --pvt-content-letter-spacing: var(--rls-input-letter-spacing);
+  --pvt-content-line-height: var(--rls-input-line-height);
+  --pvt-backdrop-opacity: 0;
+  --pvt-backdrop-bottom: initial;
+  position: fixed;
+  display: flex;
+  top: 0rem;
+  left: 0rem;
+  width: var(--rls-html-max-width);
+  height: var(--rls-html-max-height);
+  justify-content: center;
+  align-items: center;
+  z-index: var(--rls-z-index-24);
+  visibility: hidden;
+}
+.rls-design-system-bordered .rls-confirmation--visible {
+  --pvt-component-visibility: visible;
+  --pvt-component-height: auto;
+  --pvt-component-opacity: 1;
+  --pvt-component-transform: translateY(0) scale(1);
+  --pvt-backdrop-bottom: 0rem;
+  --pvt-backdrop-opacity: 1;
+  visibility: visible;
+}
+.rls-design-system-bordered .rls-confirmation__component {
+  position: absolute;
+  display: flex;
+  width: calc(100% - var(--rls-sizing-x16));
+  max-width: 180rem;
+  height: var(--pvt-component-height);
+  flex-direction: column;
+  row-gap: var(--rls-sizing-x8);
+  opacity: var(--pvt-component-opacity);
+  visibility: var(--pvt-component-visibility);
+  padding: var(--rls-sizing-x8) 0rem;
+  box-sizing: border-box;
+  z-index: var(--rls-z-index-4);
+  border-radius: var(--rls-sizing-x4);
+  background: var(--rls-app-color-050);
+  box-shadow: var(--rls-app-shadow-4);
+  transform: var(--pvt-component-transform);
+  transition:
+    opacity 125ms 0ms var(--rls-deceleration-curve),
+    transform 125ms 0ms var(--rls-deceleration-curve),
+    visibility 125ms 0ms var(--rls-deceleration-curve);
+}
+.rls-design-system-bordered .rls-confirmation__header {
+  position: relative;
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  row-gap: var(--rls-sizing-x4);
+  padding: 0rem var(--rls-sizing-x8);
+  box-sizing: border-box;
+}
+.rls-design-system-bordered .rls-confirmation__title {
+  text-align: center;
+  color: var(--rls-app-color-900);
+  font-weight: var(--rls-font-weight-bold);
+  font-size: var(--pvt-title-font-size);
+  line-height: var(--pvt-title-line-height);
+  letter-spacing: var(--pvt-title-letter-spacing);
+  text-transform: var(--pvt-title-text-transform);
+}
+.rls-design-system-bordered .rls-confirmation__subtitle {
+  text-align: center;
+  color: var(--rls-theme-color-400);
+  font-weight: var(--rls-font-weight-bold);
+  font-size: var(--pvt-subtitle-font-size);
+  line-height: var(--pvt-subtitle-line-height);
+  letter-spacing: var(--pvt-subtitle-letter-spacing);
+  text-transform: var(--pvt-subtitle-text-transform);
+}
+.rls-design-system-bordered .rls-confirmation__body {
+  position: relative;
+  width: 100%;
+  padding: 0rem var(--rls-sizing-x8);
+  box-sizing: border-box;
+}
+.rls-design-system-bordered .rls-confirmation__content {
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--rls-sizing-x8);
+}
+.rls-design-system-bordered .rls-confirmation__content > p {
+  font-weight: var(--rls-font-weight-medium);
+  font-size: var(--pvt-content-font-size);
+  line-height: var(--pvt-content-line-height);
+  letter-spacing: var(--pvt-content-letter-spacing);
+  text-align: center;
+  color: var(--rls-app-color-600);
+}
+.rls-design-system-bordered .rls-confirmation__footer {
+  position: relative;
+  width: 100%;
+  padding: var(--rls-sizing-x4) var(--rls-sizing-x12) 0rem var(--rls-sizing-x12);
+  box-sizing: border-box;
+}
+.rls-design-system-bordered .rls-confirmation__actions {
+  --rlc-button-width: 100%;
+  position: relative;
+  display: flex;
+  width: 100%;
+  flex-direction: row-reverse;
+  justify-content: center;
+  column-gap: var(--rls-sizing-x8);
+}
+.rls-design-system-bordered .rls-confirmation__backdrop {
+  position: absolute;
+  display: block;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  bottom: var(--pvt-backdrop-bottom);
+  opacity: var(--pvt-backdrop-opacity);
+  z-index: var(--rls-z-index-2);
+  background: var(--rlc-modal-backdrop-color, var(--rls-theme-backdrop-400));
+  backdrop-filter: var(--rlc-modal-backdrop-filter, blur(2px));
+  transition:
+    opacity 120ms 0ms var(--rls-deceleration-curve),
+    bottom 120ms 0ms var(--rls-deceleration-curve);
+}
+@media screen and (max-width: 480px) {
+  .rls-design-system-bordered .rls-confirmation {
+    --pvt-title-font-size: var(--rls-title-font-size);
+    --pvt-title-letter-spacing: var(--rls-title-letter-spacing);
+    --pvt-title-line-height: var(--rls-title-line-height);
+    --pvt-subtitle-font-size: var(--rls-smalltext-font-size);
+    --pvt-subtitle-letter-spacing: var(--rls-smalltext-letter-spacing);
+    --pvt-subtitle-line-height: var(--rls-smalltext-line-height);
+    --pvt-content-font-size: var(--rls-paragraph-font-size);
+  }
+  .rls-design-system-bordered .rls-confirmation__header {
+    row-gap: var(--rls-sizing-x2);
+  }
+  .rls-design-system-bordered .rls-confirmation__actions {
+    flex-direction: column-reverse;
+    column-gap: 0rem;
+    row-gap: var(--rls-sizing-x4);
+  }
+}
+.rls-design-system-bordered .rls-datatable {
+  --pvt-datatable-font-size: var(
+    --rlc-datatable-font-size,
+    var(--rls-label-font-size)
+  );
+  --pvt-datatable-letter-spacing: var(
+    --rlc-datatable-letter-spacing,
+    var(--rls-label-letter-spacing)
+  );
+  --pvt-datatable-font-color: var(
+    --rlc-datatable-font-color,
+    var(--rls-app-color-900)
+  );
+  --pvt-datatable-padding-component: 0rem;
+  --pvt-datatable-padding-scroll: var(--rlc-datatable-padding-scroll, 0rem);
+  --pvt-datatable-table-overflow: initial;
+  --pvt-datatable-body-overflow: initial;
+  --pvt-datatable-border-radius: var(
+    --rlc-datatable-border-radius,
+    var(--rls-sizing-x4)
+  );
+  --pvt-datatable-header-padding-right: var(--pvt-datatable-padding-scroll);
+  --pvt-datatable-header-background: var(
+    --rlc-datatable-header-background,
+    var(--rls-app-color-100)
+  );
+  --pvt-datatable-header-border: var(
+    --rlc-datatable-header-border,
+    var(--rls-app-border-1-200)
+  );
+  --pvt-datatable-row-background: var(
+    --rlc-datatable-row-background,
+    transparent
+  );
+  --pvt-datatable-row-border: var(
+    --rlc-datatable-row-border,
+    var(--rls-app-border-1-200)
+  );
+  --pvt-datatable-summary-background: var(
+    --rlc-datatable-summary-background,
+    var(--rls-app-color-100)
+  );
+  --pvt-datatable-footer-background: var(
+    --rlc-datatable-footer-background,
+    var(--rls-app-color-100)
+  );
+  --pvt-datatable-floating-background: var(--rls-app-color-100);
+  --rlc-amount-font-size: var(--pvt-datatable-font-size);
+  --rlc-amount-width: 100%;
+  --rlc-badge-padding: 0.5rem 1.5rem;
+  --rlc-ballot-padding: 0rem;
+  --rlc-ballot-component-row-gap: var(--rls-sizing-x1);
+  --rlc-ballot-title-letter-spacing: var(--rls-smalltext-letter-spacing);
+  --rlc-ballot-title-font-size: var(--rls-smalltext-font-size);
+  --rlc-ballot-title-line-height: var(--rls-smalltext-line-height);
+  --rlc-ballot-subtitle-letter-spacing: var(--rls-overline-letter-spacing);
+  --rlc-ballot-subtitle-font-size: var(--rls-overline-font-size);
+  --rlc-ballot-subtitle-line-height: var(--rls-overline-line-height);
+  --rlc-field-box-body-background: transparent;
+  --rlc-field-box-padding: 0rem;
+  --rlc-field-box-width: 100%;
+  --rlc-field-box-error-display: none;
+  --rlc-field-box-label-display: none;
+  --rlc-input-font-size: var(--pvt-datatable-font-size);
+  --rlc-input-letter-spacing: var(--pvt-datatable-letter-spacing);
+  --rlc-skeleton-text-column-gap: var(--rls-sizing-x2);
+  position: relative;
+  display: flex;
+  width: 100%;
+  height: var(--rlc-datatable-height, auto);
+  flex-direction: column;
+  row-gap: var(--rls-sizing-x6);
+  border-radius: var(--rls-sizing-x4);
+  box-sizing: border-box;
+}
+.rls-design-system-bordered .rls-datatable--resizable {
+  --pvt-datatable-table-overflow: hidden;
+  --pvt-datatable-body-overflow: auto;
+  height: 100%;
+}
+.rls-design-system-bordered .rls-datatable--scrolleable {
+  --pvt-datatable-padding-scroll: var(--rls-sizing-x4);
+  --pvt-datatable-header-padding-right: calc(
+    var(--pvt-datatable-padding-scroll) +
+      var(--rlc-datatable-width-scroll, var(--rls-sizing-x4))
+  );
+  --pvt-datatable-padding-component: 0rem
+    calc(var(--pvt-datatable-padding-scroll) + 5rem) 0rem 0rem;
+}
+.rls-design-system-bordered .rls-datatable__toolbar {
+  display: flex;
+  flex: 0 0 auto;
+  column-gap: var(--rls-sizing-x6);
+  padding: var(--pvt-datatable-padding-component);
+  box-sizing: border-box;
+  background: var(--pvt-datatable-header-background);
+  border: var(--pvt-datatable-header-border);
+  border-radius: var(--pvt-datatable-border-radius);
+}
+.rls-design-system-bordered .rls-datatable__table {
+  display: flex;
+  flex: 0 1 auto;
+  overflow: var(--pvt-datatable-table-overflow);
+}
+.rls-design-system-bordered .rls-datatable__table > table {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  row-gap: var(--rls-sizing-x4);
+  border-spacing: 0;
+  border-collapse: collapse;
+}
+.rls-design-system-bordered .rls-datatable__head {
+  flex: 0 0 auto;
+  width: 100%;
+  padding-right: var(--pvt-datatable-header-padding-right);
+  box-sizing: border-box;
+}
+.rls-design-system-bordered .rls-datatable__header {
+  display: flex;
+  column-gap: var(--rls-sizing-x6);
+  padding: 0rem var(--rls-sizing-x6);
+  box-sizing: border-box;
+  background: var(--pvt-datatable-header-background);
+  border: var(--pvt-datatable-header-border);
+  border-radius: var(--pvt-datatable-border-radius);
+}
+.rls-design-system-bordered .rls-datatable__header .rls-poster {
+  width: calc(100% - var(--rls-sizing-x2));
+  margin: auto 0rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.rls-design-system-bordered .rls-datatable__title {
+  --rlc-field-box-body-background: transparent;
+  --rlc-field-box-body-background-focused: transparent;
+  --rlc-field-box-body-background-disabled: transparent;
+  --rlc-field-box-body-padding: 0rem;
+  --rlc-field-box-body-border: none;
+  --rlc-field-box-body-border-focused: none;
+  --rlc-field-box-body-border-error: none;
+  --rlc-field-box-body-border-disabled: none;
+  --rlc-field-box-body-shadow: none;
+  --rlc-field-box-body-shadow-error: none;
+  --rlc-field-box-action-background: transparent;
+  --rlc-field-list-control-font-size: var(--pvt-datatable-font-size);
+  --rlc-field-list-control-font-weight: var(--rls-font-weight-medium);
+  --rlc-field-list-control-letter-spacing: var(--rls-body-letter-spacing);
+  --rlc-field-list-element-padding: var(--rls-sizing-x4);
+  --rlc-field-list-suggestions-bottom: var(--rls-sizing-x24);
+  --rlc-field-list-suggestions-top: var(--rls-sizing-x24);
+  --rlc-poster-font-size: var(--pvt-datatable-font-size);
+  --rlc-poster-width: calc(100% - var(--rls-sizing-x2));
+  --rlc-poster-height: var(--rls-sizing-x8);
+  --rlc-poster-padding: var(--rls-sizing-x2);
+  position: relative;
+  display: flex;
+  min-height: var(--rls-sizing-x20);
+  align-items: var(--rlc-datatable-align-items, center);
+  justify-content: var(--rlc-datatable-justify-content, flex-start);
+  text-align: left;
+  white-space: nowrap;
+  font-weight: var(
+    --rlc-datatable-header-font-weight,
+    var(--rls-font-weight-semibold)
+  );
+  font-size: var(--pvt-datatable-font-size);
+  letter-spacing: var(--pvt-datatable-letter-spacing);
+}
+.rls-design-system-bordered .rls-datatable__title--contained {
+  overflow: hidden;
+}
+.rls-design-system-bordered .rls-datatable__title--control {
+  --rlc-action-ripple-dimension: var(--rls-sizing-x16);
+  --rlc-action-ripple-position: -8rem;
+  --rlc-avatar-radius: var(--rls-sizing-x3);
+  --rlc-avatar-width: var(--rls-sizing-x16);
+  --rlc-avatar-height: var(--rls-sizing-x16);
+  --rlc-avatar-font-size: var(--pvt-datatable-font-size);
+  --rlc-image-width: var(--rls-sizing-x12);
+  --rlc-image-height: var(--rls-sizing-x12);
+  --rlc-switch-max-width: var(--rls-sizing-x16);
+  --rlc-switch-component-height: var(--rls-sizing-x8);
+  --rlc-switch-element-width: var(--rls-sizing-x6);
+  --rlc-switch-element-height: var(--rls-sizing-x4);
+  --rlc-switch-element-radius: var(--rls-sizing-x4);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: var(--rls-sizing-x24);
+  padding: 0rem;
+}
+.rls-design-system-bordered .rls-datatable__title--control > img {
+  width: var(--rls-sizing-x12);
+}
+.rls-design-system-bordered .rls-datatable__title > span {
+  display: block;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+.rls-design-system-bordered .rls-datatable__title .rls-field-list {
+  --rlc-field-box-body-padding: var(--rls-sizing-x4) 0rem;
+  --rlc-field-box-action-dimension: var(--rls-sizing-x10);
+}
+.rls-design-system-bordered .rls-datatable__title .rls-poster {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.rls-design-system-bordered .rls-datatable__title > a:hover {
+  color: var(--rls-app-color-700);
+  text-decoration: underline;
+}
+.rls-design-system-bordered .rls-datatable__title > * {
+  color: var(--rls-app-color-700);
+}
+.rls-design-system-bordered .rls-datatable__body {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  row-gap: var(--rls-sizing-x6);
+  padding-right: var(--pvt-datatable-padding-scroll);
+  box-sizing: border-box;
+  overflow-y: var(--pvt-datatable-body-overflow);
+}
+.rls-design-system-bordered .rls-datatable__subheader,
+.rls-design-system-bordered .rls-datatable__record,
+.rls-design-system-bordered .rls-datatable__totals {
+  position: relative;
+  display: flex;
+  column-gap: var(--rls-sizing-x6);
+  padding: 0rem var(--rls-sizing-x6);
+  box-sizing: border-box;
+  background: var(--pvt-datatable-row-background);
+  border: var(--pvt-datatable-row-border);
+  border-radius: var(--pvt-datatable-border-radius);
+}
+.rls-design-system-bordered .rls-datatable__subheader--contained,
+.rls-design-system-bordered .rls-datatable__record--contained,
+.rls-design-system-bordered .rls-datatable__totals--contained {
+  overflow: hidden;
+}
+.rls-design-system-bordered .rls-datatable__subheader--success,
+.rls-design-system-bordered .rls-datatable__record--success,
+.rls-design-system-bordered .rls-datatable__totals--success {
+  --pvt-datatable-floating-background: var(--rls-success-color-100);
+  background: var(--rls-success-color-050);
+  border: var(--rls-success-border-1-200);
+}
+.rls-design-system-bordered .rls-datatable__subheader--info,
+.rls-design-system-bordered .rls-datatable__record--info,
+.rls-design-system-bordered .rls-datatable__totals--info {
+  --pvt-datatable-floating-background: var(--rls-info-color-100);
+  background: var(--rls-info-color-050);
+  border: var(--rls-info-border-1-200);
+}
+.rls-design-system-bordered .rls-datatable__subheader--warning,
+.rls-design-system-bordered .rls-datatable__record--warning,
+.rls-design-system-bordered .rls-datatable__totals--warning {
+  --pvt-datatable-floating-background: var(--rls-warning-color-100);
+  background: var(--rls-warning-color-050);
+  border: var(--rls-warning-border-1-200);
+}
+.rls-design-system-bordered .rls-datatable__subheader--error,
+.rls-design-system-bordered .rls-datatable__record--error,
+.rls-design-system-bordered .rls-datatable__totals--error {
+  --pvt-datatable-floating-background: var(--rls-danger-color-100);
+  background: var(--rls-danger-color-050);
+  border: var(--rls-danger-border-1-200);
+}
+.rls-design-system-bordered .rls-datatable__subheader {
+  --pvt-data-font-color: var(--rls-app-color-700);
+  --pvt-data-font-weight: var(--rls-font-weight-semibold);
+  position: sticky;
+  top: 0px;
+  z-index: var(--rls-z-index-4);
+  background: var(--pvt-datatable-header-background);
+}
+.rls-design-system-bordered .rls-datatable__cell,
+.rls-design-system-bordered .rls-datatable__data {
+  --rlc-field-box-body-background: transparent;
+  --rlc-field-box-body-background-focused: transparent;
+  --rlc-field-box-body-background-disabled: transparent;
+  --rlc-field-box-body-padding: 0rem;
+  --rlc-field-box-body-border: none;
+  --rlc-field-box-body-border-focused: none;
+  --rlc-field-box-body-border-error: none;
+  --rlc-field-box-body-border-disabled: none;
+  --rlc-field-box-body-shadow: none;
+  --rlc-field-box-body-shadow-error: none;
+  --rlc-field-box-action-background: transparent;
+  --rlc-field-list-control-font-size: var(--pvt-datatable-font-size);
+  --rlc-field-list-control-font-weight: var(--rls-font-weight-medium);
+  --rlc-field-list-control-letter-spacing: var(--rls-body-letter-spacing);
+  --rlc-field-list-element-padding: var(--rls-sizing-x4);
+  --rlc-field-list-suggestions-bottom: var(--rls-sizing-x24);
+  --rlc-field-list-suggestions-top: var(--rls-sizing-x24);
+  --rlc-poster-font-size: var(--pvt-datatable-font-size);
+  --rlc-poster-width: calc(100% - var(--rls-sizing-x2));
+  --rlc-poster-height: var(--rls-sizing-x8);
+  --rlc-poster-padding: var(--rls-sizing-x2);
+  position: relative;
+  display: flex;
+  min-height: var(--rls-sizing-x20);
+  align-items: var(--rlc-datatable-align-items, center);
+  justify-content: var(--rlc-datatable-justify-content, flex-start);
+  cursor: default;
+  text-align: left;
+  padding: var(--rls-sizing-x2) 0rem;
+  font-size: var(--pvt-datatable-font-size);
+  letter-spacing: var(--pvt-datatable-letter-spacing);
+}
+.rls-design-system-bordered .rls-datatable__cell--contained,
+.rls-design-system-bordered .rls-datatable__data--contained {
+  overflow: hidden;
+}
+.rls-design-system-bordered .rls-datatable__cell--control,
+.rls-design-system-bordered .rls-datatable__data--control {
+  --rlc-action-ripple-dimension: var(--rls-sizing-x16);
+  --rlc-action-ripple-position: -8rem;
+  --rlc-avatar-radius: var(--rls-sizing-x3);
+  --rlc-avatar-width: var(--rls-sizing-x16);
+  --rlc-avatar-height: var(--rls-sizing-x16);
+  --rlc-avatar-font-size: var(--pvt-datatable-font-size);
+  --rlc-image-width: var(--rls-sizing-x12);
+  --rlc-image-height: var(--rls-sizing-x12);
+  --rlc-switch-max-width: var(--rls-sizing-x16);
+  --rlc-switch-component-height: var(--rls-sizing-x8);
+  --rlc-switch-element-width: var(--rls-sizing-x6);
+  --rlc-switch-element-height: var(--rls-sizing-x4);
+  --rlc-switch-element-radius: var(--rls-sizing-x4);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: var(--rls-sizing-x24);
+  padding: 0rem;
+}
+.rls-design-system-bordered .rls-datatable__cell--control > img,
+.rls-design-system-bordered .rls-datatable__data--control > img {
+  width: var(--rls-sizing-x12);
+}
+.rls-design-system-bordered .rls-datatable__cell > span,
+.rls-design-system-bordered .rls-datatable__data > span {
+  display: block;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+.rls-design-system-bordered .rls-datatable__cell .rls-field-list,
+.rls-design-system-bordered .rls-datatable__data .rls-field-list {
+  --rlc-field-box-body-padding: var(--rls-sizing-x4) 0rem;
+  --rlc-field-box-action-dimension: var(--rls-sizing-x10);
+}
+.rls-design-system-bordered .rls-datatable__cell .rls-poster,
+.rls-design-system-bordered .rls-datatable__data .rls-poster {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.rls-design-system-bordered .rls-datatable__cell > a:hover,
+.rls-design-system-bordered .rls-datatable__data > a:hover {
+  color: var(--rls-app-color-700);
+  text-decoration: underline;
+}
+.rls-design-system-bordered .rls-datatable__cell {
+  color: var(--pvt-datatable-font-color);
+  font-weight: var(--rls-font-weight-regular);
+}
+.rls-design-system-bordered .rls-datatable__data {
+  color: var(--pvt-data-font-color, var(--pvt-datatable-font-color));
+  font-weight: var(--pvt-data-font-weight, var(--rls-font-weight-regular));
+}
+.rls-design-system-bordered .rls-datatable__floating {
+  --pvt-action-tooltip-left: 0;
+  --pvt-action-tooltip-right: initial;
+  --pvt-action-tooltip-transform: translate(calc(-100% - var(--rls-sizing-x4)));
+  position: absolute;
+  display: flex;
+  left: initial;
+  right: 0;
+  height: 100%;
+  column-gap: 4rem;
+  align-items: center;
+  z-index: var(--rls-z-index-2);
+  padding: 0rem var(--rls-sizing-x6);
+  background: var(--pvt-datatable-floating-background);
+  border-right: none;
+  transform: translateX(calc(100% - var(--rls-sizing-x4)));
+  transition: transform 240ms var(--rls-standard-curve);
+}
+.rls-design-system-bordered .rls-datatable__floating:hover {
+  transform: translateX(0);
+}
+.rls-design-system-bordered .rls-datatable__floating--invested {
+  --pvt-action-tooltip-left: initial;
+  --pvt-action-tooltip-right: 0;
+  --pvt-action-tooltip-transform: translate(calc(100% + var(--rls-sizing-x4)));
+  right: initial;
+  left: 0;
+  transform: translateX(calc(-100% + var(--rls-sizing-x4)));
+}
+.rls-design-system-bordered .rls-datatable__floating[rls-theme] {
+  background: var(--rls-theme-color-050);
+}
+.rls-design-system-bordered
+  .rls-datatable__floating
+  .rls-button-action__tooltip {
+  top: 0;
+  left: var(--pvt-action-tooltip-left);
+  right: var(--pvt-action-tooltip-right);
+  transform: var(--pvt-action-tooltip-transform);
+  z-index: var(--rls-z-index-2);
+}
+.rls-design-system-bordered .rls-datatable__summary {
+  --pvt-datatable-row-background: var(--pvt-datatable-summary-background);
+  flex: 0 0 auto;
+  padding-right: var(--pvt-datatable-header-padding-right);
+  box-sizing: border-box;
+}
+.rls-design-system-bordered .rls-datatable__footer {
+  --pvt-datatable-row-background: var(--pvt-datatable-footer-background);
+  position: relative;
+  flex: 0 0 auto;
+  width: 100%;
+  overflow: hidden;
+  padding: var(--pvt-datatable-padding-component);
+  box-sizing: border-box;
+}
+.rls-design-system-bordered .rls-dropdown {
+  --pvt-content-opacity: 0;
+  --pvt-content-transform: scale(0, 0);
+  position: var(--rlc-dropdown-position, absolute);
+  display: block;
+  opacity: 0;
+  width: auto;
+  z-index: -16;
+  pointer-events: none;
+  transition: opacity 240ms 0ms var(--rls-standard-curve);
+}
+.rls-design-system-bordered .rls-dropdown--visible {
+  --pvt-content-opacity: 1;
+  --pvt-content-transform: scale(1, 1);
+  opacity: 1;
+  pointer-events: initial;
+  z-index: var(--rlc-dropdown-z-index, var(--rls-z-index-4));
+}
+.rls-design-system-bordered .rls-dropdown__content {
+  display: block;
+  width: auto;
+  max-width: var(--rlc-dropdown-max-width, 150rem);
+  border-radius: var(--rlc-dropdown-radius, var(--rls-sizing-x6));
+  padding: var(--rlc-dropdown-padding, var(--rls-sizing-x6));
+  box-sizing: border-box;
+  border: var(--rlc-dropdown-border, var(--rls-app-border-1-200));
+  background: var(--rlc-dropdown-background, var(--rls-app-color-050));
+  box-shadow: var(--rls-theme-shadow-500);
+  opacity: var(--pvt-content-opacity);
+  transform: var(--pvt-content-transform);
+  transition:
+    transform 240ms 0ms var(--rls-standard-curve),
+    opacity 240ms 0ms var(--rls-standard-curve);
+}
+.rls-design-system-bordered .rls-field-autocomplete {
+  --pvt-control-width: 100%;
+  --pvt-control-opacity: 1;
+}
+.rls-design-system-bordered .rls-field-autocomplete.rls-field-box--selected {
+  --pvt-control-width: calc(100% - var(--pvt-action-dimension));
+}
+.rls-design-system-bordered .rls-field-autocomplete.rls-field-box--disabled {
+  --pvt-control-opacity: 0.5;
+}
+.rls-design-system-bordered
+  .rls-field-autocomplete
+  .rls-field-list__ul__search {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  margin-top: var(--rls-sizing-x2);
+  margin-bottom: var(--rls-sizing-x6);
+  background: var(--rls-app-color-100);
+  border-radius: var(--rls-sizing-x4);
+  padding: var(--rls-sizing-x4);
+  box-sizing: border-box;
+}
+.rls-design-system-bordered
+  .rls-field-autocomplete
+  .rls-field-list__ul__search
+  button {
+  color: var(--rls-app-color-600);
+  background: rgba(0, 0, 0, 0);
+}
+.rls-design-system-bordered
+  .rls-field-autocomplete
+  .rls-field-list__ul__search
+  button:not(:disabled):hover {
+  color: var(--rls-theme-color-300);
+}
+.rls-design-system-bordered
+  .rls-field-autocomplete
+  .rls-field-list__ul__search
+  button:disabled {
+  opacity: 0.5;
+}
+.rls-design-system-bordered
+  .rls-field-autocomplete
+  .rls-field-list__ul__control {
+  width: 100%;
+  height: var(--rls-sizing-x12);
+  line-height: var(--rls-sizing-x12);
+  padding: 0rem;
+  cursor: text;
+  border: none;
+  outline: none;
+  background: rgba(0, 0, 0, 0);
+  color: var(--rls-app-color-900);
+  font-size: var(--rls-input-font-size);
+  font-weight: var(--rls-font-weight-medium);
+  letter-spacing: var(--rls-input-letter-spacing);
+}
+.rls-design-system-bordered
+  .rls-field-autocomplete
+  .rls-field-list__ul__control::placeholder {
+  color: var(--rls-app-color-400);
+}
+.rls-design-system-bordered
+  .rls-field-autocomplete
+  .rls-field-list__ul__control::selection {
+  background: var(--rls-theme-color-700);
+  color: var(--rls-app-color-050);
+}
+.rls-design-system-bordered
+  .rls-field-autocomplete
+  .rls-field-list__ul__control:disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+.rls-design-system-bordered
+  .rls-field-autocomplete
+  .rls-field-list__ul
+  .rls-progress-bar {
+  margin-bottom: var(--rls-sizing-x8);
+}
+.rls-design-system-bordered .rls-field-clock {
+  --rlc-field-box-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
+  --pvt-font-size: var(--rlc-field-clock-font-size, var(--rls-input-font-size));
+  --pvt-letter-spacing: var(
+    --rlc-field-clock-letter-spacing,
+    var(--rls-input-letter-spacing)
+  );
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+}
+.rls-design-system-bordered .rls-field-clock .rls-field-box--readonly {
+  --pvt-control-width: 100%;
+}
+.rls-design-system-bordered .rls-field-clock .rls-field-box__body {
+  column-gap: var(--rls-sizing-x2);
+}
+.rls-design-system-bordered .rls-field-clock__control {
+  position: relative;
+  width: 100%;
+  height: var(--rls-sizing-x12);
+  line-height: var(--rls-sizing-x12);
+  padding: 0rem;
+  cursor: default;
+  border: none;
+  outline: none;
+  background: rgba(0, 0, 0, 0);
+  color: var(--rls-app-color-900);
+  font-weight: var(--rls-font-weight-medium);
+  font-size: var(--pvt-font-size);
+  letter-spacing: var(--pvt-letter-spacing);
+}
+.rls-design-system-bordered .rls-field-clock__control::placeholder {
+  color: var(--rls-app-color-400);
+}
+.rls-design-system-bordered .rls-field-clock__control:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.rls-design-system-bordered .rls-field-clock-modal {
+  --rlc-modal-background: transparent;
+  --rlc-modal-max-width: 150rem;
+  --rlc-picker-clock-radius: var(--rls-sizing-x4);
+  --rlc-picker-clock-background: var(--rls-app-color-050);
+  --rlc-picker-clock-padding: var(--rls-sizing-x4) 0rem;
+}
+.rls-design-system-bordered .rls-field-date {
+  --rlc-field-box-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
+  --pvt-font-size: var(--rlc-field-date-font-size, var(--rls-input-font-size));
+  --pvt-letter-spacing: var(
+    --rlc-field-date-letter-spacing,
+    var(--rls-input-letter-spacing)
+  );
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+}
+.rls-design-system-bordered .rls-field-date .rls-field-box--readonly {
+  --pvt-control-width: 100%;
+}
+.rls-design-system-bordered .rls-field-date .rls-field-box__body {
+  column-gap: var(--rls-sizing-x2);
+}
+.rls-design-system-bordered .rls-field-date__control {
+  position: relative;
+  width: 100%;
+  height: var(--rls-sizing-x12);
+  line-height: var(--rls-sizing-x12);
+  padding: 0rem;
+  cursor: default;
+  border: none;
+  outline: none;
+  background: rgba(0, 0, 0, 0);
+  color: var(--rls-app-color-900);
+  font-weight: var(--rls-font-weight-medium);
+  font-size: var(--pvt-font-size);
+  letter-spacing: var(--pvt-letter-spacing);
+}
+.rls-design-system-bordered .rls-field-date__control::placeholder {
+  color: var(--rls-app-color-400);
+}
+.rls-design-system-bordered .rls-field-date__control:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.rls-design-system-bordered .rls-field-date-modal {
+  --rlc-modal-background: transparent;
+  --rlc-modal-max-width: 150rem;
+  --rlc-picker-date-radius: var(--rls-sizing-x4);
+  --rlc-picker-date-background: var(--rls-app-color-050);
+}
+.rls-design-system-bordered .rls-field-date-range {
+  --rlc-field-box-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
+  --pvt-font-size: var(
+    --rlc-field-date-range-font-size,
+    var(--rls-input-font-size)
+  );
+  --pvt-letter-spacing: var(
+    --rlc-field-date-range-letter-spacing,
+    var(--rls-input-letter-spacing)
+  );
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+}
+.rls-design-system-bordered .rls-field-date-range .rls-field-box--readonly {
+  --pvt-control-width: 100%;
+}
+.rls-design-system-bordered .rls-field-date-range__control {
+  position: relative;
+  width: 100%;
+  height: var(--rls-sizing-x12);
+  line-height: var(--rls-sizing-x12);
+  padding: 0rem;
+  cursor: default;
+  border: none;
+  outline: none;
+  background: rgba(0, 0, 0, 0);
+  color: var(--rls-app-color-900);
+  font-weight: var(--rls-font-weight-medium);
+  font-size: var(--pvt-font-size);
+  letter-spacing: var(--pvt-letter-spacing);
+}
+.rls-design-system-bordered .rls-field-date-range__control::placeholder {
+  color: var(--rls-app-color-400);
+}
+.rls-design-system-bordered .rls-field-date-range__control:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.rls-design-system-bordered .rls-field-date-range-modal {
+  --rlc-modal-background: transparent;
+  --rlc-modal-max-width: 150rem;
+  --rlc-picker-date-range-radius: var(--rls-sizing-x4);
+  --rlc-picker-date-range-background: var(--rls-app-color-050);
+}
+.rls-design-system-bordered .rls-field-select {
+  --rlc-field-list-control-cursor: pointer;
+}
+.rls-design-system-bordered .rls-field-select .rls-field-list__action {
+  transition: transform 160ms 0ms var(--rls-sharp-curve);
+}
+.rls-design-system-bordered .rls-field-select .rls-field-list__action--visible {
+  transform: rotate(180deg);
+}
+.rls-design-system-bordered .rls-form {
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--rls-sizing-x8);
+}
+.rls-design-system-bordered .rls-form__content {
+  position: relative;
+  padding: 0rem var(--rls-sizing-x8);
+  box-sizing: border-box;
+}
+.rls-design-system-bordered .rls-form__footer {
+  position: relative;
+  display: flex;
+  justify-content: var(--rlc-form-footer-justify-content, end);
+  column-gap: var(--rls-sizing-x8);
+  padding: 0rem var(--rls-sizing-x8);
+  box-sizing: border-box;
+}
+.rls-design-system-bordered .rls-form-navigation {
+  --rlc-field-box-body-background: var(
+    --rlc-form-navigation-field-box-background,
+    var(--rls-app-color-050)
+  );
+  --pvt-component-transition: 160ms;
+  position: fixed;
+  display: flex;
+  top: 0rem;
+  right: 0rem;
+  width: calc(100% - var(--rls-sizing-x16));
+  max-width: var(--rlc-form-navigation-max-width, 160rem);
+  height: 100%;
+  justify-content: flex-end;
+  visibility: hidden;
+  transform: translateX(100%);
+  transition:
+    opacity var(--pvt-component-transition) 0ms var(--rls-deceleration-curve),
+    transform var(--pvt-component-transition) 0ms var(--rls-deceleration-curve),
+    visibility var(--pvt-component-transition) 0ms var(--rls-deceleration-curve);
+  z-index: var(--rls-z-index-16);
+}
+.rls-design-system-bordered .rls-form-navigation--visible {
+  visibility: visible;
+  transform: translateX(0%);
+}
+.rls-design-system-bordered .rls-form-navigation__component {
+  position: absolute;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  background: var(--rlc-form-navigation-background, var(--rls-app-color-100));
+  border-left: var(--rlc-form-navigation-border, var(--rls-app-border-1-200));
+}
+.rls-design-system-bordered .rls-image-chooser {
+  position: relative;
+  width: var(--rlc-image-chooser-width, 48rem);
+  height: var(--rlc-image-chooser-height, 48rem);
+  border-radius: var(--rlc-image-chooser-radius, 50%);
+  overflow: hidden;
+}
+.rls-design-system-bordered .rls-image-chooser__avatar {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+  background: var(--rls-theme-color-600);
+}
+.rls-design-system-bordered .rls-image-chooser__avatar img {
+  width: 100%;
+}
+.rls-design-system-bordered .rls-image-chooser > input[type='file'] {
+  position: absolute;
+  z-index: -1;
+  visibility: hidden;
+}
+.rls-design-system-bordered .rls-image-chooser__modal {
+  --rlc-image-editor-footer-padding: 0rem var(--rls-sizing-x12)
+    var(--rls-sizing-x12) var(--rls-sizing-x12);
+  --rlc-modal-max-width: calc(250rem - var(--rls-sizing-x16));
+  width: 100%;
+}
+@media only screen and (max-width: 480px) {
+  .rls-design-system-bordered .rls-image-chooser__modal {
+    --rlc-image-editor-footer-padding: 0rem var(--rls-sizing-x8)
+      var(--rls-sizing-x8) var(--rls-sizing-x8);
+    --rlc-modal-max-width: 160rem;
+  }
+}
+.rls-design-system-bordered .rls-image-editor {
+  --pvt-overlay-background: var(--rls-theme-backdrop-900);
+  --pvt-sliders-padding: 0rem var(--rls-sizing-x8);
+  --pvt-actions-direction: row;
+  --pvt-actions-row-gap: 0rem;
+  --pvt-actions-column-gap: var(--rls-sizing-x8);
+  position: relative;
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  row-gap: var(--rls-sizing-x12);
+}
+.rls-design-system-bordered .rls-image-editor__body {
+  position: relative;
+  display: flex;
+  height: 100%;
+  justify-content: center;
+  background: var(--rls-app-color-900);
+}
+.rls-design-system-bordered .rls-image-editor__body__image {
+  overflow: hidden;
+}
+.rls-design-system-bordered .rls-image-editor__body__selection {
+  position: absolute;
+  cursor: move;
+  box-sizing: border-box;
+  z-index: var(--rls-z-index-4);
+  border: var(
+    --rlc-image-editor-selection-border,
+    2px dashed var(--rls-app-color-050)
+  );
+  user-select: none;
+}
+.rls-design-system-bordered .rls-image-editor__body__overlay--top {
+  position: absolute;
+  top: 0rem;
+  z-index: var(--rls-z-index-2);
+  background: var(--pvt-overlay-background);
+}
+.rls-design-system-bordered .rls-image-editor__body__overlay--right {
+  position: absolute;
+  right: 0rem;
+  height: 100%;
+  z-index: var(--rls-z-index-2);
+  background: var(--pvt-overlay-background);
+}
+.rls-design-system-bordered .rls-image-editor__body__overlay--bottom {
+  position: absolute;
+  bottom: 0rem;
+  z-index: var(--rls-z-index-2);
+  background: var(--pvt-overlay-background);
+}
+.rls-design-system-bordered .rls-image-editor__body__overlay--left {
+  position: absolute;
+  right: 0rem;
+  height: 100%;
+  z-index: var(--rls-z-index-2);
+  background: var(--pvt-overlay-background);
+}
+.rls-design-system-bordered .rls-image-editor__footer {
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--rls-sizing-x12);
+  padding: var(--rlc-image-editor-footer-padding, 0rem);
+  box-sizing: border-box;
+}
+.rls-design-system-bordered .rls-image-editor__sliders {
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--rls-sizing-x6);
+  padding: var(--pvt-sliders-padding);
+  box-sizing: border-box;
+}
+.rls-design-system-bordered .rls-image-editor__actions {
+  display: flex;
+  flex-direction: var(--pvt-actions-direction);
+  justify-content: center;
+  row-gap: var(--pvt-actions-row-gap);
+  column-gap: var(--pvt-actions-column-gap);
+}
+.rls-design-system-bordered .rls-image-editor > canvas {
+  position: absolute;
+  top: 0rem;
+  left: 0rem;
+  z-index: -1;
+  visibility: hidden;
+  pointer-events: none;
+}
+@media only screen and (max-width: 420px) {
+  .rls-design-system-bordered .rls-image-editor {
+    --pvt-sliders-padding: 0rem;
+    --pvt-actions-direction: column;
+    --pvt-actions-row-gap: var(--rls-sizing-x6);
+    --pvt-actions-column-gap: 0rem;
+    row-gap: var(--rls-sizing-x8);
+  }
+}
+.rls-design-system-bordered .rls-image-editor-modal {
+  --rlc-image-editor-footer-padding: 0rem var(--rls-sizing-x12)
+    var(--rls-sizing-x12) var(--rls-sizing-x12);
+  --rlc-modal-max-width: calc(250rem - var(--rls-sizing-x16));
+  width: 100%;
+}
+@media only screen and (max-width: 480px) {
+  .rls-design-system-bordered .rls-image-editor-modal {
+    --rlc-image-editor-footer-padding: 0rem var(--rls-sizing-x8)
+      var(--rls-sizing-x8) var(--rls-sizing-x8);
+    --rlc-modal-max-width: 160rem;
+  }
+}
+.rls-design-system-bordered .rls-modal {
+  --pvt-component-transform: translateY(150px) scale(0.6);
+  --pvt-component-height: 0rem;
+  --pvt-component-opacity: 0;
+  --pvt-component-visibility: hidden;
+  --pvt-component-transition: 160ms;
+  --pvt-backdrop-opacity: 0;
+  --pvt-backdrop-bottom: initial;
+  position: fixed;
+  display: flex;
+  top: 0rem;
+  left: 0rem;
+  width: 100%;
+  height: 100%;
+  z-index: var(--rls-z-index-24);
+  visibility: hidden;
+  align-items: center;
+  justify-content: center;
+}
+.rls-design-system-bordered .rls-modal--visible {
+  --pvt-component-visibility: visible;
+  --pvt-component-height: auto;
+  --pvt-component-opacity: 1;
+  --pvt-component-transform: translateY(0) scale(1);
+  --pvt-backdrop-bottom: 0rem;
+  --pvt-backdrop-opacity: 1;
+  visibility: visible;
+}
+.rls-design-system-bordered .rls-modal__component {
+  position: absolute;
+  display: flex;
+  max-width: var(--rlc-modal-max-width, calc(100% - var(--rls-sizing-x8)));
+  height: var(--pvt-component-height);
+  max-height: calc(100% - var(--rls-sizing-x12));
+  flex-direction: column;
+  opacity: var(--pvt-component-opacity);
+  visibility: var(--pvt-component-visibility);
+  z-index: var(--rls-z-index-2);
+  border-radius: var(--rls-sizing-x4);
+  background: var(--rlc-modal-background, var(--rls-app-color-050));
+  transform: var(--pvt-component-transform);
+  transition:
+    opacity var(--pvt-component-transition) 0ms var(--rls-deceleration-curve),
+    transform var(--pvt-component-transition) 0ms var(--rls-deceleration-curve),
+    visibility var(--pvt-component-transition) 0ms var(--rls-deceleration-curve);
+}
+.rls-design-system-bordered .rls-modal__backdrop {
+  position: absolute;
+  display: block;
+  top: 0rem;
+  left: 0rem;
+  right: 0rem;
+  bottom: var(--pvt-backdrop-bottom);
+  opacity: var(--pvt-backdrop-opacity);
+  z-index: var(--rls-z-index-1);
+  background: var(--rlc-modal-backdrop-color, var(--rls-theme-backdrop-400));
+  backdrop-filter: var(--rlc-modal-backdrop-filter, blur(2px));
+  transition:
+    opacity 120ms 0ms var(--rls-deceleration-curve),
+    bottom 120ms 0ms var(--rls-deceleration-curve);
+}
+.rls-design-system-bordered .rls-modal-sheet {
+  --pvt-component-transform: translateY(150px) scale(0.6);
+  --pvt-component-bottom: initial;
+  --pvt-component-max-width: var(
+    --rlc-modal-sheet-max-width,
+    calc(100% - var(--rls-sizing-x8))
+  );
+  --pvt-component-height: 0rem;
+  --pvt-component-max-height: calc(100% - var(--rls-sizing-x12));
+  --pvt-component-border-radius: var(
+    --rlc-modal-sheet-border-radius,
+    var(--rls-sizing-x4)
+  );
+  --pvt-component-opacity: 0;
+  --pvt-component-visibility: hidden;
+  --pvt-component-transition: 160ms;
+  --pvt-backdrop-opacity: 0;
+  --pvt-backdrop-bottom: initial;
+  position: fixed;
+  display: flex;
+  top: 0rem;
+  left: 0rem;
+  width: 100%;
+  height: 100%;
+  z-index: var(--rls-z-index-24);
+  visibility: hidden;
+  align-items: center;
+  justify-content: center;
+}
+.rls-design-system-bordered .rls-modal-sheet--visible {
+  --pvt-component-visibility: visible;
+  --pvt-component-height: auto;
+  --pvt-component-opacity: 1;
+  --pvt-component-transform: translateY(0) scale(1);
+  --pvt-backdrop-bottom: 0rem;
+  --pvt-backdrop-opacity: 1;
+  visibility: visible;
+}
+.rls-design-system-bordered .rls-modal-sheet__component {
+  position: absolute;
+  display: flex;
+  bottom: var(--pvt-component-bottom);
+  max-width: var(--pvt-component-max-width);
+  height: var(--pvt-component-height);
+  max-height: var(--pvt-component-max-height);
+  flex-direction: column;
+  opacity: var(--pvt-component-opacity);
+  visibility: var(--pvt-component-visibility);
+  z-index: var(--rls-z-index-2);
+  border-radius: var(--pvt-component-border-radius);
+  background: var(--rlc-modal-sheet-background, var(--rls-app-color-050));
+  transform: var(--pvt-component-transform);
+  transition:
+    opacity var(--pvt-component-transition) 0ms var(--rls-deceleration-curve),
+    transform var(--pvt-component-transition) 0ms var(--rls-deceleration-curve),
+    visibility var(--pvt-component-transition) 0ms var(--rls-deceleration-curve);
+}
+.rls-design-system-bordered .rls-modal-sheet__backdrop {
+  position: absolute;
+  display: block;
+  top: 0rem;
+  left: 0rem;
+  right: 0rem;
+  bottom: var(--pvt-backdrop-bottom);
+  opacity: var(--pvt-backdrop-opacity);
+  z-index: var(--rls-z-index-1);
+  background: var(
+    --rlc-modal-sheet-backdrop-color,
+    var(--rls-theme-backdrop-400)
+  );
+  backdrop-filter: var(--rlc-modal-sheet-backdrop-filter, blur(2px));
+  transition:
+    opacity 120ms 0ms var(--rls-deceleration-curve),
+    bottom 120ms 0ms var(--rls-deceleration-curve);
+}
+@media screen and (max-width: 640px) {
+  .rls-design-system-bordered .rls-modal-sheet {
+    --pvt-component-transform: translateY(100%);
+    --pvt-component-bottom: 0px;
+    --pvt-component-max-width: 240rem;
+    --pvt-component-max-height: 75%;
+    --pvt-component-border-radius: var(--rls-sizing-x4) var(--rls-sizing-x4)
+      0rem 0rem;
+    --pvt-component-transition: 320ms;
+    align-items: initial;
+  }
+  .rls-design-system-bordered .rls-modal-sheet--visible {
+    --pvt-component-transform: translateY(0);
+  }
+  .rls-design-system-bordered .rls-modal-sheet__component::before {
+    display: block;
+    content: '';
+    width: var(--rls-sizing-x24);
+    height: var(--rls-sizing-x2);
+    border-radius: var(--rls-sizing-x2);
+    background: var(--rls-app-color-300);
+    margin: var(--rls-sizing-x3) auto;
+  }
+}
+@media screen and (max-width: 640px) and (max-height: 960px) {
+  .rls-design-system-bordered .rls-modal-sheet {
+    --pvt-component-max-height: calc(100% - 32rem);
+  }
+}
+@media screen and (max-width: 640px) and (max-height: 720px) {
+  .rls-design-system-bordered .rls-modal-sheet {
+    --pvt-component-max-height: calc(100% - 24rem);
+  }
+}
+@media screen and (max-width: 640px) and (max-height: 560px) {
+  .rls-design-system-bordered .rls-modal-sheet {
+    --pvt-component-max-height: calc(100% - 16rem);
+  }
+}
+.rls-design-system-bordered .rls-picker-clock {
+  position: relative;
+  display: flex;
+  width: 150rem;
+  flex-direction: column;
+  row-gap: var(--rls-sizing-x8);
+  overflow: hidden;
+  user-select: none;
+  padding: var(--rlc-picker-clock-padding, 0rem);
+  box-sizing: border-box;
+  border-radius: var(--rlc-picker-clock-radius, 0rem);
+  background: var(--rlc-picker-clock-background, transparent);
+}
+.rls-design-system-bordered .rls-picker-clock__header {
+  display: flex;
+  column-gap: var(--rls-sizing-x8);
+  padding: var(--rls-sizing-x4) var(--rls-sizing-x4) 0rem var(--rls-sizing-x4);
+  box-sizing: border-box;
+  justify-content: center;
+}
+.rls-design-system-bordered .rls-picker-clock__title {
+  display: flex;
+  width: auto;
+  column-gap: var(--rls-sizing-x2);
+  align-items: center;
+}
+.rls-design-system-bordered .rls-picker-clock__title__value {
+  text-align: center;
+  font-size: var(--rls-heading4-font-size);
+  font-weight: var(--rls-font-weight-semibold);
+  color: var(--rls-app-color-600);
+}
+.rls-design-system-bordered .rls-picker-clock__title__value--active {
+  color: var(--rls-theme-color-500);
+}
+.rls-design-system-bordered .rls-picker-clock__title__value:hover {
+  color: var(--rls-app-color-900);
+}
+.rls-design-system-bordered .rls-picker-clock__title__separator {
+  font-size: var(--rls-title-font-size);
+  font-weight: var(--rls-font-weight-semibold);
+}
+.rls-design-system-bordered .rls-picker-clock__zone {
+  display: flex;
+  width: auto;
+  column-gap: var(--rls-sizing-x4);
+  align-items: center;
+}
+.rls-design-system-bordered .rls-picker-clock__zone__value {
+  width: 18rem;
+  text-align: center;
+  padding: var(--rls-sizing-x1) var(--rls-sizing-x2);
+  border-radius: var(--rls-sizing-x2);
+  font-size: var(--rls-body-font-size);
+  font-weight: var(--rls-font-weight-semibold);
+  background: var(--rls-app-color-200);
+}
+.rls-design-system-bordered .rls-picker-clock__zone__value--active {
+  background: var(--rls-theme-gradient-500);
+  color: var(--rls-theme-color-050);
+}
+.rls-design-system-bordered .rls-picker-clock__body {
+  display: flex;
+  justify-content: center;
+}
+.rls-design-system-bordered .rls-picker-clock__plate {
+  width: 120rem;
+  height: 120rem;
+  border-radius: 50%;
+  border: var(--rls-app-border-2-200);
+  box-sizing: border-box;
+  overflow: hidden;
+}
+.rls-design-system-bordered .rls-picker-clock__canvas {
+  position: absolute;
+}
+.rls-design-system-bordered .rls-picker-clock__canvas__line {
+  stroke: var(--rls-theme-color-500);
+  stroke-width: var(--rls-sizing-x1);
+}
+.rls-design-system-bordered .rls-picker-clock__canvas__center {
+  fill: var(--rls-theme-color-500);
+}
+.rls-design-system-bordered .rls-picker-clock__canvas__indicator {
+  fill: var(--rls-theme-color-300);
+}
+.rls-design-system-bordered .rls-picker-clock__canvas__point {
+  fill: var(--rls-theme-color-050);
+}
+.rls-design-system-bordered .rls-picker-clock__tick {
+  position: absolute;
+  width: var(--rls-sizing-x14);
+  height: var(--rls-sizing-x14);
+  line-height: var(--rls-sizing-x14);
+  text-align: center;
+  cursor: pointer;
+  font-size: var(--rls-paragraph-font-size);
+  font-weight: var(--rls-font-weight-semibold);
+}
+.rls-design-system-bordered .rls-picker-clock__footer {
+  --rlc-button-width: 100%;
+  --rlc-button-content-padding: 0rem var(--rls-sizing-x2);
+  --rls-button-font-size: 6.75rem;
+  display: flex;
+  column-gap: var(--rls-sizing-x6);
+  align-items: center;
+  padding: var(--rls-sizing-x4) var(--rls-sizing-x8) var(--rls-sizing-x6)
+    var(--rls-sizing-x8);
+  overflow: hidden;
+  box-sizing: border-box;
+}
+.rls-design-system-bordered .rls-picker-clock__footer--today {
+  display: flex;
+  width: var(--rls-sizing-x16);
+  align-items: center;
+  justify-content: center;
+}
+.rls-design-system-bordered .rls-picker-date {
+  position: relative;
+  display: flex;
+  width: 150rem;
+  flex-direction: column;
+  row-gap: var(--rls-sizing-x4);
+  overflow: hidden;
+  user-select: none;
+  border-radius: var(--rlc-picker-date-radius, 0rem);
+  background: var(--rlc-picker-date-background, transparent);
+}
+.rls-design-system-bordered .rls-picker-date__header {
+  --rlc-picker-selector-title-padding: var(--rls-sizing-x4);
+  --rlc-picker-selector-title-radius: var(--rls-sizing-x4);
+  --rlc-picker-selector-title-background: var(--rls-app-color-200);
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--rls-sizing-x4);
+  padding: var(--rls-sizing-x4) var(--rls-sizing-x4) 0rem var(--rls-sizing-x4);
+  box-sizing: border-box;
+}
+.rls-design-system-bordered .rls-picker-date__title {
+  height: var(--rls-sizing-x14);
+  line-height: var(--rls-sizing-x14);
+  color: var(--rls-app-color-700);
+  text-align: center;
+  cursor: default;
+  font-weight: var(--rls-font-weight-bold);
+  font-size: var(--rls-paragraph-font-size);
+}
+.rls-design-system-bordered .rls-picker-date__title:hover {
+  color: var(--rls-theme-color-500);
+}
+.rls-design-system-bordered .rls-picker-date__component {
+  --rlc-picker-day-display: none;
+  --rlc-picker-month-display: none;
+  --rlc-picker-year-display: none;
+  display: flex;
+  justify-content: center;
+}
+.rls-design-system-bordered .rls-picker-date__component--day {
+  --rlc-picker-day-display: flex;
+}
+.rls-design-system-bordered .rls-picker-date__component--month {
+  --rlc-picker-month-display: grid;
+}
+.rls-design-system-bordered .rls-picker-date__component--year {
+  --rlc-picker-year-display: block;
+}
+.rls-design-system-bordered .rls-picker-date__actions {
+  --rlc-button-width: 100%;
+  --rlc-button-content-padding: 0rem var(--rls-sizing-x2);
+  --rls-button-font-size: 6.75rem;
+  display: flex;
+  column-gap: var(--rls-sizing-x6);
+  align-items: center;
+  padding: var(--rls-sizing-x4) var(--rls-sizing-x8) var(--rls-sizing-x6)
+    var(--rls-sizing-x8);
+  overflow: hidden;
+  box-sizing: border-box;
+}
+.rls-design-system-bordered .rls-picker-date__actions--today {
+  display: flex;
+  width: var(--rls-sizing-x16);
+  align-items: center;
+  justify-content: center;
+}
+.rls-design-system-bordered .rls-picker-date-range {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 150rem;
+  row-gap: var(--rls-sizing-x4);
+  overflow: hidden;
+  border-radius: var(--rlc-picker-date-range-radius, 0rem);
+  background: var(--rlc-picker-date-range-background, transparent);
+}
+.rls-design-system-bordered .rls-picker-date-range__header {
+  --rlc-picker-selector-title-padding: var(--rls-sizing-x4);
+  --rlc-picker-selector-title-radius: var(--rls-sizing-x4);
+  --rlc-picker-selector-title-background: var(--rls-app-color-200);
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--rls-sizing-x4);
+  padding: var(--rls-sizing-x4) var(--rls-sizing-x4) 0rem var(--rls-sizing-x4);
+  box-sizing: border-box;
+}
+.rls-design-system-bordered .rls-picker-date-range__title {
+  height: var(--rls-sizing-x14);
+  line-height: var(--rls-sizing-x14);
+  color: var(--rls-app-color-700);
+  text-align: center;
+  cursor: default;
+  font-weight: var(--rls-font-weight-bold);
+  font-size: var(--rls-paragraph-font-size);
+}
+.rls-design-system-bordered .rls-picker-date-range__title:hover {
+  color: var(--rls-theme-color-500);
+}
+.rls-design-system-bordered .rls-picker-date-range__component {
+  --rlc-picker-day-range-display: none;
+  --rlc-picker-month-display: none;
+  --rlc-picker-year-display: none;
+  display: flex;
+  justify-content: center;
+  width: 150rem;
+  padding: 0rem var(--rls-sizing-x2);
+  box-sizing: border-box;
+}
+.rls-design-system-bordered .rls-picker-date-range__component--day {
+  --rlc-picker-day-range-display: flex;
+}
+.rls-design-system-bordered .rls-picker-date-range__component--month {
+  --rlc-picker-month-display: grid;
+}
+.rls-design-system-bordered .rls-picker-date-range__component--year {
+  --rlc-picker-year-display: block;
+}
+.rls-design-system-bordered .rls-picker-date-range__footer--hidden {
+  display: none;
+}
+.rls-design-system-bordered .rls-picker-date-range__actions {
+  --rlc-button-width: 100%;
+  --rlc-button-content-padding: 0rem var(--rls-sizing-x2);
+  display: flex;
+  column-gap: var(--rls-sizing-x4);
+  padding: var(--rls-sizing-x6) var(--rls-sizing-x8);
+  overflow: hidden;
+  box-sizing: border-box;
+}
+.rls-design-system-bordered .rls-snackbar {
+  position: fixed;
+  display: flex;
+  left: var(--rlc-snackbar-left, 50%);
+  width: auto;
+  max-width: 240rem;
+  height: auto;
+  bottom: 0rem;
+  column-gap: var(--rls-sizing-x6);
+  padding: var(--rls-sizing-x6);
+  box-sizing: border-box;
+  border-radius: var(--rls-sizing-x6);
+  background: var(--rls-app-color-050);
+  border-left: var(--rls-theme-border-4-400);
+  transform: translate(-50%, calc(100% + var(--rls-sizing-x4)));
+  transition: all 160ms 0ms var(--rls-standard-curve);
+  box-shadow: var(--rls-app-shadow-center-8);
+  z-index: var(--rls-z-index-32);
+}
+.rls-design-system-bordered .rls-snackbar--visible {
+  transform: translate(-50%, calc(0% - var(--rls-sizing-x8)));
+}
+.rls-design-system-bordered .rls-snackbar__avatar {
+  --rlc-icon-color: var(--rls-theme-color-050);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  background: var(--rls-theme-color-500);
+  width: var(--rls-sizing-x18);
+  height: var(--rls-sizing-x18);
+  border-radius: var(--rls-sizing-x4);
+}
+.rls-design-system-bordered .rls-snackbar__avatar + .rls-snackbar__component {
+  width: calc(100% - var(--rls-sizing-x18));
+}
+.rls-design-system-bordered .rls-snackbar__component {
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--rls-sizing-x2);
+}
+.rls-design-system-bordered .rls-snackbar__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  column-gap: var(--rls-sizing-x4);
+}
+.rls-design-system-bordered .rls-snackbar__header > button {
+  background: rgba(0, 0, 0, 0);
+  padding: 0rem;
+  cursor: pointer;
+  color: var(--rls-theme-color-700);
+}
+.rls-design-system-bordered .rls-snackbar__title {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--rls-theme-color-500);
+  font-size: var(--rls-body-font-size);
+  font-weight: var(--rls-font-weight-bold);
+  letter-spacing: var(--rls-body-letter-spacing);
+}
+.rls-design-system-bordered .rls-snackbar__content p {
+  line-height: var(--rls-sizing-x10);
+  color: var(--rls-app-color-600);
+  font-size: var(--rls-label-font-size);
+  font-weight: var(--rls-font-weight-medium);
+  letter-spacing: var(--rls-label-letter-spacing);
+}
+@media only screen and (max-width: 375px) {
+  .rls-design-system-bordered .rls-snackbar {
+    width: calc(100% - var(--rls-sizing-x12));
+  }
+} /*# sourceMappingURL=design-system-bordered.css.map */