\r\n * * Controls the padding of the `Dialog` and grid gap between child elements\r\n * * `standard`: The default spacing\r\n * * `none`: Removes all spacing styles, allowing for complete style customization through the `classes` prop\r\n * * `object`: Allows for more fine-grained spacing customization. See [container customization documentation](#/utilities/spacing#using-customizations-for-fine-grained-container-spacing-control)\r\n * for more details.\r\n * * `responsive` (bool): **true** | false\r\n * * By default, `Dialog` spacing adjusts responsively to its viewport. Set to `false` to disable responsiveness.\r\n * * `outerSpacing` (bool): **true** | false\r\n * * If set to `false`, removes the dialog's outer padding (but retains the space between its subcomponents)\r\n */\r\n spacingOptions: PropTypes.shape({\r\n spacing: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),\r\n responsive: PropTypes.bool,\r\n outerSpacing: PropTypes.bool\r\n })\r\n};\r\n\r\nDialog.defaultProps = {\r\n disableBackdropClick: false,\r\n disableEscapeKeyDown: false,\r\n fullScreen: false,\r\n fullWidth: false,\r\n maxWidth: 'sm',\r\n scroll: 'paper',\r\n showTitleBarClose: true\r\n};\r\n\r\nexport default withEDSContext(withStyles(styles)(Dialog));","function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }\r\n\r\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\r\n\r\nimport React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { default as withStyles } from '../styles';\r\nimport { default as MuiDialogActions } from '@material-ui/core/DialogActions';\r\nimport { spacing30 } from '../styles/tokens';\r\n\r\nvar styles = function styles(theme) {\r\n var _button;\r\n\r\n return {\r\n root: _defineProperty({\r\n display: 'flex',\r\n flexDirection: 'column',\r\n margin: 0,\r\n padding: 0\r\n }, theme.breakpoints.up('sm'), {\r\n justifyContent: 'flex-end',\r\n flexDirection: 'row'\r\n }),\r\n spacing: {\r\n '& > button': (_button = {\r\n margin: spacing30 + ' 0',\r\n width: '100%'\r\n }, _defineProperty(_button, theme.breakpoints.up('sm'), {\r\n margin: '0 ' + spacing30,\r\n width: 'auto'\r\n }), _defineProperty(_button, theme.breakpoints.down('xs'), {\r\n '&:not(:first-child)': {\r\n marginLeft: 0 // since buttons are stacked in sm viewports, no need for margin\r\n }\r\n }), _button)\r\n }\r\n\r\n };\r\n};\r\n\r\n/**\r\n * DialogActions are controls that live within a Dialog.\r\n */\r\nvar DialogActions = React.forwardRef(function (props, ref) {\r\n var children = props.children,\r\n classesProp = props.classes,\r\n rest = _objectWithoutProperties(props, ['children', 'classes']);\r\n\r\n var classes = {\r\n root: classesProp.root,\r\n spacing: classesProp.spacing\r\n };\r\n\r\n return React.createElement(\r\n MuiDialogActions,\r\n Object.assign({ classes: classes }, rest, { ref: ref }),\r\n children\r\n );\r\n});\r\n\r\nDialogActions.muiName = 'DialogActions';\r\nDialogActions.displayName = 'DialogActions';\r\n\r\nDialogActions.propTypes = {\r\n /**\r\n * The content of the component.\r\n */\r\n children: PropTypes.node,\r\n /**\r\n * Override or extend the styles applied to the component.\r\n */\r\n classes: PropTypes.object,\r\n /**\r\n * @ignore\r\n */\r\n className: PropTypes.string,\r\n /**\r\n * If `true`, the dialog actions do not have additional margin.\r\n */\r\n disableSpacing: PropTypes.bool\r\n};\r\n\r\nDialogActions.defaultProps = {\r\n disableSpacing: false\r\n};\r\n\r\nexport default withStyles(styles, { index: 0 })(DialogActions);","function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }\r\n\r\nimport React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { default as withStyles } from '../styles';\r\nimport { default as MuiDialogContent } from '@material-ui/core/DialogContent';\r\nimport { spacing20 } from '../styles/tokens';\r\n\r\nvar styles = function styles(theme) {\r\n return {\r\n root: {\r\n padding: spacing20\r\n }\r\n };\r\n};\r\n\r\n/**\r\n * DialogContent is the main content that lives within a Dialog.\r\n */\r\nvar DialogContent = React.forwardRef(function (props, ref) {\r\n var children = props.children,\r\n classesProp = props.classes,\r\n rest = _objectWithoutProperties(props, ['children', 'classes']);\r\n\r\n var classes = {\r\n root: classesProp.root\r\n };\r\n\r\n return React.createElement(\r\n MuiDialogContent,\r\n Object.assign({ classes: classes }, rest, { ref: ref }),\r\n children\r\n );\r\n});\r\n\r\nDialogContent.muiName = 'DialogContent';\r\nDialogContent.displayName = 'DialogContent';\r\n\r\nDialogContent.propTypes = {\r\n /**\r\n * The content of the component.\r\n */\r\n children: PropTypes.node,\r\n /**\r\n * Override or extend the styles applied to the component.\r\n */\r\n classes: PropTypes.object,\r\n /**\r\n * @ignore\r\n */\r\n className: PropTypes.string\r\n};\r\n\r\nexport default withStyles(styles)(DialogContent);","function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }\r\n\r\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\r\n\r\nimport React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { default as withStyles } from '../styles';\r\nimport { default as MuiDialogContentText } from '@material-ui/core/DialogContentText';\r\nimport { spacing40 } from '../styles/tokens';\r\n\r\nvar styles = function styles(theme) {\r\n return {\r\n root: _defineProperty({\r\n fontFamily: theme.typography.fontFamily,\r\n fontSize: theme.typography.body2.fontSize,\r\n fontWeight: theme.typography.fontWeightRegular,\r\n lineHeight: theme.typography.body2.lineHeight,\r\n marginBottom: spacing40\r\n }, theme.breakpoints.up('sm'), {\r\n marginBottom: spacing40\r\n })\r\n };\r\n};\r\n\r\n/**\r\n * DialogContentText is the text of the main content within a Dialog.\r\n */\r\nvar DialogContentText = React.forwardRef(function (props, ref) {\r\n var children = props.children,\r\n classesProp = props.classes,\r\n rest = _objectWithoutProperties(props, ['children', 'classes']);\r\n\r\n var classes = {\r\n root: classesProp.root\r\n };\r\n\r\n return React.createElement(\r\n MuiDialogContentText,\r\n Object.assign({ classes: classes }, rest, { ref: ref }),\r\n children\r\n );\r\n});\r\n\r\nDialogContentText.muiName = 'DialogContentText';\r\nDialogContentText.displayName = 'DialogContentText';\r\n\r\nDialogContentText.propTypes = {\r\n /**\r\n * The content of the component.\r\n */\r\n children: PropTypes.node,\r\n /**\r\n * Override or extend the styles applied to the component.\r\n */\r\n classes: PropTypes.object,\r\n /**\r\n * @ignore\r\n */\r\n className: PropTypes.string\r\n};\r\n\r\nexport default withStyles(styles)(DialogContentText);","function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }\r\n\r\nimport React from 'react';\r\nimport { default as MuiBadge } from '@material-ui/core/Badge';\r\nimport makeStyles from '../makeStyles';\r\nimport PropTypes from 'prop-types';\r\nimport { spacing20, spacing40, sizingLarge, sizingXLarge, borderRadiusLarge, borderWidthThin, colorGlobalBorderDefault } from '../styles/tokens';\r\n\r\nvar useStyles = makeStyles(function (theme) {\r\n return {\r\n badge: {\r\n color: theme.palette.status.default.text,\r\n background: theme.palette.grey[100],\r\n minWidth: sizingXLarge,\r\n width: 'auto',\r\n height: sizingLarge,\r\n fontSize: theme.typography.body2.fontSize,\r\n position: 'initial',\r\n marginLeft: spacing40,\r\n marginTop: '-' + spacing20,\r\n padding: '0 0.75rem',\r\n border: borderWidthThin + ' solid ' + colorGlobalBorderDefault,\r\n borderRadius: borderRadiusLarge,\r\n transform: 'none'\r\n }\r\n };\r\n});\r\n\r\n/**\r\n * Use `Badge` to indicate a numerical value or count.\r\n * @done true\r\n * @updated false\r\n * @versionAdded v0.0.6\r\n * @examples\r\n * BadgeExamples\r\n * NotificationBadgeExamples\r\n */\r\nvar Badge = React.forwardRef(function (props, ref) {\r\n var maxvalue = props.maxvalue,\r\n rest = _objectWithoutProperties(props, ['maxvalue']);\r\n\r\n var classes = useStyles(props);\r\n\r\n var classOverrides = {\r\n badge: classes.badge\r\n };\r\n\r\n return React.createElement(MuiBadge, Object.assign({}, rest, {\r\n max: maxvalue,\r\n classes: classOverrides,\r\n ref: ref\r\n\r\n // if a badge has no content, the invisible flag is automatically\r\n // set to 'true'; we never want a badge to be invisible, so make sure it's\r\n // always false\r\n , invisible: false\r\n }));\r\n});\r\n\r\nBadge.muiName = 'Badge';\r\n\r\nBadge.propTypes = {\r\n /**\r\n * The content rendered within the badge.\r\n */\r\n badgeContent: PropTypes.number.isRequired,\r\n /**\r\n * The badge will be added relative to this node.\r\n */\r\n children: PropTypes.node.isRequired,\r\n /**\r\n * Override or extend the styles applied to the component.\r\n */\r\n classes: PropTypes.object,\r\n /**\r\n * The component used for the root node. Either a string to use a DOM element or a component.\r\n */\r\n component: PropTypes.oneOf(['string', 'func']),\r\n /**\r\n * Max value of content rendered within the badge.\r\n */\r\n maxvalue: PropTypes.number\r\n};\r\n\r\nBadge.displayName = 'Badge';\r\n\r\nBadge.defaultProps = {\r\n maxvalue: 999\r\n};\r\n\r\nexport default Badge;","function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\r\n\r\nfunction _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }\r\n\r\nimport React from 'react';\r\nimport classNames from 'classnames';\r\nimport { default as MuiBadge } from '@material-ui/core/Badge';\r\nimport { default as withStyles } from '../styles';\r\nimport PropTypes from 'prop-types';\r\nimport { borderWidthThin, spacing20, borderRadiusLarge } from '../styles/tokens';\r\n\r\nvar styles = function styles(theme) {\r\n return {\r\n badge: {\r\n color: theme.palette.grey[200],\r\n background: theme.palette.status.error.fill,\r\n top: '-0.02rem',\r\n right: '0.05rem',\r\n width: 'auto',\r\n fontSize: theme.typography.caption.fontSize,\r\n borderRadius: borderRadiusLarge,\r\n padding: '0 ' + spacing20,\r\n border: borderWidthThin + ' solid ' + theme.palette.grey[200]\r\n },\r\n noBadgeContent: {\r\n '& $badge': {\r\n height: '0.625rem',\r\n width: '0.625rem',\r\n display: 'inline-block',\r\n minWidth: 'auto',\r\n padding: 0\r\n }\r\n }\r\n };\r\n};\r\n\r\n/**\r\n * Use a `NotificationBadge` to indicate a new notification, change, or update.\r\n */\r\nvar NotificationBadge = React.forwardRef(function (props, ref) {\r\n var classes = props.classes,\r\n badgeContent = props.badgeContent,\r\n maxvalue = props.maxvalue,\r\n rest = _objectWithoutProperties(props, ['classes', 'badgeContent', 'maxvalue']);\r\n\r\n var classOverrides = {\r\n badge: classes.badge\r\n };\r\n\r\n return React.createElement(MuiBadge, Object.assign({}, rest, {\r\n badgeContent: badgeContent || ' ',\r\n classes: classOverrides,\r\n invisible: false,\r\n max: maxvalue,\r\n className: classNames(rest.className, _defineProperty({}, classes.noBadgeContent, !badgeContent)),\r\n ref: ref\r\n }));\r\n});\r\n\r\nNotificationBadge.muiName = 'NotificationBadge';\r\nNotificationBadge.displayName = 'NotificationBadge';\r\n\r\nNotificationBadge.propTypes = {\r\n /**\r\n * The content rendered within the badge.\r\n */\r\n badgeContent: PropTypes.number,\r\n /**\r\n * The badge will be added relative to this node.\r\n */\r\n children: PropTypes.node.isRequired,\r\n /**\r\n * Override or extend the styles applied to the component.\r\n */\r\n classes: PropTypes.object,\r\n /**\r\n * Max value of content rendered within the badge.\r\n */\r\n maxvalue: PropTypes.number\r\n};\r\n\r\nNotificationBadge.defaultProps = {\r\n maxvalue: 999\r\n};\r\n\r\nexport default withStyles(styles)(NotificationBadge);","var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i[\"return\"]) _i[\"return\"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError(\"Invalid attempt to destructure non-iterable instance\"); } }; }();\r\n\r\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\r\n\r\nfunction _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }\r\n\r\nimport React, { createContext, useEffect } from 'react';\r\nimport { default as MuiCard } from '@material-ui/core/Card';\r\nimport { useSpacing } from './../globalSpacing';\r\nimport { default as withStyles } from '../styles';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\nimport { borderRadiusMedium, sizingSmall } from '../styles/tokens';\r\n\r\nvar styles = function styles(theme) {\r\n return {\r\n root: {\r\n borderRadius: borderRadiusMedium,\r\n overflow: 'inherit',\r\n\r\n // added this to ensure that the contents of a card don't exceed the width of the card itself;\r\n // you can reproduce this behavior by putting a inside of a and filling it\r\n // up with stuff; it's go beyond the bounds of its width\r\n //\r\n // see https://stackoverflow.com/questions/43311943/prevent-content-from-expanding-grid-items\r\n // for more details\r\n gridTemplateColumns: 'minmax(0, 1fr)'\r\n\r\n },\r\n accent: {\r\n borderTopWidth: sizingSmall,\r\n borderTopStyle: 'solid',\r\n paddingTop: 0\r\n },\r\n accentPrimary: {\r\n borderTopColor: theme.palette.primary.main\r\n },\r\n accentSecondary: {\r\n borderTopColor: theme.palette.secondary.main\r\n }\r\n };\r\n};\r\n\r\nvar CardContext = createContext();\r\n\r\n/**\r\n * Use `Card` to display a group of similar content on a page.\r\n * @done true\r\n * @updated false\r\n * @versionAdded v0.0.3\r\n * @examples\r\n * SimpleCard\r\n * SubtitleHeaderActionsCard\r\n * VisuallyAccentedCard\r\n * ComplexCard\r\n * CardActionsCard\r\n * LegacySpacingCard\r\n * CustomSpacingCard\r\n * CustomSpacingWithSpacingOptionsAPI\r\n */\r\nvar Card = React.forwardRef(function (props, ref) {\r\n var _classNames;\r\n\r\n var accent = props.accent,\r\n classes = props.classes,\r\n padding = props.padding,\r\n responsive = props.responsive,\r\n spacingOptionsLocal = props.spacingOptions,\r\n legacySpacingMode = props.legacySpacingMode,\r\n rest = _objectWithoutProperties(props, ['accent', 'classes', 'padding', 'responsive', 'spacingOptions', 'legacySpacingMode']);\r\n\r\n var _useSpacing = useSpacing(spacingOptionsLocal),\r\n _useSpacing2 = _slicedToArray(_useSpacing, 3),\r\n spacingStyles = _useSpacing2[0],\r\n options = _useSpacing2[1],\r\n setSpacingOptions = _useSpacing2[2];\r\n\r\n var spacingOptions = legacySpacingMode ? {} : options;\r\n var spacingStylesLocal = legacySpacingMode ? {} : spacingStyles;\r\n var classOverrides = classNames(classes.root, spacingStylesLocal, (_classNames = {}, _defineProperty(_classNames, classes.accent, ['primary', 'secondary'].indexOf(accent) !== -1), _defineProperty(_classNames, classes.accentPrimary, accent === 'primary'), _defineProperty(_classNames, classes.accentSecondary, accent === 'secondary'), _classNames));\r\n\r\n useEffect(function () {\r\n setSpacingOptions(spacingOptionsLocal);\r\n }, [spacingOptionsLocal]); // eslint-disable-line\r\n\r\n return React.createElement(\r\n CardContext.Provider,\r\n {\r\n value: {\r\n padding: padding,\r\n responsive: responsive,\r\n spacingOptions: spacingOptions\r\n }\r\n },\r\n React.createElement(MuiCard, Object.assign({}, rest, {\r\n classes: {\r\n root: classOverrides\r\n },\r\n ref: ref\r\n }))\r\n );\r\n});\r\n\r\nCard.muiName = 'Card';\r\nCard.displayName = 'Card';\r\n\r\nCard.propTypes = {\r\n /**\r\n * Customize the color of accent border that is added to the card.\r\n *\r\n * The options are `primary` and `secondary`. The `Card` will render with an\r\n * accented top border color that corresponds to the theme's primary and secondary\r\n * color (i.e. `primary` will render a `Card` with a `primary` accent border).\r\n */\r\n accent: PropTypes.oneOf(['primary', 'secondary']),\r\n /**\r\n * If `true`, the card will use raised visual styling\r\n */\r\n raised: PropTypes.bool,\r\n /**\r\n * Override or extend the styles applied to the component.\r\n */\r\n classes: PropTypes.object,\r\n /**\r\n * @ignore\r\n */\r\n className: PropTypes.string,\r\n /**\r\n * @ignore\r\n */\r\n elevation: PropTypes.number,\r\n /**\r\n * If `true`, uses the old (padding-based) spacing infrastructure.\\\r\n * If `false`, uses the new (CSS grid-based) spacing infrastructure.\r\n */\r\n legacySpacingMode: PropTypes.bool,\r\n /**\r\n * Customize the spacing for Card's subcomponents. Standard, dense, and none\r\n * apply consistent padding across all viewports, per subcomponent.\r\n *\r\n * **NOTE:** Only applicable when `legacySpacingMode` is `true`.\r\n */\r\n padding: PropTypes.oneOf(['standard', 'dense', 'none']),\r\n /**\r\n * If `true`, `responsive` combines with `padding` to provide a responsive\r\n * spacing solution, if padding is set to either `standard` or `dense`.\r\n *\r\n * **NOTE:** Only applicable when `legacySpacingMode` is `true`.\r\n */\r\n responsive: PropTypes.bool,\r\n /**\r\n * Provides several attributes to control `Card` spacing.\r\n *\r\n * Available options are:\r\n *\r\n * * `spacing` (string): **'standard'** | 'none' | \\\r\n * * Controls the padding of the `Card` and grid gap between child elements\r\n * * `standard`: The default spacing\r\n * * `none`: Removes all spacing styles, allowing for complete style customization through the `classes` prop\r\n * * `object`: Allows for more fine-grained spacing customization. See [container customization documentation](#/utilities/spacing#using-customizations-for-fine-grained-container-spacing-control)\r\n * for more details.\r\n * * `responsive` (bool): **true** | false\r\n * * By default, `Card` spacing adjusts responsively to its viewport. Set to `false` to disable responsiveness.\r\n * * `outerSpacing` (bool): **true** | false\r\n * * If set to `false`, removes the card's outer padding (but retains the space between its subcomponents)\r\n */\r\n spacingOptions: PropTypes.shape({\r\n spacing: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),\r\n responsive: PropTypes.bool,\r\n outerSpacing: PropTypes.bool\r\n })\r\n};\r\n\r\nCard.defaultProps = {\r\n elevation: 5,\r\n padding: 'standard',\r\n responsive: true,\r\n legacySpacingMode: false\r\n};\r\n\r\nexport { CardContext };\r\nexport default withStyles(styles)(Card);","function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\r\n\r\nimport { getSpacingStyles, spacingVariant, spacingType } from './../../globalSpacing';\r\nimport isEmpty from 'lodash/isEmpty';\r\n\r\nexport default function (context, classes) {\r\n var _ref;\r\n\r\n var padding = context.padding,\r\n spacingOptions = context.spacingOptions,\r\n responsive = context.responsive;\r\n\r\n\r\n return isEmpty(spacingOptions) ? (_ref = {}, _defineProperty(_ref, classes.standard, padding === spacingVariant.STANDARD), _defineProperty(_ref, classes.none, padding === spacingVariant.NONE), _defineProperty(_ref, classes.responsive, responsive && padding !== spacingVariant.NONE), _ref) : getSpacingStyles({}, spacingType.COMPONENT_RESET);\r\n};","function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }\r\n\r\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\r\n\r\nimport React, { useContext } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { default as withStyles } from '../styles';\r\nimport { default as MuiCardActions } from '@material-ui/core/CardActions';\r\nimport getLegacySpacingModeCss from './internal/getLegacySpacingModeCss';\r\nimport { CardContext } from './Card';\r\nimport classNames from 'classnames';\r\nimport { spacing40, spacing30 } from '../styles/tokens';\r\n\r\nvar styles = function styles(theme) {\r\n return {\r\n root: {},\r\n standard: {\r\n padding: spacing40\r\n },\r\n dense: {\r\n padding: '0.75rem ' + spacing30\r\n },\r\n none: {\r\n padding: 0\r\n },\r\n responsive: _defineProperty({}, theme.breakpoints.only('xs'), {\r\n padding: spacing30 + ' 0'\r\n })\r\n };\r\n};\r\n\r\n/**\r\n * CardActions component for displaying actions on a Card component\r\n */\r\nvar CardActions = React.forwardRef(function (props, ref) {\r\n var classes = props.classes,\r\n rest = _objectWithoutProperties(props, ['classes']);\r\n\r\n var classesOverrides = getLegacySpacingModeCss(useContext(CardContext), classes);\r\n\r\n var classOverrides = {\r\n root: classNames(classes.root, classesOverrides)\r\n };\r\n\r\n return React.createElement(MuiCardActions, Object.assign({}, rest, {\r\n classes: classOverrides,\r\n ref: ref\r\n }));\r\n});\r\n\r\nCardActions.muiName = 'CardActions';\r\nCardActions.displayName = 'CardActions';\r\n\r\nCardActions.propTypes = {\r\n /**\r\n * The content of the component.\r\n */\r\n children: PropTypes.node,\r\n /**\r\n * Override or extend the styles applied to the component.\r\n */\r\n classes: PropTypes.object,\r\n /**\r\n * @ignore\r\n */\r\n className: PropTypes.string,\r\n /**\r\n * If `true`, the card actions do not have additional margin.\r\n */\r\n disableSpacing: PropTypes.bool\r\n};\r\n\r\n// If default props are needed, they must be set here\r\nCardActions.defaultProps = {\r\n disableSpacing: false\r\n};\r\n\r\nexport default withStyles(styles)(CardActions);","function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }\r\n\r\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\r\n\r\nimport React, { useContext } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport cn from 'classnames';\r\nimport get from 'lodash/get';\r\n\r\nimport { default as MuiCardContent } from '@material-ui/core/CardContent';\r\nimport { CardContext } from './Card';\r\nimport getLegacySpacingModeCss from './internal/getLegacySpacingModeCss';\r\nimport { default as withStyles } from '../styles';\r\nimport { useSpacing } from './../globalSpacing';\r\n\r\nimport { spacing60, spacing50, spacing40, spacing30, borderRadiusMedium } from '../styles/tokens';\r\n\r\nvar borderRadiusStyles = {\r\n borderBottomLeftRadius: borderRadiusMedium,\r\n borderBottomRightRadius: borderRadiusMedium\r\n};\r\n\r\nvar styles = function styles(theme) {\r\n var _responsive;\r\n\r\n return {\r\n root: {\r\n '&:last-child': {\r\n padding: 0\r\n }\r\n },\r\n standard: {\r\n padding: spacing40 + ' ' + spacing60,\r\n '&:last-child': {\r\n padding: spacing40 + ' ' + spacing60\r\n }\r\n },\r\n dense: {\r\n padding: '0.75rem ' + spacing50,\r\n '&:last-child': {\r\n padding: '0.75rem ' + spacing50\r\n }\r\n },\r\n none: {\r\n padding: 0,\r\n '&:last-child': {\r\n padding: 0\r\n }\r\n },\r\n responsive: (_responsive = {}, _defineProperty(_responsive, theme.breakpoints.only('xs'), {\r\n padding: spacing30 + ' ' + spacing40\r\n }), _defineProperty(_responsive, '&:last-child', _defineProperty({}, theme.breakpoints.only('xs'), {\r\n padding: spacing30 + ' ' + spacing40\r\n })), _responsive),\r\n negateSpacing: Object.assign({}, borderRadiusStyles, {\r\n '& > *:last-child': Object.assign({}, borderRadiusStyles)\r\n })\r\n };\r\n};\r\n\r\n/**\r\n * CardContent component for displaying content on a Card component\r\n */\r\nvar CardContent = React.forwardRef(function (props, ref) {\r\n var classes = props.classes,\r\n spacingOptions = props.spacingOptions,\r\n rest = _objectWithoutProperties(props, ['classes', 'spacingOptions']);\r\n\r\n var negateSpacingAll = get(spacingOptions, 'negateSpacingAll');\r\n var negateSpacingStyles = useSpacing({ spacing: {\r\n style: {\r\n margin: '0 -' + spacing40 + ' -' + spacing40,\r\n display: 'block'\r\n },\r\n lg: {\r\n style: {\r\n margin: '0 -' + spacing50 + ' -' + spacing50\r\n }\r\n }\r\n } });\r\n\r\n var classesOverrides = negateSpacingAll ? negateSpacingStyles : getLegacySpacingModeCss(useContext(CardContext), classes);\r\n\r\n var classOverrides = {\r\n root: cn(classes.root, classesOverrides, _defineProperty({}, classes.negateSpacing, negateSpacingAll))\r\n };\r\n\r\n return React.createElement(MuiCardContent, Object.assign({}, rest, {\r\n classes: classOverrides,\r\n ref: ref\r\n }));\r\n});\r\n\r\nCardContent.muiName = 'CardContent';\r\nCardContent.displayName = 'CardContent';\r\n\r\nCardContent.propTypes = {\r\n /**\r\n * Override or extend the styles applied to the component.\r\n */\r\n classes: PropTypes.object,\r\n /**\r\n * @ignore\r\n */\r\n className: PropTypes.string,\r\n /**\r\n * The component used for the root node.\r\n * Either a string to use a DOM element or a component.\r\n */\r\n component: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),\r\n /**\r\n * Adds negative margins on all dimensions\r\n *\r\n * `negateSpacingAll` (bool): **true** | false\r\n *\r\n * * If set to `true`, adds negative margins on all dimensions.\r\n * * Helpful when you want to remove the outer padding for card content\r\n */\r\n spacingOptions: PropTypes.shape({\r\n negateSpacingAll: PropTypes.bool\r\n })\r\n};\r\n\r\n// If default props are needed, they must be set here\r\nCardContent.defaultProps = {\r\n component: 'div'\r\n};\r\n\r\nexport default withStyles(styles)(CardContent);","function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }\r\n\r\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\r\n\r\nimport React, { useContext } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\n\r\nimport { default as MuiCardHeader } from '@material-ui/core/CardHeader';\r\n\r\nimport { default as withStyles } from '../styles';\r\nimport { CardContext } from './Card';\r\nimport Typography from './../Typography';\r\n\r\nimport getLegacySpacingModeCss from './internal/getLegacySpacingModeCss';\r\n\r\nimport { spacing60, spacing50, spacing40, spacing30 } from '../styles/tokens';\r\n\r\nvar styles = function styles(theme) {\r\n return {\r\n root: {},\r\n standard: {\r\n padding: spacing60 + ' ' + spacing60 + ' ' + spacing40\r\n },\r\n dense: {\r\n padding: spacing50 + ' ' + spacing50 + ' 0.75rem'\r\n },\r\n none: {\r\n padding: 0\r\n },\r\n action: {\r\n marginRight: '-' + spacing30,\r\n marginTop: '-.375rem',\r\n '& svg': {\r\n width: spacing40,\r\n height: spacing40,\r\n margin: '.75rem', // No tokens available, this is one off value for spacing\r\n color: theme.palette.grey[500],\r\n fill: theme.palette.grey[500]\r\n }\r\n },\r\n content: {\r\n alignSelf: 'flex-start'\r\n },\r\n responsive: _defineProperty({}, theme.breakpoints.only('xs'), {\r\n padding: spacing40 + ' ' + spacing40 + ' ' + spacing30\r\n })\r\n };\r\n};\r\n\r\n/**\r\n * CardHeader component for displaying header on a Card component\r\n */\r\nvar CardHeader = React.forwardRef(function (props, ref) {\r\n var classes = props.classes,\r\n subheader = props.subheader,\r\n rest = _objectWithoutProperties(props, ['classes', 'subheader']);\r\n\r\n var classesOverrides = getLegacySpacingModeCss(useContext(CardContext), classes);\r\n\r\n // Typography's `body3` variant is exclusive to Path.\r\n // So subheaderTypographyProps doesn't work here.\r\n // Had to create a new node.\r\n var newSubheader = subheader && !props.subheaderTypographyProps ? React.createElement(\r\n Typography,\r\n { variant: 'body3',\r\n component: 'span',\r\n color: 'textSecondary'\r\n },\r\n subheader\r\n ) : React.createElement(\r\n React.Fragment,\r\n null,\r\n subheader || null\r\n );\r\n\r\n var classOverrides = {\r\n root: classNames(classes.root, classesOverrides),\r\n action: classes.action,\r\n content: classes.content\r\n };\r\n\r\n return React.createElement(MuiCardHeader, Object.assign({\r\n classes: classOverrides,\r\n titleTypographyProps: {\r\n variant: 'h3'\r\n },\r\n subheader: newSubheader\r\n }, rest, {\r\n ref: ref\r\n }));\r\n});\r\n\r\nCardHeader.muiName = 'CardHeader';\r\nCardHeader.displayName = 'CardHeader';\r\n\r\nCardHeader.propTypes = {\r\n /**\r\n * The action to display in the card header.\r\n */\r\n action: PropTypes.node,\r\n /**\r\n * The Avatar for the Card Header.\r\n */\r\n avatar: PropTypes.node,\r\n /**\r\n * Override or extend the styles applied to the component.\r\n */\r\n classes: PropTypes.object,\r\n /**\r\n * @ignore\r\n */\r\n className: PropTypes.string,\r\n /**\r\n * The component used for the root node.\r\n * Either a string to use a DOM element or a component.\r\n */\r\n component: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),\r\n /**\r\n * If true, the children won't be wrapped by a Typography component.\r\n * This can be useful to render an alternative Typography variant by\r\n * wrapping the title text, and optional subheader text with the\r\n * Typography component.\r\n */\r\n disableTypography: PropTypes.bool,\r\n /**\r\n * The content of the Card Title.\r\n */\r\n title: PropTypes.node,\r\n /**\r\n * These props will be forwarded to the title (as\r\n * long as disableTypography is not `true`).\r\n */\r\n titleTypographyProps: PropTypes.object,\r\n /**\r\n * The content of the subheader.\r\n */\r\n subheader: PropTypes.node,\r\n /**\r\n * These props will be forwarded to the subheader (as\r\n * long as disableTypography is not true).\r\n */\r\n subheaderTypographyProps: PropTypes.object\r\n};\r\n\r\n// If default props are needed, they must be set here\r\nCardHeader.defaultProps = {\r\n component: 'div',\r\n disableTypography: false\r\n};\r\n\r\nexport default withStyles(styles)(CardHeader);","function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }\r\n\r\nimport React, { useContext } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\nimport { default as withStyles } from '../styles';\r\nimport { default as MuiCardMedia } from '@material-ui/core/CardMedia';\r\nimport { CardContext } from './Card';\r\nimport { getSpacingStyles, spacingType } from './../globalSpacing';\r\nimport isEmpty from 'lodash/isEmpty';\r\n\r\nvar styles = {\r\n root: {}\r\n};\r\n\r\n/**\r\n * CardMedia component for displaying media on a Card component\r\n */\r\nvar CardMedia = React.forwardRef(function (props, ref) {\r\n var classes = props.classes,\r\n rest = _objectWithoutProperties(props, ['classes']);\r\n\r\n var spacingOptions = useContext(CardContext).spacingOptions;\r\n\r\n // Card media needs to span across the card width\r\n // so using `negateSpacingRightLeft` props to set that.\r\n var classesOverrides = !isEmpty(spacingOptions) ? getSpacingStyles({\r\n spacing: spacingOptions.spacing,\r\n negateSpacingRightLeft: true\r\n }, spacingType.COMPONENT_RESET) : {};\r\n\r\n var classOverrides = {\r\n root: classNames(classes.root, classesOverrides)\r\n };\r\n\r\n return React.createElement(MuiCardMedia, Object.assign({}, rest, {\r\n classes: classOverrides,\r\n ref: ref\r\n }));\r\n});\r\n\r\nCardMedia.muiName = 'CardMedia';\r\nCardMedia.displayName = 'CardMedia';\r\n\r\nCardMedia.propTypes = {\r\n /**\r\n * Override or extend the styles applied to the component.\r\n */\r\n classes: PropTypes.object,\r\n /**\r\n * @ignore\r\n */\r\n className: PropTypes.string,\r\n /**\r\n * Component for rendering image.\r\n * Either a string to use a DOM element or a component.\r\n */\r\n component: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),\r\n /**\r\n * Image to be displayed as a background image.\r\n * Either `image` or `src` prop must be specified.\r\n * Note that caller must specify height otherwise the image will not be visible.\r\n */\r\n image: PropTypes.string,\r\n /**\r\n * An alias for `image` property.\r\n * Available only with media components.\r\n * Media components: `video`, `audio`, `picture`, `iframe`, `img`.\r\n */\r\n src: PropTypes.string\r\n};\r\n\r\n// If default props are needed, they must be set here\r\nCardMedia.defaultProps = {\r\n component: 'div'\r\n};\r\n\r\nexport default withStyles(styles)(CardMedia);","var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\r\n\r\nfunction _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }\r\n\r\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\r\n\r\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\r\n\r\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\r\n\r\nimport React from 'react';\r\nimport { default as MuiCheckbox } from '@material-ui/core/Checkbox';\r\nimport PropTypes from 'prop-types';\r\nimport CheckBoxOutlineBlankIcon from '@material-ui/core/internal/svg-icons/CheckBoxOutlineBlank';\r\nimport CheckBoxIcon from '@material-ui/core/internal/svg-icons/CheckBox';\r\nimport IndeterminateCheckBoxIcon from '@material-ui/core/internal/svg-icons/IndeterminateCheckBox';\r\nimport { default as withStyles } from '../styles';\r\nimport { sizingMedium, spacing40, colorBrandSecondary, borderRadiusSmall } from '../styles/tokens';\r\n\r\nexport var styles = function styles(theme) {\r\n return {\r\n root: {\r\n color: theme.palette.grey['500'],\r\n margin: spacing40,\r\n padding: 0,\r\n width: sizingMedium // size of the icon\r\n },\r\n focused: {\r\n borderRadius: borderRadiusSmall,\r\n boxShadow: 'inset 0 0 0 2px ' + colorBrandSecondary,\r\n color: theme.palette.grey['500'],\r\n margin: spacing40,\r\n padding: 0,\r\n width: sizingMedium // size of the icon\r\n },\r\n checked: {},\r\n disabled: {},\r\n colorPrimary: {\r\n '&$checked': {\r\n color: theme.palette.ctaColor.base\r\n },\r\n '&$disabled': {\r\n color: theme.palette.disabled.background\r\n }\r\n },\r\n size: {\r\n width: sizingMedium,\r\n height: sizingMedium\r\n }\r\n };\r\n};\r\n\r\n/**\r\n * Use `Checkbox` to allow a user to select one or more values from a small set of options.\r\n * @done true\r\n * @updated false\r\n * @versionAdded v0.0.5\r\n * @examples\r\n * LabeledCheckboxes\r\n * UnlabeledCheckboxes\r\n */\r\n\r\nvar Checkbox = function (_React$Component) {\r\n _inherits(Checkbox, _React$Component);\r\n\r\n function Checkbox(props) {\r\n _classCallCheck(this, Checkbox);\r\n\r\n var _this = _possibleConstructorReturn(this, (Checkbox.__proto__ || Object.getPrototypeOf(Checkbox)).call(this, props));\r\n\r\n _this.state = {\r\n isFocused: false\r\n };\r\n _this.handleFocus = _this.handleFocus.bind(_this);\r\n _this.handleBlur = _this.handleBlur.bind(_this);\r\n return _this;\r\n }\r\n\r\n _createClass(Checkbox, [{\r\n key: 'handleFocus',\r\n value: function handleFocus(e) {\r\n if (this.props.onFocus) {\r\n this.props.onFocus(e);\r\n }\r\n this.setState(function (prevState) {\r\n return {\r\n isFocused: true\r\n };\r\n });\r\n }\r\n }, {\r\n key: 'handleBlur',\r\n value: function handleBlur(e) {\r\n if (this.props.onBlur) {\r\n this.props.onBlur(e);\r\n }\r\n this.setState(function (prevState) {\r\n return {\r\n isFocused: false\r\n };\r\n });\r\n }\r\n }, {\r\n key: 'render',\r\n value: function render() {\r\n var isFocused = this.state.isFocused;\r\n\r\n var _props = this.props,\r\n classes = _props.classes,\r\n inputPropsTemp = _props.inputProps,\r\n other = _objectWithoutProperties(_props, ['classes', 'inputProps']);\r\n\r\n var inputProps = Object.assign({}, inputPropsTemp);\r\n\r\n // Updating aria-checked attribute when indeterminate flag is true.\r\n if (this.props.indeterminate) {\r\n inputProps['aria-checked'] = 'mixed';\r\n }\r\n\r\n return React.createElement(MuiCheckbox, Object.assign({\r\n classes: {\r\n root: isFocused ? classes.focused : classes.root,\r\n checked: classes.checked,\r\n disabled: classes.disabled,\r\n colorPrimary: classes.colorPrimary\r\n },\r\n onFocus: this.handleFocus,\r\n onBlur: this.handleBlur,\r\n disableRipple: true,\r\n color: 'primary',\r\n inputProps: inputProps\r\n }, other));\r\n }\r\n }]);\r\n\r\n return Checkbox;\r\n}(React.Component);\r\n\r\n;\r\n\r\nCheckbox.muiName = 'Checkbox';\r\n\r\nCheckbox.propTypes = {\r\n /**\r\n * If `true`, the component is checked.\r\n */\r\n checked: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),\r\n /**\r\n * The icon to display when the component is checked.\r\n */\r\n checkedIcon: PropTypes.node,\r\n /**\r\n * Useful to extend the style applied to components.\r\n */\r\n classes: PropTypes.object,\r\n /**\r\n * If `true`, the switch will be disabled.\r\n */\r\n disabled: PropTypes.bool,\r\n /**\r\n * If `true`, the ripple effect will be disabled.\r\n */\r\n disableRipple: PropTypes.bool,\r\n /**\r\n * The icon to display when the component is unchecked.\r\n */\r\n icon: PropTypes.node,\r\n /**\r\n * The id of the `input` element.\r\n */\r\n id: PropTypes.string,\r\n /**\r\n * If `true`, the component appears indeterminate.\r\n */\r\n indeterminate: PropTypes.bool,\r\n /**\r\n * The icon to display when the component is indeterminate.\r\n */\r\n indeterminateIcon: PropTypes.node,\r\n /**\r\n * Properties applied to the `input` element.\r\n */\r\n inputProps: PropTypes.object,\r\n /**\r\n * Use that property to pass a ref callback to the native input component.\r\n */\r\n inputRef: PropTypes.func,\r\n /**\r\n * Callback fired when the state is changed.\r\n *\r\n * @param {object} event The event source of the callback.\r\n * You can pull out the new value by accessing `event.target.checked`.\r\n * @param {boolean} checked The `checked` value of the switch\r\n */\r\n onChange: PropTypes.func,\r\n /**\r\n * @ignore\r\n */\r\n onBlur: PropTypes.func,\r\n /**\r\n * @ignore\r\n */\r\n onFocus: PropTypes.func,\r\n /**\r\n * The input component property `type`.\r\n */\r\n type: PropTypes.string,\r\n /**\r\n * The value of the component.\r\n */\r\n value: PropTypes.string\r\n};\r\n\r\nCheckbox.defaultProps = {\r\n checkedIcon: React.createElement(CheckBoxIcon, null),\r\n icon: React.createElement(CheckBoxOutlineBlankIcon, null),\r\n indeterminate: false,\r\n indeterminateIcon: React.createElement(IndeterminateCheckBoxIcon, null)\r\n};\r\n\r\nexport default withStyles(styles)(Checkbox);","var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\r\n\r\nfunction _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }\r\n\r\nfunction _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }\r\n\r\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\r\n\r\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\r\n\r\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\r\n\r\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\r\n\r\nimport React from 'react';\r\nimport { createContext } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport uuid from 'uuid/v4';\r\nimport classNames from 'classnames';\r\nimport get from 'lodash/get';\r\nimport AppBar from '@material-ui/core/AppBar';\r\nimport Toolbar from '@material-ui/core/Toolbar';\r\nimport TextField from '@material-ui/core/TextField';\r\nimport InputAdornment from '@material-ui/core/InputAdornment';\r\n\r\nimport { HeaderBarDropdown, HeaderBarLogo, HeaderBarItem, HeaderUtilityBar, Logo, MegaMenu, NotificationBadge } from '../';\r\n\r\nimport { sizingXxSmall, colorBackgroundHeaderBarItemSelected, colorBrandNeutral100, colorBrandNeutral300, colorBrandNeutral500, colorBrandPrimary, colorTextNeutral500, colorTextNeutral100, opacity2, spacing40, spacing50, sizingXxLarge1, borderWidthThickest, widthFluid, heightFluid } from '../styles/tokens';\r\n\r\nimport { withEDSContext } from '../EDSContext/EDSContext';\r\nimport { default as withStyles } from '../styles';\r\nimport { createEDSTheme } from '@ellucian/react-design-system/core/themes';\r\nimport Icon from '@ellucian/ds-icons/lib/es6/Icon';\r\n\r\nvar colorBackgroundHeaderBarThemed = colorBrandNeutral100;\r\nvar colorBackgroundSearchThemed = colorBrandNeutral300;\r\n\r\n// unique id for the 'page links' section\r\nvar pageSectionId = uuid();\r\n\r\n// unique ids for standard utility items\r\nvar megaMenuItemKey = 'headerBarMegaMenuUtilityItem';\r\nvar searchItemKey = 'headerBarSearchUtilityItem';\r\n\r\nvar styles = function styles(theme) {\r\n var _searchInput;\r\n\r\n return _defineProperty({\r\n root: {\r\n borderBottom: borderWidthThickest + ' solid ' + theme.palette.secondary.main,\r\n boxShadow: 'none',\r\n height: sizingXxLarge1,\r\n zIndex: theme.zIndex.headerBar,\r\n backgroundColor: colorBrandPrimary,\r\n '&.themed': {\r\n backgroundColor: colorBackgroundHeaderBarThemed\r\n }\r\n },\r\n positionStatic: {\r\n\r\n // MUI translates the zIndex of the static version of header to 0; since\r\n // we want our menus to overlay content below the headerbar, we override this\r\n transform: 'none'\r\n\r\n },\r\n\r\n overlay: {\r\n position: 'fixed',\r\n width: widthFluid,\r\n height: heightFluid,\r\n opacity: opacity2,\r\n backgroundColor: theme.palette.grey[600],\r\n top: '4rem'\r\n },\r\n menuBar: {\r\n display: 'flex',\r\n flex: '1'\r\n },\r\n utilityBar: {\r\n display: 'flex',\r\n height: '4rem',\r\n borderBottom: sizingXxSmall + ' solid ' + theme.palette.secondary.main\r\n },\r\n menuItem: {\r\n display: 'block'\r\n },\r\n logoRoot: {\r\n backgroundColor: theme.palette.primary.main,\r\n borderBottom: sizingXxSmall + ' solid ' + theme.palette.secondary.main,\r\n height: '4rem'\r\n },\r\n logo: {\r\n // TODO make Logo more configurable so that these important markers are no longer necessary\r\n padding: '0 !important',\r\n minWidth: '0 !important',\r\n\r\n '& svg ': {\r\n width: '5.625rem'\r\n }\r\n },\r\n\r\n // fix the toolbar at a specific minimum height, regardless of size class (Toolbar wants to float, height-wise,\r\n // but that makes positioning things a pain\r\n headerBarToolbar: {\r\n minHeight: sizingXxLarge1\r\n },\r\n\r\n searchBar: {\r\n display: 'none',\r\n flex: '1'\r\n },\r\n searchRoot: {\r\n backgroundColor: '' + colorBackgroundHeaderBarItemSelected,\r\n transform: 'translateY(-2px)',\r\n height: '60px',\r\n\r\n '& input': {\r\n color: '' + colorTextNeutral100\r\n },\r\n\r\n '& .header-search-icon': {\r\n color: colorTextNeutral100\r\n },\r\n\r\n '&.themed': {\r\n backgroundColor: '' + colorBackgroundSearchThemed\r\n },\r\n '&.themed input': {\r\n color: colorTextNeutral500\r\n },\r\n '&.themed .header-search-icon': {\r\n color: colorBrandNeutral500\r\n }\r\n\r\n },\r\n searchInput: (_searchInput = {\r\n padding: '1.2rem 0'\r\n\r\n }, _defineProperty(_searchInput, '&[type=\"text\"]::-webkit-search-decoration,\\n &[type=\"text\"]::-webkit-search-cancel-button,\\n &[type=\"text\"]::-webkit-search-results-button,\\n &[type=\"text\"]::-webkit-search-results-decoration', {\r\n display: 'none'\r\n }), _defineProperty(_searchInput, '&[type=\"text\"]', {\r\n '-webkit-appearance': 'none'\r\n }), _defineProperty(_searchInput, '&[type=text]::-ms-clear', {\r\n display: 'none',\r\n width: 0,\r\n height: 0\r\n }), _searchInput),\r\n searchIconSize: {\r\n height: spacing50 + ' !important',\r\n width: spacing50 + ' !important'\r\n },\r\n searchAdornment: {\r\n backgroundColor: 'transparent',\r\n border: 'none',\r\n margin: 0,\r\n maxHeight: 'none',\r\n padding: spacing40\r\n },\r\n\r\n // determines which elements of the headerbar are visible when the search is open\r\n searchOpen: _defineProperty({\r\n '& .headerbar-search-bar': {\r\n display: 'flex'\r\n },\r\n '& .menu-bar': {\r\n display: 'none'\r\n },\r\n '& .headerbar-logo': {\r\n display: 'none'\r\n },\r\n '& .headerbar-utility-bar': {\r\n paddingRight: 0\r\n }\r\n }, '& .headerbar-utility-bar div[data-key=' + megaMenuItemKey + ']', {\r\n display: 'none !important'\r\n }),\r\n\r\n logoDisabled: {\r\n pointerEvents: 'none'\r\n }\r\n\r\n }, theme.breakpoints.up('md'), {\r\n searchOpen: _defineProperty({\r\n '& .headerbar-logo': {\r\n display: 'block'\r\n }\r\n }, '& .headerbar-utility-bar div[data-key=' + megaMenuItemKey + ']', {\r\n display: 'flex !important'\r\n })\r\n });\r\n};\r\n\r\nvar HeaderBarContext = createContext();\r\n\r\nvar lightTheme = createEDSTheme('light');\r\n\r\nvar HeaderBarProvider = function (_React$Component) {\r\n _inherits(HeaderBarProvider, _React$Component);\r\n\r\n function HeaderBarProvider() {\r\n var _ref2;\r\n\r\n var _temp, _this, _ret;\r\n\r\n _classCallCheck(this, HeaderBarProvider);\r\n\r\n for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {\r\n args[_key] = arguments[_key];\r\n }\r\n\r\n return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref2 = HeaderBarProvider.__proto__ || Object.getPrototypeOf(HeaderBarProvider)).call.apply(_ref2, [this].concat(args))), _this), _this.state = {\r\n activeHeaderBarItem: null,\r\n isMegaMenuOpen: false,\r\n isDropDownOpen: false,\r\n isThemed: false\r\n }, _temp), _possibleConstructorReturn(_this, _ret);\r\n }\r\n\r\n _createClass(HeaderBarProvider, [{\r\n key: 'render',\r\n value: function render() {\r\n var _this2 = this;\r\n\r\n var _props = this.props,\r\n children = _props.children,\r\n onActiveItemChanged = _props.onActiveItemChanged;\r\n\r\n\r\n return React.createElement(\r\n HeaderBarContext.Provider,\r\n {\r\n value: {\r\n state: this.state,\r\n setActive: function setActive(item) {\r\n\r\n if (onActiveItemChanged) {\r\n onActiveItemChanged(item);\r\n }\r\n },\r\n isActive: function isActive(itemRef) {\r\n return _this2.state.activeHeaderBarItem === itemRef;\r\n },\r\n setThemed: function setThemed(isThemed) {\r\n return _this2.setState({ isThemed: isThemed });\r\n },\r\n isThemed: function isThemed() {\r\n return _this2.state.isThemed;\r\n },\r\n setOpen: function setOpen(open) {\r\n return _this2.setState({ isDropDownOpen: open });\r\n }\r\n }\r\n },\r\n children\r\n );\r\n }\r\n }]);\r\n\r\n return HeaderBarProvider;\r\n}(React.Component);\r\n\r\nHeaderBarProvider.propTypes = {\r\n onActiveItemChanged: PropTypes.func\r\n};\r\n\r\n/**\r\n * Use `HeaderBar` to display main navigation that enables the user to quickly access navigational items.\r\n * @done true\r\n * @updated false\r\n * @versionAdded v0.0.5\r\n * @examples\r\n * ConsolidatedHeaderBarExample\r\n * SimpleHeaderBarExample\r\n */\r\n\r\nvar HeaderBar = function (_React$Component2) {\r\n _inherits(HeaderBar, _React$Component2);\r\n\r\n function HeaderBar(props) {\r\n _classCallCheck(this, HeaderBar);\r\n\r\n var _this3 = _possibleConstructorReturn(this, (HeaderBar.__proto__ || Object.getPrototypeOf(HeaderBar)).call(this, props));\r\n\r\n _this3.state = {\r\n megaMenuOpen: false,\r\n searchOpen: false\r\n };\r\n\r\n _this3.onMenuItemClick = function (event, item) {\r\n\r\n switch (item.key) {\r\n case megaMenuItemKey:\r\n _this3.toggleMegaMenu(!_this3.state.megaMenuOpen);\r\n break;\r\n case searchItemKey:\r\n // ignore the search click\r\n break;\r\n default:\r\n _this3.props.onItemSelected && _this3.props.onItemSelected(item);\r\n break;\r\n }\r\n };\r\n\r\n _this3.itemSelected = function (event, item) {\r\n // handle selection if it's a valid keypress, or a click\r\n if (event.type === 'keypress' && (event.key === 'Enter' || event.key === ' ') || event.type === 'click') {\r\n _this3.onMenuItemClick(event, item);\r\n };\r\n };\r\n\r\n _this3.toggleMegaMenu = function (open) {\r\n _this3.setState({ megaMenuOpen: open });\r\n if (_this3.state.searchOpen) {\r\n _this3.toggleSearch(false);\r\n }\r\n };\r\n\r\n _this3.toggleSearch = function (open) {\r\n\r\n _this3.setState({ searchOpen: open }, function () {\r\n\r\n if (open) {\r\n // focus the search field on open\r\n _this3.searchRef.current.focus();\r\n } else {\r\n // clear out search terms on close\r\n _this3.searchRef.current.value = '';\r\n }\r\n });\r\n\r\n if (_this3.state.megaMenuOpen) {\r\n _this3.toggleMegaMenu(false);\r\n }\r\n };\r\n\r\n _this3.handleKeyPress = function (event) {\r\n if (event.key === 'Enter') {\r\n if (_this3.props.onSearch) {\r\n _this3.props.onSearch(event.target.value);\r\n }\r\n _this3.toggleSearch(false);\r\n }\r\n\r\n if (event.key === 'Escape') {\r\n _this3.toggleSearch(false);\r\n }\r\n };\r\n\r\n _this3.updateThemeMode = function () {\r\n // if the primary color was changed, go into 'themed' mode\r\n _this3.props.context.setThemed(_this3.props.theme.palette.primary.main !== lightTheme.palette.primary.main);\r\n };\r\n\r\n _this3.searchRef = React.createRef();\r\n return _this3;\r\n }\r\n\r\n /**\r\n * Invoked whenever a menu item is selected - from the menu bar, utility bar, or mega menu.\r\n *\r\n * @param {Event} event The event\r\n * @param {object} item The selected item\r\n */\r\n\r\n\r\n /**\r\n * Handle header bar item selection.\r\n */\r\n\r\n\r\n _createClass(HeaderBar, [{\r\n key: 'neuterTabIndex',\r\n\r\n\r\n /**\r\n * Turn off tabbing to the given component.\r\n *\r\n * @param {Component} component Component to neuter\r\n * @return {Component} Component with a neutered tab index\r\n */\r\n value: function neuterTabIndex(component) {\r\n return React.cloneElement(component, { tabIndex: -1 });\r\n }\r\n\r\n /**\r\n * Massages menu items until they meet our rigorous standards.\r\n *\r\n * @param {Array.