@elliemae/ds-chat 2.2.0-alpha.4 → 3.0.0-next.2

package/esm/parts/chat-card/props.js

@@ -1,12 +1,10 @@
-import * as React from "react";
-import { PropTypes } from "react-desc";
+import { PropTypes } from 'react-desc';
+
 const propTypes = {
-  title: PropTypes.string.isRequired.description(`Card's title`),
-  content: PropTypes.string.description(`Card's content`),
-  time: PropTypes.string.description("Time"),
-  rightAddon: PropTypes.element.description("Right addon, badge or icon")
+  title: PropTypes.string.isRequired.description("Card's title"),
+  content: PropTypes.string.description("Card's content"),
+  time: PropTypes.string.description('Time'),
+  rightAddon: PropTypes.element.description('Right addon, badge or icon')
 };
-export {
-  propTypes
-};
-//# sourceMappingURL=props.js.map
+
+export { propTypes };

package/esm/parts/chat-card/styled.js

@@ -1,42 +1,23 @@
-import * as React from "react";
-import styled from "styled-components";
-import { Grid } from "@elliemae/ds-grid";
-const Wrapper = styled(Grid)`
-  min-width: 248px;
-  border: 1px;
-  border-bottom: 1px solid #ccc;
-  padding: 12px 12px;
-`;
-const MainContent = styled.div``;
-const Title = styled.p`
-  font-size: 16px;
-  font-weight: 600;
-  margin: 0;
-`;
-const Content = styled.p`
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 1;
-  margin: 0;
-`;
-const Time = styled.p`
-  font-size: 12px;
-  font-weight: 100;
-  margin: 0;
-  margin-top: 8px;
-  font-weight: ${(props) => props.theme.fontWeights.regular};
-  color: ${(props) => props.theme.colors.neutral["500"]};
-`;
-const RightAddon = styled.div`
-  height: fit-content;
-  margin-left: 12px;
-`;
-export {
-  Content,
-  MainContent,
-  RightAddon,
-  Time,
-  Title,
-  Wrapper
-};
-//# sourceMappingURL=styled.js.map
+import styled from 'styled-components';
+import { Grid } from '@elliemae/ds-grid';
+
+const Wrapper = /*#__PURE__*/styled(Grid).withConfig({
+  componentId: "sc-s0g4hn-0"
+})(["min-width:248px;border:1px;border-bottom:1px solid #ccc;padding:12px 12px;"]);
+const MainContent = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-s0g4hn-1"
+})([""]);
+const Title = /*#__PURE__*/styled.p.withConfig({
+  componentId: "sc-s0g4hn-2"
+})(["font-size:16px;font-weight:600;margin:0;"]);
+const Content = /*#__PURE__*/styled.p.withConfig({
+  componentId: "sc-s0g4hn-3"
+})(["font-size:12px;font-weight:400;line-height:1;margin:0;"]);
+const Time = /*#__PURE__*/styled.p.withConfig({
+  componentId: "sc-s0g4hn-4"
+})(["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']);
+const RightAddon = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-s0g4hn-5"
+})(["height:fit-content;margin-left:12px;"]);
+
+export { Content, MainContent, RightAddon, Time, Title, Wrapper };

package/esm/parts/chat-composer/ChatContainerComposer.js

@@ -1,18 +1,30 @@
-import * as React from "react";
-import React2 from "react";
-import { Grid } from "@elliemae/ds-grid";
-import { describe } from "react-desc";
-import { PaperAirplane } from "@elliemae/ds-icons";
-import {
-  StyledChatContainerContentComposer,
-  StyledComposerInput,
-  StyledComposerButton,
-  StyledCounterArea,
-  StyledCounterErrorA11y
-} from "./styled";
-import { useValidateProps } from "./config/useValidateProps";
-import { defaultComposerPros, composerProps } from "./props";
-const ChatComposer = (props) => {
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import 'core-js/modules/web.url.to-json.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import React from 'react';
+import { Grid } from '@elliemae/ds-grid';
+import { describe } from 'react-desc';
+import { PaperAirplane } from '@elliemae/ds-icons';
+import { StyledChatContainerContentComposer, StyledComposerInput, StyledComposerButton, StyledCounterArea, StyledCounterErrorA11y } from './styled.js';
+import { useValidateProps } from './config/useValidateProps.js';
+import { composerProps, defaultComposerPros } from './props.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var _PaperAirplane, _Grid;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+const ChatComposer = props => {
+  var _input$current;
+
   useValidateProps(props, ChatComposerWithSchema.toJSON());
   const {
     inputValue,
@@ -31,104 +43,110 @@ const ChatComposer = (props) => {
     actionRef
   } = props;
   const COMPOSER_MIN_HEIGHT = 32;
-  const input = React2.useRef();
-  const inputSize = React2.useRef();
-  const inputSend = React2.useRef();
-  const [height, setHeight] = React2.useState(32);
-  const internalMaxHeight = React2.useMemo(() => maxHeight - 24, [maxHeight]);
-  const [showScroll, setShowScroll] = React2.useState(true);
-  React2.useEffect(() => {
-    const newHeight = inputSize.current?.scrollHeight > internalMaxHeight ? internalMaxHeight : inputSize.current?.scrollHeight;
-    if (newHeight !== height && newHeight > COMPOSER_MIN_HEIGHT)
-      onResize(newHeight);
+  const input = React.useRef();
+  const inputSize = React.useRef();
+  const inputSend = React.useRef();
+  const [height, setHeight] = React.useState(32);
+  const internalMaxHeight = React.useMemo(() => maxHeight - 24, [maxHeight]);
+  const [showScroll, setShowScroll] = React.useState(true);
+  React.useEffect(() => {
+    var _inputSize$current, _inputSize$current2, _inputSize$current3, _inputSize$current4;
+
+    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;
+    if (newHeight !== height && newHeight > COMPOSER_MIN_HEIGHT) onResize(newHeight);
     setHeight(newHeight);
-    setShowScroll(inputSize.current?.scrollHeight - inputSize.current?.clientHeight > 5);
+    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);
   }, [inputValue, internalMaxHeight, height, onResize]);
-  React2.useEffect(() => {
+  React.useEffect(() => {
     if (actionRef && actionRef.current) {
       actionRef.current.focusToComposer = () => {
         input.current.focus();
       };
+
       actionRef.current.focusToSend = () => {
         inputSend.current.focus();
       };
     }
   }, [actionRef]);
-  const handleChange = React2.useCallback((e) => {
+  const handleChange = React.useCallback(e => {
     onChange(e.target.value);
   }, [onChange]);
-  const heightProps = { height, overflow: showScroll ? "auto" : "hidden" };
-  const inputLength = String(inputValue || "").length;
-  const hasError = React2.useMemo(() => inputLength > inputMaxLength, [inputLength, inputMaxLength]);
-  return /* @__PURE__ */ React2.createElement(StyledChatContainerContentComposer, {
-    rows: ["auto", "15px"],
-    maxHeight: `${maxHeight}px`,
+  const heightProps = {
+    height,
+    overflow: showScroll ? 'auto' : 'hidden'
+  };
+  const inputLength = String(inputValue || '').length;
+  const hasError = React.useMemo(() => inputLength > inputMaxLength, [inputLength, inputMaxLength]);
+  return /*#__PURE__*/_jsx(StyledChatContainerContentComposer, {
+    rows: ['auto', '15px'],
+    maxHeight: "".concat(maxHeight, "px"),
     "data-testid": dataTestid
-  }, /* @__PURE__ */ React2.createElement(Grid, {
-    cols: ["1fr", "24px"],
-    style: { height: heightProps.height },
+  }, void 0, /*#__PURE__*/_jsx(Grid, {
+    cols: ['1fr', '24px'],
+    style: {
+      height: heightProps.height
+    },
     justifyContent: "center",
     alignItems: "flex-end",
     gutter: "xxs"
-  }, /* @__PURE__ */ React2.createElement(StyledComposerInput, {
+  }, void 0, /*#__PURE__*/jsx(StyledComposerInput, {
     ref: input,
     onChange: handleChange,
-    style: { ...heightProps },
+    style: _objectSpread({}, heightProps),
     value: inputValue,
-    onFocus,
-    onBlur,
-    onKeyDown,
-    placeholder,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    onKeyDown: onKeyDown,
+    placeholder: placeholder,
     "aria-label": "Message to send",
     "data-testid": "chat-composer-textarea",
     name: "chat-composer-textarea",
     id: "chat-composer-textarea"
-  }), /* @__PURE__ */ React2.createElement(Grid, {
+  }), /*#__PURE__*/_jsx(Grid, {
     height: "32px",
     alignItems: "center"
-  }, /* @__PURE__ */ React2.createElement(StyledComposerButton, {
+  }, void 0, /*#__PURE__*/_jsx(StyledComposerButton, {
     buttonType: "text",
-    icon: /* @__PURE__ */ React2.createElement(PaperAirplane, {
+    icon: _PaperAirplane || (_PaperAirplane = /*#__PURE__*/_jsx(PaperAirplane, {
       width: 18,
       height: 18
-    }),
+    })),
     onClick: onSend,
     size: "s",
     disabled: !inputValue || buttonDisabled || hasError,
     "data-testid": "chat-composer-send-button",
     "aria-label": "Send",
     innerRef: inputSend
-  }))), /* @__PURE__ */ React2.createElement(StyledComposerInput, {
+  }))), /*#__PURE__*/jsx(StyledComposerInput, {
     ref: inputSize,
     style: {
       height: 32,
-      visibility: "hidden",
-      pointerEvents: "none",
-      position: "absolute",
+      visibility: 'hidden',
+      pointerEvents: 'none',
+      position: 'absolute',
       top: 0,
-      width: input.current?.clientWidth
+      width: (_input$current = input.current) === null || _input$current === void 0 ? void 0 : _input$current.clientWidth
     },
     onChange: handleChange,
     value: inputValue
-  }), /* @__PURE__ */ React2.createElement(Grid, {
-    cols: ["1fr", "24px"],
+  }), /*#__PURE__*/_jsx(Grid, {
+    cols: ['1fr', '24px'],
     justifyContent: "flex-end",
     alignItems: "center",
     gutter: "xxs",
     pb: "xxs"
-  }, /* @__PURE__ */ React2.createElement(StyledCounterArea, {
-    hasError,
+  }, void 0, /*#__PURE__*/_jsx(StyledCounterArea, {
+    hasError: hasError,
     "data-testid": "composer-counter-area"
-  }, inputMaxLength && hasError ? /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(StyledCounterErrorA11y, {
-    role: "alert"
-  }, maxLengthMessage || `You have entered ${inputLength} characters and have exceeded the limit by ${inputLength - inputMaxLength}. Please limit to less than ${inputMaxLength} characters. `), maxLengthMessage || `Please limit to less than ${inputMaxLength} characters. `) : "", inputMaxLength && !maxLengthMessage ? ` ${inputLength} / ${inputMaxLength}` : ""), /* @__PURE__ */ React2.createElement(Grid, null)));
+  }, void 0, inputMaxLength && hasError ? /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/_jsx(StyledCounterErrorA11y, {
+      role: "alert"
+    }, void 0, maxLengthMessage || "You have entered ".concat(inputLength, " characters and have exceeded the limit by ").concat(inputLength - inputMaxLength, ". Please limit to less than ").concat(inputMaxLength, " characters. ")), maxLengthMessage || "Please limit to less than ".concat(inputMaxLength, " characters. ")]
+  }) : '', inputMaxLength && !maxLengthMessage ? " ".concat(inputLength, " / ").concat(inputMaxLength) : ''), _Grid || (_Grid = /*#__PURE__*/_jsx(Grid, {}))));
 };
-ChatComposer.propTypes = composerProps;
+
 ChatComposer.defaultProps = defaultComposerPros;
 const ChatComposerWithSchema = describe(ChatComposer);
 ChatComposerWithSchema.propTypes = composerProps;
-export {
-  ChatComposer,
-  ChatComposerWithSchema
-};
-//# sourceMappingURL=ChatContainerComposer.js.map
+
+export { ChatComposer, ChatComposerWithSchema };

package/esm/parts/chat-composer/config/useValidateProps.js

@@ -1,9 +1,7 @@
-import * as React from "react";
-import { useValidatePropTypes } from "@elliemae/ds-props-helpers";
+import { useValidatePropTypes } from '@elliemae/ds-props-helpers';
+
 const useValidateProps = (props, schema) => {
   useValidatePropTypes(props, schema);
 };
-export {
-  useValidateProps
-};
-//# sourceMappingURL=useValidateProps.js.map
+
+export { useValidateProps };

package/esm/parts/chat-composer/index.js

@@ -1,7 +1 @@
-import * as React from "react";
-import { ChatComposer, ChatComposerWithSchema } from "./ChatContainerComposer";
-export {
-  ChatComposer,
-  ChatComposerWithSchema
-};
-//# sourceMappingURL=index.js.map
+export { ChatComposer, ChatComposerWithSchema } from './ChatContainerComposer.js';

package/esm/parts/chat-composer/props.js

@@ -1,9 +1,9 @@
-import * as React from "react";
-import { PropTypes } from "react-desc";
-import { noop } from "lodash";
+import { PropTypes } from 'react-desc';
+import { noop } from 'lodash';
+
 const defaultComposerPros = {
-  placeholder: "Type your message",
-  inputValue: "",
+  placeholder: 'Type your message',
+  inputValue: '',
   onChange: noop,
   onResize: noop,
   onSend: noop,
@@ -11,40 +11,27 @@ const defaultComposerPros = {
   onBlur: noop,
   onKeyDown: noop,
   maxHeight: 0,
-  inputMaxLength: void 0,
-  maxLengthMessage: void 0,
+  inputMaxLength: undefined,
+  maxLengthMessage: undefined,
   buttonDisabled: false,
-  dataTestid: "ds-chat-composer",
+  dataTestid: 'ds-chat-composer',
   actionRef: noop
 };
 const composerProps = {
-  placeholder: PropTypes.string.description("Input Placeholder").defaultValue(defaultComposerPros.placeholder),
-  inputValue: PropTypes.string.description("Input value").defaultValue(defaultComposerPros.inputValue),
-  maxLengthMessage: PropTypes.string.description("Max length message").defaultValue(defaultComposerPros.maxLengthMessage),
-  onChange: PropTypes.func.description("Called when the user types").defaultValue(defaultComposerPros.onChange),
-  onResize: PropTypes.func.description("Called the input changes his height").defaultValue(defaultComposerPros.onResize),
-  onSend: PropTypes.func.description("Called when the click send").defaultValue(defaultComposerPros.onSend),
-  onFocus: PropTypes.func.description("Input focus").defaultValue(defaultComposerPros.onFocus),
-  onBlur: PropTypes.func.description("Input blur").defaultValue(defaultComposerPros.onBlur),
-  onKeyDown: PropTypes.func.description("Input on key down").defaultValue(defaultComposerPros.onKeyDown),
-  maxHeight: PropTypes.number.description("Max height of the composer. Use 0 for no limit").defaultValue(defaultComposerPros.onBlur),
-  inputMaxLength: PropTypes.number.description("Max length of the composer. `undefined` for no limit").defaultValue(defaultComposerPros.inputMaxLength),
-  buttonDisabled: PropTypes.bool.description("Control the disabled for the send button").defaultValue(defaultComposerPros.buttonDisabled),
-  dataTestid: PropTypes.string.description("Data testid").defaultValue(defaultComposerPros.placeholder),
-  actionRef: PropTypes.object.description(`Reference: 
-        { 
-          scrollToIndex: (n: number) => void,
-          getMessagesInView: () => number[],
-          focusToIndex: (n: number) => void,
-          focusToList: () => void,
-          focusToComposer: () => void,
-          focusToSend: () => void,
-        }
-        
-      `).defaultValue(defaultComposerPros.actionRef)
+  placeholder: PropTypes.string.description('Input Placeholder').defaultValue(defaultComposerPros.placeholder),
+  inputValue: PropTypes.string.description('Input value').defaultValue(defaultComposerPros.inputValue),
+  maxLengthMessage: PropTypes.string.description('Max length message').defaultValue(defaultComposerPros.maxLengthMessage),
+  onChange: PropTypes.func.description('Called when the user types').defaultValue(defaultComposerPros.onChange),
+  onResize: PropTypes.func.description('Called the input changes his height').defaultValue(defaultComposerPros.onResize),
+  onSend: PropTypes.func.description('Called when the click send').defaultValue(defaultComposerPros.onSend),
+  onFocus: PropTypes.func.description('Input focus').defaultValue(defaultComposerPros.onFocus),
+  onBlur: PropTypes.func.description('Input blur').defaultValue(defaultComposerPros.onBlur),
+  onKeyDown: PropTypes.func.description('Input on key down').defaultValue(defaultComposerPros.onKeyDown),
+  maxHeight: PropTypes.number.description('Max height of the composer. Use 0 for no limit').defaultValue(defaultComposerPros.onBlur),
+  inputMaxLength: PropTypes.number.description('Max length of the composer. `undefined` for no limit').defaultValue(defaultComposerPros.inputMaxLength),
+  buttonDisabled: PropTypes.bool.description('Control the disabled for the send button').defaultValue(defaultComposerPros.buttonDisabled),
+  dataTestid: PropTypes.string.description('Data testid').defaultValue(defaultComposerPros.placeholder),
+  actionRef: PropTypes.object.description("Reference: \n        { \n          scrollToIndex: (n: number) => void,\n          getMessagesInView: () => number[],\n          focusToIndex: (n: number) => void,\n          focusToList: () => void,\n          focusToComposer: () => void,\n          focusToSend: () => void,\n        }\n        \n      ").defaultValue(defaultComposerPros.actionRef)
 };
-export {
-  composerProps,
-  defaultComposerPros
-};
-//# sourceMappingURL=props.js.map
+
+export { composerProps, defaultComposerPros };

package/esm/parts/chat-composer/styled.js

@@ -1,73 +1,22 @@
-import * as React from "react";
-import styled from "styled-components";
-import { Grid } from "@elliemae/ds-grid";
-import { DSButton } from "@elliemae/ds-button";
-const StyledChatContainerContentComposer = styled(Grid)`
-  width: 100%;
-  min-height: 56px;
-  background: ${(props) => props.theme.colors.neutral["050"]};
-  padding: ${(props) => props.theme.space.xxs};
-  padding-bottom: 3px;
-  padding-top: 6px;
-  padding-left: ${(props) => props.theme.space.xs};
-  max-height: ${(props) => props.maxHeight};
-  border-top: 1px solid #cbcfd7;
-`;
-const StyledComposerInput = styled.textarea`
-  padding: ${(props) => props.theme.space.xxs};
-  resize: none;
-  min-height: 32px;
-  border-radius: 2px;
-  border: solid 1px #cbcfd7;
-  color: #25292f;
-  height: ${(props) => typeof props.height === "number" ? `${props.height}px` : props.height};
-  min-width: 244px;
-  overflow-y: auto;
-  font-size: 13px;
-  font-weight: 400;
-  line-height: 1;
-  transition: height 0.05s;
-  &:focus {
-    outline: none;
-    border: 1px solid ${(props) => props.theme.colors.brand[600]};
-    box-shadow: inset 0 0 0 1px #8cc2ed;
-    border-radius: 2px;
-  }
-`;
-const StyledComposerButton = styled(DSButton)`
-  &:disabled {
-    background: none;
-    svg {
-      fill: #5d6775;
-    }
-  }
-  svg {
-    fill: ${(props) => props.theme.colors.brand[600]};
-  }
-  &:focus {
-    background: ${(props) => props.theme.colors.brand[200]};
-  }
-`;
-const StyledCounterArea = styled(Grid)`
-  text-align: right;
-  font-size: 11px;
-  height: 15px;
-  align-items: center;
-  font-style: italic;
-  ${(props) => props.hasError ? `color:${props.theme.colors.danger[900]};` : ""}
-  position:relative;
-`;
-const StyledCounterErrorA11y = styled.span`
-  width: 1px;
-  height: 1px;
-  position: absolute;
-  clip: rect(1px, 1px, 1px, 1px);
-`;
-export {
-  StyledChatContainerContentComposer,
-  StyledComposerButton,
-  StyledComposerInput,
-  StyledCounterArea,
-  StyledCounterErrorA11y
-};
-//# sourceMappingURL=styled.js.map
+import styled from 'styled-components';
+import { Grid } from '@elliemae/ds-grid';
+import { DSButton } from '@elliemae/ds-button';
+
+// Composer
+const StyledChatContainerContentComposer = /*#__PURE__*/styled(Grid).withConfig({
+  componentId: "sc-1ahwpce-0"
+})(["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);
+const StyledComposerInput = /*#__PURE__*/styled.textarea.withConfig({
+  componentId: "sc-1ahwpce-1"
+})(["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.05s;&: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' ? "".concat(props.height, "px") : props.height, props => props.theme.colors.brand[600]);
+const StyledComposerButton = /*#__PURE__*/styled(DSButton).withConfig({
+  componentId: "sc-1ahwpce-2"
+})(["&:disabled{background:none;svg{fill:#5d6775;}}svg{fill:", ";}&:focus{background:", ";}"], props => props.theme.colors.brand[600], props => props.theme.colors.brand[200]);
+const StyledCounterArea = /*#__PURE__*/styled(Grid).withConfig({
+  componentId: "sc-1ahwpce-3"
+})(["text-align:right;font-size:11px;height:15px;align-items:center;font-style:italic;", " position:relative;"], props => props.hasError ? "color:".concat(props.theme.colors.danger[900], ";") : '');
+const StyledCounterErrorA11y = /*#__PURE__*/styled.span.withConfig({
+  componentId: "sc-1ahwpce-4"
+})(["width:1px;height:1px;position:absolute;clip:rect(1px,1px,1px,1px);"]);
+
+export { StyledChatContainerContentComposer, StyledComposerButton, StyledComposerInput, StyledCounterArea, StyledCounterErrorA11y };