@elliemae/ds-chat 2.0.0-alpha.4 → 2.0.0-alpha.8

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 (45) hide show
  1. package/cjs/parts/bubble/ChatBubble.js +10 -10
  2. package/cjs/parts/bubble/ChatBubbleArrow.js +13 -13
  3. package/cjs/parts/bubble/props.js +1 -1
  4. package/cjs/parts/bubble/styled.js +10 -10
  5. package/cjs/parts/chat-card/ChatCard.js +6 -6
  6. package/cjs/parts/chat-card/styled.js +6 -6
  7. package/cjs/parts/chat-composer/ChatContainerComposer.js +20 -20
  8. package/cjs/parts/chat-composer/styled.js +5 -5
  9. package/cjs/parts/chat-container/ChatContainer.js +12 -13
  10. package/cjs/parts/chat-container/config/useValidateProps.js +1 -1
  11. package/cjs/parts/chat-container/props.js +4 -4
  12. package/cjs/parts/chat-container/styled.js +3 -3
  13. package/cjs/parts/chat-container-header/ChatContainerHeader.js +5 -5
  14. package/cjs/parts/chat-container-header/styled.js +3 -3
  15. package/cjs/parts/chat-container-messages-list/ChatContainerMessagesList.js +15 -16
  16. package/cjs/parts/chat-container-messages-list/config/useValidateProps.js +1 -1
  17. package/cjs/parts/chat-container-messages-list/props.js +1 -1
  18. package/cjs/parts/chat-container-messages-list/styled.js +6 -6
  19. package/cjs/parts/chat-empty-state/ChatEmptyState.js +6 -6
  20. package/cjs/parts/chat-empty-state/styled.js +2 -2
  21. package/cjs/parts/chat-sidebar/SideBarChat.js +6 -6
  22. package/cjs/parts/chat-sidebar/styled.js +2 -2
  23. package/cjs/parts/floating-button/FloatingButton.js +2 -2
  24. package/cjs/parts/floating-button/styled.js +1 -1
  25. package/cjs/parts/floating-container/styled.js +1 -1
  26. package/cjs/parts/grid-influencer/InfluencerContainer.js +2 -2
  27. package/cjs/parts/grid-influencer/styled.js +2 -2
  28. package/cjs/parts/message-delimiter/MessageDelimiter.js +3 -3
  29. package/cjs/parts/message-delimiter/styled.js +3 -3
  30. package/cjs/parts/sidebar-button/SidebarButton.js +6 -6
  31. package/cjs/parts/sidebar-button/props.js +2 -2
  32. package/cjs/parts/sidebar-button/styled.js +3 -3
  33. package/cjs/parts/system-message/SystemMessage.js +5 -5
  34. package/cjs/parts/system-message/style.js +5 -5
  35. package/cjs/parts/tile-button/TileButton.js +14 -14
  36. package/cjs/parts/tile-button/props.js +1 -1
  37. package/cjs/parts/tile-button/styled.js +8 -8
  38. package/esm/parts/bubble/styled.js +1 -1
  39. package/esm/parts/chat-container/ChatContainer.js +1 -2
  40. package/esm/parts/chat-container/config/useValidateProps.js +2 -2
  41. package/esm/parts/chat-container/props.js +4 -4
  42. package/esm/parts/chat-container-messages-list/ChatContainerMessagesList.js +1 -2
  43. package/esm/parts/chat-container-messages-list/config/useValidateProps.js +2 -2
  44. package/esm/parts/chat-container-messages-list/props.js +1 -1
  45. package/package.json +4 -4
package/cjs/parts/bubble/ChatBubble.js CHANGED
@@ -30,38 +30,38 @@ const ChatBubble = props => {
30
30
  errorMessage,
31
31
  helpMessage
32
32
  } = props;
33
- return /*#__PURE__*/_jsx__default['default'](styled.StyledWrapper, {
33
+ return /*#__PURE__*/_jsx__default["default"](styled.StyledWrapper, {
34
34
  "data-testid": `ds-chat-bubble-${dsId}`,
35
35
  type: type
36
- }, void 0, /*#__PURE__*/_jsx__default['default'](styled.StyledColoredBubble, {
36
+ }, void 0, /*#__PURE__*/_jsx__default["default"](styled.StyledColoredBubble, {
37
37
  type: type
38
- }, void 0, /*#__PURE__*/_jsx__default['default'](styled.StyledTitleBubble, {
38
+ }, void 0, /*#__PURE__*/_jsx__default["default"](styled.StyledTitleBubble, {
39
39
  cols: [1, 'auto'],
40
40
  gutter: "xs",
41
41
  alignItems: "flex-end",
42
42
  className: "sr-only"
43
- }, void 0, /*#__PURE__*/_jsx__default['default'](styled.StyledTitleLeftBubble, {
43
+ }, void 0, /*#__PURE__*/_jsx__default["default"](styled.StyledTitleLeftBubble, {
44
44
  alignItems: "center",
45
45
  "data-testid": `chat-bubble-title-${dsId}`
46
- }, void 0, title), /*#__PURE__*/_jsx__default['default'](styled.StyledTitleRightBubble, {
46
+ }, void 0, title), /*#__PURE__*/_jsx__default["default"](styled.StyledTitleRightBubble, {
47
47
  alignItems: "center",
48
48
  type: type,
49
49
  "data-testid": `chat-bubble-time-${dsId}`
50
- }, void 0, time)), /*#__PURE__*/_jsx__default['default'](styled.StyleBodyWrapper, {
50
+ }, void 0, time)), /*#__PURE__*/_jsx__default["default"](styled.StyleBodyWrapper, {
51
51
  "data-testid": `chat-bubble-body-${dsId}`
52
- }, void 0, body), /*#__PURE__*/_jsx__default['default'](ChatBubbleArrow.ChatBubbleArrow, {
52
+ }, void 0, body), /*#__PURE__*/_jsx__default["default"](ChatBubbleArrow.ChatBubbleArrow, {
53
53
  type: type
54
- })), errorMessage ? /*#__PURE__*/_jsx__default['default'](styled.StyleErrorMessage, {
54
+ })), errorMessage ? /*#__PURE__*/_jsx__default["default"](styled.StyleErrorMessage, {
55
55
  "data-testid": `chat-bubble-error-message-${dsId}`,
56
56
  p: "xxs",
57
57
  gutter: "xxs",
58
58
  cols: [1, 'auto']
59
- }, void 0, /*#__PURE__*/_jsx__default['default']("span", {}, void 0, errorMessage), _Warning || (_Warning = /*#__PURE__*/_jsx__default['default'](Warning__default['default'], {}))) : null, helpMessage ? /*#__PURE__*/_jsx__default['default'](styled.StyleHelpMessage, {
59
+ }, void 0, /*#__PURE__*/_jsx__default["default"]("span", {}, void 0, errorMessage), _Warning || (_Warning = /*#__PURE__*/_jsx__default["default"](Warning__default["default"], {}))) : null, helpMessage ? /*#__PURE__*/_jsx__default["default"](styled.StyleHelpMessage, {
60
60
  "data-testid": `chat-bubble-help-message-${dsId}`,
61
61
  p: "xxs",
62
62
  gutter: "xxs",
63
63
  cols: [1, 'auto']
64
- }, void 0, /*#__PURE__*/_jsx__default['default']("span", {}, void 0, helpMessage)) : null);
64
+ }, void 0, /*#__PURE__*/_jsx__default["default"]("span", {}, void 0, helpMessage)) : null);
65
65
  };
66
66
 
67
67
  const ChatBubbleWithSchema = reactDesc.describe(ChatBubble);
package/cjs/parts/bubble/ChatBubbleArrow.js CHANGED
@@ -14,61 +14,61 @@ var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
14
14
  var _svg, _svg2;
15
15
  const ChatBubbleArrow = ({
16
16
  type
17
- }) => /*#__PURE__*/_jsx__default['default'](styled.StyledBubbleArrow, {}, void 0, type === props.BUBBLE_TYPES.RECIPIENT ? _svg || (_svg = /*#__PURE__*/_jsx__default['default']("svg", {
17
+ }) => /*#__PURE__*/_jsx__default["default"](styled.StyledBubbleArrow, {}, void 0, type === props.BUBBLE_TYPES.RECIPIENT ? _svg || (_svg = /*#__PURE__*/_jsx__default["default"]("svg", {
18
18
  width: "15px",
19
19
  height: "14px",
20
20
  viewBox: "0 0 15 14"
21
- }, void 0, /*#__PURE__*/_jsx__default['default']("defs", {}, void 0, /*#__PURE__*/_jsx__default['default']("path", {
21
+ }, void 0, /*#__PURE__*/_jsx__default["default"]("defs", {}, void 0, /*#__PURE__*/_jsx__default["default"]("path", {
22
22
  d: "M12,8.5 C12,7.9373169 11.6782751,7.4856453 11.2282104,7.196228 C11.2286673,7.1967363 3,2 3,2 L3,10 L10.5627441,10 L10.5658569,9.9933472 C11.3630371,9.9580688 12,9.3058472 12,8.5 Z",
23
23
  id: "path-1"
24
- }), /*#__PURE__*/_jsx__default['default']("filter", {
24
+ }), /*#__PURE__*/_jsx__default["default"]("filter", {
25
25
  x: "-55.6%",
26
26
  y: "-50.0%",
27
27
  width: "211.1%",
28
28
  height: "225.0%",
29
29
  filterUnits: "objectBoundingBox",
30
30
  id: "filter-2"
31
- }, void 0, /*#__PURE__*/_jsx__default['default']("feOffset", {
31
+ }, void 0, /*#__PURE__*/_jsx__default["default"]("feOffset", {
32
32
  dx: "2.3",
33
33
  dy: "1.2",
34
34
  in: "SourceAlpha",
35
35
  result: "shadowOffsetOuter1"
36
- }), /*#__PURE__*/_jsx__default['default']("feGaussianBlur", {
36
+ }), /*#__PURE__*/_jsx__default["default"]("feGaussianBlur", {
37
37
  stdDeviation: "1.5",
38
38
  in: "shadowOffsetOuter1",
39
39
  result: "shadowBlurOuter1"
40
- }), /*#__PURE__*/_jsx__default['default']("feColorMatrix", {
40
+ }), /*#__PURE__*/_jsx__default["default"]("feColorMatrix", {
41
41
  values: "0 0 0 0 0.207843137 0 0 0 0 0.235294118 0 0 0 0 0.274509804 0 0 0 0.8 0",
42
42
  type: "matrix",
43
43
  in: "shadowBlurOuter1"
44
- }))), /*#__PURE__*/_jsx__default['default']("g", {
44
+ }))), /*#__PURE__*/_jsx__default["default"]("g", {
45
45
  id: "[DSK]-Visual-Design",
46
46
  stroke: "none",
47
47
  strokeWidth: "1",
48
48
  fill: "none",
49
49
  fillRule: "evenodd"
50
- }, void 0, /*#__PURE__*/_jsx__default['default']("g", {
50
+ }, void 0, /*#__PURE__*/_jsx__default["default"]("g", {
51
51
  id: "Path-Copy",
52
52
  transform: "translate(7.500000, 6.000000) scale(-1, 1) translate(-7.500000, -6.000000) "
53
- }, void 0, /*#__PURE__*/_jsx__default['default']("use", {
53
+ }, void 0, /*#__PURE__*/_jsx__default["default"]("use", {
54
54
  fill: "black",
55
55
  fillOpacity: "1",
56
56
  filter: "url(#filter-2)",
57
57
  xlinkHref: "#path-1"
58
- }), /*#__PURE__*/_jsx__default['default']("use", {
58
+ }), /*#__PURE__*/_jsx__default["default"]("use", {
59
59
  fill: "#FFFFFF",
60
60
  fillRule: "evenodd",
61
61
  xlinkHref: "#path-1"
62
- }))))) : _svg2 || (_svg2 = /*#__PURE__*/_jsx__default['default']("svg", {
62
+ }))))) : _svg2 || (_svg2 = /*#__PURE__*/_jsx__default["default"]("svg", {
63
63
  width: "9px",
64
64
  height: "8px",
65
65
  viewBox: "0 0 9 8"
66
- }, void 0, /*#__PURE__*/_jsx__default['default']("g", {
66
+ }, void 0, /*#__PURE__*/_jsx__default["default"]("g", {
67
67
  stroke: "none",
68
68
  strokeWidth: "1",
69
69
  fill: "none",
70
70
  fillRule: "evenodd"
71
- }, void 0, /*#__PURE__*/_jsx__default['default']("path", {
71
+ }, void 0, /*#__PURE__*/_jsx__default["default"]("path", {
72
72
  d: "M9,6.5 C9,5.9373169 8.6782751,5.4856453 8.2282104,5.196228 C8.2286673,5.1967363 0,0 0,0 L0,8 L7.5627441,8 L7.5658569,7.9933472 C8.3630371,7.9580688 9,7.3058472 9,6.5 Z",
73
73
  id: "Path",
74
74
  fill: "#1E79C2"
package/cjs/parts/bubble/props.js CHANGED
@@ -48,7 +48,7 @@ const propsBubbles = {
48
48
  */
49
49
 
50
50
  const propsArrowBubble = {
51
- type: propsTypes__default['default'].oneOf([BUBBLE_TYPES.RECIPIENT, BUBBLE_TYPES.SENDER])
51
+ type: propsTypes__default["default"].oneOf([BUBBLE_TYPES.RECIPIENT, BUBBLE_TYPES.SENDER])
52
52
  };
53
53
 
54
54
  exports.BUBBLE_TYPES = BUBBLE_TYPES;
package/cjs/parts/bubble/styled.js CHANGED
@@ -12,33 +12,33 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
12
12
 
13
13
  /* eslint-disable max-lines */
14
14
 
15
- const StyledWrapper = /*#__PURE__*/styled__default['default'].div.withConfig({
15
+ const StyledWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
16
16
  componentId: "sc-fe8e9o-0"
17
17
  })(["min-width:224px;border-radius:10px;"]); // Bubble HEADER
18
18
 
19
- const StyledTitleBubble = /*#__PURE__*/styled__default['default'](dsGrid.Grid).withConfig({
19
+ const StyledTitleBubble = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
20
20
  componentId: "sc-fe8e9o-1"
21
21
  })(["padding-top:6px;padding-left:10px;padding-right:10px;padding-bottom:4px;"]);
22
- const StyledTitleLeftBubble = /*#__PURE__*/styled__default['default'](dsGrid.Grid).withConfig({
22
+ const StyledTitleLeftBubble = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
23
23
  componentId: "sc-fe8e9o-2"
24
24
  })(["font-size:13px;font-weight:600;"]);
25
- const StyledTitleRightBubble = /*#__PURE__*/styled__default['default'](dsGrid.Grid).withConfig({
25
+ const StyledTitleRightBubble = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
26
26
  componentId: "sc-fe8e9o-3"
27
27
  })(["font-size:13px;font-weight:400;color:", ";"], props$1 => props$1.type === props.BUBBLE_TYPES.SENDER ? '#FFF' : '#657489');
28
- const StyleBodyWrapper = /*#__PURE__*/styled__default['default'].div.withConfig({
28
+ const StyleBodyWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
29
29
  componentId: "sc-fe8e9o-4"
30
- })(["font-size:13px;font-weight:400;line-height:15px;min-height:32px;padding:0px 10px 8px 10px;"]);
31
- const StyleErrorMessage = /*#__PURE__*/styled__default['default'].div.withConfig({
30
+ })(["font-size:13px;font-weight:400;line-height:15px;min-height:18px;padding:0px 10px 8px 10px;"]);
31
+ const StyleErrorMessage = /*#__PURE__*/styled__default["default"].div.withConfig({
32
32
  componentId: "sc-fe8e9o-5"
33
33
  })(["font-size:12px;font-weight:400;padding-top:", ";padding-bottom:", ";color:", ";align-items:flex-end;justify-content:center;text-align:right;line-height:15px;svg{fill:", ";}a{font-size:12px;color:", ";}.em-ds-icon{margin-left:8px;}"], props => props.theme.space.xxxs, props => props.theme.space.xxxs, props => props.theme.colors.danger[900], props => props.theme.colors.danger[900], props => props.theme.colors.danger[900]);
34
- const StyleHelpMessage = /*#__PURE__*/styled__default['default'](StyleErrorMessage).withConfig({
34
+ const StyleHelpMessage = /*#__PURE__*/styled__default["default"](StyleErrorMessage).withConfig({
35
35
  componentId: "sc-fe8e9o-6"
36
36
  })(["font-size:12px;line-height:15px;color:", ";svg{fill:", ";}a{font-size:12px;color:", ";}"], props => props.theme.colors.neutral[500], props => props.theme.colors.danger[500], props => props.theme.colors.danger[500]); // bubble sender/ recipient
37
37
 
38
- const StyledBubbleArrow = /*#__PURE__*/styled__default['default'].div.withConfig({
38
+ const StyledBubbleArrow = /*#__PURE__*/styled__default["default"].div.withConfig({
39
39
  componentId: "sc-fe8e9o-7"
40
40
  })(["display:block;content:'';position:absolute;bottom:10px;height:15px;"]);
41
- const StyledColoredBubble = /*#__PURE__*/styled__default['default'].div.withConfig({
41
+ const StyledColoredBubble = /*#__PURE__*/styled__default["default"].div.withConfig({
42
42
  componentId: "sc-fe8e9o-8"
43
43
  })(["min-width:224px;border-radius:10px;position:relative;", ""], props$1 => props$1.type === props.BUBBLE_TYPES.SENDER ? `
44
44
  border: 1px solid ${props$1.theme.colors.brand['700']};
package/cjs/parts/chat-card/ChatCard.js CHANGED
@@ -23,18 +23,18 @@ const ChatCard = props => {
23
23
  time,
24
24
  rightAddon
25
25
  } = props;
26
- return /*#__PURE__*/_jsx__default['default'](styled.Wrapper, {
26
+ return /*#__PURE__*/_jsx__default["default"](styled.Wrapper, {
27
27
  cols: ['1fr', 'auto'],
28
28
  "data-testid": "chat-card-wrapper"
29
- }, void 0, /*#__PURE__*/_jsx__default['default'](styled.MainContent, {}, void 0, /*#__PURE__*/_jsx__default['default'](styled.Title, {
29
+ }, void 0, /*#__PURE__*/_jsx__default["default"](styled.MainContent, {}, void 0, /*#__PURE__*/_jsx__default["default"](styled.Title, {
30
30
  "data-testid": "chat-card-title"
31
- }, void 0, title), /*#__PURE__*/_jsx__default['default'](styled.Content, {
31
+ }, void 0, title), /*#__PURE__*/_jsx__default["default"](styled.Content, {
32
32
  "data-testid": "chat-card-content"
33
- }, void 0, /*#__PURE__*/_jsx__default['default'](dsTruncatedTooltipText.SimpleTruncatedTooltipText, {
33
+ }, void 0, /*#__PURE__*/_jsx__default["default"](dsTruncatedTooltipText.SimpleTruncatedTooltipText, {
34
34
  value: content
35
- })), time && /*#__PURE__*/_jsx__default['default'](styled.Time, {
35
+ })), time && /*#__PURE__*/_jsx__default["default"](styled.Time, {
36
36
  "data-testid": "chat-card-time"
37
- }, void 0, time)), rightAddon && /*#__PURE__*/_jsx__default['default'](styled.RightAddon, {
37
+ }, void 0, time)), rightAddon && /*#__PURE__*/_jsx__default["default"](styled.RightAddon, {
38
38
  "data-testid": "chat-card-right-addon"
39
39
  }, void 0, rightAddon));
40
40
  };
package/cjs/parts/chat-card/styled.js CHANGED
@@ -9,22 +9,22 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
9
9
 
10
10
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
11
11
 
12
- const Wrapper = /*#__PURE__*/styled__default['default'](dsGrid.Grid).withConfig({
12
+ const Wrapper = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
13
13
  componentId: "sc-s0g4hn-0"
14
14
  })(["min-width:248px;border:1px;border-bottom:1px solid #ccc;padding:12px 12px;"]);
15
- const MainContent = /*#__PURE__*/styled__default['default'].div.withConfig({
15
+ const MainContent = /*#__PURE__*/styled__default["default"].div.withConfig({
16
16
  componentId: "sc-s0g4hn-1"
17
17
  })([""]);
18
- const Title = /*#__PURE__*/styled__default['default'].p.withConfig({
18
+ const Title = /*#__PURE__*/styled__default["default"].p.withConfig({
19
19
  componentId: "sc-s0g4hn-2"
20
20
  })(["font-size:16px;font-weight:600;margin:0;"]);
21
- const Content = /*#__PURE__*/styled__default['default'].p.withConfig({
21
+ const Content = /*#__PURE__*/styled__default["default"].p.withConfig({
22
22
  componentId: "sc-s0g4hn-3"
23
23
  })(["font-size:12px;font-weight:400;line-height:1;margin:0;"]);
24
- const Time = /*#__PURE__*/styled__default['default'].p.withConfig({
24
+ const Time = /*#__PURE__*/styled__default["default"].p.withConfig({
25
25
  componentId: "sc-s0g4hn-4"
26
26
  })(["font-size:12px;font-weight:100;margin:0;margin-top:8px;font-weight:", ";color:", ";"], props => props.theme.fontWeights.regular, props => props.theme.colors.neutral['500']);
27
- const RightAddon = /*#__PURE__*/styled__default['default'].div.withConfig({
27
+ const RightAddon = /*#__PURE__*/styled__default["default"].div.withConfig({
28
28
  componentId: "sc-s0g4hn-5"
29
29
  })(["height:fit-content;margin-left:12px;"]);
30
30
 
package/cjs/parts/chat-composer/ChatContainerComposer.js CHANGED
@@ -25,7 +25,7 @@ var _PaperAirplane, _Grid;
25
25
 
26
26
  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; }
27
27
 
28
- 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
+ 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; }
29
29
 
30
30
  const ChatComposer = props => {
31
31
  var _input$current;
@@ -45,13 +45,13 @@ const ChatComposer = props => {
45
45
  dataTestid,
46
46
  actionRef
47
47
  } = props;
48
- const input = React__default['default'].useRef();
49
- const inputSize = React__default['default'].useRef();
50
- const inputSend = React__default['default'].useRef();
51
- const [height, setHeight] = React__default['default'].useState(32);
52
- const internalMaxHeight = React__default['default'].useMemo(() => maxHeight - 24, [maxHeight]);
53
- const [showScroll, setShowScroll] = React__default['default'].useState(true);
54
- React__default['default'].useEffect(() => {
48
+ const input = React__default["default"].useRef();
49
+ const inputSize = React__default["default"].useRef();
50
+ const inputSend = React__default["default"].useRef();
51
+ const [height, setHeight] = React__default["default"].useState(32);
52
+ const internalMaxHeight = React__default["default"].useMemo(() => maxHeight - 24, [maxHeight]);
53
+ const [showScroll, setShowScroll] = React__default["default"].useState(true);
54
+ React__default["default"].useEffect(() => {
55
55
  var _inputSize$current, _inputSize$current2, _inputSize$current3, _inputSize$current4;
56
56
 
57
57
  const newHeight = ((_inputSize$current = inputSize.current) === null || _inputSize$current === void 0 ? void 0 : _inputSize$current.scrollHeight) > internalMaxHeight ? internalMaxHeight : (_inputSize$current2 = inputSize.current) === null || _inputSize$current2 === void 0 ? void 0 : _inputSize$current2.scrollHeight;
@@ -59,7 +59,7 @@ const ChatComposer = props => {
59
59
  setHeight(newHeight);
60
60
  setShowScroll(((_inputSize$current3 = inputSize.current) === null || _inputSize$current3 === void 0 ? void 0 : _inputSize$current3.scrollHeight) - ((_inputSize$current4 = inputSize.current) === null || _inputSize$current4 === void 0 ? void 0 : _inputSize$current4.clientHeight) > 5);
61
61
  }, [inputValue, internalMaxHeight]);
62
- React__default['default'].useEffect(() => {
62
+ React__default["default"].useEffect(() => {
63
63
  if (actionRef && actionRef.current) {
64
64
  actionRef.current.focusToComposer = () => {
65
65
  input.current.focus();
@@ -70,7 +70,7 @@ const ChatComposer = props => {
70
70
  };
71
71
  }
72
72
  }, [actionRef.current]);
73
- const handleChange = React__default['default'].useCallback(e => {
73
+ const handleChange = React__default["default"].useCallback(e => {
74
74
  onChange(e.target.value);
75
75
  }, [onChange]);
76
76
  const heightProps = {
@@ -78,12 +78,12 @@ const ChatComposer = props => {
78
78
  overflow: showScroll ? 'auto' : 'hidden'
79
79
  };
80
80
  const inputLength = String(inputValue || '').length;
81
- const hasError = React__default['default'].useMemo(() => inputLength > inputMaxLength, [inputLength, inputMaxLength]);
82
- return /*#__PURE__*/_jsx__default['default'](styled.StyledChatContainerContentComposer, {
81
+ const hasError = React__default["default"].useMemo(() => inputLength > inputMaxLength, [inputLength, inputMaxLength]);
82
+ return /*#__PURE__*/_jsx__default["default"](styled.StyledChatContainerContentComposer, {
83
83
  rows: ['auto', '15px'],
84
84
  maxHeight: `${maxHeight}px`,
85
85
  "data-testid": dataTestid
86
- }, void 0, /*#__PURE__*/_jsx__default['default'](dsGrid.Grid, {
86
+ }, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
87
87
  cols: ['1fr', '24px'],
88
88
  justifyContent: "center",
89
89
  alignItems: "flex-end",
@@ -98,12 +98,12 @@ const ChatComposer = props => {
98
98
  placeholder: placeholder,
99
99
  "aria-label": "Message to send",
100
100
  "data-testid": "chat-composer-textarea"
101
- }), /*#__PURE__*/_jsx__default['default'](dsGrid.Grid, {
101
+ }), /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
102
102
  height: "32px",
103
103
  alignItems: "center"
104
- }, void 0, /*#__PURE__*/_jsx__default['default'](styled.StyledComposerButton, {
104
+ }, void 0, /*#__PURE__*/_jsx__default["default"](styled.StyledComposerButton, {
105
105
  buttonType: "text",
106
- icon: _PaperAirplane || (_PaperAirplane = /*#__PURE__*/_jsx__default['default'](PaperAirplane__default['default'], {
106
+ icon: _PaperAirplane || (_PaperAirplane = /*#__PURE__*/_jsx__default["default"](PaperAirplane__default["default"], {
107
107
  width: 18,
108
108
  height: 18
109
109
  })),
@@ -126,20 +126,20 @@ const ChatComposer = props => {
126
126
  onChange: handleChange,
127
127
  value: inputValue // maxLength={inputMaxLength}
128
128
 
129
- }), /*#__PURE__*/_jsx__default['default'](dsGrid.Grid, {
129
+ }), /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
130
130
  cols: ['1fr', '24px'],
131
131
  justifyContent: "flex-end",
132
132
  alignItems: "center",
133
133
  gutter: "xxs",
134
134
  pb: "xxs"
135
- }, void 0, /*#__PURE__*/_jsx__default['default'](styled.StyledCounterArea, {
135
+ }, void 0, /*#__PURE__*/_jsx__default["default"](styled.StyledCounterArea, {
136
136
  hasError: hasError,
137
137
  "data-testid": "composer-counter-area"
138
138
  }, void 0, inputMaxLength && hasError ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
139
- children: [/*#__PURE__*/_jsx__default['default'](styled.StyledCounterErrorA11y, {
139
+ children: [/*#__PURE__*/_jsx__default["default"](styled.StyledCounterErrorA11y, {
140
140
  role: "alert"
141
141
  }, void 0, "You have exceeded the character limit by ", inputLength - inputMaxLength), "Please limit to less than ", inputMaxLength, " characters.", ' ']
142
- }) : '', inputMaxLength ? `${inputLength} / ${inputMaxLength}` : ''), _Grid || (_Grid = /*#__PURE__*/_jsx__default['default'](dsGrid.Grid, {}))));
142
+ }) : '', inputMaxLength ? `${inputLength} / ${inputMaxLength}` : ''), _Grid || (_Grid = /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {}))));
143
143
  };
144
144
 
145
145
  ChatComposer.defaultProps = props.defaultComposerPros;
package/cjs/parts/chat-composer/styled.js CHANGED
@@ -11,19 +11,19 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
11
11
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
12
12
 
13
13
  // Composer
14
- const StyledChatContainerContentComposer = /*#__PURE__*/styled__default['default'](dsGrid.Grid).withConfig({
14
+ const StyledChatContainerContentComposer = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
15
15
  componentId: "sc-1ahwpce-0"
16
16
  })(["width:100%;min-height:56px;background:", ";padding:", ";padding-bottom:3px;padding-top:6px;padding-left:", ";max-height:", ";border-top:1px solid #cbcfd7;"], props => props.theme.colors.neutral['050'], props => props.theme.space.xxs, props => props.theme.space.xs, props => props.maxHeight);
17
- const StyledComposerInput = /*#__PURE__*/styled__default['default'].textarea.withConfig({
17
+ const StyledComposerInput = /*#__PURE__*/styled__default["default"].textarea.withConfig({
18
18
  componentId: "sc-1ahwpce-1"
19
19
  })(["padding:", ";resize:none;min-height:32px;border-radius:2px;border:solid 1px #cbcfd7;color:#25292f;height:", ";min-width:244px;overflow-y:auto;font-size:13px;font-weight:400;line-height:1;transition:height 0.3s;&:focus{outline:none;border:1px solid ", ";box-shadow:inset 0 0 0 1px #8cc2ed;border-radius:2px;}"], props => props.theme.space.xxs, props => typeof props.height === 'number' ? `${props.height}px` : props.height, props => props.theme.colors.brand[600]);
20
- const StyledComposerButton = /*#__PURE__*/styled__default['default'](dsButton.DSButton).withConfig({
20
+ const StyledComposerButton = /*#__PURE__*/styled__default["default"](dsButton.DSButton).withConfig({
21
21
  componentId: "sc-1ahwpce-2"
22
22
  })(["&:disabled{background:none;svg{fill:#5d6775;}}svg{fill:", ";}&:focus{background:", ";}"], props => props.theme.colors.brand[600], props => props.theme.colors.brand[200]);
23
- const StyledCounterArea = /*#__PURE__*/styled__default['default'](dsGrid.Grid).withConfig({
23
+ const StyledCounterArea = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
24
24
  componentId: "sc-1ahwpce-3"
25
25
  })(["text-align:right;font-size:11px;height:15px;align-items:center;font-style:italic;", " position:relative;"], props => props.hasError ? `color:${props.theme.colors.danger[900]};` : '');
26
- const StyledCounterErrorA11y = /*#__PURE__*/styled__default['default'].span.withConfig({
26
+ const StyledCounterErrorA11y = /*#__PURE__*/styled__default["default"].span.withConfig({
27
27
  componentId: "sc-1ahwpce-4"
28
28
  })(["width:1px;height:1px;position:absolute;clip:rect(1px,1px,1px,1px);"]);
29
29
 
package/cjs/parts/chat-container/ChatContainer.js CHANGED
@@ -4,7 +4,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var _jsx = require('@babel/runtime/helpers/jsx');
6
6
  var _defineProperty = require('@babel/runtime/helpers/defineProperty');
7
- require('core-js/modules/web.url.to-json.js');
8
7
  var React = require('react');
9
8
  var lodash = require('lodash');
10
9
  var reactDesc = require('react-desc');
@@ -29,12 +28,12 @@ var _DSIndeterminateProgr, _StyledIndicatorConta;
29
28
 
30
29
  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; }
31
30
 
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; }
31
+ 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; }
33
32
 
34
33
  const ChatContainer = props => {
35
34
  var _containerRef$current;
36
35
 
37
- useValidateProps.useValidateProps(props, ChatContainerWithSchema.toJSON());
36
+ useValidateProps.useValidateProps(props, ChatContainerWithSchema.toTypescript());
38
37
  const {
39
38
  sendingText,
40
39
  sendingMessages,
@@ -52,11 +51,11 @@ const ChatContainer = props => {
52
51
  hasMoreItems,
53
52
  getMoreMessages
54
53
  } = props;
55
- const containerRef = React__default['default'].useRef();
56
- const listRef = React__default['default'].useRef({
54
+ const containerRef = React__default["default"].useRef();
55
+ const listRef = React__default["default"].useRef({
57
56
  scrollToIndex: lodash.noop
58
57
  });
59
- const onResize = React__default['default'].useCallback(height => {
58
+ const onResize = React__default["default"].useCallback(height => {
60
59
  if (onComposerResize) onComposerResize(height);
61
60
 
62
61
  if (autoScroll) {
@@ -71,7 +70,7 @@ const ChatContainer = props => {
71
70
  ref: containerRef,
72
71
  role: "region",
73
72
  "aria-label": "chat window",
74
- children: [/*#__PURE__*/_jsx__default['default']("div", {
73
+ children: [/*#__PURE__*/_jsx__default["default"]("div", {
75
74
  style: {
76
75
  position: 'relative'
77
76
  }
@@ -82,14 +81,14 @@ const ChatContainer = props => {
82
81
  getMoreMessages: getMoreMessages,
83
82
  sendingMessages: sendingMessages,
84
83
  sendingText: sendingText
85
- })), ['top', 'bottom'].includes(isLoading) ? /*#__PURE__*/_jsx__default['default'](styled.StyledIndicatorContainer, {
84
+ })), ['top', 'bottom'].includes(isLoading) ? /*#__PURE__*/_jsx__default["default"](styled.StyledIndicatorContainer, {
86
85
  isLoading: isLoading
87
- }, void 0, _DSIndeterminateProgr || (_DSIndeterminateProgr = /*#__PURE__*/_jsx__default['default'](DSIndeterminateProgressIndicator__default['default'], {
86
+ }, void 0, _DSIndeterminateProgr || (_DSIndeterminateProgr = /*#__PURE__*/_jsx__default["default"](DSIndeterminateProgressIndicator__default["default"], {
88
87
  processing: true,
89
88
  title: "Loading"
90
- }))) : null, ['top', 'bottom'].includes(bannerPosition) ? /*#__PURE__*/_jsx__default['default'](styled.StyledIndicatorContainer, {
89
+ }))) : null, ['top', 'bottom'].includes(bannerPosition) ? /*#__PURE__*/_jsx__default["default"](styled.StyledIndicatorContainer, {
91
90
  isLoading: bannerPosition
92
- }, void 0, /*#__PURE__*/_jsx__default['default'](DSBanner__default['default'], {
91
+ }, void 0, /*#__PURE__*/_jsx__default["default"](DSBanner__default["default"], {
93
92
  showCloseButton: true,
94
93
  label: bannerProps.label || 'Unread messages',
95
94
  containerProps: {
@@ -102,10 +101,10 @@ const ChatContainer = props => {
102
101
  onClose: bannerProps.onClose,
103
102
  isOpen: true,
104
103
  type: DSBanner.BANNER_TYPES.INFO
105
- })) : null, sendingMessages && sendingMessages.length > 0 ? _StyledIndicatorConta || (_StyledIndicatorConta = /*#__PURE__*/_jsx__default['default'](styled.StyledIndicatorContainer, {
104
+ })) : null, sendingMessages && sendingMessages.length > 0 ? _StyledIndicatorConta || (_StyledIndicatorConta = /*#__PURE__*/_jsx__default["default"](styled.StyledIndicatorContainer, {
106
105
  isLoading: "bottom",
107
106
  linear: true
108
- }, void 0, /*#__PURE__*/_jsx__default['default'](DSIndeterminateProgressIndicator__default['default'], {
107
+ }, void 0, /*#__PURE__*/_jsx__default["default"](DSIndeterminateProgressIndicator__default["default"], {
109
108
  processing: true,
110
109
  title: "Loading",
111
110
  lineOnly: true
package/cjs/parts/chat-container/config/useValidateProps.js CHANGED
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  var dsPropsHelpers = require('@elliemae/ds-props-helpers');
6
6
 
7
7
  const useValidateProps = (props, schema) => {
8
- dsPropsHelpers.useValidatePropTypes(props, schema);
8
+ dsPropsHelpers.useValidateTypescriptPropTypes(props, schema);
9
9
  };
10
10
 
11
11
  exports.useValidateProps = useValidateProps;
package/cjs/parts/chat-container/props.js CHANGED
@@ -27,16 +27,16 @@ const defaultProps = {
27
27
  sendingText: 'Sending'
28
28
  };
29
29
  const containerProps = {
30
- messagesListProps: reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.object).description('ChatMessageList props "messages" / "onScrollEnds"').defaultValue(defaultProps.messagesListProps),
31
- composerProps: reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.object).description('Composer configuration').defaultValue(defaultProps.composerProps),
30
+ messagesListProps: reactDesc.PropTypes.object.description('ChatMessageList props "messages" / "onScrollEnds"').defaultValue(defaultProps.messagesListProps),
31
+ composerProps: reactDesc.PropTypes.object.description('Composer configuration').defaultValue(defaultProps.composerProps),
32
32
  autoScroll: reactDesc.PropTypes.bool.description('Auto scroll to bottom on resize').defaultValue(defaultProps.autoScroll),
33
33
  device: reactDesc.PropTypes.string.description('Option to render mobile or desktop style composer').defaultValue(defaultProps.device),
34
34
  isLoading: reactDesc.PropTypes.oneOf(['top', 'bottom', undefined]).description('Show Loading messages indicator at the `top` or `bottom` of the container'),
35
35
  hasMoreItems: reactDesc.PropTypes.oneOf(['top', 'bottom', undefined]).description('Show Load More button at the `top` or `bottom` of the container'),
36
36
  getMoreMessages: reactDesc.PropTypes.func.description('Called when the user clicks on load more').defaultValue(defaultProps.getMoreMessages),
37
37
  bannerPosition: reactDesc.PropTypes.oneOf(['top', 'bottom', undefined]).description('Show Loading messages indicator at the `top` or `bottom` of the container'),
38
- bannerProps: reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.object).description('Banner configuration').defaultValue(defaultProps.bannerProps),
39
- sendingMessages: reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.string, reactDesc.PropTypes.number])).description('Array of ids of sending messages').defaultValue(defaultProps.sendingMessages),
38
+ bannerProps: reactDesc.PropTypes.object.description('Banner configuration').defaultValue(defaultProps.bannerProps),
39
+ sendingMessages: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.string), reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.number)]).description('Array of ids of sending messages').defaultValue(defaultProps.sendingMessages),
40
40
  sendingText: reactDesc.PropTypes.string.description('Label description for messages in sending status').defaultValue(defaultProps.sendingText),
41
41
  actionRef: reactDesc.PropTypes.object.description(`Reference:
42
42
  {
package/cjs/parts/chat-container/styled.js CHANGED
@@ -13,13 +13,13 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
13
13
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
14
14
 
15
15
  const CONTAINER_WIDTH = 300;
16
- const StyledChatContainerContent = /*#__PURE__*/styled__default['default'](dsGrid.Grid).withConfig({
16
+ const StyledChatContainerContent = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
17
17
  componentId: "sc-d732wo-0"
18
18
  })(["height:100%;min-width:", "px;overflow:hidden;background:", ";position:relative;"], CONTAINER_WIDTH, props => props.theme.colors.neutral['050']);
19
- const StyledIndicatorContainer = /*#__PURE__*/styled__default['default'].div.withConfig({
19
+ const StyledIndicatorContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
20
20
  componentId: "sc-d732wo-1"
21
21
  })(["position:absolute;width:calc(100% + ", ");padding:", ";left:-", ";right:-", ";background:", ";", " ", ""], props => props.theme.space.xxs, props => !props.linear ? props.theme.space.xxs : 0, props => props.theme.space.xxs, props => props.theme.space.xxs, props => props.theme.colors.neutral['000'], props => props.isLoading === 'top' ? 'top: 0;' : '', props => props.isLoading === 'bottom' ? 'bottom: 0;' : '');
22
- const MobileStyledChatContainerContent = /*#__PURE__*/styled__default['default'](StyledChatContainerContent).withConfig({
22
+ const MobileStyledChatContainerContent = /*#__PURE__*/styled__default["default"](StyledChatContainerContent).withConfig({
23
23
  componentId: "sc-d732wo-2"
24
24
  })(["", ",", "{font-size:16px;}", "{font-size:13px;}", "{background-color:#fff;box-shadow:-0 1px 3px rgba(53,60,70,0.8);}", ",", "{font-size:16px;text-align:left;}", "{font-size:13px;}", "{font-size:16px;}"], styled$1.StyledTitleLeftBubble, styled$1.StyleBodyWrapper, styled$1.StyledTitleRightBubble, style.Wrapper, style.Title, style.Message, style.Time, styled$2.StyledComposerInput);
25
25
 
package/cjs/parts/chat-container-header/ChatContainerHeader.js CHANGED
@@ -18,19 +18,19 @@ const ChatContainerHeader = props => {
18
18
  floating,
19
19
  children
20
20
  } = props;
21
- return /*#__PURE__*/_jsx__default['default'](styled.StyledChatContainerContentHeader, {
21
+ return /*#__PURE__*/_jsx__default["default"](styled.StyledChatContainerContentHeader, {
22
22
  alignItems: "center",
23
23
  cols: ['minmax(calc(100% - 64px), 1fr)', children ? 'auto' : '0px'],
24
24
  floating: floating,
25
25
  role: "heading"
26
- }, void 0, /*#__PURE__*/_jsx__default['default'](styled.StyledChatContainerContentHeaderLabel, {
26
+ }, void 0, /*#__PURE__*/_jsx__default["default"](styled.StyledChatContainerContentHeaderLabel, {
27
27
  "data-testid": "chat-container-header-title",
28
28
  pl: "xxs",
29
29
  pr: "xxs"
30
- }, void 0, /*#__PURE__*/_jsx__default['default'](dsTruncatedTooltipText.SimpleTruncatedTooltipText, {
30
+ }, void 0, /*#__PURE__*/_jsx__default["default"](dsTruncatedTooltipText.SimpleTruncatedTooltipText, {
31
31
  value: title
32
- })), /*#__PURE__*/_jsx__default['default'](styled.StyledChatContainerContentHeaderActions, {
33
- cols: React__default['default'].Children.toArray(children).filter(e => e).map(() => '32px'),
32
+ })), /*#__PURE__*/_jsx__default["default"](styled.StyledChatContainerContentHeaderActions, {
33
+ cols: React__default["default"].Children.toArray(children).filter(e => e).map(() => '32px'),
34
34
  justifyContent: "flex-end",
35
35
  "data-testid": "chat-container-header-children"
36
36
  }, void 0, children));
package/cjs/parts/chat-container-header/styled.js CHANGED
@@ -9,13 +9,13 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
9
9
 
10
10
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
11
11
 
12
- const StyledChatContainerContentHeader = /*#__PURE__*/styled__default['default'](dsGrid.Grid).withConfig({
12
+ const StyledChatContainerContentHeader = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
13
13
  componentId: "sc-jmynvr-0"
14
14
  })(["width:100%;min-height:48px;border-bottom:1px solid ", ";background:", ";"], props => props.theme.colors.neutral['200'], props => props.theme.colors.neutral['050']);
15
- const StyledChatContainerContentHeaderLabel = /*#__PURE__*/styled__default['default'](dsGrid.Grid).withConfig({
15
+ const StyledChatContainerContentHeaderLabel = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
16
16
  componentId: "sc-jmynvr-1"
17
17
  })(["justify-content:center;align-items:center;font-weight:bold;font-size:18px;color:", ";"], props => props.theme.colors.neutral['700']);
18
- const StyledChatContainerContentHeaderActions = /*#__PURE__*/styled__default['default'](dsGrid.Grid).withConfig({
18
+ const StyledChatContainerContentHeaderActions = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
19
19
  componentId: "sc-jmynvr-2"
20
20
  })(["max-width:80px;"]);
21
21