@recursica/mantine-adapter 0.23.0 → 0.26.0

package/src/components/Accordion/Accordion.tsx

@@ -12,8 +12,20 @@ import {
 } from "../../utils/filterStylingProps";
 import styles from "./Accordion.module.css";
 
+import {
+  type RecursicaAccordionProps,
+  type RecursicaAccordionItemProps,
+  type RecursicaAccordionControlProps,
+} from "@recursica/adapter-common";
+
 // ==== ACCORDION CONTAINER ====
-export type AccordionProps = RecursicaOverStyled<MantineAccordionProps>;
+export type AccordionProps = RecursicaOverStyled<
+  Omit<
+    MantineAccordionProps,
+    "value" | "defaultValue" | "onChange" | "multiple" | "variant"
+  > &
+    RecursicaAccordionProps
+>;
 
 const AccordionBase = function Accordion({
   variant = "unstyled",
@@ -63,29 +75,9 @@ const AccordionBase = function Accordion({
 };
 AccordionBase.displayName = "Accordion";
 
-// ==== ACCORDION ITEM ====
-// eslint-disable-next-line @typescript-eslint/no-empty-object-type
-export interface RecursicaAccordionItemProps
-  extends Omit<AccordionItemProps, "className"> {}
 // We need to omit and re-merge native props like in Badge
 export type AccordionItemWrapperProps = RecursicaOverStyled<
-  AccordionItemProps & {
-    /**
-     * When provided alongside `leftIcon` or independently, this auto-generates the Accordion Control and Panel DOM layers natively.
-     */
-    title?: React.ReactNode;
-
-    /**
-     * Leading icon explicitly mapped into the Mantine `Accordion.Control` leftSection boundary natively.
-     */
-    leftIcon?: React.ReactNode;
-
-    /**
-     * Toggles the presence of the bottom trailing divider native to AccordionItems.
-     * @default true
-     */
-    divider?: boolean;
-  }
+  AccordionItemProps & RecursicaAccordionItemProps
 >;
 
 export const AccordionItem = forwardRef<
@@ -127,12 +119,7 @@ AccordionItem.displayName = "AccordionItem";
 
 // ==== ACCORDION CONTROL ====
 export type AccordionControlWrapperProps = RecursicaOverStyled<
-  AccordionControlProps & {
-    /**
-     * Leading icon explicitly mapped into the Mantine `Accordion.Control` leftSection boundary natively.
-     */
-    leftIcon?: React.ReactNode;
-  }
+  AccordionControlProps & RecursicaAccordionControlProps
 >;
 
 export const AccordionControl = forwardRef<

package/src/components/AssistiveElement/AssistiveElement.tsx

@@ -5,12 +5,7 @@ import {
 } from "../../utils/filterStylingProps";
 import styles from "./AssistiveElement.module.css";
 
-export interface RecursicaAssistiveElementProps {
-  /** The semantic variant driving the icon and text colors natively mapped across the UI Kit tokens. */
-  assistiveVariant?: "help" | "error";
-  /** Explicitly toggle the rendering of the variant-specific SVG bounding box. */
-  assistiveWithIcon?: boolean;
-}
+import { type RecursicaAssistiveElementProps } from "@recursica/adapter-common";
 
 export type AssistiveElementProps = RecursicaOverStyled<
   React.HTMLAttributes<HTMLDivElement> & RecursicaAssistiveElementProps

package/src/components/AutoComplete/AutoComplete.tsx

@@ -13,6 +13,8 @@ import { type RecursicaFormControlWrapperProps } from "../FormControlWrapper/For
 import { WithReadOnlyWrapper } from "../ReadOnlyField/WithReadOnlyWrapper";
 import styles from "./AutoComplete.module.css";
 
+import { type RecursicaAutocompleteProps as BaseRecursicaAutocompleteProps } from "@recursica/adapter-common";
+
 export interface RecursicaAutoCompleteProps
   extends Omit<
       MantineAutocompleteProps,
@@ -26,7 +28,8 @@ export interface RecursicaAutoCompleteProps
       RecursicaFormControlWrapperProps,
       "controlMaxWidth" | "controlMinWidth"
     >,
-    ReadOnlyControlProps {}
+    ReadOnlyControlProps,
+    BaseRecursicaAutocompleteProps {}
 
 export type AutoCompleteProps = RecursicaOverStyled<RecursicaAutoCompleteProps>;
 

package/src/components/Avatar/Avatar.tsx

@@ -10,11 +10,7 @@ import {
 } from "../../utils/filterStylingProps";
 import styles from "./Avatar.module.css";
 
-export interface RecursicaAvatarProps {
-  size?: "small" | "default" | "large";
-  variant?: "solid" | "outline" | "ghost";
-  icon?: React.ReactNode;
-}
+import { type RecursicaAvatarProps } from "@recursica/adapter-common";
 
 export type AvatarProps = RecursicaOverStyled<
   Omit<MantineAvatarProps, "variant" | "size" | "color" | "radius"> &

package/src/components/Badge/Badge.tsx

@@ -10,10 +10,7 @@ import {
 } from "../../utils/filterStylingProps";
 import styles from "./Badge.module.css";
 
-export interface RecursicaBadgeProps {
-  /** Map to the component styles defined in variables */
-  variant?: "alert" | "primary-color" | "success" | "warning";
-}
+import { type RecursicaBadgeProps } from "@recursica/adapter-common";
 
 export type BadgeProps = RecursicaOverStyled<
   Omit<MantineBadgeProps, "variant" | "size" | "color" | "radius"> &

package/src/components/Breadcrumb/Breadcrumb.tsx

@@ -11,8 +11,7 @@ import styles from "./Breadcrumb.module.css";
 
 // Currently there are no Recursica prop additions specific to Breadcrumbs (like size or variant)
 // according to recursica_ui-kit.json
-// eslint-disable-next-line @typescript-eslint/no-empty-object-type
-export interface RecursicaBreadcrumbProps {}
+import { type RecursicaBreadcrumbProps } from "@recursica/adapter-common";
 
 export type BreadcrumbProps = RecursicaOverStyled<
   Omit<MantineBreadcrumbsProps, "variant" | "size"> & RecursicaBreadcrumbProps

package/src/components/Button/Button.module.css

@@ -31,9 +31,6 @@
   letter-spacing: var(
     --recursica_ui-kit_components_button_variants_sizes_default_properties_text_letter-spacing
   );
-  line-height: var(
-    --recursica_ui-kit_components_button_variants_sizes_default_properties_text_line-height
-  );
   text-decoration: var(
     --recursica_ui-kit_components_button_variants_sizes_default_properties_text_text-decoration
   );
@@ -68,7 +65,15 @@
   text-overflow: ellipsis;
   white-space: nowrap;
   font-size: inherit;
-  line-height: inherit;
+  line-height: var(
+    --recursica_ui-kit_components_button_variants_sizes_default_properties_text_line-height
+  );
+}
+
+.root[data-size="small"] .labelText {
+  line-height: var(
+    --recursica_ui-kit_components_button_variants_sizes_small_properties_text_line-height
+  );
 }
 
 /* ==== SIZES ==== */
@@ -184,52 +189,25 @@
 
   /* Override specific typography for small */
   font-family: var(
-    --recursica_ui-kit_components_button_variants_sizes_small_properties_text_font-family,
-    var(
-      --recursica_ui-kit_components_button_variants_sizes_default_properties_text_font-family
-    )
+    --recursica_ui-kit_components_button_variants_sizes_small_properties_text_font-family
   );
   font-size: var(
-    --recursica_ui-kit_components_button_variants_sizes_small_properties_text_font-size,
-    var(
-      --recursica_ui-kit_components_button_variants_sizes_default_properties_text_font-size
-    )
+    --recursica_ui-kit_components_button_variants_sizes_small_properties_text_font-size
   );
   font-weight: var(
-    --recursica_ui-kit_components_button_variants_sizes_small_properties_text_font-weight,
-    var(
-      --recursica_ui-kit_components_button_variants_sizes_default_properties_text_font-weight
-    )
+    --recursica_ui-kit_components_button_variants_sizes_small_properties_text_font-weight
   );
   font-style: var(
-    --recursica_ui-kit_components_button_variants_sizes_small_properties_text_font-style,
-    var(
-      --recursica_ui-kit_components_button_variants_sizes_default_properties_text_font-style
-    )
+    --recursica_ui-kit_components_button_variants_sizes_small_properties_text_font-style
   );
   letter-spacing: var(
-    --recursica_ui-kit_components_button_variants_sizes_small_properties_text_letter-spacing,
-    var(
-      --recursica_ui-kit_components_button_variants_sizes_default_properties_text_letter-spacing
-    )
-  );
-  line-height: var(
-    --recursica_ui-kit_components_button_variants_sizes_small_properties_text_line-height,
-    var(
-      --recursica_ui-kit_components_button_variants_sizes_default_properties_text_line-height
-    )
+    --recursica_ui-kit_components_button_variants_sizes_small_properties_text_letter-spacing
   );
   text-decoration: var(
-    --recursica_ui-kit_components_button_variants_sizes_small_properties_text_text-decoration,
-    var(
-      --recursica_ui-kit_components_button_variants_sizes_default_properties_text_text-decoration
-    )
+    --recursica_ui-kit_components_button_variants_sizes_small_properties_text_text-decoration
   );
   text-transform: var(
-    --recursica_ui-kit_components_button_variants_sizes_small_properties_text_text-transform,
-    var(
-      --recursica_ui-kit_components_button_variants_sizes_default_properties_text_text-transform
-    )
+    --recursica_ui-kit_components_button_variants_sizes_small_properties_text_text-transform
   );
 
   &[data-content="label"] {
@@ -340,17 +318,12 @@
 }
 .root[data-size="default"]:hover:not(:disabled)::after {
   opacity: var(
-    --recursica_ui-kit_components_button_variants_sizes_default_properties_hover-opacity,
-    0.1
+    --recursica_ui-kit_components_button_variants_sizes_default_properties_hover-opacity
   );
 }
 .root[data-size="small"]:hover:not(:disabled)::after {
   opacity: var(
-    --recursica_ui-kit_components_button_variants_sizes_small_properties_hover-opacity,
-    var(
-      --recursica_ui-kit_components_button_variants_sizes_default_properties_hover-opacity,
-      0.1
-    )
+    --recursica_ui-kit_components_button_variants_sizes_small_properties_hover-opacity
   );
 }
 /* ==== VARIANTS ==== */

package/src/components/Button/Button.tsx

@@ -1,6 +1,5 @@
 import React, { forwardRef } from "react";
 import { Loader } from "../Loader/Loader";
-import type { RecursicaLoaderProps } from "../Loader/Loader";
 import {
   Button as MantineButton,
   type ButtonProps as MantineButtonProps,
@@ -12,20 +11,7 @@ import {
 } from "../../utils/filterStylingProps";
 import styles from "./Button.module.css";
 
-export interface RecursicaButtonProps {
-  /** The visual style variant of the button */
-  variant?: "solid" | "outline" | "text";
-  /** The size of the button */
-  size?: "default" | "small";
-  /** An optional icon element to display to the left of the button text. Replaces Mantine's leftSection. */
-  icon?: React.ReactNode;
-  /** Which Recursica Loader variant to use */
-  loaderVariant?: RecursicaLoaderProps["variant"];
-  /** The size variant for the loader */
-  loaderSize?: RecursicaLoaderProps["size"];
-  /** Whether to use the Recursica loader or fallback to the Mantine loader */
-  useRecursicaLoader?: boolean;
-}
+import { type RecursicaButtonProps } from "@recursica/adapter-common";
 
 export type ButtonProps = RecursicaOverStyled<
   Omit<MantineButtonProps, "variant" | "size" | "leftSection" | "fullWidth"> &

package/src/components/Card/Card.tsx

@@ -11,8 +11,15 @@ import {
 } from "../../utils/filterStylingProps";
 import styles from "./Card.module.css";
 
+import {
+  type RecursicaCardProps,
+  type RecursicaCardSectionProps,
+} from "@recursica/adapter-common";
+
 // ==== CARD CONTAINER ====
-export type CardProps = RecursicaOverStyled<MantineCardProps>;
+export type CardProps = RecursicaOverStyled<
+  MantineCardProps & RecursicaCardProps
+>;
 
 /**
  * The root Card elevation box. It establishes the global background color, border radius, nested component gap, and outer shadow governed by the current `Layer` context.
@@ -57,11 +64,9 @@ const CardBase = forwardRef<HTMLDivElement, CardProps>(function Card(
 });
 CardBase.displayName = "Card";
 
-// ==== NATIVE MANTINE CARD.SECTION ====
-export type RecursicaCardSectionProps = MantineCardSectionProps & {
-  children?: React.ReactNode;
-};
-export type CardSectionProps = RecursicaOverStyled<RecursicaCardSectionProps>;
+export type CardSectionProps = RecursicaOverStyled<
+  MantineCardSectionProps & RecursicaCardSectionProps
+>;
 
 /**
  * A generalized edge-to-edge structural wrapper native to Mantine. Strips typical boundary padding via negative margins to allow content (like maps or header images) to touch the border seamlessly.

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

@@ -11,17 +11,11 @@
 
 /* --- GROUP STYLES --- */
 .groupRoot {
-  padding: var(
-    --recursica_ui-kit_components_checkbox-group_properties_padding,
-    0
-  );
+  padding: var(--recursica_ui-kit_components_checkbox-group_properties_padding);
   margin: 0; /* HARDCODE: structural reset; consider token if layout needs change */
   display: flex;
   flex-direction: column;
-  gap: var(
-    --recursica_ui-kit_components_checkbox-group_properties_item-gap,
-    16px
-  );
+  gap: var(--recursica_ui-kit_components_checkbox-group_properties_item-gap);
 }
 
 /* SideBySide Variant */
@@ -118,7 +112,8 @@
 }
 
 /* Checked/Indeterminate State */
-.input:checked {
+.input:checked,
+.inputChecked {
   background-color: var(
     --recursica_ui-kit_components_checkbox_properties_colors_background-checked
   );
@@ -126,7 +121,8 @@
     --recursica_ui-kit_components_checkbox_properties_colors_border-checked
   );
 }
-.input[data-indeterminate] {
+.input[data-indeterminate],
+.inputIndeterminate {
   background-color: var(
     --recursica_ui-kit_components_checkbox_properties_colors_background-indeterminate
   );

package/src/components/Checkbox/Checkbox.tsx

@@ -9,7 +9,10 @@ import {
   filterStylingProps,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
-import { type RequireAccessibleLabel } from "../../utils/RequireAccessibleLabel";
+import {
+  type RequireAccessibleLabel,
+  type RecursicaCheckboxProps,
+} from "@recursica/adapter-common";
 import {
   FormControlLayout,
   type FormControlLayoutProps,
@@ -17,19 +20,21 @@ import {
 
 import styles from "./Checkbox.module.css";
 
-export type RecursicaCheckboxProps = RequireAccessibleLabel<
-  Omit<
-    MantineCheckboxProps,
-    "size" | "color" | "radius" | "iconColor" | "variant"
-  > &
-    ReadOnlyControlProps &
-    Pick<
-      FormControlLayoutProps,
-      "formLayout" | "labelSize" | "controlMaxWidth" | "controlMinWidth"
-    >
->;
-
-export type CheckboxProps = RecursicaOverStyled<RecursicaCheckboxProps>;
+export type CheckboxWrapperProps = Omit<
+  MantineCheckboxProps,
+  "size" | "color" | "radius" | "iconColor" | "variant"
+> &
+  RecursicaCheckboxProps &
+  ReadOnlyControlProps &
+  Pick<
+    FormControlLayoutProps,
+    "formLayout" | "labelSize" | "controlMaxWidth" | "controlMinWidth"
+  >;
+
+export type RecursicaCheckboxPropsAlias =
+  RequireAccessibleLabel<CheckboxWrapperProps>;
+
+export type CheckboxProps = RecursicaOverStyled<RecursicaCheckboxPropsAlias>;
 
 type CheckboxComponent = React.ForwardRefExoticComponent<
   CheckboxProps & React.RefAttributes<HTMLInputElement>

package/src/components/Checkbox/CheckboxGroup.tsx

@@ -13,13 +13,16 @@ import { type RecursicaFormControlWrapperProps } from "../FormControlWrapper/For
 import { WithReadOnlyWrapper } from "../ReadOnlyField/WithReadOnlyWrapper";
 import styles from "./Checkbox.module.css";
 
+import { type RecursicaCheckboxGroupProps as BaseRecursicaCheckboxGroupProps } from "@recursica/adapter-common";
+
 export interface RecursicaCheckboxGroupProps
   extends Omit<MantineCheckboxGroupProps, "size" | "labelProps">,
     Omit<
       RecursicaFormControlWrapperProps,
       "controlMaxWidth" | "controlMinWidth"
     >,
-    ReadOnlyControlProps {}
+    ReadOnlyControlProps,
+    BaseRecursicaCheckboxGroupProps {}
 
 export type CheckboxGroupProps =
   RecursicaOverStyled<RecursicaCheckboxGroupProps>;

package/src/components/Chip/CHIP_IMPLEMENTATION_NOTES.md

@@ -14,7 +14,6 @@ Because the `.label` is the primary visual surface and handles Mantine's built-i
 
 ### Icon and Remove Implementations
 
-The Recursica specifications for the Chip component define `--chip-icon` and `--chip-close` which map to leading and trailing states.
 To achieve this without breaking Mantine's `Chip` input architecture, we wrapped the internal `children` using a standard `span` DOM strategy:
 
 ```tsx
@@ -25,6 +24,10 @@ To achieve this without breaking Mantine's `Chip` input architecture, we wrapped
 </span>
 ```
 
+#### Intermediate Children Wrapper Span display fix:
+
+Mantine internally wraps the children passed to `Chip` in a default `<span>` which has `display: inline`. This intermediate `span` inherits the `line-height` of the `.label` container, causing the computed height of the Chip to be ~2px taller than expected. To address this, `.label > span:not(.mantineIconWrapper)` is targeted to force `display: inline-flex; align-items: center;` on that intermediate wrapper `span`, allowing it to collapse perfectly to the `16px` height of the `innerWrapper`.
+
 ### Accessibility of Remove Action
 
 Because the Chip fundamentally functions as a `<label>` linked to an `<input>`, placing a raw interactive element like `<button>` directly inside the standard Chip sub-tree violates nested interactive element ARIA constraints in strict validators.

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

@@ -23,7 +23,7 @@
    background: transparent; (Override mantine default)
  */
 
-.root {
+.root.root {
   /* Set preset layout variables to override mantine defaults safely */
   box-sizing: border-box;
   display: inline-flex;
@@ -46,24 +46,30 @@
     --recursica_ui-kit_components_chip_variants_styles_unselected_properties_colors_close-icon-color
   );
 
-  border-radius: var(
+  /* Override Mantine's internal variables */
+  --chip-size: max-content;
+  --chip-radius: var(
     --recursica_ui-kit_components_chip_properties_border-radius
   );
+
+  cursor: pointer;
+  user-select: none;
+  overflow: hidden;
 }
 
 /* We target the mantine label directly because that is the visible container in Mantine's Chip */
-.label {
+.label.label {
   box-sizing: border-box;
   display: inline-flex;
   align-items: center;
   justify-content: center;
 
   /* Reset mantine styles */
-  background: transparent !important; /* HARDCODE: Mantine forces background styling on label */
+  background: transparent; /* HARDCODE: Mantine forces background styling on label */
   border-style: solid;
   border-width: var(--recursica_ui-kit_components_chip_properties_border-size);
   padding: var(--recursica_ui-kit_components_chip_properties_vertical-padding)
-    var(--recursica_ui-kit_components_chip_properties_horizontal-padding) !important;
+    var(--recursica_ui-kit_components_chip_properties_horizontal-padding);
 
   /* Typography */
   font-family: var(
@@ -90,21 +96,27 @@
   );
 
   /* Token evaluation */
-  background-color: var(--chip-bg) !important;
-  border-color: var(--chip-border) !important;
-  color: var(--chip-text) !important;
+  background-color: var(--chip-bg);
+  border-color: var(--chip-border);
+  color: var(--chip-text);
   min-width: var(--recursica_ui-kit_components_chip_properties_min-width);
   max-width: var(--recursica_ui-kit_components_chip_properties_max-width);
-  box-shadow: var(
-    --recursica_ui-kit_components_chip_properties_elevation,
-    none
-  );
+  box-shadow: var(--recursica_ui-kit_components_chip_properties_elevation);
 
   transition: all 0.2s ease;
 }
 
+.label.label > span:not(.mantineIconWrapper) {
+  display: inline-flex;
+  align-items: center;
+}
+
+.label.label:hover {
+  background-color: var(--chip-bg);
+}
+
 /* Default (Unselected) hover/active interactions (Mantine overrides) */
-.label[data-checked] {
+.label.label[data-checked] {
   --chip-bg: var(
     --recursica_ui-kit_components_chip_variants_styles_selected_properties_colors_background
   );
@@ -122,7 +134,7 @@
   );
 }
 
-.root[data-error] .label {
+.root[data-error] .label.label {
   --chip-bg: var(
     --recursica_ui-kit_components_chip_variants_styles_error_properties_colors_background
   );
@@ -140,7 +152,7 @@
   );
 }
 
-.root[data-error] .label[data-checked] {
+.root[data-error] .label.label[data-checked] {
   --chip-bg: var(
     --recursica_ui-kit_components_chip_variants_styles_error-selected_properties_colors_background
   );
@@ -158,20 +170,16 @@
   );
 }
 
-.root[data-disabled] .label {
-  opacity: var(--recursica_brand_states_disabled, 0.5);
+.root[data-disabled] .label.label {
+  opacity: var(--recursica_brand_states_disabled);
   cursor: not-allowed;
 }
 
 /* Override Mantine's built-in check icon colors and size if we keep it */
-.mantineIconWrapper {
-  color: var(--chip-icon) !important;
-  width: var(
-    --recursica_ui-kit_components_chip_properties_icon-size
-  ) !important;
-  height: var(
-    --recursica_ui-kit_components_chip_properties_icon-size
-  ) !important;
+.mantineIconWrapper.mantineIconWrapper {
+  color: var(--chip-icon);
+  width: var(--recursica_ui-kit_components_chip_properties_icon-size);
+  height: var(--recursica_ui-kit_components_chip_properties_icon-size);
   margin-right: var(
     --recursica_ui-kit_components_chip_properties_icon-text-gap
   );
@@ -226,11 +234,11 @@
   height: 100%;
 }
 
-.root[data-icon-only] .label {
+.root[data-icon-only] .label.label {
   padding-left: var(
     --recursica_ui-kit_components_chip_properties_vertical-padding
-  ) !important;
+  );
   padding-right: var(
     --recursica_ui-kit_components_chip_properties_vertical-padding
-  ) !important;
+  );
 }

package/src/components/Chip/Chip.tsx

@@ -8,20 +8,7 @@ import {
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
 import styles from "./Chip.module.css";
-
-export interface RecursicaChipProps {
-  /** Enables the error state styling */
-  error?: boolean;
-
-  /** Leading icon content */
-  icon?: React.ReactNode;
-
-  /** Called when the remove (X) icon is clicked. If provided, the remove icon will be displayed. */
-  onRemove?: (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void;
-
-  /** Screen reader label for the remove button. Defaults to 'Remove' */
-  removeLabel?: string;
-}
+import { type RecursicaChipProps } from "@recursica/adapter-common";
 
 export type ChipProps = RecursicaOverStyled<
   Omit<MantineChipProps, "variant" | "size" | "color" | "radius"> &
@@ -92,14 +79,20 @@ export const Chip = forwardRef<HTMLInputElement, ChipProps>(function Chip(
   // Determine state
   const dataError = error ? "" : undefined;
   const isIconOnly = !children && (!!icon || !!onRemove);
+  const isInteractive =
+    restRecord.checked !== undefined ||
+    restRecord.defaultChecked !== undefined ||
+    onRemove !== undefined ||
+    restRecord.onClick !== undefined;
 
   return (
     <MantineChip
       ref={ref}
       className={finalClass}
       classNames={mergedClassNames}
-      {...(dataError !== undefined ? { "data-error": "" } : {})}
+      wrapperProps={dataError !== undefined ? { "data-error": "" } : undefined}
       {...(isIconOnly ? { "data-icon-only": "" } : {})}
+      {...(!isInteractive ? { tabIndex: -1, "aria-hidden": true } : {})}
       {...sanitizedProps}
     >
       <span className={styles.innerWrapper}>

package/src/components/Container/Container.tsx

@@ -3,27 +3,9 @@ import {
   Container as MantineContainer,
   type ContainerProps as MantineContainerProps,
 } from "@mantine/core";
-import { type RecursicaSpacing } from "../../utils/filterStylingProps";
 import styles from "./Container.module.css";
 
-export interface RecursicaContainerProps {
-  /**
-   * Children components inside the layout container
-   */
-  children?: React.ReactNode;
-  /**
-   * Maximum width defined by Mantine system sizes or Recursica sizes
-   */
-  size?:
-    | "xs"
-    | "sm"
-    | "md"
-    | "lg"
-    | "xl"
-    | RecursicaSpacing
-    | (string & {})
-    | number;
-}
+import { type RecursicaContainerProps } from "@recursica/adapter-common";
 
 /**
  * Container layout wrapper.

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

@@ -30,7 +30,7 @@
 .root {
   display: flex;
   position: relative;
-  width: var(--recursica_ui-kit_components_date-picker_properties_width, 100%);
+  width: var(--recursica_ui-kit_components_date-picker_properties_width);
   min-height: var(
     --recursica_ui-kit_components_date-picker_properties_min-height
   );
@@ -272,7 +272,7 @@
   color: var(
     --recursica_ui-kit_components_hover-card-popover_properties_colors_content
   );
-  border-radius: var(--recursica_brand_dimensions_border-radii_default, 4px);
+  border-radius: var(--recursica_brand_dimensions_border-radii_default);
 }
 
 .day[data-selected],