@transferwise/components 46.45.0 → 46.46.1

package/build/alert/Alert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.js","sources":["../../src/alert/Alert.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { useState, useRef, useEffect } from 'react';\n\nimport Body from '../body/Body';\nimport { Sentiment, Size, Typography, Variant } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport StatusIcon from '../statusIcon';\nimport Title from '../title/Title';\nimport { logActionRequired } from '../utilities';\n\nimport InlineMarkdown from './inlineMarkdown';\nimport { Action } from '../common/action/Action';\n\nexport type AlertAction = {\n  'aria-label'?: string;\n  href?: string;\n  target?: string;\n  text: React.ReactNode;\n  onClick?: () => void;\n};\n\n/** @deprecated Use `\"top\" | \"bottom\"` instead. */\ntype AlertTypeDeprecated = `${Sentiment.SUCCESS | Sentiment.INFO | Sentiment.ERROR}`;\ntype AlertTypeResolved = `${\n  | Sentiment.POSITIVE\n  | Sentiment.NEUTRAL\n  | Sentiment.WARNING\n  | Sentiment.NEGATIVE}`;\nexport type AlertType = AlertTypeResolved | AlertTypeDeprecated;\n\nexport enum AlertArrowPosition {\n  TOP_LEFT = 'up-left',\n  TOP = 'up-center',\n  TOP_RIGHT = 'up-right',\n  BOTTOM_LEFT = 'down-left',\n  BOTTOM = 'down-center',\n  BOTTOM_RIGHT = 'down-right',\n}\n\nexport interface AlertProps {\n  /** An optional call to action to sit under the main body of the alert. If your label is short, use aria-label to provide more context */\n  action?: AlertAction;\n  className?: string;\n  /** An optional icon. If not provided, we will default the icon to something appropriate for the type */\n  icon?: React.ReactNode;\n  /** Title for the alert component */\n  title?: string;\n  /** The main body of the alert. Accepts plain text and bold words specified with **double stars */\n  message?: string;\n  /** The presence of the onDismiss handler will trigger the visibility of the close button */\n  onDismiss?: React.MouseEventHandler<HTMLButtonElement>;\n  /** The type dictates which icon and colour will be used */\n  type?: AlertType;\n  variant?: `${Variant}`;\n  /** @deprecated Use `InlineAlert` instead. */\n  arrow?: `${AlertArrowPosition}`;\n  /** @deprecated Use `message` instead. Be aware `message` only accepts plain text or text with **bold** markdown. */\n  children?: React.ReactNode;\n  /** @deprecated Use `onDismiss` instead. */\n  dismissible?: boolean;\n  /** @deprecated Alert component doesn't support `size` anymore, please remove this prop. */\n  size?: `${Size}`;\n}\n\nfunction resolveType(type: AlertType): AlertTypeResolved {\n  switch (type) {\n    case 'success':\n      return 'positive';\n    case 'info':\n      return 'neutral';\n    case 'error':\n      return 'negative';\n    default:\n      return type;\n  }\n}\n\nexport default function Alert({\n  arrow,\n  action,\n  children,\n  className,\n  dismissible,\n  icon,\n  onDismiss,\n  message,\n  size,\n  title,\n  type = 'neutral',\n  variant = 'desktop',\n}: AlertProps) {\n  useEffect(() => {\n    if (arrow !== undefined) {\n      logActionRequired(\n        \"Alert component doesn't support 'arrow' anymore, use 'InlineAlert' instead.\",\n      );\n    }\n  }, [arrow]);\n\n  useEffect(() => {\n    if (children !== undefined) {\n      logActionRequired(\n        \"Alert component doesn't support 'children' anymore, use 'message' instead.\",\n      );\n    }\n  }, [children]);\n\n  useEffect(() => {\n    if (dismissible !== undefined) {\n      logActionRequired(\n        \"Alert component doesn't support 'dismissible' anymore, use 'onDismiss' instead.\",\n      );\n    }\n  }, [dismissible]);\n\n  useEffect(() => {\n    if (size !== undefined) {\n      logActionRequired(\"Alert component doesn't support 'size' anymore, please remove that prop.\");\n    }\n  }, [size]);\n\n  const resolvedType = resolveType(type);\n  useEffect(() => {\n    if (resolvedType !== type) {\n      logActionRequired(\n        `Alert component has deprecated '${type}' value for the 'type' prop. Please use '${resolvedType}' instead.`,\n      );\n    }\n  }, [resolvedType, type]);\n\n  const [shouldFire, setShouldFire] = useState(false);\n\n  const closeButtonReference = useRef<HTMLButtonElement>(null);\n\n  return (\n    <div\n      className={classNames(\n        'alert d-flex',\n        `alert-${resolvedType}`,\n        arrow != null && alertArrowClassNames(arrow),\n        className,\n      )}\n      data-testid=\"alert\"\n      onTouchStart={() => setShouldFire(true)}\n      onTouchEnd={(event) => {\n        if (\n          shouldFire &&\n          action?.href &&\n          // Check if current event is triggered from closeButton\n          event.target instanceof Node &&\n          closeButtonReference.current &&\n          !closeButtonReference.current.contains(event.target)\n        ) {\n          if (action.target === '_blank') {\n            window.top?.open(action.href);\n          } else {\n            window.top?.location.assign(action.href);\n          }\n        }\n        setShouldFire(false);\n      }}\n      onTouchMove={() => setShouldFire(false)}\n    >\n      <div\n        className={classNames('alert__content', 'd-flex', 'flex-grow-1', variant)}\n        data-testid={variant}\n      >\n        {icon ? (\n          <div className=\"alert__icon\">{icon}</div>\n        ) : (\n          <StatusIcon size={Size.LARGE} sentiment={resolvedType} />\n        )}\n        <div className=\"alert__message\">\n          <div role={Sentiment.NEGATIVE === resolvedType ? 'alert' : 'status'}>\n            {title && (\n              <Title className=\"m-b-1\" type={Typography.TITLE_BODY}>\n                {title}\n              </Title>\n            )}\n            <Body as=\"span\" className=\"d-block\" type={Typography.BODY_LARGE}>\n              {children || <InlineMarkdown>{message}</InlineMarkdown>}\n            </Body>\n          </div>\n          {action && <Action action={action} className=\"m-t-1\" />}\n        </div>\n      </div>\n      {onDismiss && (\n        <CloseButton ref={closeButtonReference} className=\"m-l-2\" onClick={onDismiss} />\n      )}\n    </div>\n  );\n}\n\nfunction alertArrowClassNames(arrow: `${AlertArrowPosition}`) {\n  switch (arrow) {\n    case 'down-center':\n      return 'arrow arrow-bottom arrow-center';\n    case 'down-left':\n      return 'arrow arrow-bottom arrow-left';\n    case 'down-right':\n      return 'arrow arrow-bottom arrow-right';\n    case 'up-center':\n      return 'arrow arrow-center';\n    case 'up-right':\n      return 'arrow arrow-right';\n    case 'up-left':\n    default:\n      return 'arrow';\n  }\n}\n"],"names":["AlertArrowPosition","resolveType","type","Alert","arrow","action","children","className","dismissible","icon","onDismiss","message","size","title","variant","useEffect","undefined","logActionRequired","resolvedType","shouldFire","setShouldFire","useState","closeButtonReference","useRef","_jsxs","classNames","alertArrowClassNames","onTouchStart","onTouchEnd","event","href","target","Node","current","contains","window","top","open","location","assign","onTouchMove","_jsx","StatusIcon","Size","LARGE","sentiment","role","Sentiment","NEGATIVE","Title","Typography","TITLE_BODY","Body","as","BODY_LARGE","InlineMarkdown","Action","CloseButton","ref","onClick"],"mappings":"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"}

package/build/alert/Alert.mjs

@@ -0,0 +1,151 @@
+import classNames from 'classnames';
+import { useEffect, useState, useRef } from 'react';
+import Body from '../body/Body.mjs';
+import { CloseButton } from '../common/closeButton/CloseButton.mjs';
+import StatusIcon from '../statusIcon/StatusIcon.mjs';
+import Title from '../title/Title.mjs';
+import InlineMarkdown from './inlineMarkdown/InlineMarkdown.mjs';
+import { Action } from '../common/action/Action.mjs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { logActionRequired } from '../utilities/logActionRequired.mjs';
+import { Sentiment } from '../common/propsValues/sentiment.mjs';
+import { Size } from '../common/propsValues/size.mjs';
+import { Typography } from '../common/propsValues/typography.mjs';
+
+var AlertArrowPosition;
+(function (AlertArrowPosition) {
+  AlertArrowPosition["TOP_LEFT"] = "up-left";
+  AlertArrowPosition["TOP"] = "up-center";
+  AlertArrowPosition["TOP_RIGHT"] = "up-right";
+  AlertArrowPosition["BOTTOM_LEFT"] = "down-left";
+  AlertArrowPosition["BOTTOM"] = "down-center";
+  AlertArrowPosition["BOTTOM_RIGHT"] = "down-right";
+})(AlertArrowPosition || (AlertArrowPosition = {}));
+function resolveType(type) {
+  switch (type) {
+    case 'success':
+      return 'positive';
+    case 'info':
+      return 'neutral';
+    case 'error':
+      return 'negative';
+    default:
+      return type;
+  }
+}
+function Alert({
+  arrow,
+  action,
+  children,
+  className,
+  dismissible,
+  icon,
+  onDismiss,
+  message,
+  size,
+  title,
+  type = 'neutral',
+  variant = 'desktop'
+}) {
+  useEffect(() => {
+    if (arrow !== undefined) {
+      logActionRequired("Alert component doesn't support 'arrow' anymore, use 'InlineAlert' instead.");
+    }
+  }, [arrow]);
+  useEffect(() => {
+    if (children !== undefined) {
+      logActionRequired("Alert component doesn't support 'children' anymore, use 'message' instead.");
+    }
+  }, [children]);
+  useEffect(() => {
+    if (dismissible !== undefined) {
+      logActionRequired("Alert component doesn't support 'dismissible' anymore, use 'onDismiss' instead.");
+    }
+  }, [dismissible]);
+  useEffect(() => {
+    if (size !== undefined) {
+      logActionRequired("Alert component doesn't support 'size' anymore, please remove that prop.");
+    }
+  }, [size]);
+  const resolvedType = resolveType(type);
+  useEffect(() => {
+    if (resolvedType !== type) {
+      logActionRequired(`Alert component has deprecated '${type}' value for the 'type' prop. Please use '${resolvedType}' instead.`);
+    }
+  }, [resolvedType, type]);
+  const [shouldFire, setShouldFire] = useState(false);
+  const closeButtonReference = useRef(null);
+  return /*#__PURE__*/jsxs("div", {
+    className: classNames('alert d-flex', `alert-${resolvedType}`, arrow != null && alertArrowClassNames(arrow), className),
+    "data-testid": "alert",
+    onTouchStart: () => setShouldFire(true),
+    onTouchEnd: event => {
+      if (shouldFire && action?.href &&
+      // Check if current event is triggered from closeButton
+      event.target instanceof Node && closeButtonReference.current && !closeButtonReference.current.contains(event.target)) {
+        if (action.target === '_blank') {
+          window.top?.open(action.href);
+        } else {
+          window.top?.location.assign(action.href);
+        }
+      }
+      setShouldFire(false);
+    },
+    onTouchMove: () => setShouldFire(false),
+    children: [/*#__PURE__*/jsxs("div", {
+      className: classNames('alert__content', 'd-flex', 'flex-grow-1', variant),
+      "data-testid": variant,
+      children: [icon ? /*#__PURE__*/jsx("div", {
+        className: "alert__icon",
+        children: icon
+      }) : /*#__PURE__*/jsx(StatusIcon, {
+        size: Size.LARGE,
+        sentiment: resolvedType
+      }), /*#__PURE__*/jsxs("div", {
+        className: "alert__message",
+        children: [/*#__PURE__*/jsxs("div", {
+          role: Sentiment.NEGATIVE === resolvedType ? 'alert' : 'status',
+          children: [title && /*#__PURE__*/jsx(Title, {
+            className: "m-b-1",
+            type: Typography.TITLE_BODY,
+            children: title
+          }), /*#__PURE__*/jsx(Body, {
+            as: "span",
+            className: "d-block",
+            type: Typography.BODY_LARGE,
+            children: children || /*#__PURE__*/jsx(InlineMarkdown, {
+              children: message
+            })
+          })]
+        }), action && /*#__PURE__*/jsx(Action, {
+          action: action,
+          className: "m-t-1"
+        })]
+      })]
+    }), onDismiss && /*#__PURE__*/jsx(CloseButton, {
+      ref: closeButtonReference,
+      className: "m-l-2",
+      onClick: onDismiss
+    })]
+  });
+}
+function alertArrowClassNames(arrow) {
+  switch (arrow) {
+    case 'down-center':
+      return 'arrow arrow-bottom arrow-center';
+    case 'down-left':
+      return 'arrow arrow-bottom arrow-left';
+    case 'down-right':
+      return 'arrow arrow-bottom arrow-right';
+    case 'up-center':
+      return 'arrow arrow-center';
+    case 'up-right':
+      return 'arrow arrow-right';
+    case 'up-left':
+    default:
+      return 'arrow';
+  }
+}
+
+export { AlertArrowPosition, Alert as default };
+//# sourceMappingURL=Alert.mjs.map

package/build/alert/Alert.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.mjs","sources":["../../src/alert/Alert.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { useState, useRef, useEffect } from 'react';\n\nimport Body from '../body/Body';\nimport { Sentiment, Size, Typography, Variant } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport StatusIcon from '../statusIcon';\nimport Title from '../title/Title';\nimport { logActionRequired } from '../utilities';\n\nimport InlineMarkdown from './inlineMarkdown';\nimport { Action } from '../common/action/Action';\n\nexport type AlertAction = {\n  'aria-label'?: string;\n  href?: string;\n  target?: string;\n  text: React.ReactNode;\n  onClick?: () => void;\n};\n\n/** @deprecated Use `\"top\" | \"bottom\"` instead. */\ntype AlertTypeDeprecated = `${Sentiment.SUCCESS | Sentiment.INFO | Sentiment.ERROR}`;\ntype AlertTypeResolved = `${\n  | Sentiment.POSITIVE\n  | Sentiment.NEUTRAL\n  | Sentiment.WARNING\n  | Sentiment.NEGATIVE}`;\nexport type AlertType = AlertTypeResolved | AlertTypeDeprecated;\n\nexport enum AlertArrowPosition {\n  TOP_LEFT = 'up-left',\n  TOP = 'up-center',\n  TOP_RIGHT = 'up-right',\n  BOTTOM_LEFT = 'down-left',\n  BOTTOM = 'down-center',\n  BOTTOM_RIGHT = 'down-right',\n}\n\nexport interface AlertProps {\n  /** An optional call to action to sit under the main body of the alert. If your label is short, use aria-label to provide more context */\n  action?: AlertAction;\n  className?: string;\n  /** An optional icon. If not provided, we will default the icon to something appropriate for the type */\n  icon?: React.ReactNode;\n  /** Title for the alert component */\n  title?: string;\n  /** The main body of the alert. Accepts plain text and bold words specified with **double stars */\n  message?: string;\n  /** The presence of the onDismiss handler will trigger the visibility of the close button */\n  onDismiss?: React.MouseEventHandler<HTMLButtonElement>;\n  /** The type dictates which icon and colour will be used */\n  type?: AlertType;\n  variant?: `${Variant}`;\n  /** @deprecated Use `InlineAlert` instead. */\n  arrow?: `${AlertArrowPosition}`;\n  /** @deprecated Use `message` instead. Be aware `message` only accepts plain text or text with **bold** markdown. */\n  children?: React.ReactNode;\n  /** @deprecated Use `onDismiss` instead. */\n  dismissible?: boolean;\n  /** @deprecated Alert component doesn't support `size` anymore, please remove this prop. */\n  size?: `${Size}`;\n}\n\nfunction resolveType(type: AlertType): AlertTypeResolved {\n  switch (type) {\n    case 'success':\n      return 'positive';\n    case 'info':\n      return 'neutral';\n    case 'error':\n      return 'negative';\n    default:\n      return type;\n  }\n}\n\nexport default function Alert({\n  arrow,\n  action,\n  children,\n  className,\n  dismissible,\n  icon,\n  onDismiss,\n  message,\n  size,\n  title,\n  type = 'neutral',\n  variant = 'desktop',\n}: AlertProps) {\n  useEffect(() => {\n    if (arrow !== undefined) {\n      logActionRequired(\n        \"Alert component doesn't support 'arrow' anymore, use 'InlineAlert' instead.\",\n      );\n    }\n  }, [arrow]);\n\n  useEffect(() => {\n    if (children !== undefined) {\n      logActionRequired(\n        \"Alert component doesn't support 'children' anymore, use 'message' instead.\",\n      );\n    }\n  }, [children]);\n\n  useEffect(() => {\n    if (dismissible !== undefined) {\n      logActionRequired(\n        \"Alert component doesn't support 'dismissible' anymore, use 'onDismiss' instead.\",\n      );\n    }\n  }, [dismissible]);\n\n  useEffect(() => {\n    if (size !== undefined) {\n      logActionRequired(\"Alert component doesn't support 'size' anymore, please remove that prop.\");\n    }\n  }, [size]);\n\n  const resolvedType = resolveType(type);\n  useEffect(() => {\n    if (resolvedType !== type) {\n      logActionRequired(\n        `Alert component has deprecated '${type}' value for the 'type' prop. Please use '${resolvedType}' instead.`,\n      );\n    }\n  }, [resolvedType, type]);\n\n  const [shouldFire, setShouldFire] = useState(false);\n\n  const closeButtonReference = useRef<HTMLButtonElement>(null);\n\n  return (\n    <div\n      className={classNames(\n        'alert d-flex',\n        `alert-${resolvedType}`,\n        arrow != null && alertArrowClassNames(arrow),\n        className,\n      )}\n      data-testid=\"alert\"\n      onTouchStart={() => setShouldFire(true)}\n      onTouchEnd={(event) => {\n        if (\n          shouldFire &&\n          action?.href &&\n          // Check if current event is triggered from closeButton\n          event.target instanceof Node &&\n          closeButtonReference.current &&\n          !closeButtonReference.current.contains(event.target)\n        ) {\n          if (action.target === '_blank') {\n            window.top?.open(action.href);\n          } else {\n            window.top?.location.assign(action.href);\n          }\n        }\n        setShouldFire(false);\n      }}\n      onTouchMove={() => setShouldFire(false)}\n    >\n      <div\n        className={classNames('alert__content', 'd-flex', 'flex-grow-1', variant)}\n        data-testid={variant}\n      >\n        {icon ? (\n          <div className=\"alert__icon\">{icon}</div>\n        ) : (\n          <StatusIcon size={Size.LARGE} sentiment={resolvedType} />\n        )}\n        <div className=\"alert__message\">\n          <div role={Sentiment.NEGATIVE === resolvedType ? 'alert' : 'status'}>\n            {title && (\n              <Title className=\"m-b-1\" type={Typography.TITLE_BODY}>\n                {title}\n              </Title>\n            )}\n            <Body as=\"span\" className=\"d-block\" type={Typography.BODY_LARGE}>\n              {children || <InlineMarkdown>{message}</InlineMarkdown>}\n            </Body>\n          </div>\n          {action && <Action action={action} className=\"m-t-1\" />}\n        </div>\n      </div>\n      {onDismiss && (\n        <CloseButton ref={closeButtonReference} className=\"m-l-2\" onClick={onDismiss} />\n      )}\n    </div>\n  );\n}\n\nfunction alertArrowClassNames(arrow: `${AlertArrowPosition}`) {\n  switch (arrow) {\n    case 'down-center':\n      return 'arrow arrow-bottom arrow-center';\n    case 'down-left':\n      return 'arrow arrow-bottom arrow-left';\n    case 'down-right':\n      return 'arrow arrow-bottom arrow-right';\n    case 'up-center':\n      return 'arrow arrow-center';\n    case 'up-right':\n      return 'arrow arrow-right';\n    case 'up-left':\n    default:\n      return 'arrow';\n  }\n}\n"],"names":["AlertArrowPosition","resolveType","type","Alert","arrow","action","children","className","dismissible","icon","onDismiss","message","size","title","variant","useEffect","undefined","logActionRequired","resolvedType","shouldFire","setShouldFire","useState","closeButtonReference","useRef","_jsxs","classNames","alertArrowClassNames","onTouchStart","onTouchEnd","event","href","target","Node","current","contains","window","top","open","location","assign","onTouchMove","_jsx","StatusIcon","Size","LARGE","sentiment","role","Sentiment","NEGATIVE","Title","Typography","TITLE_BODY","Body","as","BODY_LARGE","InlineMarkdown","Action","CloseButton","ref","onClick"],"mappings":"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"}

package/build/alert/inlineMarkdown/InlineMarkdown.js

@@ -0,0 +1,18 @@
+'use strict';
+
+var Markdown = require('../../markdown/Markdown.js');
+var jsxRuntime = require('react/jsx-runtime');
+var markdownNodeType = require('../../common/propsValues/markdownNodeType.js');
+
+const allowList = [markdownNodeType.MarkdownNodeType.STRONG];
+function InlineMarkdown(props) {
+  return /*#__PURE__*/jsxRuntime.jsx(Markdown, {
+    ...props,
+    as: "span",
+    allowList: allowList,
+    blockList: undefined
+  });
+}
+
+module.exports = InlineMarkdown;
+//# sourceMappingURL=InlineMarkdown.js.map

package/build/alert/inlineMarkdown/InlineMarkdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InlineMarkdown.js","sources":["../../../src/alert/inlineMarkdown/InlineMarkdown.tsx"],"sourcesContent":["import { MarkdownNodeType } from '../../common';\nimport Markdown from '../../markdown';\n\nconst allowList = [MarkdownNodeType.STRONG];\n\nexport interface InlineMarkdownProps {\n  children?: string;\n  className?: string;\n}\n\nexport default function InlineMarkdown(props: InlineMarkdownProps) {\n  return <Markdown {...props} as=\"span\" allowList={allowList} blockList={undefined} />;\n}\n"],"names":["allowList","MarkdownNodeType","STRONG","InlineMarkdown","props","_jsx","Markdown","as","blockList","undefined"],"mappings":";;;;;;AAGA,MAAMA,SAAS,GAAG,CAACC,iCAAgB,CAACC,MAAM,CAAC,CAAA;AAOnB,SAAAC,cAAcA,CAACC,KAA0B,EAAA;EAC/D,oBAAOC,cAAA,CAACC,QAAQ,EAAA;AAAA,IAAA,GAAKF,KAAK;AAAEG,IAAAA,EAAE,EAAC,MAAM;AAACP,IAAAA,SAAS,EAAEA,SAAU;AAACQ,IAAAA,SAAS,EAAEC,SAAAA;AAAU,GAAA,CAAG,CAAA;AACtF;;;;"}

package/build/alert/inlineMarkdown/InlineMarkdown.mjs

@@ -0,0 +1,16 @@
+import Markdown from '../../markdown/Markdown.mjs';
+import { jsx } from 'react/jsx-runtime';
+import { MarkdownNodeType } from '../../common/propsValues/markdownNodeType.mjs';
+
+const allowList = [MarkdownNodeType.STRONG];
+function InlineMarkdown(props) {
+  return /*#__PURE__*/jsx(Markdown, {
+    ...props,
+    as: "span",
+    allowList: allowList,
+    blockList: undefined
+  });
+}
+
+export { InlineMarkdown as default };
+//# sourceMappingURL=InlineMarkdown.mjs.map

package/build/alert/inlineMarkdown/InlineMarkdown.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"InlineMarkdown.mjs","sources":["../../../src/alert/inlineMarkdown/InlineMarkdown.tsx"],"sourcesContent":["import { MarkdownNodeType } from '../../common';\nimport Markdown from '../../markdown';\n\nconst allowList = [MarkdownNodeType.STRONG];\n\nexport interface InlineMarkdownProps {\n  children?: string;\n  className?: string;\n}\n\nexport default function InlineMarkdown(props: InlineMarkdownProps) {\n  return <Markdown {...props} as=\"span\" allowList={allowList} blockList={undefined} />;\n}\n"],"names":["allowList","MarkdownNodeType","STRONG","InlineMarkdown","props","_jsx","Markdown","as","blockList","undefined"],"mappings":";;;;AAGA,MAAMA,SAAS,GAAG,CAACC,gBAAgB,CAACC,MAAM,CAAC,CAAA;AAOnB,SAAAC,cAAcA,CAACC,KAA0B,EAAA;EAC/D,oBAAOC,GAAA,CAACC,QAAQ,EAAA;AAAA,IAAA,GAAKF,KAAK;AAAEG,IAAAA,EAAE,EAAC,MAAM;AAACP,IAAAA,SAAS,EAAEA,SAAU;AAACQ,IAAAA,SAAS,EAAEC,SAAAA;AAAU,GAAA,CAAG,CAAA;AACtF;;;;"}

package/build/avatar/Avatar.js

@@ -0,0 +1,54 @@
+'use strict';
+
+var classNames = require('classnames');
+var React = require('react');
+var colors = require('./colors/colors.js');
+var jsxRuntime = require('react/jsx-runtime');
+var theme = require('../common/theme.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+
+const backwardsCompatibleSize = size => {
+  switch (size) {
+    case 'sm':
+      return 24;
+    case 'md':
+      return 48;
+    case 'lg':
+      return 72;
+    default:
+      return size;
+  }
+};
+const Avatar = ({
+  backgroundColor = null,
+  backgroundColorSeed = null,
+  children = null,
+  className,
+  outlined = false,
+  size: sizeFromProps = 48,
+  theme: theme$1 = theme.Theme.LIGHT,
+  type = 'thumbnail'
+}) => {
+  const backgroundColorFromSeed = React.useMemo(() => !backgroundColor && backgroundColorSeed ? `var(${colors.getAvatarColorFromSeed(backgroundColorSeed)})` : undefined, [backgroundColor, backgroundColorSeed]);
+  const size = backwardsCompatibleSize(sizeFromProps);
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: classNames__default.default('tw-avatar', className, `tw-avatar--${size}`, `tw-avatar--${type}`, {
+      'tw-avatar--outlined': outlined,
+      'tw-avatar--branded': Boolean(backgroundColorFromSeed),
+      'np-text-title-body': type === 'initials'
+    }),
+    children: /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "tw-avatar__content",
+      style: {
+        backgroundColor: backgroundColor || backgroundColorFromSeed
+      },
+      children: children
+    })
+  });
+};
+
+module.exports = Avatar;
+//# sourceMappingURL=Avatar.js.map

package/build/avatar/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","sources":["../../src/avatar/Avatar.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport { useMemo } from 'react';\n\nimport { Theme } from '../common';\n\nimport { getAvatarColorFromSeed } from './colors';\n\ntype NumericAvatarSize = 24 | 40 | 48 | 56 | 72;\n\ntype LegacyAvatarSize = 'sm' | 'md' | 'lg';\n\nexport type AvatarSize = NumericAvatarSize | LegacyAvatarSize;\n\nexport type AvatarTheme = 'light' | 'dark';\n\nexport type AvatarType = 'thumbnail' | 'icon' | 'emoji' | 'initials';\n\nexport interface AvatarProps {\n  backgroundColor?: string;\n  backgroundColorSeed?: string;\n  children?: React.ReactNode;\n  className?: string;\n  outlined?: boolean;\n  size?: AvatarSize;\n  theme?: AvatarTheme;\n  type?: AvatarType;\n}\n\nconst backwardsCompatibleSize = (size: AvatarSize): NumericAvatarSize => {\n  switch (size) {\n    case 'sm':\n      return 24;\n\n    case 'md':\n      return 48;\n\n    case 'lg':\n      return 72;\n\n    default:\n      return size;\n  }\n};\n\nconst Avatar: React.FC<AvatarProps> = ({\n  backgroundColor = null,\n  backgroundColorSeed = null,\n  children = null,\n  className,\n  outlined = false,\n  size: sizeFromProps = 48,\n  theme = Theme.LIGHT,\n  type = 'thumbnail',\n}) => {\n  const backgroundColorFromSeed = useMemo<string | undefined>(\n    () =>\n      !backgroundColor && backgroundColorSeed\n        ? `var(${getAvatarColorFromSeed(backgroundColorSeed)})`\n        : undefined,\n    [backgroundColor, backgroundColorSeed],\n  );\n\n  const size = backwardsCompatibleSize(sizeFromProps);\n\n  return (\n    <div\n      className={classnames('tw-avatar', className, `tw-avatar--${size}`, `tw-avatar--${type}`, {\n        'tw-avatar--outlined': outlined,\n        'tw-avatar--branded': Boolean(backgroundColorFromSeed),\n        'np-text-title-body': type === 'initials',\n      })}\n    >\n      <div\n        className=\"tw-avatar__content\"\n        style={{\n          backgroundColor: backgroundColor || backgroundColorFromSeed,\n        }}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n\nexport default Avatar;\n"],"names":["backwardsCompatibleSize","size","Avatar","backgroundColor","backgroundColorSeed","children","className","outlined","sizeFromProps","theme","Theme","LIGHT","type","backgroundColorFromSeed","useMemo","getAvatarColorFromSeed","undefined","_jsx","classnames","Boolean","style"],"mappings":";;;;;;;;;;;;AA4BA,MAAMA,uBAAuB,GAAIC,IAAgB,IAAuB;AACtE,EAAA,QAAQA,IAAI;AACV,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE,CAAA;AAEX,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE,CAAA;AAEX,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE,CAAA;AAEX,IAAA;AACE,MAAA,OAAOA,IAAI,CAAA;AACf,GAAA;AACF,CAAC,CAAA;AAEKC,MAAAA,MAAM,GAA0BA,CAAC;AACrCC,EAAAA,eAAe,GAAG,IAAI;AACtBC,EAAAA,mBAAmB,GAAG,IAAI;AAC1BC,EAAAA,QAAQ,GAAG,IAAI;EACfC,SAAS;AACTC,EAAAA,QAAQ,GAAG,KAAK;EAChBN,IAAI,EAAEO,aAAa,GAAG,EAAE;SACxBC,OAAK,GAAGC,WAAK,CAACC,KAAK;AACnBC,EAAAA,IAAI,GAAG,WAAA;AAAW,CACnB,KAAI;EACH,MAAMC,uBAAuB,GAAGC,aAAO,CACrC,MACE,CAACX,eAAe,IAAIC,mBAAmB,GAC5B,CAAAW,IAAAA,EAAAA,6BAAsB,CAACX,mBAAmB,CAAI,CAAA,CAAA,CAAA,GACrDY,SAAS,EACf,CAACb,eAAe,EAAEC,mBAAmB,CAAC,CACvC,CAAA;AAED,EAAA,MAAMH,IAAI,GAAGD,uBAAuB,CAACQ,aAAa,CAAC,CAAA;AAEnD,EAAA,oBACES,cAAA,CAAA,KAAA,EAAA;AACEX,IAAAA,SAAS,EAAEY,2BAAU,CAAC,WAAW,EAAEZ,SAAS,GAAgBL,WAAAA,EAAAA,IAAI,CAAE,CAAA,EAAgB,CAAAW,WAAAA,EAAAA,MAAM,EAAE;AACxF,MAAA,qBAAqB,EAAEL,QAAQ;AAC/B,MAAA,oBAAoB,EAAEY,OAAO,CAACN,uBAAuB,CAAC;MACtD,oBAAoB,EAAED,IAAI,KAAK,UAAA;AAChC,KAAA,CAAE;AAAAP,IAAAA,QAAA,eAEHY,cAAA,CAAA,KAAA,EAAA;AACEX,MAAAA,SAAS,EAAC,oBAAoB;AAC9Bc,MAAAA,KAAK,EAAE;QACLjB,eAAe,EAAEA,eAAe,IAAIU,uBAAAA;OACpC;AAAAR,MAAAA,QAAA,EAEDA,QAAAA;KACE,CAAA;AACP,GAAK,CAAC,CAAA;AAEV;;;;"}

package/build/avatar/Avatar.mjs

@@ -0,0 +1,48 @@
+import classNames from 'classnames';
+import { useMemo } from 'react';
+import { getAvatarColorFromSeed } from './colors/colors.mjs';
+import { jsx } from 'react/jsx-runtime';
+import { Theme } from '../common/theme.mjs';
+
+const backwardsCompatibleSize = size => {
+  switch (size) {
+    case 'sm':
+      return 24;
+    case 'md':
+      return 48;
+    case 'lg':
+      return 72;
+    default:
+      return size;
+  }
+};
+const Avatar = ({
+  backgroundColor = null,
+  backgroundColorSeed = null,
+  children = null,
+  className,
+  outlined = false,
+  size: sizeFromProps = 48,
+  theme = Theme.LIGHT,
+  type = 'thumbnail'
+}) => {
+  const backgroundColorFromSeed = useMemo(() => !backgroundColor && backgroundColorSeed ? `var(${getAvatarColorFromSeed(backgroundColorSeed)})` : undefined, [backgroundColor, backgroundColorSeed]);
+  const size = backwardsCompatibleSize(sizeFromProps);
+  return /*#__PURE__*/jsx("div", {
+    className: classNames('tw-avatar', className, `tw-avatar--${size}`, `tw-avatar--${type}`, {
+      'tw-avatar--outlined': outlined,
+      'tw-avatar--branded': Boolean(backgroundColorFromSeed),
+      'np-text-title-body': type === 'initials'
+    }),
+    children: /*#__PURE__*/jsx("div", {
+      className: "tw-avatar__content",
+      style: {
+        backgroundColor: backgroundColor || backgroundColorFromSeed
+      },
+      children: children
+    })
+  });
+};
+
+export { Avatar as default };
+//# sourceMappingURL=Avatar.mjs.map

package/build/avatar/Avatar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.mjs","sources":["../../src/avatar/Avatar.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport { useMemo } from 'react';\n\nimport { Theme } from '../common';\n\nimport { getAvatarColorFromSeed } from './colors';\n\ntype NumericAvatarSize = 24 | 40 | 48 | 56 | 72;\n\ntype LegacyAvatarSize = 'sm' | 'md' | 'lg';\n\nexport type AvatarSize = NumericAvatarSize | LegacyAvatarSize;\n\nexport type AvatarTheme = 'light' | 'dark';\n\nexport type AvatarType = 'thumbnail' | 'icon' | 'emoji' | 'initials';\n\nexport interface AvatarProps {\n  backgroundColor?: string;\n  backgroundColorSeed?: string;\n  children?: React.ReactNode;\n  className?: string;\n  outlined?: boolean;\n  size?: AvatarSize;\n  theme?: AvatarTheme;\n  type?: AvatarType;\n}\n\nconst backwardsCompatibleSize = (size: AvatarSize): NumericAvatarSize => {\n  switch (size) {\n    case 'sm':\n      return 24;\n\n    case 'md':\n      return 48;\n\n    case 'lg':\n      return 72;\n\n    default:\n      return size;\n  }\n};\n\nconst Avatar: React.FC<AvatarProps> = ({\n  backgroundColor = null,\n  backgroundColorSeed = null,\n  children = null,\n  className,\n  outlined = false,\n  size: sizeFromProps = 48,\n  theme = Theme.LIGHT,\n  type = 'thumbnail',\n}) => {\n  const backgroundColorFromSeed = useMemo<string | undefined>(\n    () =>\n      !backgroundColor && backgroundColorSeed\n        ? `var(${getAvatarColorFromSeed(backgroundColorSeed)})`\n        : undefined,\n    [backgroundColor, backgroundColorSeed],\n  );\n\n  const size = backwardsCompatibleSize(sizeFromProps);\n\n  return (\n    <div\n      className={classnames('tw-avatar', className, `tw-avatar--${size}`, `tw-avatar--${type}`, {\n        'tw-avatar--outlined': outlined,\n        'tw-avatar--branded': Boolean(backgroundColorFromSeed),\n        'np-text-title-body': type === 'initials',\n      })}\n    >\n      <div\n        className=\"tw-avatar__content\"\n        style={{\n          backgroundColor: backgroundColor || backgroundColorFromSeed,\n        }}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n\nexport default Avatar;\n"],"names":["backwardsCompatibleSize","size","Avatar","backgroundColor","backgroundColorSeed","children","className","outlined","sizeFromProps","theme","Theme","LIGHT","type","backgroundColorFromSeed","useMemo","getAvatarColorFromSeed","undefined","_jsx","classnames","Boolean","style"],"mappings":";;;;;;AA4BA,MAAMA,uBAAuB,GAAIC,IAAgB,IAAuB;AACtE,EAAA,QAAQA,IAAI;AACV,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE,CAAA;AAEX,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE,CAAA;AAEX,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE,CAAA;AAEX,IAAA;AACE,MAAA,OAAOA,IAAI,CAAA;AACf,GAAA;AACF,CAAC,CAAA;AAEKC,MAAAA,MAAM,GAA0BA,CAAC;AACrCC,EAAAA,eAAe,GAAG,IAAI;AACtBC,EAAAA,mBAAmB,GAAG,IAAI;AAC1BC,EAAAA,QAAQ,GAAG,IAAI;EACfC,SAAS;AACTC,EAAAA,QAAQ,GAAG,KAAK;EAChBN,IAAI,EAAEO,aAAa,GAAG,EAAE;EACxBC,KAAK,GAAGC,KAAK,CAACC,KAAK;AACnBC,EAAAA,IAAI,GAAG,WAAA;AAAW,CACnB,KAAI;EACH,MAAMC,uBAAuB,GAAGC,OAAO,CACrC,MACE,CAACX,eAAe,IAAIC,mBAAmB,GAC5B,CAAAW,IAAAA,EAAAA,sBAAsB,CAACX,mBAAmB,CAAI,CAAA,CAAA,CAAA,GACrDY,SAAS,EACf,CAACb,eAAe,EAAEC,mBAAmB,CAAC,CACvC,CAAA;AAED,EAAA,MAAMH,IAAI,GAAGD,uBAAuB,CAACQ,aAAa,CAAC,CAAA;AAEnD,EAAA,oBACES,GAAA,CAAA,KAAA,EAAA;AACEX,IAAAA,SAAS,EAAEY,UAAU,CAAC,WAAW,EAAEZ,SAAS,GAAgBL,WAAAA,EAAAA,IAAI,CAAE,CAAA,EAAgB,CAAAW,WAAAA,EAAAA,MAAM,EAAE;AACxF,MAAA,qBAAqB,EAAEL,QAAQ;AAC/B,MAAA,oBAAoB,EAAEY,OAAO,CAACN,uBAAuB,CAAC;MACtD,oBAAoB,EAAED,IAAI,KAAK,UAAA;AAChC,KAAA,CAAE;AAAAP,IAAAA,QAAA,eAEHY,GAAA,CAAA,KAAA,EAAA;AACEX,MAAAA,SAAS,EAAC,oBAAoB;AAC9Bc,MAAAA,KAAK,EAAE;QACLjB,eAAe,EAAEA,eAAe,IAAIU,uBAAAA;OACpC;AAAAR,MAAAA,QAAA,EAEDA,QAAAA;KACE,CAAA;AACP,GAAK,CAAC,CAAA;AAEV;;;;"}

package/build/avatar/avatarTypes.js

@@ -0,0 +1,11 @@
+'use strict';
+
+// TODO: consider to move this enum into component file once we migrate it on TypeScript or replace with some common enum
+exports.AvatarType = void 0;
+(function (AvatarType) {
+  AvatarType["THUMBNAIL"] = "thumbnail";
+  AvatarType["ICON"] = "icon";
+  AvatarType["EMOJI"] = "emoji";
+  AvatarType["INITIALS"] = "initials";
+})(exports.AvatarType || (exports.AvatarType = {}));
+//# sourceMappingURL=avatarTypes.js.map

package/build/avatar/avatarTypes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatarTypes.js","sources":["../../src/avatar/avatarTypes.ts"],"sourcesContent":["// TODO: consider to move this enum into component file once we migrate it on TypeScript or replace with some common enum\nexport enum AvatarType {\n  THUMBNAIL = 'thumbnail',\n  ICON = 'icon',\n  EMOJI = 'emoji',\n  INITIALS = 'initials',\n}\n"],"names":["AvatarType"],"mappings":";;AAAA;AACYA,4BAKX;AALD,CAAA,UAAYA,UAAU,EAAA;AACpBA,EAAAA,UAAA,CAAA,WAAA,CAAA,GAAA,WAAuB,CAAA;AACvBA,EAAAA,UAAA,CAAA,MAAA,CAAA,GAAA,MAAa,CAAA;AACbA,EAAAA,UAAA,CAAA,OAAA,CAAA,GAAA,OAAe,CAAA;AACfA,EAAAA,UAAA,CAAA,UAAA,CAAA,GAAA,UAAqB,CAAA;AACvB,CAAC,EALWA,kBAAU,KAAVA,kBAAU,GAKrB,EAAA,CAAA,CAAA;;"}

package/build/avatar/avatarTypes.mjs

@@ -0,0 +1,11 @@
+// TODO: consider to move this enum into component file once we migrate it on TypeScript or replace with some common enum
+var AvatarType;
+(function (AvatarType) {
+  AvatarType["THUMBNAIL"] = "thumbnail";
+  AvatarType["ICON"] = "icon";
+  AvatarType["EMOJI"] = "emoji";
+  AvatarType["INITIALS"] = "initials";
+})(AvatarType || (AvatarType = {}));
+
+export { AvatarType };
+//# sourceMappingURL=avatarTypes.mjs.map

package/build/avatar/avatarTypes.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatarTypes.mjs","sources":["../../src/avatar/avatarTypes.ts"],"sourcesContent":["// TODO: consider to move this enum into component file once we migrate it on TypeScript or replace with some common enum\nexport enum AvatarType {\n  THUMBNAIL = 'thumbnail',\n  ICON = 'icon',\n  EMOJI = 'emoji',\n  INITIALS = 'initials',\n}\n"],"names":["AvatarType"],"mappings":"AAAA;IACYA,WAKX;AALD,CAAA,UAAYA,UAAU,EAAA;AACpBA,EAAAA,UAAA,CAAA,WAAA,CAAA,GAAA,WAAuB,CAAA;AACvBA,EAAAA,UAAA,CAAA,MAAA,CAAA,GAAA,MAAa,CAAA;AACbA,EAAAA,UAAA,CAAA,OAAA,CAAA,GAAA,OAAe,CAAA;AACfA,EAAAA,UAAA,CAAA,UAAA,CAAA,GAAA,UAAqB,CAAA;AACvB,CAAC,EALWA,UAAU,KAAVA,UAAU,GAKrB,EAAA,CAAA,CAAA;;;;"}

package/build/avatar/colors/colors.js

@@ -0,0 +1,31 @@
+'use strict';
+
+/*
+ * The colors we support generating an Avatar background color from a "seed" for.
+ * Changing this array will change the assignment between seeds.
+ * Do not change this array.
+ */
+const avatarColors = ['--color-bright-blue', '--color-bright-yellow', '--color-bright-pink', '--color-bright-orange'];
+/*
+ * Takes in a "seed" string and spits out an index for the color we should use.
+ * This implementation has been synced across all three clients so that we consistently
+ * generate branded avatar colors when rendering a list of Avatars.
+ * Do not change this implementation.
+ */
+const hashSeed = seed => {
+  const base = 31;
+  const modulo = avatarColors.length;
+  let hashValue = 0;
+  let basePow = 1;
+  for (let i = 0; i < seed.length; i += 1) {
+    hashValue = (hashValue + seed.charCodeAt(i) * basePow) % modulo;
+    basePow = basePow * base % modulo;
+  }
+  return hashValue;
+};
+const getAvatarColorFromSeed = seed => {
+  return avatarColors[hashSeed(seed)];
+};
+
+exports.getAvatarColorFromSeed = getAvatarColorFromSeed;
+//# sourceMappingURL=colors.js.map

package/build/avatar/colors/colors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.js","sources":["../../../src/avatar/colors/colors.ts"],"sourcesContent":["/*\n * The colors we support generating an Avatar background color from a \"seed\" for.\n * Changing this array will change the assignment between seeds.\n * Do not change this array.\n */\nconst avatarColors = [\n  '--color-bright-blue',\n  '--color-bright-yellow',\n  '--color-bright-pink',\n  '--color-bright-orange',\n] as const;\n\n/*\n * Takes in a \"seed\" string and spits out an index for the color we should use.\n * This implementation has been synced across all three clients so that we consistently\n * generate branded avatar colors when rendering a list of Avatars.\n * Do not change this implementation.\n */\nconst hashSeed = (seed: string): number => {\n  const base = 31;\n  const modulo = avatarColors.length;\n\n  let hashValue = 0;\n  let basePow = 1;\n\n  for (let i = 0; i < seed.length; i += 1) {\n    hashValue = (hashValue + seed.charCodeAt(i) * basePow) % modulo;\n    basePow = (basePow * base) % modulo;\n  }\n\n  return hashValue;\n};\n\nexport const getAvatarColorFromSeed = (seed: string): (typeof avatarColors)[number] => {\n  return avatarColors[hashSeed(seed)];\n};\n"],"names":["avatarColors","hashSeed","seed","base","modulo","length","hashValue","basePow","i","charCodeAt","getAvatarColorFromSeed"],"mappings":";;AAAA;;;;AAIG;AACH,MAAMA,YAAY,GAAG,CACnB,qBAAqB,EACrB,uBAAuB,EACvB,qBAAqB,EACrB,uBAAuB,CACf,CAAA;AAEV;;;;;AAKG;AACH,MAAMC,QAAQ,GAAIC,IAAY,IAAY;EACxC,MAAMC,IAAI,GAAG,EAAE,CAAA;AACf,EAAA,MAAMC,MAAM,GAAGJ,YAAY,CAACK,MAAM,CAAA;EAElC,IAAIC,SAAS,GAAG,CAAC,CAAA;EACjB,IAAIC,OAAO,GAAG,CAAC,CAAA;AAEf,EAAA,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGN,IAAI,CAACG,MAAM,EAAEG,CAAC,IAAI,CAAC,EAAE;AACvCF,IAAAA,SAAS,GAAG,CAACA,SAAS,GAAGJ,IAAI,CAACO,UAAU,CAACD,CAAC,CAAC,GAAGD,OAAO,IAAIH,MAAM,CAAA;AAC/DG,IAAAA,OAAO,GAAIA,OAAO,GAAGJ,IAAI,GAAIC,MAAM,CAAA;AACrC,GAAA;AAEA,EAAA,OAAOE,SAAS,CAAA;AAClB,CAAC,CAAA;AAEYI,MAAAA,sBAAsB,GAAIR,IAAY,IAAmC;AACpF,EAAA,OAAOF,YAAY,CAACC,QAAQ,CAACC,IAAI,CAAC,CAAC,CAAA;AACrC;;;;"}

package/build/avatar/colors/colors.mjs

@@ -0,0 +1,29 @@
+/*
+ * The colors we support generating an Avatar background color from a "seed" for.
+ * Changing this array will change the assignment between seeds.
+ * Do not change this array.
+ */
+const avatarColors = ['--color-bright-blue', '--color-bright-yellow', '--color-bright-pink', '--color-bright-orange'];
+/*
+ * Takes in a "seed" string and spits out an index for the color we should use.
+ * This implementation has been synced across all three clients so that we consistently
+ * generate branded avatar colors when rendering a list of Avatars.
+ * Do not change this implementation.
+ */
+const hashSeed = seed => {
+  const base = 31;
+  const modulo = avatarColors.length;
+  let hashValue = 0;
+  let basePow = 1;
+  for (let i = 0; i < seed.length; i += 1) {
+    hashValue = (hashValue + seed.charCodeAt(i) * basePow) % modulo;
+    basePow = basePow * base % modulo;
+  }
+  return hashValue;
+};
+const getAvatarColorFromSeed = seed => {
+  return avatarColors[hashSeed(seed)];
+};
+
+export { getAvatarColorFromSeed };
+//# sourceMappingURL=colors.mjs.map

package/build/avatar/colors/colors.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.mjs","sources":["../../../src/avatar/colors/colors.ts"],"sourcesContent":["/*\n * The colors we support generating an Avatar background color from a \"seed\" for.\n * Changing this array will change the assignment between seeds.\n * Do not change this array.\n */\nconst avatarColors = [\n  '--color-bright-blue',\n  '--color-bright-yellow',\n  '--color-bright-pink',\n  '--color-bright-orange',\n] as const;\n\n/*\n * Takes in a \"seed\" string and spits out an index for the color we should use.\n * This implementation has been synced across all three clients so that we consistently\n * generate branded avatar colors when rendering a list of Avatars.\n * Do not change this implementation.\n */\nconst hashSeed = (seed: string): number => {\n  const base = 31;\n  const modulo = avatarColors.length;\n\n  let hashValue = 0;\n  let basePow = 1;\n\n  for (let i = 0; i < seed.length; i += 1) {\n    hashValue = (hashValue + seed.charCodeAt(i) * basePow) % modulo;\n    basePow = (basePow * base) % modulo;\n  }\n\n  return hashValue;\n};\n\nexport const getAvatarColorFromSeed = (seed: string): (typeof avatarColors)[number] => {\n  return avatarColors[hashSeed(seed)];\n};\n"],"names":["avatarColors","hashSeed","seed","base","modulo","length","hashValue","basePow","i","charCodeAt","getAvatarColorFromSeed"],"mappings":"AAAA;;;;AAIG;AACH,MAAMA,YAAY,GAAG,CACnB,qBAAqB,EACrB,uBAAuB,EACvB,qBAAqB,EACrB,uBAAuB,CACf,CAAA;AAEV;;;;;AAKG;AACH,MAAMC,QAAQ,GAAIC,IAAY,IAAY;EACxC,MAAMC,IAAI,GAAG,EAAE,CAAA;AACf,EAAA,MAAMC,MAAM,GAAGJ,YAAY,CAACK,MAAM,CAAA;EAElC,IAAIC,SAAS,GAAG,CAAC,CAAA;EACjB,IAAIC,OAAO,GAAG,CAAC,CAAA;AAEf,EAAA,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGN,IAAI,CAACG,MAAM,EAAEG,CAAC,IAAI,CAAC,EAAE;AACvCF,IAAAA,SAAS,GAAG,CAACA,SAAS,GAAGJ,IAAI,CAACO,UAAU,CAACD,CAAC,CAAC,GAAGD,OAAO,IAAIH,MAAM,CAAA;AAC/DG,IAAAA,OAAO,GAAIA,OAAO,GAAGJ,IAAI,GAAIC,MAAM,CAAA;AACrC,GAAA;AAEA,EAAA,OAAOE,SAAS,CAAA;AAClB,CAAC,CAAA;AAEYI,MAAAA,sBAAsB,GAAIR,IAAY,IAAmC;AACpF,EAAA,OAAOF,YAAY,CAACC,QAAQ,CAACC,IAAI,CAAC,CAAC,CAAA;AACrC;;;;"}

package/build/avatarWrapper/AvatarWrapper.js

@@ -0,0 +1,120 @@
+'use strict';
+
+var icons = require('@transferwise/icons');
+var React = require('react');
+var avatarTypes = require('../avatar/avatarTypes.js');
+var Avatar = require('../avatar/Avatar.js');
+var Badge = require('../badge/Badge.js');
+var StatusIcon = require('../statusIcon/StatusIcon.js');
+var jsxRuntime = require('react/jsx-runtime');
+var profileType = require('../common/propsValues/profileType.js');
+var size = require('../common/propsValues/size.js');
+
+const OptionalBadge = ({
+  url,
+  altText,
+  statusIcon,
+  children,
+  ...rest
+}) => {
+  if (url) {
+    return /*#__PURE__*/jsxRuntime.jsx(Badge, {
+      badge: /*#__PURE__*/jsxRuntime.jsx("img", {
+        src: url,
+        alt: altText
+      }),
+      ...rest,
+      children: children
+    });
+  }
+  if (statusIcon) {
+    return /*#__PURE__*/jsxRuntime.jsx(Badge, {
+      badge: /*#__PURE__*/jsxRuntime.jsx(StatusIcon, {
+        sentiment: statusIcon,
+        size: size.Size.SMALL
+      }),
+      ...rest,
+      children: children
+    });
+  }
+  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: children
+  });
+};
+const AvatarWrapper = ({
+  url,
+  profileType: profileType$1,
+  profileId,
+  badgeUrl,
+  badgeAltText,
+  badgeStatusIcon,
+  name,
+  avatarProps,
+  badgeProps
+}) => {
+  const [hasImageLoadError, setImageLoadError] = React.useState(false);
+  const isBusinessProfile = profileType$1 === profileType.ProfileType.BUSINESS;
+  // Reset the errored state when url changes
+  React.useEffect(() => setImageLoadError(false), [url]);
+  const getAvatarProps = () => {
+    if (url && !hasImageLoadError) {
+      return {
+        type: avatarTypes.AvatarType.THUMBNAIL,
+        children: /*#__PURE__*/jsxRuntime.jsx("img", {
+          src: url,
+          alt: "",
+          onError: () => setImageLoadError(true)
+        }),
+        ...avatarProps
+      };
+    }
+    if (profileType$1) {
+      return {
+        type: avatarTypes.AvatarType.ICON,
+        children: isBusinessProfile ? /*#__PURE__*/jsxRuntime.jsx(icons.Briefcase, {
+          size: "24"
+        }) : /*#__PURE__*/jsxRuntime.jsx(icons.Person, {
+          size: "24"
+        }),
+        ...avatarProps
+      };
+    }
+    if (name) {
+      return {
+        type: avatarTypes.AvatarType.INITIALS,
+        children: /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+          children: getInitials(name)
+        }),
+        backgroundColorSeed: profileId?.toString(),
+        ...avatarProps
+      };
+    }
+    return {
+      type: avatarTypes.AvatarType.ICON,
+      children: /*#__PURE__*/jsxRuntime.jsx(icons.Person, {
+        size: "24"
+      }),
+      ...avatarProps
+    };
+  };
+  return /*#__PURE__*/jsxRuntime.jsx(OptionalBadge, {
+    url: badgeUrl,
+    altText: badgeAltText,
+    statusIcon: badgeStatusIcon,
+    ...badgeProps,
+    children: /*#__PURE__*/jsxRuntime.jsx(Avatar, {
+      size: size.Size.MEDIUM,
+      ...getAvatarProps()
+    })
+  });
+};
+function getInitials(name) {
+  const allInitials = name.split(' ').map(part => part[0]).join('').toUpperCase();
+  if (allInitials.length === 1) {
+    return allInitials[0];
+  }
+  return allInitials[0] + allInitials.slice(-1);
+}
+
+module.exports = AvatarWrapper;
+//# sourceMappingURL=AvatarWrapper.js.map

package/build/avatarWrapper/AvatarWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarWrapper.js","sources":["../../src/avatarWrapper/AvatarWrapper.tsx"],"sourcesContent":["import { Person as ProfileIcon, Briefcase as BriefcaseIcon } from '@transferwise/icons';\nimport { useState, useEffect } from 'react';\n\nimport Avatar, { AvatarProps, AvatarType } from '../avatar';\nimport Badge, { BadgeProps } from '../badge';\nimport { ProfileType, ProfileTypePersonal, ProfileTypeBusiness, Size, Sentiment } from '../common';\nimport StatusIcon from '../statusIcon/StatusIcon';\n\ninterface OptionalBadgeProps extends Omit<BadgeProps, 'badge'> {\n  url?: string;\n  altText?: string;\n  statusIcon?: Sentiment;\n}\n\nconst OptionalBadge = ({ url, altText, statusIcon, children, ...rest }: OptionalBadgeProps) => {\n  if (url) {\n    return (\n      <Badge badge={<img src={url} alt={altText} />} {...rest}>\n        {children}\n      </Badge>\n    );\n  }\n  if (statusIcon) {\n    return (\n      <Badge badge={<StatusIcon sentiment={statusIcon} size={Size.SMALL} />} {...rest}>\n        {children}\n      </Badge>\n    );\n  }\n  return <>{children}</>;\n};\n\nexport type AvatarWrapperProps = {\n  url?: string;\n  profileType?: ProfileTypeBusiness | ProfileTypePersonal;\n  profileId?: string;\n  name?: string;\n  avatarProps?: AvatarProps;\n  badgeProps?: BadgeProps;\n} & (\n  | {\n      badgeUrl: string;\n      badgeAltText: string;\n      badgeStatusIcon?: never;\n    }\n  | {\n      badgeUrl?: never;\n      badgeAltText?: never;\n      badgeStatusIcon: Sentiment;\n    }\n  | {\n      badgeUrl?: never;\n      badgeAltText?: never;\n      badgeStatusIcon?: never;\n    }\n);\n\nconst AvatarWrapper = ({\n  url,\n  profileType,\n  profileId,\n  badgeUrl,\n  badgeAltText,\n  badgeStatusIcon,\n  name,\n  avatarProps,\n  badgeProps,\n}: AvatarWrapperProps) => {\n  const [hasImageLoadError, setImageLoadError] = useState(false);\n  const isBusinessProfile = profileType === ProfileType.BUSINESS;\n\n  // Reset the errored state when url changes\n  useEffect(() => setImageLoadError(false), [url]);\n\n  const getAvatarProps = () => {\n    if (url && !hasImageLoadError) {\n      return {\n        type: AvatarType.THUMBNAIL,\n        children: <img src={url} alt=\"\" onError={() => setImageLoadError(true)} />,\n        ...avatarProps,\n      };\n    }\n    if (profileType) {\n      return {\n        type: AvatarType.ICON,\n        children: isBusinessProfile ? <BriefcaseIcon size=\"24\" /> : <ProfileIcon size=\"24\" />,\n        ...avatarProps,\n      };\n    }\n    if (name) {\n      return {\n        type: AvatarType.INITIALS,\n        children: <>{getInitials(name)}</>,\n        backgroundColorSeed: profileId?.toString(),\n        ...avatarProps,\n      };\n    }\n    return {\n      type: AvatarType.ICON,\n      children: <ProfileIcon size=\"24\" />,\n      ...avatarProps,\n    };\n  };\n\n  return (\n    <OptionalBadge\n      url={badgeUrl}\n      altText={badgeAltText}\n      statusIcon={badgeStatusIcon}\n      {...badgeProps}\n    >\n      <Avatar size={Size.MEDIUM} {...getAvatarProps()} />\n    </OptionalBadge>\n  );\n};\n\nfunction getInitials(name: string) {\n  const allInitials = name\n    .split(' ')\n    .map((part) => part[0])\n    .join('')\n    .toUpperCase();\n\n  if (allInitials.length === 1) {\n    return allInitials[0];\n  }\n\n  return allInitials[0] + allInitials.slice(-1);\n}\n\nexport default AvatarWrapper;\n"],"names":["OptionalBadge","url","altText","statusIcon","children","rest","_jsx","Badge","badge","src","alt","StatusIcon","sentiment","size","Size","SMALL","_Fragment","AvatarWrapper","profileType","profileId","badgeUrl","badgeAltText","badgeStatusIcon","name","avatarProps","badgeProps","hasImageLoadError","setImageLoadError","useState","isBusinessProfile","ProfileType","BUSINESS","useEffect","getAvatarProps","type","AvatarType","THUMBNAIL","onError","ICON","BriefcaseIcon","ProfileIcon","INITIALS","getInitials","backgroundColorSeed","toString","Avatar","MEDIUM","allInitials","split","map","part","join","toUpperCase","length","slice"],"mappings":"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"}