@12-apps/ui 6.16.0 → 6.17.1

package/dist/{chunk-VZO7VREP.js → chunk-IPPTOL53.js}

@@ -39,7 +39,7 @@ var StyledFormField = styled(Box, {
     display: variant === "horizontal" ? "grid" : "flex",
     flexDirection: variant === "horizontal" ? void 0 : "column",
     gridTemplateColumns: variant === "horizontal" ? "200px 1fr" : void 0,
-    gap: theme.spacing(1),
+    columnGap: variant === "horizontal" ? theme.spacing(1) : void 0,
     alignItems: variant === "horizontal" ? "center" : void 0
   })
 );
@@ -109,4 +109,4 @@ export {
   FormControl,
   FormMessage
 };
-//# sourceMappingURL=chunk-VZO7VREP.js.map
+//# sourceMappingURL=chunk-IPPTOL53.js.map

package/dist/chunk-IPPTOL53.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/Form/Form.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport Stack from '@mui/material/Stack/index.js';\nimport { styled } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport type {\n  FormControlProps,\n  FormFieldProps,\n  FormLabelProps,\n  FormMessageProps,\n  FormProps,\n} from './Form.types';\n\nconst StyledForm = styled('form', {\n  shouldForwardProp: (prop) => prop !== 'variant',\n})<{ variant?: FormProps['variant'] }>(({ theme, variant }) => ({\n  width: '100%',\n  ...(variant === 'inline' && {\n    display: 'flex',\n    gap: theme.spacing(2),\n    alignItems: 'flex-start',\n  }),\n}));\n\nconst spacingMap = {\n  xs: 1,\n  sm: 2,\n  md: 3,\n  lg: 4,\n  xl: 5,\n};\n\nconst maxWidthMap = {\n  sm: '600px',\n  md: '900px',\n  lg: '1200px',\n  xl: '1536px',\n  full: '100%',\n};\n\nexport const Form = React.forwardRef<HTMLFormElement, FormProps>(\n  ({ variant = 'vertical', maxWidth = 'full', spacing = 'md', children, dataTestId, ...props }, ref) => (\n      <StyledForm ref={ref} variant={variant} role=\"form\" data-testid={dataTestId} {...props}>\n        <Box sx={{ maxWidth: maxWidthMap[maxWidth], width: '100%' }}>\n          {variant === 'inline' ? (\n            children\n          ) : (\n            <Stack spacing={spacingMap[spacing]}>{children}</Stack>\n          )}\n        </Box>\n      </StyledForm>\n    ),\n);\n\nForm.displayName = 'Form';\n\n/**\n * NO ROW GAP HERE, and that is the fix rather than an omission.\n *\n * `FormLabel` already carries `marginBottom: theme.spacing(0.5)` — 4px — and it\n * carries it because it has to: every OTHER user of it (`CepField`,\n * `CategorySelect`, `CreatableSelect`, the three `total-form` fields, five of\n * `@12-apps/discounts`' builders and the host's own `currency-field`) puts a\n * bare `FormLabel` straight inside a `FormControl`, which is a plain block box\n * with no gap of its own. There, the label's own margin is the ONLY thing\n * between the label and the control.\n *\n * A `gap: theme.spacing(1)` here was a second mechanism for that one job, and in\n * a column the two ADD: 8px + 4px put `FormField` at 12px where every one of\n * those siblings sits at 4px. Measured in Chromium at 320x568 on a consuming\n * app's six-field delivery address form, the 8px a row it added pushed the\n * submit button from 561px to 609px — 41px below the fold of the smallest\n * supported phone, i.e. a checkout whose primary action is off-screen.\n *\n * That claim is about `FormLabel`'s own callers, not about the whole package:\n * `Textarea` labels its control through MUI's `InputLabel` at\n * `theme.spacing(1)` and still draws 8px. It composes nothing out of\n * `FormLabel`, so it is a separate inconsistency rather than a reason to keep\n * a second spacing here.\n *\n * ## The `columnGap` is scaffolding, and currently unreachable\n *\n * `FormFieldProps` has no `variant` and `FormField` passes none, so `variant`\n * is ALWAYS undefined and every branch below resolves to the vertical shape.\n * `Form` accepts `variant=\"horizontal\"` and `Form.md` documents it as \"labels\n * beside inputs\", but nothing carries that variant down to the field — so a\n * horizontal form draws vertical rows today. That gap is older than this\n * change and fixing it is a feature, not a spacing fix.\n *\n * The branch is kept, scoped to the COLUMN axis, so that whoever does wire it\n * up inherits the right answer: with the label beside the control, a horizontal\n * gap and a vertical margin are orthogonal and nothing double-counts. A `gap`\n * shorthand there would put the 8px back on the row axis the moment a field\n * wrapped.\n */\nconst StyledFormField = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'variant',\n})<{ variant?: 'vertical' | 'horizontal' }>(\n  ({ theme, variant }) => ({\n    display: variant === 'horizontal' ? 'grid' : 'flex',\n    flexDirection: variant === 'horizontal' ? undefined : 'column',\n    gridTemplateColumns: variant === 'horizontal' ? '200px 1fr' : undefined,\n    columnGap: variant === 'horizontal' ? theme.spacing(1) : undefined,\n    alignItems: variant === 'horizontal' ? 'center' : undefined,\n  }),\n);\n\nexport const FormField: React.FC<FormFieldProps> = ({\n  name,\n  label,\n  required,\n  error,\n  helperText,\n  children,\n  dataTestId,\n}) => (\n    <StyledFormField data-testid={dataTestId}>\n      {label && (\n        <FormLabel required={required} error={!!error} htmlFor={name} dataTestId={dataTestId ? `${dataTestId}-label` : undefined}>\n          {label}\n        </FormLabel>\n      )}\n      <FormControl fullWidth dataTestId={dataTestId ? `${dataTestId}-control` : undefined}>\n        {children}\n        {(error || helperText) && <FormMessage error={!!error} dataTestId={dataTestId ? `${dataTestId}-message` : undefined}>{error || helperText}</FormMessage>}\n      </FormControl>\n    </StyledFormField>\n  );\n\nconst StyledFormLabel = styled('label', {\n  shouldForwardProp: (prop) => prop !== 'error',\n})<{ error?: boolean }>(({ theme, error }) => ({\n  fontSize: '0.875rem',\n  fontWeight: 500,\n  color: error ? theme.palette.error.main : theme.palette.text.primary,\n  marginBottom: theme.spacing(0.5),\n  display: 'block',\n  '&::after': {\n    content: '\" *\"',\n    color: theme.palette.error.main,\n    display: 'var(--required-display, none)',\n  },\n}));\n\nexport const FormLabel: React.FC<FormLabelProps> = ({ required, error, children, htmlFor, dataTestId }) => (\n    <StyledFormLabel\n      error={error}\n      htmlFor={htmlFor}\n      data-testid={dataTestId}\n      style={{ '--required-display': required ? 'inline' : 'none' } as React.CSSProperties}\n    >\n      {children}\n    </StyledFormLabel>\n  );\n\nconst StyledFormControl = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'fullWidth',\n})<{ fullWidth?: boolean }>(({ fullWidth }) => ({\n  width: fullWidth ? '100%' : 'auto',\n  position: 'relative',\n}));\n\nexport const FormControl: React.FC<FormControlProps> = ({ fullWidth = true, children, dataTestId }) =>\n  // Don't pass error prop to the DOM element\n   <StyledFormControl fullWidth={fullWidth} data-testid={dataTestId}>{children}</StyledFormControl>\n;\n\nconst StyledFormMessage = styled('span', {\n  shouldForwardProp: (prop) => prop !== 'error',\n})<{ error?: boolean }>(({ theme, error }) => ({\n  fontSize: '0.75rem',\n  marginTop: theme.spacing(0.5),\n  color: error ? theme.palette.error.main : theme.palette.text.secondary,\n  display: 'block',\n}));\n\nexport const FormMessage: React.FC<FormMessageProps> = ({ error, children, dataTestId }) => <StyledFormMessage error={error} data-testid={dataTestId}>{children}</StyledFormMessage>;\n"],"mappings":"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","names":[]}

package/dist/{chunk-LIQHOLDQ.js → chunk-LYMAMKJT.js}

@@ -8,7 +8,7 @@ import {
   FormControl,
   FormLabel,
   FormMessage
-} from "./chunk-VZO7VREP.js";
+} from "./chunk-IPPTOL53.js";
 
 // src/components/form/total-form/Fields/ToggleField.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -39,4 +39,4 @@ function ToggleField({ name, options, label }) {
 export {
   ToggleField
 };
-//# sourceMappingURL=chunk-LIQHOLDQ.js.map
+//# sourceMappingURL=chunk-LYMAMKJT.js.map

package/dist/{chunk-6I75JTFO.js → chunk-MCZ7536N.js}

@@ -27,6 +27,7 @@ var Separator = ({
       Box,
       {
         className,
+        "data-testid": dataTestId,
         sx: {
           display: "flex",
           alignItems: "center",
@@ -41,11 +42,7 @@ var Separator = ({
             {
               variant: "body2",
               color: "text.secondary",
-              sx: {
-                flexShrink: 0,
-                padding: theme.spacing(0, 1),
-                backgroundColor: theme.palette.background.default
-              },
+              sx: { flexShrink: 0, padding: theme.spacing(0, 1) },
               children
             }
           ),
@@ -69,4 +66,4 @@ var Separator = ({
 export {
   Separator
 };
-//# sourceMappingURL=chunk-6I75JTFO.js.map
+//# sourceMappingURL=chunk-MCZ7536N.js.map

package/dist/chunk-MCZ7536N.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/Separator/Separator.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { separatorMargin, separatorStyles } from './Separator.styles';\nimport type { SeparatorProps } from './Separator.types';\n\nexport const Separator: React.FC<SeparatorProps> = ({\n  variant = 'solid',\n  orientation = 'horizontal',\n  size = 'md',\n  color,\n  margin,\n  length,\n  children,\n  className,\n  'data-testid': dataTestId,\n}) => {\n  const theme = useTheme();\n  const styles = separatorStyles(theme, { variant, orientation, size, color, margin, length });\n\n  if (children) {\n    const isHorizontal = orientation === 'horizontal';\n\n    return (\n      <Box\n        className={className}\n        // The plain branch below has always carried the caller's hook; this one\n        // silently dropped it, so a LABELLED separator was the one variant no\n        // test could address except through its own words.\n        data-testid={dataTestId}\n        sx={{\n          display: 'flex',\n          alignItems: 'center',\n          margin: separatorMargin(size, margin),\n          flexDirection: isHorizontal ? 'row' : 'column',\n          gap: theme.spacing(2),\n        }}\n      >\n        <Box sx={styles} />\n        {/*\n          No background behind the label. The two rules and the words are a FLEX\n          ROW — the rules stop where the label starts — so there is nothing for a\n          background to mask, and painting one made the label a coloured pill on\n          every surface that is not `background.default`. On a white card it read\n          as a highlight nobody had asked for.\n        */}\n        <Typography\n          variant=\"body2\"\n          color=\"text.secondary\"\n          sx={{ flexShrink: 0, padding: theme.spacing(0, 1) }}\n        >\n          {children}\n        </Typography>\n        <Box sx={styles} />\n      </Box>\n    );\n  }\n\n  return (\n    <Box\n      className={className}\n      sx={styles}\n      role=\"separator\"\n      aria-orientation={orientation}\n      data-testid={dataTestId}\n    />\n  );\n};\n"],"mappings":";;;;;;AAAA,OAAO,SAAS;AAChB,OAAO,gBAAgB;AACvB,SAAS,gBAAgB;AAwBnB,SAcE,KAdF;AAlBC,IAAM,YAAsC,CAAC;AAAA,EAClD,UAAU;AAAA,EACV,cAAc;AAAA,EACd,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AACjB,MAAM;AACJ,QAAM,QAAQ,SAAS;AACvB,QAAM,SAAS,gBAAgB,OAAO,EAAE,SAAS,aAAa,MAAM,OAAO,QAAQ,OAAO,CAAC;AAE3F,MAAI,UAAU;AACZ,UAAM,eAAe,gBAAgB;AAErC,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QAIA,eAAa;AAAA,QACb,IAAI;AAAA,UACF,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,QAAQ,gBAAgB,MAAM,MAAM;AAAA,UACpC,eAAe,eAAe,QAAQ;AAAA,UACtC,KAAK,MAAM,QAAQ,CAAC;AAAA,QACtB;AAAA,QAEA;AAAA,8BAAC,OAAI,IAAI,QAAQ;AAAA,UAQjB;AAAA,YAAC;AAAA;AAAA,cACC,SAAQ;AAAA,cACR,OAAM;AAAA,cACN,IAAI,EAAE,YAAY,GAAG,SAAS,MAAM,QAAQ,GAAG,CAAC,EAAE;AAAA,cAEjD;AAAA;AAAA,UACH;AAAA,UACA,oBAAC,OAAI,IAAI,QAAQ;AAAA;AAAA;AAAA,IACnB;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,IAAI;AAAA,MACJ,MAAK;AAAA,MACL,oBAAkB;AAAA,MAClB,eAAa;AAAA;AAAA,EACf;AAEJ;","names":[]}

package/dist/{chunk-TPUIIZN2.js → chunk-MD6T7MDT.js}

@@ -1,13 +1,13 @@
 import {
   FilterDialog,
   GridFilterPanel
-} from "./chunk-ENK4XGKF.js";
+} from "./chunk-CLNTJM3F.js";
 import {
   DataViewsEmpty
 } from "./chunk-4Y65Q3CR.js";
 import {
   InlineFilterControls
-} from "./chunk-DGMR3IMM.js";
+} from "./chunk-CBPQJAHX.js";
 import {
   GridHeaderRow
 } from "./chunk-A4YWFX5C.js";
@@ -237,4 +237,4 @@ function GridShell(props) {
 export {
   GridShell
 };
-//# sourceMappingURL=chunk-TPUIIZN2.js.map
+//# sourceMappingURL=chunk-MD6T7MDT.js.map

package/dist/{chunk-LUWATXU4.js → chunk-OAXAF4VY.js}

@@ -26,7 +26,7 @@ import {
   FormControl,
   FormLabel,
   FormMessage
-} from "./chunk-VZO7VREP.js";
+} from "./chunk-IPPTOL53.js";
 
 // src/components/form/CategorySelect/CategorySelect.tsx
 import { useEffect, useMemo, useRef } from "react";
@@ -158,4 +158,4 @@ function CategorySelect(props) {
 export {
   CategorySelect
 };
-//# sourceMappingURL=chunk-LUWATXU4.js.map
+//# sourceMappingURL=chunk-OAXAF4VY.js.map

package/dist/{chunk-45N6LXUU.js → chunk-OI3HOI74.js}

@@ -2,7 +2,7 @@ import {
   FormControl,
   FormLabel,
   FormMessage
-} from "./chunk-VZO7VREP.js";
+} from "./chunk-IPPTOL53.js";
 import {
   fieldEdge
 } from "./chunk-MLOWPVVW.js";
@@ -158,4 +158,4 @@ function CreatableSelect({
 export {
   CreatableSelect
 };
-//# sourceMappingURL=chunk-45N6LXUU.js.map
+//# sourceMappingURL=chunk-OI3HOI74.js.map

package/dist/{chunk-TUAIPMU7.js → chunk-SRMWCN5D.js}

@@ -1,6 +1,6 @@
 import {
   DataViewsGrid
-} from "./chunk-PLK7UGO6.js";
+} from "./chunk-WME2F2YY.js";
 import {
   DeleteViewDialog
 } from "./chunk-HEDOL2RV.js";
@@ -178,4 +178,4 @@ function renderViewDialogs(ctl, fields, columns, views, testIdPrefix, onSaved) {
 export {
   DataViewsTableBase
 };
-//# sourceMappingURL=chunk-TUAIPMU7.js.map
+//# sourceMappingURL=chunk-SRMWCN5D.js.map

package/dist/{chunk-WFX5GASM.js → chunk-VOOPGAQO.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-4XK6JQ4D.js";
 import {
   CepField
-} from "./chunk-RX6DWIIW.js";
+} from "./chunk-FWCUELBU.js";
 
 // src/components/form/total-form/Fields/CepField.tsx
 import { useCallback, useMemo, useRef } from "react";
@@ -80,4 +80,4 @@ function CepField2({
 export {
   CepField2 as CepField
 };
-//# sourceMappingURL=chunk-WFX5GASM.js.map
+//# sourceMappingURL=chunk-VOOPGAQO.js.map

package/dist/{chunk-PLK7UGO6.js → chunk-WME2F2YY.js}

@@ -1,6 +1,6 @@
 import {
   GridShell
-} from "./chunk-TPUIIZN2.js";
+} from "./chunk-MD6T7MDT.js";
 import {
   useDataViewsState
 } from "./chunk-5VVM2PPV.js";
@@ -27,4 +27,4 @@ function DataViewsGrid(props) {
 export {
   DataViewsGrid
 };
-//# sourceMappingURL=chunk-PLK7UGO6.js.map
+//# sourceMappingURL=chunk-WME2F2YY.js.map

package/dist/{chunk-EE2LBAJH.js → chunk-WPR2HS5B.js}

@@ -1,18 +1,18 @@
 import {
   CepField
-} from "./chunk-WFX5GASM.js";
+} from "./chunk-VOOPGAQO.js";
 import {
   CategoryField
-} from "./chunk-QETBO7EC.js";
+} from "./chunk-GCJLMX63.js";
 import {
   ToggleField
-} from "./chunk-LIQHOLDQ.js";
+} from "./chunk-LYMAMKJT.js";
 import {
   TextField
-} from "./chunk-KNNBIXWJ.js";
+} from "./chunk-ZBOFBRZC.js";
 import {
   SelectField
-} from "./chunk-3ORFVLI3.js";
+} from "./chunk-37YPZHAG.js";
 import {
   __export
 } from "./chunk-PZ5AY32C.js";
@@ -30,4 +30,4 @@ __export(Fields_exports, {
 export {
   Fields_exports
 };
-//# sourceMappingURL=chunk-EE2LBAJH.js.map
+//# sourceMappingURL=chunk-WPR2HS5B.js.map

package/dist/{chunk-KNNBIXWJ.js → chunk-ZBOFBRZC.js}

@@ -8,7 +8,7 @@ import {
   FormControl,
   FormLabel,
   FormMessage
-} from "./chunk-VZO7VREP.js";
+} from "./chunk-IPPTOL53.js";
 
 // src/components/form/total-form/Fields/TextField.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -38,4 +38,4 @@ function TextField({ name, label, type = "text", placeholder }) {
 export {
   TextField
 };
-//# sourceMappingURL=chunk-KNNBIXWJ.js.map
+//# sourceMappingURL=chunk-ZBOFBRZC.js.map

package/dist/data-display/DataViews.js

@@ -1,9 +1,9 @@
 import {
   DataViewsTableBase
-} from "../chunk-TUAIPMU7.js";
+} from "../chunk-SRMWCN5D.js";
 import {
   DataViewsGrid
-} from "../chunk-PLK7UGO6.js";
+} from "../chunk-WME2F2YY.js";
 import {
   BaseCard
 } from "../chunk-6U7NA74A.js";
@@ -22,12 +22,12 @@ import {
   useDragItem
 } from "../chunk-JCJGJX7V.js";
 import "../chunk-ZOLAYP2D.js";
-import "../chunk-TPUIIZN2.js";
-import "../chunk-ENK4XGKF.js";
+import "../chunk-MD6T7MDT.js";
+import "../chunk-CLNTJM3F.js";
 import "../chunk-4Y65Q3CR.js";
-import "../chunk-DGMR3IMM.js";
+import "../chunk-CBPQJAHX.js";
 import "../chunk-5WNQJ5KS.js";
-import "../chunk-O3OU2PPT.js";
+import "../chunk-ES2RN7YV.js";
 import "../chunk-A4YWFX5C.js";
 import "../chunk-ELYLG4F7.js";
 import {
@@ -127,7 +127,7 @@ import "../chunk-XJKMH3RX.js";
 import "../chunk-D2HKCPEH.js";
 import "../chunk-UCU5FCYE.js";
 import "../chunk-N5ZWC6CB.js";
-import "../chunk-LUWATXU4.js";
+import "../chunk-OAXAF4VY.js";
 import "../chunk-MHFJBNDP.js";
 import "../chunk-PU3AAKRR.js";
 import "../chunk-ZUIJ3N7N.js";
@@ -151,7 +151,7 @@ import "../chunk-SJRTT3PA.js";
 import "../chunk-BJ3J6FTN.js";
 import "../chunk-JD364H3Y.js";
 import "../chunk-C3UKR3NT.js";
-import "../chunk-VZO7VREP.js";
+import "../chunk-IPPTOL53.js";
 import "../chunk-KFJKOVDD.js";
 import "../chunk-S5LE2ARG.js";
 import "../chunk-6PRA45LC.js";

package/dist/form/CategorySelect.js

@@ -1,7 +1,7 @@
 import "../chunk-N5ZWC6CB.js";
 import {
   CategorySelect
-} from "../chunk-LUWATXU4.js";
+} from "../chunk-OAXAF4VY.js";
 import "../chunk-MHFJBNDP.js";
 import "../chunk-PU3AAKRR.js";
 import "../chunk-ZUIJ3N7N.js";
@@ -26,7 +26,7 @@ import "../chunk-ZBNTFWTG.js";
 import "../chunk-DMNZD3Q7.js";
 import "../chunk-FCOEJCUP.js";
 import "../chunk-C3UKR3NT.js";
-import "../chunk-VZO7VREP.js";
+import "../chunk-IPPTOL53.js";
 import "../chunk-MLOWPVVW.js";
 import "../chunk-MFU4Y25U.js";
 import "../chunk-PZ5AY32C.js";

package/dist/form/CepField.js

@@ -1,13 +1,13 @@
 import "../chunk-6XLMTOJ3.js";
 import {
   CepField
-} from "../chunk-RX6DWIIW.js";
+} from "../chunk-FWCUELBU.js";
 import "../chunk-QYKDY4EI.js";
 import "../chunk-M3RIC6JI.js";
 import "../chunk-RMSH2I3O.js";
 import "../chunk-SL6454K7.js";
 import "../chunk-C3UKR3NT.js";
-import "../chunk-VZO7VREP.js";
+import "../chunk-IPPTOL53.js";
 import "../chunk-MLOWPVVW.js";
 import "../chunk-HPK33ACY.js";
 import "../chunk-PZ5AY32C.js";

package/dist/form/CreatableSelect.js

@@ -1,8 +1,8 @@
 import {
   CreatableSelect
-} from "../chunk-45N6LXUU.js";
+} from "../chunk-OI3HOI74.js";
 import "../chunk-C3UKR3NT.js";
-import "../chunk-VZO7VREP.js";
+import "../chunk-IPPTOL53.js";
 import "../chunk-MLOWPVVW.js";
 import "../chunk-MFU4Y25U.js";
 import "../chunk-PZ5AY32C.js";

package/dist/form/Form.js

@@ -5,7 +5,7 @@ import {
   FormField,
   FormLabel,
   FormMessage
-} from "../chunk-VZO7VREP.js";
+} from "../chunk-IPPTOL53.js";
 import "../chunk-PZ5AY32C.js";
 export {
   Form,

package/dist/form/total-form.js

@@ -6,21 +6,21 @@ import {
 } from "../chunk-XJUEHG72.js";
 import {
   FormContainer
-} from "../chunk-OK5BHFZE.js";
+} from "../chunk-E6OILRUU.js";
 import {
   Fields_exports
-} from "../chunk-EE2LBAJH.js";
-import "../chunk-WFX5GASM.js";
+} from "../chunk-WPR2HS5B.js";
+import "../chunk-VOOPGAQO.js";
 import {
   CategoryField
-} from "../chunk-QETBO7EC.js";
-import "../chunk-LIQHOLDQ.js";
+} from "../chunk-GCJLMX63.js";
+import "../chunk-LYMAMKJT.js";
 import {
   TextField
-} from "../chunk-KNNBIXWJ.js";
+} from "../chunk-ZBOFBRZC.js";
 import {
   SelectField
-} from "../chunk-3ORFVLI3.js";
+} from "../chunk-37YPZHAG.js";
 import {
   FormContext,
   useFormContext
@@ -30,11 +30,11 @@ import "../chunk-A7LG3AXV.js";
 import "../chunk-II3YNC5S.js";
 import "../chunk-VSLUFBMT.js";
 import "../chunk-6XLMTOJ3.js";
-import "../chunk-RX6DWIIW.js";
+import "../chunk-FWCUELBU.js";
 import "../chunk-JD5BVIM7.js";
 import "../chunk-JXUWWPZR.js";
 import "../chunk-N5ZWC6CB.js";
-import "../chunk-LUWATXU4.js";
+import "../chunk-OAXAF4VY.js";
 import "../chunk-MHFJBNDP.js";
 import "../chunk-PU3AAKRR.js";
 import "../chunk-ZUIJ3N7N.js";
@@ -55,7 +55,7 @@ import "../chunk-M3RIC6JI.js";
 import "../chunk-RMSH2I3O.js";
 import "../chunk-SL6454K7.js";
 import "../chunk-C3UKR3NT.js";
-import "../chunk-VZO7VREP.js";
+import "../chunk-IPPTOL53.js";
 import "../chunk-MLOWPVVW.js";
 import "../chunk-BA4RHQ3B.js";
 import "../chunk-IAQFQNBL.js";

package/dist/layout/Separator.js

@@ -1,7 +1,7 @@
 import "../chunk-CMMPGAMJ.js";
 import {
   Separator
-} from "../chunk-6I75JTFO.js";
+} from "../chunk-MCZ7536N.js";
 import "../chunk-IFPTVHYR.js";
 import "../chunk-PZ5AY32C.js";
 export {

package/dist/social-login-button.js

@@ -4,13 +4,13 @@ import {
   GoogleIcon,
   SocialLoginButton,
   SocialLoginContainer
-} from "./chunk-P2U7C2S7.js";
+} from "./chunk-EB4BTKKY.js";
 import "./chunk-INGPH3YQ.js";
 import "./chunk-6GP2DOOO.js";
 import "./chunk-HQJ75HHI.js";
 import "./chunk-QCIWROKG.js";
 import "./chunk-CMMPGAMJ.js";
-import "./chunk-6I75JTFO.js";
+import "./chunk-MCZ7536N.js";
 import "./chunk-IFPTVHYR.js";
 import "./chunk-VUHLNYAE.js";
 import "./chunk-2GSIEDGN.js";

package/dist/types/components/form/Form/Form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/Form/Form.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EACV,gBAAgB,EAChB,cAAc,EACd,cAAc,EACd,gBAAgB,EAChB,SAAS,EACV,MAAM,cAAc,CAAC;AA6BtB,eAAO,MAAM,IAAI,mFAYhB,CAAC;AAgBF,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAoB5C,CAAC;AAiBJ,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAS5C,CAAC;AASJ,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAEgD,CAClG;AAWD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAAiI,CAAC"}
+{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/Form/Form.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EACV,gBAAgB,EAChB,cAAc,EACd,cAAc,EACd,gBAAgB,EAChB,SAAS,EACV,MAAM,cAAc,CAAC;AA6BtB,eAAO,MAAM,IAAI,mFAYhB,CAAC;AAuDF,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAoB5C,CAAC;AAiBJ,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAS5C,CAAC;AASJ,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAEgD,CAClG;AAWD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAAiI,CAAC"}

package/dist/types/components/layout/Separator/Separator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Separator.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/Separator/Separator.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAExD,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAsD9C,CAAC"}
+{"version":3,"file":"Separator.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/Separator/Separator.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAExD,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA6D9C,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/ui",
-  "version": "6.16.0",
+  "version": "6.17.1",
   "license": "MIT",
   "packageManager": "pnpm@10.34.5",
   "type": "module",

package/src/components/form/Form/Form.md

@@ -85,7 +85,7 @@ Default layout with fields stacked vertically:
 ```
 
 ### Horizontal Layout
-Labels positioned horizontally beside inputs:
+Intended to put labels beside their inputs:
 ```tsx
 <Form variant="horizontal">
   <FormField name="field1" label="Field 1">
@@ -94,6 +94,13 @@ Labels positioned horizontally beside inputs:
 </Form>
 ```
 
+> **Not wired up yet.** `Form` accepts the variant, but nothing carries it down
+> to `FormField` — `FormFieldProps` has no `variant` — so a horizontal form
+> currently draws ordinary vertical rows. The field's styled wrapper still
+> keeps the horizontal branch, scoped to the column axis (see
+> [Row spacing](#row-spacing)), so wiring it up later is a wiring job rather
+> than a re-derivation of the spacing.
+
 ### Inline Layout
 All elements in a single row:
 ```tsx
@@ -103,6 +110,44 @@ All elements in a single row:
 </Form>
 ```
 
+## Row spacing
+
+A label sits **4px** above its control, and exactly one thing puts it there:
+`FormLabel`'s own `marginBottom` (`theme.spacing(0.5)`). `FormMessage` mirrors it
+with the same 4px `marginTop` below the control, so a row reads 4 / control / 4.
+
+`FormField` deliberately adds **nothing** to that. It used to: the wrapper was a
+flex column with `gap: theme.spacing(1)`, and in a column a gap and a margin add
+up — 8 + 4 = 12px, three times what every other user of `FormLabel` draws.
+`CepField`, `CategorySelect`, `CreatableSelect`, the `total-form` fields and
+`@12-apps/discounts`' builders all put a bare `FormLabel` straight inside a
+`FormControl`, which has no gap of its own, so the label's margin is the whole
+of their spacing at 4px. `FormField` was the only one of them that disagreed.
+
+That is a claim about `FormLabel`'s callers, not about every labelled control in
+the package: `Textarea` labels itself through MUI's `InputLabel` at
+`theme.spacing(1)` and draws 8px. It shares no code with `FormLabel`, so it is a
+separate inconsistency — worth settling one day, and no argument for keeping a
+second spacing mechanism here.
+
+Eight pixels a row is invisible on one field and decisive on six. Measured in
+Chromium at 320x568 — the smallest supported viewport — a six-field address form
+put its submit button 41px below the fold.
+
+**There is no `spacing` prop, and that is the answer rather than an omission.**
+A knob here would be a second place to state a decision that already has one, and
+its default would have to be the 4px every other `FormLabel` row draws — so the
+only thing it would buy is the ability to disagree with them. A row that
+genuinely needs more air gets it from the container: `Form`'s own `spacing` sets
+the distance *between* fields, and a caller composing `FormControl` +
+`FormLabel` by hand can space them however it likes.
+
+`variant="horizontal"` keeps a `columnGap` rather than a `gap`. That branch is
+unreachable today (see [Horizontal Layout](#horizontal-layout)), and the axis is
+the reason it is kept rather than deleted: with the label beside the control a
+horizontal gap and a vertical margin are orthogonal, where a `gap` shorthand
+would put the 8px straight back on the row axis as soon as a field wrapped.
+
 ## Validation
 
 Display validation errors and helper text:

package/src/components/form/Form/Form.tsx

@@ -54,6 +54,45 @@ export const Form = React.forwardRef<HTMLFormElement, FormProps>(
 
 Form.displayName = 'Form';
 
+/**
+ * NO ROW GAP HERE, and that is the fix rather than an omission.
+ *
+ * `FormLabel` already carries `marginBottom: theme.spacing(0.5)` — 4px — and it
+ * carries it because it has to: every OTHER user of it (`CepField`,
+ * `CategorySelect`, `CreatableSelect`, the three `total-form` fields, five of
+ * `@12-apps/discounts`' builders and the host's own `currency-field`) puts a
+ * bare `FormLabel` straight inside a `FormControl`, which is a plain block box
+ * with no gap of its own. There, the label's own margin is the ONLY thing
+ * between the label and the control.
+ *
+ * A `gap: theme.spacing(1)` here was a second mechanism for that one job, and in
+ * a column the two ADD: 8px + 4px put `FormField` at 12px where every one of
+ * those siblings sits at 4px. Measured in Chromium at 320x568 on a consuming
+ * app's six-field delivery address form, the 8px a row it added pushed the
+ * submit button from 561px to 609px — 41px below the fold of the smallest
+ * supported phone, i.e. a checkout whose primary action is off-screen.
+ *
+ * That claim is about `FormLabel`'s own callers, not about the whole package:
+ * `Textarea` labels its control through MUI's `InputLabel` at
+ * `theme.spacing(1)` and still draws 8px. It composes nothing out of
+ * `FormLabel`, so it is a separate inconsistency rather than a reason to keep
+ * a second spacing here.
+ *
+ * ## The `columnGap` is scaffolding, and currently unreachable
+ *
+ * `FormFieldProps` has no `variant` and `FormField` passes none, so `variant`
+ * is ALWAYS undefined and every branch below resolves to the vertical shape.
+ * `Form` accepts `variant="horizontal"` and `Form.md` documents it as "labels
+ * beside inputs", but nothing carries that variant down to the field — so a
+ * horizontal form draws vertical rows today. That gap is older than this
+ * change and fixing it is a feature, not a spacing fix.
+ *
+ * The branch is kept, scoped to the COLUMN axis, so that whoever does wire it
+ * up inherits the right answer: with the label beside the control, a horizontal
+ * gap and a vertical margin are orthogonal and nothing double-counts. A `gap`
+ * shorthand there would put the 8px back on the row axis the moment a field
+ * wrapped.
+ */
 const StyledFormField = styled(Box, {
   shouldForwardProp: (prop) => prop !== 'variant',
 })<{ variant?: 'vertical' | 'horizontal' }>(
@@ -61,7 +100,7 @@ const StyledFormField = styled(Box, {
     display: variant === 'horizontal' ? 'grid' : 'flex',
     flexDirection: variant === 'horizontal' ? undefined : 'column',
     gridTemplateColumns: variant === 'horizontal' ? '200px 1fr' : undefined,
-    gap: theme.spacing(1),
+    columnGap: variant === 'horizontal' ? theme.spacing(1) : undefined,
     alignItems: variant === 'horizontal' ? 'center' : undefined,
   }),
 );

package/src/components/layout/Separator/Separator.tsx

@@ -26,6 +26,10 @@ export const Separator: React.FC<SeparatorProps> = ({
     return (
       <Box
         className={className}
+        // The plain branch below has always carried the caller's hook; this one
+        // silently dropped it, so a LABELLED separator was the one variant no
+        // test could address except through its own words.
+        data-testid={dataTestId}
         sx={{
           display: 'flex',
           alignItems: 'center',
@@ -35,14 +39,17 @@ export const Separator: React.FC<SeparatorProps> = ({
         }}
       >
         <Box sx={styles} />
+        {/*
+          No background behind the label. The two rules and the words are a FLEX
+          ROW — the rules stop where the label starts — so there is nothing for a
+          background to mask, and painting one made the label a coloured pill on
+          every surface that is not `background.default`. On a white card it read
+          as a highlight nobody had asked for.
+        */}
         <Typography
           variant="body2"
           color="text.secondary"
-          sx={{
-            flexShrink: 0,
-            padding: theme.spacing(0, 1),
-            backgroundColor: theme.palette.background.default,
-          }}
+          sx={{ flexShrink: 0, padding: theme.spacing(0, 1) }}
         >
           {children}
         </Typography>

package/dist/chunk-6I75JTFO.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/layout/Separator/Separator.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { separatorMargin, separatorStyles } from './Separator.styles';\nimport type { SeparatorProps } from './Separator.types';\n\nexport const Separator: React.FC<SeparatorProps> = ({\n  variant = 'solid',\n  orientation = 'horizontal',\n  size = 'md',\n  color,\n  margin,\n  length,\n  children,\n  className,\n  'data-testid': dataTestId,\n}) => {\n  const theme = useTheme();\n  const styles = separatorStyles(theme, { variant, orientation, size, color, margin, length });\n\n  if (children) {\n    const isHorizontal = orientation === 'horizontal';\n\n    return (\n      <Box\n        className={className}\n        sx={{\n          display: 'flex',\n          alignItems: 'center',\n          margin: separatorMargin(size, margin),\n          flexDirection: isHorizontal ? 'row' : 'column',\n          gap: theme.spacing(2),\n        }}\n      >\n        <Box sx={styles} />\n        <Typography\n          variant=\"body2\"\n          color=\"text.secondary\"\n          sx={{\n            flexShrink: 0,\n            padding: theme.spacing(0, 1),\n            backgroundColor: theme.palette.background.default,\n          }}\n        >\n          {children}\n        </Typography>\n        <Box sx={styles} />\n      </Box>\n    );\n  }\n\n  return (\n    <Box\n      className={className}\n      sx={styles}\n      role=\"separator\"\n      aria-orientation={orientation}\n      data-testid={dataTestId}\n    />\n  );\n};\n"],"mappings":";;;;;;AAAA,OAAO,SAAS;AAChB,OAAO,gBAAgB;AACvB,SAAS,gBAAgB;AAwBnB,SAUE,KAVF;AAlBC,IAAM,YAAsC,CAAC;AAAA,EAClD,UAAU;AAAA,EACV,cAAc;AAAA,EACd,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AACjB,MAAM;AACJ,QAAM,QAAQ,SAAS;AACvB,QAAM,SAAS,gBAAgB,OAAO,EAAE,SAAS,aAAa,MAAM,OAAO,QAAQ,OAAO,CAAC;AAE3F,MAAI,UAAU;AACZ,UAAM,eAAe,gBAAgB;AAErC,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,IAAI;AAAA,UACF,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,QAAQ,gBAAgB,MAAM,MAAM;AAAA,UACpC,eAAe,eAAe,QAAQ;AAAA,UACtC,KAAK,MAAM,QAAQ,CAAC;AAAA,QACtB;AAAA,QAEA;AAAA,8BAAC,OAAI,IAAI,QAAQ;AAAA,UACjB;AAAA,YAAC;AAAA;AAAA,cACC,SAAQ;AAAA,cACR,OAAM;AAAA,cACN,IAAI;AAAA,gBACF,YAAY;AAAA,gBACZ,SAAS,MAAM,QAAQ,GAAG,CAAC;AAAA,gBAC3B,iBAAiB,MAAM,QAAQ,WAAW;AAAA,cAC5C;AAAA,cAEC;AAAA;AAAA,UACH;AAAA,UACA,oBAAC,OAAI,IAAI,QAAQ;AAAA;AAAA;AAAA,IACnB;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,IAAI;AAAA,MACJ,MAAK;AAAA,MACL,oBAAkB;AAAA,MAClB,eAAa;AAAA;AAAA,EACf;AAEJ;","names":[]}

package/dist/chunk-VZO7VREP.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/form/Form/Form.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport Stack from '@mui/material/Stack/index.js';\nimport { styled } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport type {\n  FormControlProps,\n  FormFieldProps,\n  FormLabelProps,\n  FormMessageProps,\n  FormProps,\n} from './Form.types';\n\nconst StyledForm = styled('form', {\n  shouldForwardProp: (prop) => prop !== 'variant',\n})<{ variant?: FormProps['variant'] }>(({ theme, variant }) => ({\n  width: '100%',\n  ...(variant === 'inline' && {\n    display: 'flex',\n    gap: theme.spacing(2),\n    alignItems: 'flex-start',\n  }),\n}));\n\nconst spacingMap = {\n  xs: 1,\n  sm: 2,\n  md: 3,\n  lg: 4,\n  xl: 5,\n};\n\nconst maxWidthMap = {\n  sm: '600px',\n  md: '900px',\n  lg: '1200px',\n  xl: '1536px',\n  full: '100%',\n};\n\nexport const Form = React.forwardRef<HTMLFormElement, FormProps>(\n  ({ variant = 'vertical', maxWidth = 'full', spacing = 'md', children, dataTestId, ...props }, ref) => (\n      <StyledForm ref={ref} variant={variant} role=\"form\" data-testid={dataTestId} {...props}>\n        <Box sx={{ maxWidth: maxWidthMap[maxWidth], width: '100%' }}>\n          {variant === 'inline' ? (\n            children\n          ) : (\n            <Stack spacing={spacingMap[spacing]}>{children}</Stack>\n          )}\n        </Box>\n      </StyledForm>\n    ),\n);\n\nForm.displayName = 'Form';\n\nconst StyledFormField = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'variant',\n})<{ variant?: 'vertical' | 'horizontal' }>(\n  ({ theme, variant }) => ({\n    display: variant === 'horizontal' ? 'grid' : 'flex',\n    flexDirection: variant === 'horizontal' ? undefined : 'column',\n    gridTemplateColumns: variant === 'horizontal' ? '200px 1fr' : undefined,\n    gap: theme.spacing(1),\n    alignItems: variant === 'horizontal' ? 'center' : undefined,\n  }),\n);\n\nexport const FormField: React.FC<FormFieldProps> = ({\n  name,\n  label,\n  required,\n  error,\n  helperText,\n  children,\n  dataTestId,\n}) => (\n    <StyledFormField data-testid={dataTestId}>\n      {label && (\n        <FormLabel required={required} error={!!error} htmlFor={name} dataTestId={dataTestId ? `${dataTestId}-label` : undefined}>\n          {label}\n        </FormLabel>\n      )}\n      <FormControl fullWidth dataTestId={dataTestId ? `${dataTestId}-control` : undefined}>\n        {children}\n        {(error || helperText) && <FormMessage error={!!error} dataTestId={dataTestId ? `${dataTestId}-message` : undefined}>{error || helperText}</FormMessage>}\n      </FormControl>\n    </StyledFormField>\n  );\n\nconst StyledFormLabel = styled('label', {\n  shouldForwardProp: (prop) => prop !== 'error',\n})<{ error?: boolean }>(({ theme, error }) => ({\n  fontSize: '0.875rem',\n  fontWeight: 500,\n  color: error ? theme.palette.error.main : theme.palette.text.primary,\n  marginBottom: theme.spacing(0.5),\n  display: 'block',\n  '&::after': {\n    content: '\" *\"',\n    color: theme.palette.error.main,\n    display: 'var(--required-display, none)',\n  },\n}));\n\nexport const FormLabel: React.FC<FormLabelProps> = ({ required, error, children, htmlFor, dataTestId }) => (\n    <StyledFormLabel\n      error={error}\n      htmlFor={htmlFor}\n      data-testid={dataTestId}\n      style={{ '--required-display': required ? 'inline' : 'none' } as React.CSSProperties}\n    >\n      {children}\n    </StyledFormLabel>\n  );\n\nconst StyledFormControl = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'fullWidth',\n})<{ fullWidth?: boolean }>(({ fullWidth }) => ({\n  width: fullWidth ? '100%' : 'auto',\n  position: 'relative',\n}));\n\nexport const FormControl: React.FC<FormControlProps> = ({ fullWidth = true, children, dataTestId }) =>\n  // Don't pass error prop to the DOM element\n   <StyledFormControl fullWidth={fullWidth} data-testid={dataTestId}>{children}</StyledFormControl>\n;\n\nconst StyledFormMessage = styled('span', {\n  shouldForwardProp: (prop) => prop !== 'error',\n})<{ error?: boolean }>(({ theme, error }) => ({\n  fontSize: '0.75rem',\n  marginTop: theme.spacing(0.5),\n  color: error ? theme.palette.error.main : theme.palette.text.secondary,\n  display: 'block',\n}));\n\nexport const FormMessage: React.FC<FormMessageProps> = ({ error, children, dataTestId }) => <StyledFormMessage error={error} data-testid={dataTestId}>{children}</StyledFormMessage>;\n"],"mappings":"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","names":[]}