@kne/system-layout 0.2.0-alpha.14 → 0.2.0-alpha.16

package/dist/index.css

@@ -248,35 +248,36 @@
 }
 
 @media (max-width: 768px) {
-  ._sK89O {
+  .kne-system-layout_sK89O {
     width: 100%;
     padding: 0;
     overflow: hidden;
     height: unset;
     min-height: var(--window-height);
-    --page-height: 100vh;
+    --page-height: 100dvh;
     --page-content-height: var(--page-height);
     --page-inner-height: calc(var(--page-height) - var(--nav-height) - var(--toolbar-height));
   }
-  ._sK89O._gyKfI {
-    --toolbar-height: 60px;
+  .kne-system-layout_sK89O.kne-system-layout_gyKfI {
+    --toolbar-height: 72px;
   }
-  ._sK89O._X1wZG {
+  .kne-system-layout_sK89O.kne-system-layout_X1wZG {
     --nav-height: 48px;
   }
-  ._sK89O ._-LpWn {
-    position: absolute;
+  .kne-system-layout_sK89O .kne-system-layout_-LpWn {
+    position: fixed;
+    top: 0;
     left: calc(var(--menu-min-width) * -1);
     z-index: 900;
     background: var(--background);
     height: 100%;
   }
-  ._sK89O ._-LpWn._G-zuN {
+  .kne-system-layout_sK89O .kne-system-layout_-LpWn.kne-system-layout_G-zuN {
     left: 0;
     box-shadow: 0 -2px 22.9px 0 rgba(78, 96, 139, 0.13);
   }
-  ._sK89O ._6TCwG {
-    position: absolute;
+  .kne-system-layout_sK89O .kne-system-layout_6TCwG {
+    position: fixed;
     top: 0;
     left: 0;
     right: 0;
@@ -287,29 +288,31 @@
     pointer-events: none;
     transition: opacity 300ms;
   }
-  ._sK89O ._6TCwG._G-zuN {
+  .kne-system-layout_sK89O .kne-system-layout_6TCwG.kne-system-layout_G-zuN {
     opacity: 1;
     pointer-events: auto;
   }
-  ._sK89O ._5qnw5 {
+  .kne-system-layout_sK89O .kne-system-layout_5qnw5 {
     display: none;
   }
-  ._sK89O ._HnwkM {
+  .kne-system-layout_sK89O .kne-system-layout_HnwkM {
     border-radius: 0;
     border: 0;
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
   }
-  ._sK89O ._h8PAW {
+  .kne-system-layout_sK89O .kne-system-layout_h8PAW {
     display: block;
   }
-  ._sK89O ._OM1Q2 {
+  .kne-system-layout_sK89O .kne-system-layout_OM1Q2 {
     padding: 0;
     overflow: visible !important;
     height: unset;
   }
 }
-._sK89O {
+.kne-system-layout_sK89O {
   --window-width: 100vw;
-  --window-height: 100vh;
+  --window-height: 100dvh;
   --multiple: var(--safe-area-multiple, 1);
   --safe-area-inset-top: calc(env(safe-area-inset-top) * var(--multiple));
   --safe-area-inset-bottom: calc(env(safe-area-inset-bottom) * var(--multiple));
@@ -326,135 +329,136 @@
   position: relative;
   line-height: 1.4;
 }
-._sK89O .system-max-width-900 {
+.kne-system-layout_sK89O .system-max-width-900 {
   max-width: 900px;
   width: 100%;
   margin: 0 auto;
 }
-._sK89O .system-font-title {
+.kne-system-layout_sK89O .system-font-title {
   font-size: 16px;
   font-weight: bold;
 }
-._sK89O .system-font-title-primary {
+.kne-system-layout_sK89O .system-font-title-primary {
   font-size: 16px;
   font-weight: bold;
   color: var(--primary-color);
 }
-._sK89O .system-font-sub-title {
+.kne-system-layout_sK89O .system-font-sub-title {
   font-weight: bold;
 }
-._sK89O .system-font-bold {
+.kne-system-layout_sK89O .system-font-bold {
   font-weight: bold;
 }
-._sK89O .system-font-description {
+.kne-system-layout_sK89O .system-font-description {
   color: var(--font-color-grey);
 }
-._sK89O .scroller-bar {
+.kne-system-layout_sK89O .scroller-bar {
   background: transparent !important;
   border-color: transparent !important;
 }
-._sK89O .scroller-bar .scroller-bar-inner {
+.kne-system-layout_sK89O .scroller-bar .scroller-bar-inner {
   background: #999 !important;
   height: 40%;
 }
-._sK89O .ant-tag {
+.kne-system-layout_sK89O .ant-tag {
   background: var(--primary-color-1);
   border-radius: 11px;
   color: var(--font-color-grey);
 }
-._sK89O .ant-segmented {
+.kne-system-layout_sK89O .ant-segmented {
   border: 1px solid #d1d5db;
   border-radius: 17px;
   background: transparent !important;
 }
-._sK89O .ant-segmented .ant-segmented-item,
-._sK89O .ant-segmented .ant-segmented-thumb {
+.kne-system-layout_sK89O .ant-segmented .ant-segmented-item,
+.kne-system-layout_sK89O .ant-segmented .ant-segmented-thumb {
   border-radius: 14px;
 }
-._sK89O .ant-segmented .ant-segmented-item.ant-segmented-item-selected,
-._sK89O .ant-segmented .ant-segmented-thumb {
+.kne-system-layout_sK89O .ant-segmented .ant-segmented-item.ant-segmented-item-selected,
+.kne-system-layout_sK89O .ant-segmented .ant-segmented-thumb {
   background: var(--primary-color) !important;
   color: #fff !important;
 }
-._sK89O .ant-segmented .ant-segmented-item:after {
+.kne-system-layout_sK89O .ant-segmented .ant-segmented-item:after {
   background: transparent !important;
 }
-._sK89O .filter .filter-title {
+.kne-system-layout_sK89O .filter .filter-title {
   border-bottom: none;
 }
-._sK89O .react-form .ant-card {
+.kne-system-layout_sK89O .react-form .ant-card {
   max-width: 900px;
   margin: 0 auto;
   width: 100%;
 }
-._sK89O .max-width-info-page {
+.kne-system-layout_sK89O .max-width-info-page {
   max-width: 900px;
   margin: 0 auto;
   width: 100%;
 }
-._sK89O .part.bordered {
+.kne-system-layout_sK89O .part.bordered {
   background: rgba(255, 255, 255, 0.4392156863) !important;
 }
-._sK89O .part.bordered .part-title {
+.kne-system-layout_sK89O .part.bordered .part-title {
   font-size: 16px;
 }
-._sK89O .ant-pagination-options-size-changer {
+.kne-system-layout_sK89O .ant-pagination-options-size-changer {
   background: rgba(255, 255, 255, 0.4392156863) !important;
 }
-._sK89O .ant-tree {
+.kne-system-layout_sK89O .ant-tree {
   background: rgba(255, 255, 255, 0.4392156863) !important;
 }
-._sK89O .ant-table,
-._sK89O .ant-table-placeholder {
+.kne-system-layout_sK89O .ant-table,
+.kne-system-layout_sK89O .ant-table-placeholder {
   background: rgba(255, 255, 255, 0.4392156863) !important;
 }
-._sK89O .ant-table-cell,
-._sK89O .ant-table-wrapper .ant-table-tbody > tr > td.ant-table-cell {
+.kne-system-layout_sK89O .ant-table-cell,
+.kne-system-layout_sK89O .ant-table-wrapper .ant-table-tbody > tr > td.ant-table-cell {
   padding: 4px 8px;
 }
-._sK89O .ant-table-wrapper .ant-table-thead > tr > th.ant-table-cell {
+.kne-system-layout_sK89O .ant-table-wrapper .ant-table-thead > tr > th.ant-table-cell {
   padding: 6px 16px;
   font-weight: 400 !important;
   color: var(--font-color-grey);
 }
-._sK89O .ant-table-wrapper .ant-table-cell-fix {
+.kne-system-layout_sK89O .ant-table-wrapper .ant-table-cell-fix {
   background: transparent;
 }
-._sK89O .ant-table-wrapper .ant-table-cell-fix.ant-table-cell-fix-end-shadow-show, ._sK89O .ant-table-wrapper .ant-table-cell-fix.ant-table-cell-fix-start-shadow-show {
+.kne-system-layout_sK89O .ant-table-wrapper .ant-table-cell-fix.ant-table-cell-fix-end-shadow-show, .kne-system-layout_sK89O .ant-table-wrapper .ant-table-cell-fix.ant-table-cell-fix-start-shadow-show {
   background: var(--bg-color-grey);
 }
-._sK89O .ant-tooltip-container {
+.kne-system-layout_sK89O .ant-tooltip-container {
   max-width: 400px;
 }
-._sK89O._udBgQ {
+.kne-system-layout_sK89O.kne-system-layout_udBgQ {
   width: 100%;
   padding: 0;
   overflow: hidden;
   height: unset;
   min-height: var(--window-height);
-  --page-height: 100vh;
+  --page-height: 100dvh;
   --page-content-height: var(--page-height);
   --page-inner-height: calc(var(--page-height) - var(--nav-height) - var(--toolbar-height));
 }
-._sK89O._udBgQ._gyKfI {
-  --toolbar-height: 60px;
+.kne-system-layout_sK89O.kne-system-layout_udBgQ.kne-system-layout_gyKfI {
+  --toolbar-height: 72px;
 }
-._sK89O._udBgQ._X1wZG {
+.kne-system-layout_sK89O.kne-system-layout_udBgQ.kne-system-layout_X1wZG {
   --nav-height: 48px;
 }
-._sK89O._udBgQ ._-LpWn {
-  position: absolute;
+.kne-system-layout_sK89O.kne-system-layout_udBgQ .kne-system-layout_-LpWn {
+  position: fixed;
+  top: 0;
   left: calc(var(--menu-min-width) * -1);
   z-index: 900;
   background: var(--background);
   height: 100%;
 }
-._sK89O._udBgQ ._-LpWn._G-zuN {
+.kne-system-layout_sK89O.kne-system-layout_udBgQ .kne-system-layout_-LpWn.kne-system-layout_G-zuN {
   left: 0;
   box-shadow: 0 -2px 22.9px 0 rgba(78, 96, 139, 0.13);
 }
-._sK89O._udBgQ ._6TCwG {
-  position: absolute;
+.kne-system-layout_sK89O.kne-system-layout_udBgQ .kne-system-layout_6TCwG {
+  position: fixed;
   top: 0;
   left: 0;
   right: 0;
@@ -465,105 +469,107 @@
   pointer-events: none;
   transition: opacity 300ms;
 }
-._sK89O._udBgQ ._6TCwG._G-zuN {
+.kne-system-layout_sK89O.kne-system-layout_udBgQ .kne-system-layout_6TCwG.kne-system-layout_G-zuN {
   opacity: 1;
   pointer-events: auto;
 }
-._sK89O._udBgQ ._5qnw5 {
+.kne-system-layout_sK89O.kne-system-layout_udBgQ .kne-system-layout_5qnw5 {
   display: none;
 }
-._sK89O._udBgQ ._HnwkM {
+.kne-system-layout_sK89O.kne-system-layout_udBgQ .kne-system-layout_HnwkM {
   border-radius: 0;
   border: 0;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
 }
-._sK89O._udBgQ ._h8PAW {
+.kne-system-layout_sK89O.kne-system-layout_udBgQ .kne-system-layout_h8PAW {
   display: block;
 }
-._sK89O._udBgQ ._OM1Q2 {
+.kne-system-layout_sK89O.kne-system-layout_udBgQ .kne-system-layout_OM1Q2 {
   padding: 0;
   overflow: visible !important;
   height: unset;
 }
-._sK89O ._h8PAW {
+.kne-system-layout_sK89O .kne-system-layout_h8PAW {
   display: none;
 }
-._sK89O .ant-btn:not(.ant-btn-primary):not(.ant-btn-dangerous):not(.ant-btn-link):not(.ant-btn-dashed):not(.ant-btn-text):not(:disabled) {
+.kne-system-layout_sK89O .ant-btn:not(.ant-btn-primary):not(.ant-btn-dangerous):not(.ant-btn-link):not(.ant-btn-dashed):not(.ant-btn-text):not(:disabled) {
   background: var(--primary-color-2);
   color: var(--primary-color);
 }
-._sK89O .ant-btn:not(.ant-btn-link):not(.ant-btn-dashed):not(.ant-btn-text):not(:disabled) {
+.kne-system-layout_sK89O .ant-btn:not(.ant-btn-link):not(.ant-btn-dashed):not(.ant-btn-text):not(:disabled) {
   border: 1px solid rgba(255, 255, 255, 0.1) !important;
   box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.05), 0 15px 30px 0 rgba(0, 0, 0, 0.08);
   backdrop-filter: blur(10px);
 }
-._sK89O .ant-btn:not(.ant-btn-link):not(.ant-btn-dashed):not(.ant-btn-text):not(:disabled):hover:not(:disabled):not(.ant-btn-loading) {
+.kne-system-layout_sK89O .ant-btn:not(.ant-btn-link):not(.ant-btn-dashed):not(.ant-btn-text):not(:disabled):hover:not(:disabled):not(.ant-btn-loading) {
   backdrop-filter: blur(40px) saturate(1.5) brightness(1.2);
   transform: scale(1.04);
 }
-._sK89O .ant-btn:active:not(.ant-btn-loading) {
+.kne-system-layout_sK89O .ant-btn:active:not(.ant-btn-loading) {
   box-shadow: none !important;
   transform: scale(1);
 }
-._sK89O .ant-btn:disabled {
+.kne-system-layout_sK89O .ant-btn:disabled {
   box-shadow: none;
   color: var(--font-color-disabled);
   background: rgba(17, 24, 39, 0.2);
 }
-._sK89O .ant-btn.ant-btn-primary:not(:disabled) {
+.kne-system-layout_sK89O .ant-btn.ant-btn-primary:not(:disabled) {
   box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.05), 0 15px 30px 0 rgba(0, 0, 0, 0.08);
 }
-._sK89O .ant-btn.ant-btn-loading {
+.kne-system-layout_sK89O .ant-btn.ant-btn-loading {
   opacity: 0.6;
 }
-._sK89O .ant-btn {
+.kne-system-layout_sK89O .ant-btn {
   position: relative;
 }
-._sK89O .ant-btn .ant-btn-loading-icon {
+.kne-system-layout_sK89O .ant-btn .ant-btn-loading-icon {
   position: absolute;
 }
 
-._-LpWn {
+.kne-system-layout_-LpWn {
   flex: none;
   transition: width 0.3s;
   position: relative;
 }
-._-LpWn._G-zuN {
+.kne-system-layout_-LpWn.kne-system-layout_G-zuN {
   width: var(--menu-max-width);
 }
-._-LpWn:not(._G-zuN) {
+.kne-system-layout_-LpWn:not(.kne-system-layout_G-zuN) {
   width: var(--menu-min-width);
 }
-._-LpWn:not(._G-zuN) ._7wq3X {
+.kne-system-layout_-LpWn:not(.kne-system-layout_G-zuN) .kne-system-layout_7wq3X {
   padding: 0 16px;
 }
-._-LpWn:not(._G-zuN) ._-T-Dc {
+.kne-system-layout_-LpWn:not(.kne-system-layout_G-zuN) .kne-system-layout_-T-Dc {
   padding: 8px 16px;
   justify-content: center;
 }
-._-LpWn:not(._G-zuN) ._LOrmu {
+.kne-system-layout_-LpWn:not(.kne-system-layout_G-zuN) .kne-system-layout_LOrmu {
   padding: 12px 0;
   border: none;
   background: none;
   justify-content: center;
 }
 
-._-T-Dc {
+.kne-system-layout_-T-Dc {
   padding: 8px 24px;
   display: flex;
   justify-content: flex-start;
 }
-._-T-Dc img {
+.kne-system-layout_-T-Dc img {
   height: 24px !important;
   object-fit: contain;
   max-width: 100%;
 }
 
-._2cRWf {
+.kne-system-layout_2cRWf {
   display: flex;
   align-items: center;
 }
 
-._5D-Oq {
+.kne-system-layout_5D-Oq {
   position: absolute;
   right: -10px;
   top: 20px;
@@ -576,11 +582,11 @@
   justify-content: center;
   transition: transform 0.3s;
 }
-._5D-Oq:hover {
+.kne-system-layout_5D-Oq:hover {
   transform: scale(1.2);
 }
 
-._p4eOE {
+.kne-system-layout_p4eOE {
   position: absolute;
   width: 100%;
   height: 100%;
@@ -589,19 +595,19 @@
   transition: opacity 0.5s;
 }
 
-._8dzE7 {
+.kne-system-layout_8dzE7 {
   transition: transform 0.3s;
 }
-._8dzE7.is-closed {
+.kne-system-layout_8dzE7.is-closed {
   transform: scaleX(-1);
 }
 
-._7wq3X {
+.kne-system-layout_7wq3X {
   padding: 0 8px 0 16px;
   margin-top: 12px;
 }
 
-._LOrmu {
+.kne-system-layout_LOrmu {
   border-radius: 8px;
   border: 1px solid rgba(255, 255, 255, 0.3);
   background: rgba(255, 255, 255, 0.12);
@@ -613,16 +619,16 @@
   overflow: hidden;
 }
 
-._b7XeQ {
+.kne-system-layout_b7XeQ {
   font-weight: 500;
 }
 
-._U0YTk {
+.kne-system-layout_U0YTk {
   font-size: 12px;
   color: var(--font-color-grey);
 }
 
-._HnwkM {
+.kne-system-layout_HnwkM {
   border-radius: 12px;
   border: 1px solid rgba(255, 255, 255, 0.1);
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.86) 0%, rgba(255, 255, 255, 0.72) 100%);
@@ -631,11 +637,11 @@
   min-width: 0;
 }
 
-._8gqbZ {
+.kne-system-layout_8gqbZ {
   margin-top: 16px;
 }
 
-._5qnw5 {
+.kne-system-layout_5qnw5 {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -651,13 +657,13 @@
   cursor: pointer;
   transition: all 0.3s;
 }
-._5qnw5:hover {
+.kne-system-layout_5qnw5:hover {
   background: rgba(255, 255, 255, 0.6);
   backdrop-filter: blur(40px) saturate(1.5);
   transform: scale(1.1);
 }
 
-._UAJc- {
+.kne-system-layout_UAJc- {
   --container-width: 400px;
   --container-height: 400px;
   --container-base-width: var(--container-width);
@@ -673,7 +679,7 @@
   box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.05), 0 15px 30px 0 rgba(0, 0, 0, 0.08);
   transition: box-shadow 0.3s;
 }
-@keyframes _VjIWn {
+@keyframes kne-system-layout_VjIWn {
   0%, 100% {
     transform: scale(1);
   }
@@ -681,24 +687,24 @@
     transform: scale(1.02, 0.98);
   }
 }
-._UAJc-:hover {
-  animation: _VjIWn 0.4s ease-out;
+.kne-system-layout_UAJc-:hover {
+  animation: kne-system-layout_VjIWn 0.4s ease-out;
   background: rgba(255, 255, 255, 0.6);
   backdrop-filter: blur(10px) saturate(1.5);
   box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.05), 0 15px 30px 0 rgba(0, 0, 0, 0.08), 0 20px 40px 0 rgba(0, 0, 0, 0.08);
 }
 
-._I7Anv {
+.kne-system-layout_I7Anv {
   padding: 24px 0 24px 24px;
 }
 
-._UhsFd {
+.kne-system-layout_UhsFd {
   background: rgba(255, 255, 255, 0.4);
   border-radius: 8px;
   height: 100%;
   transition: box-shadow 0.3s;
 }
-@keyframes _H7slV {
+@keyframes kne-system-layout_H7slV {
   0%, 100% {
     transform: scale(1, 1);
   }
@@ -706,59 +712,59 @@
     transform: scale(1.01, 0.99);
   }
 }
-._UhsFd:hover {
+.kne-system-layout_UhsFd:hover {
   backdrop-filter: blur(40px) saturate(1.2);
-  animation: _H7slV 0.4s ease-out;
+  animation: kne-system-layout_H7slV 0.4s ease-out;
   box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.05), 0 15px 30px 0 rgba(0, 0, 0, 0.08), 0 20px 40px 0 rgba(0, 0, 0, 0.08);
 }
 
-._2mdNn {
+.kne-system-layout_2mdNn {
   --container-height: calc(var(--page-content-height) - 58px);
   height: var(--container-height);
 }
 
-._OM1Q2 {
+.kne-system-layout_OM1Q2 {
   --container-height: calc(var(--page-content-height) - 48px);
   padding: 24px;
   box-sizing: border-box;
   height: var(--page-height);
 }
-._OM1Q2._6gjkS {
+.kne-system-layout_OM1Q2.kne-system-layout_6gjkS {
   overflow-y: auto;
 }
 
-._nyAa2 {
+.kne-system-layout_nyAa2 {
   width: 100%;
 }
 
-._33Tja {
+.kne-system-layout_33Tja {
   height: 58px;
   align-items: center;
   justify-content: space-between;
   padding: 0 16px;
 }
-._33Tja .btn {
+.kne-system-layout_33Tja .btn {
   font-size: 24px;
   color: var(--font-color-grey);
   cursor: pointer;
 }
 
-._YmBhl {
+.kne-system-layout_YmBhl {
   --container-height: calc(var(--container-base-height) - 58px);
   height: var(--container-height);
 }
-._Rfzv4 {
+.kne-system-layout_Rfzv4 {
   font-size: 12px;
   color: var(--font-color-grey);
   line-height: 24px;
   padding: 12px;
 }
 
-._qoDtD {
+.kne-system-layout_qoDtD {
   color: var(--font-color-grey);
 }
 
-._socoO {
+.kne-system-layout_socoO {
   opacity: 0.6;
   background: var(--font-color-grey-3);
   height: 1px;
@@ -766,7 +772,7 @@
   margin: 8px auto;
 }
 
-._Xa-2h {
+.kne-system-layout_Xa-2h {
   line-height: 24px;
   padding: 12px;
   margin: 2px 0;
@@ -777,145 +783,384 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
-._Xa-2h:hover {
+.kne-system-layout_Xa-2h:hover {
   backdrop-filter: brightness(1.1);
   transform: scale(1.02);
 }
-._Xa-2h.is-active {
+.kne-system-layout_Xa-2h.is-active {
   background: linear-gradient(270deg, rgba(255, 255, 255, 0) -4%, rgba(255, 255, 255, 0.4) 70%, rgba(255, 255, 255, 0.3) 100%);
   box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, 0.05);
 }
-._Xa-2h.is-active ._qoDtD {
+.kne-system-layout_Xa-2h.is-active .kne-system-layout_qoDtD {
   color: var(--primary-color);
 }
-._Xa-2h.is-closed {
+.kne-system-layout_Xa-2h.is-closed {
   display: flex;
   justify-content: center;
 }
-._Xa-2h.is-closed.is-active {
+.kne-system-layout_Xa-2h.is-closed.is-active {
   background: rgba(255, 255, 255, 0.6);
   backdrop-filter: blur(40px) saturate(1.5);
 }
-._Xa-2h.is-closed ._qoDtD {
+.kne-system-layout_Xa-2h.is-closed .kne-system-layout_qoDtD {
   font-size: 24px;
 }
-._SLK-0 {
-  background: rgba(255, 255, 255, 0.72);
-  backdrop-filter: blur(10px);
-  padding-bottom: var(--safe-area-inset-bottom);
+.kne-system-layout_SLK-0 {
+  background: transparent;
 }
 
-._GTQvM {
-  height: 60px;
+.kne-system-layout_GTQvM {
+  height: 72px;
   position: fixed;
   z-index: 600;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  border-radius: 8px 8px 0 0;
-  box-shadow: 0 -2px 22.9px 0 rgba(78, 96, 139, 0.13);
-  background: rgba(255, 255, 255, 0.6);
-  backdrop-filter: blur(10px);
+  bottom: calc(16px + var(--safe-area-inset-bottom, 0px));
+  left: 16px;
+  right: 16px;
+  border-radius: 999px;
+  border: 1px solid rgba(255, 255, 255, 0.5);
+  box-shadow: 0 4px 16px 0 rgba(78, 96, 139, 0.18), 0 2px 6px 0 rgba(78, 96, 139, 0.1), inset 0 1px 1px 0 rgba(255, 255, 255, 0.6);
+  background: rgba(255, 255, 255, 0.25);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  padding: 6px 8px;
+  box-sizing: border-box;
+  transition: transform 0.3s ease, width 0.3s ease, background 0.3s ease, padding 0.3s ease;
+}
+.kne-system-layout_GTQvM.is-scrolling {
+  width: calc((100vw - 32px) / var(--toolbar-count, 4));
+  right: auto;
+  transform: scale(0.65);
+  transform-origin: left bottom;
+  padding: 8px;
+  backdrop-filter: blur(2px);
+  -webkit-backdrop-filter: blur(2px);
+  background: rgba(255, 255, 255, 0.1);
+}
+.kne-system-layout_GTQvM.is-scrolling .kne-system-layout_fAZ3n {
+  padding: 0 !important;
+  flex: none !important;
+  width: 100%;
+  height: 100%;
+  gap: 0 !important;
+  order: 2;
+}
+.kne-system-layout_GTQvM.is-scrolling .kne-system-layout_fAZ3n .kne-system-layout_qOB9o {
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.kne-system-layout_GTQvM.is-scrolling .kne-system-layout_fAZ3n:not(.kne-system-layout_ss5zk) {
+  order: 1;
+}
+.kne-system-layout_GTQvM.is-scrolling .kne-system-layout_h48es {
+  display: none;
+}
+.kne-system-layout_GTQvM.is-scrolling .kne-system-layout_1s-bc {
+  left: 8px !important;
+  right: 8px;
+  width: auto !important;
+}
+.kne-system-layout_GTQvM.is-clicked {
+  animation: kne-system-layout_Ys3yu 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 
-._fAZ3n {
+@keyframes kne-system-layout_Ys3yu {
+  0% {
+    transform: scaleX(1) scaleY(1);
+    filter: brightness(1);
+  }
+  25% {
+    transform: scaleX(0.98) scaleY(1.015);
+    filter: brightness(1.15);
+  }
+  55% {
+    transform: scaleX(1.008) scaleY(0.995);
+    filter: brightness(1.05);
+  }
+  100% {
+    transform: scale(1);
+    filter: brightness(1);
+  }
+}
+.kne-system-layout_fAZ3n {
   cursor: pointer;
+  border-radius: 999px;
+  padding: 4px 12px;
+  box-sizing: border-box;
+  min-width: 0;
+  position: relative;
+  z-index: 1;
+  transition: opacity 0.2s ease;
+  overflow: hidden;
 }
-._fAZ3n.is-active ._qOB9o,
-._fAZ3n.is-active ._h48es {
+.kne-system-layout_fAZ3n .kne-system-layout_qOB9o,
+.kne-system-layout_fAZ3n .kne-system-layout_h48es {
+  color: #333;
+  transition: color 0.5s ease;
+}
+.kne-system-layout_fAZ3n.is-active .kne-system-layout_qOB9o,
+.kne-system-layout_fAZ3n.is-active .kne-system-layout_h48es {
   color: var(--primary-color);
 }
+.kne-system-layout_fAZ3n.kne-system-layout_ss5zk {
+  opacity: 0;
+  pointer-events: none;
+  flex: 0 !important;
+  width: 0;
+  overflow: hidden;
+  padding: 0;
+}
+
+.kne-system-layout_1s-bc {
+  position: absolute;
+  top: 6px;
+  bottom: 6px;
+  border-radius: 999px;
+  background: rgba(120, 120, 120, 0.22);
+  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s ease;
+  z-index: 0;
+  pointer-events: none;
+  will-change: left, width, transform;
+}
 
-._fAZ3n ._qOB9o {
+.kne-system-layout_fAZ3n .kne-system-layout_qOB9o {
   width: 24px;
   height: 24px;
   font-size: 24px;
+  line-height: 1;
 }
 
-._h48es {
+.kne-system-layout_h48es {
   font-size: 12px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
 }
 @media (max-width: 768px) {
-  ._c1kXt {
+  .kne-system-layout_c1kXt {
     gap: 0 !important;
   }
-  ._c1kXt ._h-YXH {
+  .kne-system-layout_c1kXt .kne-system-layout_h-YXH {
     height: 48px;
     padding: 0 16px;
     background: #ffffff;
     margin-bottom: 0;
+    position: fixed;
+    top: var(--safe-area-inset-top, 0px);
+    left: 0;
+    right: 0;
+    z-index: 600;
+    transition: height 0.3s ease, padding 0.3s ease, background 0.3s ease, margin 0.3s ease, top 0.3s ease;
+  }
+  .kne-system-layout_c1kXt .kne-system-layout_h-YXH.kne-system-layout_dEXMy {
+    height: 36px;
+    padding: 0;
+    background: transparent;
+    margin: 8px 16px;
+    top: calc(8px + var(--safe-area-inset-top, 0px));
+  }
+  .kne-system-layout_c1kXt .kne-system-layout_h-YXH.kne-system-layout_dEXMy .kne-system-layout_jhcGo {
+    border-radius: 999px;
+    padding: 0 12px;
+    height: 36px;
+    border: 1px solid rgba(255, 255, 255, 0.5);
+    box-shadow: 0 8px 32px 0 rgba(78, 96, 139, 0.18), 0 2px 8px 0 rgba(78, 96, 139, 0.1), inset 0 1px 1px 0 rgba(255, 255, 255, 0.6);
+    background: rgba(255, 255, 255, 0.25);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
   }
-  ._c1kXt ._IOVGr {
+  .kne-system-layout_c1kXt .kne-system-layout_h-YXH.kne-system-layout_dEXMy .kne-system-layout_jhcGo:active {
+    animation: kne-system-layout_Ps1FA 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
+  }
+  .kne-system-layout_c1kXt .kne-system-layout_h-YXH.kne-system-layout_dEXMy .kne-system-layout_mKsLu {
+    border-radius: 999px;
+    padding: 0 8px;
+    height: 36px;
+    border: 1px solid rgba(255, 255, 255, 0.5);
+    box-shadow: 0 8px 32px 0 rgba(78, 96, 139, 0.18), 0 2px 8px 0 rgba(78, 96, 139, 0.1), inset 0 1px 1px 0 rgba(255, 255, 255, 0.6);
+    background: rgba(255, 255, 255, 0.25);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+  }
+  .kne-system-layout_c1kXt .kne-system-layout_h-YXH.kne-system-layout_dEXMy .kne-system-layout_mKsLu:active {
+    animation: kne-system-layout_Ps1FA 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
+  }
+  .kne-system-layout_c1kXt .kne-system-layout_h-YXH.kne-system-layout_dEXMy .kne-system-layout_IOVGr {
+    font-size: 14px;
+    color: #333;
+  }
+  .kne-system-layout_c1kXt .kne-system-layout_h-YXH.kne-system-layout_dEXMy .ant-btn {
+    color: #333 !important;
+  }
+  .kne-system-layout_c1kXt .kne-system-layout_h-YXH.kne-system-layout_dEXMy .ant-btn:hover {
+    color: #555 !important;
+  }
+  @keyframes kne-system-layout_Ps1FA {
+    0% {
+      transform: scaleX(1) scaleY(1);
+      filter: brightness(1);
+    }
+    25% {
+      transform: scaleX(0.97) scaleY(1.03);
+      filter: brightness(1.2);
+    }
+    55% {
+      transform: scaleX(1.015) scaleY(0.99);
+      filter: brightness(1.08);
+    }
+    100% {
+      transform: scale(1);
+      filter: brightness(1);
+    }
+  }
+  .kne-system-layout_c1kXt .kne-system-layout_IOVGr {
     font-size: 16px;
     flex: 1;
     color: var(--primary-color);
+    transition: font-size 0.3s ease, color 0.3s ease;
   }
-  ._c1kXt ._mKsLu {
+  .kne-system-layout_c1kXt .kne-system-layout_mKsLu {
     flex: none;
   }
-  ._c1kXt ._wHWje {
+  .kne-system-layout_c1kXt .kne-system-layout_Y1y7o {
+    padding-top: calc(52px + var(--safe-area-inset-top, 0px));
+  }
+  .kne-system-layout_c1kXt .kne-system-layout_wHWje {
     box-sizing: border-box;
     --content-height: calc(var(--page-inner-height) - 24px);
     padding: 12px;
   }
-  ._c1kXt ._wHWje:after {
+  .kne-system-layout_c1kXt .kne-system-layout_wHWje:after {
     content: "";
     display: block;
-    height: var(--toolbar-height);
+    height: calc(var(--toolbar-height) + 48px + var(--safe-area-inset-bottom));
   }
-  ._c1kXt ._wHWje._tBnAD {
+  .kne-system-layout_c1kXt .kne-system-layout_wHWje.kne-system-layout_tBnAD {
     --content-height: var(--page-inner-height);
     padding: 0;
   }
 }
-._c1kXt._yRZMx {
+.kne-system-layout_c1kXt.kne-system-layout_yRZMx {
   gap: 0 !important;
 }
-._c1kXt._yRZMx ._h-YXH {
+.kne-system-layout_c1kXt.kne-system-layout_yRZMx .kne-system-layout_h-YXH {
   height: 48px;
   padding: 0 16px;
   background: #ffffff;
   margin-bottom: 0;
+  position: fixed;
+  top: var(--safe-area-inset-top, 0px);
+  left: 0;
+  right: 0;
+  z-index: 600;
+  transition: height 0.3s ease, padding 0.3s ease, background 0.3s ease, margin 0.3s ease, top 0.3s ease;
+}
+.kne-system-layout_c1kXt.kne-system-layout_yRZMx .kne-system-layout_h-YXH.kne-system-layout_dEXMy {
+  height: 36px;
+  padding: 0;
+  background: transparent;
+  margin: 8px 16px;
+  top: calc(8px + var(--safe-area-inset-top, 0px));
+}
+.kne-system-layout_c1kXt.kne-system-layout_yRZMx .kne-system-layout_h-YXH.kne-system-layout_dEXMy .kne-system-layout_jhcGo {
+  border-radius: 999px;
+  padding: 0 12px;
+  height: 36px;
+  border: 1px solid rgba(255, 255, 255, 0.5);
+  box-shadow: 0 8px 32px 0 rgba(78, 96, 139, 0.18), 0 2px 8px 0 rgba(78, 96, 139, 0.1), inset 0 1px 1px 0 rgba(255, 255, 255, 0.6);
+  background: rgba(255, 255, 255, 0.25);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+}
+.kne-system-layout_c1kXt.kne-system-layout_yRZMx .kne-system-layout_h-YXH.kne-system-layout_dEXMy .kne-system-layout_jhcGo:active {
+  animation: kne-system-layout_Ps1FA 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+.kne-system-layout_c1kXt.kne-system-layout_yRZMx .kne-system-layout_h-YXH.kne-system-layout_dEXMy .kne-system-layout_mKsLu {
+  border-radius: 999px;
+  padding: 0 8px;
+  height: 36px;
+  border: 1px solid rgba(255, 255, 255, 0.5);
+  box-shadow: 0 8px 32px 0 rgba(78, 96, 139, 0.18), 0 2px 8px 0 rgba(78, 96, 139, 0.1), inset 0 1px 1px 0 rgba(255, 255, 255, 0.6);
+  background: rgba(255, 255, 255, 0.25);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
 }
-._c1kXt._yRZMx ._IOVGr {
+.kne-system-layout_c1kXt.kne-system-layout_yRZMx .kne-system-layout_h-YXH.kne-system-layout_dEXMy .kne-system-layout_mKsLu:active {
+  animation: kne-system-layout_Ps1FA 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+.kne-system-layout_c1kXt.kne-system-layout_yRZMx .kne-system-layout_h-YXH.kne-system-layout_dEXMy .kne-system-layout_IOVGr {
+  font-size: 14px;
+  color: #333;
+}
+.kne-system-layout_c1kXt.kne-system-layout_yRZMx .kne-system-layout_h-YXH.kne-system-layout_dEXMy .ant-btn {
+  color: #333 !important;
+}
+.kne-system-layout_c1kXt.kne-system-layout_yRZMx .kne-system-layout_h-YXH.kne-system-layout_dEXMy .ant-btn:hover {
+  color: #555 !important;
+}
+@keyframes kne-system-layout_Ps1FA {
+  0% {
+    transform: scaleX(1) scaleY(1);
+    filter: brightness(1);
+  }
+  25% {
+    transform: scaleX(0.97) scaleY(1.03);
+    filter: brightness(1.2);
+  }
+  55% {
+    transform: scaleX(1.015) scaleY(0.99);
+    filter: brightness(1.08);
+  }
+  100% {
+    transform: scale(1);
+    filter: brightness(1);
+  }
+}
+.kne-system-layout_c1kXt.kne-system-layout_yRZMx .kne-system-layout_IOVGr {
   font-size: 16px;
   flex: 1;
   color: var(--primary-color);
+  transition: font-size 0.3s ease, color 0.3s ease;
 }
-._c1kXt._yRZMx ._mKsLu {
+.kne-system-layout_c1kXt.kne-system-layout_yRZMx .kne-system-layout_mKsLu {
   flex: none;
 }
-._c1kXt._yRZMx ._wHWje {
+.kne-system-layout_c1kXt.kne-system-layout_yRZMx .kne-system-layout_Y1y7o {
+  padding-top: calc(52px + var(--safe-area-inset-top, 0px));
+}
+.kne-system-layout_c1kXt.kne-system-layout_yRZMx .kne-system-layout_wHWje {
   box-sizing: border-box;
   --content-height: calc(var(--page-inner-height) - 24px);
   padding: 12px;
 }
-._c1kXt._yRZMx ._wHWje:after {
+.kne-system-layout_c1kXt.kne-system-layout_yRZMx .kne-system-layout_wHWje:after {
   content: "";
   display: block;
-  height: var(--toolbar-height);
+  height: calc(var(--toolbar-height) + 48px + var(--safe-area-inset-bottom));
 }
-._c1kXt._yRZMx ._wHWje._tBnAD {
+.kne-system-layout_c1kXt.kne-system-layout_yRZMx .kne-system-layout_wHWje.kne-system-layout_tBnAD {
   --content-height: var(--page-inner-height);
   padding: 0;
 }
 
-._jhcGo {
+.kne-system-layout_jhcGo {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
-._h-YXH {
+.kne-system-layout_h-YXH {
   margin-bottom: 12px;
 }
 
-._IOVGr {
+.kne-system-layout_IOVGr {
   font-size: 20px;
   font-weight: 500;
 }
 
-._wHWje {
+.kne-system-layout_wHWje {
   --content-height: var(--page-inner-height);
   min-height: calc(var(--page-inner-height) + var(--toolbar-height));
   display: flex;
@@ -923,33 +1168,33 @@
   flex: 1;
 }
 
-._mKsLu {
+.kne-system-layout_mKsLu {
   display: flex;
   justify-content: flex-end;
   flex: 1;
   max-width: 50%;
 }
 
-._vcf3J {
+.kne-system-layout_vcf3J {
   width: 100%;
   background: #fff;
   padding: 12px;
   border-radius: 12px;
 }
 
-._Y1y7o {
+.kne-system-layout_Y1y7o {
   display: block;
   width: 100%;
   padding-top: var(--safe-area-inset-top);
 }
 
-._vXk1s {
+.kne-system-layout_vXk1s {
   display: block;
   width: 100%;
   padding-bottom: var(--safe-area-inset-bottom);
 }
 
-._07Mna {
+.kne-system-layout_07Mna {
   display: block;
   transform: rotate(180deg);
 }