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

package/esm/parts/system-message/style.js

@@ -1,46 +1,20 @@
-import * as React from "react";
-import styled from "styled-components";
-import { Grid } from "@elliemae/ds-grid";
-const Wrapper = styled(Grid)`
-  align-items: center;
-  justify-content: center;
-  max-width: 100%;
-  padding: 0 8px 8px;
-  border: 1px solid ${(props) => props.theme.colors.neutral["100"]};
-  border-radius: 10px;
-  background-color: ${(props) => props.theme.colors.neutral["080"]};
-  box-shadow: none;
-`;
-const Header = styled(Grid)`
-  align-items: center;
-  height: 36px;
-`;
-const Title = styled.p`
-  font-size: 14px;
-  font-weight: ${(props) => props.theme.fontWeights.semibold};
-  color: ${(props) => props.theme.colors.neutral["700"]};
-  margin: 0;
-`;
-const Time = styled.p`
-  font-size: 12px;
-  font-weight: ${(props) => props.theme.fontWeights.regular};
-  color: ${(props) => props.theme.colors.neutral["700"]};
-  margin: 0;
-  text-align: right;
-`;
-const Message = styled.p`
-  font-size: 13px;
-  font-weight: ${(props) => props.theme.fontWeights.regular};
-  color: ${(props) => props.theme.colors.neutral["700"]};
-  min-height: 32px;
-  text-align: center;
-  margin: 0;
-`;
-export {
-  Header,
-  Message,
-  Time,
-  Title,
-  Wrapper
-};
-//# sourceMappingURL=style.js.map
+import styled from 'styled-components';
+import { Grid } from '@elliemae/ds-grid';
+
+const Wrapper = /*#__PURE__*/styled(Grid).withConfig({
+  componentId: "sc-80w41d-0"
+})(["align-items:center;justify-content:center;max-width:100%;padding:0 8px 8px;border:1px solid ", ";border-radius:10px;background-color:", ";box-shadow:none;"], props => props.theme.colors.neutral['100'], props => props.theme.colors.neutral['080']);
+const Header = /*#__PURE__*/styled(Grid).withConfig({
+  componentId: "sc-80w41d-1"
+})(["align-items:center;height:36px;"]);
+const Title = /*#__PURE__*/styled.p.withConfig({
+  componentId: "sc-80w41d-2"
+})(["font-size:14px;font-weight:", ";color:", ";margin:0;"], props => props.theme.fontWeights.semibold, props => props.theme.colors.neutral['700']);
+const Time = /*#__PURE__*/styled.p.withConfig({
+  componentId: "sc-80w41d-3"
+})(["font-size:12px;font-weight:", ";color:", ";margin:0;text-align:right;"], props => props.theme.fontWeights.regular, props => props.theme.colors.neutral['700']);
+const Message = /*#__PURE__*/styled.p.withConfig({
+  componentId: "sc-80w41d-4"
+})(["font-size:13px;font-weight:", ";color:", ";min-height:32px;text-align:center;margin:0;"], props => props.theme.fontWeights.regular, props => props.theme.colors.neutral['700']);
+
+export { Header, Message, Time, Title, Wrapper };

package/esm/parts/tile-button/TileButton.js

@@ -1,23 +1,20 @@
-import * as React from "react";
-import React2 from "react";
-import { describe } from "react-desc";
-import { DSTooltipV3 } from "@elliemae/ds-tooltip";
-import { Grid } from "@elliemae/ds-grid";
-import { CloseXsmall } from "@elliemae/ds-icons";
-import {
-  StyledTooltipV3ButtonWrapper,
-  StyledTileButton,
-  StyledTileButtonIcon,
-  StyledTileButtonLabel,
-  StyledWrapper,
-  StyledWrapperLeftBorder,
-  StyledStatusBadge,
-  StyledWrapperCentralContent,
-  CloseButton
-} from "./styled";
-import { propsTileButton, defaultTileButton } from "./props";
-import { useValidateProps } from "./config/useValidateProps";
-const TileButton = (props) => {
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.url.to-json.js';
+import React from 'react';
+import { describe } from 'react-desc';
+import { DSTooltipV3 } from '@elliemae/ds-tooltip';
+import { Grid } from '@elliemae/ds-grid';
+import { CloseXsmall } from '@elliemae/ds-icons';
+import { StyledWrapperCentralContent, StyledTileButtonIcon, StyledStatusBadge, StyledTileButtonLabel, StyledTileButton, StyledWrapper, StyledWrapperLeftBorder, CloseButton, StyledTooltipV3ButtonWrapper } from './styled.js';
+import { propsTileButton, defaultTileButton } from './props.js';
+import { useValidateProps } from './config/useValidateProps.js';
+import { jsx } from 'react/jsx-runtime';
+
+var _StyledWrapperLeftBor, _CloseXsmall;
+
+const TileButton = props => {
+  var _Icon, _StyledTileButtonLabe, _span;
+
   useValidateProps(props, TileButtonWithSchema.toJSON());
   const {
     label,
@@ -40,79 +37,61 @@ const TileButton = (props) => {
     disableTooltip,
     innerRef
   } = props;
-  const handleClick = React2.useCallback(() => {
+  const handleClick = React.useCallback(() => {
     onClick(dsId, title);
   }, [dsId, onClick, title]);
-  const MainContent = React2.useMemo(() => /* @__PURE__ */ React2.createElement(StyledWrapperCentralContent, {
-    alignItems: isHeader ? "center" : void 0
-  }, /* @__PURE__ */ React2.createElement(Grid, {
+  const MainContent = React.useMemo(() => /*#__PURE__*/_jsx(StyledWrapperCentralContent, {
+    alignItems: isHeader ? 'center' : undefined
+  }, void 0, /*#__PURE__*/_jsx(Grid, {
     width: "100%",
     alignItems: "center",
     justifyContent: "center"
-  }, /* @__PURE__ */ React2.createElement(StyledTileButtonIcon, {
+  }, void 0, /*#__PURE__*/_jsx(StyledTileButtonIcon, {
     alignItems: "center",
     justifyContent: "center"
-  }, /* @__PURE__ */ React2.createElement(Icon, {
+  }, void 0, _Icon || (_Icon = /*#__PURE__*/_jsx(Icon, {
     size: "m"
-  }), badge ? /* @__PURE__ */ React2.createElement(StyledStatusBadge, {
-    badgeColor,
-    badgePosition,
-    "data-testid": `tile-badge-${dsId}`
-  }) : null)), !isHeader ? /* @__PURE__ */ React2.createElement(Grid, {
+  })), badge ? /*#__PURE__*/_jsx(StyledStatusBadge, {
+    badgeColor: badgeColor,
+    badgePosition: badgePosition,
+    "data-testid": "tile-badge-".concat(dsId)
+  }) : null)), !isHeader ? /*#__PURE__*/_jsx(Grid, {
     width: "100%",
     justifyContent: "center"
-  }, label ? /* @__PURE__ */ React2.createElement(StyledTileButtonLabel, null, label) : null) : null), [isHeader, Icon, badge, badgeColor, badgePosition, label]);
-  const Btn = React2.useMemo(() => /* @__PURE__ */ React2.createElement(StyledTileButton, {
-    key: dsId,
-    isHeader,
+  }, void 0, label ? _StyledTileButtonLabe || (_StyledTileButtonLabe = /*#__PURE__*/_jsx(StyledTileButtonLabel, {}, void 0, label)) : null) : null), [isHeader, Icon, badge, badgeColor, badgePosition, label]);
+  const Btn = React.useMemo(() => /*#__PURE__*/jsx(StyledTileButton, {
+    isHeader: isHeader,
     value: dsId,
-    "data-testid": `tile-button-${dsId}`,
+    "data-testid": "tile-button-".concat(dsId),
     "data-key": dsId,
     onClick: handleClick,
-    onFocus,
-    onBlur,
-    disabled,
-    selected,
-    badgeColor,
-    badgePosition,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    disabled: disabled,
+    selected: selected,
+    badgeColor: badgeColor,
+    badgePosition: badgePosition,
     "aria-pressed": selected,
     "aria-label": ariaLabel,
-    ref: innerRef
-  }, /* @__PURE__ */ React2.createElement(StyledWrapper, {
-    alignItems: "center",
-    justifyContent: "center"
-  }, /* @__PURE__ */ React2.createElement("span", null, MainContent), /* @__PURE__ */ React2.createElement(StyledWrapperLeftBorder, null), showClose && !disabled ? /* @__PURE__ */ React2.createElement(CloseButton, {
-    onClick: onClose,
-    value: dsId,
-    "data-testid": `tile-close-btn-${dsId}`
-  }, /* @__PURE__ */ React2.createElement(CloseXsmall, null)) : null)), [
-    MainContent,
-    ariaLabel,
-    badgeColor,
-    badgePosition,
-    disabled,
-    dsId,
-    handleClick,
-    isHeader,
-    onBlur,
-    onClose,
-    onFocus,
-    selected,
-    showClose,
-    innerRef
-  ]);
-  return title && !disableTooltip ? /* @__PURE__ */ React2.createElement(StyledTooltipV3ButtonWrapper, null, /* @__PURE__ */ React2.createElement(DSTooltipV3, {
-    id: `ds-chat-tile-tooltip-button-${dsId}`,
+    ref: innerRef,
+    children: /*#__PURE__*/_jsx(StyledWrapper, {
+      alignItems: "center",
+      justifyContent: "center"
+    }, void 0, _span || (_span = /*#__PURE__*/_jsx("span", {}, void 0, MainContent)), _StyledWrapperLeftBor || (_StyledWrapperLeftBor = /*#__PURE__*/_jsx(StyledWrapperLeftBorder, {})), showClose && !disabled ? /*#__PURE__*/_jsx(CloseButton, {
+      onClick: onClose,
+      value: dsId,
+      "data-testid": "tile-close-btn-".concat(dsId)
+    }, void 0, _CloseXsmall || (_CloseXsmall = /*#__PURE__*/_jsx(CloseXsmall, {}))) : null)
+  }, dsId), [MainContent, ariaLabel, badgeColor, badgePosition, disabled, dsId, handleClick, isHeader, onBlur, onClose, onFocus, selected, showClose, innerRef]);
+  return title && !disableTooltip ? /*#__PURE__*/_jsx(StyledTooltipV3ButtonWrapper, {}, void 0, /*#__PURE__*/_jsx(DSTooltipV3, {
+    id: "ds-chat-tile-tooltip-button-".concat(dsId),
     text: title,
     startPlacementPreference: tooltipPlacement
-  }, Btn)) : Btn;
+  }, void 0, Btn)) : Btn;
 };
-TileButton.propTypes = propsTileButton;
+
 TileButton.defaultProps = defaultTileButton;
 const TileButtonWithSchema = describe(TileButton);
 TileButtonWithSchema.propTypes = propsTileButton;
-export {
-  TileButton,
-  TileButtonWithSchema
-};
-//# sourceMappingURL=TileButton.js.map
+
+export { TileButton, TileButtonWithSchema };

package/esm/parts/tile-button/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/tile-button/index.js

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

package/esm/parts/tile-button/props.js

@@ -1,64 +1,50 @@
-import * as React from "react";
-import { PropTypes } from "react-desc";
-import { noop } from "lodash";
-import { Comments } from "@elliemae/ds-icons";
+import { PropTypes } from 'react-desc';
+import { noop } from 'lodash';
+import { Comments } from '@elliemae/ds-icons';
+
 const defaultTileButton = {
   Icon: Comments,
-  dsId: void 0,
-  label: "",
+  dsId: undefined,
+  label: '',
   onClick: noop,
   onBlur: noop,
   onFocus: noop,
-  title: "",
+  title: '',
   onClose: noop,
   showClose: false,
   badge: false,
-  badgeColor: "blue",
-  badgePosition: "left",
+  badgeColor: 'blue',
+  badgePosition: 'left',
   disabled: false,
   selected: false,
   isHeader: false,
-  ariaLabel: "Tile button",
-  tooltipPlacement: "right",
+  ariaLabel: 'Tile button',
+  tooltipPlacement: 'right',
   disableTooltip: false,
   innerRef: noop
 };
 const propsTileButton = {
-  Icon: PropTypes.func.description("Icon component").defaultValue(defaultTileButton.Icon),
-  dsId: PropTypes.oneOf(["number", "string"]).description("Unique id for the button").defaultValue(defaultTileButton.dsId),
-  label: PropTypes.string.description("It will display under the icon").defaultValue(defaultTileButton.label),
-  title: PropTypes.string.description("Tooltip").defaultValue(defaultTileButton.title),
-  onClick: PropTypes.func.description("The function to call when is clicked").defaultValue(defaultTileButton.onClick),
-  onFocus: PropTypes.func.description("The function to call when is focused").defaultValue(defaultTileButton.onFocus),
-  onBlur: PropTypes.func.description("The function to call when is on blur").defaultValue(defaultTileButton.onBlur),
-  onClose: PropTypes.func.description("The function to call when the X is Clicked").defaultValue(defaultTileButton.onClose),
-  showClose: PropTypes.bool.description("It will display the X").defaultValue(defaultTileButton.showClose),
-  badge: PropTypes.bool.description("It will display the badge").defaultValue(defaultTileButton.badge),
-  badgeColor: PropTypes.oneOf(["blue", "green"]).description("Color badge: blue or green").defaultValue(defaultTileButton.badgeColor),
-  badgePosition: PropTypes.oneOf(["left", "right"]).description("Color badge: blue or green").defaultValue(defaultTileButton.badgePosition),
-  disabled: PropTypes.bool.description("It will disabled the button").defaultValue(defaultTileButton.disabled),
-  selected: PropTypes.bool.description("Indicate that the button is selected").defaultValue(defaultTileButton.disabled),
+  Icon: PropTypes.func.description('Icon component').defaultValue(defaultTileButton.Icon),
+  dsId: PropTypes.oneOf(['number', 'string']).description('Unique id for the button').defaultValue(defaultTileButton.dsId),
+  label: PropTypes.string.description('It will display under the icon').defaultValue(defaultTileButton.label),
+  title: PropTypes.string.description('Tooltip').defaultValue(defaultTileButton.title),
+  onClick: PropTypes.func.description('The function to call when is clicked').defaultValue(defaultTileButton.onClick),
+  onFocus: PropTypes.func.description('The function to call when is focused').defaultValue(defaultTileButton.onFocus),
+  onBlur: PropTypes.func.description('The function to call when is on blur').defaultValue(defaultTileButton.onBlur),
+  onClose: PropTypes.func.description('The function to call when the X is Clicked').defaultValue(defaultTileButton.onClose),
+  showClose: PropTypes.bool.description('It will display the X').defaultValue(defaultTileButton.showClose),
+  badge: PropTypes.bool.description('It will display the badge').defaultValue(defaultTileButton.badge),
+  badgeColor: PropTypes.oneOf(['blue', 'green']).description('Color badge: blue or green').defaultValue(defaultTileButton.badgeColor),
+  badgePosition: PropTypes.oneOf(['left', 'right']).description('Color badge: blue or green').defaultValue(defaultTileButton.badgePosition),
+  disabled: PropTypes.bool.description('It will disabled the button').defaultValue(defaultTileButton.disabled),
+  selected: PropTypes.bool.description('Indicate that the button is selected').defaultValue(defaultTileButton.disabled),
   isHeader: PropTypes.bool.description("It won't render the label").defaultValue(defaultTileButton.disabled),
-  ariaLabel: PropTypes.string.description("aria-label attribute").defaultValue(defaultTileButton.ariaLabel),
-  tooltipPlacement: PropTypes.oneOf([
-    "top-start",
-    "top",
-    "top-end",
-    "right-start",
-    "right",
-    "right-end",
-    "bottom-end",
-    "bottom",
-    "bottom-start",
-    "left-end",
-    "left",
-    "left-start"
-  ]).description("start placement preferences, as per popperjs placement option").defaultValue("'right'"),
-  disableTooltip: PropTypes.bool.description("Disable tooltip option").defaultValue(defaultTileButton.disableTooltip),
-  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]).description("reference to the component")
+  ariaLabel: PropTypes.string.description('aria-label attribute').defaultValue(defaultTileButton.ariaLabel),
+  tooltipPlacement: PropTypes.oneOf(['top-start', 'top', 'top-end', 'right-start', 'right', 'right-end', 'bottom-end', 'bottom', 'bottom-start', 'left-end', 'left', 'left-start']).description('start placement preferences, as per popperjs placement option').defaultValue("'right'"),
+  disableTooltip: PropTypes.bool.description('Disable tooltip option').defaultValue(defaultTileButton.disableTooltip),
+  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.any
+  })]).description('reference to the component')
 };
-export {
-  defaultTileButton,
-  propsTileButton
-};
-//# sourceMappingURL=props.js.map
+
+export { defaultTileButton, propsTileButton };

package/esm/parts/tile-button/styled.js

@@ -1,218 +1,78 @@
-import * as React from "react";
-import styled from "styled-components";
-import { css } from "@elliemae/ds-system";
-import { Grid } from "@elliemae/ds-grid";
+import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
+import styled from 'styled-components';
+import { css } from '@elliemae/ds-system';
+import { Grid } from '@elliemae/ds-grid';
+
+var _templateObject;
 const MIN_WIDTH_SIDEBAR = 48;
-const BUTTON_SIDEBAR_HEIGHT = 48;
-const StyledWrapperLeftBorder = styled(Grid)`
-  height: 100%;
-  width: 4px;
-  position: absolute;
-  top: 0;
-  left: 0;
-`;
-const StyledStatusBadge = styled.div`
-  height: 8px;
-  width: 8px;
-  position: absolute;
-  top: 0;
-  background: ${(props) => {
+const BUTTON_SIDEBAR_HEIGHT = 48; // Buttons
+
+const StyledWrapperLeftBorder = /*#__PURE__*/styled(Grid).withConfig({
+  componentId: "sc-1ebp1zs-0"
+})(["height:100%;width:4px;position:absolute;top:0;left:0;"]);
+const StyledStatusBadge = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-1ebp1zs-1"
+})(["height:8px;width:8px;position:absolute;top:0;background:", ";", ";border-radius:50%;box-sizing:content-box;"], props => {
   switch (props.badgeColor) {
-    case "blue":
+    case 'blue':
       return props.theme.colors.brand[600];
-    case "green":
+
+    case 'green':
       return props.theme.colors.success[900];
+
     default:
       return props.theme.colors.brand[600];
   }
-}};
-  ${(props) => {
+}, props => {
   switch (props.badgePosition) {
-    case "left":
-      return "left: -4px;";
-    case "right":
-      return "right: -4px;";
-    default:
-      return "left: -4px;";
-  }
-}};
-  border-radius: 50%;
-  box-sizing: content-box;
-`;
-const StyledWrapperCentralContent = styled(Grid)`
-  width: 24px;
-  height: 40px;
-`;
-const StyledTileButtonIcon = styled(Grid)`
-  position: relative;
-  height: 24px;
-  width: 24px;
-  svg {
-    fill: ${(props) => props.theme.colors.neutral[500]};
-  }
+    case 'left':
+      return 'left: -4px;';
 
-  &:focus {
-    svg {
-      fill: ${(props) => props.theme.colors.brand[800]};
-    }
-  }
-`;
-const StyledTileButtonLabel = styled.div`
-  width: 24px;
-  height: ${(props) => props.theme.space.xs};
-  text-transform: uppercase;
-  overflow: hidden;
-  text-align: center;
-  font-size: 13px;
-  color: ${(props) => props.theme.colors.neutral[600]};
-  line-height: 17px;
-`;
-const CloseButton = styled.button`
-  outline: none;
-  background: none;
-  height: 9px;
-  width: 9px;
-  position: absolute;
-  top: 1px;
-  right: 1px;
-  overflow: hidden;
-  padding: 0;
-  border: none;
-  span {
-    position: absolute;
-    left: -3px;
-    top: -4px;
-  }
+    case 'right':
+      return 'right: -4px;';
 
-  &:focus,
-  &:hover {
-    svg {
-      fill: ${(props) => props.theme.colors.brand[600]};
-    }
-    &:after {
-      display: block;
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      border: solid 1px ${(props) => props.theme.colors.brand[600]};
-      border-radius: 2px;
-    }
-  }
-  cursor: pointer;
-`;
-const StyledTooltipV3ButtonWrapper = styled.div`
-  height: ${BUTTON_SIDEBAR_HEIGHT}px;
-  width: ${MIN_WIDTH_SIDEBAR}px;
-`;
-const StyledTileButton = styled.button`
-  outline: none;
-  background: transparent;
-  height: ${BUTTON_SIDEBAR_HEIGHT}px;
-  width: ${MIN_WIDTH_SIDEBAR}px;
-  position: relative;
-  padding: 0;
-  border: none;
-  cursor: pointer;
-  border-bottom: ${(props) => props.isHeader ? `1px solid  ${props.theme.colors.neutral["200"]}` : "none"};
-  &:focus,
-  &:hover,
-  &:active,
-  &:disabled {
-    background: ${(props) => props.theme.colors.neutral["080"]};
-    & ${StyledStatusBadge} {
-      border: 2px solid ${(props) => props.theme.colors.neutral["080"]};
-      margin-top: -2px;
-      ${(props) => {
-  switch (props.badgePosition) {
-    case "left":
-      return "margin-left: -2px;";
-    case "right":
-      return "margin-right: -2px;";
     default:
-      return "margin-left: -2px;";
-  }
-}};
-    }
+      return 'left: -4px;';
   }
+});
+const StyledWrapperCentralContent = /*#__PURE__*/styled(Grid).withConfig({
+  componentId: "sc-1ebp1zs-2"
+})(["width:24px;height:40px;"]);
+const StyledTileButtonIcon = /*#__PURE__*/styled(Grid).withConfig({
+  componentId: "sc-1ebp1zs-3"
+})(["position:relative;height:24px;width:24px;svg{fill:", ";}&:focus{svg{fill:", ";}}"], props => props.theme.colors.neutral[500], props => props.theme.colors.brand[800]);
+const StyledTileButtonLabel = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-1ebp1zs-4"
+})(["width:24px;height:", ";text-transform:uppercase;overflow:hidden;text-align:center;font-size:13px;color:", ";line-height:17px;"], props => props.theme.space.xs, props => props.theme.colors.neutral[600]);
+const CloseButton = /*#__PURE__*/styled.button.withConfig({
+  componentId: "sc-1ebp1zs-5"
+})(["outline:none;background:none;height:9px;width:9px;position:absolute;top:1px;right:1px;overflow:hidden;padding:0;border:none;span{position:absolute;left:-3px;top:-4px;}&:focus,&:hover{svg{fill:", ";}&:after{display:block;content:'';position:absolute;top:0;left:0;width:100%;height:100%;border:solid 1px ", ";border-radius:2px;}}cursor:pointer;"], props => props.theme.colors.brand[600], props => props.theme.colors.brand[600]); // MAIN WRAPPER
 
-  &:focus,
-  &:hover {
-    & ${StyledWrapperLeftBorder} {
-      background: ${(props) => props.theme.colors.brand[800]};
-    }
-    & ${StyledTileButtonLabel} {
-      color: ${(props) => props.theme.colors.neutral[600]};
-    }
-
-    & svg {
-      fill: ${(props) => props.theme.colors.brand[800]};
-    }
-  }
+const StyledTooltipV3ButtonWrapper = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-1ebp1zs-6"
+})(["height:", "px;width:", "px;"], BUTTON_SIDEBAR_HEIGHT, MIN_WIDTH_SIDEBAR);
+const StyledTileButton = /*#__PURE__*/styled.button.withConfig({
+  componentId: "sc-1ebp1zs-7"
+})(["outline:none;background:transparent;height:", "px;width:", "px;position:relative;padding:0;border:none;cursor:pointer;border-bottom:", ";&:focus,&:hover,&:active,&:disabled{background:", ";& ", "{border:2px solid ", ";margin-top:-2px;", ";}}&:focus,&:hover{& ", "{background:", ";}& ", "{color:", ";}& svg{fill:", ";}}&:active:not(:disabled){background:", ";& ", "{background:", ";}& ", "{color:", ";font-weight:600;}& svg{fill:", ";}& ", "{border:2px solid ", ";}}&:disabled{background:", ";", "{background:", ";}& ", "{background:", ";border:2px solid ", ";}", "{svg{fill:", ";}}", "{color:", ";}}", ""], BUTTON_SIDEBAR_HEIGHT, MIN_WIDTH_SIDEBAR, props => props.isHeader ? "1px solid  ".concat(props.theme.colors.neutral['200']) : 'none', props => props.theme.colors.neutral['080'], StyledStatusBadge, props => props.theme.colors.neutral['080'], props => {
+  switch (props.badgePosition) {
+    case 'left':
+      return 'margin-left: -2px;';
 
-  &:active:not(:disabled) {
-    background: ${(props) => props.theme.colors.neutral["050"]};
-    & ${StyledWrapperLeftBorder} {
-      background: ${(props) => props.theme.colors.brand[600]};
-    }
-    & ${StyledTileButtonLabel} {
-      color: ${(props) => props.theme.colors.neutral[600]};
-      font-weight: 600;
-    }
-    & svg {
-      fill: ${(props) => props.theme.colors.brand[600]};
-    }
-    & ${StyledStatusBadge} {
-      border: 2px solid ${(props) => props.theme.colors.neutral["050"]};
-    }
-  }
+    case 'right':
+      return 'margin-right: -2px;';
 
-  &:disabled {
-    background: ${(props) => props.theme.colors.neutral["080"]};
-    ${StyledWrapperLeftBorder} {
-      background: ${(props) => props.theme.colors.neutral["400"]};
-    }
-    & ${StyledStatusBadge} {
-      background: ${(props) => props.theme.colors.neutral["500"]};
-      border: 2px solid ${(props) => props.theme.colors.neutral["080"]};
-    }
-    ${StyledTileButtonIcon} {
-      svg {
-        fill: ${(props) => props.theme.colors.neutral[400]};
-      }
-    }
-    ${StyledTileButtonLabel} {
-      color: ${(props) => props.theme.colors.neutral[400]};
-    }
+    default:
+      return 'margin-left: -2px;';
   }
-
-  ${(props) => {
+}, StyledWrapperLeftBorder, props => props.theme.colors.brand[800], StyledTileButtonLabel, props => props.theme.colors.neutral[600], props => props.theme.colors.brand[800], props => props.theme.colors.neutral['050'], StyledWrapperLeftBorder, props => props.theme.colors.brand[600], StyledTileButtonLabel, props => props.theme.colors.neutral[600], props => props.theme.colors.brand[600], StyledStatusBadge, props => props.theme.colors.neutral['050'], props => props.theme.colors.neutral['080'], StyledWrapperLeftBorder, props => props.theme.colors.neutral['400'], StyledStatusBadge, props => props.theme.colors.neutral['500'], props => props.theme.colors.neutral['080'], StyledTileButtonIcon, props => props.theme.colors.neutral[400], StyledTileButtonLabel, props => props.theme.colors.neutral[400], props => {
   if (props.selected) {
-    return css`
-        & ${StyledWrapperLeftBorder} {
-          background: ${(nestedProps) => nestedProps.theme.colors.brand[600]};
-        }
-      `;
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        & ", " {\n          background: ", ";\n        }\n      "])), StyledWrapperLeftBorder, nestedProps => nestedProps.theme.colors.brand[600]);
   }
-  return "";
-}}
-`;
-const StyledWrapper = styled(Grid)`
-  height: 100%;
-  width: 100%;
-  position: relative;
-`;
-export {
-  CloseButton,
-  StyledStatusBadge,
-  StyledTileButton,
-  StyledTileButtonIcon,
-  StyledTileButtonLabel,
-  StyledTooltipV3ButtonWrapper,
-  StyledWrapper,
-  StyledWrapperCentralContent,
-  StyledWrapperLeftBorder
-};
-//# sourceMappingURL=styled.js.map
+
+  return '';
+});
+const StyledWrapper = /*#__PURE__*/styled(Grid).withConfig({
+  componentId: "sc-1ebp1zs-8"
+})(["height:100%;width:100%;position:relative;"]);
+
+export { CloseButton, StyledStatusBadge, StyledTileButton, StyledTileButtonIcon, StyledTileButtonLabel, StyledTooltipV3ButtonWrapper, StyledWrapper, StyledWrapperCentralContent, StyledWrapperLeftBorder };