@recursica/mui-adapter 0.6.0 → 0.7.0

package/src/components/Pagination/Pagination.tsx

@@ -1,36 +1,19 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import React, { forwardRef } from "react";
+import { forwardRef } from "react";
 import {
   Pagination as MuiPagination,
   type PaginationProps as MuiPaginationProps,
-  type PaginationRootProps as MuiPaginationRootProps,
 } from "@mui/material";
 import {
   filterStylingProps,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
 import styles from "./Pagination.module.css";
-import {
-  NextWithLabel,
-  PrevWithLabel,
-  FirstWithLabel,
-  LastWithLabel,
-  PaginationIcon,
-} from "./Pagination.icons";
-
-export type PaginationProps = RecursicaOverStyled<MuiPaginationProps> & {
-  /** If set to true, displays text labels alongside the icons for next/previous/first/last edges. */
-  withLabels?: boolean;
-};
 
-export type PaginationRootProps = RecursicaOverStyled<MuiPaginationRootProps>;
+import { type RecursicaPaginationProps } from "@recursica/adapter-common";
 
-export type PaginationEdgeProps<T extends React.ElementType> =
-  React.ComponentProps<T> & {
-    /** If set to true, displays text labels alongside the icon. */
-    withLabel?: boolean;
-    icon?: any;
-  };
+export type PaginationProps = RecursicaOverStyled<
+  MuiPaginationProps & RecursicaPaginationProps
+>;
 
 function usePaginationClassNames(restRecord: Record<string, unknown>): {
   className: string;
@@ -38,8 +21,7 @@ function usePaginationClassNames(restRecord: Record<string, unknown>): {
 } {
   const mergedClassNames: Partial<Record<string, string>> = {
     root: styles.root,
-    control: styles.control,
-    dots: styles.dots,
+    ul: styles.ul,
   };
 
   const classNamesProp = restRecord.classNames;
@@ -50,10 +32,7 @@ function usePaginationClassNames(restRecord: Record<string, unknown>): {
   ) {
     const o = classNamesProp as Partial<Record<string, string>>;
     mergedClassNames.root = o.root ? `${styles.root} ${o.root}` : styles.root;
-    mergedClassNames.control = o.control
-      ? `${styles.control} ${o.control}`
-      : styles.control;
-    mergedClassNames.dots = o.dots ? `${styles.dots} ${o.dots}` : styles.dots;
+    mergedClassNames.ul = o.ul ? `${styles.ul} ${o.ul}` : styles.ul;
   }
 
   const classNameProp = restRecord.className as string | undefined;
@@ -64,72 +43,14 @@ function usePaginationClassNames(restRecord: Record<string, unknown>): {
   return { className: finalClass, classNames: mergedClassNames };
 }
 
-const _PaginationRoot = forwardRef<HTMLDivElement, PaginationRootProps>(
-  function PaginationRoot({ overStyled = false, ...rest }, ref) {
-    const sanitizedProps = filterStylingProps(rest, overStyled);
-    const stylingParams = usePaginationClassNames(
-      sanitizedProps as Record<string, unknown>,
-    );
-
-    return (
-      <div
-        ref={ref}
-        className={stylingParams.className}
-        classes={stylingParams.classNames}
-        {...(sanitizedProps as MuiPaginationRootProps)}
-      />
-    );
-  },
-);
-_PaginationRoot.displayName = "Pagination.Root";
-
-const _PaginationNext = forwardRef<
-  HTMLButtonElement,
-  PaginationEdgeProps<typeof MuiPagination.Next>
->(function PaginationNext({ withLabel, icon, ...props }, ref) {
-  const renderIcon = icon || (withLabel ? NextWithLabel : undefined);
-  return (
-    <div ref={ref} data-variant="text" icon={renderIcon as any} {...props} />
-  );
-});
-_PaginationNext.displayName = "Pagination.Next";
-
-const _PaginationPrevious = forwardRef<
-  HTMLButtonElement,
-  PaginationEdgeProps<typeof MuiPagination.Previous>
->(function PaginationPrevious({ withLabel, icon, ...props }, ref) {
-  const renderIcon = icon || (withLabel ? PrevWithLabel : undefined);
-  return (
-    <div ref={ref} data-variant="text" icon={renderIcon as any} {...props} />
-  );
-});
-_PaginationPrevious.displayName = "Pagination.Previous";
-
-const _PaginationFirst = forwardRef<
-  HTMLButtonElement,
-  PaginationEdgeProps<typeof MuiPagination.First>
->(function PaginationFirst({ withLabel, icon, ...props }, ref) {
-  const renderIcon = icon || (withLabel ? FirstWithLabel : undefined);
-  return (
-    <div ref={ref} data-variant="text" icon={renderIcon as any} {...props} />
-  );
-});
-_PaginationFirst.displayName = "Pagination.First";
-
-const _PaginationLast = forwardRef<
-  HTMLButtonElement,
-  PaginationEdgeProps<typeof MuiPagination.Last>
->(function PaginationLast({ withLabel, icon, ...props }, ref) {
-  const renderIcon = icon || (withLabel ? LastWithLabel : undefined);
-  return (
-    <div ref={ref} data-variant="text" icon={renderIcon as any} {...props} />
-  );
-});
-_PaginationLast.displayName = "Pagination.Last";
-
 const _Pagination = forwardRef<HTMLDivElement, PaginationProps>(
   function Pagination(
-    { overStyled = false, getControlProps, withLabels, ...rest },
+    {
+      overStyled = false,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      withLabels,
+      ...rest
+    },
     ref,
   ) {
     const sanitizedProps = filterStylingProps(rest, overStyled);
@@ -137,34 +58,13 @@ const _Pagination = forwardRef<HTMLDivElement, PaginationProps>(
       sanitizedProps as Record<string, unknown>,
     );
 
-    const mergedGetControlProps = (
-      control: "first" | "previous" | "last" | "next",
-    ) => {
-      const baseProps = { "data-variant": "text" };
-      if (getControlProps) {
-        return { ...baseProps, ...getControlProps(control) };
-      }
-      return baseProps;
-    };
-
-    const labelsIcons = withLabels
-      ? {
-          nextIcon: NextWithLabel,
-          previousIcon: PrevWithLabel,
-          firstIcon: FirstWithLabel,
-          lastIcon: LastWithLabel,
-        }
-      : {};
-
     return (
-      <MuiPagination
-        ref={ref}
-        className={stylingParams.className}
-        classes={stylingParams.classNames}
-        getControlProps={mergedGetControlProps}
-        {...labelsIcons}
-        {...(sanitizedProps as MuiPaginationProps)}
-      />
+      <div ref={ref} className={stylingParams.className}>
+        <MuiPagination
+          classes={stylingParams.classNames}
+          {...(sanitizedProps as MuiPaginationProps)}
+        />
+      </div>
     );
   },
 );
@@ -173,24 +73,4 @@ _Pagination.displayName = "Pagination";
 /**
  * Recursica Pagination component wrapping Mui's Pagination.
  */
-export const Pagination = _Pagination as typeof _Pagination & {
-  Root: typeof _PaginationRoot;
-  Items: typeof MuiPagination.Items;
-  Control: typeof MuiPagination.Control;
-  Dots: typeof MuiPagination.Dots;
-  Next: typeof _PaginationNext;
-  Previous: typeof _PaginationPrevious;
-  First: typeof _PaginationFirst;
-  Last: typeof _PaginationLast;
-  Icon: typeof PaginationIcon;
-};
-
-Pagination.Root = _PaginationRoot;
-Pagination.Items = MuiPagination.Items;
-Pagination.Control = MuiPagination.Control;
-Pagination.Dots = MuiPagination.Dots;
-Pagination.Next = _PaginationNext;
-Pagination.Previous = _PaginationPrevious;
-Pagination.First = _PaginationFirst;
-Pagination.Last = _PaginationLast;
-Pagination.Icon = PaginationIcon;
+export const Pagination = _Pagination;

package/src/components/Panel/Panel.tsx

@@ -13,14 +13,7 @@ import styles from "./Panel.module.css";
 // PANEL (Drawer)
 // ============================================================
 
-export interface RecursicaPanelProps extends MuiDrawerProps {
-  /**
-   * If true, forces the header text to a single line and truncates with an ellipsis.
-   * Note: While the prop is named `wrapHeaderText` for backward compatibility,
-   * setting it to `true` actually PREVENTS wrapping (it forces truncation).
-   */
-  wrapHeaderText?: boolean;
-}
+import { type RecursicaPanelProps } from "@recursica/adapter-common";
 
 /**
  * Recursica Panel root props. Extends Mui Drawer.
@@ -59,7 +52,10 @@ const PanelBase = function Panel({
   keepMounted = true,
   wrapHeaderText = false,
   ...rest
-}: PanelProps) {
+}: PanelProps & {
+  position?: "left" | "right" | "top" | "bottom";
+  opened?: boolean;
+}) {
   const sanitizedProps = filterStylingProps(rest, overStyled);
 
   // Bind CSS module classes to Mui's internal classNames API
@@ -89,9 +85,9 @@ const PanelBase = function Panel({
 
   return (
     <MuiDrawer
-      position={position} /* Recursica default: right; Mui default: left */
+      anchor={position} /* Recursica default: right; Mui default: left */
       keepMounted={keepMounted}
-      closeOnClickOutside={rest.closeOnClickOutside ?? Boolean(rest.opened)}
+      open={Boolean(rest.opened)}
       {...(sanitizedProps as unknown as MuiDrawerProps)}
       classes={mergedClassNames}
     />
@@ -129,28 +125,9 @@ export const PanelFooter = forwardRef<HTMLDivElement, PanelFooterProps>(
 PanelFooter.displayName = "PanelFooter";
 
 // ============================================================
-// DOT NOTATION EXPORT
-// ============================================================
-
 type PanelComponent = typeof PanelBase & {
-  Root: typeof MuiDrawer.Root;
-  Overlay: typeof MuiDrawer.Overlay;
-  Content: typeof MuiDrawer.Content;
-  Header: typeof MuiDrawer.Header;
-  Title: typeof MuiDrawer.Title;
-  CloseButton: typeof MuiDrawer.CloseButton;
-  Body: typeof MuiDrawer.Body;
-  Stack: typeof MuiDrawer.Stack;
   Footer: typeof PanelFooter;
 };
 
 export const Panel = PanelBase as PanelComponent;
-Panel.Root = MuiDrawer.Root;
-Panel.Overlay = MuiDrawer.Overlay;
-Panel.Content = MuiDrawer.Content;
-Panel.Header = MuiDrawer.Header;
-Panel.Title = MuiDrawer.Title;
-Panel.CloseButton = MuiDrawer.CloseButton;
-Panel.Body = MuiDrawer.Body;
-Panel.Stack = MuiDrawer.Stack;
 Panel.Footer = PanelFooter;

package/src/components/Radio/Radio.module.css

@@ -12,15 +12,13 @@
 /* --- GROUP STYLES --- */
 .groupRoot {
   padding: var(
-    --recursica_ui-kit_components_radio-button-group_properties_padding,
-    0
+    --recursica_ui-kit_components_radio-button-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_radio-button-group_properties_item-gap,
-    16px
+    --recursica_ui-kit_components_radio-button-group_properties_item-gap
   );
 }
 
@@ -49,10 +47,7 @@
 .groupRoot[data-layout="stacked"] {
   flex-direction: column;
   margin-top: var(
-    --recursica_ui-kit_components_radio-button-group_variants_layouts_stacked_properties_label-field-gap,
-    var(
-      --recursica_ui-kit_components_radio-button-group_variants_layouts_stacked_properties_top-bottom-margin
-    )
+    --recursica_ui-kit_components_radio-button-group_variants_layouts_stacked_properties_label-field-gap
   );
   margin-bottom: var(
     --recursica_ui-kit_components_radio-button-group_variants_layouts_stacked_properties_top-bottom-margin
@@ -214,7 +209,27 @@
     --recursica_ui-kit_components_radio-button-item_properties_colors_disabled-text
   );
   opacity: var(
-    --recursica_ui-kit_components_radio-button-item_properties_disabled-opacity,
-    var(--recursica_ui-kit_components_radio-button_properties_disabled-opacity)
+    --recursica_ui-kit_components_radio-button-item_properties_disabled-opacity
+  );
+}
+
+.root .description {
+  margin-top: 5px; /* HARDCODE: mantine default */
+  color: #868e96; /* HARDCODE: mantine default dimmed */
+  font-size: 12px; /* HARDCODE: mantine default xs */
+  line-height: 1.2;
+}
+
+.root .error {
+  margin-top: 5px; /* HARDCODE: mantine default */
+  color: #fa5252; /* HARDCODE: mantine default error */
+  font-size: 12px; /* HARDCODE: mantine default xs */
+  line-height: 1.2;
+}
+
+.root .description[data-disabled="true"],
+.root .error[data-disabled="true"] {
+  opacity: var(
+    --recursica_ui-kit_components_radio-button-item_properties_disabled-opacity
   );
 }

package/src/components/Radio/Radio.tsx

@@ -2,7 +2,6 @@ import { forwardRef } from "react";
 import {
   Radio as MuiRadio,
   type RadioProps as MuiRadioProps,
-  FormControlLabel,
 } from "@mui/material";
 import { type ReadOnlyControlProps } from "@recursica/adapter-common";
 import { RadioGroup } from "./RadioGroup";
@@ -10,7 +9,10 @@ import {
   filterStylingProps,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
-import { type RequireAccessibleLabel } from "../../utils/RequireAccessibleLabel";
+import {
+  type RequireAccessibleLabel,
+  type RecursicaRadioProps,
+} from "@recursica/adapter-common";
 import {
   FormControlLayout,
   type FormControlLayoutProps,
@@ -33,16 +35,18 @@ const RadioIcon: React.FC<{
   </svg>
 );
 
-export type RecursicaRadioProps = RequireAccessibleLabel<
-  Omit<MuiRadioProps, "size" | "color"> &
-    ReadOnlyControlProps &
-    Pick<
-      FormControlLayoutProps,
-      "formLayout" | "labelSize" | "controlMaxWidth" | "controlMinWidth"
-    >
->;
+export type RadioWrapperProps = Omit<MuiRadioProps, "size" | "color"> &
+  RecursicaRadioProps &
+  ReadOnlyControlProps &
+  Pick<
+    FormControlLayoutProps,
+    "formLayout" | "labelSize" | "controlMaxWidth" | "controlMinWidth"
+  >;
+
+export type RecursicaRadioPropsAlias =
+  RequireAccessibleLabel<RadioWrapperProps>;
 
-export type RadioProps = RecursicaOverStyled<RecursicaRadioProps>;
+export type RadioProps = RecursicaOverStyled<RecursicaRadioPropsAlias>;
 
 type RadioComponent = React.ForwardRefExoticComponent<
   RadioProps & React.RefAttributes<HTMLInputElement>
@@ -61,6 +65,10 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>(
       labelSize,
       controlMaxWidth,
       controlMinWidth,
+      label,
+      description,
+      error,
+      style,
       ...rest
     } = props;
     const sanitizedProps = filterStylingProps(rest, overStyled);
@@ -139,7 +147,7 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>(
     // We omit Mui's sizing/coloring so we rely strictly on variables from Radio.module.css
     const radioNode = (
       <MuiRadio
-        ref={ref}
+        ref={ref as any}
         icon={<RadioIcon />}
         checkedIcon={<RadioIcon className={styles.checked} />}
         className={finalClass}
@@ -149,13 +157,37 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>(
       />
     );
 
-    const finalNode = restRecord.label ? (
-      <FormControlLabel
-        control={radioNode}
-        label={restRecord.label as React.ReactNode}
-        className={styles.labelWrapper}
-        classes={{ label: styles.label }}
-      />
+    const finalNode = label ? (
+      <div className={finalClass} style={style as React.CSSProperties}>
+        <div className={styles.body}>
+          {radioNode}
+          <div className={styles.labelWrapper}>
+            <label
+              className={styles.label}
+              htmlFor={restRecord.id as string}
+              data-disabled={readOnly || disabled ? true : undefined}
+            >
+              {label as React.ReactNode}
+            </label>
+            {description && (
+              <div
+                className={styles.description}
+                data-disabled={readOnly || disabled ? true : undefined}
+              >
+                {description}
+              </div>
+            )}
+            {error && (
+              <div
+                className={styles.error}
+                data-disabled={readOnly || disabled ? true : undefined}
+              >
+                {error}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
     ) : (
       radioNode
     );

package/src/components/Radio/RadioGroup.stories.tsx

@@ -0,0 +1,117 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Radio } from "./Radio";
+import { RadioGroup } from "./RadioGroup";
+import { useState } from "react";
+import { formControlArgTypes } from "../../../.storybook/commonArgTypes";
+
+const meta: Meta<typeof RadioGroup> = {
+  title: "UI-Kit/RadioGroup",
+  component: RadioGroup,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+The \`RadioGroup\` component is the mandatory organizational wrapper aggregating multiple \`Radio\` primitives into structurally bound unified selection arrays. It inherently leverages the \`FormControlWrapper\` granting native access to macroscopic layout structuring, assistive descriptions, and strict flex arrays.
+
+We exclusively utilize the \`formLayout\` parameter to control macro-level form flow:
+- **\`formLayout="stacked"\`**: Top-to-bottom layout cascading the Label bounding box down vertically into a standard stacked radio column array.
+- **\`formLayout="side-by-side"\`**: Flow architecture pulling the grouping Label dynamically to the left while structurally organizing the internal radios cleanly alongside it horizontally.
+`,
+      },
+    },
+  },
+  argTypes: {
+    ...formControlArgTypes,
+    readOnly: {
+      control: "boolean",
+      description:
+        "Toggles structural read-only data presentation bypassing interaction boundaries completely.",
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof RadioGroup>;
+
+export const Default: Story = {
+  args: {
+    formLayout: "stacked",
+    label: "Standard Group",
+  },
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
+  render: function StoryRender({ withLayer, layer, ...args }: any) {
+    const [value, setValue] = useState<string>("");
+    return (
+      <RadioGroup {...args} value={value} onChange={setValue}>
+        <Radio value="1" label="Option 1" />
+        <Radio value="2" label="Option 2" />
+      </RadioGroup>
+    );
+  },
+};
+
+export const StackedLayout: Story = {
+  args: {
+    formLayout: "stacked",
+    required: true,
+    label: "Hosting Provider",
+    error: "You must select a deployment provider.",
+  },
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
+  render: function StoryRender({ withLayer, layer, ...args }: any) {
+    const [value, setValue] = useState<string>("aws");
+    return (
+      <RadioGroup {...args} value={value} onChange={setValue}>
+        <Radio value="aws" label="Amazon Web Services" />
+        <Radio
+          value="gcp"
+          label="Google Cloud Platform (with completely distributed edge computing environments bridging local runtime boundaries seamlessly.)"
+        />
+        <Radio value="azure" label="Microsoft Azure" />
+      </RadioGroup>
+    );
+  },
+};
+
+export const SideBySideLayout: Story = {
+  args: {
+    formLayout: "side-by-side",
+    labelOptionalText: "Recommended",
+    labelWithEditIcon: true,
+    label: "Deployment Region",
+    assistiveText: "Select the data center closest to your user base.",
+  },
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
+  render: function StoryRender({ withLayer, layer, ...args }: any) {
+    const [value, setValue] = useState<string>("us-east");
+    return (
+      <RadioGroup {...args} value={value} onChange={setValue}>
+        <Radio value="us-east" label="US East (N. Virginia)" />
+        <Radio value="us-west" label="US West (Oregon)" />
+        <Radio value="eu-central" label="EU Central (Frankfurt)" />
+      </RadioGroup>
+    );
+  },
+};
+
+export const ReadOnly: Story = {
+  args: {
+    readOnly: true,
+    formLayout: "stacked",
+    required: true,
+    label: "Selected Framework",
+    assistiveText: "This selection cannot be changed after initialization.",
+  },
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
+  render: function StoryRender({ withLayer, layer, ...args }: any) {
+    const [value, setValue] = useState<string>("react");
+    return (
+      <RadioGroup {...args} value={value} onChange={setValue}>
+        <Radio value="react" label="React" />
+        <Radio value="vue" label="Vue" />
+      </RadioGroup>
+    );
+  },
+};

package/src/components/Radio/RadioGroup.tsx

@@ -1,7 +1,6 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import React, { forwardRef } from "react";
 import {
-  Radio as MuiRadio,
+  // Removed unused Radio import
   RadioGroup as MuiRadioGroup,
   type RadioGroupProps as MuiRadioGroupProps,
 } from "@mui/material";
@@ -14,13 +13,29 @@ import { type RecursicaFormControlWrapperProps } from "../FormControlWrapper/For
 import { WithReadOnlyWrapper } from "../ReadOnlyField/WithReadOnlyWrapper";
 import styles from "./Radio.module.css";
 
+import { type RecursicaRadioGroupProps as BaseRecursicaRadioGroupProps } from "@recursica/adapter-common";
+
 export interface RecursicaRadioGroupProps
-  extends Omit<MuiRadioGroupProps, "size" | "labelProps">,
+  extends Omit<
+      MuiRadioGroupProps,
+      | "size"
+      | "labelProps"
+      | "classes"
+      | "ref"
+      | "onChange"
+      | "value"
+      | "defaultValue"
+    >,
     Omit<
       RecursicaFormControlWrapperProps,
-      "controlMaxWidth" | "controlMinWidth"
+      | "controlMaxWidth"
+      | "controlMinWidth"
+      | "classes"
+      | "onChange"
+      | keyof MuiRadioGroupProps
     >,
-    ReadOnlyControlProps {}
+    ReadOnlyControlProps,
+    BaseRecursicaRadioGroupProps {}
 
 export type RadioGroupProps = RecursicaOverStyled<RecursicaRadioGroupProps>;
 
@@ -43,8 +58,9 @@ export const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(
       assistiveText,
       assistiveWithIcon,
       error,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       required,
-      withAsterisk,
+      // Removed withAsterisk as it is not supported natively in this interface
       id,
       className,
       style,
@@ -69,7 +85,7 @@ export const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(
         controlMaxWidth="var(--recursica_ui-kit_components_radio-button-item_properties_max-width)"
         controlMinWidth={undefined}
         overStyled={overStyled as true}
-        labelElement="div" // Strictly override. ARIA grouping prohibits interactive radios nested natively inside <label>.
+        // Strictly override. ARIA grouping prohibits interactive radios nested natively inside <label>.
         formLayout={formLayout}
         labelSize={labelSize}
         labelAlignment={labelAlignment}
@@ -81,8 +97,6 @@ export const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(
         assistiveText={assistiveText}
         assistiveWithIcon={assistiveWithIcon}
         error={error}
-        required={required}
-        withAsterisk={withAsterisk}
         id={id}
         readOnly={readOnly && !!readOnlyComponent}
         readOnlyComponent={readOnlyComponent}
@@ -97,10 +111,10 @@ export const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(
             {...(sanitizedProps as unknown as MuiRadioGroupProps)}
             value={value}
             defaultValue={defaultValue}
+            className={styles.groupRoot}
+            data-layout={formLayout}
           >
-            <div className={styles.groupRoot} data-layout={formLayout}>
-              {children}
-            </div>
+            {children}
           </MuiRadioGroup>
         }
       />

package/src/components/ReadOnlyField/ReadOnlyField.module.css

@@ -3,21 +3,22 @@
 .root {
   width: 100%;
   --form-control-margin-bottom: var(
-    --recursica_ui-kit_components_read-only-field_variants_layouts_stacked_properties_top-bottom-margin,
-    0px
+    --recursica_ui-kit_components_read-only-field_variants_layouts_stacked_properties_top-bottom-margin
   );
 }
 
 .root[data-form-layout="side-by-side"] {
   --form-control-margin-bottom: var(
-    --recursica_ui-kit_components_read-only-field_variants_layouts_side-by-side_properties_top-bottom-margin,
-    0px
+    --recursica_ui-kit_components_read-only-field_variants_layouts_side-by-side_properties_top-bottom-margin
   );
 }
 
 .text {
+  margin: 0;
+  padding: 0;
   display: flex;
   align-items: center;
+  word-break: break-word;
 
   font-family: var(
     --recursica_ui-kit_components_read-only-field_properties_text_font-family
@@ -48,7 +49,6 @@
   );
 
   min-height: var(
-    --recursica_ui-kit_components_read-only-field_properties_min-height,
-    40px
+    --recursica_ui-kit_components_read-only-field_properties_min-height
   );
 }