@mui/material 6.0.0-alpha.7 → 6.0.0-alpha.8

package/Fade/Fade.js

@@ -1,8 +1,5 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { Transition } from 'react-transition-group';
@@ -31,23 +28,23 @@ const Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
     exit: theme.transitions.duration.leavingScreen
   };
   const {
-      addEndListener,
-      appear = true,
-      children,
-      easing,
-      in: inProp,
-      onEnter,
-      onEntered,
-      onEntering,
-      onExit,
-      onExited,
-      onExiting,
-      style,
-      timeout = defaultTimeout,
-      // eslint-disable-next-line react/prop-types
-      TransitionComponent = Transition
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    addEndListener,
+    appear = true,
+    children,
+    easing,
+    in: inProp,
+    onEnter,
+    onEntered,
+    onEntering,
+    onExit,
+    onExited,
+    onExiting,
+    style,
+    timeout = defaultTimeout,
+    // eslint-disable-next-line react/prop-types
+    TransitionComponent = Transition,
+    ...other
+  } = props;
   const enableStrictModeCompat = true;
   const nodeRef = React.useRef(null);
   const handleRef = useForkRef(nodeRef, children.ref, ref);
@@ -103,7 +100,7 @@ const Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
       addEndListener(nodeRef.current, next);
     }
   };
-  return /*#__PURE__*/_jsx(TransitionComponent, _extends({
+  return /*#__PURE__*/_jsx(TransitionComponent, {
     appear: appear,
     in: inProp,
     nodeRef: enableStrictModeCompat ? nodeRef : undefined,
@@ -114,18 +111,22 @@ const Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
     onExited: handleExited,
     onExiting: handleExiting,
     addEndListener: handleAddEndListener,
-    timeout: timeout
-  }, other, {
+    timeout: timeout,
+    ...other,
     children: (state, childProps) => {
-      return /*#__PURE__*/React.cloneElement(children, _extends({
-        style: _extends({
+      return /*#__PURE__*/React.cloneElement(children, {
+        style: {
           opacity: 0,
-          visibility: state === 'exited' && !inProp ? 'hidden' : undefined
-        }, styles[state], style, children.props.style),
-        ref: handleRef
-      }, childProps));
+          visibility: state === 'exited' && !inProp ? 'hidden' : undefined,
+          ...styles[state],
+          ...style,
+          ...children.props.style
+        },
+        ref: handleRef,
+        ...childProps
+      });
     }
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? Fade.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/FilledInput/FilledInput.js

@@ -1,8 +1,5 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["disableUnderline", "components", "componentsProps", "fullWidth", "hiddenLabel", "inputComponent", "multiline", "slotProps", "slots", "type"];
 import * as React from 'react';
 import deepmerge from '@mui/utils/deepmerge';
 import refType from '@mui/utils/refType';
@@ -25,7 +22,11 @@ const useUtilityClasses = ownerState => {
     input: ['input']
   };
   const composedClasses = composeClasses(slots, getFilledInputUtilityClass, classes);
-  return _extends({}, classes, composedClasses);
+  return {
+    ...classes,
+    // forward classes to the InputBase
+    ...composedClasses
+  };
 };
 const FilledInputRoot = styled(InputBaseRoot, {
   shouldForwardProp: prop => rootShouldForwardProp(prop) || prop === 'classes',
@@ -116,7 +117,7 @@ const FilledInputRoot = styled(InputBaseRoot, {
           borderBottomStyle: 'dotted'
         }
       }
-    }, ...Object.entries(theme.palette).filter(([, value]) => value.main) // check all the used fields in the style below
+    }, ...Object.entries(theme.palette).filter(([, value]) => value && value.main) // check all the used fields in the style below
     .map(([color]) => ({
       props: {
         disableUnderline: false,
@@ -182,32 +183,33 @@ const FilledInputInput = styled(InputBaseInput, {
   overridesResolver: inputBaseInputOverridesResolver
 })(({
   theme
-}) => _extends({
+}) => ({
   paddingTop: 25,
   paddingRight: 12,
   paddingBottom: 8,
-  paddingLeft: 12
-}, !theme.vars && {
-  '&:-webkit-autofill': {
-    WebkitBoxShadow: theme.palette.mode === 'light' ? null : '0 0 0 100px #266798 inset',
-    WebkitTextFillColor: theme.palette.mode === 'light' ? null : '#fff',
-    caretColor: theme.palette.mode === 'light' ? null : '#fff',
-    borderTopLeftRadius: 'inherit',
-    borderTopRightRadius: 'inherit'
-  }
-}, theme.vars && {
-  '&:-webkit-autofill': {
-    borderTopLeftRadius: 'inherit',
-    borderTopRightRadius: 'inherit'
-  },
-  [theme.getColorSchemeSelector('dark')]: {
+  paddingLeft: 12,
+  ...(!theme.vars && {
     '&:-webkit-autofill': {
-      WebkitBoxShadow: '0 0 0 100px #266798 inset',
-      WebkitTextFillColor: '#fff',
-      caretColor: '#fff'
+      WebkitBoxShadow: theme.palette.mode === 'light' ? null : '0 0 0 100px #266798 inset',
+      WebkitTextFillColor: theme.palette.mode === 'light' ? null : '#fff',
+      caretColor: theme.palette.mode === 'light' ? null : '#fff',
+      borderTopLeftRadius: 'inherit',
+      borderTopRightRadius: 'inherit'
     }
-  }
-}, {
+  }),
+  ...(theme.vars && {
+    '&:-webkit-autofill': {
+      borderTopLeftRadius: 'inherit',
+      borderTopRightRadius: 'inherit'
+    },
+    [theme.getColorSchemeSelector('dark')]: {
+      '&:-webkit-autofill': {
+        WebkitBoxShadow: '0 0 0 100px #266798 inset',
+        WebkitTextFillColor: '#fff',
+        caretColor: '#fff'
+      }
+    }
+  }),
   variants: [{
     props: {
       size: 'small'
@@ -264,25 +266,27 @@ const FilledInput = /*#__PURE__*/React.forwardRef(function FilledInput(inProps,
     name: 'MuiFilledInput'
   });
   const {
-      disableUnderline = false,
-      components = {},
-      componentsProps: componentsPropsProp,
-      fullWidth = false,
-      // declare here to prevent spreading to DOM
-      inputComponent = 'input',
-      multiline = false,
-      slotProps,
-      slots = {},
-      type = 'text'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    disableUnderline = false,
+    components = {},
+    componentsProps: componentsPropsProp,
+    fullWidth = false,
+    hiddenLabel,
+    // declare here to prevent spreading to DOM
+    inputComponent = 'input',
+    multiline = false,
+    slotProps,
+    slots = {},
+    type = 'text',
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     disableUnderline,
     fullWidth,
     inputComponent,
     multiline,
     type
-  });
+  };
   const classes = useUtilityClasses(props);
   const filledInputComponentsProps = {
     root: {
@@ -295,7 +299,7 @@ const FilledInput = /*#__PURE__*/React.forwardRef(function FilledInput(inProps,
   const componentsProps = slotProps ?? componentsPropsProp ? deepmerge(filledInputComponentsProps, slotProps ?? componentsPropsProp) : filledInputComponentsProps;
   const RootSlot = slots.root ?? components.Root ?? FilledInputRoot;
   const InputSlot = slots.input ?? components.Input ?? FilledInputInput;
-  return /*#__PURE__*/_jsx(InputBase, _extends({
+  return /*#__PURE__*/_jsx(InputBase, {
     slots: {
       root: RootSlot,
       input: InputSlot
@@ -305,10 +309,10 @@ const FilledInput = /*#__PURE__*/React.forwardRef(function FilledInput(inProps,
     inputComponent: inputComponent,
     multiline: multiline,
     ref: ref,
-    type: type
-  }, other, {
+    type: type,
+    ...other,
     classes: classes
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? FilledInput.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/FilledInput/filledInputClasses.js

@@ -1,9 +1,11 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import { inputBaseClasses } from '../InputBase';
 export function getFilledInputUtilityClass(slot) {
   return generateUtilityClass('MuiFilledInput', slot);
 }
-const filledInputClasses = _extends({}, inputBaseClasses, generateUtilityClasses('MuiFilledInput', ['root', 'underline', 'input']));
+const filledInputClasses = {
+  ...inputBaseClasses,
+  ...generateUtilityClasses('MuiFilledInput', ['root', 'underline', 'input'])
+};
 export default filledInputClasses;

package/FormControl/FormControl.js

@@ -1,8 +1,5 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["children", "className", "color", "component", "disabled", "error", "focused", "fullWidth", "hiddenLabel", "margin", "required", "size", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -32,7 +29,11 @@ const FormControlRoot = styled('div', {
   overridesResolver: ({
     ownerState
   }, styles) => {
-    return _extends({}, styles.root, styles[`margin${capitalize(ownerState.margin)}`], ownerState.fullWidth && styles.fullWidth);
+    return {
+      ...styles.root,
+      ...styles[`margin${capitalize(ownerState.margin)}`],
+      ...(ownerState.fullWidth && styles.fullWidth)
+    };
   }
 })({
   display: 'inline-flex',
@@ -101,22 +102,23 @@ const FormControl = /*#__PURE__*/React.forwardRef(function FormControl(inProps,
     name: 'MuiFormControl'
   });
   const {
-      children,
-      className,
-      color = 'primary',
-      component = 'div',
-      disabled = false,
-      error = false,
-      focused: visuallyFocused,
-      fullWidth = false,
-      hiddenLabel = false,
-      margin = 'none',
-      required = false,
-      size = 'medium',
-      variant = 'outlined'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    children,
+    className,
+    color = 'primary',
+    component = 'div',
+    disabled = false,
+    error = false,
+    focused: visuallyFocused,
+    fullWidth = false,
+    hiddenLabel = false,
+    margin = 'none',
+    required = false,
+    size = 'medium',
+    variant = 'outlined',
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     color,
     component,
     disabled,
@@ -127,7 +129,7 @@ const FormControl = /*#__PURE__*/React.forwardRef(function FormControl(inProps,
     required,
     size,
     variant
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   const [adornedStart, setAdornedStart] = React.useState(() => {
     // We need to iterate through the children and find the Input in order
@@ -212,14 +214,14 @@ const FormControl = /*#__PURE__*/React.forwardRef(function FormControl(inProps,
   }, [adornedStart, color, disabled, error, filled, focused, fullWidth, hiddenLabel, registerEffect, required, size, variant]);
   return /*#__PURE__*/_jsx(FormControlContext.Provider, {
     value: childContext,
-    children: /*#__PURE__*/_jsx(FormControlRoot, _extends({
+    children: /*#__PURE__*/_jsx(FormControlRoot, {
       as: component,
       ownerState: ownerState,
       className: clsx(classes.root, className),
-      ref: ref
-    }, other, {
+      ref: ref,
+      ...other,
       children: children
-    }))
+    })
   });
 });
 process.env.NODE_ENV !== "production" ? FormControl.propTypes /* remove-proptypes */ = {

package/FormControlLabel/FormControlLabel.js

@@ -1,8 +1,5 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["checked", "className", "componentsProps", "control", "disabled", "disableTypography", "inputRef", "label", "labelPlacement", "name", "onChange", "required", "slots", "slotProps", "value"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -117,18 +114,23 @@ const FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel
     name: 'MuiFormControlLabel'
   });
   const {
-      className,
-      componentsProps = {},
-      control,
-      disabled: disabledProp,
-      disableTypography,
-      label: labelProp,
-      labelPlacement = 'end',
-      required: requiredProp,
-      slots = {},
-      slotProps = {}
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    checked,
+    className,
+    componentsProps = {},
+    control,
+    disabled: disabledProp,
+    disableTypography,
+    inputRef,
+    label: labelProp,
+    labelPlacement = 'end',
+    name,
+    onChange,
+    required: requiredProp,
+    slots = {},
+    slotProps = {},
+    value,
+    ...other
+  } = props;
   const muiFormControl = useFormControl();
   const disabled = disabledProp ?? control.props.disabled ?? muiFormControl?.disabled;
   const required = requiredProp ?? control.props.required;
@@ -146,16 +148,20 @@ const FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel
     muiFormControl,
     states: ['error']
   });
-  const ownerState = _extends({}, props, {
+  const ownerState = {
+    ...props,
     disabled,
     labelPlacement,
     required,
     error: fcs.error
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   const externalForwardedProps = {
     slots,
-    slotProps: _extends({}, componentsProps, slotProps)
+    slotProps: {
+      ...componentsProps,
+      ...slotProps
+    }
   };
   const [TypographySlot, typographySlotProps] = useSlot('typography', {
     elementType: Typography,
@@ -164,18 +170,18 @@ const FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel
   });
   let label = labelProp;
   if (label != null && label.type !== Typography && !disableTypography) {
-    label = /*#__PURE__*/_jsx(TypographySlot, _extends({
-      component: "span"
-    }, typographySlotProps, {
+    label = /*#__PURE__*/_jsx(TypographySlot, {
+      component: "span",
+      ...typographySlotProps,
       className: clsx(classes.label, typographySlotProps?.className),
       children: label
-    }));
+    });
   }
-  return /*#__PURE__*/_jsxs(FormControlLabelRoot, _extends({
+  return /*#__PURE__*/_jsxs(FormControlLabelRoot, {
     className: clsx(classes.root, className),
     ownerState: ownerState,
-    ref: ref
-  }, other, {
+    ref: ref,
+    ...other,
     children: [/*#__PURE__*/React.cloneElement(control, controlProps), required ? /*#__PURE__*/_jsxs(Stack, {
       display: "block",
       children: [label, /*#__PURE__*/_jsxs(AsteriskComponent, {
@@ -185,7 +191,7 @@ const FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel
         children: ["\u2009", '*']
       })]
     }) : label]
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? FormControlLabel.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/FormGroup/FormGroup.js

@@ -1,8 +1,5 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["className", "row"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -58,26 +55,28 @@ const FormGroup = /*#__PURE__*/React.forwardRef(function FormGroup(inProps, ref)
     name: 'MuiFormGroup'
   });
   const {
-      className,
-      row = false
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    className,
+    row = false,
+    ...other
+  } = props;
   const muiFormControl = useFormControl();
   const fcs = formControlState({
     props,
     muiFormControl,
     states: ['error']
   });
-  const ownerState = _extends({}, props, {
+  const ownerState = {
+    ...props,
     row,
     error: fcs.error
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(FormGroupRoot, _extends({
+  return /*#__PURE__*/_jsx(FormGroupRoot, {
     className: clsx(classes.root, className),
     ownerState: ownerState,
-    ref: ref
-  }, other));
+    ref: ref,
+    ...other
+  });
 });
 process.env.NODE_ENV !== "production" ? FormGroup.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/FormHelperText/FormHelperText.js

@@ -1,9 +1,6 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
 var _span;
-const _excluded = ["children", "className", "component", "disabled", "error", "filled", "focused", "margin", "required", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -42,9 +39,9 @@ const FormHelperTextRoot = styled('p', {
   }
 })(({
   theme
-}) => _extends({
-  color: (theme.vars || theme).palette.text.secondary
-}, theme.typography.caption, {
+}) => ({
+  color: (theme.vars || theme).palette.text.secondary,
+  ...theme.typography.caption,
   textAlign: 'left',
   marginTop: 3,
   marginRight: 0,
@@ -79,18 +76,26 @@ const FormHelperText = /*#__PURE__*/React.forwardRef(function FormHelperText(inP
     name: 'MuiFormHelperText'
   });
   const {
-      children,
-      className,
-      component = 'p'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    children,
+    className,
+    component = 'p',
+    disabled,
+    error,
+    filled,
+    focused,
+    margin,
+    required,
+    variant,
+    ...other
+  } = props;
   const muiFormControl = useFormControl();
   const fcs = formControlState({
     props,
     muiFormControl,
     states: ['variant', 'size', 'disabled', 'error', 'filled', 'focused', 'required']
   });
-  const ownerState = _extends({}, props, {
+  const ownerState = {
+    ...props,
     component,
     contained: fcs.variant === 'filled' || fcs.variant === 'outlined',
     variant: fcs.variant,
@@ -100,20 +105,23 @@ const FormHelperText = /*#__PURE__*/React.forwardRef(function FormHelperText(inP
     filled: fcs.filled,
     focused: fcs.focused,
     required: fcs.required
-  });
+  };
+
+  // This issue explains why this is required: https://github.com/mui/material-ui/issues/42184
+  delete ownerState.ownerState;
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(FormHelperTextRoot, _extends({
+  return /*#__PURE__*/_jsx(FormHelperTextRoot, {
     as: component,
-    ownerState: ownerState,
     className: clsx(classes.root, className),
-    ref: ref
-  }, other, {
+    ref: ref,
+    ...other,
+    ownerState: ownerState,
     children: children === ' ' ? // notranslate needed while Google Translate will not fix zero-width space issue
     _span || (_span = /*#__PURE__*/_jsx("span", {
       className: "notranslate",
       children: "\u200B"
     })) : children
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? FormHelperText.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/FormLabel/FormLabel.js

@@ -1,8 +1,5 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["children", "className", "color", "component", "disabled", "error", "filled", "focused", "required"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -36,17 +33,21 @@ export const FormLabelRoot = styled('label', {
   overridesResolver: ({
     ownerState
   }, styles) => {
-    return _extends({}, styles.root, ownerState.color === 'secondary' && styles.colorSecondary, ownerState.filled && styles.filled);
+    return {
+      ...styles.root,
+      ...(ownerState.color === 'secondary' && styles.colorSecondary),
+      ...(ownerState.filled && styles.filled)
+    };
   }
 })(({
   theme
-}) => _extends({
-  color: (theme.vars || theme).palette.text.secondary
-}, theme.typography.body1, {
+}) => ({
+  color: (theme.vars || theme).palette.text.secondary,
+  ...theme.typography.body1,
   lineHeight: '1.4375em',
   padding: 0,
   position: 'relative',
-  variants: [...Object.entries(theme.palette).filter(([, value]) => value.main).map(([color]) => ({
+  variants: [...Object.entries(theme.palette).filter(([, value]) => value && value.main).map(([color]) => ({
     props: {
       color
     },
@@ -84,18 +85,25 @@ const FormLabel = /*#__PURE__*/React.forwardRef(function FormLabel(inProps, ref)
     name: 'MuiFormLabel'
   });
   const {
-      children,
-      className,
-      component = 'label'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    children,
+    className,
+    color,
+    component = 'label',
+    disabled,
+    error,
+    filled,
+    focused,
+    required,
+    ...other
+  } = props;
   const muiFormControl = useFormControl();
   const fcs = formControlState({
     props,
     muiFormControl,
     states: ['color', 'required', 'focused', 'disabled', 'error', 'filled']
   });
-  const ownerState = _extends({}, props, {
+  const ownerState = {
+    ...props,
     color: fcs.color || 'primary',
     component,
     disabled: fcs.disabled,
@@ -103,21 +111,21 @@ const FormLabel = /*#__PURE__*/React.forwardRef(function FormLabel(inProps, ref)
     filled: fcs.filled,
     focused: fcs.focused,
     required: fcs.required
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsxs(FormLabelRoot, _extends({
+  return /*#__PURE__*/_jsxs(FormLabelRoot, {
     as: component,
     ownerState: ownerState,
     className: clsx(classes.root, className),
-    ref: ref
-  }, other, {
+    ref: ref,
+    ...other,
     children: [children, fcs.required && /*#__PURE__*/_jsxs(AsteriskComponent, {
       ownerState: ownerState,
       "aria-hidden": true,
       className: classes.asterisk,
       children: ["\u2009", '*']
     })]
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? FormLabel.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐