@open-condo/ui 1.4.0 → 1.6.0

package/dist/styles.css

@@ -2167,6 +2167,16 @@ a.condo-btn-sm {
 .condo-btn-primary:active::before {
   opacity: 0.9;
 }
+.condo-btn-primary.condo-btn-stateless:focus,
+.condo-btn-primary.condo-btn-stateless:hover,
+.condo-btn-primary.condo-btn-stateless:active {
+  background: #222;
+}
+.condo-btn-primary.condo-btn-stateless:focus::before,
+.condo-btn-primary.condo-btn-stateless:hover::before,
+.condo-btn-primary.condo-btn-stateless:active::before {
+  opacity: 0;
+}
 .condo-btn-primary.condo-btn-dangerous {
   background: #ff3b30;
   transition: background 0.15s ease-in-out;
@@ -2180,6 +2190,11 @@ a.condo-btn-sm {
 .condo-btn-primary.condo-btn-dangerous:active {
   background: #ff3b30;
 }
+.condo-btn-primary.condo-btn-dangerous.condo-btn-stateless:focus,
+.condo-btn-primary.condo-btn-dangerous.condo-btn-stateless:hover,
+.condo-btn-primary.condo-btn-dangerous.condo-btn-stateless:active {
+  background: #ff3b30;
+}
 .condo-btn-primary.condo-btn-dangerous::before {
   opacity: 0;
 }
@@ -2321,6 +2336,29 @@ a.condo-btn-sm {
 .condo-btn-secondary.condo-btn-dangerous:active::before {
   background: #ff3b30 border-box;
 }
+.condo-btn-secondary.condo-btn-dangerous.condo-btn-stateless:hover > .condo-btn-icon,
+.condo-btn-secondary.condo-btn-dangerous.condo-btn-stateless:active > .condo-btn-icon,
+.condo-btn-secondary.condo-btn-dangerous.condo-btn-stateless:focus > .condo-btn-icon {
+  color: #ff3b30;
+  transition: color 0.15s ease-out;
+}
+.condo-btn-secondary.condo-btn-dangerous.condo-btn-stateless:hover > .condo-btn-icon svg,
+.condo-btn-secondary.condo-btn-dangerous.condo-btn-stateless:active > .condo-btn-icon svg,
+.condo-btn-secondary.condo-btn-dangerous.condo-btn-stateless:focus > .condo-btn-icon svg {
+  fill: currentcolor;
+}
+.condo-btn-secondary.condo-btn-dangerous.condo-btn-stateless:hover > .condo-btn-text,
+.condo-btn-secondary.condo-btn-dangerous.condo-btn-stateless:active > .condo-btn-text,
+.condo-btn-secondary.condo-btn-dangerous.condo-btn-stateless:focus > .condo-btn-text {
+  color: #ff3b30;
+  transition: color 0.15s ease-out;
+}
+.condo-btn-secondary.condo-btn-dangerous.condo-btn-stateless::before,
+.condo-btn-secondary.condo-btn-dangerous.condo-btn-stateless:focus::before,
+.condo-btn-secondary.condo-btn-dangerous.condo-btn-stateless:hover::before,
+.condo-btn-secondary.condo-btn-dangerous.condo-btn-stateless:active::before {
+  background: #ff3b30 border-box;
+}
 .condo-btn-secondary::before {
   position: absolute;
   top: -1px;
@@ -2354,7 +2392,46 @@ a.condo-btn-sm {
   background: linear-gradient(90deg, #4cd174 0%, #6db8f2 100%) border-box;
   opacity: 0.9;
 }
-.condo-btn-secondary:disabled,
+.condo-btn-secondary:disabled {
+  background: transparent;
+  border: 1px solid #707695;
+  opacity: 0.5;
+}
+.condo-btn-secondary:disabled > .condo-btn-icon {
+  color: #222;
+  transition: color 0.15s ease-out;
+}
+.condo-btn-secondary:disabled > .condo-btn-icon svg {
+  fill: currentcolor;
+}
+.condo-btn-secondary:disabled > .condo-btn-text {
+  color: #222;
+  transition: color 0.15s ease-out;
+}
+.condo-btn-secondary:disabled > .condo-btn-text::before {
+  opacity: 0;
+}
+.condo-btn-secondary:disabled::before {
+  opacity: 0;
+}
+.condo-btn-secondary.condo-btn-stateless:not(.condo-btn-dangerous) > .condo-btn-icon {
+  color: #222;
+  transition: color 0.15s ease-out;
+}
+.condo-btn-secondary.condo-btn-stateless:not(.condo-btn-dangerous) > .condo-btn-icon svg {
+  fill: currentcolor;
+}
+.condo-btn-secondary.condo-btn-stateless:not(.condo-btn-dangerous):hover {
+  border: 1px solid #707695;
+}
+.condo-btn-secondary.condo-btn-stateless:hover::before,
+.condo-btn-secondary.condo-btn-stateless:active::before {
+  opacity: 0;
+}
+.condo-btn-secondary.condo-btn-stateless:hover > .condo-btn-text::before,
+.condo-btn-secondary.condo-btn-stateless:active > .condo-btn-text::before {
+  opacity: 0;
+}
 .condo-btn-secondary:disabled:hover,
 .condo-btn-secondary:disabled:active,
 .condo-btn-secondary:disabled:focus,
@@ -2366,7 +2443,6 @@ a.condo-btn-sm {
   border: 1px solid #707695;
   opacity: 0.5;
 }
-.condo-btn-secondary:disabled > .condo-btn-icon,
 .condo-btn-secondary:disabled:hover > .condo-btn-icon,
 .condo-btn-secondary:disabled:active > .condo-btn-icon,
 .condo-btn-secondary:disabled:focus > .condo-btn-icon,
@@ -2377,7 +2453,6 @@ a.condo-btn-sm {
   color: #222;
   transition: color 0.15s ease-out;
 }
-.condo-btn-secondary:disabled > .condo-btn-icon svg,
 .condo-btn-secondary:disabled:hover > .condo-btn-icon svg,
 .condo-btn-secondary:disabled:active > .condo-btn-icon svg,
 .condo-btn-secondary:disabled:focus > .condo-btn-icon svg,
@@ -2387,7 +2462,6 @@ a.condo-btn-sm {
 .condo-btn-secondary.condo-btn-dangerous:disabled:focus > .condo-btn-icon svg {
   fill: currentcolor;
 }
-.condo-btn-secondary:disabled > .condo-btn-text,
 .condo-btn-secondary:disabled:hover > .condo-btn-text,
 .condo-btn-secondary:disabled:active > .condo-btn-text,
 .condo-btn-secondary:disabled:focus > .condo-btn-text,
@@ -2398,7 +2472,6 @@ a.condo-btn-sm {
   color: #222;
   transition: color 0.15s ease-out;
 }
-.condo-btn-secondary:disabled > .condo-btn-text::before,
 .condo-btn-secondary:disabled:hover > .condo-btn-text::before,
 .condo-btn-secondary:disabled:active > .condo-btn-text::before,
 .condo-btn-secondary:disabled:focus > .condo-btn-text::before,
@@ -2408,7 +2481,6 @@ a.condo-btn-sm {
 .condo-btn-secondary.condo-btn-dangerous:disabled:focus > .condo-btn-text::before {
   opacity: 0;
 }
-.condo-btn-secondary:disabled::before,
 .condo-btn-secondary:disabled:hover::before,
 .condo-btn-secondary:disabled:active::before,
 .condo-btn-secondary:disabled:focus::before,
@@ -2419,111 +2491,458 @@ a.condo-btn-sm {
   opacity: 0;
 }
 
-/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
-/* stylelint-disable no-duplicate-selectors */
-/* stylelint-disable */
-/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
-.condo-carousel {
-  box-sizing: border-box;
+.condo-typography {
+  color: #222;
+  word-break: break-word;
+}
+.condo-typography,
+.condo-typography-large {
   margin: 0;
-  padding: 0;
-  color: rgba(0, 0, 0, 0.85);
-  font-size: 14px;
-  font-variant: tabular-nums;
-  line-height: 1.5715;
-  list-style: none;
-  font-feature-settings: 'tnum', "tnum";
+  font-weight: 400;
+  font-size: 16px;
+  font-family: "Open Sans", sans-serif;
+  line-height: 24px;
+  letter-spacing: -0.01em;
 }
-.condo-carousel .slick-slider {
-  position: relative;
-  display: block;
-  box-sizing: border-box;
-  touch-action: pan-y;
-  -webkit-touch-callout: none;
-  -webkit-tap-highlight-color: transparent;
+.condo-typography-medium {
+  margin: 0;
+  font-weight: 400;
+  font-size: 14px;
+  font-family: "Open Sans", sans-serif;
+  line-height: 22px;
+  letter-spacing: -0.01em;
 }
-.condo-carousel .slick-list {
-  position: relative;
-  display: block;
+.condo-typography-small {
   margin: 0;
-  padding: 0;
-  overflow: hidden;
+  font-weight: 400;
+  font-size: 12px;
+  font-family: "Open Sans", sans-serif;
+  line-height: 20px;
+  letter-spacing: -0.01em;
 }
-.condo-carousel .slick-list:focus {
-  outline: none;
+.condo-typography-secondary {
+  color: #707695;
 }
-.condo-carousel .slick-list.dragging {
-  cursor: pointer;
+.condo-typography-inverted {
+  color: #fff;
 }
-.condo-carousel .slick-list .slick-slide {
-  pointer-events: none;
+.condo-typography-info {
+  color: #2696f3;
 }
-.condo-carousel .slick-list .slick-slide input.condo-radio-input,
-.condo-carousel .slick-list .slick-slide input.condo-checkbox-input {
-  visibility: hidden;
+.condo-typography-success {
+  color: #39ce66;
 }
-.condo-carousel .slick-list .slick-slide.slick-active {
-  pointer-events: auto;
+.condo-typography-warning {
+  color: #ff9500;
 }
-.condo-carousel .slick-list .slick-slide.slick-active input.condo-radio-input,
-.condo-carousel .slick-list .slick-slide.slick-active input.condo-checkbox-input {
-  visibility: visible;
+.condo-typography-danger {
+  color: #ff3b30;
 }
-.condo-carousel .slick-list .slick-slide > div > div {
-  vertical-align: bottom;
+.condo-typography-disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
 }
-.condo-carousel .slick-slider .slick-track,
-.condo-carousel .slick-slider .slick-list {
-  transform: translate3d(0, 0, 0);
-  touch-action: pan-y;
+.condo-typography u,
+.condo-typography ins {
+  text-decoration: underline;
+  -webkit-text-decoration-skip: ink;
+          text-decoration-skip-ink: auto;
+  text-decoration-thickness: 1px;
 }
-.condo-carousel .slick-track {
-  position: relative;
-  top: 0;
-  left: 0;
-  display: block;
+.condo-typography s,
+.condo-typography del {
+  text-decoration: line-through;
+  text-decoration-thickness: 1px;
 }
-.condo-carousel .slick-track::before,
-.condo-carousel .slick-track::after {
-  display: table;
-  content: '';
+.condo-typography strong {
+  font-weight: 600;
 }
-.condo-carousel .slick-track::after {
-  clear: both;
+.condo-typography code {
+  box-sizing: border-box;
+  margin: 0 0.2em;
+  padding: 0.25em 0.4em;
+  font-size: 95%;
+  font-family: "Noto Sans Mono", monospace;
+  background: #f2f4f6;
+  border: 1px solid #e1e5ed;
+  border-radius: 4px;
 }
-.slick-loading .condo-carousel .slick-track {
-  visibility: hidden;
+div.condo-typography:not(:last-of-type),
+.condo-typography p:not(:last-of-type) {
+  margin-bottom: 16px;
 }
-.condo-carousel .slick-slide {
-  display: none;
-  float: left;
-  height: 100%;
-  min-height: 1px;
+div.condo-typography:not(:last-of-type).condo-typography-medium,
+.condo-typography p:not(:last-of-type).condo-typography-medium {
+  margin-bottom: 14px;
 }
-.condo-carousel .slick-slide img {
-  display: block;
+div.condo-typography:not(:last-of-type).condo-typography-small,
+.condo-typography p:not(:last-of-type).condo-typography-small {
+  margin-bottom: 12px;
 }
-.condo-carousel .slick-slide.slick-loading img {
-  display: none;
+h1.condo-typography,
+div.condo-typography-h1,
+div.condo-typography-h1 > textarea,
+.condo-typography h1 {
+  font-weight: 700;
+  font-size: 38px;
+  font-family: "Open Sans", sans-serif;
+  line-height: 46px;
+  letter-spacing: -0.01em;
+  margin: 0;
 }
-.condo-carousel .slick-slide.dragging img {
-  pointer-events: none;
+h2.condo-typography,
+div.condo-typography-h2,
+div.condo-typography-h2 > textarea,
+.condo-typography h2 {
+  font-weight: 700;
+  font-size: 24px;
+  font-family: "Open Sans", sans-serif;
+  line-height: 32px;
+  letter-spacing: -0.01em;
+  margin: 0;
 }
-.condo-carousel .slick-initialized .slick-slide {
-  display: block;
+h3.condo-typography,
+div.condo-typography-h3,
+div.condo-typography-h3 > textarea,
+.condo-typography h3 {
+  font-weight: 700;
+  font-size: 20px;
+  font-family: "Open Sans", sans-serif;
+  line-height: 28px;
+  letter-spacing: -0.01em;
+  margin: 0;
 }
-.condo-carousel .slick-loading .slick-slide {
-  visibility: hidden;
+h4.condo-typography,
+div.condo-typography-h4,
+div.condo-typography-h4 > textarea,
+.condo-typography h4 {
+  font-weight: 600;
+  font-size: 16px;
+  font-family: "Open Sans", sans-serif;
+  line-height: 24px;
+  letter-spacing: -0.01em;
+  margin: 0;
 }
-.condo-carousel .slick-vertical .slick-slide {
-  display: block;
-  height: auto;
+h5.condo-typography,
+div.condo-typography-h5,
+div.condo-typography-h5 > textarea,
+.condo-typography h5 {
+  font-weight: 600;
+  font-size: 14px;
+  font-family: "Open Sans", sans-serif;
+  line-height: 22px;
+  letter-spacing: -0.01em;
+  margin: 0;
 }
-.condo-carousel .slick-arrow.slick-hidden {
-  display: none;
+h6.condo-typography,
+div.condo-typography-h6,
+div.condo-typography-h6 > textarea,
+.condo-typography h6 {
+  font-weight: 600;
+  font-size: 12px;
+  font-family: "Open Sans", sans-serif;
+  line-height: 20px;
+  letter-spacing: -0.01em;
+  margin: 0;
 }
-.condo-carousel .slick-prev,
-.condo-carousel .slick-next {
+a.condo-typography-ellipsis,
+span.condo-typography-ellipsis {
+  display: inline-block;
+  max-width: 100%;
+}
+a.condo-typography,
+.condo-typography a {
+  color: #222;
+  text-decoration: underline;
+  text-underline-offset: 0.2em;
+  text-decoration-thickness: 1px;
+  -webkit-text-decoration-color: #707695;
+          text-decoration-color: #707695;
+  outline: none;
+  cursor: pointer;
+  transition-duration: 0.15s;
+  transition-property: color, -webkit-text-decoration-color;
+  transition-property: color, text-decoration-color;
+  transition-property: color, text-decoration-color, -webkit-text-decoration-color;
+}
+a.condo-typography.focus-visible,
+.condo-typography a.focus-visible,
+a.condo-typography:hover,
+.condo-typography a:hover {
+  color: #39ce66;
+  -webkit-text-decoration-color: #39ce66;
+          text-decoration-color: #39ce66;
+}
+a.condo-typography:focus-visible,
+.condo-typography a:focus-visible,
+a.condo-typography:hover,
+.condo-typography a:hover {
+  color: #39ce66;
+  -webkit-text-decoration-color: #39ce66;
+          text-decoration-color: #39ce66;
+}
+a.condo-typography:active,
+.condo-typography a:active {
+  color: #39ce66;
+  opacity: 0.8;
+  -webkit-text-decoration-color: #39ce66;
+          text-decoration-color: #39ce66;
+}
+a.condo-typography:not(.condo-typography-large):not(.condo-typography-medium):not(.condo-typography-small),
+.condo-typography a:not(.condo-typography-large):not(.condo-typography-medium):not(.condo-typography-small) {
+  font-size: inherit;
+}
+a.condo-typography[disabled],
+.condo-typography a[disabled],
+a.condo-typography.condo-typography-disabled,
+.condo-typography a.condo-typography-disabled,
+a.condo-typography[disabled].focus-visible,
+.condo-typography a[disabled].focus-visible,
+a.condo-typography.condo-typography-disabled.focus-visible,
+.condo-typography a.condo-typography-disabled.focus-visible,
+a.condo-typography[disabled]:hover,
+.condo-typography a[disabled]:hover,
+a.condo-typography.condo-typography-disabled:hover,
+.condo-typography a.condo-typography-disabled:hover,
+a.condo-typography[disabled]:active,
+.condo-typography a[disabled]:active,
+a.condo-typography.condo-typography-disabled:active,
+.condo-typography a.condo-typography-disabled:active {
+  color: #222;
+  cursor: not-allowed;
+  opacity: 0.5;
+  pointer-events: none;
+}
+a.condo-typography[disabled],
+.condo-typography a[disabled],
+a.condo-typography.condo-typography-disabled,
+.condo-typography a.condo-typography-disabled,
+a.condo-typography[disabled].focus-visible,
+.condo-typography a[disabled].focus-visible,
+a.condo-typography.condo-typography-disabled.focus-visible,
+.condo-typography a.condo-typography-disabled.focus-visible,
+a.condo-typography[disabled]:hover,
+.condo-typography a[disabled]:hover,
+a.condo-typography.condo-typography-disabled:hover,
+.condo-typography a.condo-typography-disabled:hover,
+a.condo-typography[disabled]:active,
+.condo-typography a[disabled]:active,
+a.condo-typography.condo-typography-disabled:active,
+.condo-typography a.condo-typography-disabled:active {
+  color: #222;
+  cursor: not-allowed;
+  opacity: 0.5;
+  pointer-events: none;
+}
+a.condo-typography[disabled],
+.condo-typography a[disabled],
+a.condo-typography.condo-typography-disabled,
+.condo-typography a.condo-typography-disabled,
+a.condo-typography[disabled]:focus-visible,
+.condo-typography a[disabled]:focus-visible,
+a.condo-typography.condo-typography-disabled:focus-visible,
+.condo-typography a.condo-typography-disabled:focus-visible,
+a.condo-typography[disabled]:hover,
+.condo-typography a[disabled]:hover,
+a.condo-typography.condo-typography-disabled:hover,
+.condo-typography a.condo-typography-disabled:hover,
+a.condo-typography[disabled]:active,
+.condo-typography a[disabled]:active,
+a.condo-typography.condo-typography-disabled:active,
+.condo-typography a.condo-typography-disabled:active {
+  color: #222;
+  cursor: not-allowed;
+  opacity: 0.5;
+  pointer-events: none;
+}
+.condo-typography-single-line {
+  white-space: nowrap;
+}
+.condo-typography-ellipsis-single-line {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+a.condo-typography-ellipsis-single-line,
+span.condo-typography-ellipsis-single-line {
+  vertical-align: bottom;
+}
+.condo-typography-ellipsis-multiple-line {
+  /* stylelint-disable-next-line value-no-vendor-prefix */
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-line-clamp: 3;
+  /*! autoprefixer: ignore next */
+  -webkit-box-orient: vertical;
+}
+
+.condo-promo-block {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+  height: 320px;
+  overflow: hidden;
+  border-radius: 12px;
+  cursor: pointer;
+}
+.condo-promo-block-image-container,
+.condo-promo-block-content-container {
+  box-sizing: border-box;
+  width: 50%;
+  height: 100%;
+}
+.condo-promo-block-content-container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: space-between;
+  padding: 60px 12px 60px 60px;
+}
+.condo-promo-block-content-container-md,
+.condo-promo-block-content-container-sm {
+  padding: 52px 12px 52px 40px;
+}
+.condo-promo-block-content-container-xs {
+  padding: 40px;
+}
+.condo-promo-block-content-container-xxs {
+  padding: 40px 32px;
+}
+.condo-promo-block-no-image > .condo-promo-block-content-container {
+  width: 100%;
+  padding-right: 60px;
+}
+.condo-promo-block-no-image > .condo-promo-block-content-container-md,
+.condo-promo-block-no-image > .condo-promo-block-content-container-sm {
+  padding-right: 52px;
+}
+.condo-promo-block-text-container > *:not(:last-child) {
+  margin-bottom: 16px;
+}
+.condo-promo-block-image-container > img {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  -o-object-position: right center;
+     object-position: right center;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  -webkit-user-drag: none;
+}
+
+/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
+/* stylelint-disable no-duplicate-selectors */
+/* stylelint-disable */
+/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
+.condo-carousel {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: rgba(0, 0, 0, 0.85);
+  font-size: 14px;
+  font-variant: tabular-nums;
+  line-height: 1.5715;
+  list-style: none;
+  font-feature-settings: 'tnum', "tnum";
+}
+.condo-carousel .slick-slider {
+  position: relative;
+  display: block;
+  box-sizing: border-box;
+  touch-action: pan-y;
+  -webkit-touch-callout: none;
+  -webkit-tap-highlight-color: transparent;
+}
+.condo-carousel .slick-list {
+  position: relative;
+  display: block;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+}
+.condo-carousel .slick-list:focus {
+  outline: none;
+}
+.condo-carousel .slick-list.dragging {
+  cursor: pointer;
+}
+.condo-carousel .slick-list .slick-slide {
+  pointer-events: none;
+}
+.condo-carousel .slick-list .slick-slide input.condo-radio-input,
+.condo-carousel .slick-list .slick-slide input.condo-checkbox-input {
+  visibility: hidden;
+}
+.condo-carousel .slick-list .slick-slide.slick-active {
+  pointer-events: auto;
+}
+.condo-carousel .slick-list .slick-slide.slick-active input.condo-radio-input,
+.condo-carousel .slick-list .slick-slide.slick-active input.condo-checkbox-input {
+  visibility: visible;
+}
+.condo-carousel .slick-list .slick-slide > div > div {
+  vertical-align: bottom;
+}
+.condo-carousel .slick-slider .slick-track,
+.condo-carousel .slick-slider .slick-list {
+  transform: translate3d(0, 0, 0);
+  touch-action: pan-y;
+}
+.condo-carousel .slick-track {
+  position: relative;
+  top: 0;
+  left: 0;
+  display: block;
+}
+.condo-carousel .slick-track::before,
+.condo-carousel .slick-track::after {
+  display: table;
+  content: '';
+}
+.condo-carousel .slick-track::after {
+  clear: both;
+}
+.slick-loading .condo-carousel .slick-track {
+  visibility: hidden;
+}
+.condo-carousel .slick-slide {
+  display: none;
+  float: left;
+  height: 100%;
+  min-height: 1px;
+}
+.condo-carousel .slick-slide img {
+  display: block;
+}
+.condo-carousel .slick-slide.slick-loading img {
+  display: none;
+}
+.condo-carousel .slick-slide.dragging img {
+  pointer-events: none;
+}
+.condo-carousel .slick-initialized .slick-slide {
+  display: block;
+}
+.condo-carousel .slick-loading .slick-slide {
+  visibility: hidden;
+}
+.condo-carousel .slick-vertical .slick-slide {
+  display: block;
+  height: auto;
+}
+.condo-carousel .slick-arrow.slick-hidden {
+  display: none;
+}
+.condo-carousel .slick-prev,
+.condo-carousel .slick-next {
   position: absolute;
   top: 50%;
   display: block;
@@ -2775,275 +3194,6 @@ a.condo-btn-sm {
   overflow: hidden;
 }
 
-.condo-typography {
-  color: #222;
-  word-break: break-word;
-}
-.condo-typography,
-.condo-typography-large {
-  margin: 0;
-  font-weight: 400;
-  font-size: 16px;
-  font-family: "Open Sans", sans-serif;
-  line-height: 24px;
-  letter-spacing: -0.01em;
-}
-.condo-typography-medium {
-  margin: 0;
-  font-weight: 400;
-  font-size: 14px;
-  font-family: "Open Sans", sans-serif;
-  line-height: 22px;
-  letter-spacing: -0.01em;
-}
-.condo-typography-small {
-  margin: 0;
-  font-weight: 400;
-  font-size: 12px;
-  font-family: "Open Sans", sans-serif;
-  line-height: 20px;
-  letter-spacing: -0.01em;
-}
-.condo-typography-secondary {
-  color: #707695;
-}
-.condo-typography-inverted {
-  color: #fff;
-}
-.condo-typography-info {
-  color: #2696f3;
-}
-.condo-typography-success {
-  color: #39ce66;
-}
-.condo-typography-warning {
-  color: #ff9500;
-}
-.condo-typography-danger {
-  color: #ff3b30;
-}
-.condo-typography-disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
-}
-.condo-typography u,
-.condo-typography ins {
-  text-decoration: underline;
-  -webkit-text-decoration-skip: ink;
-          text-decoration-skip-ink: auto;
-  text-decoration-thickness: 1px;
-}
-.condo-typography s,
-.condo-typography del {
-  text-decoration: line-through;
-  text-decoration-thickness: 1px;
-}
-.condo-typography strong {
-  font-weight: 600;
-}
-.condo-typography code {
-  box-sizing: border-box;
-  margin: 0 0.2em;
-  padding: 0.25em 0.4em;
-  font-size: 95%;
-  font-family: "Noto Sans Mono", monospace;
-  background: #f2f4f6;
-  border: 1px solid #e1e5ed;
-  border-radius: 4px;
-}
-div.condo-typography:not(:last-of-type),
-.condo-typography p:not(:last-of-type) {
-  margin-bottom: 16px;
-}
-div.condo-typography:not(:last-of-type).condo-typography-medium,
-.condo-typography p:not(:last-of-type).condo-typography-medium {
-  margin-bottom: 14px;
-}
-div.condo-typography:not(:last-of-type).condo-typography-small,
-.condo-typography p:not(:last-of-type).condo-typography-small {
-  margin-bottom: 12px;
-}
-h1.condo-typography,
-div.condo-typography-h1,
-div.condo-typography-h1 > textarea,
-.condo-typography h1 {
-  font-weight: 700;
-  font-size: 38px;
-  font-family: "Open Sans", sans-serif;
-  line-height: 46px;
-  letter-spacing: -0.01em;
-  margin: 0;
-}
-h2.condo-typography,
-div.condo-typography-h2,
-div.condo-typography-h2 > textarea,
-.condo-typography h2 {
-  font-weight: 700;
-  font-size: 24px;
-  font-family: "Open Sans", sans-serif;
-  line-height: 32px;
-  letter-spacing: -0.01em;
-  margin: 0;
-}
-h3.condo-typography,
-div.condo-typography-h3,
-div.condo-typography-h3 > textarea,
-.condo-typography h3 {
-  font-weight: 700;
-  font-size: 20px;
-  font-family: "Open Sans", sans-serif;
-  line-height: 28px;
-  letter-spacing: -0.01em;
-  margin: 0;
-}
-h4.condo-typography,
-div.condo-typography-h4,
-div.condo-typography-h4 > textarea,
-.condo-typography h4 {
-  font-weight: 600;
-  font-size: 16px;
-  font-family: "Open Sans", sans-serif;
-  line-height: 24px;
-  letter-spacing: -0.01em;
-  margin: 0;
-}
-h5.condo-typography,
-div.condo-typography-h5,
-div.condo-typography-h5 > textarea,
-.condo-typography h5 {
-  font-weight: 600;
-  font-size: 14px;
-  font-family: "Open Sans", sans-serif;
-  line-height: 22px;
-  letter-spacing: -0.01em;
-  margin: 0;
-}
-h6.condo-typography,
-div.condo-typography-h6,
-div.condo-typography-h6 > textarea,
-.condo-typography h6 {
-  font-weight: 600;
-  font-size: 12px;
-  font-family: "Open Sans", sans-serif;
-  line-height: 20px;
-  letter-spacing: -0.01em;
-  margin: 0;
-}
-a.condo-typography-ellipsis,
-span.condo-typography-ellipsis {
-  display: inline-block;
-  max-width: 100%;
-}
-a.condo-typography,
-.condo-typography a {
-  color: #222;
-  text-decoration: underline;
-  text-underline-offset: 0.2em;
-  text-decoration-thickness: 1px;
-  -webkit-text-decoration-color: #707695;
-          text-decoration-color: #707695;
-  outline: none;
-  cursor: pointer;
-  transition-duration: 0.15s;
-  transition-property: color, -webkit-text-decoration-color;
-  transition-property: color, text-decoration-color;
-  transition-property: color, text-decoration-color, -webkit-text-decoration-color;
-}
-a.condo-typography.focus-visible,
-.condo-typography a.focus-visible,
-a.condo-typography:hover,
-.condo-typography a:hover {
-  color: #39ce66;
-  -webkit-text-decoration-color: #39ce66;
-          text-decoration-color: #39ce66;
-}
-a.condo-typography:focus-visible,
-.condo-typography a:focus-visible,
-a.condo-typography:hover,
-.condo-typography a:hover {
-  color: #39ce66;
-  -webkit-text-decoration-color: #39ce66;
-          text-decoration-color: #39ce66;
-}
-a.condo-typography:active,
-.condo-typography a:active {
-  color: #39ce66;
-  opacity: 0.8;
-  -webkit-text-decoration-color: #39ce66;
-          text-decoration-color: #39ce66;
-}
-a.condo-typography:not(.condo-typography-large):not(.condo-typography-medium):not(.condo-typography-small),
-.condo-typography a:not(.condo-typography-large):not(.condo-typography-medium):not(.condo-typography-small) {
-  font-size: inherit;
-}
-a.condo-typography[disabled],
-.condo-typography a[disabled],
-a.condo-typography.condo-typography-disabled,
-.condo-typography a.condo-typography-disabled,
-a.condo-typography[disabled].focus-visible,
-.condo-typography a[disabled].focus-visible,
-a.condo-typography.condo-typography-disabled.focus-visible,
-.condo-typography a.condo-typography-disabled.focus-visible,
-a.condo-typography[disabled]:hover,
-.condo-typography a[disabled]:hover,
-a.condo-typography.condo-typography-disabled:hover,
-.condo-typography a.condo-typography-disabled:hover,
-a.condo-typography[disabled]:active,
-.condo-typography a[disabled]:active,
-a.condo-typography.condo-typography-disabled:active,
-.condo-typography a.condo-typography-disabled:active {
-  color: #222;
-  cursor: not-allowed;
-  opacity: 0.5;
-  pointer-events: none;
-}
-a.condo-typography[disabled],
-.condo-typography a[disabled],
-a.condo-typography.condo-typography-disabled,
-.condo-typography a.condo-typography-disabled,
-a.condo-typography[disabled].focus-visible,
-.condo-typography a[disabled].focus-visible,
-a.condo-typography.condo-typography-disabled.focus-visible,
-.condo-typography a.condo-typography-disabled.focus-visible,
-a.condo-typography[disabled]:hover,
-.condo-typography a[disabled]:hover,
-a.condo-typography.condo-typography-disabled:hover,
-.condo-typography a.condo-typography-disabled:hover,
-a.condo-typography[disabled]:active,
-.condo-typography a[disabled]:active,
-a.condo-typography.condo-typography-disabled:active,
-.condo-typography a.condo-typography-disabled:active {
-  color: #222;
-  cursor: not-allowed;
-  opacity: 0.5;
-  pointer-events: none;
-}
-a.condo-typography[disabled],
-.condo-typography a[disabled],
-a.condo-typography.condo-typography-disabled,
-.condo-typography a.condo-typography-disabled,
-a.condo-typography[disabled]:focus-visible,
-.condo-typography a[disabled]:focus-visible,
-a.condo-typography.condo-typography-disabled:focus-visible,
-.condo-typography a.condo-typography-disabled:focus-visible,
-a.condo-typography[disabled]:hover,
-.condo-typography a[disabled]:hover,
-a.condo-typography.condo-typography-disabled:hover,
-.condo-typography a.condo-typography-disabled:hover,
-a.condo-typography[disabled]:active,
-.condo-typography a[disabled]:active,
-a.condo-typography.condo-typography-disabled:active,
-.condo-typography a.condo-typography-disabled:active {
-  color: #222;
-  cursor: not-allowed;
-  opacity: 0.5;
-  pointer-events: none;
-}
-
 .condo-markdown h1:not(:first-child),
 .condo-markdown h2:not(:first-child),
 .condo-markdown h3:not(:first-child),
@@ -3115,3 +3265,319 @@ a.condo-typography.condo-typography-disabled:active,
   margin-top: 0.5em;
 }
 
+/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
+/* stylelint-disable no-duplicate-selectors */
+/* stylelint-disable */
+/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
+.condo-modal {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: rgba(0, 0, 0, 0.85);
+  font-size: 14px;
+  font-variant: tabular-nums;
+  line-height: 1.5715;
+  list-style: none;
+  font-feature-settings: 'tnum', "tnum";
+  pointer-events: none;
+  position: relative;
+  top: 100px;
+  width: auto;
+  max-width: calc(100vw - 32px);
+  margin: 0 auto;
+  padding-bottom: 24px;
+}
+.condo-modal.condo-zoom-enter,
+.condo-modal.condo-zoom-appear {
+  transform: none;
+  opacity: 0;
+  -webkit-animation-duration: 0.3s;
+          animation-duration: 0.3s;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+.condo-modal-mask {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1000;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.45);
+}
+.condo-modal-mask-hidden {
+  display: none;
+}
+.condo-modal-wrap {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  overflow: auto;
+  outline: 0;
+}
+.condo-modal-wrap {
+  z-index: 1000;
+}
+.condo-modal-title {
+  margin: 0;
+  color: rgba(0, 0, 0, 0.85);
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 22px;
+  word-wrap: break-word;
+}
+.condo-modal-content {
+  position: relative;
+  background-color: #fff;
+  background-clip: padding-box;
+  border: 0;
+  border-radius: 2px;
+  box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+  pointer-events: auto;
+}
+.condo-modal-close {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 10;
+  padding: 0;
+  color: rgba(0, 0, 0, 0.45);
+  font-weight: 700;
+  line-height: 1;
+  text-decoration: none;
+  background: transparent;
+  border: 0;
+  outline: 0;
+  cursor: pointer;
+  transition: color 0.3s;
+}
+.condo-modal-close-x {
+  display: block;
+  width: 54px;
+  height: 54px;
+  font-size: 16px;
+  font-style: normal;
+  line-height: 54px;
+  text-align: center;
+  text-transform: none;
+  text-rendering: auto;
+}
+.condo-modal-close:focus,
+.condo-modal-close:hover {
+  color: rgba(0, 0, 0, 0.75);
+  text-decoration: none;
+}
+.condo-modal-header {
+  padding: 16px 24px;
+  color: rgba(0, 0, 0, 0.85);
+  background: #fff;
+  border-bottom: 1px solid #f0f0f0;
+  border-radius: 2px 2px 0 0;
+}
+.condo-modal-body {
+  padding: 24px;
+  font-size: 14px;
+  line-height: 1.5715;
+  word-wrap: break-word;
+}
+.condo-modal-footer {
+  padding: 10px 16px;
+  text-align: right;
+  background: transparent;
+  border-top: 1px solid #f0f0f0;
+  border-radius: 0 0 2px 2px;
+}
+.condo-modal-footer .condo-btn + .condo-btn:not(.condo-dropdown-trigger) {
+  margin-bottom: 0;
+  margin-left: 8px;
+}
+.condo-modal-open {
+  overflow: hidden;
+}
+.condo-modal-centered {
+  text-align: center;
+}
+.condo-modal-centered::before {
+  display: inline-block;
+  width: 0;
+  height: 100%;
+  vertical-align: middle;
+  content: '';
+}
+.condo-modal-centered .condo-modal {
+  top: 0;
+  display: inline-block;
+  padding-bottom: 0;
+  text-align: left;
+  vertical-align: middle;
+}
+@media (max-width: 767px) {
+  .condo-modal {
+    max-width: calc(100vw - 16px);
+    margin: 8px auto;
+  }
+  .condo-modal-centered .condo-modal {
+    flex: 1;
+  }
+}
+.condo-modal-confirm .condo-modal-header {
+  display: none;
+}
+.condo-modal-confirm .condo-modal-body {
+  padding: 32px 32px 24px;
+}
+.condo-modal-confirm-body-wrapper::before {
+  display: table;
+  content: '';
+}
+.condo-modal-confirm-body-wrapper::after {
+  display: table;
+  clear: both;
+  content: '';
+}
+.condo-modal-confirm-body .condo-modal-confirm-title {
+  display: block;
+  overflow: hidden;
+  color: rgba(0, 0, 0, 0.85);
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 1.4;
+}
+.condo-modal-confirm-body .condo-modal-confirm-content {
+  margin-top: 8px;
+  color: rgba(0, 0, 0, 0.85);
+  font-size: 14px;
+}
+.condo-modal-confirm-body > .anticon {
+  float: left;
+  margin-right: 16px;
+  font-size: 22px;
+}
+.condo-modal-confirm-body > .anticon + .condo-modal-confirm-title + .condo-modal-confirm-content {
+  margin-left: 38px;
+}
+.condo-modal-confirm .condo-modal-confirm-btns {
+  margin-top: 24px;
+  text-align: right;
+}
+.condo-modal-confirm .condo-modal-confirm-btns .condo-btn + .condo-btn {
+  margin-bottom: 0;
+  margin-left: 8px;
+}
+.condo-modal-confirm-error .condo-modal-confirm-body > .anticon {
+  color: #ff4d4f;
+}
+.condo-modal-confirm-warning .condo-modal-confirm-body > .anticon,
+.condo-modal-confirm-confirm .condo-modal-confirm-body > .anticon {
+  color: #faad14;
+}
+.condo-modal-confirm-info .condo-modal-confirm-body > .anticon {
+  color: #1890ff;
+}
+.condo-modal-confirm-success .condo-modal-confirm-body > .anticon {
+  color: #52c41a;
+}
+.condo-modal-confirm .condo-zoom-leave .condo-modal-confirm-btns {
+  pointer-events: none;
+}
+.condo-modal-wrap-rtl {
+  direction: rtl;
+}
+.condo-modal-wrap-rtl .condo-modal-close {
+  right: auto;
+  right: initial;
+  left: 0;
+}
+.condo-modal-wrap-rtl .condo-modal-footer {
+  text-align: left;
+}
+.condo-modal-wrap-rtl .condo-modal-footer .condo-btn + .condo-btn {
+  margin-right: 8px;
+  margin-left: 0;
+}
+.condo-modal-wrap-rtl .condo-modal-confirm-body {
+  direction: rtl;
+}
+.condo-modal-wrap-rtl .condo-modal-confirm-body > .anticon {
+  float: right;
+  margin-right: 0;
+  margin-left: 16px;
+}
+.condo-modal-wrap-rtl .condo-modal-confirm-body > .anticon + .condo-modal-confirm-title + .condo-modal-confirm-content {
+  margin-right: 38px;
+  margin-left: 0;
+}
+.condo-modal-wrap-rtl .condo-modal-confirm-btns {
+  text-align: left;
+}
+.condo-modal-wrap-rtl .condo-modal-confirm-btns .condo-btn + .condo-btn {
+  margin-right: 8px;
+  margin-left: 0;
+}
+.condo-modal-wrap-rtl.condo-modal-centered .condo-modal {
+  text-align: right;
+}
+.condo-modal-root .condo-modal-mask {
+  background-color: #707695;
+  opacity: 0.5;
+}
+.condo-modal-root .condo-modal {
+  max-width: calc(100vw - 40px * 2);
+  margin: 40px 0;
+}
+.condo-modal-root .condo-modal .condo-modal-header {
+  flex-shrink: 0;
+  padding: 40px 104px 19px 40px;
+  border-bottom: 1px solid transparent;
+  transition: border-bottom-color 0.15s;
+}
+.condo-modal-root .condo-modal.condo-modal-scrolling .condo-modal-header {
+  border-bottom-color: #e1e5ed;
+}
+.condo-modal-root .condo-modal .condo-modal-close {
+  top: 42px;
+  right: 40px;
+}
+.condo-modal-root .condo-modal .condo-modal-close .condo-modal-close-x {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  line-height: 24px;
+}
+.condo-modal-root .condo-modal .condo-modal-close .condo-modal-close-x div {
+  width: 24px;
+  height: 24px;
+}
+.condo-modal-root .condo-modal .condo-modal-content {
+  display: flex;
+  flex-direction: column;
+  max-height: calc(100vh - (40px * 2));
+  padding: 0;
+  overflow: hidden;
+  border-radius: 12px;
+}
+.condo-modal-root .condo-modal .condo-modal-body {
+  margin: 0 40px;
+  padding: 20px 0 40px;
+  overflow: auto;
+}
+.condo-modal-root .condo-modal .condo-modal-body .condo-modal-wrapper {
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+}
+.condo-modal-root .condo-modal .condo-modal-footer {
+  padding: 19px 40px 20px;
+  border-top: 1px solid #e1e5ed;
+}
+.condo-modal-root .condo-modal .condo-modal-footer .condo-btn + .condo-btn:not(.condo-dropdown-trigger):not(:first-child) {
+  margin-left: 0;
+}
+