@transferwise/components 0.0.0-experimental-daa78e3 → 0.0.0-experimental-c76c3bc

package/build/alert/Alert.js

@@ -8,7 +8,6 @@ var Body = require('../body/Body.js');
 var CloseButton = require('../common/closeButton/CloseButton.js');
 var StatusIcon = require('../statusIcon/StatusIcon.js');
 var Title = require('../title/Title.js');
-var constants = require('../constants.js');
 var InlineMarkdown = require('./inlineMarkdown/InlineMarkdown.js');
 var Action = require('../common/action/Action.js');
 var jsxRuntime = require('react/jsx-runtime');
@@ -79,19 +78,11 @@ function Alert({
       logActionRequired.logActionRequired(`Alert component has deprecated '${type}' value for the 'type' prop. Please use '${resolvedType}' instead.`);
     }
   }, [resolvedType, type]);
-  const [shouldFire, setShouldFire] = React.useState();
-  const [shouldShow, setShouldShow] = React.useState();
-  React.useEffect(() => {
-    if (shouldShow === undefined || !active) {
-      setShouldShow(active);
-    } else {
-      setTimeout(() => setShouldShow(active), constants.WDS_LIVE_REGION_DELAY_MS);
-    }
-  }, [active, shouldShow]);
+  const [shouldFire, setShouldFire] = React.useState(false);
   const closeButtonReference = React.useRef(null);
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     role: resolvedType === sentiment.Sentiment.NEGATIVE ? 'alert' : 'status',
-    children: shouldShow && /*#__PURE__*/jsxRuntime.jsxs("div", {
+    children: active && /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: clsx.clsx('alert d-flex', `alert-${resolvedType}`, arrow != null && alertArrowClassNames(arrow), className),
       "data-testid": "alert",
       onTouchStart: () => setShouldFire(true),

package/build/alert/Alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.js","sources":["../../src/alert/Alert.tsx"],"sourcesContent":["import { clsx } from 'clsx';\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';\nimport { WDS_LIVE_REGION_DELAY_MS } from '../constants';\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  /** Controls rendering of the Alert component. <br /> Toggle this prop instead using conditional rendering and logical AND (&&) operator, to make the component work with screen readers. */\n  active?: boolean;\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  active = true,\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<boolean>();\n\n  const [shouldShow, setShouldShow] = useState<boolean>();\n  useEffect(() => {\n    if (shouldShow === undefined || !active) {\n      setShouldShow(active);\n    } else {\n      setTimeout(() => setShouldShow(active), WDS_LIVE_REGION_DELAY_MS);\n    }\n  }, [active, shouldShow]);\n\n  const closeButtonReference = useRef<HTMLButtonElement>(null);\n\n  return (\n    <div role={resolvedType === Sentiment.NEGATIVE ? 'alert' : 'status'}>\n      {shouldShow && (\n        <div\n          className={clsx(\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={clsx('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>\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} variant=\"action-button\" 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    </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","active","useEffect","undefined","logActionRequired","resolvedType","shouldFire","setShouldFire","useState","shouldShow","setShouldShow","setTimeout","WDS_LIVE_REGION_DELAY_MS","closeButtonReference","useRef","_jsx","role","Sentiment","NEGATIVE","_jsxs","clsx","alertArrowClassNames","onTouchStart","onTouchEnd","event","href","target","Node","current","contains","window","top","open","location","assign","onTouchMove","StatusIcon","Size","LARGE","sentiment","Title","Typography","TITLE_BODY","Body","as","BODY_LARGE","InlineMarkdown","Action","CloseButton","ref","onClick"],"mappings":"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"}
+{"version":3,"file":"Alert.js","sources":["../../src/alert/Alert.tsx"],"sourcesContent":["import { clsx } from 'clsx';\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  /** Controls rendering of the Alert component. <br /> Toggle this prop instead using conditional rendering and logical AND (&&) operator, to make the component work with screen readers. */\n  active?: boolean;\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  active = true,\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 role={resolvedType === Sentiment.NEGATIVE ? 'alert' : 'status'}>\n      {active && (\n        <div\n          className={clsx(\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={clsx('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>\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} variant=\"action-button\" 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    </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","active","useEffect","undefined","logActionRequired","resolvedType","shouldFire","setShouldFire","useState","closeButtonReference","useRef","_jsx","role","Sentiment","NEGATIVE","_jsxs","clsx","alertArrowClassNames","onTouchStart","onTouchEnd","event","href","target","Node","current","contains","window","top","open","location","assign","onTouchMove","StatusIcon","Size","LARGE","sentiment","Title","Typography","TITLE_BODY","Body","as","BODY_LARGE","InlineMarkdown","Action","CloseButton","ref","onClick"],"mappings":"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"}

package/build/alert/Alert.mjs

@@ -4,7 +4,6 @@ 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 { WDS_LIVE_REGION_DELAY_MS } from '../constants.mjs';
 import InlineMarkdown from './inlineMarkdown/InlineMarkdown.mjs';
 import { Action } from '../common/action/Action.mjs';
 import { jsx, jsxs } from 'react/jsx-runtime';
@@ -75,19 +74,11 @@ function Alert({
       logActionRequired(`Alert component has deprecated '${type}' value for the 'type' prop. Please use '${resolvedType}' instead.`);
     }
   }, [resolvedType, type]);
-  const [shouldFire, setShouldFire] = useState();
-  const [shouldShow, setShouldShow] = useState();
-  useEffect(() => {
-    if (shouldShow === undefined || !active) {
-      setShouldShow(active);
-    } else {
-      setTimeout(() => setShouldShow(active), WDS_LIVE_REGION_DELAY_MS);
-    }
-  }, [active, shouldShow]);
+  const [shouldFire, setShouldFire] = useState(false);
   const closeButtonReference = useRef(null);
   return /*#__PURE__*/jsx("div", {
     role: resolvedType === Sentiment.NEGATIVE ? 'alert' : 'status',
-    children: shouldShow && /*#__PURE__*/jsxs("div", {
+    children: active && /*#__PURE__*/jsxs("div", {
       className: clsx('alert d-flex', `alert-${resolvedType}`, arrow != null && alertArrowClassNames(arrow), className),
       "data-testid": "alert",
       onTouchStart: () => setShouldFire(true),

package/build/alert/Alert.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.mjs","sources":["../../src/alert/Alert.tsx"],"sourcesContent":["import { clsx } from 'clsx';\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';\nimport { WDS_LIVE_REGION_DELAY_MS } from '../constants';\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  /** Controls rendering of the Alert component. <br /> Toggle this prop instead using conditional rendering and logical AND (&&) operator, to make the component work with screen readers. */\n  active?: boolean;\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  active = true,\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<boolean>();\n\n  const [shouldShow, setShouldShow] = useState<boolean>();\n  useEffect(() => {\n    if (shouldShow === undefined || !active) {\n      setShouldShow(active);\n    } else {\n      setTimeout(() => setShouldShow(active), WDS_LIVE_REGION_DELAY_MS);\n    }\n  }, [active, shouldShow]);\n\n  const closeButtonReference = useRef<HTMLButtonElement>(null);\n\n  return (\n    <div role={resolvedType === Sentiment.NEGATIVE ? 'alert' : 'status'}>\n      {shouldShow && (\n        <div\n          className={clsx(\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={clsx('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>\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} variant=\"action-button\" 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    </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","active","useEffect","undefined","logActionRequired","resolvedType","shouldFire","setShouldFire","useState","shouldShow","setShouldShow","setTimeout","WDS_LIVE_REGION_DELAY_MS","closeButtonReference","useRef","_jsx","role","Sentiment","NEGATIVE","_jsxs","clsx","alertArrowClassNames","onTouchStart","onTouchEnd","event","href","target","Node","current","contains","window","top","open","location","assign","onTouchMove","StatusIcon","Size","LARGE","sentiment","Title","Typography","TITLE_BODY","Body","as","BODY_LARGE","InlineMarkdown","Action","CloseButton","ref","onClick"],"mappings":"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"}
+{"version":3,"file":"Alert.mjs","sources":["../../src/alert/Alert.tsx"],"sourcesContent":["import { clsx } from 'clsx';\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  /** Controls rendering of the Alert component. <br /> Toggle this prop instead using conditional rendering and logical AND (&&) operator, to make the component work with screen readers. */\n  active?: boolean;\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  active = true,\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 role={resolvedType === Sentiment.NEGATIVE ? 'alert' : 'status'}>\n      {active && (\n        <div\n          className={clsx(\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={clsx('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>\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} variant=\"action-button\" 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    </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","active","useEffect","undefined","logActionRequired","resolvedType","shouldFire","setShouldFire","useState","closeButtonReference","useRef","_jsx","role","Sentiment","NEGATIVE","_jsxs","clsx","alertArrowClassNames","onTouchStart","onTouchEnd","event","href","target","Node","current","contains","window","top","open","location","assign","onTouchMove","StatusIcon","Size","LARGE","sentiment","Title","Typography","TITLE_BODY","Body","as","BODY_LARGE","InlineMarkdown","Action","CloseButton","ref","onClick"],"mappings":"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"}

package/build/avatar/Avatar.js

@@ -3,8 +3,10 @@
 var clsx = require('clsx');
 var React = require('react');
 var Circle = require('../common/circle/Circle.js');
+var useMedia = require('../common/hooks/useMedia.js');
 var jsxRuntime = require('react/jsx-runtime');
 var colors = require('../common/colors.js');
+var breakpoint = require('../common/propsValues/breakpoint.js');
 var theme = require('../common/theme.js');
 
 const backwardsCompatibleSize = size => {
@@ -32,6 +34,7 @@ const Avatar = ({
 }) => {
   const backgroundColorFromSeed = React.useMemo(() => !backgroundColor && backgroundColorSeed ? colors.getBrandColorFromSeed(backgroundColorSeed) : undefined, [backgroundColor, backgroundColorSeed]);
   const size = backwardsCompatibleSize(sizeFromProps);
+  useMedia.useMedia(`(max-width: ${breakpoint.Breakpoint.ZOOM_400}px)`);
   return /*#__PURE__*/jsxRuntime.jsx(Circle, {
     size: size,
     fixedSize: true,
@@ -46,6 +49,8 @@ const Avatar = ({
       fixedSize: true,
       className: "tw-avatar__content",
       style: {
+        // @ts-expect-error CSS custom props allowed
+        '--circle-icon-size': '16px',
         backgroundColor: backgroundColor || backgroundColorFromSeed
       },
       children: children

package/build/avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sources":["../../src/avatar/Avatar.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useMemo } from 'react';\n\nimport { getBrandColorFromSeed, Theme } from '../common';\n\nimport Circle from '../common/circle';\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  'aria-label'?: string;\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  'aria-label': ariaLabel,\n}) => {\n  const backgroundColorFromSeed = useMemo<string | undefined>(\n    () =>\n      !backgroundColor && backgroundColorSeed\n        ? getBrandColorFromSeed(backgroundColorSeed)\n        : undefined,\n    [backgroundColor, backgroundColorSeed],\n  );\n\n  const size = backwardsCompatibleSize(sizeFromProps);\n\n  return (\n    <Circle\n      size={size}\n      fixedSize\n      className={clsx('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      aria-label={ariaLabel}\n    >\n      <Circle\n        size={size}\n        fixedSize\n        className=\"tw-avatar__content\"\n        style={{\n          backgroundColor: backgroundColor || backgroundColorFromSeed,\n        }}\n      >\n        {children}\n      </Circle>\n    </Circle>\n  );\n};\n\nexport default Avatar;\n"],"names":["backwardsCompatibleSize","size","Avatar","backgroundColor","backgroundColorSeed","children","className","outlined","sizeFromProps","theme","Theme","LIGHT","type","ariaLabel","backgroundColorFromSeed","useMemo","getBrandColorFromSeed","undefined","_jsx","Circle","fixedSize","clsx","Boolean","style"],"mappings":";;;;;;;;;AA6BA,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,WAAW;AAClB,EAAA,YAAY,EAAEC,SAAAA;AAAS,CACxB,KAAI;EACH,MAAMC,uBAAuB,GAAGC,aAAO,CACrC,MACE,CAACZ,eAAe,IAAIC,mBAAmB,GACnCY,4BAAqB,CAACZ,mBAAmB,CAAC,GAC1Ca,SAAS,EACf,CAACd,eAAe,EAAEC,mBAAmB,CAAC,CACvC,CAAA;AAED,EAAA,MAAMH,IAAI,GAAGD,uBAAuB,CAACQ,aAAa,CAAC,CAAA;EAEnD,oBACEU,cAAA,CAACC,MAAM,EAAA;AACLlB,IAAAA,IAAI,EAAEA,IAAK;IACXmB,SAAS,EAAA,IAAA;AACTd,IAAAA,SAAS,EAAEe,SAAI,CAAC,WAAW,EAAEf,SAAS,EAAE,CAAcL,WAAAA,EAAAA,IAAI,CAAE,CAAA,EAAE,CAAcW,WAAAA,EAAAA,IAAI,EAAE,EAAE;AAClF,MAAA,qBAAqB,EAAEL,QAAQ;AAC/B,MAAA,oBAAoB,EAAEe,OAAO,CAACR,uBAAuB,CAAC;MACtD,oBAAoB,EAAEF,IAAI,KAAK,UAAA;AAChC,KAAA,CAAE;AACH,IAAA,YAAA,EAAYC,SAAU;IAAAR,QAAA,eAEtBa,cAAA,CAACC,MAAM,EAAA;AACLlB,MAAAA,IAAI,EAAEA,IAAK;MACXmB,SAAS,EAAA,IAAA;AACTd,MAAAA,SAAS,EAAC,oBAAoB;AAC9BiB,MAAAA,KAAK,EAAE;QACLpB,eAAe,EAAEA,eAAe,IAAIW,uBAAAA;OACpC;AAAAT,MAAAA,QAAA,EAEDA,QAAAA;KACK,CAAA;AACV,GAAQ,CAAC,CAAA;AAEb;;;;"}
+{"version":3,"file":"Avatar.js","sources":["../../src/avatar/Avatar.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useMemo } from 'react';\n\nimport { Breakpoint, getBrandColorFromSeed, Theme } from '../common';\n\nimport Circle from '../common/circle';\nimport { useMedia } from '../common/hooks/useMedia';\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  'aria-label'?: string;\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  'aria-label': ariaLabel,\n}) => {\n  const backgroundColorFromSeed = useMemo<string | undefined>(\n    () =>\n      !backgroundColor && backgroundColorSeed\n        ? getBrandColorFromSeed(backgroundColorSeed)\n        : undefined,\n    [backgroundColor, backgroundColorSeed],\n  );\n\n  const size = backwardsCompatibleSize(sizeFromProps);\n  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n  return (\n    <Circle\n      size={size}\n      fixedSize\n      className={clsx('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      aria-label={ariaLabel}\n    >\n      <Circle\n        size={size}\n        fixedSize\n        className=\"tw-avatar__content\"\n        style={{\n          // @ts-expect-error CSS custom props allowed\n          '--circle-icon-size': '16px',\n          backgroundColor: backgroundColor || backgroundColorFromSeed,\n        }}\n      >\n        {children}\n      </Circle>\n    </Circle>\n  );\n};\n\nexport default Avatar;\n"],"names":["backwardsCompatibleSize","size","Avatar","backgroundColor","backgroundColorSeed","children","className","outlined","sizeFromProps","theme","Theme","LIGHT","type","ariaLabel","backgroundColorFromSeed","useMemo","getBrandColorFromSeed","undefined","useMedia","Breakpoint","ZOOM_400","_jsx","Circle","fixedSize","clsx","Boolean","style"],"mappings":";;;;;;;;;;;AA8BA,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,WAAW;AAClB,EAAA,YAAY,EAAEC,SAAAA;AAAS,CACxB,KAAI;EACH,MAAMC,uBAAuB,GAAGC,aAAO,CACrC,MACE,CAACZ,eAAe,IAAIC,mBAAmB,GACnCY,4BAAqB,CAACZ,mBAAmB,CAAC,GAC1Ca,SAAS,EACf,CAACd,eAAe,EAAEC,mBAAmB,CAAC,CACvC,CAAA;AAED,EAAA,MAAMH,IAAI,GAAGD,uBAAuB,CAACQ,aAAa,CAAC,CAAA;EAC5BU,iBAAQ,CAAC,eAAeC,qBAAU,CAACC,QAAQ,CAAA,GAAA,CAAK,EAAC;EACxE,oBACEC,cAAA,CAACC,MAAM,EAAA;AACLrB,IAAAA,IAAI,EAAEA,IAAK;IACXsB,SAAS,EAAA,IAAA;AACTjB,IAAAA,SAAS,EAAEkB,SAAI,CAAC,WAAW,EAAElB,SAAS,EAAE,CAAcL,WAAAA,EAAAA,IAAI,CAAE,CAAA,EAAE,CAAcW,WAAAA,EAAAA,IAAI,EAAE,EAAE;AAClF,MAAA,qBAAqB,EAAEL,QAAQ;AAC/B,MAAA,oBAAoB,EAAEkB,OAAO,CAACX,uBAAuB,CAAC;MACtD,oBAAoB,EAAEF,IAAI,KAAK,UAAA;AAChC,KAAA,CAAE;AACH,IAAA,YAAA,EAAYC,SAAU;IAAAR,QAAA,eAEtBgB,cAAA,CAACC,MAAM,EAAA;AACLrB,MAAAA,IAAI,EAAEA,IAAK;MACXsB,SAAS,EAAA,IAAA;AACTjB,MAAAA,SAAS,EAAC,oBAAoB;AAC9BoB,MAAAA,KAAK,EAAE;AACL;AACA,QAAA,oBAAoB,EAAE,MAAM;QAC5BvB,eAAe,EAAEA,eAAe,IAAIW,uBAAAA;OACpC;AAAAT,MAAAA,QAAA,EAEDA,QAAAA;KACK,CAAA;AACV,GAAQ,CAAC,CAAA;AAEb;;;;"}

package/build/avatar/Avatar.mjs

@@ -1,8 +1,10 @@
 import { clsx } from 'clsx';
 import { useMemo } from 'react';
 import Circle from '../common/circle/Circle.mjs';
+import { useMedia } from '../common/hooks/useMedia.mjs';
 import { jsx } from 'react/jsx-runtime';
 import { getBrandColorFromSeed } from '../common/colors.mjs';
+import { Breakpoint } from '../common/propsValues/breakpoint.mjs';
 import { Theme } from '../common/theme.mjs';
 
 const backwardsCompatibleSize = size => {
@@ -30,6 +32,7 @@ const Avatar = ({
 }) => {
   const backgroundColorFromSeed = useMemo(() => !backgroundColor && backgroundColorSeed ? getBrandColorFromSeed(backgroundColorSeed) : undefined, [backgroundColor, backgroundColorSeed]);
   const size = backwardsCompatibleSize(sizeFromProps);
+  useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);
   return /*#__PURE__*/jsx(Circle, {
     size: size,
     fixedSize: true,
@@ -44,6 +47,8 @@ const Avatar = ({
       fixedSize: true,
       className: "tw-avatar__content",
       style: {
+        // @ts-expect-error CSS custom props allowed
+        '--circle-icon-size': '16px',
         backgroundColor: backgroundColor || backgroundColorFromSeed
       },
       children: children

package/build/avatar/Avatar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.mjs","sources":["../../src/avatar/Avatar.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useMemo } from 'react';\n\nimport { getBrandColorFromSeed, Theme } from '../common';\n\nimport Circle from '../common/circle';\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  'aria-label'?: string;\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  'aria-label': ariaLabel,\n}) => {\n  const backgroundColorFromSeed = useMemo<string | undefined>(\n    () =>\n      !backgroundColor && backgroundColorSeed\n        ? getBrandColorFromSeed(backgroundColorSeed)\n        : undefined,\n    [backgroundColor, backgroundColorSeed],\n  );\n\n  const size = backwardsCompatibleSize(sizeFromProps);\n\n  return (\n    <Circle\n      size={size}\n      fixedSize\n      className={clsx('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      aria-label={ariaLabel}\n    >\n      <Circle\n        size={size}\n        fixedSize\n        className=\"tw-avatar__content\"\n        style={{\n          backgroundColor: backgroundColor || backgroundColorFromSeed,\n        }}\n      >\n        {children}\n      </Circle>\n    </Circle>\n  );\n};\n\nexport default Avatar;\n"],"names":["backwardsCompatibleSize","size","Avatar","backgroundColor","backgroundColorSeed","children","className","outlined","sizeFromProps","theme","Theme","LIGHT","type","ariaLabel","backgroundColorFromSeed","useMemo","getBrandColorFromSeed","undefined","_jsx","Circle","fixedSize","clsx","Boolean","style"],"mappings":";;;;;;;AA6BA,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,WAAW;AAClB,EAAA,YAAY,EAAEC,SAAAA;AAAS,CACxB,KAAI;EACH,MAAMC,uBAAuB,GAAGC,OAAO,CACrC,MACE,CAACZ,eAAe,IAAIC,mBAAmB,GACnCY,qBAAqB,CAACZ,mBAAmB,CAAC,GAC1Ca,SAAS,EACf,CAACd,eAAe,EAAEC,mBAAmB,CAAC,CACvC,CAAA;AAED,EAAA,MAAMH,IAAI,GAAGD,uBAAuB,CAACQ,aAAa,CAAC,CAAA;EAEnD,oBACEU,GAAA,CAACC,MAAM,EAAA;AACLlB,IAAAA,IAAI,EAAEA,IAAK;IACXmB,SAAS,EAAA,IAAA;AACTd,IAAAA,SAAS,EAAEe,IAAI,CAAC,WAAW,EAAEf,SAAS,EAAE,CAAcL,WAAAA,EAAAA,IAAI,CAAE,CAAA,EAAE,CAAcW,WAAAA,EAAAA,IAAI,EAAE,EAAE;AAClF,MAAA,qBAAqB,EAAEL,QAAQ;AAC/B,MAAA,oBAAoB,EAAEe,OAAO,CAACR,uBAAuB,CAAC;MACtD,oBAAoB,EAAEF,IAAI,KAAK,UAAA;AAChC,KAAA,CAAE;AACH,IAAA,YAAA,EAAYC,SAAU;IAAAR,QAAA,eAEtBa,GAAA,CAACC,MAAM,EAAA;AACLlB,MAAAA,IAAI,EAAEA,IAAK;MACXmB,SAAS,EAAA,IAAA;AACTd,MAAAA,SAAS,EAAC,oBAAoB;AAC9BiB,MAAAA,KAAK,EAAE;QACLpB,eAAe,EAAEA,eAAe,IAAIW,uBAAAA;OACpC;AAAAT,MAAAA,QAAA,EAEDA,QAAAA;KACK,CAAA;AACV,GAAQ,CAAC,CAAA;AAEb;;;;"}
+{"version":3,"file":"Avatar.mjs","sources":["../../src/avatar/Avatar.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useMemo } from 'react';\n\nimport { Breakpoint, getBrandColorFromSeed, Theme } from '../common';\n\nimport Circle from '../common/circle';\nimport { useMedia } from '../common/hooks/useMedia';\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  'aria-label'?: string;\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  'aria-label': ariaLabel,\n}) => {\n  const backgroundColorFromSeed = useMemo<string | undefined>(\n    () =>\n      !backgroundColor && backgroundColorSeed\n        ? getBrandColorFromSeed(backgroundColorSeed)\n        : undefined,\n    [backgroundColor, backgroundColorSeed],\n  );\n\n  const size = backwardsCompatibleSize(sizeFromProps);\n  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n  return (\n    <Circle\n      size={size}\n      fixedSize\n      className={clsx('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      aria-label={ariaLabel}\n    >\n      <Circle\n        size={size}\n        fixedSize\n        className=\"tw-avatar__content\"\n        style={{\n          // @ts-expect-error CSS custom props allowed\n          '--circle-icon-size': '16px',\n          backgroundColor: backgroundColor || backgroundColorFromSeed,\n        }}\n      >\n        {children}\n      </Circle>\n    </Circle>\n  );\n};\n\nexport default Avatar;\n"],"names":["backwardsCompatibleSize","size","Avatar","backgroundColor","backgroundColorSeed","children","className","outlined","sizeFromProps","theme","Theme","LIGHT","type","ariaLabel","backgroundColorFromSeed","useMemo","getBrandColorFromSeed","undefined","useMedia","Breakpoint","ZOOM_400","_jsx","Circle","fixedSize","clsx","Boolean","style"],"mappings":";;;;;;;;;AA8BA,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,WAAW;AAClB,EAAA,YAAY,EAAEC,SAAAA;AAAS,CACxB,KAAI;EACH,MAAMC,uBAAuB,GAAGC,OAAO,CACrC,MACE,CAACZ,eAAe,IAAIC,mBAAmB,GACnCY,qBAAqB,CAACZ,mBAAmB,CAAC,GAC1Ca,SAAS,EACf,CAACd,eAAe,EAAEC,mBAAmB,CAAC,CACvC,CAAA;AAED,EAAA,MAAMH,IAAI,GAAGD,uBAAuB,CAACQ,aAAa,CAAC,CAAA;EAC5BU,QAAQ,CAAC,eAAeC,UAAU,CAACC,QAAQ,CAAA,GAAA,CAAK,EAAC;EACxE,oBACEC,GAAA,CAACC,MAAM,EAAA;AACLrB,IAAAA,IAAI,EAAEA,IAAK;IACXsB,SAAS,EAAA,IAAA;AACTjB,IAAAA,SAAS,EAAEkB,IAAI,CAAC,WAAW,EAAElB,SAAS,EAAE,CAAcL,WAAAA,EAAAA,IAAI,CAAE,CAAA,EAAE,CAAcW,WAAAA,EAAAA,IAAI,EAAE,EAAE;AAClF,MAAA,qBAAqB,EAAEL,QAAQ;AAC/B,MAAA,oBAAoB,EAAEkB,OAAO,CAACX,uBAAuB,CAAC;MACtD,oBAAoB,EAAEF,IAAI,KAAK,UAAA;AAChC,KAAA,CAAE;AACH,IAAA,YAAA,EAAYC,SAAU;IAAAR,QAAA,eAEtBgB,GAAA,CAACC,MAAM,EAAA;AACLrB,MAAAA,IAAI,EAAEA,IAAK;MACXsB,SAAS,EAAA,IAAA;AACTjB,MAAAA,SAAS,EAAC,oBAAoB;AAC9BoB,MAAAA,KAAK,EAAE;AACL;AACA,QAAA,oBAAoB,EAAE,MAAM;QAC5BvB,eAAe,EAAEA,eAAe,IAAIW,uBAAAA;OACpC;AAAAT,MAAAA,QAAA,EAEDA,QAAAA;KACK,CAAA;AACV,GAAQ,CAAC,CAAA;AAEb;;;;"}

package/build/circularButton/CircularButton.js

@@ -32,7 +32,7 @@ const CircularButton = ({
       // @ts-expect-error it's input[type=button] element
       ,
       type: "button",
-      size: isTinyViewport ? 64 : 56,
+      size: isTinyViewport ? 72 : 56,
       "aria-label": children,
       className: classes,
       disabled: disabled,

package/build/circularButton/CircularButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"CircularButton.js","sources":["../../src/circularButton/CircularButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { cloneElement } from 'react';\n\nimport Body from '../body/Body';\nimport { typeClassMap, priorityClassMap } from '../button/classMap';\nimport { Breakpoint, ControlType, Priority, Typography } from '../common';\nimport Circle from '../common/circle';\nimport { useMedia } from '../common/hooks/useMedia';\n\nexport interface CircularButtonProps {\n  className?: string;\n  children: string;\n  disabled?: boolean;\n  icon: React.ReactElement<{ size?: unknown }>;\n  onClick?: React.MouseEventHandler<HTMLInputElement>;\n  priority?: `${Priority.PRIMARY | Priority.SECONDARY}`;\n  type?: `${ControlType.ACCENT | ControlType.POSITIVE | ControlType.NEGATIVE}`;\n}\n\nconst CircularButton = ({\n  className,\n  children,\n  disabled,\n  icon,\n  priority = Priority.PRIMARY,\n  type = ControlType.ACCENT,\n  ...rest\n}: CircularButtonProps) => {\n  const classes = clsx('btn np-btn', 'm-b-1', typeClassMap[type], priorityClassMap[priority]);\n\n  const iconElement = Number(icon.props.size) !== 24 ? cloneElement(icon, { size: 24 }) : icon;\n\n  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n\n  return (\n    <label className={clsx('np-circular-btn', priority, type, disabled && 'disabled', className)}>\n      <Circle\n        as=\"input\"\n        // @ts-expect-error it's input[type=button] element\n        type=\"button\"\n        size={isTinyViewport ? 64 : 56}\n        aria-label={children}\n        className={classes}\n        disabled={disabled}\n        {...rest}\n      />\n      {iconElement}\n      <Body as=\"span\" className=\"np-circular-btn__label\" type={Typography.BODY_DEFAULT_BOLD}>\n        {children}\n      </Body>\n    </label>\n  );\n};\n\nexport default CircularButton;\n"],"names":["CircularButton","className","children","disabled","icon","priority","Priority","PRIMARY","type","ControlType","ACCENT","rest","classes","clsx","typeClassMap","priorityClassMap","iconElement","Number","props","size","cloneElement","isTinyViewport","useMedia","Breakpoint","ZOOM_400","_jsxs","_jsx","Circle","as","Body","Typography","BODY_DEFAULT_BOLD"],"mappings":";;;;;;;;;;;;;AAmBMA,MAAAA,cAAc,GAAGA,CAAC;EACtBC,SAAS;EACTC,QAAQ;EACRC,QAAQ;EACRC,IAAI;EACJC,QAAQ,GAAGC,gBAAQ,CAACC,OAAO;EAC3BC,IAAI,GAAGC,mBAAW,CAACC,MAAM;EACzB,GAAGC,IAAAA;AACiB,CAAA,KAAI;AACxB,EAAA,MAAMC,OAAO,GAAGC,SAAI,CAAC,YAAY,EAAE,OAAO,EAAEC,qBAAY,CAACN,IAAI,CAAC,EAAEO,yBAAgB,CAACV,QAAQ,CAAC,CAAC,CAAA;AAE3F,EAAA,MAAMW,WAAW,GAAGC,MAAM,CAACb,IAAI,CAACc,KAAK,CAACC,IAAI,CAAC,KAAK,EAAE,gBAAGC,kBAAY,CAAChB,IAAI,EAAE;AAAEe,IAAAA,IAAI,EAAE,EAAA;GAAI,CAAC,GAAGf,IAAI,CAAA;EAE5F,MAAMiB,cAAc,GAAGC,iBAAQ,CAAC,eAAeC,qBAAU,CAACC,QAAQ,CAAA,GAAA,CAAK,CAAC,CAAA;AAExE,EAAA,oBACEC,eAAA,CAAA,OAAA,EAAA;AAAOxB,IAAAA,SAAS,EAAEY,SAAI,CAAC,iBAAiB,EAAER,QAAQ,EAAEG,IAAI,EAAEL,QAAQ,IAAI,UAAU,EAAEF,SAAS,CAAE;IAAAC,QAAA,EAAA,cAC3FwB,cAAA,CAACC,MAAM,EAAA;AACLC,MAAAA,EAAE,EAAC,OAAA;AACH;AAAA;AACApB,MAAAA,IAAI,EAAC,QAAQ;AACbW,MAAAA,IAAI,EAAEE,cAAc,GAAG,EAAE,GAAG,EAAG;AAC/B,MAAA,YAAA,EAAYnB,QAAS;AACrBD,MAAAA,SAAS,EAAEW,OAAQ;AACnBT,MAAAA,QAAQ,EAAEA,QAAS;MAAA,GACfQ,IAAAA;AAAI,KAEV,CAAA,EAACK,WAAW,eACZU,cAAA,CAACG,IAAI,EAAA;AAACD,MAAAA,EAAE,EAAC,MAAM;AAAC3B,MAAAA,SAAS,EAAC,wBAAwB;MAACO,IAAI,EAAEsB,qBAAU,CAACC,iBAAkB;AAAA7B,MAAAA,QAAA,EACnFA,QAAAA;AAAQ,KACL,CACR,CAAA;AAAA,GAAO,CAAC,CAAA;AAEZ;;;;"}
+{"version":3,"file":"CircularButton.js","sources":["../../src/circularButton/CircularButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { cloneElement } from 'react';\n\nimport Body from '../body/Body';\nimport { typeClassMap, priorityClassMap } from '../button/classMap';\nimport { Breakpoint, ControlType, Priority, Typography } from '../common';\nimport Circle from '../common/circle';\nimport { useMedia } from '../common/hooks/useMedia';\n\nexport interface CircularButtonProps {\n  className?: string;\n  children: string;\n  disabled?: boolean;\n  icon: React.ReactElement<{ size?: unknown }>;\n  onClick?: React.MouseEventHandler<HTMLInputElement>;\n  priority?: `${Priority.PRIMARY | Priority.SECONDARY}`;\n  type?: `${ControlType.ACCENT | ControlType.POSITIVE | ControlType.NEGATIVE}`;\n}\n\nconst CircularButton = ({\n  className,\n  children,\n  disabled,\n  icon,\n  priority = Priority.PRIMARY,\n  type = ControlType.ACCENT,\n  ...rest\n}: CircularButtonProps) => {\n  const classes = clsx('btn np-btn', 'm-b-1', typeClassMap[type], priorityClassMap[priority]);\n\n  const iconElement = Number(icon.props.size) !== 24 ? cloneElement(icon, { size: 24 }) : icon;\n\n  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n\n  return (\n    <label className={clsx('np-circular-btn', priority, type, disabled && 'disabled', className)}>\n      <Circle\n        as=\"input\"\n        // @ts-expect-error it's input[type=button] element\n        type=\"button\"\n        size={isTinyViewport ? 72 : 56}\n        aria-label={children}\n        className={classes}\n        disabled={disabled}\n        {...rest}\n      />\n      {iconElement}\n      <Body as=\"span\" className=\"np-circular-btn__label\" type={Typography.BODY_DEFAULT_BOLD}>\n        {children}\n      </Body>\n    </label>\n  );\n};\n\nexport default CircularButton;\n"],"names":["CircularButton","className","children","disabled","icon","priority","Priority","PRIMARY","type","ControlType","ACCENT","rest","classes","clsx","typeClassMap","priorityClassMap","iconElement","Number","props","size","cloneElement","isTinyViewport","useMedia","Breakpoint","ZOOM_400","_jsxs","_jsx","Circle","as","Body","Typography","BODY_DEFAULT_BOLD"],"mappings":";;;;;;;;;;;;;AAmBMA,MAAAA,cAAc,GAAGA,CAAC;EACtBC,SAAS;EACTC,QAAQ;EACRC,QAAQ;EACRC,IAAI;EACJC,QAAQ,GAAGC,gBAAQ,CAACC,OAAO;EAC3BC,IAAI,GAAGC,mBAAW,CAACC,MAAM;EACzB,GAAGC,IAAAA;AACiB,CAAA,KAAI;AACxB,EAAA,MAAMC,OAAO,GAAGC,SAAI,CAAC,YAAY,EAAE,OAAO,EAAEC,qBAAY,CAACN,IAAI,CAAC,EAAEO,yBAAgB,CAACV,QAAQ,CAAC,CAAC,CAAA;AAE3F,EAAA,MAAMW,WAAW,GAAGC,MAAM,CAACb,IAAI,CAACc,KAAK,CAACC,IAAI,CAAC,KAAK,EAAE,gBAAGC,kBAAY,CAAChB,IAAI,EAAE;AAAEe,IAAAA,IAAI,EAAE,EAAA;GAAI,CAAC,GAAGf,IAAI,CAAA;EAE5F,MAAMiB,cAAc,GAAGC,iBAAQ,CAAC,eAAeC,qBAAU,CAACC,QAAQ,CAAA,GAAA,CAAK,CAAC,CAAA;AAExE,EAAA,oBACEC,eAAA,CAAA,OAAA,EAAA;AAAOxB,IAAAA,SAAS,EAAEY,SAAI,CAAC,iBAAiB,EAAER,QAAQ,EAAEG,IAAI,EAAEL,QAAQ,IAAI,UAAU,EAAEF,SAAS,CAAE;IAAAC,QAAA,EAAA,cAC3FwB,cAAA,CAACC,MAAM,EAAA;AACLC,MAAAA,EAAE,EAAC,OAAA;AACH;AAAA;AACApB,MAAAA,IAAI,EAAC,QAAQ;AACbW,MAAAA,IAAI,EAAEE,cAAc,GAAG,EAAE,GAAG,EAAG;AAC/B,MAAA,YAAA,EAAYnB,QAAS;AACrBD,MAAAA,SAAS,EAAEW,OAAQ;AACnBT,MAAAA,QAAQ,EAAEA,QAAS;MAAA,GACfQ,IAAAA;AAAI,KAEV,CAAA,EAACK,WAAW,eACZU,cAAA,CAACG,IAAI,EAAA;AAACD,MAAAA,EAAE,EAAC,MAAM;AAAC3B,MAAAA,SAAS,EAAC,wBAAwB;MAACO,IAAI,EAAEsB,qBAAU,CAACC,iBAAkB;AAAA7B,MAAAA,QAAA,EACnFA,QAAAA;AAAQ,KACL,CACR,CAAA;AAAA,GAAO,CAAC,CAAA;AAEZ;;;;"}

package/build/circularButton/CircularButton.mjs

@@ -30,7 +30,7 @@ const CircularButton = ({
       // @ts-expect-error it's input[type=button] element
       ,
       type: "button",
-      size: isTinyViewport ? 64 : 56,
+      size: isTinyViewport ? 72 : 56,
       "aria-label": children,
       className: classes,
       disabled: disabled,

package/build/circularButton/CircularButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CircularButton.mjs","sources":["../../src/circularButton/CircularButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { cloneElement } from 'react';\n\nimport Body from '../body/Body';\nimport { typeClassMap, priorityClassMap } from '../button/classMap';\nimport { Breakpoint, ControlType, Priority, Typography } from '../common';\nimport Circle from '../common/circle';\nimport { useMedia } from '../common/hooks/useMedia';\n\nexport interface CircularButtonProps {\n  className?: string;\n  children: string;\n  disabled?: boolean;\n  icon: React.ReactElement<{ size?: unknown }>;\n  onClick?: React.MouseEventHandler<HTMLInputElement>;\n  priority?: `${Priority.PRIMARY | Priority.SECONDARY}`;\n  type?: `${ControlType.ACCENT | ControlType.POSITIVE | ControlType.NEGATIVE}`;\n}\n\nconst CircularButton = ({\n  className,\n  children,\n  disabled,\n  icon,\n  priority = Priority.PRIMARY,\n  type = ControlType.ACCENT,\n  ...rest\n}: CircularButtonProps) => {\n  const classes = clsx('btn np-btn', 'm-b-1', typeClassMap[type], priorityClassMap[priority]);\n\n  const iconElement = Number(icon.props.size) !== 24 ? cloneElement(icon, { size: 24 }) : icon;\n\n  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n\n  return (\n    <label className={clsx('np-circular-btn', priority, type, disabled && 'disabled', className)}>\n      <Circle\n        as=\"input\"\n        // @ts-expect-error it's input[type=button] element\n        type=\"button\"\n        size={isTinyViewport ? 64 : 56}\n        aria-label={children}\n        className={classes}\n        disabled={disabled}\n        {...rest}\n      />\n      {iconElement}\n      <Body as=\"span\" className=\"np-circular-btn__label\" type={Typography.BODY_DEFAULT_BOLD}>\n        {children}\n      </Body>\n    </label>\n  );\n};\n\nexport default CircularButton;\n"],"names":["CircularButton","className","children","disabled","icon","priority","Priority","PRIMARY","type","ControlType","ACCENT","rest","classes","clsx","typeClassMap","priorityClassMap","iconElement","Number","props","size","cloneElement","isTinyViewport","useMedia","Breakpoint","ZOOM_400","_jsxs","_jsx","Circle","as","Body","Typography","BODY_DEFAULT_BOLD"],"mappings":";;;;;;;;;;;AAmBMA,MAAAA,cAAc,GAAGA,CAAC;EACtBC,SAAS;EACTC,QAAQ;EACRC,QAAQ;EACRC,IAAI;EACJC,QAAQ,GAAGC,QAAQ,CAACC,OAAO;EAC3BC,IAAI,GAAGC,WAAW,CAACC,MAAM;EACzB,GAAGC,IAAAA;AACiB,CAAA,KAAI;AACxB,EAAA,MAAMC,OAAO,GAAGC,IAAI,CAAC,YAAY,EAAE,OAAO,EAAEC,YAAY,CAACN,IAAI,CAAC,EAAEO,gBAAgB,CAACV,QAAQ,CAAC,CAAC,CAAA;AAE3F,EAAA,MAAMW,WAAW,GAAGC,MAAM,CAACb,IAAI,CAACc,KAAK,CAACC,IAAI,CAAC,KAAK,EAAE,gBAAGC,YAAY,CAAChB,IAAI,EAAE;AAAEe,IAAAA,IAAI,EAAE,EAAA;GAAI,CAAC,GAAGf,IAAI,CAAA;EAE5F,MAAMiB,cAAc,GAAGC,QAAQ,CAAC,eAAeC,UAAU,CAACC,QAAQ,CAAA,GAAA,CAAK,CAAC,CAAA;AAExE,EAAA,oBACEC,IAAA,CAAA,OAAA,EAAA;AAAOxB,IAAAA,SAAS,EAAEY,IAAI,CAAC,iBAAiB,EAAER,QAAQ,EAAEG,IAAI,EAAEL,QAAQ,IAAI,UAAU,EAAEF,SAAS,CAAE;IAAAC,QAAA,EAAA,cAC3FwB,GAAA,CAACC,MAAM,EAAA;AACLC,MAAAA,EAAE,EAAC,OAAA;AACH;AAAA;AACApB,MAAAA,IAAI,EAAC,QAAQ;AACbW,MAAAA,IAAI,EAAEE,cAAc,GAAG,EAAE,GAAG,EAAG;AAC/B,MAAA,YAAA,EAAYnB,QAAS;AACrBD,MAAAA,SAAS,EAAEW,OAAQ;AACnBT,MAAAA,QAAQ,EAAEA,QAAS;MAAA,GACfQ,IAAAA;AAAI,KAEV,CAAA,EAACK,WAAW,eACZU,GAAA,CAACG,IAAI,EAAA;AAACD,MAAAA,EAAE,EAAC,MAAM;AAAC3B,MAAAA,SAAS,EAAC,wBAAwB;MAACO,IAAI,EAAEsB,UAAU,CAACC,iBAAkB;AAAA7B,MAAAA,QAAA,EACnFA,QAAAA;AAAQ,KACL,CACR,CAAA;AAAA,GAAO,CAAC,CAAA;AAEZ;;;;"}
+{"version":3,"file":"CircularButton.mjs","sources":["../../src/circularButton/CircularButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { cloneElement } from 'react';\n\nimport Body from '../body/Body';\nimport { typeClassMap, priorityClassMap } from '../button/classMap';\nimport { Breakpoint, ControlType, Priority, Typography } from '../common';\nimport Circle from '../common/circle';\nimport { useMedia } from '../common/hooks/useMedia';\n\nexport interface CircularButtonProps {\n  className?: string;\n  children: string;\n  disabled?: boolean;\n  icon: React.ReactElement<{ size?: unknown }>;\n  onClick?: React.MouseEventHandler<HTMLInputElement>;\n  priority?: `${Priority.PRIMARY | Priority.SECONDARY}`;\n  type?: `${ControlType.ACCENT | ControlType.POSITIVE | ControlType.NEGATIVE}`;\n}\n\nconst CircularButton = ({\n  className,\n  children,\n  disabled,\n  icon,\n  priority = Priority.PRIMARY,\n  type = ControlType.ACCENT,\n  ...rest\n}: CircularButtonProps) => {\n  const classes = clsx('btn np-btn', 'm-b-1', typeClassMap[type], priorityClassMap[priority]);\n\n  const iconElement = Number(icon.props.size) !== 24 ? cloneElement(icon, { size: 24 }) : icon;\n\n  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n\n  return (\n    <label className={clsx('np-circular-btn', priority, type, disabled && 'disabled', className)}>\n      <Circle\n        as=\"input\"\n        // @ts-expect-error it's input[type=button] element\n        type=\"button\"\n        size={isTinyViewport ? 72 : 56}\n        aria-label={children}\n        className={classes}\n        disabled={disabled}\n        {...rest}\n      />\n      {iconElement}\n      <Body as=\"span\" className=\"np-circular-btn__label\" type={Typography.BODY_DEFAULT_BOLD}>\n        {children}\n      </Body>\n    </label>\n  );\n};\n\nexport default CircularButton;\n"],"names":["CircularButton","className","children","disabled","icon","priority","Priority","PRIMARY","type","ControlType","ACCENT","rest","classes","clsx","typeClassMap","priorityClassMap","iconElement","Number","props","size","cloneElement","isTinyViewport","useMedia","Breakpoint","ZOOM_400","_jsxs","_jsx","Circle","as","Body","Typography","BODY_DEFAULT_BOLD"],"mappings":";;;;;;;;;;;AAmBMA,MAAAA,cAAc,GAAGA,CAAC;EACtBC,SAAS;EACTC,QAAQ;EACRC,QAAQ;EACRC,IAAI;EACJC,QAAQ,GAAGC,QAAQ,CAACC,OAAO;EAC3BC,IAAI,GAAGC,WAAW,CAACC,MAAM;EACzB,GAAGC,IAAAA;AACiB,CAAA,KAAI;AACxB,EAAA,MAAMC,OAAO,GAAGC,IAAI,CAAC,YAAY,EAAE,OAAO,EAAEC,YAAY,CAACN,IAAI,CAAC,EAAEO,gBAAgB,CAACV,QAAQ,CAAC,CAAC,CAAA;AAE3F,EAAA,MAAMW,WAAW,GAAGC,MAAM,CAACb,IAAI,CAACc,KAAK,CAACC,IAAI,CAAC,KAAK,EAAE,gBAAGC,YAAY,CAAChB,IAAI,EAAE;AAAEe,IAAAA,IAAI,EAAE,EAAA;GAAI,CAAC,GAAGf,IAAI,CAAA;EAE5F,MAAMiB,cAAc,GAAGC,QAAQ,CAAC,eAAeC,UAAU,CAACC,QAAQ,CAAA,GAAA,CAAK,CAAC,CAAA;AAExE,EAAA,oBACEC,IAAA,CAAA,OAAA,EAAA;AAAOxB,IAAAA,SAAS,EAAEY,IAAI,CAAC,iBAAiB,EAAER,QAAQ,EAAEG,IAAI,EAAEL,QAAQ,IAAI,UAAU,EAAEF,SAAS,CAAE;IAAAC,QAAA,EAAA,cAC3FwB,GAAA,CAACC,MAAM,EAAA;AACLC,MAAAA,EAAE,EAAC,OAAA;AACH;AAAA;AACApB,MAAAA,IAAI,EAAC,QAAQ;AACbW,MAAAA,IAAI,EAAEE,cAAc,GAAG,EAAE,GAAG,EAAG;AAC/B,MAAA,YAAA,EAAYnB,QAAS;AACrBD,MAAAA,SAAS,EAAEW,OAAQ;AACnBT,MAAAA,QAAQ,EAAEA,QAAS;MAAA,GACfQ,IAAAA;AAAI,KAEV,CAAA,EAACK,WAAW,eACZU,GAAA,CAACG,IAAI,EAAA;AAACD,MAAAA,EAAE,EAAC,MAAM;AAAC3B,MAAAA,SAAS,EAAC,wBAAwB;MAACO,IAAI,EAAEsB,UAAU,CAACC,iBAAkB;AAAA7B,MAAAA,QAAA,EACnFA,QAAAA;AAAQ,KACL,CACR,CAAA;AAAA,GAAO,CAAC,CAAA;AAEZ;;;;"}

package/build/common/circle/Circle.js

@@ -2,8 +2,19 @@
 
 var React = require('react');
 var clsx = require('clsx');
+var useMedia = require('../hooks/useMedia.js');
+var breakpoint = require('../propsValues/breakpoint.js');
 var jsxRuntime = require('react/jsx-runtime');
 
+const MAP_ICON_SIZE = {
+  16: 12,
+  24: 16,
+  32: 18,
+  40: 20,
+  48: 24,
+  56: 28,
+  72: 36
+};
 const Circle = /*#__PURE__*/React.forwardRef(function Circle({
   as: Element = 'div',
   children,
@@ -13,12 +24,14 @@ const Circle = /*#__PURE__*/React.forwardRef(function Circle({
   style,
   ...props
 }, ref) {
+  const isTinyViewport = useMedia.useMedia(`(max-width: ${breakpoint.Breakpoint.ZOOM_400}px)`);
   return /*#__PURE__*/jsxRuntime.jsx(Element, {
     ...props,
     ref: ref,
     style: {
-      ...style,
-      '--circle-size': fixedSize ? `${size}px` : `var(--size-${size})`
+      '--circle-size': fixedSize ? `${size}px` : `var(--size-${size})`,
+      '--circle-icon-size': isTinyViewport && !fixedSize ? `${MAP_ICON_SIZE[size] / 2}px` : `${MAP_ICON_SIZE[size]}px`,
+      ...style
     },
     className: clsx.clsx('np-circle', 'd-flex align-items-center justify-content-center', className),
     children: children

package/build/common/circle/Circle.js.map

@@ -1 +1 @@
-{"version":3,"file":"Circle.js","sources":["../../../src/common/circle/Circle.tsx"],"sourcesContent":["import { HTMLAttributes, forwardRef } from 'react';\nimport { clsx } from 'clsx';\n\nexport type ShapeSize = 16 | 24 | 32 | 40 | 48 | 56 | 64 | 72;\n\nexport type Props = {\n  /**\n   * Modify underlying element, `div` by default\n   */\n  as?: React.ElementType;\n  /**\n   * Set size of the circle in px, `48` by default\n   */\n  size?: ShapeSize;\n  /**\n   * When `true` will use the fixed size (`48px`) instead of the CSS spacing variable (`--size-*`)\n   * as those can be dynamic a at certain viewport sizes\n   */\n  fixedSize?: boolean;\n} & HTMLAttributes<HTMLDivElement>;\n\nconst Circle = forwardRef(function Circle(\n  {\n    as: Element = 'div',\n    children,\n    size = 48,\n    fixedSize = false,\n    className,\n    style,\n    ...props\n  }: Props,\n  ref,\n) {\n  return (\n    <Element\n      {...props}\n      ref={ref}\n      style={{ ...style, '--circle-size': fixedSize ? `${size}px` : `var(--size-${size})` }}\n      className={clsx('np-circle', 'd-flex align-items-center justify-content-center', className)}\n    >\n      {children}\n    </Element>\n  );\n});\n\nexport default Circle;\n"],"names":["Circle","forwardRef","as","Element","children","size","fixedSize","className","style","props","ref","_jsx","clsx"],"mappings":";;;;;;AAqBA,MAAMA,MAAM,gBAAGC,gBAAU,CAAC,SAASD,MAAMA,CACvC;EACEE,EAAE,EAAEC,OAAO,GAAG,KAAK;EACnBC,QAAQ;AACRC,EAAAA,IAAI,GAAG,EAAE;AACTC,EAAAA,SAAS,GAAG,KAAK;EACjBC,SAAS;EACTC,KAAK;EACL,GAAGC,KAAAA;AAAK,CACF,EACRC,GAAG,EAAA;EAEH,oBACEC,cAAA,CAACR,OAAO,EAAA;AAAA,IAAA,GACFM,KAAK;AACTC,IAAAA,GAAG,EAAEA,GAAI;AACTF,IAAAA,KAAK,EAAE;AAAE,MAAA,GAAGA,KAAK;MAAE,eAAe,EAAEF,SAAS,GAAG,CAAA,EAAGD,IAAI,CAAI,EAAA,CAAA,GAAG,cAAcA,IAAI,CAAA,CAAA,CAAA;KAAM;IACtFE,SAAS,EAAEK,SAAI,CAAC,WAAW,EAAE,kDAAkD,EAAEL,SAAS,CAAE;AAAAH,IAAAA,QAAA,EAE3FA,QAAAA;AAAQ,GACF,CAAC,CAAA;AAEd,CAAC;;;;"}
+{"version":3,"file":"Circle.js","sources":["../../../src/common/circle/Circle.tsx"],"sourcesContent":["import { HTMLAttributes, forwardRef } from 'react';\nimport { clsx } from 'clsx';\nimport { useMedia } from '../hooks/useMedia';\nimport { Breakpoint } from '../propsValues/breakpoint';\n\nexport type ShapeSize = 16 | 24 | 32 | 40 | 48 | 56 | 72;\n\nexport type Props = {\n  /**\n   * Modify underlying element, `div` by default\n   */\n  as?: React.ElementType;\n  /**\n   * Set size of the circle in px, `48` by default\n   */\n  size?: ShapeSize;\n  /**\n   * When `true` will use the fixed size (`48px`) instead of the CSS spacing variable (`--size-*`)\n   * as those can be dynamic a at certain viewport sizes\n   */\n  fixedSize?: boolean;\n} & HTMLAttributes<HTMLDivElement>;\n\n/**\n * circle like components has custom sizes for icons\n */\nconst MAP_ICON_SIZE = {\n  16: 12,\n  24: 16,\n  32: 18,\n  40: 20,\n  48: 24,\n  56: 28,\n  72: 36,\n};\n\nconst Circle = forwardRef(function Circle(\n  {\n    as: Element = 'div',\n    children,\n    size = 48,\n    fixedSize = false,\n    className,\n    style,\n    ...props\n  }: Props,\n  ref,\n) {\n  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n  return (\n    <Element\n      {...props}\n      ref={ref}\n      style={{\n        '--circle-size': fixedSize ? `${size}px` : `var(--size-${size})`,\n        '--circle-icon-size':\n          isTinyViewport && !fixedSize\n            ? `${MAP_ICON_SIZE[size] / 2}px`\n            : `${MAP_ICON_SIZE[size]}px`,\n        ...style,\n      }}\n      className={clsx('np-circle', 'd-flex align-items-center justify-content-center', className)}\n    >\n      {children}\n    </Element>\n  );\n});\n\nexport default Circle;\n"],"names":["MAP_ICON_SIZE","Circle","forwardRef","as","Element","children","size","fixedSize","className","style","props","ref","isTinyViewport","useMedia","Breakpoint","ZOOM_400","_jsx","clsx"],"mappings":";;;;;;;;AA0BA,MAAMA,aAAa,GAAG;AACpB,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAA;CACL,CAAA;AAED,MAAMC,MAAM,gBAAGC,gBAAU,CAAC,SAASD,MAAMA,CACvC;EACEE,EAAE,EAAEC,OAAO,GAAG,KAAK;EACnBC,QAAQ;AACRC,EAAAA,IAAI,GAAG,EAAE;AACTC,EAAAA,SAAS,GAAG,KAAK;EACjBC,SAAS;EACTC,KAAK;EACL,GAAGC,KAAAA;AAAK,CACF,EACRC,GAAG,EAAA;EAEH,MAAMC,cAAc,GAAGC,iBAAQ,CAAC,eAAeC,qBAAU,CAACC,QAAQ,CAAA,GAAA,CAAK,CAAC,CAAA;EACxE,oBACEC,cAAA,CAACZ,OAAO,EAAA;AAAA,IAAA,GACFM,KAAK;AACTC,IAAAA,GAAG,EAAEA,GAAI;AACTF,IAAAA,KAAK,EAAE;MACL,eAAe,EAAEF,SAAS,GAAG,CAAA,EAAGD,IAAI,CAAI,EAAA,CAAA,GAAG,CAAcA,WAAAA,EAAAA,IAAI,CAAG,CAAA,CAAA;MAChE,oBAAoB,EAClBM,cAAc,IAAI,CAACL,SAAS,GACxB,CAAA,EAAGP,aAAa,CAACM,IAAI,CAAC,GAAG,CAAC,IAAI,GAC9B,CAAA,EAAGN,aAAa,CAACM,IAAI,CAAC,CAAI,EAAA,CAAA;MAChC,GAAGG,KAAAA;KACH;IACFD,SAAS,EAAES,SAAI,CAAC,WAAW,EAAE,kDAAkD,EAAET,SAAS,CAAE;AAAAH,IAAAA,QAAA,EAE3FA,QAAAA;AAAQ,GACF,CAAC,CAAA;AAEd,CAAC;;;;"}

package/build/common/circle/Circle.mjs

@@ -1,7 +1,18 @@
 import { forwardRef } from 'react';
 import { clsx } from 'clsx';
+import { useMedia } from '../hooks/useMedia.mjs';
+import { Breakpoint } from '../propsValues/breakpoint.mjs';
 import { jsx } from 'react/jsx-runtime';
 
+const MAP_ICON_SIZE = {
+  16: 12,
+  24: 16,
+  32: 18,
+  40: 20,
+  48: 24,
+  56: 28,
+  72: 36
+};
 const Circle = /*#__PURE__*/forwardRef(function Circle({
   as: Element = 'div',
   children,
@@ -11,12 +22,14 @@ const Circle = /*#__PURE__*/forwardRef(function Circle({
   style,
   ...props
 }, ref) {
+  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);
   return /*#__PURE__*/jsx(Element, {
     ...props,
     ref: ref,
     style: {
-      ...style,
-      '--circle-size': fixedSize ? `${size}px` : `var(--size-${size})`
+      '--circle-size': fixedSize ? `${size}px` : `var(--size-${size})`,
+      '--circle-icon-size': isTinyViewport && !fixedSize ? `${MAP_ICON_SIZE[size] / 2}px` : `${MAP_ICON_SIZE[size]}px`,
+      ...style
     },
     className: clsx('np-circle', 'd-flex align-items-center justify-content-center', className),
     children: children

package/build/common/circle/Circle.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Circle.mjs","sources":["../../../src/common/circle/Circle.tsx"],"sourcesContent":["import { HTMLAttributes, forwardRef } from 'react';\nimport { clsx } from 'clsx';\n\nexport type ShapeSize = 16 | 24 | 32 | 40 | 48 | 56 | 64 | 72;\n\nexport type Props = {\n  /**\n   * Modify underlying element, `div` by default\n   */\n  as?: React.ElementType;\n  /**\n   * Set size of the circle in px, `48` by default\n   */\n  size?: ShapeSize;\n  /**\n   * When `true` will use the fixed size (`48px`) instead of the CSS spacing variable (`--size-*`)\n   * as those can be dynamic a at certain viewport sizes\n   */\n  fixedSize?: boolean;\n} & HTMLAttributes<HTMLDivElement>;\n\nconst Circle = forwardRef(function Circle(\n  {\n    as: Element = 'div',\n    children,\n    size = 48,\n    fixedSize = false,\n    className,\n    style,\n    ...props\n  }: Props,\n  ref,\n) {\n  return (\n    <Element\n      {...props}\n      ref={ref}\n      style={{ ...style, '--circle-size': fixedSize ? `${size}px` : `var(--size-${size})` }}\n      className={clsx('np-circle', 'd-flex align-items-center justify-content-center', className)}\n    >\n      {children}\n    </Element>\n  );\n});\n\nexport default Circle;\n"],"names":["Circle","forwardRef","as","Element","children","size","fixedSize","className","style","props","ref","_jsx","clsx"],"mappings":";;;;AAqBA,MAAMA,MAAM,gBAAGC,UAAU,CAAC,SAASD,MAAMA,CACvC;EACEE,EAAE,EAAEC,OAAO,GAAG,KAAK;EACnBC,QAAQ;AACRC,EAAAA,IAAI,GAAG,EAAE;AACTC,EAAAA,SAAS,GAAG,KAAK;EACjBC,SAAS;EACTC,KAAK;EACL,GAAGC,KAAAA;AAAK,CACF,EACRC,GAAG,EAAA;EAEH,oBACEC,GAAA,CAACR,OAAO,EAAA;AAAA,IAAA,GACFM,KAAK;AACTC,IAAAA,GAAG,EAAEA,GAAI;AACTF,IAAAA,KAAK,EAAE;AAAE,MAAA,GAAGA,KAAK;MAAE,eAAe,EAAEF,SAAS,GAAG,CAAA,EAAGD,IAAI,CAAI,EAAA,CAAA,GAAG,cAAcA,IAAI,CAAA,CAAA,CAAA;KAAM;IACtFE,SAAS,EAAEK,IAAI,CAAC,WAAW,EAAE,kDAAkD,EAAEL,SAAS,CAAE;AAAAH,IAAAA,QAAA,EAE3FA,QAAAA;AAAQ,GACF,CAAC,CAAA;AAEd,CAAC;;;;"}
+{"version":3,"file":"Circle.mjs","sources":["../../../src/common/circle/Circle.tsx"],"sourcesContent":["import { HTMLAttributes, forwardRef } from 'react';\nimport { clsx } from 'clsx';\nimport { useMedia } from '../hooks/useMedia';\nimport { Breakpoint } from '../propsValues/breakpoint';\n\nexport type ShapeSize = 16 | 24 | 32 | 40 | 48 | 56 | 72;\n\nexport type Props = {\n  /**\n   * Modify underlying element, `div` by default\n   */\n  as?: React.ElementType;\n  /**\n   * Set size of the circle in px, `48` by default\n   */\n  size?: ShapeSize;\n  /**\n   * When `true` will use the fixed size (`48px`) instead of the CSS spacing variable (`--size-*`)\n   * as those can be dynamic a at certain viewport sizes\n   */\n  fixedSize?: boolean;\n} & HTMLAttributes<HTMLDivElement>;\n\n/**\n * circle like components has custom sizes for icons\n */\nconst MAP_ICON_SIZE = {\n  16: 12,\n  24: 16,\n  32: 18,\n  40: 20,\n  48: 24,\n  56: 28,\n  72: 36,\n};\n\nconst Circle = forwardRef(function Circle(\n  {\n    as: Element = 'div',\n    children,\n    size = 48,\n    fixedSize = false,\n    className,\n    style,\n    ...props\n  }: Props,\n  ref,\n) {\n  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n  return (\n    <Element\n      {...props}\n      ref={ref}\n      style={{\n        '--circle-size': fixedSize ? `${size}px` : `var(--size-${size})`,\n        '--circle-icon-size':\n          isTinyViewport && !fixedSize\n            ? `${MAP_ICON_SIZE[size] / 2}px`\n            : `${MAP_ICON_SIZE[size]}px`,\n        ...style,\n      }}\n      className={clsx('np-circle', 'd-flex align-items-center justify-content-center', className)}\n    >\n      {children}\n    </Element>\n  );\n});\n\nexport default Circle;\n"],"names":["MAP_ICON_SIZE","Circle","forwardRef","as","Element","children","size","fixedSize","className","style","props","ref","isTinyViewport","useMedia","Breakpoint","ZOOM_400","_jsx","clsx"],"mappings":";;;;;;AA0BA,MAAMA,aAAa,GAAG;AACpB,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAA;CACL,CAAA;AAED,MAAMC,MAAM,gBAAGC,UAAU,CAAC,SAASD,MAAMA,CACvC;EACEE,EAAE,EAAEC,OAAO,GAAG,KAAK;EACnBC,QAAQ;AACRC,EAAAA,IAAI,GAAG,EAAE;AACTC,EAAAA,SAAS,GAAG,KAAK;EACjBC,SAAS;EACTC,KAAK;EACL,GAAGC,KAAAA;AAAK,CACF,EACRC,GAAG,EAAA;EAEH,MAAMC,cAAc,GAAGC,QAAQ,CAAC,eAAeC,UAAU,CAACC,QAAQ,CAAA,GAAA,CAAK,CAAC,CAAA;EACxE,oBACEC,GAAA,CAACZ,OAAO,EAAA;AAAA,IAAA,GACFM,KAAK;AACTC,IAAAA,GAAG,EAAEA,GAAI;AACTF,IAAAA,KAAK,EAAE;MACL,eAAe,EAAEF,SAAS,GAAG,CAAA,EAAGD,IAAI,CAAI,EAAA,CAAA,GAAG,CAAcA,WAAAA,EAAAA,IAAI,CAAG,CAAA,CAAA;MAChE,oBAAoB,EAClBM,cAAc,IAAI,CAACL,SAAS,GACxB,CAAA,EAAGP,aAAa,CAACM,IAAI,CAAC,GAAG,CAAC,IAAI,GAC9B,CAAA,EAAGN,aAAa,CAACM,IAAI,CAAC,CAAI,EAAA,CAAA;MAChC,GAAGG,KAAAA;KACH;IACFD,SAAS,EAAES,IAAI,CAAC,WAAW,EAAE,kDAAkD,EAAET,SAAS,CAAE;AAAAH,IAAAA,QAAA,EAE3FA,QAAAA;AAAQ,GACF,CAAC,CAAA;AAEd,CAAC;;;;"}

package/build/main.css

@@ -1013,8 +1013,8 @@ div.critical-comms .critical-comms-body {
 }
 @media (max-width: 320px) {
   .np-circular-btn .tw-icon {
-    top: 8px;
-    top: var(--size-8);
+    top: 12px;
+    top: var(--size-12);
   }
 }
 .np-circular-btn .tw-icon > svg {
@@ -1169,6 +1169,10 @@ div.critical-comms .critical-comms-body {
   height: var(--circle-size);
   flex-shrink: 0;
 }
+.np-circle .tw-icon > svg {
+  height: var(--circle-icon-size);
+  width: var(--circle-icon-size);
+}
 .np-bottom-sheet {
   border-radius: 10px 10px 0 0;
 }
@@ -4155,12 +4159,6 @@ html:not([dir="rtl"]) .np-navigation-option {
     transform: translateY(-24px);
   }
 }
-.status-icon > svg {
-  height: 32px;
-  height: var(--size-32);
-  width: 32px;
-  width: var(--size-32);
-}
 .status-circle .light {
   color: var(--color-contrast);
 }
@@ -4176,20 +4174,6 @@ html:not([dir="rtl"]) .np-navigation-option {
 .np-theme-personal .status-circle.pending .status-icon {
   color: var(--color-dark);
 }
-.status-circle-sm .status-icon > svg {
-  height: 14px;
-  height: var(--size-14);
-  width: 14px;
-  width: var(--size-14);
-}
-@media (max-width: 320px) {
-  .status-circle-sm .status-icon > svg {
-    width: 24px;
-    width: var(--size-24);
-    height: 24px;
-    height: var(--size-24);
-  }
-}
 .status-circle.negative,
 .status-circle.error {
   background-color: var(--color-sentiment-negative);

package/build/statusIcon/StatusIcon.js

@@ -25,17 +25,17 @@ const mapLegacySize = {
 };
 const StatusIcon = ({
   sentiment = 'neutral',
-  size: sizeProp = 'md'
+  size: sizeProp = 40
 }) => {
   const Icon = iconTypeMap[sentiment];
   const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';
   const isTinyViewport = useMedia.useMedia(`(max-width: ${breakpoint.Breakpoint.ZOOM_400}px)`);
-  const size$1 = sizeProp === size.Size.SMALL && isTinyViewport ? 32 : mapLegacySize[sizeProp];
+  const size = typeof sizeProp === 'string' ? mapLegacySize[sizeProp] : sizeProp;
   return /*#__PURE__*/jsxRuntime.jsx(Circle, {
     as: "span",
-    size: size$1,
+    size: isTinyViewport && size < 40 ? 32 : size,
     "data-testid": "status-icon",
-    className: clsx.clsx('status-circle', `status-circle-${sizeProp}`, sentiment),
+    className: clsx.clsx('status-circle', sentiment),
     children: /*#__PURE__*/jsxRuntime.jsx(Icon, {
       className: clsx.clsx('status-icon', iconColor)
     })

package/build/statusIcon/StatusIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusIcon.js","sources":["../../src/statusIcon/StatusIcon.tsx"],"sourcesContent":["import { Info, Alert, Cross, Check, ClockBorderless } from '@transferwise/icons';\nimport { clsx } from 'clsx';\n\nimport { SizeSmall, SizeMedium, SizeLarge, Sentiment, Size, Breakpoint } from '../common';\nimport Circle, { CircleProps } from '../common/circle';\nimport { useMedia } from '../common/hooks/useMedia';\n\nexport type StatusIconProps = {\n  sentiment: `${Sentiment}`;\n  size: SizeSmall | SizeMedium | SizeLarge;\n};\n\nconst iconTypeMap = {\n  positive: Check,\n  neutral: Info,\n  warning: Alert,\n  negative: Cross,\n  pending: ClockBorderless,\n  info: Info,\n  error: Cross,\n  success: Check,\n} satisfies Record<`${Sentiment}`, React.ElementType>;\n\nconst mapLegacySize = {\n  [String(Size.SMALL)]: 16,\n  [String(Size.MEDIUM)]: 40,\n  [String(Size.LARGE)]: 48,\n} satisfies Record<string, CircleProps['size']>;\n\nconst StatusIcon = ({ sentiment = 'neutral', size: sizeProp = 'md' }: StatusIconProps) => {\n  const Icon = iconTypeMap[sentiment];\n  const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';\n  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n  const size = sizeProp === Size.SMALL && isTinyViewport ? 32 : mapLegacySize[sizeProp];\n  return (\n    <Circle\n      as=\"span\"\n      size={size}\n      data-testid=\"status-icon\"\n      className={clsx('status-circle', `status-circle-${sizeProp}`, sentiment)}\n    >\n      <Icon className={clsx('status-icon', iconColor)} />\n    </Circle>\n  );\n};\n\nexport default StatusIcon;\n"],"names":["iconTypeMap","positive","Check","neutral","Info","warning","Alert","negative","Cross","pending","ClockBorderless","info","error","success","mapLegacySize","String","Size","SMALL","MEDIUM","LARGE","StatusIcon","sentiment","size","sizeProp","Icon","iconColor","isTinyViewport","useMedia","Breakpoint","ZOOM_400","_jsx","Circle","as","className","clsx","children"],"mappings":";;;;;;;;;;AAYA,MAAMA,WAAW,GAAG;AAClBC,EAAAA,QAAQ,EAAEC,WAAK;AACfC,EAAAA,OAAO,EAAEC,UAAI;AACbC,EAAAA,OAAO,EAAEC,WAAK;AACdC,EAAAA,QAAQ,EAAEC,WAAK;AACfC,EAAAA,OAAO,EAAEC,qBAAe;AACxBC,EAAAA,IAAI,EAAEP,UAAI;AACVQ,EAAAA,KAAK,EAAEJ,WAAK;AACZK,EAAAA,OAAO,EAAEX,WAAAA;CAC0C,CAAA;AAErD,MAAMY,aAAa,GAAG;AACpB,EAAA,CAACC,MAAM,CAACC,SAAI,CAACC,KAAK,CAAC,GAAG,EAAE;AACxB,EAAA,CAACF,MAAM,CAACC,SAAI,CAACE,MAAM,CAAC,GAAG,EAAE;AACzB,EAAA,CAACH,MAAM,CAACC,SAAI,CAACG,KAAK,CAAC,GAAG,EAAA;CACuB,CAAA;AAEzCC,MAAAA,UAAU,GAAGA,CAAC;AAAEC,EAAAA,SAAS,GAAG,SAAS;EAAEC,IAAI,EAAEC,QAAQ,GAAG,IAAA;AAAI,CAAmB,KAAI;AACvF,EAAA,MAAMC,IAAI,GAAGxB,WAAW,CAACqB,SAAS,CAAC,CAAA;AACnC,EAAA,MAAMI,SAAS,GAAGJ,SAAS,KAAK,SAAS,IAAIA,SAAS,KAAK,SAAS,GAAG,MAAM,GAAG,OAAO,CAAA;EACvF,MAAMK,cAAc,GAAGC,iBAAQ,CAAC,eAAeC,qBAAU,CAACC,QAAQ,CAAA,GAAA,CAAK,CAAC,CAAA;AACxE,EAAA,MAAMP,MAAI,GAAGC,QAAQ,KAAKP,SAAI,CAACC,KAAK,IAAIS,cAAc,GAAG,EAAE,GAAGZ,aAAa,CAACS,QAAQ,CAAC,CAAA;EACrF,oBACEO,cAAA,CAACC,MAAM,EAAA;AACLC,IAAAA,EAAE,EAAC,MAAM;AACTV,IAAAA,IAAI,EAAEA,MAAK;AACX,IAAA,aAAA,EAAY,aAAa;IACzBW,SAAS,EAAEC,SAAI,CAAC,eAAe,EAAE,iBAAiBX,QAAQ,CAAA,CAAE,EAAEF,SAAS,CAAE;IAAAc,QAAA,eAEzEL,cAAA,CAACN,IAAI,EAAA;AAACS,MAAAA,SAAS,EAAEC,SAAI,CAAC,aAAa,EAAET,SAAS,CAAA;KAChD,CAAA;AAAA,GAAQ,CAAC,CAAA;AAEb;;;;"}
+{"version":3,"file":"StatusIcon.js","sources":["../../src/statusIcon/StatusIcon.tsx"],"sourcesContent":["import { Info, Alert, Cross, Check, ClockBorderless } from '@transferwise/icons';\nimport { clsx } from 'clsx';\n\nimport { SizeSmall, SizeMedium, SizeLarge, Sentiment, Size, Breakpoint } from '../common';\nimport Circle, { CircleProps } from '../common/circle';\nimport { useMedia } from '../common/hooks/useMedia';\n\n/**\n * @deprecated use `16 | 24 | 32 | 40 | 48 | 56 | 72` component instead\n */\ntype LegacySizes = SizeSmall | SizeMedium | SizeLarge;\n\nexport type StatusIconProps = {\n  sentiment?: `${Sentiment}`;\n  size?: LegacySizes | 16 | 24 | 32 | 40 | 48 | 56 | 72;\n};\n\nconst iconTypeMap = {\n  positive: Check,\n  neutral: Info,\n  warning: Alert,\n  negative: Cross,\n  pending: ClockBorderless,\n  info: Info,\n  error: Cross,\n  success: Check,\n} satisfies Record<`${Sentiment}`, React.ElementType>;\n\nconst mapLegacySize = {\n  [String(Size.SMALL)]: 16,\n  [String(Size.MEDIUM)]: 40,\n  [String(Size.LARGE)]: 48,\n} satisfies Record<string, CircleProps['size']>;\n\nconst StatusIcon = ({ sentiment = 'neutral', size: sizeProp = 40 }: StatusIconProps) => {\n  const Icon = iconTypeMap[sentiment];\n  const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';\n  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n  const size: CircleProps['size'] =\n    typeof sizeProp === 'string' ? mapLegacySize[sizeProp] : sizeProp;\n  return (\n    <Circle\n      as=\"span\"\n      size={isTinyViewport && size < 40 ? 32 : size}\n      data-testid=\"status-icon\"\n      className={clsx('status-circle', sentiment)}\n    >\n      <Icon className={clsx('status-icon', iconColor)} />\n    </Circle>\n  );\n};\n\nexport default StatusIcon;\n"],"names":["iconTypeMap","positive","Check","neutral","Info","warning","Alert","negative","Cross","pending","ClockBorderless","info","error","success","mapLegacySize","String","Size","SMALL","MEDIUM","LARGE","StatusIcon","sentiment","size","sizeProp","Icon","iconColor","isTinyViewport","useMedia","Breakpoint","ZOOM_400","_jsx","Circle","as","className","clsx","children"],"mappings":";;;;;;;;;;AAiBA,MAAMA,WAAW,GAAG;AAClBC,EAAAA,QAAQ,EAAEC,WAAK;AACfC,EAAAA,OAAO,EAAEC,UAAI;AACbC,EAAAA,OAAO,EAAEC,WAAK;AACdC,EAAAA,QAAQ,EAAEC,WAAK;AACfC,EAAAA,OAAO,EAAEC,qBAAe;AACxBC,EAAAA,IAAI,EAAEP,UAAI;AACVQ,EAAAA,KAAK,EAAEJ,WAAK;AACZK,EAAAA,OAAO,EAAEX,WAAAA;CAC0C,CAAA;AAErD,MAAMY,aAAa,GAAG;AACpB,EAAA,CAACC,MAAM,CAACC,SAAI,CAACC,KAAK,CAAC,GAAG,EAAE;AACxB,EAAA,CAACF,MAAM,CAACC,SAAI,CAACE,MAAM,CAAC,GAAG,EAAE;AACzB,EAAA,CAACH,MAAM,CAACC,SAAI,CAACG,KAAK,CAAC,GAAG,EAAA;CACuB,CAAA;AAEzCC,MAAAA,UAAU,GAAGA,CAAC;AAAEC,EAAAA,SAAS,GAAG,SAAS;EAAEC,IAAI,EAAEC,QAAQ,GAAG,EAAA;AAAE,CAAmB,KAAI;AACrF,EAAA,MAAMC,IAAI,GAAGxB,WAAW,CAACqB,SAAS,CAAC,CAAA;AACnC,EAAA,MAAMI,SAAS,GAAGJ,SAAS,KAAK,SAAS,IAAIA,SAAS,KAAK,SAAS,GAAG,MAAM,GAAG,OAAO,CAAA;EACvF,MAAMK,cAAc,GAAGC,iBAAQ,CAAC,eAAeC,qBAAU,CAACC,QAAQ,CAAA,GAAA,CAAK,CAAC,CAAA;AACxE,EAAA,MAAMP,IAAI,GACR,OAAOC,QAAQ,KAAK,QAAQ,GAAGT,aAAa,CAACS,QAAQ,CAAC,GAAGA,QAAQ,CAAA;EACnE,oBACEO,cAAA,CAACC,MAAM,EAAA;AACLC,IAAAA,EAAE,EAAC,MAAM;IACTV,IAAI,EAAEI,cAAc,IAAIJ,IAAI,GAAG,EAAE,GAAG,EAAE,GAAGA,IAAK;AAC9C,IAAA,aAAA,EAAY,aAAa;AACzBW,IAAAA,SAAS,EAAEC,SAAI,CAAC,eAAe,EAAEb,SAAS,CAAE;IAAAc,QAAA,eAE5CL,cAAA,CAACN,IAAI,EAAA;AAACS,MAAAA,SAAS,EAAEC,SAAI,CAAC,aAAa,EAAET,SAAS,CAAA;KAChD,CAAA;AAAA,GAAQ,CAAC,CAAA;AAEb;;;;"}

package/build/statusIcon/StatusIcon.mjs

@@ -23,17 +23,17 @@ const mapLegacySize = {
 };
 const StatusIcon = ({
   sentiment = 'neutral',
-  size: sizeProp = 'md'
+  size: sizeProp = 40
 }) => {
   const Icon = iconTypeMap[sentiment];
   const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';
   const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);
-  const size = sizeProp === Size.SMALL && isTinyViewport ? 32 : mapLegacySize[sizeProp];
+  const size = typeof sizeProp === 'string' ? mapLegacySize[sizeProp] : sizeProp;
   return /*#__PURE__*/jsx(Circle, {
     as: "span",
-    size: size,
+    size: isTinyViewport && size < 40 ? 32 : size,
     "data-testid": "status-icon",
-    className: clsx('status-circle', `status-circle-${sizeProp}`, sentiment),
+    className: clsx('status-circle', sentiment),
     children: /*#__PURE__*/jsx(Icon, {
       className: clsx('status-icon', iconColor)
     })