@mui/material 5.12.3 → 5.13.1

package/Fab/Fab.js

@@ -1,6 +1,3 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["children", "className", "color", "component", "disabled", "disableFocusRipple", "focusVisibleClassName", "size", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -22,7 +19,11 @@ const useUtilityClasses = ownerState => {
     root: ['root', variant, `size${capitalize(size)}`, color === 'inherit' ? 'colorInherit' : color]
   };
   const composedClasses = composeClasses(slots, getFabUtilityClass, classes);
-  return _extends({}, classes, composedClasses);
+  return {
+    ...classes,
+    // forward the focused, disabled, etc. classes to the ButtonBase
+    ...composedClasses
+  };
 };
 const FabRoot = styled(ButtonBase, {
   name: 'MuiFab',
@@ -39,7 +40,8 @@ const FabRoot = styled(ButtonBase, {
   ownerState
 }) => {
   var _theme$palette$getCon, _theme$palette;
-  return _extends({}, theme.typography.button, {
+  return {
+    ...theme.typography.button,
     minHeight: 36,
     transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color'], {
       duration: theme.transitions.duration.short
@@ -66,48 +68,56 @@ const FabRoot = styled(ButtonBase, {
     },
     [`&.${fabClasses.focusVisible}`]: {
       boxShadow: (theme.vars || theme).shadows[6]
-    }
-  }, ownerState.size === 'small' && {
-    width: 40,
-    height: 40
-  }, ownerState.size === 'medium' && {
-    width: 48,
-    height: 48
-  }, ownerState.variant === 'extended' && {
-    borderRadius: 48 / 2,
-    padding: '0 16px',
-    width: 'auto',
-    minHeight: 'auto',
-    minWidth: 48,
-    height: 48
-  }, ownerState.variant === 'extended' && ownerState.size === 'small' && {
-    width: 'auto',
-    padding: '0 8px',
-    borderRadius: 34 / 2,
-    minWidth: 34,
-    height: 34
-  }, ownerState.variant === 'extended' && ownerState.size === 'medium' && {
-    width: 'auto',
-    padding: '0 16px',
-    borderRadius: 40 / 2,
-    minWidth: 40,
-    height: 40
-  }, ownerState.color === 'inherit' && {
-    color: 'inherit'
-  });
+    },
+    ...(ownerState.size === 'small' && {
+      width: 40,
+      height: 40
+    }),
+    ...(ownerState.size === 'medium' && {
+      width: 48,
+      height: 48
+    }),
+    ...(ownerState.variant === 'extended' && {
+      borderRadius: 48 / 2,
+      padding: '0 16px',
+      width: 'auto',
+      minHeight: 'auto',
+      minWidth: 48,
+      height: 48
+    }),
+    ...(ownerState.variant === 'extended' && ownerState.size === 'small' && {
+      width: 'auto',
+      padding: '0 8px',
+      borderRadius: 34 / 2,
+      minWidth: 34,
+      height: 34
+    }),
+    ...(ownerState.variant === 'extended' && ownerState.size === 'medium' && {
+      width: 'auto',
+      padding: '0 16px',
+      borderRadius: 40 / 2,
+      minWidth: 40,
+      height: 40
+    }),
+    ...(ownerState.color === 'inherit' && {
+      color: 'inherit'
+    })
+  };
 }, ({
   theme,
   ownerState
-}) => _extends({}, ownerState.color !== 'inherit' && ownerState.color !== 'default' && (theme.vars || theme).palette[ownerState.color] != null && {
-  color: (theme.vars || theme).palette[ownerState.color].contrastText,
-  backgroundColor: (theme.vars || theme).palette[ownerState.color].main,
-  '&:hover': {
-    backgroundColor: (theme.vars || theme).palette[ownerState.color].dark,
-    // Reset on touch devices, it doesn't add specificity
-    '@media (hover: none)': {
-      backgroundColor: (theme.vars || theme).palette[ownerState.color].main
+}) => ({
+  ...(ownerState.color !== 'inherit' && ownerState.color !== 'default' && (theme.vars || theme).palette[ownerState.color] != null && {
+    color: (theme.vars || theme).palette[ownerState.color].contrastText,
+    backgroundColor: (theme.vars || theme).palette[ownerState.color].main,
+    '&:hover': {
+      backgroundColor: (theme.vars || theme).palette[ownerState.color].dark,
+      // Reset on touch devices, it doesn't add specificity
+      '@media (hover: none)': {
+        backgroundColor: (theme.vars || theme).palette[ownerState.color].main
+      }
     }
-  }
+  })
 }), ({
   theme
 }) => ({
@@ -123,38 +133,39 @@ const Fab = /*#__PURE__*/React.forwardRef(function Fab(inProps, ref) {
     name: 'MuiFab'
   });
   const {
-      children,
-      className,
-      color = 'default',
-      component = 'button',
-      disabled = false,
-      disableFocusRipple = false,
-      focusVisibleClassName,
-      size = 'large',
-      variant = 'circular'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    children,
+    className,
+    color = 'default',
+    component = 'button',
+    disabled = false,
+    disableFocusRipple = false,
+    focusVisibleClassName,
+    size = 'large',
+    variant = 'circular',
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     color,
     component,
     disabled,
     disableFocusRipple,
     size,
     variant
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(FabRoot, _extends({
+  return /*#__PURE__*/_jsx(FabRoot, {
     className: clsx(classes.root, className),
     component: component,
     disabled: disabled,
     focusRipple: !disableFocusRipple,
     focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
     ownerState: ownerState,
-    ref: ref
-  }, other, {
+    ref: ref,
+    ...other,
     classes: classes,
     children: children
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? Fab.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------

package/Fab/fabClasses.d.ts

@@ -1,26 +1,26 @@
-export interface FabClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if `color="primary"`. */
-    primary: string;
-    /** Styles applied to the root element if `color="secondary"`. */
-    secondary: string;
-    /** Styles applied to the root element if `variant="extended"`. */
-    extended: string;
-    /** Styles applied to the root element if `variant="circular"`. */
-    circular: string;
-    /** State class applied to the ButtonBase root element if the button is keyboard focused. */
-    focusVisible: string;
-    /** State class applied to the root element if `disabled={true}`. */
-    disabled: string;
-    /** Styles applied to the root element if `color="inherit"`. */
-    colorInherit: string;
-    /** Styles applied to the root element if `size="small"``. */
-    sizeSmall: string;
-    /** Styles applied to the root element if `size="medium"``. */
-    sizeMedium: string;
-}
-export type FabClassKey = keyof FabClasses;
-export declare function getFabUtilityClass(slot: string): string;
-declare const fabClasses: FabClasses;
-export default fabClasses;
+export interface FabClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if `color="primary"`. */
+    primary: string;
+    /** Styles applied to the root element if `color="secondary"`. */
+    secondary: string;
+    /** Styles applied to the root element if `variant="extended"`. */
+    extended: string;
+    /** Styles applied to the root element if `variant="circular"`. */
+    circular: string;
+    /** State class applied to the ButtonBase root element if the button is keyboard focused. */
+    focusVisible: string;
+    /** State class applied to the root element if `disabled={true}`. */
+    disabled: string;
+    /** Styles applied to the root element if `color="inherit"`. */
+    colorInherit: string;
+    /** Styles applied to the root element if `size="small"``. */
+    sizeSmall: string;
+    /** Styles applied to the root element if `size="medium"``. */
+    sizeMedium: string;
+}
+export type FabClassKey = keyof FabClasses;
+export declare function getFabUtilityClass(slot: string): string;
+declare const fabClasses: FabClasses;
+export default fabClasses;

package/Fade/Fade.js

@@ -1,6 +1,3 @@
-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';
@@ -29,23 +26,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);
@@ -101,7 +98,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,
@@ -112,18 +109,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,6 +1,3 @@
-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 { refType, deepmerge } from '@mui/utils';
 import PropTypes from 'prop-types';
@@ -21,7 +18,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',
@@ -43,7 +44,7 @@ const FilledInputRoot = styled(InputBaseRoot, {
   const backgroundColor = light ? 'rgba(0, 0, 0, 0.06)' : 'rgba(255, 255, 255, 0.09)';
   const hoverBackground = light ? 'rgba(0, 0, 0, 0.09)' : 'rgba(255, 255, 255, 0.13)';
   const disabledBackground = light ? 'rgba(0, 0, 0, 0.12)' : 'rgba(255, 255, 255, 0.12)';
-  return _extends({
+  return {
     position: 'relative',
     backgroundColor: theme.vars ? theme.vars.palette.FilledInput.bg : backgroundColor,
     borderTopLeftRadius: (theme.vars || theme).shape.borderRadius,
@@ -64,67 +65,73 @@ const FilledInputRoot = styled(InputBaseRoot, {
     },
     [`&.${filledInputClasses.disabled}`]: {
       backgroundColor: theme.vars ? theme.vars.palette.FilledInput.disabledBg : disabledBackground
-    }
-  }, !ownerState.disableUnderline && {
-    '&:after': {
-      borderBottom: `2px solid ${(_palette = (theme.vars || theme).palette[ownerState.color || 'primary']) == null ? void 0 : _palette.main}`,
-      left: 0,
-      bottom: 0,
-      // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
-      content: '""',
-      position: 'absolute',
-      right: 0,
-      transform: 'scaleX(0)',
-      transition: theme.transitions.create('transform', {
-        duration: theme.transitions.duration.shorter,
-        easing: theme.transitions.easing.easeOut
-      }),
-      pointerEvents: 'none' // Transparent to the hover style.
     },
+    ...(!ownerState.disableUnderline && {
+      '&:after': {
+        borderBottom: `2px solid ${(_palette = (theme.vars || theme).palette[ownerState.color || 'primary']) == null ? void 0 : _palette.main}`,
+        left: 0,
+        bottom: 0,
+        // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
+        content: '""',
+        position: 'absolute',
+        right: 0,
+        transform: 'scaleX(0)',
+        transition: theme.transitions.create('transform', {
+          duration: theme.transitions.duration.shorter,
+          easing: theme.transitions.easing.easeOut
+        }),
+        pointerEvents: 'none' // Transparent to the hover style.
+      },
 
-    [`&.${filledInputClasses.focused}:after`]: {
-      // translateX(0) is a workaround for Safari transform scale bug
-      // See https://github.com/mui/material-ui/issues/31766
-      transform: 'scaleX(1) translateX(0)'
-    },
-    [`&.${filledInputClasses.error}`]: {
-      '&:before, &:after': {
-        borderBottomColor: (theme.vars || theme).palette.error.main
+      [`&.${filledInputClasses.focused}:after`]: {
+        // translateX(0) is a workaround for Safari transform scale bug
+        // See https://github.com/mui/material-ui/issues/31766
+        transform: 'scaleX(1) translateX(0)'
+      },
+      [`&.${filledInputClasses.error}`]: {
+        '&:before, &:after': {
+          borderBottomColor: (theme.vars || theme).palette.error.main
+        }
+      },
+      '&:before': {
+        borderBottom: `1px solid ${theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / ${theme.vars.opacity.inputUnderline})` : bottomLineColor}`,
+        left: 0,
+        bottom: 0,
+        // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
+        content: '"\\00a0"',
+        position: 'absolute',
+        right: 0,
+        transition: theme.transitions.create('border-bottom-color', {
+          duration: theme.transitions.duration.shorter
+        }),
+        pointerEvents: 'none' // Transparent to the hover style.
+      },
+
+      [`&:hover:not(.${filledInputClasses.disabled}, .${filledInputClasses.error}):before`]: {
+        borderBottom: `1px solid ${(theme.vars || theme).palette.text.primary}`
+      },
+      [`&.${filledInputClasses.disabled}:before`]: {
+        borderBottomStyle: 'dotted'
       }
-    },
-    '&:before': {
-      borderBottom: `1px solid ${theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / ${theme.vars.opacity.inputUnderline})` : bottomLineColor}`,
-      left: 0,
-      bottom: 0,
-      // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
-      content: '"\\00a0"',
-      position: 'absolute',
-      right: 0,
-      transition: theme.transitions.create('border-bottom-color', {
-        duration: theme.transitions.duration.shorter
+    }),
+    ...(ownerState.startAdornment && {
+      paddingLeft: 12
+    }),
+    ...(ownerState.endAdornment && {
+      paddingRight: 12
+    }),
+    ...(ownerState.multiline && {
+      padding: '25px 12px 8px',
+      ...(ownerState.size === 'small' && {
+        paddingTop: 21,
+        paddingBottom: 4
       }),
-      pointerEvents: 'none' // Transparent to the hover style.
-    },
-
-    [`&:hover:not(.${filledInputClasses.disabled}, .${filledInputClasses.error}):before`]: {
-      borderBottom: `1px solid ${(theme.vars || theme).palette.text.primary}`
-    },
-    [`&.${filledInputClasses.disabled}:before`]: {
-      borderBottomStyle: 'dotted'
-    }
-  }, ownerState.startAdornment && {
-    paddingLeft: 12
-  }, ownerState.endAdornment && {
-    paddingRight: 12
-  }, ownerState.multiline && _extends({
-    padding: '25px 12px 8px'
-  }, ownerState.size === 'small' && {
-    paddingTop: 21,
-    paddingBottom: 4
-  }, ownerState.hiddenLabel && {
-    paddingTop: 16,
-    paddingBottom: 17
-  }));
+      ...(ownerState.hiddenLabel && {
+        paddingTop: 16,
+        paddingBottom: 17
+      })
+    })
+  };
 });
 const FilledInputInput = styled(InputBaseInput, {
   name: 'MuiFilledInput',
@@ -133,49 +140,57 @@ const FilledInputInput = styled(InputBaseInput, {
 })(({
   theme,
   ownerState
-}) => _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'
     }
-  }
-}, ownerState.size === 'small' && {
-  paddingTop: 21,
-  paddingBottom: 4
-}, ownerState.hiddenLabel && {
-  paddingTop: 16,
-  paddingBottom: 17
-}, ownerState.multiline && {
-  paddingTop: 0,
-  paddingBottom: 0,
-  paddingLeft: 0,
-  paddingRight: 0
-}, ownerState.startAdornment && {
-  paddingLeft: 0
-}, ownerState.endAdornment && {
-  paddingRight: 0
-}, ownerState.hiddenLabel && ownerState.size === 'small' && {
-  paddingTop: 8,
-  paddingBottom: 9
+  }),
+  ...(theme.vars && {
+    '&:-webkit-autofill': {
+      borderTopLeftRadius: 'inherit',
+      borderTopRightRadius: 'inherit'
+    },
+    [theme.getColorSchemeSelector('dark')]: {
+      '&:-webkit-autofill': {
+        WebkitBoxShadow: '0 0 0 100px #266798 inset',
+        WebkitTextFillColor: '#fff',
+        caretColor: '#fff'
+      }
+    }
+  }),
+  ...(ownerState.size === 'small' && {
+    paddingTop: 21,
+    paddingBottom: 4
+  }),
+  ...(ownerState.hiddenLabel && {
+    paddingTop: 16,
+    paddingBottom: 17
+  }),
+  ...(ownerState.multiline && {
+    paddingTop: 0,
+    paddingBottom: 0,
+    paddingLeft: 0,
+    paddingRight: 0
+  }),
+  ...(ownerState.startAdornment && {
+    paddingLeft: 0
+  }),
+  ...(ownerState.endAdornment && {
+    paddingRight: 0
+  }),
+  ...(ownerState.hiddenLabel && ownerState.size === 'small' && {
+    paddingTop: 8,
+    paddingBottom: 9
+  })
 }));
 const FilledInput = /*#__PURE__*/React.forwardRef(function FilledInput(inProps, ref) {
   var _ref, _slots$root, _ref2, _slots$input;
@@ -184,23 +199,26 @@ const FilledInput = /*#__PURE__*/React.forwardRef(function FilledInput(inProps,
     name: 'MuiFilledInput'
   });
   const {
-      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,
+    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,
     fullWidth,
     inputComponent,
     multiline,
     type
-  });
+  };
   const classes = useUtilityClasses(props);
   const filledInputComponentsProps = {
     root: {
@@ -213,7 +231,7 @@ const FilledInput = /*#__PURE__*/React.forwardRef(function FilledInput(inProps,
   const componentsProps = (slotProps != null ? slotProps : componentsPropsProp) ? deepmerge(slotProps != null ? slotProps : componentsPropsProp, filledInputComponentsProps) : filledInputComponentsProps;
   const RootSlot = (_ref = (_slots$root = slots.root) != null ? _slots$root : components.Root) != null ? _ref : FilledInputRoot;
   const InputSlot = (_ref2 = (_slots$input = slots.input) != null ? _slots$input : components.Input) != null ? _ref2 : FilledInputInput;
-  return /*#__PURE__*/_jsx(InputBase, _extends({
+  return /*#__PURE__*/_jsx(InputBase, {
     slots: {
       root: RootSlot,
       input: InputSlot
@@ -223,10 +241,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 --------------------------------