@12-apps/ui 6.39.20 → 6.41.0

package/dist/{chunk-JRJCBDGN.js → chunk-SDKOOVEX.js}

@@ -9,18 +9,18 @@ import {
   inputRadiusStyles,
   outlinedStyles,
   pulseStyles
-} from "./chunk-THMT3G3L.js";
+} from "./chunk-YLXQWYOG.js";
 import {
   INPUT_LOADING,
   SIZE_MAP,
   muiVariantFor
-} from "./chunk-RNIU447I.js";
+} from "./chunk-JU3FRRO2.js";
 import {
   splitTestId
 } from "./chunk-TYJR4GOF.js";
 import {
   fieldControlStyles
-} from "./chunk-CGO452DC.js";
+} from "./chunk-M47ZOUGF.js";
 import {
   rem
 } from "./chunk-YKCAJ2TN.js";
@@ -92,6 +92,7 @@ var Input = React.forwardRef(
     "aria-label": ariaLabel,
     "aria-describedby": ariaDescribedBy,
     "aria-busy": ariaBusy,
+    inputProps,
     ...rest
   }, ref) => {
     const { testId: dataTestId, rest: props } = splitTestId(rest);
@@ -117,6 +118,7 @@ var Input = React.forwardRef(
         onBlur,
         inputProps: {
           "data-testid": dataTestId,
+          ...inputProps,
           ...inputAriaOf({ id, helperText, label: ariaLabel, describedBy: ariaDescribedBy, busy: ariaBusy })
         },
         InputProps: {
@@ -135,4 +137,4 @@ Input.displayName = "Input";
 export {
   Input
 };
-//# sourceMappingURL=chunk-JRJCBDGN.js.map
+//# sourceMappingURL=chunk-SDKOOVEX.js.map

package/dist/{chunk-JRJCBDGN.js.map → chunk-SDKOOVEX.js.map}

@@ -1 +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\n/**\n * The ARIA that describes the field has to sit on the `<input>`: the text\n * field puts every attribute it does not recognise on its root `FormControl`,\n * a `<div>` with no role, where a screen reader never reads it.\n *\n * `aria-label` has ridden `inputProps` since FUT-755. `aria-describedby` and\n * `aria-busy` fell through to the div until FUT-2619, so CepField's input\n * pointed at nothing while its lookup status lived in a live region beside it.\n *\n * `inputProps` are spread onto the `<input>` AFTER the `aria-describedby` MUI\n * writes for helper text, so a caller's ids REPLACE the helper text's: MUI's\n * `TextField` on its own keeps only one of the two. This joins both, helper\n * text first. The helper id is MUI's `<id>-helper-text` (the parity test pins\n * that spelling), which is why the field's id is fixed here rather than left\n * to the text field.\n */\nfunction inputAriaOf(a: {\n  id: string;\n  helperText: React.ReactNode;\n  label?: string;\n  describedBy?: string;\n  busy?: InputProps['aria-busy'];\n}): Record<string, unknown> {\n  const describedBy = [a.helperText ? `${a.id}-helper-text` : undefined, a.describedBy]\n    .filter(Boolean)\n    .join(' ');\n  return {\n    ...(a.label === undefined ? {} : { 'aria-label': a.label }),\n    ...(a.describedBy === undefined ? {} : { 'aria-describedby': describedBy }),\n    ...(a.busy === undefined ? {} : { 'aria-busy': a.busy }),\n  };\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      'aria-describedby': ariaDescribedBy,\n      'aria-busy': ariaBusy,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { testId: dataTestId, rest: props } = splitTestId(rest);\n    const generatedId = React.useId();\n    const id = props.id ?? generatedId;\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         * `aria-describedby` and `aria-busy` are the same case: `inputAriaOf`.\n         */\n        inputProps={{\n          'data-testid': dataTestId,\n          ...inputAriaOf({ id, helperText, label: ariaLabel, describedBy: ariaDescribedBy, busy: ariaBusy }),\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        id={id}\n      />\n    );\n  },\n);\n\nInput.displayName = 'Input';\n"],"mappings":"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","names":[]}
+{"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\n/**\n * The ARIA that describes the field has to sit on the `<input>`: the text\n * field puts every attribute it does not recognise on its root `FormControl`,\n * a `<div>` with no role, where a screen reader never reads it.\n *\n * `aria-label` has ridden `inputProps` since FUT-755. `aria-describedby` and\n * `aria-busy` fell through to the div until FUT-2619, so CepField's input\n * pointed at nothing while its lookup status lived in a live region beside it.\n *\n * `inputProps` are spread onto the `<input>` AFTER the `aria-describedby` MUI\n * writes for helper text, so a caller's ids REPLACE the helper text's: MUI's\n * `TextField` on its own keeps only one of the two. This joins both, helper\n * text first. The helper id is MUI's `<id>-helper-text` (the parity test pins\n * that spelling), which is why the field's id is fixed here rather than left\n * to the text field.\n */\nfunction inputAriaOf(a: {\n  id: string;\n  helperText: React.ReactNode;\n  label?: string;\n  describedBy?: string;\n  busy?: InputProps['aria-busy'];\n}): Record<string, unknown> {\n  const describedBy = [a.helperText ? `${a.id}-helper-text` : undefined, a.describedBy]\n    .filter(Boolean)\n    .join(' ');\n  return {\n    ...(a.label === undefined ? {} : { 'aria-label': a.label }),\n    ...(a.describedBy === undefined ? {} : { 'aria-describedby': describedBy }),\n    ...(a.busy === undefined ? {} : { 'aria-busy': a.busy }),\n  };\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      'aria-describedby': ariaDescribedBy,\n      'aria-busy': ariaBusy,\n      inputProps,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { testId: dataTestId, rest: props } = splitTestId(rest);\n    const generatedId = React.useId();\n    const id = props.id ?? generatedId;\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         * `aria-describedby` and `aria-busy` are the same case: `inputAriaOf`.\n         */\n        inputProps={{\n          'data-testid': dataTestId,\n          ...inputProps,\n          ...inputAriaOf({ id, helperText, label: ariaLabel, describedBy: ariaDescribedBy, busy: ariaBusy }),\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        id={id}\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;AAkBA,SAAS,YAAY,GAMO;AAC1B,QAAM,cAAc,CAAC,EAAE,aAAa,GAAG,EAAE,EAAE,iBAAiB,QAAW,EAAE,WAAW,EACjF,OAAO,OAAO,EACd,KAAK,GAAG;AACX,SAAO;AAAA,IACL,GAAI,EAAE,UAAU,SAAY,CAAC,IAAI,EAAE,cAAc,EAAE,MAAM;AAAA,IACzD,GAAI,EAAE,gBAAgB,SAAY,CAAC,IAAI,EAAE,oBAAoB,YAAY;AAAA,IACzE,GAAI,EAAE,SAAS,SAAY,CAAC,IAAI,EAAE,aAAa,EAAE,KAAK;AAAA,EACxD;AACF;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,oBAAoB;AAAA,IACpB,aAAa;AAAA,IACb;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,EAAE,QAAQ,YAAY,MAAM,MAAM,IAAI,YAAY,IAAI;AAC5D,UAAM,cAAc,MAAM,MAAM;AAChC,UAAM,KAAK,MAAM,MAAM;AACvB,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,QAUA,YAAY;AAAA,UACV,eAAe;AAAA,UACf,GAAG;AAAA,UACH,GAAG,YAAY,EAAE,IAAI,YAAY,OAAO,WAAW,aAAa,iBAAiB,MAAM,SAAS,CAAC;AAAA,QACnG;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,QACJ;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,MAAM,cAAc;","names":[]}

package/dist/{chunk-UMNXSQ7I.js → chunk-SNBAMWI5.js}

@@ -1,6 +1,6 @@
 import {
   fieldHeight
-} from "./chunk-CGO452DC.js";
+} from "./chunk-M47ZOUGF.js";
 import {
   fieldRadiusPx
 } from "./chunk-GDN2LUTZ.js";
@@ -77,4 +77,4 @@ function FilterTrigger({
 export {
   FilterTrigger
 };
-//# sourceMappingURL=chunk-UMNXSQ7I.js.map
+//# sourceMappingURL=chunk-SNBAMWI5.js.map

package/dist/{chunk-LP3JCXER.js → chunk-SNW5MJ6I.js}

@@ -1,6 +1,6 @@
 import {
   sizeStyles
-} from "./chunk-FERUQ7OB.js";
+} from "./chunk-VYA4QWQL.js";
 import {
   sxRem
 } from "./chunk-YKCAJ2TN.js";
@@ -95,4 +95,4 @@ var MenubarItemView = ({
 export {
   MenubarItemView
 };
-//# sourceMappingURL=chunk-LP3JCXER.js.map
+//# sourceMappingURL=chunk-SNW5MJ6I.js.map

package/dist/{chunk-5OBGW3FG.js → chunk-STTULW2K.js}

@@ -5,7 +5,7 @@ import {
   getColorFromTheme,
   getSizeStyles,
   pulseAnimation
-} from "./chunk-H224XFFD.js";
+} from "./chunk-6REPQ352.js";
 import {
   progressLabelText,
   resolveProgressProps
@@ -243,4 +243,4 @@ Progress.displayName = "Progress";
 export {
   Progress
 };
-//# sourceMappingURL=chunk-5OBGW3FG.js.map
+//# sourceMappingURL=chunk-STTULW2K.js.map

package/dist/{chunk-3CTQZDSD.js → chunk-TCNTIGMY.js}

@@ -1,9 +1,9 @@
-import {
-  SettingsSectionChips
-} from "./chunk-N7LPVR7P.js";
 import {
   SettingsSectionHeader
 } from "./chunk-6KEXHOIF.js";
+import {
+  SettingsSectionChips
+} from "./chunk-CKHFYTIX.js";
 import {
   TOUCH_TARGET,
   atLeastRail,
@@ -167,4 +167,4 @@ function SettingsPanel({
 export {
   SettingsPanel
 };
-//# sourceMappingURL=chunk-3CTQZDSD.js.map
+//# sourceMappingURL=chunk-TCNTIGMY.js.map

package/dist/{chunk-Y6C4MYZE.js → chunk-TNQDSTIA.js}

@@ -1,9 +1,3 @@
-import {
-  pulseAnimation,
-  rotateAnimation,
-  scaleInAnimation,
-  shimmerAnimation
-} from "./chunk-MTEQEPNY.js";
 import {
   ACTIVE_SCALE,
   AVATAR_SIZES,
@@ -23,6 +17,12 @@ import {
   SPINNER,
   STATUS_DOT
 } from "./chunk-6ZZGK5DT.js";
+import {
+  pulseAnimation,
+  rotateAnimation,
+  scaleInAnimation,
+  shimmerAnimation
+} from "./chunk-MTEQEPNY.js";
 import {
   absoluteInk,
   controlNeutral,
@@ -277,4 +277,4 @@ function AvatarView(props) {
 export {
   AvatarView
 };
-//# sourceMappingURL=chunk-Y6C4MYZE.js.map
+//# sourceMappingURL=chunk-TNQDSTIA.js.map

package/dist/{chunk-6RLCBNDV.js → chunk-TPVSHO75.js}

@@ -1,17 +1,17 @@
 import {
   CategorySectionHeading,
   CategoryTreeRow
-} from "./chunk-ZXSWXE6U.js";
+} from "./chunk-CMFJQH6A.js";
+import {
+  emptySx,
+  listSx,
+  skeletonSx
+} from "./chunk-Z6T5SXST.js";
 import {
   categoryCheckState,
   isLeafCategory,
   leavesOf
 } from "./chunk-PN4HVM43.js";
-import {
-  emptySx,
-  listSx,
-  skeletonSx
-} from "./chunk-JC22FNFA.js";
 import {
   sxRem
 } from "./chunk-YKCAJ2TN.js";
@@ -144,4 +144,4 @@ function CategoryPanelList(props) {
 export {
   CategoryPanelList
 };
-//# sourceMappingURL=chunk-6RLCBNDV.js.map
+//# sourceMappingURL=chunk-TPVSHO75.js.map

package/dist/{chunk-BUPDBEBA.js → chunk-TTJTMDLI.js}

@@ -11,7 +11,7 @@ import {
 } from "./chunk-AUHYR7ID.js";
 import {
   Button
-} from "./chunk-HM2JJNUE.js";
+} from "./chunk-K6LNHHSH.js";
 
 // src/components/feedback/NotificationStatusNotice/NotificationStatusNotice.tsx
 import Box from "@mui/material/Box/index.js";
@@ -106,4 +106,4 @@ NotificationStatusNotice.displayName = "NotificationStatusNotice";
 export {
   NotificationStatusNotice
 };
-//# sourceMappingURL=chunk-BUPDBEBA.js.map
+//# sourceMappingURL=chunk-TTJTMDLI.js.map

package/dist/{chunk-TU5EIKJA.js → chunk-U5SH3VRJ.js}

@@ -1,11 +1,11 @@
-import {
-  PT_BR_TABLE_FILTER_COPY
-} from "./chunk-A7RIZOAL.js";
 import {
   PT_BR_CATEGORY_SELECT_COPY,
   PT_BR_CONFIRM_ACTION_COPY,
   PT_BR_SAVED_VIEWS_LABELS
 } from "./chunk-WUE5EK42.js";
+import {
+  PT_BR_TABLE_FILTER_COPY
+} from "./chunk-33L26P4J.js";
 
 // src/pt-BR.data-display.ts
 var PT_BR_LIGHTBOX_COPY = {
@@ -225,4 +225,4 @@ export {
   PT_BR_DATA_STATE_COPY,
   PT_BR_DATA_VIEWS_COPY
 };
-//# sourceMappingURL=chunk-TU5EIKJA.js.map
+//# sourceMappingURL=chunk-U5SH3VRJ.js.map

package/dist/chunk-U67ZQ6VM.js

@@ -0,0 +1,82 @@
+import {
+  partTestId
+} from "./chunk-PEOOCQ2T.js";
+import {
+  SETTING_CARD_OPEN_ATTR,
+  withCallerSx
+} from "./chunk-3DO5AJCG.js";
+import {
+  SETTING_CARD,
+  SETTING_GRID_GAP_UNITS
+} from "./chunk-IC7GHPMK.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/layout/SettingCard/SettingGrid.tsx
+import Box from "@mui/material/Box/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var SETTING_GRID_CONTAINER = "setting-grid";
+var tracks = (n) => `repeat(${n}, minmax(0, 1fr))`;
+var threshold = (theme, n, minColumnPx, gapUnits) => `calc(${n} * ${rem(theme, minColumnPx)} + ${n - 1} * ${theme.spacing(gapUnits)})`;
+function settingGridStyles(theme, { minColumnPx, maxColumns, gapUnits }) {
+  const styles = {
+    display: "grid",
+    gap: theme.spacing(gapUnits),
+    gridTemplateColumns: tracks(1),
+    gridAutoRows: "auto",
+    alignItems: "stretch",
+    [`& > [${SETTING_CARD_OPEN_ATTR}], & > :has([${SETTING_CARD_OPEN_ATTR}])`]: { gridColumn: "1 / -1" }
+  };
+  for (const n of [2, 3]) {
+    if (n > maxColumns) break;
+    styles[`@container ${SETTING_GRID_CONTAINER} (min-width: ${threshold(theme, n, minColumnPx, gapUnits)})`] = {
+      gridTemplateColumns: tracks(n)
+    };
+  }
+  return styles;
+}
+var SettingGrid = forwardRef(function SettingGrid2(props, ref) {
+  const {
+    children,
+    minColumnWidth = SETTING_CARD.gridMinColumnWidth,
+    maxColumns = 3,
+    gap = SETTING_GRID_GAP_UNITS,
+    "aria-label": ariaLabel,
+    dataTestId,
+    className,
+    sx
+  } = props;
+  const theme = useTheme();
+  const gridStyles = settingGridStyles(theme, { minColumnPx: minColumnWidth, maxColumns, gapUnits: gap });
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      ref,
+      role: ariaLabel ? "region" : void 0,
+      "aria-label": ariaLabel,
+      "data-testid": dataTestId,
+      className,
+      sx: withCallerSx({ containerType: "inline-size", containerName: SETTING_GRID_CONTAINER, minWidth: 0 }, sx),
+      children: /* @__PURE__ */ jsx(
+        Box,
+        {
+          sx: gridStyles,
+          "data-max-columns": maxColumns,
+          "data-testid": partTestId(dataTestId, "grid"),
+          children
+        }
+      )
+    }
+  );
+});
+SettingGrid.displayName = "SettingGrid";
+
+export {
+  SETTING_GRID_CONTAINER,
+  settingGridStyles,
+  SettingGrid
+};
+//# sourceMappingURL=chunk-U67ZQ6VM.js.map

package/dist/chunk-U67ZQ6VM.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/SettingCard/SettingGrid.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport { useTheme, type CSSObject, type Theme } from '@mui/material/styles/index.js';\nimport { forwardRef } from 'react';\n\nimport { rem } from '../../../tokens/relative';\n\nimport { SETTING_CARD, SETTING_GRID_GAP_UNITS } from './SettingCard.metrics';\nimport { partTestId } from './SettingCard.parts';\nimport { SETTING_CARD_OPEN_ATTR, withCallerSx } from './SettingCard.styles';\nimport type { SettingGridColumns, SettingGridProps } from './SettingCard.types';\n\n/** The container the grid's own queries are asked of. Named, so a nested grid answers to its own. */\nexport const SETTING_GRID_CONTAINER = 'setting-grid';\n\n/** The track list for `n` equal columns. `minmax(0, …)` so a long word cannot widen its column. */\nconst tracks = (n: SettingGridColumns): string => `repeat(${n}, minmax(0, 1fr))`;\n\n/**\n * The narrowest the container can be and still fit `n` columns of\n * `minColumnWidth` with the gaps between them. A `calc()` because the gap is a\n * spacing unit and the width a type-scale length: two scales, one sum.\n */\nconst threshold = (theme: Theme, n: number, minColumnPx: number, gapUnits: number): string =>\n  `calc(${n} * ${rem(theme, minColumnPx)} + ${n - 1} * ${theme.spacing(gapUnits)})`;\n\n/**\n * The grid itself.\n *\n * - Columns come from CONTAINER queries, not viewport ones: a settings grid\n *   lives beside a rail, inside a drawer, in half a split view, and the\n *   viewport says nothing about how wide any of those are.\n * - `grid-auto-rows: auto` with `align-items: stretch` is the equal-height\n *   rule: each row is as tall as its tallest card and every card in it\n *   stretches to match. Not `1fr` rows — those would make EVERY row as tall as\n *   the tallest, so one open card would inflate the whole page.\n * - An open card spans the row. The card sets `grid-column` on itself; the\n *   `:has()` rule covers a card the host wrapped in an element of its own.\n */\nexport interface SettingGridLayout {\n  /** The narrowest column, in DESIGN px (drawn through `rem`). */\n  minColumnPx: number;\n  maxColumns: SettingGridColumns;\n  /** The gap, in theme SPACING units. */\n  gapUnits: number;\n}\n\nexport function settingGridStyles(theme: Theme, { minColumnPx, maxColumns, gapUnits }: SettingGridLayout): CSSObject {\n  const styles: CSSObject = {\n    display: 'grid',\n    gap: theme.spacing(gapUnits),\n    gridTemplateColumns: tracks(1),\n    gridAutoRows: 'auto',\n    alignItems: 'stretch',\n    [`& > [${SETTING_CARD_OPEN_ATTR}], & > :has([${SETTING_CARD_OPEN_ATTR}])`]: { gridColumn: '1 / -1' },\n  };\n  for (const n of [2, 3] as const) {\n    if (n > maxColumns) break;\n    styles[`@container ${SETTING_GRID_CONTAINER} (min-width: ${threshold(theme, n, minColumnPx, gapUnits)})`] = {\n      gridTemplateColumns: tracks(n),\n    };\n  }\n  return styles;\n}\n\n/**\n * Lays setting cards out in one, two or three columns by the width it is\n * GIVEN — see {@link settingGridStyles}. Two elements, because a container\n * query is answered by an ANCESTOR: the outer one is the container, the inner\n * one the grid.\n */\nexport const SettingGrid = forwardRef<HTMLDivElement, SettingGridProps>(function SettingGrid(props, ref) {\n  const {\n    children,\n    minColumnWidth = SETTING_CARD.gridMinColumnWidth,\n    maxColumns = 3,\n    gap = SETTING_GRID_GAP_UNITS,\n    'aria-label': ariaLabel,\n    dataTestId,\n    className,\n    sx,\n  } = props;\n  const theme = useTheme();\n  const gridStyles = settingGridStyles(theme, { minColumnPx: minColumnWidth, maxColumns, gapUnits: gap });\n\n  return (\n    <Box\n      ref={ref}\n      role={ariaLabel ? 'region' : undefined}\n      aria-label={ariaLabel}\n      data-testid={dataTestId}\n      className={className}\n      sx={withCallerSx({ containerType: 'inline-size', containerName: SETTING_GRID_CONTAINER, minWidth: 0 }, sx)}\n    >\n      <Box\n        sx={gridStyles}\n        data-max-columns={maxColumns}\n        data-testid={partTestId(dataTestId, 'grid')}\n      >\n        {children}\n      </Box>\n    </Box>\n  );\n});\n\nSettingGrid.displayName = 'SettingGrid';\n"],"mappings":";;;;;;;;;;;;;;;;AAAA,OAAO,SAAS;AAChB,SAAS,gBAA4C;AACrD,SAAS,kBAAkB;AA2FrB;AAjFC,IAAM,yBAAyB;AAGtC,IAAM,SAAS,CAAC,MAAkC,UAAU,CAAC;AAO7D,IAAM,YAAY,CAAC,OAAc,GAAW,aAAqB,aAC/D,QAAQ,CAAC,MAAM,IAAI,OAAO,WAAW,CAAC,MAAM,IAAI,CAAC,MAAM,MAAM,QAAQ,QAAQ,CAAC;AAuBzE,SAAS,kBAAkB,OAAc,EAAE,aAAa,YAAY,SAAS,GAAiC;AACnH,QAAM,SAAoB;AAAA,IACxB,SAAS;AAAA,IACT,KAAK,MAAM,QAAQ,QAAQ;AAAA,IAC3B,qBAAqB,OAAO,CAAC;AAAA,IAC7B,cAAc;AAAA,IACd,YAAY;AAAA,IACZ,CAAC,QAAQ,sBAAsB,gBAAgB,sBAAsB,IAAI,GAAG,EAAE,YAAY,SAAS;AAAA,EACrG;AACA,aAAW,KAAK,CAAC,GAAG,CAAC,GAAY;AAC/B,QAAI,IAAI,WAAY;AACpB,WAAO,cAAc,sBAAsB,gBAAgB,UAAU,OAAO,GAAG,aAAa,QAAQ,CAAC,GAAG,IAAI;AAAA,MAC1G,qBAAqB,OAAO,CAAC;AAAA,IAC/B;AAAA,EACF;AACA,SAAO;AACT;AAQO,IAAM,cAAc,WAA6C,SAASA,aAAY,OAAO,KAAK;AACvG,QAAM;AAAA,IACJ;AAAA,IACA,iBAAiB,aAAa;AAAA,IAC9B,aAAa;AAAA,IACb,MAAM;AAAA,IACN,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,QAAQ,SAAS;AACvB,QAAM,aAAa,kBAAkB,OAAO,EAAE,aAAa,gBAAgB,YAAY,UAAU,IAAI,CAAC;AAEtG,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAM,YAAY,WAAW;AAAA,MAC7B,cAAY;AAAA,MACZ,eAAa;AAAA,MACb;AAAA,MACA,IAAI,aAAa,EAAE,eAAe,eAAe,eAAe,wBAAwB,UAAU,EAAE,GAAG,EAAE;AAAA,MAEzG;AAAA,QAAC;AAAA;AAAA,UACC,IAAI;AAAA,UACJ,oBAAkB;AAAA,UAClB,eAAa,WAAW,YAAY,MAAM;AAAA,UAEzC;AAAA;AAAA,MACH;AAAA;AAAA,EACF;AAEJ,CAAC;AAED,YAAY,cAAc;","names":["SettingGrid"]}

package/dist/{chunk-MLQYIJTO.js → chunk-U6W2RY3Z.js}

@@ -1,3 +1,7 @@
+import {
+  resolveTooltipProps,
+  usePinnedTooltip
+} from "./chunk-S5UY5U73.js";
 import {
   arrowColor,
   emphasisStyles,
@@ -5,10 +9,6 @@ import {
   tooltipCap,
   variantStyles
 } from "./chunk-TQCQCW2P.js";
-import {
-  resolveTooltipProps,
-  usePinnedTooltip
-} from "./chunk-S5UY5U73.js";
 
 // src/components/data-display/InteractiveTooltip/InteractiveTooltip.tsx
 import MuiTooltip from "@mui/material/Tooltip/index.js";
@@ -101,4 +101,4 @@ InteractiveTooltip.displayName = "InteractiveTooltip";
 export {
   InteractiveTooltip
 };
-//# sourceMappingURL=chunk-MLQYIJTO.js.map
+//# sourceMappingURL=chunk-U6W2RY3Z.js.map

package/dist/{chunk-4WF6ZLIW.js → chunk-UGPRBJWB.js}

@@ -1,20 +1,20 @@
 import {
   ClearAllControl,
   CloseSearchControl
-} from "./chunk-X4F32GUB.js";
+} from "./chunk-BM4KKGL7.js";
 import {
   PillControl
-} from "./chunk-DYGWKZ7T.js";
+} from "./chunk-VWJEM2ER.js";
 import {
   MoreFilters
-} from "./chunk-5CQNBMLK.js";
-import {
-  RangePill
-} from "./chunk-BSUG4KMP.js";
+} from "./chunk-FTQBVZ7V.js";
 import {
   CollapsedSearch,
   InlineKeyword
-} from "./chunk-62UAI62O.js";
+} from "./chunk-4UVFPORR.js";
+import {
+  RangePill
+} from "./chunk-44USLRMT.js";
 
 // src/components/data-display/DataViews/data-views-inline-bar.tsx
 import Box from "@mui/material/Box/index.js";
@@ -220,4 +220,4 @@ function FilterSlots({
 export {
   InlineFilterControls
 };
-//# sourceMappingURL=chunk-4WF6ZLIW.js.map
+//# sourceMappingURL=chunk-UGPRBJWB.js.map

package/dist/chunk-VBP46YP4.js

@@ -0,0 +1,42 @@
+// src/tokens/density.core.ts
+var DEFAULT_DENSITY = "normal";
+var DENSITY_FACTOR = {
+  compact: 0.9,
+  normal: 1,
+  comfortable: 1.1
+};
+function isUsableFactor(value) {
+  return typeof value === "number" && Number.isFinite(value) && value > 0;
+}
+function resolveDensityFactor(density, factors) {
+  if (typeof density === "number") {
+    if (isUsableFactor(density)) return { factor: density };
+    density = void 0;
+  }
+  const level = density ?? DEFAULT_DENSITY;
+  const override = factors?.[level];
+  const factor = isUsableFactor(override) ? override : DENSITY_FACTOR[level];
+  return { level, factor };
+}
+var BASE_FONT_SIZE = 14;
+var BASE_SPACING_UNIT = 8;
+var BASE_FIELD_HEIGHT = 2.5;
+function densityFontSize(factor) {
+  return BASE_FONT_SIZE * factor;
+}
+function densitySpacingUnit(factor) {
+  return BASE_SPACING_UNIT * factor;
+}
+function densityFieldHeight(factor) {
+  return BASE_FIELD_HEIGHT * factor;
+}
+
+export {
+  DEFAULT_DENSITY,
+  DENSITY_FACTOR,
+  resolveDensityFactor,
+  densityFontSize,
+  densitySpacingUnit,
+  densityFieldHeight
+};
+//# sourceMappingURL=chunk-VBP46YP4.js.map

package/dist/chunk-VBP46YP4.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tokens/density.core.ts"],"sourcesContent":["/**\n * THE ONE DENSITY KNOB, WITH NO RENDERER BEHIND IT.\n *\n * A host that wants a compact admin or a roomy kiosk should say so once, in\n * the theme — not hunt through every component's own numbers. Because every\n * size already goes through `rem(theme, px)` / `theme.spacing()` / `fieldHeight()`\n * (FUT-2585, `./relative.ts`), moving the type scale, the spacing unit and the\n * field height BY THE SAME FACTOR is enough to make the whole package denser\n * or roomier — no `size` step is rewritten, no component is touched (FUT-2764\n * Decision 3).\n *\n * Three named levels, or a raw factor for a repository the three names don't\n * fit (a kiosk app, say). A repository can also redefine what a named level\n * itself means (`densityFactors`). Precedence, highest first, ABOVE\n * `resolveDensityFactor` itself — this file's own resolver has no notion of an\n * \"explicit option\" to defer to, that is each CALLER's job:\n *\n * - On the `createUiTheme` path (`./theme.ts`): an explicit `spacingUnit` /\n *   `fieldHeight` option (`UiThemeOptions` carries no `typography.fontSize` —\n *   only `fontFamily`/`monospaceFontFamily`) still wins over EVERYTHING below,\n *   unchanged.\n * - On the MUI-native path (`densityThemeOptions`'s output, or a host's own\n *   `createTheme()` options merged around it): whichever `typography.fontSize`\n *   / `spacing` a host's OWN object literal states last wins — plain\n *   JavaScript object-spread order, not a rule this package enforces. See\n *   `./density.ts` for exactly where to put it.\n *\n * Below that: a numeric `density` (used as the factor directly, no table\n * lookup, and only when it is a USABLE one — see `resolveDensityFactor`) >\n * `densityFactors[level]` (a repository's own override for a named level,\n * same usability rule) > the built-in table below. No `density` at all\n * resolves to `{ level: 'normal', factor: 1 }` — today, byte-for-byte.\n *\n * This file is the resolver alone, so the native renderer and `./theme.ts`\n * read it without importing MUI. The web reader — `useDensity()`, the MUI\n * theme channel, and the standalone `densityThemeOptions()` — is in\n * `./density.ts`.\n */\n\nexport type DensityLevel = 'compact' | 'normal' | 'comfortable';\n\nexport const DEFAULT_DENSITY: DensityLevel = 'normal';\n\n/**\n * The built-in factor table — the LOWEST-precedence source. A repository's\n * own `densityFactors` entry for a level wins over it; a numeric `density`\n * bypasses it entirely. Confirmed against screenshots before this PR merges\n * (see the ticket's Done when) — `compact` 0.9, `normal` 1 (no-op),\n * `comfortable` 1.1.\n */\nexport const DENSITY_FACTOR: Record<DensityLevel, number> = {\n  compact: 0.9,\n  normal: 1,\n  comfortable: 1.1,\n};\n\nexport interface ResolvedDensity {\n  /** Present only when a NAMED level was given; a raw numeric `density` has no name. */\n  level?: DensityLevel;\n  factor: number;\n}\n\n/**\n * A usable factor — a positive, finite number. The same shape\n * `resolveFieldHeight` (`./field-height.core`) already accepts for a `height`;\n * a numeric `density` and a `densityFactors` entry are held to the same rule\n * so an unusable one falls back exactly the way an unusable `fieldHeight`\n * option already does, rather than baking a `0`, a negative or a `NaN`/\n * `Infinity` into `spacingUnit`/`fieldHeight`/`typography.fontSize`.\n */\nfunction isUsableFactor(value: unknown): value is number {\n  return typeof value === 'number' && Number.isFinite(value) && value > 0;\n}\n\n/**\n * Precedence (highest first): a numeric `density` IS the factor, no table lookup —\n * but only when it is a usable one (a positive, finite number); `0`, a negative\n * number, `NaN` or `Infinity` are not a density anyone meant, so they fall back\n * to `'normal'`, factor `1`, exactly as no `density` at all does. A named\n * `density` resolves through `factors?.[level] ?? DENSITY_FACTOR[level]` — a\n * repository's own `densityFactors` override wins over the built-in table, but\n * only when IT is usable too; an unusable entry falls back to the BUILT-IN\n * table's value for that same level (not to `'normal'` — the level itself is\n * still the one asked for, only its factor is unusable). No `density` at all\n * resolves to `{ level: 'normal', factor: 1 }`.\n */\nexport function resolveDensityFactor(\n  density?: DensityLevel | number,\n  factors?: Partial<Record<DensityLevel, number>>,\n): ResolvedDensity {\n  if (typeof density === 'number') {\n    if (isUsableFactor(density)) return { factor: density };\n    density = undefined; // not usable — fall through to 'normal', below\n  }\n  const level = density ?? DEFAULT_DENSITY;\n  const override = factors?.[level];\n  const factor = isUsableFactor(override) ? override : DENSITY_FACTOR[level];\n  return { level, factor };\n}\n\nconst BASE_FONT_SIZE = 14; // MUI's own typography.fontSize baseline\nconst BASE_SPACING_UNIT = 8; // theme.ts's literal default\nconst BASE_FIELD_HEIGHT = 2.5; // field-height.core.ts's DEFAULT_FIELD_HEIGHT\n\n/** MUI's own `typography.fontSize` at this factor. `htmlFontSize` is never touched. */\nexport function densityFontSize(factor: number): number {\n  return BASE_FONT_SIZE * factor;\n}\n\n/** The theme's `spacingUnit` at this factor. */\nexport function densitySpacingUnit(factor: number): number {\n  return BASE_SPACING_UNIT * factor;\n}\n\n/** The standard field height (multiples of the default font size) at this factor. */\nexport function densityFieldHeight(factor: number): number {\n  return BASE_FIELD_HEIGHT * factor;\n}\n"],"mappings":";AAyCO,IAAM,kBAAgC;AAStC,IAAM,iBAA+C;AAAA,EAC1D,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,aAAa;AACf;AAgBA,SAAS,eAAe,OAAiC;AACvD,SAAO,OAAO,UAAU,YAAY,OAAO,SAAS,KAAK,KAAK,QAAQ;AACxE;AAcO,SAAS,qBACd,SACA,SACiB;AACjB,MAAI,OAAO,YAAY,UAAU;AAC/B,QAAI,eAAe,OAAO,EAAG,QAAO,EAAE,QAAQ,QAAQ;AACtD,cAAU;AAAA,EACZ;AACA,QAAM,QAAQ,WAAW;AACzB,QAAM,WAAW,UAAU,KAAK;AAChC,QAAM,SAAS,eAAe,QAAQ,IAAI,WAAW,eAAe,KAAK;AACzE,SAAO,EAAE,OAAO,OAAO;AACzB;AAEA,IAAM,iBAAiB;AACvB,IAAM,oBAAoB;AAC1B,IAAM,oBAAoB;AAGnB,SAAS,gBAAgB,QAAwB;AACtD,SAAO,iBAAiB;AAC1B;AAGO,SAAS,mBAAmB,QAAwB;AACzD,SAAO,oBAAoB;AAC7B;AAGO,SAAS,mBAAmB,QAAwB;AACzD,SAAO,oBAAoB;AAC7B;","names":[]}

package/dist/{chunk-Y6G4I42P.js → chunk-VEEG4UXZ.js}

@@ -6,7 +6,7 @@ import {
   ChipList,
   DefaultSuggestion,
   SuggestionListBox
-} from "./chunk-H6AWKLOV.js";
+} from "./chunk-XBLFK2FL.js";
 import {
   defaultGetKey,
   defaultGetLabel,
@@ -131,4 +131,4 @@ export {
   Autocomplete,
   Autocomplete_default
 };
-//# sourceMappingURL=chunk-Y6G4I42P.js.map
+//# sourceMappingURL=chunk-VEEG4UXZ.js.map

package/dist/{chunk-IRD45DRW.js → chunk-VOJBLBXE.js}

@@ -1,9 +1,9 @@
 import {
   GridShell
-} from "./chunk-KN4ZE2XZ.js";
+} from "./chunk-EIII4QU4.js";
 import {
   useDataViewsState
-} from "./chunk-J3XFUCCR.js";
+} from "./chunk-HKBJZX3C.js";
 
 // src/components/data-display/DataViews/DataViewsGrid.tsx
 import { useEffect, useRef } from "react";
@@ -27,4 +27,4 @@ function DataViewsGrid(props) {
 export {
   DataViewsGrid
 };
-//# sourceMappingURL=chunk-IRD45DRW.js.map
+//# sourceMappingURL=chunk-VOJBLBXE.js.map

package/dist/{chunk-KHPL2J3B.js → chunk-VPAOVEI2.js}

@@ -8,7 +8,7 @@ import {
 } from "./chunk-YLGY3D52.js";
 import {
   useDataViewsLayout
-} from "./chunk-YKEO6UHN.js";
+} from "./chunk-XZJM6EPC.js";
 import {
   useDataViewsCopy
 } from "./chunk-KHG57NAE.js";
@@ -17,7 +17,7 @@ import {
 } from "./chunk-6DPAWXZ3.js";
 import {
   Text
-} from "./chunk-URHX4FAQ.js";
+} from "./chunk-MKLIMY3D.js";
 import {
   sxRem
 } from "./chunk-YKCAJ2TN.js";
@@ -246,4 +246,4 @@ export {
   SortTab,
   DisplayTab
 };
-//# sourceMappingURL=chunk-KHPL2J3B.js.map
+//# sourceMappingURL=chunk-VPAOVEI2.js.map

package/dist/{chunk-DYGWKZ7T.js → chunk-VWJEM2ER.js}

@@ -3,10 +3,10 @@ import {
 } from "./chunk-KHG57NAE.js";
 import {
   MultiSelectDropdown
-} from "./chunk-EYZ6QBTV.js";
+} from "./chunk-3XS37SQT.js";
 import {
   CategorySelect
-} from "./chunk-BKASAYQL.js";
+} from "./chunk-ALOUJ3CE.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-DYGWKZ7T.js.map
+//# sourceMappingURL=chunk-VWJEM2ER.js.map

package/dist/{chunk-FERUQ7OB.js → chunk-VYA4QWQL.js}

@@ -1,6 +1,6 @@
 import {
   accentFor
-} from "./chunk-TCAQOUIB.js";
+} from "./chunk-ZSTSISM6.js";
 import {
   rem
 } from "./chunk-YKCAJ2TN.js";
@@ -73,4 +73,4 @@ export {
   sizeStyles,
   barStyles
 };
-//# sourceMappingURL=chunk-FERUQ7OB.js.map
+//# sourceMappingURL=chunk-VYA4QWQL.js.map

package/dist/chunk-VYM2GPR6.js

@@ -0,0 +1,47 @@
+import {
+  useSettingGroup
+} from "./chunk-XJQNSMGA.js";
+import {
+  useAsyncSwitch
+} from "./chunk-SALQ65SM.js";
+import {
+  SettingSwitchBlock,
+  useSettingSwitchIds
+} from "./chunk-RDZGXJOD.js";
+import {
+  flatStyles,
+  surfaceStyles,
+  withCallerSx
+} from "./chunk-3DO5AJCG.js";
+
+// src/components/layout/SettingCard/SettingToggle.tsx
+import Box from "@mui/material/Box/index.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var SettingToggle = forwardRef(function SettingToggle2(props, ref) {
+  const { checked, onChange, copy, formatError, disabled = false, variant = "card", dataTestId, className, sx } = props;
+  const group = useSettingGroup();
+  const ids = useSettingSwitchIds();
+  const state = useAsyncSwitch({ checked, onChange, formatError, fallback: copy.saveFailed });
+  const card = variant === "card";
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      component: card ? "section" : "div",
+      ref,
+      "aria-labelledby": ids.titleId,
+      "aria-busy": state.saving || void 0,
+      "data-variant": variant,
+      "data-testid": dataTestId,
+      className,
+      sx: withCallerSx((theme) => card ? surfaceStyles(theme, false) : flatStyles(theme), sx),
+      children: /* @__PURE__ */ jsx(SettingSwitchBlock, { ...props, disabled: disabled || group.inactive, ids, state })
+    }
+  );
+});
+SettingToggle.displayName = "SettingToggle";
+
+export {
+  SettingToggle
+};
+//# sourceMappingURL=chunk-VYM2GPR6.js.map

package/dist/chunk-VYM2GPR6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/SettingCard/SettingToggle.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport { forwardRef } from 'react';\n\nimport { useAsyncSwitch } from './SettingCard.hooks';\nimport { flatStyles, surfaceStyles, withCallerSx } from './SettingCard.styles';\nimport type { SettingToggleProps } from './SettingCard.types';\nimport { useSettingGroup } from './SettingGroup.context';\nimport { SettingSwitchBlock, useSettingSwitchIds } from './SettingSwitch';\n\n/**\n * A setting that is one switch and nothing else. There is no edit state:\n * flipping it IS the edit, and it saves at once.\n *\n * `onChange` may be async. The switch shows the new value while the promise is\n * pending, with a spinner and an announced \"saving\"; a rejection flips it back\n * to `checked` and shows the error under it.\n *\n * Inside a `SettingGroup` whose main switch is off, it renders disabled.\n */\nexport const SettingToggle = forwardRef<HTMLElement, SettingToggleProps>(function SettingToggle(props, ref) {\n  const { checked, onChange, copy, formatError, disabled = false, variant = 'card', dataTestId, className, sx } = props;\n  const group = useSettingGroup();\n  const ids = useSettingSwitchIds();\n  const state = useAsyncSwitch({ checked, onChange, formatError, fallback: copy.saveFailed });\n  const card = variant === 'card';\n\n  return (\n    <Box\n      component={card ? 'section' : 'div'}\n      ref={ref}\n      aria-labelledby={ids.titleId}\n      aria-busy={state.saving || undefined}\n      data-variant={variant}\n      data-testid={dataTestId}\n      className={className}\n      sx={withCallerSx((theme) => (card ? surfaceStyles(theme, false) : flatStyles(theme)), sx)}\n    >\n      <SettingSwitchBlock {...props} disabled={disabled || group.inactive} ids={ids} state={state} />\n    </Box>\n  );\n});\n\nSettingToggle.displayName = 'SettingToggle';\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA,OAAO,SAAS;AAChB,SAAS,kBAAkB;AAoCrB;AAlBC,IAAM,gBAAgB,WAA4C,SAASA,eAAc,OAAO,KAAK;AAC1G,QAAM,EAAE,SAAS,UAAU,MAAM,aAAa,WAAW,OAAO,UAAU,QAAQ,YAAY,WAAW,GAAG,IAAI;AAChH,QAAM,QAAQ,gBAAgB;AAC9B,QAAM,MAAM,oBAAoB;AAChC,QAAM,QAAQ,eAAe,EAAE,SAAS,UAAU,aAAa,UAAU,KAAK,WAAW,CAAC;AAC1F,QAAM,OAAO,YAAY;AAEzB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,OAAO,YAAY;AAAA,MAC9B;AAAA,MACA,mBAAiB,IAAI;AAAA,MACrB,aAAW,MAAM,UAAU;AAAA,MAC3B,gBAAc;AAAA,MACd,eAAa;AAAA,MACb;AAAA,MACA,IAAI,aAAa,CAAC,UAAW,OAAO,cAAc,OAAO,KAAK,IAAI,WAAW,KAAK,GAAI,EAAE;AAAA,MAExF,8BAAC,sBAAoB,GAAG,OAAO,UAAU,YAAY,MAAM,UAAU,KAAU,OAAc;AAAA;AAAA,EAC/F;AAEJ,CAAC;AAED,cAAc,cAAc;","names":["SettingToggle"]}

package/dist/{chunk-UKX3MPB7.js → chunk-VYV3JOV5.js}

@@ -2,7 +2,7 @@ import {
   buildGridColumns,
   buildRowActionsColumn,
   isActionsColumn
-} from "./chunk-VPPIODKX.js";
+} from "./chunk-NQ7NMCRI.js";
 
 // src/components/data-display/DataViews/data-views-columns.ts
 import { useTheme } from "@mui/material/styles/index.js";
@@ -62,4 +62,4 @@ export {
   useColumnsWithActions,
   useRenderedColumns
 };
-//# sourceMappingURL=chunk-UKX3MPB7.js.map
+//# sourceMappingURL=chunk-VYV3JOV5.js.map

package/dist/{chunk-B7CNP5HW.js → chunk-WV62BSWA.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk-WEBEOBN5.js";
 import {
   Text
-} from "./chunk-URHX4FAQ.js";
+} from "./chunk-MKLIMY3D.js";
 import {
   sxRem
 } from "./chunk-YKCAJ2TN.js";
@@ -54,4 +54,4 @@ function PreviewBox({ preview, testIdPrefix }) {
 export {
   PreviewBox
 };
-//# sourceMappingURL=chunk-B7CNP5HW.js.map
+//# sourceMappingURL=chunk-WV62BSWA.js.map