@12-apps/ui 6.36.0 → 6.38.0

package/dist/{chunk-JXUWWPZR.js → chunk-VQYR64QB.js}

@@ -1,3 +1,7 @@
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
 // src/components/feedback/Toast/Toast.tsx
 import SuccessIcon from "@mui/icons-material/CheckCircle";
 import CloseIcon from "@mui/icons-material/Close";
@@ -81,7 +85,7 @@ var useToast = () => {
   }
   return context;
 };
-var renderVariantIcon = (variant) => {
+var renderVariantIcon = (theme, variant) => {
   switch (variant) {
     case "success":
       return /* @__PURE__ */ jsx(SuccessIcon, {});
@@ -92,7 +96,7 @@ var renderVariantIcon = (variant) => {
     case "info":
       return /* @__PURE__ */ jsx(InfoIcon, {});
     case "promise":
-      return /* @__PURE__ */ jsx(CircularProgress, { size: 20 });
+      return /* @__PURE__ */ jsx(CircularProgress, { size: rem(theme, 20) });
     default:
       return null;
   }
@@ -109,7 +113,7 @@ var buildToastStyles = (theme, glass) => {
     return {
       ...baseStyles,
       backgroundColor: alpha(theme.palette.background.paper, 0.1),
-      backdropFilter: "blur(20px)",
+      backdropFilter: `blur(${rem(theme, 20)})`,
       border: `1px solid ${alpha(theme.palette.primary.main, 0.2)}`
     };
   }
@@ -135,7 +139,7 @@ var Toast = ({
     Alert,
     {
       "data-testid": dataTestId,
-      icon: renderVariantIcon(variant),
+      icon: renderVariantIcon(theme, variant),
       severity: toAlertSeverity(variant),
       onClose: closable ? handleClose : void 0,
       action: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
@@ -169,10 +173,11 @@ var Toast = ({
 var ToastContainer = ({
   position = "top-right",
   maxToasts = 5,
-  gap = 8,
+  gap,
   className,
   dataTestId = "toast-container"
 }) => {
+  const theme = useTheme();
   const context = useContext(ToastContext);
   if (!context) {
     throw new Error("ToastContainer must be used within a ToastProvider");
@@ -184,8 +189,9 @@ var ToastContainer = ({
       zIndex: 9999,
       display: "flex",
       flexDirection: "column",
-      gap: `${gap}px`,
-      padding: "16px",
+      // `gap` is design px (default 8), read through the type scale.
+      gap: rem(theme, gap ?? 8),
+      padding: rem(theme, 16),
       pointerEvents: "none"
     };
     switch (position) {
@@ -230,4 +236,4 @@ export {
   Toast,
   ToastContainer
 };
-//# sourceMappingURL=chunk-JXUWWPZR.js.map
+//# sourceMappingURL=chunk-VQYR64QB.js.map

package/dist/chunk-VQYR64QB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/feedback/Toast/Toast.tsx"],"sourcesContent":["import SuccessIcon from '@mui/icons-material/CheckCircle';\nimport CloseIcon from '@mui/icons-material/Close';\nimport ErrorIcon from '@mui/icons-material/Error';\nimport InfoIcon from '@mui/icons-material/Info';\nimport WarningIcon from '@mui/icons-material/Warning';\nimport type { Theme } from '@mui/material/styles/index.js';\nimport Alert from '@mui/material/Alert/index.js';\nimport Box from '@mui/material/Box/index.js';\nimport Button from '@mui/material/Button/index.js';\nimport CircularProgress from '@mui/material/CircularProgress/index.js';\nimport IconButton from '@mui/material/IconButton/index.js';\nimport Portal from '@mui/material/Portal/index.js';\nimport Slide from '@mui/material/Slide/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { alpha, useTheme } from '@mui/material/styles/index.js';\nimport React, { createContext, useCallback,useContext, useState } from 'react';\n\nimport { rem } from '../../../tokens/relative';\n\nimport type { ToastContainerProps, ToastContextType, ToastItem,ToastProps } from './Toast.types';\n\nconst ToastContext = createContext<ToastContextType | null>(null);\n\ntype PromiseToastOptions<T> = {\n  loading: string;\n  success: string | ((data: T) => string);\n  error: string | ((error: unknown) => string);\n};\n\n// success/error may be a literal or a formatter over the settled value.\nconst resolveToastMessage = <T,>(message: string | ((value: T) => string), value: T): string =>\n  typeof message === 'function' ? message(value) : message;\n\n// Shows a persistent \"loading\" toast for the life of a promise, then swaps it\n// for a success or error one. Lives outside the provider so the provider body\n// stays readable; it takes add/remove rather than reaching for context.\nconst trackPromiseWithToasts = async <T,>(\n  promiseToResolve: Promise<T>,\n  options: PromiseToastOptions<T>,\n  addToast: (toast: Omit<ToastProps, 'id'>) => string,\n  removeToast: (id: string) => void,\n): Promise<T> => {\n  const toastId = addToast({\n    message: options.loading,\n    variant: 'promise',\n    persistent: true,\n  });\n\n  try {\n    const data = await promiseToResolve;\n\n    removeToast(toastId);\n    addToast({ message: resolveToastMessage(options.success, data), variant: 'success' });\n\n    return data;\n  } catch (error) {\n    removeToast(toastId);\n    addToast({ message: resolveToastMessage(options.error, error), variant: 'error' });\n\n    throw error;\n  }\n};\n\nexport const ToastProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {\n  const [toasts, setToasts] = useState<ToastItem[]>([]);\n\n  const removeToast = useCallback((id: string) => {\n    setToasts((prev) => prev.filter((toast) => toast.id !== id));\n  }, []);\n\n  const addToast = useCallback(\n    (toast: Omit<ToastProps, 'id'>): string => {\n      const id = `toast-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;\n      const newToast: ToastItem = {\n        ...toast,\n        id,\n        timestamp: Date.now(),\n      };\n\n      setToasts((prev) => [...prev, newToast]);\n\n      if (!toast.persistent && toast.duration !== 0) {\n        const duration = toast.duration ?? 5000;\n        window.setTimeout(() => {\n          removeToast(id);\n        }, duration);\n      }\n\n      return id;\n    },\n    [removeToast],\n  );\n\n  const clearAllToasts = useCallback(() => {\n    setToasts([]);\n  }, []);\n\n  const promise = useCallback(\n    <T,>(promiseToResolve: Promise<T>, options: PromiseToastOptions<T>): Promise<T> =>\n      trackPromiseWithToasts(promiseToResolve, options, addToast, removeToast),\n    [addToast, removeToast],\n  );\n\n  const contextValue: ToastContextType = {\n    toasts,\n    addToast,\n    removeToast,\n    clearAllToasts,\n    promise,\n  };\n\n  return <ToastContext.Provider value={contextValue}>{children}</ToastContext.Provider>;\n};\n\nexport const useToast = (): ToastContextType => {\n  const context = useContext(ToastContext);\n  if (!context) {\n    throw new Error('useToast must be used within a ToastProvider');\n  }\n  return context;\n};\n\nconst renderVariantIcon = (theme: Theme, variant: ToastProps['variant']) => {\n  switch (variant) {\n    case 'success':\n      return <SuccessIcon />;\n    case 'error':\n      return <ErrorIcon />;\n    case 'warning':\n      return <WarningIcon />;\n    case 'info':\n      return <InfoIcon />;\n    case 'promise':\n      return <CircularProgress size={rem(theme, 20)} />;\n    default:\n      return null;\n  }\n};\n\n// 'default' and 'promise' have no MUI severity of their own; both read as info.\nconst toAlertSeverity = (variant: ToastProps['variant']) =>\n  variant === 'default' || variant === 'promise' ? 'info' : variant;\n\nconst buildToastStyles = (theme: Theme, glass: boolean) => {\n  const baseStyles = {\n    borderRadius: theme.spacing(1.5),\n    transition: theme.transitions.create(['background-color', 'backdrop-filter'], {\n      duration: theme.transitions.duration.standard,\n    }),\n  };\n\n  if (glass) {\n    return {\n      ...baseStyles,\n      backgroundColor: alpha(theme.palette.background.paper, 0.1),\n      backdropFilter: `blur(${rem(theme, 20)})`,\n      border: `1px solid ${alpha(theme.palette.primary.main, 0.2)}`,\n    };\n  }\n\n  return baseStyles;\n};\n\nexport const Toast: React.FC<ToastProps> = ({\n  id = '',\n  message,\n  variant = 'default',\n  closable = true,\n  action,\n  glass = false,\n  onClose,\n  dataTestId = 'toast',\n}) => {\n  const theme = useTheme();\n\n  const handleClose = () => {\n    if (onClose && id) {\n      onClose(id);\n    }\n  };\n\n  return (\n    <Alert\n      data-testid={dataTestId}\n      icon={renderVariantIcon(theme, variant)}\n      severity={toAlertSeverity(variant)}\n      onClose={closable ? handleClose : undefined}\n      action={\n        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>\n          {action && (\n            <Button\n              data-testid={`${dataTestId}-action`}\n              color=\"inherit\"\n              size=\"small\"\n              onClick={action.onClick}\n            >\n              {action.label}\n            </Button>\n          )}\n          {closable && (\n            <IconButton\n              data-testid={`${dataTestId}-close`}\n              aria-label=\"close\"\n              color=\"inherit\"\n              size=\"small\"\n              onClick={handleClose}\n            >\n              <CloseIcon fontSize=\"small\" />\n            </IconButton>\n          )}\n        </Box>\n      }\n      sx={buildToastStyles(theme, glass)}\n    >\n      <Typography data-testid={`${dataTestId}-message`} variant=\"body2\">{message}</Typography>\n    </Alert>\n  );\n};\n\nexport const ToastContainer: React.FC<ToastContainerProps> = ({\n  position = 'top-right',\n  maxToasts = 5,\n  gap,\n  className,\n  dataTestId = 'toast-container',\n}) => {\n  const theme = useTheme();\n  const context = useContext(ToastContext);\n  \n  if (!context) {\n    throw new Error('ToastContainer must be used within a ToastProvider');\n  }\n\n  const { toasts, removeToast } = context;\n\n  const getPositionStyles = (): React.CSSProperties => {\n    const baseStyles: React.CSSProperties = {\n      position: 'fixed',\n      zIndex: 9999,\n      display: 'flex',\n      flexDirection: 'column',\n      // `gap` is design px (default 8), read through the type scale.\n      gap: rem(theme, gap ?? 8),\n      padding: rem(theme, 16),\n      pointerEvents: 'none',\n    };\n\n    switch (position) {\n      case 'top-left':\n        return { ...baseStyles, top: 0, left: 0 };\n      case 'top-center':\n        return { ...baseStyles, top: 0, left: '50%', transform: 'translateX(-50%)' };\n      case 'top-right':\n        return { ...baseStyles, top: 0, right: 0 };\n      case 'bottom-left':\n        return { ...baseStyles, bottom: 0, left: 0, flexDirection: 'column-reverse' };\n      case 'bottom-center':\n        return {\n          ...baseStyles,\n          bottom: 0,\n          left: '50%',\n          transform: 'translateX(-50%)',\n          flexDirection: 'column-reverse',\n        };\n      case 'bottom-right':\n        return { ...baseStyles, bottom: 0, right: 0, flexDirection: 'column-reverse' };\n      default:\n        return { ...baseStyles, top: 0, right: 0 };\n    }\n  };\n\n  return (\n    <Portal>\n      <Box data-testid={dataTestId} className={className} sx={getPositionStyles()}>\n        {toasts.slice(0, maxToasts).map((toast, index) => (\n          <Slide\n            key={toast.id}\n            direction={position.includes('left') ? 'right' : 'left'}\n            in={true}\n            timeout={300}\n            style={{ pointerEvents: 'auto' }}\n          >\n            <Box data-testid={`${dataTestId}-item-${index}`}>\n              <Toast {...toast} onClose={removeToast} dataTestId={toast.dataTestId || `toast-${index}`} />\n            </Box>\n          </Slide>\n        ))}\n      </Box>\n    </Portal>\n  );\n};\n"],"mappings":"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","names":[]}

package/dist/{chunk-72DKEBJM.js → chunk-VRPREI27.js}

@@ -38,7 +38,7 @@ function ViewSelector({
   const activeOption = VIEW_OPTIONS.find((option) => option.value === viewMode) ?? VIEW_OPTIONS[0];
   const ActiveIcon = activeOption.icon;
   return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1.5 }, children: [
-    viewMode === "grid" && /* @__PURE__ */ jsx(Box, { sx: { width: 96, display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx(
+    viewMode === "grid" && /* @__PURE__ */ jsx(Box, { sx: { width: sxRem(96), display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx(
       Slider,
       {
         "data-testid": "resize-card-slider",
@@ -77,7 +77,7 @@ function ViewSelector({
         onClose: () => setAnchorEl(null),
         anchorOrigin: { vertical: "bottom", horizontal: "right" },
         transformOrigin: { vertical: "top", horizontal: "right" },
-        slotProps: { paper: { sx: { minWidth: 180 } } },
+        slotProps: { paper: { sx: { minWidth: sxRem(180) } } },
         children: VIEW_OPTIONS.map((option) => {
           const OptionIcon = option.icon;
           const selected = viewMode === option.value;
@@ -107,4 +107,4 @@ function ViewSelector({
 export {
   ViewSelector
 };
-//# sourceMappingURL=chunk-72DKEBJM.js.map
+//# sourceMappingURL=chunk-VRPREI27.js.map

package/dist/chunk-VRPREI27.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/ContentToolbar/ViewSelector.tsx"],"sourcesContent":["'use client';\n\nimport CheckIcon from '@mui/icons-material/Check';\nimport ChevronDownIcon from '@mui/icons-material/KeyboardArrowDown';\nimport GridIcon from '@mui/icons-material/GridViewOutlined';\nimport ListIcon from '@mui/icons-material/FormatListBulletedRounded';\nimport Box from '@mui/material/Box/index.js';\nimport Button from '@mui/material/Button/index.js';\nimport ListItemIcon from '@mui/material/ListItemIcon/index.js';\nimport ListItemText from '@mui/material/ListItemText/index.js';\nimport Menu from '@mui/material/Menu/index.js';\nimport MenuItem from '@mui/material/MenuItem/index.js';\nimport Slider from '@mui/material/Slider/index.js';\n// `SvgIconComponent` is declared inline in @mui/icons-material's barrel and has\n// no module of its own, so the deep-import equivalent is its own definition:\n// `type SvgIconComponent = typeof SvgIcon`.\nimport type SvgIcon from '@mui/material/SvgIcon/index.js';\nimport React, { useState } from 'react';\n\nimport type { ViewMode, ViewSelectorProps } from './ContentToolbar.types';\nimport { fieldRadiusPx } from '../../../tokens/field-radius';\nimport { fieldHeight } from '../../../tokens/field-height';\nimport { sxRem } from '../../../tokens/relative';\n\nconst VIEW_OPTIONS: { value: ViewMode; label: string; icon: typeof SvgIcon }[] = [\n  { value: 'grid', label: 'Grid View', icon: GridIcon },\n  { value: 'list', label: 'List View', icon: ListIcon },\n];\n\n/**\n * View selector: a grid/list dropdown plus a card-size zoom slider (grid mode\n * only). Faithful MUI port of the reference toolbar's view control.\n */\nexport function ViewSelector({\n  viewMode,\n  onViewModeChange,\n  zoom,\n  onZoomChange,\n  cardSizeLabel,\n}: ViewSelectorProps): React.JSX.Element {\n  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);\n  const open = Boolean(anchorEl);\n  const activeOption = VIEW_OPTIONS.find((option) => option.value === viewMode) ?? VIEW_OPTIONS[0]!;\n  const ActiveIcon = activeOption.icon;\n\n  return (\n    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>\n      {viewMode === 'grid' && (\n        <Box sx={{ width: sxRem(96), display: 'flex', alignItems: 'center' }}>\n          <Slider\n            data-testid=\"resize-card-slider\"\n            aria-label={cardSizeLabel}\n            value={zoom[0] ?? 0}\n            onChange={(_, value) => onZoomChange([value as number])}\n            min={0}\n            max={100}\n            step={1}\n            size=\"small\"\n          />\n        </Box>\n      )}\n\n      <Button\n        data-testid=\"view-mode-btn\"\n        variant=\"text\"\n        size=\"small\"\n        color=\"inherit\"\n        aria-label={activeOption.label}\n        aria-haspopup=\"menu\"\n        aria-expanded={open}\n        onClick={(event) => setAnchorEl(event.currentTarget)}\n        sx={{ minWidth: 0, height: fieldHeight, px: 1, gap: 1, borderRadius: fieldRadiusPx, color: 'text.secondary' }}\n      >\n        <ActiveIcon sx={{ fontSize: sxRem(16) }} />\n        <ChevronDownIcon sx={{ fontSize: sxRem(14) }} />\n      </Button>\n      <Menu\n        anchorEl={anchorEl}\n        open={open}\n        onClose={() => setAnchorEl(null)}\n        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n        transformOrigin={{ vertical: 'top', horizontal: 'right' }}\n        slotProps={{ paper: { sx: { minWidth: sxRem(180) } } }}\n      >\n        {VIEW_OPTIONS.map((option) => {\n          const OptionIcon = option.icon;\n          const selected = viewMode === option.value;\n          return (\n            <MenuItem\n              key={option.value}\n              data-testid={`view-mode-${option.value}`}\n              onClick={() => {\n                onViewModeChange(option.value);\n                setAnchorEl(null);\n              }}\n              sx={{ gap: 1.5 }}\n            >\n              <ListItemText>{option.label}</ListItemText>\n              <OptionIcon sx={{ fontSize: sxRem(16), color: 'text.secondary' }} />\n              <ListItemIcon sx={{ minWidth: 'auto !important' }}>\n                <CheckIcon sx={{ fontSize: sxRem(16), color: selected ? 'text.primary' : 'transparent' }} />\n              </ListItemIcon>\n            </MenuItem>\n          );\n        })}\n      </Menu>\n    </Box>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/{chunk-IBGX6H4J.js → chunk-VURQZBFH.js}

@@ -9,7 +9,7 @@ import {
   inputRadiusStyles,
   outlinedStyles,
   pulseStyles
-} from "./chunk-E6RYO4QZ.js";
+} from "./chunk-THMT3G3L.js";
 import {
   INPUT_LOADING,
   SIZE_MAP,
@@ -21,11 +21,14 @@ import {
 import {
   fieldControlStyles
 } from "./chunk-CGO452DC.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
 
 // src/components/form/Input/Input.tsx
 import CircularProgress from "@mui/material/CircularProgress/index.js";
 import InputAdornment from "@mui/material/InputAdornment/index.js";
-import { styled } from "@mui/material/styles/index.js";
+import { styled, useTheme } from "@mui/material/styles/index.js";
 import React from "react";
 import { jsx } from "react/jsx-runtime";
 var StyledTextField = styled(TextFieldSlim, {
@@ -50,8 +53,9 @@ var EndAdornment = ({
   loading,
   endAdornment
 }) => {
+  const theme = useTheme();
   if (loading) {
-    return /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(CircularProgress, { size: INPUT_LOADING.spinnerSize }) });
+    return /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(CircularProgress, { size: rem(theme, INPUT_LOADING.spinnerSize) }) });
   }
   if (!endAdornment) return null;
   return /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: endAdornment });
@@ -118,4 +122,4 @@ Input.displayName = "Input";
 export {
   Input
 };
-//# sourceMappingURL=chunk-IBGX6H4J.js.map
+//# sourceMappingURL=chunk-VURQZBFH.js.map

package/dist/chunk-VURQZBFH.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/Input/Input.tsx"],"sourcesContent":["import CircularProgress from '@mui/material/CircularProgress/index.js';\nimport InputAdornment from '@mui/material/InputAdornment/index.js';\nimport { styled, useTheme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { INPUT_LOADING } from './Input.metrics';\nimport { TextFieldSlim } from './text-field-slim';\n\nimport {\n  filledStyles,\n  floatingLabelStyles,\n  glowStyles,\n  inputBaseStyles,\n  inputRadiusStyles,\n  muiVariantFor,\n  outlinedStyles,\n  pulseStyles,\n  SIZE_MAP,\n} from './Input.styles';\nimport type { InputProps } from './Input.types';\nimport { splitTestId } from '../../../platform/test-id';\nimport { fieldControlStyles } from '../../../tokens/field-height';\nimport { rem } from '../../../tokens/relative';\nimport type { SizeValue } from '../../../tokens/vocabulary';\n\n/**\n * `TextFieldSlim`, not `TextField` — see `text-field-slim.tsx`. MUI's own\n * `TextField` imports `Select` unconditionally, and through it `Menu`,\n * `Popover`, `Modal` and seven more component modules, so every screen with one\n * text box shipped a dropdown it can never render. Same composition, same DOM,\n * same prop routing; the select branch is the only thing missing.\n */\nconst StyledTextField = styled(TextFieldSlim, {\n  shouldForwardProp: (prop) =>\n    !['customVariant', 'fieldSize', 'floating', 'glow', 'pulse', 'loading'].includes(prop as string),\n})<{\n  customVariant?: InputProps['variant'];\n  fieldSize: SizeValue;\n  floating?: boolean;\n  glow?: boolean;\n  pulse?: boolean;\n  loading?: boolean;\n}>(({ theme, customVariant, fieldSize, floating, glow, pulse, loading }) => ({\n  position: 'relative',\n  // The theme's field height for this size (outlined family, one line).\n  ...fieldControlStyles(theme, fieldSize),\n  opacity: loading ? INPUT_LOADING.opacity : 1,\n\n  ...(glow ? glowStyles(theme) : {}),\n  ...(pulse ? pulseStyles(theme, fieldSize) : {}),\n  ...(floating ? floatingLabelStyles(theme) : {}),\n\n  '& .MuiInputBase-root': {\n    transition: 'all 0.3s ease',\n    ...inputRadiusStyles(theme, customVariant),\n    ...inputBaseStyles(theme, customVariant),\n  },\n\n  '& .MuiOutlinedInput-root': outlinedStyles(theme),\n  '& .MuiFilledInput-root': filledStyles(theme),\n}));\n\n/** Only one adornment shows at a time: the spinner replaces the caller's while loading. */\nconst EndAdornment: React.FC<{ loading: boolean; endAdornment?: React.ReactNode }> = ({\n  loading,\n  endAdornment,\n}) => {\n  const theme = useTheme();\n  if (loading) {\n    return (\n      <InputAdornment position=\"end\">\n        <CircularProgress size={rem(theme, INPUT_LOADING.spinnerSize)} />\n      </InputAdornment>\n    );\n  }\n\n  if (!endAdornment) return null;\n\n  return <InputAdornment position=\"end\">{endAdornment}</InputAdornment>;\n};\n\n/** While loading the field is inert: no clicks, and disabled to assistive tech. */\nconst interactionProps = (\n  loading: boolean,\n  onClick: InputProps['onClick'],\n  disabled?: boolean,\n) => ({\n  disabled: loading || disabled,\n  onClick: loading ? undefined : onClick,\n});\n\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      variant = 'outlined',\n      size = 'md',\n      label,\n      error,\n      helperText,\n      startAdornment,\n      endAdornment,\n      fullWidth = true,\n      floating = false,\n      glow = false,\n      pulse = false,\n      loading = false,\n      onClick,\n      onFocus,\n      onBlur,\n      'aria-label': ariaLabel,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { testId: dataTestId, rest: props } = splitTestId(rest);\n    return (\n      <StyledTextField\n        ref={ref}\n        variant={muiVariantFor(variant)}\n        customVariant={variant}\n        fieldSize={size}\n        floating={floating}\n        glow={glow}\n        pulse={pulse}\n        loading={loading}\n        label={label}\n        error={error}\n        helperText={helperText}\n        fullWidth={fullWidth}\n        {...interactionProps(loading, onClick, props.disabled)}\n        onFocus={onFocus}\n        onBlur={onBlur}\n        /*\n         * `aria-label` has to ride `inputProps` to reach the `<input>` (FUT-755).\n         * Spread with the rest it lands on the FormControl DIV that the text\n         * field renders as its root, which carries no role — so the field kept\n         * no accessible name, and a source grep saying \"this input is labelled\"\n         * disagreed with the DOM. The reports search box and the block-title\n         * inputs were both named in source and anonymous to a screen reader.\n         */\n        inputProps={{\n          'data-testid': dataTestId,\n          ...(ariaLabel === undefined ? {} : { 'aria-label': ariaLabel }),\n        }}\n        InputProps={{\n          startAdornment: startAdornment && (\n            <InputAdornment position=\"start\">{startAdornment}</InputAdornment>\n          ),\n          endAdornment: <EndAdornment loading={loading} endAdornment={endAdornment} />,\n        }}\n        {...SIZE_MAP[size]}\n        {...props}\n      />\n    );\n  },\n);\n\nInput.displayName = 'Input';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,sBAAsB;AAC7B,OAAO,oBAAoB;AAC3B,SAAS,QAAQ,gBAAgB;AACjC,OAAO,WAAW;AAoEV;AAvCR,IAAM,kBAAkB,OAAO,eAAe;AAAA,EAC5C,mBAAmB,CAAC,SAClB,CAAC,CAAC,iBAAiB,aAAa,YAAY,QAAQ,SAAS,SAAS,EAAE,SAAS,IAAc;AACnG,CAAC,EAOE,CAAC,EAAE,OAAO,eAAe,WAAW,UAAU,MAAM,OAAO,QAAQ,OAAO;AAAA,EAC3E,UAAU;AAAA;AAAA,EAEV,GAAG,mBAAmB,OAAO,SAAS;AAAA,EACtC,SAAS,UAAU,cAAc,UAAU;AAAA,EAE3C,GAAI,OAAO,WAAW,KAAK,IAAI,CAAC;AAAA,EAChC,GAAI,QAAQ,YAAY,OAAO,SAAS,IAAI,CAAC;AAAA,EAC7C,GAAI,WAAW,oBAAoB,KAAK,IAAI,CAAC;AAAA,EAE7C,wBAAwB;AAAA,IACtB,YAAY;AAAA,IACZ,GAAG,kBAAkB,OAAO,aAAa;AAAA,IACzC,GAAG,gBAAgB,OAAO,aAAa;AAAA,EACzC;AAAA,EAEA,4BAA4B,eAAe,KAAK;AAAA,EAChD,0BAA0B,aAAa,KAAK;AAC9C,EAAE;AAGF,IAAM,eAA+E,CAAC;AAAA,EACpF;AAAA,EACA;AACF,MAAM;AACJ,QAAM,QAAQ,SAAS;AACvB,MAAI,SAAS;AACX,WACE,oBAAC,kBAAe,UAAS,OACvB,8BAAC,oBAAiB,MAAM,IAAI,OAAO,cAAc,WAAW,GAAG,GACjE;AAAA,EAEJ;AAEA,MAAI,CAAC,aAAc,QAAO;AAE1B,SAAO,oBAAC,kBAAe,UAAS,OAAO,wBAAa;AACtD;AAGA,IAAM,mBAAmB,CACvB,SACA,SACA,cACI;AAAA,EACJ,UAAU,WAAW;AAAA,EACrB,SAAS,UAAU,SAAY;AACjC;AAEO,IAAM,QAAQ,MAAM;AAAA,EACzB,CACE;AAAA,IACE,UAAU;AAAA,IACV,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,EAAE,QAAQ,YAAY,MAAM,MAAM,IAAI,YAAY,IAAI;AAC5D,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,SAAS,cAAc,OAAO;AAAA,QAC9B,eAAe;AAAA,QACf,WAAW;AAAA,QACX;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACC,GAAG,iBAAiB,SAAS,SAAS,MAAM,QAAQ;AAAA,QACrD;AAAA,QACA;AAAA,QASA,YAAY;AAAA,UACV,eAAe;AAAA,UACf,GAAI,cAAc,SAAY,CAAC,IAAI,EAAE,cAAc,UAAU;AAAA,QAC/D;AAAA,QACA,YAAY;AAAA,UACV,gBAAgB,kBACd,oBAAC,kBAAe,UAAS,SAAS,0BAAe;AAAA,UAEnD,cAAc,oBAAC,gBAAa,SAAkB,cAA4B;AAAA,QAC5E;AAAA,QACC,GAAG,SAAS,IAAI;AAAA,QAChB,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAEA,MAAM,cAAc;","names":[]}

package/dist/{chunk-7BZTZ2WG.js → chunk-VY2BMSHN.js}

@@ -2,7 +2,8 @@ import {
   accentFor
 } from "./chunk-TCAQOUIB.js";
 import {
-  rem
+  rem,
+  sxRem
 } from "./chunk-YKCAJ2TN.js";
 
 // src/components/form/Label/Label.styles.ts
@@ -58,7 +59,7 @@ var SURFACES = {
   }),
   glass: ({ theme, flags }) => ({
     backgroundColor: alpha(theme.palette.background.paper, 0.1),
-    backdropFilter: "blur(10px)",
+    backdropFilter: `blur(${rem(theme, 10)})`,
     border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
     borderRadius: theme.spacing(0.5),
     "&:hover": flags.clickable ? {
@@ -115,7 +116,7 @@ var labelStyles = (theme, flags) => {
     ...textLayout(theme, flags),
     ...sizeStyles(theme, size),
     color,
-    ...flags.glow && { textShadow: `0 0 10px ${alpha(accent, 0.5)}` },
+    ...flags.glow && { textShadow: `0 0 ${rem(theme, 10)} ${alpha(accent, 0.5)}` },
     ...flags.pulse && {
       animation: "pulse 2s infinite",
       "@keyframes pulse": {
@@ -130,10 +131,10 @@ var labelStyles = (theme, flags) => {
 };
 var SR_ONLY_SX = {
   position: "absolute",
-  width: "1px",
-  height: "1px",
+  width: sxRem(1),
+  height: sxRem(1),
   padding: 0,
-  margin: "-1px",
+  margin: sxRem(-1),
   overflow: "hidden",
   clip: "rect(0, 0, 0, 0)",
   whiteSpace: "nowrap",
@@ -146,4 +147,4 @@ export {
   labelStyles,
   SR_ONLY_SX
 };
-//# sourceMappingURL=chunk-7BZTZ2WG.js.map
+//# sourceMappingURL=chunk-VY2BMSHN.js.map

package/dist/chunk-VY2BMSHN.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/Label/Label.styles.ts"],"sourcesContent":["import { alpha } from '@mui/material/styles/index.js';\nimport type { CSSObject, SxProps, Theme } from '@mui/material/styles/index.js';\n\nimport type { LabelProps } from './Label.types';\nimport { accentFor, rem, sxRem } from '../../../tokens/scales';\n\ntype Size = NonNullable<LabelProps['size']>;\ntype Variant = NonNullable<LabelProps['variant']>;\ntype Weight = NonNullable<LabelProps['weight']>;\n\nconst SIZES: Record<Size, (theme: Theme) => CSSObject> = {\n  xs: (theme) => ({ fontSize: rem(theme, 12), lineHeight: 1.2, padding: theme.spacing(0.25, 0.5) }),\n  sm: (theme) => ({ fontSize: rem(theme, 14), lineHeight: 1.3, padding: theme.spacing(0.5, 0.75) }),\n  md: (theme) => ({ fontSize: rem(theme, 16), lineHeight: 1.5, padding: theme.spacing(0.75, 1) }),\n  lg: (theme) => ({ fontSize: rem(theme, 18), lineHeight: 1.6, padding: theme.spacing(1, 1.25) }),\n  xl: (theme) => ({ fontSize: rem(theme, 20), lineHeight: 1.7, padding: theme.spacing(1.25, 1.5) }),\n};\n\nexport const sizeStyles = (theme: Theme, size: Size): CSSObject => (SIZES[size] ?? SIZES.md)(theme);\n\nconst WEIGHTS: Record<Weight, number> = {\n  light: 300,\n  regular: 400,\n  medium: 500,\n  semibold: 600,\n  bold: 700,\n};\n\nconst fontWeight = (weight: Weight) => WEIGHTS[weight] ?? WEIGHTS.regular;\n\nexport interface LabelStyleFlags {\n  variant: Variant;\n  size: Size;\n  color: NonNullable<LabelProps['color']>;\n  weight: Weight;\n  transform: NonNullable<LabelProps['transform']>;\n  align: NonNullable<LabelProps['align']>;\n  error: boolean;\n  disabled: boolean;\n  glow: boolean;\n  pulse: boolean;\n  ripple: boolean;\n  srOnly: boolean;\n  nowrap: boolean;\n  truncate: boolean;\n  clickable: boolean;\n}\n\n/**\n * The text colour, which error and disabled override before the palette is\n * consulted at all. Resolved once and threaded through — the variant styles\n * read it up to four times each.\n */\nexport const textColor = (theme: Theme, flags: LabelStyleFlags): string => {\n  if (flags.error) return theme.palette.error.main;\n  if (flags.disabled) return theme.palette.text.disabled;\n  if (flags.color === 'neutral') return theme.palette.text.primary;\n  return accentFor(theme, flags.color).main;\n};\n\n/** The ripple that expands from the centre on press, for clickable labels. */\nconst rippleStyles = (theme: Theme): CSSObject => ({\n  overflow: 'hidden',\n  '&::after': {\n    content: '\"\"',\n    position: 'absolute',\n    top: '50%',\n    left: '50%',\n    width: 0,\n    height: 0,\n    borderRadius: '50%',\n    backgroundColor: alpha(theme.palette.primary.main, 0.3),\n    transform: 'translate(-50%, -50%)',\n    transition: 'width 0.6s, height 0.6s',\n  },\n  '&:active::after': { width: '300%', height: '300%' },\n});\n\ninterface SurfaceInput {\n  theme: Theme;\n  flags: LabelStyleFlags;\n  /** The resolved text colour, or the primary accent when it resolves to none. */\n  accent: string;\n}\n\n/**\n * Each variant's own additions. Every arm previously re-spread the same base,\n * glow, pulse and ripple objects and re-derived the colour for each use; the\n * shared prefix is applied once by `labelStyles`.\n *\n * The hover rules are only attached when the label is clickable, which is what\n * the `onClick ? {…} : {}` in every arm was saying.\n */\nconst SURFACES: Record<Variant, (input: SurfaceInput) => CSSObject> = {\n  filled: ({ theme, flags, accent }) => ({\n    backgroundColor: alpha(accent, 0.1),\n    borderRadius: theme.spacing(0.5),\n    '&:hover': flags.clickable ? { backgroundColor: alpha(accent, 0.15) } : {},\n  }),\n\n  outlined: ({ theme, flags, accent }) => ({\n    border: `1px solid ${alpha(accent, 0.5)}`,\n    borderRadius: theme.spacing(0.5),\n    '&:hover': flags.clickable\n      ? { borderColor: accent, backgroundColor: alpha(accent, 0.05) }\n      : {},\n  }),\n\n  glass: ({ theme, flags }) => ({\n    backgroundColor: alpha(theme.palette.background.paper, 0.1),\n    backdropFilter: `blur(${rem(theme, 10)})`,\n    border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n    borderRadius: theme.spacing(0.5),\n    '&:hover': flags.clickable\n      ? {\n          backgroundColor: alpha(theme.palette.background.paper, 0.15),\n          borderColor: alpha(theme.palette.primary.main, 0.3),\n        }\n      : {},\n  }),\n\n  gradient: ({ theme, flags }) => {\n    // `neutral` has no accent of its own in the gradient; it borrows primary,\n    // which is what this branch already did before the vocabulary was named.\n    const accent = accentFor(theme, flags.color === 'neutral' ? 'primary' : flags.color);\n    // The gradient paints the glyphs themselves rather than the box behind them.\n    const clip = {\n      WebkitBackgroundClip: 'text',\n      WebkitTextFillColor: 'transparent',\n      backgroundClip: 'text',\n    };\n\n    return {\n      background: `linear-gradient(135deg, ${accent.light}, ${accent.main})`,\n      ...clip,\n      '&:hover': flags.clickable\n        ? {\n            background: `linear-gradient(135deg, ${accent.main}, ${accent.dark})`,\n            ...clip,\n          }\n        : {},\n    };\n  },\n\n  minimal: ({ theme, flags }) => ({\n    padding: 0,\n    '&:hover': flags.clickable ? { color: theme.palette.primary.main } : {},\n  }),\n\n  default: () => ({}),\n};\n\n/** How the text sits: its alignment, weight, casing and overflow behaviour. */\nconst textLayout = (theme: Theme, flags: LabelStyleFlags): CSSObject => {\n  const { srOnly, clickable, align, weight, transform, nowrap, truncate } = flags;\n\n  return {\n    display: srOnly ? 'none' : 'inline-flex',\n    alignItems: 'center',\n    gap: theme.spacing(0.5),\n    transition: theme.transitions.create(['all'], {\n      duration: theme.transitions.duration.standard,\n    }),\n    cursor: clickable ? 'pointer' : 'default',\n    textAlign: align,\n    fontWeight: fontWeight(weight),\n    textTransform: transform,\n    whiteSpace: nowrap ? 'nowrap' : 'normal',\n    overflow: truncate ? 'hidden' : 'visible',\n    textOverflow: truncate ? 'ellipsis' : 'clip',\n    position: 'relative' as const,\n  };\n};\n\nexport const labelStyles = (theme: Theme, flags: LabelStyleFlags): CSSObject => {\n  const { variant, size, clickable } = flags;\n  const color = textColor(theme, flags);\n  const accent = color || theme.palette.primary.main;\n\n  return {\n    ...textLayout(theme, flags),\n    ...sizeStyles(theme, size),\n    color,\n    ...(flags.glow && { textShadow: `0 0 ${rem(theme, 10)} ${alpha(accent, 0.5)}` }),\n    ...(flags.pulse && {\n      animation: 'pulse 2s infinite',\n      '@keyframes pulse': {\n        '0%': { opacity: 1 },\n        '50%': { opacity: 0.6 },\n        '100%': { opacity: 1 },\n      },\n    }),\n    ...(flags.ripple && clickable && rippleStyles(theme)),\n    ...(SURFACES[variant] ?? SURFACES.default)({ theme, flags, accent }),\n  };\n};\n\n/** Visually hidden but still read aloud, for the `srOnly` label. */\nexport const SR_ONLY_SX: SxProps<Theme> = {\n  position: 'absolute',\n  width: sxRem(1),\n  height: sxRem(1),\n  padding: 0,\n  margin: sxRem(-1),\n  overflow: 'hidden',\n  clip: 'rect(0, 0, 0, 0)',\n  whiteSpace: 'nowrap',\n  border: 0,\n};\n"],"mappings":"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","names":[]}

package/dist/{chunk-SX3MEC3Q.js → chunk-VZIB5W5L.js}

@@ -2,7 +2,7 @@ import {
   SwitchControl,
   SwitchHelper,
   SwitchRow
-} from "./chunk-J4NXTSJY.js";
+} from "./chunk-4JFL62K3.js";
 import {
   switchIds
 } from "./chunk-SZS7VZJN.js";
@@ -124,4 +124,4 @@ Switch.displayName = "Switch";
 export {
   Switch
 };
-//# sourceMappingURL=chunk-SX3MEC3Q.js.map
+//# sourceMappingURL=chunk-VZIB5W5L.js.map

package/dist/{chunk-HC5ZSCRG.js → chunk-W5TI46QN.js}

@@ -8,11 +8,16 @@ import {
 import {
   cssLengthToPx
 } from "./chunk-AG66JBNH.js";
+import {
+  FIELD_BORDER_WIDTH
+} from "./chunk-PZBK3F52.js";
 import {
   controlNeutral
 } from "./chunk-FQ6UW7IY.js";
 import {
-  rem
+  rem,
+  remPx,
+  rems
 } from "./chunk-YKCAJ2TN.js";
 
 // src/components/form/ToggleGroup/ToggleGroup.tsx
@@ -22,8 +27,7 @@ import ToggleButtonGroup from "@mui/material/ToggleButtonGroup/index.js";
 import { alpha, useTheme, styled } from "@mui/material/styles/index.js";
 import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-var GLASS_PADDING = 4;
-var GLASS_BORDER = 1;
+var glassPadding = (theme) => rem(theme, 4);
 var getColorFromTheme = (theme, color) => {
   if (color === "neutral") {
     const neutral = controlNeutral(theme);
@@ -45,17 +49,17 @@ var getColorFromTheme = (theme, color) => {
     contrastText: palette.contrastText || theme.palette.getContrastText(palette.main)
   };
 };
+var glassFrameRadius = (theme) => fieldRadius(theme) + remPx(theme, 4) + cssLengthToPx(theme.spacing(0.5), 4) + FIELD_BORDER_WIDTH;
 var StyledToggleGroup = styled(ToggleButtonGroup, {
   shouldForwardProp: (prop) => !["customColor", "customSize", "glass"].includes(prop)
 })(({ theme, glass }) => {
   const radius = fieldRadius(theme);
-  const inset = GLASS_PADDING + cssLengthToPx(theme.spacing(0.5), 4) + GLASS_BORDER;
   return {
     backgroundColor: glass ? alpha(theme.palette.background.paper, 0.1) : "transparent",
-    backdropFilter: glass ? "blur(20px)" : "none",
-    borderRadius: glass ? radius + inset : radius,
-    padding: glass ? GLASS_PADDING : 0,
-    border: glass ? `${GLASS_BORDER}px solid ${alpha(theme.palette.divider, 0.2)}` : "none",
+    backdropFilter: glass ? `blur(${rem(theme, 20)})` : "none",
+    borderRadius: glass ? glassFrameRadius(theme) : radius,
+    padding: glass ? glassPadding(theme) : 0,
+    border: glass ? `${FIELD_BORDER_WIDTH}px solid ${alpha(theme.palette.divider, 0.2)}` : "none",
     "& .MuiToggleButtonGroup-grouped": {
       margin: theme.spacing(0.5),
       border: 0,
@@ -79,11 +83,11 @@ var ToggleGroup = forwardRef(
     const theme = useTheme();
     const colorPalette = getColorFromTheme(theme, color);
     const sizeMap = {
-      xs: { padding: "4px 8px", fontSize: rem(theme, 12) },
-      sm: { padding: "6px 12px", fontSize: rem(theme, 14) },
-      md: { padding: "8px 16px", fontSize: rem(theme, 16) },
-      lg: { padding: "10px 20px", fontSize: rem(theme, 18) },
-      xl: { padding: "12px 24px", fontSize: rem(theme, 20) }
+      xs: { padding: rems(theme, 4, 8), fontSize: rem(theme, 12) },
+      sm: { padding: rems(theme, 6, 12), fontSize: rem(theme, 14) },
+      md: { padding: rems(theme, 8, 16), fontSize: rem(theme, 16) },
+      lg: { padding: rems(theme, 10, 20), fontSize: rem(theme, 18) },
+      xl: { padding: rems(theme, 12, 24), fontSize: rem(theme, 20) }
     };
     return /* @__PURE__ */ jsx(
       StyledToggleGroup,
@@ -136,4 +140,4 @@ ToggleGroup.displayName = "ToggleGroup";
 export {
   ToggleGroup
 };
-//# sourceMappingURL=chunk-HC5ZSCRG.js.map
+//# sourceMappingURL=chunk-W5TI46QN.js.map

package/dist/chunk-W5TI46QN.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/ToggleGroup/ToggleGroup.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport ToggleButton from '@mui/material/ToggleButton/index.js';\nimport ToggleButtonGroup from '@mui/material/ToggleButtonGroup/index.js';\nimport { alpha, useTheme, styled } from '@mui/material/styles/index.js';\nimport type { Theme } from '@mui/material/styles/index.js';\nimport React, { forwardRef } from 'react';\n\nimport type { ToggleGroupProps } from './ToggleGroup.types';\nimport { asFieldSize, FIELD_BORDER_WIDTH, fieldHeight } from '../../../tokens/field-height';\nimport { fieldRadius } from '../../../tokens/field-radius';\nimport { controlNeutral } from '../../../tokens/ink';\nimport { rem, remPx, rems } from '../../../tokens/relative';\nimport { cssLengthToPx } from '../../../tokens/css-units';\n\n/** The glass frame's padding (4px at the design scale); its border is the field hairline. */\nconst glassPadding = (theme: Theme): string => rem(theme, 4);\n\nconst getColorFromTheme = (theme: Theme, color: string) => {\n  if (color === 'neutral') {\n    const neutral = controlNeutral(theme);\n    return { ...neutral, contrastText: theme.palette.getContrastText(neutral.main) };\n  }\n\n  const colorMap = {\n    primary: theme.palette.primary,\n    secondary: theme.palette.secondary,\n    success: theme.palette.success,\n    warning: theme.palette.warning,\n    info: theme.palette.info,\n    danger: theme.palette.error,\n  };\n\n  const palette = colorMap[color as keyof typeof colorMap] || theme.palette.primary;\n\n  // Ensure palette has required properties\n  return {\n    main: palette.main,\n    dark: palette.dark || palette.main,\n    light: palette.light || palette.main,\n    contrastText: palette.contrastText || theme.palette.getContrastText(palette.main),\n  };\n};\n\n/** The glass frame's radius: the field radius plus its padding, the buttons' margin and its border. */\nconst glassFrameRadius = (theme: Theme): number =>\n  fieldRadius(theme) + remPx(theme, 4) + cssLengthToPx(theme.spacing(0.5), 4) + FIELD_BORDER_WIDTH;\n\nconst StyledToggleGroup = styled(ToggleButtonGroup, {\n  shouldForwardProp: (prop) => !['customColor', 'customSize', 'glass'].includes(prop as string),\n})<{\n  customColor?: string;\n  customSize?: string;\n  glass?: boolean;\n}>(({ theme, glass }) => {\n  // Each button is the field, so it takes the field radius. The glass frame\n  // around them is inset by its padding, the buttons' margin and its border,\n  // and rounds by that much more so the two corners stay concentric.\n  const radius = fieldRadius(theme);\n  return {\n    backgroundColor: glass ? alpha(theme.palette.background.paper, 0.1) : 'transparent',\n    backdropFilter: glass ? `blur(${rem(theme, 20)})` : 'none',\n    borderRadius: glass ? glassFrameRadius(theme) : radius,\n    padding: glass ? glassPadding(theme) : 0,\n    border: glass ? `${FIELD_BORDER_WIDTH}px solid ${alpha(theme.palette.divider, 0.2)}` : 'none',\n\n    '& .MuiToggleButtonGroup-grouped': {\n      margin: theme.spacing(0.5),\n      border: 0,\n      borderRadius: `${radius}px !important`,\n    },\n  };\n});\n\nexport const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(\n  (\n    {\n      variant = 'single',\n      color = 'primary',\n      size = 'md',\n      options,\n      glass = false,\n      gradient = false,\n      value,\n      onChange,\n      dataTestId = 'toggle-group',\n      ...props\n    },\n    ref,\n  ) => {\n    const theme = useTheme();\n    const colorPalette = getColorFromTheme(theme, color);\n\n    const sizeMap = {\n      xs: { padding: rems(theme, 4, 8), fontSize: rem(theme, 12) },\n      sm: { padding: rems(theme, 6, 12), fontSize: rem(theme, 14) },\n      md: { padding: rems(theme, 8, 16), fontSize: rem(theme, 16) },\n      lg: { padding: rems(theme, 10, 20), fontSize: rem(theme, 18) },\n      xl: { padding: rems(theme, 12, 24), fontSize: rem(theme, 20) },\n    };\n\n    return (\n      <StyledToggleGroup\n        ref={ref}\n        customColor={color}\n        customSize={size}\n        glass={glass}\n        value={value}\n        onChange={onChange}\n        exclusive={variant === 'exclusive' || variant === 'single'}\n        data-testid={dataTestId}\n        {...props}\n      >\n        {options.map((option) => (\n          <ToggleButton\n            key={option.value}\n            value={option.value}\n            disabled={option.disabled}\n            data-testid={`${dataTestId}-item-${option.value}`}\n            sx={{\n              textTransform: 'none',\n              fontWeight: 500,\n              transition: 'all 0.3s ease',\n              ...sizeMap[size as keyof typeof sizeMap],\n              // The theme's field height for the size; the label centres in it.\n              minHeight: (theme) => fieldHeight(theme, asFieldSize(size)),\n              paddingTop: 0,\n              paddingBottom: 0,\n\n              '&.Mui-selected': {\n                backgroundColor: colorPalette.main,\n                color: colorPalette.contrastText,\n\n                ...(gradient && {\n                  background: `linear-gradient(135deg, ${colorPalette.main}, ${colorPalette.dark})`,\n                }),\n              },\n            }}\n          >\n            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>\n              {option.icon}\n              {option.label}\n            </Box>\n          </ToggleButton>\n        ))}\n      </StyledToggleGroup>\n    );\n  },\n);\n\nToggleGroup.displayName = 'ToggleGroup';\n"],"mappings":"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","names":["theme"]}

package/dist/{chunk-N6CSXHFJ.js → chunk-WN5PNP6F.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-FKUYRQSP.js";
 import {
   cardStyles
-} from "./chunk-LVEG6XQL.js";
+} from "./chunk-76X6JRVI.js";
 import {
   CARD_CONTENT_PADDING_UNITS,
   CARD_HEADER_CHILDREN_PADDING_UNITS,
@@ -191,4 +191,4 @@ export {
   CardActions,
   CardMedia
 };
-//# sourceMappingURL=chunk-N6CSXHFJ.js.map
+//# sourceMappingURL=chunk-WN5PNP6F.js.map

package/dist/{chunk-SE6ERQY5.js → chunk-WVZBYTIK.js}

@@ -1,3 +1,7 @@
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
 // src/components/form/RichTextEditor/RichTextEditorToolbar.tsx
 import Code from "@mui/icons-material/Code";
 import FormatBold from "@mui/icons-material/FormatBold";
@@ -109,7 +113,7 @@ var RichTextEditorToolbar = ({
       variant: "dense",
       "data-testid": "editor-toolbar",
       sx: {
-        minHeight: 48,
+        minHeight: sxRem(48),
         px: 1,
         borderBottom: (theme) => `1px solid ${theme.palette.divider}`,
         backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.8)
@@ -153,4 +157,4 @@ var RichTextEditorToolbar = ({
 export {
   RichTextEditorToolbar
 };
-//# sourceMappingURL=chunk-SE6ERQY5.js.map
+//# sourceMappingURL=chunk-WVZBYTIK.js.map

package/dist/chunk-WVZBYTIK.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/RichTextEditor/RichTextEditorToolbar.tsx"],"sourcesContent":["import Code from '@mui/icons-material/Code';\nimport FormatBold from '@mui/icons-material/FormatBold';\nimport FormatItalic from '@mui/icons-material/FormatItalic';\nimport FormatListBulleted from '@mui/icons-material/FormatListBulleted';\nimport FormatListNumbered from '@mui/icons-material/FormatListNumbered';\nimport FormatQuote from '@mui/icons-material/FormatQuote';\nimport FormatStrikethrough from '@mui/icons-material/FormatStrikethrough';\nimport FormatUnderlined from '@mui/icons-material/FormatUnderlined';\nimport Image from '@mui/icons-material/Image';\nimport Link from '@mui/icons-material/Link';\nimport Box from '@mui/material/Box/index.js';\nimport Divider from '@mui/material/Divider/index.js';\nimport IconButton from '@mui/material/IconButton/index.js';\nimport Toolbar from '@mui/material/Toolbar/index.js';\nimport Tooltip from '@mui/material/Tooltip/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { alpha } from '@mui/material/styles/index.js';\nimport type { FC, ReactElement } from 'react';\nimport React from 'react';\n\nimport type { ToolbarConfig } from './RichTextEditor.types';\n\nimport { sxRem } from '../../../tokens/relative';\n\ntype ResolvedToolbar = Required<Omit<ToolbarConfig, 'customItems'>> &\n  Pick<ToolbarConfig, 'customItems'>;\n\n// The button groups, in render order. A separator is drawn between two groups\n// only when both actually have something switched on.\nconst GROUPS: Array<Array<{ key: keyof ResolvedToolbar; icon: ReactElement; tooltip: string; command: string; commandValue?: string }>> = [\n  [\n    { key: 'bold', icon: <FormatBold />, tooltip: 'Bold', command: 'bold' },\n    { key: 'italic', icon: <FormatItalic />, tooltip: 'Italic', command: 'italic' },\n    { key: 'underline', icon: <FormatUnderlined />, tooltip: 'Underline', command: 'underline' },\n    {\n      key: 'strikethrough',\n      icon: <FormatStrikethrough />,\n      tooltip: 'Strikethrough',\n      command: 'strikethrough',\n    },\n  ],\n  [\n    {\n      key: 'orderedList',\n      icon: <FormatListNumbered />,\n      tooltip: 'Numbered List',\n      command: 'insertOrderedList',\n    },\n    {\n      key: 'unorderedList',\n      icon: <FormatListBulleted />,\n      tooltip: 'Bulleted List',\n      command: 'insertUnorderedList',\n    },\n  ],\n  [\n    { key: 'link', icon: <Link />, tooltip: 'Insert Link', command: 'createLink' },\n    { key: 'image', icon: <Image />, tooltip: 'Insert Image', command: 'insertImage' },\n    {\n      key: 'codeBlock',\n      icon: <Code />,\n      tooltip: 'Code Block',\n      command: 'formatBlock',\n      commandValue: 'pre',\n    },\n    {\n      key: 'quote',\n      icon: <FormatQuote />,\n      tooltip: 'Quote',\n      command: 'formatBlock',\n      commandValue: 'blockquote',\n    },\n  ],\n];\n\n// Link and image need a target before they can run.\nconst PROMPTS: Record<string, { message: string; initial?: string }> = {\n  createLink: { message: 'Enter URL:', initial: 'https://' },\n  insertImage: { message: 'Enter image URL:' },\n};\n\nconst Separator: FC = () => <Divider orientation=\"vertical\" flexItem sx={{ mx: 0.5 }} />;\n\nexport interface RichTextEditorToolbarProps {\n  config: ResolvedToolbar;\n  disabled: boolean;\n  readOnly: boolean;\n  maxLength?: number;\n  characterCount: number;\n  editorRef: React.RefObject<HTMLDivElement | null>;\n  onFormat: (command: string, value?: string) => void;\n}\n\nconst ToolbarGroups: FC<{\n  config: ResolvedToolbar;\n  disabled: boolean;\n  readOnly: boolean;\n  onRun: (command: string, commandValue?: string) => void;\n}> = ({ config, disabled, readOnly, onRun }) => {\n  const groupIsActive = (group: (typeof GROUPS)[number]) => group.some((item) => config[item.key]);\n\n  return (\n    <>\n      {GROUPS.map((group, groupIndex) => (\n        <React.Fragment key={group[0]?.key ?? groupIndex}>\n          {groupIsActive(group) && GROUPS.slice(0, groupIndex).some(groupIsActive) && <Separator />}\n          {group\n            .filter((item) => config[item.key])\n            .map((item) => (\n              <Tooltip key={item.key} title={item.tooltip}>\n                <IconButton\n                  size=\"small\"\n                  onClick={() => onRun(item.command, item.commandValue)}\n                  disabled={disabled || readOnly}\n                  aria-label={item.tooltip}\n                  data-testid={`toolbar-${item.key}`}\n                >\n                  {item.icon}\n                </IconButton>\n              </Tooltip>\n            ))}\n        </React.Fragment>\n      ))}\n    </>\n  );\n};\n\nexport const RichTextEditorToolbar: FC<RichTextEditorToolbarProps> = ({\n  config,\n  disabled,\n  readOnly,\n  maxLength,\n  characterCount,\n  editorRef,\n  onFormat,\n}) => {\n  const run = (command: string, commandValue?: string) => {\n    const prompt = PROMPTS[command];\n    if (!prompt) {\n      onFormat(command, commandValue);\n      return;\n    }\n\n    const answer = window.prompt(prompt.message, prompt.initial);\n    if (answer) onFormat(command, answer);\n  };\n\n  return (\n    <Toolbar\n      variant=\"dense\"\n      data-testid=\"editor-toolbar\"\n      sx={{\n        minHeight: sxRem(48),\n        px: 1,\n        borderBottom: (theme) => `1px solid ${theme.palette.divider}`,\n        backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.8),\n      }}\n    >\n      <ToolbarGroups config={config} disabled={disabled} readOnly={readOnly} onRun={run} />\n\n      {config.customItems && config.customItems.length > 0 && (\n        <>\n          <Separator />\n          {config.customItems.map((item) => (\n            <Tooltip key={item.id} title={item.label}>\n              <IconButton\n                size=\"small\"\n                onClick={() => item.action(editorRef.current)}\n                disabled={item.disabled || disabled || readOnly}\n                aria-label={item.label}\n                data-testid={`toolbar-custom-${item.id}`}\n              >\n                {item.icon}\n              </IconButton>\n            </Tooltip>\n          ))}\n        </>\n      )}\n\n      <Box sx={{ flexGrow: 1 }} />\n\n      {maxLength && (\n        <Typography\n          variant=\"caption\"\n          // Turns red in the last fifth of the allowance.\n          color={characterCount > maxLength * 0.8 ? 'error' : 'text.secondary'}\n          sx={{ mr: 1 }}\n          data-testid=\"editor-counter\"\n        >\n          {characterCount}/{maxLength}\n        </Typography>\n      )}\n    </Toolbar>\n  );\n};\n"],"mappings":"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","names":[]}

package/dist/{chunk-CSSCGM27.js → chunk-X3OWMTLO.js}

@@ -1,7 +1,6 @@
 // src/components/form/CodeEditor/CodeEditor.helpers.ts
 var makeTestId = (dataTestId) => (suffix) => dataTestId ? `${dataTestId}-${suffix}` : `code-editor-${suffix}`;
 var CODE_EDITOR_DEFAULTS = {
-  height: "400px",
   theme: "auto",
   readOnly: false,
   lineNumbers: true,
@@ -22,4 +21,4 @@ export {
   makeTestId,
   resolveCodeEditorProps
 };
-//# sourceMappingURL=chunk-CSSCGM27.js.map
+//# sourceMappingURL=chunk-X3OWMTLO.js.map

package/dist/chunk-X3OWMTLO.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/CodeEditor/CodeEditor.helpers.ts"],"sourcesContent":["import type { CodeEditorProps } from './CodeEditor.types';\n\n// Every element repeated the same conditional test id; this is that ternary once.\nexport const makeTestId =\n  (dataTestId?: string) =>\n  (suffix: string): string =>\n    dataTestId ? `${dataTestId}-${suffix}` : `code-editor-${suffix}`;\n\ntype CodeEditorDefaultedKeys =\n  | 'theme'\n  | 'readOnly'\n  | 'lineNumbers'\n  | 'minimap'\n  | 'fontSize'\n  | 'wordWrap'\n  | 'showToolbar'\n  | 'autoFormat';\n\ntype ResolvedCodeEditorProps = CodeEditorProps &\n  Required<Pick<CodeEditorProps, CodeEditorDefaultedKeys>>;\n\nconst CODE_EDITOR_DEFAULTS: Pick<CodeEditorProps, CodeEditorDefaultedKeys> = {\n  theme: 'auto',\n  readOnly: false,\n  lineNumbers: true,\n  minimap: false,\n  fontSize: 14,\n  wordWrap: false,\n  showToolbar: true,\n  autoFormat: false,\n};\n\n// Strips explicitly-undefined props before the merge, so `prop={undefined}` still\n// falls back to the default exactly as a destructuring default would. Applied as\n// a merge rather than destructuring defaults, which would otherwise put nine\n// branches into the component's own complexity budget.\nexport const resolveCodeEditorProps = (props: CodeEditorProps): ResolvedCodeEditorProps =>\n  ({\n    ...CODE_EDITOR_DEFAULTS,\n    ...(Object.fromEntries(\n      Object.entries(props).filter(([, value]) => value !== undefined),\n    ) as Partial<CodeEditorProps>),\n  }) as ResolvedCodeEditorProps;\n"],"mappings":";AAGO,IAAM,aACX,CAAC,eACD,CAAC,WACC,aAAa,GAAG,UAAU,IAAI,MAAM,KAAK,eAAe,MAAM;AAelE,IAAM,uBAAuE;AAAA,EAC3E,OAAO;AAAA,EACP,UAAU;AAAA,EACV,aAAa;AAAA,EACb,SAAS;AAAA,EACT,UAAU;AAAA,EACV,UAAU;AAAA,EACV,aAAa;AAAA,EACb,YAAY;AACd;AAMO,IAAM,yBAAyB,CAAC,WACpC;AAAA,EACC,GAAG;AAAA,EACH,GAAI,OAAO;AAAA,IACT,OAAO,QAAQ,KAAK,EAAE,OAAO,CAAC,CAAC,EAAE,KAAK,MAAM,UAAU,MAAS;AAAA,EACjE;AACF;","names":[]}