@12-apps/ui 6.32.0 → 6.33.1

package/dist/form/total-form.js

@@ -1,3 +1,6 @@
+import {
+  SubmitButton
+} from "../chunk-JPXG7IFW.js";
 import {
   FormErrorSnackbar
 } from "../chunk-XJUEHG72.js";
@@ -6,10 +9,11 @@ import {
 } from "../chunk-E6OILRUU.js";
 import {
   Fields_exports
-} from "../chunk-5NH24MF5.js";
+} from "../chunk-TUYN6XZI.js";
+import "../chunk-2SKNSQCP.js";
 import {
   CategoryField
-} from "../chunk-DAQ2ZDU2.js";
+} from "../chunk-LE7IHEU4.js";
 import "../chunk-KAPKMVKR.js";
 import {
   TextField
@@ -17,10 +21,6 @@ import {
 import {
   SelectField
 } from "../chunk-65JHGT5F.js";
-import "../chunk-2SKNSQCP.js";
-import {
-  SubmitButton
-} from "../chunk-JPXG7IFW.js";
 import {
   FormContext,
   useFormContext
@@ -35,21 +35,21 @@ import "../chunk-JXUWWPZR.js";
 import "../chunk-6XLMTOJ3.js";
 import "../chunk-5FA5S2YN.js";
 import "../chunk-N5ZWC6CB.js";
-import "../chunk-3NA7AO6H.js";
+import "../chunk-URWNRC2P.js";
 import "../chunk-LMXWI3DD.js";
-import "../chunk-MGP5LLEK.js";
+import "../chunk-IGO5DC7D.js";
+import "../chunk-V6Z4XS3I.js";
 import "../chunk-NU3EQX2L.js";
 import "../chunk-MQZDTGGJ.js";
 import "../chunk-67N6TH6E.js";
+import "../chunk-XHHR6G35.js";
 import "../chunk-PH5XJGKJ.js";
 import "../chunk-KMUSTQA6.js";
 import "../chunk-DMNZD3Q7.js";
 import "../chunk-LGLHU55A.js";
-import "../chunk-V6Z4XS3I.js";
 import "../chunk-RZVUY2MO.js";
 import "../chunk-USJPZ5Q7.js";
 import "../chunk-R2AZOWEZ.js";
-import "../chunk-XHHR6G35.js";
 import "../chunk-PN4HVM43.js";
 import "../chunk-QYKDY4EI.js";
 import "../chunk-P3L42CBB.js";

package/dist/icons.js

@@ -1,6 +1,6 @@
 import {
   Icon
-} from "./chunk-NLBIG5LU.js";
+} from "./chunk-IZBDSPTW.js";
 import {
   ICON_NAMES,
   ICON_PATHS
@@ -10,10 +10,11 @@ import {
   ICON_SIZES,
   iconSize
 } from "./chunk-RTSK5OZT.js";
-import "./chunk-H4NWU2ZN.js";
-import "./chunk-2DJIS2WQ.js";
+import "./chunk-TK36COCP.js";
+import "./chunk-KCBAPMLH.js";
 import "./chunk-TYJR4GOF.js";
-import "./chunk-3DO5MFXA.js";
+import "./chunk-XCP5L665.js";
+import "./chunk-YKCAJ2TN.js";
 import "./chunk-7ZPUN7TV.js";
 import "./chunk-PT6TCWIW.js";
 import "./chunk-CGO452DC.js";

package/dist/layout/Box.js

@@ -1,14 +1,15 @@
 import {
   Box
-} from "../chunk-YZKA7UJK.js";
+} from "../chunk-GCWF5AQE.js";
 import {
   resolveBoxLayout
 } from "../chunk-7V6ZRQYW.js";
 import "../chunk-OCUVKI63.js";
-import "../chunk-H4NWU2ZN.js";
-import "../chunk-2DJIS2WQ.js";
+import "../chunk-TK36COCP.js";
+import "../chunk-KCBAPMLH.js";
 import "../chunk-TYJR4GOF.js";
-import "../chunk-3DO5MFXA.js";
+import "../chunk-XCP5L665.js";
+import "../chunk-YKCAJ2TN.js";
 import "../chunk-7ZPUN7TV.js";
 import "../chunk-PT6TCWIW.js";
 import "../chunk-CGO452DC.js";

package/dist/layout/ContentToolbar.js

@@ -1,4 +1,7 @@
 import "../chunk-MOLQGQEQ.js";
+import {
+  ContentToolbar
+} from "../chunk-SZB2Z6QN.js";
 import {
   ColumnsMenu
 } from "../chunk-MMPJ2MCE.js";
@@ -18,9 +21,6 @@ import "../chunk-VNHLYDTX.js";
 import {
   FilterTrigger
 } from "../chunk-JLWAYBOP.js";
-import {
-  ContentToolbar
-} from "../chunk-SZB2Z6QN.js";
 import "../chunk-CGO452DC.js";
 import "../chunk-GDN2LUTZ.js";
 import "../chunk-7FDU3FIN.js";

package/dist/layout/Separator.js

@@ -1,8 +1,8 @@
 import "../chunk-CMMPGAMJ.js";
 import {
   Separator
-} from "../chunk-MCZ7536N.js";
-import "../chunk-IFPTVHYR.js";
+} from "../chunk-Q4CAZ2TP.js";
+import "../chunk-CAHWCSRE.js";
 import "../chunk-PZ5AY32C.js";
 export {
   Separator

package/dist/layout/SettingsLayout.js

@@ -1,8 +1,8 @@
 import {
   SettingsLayout
-} from "../chunk-WMALDOF5.js";
-import "../chunk-7JO3ES5P.js";
-import "../chunk-Q2NOONAN.js";
+} from "../chunk-3QNSTLGC.js";
+import "../chunk-A4JH5FAL.js";
+import "../chunk-PRVK3U6U.js";
 import "../chunk-BXC6GRLE.js";
 import "../chunk-IE7ISTLQ.js";
 import "../chunk-4M6CEQVK.js";

package/dist/layout/Skeleton.js

@@ -1,10 +1,10 @@
 import "../chunk-724ZONOL.js";
 import {
   Skeleton
-} from "../chunk-YD77RANW.js";
+} from "../chunk-7VN7LFBA.js";
+import "../chunk-7WDPC46N.js";
 import "../chunk-ZOW2CCMO.js";
 import "../chunk-BRMGHMYB.js";
-import "../chunk-7WDPC46N.js";
 import "../chunk-TYJR4GOF.js";
 import "../chunk-PZ5AY32C.js";
 export {

package/dist/layout/Stack.js

@@ -1,14 +1,15 @@
 import {
   Stack
-} from "../chunk-U3ON6YW3.js";
+} from "../chunk-NNAACCN2.js";
 import "../chunk-4GGH6ZQ7.js";
-import "../chunk-YZKA7UJK.js";
+import "../chunk-GCWF5AQE.js";
 import "../chunk-7V6ZRQYW.js";
 import "../chunk-OCUVKI63.js";
-import "../chunk-H4NWU2ZN.js";
-import "../chunk-2DJIS2WQ.js";
+import "../chunk-TK36COCP.js";
+import "../chunk-KCBAPMLH.js";
 import "../chunk-TYJR4GOF.js";
-import "../chunk-3DO5MFXA.js";
+import "../chunk-XCP5L665.js";
+import "../chunk-YKCAJ2TN.js";
 import "../chunk-7ZPUN7TV.js";
 import "../chunk-PT6TCWIW.js";
 import "../chunk-CGO452DC.js";

package/dist/navigation/AppHeader.js

@@ -6,10 +6,10 @@ import {
 import {
   AppHeaderIdentity,
   AppHeaderStatus
-} from "../chunk-R2I3LUUH.js";
+} from "../chunk-FTCCYWF4.js";
 import {
   AppHeaderDetails
-} from "../chunk-5U4SJ2DA.js";
+} from "../chunk-FHA4G5XF.js";
 import {
   AppHeaderBrand
 } from "../chunk-H37GIAAM.js";
@@ -18,17 +18,17 @@ import {
   highlightOf,
   initialsOf
 } from "../chunk-IQU4HKND.js";
-import "../chunk-B4BU5CS6.js";
-import "../chunk-AZ2KKHID.js";
+import "../chunk-LZHXF66R.js";
+import "../chunk-VF2XC76U.js";
 import "../chunk-OLZTGVBT.js";
 import "../chunk-CRN4KKNI.js";
 import "../chunk-JBMBFYFA.js";
 import "../chunk-U437KFDI.js";
 import "../chunk-F52N6ACD.js";
-import "../chunk-D6HDJVQW.js";
-import "../chunk-GYXUCS37.js";
-import "../chunk-5KEMPCW4.js";
+import "../chunk-O4PKQ46C.js";
+import "../chunk-RGCRXDGZ.js";
 import "../chunk-VM3HRSAU.js";
+import "../chunk-GYXUCS37.js";
 import "../chunk-73BEVJCS.js";
 import "../chunk-6MDBMCFK.js";
 import "../chunk-QRUCR4YZ.js";
@@ -37,7 +37,8 @@ import "../chunk-TAMIZE4Q.js";
 import "../chunk-TYJR4GOF.js";
 import "../chunk-AKZWDZCZ.js";
 import "../chunk-HPK33ACY.js";
-import "../chunk-3DO5MFXA.js";
+import "../chunk-XCP5L665.js";
+import "../chunk-YKCAJ2TN.js";
 import "../chunk-7ZPUN7TV.js";
 import "../chunk-PT6TCWIW.js";
 import "../chunk-CGO452DC.js";

package/dist/navigation/CommandPalette.js

@@ -1,11 +1,11 @@
 import "../chunk-P5WJUR7X.js";
 import {
   CommandPalette
-} from "../chunk-PXH24VIP.js";
+} from "../chunk-B6IURHSZ.js";
 import "../chunk-SQSFMZTF.js";
+import "../chunk-5EIW2FZY.js";
 import "../chunk-SUZXPDUQ.js";
 import "../chunk-4VRDFZ4G.js";
-import "../chunk-5EIW2FZY.js";
 import "../chunk-PZ5AY32C.js";
 export {
   CommandPalette

package/dist/provider.js

@@ -1,15 +1,16 @@
 import {
   UiProvider
-} from "./chunk-5KZR3RXL.js";
+} from "./chunk-OFVYNUYV.js";
 import "./chunk-XZTRZ3HO.js";
 import {
   useUiTheme
-} from "./chunk-H4NWU2ZN.js";
+} from "./chunk-TK36COCP.js";
 import {
   muiThemeOptionsFrom,
   uiThemeFromMui
-} from "./chunk-2DJIS2WQ.js";
-import "./chunk-3DO5MFXA.js";
+} from "./chunk-KCBAPMLH.js";
+import "./chunk-XCP5L665.js";
+import "./chunk-YKCAJ2TN.js";
 import "./chunk-7ZPUN7TV.js";
 import "./chunk-PT6TCWIW.js";
 import "./chunk-CGO452DC.js";

package/dist/social-login-button.js

@@ -4,15 +4,15 @@ import {
   GoogleIcon,
   SocialLoginButton,
   SocialLoginContainer
-} from "./chunk-JPNPXNFH.js";
+} from "./chunk-K7BBMXY7.js";
 import "./chunk-INGPH3YQ.js";
 import "./chunk-6GP2DOOO.js";
 import "./chunk-7A3G4W52.js";
 import "./chunk-RAWQMBX6.js";
 import "./chunk-GXEB6MJA.js";
 import "./chunk-CMMPGAMJ.js";
-import "./chunk-MCZ7536N.js";
-import "./chunk-IFPTVHYR.js";
+import "./chunk-Q4CAZ2TP.js";
+import "./chunk-CAHWCSRE.js";
 import "./chunk-VUHLNYAE.js";
 import "./chunk-2GSIEDGN.js";
 import "./chunk-AIRWM7KK.js";

package/dist/tokens.js

@@ -1,6 +1,13 @@
 import {
   accentFor
-} from "./chunk-3DO5MFXA.js";
+} from "./chunk-XCP5L665.js";
+import {
+  rem,
+  remPx,
+  rems,
+  resetRootFontCache,
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
 import {
   COLOR_VALUES,
   SIZE_VALUES,
@@ -122,6 +129,11 @@ export {
   muiSize,
   paletteKey,
   px,
-  recomposeColor
+  recomposeColor,
+  rem,
+  remPx,
+  rems,
+  resetRootFontCache,
+  sxRem
 };
 //# sourceMappingURL=tokens.js.map

package/dist/types/components/feedback/Dialog/Dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../../../src/components/feedback/Dialog/Dialog.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,OAAO,KAAK,EACV,kBAAkB,EAClB,kBAAkB,EAClB,iBAAiB,EACjB,WAAW,EACZ,MAAM,gBAAgB,CAAC;AA+CxB,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA+ExC,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAqEpD,CAAC;AA0BF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAsBpD,CAAC;AAEJ,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA6BtD,CAAC"}
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../../../src/components/feedback/Dialog/Dialog.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,OAAO,KAAK,EACV,kBAAkB,EAClB,kBAAkB,EAClB,iBAAiB,EACjB,WAAW,EACZ,MAAM,gBAAgB,CAAC;AAiFxB,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAuExC,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAqEpD,CAAC;AA0BF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAsBpD,CAAC;AAEJ,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA6BtD,CAAC"}

package/dist/types/components/feedback/Dialog/Dialog.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/feedback/Dialog/Dialog.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AAGpE,OAAO,KAAK,EAAE,kBAAkB,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAwCnF,oFAAoF;AACpF,UAAU,mBAAmB;IAC3B,OAAO,EAAE,aAAa,CAAC;IACvB,IAAI,EAAE,UAAU,CAAC;IACjB,YAAY,EAAE,kBAAkB,CAAC;IACjC,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,OAAO,CAAC;CAChB;AAgFD,wBAAgB,eAAe,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,mBAAmB,GAAG,OAAO,CAAC,KAAK,CAAC,CAoDvF;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO;;;EAQxD"}
+{"version":3,"file":"Dialog.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/feedback/Dialog/Dialog.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AAGpE,OAAO,KAAK,EAAE,kBAAkB,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAwCnF,oFAAoF;AACpF,UAAU,mBAAmB;IAC3B,OAAO,EAAE,aAAa,CAAC;IACvB,IAAI,EAAE,UAAU,CAAC;IACjB,YAAY,EAAE,kBAAkB,CAAC;IACjC,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,OAAO,CAAC;CAChB;AAgFD,wBAAgB,eAAe,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,mBAAmB,GAAG,OAAO,CAAC,KAAK,CAAC,CAwDvF;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO;;;EAQxD"}

package/dist/types/components/form/UploadButton/UploadButton.parts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UploadButton.parts.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/UploadButton/UploadButton.parts.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAE9D,iDAAiD;AACjD,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,gBAAgB,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAED,iCAAiC;AACjC,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,UAAU,EACV,WAAW,EACX,MAAM,EACN,UAAU,EACV,IAAI,GACL,EAAE,YAAY,GAAG;IAAE,UAAU,EAAE,OAAO,CAAC;IAAC,IAAI,EAAE,YAAY,CAAA;CAAE,GAAG,KAAK,CAAC,YAAY,CA8CjF;AAKD,gCAAgC;AAChC,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,UAAU,EACV,WAAW,EACX,MAAM,EACN,OAAO,EACP,WAAW,GACZ,EAAE,YAAY,GAAG;IAChB,OAAO,EAAE,WAAW,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC,CAAC;IACnD,WAAW,EAAE,OAAO,CAAC;CACtB,GAAG,KAAK,CAAC,YAAY,CAoBrB;AAoCD,iEAAiE;AACjE,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,WAAW,EACX,QAAQ,EACR,UAAU,EACV,QAAQ,EACR,KAAK,EACL,OAAO,EACP,gBAAgB,GACjB,EAAE;IACD,IAAI,EAAE,gBAAgB,CAAC;IACvB,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gBAAgB,EAAE,OAAO,CAAC;CAC3B,GAAG,KAAK,CAAC,YAAY,CA4CrB"}
+{"version":3,"file":"UploadButton.parts.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/UploadButton/UploadButton.parts.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAYzD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAE9D,iDAAiD;AACjD,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,gBAAgB,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAED,iCAAiC;AACjC,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,UAAU,EACV,WAAW,EACX,MAAM,EACN,UAAU,EACV,IAAI,GACL,EAAE,YAAY,GAAG;IAAE,UAAU,EAAE,OAAO,CAAC;IAAC,IAAI,EAAE,YAAY,CAAA;CAAE,GAAG,KAAK,CAAC,YAAY,CA8CjF;AAKD,gCAAgC;AAChC,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,UAAU,EACV,WAAW,EACX,MAAM,EACN,OAAO,EACP,WAAW,GACZ,EAAE,YAAY,GAAG;IAChB,OAAO,EAAE,WAAW,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC,CAAC;IACnD,WAAW,EAAE,OAAO,CAAC;CACtB,GAAG,KAAK,CAAC,YAAY,CAoBrB;AAoCD,iEAAiE;AACjE,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,WAAW,EACX,QAAQ,EACR,UAAU,EACV,QAAQ,EACR,KAAK,EACL,OAAO,EACP,gBAAgB,GACjB,EAAE;IACD,IAAI,EAAE,gBAAgB,CAAC;IACvB,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gBAAgB,EAAE,OAAO,CAAC;CAC3B,GAAG,KAAK,CAAC,YAAY,CA4CrB"}

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,CA6D9C,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,CAgE9C,CAAC"}

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

@@ -3,6 +3,16 @@ import type { SeparatorProps, SeparatorSize } from './Separator.types';
 /** An explicit `margin` wins; otherwise the size picks one. */
 export declare const separatorMargin: (size: SeparatorSize, margin?: number | string) => number | string;
 type SeparatorStyleArgs = Required<Pick<SeparatorProps, 'variant' | 'orientation' | 'size'>> & Pick<SeparatorProps, 'color' | 'margin' | 'length'>;
+/**
+ * The separator's margin, on the axis it separates along only: above and below
+ * a horizontal rule, either side of a vertical one. A margin given as a string
+ * carries its own units; a number is pixels.
+ *
+ * The LABELLED separator uses this too. It used to hand the number straight to
+ * `sx.margin`, where a number is SPACING UNITS — `md`'s 16 drew 128px on all
+ * four sides, against 16px above and below for the unlabelled one.
+ */
+export declare const separatorBlockMargin: (size: SeparatorSize, margin: number | string | undefined, isHorizontal: boolean) => string;
 export declare const separatorStyles: (theme: Theme, { variant, orientation, size, color, margin, length }: SeparatorStyleArgs) => CSSObject;
 export {};
 //# sourceMappingURL=Separator.styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Separator.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/Separator/Separator.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AAEtE,OAAO,KAAK,EAEV,cAAc,EACd,aAAa,EAEd,MAAM,mBAAmB,CAAC;AAqB3B,+DAA+D;AAC/D,eAAO,MAAM,eAAe,GAC1B,MAAM,aAAa,EACnB,SAAS,MAAM,GAAG,MAAM,KACvB,MAAM,GAAG,MAAmD,CAAC;AAyDhE,KAAK,kBAAkB,GAAG,QAAQ,CAChC,IAAI,CAAC,cAAc,EAAE,SAAS,GAAG,aAAa,GAAG,MAAM,CAAC,CACzD,GACC,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,QAAQ,GAAG,QAAQ,CAAC,CAAC;AAEtD,eAAO,MAAM,eAAe,GAC1B,OAAO,KAAK,EACZ,uDAAuD,kBAAkB,KACxE,SA8BF,CAAC"}
+{"version":3,"file":"Separator.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/Separator/Separator.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AAEtE,OAAO,KAAK,EAEV,cAAc,EACd,aAAa,EAEd,MAAM,mBAAmB,CAAC;AAqB3B,+DAA+D;AAC/D,eAAO,MAAM,eAAe,GAC1B,MAAM,aAAa,EACnB,SAAS,MAAM,GAAG,MAAM,KACvB,MAAM,GAAG,MAAmD,CAAC;AAyDhE,KAAK,kBAAkB,GAAG,QAAQ,CAChC,IAAI,CAAC,cAAc,EAAE,SAAS,GAAG,aAAa,GAAG,MAAM,CAAC,CACzD,GACC,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,QAAQ,GAAG,QAAQ,CAAC,CAAC;AAEtD;;;;;;;;GAQG;AACH,eAAO,MAAM,oBAAoB,GAC/B,MAAM,aAAa,EACnB,QAAQ,MAAM,GAAG,MAAM,GAAG,SAAS,EACnC,cAAc,OAAO,KACpB,MAIF,CAAC;AAEF,eAAO,MAAM,eAAe,GAC1B,OAAO,KAAK,EACZ,uDAAuD,kBAAkB,KACxE,SA0BF,CAAC"}

package/dist/types/components/layout/SettingsLayout/SettingsLayout.items.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SettingsLayout.items.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/SettingsLayout/SettingsLayout.items.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EACV,mBAAmB,EACnB,gBAAgB,EAChB,eAAe,EACf,kBAAkB,EAClB,sBAAsB,EACvB,MAAM,wBAAwB,CAAC;AAEhC,qEAAqE;AACrE,MAAM,WAAW,SAAS;IACxB,OAAO,EAAE,kBAAkB,CAAC;IAC5B,UAAU,EAAE,sBAAsB,CAAC;IACnC,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,UAAU,aAAc,SAAQ,SAAS;IACvC,IAAI,EAAE,eAAe,CAAC;IACtB,MAAM,EAAE,OAAO,CAAC;IAChB,aAAa,CAAC,EAAE,mBAAmB,CAAC,eAAe,CAAC,CAAC;IACrD,YAAY,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,iFAAiF;IACjF,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,YAAY,EAAE,MAAM,CAAC;CACtB;AAgCD,6FAA6F;AAC7F,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,MAAM,EACN,aAAa,EACb,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,OAAO,EACP,UAAU,GACX,EAAE,aAAa,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAkEnC;AAED,UAAU,cAAe,SAAQ,SAAS;IACxC,KAAK,EAAE,gBAAgB,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,mBAAmB,CAAC,eAAe,CAAC,CAAC;IACrD,YAAY,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,YAAY,EAAE,MAAM,CAAC;CACtB;AAoBD,6DAA6D;AAC7D,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,GAAG,KAAK,EACT,EAAE,cAAc,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAyCpC"}
+{"version":3,"file":"SettingsLayout.items.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/SettingsLayout/SettingsLayout.items.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EACV,mBAAmB,EACnB,gBAAgB,EAChB,eAAe,EACf,kBAAkB,EAClB,sBAAsB,EACvB,MAAM,wBAAwB,CAAC;AAEhC,qEAAqE;AACrE,MAAM,WAAW,SAAS;IACxB,OAAO,EAAE,kBAAkB,CAAC;IAC5B,UAAU,EAAE,sBAAsB,CAAC;IACnC,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,UAAU,aAAc,SAAQ,SAAS;IACvC,IAAI,EAAE,eAAe,CAAC;IACtB,MAAM,EAAE,OAAO,CAAC;IAChB,aAAa,CAAC,EAAE,mBAAmB,CAAC,eAAe,CAAC,CAAC;IACrD,YAAY,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,iFAAiF;IACjF,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,YAAY,EAAE,MAAM,CAAC;CACtB;AAgCD,6FAA6F;AAC7F,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,MAAM,EACN,aAAa,EACb,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,OAAO,EACP,UAAU,GACX,EAAE,aAAa,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAkEnC;AAED,UAAU,cAAe,SAAQ,SAAS;IACxC,KAAK,EAAE,gBAAgB,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,mBAAmB,CAAC,eAAe,CAAC,CAAC;IACrD,YAAY,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,YAAY,EAAE,MAAM,CAAC;CACtB;AAsBD,6DAA6D;AAC7D,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,GAAG,KAAK,EACT,EAAE,cAAc,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAyCpC"}

package/dist/types/tokens/relative.d.ts

@@ -0,0 +1,55 @@
+import type { Theme } from '@mui/material/styles/index.js';
+/**
+ * THE ONE WAY A COMPONENT WRITES A SIZE (FUT-2585).
+ *
+ * A density mode — a compact admin, a roomy kiosk — is one decision taken in
+ * the theme, and it only works if every size a component draws is RELATIVE to
+ * something the theme owns. Before this file the package said the same number
+ * four ways: `'14px'`, `'0.875rem'`, `fontSize: 14` and `px(14)` from a
+ * `*.metrics.ts` table, and none of the four moved with the theme. The audit
+ * that opened FUT-2585 counted 1,269 `NNpx` literals, 246 hand-typed `rem`
+ * literals and 24 reads of `theme.typography`.
+ *
+ * So there is one vocabulary: the px a design was drawn at, handed to the
+ * theme's own type scale. `rem(theme, 14)` is `theme.typography.pxToRem(14)` —
+ * `0.875rem` at MUI's defaults, which is what the origin host's theme
+ * runs on, so converting a literal changes nothing on screen. A host that sets
+ * `typography.fontSize` scales every size written through it (MUI multiplies
+ * by `fontSize / 14`), and so does a reader who raises the browser's base font
+ * — the rule the field height already follows (`./field-height.core.ts`).
+ * `htmlFontSize` is not a knob: it DECLARES what the root already is. Values
+ * that are relative another way stay so — `sx` spacing units and
+ * `theme.spacing()` follow the spacing unit — so a density mode sets the type
+ * scale, the spacing unit and `fieldHeight` together.
+ *
+ * Everything goes through it — font sizes, heights, widths, padding, offsets,
+ * radii, shadow offsets, blurs and keyframe distances — because a density mode
+ * that shrinks the box but not its shadow, or the text but not the gap beside
+ * it, is visibly half-applied. The one literal left is the 1px hairline
+ * border, which must stay one device pixel (`FIELD_BORDER_WIDTH`).
+ *
+ * `scripts/ui-tokens-gate.mjs` refuses a raw size or colour in a component, so
+ * this is enforced rather than hoped for.
+ */
+/** A size drawn at `px` in the design, as rem through the theme's type scale. */
+export declare function rem(theme: Theme, px: number): string;
+/**
+ * {@link rem} as an `sx` value: `sx={{ width: sxRem(40) }}`.
+ *
+ * `sx` reads a NUMBER on `width` as pixels and on `padding` as spacing units,
+ * so a bare number there is never density-safe; a theme callback is.
+ */
+export declare function sxRem(px: number): (theme: Theme) => string;
+/** A length list (`'0 8px 32px'`-shaped) with every entry through {@link rem}. */
+export declare function rems(theme: Theme, ...px: number[]): string;
+/** Forget the measured root font size — for a test, or a host that changes it at runtime. */
+export declare function resetRootFontCache(): void;
+/**
+ * The pixels `rem(theme, px)` renders at, for layout that is computed in
+ * JavaScript — a virtualiser's row height, an overflow cost table, a cell size.
+ *
+ * CSS and JS have to agree: a virtualiser that still assumes 52px rows while
+ * the rows it positions have shrunk to 45 leaves a gap under every one of them.
+ */
+export declare function remPx(theme: Theme, px: number): number;
+//# sourceMappingURL=relative.d.ts.map

package/dist/types/tokens/relative.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"relative.d.ts","sourceRoot":"","sources":["../../../src/tokens/relative.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AAE3D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAEH,iFAAiF;AACjF,wBAAgB,GAAG,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAEpD;AAED;;;;;GAKG;AACH,wBAAgB,KAAK,CAAC,EAAE,EAAE,MAAM,GAAG,CAAC,KAAK,EAAE,KAAK,KAAK,MAAM,CAE1D;AAED,kFAAkF;AAClF,wBAAgB,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE,MAAM,EAAE,GAAG,MAAM,CAE1D;AAMD,6FAA6F;AAC7F,wBAAgB,kBAAkB,IAAI,IAAI,CAEzC;AAmCD;;;;;;GAMG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAEtD"}

package/dist/types/tokens/scales.d.ts

@@ -10,6 +10,7 @@ export * from './vocabulary';
 export { headingMetrics } from './typography';
 export * from './theme';
 export * from './color';
+export { rem, rems, remPx, resetRootFontCache, sxRem } from './relative';
 export { DEFAULT_FIELD_RADIUS, fieldRadius, fieldRadiusOverrides, fieldRadiusPx, fieldRootStyles } from './field-radius';
 export { asFieldSize, DEFAULT_FIELD_HEIGHT, FIELD_BORDER_WIDTH, FIELD_HEIGHT_SCALE, fieldBorder, fieldControlStyles, fieldHeight, fieldHeightOverrides, fieldHeightPx, fieldHeightRem, fieldOverrides, fieldTextFieldStyles, } from './field-height';
 export interface Accent {

package/dist/types/tokens/scales.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scales.d.ts","sourceRoot":"","sources":["../../../src/tokens/scales.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AAE3D,OAAO,KAAK,EAAE,UAAU,EAAY,MAAM,cAAc,CAAC;AAEzD;;;;;GAKG;AACH,cAAc,cAAc,CAAC;AAC7B,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAG9C,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,oBAAoB,EAAE,WAAW,EAAE,oBAAoB,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AACzH,OAAO,EACL,WAAW,EACX,oBAAoB,EACpB,kBAAkB,EAClB,kBAAkB,EAClB,WAAW,EACX,kBAAkB,EAClB,WAAW,EACX,oBAAoB,EACpB,aAAa,EACb,cAAc,EACd,cAAc,EACd,oBAAoB,GACrB,MAAM,gBAAgB,CAAC;AAExB,MAAM,WAAW,MAAM;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,UAAU,GAAG,MAAM,CAmBjE"}
+{"version":3,"file":"scales.d.ts","sourceRoot":"","sources":["../../../src/tokens/scales.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AAE3D,OAAO,KAAK,EAAE,UAAU,EAAY,MAAM,cAAc,CAAC;AAEzD;;;;;GAKG;AACH,cAAc,cAAc,CAAC;AAC7B,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAG9C,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AAExB,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,kBAAkB,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACzE,OAAO,EAAE,oBAAoB,EAAE,WAAW,EAAE,oBAAoB,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AACzH,OAAO,EACL,WAAW,EACX,oBAAoB,EACpB,kBAAkB,EAClB,kBAAkB,EAClB,WAAW,EACX,kBAAkB,EAClB,WAAW,EACX,oBAAoB,EACpB,aAAa,EACb,cAAc,EACd,cAAc,EACd,oBAAoB,GACrB,MAAM,gBAAgB,CAAC;AAExB,MAAM,WAAW,MAAM;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,UAAU,GAAG,MAAM,CAmBjE"}

package/dist/utility/InfiniteScroll.js

@@ -1,9 +1,9 @@
 import "../chunk-H7NA4TXY.js";
 import {
   InfiniteScroll
-} from "../chunk-WROCSDVL.js";
-import "../chunk-QF6LTUCE.js";
+} from "../chunk-GSFNH4C5.js";
 import "../chunk-ATSHKSSD.js";
+import "../chunk-QF6LTUCE.js";
 import "../chunk-PZ5AY32C.js";
 export {
   InfiniteScroll

package/dist/utility/InstallPrompt.js

@@ -1,11 +1,11 @@
 import "../chunk-3QQVEYOR.js";
 import {
   InstallPrompt
-} from "../chunk-5ZOJLYD2.js";
-import "../chunk-GY62N32G.js";
+} from "../chunk-JE6RZ5L6.js";
 import {
   usePwaInstall
 } from "../chunk-5GMHJ7Y5.js";
+import "../chunk-GY62N32G.js";
 import "../chunk-WXYLH3QZ.js";
 import {
   PWA_INSTALL_AVAILABLE_EVENT,

package/package.json

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

package/src/components/feedback/Dialog/Dialog.styles.ts

@@ -165,13 +165,17 @@ export function variantStylesOf(theme: Theme, opts: VariantStyleOptions): SxProp
     case 'drawer': {
       const radius = borderRadiusOf(theme, opts.borderRadius);
       return {
-        borderRadius: `${radius}px 0 0 ${radius}px`,
+        // `radius` is already a length (`theme.spacing(n)` → '16px', or 0): gluing
+        // another `px` on wrote '16pxpx', which the browser dropped, leaving the
+        // panel's leading corners square.
+        borderRadius: `${radius} 0 0 ${radius}`,
         margin: 0,
         width: maxWidthOf(opts.size),
+        // Never wider than the screen: a 600px panel on a 375px phone put its
+        // title and the start of every line off the left edge.
+        maxWidth: '100%',
         ...dynamicViewportHeight('height'),
         maxHeight: 'none',
-        position: 'absolute' as const,
-        right: 0,
         ...decorations,
       };
     }

package/src/components/feedback/Dialog/Dialog.tsx

@@ -5,10 +5,10 @@ import MuiDialog from '@mui/material/Dialog/index.js';
 import MuiDialogActions from '@mui/material/DialogActions/index.js';
 import MuiDialogContent from '@mui/material/DialogContent/index.js';
 import MuiDialogTitle from '@mui/material/DialogTitle/index.js';
-import Drawer from '@mui/material/Drawer/index.js';
+import Drawer, { type DrawerProps } from '@mui/material/Drawer/index.js';
 import IconButton from '@mui/material/IconButton/index.js';
 import Typography from '@mui/material/Typography/index.js';
-import { useTheme } from '@mui/material/styles/index.js';
+import { useTheme, type SxProps, type Theme } from '@mui/material/styles/index.js';
 import React from 'react';
 
 import { hasSpacingSlot, withDialogDefaults } from './Dialog.helpers';
@@ -74,6 +74,40 @@ function bodyOf(children: React.ReactNode, hasTitle: boolean): React.ReactNode {
   return <Box sx={{ ...BODY_SX, pt }}>{children}</Box>;
 }
 
+/** Our look first, then whatever `sx` the caller adds — so the caller's escape hatch still wins. */
+function withCallerSx(own: SxProps<Theme>, caller: SxProps<Theme> | undefined): SxProps<Theme> {
+  return [own, ...(Array.isArray(caller) ? caller : caller === undefined ? [] : [caller])] as SxProps<Theme>;
+}
+
+/**
+ * The drawer variant: MUI's `Drawer`, with the variant's look on the Drawer's
+ * OWN paper — on an inner Box it left the paper 0px wide and clipped the panel —
+ * and a caller's paper props merged over it rather than replacing it.
+ */
+function DrawerDialog({
+  paperSx,
+  testId,
+  drawerProps,
+  children,
+}: {
+  paperSx: SxProps<Theme>;
+  testId: string | undefined;
+  drawerProps: DrawerProps;
+  children: React.ReactNode;
+}) {
+  const { PaperProps: callerPaper, ...rest } = drawerProps;
+  return (
+    <Drawer
+      anchor="right"
+      data-testid={testId}
+      {...rest}
+      PaperProps={{ ...callerPaper, sx: withCallerSx(paperSx, callerPaper?.sx) }}
+    >
+      {children}
+    </Drawer>
+  );
+}
+
 export const Dialog: React.FC<DialogProps> = (rawProps) => {
   const {
     children,
@@ -124,18 +158,10 @@ export const Dialog: React.FC<DialogProps> = (rawProps) => {
 
   if (variant === 'drawer') {
     return (
-      <Drawer
-        anchor="right"
-        open={open}
-        onClose={onClose}
-        data-testid={testId}
-        {...props}
-      >
-        <Box sx={{ ...paperSx, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
-          {header}
-          {body}
-        </Box>
-      </Drawer>
+      <DrawerDialog paperSx={paperSx} testId={testId} drawerProps={{ ...props, open, onClose }}>
+        {header}
+        {body}
+      </DrawerDialog>
     );
   }
 

package/src/components/form/UploadButton/UploadButton.parts.tsx

@@ -4,10 +4,21 @@ import Box from '@mui/material/Box/index.js';
 import Button from '@mui/material/Button/index.js';
 import LinearProgress from '@mui/material/LinearProgress/index.js';
 import Typography from '@mui/material/Typography/index.js';
-import { useTheme } from '@mui/material/styles/index.js';
+import { alpha, useTheme } from '@mui/material/styles/index.js';
 import type React from 'react';
 
 import type { DragHandlers } from './UploadButton.hooks';
+
+/*
+ * The tints the dropzone and the ghost button have always drawn — 0x0A, 0x05
+ * and 0x08 out of 0xFF — as `alpha()` opacities. They were hex-alpha suffixes
+ * glued onto `palette.primary.main`, which only works while the palette colour
+ * is a six-digit hex: an `rgb(…)` primary produced an invalid colour and no
+ * tint at all.
+ */
+const DRAG_OVER_TINT = 0x0a / 0xff;
+const HOVER_TINT = 0x05 / 0xff;
+const GHOST_HOVER_TINT = 0x08 / 0xff;
 import type { UploadButtonCopy } from '../../../copy';
 import type { UploadButtonProps } from './UploadButton.types';
 
@@ -48,12 +59,12 @@ export function UploadDropzone({
         padding: 3,
         textAlign: 'center',
         cursor: disabled ? 'not-allowed' : 'pointer',
-        backgroundColor: isDragOver ? `${theme.palette.primary.main}0A` : 'transparent',
+        backgroundColor: isDragOver ? alpha(theme.palette.primary.main, DRAG_OVER_TINT) : 'transparent',
         transition: 'all 0.2s ease-in-out',
         ...(!disabled && {
           '&:hover': {
             borderColor: theme.palette.primary.main,
-            backgroundColor: `${theme.palette.primary.main}05`,
+            backgroundColor: alpha(theme.palette.primary.main, HOVER_TINT),
           },
         }),
         opacity: disabled ? 0.6 : 1,
@@ -114,7 +125,7 @@ export function UploadTrigger({
       aria-describedby={describedBy}
       sx={{
         ...(variant === 'ghost' && {
-          '&:hover': { backgroundColor: `${theme.palette.primary.main}08` },
+          '&:hover': { backgroundColor: alpha(theme.palette.primary.main, GHOST_HOVER_TINT) },
         }),
       }}
     >