@zendeskgarden/react-notifications 9.0.0-next.14 → 9.0.0-next.16

package/dist/esm/elements/Alert.js

@@ -21,7 +21,7 @@ import '../styled/global-alert/StyledGlobalAlertClose.js';
 import '../styled/global-alert/StyledGlobalAlertContent.js';
 import '../styled/global-alert/StyledGlobalAlertIcon.js';
 import '../styled/global-alert/StyledGlobalAlertTitle.js';
-import { validationHues, validationIcons } from '../utils/icons.js';
+import { validationIcons } from '../utils/icons.js';
 import { NotificationsContext } from '../utils/useNotificationsContext.js';
 import { Title } from './content/Title.js';
 import { Paragraph } from './content/Paragraph.js';
@@ -30,18 +30,18 @@ import { Close } from './content/Close.js';
 const AlertComponent = React__default.forwardRef((_ref, ref) => {
   let {
     role,
+    type,
     ...props
   } = _ref;
-  const hue = validationHues[props.type];
-  const Icon = validationIcons[props.type];
+  const Icon = validationIcons[type];
   return React__default.createElement(NotificationsContext.Provider, {
-    value: hue
+    value: type
   }, React__default.createElement(StyledAlert, Object.assign({
     ref: ref,
-    hue: hue,
+    $type: type,
     role: role === undefined ? 'alert' : role
   }, props), React__default.createElement(StyledIcon, {
-    $hue: hue
+    $type: type
   }, React__default.createElement(Icon, null)), props.children));
 });
 AlertComponent.displayName = 'Alert';

package/dist/esm/elements/Notification.js

@@ -22,7 +22,7 @@ import '../styled/global-alert/StyledGlobalAlertClose.js';
 import '../styled/global-alert/StyledGlobalAlertContent.js';
 import '../styled/global-alert/StyledGlobalAlertIcon.js';
 import '../styled/global-alert/StyledGlobalAlertTitle.js';
-import { validationIcons, validationHues } from '../utils/icons.js';
+import { validationIcons } from '../utils/icons.js';
 import { Title } from './content/Title.js';
 import { Paragraph } from './content/Paragraph.js';
 import { Close } from './content/Close.js';
@@ -34,14 +34,13 @@ const NotificationComponent = forwardRef((_ref, ref) => {
     ...props
   } = _ref;
   const Icon = type ? validationIcons[type] : SvgInfoStroke;
-  const hue = type && validationHues[type];
   return React__default.createElement(StyledNotification, Object.assign({
     ref: ref,
-    type: type,
-    isFloating: true,
+    $type: type,
+    $isFloating: true,
     role: "alert"
   }, props), type && React__default.createElement(StyledIcon, {
-    $hue: hue
+    $type: type
   }, React__default.createElement(Icon, null)), children);
 });
 NotificationComponent.displayName = 'Notification';

package/dist/esm/elements/Well.js

@@ -23,9 +23,18 @@ import '../styled/global-alert/StyledGlobalAlertTitle.js';
 import { Title } from './content/Title.js';
 import { Paragraph } from './content/Paragraph.js';
 
-const WellComponent = React__default.forwardRef((props, ref) => React__default.createElement(StyledWell, Object.assign({
-  ref: ref
-}, props)));
+const WellComponent = React__default.forwardRef((_ref, ref) => {
+  let {
+    isFloating,
+    isRecessed,
+    ...props
+  } = _ref;
+  return React__default.createElement(StyledWell, Object.assign({
+    ref: ref,
+    $isFloating: isFloating,
+    $isRecessed: isRecessed
+  }, props));
+});
 WellComponent.displayName = 'Well';
 WellComponent.propTypes = {
   isRecessed: PropTypes.bool,

package/dist/esm/elements/content/Close.js

@@ -21,16 +21,19 @@ import '../../styled/global-alert/StyledGlobalAlertIcon.js';
 import '../../styled/global-alert/StyledGlobalAlertTitle.js';
 import { useNotificationsContext } from '../../utils/useNotificationsContext.js';
 import { useText } from '@zendeskgarden/react-theming';
-import SvgXStroke from '../../node_modules/@zendeskgarden/svg-icons/src/12/x-stroke.svg.js';
+import SvgXStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/x-stroke.svg.js';
 
 const Close = React__default.forwardRef((props, ref) => {
   const ariaLabel = useText(Close, props, 'aria-label', 'Close');
-  const hue = useNotificationsContext();
+  const type = useNotificationsContext();
   return React__default.createElement(StyledClose, Object.assign({
     ref: ref,
-    hue: hue,
+    $type: type,
     "aria-label": ariaLabel
-  }, props), React__default.createElement(SvgXStroke, null));
+  }, props, {
+    focusInset: true,
+    size: "small"
+  }), React__default.createElement(SvgXStroke, null));
 });
 Close.displayName = 'Close';
 

package/dist/esm/elements/content/Title.js

@@ -20,9 +20,16 @@ import '../../styled/global-alert/StyledGlobalAlertContent.js';
 import '../../styled/global-alert/StyledGlobalAlertIcon.js';
 import '../../styled/global-alert/StyledGlobalAlertTitle.js';
 
-const Title = React__default.forwardRef((props, ref) => React__default.createElement(StyledTitle, Object.assign({
-  ref: ref
-}, props)));
+const Title = React__default.forwardRef((_ref, ref) => {
+  let {
+    isRegular,
+    ...props
+  } = _ref;
+  return React__default.createElement(StyledTitle, Object.assign({
+    ref: ref,
+    $isRegular: isRegular
+  }, props));
+});
 Title.displayName = 'Title';
 
 export { Title };

package/dist/esm/elements/global-alert/GlobalAlert.js

@@ -6,6 +6,7 @@
 */
 import React__default, { forwardRef, useMemo } from 'react';
 import PropTypes from 'prop-types';
+import { ThemeProvider } from 'styled-components';
 import SvgInfoStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/info-stroke.svg.js';
 import SvgAlertErrorStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/alert-error-stroke.svg.js';
 import SvgAlertWarningStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/alert-warning-stroke.svg.js';
@@ -25,7 +26,7 @@ import '../../styled/global-alert/StyledGlobalAlertClose.js';
 import '../../styled/global-alert/StyledGlobalAlertContent.js';
 import { StyledGlobalAlertIcon } from '../../styled/global-alert/StyledGlobalAlertIcon.js';
 import '../../styled/global-alert/StyledGlobalAlertTitle.js';
-import { GlobalAlertContext } from './utility.js';
+import { GlobalAlertContext } from '../../utils/useGlobalAlertContext.js';
 import { GlobalAlertButton } from './GlobalAlertButton.js';
 import { GlobalAlertClose } from './GlobalAlertClose.js';
 import { GlobalAlertContent } from './GlobalAlertContent.js';
@@ -42,15 +43,27 @@ const GlobalAlertComponent = forwardRef((_ref, ref) => {
     warning: React__default.createElement(SvgAlertWarningStroke, null),
     info: React__default.createElement(SvgInfoStroke, null)
   }[type];
-  return React__default.createElement(GlobalAlertContext.Provider, {
-    value: useMemo(() => ({
-      type
-    }), [type])
-  }, React__default.createElement(StyledGlobalAlert, Object.assign({
-    ref: ref,
-    role: "status",
-    alertType: type
-  }, props), React__default.createElement(StyledGlobalAlertIcon, null, icon), props.children));
+  return (
+    React__default.createElement(ThemeProvider, {
+      theme: theme => ({
+        ...theme,
+        colors: {
+          ...theme.colors,
+          base: 'light'
+        }
+      })
+    }, React__default.createElement(GlobalAlertContext.Provider, {
+      value: useMemo(() => ({
+        type
+      }), [type])
+    }, React__default.createElement(StyledGlobalAlert, Object.assign({
+      ref: ref,
+      role: "status",
+      $alertType: type
+    }, props), React__default.createElement(StyledGlobalAlertIcon, {
+      $alertType: type
+    }, icon), props.children)))
+  );
 });
 GlobalAlertComponent.displayName = 'GlobalAlert';
 const GlobalAlert = GlobalAlertComponent;

package/dist/esm/elements/global-alert/GlobalAlertButton.js

@@ -20,7 +20,7 @@ import '../../styled/global-alert/StyledGlobalAlertClose.js';
 import '../../styled/global-alert/StyledGlobalAlertContent.js';
 import '../../styled/global-alert/StyledGlobalAlertIcon.js';
 import '../../styled/global-alert/StyledGlobalAlertTitle.js';
-import { useGlobalAlertContext } from './utility.js';
+import { useGlobalAlertContext } from '../../utils/useGlobalAlertContext.js';
 
 const GlobalAlertButton = forwardRef((_ref, ref) => {
   let {
@@ -32,8 +32,9 @@ const GlobalAlertButton = forwardRef((_ref, ref) => {
   } = useGlobalAlertContext();
   return React__default.createElement(StyledGlobalAlertButton, Object.assign({
     ref: ref,
-    alertType: type
+    $alertType: type
   }, props, {
+    size: "small",
     isPrimary: !isBasic,
     isBasic: isBasic
   }));

package/dist/esm/elements/global-alert/GlobalAlertClose.js

@@ -21,7 +21,7 @@ import { StyledGlobalAlertClose } from '../../styled/global-alert/StyledGlobalAl
 import '../../styled/global-alert/StyledGlobalAlertContent.js';
 import '../../styled/global-alert/StyledGlobalAlertIcon.js';
 import '../../styled/global-alert/StyledGlobalAlertTitle.js';
-import { useGlobalAlertContext } from './utility.js';
+import { useGlobalAlertContext } from '../../utils/useGlobalAlertContext.js';
 
 const GlobalAlertClose = forwardRef((props, ref) => {
   const {
@@ -30,8 +30,10 @@ const GlobalAlertClose = forwardRef((props, ref) => {
   const label = useText(GlobalAlertClose, props, 'aria-label', 'Close');
   return React__default.createElement(StyledGlobalAlertClose, Object.assign({
     ref: ref,
-    alertType: type
-  }, props), React__default.createElement(SvgXStroke, {
+    $alertType: type
+  }, props, {
+    size: "small"
+  }), React__default.createElement(SvgXStroke, {
     role: "img",
     "aria-label": label
   }));

package/dist/esm/elements/global-alert/GlobalAlertTitle.js

@@ -20,14 +20,19 @@ import '../../styled/global-alert/StyledGlobalAlertClose.js';
 import '../../styled/global-alert/StyledGlobalAlertContent.js';
 import '../../styled/global-alert/StyledGlobalAlertIcon.js';
 import { StyledGlobalAlertTitle } from '../../styled/global-alert/StyledGlobalAlertTitle.js';
-import { useGlobalAlertContext } from './utility.js';
+import { useGlobalAlertContext } from '../../utils/useGlobalAlertContext.js';
 
-const GlobalAlertTitle = forwardRef((props, ref) => {
+const GlobalAlertTitle = forwardRef((_ref, ref) => {
+  let {
+    isRegular,
+    ...props
+  } = _ref;
   const {
     type
   } = useGlobalAlertContext();
   return React__default.createElement(StyledGlobalAlertTitle, Object.assign({
-    alertType: type,
+    $alertType: type,
+    $isRegular: isRegular,
     ref: ref
   }, props));
 });

package/dist/esm/styled/StyledAlert.js

@@ -5,15 +5,41 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
 import { StyledTitle } from './content/StyledTitle.js';
 import { StyledBase } from './StyledBase.js';
+import { validationTypes } from '../utils/icons.js';
 
 const COMPONENT_ID = 'notifications.alert';
-const colorStyles = props => css(["", "{color:", ";}"], StyledTitle, props.hue && getColorV8(props.hue, 800, props.theme));
+const colorStyles = props => {
+  const {
+    $type,
+    theme
+  } = props;
+  let variable;
+  switch ($type) {
+    case validationTypes.success:
+      variable = 'foreground.successEmphasis';
+      break;
+    case validationTypes.error:
+      variable = 'foreground.dangerEmphasis';
+      break;
+    case validationTypes.warning:
+      variable = 'foreground.warningEmphasis';
+      break;
+    case validationTypes.info:
+      variable = 'foreground.default';
+      break;
+  }
+  const color = variable ? getColor({
+    variable,
+    theme
+  }) : undefined;
+  return css(["", "{color:", ";}"], StyledTitle, color);
+};
 const StyledAlert = styled(StyledBase).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.14'
+  'data-garden-version': '9.0.0-next.16'
 }).withConfig({
   displayName: "StyledAlert",
   componentId: "sc-fyn8jp-0"

package/dist/esm/styled/StyledBase.js

@@ -5,35 +5,79 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { getLineHeight, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
+import { getLineHeight, retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
+import { validationTypes } from '../utils/icons.js';
 
-const boxShadow = props => {
-  const {
-    theme
-  } = props;
+const COMPONENT_ID = 'notifications.base_container';
+const colorStyles = _ref => {
+  let {
+    theme,
+    $type,
+    $isFloating
+  } = _ref;
   const {
     space,
-    shadows
+    shadows,
+    opacity
   } = theme;
-  const offsetY = `${space.base * 5}px`;
-  const blurRadius = `${space.base * 7}px`;
-  const color = getColorV8('chromeHue', 600, theme, 0.15);
-  return shadows.lg(offsetY, blurRadius, color);
-};
-const colorStyles = props => {
-  let backgroundColor;
-  let borderColor;
-  let foregroundColor;
-  if (props.hue) {
-    backgroundColor = getColorV8(props.hue, 100, props.theme);
-    borderColor = getColorV8(props.hue, 300, props.theme);
-    foregroundColor = getColorV8(props.hue, props.type === 'info' ? 600 : 700, props.theme);
+  let bgVariable;
+  let borderVariable;
+  let fgVariable;
+  if (!$isFloating && $type && !!validationTypes[$type]) {
+    switch ($type) {
+      case validationTypes.success:
+        bgVariable = 'background.success';
+        borderVariable = 'border.success';
+        fgVariable = 'foreground.success';
+        break;
+      case validationTypes.error:
+        bgVariable = 'background.danger';
+        borderVariable = 'border.danger';
+        fgVariable = 'foreground.danger';
+        break;
+      case validationTypes.warning:
+        bgVariable = 'background.warning';
+        borderVariable = 'border.warning';
+        fgVariable = 'foreground.warning';
+        break;
+      case validationTypes.info:
+        bgVariable = 'background.subtle';
+        borderVariable = 'border.default';
+        fgVariable = 'foreground.subtle';
+        break;
+    }
   } else {
-    backgroundColor = getColorV8('background', 600 , props.theme);
-    borderColor = getColorV8('neutralHue', 300, props.theme);
-    foregroundColor = getColorV8('neutralHue', 800, props.theme);
+    bgVariable = 'background.raised';
+    borderVariable = 'border.default';
+    fgVariable = 'foreground.default';
   }
-  return css(["border-color:", ";background-color:", ";color:", ";"], borderColor, backgroundColor, foregroundColor);
+  const backgroundColor = getColor({
+    variable: bgVariable,
+    theme
+  });
+  const borderColor = getColor({
+    variable: borderVariable,
+    theme
+  });
+  const foregroundColor = getColor({
+    variable: fgVariable,
+    theme
+  });
+  const offsetY = `${space.base * 5}px`;
+  const blurRadius = `${space.base * 7}px`;
+  const color = getColor({
+    hue: 'neutralHue',
+    shade: 1200,
+    light: {
+      transparency: opacity[200]
+    },
+    dark: {
+      transparency: opacity[1000]
+    },
+    theme
+  });
+  const boxShadow = $isFloating ? shadows.lg(offsetY, blurRadius, color) : undefined;
+  return css(["border-color:", ";box-shadow:", ";background-color:", ";color:", ";"], borderColor, boxShadow, backgroundColor, foregroundColor);
 };
 const padding = props => {
   const {
@@ -43,10 +87,13 @@ const padding = props => {
   const paddingHorizontal = `${space.base * 10}px`;
   return `${paddingVertical} ${paddingHorizontal}`;
 };
-const StyledBase = styled.div.withConfig({
+const StyledBase = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.16'
+}).withConfig({
   displayName: "StyledBase",
   componentId: "sc-14syaqw-0"
-})(["position:relative;border:", ";border-radius:", ";box-shadow:", ";padding:", ";line-height:", ";font-size:", ";direction:", ";", ";"], props => props.theme.borders.sm, props => props.theme.borderRadii.md, props => props.isFloating && boxShadow, padding, props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => props.theme.fontSizes.md, props => props.theme.rtl && 'rtl', colorStyles);
+})(["position:relative;border:", ";border-radius:", ";padding:", ";line-height:", ";font-size:", ";direction:", ";", ";", ""], props => props.theme.borders.sm, props => props.theme.borderRadii.md, padding, props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => props.theme.fontSizes.md, props => props.theme.rtl && 'rtl', colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledBase.defaultProps = {
   theme: DEFAULT_THEME
 };

package/dist/esm/styled/StyledIcon.js

@@ -4,13 +4,56 @@
 * Use of this source code is governed under the Apache License, Version 2.0
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
-import styled from 'styled-components';
-import { StyledBaseIcon, getColorV8, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import styled, { css } from 'styled-components';
+import { StyledBaseIcon, retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
+import { validationTypes } from '../utils/icons.js';
 
-const StyledIcon = styled(StyledBaseIcon).withConfig({
+const COMPONENT_ID = 'notifications.icon';
+const sizeStyles = _ref => {
+  let {
+    theme: {
+      rtl,
+      space
+    }
+  } = _ref;
+  return css(["right:", ";left:", ";margin-top:", "px;"], rtl && `${space.base * 4}px`, !rtl && `${space.base * 4}px`, space.base / 2);
+};
+const colorStyles = _ref2 => {
+  let {
+    theme,
+    $type
+  } = _ref2;
+  let variable;
+  switch ($type) {
+    case validationTypes.success:
+      variable = 'foreground.success';
+      break;
+    case validationTypes.error:
+      variable = 'foreground.danger';
+      break;
+    case validationTypes.warning:
+      variable = 'foreground.warning';
+      break;
+    case validationTypes.info:
+      variable = 'foreground.subtle';
+      break;
+    default:
+      variable = 'foreground.default';
+      break;
+  }
+  const color = getColor({
+    variable,
+    theme
+  });
+  return css(["color:", ";"], color);
+};
+const StyledIcon = styled(StyledBaseIcon).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.16'
+}).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-msklws-0"
-})(["position:absolute;right:", ";left:", ";margin-top:", "px;color:", ";"], props => props.theme.rtl && `${props.theme.space.base * 4}px`, props => !props.theme.rtl && `${props.theme.space.base * 4}px`, props => props.theme.space.base / 2, props => props.$hue && getColorV8(props.$hue, props.$hue === 'warningHue' ? 700 : 600, props.theme));
+})(["position:absolute;", " ", " ", ""], sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledIcon.defaultProps = {
   theme: DEFAULT_THEME
 };

package/dist/esm/styled/StyledNotification.js

@@ -6,54 +6,48 @@
 */
 import PropTypes from 'prop-types';
 import styled, { css } from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
 import { TYPE } from '../types/index.js';
 import { StyledTitle } from './content/StyledTitle.js';
 import { StyledBase } from './StyledBase.js';
+import { validationTypes } from '../utils/icons.js';
 
 const COMPONENT_ID = 'notifications.notification';
 const colorStyles = props => {
   const {
-    type,
+    $type,
     theme
   } = props;
-  const {
-    colors
-  } = theme;
-  const {
-    successHue,
-    dangerHue,
-    warningHue
-  } = colors;
-  let color;
-  switch (type) {
-    case 'success':
-      color = getColorV8(successHue, 600, theme);
+  let variable;
+  switch ($type) {
+    case validationTypes.success:
+      variable = 'foreground.success';
       break;
-    case 'error':
-      color = getColorV8(dangerHue, 600, theme);
+    case validationTypes.error:
+      variable = 'foreground.danger';
       break;
-    case 'warning':
-      color = getColorV8(warningHue, 700, theme);
+    case validationTypes.warning:
+      variable = 'foreground.warning';
       break;
-    case 'info':
-      color = getColorV8('foreground', 600 , theme);
-      break;
-    default:
-      color = 'inherit';
+    case validationTypes.info:
+      variable = 'foreground.default';
       break;
   }
+  const color = variable ? getColor({
+    variable,
+    theme
+  }) : 'inherit';
   return css(["", "{color:", ";}"], StyledTitle, color);
 };
 const StyledNotification = styled(StyledBase).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.14'
+  'data-garden-version': '9.0.0-next.16'
 }).withConfig({
   displayName: "StyledNotification",
   componentId: "sc-uf6jh-0"
 })(["", " ", ";"], colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledNotification.propTypes = {
-  type: PropTypes.oneOf(TYPE)
+  $type: PropTypes.oneOf(TYPE)
 };
 StyledNotification.defaultProps = {
   theme: DEFAULT_THEME

package/dist/esm/styled/StyledWell.js

@@ -4,18 +4,42 @@
 * Use of this source code is governed under the Apache License, Version 2.0
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
-import styled from 'styled-components';
-import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import styled, { css } from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
 import { StyledBase } from './StyledBase.js';
 
 const COMPONENT_ID = 'notifications.well';
+const colorStyles = _ref => {
+  let {
+    theme,
+    $isFloating,
+    $isRecessed
+  } = _ref;
+  let backgroundVariable;
+  if ($isRecessed) {
+    backgroundVariable = 'background.recessed';
+  } else if ($isFloating) {
+    backgroundVariable = 'background.raised';
+  } else {
+    backgroundVariable = 'background.default';
+  }
+  const foreground = getColor({
+    variable: 'foreground.subtle',
+    theme
+  });
+  const background = getColor({
+    variable: backgroundVariable,
+    theme
+  });
+  return css(["background-color:", ";color:", ";"], background, foreground);
+};
 const StyledWell = styled(StyledBase).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.14'
+  'data-garden-version': '9.0.0-next.16'
 }).withConfig({
   displayName: "StyledWell",
   componentId: "sc-a5831c-0"
-})(["background-color:", ";color:", " ", ";"], props => props.isRecessed && getColorV8('neutralHue', 100, props.theme), props => getColorV8('neutralHue', 600, props.theme), props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["", " ", ";"], colorStyles, p => retrieveComponentStyles(COMPONENT_ID, p));
 StyledWell.defaultProps = {
   theme: DEFAULT_THEME
 };