@elliemae/ds-chat-tile 3.28.1-rc.1 → 3.29.0-next.0

package/dist/cjs/TileButton.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/TileButton.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\nimport type { WeakValidationMap } from 'react';\nimport React from 'react';\nimport { describe, useValidateTypescriptPropTypes, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\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.js';\nimport type { DSChatTileT } from './react-desc-prop-types.js';\nimport { propsTileButton, defaultTileButton } from './react-desc-prop-types.js';\nimport { DSChatTileButtonName } from './DSChatTileButtonDefinitions.js';\n\nconst TileButton: React.ComponentType<DSChatTileT.Props> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultTileButton);\n  useValidateTypescriptPropTypes(propsWithDefault, propsTileButton, DSChatTileButtonName);\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        innerRef={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}`} aria-label=\"close\">\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 = DSChatTileButtonName;\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;ADuDb;AArDV,mBAAkB;AAClB,8BAAuF;AACvF,wBAA4B;AAC5B,qBAAqB;AACrB,sBAA4B;AAC5B,oBAUO;AAEP,mCAAmD;AACnD,yCAAqC;AAErC,MAAM,aAAqD,CAAC,UAAU;AACpE,QAAM,uBAAmB,sDAA6B,OAAO,8CAAiB;AAC9E,8DAA+B,kBAAkB,8CAAiB,uDAAoB;AAEtF,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,6CAA4B,YAAY,WAAW,WAAW,QAC7D;AAAA,kDAAC,uBAAK,OAAM,QAAO,YAAW,UAAS,gBAAe,UACpD,uDAAC,sCAAqB,YAAW,UAAS,gBAAe,UACvD;AAAA,oDAAC,QAAK,MAAK,KAAI;AAAA,QACd,QACC;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA,eAAa,cAAc;AAAA;AAAA,QAC7B,IACE;AAAA,SACN,GACF;AAAA,MACC,CAAC,WACA,4CAAC,uBAAK,OAAM,QAAO,gBAAe,UAC/B,kBAAQ,4CAAC,uCAAuB,iBAAM,IAA2B,MACpE,IACE;AAAA,OACN;AAAA,IAEF,CAAC,UAAU,MAAM,OAAO,MAAM,YAAY,eAAe,KAAK;AAAA,EAChE;AAEA,QAAM,MAAM,aAAAA,QAAM;AAAA,IAChB,MACE;AAAA,MAAC;AAAA;AAAA,QAEC;AAAA,QACA,OAAO;AAAA,QACP,eAAa,eAAe;AAAA,QAC5B,YAAU;AAAA,QACV,SAAS;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,gBAAc;AAAA,QACd,cAAY;AAAA,QACZ;AAAA,QAEA,uDAAC,+BAAc,YAAW,UAAS,gBAAe,UAChD;AAAA,sDAAC,UAAM,uBAAY;AAAA,UACnB,4CAAC,yCAAwB;AAAA,UACxB,aAAa,CAAC,WACb,4CAAC,6BAAY,SAAS,SAAS,OAAO,MAAM,eAAa,kBAAkB,QAAQ,cAAW,SAC5F,sDAAC,+BAAY,GACf,IACE;AAAA,WACN;AAAA;AAAA,MAxBK;AAAA,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,8CACC,sDAAC,iCAAY,IAAI,+BAA+B,QAAQ,MAAM,OAAO,0BAA0B,kBAC5F,eACH,GACF,IAEA;AAEJ;AAEA,WAAW,YAAY;AACvB,WAAW,cAAc;AACzB,MAAM,2BAAuB,kCAAS,UAAU;AAChD,qBAAqB,YAAY;",
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport type { WeakValidationMap } from 'react';\nimport React from 'react';\nimport { describe, useValidateTypescriptPropTypes, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\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.js';\nimport type { DSChatTileT } from './react-desc-prop-types.js';\nimport { propsTileButton, defaultTileButton } from './react-desc-prop-types.js';\nimport { DSChatTileButtonName } from './DSChatTileButtonDefinitions.js';\n\nconst TileButton: React.ComponentType<DSChatTileT.Props> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault<DSChatTileT.InternalProps>(props, defaultTileButton);\n  useValidateTypescriptPropTypes(propsWithDefault, propsTileButton, DSChatTileButtonName);\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\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        innerRef={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}`} aria-label=\"close\">\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 = DSChatTileButtonName;\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;ADwDb;AAtDV,mBAAkB;AAClB,8BAAuF;AACvF,wBAA4B;AAC5B,qBAAqB;AACrB,sBAA4B;AAC5B,oBAUO;AAEP,mCAAmD;AACnD,yCAAqC;AAErC,MAAM,aAAqD,CAAC,UAAU;AACpE,QAAM,uBAAmB,sDAAwD,OAAO,8CAAiB;AACzG,8DAA+B,kBAAkB,8CAAiB,uDAAoB;AAEtF,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;AAEJ,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,6CAA4B,YAAY,WAAW,WAAW,QAC7D;AAAA,kDAAC,uBAAK,OAAM,QAAO,YAAW,UAAS,gBAAe,UACpD,uDAAC,sCAAqB,YAAW,UAAS,gBAAe,UACvD;AAAA,oDAAC,QAAK,MAAK,KAAI;AAAA,QACd,QACC;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA,eAAa,cAAc;AAAA;AAAA,QAC7B,IACE;AAAA,SACN,GACF;AAAA,MACC,CAAC,WACA,4CAAC,uBAAK,OAAM,QAAO,gBAAe,UAC/B,kBAAQ,4CAAC,uCAAuB,iBAAM,IAA2B,MACpE,IACE;AAAA,OACN;AAAA,IAEF,CAAC,UAAU,MAAM,OAAO,MAAM,YAAY,eAAe,KAAK;AAAA,EAChE;AAEA,QAAM,MAAM,aAAAA,QAAM;AAAA,IAChB,MACE;AAAA,MAAC;AAAA;AAAA,QAEC;AAAA,QACA,OAAO;AAAA,QACP,eAAa,eAAe;AAAA,QAC5B,YAAU;AAAA,QACV,SAAS;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,gBAAc;AAAA,QACd,cAAY;AAAA,QACZ;AAAA,QAEA,uDAAC,+BAAc,YAAW,UAAS,gBAAe,UAChD;AAAA,sDAAC,UAAM,uBAAY;AAAA,UACnB,4CAAC,yCAAwB;AAAA,UACxB,aAAa,CAAC,WACb,4CAAC,6BAAY,SAAS,SAAS,OAAO,MAAM,eAAa,kBAAkB,QAAQ,cAAW,SAC5F,sDAAC,+BAAY,GACf,IACE;AAAA,WACN;AAAA;AAAA,MAxBK;AAAA,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,8CACC,sDAAC,iCAAY,IAAI,+BAA+B,QAAQ,MAAM,OAAO,0BAA0B,kBAC5F,eACH,GACF,IAEA;AAEJ;AAEA,WAAW,YAAY;AACvB,WAAW,cAAc;AACzB,MAAM,2BAAuB,kCAAS,UAAU;AAChD,qBAAqB,YAAY;",
   "names": ["React"]
 }

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

@@ -41,10 +41,7 @@ const defaultTileButton = {
   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",
@@ -54,8 +51,7 @@ const defaultTileButton = {
   isHeader: false,
   ariaLabel: "Tile button",
   tooltipPlacement: "right",
-  disableTooltip: false,
-  innerRef: import_lodash.noop
+  disableTooltip: false
 };
 const propsTileButton = {
   Icon: import_ds_props_helpers.PropTypes.func.description("Icon component").defaultValue(defaultTileButton.Icon),
@@ -63,9 +59,9 @@ const propsTileButton = {
   label: import_ds_props_helpers.PropTypes.string.description("It will display under the icon").defaultValue(defaultTileButton.label),
   title: import_ds_props_helpers.PropTypes.string.description("Tooltip").defaultValue(defaultTileButton.title),
   onClick: import_ds_props_helpers.PropTypes.func.description("The function to call when is clicked").defaultValue(defaultTileButton.onClick),
-  onFocus: import_ds_props_helpers.PropTypes.func.description("The function to call when is focused").defaultValue(defaultTileButton.onFocus),
-  onBlur: import_ds_props_helpers.PropTypes.func.description("The function to call when is on blur").defaultValue(defaultTileButton.onBlur),
-  onClose: import_ds_props_helpers.PropTypes.func.description("The function to call when the X is Clicked").defaultValue(defaultTileButton.onClose).deprecated({ version: "4.x", message: "use Menu and menuProps instead" }),
+  onFocus: import_ds_props_helpers.PropTypes.func.description("The function to call when is focused"),
+  onBlur: import_ds_props_helpers.PropTypes.func.description("The function to call when is on blur"),
+  onClose: import_ds_props_helpers.PropTypes.func.description("The function to call when the X is Clicked").deprecated({ version: "4.x", message: "use Menu and menuProps instead" }),
   showClose: import_ds_props_helpers.PropTypes.bool.description("It will display the X").defaultValue(defaultTileButton.showClose).deprecated({ version: "4.x", message: "use Menu and menuProps instead" }),
   badge: import_ds_props_helpers.PropTypes.bool.description("It will display the badge").defaultValue(defaultTileButton.badge),
   badgeColor: import_ds_props_helpers.PropTypes.oneOf(["blue", "green"]).description("Color badge: blue or green").defaultValue(defaultTileButton.badgeColor),

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/react-desc-prop-types.ts", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import type React from 'react';\nimport { PropTypes } from '@elliemae/ds-props-helpers';\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    .deprecated({ version: '4.x', message: 'use Menu and menuProps instead' }),\n  showClose: PropTypes.bool\n    .description('It will display the X')\n    .defaultValue(defaultTileButton.showClose)\n    .deprecated({ version: '4.x', message: 'use Menu and menuProps instead' }),\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,8BAA0B;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,kCAAU,KAAK,YAAY,gBAAgB,EAAE,aAAa,kBAAkB,IAAI;AAAA,EACtF,MAAM,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,MAAM,CAAC,EAC3D,YAAY,0BAA0B,EACtC,aAAa,kBAAkB,IAAI;AAAA,EACtC,OAAO,kCAAU,OAAO,YAAY,gCAAgC,EAAE,aAAa,kBAAkB,KAAK;AAAA,EAC1G,OAAO,kCAAU,OAAO,YAAY,SAAS,EAAE,aAAa,kBAAkB,KAAK;AAAA,EACnF,SAAS,kCAAU,KAAK,YAAY,sCAAsC,EAAE,aAAa,kBAAkB,OAAO;AAAA,EAClH,SAAS,kCAAU,KAAK,YAAY,sCAAsC,EAAE,aAAa,kBAAkB,OAAO;AAAA,EAClH,QAAQ,kCAAU,KAAK,YAAY,sCAAsC,EAAE,aAAa,kBAAkB,MAAM;AAAA,EAChH,SAAS,kCAAU,KAChB,YAAY,4CAA4C,EACxD,aAAa,kBAAkB,OAAO,EACtC,WAAW,EAAE,SAAS,OAAO,SAAS,iCAAiC,CAAC;AAAA,EAC3E,WAAW,kCAAU,KAClB,YAAY,uBAAuB,EACnC,aAAa,kBAAkB,SAAS,EACxC,WAAW,EAAE,SAAS,OAAO,SAAS,iCAAiC,CAAC;AAAA,EAC3E,OAAO,kCAAU,KAAK,YAAY,2BAA2B,EAAE,aAAa,kBAAkB,KAAK;AAAA,EACnG,YAAY,kCAAU,MAAM,CAAC,QAAQ,OAAO,CAAC,EAC1C,YAAY,4BAA4B,EACxC,aAAa,kBAAkB,UAAU;AAAA,EAC5C,eAAe,kCAAU,MAAM,CAAC,QAAQ,OAAO,CAAC,EAC7C,YAAY,4BAA4B,EACxC,aAAa,kBAAkB,aAAa;AAAA,EAC/C,UAAU,kCAAU,KAAK,YAAY,6BAA6B,EAAE,aAAa,kBAAkB,QAAQ;AAAA,EAC3G,UAAU,kCAAU,KAAK,YAAY,sCAAsC,EAAE,aAAa,kBAAkB,QAAQ;AAAA,EACpH,UAAU,kCAAU,KAAK,YAAY,2BAA2B,EAAE,aAAa,kBAAkB,QAAQ;AAAA,EACzG,WAAW,kCAAU,OAAO,YAAY,sBAAsB,EAAE,aAAa,kBAAkB,SAAS;AAAA,EACxG,kBAAkB,kCAAU,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,kCAAU,KAAK,YAAY,wBAAwB,EAAE,aAAa,kBAAkB,cAAc;AAAA,EAClH,UAAU,kCAAU,UAAU,CAAC,kCAAU,MAAM,kCAAU,MAAM,EAAE,SAAS,kCAAU,IAAI,CAAC,CAAC,CAAC,EAAE;AAAA,IAC3F;AAAA,EACF;AACF;",
+  "sourcesContent": ["import type React from 'react';\nimport { PropTypes } from '@elliemae/ds-props-helpers';\nimport { noop } from 'lodash';\nimport { Comments, type SvgIconT } from '@elliemae/ds-icons';\n\nexport declare namespace DSChatTileT {\n  type TooltipPlacementT =\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  export interface DefaultProps {\n    Icon: React.ComponentType<SvgIconT.Props>;\n    dsId: string | number;\n    label: string;\n    onClick: (dsId: string | number, label: string) => void;\n    title: string;\n    showClose: boolean;\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: TooltipPlacementT;\n    disableTooltip: boolean;\n  }\n\n  export interface OptionalProps {\n    onBlur?: (e: React.ChangeEvent<HTMLButtonElement>) => void;\n    onFocus?: (e: React.ChangeEvent<HTMLButtonElement>) => void;\n    onClose?: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;\n    innerRef?: React.MutableRefObject<HTMLButtonElement> | ((_ref: HTMLButtonElement) => void);\n  }\n\n  export interface Props extends Partial<DefaultProps>, OptionalProps {}\n\n  export interface InternalProps extends DefaultProps, OptionalProps {}\n}\n\nexport const defaultTileButton: DSChatTileT.DefaultProps = {\n  Icon: Comments,\n  dsId: '',\n  label: '',\n  onClick: noop,\n  title: '',\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};\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'),\n  onBlur: PropTypes.func.description('The function to call when is on blur'),\n  onClose: PropTypes.func\n    .description('The function to call when the X is Clicked')\n    .deprecated({ version: '4.x', message: 'use Menu and menuProps instead' }),\n  showClose: PropTypes.bool\n    .description('It will display the X')\n    .defaultValue(defaultTileButton.showClose)\n    .deprecated({ version: '4.x', message: 'use Menu and menuProps instead' }),\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,8BAA0B;AAC1B,oBAAqB;AACrB,sBAAwC;AA+CjC,MAAM,oBAA8C;AAAA,EACzD,MAAM;AAAA,EACN,MAAM;AAAA,EACN,OAAO;AAAA,EACP,SAAS;AAAA,EACT,OAAO;AAAA,EACP,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;AAClB;AAEO,MAAM,kBAAkB;AAAA,EAC7B,MAAM,kCAAU,KAAK,YAAY,gBAAgB,EAAE,aAAa,kBAAkB,IAAI;AAAA,EACtF,MAAM,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,MAAM,CAAC,EAC3D,YAAY,0BAA0B,EACtC,aAAa,kBAAkB,IAAI;AAAA,EACtC,OAAO,kCAAU,OAAO,YAAY,gCAAgC,EAAE,aAAa,kBAAkB,KAAK;AAAA,EAC1G,OAAO,kCAAU,OAAO,YAAY,SAAS,EAAE,aAAa,kBAAkB,KAAK;AAAA,EACnF,SAAS,kCAAU,KAAK,YAAY,sCAAsC,EAAE,aAAa,kBAAkB,OAAO;AAAA,EAClH,SAAS,kCAAU,KAAK,YAAY,sCAAsC;AAAA,EAC1E,QAAQ,kCAAU,KAAK,YAAY,sCAAsC;AAAA,EACzE,SAAS,kCAAU,KAChB,YAAY,4CAA4C,EACxD,WAAW,EAAE,SAAS,OAAO,SAAS,iCAAiC,CAAC;AAAA,EAC3E,WAAW,kCAAU,KAClB,YAAY,uBAAuB,EACnC,aAAa,kBAAkB,SAAS,EACxC,WAAW,EAAE,SAAS,OAAO,SAAS,iCAAiC,CAAC;AAAA,EAC3E,OAAO,kCAAU,KAAK,YAAY,2BAA2B,EAAE,aAAa,kBAAkB,KAAK;AAAA,EACnG,YAAY,kCAAU,MAAM,CAAC,QAAQ,OAAO,CAAC,EAC1C,YAAY,4BAA4B,EACxC,aAAa,kBAAkB,UAAU;AAAA,EAC5C,eAAe,kCAAU,MAAM,CAAC,QAAQ,OAAO,CAAC,EAC7C,YAAY,4BAA4B,EACxC,aAAa,kBAAkB,aAAa;AAAA,EAC/C,UAAU,kCAAU,KAAK,YAAY,6BAA6B,EAAE,aAAa,kBAAkB,QAAQ;AAAA,EAC3G,UAAU,kCAAU,KAAK,YAAY,sCAAsC,EAAE,aAAa,kBAAkB,QAAQ;AAAA,EACpH,UAAU,kCAAU,KAAK,YAAY,2BAA2B,EAAE,aAAa,kBAAkB,QAAQ;AAAA,EACzG,WAAW,kCAAU,OAAO,YAAY,sBAAsB,EAAE,aAAa,kBAAkB,SAAS;AAAA,EACxG,kBAAkB,kCAAU,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,kCAAU,KAAK,YAAY,wBAAwB,EAAE,aAAa,kBAAkB,cAAc;AAAA,EAClH,UAAU,kCAAU,UAAU,CAAC,kCAAU,MAAM,kCAAU,MAAM,EAAE,SAAS,kCAAU,IAAI,CAAC,CAAC,CAAC,EAAE;AAAA,IAC3F;AAAA,EACF;AACF;",
   "names": []
 }

package/dist/cjs/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/styled.ts", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable indent */\n/* eslint-disable max-lines */\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport type { DSChatTileT } from './react-desc-prop-types.js';\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: 2px solid ${(props) => props.theme.colors.neutral['050']};\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  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[600]};\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  svg {\n    fill: #000000;\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: ${(props) => props.theme.colors.neutral['050']};\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    }\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 `\n        & ${StyledWrapperLeftBorder} {\n          background: ${props.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"],
+  "sourcesContent": ["/* eslint-disable indent */\n/* eslint-disable max-lines */\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport type { DSChatTileT } from './react-desc-prop-types.js';\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<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: 2px solid ${(props) => props.theme.colors.neutral['050']};\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  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[600]};\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  svg {\n    fill: #000000;\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: ${(props) => props.theme.colors.neutral['050']};\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    }\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 `\n        & ${StyledWrapperLeftBorder} {\n          background: ${props.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/cjs/typescript-testing/typescript-chat-card-valid.js

@@ -0,0 +1,168 @@
+"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 __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(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_lodash = require("lodash");
+var import__ = require("../index.js");
+var import_ds_icons = require("@elliemae/ds-icons");
+const ref = (0, import_react.createRef)();
+const testOptionalProps = {
+  onBlur: import_lodash.noop,
+  onFocus: import_lodash.noop,
+  onClose: import_lodash.noop,
+  innerRef: ref
+};
+const testPartialDefaults = {
+  Icon: import_ds_icons.Comments,
+  dsId: "id-1",
+  label: "AB",
+  title: "Title"
+};
+const testProps = {
+  ...testOptionalProps,
+  ...testPartialDefaults
+};
+const testPropsAsSyntax = {
+  ...testOptionalProps,
+  ...testPartialDefaults
+};
+const testCompleteDefaults = {
+  Icon: import_ds_icons.Comments,
+  dsId: "id-1",
+  label: "AB",
+  onClick: import_lodash.noop,
+  title: "Title",
+  showClose: false,
+  badge: false,
+  badgeColor: "blue",
+  badgePosition: "right",
+  disabled: false,
+  selected: false,
+  isHeader: false,
+  ariaLabel: "Tile button",
+  tooltipPlacement: "top",
+  disableTooltip: false
+};
+const testInternalProps = {
+  ...testOptionalProps,
+  ...testCompleteDefaults
+};
+const testInternalPropsAsSyntax = {
+  ...testOptionalProps,
+  ...testCompleteDefaults
+};
+const testExplicitDefinition = {
+  Icon: import_ds_icons.Comments,
+  dsId: "id-1",
+  label: "AB",
+  onClick: import_lodash.noop,
+  title: "Title",
+  showClose: false,
+  badge: false,
+  badgeColor: "blue",
+  badgePosition: "right",
+  disabled: false,
+  selected: false,
+  isHeader: false,
+  ariaLabel: "Tile button",
+  tooltipPlacement: "top",
+  disableTooltip: false,
+  onBlur: import_lodash.noop,
+  onFocus: import_lodash.noop,
+  onClose: import_lodash.noop,
+  innerRef: ref
+};
+const testInferedTypeCompatibility = {
+  Icon: import_ds_icons.Comments,
+  dsId: "id-1",
+  label: "AB",
+  onClick: import_lodash.noop,
+  title: "Title",
+  showClose: false,
+  badge: false,
+  badgeColor: "blue",
+  badgePosition: "right",
+  disabled: false,
+  selected: false,
+  isHeader: false,
+  ariaLabel: "Tile button",
+  tooltipPlacement: "top",
+  disableTooltip: false,
+  onBlur: import_lodash.noop,
+  onFocus: import_lodash.noop,
+  onClose: import_lodash.noop,
+  innerRef: ref
+};
+const testDefinitionAsConst = {
+  Icon: import_ds_icons.Comments,
+  dsId: "id-1",
+  label: "AB",
+  onClick: import_lodash.noop,
+  title: "Title",
+  showClose: false,
+  badge: false,
+  badgeColor: "blue",
+  badgePosition: "right",
+  disabled: false,
+  selected: false,
+  isHeader: false,
+  ariaLabel: "Tile button",
+  tooltipPlacement: "top",
+  disableTooltip: false,
+  onBlur: import_lodash.noop,
+  onFocus: import_lodash.noop,
+  onClose: import_lodash.noop,
+  innerRef: ref
+};
+const ExampleUsageComponent = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.TileButton, { ...testExplicitDefinition }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.TileButton, { ...testInferedTypeCompatibility }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.TileButton, { ...testDefinitionAsConst }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import__.TileButton,
+    {
+      Icon: import_ds_icons.Comments,
+      dsId: "id-1",
+      label: "AB",
+      onClick: import_lodash.noop,
+      title: "Title",
+      showClose: false,
+      badge: false,
+      badgeColor: "blue",
+      badgePosition: "right",
+      disabled: false,
+      selected: false,
+      isHeader: false,
+      ariaLabel: "Tile button",
+      tooltipPlacement: "top",
+      disableTooltip: false,
+      onBlur: import_lodash.noop,
+      onFocus: import_lodash.noop,
+      onClose: import_lodash.noop,
+      innerRef: ref
+    }
+  )
+] });
+//# sourceMappingURL=typescript-chat-card-valid.js.map

package/dist/cjs/typescript-testing/typescript-chat-card-valid.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-chat-card-valid.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { createRef } from 'react';\nimport { noop } from 'lodash';\nimport { TileButton } from '../index.js';\nimport { Comments } from '@elliemae/ds-icons';\nimport type { DSChatTileT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSChatTileT.Props;\ntype ComponentPropsInternals = DSChatTileT.InternalProps;\ntype ComponentPropsDefaultProps = DSChatTileT.DefaultProps;\ntype ComponentPropsOptionalProps = DSChatTileT.OptionalProps;\n\nconst ref = createRef() as React.MutableRefObject<HTMLButtonElement> | ((_ref: HTMLButtonElement) => void);\n\nconst testOptionalProps: ComponentPropsOptionalProps = {\n  onBlur: noop,\n  onFocus: noop,\n  onClose: noop,\n  innerRef: ref,\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n  Icon: Comments,\n  dsId: 'id-1',\n  label: 'AB',\n  title: 'Title',\n};\n\nconst testProps: ComponentPropsForApp = {\n  ...testOptionalProps,\n  ...testPartialDefaults,\n};\n\nconst testPropsAsSyntax = {\n  ...testOptionalProps,\n  ...testPartialDefaults,\n} as ComponentPropsForApp;\n\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n  Icon: Comments,\n  dsId: 'id-1',\n  label: 'AB',\n  onClick: noop,\n  title: 'Title',\n  showClose: false,\n  badge: false,\n  badgeColor: 'blue',\n  badgePosition: 'right',\n  disabled: false,\n  selected: false,\n  isHeader: false,\n  ariaLabel: 'Tile button',\n  tooltipPlacement: 'top',\n  disableTooltip: false,\n};\n\nconst testInternalProps: ComponentPropsInternals = {\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n};\n\nconst testInternalPropsAsSyntax = {\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n  Icon: Comments,\n  dsId: 'id-1',\n  label: 'AB',\n  onClick: noop,\n  title: 'Title',\n  showClose: false,\n  badge: false,\n  badgeColor: 'blue',\n  badgePosition: 'right',\n  disabled: false,\n  selected: false,\n  isHeader: false,\n  ariaLabel: 'Tile button',\n  tooltipPlacement: 'top',\n  disableTooltip: false,\n  onBlur: noop,\n  onFocus: noop,\n  onClose: noop,\n  innerRef: ref,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n  Icon: Comments,\n  dsId: 'id-1',\n  label: 'AB',\n  onClick: noop,\n  title: 'Title',\n  showClose: false,\n  badge: false,\n  badgeColor: 'blue',\n  badgePosition: 'right',\n  disabled: false,\n  selected: false,\n  isHeader: false,\n  ariaLabel: 'Tile button',\n  tooltipPlacement: 'top',\n  disableTooltip: false,\n  onBlur: noop,\n  onFocus: noop,\n  onClose: noop,\n  innerRef: ref,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n  Icon: Comments,\n  dsId: 'id-1',\n  label: 'AB',\n  onClick: noop,\n  title: 'Title',\n  showClose: false,\n  badge: false,\n  badgeColor: 'blue',\n  badgePosition: 'right',\n  disabled: false,\n  selected: false,\n  isHeader: false,\n  ariaLabel: 'Tile button',\n  tooltipPlacement: 'top',\n  disableTooltip: false,\n  onBlur: noop,\n  onFocus: noop,\n  onClose: noop,\n  innerRef: ref,\n} as const;\n\nconst ExampleUsageComponent = () => (\n  <>\n    {/* works with explicitly casted props, all syntaxes */}\n    <TileButton {...testExplicitDefinition} />\n    <TileButton {...testInferedTypeCompatibility} />\n    <TileButton {...testDefinitionAsConst} />\n    {/* works with inline values */}\n    <TileButton\n      Icon={Comments}\n      dsId=\"id-1\"\n      label=\"AB\"\n      onClick={noop}\n      title=\"Title\"\n      showClose={false}\n      badge={false}\n      badgeColor=\"blue\"\n      badgePosition=\"right\"\n      disabled={false}\n      selected={false}\n      isHeader={false}\n      ariaLabel=\"Tile button\"\n      tooltipPlacement=\"top\"\n      disableTooltip={false}\n      onBlur={noop}\n      onFocus={noop}\n      onClose={noop}\n      innerRef={ref}\n    />\n  </>\n);\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/esm/TileButton.js.map

@@ -1,7 +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 type { WeakValidationMap } from 'react';\nimport React from 'react';\nimport { describe, useValidateTypescriptPropTypes, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\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.js';\nimport type { DSChatTileT } from './react-desc-prop-types.js';\nimport { propsTileButton, defaultTileButton } from './react-desc-prop-types.js';\nimport { DSChatTileButtonName } from './DSChatTileButtonDefinitions.js';\n\nconst TileButton: React.ComponentType<DSChatTileT.Props> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultTileButton);\n  useValidateTypescriptPropTypes(propsWithDefault, propsTileButton, DSChatTileButtonName);\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        innerRef={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}`} aria-label=\"close\">\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 = DSChatTileButtonName;\nconst TileButtonWithSchema = describe(TileButton);\nTileButtonWithSchema.propTypes = propsTileButton as WeakValidationMap<unknown>;\n\nexport { TileButton, TileButtonWithSchema };\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACuDb,SACE,KADF;AArDV,OAAOA,YAAW;AAClB,SAAS,UAAU,gCAAgC,oCAAoC;AACvF,SAAS,mBAAmB;AAC5B,SAAS,YAAY;AACrB,SAAS,mBAAmB;AAC5B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,iBAAiB,yBAAyB;AACnD,SAAS,4BAA4B;AAErC,MAAM,aAAqD,CAAC,UAAU;AACpE,QAAM,mBAAmB,6BAA6B,OAAO,iBAAiB;AAC9E,iCAA+B,kBAAkB,iBAAiB,oBAAoB;AAEtF,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,cAAcA,OAAM,YAAY,MAAM;AAC1C,YAAQ,MAAM,KAAK;AAAA,EACrB,GAAG,CAAC,MAAM,SAAS,KAAK,CAAC;AAEzB,QAAM,cAAcA,OAAM;AAAA,IACxB,MACE,qBAAC,+BAA4B,YAAY,WAAW,WAAW,QAC7D;AAAA,0BAAC,QAAK,OAAM,QAAO,YAAW,UAAS,gBAAe,UACpD,+BAAC,wBAAqB,YAAW,UAAS,gBAAe,UACvD;AAAA,4BAAC,QAAK,MAAK,KAAI;AAAA,QACd,QACC;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA,eAAa,cAAc;AAAA;AAAA,QAC7B,IACE;AAAA,SACN,GACF;AAAA,MACC,CAAC,WACA,oBAAC,QAAK,OAAM,QAAO,gBAAe,UAC/B,kBAAQ,oBAAC,yBAAuB,iBAAM,IAA2B,MACpE,IACE;AAAA,OACN;AAAA,IAEF,CAAC,UAAU,MAAM,OAAO,MAAM,YAAY,eAAe,KAAK;AAAA,EAChE;AAEA,QAAM,MAAMA,OAAM;AAAA,IAChB,MACE;AAAA,MAAC;AAAA;AAAA,QAEC;AAAA,QACA,OAAO;AAAA,QACP,eAAa,eAAe;AAAA,QAC5B,YAAU;AAAA,QACV,SAAS;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,gBAAc;AAAA,QACd,cAAY;AAAA,QACZ;AAAA,QAEA,+BAAC,iBAAc,YAAW,UAAS,gBAAe,UAChD;AAAA,8BAAC,UAAM,uBAAY;AAAA,UACnB,oBAAC,2BAAwB;AAAA,UACxB,aAAa,CAAC,WACb,oBAAC,eAAY,SAAS,SAAS,OAAO,MAAM,eAAa,kBAAkB,QAAQ,cAAW,SAC5F,8BAAC,eAAY,GACf,IACE;AAAA,WACN;AAAA;AAAA,MAxBK;AAAA,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,oBAAC,gCACC,8BAAC,eAAY,IAAI,+BAA+B,QAAQ,MAAM,OAAO,0BAA0B,kBAC5F,eACH,GACF,IAEA;AAEJ;AAEA,WAAW,YAAY;AACvB,WAAW,cAAc;AACzB,MAAM,uBAAuB,SAAS,UAAU;AAChD,qBAAqB,YAAY;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport type { WeakValidationMap } from 'react';\nimport React from 'react';\nimport { describe, useValidateTypescriptPropTypes, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\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.js';\nimport type { DSChatTileT } from './react-desc-prop-types.js';\nimport { propsTileButton, defaultTileButton } from './react-desc-prop-types.js';\nimport { DSChatTileButtonName } from './DSChatTileButtonDefinitions.js';\n\nconst TileButton: React.ComponentType<DSChatTileT.Props> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault<DSChatTileT.InternalProps>(props, defaultTileButton);\n  useValidateTypescriptPropTypes(propsWithDefault, propsTileButton, DSChatTileButtonName);\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\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        innerRef={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}`} aria-label=\"close\">\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 = DSChatTileButtonName;\nconst TileButtonWithSchema = describe(TileButton);\nTileButtonWithSchema.propTypes = propsTileButton as WeakValidationMap<unknown>;\n\nexport { TileButton, TileButtonWithSchema };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACwDb,SACE,KADF;AAtDV,OAAOA,YAAW;AAClB,SAAS,UAAU,gCAAgC,oCAAoC;AACvF,SAAS,mBAAmB;AAC5B,SAAS,YAAY;AACrB,SAAS,mBAAmB;AAC5B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,iBAAiB,yBAAyB;AACnD,SAAS,4BAA4B;AAErC,MAAM,aAAqD,CAAC,UAAU;AACpE,QAAM,mBAAmB,6BAAwD,OAAO,iBAAiB;AACzG,iCAA+B,kBAAkB,iBAAiB,oBAAoB;AAEtF,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;AAEJ,QAAM,cAAcA,OAAM,YAAY,MAAM;AAC1C,YAAQ,MAAM,KAAK;AAAA,EACrB,GAAG,CAAC,MAAM,SAAS,KAAK,CAAC;AAEzB,QAAM,cAAcA,OAAM;AAAA,IACxB,MACE,qBAAC,+BAA4B,YAAY,WAAW,WAAW,QAC7D;AAAA,0BAAC,QAAK,OAAM,QAAO,YAAW,UAAS,gBAAe,UACpD,+BAAC,wBAAqB,YAAW,UAAS,gBAAe,UACvD;AAAA,4BAAC,QAAK,MAAK,KAAI;AAAA,QACd,QACC;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA,eAAa,cAAc;AAAA;AAAA,QAC7B,IACE;AAAA,SACN,GACF;AAAA,MACC,CAAC,WACA,oBAAC,QAAK,OAAM,QAAO,gBAAe,UAC/B,kBAAQ,oBAAC,yBAAuB,iBAAM,IAA2B,MACpE,IACE;AAAA,OACN;AAAA,IAEF,CAAC,UAAU,MAAM,OAAO,MAAM,YAAY,eAAe,KAAK;AAAA,EAChE;AAEA,QAAM,MAAMA,OAAM;AAAA,IAChB,MACE;AAAA,MAAC;AAAA;AAAA,QAEC;AAAA,QACA,OAAO;AAAA,QACP,eAAa,eAAe;AAAA,QAC5B,YAAU;AAAA,QACV,SAAS;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,gBAAc;AAAA,QACd,cAAY;AAAA,QACZ;AAAA,QAEA,+BAAC,iBAAc,YAAW,UAAS,gBAAe,UAChD;AAAA,8BAAC,UAAM,uBAAY;AAAA,UACnB,oBAAC,2BAAwB;AAAA,UACxB,aAAa,CAAC,WACb,oBAAC,eAAY,SAAS,SAAS,OAAO,MAAM,eAAa,kBAAkB,QAAQ,cAAW,SAC5F,8BAAC,eAAY,GACf,IACE;AAAA,WACN;AAAA;AAAA,MAxBK;AAAA,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,oBAAC,gCACC,8BAAC,eAAY,IAAI,+BAA+B,QAAQ,MAAM,OAAO,0BAA0B,kBAC5F,eACH,GACF,IAEA;AAEJ;AAEA,WAAW,YAAY;AACvB,WAAW,cAAc;AACzB,MAAM,uBAAuB,SAAS,UAAU;AAChD,qBAAqB,YAAY;",
   "names": ["React"]
 }

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

@@ -7,10 +7,7 @@ const defaultTileButton = {
   dsId: "",
   label: "",
   onClick: noop,
-  onBlur: noop,
-  onFocus: noop,
   title: "",
-  onClose: noop,
   showClose: false,
   badge: false,
   badgeColor: "blue",
@@ -20,8 +17,7 @@ const defaultTileButton = {
   isHeader: false,
   ariaLabel: "Tile button",
   tooltipPlacement: "right",
-  disableTooltip: false,
-  innerRef: noop
+  disableTooltip: false
 };
 const propsTileButton = {
   Icon: PropTypes.func.description("Icon component").defaultValue(defaultTileButton.Icon),
@@ -29,9 +25,9 @@ const propsTileButton = {
   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).deprecated({ version: "4.x", message: "use Menu and menuProps instead" }),
+  onFocus: PropTypes.func.description("The function to call when is focused"),
+  onBlur: PropTypes.func.description("The function to call when is on blur"),
+  onClose: PropTypes.func.description("The function to call when the X is Clicked").deprecated({ version: "4.x", message: "use Menu and menuProps instead" }),
   showClose: PropTypes.bool.description("It will display the X").defaultValue(defaultTileButton.showClose).deprecated({ version: "4.x", message: "use Menu and menuProps instead" }),
   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),

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

@@ -1,7 +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 type React from 'react';\nimport { PropTypes } from '@elliemae/ds-props-helpers';\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    .deprecated({ version: '4.x', message: 'use Menu and menuProps instead' }),\n  showClose: PropTypes.bool\n    .description('It will display the X')\n    .defaultValue(defaultTileButton.showClose)\n    .deprecated({ version: '4.x', message: 'use Menu and menuProps instead' }),\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,EACtC,WAAW,EAAE,SAAS,OAAO,SAAS,iCAAiC,CAAC;AAAA,EAC3E,WAAW,UAAU,KAClB,YAAY,uBAAuB,EACnC,aAAa,kBAAkB,SAAS,EACxC,WAAW,EAAE,SAAS,OAAO,SAAS,iCAAiC,CAAC;AAAA,EAC3E,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;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport { PropTypes } from '@elliemae/ds-props-helpers';\nimport { noop } from 'lodash';\nimport { Comments, type SvgIconT } from '@elliemae/ds-icons';\n\nexport declare namespace DSChatTileT {\n  type TooltipPlacementT =\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  export interface DefaultProps {\n    Icon: React.ComponentType<SvgIconT.Props>;\n    dsId: string | number;\n    label: string;\n    onClick: (dsId: string | number, label: string) => void;\n    title: string;\n    showClose: boolean;\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: TooltipPlacementT;\n    disableTooltip: boolean;\n  }\n\n  export interface OptionalProps {\n    onBlur?: (e: React.ChangeEvent<HTMLButtonElement>) => void;\n    onFocus?: (e: React.ChangeEvent<HTMLButtonElement>) => void;\n    onClose?: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;\n    innerRef?: React.MutableRefObject<HTMLButtonElement> | ((_ref: HTMLButtonElement) => void);\n  }\n\n  export interface Props extends Partial<DefaultProps>, OptionalProps {}\n\n  export interface InternalProps extends DefaultProps, OptionalProps {}\n}\n\nexport const defaultTileButton: DSChatTileT.DefaultProps = {\n  Icon: Comments,\n  dsId: '',\n  label: '',\n  onClick: noop,\n  title: '',\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};\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'),\n  onBlur: PropTypes.func.description('The function to call when is on blur'),\n  onClose: PropTypes.func\n    .description('The function to call when the X is Clicked')\n    .deprecated({ version: '4.x', message: 'use Menu and menuProps instead' }),\n  showClose: PropTypes.bool\n    .description('It will display the X')\n    .defaultValue(defaultTileButton.showClose)\n    .deprecated({ version: '4.x', message: 'use Menu and menuProps instead' }),\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,gBAA+B;AA+CjC,MAAM,oBAA8C;AAAA,EACzD,MAAM;AAAA,EACN,MAAM;AAAA,EACN,OAAO;AAAA,EACP,SAAS;AAAA,EACT,OAAO;AAAA,EACP,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;AAClB;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;AAAA,EAC1E,QAAQ,UAAU,KAAK,YAAY,sCAAsC;AAAA,EACzE,SAAS,UAAU,KAChB,YAAY,4CAA4C,EACxD,WAAW,EAAE,SAAS,OAAO,SAAS,iCAAiC,CAAC;AAAA,EAC3E,WAAW,UAAU,KAClB,YAAY,uBAAuB,EACnC,aAAa,kBAAkB,SAAS,EACxC,WAAW,EAAE,SAAS,OAAO,SAAS,iCAAiC,CAAC;AAAA,EAC3E,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.map

@@ -1,7 +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 { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport type { DSChatTileT } from './react-desc-prop-types.js';\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: 2px solid ${(props) => props.theme.colors.neutral['050']};\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  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[600]};\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  svg {\n    fill: #000000;\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: ${(props) => props.theme.colors.neutral['050']};\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    }\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 `\n        & ${StyledWrapperLeftBorder} {\n          background: ${props.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"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\n/* eslint-disable max-lines */\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport type { DSChatTileT } from './react-desc-prop-types.js';\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<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: 2px solid ${(props) => props.theme.colors.neutral['050']};\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  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[600]};\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  svg {\n    fill: #000000;\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: ${(props) => props.theme.colors.neutral['050']};\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    }\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 `\n        & ${StyledWrapperLeftBorder} {\n          background: ${props.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/dist/esm/typescript-testing/typescript-chat-card-valid.js

@@ -0,0 +1,145 @@
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createRef } from "react";
+import { noop } from "lodash";
+import { TileButton } from "../index.js";
+import { Comments } from "@elliemae/ds-icons";
+const ref = createRef();
+const testOptionalProps = {
+  onBlur: noop,
+  onFocus: noop,
+  onClose: noop,
+  innerRef: ref
+};
+const testPartialDefaults = {
+  Icon: Comments,
+  dsId: "id-1",
+  label: "AB",
+  title: "Title"
+};
+const testProps = {
+  ...testOptionalProps,
+  ...testPartialDefaults
+};
+const testPropsAsSyntax = {
+  ...testOptionalProps,
+  ...testPartialDefaults
+};
+const testCompleteDefaults = {
+  Icon: Comments,
+  dsId: "id-1",
+  label: "AB",
+  onClick: noop,
+  title: "Title",
+  showClose: false,
+  badge: false,
+  badgeColor: "blue",
+  badgePosition: "right",
+  disabled: false,
+  selected: false,
+  isHeader: false,
+  ariaLabel: "Tile button",
+  tooltipPlacement: "top",
+  disableTooltip: false
+};
+const testInternalProps = {
+  ...testOptionalProps,
+  ...testCompleteDefaults
+};
+const testInternalPropsAsSyntax = {
+  ...testOptionalProps,
+  ...testCompleteDefaults
+};
+const testExplicitDefinition = {
+  Icon: Comments,
+  dsId: "id-1",
+  label: "AB",
+  onClick: noop,
+  title: "Title",
+  showClose: false,
+  badge: false,
+  badgeColor: "blue",
+  badgePosition: "right",
+  disabled: false,
+  selected: false,
+  isHeader: false,
+  ariaLabel: "Tile button",
+  tooltipPlacement: "top",
+  disableTooltip: false,
+  onBlur: noop,
+  onFocus: noop,
+  onClose: noop,
+  innerRef: ref
+};
+const testInferedTypeCompatibility = {
+  Icon: Comments,
+  dsId: "id-1",
+  label: "AB",
+  onClick: noop,
+  title: "Title",
+  showClose: false,
+  badge: false,
+  badgeColor: "blue",
+  badgePosition: "right",
+  disabled: false,
+  selected: false,
+  isHeader: false,
+  ariaLabel: "Tile button",
+  tooltipPlacement: "top",
+  disableTooltip: false,
+  onBlur: noop,
+  onFocus: noop,
+  onClose: noop,
+  innerRef: ref
+};
+const testDefinitionAsConst = {
+  Icon: Comments,
+  dsId: "id-1",
+  label: "AB",
+  onClick: noop,
+  title: "Title",
+  showClose: false,
+  badge: false,
+  badgeColor: "blue",
+  badgePosition: "right",
+  disabled: false,
+  selected: false,
+  isHeader: false,
+  ariaLabel: "Tile button",
+  tooltipPlacement: "top",
+  disableTooltip: false,
+  onBlur: noop,
+  onFocus: noop,
+  onClose: noop,
+  innerRef: ref
+};
+const ExampleUsageComponent = () => /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx(TileButton, { ...testExplicitDefinition }),
+  /* @__PURE__ */ jsx(TileButton, { ...testInferedTypeCompatibility }),
+  /* @__PURE__ */ jsx(TileButton, { ...testDefinitionAsConst }),
+  /* @__PURE__ */ jsx(
+    TileButton,
+    {
+      Icon: Comments,
+      dsId: "id-1",
+      label: "AB",
+      onClick: noop,
+      title: "Title",
+      showClose: false,
+      badge: false,
+      badgeColor: "blue",
+      badgePosition: "right",
+      disabled: false,
+      selected: false,
+      isHeader: false,
+      ariaLabel: "Tile button",
+      tooltipPlacement: "top",
+      disableTooltip: false,
+      onBlur: noop,
+      onFocus: noop,
+      onClose: noop,
+      innerRef: ref
+    }
+  )
+] });
+//# sourceMappingURL=typescript-chat-card-valid.js.map

package/dist/esm/typescript-testing/typescript-chat-card-valid.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-chat-card-valid.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { createRef } from 'react';\nimport { noop } from 'lodash';\nimport { TileButton } from '../index.js';\nimport { Comments } from '@elliemae/ds-icons';\nimport type { DSChatTileT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSChatTileT.Props;\ntype ComponentPropsInternals = DSChatTileT.InternalProps;\ntype ComponentPropsDefaultProps = DSChatTileT.DefaultProps;\ntype ComponentPropsOptionalProps = DSChatTileT.OptionalProps;\n\nconst ref = createRef() as React.MutableRefObject<HTMLButtonElement> | ((_ref: HTMLButtonElement) => void);\n\nconst testOptionalProps: ComponentPropsOptionalProps = {\n  onBlur: noop,\n  onFocus: noop,\n  onClose: noop,\n  innerRef: ref,\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n  Icon: Comments,\n  dsId: 'id-1',\n  label: 'AB',\n  title: 'Title',\n};\n\nconst testProps: ComponentPropsForApp = {\n  ...testOptionalProps,\n  ...testPartialDefaults,\n};\n\nconst testPropsAsSyntax = {\n  ...testOptionalProps,\n  ...testPartialDefaults,\n} as ComponentPropsForApp;\n\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n  Icon: Comments,\n  dsId: 'id-1',\n  label: 'AB',\n  onClick: noop,\n  title: 'Title',\n  showClose: false,\n  badge: false,\n  badgeColor: 'blue',\n  badgePosition: 'right',\n  disabled: false,\n  selected: false,\n  isHeader: false,\n  ariaLabel: 'Tile button',\n  tooltipPlacement: 'top',\n  disableTooltip: false,\n};\n\nconst testInternalProps: ComponentPropsInternals = {\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n};\n\nconst testInternalPropsAsSyntax = {\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n  Icon: Comments,\n  dsId: 'id-1',\n  label: 'AB',\n  onClick: noop,\n  title: 'Title',\n  showClose: false,\n  badge: false,\n  badgeColor: 'blue',\n  badgePosition: 'right',\n  disabled: false,\n  selected: false,\n  isHeader: false,\n  ariaLabel: 'Tile button',\n  tooltipPlacement: 'top',\n  disableTooltip: false,\n  onBlur: noop,\n  onFocus: noop,\n  onClose: noop,\n  innerRef: ref,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n  Icon: Comments,\n  dsId: 'id-1',\n  label: 'AB',\n  onClick: noop,\n  title: 'Title',\n  showClose: false,\n  badge: false,\n  badgeColor: 'blue',\n  badgePosition: 'right',\n  disabled: false,\n  selected: false,\n  isHeader: false,\n  ariaLabel: 'Tile button',\n  tooltipPlacement: 'top',\n  disableTooltip: false,\n  onBlur: noop,\n  onFocus: noop,\n  onClose: noop,\n  innerRef: ref,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n  Icon: Comments,\n  dsId: 'id-1',\n  label: 'AB',\n  onClick: noop,\n  title: 'Title',\n  showClose: false,\n  badge: false,\n  badgeColor: 'blue',\n  badgePosition: 'right',\n  disabled: false,\n  selected: false,\n  isHeader: false,\n  ariaLabel: 'Tile button',\n  tooltipPlacement: 'top',\n  disableTooltip: false,\n  onBlur: noop,\n  onFocus: noop,\n  onClose: noop,\n  innerRef: ref,\n} as const;\n\nconst ExampleUsageComponent = () => (\n  <>\n    {/* works with explicitly casted props, all syntaxes */}\n    <TileButton {...testExplicitDefinition} />\n    <TileButton {...testInferedTypeCompatibility} />\n    <TileButton {...testDefinitionAsConst} />\n    {/* works with inline values */}\n    <TileButton\n      Icon={Comments}\n      dsId=\"id-1\"\n      label=\"AB\"\n      onClick={noop}\n      title=\"Title\"\n      showClose={false}\n      badge={false}\n      badgeColor=\"blue\"\n      badgePosition=\"right\"\n      disabled={false}\n      selected={false}\n      isHeader={false}\n      ariaLabel=\"Tile button\"\n      tooltipPlacement=\"top\"\n      disableTooltip={false}\n      onBlur={noop}\n      onFocus={noop}\n      onClose={noop}\n      innerRef={ref}\n    />\n  </>\n);\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/types/react-desc-prop-types.d.ts

@@ -1,17 +1,14 @@
 import type React from 'react';
+import { type SvgIconT } from '@elliemae/ds-icons';
 export declare namespace DSChatTileT {
-    interface Props {
-        Icon: React.FC<{
-            size: string;
-        }>;
+    type TooltipPlacementT = 'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-end' | 'bottom' | 'bottom-start' | 'left-end' | 'left' | 'left-start';
+    interface DefaultProps {
+        Icon: React.ComponentType<SvgIconT.Props>;
         dsId: string | number;
         label: string;
-        onClick?: (dsId: string | number, label: string) => void;
-        onBlur?: (e: React.ChangeEvent<HTMLButtonElement>) => void;
-        onFocus?: (e: React.ChangeEvent<HTMLButtonElement>) => void;
+        onClick: (dsId: string | number, label: string) => void;
         title: string;
         showClose: boolean;
-        onClose?: (dsId: string | number) => void;
         badge: boolean;
         badgeColor: 'blue' | 'green';
         badgePosition: 'left' | 'right';
@@ -19,12 +16,21 @@ export declare namespace DSChatTileT {
         selected: boolean;
         isHeader: boolean;
         ariaLabel: string;
-        tooltipPlacement: 'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-end' | 'bottom' | 'bottom-start' | 'left-end' | 'left' | 'left-start';
+        tooltipPlacement: TooltipPlacementT;
         disableTooltip: boolean;
+    }
+    interface OptionalProps {
+        onBlur?: (e: React.ChangeEvent<HTMLButtonElement>) => void;
+        onFocus?: (e: React.ChangeEvent<HTMLButtonElement>) => void;
+        onClose?: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
         innerRef?: React.MutableRefObject<HTMLButtonElement> | ((_ref: HTMLButtonElement) => void);
     }
+    interface Props extends Partial<DefaultProps>, OptionalProps {
+    }
+    interface InternalProps extends DefaultProps, OptionalProps {
+    }
 }
-export declare const defaultTileButton: DSChatTileT.Props;
+export declare const defaultTileButton: DSChatTileT.DefaultProps;
 export declare const propsTileButton: {
     Icon: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
     dsId: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;

package/dist/types/styled.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import type { DSChatTileT } from './react-desc-prop-types.js';
 export declare const StyledWrapperLeftBorder: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>>, never>;
-export declare const StyledStatusBadge: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, Partial<DSChatTileT.Props> & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
+export declare const StyledStatusBadge: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, DSChatTileT.Props & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
 export declare const StyledWrapperCentralContent: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>>, never>;
 export declare const StyledTileButtonIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>>, never>;
 export declare const StyledTileButtonLabel: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;

package/dist/types/typescript-testing/typescript-chat-card-valid.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-chat-tile",
-  "version": "3.28.1-rc.1",
+  "version": "3.29.0-next.0",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Chat Tile",
   "files": [
@@ -44,19 +44,19 @@
   },
   "publishConfig": {
     "access": "public",
-    "typeSafety": false
+    "typeSafety": true
   },
   "dependencies": {
-    "@elliemae/ds-grid": "3.28.1-rc.1",
-    "@elliemae/ds-icons": "3.28.1-rc.1",
-    "@elliemae/ds-props-helpers": "3.28.1-rc.1",
-    "@elliemae/ds-system": "3.28.1-rc.1",
-    "@elliemae/ds-tooltip": "3.28.1-rc.1"
+    "@elliemae/ds-grid": "3.29.0-next.0",
+    "@elliemae/ds-icons": "3.29.0-next.0",
+    "@elliemae/ds-props-helpers": "3.29.0-next.0",
+    "@elliemae/ds-system": "3.29.0-next.0",
+    "@elliemae/ds-tooltip": "3.29.0-next.0"
   },
   "devDependencies": {
     "@elliemae/pui-cli": "~9.0.0-next.31",
     "styled-components": "~5.3.9",
-    "@elliemae/ds-monorepo-devops": "3.28.1-rc.1"
+    "@elliemae/ds-monorepo-devops": "3.29.0-next.0"
   },
   "peerDependencies": {
     "lodash": "^4.17.21",