@yup/taro-ui 0.1.0 → 1.1.0

package/es/style/index.css

@@ -2,6 +2,7 @@
 page {
   --ypmini-hd: 2;
   --ypmini-primary-color: #0092ff;
+  --ypmini-primary-secondary-color: #e0f3ff;
   --ypmini-color-text: rgba(0, 0, 0, 0.85);
   --ypmini-color-text-light: var(--ypmini-primary-color);
   --ypmini-color-text-weak: rgba(0, 0, 0, 0.45);
@@ -15,51 +16,82 @@ page {
   --ypmini-font-size-large: calc(17px * var(--ypmini-hd));
   --ypmini-font-size-default: calc(15px * var(--ypmini-hd));
   --ypmini-font-size-middle: calc(14px * var(--ypmini-hd));
+  --ypmini-font-size-mini: calc(13px * var(--ypmini-hd));
+  --ypmini-mask-background: rgba(0, 0, 0, 0.65);
+}
+page,
+:root {
+  --ypmini-avatar-size-default: calc(24px * var(--ypmini-hd));
+  --ypmini-avatar-size-middle: calc(48px * var(--ypmini-hd));
+  --ypmini-avatar-border-radius: 100%;
+}
+.ypmini-avatar {
+  --size: var(--ypmini-avatar-size-default);
+  --border-radius: var(--ypmini-avatar-border-radius);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  width: var(--size);
+  height: var(--size);
+  border-radius: var(--border-radius);
+}
+.ypmini-avatar-default {
+  --size: var(--ypmini-avatar-size-default);
+}
+.ypmini-avatar-middle {
+  --size: var(--ypmini-avatar-size-middle);
+}
+.ypmini-avatar-image {
+  object-fit: cover;
+  height: 100%;
+  width: 100%;
 }
 :root,
 page {
-  --border-radius: calc(8px * var(--ypmini-hd));
-  --button-height-large: calc(48px * var(--ypmini-hd));
-  --button-height-default: calc(44px * var(--ypmini-hd));
-  --button-height-middle: calc(40px * var(--ypmini-hd));
-  --button-height-small: calc(32px * var(--ypmini-hd));
-  --button-font-size-samll: calc(14px * var(--ypmini-hd));
-  --button-font-size-moddle: calc(15px * var(--ypmini-hd));
-  --button-font-size-default: calc(17px * var(--ypmini-hd));
-  --button-font-size-large: calc(17px * var(--ypmini-hd));
-  --default-button-background: #f5f7fc;
-  --default-button-text-color: rgba(0, 0, 0, 0.65);
-  --primary-button-background: var(--ypmini-primary-color);
-  --primary-button-disabled-background: #99d3ff;
-  --primary-button-disabled-text-color: rgba(255, 255, 255, 0.45);
-  --primary-button-text-color: #fff;
-  --secondary-button-background: #00cbff;
-  --secondary-button-text-color: #ffffff;
-  --warning-button-background: #FF5A57;
-  --warning-button-text-color: #ffffff;
-  --warning-button-outlined-color: #E8362E;
-  --primary-button-outlined-color: var(--ypmini-primary-color);
-  --default-button-outlined-color: rgba(0, 0, 0, 0.65);
+  --ypmini-border-radius: calc(8px * var(--ypmini-hd));
+  --ypmini-button-height-large: calc(48px * var(--ypmini-hd));
+  --ypmini-button-height-default: calc(44px * var(--ypmini-hd));
+  --ypmini-button-height-middle: calc(40px * var(--ypmini-hd));
+  --ypmini-button-height-small: calc(32px * var(--ypmini-hd));
+  --ypmini-button-font-size-samll: calc(14px * var(--ypmini-hd));
+  --ypmini-button-font-size-moddle: calc(15px * var(--ypmini-hd));
+  --ypmini-button-font-size-default: calc(17px * var(--ypmini-hd));
+  --ypmini-button-font-size-large: calc(17px * var(--ypmini-hd));
+  --ypmini-default-button-background: #f5f7fc;
+  --ypmini-default-button-text-color: rgba(0, 0, 0, 0.65);
+  --ypmini-default-button-ghost-color: rgba(0, 0, 0, 0.65);
+  --ypmini-primary-button-background: var(--ypmini-primary-color);
+  --ypmini-primary-button-ghost-color: var(--ypmini-primary-color);
+  --ypmini-primary-button-disabled-background: #99d3ff;
+  --ypmini-primary-button-disabled-text-color: rgba(255, 255, 255, 0.45);
+  --ypmini-primary-button-text-color: #fff;
+  --ypmini-secondary-button-background: #00cbff;
+  --ypmini-secondary-button-text-color: #ffffff;
+  --ypmini-secondary-button-ghost-color: #00cbff;
+  --ypmini-warning-button-background: #FF5A57;
+  --ypmini-warning-button-text-color: #ffffff;
+  --ypmini-warning-button-ghost-color: #FF5A57;
+  --ypmini-warning-button-outlined-color: #E8362E;
+  --ypmini-primary-button-outlined-color: var(--ypmini-primary-color);
+  --ypmini-default-button-outlined-color: rgba(0, 0, 0, 0.65);
 }
 .ypmini-taro-button {
   padding: 0 24px;
   border: unset;
   font-weight: bold;
-  font-size: var(--button-font-size-default);
+  font-size: var(--ypmini-button-font-size-default);
   width: auto;
-  height: var(--button-height-default);
-  line-height: var(--button-height-default);
+  height: var(--ypmini-button-height-default);
+  line-height: var(--ypmini-button-height-default);
   color: var(--ypmini-color-text);
-  border-radius: var(--border-radius);
+  border-radius: var(--ypmini-border-radius);
   display: inline-block;
   white-space: nowrap;
 }
 .ypmini-taro-button:after {
   display: none;
 }
-.ypmini-taro-button-ghost {
-  background: transparent;
-}
 .ypmini-taro-button-shape-default {
   padding: 0 24px;
 }
@@ -68,87 +100,104 @@ page {
   border-radius: 1998px;
 }
 .ypmini-taro-button-size-large {
-  height: var(--button-height-large);
-  line-height: var(--button-height-large);
+  height: var(--ypmini-button-height-large);
+  line-height: var(--ypmini-button-height-large);
   font-weight: bold;
-  font-size: var(--button-font-size-large);
+  font-size: var(--ypmini-button-font-size-large);
 }
 .ypmini-taro-button-size-middle {
   font-weight: 400;
-  font-size: var(--button-font-size-middle);
-  height: var(--button-height-middle);
-  line-height: var(--button-height-middle);
+  font-size: var(--ypmini-button-font-size-middle);
+  height: var(--ypmini-button-height-middle);
+  line-height: var(--ypmini-button-height-middle);
 }
 .ypmini-taro-button-size-default {
-  height: var(--button-height-default);
-  line-height: var(--button-height-default);
+  height: var(--ypmini-button-height-default);
+  line-height: var(--ypmini-button-height-default);
 }
 .ypmini-taro-button-size-small {
   font-weight: 400;
-  font-size: var(--button-font-size-middle);
-  height: var(--button-height-small);
-  line-height: var(--button-height-small);
+  font-size: var(--ypmini-button-font-size-middle);
+  height: var(--ypmini-button-height-small);
+  line-height: var(--ypmini-button-height-small);
 }
 .ypmini-taro-button-warning {
-  background: var(--warning-button-background);
-  color: var(--warning-button-text-color);
+  background: var(--ypmini-warning-button-background);
+  color: var(--ypmini-warning-button-text-color);
 }
 .ypmini-taro-button-warning.ypmini-taro-button-warning-disabled {
   opacity: 0.6;
 }
 .ypmini-taro-button-warning.ypmini-taro-button-warning-disabled.ypmini-taro-button-warning.ypmini-taro-button-warning-disabled[disabled] {
-  color: var(--warning-button-text-color);
+  color: var(--ypmini-warning-button-text-color);
 }
 .ypmini-taro-button-warning.ypmini-taro-button-outlined {
-  border: 2px solid #E8362E;
-  color: #E8362E;
+  border: 2px solid var(--ypmini-warning-button-outlined-color);
+  color: var(--ypmini-warning-button-outlined-color);
   background: transparent;
 }
+.ypmini-taro-button-warning.ypmini-taro-button-ghost {
+  background: transparent;
+  color: var(--ypmini-warning-button-ghost-color);
+}
 .ypmini-taro-button-primary {
-  background: var(--primary-button-background);
-  color: var(--primary-button-text-color);
+  background: var(--ypmini-primary-button-background);
+  color: var(--ypmini-primary-button-text-color);
 }
 .ypmini-taro-button-primary.ypmini-taro-button-primary-disabled {
-  color: var(--primary-button-disabled-text-color);
-  background: var(--primary-button-disabled-background);
+  color: var(--ypmini-primary-button-disabled-text-color);
+  background: var(--ypmini-primary-button-disabled-background);
 }
 .ypmini-taro-button-primary.ypmini-taro-button-outlined {
-  border: 2px solid var(--primary-button-outlined-color);
-  color: var(--primary-button-outlined-color);
+  border: 2px solid var(--ypmini-primary-button-outlined-color);
+  color: var(--ypmini-primary-button-outlined-color);
   background: transparent;
 }
+.ypmini-taro-button-primary.ypmini-taro-button-ghost {
+  background: transparent;
+  color: var(--ypmini-primary-button-ghost-color);
+}
 .ypmini-taro-button-default {
-  background: var(--default-button-background);
-  color: var(--default-button-text-color);
+  background: var(--ypmini-default-button-background);
+  color: var(--ypmini-default-button-text-color);
 }
 .ypmini-taro-button-default.ypmini-taro-button-default-disabled {
   opacity: 0.6;
 }
 .ypmini-taro-button-default.ypmini-taro-button-default-disabled.ypmini-taro-button-default.ypmini-taro-button-default-disabled[disabled] {
-  color: var(--default-button-text-color);
+  color: var(--ypmini-default-button-text-color);
 }
 .ypmini-taro-button-default.ypmini-taro-button-outlined {
-  border: 2px solid var(--default-button-outlined-color);
-  color: var(--default-button-outlined-color);
+  border: 2px solid var(--ypmini-default-button-outlined-color);
+  color: var(--ypmini-default-button-outlined-color);
+  background: transparent;
+}
+.ypmini-taro-button-default.ypmini-taro-button-ghost {
   background: transparent;
+  color: var(--ypmini-default-button-ghost-color);
 }
 .ypmini-taro-button-secondary {
-  background: var(--secondary-button-background);
-  color: var(--secondary-button-text-color);
+  background: var(--ypmini-secondary-button-background);
+  color: var(--ypmini-secondary-button-text-color);
 }
 .ypmini-taro-button-secondary.ypmini-taro-button-secondary-disabled {
   opacity: 0.6;
 }
 .ypmini-taro-button-secondary.ypmini-taro-button-secondary-disabled.ypmini-taro-button-secondary.ypmini-taro-button-secondary-disabled[disabled] {
-  color: var(--secondary-button-text-color);
+  color: var(--ypmini-secondary-button-text-color);
 }
 .ypmini-taro-button-secondary.ypmini-taro-button-outlined {
-  border: 2px solid var(--secondary-button-background);
-  color: var(--secondary-button-background);
+  border: 2px solid var(--ypmini-secondary-button-background);
+  color: var(--ypmini-secondary-button-background);
   background: transparent;
 }
+.ypmini-taro-button-secondary.ypmini-taro-button-ghost {
+  background: transparent;
+  color: var(--ypmini-secondary-button-ghost-color);
+}
 .ypmini-taro-button-block {
   display: block;
+  width: 100%;
 }
 .ypmini-taro-button-icon-wrapper {
   display: flex;
@@ -209,6 +258,275 @@ page {
   margin-top: 0px;
 }
 :root,
+page {
+  --ypmini-city-selector-column-item-height: calc(48px * var(--ypmini-hd));
+  --ypmini-city-selector-column-item-font-size: var(--ypmini-font-size-default);
+}
+.ypmini-city-selector-wrapper {
+  position: relative;
+  height: 100%;
+  border-top: 1px solid var(--ypmini-border-color);
+}
+.ypmini-city-selector {
+  display: flex;
+  height: 100%;
+}
+.ypmini-city-selector-column {
+  flex: 1;
+}
+.ypmini-city-selector-column.ypmini-city-selector-column-secondary {
+  flex: 0 0 50%;
+}
+.ypmini-city-selector-column.ypmini-city-selector-column-secondary:first-child {
+  flex: 0 0 50%;
+}
+.ypmini-city-selector-column:first-child {
+  flex: 0 0 33.33%;
+}
+.ypmini-city-selector-column:not(:first-child):not(:last-child) {
+  border-right: 1px solid var(--ypmini-border-color);
+}
+.ypmini-city-selector-column-item-active {
+  font-weight: bold;
+  color: var(--ypmini-primary-color);
+}
+.ypmini-city-selector-column-1 {
+  background: #f5f6fa;
+}
+.ypmini-city-selector-column-1 .ypmini-city-selector-column-item-active {
+  position: relative;
+  background: #fff;
+}
+.ypmini-city-selector-column-1 .ypmini-city-selector-column-item-active:before {
+  position: absolute;
+  content: " ";
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 6px;
+  height: 40px;
+  border-radius: 0px 4px 4px 0px;
+  background: var(--ypmini-primary-color);
+}
+.ypmini-city-selector-column-item {
+  position: relative;
+  height: var(--ypmini-city-selector-column-item-height);
+  display: flex;
+  align-items: center;
+  padding-left: 24px;
+  font-size: var(--ypmini-city-selector-column-item-font-size);
+}
+.ypmini-city-selector-count-badge {
+  position: absolute;
+  right: 24px;
+  width: 28px;
+  height: 28px;
+  background: var(--ypmini-primary-color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
+  font-size: 20px;
+  color: #fff;
+  border-radius: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.ypmini-city-selector-dot-badge {
+  position: absolute;
+  border-radius: 100%;
+  top: 50%;
+  right: 24px;
+  width: 12px;
+  height: 12px;
+  transform: translateY(-50%);
+  background: var(--ypmini-primary-color);
+}
+.ypmini-city-selector-checked-icon {
+  font-size: 32px;
+  position: absolute;
+  right: 24px;
+  color: var(--ypmini-primary-color);
+  top: 50%;
+  transform: translateY(-50%);
+}
+.ypmini-city-selector-panel {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 24px;
+  border-radius: 24px 24px 0px 0px;
+  background: #ffffff;
+  box-shadow: 0px -4px 8px rgba(50, 52, 60, 0.1);
+}
+.ypmini-city-selector-panel-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.ypmini-city-selector-panel-title {
+  color: var(--ypmini-color-text);
+  font-weight: bold;
+  font-size: 32px;
+}
+.ypmini-city-selector-panel-count {
+  color: rgba(0, 0, 0, 0.45);
+  font-weight: 400;
+  font-size: 28px;
+}
+.ypmini-city-selector-panel-selected {
+  margin-top: 8px;
+  margin-left: -16px;
+  display: flex;
+  flex-wrap: wrap;
+}
+.ypmini-city-selector-panel-selected-item {
+  margin-left: 16px;
+  margin-top: 16px;
+  border-radius: 8px;
+  padding: 0px 16px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 56px;
+  background: var(--ypmini-primary-secondary-color);
+  color: var(--ypmini-primary-color);
+  font-weight: 400;
+  font-size: var(--ypmini-font-size-mini);
+  white-space: nowrap;
+}
+.ypmini-city-selector-panel-selected-item .ypmini-city-selector-panel-selected-item-close-icon {
+  font-size: 24px;
+  margin-left: 8px;
+}
+.ypmini-city-selector-panel-footer {
+  display: flex;
+  margin-top: 24px;
+}
+.ypmini-city-selector-panel-footer .ypmini-city-selector-panel-footer-btn-clear {
+  width: 220px;
+}
+.ypmini-city-selector-panel-footer .ypmini-taro-button:not(:first-child) {
+  margin-left: 20px;
+}
+.ypmini-datepicker-view {
+  height: 100%;
+}
+:root,
+page {
+  --ypmini-dialog-background: #fff;
+  --ypmini-dialog-border-radius: calc(12px * var(--ypmini-hd));
+  --ypmini-dialog-mask-background: var(--ypmini-mask-background);
+  --ypmini-dialog-z-index: 1100;
+  --ypmini-dialog-duration: 200ms;
+  --ypmini-dialog-width: calc(300px * var(--ypmini-hd));
+  --ypmini-dialog-title-font-size: var(--ypmini-font-size-large);
+  --ypmini-dialog-title-color: rgba(0, 0, 0, 0.85);
+  --ypmini-dialog-content-font-size: var(--ypmini-font-size-default);
+  --ypmini-dialog-content-color: rgba(0, 0, 0, 0.65);
+  --ypmini-dialog-btn-font-size: var(--ypmini-font-size-default);
+  --ypmini-dialog-btn-cancel-color: rgba(0, 0, 0, 0.65);
+  --ypmini-dialog-btn-confirm-color: var(--ypmini-primary-color);
+}
+.ypmini-dialog-wrapper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: var(--ypmini-dialog-z-index);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+}
+.ypmini-dialog-wrapper-visible {
+  pointer-events: auto;
+}
+.ypmini-dialog-mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--ypmini-dialog-mask-background);
+  opacity: 0;
+  transition: opacity var(--ypmini-dialog-duration) ease;
+}
+.ypmini-dialog-mask-visible {
+  opacity: 1;
+}
+.ypmini-dialog {
+  padding: 48px 32px 32px 32px;
+  position: relative;
+  width: var(--ypmini-dialog-width);
+  background: var(--ypmini-dialog-background);
+  border-radius: var(--ypmini-dialog-border-radius);
+  overflow: hidden;
+  opacity: 0;
+  transform: scale(0.9);
+  transition: opacity var(--ypmini-dialog-duration) ease, transform var(--ypmini-dialog-duration) ease;
+}
+.ypmini-dialog-visible {
+  opacity: 1;
+  transform: scale(1);
+}
+.ypmini-dialog-header {
+  text-align: center;
+  font-size: var(--ypmini-dialog-title-font-size);
+  font-weight: bold;
+  color: var(--ypmini-dialog-title-color);
+  line-height: 48px;
+}
+.ypmini-dialog-close {
+  font-size: 48px;
+  position: absolute;
+  right: 16px;
+  top: 16px;
+  color: rgba(0, 0, 0, 0.25);
+}
+.ypmini-dialog-body {
+  margin-top: 24px;
+  margin-bottom: 32px;
+  text-align: center;
+  font-size: var(--ypmini-dialog-content-font-size);
+  color: var(--ypmini-dialog-content-color);
+  line-height: 1.6;
+  word-break: break-word;
+}
+.ypmini-dialog-footer {
+  display: flex;
+}
+.ypmini-dialog-footer.ypmini-dialog-footer-vertical {
+  display: block;
+}
+.ypmini-dialog-footer.ypmini-dialog-footer-vertical .ypmini-dialog-btn:not(:first-child) {
+  margin-top: 24px;
+  margin-left: 0;
+}
+.ypmini-dialog-footer-btn {
+  height: 80px;
+  line-height: 80px;
+}
+.ypmini-dialog-btn {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--ypmini-dialog-btn-font-size);
+}
+.ypmini-dialog-btn:not(:first-child) {
+  margin-left: 22px;
+}
+.ypmini-dialog-btn-cancel {
+  color: var(--ypmini-dialog-btn-cancel-color);
+}
+.ypmini-dialog-btn-confirm {
+  color: var(--ypmini-dialog-btn-confirm-color);
+  font-weight: bold;
+}
+:root,
 page {
   --form-item-label-width: calc(60px * var(--ypmini-hd));
 }
@@ -243,17 +561,29 @@ page {
   font-size: 38px;
 }
 @font-face {
-  font-family: "iconfont";
+  font-family: "ypiconfont";
   /* Project id 5088009 */
-  src: url('iconfont.woff2?t=1766462693408') format('woff2'), url('iconfont.woff?t=1766462693408') format('woff'), url('iconfont.ttf?t=1766462693408') format('truetype');
+  src: url('https://at.alicdn.com/t/c/font_5088009_asy85y6kx4o.woff2?t=1768016348526') format('woff2'), url('https://at.alicdn.com/t/c/font_5088009_asy85y6kx4o.woff?t=1768016348526') format('woff'), url('https://at.alicdn.com/t/c/font_5088009_asy85y6kx4o.ttf?t=1768016348526') format('truetype');
 }
 .iconfont {
-  font-family: "iconfont" !important;
-  font-size: 16px;
+  font-family: "ypiconfont" !important;
+  font-size: 32px;
   font-style: normal;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+.icon-checked_icon:before {
+  content: "\e61e";
+}
+.icon-refresh_icon:before {
+  content: "\e61f";
+}
+.icon-location_icon:before {
+  content: "\e620";
+}
+.icon-add_icon:before {
+  content: "\e61d";
+}
 .icon-telephone_icon:before {
   content: "\e60f";
 }
@@ -304,47 +634,47 @@ page {
 }
 :root,
 page {
-  --input-placeholder-color: rgba(0, 0, 0, 0.25);
-  --input-text-color: var(--ypmini-color-text);
-  --input-font-size: var(--ypmini-font-size-default);
-  --input-delete-cion-color: #00000040;
-  --input-delete-cion-size: calc(var(--ypmini-hd) * 16px);
-  --input-height: calc(48px * var(--ypmini-hd));
-  --input-prefix-icon-size: calc(16px * var(--ypmini-hd));
-  --input-border-color: var(--ypmini-border-color);
-  --input-prefix-icon-color: #000000a6;
+  --ypmini-input-placeholder-color: var(--ypmini-color-text-placeholder);
+  --ypmini-input-text-color: var(--ypmini-color-text);
+  --ypmini-input-font-size: var(--ypmini-font-size-default);
+  --ypmini-input-delete-cion-color: #00000040;
+  --ypmini-input-delete-cion-size: calc(var(--ypmini-hd) * 16px);
+  --ypmini-input-height: calc(48px * var(--ypmini-hd));
+  --ypmini-input-prefix-icon-size: calc(16px * var(--ypmini-hd));
+  --ypmini-input-border-color: var(--ypmini-border-color);
+  --ypmini-input-prefix-icon-color: #000000a6;
 }
 .ypmini-taro-input-wrapper {
   display: flex;
   align-items: center;
-  height: var(--input-height);
-  font-size: var(--input-font-size);
+  height: var(--ypmini-input-height);
+  font-size: var(--ypmini-input-font-size);
   padding: 0px 24px;
   border-radius: 16px;
-  border: 2px solid var(--input-border-color);
+  border: 2px solid var(--ypmini-input-border-color);
   box-sizing: border-box;
 }
 .ypmini-taro-input-borderless-wrapper {
   border: unset;
 }
 .ypmini-taro-input {
-  color: var(--input-text-color);
+  color: var(--ypmini-input-text-color);
   flex: 1;
   border: none;
 }
 .ypmini-taro-input input::placeholder {
-  color: var(--input-placeholder-color);
+  color: var(--ypmini-input-placeholder-color);
 }
 .ypmini-input-placeholder {
-  color: var(--input-placeholder-color);
+  color: var(--ypmini-input-placeholder-color);
 }
 .ypmini-taro-input-clear {
   display: flex;
   align-items: center;
 }
 .ypmini-taro-input-clear-icon {
-  color: var(--input-delete-cion-color);
-  font-size: var(--input-delete-cion-size);
+  color: var(--ypmini-input-delete-cion-color);
+  font-size: var(--ypmini-input-delete-cion-size);
 }
 .ypmini-taro-input-count {
   color: rgba(0, 0, 0, 0.45);
@@ -359,9 +689,9 @@ page {
 .ypmini-taro-input-prefix-icon-wrapper {
   display: flex;
   align-items: center;
-  font-size: var(--input-prefix-icon-size);
+  font-size: var(--ypmini-input-prefix-icon-size);
   margin-right: 16px;
-  color: var(--input-prefix-icon-color);
+  color: var(--ypmini-input-prefix-icon-color);
 }
 :root,
 page {
@@ -385,6 +715,252 @@ page {
   font-size: 32px;
 }
 :root,
+page {
+  --ypmini-media-uploader-button-width: calc(106px * var(--ypmini-hd));
+  --ypmini-media-uploader-button-height: calc(106px * var(--ypmini-hd));
+  --ypmini-media-uploader-button-border-radius: calc(8px * var(--ypmini-hd));
+  --ypmini-media-uploader-button-border-color: #e9edf3;
+  --ypmini-media-uploader-horizal-sapce: calc(12px * var(--ypmini-hd));
+  --ypmini-media-uploader-vertical-sapce: calc(12px * var(--ypmini-hd));
+}
+.ypmini-media-uploader-list {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: calc(-1 * var(--ypmini-media-uploader-vertical-sapce));
+  margin-left: calc(-1 * var(--ypmini-media-uploader-horizal-sapce));
+}
+.ypmini-media-uploader-cell {
+  width: var(--ypmini-media-uploader-button-width);
+  height: var(--ypmini-media-uploader-button-height);
+  border-radius: var(--ypmini-media-uploader-button-border-radius);
+  border: 2px dashed var(--ypmini-media-uploader-button-border-color);
+  overflow: hidden;
+  margin-top: var(--ypmini-media-uploader-vertical-sapce);
+  margin-left: var(--ypmini-media-uploader-horizal-sapce);
+  border: unset;
+  position: relative;
+}
+.ypmini-media-uploader-cell.ypmini-media-uploader-cell-single {
+  margin-top: 0;
+  margin-left: 0;
+}
+.ypmini-media-uploader-cell-delete {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 10;
+  height: 48px;
+  width: 48px;
+  border-radius: 0px 16px 0px 16px;
+  background: rgba(0, 0, 0, 0.65);
+}
+.ypmini-media-uploader-cell-delete .ypmini-media-uploader-cell-delete-icon {
+  font-size: 32px;
+  color: #fff;
+}
+.ypmini-media-uploader-image-view {
+  height: 100%;
+  width: 100%;
+  object-fit: contain;
+}
+.ypmini-media-uploader-process-mask {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  background: rgba(0, 0, 0, 0.65);
+  z-index: 20;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.ypmini-media-uploader-process-bar {
+  width: calc(100% - (34px * var(--ypmini-hd)));
+  height: 12px;
+  border-radius: 6px;
+  background: rgba(255, 255, 255, 0.45);
+}
+.ypmini-media-uploader-process-bar-inner {
+  height: 100%;
+  width: 30%;
+  border-radius: 6px;
+  background: #ffffff;
+}
+.ypmini-media-uploader-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--ypmini-media-uploader-button-width);
+  height: var(--ypmini-media-uploader-button-height);
+  border-radius: var(--ypmini-media-uploader-button-border-radius);
+  border: 2px dashed var(--ypmini-media-uploader-button-border-color);
+}
+.ypmini-media-uploader-button.ypmini-media-uploader-button-single {
+  margin-top: 0;
+  margin-left: 0;
+}
+.ypmini-media-uploader-button .ypmini-media-uploader-icon {
+  font-size: 66px;
+  color: #e9edf3;
+}
+:root,
+page {
+  --ypmini-picker-view-column-font-size: var(--ypmini-font-size-large);
+  --ypmini-picker-view-column-font-color: #00000040;
+  --ypmini-picker-view-column-active-fot-color: ##000000a6;
+  --ypmini-picker-view-column-active-font-size: var(--ypmini-font-size-max);
+  --ypmini-picker-view-column-height: calc(var(--ypmini-hd) * 52px);
+  --ypmini-picker-view-indicator-background-color: #f5f7fc;
+  --ypmini-picker-view-indicator-border-radius: calc(var(--ypmini-hd) * 8px);
+  --ypmini-picker-view-disabled-mask-index: 100;
+  --ypmini-picker-view-disabled-mask-background-color: rgba(255, 255, 255, 0.6);
+}
+.ypmini-picker-view-wrapper {
+  position: relative;
+  height: 100%;
+  min-height: 400px;
+}
+.ypmini-picker-view {
+  height: 100%;
+}
+.ypmini-picker-view-column {
+  z-index: 20;
+}
+.ypmini-picker-view-column .ypmini-picker-view-indicator {
+  background: var(--ypmini-picker-view-indicator-background-color);
+  z-index: 0;
+}
+.ypmini-picker-view-column:first-child .ypmini-picker-view-indicator {
+  border-top-left-radius: var(--ypmini-picker-view-indicator-border-radius);
+  border-bottom-left-radius: var(--ypmini-picker-view-indicator-border-radius);
+}
+.ypmini-picker-view-column:last-child .ypmini-picker-view-indicator {
+  border-top-right-radius: var(--ypmini-picker-view-indicator-border-radius);
+  border-bottom-right-radius: var(--ypmini-picker-view-indicator-border-radius);
+}
+.ypmini-picker-view-column-item {
+  height: var(--ypmini-picker-view-column-height);
+  line-height: var(--ypmini-picker-view-column-height);
+  font-size: var(--ypmini-picker-view-column-font-size);
+}
+.ypmini-picker-view-indicator {
+  height: var(--ypmini-picker-view-column-height);
+  background: var(--ypmini-picker-view-indicator-background-color);
+  z-index: 0;
+  border-bottom: unset;
+  border-top: unset;
+}
+.ypmini-picker-view-indicator::before {
+  display: none;
+}
+.ypmini-picker-view-indicator::after {
+  display: none;
+}
+.ypmini-picker-view-mask {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  z-index: var(--ypmini-picker-view-disabled-mask-index);
+  background-color: var(--ypmini-picker-view-disabled-mask-background-color);
+}
+:root,
+page {
+  --ypmini-popup-background: #fff;
+  --ypmini-popup-border-radius: calc(12px * var(--ypmini-hd));
+  --ypmini-popup-mask-background: rgba(0, 0, 0, 0.5);
+  --ypmini-popup-z-index: 1000;
+  --ypmini-popup-duration: 300ms;
+  --ypmini-popup-title-font-size: var(--ypmini-font-size-large);
+  --ypmini-popup-title-font-color: rgba(0, 0, 0, 0.85);
+  --ypmini-popup-confirm-text-font-color: var(--ypmini-primary-color);
+  --ypmini-popup-cancel-text-font-color: rgba(0, 0, 0, 0.65);
+  --ypmini-popup-confirm-text-font-size: var(--ypmini-font-size-default);
+  --ypmini-popup-cancel-text-font-size: var(--ypmini-font-size-default);
+}
+.ypmini-popup-wrapper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: var(--ypmini-popup-z-index);
+  pointer-events: none;
+}
+.ypmini-popup-wrapper-visible {
+  pointer-events: auto;
+}
+.ypmini-popup-mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--ypmini-popup-mask-background);
+  opacity: 0;
+  transition: opacity var(--ypmini-popup-duration) ease;
+}
+.ypmini-popup-mask-visible {
+  opacity: 1;
+}
+.ypmini-popup {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--ypmini-popup-background);
+  transform: translateY(100%);
+  transition: transform var(--ypmini-popup-duration) ease;
+  max-height: 80vh;
+  overflow-y: auto;
+}
+.ypmini-popup-visible {
+  transform: translateY(0);
+}
+.ypmini-popup-round {
+  border-radius: var(--ypmini-popup-border-radius) var(--ypmini-popup-border-radius) 0 0;
+}
+.ypmini-popup-header {
+  padding: 32px;
+  display: flex;
+  max-width: 100%;
+  align-items: center;
+  justify-content: space-between;
+}
+.ypmini-popup-header-cancel {
+  color: var(--ypmini-popup-cancel-text-font-color);
+  font-weight: 400;
+  font-size: var(--ypmini-popup-cancel-text-fontsize);
+  flex: 0 0 60px;
+  white-space: nowrap;
+  text-align: left;
+}
+.ypmini-popup-header-title {
+  flex: 1;
+  text-align: center;
+  color: var(--ypmini-popup-title-font-color);
+  font-weight: 500;
+  font-size: var(--ypmini-font-size-large);
+  margin-left: 44px;
+  margin-right: 44px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.ypmini-popup-header-confirm {
+  color: var(--ypmini-popup-confirm-text-font-color);
+  font-weight: 400;
+  font-size: var(--ypmini-popup-confirm-text-fontsize);
+  flex: 0 0 60px;
+  white-space: nowrap;
+  text-align: right;
+}
+:root,
 page {
   --radio-button-font-size: calc(17px * var(--ypmini-hd));
   --radio-button-border-radius: calc(8px * var(--ypmini-hd));
@@ -438,6 +1014,146 @@ page {
 .ypmini-radio-group .ypmini-taro-radio:not(:first-child) {
   margin-left: 24px;
 }
+.ypmini-safe-area-view {
+  box-sizing: border-box;
+}
+:root,
+page {
+  --ypmini-switch-width: calc(var(--ypmini-hd) * 48px);
+  --ypmini-switch-height: calc(var(--ypmini-hd) * 24px);
+  --ypmini-switch-border-radius: calc(var(--ypmini-hd) * 12px);
+  --ypmini-switch-handle-size: calc(var(--ypmini-hd) * 18px);
+  --ypmini-switch-handle-margin: calc(var(--ypmini-hd) * 3px);
+  --ypmini-switch-background-color: #e9edf3;
+  --ypmini-switch-checked-color: var(--ypmini-primary-color);
+  --ypmini-switch-handle-color: #fff;
+  --ypmini-switch-duration: 200ms;
+  --ypmini-switch-disabled-opacity: 0.4;
+}
+.ypmini-switch {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  width: var(--ypmini-switch-width);
+  height: var(--ypmini-switch-height);
+  border-radius: var(--ypmini-switch-border-radius);
+  background-color: var(--ypmini-switch-background-color);
+  transition: background-color var(--ypmini-switch-duration) ease;
+  cursor: pointer;
+}
+.ypmini-switch-checked {
+  background-color: var(--ypmini-switch-checked-color);
+}
+.ypmini-switch-checked .ypmini-switch-handle {
+  transform: translateX(calc(var(--ypmini-switch-width) - var(--ypmini-switch-handle-size) - var(--ypmini-switch-handle-margin) * 2));
+}
+.ypmini-switch-disabled {
+  opacity: var(--ypmini-switch-disabled-opacity);
+  cursor: not-allowed;
+}
+.ypmini-switch-handle {
+  position: absolute;
+  left: var(--ypmini-switch-handle-margin);
+  width: var(--ypmini-switch-handle-size);
+  height: var(--ypmini-switch-handle-size);
+  border-radius: 50%;
+  background-color: var(--ypmini-switch-handle-color);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  transition: transform var(--ypmini-switch-duration) ease;
+}
+page,
+:root {
+  --ypmini-tag-size-default-height: calc(var(--ypmini-hd) * 22px);
+  --ypmini-tag-size-default-font-size: calc(var(--ypmini-hd) * 12px);
+  --ypmini-tag-size-small-height: calc(var(--ypmini-hd) * 18px);
+  --ypmini-tag-size-small-font-size: calc(var(--ypmini-hd) * 12px);
+  --ypmini-tag-default-background-color: #f5f7fc;
+  --ypmini-tag-primary-background-color: var(--ypmini-primary-secondary-color);
+  --ypmini-tag-success-background-color: #dff2ec;
+  --ypmini-tag-warning-background-color: #ffebec;
+  --ypmini-tag-default-font-color: rgba(0, 0, 0, 0.65);
+  --ypmini-tag-primary-font-color: var(--ypmini-primary-color);
+  --ypmini-tag-success-font-color: #06b578;
+  --ypmini-tag-warning-font-color: #e8362e;
+  --ypmini-tag-default-font-size: calc(var(--ypmini-hd) * 12px);
+  --ypmini-tag-small-font-size: calc(var(--ypmini-hd) * 10px);
+}
+.ypmini-tag {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--ypmini-tag-size-default-height);
+  padding: 0px 12px;
+  font-weight: 400;
+  border-radius: 8px;
+  font-size: var(--ypmini-tag-size-default-font-size);
+}
+.ypmini-tag-size-default {
+  padding: 0px 12px;
+  font-size: var(--ypmini-tag-size-default-font-size);
+  height: var(--ypmini-tag-size-default-height);
+}
+.ypmini-tag-size-small {
+  padding: 0px 8px;
+  font-size: var(--ypmini-tag-size-small-font-size);
+  height: var(--ypmini-tag-size-small-height);
+}
+.ypmini-tag-outlined {
+  box-sizing: border-box;
+}
+.ypmini-tag-default {
+  background: var(--ypmini-tag-default-background-color);
+  color: var(--ypmini-tag-default-font-color);
+}
+.ypmini-tag-default--outlined {
+  --ypmini-tag-default-outlined-border-color: var(--ypmini-tag-default-font-color);
+  border: 1px solid var(--ypmini-tag-default-outlined-border-color);
+}
+.ypmini-tag-default--solid {
+  border: unset;
+  background: var(--ypmini-tag-default-background-color);
+  color: var(--ypmini-tag-default-font-color);
+}
+.ypmini-tag-primary {
+  background: var(--ypmini-tag-primary-background-color);
+  color: var(--ypmini-tag-primary-font-color);
+}
+.ypmini-tag-primary--outlined {
+  --ypmini-tag-primary-outlined-border-color: var(--ypmini-tag-primary-font-color);
+  border: 1px solid var(--ypmini-tag-primary-outlined-border-color);
+}
+.ypmini-tag-primary--solid {
+  border: unset;
+  background: var(--ypmini-tag-primary-background-color);
+  color: var(--ypmini-tag-primary-font-color);
+}
+.ypmini-tag-warning {
+  background: var(--ypmini-tag-warning-background-color);
+  color: var(--ypmini-tag-warning-font-color);
+}
+.ypmini-tag-warning--outlined {
+  --ypmini-tag-warning-outlined-border-color: var(--ypmini-tag-warning-font-color);
+  border: 1px solid var(--ypmini-tag-warning-outlined-border-color);
+}
+.ypmini-tag-warning--solid {
+  border: unset;
+  background: var(--ypmini-tag-warning-background-color);
+  color: var(--ypmini-tag-warning-font-color);
+}
+.ypmini-tag-success {
+  background: var(--ypmini-tag-success-background-color);
+  color: var(--ypmini-tag-success-font-color);
+}
+.ypmini-tag-success--outlined {
+  --ypmini-tag-success-outlined-border-color: var(--ypmini-tag-success-font-color);
+  border: 1px solid var(--ypmini-tag-success-outlined-border-color);
+}
+.ypmini-tag-success--solid {
+  border: unset;
+  background: var(--ypmini-tag-success-background-color);
+  color: var(--ypmini-tag-success-font-color);
+}
 :root,
 page {
   --toast-z-index: 9999;