torch-glare 2.4.2 → 2.4.3

package/apps/lib/components/FormBuilder/fields/TextField.tsx

@@ -7,7 +7,6 @@ import { InputField } from "../../InputField";
 import { Textarea } from "../../Textarea";
 import { PasswordLevel } from "../../PasswordLevel";
 import { useLoading, useCell } from "../context";
-import { formatFieldView } from "../viewFormat";
 import { formatNumber } from "../numberFormat";
 import type { BaseFieldProps, CurrencyFieldProps, PasswordFieldProps } from "../types";
 import { FieldShell } from "./FieldShell";
@@ -110,7 +109,7 @@ function TextLike({ props, type }: { props: BaseFieldProps; type: "text" | "emai
   const loading = useLoading();
   const cell = useCell();
   return (
-    <FieldShell {...props} view={(v) => formatFieldView({ kind: "text", value: v })}>
+    <FieldShell {...props}>
       {(field) => (
         <InputField
           {...field}
@@ -136,10 +135,7 @@ export function PasswordField(props: PasswordFieldProps) {
   const loading = useLoading();
   const cell = useCell();
   return (
-    <FieldShell
-      {...props}
-      view={(v) => formatFieldView({ kind: "text", value: v ? "••••••••" : "" })}
-    >
+    <FieldShell {...props}>
       {(field) => (
         <div className="flex w-full flex-col gap-2">
           <InputField
@@ -162,7 +158,7 @@ export function NumberField(props: BaseFieldProps) {
   const loading = useLoading();
   const cell = useCell();
   return (
-    <FieldShell {...props} view={(v) => formatFieldView({ kind: "number", value: v })}>
+    <FieldShell {...props}>
       {(field) => (
         <NumberInput
           field={field}
@@ -179,12 +175,7 @@ export function CurrencyField(props: CurrencyFieldProps) {
   const loading = useLoading();
   const cell = useCell();
   return (
-    <FieldShell
-      {...props}
-      view={(v) =>
-        formatFieldView({ kind: "currency", value: v, currencySymbol: props.currencySymbol })
-      }
-    >
+    <FieldShell {...props}>
       {(field) => (
         <NumberInput
           field={field}
@@ -205,7 +196,7 @@ export function CurrencyField(props: CurrencyFieldProps) {
 export function TextareaField(props: BaseFieldProps & { rows?: number }) {
   const loading = useLoading();
   return (
-    <FieldShell {...props} view={(v) => formatFieldView({ kind: "text", value: v })}>
+    <FieldShell {...props}>
       {(field, fieldState) => (
         <Textarea
           {...field}

package/apps/lib/components/FormBuilder/fields/TreeSelectField.tsx

@@ -25,13 +25,7 @@ export function TreeSelectField<T>(props: TreeSelectFieldProps<T>) {
   };
 
   return (
-    <FieldShell
-      {...props}
-      view={(v) => {
-        const node = findById(v);
-        return { value: node ? String(props.getNodeLabel(node)) : "" };
-      }}
-    >
+    <FieldShell {...props}>
       {(field) => (
         <SearchableTree
           nodes={props.nodes}

package/apps/lib/components/FormBuilder/form-builder.tsx

@@ -7,13 +7,7 @@ import { useForm, type FieldValues } from "react-hook-form";
 import { cn } from "../../utils/cn";
 import { Form } from "../Form";
 import { SectionBlock, type SectionColor } from "../SectionBlock";
-import {
-  LoadingContext,
-  ModeContext,
-  DirectionContext,
-  StepperContext,
-  FormIdContext,
-} from "./context";
+import { LoadingContext, DirectionContext, StepperContext, FormIdContext } from "./context";
 import { Header } from "./header";
 import type { FormBuilderRootProps } from "./types";
 import {
@@ -94,7 +88,6 @@ function FormBuilderRoot<T extends FieldValues = FieldValues>({
   defaultValues,
   values,
   loading = false,
-  mode = "edit",
   fieldDirection,
   resetOnSuccess,
   conclusion,
@@ -119,12 +112,11 @@ function FormBuilderRoot<T extends FieldValues = FieldValues>({
   const header = childArray.find(isHeaderElement);
   const rest = childArray.filter((n) => !isHeaderElement(n));
 
-  const isView = mode === "view";
   const stepperEl = rest.find(isStepperElement);
   const stepChildren = stepperEl ? React.Children.toArray(stepperEl.props.children) : [];
   const steps = stepChildren.filter(isStepElement);
   const stepExtras = stepChildren.filter((n) => !isStepElement(n));
-  const isStepper = !!stepperEl && !isView;
+  const isStepper = !!stepperEl;
 
   // Stepper state is lifted HERE so the nav can live in its own grid column, outside the
   // `<form>`. Called unconditionally (inert when there are no steps) to keep hooks order stable.
@@ -151,12 +143,10 @@ function FormBuilderRoot<T extends FieldValues = FieldValues>({
   // The fields column caps at 1200px and centers — as the middle column of the grid, and
   // standalone.
   const fieldsInner = (
-    <div className="mx-auto flex w-full max-w-[1100px] flex-col gap-4">{fields}</div>
+    <div className="mx-auto flex w-full max-w-[1100px] flex-col gap-4 px-[48px]">{fields}</div>
   );
 
-  const formEl = isView ? (
-    <div className="w-full min-w-0">{fieldsInner}</div>
-  ) : (
+  const formEl = (
     <form id={id} className="w-full min-w-0" onSubmit={form.handleSubmit(handleValid, onInvalid)}>
       {fieldsInner}
     </form>
@@ -203,7 +193,7 @@ function FormBuilderRoot<T extends FieldValues = FieldValues>({
 
   // `className` lands on the OUTERMOST element — the one a parent lays out (e.g. `flex-1 min-h-0`
   // to fill a flex column). `h-full` fills a parent that has a definite height.
-  const outerClassName = cn("h-full w-full", className);
+  const outerClassName = cn("h-full w-full @container", className);
 
   const tree = (
     <Form {...form}>
@@ -214,15 +204,13 @@ function FormBuilderRoot<T extends FieldValues = FieldValues>({
   return (
     <FormIdContext.Provider value={id}>
       <LoadingContext.Provider value={loading}>
-        <ModeContext.Provider value={mode}>
-          <DirectionContext.Provider value={direction}>
-            {isStepper ? (
-              <StepperContext.Provider value={stepper}>{tree}</StepperContext.Provider>
-            ) : (
-              tree
-            )}
-          </DirectionContext.Provider>
-        </ModeContext.Provider>
+        <DirectionContext.Provider value={direction}>
+          {isStepper ? (
+            <StepperContext.Provider value={stepper}>{tree}</StepperContext.Provider>
+          ) : (
+            tree
+          )}
+        </DirectionContext.Provider>
       </LoadingContext.Provider>
     </FormIdContext.Provider>
   );
@@ -240,10 +228,9 @@ function FormBuilderRoot<T extends FieldValues = FieldValues>({
  * </FormBuilder>
  * ```
  *
- * Steps are components (`FormBuilder.Stepper` + `FormBuilder.Step`) and
- * `mode="view"` renders read-only. FormBuilder is drawer-unaware — to show a form
- * in a drawer, wrap it in `FormRenderer`'s `FormDrawer` (or use `FormRenderer`
- * with `display: "drawer"`).
+ * Steps are components (`FormBuilder.Stepper` + `FormBuilder.Step`). FormBuilder is
+ * drawer-unaware — to show a form in a drawer, wrap it in `FormRenderer`'s `FormDrawer`
+ * (or use `FormRenderer` with `display: "drawer"`).
  */
 export const FormBuilder = Object.assign(FormBuilderRoot, {
   // fields

package/apps/lib/components/FormBuilder/header.tsx

@@ -4,7 +4,6 @@ import { ReactNode } from "react";
 
 import { cn } from "../../utils/cn";
 import { HeaderBar } from "../HeaderBar";
-import { useMode } from "./context";
 
 export type HeaderVariant = "new" | "edit" | "detail";
 
@@ -90,12 +89,9 @@ export interface HeaderProps {
  * Place it as a direct child of `<FormBuilder>`; the root then switches to the
  * scroll-shell layout that reserves space beneath the floating header.
  */
-export function Header({ title, label, variant, children }: HeaderProps) {
-  const mode = useMode();
-  const v: HeaderVariant = variant ?? (mode === "view" ? "detail" : "new");
-
+export function Header({ title, label, variant = "new", children }: HeaderProps) {
   return (
-    <FormHeaderBar title={title} label={label} variant={v}>
+    <FormHeaderBar title={title} label={label} variant={variant}>
       {children}
     </FormHeaderBar>
   );

package/apps/lib/components/FormBuilder/index.ts

@@ -2,13 +2,9 @@ export { FormBuilder } from "./form-builder";
 export type { SectionProps } from "./form-builder";
 export { FormHeaderBar } from "./header";
 export type { HeaderProps, HeaderVariant, FormHeaderBarProps } from "./header";
-export { DisplayField } from "./DisplayField";
-export type { DisplayFieldProps } from "./DisplayField";
 export { RichTextField } from "../TextEditor/RichTextField";
-export { formatFieldView } from "./viewFormat";
-export type { FieldView, ViewKind, ViewFormatOptions } from "./viewFormat";
 export type { StepProps } from "./stepper";
-export type { FormBuilderMode, FieldDirection } from "./context";
+export type { FieldDirection } from "./context";
 export type {
   BaseFieldProps,
   OptionItem,

package/apps/lib/components/FormBuilder/stepper.tsx

@@ -6,7 +6,13 @@ import { useFormState, type FieldPath, type FieldValues } from "react-hook-form"
 import { cn } from "../../utils/cn";
 import { Button } from "../Button";
 import { FormStepper, FormStep, FormStepIndicator, FormStepLabel } from "../FormStepper";
-import { StepContext, useStepper, type StepperContextValue, type StepRegistry } from "./context";
+import {
+  StepContext,
+  StepperContext,
+  useStepper,
+  type StepperContextValue,
+  type StepRegistry,
+} from "./context";
 
 // ─── Step (declaration only — the Stepper reads its props) ───────────────────
 
@@ -72,7 +78,7 @@ function StepSlot({
  * to bottom, joined by a short vertical connector between consecutive steps.
  */
 function StepperNav() {
-  const { titles, currentStep, goToStep, stepFields } = useStepper();
+  const { titles, currentStep, goToStep, stepFields, completedSteps } = useStepper();
   const { errors } = useFormState();
 
   const stepHasError = (index: number) =>
@@ -83,8 +89,13 @@ function StepperNav() {
       {titles.map((title, index) => {
         // The step buttons ARE the navigation: click to move. Backward is free;
         // clicking forward validates the steps in between (goToStep) and stops at
-        // the first one with errors. Errored steps show a red indicator.
-        const type = stepHasError(index) ? "negative" : index < currentStep ? "success" : "default";
+        // the first one with errors. A live error shows red; a step that has passed
+        // validation stays checked (success) even after navigating back to it.
+        const type = stepHasError(index)
+          ? "negative"
+          : completedSteps.has(index)
+            ? "success"
+            : "default";
         return (
           <React.Fragment key={title}>
             <FormStep index={index} type={type} onClick={() => void goToStep(index)}>
@@ -105,24 +116,71 @@ function StepperNav() {
   );
 }
 
-// ─── Back / Next / default footer ────────────────────────────────────────────
+// ─── Back / Next chevron nav (the Figma header action bar) ───────────────────
 
-export function Back({ children }: { children?: React.ReactNode }) {
-  const { goToPrevious, isFirstStep } = useStepper();
+/**
+ * Shared chevron nav button, matching the Figma header action bar (Body-HeaderBar-1.0) — the
+ * Glare `Button` icon variant, the same control Select/SearchableSelect use for their chevrons.
+ */
+function StepNavButton({
+  dir,
+  onClick,
+  disabled,
+}: {
+  dir: "left" | "right";
+  onClick: () => void;
+  disabled: boolean;
+}) {
   return (
-    <Button type="button" variant="BorderStyle" disabled={isFirstStep} onClick={goToPrevious}>
-      {children ?? "Back"}
+    <Button
+      type="button"
+      buttonType="icon"
+      size="M"
+      onClick={onClick}
+      disabled={disabled}
+      aria-label={dir === "left" ? "Previous step" : "Next step"}
+    >
+      <i
+        className={cn(
+          "text-[18px]",
+          dir === "left" ? "ri-arrow-left-s-line" : "ri-arrow-right-s-line",
+        )}
+      />
     </Button>
   );
 }
 
-export function Next({ children }: { children?: React.ReactNode }) {
+/** `FormBuilder.Back` — chevron to the previous step; disabled on the first. */
+export function Back() {
+  const { goToPrevious, isFirstStep } = useStepper();
+  return <StepNavButton dir="left" onClick={goToPrevious} disabled={isFirstStep} />;
+}
+
+/** `FormBuilder.Next` — chevron to the next step (validates first); disabled on the last. */
+export function Next() {
   const { goToNext, isLastStep } = useStepper();
-  if (isLastStep) return null;
+  return <StepNavButton dir="right" onClick={() => void goToNext()} disabled={isLastStep} />;
+}
+
+// ─── Stepper action bar (Back/Next + divider, then the Submit) ────────────────
+
+/**
+ * `FormRenderer` wraps its `actions` in this. When the form is a stepper it prepends the
+ * chevron `Back`/`Next` controls + a divider before the (user-provided) Submit — the Figma
+ * `Body-HeaderBar-1.0` layout. Outside a stepper there's no `StepperContext`, so it renders
+ * the actions untouched.
+ */
+export function StepperActions({ children }: { children?: React.ReactNode }) {
+  const stepper = React.useContext(StepperContext);
+  if (!stepper) return <>{children}</>;
   return (
-    <Button type="button" variant="PrimeStyle" onClick={() => void goToNext()}>
-      {children ?? "Next"}
-    </Button>
+    <div className="flex items-center gap-2">
+      <Back />
+      <Next />
+      {/* Divider — white-alpha hairline between the nav and the Submit. */}
+      <span aria-hidden className="mx-1 h-5 w-px rounded-[2px] bg-white-alpha-20" />
+      {children}
+    </div>
   );
 }
 
@@ -170,13 +228,27 @@ export function useStepperState(
   trigger: TriggerFn,
 ): StepperContextValue {
   const [currentStep, setCurrentStep] = React.useState(0);
+  // Steps that have passed their last validation — kept so their checkmark persists when the
+  // user navigates back to an earlier step.
+  const [completedSteps, setCompletedSteps] = React.useState<Set<number>>(new Set());
   const stepFieldsRef = React.useRef<Record<number, Set<string>>>({});
   const titles = steps.map((s) => s.props.title);
   const lastIndex = steps.length - 1;
 
+  const markStep = (step: number, passed: boolean) =>
+    setCompletedSteps((prev) => {
+      if (passed === prev.has(step)) return prev; // no change
+      const next = new Set(prev);
+      if (passed) next.add(step);
+      else next.delete(step);
+      return next;
+    });
+
   const validateStep = async (step: number) => {
     const names = [...(stepFieldsRef.current[step] ?? [])] as FieldPath<FieldValues>[];
-    return names.length === 0 ? true : trigger(names);
+    const passed = names.length === 0 ? true : await trigger(names);
+    markStep(step, passed);
+    return passed;
   };
 
   // Navigation runs through the step buttons. Backward is free; going forward
@@ -211,6 +283,7 @@ export function useStepperState(
     goToPrevious: () => setCurrentStep((s) => Math.max(s - 1, 0)),
     goToStep,
     stepFields: stepFieldsRef.current,
+    completedSteps,
   };
 }
 

package/apps/lib/components/FormBuilder/submit.tsx

@@ -3,7 +3,7 @@
 import { ReactNode } from "react";
 
 import { Button } from "../Button";
-import { useFormId, useLoading, useMode } from "./context";
+import { useFormId, useLoading } from "./context";
 
 export interface SubmitButtonProps {
   children?: ReactNode;
@@ -21,9 +21,6 @@ export interface SubmitButtonProps {
 export function SubmitButton({ children, className, loadingText, form }: SubmitButtonProps) {
   const loading = useLoading();
   const ctxFormId = useFormId();
-  const mode = useMode();
-
-  if (mode === "view") return null;
 
   return (
     <Button

package/apps/lib/components/FormBuilder/types.ts

@@ -8,7 +8,7 @@ import type {
   Resolver,
   UseFormReturn,
 } from "react-hook-form";
-import type { FieldDirection, FormBuilderMode } from "./context";
+import type { FieldDirection } from "./context";
 import type { SectionColor } from "../SectionBlock";
 
 /** Props shared by every `FormBuilder.*` field. `name` is the RHF path. */
@@ -69,13 +69,12 @@ export interface FileFieldProps extends BaseFieldProps {
   multiple?: boolean;
 }
 
-/** `FormBuilder.Custom` — bring your own control + optional read-only render. */
+/** `FormBuilder.Custom` — bring your own control, keeping the FieldSection + validation wiring. */
 export interface CustomFieldProps extends BaseFieldProps {
   render: (args: {
     field: ControllerRenderProps<FieldValues, string>;
     fieldState: ControllerFieldState;
   }) => ReactNode;
-  formatView?: (value: unknown) => ReactNode;
 }
 
 /** `FormBuilder.Date` / `.DateRange` / `.DateMultiple` / `.DateTime`. */
@@ -248,8 +247,6 @@ export interface FormBuilderRootProps<T extends FieldValues = FieldValues> {
   values?: T;
   /** Loading flag — Submit shows a spinner and inputs disable. */
   loading?: boolean;
-  /** `"edit"` (default) or read-only `"view"`. */
-  mode?: FormBuilderMode;
   /** Field row direction. Defaults to horizontal (vertical inside a drawer). */
   fieldDirection?: FieldDirection;
   /** Reset to defaults after a successful submit. */

package/apps/lib/components/FormRenderer/FormDrawer.tsx

@@ -106,8 +106,15 @@ export function FormDrawer({
               {actions}
             </FormHeaderBar>
 
-            {/* pt-[72px] clears the 44px header pill (inset 4px) — same as the page shell. */}
-            <div className="h-full overflow-y-auto px-3 pb-[20px] pt-[72px]">{children}</div>
+            {/* pt-[72px] clears the 44px header pill (inset 4px) — same as the page shell. The
+                48px bottom breathing-room goes on an inner wrapper, not the scroll container:
+                FormBuilder's outer element is `h-full`, which would pin it to the content box and
+                swallow the container's own `pb`. On a plain wrapper that `h-full` resolves to the
+                content height, so the padding actually lengthens the scroll. The conclusion panel
+                is a separate sibling, so it keeps its own spacing. */}
+            <div className="h-full overflow-y-auto px-3 pt-[72px]">
+              <div className="pb-[48px]">{children}</div>
+            </div>
           </div>
         </DrawerPanel>
 

package/apps/lib/components/FormRenderer/form-renderer.tsx

@@ -4,7 +4,8 @@ import { useId } from "react";
 import { FieldValues } from "react-hook-form";
 
 import { FormBuilder } from "../FormBuilder";
-import { FormIdContext, LoadingContext, ModeContext } from "../FormBuilder/context";
+import { FormIdContext, LoadingContext } from "../FormBuilder/context";
+import { StepperActions } from "../FormBuilder/stepper";
 import { FormDrawer } from "./FormDrawer";
 import type { FormRendererProps } from "./types";
 
@@ -25,7 +26,6 @@ export function FormRenderer<T extends FieldValues = FieldValues>({
   resolver,
   defaultValues,
   values,
-  mode = "edit",
   loading,
   resetOnSuccess,
   fieldDirection,
@@ -61,7 +61,6 @@ export function FormRenderer<T extends FieldValues = FieldValues>({
       resolver={resolver}
       defaultValues={defaultValues}
       values={values}
-      mode={mode}
       loading={loading}
       fieldDirection={effectiveDirection}
       resetOnSuccess={resetOnSuccess}
@@ -73,7 +72,8 @@ export function FormRenderer<T extends FieldValues = FieldValues>({
     >
       {useHeader && (
         <FormBuilder.Header title={header!.title} label={header!.label} variant={header!.variant}>
-          {actions}
+          {/* A stepper form prepends chevron Back/Next + a divider before the Submit. */}
+          {actions && <StepperActions>{actions}</StepperActions>}
         </FormBuilder.Header>
       )}
 
@@ -90,15 +90,13 @@ export function FormRenderer<T extends FieldValues = FieldValues>({
         badge={badge ?? header?.label}
         variant={header?.variant}
         summary={summary}
-        // The drawer header sits outside the `<form>`, so re-supply the form/loading/mode context
-        // a bare `FormBuilder.Submit` reads (on the page it gets these from the FormBuilder tree).
+        // The drawer header sits outside the `<form>`, so re-supply the form-id and loading
+        // context a bare `FormBuilder.Submit` reads (on the page it gets these from the tree).
         actions={
           actions ? (
-            <ModeContext.Provider value={mode}>
-              <LoadingContext.Provider value={!!loading}>
-                <FormIdContext.Provider value={formId}>{actions}</FormIdContext.Provider>
-              </LoadingContext.Provider>
-            </ModeContext.Provider>
+            <LoadingContext.Provider value={!!loading}>
+              <FormIdContext.Provider value={formId}>{actions}</FormIdContext.Provider>
+            </LoadingContext.Provider>
           ) : undefined
         }
         onOpenInNewTab={onOpenInNewTab}

package/apps/lib/components/FormRenderer/index.ts

@@ -1,9 +1,4 @@
 export { FormRenderer } from "./form-renderer";
 export { FormDrawer } from "./FormDrawer";
 export type { FormDrawerProps } from "./FormDrawer";
-export type {
-  FormRendererProps,
-  FormRendererMode,
-  FormRendererDisplay,
-  FieldDirection,
-} from "./types";
+export type { FormRendererProps, FormRendererDisplay, FieldDirection } from "./types";

package/apps/lib/components/FormRenderer/types.ts

@@ -15,7 +15,6 @@ import type {
  * form's header / drawer action bar) where you place the Save.
  */
 
-export type FormRendererMode = "edit" | "view";
 export type FormRendererDisplay = "page" | "drawer";
 export type FieldDirection = "horizontal" | "vertical";
 
@@ -29,7 +28,6 @@ export interface FormRendererProps<T extends FieldValues = FieldValues> {
   resolver?: Resolver<T>;
   defaultValues?: DefaultValues<T>;
   values?: T;
-  mode?: FormRendererMode;
   loading?: boolean;
   resetOnSuccess?: boolean;
   /** Row layout; defaults to vertical inside a drawer. */

package/apps/lib/components/Popover.tsx

@@ -239,10 +239,14 @@ const popoverStyles = cva(
           "bg-background-system-body-primary",
           "shadow-[0px_0px_18px_0px_rgba(0,0,0,0.75)]",
         ],
+        // Adopts the DropdownMenu surface (`menuContentStyles`): backdrop-blurred, borderless
+        // rounded-14 panel with a soft ambient shadow — keeping the original background color.
         PresentationStyle: [
-          "border-border-presentation-global-primary",
+          "border-transparent",
+          "rounded-[14px]",
+          "backdrop-blur-[21px]",
           "bg-background-presentation-form-base",
-          "shadow-[0px_0px_10px_0px_rgba(0,0,0,0.4),0px_4px_4px_0px_rgba(0,0,0,0.2)]",
+          "shadow-[0_0_32px_2px_rgba(0,0,0,0.20),0_0_48px_2px_rgba(0,0,0,0.05)]",
         ],
       },
       overlayBlur: {

package/apps/lib/components/SearchableSelect.tsx

@@ -24,6 +24,9 @@ export interface SearchableSelectOption {
   value: string;
   label: string;
   icon?: ReactNode;
+  /** Text used for client-side filtering. Defaults to `label` — set it to match on a subset
+   *  (e.g. a country name only, when the label also shows a dial code). */
+  searchText?: string;
 }
 
 interface Props {
@@ -38,6 +41,7 @@ interface Props {
   theme?: Themes;
   dir?: string;
   className?: string;
+  inputClassName?: string;
   /** Transparent border/background so the trigger blends into a table cell. */
   onTable?: boolean;
 
@@ -107,6 +111,7 @@ export function SearchableSelect({
   theme,
   dir,
   className,
+  inputClassName,
   onTable,
   filterClientSide = true,
   onSearchChange,
@@ -155,7 +160,7 @@ export function SearchableSelect({
     if (!filterClientSide) return options;
     const q = search.trim().toLowerCase();
     if (!q) return options;
-    return options.filter((o) => o.label.toLowerCase().includes(q));
+    return options.filter((o) => (o.searchText ?? o.label).toLowerCase().includes(q));
   }, [options, search, filterClientSide]);
 
   const selectedOption = options.find((o) => o.value === value) ?? null;
@@ -201,7 +206,7 @@ export function SearchableSelect({
               setOpen(true);
             }}
             onBlur={() => setSearching(false)}
-            className={cn("min-w-[100px] flex-1", {
+            className={cn("min-w-[100px] flex-1", inputClassName, {
               "!h-[18px]": size === "XS",
               "!h-[22px]": size === "S",
               "!h-[24px]": size === "M",

package/apps/lib/layouts/FieldSection.tsx

@@ -31,32 +31,35 @@ export function FieldSection({
     <section
       {...props}
       data-theme={theme}
-      className={cn(
-        "grid py-[16px] px-[12px] w-full max-w-[1200px] min-w-[0px] ",
-        direction === "vertical" && "grid-rows-[auto_1fr] gap-[12px]",
-        direction === "horizontal" && "grid-cols-[350px_1fr] gap-[24px]",
-        direction === "flexible" &&
-          "grid-rows-[auto_1fr] gap-[12px] lg:grid-cols-[350px_1fr] lg:grid-rows-[1fr] lg:gap-[24px]",
-        className,
-      )}
+      className={cn("w-full max-w-[1200px] min-w-[0px] @container", className)}
     >
-      {/* Fixed width section for labels */}
-      <div className="flex flex-col gap-[12px]">
-        {label && (
-          <Label
-            size={size}
-            label={label}
-            requiredLabel={requiredLabel}
-            labelDirections={"horizontal"}
-          />
+      <div
+        className={cn(
+          "grid py-[16px] px-[12px] w-full min-w-[0px]",
+          direction === "vertical" && "grid-rows-[auto_1fr] gap-[12px]",
+          direction === "horizontal" && "grid-cols-[350px_1fr] gap-[24px]",
+          direction === "flexible" &&
+          "grid-rows-[auto_1fr] gap-[12px] @md:grid-cols-[350px_1fr] @md:grid-rows-[1fr] @md:gap-[24px]",
         )}
+      >
+        {/* Fixed width section for labels */}
+        <div className="flex flex-col gap-[12px]">
+          {label && (
+            <Label
+              size={size}
+              label={label}
+              requiredLabel={requiredLabel}
+              labelDirections={"horizontal"}
+            />
+          )}
 
-        {secondaryLabel && <Label size={size} secondaryLabel={secondaryLabel} />}
-        {childrenUnderLabel}
-      </div>
+          {secondaryLabel && <Label size={size} secondaryLabel={secondaryLabel} />}
+          {childrenUnderLabel}
+        </div>
 
-      {/* Flexible section that takes up the remaining space */}
-      <div className="grid grid-cols-1 place-items-end gap-[12px]">{children}</div>
+        {/* Flexible section that takes up the remaining space */}
+        <div className="grid grid-cols-1 place-items-end gap-[12px]">{children}</div>
+      </div>
     </section>
   );
 }

package/apps/lib/registry.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.4.2",
+  "version": "2.4.3",
   "generatedBy": "scripts/bin/generateRegistry",
   "items": [
     {