@telia-ace/widget-conversation 1.0.14 → 1.0.15

package/dist/conversation.js

@@ -1,6 +1,4 @@
 var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -16,7 +14,6 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -29,12 +26,12 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-import { Input, Button, borderTabStyle, SymbolBadge, useDispatch, useProperties, useScroll, Typography, useComponent, invertedHoverButton, Html, List, buttonCss, Icon, Lightbox, useTransitionEnd, headingElement } from "@telia-ace/widget-ui";
-import { appendClassNames, uuid } from "@telia-ace/widget-utilities";
-import React, { useState, useEffect, Suspense, Fragment, useRef, useCallback } from "react";
-import styled, { css, keyframes } from "styled-components";
+import { Input, Button, borderTabStyle, SymbolBadge, useDispatch, useProperties, useScroll, invertedHoverButton, Html, List, buttonCss, Lightbox, useTransitionEnd, headingElement } from "@telia-ace/widget-ui";
+import { appendClassNames } from "@telia-ace/widget-utilities";
+import React, { useState, useEffect, useRef, useCallback } from "react";
+import styled, { css } from "styled-components";
+import { C as ContentBundle, M as MessageContainer, a as MessageContent, L as Loader, b as ConversationMessageType, S as SystemMessage, c as ConversationContent, A as AgentMessage, U as UserMessage } from "./index2.js";
 import { FormComponent } from "@telia-ace/widget-forms";
-import { ConversationMessageListItemType, ConversationMessageType } from "./index.js";
 import "@telia-ace/widget-core";
 import "@telia-ace/widget-services";
 import "@telia-ace/widget-plugins";
@@ -123,7 +120,7 @@ const ConversationInput = ({ className }) => {
     title: secondaryAction.label,
     "aria-label": secondaryAction.label
   }, /* @__PURE__ */ React.createElement(SymbolBadge, {
-    size: 22,
+    size: 24,
     symbol: { type: "Svg", content: secondaryAction.icon || "browse" }
   })), multiline ? /* @__PURE__ */ React.createElement(StyledTextArea, {
     value: inputText,
@@ -263,805 +260,9 @@ const SendSymbol = styled((_a) => {
 }};
     }
 `;
-const Avatar = styled.div`
-    width: ${(p) => p.avatarSize || "32px"};
-    height: ${(p) => p.avatarSize || "32px"};
-    border-radius: 50%;
-    background-color: ${(p) => {
-  var _a;
-  return (_a = p.theme.colors) == null ? void 0 : _a.accent;
-}};
-    border: ${(p) => p.theme.border};
-    grid-area: avatar;
-    align-self: flex-end;
-    justify-self: center;
-    overflow: hidden;
-    margin-right: ${(p) => {
-  var _a;
-  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
-}};
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    color: ${(p) => {
-  var _a;
-  return (_a = p.theme.colors) == null ? void 0 : _a.text;
-}};
-
-    > img {
-        height: 100%;
-        width: 100%;
-        object-fit: cover;
-    }
-
-    > svg {
-        width: 90%;
-        height: 90%;
-        padding: 10%;
-        color: ${(p) => {
-  var _a;
-  return (_a = p.theme.colors) == null ? void 0 : _a.text;
-}};
-
-        line,
-        path,
-        circle,
-        fill {
-            stroke: ${(p) => {
-  var _a;
-  return (_a = p.theme.colors) == null ? void 0 : _a.text;
-}};
-        }
-    }
-`;
-const LoaderAnimation = keyframes`
-  0% {
-    opacity: 0;
-  }
-  75% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0;
-  }
-`;
-const Loader = styled.div`
-    display: flex;
-    justify-content: center;
-    > div {
-        height: 10px;
-        width: 10px;
-        border-radius: 50%;
-        margin: 5px;
-        background-color: ${(p) => {
-  var _a;
-  return (_a = p.theme.colors) == null ? void 0 : _a.text;
-}};
-        animation: ${LoaderAnimation} 1s infinite;
-    }
-    > div:nth-child(2) {
-        animation-delay: 100ms;
-    }
-    > div:nth-child(3) {
-        animation-delay: 200ms;
-    }
-`;
-const ContentBundle = styled.div`
-    grid-area: content;
-    max-width: 100%;
-    overflow: hidden;
-`;
-const MessageTitle = styled(Typography)`
-    font-size: ${(p) => {
-  var _a;
-  return (_a = p.theme.fonts) == null ? void 0 : _a.normal;
-}};
-    font-weight: normal;
-    margin: 0;
-`;
-const MessageContainer = styled.div`
-    display: flex;
-`;
-const MessageContent = styled.div`
-    background-color: ${(p) => {
-  var _a, _b;
-  return p.user ? (_a = p.theme.colors) == null ? void 0 : _a.primary : (_b = p.theme.colors) == null ? void 0 : _b.accent;
-}};
-    color: ${(p) => {
-  var _a, _b;
-  return p.user ? (_a = p.theme.colors) == null ? void 0 : _a.accent : (_b = p.theme.colors) == null ? void 0 : _b.text;
-}};
-    border-radius: 5px; // TODO: prop?
-    border: 1px solid rgb(231, 231, 231);
-    padding-top: calc(${(p) => {
-  var _a;
-  return (_a = p.theme.sizes) == null ? void 0 : _a.medium;
-}} - ${(p) => {
-  var _a;
-  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
-}});
-    padding-bottom: calc(${(p) => {
-  var _a;
-  return (_a = p.theme.sizes) == null ? void 0 : _a.medium;
-}} - ${(p) => {
-  var _a;
-  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
-}});
-    margin-top: ${(p) => {
-  var _a;
-  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
-}};
-    display: inline-block;
-    && > * {
-        overflow-wrap: break-word;
-        word-wrap: break-word;
-        word-break: break-all;
-        word-break: break-word;
-        hyphens: auto;
-    }
-    max-width: 100%;
-    ${(p) => p.fullWidth && "width: 100%;"}
-
-    ${(p) => !p.user && css`
-            border: ${p.theme.border};
-        `}
-  ${(p) => p.user && "margin-left: auto"};
-
-    ${(p) => p.stacked === "first" && p.user && css`
-            border-bottom-right-radius: 1px; // TODO: Prop?
-        `}
-    ${(p) => p.stacked === "middle" && p.user && css`
-            border-bottom-right-radius: 1px;
-            border-top-right-radius: 1px;
-        `}
-  ${(p) => p.stacked === "last" && p.user && css`
-            border-top-right-radius: 1px;
-        `}
-  ${(p) => p.stacked === "first" && !p.user && css`
-            border-bottom-left-radius: 1px;
-        `}
-  ${(p) => p.stacked === "middle" && !p.user && css`
-            border-bottom-left-radius: 1px;
-            border-top-left-radius: 1px;
-        `}
-  ${(p) => p.stacked === "last" && !p.user && css`
-            border-top-left-radius: 1px;
-        `};
-
-    ${(p) => !p.stacked && css`
-            ${p.user ? "border-bottom-right-radius: 1px;" : "border-bottom-left-radius: 1px;"}
-        `};
-
-    transition: border-radius 500ms linear;
-`;
-const MessageContentPart = styled.div`
-    padding: ${(p) => {
-  var _a;
-  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
-}} ${(p) => {
-  var _a;
-  return (_a = p.theme.sizes) == null ? void 0 : _a.medium;
-}};
-
-    ${(p) => p.noPadding && css`
-            padding: 0;
-        `}
-
-    margin-bottom: ${(p) => {
-  var _a;
-  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
-}};
-    &:last-child {
-        margin-bottom: 0;
-    }
-`;
 const ConversationLoader = ({ className, agentData }) => {
   return /* @__PURE__ */ React.createElement(ContentBundle, null, /* @__PURE__ */ React.createElement(MessageContainer, null, /* @__PURE__ */ React.createElement(MessageContent, null, /* @__PURE__ */ React.createElement(Loader, null, /* @__PURE__ */ React.createElement("div", null), /* @__PURE__ */ React.createElement("div", null), /* @__PURE__ */ React.createElement("div", null)))));
 };
-const StyledTimestamp = styled.p`
-    && {
-        font-size: ${(p) => {
-  var _a;
-  return (_a = p.theme.fonts) == null ? void 0 : _a.small;
-}};
-        font-weight: 300;
-    }
-    padding-top: ${(p) => {
-  var _a;
-  return (_a = p.theme.sizes) == null ? void 0 : _a.small;
-}};
-    margin: 0;
-    line-height: 1.5em;
-    grid-area: info;
-    color: ${(p) => {
-  var _a;
-  return (_a = p.theme.colors) == null ? void 0 : _a.text;
-}};
-`;
-const getTimestamp = (raw) => {
-  return new Date(raw).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
-};
-const Timestamp = ({ className, name, timestamp }) => {
-  if (!name && !timestamp) {
-    return null;
-  }
-  let output = "";
-  if (name) {
-    if (timestamp) {
-      output = `${name}: ${getTimestamp(timestamp)}`;
-    } else {
-      output = name;
-    }
-  } else if (timestamp) {
-    output = getTimestamp(timestamp);
-  }
-  return /* @__PURE__ */ React.createElement(StyledTimestamp, null, output);
-};
-const AgentMessage = ({ className, children, sender, timestamp }) => {
-  const { avatar, name } = sender;
-  const { avatarSize } = useProperties();
-  return /* @__PURE__ */ React.createElement(StyledAgentMessage, {
-    hasAvatar: !!avatar,
-    className: appendClassNames(className, "humany-conversation-agent-message")
-  }, avatar && /* @__PURE__ */ React.createElement(Avatar, {
-    avatarSize
-  }, typeof avatar === "string" ? /* @__PURE__ */ React.createElement("img", {
-    src: avatar
-  }) : /* @__PURE__ */ React.createElement(SymbolBadge, {
-    symbol: avatar
-  })), children, /* @__PURE__ */ React.createElement(Timestamp, {
-    name,
-    timestamp
-  }));
-};
-const StyledAgentMessage = styled.div`
-    display: grid;
-    margin-right: 10%;
-    width: 90%;
-    ${(p) => p.hasAvatar ? css`
-                  grid-template-columns: auto 1fr;
-                  grid-template-rows: 1fr auto;
-                  grid-template-areas:
-                      'avatar content'
-                      '. info';
-              ` : css`
-                  grid-template-columns: 1fr;
-                  grid-template-rows: 1fr auto;
-                  grid-template-areas:
-                      'content'
-                      'info';
-              `};
-`;
-const CustomMessage = (props) => {
-  const CustomComponent = useComponent(props.type);
-  if (!CustomComponent) {
-    return null;
-  }
-  return /* @__PURE__ */ React.createElement(Suspense, {
-    fallback: null
-  }, /* @__PURE__ */ React.createElement(MessageContent, {
-    user: props.isUser,
-    stacked: !!props.stacked && props.stacked,
-    fullWidth: !!props.content.form || !!props.content.actions
-  }, /* @__PURE__ */ React.createElement(MessageContentPart, {
-    noPadding: !!props.content.noPadding && props.content.noPadding
-  }, /* @__PURE__ */ React.createElement(CustomComponent, __spreadValues({}, props.content)))));
-};
-const SystemMessage = ({
-  className,
-  children,
-  timestamp,
-  discrete,
-  fullWidth
-}) => {
-  return /* @__PURE__ */ React.createElement(StyledSystemMessage, {
-    className: appendClassNames(className, "humany-conversation-system-message"),
-    fullWidth
-  }, discrete ? /* @__PURE__ */ React.createElement(Discrete, {
-    className: "humany-conversation-discrete-message"
-  }, children, /* @__PURE__ */ React.createElement(Timestamp, {
-    timestamp
-  })) : /* @__PURE__ */ React.createElement(React.Fragment, null, children, /* @__PURE__ */ React.createElement(Timestamp, {
-    timestamp
-  })));
-};
-const StyledSystemMessage = styled.div`
-    ${(p) => p.fullWidth && "width: 100%"};
-    padding: 0 ${(p) => {
-  var _a;
-  return (_a = p.theme.sizes) == null ? void 0 : _a.large;
-}};
-    overflow: auto;
-`;
-const Discrete = styled.div`
-    text-align: center;
-    word-wrap: break-word;
-    font-size: ${(p) => {
-  var _a;
-  return (_a = p.theme.fonts) == null ? void 0 : _a.normal;
-}};
-    color: ${(p) => {
-  var _a;
-  return (_a = p.theme.colors) == null ? void 0 : _a.text;
-}};
-    > p {
-        margin: 0;
-    }
-`;
-const UserMessage = ({ className, children, timestamp }) => {
-  const { userLabel = "" } = useProperties();
-  return /* @__PURE__ */ React.createElement(StyledUserMessage, {
-    className: appendClassNames(className, "humany-conversation-user-message")
-  }, children, /* @__PURE__ */ React.createElement(Timestamp, {
-    name: userLabel,
-    timestamp
-  }));
-};
-const StyledUserMessage = styled.div`
-    margin-left: 10%;
-    width: 90%;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
-`;
-const CustomMessageListItem = ({ type, content = {} }) => {
-  const Component = useComponent(type);
-  if (!Component || !type) {
-    return null;
-  }
-  return /* @__PURE__ */ React.createElement(Component, __spreadValues({}, content));
-};
-const imageLightboxRenderer$1 = (attrs) => /* @__PURE__ */ React.createElement(Lightbox, {
-  attrs
-});
-const htmlParseInstructions$1 = {
-  transform: {
-    img: imageLightboxRenderer$1
-  }
-};
-const ConversationContent = ({ content, isUser, stacked }) => {
-  const dispatch = useDispatch();
-  const { title, body, actions, form, type, items } = content;
-  if (type)
-    return /* @__PURE__ */ React.createElement(CustomMessage, {
-      type,
-      content,
-      isUser,
-      stacked
-    });
-  return /* @__PURE__ */ React.createElement(MessageContent, {
-    noPadding: true,
-    user: isUser,
-    stacked: !!stacked && stacked,
-    fullWidth: !!form || !!actions
-  }, title && /* @__PURE__ */ React.createElement(MessageContentPart, null, /* @__PURE__ */ React.createElement(MessageTitle, {
-    variant: "h2"
-  }, title)), body && /* @__PURE__ */ React.createElement(MessageContentPart, null, /* @__PURE__ */ React.createElement(StyledHtml, {
-    html: body,
-    htmlParseInstruction: htmlParseInstructions$1
-  })), form && /* @__PURE__ */ React.createElement(MessageContentPart, null, /* @__PURE__ */ React.createElement(StyledForm, __spreadProps(__spreadValues({}, form), {
-    onChange: (key, data) => {
-      dispatch("form", {
-        data,
-        formKey: form.schema.id,
-        actionKey: key
-      });
-    }
-  }))), actions && /* @__PURE__ */ React.createElement(MessageContentPart, null, /* @__PURE__ */ React.createElement(StyledActionList, {
-    items: Object.keys(actions).map((i) => {
-      return { label: actions[i], actionKey: i };
-    }),
-    renderItem: (item) => {
-      return /* @__PURE__ */ React.createElement("li", {
-        key: item.actionKey
-      }, /* @__PURE__ */ React.createElement(StyledActionButton, {
-        onClick: () => {
-          dispatch("action", item.actionKey);
-        }
-      }, item.label));
-    }
-  })), items && /* @__PURE__ */ React.createElement(Fragment, null, /* @__PURE__ */ React.createElement(MessageContentPart, {
-    key: uuid(),
-    noPadding: true
-  }, /* @__PURE__ */ React.createElement(StyledActionList, {
-    items: items.map(([type2, content2]) => {
-      return { type: type2, content: content2 };
-    }),
-    renderItem: (item) => {
-      const itemKey = uuid();
-      switch (item.type) {
-        case ConversationMessageListItemType.Header: {
-          return /* @__PURE__ */ React.createElement(ConversationListItem, {
-            key: itemKey
-          }, /* @__PURE__ */ React.createElement(HeaderText, null, item.content));
-        }
-        case ConversationMessageListItemType.Text: {
-          return /* @__PURE__ */ React.createElement(ConversationListItem, {
-            key: itemKey
-          }, /* @__PURE__ */ React.createElement("span", null, item.content));
-        }
-        case ConversationMessageListItemType.HTML: {
-          return /* @__PURE__ */ React.createElement(ConversationListItem, {
-            key: itemKey
-          }, /* @__PURE__ */ React.createElement(StyledHtml, {
-            html: item.content.body,
-            htmlParseInstruction: htmlParseInstructions$1
-          }));
-        }
-        case ConversationMessageListItemType.Separator: {
-          return /* @__PURE__ */ React.createElement(ConversationListItem, {
-            key: itemKey,
-            noPadding: true
-          }, /* @__PURE__ */ React.createElement(SeparatorPadding, null, /* @__PURE__ */ React.createElement(Separator, null)));
-        }
-        case ConversationMessageListItemType.LinkList: {
-          return /* @__PURE__ */ React.createElement(ConversationListItem, {
-            key: itemKey
-          }, /* @__PURE__ */ React.createElement(StyledLinkList, {
-            items: Object.keys(item.content.actions).map((i) => {
-              return {
-                label: item.content.actions[i],
-                actionKey: i
-              };
-            }),
-            renderItem: (item2) => {
-              return /* @__PURE__ */ React.createElement("li", {
-                key: item2.actionKey
-              }, /* @__PURE__ */ React.createElement(StyledLinkButton, {
-                help: item2.actionKey === "help",
-                onClick: () => {
-                  dispatch("action", item2.actionKey);
-                }
-              }, item2.label, item2.actionKey === "help" && /* @__PURE__ */ React.createElement(SymbolBadge, {
-                size: 14,
-                symbol: {
-                  type: "Svg",
-                  content: "caret-down"
-                }
-              })));
-            }
-          }));
-        }
-        case ConversationMessageListItemType.ButtonList: {
-          return /* @__PURE__ */ React.createElement(ConversationListItem, {
-            key: itemKey
-          }, /* @__PURE__ */ React.createElement(StyledButtonList, {
-            items: Object.keys(item.content.actions).map((i) => {
-              return {
-                label: item.content.actions[i],
-                actionKey: i
-              };
-            }),
-            renderItem: (item2) => {
-              return /* @__PURE__ */ React.createElement("li", {
-                key: item2.actionKey
-              }, /* @__PURE__ */ React.createElement(StyledButtonListButton, {
-                onClick: () => {
-                  dispatch("action", item2.actionKey);
-                }
-              }, item2.label));
-            }
-          }));
-        }
-        case ConversationMessageListItemType.NoGoodAlternative: {
-          return /* @__PURE__ */ React.createElement(ConversationListItem, {
-            key: itemKey
-          }, /* @__PURE__ */ React.createElement(NoGoodAlternativeWrapper, {
-            onClick: () => {
-              dispatch("action", "help");
-            }
-          }, /* @__PURE__ */ React.createElement(SymbolBadge, {
-            size: 14,
-            symbol: {
-              type: "FontAwesome",
-              content: "meh-o"
-            }
-          }), /* @__PURE__ */ React.createElement("span", null, item.content.body)));
-        }
-        case ConversationMessageListItemType.FeedbackList: {
-          return /* @__PURE__ */ React.createElement(ConversationListItem, {
-            key: itemKey
-          }, /* @__PURE__ */ React.createElement(StyledButtonList, {
-            items: Object.keys(item.content.actions).map((i) => {
-              return {
-                label: item.content.actions[i],
-                actionKey: i
-              };
-            }),
-            renderItem: (item2) => {
-              return /* @__PURE__ */ React.createElement(FeedbackItem, {
-                key: item2.actionKey
-              }, /* @__PURE__ */ React.createElement(FeedbackButton, {
-                className: "humany-feedback-button",
-                disabled: false,
-                "aria-pressed": true,
-                "data-selected": true,
-                "data-direction": "vertical",
-                onClick: () => {
-                  dispatch("action", item2.actionKey);
-                }
-              }, /* @__PURE__ */ React.createElement(Icon, {
-                faIcon: item2.actionKey == "yes" ? "smile-o" : "frown-o"
-              }), /* @__PURE__ */ React.createElement("span", null, item2.label)));
-            }
-          }));
-        }
-        default: {
-          return /* @__PURE__ */ React.createElement(ConversationListItem, {
-            key: itemKey,
-            noPadding: true
-          }, /* @__PURE__ */ React.createElement(CustomMessageListItem, {
-            type: item.type,
-            content: item.content
-          }));
-        }
-      }
-    }
-  }))));
-};
-const StyledForm = styled(FormComponent)`
-    & button.humany-form-component-button {
-        ${(p) => {
-  var _a, _b;
-  return invertedHoverButton({
-    active: false,
-    primaryColor: (_a = p.theme.colors) == null ? void 0 : _a.primary,
-    secondaryColor: (_b = p.theme.colors) == null ? void 0 : _b.accent
-  });
-}};
-        display: block;
-        width: 100%;
-        margin-bottom: ${(p) => {
-  var _a;
-  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
-}};
-    }
-    & button.humany-form-component-submit {
-        width: 100%;
-        margin: 0;
-        :not(:last-child) {
-            margin-bottom: ${(p) => {
-  var _a;
-  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
-}};
-        }
-    }
-`;
-const StyledHtml = styled(Html)`
-    white-space: pre-wrap;
-    a {
-        color: ${(p) => p.theme.colors.link};
-        &:focus {
-            ${(p) => {
-  var _a;
-  return ((_a = p.theme.accessibility) == null ? void 0 : _a.isTabbing) && borderTabStyle;
-}};
-        }
-    }
-`;
-const StyledActionList = styled(List)`
-    padding: 0;
-    list-style: none;
-    margin: 0 -${(p) => {
-  var _a;
-  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
-}};
-    > li {
-        margin: ${(p) => {
-  var _a;
-  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
-}};
-    }
-`;
-const StyledButtonList = styled(List)`
-    padding: 0;
-    list-style: none;
-    > li {
-        margin: ${(p) => {
-  var _a;
-  return (_a = p.theme.sizes) == null ? void 0 : _a.small;
-}} ${(p) => {
-  var _a;
-  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
-}};
-        margin-left: 0;
-        display: inline-block;
-    }
-`;
-const StyledButtonListButton = styled.button`
-    ${buttonCss};
-    display: block;
-    text-align: left;
-    background-color: ${(p) => {
-  var _a;
-  return (_a = p.theme.colors) == null ? void 0 : _a.primary;
-}};
-    width: 100%;
-    color: #fff;
-    &:focus {
-        ${(p) => {
-  var _a;
-  return ((_a = p.theme.accessibility) == null ? void 0 : _a.isTabbing) && css`
-                ${borderTabStyle}
-                background-color: transparent;
-            `;
-}}
-    }
-`;
-const StyledLinkList = styled(List)`
-    padding: 0;
-    list-style: none;
-    > li {
-        margin-bottom: ${(p) => {
-  var _a;
-  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
-}};
-
-        &:last-child {
-            margin-bottom: 0;
-        }
-    }
-`;
-const HeaderText = styled.strong`
-    font-size: ${(p) => {
-  var _a;
-  return (_a = p.theme.fonts) == null ? void 0 : _a.huge;
-}};
-`;
-const StyledLinkButton = styled.button`
-    display: block;
-    background-color: transparent;
-    text-align: left;
-    border: none;
-    padding: 0;
-    font-weight: 300;
-    font-family: inherit;
-    cursor: pointer;
-    color: ${(p) => {
-  var _a;
-  return (_a = p.theme.colors) == null ? void 0 : _a.primary;
-}};
-
-    ${(p) => {
-  var _a, _b;
-  return p.help && css`
-            color: ${(_a = p.theme.colors) == null ? void 0 : _a.text};
-            text-decoration: underline;
-
-            i,
-            svg {
-                margin-left: ${(_b = p.theme.sizes) == null ? void 0 : _b.small};
-            }
-        `;
-}}
-`;
-const StyledActionButton = styled.button`
-    ${buttonCss};
-    display: block;
-    background-color: ${(p) => {
-  var _a;
-  return (_a = p.theme.colors) == null ? void 0 : _a.primary;
-}};
-    width: 100%;
-    color: #fff;
-    font-family: Lato;
-    font-size: ${(p) => {
-  var _a;
-  return (_a = p.theme.fonts) == null ? void 0 : _a.huge;
-}};
-    font-weight: 300;
-    &:focus {
-        ${(p) => {
-  var _a;
-  return ((_a = p.theme.accessibility) == null ? void 0 : _a.isTabbing) && css`
-                ${borderTabStyle}
-                background-color: transparent;
-            `;
-}}
-    }
-`;
-const SeparatorPadding = styled.div`
-    padding-top: calc(${(p) => {
-  var _a;
-  return (_a = p.theme.sizes) == null ? void 0 : _a.medium;
-}} - ${(p) => {
-  var _a;
-  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
-}});
-    padding-bottom: calc(${(p) => {
-  var _a;
-  return (_a = p.theme.sizes) == null ? void 0 : _a.medium;
-}} - ${(p) => {
-  var _a;
-  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
-}});
-`;
-const Separator = styled.div`
-    background-color: #efefef;
-    height: 1px;
-    width: 100%;
-`;
-const NoGoodAlternativeWrapper = styled.div`
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-
-    > i,
-    svg {
-        margin-right: ${(p) => {
-  var _a;
-  return (_a = p.theme.sizes) == null ? void 0 : _a.small;
-}};
-    }
-`;
-const ConversationListItem = styled.li`
-    padding-left: ${(p) => {
-  var _a;
-  return p.noPadding ? 0 : (_a = p.theme.sizes) == null ? void 0 : _a.medium;
-}};
-    padding-right: ${(p) => {
-  var _a;
-  return p.noPadding ? 0 : (_a = p.theme.sizes) == null ? void 0 : _a.medium;
-}};
-`;
-const FeedbackItem = styled.li`
-    @media (min-width: 768px) {
-        display: list-item !important;
-        margin-right: 0 !important;
-        margin-top: ${(p) => {
-  var _a;
-  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
-}} !important;
-    }
-`;
-const FeedbackButton = styled.button`
-    @media (min-width: 768px) {
-        min-width: 100%;
-        margin-right: 0;
-    }
-    display: inline-block;
-    font-size: ${(p) => {
-  var _a;
-  return (_a = p.theme.fonts) == null ? void 0 : _a.normal;
-}};
-    border-color: ${(p) => {
-  var _a;
-  return (_a = p.theme.colors) == null ? void 0 : _a.primary;
-}} !important;
-    font-weight: 300;
-    && {
-        margin-right: ${(p) => {
-  var _a;
-  return (_a = p.theme.sizes) == null ? void 0 : _a.small;
-}};
-    }
-    ${(p) => {
-  var _a, _b;
-  return p["data-direction"] === "horizontal" && css`
-            width: 225px;
-            max-width: calc(50% - ${(_a = p.theme.sizes) == null ? void 0 : _a.large} - ${(_b = p.theme.sizes) == null ? void 0 : _b.small});
-        `;
-}}
-    ${(p) => p["data-direction"] === "vertical" && css`
-            min-width: 150px;
-        `}
-  ${(p) => {
-  var _a;
-  return invertedHoverButton({
-    primaryColor: `${(_a = p.theme.colors) == null ? void 0 : _a.primary}`,
-    secondaryColor: "#FFFFFF"
-  });
-}}
-    i {
-        margin: 0 ${(p) => {
-  var _a;
-  return (_a = p.theme.sizes) == null ? void 0 : _a.small;
-}} 0 0;
-    }
-    span {
-    }
-`;
 const imageLightboxRenderer = (attrs) => /* @__PURE__ */ React.createElement(Lightbox, {
   attrs
 });