@12-apps/ui 6.36.0 → 6.37.0

package/dist/{chunk-7EQCZO56.js → chunk-C3LZ3OGJ.js}

@@ -8,25 +8,25 @@ import {
 // src/components/form/Command/Command.styles.ts
 import { alpha } from "@mui/material/styles/index.js";
 var SIZE_MAP = {
-  xs: { width: 400, fontPx: 12 },
-  sm: { width: 450, fontPx: 14 },
-  md: { width: 500, fontPx: 16 },
-  lg: { width: 550, fontPx: 18 },
-  xl: { width: 600, fontPx: 20 }
+  xs: { widthPx: 400, fontPx: 12 },
+  sm: { widthPx: 450, fontPx: 14 },
+  md: { widthPx: 500, fontPx: 16 },
+  lg: { widthPx: 550, fontPx: 18 },
+  xl: { widthPx: 600, fontPx: 20 }
 };
 var commandSizeStyles = (theme, size) => {
-  const { width, fontPx } = SIZE_MAP[size] || SIZE_MAP.md;
-  return { width: rem(theme, width), fontSize: rem(theme, fontPx) };
+  const { widthPx, fontPx } = SIZE_MAP[size] || SIZE_MAP.md;
+  return { width: rem(theme, widthPx), fontSize: rem(theme, fontPx) };
 };
 var emphasisStyles = (theme, color, glow, pulse) => ({
   ...glow && {
-    boxShadow: `0 0 20px ${alpha(accentFor(theme, color).main, 0.4)}`
+    boxShadow: `0 0 ${rem(theme, 20)} ${alpha(accentFor(theme, color).main, 0.4)}`
   },
   ...pulse && {
     animation: "pulse 2s infinite",
     "@keyframes pulse": {
       "0%": { boxShadow: `0 0 0 0 ${alpha(accentFor(theme, color).main, 0.4)}` },
-      "70%": { boxShadow: `0 0 0 10px ${alpha(accentFor(theme, color).main, 0)}` },
+      "70%": { boxShadow: `0 0 0 ${rem(theme, 10)} ${alpha(accentFor(theme, color).main, 0)}` },
       "100%": { boxShadow: `0 0 0 0 ${alpha(accentFor(theme, color).main, 0)}` }
     }
   }
@@ -36,7 +36,7 @@ var surfaceStyles = (theme, variant, color) => {
     case "glass":
       return {
         backgroundColor: alpha(theme.palette.background.paper, 0.1),
-        backdropFilter: "blur(20px)",
+        backdropFilter: `blur(${rem(theme, 20)})`,
         border: `1px solid ${alpha(accentFor(theme, color).main, 0.2)}`
       };
     case "gradient":
@@ -64,4 +64,4 @@ export {
   commandSizeStyles,
   commandPaperStyles
 };
-//# sourceMappingURL=chunk-7EQCZO56.js.map
+//# sourceMappingURL=chunk-C3LZ3OGJ.js.map

package/dist/chunk-C3LZ3OGJ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/Command/Command.styles.ts"],"sourcesContent":["import { alpha } from '@mui/material/styles/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\n\nimport type { CommandProps } from './Command.types';\nimport { accentFor, rem } from '../../../tokens/scales';\n\ntype CommandVariant = NonNullable<CommandProps['variant']>;\ntype CommandColor = NonNullable<CommandProps['color']>;\ntype CommandSize = NonNullable<CommandProps['size']>;\n\nconst SIZE_MAP: Record<CommandSize, { widthPx: number; fontPx: number }> = {\n  xs: { widthPx: 400, fontPx: 12 },\n  sm: { widthPx: 450, fontPx: 14 },\n  md: { widthPx: 500, fontPx: 16 },\n  lg: { widthPx: 550, fontPx: 18 },\n  xl: { widthPx: 600, fontPx: 20 },\n};\n\n/** The paper's width and type for a size, both design px read through the type scale. */\nexport const commandSizeStyles = (theme: Theme, size: CommandSize) => {\n  const { widthPx, fontPx } = SIZE_MAP[size] || SIZE_MAP.md;\n  return { width: rem(theme, widthPx), fontSize: rem(theme, fontPx) };\n};\n\nconst emphasisStyles = (\n  theme: Theme,\n  color: CommandColor,\n  glow: boolean,\n  pulse: boolean,\n): CSSObject => ({\n  ...(glow && {\n    boxShadow: `0 0 ${rem(theme, 20)} ${alpha(accentFor(theme, color).main, 0.4)}`,\n  }),\n  ...(pulse && {\n    animation: 'pulse 2s infinite',\n    '@keyframes pulse': {\n      '0%': { boxShadow: `0 0 0 0 ${alpha(accentFor(theme, color).main, 0.4)}` },\n      '70%': { boxShadow: `0 0 0 ${rem(theme, 10)} ${alpha(accentFor(theme, color).main, 0)}` },\n      '100%': { boxShadow: `0 0 0 0 ${alpha(accentFor(theme, color).main, 0)}` },\n    },\n  }),\n});\n\nconst surfaceStyles = (\n  theme: Theme,\n  variant: CommandVariant,\n  color: CommandColor,\n): CSSObject => {\n  switch (variant) {\n    case 'glass':\n      return {\n        backgroundColor: alpha(theme.palette.background.paper, 0.1),\n        backdropFilter: `blur(${rem(theme, 20)})`,\n        border: `1px solid ${alpha(accentFor(theme, color).main, 0.2)}`,\n      };\n    case 'gradient':\n      return {\n        background: `linear-gradient(135deg, ${accentFor(theme, color).main}, ${accentFor(theme, color).dark})`,\n        color: accentFor(theme, color).contrastText,\n      };\n    case 'elevated':\n      return { boxShadow: theme.shadows[8] };\n    case 'minimal':\n      return { border: 'none', boxShadow: 'none' };\n    default:\n      return {};\n  }\n};\n\n/**\n * Every variant shares the same transition and the same optional glow/pulse; only\n * the surface — background, border, shadow — differs.\n */\nexport const commandPaperStyles = (\n  theme: Theme,\n  { variant, color, glow, pulse }: {\n    variant: CommandVariant;\n    color: CommandColor;\n    glow: boolean;\n    pulse: boolean;\n  },\n): CSSObject => ({\n  transition: theme.transitions.create(['all'], {\n    duration: theme.transitions.duration.standard,\n  }),\n  ...emphasisStyles(theme, color, glow, pulse),\n  ...surfaceStyles(theme, variant, color),\n});\n"],"mappings":";;;;;;;;AAAA,SAAS,aAAa;AAUtB,IAAM,WAAqE;AAAA,EACzE,IAAI,EAAE,SAAS,KAAK,QAAQ,GAAG;AAAA,EAC/B,IAAI,EAAE,SAAS,KAAK,QAAQ,GAAG;AAAA,EAC/B,IAAI,EAAE,SAAS,KAAK,QAAQ,GAAG;AAAA,EAC/B,IAAI,EAAE,SAAS,KAAK,QAAQ,GAAG;AAAA,EAC/B,IAAI,EAAE,SAAS,KAAK,QAAQ,GAAG;AACjC;AAGO,IAAM,oBAAoB,CAAC,OAAc,SAAsB;AACpE,QAAM,EAAE,SAAS,OAAO,IAAI,SAAS,IAAI,KAAK,SAAS;AACvD,SAAO,EAAE,OAAO,IAAI,OAAO,OAAO,GAAG,UAAU,IAAI,OAAO,MAAM,EAAE;AACpE;AAEA,IAAM,iBAAiB,CACrB,OACA,OACA,MACA,WACe;AAAA,EACf,GAAI,QAAQ;AAAA,IACV,WAAW,OAAO,IAAI,OAAO,EAAE,CAAC,IAAI,MAAM,UAAU,OAAO,KAAK,EAAE,MAAM,GAAG,CAAC;AAAA,EAC9E;AAAA,EACA,GAAI,SAAS;AAAA,IACX,WAAW;AAAA,IACX,oBAAoB;AAAA,MAClB,MAAM,EAAE,WAAW,WAAW,MAAM,UAAU,OAAO,KAAK,EAAE,MAAM,GAAG,CAAC,GAAG;AAAA,MACzE,OAAO,EAAE,WAAW,SAAS,IAAI,OAAO,EAAE,CAAC,IAAI,MAAM,UAAU,OAAO,KAAK,EAAE,MAAM,CAAC,CAAC,GAAG;AAAA,MACxF,QAAQ,EAAE,WAAW,WAAW,MAAM,UAAU,OAAO,KAAK,EAAE,MAAM,CAAC,CAAC,GAAG;AAAA,IAC3E;AAAA,EACF;AACF;AAEA,IAAM,gBAAgB,CACpB,OACA,SACA,UACc;AACd,UAAQ,SAAS;AAAA,IACf,KAAK;AACH,aAAO;AAAA,QACL,iBAAiB,MAAM,MAAM,QAAQ,WAAW,OAAO,GAAG;AAAA,QAC1D,gBAAgB,QAAQ,IAAI,OAAO,EAAE,CAAC;AAAA,QACtC,QAAQ,aAAa,MAAM,UAAU,OAAO,KAAK,EAAE,MAAM,GAAG,CAAC;AAAA,MAC/D;AAAA,IACF,KAAK;AACH,aAAO;AAAA,QACL,YAAY,2BAA2B,UAAU,OAAO,KAAK,EAAE,IAAI,KAAK,UAAU,OAAO,KAAK,EAAE,IAAI;AAAA,QACpG,OAAO,UAAU,OAAO,KAAK,EAAE;AAAA,MACjC;AAAA,IACF,KAAK;AACH,aAAO,EAAE,WAAW,MAAM,QAAQ,CAAC,EAAE;AAAA,IACvC,KAAK;AACH,aAAO,EAAE,QAAQ,QAAQ,WAAW,OAAO;AAAA,IAC7C;AACE,aAAO,CAAC;AAAA,EACZ;AACF;AAMO,IAAM,qBAAqB,CAChC,OACA,EAAE,SAAS,OAAO,MAAM,MAAM,OAMf;AAAA,EACf,YAAY,MAAM,YAAY,OAAO,CAAC,KAAK,GAAG;AAAA,IAC5C,UAAU,MAAM,YAAY,SAAS;AAAA,EACvC,CAAC;AAAA,EACD,GAAG,eAAe,OAAO,OAAO,MAAM,KAAK;AAAA,EAC3C,GAAG,cAAc,OAAO,SAAS,KAAK;AACxC;","names":[]}

package/dist/{chunk-UL7L6MFT.js → chunk-C55AWF3U.js}

@@ -1,6 +1,6 @@
 import {
   STACK_BREAK
-} from "./chunk-RZ2C5CAW.js";
+} from "./chunk-2ZIHZLF5.js";
 import {
   CARD_RADIUS,
   cardSurfaceStyles,
@@ -16,10 +16,10 @@ import {
   RAIL_GAP,
   railsTemplateFor,
   useListRails
-} from "./chunk-JFEEV3XI.js";
+} from "./chunk-NB3FGWU4.js";
 import {
   DENSITY_ROW_PADDING
-} from "./chunk-4LQZH4PU.js";
+} from "./chunk-PMOEG36E.js";
 import {
   rem
 } from "./chunk-YKCAJ2TN.js";
@@ -189,4 +189,4 @@ export {
   actionProps,
   rowStyles
 };
-//# sourceMappingURL=chunk-UL7L6MFT.js.map
+//# sourceMappingURL=chunk-C55AWF3U.js.map

package/dist/{chunk-ST4YYVUK.js → chunk-C5RQBTRZ.js}

@@ -1,3 +1,7 @@
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
 // src/components/form/AddressAutocomplete/AddressSuggestionsPaper.tsx
 import Paper from "@mui/material/Paper/index.js";
 import { alpha, useTheme } from "@mui/material/styles/index.js";
@@ -13,8 +17,8 @@ var AddressSuggestionsPaper = (props) => {
       sx: {
         mt: 1,
         background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.98)} 0%, ${alpha(theme.palette.background.paper, 0.95)} 100%)`,
-        backdropFilter: "blur(20px)",
-        WebkitBackdropFilter: "blur(20px)",
+        backdropFilter: `blur(${rem(theme, 20)})`,
+        WebkitBackdropFilter: `blur(${rem(theme, 20)})`,
         border: `1px solid ${alpha(theme.palette.divider, 0.18)}`
       }
     }
@@ -24,4 +28,4 @@ var AddressSuggestionsPaper = (props) => {
 export {
   AddressSuggestionsPaper
 };
-//# sourceMappingURL=chunk-ST4YYVUK.js.map
+//# sourceMappingURL=chunk-C5RQBTRZ.js.map

package/dist/chunk-C5RQBTRZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/AddressAutocomplete/AddressSuggestionsPaper.tsx"],"sourcesContent":["import type { PaperProps } from '@mui/material/Paper/index.js';\nimport Paper from '@mui/material/Paper/index.js';\nimport { alpha, useTheme } from '@mui/material/styles/index.js';\nimport type { FC } from 'react';\nimport React from 'react';\n\nimport { rem } from '../../../tokens/relative';\n\n// The dropdown surface, frosted to match the glass field.\nexport const AddressSuggestionsPaper: FC<PaperProps> = (props) => {\n  const theme = useTheme();\n\n  return (\n    <Paper\n      {...props}\n      elevation={8}\n      data-testid=\"address-suggestions-dropdown\"\n      sx={{\n        mt: 1,\n        background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.98)} 0%, ${alpha(theme.palette.background.paper, 0.95)} 100%)`,\n        backdropFilter: `blur(${rem(theme, 20)})`,\n        WebkitBackdropFilter: `blur(${rem(theme, 20)})`,\n        border: `1px solid ${alpha(theme.palette.divider, 0.18)}`,\n      }}\n    />\n  );\n};\n"],"mappings":";;;;;AACA,OAAO,WAAW;AAClB,SAAS,OAAO,gBAAgB;AAW5B;AAJG,IAAM,0BAA0C,CAAC,UAAU;AAChE,QAAM,QAAQ,SAAS;AAEvB,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,MACX,eAAY;AAAA,MACZ,IAAI;AAAA,QACF,IAAI;AAAA,QACJ,YAAY,2BAA2B,MAAM,MAAM,QAAQ,WAAW,OAAO,IAAI,CAAC,QAAQ,MAAM,MAAM,QAAQ,WAAW,OAAO,IAAI,CAAC;AAAA,QACrI,gBAAgB,QAAQ,IAAI,OAAO,EAAE,CAAC;AAAA,QACtC,sBAAsB,QAAQ,IAAI,OAAO,EAAE,CAAC;AAAA,QAC5C,QAAQ,aAAa,MAAM,MAAM,QAAQ,SAAS,IAAI,CAAC;AAAA,MACzD;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/{chunk-GGWICBJD.js → chunk-CPAJYJUD.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-4XK6JQ4D.js";
 import {
   Form
-} from "./chunk-2HVNPWFV.js";
+} from "./chunk-D6KL74KI.js";
 
 // src/components/form/total-form/FormContainer.tsx
 import { validateFields } from "@12-apps/forms-core";
@@ -55,4 +55,4 @@ function FormContainer({
 export {
   FormContainer
 };
-//# sourceMappingURL=chunk-GGWICBJD.js.map
+//# sourceMappingURL=chunk-CPAJYJUD.js.map

package/dist/{chunk-5TJRJSJY.js → chunk-CQLPDY2J.js}

@@ -1,9 +1,9 @@
 import {
   GridShell
-} from "./chunk-V74PXUQN.js";
+} from "./chunk-QEG3P5D4.js";
 import {
   useDataViewsState
-} from "./chunk-WPA26LXA.js";
+} from "./chunk-IKLOIONQ.js";
 
 // src/components/data-display/DataViews/DataViewsGrid.tsx
 import { useEffect, useRef } from "react";
@@ -27,4 +27,4 @@ function DataViewsGrid(props) {
 export {
   DataViewsGrid
 };
-//# sourceMappingURL=chunk-5TJRJSJY.js.map
+//# sourceMappingURL=chunk-CQLPDY2J.js.map

package/dist/{chunk-5UTAEHSB.js → chunk-CQPFSEJB.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk-6DPAWXZ3.js";
 import {
   Button
-} from "./chunk-KH25WUSX.js";
+} from "./chunk-2EAAWOZ2.js";
 import {
   Text
 } from "./chunk-WTOYEWW6.js";
@@ -80,4 +80,4 @@ function DataViewsEmpty({
 export {
   DataViewsEmpty
 };
-//# sourceMappingURL=chunk-5UTAEHSB.js.map
+//# sourceMappingURL=chunk-CQPFSEJB.js.map

package/dist/{chunk-SN2YMCTL.js → chunk-CS3KOKL3.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk-NPP44TQG.js";
 import {
   CategorySelect
-} from "./chunk-ZW5K4XCQ.js";
+} from "./chunk-34BZXJGT.js";
 
 // src/components/data-display/DataViews/data-views-category-pill.tsx
 import { jsx } from "react/jsx-runtime";
@@ -79,4 +79,4 @@ export {
   emitPillDiff,
   PillControl
 };
-//# sourceMappingURL=chunk-SN2YMCTL.js.map
+//# sourceMappingURL=chunk-CS3KOKL3.js.map

package/dist/{chunk-2HVNPWFV.js → chunk-D6KL74KI.js}

@@ -25,15 +25,9 @@ var spacingMap = {
   lg: 4,
   xl: 5
 };
-var maxWidthMap = {
-  sm: "600px",
-  md: "900px",
-  lg: "1200px",
-  xl: "1536px",
-  full: "100%"
-};
+var formMaxWidth = (theme, maxWidth) => maxWidth === "full" ? "100%" : rem(theme, theme.breakpoints.values[maxWidth]);
 var Form = React.forwardRef(
-  ({ variant = "vertical", maxWidth = "full", spacing = "md", children, dataTestId, ...props }, ref) => /* @__PURE__ */ jsx(StyledForm, { ref, variant, role: "form", "data-testid": dataTestId, ...props, children: /* @__PURE__ */ jsx(Box, { sx: { maxWidth: maxWidthMap[maxWidth], width: "100%" }, children: variant === "inline" ? children : /* @__PURE__ */ jsx(Stack, { spacing: spacingMap[spacing], children }) }) })
+  ({ variant = "vertical", maxWidth = "full", spacing = "md", children, dataTestId, ...props }, ref) => /* @__PURE__ */ jsx(StyledForm, { ref, variant, role: "form", "data-testid": dataTestId, ...props, children: /* @__PURE__ */ jsx(Box, { sx: { maxWidth: (theme) => formMaxWidth(theme, maxWidth), width: "100%" }, children: variant === "inline" ? children : /* @__PURE__ */ jsx(Stack, { spacing: spacingMap[spacing], children }) }) })
 );
 Form.displayName = "Form";
 var StyledFormField = styled(Box, {
@@ -42,7 +36,7 @@ var StyledFormField = styled(Box, {
   ({ theme, variant }) => ({
     display: variant === "horizontal" ? "grid" : "flex",
     flexDirection: variant === "horizontal" ? void 0 : "column",
-    gridTemplateColumns: variant === "horizontal" ? "200px 1fr" : void 0,
+    gridTemplateColumns: variant === "horizontal" ? `${rem(theme, 200)} 1fr` : void 0,
     columnGap: variant === "horizontal" ? theme.spacing(1) : void 0,
     alignItems: variant === "horizontal" ? "center" : void 0
   })
@@ -113,4 +107,4 @@ export {
   FormControl,
   FormMessage
 };
-//# sourceMappingURL=chunk-2HVNPWFV.js.map
+//# sourceMappingURL=chunk-D6KL74KI.js.map

package/dist/chunk-D6KL74KI.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, type Theme } 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';\nimport { rem } from '../../../tokens/relative';\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\n/** A form's width cap: the theme's breakpoint of that name, through the type scale; `full` is uncapped. */\nconst formMaxWidth = (theme: Theme, maxWidth: NonNullable<FormProps['maxWidth']>): string =>\n  maxWidth === 'full' ? '100%' : rem(theme, theme.breakpoints.values[maxWidth]);\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: (theme) => formMaxWidth(theme, 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' ? `${rem(theme, 200)} 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: rem(theme, 14),\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: rem(theme, 12),\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-TTAP5XFX.js → chunk-DJYL2LC6.js}

@@ -3,12 +3,16 @@ import {
 } from "./chunk-YMGHTZA6.js";
 import {
   MenubarItemView
-} from "./chunk-QY4XNTNG.js";
+} from "./chunk-LP3JCXER.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
 
 // src/components/form/Menubar/Menubar.toolbar.tsx
 import Box from "@mui/material/Box/index.js";
 import CircularProgress from "@mui/material/CircularProgress/index.js";
 import Toolbar from "@mui/material/Toolbar/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 var MenubarToolbar = ({
   ariaLabel,
@@ -29,6 +33,7 @@ var MenubarToolbar = ({
   onFocus,
   onBlur
 }) => {
+  const theme = useTheme();
   const isVertical = orientation === "vertical";
   return /* @__PURE__ */ jsxs(
     Toolbar,
@@ -44,7 +49,7 @@ var MenubarToolbar = ({
       },
       children: [
         logo && /* @__PURE__ */ jsx(Box, { sx: { mr: 2, display: "flex", alignItems: "center" }, children: logo }),
-        loading ? /* @__PURE__ */ jsx(CircularProgress, { size: 20, color: "inherit" }) : /* @__PURE__ */ jsx(
+        loading ? /* @__PURE__ */ jsx(CircularProgress, { size: rem(theme, 20), color: "inherit" }) : /* @__PURE__ */ jsx(
           Box,
           {
             sx: {
@@ -82,4 +87,4 @@ var MenubarToolbar = ({
 export {
   MenubarToolbar
 };
-//# sourceMappingURL=chunk-TTAP5XFX.js.map
+//# sourceMappingURL=chunk-DJYL2LC6.js.map

package/dist/chunk-DJYL2LC6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/Menubar/Menubar.toolbar.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport CircularProgress from '@mui/material/CircularProgress/index.js';\nimport Toolbar from '@mui/material/Toolbar/index.js';\nimport { useTheme, type CSSObject } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { MenubarItemView } from './Menubar.item';\nimport { MenubarSeparator } from './Menubar.separator';\nimport type { MenubarItem, MenubarProps } from './Menubar.types';\nimport { rem } from '../../../tokens/relative';\n\nexport interface MenubarToolbarProps {\n  ariaLabel: string;\n  barSx: CSSObject;\n  items: MenubarItem[];\n  size: NonNullable<MenubarProps['size']>;\n  orientation: NonNullable<MenubarProps['orientation']>;\n  disabled: boolean;\n  loading: boolean;\n  logo?: React.ReactNode;\n  endContent?: React.ReactNode;\n  fullWidth: boolean;\n  activeMenu: string | null;\n  menuRefs: React.MutableRefObject<{ [key: string]: HTMLElement | null }>;\n  onOpen: (itemId: string, anchorEl: HTMLElement) => void;\n  onActivate: (item: MenubarItem) => void;\n  onClose: () => void;\n  onFocus?: React.FocusEventHandler;\n  onBlur?: React.FocusEventHandler;\n}\n\n/**\n * The bar's contents: an optional logo, the entries themselves, and whatever the\n * caller hangs off the end. Shared by both orientations — only the element\n * wrapping it differs.\n */\nexport const MenubarToolbar: React.FC<MenubarToolbarProps> = ({\n  ariaLabel,\n  barSx,\n  items,\n  size,\n  orientation,\n  disabled,\n  loading,\n  logo,\n  endContent,\n  fullWidth,\n  activeMenu,\n  menuRefs,\n  onOpen,\n  onActivate,\n  onClose,\n  onFocus,\n  onBlur,\n}) => {\n  const theme = useTheme();\n  const isVertical = orientation === 'vertical';\n\n  return (\n    <Toolbar\n      role=\"toolbar\"\n      aria-label={ariaLabel}\n      sx={{\n        ...barSx,\n        width: fullWidth ? '100%' : 'auto',\n        flexDirection: isVertical ? 'column' : 'row',\n        alignItems: isVertical ? 'flex-start' : 'center',\n        gap: 1,\n      }}\n    >\n      {logo && <Box sx={{ mr: 2, display: 'flex', alignItems: 'center' }}>{logo}</Box>}\n\n      {loading ? (\n        <CircularProgress size={rem(theme, 20)} color=\"inherit\" />\n      ) : (\n        <Box\n          sx={{\n            display: 'flex',\n            flexDirection: isVertical ? 'column' : 'row',\n            gap: isVertical ? 0.5 : 1,\n            flex: 1,\n          }}\n        >\n          {items.map((item) =>\n            item.divider ? (\n              <MenubarSeparator key={item.id} orientation={orientation} />\n            ) : (\n              <MenubarItemView\n                key={item.id}\n                item={item}\n                size={size}\n                disabled={disabled}\n                isOpen={activeMenu === item.id}\n                anchorEl={menuRefs.current[item.id] ?? null}\n                onOpen={onOpen}\n                onActivate={onActivate}\n                onClose={onClose}\n                onFocus={onFocus}\n                onBlur={onBlur}\n              />\n            ),\n          )}\n        </Box>\n      )}\n\n      {endContent && <Box sx={{ ml: 'auto' }}>{endContent}</Box>}\n    </Toolbar>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAAA,OAAO,SAAS;AAChB,OAAO,sBAAsB;AAC7B,OAAO,aAAa;AACpB,SAAS,gBAAgC;AAwDrC,SAWW,KAXX;AAvBG,IAAM,iBAAgD,CAAC;AAAA,EAC5D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,QAAQ,SAAS;AACvB,QAAM,aAAa,gBAAgB;AAEnC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,IAAI;AAAA,QACF,GAAG;AAAA,QACH,OAAO,YAAY,SAAS;AAAA,QAC5B,eAAe,aAAa,WAAW;AAAA,QACvC,YAAY,aAAa,eAAe;AAAA,QACxC,KAAK;AAAA,MACP;AAAA,MAEC;AAAA,gBAAQ,oBAAC,OAAI,IAAI,EAAE,IAAI,GAAG,SAAS,QAAQ,YAAY,SAAS,GAAI,gBAAK;AAAA,QAEzE,UACC,oBAAC,oBAAiB,MAAM,IAAI,OAAO,EAAE,GAAG,OAAM,WAAU,IAExD;AAAA,UAAC;AAAA;AAAA,YACC,IAAI;AAAA,cACF,SAAS;AAAA,cACT,eAAe,aAAa,WAAW;AAAA,cACvC,KAAK,aAAa,MAAM;AAAA,cACxB,MAAM;AAAA,YACR;AAAA,YAEC,gBAAM;AAAA,cAAI,CAAC,SACV,KAAK,UACH,oBAAC,oBAA+B,eAAT,KAAK,EAA8B,IAE1D;AAAA,gBAAC;AAAA;AAAA,kBAEC;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA,QAAQ,eAAe,KAAK;AAAA,kBAC5B,UAAU,SAAS,QAAQ,KAAK,EAAE,KAAK;AAAA,kBACvC;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA;AAAA,gBAVK,KAAK;AAAA,cAWZ;AAAA,YAEJ;AAAA;AAAA,QACF;AAAA,QAGD,cAAc,oBAAC,OAAI,IAAI,EAAE,IAAI,OAAO,GAAI,sBAAW;AAAA;AAAA;AAAA,EACtD;AAEJ;","names":[]}

package/dist/{chunk-TQ2557I5.js → chunk-DUNG7D4B.js}

@@ -1,7 +1,7 @@
 import {
   getColorFromTheme,
   textareaEmphasisStyles
-} from "./chunk-AMTFP7QA.js";
+} from "./chunk-4RDJMIWL.js";
 import {
   fieldBorder
 } from "./chunk-CGO452DC.js";
@@ -15,7 +15,9 @@ import {
   FIELD_BORDER_WIDTH
 } from "./chunk-PZBK3F52.js";
 import {
-  rem
+  rem,
+  rems,
+  sxRem
 } from "./chunk-YKCAJ2TN.js";
 
 // src/components/form/Textarea/Textarea.tsx
@@ -23,7 +25,7 @@ import Box from "@mui/material/Box/index.js";
 import FormHelperText from "@mui/material/FormHelperText/index.js";
 import InputLabel from "@mui/material/InputLabel/index.js";
 import TextareaAutosize from "@mui/material/TextareaAutosize/index.js";
-import { alpha, styled } from "@mui/material/styles/index.js";
+import { alpha, styled, useTheme } from "@mui/material/styles/index.js";
 import { lazy, Suspense, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var TextareaRichEditor = lazy(async () => ({
@@ -47,11 +49,11 @@ var StyledTextarea = styled(TextareaAutosize, {
   const colorPalette = getColorFromTheme(theme, customColor);
   const errorColor = theme.palette.error;
   const sizeMap = {
-    xs: { padding: "6px 8px", fontSize: rem(theme, 12), minHeight: "60px" },
-    sm: { padding: "8px 10px", fontSize: rem(theme, 14), minHeight: "80px" },
-    md: { padding: "10px 12px", fontSize: rem(theme, 16), minHeight: "100px" },
-    lg: { padding: "12px 14px", fontSize: rem(theme, 18), minHeight: "120px" },
-    xl: { padding: "14px 16px", fontSize: rem(theme, 20), minHeight: "140px" }
+    xs: { padding: rems(theme, 6, 8), fontSize: rem(theme, 12), minHeight: rem(theme, 60) },
+    sm: { padding: rems(theme, 8, 10), fontSize: rem(theme, 14), minHeight: rem(theme, 80) },
+    md: { padding: rems(theme, 10, 12), fontSize: rem(theme, 16), minHeight: rem(theme, 100) },
+    lg: { padding: rems(theme, 12, 14), fontSize: rem(theme, 18), minHeight: rem(theme, 120) },
+    xl: { padding: rems(theme, 14, 16), fontSize: rem(theme, 20), minHeight: rem(theme, 140) }
   };
   const baseStyles = {
     width: "100%",
@@ -77,7 +79,7 @@ var StyledTextarea = styled(TextareaAutosize, {
     "&:focus": {
       borderColor: error ? errorColor.main : colorPalette.main,
       backgroundColor: theme.palette.background.paper,
-      boxShadow: `inset 0 0 0 1px ${error ? errorColor.main : colorPalette.main}, 0 0 0 3px ${alpha(error ? errorColor.main : colorPalette.main, 0.1)}`
+      boxShadow: `inset 0 0 0 ${FIELD_BORDER_WIDTH}px ${error ? errorColor.main : colorPalette.main}, 0 0 0 ${rem(theme, 3)} ${alpha(error ? errorColor.main : colorPalette.main, 0.1)}`
     }
   };
   return {
@@ -93,14 +95,13 @@ var StyledLabel = styled(InputLabel, {
   color: error ? theme.palette.error.main : theme.palette.text.primary,
   ...glass && {
     backgroundColor: alpha(theme.palette.background.paper, 0.1),
-    backdropFilter: "blur(10px)",
-    padding: "4px 8px",
-    borderRadius: "4px",
+    backdropFilter: `blur(${rem(theme, 10)})`,
+    padding: rems(theme, 4, 8),
+    borderRadius: rem(theme, 4),
     border: `1px solid ${fieldEdge(theme)}`,
     display: "inline-block"
   }
 }));
-var ICON_GUTTER = "40px";
 var TEXTAREA_DEFAULTS = {
   variant: "default",
   color: "primary",
@@ -133,8 +134,8 @@ var TextareaIcon = ({ icon, iconPosition }) => /* @__PURE__ */ jsx(
   {
     sx: {
       position: "absolute",
-      top: "12px",
-      ...iconPosition === "start" ? { left: "12px" } : { right: "12px" },
+      top: sxRem(12),
+      ...iconPosition === "start" ? { left: sxRem(12) } : { right: sxRem(12) },
       color: "text.secondary",
       pointerEvents: "none",
       zIndex: 1
@@ -148,6 +149,10 @@ function RichVariant({
 }) {
   return /* @__PURE__ */ jsx(TextareaShell, { ...shell, children: /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(TextareaRichEditor, { ...editor }) }) });
 }
+function withIconGutter(theme, style, hasIcon, iconPosition) {
+  if (!hasIcon) return { ...style };
+  return { ...style, [iconPosition === "start" ? "paddingLeft" : "paddingRight"]: rem(theme, 40) };
+}
 var Textarea = (textareaProps) => {
   const {
     variant,
@@ -170,18 +175,11 @@ var Textarea = (textareaProps) => {
     ...props
   } = { ...TEXTAREA_DEFAULTS, ...definedProps(textareaProps) };
   const { richEditorCopy } = textareaProps;
+  const theme = useTheme();
   const [richTextValue, setRichTextValue] = useState("");
   const hasIcon = Boolean(icon);
   const testId = dataTestId || dataTestIdCamelCase;
-  const textareaStyle = {
-    ...style,
-    // Same gap either side; only which side it applies to changes. The previous
-    // version had `iconPosition === 'start' ? '40px' : '40px'`, a ternary whose
-    // two branches were identical.
-    ...hasIcon && {
-      [iconPosition === "start" ? "paddingLeft" : "paddingRight"]: ICON_GUTTER
-    }
-  };
+  const textareaStyle = withIconGutter(theme, style, hasIcon, iconPosition);
   if (variant === "rich" && richEditorCopy) {
     return /* @__PURE__ */ jsx(
       RichVariant,
@@ -227,4 +225,4 @@ Textarea.displayName = "Textarea";
 export {
   Textarea
 };
-//# sourceMappingURL=chunk-TQ2557I5.js.map
+//# sourceMappingURL=chunk-DUNG7D4B.js.map

package/dist/chunk-DUNG7D4B.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/Textarea/Textarea.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport FormHelperText from '@mui/material/FormHelperText/index.js';\nimport InputLabel from '@mui/material/InputLabel/index.js';\nimport TextareaAutosize from '@mui/material/TextareaAutosize/index.js';\nimport { alpha, styled, useTheme } from '@mui/material/styles/index.js';\nimport type { Theme } from '@mui/material/styles/index.js';\nimport React, { lazy, Suspense, useState } from 'react';\n\nimport {\n  getColorFromTheme,\n  textareaEmphasisStyles } from './Textarea.styles';\n\n/**\n * The rich editor is LOADED ON DEMAND, not imported (12-51 follow-up).\n *\n * It renders only for `variant === 'rich'`, but a static import made every\n * consumer of a plain `<Textarea>` pay for it — 387 lines of toolbar plus the\n * MUI `Tooltip`, `IconButton` and `Divider` its formatting buttons need. That\n * is not theoretical: an adopting storefront imports this entry for a one-line\n * order note, and `Tooltip` (8.7 KiB) reached its EAGER chunk through here\n * while nothing on that critical path renders a tooltip at all.\n *\n * `variant` is a prop, so the branch cannot be decided at build time and no\n * amount of tree-shaking removes it. A lazy boundary is what expresses \"only\n * the rich variant pays\", and it costs the rich variant one microtask it can\n * afford — it is a text editor a user has already chosen to open, never a\n * first-paint element.\n */\nconst TextareaRichEditor = lazy(async () => ({\n  default: (await import('./TextareaRichEditor')).TextareaRichEditor }));\nimport type { TextareaProps } from './Textarea.types';\n\nimport { fieldEdge } from '../../../tokens/field-edge';\nimport { fieldRadius } from '../../../tokens/field-radius';\nimport { FIELD_BORDER_WIDTH, fieldBorder } from '../../../tokens/field-height';\nimport { rem, rems, sxRem } from '../../../tokens/relative';\n\n// Interface for styled component props\ninterface StyledTextareaProps {\n  customVariant?: string;\n  customColor?: string;\n  customSize?: string;\n  glow?: boolean;\n  glass?: boolean;\n  gradient?: boolean;\n  error?: boolean;\n  theme?: Theme;\n}\n\n// Glow animation for enhanced visual effects\nconst StyledTextarea = styled(TextareaAutosize, {\n  shouldForwardProp: (prop) =>\n    !['customVariant', 'customColor', 'customSize', 'glow', 'glass', 'gradient', 'error'].includes(\n      prop as string,\n    ) })<StyledTextareaProps>(({\n  theme,\n  customVariant,\n  customColor = 'primary',\n  customSize = 'md',\n  glow,\n  glass,\n  gradient,\n  error }) => {\n  if (!theme) return {};\n  const colorPalette = getColorFromTheme(theme, customColor);\n  const errorColor = theme.palette.error;\n\n  const sizeMap = {\n    xs: { padding: rems(theme, 6, 8), fontSize: rem(theme, 12), minHeight: rem(theme, 60) },\n    sm: { padding: rems(theme, 8, 10), fontSize: rem(theme, 14), minHeight: rem(theme, 80) },\n    md: { padding: rems(theme, 10, 12), fontSize: rem(theme, 16), minHeight: rem(theme, 100) },\n    lg: { padding: rems(theme, 12, 14), fontSize: rem(theme, 18), minHeight: rem(theme, 120) },\n    xl: { padding: rems(theme, 14, 16), fontSize: rem(theme, 20), minHeight: rem(theme, 140) } };\n\n  const baseStyles = {\n    width: '100%',\n    fontFamily: theme.typography.fontFamily,\n    borderRadius: fieldRadius(theme),\n    border: error ? `${FIELD_BORDER_WIDTH}px solid ${errorColor.main}` : fieldBorder(theme),\n    backgroundColor: theme.palette.background.paper,\n    color: theme.palette.text.primary,\n    transition: 'all 0.3s ease',\n    resize: customVariant === 'resizable' ? 'vertical' : 'none',\n    outline: 'none',\n    ...sizeMap[customSize as keyof typeof sizeMap],\n\n    '&::placeholder': {\n      color: theme.palette.text.secondary,\n      opacity: 0.7 },\n\n    '&:hover': {\n      borderColor: error ? errorColor.dark : colorPalette.main,\n      backgroundColor: alpha(theme.palette.background.paper, 0.8) },\n\n    // Focus is two pixels, like every other field's: the second is an inset\n    // shadow, so the 1px resting border can thicken without the box moving.\n    '&:focus': {\n      borderColor: error ? errorColor.main : colorPalette.main,\n      backgroundColor: theme.palette.background.paper,\n      boxShadow: `inset 0 0 0 ${FIELD_BORDER_WIDTH}px ${error ? errorColor.main : colorPalette.main}, 0 0 0 ${rem(theme, 3)} ${alpha(error ? errorColor.main : colorPalette.main, 0.1)}` } };\n\n  // Glass morphism effect\n  return {\n    ...baseStyles,\n    ...textareaEmphasisStyles({ theme, colorPalette, glass, gradient, glow }) };\n});\n\nconst StyledLabel = styled(InputLabel, {\n  shouldForwardProp: (prop) => !['glass', 'error'].includes(prop as string) })<{ glass?: boolean; error?: boolean }>(({ theme, glass, error }) => ({\n  marginBottom: theme.spacing(1),\n  fontWeight: 500,\n  color: error ? theme.palette.error.main : theme.palette.text.primary,\n  ...(glass && {\n    backgroundColor: alpha(theme.palette.background.paper, 0.1),\n    backdropFilter: `blur(${rem(theme, 10)})`,\n    padding: rems(theme, 4, 8),\n    borderRadius: rem(theme, 4),\n    border: `1px solid ${fieldEdge(theme)}`,\n    display: 'inline-block' }) }));\n\n// IconWrapper - replaced with inline Box component for better TypeScript compatibility\n// const IconWrapper = styled(Box)<{ position: 'start' | 'end' }>(({ theme, position }) => {\n//   const positionStyles = position === 'start' ? { left: '12px' } : { right: '12px' };\n//   return {\n//     position: 'absolute' as const,\n//     top: '12px',\n//     ...positionStyles,\n//     color: theme.palette.text.secondary,\n//     pointerEvents: 'none' as const,\n//     zIndex: 1,\n//   };\n// });\n\n// Rich text toolbar styling\n\nconst TEXTAREA_DEFAULTS = {\n  variant: 'default',\n  color: 'primary',\n  size: 'md',\n  error: false,\n  glassLabel: false,\n  glow: false,\n  glass: false,\n  gradient: false,\n  iconPosition: 'start',\n  minRows: 3 } satisfies Partial<TextareaProps>;\n\n// Strips explicitly-undefined props before the merge, so `prop={undefined}`\n// still falls back to the default as a destructuring default would.\nconst definedProps = (props: TextareaProps): Partial<TextareaProps> =>\n  Object.fromEntries(\n    Object.entries(props).filter(([, value]) => value !== undefined),\n  ) as Partial<TextareaProps>;\n\n// Label above, helper text below — identical for the plain and rich variants,\n// which previously duplicated both.\nconst TextareaShell: React.FC<{\n  testId?: string;\n  label?: React.ReactNode;\n  glassLabel: boolean;\n  error: boolean;\n  helperText?: React.ReactNode;\n  children: React.ReactNode;\n}> = ({ testId, label, glassLabel, error, helperText, children }) => (\n  <Box\n    sx={{ position: 'relative', width: '100%' }}\n    data-testid={testId ? `${testId}-wrapper` : undefined}\n  >\n    {label && (\n      <StyledLabel glass={glassLabel} error={error}>\n        {label}\n      </StyledLabel>\n    )}\n\n    {children}\n\n    {helperText && (\n      <FormHelperText error={error} sx={{ mt: 1 }}>\n        {helperText}\n      </FormHelperText>\n    )}\n  </Box>\n);\n\nconst TextareaIcon: React.FC<{\n  icon?: React.ReactNode;\n  iconPosition: 'start' | 'end';\n}> = ({ icon, iconPosition }) => (\n  <Box\n    sx={{\n      position: 'absolute',\n      top: sxRem(12),\n      ...(iconPosition === 'start' ? { left: sxRem(12) } : { right: sxRem(12) }),\n      color: 'text.secondary',\n      pointerEvents: 'none',\n      zIndex: 1 }}\n  >\n    {icon}\n  </Box>\n);\n\n/**\n * The rich variant, kept out of the main component's body.\n *\n * Two reasons rather than one: the `Suspense` boundary and its props belong\n * together with the lazy import above, and the component that renders every\n * OTHER variant stays inside the size the complexity gate allows without\n * anything being suppressed.\n */\nfunction RichVariant({\n  shell,\n  editor }: {\n  shell: Omit<React.ComponentProps<typeof TextareaShell>, 'children'>;\n  editor: React.ComponentProps<typeof TextareaRichEditor>;\n}): React.JSX.Element {\n  return (\n    <TextareaShell {...shell}>\n      {/*\n        `null` rather than a spinner: the editor resolves from the same document\n        the caller is already rendering, so a fallback would flash for a frame\n        and read as a glitch rather than as loading.\n      */}\n      <Suspense fallback={null}>\n        <TextareaRichEditor {...editor} />\n      </Suspense>\n    </TextareaShell>\n  );\n}\n\n// Same gap either side; only which side it applies to changes. The previous\n// version had `iconPosition === 'start' ? '40px' : '40px'`, a ternary whose\n// two branches were identical. The icon's gutter is 40px at the design scale.\nfunction withIconGutter(\n  theme: Theme,\n  style: React.CSSProperties | undefined,\n  hasIcon: boolean,\n  iconPosition: TextareaProps['iconPosition'],\n): React.CSSProperties {\n  if (!hasIcon) return { ...style };\n  return { ...style, [iconPosition === 'start' ? 'paddingLeft' : 'paddingRight']: rem(theme, 40) };\n}\n\nexport const Textarea: React.FC<TextareaProps> = (textareaProps) => {\n  const {\n    variant,\n    color,\n    size,\n    error,\n    helperText,\n    label,\n    glassLabel,\n    glow,\n    glass,\n    gradient,\n    icon,\n    iconPosition,\n    minRows,\n    maxRows,\n    style,\n    'data-testid': dataTestId,\n    dataTestId: dataTestIdCamelCase,\n    ...props\n  } = { ...TEXTAREA_DEFAULTS, ...definedProps(textareaProps) };\n\n  // Read off the props rather than the merged object: the spread widens every\n  // key to optional, which would lose what the variant union already proved.\n  const { richEditorCopy } = textareaProps;\n\n  const theme = useTheme();\n  const [richTextValue, setRichTextValue] = useState('');\n  const hasIcon = Boolean(icon);\n  const testId = dataTestId || dataTestIdCamelCase;\n\n  const textareaStyle = withIconGutter(theme, style, hasIcon, iconPosition);\n\n  // If rich text variant, use the rich text editor\n  if (variant === 'rich' && richEditorCopy) {\n    return (\n      <RichVariant\n        shell={{ testId, label, glassLabel, error, helperText }}\n        editor={{\n          copy: richEditorCopy,\n          value: richTextValue,\n          onChange: setRichTextValue,\n          placeholder: props.placeholder,\n          error,\n          glass,\n          color,\n          characterLimit: props.maxLength }}\n      />\n    );\n  }\n\n  return (\n    <TextareaShell testId={testId} label={label} glassLabel={glassLabel} error={error} helperText={helperText}>\n      <Box sx={{ position: 'relative' }}>\n        {hasIcon && <TextareaIcon icon={icon} iconPosition={iconPosition} />}\n\n        <StyledTextarea\n          customVariant={variant}\n          customColor={color}\n          customSize={size}\n          glow={glow}\n          glass={glass}\n          gradient={gradient}\n          error={error}\n          minRows={variant === 'autosize' ? minRows : undefined}\n          maxRows={variant === 'autosize' ? maxRows : undefined}\n          style={textareaStyle}\n          aria-label={label || props['aria-label']}\n          data-testid={testId}\n          {...props}\n        />\n      </Box>\n    </TextareaShell>\n  );\n};\n\nTextarea.displayName = 'Textarea';\n"],"mappings":"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","names":[]}

package/dist/{chunk-LWRI6HGT.js → chunk-ECNJGROX.js}

@@ -8,7 +8,9 @@ import {
   getStrengthLabel
 } from "./chunk-SAIO6EBW.js";
 import {
-  rem
+  rem,
+  rems,
+  sxRem
 } from "./chunk-YKCAJ2TN.js";
 
 // src/components/form/PasswordStrength/PasswordStrength.tsx
@@ -34,9 +36,9 @@ var pulseAnimation = keyframes`
     opacity: 0.7;
   }
 `;
-var slideInAnimation = keyframes`
+var slideInAnimation = (theme) => keyframes`
   from {
-    transform: translateX(-10px);
+    transform: translateX(${rem(theme, -10)});
     opacity: 0;
   }
   to {
@@ -50,8 +52,8 @@ var StrengthContainer = styled(Box, {
   width: "100%",
   padding: theme.spacing(2),
   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)",
+  backdropFilter: `blur(${rem(theme, 10)})`,
+  WebkitBackdropFilter: `blur(${rem(theme, 10)})`,
   border: `1px solid ${alpha(theme.palette.divider, 0.18)}`,
   borderRadius: theme.shape.borderRadius * 2,
   transition: animated ? "all 0.3s ease" : "none"
@@ -71,14 +73,14 @@ var StrengthBar = styled(LinearProgress, {
     return `linear-gradient(90deg, ${color} 0%, ${alpha(color, 0.8)} 100%)`;
   };
   return {
-    height: 8,
-    borderRadius: 4,
+    height: rem(theme, 8),
+    borderRadius: rem(theme, 4),
     backgroundColor: alpha(theme.palette.action.disabled, 0.1),
     "& .MuiLinearProgress-bar": {
-      borderRadius: 4,
+      borderRadius: rem(theme, 4),
       background: getGradient(),
       transition: animated ? "all 0.3s ease" : "none",
-      boxShadow: `0 2px 8px ${alpha(getColor(), 0.3)}`
+      boxShadow: `0 ${rems(theme, 2, 8)} ${alpha(getColor(), 0.3)}`
     }
   };
 });
@@ -92,7 +94,7 @@ var RequirementItem = styled(Box, {
   borderRadius: theme.shape.borderRadius,
   background: met ? alpha(theme.palette.success.main, 0.08) : alpha(theme.palette.action.disabled, 0.04),
   transition: animated ? "all 0.3s ease" : "none",
-  animation: animated ? `${slideInAnimation} 0.3s ease` : "none",
+  animation: animated ? `${slideInAnimation(theme)} 0.3s ease` : "none",
   "& svg": {
     fontSize: rem(theme, 16),
     color: met ? theme.palette.success.main : theme.palette.text.disabled
@@ -127,11 +129,11 @@ var Step = styled(Box, {
 })(
   ({ theme, active, completed, animated }) => ({
     flex: 1,
-    height: 6,
-    borderRadius: 3,
+    height: rem(theme, 6),
+    borderRadius: rem(theme, 3),
     background: completed ? `linear-gradient(90deg, ${theme.palette.success.main} 0%, ${theme.palette.success.light} 100%)` : active ? `linear-gradient(90deg, ${theme.palette.warning.main} 0%, ${theme.palette.warning.light} 100%)` : alpha(theme.palette.action.disabled, 0.2),
     transition: animated ? "all 0.3s ease" : "none",
-    boxShadow: completed ? `0 2px 8px ${alpha(theme.palette.success.main, 0.3)}` : "none"
+    boxShadow: completed ? `0 ${rems(theme, 2, 8)} ${alpha(theme.palette.success.main, 0.3)}` : "none"
   })
 );
 var StrengthIndicator = ({ variant, strength, animated }) => {
@@ -142,8 +144,8 @@ var StrengthIndicator = ({ variant, strength, animated }) => {
         Box,
         {
           sx: {
-            width: 80,
-            height: 80,
+            width: sxRem(80),
+            height: sxRem(80),
             borderRadius: "50%",
             background: `conic-gradient(
                 ${theme.palette.success.main} 0deg ${strength * 3.6}deg,
@@ -152,14 +154,14 @@ var StrengthIndicator = ({ variant, strength, animated }) => {
             display: "flex",
             alignItems: "center",
             justifyContent: "center",
-            boxShadow: `0 4px 12px ${alpha(theme.palette.success.main, strength / 200)}`
+            boxShadow: `0 ${rems(theme, 4, 12)} ${alpha(theme.palette.success.main, strength / 200)}`
           },
           children: /* @__PURE__ */ jsx(
             Box,
             {
               sx: {
-                width: 64,
-                height: 64,
+                width: sxRem(64),
+                height: sxRem(64),
                 borderRadius: "50%",
                 background: theme.palette.background.paper,
                 display: "flex",
@@ -294,4 +296,4 @@ export {
   PasswordStrength,
   PasswordStrength_default
 };
-//# sourceMappingURL=chunk-LWRI6HGT.js.map
+//# sourceMappingURL=chunk-ECNJGROX.js.map

package/dist/chunk-ECNJGROX.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/PasswordStrength/PasswordStrength.tsx"],"sourcesContent":["import CheckIcon from '@mui/icons-material/Check';\nimport CloseIcon from '@mui/icons-material/Close';\n\nimport Box from '@mui/material/Box/index.js';\nimport Chip from '@mui/material/Chip/index.js';\nimport Fade from '@mui/material/Fade/index.js';\nimport LinearProgress from '@mui/material/LinearProgress/index.js';\nimport Stack from '@mui/material/Stack/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport type { Theme } from '@mui/material/styles/index.js';\nimport { alpha, keyframes, styled, useTheme } from '@mui/material/styles/index.js';\nimport type { FC} from 'react';\nimport React, { useMemo } from 'react';\n\nimport type { RequirementChecks } from './PasswordStrength.helpers';\nimport {\n  buildSuggestions,\n  calculatePasswordStrength,\n  defaultRequirements,\n  evaluateRequirements,\n  getStrengthIcon,\n  getStrengthLabel,\n  SuggestionsList } from './PasswordStrength.helpers';\nimport type { PasswordRequirements, PasswordStrengthProps } from './PasswordStrength.types';\nimport type { PasswordStrengthCopy } from '../../../copy';\nimport { rem, rems, sxRem } from '../../../tokens/relative';\n\ninterface RequirementIconProps {\n  met: boolean;\n}\n const RequirementIcon: FC<RequirementIconProps> = ({ met }) => {\n  return met ? (\n    <CheckIcon data-testid=\"check-icon\" />\n  ) : (\n    <CloseIcon data-testid=\"close-icon\" />\n  );\n};\n\n// Default requirements\n// Animation keyframes\nconst pulseAnimation = keyframes`\n  0%, 100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.7;\n  }\n`;\n\nconst slideInAnimation = (theme: Theme) => keyframes`\n  from {\n    transform: translateX(${rem(theme, -10)});\n    opacity: 0;\n  }\n  to {\n    transform: translateX(0);\n    opacity: 1;\n  }\n`;\n\n// Styled components\nconst StrengthContainer = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'animated' })<{ animated?: boolean }>(({ theme, animated }) => ({\n  width: '100%',\n  padding: theme.spacing(2),\n  background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.8)} 0%, ${alpha(theme.palette.background.paper, 0.6)} 100%)`,\n  backdropFilter: `blur(${rem(theme, 10)})`,\n  WebkitBackdropFilter: `blur(${rem(theme, 10)})`,\n  border: `1px solid ${alpha(theme.palette.divider, 0.18)}`,\n  borderRadius: theme.shape.borderRadius * 2,\n  transition: animated ? 'all 0.3s ease' : 'none' }));\n\nconst StrengthBar = styled(LinearProgress, {\n  shouldForwardProp: (prop) => prop !== 'strength' && prop !== 'animated' })<{ strength: number; animated?: boolean }>(({ theme, strength, animated }) => {\n  const getColor = () => {\n    if (strength <= 20) return theme.palette.error.main;\n    if (strength <= 40) return theme.palette.warning.main;\n    if (strength <= 60) return theme.palette.info.main;\n    if (strength <= 80) return theme.palette.success.light;\n    return theme.palette.success.main;\n  };\n\n  const getGradient = () => {\n    const color = getColor();\n    return `linear-gradient(90deg, ${color} 0%, ${alpha(color, 0.8)} 100%)`;\n  };\n\n  return {\n    height: rem(theme, 8),\n    borderRadius: rem(theme, 4),\n    backgroundColor: alpha(theme.palette.action.disabled, 0.1),\n    '& .MuiLinearProgress-bar': {\n      borderRadius: rem(theme, 4),\n      background: getGradient(),\n      transition: animated ? 'all 0.3s ease' : 'none',\n      boxShadow: `0 ${rems(theme, 2, 8)} ${alpha(getColor(), 0.3)}` } };\n});\n\nconst RequirementItem = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'met' && prop !== 'animated' })<{ met: boolean; animated?: boolean }>(({ theme, met, animated }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(1),\n  padding: theme.spacing(0.75, 1),\n  borderRadius: theme.shape.borderRadius,\n  background: met\n    ? alpha(theme.palette.success.main, 0.08)\n    : alpha(theme.palette.action.disabled, 0.04),\n  transition: animated ? 'all 0.3s ease' : 'none',\n  animation: animated ? `${slideInAnimation(theme)} 0.3s ease` : 'none',\n  '& svg': {\n    fontSize: rem(theme, 16),\n    color: met ? theme.palette.success.main : theme.palette.text.disabled } }));\n\nconst StrengthLabel = styled(Chip, {\n  shouldForwardProp: (prop) => prop !== 'strength' && prop !== 'animated' })<{ strength: number; animated?: boolean }>(({ theme, strength, animated }) => {\n  const getColor = () => {\n    if (strength <= 20) return theme.palette.error;\n    if (strength <= 40) return theme.palette.warning;\n    if (strength <= 60) return theme.palette.info;\n    if (strength <= 80) return theme.palette.success;\n    return theme.palette.success;\n  };\n\n  const palette = getColor();\n\n  return {\n    background: alpha(palette.main, 0.1),\n    color: palette.main,\n    border: `1px solid ${alpha(palette.main, 0.3)}`,\n    fontWeight: 600,\n    animation: animated ? `${pulseAnimation} 2s ease infinite` : 'none' };\n});\n\nconst StepsContainer = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  gap: theme.spacing(1),\n  marginTop: theme.spacing(2) }));\n\nconst Step = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'active' && prop !== 'completed' && prop !== 'animated' })<{ active: boolean; completed: boolean; animated?: boolean }>(\n  ({ theme, active, completed, animated }) => ({\n    flex: 1,\n    height: rem(theme, 6),\n    borderRadius: rem(theme, 3),\n    background: completed\n      ? `linear-gradient(90deg, ${theme.palette.success.main} 0%, ${theme.palette.success.light} 100%)`\n      : active\n        ? `linear-gradient(90deg, ${theme.palette.warning.main} 0%, ${theme.palette.warning.light} 100%)`\n        : alpha(theme.palette.action.disabled, 0.2),\n    transition: animated ? 'all 0.3s ease' : 'none',\n    boxShadow: completed ? `0 ${rems(theme, 2, 8)} ${alpha(theme.palette.success.main, 0.3)}` : 'none' }),\n);\n\n// The three indicator variants, out of the component body so the render keeps\n// only its own layout branches.\nconst StrengthIndicator: React.FC<{\n  variant: PasswordStrengthProps['variant'];\n  strength: number;\n  animated: boolean;\n}> = ({ variant, strength, animated }) => {\n  const theme = useTheme();\n\n  switch (variant) {\n    case 'circular':\n      return (\n        <Box sx={{ position: 'relative', display: 'inline-flex' }}>\n          <Box\n            sx={{\n              width: sxRem(80),\n              height: sxRem(80),\n              borderRadius: '50%',\n              background: `conic-gradient(\n                ${theme.palette.success.main} 0deg ${strength * 3.6}deg,\n                ${alpha(theme.palette.action.disabled, 0.1)} ${strength * 3.6}deg 360deg\n              )`,\n              display: 'flex',\n              alignItems: 'center',\n              justifyContent: 'center',\n              boxShadow: `0 ${rems(theme, 4, 12)} ${alpha(theme.palette.success.main, strength / 200)}` }}\n          >\n            <Box\n              sx={{\n                width: sxRem(64),\n                height: sxRem(64),\n                borderRadius: '50%',\n                background: theme.palette.background.paper,\n                display: 'flex',\n                alignItems: 'center',\n                justifyContent: 'center',\n                flexDirection: 'column' }}\n            >\n              <Typography variant=\"h6\" fontWeight=\"bold\">\n                {strength}%\n              </Typography>\n            </Box>\n          </Box>\n        </Box>\n      );\n\n    case 'steps': {\n      const steps = 5;\n      const activeStep = Math.ceil((strength / 100) * steps);\n      return (\n        <StepsContainer>\n          {Array.from({ length: steps }, (_, i) => (\n            <Step key={i} active={i === activeStep - 1} completed={i < activeStep - 1} animated={animated} />\n          ))}\n        </StepsContainer>\n      );\n    }\n\n    default:\n      return <StrengthBar variant=\"determinate\" value={strength} strength={strength} animated={animated} />;\n  }\n};\n\nconst StrengthHeading: React.FC<{\n  copy: PasswordStrengthCopy;\n  strength: number;\n  hasValue: boolean;\n  animated: boolean;\n}> = ({ copy, strength, hasValue, animated }) => (\n  <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>\n    <Typography variant=\"body2\" color=\"text.secondary\">\n      {copy.strengthHeading}\n    </Typography>\n    {hasValue && (\n      <Fade in={true}>\n        <StrengthLabel\n          label={getStrengthLabel(strength, copy.bands)}\n          icon={getStrengthIcon(strength)}\n          size=\"small\"\n          strength={strength}\n          animated={animated}\n        />\n      </Fade>\n    )}\n  </Box>\n);\n\n// One row per enabled requirement. Previously five near-identical JSX blocks,\n// each with its own `requirements.x &&` guard.\n//\n// `forwardRef` because it is `Fade`'s child: Fade hands it a ref and reads\n// `scrollTop` off that node on enter, so a component that drops the ref throws\n// the moment the first character is typed. Only the ref: Fade's injected\n// `style` (opacity/visibility) is still dropped, so the list stays visible.\nconst RequirementsList = React.forwardRef<\n  HTMLDivElement,\n  {\n    copy: PasswordStrengthCopy;\n    requirements: PasswordRequirements;\n    checks: RequirementChecks;\n    animated: boolean;\n  }\n>(({ copy, requirements, checks, animated }, ref) => {\n  const rows: ReadonlyArray<[unknown, keyof RequirementChecks, React.ReactNode]> = [\n    [requirements.minLength, 'length', copy.requirements.minLength(requirements.minLength ?? 0)],\n    [requirements.uppercase, 'uppercase', copy.requirements.uppercase],\n    [requirements.lowercase, 'lowercase', copy.requirements.lowercase],\n    [requirements.numbers, 'numbers', copy.requirements.numbers],\n    [requirements.special, 'special', copy.requirements.special],\n  ];\n\n  return (\n    <Stack ref={ref} spacing={1}>\n      <Typography variant=\"caption\" color=\"text.secondary\" fontWeight=\"medium\">\n        {copy.requirementsHeading}\n      </Typography>\n      {rows\n        .filter(([enabled]) => Boolean(enabled))\n        .map(([, key, label]) => (\n          <RequirementItem key={key} met={checks[key]} animated={animated}>\n            <RequirementIcon met={checks[key]} />\n            <Typography variant=\"caption\">{label}</Typography>\n          </RequirementItem>\n        ))}\n    </Stack>\n  );\n});\nRequirementsList.displayName = 'RequirementsList';\n\n// The visible sections. Kept apart from PasswordStrength itself so the exported\n// component is just prop defaults plus the three memos, and every display guard\n// lives in one place.\nconst PasswordStrengthBody: React.FC<{\n  value: string;\n  strength: number;\n  copy: PasswordStrengthCopy;\n  requirements: PasswordRequirements;\n  requirementChecks: RequirementChecks;\n  suggestions: string[];\n  showStrengthLabel: boolean;\n  showRequirements: boolean;\n  showSuggestions: boolean;\n  variant: PasswordStrengthProps['variant'];\n  animated: boolean;\n}> = ({\n  copy,\n  value,\n  strength,\n  requirements,\n  requirementChecks,\n  suggestions,\n  showStrengthLabel,\n  showRequirements,\n  showSuggestions,\n  variant,\n  animated }) => (\n    <Stack spacing={2}>\n      {showStrengthLabel && (\n        <StrengthHeading\n          copy={copy}\n          strength={strength}\n          hasValue={value.length > 0}\n          animated={animated}\n        />\n      )}\n\n      <StrengthIndicator variant={variant} strength={strength} animated={animated} />\n\n      {showRequirements && (\n        <Fade in={value.length > 0}>\n          <RequirementsList\n            copy={copy}\n            requirements={requirements}\n            checks={requirementChecks}\n            animated={animated}\n          />\n        </Fade>\n      )}\n\n      {showSuggestions && suggestions.length > 0 && value.length > 0 && (\n        <Fade in={true}>\n          <SuggestionsList suggestions={suggestions} heading={copy.suggestionsHeading} />\n        </Fade>\n      )}\n    </Stack>\n);\n\n// Main component\nexport const PasswordStrength: FC<PasswordStrengthProps> = ({\n  copy,\n  value = '',\n  showRequirements = true,\n  requirements = defaultRequirements,\n  showStrengthLabel = true,\n  showSuggestions = false,\n  variant = 'linear',\n  animated = true,\n  'data-testid': dataTestId }) => {\n\n  const strength = useMemo(\n    () => calculatePasswordStrength(value, requirements),\n    [value, requirements],\n  );\n\n  const requirementChecks = useMemo(\n    () => evaluateRequirements(value, requirements),\n    [value, requirements],\n  );\n\n  const suggestions = useMemo(\n    () => buildSuggestions(requirementChecks, copy.suggestions, requirements.minLength ?? 0),\n    [requirementChecks, copy.suggestions, requirements.minLength],\n  );\n\n  return (\n    <StrengthContainer animated={animated} data-testid={dataTestId}>\n      <PasswordStrengthBody\n        copy={copy}\n        value={value}\n        strength={strength}\n        requirements={requirements}\n        requirementChecks={requirementChecks}\n        suggestions={suggestions}\n        showStrengthLabel={showStrengthLabel}\n        showRequirements={showRequirements}\n        showSuggestions={showSuggestions}\n        variant={variant}\n        animated={animated}\n      />\n    </StrengthContainer>\n  );\n};\n\n// Export default\nexport default PasswordStrength;\n"],"mappings":"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","names":[]}