@recursica/mantine-adapter 0.20.0 → 0.22.0

package/src/components/Checkbox/Checkbox.module.css

@@ -16,7 +16,7 @@
     0
   );
   margin: 0; /* HARDCODE: structural reset; consider token if layout needs change */
-  display: flex !important;
+  display: flex;
   flex-direction: column;
   gap: var(
     --recursica_ui-kit_components_checkbox-group_properties_item-gap,
@@ -68,53 +68,52 @@
 }
 
 .inner {
-  display: flex !important;
-  align-items: center !important;
-  justify-content: center !important;
-  margin: 0 !important; /* HARDCODE: structural reset */
-  width: var(--recursica_ui-kit_components_checkbox_properties_size) !important;
-  height: var(
-    --recursica_ui-kit_components_checkbox_properties_size
-  ) !important;
-  /* Mathematically syncs the physical input checkbox bounding block visually with the center of the text's first line natively. */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0; /* HARDCODE: structural reset */
+  width: var(--recursica_ui-kit_components_checkbox_properties_size);
+  height: var(--recursica_ui-kit_components_checkbox_properties_size);
+  /* Apply font-size to this element so that an 'em' based line-height token evaluates to the correct exact pixel value. */
+  font-size: var(
+    --recursica_ui-kit_components_checkbox-item_properties_text_font-size
+  );
+  /* Mathematically syncs the physical input checkbox bounding block visually with the center of the text's first line.
+     NOTE: Since the Figma line-height token resolves to an 'em' length (e.g. 1.05em), we CANNOT multiply it by font-size in CSS. 
+     Instead, it naturally evaluates to the correct height because we applied the font-size above. */
   margin-top: calc(
     (
         var(
             --recursica_ui-kit_components_checkbox-item_properties_text_line-height
-          ) *
-          var(
-            --recursica_ui-kit_components_checkbox-item_properties_text_font-size
           ) -
           var(--recursica_ui-kit_components_checkbox_properties_size)
       ) /
       2
-  ) !important;
+  );
 }
 
 /* Base explicit reset masking underlying framework defaults */
 .input {
   cursor: pointer; /* HARDCODE: core interaction behavior */
   appearance: none; /* HARDCODE: reset native widget */
-  box-sizing: border-box !important; /* HARDCODE: ensures size includes borders */
-  width: var(--recursica_ui-kit_components_checkbox_properties_size) !important;
-  height: var(
-    --recursica_ui-kit_components_checkbox_properties_size
-  ) !important;
+  box-sizing: border-box; /* HARDCODE: ensures size includes borders */
+  width: var(--recursica_ui-kit_components_checkbox_properties_size);
+  height: var(--recursica_ui-kit_components_checkbox_properties_size);
   border-radius: var(
     --recursica_ui-kit_components_checkbox_properties_border-radius
-  ) !important;
+  );
   border-width: var(
     --recursica_ui-kit_components_checkbox_properties_border-size
-  ) !important;
+  );
   border-style: solid; /* HARDCODE: normalize primitive border-style */
 
   /* Standard unchecked state */
   background-color: var(
     --recursica_ui-kit_components_checkbox_properties_colors_background-unchecked
-  ) !important;
+  );
   border-color: var(
     --recursica_ui-kit_components_checkbox_properties_colors_border-unchecked
-  ) !important;
+  );
   transition: all 0.2s ease; /* HARDCODE: consider global transition token */
 }
 
@@ -122,18 +121,18 @@
 .input:checked {
   background-color: var(
     --recursica_ui-kit_components_checkbox_properties_colors_background-checked
-  ) !important;
+  );
   border-color: var(
     --recursica_ui-kit_components_checkbox_properties_colors_border-checked
-  ) !important;
+  );
 }
 .input[data-indeterminate] {
   background-color: var(
     --recursica_ui-kit_components_checkbox_properties_colors_background-indeterminate
-  ) !important;
+  );
   border-color: var(
     --recursica_ui-kit_components_checkbox_properties_colors_border-indeterminate
-  ) !important;
+  );
 }
 
 /* Disabled State */
@@ -141,48 +140,44 @@
   cursor: not-allowed; /* HARDCODE: disabled state default */
   opacity: var(
     --recursica_ui-kit_components_checkbox_properties_disabled-opacity
-  ) !important;
+  );
   background-color: var(
     --recursica_ui-kit_components_checkbox_properties_colors_disabled-background
-  ) !important;
+  );
   border-color: var(
     --recursica_ui-kit_components_checkbox_properties_colors_disabled-border
-  ) !important;
+  );
 }
 
 .icon {
-  width: var(
-    --recursica_ui-kit_components_checkbox_properties_icon-size
-  ) !important;
-  height: var(
-    --recursica_ui-kit_components_checkbox_properties_icon-size
-  ) !important;
+  width: var(--recursica_ui-kit_components_checkbox_properties_icon-size);
+  height: var(--recursica_ui-kit_components_checkbox_properties_icon-size);
   color: var(
     --recursica_ui-kit_components_checkbox_properties_colors_icon-color
-  ) !important;
+  );
 }
 .input:disabled + .icon {
   color: var(
     --recursica_ui-kit_components_checkbox_properties_colors_disabled-icon
-  ) !important;
+  );
 }
 
 .labelWrapper {
-  padding: 0 !important; /* HARDCODE: structural layout reset */
-  margin: 0 !important; /* HARDCODE: structural layout reset */
+  padding: 0; /* HARDCODE: structural layout reset */
+  margin: 0; /* HARDCODE: structural layout reset */
   flex: 1;
   min-width: 0; /* HARDCODE: forces text wrap boundary in flex child */
 }
 
 .label {
   cursor: pointer; /* HARDCODE: interactive affordance */
-  padding: 0 !important; /* HARDCODE: reset layout */
-  margin: 0 !important; /* HARDCODE: reset layout */
+  padding: 0; /* HARDCODE: reset layout */
+  margin: 0; /* HARDCODE: reset layout */
   word-wrap: break-word;
   white-space: normal;
   color: var(
-    --recursica_ui-kit_components_checkbox-item_properties_text_color
-  ) !important;
+    --recursica_ui-kit_components_checkbox-item_properties_colors_text
+  );
   font-family: var(
     --recursica_ui-kit_components_checkbox-item_properties_text_font-family
   );
@@ -195,10 +190,43 @@
   line-height: var(
     --recursica_ui-kit_components_checkbox-item_properties_text_line-height
   );
+  font-style: var(
+    --recursica_ui-kit_components_checkbox-item_properties_text_font-style
+  );
+  letter-spacing: var(
+    --recursica_ui-kit_components_checkbox-item_properties_text_letter-spacing
+  );
+  text-decoration: var(
+    --recursica_ui-kit_components_checkbox-item_properties_text_text-decoration
+  );
+  text-transform: var(
+    --recursica_ui-kit_components_checkbox-item_properties_text_text-transform
+  );
 }
-.root[data-disabled] .label {
+.root:has(input:disabled) .label {
   cursor: not-allowed; /* HARDCODE: disabled interaction */
   opacity: var(
-    --recursica_ui-kit_components_checkbox_properties_disabled-opacity
+    --recursica_ui-kit_components_checkbox-item_properties_disabled-opacity
+  );
+  color: var(
+    --recursica_ui-kit_components_checkbox-item_properties_colors_disabled-text
+  );
+}
+
+/* CheckboxGroup Layouts */
+.groupRoot {
+  display: flex;
+}
+.groupRoot[data-layout="stacked"] {
+  flex-direction: column;
+  gap: var(
+    --recursica_ui-kit_components_checkbox-group_variants_layouts_stacked_properties_label-field-gap
+  );
+}
+.groupRoot[data-layout="side-by-side"] {
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: var(
+    --recursica_ui-kit_components_checkbox-group_variants_layouts_side-by-side_properties_gutter
   );
 }

package/src/components/Checkbox/Checkbox.stories.tsx

@@ -24,6 +24,9 @@ To render a solitary component natively:
     },
   },
   argTypes: {
+    disabled: {
+      control: "boolean",
+    },
     readOnly: {
       control: "boolean",
       description:

package/src/components/Checkbox/CheckboxGroup.tsx

@@ -100,15 +100,7 @@ export const CheckboxGroup = forwardRef<HTMLDivElement, CheckboxGroupProps>(
             defaultValue={defaultValue}
           >
             <div className={styles.groupRoot} data-layout={formLayout}>
-              {/* If the exact group is read-only natively, we inject disabled hooks dynamically over children? Mantine handles native context directly! */}
-              {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;
-              })}
+              {children}
             </div>
           </MantineCheckbox.Group>
         }

package/src/components/Chip/Chip.module.css

@@ -1,3 +1,18 @@
+/* EXEMPTIONS:
+   - close-icon-color, leading-icon-color, and select-specific state icon variables are ignored because 
+     Chip uses explicit state color definitions (e.g. unselected, selected, error, error-selected variant colors) 
+     to drive pixel-perfect hover and click transitions, rather than generic single-color overrides.
+   - text-size is ignored since actual chip sizing is dynamically driven by precise vertical padding and line-heights. */
+/* recursica-ignore: --recursica_ui-kit_components_chip_properties_close-icon-color */
+/* recursica-ignore: --recursica_ui-kit_components_chip_properties_leading-icon-color */
+/* recursica-ignore: --recursica_ui-kit_components_chip_properties_text-size */
+/* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_error_properties_colors_leading-icon-color */
+/* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_error_properties_colors_selected-icon-color */
+/* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_error-selected_properties_colors_icon */
+/* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_error-selected_properties_colors_leading-icon-color */
+/* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_selected_properties_colors_leading-icon-color */
+/* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_unselected_properties_colors_selected-icon-color */
+
 /* HARDCODED VALUES
    border-style: solid;  (Baseline reset)
    box-sizing: border-box; (Baseline reset)
@@ -6,7 +21,7 @@
    outline: none; (Accessible fallback)
    padding: 0; (Override mantine default)
    background: transparent; (Override mantine default)
-*/
+ */
 
 .root {
   /* Set preset layout variables to override mantine defaults safely */
@@ -58,6 +73,9 @@
   font-weight: var(
     --recursica_ui-kit_components_chip_properties_text_font-weight
   );
+  font-style: var(
+    --recursica_ui-kit_components_chip_properties_text_font-style
+  );
   letter-spacing: var(
     --recursica_ui-kit_components_chip_properties_text_letter-spacing
   );

package/src/components/DatePicker/DatePicker.module.css

@@ -0,0 +1,45 @@
+/*
+ * EXEMPTIONS:
+ * - DatePicker is a "Coming Soon" stub component.
+ * - It renders a placeholder and has no active implementation or CSS stylesheet yet.
+ * - The following tokens generated by Figma are ignored until the component is fully built.
+ */
+
+/* recursica-ignore: --recursica_ui-kit_components_date-picker_properties_border-radius */
+/* recursica-ignore: --recursica_ui-kit_components_date-picker_properties_horizontal-padding */
+/* recursica-ignore: --recursica_ui-kit_components_date-picker_properties_icon-size */
+/* recursica-ignore: --recursica_ui-kit_components_date-picker_properties_icon-text-gap */
+/* recursica-ignore: --recursica_ui-kit_components_date-picker_properties_min-height */
+/* recursica-ignore: --recursica_ui-kit_components_date-picker_properties_placeholder-opacity */
+/* recursica-ignore: --recursica_ui-kit_components_date-picker_properties_text_font-family */
+/* recursica-ignore: --recursica_ui-kit_components_date-picker_properties_text_font-size */
+/* recursica-ignore: --recursica_ui-kit_components_date-picker_properties_text_font-style */
+/* recursica-ignore: --recursica_ui-kit_components_date-picker_properties_text_font-weight */
+/* recursica-ignore: --recursica_ui-kit_components_date-picker_properties_text_letter-spacing */
+/* recursica-ignore: --recursica_ui-kit_components_date-picker_properties_text_line-height */
+/* recursica-ignore: --recursica_ui-kit_components_date-picker_properties_text_text-decoration */
+/* recursica-ignore: --recursica_ui-kit_components_date-picker_properties_text_text-transform */
+/* recursica-ignore: --recursica_ui-kit_components_date-picker_properties_vertical-padding */
+/* recursica-ignore: --recursica_ui-kit_components_date-picker_properties_width */
+/* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_layouts_side-by-side_properties_top-bottom-margin */
+/* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_layouts_stacked_properties_top-bottom-margin */
+/* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_default_properties_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_disabled_properties_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_error_properties_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_focus_properties_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_default_properties_colors_background */
+/* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_default_properties_colors_border-color */
+/* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_default_properties_colors_leading-icon */
+/* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_default_properties_colors_text */
+/* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_disabled_properties_colors_background */
+/* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_disabled_properties_colors_border-color */
+/* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_disabled_properties_colors_leading-icon */
+/* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_disabled_properties_colors_text */
+/* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_error_properties_colors_background */
+/* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_error_properties_colors_border-color */
+/* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_error_properties_colors_leading-icon */
+/* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_error_properties_colors_text */
+/* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_focus_properties_colors_background */
+/* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_focus_properties_colors_border-color */
+/* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_focus_properties_colors_leading-icon */
+/* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_focus_properties_colors_text */

package/src/components/Dropdown/Dropdown.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_dropdown_variants_states_default_properties_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_disabled_properties_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_error_properties_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_dropdown_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_dropdown_variants_layouts_stacked_properties_top-bottom-margin
+  );
+}
+
+.layoutOverride[data-form-layout="side-by-side"] {
+  --form-control-margin-bottom: var(
+    --recursica_ui-kit_components_dropdown_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.
@@ -14,22 +36,14 @@
 
   /* Override Mantine native Input variables governing section spacing padding mathematics safely */
   --input-left-section-size: calc(
-    var(--recursica_ui-kit_components_dropdown_properties_icon-size) +
-      (
-        var(
-            --recursica_ui-kit_components_dropdown_properties_horizontal-padding
-          ) *
-          2
-      )
+    var(--recursica_ui-kit_components_dropdown_properties_horizontal-padding) +
+      var(--recursica_ui-kit_components_dropdown_properties_icon-size) +
+      var(--recursica_ui-kit_components_dropdown_properties_icon-text-gap)
   );
   --input-right-section-size: calc(
-    var(--recursica_ui-kit_components_dropdown_properties_icon-size) +
-      (
-        var(
-            --recursica_ui-kit_components_dropdown_properties_horizontal-padding
-          ) *
-          2
-      )
+    var(--recursica_ui-kit_components_dropdown_properties_horizontal-padding) +
+      var(--recursica_ui-kit_components_dropdown_properties_icon-size) +
+      var(--recursica_ui-kit_components_dropdown_properties_icon-text-gap)
   );
 }
 
@@ -118,10 +132,23 @@
 .section {
   display: flex;
   align-items: center;
-  justify-content: center;
   height: 100%;
 }
 
+.section[data-position="left"] {
+  justify-content: flex-start;
+  padding-left: var(
+    --recursica_ui-kit_components_dropdown_properties_horizontal-padding
+  );
+}
+
+.section[data-position="right"] {
+  justify-content: flex-end;
+  padding-right: var(
+    --recursica_ui-kit_components_dropdown_properties_horizontal-padding
+  );
+}
+
 .section :global(svg) {
   width: var(--recursica_ui-kit_components_dropdown_properties_icon-size);
   height: var(--recursica_ui-kit_components_dropdown_properties_icon-size);

package/src/components/Dropdown/Dropdown.stories.tsx

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

package/src/components/Dropdown/Dropdown.tsx

@@ -113,9 +113,13 @@ export const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
       width: containerWidth || "100%",
     };
 
+    const wrapperClass = className
+      ? `${styles.layoutOverride} ${className}`
+      : styles.layoutOverride;
+
     return (
       <WithReadOnlyWrapper
-        className={className}
+        className={wrapperClass}
         style={injectedStyles}
         controlMaxWidth="var(--recursica_ui-kit_components_dropdown_properties_max-width)"
         controlMinWidth="var(--recursica_ui-kit_components_dropdown_properties_min-width)"

package/src/components/FileInput/FileInput.module.css

@@ -0,0 +1,50 @@
+/*
+ * EXEMPTIONS:
+ * - FileInput is a "Coming Soon" stub component.
+ * - It renders a placeholder and has no active implementation or CSS stylesheet yet.
+ * - The following tokens generated by Figma are ignored until the component is fully built.
+ */
+
+/* recursica-ignore: --recursica_ui-kit_components_file-input_properties_border-radius */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_properties_horizontal-padding */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_properties_icon-size */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_properties_icon-text-gap */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_properties_max-width */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_properties_min-height */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_properties_min-width */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_properties_placeholder-opacity */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_properties_text_font-family */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_properties_text_font-size */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_properties_text_font-style */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_properties_text_font-weight */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_properties_text_letter-spacing */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_properties_text_line-height */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_properties_text_text-decoration */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_properties_text_text-transform */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_properties_vertical-padding */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_layouts_side-by-side_properties_top-bottom-margin */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_layouts_stacked_properties_top-bottom-margin */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_default_properties_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_disabled_properties_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_error_properties_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_focus_properties_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_default_properties_colors_background */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_default_properties_colors_border-color */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_default_properties_colors_leading-icon */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_default_properties_colors_text */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_default_properties_colors_trailing-icon */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_disabled_properties_colors_background */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_disabled_properties_colors_border-color */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_disabled_properties_colors_leading-icon */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_disabled_properties_colors_text */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_disabled_properties_colors_trailing-icon */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_error_properties_colors_background */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_error_properties_colors_border-color */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_error_properties_colors_leading-icon */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_error_properties_colors_text */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_error_properties_colors_trailing-icon */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_focus_properties_colors_background */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_focus_properties_colors_border-color */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_focus_properties_colors_leading-icon */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_focus_properties_colors_text */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_focus_properties_colors_trailing-icon */

package/src/components/FileUpload/FileUpload.module.css

@@ -0,0 +1,43 @@
+/*
+ * EXEMPTIONS:
+ * - FileUpload is a "Coming Soon" stub component.
+ * - It renders a placeholder and has no active implementation or CSS stylesheet yet.
+ * - The following tokens generated by Figma are ignored until the component is fully built.
+ */
+
+/* recursica-ignore: --recursica_ui-kit_components_file-upload_properties_border-radius */
+/* recursica-ignore: --recursica_ui-kit_components_file-upload_properties_border-style */
+/* recursica-ignore: --recursica_ui-kit_components_file-upload_properties_item-gap */
+/* recursica-ignore: --recursica_ui-kit_components_file-upload_properties_list-spacing */
+/* recursica-ignore: --recursica_ui-kit_components_file-upload_properties_padding */
+/* recursica-ignore: --recursica_ui-kit_components_file-upload_properties_text_font-family */
+/* recursica-ignore: --recursica_ui-kit_components_file-upload_properties_text_font-size */
+/* recursica-ignore: --recursica_ui-kit_components_file-upload_properties_text_font-style */
+/* recursica-ignore: --recursica_ui-kit_components_file-upload_properties_text_font-weight */
+/* recursica-ignore: --recursica_ui-kit_components_file-upload_properties_text_letter-spacing */
+/* recursica-ignore: --recursica_ui-kit_components_file-upload_properties_text_line-height */
+/* recursica-ignore: --recursica_ui-kit_components_file-upload_properties_text_text-decoration */
+/* recursica-ignore: --recursica_ui-kit_components_file-upload_properties_text_text-transform */
+/* recursica-ignore: --recursica_ui-kit_components_file-upload_properties_vertical-element-gap */
+/* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_layouts_side-by-side_properties_top-bottom-margin */
+/* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_layouts_stacked_properties_top-bottom-margin */
+/* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_states_default_properties_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_states_disabled_properties_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_states_error_properties_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_states_focus_properties_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_states_default_properties_colors_background */
+/* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_states_default_properties_colors_border-color */
+/* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_states_default_properties_colors_text */
+/* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_states_default_properties_colors_upload-icon */
+/* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_states_disabled_properties_colors_background */
+/* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_states_disabled_properties_colors_border-color */
+/* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_states_disabled_properties_colors_text */
+/* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_states_disabled_properties_colors_upload-icon */
+/* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_states_error_properties_colors_background */
+/* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_states_error_properties_colors_border-color */
+/* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_states_error_properties_colors_text */
+/* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_states_error_properties_colors_upload-icon */
+/* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_states_focus_properties_colors_background */
+/* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_states_focus_properties_colors_border-color */
+/* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_states_focus_properties_colors_text */
+/* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_states_focus_properties_colors_upload-icon */

package/src/components/FormControlLayout/FormControlLayout.module.css

@@ -3,6 +3,10 @@
 .root {
   display: flex;
   margin: 0; /* Hardcoded structural reset */
+  margin-bottom: var(
+    --form-control-margin-bottom,
+    var(--recursica_ui-kit_globals_form_properties_vertical-item-gap, 0)
+  );
   padding: 0; /* Hardcoded structural reset */
   max-width: var(--form-control-max-width, 100%);
   min-width: var(--form-control-min-width, auto);
@@ -31,7 +35,10 @@
 .root[data-form-layout="stacked"] .leftSection {
   padding-bottom: var(
     --recursica_ui-kit_components_label_variants_layouts_stacked_properties_bottom-padding,
-    8px
+    var(
+      --recursica_ui-kit_globals_form_properties_label-field-gap-vertical,
+      8px
+    )
   );
   min-height: var(
     --recursica_ui-kit_components_label_variants_layouts_stacked_properties_min-height,
@@ -56,7 +63,10 @@
   /* In side-by-side, the label column exists to the left of its input, so we use the gutter gap here. */
   margin-right: var(
     --recursica_ui-kit_components_label_variants_layouts_side-by-side_properties_gutter,
-    16px
+    var(
+      --recursica_ui-kit_globals_form_properties_label-field-gap-horizontal,
+      16px
+    )
   );
 }
 

package/src/components/FormControlWrapper/FormControlWrapper.module.css

@@ -1,5 +1,71 @@
 /* FormControlWrapper.module.css */
 
+.root {
+  /* Global Form Field Colors */
+  --form-field-background: var(
+    --recursica_ui-kit_globals_form_field_colors_background
+  );
+  --form-field-background-read-only: var(
+    --recursica_ui-kit_globals_form_field_colors_background-read-only
+  );
+  --form-field-border: var(--recursica_ui-kit_globals_form_field_colors_border);
+  --form-field-border-error: var(
+    --recursica_ui-kit_globals_form_field_colors_border-error
+  );
+  --form-field-border-focus: var(
+    --recursica_ui-kit_globals_form_field_colors_border-focus
+  );
+  --form-field-border-selected: var(
+    --recursica_ui-kit_globals_form_field_colors_border-selected
+  );
+  --form-field-disabled-background: var(
+    --recursica_ui-kit_globals_form_field_colors_disabled-background
+  );
+  --form-field-disabled-text: var(
+    --recursica_ui-kit_globals_form_field_colors_disabled-text
+  );
+  --form-field-icon: var(--recursica_ui-kit_globals_form_field_colors_icon);
+  --form-field-placeholder-text-opacity: var(
+    --recursica_ui-kit_globals_form_field_colors_placeholder-text-opacity
+  );
+  --form-field-text-valued: var(
+    --recursica_ui-kit_globals_form_field_colors_text-valued
+  );
+
+  /* Global Form Field Geometric Sizes */
+  --form-field-border-radius: var(
+    --recursica_ui-kit_globals_form_field_size_border-radius
+  );
+  --form-field-border-size-default: var(
+    --recursica_ui-kit_globals_form_field_size_border-size-default
+  );
+  --form-field-border-size-focus: var(
+    --recursica_ui-kit_globals_form_field_size_border-size-focus
+  );
+  --form-field-horizontal-padding: var(
+    --recursica_ui-kit_globals_form_field_size_horizontal-padding
+  );
+  --form-field-icon-size: var(--recursica_ui-kit_globals_form_field_size_icon);
+  --form-field-icon-text-gap: var(
+    --recursica_ui-kit_globals_form_field_size_icon-text-gap
+  );
+  --form-field-max-width: var(
+    --recursica_ui-kit_globals_form_field_size_max-width
+  );
+  --form-field-min-width: var(
+    --recursica_ui-kit_globals_form_field_size_min-width
+  );
+  --form-field-single-line-input-height: var(
+    --recursica_ui-kit_globals_form_field_size_single-line-input-height
+  );
+  --form-field-vertical-gutter: var(
+    --recursica_ui-kit_globals_form_field_size_vertical-gutter
+  );
+  --form-field-vertical-padding: var(
+    --recursica_ui-kit_globals_form_field_size_vertical-padding
+  );
+}
+
 .inputSection {
   display: flex;
   flex-direction: column;