@recursica/mantine-adapter 0.20.0 → 0.22.0

package/src/components/Switch/Switch.module.css

@@ -10,8 +10,7 @@
   cursor: pointer;
 
   --switch-track-padding: var(
-    --recursica_ui-kit_components_switch_properties_track-inner-padding,
-    2px
+    --recursica_ui-kit_components_switch_properties_track-inner-padding
   );
   --switch-thumb-width: var(
     --recursica_ui-kit_components_switch_properties_thumb-width
@@ -24,15 +23,17 @@
   );
 }
 
-.root[data-disabled] {
+.root:has(input:disabled) {
   cursor: not-allowed;
-  opacity: var(--recursica_brand_states_disabled, 0.4);
+  opacity: var(
+    --recursica_ui-kit_components_switch-item_properties_disabled-opacity
+  );
 }
 
 .body {
   display: flex;
   align-items: center;
-  gap: var(--recursica_ui-kit_components_switch_properties_label-switch-gap);
+  gap: var(--recursica_ui-kit_components_switch-item_properties_label-gap);
 }
 
 /* HARDCODE: disable native hover color transitions applied by Mantine */
@@ -57,8 +58,7 @@
     --recursica_ui-kit_components_switch_properties_colors_track-unselected
   );
   box-shadow: var(
-    --recursica_ui-kit_components_switch_properties_track-elevation,
-    none
+    --recursica_ui-kit_components_switch_properties_track-elevation
   );
   padding: var(--switch-track-padding);
   border: none; /* HARDCODE */
@@ -94,8 +94,7 @@
     --recursica_ui-kit_components_switch_properties_colors_thumb-unselected
   );
   box-shadow: var(
-    --recursica_ui-kit_components_switch_properties_thumb-elevation,
-    none
+    --recursica_ui-kit_components_switch_properties_thumb-elevation
   );
   border: none; /* HARDCODE */
 
@@ -111,36 +110,46 @@
 .labelWrapper {
   display: flex;
   flex-direction: column;
+  max-width: var(
+    --recursica_ui-kit_components_switch-item_properties_label-max-width
+  );
 }
 
 .label {
   font-family: var(
-    --recursica_ui-kit_components_switch_properties_label-text_font-family
+    --recursica_ui-kit_components_switch-item_properties_text_font-family
   );
   font-size: var(
-    --recursica_ui-kit_components_switch_properties_label-text_font-size
+    --recursica_ui-kit_components_switch-item_properties_text_font-size
   );
   font-weight: var(
-    --recursica_ui-kit_components_switch_properties_label-text_font-weight
+    --recursica_ui-kit_components_switch-item_properties_text_font-weight
   );
   font-style: var(
-    --recursica_ui-kit_components_switch_properties_label-text_font-style
+    --recursica_ui-kit_components_switch-item_properties_text_font-style
   );
   line-height: var(
-    --recursica_ui-kit_components_switch_properties_label-text_line-height
+    --recursica_ui-kit_components_switch-item_properties_text_line-height
   );
   letter-spacing: var(
-    --recursica_ui-kit_components_switch_properties_label-text_letter-spacing
+    --recursica_ui-kit_components_switch-item_properties_text_letter-spacing
   );
   text-transform: var(
-    --recursica_ui-kit_components_switch_properties_label-text_text-transform
+    --recursica_ui-kit_components_switch-item_properties_text_text-transform
   );
   text-decoration: var(
-    --recursica_ui-kit_components_switch_properties_label-text_text-decoration
+    --recursica_ui-kit_components_switch-item_properties_text_text-decoration
   );
+  color: var(--recursica_ui-kit_components_switch-item_properties_colors_text);
   cursor: inherit;
 }
 
+.root:has(input:disabled) .label {
+  color: var(
+    --recursica_ui-kit_components_switch-item_properties_colors_disabled-text
+  );
+}
+
 .thumbIconWrapper {
   display: flex;
   align-items: center;
@@ -152,8 +161,8 @@
 
 .checkIcon,
 .closeIcon {
-  width: 10px;
-  height: 10px;
+  width: var(--recursica_ui-kit_components_switch_properties_thumb-icon-size);
+  height: var(--recursica_ui-kit_components_switch_properties_thumb-icon-size);
   position: absolute;
   transition:
     opacity 150ms ease,
@@ -165,7 +174,7 @@
   opacity: 0;
   transform: scale(0.5);
   color: var(
-    --recursica_ui-kit_components_switch_properties_colors_track-selected
+    --recursica_ui-kit_components_switch_properties_colors_icon-selected
   );
 }
 
@@ -173,7 +182,7 @@
   opacity: 1;
   transform: scale(1);
   color: var(
-    --recursica_ui-kit_components_switch_properties_colors_track-unselected
+    --recursica_ui-kit_components_switch_properties_colors_icon-unselected
   );
 }
 
@@ -188,12 +197,42 @@
   transform: scale(0.5);
 }
 
+/* --- GROUP STYLES --- */
 .groupRoot {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
+  padding: var(--recursica_ui-kit_components_switch-group_properties_padding);
+  gap: var(--recursica_ui-kit_components_switch-group_properties_item-gap);
+}
+
+/* SideBySide Variant */
+.groupRoot[data-layout="side-by-side"] {
+  flex-direction: column;
   gap: var(
-    --recursica_ui-kit_components_switch_properties_label-switch-gap,
-    16px
+    --recursica_ui-kit_components_switch-group_variants_layouts_side-by-side_properties_gutter
+  );
+  padding-top: var(
+    --recursica_ui-kit_components_switch-group_variants_layouts_side-by-side_properties_vertical-padding
+  );
+  padding-bottom: var(
+    --recursica_ui-kit_components_switch-group_variants_layouts_side-by-side_properties_vertical-padding
+  );
+  margin-top: var(
+    --recursica_ui-kit_components_switch-group_variants_layouts_side-by-side_properties_top-bottom-margin
+  );
+  margin-bottom: var(
+    --recursica_ui-kit_components_switch-group_variants_layouts_side-by-side_properties_top-bottom-margin
+  );
+}
+
+/* Stacked Variant */
+.groupRoot[data-layout="stacked"] {
+  flex-direction: column;
+  margin-top: var(
+    --recursica_ui-kit_components_switch-group_variants_layouts_stacked_properties_label-field-gap
+  );
+  margin-bottom: var(
+    --recursica_ui-kit_components_switch-group_variants_layouts_stacked_properties_top-bottom-margin
   );
 }

package/src/components/Switch/Switch.stories.tsx

@@ -28,6 +28,9 @@ To render a standard switch:
     checked: {
       control: "boolean",
     },
+    disabled: {
+      control: "boolean",
+    },
     required: {
       control: "boolean",
     },

package/src/components/Switch/Switch.tsx

@@ -142,6 +142,7 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
         className={finalClass}
         classNames={mergedClassNames}
         disabled={readOnly || disabled}
+        data-disabled={readOnly || disabled || undefined}
         thumbIcon={thumbIcon ?? FinalThumbIcon}
         {...(sanitizedProps as unknown as MantineSwitchProps)}
       />

package/src/components/Switch/SwitchGroup.tsx

@@ -65,7 +65,7 @@ export const SwitchGroup = forwardRef<HTMLDivElement, SwitchGroupProps>(
       <WithReadOnlyWrapper
         className={className}
         style={style as React.CSSProperties}
-        controlMaxWidth="var(--recursica_ui-kit_components_switch_properties_max-width)"
+        controlMaxWidth="var(--recursica_ui-kit_components_switch-item_properties_label-max-width)"
         controlMinWidth={undefined}
         overStyled={overStyled as true}
         labelElement="div" // Strictly override. ARIA grouping prohibits interactive switches nested natively inside <label>.
@@ -98,15 +98,8 @@ export const SwitchGroup = forwardRef<HTMLDivElement, SwitchGroupProps>(
             value={value}
             defaultValue={defaultValue}
           >
-            <div className={styles.groupRoot}>
-              {React.Children.map(children, (child) => {
-                if (React.isValidElement(child)) {
-                  return React.cloneElement(child as React.ReactElement<any>, {
-                    disabled: readOnly || (child.props as any).disabled,
-                  });
-                }
-                return child;
-              })}
+            <div className={styles.groupRoot} data-layout={formLayout}>
+              {children}
             </div>
           </MantineSwitch.Group>
         }

package/src/components/Tabs/Tabs.module.css

@@ -35,6 +35,9 @@
   --tabs-vertical-padding: var(
     --recursica_ui-kit_components_tabs_variants_orientation_horizontal_properties_vertical-padding
   );
+  --tabs-content-alignment: var(
+    --recursica_ui-kit_components_tabs_variants_orientation_horizontal_properties_tab-content-alignment
+  );
 }
 
 .root[data-orientation="horizontal"] .list {
@@ -59,6 +62,9 @@
   --tabs-vertical-padding: var(
     --recursica_ui-kit_components_tabs_variants_orientation_vertical_properties_vertical-padding
   );
+  --tabs-content-alignment: var(
+    --recursica_ui-kit_components_tabs_variants_orientation_vertical_properties_tab-content-alignment
+  );
 }
 
 .root[data-orientation="vertical"] .list {
@@ -85,17 +91,23 @@
   --tabs-color: var(
     --recursica_ui-kit_components_tabs_variants_styles_default_properties_active_colors_border-color
   ) !important;
+  --tabs-hover-color: var(
+    --recursica_ui-kit_components_tabs_variants_styles_default_properties_hover-color
+  );
+  --tabs-hover-opacity: var(
+    --recursica_ui-kit_components_tabs_variants_styles_default_properties_hover-opacity
+  );
 }
 
 .root[data-variant="default"][data-orientation="horizontal"] .list {
   margin-bottom: var(
-    --recursica_ui-kit_components_tabs_variants_styles_default_orientation_horizontal_properties_tabs-content-gap
+    --recursica_ui-kit_components_tabs_variants_styles_default_variants_orientation_horizontal_properties_tabs-content-gap
   );
 }
 
 .root[data-variant="default"][data-orientation="vertical"] .list {
   margin-right: var(
-    --recursica_ui-kit_components_tabs_variants_styles_default_orientation_vertical_properties_tabs-content-gap
+    --recursica_ui-kit_components_tabs_variants_styles_default_variants_orientation_vertical_properties_tabs-content-gap
   );
 }
 
@@ -116,17 +128,23 @@
   --tabs-color: var(
     --recursica_ui-kit_components_tabs_variants_styles_outline_properties_active_colors_border-color
   ) !important;
+  --tabs-hover-color: var(
+    --recursica_ui-kit_components_tabs_variants_styles_outline_properties_hover-color
+  );
+  --tabs-hover-opacity: var(
+    --recursica_ui-kit_components_tabs_variants_styles_outline_properties_hover-opacity
+  );
 }
 
 .root[data-variant="outline"][data-orientation="horizontal"] .list {
   margin-bottom: var(
-    --recursica_ui-kit_components_tabs_variants_styles_outline_orientation_horizontal_properties_tabs-content-gap
+    --recursica_ui-kit_components_tabs_variants_styles_outline_variants_orientation_horizontal_properties_tabs-content-gap
   );
 }
 
 .root[data-variant="outline"][data-orientation="vertical"] .list {
   margin-right: var(
-    --recursica_ui-kit_components_tabs_variants_styles_outline_orientation_vertical_properties_tabs-content-gap
+    --recursica_ui-kit_components_tabs_variants_styles_outline_variants_orientation_vertical_properties_tabs-content-gap
   );
 }
 
@@ -141,17 +159,23 @@
   --tabs-border-radius: var(
     --recursica_ui-kit_components_tabs_variants_styles_pills_properties_border-radius
   );
+  --tabs-hover-color: var(
+    --recursica_ui-kit_components_tabs_variants_styles_pills_properties_hover-color
+  );
+  --tabs-hover-opacity: var(
+    --recursica_ui-kit_components_tabs_variants_styles_pills_properties_hover-opacity
+  );
 }
 
 .root[data-variant="pills"][data-orientation="horizontal"] .list {
   margin-bottom: var(
-    --recursica_ui-kit_components_tabs_variants_styles_pills_orientation_horizontal_properties_tabs-content-gap
+    --recursica_ui-kit_components_tabs_variants_styles_pills_variants_orientation_horizontal_properties_tabs-content-gap
   );
 }
 
 .root[data-variant="pills"][data-orientation="vertical"] .list {
   margin-right: var(
-    --recursica_ui-kit_components_tabs_variants_styles_pills_orientation_vertical_properties_tabs-content-gap
+    --recursica_ui-kit_components_tabs_variants_styles_pills_variants_orientation_vertical_properties_tabs-content-gap
   );
 }
 
@@ -165,8 +189,7 @@
   gap: var(--tabs-element-gap);
   display: flex;
   align-items: center;
-  /* Alignment can be mapped if defined */
-  justify-content: flex-start;
+  justify-content: var(--tabs-content-alignment);
   cursor: pointer;
   position: relative;
 
@@ -386,10 +409,8 @@
   position: absolute;
   inset: 0;
   border-radius: inherit;
-  background-color: var(
-    --recursica_ui-kit_components_tabs_properties_hover-color
-  );
-  opacity: var(--recursica_ui-kit_components_tabs_properties_hover-opacity);
+  background-color: var(--tabs-hover-color);
+  opacity: var(--tabs-hover-opacity);
   pointer-events: none;
   z-index: 0;
 }

package/src/components/TextArea/TextArea.module.css

@@ -1,3 +1,25 @@
+/* EXEMPTIONS:
+   - state-specific border-size variables are ignored because a uniform 1px border is applied globally to prevent 
+     unexpected layout shift or flickering during focus, disabled, or error state transitions. */
+/* recursica-ignore: --recursica_ui-kit_components_textarea_variants_states_default_properties_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_textarea_variants_states_disabled_properties_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_textarea_variants_states_error_properties_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_textarea_variants_states_focus_properties_border-size */
+
+/* LAYOUT SPACING OVERRIDES:
+   - Sets the --form-control-margin-bottom spacing hook to map component-specific layout tokens. */
+.layoutOverride {
+  --form-control-margin-bottom: var(
+    --recursica_ui-kit_components_textarea_variants_layouts_stacked_properties_top-bottom-margin
+  );
+}
+
+.layoutOverride[data-form-layout="side-by-side"] {
+  --form-control-margin-bottom: var(
+    --recursica_ui-kit_components_textarea_variants_layouts_side-by-side_properties_top-bottom-margin
+  );
+}
+
 /* HARDCODED VALUES:
    - border-width: 1px. Native geometric boundary for the input box.
    - border-style: solid. Native structural rendering rule.
@@ -9,29 +31,6 @@
   display: flex;
   position: relative;
   width: 100%;
-  min-height: var(
-    --recursica_ui-kit_components_text-field_properties_min-height
-  );
-
-  /* Override Mantine native Input variables governing section spacing padding mathematics safely */
-  --input-left-section-size: calc(
-    var(--recursica_ui-kit_components_text-field_properties_icon-size) +
-      (
-        var(
-            --recursica_ui-kit_components_text-field_properties_horizontal-padding
-          ) *
-          2
-      )
-  );
-  --input-right-section-size: calc(
-    var(--recursica_ui-kit_components_text-field_properties_icon-size) +
-      (
-        var(
-            --recursica_ui-kit_components_text-field_properties_horizontal-padding
-          ) *
-          2
-      )
-  );
 }
 
 .input {
@@ -40,63 +39,69 @@
   box-sizing: border-box;
   margin: 0;
 
-  /* Box Geometry */
-  min-height: var(
-    --recursica_ui-kit_components_text-field_properties_min-height
+  /* Sizing driven by rows token */
+  min-height: calc(
+    var(--recursica_ui-kit_components_textarea_properties_rows) *
+      var(--recursica_ui-kit_components_textarea_properties_text_line-height) +
+      2 *
+      var(--recursica_ui-kit_components_textarea_properties_vertical-padding) +
+      2px
   );
+
+  /* Box Geometry */
   padding-top: var(
-    --recursica_ui-kit_components_text-field_properties_vertical-padding
+    --recursica_ui-kit_components_textarea_properties_vertical-padding
   );
   padding-bottom: var(
-    --recursica_ui-kit_components_text-field_properties_vertical-padding
+    --recursica_ui-kit_components_textarea_properties_vertical-padding
   );
   padding-left: var(
-    --recursica_ui-kit_components_text-field_properties_horizontal-padding
+    --recursica_ui-kit_components_textarea_properties_horizontal-padding
   );
   padding-right: var(
-    --recursica_ui-kit_components_text-field_properties_horizontal-padding
+    --recursica_ui-kit_components_textarea_properties_horizontal-padding
   );
   border-radius: var(
-    --recursica_ui-kit_components_text-field_properties_border-radius
+    --recursica_ui-kit_components_textarea_properties_border-radius
   );
   border-width: 1px;
   border-style: solid;
 
   /* Strict Typography Unification */
   font-family: var(
-    --recursica_ui-kit_components_text-field_properties_text_font-family
+    --recursica_ui-kit_components_textarea_properties_text_font-family
   );
   font-size: var(
-    --recursica_ui-kit_components_text-field_properties_text_font-size
+    --recursica_ui-kit_components_textarea_properties_text_font-size
   );
   font-style: var(
-    --recursica_ui-kit_components_text-field_properties_text_font-style
+    --recursica_ui-kit_components_textarea_properties_text_font-style
   );
   font-weight: var(
-    --recursica_ui-kit_components_text-field_properties_text_font-weight
+    --recursica_ui-kit_components_textarea_properties_text_font-weight
   );
   letter-spacing: var(
-    --recursica_ui-kit_components_text-field_properties_text_letter-spacing
+    --recursica_ui-kit_components_textarea_properties_text_letter-spacing
   );
   line-height: var(
-    --recursica_ui-kit_components_text-field_properties_text_line-height
+    --recursica_ui-kit_components_textarea_properties_text_line-height
   );
   text-decoration: var(
-    --recursica_ui-kit_components_text-field_properties_text_text-decoration
+    --recursica_ui-kit_components_textarea_properties_text_text-decoration
   );
   text-transform: var(
-    --recursica_ui-kit_components_text-field_properties_text_text-transform
+    --recursica_ui-kit_components_textarea_properties_text_text-transform
   );
 
   /* Base State Default Execution */
   background-color: var(
-    --recursica_ui-kit_components_text-field_variants_states_default_properties_colors_background
+    --recursica_ui-kit_components_textarea_variants_states_default_properties_colors_background
   );
   border-color: var(
-    --recursica_ui-kit_components_text-field_variants_states_default_properties_colors_border-color
+    --recursica_ui-kit_components_textarea_variants_states_default_properties_colors_border-color
   );
   color: var(
-    --recursica_ui-kit_components_text-field_variants_states_default_properties_colors_text
+    --recursica_ui-kit_components_textarea_variants_states_default_properties_colors_text
   );
 
   outline: none;
@@ -104,119 +109,52 @@
 
 .input::placeholder {
   opacity: var(
-    --recursica_ui-kit_components_text-field_properties_placeholder-opacity
+    --recursica_ui-kit_components_textarea_properties_placeholder-opacity
   );
   color: inherit;
 }
 
-/* Dynamic Padding Overrides */
-.root[data-with-left-section] .input {
-  padding-left: var(--input-left-section-size);
-}
-
-.root[data-with-right-section] .input {
-  padding-right: var(--input-right-section-size);
-}
-
-/* Flexible End-Caps (Icons, actions) */
-.section {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-}
-
-.section :global(svg) {
-  width: var(--recursica_ui-kit_components_text-field_properties_icon-size);
-  height: var(--recursica_ui-kit_components_text-field_properties_icon-size);
-  color: var(
-    --recursica_ui-kit_components_text-field_variants_states_default_properties_colors_leading-icon
-  );
-}
-
-.section[data-position="right"] :global(svg) {
-  color: var(
-    --recursica_ui-kit_components_text-field_variants_states_default_properties_colors_trailing-icon
-  );
-}
-
 /* -------------------------------------
    STATE CASCADE ARCHITECTURE
 -------------------------------------- */
 
-/* Focus State Mapping (Triggered internally via browser pseudo-pseudo-class) */
+/* Focus State Mapping (Triggered internally via browser focus rules) */
 .input:focus-within,
 .input:focus {
   border-color: var(
-    --recursica_ui-kit_components_text-field_variants_states_focus_properties_colors_border-color
+    --recursica_ui-kit_components_textarea_variants_states_focus_properties_colors_border-color
   );
   background-color: var(
-    --recursica_ui-kit_components_text-field_variants_states_focus_properties_colors_background
+    --recursica_ui-kit_components_textarea_variants_states_focus_properties_colors_background
   );
   color: var(
-    --recursica_ui-kit_components_text-field_variants_states_focus_properties_colors_text
-  );
-}
-
-.root:focus-within .section[data-position="left"] :global(svg) {
-  color: var(
-    --recursica_ui-kit_components_text-field_variants_states_focus_properties_colors_leading-icon
-  );
-}
-
-.root:focus-within .section[data-position="right"] :global(svg) {
-  color: var(
-    --recursica_ui-kit_components_text-field_variants_states_focus_properties_colors_trailing-icon
+    --recursica_ui-kit_components_textarea_variants_states_focus_properties_colors_text
   );
 }
 
 /* Error State Mapping (Propagated strictly down from the wrapper DOM context) */
 .root[data-error] .input {
   border-color: var(
-    --recursica_ui-kit_components_text-field_variants_states_error_properties_colors_border-color
+    --recursica_ui-kit_components_textarea_variants_states_error_properties_colors_border-color
   ) !important;
   background-color: var(
-    --recursica_ui-kit_components_text-field_variants_states_error_properties_colors_background
-  ) !important;
-  color: var(
-    --recursica_ui-kit_components_text-field_variants_states_error_properties_colors_text
-  ) !important;
-}
-
-.root[data-error] .section[data-position="left"] :global(svg) {
-  color: var(
-    --recursica_ui-kit_components_text-field_variants_states_error_properties_colors_leading-icon
+    --recursica_ui-kit_components_textarea_variants_states_error_properties_colors_background
   ) !important;
-}
-
-.root[data-error] .section[data-position="right"] :global(svg) {
   color: var(
-    --recursica_ui-kit_components_text-field_variants_states_error_properties_colors_trailing-icon
+    --recursica_ui-kit_components_textarea_variants_states_error_properties_colors_text
   ) !important;
 }
 
 /* Disabled State Mapping (Propagated strictly down from the wrapper DOM context) */
 .root[data-disabled] .input {
   border-color: var(
-    --recursica_ui-kit_components_text-field_variants_states_disabled_properties_colors_border-color
+    --recursica_ui-kit_components_textarea_variants_states_disabled_properties_colors_border-color
   ) !important;
   background-color: var(
-    --recursica_ui-kit_components_text-field_variants_states_disabled_properties_colors_background
+    --recursica_ui-kit_components_textarea_variants_states_disabled_properties_colors_background
   ) !important;
   color: var(
-    --recursica_ui-kit_components_text-field_variants_states_disabled_properties_colors_text
+    --recursica_ui-kit_components_textarea_variants_states_disabled_properties_colors_text
   ) !important;
   cursor: not-allowed;
 }
-
-.root[data-disabled] .section[data-position="left"] :global(svg) {
-  color: var(
-    --recursica_ui-kit_components_text-field_variants_states_disabled_properties_colors_leading-icon
-  ) !important;
-}
-
-.root[data-disabled] .section[data-position="right"] :global(svg) {
-  color: var(
-    --recursica_ui-kit_components_text-field_variants_states_disabled_properties_colors_trailing-icon
-  ) !important;
-}

package/src/components/TextArea/TextArea.stories.tsx

@@ -26,6 +26,9 @@ const meta: Meta<TextAreaStoryProps> = {
     autosize: false,
   },
   argTypes: {
+    disabled: {
+      control: "boolean",
+    },
     ...formControlArgTypes,
     readOnly: {
       control: "boolean",

package/src/components/TextArea/TextArea.tsx

@@ -98,12 +98,16 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
         : styles.input;
     }
 
+    const wrapperClass = className
+      ? `${styles.layoutOverride} ${className}`
+      : styles.layoutOverride;
+
     return (
       <WithReadOnlyWrapper
-        className={className}
+        className={wrapperClass}
         style={style as React.CSSProperties}
-        controlMaxWidth="var(--recursica_ui-kit_components_text-field_properties_max-width)"
-        controlMinWidth="var(--recursica_ui-kit_components_text-field_properties_min-width)"
+        controlMaxWidth="var(--recursica_ui-kit_components_textarea_properties_max-width)"
+        controlMinWidth="var(--recursica_ui-kit_components_textarea_properties_min-width)"
         overStyled={overStyled as true}
         formLayout={formLayout}
         labelSize={labelSize}