@moneyforward/mfui-components 3.37.2 → 4.1.0

package/dist/styled-system/recipes/decorated-key-value-list-item-slot-recipe.js

@@ -0,0 +1,40 @@
+import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.js';
+import { createRecipe } from './create-recipe.js';
+const decoratedKeyValueListItemSlotRecipeDefaultVariants = {};
+const decoratedKeyValueListItemSlotRecipeCompoundVariants = [];
+const decoratedKeyValueListItemSlotRecipeSlotNames = [
+    [
+        "root",
+        "DecoratedKeyValueListItem__root"
+    ],
+    [
+        "keyItem",
+        "DecoratedKeyValueListItem__keyItem"
+    ],
+    [
+        "valueGroup",
+        "DecoratedKeyValueListItem__valueGroup"
+    ],
+    [
+        "valueItem",
+        "DecoratedKeyValueListItem__valueItem"
+    ]
+];
+const decoratedKeyValueListItemSlotRecipeSlotFns = /* @__PURE__ */ decoratedKeyValueListItemSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, decoratedKeyValueListItemSlotRecipeDefaultVariants, getSlotCompoundVariant(decoratedKeyValueListItemSlotRecipeCompoundVariants, slotName))]);
+const decoratedKeyValueListItemSlotRecipeFn = memo((props = {}) => {
+    return Object.fromEntries(decoratedKeyValueListItemSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
+});
+const decoratedKeyValueListItemSlotRecipeVariantKeys = [];
+const getVariantProps = (variants) => ({ ...decoratedKeyValueListItemSlotRecipeDefaultVariants, ...compact(variants) });
+export const decoratedKeyValueListItemSlotRecipe = /* @__PURE__ */ Object.assign(decoratedKeyValueListItemSlotRecipeFn, {
+    __recipe__: false,
+    __name__: 'decoratedKeyValueListItemSlotRecipe',
+    raw: (props) => props,
+    classNameMap: {},
+    variantKeys: decoratedKeyValueListItemSlotRecipeVariantKeys,
+    variantMap: {},
+    splitVariantProps(props) {
+        return splitProps(props, decoratedKeyValueListItemSlotRecipeVariantKeys);
+    },
+    getVariantProps
+});

package/dist/styled-system/recipes/decorated-key-value-list-slot-recipe.d.ts

@@ -0,0 +1,36 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface DecoratedKeyValueListSlotRecipeVariant {
+  /**
+ * @default "medium"
+ */
+size: "small" | "medium"
+}
+
+type DecoratedKeyValueListSlotRecipeVariantMap = {
+  [key in keyof DecoratedKeyValueListSlotRecipeVariant]: Array<DecoratedKeyValueListSlotRecipeVariant[key]>
+}
+
+type DecoratedKeyValueListSlotRecipeSlot = "root"
+
+export type DecoratedKeyValueListSlotRecipeVariantProps = {
+  [key in keyof DecoratedKeyValueListSlotRecipeVariant]?: ConditionalValue<DecoratedKeyValueListSlotRecipeVariant[key]> | undefined
+}
+
+export interface DecoratedKeyValueListSlotRecipeRecipe {
+  __slot: DecoratedKeyValueListSlotRecipeSlot
+  __type: DecoratedKeyValueListSlotRecipeVariantProps
+  (props?: DecoratedKeyValueListSlotRecipeVariantProps): Pretty<Record<DecoratedKeyValueListSlotRecipeSlot, string>>
+  raw: (props?: DecoratedKeyValueListSlotRecipeVariantProps) => DecoratedKeyValueListSlotRecipeVariantProps
+  variantMap: DecoratedKeyValueListSlotRecipeVariantMap
+  variantKeys: Array<keyof DecoratedKeyValueListSlotRecipeVariant>
+  splitVariantProps<Props extends DecoratedKeyValueListSlotRecipeVariantProps>(props: Props): [DecoratedKeyValueListSlotRecipeVariantProps, Pretty<DistributiveOmit<Props, keyof DecoratedKeyValueListSlotRecipeVariantProps>>]
+  getVariantProps: (props?: DecoratedKeyValueListSlotRecipeVariantProps) => DecoratedKeyValueListSlotRecipeVariantProps
+}
+
+/**
+ * Slot class created for the MFUI DecoratedKeyValueList component.
+ */
+export declare const decoratedKeyValueListSlotRecipe: DecoratedKeyValueListSlotRecipeRecipe

package/dist/styled-system/recipes/decorated-key-value-list-slot-recipe.js

@@ -0,0 +1,37 @@
+import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.js';
+import { createRecipe } from './create-recipe.js';
+const decoratedKeyValueListSlotRecipeDefaultVariants = {
+    "size": "medium"
+};
+const decoratedKeyValueListSlotRecipeCompoundVariants = [];
+const decoratedKeyValueListSlotRecipeSlotNames = [
+    [
+        "root",
+        "DecoratedKeyValueList__root"
+    ]
+];
+const decoratedKeyValueListSlotRecipeSlotFns = /* @__PURE__ */ decoratedKeyValueListSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, decoratedKeyValueListSlotRecipeDefaultVariants, getSlotCompoundVariant(decoratedKeyValueListSlotRecipeCompoundVariants, slotName))]);
+const decoratedKeyValueListSlotRecipeFn = memo((props = {}) => {
+    return Object.fromEntries(decoratedKeyValueListSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
+});
+const decoratedKeyValueListSlotRecipeVariantKeys = [
+    "size"
+];
+const getVariantProps = (variants) => ({ ...decoratedKeyValueListSlotRecipeDefaultVariants, ...compact(variants) });
+export const decoratedKeyValueListSlotRecipe = /* @__PURE__ */ Object.assign(decoratedKeyValueListSlotRecipeFn, {
+    __recipe__: false,
+    __name__: 'decoratedKeyValueListSlotRecipe',
+    raw: (props) => props,
+    classNameMap: {},
+    variantKeys: decoratedKeyValueListSlotRecipeVariantKeys,
+    variantMap: {
+        "size": [
+            "small",
+            "medium"
+        ]
+    },
+    splitVariantProps(props) {
+        return splitProps(props, decoratedKeyValueListSlotRecipeVariantKeys);
+    },
+    getVariantProps
+});

package/dist/styled-system/recipes/index.d.ts

@@ -53,6 +53,8 @@ export * from './data-table-sort-button-slot-recipe';
 export * from './data-table-header-row-slot-recipe';
 export * from './data-table-header-slot-recipe';
 export * from './data-table-row-slot-recipe';
+export * from './decorated-key-value-list-slot-recipe';
+export * from './decorated-key-value-list-item-slot-recipe';
 export * from './sub-navigation-slot-recipe';
 export * from './progress-indicator-slot-recipe';
 export * from './determinate-progress-indicator-slot-recipe';

package/dist/styled-system/recipes/index.js

@@ -52,6 +52,8 @@ export * from './data-table-sort-button-slot-recipe.js';
 export * from './data-table-header-row-slot-recipe.js';
 export * from './data-table-header-slot-recipe.js';
 export * from './data-table-row-slot-recipe.js';
+export * from './decorated-key-value-list-slot-recipe.js';
+export * from './decorated-key-value-list-item-slot-recipe.js';
 export * from './sub-navigation-slot-recipe.js';
 export * from './progress-indicator-slot-recipe.js';
 export * from './determinate-progress-indicator-slot-recipe.js';

package/dist/styled-system/recipes/status-label-slot-recipe.d.ts

@@ -6,7 +6,7 @@ interface StatusLabelSlotRecipeVariant {
   /**
  * @default "neutral"
  */
-status: "neutral" | "success" | "error" | "caution"
+status: "neutral" | "success" | "error" | "caution" | "required"
 /**
  * @default "medium"
  */

package/dist/styled-system/recipes/status-label-slot-recipe.js

@@ -39,7 +39,8 @@ export const statusLabelSlotRecipe = /* @__PURE__ */ Object.assign(statusLabelSl
             "neutral",
             "success",
             "error",
-            "caution"
+            "caution",
+            "required"
         ],
         "size": [
             "medium",

package/dist/styles.css

@@ -3129,6 +3129,93 @@
   border-bottom-width: 0;
 }
 
+.mfui-RwAxQ {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  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\.panel-component\.comfort);
+  overflow: clip;
+  display: grid;
+  font-family: var(--mfui-fonts-mfui\.typography\.font-family\.label);
+  font-size: var(--mfui-font-sizes-mfui\.typography\.font-size\.label);
+  line-height: var(--mfui-line-heights-mfui\.typography\.line-height\.label);
+  width: 100%;
+}
+
+.mfui-RwAxQ > .mfui-DecoratedKeyValueListItem__root:not(:last-child) {
+  position: relative;
+}
+
+.mfui-RwAxQ > .mfui-DecoratedKeyValueListItem__root:not(:last-child)::after {
+  inset-inline: 0;
+  content: "";
+  position: absolute;
+  inset-block-end: 0;
+  border-block-end-style: solid;
+  border-block-end-width: var(--mfui-border-widths-mfui\.size\.border\.base\.width\.comfort);
+  border-block-end-color: var(--mfui-colors-mfui\.color\.neutral\.sub-border\.none);
+  pointer-events: none;
+}
+
+.mfui-bVEoFx {
+  grid-column: span 2;
+  display: grid;
+  grid-template-columns: subgrid;
+  align-items: stretch;
+}
+
+.mfui-isKogp {
+  padding-inline: var(--mfui-spacing-mfui\.size\.padding\.container\.horizontal\.comfort);
+  padding-block: var(--mfui-decorated-key-value-list-cell-padding-y);
+  display: flex;
+  align-items: flex-start;
+  overflow-wrap: anywhere;
+  background-color: var(--mfui-colors-mfui\.color\.neutral\.thin-background\.none);
+  font-weight: var(--mfui-font-weights-mfui\.typography\.font-weight\.label);
+  color: var(--mfui-colors-mfui\.color\.base\.content\.none);
+  min-width: 0;
+}
+
+.mfui-dvMFL {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.mfui-dvMFL > .mfui-DecoratedKeyValueListItem__valueItem:not(:last-child) {
+  position: relative;
+}
+
+.mfui-dvMFL > .mfui-DecoratedKeyValueListItem__valueItem:not(:last-child)::after {
+  inset-inline: 0;
+  content: "";
+  position: absolute;
+  inset-block-end: 0;
+  border-block-end-style: solid;
+  border-block-end-width: var(--mfui-border-widths-mfui\.size\.border\.base\.width\.comfort);
+  border-block-end-color: var(--mfui-colors-mfui\.color\.neutral\.sub-border\.none);
+  pointer-events: none;
+}
+
+.mfui-eOMnAd {
+  padding-inline: var(--mfui-spacing-mfui\.size\.padding\.container\.horizontal\.comfort);
+  padding-block: var(--mfui-decorated-key-value-list-cell-padding-y);
+  display: flex;
+  align-items: flex-start;
+  overflow-wrap: anywhere;
+  color: var(--mfui-colors-mfui\.color\.base\.content\.none);
+  min-width: 0;
+  min-height: var(--mfui-decorated-key-value-list-cell-min-height);
+}
+
+.mfui-eOMnAd:has(input),.mfui-eOMnAd:has(textarea) {
+  padding-block: var(--mfui-decorated-key-value-list-control-padding-y);
+  align-items: center;
+}
+
 .mfui-iXjiUv {
   background-color: var(--mfui-colors-mfui\.color\.base\.background\.none);
 }
@@ -7541,57 +7628,57 @@ li:last-child > .mfui-cXGJls {
   max-width: 32px;
 }
 
-.mfui-kQhdmg:not(:disabled, [disabled], [data-disabled]):not(:has(input:disabled)) {
+.mfui-jqZsnQ:not(:disabled, [disabled], [data-disabled]):not(:has(input:disabled)) {
   cursor: pointer;
 }
 
-.mfui-kQhdmg:not(:disabled, [disabled], [data-disabled]):not(:has(input:disabled)):is(:hover, [data-hover]) {
+.mfui-jqZsnQ:not(:disabled, [disabled], [data-disabled]):not(:has(input:disabled)):is(:hover, [data-hover]) {
   background-color: var(--mfui-colors-mfui\.color\.base\.background\.hovered);
 }
 
-.mfui-kQhdmg:not(:disabled, [disabled], [data-disabled]):not(:has(input:disabled)):is(:hover, [data-hover]) [data-mfui-content="checkbox-icon"] {
+.mfui-jqZsnQ:not(:disabled, [disabled], [data-disabled]):not(:has(input:disabled)):is(:hover, [data-hover]) [data-mfui-content="checkbox-icon"] {
   color: var(--mfui-colors-mfui\.color\.base\.sub-content\.hovered);
 }
 
-.mfui-kQhdmg:not(:disabled, [disabled], [data-disabled]):not(:has(input:disabled)):is(:focus-visible, [data-focus-visible]) {
+.mfui-jqZsnQ:not(:disabled, [disabled], [data-disabled]):not(:has(input:disabled)):is(:focus-visible, [data-focus-visible]) {
   background-color: var(--mfui-colors-mfui\.color\.base\.background\.hovered);
 }
 
-.mfui-kQhdmg:not(:disabled, [disabled], [data-disabled]):not(:has(input:disabled)):is(:focus-visible, [data-focus-visible]) [data-mfui-content="checkbox-icon"] {
+.mfui-jqZsnQ:not(:disabled, [disabled], [data-disabled]):not(:has(input:disabled)):is(:focus-visible, [data-focus-visible]) [data-mfui-content="checkbox-icon"] {
   color: var(--mfui-colors-mfui\.color\.base\.sub-content\.hovered);
 }
 
-.mfui-kQhdmg:not(:disabled, [disabled], [data-disabled]):not(:has(input:disabled)):is(:active, [data-active]) {
+.mfui-jqZsnQ:not(:disabled, [disabled], [data-disabled]):not(:has(input:disabled)):is(:active, [data-active]) {
   background-color: var(--mfui-colors-mfui\.color\.base\.background\.pressed);
 }
 
-.mfui-kQhdmg:not(:disabled, [disabled], [data-disabled]):not(:has(input:disabled)):is(:active, [data-active]) [data-mfui-content="checkbox-icon"] {
+.mfui-jqZsnQ:not(:disabled, [disabled], [data-disabled]):not(:has(input:disabled)):is(:active, [data-active]) [data-mfui-content="checkbox-icon"] {
   color: var(--mfui-colors-mfui\.color\.base\.sub-content\.pressed);
 }
 
-.mfui-kQhdmg:not(:disabled, [disabled], [data-disabled]):not(:has(input:disabled)):has(input[type="checkbox"]:not(:disabled):focus-visible) {
+.mfui-jqZsnQ:not(:disabled, [disabled], [data-disabled]):not(:has(input:disabled)):has(input[type="checkbox"]:not(:disabled):focus-visible) {
   background-color: var(--mfui-colors-mfui\.color\.base\.background\.hovered);
 }
 
-.mfui-kQhdmg:not(:disabled, [disabled], [data-disabled]):not(:has(input:disabled)):has(input[type="checkbox"]:not(:disabled):focus-visible) [data-mfui-content="checkbox-icon"] {
+.mfui-jqZsnQ:not(:disabled, [disabled], [data-disabled]):not(:has(input:disabled)):has(input[type="checkbox"]:not(:disabled):focus-visible) [data-mfui-content="checkbox-icon"] {
   color: var(--mfui-colors-mfui\.color\.base\.sub-content\.hovered);
 }
 
-.mfui-kQhdmg:not(:disabled, [disabled], [data-disabled]):not(:has(input:disabled)) input[type="checkbox"]:focus-visible {
+.mfui-jqZsnQ: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-kQhdmg:not(:disabled, [disabled], [data-disabled]):not(:has(input:disabled)):has(input[type="checkbox"]:not(:disabled):checked):is(:hover, [data-hover]) [data-mfui-content="checkbox-icon"], .mfui-kQhdmg:not(:disabled, [disabled], [data-disabled]):not(:has(input:disabled)):has(input[type="checkbox"]:not(:disabled):indeterminate):is(:hover, [data-hover]) [data-mfui-content="checkbox-icon"],.mfui-kQhdmg:not(:disabled, [disabled], [data-disabled]):not(:has(input:disabled)):has(input[type="checkbox"]:not(:disabled):checked):is(:focus-visible, [data-focus-visible]) [data-mfui-content="checkbox-icon"], .mfui-kQhdmg:not(:disabled, [disabled], [data-disabled]):not(:has(input:disabled)):has(input[type="checkbox"]:not(:disabled):indeterminate):is(:focus-visible, [data-focus-visible]) [data-mfui-content="checkbox-icon"] {
+.mfui-jqZsnQ:not(:disabled, [disabled], [data-disabled]):not(:has(input:disabled)):has(input[type="checkbox"]:not(:disabled):checked):is(:hover, [data-hover]) [data-mfui-content="checkbox-icon"], .mfui-jqZsnQ:not(:disabled, [disabled], [data-disabled]):not(:has(input:disabled)):has(input[type="checkbox"]:not(:disabled):indeterminate):is(:hover, [data-hover]) [data-mfui-content="checkbox-icon"],.mfui-jqZsnQ:not(:disabled, [disabled], [data-disabled]):not(:has(input:disabled)):has(input[type="checkbox"]:not(:disabled):checked):is(:focus-visible, [data-focus-visible]) [data-mfui-content="checkbox-icon"], .mfui-jqZsnQ:not(:disabled, [disabled], [data-disabled]):not(:has(input:disabled)):has(input[type="checkbox"]:not(:disabled):indeterminate):is(:focus-visible, [data-focus-visible]) [data-mfui-content="checkbox-icon"] {
   color: var(--mfui-colors-mfui\.color\.selected\.sign\.hovered);
 }
 
-.mfui-kQhdmg:not(:disabled, [disabled], [data-disabled]):not(:has(input:disabled)):has(input[type="checkbox"]:not(:disabled):checked):is(:active, [data-active]) [data-mfui-content="checkbox-icon"], .mfui-kQhdmg:not(:disabled, [disabled], [data-disabled]):not(:has(input:disabled)):has(input[type="checkbox"]:not(:disabled):indeterminate):is(:active, [data-active]) [data-mfui-content="checkbox-icon"] {
+.mfui-jqZsnQ:not(:disabled, [disabled], [data-disabled]):not(:has(input:disabled)):has(input[type="checkbox"]:not(:disabled):checked):is(:active, [data-active]) [data-mfui-content="checkbox-icon"], .mfui-jqZsnQ:not(:disabled, [disabled], [data-disabled]):not(:has(input:disabled)):has(input[type="checkbox"]:not(:disabled):indeterminate):is(:active, [data-active]) [data-mfui-content="checkbox-icon"] {
   color: var(--mfui-colors-mfui\.color\.selected\.sign\.pressed);
 }
 
-.mfui-kQhdmg:not(:disabled, [disabled], [data-disabled]):not(:has(input:disabled)):has(input[type="checkbox"]:not(:disabled):checked):has(input[type="checkbox"]:not(:disabled):focus-visible) [data-mfui-content="checkbox-icon"], .mfui-kQhdmg:not(:disabled, [disabled], [data-disabled]):not(:has(input:disabled)):has(input[type="checkbox"]:not(:disabled):indeterminate):has(input[type="checkbox"]:not(:disabled):focus-visible) [data-mfui-content="checkbox-icon"] {
+.mfui-jqZsnQ:not(:disabled, [disabled], [data-disabled]):not(:has(input:disabled)):has(input[type="checkbox"]:not(:disabled):checked):has(input[type="checkbox"]:not(:disabled):focus-visible) [data-mfui-content="checkbox-icon"], .mfui-jqZsnQ:not(:disabled, [disabled], [data-disabled]):not(:has(input:disabled)):has(input[type="checkbox"]:not(:disabled):indeterminate):has(input[type="checkbox"]:not(:disabled):focus-visible) [data-mfui-content="checkbox-icon"] {
   color: var(--mfui-colors-mfui\.color\.selected\.sign\.hovered);
 }
 
@@ -7903,6 +7990,34 @@ li:last-child > .mfui-cXGJls {
   color: var(--mfui-colors-mfui\.color\.base\.content\.pressed);
 }
 
+.mfui-dvGSUq:is(:focus-visible, [data-focus-visible]) .mfui-DataTableRow__selectionCheckbox [data-mfui-content="checkbox-icon"] {
+  color: var(--mfui-colors-mfui\.color\.base\.sub-content\.hovered);
+}
+
+.mfui-dvGSUq:is(:focus-visible, [data-focus-visible]) .mfui-DataTableRow__selectionCheckbox:has(input[type="checkbox"]:checked) [data-mfui-content="checkbox-icon"] {
+  color: var(--mfui-colors-mfui\.color\.selected\.sign\.hovered);
+}
+
+.mfui-dvGSUq:is(:hover, [data-hover]):not(:has(button:hover, input:hover, select:hover, textarea:hover, [tabindex]:hover)) .mfui-DataTableRow__selectionCheckbox [data-mfui-content="checkbox-icon"] {
+  color: var(--mfui-colors-mfui\.color\.base\.sub-content\.hovered);
+}
+
+.mfui-dvGSUq:is(:hover, [data-hover]):not(:has(button:hover, input:hover, select:hover, textarea:hover, [tabindex]:hover)) .mfui-DataTableRow__selectionCheckbox:has(input[type="checkbox"]:checked) [data-mfui-content="checkbox-icon"] {
+  color: var(--mfui-colors-mfui\.color\.selected\.sign\.hovered);
+}
+
+.mfui-dvGSUq:is(:active, [data-active]):not(:has(button:hover, input:hover, select:hover, textarea:hover, [tabindex]:hover)) .mfui-DataTableRow__selectionCheckbox [data-mfui-content="checkbox-icon"] {
+  color: var(--mfui-colors-mfui\.color\.base\.sub-content\.pressed);
+}
+
+.mfui-dvGSUq:is(:active, [data-active]):not(:has(button:hover, input:hover, select:hover, textarea:hover, [tabindex]:hover)) .mfui-DataTableRow__selectionCheckbox:has(input[type="checkbox"]:checked) [data-mfui-content="checkbox-icon"] {
+  color: var(--mfui-colors-mfui\.color\.selected\.sign\.pressed);
+}
+
+.mfui-JCzKD {
+  pointer-events: none;
+}
+
 .mfui-jZGzmE {
   border-color: var(--mfui-colors-mfui\.color\.readonly\.border);
   background-color: var(--mfui-colors-mfui\.color\.readonly\.background);
@@ -7925,6 +8040,18 @@ li:last-child > .mfui-cXGJls {
   color: var(--mfui-colors-mfui\.color\.readonly\.content);
 }
 
+.mfui-eUIypf {
+  --mfui-decorated-key-value-list-cell-padding-y: var(--mfui-spacing-mfui\.size\.padding\.control-container-body-only\.vertical\.comfort);
+  --mfui-decorated-key-value-list-cell-min-height: var(--mfui-sizes-mfui\.size\.dimension\.data-table-cell\.height\.comfort);
+  --mfui-decorated-key-value-list-control-padding-y: var(--mfui-spacing-mfui\.size\.padding\.control-container\.vertical\.comfort);
+}
+
+.mfui-DQOLp {
+  --mfui-decorated-key-value-list-cell-padding-y: var(--mfui-spacing-mfui\.size\.padding\.control-container-body-only\.vertical\.condensed);
+  --mfui-decorated-key-value-list-cell-min-height: var(--mfui-sizes-mfui\.size\.dimension\.data-table-cell\.height\.condensed);
+  --mfui-decorated-key-value-list-control-padding-y: var(--mfui-spacing-mfui\.size\.padding\.control-container\.vertical\.condensed);
+}
+
 .mfui-cgmsmM {
   border-right: 1px solid;
   border-color: var(--mfui-colors-mfui\.color\.neutral\.thin-border\.none);
@@ -8381,6 +8508,11 @@ li:last-child > .mfui-cXGJls {
   color: var(--mfui-colors-mfui\.color\.signal-yellow\.text-on-sub-background\.none);
 }
 
+.mfui-fIoobF {
+  background-color: var(--mfui-colors-mfui\.color\.signal-red\.background\.none);
+  color: var(--mfui-colors-mfui\.color\.base\.inverted-content\.none);
+}
+
 .mfui-bqPyQm {
   padding-inline: var(--mfui-spacing-mfui\.size\.padding\.status-label\.horizontal\.condensed);
   gap: var(--mfui-spacing-mfui\.size\.spacing\.icon-and-text\.horizontal\.condensed);