@moneyforward/mfui-components 3.7.0 → 3.9.0

package/dist/styles.css

@@ -252,7 +252,9 @@
   --mfui-sizes-mfui\.layout\.area\.horizontal\.floating-default: 448px;
   --mfui-sizes-mfui\.layout\.area\.horizontal\.fixed: 588px;
   --mfui-sizes-mfui\.layout\.area\.vertical\.global-header: 48px;
-                                                                        --mfui-sizes-mfui\.layout\.grid\.scale\.vertical\.1-1of4: 30px;
+                                                --mfui-sizes-mfui\.layout\.grid\.scale\.vertical\.2: 48px;
+          --mfui-sizes-mfui\.layout\.grid\.scale\.vertical\.0-1of3: 8px;
+              --mfui-sizes-mfui\.layout\.grid\.scale\.vertical\.1-1of4: 30px;
           --mfui-sizes-mfui\.layout\.safe-area\.edge\.horizontal: 49px;
   --mfui-sizes-mfui\.layout\.safe-area\.edge\.vertical: 48px;
               --mfui-sizes-mfui\.size\.dimension\.control-component\.height\.comfort: 32px;
@@ -260,9 +262,9 @@
   --mfui-sizes-mfui\.size\.dimension\.control-component\.height\.impact: 48px;
   --mfui-sizes-mfui\.size\.dimension\.control-container\.height\.comfort: 48px;
       --mfui-sizes-mfui\.size\.dimension\.header\.height\.comfort: 48px;
-      --mfui-sizes-mfui\.size\.dimension\.data-grid-cell\.height\.comfort: 48px;
-  --mfui-sizes-mfui\.size\.dimension\.data-grid-cell\.height\.condensed: 32px;
-    --mfui-sizes-mfui\.size\.dimension\.data-grid-disclosure-inidicator\.width\.comfort: 21px;
+      --mfui-sizes-mfui\.size\.dimension\.data-table-cell\.height\.comfort: 48px;
+  --mfui-sizes-mfui\.size\.dimension\.data-table-cell\.height\.condensed: 32px;
+    --mfui-sizes-mfui\.size\.dimension\.data-table-disclosure-inidicator\.width\.comfort: 21px;
             --mfui-sizes-mfui\.size\.dimension\.badge\.diameter\.comfort: 7px;
       --mfui-sizes-mfui\.size\.dimension\.icon\.square\.comfort: 18px;
   --mfui-sizes-mfui\.size\.dimension\.icon\.square\.condensed: 14px;
@@ -307,10 +309,10 @@
       --mfui-spacing-mfui\.size\.padding\.main-content\.horizontal\.comfort: 14px;
       --mfui-spacing-mfui\.size\.padding\.main-content\.top\.comfort: 12px;
       --mfui-spacing-mfui\.size\.padding\.main-content\.bottom\.comfort: 48px;
-                        --mfui-spacing-mfui\.size\.padding\.data-grid-cell\.horizontal\.comfort: 7px;
-  --mfui-spacing-mfui\.size\.padding\.data-grid-cell\.horizontal\.condensed: 7px;
-                                  --mfui-spacing-mfui\.size\.padding\.data-grid-cell\.vertical\.comfort: 12px;
-  --mfui-spacing-mfui\.size\.padding\.data-grid-cell\.vertical\.condensed: 4px;
+                        --mfui-spacing-mfui\.size\.padding\.data-table-cell\.horizontal\.comfort: 7px;
+  --mfui-spacing-mfui\.size\.padding\.data-table-cell\.horizontal\.condensed: 7px;
+                                  --mfui-spacing-mfui\.size\.padding\.data-table-cell\.vertical\.comfort: 12px;
+  --mfui-spacing-mfui\.size\.padding\.data-table-cell\.vertical\.condensed: 4px;
     --mfui-spacing-mfui\.size\.padding\.display-table-cell\.horizontal\.comfort: 14px;
       --mfui-spacing-mfui\.size\.padding\.display-table-cell\.horizontal-indent-1\.comfort: 28px;
       --mfui-spacing-mfui\.size\.padding\.display-table-cell\.horizontal-indent-2\.comfort: 42px;
@@ -1772,6 +1774,20 @@
   height: var(--mfui-sizes-mfui\.size\.dimension\.icon\.square\.comfort);
 }
 
+.mfui-jsaEqi {
+  padding-inline: var(--mfui-spacing-mfui\.size\.padding\.container\.horizontal\.comfort);
+  border-bottom: 1px solid;
+  border-color: var(--mfui-colors-mfui\.color\.dark-accent\.border\.none);
+  display: flex;
+  padding-block-start: var(--mfui-sizes-mfui\.layout\.grid\.scale\.vertical\.2);
+  padding-block-end: calc(var(--mfui-sizes-mfui\.layout\.grid\.scale\.vertical\.0-1of3) - 1px);
+}
+
+.mfui-gmJOED {
+  color: var(--mfui-colors-mfui\.color\.dark-accent\.content\.none);
+  overflow-wrap: anywhere;
+}
+
 .mfui-iXDdvS {
   list-style: none;
 }
@@ -2117,6 +2133,19 @@
   height: var(--mfui-sizes-mfui\.size\.dimension\.icon\.square\.comfort);
 }
 
+.mfui-iMbGRc {
+  padding-inline: var(--mfui-spacing-mfui\.size\.padding\.container\.horizontal\.comfort);
+  border-bottom: 1px solid;
+  border-color: var(--mfui-colors-mfui\.color\.dark-accent\.border\.none);
+  padding-block-start: var(--mfui-sizes-mfui\.layout\.grid\.scale\.vertical\.2);
+  padding-block-end: var(--mfui-sizes-mfui\.layout\.grid\.scale\.vertical\.0-1of3);
+}
+
+.mfui-gkzbmJ {
+  color: var(--mfui-colors-mfui\.color\.dark-accent\.content\.none);
+  overflow-wrap: anywhere;
+}
+
 .mfui-eyCsIU {
   list-style: none;
 }
@@ -2676,19 +2705,19 @@
   top: 50%;
 }
 
-.mfui-kWfCOT {
+.mfui-dDOVnx {
   vertical-align: top;
 }
 
-.mfui-kWfCOT:first-child {
+.mfui-dDOVnx:first-child {
   padding-left: var(--mfui-spacing-mfui\.size\.padding\.container\.horizontal\.comfort);
 }
 
-.mfui-kWfCOT:last-child {
+.mfui-dDOVnx:last-child {
   padding-right: var(--mfui-spacing-mfui\.size\.padding\.container\.horizontal\.comfort);
 }
 
-.mfui-kNyydk,.mfui-cJiown {
+.mfui-hYiFZu,.mfui-fUSGoR {
   display: flex;
   align-items: flex-start;
   justify-content: flex-start;
@@ -2699,47 +2728,47 @@
   width: 100%;
 }
 
-.mfui-cJiown {
+.mfui-fUSGoR {
   cursor: pointer;
 }
 
-.mfui-cJiown:is(:focus, [data-focus]),.mfui-cJiown:is(:hover, [data-hover]) {
+.mfui-fUSGoR:is(:focus, [data-focus]),.mfui-fUSGoR:is(:hover, [data-hover]) {
   border-color: var(--mfui-colors-mfui\.color\.neutral\.thin-border\.hovered);
   color: var(--mfui-colors-mfui\.color\.base\.content\.hovered);
   background-color: var(--mfui-colors-mfui\.color\.base\.background\.hovered);
 }
 
-.mfui-cJiown:is(:active, [data-active]) {
+.mfui-fUSGoR:is(:active, [data-active]) {
   border-color: var(--mfui-colors-mfui\.color\.neutral\.thin-border\.pressed);
   color: var(--mfui-colors-mfui\.color\.base\.content\.pressed);
   background-color: var(--mfui-colors-mfui\.color\.base\.background\.pressed);
 }
 
-.mfui-bKSIri {
+.mfui-hsfdKA {
   place-items: center;
   display: grid;
   flex-shrink: 0;
   height: 24px;
-  width: var(--mfui-sizes-mfui\.size\.dimension\.data-grid-disclosure-inidicator\.width\.comfort);
+  width: var(--mfui-sizes-mfui\.size\.dimension\.data-table-disclosure-inidicator\.width\.comfort);
 }
 
-.mfui-bKSIri > svg {
+.mfui-hsfdKA > svg {
   width: var(--mfui-sizes-mfui\.size\.dimension\.icon\.square\.comfort);
   height: var(--mfui-sizes-mfui\.size\.dimension\.icon\.square\.comfort);
 }
 
-.mfui-etTIKv {
-  min-width: var(--mfui-sizes-mfui\.size\.dimension\.data-grid-disclosure-inidicator\.width\.comfort);
+.mfui-cpiGBN {
+  min-width: var(--mfui-sizes-mfui\.size\.dimension\.data-table-disclosure-inidicator\.width\.comfort);
 }
 
-.mfui-hrJUxa {
-  padding-inline: var(--mfui-spacing-mfui\.size\.padding\.data-grid-cell\.horizontal\.comfort);
+.mfui-eHfYTg {
+  padding-inline: var(--mfui-spacing-mfui\.size\.padding\.data-table-cell\.horizontal\.comfort);
   padding-block: 5px;
   margin-block: var(--mfui-spacing-mfui\.size\.padding\.display-table-cell\.vertical\.comfort);
   height: 24px;
 }
 
-.mfui-fXPtIg {
+.mfui-kKZIFS {
   overflow: auto;
   position: relative;
   z-index: 0;
@@ -2748,14 +2777,14 @@
   max-height: 100%;
 }
 
-.mfui-kDyQuJ {
+.mfui-gTPmFP {
   border-collapse: collapse;
   border-spacing: 0;
   width: 100%;
   height: fit-content;
 }
 
-.mfui-dorDPR {
+.mfui-kCEZwb {
   padding-block: var(--mfui-spacing-mfui\.size\.padding\.container\.vertical\.comfort);
   display: flex;
   justify-content: center;
@@ -2763,21 +2792,21 @@
   width: 100%;
 }
 
-.mfui-bUNkzE {
+.mfui-jMpBJi {
   border-color: var(--mfui-colors-mfui\.color\.neutral\.sub-border\.none);
   background-color: var(--mfui-colors-mfui\.color\.neutral\.sub-background\.none);
   border-bottom-style: solid;
 }
 
-.mfui-bUNkzE:first-child {
+.mfui-jMpBJi:first-child {
   padding-left: var(--mfui-spacing-mfui\.size\.padding\.container\.horizontal\.comfort);
 }
 
-.mfui-bUNkzE:last-child {
+.mfui-jMpBJi:last-child {
   padding-right: var(--mfui-spacing-mfui\.size\.padding\.container\.horizontal\.comfort);
 }
 
-.mfui-fLkJJb,.mfui-hHUZii {
+.mfui-bfpAMt,.mfui-hdXyCU {
   display: flex;
   align-items: flex-start;
   justify-content: flex-start;
@@ -2788,41 +2817,41 @@
   width: 100%;
 }
 
-.mfui-hHUZii {
+.mfui-hdXyCU {
   cursor: pointer;
 }
 
-.mfui-hHUZii:is(:focus, [data-focus]) {
+.mfui-hdXyCU:is(:focus, [data-focus]) {
   border-color: var(--mfui-colors-mfui\.color\.neutral\.sub-border\.hovered);
   color: var(--mfui-colors-mfui\.color\.base\.content\.hovered);
   background-color: var(--mfui-colors-mfui\.color\.neutral\.sub-background\.hovered);
 }
 
-.mfui-hHUZii:is(:focus, [data-focus]) .mfui-DataGridHeaderCell__unsortedIcon {
+.mfui-hdXyCU:is(:focus, [data-focus]) .mfui-DataTableHeaderCell__unsortedIcon {
   color: var(--mfui-colors-mfui\.color\.base\.sub-content\.hovered);
 }
 
-.mfui-hHUZii:is(:hover, [data-hover]) {
+.mfui-hdXyCU:is(:hover, [data-hover]) {
   border-color: var(--mfui-colors-mfui\.color\.neutral\.sub-border\.hovered);
   color: var(--mfui-colors-mfui\.color\.base\.content\.hovered);
   background-color: var(--mfui-colors-mfui\.color\.neutral\.sub-background\.hovered);
 }
 
-.mfui-hHUZii:is(:hover, [data-hover]) .mfui-DataGridHeaderCell__unsortedIcon {
+.mfui-hdXyCU:is(:hover, [data-hover]) .mfui-DataTableHeaderCell__unsortedIcon {
   color: var(--mfui-colors-mfui\.color\.base\.sub-content\.hovered);
 }
 
-.mfui-hHUZii:is(:active, [data-active]) {
+.mfui-hdXyCU:is(:active, [data-active]) {
   border-color: var(--mfui-colors-mfui\.color\.neutral\.sub-border\.pressed);
   color: var(--mfui-colors-mfui\.color\.base\.content\.pressed);
   background-color: var(--mfui-colors-mfui\.color\.neutral\.sub-background\.pressed);
 }
 
-.mfui-hHUZii:is(:active, [data-active]) .mfui-DataGridHeaderCell__unsortedIcon {
+.mfui-hdXyCU:is(:active, [data-active]) .mfui-DataTableHeaderCell__unsortedIcon {
   color: var(--mfui-colors-mfui\.color\.base\.sub-content\.pressed);
 }
 
-.mfui-htwugk {
+.mfui-cLQxue {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2831,18 +2860,18 @@
   width: var(--mfui-sizes-mfui\.size\.dimension\.icon\.square\.comfort);
 }
 
-.mfui-jFeZBz {
+.mfui-eYfdJx {
   height: 100%;
   width: 100%;
 }
 
-.mfui-jNttlZ {
+.mfui-gmeZOP {
   color: var(--mfui-colors-mfui\.color\.base\.sub-content\.none);
   height: 100%;
   width: 100%;
 }
 
-.mfui-jAwKhv {
+.mfui-jQQUJR {
   border-color: var(--mfui-colors-mfui\.color\.neutral\.thin-border\.none);
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -2852,7 +2881,7 @@
   border-bottom-width: var(--mfui-border-widths-mfui\.size\.border\.base\.width\.comfort);
 }
 
-.mfui-jAwKhv:last-child {
+.mfui-jQQUJR:last-child {
   border-bottom-width: 0;
 }
 
@@ -5839,66 +5868,66 @@
   padding-right: calc(var(--mfui-spacing-mfui\.size\.padding\.input\.horizontal\.comfort) + var(--mfui-spacing-mfui\.size\.spacing\.icon-and-text\.horizontal\.comfort) + var(--mfui-sizes-mfui\.size\.dimension\.icon-button\.square\.comfort));
 }
 
-.mfui-cKTSwl,.mfui-eguNxK {
-  padding-block: var(--mfui-spacing-mfui\.size\.padding\.data-grid-cell\.vertical\.condensed);
-  padding-inline: var(--mfui-spacing-mfui\.size\.padding\.data-grid-cell\.horizontal\.condensed);
-  min-height: var(--mfui-sizes-mfui\.size\.dimension\.data-grid-cell\.height\.condensed);
+.mfui-kYxCkD,.mfui-hXNotk {
+  padding-block: var(--mfui-spacing-mfui\.size\.padding\.data-table-cell\.vertical\.condensed);
+  padding-inline: var(--mfui-spacing-mfui\.size\.padding\.data-table-cell\.horizontal\.condensed);
+  min-height: var(--mfui-sizes-mfui\.size\.dimension\.data-table-cell\.height\.condensed);
 }
 
-.mfui-ifJbzD,.mfui-lagYEk {
-  padding-block: var(--mfui-spacing-mfui\.size\.padding\.data-grid-cell\.vertical\.comfort);
-  padding-inline: var(--mfui-spacing-mfui\.size\.padding\.data-grid-cell\.horizontal\.comfort);
-  min-height: var(--mfui-sizes-mfui\.size\.dimension\.data-grid-cell\.height\.comfort);
+.mfui-jGTRXd,.mfui-iHntsS {
+  padding-block: var(--mfui-spacing-mfui\.size\.padding\.data-table-cell\.vertical\.comfort);
+  padding-inline: var(--mfui-spacing-mfui\.size\.padding\.data-table-cell\.horizontal\.comfort);
+  min-height: var(--mfui-sizes-mfui\.size\.dimension\.data-table-cell\.height\.comfort);
 }
 
-.mfui-hCWOMt {
+.mfui-coGcRr {
   width: 32px;
   min-width: 32px;
   max-width: 32px;
 }
 
-.mfui-hSCsOG:not(:disabled, [disabled], [data-disabled]):not(:has(input:disabled)) {
+.mfui-kQhdmg:not(:disabled, [disabled], [data-disabled]):not(:has(input:disabled)) {
   cursor: pointer;
 }
 
-.mfui-hSCsOG:not(:disabled, [disabled], [data-disabled]):not(:has(input:disabled)):is(:hover, [data-hover]),.mfui-hSCsOG:not(:disabled, [disabled], [data-disabled]):not(:has(input:disabled)):is(:focus-visible, [data-focus-visible]) {
+.mfui-kQhdmg:not(:disabled, [disabled], [data-disabled]):not(:has(input:disabled)):is(:hover, [data-hover]),.mfui-kQhdmg:not(:disabled, [disabled], [data-disabled]):not(:has(input:disabled)):is(:focus-visible, [data-focus-visible]) {
   background-color: var(--mfui-colors-mfui\.color\.selected\.background\.hovered);
 }
 
-.mfui-hSCsOG:not(:disabled, [disabled], [data-disabled]):not(:has(input:disabled)):is(:active, [data-active]) {
+.mfui-kQhdmg:not(:disabled, [disabled], [data-disabled]):not(:has(input:disabled)):is(:active, [data-active]) {
   background-color: var(--mfui-colors-mfui\.color\.selected\.background\.pressed);
 }
 
-.mfui-hSCsOG:not(:disabled, [disabled], [data-disabled]):not(:has(input:disabled)):has(input[type="checkbox"]:not(:disabled):focus-visible) {
+.mfui-kQhdmg:not(:disabled, [disabled], [data-disabled]):not(:has(input:disabled)):has(input[type="checkbox"]:not(:disabled):focus-visible) {
   background-color: var(--mfui-colors-mfui\.color\.selected\.background\.hovered);
 }
 
-.mfui-hSCsOG:not(:disabled, [disabled], [data-disabled]):not(:has(input:disabled)) input[type="checkbox"]:focus-visible {
+.mfui-kQhdmg:not(:disabled, [disabled], [data-disabled]):not(:has(input:disabled)) input[type="checkbox"]:focus-visible {
   outline: 2px solid transparent;
   outline-offset: 2px;
   box-shadow: none;
 }
 
-.mfui-gvJfWh:is(:focus, [data-focus]),.mfui-gvJfWh:is(:hover, [data-hover]) {
+.mfui-iYntBf:is(:focus, [data-focus]),.mfui-iYntBf:is(:hover, [data-hover]) {
   background-color: var(--mfui-colors-mfui\.color\.selected\.background\.hovered);
 }
 
-.mfui-gvJfWh:is(:active, [data-active]) {
+.mfui-iYntBf:is(:active, [data-active]) {
   background-color: var(--mfui-colors-mfui\.color\.selected\.background\.pressed);
 }
 
-.mfui-bqjpzG {
+.mfui-bGysdM {
   position: sticky;
   background-color: inherit;
 }
 
-.mfui-cIEpCk::before {
+.mfui-izXzGC::before {
   border-right-width: var(--mfui-border-widths-mfui\.size\.border\.fixed-cell\.horizontal\.comfort);
   border-right-style: solid;
   border-right-color: var(--mfui-colors-mfui\.color\.neutral\.sub-border\.none);
 }
 
-.mfui-cIEpCk::before,.mfui-hUucnT::before {
+.mfui-izXzGC::before,.mfui-LTiTZ::before {
   content: "";
   position: absolute;
   pointer-events: none;
@@ -5908,72 +5937,72 @@
   height: calc(100% + 1px);
 }
 
-.mfui-hUucnT::before {
+.mfui-LTiTZ::before {
   border-left-width: var(--mfui-border-widths-mfui\.size\.border\.fixed-cell\.horizontal\.comfort);
   border-left-style: solid;
   border-left-color: var(--mfui-colors-mfui\.color\.neutral\.sub-border\.none);
 }
 
-.mfui-fmltyS,.mfui-hUGftt {
+.mfui-cyVYhU,.mfui-ePuaEb {
   justify-content: flex-start;
   text-align: left;
 }
 
-.mfui-gVxTsv,.mfui-isnRLA {
+.mfui-gLvFNp,.mfui-eEdyCy {
   justify-content: flex-end;
   text-align: right;
 }
 
-.mfui-cFxDLC {
+.mfui-caARyM {
   border-style: solid;
   border-width: var(--mfui-border-widths-mfui\.size\.border\.base\.width\.comfort);
   border-color: var(--mfui-colors-mfui\.color\.neutral\.sub-border\.none);
   border-radius: var(--mfui-radii-mfui\.size\.radius\.control-component\.comfort);
 }
 
-.mfui-iVAlXC {
+.mfui-hUuodk {
   border-block-style: solid;
   border-block-width: var(--mfui-border-widths-mfui\.size\.border\.base\.width\.comfort);
   border-block-color: var(--mfui-colors-mfui\.color\.neutral\.sub-border\.none);
 }
 
-.mfui-cyFegv {
+.mfui-hdvqtp {
   width: 100%;
 }
 
-.mfui-hNDQAV {
+.mfui-ihlTgP {
   border-bottom-width: var(--mfui-border-widths-mfui\.size\.border\.base\.width\.condensed);
 }
 
-.mfui-jutUsa,.mfui-bBHkFX {
-  padding-block: var(--mfui-spacing-mfui\.size\.padding\.data-grid-cell\.vertical\.condensed);
-  padding-inline: var(--mfui-spacing-mfui\.size\.padding\.data-grid-cell\.horizontal\.condensed);
+.mfui-beBMeE,.mfui-fAMdSB {
+  padding-block: var(--mfui-spacing-mfui\.size\.padding\.data-table-cell\.vertical\.condensed);
+  padding-inline: var(--mfui-spacing-mfui\.size\.padding\.data-table-cell\.horizontal\.condensed);
   gap: var(--mfui-spacing-mfui\.size\.spacing\.icon-and-text\.horizontal\.condensed);
-  min-height: var(--mfui-sizes-mfui\.size\.dimension\.data-grid-cell\.height\.condensed);
+  min-height: var(--mfui-sizes-mfui\.size\.dimension\.data-table-cell\.height\.condensed);
 }
 
-.mfui-bkUzXr {
+.mfui-gZhKjF {
   border-bottom-width: var(--mfui-border-widths-mfui\.size\.border\.base\.width\.comfort);
 }
 
-.mfui-kfjNqA,.mfui-iDaTCF {
-  padding-block: var(--mfui-spacing-mfui\.size\.padding\.data-grid-cell\.vertical\.comfort);
-  padding-inline: var(--mfui-spacing-mfui\.size\.padding\.data-grid-cell\.horizontal\.comfort);
+.mfui-cqyjeS,.mfui-lcyrJn {
+  padding-block: var(--mfui-spacing-mfui\.size\.padding\.data-table-cell\.vertical\.comfort);
+  padding-inline: var(--mfui-spacing-mfui\.size\.padding\.data-table-cell\.horizontal\.comfort);
   gap: var(--mfui-spacing-mfui\.size\.spacing\.icon-and-text\.horizontal\.comfort);
-  min-height: var(--mfui-sizes-mfui\.size\.dimension\.data-grid-cell\.height\.comfort);
+  min-height: var(--mfui-sizes-mfui\.size\.dimension\.data-table-cell\.height\.comfort);
 }
 
-.mfui-cYSBIJ {
+.mfui-ixFpNb {
   position: sticky;
 }
 
-.mfui-krlGLX::before {
+.mfui-fGBQCd::before {
   border-right-width: var(--mfui-border-widths-mfui\.size\.border\.fixed-cell\.horizontal\.comfort);
   border-right-style: solid;
   border-right-color: var(--mfui-colors-mfui\.color\.neutral\.sub-border\.none);
 }
 
-.mfui-krlGLX::before,.mfui-iRKnkw::before {
+.mfui-fGBQCd::before,.mfui-FJZOy::before {
   content: "";
   position: absolute;
   pointer-events: none;
@@ -5983,55 +6012,55 @@
   height: calc(100% + 1px);
 }
 
-.mfui-iRKnkw::before {
+.mfui-FJZOy::before {
   border-left-width: var(--mfui-border-widths-mfui\.size\.border\.fixed-cell\.horizontal\.comfort);
   border-left-style: solid;
   border-left-color: var(--mfui-colors-mfui\.color\.neutral\.sub-border\.none);
 }
 
-.mfui-hBaRjq {
+.mfui-hdkeDU {
   width: 32px;
 }
 
-.mfui-bONdKl:not(:disabled, [disabled], [data-disabled]) {
+.mfui-dQChFX:not(:disabled, [disabled], [data-disabled]) {
   cursor: pointer;
 }
 
-.mfui-bONdKl:not(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]),.mfui-bONdKl:not(:disabled, [disabled], [data-disabled]):is(:focus-visible, [data-focus-visible]) {
+.mfui-dQChFX:not(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]),.mfui-dQChFX:not(:disabled, [disabled], [data-disabled]):is(:focus-visible, [data-focus-visible]) {
   background-color: var(--mfui-colors-mfui\.color\.neutral\.sub-background\.hovered);
 }
 
-.mfui-bONdKl:not(:disabled, [disabled], [data-disabled]):is(:active, [data-active]) {
+.mfui-dQChFX:not(:disabled, [disabled], [data-disabled]):is(:active, [data-active]) {
   background-color: var(--mfui-colors-mfui\.color\.neutral\.sub-background\.pressed);
 }
 
-.mfui-bONdKl:not(:disabled, [disabled], [data-disabled]):has(input[type="checkbox"]:not(:disabled):focus-visible) {
+.mfui-dQChFX:not(:disabled, [disabled], [data-disabled]):has(input[type="checkbox"]:not(:disabled):focus-visible) {
   background-color: var(--mfui-colors-mfui\.color\.neutral\.sub-background\.hovered);
 }
 
-.mfui-bONdKl:not(:disabled, [disabled], [data-disabled]) input[type="checkbox"]:focus-visible {
+.mfui-dQChFX:not(:disabled, [disabled], [data-disabled]) input[type="checkbox"]:focus-visible {
   outline: 2px solid transparent;
   outline-offset: 2px;
   box-shadow: none;
 }
 
-.mfui-ejLtvJ,.mfui-eUtIFw {
+.mfui-dikbFv,.mfui-kqQAOe {
   justify-content: flex-start;
   text-align: left;
 }
 
-.mfui-hhdndA,.mfui-emoNRN {
+.mfui-iOviwi,.mfui-bpVUTX {
   justify-content: flex-end;
   text-align: right;
 }
 
-.mfui-dnlDHW {
+.mfui-eUCAOY {
   position: sticky;
   z-index: 2;
   top: 0;
 }
 
-.mfui-dnlDHW::after {
+.mfui-eUCAOY::after {
   content: "";
   position: absolute;
   bottom: 0;
@@ -6042,26 +6071,26 @@
   border-bottom-color: var(--mfui-colors-mfui\.color\.neutral\.sub-border\.none);
 }
 
-.mfui-cHZfMx:last-child {
+.mfui-jbZNHv:last-child {
   border-bottom-width: var(--mfui-border-widths-mfui\.size\.border\.base\.width\.comfort);
   border-bottom-color: var(--mfui-colors-mfui\.color\.neutral\.thin-border\.none);
 }
 
-.mfui-fFUxaj {
+.mfui-eFCfCF {
   background-color: var(--mfui-colors-mfui\.color\.selected\.background\.none);
 }
 
-.mfui-dkYMUO {
+.mfui-esNKtk {
   cursor: pointer;
   position: relative;
 }
 
-.mfui-dkYMUO:is(:focus-visible, [data-focus-visible]) {
+.mfui-esNKtk:is(:focus-visible, [data-focus-visible]) {
   background-color: var(--mfui-colors-mfui\.color\.base\.background\.hovered);
   color: var(--mfui-colors-mfui\.color\.base\.content\.hovered);
 }
 
-.mfui-dkYMUO:is(:focus-visible, [data-focus-visible])::after {
+.mfui-esNKtk:is(:focus-visible, [data-focus-visible])::after {
   content: "";
   position: absolute;
   box-shadow: 0px 0px 0px 2px var(--mfui-colors-mfui\.color\.primary\.border\.none) inset, 0px 0px 0px 3px var(--mfui-colors-mfui\.color\.base\.background\.none) inset;
@@ -6071,38 +6100,38 @@
   height: 100%;
 }
 
-.mfui-dkYMUO:has(input:focus-visible, input[data-focus-visible=true], textarea:focus-visible, textarea[data-focus-visible=true]) {
+.mfui-esNKtk:has(input:focus-visible, input[data-focus-visible=true], textarea:focus-visible, textarea[data-focus-visible=true]) {
   box-shadow: none;
 }
 
-.mfui-dkYMUO:is(:hover, [data-hover]):not(:has(button:hover, input:hover, select:hover, textarea:hover, [tabindex]:hover)) {
+.mfui-esNKtk:is(:hover, [data-hover]):not(:has(button:hover, input:hover, select:hover, textarea:hover, [tabindex]:hover)) {
   background-color: var(--mfui-colors-mfui\.color\.base\.background\.hovered);
   color: var(--mfui-colors-mfui\.color\.base\.content\.hovered);
 }
 
-.mfui-dkYMUO:is(:active, [data-active]):not(:has(button:hover, input:hover, select:hover, textarea:hover, [tabindex]:hover)) {
+.mfui-esNKtk:is(:active, [data-active]):not(:has(button:hover, input:hover, select:hover, textarea:hover, [tabindex]:hover)) {
   background-color: var(--mfui-colors-mfui\.color\.base\.background\.pressed);
   color: var(--mfui-colors-mfui\.color\.base\.content\.pressed);
 }
 
-.mfui-hcULZS {
+.mfui-jZGzmE {
   border-color: var(--mfui-colors-mfui\.color\.readonly\.border);
   background-color: var(--mfui-colors-mfui\.color\.readonly\.background);
   color: var(--mfui-colors-mfui\.color\.readonly\.content);
   cursor: not-allowed;
 }
 
-.mfui-hcULZS:is(:focus-visible, [data-focus-visible]) {
+.mfui-jZGzmE:is(:focus-visible, [data-focus-visible]) {
   background-color: var(--mfui-colors-mfui\.color\.readonly\.background);
   color: var(--mfui-colors-mfui\.color\.readonly\.content);
   box-shadow: none;
 }
 
-.mfui-hcULZS:is(:hover, [data-hover]) {
+.mfui-jZGzmE:is(:hover, [data-hover]) {
   cursor: not-allowed;
 }
 
-.mfui-hcULZS:is(:hover, [data-hover]),.mfui-hcULZS:is(:active, [data-active]) {
+.mfui-jZGzmE:is(:hover, [data-hover]),.mfui-jZGzmE:is(:active, [data-active]) {
   background-color: var(--mfui-colors-mfui\.color\.readonly\.background);
   color: var(--mfui-colors-mfui\.color\.readonly\.content);
 }

package/dist/theme-orange.css

@@ -143,6 +143,9 @@
   --mfui-colors-mfui\.color\.signal-green\.sub-background\.none: #c8f2d1ff;
   --mfui-colors-mfui\.color\.signal-green\.sub-background\.hovered: #beeec9ff;
   --mfui-colors-mfui\.color\.signal-green\.sub-background\.pressed: #b3eac0ff;
+  --mfui-colors-mfui\.color\.signal-neutral\.sub-background\.none: #f3f3f3ff;
+  --mfui-colors-mfui\.color\.signal-neutral\.sub-background\.hovered: #e2e2e2ff;
+  --mfui-colors-mfui\.color\.signal-neutral\.sub-background\.pressed: #d7d7d7ff;
   --mfui-colors-mfui\.color\.signal-red\.content\.none: #d7383cff;
   --mfui-colors-mfui\.color\.signal-red\.content\.hovered: #b40d24ff;
   --mfui-colors-mfui\.color\.signal-red\.content\.pressed: #8a0017ff;