@moneyforward/mfui-components 3.18.0 → 3.20.0

package/dist/styles.css

@@ -639,7 +639,7 @@
   width: var(--mfui-sizes-mfui\.size\.dimension\.icon\.square\.comfort);
 }
 
-.mfui-bQDthW {
+.mfui-cDRDAr {
   border-color: var(--mfui-colors-mfui\.color\.neutral\.border\.none);
   border-style: solid;
   background-color: var(--mfui-colors-mfui\.color\.base\.background\.none);
@@ -648,34 +648,34 @@
   max-width: 100%;
 }
 
-.mfui-bQDthW::placeholder,.mfui-bQDthW[data-placeholder] {
+.mfui-cDRDAr::placeholder,.mfui-cDRDAr[data-placeholder] {
   opacity: 1;
   color: var(--mfui-colors-mfui\.color\.neutral\.content\.none);
 }
 
-.mfui-bQDthW:is(:focus-visible, [data-focus-visible]) {
+.mfui-cDRDAr:is(:focus-visible, [data-focus-visible]) {
   border-color: var(--mfui-colors-mfui\.color\.neutral\.border\.hovered);
   background-color: var(--mfui-colors-mfui\.color\.base\.background\.none);
   color: var(--mfui-colors-mfui\.color\.neutral\.content\.hovered);
 }
 
-.mfui-bQDthW:is(:hover, [data-hover]):not(:disabled, [disabled], [data-disabled]):not(:focus-visible, [data-focus-visible]) {
+.mfui-cDRDAr:is(:hover, [data-hover]):not(:disabled, [disabled], [data-disabled]):not(:focus-visible, [data-focus-visible]) {
   border-color: var(--mfui-colors-mfui\.color\.neutral\.border\.hovered);
   background-color: var(--mfui-colors-mfui\.color\.base\.background\.hovered);
   color: var(--mfui-colors-mfui\.color\.neutral\.content\.hovered);
 }
 
-.mfui-bQDthW:is(:hover, [data-hover]):not(:disabled, [disabled], [data-disabled]):not(:focus-visible, [data-focus-visible])::placeholder, .mfui-bQDthW:is(:hover, [data-hover]):not(:disabled, [disabled], [data-disabled]):not(:focus-visible, [data-focus-visible])[data-placeholder] {
+.mfui-cDRDAr:is(:hover, [data-hover]):not(:disabled, [disabled], [data-disabled]):not(:focus-visible, [data-focus-visible])::placeholder, .mfui-cDRDAr:is(:hover, [data-hover]):not(:disabled, [disabled], [data-disabled]):not(:focus-visible, [data-focus-visible])[data-placeholder] {
   color: var(--mfui-colors-mfui\.color\.neutral\.content\.hovered);
 }
 
-.mfui-bQDthW:is(:active, [data-active]):not(:disabled, [disabled], [data-disabled]):not(:focus-visible, [data-focus-visible]) {
+.mfui-cDRDAr:is(:active, [data-active]):not(:disabled, [disabled], [data-disabled]):not(:focus-visible, [data-focus-visible]) {
   border-color: var(--mfui-colors-mfui\.color\.neutral\.border\.pressed);
   background-color: var(--mfui-colors-mfui\.color\.base\.background\.pressed);
   color: var(--mfui-colors-mfui\.color\.neutral\.content\.pressed);
 }
 
-.mfui-bQDthW:is(:active, [data-active]):not(:disabled, [disabled], [data-disabled]):not(:focus-visible, [data-focus-visible])::placeholder, .mfui-bQDthW:is(:active, [data-active]):not(:disabled, [disabled], [data-disabled]):not(:focus-visible, [data-focus-visible])[data-placeholder] {
+.mfui-cDRDAr:is(:active, [data-active]):not(:disabled, [disabled], [data-disabled]):not(:focus-visible, [data-focus-visible])::placeholder, .mfui-cDRDAr:is(:active, [data-active]):not(:disabled, [disabled], [data-disabled]):not(:focus-visible, [data-focus-visible])[data-placeholder] {
   color: var(--mfui-colors-mfui\.color\.neutral\.content\.pressed);
 }
 
@@ -4816,6 +4816,415 @@
   height: 100%;
 }
 
+.mfui-PSxZp {
+  position: relative;
+  width: 100%;
+}
+
+.mfui-PSxZp[data-selected="true"]:not(:has(button:disabled)) [data-mfui-content="filter-date-range-picker-clear-button"] {
+  color: var(--mfui-colors-mfui\.color\.base\.content\.none);
+}
+
+.mfui-PSxZp[data-selected="true"]:not(:has(button:disabled)):is(:hover, [data-hover]) [data-mfui-content="filter-date-range-picker-clear-button"],.mfui-PSxZp[data-selected="true"]:not(:has(button:disabled)):focus-within [data-mfui-content="filter-date-range-picker-clear-button"] {
+  color: var(--mfui-colors-mfui\.color\.base\.content\.hovered);
+}
+
+.mfui-PSxZp[data-selected="true"]:not(:has(button:disabled)):has(button:active) [data-mfui-content="filter-date-range-picker-clear-button"] {
+  color: var(--mfui-colors-mfui\.color\.base\.content\.pressed);
+}
+
+.mfui-lbAdvC {
+  border: 1px solid;
+  gap: var(--mfui-spacing-mfui\.size\.spacing\.icon-and-text\.horizontal\.comfort);
+  padding-inline: calc(var(--mfui-spacing-mfui\.size\.padding\.input\.horizontal\.comfort) - 1px);
+  border-color: var(--mfui-colors-mfui\.color\.neutral\.border\.none);
+  border-radius: var(--mfui-radii-mfui\.size\.radius\.control-component\.comfort);
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: var(--mfui-colors-mfui\.color\.base\.content\.none);
+  cursor: pointer;
+  background-color: var(--mfui-colors-mfui\.color\.base\.background\.none);
+  width: 100%;
+  height: var(--mfui-sizes-mfui\.size\.dimension\.control-component\.height\.comfort);
+  min-width: var(--mfui-sizes-mfui\.size\.target\.button\.comfort);
+}
+
+.mfui-lbAdvC:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
+  border-color: var(--mfui-colors-mfui\.color\.disabled\.border);
+  cursor: not-allowed;
+  color: var(--mfui-colors-mfui\.color\.disabled\.content);
+  background-color: var(--mfui-colors-mfui\.color\.disabled\.background);
+}
+
+.mfui-lbAdvC:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) > svg {
+  color: var(--mfui-colors-mfui\.color\.disabled\.content);
+}
+
+.mfui-lbAdvC[data-selected="true"]:not(:disabled) {
+  border-color: var(--mfui-colors-mfui\.color\.selected\.border\.none);
+  background-color: var(--mfui-colors-mfui\.color\.selected\.background\.none);
+}
+
+.mfui-lbAdvC[data-selected="true"]:not(:disabled):is(:hover, [data-hover]) {
+  border-color: var(--mfui-colors-mfui\.color\.selected\.border\.hovered);
+  background-color: var(--mfui-colors-mfui\.color\.selected\.background\.hovered);
+}
+
+.mfui-lbAdvC[data-selected="true"]:not(:disabled):is(:hover, [data-hover]) [data-mfui-content="filter-date-range-picker-display-value"] {
+  color: var(--mfui-colors-mfui\.color\.base\.content\.hovered);
+}
+
+.mfui-lbAdvC[data-selected="true"]:not(:disabled):focus-within {
+  border-color: var(--mfui-colors-mfui\.color\.selected\.border\.hovered);
+  background-color: var(--mfui-colors-mfui\.color\.selected\.background\.hovered);
+}
+
+.mfui-lbAdvC[data-selected="true"]:not(:disabled):focus-within [data-mfui-content="filter-date-range-picker-display-value"] {
+  color: var(--mfui-colors-mfui\.color\.base\.content\.hovered);
+}
+
+.mfui-lbAdvC[data-selected="true"]:not(:disabled):is(:active, [data-active]) {
+  border-color: var(--mfui-colors-mfui\.color\.selected\.border\.pressed);
+  background-color: var(--mfui-colors-mfui\.color\.selected\.background\.pressed);
+}
+
+.mfui-lbAdvC[data-selected="true"]:not(:disabled):is(:active, [data-active]) [data-mfui-content="filter-date-range-picker-display-value"] {
+  color: var(--mfui-colors-mfui\.color\.base\.content\.pressed);
+}
+
+.mfui-lbAdvC[data-selected="true"]:not(:disabled) [data-mfui-content="filter-date-range-picker-display-value"] {
+  color: var(--mfui-colors-mfui\.color\.base\.content\.none);
+}
+
+.mfui-lbAdvC > svg {
+  color: inherit;
+}
+
+.mfui-lbAdvC:is(:focus-visible, [data-focus-visible]) {
+  border-color: var(--mfui-colors-mfui\.color\.neutral\.border\.hovered);
+  color: var(--mfui-colors-mfui\.color\.base\.content\.hovered);
+  background-color: var(--mfui-colors-mfui\.color\.base\.background\.hovered);
+}
+
+.mfui-lbAdvC[data-mfui-has-clear-button="true"] > [data-mfui-content="filter-date-range-picker-display-value"] {
+  padding-right: var(--mfui-sizes-mfui\.size\.dimension\.icon\.square\.comfort);
+}
+
+.mfui-lbAdvC:is(:hover, [data-hover]):not(:disabled, [disabled], [data-disabled]) {
+  border-color: var(--mfui-colors-mfui\.color\.neutral\.border\.hovered);
+  color: var(--mfui-colors-mfui\.color\.base\.content\.hovered);
+  background-color: var(--mfui-colors-mfui\.color\.base\.background\.hovered);
+}
+
+.mfui-lbAdvC:is(:active, [data-active]):not(:disabled, [disabled], [data-disabled]) {
+  border-color: var(--mfui-colors-mfui\.color\.neutral\.border\.pressed);
+  color: var(--mfui-colors-mfui\.color\.base\.content\.pressed);
+  background-color: var(--mfui-colors-mfui\.color\.base\.background\.pressed);
+}
+
+.mfui-gysudL {
+  flex: 1 1 0%;
+  overflow: hidden;
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mfui-hWZgyX {
+  place-items: center;
+  display: grid;
+  font-size: var(--mfui-font-sizes-mfui\.typography\.font-size\.icon);
+  flex-shrink: 0;
+  width: var(--mfui-sizes-mfui\.size\.dimension\.icon\.square\.comfort);
+  height: var(--mfui-sizes-mfui\.size\.dimension\.icon\.square\.comfort);
+}
+
+.mfui-bquWmK {
+  padding-inline: var(--mfui-spacing-mfui\.size\.padding\.input\.horizontal\.comfort);
+  place-items: center;
+  position: absolute;
+  display: grid;
+  top: 0;
+  right: calc(var(--mfui-spacing-mfui\.size\.padding\.input\.horizontal\.comfort) + var(--mfui-sizes-mfui\.size\.dimension\.icon\.square\.comfort));
+  height: 100%;
+}
+
+.mfui-jIseaA .mfui-DateRangePickerFooter__footer {
+  justify-content: space-between;
+}
+
+.mfui-jTICW {
+  position: relative;
+  width: 100%;
+}
+
+.mfui-jTICW[data-selected="true"]:not(:has(button:disabled)) [data-mfui-content="filter-month-picker-clear-button"] {
+  color: var(--mfui-colors-mfui\.color\.base\.content\.none);
+}
+
+.mfui-jTICW[data-selected="true"]:not(:has(button:disabled)):is(:hover, [data-hover]) [data-mfui-content="filter-month-picker-clear-button"],.mfui-jTICW[data-selected="true"]:not(:has(button:disabled)):focus-within [data-mfui-content="filter-month-picker-clear-button"] {
+  color: var(--mfui-colors-mfui\.color\.base\.content\.hovered);
+}
+
+.mfui-jTICW[data-selected="true"]:not(:has(button:disabled)):has(button:active) [data-mfui-content="filter-month-picker-clear-button"] {
+  color: var(--mfui-colors-mfui\.color\.base\.content\.pressed);
+}
+
+.mfui-ejNqZV {
+  border: 1px solid;
+  gap: var(--mfui-spacing-mfui\.size\.spacing\.icon-and-text\.horizontal\.comfort);
+  padding-inline: calc(var(--mfui-spacing-mfui\.size\.padding\.input\.horizontal\.comfort) - 1px);
+  border-color: var(--mfui-colors-mfui\.color\.neutral\.border\.none);
+  border-radius: var(--mfui-radii-mfui\.size\.radius\.control-component\.comfort);
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: var(--mfui-colors-mfui\.color\.base\.content\.none);
+  cursor: pointer;
+  background-color: var(--mfui-colors-mfui\.color\.base\.background\.none);
+  width: 100%;
+  height: var(--mfui-sizes-mfui\.size\.dimension\.control-component\.height\.comfort);
+  min-width: var(--mfui-sizes-mfui\.size\.target\.button\.comfort);
+}
+
+.mfui-ejNqZV:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
+  border-color: var(--mfui-colors-mfui\.color\.disabled\.border);
+  cursor: not-allowed;
+  color: var(--mfui-colors-mfui\.color\.disabled\.content);
+  background-color: var(--mfui-colors-mfui\.color\.disabled\.background);
+}
+
+.mfui-ejNqZV:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) > svg {
+  color: var(--mfui-colors-mfui\.color\.disabled\.content);
+}
+
+.mfui-ejNqZV[data-selected="true"]:not(:disabled) {
+  border-color: var(--mfui-colors-mfui\.color\.selected\.border\.none);
+  background-color: var(--mfui-colors-mfui\.color\.selected\.background\.none);
+}
+
+.mfui-ejNqZV[data-selected="true"]:not(:disabled):is(:hover, [data-hover]) {
+  border-color: var(--mfui-colors-mfui\.color\.selected\.border\.hovered);
+  background-color: var(--mfui-colors-mfui\.color\.selected\.background\.hovered);
+}
+
+.mfui-ejNqZV[data-selected="true"]:not(:disabled):is(:hover, [data-hover]) [data-mfui-content="filter-month-picker-display-value"] {
+  color: var(--mfui-colors-mfui\.color\.base\.content\.hovered);
+}
+
+.mfui-ejNqZV[data-selected="true"]:not(:disabled):focus-within {
+  border-color: var(--mfui-colors-mfui\.color\.selected\.border\.hovered);
+  background-color: var(--mfui-colors-mfui\.color\.selected\.background\.hovered);
+}
+
+.mfui-ejNqZV[data-selected="true"]:not(:disabled):focus-within [data-mfui-content="filter-month-picker-display-value"] {
+  color: var(--mfui-colors-mfui\.color\.base\.content\.hovered);
+}
+
+.mfui-ejNqZV[data-selected="true"]:not(:disabled):is(:active, [data-active]) {
+  border-color: var(--mfui-colors-mfui\.color\.selected\.border\.pressed);
+  background-color: var(--mfui-colors-mfui\.color\.selected\.background\.pressed);
+}
+
+.mfui-ejNqZV[data-selected="true"]:not(:disabled):is(:active, [data-active]) [data-mfui-content="filter-month-picker-display-value"] {
+  color: var(--mfui-colors-mfui\.color\.base\.content\.pressed);
+}
+
+.mfui-ejNqZV[data-selected="true"]:not(:disabled) [data-mfui-content="filter-month-picker-display-value"] {
+  color: var(--mfui-colors-mfui\.color\.base\.content\.none);
+}
+
+.mfui-ejNqZV > svg {
+  color: inherit;
+}
+
+.mfui-ejNqZV:is(:focus-visible, [data-focus-visible]) {
+  border-color: var(--mfui-colors-mfui\.color\.neutral\.border\.hovered);
+  color: var(--mfui-colors-mfui\.color\.base\.content\.hovered);
+  background-color: var(--mfui-colors-mfui\.color\.base\.background\.hovered);
+}
+
+.mfui-ejNqZV[data-mfui-has-clear-button="true"] > [data-mfui-content="filter-month-picker-display-value"] {
+  padding-right: var(--mfui-sizes-mfui\.size\.dimension\.icon\.square\.comfort);
+}
+
+.mfui-ejNqZV:is(:hover, [data-hover]):not(:disabled, [disabled], [data-disabled]) {
+  border-color: var(--mfui-colors-mfui\.color\.neutral\.border\.hovered);
+  color: var(--mfui-colors-mfui\.color\.base\.content\.hovered);
+  background-color: var(--mfui-colors-mfui\.color\.base\.background\.hovered);
+}
+
+.mfui-ejNqZV:is(:active, [data-active]):not(:disabled, [disabled], [data-disabled]) {
+  border-color: var(--mfui-colors-mfui\.color\.neutral\.border\.pressed);
+  color: var(--mfui-colors-mfui\.color\.base\.content\.pressed);
+  background-color: var(--mfui-colors-mfui\.color\.base\.background\.pressed);
+}
+
+.mfui-lbwEJE {
+  flex: 1 1 0%;
+  overflow: hidden;
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mfui-fqoWjw {
+  place-items: center;
+  display: grid;
+  font-size: var(--mfui-font-sizes-mfui\.typography\.font-size\.icon);
+  flex-shrink: 0;
+  width: var(--mfui-sizes-mfui\.size\.dimension\.icon\.square\.comfort);
+  height: var(--mfui-sizes-mfui\.size\.dimension\.icon\.square\.comfort);
+}
+
+.mfui-kfsdfB {
+  padding-inline: var(--mfui-spacing-mfui\.size\.padding\.input\.horizontal\.comfort);
+  place-items: center;
+  position: absolute;
+  display: grid;
+  top: 0;
+  right: calc(var(--mfui-spacing-mfui\.size\.padding\.input\.horizontal\.comfort) + var(--mfui-sizes-mfui\.size\.dimension\.icon\.square\.comfort));
+  height: 100%;
+}
+
+.mfui-isUYZd {
+  position: relative;
+  width: 100%;
+}
+
+.mfui-isUYZd[data-selected="true"]:not(:has(button:disabled)) [data-mfui-content="filter-month-range-picker-clear-button"] {
+  color: var(--mfui-colors-mfui\.color\.base\.content\.none);
+}
+
+.mfui-isUYZd[data-selected="true"]:not(:has(button:disabled)):is(:hover, [data-hover]) [data-mfui-content="filter-month-range-picker-clear-button"],.mfui-isUYZd[data-selected="true"]:not(:has(button:disabled)):focus-within [data-mfui-content="filter-month-range-picker-clear-button"] {
+  color: var(--mfui-colors-mfui\.color\.base\.content\.hovered);
+}
+
+.mfui-isUYZd[data-selected="true"]:not(:has(button:disabled)):has(button:active) [data-mfui-content="filter-month-range-picker-clear-button"] {
+  color: var(--mfui-colors-mfui\.color\.base\.content\.pressed);
+}
+
+.mfui-kCMNjq {
+  border: 1px solid;
+  gap: var(--mfui-spacing-mfui\.size\.spacing\.icon-and-text\.horizontal\.comfort);
+  padding-inline: calc(var(--mfui-spacing-mfui\.size\.padding\.input\.horizontal\.comfort) - 1px);
+  border-color: var(--mfui-colors-mfui\.color\.neutral\.border\.none);
+  border-radius: var(--mfui-radii-mfui\.size\.radius\.control-component\.comfort);
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: var(--mfui-colors-mfui\.color\.base\.content\.none);
+  cursor: pointer;
+  background-color: var(--mfui-colors-mfui\.color\.base\.background\.none);
+  width: 100%;
+  height: var(--mfui-sizes-mfui\.size\.dimension\.control-component\.height\.comfort);
+  min-width: var(--mfui-sizes-mfui\.size\.target\.button\.comfort);
+}
+
+.mfui-kCMNjq:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
+  border-color: var(--mfui-colors-mfui\.color\.disabled\.border);
+  cursor: not-allowed;
+  color: var(--mfui-colors-mfui\.color\.disabled\.content);
+  background-color: var(--mfui-colors-mfui\.color\.disabled\.background);
+}
+
+.mfui-kCMNjq:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) > svg {
+  color: var(--mfui-colors-mfui\.color\.disabled\.content);
+}
+
+.mfui-kCMNjq[data-selected="true"]:not(:disabled) {
+  border-color: var(--mfui-colors-mfui\.color\.selected\.border\.none);
+  background-color: var(--mfui-colors-mfui\.color\.selected\.background\.none);
+}
+
+.mfui-kCMNjq[data-selected="true"]:not(:disabled):is(:hover, [data-hover]) {
+  border-color: var(--mfui-colors-mfui\.color\.selected\.border\.hovered);
+  background-color: var(--mfui-colors-mfui\.color\.selected\.background\.hovered);
+}
+
+.mfui-kCMNjq[data-selected="true"]:not(:disabled):is(:hover, [data-hover]) [data-mfui-content="filter-month-range-picker-display-value"] {
+  color: var(--mfui-colors-mfui\.color\.base\.content\.hovered);
+}
+
+.mfui-kCMNjq[data-selected="true"]:not(:disabled):focus-within {
+  border-color: var(--mfui-colors-mfui\.color\.selected\.border\.hovered);
+  background-color: var(--mfui-colors-mfui\.color\.selected\.background\.hovered);
+}
+
+.mfui-kCMNjq[data-selected="true"]:not(:disabled):focus-within [data-mfui-content="filter-month-range-picker-display-value"] {
+  color: var(--mfui-colors-mfui\.color\.base\.content\.hovered);
+}
+
+.mfui-kCMNjq[data-selected="true"]:not(:disabled):is(:active, [data-active]) {
+  border-color: var(--mfui-colors-mfui\.color\.selected\.border\.pressed);
+  background-color: var(--mfui-colors-mfui\.color\.selected\.background\.pressed);
+}
+
+.mfui-kCMNjq[data-selected="true"]:not(:disabled):is(:active, [data-active]) [data-mfui-content="filter-month-range-picker-display-value"] {
+  color: var(--mfui-colors-mfui\.color\.base\.content\.pressed);
+}
+
+.mfui-kCMNjq[data-selected="true"]:not(:disabled) [data-mfui-content="filter-month-range-picker-display-value"] {
+  color: var(--mfui-colors-mfui\.color\.base\.content\.none);
+}
+
+.mfui-kCMNjq > svg {
+  color: inherit;
+}
+
+.mfui-kCMNjq:is(:focus-visible, [data-focus-visible]) {
+  border-color: var(--mfui-colors-mfui\.color\.neutral\.border\.hovered);
+  color: var(--mfui-colors-mfui\.color\.base\.content\.hovered);
+  background-color: var(--mfui-colors-mfui\.color\.base\.background\.hovered);
+}
+
+.mfui-kCMNjq[data-mfui-has-clear-button="true"] > [data-mfui-content="filter-month-range-picker-display-value"] {
+  padding-right: var(--mfui-sizes-mfui\.size\.dimension\.icon\.square\.comfort);
+}
+
+.mfui-kCMNjq:is(:hover, [data-hover]):not(:disabled, [disabled], [data-disabled]) {
+  border-color: var(--mfui-colors-mfui\.color\.neutral\.border\.hovered);
+  color: var(--mfui-colors-mfui\.color\.base\.content\.hovered);
+  background-color: var(--mfui-colors-mfui\.color\.base\.background\.hovered);
+}
+
+.mfui-kCMNjq:is(:active, [data-active]):not(:disabled, [disabled], [data-disabled]) {
+  border-color: var(--mfui-colors-mfui\.color\.neutral\.border\.pressed);
+  color: var(--mfui-colors-mfui\.color\.base\.content\.pressed);
+  background-color: var(--mfui-colors-mfui\.color\.base\.background\.pressed);
+}
+
+.mfui-jmumGL {
+  flex: 1 1 0%;
+  overflow: hidden;
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mfui-ehYRTb {
+  place-items: center;
+  display: grid;
+  font-size: var(--mfui-font-sizes-mfui\.typography\.font-size\.icon);
+  flex-shrink: 0;
+  width: var(--mfui-sizes-mfui\.size\.dimension\.icon\.square\.comfort);
+  height: var(--mfui-sizes-mfui\.size\.dimension\.icon\.square\.comfort);
+}
+
+.mfui-hEcKXC {
+  padding-inline: var(--mfui-spacing-mfui\.size\.padding\.input\.horizontal\.comfort);
+  place-items: center;
+  position: absolute;
+  display: grid;
+  top: 0;
+  right: calc(var(--mfui-spacing-mfui\.size\.padding\.input\.horizontal\.comfort) + var(--mfui-sizes-mfui\.size\.dimension\.icon\.square\.comfort));
+  height: 100%;
+}
+
 .mfui-lkfQj {
   padding-inline: var(--mfui-spacing-mfui\.size\.padding\.display-table-cell\.horizontal\.comfort);
   padding-block: var(--mfui-spacing-mfui\.size\.padding\.display-table-cell\.vertical\.comfort);
@@ -5371,7 +5780,7 @@ li:last-child > .mfui-cXGJls {
     width: 32px;
     height: 32px;
 }
-  .mfui-fKGEVz[data-mfui-has-clear-button="true"] > [data-mfui-content="filter-trigger-display-value"],.mfui-ueqvR[data-mfui-has-clear-button="true"] > [data-mfui-content="filter-date-picker-display-value"] {
+  .mfui-fKGEVz[data-mfui-has-clear-button="true"] > [data-mfui-content="filter-trigger-display-value"],.mfui-ueqvR[data-mfui-has-clear-button="true"] > [data-mfui-content="filter-date-picker-display-value"],.mfui-lbAdvC[data-mfui-has-clear-button="true"] > [data-mfui-content="filter-date-range-picker-display-value"],.mfui-ejNqZV[data-mfui-has-clear-button="true"] > [data-mfui-content="filter-month-picker-display-value"],.mfui-kCMNjq[data-mfui-has-clear-button="true"] > [data-mfui-content="filter-month-range-picker-display-value"] {
     padding-right: 32px;
 }
 }
@@ -5748,7 +6157,7 @@ li:last-child > .mfui-cXGJls {
   line-height: inherit;
 }
 
-.mfui-jZpAKB {
+.mfui-fICbeo {
   padding-block: calc(4px - 1px);
   padding-inline: var(--mfui-spacing-mfui\.size\.padding\.input\.horizontal\.comfort);
   border-radius: var(--mfui-radii-mfui\.size\.radius\.control-component\.comfort);
@@ -5761,11 +6170,11 @@ li:last-child > .mfui-cXGJls {
   min-height: var(--mfui-sizes-mfui\.size\.dimension\.control-component\.height\.comfort);
 }
 
-.mfui-eoEOvS {
+.mfui-jSENMT {
   resize: both;
 }
 
-.mfui-ePkLYr {
+.mfui-cIbyDi {
   padding-block: 0;
   padding-inline: var(--mfui-spacing-mfui\.size\.padding\.input\.horizontal\.condensed);
   border-radius: var(--mfui-radii-mfui\.size\.radius\.control-component\.condensed);
@@ -5778,7 +6187,7 @@ li:last-child > .mfui-cXGJls {
   min-height: var(--mfui-sizes-mfui\.size\.dimension\.control-component\.height\.condensed);
 }
 
-.mfui-eApeqR {
+.mfui-dkUmiU {
   padding-block: calc(12px - 1px);
   padding-inline: var(--mfui-spacing-mfui\.size\.padding\.input\.horizontal\.impact);
   border-radius: var(--mfui-radii-mfui\.size\.radius\.control-component\.impact);
@@ -5791,41 +6200,41 @@ li:last-child > .mfui-cXGJls {
   min-height: var(--mfui-sizes-mfui\.size\.dimension\.control-component\.height\.impact);
 }
 
-.mfui-bYaenr {
+.mfui-iRYTTC {
   border-color: var(--mfui-colors-mfui\.color\.disabled\.border);
   background-color: var(--mfui-colors-mfui\.color\.disabled\.background);
 }
 
-.mfui-bYaenr,.mfui-bYaenr::placeholder,.mfui-bYaenr[data-placeholder] {
+.mfui-iRYTTC,.mfui-iRYTTC::placeholder,.mfui-iRYTTC[data-placeholder] {
   color: var(--mfui-colors-mfui\.color\.disabled\.content);
 }
 
-.mfui-lkbyLq {
+.mfui-fIONTD {
   border-color: var(--mfui-colors-mfui\.color\.signal-red\.border\.none);
 }
 
-.mfui-lkbyLq:is(:focus-visible, [data-focus-visible]),.mfui-lkbyLq:is(:hover, [data-hover]):not(:disabled, [disabled], [data-disabled]):not(:focus-visible, [data-focus-visible]) {
+.mfui-fIONTD:is(:focus-visible, [data-focus-visible]),.mfui-fIONTD:is(:hover, [data-hover]):not(:disabled, [disabled], [data-disabled]):not(:focus-visible, [data-focus-visible]) {
   border-color: var(--mfui-colors-mfui\.color\.signal-red\.border\.hovered);
 }
 
-.mfui-lkbyLq:is(:active, [data-active]):not(:disabled, [disabled], [data-disabled]):not(:focus-visible, [data-focus-visible]) {
+.mfui-fIONTD:is(:active, [data-active]):not(:disabled, [disabled], [data-disabled]):not(:focus-visible, [data-focus-visible]) {
   border-color: var(--mfui-colors-mfui\.color\.signal-red\.border\.pressed);
 }
 
-.mfui-bDvoaz {
+.mfui-gqNQjO {
   overflow: hidden;
   resize: none;
 }
 
-.mfui-dhIizx {
+.mfui-jobIAM {
   resize: none;
 }
 
-.mfui-bgisFh {
+.mfui-fivmfs {
   resize: vertical;
 }
 
-.mfui-jmqrZZ {
+.mfui-eBkQVo {
   resize: horizontal;
 }
 
@@ -7326,19 +7735,19 @@ li:last-child > .mfui-cXGJls {
 }
 
 @media screen and (max-width: 37.4975rem) {
-  .mfui-jZpAKB {
+  .mfui-fICbeo {
     font-family: var(--mfui-fonts-mfui\.typography\.font-family\.input\.narrow);
     font-size: var(--mfui-font-sizes-mfui\.typography\.font-size\.input\.narrow);
     font-weight: var(--mfui-font-weights-mfui\.typography\.font-weight\.input\.narrow);
     line-height: var(--mfui-line-heights-mfui\.typography\.line-height\.input\.narrow);
 }
-  .mfui-ePkLYr {
+  .mfui-cIbyDi {
     font-family: var(--mfui-fonts-mfui\.typography\.font-family\.condensed-input\.narrow);
     font-size: var(--mfui-font-sizes-mfui\.typography\.font-size\.condensed-input\.narrow);
     font-weight: var(--mfui-font-weights-mfui\.typography\.font-weight\.condensed-input\.narrow);
     line-height: var(--mfui-line-heights-mfui\.typography\.line-height\.condensed-input\.narrow);
 }
-  .mfui-eApeqR {
+  .mfui-dkUmiU {
     font-family: var(--mfui-fonts-mfui\.typography\.font-family\.input\.narrow);
     font-size: var(--mfui-font-sizes-mfui\.typography\.font-size\.input\.narrow);
     font-weight: var(--mfui-font-weights-mfui\.typography\.font-weight\.input\.narrow);