@moneyforward/mfui-components 3.1.0 → 3.3.0

package/dist/styled-system/recipes/select-box-slot-recipe.d.ts

@@ -6,7 +6,7 @@ interface SelectBoxSlotRecipeVariant {
   /**
  * @default "medium"
  */
-size: "small" | "medium"
+size: "small" | "medium" | "large"
 showGroupOptionDivider: boolean
 }
 
@@ -14,7 +14,7 @@ type SelectBoxSlotRecipeVariantMap = {
   [key in keyof SelectBoxSlotRecipeVariant]: Array<SelectBoxSlotRecipeVariant[key]>
 }
 
-type SelectBoxSlotRecipeSlot = "trigger" | "triggerWrapper" | "clearButtonWrapper" | "popover" | "menuHeader" | "optionPanel" | "scrollWrapper" | "listBox" | "listItem" | "skeletonItem" | "emptyMessage"
+type SelectBoxSlotRecipeSlot = "trigger" | "triggerWrapper" | "clearButtonWrapper" | "displayValue" | "placeholder" | "popover" | "menuHeader" | "optionPanel" | "scrollWrapper" | "listBox" | "listItem" | "skeletonItem" | "emptyMessage" | "infiniteScrollError" | "infiniteScrollErrorMessage" | "infiniteScrollErrorButton" | "infiniteScrollErrorIcon" | "infiniteScrollLoading"
 
 export type SelectBoxSlotRecipeVariantProps = {
   [key in keyof SelectBoxSlotRecipeVariant]?: ConditionalValue<SelectBoxSlotRecipeVariant[key]> | undefined

package/dist/styled-system/recipes/select-box-slot-recipe.js

@@ -17,6 +17,14 @@ const selectBoxSlotRecipeSlotNames = [
         "clearButtonWrapper",
         "SelectBox__clearButtonWrapper"
     ],
+    [
+        "displayValue",
+        "SelectBox__displayValue"
+    ],
+    [
+        "placeholder",
+        "SelectBox__placeholder"
+    ],
     [
         "popover",
         "SelectBox__popover"
@@ -48,6 +56,26 @@ const selectBoxSlotRecipeSlotNames = [
     [
         "emptyMessage",
         "SelectBox__emptyMessage"
+    ],
+    [
+        "infiniteScrollError",
+        "SelectBox__infiniteScrollError"
+    ],
+    [
+        "infiniteScrollErrorMessage",
+        "SelectBox__infiniteScrollErrorMessage"
+    ],
+    [
+        "infiniteScrollErrorButton",
+        "SelectBox__infiniteScrollErrorButton"
+    ],
+    [
+        "infiniteScrollErrorIcon",
+        "SelectBox__infiniteScrollErrorIcon"
+    ],
+    [
+        "infiniteScrollLoading",
+        "SelectBox__infiniteScrollLoading"
     ]
 ];
 const selectBoxSlotRecipeSlotFns = /* @__PURE__ */ selectBoxSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, selectBoxSlotRecipeDefaultVariants, getSlotCompoundVariant(selectBoxSlotRecipeCompoundVariants, slotName))]);
@@ -68,7 +96,8 @@ export const selectBoxSlotRecipe = /* @__PURE__ */ Object.assign(selectBoxSlotRe
     variantMap: {
         "size": [
             "small",
-            "medium"
+            "medium",
+            "large"
         ],
         "showGroupOptionDivider": [
             "true",

package/dist/styled-system/recipes/toggle-switch-slot-recipe.d.ts

@@ -0,0 +1,33 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface ToggleSwitchSlotRecipeVariant {
+  
+}
+
+type ToggleSwitchSlotRecipeVariantMap = {
+  [key in keyof ToggleSwitchSlotRecipeVariant]: Array<ToggleSwitchSlotRecipeVariant[key]>
+}
+
+type ToggleSwitchSlotRecipeSlot = "root" | "input" | "handle"
+
+export type ToggleSwitchSlotRecipeVariantProps = {
+  [key in keyof ToggleSwitchSlotRecipeVariant]?: ConditionalValue<ToggleSwitchSlotRecipeVariant[key]> | undefined
+}
+
+export interface ToggleSwitchSlotRecipeRecipe {
+  __slot: ToggleSwitchSlotRecipeSlot
+  __type: ToggleSwitchSlotRecipeVariantProps
+  (props?: ToggleSwitchSlotRecipeVariantProps): Pretty<Record<ToggleSwitchSlotRecipeSlot, string>>
+  raw: (props?: ToggleSwitchSlotRecipeVariantProps) => ToggleSwitchSlotRecipeVariantProps
+  variantMap: ToggleSwitchSlotRecipeVariantMap
+  variantKeys: Array<keyof ToggleSwitchSlotRecipeVariant>
+  splitVariantProps<Props extends ToggleSwitchSlotRecipeVariantProps>(props: Props): [ToggleSwitchSlotRecipeVariantProps, Pretty<DistributiveOmit<Props, keyof ToggleSwitchSlotRecipeVariantProps>>]
+  getVariantProps: (props?: ToggleSwitchSlotRecipeVariantProps) => ToggleSwitchSlotRecipeVariantProps
+}
+
+/**
+ * Slot class created for the MFUI ToggleSwitch component.
+ */
+export declare const toggleSwitchSlotRecipe: ToggleSwitchSlotRecipeRecipe

package/dist/styled-system/recipes/toggle-switch-slot-recipe.js

@@ -0,0 +1,36 @@
+import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.js';
+import { createRecipe } from './create-recipe.js';
+const toggleSwitchSlotRecipeDefaultVariants = {};
+const toggleSwitchSlotRecipeCompoundVariants = [];
+const toggleSwitchSlotRecipeSlotNames = [
+    [
+        "root",
+        "ToggleSwitch__root"
+    ],
+    [
+        "input",
+        "ToggleSwitch__input"
+    ],
+    [
+        "handle",
+        "ToggleSwitch__handle"
+    ]
+];
+const toggleSwitchSlotRecipeSlotFns = /* @__PURE__ */ toggleSwitchSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, toggleSwitchSlotRecipeDefaultVariants, getSlotCompoundVariant(toggleSwitchSlotRecipeCompoundVariants, slotName))]);
+const toggleSwitchSlotRecipeFn = memo((props = {}) => {
+    return Object.fromEntries(toggleSwitchSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
+});
+const toggleSwitchSlotRecipeVariantKeys = [];
+const getVariantProps = (variants) => ({ ...toggleSwitchSlotRecipeDefaultVariants, ...compact(variants) });
+export const toggleSwitchSlotRecipe = /* @__PURE__ */ Object.assign(toggleSwitchSlotRecipeFn, {
+    __recipe__: false,
+    __name__: 'toggleSwitchSlotRecipe',
+    raw: (props) => props,
+    classNameMap: {},
+    variantKeys: toggleSwitchSlotRecipeVariantKeys,
+    variantMap: {},
+    splitVariantProps(props) {
+        return splitProps(props, toggleSwitchSlotRecipeVariantKeys);
+    },
+    getVariantProps
+});

package/dist/styled-system/types/conditions.d.ts

@@ -244,6 +244,16 @@ export interface Conditions {
 	"_hasDisabledRadioButtonInside": string
 	/** `&:has(input[type="radio"]:not(:disabled):checked)` */
 	"_hasCheckedRadioButtonInside": string
+	/** `&:has(input[type="checkbox"][role="switch"]:not(:disabled))` */
+	"_hasToggleSwitchInside": string
+	/** `&:has(input[type="checkbox"][role="switch"]:not(:disabled):focus-visible)` */
+	"_hasFocusedToggleSwitchInside": string
+	/** `&:has(input[type="checkbox"][role="switch"]:not(:disabled):focus-visible:checked)` */
+	"_hasFocusedCheckedToggleSwitchInside": string
+	/** `&:has(input[type="checkbox"][role="switch"]:disabled)` */
+	"_hasDisabledToggleSwitchInside": string
+	/** `&:has(input[type="checkbox"][role="switch"]:not(:disabled):checked)` */
+	"_hasCheckedToggleSwitchInside": string
 	/** `@media screen and (min-width: 37.5rem)` */
 	"sm": string
 	/** `@media screen and (min-width: 37.5rem) and (max-width: 74.9975rem)` */

package/dist/styles.css

@@ -202,7 +202,9 @@
   --mfui-colors-mfui\.color\.neutral\.thin-border\.hovered: #ddddddff;
   --mfui-colors-mfui\.color\.neutral\.thin-border\.pressed: #d1d1d1ff;
   --mfui-colors-mfui\.color\.primary\.content\.none: #2e72d8ff;
-      --mfui-colors-mfui\.color\.primary\.border\.none: #2e72d8ff;
+  --mfui-colors-mfui\.color\.primary\.content\.hovered: #0d57b1ff;
+  --mfui-colors-mfui\.color\.primary\.content\.pressed: #003e90ff;
+  --mfui-colors-mfui\.color\.primary\.border\.none: #2e72d8ff;
       --mfui-colors-mfui\.color\.primary\.background\.none: #2e72d8ff;
   --mfui-colors-mfui\.color\.primary\.background\.hovered: #0d57b1ff;
   --mfui-colors-mfui\.color\.primary\.background\.pressed: #003e90ff;
@@ -271,7 +273,11 @@
       --mfui-sizes-mfui\.size\.dimension\.month-calendar-cell\.width\.comfort: 49px;
       --mfui-sizes-mfui\.size\.dimension\.month-calendar-cell\.height\.comfort: 48px;
             --mfui-sizes-mfui\.size\.dimension\.this-month-indicator\.diameter\.comfort: 42px;
-                                                --mfui-sizes-mfui\.size\.target\.minimum\.comfort: 24px;
+            --mfui-sizes-mfui\.size\.dimension\.toggle-switch-container\.width\.comfort: 44px;
+      --mfui-sizes-mfui\.size\.dimension\.toggle-switch-container\.height\.comfort: 24px;
+      --mfui-sizes-mfui\.size\.dimension\.toggle-switch-handle-on\.diameter\.comfort: 20px;
+      --mfui-sizes-mfui\.size\.dimension\.toggle-switch-handle-off\.diameter\.comfort: 18px;
+                  --mfui-sizes-mfui\.size\.target\.minimum\.comfort: 24px;
       --mfui-sizes-mfui\.size\.target\.button\.comfort: 56px;
   --mfui-sizes-mfui\.size\.target\.button\.condensed: 42px;
   --mfui-sizes-mfui\.size\.target\.button\.impact: 56px;
@@ -337,7 +343,8 @@
   --mfui-radii-mfui\.size\.radius\.panel-component\.comfort: 12px;
       --mfui-radii-mfui\.size\.radius\.floating-component\.comfort: 18px;
       --mfui-radii-mfui\.size\.radius\.floating-pane\.comfort: 24px;
-            --mfui-fonts-mfui\.typography\.font-family\.page-heading-1: Meiryo,Hiragino Kaku Gothic ProN,Hiragino Sans,Noto Sans JP,sans-serif;
+      --mfui-radii-mfui\.size\.radius\.toggle-switch-handle\.comfort: 12px;
+      --mfui-fonts-mfui\.typography\.font-family\.page-heading-1: Meiryo,Hiragino Kaku Gothic ProN,Hiragino Sans,Noto Sans JP,sans-serif;
     --mfui-fonts-mfui\.typography\.font-family\.page-heading-2: Meiryo,Hiragino Kaku Gothic ProN,Hiragino Sans,Noto Sans JP,sans-serif;
     --mfui-fonts-mfui\.typography\.font-family\.section-heading-1: Meiryo,Hiragino Kaku Gothic ProN,Hiragino Sans,Noto Sans JP,sans-serif;
     --mfui-fonts-mfui\.typography\.font-family\.section-heading-2: Meiryo,Hiragino Kaku Gothic ProN,Hiragino Sans,Noto Sans JP,sans-serif;
@@ -1523,6 +1530,44 @@
   min-height: var(--mfui-sizes-mfui\.size\.dimension\.control-component\.height\.comfort);
 }
 
+.mfui-etcyoB {
+  padding-inline: var(--mfui-spacing-mfui\.size\.padding\.control\.horizontal\.comfort);
+  padding-block: 4px;
+  gap: 4px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.mfui-kxqjkG {
+  gap: 4px;
+  display: flex;
+  align-items: center;
+}
+
+.mfui-cUaWtj {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.mfui-dygFHu {
+  color: var(--mfui-colors-mfui\.color\.signal-red\.content\.none);
+  width: var(--mfui-sizes-mfui\.size\.dimension\.icon\.square\.comfort);
+  height: var(--mfui-sizes-mfui\.size\.dimension\.icon\.square\.comfort);
+}
+
+.mfui-kXRJmn {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 32px;
+}
+
+.mfui-kXRJmn .mfui-ProgressIndicator {
+  width: 16px;
+  height: 16px;
+}
+
 .mfui-bZAucV {
   position: relative;
   display: flex;
@@ -2756,6 +2801,13 @@
   min-width: var(--mfui-sizes-mfui\.size\.dimension\.data-grid-disclosure-inidicator\.width\.comfort);
 }
 
+.mfui-hrJUxa {
+  padding-inline: var(--mfui-spacing-mfui\.size\.padding\.data-grid-cell\.horizontal\.comfort);
+  padding-block: 5px;
+  margin-block: var(--mfui-spacing-mfui\.size\.padding\.display-table-cell\.vertical\.comfort);
+  height: 24px;
+}
+
 .mfui-fXPtIg {
   overflow: auto;
   position: relative;
@@ -3216,6 +3268,50 @@
   bottom: 0;
 }
 
+.mfui-eacekU {
+  flex: 1 1 auto;
+  overflow-y: auto;
+  min-height: 0px;
+}
+
+.mfui-dBhQXV {
+  padding-inline: var(--mfui-spacing-mfui\.size\.padding\.control\.horizontal\.comfort);
+  padding-block: 4px;
+  gap: 4px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.mfui-bdFGwq {
+  gap: 4px;
+  display: flex;
+  align-items: center;
+}
+
+.mfui-bNdwmf {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.mfui-ehdBWy {
+  color: var(--mfui-colors-mfui\.color\.signal-red\.content\.none);
+  width: var(--mfui-sizes-mfui\.size\.dimension\.icon\.square\.comfort);
+  height: var(--mfui-sizes-mfui\.size\.dimension\.icon\.square\.comfort);
+}
+
+.mfui-bKkNJr {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 32px;
+}
+
+.mfui-bKkNJr .mfui-ProgressIndicator {
+  width: 16px;
+  height: 16px;
+}
+
 .mfui-frSlYl {
   border: 1px solid;
   gap: var(--mfui-spacing-mfui\.size\.spacing\.inline\.horizontal\.comfort);
@@ -4572,6 +4668,11 @@
   vertical-align: top;
 }
 
+.mfui-jypOde {
+  padding-block: 5px;
+  height: 24px;
+}
+
 .mfui-lkSlOI {
   border: 1px solid var(--mfui-colors-mfui\.color\.neutral\.sub-border\.none);
   display: flex;
@@ -4771,6 +4872,156 @@
   border-left-color: var(--mfui-colors-mfui\.color\.neutral\.border\.pressed);
 }
 
+.mfui-hRFDZx {
+  border-radius: var(--mfui-radii-mfui\.size\.radius\.toggle-switch-handle\.comfort);
+  transition: background-color 0.1s linear, border-color 0.1s linear;
+  display: inline-flex;
+  position: relative;
+  width: var(--mfui-sizes-mfui\.size\.dimension\.toggle-switch-container\.width\.comfort);
+  height: var(--mfui-sizes-mfui\.size\.dimension\.toggle-switch-container\.height\.comfort);
+}
+
+.mfui-hRFDZx:has(input[type="checkbox"][role="switch"]:not(:disabled)) {
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--mfui-colors-mfui\.color\.neutral\.border\.none);
+  background-color: var(--mfui-colors-mfui\.color\.neutral\.sub-background\.none);
+}
+
+.mfui-hRFDZx:has(input[type="checkbox"][role="switch"]:not(:disabled)):is(:hover, [data-hover]) {
+  border-color: var(--mfui-colors-mfui\.color\.neutral\.border\.hovered);
+  background-color: var(--mfui-colors-mfui\.color\.neutral\.sub-background\.hovered);
+}
+
+.mfui-hRFDZx:has(input[type="checkbox"][role="switch"]:not(:disabled)):is(:hover, [data-hover]) [data-mfui-content="toggle-handle"] {
+  background-color: var(--mfui-colors-mfui\.color\.neutral\.content\.hovered);
+}
+
+.mfui-hRFDZx:has(input[type="checkbox"][role="switch"]:not(:disabled)):is(:active, [data-active]) {
+  border-color: var(--mfui-colors-mfui\.color\.neutral\.border\.pressed);
+  background-color: var(--mfui-colors-mfui\.color\.neutral\.sub-background\.pressed);
+}
+
+.mfui-hRFDZx:has(input[type="checkbox"][role="switch"]:not(:disabled)):is(:active, [data-active]) [data-mfui-content="toggle-handle"] {
+  background-color: var(--mfui-colors-mfui\.color\.neutral\.content\.pressed);
+}
+
+.mfui-hRFDZx:has(input[type="checkbox"][role="switch"]:not(:disabled)) [data-mfui-content="toggle-handle"] {
+  transform: translateY(-50%) translateX(0);
+  background-color: var(--mfui-colors-mfui\.color\.neutral\.content\.none);
+  width: var(--mfui-sizes-mfui\.size\.dimension\.toggle-switch-handle-off\.diameter\.comfort);
+  height: var(--mfui-sizes-mfui\.size\.dimension\.toggle-switch-handle-off\.diameter\.comfort);
+}
+
+.mfui-hRFDZx:has(input[type="checkbox"][role="switch"]:not(:disabled):checked) {
+  border-width: 0;
+  background-color: var(--mfui-colors-mfui\.color\.primary\.content\.none);
+}
+
+.mfui-hRFDZx:has(input[type="checkbox"][role="switch"]:not(:disabled):checked) [data-mfui-content="toggle-handle"] {
+  transform: translateY(-50%) translateX(calc(var(--mfui-sizes-mfui\.size\.dimension\.toggle-switch-container\.width\.comfort) - var(--mfui-sizes-mfui\.size\.dimension\.toggle-switch-handle-on\.diameter\.comfort) - 4px));
+  background-color: var(--mfui-colors-mfui\.color\.base\.background\.none);
+  width: var(--mfui-sizes-mfui\.size\.dimension\.toggle-switch-handle-on\.diameter\.comfort);
+  height: var(--mfui-sizes-mfui\.size\.dimension\.toggle-switch-handle-on\.diameter\.comfort);
+}
+
+.mfui-hRFDZx:has(input[type="checkbox"][role="switch"]:not(:disabled):checked):is(:hover, [data-hover]) {
+  background-color: var(--mfui-colors-mfui\.color\.primary\.content\.hovered);
+}
+
+.mfui-hRFDZx:has(input[type="checkbox"][role="switch"]:not(:disabled):checked):is(:hover, [data-hover]) [data-mfui-content="toggle-handle"] {
+  background-color: var(--mfui-colors-mfui\.color\.base\.background\.hovered);
+}
+
+.mfui-hRFDZx:has(input[type="checkbox"][role="switch"]:not(:disabled):checked):is(:active, [data-active]) {
+  background-color: var(--mfui-colors-mfui\.color\.primary\.content\.pressed);
+}
+
+.mfui-hRFDZx:has(input[type="checkbox"][role="switch"]:not(:disabled):checked):is(:active, [data-active]) [data-mfui-content="toggle-handle"] {
+  background-color: var(--mfui-colors-mfui\.color\.base\.background\.pressed);
+}
+
+.mfui-hRFDZx:has(input[type="checkbox"][role="switch"]:disabled) {
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--mfui-colors-mfui\.color\.disabled\.border);
+  background-color: var(--mfui-colors-mfui\.color\.disabled\.background);
+}
+
+.mfui-hRFDZx:has(input[type="checkbox"][role="switch"]:disabled) [data-mfui-content="toggle-handle"] {
+  transform: translateY(-50%) translateX(0);
+  background-color: var(--mfui-colors-mfui\.color\.disabled\.content);
+  width: var(--mfui-sizes-mfui\.size\.dimension\.toggle-switch-handle-off\.diameter\.comfort);
+  height: var(--mfui-sizes-mfui\.size\.dimension\.toggle-switch-handle-off\.diameter\.comfort);
+}
+
+.mfui-hRFDZx:has(input[type="checkbox"][role="switch"]:disabled:checked) {
+  border-width: 0;
+  background-color: var(--mfui-colors-mfui\.color\.disabled\.background);
+}
+
+.mfui-hRFDZx:has(input[type="checkbox"][role="switch"]:disabled:checked) [data-mfui-content="toggle-handle"] {
+  transform: translateY(-50%) translateX(calc(var(--mfui-sizes-mfui\.size\.dimension\.toggle-switch-container\.width\.comfort) - var(--mfui-sizes-mfui\.size\.dimension\.toggle-switch-handle-on\.diameter\.comfort) - 4px));
+  background-color: var(--mfui-colors-mfui\.color\.base\.background\.none);
+  width: var(--mfui-sizes-mfui\.size\.dimension\.toggle-switch-handle-on\.diameter\.comfort);
+  height: var(--mfui-sizes-mfui\.size\.dimension\.toggle-switch-handle-on\.diameter\.comfort);
+}
+
+.mfui-hRFDZx:has(input[type="checkbox"][role="switch"]:not(:disabled):focus-visible) {
+  border-color: var(--mfui-colors-mfui\.color\.neutral\.border\.hovered);
+  background-color: var(--mfui-colors-mfui\.color\.neutral\.sub-background\.hovered);
+}
+
+.mfui-hRFDZx:has(input[type="checkbox"][role="switch"]:not(:disabled):focus-visible):is(:active, [data-active]) {
+  border-color: var(--mfui-colors-mfui\.color\.neutral\.border\.pressed);
+  background-color: var(--mfui-colors-mfui\.color\.neutral\.sub-background\.pressed);
+}
+
+.mfui-hRFDZx:has(input[type="checkbox"][role="switch"]:not(:disabled):focus-visible):is(:active, [data-active]) [data-mfui-content="toggle-handle"] {
+  background-color: var(--mfui-colors-mfui\.color\.neutral\.content\.pressed);
+}
+
+.mfui-hRFDZx:has(input[type="checkbox"][role="switch"]:not(:disabled):focus-visible) [data-mfui-content="toggle-handle"] {
+  background-color: var(--mfui-colors-mfui\.color\.neutral\.content\.hovered);
+}
+
+.mfui-hRFDZx:has(input[type="checkbox"][role="switch"]:not(:disabled):focus-visible:checked) {
+  background-color: var(--mfui-colors-mfui\.color\.primary\.content\.hovered);
+}
+
+.mfui-hRFDZx:has(input[type="checkbox"][role="switch"]:not(:disabled):focus-visible:checked) [data-mfui-content="toggle-handle"] {
+  background-color: var(--mfui-colors-mfui\.color\.base\.background\.hovered);
+}
+
+.mfui-hRFDZx:has(input[type="checkbox"][role="switch"]:not(:disabled):focus-visible:checked):is(:active, [data-active]) {
+  background-color: var(--mfui-colors-mfui\.color\.primary\.content\.pressed);
+}
+
+.mfui-hRFDZx:has(input[type="checkbox"][role="switch"]:not(:disabled):focus-visible:checked):is(:active, [data-active]) [data-mfui-content="toggle-handle"] {
+  background-color: var(--mfui-colors-mfui\.color\.base\.background\.pressed);
+}
+
+.mfui-ikFLrp {
+  margin: 0;
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  width: 100%;
+  height: 100%;
+}
+
+.mfui-ikFLrp:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
+  cursor: not-allowed;
+}
+
+.mfui-fcwQxJ {
+  border-radius: 50%;
+  transition: transform 0.1s linear, background-color 0.1s linear, width 0.1s linear, height 0.1s linear;
+  position: absolute;
+  top: 50%;
+  left: 2px;
+}
+
 @media screen and (min-width: 37.5rem) {
   .mfui-hveqnu {
     width: var(--mfui-sizes-mfui\.layout\.area\.horizontal\.fixed);
@@ -5479,6 +5730,19 @@
   min-width: var(--mfui-sizes-mfui\.size\.dimension\.icon\.square\.condensed);
 }
 
+.mfui-iOuOfJ {
+  padding-inline: calc(var(--mfui-spacing-mfui\.size\.padding\.input\.horizontal\.impact) - 1px);
+  gap: var(--mfui-spacing-mfui\.size\.spacing\.icon-and-text\.horizontal\.impact);
+  border-radius: var(--mfui-radii-mfui\.size\.radius\.control-component\.impact);
+  height: var(--mfui-sizes-mfui\.size\.dimension\.control-component\.height\.impact);
+  min-width: var(--mfui-sizes-mfui\.size\.target\.button\.impact);
+}
+
+.mfui-iOuOfJ > svg {
+  height: var(--mfui-sizes-mfui\.size\.dimension\.icon\.square\.comfort);
+  min-width: var(--mfui-sizes-mfui\.size\.dimension\.icon\.square\.comfort);
+}
+
 .mfui-ctWvwW[data-mfui-group-label="true"]:not(:first-child) {
   border: none;
   border-top: 1px solid;
@@ -5812,29 +6076,15 @@
 }
 
 .mfui-cKTSwl,.mfui-eguNxK {
-  min-height: var(--mfui-sizes-mfui\.size\.dimension\.data-grid-cell\.height\.condensed);
-}
-
-.mfui-cKTSwl,.mfui-eguNxK,.mfui-hfZRBD {
   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-hfZRBD {
-  height: var(--mfui-sizes-mfui\.size\.dimension\.data-grid-cell\.height\.condensed);
+  min-height: var(--mfui-sizes-mfui\.size\.dimension\.data-grid-cell\.height\.condensed);
 }
 
 .mfui-ifJbzD,.mfui-lagYEk {
-  min-height: var(--mfui-sizes-mfui\.size\.dimension\.data-grid-cell\.height\.comfort);
-}
-
-.mfui-ifJbzD,.mfui-lagYEk,.mfui-VwckJ {
   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-VwckJ {
-  height: var(--mfui-sizes-mfui\.size\.dimension\.data-grid-cell\.height\.comfort);
+  min-height: var(--mfui-sizes-mfui\.size\.dimension\.data-grid-cell\.height\.comfort);
 }
 
 .mfui-hCWOMt {
@@ -5887,24 +6137,22 @@
 }
 
 .mfui-cIEpCk::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: calc(100% + 1px);
   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-hUucnT::before {
+.mfui-cIEpCk::before,.mfui-hUucnT::before {
   content: "";
   position: absolute;
+  pointer-events: none;
   top: 0;
   left: 0;
   width: 100%;
   height: calc(100% + 1px);
+}
+
+.mfui-hUucnT::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);
@@ -5964,24 +6212,22 @@
 }
 
 .mfui-krlGLX::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: calc(100% + 1px);
   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-iRKnkw::before {
+.mfui-krlGLX::before,.mfui-iRKnkw::before {
   content: "";
   position: absolute;
+  pointer-events: none;
   top: 0;
   left: 0;
   width: 100%;
   height: calc(100% + 1px);
+}
+
+.mfui-iRKnkw::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);
@@ -6902,11 +7148,17 @@
     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-dlFVvi {
+  .mfui-dlFVvi,.mfui-hROZmU,.mfui-iTaRhG {
     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-caqEqS,.mfui-jprhbA {
+    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-iqpTgS {
     align-items: flex-start;
@@ -6916,6 +7168,18 @@
 }
   .mfui-fnKRCp {
     align-items: flex-end;
+}
+  .mfui-eSkNXq,.mfui-fBrVbr,.mfui-bNQKjD {
+    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-fQfOLY,.mfui-ccKtgp,.mfui-iLIvMR {
+    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-dAPpSW,.mfui-edTKLG,.mfui-bRozDV {
     display: none;