@elliemae/ds-banner 2.0.0-next.8 → 2.0.0-rc.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/cjs/DSBanner.js +57 -29
  2. package/cjs/propTypes.js +2 -1
  3. package/cjs/styles.js +128 -65
  4. package/cjs/utils/icons.js +5 -12
  5. package/cjs/utils/styleHelpers.js +8 -4
  6. package/esm/DSBanner.js +49 -21
  7. package/esm/propTypes.js +2 -1
  8. package/esm/styles.js +127 -64
  9. package/esm/utils/icons.js +1 -4
  10. package/esm/utils/styleHelpers.js +8 -4
  11. package/package.json +10 -5
  12. package/types/DSBanner.d.ts +37 -10
  13. package/types/propTypes.d.ts +31 -8
  14. package/types/styles.d.ts +7 -7
package/cjs/DSBanner.js CHANGED
@@ -5,8 +5,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  var _defineProperty = require('@babel/runtime/helpers/defineProperty');
6
6
  var _jsx = require('@babel/runtime/helpers/jsx');
7
7
  require('core-js/modules/web.dom-collections.iterator.js');
8
- var react = require('react');
9
- var CloseX = require('@elliemae/ds-icons/CloseX');
8
+ require('core-js/modules/esnext.async-iterator.filter.js');
9
+ require('core-js/modules/esnext.iterator.constructor.js');
10
+ require('core-js/modules/esnext.iterator.filter.js');
11
+ require('core-js/modules/esnext.async-iterator.for-each.js');
12
+ require('core-js/modules/esnext.iterator.for-each.js');
13
+ var React = require('react');
14
+ var dsIcons = require('@elliemae/ds-icons');
10
15
  var reactDesc = require('react-desc');
11
16
  var icons = require('./utils/icons.js');
12
17
  var propTypes = require('./propTypes.js');
@@ -18,38 +23,59 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
18
23
 
19
24
  var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
20
25
  var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
21
- var CloseX__default = /*#__PURE__*/_interopDefaultLegacy(CloseX);
26
+ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
22
27
 
23
- var _CloseX;
28
+ var _CloseX, _span;
24
29
 
25
30
  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
26
31
 
27
32
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
28
33
 
29
- const DSBanner = ({
30
- type,
31
- isOpen,
32
- onClose,
33
- label,
34
- body,
35
- actionLink,
36
- showCloseButton,
37
- containerProps
38
- }) => {
39
- const innerContainerRef = react.useRef(null);
40
- const linkRef = react.useRef(null);
41
- const [current, setCurrent] = react.useState(isOpen);
42
- const [isAnimating, setIsAnimating] = react.useState(false);
43
- const [height, setHeight] = react.useState(0);
44
- react.useEffect(() => {
45
- if (innerContainerRef.current) {
46
- setHeight(innerContainerRef.current.offsetHeight);
34
+ const DSBanner = _ref => {
35
+ let {
36
+ type,
37
+ isOpen,
38
+ onClose,
39
+ label,
40
+ body,
41
+ actionLink,
42
+ showCloseButton,
43
+ containerProps,
44
+ actionRef
45
+ } = _ref;
46
+ const innerContainerRef = React.useRef(null);
47
+ const linkRef = React.useRef(null);
48
+ const [current, setCurrent] = React.useState(isOpen);
49
+ const [isAnimating, setIsAnimating] = React.useState(false);
50
+ const [alertTabIndex, setAlertTabIndex] = React.useState(undefined);
51
+ const ownerState = {
52
+ type
53
+ };
54
+ React__default["default"].useEffect(() => {
55
+ if (actionRef && actionRef.current) {
56
+ actionRef.current.focusOnWrapper = () => {
57
+ if (innerContainerRef.current) {
58
+ setAlertTabIndex(0);
59
+ setTimeout(() => {
60
+ innerContainerRef.current.focus();
61
+ }, 100);
62
+ }
63
+ };
64
+
65
+ actionRef.current.focusOnLink = () => {
66
+ if (linkRef.current) {
67
+ linkRef.current.focus();
68
+ }
69
+ };
47
70
  }
48
- }, [isAnimating, isOpen]);
49
- react.useLayoutEffect(() => {
71
+ }, [actionRef]);
72
+ React.useLayoutEffect(() => {
50
73
  if (isOpen !== current || isOpen) setIsAnimating(true);else setIsAnimating(false);
51
74
  }, [isOpen, current]);
52
- const handleOnKeyDown = react.useCallback(e => {
75
+ const handleBlur = React.useCallback(() => {
76
+ setAlertTabIndex(undefined);
77
+ }, []);
78
+ const handleOnKeyDown = React.useCallback(e => {
53
79
  if (e.key === 'Enter' || e.key === ' ') {
54
80
  e.preventDefault();
55
81
  if (linkRef.current) linkRef.current.click();
@@ -61,9 +87,9 @@ const DSBanner = ({
61
87
  isOpen: isOpen,
62
88
  isAnimating: isAnimating,
63
89
  onAnimationEnd: () => setCurrent(isOpen),
64
- height: height,
65
90
  "data-testid": "ds-banner-container"
66
91
  }, containerProps), {}, {
92
+ ownerState: ownerState,
67
93
  children: /*#__PURE__*/jsxRuntime.jsxs(styles.StyledInnerContainer, {
68
94
  type: type,
69
95
  isOpen: isOpen,
@@ -71,6 +97,8 @@ const DSBanner = ({
71
97
  isAnimating: isAnimating,
72
98
  "data-testid": "ds-banner",
73
99
  role: "alert",
100
+ tabIndex: alertTabIndex,
101
+ onBlur: handleBlur,
74
102
  children: [/*#__PURE__*/_jsx__default["default"](styles.StyledIconContainer, {
75
103
  "data-testid": "ds-banner-icon"
76
104
  }, void 0, icons.icons[type]), /*#__PURE__*/_jsx__default["default"](styles.StyledTitle, {}, void 0, label), /*#__PURE__*/_jsx__default["default"](styles.StyledSubTitle, {}, void 0, /*#__PURE__*/_jsx__default["default"]("span", {}, void 0, body), actionLink && /*#__PURE__*/jsxRuntime.jsx(styles.StyledActionLink, {
@@ -82,16 +110,16 @@ const DSBanner = ({
82
110
  tabIndex: 0,
83
111
  isBodyEmpty: body,
84
112
  children: actionLink.label
85
- })), showCloseButton && /*#__PURE__*/_jsx__default["default"](styles.StyledCloseButton, {
113
+ })), showCloseButton ? /*#__PURE__*/_jsx__default["default"](styles.StyledCloseButton, {
86
114
  "data-testid": "ds-banner-close-button",
87
115
  buttonType: "secondary",
88
116
  onClick: onClose,
89
117
  "aria-label": "Close icon",
90
- icon: _CloseX || (_CloseX = /*#__PURE__*/_jsx__default["default"](CloseX__default["default"], {
118
+ icon: _CloseX || (_CloseX = /*#__PURE__*/_jsx__default["default"](dsIcons.CloseX, {
91
119
  width: "12px",
92
120
  height: "12px"
93
121
  }))
94
- })]
122
+ }) : _span || (_span = /*#__PURE__*/_jsx__default["default"]("span", {}))]
95
123
  })
96
124
  }));
97
125
  };
package/cjs/propTypes.js CHANGED
@@ -17,7 +17,8 @@ const propTypes = {
17
17
  label: reactDesc.PropTypes.string,
18
18
  onClick: reactDesc.PropTypes.func,
19
19
  href: reactDesc.PropTypes.string
20
- }).description('Properties of the ActionLink component').defaultValue({})
20
+ }).description('Properties of the ActionLink component').defaultValue({}),
21
+ actionRef: reactDesc.PropTypes.object.description("\n Reference to use actions:\n - focusOnLink: function to focus the banner\n - focusOnWrapper: function to focus the link\n ").defaultValue({})
21
22
  };
22
23
 
23
24
  exports.propTypes = propTypes;
package/cjs/styles.js CHANGED
@@ -2,77 +2,140 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var styled = require('styled-components');
6
- var DSButton = require('@elliemae/ds-basic/Button');
5
+ var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
6
+ var dsSystem = require('@elliemae/ds-system');
7
+ var DSButton = require('@elliemae/ds-button');
7
8
  var styleHelpers = require('./utils/styleHelpers.js');
8
9
 
9
10
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
10
11
 
11
- var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
12
+ var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
12
13
  var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
13
14
 
14
- const StyledBannerContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
15
- componentId: "sc-ffu2hq-0"
16
- })(["overflow:hidden;height:", ";", ";"], ({
17
- isOpen
18
- }) => isOpen ? 'auto' : '0px', ({
19
- isAnimating,
20
- isOpen,
21
- height
22
- }) => styleHelpers.handleAnimation(isAnimating, isOpen, height));
23
- const StyledInnerContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
24
- componentId: "sc-ffu2hq-1"
25
- })(["padding-right:6px;display:flex;align-items:center;min-height:41px;width:100%;background-color:", ";border-bottom:5px solid ", ";", ";"], ({
26
- theme
27
- }) => theme.colors.neutral['000'], ({
28
- type,
29
- theme
30
- }) => styleHelpers.handleBorderColor(type, theme), ({
31
- isAnimating,
32
- isOpen
33
- }) => styleHelpers.handleAnimation(isAnimating, isOpen));
34
- const StyledIconContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
35
- componentId: "sc-ffu2hq-2"
36
- })(["margin-right:", ";margin-left:", ";"], ({
37
- theme
38
- }) => theme.space.xxs, ({
39
- theme
40
- }) => theme.space.xs);
41
- const StyledTitle = /*#__PURE__*/styled__default["default"].div.withConfig({
42
- componentId: "sc-ffu2hq-3"
43
- })(["color:", ";font-size:", ";font-weight:", ";white-space:nowrap;"], ({
44
- theme
45
- }) => theme.colors.neutral[700], ({
46
- theme
47
- }) => theme.fontSizes.label[400], ({
48
- theme
49
- }) => theme.fontWeights.semibold);
50
- const StyledSubTitle = /*#__PURE__*/styled__default["default"].div.withConfig({
51
- componentId: "sc-ffu2hq-4"
52
- })(["width:100%;margin-left:", ";font-size:", ";font-weight:", ";"], ({
53
- theme
54
- }) => theme.space.xs, ({
55
- theme
56
- }) => theme.fontSizes.subTitle[400], ({
57
- theme
58
- }) => theme.fontWeights.regular);
59
- const StyledActionLink = /*#__PURE__*/styled__default["default"].a.withConfig({
60
- componentId: "sc-ffu2hq-5"
61
- })(["margin-left:", ";white-space:nowrap;text-decoration:none;line-height:1.1;font-size:", ";font-weight:", ";color:", ";"], ({
62
- theme,
63
- isBodyEmpty
64
- }) => isBodyEmpty ? theme.space.xs : 0, ({
65
- theme
66
- }) => theme.fontSizes.hyperlink[400], ({
67
- theme
68
- }) => theme.fontWeights.regular, ({
69
- theme
70
- }) => theme.colors.brand[600]);
71
- const StyledCloseButton = /*#__PURE__*/styled__default["default"](DSButton__default["default"]).withConfig({
72
- componentId: "sc-ffu2hq-6"
73
- })(["margin-left:", ";&:not(focus){border:transparent;}"], ({
74
- theme
75
- }) => theme.space.s);
15
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
16
+ const StyledBannerContainer = dsSystem.styled('div', {
17
+ name: 'DS-Banner',
18
+ slot: 'root'
19
+ })(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n overflow: hidden;\n height: ", ";\n ", ";\n"])), _ref => {
20
+ let {
21
+ isOpen
22
+ } = _ref;
23
+ return isOpen ? 'auto' : '0px';
24
+ }, _ref2 => {
25
+ let {
26
+ isAnimating,
27
+ isOpen,
28
+ height
29
+ } = _ref2;
30
+ return styleHelpers.handleAnimation(isAnimating, isOpen, height);
31
+ });
32
+ const StyledInnerContainer = dsSystem.styled('div', {
33
+ name: 'DS-Banner',
34
+ slot: 'innerContainer'
35
+ })(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\n padding-right: 6px;\n display: grid;\n align-items: center;\n min-height: 41px;\n width: 100%;\n background-color: ", ";\n border-bottom: 5px solid ", ";\n ", ";\n &:focus {\n position: relative;\n &:after {\n content: '';\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n pointer-events: none;\n border-radius: 2px;\n width: calc(100%);\n border: 2px solid #1e79c2;\n height: calc(100% + 4px);\n }\n }\n grid-template-columns: auto minmax(auto, auto) minmax(auto, 1fr) auto;\n"])), _ref3 => {
36
+ let {
37
+ theme
38
+ } = _ref3;
39
+ return theme.colors.neutral['000'];
40
+ }, _ref4 => {
41
+ let {
42
+ type,
43
+ theme
44
+ } = _ref4;
45
+ return styleHelpers.handleBorderColor(type, theme);
46
+ }, _ref5 => {
47
+ let {
48
+ isAnimating,
49
+ isOpen
50
+ } = _ref5;
51
+ return styleHelpers.handleAnimation(isAnimating, isOpen);
52
+ });
53
+ const StyledIconContainer = dsSystem.styled('div', {
54
+ name: 'DS-Banner',
55
+ slot: 'iconContainer'
56
+ })(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default["default"](["\n margin-right: ", ";\n margin-left: ", ";\n"])), _ref6 => {
57
+ let {
58
+ theme
59
+ } = _ref6;
60
+ return theme.space.xxs;
61
+ }, _ref7 => {
62
+ let {
63
+ theme
64
+ } = _ref7;
65
+ return theme.space.xs;
66
+ });
67
+ const StyledTitle = dsSystem.styled('div', {
68
+ name: 'DS-Banner',
69
+ slot: 'title'
70
+ })(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default["default"](["\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n"])), _ref8 => {
71
+ let {
72
+ theme
73
+ } = _ref8;
74
+ return theme.colors.neutral[700];
75
+ }, _ref9 => {
76
+ let {
77
+ theme
78
+ } = _ref9;
79
+ return theme.fontSizes.label[400];
80
+ }, _ref10 => {
81
+ let {
82
+ theme
83
+ } = _ref10;
84
+ return theme.fontWeights.semibold;
85
+ });
86
+ const StyledSubTitle = dsSystem.styled('div', {
87
+ name: 'DS-Banner',
88
+ slot: 'subtitle'
89
+ })(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default["default"](["\n width: 100%;\n margin-left: ", ";\n font-size: ", ";\n font-weight: ", ";\n"])), _ref11 => {
90
+ let {
91
+ theme
92
+ } = _ref11;
93
+ return theme.space.xs;
94
+ }, _ref12 => {
95
+ let {
96
+ theme
97
+ } = _ref12;
98
+ return theme.fontSizes.subTitle[400];
99
+ }, _ref13 => {
100
+ let {
101
+ theme
102
+ } = _ref13;
103
+ return theme.fontWeights.regular;
104
+ });
105
+ const StyledActionLink = dsSystem.styled('a', {
106
+ name: 'DS-Banner',
107
+ slot: 'action'
108
+ })(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral__default["default"](["\n margin-left: ", ";\n white-space: nowrap;\n text-decoration: none;\n line-height: 1.1;\n font-size: ", ";\n font-weight: ", ";\n color: ", ";\n"])), _ref14 => {
109
+ let {
110
+ theme,
111
+ isBodyEmpty
112
+ } = _ref14;
113
+ return isBodyEmpty ? theme.space.xs : 0;
114
+ }, _ref15 => {
115
+ let {
116
+ theme
117
+ } = _ref15;
118
+ return theme.fontSizes.hyperlink[400];
119
+ }, _ref16 => {
120
+ let {
121
+ theme
122
+ } = _ref16;
123
+ return theme.fontWeights.regular;
124
+ }, _ref17 => {
125
+ let {
126
+ theme
127
+ } = _ref17;
128
+ return theme.colors.brand[600];
129
+ });
130
+ const StyledCloseButton = dsSystem.styled(DSButton__default["default"], {
131
+ name: 'DS-Banner',
132
+ slot: 'closeButton'
133
+ })(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral__default["default"](["\n margin-left: ", ";\n &:not(focus) {\n border: transparent;\n }\n"])), _ref18 => {
134
+ let {
135
+ theme
136
+ } = _ref18;
137
+ return theme.space.xxs;
138
+ });
76
139
 
77
140
  exports.StyledActionLink = StyledActionLink;
78
141
  exports.StyledBannerContainer = StyledBannerContainer;
package/cjs/utils/icons.js CHANGED
@@ -4,36 +4,29 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var _jsx = require('@babel/runtime/helpers/jsx');
6
6
  require('react');
7
- var SuccessFill = require('@elliemae/ds-icons/SuccessFill');
8
- var InfoFill = require('@elliemae/ds-icons/InfoFill');
9
- var AlertsDetailFill = require('@elliemae/ds-icons/AlertsDetailFill');
10
- var WarningSquare = require('@elliemae/ds-icons/WarningSquare');
7
+ var dsIcons = require('@elliemae/ds-icons');
11
8
 
12
9
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
13
10
 
14
11
  var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
15
- var SuccessFill__default = /*#__PURE__*/_interopDefaultLegacy(SuccessFill);
16
- var InfoFill__default = /*#__PURE__*/_interopDefaultLegacy(InfoFill);
17
- var AlertsDetailFill__default = /*#__PURE__*/_interopDefaultLegacy(AlertsDetailFill);
18
- var WarningSquare__default = /*#__PURE__*/_interopDefaultLegacy(WarningSquare);
19
12
 
20
13
  const icons = {
21
- success: /*#__PURE__*/_jsx__default["default"](SuccessFill__default["default"], {
14
+ success: /*#__PURE__*/_jsx__default["default"](dsIcons.SuccessFill, {
22
15
  fill: "#207e56",
23
16
  width: "20px",
24
17
  height: "20px"
25
18
  }),
26
- info: /*#__PURE__*/_jsx__default["default"](InfoFill__default["default"], {
19
+ info: /*#__PURE__*/_jsx__default["default"](dsIcons.InfoFill, {
27
20
  fill: "#1e79c2",
28
21
  width: "20px",
29
22
  height: "20px"
30
23
  }),
31
- danger: /*#__PURE__*/_jsx__default["default"](AlertsDetailFill__default["default"], {
24
+ danger: /*#__PURE__*/_jsx__default["default"](dsIcons.AlertsDetailFill, {
32
25
  fill: "#c64252",
33
26
  width: "20px",
34
27
  height: "20px"
35
28
  }),
36
- warning: /*#__PURE__*/_jsx__default["default"](WarningSquare__default["default"], {
29
+ warning: /*#__PURE__*/_jsx__default["default"](dsIcons.WarningSquare, {
37
30
  fill: "#d17a00",
38
31
  width: "20px",
39
32
  height: "20px"
package/cjs/utils/styleHelpers.js CHANGED
@@ -18,9 +18,11 @@ const spanContainer = height => dsSystem.kfrm(_templateObject3 || (_templateObje
18
18
 
19
19
  const shrinkContainer = height => dsSystem.kfrm(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default["default"](["\n 0% {\n height: ", "px;\n }\n 100% {\n height: 0px;\n }\n"])), height);
20
20
 
21
- const handleBorderColor = (type, {
22
- colors
23
- }) => {
21
+ const handleBorderColor = (type, _ref) => {
22
+ let {
23
+ colors
24
+ } = _ref;
25
+
24
26
  switch (type) {
25
27
  case bannerTypes.BANNER_TYPES.SUCCESS:
26
28
  return colors.success[900];
@@ -35,7 +37,9 @@ const handleBorderColor = (type, {
35
37
  return colors.danger[900];
36
38
  }
37
39
  };
38
- const handleAnimation = (isAnimating, isOpen, height = null) => {
40
+ const handleAnimation = function (isAnimating, isOpen) {
41
+ let height = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
42
+
39
43
  if (isAnimating) {
40
44
  if (isOpen) {
41
45
  return dsSystem.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default["default"](["\n animation: ", " 0.5s ease-in;\n "])), height ? spanContainer(height) : slideIn);
package/esm/DSBanner.js CHANGED
@@ -1,8 +1,13 @@
1
+ import 'core-js/modules/esnext.async-iterator.filter.js';
2
+ import 'core-js/modules/esnext.iterator.constructor.js';
3
+ import 'core-js/modules/esnext.iterator.filter.js';
4
+ import 'core-js/modules/esnext.async-iterator.for-each.js';
5
+ import 'core-js/modules/esnext.iterator.for-each.js';
1
6
  import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
2
7
  import _jsx from '@babel/runtime/helpers/esm/jsx';
3
8
  import 'core-js/modules/web.dom-collections.iterator.js';
4
- import { useRef, useState, useEffect, useLayoutEffect, useCallback } from 'react';
5
- import CloseX from '@elliemae/ds-icons/CloseX';
9
+ import React, { useRef, useState, useLayoutEffect, useCallback } from 'react';
10
+ import { CloseX } from '@elliemae/ds-icons';
6
11
  import { describe } from 'react-desc';
7
12
  import { icons } from './utils/icons.js';
8
13
  import { propTypes } from './propTypes.js';
@@ -10,35 +15,56 @@ import { defaultProps } from './defaultProps.js';
10
15
  import { StyledBannerContainer, StyledInnerContainer, StyledIconContainer, StyledTitle, StyledSubTitle, StyledActionLink, StyledCloseButton } from './styles.js';
11
16
  import { jsx, jsxs } from 'react/jsx-runtime';
12
17
 
13
- var _CloseX;
18
+ var _CloseX, _span;
14
19
 
15
20
  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
16
21
 
17
22
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
18
23
 
19
- const DSBanner = ({
20
- type,
21
- isOpen,
22
- onClose,
23
- label,
24
- body,
25
- actionLink,
26
- showCloseButton,
27
- containerProps
28
- }) => {
24
+ const DSBanner = _ref => {
25
+ let {
26
+ type,
27
+ isOpen,
28
+ onClose,
29
+ label,
30
+ body,
31
+ actionLink,
32
+ showCloseButton,
33
+ containerProps,
34
+ actionRef
35
+ } = _ref;
29
36
  const innerContainerRef = useRef(null);
30
37
  const linkRef = useRef(null);
31
38
  const [current, setCurrent] = useState(isOpen);
32
39
  const [isAnimating, setIsAnimating] = useState(false);
33
- const [height, setHeight] = useState(0);
34
- useEffect(() => {
35
- if (innerContainerRef.current) {
36
- setHeight(innerContainerRef.current.offsetHeight);
40
+ const [alertTabIndex, setAlertTabIndex] = useState(undefined);
41
+ const ownerState = {
42
+ type
43
+ };
44
+ React.useEffect(() => {
45
+ if (actionRef && actionRef.current) {
46
+ actionRef.current.focusOnWrapper = () => {
47
+ if (innerContainerRef.current) {
48
+ setAlertTabIndex(0);
49
+ setTimeout(() => {
50
+ innerContainerRef.current.focus();
51
+ }, 100);
52
+ }
53
+ };
54
+
55
+ actionRef.current.focusOnLink = () => {
56
+ if (linkRef.current) {
57
+ linkRef.current.focus();
58
+ }
59
+ };
37
60
  }
38
- }, [isAnimating, isOpen]);
61
+ }, [actionRef]);
39
62
  useLayoutEffect(() => {
40
63
  if (isOpen !== current || isOpen) setIsAnimating(true);else setIsAnimating(false);
41
64
  }, [isOpen, current]);
65
+ const handleBlur = useCallback(() => {
66
+ setAlertTabIndex(undefined);
67
+ }, []);
42
68
  const handleOnKeyDown = useCallback(e => {
43
69
  if (e.key === 'Enter' || e.key === ' ') {
44
70
  e.preventDefault();
@@ -51,9 +77,9 @@ const DSBanner = ({
51
77
  isOpen: isOpen,
52
78
  isAnimating: isAnimating,
53
79
  onAnimationEnd: () => setCurrent(isOpen),
54
- height: height,
55
80
  "data-testid": "ds-banner-container"
56
81
  }, containerProps), {}, {
82
+ ownerState: ownerState,
57
83
  children: /*#__PURE__*/jsxs(StyledInnerContainer, {
58
84
  type: type,
59
85
  isOpen: isOpen,
@@ -61,6 +87,8 @@ const DSBanner = ({
61
87
  isAnimating: isAnimating,
62
88
  "data-testid": "ds-banner",
63
89
  role: "alert",
90
+ tabIndex: alertTabIndex,
91
+ onBlur: handleBlur,
64
92
  children: [/*#__PURE__*/_jsx(StyledIconContainer, {
65
93
  "data-testid": "ds-banner-icon"
66
94
  }, void 0, icons[type]), /*#__PURE__*/_jsx(StyledTitle, {}, void 0, label), /*#__PURE__*/_jsx(StyledSubTitle, {}, void 0, /*#__PURE__*/_jsx("span", {}, void 0, body), actionLink && /*#__PURE__*/jsx(StyledActionLink, {
@@ -72,7 +100,7 @@ const DSBanner = ({
72
100
  tabIndex: 0,
73
101
  isBodyEmpty: body,
74
102
  children: actionLink.label
75
- })), showCloseButton && /*#__PURE__*/_jsx(StyledCloseButton, {
103
+ })), showCloseButton ? /*#__PURE__*/_jsx(StyledCloseButton, {
76
104
  "data-testid": "ds-banner-close-button",
77
105
  buttonType: "secondary",
78
106
  onClick: onClose,
@@ -81,7 +109,7 @@ const DSBanner = ({
81
109
  width: "12px",
82
110
  height: "12px"
83
111
  }))
84
- })]
112
+ }) : _span || (_span = /*#__PURE__*/_jsx("span", {}))]
85
113
  })
86
114
  }));
87
115
  };
package/esm/propTypes.js CHANGED
@@ -13,7 +13,8 @@ const propTypes = {
13
13
  label: PropTypes.string,
14
14
  onClick: PropTypes.func,
15
15
  href: PropTypes.string
16
- }).description('Properties of the ActionLink component').defaultValue({})
16
+ }).description('Properties of the ActionLink component').defaultValue({}),
17
+ actionRef: PropTypes.object.description("\n Reference to use actions:\n - focusOnLink: function to focus the banner\n - focusOnWrapper: function to focus the link\n ").defaultValue({})
17
18
  };
18
19
 
19
20
  export { propTypes };
package/esm/styles.js CHANGED
@@ -1,68 +1,131 @@
1
- import styled from 'styled-components';
2
- import DSButton from '@elliemae/ds-basic/Button';
1
+ import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
2
+ import { styled } from '@elliemae/ds-system';
3
+ import DSButton from '@elliemae/ds-button';
3
4
  import { handleAnimation, handleBorderColor } from './utils/styleHelpers.js';
4
5
 
5
- const StyledBannerContainer = /*#__PURE__*/styled.div.withConfig({
6
- componentId: "sc-ffu2hq-0"
7
- })(["overflow:hidden;height:", ";", ";"], ({
8
- isOpen
9
- }) => isOpen ? 'auto' : '0px', ({
10
- isAnimating,
11
- isOpen,
12
- height
13
- }) => handleAnimation(isAnimating, isOpen, height));
14
- const StyledInnerContainer = /*#__PURE__*/styled.div.withConfig({
15
- componentId: "sc-ffu2hq-1"
16
- })(["padding-right:6px;display:flex;align-items:center;min-height:41px;width:100%;background-color:", ";border-bottom:5px solid ", ";", ";"], ({
17
- theme
18
- }) => theme.colors.neutral['000'], ({
19
- type,
20
- theme
21
- }) => handleBorderColor(type, theme), ({
22
- isAnimating,
23
- isOpen
24
- }) => handleAnimation(isAnimating, isOpen));
25
- const StyledIconContainer = /*#__PURE__*/styled.div.withConfig({
26
- componentId: "sc-ffu2hq-2"
27
- })(["margin-right:", ";margin-left:", ";"], ({
28
- theme
29
- }) => theme.space.xxs, ({
30
- theme
31
- }) => theme.space.xs);
32
- const StyledTitle = /*#__PURE__*/styled.div.withConfig({
33
- componentId: "sc-ffu2hq-3"
34
- })(["color:", ";font-size:", ";font-weight:", ";white-space:nowrap;"], ({
35
- theme
36
- }) => theme.colors.neutral[700], ({
37
- theme
38
- }) => theme.fontSizes.label[400], ({
39
- theme
40
- }) => theme.fontWeights.semibold);
41
- const StyledSubTitle = /*#__PURE__*/styled.div.withConfig({
42
- componentId: "sc-ffu2hq-4"
43
- })(["width:100%;margin-left:", ";font-size:", ";font-weight:", ";"], ({
44
- theme
45
- }) => theme.space.xs, ({
46
- theme
47
- }) => theme.fontSizes.subTitle[400], ({
48
- theme
49
- }) => theme.fontWeights.regular);
50
- const StyledActionLink = /*#__PURE__*/styled.a.withConfig({
51
- componentId: "sc-ffu2hq-5"
52
- })(["margin-left:", ";white-space:nowrap;text-decoration:none;line-height:1.1;font-size:", ";font-weight:", ";color:", ";"], ({
53
- theme,
54
- isBodyEmpty
55
- }) => isBodyEmpty ? theme.space.xs : 0, ({
56
- theme
57
- }) => theme.fontSizes.hyperlink[400], ({
58
- theme
59
- }) => theme.fontWeights.regular, ({
60
- theme
61
- }) => theme.colors.brand[600]);
62
- const StyledCloseButton = /*#__PURE__*/styled(DSButton).withConfig({
63
- componentId: "sc-ffu2hq-6"
64
- })(["margin-left:", ";&:not(focus){border:transparent;}"], ({
65
- theme
66
- }) => theme.space.s);
6
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
7
+ const StyledBannerContainer = styled('div', {
8
+ name: 'DS-Banner',
9
+ slot: 'root'
10
+ })(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n overflow: hidden;\n height: ", ";\n ", ";\n"])), _ref => {
11
+ let {
12
+ isOpen
13
+ } = _ref;
14
+ return isOpen ? 'auto' : '0px';
15
+ }, _ref2 => {
16
+ let {
17
+ isAnimating,
18
+ isOpen,
19
+ height
20
+ } = _ref2;
21
+ return handleAnimation(isAnimating, isOpen, height);
22
+ });
23
+ const StyledInnerContainer = styled('div', {
24
+ name: 'DS-Banner',
25
+ slot: 'innerContainer'
26
+ })(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n padding-right: 6px;\n display: grid;\n align-items: center;\n min-height: 41px;\n width: 100%;\n background-color: ", ";\n border-bottom: 5px solid ", ";\n ", ";\n &:focus {\n position: relative;\n &:after {\n content: '';\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n pointer-events: none;\n border-radius: 2px;\n width: calc(100%);\n border: 2px solid #1e79c2;\n height: calc(100% + 4px);\n }\n }\n grid-template-columns: auto minmax(auto, auto) minmax(auto, 1fr) auto;\n"])), _ref3 => {
27
+ let {
28
+ theme
29
+ } = _ref3;
30
+ return theme.colors.neutral['000'];
31
+ }, _ref4 => {
32
+ let {
33
+ type,
34
+ theme
35
+ } = _ref4;
36
+ return handleBorderColor(type, theme);
37
+ }, _ref5 => {
38
+ let {
39
+ isAnimating,
40
+ isOpen
41
+ } = _ref5;
42
+ return handleAnimation(isAnimating, isOpen);
43
+ });
44
+ const StyledIconContainer = styled('div', {
45
+ name: 'DS-Banner',
46
+ slot: 'iconContainer'
47
+ })(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n margin-right: ", ";\n margin-left: ", ";\n"])), _ref6 => {
48
+ let {
49
+ theme
50
+ } = _ref6;
51
+ return theme.space.xxs;
52
+ }, _ref7 => {
53
+ let {
54
+ theme
55
+ } = _ref7;
56
+ return theme.space.xs;
57
+ });
58
+ const StyledTitle = styled('div', {
59
+ name: 'DS-Banner',
60
+ slot: 'title'
61
+ })(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n"])), _ref8 => {
62
+ let {
63
+ theme
64
+ } = _ref8;
65
+ return theme.colors.neutral[700];
66
+ }, _ref9 => {
67
+ let {
68
+ theme
69
+ } = _ref9;
70
+ return theme.fontSizes.label[400];
71
+ }, _ref10 => {
72
+ let {
73
+ theme
74
+ } = _ref10;
75
+ return theme.fontWeights.semibold;
76
+ });
77
+ const StyledSubTitle = styled('div', {
78
+ name: 'DS-Banner',
79
+ slot: 'subtitle'
80
+ })(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n width: 100%;\n margin-left: ", ";\n font-size: ", ";\n font-weight: ", ";\n"])), _ref11 => {
81
+ let {
82
+ theme
83
+ } = _ref11;
84
+ return theme.space.xs;
85
+ }, _ref12 => {
86
+ let {
87
+ theme
88
+ } = _ref12;
89
+ return theme.fontSizes.subTitle[400];
90
+ }, _ref13 => {
91
+ let {
92
+ theme
93
+ } = _ref13;
94
+ return theme.fontWeights.regular;
95
+ });
96
+ const StyledActionLink = styled('a', {
97
+ name: 'DS-Banner',
98
+ slot: 'action'
99
+ })(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n margin-left: ", ";\n white-space: nowrap;\n text-decoration: none;\n line-height: 1.1;\n font-size: ", ";\n font-weight: ", ";\n color: ", ";\n"])), _ref14 => {
100
+ let {
101
+ theme,
102
+ isBodyEmpty
103
+ } = _ref14;
104
+ return isBodyEmpty ? theme.space.xs : 0;
105
+ }, _ref15 => {
106
+ let {
107
+ theme
108
+ } = _ref15;
109
+ return theme.fontSizes.hyperlink[400];
110
+ }, _ref16 => {
111
+ let {
112
+ theme
113
+ } = _ref16;
114
+ return theme.fontWeights.regular;
115
+ }, _ref17 => {
116
+ let {
117
+ theme
118
+ } = _ref17;
119
+ return theme.colors.brand[600];
120
+ });
121
+ const StyledCloseButton = styled(DSButton, {
122
+ name: 'DS-Banner',
123
+ slot: 'closeButton'
124
+ })(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n margin-left: ", ";\n &:not(focus) {\n border: transparent;\n }\n"])), _ref18 => {
125
+ let {
126
+ theme
127
+ } = _ref18;
128
+ return theme.space.xxs;
129
+ });
67
130
 
68
131
  export { StyledActionLink, StyledBannerContainer, StyledCloseButton, StyledIconContainer, StyledInnerContainer, StyledSubTitle, StyledTitle };
package/esm/utils/icons.js CHANGED
@@ -1,9 +1,6 @@
1
1
  import _jsx from '@babel/runtime/helpers/esm/jsx';
2
2
  import 'react';
3
- import SuccessFill from '@elliemae/ds-icons/SuccessFill';
4
- import InfoFill from '@elliemae/ds-icons/InfoFill';
5
- import AlertsDetailFill from '@elliemae/ds-icons/AlertsDetailFill';
6
- import WarningSquare from '@elliemae/ds-icons/WarningSquare';
3
+ import { SuccessFill, InfoFill, AlertsDetailFill, WarningSquare } from '@elliemae/ds-icons';
7
4
 
8
5
  const icons = {
9
6
  success: /*#__PURE__*/_jsx(SuccessFill, {
package/esm/utils/styleHelpers.js CHANGED
@@ -10,9 +10,11 @@ const spanContainer = height => kfrm(_templateObject3 || (_templateObject3 = _ta
10
10
 
11
11
  const shrinkContainer = height => kfrm(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n 0% {\n height: ", "px;\n }\n 100% {\n height: 0px;\n }\n"])), height);
12
12
 
13
- const handleBorderColor = (type, {
14
- colors
15
- }) => {
13
+ const handleBorderColor = (type, _ref) => {
14
+ let {
15
+ colors
16
+ } = _ref;
17
+
16
18
  switch (type) {
17
19
  case BANNER_TYPES.SUCCESS:
18
20
  return colors.success[900];
@@ -27,7 +29,9 @@ const handleBorderColor = (type, {
27
29
  return colors.danger[900];
28
30
  }
29
31
  };
30
- const handleAnimation = (isAnimating, isOpen, height = null) => {
32
+ const handleAnimation = function (isAnimating, isOpen) {
33
+ let height = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
34
+
31
35
  if (isAnimating) {
32
36
  if (isOpen) {
33
37
  return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n animation: ", " 0.5s ease-in;\n "])), height ? spanContainer(height) : slideIn);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-banner",
3
- "version": "2.0.0-next.8",
3
+ "version": "2.0.0-rc.11",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Banner",
6
6
  "module": "./esm/index.js",
@@ -60,17 +60,22 @@
60
60
  "build": "node ../../scripts/build/build.js"
61
61
  },
62
62
  "dependencies": {
63
- "@elliemae/ds-basic": "2.0.0-next.8",
64
- "@elliemae/ds-classnames": "2.0.0-next.8"
63
+ "@elliemae/ds-button": "2.0.0-rc.11",
64
+ "@elliemae/ds-icons": "2.0.0-rc.11",
65
+ "@elliemae/ds-system": "2.0.0-rc.11",
66
+ "react-desc": "~4.1.2"
65
67
  },
66
68
  "devDependencies": {
67
- "styled-components": "~5.3.1"
69
+ "@testing-library/jest-dom": "~5.15.0",
70
+ "@testing-library/react": "~12.1.2",
71
+ "@testing-library/user-event": "~13.5.0",
72
+ "styled-components": "~5.3.3"
68
73
  },
69
74
  "peerDependencies": {
70
75
  "lodash": "^4.17.21",
71
76
  "react": "^17.0.2",
72
77
  "react-dom": "^17.0.2",
73
- "styled-components": "^5.3.1"
78
+ "styled-components": "^5.3.3"
74
79
  },
75
80
  "publishConfig": {
76
81
  "access": "public",
package/types/DSBanner.d.ts CHANGED
@@ -1,7 +1,8 @@
1
+ /// <reference path="../../../../shared/typings/react-desc.d.ts" />
1
2
  /// <reference types="react" />
2
3
  import type { BannerPropsT } from './index.d';
3
4
  declare const DSBanner: {
4
- ({ type, isOpen, onClose, label, body, actionLink, showCloseButton, containerProps, }: BannerPropsT): JSX.Element;
5
+ ({ type, isOpen, onClose, label, body, actionLink, showCloseButton, containerProps, actionRef, }: BannerPropsT): JSX.Element;
5
6
  defaultProps: {
6
7
  containerProps: {};
7
8
  label: string;
@@ -17,16 +18,42 @@ declare const DSBanner: {
17
18
  };
18
19
  };
19
20
  propTypes: {
20
- containerProps: any;
21
- label: any;
22
- body: any;
23
- type: any;
24
- onClose: any;
25
- isOpen: any;
26
- showCloseButton: any;
27
- actionLink: any;
21
+ containerProps: {
22
+ deprecated: import("react-desc").PropTypesDescValidator;
23
+ };
24
+ label: {
25
+ deprecated: import("react-desc").PropTypesDescValidator;
26
+ };
27
+ body: {
28
+ deprecated: import("react-desc").PropTypesDescValidator;
29
+ };
30
+ type: {
31
+ deprecated: import("react-desc").PropTypesDescValidator;
32
+ };
33
+ onClose: {
34
+ defaultValue<T = unknown>(arg: T): {
35
+ deprecated: import("react-desc").PropTypesDescValidator;
36
+ };
37
+ isRequired: import("react-desc").PropTypesDescValidator;
38
+ };
39
+ isOpen: {
40
+ deprecated: import("react-desc").PropTypesDescValidator;
41
+ };
42
+ showCloseButton: {
43
+ deprecated: import("react-desc").PropTypesDescValidator;
44
+ };
45
+ actionLink: {
46
+ deprecated: import("react-desc").PropTypesDescValidator;
47
+ };
48
+ actionRef: {
49
+ deprecated: import("react-desc").PropTypesDescValidator;
50
+ };
28
51
  };
29
52
  };
30
- declare const DSBannerWithSchema: any;
53
+ declare const DSBannerWithSchema: {
54
+ (props?: BannerPropsT | undefined): JSX.Element;
55
+ propTypes: unknown;
56
+ toTypescript: () => import("react-desc").TypescriptSchema;
57
+ };
31
58
  export default DSBanner;
32
59
  export { DSBannerWithSchema };
package/types/propTypes.d.ts CHANGED
@@ -1,10 +1,33 @@
1
+ /// <reference path="../../../../shared/typings/react-desc.d.ts" />
1
2
  export declare const propTypes: {
2
- containerProps: any;
3
- label: any;
4
- body: any;
5
- type: any;
6
- onClose: any;
7
- isOpen: any;
8
- showCloseButton: any;
9
- actionLink: any;
3
+ containerProps: {
4
+ deprecated: import("react-desc").PropTypesDescValidator;
5
+ };
6
+ label: {
7
+ deprecated: import("react-desc").PropTypesDescValidator;
8
+ };
9
+ body: {
10
+ deprecated: import("react-desc").PropTypesDescValidator;
11
+ };
12
+ type: {
13
+ deprecated: import("react-desc").PropTypesDescValidator;
14
+ };
15
+ onClose: {
16
+ defaultValue<T = unknown>(arg: T): {
17
+ deprecated: import("react-desc").PropTypesDescValidator;
18
+ };
19
+ isRequired: import("react-desc").PropTypesDescValidator;
20
+ };
21
+ isOpen: {
22
+ deprecated: import("react-desc").PropTypesDescValidator;
23
+ };
24
+ showCloseButton: {
25
+ deprecated: import("react-desc").PropTypesDescValidator;
26
+ };
27
+ actionLink: {
28
+ deprecated: import("react-desc").PropTypesDescValidator;
29
+ };
30
+ actionRef: {
31
+ deprecated: import("react-desc").PropTypesDescValidator;
32
+ };
10
33
  };
package/types/styles.d.ts CHANGED
@@ -1,8 +1,8 @@
1
1
  import type { StyledActionLinkT, StyledBannerContainerT, StyledInnerContainerT } from './index.d';
2
- export declare const StyledBannerContainer: import("styled-components").StyledComponent<"div", any, StyledBannerContainerT, never>;
3
- export declare const StyledInnerContainer: import("styled-components").StyledComponent<"div", any, StyledInnerContainerT, never>;
4
- export declare const StyledIconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
5
- export declare const StyledTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
6
- export declare const StyledSubTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
7
- export declare const StyledActionLink: import("styled-components").StyledComponent<"a", any, StyledActionLinkT, never>;
8
- export declare const StyledCloseButton: import("styled-components").StyledComponent<any, any, object, string | number | symbol>;
2
+ export declare const StyledBannerContainer: import("styled-components").StyledComponent<StyledBannerContainerT, import("@elliemae/ds-system/types/styled/types").Theme, {}, never>;
3
+ export declare const StyledInnerContainer: import("styled-components").StyledComponent<StyledInnerContainerT, import("@elliemae/ds-system/types/styled/types").Theme, {}, never>;
4
+ export declare const StyledIconContainer: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system/types/styled/types").Theme, {}, never>;
5
+ export declare const StyledTitle: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system/types/styled/types").Theme, {}, never>;
6
+ export declare const StyledSubTitle: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system/types/styled/types").Theme, {}, never>;
7
+ export declare const StyledActionLink: import("styled-components").StyledComponent<StyledActionLinkT, import("@elliemae/ds-system/types/styled/types").Theme, {}, never>;
8
+ export declare const StyledCloseButton: import("styled-components").StyledComponent<any, import("@elliemae/ds-system/types/styled/types").Theme, any, any>;