@multiplatform.one/frappe-ui 7.34.4 → 7.35.0

package/src/fields/MarkdownEditor/index.native.tsx

@@ -31,7 +31,7 @@ import { useEffect, useState, type ComponentType, type ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import type { FontSizeTokens, LabelProps, SizeTokens } from "tamagui";
 import { Paragraph, YStack } from "tamagui";
-import { sizeRecipeForToken, useResolvedKnobs } from "@multiplatform.one/theme";
+import { sizeRecipeForToken, useResolvedKnobs, sizeTokenStep } from "@multiplatform.one/theme";
 import { EditorPreviewPanes, PreviewSurface } from "../shared/EditorPreviewPanes";
 
 // ---------------------------------------------------------------------------
@@ -74,18 +74,17 @@ function useMarkdownRenderer(enabled: boolean): MarkdownComponent | null {
 
 interface MarkdownPreviewProps {
   value: string;
-  compact?: boolean;
 }
 
-function MarkdownPreview({ value, compact }: MarkdownPreviewProps) {
+function MarkdownPreview({ value }: MarkdownPreviewProps) {
   const { t } = useTranslation();
-  const { knobProps } = useResolvedKnobs({ compact });
+  const { knobProps } = useResolvedKnobs();
   const Renderer = useMarkdownRenderer(!!value);
-  // Content type scale follows the size knob (same idiom as CodeBlock).
+  // Content type scale follows the size token (same idiom as CodeBlock).
   const textSize = knobProps.sizeToken as FontSizeTokens;
 
   return (
-    <PreviewSurface compact={compact}>
+    <PreviewSurface>
       {!value ? (
         <Paragraph color={formCommonColors.muted} size={textSize}>
           {t("Nothing to preview")}
@@ -118,7 +117,6 @@ export interface MarkdownEditorFieldProps {
   disabled?: boolean;
   readOnly?: boolean;
   skeleton?: boolean;
-  compact?: boolean;
   size?: SizeTokens;
   id?: string;
   value?: string;
@@ -146,7 +144,6 @@ export function MarkdownEditorField({
   disabled,
   readOnly,
   skeleton,
-  compact,
   size,
   id: idProp,
   value,
@@ -159,7 +156,8 @@ export function MarkdownEditorField({
   "aria-label": ariaLabel,
 }: MarkdownEditorFieldProps) {
   const { t } = useTranslation();
-  const { resolvedForm, knobProps, id } = useFormField({ form: formProp, id: idProp, compact });
+  const { resolvedForm, knobProps, id } = useFormField({ form: formProp, id: idProp });
+  const small = sizeTokenStep(knobProps.sizeToken) < 0;
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
   const inTableCell = useIsInTableCell();
 
@@ -183,7 +181,7 @@ export function MarkdownEditorField({
             height={sizeRecipeForToken(knobProps.sizeToken).fontSize}
           />
         )}
-        <Skeleton variant="rounded" width="100%" height={compact ? 120 : 200} />
+        <Skeleton variant="rounded" width="100%" height={small ? 120 : 200} />
       </YStack>
     );
   }
@@ -206,7 +204,6 @@ export function MarkdownEditorField({
       readOnly={readOnly}
       required={required}
       error={hasError ? true : undefined}
-      compact={compact}
       size={size}
       minRows={minRows}
       maxRows={maxRows}
@@ -231,10 +228,9 @@ export function MarkdownEditorField({
     return (
       <EditorPreviewPanes
         editor={renderSource(textValue, handleChange, hasError)}
-        preview={<MarkdownPreview value={textValue} compact={compact} />}
+        preview={<MarkdownPreview value={textValue} />}
         editTabLabel={t("Write")}
         previewTabLabel={t("Preview")}
-        compact={compact}
         defaultPreview={!!readOnly}
       />
     );

package/src/fields/MarkdownEditor/index.tsx

@@ -27,7 +27,7 @@ import {
   type AnyFormApi,
 } from "@multiplatform.one/forms";
 import { RichEditor, type RichEditorRef } from "@multiplatform.one/rich-text";
-import { sizeRecipeForToken } from "@multiplatform.one/theme";
+import { sizeRecipeForToken, sizeTokenStep } from "@multiplatform.one/theme";
 import { useEffect, useRef, useState, type ReactNode } from "react";
 import type { LabelProps, SizeTokens } from "tamagui";
 import { YStack } from "tamagui";
@@ -47,7 +47,6 @@ export interface MarkdownEditorFieldProps {
   disabled?: boolean;
   readOnly?: boolean;
   skeleton?: boolean;
-  compact?: boolean;
   size?: SizeTokens;
   id?: string;
   value?: string;
@@ -75,7 +74,6 @@ export function MarkdownEditorField({
   disabled,
   readOnly,
   skeleton,
-  compact,
   size,
   id: idProp,
   value,
@@ -87,7 +85,8 @@ export function MarkdownEditorField({
   maxRows = 16,
   "aria-label": ariaLabel,
 }: MarkdownEditorFieldProps) {
-  const { resolvedForm, knobProps, id } = useFormField({ form: formProp, id: idProp, compact });
+  const { resolvedForm, knobProps, id } = useFormField({ form: formProp, id: idProp });
+  const small = sizeTokenStep(knobProps.sizeToken) < 0;
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
   const inTableCell = useIsInTableCell();
 
@@ -119,7 +118,7 @@ export function MarkdownEditorField({
             height={sizeRecipeForToken(knobProps.sizeToken).fontSize}
           />
         )}
-        <Skeleton variant="rounded" width="100%" height={compact ? 120 : 200} />
+        <Skeleton variant="rounded" width="100%" height={small ? 120 : 200} />
       </YStack>
     );
   }
@@ -147,7 +146,6 @@ export function MarkdownEditorField({
       maxHeight={maxRows * ROW_HEIGHT}
       hasError={hasError}
       size={size}
-      compact={compact || inTableCell}
       // Table cells stay chromeless: no fixed toolbar, bubble on selection.
       showToolbar={!inTableCell}
       showBubbleToolbar={inTableCell}

package/src/fields/MentionInput/index.tsx

@@ -61,7 +61,6 @@ export type MentionInputFieldProps<
     disabled?: boolean;
     readOnly?: boolean;
     skeleton?: boolean;
-    compact?: boolean;
     mentions: MentionConfig[];
     placeholder?: string;
     onMentionSelect?: (mention: MentionItem, trigger: string) => void;
@@ -99,7 +98,6 @@ export function MentionInputField<
       helperText={fieldProps.helperText}
       readOnly={fieldProps.readOnly}
       skeleton={fieldProps.skeleton}
-      compact={fieldProps.compact}
       required={fieldProps.required}
       id={fieldProps.id}
       size={fieldProps.size}

package/src/fields/Numeric/Numeric.hug.spec.tsx

@@ -0,0 +1,54 @@
+// A number with a unit is one short value: the hugging field sizes to the
+// value (a `ch` width the bounds decide) instead of stretching across the
+// column, and the unit sits after the value inside the control.
+import { cleanup, fireEvent, screen } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { afterEach, describe, expect, it } from "vitest";
+import { Numeric } from "./index";
+
+afterEach(cleanup);
+
+function spinbutton(): HTMLInputElement {
+  return screen.getByRole("spinbutton") as HTMLInputElement;
+}
+
+describe("Numeric hug + unit", () => {
+  it("writes the unit after the value, inside the control", () => {
+    renderWithProviders(<Numeric type="Int" label="Weight" unit="hg" value={69} hug />);
+    const unit = screen.getByText("hg");
+    const box = spinbutton().closest("[data-stepper-control]");
+    expect(box).not.toBeNull();
+    expect(box?.contains(unit)).toBe(true);
+    // Trailing: the unit follows the value in document order.
+    expect(
+      spinbutton().compareDocumentPosition(unit) & Node.DOCUMENT_POSITION_FOLLOWING,
+    ).toBeTruthy();
+  });
+
+  it("hugs its value: a ch width on the input, the field aligned to its start", () => {
+    renderWithProviders(<Numeric type="Int" label="Height" unit="dm" value={7} hug />);
+    expect(spinbutton().style.width).toMatch(/^\d+ch$/);
+    const field = document.querySelector("[data-field-hug='true']");
+    expect(field).not.toBeNull();
+    expect(field?.contains(spinbutton())).toBe(true);
+  });
+
+  it("reserves room for the widest bound", () => {
+    renderWithProviders(<Numeric type="Int" label="Base XP" value={64} min={0} max={100000} hug />);
+    const chars = Number.parseInt(spinbutton().style.width, 10);
+    expect(chars).toBeGreaterThanOrEqual(String(100000).length);
+  });
+
+  it("fits long saved and edited values without bounds", () => {
+    renderWithProviders(<Numeric type="Int" label="Count" value={123456789} hug />);
+    expect(Number.parseInt(spinbutton().style.width, 10)).toBeGreaterThanOrEqual(9);
+    fireEvent.change(spinbutton(), { target: { value: "123456789012" } });
+    expect(Number.parseInt(spinbutton().style.width, 10)).toBeGreaterThanOrEqual(12);
+  });
+
+  it("without hug the field keeps the column width", () => {
+    renderWithProviders(<Numeric type="Int" label="Height" value={7} />);
+    expect(spinbutton().style.width).toBe("");
+    expect(document.querySelector("[data-field-hug='true']")).toBeNull();
+  });
+});

package/src/fields/Numeric/index.tsx

@@ -47,12 +47,15 @@ export type NumericProps<
     disabled?: boolean;
     readOnly?: boolean;
     skeleton?: boolean;
-    compact?: boolean;
     min?: number;
     max?: number;
     step?: number;
     precision?: number;
     currencySymbol?: string;
+    /** Unit written after the value ("kg"). */
+    unit?: string;
+    /** Size the field to its value instead of the column. */
+    hug?: boolean;
     inputProps?: Record<string, unknown>;
   };
 
@@ -84,6 +87,8 @@ export function Numeric<
     step,
     precision,
     currencySymbol = "$",
+    unit,
+    hug,
     ...fieldProps
   } = useProps(props);
 
@@ -124,7 +129,6 @@ export function Numeric<
       helperText={fieldProps.helperText}
       readOnly={fieldProps.readOnly}
       skeleton={fieldProps.skeleton}
-      compact={fieldProps.compact}
       required={fieldProps.required}
       id={fieldProps.id}
       size={fieldProps.size}
@@ -138,6 +142,8 @@ export function Numeric<
       mode={mode}
       preserveValue={preserveValue}
       inputProps={inputProps as any}
+      unit={unit}
+      hug={hug}
     />
   );
 

package/src/fields/OTPInput/OTPInput.spec.tsx

@@ -154,14 +154,13 @@ describe("registry resolution (OTP fieldtype)", () => {
     expect(element.props.value).toBe("");
   });
 
-  it("passes helperText / readOnly / skeleton / compact through", () => {
+  it("passes helperText / readOnly / skeleton through", () => {
     const Component = getFieldComponent("OTP")!;
     const element = (Component as Function)(
-      propsFor({ helperText: "check your texts", readOnly: true, skeleton: true, compact: true }),
+      propsFor({ helperText: "check your texts", readOnly: true, skeleton: true }),
     ) as React.ReactElement<Record<string, any>>;
     expect(element.props.helperText).toBe("check your texts");
     expect(element.props.readOnly).toBe(true);
     expect(element.props.skeleton).toBe(true);
-    expect(element.props.compact).toBe(true);
   });
 });

package/src/fields/OTPInput/index.tsx

@@ -33,7 +33,6 @@ export type OTPInputFieldProps<
     disabled?: boolean;
     readOnly?: boolean;
     skeleton?: boolean;
-    compact?: boolean;
     length?: number;
     secureTextEntry?: boolean;
     onComplete?: (code: string) => void;
@@ -73,7 +72,6 @@ export function OTPInputField<
       helperText={fieldProps.helperText}
       readOnly={fieldProps.readOnly}
       skeleton={fieldProps.skeleton}
-      compact={fieldProps.compact}
       required={fieldProps.required}
       id={fieldProps.id}
       size={fieldProps.size}

package/src/fields/Password/Password.errorTint.spec.tsx

@@ -0,0 +1,39 @@
+import { render } from "@testing-library/react";
+import { Form } from "@multiplatform.one/forms";
+import {
+  createThemesBuilder,
+  defaultAccentTheme,
+  defaultBaseTheme,
+  defaultBuilderOptions,
+} from "@multiplatform.one/theme";
+import { configWithoutAnimations } from "@tamagui/config";
+import { animationsCSS } from "@tamagui/config/v5-css";
+import { TamaguiProvider, createTamagui } from "tamagui";
+import { describe, expect, it } from "vitest";
+import { Password } from "./index";
+
+const config = createTamagui({
+  ...configWithoutAnimations,
+  animations: animationsCSS,
+  themes: createThemesBuilder(defaultBaseTheme, defaultAccentTheme, defaultBuilderOptions).themes(),
+});
+
+describe("Password error surface", () => {
+  for (const scheme of ["light", "dark"] as const) {
+    for (const integrated of [false, true]) {
+      it(`keeps the input surface (${scheme}, ${integrated ? "form" : "standalone"})`, () => {
+        const field = <Password name="password" label="Password" error="Enter a password" />;
+        const { container } = render(
+          <TamaguiProvider config={config} defaultTheme={scheme} disableInjectCSS>
+            {integrated ? <Form onSubmit={() => {}}>{field}</Form> : field}
+          </TamaguiProvider>,
+        );
+        expect(container.querySelector(".t_error")).not.toBeNull();
+        expect(container.querySelector("[class*='t_red']")).toBeNull();
+        const box = container.querySelector("[data-mp-input-box]");
+        expect(box).not.toBeNull();
+        expect(box?.closest(".t_sub_theme")?.className).toContain("t_error_InputContainerFrame");
+      });
+    }
+  }
+});

package/src/fields/Password/Password.spec.tsx

@@ -56,13 +56,13 @@ describe("Password reveal", () => {
     expect(revealOf(result.container)?.getAttribute("data-end-cap")).toBe(endCapBefore);
   });
 
-  it("default size stays 44 tall with the toggle present (not Bento's 46)", () => {
+  it("default size stays 40 tall with the toggle present (not Bento's 46)", () => {
     const result = renderWithProviders(<Password label="Secret" value="hunter2" />);
     const box = result.container.querySelector("[data-ring-target='box']") as HTMLElement;
     const reveal = revealOf(result.container);
     if (!box || !reveal) throw new Error("box or reveal not found");
-    expect(box.getAttribute("data-visual-height")).toBe("44");
-    expect(reveal.getAttribute("data-end-cap")).toBe("44");
+    expect(box.getAttribute("data-visual-height")).toBe("40");
+    expect(reveal.getAttribute("data-end-cap")).toBe("40");
     expect(box.getAttribute("data-visual-height")).not.toBe("46");
   });
 

package/src/fields/Password/index.tsx

@@ -65,7 +65,6 @@ export type PasswordProps<
     disabled?: boolean;
     readOnly?: boolean;
     skeleton?: boolean;
-    compact?: boolean;
     inputProps?: Record<string, unknown>;
     size?: import("tamagui").SizeTokens;
   };
@@ -120,7 +119,6 @@ export function Password<
   const { resolvedForm, knobProps, id } = useFormField({
     form,
     id: fieldProps.id as string | undefined,
-    compact: fieldProps.compact,
   });
   const resolvedValidators = useResolvedValidators(
     fieldProps.required,
@@ -169,8 +167,7 @@ export function Password<
 
   const boxContract = {
     size: resolvedSize,
-    "data-density": knobProps.density,
-    "data-size": String(resolvedSize),
+    "data-size-token": String(resolvedSize),
     "data-visual-height": String(visualHeight),
     "data-press-floor": belowFloor ? "slop" : "box",
     "data-ring-target": "box",
@@ -196,11 +193,7 @@ export function Password<
     handleChange?: (text: string) => void,
     hasError?: boolean,
   ) => (
-    <FormsInput.Box
-      {...boxContract}
-      disabled={disabled}
-      {...(hasError ? { theme: "error" } : undefined)}
-    >
+    <FormsInput.Box {...boxContract} disabled={disabled}>
       <FormsInput.Area
         ref={inputRef}
         {...(areaInputProps as object)}

package/src/fields/Phone/index.tsx

@@ -37,7 +37,6 @@ export type PhoneFieldProps<
     disabled?: boolean;
     readOnly?: boolean;
     skeleton?: boolean;
-    compact?: boolean;
     defaultCountry?: string;
     placeholder?: string;
   };
@@ -72,7 +71,6 @@ export function Phone<
     helperText: fieldProps.helperText,
     readOnly: fieldProps.readOnly,
     skeleton: fieldProps.skeleton,
-    compact: fieldProps.compact,
     required: fieldProps.required,
     id: fieldProps.id,
     size: fieldProps.size,

package/src/fields/Progress/Progress.spec.tsx

@@ -4,7 +4,7 @@
  * ProgressField is a thin adapter: it takes the Frappe field props and hands
  * them to the forms Progress, which owns the track, the clamp and the label
  * chrome. So what is worth pinning here is the FORWARDING — every prop the
- * adapter is documented to pass (readOnly / skeleton / compact / max /
+ * adapter is documented to pass (readOnly / skeleton / max /
  * helperText / error) has to actually arrive, because the failure mode of a
  * thin adapter is a silently dropped prop that makes three story variants
  * render identically (the ContractProbe story exists for exactly that).
@@ -82,12 +82,12 @@ describe("ProgressField forwards the thin-adapter contract", () => {
     expect(skeleton.container.innerHTML).not.toBe(loadedHtml);
   });
 
-  it("compact renders a different tree from the default density", () => {
+  it("a smaller size token renders a different tree from the default", () => {
     const normal = renderWithProviders(<ProgressField label="Completion" value={65} />);
     const normalHtml = normal.container.innerHTML;
     cleanup();
-    const compact = renderWithProviders(<ProgressField label="Completion" value={65} compact />);
-    expect(compact.container.innerHTML).not.toBe(normalHtml);
+    const small = renderWithProviders(<ProgressField label="Completion" value={65} size="$3" />);
+    expect(small.container.innerHTML).not.toBe(normalHtml);
   });
 
   it("readOnly is accepted and still paints the value", () => {
@@ -139,7 +139,7 @@ describe("registry resolution (Progress fieldtype)", () => {
     expect(element.props.value).toBe(0);
   });
 
-  it("forwards the passthrough contract (helperText / readOnly / skeleton / compact)", () => {
+  it("forwards the passthrough contract (helperText / readOnly / skeleton)", () => {
     const Component = getFieldComponent("Progress")!;
     const element = (Component as Function)(
       propsFor({
@@ -147,13 +147,11 @@ describe("registry resolution (Progress fieldtype)", () => {
         helperText: "from the doc",
         readOnly: true,
         skeleton: true,
-        compact: true,
       } as Partial<FieldRenderProps>),
     ) as React.ReactElement<Record<string, any>>;
     expect(element.props.helperText).toBe("from the doc");
     expect(element.props.readOnly).toBe(true);
     expect(element.props.skeleton).toBe(true);
-    expect(element.props.compact).toBe(true);
   });
 
   it("falls back to the DocField description when no helperText is given", () => {

package/src/fields/Progress/index.tsx

@@ -33,7 +33,6 @@ export type ProgressFieldProps<
     progressProps?: Record<string, unknown>;
     readOnly?: boolean;
     skeleton?: boolean;
-    compact?: boolean;
   };
 
 export function ProgressField<
@@ -65,7 +64,6 @@ export function ProgressField<
       helperText={fieldProps.helperText}
       readOnly={fieldProps.readOnly}
       skeleton={fieldProps.skeleton}
-      compact={fieldProps.compact}
       required={fieldProps.required}
       id={fieldProps.id}
       size={fieldProps.size}

package/src/fields/RadioGroup/index.tsx

@@ -36,7 +36,6 @@ export type RadioGroupFieldProps<
     disabled?: boolean;
     readOnly?: boolean;
     skeleton?: boolean;
-    compact?: boolean;
     children?: ReactNode;
     radioGroupProps?: Record<string, unknown>;
   };
@@ -75,7 +74,6 @@ export function RadioGroupField<
       helperText={fieldProps.helperText}
       readOnly={fieldProps.readOnly}
       skeleton={fieldProps.skeleton}
-      compact={fieldProps.compact}
       required={fieldProps.required}
       id={fieldProps.id}
       size={fieldProps.size}

package/src/fields/Rating/index.tsx

@@ -34,7 +34,6 @@ export type RatingProps<
     disabled?: boolean;
     readOnly?: boolean;
     skeleton?: boolean;
-    compact?: boolean;
     maxStars?: number;
   };
 
@@ -69,7 +68,6 @@ export function Rating<
       helperText={fieldProps.helperText}
       readOnly={fieldProps.readOnly}
       skeleton={fieldProps.skeleton}
-      compact={fieldProps.compact}
       required={fieldProps.required}
       id={fieldProps.id}
       size={fieldProps.size}

package/src/fields/ReadOnly/ReadOnly.stories.tsx

@@ -49,7 +49,7 @@ export default {
 };
 
 export const AllTypes = () => (
-  <YStack gap="$4" width={400}>
+  <YStack gap="$4" width={400} maxWidth="100%">
     <ReadOnly label="Data" value="John Doe" type="Data" />
     <ReadOnly label="Int" value={42} type="Int" />
     <ReadOnly label="Float" value={99.99} type="Float" precision={2} />

package/src/fields/ReadOnly/index.tsx

@@ -15,6 +15,7 @@ import {
   formatPercent,
   formatTimeOfDay,
   useResolvedKnobs,
+  sizeTokenStep,
 } from "@multiplatform.one/theme";
 import { useMemo } from "react";
 import { Text, XStack, YStack, type YStackProps } from "tamagui";
@@ -51,7 +52,6 @@ export interface ReadOnlyProps extends Omit<YStackProps, "children"> {
   helperText?: string;
   readOnly?: boolean;
   skeleton?: boolean;
-  compact?: boolean;
 }
 
 /**
@@ -143,10 +143,10 @@ export function ReadOnly({
   helperText,
   readOnly: _readOnly,
   skeleton = false,
-  compact = false,
   ...stackProps
 }: ReadOnlyProps) {
   const { knobProps } = useResolvedKnobs();
+  const small = sizeTokenStep(knobProps.sizeToken) < 0;
   const displayValue = useMemo(() => {
     const formatted = formatValue(value, type, {
       currencySymbol,
@@ -163,7 +163,7 @@ export function ReadOnly({
     return (
       <YStack {...stackProps}>
         <FieldLayout label={label}>
-          <Skeleton variant="rounded" width="100%" height={compact ? 28 : 36} />
+          <Skeleton variant="rounded" width="100%" height={small ? 28 : 36} />
         </FieldLayout>
       </YStack>
     );
@@ -262,9 +262,9 @@ export function ReadOnly({
         <XStack
           {...knobProps.surface}
           {...knobProps.borderRadius}
-          paddingVertical={compact ? "$1" : "$2"}
-          paddingHorizontal={compact ? "$2" : "$3"}
-          minHeight={compact ? "$2.5" : "$3.5"}
+          paddingVertical={small ? "$1" : "$2"}
+          paddingHorizontal={small ? "$2" : "$3"}
+          minHeight={small ? "$2.5" : "$3.5"}
           alignItems="center"
         >
           {renderValue()}

package/src/fields/Select/Select.stories.tsx

@@ -59,7 +59,7 @@ Default.args = {
 
 Default.storyName = "Main";
 export const AllStates = () => (
-  <YStack gap="$4" width={400}>
+  <YStack gap="$4" width={400} maxWidth="100%">
     <ControlledSelect label="Default" options={statusOptions} placeholder="Select..." />
     <ControlledSelect label="With Value" options={statusOptions} value="Open" />
     <ControlledSelect label="Object Options" options={priorityOptions} value="medium" />

package/src/fields/Select/index.tsx

@@ -39,7 +39,6 @@ export type SelectProps<
     disabled?: boolean;
     readOnly?: boolean;
     skeleton?: boolean;
-    compact?: boolean;
   };
 
 export function Select<
@@ -78,7 +77,6 @@ export function Select<
       helperText={fieldProps.helperText}
       readOnly={fieldProps.readOnly}
       skeleton={fieldProps.skeleton}
-      compact={fieldProps.compact}
       required={fieldProps.required}
       id={fieldProps.id}
       size={fieldProps.size}

package/src/fields/Signature/index.tsx

@@ -35,7 +35,6 @@ export type SignatureProps<
     disabled?: boolean;
     readOnly?: boolean;
     skeleton?: boolean;
-    compact?: boolean;
     width?: number;
     height?: number;
     penColor?: string;
@@ -76,7 +75,6 @@ export function Signature<
       helperText={fieldProps.helperText}
       readOnly={fieldProps.readOnly}
       skeleton={fieldProps.skeleton}
-      compact={fieldProps.compact}
       required={fieldProps.required}
       id={fieldProps.id}
       size={fieldProps.size}

package/src/fields/Slider/index.tsx

@@ -36,7 +36,6 @@ export type SliderFieldProps<
     disabled?: boolean;
     readOnly?: boolean;
     skeleton?: boolean;
-    compact?: boolean;
     sliderProps?: Record<string, unknown>;
   };
 
@@ -74,7 +73,6 @@ export function SliderField<
       helperText={fieldProps.helperText}
       readOnly={fieldProps.readOnly}
       skeleton={fieldProps.skeleton}
-      compact={fieldProps.compact}
       required={fieldProps.required}
       id={fieldProps.id}
       size={fieldProps.size}

package/src/fields/SmallText/SmallText.spec.tsx

@@ -162,14 +162,13 @@ describe("registry resolution (Small Text fieldtype)", () => {
     expect(element.props.textAreaProps).toEqual({ readOnly: true, tabIndex: -1 });
   });
 
-  it("passes helperText / readOnly / skeleton / compact through", () => {
+  it("passes helperText / readOnly / skeleton through", () => {
     const Component = getFieldComponent("Small Text")!;
     const element = (Component as Function)(
-      propsFor({ helperText: "keep it short", readOnly: true, skeleton: true, compact: true }),
+      propsFor({ helperText: "keep it short", readOnly: true, skeleton: true }),
     ) as React.ReactElement<Record<string, any>>;
     expect(element.props.helperText).toBe("keep it short");
     expect(element.props.readOnly).toBe(true);
     expect(element.props.skeleton).toBe(true);
-    expect(element.props.compact).toBe(true);
   });
 });

package/src/fields/SmallText/index.tsx

@@ -38,7 +38,6 @@ export type SmallTextProps<
     disabled?: boolean;
     readOnly?: boolean;
     skeleton?: boolean;
-    compact?: boolean;
     maxLength?: number;
     textAreaProps?: Record<string, unknown>;
   };
@@ -76,7 +75,6 @@ export function SmallText<
       helperText={fieldProps.helperText}
       readOnly={fieldProps.readOnly}
       skeleton={fieldProps.skeleton}
-      compact={fieldProps.compact}
       required={fieldProps.required}
       id={fieldProps.id}
       size={fieldProps.size}

package/src/fields/Switch/index.tsx

@@ -33,7 +33,6 @@ export type SwitchFieldProps<
     disabled?: boolean;
     readOnly?: boolean;
     skeleton?: boolean;
-    compact?: boolean;
     switchProps?: Record<string, unknown>;
   };
 
@@ -68,7 +67,6 @@ export function SwitchField<
       helperText={fieldProps.helperText}
       readOnly={fieldProps.readOnly}
       skeleton={fieldProps.skeleton}
-      compact={fieldProps.compact}
       required={fieldProps.required}
       id={fieldProps.id}
       size={fieldProps.size}