@12-apps/ui 6.36.0 → 6.38.0

package/dist/{chunk-E7MSDXED.js → chunk-43H66TVT.js}

@@ -2,6 +2,7 @@ import {
   withDefaults
 } from "./chunk-HPK33ACY.js";
 import {
+  rem,
   sxRem
 } from "./chunk-YKCAJ2TN.js";
 
@@ -13,13 +14,19 @@ var BAR_MIN_HEIGHT = { regular: 64, dense: 52 };
 var HEADER_DEFAULTS = {
   position: "sticky",
   offsetTop: 0,
-  maxWidth: 1200,
   divider: true,
   elevateOnScroll: false,
   dense: false,
   disableSpacer: false,
   dataTestId: "app-header"
 };
+function contentMaxWidth(maxWidth) {
+  if (typeof maxWidth === "string") return maxWidth;
+  return (theme) => {
+    const value = maxWidth ?? theme.breakpoints.values.lg;
+    return value <= 1 && value !== 0 ? `${value * 100}%` : rem(theme, value);
+  };
+}
 function useScrolled(enabled) {
   const [scrolled, setScrolled] = React.useState(false);
   React.useEffect(() => {
@@ -54,7 +61,7 @@ function surfaceSx({
 }) {
   return {
     position,
-    ...position === "static" ? {} : { top: offsetTop, zIndex: "appBar" },
+    ...position === "static" ? {} : { top: typeof offsetTop === "number" ? sxRem(offsetTop) : offsetTop, zIndex: "appBar" },
     ...position === "fixed" ? { left: 0, right: 0 } : {},
     backgroundColor: "background.paper",
     borderBottom: divider ? 1 : 0,
@@ -135,7 +142,7 @@ var AppHeader = (props) => {
         className,
         "data-testid": dataTestId,
         sx: surfaceSx({ position, offsetTop, divider, scrolled }),
-        children: /* @__PURE__ */ jsxs(Box, { sx: { maxWidth, mx: "auto", px: { xs: 2, md: 3 } }, children: [
+        children: /* @__PURE__ */ jsxs(Box, { sx: { maxWidth: contentMaxWidth(maxWidth), mx: "auto", px: { xs: 2, md: 3 } }, children: [
           /* @__PURE__ */ jsxs(
             Box,
             {
@@ -143,7 +150,7 @@ var AppHeader = (props) => {
                 display: "flex",
                 alignItems: "center",
                 gap: { xs: 1, md: 2 },
-                minHeight: dense ? BAR_MIN_HEIGHT.dense : BAR_MIN_HEIGHT.regular,
+                minHeight: sxRem(dense ? BAR_MIN_HEIGHT.dense : BAR_MIN_HEIGHT.regular),
                 py: 1
               },
               children: [
@@ -167,4 +174,4 @@ export {
   AppHeader,
   AppHeader_default
 };
-//# sourceMappingURL=chunk-E7MSDXED.js.map
+//# sourceMappingURL=chunk-43H66TVT.js.map

package/dist/chunk-43H66TVT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/AppHeader/AppHeader.tsx"],"sourcesContent":["'use client';\n\nimport Box from '@mui/material/Box/index.js';\nimport type { Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { rem, sxRem } from '../../../tokens/relative';\nimport { withDefaults } from '../../../utils/withDefaults';\n\nimport type { AppHeaderProps } from './AppHeader.types';\n\n/** Bar height, before the optional `below` row. */\nconst BAR_MIN_HEIGHT = { regular: 64, dense: 52 } as const;\n\n/** The props {@link HEADER_DEFAULTS} guarantees a value for. */\ntype Defaulted =\n  | 'position'\n  | 'offsetTop'\n  | 'divider'\n  | 'elevateOnScroll'\n  | 'dense'\n  | 'disableSpacer'\n  | 'dataTestId';\n\n/** `AppHeaderProps` as the body sees them: nothing defaulted is still optional. */\ntype ResolvedHeaderProps = AppHeaderProps & Required<Pick<AppHeaderProps, Defaulted>>;\n\nconst HEADER_DEFAULTS: Pick<ResolvedHeaderProps, Defaulted> = {\n  position: 'sticky',\n  offsetTop: 0,\n  divider: true,\n  elevateOnScroll: false,\n  dense: false,\n  disableSpacer: false,\n  dataTestId: 'app-header',\n};\n\n/**\n * The content's cap. A number is design px — or, at `≤ 1`, the fraction `sx`\n * reads it as — and no value at all is the `lg` breakpoint (1200 at MUI's\n * defaults), the width the bar has always stopped at.\n */\nfunction contentMaxWidth(maxWidth: number | string | undefined): string | ((theme: Theme) => string) {\n  if (typeof maxWidth === 'string') return maxWidth;\n  return (theme) => {\n    const value = maxWidth ?? theme.breakpoints.values.lg;\n    return value <= 1 && value !== 0 ? `${value * 100}%` : rem(theme, value);\n  };\n}\n\n/**\n * Watch the document scroll so a lifted bar can cast a shadow only once there\n * is something under it. Inert (and never attaches a listener) when off.\n */\nfunction useScrolled(enabled: boolean): boolean {\n  const [scrolled, setScrolled] = React.useState(false);\n  React.useEffect(() => {\n    if (!enabled) return undefined;\n    const onScroll = (): void => setScrolled(window.scrollY > 0);\n    onScroll();\n    window.addEventListener('scroll', onScroll, { passive: true });\n    return () => window.removeEventListener('scroll', onScroll);\n  }, [enabled]);\n  return enabled && scrolled;\n}\n\n/**\n * The bar's own height, republished whenever it changes.\n *\n * A `fixed` bar is out of flow, so something has to reserve its space — and a\n * constant cannot, because this bar's height is whatever the caller's slots add\n * up to. A search field in `below`, a status line, a wrapped title: each moves\n * it, and a hard-coded spacer would leave the page's first element under the\n * bar or floating below a gap.\n */\nfunction useMeasuredHeight(enabled: boolean): [React.RefObject<HTMLElement | null>, number] {\n  const ref = React.useRef<HTMLElement | null>(null);\n  const [height, setHeight] = React.useState(0);\n  React.useEffect(() => {\n    const node = ref.current;\n    if (!enabled || !node) return undefined;\n    const measure = (): void => setHeight(node.getBoundingClientRect().height);\n    measure();\n    // Measured once unconditionally, observed only where the API exists. jsdom\n    // has no ResizeObserver, so constructing it unguarded takes down every\n    // consumer's test that happens to render a fixed bar — a crash in THEIR\n    // suite, thrown from a component they only laid out.\n    if (typeof ResizeObserver === 'undefined') return undefined;\n    const observer = new ResizeObserver(measure);\n    observer.observe(node);\n    return () => observer.disconnect();\n  }, [enabled]);\n  return [ref, height];\n}\n\n/**\n * The bar's own surface. Lifted out of the component both to keep it inside the\n * complexity bar and because the positioning rules are the fiddly part: a\n * `static` bar must claim neither a stacking context nor an offset, and only a\n * `fixed` one needs pinning to the viewport's edges.\n */\nfunction surfaceSx({\n  position,\n  offsetTop,\n  divider,\n  scrolled,\n}: Required<Pick<AppHeaderProps, 'position' | 'offsetTop' | 'divider'>> & {\n  scrolled: boolean;\n}): Record<string, unknown> {\n  return {\n    position,\n    ...(position === 'static' ? {} : { top: typeof offsetTop === 'number' ? sxRem(offsetTop) : offsetTop, zIndex: 'appBar' }),\n    ...(position === 'fixed' ? { left: 0, right: 0 } : {}),\n    backgroundColor: 'background.paper',\n    borderBottom: divider ? 1 : 0,\n    borderColor: 'divider',\n    boxShadow: scrolled ? 2 : 0,\n    transition: 'box-shadow 150ms ease',\n  };\n}\n\n/** The trailing column: the muted note, and the actions under it. */\nconst HeaderTrailing: React.FC<Pick<AppHeaderProps, 'meta' | 'actions'>> = ({ meta, actions }) => {\n  if (!meta && !actions) return null;\n  return (\n    <Box\n      sx={{\n        flex: '0 0 auto',\n        display: 'flex',\n        flexDirection: 'column',\n        alignItems: 'flex-end',\n        gap: 0.5,\n      }}\n    >\n      {meta && (\n        <Box\n          data-testid=\"app-header-meta\"\n          sx={{\n            fontSize: sxRem(11),\n            fontWeight: 700,\n            letterSpacing: '0.08em',\n            textTransform: 'uppercase',\n            color: 'text.disabled',\n            lineHeight: 1,\n          }}\n        >\n          {meta}\n        </Box>\n      )}\n      {actions && (\n        <Box\n          component=\"nav\"\n          data-testid=\"app-header-actions\"\n          sx={{ display: 'flex', alignItems: 'center', gap: 1 }}\n        >\n          {actions}\n        </Box>\n      )}\n    </Box>\n  );\n};\n\n/**\n * The application bar: a row of slots on one surface, plus an optional second\n * row that belongs to it.\n *\n * It knows nothing about routers, sessions, carts or stores — every slot is a\n * `ReactNode` and every behaviour is a callback, which is what lets one bar\n * serve a storefront, a back office and a platform console without any of them\n * leaking into the others. Compose it with {@link AppHeaderIdentity},\n * {@link AppHeaderStatus} and {@link AppHeaderDetails}, or put your own nodes in\n * the slots.\n *\n * The SURFACE always spans the viewport while the CONTENT stops at `maxWidth`\n * and centres, so the same bar reads as a phone header and as a desktop one\n * without a second component or a breakpoint at the call site.\n */\nexport const AppHeader: React.FC<AppHeaderProps> = (props) => {\n  // A table of defaults rather than one per destructured prop: each `= default`\n  // is a branch, and nine of them put this component over the complexity bar\n  // before it rendered anything.\n  const {\n    leading,\n    children,\n    actions,\n    meta,\n    below,\n    position,\n    offsetTop,\n    maxWidth,\n    divider,\n    elevateOnScroll,\n    dense,\n    disableSpacer,\n    className,\n    dataTestId,\n    // True by construction — `withDefaults` fills exactly these keys — but not\n    // something TS can follow through a `Partial<T>` table.\n  } = withDefaults(props, HEADER_DEFAULTS) as ResolvedHeaderProps;\n\n  const scrolled = useScrolled(elevateOnScroll);\n  const needsSpacer = position === 'fixed' && !disableSpacer;\n  const [ref, height] = useMeasuredHeight(needsSpacer);\n\n  return (\n    <>\n      <Box\n        ref={ref}\n        component=\"header\"\n        className={className}\n        data-testid={dataTestId}\n        sx={surfaceSx({ position, offsetTop, divider, scrolled })}\n      >\n        <Box sx={{ maxWidth: contentMaxWidth(maxWidth), mx: 'auto', px: { xs: 2, md: 3 } }}>\n          <Box\n            sx={{\n              display: 'flex',\n              alignItems: 'center',\n              gap: { xs: 1, md: 2 },\n              minHeight: sxRem(dense ? BAR_MIN_HEIGHT.dense : BAR_MIN_HEIGHT.regular),\n              py: 1,\n            }}\n          >\n            {leading}\n            {/* The identity takes the slack and is the only part allowed to\n                shrink — the actions are targets and the meta note is already\n                the smallest thing in the bar. */}\n            <Box sx={{ flex: '1 1 auto', minWidth: 0 }}>{children}</Box>\n            <HeaderTrailing meta={meta} actions={actions} />\n          </Box>\n          {below && (\n            <Box data-testid={`${dataTestId}-below`} sx={{ pb: 1.5 }}>\n              {below}\n            </Box>\n          )}\n        </Box>\n      </Box>\n      {needsSpacer && <Box aria-hidden data-testid={`${dataTestId}-spacer`} sx={{ height }} />}\n    </>\n  );\n};\n\nAppHeader.displayName = 'AppHeader';\n\nexport default AppHeader;\n"],"mappings":"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","names":[]}

package/dist/{chunk-IL7JZKXY.js → chunk-442FSG7G.js}

@@ -2,11 +2,11 @@ import {
   ModalPanelContents,
   modalAriaIds,
   resolveModalContent
-} from "./chunk-RWTFZ7J5.js";
+} from "./chunk-L4G5BZFF.js";
 import {
   STYLE_ONLY_PROPS,
   dialogRootStyles
-} from "./chunk-2NLYGZP3.js";
+} from "./chunk-77JL5XVD.js";
 import {
   usePanelChrome
 } from "./chunk-G3QKH23Y.js";
@@ -156,4 +156,4 @@ var StackedModal = (props) => {
 export {
   StackedModal
 };
-//# sourceMappingURL=chunk-IL7JZKXY.js.map
+//# sourceMappingURL=chunk-442FSG7G.js.map

package/dist/{chunk-GVLZZCSX.js → chunk-4B5XUQQS.js}

@@ -1,9 +1,9 @@
 import {
   AddressFallbackField
-} from "./chunk-YESTO24O.js";
+} from "./chunk-TXEN3QJ4.js";
 import {
   AddressAutocompleteField
-} from "./chunk-7ZG7T2YN.js";
+} from "./chunk-7GHYCQCJ.js";
 import {
   useAddressAutocomplete
 } from "./chunk-WC3W36AM.js";
@@ -35,4 +35,4 @@ export {
   AddressAutocomplete,
   AddressAutocomplete_default
 };
-//# sourceMappingURL=chunk-GVLZZCSX.js.map
+//# sourceMappingURL=chunk-4B5XUQQS.js.map

package/dist/{chunk-DYVAOEW4.js → chunk-4D4LLSQC.js}

@@ -1,7 +1,8 @@
 import {
   SonnerToast
-} from "./chunk-EFHIMCJN.js";
+} from "./chunk-6P2OFMBX.js";
 import {
+  rem,
   sxRem
 } from "./chunk-YKCAJ2TN.js";
 
@@ -108,13 +109,13 @@ var SonnerToaster = ({ toasts, onDismiss }) => {
     {
       sx: {
         position: "fixed",
-        top: 16,
-        right: 16,
+        top: sxRem(16),
+        right: sxRem(16),
         zIndex: 9999,
         display: "flex",
         flexDirection: "column",
         pointerEvents: "none",
-        maxHeight: "calc(100vh - 32px)",
+        maxHeight: (theme) => `calc(100vh - ${rem(theme, 32)})`,
         overflowY: "auto",
         overflowX: "hidden"
       },
@@ -227,4 +228,4 @@ export {
   toast,
   Toaster
 };
-//# sourceMappingURL=chunk-DYVAOEW4.js.map
+//# sourceMappingURL=chunk-4D4LLSQC.js.map

package/dist/chunk-4D4LLSQC.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/feedback/Sonner/Sonner.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport Portal from '@mui/material/Portal/index.js';\nimport React, { createContext, useCallback, useContext, useRef,useState, useMemo } from 'react';\n\nimport { rem, sxRem } from '../../../tokens/relative';\n\nimport type { SonnerContextType, SonnerItem,SonnerProps } from './Sonner.types';\n\nconst SonnerContext = createContext<SonnerContextType | null>(null);\n\nconst DEFAULT_DURATION_MS = 4000;\n\nconst buildToastItem = (\n  toast: Omit<SonnerProps, 'id'>,\n  id: string,\n  type?: SonnerProps['type'],\n): SonnerItem => ({\n  ...toast,\n  id,\n  type: type || toast.type || 'default',\n  createdAt: Date.now(),\n  visible: true });\n\n// Persistent toasts and `duration: 0` stay until dismissed explicitly.\nconst scheduleAutoDismiss = (\n  toast: Omit<SonnerProps, 'id'>,\n  id: string,\n  dismiss: (id?: string) => void,\n) => {\n  if (toast.persistent || toast.duration === 0) return;\n\n  window.setTimeout(() => dismiss(id), toast.duration ?? DEFAULT_DURATION_MS);\n};\n\nconst EXIT_TRANSITION_MS = 300;\n\ntype SonnerPromiseOptions<T> = {\n  loading: React.ReactNode;\n  success: React.ReactNode | ((data: T) => React.ReactNode);\n  error: React.ReactNode | ((error: Error) => React.ReactNode);\n};\n\nconst resolveMessage = <T,>(\n  message: React.ReactNode | ((value: T) => React.ReactNode),\n  value: T,\n): React.ReactNode => (typeof message === 'function' ? message(value) : message);\n\n// Shows a pinned loading toast for the life of a promise, then swaps it for a\n// success or error one. Takes the shortcuts it needs rather than reaching for\n// context, so it is testable on its own.\nconst trackPromiseWithToasts = async <T,>(\n  promiseToResolve: Promise<T>,\n  options: SonnerPromiseOptions<T>,\n  toasts: {\n    loading: (message: React.ReactNode) => string;\n    success: (message: React.ReactNode) => string;\n    error: (message: React.ReactNode) => string;\n    dismiss: (id?: string) => void;\n  },\n): Promise<T> => {\n  const toastId = toasts.loading(options.loading);\n\n  try {\n    const data = await promiseToResolve;\n    toasts.dismiss(toastId);\n    toasts.success(resolveMessage(options.success, data));\n    return data;\n  } catch (err) {\n    toasts.dismiss(toastId);\n    toasts.error(resolveMessage(options.error, err instanceof Error ? err : new Error(String(err))));\n    throw err;\n  }\n};\n\nexport const SonnerProvider: React.FC<{\n  children: React.ReactNode;\n  /**\n   * The dismiss button's accessible name, for every toast this provider\n   * raises. REQUIRED and mounted ONCE — the shortcut helpers\n   * (`sonner.success(…)`) take a message and nothing else by design, so the\n   * word cannot be a per-call argument without changing what they are for.\n   */\n  dismissLabel: string;\n}> = ({ children, dismissLabel }) => {\n  const [toasts, setToasts] = useState<SonnerItem[]>([]);\n  const toastCounter = useRef(0);\n\n  // Hide first, then drop after the exit transition. Passing no id targets every\n  // toast; the two branches only differ in which toasts they match, so that is\n  // the only thing that varies here.\n  const dismiss = useCallback((id?: string) => {\n    const matches = (toast: SonnerItem) => id === undefined || toast.id === id;\n\n    setToasts((prev) =>\n      prev.map((toast) => (matches(toast) ? { ...toast, visible: false } : toast)),\n    );\n\n    window.setTimeout(() => {\n      setToasts((prev) => prev.filter((toast) => !matches(toast)));\n    }, EXIT_TRANSITION_MS);\n  }, []);\n\n  const addToast = useCallback(\n    (toast: Omit<SonnerProps, 'id'>, type?: SonnerProps['type']): string => {\n      const id = `sonner-${++toastCounter.current}`;\n      setToasts((prev) => [...prev, buildToastItem(toast, id, type)]);\n      scheduleAutoDismiss(toast, id, dismiss);\n      return id;\n    },\n    [dismiss],\n  );\n\n  // The six shortcuts differ only by the type they tag and, for loading, by\n  // pinning persistent. Built from one factory rather than six near-identical\n  // useCallback blocks.\n  const makeShortcut = useCallback(\n    (type: SonnerProps['type'], extra?: Partial<SonnerProps>) =>\n      (message: React.ReactNode, options?: Partial<SonnerProps>) =>\n        addToast({ dismissLabel, ...options, ...extra, title: message }, type),\n    [addToast],\n  );\n\n  const toast = useMemo(() => makeShortcut('default'), [makeShortcut]);\n  const success = useMemo(() => makeShortcut('success'), [makeShortcut]);\n  const error = useMemo(() => makeShortcut('error'), [makeShortcut]);\n  const warning = useMemo(() => makeShortcut('warning'), [makeShortcut]);\n  const info = useMemo(() => makeShortcut('info'), [makeShortcut]);\n  const loading = useMemo(\n    () => makeShortcut('loading', { persistent: true }),\n    [makeShortcut],\n  );\n\n  const promise = useCallback(\n    <T,>(promiseToResolve: Promise<T>, options: SonnerPromiseOptions<T>): Promise<T> =>\n      trackPromiseWithToasts(promiseToResolve, options, { loading, success, error, dismiss }),\n    [loading, success, error, dismiss],\n  );\n\n  const contextValue: SonnerContextType = {\n    toast,\n    success,\n    error,\n    warning,\n    info,\n    loading,\n    dismiss,\n    promise };\n\n  // Register this context globally for imperative API\n  useRegisterGlobalToast(contextValue);\n\n  return (\n    <SonnerContext.Provider value={contextValue}>\n      {children}\n      <SonnerToaster toasts={toasts} onDismiss={dismiss} />\n    </SonnerContext.Provider>\n  );\n};\n\nexport const useSonner = (): SonnerContextType => {\n  const context = useContext(SonnerContext);\n  if (!context) {\n    throw new Error('useSonner must be used within a SonnerProvider');\n  }\n  return context;\n};\n\n// A caller-supplied icon always wins; otherwise the type picks one.\nimport { SonnerToast } from './SonnerToast';\n\nconst SonnerToaster: React.FC<{\n  toasts: SonnerItem[];\n  onDismiss: (id: string) => void;\n}> = ({ toasts, onDismiss }) => {\n  // Limit visible toasts to prevent overflow\n  const MAX_VISIBLE_TOASTS = 5;\n  const visibleToasts = toasts.slice(-MAX_VISIBLE_TOASTS);\n  const hiddenCount = Math.max(0, toasts.length - MAX_VISIBLE_TOASTS);\n\n  return (\n    <Portal>\n      <Box\n        sx={{\n          position: 'fixed',\n          top: sxRem(16),\n          right: sxRem(16),\n          zIndex: 9999,\n          display: 'flex',\n          flexDirection: 'column',\n          pointerEvents: 'none',\n          maxHeight: (theme) => `calc(100vh - ${rem(theme, 32)})`,\n          overflowY: 'auto',\n          overflowX: 'hidden' }}\n      >\n        {hiddenCount > 0 && (\n          <Box\n            sx={{\n              p: 1,\n              mb: 0.5,\n              textAlign: 'center',\n              fontSize: sxRem(12),\n              color: 'text.secondary',\n              pointerEvents: 'none' }}\n          >\n            +{hiddenCount} more\n          </Box>\n        )}\n        {visibleToasts.map((toast) => (\n          <Box key={toast.id} sx={{ pointerEvents: 'auto' }}>\n            <SonnerToast {...toast} onDismiss={onDismiss} />\n          </Box>\n        ))}\n      </Box>\n    </Portal>\n  );\n};\n\n// Global toast instance for imperative API\nlet globalToastContext: SonnerContextType | null = null;\n\n// Hook to register the global context (used internally by SonnerProvider)\nexport const useRegisterGlobalToast = (context: SonnerContextType) => {\n  React.useEffect(() => {\n    globalToastContext = context;\n    return () => {\n      globalToastContext = null;\n    };\n  }, [context]);\n};\n\n// Create a production-ready toast instance for imperative usage\nconst createToastInstance = (): SonnerContextType => {\n  const warnNoProvider = () => {\n    // Use a more React-appropriate warning mechanism\n    if (typeof window !== 'undefined' && window.console && window.console.warn) {\n      window.console.warn('Sonner: No SonnerProvider found. Please wrap your app with SonnerProvider.');\n    }\n  };\n\n  const methods: SonnerContextType = {\n    toast: (message: React.ReactNode, options?: Partial<SonnerProps>) => {\n      if (!globalToastContext) {\n        warnNoProvider();\n        return 'no-provider';\n      }\n      return globalToastContext.toast(message, options);\n    },\n    success: (message: React.ReactNode, options?: Partial<SonnerProps>) => {\n      if (!globalToastContext) {\n        warnNoProvider();\n        return 'no-provider';\n      }\n      return globalToastContext.success(message, options);\n    },\n    error: (message: React.ReactNode, options?: Partial<SonnerProps>) => {\n      if (!globalToastContext) {\n        warnNoProvider();\n        return 'no-provider';\n      }\n      return globalToastContext.error(message, options);\n    },\n    warning: (message: React.ReactNode, options?: Partial<SonnerProps>) => {\n      if (!globalToastContext) {\n        warnNoProvider();\n        return 'no-provider';\n      }\n      return globalToastContext.warning(message, options);\n    },\n    info: (message: React.ReactNode, options?: Partial<SonnerProps>) => {\n      if (!globalToastContext) {\n        warnNoProvider();\n        return 'no-provider';\n      }\n      return globalToastContext.info(message, options);\n    },\n    loading: (message: React.ReactNode, options?: Partial<SonnerProps>) => {\n      if (!globalToastContext) {\n        warnNoProvider();\n        return 'no-provider';\n      }\n      return globalToastContext.loading(message, options);\n    },\n    dismiss: (id?: string) => {\n      if (!globalToastContext) {\n        warnNoProvider();\n        return;\n      }\n      globalToastContext.dismiss(id);\n    },\n    promise: async <T,>(\n      promiseToResolve: Promise<T>,\n      options: {\n        loading: React.ReactNode;\n        success: React.ReactNode | ((data: T) => React.ReactNode);\n        error: React.ReactNode | ((error: Error) => React.ReactNode);\n      },\n    ): Promise<T> => {\n      if (!globalToastContext) {\n        warnNoProvider();\n        throw new Error('No SonnerProvider found');\n      }\n      return globalToastContext.promise(promiseToResolve, options);\n    } };\n\n  return methods;\n};\n\n// Export toast instance for imperative API usage\nexport const toast = createToastInstance();\n\n// Export Toaster as alias for SonnerProvider for stories compatibility\nexport const Toaster: React.FC<{\n  children?: React.ReactNode;\n  position?: string;\n  theme?: string;\n  expand?: boolean;\n  richColors?: boolean;\n  closeButton?: boolean;\n  dismissLabel: string;\n}> = ({ children, dismissLabel }) => (\n  <SonnerProvider dismissLabel={dismissLabel}>{children}</SonnerProvider>\n);\n"],"mappings":"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","names":["toast"]}

package/dist/{chunk-NEGCJNGJ.js → chunk-4G47KBTP.js}

@@ -47,19 +47,19 @@ var StyledBlockquote = styled("blockquote", {
     return {
       ...baseStyles,
       padding: theme.spacing(3),
-      border: `2px solid ${alpha(colorPalette.main, 0.2)}`,
+      border: `${rem(theme, 2)} solid ${alpha(colorPalette.main, 0.2)}`,
       borderRadius: theme.shape.borderRadius * 2,
       backgroundColor: alpha(colorPalette.main, 0.03),
       "&::before": {
         content: '""',
         position: "absolute",
-        top: -1,
-        left: -1,
-        right: -1,
-        bottom: -1,
+        top: rem(theme, -1),
+        left: rem(theme, -1),
+        right: rem(theme, -1),
+        bottom: rem(theme, -1),
         background: `linear-gradient(135deg, ${colorPalette.main}, ${colorPalette.light})`,
         borderRadius: theme.shape.borderRadius * 2,
-        padding: "2px",
+        padding: rem(theme, 2),
         WebkitMask: `linear-gradient(${absoluteInk(theme).white} 0 0) content-box, linear-gradient(${absoluteInk(theme).white} 0 0)`,
         WebkitMaskComposite: "exclude",
         mask: `linear-gradient(${absoluteInk(theme).white} 0 0) content-box, linear-gradient(${absoluteInk(theme).white} 0 0)`,
@@ -72,7 +72,7 @@ var StyledBlockquote = styled("blockquote", {
       ...baseStyles,
       padding: theme.spacing(2, 3),
       backgroundColor: theme.palette.mode === "dark" ? alpha(theme.palette.background.paper, 0.8) : alpha(neutralTones(theme).canvas, 0.95),
-      backdropFilter: theme.palette.mode === "dark" ? "blur(10px)" : "none",
+      backdropFilter: theme.palette.mode === "dark" ? `blur(${rem(theme, 10)})` : "none",
       border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
       borderRadius: theme.shape.borderRadius * 2,
       boxShadow: theme.palette.mode === "dark" ? theme.shadows[4] : "none",
@@ -82,7 +82,7 @@ var StyledBlockquote = styled("blockquote", {
   return {
     ...baseStyles,
     paddingLeft: theme.spacing(3),
-    borderLeft: `4px solid ${colorPalette.main}`,
+    borderLeft: `${rem(theme, 4)} solid ${colorPalette.main}`,
     backgroundColor: alpha(colorPalette.main, 0.05),
     padding: theme.spacing(2, 3),
     borderRadius: theme.shape.borderRadius
@@ -150,4 +150,4 @@ Blockquote.displayName = "Blockquote";
 export {
   Blockquote
 };
-//# sourceMappingURL=chunk-NEGCJNGJ.js.map
+//# sourceMappingURL=chunk-4G47KBTP.js.map

package/dist/chunk-4G47KBTP.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/typography/Blockquote/Blockquote.tsx"],"sourcesContent":["import FormatQuote from '@mui/icons-material/FormatQuote';\nimport type { Theme } from '@mui/material/styles/index.js';\nimport Box from '@mui/material/Box/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { alpha, styled } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport type { BlockquoteProps } from './Blockquote.types';\nimport { absoluteInk, controlNeutral, neutralTones } from '../../../tokens/ink';\nimport { rem } from '../../../tokens/relative';\n\nconst getColorFromTheme = (theme: Theme, color: string) => {\n  if (color === 'neutral') {\n    const { main, light, dark } = controlNeutral(theme);\n    return { main, light, dark };\n  }\n\n  const colorMap: Record<string, typeof theme.palette.primary> = {\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  return colorMap[color] || theme.palette.primary;\n};\n\nconst StyledBlockquote = styled('blockquote', {\n  shouldForwardProp: (prop) => !['customVariant', 'customColor'].includes(prop as string),\n})<{\n  customVariant?: string;\n  customColor?: string;\n}>(({ theme, customVariant = 'default', customColor = 'neutral' }) => {\n  const colorPalette = getColorFromTheme(theme, customColor);\n\n  const baseStyles = {\n    margin: '1.5em 0',\n    padding: 0,\n    position: 'relative' as const,\n    fontFamily: theme.typography.body1.fontFamily,\n    fontSize: rem(theme, 18),\n    lineHeight: 1.6,\n    fontStyle: 'italic',\n    color: theme.palette.text.primary,\n  };\n\n  // Return styles based on variant\n  if (customVariant === 'bordered') {\n    return {\n      ...baseStyles,\n      padding: theme.spacing(3),\n      border: `${rem(theme, 2)} solid ${alpha(colorPalette.main, 0.2)}`,\n      borderRadius: theme.shape.borderRadius * 2,\n      backgroundColor: alpha(colorPalette.main, 0.03),\n      '&::before': {\n        content: '\"\"',\n        position: 'absolute',\n        top: rem(theme, -1),\n        left: rem(theme, -1),\n        right: rem(theme, -1),\n        bottom: rem(theme, -1),\n        background: `linear-gradient(135deg, ${colorPalette.main}, ${colorPalette.light})`,\n        borderRadius: theme.shape.borderRadius * 2,\n        padding: rem(theme, 2),\n        WebkitMask: `linear-gradient(${absoluteInk(theme).white} 0 0) content-box, linear-gradient(${absoluteInk(theme).white} 0 0)`,\n        WebkitMaskComposite: 'exclude',\n        mask: `linear-gradient(${absoluteInk(theme).white} 0 0) content-box, linear-gradient(${absoluteInk(theme).white} 0 0)`,\n        maskComposite: 'exclude',\n      },\n    };\n  }\n\n  if (customVariant === 'citation') {\n    return {\n      ...baseStyles,\n      padding: theme.spacing(2, 3),\n      backgroundColor:\n        theme.palette.mode === 'dark'\n          ? alpha(theme.palette.background.paper, 0.8)\n          : alpha(neutralTones(theme).canvas, 0.95),\n      backdropFilter: theme.palette.mode === 'dark' ? `blur(${rem(theme, 10)})` : 'none',\n      border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n      borderRadius: theme.shape.borderRadius * 2,\n      boxShadow: theme.palette.mode === 'dark' ? theme.shadows[4] : 'none',\n      textAlign: 'center' as const,\n    };\n  }\n\n  // Default variant\n  return {\n    ...baseStyles,\n    paddingLeft: theme.spacing(3),\n    borderLeft: `${rem(theme, 4)} solid ${colorPalette.main}`,\n    backgroundColor: alpha(colorPalette.main, 0.05),\n    padding: theme.spacing(2, 3),\n    borderRadius: theme.shape.borderRadius,\n  };\n});\n\nconst QuoteIcon = styled(FormatQuote)<{ customColor: string }>(({ theme, customColor }) => {\n  const colorPalette = getColorFromTheme(theme, customColor);\n  \n  return {\n    position: 'absolute',\n    top: theme.spacing(1),\n    left: theme.spacing(1),\n    fontSize: rem(theme, 32),\n    opacity: 0.3,\n    transform: 'rotate(180deg)',\n    color: colorPalette.main,\n  };\n});\n\nconst CitationContainer = styled(Box)(({ theme }) => ({\n  marginTop: theme.spacing(2),\n  textAlign: 'right',\n  fontStyle: 'normal',\n  opacity: 0.8,\n}));\n\nconst AuthorName = styled(Typography)(({ theme }) => ({\n  fontWeight: 600,\n  fontSize: rem(theme, 14),\n  marginBottom: theme.spacing(0.5),\n}));\n\nconst SourceName = styled(Typography)(({ theme }) => ({\n  fontSize: rem(theme, 12),\n  opacity: 0.7,\n}));\n\nexport const Blockquote = React.forwardRef<globalThis.HTMLQuoteElement, BlockquoteProps>(\n  ({ variant = 'default', author, source, color = 'neutral', children, ...props }, ref) => {\n    const showCitation = author || source;\n    const showIcon = variant === 'bordered' || variant === 'citation';\n\n    return (\n      <StyledBlockquote ref={ref} customVariant={variant} customColor={color} {...props}>\n        {showIcon && <QuoteIcon customColor={color} />}\n\n        <Typography\n          component=\"div\"\n          sx={{\n            fontSize: 'inherit',\n            lineHeight: 'inherit',\n            fontStyle: 'inherit',\n            color: 'inherit',\n            margin: 0,\n          }}\n        >\n          {children}\n        </Typography>\n\n        {showCitation && (\n          <CitationContainer>\n            {author && <AuthorName>— {author}</AuthorName>}\n            {source && <SourceName>{source}</SourceName>}\n          </CitationContainer>\n        )}\n      </StyledBlockquote>\n    );\n  },\n);\n\nBlockquote.displayName = 'Blockquote';"],"mappings":"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","names":[]}

package/dist/{chunk-MVXFMIVZ.js → chunk-4GB46HLK.js}

@@ -5,6 +5,10 @@ import {
   asFieldSize,
   fieldTextFieldStyles
 } from "./chunk-CGO452DC.js";
+import {
+  rem,
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
 
 // src/components/navigation/Pagination/PaginationParts.tsx
 import Box from "@mui/material/Box/index.js";
@@ -34,7 +38,7 @@ var ItemsPerPageSelect = ({
   onChange
 }) => /* @__PURE__ */ jsxs(ItemsPerPageContainer, { children: [
   /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: pageSizeLabel }),
-  /* @__PURE__ */ jsx(FormControl, { size: "small", sx: (theme) => ({ minWidth: 80, ...fieldTextFieldStyles(theme, asFieldSize(size)) }), children: /* @__PURE__ */ jsx(
+  /* @__PURE__ */ jsx(FormControl, { size: "small", sx: (theme) => ({ minWidth: rem(theme, 80), ...fieldTextFieldStyles(theme, asFieldSize(size)) }), children: /* @__PURE__ */ jsx(
     Select,
     {
       value,
@@ -43,7 +47,7 @@ var ItemsPerPageSelect = ({
       "data-testid": testId,
       sx: {
         "& .MuiSelect-select": {
-          fontSize: scaleFor(size, ["0.875rem", "1rem", "1.125rem"])
+          fontSize: sxRem(scaleFor(size, [14, 16, 18]))
         }
       },
       children: options.map((option) => /* @__PURE__ */ jsx(MenuItem, { value: option, children: option }, option))
@@ -59,7 +63,7 @@ var PageInfo = ({
   {
     variant: "body2",
     color: "text.secondary",
-    fontSize: scaleFor(size, ["0.75rem", "0.875rem", "1rem"]),
+    sx: { fontSize: sxRem(scaleFor(size, [12, 14, 16])) },
     "data-testid": testId,
     children
   }
@@ -69,4 +73,4 @@ export {
   ItemsPerPageSelect,
   PageInfo
 };
-//# sourceMappingURL=chunk-MVXFMIVZ.js.map
+//# sourceMappingURL=chunk-4GB46HLK.js.map

package/dist/chunk-4GB46HLK.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/Pagination/PaginationParts.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport FormControl from '@mui/material/FormControl/index.js';\nimport MenuItem from '@mui/material/MenuItem/index.js';\nimport Select from '@mui/material/Select/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { styled } from '@mui/material/styles/index.js';\nimport type { FC } from 'react';\nimport React from 'react';\n\nimport { scaleFor } from './Pagination.helpers';\nimport { asFieldSize, fieldTextFieldStyles } from '../../../tokens/field-height';\nimport { rem, sxRem } from '../../../tokens/relative';\n\n// Kept module-local: styled() components cannot be exported across a module\n// boundary here without tripping TS2742.\nconst ItemsPerPageContainer = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(1),\n}));\n\nconst PageInfoContainer = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(1),\n}));\n\nexport interface ItemsPerPageSelectProps {\n  /** The label in front of the select. REQUIRED — it was `\"Show:\"`. */\n  pageSizeLabel: string;\n  value: number;\n  options: number[];\n  size: string;\n  disabled: boolean;\n  testId: string;\n  onChange: (value: number) => void;\n}\n\nexport const ItemsPerPageSelect: FC<ItemsPerPageSelectProps> = ({\n  pageSizeLabel,\n  value,\n  options,\n  size,\n  disabled,\n  testId,\n  onChange,\n}) => (\n  <ItemsPerPageContainer>\n    <Typography variant=\"body2\" color=\"text.secondary\">\n      {pageSizeLabel}\n    </Typography>\n    <FormControl size=\"small\" sx={(theme) => ({ minWidth: rem(theme, 80), ...fieldTextFieldStyles(theme, asFieldSize(size)) })}>\n      <Select\n        value={value}\n        onChange={(event) => onChange(event.target.value as number)}\n        disabled={disabled}\n        data-testid={testId}\n        sx={{\n          '& .MuiSelect-select': {\n            fontSize: sxRem(scaleFor(size, [14, 16, 18])),\n          },\n        }}\n      >\n        {options.map((option) => (\n          <MenuItem key={option} value={option}>\n            {option}\n          </MenuItem>\n        ))}\n      </Select>\n    </FormControl>\n  </ItemsPerPageContainer>\n);\n\nexport const PageInfo: FC<{ size: string; testId: string; children: React.ReactNode }> = ({\n  size,\n  testId,\n  children,\n}) => (\n  <PageInfoContainer>\n    <Typography\n      variant=\"body2\"\n      color=\"text.secondary\"\n      sx={{ fontSize: sxRem(scaleFor(size, [12, 14, 16])) }}\n      data-testid={testId}\n    >\n      {children}\n    </Typography>\n  </PageInfoContainer>\n);\n"],"mappings":";;;;;;;;;;;;;AAAA,OAAO,SAAS;AAChB,OAAO,iBAAiB;AACxB,OAAO,cAAc;AACrB,OAAO,YAAY;AACnB,OAAO,gBAAgB;AACvB,SAAS,cAAc;AA0CrB,SACE,KADF;AAhCF,IAAM,wBAAwB,OAAO,GAAG,EAAE,CAAC,EAAE,MAAM,OAAO;AAAA,EACxD,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,KAAK,MAAM,QAAQ,CAAC;AACtB,EAAE;AAEF,IAAM,oBAAoB,OAAO,GAAG,EAAE,CAAC,EAAE,MAAM,OAAO;AAAA,EACpD,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,KAAK,MAAM,QAAQ,CAAC;AACtB,EAAE;AAaK,IAAM,qBAAkD,CAAC;AAAA,EAC9D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MACE,qBAAC,yBACC;AAAA,sBAAC,cAAW,SAAQ,SAAQ,OAAM,kBAC/B,yBACH;AAAA,EACA,oBAAC,eAAY,MAAK,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,IAAI,OAAO,EAAE,GAAG,GAAG,qBAAqB,OAAO,YAAY,IAAI,CAAC,EAAE,IACtH;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,UAAU,CAAC,UAAU,SAAS,MAAM,OAAO,KAAe;AAAA,MAC1D;AAAA,MACA,eAAa;AAAA,MACb,IAAI;AAAA,QACF,uBAAuB;AAAA,UACrB,UAAU,MAAM,SAAS,MAAM,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC;AAAA,QAC9C;AAAA,MACF;AAAA,MAEC,kBAAQ,IAAI,CAAC,WACZ,oBAAC,YAAsB,OAAO,QAC3B,oBADY,MAEf,CACD;AAAA;AAAA,EACH,GACF;AAAA,GACF;AAGK,IAAM,WAA4E,CAAC;AAAA,EACxF;AAAA,EACA;AAAA,EACA;AACF,MACE,oBAAC,qBACC;AAAA,EAAC;AAAA;AAAA,IACC,SAAQ;AAAA,IACR,OAAM;AAAA,IACN,IAAI,EAAE,UAAU,MAAM,SAAS,MAAM,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,EAAE;AAAA,IACpD,eAAa;AAAA,IAEZ;AAAA;AACH,GACF;","names":[]}

package/dist/{chunk-SN2YMCTL.js → chunk-4GWHYLEB.js}

@@ -3,10 +3,10 @@ import {
 } from "./chunk-KHG57NAE.js";
 import {
   MultiSelectDropdown
-} from "./chunk-NPP44TQG.js";
+} from "./chunk-EYZ6QBTV.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-4GWHYLEB.js.map

package/dist/{chunk-J4NXTSJY.js → chunk-4JFL62K3.js}

@@ -1,7 +1,7 @@
 import {
   onTrackInk,
   switchSx
-} from "./chunk-2PBT2HQH.js";
+} from "./chunk-AUSUCZYR.js";
 import {
   LABEL_GAP_UNITS,
   SWITCH_ICON_SIZES,
@@ -65,7 +65,7 @@ var SwitchIcon = ({
       sx: {
         position: "absolute",
         top: "50%",
-        ...isOn ? { left: shown ? 4 : "50%" } : { right: shown ? 4 : "50%" },
+        ...isOn ? { left: shown ? sxRem(4) : "50%" } : { right: shown ? sxRem(4) : "50%" },
         transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
         opacity: shown ? 1 : 0,
         transform: `${translate} scale(${shown && animated ? 1 : 0.8})`,
@@ -164,7 +164,7 @@ var SwitchLabel = ({ label, description, error, dataTestId, htmlFor, description
         // The floor applies to the row the label shares with the control. A
         // description already makes the row taller than 40px, so forcing it
         // there would only add blank space.
-        ...description ? {} : { minHeight: TAP_TARGET_MIN },
+        ...description ? {} : { minHeight: sxRem(TAP_TARGET_MIN) },
         // A disabled control's label toggles nothing, so it must not wear the
         // cursor that says it does.
         ...htmlFor && !disabled ? { cursor: "pointer" } : {}
@@ -220,4 +220,4 @@ export {
   SwitchHelper,
   SwitchRow
 };
-//# sourceMappingURL=chunk-J4NXTSJY.js.map
+//# sourceMappingURL=chunk-4JFL62K3.js.map

package/dist/chunk-4JFL62K3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/Switch/Switch.parts.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport FormHelperText from '@mui/material/FormHelperText/index.js';\nimport MuiSwitch from '@mui/material/Switch/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { styled, useTheme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { LABEL_GAP_UNITS, SWITCH_ICON_SIZES, TAP_TARGET_MIN } from './Switch.metrics';\nimport { onTrackInk, switchSx } from './Switch.styles';\nimport type { SwitchFlags } from './Switch.styles';\nimport type { SwitchProps } from './Switch.types';\nimport { sxRem } from '../../../tokens/relative';\nimport type { SizeValue } from '../../../tokens/vocabulary';\n\nconst StyledSwitch = styled(MuiSwitch, {\n  shouldForwardProp: (prop) =>\n    ![\n      'customVariant',\n      'customColor',\n      'customSize',\n      'glow',\n      'glass',\n      'gradient',\n      'trackWidth',\n      'trackHeight',\n      'onText',\n      'offText',\n      'loading',\n      'ripple',\n      'pulse',\n    ].includes(prop as string),\n})<SwitchFlags>(({ theme, ...flags }) => ({ ...switchSx(theme, flags) }));\n\n/**\n * A top or bottom label stacks and aligns to the start; start/end sit the label\n * beside the control and centre it.\n */\nconst StyledLabelContainer = styled(Box, {\n  shouldForwardProp: (prop) => !['labelPosition', 'error'].includes(prop as string),\n})<{ labelPosition?: string; error?: boolean }>(({ theme, labelPosition, error }) => {\n  const stacked = labelPosition === 'top' || labelPosition === 'bottom';\n\n  return {\n    display: 'flex',\n    alignItems: stacked ? 'flex-start' : 'center',\n    flexDirection:\n      labelPosition === 'top' ? 'column' : labelPosition === 'bottom' ? 'column-reverse' : 'row',\n    gap: theme.spacing(stacked ? LABEL_GAP_UNITS.stacked : LABEL_GAP_UNITS.beside),\n    width: '100%',\n    ...(error && { '& .MuiTypography-root': { color: theme.palette.error.main } }),\n  };\n});\n\n/**\n * A plain wrapper over the styled row. Exporting the styled component itself\n * needs a @mui/system reference tsc calls unportable (TS2742).\n */\nconst LabelContainer: React.FC<{\n  labelPosition?: string;\n  error?: boolean;\n  children: React.ReactNode;\n}> = ({ labelPosition, error, children }) => (\n  <StyledLabelContainer labelPosition={labelPosition} error={error}>\n    {children}\n  </StyledLabelContainer>\n);\n\nexport interface SwitchIconProps {\n  icon: React.ReactNode;\n  /** True when this icon is the one the current state should show. */\n  shown: boolean;\n  animated: boolean;\n  size: string;\n  side: 'on' | 'off';\n  /** The ink for the ON icon, which sits on the brand-filled track (FUT-1924). */\n  onInk: string;\n}\n\n/**\n * One of the two icons overlaid on the track. The on icon slides to the left\n * edge when checked and the off icon to the right when unchecked; they are\n * mirror images, so they share this component rather than being written twice.\n */\nexport const SwitchIcon: React.FC<SwitchIconProps> = ({\n  icon,\n  shown,\n  animated,\n  size,\n  side,\n  onInk,\n}) => {\n  const isOn = side === 'on';\n  const translate = isOn ? 'translate(-50%, -50%)' : 'translate(50%, -50%)';\n\n  return (\n    <Box\n      sx={{\n        position: 'absolute',\n        top: '50%',\n        ...(isOn ? { left: shown ? sxRem(4) : '50%' } : { right: shown ? sxRem(4) : '50%' }),\n        transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',\n        opacity: shown ? 1 : 0,\n        transform: `${translate} scale(${shown && animated ? 1 : 0.8})`,\n        pointerEvents: 'none',\n        zIndex: 2,\n        color: isOn ? onInk : 'text.secondary',\n        fontSize: sxRem(SWITCH_ICON_SIZES[size as SizeValue] ?? SWITCH_ICON_SIZES.md),\n      }}\n    >\n      {icon}\n    </Box>\n  );\n};\n\nexport interface SwitchControlProps extends SwitchFlags {\n  checked?: boolean;\n  onChange?: SwitchProps['onChange'];\n  onIcon?: React.ReactNode;\n  offIcon?: React.ReactNode;\n  animated: boolean;\n  size: string;\n  dataTestId?: string;\n  switchRef?: React.Ref<HTMLButtonElement>;\n  /** The id the label points at — always set, so the input always has one. */\n  inputId: string;\n  /** The caller's own `inputProps`, merged rather than spread over (FUT-1905). */\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n  /** The description's id, appended to whatever the caller described it by. */\n  describedBy?: string;\n  rest: Record<string, unknown>;\n}\n\n/** The control itself: the track, and the two icons that may sit over it. */\nexport const SwitchControl: React.FC<SwitchControlProps> = ({\n  checked,\n  onChange,\n  onIcon,\n  offIcon,\n  animated,\n  size,\n  dataTestId,\n  switchRef,\n  inputId,\n  inputProps,\n  describedBy,\n  rest,\n  ...flags\n}) => {\n  const props = rest as Record<string, unknown> & { disabled?: boolean };\n  const theme = useTheme();\n  const onInk = onTrackInk(theme, flags);\n\n  return (\n    <Box sx={{ position: 'relative', display: 'inline-flex' }}>\n      <StyledSwitch\n        ref={switchRef}\n        {...flags}\n        checked={checked}\n        onChange={onChange}\n        disabled={Boolean(flags.loading) || props.disabled}\n        {...props}\n        /*\n          AFTER `props`, not before it (FUT-1905). `inputProps` used to be\n          written first and `{...props}` spread over it, so a caller passing\n          `inputProps` of its own silently replaced the whole object — losing\n          the `data-testid` every spec finds this control by, and the `id` the\n          label points at.\n\n          The order inside is the contract. Everything the component DEFAULTS\n          goes first, so a caller's own key still wins — that is what it could\n          do before, and a fix for a clobber must not become a clobber the\n          other way. Only the two the component OWNS come last: the `id`, which\n          already resolved the caller's spelling of it (`switchIds`), and\n          `aria-describedby`, which by then already CONTAINS whatever the\n          caller passed, in either spelling.\n        */\n        inputProps={\n          {\n            'aria-label': props['aria-label'],\n            'data-testid': dataTestId || 'switch',\n            ...inputProps,\n            id: inputId,\n            'aria-describedby': describedBy,\n          } as React.InputHTMLAttributes<HTMLInputElement>\n        }\n      />\n\n      {onIcon && (\n        <SwitchIcon\n          icon={onIcon}\n          shown={Boolean(checked)}\n          animated={animated}\n          size={size}\n          side=\"on\"\n          onInk={onInk}\n        />\n      )}\n      {offIcon && (\n        <SwitchIcon\n          icon={offIcon}\n          shown={!checked}\n          animated={animated}\n          size={size}\n          side=\"off\"\n          onInk={onInk}\n        />\n      )}\n    </Box>\n  );\n};\n\n/**\n * The helper line, which is where a validation message lands — so it is\n * `aria-describedby`'d like the description (FUT-1905).\n *\n * It carried no `id` and nothing pointed at it, which means an `error` state\n * announced as \"checkbox, checked\" and nothing else: the one sentence saying\n * WHY was on screen and outside the accessibility tree.\n */\nexport const SwitchHelper: React.FC<{\n  helperText?: React.ReactNode;\n  error?: boolean;\n  dataTestId?: string;\n  id?: string;\n}> = ({ helperText, error, dataTestId, id }) =>\n  helperText ? (\n    <FormHelperText\n      id={id}\n      error={error}\n      sx={{ mt: 1 }}\n      data-testid={dataTestId ? `${dataTestId}-helper` : 'switch-helper'}\n    >\n      {helperText}\n    </FormHelperText>\n  ) : null;\n\n/**\n * The label, WIRED to the input it names (FUT-1905).\n *\n * It used to be a `<p>` rendered as the control's sibling, with no `for`, no\n * `id` on the input and no `aria-labelledby` — so a labelled `Switch` announced\n * as \"checkbox, checked\" with no name, and clicking the words did nothing. Every\n * `Switch` in a consumer app was affected, not one call site, and the workaround\n * each had to write was a hand-typed `aria-label` duplicating the text already\n * on screen.\n *\n * A real `<label for>` fixes the name and the pointer in the same stroke, and it\n * is also the answer to the TAP TARGET: no size in `SWITCH_SIZES` clears the\n * 40px floor (`xl` is 34px tall), so the control cannot be made big enough by\n * passing a bigger `size` — instead the label becomes the target, which is how\n * this is normally solved. Hence `display: flex` and `TAP_TARGET_MIN`: the\n * label fills its half of the row and is never shorter than the floor.\n *\n * The DESCRIPTION stays outside the label and is pointed at by\n * `aria-describedby` instead: inside it, a two-line explanation would be read\n * out as part of the control's name.\n */\nconst SwitchLabel: React.FC<{\n  label: React.ReactNode;\n  description?: React.ReactNode;\n  error?: boolean;\n  dataTestId?: string;\n  /** The input's id. Omitted only where there is no input to point at. */\n  htmlFor?: string;\n  descriptionId?: string;\n  disabled?: boolean;\n}> = ({ label, description, error, dataTestId, htmlFor, descriptionId, disabled }) => (\n  <Box sx={{ flex: 1, minWidth: 0 }}>\n    <Typography\n      component=\"label\"\n      htmlFor={htmlFor}\n      variant=\"body2\"\n      fontWeight={500}\n      color={error ? 'error.main' : 'text.primary'}\n      sx={{\n        display: 'flex',\n        alignItems: 'center',\n        // The floor applies to the row the label shares with the control. A\n        // description already makes the row taller than 40px, so forcing it\n        // there would only add blank space.\n        ...(description ? {} : { minHeight: sxRem(TAP_TARGET_MIN) }),\n        // A disabled control's label toggles nothing, so it must not wear the\n        // cursor that says it does.\n        ...(htmlFor && !disabled ? { cursor: 'pointer' } : {}),\n      }}\n      data-testid={dataTestId ? `${dataTestId}-label` : 'switch-label'}\n    >\n      {label}\n    </Typography>\n    {description && (\n      <Typography\n        id={descriptionId}\n        variant=\"caption\"\n        color={error ? 'error.main' : 'text.secondary'}\n        sx={{ display: 'block', mt: 0.5 }}\n      >\n        {description}\n      </Typography>\n    )}\n  </Box>\n);\n\n/**\n * The control and its label in one row, or the control alone.\n *\n * Lives here rather than inline in `Switch.tsx` because the two branches only\n * differ in what surrounds the control — and the component that assembles them\n * was long enough that the wiring got hard to see between them.\n */\nexport const SwitchRow: React.FC<{\n  label?: React.ReactNode;\n  description?: React.ReactNode;\n  labelPosition?: string;\n  error?: boolean;\n  dataTestId?: string;\n  htmlFor: string;\n  descriptionId?: string;\n  disabled?: boolean;\n  control: React.ReactNode;\n}> = ({\n  label,\n  description,\n  labelPosition,\n  error,\n  dataTestId,\n  htmlFor,\n  descriptionId,\n  disabled,\n  control,\n}) => {\n  if (!label) return <>{control}</>;\n\n  return (\n    <LabelContainer labelPosition={labelPosition} error={error}>\n      {labelPosition === 'start' && control}\n\n      <SwitchLabel\n        label={label}\n        description={description}\n        error={error}\n        dataTestId={dataTestId}\n        htmlFor={htmlFor}\n        descriptionId={descriptionId}\n        disabled={disabled}\n      />\n\n      {labelPosition !== 'start' && control}\n    </LabelContainer>\n  );\n};\n"],"mappings":"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","names":[]}

package/dist/{chunk-XLYFOBBT.js → chunk-4PRZLII7.js}

@@ -17,7 +17,8 @@ import {
   splitTestId
 } from "./chunk-TYJR4GOF.js";
 import {
-  rem
+  rem,
+  sxRem
 } from "./chunk-YKCAJ2TN.js";
 
 // src/components/form/Checkbox/Checkbox.tsx
@@ -25,40 +26,41 @@ import MuiCheckbox from "@mui/material/Checkbox/index.js";
 import CircularProgress from "@mui/material/CircularProgress/index.js";
 import FormControlLabel from "@mui/material/FormControlLabel/index.js";
 import FormHelperText from "@mui/material/FormHelperText/index.js";
-import { alpha, keyframes, styled } from "@mui/material/styles/index.js";
+import { alpha, keyframes, styled, useTheme } from "@mui/material/styles/index.js";
 import React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-var pulse = keyframes`
+var pulse = (theme) => keyframes`
   0% {
     box-shadow: 0 0 0 0 ${effectInk(CHECKBOX_PULSE.alpha)};
   }
   70% {
-    box-shadow: 0 0 0 ${CHECKBOX_PULSE.spread}px ${effectInk(0)};
+    box-shadow: 0 0 0 ${rem(theme, CHECKBOX_PULSE.spread)} ${effectInk(0)};
   }
   100% {
     box-shadow: 0 0 0 0 ${effectInk(0)};
   }
 `;
-var glow = keyframes`
+var glow = (theme) => keyframes`
   0%, 100% {
-    box-shadow: 0 0 ${CHECKBOX_GLOW.blur.from}px ${effectInk(CHECKBOX_GLOW.alpha.from)};
+    box-shadow: 0 0 ${rem(theme, CHECKBOX_GLOW.blur.from)} ${effectInk(CHECKBOX_GLOW.alpha.from)};
   }
   50% {
-    box-shadow: 0 0 ${CHECKBOX_GLOW.blur.to}px ${effectInk(CHECKBOX_GLOW.alpha.to)};
+    box-shadow: 0 0 ${rem(theme, CHECKBOX_GLOW.blur.to)} ${effectInk(CHECKBOX_GLOW.alpha.to)};
   }
 `;
+var cornerOf = (theme, radius) => typeof radius === "number" ? rem(theme, radius) : radius;
 var StyledCheckbox = styled(MuiCheckbox, {
   shouldForwardProp: (prop) => !["customVariant", "ripple", "glow", "pulse"].includes(prop)
 })(
   ({ theme, customVariant, ripple, glow: glowProp, pulse: pulseProp }) => ({
     ...customVariant === "rounded" && {
       "& .MuiSvgIcon-root": {
-        borderRadius: CHECKBOX_VARIANT.rounded.radius
+        borderRadius: cornerOf(theme, CHECKBOX_VARIANT.rounded.radius)
       }
     },
     ...customVariant === "toggle" && {
       "& .MuiSvgIcon-root": {
-        borderRadius: `${CHECKBOX_VARIANT.toggle.radius}px`,
+        borderRadius: cornerOf(theme, CHECKBOX_VARIANT.toggle.radius),
         transform: `scale(${CHECKBOX_VARIANT.toggle.scale})`
       }
     },
@@ -70,10 +72,10 @@ var StyledCheckbox = styled(MuiCheckbox, {
         }
       },
       ...glowProp && {
-        animation: `${glow} ${CHECKBOX_GLOW.ms / 1e3}s ease-in-out infinite`
+        animation: `${glow(theme)} ${CHECKBOX_GLOW.ms / 1e3}s ease-in-out infinite`
       },
       ...pulseProp && {
-        animation: `${pulse} ${CHECKBOX_PULSE.ms / 1e3}s infinite`
+        animation: `${pulse(theme)} ${CHECKBOX_PULSE.ms / 1e3}s infinite`
       },
       "&:hover": {
         backgroundColor: alpha(theme.palette.primary.main, CHECKBOX_HOVER_ALPHA)
@@ -91,7 +93,7 @@ var StyledFormControlLabel = styled(FormControlLabel, {
   shouldForwardProp: (prop) => prop !== "error"
 })(
   ({ theme, error }) => ({
-    marginLeft: CHECKBOX_LABEL.marginLeft,
+    marginLeft: rem(theme, CHECKBOX_LABEL.marginLeft),
     "& .MuiFormControlLabel-label": {
       color: error ? theme.palette.error.main : theme.palette.text.primary,
       fontSize: rem(theme, CHECKBOX_LABEL.fontSize)
@@ -116,6 +118,7 @@ var Checkbox = React.forwardRef(
       disabled,
       ...others
     } = resolveCheckboxProps(rawProps);
+    const theme = useTheme();
     const isDisabled = disabled || loading;
     const { testId: dataTestId, rest: props } = splitTestId(others);
     const testId = makeTestId(dataTestId);
@@ -136,13 +139,13 @@ var Checkbox = React.forwardRef(
       loading && /* @__PURE__ */ jsx(
         CircularProgress,
         {
-          size: CHECKBOX_SPINNER.size,
+          size: rem(theme, CHECKBOX_SPINNER.size),
           sx: {
             position: "absolute",
             top: "50%",
             left: "50%",
-            marginTop: `${CHECKBOX_SPINNER.offset}px`,
-            marginLeft: `${CHECKBOX_SPINNER.offset}px`,
+            marginTop: sxRem(CHECKBOX_SPINNER.offset),
+            marginLeft: sxRem(CHECKBOX_SPINNER.offset),
             color: "primary.main"
           }
         }
@@ -177,4 +180,4 @@ Checkbox.displayName = "Checkbox";
 export {
   Checkbox
 };
-//# sourceMappingURL=chunk-XLYFOBBT.js.map
+//# sourceMappingURL=chunk-4PRZLII7.js.map

package/dist/chunk-4PRZLII7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/Checkbox/Checkbox.tsx"],"sourcesContent":["import MuiCheckbox from '@mui/material/Checkbox/index.js';\nimport CircularProgress from '@mui/material/CircularProgress/index.js';\nimport FormControlLabel from '@mui/material/FormControlLabel/index.js';\nimport FormHelperText from '@mui/material/FormHelperText/index.js';\nimport { alpha, keyframes, styled, useTheme } from '@mui/material/styles/index.js';\nimport type { Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { makeTestId, resolveCheckboxProps } from './Checkbox.helpers';\nimport {\n  CHECKBOX_GLOW,\n  CHECKBOX_HELPER,\n  CHECKBOX_HOVER_ALPHA,\n  CHECKBOX_LABEL,\n  CHECKBOX_PULSE,\n  CHECKBOX_SPINNER,\n  CHECKBOX_TRANSITION_MS,\n  CHECKBOX_VARIANT,\n  effectInk,\n} from './Checkbox.metrics';\nimport type { CheckboxProps } from './Checkbox.types';\nimport { splitTestId } from '../../../platform/test-id';\nimport { rem, sxRem } from '../../../tokens/relative';\n\nconst pulse = (theme: Theme) => keyframes`\n  0% {\n    box-shadow: 0 0 0 0 ${effectInk(CHECKBOX_PULSE.alpha)};\n  }\n  70% {\n    box-shadow: 0 0 0 ${rem(theme, CHECKBOX_PULSE.spread)} ${effectInk(0)};\n  }\n  100% {\n    box-shadow: 0 0 0 0 ${effectInk(0)};\n  }\n`;\n\nconst glow = (theme: Theme) => keyframes`\n  0%, 100% {\n    box-shadow: 0 0 ${rem(theme, CHECKBOX_GLOW.blur.from)} ${effectInk(CHECKBOX_GLOW.alpha.from)};\n  }\n  50% {\n    box-shadow: 0 0 ${rem(theme, CHECKBOX_GLOW.blur.to)} ${effectInk(CHECKBOX_GLOW.alpha.to)};\n  }\n`;\n\n/** A variant's corner: a design-px number through the type scale, a percentage as it is. */\nconst cornerOf = (theme: Theme, radius: number | string | undefined): string | undefined =>\n  typeof radius === 'number' ? rem(theme, radius) : radius;\n\nconst StyledCheckbox = styled(MuiCheckbox, {\n  shouldForwardProp: (prop) => !['customVariant', 'ripple', 'glow', 'pulse'].includes(prop as string),\n})<{ \n  customVariant?: CheckboxProps['variant'];\n  ripple?: boolean;\n  glow?: boolean;\n  pulse?: boolean;\n}>(\n  ({ theme, customVariant, ripple, glow: glowProp, pulse: pulseProp }) => ({\n    ...(customVariant === 'rounded' && {\n      '& .MuiSvgIcon-root': {\n        borderRadius: cornerOf(theme, CHECKBOX_VARIANT.rounded.radius),\n      },\n    }),\n    \n    ...(customVariant === 'toggle' && {\n      '& .MuiSvgIcon-root': {\n        borderRadius: cornerOf(theme, CHECKBOX_VARIANT.toggle.radius),\n        transform: `scale(${CHECKBOX_VARIANT.toggle.scale})`,\n      },\n    }),\n    \n    '&.MuiCheckbox-root': {\n      transition: `all ${CHECKBOX_TRANSITION_MS / 1000}s ease`,\n      ...(ripple === false && {\n        '& .MuiTouchRipple-root': {\n          display: 'none',\n        },\n      }),\n      ...(glowProp && {\n        animation: `${glow(theme)} ${CHECKBOX_GLOW.ms / 1000}s ease-in-out infinite`,\n      }),\n      ...(pulseProp && {\n        animation: `${pulse(theme)} ${CHECKBOX_PULSE.ms / 1000}s infinite`,\n      }),\n      '&:hover': {\n        backgroundColor: alpha(theme.palette.primary.main, CHECKBOX_HOVER_ALPHA),\n      },\n    },\n    \n    '&.Mui-checked': {\n      color: theme.palette.primary.main,\n    },\n    \n    '&.MuiCheckbox-indeterminate': {\n      color: theme.palette.primary.main,\n    },\n  })\n);\n\nconst StyledFormControlLabel = styled(FormControlLabel, {\n  shouldForwardProp: (prop) => prop !== 'error',\n})<{ error?: boolean }>(\n  ({ theme, error }) => ({\n    marginLeft: rem(theme, CHECKBOX_LABEL.marginLeft),\n    '& .MuiFormControlLabel-label': {\n      color: error ? theme.palette.error.main : theme.palette.text.primary,\n      fontSize: rem(theme, CHECKBOX_LABEL.fontSize),\n    },\n  })\n);\n\nconst StyledFormHelperText = styled(FormHelperText)(({ theme }) => ({\n  marginLeft: theme.spacing(CHECKBOX_HELPER.marginLeftUnits),\n  marginTop: theme.spacing(CHECKBOX_HELPER.marginTopUnits),\n}));\n\nexport const Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(\n  (rawProps, ref) => {\n    const {\n      variant,\n      label,\n      error,\n      helperText,\n      loading,\n      ripple,\n      glow,\n      pulse,\n      disabled,\n      ...others\n    } = resolveCheckboxProps(rawProps);\n    const theme = useTheme();\n    const isDisabled = disabled || loading;\n    const { testId: dataTestId, rest: props } = splitTestId(others);\n    const testId = makeTestId(dataTestId);\n\n    const checkbox = (\n      <div style={{ position: 'relative', display: 'inline-flex' }}>\n        <StyledCheckbox\n          ref={ref}\n          customVariant={variant}\n          ripple={ripple}\n          glow={glow}\n          pulse={pulse}\n          disabled={isDisabled}\n          data-testid={dataTestId || 'checkbox'}\n          {...props}\n        />\n        {loading && (\n          <CircularProgress\n            size={rem(theme, CHECKBOX_SPINNER.size)}\n            sx={{\n              position: 'absolute',\n              top: '50%',\n              left: '50%',\n              marginTop: sxRem(CHECKBOX_SPINNER.offset),\n              marginLeft: sxRem(CHECKBOX_SPINNER.offset),\n              color: 'primary.main',\n            }}\n          />\n        )}\n      </div>\n    );\n    \n    if (label) {\n      return (\n        <div data-testid={testId('container')}>\n          <StyledFormControlLabel\n            control={checkbox}\n            label={label}\n            error={error}\n            disabled={isDisabled}\n          />\n          {helperText && (\n            <StyledFormHelperText \n              error={error}\n              data-testid={testId('helper')}\n            >\n              {helperText}\n            </StyledFormHelperText>\n          )}\n        </div>\n      );\n    }\n    \n    return checkbox;\n  }\n);\n\nCheckbox.displayName = 'Checkbox';"],"mappings":"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","names":["glow","pulse"]}