@12-apps/ui 6.15.0 → 6.15.1

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

@@ -1 +1 @@
-{"version":3,"file":"PhoneInput.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/PhoneInput/PhoneInput.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,EAAE,EAAC,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAc,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAmRtE,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CA2E1C,CAAC;AAGF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"PhoneInput.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/PhoneInput/PhoneInput.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,EAAE,EAAC,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAc,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAqRtE,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CA2E1C,CAAC;AAGF,eAAe,UAAU,CAAC"}

package/dist/types/components/form/RadioGroup/RadioGroup.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/RadioGroup/RadioGroup.styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AAyFtE,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,WAAW,GAAI,OAAO,KAAK,EAAE,QAAQ,OAAO,EAAE,QAAQ,OAAO,KAAG,SAY3E,CAAC;AAuCH,eAAO,MAAM,WAAW,GAAI,OAAO,KAAK,EAAE,OAAO,YAAY,KAAG,SAwB/D,CAAC;AA6CF,eAAO,MAAM,aAAa,GAAI,OAAO,KAAK,EAAE,OAAO,YAAY,KAAG,SAmBjE,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAC7B,OAAO,KAAK,EACZ,QAAQ,OAAO,EACf,oBAAuB,KACtB,SAcF,CAAC;AAkBF,eAAO,MAAM,eAAe,GAAI,OAAO,KAAK,EAAE,OAAO,YAAY,KAAG,SA4BnE,CAAC"}
+{"version":3,"file":"RadioGroup.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/RadioGroup/RadioGroup.styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AA2FtE,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,WAAW,GAAI,OAAO,KAAK,EAAE,QAAQ,OAAO,EAAE,QAAQ,OAAO,KAAG,SAY3E,CAAC;AAuCH,eAAO,MAAM,WAAW,GAAI,OAAO,KAAK,EAAE,OAAO,YAAY,KAAG,SAwB/D,CAAC;AA6CF,eAAO,MAAM,aAAa,GAAI,OAAO,KAAK,EAAE,OAAO,YAAY,KAAG,SAmBjE,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAC7B,OAAO,KAAK,EACZ,QAAQ,OAAO,EACf,oBAAuB,KACtB,SAcF,CAAC;AAkBF,eAAO,MAAM,eAAe,GAAI,OAAO,KAAK,EAAE,OAAO,YAAY,KAAG,SA4BnE,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"RichTextEditor.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/RichTextEditor/RichTextEditor.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAI1C,OAAO,KAAK,EAAE,mBAAmB,EAAiB,MAAM,wBAAwB,CAAC;AA0EjF,eAAO,MAAM,cAAc,4FAoE1B,CAAC;AAIF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"RichTextEditor.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/RichTextEditor/RichTextEditor.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAI1C,OAAO,KAAK,EAAE,mBAAmB,EAAiB,MAAM,wBAAwB,CAAC;AA4EjF,eAAO,MAAM,cAAc,4FAoE1B,CAAC;AAIF,eAAe,cAAc,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/Select/Select.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AA4KlD,eAAO,MAAM,MAAM,iGAiFlB,CAAC"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/Select/Select.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AA8KlD,eAAO,MAAM,MAAM,iGAiFlB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/Textarea/Textarea.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAmC,MAAM,OAAO,CAAC;AAwBxD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAkMtD,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA+E5C,CAAC"}
+{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/Textarea/Textarea.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAmC,MAAM,OAAO,CAAC;AAwBxD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAoMtD,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA+E5C,CAAC"}

package/dist/types/components/form/Textarea/Textarea.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/Textarea/Textarea.styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AA2BtE,eAAO,MAAM,cAAc;;;;;UAU1B,CAAC;AAEF,KAAK,eAAe,GAAG;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AA6BF,eAAO,MAAM,iBAAiB,GAAI,OAAO,KAAK,EAAE,OAAO,MAAM,KAAG,eAa/D,CAAC;AAKF,eAAO,MAAM,sBAAsB,GAAI,iDAMpC;IACD,KAAK,EAAE,KAAK,CAAC;IACb,YAAY,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9D,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,KAAG,SAuCH,CAAC"}
+{"version":3,"file":"Textarea.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/Textarea/Textarea.styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AA6BtE,eAAO,MAAM,cAAc;;;;;UAU1B,CAAC;AAEF,KAAK,eAAe,GAAG;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AA6BF,eAAO,MAAM,iBAAiB,GAAI,OAAO,KAAK,EAAE,OAAO,MAAM,KAAG,eAa/D,CAAC;AAKF,eAAO,MAAM,sBAAsB,GAAI,iDAMpC;IACD,KAAK,EAAE,KAAK,CAAC;IACb,YAAY,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9D,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,KAAG,SAuCH,CAAC"}

package/dist/types/components/form/Textarea/TextareaRichEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextareaRichEditor.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/Textarea/TextareaRichEditor.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAG3D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AA2T3D,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC;IACxC;;;;OAIG;IACH,IAAI,EAAE,qBAAqB,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAyCA,CAAC"}
+{"version":3,"file":"TextareaRichEditor.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/Textarea/TextareaRichEditor.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAG3D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AA6T3D,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC;IACxC;;;;OAIG;IACH,IAAI,EAAE,qBAAqB,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAyCA,CAAC"}

package/dist/types/components/form/Toggle/Toggle.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/Toggle/Toggle.styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAgB,KAAK,EAAE,MAAM,+BAA+B,CAAC;AAapF,UAAU,aAAa;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,MAAM,CAAC;CACtB;AAiBD,eAAO,MAAM,iBAAiB,GAAI,OAAO,KAAK,EAAE,OAAO,MAAM,KAAG,aAqB/D,CAAC;AAUF,eAAO,MAAM,UAAU,GACrB,OAAO,KAAK,EACZ,cAAc,aAAa,EAC3B,YAAY,MAAM,KACjB,SAoED,CAAC;AAEH,eAAO,MAAM,aAAa,GACxB,eAAe,MAAM,GAAG,SAAS,EACjC,cAAc,aAAa,KAC1B,SA2BF,CAAC;AAEF,UAAU,aAAa;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAID,eAAO,MAAM,YAAY,GACvB,OAAO,KAAK,EACZ,cAAc,aAAa,EAC3B,2BAA2B,aAAa,KACvC,SA0BD,CAAC"}
+{"version":3,"file":"Toggle.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/Toggle/Toggle.styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAgB,KAAK,EAAE,MAAM,+BAA+B,CAAC;AAepF,UAAU,aAAa;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,MAAM,CAAC;CACtB;AAiBD,eAAO,MAAM,iBAAiB,GAAI,OAAO,KAAK,EAAE,OAAO,MAAM,KAAG,aAqB/D,CAAC;AAUF,eAAO,MAAM,UAAU,GACrB,OAAO,KAAK,EACZ,cAAc,aAAa,EAC3B,YAAY,MAAM,KACjB,SAoED,CAAC;AAEH,eAAO,MAAM,aAAa,GACxB,eAAe,MAAM,GAAG,SAAS,EACjC,cAAc,aAAa,KAC1B,SA2BF,CAAC;AAEF,UAAU,aAAa;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAID,eAAO,MAAM,YAAY,GACvB,OAAO,KAAK,EACZ,cAAc,aAAa,EAC3B,2BAA2B,aAAa,KACvC,SA0BD,CAAC"}

package/dist/types/tokens/field-edge.d.ts

@@ -0,0 +1,80 @@
+import type { Theme } from '@mui/material/styles/index.js';
+/**
+ * THE EDGE THAT TELLS YOU WHERE A FIELD IS.
+ *
+ * Every outlined control in this package drew its resting border from
+ * `alpha(theme.palette.divider, 0.23)` — or 0.2, or 0.18, or 0.42 for the
+ * underline. On the MUI default theme that expression is harmless, and that is
+ * exactly why it survived: MUI's own light `divider` is `rgba(0, 0, 0, 0.12)`,
+ * and `alpha()` REPLACES the alpha channel rather than multiplying it, so
+ * `alpha(divider, 0.23)` resolves to `rgba(0, 0, 0, 0.23)` — byte for byte the
+ * border MUI's own `OutlinedInput` ships. The line reads like a restatement of
+ * the default because, against the default, it is one.
+ *
+ * Give it a theme whose `divider` is an OPAQUE hex and the same expression
+ * collapses. A themed divider is already a hairline — a pale warm cream, a pale
+ * green-grey — chosen to separate two rows INSIDE a card. Fading that to 23%
+ * over the card it sits on leaves a border the same colour as the card:
+ *
+ * | theme                          | resolved border | ratio |
+ * |--------------------------------|-----------------|-------|
+ * | MUI default (`rgba(0,0,0,.12)`)| `#C4C4C4`       | 1.74:1|
+ * | a warm hairline `#EBD9C7`      | `#FAF6F2`       | 1.08:1|
+ * | a cool hairline `#D7DDD5`      | `#EDF0EC`       | 1.06:1|
+ *
+ * 1.06:1 is not a faint border, it is no border: the field is invisible until
+ * you click into it. Both failing rows are real adopter themes, and neither
+ * adopter did anything wrong — they set `palette.divider`, which is what a theme
+ * is for.
+ *
+ * **So the fault is using `divider` for this at all**, not the alpha on top of
+ * it. Even at FULL strength those hairlines are 1.26:1 and 1.27:1 against their
+ * own paper. A row separator and a control boundary are different jobs with
+ * different floors, and only one of them has a number in the spec.
+ *
+ * ## The floor, and why it is measured rather than picked
+ *
+ * WCAG 2.1 SC 1.4.11 (Non-text Contrast) puts a control's own boundary at
+ * {@link MIN_UI_CONTRAST}. A hex cannot satisfy that on its own, because the
+ * ratio is a fact about a PAIR — the same border is fine on white and gone on a
+ * dark card. So {@link fieldEdge} takes the theme's hairline as a SEED and walks
+ * it away from the surface until it clears, which means:
+ *
+ *  - a theme whose divider already clears keeps its own colour, untouched;
+ *  - one that does not gets the nearest tone of ITS OWN hairline that does, so
+ *    the border still looks like the theme's, just visible;
+ *  - dark mode needs no second table — the walk lightens on a dark surface for
+ *    the same reason it darkens on a light one.
+ *
+ * This is the argument `readableInk` makes for text in `@12-apps/app-shell`,
+ * applied to the boundary rather than the ink. It is not imported from there:
+ * that package depends on THIS one, so the edge would be a cycle.
+ *
+ * ## What this does NOT touch
+ *
+ * Hover and focus, which every control already draws in `primary.main` — a
+ * corrected brand colour that clears the floor by construction. The resting
+ * state was the only one you could not see, and it is the one that matters,
+ * because it is the state a field is in before anyone has found it.
+ */
+/**
+ * WCAG 2.1 SC 1.4.11 — the contrast a control's own boundary owes the surface
+ * behind it.
+ *
+ * 3:1 rather than the 4.5:1 the same spec asks of body text: a border is a
+ * shape, not a glyph, so it stays findable at a lower ratio. It is a FLOOR and
+ * not a target — {@link fieldEdge} stops at the first tone that clears it, so a
+ * theme with a stronger hairline keeps the stronger one.
+ */
+export declare const MIN_UI_CONTRAST = 3;
+/**
+ * The resting boundary for a form control on `surface`.
+ *
+ * `surface` defaults to `background.paper` because that is what a field sits on
+ * in the overwhelming majority of cases — a dialog, a card, a form panel. A
+ * control on a deliberately different ground (a tinted strip, a glass pane over
+ * a photo) should pass the ground it is actually on; the answer is only as good
+ * as the pair it is given.
+ */
+export declare function fieldEdge(theme: Theme, surface?: string): string;
+//# sourceMappingURL=field-edge.d.ts.map

package/dist/types/tokens/field-edge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-edge.d.ts","sourceRoot":"","sources":["../../../src/tokens/field-edge.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AAE3D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyDG;AAEH;;;;;;;;GAQG;AACH,eAAO,MAAM,eAAe,IAAI,CAAC;AAkCjC;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAkBhE"}

package/dist/user-avatar.js

@@ -1,7 +1,7 @@
 import {
   UserAvatar,
   UserMenu
-} from "./chunk-MUFI3ZXS.js";
+} from "./chunk-DQIQKIEA.js";
 import "./chunk-UDQSIRAP.js";
 import "./chunk-QIV73V2X.js";
 import "./chunk-LYNJJV2X.js";
@@ -12,9 +12,9 @@ import "./chunk-D2IASECY.js";
 import "./chunk-VMF3UXM4.js";
 import "./chunk-RI5JZLZL.js";
 import "./chunk-BA4RHQ3B.js";
-import "./chunk-6HLRXICF.js";
-import "./chunk-NYUGX76C.js";
+import "./chunk-IAQFQNBL.js";
 import "./chunk-AUYC5K5K.js";
+import "./chunk-NYUGX76C.js";
 import "./chunk-VRHBJXZ7.js";
 import "./chunk-PZ5AY32C.js";
 export {

package/package.json

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

package/src/components/form/AddressAutocomplete/AddressTextField.tsx

@@ -6,6 +6,8 @@ import React from 'react';
 
 import type { AddressAutocompleteProps } from './AddressAutocomplete.types';
 
+import { fieldEdge } from '../../../tokens/field-edge';
+
 // Kept module-local on purpose: the inferred type of a styled() component cannot
 // be named across a module boundary here (TS2742), so the plain component below
 // is what the rest of the folder imports.
@@ -14,7 +16,7 @@ const GlassTextField = styled(TextField)(({ theme }) => ({
     background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.8)} 0%, ${alpha(theme.palette.background.paper, 0.6)} 100%)`,
     backdropFilter: 'blur(10px)',
     WebkitBackdropFilter: 'blur(10px)',
-    border: `1px solid ${alpha(theme.palette.divider, 0.18)}`,
+    border: `1px solid ${fieldEdge(theme)}`,
     transition: theme.transitions.create(['border-color', 'box-shadow', 'background']),
     '&:hover': {
       background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.9)} 0%, ${alpha(theme.palette.background.paper, 0.7)} 100%)`,

package/src/components/form/CategorySelect/CategorySelect.styles.ts

@@ -1,5 +1,7 @@
 import { alpha, type CSSObject, type Theme } from '@mui/material/styles/index.js';
 
+import { fieldEdge } from '../../../tokens/field-edge';
+
 /**
  * The prototype's METRICS, verbatim.
  *
@@ -51,7 +53,7 @@ export const triggerSx = (theme: Theme, selected: boolean, open: boolean): CSSOb
     height: METRICS.triggerHeight,
     padding: '0 10px 0 12px',
     borderRadius: `${METRICS.triggerRadius}px`,
-    border: `1px solid ${open || selected ? brand.edge : theme.palette.divider}`,
+    border: `1px solid ${open || selected ? brand.edge : fieldEdge(theme)}`,
     background: selected ? brand.soft : theme.palette.background.paper,
     color: selected ? brand.ink : theme.palette.text.primary,
     font: 'inherit',

package/src/components/form/CodeEditor/CodeEditor.tsx

@@ -12,6 +12,8 @@ import { useCodeEditor } from './CodeEditor.hooks';
 import type { CodeEditorProps } from './CodeEditor.types';
 import { EditorToolbar } from './CodeEditorToolbar';
 
+import { fieldEdge } from '../../../tokens/field-edge';
+
 // Styled components
 const EditorContainer = styled(Paper)(({ theme }) => ({
   display: 'flex',
@@ -19,7 +21,7 @@ const EditorContainer = styled(Paper)(({ theme }) => ({
   background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.98)} 0%, ${alpha(theme.palette.background.paper, 0.95)} 100%)`,
   backdropFilter: 'blur(10px)',
   WebkitBackdropFilter: 'blur(10px)',
-  border: `1px solid ${alpha(theme.palette.divider, 0.18)}`,
+  border: `1px solid ${fieldEdge(theme)}`,
   borderRadius: theme.shape.borderRadius * 2,
   overflow: 'hidden' }));
 

package/src/components/form/CreatableSelect/CreatableSelect.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { alpha } from '@mui/material/styles/index.js';
+import type { Theme } from '@mui/material/styles/index.js';
 import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete/index.js';
 import type { AutocompleteRenderInputParams } from '@mui/material/Autocomplete/index.js';
 import CircularProgress from '@mui/material/CircularProgress/index.js';
@@ -12,6 +12,8 @@ import { FormControl, FormLabel, FormMessage } from '../Form';
 import type { CreatableSelectOption, CreatableSelectProps } from './CreatableSelect.types';
 import type { SizeValue } from '../../../tokens/scales';
 
+import { fieldEdge } from '../../../tokens/field-edge';
+
 /** Internal option shape: a real option, or the synthetic "create new" row. */
 interface InternalOption extends CreatableSelectOption {
   /** True for the synthetic row that triggers {@link CreatableSelectProps.onCreate}. */
@@ -35,7 +37,7 @@ const MUI_SIZE = { xs: 'small', sm: 'small', md: 'medium', lg: 'medium', xl: 'me
 const fieldSx = {
   '& .MuiOutlinedInput-root': {
     '& fieldset': {
-      borderColor: (theme: { palette: { divider: string } }) => alpha(theme.palette.divider, 0.23),
+      borderColor: (theme: Theme) => fieldEdge(theme),
     },
     '&:hover fieldset': { borderColor: 'primary.main' },
     '&.Mui-focused fieldset': { borderColor: 'primary.main', borderWidth: 2 },

package/src/components/form/Input/Input.styles.ts

@@ -3,6 +3,8 @@ import type { CSSObject, Theme } from '@mui/material/styles/index.js';
 
 import type { InputProps } from './Input.types';
 
+import { fieldEdge } from '../../../tokens/field-edge';
+
 type InputVariant = NonNullable<InputProps['variant']>;
 
 // Define pulse animation
@@ -90,7 +92,7 @@ export const inputBaseStyles = (theme: Theme, variant?: InputVariant): CSSObject
       return {
         backgroundColor: alpha(theme.palette.background.paper, 0.1),
         backdropFilter: 'blur(20px)',
-        border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
+        border: `1px solid ${fieldEdge(theme)}`,
         '&:hover': {
           backgroundColor: alpha(theme.palette.background.paper, 0.15),
           borderColor: alpha(theme.palette.primary.main, 0.3),
@@ -104,7 +106,7 @@ export const inputBaseStyles = (theme: Theme, variant?: InputVariant): CSSObject
     case 'underline':
       return {
         '&:before': {
-          borderBottomColor: alpha(theme.palette.divider, 0.42),
+          borderBottomColor: fieldEdge(theme),
         },
         '&:hover:not(.Mui-disabled):before': {
           borderBottomColor: theme.palette.primary.main,
@@ -155,7 +157,7 @@ const gradientStyles = (theme: Theme): CSSObject => ({
 
 export const outlinedStyles = (theme: Theme): CSSObject => ({
   '& fieldset': {
-    borderColor: alpha(theme.palette.divider, 0.23),
+    borderColor: fieldEdge(theme),
   },
   '&:hover fieldset': {
     borderColor: theme.palette.primary.main,

package/src/components/form/InputOTP/InputOTP.styles.ts

@@ -1,6 +1,8 @@
 import { alpha } from '@mui/material/styles/index.js';
 import type { CSSObject, Theme } from '@mui/material/styles/index.js';
 
+import { fieldEdge } from '../../../tokens/field-edge';
+
 interface ColorPalette {
   main: string;
   dark?: string;
@@ -82,7 +84,7 @@ export const otpSlotSx = (theme: Theme, flags: OtpSlotFlags): CSSObject => {
       ...(glass && {
         backgroundColor: alpha(theme.palette.background.paper, 0.1),
         backdropFilter: 'blur(20px)',
-        '& fieldset': { border: `1px solid ${alpha(theme.palette.divider, 0.2)}` },
+        '& fieldset': { border: `1px solid ${fieldEdge(theme)}` },
       }),
       ...(gradient && {
         '&.Mui-focused fieldset': {

package/src/components/form/PhoneInput/PhoneInput.tsx

@@ -17,6 +17,8 @@ import { usePhoneInput } from './PhoneInput.hooks';
 import type { CountryData,PhoneInputProps } from './PhoneInput.types';
 import type { PhoneInputCopy } from '../../../copy';
 
+import { fieldEdge } from '../../../tokens/field-edge';
+
 // Country data with expanded support
 
 // Styled components
@@ -25,7 +27,7 @@ const GlassTextField = styled(TextField)(({ theme }) => ({
     background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.8)} 0%, ${alpha(theme.palette.background.paper, 0.6)} 100%)`,
     backdropFilter: 'blur(10px)',
     WebkitBackdropFilter: 'blur(10px)',
-    border: `1px solid ${alpha(theme.palette.divider, 0.18)}`,
+    border: `1px solid ${fieldEdge(theme)}`,
     transition: theme.transitions.create(['border-color', 'box-shadow', 'background']),
     '&:hover': {
       background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.9)} 0%, ${alpha(theme.palette.background.paper, 0.7)} 100%)`,

package/src/components/form/RadioGroup/RadioGroup.styles.ts

@@ -3,6 +3,8 @@ import type { CSSObject, Theme } from '@mui/material/styles/index.js';
 
 import { glowAnimation, rippleAnimation, scaleAnimation, slideAnimation } from './RadioGroup.animations';
 
+import { fieldEdge } from '../../../tokens/field-edge';
+
 interface ColorPalette {
   main: string;
   dark?: string;
@@ -119,7 +121,7 @@ const cardBase = (theme: Theme, flags: SurfaceFlags, palette: ColorPalette): CSS
   return {
     cursor: 'pointer',
     transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
-    border: `2px solid ${selected ? palette.main : alpha(theme.palette.divider, 0.3)}`,
+    border: `2px solid ${selected ? palette.main : fieldEdge(theme)}`,
     backgroundColor: selected ? alpha(palette.main, 0.05) : theme.palette.background.paper,
     position: 'relative' as const,
     overflow: 'hidden' as const,
@@ -183,7 +185,7 @@ const buttonBase = (theme: Theme, flags: SurfaceFlags, palette: ColorPalette): C
     borderRadius: theme.spacing(1),
     transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
     fontWeight: 500,
-    border: `2px solid ${selected ? palette.main : alpha(theme.palette.divider, 0.5)}`,
+    border: `2px solid ${selected ? palette.main : fieldEdge(theme)}`,
     backgroundColor: selected ? palette.main : 'transparent',
     color: selected ? palette.contrastText || '#fff' : theme.palette.text.primary,
     position: 'relative' as const,

package/src/components/form/RichTextEditor/RichTextEditor.tsx

@@ -8,6 +8,8 @@ import { useRichTextEditor } from './RichTextEditor.hooks';
 import type { RichTextEditorProps, ToolbarConfig } from './RichTextEditor.types';
 import { RichTextEditorToolbar } from './RichTextEditorToolbar';
 
+import { fieldEdge } from '../../../tokens/field-edge';
+
 const DEFAULT_TOOLBAR: Required<Omit<ToolbarConfig, 'customItems'>> & Pick<ToolbarConfig, 'customItems'> = {
   bold: true,
   italic: true,
@@ -68,7 +70,7 @@ const editorContentSx = (theme: Theme, disabled: boolean, placeholder?: string,
   '& a': { color: theme.palette.primary.main, textDecoration: 'underline' } });
 
 const shellSx = (theme: Theme, isFocused: boolean, disabled: boolean) => ({
-  border: `1px solid ${alpha(theme.palette.divider, 0.12)}`,
+  border: `1px solid ${fieldEdge(theme)}`,
   borderRadius: 1,
   overflow: 'hidden',
   transition: 'border-color 0.2s ease-in-out',

package/src/components/form/Select/Select.tsx

@@ -8,6 +8,8 @@ import React from 'react';
 
 import type { SelectProps } from './Select.types';
 
+import { fieldEdge } from '../../../tokens/field-edge';
+
 // Define pulse animation
 const pulseAnimation = keyframes`
   0% {
@@ -57,7 +59,7 @@ const pulseStyles = (theme: Theme): CSSObject => ({
 const glassVariant = (theme: Theme): CSSObject => ({
   backgroundColor: alpha(theme.palette.background.paper, 0.1),
   backdropFilter: 'blur(20px)',
-  border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
+  border: `1px solid ${fieldEdge(theme)}`,
   '& fieldset': { border: 'none' },
   '&:hover': {
     backgroundColor: alpha(theme.palette.background.paper, 0.15),
@@ -105,7 +107,7 @@ const gradientVariant = (theme: Theme): CSSObject => ({
 
 /** `default` variant: standard outlined borders with hover/focus/error states. */
 const defaultVariant = (theme: Theme): CSSObject => ({
-  '& fieldset': { borderColor: alpha(theme.palette.divider, 0.23) },
+  '& fieldset': { borderColor: fieldEdge(theme) },
   '&:hover fieldset': { borderColor: theme.palette.primary.main },
   '&.Mui-focused fieldset': { borderColor: theme.palette.primary.main, borderWidth: 2 },
   '&.Mui-error fieldset': { borderColor: theme.palette.error.main },

package/src/components/form/Textarea/Textarea.styles.ts

@@ -1,6 +1,8 @@
 import { alpha, keyframes } from '@mui/material/styles/index.js';
 import type { CSSObject, Theme } from '@mui/material/styles/index.js';
 
+import { fieldEdge } from '../../../tokens/field-edge';
+
 const glowAnimation = keyframes`
   0% {
     box-shadow: 0 0 5px currentColor;
@@ -107,7 +109,7 @@ const glassStyles = glass
   ? {
       backgroundColor: alpha(theme.palette.background.paper, 0.1),
       backdropFilter: 'blur(20px)',
-      border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
+      border: `1px solid ${fieldEdge(theme)}`,
       '&:hover': {
         backgroundColor: alpha(theme.palette.background.paper, 0.15),
         backdropFilter: 'blur(25px)',

package/src/components/form/Textarea/Textarea.tsx

@@ -30,6 +30,8 @@ const TextareaRichEditor = lazy(async () => ({
   default: (await import('./TextareaRichEditor')).TextareaRichEditor }));
 import type { TextareaProps } from './Textarea.types';
 
+import { fieldEdge } from '../../../tokens/field-edge';
+
 // Interface for styled component props
 interface StyledTextareaProps {
   customVariant?: string;
@@ -71,7 +73,7 @@ const StyledTextarea = styled(TextareaAutosize, {
     width: '100%',
     fontFamily: theme.typography.fontFamily,
     borderRadius: theme.spacing(1),
-    border: `2px solid ${error ? errorColor.main : theme.palette.divider}`,
+    border: `2px solid ${error ? errorColor.main : fieldEdge(theme)}`,
     backgroundColor: theme.palette.background.paper,
     color: theme.palette.text.primary,
     transition: 'all 0.3s ease',
@@ -108,7 +110,7 @@ const StyledLabel = styled(InputLabel, {
     backdropFilter: 'blur(10px)',
     padding: '4px 8px',
     borderRadius: '4px',
-    border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
+    border: `1px solid ${fieldEdge(theme)}`,
     display: 'inline-block' }) }));
 
 // IconWrapper - replaced with inline Box component for better TypeScript compatibility

package/src/components/form/Textarea/TextareaRichEditor.tsx

@@ -19,6 +19,8 @@ import React, { useEffect, useRef, useState } from 'react';
 import { floatAnimation, getColorFromTheme } from './Textarea.styles';
 import type { RichEditorToolbarCopy } from '../../../copy';
 
+import { fieldEdge } from '../../../tokens/field-edge';
+
 const RichToolbar = styled(Box)<{ glass?: boolean }>(({ theme, glass }) => ({
   display: 'flex',
   alignItems: 'center',
@@ -104,7 +106,7 @@ const ContentEditableDiv = styled('div')<{
     minHeight: '120px',
     padding: theme.spacing(1.5),
     borderRadius: `0 0 ${theme.spacing(1)} ${theme.spacing(1)}`,
-    border: `2px solid ${error ? errorColor.main : focused ? colorPalette.main : theme.palette.divider}`,
+    border: `2px solid ${error ? errorColor.main : focused ? colorPalette.main : fieldEdge(theme)}`,
     borderTop: 'none',
     backgroundColor: glass
       ? alpha(theme.palette.background.paper, 0.1)

package/src/components/form/Toggle/Toggle.styles.ts

@@ -1,6 +1,8 @@
 import { alpha, keyframes } from '@mui/material/styles/index.js';
 import type { CSSObject, PaletteColor, Theme } from '@mui/material/styles/index.js';
 
+import { fieldEdge } from '../../../tokens/field-edge';
+
 const glowAnimation = keyframes`
   0% { box-shadow: 0 0 5px currentColor; }
   50% { box-shadow: 0 0 15px currentColor, 0 0 25px currentColor; }
@@ -74,7 +76,7 @@ export const baseStyles = (
   fontWeight: 500,
   borderRadius: theme.spacing(1),
   transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
-  border: `2px solid ${alpha(theme.palette.divider, 0.3)}`,
+  border: `2px solid ${fieldEdge(theme)}`,
   color: theme.palette.text.primary,
   backgroundColor: 'transparent',
   position: 'relative',

package/src/tokens/field-edge.ts

@@ -0,0 +1,141 @@
+import {
+  darken,
+  decomposeColor,
+  getContrastRatio,
+  getLuminance,
+  hslToRgb,
+  lighten,
+  recomposeColor,
+} from '@mui/material/styles/index.js';
+import type { Theme } from '@mui/material/styles/index.js';
+
+/**
+ * THE EDGE THAT TELLS YOU WHERE A FIELD IS.
+ *
+ * Every outlined control in this package drew its resting border from
+ * `alpha(theme.palette.divider, 0.23)` — or 0.2, or 0.18, or 0.42 for the
+ * underline. On the MUI default theme that expression is harmless, and that is
+ * exactly why it survived: MUI's own light `divider` is `rgba(0, 0, 0, 0.12)`,
+ * and `alpha()` REPLACES the alpha channel rather than multiplying it, so
+ * `alpha(divider, 0.23)` resolves to `rgba(0, 0, 0, 0.23)` — byte for byte the
+ * border MUI's own `OutlinedInput` ships. The line reads like a restatement of
+ * the default because, against the default, it is one.
+ *
+ * Give it a theme whose `divider` is an OPAQUE hex and the same expression
+ * collapses. A themed divider is already a hairline — a pale warm cream, a pale
+ * green-grey — chosen to separate two rows INSIDE a card. Fading that to 23%
+ * over the card it sits on leaves a border the same colour as the card:
+ *
+ * | theme                          | resolved border | ratio |
+ * |--------------------------------|-----------------|-------|
+ * | MUI default (`rgba(0,0,0,.12)`)| `#C4C4C4`       | 1.74:1|
+ * | a warm hairline `#EBD9C7`      | `#FAF6F2`       | 1.08:1|
+ * | a cool hairline `#D7DDD5`      | `#EDF0EC`       | 1.06:1|
+ *
+ * 1.06:1 is not a faint border, it is no border: the field is invisible until
+ * you click into it. Both failing rows are real adopter themes, and neither
+ * adopter did anything wrong — they set `palette.divider`, which is what a theme
+ * is for.
+ *
+ * **So the fault is using `divider` for this at all**, not the alpha on top of
+ * it. Even at FULL strength those hairlines are 1.26:1 and 1.27:1 against their
+ * own paper. A row separator and a control boundary are different jobs with
+ * different floors, and only one of them has a number in the spec.
+ *
+ * ## The floor, and why it is measured rather than picked
+ *
+ * WCAG 2.1 SC 1.4.11 (Non-text Contrast) puts a control's own boundary at
+ * {@link MIN_UI_CONTRAST}. A hex cannot satisfy that on its own, because the
+ * ratio is a fact about a PAIR — the same border is fine on white and gone on a
+ * dark card. So {@link fieldEdge} takes the theme's hairline as a SEED and walks
+ * it away from the surface until it clears, which means:
+ *
+ *  - a theme whose divider already clears keeps its own colour, untouched;
+ *  - one that does not gets the nearest tone of ITS OWN hairline that does, so
+ *    the border still looks like the theme's, just visible;
+ *  - dark mode needs no second table — the walk lightens on a dark surface for
+ *    the same reason it darkens on a light one.
+ *
+ * This is the argument `readableInk` makes for text in `@12-apps/app-shell`,
+ * applied to the boundary rather than the ink. It is not imported from there:
+ * that package depends on THIS one, so the edge would be a cycle.
+ *
+ * ## What this does NOT touch
+ *
+ * Hover and focus, which every control already draws in `primary.main` — a
+ * corrected brand colour that clears the floor by construction. The resting
+ * state was the only one you could not see, and it is the one that matters,
+ * because it is the state a field is in before anyone has found it.
+ */
+
+/**
+ * WCAG 2.1 SC 1.4.11 — the contrast a control's own boundary owes the surface
+ * behind it.
+ *
+ * 3:1 rather than the 4.5:1 the same spec asks of body text: a border is a
+ * shape, not a glyph, so it stays findable at a lower ratio. It is a FLOOR and
+ * not a target — {@link fieldEdge} stops at the first tone that clears it, so a
+ * theme with a stronger hairline keeps the stronger one.
+ */
+export const MIN_UI_CONTRAST = 3;
+
+/** How far one step of the walk moves, and how many steps before it gives up. */
+const STEP = 0.05;
+const MAX_STEPS = 20;
+
+/**
+ * A colour as an opaque `rgb()`, with any translucency resolved against
+ * `surface`.
+ *
+ * Needed because `getContrastRatio` reads the channels it is given and ignores
+ * the alpha, so handing it an `rgba()` measures a colour nobody sees. Every
+ * failing border above was translucent, so skipping this would compute the ratio
+ * of the hairline itself — 1.26:1, still a failure, but the wrong number for the
+ * wrong reason.
+ */
+function flatten(colour: string, surface: string): string {
+  const decomposed = decomposeColor(colour);
+  const rgb = decomposed.type.startsWith('hsl')
+    ? decomposeColor(hslToRgb(colour))
+    : decomposed;
+  const [r, g, b] = rgb.values;
+  const alpha = rgb.values[3] ?? 1;
+  if (alpha >= 1) return recomposeColor({ type: 'rgb', values: [r, g, b] });
+
+  const behind = decomposeColor(surface);
+  const base = behind.type.startsWith('hsl') ? decomposeColor(hslToRgb(surface)) : behind;
+  const blend = (fg: number, bg: number): number => Math.round(alpha * fg + (1 - alpha) * bg);
+  return recomposeColor({
+    type: 'rgb',
+    values: [blend(r, base.values[0]), blend(g, base.values[1]), blend(b, base.values[2])],
+  });
+}
+
+/**
+ * The resting boundary for a form control on `surface`.
+ *
+ * `surface` defaults to `background.paper` because that is what a field sits on
+ * in the overwhelming majority of cases — a dialog, a card, a form panel. A
+ * control on a deliberately different ground (a tinted strip, a glass pane over
+ * a photo) should pass the ground it is actually on; the answer is only as good
+ * as the pair it is given.
+ */
+export function fieldEdge(theme: Theme, surface?: string): string {
+  const ground = flatten(surface ?? theme.palette.background.paper, '#FFFFFF');
+  const seed = flatten(theme.palette.divider, ground);
+  if (getContrastRatio(seed, ground) >= MIN_UI_CONTRAST) return seed;
+
+  // Away from the surface, whichever way that is — so one rule serves both
+  // modes, and a dark card in a light theme is still handled by the pair rather
+  // than by `palette.mode`.
+  const away = getLuminance(ground) > 0.5 ? darken : lighten;
+  for (let step = 1; step <= MAX_STEPS; step += 1) {
+    // From the SEED each time rather than compounding the previous result, so
+    // the walk lands on the nearest passing tone instead of overshooting past it.
+    const candidate = away(seed, step * STEP);
+    if (getContrastRatio(candidate, ground) >= MIN_UI_CONTRAST) return candidate;
+  }
+  // Unreachable for any real surface — black clears 21:1 on white and white
+  // clears it on black — but a caller must never be handed `undefined`.
+  return getLuminance(ground) > 0.5 ? '#000000' : '#FFFFFF';
+}