@elliemae/ds-chat-tile 3.6.0-next.0

package/dist/cjs/TileButton.js

@@ -0,0 +1,164 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var TileButton_exports = {};
+__export(TileButton_exports, {
+  TileButton: () => TileButton,
+  TileButtonWithSchema: () => TileButtonWithSchema
+});
+module.exports = __toCommonJS(TileButton_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_ds_utilities = require("@elliemae/ds-utilities");
+var import_ds_tooltip = require("@elliemae/ds-tooltip");
+var import_ds_grid = require("@elliemae/ds-grid");
+var import_ds_icons = require("@elliemae/ds-icons");
+var import_styled = require("./styled");
+var import_react_desc_prop_types = require("./react-desc-prop-types");
+const TileButton = (props) => {
+  const propsWithDefault = (0, import_ds_utilities.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.defaultTileButton);
+  (0, import_ds_utilities.useValidateTypescriptPropTypes)(propsWithDefault, import_react_desc_prop_types.propsTileButton);
+  const {
+    label,
+    title,
+    dsId,
+    onClick,
+    onFocus,
+    onBlur,
+    Icon,
+    showClose,
+    onClose,
+    badge,
+    badgeColor,
+    badgePosition,
+    disabled,
+    selected,
+    isHeader,
+    ariaLabel,
+    tooltipPlacement,
+    disableTooltip,
+    innerRef
+  } = propsWithDefault;
+  const handleClick = import_react.default.useCallback(() => {
+    onClick(dsId, title);
+  }, [dsId, onClick, title]);
+  const MainContent = import_react.default.useMemo(
+    () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledWrapperCentralContent, {
+      alignItems: isHeader ? "center" : void 0,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, {
+          width: "100%",
+          alignItems: "center",
+          justifyContent: "center",
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledTileButtonIcon, {
+            alignItems: "center",
+            justifyContent: "center",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, {
+                size: "m"
+              }),
+              badge ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledStatusBadge, {
+                badgeColor,
+                badgePosition,
+                "data-testid": `tile-badge-${dsId}`
+              }) : null
+            ]
+          })
+        }),
+        !isHeader ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, {
+          width: "100%",
+          justifyContent: "center",
+          children: label ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledTileButtonLabel, {
+            children: label
+          }) : null
+        }) : null
+      ]
+    }),
+    [isHeader, Icon, badge, dsId, badgeColor, badgePosition, label]
+  );
+  const Btn = import_react.default.useMemo(
+    () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledTileButton, {
+      isHeader,
+      value: dsId,
+      "data-testid": `tile-button-${dsId}`,
+      "data-key": dsId,
+      onClick: handleClick,
+      onFocus,
+      onBlur,
+      disabled,
+      selected,
+      badgeColor,
+      badgePosition,
+      "aria-pressed": selected,
+      "aria-label": ariaLabel,
+      ref: innerRef,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledWrapper, {
+        alignItems: "center",
+        justifyContent: "center",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+            children: MainContent
+          }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledWrapperLeftBorder, {}),
+          showClose && !disabled ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.CloseButton, {
+            onClick: onClose,
+            value: dsId,
+            "data-testid": `tile-close-btn-${dsId}`,
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.CloseXsmall, {})
+          }) : null
+        ]
+      })
+    }, dsId),
+    [
+      MainContent,
+      ariaLabel,
+      badgeColor,
+      badgePosition,
+      disabled,
+      dsId,
+      handleClick,
+      isHeader,
+      onBlur,
+      onClose,
+      onFocus,
+      selected,
+      showClose,
+      innerRef
+    ]
+  );
+  return title && !disableTooltip ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledTooltipV3ButtonWrapper, {
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_tooltip.DSTooltipV3, {
+      id: `ds-chat-tile-tooltip-button-${dsId}`,
+      text: title,
+      startPlacementPreference: tooltipPlacement,
+      children: Btn
+    })
+  }) : Btn;
+};
+TileButton.propTypes = import_react_desc_prop_types.propsTileButton;
+TileButton.displayName = "TileButton";
+const TileButtonWithSchema = (0, import_ds_utilities.describe)(TileButton);
+TileButtonWithSchema.propTypes = import_react_desc_prop_types.propsTileButton;
+//# sourceMappingURL=TileButton.js.map

package/dist/cjs/TileButton.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/TileButton.tsx", "../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport React, { WeakValidationMap } from 'react';\nimport { describe, useValidateTypescriptPropTypes, useMemoMergePropsWithDefault } from '@elliemae/ds-utilities';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\nimport { Grid } from '@elliemae/ds-grid';\nimport { CloseXsmall } from '@elliemae/ds-icons';\nimport {\n  StyledTooltipV3ButtonWrapper,\n  StyledTileButton,\n  StyledTileButtonIcon,\n  StyledTileButtonLabel,\n  StyledWrapper,\n  StyledWrapperLeftBorder,\n  StyledStatusBadge,\n  StyledWrapperCentralContent,\n  CloseButton,\n} from './styled';\nimport { propsTileButton, defaultTileButton, DSChatTileT } from './react-desc-prop-types';\n\nconst TileButton: React.ComponentType<DSChatTileT.Props> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultTileButton);\n  useValidateTypescriptPropTypes(propsWithDefault, propsTileButton);\n\n  const {\n    label,\n    title,\n    dsId,\n    onClick,\n    onFocus,\n    onBlur,\n    Icon,\n    showClose,\n    onClose,\n    badge,\n    badgeColor,\n    badgePosition,\n    disabled,\n    selected,\n    isHeader,\n    ariaLabel,\n    tooltipPlacement,\n    disableTooltip,\n    innerRef,\n  } = propsWithDefault;\n  const handleClick = React.useCallback(() => {\n    onClick(dsId, title);\n  }, [dsId, onClick, title]);\n\n  const MainContent = React.useMemo(\n    () => (\n      <StyledWrapperCentralContent alignItems={isHeader ? 'center' : undefined}>\n        <Grid width=\"100%\" alignItems=\"center\" justifyContent=\"center\">\n          <StyledTileButtonIcon alignItems=\"center\" justifyContent=\"center\">\n            <Icon size=\"m\" />\n            {badge ? (\n              <StyledStatusBadge\n                badgeColor={badgeColor}\n                badgePosition={badgePosition}\n                data-testid={`tile-badge-${dsId}`}\n              />\n            ) : null}\n          </StyledTileButtonIcon>\n        </Grid>\n        {!isHeader ? (\n          <Grid width=\"100%\" justifyContent=\"center\">\n            {label ? <StyledTileButtonLabel>{label}</StyledTileButtonLabel> : null}\n          </Grid>\n        ) : null}\n      </StyledWrapperCentralContent>\n    ),\n    [isHeader, Icon, badge, dsId, badgeColor, badgePosition, label],\n  );\n\n  const Btn = React.useMemo(\n    () => (\n      <StyledTileButton\n        key={dsId}\n        isHeader={isHeader}\n        value={dsId}\n        data-testid={`tile-button-${dsId}`}\n        data-key={dsId}\n        onClick={handleClick}\n        onFocus={onFocus}\n        onBlur={onBlur}\n        disabled={disabled}\n        selected={selected}\n        badgeColor={badgeColor}\n        badgePosition={badgePosition}\n        aria-pressed={selected}\n        aria-label={ariaLabel}\n        ref={innerRef}\n      >\n        <StyledWrapper alignItems=\"center\" justifyContent=\"center\">\n          <span>{MainContent}</span>\n          <StyledWrapperLeftBorder />\n          {showClose && !disabled ? (\n            <CloseButton onClick={onClose} value={dsId} data-testid={`tile-close-btn-${dsId}`}>\n              <CloseXsmall />\n            </CloseButton>\n          ) : null}\n        </StyledWrapper>\n      </StyledTileButton>\n    ),\n    [\n      MainContent,\n      ariaLabel,\n      badgeColor,\n      badgePosition,\n      disabled,\n      dsId,\n      handleClick,\n      isHeader,\n      onBlur,\n      onClose,\n      onFocus,\n      selected,\n      showClose,\n      innerRef,\n    ],\n  );\n\n  return title && !disableTooltip ? (\n    <StyledTooltipV3ButtonWrapper>\n      <DSTooltipV3 id={`ds-chat-tile-tooltip-button-${dsId}`} text={title} startPlacementPreference={tooltipPlacement}>\n        {Btn}\n      </DSTooltipV3>\n    </StyledTooltipV3ButtonWrapper>\n  ) : (\n    Btn\n  );\n};\n\nTileButton.propTypes = propsTileButton as WeakValidationMap<unknown>;\nTileButton.displayName = 'TileButton';\nconst TileButtonWithSchema = describe(TileButton);\nTileButtonWithSchema.propTypes = propsTileButton as WeakValidationMap<unknown>;\n\nexport { TileButton, TileButtonWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AACA,mBAAyC;AACzC,0BAAuF;AACvF,wBAA4B;AAC5B,qBAAqB;AACrB,sBAA4B;AAC5B,oBAUO;AACP,mCAAgE;AAEhE,MAAM,aAAqD,CAAC,UAAU;AACpE,QAAM,uBAAmB,kDAA6B,OAAO,8CAAiB;AAC9E,0DAA+B,kBAAkB,4CAAe;AAEhE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,cAAc,aAAAA,QAAM,YAAY,MAAM;AAC1C,YAAQ,MAAM,KAAK;AAAA,EACrB,GAAG,CAAC,MAAM,SAAS,KAAK,CAAC;AAEzB,QAAM,cAAc,aAAAA,QAAM;AAAA,IACxB,MACE,6CAAC;AAAA,MAA4B,YAAY,WAAW,WAAW;AAAA,MAC7D;AAAA,oDAAC;AAAA,UAAK,OAAM;AAAA,UAAO,YAAW;AAAA,UAAS,gBAAe;AAAA,UACpD,uDAAC;AAAA,YAAqB,YAAW;AAAA,YAAS,gBAAe;AAAA,YACvD;AAAA,0DAAC;AAAA,gBAAK,MAAK;AAAA,eAAI;AAAA,cACd,QACC,4CAAC;AAAA,gBACC;AAAA,gBACA;AAAA,gBACA,eAAa,cAAc;AAAA,eAC7B,IACE;AAAA;AAAA,WACN;AAAA,SACF;AAAA,QACC,CAAC,WACA,4CAAC;AAAA,UAAK,OAAM;AAAA,UAAO,gBAAe;AAAA,UAC/B,kBAAQ,4CAAC;AAAA,YAAuB;AAAA,WAAM,IAA2B;AAAA,SACpE,IACE;AAAA;AAAA,KACN;AAAA,IAEF,CAAC,UAAU,MAAM,OAAO,MAAM,YAAY,eAAe,KAAK;AAAA,EAChE;AAEA,QAAM,MAAM,aAAAA,QAAM;AAAA,IAChB,MACE,4CAAC;AAAA,MAEC;AAAA,MACA,OAAO;AAAA,MACP,eAAa,eAAe;AAAA,MAC5B,YAAU;AAAA,MACV,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,gBAAc;AAAA,MACd,cAAY;AAAA,MACZ,KAAK;AAAA,MAEL,uDAAC;AAAA,QAAc,YAAW;AAAA,QAAS,gBAAe;AAAA,QAChD;AAAA,sDAAC;AAAA,YAAM;AAAA,WAAY;AAAA,UACnB,4CAAC,yCAAwB;AAAA,UACxB,aAAa,CAAC,WACb,4CAAC;AAAA,YAAY,SAAS;AAAA,YAAS,OAAO;AAAA,YAAM,eAAa,kBAAkB;AAAA,YACzE,sDAAC,+BAAY;AAAA,WACf,IACE;AAAA;AAAA,OACN;AAAA,OAxBK,IAyBP;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO,SAAS,CAAC,iBACf,4CAAC;AAAA,IACC,sDAAC;AAAA,MAAY,IAAI,+BAA+B;AAAA,MAAQ,MAAM;AAAA,MAAO,0BAA0B;AAAA,MAC5F;AAAA,KACH;AAAA,GACF,IAEA;AAEJ;AAEA,WAAW,YAAY;AACvB,WAAW,cAAc;AACzB,MAAM,2BAAuB,8BAAS,UAAU;AAChD,qBAAqB,YAAY;",
+  "names": ["React"]
+}

package/dist/cjs/index.js

@@ -0,0 +1,35 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var src_exports = {};
+__export(src_exports, {
+  DSChatTileT: () => import_react_desc_prop_types.DSChatTileT,
+  TileButton: () => import_TileButton.TileButton,
+  TileButtonWithSchema: () => import_TileButton.TileButtonWithSchema
+});
+module.exports = __toCommonJS(src_exports);
+var React = __toESM(require("react"));
+var import_TileButton = require("./TileButton");
+var import_react_desc_prop_types = require("./react-desc-prop-types");
+//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/index.ts", "../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["export { TileButton, TileButtonWithSchema } from './TileButton';\nexport { DSChatTileT } from './react-desc-prop-types';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAAiD;AACjD,mCAA4B;",
+  "names": []
+}

package/dist/cjs/react-desc-prop-types.js

@@ -0,0 +1,92 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var react_desc_prop_types_exports = {};
+__export(react_desc_prop_types_exports, {
+  defaultTileButton: () => defaultTileButton,
+  propsTileButton: () => propsTileButton
+});
+module.exports = __toCommonJS(react_desc_prop_types_exports);
+var React = __toESM(require("react"));
+var import_ds_utilities = require("@elliemae/ds-utilities");
+var import_lodash = require("lodash");
+var import_ds_icons = require("@elliemae/ds-icons");
+const defaultTileButton = {
+  Icon: import_ds_icons.Comments,
+  dsId: "",
+  label: "",
+  onClick: import_lodash.noop,
+  onBlur: import_lodash.noop,
+  onFocus: import_lodash.noop,
+  title: "",
+  onClose: import_lodash.noop,
+  showClose: false,
+  badge: false,
+  badgeColor: "blue",
+  badgePosition: "left",
+  disabled: false,
+  selected: false,
+  isHeader: false,
+  ariaLabel: "Tile button",
+  tooltipPlacement: "right",
+  disableTooltip: false,
+  innerRef: import_lodash.noop
+};
+const propsTileButton = {
+  Icon: import_ds_utilities.PropTypes.func.description("Icon component").defaultValue(defaultTileButton.Icon),
+  dsId: import_ds_utilities.PropTypes.oneOfType([import_ds_utilities.PropTypes.number, import_ds_utilities.PropTypes.string]).description("Unique id for the button").defaultValue(defaultTileButton.dsId),
+  label: import_ds_utilities.PropTypes.string.description("It will display under the icon").defaultValue(defaultTileButton.label),
+  title: import_ds_utilities.PropTypes.string.description("Tooltip").defaultValue(defaultTileButton.title),
+  onClick: import_ds_utilities.PropTypes.func.description("The function to call when is clicked").defaultValue(defaultTileButton.onClick),
+  onFocus: import_ds_utilities.PropTypes.func.description("The function to call when is focused").defaultValue(defaultTileButton.onFocus),
+  onBlur: import_ds_utilities.PropTypes.func.description("The function to call when is on blur").defaultValue(defaultTileButton.onBlur),
+  onClose: import_ds_utilities.PropTypes.func.description("The function to call when the X is Clicked").defaultValue(defaultTileButton.onClose),
+  showClose: import_ds_utilities.PropTypes.bool.description("It will display the X").defaultValue(defaultTileButton.showClose),
+  badge: import_ds_utilities.PropTypes.bool.description("It will display the badge").defaultValue(defaultTileButton.badge),
+  badgeColor: import_ds_utilities.PropTypes.oneOf(["blue", "green"]).description("Color badge: blue or green").defaultValue(defaultTileButton.badgeColor),
+  badgePosition: import_ds_utilities.PropTypes.oneOf(["left", "right"]).description("Color badge: blue or green").defaultValue(defaultTileButton.badgePosition),
+  disabled: import_ds_utilities.PropTypes.bool.description("It will disabled the button").defaultValue(defaultTileButton.disabled),
+  selected: import_ds_utilities.PropTypes.bool.description("Indicate that the button is selected").defaultValue(defaultTileButton.disabled),
+  isHeader: import_ds_utilities.PropTypes.bool.description("It won't render the label").defaultValue(defaultTileButton.disabled),
+  ariaLabel: import_ds_utilities.PropTypes.string.description("aria-label attribute").defaultValue(defaultTileButton.ariaLabel),
+  tooltipPlacement: import_ds_utilities.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: import_ds_utilities.PropTypes.bool.description("Disable tooltip option").defaultValue(defaultTileButton.disableTooltip),
+  innerRef: import_ds_utilities.PropTypes.oneOfType([import_ds_utilities.PropTypes.func, import_ds_utilities.PropTypes.shape({ current: import_ds_utilities.PropTypes.any })]).description(
+    "reference to the component"
+  )
+};
+//# sourceMappingURL=react-desc-prop-types.js.map

package/dist/cjs/react-desc-prop-types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/react-desc-prop-types.ts", "../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React from 'react';\nimport { PropTypes } from '@elliemae/ds-utilities';\nimport { noop } from 'lodash';\nimport { Comments } from '@elliemae/ds-icons';\n\nexport declare namespace DSChatTileT {\n  export interface Props {\n    Icon: React.FC<{ size: string }>;\n    dsId: string | number;\n    label: string;\n    onClick?: (dsId: string | number, label: string) => void;\n    onBlur?: (e: React.ChangeEvent<HTMLButtonElement>) => void;\n    onFocus?: (e: React.ChangeEvent<HTMLButtonElement>) => void;\n    title: string;\n    showClose: boolean;\n    onClose?: (dsId: string | number) => void;\n    badge: boolean;\n    badgeColor: 'blue' | 'green';\n    badgePosition: 'left' | 'right';\n    disabled: boolean;\n    selected: boolean;\n    isHeader: boolean;\n    ariaLabel: string;\n    tooltipPlacement:\n      | 'top-start'\n      | 'top'\n      | 'top-end'\n      | 'right-start'\n      | 'right'\n      | 'right-end'\n      | 'bottom-end'\n      | 'bottom'\n      | 'bottom-start'\n      | 'left-end'\n      | 'left'\n      | 'left-start';\n    disableTooltip: boolean;\n    innerRef?: React.MutableRefObject<HTMLButtonElement> | ((_ref: HTMLButtonElement) => void);\n  }\n}\n\nexport const defaultTileButton: DSChatTileT.Props = {\n  Icon: Comments,\n  dsId: '',\n  label: '',\n  onClick: noop,\n  onBlur: noop,\n  onFocus: noop,\n  title: '',\n  onClose: noop,\n  showClose: false,\n  badge: false,\n  badgeColor: 'blue',\n  badgePosition: 'left',\n  disabled: false,\n  selected: false,\n  isHeader: false,\n  ariaLabel: 'Tile button',\n  tooltipPlacement: 'right',\n  disableTooltip: false,\n  innerRef: noop,\n};\n\nexport const propsTileButton = {\n  Icon: PropTypes.func.description('Icon component').defaultValue(defaultTileButton.Icon),\n  dsId: PropTypes.oneOfType([PropTypes.number, PropTypes.string])\n    .description('Unique id for the button')\n    .defaultValue(defaultTileButton.dsId),\n  label: PropTypes.string.description('It will display under the icon').defaultValue(defaultTileButton.label),\n  title: PropTypes.string.description('Tooltip').defaultValue(defaultTileButton.title),\n  onClick: PropTypes.func.description('The function to call when is clicked').defaultValue(defaultTileButton.onClick),\n  onFocus: PropTypes.func.description('The function to call when is focused').defaultValue(defaultTileButton.onFocus),\n  onBlur: PropTypes.func.description('The function to call when is on blur').defaultValue(defaultTileButton.onBlur),\n  onClose: PropTypes.func\n    .description('The function to call when the X is Clicked')\n    .defaultValue(defaultTileButton.onClose),\n  showClose: PropTypes.bool.description('It will display the X').defaultValue(defaultTileButton.showClose),\n  badge: PropTypes.bool.description('It will display the badge').defaultValue(defaultTileButton.badge),\n  badgeColor: PropTypes.oneOf(['blue', 'green'])\n    .description('Color badge: blue or green')\n    .defaultValue(defaultTileButton.badgeColor),\n  badgePosition: PropTypes.oneOf(['left', 'right'])\n    .description('Color badge: blue or green')\n    .defaultValue(defaultTileButton.badgePosition),\n  disabled: PropTypes.bool.description('It will disabled the button').defaultValue(defaultTileButton.disabled),\n  selected: PropTypes.bool.description('Indicate that the button is selected').defaultValue(defaultTileButton.disabled),\n  isHeader: PropTypes.bool.description(\"It won't render the label\").defaultValue(defaultTileButton.disabled),\n  ariaLabel: PropTypes.string.description('aria-label attribute').defaultValue(defaultTileButton.ariaLabel),\n  tooltipPlacement: PropTypes.oneOf([\n    'top-start',\n    'top',\n    'top-end',\n    'right-start',\n    'right',\n    'right-end',\n    'bottom-end',\n    'bottom',\n    'bottom-start',\n    'left-end',\n    'left',\n    'left-start',\n  ])\n    .description('start placement preferences, as per popperjs placement option')\n    .defaultValue(\"'right'\"),\n  disableTooltip: PropTypes.bool.description('Disable tooltip option').defaultValue(defaultTileButton.disableTooltip),\n  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]).description(\n    'reference to the component',\n  ),\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,0BAA0B;AAC1B,oBAAqB;AACrB,sBAAyB;AAsClB,MAAM,oBAAuC;AAAA,EAClD,MAAM;AAAA,EACN,MAAM;AAAA,EACN,OAAO;AAAA,EACP,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,OAAO;AAAA,EACP,SAAS;AAAA,EACT,WAAW;AAAA,EACX,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AAAA,EACV,WAAW;AAAA,EACX,kBAAkB;AAAA,EAClB,gBAAgB;AAAA,EAChB,UAAU;AACZ;AAEO,MAAM,kBAAkB;AAAA,EAC7B,MAAM,8BAAU,KAAK,YAAY,gBAAgB,EAAE,aAAa,kBAAkB,IAAI;AAAA,EACtF,MAAM,8BAAU,UAAU,CAAC,8BAAU,QAAQ,8BAAU,MAAM,CAAC,EAC3D,YAAY,0BAA0B,EACtC,aAAa,kBAAkB,IAAI;AAAA,EACtC,OAAO,8BAAU,OAAO,YAAY,gCAAgC,EAAE,aAAa,kBAAkB,KAAK;AAAA,EAC1G,OAAO,8BAAU,OAAO,YAAY,SAAS,EAAE,aAAa,kBAAkB,KAAK;AAAA,EACnF,SAAS,8BAAU,KAAK,YAAY,sCAAsC,EAAE,aAAa,kBAAkB,OAAO;AAAA,EAClH,SAAS,8BAAU,KAAK,YAAY,sCAAsC,EAAE,aAAa,kBAAkB,OAAO;AAAA,EAClH,QAAQ,8BAAU,KAAK,YAAY,sCAAsC,EAAE,aAAa,kBAAkB,MAAM;AAAA,EAChH,SAAS,8BAAU,KAChB,YAAY,4CAA4C,EACxD,aAAa,kBAAkB,OAAO;AAAA,EACzC,WAAW,8BAAU,KAAK,YAAY,uBAAuB,EAAE,aAAa,kBAAkB,SAAS;AAAA,EACvG,OAAO,8BAAU,KAAK,YAAY,2BAA2B,EAAE,aAAa,kBAAkB,KAAK;AAAA,EACnG,YAAY,8BAAU,MAAM,CAAC,QAAQ,OAAO,CAAC,EAC1C,YAAY,4BAA4B,EACxC,aAAa,kBAAkB,UAAU;AAAA,EAC5C,eAAe,8BAAU,MAAM,CAAC,QAAQ,OAAO,CAAC,EAC7C,YAAY,4BAA4B,EACxC,aAAa,kBAAkB,aAAa;AAAA,EAC/C,UAAU,8BAAU,KAAK,YAAY,6BAA6B,EAAE,aAAa,kBAAkB,QAAQ;AAAA,EAC3G,UAAU,8BAAU,KAAK,YAAY,sCAAsC,EAAE,aAAa,kBAAkB,QAAQ;AAAA,EACpH,UAAU,8BAAU,KAAK,YAAY,2BAA2B,EAAE,aAAa,kBAAkB,QAAQ;AAAA,EACzG,WAAW,8BAAU,OAAO,YAAY,sBAAsB,EAAE,aAAa,kBAAkB,SAAS;AAAA,EACxG,kBAAkB,8BAAU,MAAM;AAAA,IAChC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC,EACE,YAAY,+DAA+D,EAC3E,aAAa,SAAS;AAAA,EACzB,gBAAgB,8BAAU,KAAK,YAAY,wBAAwB,EAAE,aAAa,kBAAkB,cAAc;AAAA,EAClH,UAAU,8BAAU,UAAU,CAAC,8BAAU,MAAM,8BAAU,MAAM,EAAE,SAAS,8BAAU,IAAI,CAAC,CAAC,CAAC,EAAE;AAAA,IAC3F;AAAA,EACF;AACF;",
+  "names": []
+}

package/dist/cjs/styled.js

@@ -0,0 +1,243 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var styled_exports = {};
+__export(styled_exports, {
+  CloseButton: () => CloseButton,
+  StyledStatusBadge: () => StyledStatusBadge,
+  StyledTileButton: () => StyledTileButton,
+  StyledTileButtonIcon: () => StyledTileButtonIcon,
+  StyledTileButtonLabel: () => StyledTileButtonLabel,
+  StyledTooltipV3ButtonWrapper: () => StyledTooltipV3ButtonWrapper,
+  StyledWrapper: () => StyledWrapper,
+  StyledWrapperCentralContent: () => StyledWrapperCentralContent,
+  StyledWrapperLeftBorder: () => StyledWrapperLeftBorder
+});
+module.exports = __toCommonJS(styled_exports);
+var React = __toESM(require("react"));
+var import_ds_system = require("@elliemae/ds-system");
+var import_ds_grid = require("@elliemae/ds-grid");
+const MIN_WIDTH_SIDEBAR = 48;
+const BUTTON_SIDEBAR_HEIGHT = 48;
+const StyledWrapperLeftBorder = (0, import_ds_system.styled)(import_ds_grid.Grid)`
+  height: 100%;
+  width: 4px;
+  position: absolute;
+  top: 0;
+  left: 0;
+`;
+const StyledStatusBadge = import_ds_system.styled.div`
+  height: 8px;
+  width: 8px;
+  position: absolute;
+  top: 0;
+  background: ${(props) => {
+  switch (props.badgeColor) {
+    case "blue":
+      return props.theme.colors.brand[600];
+    case "green":
+      return props.theme.colors.success[900];
+    default:
+      return props.theme.colors.brand[600];
+  }
+}};
+  ${(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 = (0, import_ds_system.styled)(import_ds_grid.Grid)`
+  width: 24px;
+  height: 40px;
+`;
+const StyledTileButtonIcon = (0, import_ds_system.styled)(import_ds_grid.Grid)`
+  position: relative;
+  height: 24px;
+  width: 24px;
+  svg {
+    fill: ${(props) => props.theme.colors.neutral[500]};
+  }
+
+  &:focus {
+    svg {
+      fill: ${(props) => props.theme.colors.brand[800]};
+    }
+  }
+`;
+const StyledTileButtonLabel = import_ds_system.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 = import_ds_system.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;
+  }
+
+  &: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 = import_ds_system.styled.div`
+  height: ${BUTTON_SIDEBAR_HEIGHT}px;
+  width: ${MIN_WIDTH_SIDEBAR}px;
+`;
+const StyledTileButton = import_ds_system.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;";
+  }
+}};
+    }
+  }
+
+  &: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]};
+    }
+  }
+
+  &: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"]};
+    }
+  }
+
+  &: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]};
+    }
+  }
+
+  ${(props) => {
+  if (props.selected) {
+    return import_ds_system.css`
+        & ${StyledWrapperLeftBorder} {
+          background: ${(nestedProps) => nestedProps.theme.colors.brand[600]};
+        }
+      `;
+  }
+  return "";
+}}
+`;
+const StyledWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid)`
+  height: 100%;
+  width: 100%;
+  position: relative;
+`;
+//# sourceMappingURL=styled.js.map

package/dist/cjs/styled.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/styled.ts", "../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable indent */\n/* eslint-disable max-lines */\nimport { css, styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSChatTileT } from './react-desc-prop-types';\nconst MIN_WIDTH_SIDEBAR = 48;\nconst BUTTON_SIDEBAR_HEIGHT = 48;\n\n// Buttons\nexport const StyledWrapperLeftBorder = styled(Grid)`\n  height: 100%;\n  width: 4px;\n  position: absolute;\n  top: 0;\n  left: 0;\n`;\n\nexport const StyledStatusBadge = styled.div<Partial<DSChatTileT.Props>>`\n  height: 8px;\n  width: 8px;\n  position: absolute;\n  top: 0;\n  background: ${(props) => {\n    switch (props.badgeColor) {\n      case 'blue':\n        return props.theme.colors.brand[600];\n      case 'green':\n        return props.theme.colors.success[900];\n      default:\n        return props.theme.colors.brand[600];\n    }\n  }};\n  ${(props) => {\n    switch (props.badgePosition) {\n      case 'left':\n        return 'left: -4px;';\n      case 'right':\n        return 'right: -4px;';\n      default:\n        return 'left: -4px;';\n    }\n  }};\n  border-radius: 50%;\n  box-sizing: content-box;\n`;\n\nexport const StyledWrapperCentralContent = styled(Grid)`\n  width: 24px;\n  height: 40px;\n`;\n\nexport const StyledTileButtonIcon = styled(Grid)`\n  position: relative;\n  height: 24px;\n  width: 24px;\n  svg {\n    fill: ${(props) => props.theme.colors.neutral[500]};\n  }\n\n  &:focus {\n    svg {\n      fill: ${(props) => props.theme.colors.brand[800]};\n    }\n  }\n`;\n\nexport const StyledTileButtonLabel = styled.div`\n  width: 24px;\n  height: ${(props) => props.theme.space.xs};\n  text-transform: uppercase;\n  overflow: hidden;\n  text-align: center;\n  font-size: 13px;\n  color: ${(props) => props.theme.colors.neutral[600]};\n  line-height: 17px;\n`;\n\nexport const CloseButton = styled.button`\n  outline: none;\n  background: none;\n  height: 9px;\n  width: 9px;\n  position: absolute;\n  top: 1px;\n  right: 1px;\n  overflow: hidden;\n  padding: 0;\n  border: none;\n  span {\n    position: absolute;\n    left: -3px;\n    top: -4px;\n  }\n\n  &:focus,\n  &:hover {\n    svg {\n      fill: ${(props) => props.theme.colors.brand[600]};\n    }\n    &:after {\n      display: block;\n      content: '';\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      border: solid 1px ${(props) => props.theme.colors.brand[600]};\n      border-radius: 2px;\n    }\n  }\n  cursor: pointer;\n`;\n\n// MAIN WRAPPER\nexport const StyledTooltipV3ButtonWrapper = styled.div`\n  height: ${BUTTON_SIDEBAR_HEIGHT}px;\n  width: ${MIN_WIDTH_SIDEBAR}px;\n`;\nexport const StyledTileButton = styled.button<Partial<DSChatTileT.Props>>`\n  outline: none;\n  background: transparent;\n  height: ${BUTTON_SIDEBAR_HEIGHT}px;\n  width: ${MIN_WIDTH_SIDEBAR}px;\n  position: relative;\n  padding: 0;\n  border: none;\n  cursor: pointer;\n  border-bottom: ${(props) => (props.isHeader ? `1px solid  ${props.theme.colors.neutral['200']}` : 'none')};\n  &:focus,\n  &:hover,\n  &:active,\n  &:disabled {\n    background: ${(props) => props.theme.colors.neutral['080']};\n    & ${StyledStatusBadge} {\n      border: 2px solid ${(props) => props.theme.colors.neutral['080']};\n      margin-top: -2px;\n      ${(props) => {\n        switch (props.badgePosition) {\n          case 'left':\n            return 'margin-left: -2px;';\n          case 'right':\n            return 'margin-right: -2px;';\n          default:\n            return 'margin-left: -2px;';\n        }\n      }};\n    }\n  }\n\n  &:focus,\n  &:hover {\n    & ${StyledWrapperLeftBorder} {\n      background: ${(props) => props.theme.colors.brand[800]};\n    }\n    & ${StyledTileButtonLabel} {\n      color: ${(props) => props.theme.colors.neutral[600]};\n    }\n\n    & svg {\n      fill: ${(props) => props.theme.colors.brand[800]};\n    }\n  }\n\n  &:active:not(:disabled) {\n    background: ${(props) => props.theme.colors.neutral['050']};\n    & ${StyledWrapperLeftBorder} {\n      background: ${(props) => props.theme.colors.brand[600]};\n    }\n    & ${StyledTileButtonLabel} {\n      color: ${(props) => props.theme.colors.neutral[600]};\n      font-weight: 600;\n    }\n    & svg {\n      fill: ${(props) => props.theme.colors.brand[600]};\n    }\n    & ${StyledStatusBadge} {\n      border: 2px solid ${(props) => props.theme.colors.neutral['050']};\n    }\n  }\n\n  &:disabled {\n    background: ${(props) => props.theme.colors.neutral['080']};\n    ${StyledWrapperLeftBorder} {\n      background: ${(props) => props.theme.colors.neutral['400']};\n    }\n    & ${StyledStatusBadge} {\n      background: ${(props) => props.theme.colors.neutral['500']};\n      border: 2px solid ${(props) => props.theme.colors.neutral['080']};\n    }\n    ${StyledTileButtonIcon} {\n      svg {\n        fill: ${(props) => props.theme.colors.neutral[400]};\n      }\n    }\n    ${StyledTileButtonLabel} {\n      color: ${(props) => props.theme.colors.neutral[400]};\n    }\n  }\n\n  ${(props) => {\n    if (props.selected) {\n      return css`\n        & ${StyledWrapperLeftBorder} {\n          background: ${(nestedProps) => nestedProps.theme.colors.brand[600]};\n        }\n      `;\n    }\n    return '';\n  }}\n`;\n\nexport const StyledWrapper = styled(Grid)`\n  height: 100%;\n  width: 100%;\n  position: relative;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/esm/TileButton.js

@@ -0,0 +1,148 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React2 from "react";
+import { describe, useValidateTypescriptPropTypes, useMemoMergePropsWithDefault } from "@elliemae/ds-utilities";
+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 "./react-desc-prop-types";
+const TileButton = (props) => {
+  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultTileButton);
+  useValidateTypescriptPropTypes(propsWithDefault, propsTileButton);
+  const {
+    label,
+    title,
+    dsId,
+    onClick,
+    onFocus,
+    onBlur,
+    Icon,
+    showClose,
+    onClose,
+    badge,
+    badgeColor,
+    badgePosition,
+    disabled,
+    selected,
+    isHeader,
+    ariaLabel,
+    tooltipPlacement,
+    disableTooltip,
+    innerRef
+  } = propsWithDefault;
+  const handleClick = React2.useCallback(() => {
+    onClick(dsId, title);
+  }, [dsId, onClick, title]);
+  const MainContent = React2.useMemo(
+    () => /* @__PURE__ */ jsxs(StyledWrapperCentralContent, {
+      alignItems: isHeader ? "center" : void 0,
+      children: [
+        /* @__PURE__ */ jsx(Grid, {
+          width: "100%",
+          alignItems: "center",
+          justifyContent: "center",
+          children: /* @__PURE__ */ jsxs(StyledTileButtonIcon, {
+            alignItems: "center",
+            justifyContent: "center",
+            children: [
+              /* @__PURE__ */ jsx(Icon, {
+                size: "m"
+              }),
+              badge ? /* @__PURE__ */ jsx(StyledStatusBadge, {
+                badgeColor,
+                badgePosition,
+                "data-testid": `tile-badge-${dsId}`
+              }) : null
+            ]
+          })
+        }),
+        !isHeader ? /* @__PURE__ */ jsx(Grid, {
+          width: "100%",
+          justifyContent: "center",
+          children: label ? /* @__PURE__ */ jsx(StyledTileButtonLabel, {
+            children: label
+          }) : null
+        }) : null
+      ]
+    }),
+    [isHeader, Icon, badge, dsId, badgeColor, badgePosition, label]
+  );
+  const Btn = React2.useMemo(
+    () => /* @__PURE__ */ jsx(StyledTileButton, {
+      isHeader,
+      value: dsId,
+      "data-testid": `tile-button-${dsId}`,
+      "data-key": dsId,
+      onClick: handleClick,
+      onFocus,
+      onBlur,
+      disabled,
+      selected,
+      badgeColor,
+      badgePosition,
+      "aria-pressed": selected,
+      "aria-label": ariaLabel,
+      ref: innerRef,
+      children: /* @__PURE__ */ jsxs(StyledWrapper, {
+        alignItems: "center",
+        justifyContent: "center",
+        children: [
+          /* @__PURE__ */ jsx("span", {
+            children: MainContent
+          }),
+          /* @__PURE__ */ jsx(StyledWrapperLeftBorder, {}),
+          showClose && !disabled ? /* @__PURE__ */ jsx(CloseButton, {
+            onClick: onClose,
+            value: dsId,
+            "data-testid": `tile-close-btn-${dsId}`,
+            children: /* @__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, {
+    children: /* @__PURE__ */ jsx(DSTooltipV3, {
+      id: `ds-chat-tile-tooltip-button-${dsId}`,
+      text: title,
+      startPlacementPreference: tooltipPlacement,
+      children: Btn
+    })
+  }) : Btn;
+};
+TileButton.propTypes = propsTileButton;
+TileButton.displayName = "TileButton";
+const TileButtonWithSchema = describe(TileButton);
+TileButtonWithSchema.propTypes = propsTileButton;
+export {
+  TileButton,
+  TileButtonWithSchema
+};
+//# sourceMappingURL=TileButton.js.map

package/dist/esm/TileButton.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/TileButton.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { WeakValidationMap } from 'react';\nimport { describe, useValidateTypescriptPropTypes, useMemoMergePropsWithDefault } from '@elliemae/ds-utilities';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\nimport { Grid } from '@elliemae/ds-grid';\nimport { CloseXsmall } from '@elliemae/ds-icons';\nimport {\n  StyledTooltipV3ButtonWrapper,\n  StyledTileButton,\n  StyledTileButtonIcon,\n  StyledTileButtonLabel,\n  StyledWrapper,\n  StyledWrapperLeftBorder,\n  StyledStatusBadge,\n  StyledWrapperCentralContent,\n  CloseButton,\n} from './styled';\nimport { propsTileButton, defaultTileButton, DSChatTileT } from './react-desc-prop-types';\n\nconst TileButton: React.ComponentType<DSChatTileT.Props> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultTileButton);\n  useValidateTypescriptPropTypes(propsWithDefault, propsTileButton);\n\n  const {\n    label,\n    title,\n    dsId,\n    onClick,\n    onFocus,\n    onBlur,\n    Icon,\n    showClose,\n    onClose,\n    badge,\n    badgeColor,\n    badgePosition,\n    disabled,\n    selected,\n    isHeader,\n    ariaLabel,\n    tooltipPlacement,\n    disableTooltip,\n    innerRef,\n  } = propsWithDefault;\n  const handleClick = React.useCallback(() => {\n    onClick(dsId, title);\n  }, [dsId, onClick, title]);\n\n  const MainContent = React.useMemo(\n    () => (\n      <StyledWrapperCentralContent alignItems={isHeader ? 'center' : undefined}>\n        <Grid width=\"100%\" alignItems=\"center\" justifyContent=\"center\">\n          <StyledTileButtonIcon alignItems=\"center\" justifyContent=\"center\">\n            <Icon size=\"m\" />\n            {badge ? (\n              <StyledStatusBadge\n                badgeColor={badgeColor}\n                badgePosition={badgePosition}\n                data-testid={`tile-badge-${dsId}`}\n              />\n            ) : null}\n          </StyledTileButtonIcon>\n        </Grid>\n        {!isHeader ? (\n          <Grid width=\"100%\" justifyContent=\"center\">\n            {label ? <StyledTileButtonLabel>{label}</StyledTileButtonLabel> : null}\n          </Grid>\n        ) : null}\n      </StyledWrapperCentralContent>\n    ),\n    [isHeader, Icon, badge, dsId, badgeColor, badgePosition, label],\n  );\n\n  const Btn = React.useMemo(\n    () => (\n      <StyledTileButton\n        key={dsId}\n        isHeader={isHeader}\n        value={dsId}\n        data-testid={`tile-button-${dsId}`}\n        data-key={dsId}\n        onClick={handleClick}\n        onFocus={onFocus}\n        onBlur={onBlur}\n        disabled={disabled}\n        selected={selected}\n        badgeColor={badgeColor}\n        badgePosition={badgePosition}\n        aria-pressed={selected}\n        aria-label={ariaLabel}\n        ref={innerRef}\n      >\n        <StyledWrapper alignItems=\"center\" justifyContent=\"center\">\n          <span>{MainContent}</span>\n          <StyledWrapperLeftBorder />\n          {showClose && !disabled ? (\n            <CloseButton onClick={onClose} value={dsId} data-testid={`tile-close-btn-${dsId}`}>\n              <CloseXsmall />\n            </CloseButton>\n          ) : null}\n        </StyledWrapper>\n      </StyledTileButton>\n    ),\n    [\n      MainContent,\n      ariaLabel,\n      badgeColor,\n      badgePosition,\n      disabled,\n      dsId,\n      handleClick,\n      isHeader,\n      onBlur,\n      onClose,\n      onFocus,\n      selected,\n      showClose,\n      innerRef,\n    ],\n  );\n\n  return title && !disableTooltip ? (\n    <StyledTooltipV3ButtonWrapper>\n      <DSTooltipV3 id={`ds-chat-tile-tooltip-button-${dsId}`} text={title} startPlacementPreference={tooltipPlacement}>\n        {Btn}\n      </DSTooltipV3>\n    </StyledTooltipV3ButtonWrapper>\n  ) : (\n    Btn\n  );\n};\n\nTileButton.propTypes = propsTileButton as WeakValidationMap<unknown>;\nTileButton.displayName = 'TileButton';\nconst TileButtonWithSchema = describe(TileButton);\nTileButtonWithSchema.propTypes = propsTileButton as WeakValidationMap<unknown>;\n\nexport { TileButton, TileButtonWithSchema };\n"],
+  "mappings": "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",
+  "names": ["React"]
+}

package/dist/esm/index.js

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { TileButton, TileButtonWithSchema } from "./TileButton";
+import { DSChatTileT } from "./react-desc-prop-types";
+export {
+  DSChatTileT,
+  TileButton,
+  TileButtonWithSchema
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { TileButton, TileButtonWithSchema } from './TileButton';\nexport { DSChatTileT } from './react-desc-prop-types';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,YAAY,4BAA4B;AACjD,SAAS,mBAAmB;",
+  "names": []
+}

package/dist/esm/react-desc-prop-types.js

@@ -0,0 +1,66 @@
+import * as React from "react";
+import { PropTypes } from "@elliemae/ds-utilities";
+import { noop } from "lodash";
+import { Comments } from "@elliemae/ds-icons";
+const defaultTileButton = {
+  Icon: Comments,
+  dsId: "",
+  label: "",
+  onClick: noop,
+  onBlur: noop,
+  onFocus: noop,
+  title: "",
+  onClose: noop,
+  showClose: false,
+  badge: false,
+  badgeColor: "blue",
+  badgePosition: "left",
+  disabled: false,
+  selected: false,
+  isHeader: false,
+  ariaLabel: "Tile button",
+  tooltipPlacement: "right",
+  disableTooltip: false,
+  innerRef: noop
+};
+const propsTileButton = {
+  Icon: PropTypes.func.description("Icon component").defaultValue(defaultTileButton.Icon),
+  dsId: PropTypes.oneOfType([PropTypes.number, PropTypes.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"
+  )
+};
+export {
+  defaultTileButton,
+  propsTileButton
+};
+//# sourceMappingURL=react-desc-prop-types.js.map

package/dist/esm/react-desc-prop-types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { PropTypes } from '@elliemae/ds-utilities';\nimport { noop } from 'lodash';\nimport { Comments } from '@elliemae/ds-icons';\n\nexport declare namespace DSChatTileT {\n  export interface Props {\n    Icon: React.FC<{ size: string }>;\n    dsId: string | number;\n    label: string;\n    onClick?: (dsId: string | number, label: string) => void;\n    onBlur?: (e: React.ChangeEvent<HTMLButtonElement>) => void;\n    onFocus?: (e: React.ChangeEvent<HTMLButtonElement>) => void;\n    title: string;\n    showClose: boolean;\n    onClose?: (dsId: string | number) => void;\n    badge: boolean;\n    badgeColor: 'blue' | 'green';\n    badgePosition: 'left' | 'right';\n    disabled: boolean;\n    selected: boolean;\n    isHeader: boolean;\n    ariaLabel: string;\n    tooltipPlacement:\n      | 'top-start'\n      | 'top'\n      | 'top-end'\n      | 'right-start'\n      | 'right'\n      | 'right-end'\n      | 'bottom-end'\n      | 'bottom'\n      | 'bottom-start'\n      | 'left-end'\n      | 'left'\n      | 'left-start';\n    disableTooltip: boolean;\n    innerRef?: React.MutableRefObject<HTMLButtonElement> | ((_ref: HTMLButtonElement) => void);\n  }\n}\n\nexport const defaultTileButton: DSChatTileT.Props = {\n  Icon: Comments,\n  dsId: '',\n  label: '',\n  onClick: noop,\n  onBlur: noop,\n  onFocus: noop,\n  title: '',\n  onClose: noop,\n  showClose: false,\n  badge: false,\n  badgeColor: 'blue',\n  badgePosition: 'left',\n  disabled: false,\n  selected: false,\n  isHeader: false,\n  ariaLabel: 'Tile button',\n  tooltipPlacement: 'right',\n  disableTooltip: false,\n  innerRef: noop,\n};\n\nexport const propsTileButton = {\n  Icon: PropTypes.func.description('Icon component').defaultValue(defaultTileButton.Icon),\n  dsId: PropTypes.oneOfType([PropTypes.number, PropTypes.string])\n    .description('Unique id for the button')\n    .defaultValue(defaultTileButton.dsId),\n  label: PropTypes.string.description('It will display under the icon').defaultValue(defaultTileButton.label),\n  title: PropTypes.string.description('Tooltip').defaultValue(defaultTileButton.title),\n  onClick: PropTypes.func.description('The function to call when is clicked').defaultValue(defaultTileButton.onClick),\n  onFocus: PropTypes.func.description('The function to call when is focused').defaultValue(defaultTileButton.onFocus),\n  onBlur: PropTypes.func.description('The function to call when is on blur').defaultValue(defaultTileButton.onBlur),\n  onClose: PropTypes.func\n    .description('The function to call when the X is Clicked')\n    .defaultValue(defaultTileButton.onClose),\n  showClose: PropTypes.bool.description('It will display the X').defaultValue(defaultTileButton.showClose),\n  badge: PropTypes.bool.description('It will display the badge').defaultValue(defaultTileButton.badge),\n  badgeColor: PropTypes.oneOf(['blue', 'green'])\n    .description('Color badge: blue or green')\n    .defaultValue(defaultTileButton.badgeColor),\n  badgePosition: PropTypes.oneOf(['left', 'right'])\n    .description('Color badge: blue or green')\n    .defaultValue(defaultTileButton.badgePosition),\n  disabled: PropTypes.bool.description('It will disabled the button').defaultValue(defaultTileButton.disabled),\n  selected: PropTypes.bool.description('Indicate that the button is selected').defaultValue(defaultTileButton.disabled),\n  isHeader: PropTypes.bool.description(\"It won't render the label\").defaultValue(defaultTileButton.disabled),\n  ariaLabel: PropTypes.string.description('aria-label attribute').defaultValue(defaultTileButton.ariaLabel),\n  tooltipPlacement: PropTypes.oneOf([\n    'top-start',\n    'top',\n    'top-end',\n    'right-start',\n    'right',\n    'right-end',\n    'bottom-end',\n    'bottom',\n    'bottom-start',\n    'left-end',\n    'left',\n    'left-start',\n  ])\n    .description('start placement preferences, as per popperjs placement option')\n    .defaultValue(\"'right'\"),\n  disableTooltip: PropTypes.bool.description('Disable tooltip option').defaultValue(defaultTileButton.disableTooltip),\n  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]).description(\n    'reference to the component',\n  ),\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,iBAAiB;AAC1B,SAAS,YAAY;AACrB,SAAS,gBAAgB;AAsClB,MAAM,oBAAuC;AAAA,EAClD,MAAM;AAAA,EACN,MAAM;AAAA,EACN,OAAO;AAAA,EACP,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,OAAO;AAAA,EACP,SAAS;AAAA,EACT,WAAW;AAAA,EACX,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AAAA,EACV,WAAW;AAAA,EACX,kBAAkB;AAAA,EAClB,gBAAgB;AAAA,EAChB,UAAU;AACZ;AAEO,MAAM,kBAAkB;AAAA,EAC7B,MAAM,UAAU,KAAK,YAAY,gBAAgB,EAAE,aAAa,kBAAkB,IAAI;AAAA,EACtF,MAAM,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC,EAC3D,YAAY,0BAA0B,EACtC,aAAa,kBAAkB,IAAI;AAAA,EACtC,OAAO,UAAU,OAAO,YAAY,gCAAgC,EAAE,aAAa,kBAAkB,KAAK;AAAA,EAC1G,OAAO,UAAU,OAAO,YAAY,SAAS,EAAE,aAAa,kBAAkB,KAAK;AAAA,EACnF,SAAS,UAAU,KAAK,YAAY,sCAAsC,EAAE,aAAa,kBAAkB,OAAO;AAAA,EAClH,SAAS,UAAU,KAAK,YAAY,sCAAsC,EAAE,aAAa,kBAAkB,OAAO;AAAA,EAClH,QAAQ,UAAU,KAAK,YAAY,sCAAsC,EAAE,aAAa,kBAAkB,MAAM;AAAA,EAChH,SAAS,UAAU,KAChB,YAAY,4CAA4C,EACxD,aAAa,kBAAkB,OAAO;AAAA,EACzC,WAAW,UAAU,KAAK,YAAY,uBAAuB,EAAE,aAAa,kBAAkB,SAAS;AAAA,EACvG,OAAO,UAAU,KAAK,YAAY,2BAA2B,EAAE,aAAa,kBAAkB,KAAK;AAAA,EACnG,YAAY,UAAU,MAAM,CAAC,QAAQ,OAAO,CAAC,EAC1C,YAAY,4BAA4B,EACxC,aAAa,kBAAkB,UAAU;AAAA,EAC5C,eAAe,UAAU,MAAM,CAAC,QAAQ,OAAO,CAAC,EAC7C,YAAY,4BAA4B,EACxC,aAAa,kBAAkB,aAAa;AAAA,EAC/C,UAAU,UAAU,KAAK,YAAY,6BAA6B,EAAE,aAAa,kBAAkB,QAAQ;AAAA,EAC3G,UAAU,UAAU,KAAK,YAAY,sCAAsC,EAAE,aAAa,kBAAkB,QAAQ;AAAA,EACpH,UAAU,UAAU,KAAK,YAAY,2BAA2B,EAAE,aAAa,kBAAkB,QAAQ;AAAA,EACzG,WAAW,UAAU,OAAO,YAAY,sBAAsB,EAAE,aAAa,kBAAkB,SAAS;AAAA,EACxG,kBAAkB,UAAU,MAAM;AAAA,IAChC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC,EACE,YAAY,+DAA+D,EAC3E,aAAa,SAAS;AAAA,EACzB,gBAAgB,UAAU,KAAK,YAAY,wBAAwB,EAAE,aAAa,kBAAkB,cAAc;AAAA,EAClH,UAAU,UAAU,UAAU,CAAC,UAAU,MAAM,UAAU,MAAM,EAAE,SAAS,UAAU,IAAI,CAAC,CAAC,CAAC,EAAE;AAAA,IAC3F;AAAA,EACF;AACF;",
+  "names": []
+}

package/dist/esm/styled.js

@@ -0,0 +1,217 @@
+import * as React from "react";
+import { css, styled } from "@elliemae/ds-system";
+import { Grid } from "@elliemae/ds-grid";
+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) => {
+  switch (props.badgeColor) {
+    case "blue":
+      return props.theme.colors.brand[600];
+    case "green":
+      return props.theme.colors.success[900];
+    default:
+      return props.theme.colors.brand[600];
+  }
+}};
+  ${(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]};
+  }
+
+  &: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;
+  }
+
+  &: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;";
+  }
+}};
+    }
+  }
+
+  &: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]};
+    }
+  }
+
+  &: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"]};
+    }
+  }
+
+  &: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]};
+    }
+  }
+
+  ${(props) => {
+  if (props.selected) {
+    return css`
+        & ${StyledWrapperLeftBorder} {
+          background: ${(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

package/dist/esm/styled.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/styled.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\n/* eslint-disable max-lines */\nimport { css, styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSChatTileT } from './react-desc-prop-types';\nconst MIN_WIDTH_SIDEBAR = 48;\nconst BUTTON_SIDEBAR_HEIGHT = 48;\n\n// Buttons\nexport const StyledWrapperLeftBorder = styled(Grid)`\n  height: 100%;\n  width: 4px;\n  position: absolute;\n  top: 0;\n  left: 0;\n`;\n\nexport const StyledStatusBadge = styled.div<Partial<DSChatTileT.Props>>`\n  height: 8px;\n  width: 8px;\n  position: absolute;\n  top: 0;\n  background: ${(props) => {\n    switch (props.badgeColor) {\n      case 'blue':\n        return props.theme.colors.brand[600];\n      case 'green':\n        return props.theme.colors.success[900];\n      default:\n        return props.theme.colors.brand[600];\n    }\n  }};\n  ${(props) => {\n    switch (props.badgePosition) {\n      case 'left':\n        return 'left: -4px;';\n      case 'right':\n        return 'right: -4px;';\n      default:\n        return 'left: -4px;';\n    }\n  }};\n  border-radius: 50%;\n  box-sizing: content-box;\n`;\n\nexport const StyledWrapperCentralContent = styled(Grid)`\n  width: 24px;\n  height: 40px;\n`;\n\nexport const StyledTileButtonIcon = styled(Grid)`\n  position: relative;\n  height: 24px;\n  width: 24px;\n  svg {\n    fill: ${(props) => props.theme.colors.neutral[500]};\n  }\n\n  &:focus {\n    svg {\n      fill: ${(props) => props.theme.colors.brand[800]};\n    }\n  }\n`;\n\nexport const StyledTileButtonLabel = styled.div`\n  width: 24px;\n  height: ${(props) => props.theme.space.xs};\n  text-transform: uppercase;\n  overflow: hidden;\n  text-align: center;\n  font-size: 13px;\n  color: ${(props) => props.theme.colors.neutral[600]};\n  line-height: 17px;\n`;\n\nexport const CloseButton = styled.button`\n  outline: none;\n  background: none;\n  height: 9px;\n  width: 9px;\n  position: absolute;\n  top: 1px;\n  right: 1px;\n  overflow: hidden;\n  padding: 0;\n  border: none;\n  span {\n    position: absolute;\n    left: -3px;\n    top: -4px;\n  }\n\n  &:focus,\n  &:hover {\n    svg {\n      fill: ${(props) => props.theme.colors.brand[600]};\n    }\n    &:after {\n      display: block;\n      content: '';\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      border: solid 1px ${(props) => props.theme.colors.brand[600]};\n      border-radius: 2px;\n    }\n  }\n  cursor: pointer;\n`;\n\n// MAIN WRAPPER\nexport const StyledTooltipV3ButtonWrapper = styled.div`\n  height: ${BUTTON_SIDEBAR_HEIGHT}px;\n  width: ${MIN_WIDTH_SIDEBAR}px;\n`;\nexport const StyledTileButton = styled.button<Partial<DSChatTileT.Props>>`\n  outline: none;\n  background: transparent;\n  height: ${BUTTON_SIDEBAR_HEIGHT}px;\n  width: ${MIN_WIDTH_SIDEBAR}px;\n  position: relative;\n  padding: 0;\n  border: none;\n  cursor: pointer;\n  border-bottom: ${(props) => (props.isHeader ? `1px solid  ${props.theme.colors.neutral['200']}` : 'none')};\n  &:focus,\n  &:hover,\n  &:active,\n  &:disabled {\n    background: ${(props) => props.theme.colors.neutral['080']};\n    & ${StyledStatusBadge} {\n      border: 2px solid ${(props) => props.theme.colors.neutral['080']};\n      margin-top: -2px;\n      ${(props) => {\n        switch (props.badgePosition) {\n          case 'left':\n            return 'margin-left: -2px;';\n          case 'right':\n            return 'margin-right: -2px;';\n          default:\n            return 'margin-left: -2px;';\n        }\n      }};\n    }\n  }\n\n  &:focus,\n  &:hover {\n    & ${StyledWrapperLeftBorder} {\n      background: ${(props) => props.theme.colors.brand[800]};\n    }\n    & ${StyledTileButtonLabel} {\n      color: ${(props) => props.theme.colors.neutral[600]};\n    }\n\n    & svg {\n      fill: ${(props) => props.theme.colors.brand[800]};\n    }\n  }\n\n  &:active:not(:disabled) {\n    background: ${(props) => props.theme.colors.neutral['050']};\n    & ${StyledWrapperLeftBorder} {\n      background: ${(props) => props.theme.colors.brand[600]};\n    }\n    & ${StyledTileButtonLabel} {\n      color: ${(props) => props.theme.colors.neutral[600]};\n      font-weight: 600;\n    }\n    & svg {\n      fill: ${(props) => props.theme.colors.brand[600]};\n    }\n    & ${StyledStatusBadge} {\n      border: 2px solid ${(props) => props.theme.colors.neutral['050']};\n    }\n  }\n\n  &:disabled {\n    background: ${(props) => props.theme.colors.neutral['080']};\n    ${StyledWrapperLeftBorder} {\n      background: ${(props) => props.theme.colors.neutral['400']};\n    }\n    & ${StyledStatusBadge} {\n      background: ${(props) => props.theme.colors.neutral['500']};\n      border: 2px solid ${(props) => props.theme.colors.neutral['080']};\n    }\n    ${StyledTileButtonIcon} {\n      svg {\n        fill: ${(props) => props.theme.colors.neutral[400]};\n      }\n    }\n    ${StyledTileButtonLabel} {\n      color: ${(props) => props.theme.colors.neutral[400]};\n    }\n  }\n\n  ${(props) => {\n    if (props.selected) {\n      return css`\n        & ${StyledWrapperLeftBorder} {\n          background: ${(nestedProps) => nestedProps.theme.colors.brand[600]};\n        }\n      `;\n    }\n    return '';\n  }}\n`;\n\nexport const StyledWrapper = styled(Grid)`\n  height: 100%;\n  width: 100%;\n  position: relative;\n`;\n"],
+  "mappings": "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",
+  "names": []
+}

package/package.json

@@ -0,0 +1,77 @@
+{
+  "name": "@elliemae/ds-chat-tile",
+  "version": "3.6.0-next.0",
+  "license": "MIT",
+  "description": "ICE MT - Dimsum - Chat Tile",
+  "files": [
+    "dist"
+  ],
+  "module": "./dist/esm/index.js",
+  "main": "./dist/cjs/index.js",
+  "types": "./dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
+    },
+    "./styled": {
+      "import": "./dist/esm/styled.js",
+      "require": "./dist/cjs/styled.js"
+    },
+    "./props": {
+      "import": "./dist/esm/props.js",
+      "require": "./dist/cjs/props.js"
+    },
+    "./TileButton": {
+      "import": "./dist/esm/TileButton.js",
+      "require": "./dist/cjs/TileButton.js"
+    }
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://git.elliemae.io/platform-ui/dimsum.git"
+  },
+  "engines": {
+    "pnpm": ">=6",
+    "node": ">=16"
+  },
+  "author": "ICE MT",
+  "jestSonar": {
+    "sonar56x": true,
+    "reportPath": "reports",
+    "reportFile": "tests.xml",
+    "indent": 4
+  },
+  "publishConfig": {
+    "access": "public",
+    "typeSafety": true
+  },
+  "dependencies": {
+    "@elliemae/ds-grid": "3.6.0-next.0",
+    "@elliemae/ds-icons": "3.6.0-next.0",
+    "@elliemae/ds-system": "3.6.0-next.0",
+    "@elliemae/ds-tooltip": "3.6.0-next.0",
+    "@elliemae/ds-utilities": "3.6.0-next.0"
+  },
+  "devDependencies": {
+    "@testing-library/dom": "~8.13.0",
+    "@testing-library/jest-dom": "~5.16.4",
+    "@testing-library/react": "~12.1.3",
+    "@testing-library/user-event": "~13.5.0",
+    "styled-components": "~5.3.5"
+  },
+  "peerDependencies": {
+    "lodash": "^4.17.21",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "styled-components": "^5.3.5"
+  },
+  "scripts": {
+    "test": "node ../../scripts/testing/test.mjs",
+    "lint": "node ../../scripts/lint.mjs",
+    "dts": "node ../../scripts/dts.mjs",
+    "dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch",
+    "build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs",
+    "checkDeps": "npx -yes ../ds-codemods check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
+  }
+}