@elliemae/ds-chat 2.3.0-next.0 → 3.0.0-alpha.0

package/dist/esm/parts/bubble/styled.js

@@ -0,0 +1,117 @@
+import * as React from "react";
+import styled from "styled-components";
+import { Grid } from "@elliemae/ds-grid";
+import { BUBBLE_TYPES } from "./props";
+const StyledWrapper = styled.div`
+  min-width: 224px;
+  border-radius: 10px;
+`;
+const StyledTitleBubble = styled(Grid)`
+  padding-top: 6px;
+  padding-left: 10px;
+  padding-right: 10px;
+  padding-bottom: 4px;
+`;
+const StyledTitleLeftBubble = styled(Grid)`
+  font-size: 13px;
+  font-weight: 600;
+`;
+const StyledTitleRightBubble = styled(Grid)`
+  font-size: 13px;
+  font-weight: 400;
+  color: ${(props) => props.type === BUBBLE_TYPES.SENDER ? "#FFF" : "#657489"};
+`;
+const StyleBodyWrapper = styled.div`
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 15px;
+  min-height: 18px;
+  padding: 0px 10px 8px 10px;
+`;
+const StyleErrorMessage = styled.div`
+  font-size: 12px;
+  font-weight: 400;
+  padding-top: ${(props) => props.theme.space.xxxs};
+  color: ${(props) => props.theme.colors.danger[900]};
+  align-items: flex-end;
+  justify-content: center;
+  text-align: right;
+  line-height: 15px;
+  svg {
+    fill: ${(props) => props.theme.colors.danger[900]};
+  }
+  a {
+    font-size: 12px;
+    color: ${(props) => props.theme.colors.danger[900]};
+  }
+  .em-ds-icon {
+    margin-left: 8px;
+  }
+`;
+const StyleHelpMessage = styled(StyleErrorMessage)`
+  font-size: 12px;
+  line-height: 15px;
+  color: ${(props) => props.theme.colors.neutral[500]};
+  svg {
+    fill: ${(props) => props.theme.colors.danger[500]};
+  }
+  a {
+    font-size: 12px;
+    color: ${(props) => props.theme.colors.danger[500]};
+  }
+`;
+const StyledBubbleArrow = styled.div`
+  display: block;
+  content: '';
+  position: absolute;
+  bottom: 10px;
+  height: 15px;
+`;
+const StyledColoredBubble = styled.div`
+  min-width: 224px;
+  border-radius: 10px;
+  position: relative;
+
+  ${(props) => props.type === BUBBLE_TYPES.SENDER ? `
+        border: 1px solid ${props.theme.colors.brand["700"]};
+        background: ${props.theme.colors.brand[600]};
+        color: ${props.theme.colors.neutral["000"]};
+        ${StyledBubbleArrow}{            
+            right: -9px;
+            bottom: 6px;
+            svg{
+                fill: ${props.theme.colors.brand[600]};
+            }
+        }
+
+        a {
+          color: #FFF;
+        }
+
+    ` : `
+        box-shadow: 0 1px 3px 0 rgba(53,60,70,0.80);
+        background: ${props.theme.colors.neutral["000"]};
+        color: ${props.theme.colors.neutral[700]};
+
+        ${StyledBubbleArrow}{            
+            left: -11px;
+            bottom: 6px;
+            svg{
+                fill: ${props.theme.colors.neutral["000"]};
+            }
+        }
+
+    `}
+`;
+export {
+  StyleBodyWrapper,
+  StyleErrorMessage,
+  StyleHelpMessage,
+  StyledBubbleArrow,
+  StyledColoredBubble,
+  StyledTitleBubble,
+  StyledTitleLeftBubble,
+  StyledTitleRightBubble,
+  StyledWrapper
+};
+//# sourceMappingURL=styled.js.map

package/dist/esm/parts/bubble/styled.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/bubble/styled.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport styled from 'styled-components';\nimport { Grid } from '@elliemae/ds-grid';\nimport { BUBBLE_TYPES } from './props';\n\n// Bubble WRAPPER\nexport const StyledWrapper = styled.div<any>`\n  min-width: 224px;\n  border-radius: 10px;\n`;\n\n// Bubble HEADER\nexport const StyledTitleBubble = styled(Grid)`\n  padding-top: 6px;\n  padding-left: 10px;\n  padding-right: 10px;\n  padding-bottom: 4px;\n`;\n\nexport const StyledTitleLeftBubble = styled(Grid)`\n  font-size: 13px;\n  font-weight: 600;\n`;\nexport const StyledTitleRightBubble = styled(Grid)`\n  font-size: 13px;\n  font-weight: 400;\n  color: ${(props) => (props.type === BUBBLE_TYPES.SENDER ? '#FFF' : '#657489')};\n`;\n\nexport const StyleBodyWrapper = styled.div<any>`\n  font-size: 13px;\n  font-weight: 400;\n  line-height: 15px;\n  min-height: 18px;\n  padding: 0px 10px 8px 10px;\n`;\n\nexport const StyleErrorMessage = styled.div<any>`\n  font-size: 12px;\n  font-weight: 400;\n  padding-top: ${(props) => props.theme.space.xxxs};\n  color: ${(props) => props.theme.colors.danger[900]};\n  align-items: flex-end;\n  justify-content: center;\n  text-align: right;\n  line-height: 15px;\n  svg {\n    fill: ${(props) => props.theme.colors.danger[900]};\n  }\n  a {\n    font-size: 12px;\n    color: ${(props) => props.theme.colors.danger[900]};\n  }\n  .em-ds-icon {\n    margin-left: 8px;\n  }\n`;\n\nexport const StyleHelpMessage = styled(StyleErrorMessage)`\n  font-size: 12px;\n  line-height: 15px;\n  color: ${(props) => props.theme.colors.neutral[500]};\n  svg {\n    fill: ${(props) => props.theme.colors.danger[500]};\n  }\n  a {\n    font-size: 12px;\n    color: ${(props) => props.theme.colors.danger[500]};\n  }\n`;\n\n// bubble sender/ recipient\nexport const StyledBubbleArrow = styled.div<any>`\n  display: block;\n  content: '';\n  position: absolute;\n  bottom: 10px;\n  height: 15px;\n`;\n\nexport const StyledColoredBubble = styled.div<any>`\n  min-width: 224px;\n  border-radius: 10px;\n  position: relative;\n\n  ${(props) =>\n    props.type === BUBBLE_TYPES.SENDER\n      ? `\n        border: 1px solid ${props.theme.colors.brand['700']};\n        background: ${props.theme.colors.brand[600]};\n        color: ${props.theme.colors.neutral['000']};\n        ${StyledBubbleArrow}{            \n            right: -9px;\n            bottom: 6px;\n            svg{\n                fill: ${props.theme.colors.brand[600]};\n            }\n        }\n\n        a {\n          color: #FFF;\n        }\n\n    `\n      : `\n        box-shadow: 0 1px 3px 0 rgba(53,60,70,0.80);\n        background: ${props.theme.colors.neutral['000']};\n        color: ${props.theme.colors.neutral[700]};\n\n        ${StyledBubbleArrow}{            \n            left: -11px;\n            bottom: 6px;\n            svg{\n                fill: ${props.theme.colors.neutral['000']};\n            }\n        }\n\n    `}\n`;\n"],
+  "mappings": "AAAA;ACCA;AACA;AACA;AAGO,MAAM,gBAAgB,OAAO;AAAA;AAAA;AAAA;AAM7B,MAAM,oBAAoB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOjC,MAAM,wBAAwB,OAAO;AAAA;AAAA;AAAA;AAIrC,MAAM,yBAAyB,OAAO;AAAA;AAAA;AAAA,WAGlC,CAAC,UAAW,MAAM,SAAS,aAAa,SAAS,SAAS;AAAA;AAG9D,MAAM,mBAAmB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQhC,MAAM,oBAAoB,OAAO;AAAA;AAAA;AAAA,iBAGvB,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,WACnC,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAMpC,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA,aAIpC,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAO3C,MAAM,mBAAmB,OAAO;AAAA;AAAA;AAAA,WAG5B,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA,YAErC,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA,aAIpC,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO;AAAA;AAAA;AAK3C,MAAM,oBAAoB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQjC,MAAM,sBAAsB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKtC,CAAC,UACD,MAAM,SAAS,aAAa,SACxB;AAAA,4BACoB,MAAM,MAAM,OAAO,MAAM;AAAA,sBAC/B,MAAM,MAAM,OAAO,MAAM;AAAA,iBAC9B,MAAM,MAAM,OAAO,QAAQ;AAAA,UAClC;AAAA;AAAA;AAAA;AAAA,wBAIc,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QASzC;AAAA;AAAA,sBAEc,MAAM,MAAM,OAAO,QAAQ;AAAA,iBAChC,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA,UAElC;AAAA;AAAA;AAAA;AAAA,wBAIc,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/dist/esm/parts/chat-card/ChatCard.js

@@ -0,0 +1,33 @@
+import * as React from "react";
+import React2 from "react";
+import { describe } from "react-desc";
+import { SimpleTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
+import { propTypes } from "./props";
+import { useValidateProps } from "./config/useValidateProps";
+import { Wrapper, MainContent, Title, Content, Time, RightAddon } from "./styled";
+const ChatCard = (props) => {
+  useValidateProps(props, ChatCardWithSchema.toJSON());
+  const { title, content, time, rightAddon } = props;
+  return /* @__PURE__ */ React2.createElement(Wrapper, {
+    cols: ["1fr", "auto"],
+    "data-testid": "chat-card-wrapper"
+  }, /* @__PURE__ */ React2.createElement(MainContent, null, /* @__PURE__ */ React2.createElement(Title, {
+    "data-testid": "chat-card-title"
+  }, title), /* @__PURE__ */ React2.createElement(Content, {
+    "data-testid": "chat-card-content"
+  }, /* @__PURE__ */ React2.createElement(SimpleTruncatedTooltipText, {
+    value: content
+  })), time && /* @__PURE__ */ React2.createElement(Time, {
+    "data-testid": "chat-card-time"
+  }, time)), rightAddon && /* @__PURE__ */ React2.createElement(RightAddon, {
+    "data-testid": "chat-card-right-addon"
+  }, rightAddon));
+};
+ChatCard.propTypes = propTypes;
+const ChatCardWithSchema = describe(ChatCard);
+ChatCardWithSchema.propTypes = propTypes;
+export {
+  ChatCard,
+  ChatCardWithSchema
+};
+//# sourceMappingURL=ChatCard.js.map

package/dist/esm/parts/chat-card/ChatCard.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/chat-card/ChatCard.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from 'react-desc';\n\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { propTypes, CardPropTypes } from './props';\nimport { useValidateProps } from './config/useValidateProps';\nimport { Wrapper, MainContent, Title, Content, Time, RightAddon } from './styled';\n\nconst ChatCard = (props: CardPropTypes): JSX.Element => {\n  useValidateProps(props, ChatCardWithSchema.toJSON());\n  const { title, content, time, rightAddon } = props;\n  return (\n    <Wrapper cols={['1fr', 'auto']} data-testid=\"chat-card-wrapper\">\n      <MainContent>\n        <Title data-testid=\"chat-card-title\">{title}</Title>\n        <Content data-testid=\"chat-card-content\">\n          <SimpleTruncatedTooltipText value={content} />\n        </Content>\n        {time && <Time data-testid=\"chat-card-time\">{time}</Time>}\n      </MainContent>\n      {rightAddon && <RightAddon data-testid=\"chat-card-right-addon\">{rightAddon}</RightAddon>}\n    </Wrapper>\n  );\n};\n\nChatCard.propTypes = propTypes;\nconst ChatCardWithSchema = describe(ChatCard);\nChatCardWithSchema.propTypes = propTypes;\n\nexport { ChatCard, ChatCardWithSchema };\n"],
+  "mappings": "AAAA;ACAA;AACA;AAEA;AACA;AACA;AACA;AAEA,MAAM,WAAW,CAAC,UAAsC;AACtD,mBAAiB,OAAO,mBAAmB;AAC3C,QAAM,EAAE,OAAO,SAAS,MAAM,eAAe;AAC7C,SACE,qCAAC,SAAD;AAAA,IAAS,MAAM,CAAC,OAAO;AAAA,IAAS,eAAY;AAAA,KAC1C,qCAAC,aAAD,MACE,qCAAC,OAAD;AAAA,IAAO,eAAY;AAAA,KAAmB,QACtC,qCAAC,SAAD;AAAA,IAAS,eAAY;AAAA,KACnB,qCAAC,4BAAD;AAAA,IAA4B,OAAO;AAAA,OAEpC,QAAQ,qCAAC,MAAD;AAAA,IAAM,eAAY;AAAA,KAAkB,QAE9C,cAAc,qCAAC,YAAD;AAAA,IAAY,eAAY;AAAA,KAAyB;AAAA;AAKtE,SAAS,YAAY;AACrB,MAAM,qBAAqB,SAAS;AACpC,mBAAmB,YAAY;",
+  "names": []
+}

package/dist/esm/parts/chat-card/config/useValidateProps.js

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

package/dist/esm/parts/chat-card/config/useValidateProps.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/chat-card/config/useValidateProps.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useValidatePropTypes } from '@elliemae/ds-props-helpers';\nimport { CardPropTypes } from '../props';\n\nexport const useValidateProps = (props: CardPropTypes, schema: unknown): void => {\n  useValidatePropTypes(props, schema);\n};\n"],
+  "mappings": "AAAA;ACAA;AAGO,MAAM,mBAAmB,CAAC,OAAsB,WAA0B;AAC/E,uBAAqB,OAAO;AAAA;",
+  "names": []
+}

package/dist/esm/parts/chat-card/index.js

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { ChatCard, ChatCardWithSchema } from "./ChatCard";
+export {
+  ChatCard,
+  ChatCardWithSchema
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/parts/chat-card/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/chat-card/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { ChatCard, ChatCardWithSchema } from './ChatCard';\n"],
+  "mappings": "AAAA;ACAA;",
+  "names": []
+}

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

@@ -0,0 +1,12 @@
+import * as React from "react";
+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")
+};
+export {
+  propTypes
+};
+//# sourceMappingURL=props.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/chat-card/props.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes } from 'react-desc';\n\nexport const propTypes = {\n  title: PropTypes.string.isRequired.description(`Card's title`),\n  content: PropTypes.string.description(`Card's content`),\n  time: PropTypes.string.description('Time'),\n  rightAddon: PropTypes.element.description('Right addon, badge or icon'),\n};\n\nexport interface CardPropTypes {\n  title: string;\n  content: string;\n  time: string;\n  rightAddon: JSX.Element;\n}\n"],
+  "mappings": "AAAA;ACAA;AAEO,MAAM,YAAY;AAAA,EACvB,OAAO,UAAU,OAAO,WAAW,YAAY;AAAA,EAC/C,SAAS,UAAU,OAAO,YAAY;AAAA,EACtC,MAAM,UAAU,OAAO,YAAY;AAAA,EACnC,YAAY,UAAU,QAAQ,YAAY;AAAA;",
+  "names": []
+}

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

@@ -0,0 +1,42 @@
+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

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/chat-card/styled.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import styled from 'styled-components';\nimport { Grid } from '@elliemae/ds-grid';\n\nexport const Wrapper = styled(Grid)`\n  min-width: 248px;\n  border: 1px;\n  border-bottom: 1px solid #ccc;\n  padding: 12px 12px;\n`;\n\nexport const MainContent = styled.div``;\n\nexport const Title = styled.p`\n  font-size: 16px;\n  font-weight: 600;\n  margin: 0;\n`;\n\nexport const Content = styled.p`\n  font-size: 12px;\n  font-weight: 400;\n  line-height: 1;\n  margin: 0;\n`;\n\nexport const Time = styled.p`\n  font-size: 12px;\n  font-weight: 100;\n  margin: 0;\n  margin-top: 8px;\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n  color: ${(props) => props.theme.colors.neutral['500']};\n`;\n\nexport const RightAddon = styled.div`\n  height: fit-content;\n  margin-left: 12px;\n`;\n"],
+  "mappings": "AAAA;ACAA;AACA;AAEO,MAAM,UAAU,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOvB,MAAM,cAAc,OAAO;AAE3B,MAAM,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAMrB,MAAM,UAAU,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOvB,MAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,iBAKV,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA,WACzC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAG1C,MAAM,aAAa,OAAO;AAAA;AAAA;AAAA;",
+  "names": []
+}

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

@@ -0,0 +1,134 @@
+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) => {
+  useValidateProps(props, ChatComposerWithSchema.toJSON());
+  const {
+    inputValue,
+    onChange,
+    onResize,
+    onSend,
+    onFocus,
+    onBlur,
+    onKeyDown,
+    maxHeight = 300,
+    placeholder,
+    inputMaxLength,
+    maxLengthMessage,
+    buttonDisabled,
+    dataTestid,
+    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);
+    setHeight(newHeight);
+    setShowScroll(inputSize.current?.scrollHeight - inputSize.current?.clientHeight > 5);
+  }, [inputValue, internalMaxHeight, height, onResize]);
+  React2.useEffect(() => {
+    if (actionRef && actionRef.current) {
+      actionRef.current.focusToComposer = () => {
+        input.current.focus();
+      };
+      actionRef.current.focusToSend = () => {
+        inputSend.current.focus();
+      };
+    }
+  }, [actionRef]);
+  const handleChange = React2.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`,
+    "data-testid": dataTestid
+  }, /* @__PURE__ */ React2.createElement(Grid, {
+    cols: ["1fr", "24px"],
+    style: { height: heightProps.height },
+    justifyContent: "center",
+    alignItems: "flex-end",
+    gutter: "xxs"
+  }, /* @__PURE__ */ React2.createElement(StyledComposerInput, {
+    ref: input,
+    onChange: handleChange,
+    style: { ...heightProps },
+    value: inputValue,
+    onFocus,
+    onBlur,
+    onKeyDown,
+    placeholder,
+    "aria-label": "Message to send",
+    "data-testid": "chat-composer-textarea",
+    name: "chat-composer-textarea",
+    id: "chat-composer-textarea"
+  }), /* @__PURE__ */ React2.createElement(Grid, {
+    height: "32px",
+    alignItems: "center"
+  }, /* @__PURE__ */ React2.createElement(StyledComposerButton, {
+    buttonType: "text",
+    icon: /* @__PURE__ */ React2.createElement(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, {
+    ref: inputSize,
+    style: {
+      height: 32,
+      visibility: "hidden",
+      pointerEvents: "none",
+      position: "absolute",
+      top: 0,
+      width: input.current?.clientWidth
+    },
+    onChange: handleChange,
+    value: inputValue
+  }), /* @__PURE__ */ React2.createElement(Grid, {
+    cols: ["1fr", "24px"],
+    justifyContent: "flex-end",
+    alignItems: "center",
+    gutter: "xxs",
+    pb: "xxs"
+  }, /* @__PURE__ */ React2.createElement(StyledCounterArea, {
+    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)));
+};
+ChatComposer.propTypes = composerProps;
+ChatComposer.defaultProps = defaultComposerPros;
+const ChatComposerWithSchema = describe(ChatComposer);
+ChatComposerWithSchema.propTypes = composerProps;
+export {
+  ChatComposer,
+  ChatComposerWithSchema
+};
+//# sourceMappingURL=ChatContainerComposer.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/chat-composer/ChatContainerComposer.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { describe } from 'react-desc';\nimport { PaperAirplane } from '@elliemae/ds-icons';\nimport {\n  StyledChatContainerContentComposer,\n  StyledComposerInput,\n  StyledComposerButton,\n  StyledCounterArea,\n  StyledCounterErrorA11y,\n} from './styled';\nimport { useValidateProps } from './config/useValidateProps';\n\nimport { defaultComposerPros, composerProps, ChatComposerProps } from './props';\n\n// eslint-disable-next-line complexity\nconst ChatComposer = (props: ChatComposerProps): JSX.Element => {\n  useValidateProps(props, ChatComposerWithSchema.toJSON());\n\n  const {\n    inputValue,\n    onChange,\n    onResize,\n    onSend,\n    onFocus,\n    onBlur,\n    onKeyDown,\n    maxHeight = 300,\n    placeholder,\n    inputMaxLength,\n    maxLengthMessage,\n    buttonDisabled,\n    dataTestid,\n    actionRef,\n  } = props;\n\n  const COMPOSER_MIN_HEIGHT = 32;\n  const input = React.useRef<HTMLTextAreaElement>();\n  const inputSize = React.useRef<HTMLTextAreaElement>();\n  const inputSend = React.useRef<HTMLButtonElement>();\n  const [height, setHeight] = React.useState(32);\n  const internalMaxHeight = React.useMemo(() => maxHeight - 24, [maxHeight]);\n  const [showScroll, setShowScroll] = React.useState(true);\n\n  React.useEffect(() => {\n    const newHeight =\n      inputSize.current?.scrollHeight > internalMaxHeight ? internalMaxHeight : inputSize.current?.scrollHeight;\n    if (newHeight !== height && newHeight > COMPOSER_MIN_HEIGHT) onResize(newHeight);\n    setHeight(newHeight);\n    setShowScroll(inputSize.current?.scrollHeight - inputSize.current?.clientHeight > 5);\n  }, [inputValue, internalMaxHeight, height, onResize]);\n\n  React.useEffect(() => {\n    if (actionRef && actionRef.current) {\n      actionRef.current.focusToComposer = () => {\n        input.current.focus();\n      };\n      actionRef.current.focusToSend = () => {\n        inputSend.current.focus();\n      };\n    }\n  }, [actionRef]);\n\n  const handleChange = React.useCallback(\n    (e) => {\n      onChange(e.target.value);\n    },\n    [onChange],\n  );\n  const heightProps = { height, overflow: showScroll ? 'auto' : 'hidden' };\n\n  const inputLength = String(inputValue || '').length;\n  const hasError = React.useMemo(() => inputLength > inputMaxLength, [inputLength, inputMaxLength]);\n  return (\n    <StyledChatContainerContentComposer rows={['auto', '15px']} maxHeight={`${maxHeight}px`} data-testid={dataTestid}>\n      <Grid\n        cols={['1fr', '24px']}\n        style={{ height: heightProps.height }}\n        justifyContent=\"center\"\n        alignItems=\"flex-end\"\n        gutter=\"xxs\"\n      >\n        <StyledComposerInput\n          ref={input}\n          onChange={handleChange}\n          style={{ ...heightProps }}\n          value={inputValue}\n          onFocus={onFocus}\n          onBlur={onBlur}\n          onKeyDown={onKeyDown}\n          placeholder={placeholder}\n          aria-label=\"Message to send\"\n          data-testid=\"chat-composer-textarea\"\n          name=\"chat-composer-textarea\"\n          id=\"chat-composer-textarea\"\n        />\n\n        <Grid height=\"32px\" alignItems=\"center\">\n          <StyledComposerButton\n            buttonType=\"text\"\n            icon={<PaperAirplane width={18} height={18} />}\n            onClick={onSend}\n            size=\"s\"\n            disabled={!inputValue || buttonDisabled || hasError}\n            data-testid=\"chat-composer-send-button\"\n            aria-label=\"Send\"\n            innerRef={inputSend}\n          />\n        </Grid>\n      </Grid>\n      <StyledComposerInput\n        ref={inputSize}\n        style={{\n          height: 32,\n          visibility: 'hidden',\n          pointerEvents: 'none',\n          position: 'absolute',\n          top: 0,\n          width: input.current?.clientWidth,\n        }}\n        onChange={handleChange}\n        value={inputValue}\n      />\n      <Grid cols={['1fr', '24px']} justifyContent=\"flex-end\" alignItems=\"center\" gutter=\"xxs\" pb=\"xxs\">\n        <StyledCounterArea hasError={hasError} data-testid=\"composer-counter-area\">\n          {inputMaxLength && hasError ? (\n            <>\n              <StyledCounterErrorA11y role=\"alert\">\n                {maxLengthMessage ||\n                  `You have entered ${inputLength} characters and have exceeded the limit by ${\n                    inputLength - inputMaxLength\n                  }. Please limit to less than ${inputMaxLength} characters. `}\n              </StyledCounterErrorA11y>\n              {maxLengthMessage || `Please limit to less than ${inputMaxLength} characters. `}\n            </>\n          ) : (\n            ''\n          )}\n          {inputMaxLength && !maxLengthMessage ? ` ${inputLength} / ${inputMaxLength}` : ''}\n        </StyledCounterArea>\n        <Grid />\n      </Grid>\n    </StyledChatContainerContentComposer>\n  );\n};\n\nChatComposer.propTypes = composerProps;\nChatComposer.defaultProps = defaultComposerPros;\nconst ChatComposerWithSchema = describe(ChatComposer);\nChatComposerWithSchema.propTypes = composerProps;\n\nexport { ChatComposer, ChatComposerWithSchema };\n"],
+  "mappings": "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",
+  "names": []
+}

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

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

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/chat-composer/config/useValidateProps.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useValidatePropTypes } from '@elliemae/ds-props-helpers';\nimport { ChatComposerProps } from '../props';\n\nexport const useValidateProps = (props: ChatComposerProps, schema: unknown): void => {\n  useValidatePropTypes(props, schema);\n};\n"],
+  "mappings": "AAAA;ACAA;AAGO,MAAM,mBAAmB,CAAC,OAA0B,WAA0B;AACnF,uBAAqB,OAAO;AAAA;",
+  "names": []
+}

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

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

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/chat-composer/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { ChatComposer, ChatComposerWithSchema } from './ChatContainerComposer';\n"],
+  "mappings": "AAAA;ACAA;",
+  "names": []
+}

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

@@ -0,0 +1,50 @@
+import * as React from "react";
+import { PropTypes } from "react-desc";
+import { noop } from "lodash";
+const defaultComposerPros = {
+  placeholder: "Type your message",
+  inputValue: "",
+  onChange: noop,
+  onResize: noop,
+  onSend: noop,
+  onFocus: noop,
+  onBlur: noop,
+  onKeyDown: noop,
+  maxHeight: 0,
+  inputMaxLength: void 0,
+  maxLengthMessage: void 0,
+  buttonDisabled: false,
+  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)
+};
+export {
+  composerProps,
+  defaultComposerPros
+};
+//# sourceMappingURL=props.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/chat-composer/props.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { PropTypes } from 'react-desc';\nimport { noop } from 'lodash';\n\nexport interface TextAreaProps {\n  height: string | number;\n  style: React.CSSProperties;\n}\n\nexport const defaultComposerPros: ChatComposerProps = {\n  placeholder: 'Type your message',\n  inputValue: '',\n  onChange: noop,\n  onResize: noop,\n  onSend: noop,\n  onFocus: noop,\n  onBlur: noop,\n  onKeyDown: noop,\n  maxHeight: 0,\n  inputMaxLength: undefined,\n  maxLengthMessage: undefined,\n  buttonDisabled: false,\n  dataTestid: 'ds-chat-composer',\n  actionRef: noop,\n};\n\nexport interface ChatComposerProps {\n  placeholder?: string;\n  inputValue?: string;\n  maxLengthMessage?: string;\n  onChange: (value: string) => void;\n  onResize?: (value: number) => void;\n  onSend: (value: string) => void;\n  onFocus?: (e: React.ChangeEvent<HTMLTextAreaElement>, value: string) => void;\n  onBlur?: (e: React.ChangeEvent<HTMLTextAreaElement>, value: string) => void;\n  onKeyDown?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;\n  maxHeight?: number;\n  inputMaxLength: number | undefined;\n  buttonDisabled: boolean;\n  dataTestid?: string;\n  actionRef: PropTypes.func;\n}\n\nexport const composerProps = {\n  placeholder: PropTypes.string.description('Input Placeholder').defaultValue(defaultComposerPros.placeholder),\n  inputValue: PropTypes.string.description('Input value').defaultValue(defaultComposerPros.inputValue),\n  maxLengthMessage: PropTypes.string\n    .description('Max length message')\n    .defaultValue(defaultComposerPros.maxLengthMessage),\n  onChange: PropTypes.func.description('Called when the user types').defaultValue(defaultComposerPros.onChange),\n  onResize: PropTypes.func\n    .description('Called the input changes his height')\n    .defaultValue(defaultComposerPros.onResize),\n  onSend: PropTypes.func.description('Called when the click send').defaultValue(defaultComposerPros.onSend),\n  onFocus: PropTypes.func.description('Input focus').defaultValue(defaultComposerPros.onFocus),\n  onBlur: PropTypes.func.description('Input blur').defaultValue(defaultComposerPros.onBlur),\n  onKeyDown: PropTypes.func.description('Input on key down').defaultValue(defaultComposerPros.onKeyDown),\n  maxHeight: PropTypes.number\n    .description('Max height of the composer. Use 0 for no limit')\n    .defaultValue(defaultComposerPros.onBlur),\n  inputMaxLength: PropTypes.number\n    .description('Max length of the composer. `undefined` for no limit')\n    .defaultValue(defaultComposerPros.inputMaxLength),\n  buttonDisabled: PropTypes.bool\n    .description('Control the disabled for the send button')\n    .defaultValue(defaultComposerPros.buttonDisabled),\n  dataTestid: PropTypes.string.description('Data testid').defaultValue(defaultComposerPros.placeholder),\n  actionRef: PropTypes.object\n    .description(\n      `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      `,\n    )\n    .defaultValue(defaultComposerPros.actionRef),\n};\n"],
+  "mappings": "AAAA;ACCA;AACA;AAOO,MAAM,sBAAyC;AAAA,EACpD,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB,kBAAkB;AAAA,EAClB,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,WAAW;AAAA;AAoBN,MAAM,gBAAgB;AAAA,EAC3B,aAAa,UAAU,OAAO,YAAY,qBAAqB,aAAa,oBAAoB;AAAA,EAChG,YAAY,UAAU,OAAO,YAAY,eAAe,aAAa,oBAAoB;AAAA,EACzF,kBAAkB,UAAU,OACzB,YAAY,sBACZ,aAAa,oBAAoB;AAAA,EACpC,UAAU,UAAU,KAAK,YAAY,8BAA8B,aAAa,oBAAoB;AAAA,EACpG,UAAU,UAAU,KACjB,YAAY,uCACZ,aAAa,oBAAoB;AAAA,EACpC,QAAQ,UAAU,KAAK,YAAY,8BAA8B,aAAa,oBAAoB;AAAA,EAClG,SAAS,UAAU,KAAK,YAAY,eAAe,aAAa,oBAAoB;AAAA,EACpF,QAAQ,UAAU,KAAK,YAAY,cAAc,aAAa,oBAAoB;AAAA,EAClF,WAAW,UAAU,KAAK,YAAY,qBAAqB,aAAa,oBAAoB;AAAA,EAC5F,WAAW,UAAU,OAClB,YAAY,kDACZ,aAAa,oBAAoB;AAAA,EACpC,gBAAgB,UAAU,OACvB,YAAY,wDACZ,aAAa,oBAAoB;AAAA,EACpC,gBAAgB,UAAU,KACvB,YAAY,4CACZ,aAAa,oBAAoB;AAAA,EACpC,YAAY,UAAU,OAAO,YAAY,eAAe,aAAa,oBAAoB;AAAA,EACzF,WAAW,UAAU,OAClB,YACC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAYD,aAAa,oBAAoB;AAAA;",
+  "names": []
+}

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

@@ -0,0 +1,73 @@
+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

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/chat-composer/styled.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import styled from 'styled-components';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButton } from '@elliemae/ds-button';\nimport { TextAreaProps } from './props';\n\n// Composer\nexport const StyledChatContainerContentComposer = styled(Grid)`\n  width: 100%;\n  min-height: 56px;\n  background: ${(props) => props.theme.colors.neutral['050']};\n  padding: ${(props) => props.theme.space.xxs};\n  padding-bottom: 3px;\n  padding-top: 6px;\n  padding-left: ${(props) => props.theme.space.xs};\n  max-height: ${(props) => props.maxHeight};\n  border-top: 1px solid #cbcfd7;\n`;\n\nexport const StyledComposerInput = styled.textarea<any>`\n  padding: ${(props) => props.theme.space.xxs};\n  resize: none;\n  min-height: 32px;\n  border-radius: 2px;\n  border: solid 1px #cbcfd7;\n  color: #25292f;\n  height: ${(props: TextAreaProps) => (typeof props.height === 'number' ? `${props.height}px` : props.height)};\n  min-width: 244px;\n  overflow-y: auto;\n  font-size: 13px;\n  font-weight: 400;\n  line-height: 1;\n  transition: height 0.05s;\n  &:focus {\n    outline: none;\n    border: 1px solid ${(props) => props.theme.colors.brand[600]};\n    box-shadow: inset 0 0 0 1px #8cc2ed;\n    border-radius: 2px;\n  }\n`;\nexport const StyledComposerButton = styled(DSButton)`\n  &:disabled {\n    background: none;\n    svg {\n      fill: #5d6775;\n    }\n  }\n  svg {\n    fill: ${(props) => props.theme.colors.brand[600]};\n  }\n  &:focus {\n    background: ${(props) => props.theme.colors.brand[200]};\n  }\n`;\n\nexport const StyledCounterArea = styled(Grid)`\n  text-align: right;\n  font-size: 11px;\n  height: 15px;\n  align-items: center;\n  font-style: italic;\n  ${(props) => (props.hasError ? `color:${props.theme.colors.danger[900]};` : '')}\n  position:relative;\n`;\n\nexport const StyledCounterErrorA11y = styled.span`\n  width: 1px;\n  height: 1px;\n  position: absolute;\n  clip: rect(1px, 1px, 1px, 1px);\n`;\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AAIO,MAAM,qCAAqC,OAAO;AAAA;AAAA;AAAA,gBAGzC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,aACzC,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA,kBAGxB,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,gBAC/B,CAAC,UAAU,MAAM;AAAA;AAAA;AAI1B,MAAM,sBAAsB,OAAO;AAAA,aAC7B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAM9B,CAAC,UAA0B,OAAO,MAAM,WAAW,WAAW,GAAG,MAAM,aAAa,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAS9E,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAKrD,MAAM,uBAAuB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAQ/B,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA,kBAG9B,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAI/C,MAAM,oBAAoB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMpC,CAAC,UAAW,MAAM,WAAW,SAAS,MAAM,MAAM,OAAO,OAAO,UAAU;AAAA;AAAA;AAIvE,MAAM,yBAAyB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}