@transferwise/components 0.0.0-experimental-1a9f157 → 0.0.0-experimental-2975c15

package/build/alert/Alert.js

@@ -5,14 +5,15 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var clsx = require('clsx');
 var React = require('react');
 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 InlineMarkdown = require('./inlineMarkdown/InlineMarkdown.js');
 var Action = require('../common/action/Action.js');
 var jsxRuntime = require('react/jsx-runtime');
 var logActionRequired = require('../utilities/logActionRequired.js');
+var constants = require('../common/constants.js');
 var sentiment = require('../common/propsValues/sentiment.js');
+var CloseButton = require('../common/closeButton/CloseButton.js');
 var size = require('../common/propsValues/size.js');
 var typography = require('../common/propsValues/typography.js');
 
@@ -78,11 +79,19 @@ 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(false);
+  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 closeButtonReference = React.useRef(null);
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     role: resolvedType === sentiment.Sentiment.NEGATIVE ? 'alert' : 'status',
-    children: active && /*#__PURE__*/jsxRuntime.jsxs("div", {
+    children: shouldShow && /*#__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';\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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"}
+{"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 {\n  CloseButton,\n  Sentiment,\n  Size,\n  Typography,\n  Variant,\n  WDS_LIVE_REGION_DELAY_MS,\n} from '../common';\n\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<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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"}

package/build/alert/Alert.mjs

@@ -1,14 +1,15 @@
 import { clsx } from 'clsx';
 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 { jsx, jsxs } from 'react/jsx-runtime';
 import { logActionRequired } from '../utilities/logActionRequired.mjs';
+import { WDS_LIVE_REGION_DELAY_MS } from '../common/constants.mjs';
 import { Sentiment } from '../common/propsValues/sentiment.mjs';
+import { CloseButton } from '../common/closeButton/CloseButton.mjs';
 import { Size } from '../common/propsValues/size.mjs';
 import { Typography } from '../common/propsValues/typography.mjs';
 
@@ -74,11 +75,19 @@ function Alert({
       logActionRequired(`Alert component has deprecated '${type}' value for the 'type' prop. Please use '${resolvedType}' instead.`);
     }
   }, [resolvedType, type]);
-  const [shouldFire, setShouldFire] = useState(false);
+  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 closeButtonReference = useRef(null);
   return /*#__PURE__*/jsx("div", {
     role: resolvedType === Sentiment.NEGATIVE ? 'alert' : 'status',
-    children: active && /*#__PURE__*/jsxs("div", {
+    children: shouldShow && /*#__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';\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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"}
+{"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 {\n  CloseButton,\n  Sentiment,\n  Size,\n  Typography,\n  Variant,\n  WDS_LIVE_REGION_DELAY_MS,\n} from '../common';\n\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<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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"}

package/build/avatar/Avatar.js

@@ -35,7 +35,6 @@ const Avatar = ({
   return /*#__PURE__*/jsxRuntime.jsx(Circle, {
     size: size,
     fixedSize: true,
-    iconSizing: false,
     className: clsx.clsx('tw-avatar', className, `tw-avatar--${size}`, `tw-avatar--${type}`, {
       'tw-avatar--outlined': outlined,
       'tw-avatar--branded': Boolean(backgroundColorFromSeed),
@@ -45,7 +44,6 @@ const Avatar = ({
     children: /*#__PURE__*/jsxRuntime.jsx(Circle, {
       size: size,
       fixedSize: true,
-      iconSizing: false,
       className: "tw-avatar__content",
       style: {
         backgroundColor: backgroundColor || backgroundColorFromSeed

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      iconSizing={false}\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        iconSizing={false}\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","iconSizing","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;AACTC,IAAAA,UAAU,EAAE,KAAM;AAClBf,IAAAA,SAAS,EAAEgB,SAAI,CAAC,WAAW,EAAEhB,SAAS,EAAE,CAAcL,WAAAA,EAAAA,IAAI,CAAE,CAAA,EAAE,CAAcW,WAAAA,EAAAA,IAAI,EAAE,EAAE;AAClF,MAAA,qBAAqB,EAAEL,QAAQ;AAC/B,MAAA,oBAAoB,EAAEgB,OAAO,CAACT,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;AACTC,MAAAA,UAAU,EAAE,KAAM;AAClBf,MAAAA,SAAS,EAAC,oBAAoB;AAC9BkB,MAAAA,KAAK,EAAE;QACLrB,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 { 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;;;;"}

package/build/avatar/Avatar.mjs

@@ -33,7 +33,6 @@ const Avatar = ({
   return /*#__PURE__*/jsx(Circle, {
     size: size,
     fixedSize: true,
-    iconSizing: false,
     className: clsx('tw-avatar', className, `tw-avatar--${size}`, `tw-avatar--${type}`, {
       'tw-avatar--outlined': outlined,
       'tw-avatar--branded': Boolean(backgroundColorFromSeed),
@@ -43,7 +42,6 @@ const Avatar = ({
     children: /*#__PURE__*/jsx(Circle, {
       size: size,
       fixedSize: true,
-      iconSizing: false,
       className: "tw-avatar__content",
       style: {
         backgroundColor: backgroundColor || backgroundColorFromSeed

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      iconSizing={false}\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        iconSizing={false}\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","iconSizing","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;AACTC,IAAAA,UAAU,EAAE,KAAM;AAClBf,IAAAA,SAAS,EAAEgB,IAAI,CAAC,WAAW,EAAEhB,SAAS,EAAE,CAAcL,WAAAA,EAAAA,IAAI,CAAE,CAAA,EAAE,CAAcW,WAAAA,EAAAA,IAAI,EAAE,EAAE;AAClF,MAAA,qBAAqB,EAAEL,QAAQ;AAC/B,MAAA,oBAAoB,EAAEgB,OAAO,CAACT,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;AACTC,MAAAA,UAAU,EAAE,KAAM;AAClBf,MAAAA,SAAS,EAAC,oBAAoB;AAC9BkB,MAAAA,KAAK,EAAE;QACLrB,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 { 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;;;;"}

package/build/badge/Badge.js

@@ -35,7 +35,6 @@ const Badge = ({
     }), /*#__PURE__*/jsxRuntime.jsx(Circle, {
       size: mapLegacySize[size$1],
       fixedSize: true,
-      iconSizing: false,
       className: "tw-badge__content",
       children: badge
     })]

package/build/badge/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sources":["../../src/badge/Badge.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ReactNode } from 'react';\n\nimport {\n  Size,\n  Theme,\n  SizeSmall,\n  SizeMedium,\n  SizeLarge,\n  ThemeDark,\n  ThemeLight,\n  CommonProps,\n} from '../common';\nimport Circle, { CircleProps } from '../common/circle';\n\n/**\n * @deprecated Use `SizeSmall` or `SizeLarge` instead.\n */\ntype DeprecatedSizes = SizeMedium;\n\nexport type BadgeProps = {\n  badge: ReactNode;\n  children: ReactNode;\n  /**\n   * `md` is deprecated, it will fallback to `sm` instead.\n   */\n  size?: SizeSmall | DeprecatedSizes | SizeLarge;\n  border?: ThemeDark | ThemeLight;\n  'aria-label'?: string;\n} & CommonProps;\n\nconst mapLegacySize = {\n  [String(Size.SMALL)]: 16,\n  // medium is deprecated, so we map it to small\n  [String(Size.MEDIUM)]: 16,\n  [String(Size.LARGE)]: 24,\n} satisfies Record<string, CircleProps['size']>;\n\nconst Badge = ({\n  badge,\n  className = undefined,\n  size: sizeProp = Size.SMALL,\n  border = Theme.LIGHT,\n  'aria-label': ariaLabel,\n  children,\n}: BadgeProps) => {\n  // medium is deprecated, so we map it to small\n  const size = sizeProp === Size.MEDIUM ? Size.SMALL : sizeProp;\n  const classes: string = clsx(\n    'tw-badge',\n    {\n      [`tw-badge-border-${border}`]: border,\n      [`tw-badge-${size}`]: size,\n    },\n    className,\n  );\n\n  return (\n    <div aria-label={ariaLabel} className={classes}>\n      <div className=\"tw-badge__children\">{children}</div>\n      <Circle size={mapLegacySize[size]} fixedSize iconSizing={false} className=\"tw-badge__content\">\n        {badge}\n      </Circle>\n    </div>\n  );\n};\n\nexport default Badge;\n"],"names":["mapLegacySize","String","Size","SMALL","MEDIUM","LARGE","Badge","badge","className","undefined","size","sizeProp","border","Theme","LIGHT","ariaLabel","children","classes","clsx","_jsxs","_jsx","Circle","fixedSize","iconSizing"],"mappings":";;;;;;;;AA+BA,MAAMA,aAAa,GAAG;AACpB,EAAA,CAACC,MAAM,CAACC,SAAI,CAACC,KAAK,CAAC,GAAG,EAAE;AACxB;AACA,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,KAAK,GAAGA,CAAC;EACbC,KAAK;AACLC,EAAAA,SAAS,GAAGC,SAAS;AACrBC,EAAAA,IAAI,EAAEC,QAAQ,GAAGT,SAAI,CAACC,KAAK;EAC3BS,MAAM,GAAGC,WAAK,CAACC,KAAK;AACpB,EAAA,YAAY,EAAEC,SAAS;AACvBC,EAAAA,QAAAA;AAAQ,CACG,KAAI;AACf;AACA,EAAA,MAAMN,MAAI,GAAGC,QAAQ,KAAKT,SAAI,CAACE,MAAM,GAAGF,SAAI,CAACC,KAAK,GAAGQ,QAAQ,CAAA;AAC7D,EAAA,MAAMM,OAAO,GAAWC,SAAI,CAC1B,UAAU,EACV;AACE,IAAA,CAAC,CAAmBN,gBAAAA,EAAAA,MAAM,CAAE,CAAA,GAAGA,MAAM;IACrC,CAAC,CAAA,SAAA,EAAYF,MAAI,CAAA,CAAE,GAAGA,MAAAA;GACvB,EACDF,SAAS,CACV,CAAA;AAED,EAAA,oBACEW,eAAA,CAAA,KAAA,EAAA;AAAK,IAAA,YAAA,EAAYJ,SAAU;AAACP,IAAAA,SAAS,EAAES,OAAQ;AAAAD,IAAAA,QAAA,gBAC7CI,cAAA,CAAA,KAAA,EAAA;AAAKZ,MAAAA,SAAS,EAAC,oBAAoB;AAAAQ,MAAAA,QAAA,EAAEA,QAAAA;AAAQ,KAAM,CACnD,eAAAI,cAAA,CAACC,MAAM,EAAA;AAACX,MAAAA,IAAI,EAAEV,aAAa,CAACU,MAAI,CAAE;MAACY,SAAS,EAAA,IAAA;AAACC,MAAAA,UAAU,EAAE,KAAM;AAACf,MAAAA,SAAS,EAAC,mBAAmB;AAAAQ,MAAAA,QAAA,EAC1FT,KAAAA;AAAK,KACA,CACV,CAAA;AAAA,GAAK,CAAC,CAAA;AAEV;;;;"}
+{"version":3,"file":"Badge.js","sources":["../../src/badge/Badge.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ReactNode } from 'react';\n\nimport {\n  Size,\n  Theme,\n  SizeSmall,\n  SizeMedium,\n  SizeLarge,\n  ThemeDark,\n  ThemeLight,\n  CommonProps,\n} from '../common';\nimport Circle, { CircleProps } from '../common/circle';\n\n/**\n * @deprecated Use `SizeSmall` or `SizeLarge` instead.\n */\ntype DeprecatedSizes = SizeMedium;\n\nexport type BadgeProps = {\n  badge: ReactNode;\n  children: ReactNode;\n  /**\n   * `md` is deprecated, it will fallback to `sm` instead.\n   */\n  size?: SizeSmall | DeprecatedSizes | SizeLarge;\n  border?: ThemeDark | ThemeLight;\n  'aria-label'?: string;\n} & CommonProps;\n\nconst mapLegacySize = {\n  [String(Size.SMALL)]: 16,\n  // medium is deprecated, so we map it to small\n  [String(Size.MEDIUM)]: 16,\n  [String(Size.LARGE)]: 24,\n} satisfies Record<string, CircleProps['size']>;\n\nconst Badge = ({\n  badge,\n  className = undefined,\n  size: sizeProp = Size.SMALL,\n  border = Theme.LIGHT,\n  'aria-label': ariaLabel,\n  children,\n}: BadgeProps) => {\n  // medium is deprecated, so we map it to small\n  const size = sizeProp === Size.MEDIUM ? Size.SMALL : sizeProp;\n  const classes: string = clsx(\n    'tw-badge',\n    {\n      [`tw-badge-border-${border}`]: border,\n      [`tw-badge-${size}`]: size,\n    },\n    className,\n  );\n\n  return (\n    <div aria-label={ariaLabel} className={classes}>\n      <div className=\"tw-badge__children\">{children}</div>\n      <Circle size={mapLegacySize[size]} fixedSize className=\"tw-badge__content\">\n        {badge}\n      </Circle>\n    </div>\n  );\n};\n\nexport default Badge;\n"],"names":["mapLegacySize","String","Size","SMALL","MEDIUM","LARGE","Badge","badge","className","undefined","size","sizeProp","border","Theme","LIGHT","ariaLabel","children","classes","clsx","_jsxs","_jsx","Circle","fixedSize"],"mappings":";;;;;;;;AA+BA,MAAMA,aAAa,GAAG;AACpB,EAAA,CAACC,MAAM,CAACC,SAAI,CAACC,KAAK,CAAC,GAAG,EAAE;AACxB;AACA,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,KAAK,GAAGA,CAAC;EACbC,KAAK;AACLC,EAAAA,SAAS,GAAGC,SAAS;AACrBC,EAAAA,IAAI,EAAEC,QAAQ,GAAGT,SAAI,CAACC,KAAK;EAC3BS,MAAM,GAAGC,WAAK,CAACC,KAAK;AACpB,EAAA,YAAY,EAAEC,SAAS;AACvBC,EAAAA,QAAAA;AAAQ,CACG,KAAI;AACf;AACA,EAAA,MAAMN,MAAI,GAAGC,QAAQ,KAAKT,SAAI,CAACE,MAAM,GAAGF,SAAI,CAACC,KAAK,GAAGQ,QAAQ,CAAA;AAC7D,EAAA,MAAMM,OAAO,GAAWC,SAAI,CAC1B,UAAU,EACV;AACE,IAAA,CAAC,CAAmBN,gBAAAA,EAAAA,MAAM,CAAE,CAAA,GAAGA,MAAM;IACrC,CAAC,CAAA,SAAA,EAAYF,MAAI,CAAA,CAAE,GAAGA,MAAAA;GACvB,EACDF,SAAS,CACV,CAAA;AAED,EAAA,oBACEW,eAAA,CAAA,KAAA,EAAA;AAAK,IAAA,YAAA,EAAYJ,SAAU;AAACP,IAAAA,SAAS,EAAES,OAAQ;AAAAD,IAAAA,QAAA,gBAC7CI,cAAA,CAAA,KAAA,EAAA;AAAKZ,MAAAA,SAAS,EAAC,oBAAoB;AAAAQ,MAAAA,QAAA,EAAEA,QAAAA;AAAQ,KAAM,CACnD,eAAAI,cAAA,CAACC,MAAM,EAAA;AAACX,MAAAA,IAAI,EAAEV,aAAa,CAACU,MAAI,CAAE;MAACY,SAAS,EAAA,IAAA;AAACd,MAAAA,SAAS,EAAC,mBAAmB;AAAAQ,MAAAA,QAAA,EACvET,KAAAA;AAAK,KACA,CACV,CAAA;AAAA,GAAK,CAAC,CAAA;AAEV;;;;"}

package/build/badge/Badge.mjs

@@ -33,7 +33,6 @@ const Badge = ({
     }), /*#__PURE__*/jsx(Circle, {
       size: mapLegacySize[size],
       fixedSize: true,
-      iconSizing: false,
       className: "tw-badge__content",
       children: badge
     })]

package/build/badge/Badge.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.mjs","sources":["../../src/badge/Badge.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ReactNode } from 'react';\n\nimport {\n  Size,\n  Theme,\n  SizeSmall,\n  SizeMedium,\n  SizeLarge,\n  ThemeDark,\n  ThemeLight,\n  CommonProps,\n} from '../common';\nimport Circle, { CircleProps } from '../common/circle';\n\n/**\n * @deprecated Use `SizeSmall` or `SizeLarge` instead.\n */\ntype DeprecatedSizes = SizeMedium;\n\nexport type BadgeProps = {\n  badge: ReactNode;\n  children: ReactNode;\n  /**\n   * `md` is deprecated, it will fallback to `sm` instead.\n   */\n  size?: SizeSmall | DeprecatedSizes | SizeLarge;\n  border?: ThemeDark | ThemeLight;\n  'aria-label'?: string;\n} & CommonProps;\n\nconst mapLegacySize = {\n  [String(Size.SMALL)]: 16,\n  // medium is deprecated, so we map it to small\n  [String(Size.MEDIUM)]: 16,\n  [String(Size.LARGE)]: 24,\n} satisfies Record<string, CircleProps['size']>;\n\nconst Badge = ({\n  badge,\n  className = undefined,\n  size: sizeProp = Size.SMALL,\n  border = Theme.LIGHT,\n  'aria-label': ariaLabel,\n  children,\n}: BadgeProps) => {\n  // medium is deprecated, so we map it to small\n  const size = sizeProp === Size.MEDIUM ? Size.SMALL : sizeProp;\n  const classes: string = clsx(\n    'tw-badge',\n    {\n      [`tw-badge-border-${border}`]: border,\n      [`tw-badge-${size}`]: size,\n    },\n    className,\n  );\n\n  return (\n    <div aria-label={ariaLabel} className={classes}>\n      <div className=\"tw-badge__children\">{children}</div>\n      <Circle size={mapLegacySize[size]} fixedSize iconSizing={false} className=\"tw-badge__content\">\n        {badge}\n      </Circle>\n    </div>\n  );\n};\n\nexport default Badge;\n"],"names":["mapLegacySize","String","Size","SMALL","MEDIUM","LARGE","Badge","badge","className","undefined","size","sizeProp","border","Theme","LIGHT","ariaLabel","children","classes","clsx","_jsxs","_jsx","Circle","fixedSize","iconSizing"],"mappings":";;;;;;AA+BA,MAAMA,aAAa,GAAG;AACpB,EAAA,CAACC,MAAM,CAACC,IAAI,CAACC,KAAK,CAAC,GAAG,EAAE;AACxB;AACA,EAAA,CAACF,MAAM,CAACC,IAAI,CAACE,MAAM,CAAC,GAAG,EAAE;AACzB,EAAA,CAACH,MAAM,CAACC,IAAI,CAACG,KAAK,CAAC,GAAG,EAAA;CACuB,CAAA;AAEzCC,MAAAA,KAAK,GAAGA,CAAC;EACbC,KAAK;AACLC,EAAAA,SAAS,GAAGC,SAAS;AACrBC,EAAAA,IAAI,EAAEC,QAAQ,GAAGT,IAAI,CAACC,KAAK;EAC3BS,MAAM,GAAGC,KAAK,CAACC,KAAK;AACpB,EAAA,YAAY,EAAEC,SAAS;AACvBC,EAAAA,QAAAA;AAAQ,CACG,KAAI;AACf;AACA,EAAA,MAAMN,IAAI,GAAGC,QAAQ,KAAKT,IAAI,CAACE,MAAM,GAAGF,IAAI,CAACC,KAAK,GAAGQ,QAAQ,CAAA;AAC7D,EAAA,MAAMM,OAAO,GAAWC,IAAI,CAC1B,UAAU,EACV;AACE,IAAA,CAAC,CAAmBN,gBAAAA,EAAAA,MAAM,CAAE,CAAA,GAAGA,MAAM;IACrC,CAAC,CAAA,SAAA,EAAYF,IAAI,CAAA,CAAE,GAAGA,IAAAA;GACvB,EACDF,SAAS,CACV,CAAA;AAED,EAAA,oBACEW,IAAA,CAAA,KAAA,EAAA;AAAK,IAAA,YAAA,EAAYJ,SAAU;AAACP,IAAAA,SAAS,EAAES,OAAQ;AAAAD,IAAAA,QAAA,gBAC7CI,GAAA,CAAA,KAAA,EAAA;AAAKZ,MAAAA,SAAS,EAAC,oBAAoB;AAAAQ,MAAAA,QAAA,EAAEA,QAAAA;AAAQ,KAAM,CACnD,eAAAI,GAAA,CAACC,MAAM,EAAA;AAACX,MAAAA,IAAI,EAAEV,aAAa,CAACU,IAAI,CAAE;MAACY,SAAS,EAAA,IAAA;AAACC,MAAAA,UAAU,EAAE,KAAM;AAACf,MAAAA,SAAS,EAAC,mBAAmB;AAAAQ,MAAAA,QAAA,EAC1FT,KAAAA;AAAK,KACA,CACV,CAAA;AAAA,GAAK,CAAC,CAAA;AAEV;;;;"}
+{"version":3,"file":"Badge.mjs","sources":["../../src/badge/Badge.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ReactNode } from 'react';\n\nimport {\n  Size,\n  Theme,\n  SizeSmall,\n  SizeMedium,\n  SizeLarge,\n  ThemeDark,\n  ThemeLight,\n  CommonProps,\n} from '../common';\nimport Circle, { CircleProps } from '../common/circle';\n\n/**\n * @deprecated Use `SizeSmall` or `SizeLarge` instead.\n */\ntype DeprecatedSizes = SizeMedium;\n\nexport type BadgeProps = {\n  badge: ReactNode;\n  children: ReactNode;\n  /**\n   * `md` is deprecated, it will fallback to `sm` instead.\n   */\n  size?: SizeSmall | DeprecatedSizes | SizeLarge;\n  border?: ThemeDark | ThemeLight;\n  'aria-label'?: string;\n} & CommonProps;\n\nconst mapLegacySize = {\n  [String(Size.SMALL)]: 16,\n  // medium is deprecated, so we map it to small\n  [String(Size.MEDIUM)]: 16,\n  [String(Size.LARGE)]: 24,\n} satisfies Record<string, CircleProps['size']>;\n\nconst Badge = ({\n  badge,\n  className = undefined,\n  size: sizeProp = Size.SMALL,\n  border = Theme.LIGHT,\n  'aria-label': ariaLabel,\n  children,\n}: BadgeProps) => {\n  // medium is deprecated, so we map it to small\n  const size = sizeProp === Size.MEDIUM ? Size.SMALL : sizeProp;\n  const classes: string = clsx(\n    'tw-badge',\n    {\n      [`tw-badge-border-${border}`]: border,\n      [`tw-badge-${size}`]: size,\n    },\n    className,\n  );\n\n  return (\n    <div aria-label={ariaLabel} className={classes}>\n      <div className=\"tw-badge__children\">{children}</div>\n      <Circle size={mapLegacySize[size]} fixedSize className=\"tw-badge__content\">\n        {badge}\n      </Circle>\n    </div>\n  );\n};\n\nexport default Badge;\n"],"names":["mapLegacySize","String","Size","SMALL","MEDIUM","LARGE","Badge","badge","className","undefined","size","sizeProp","border","Theme","LIGHT","ariaLabel","children","classes","clsx","_jsxs","_jsx","Circle","fixedSize"],"mappings":";;;;;;AA+BA,MAAMA,aAAa,GAAG;AACpB,EAAA,CAACC,MAAM,CAACC,IAAI,CAACC,KAAK,CAAC,GAAG,EAAE;AACxB;AACA,EAAA,CAACF,MAAM,CAACC,IAAI,CAACE,MAAM,CAAC,GAAG,EAAE;AACzB,EAAA,CAACH,MAAM,CAACC,IAAI,CAACG,KAAK,CAAC,GAAG,EAAA;CACuB,CAAA;AAEzCC,MAAAA,KAAK,GAAGA,CAAC;EACbC,KAAK;AACLC,EAAAA,SAAS,GAAGC,SAAS;AACrBC,EAAAA,IAAI,EAAEC,QAAQ,GAAGT,IAAI,CAACC,KAAK;EAC3BS,MAAM,GAAGC,KAAK,CAACC,KAAK;AACpB,EAAA,YAAY,EAAEC,SAAS;AACvBC,EAAAA,QAAAA;AAAQ,CACG,KAAI;AACf;AACA,EAAA,MAAMN,IAAI,GAAGC,QAAQ,KAAKT,IAAI,CAACE,MAAM,GAAGF,IAAI,CAACC,KAAK,GAAGQ,QAAQ,CAAA;AAC7D,EAAA,MAAMM,OAAO,GAAWC,IAAI,CAC1B,UAAU,EACV;AACE,IAAA,CAAC,CAAmBN,gBAAAA,EAAAA,MAAM,CAAE,CAAA,GAAGA,MAAM;IACrC,CAAC,CAAA,SAAA,EAAYF,IAAI,CAAA,CAAE,GAAGA,IAAAA;GACvB,EACDF,SAAS,CACV,CAAA;AAED,EAAA,oBACEW,IAAA,CAAA,KAAA,EAAA;AAAK,IAAA,YAAA,EAAYJ,SAAU;AAACP,IAAAA,SAAS,EAAES,OAAQ;AAAAD,IAAAA,QAAA,gBAC7CI,GAAA,CAAA,KAAA,EAAA;AAAKZ,MAAAA,SAAS,EAAC,oBAAoB;AAAAQ,MAAAA,QAAA,EAAEA,QAAAA;AAAQ,KAAM,CACnD,eAAAI,GAAA,CAACC,MAAM,EAAA;AAACX,MAAAA,IAAI,EAAEV,aAAa,CAACU,IAAI,CAAE;MAACY,SAAS,EAAA,IAAA;AAACd,MAAAA,SAAS,EAAC,mBAAmB;AAAAQ,MAAAA,QAAA,EACvET,KAAAA;AAAK,KACA,CACV,CAAA;AAAA,GAAK,CAAC,CAAA;AAEV;;;;"}

package/build/circularButton/CircularButton.js

@@ -32,7 +32,7 @@ const CircularButton = ({
       // @ts-expect-error it's input[type=button] element
       ,
       type: "button",
-      size: isTinyViewport ? 72 : 56,
+      size: isTinyViewport ? 64 : 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 ? 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;;;;"}
+{"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;;;;"}

package/build/circularButton/CircularButton.mjs

@@ -30,7 +30,7 @@ const CircularButton = ({
       // @ts-expect-error it's input[type=button] element
       ,
       type: "button",
-      size: isTinyViewport ? 72 : 56,
+      size: isTinyViewport ? 64 : 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 ? 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;;;;"}
+{"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;;;;"}

package/build/common/circle/Circle.js

@@ -2,41 +2,25 @@
 
 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,
   size = 48,
   fixedSize = false,
-  iconSizing = true,
   className,
   style,
   ...props
 }, ref) {
-  const isTinyViewport = useMedia.useMedia(`(max-width: ${breakpoint.Breakpoint.ZOOM_400}px)`);
   return /*#__PURE__*/jsxRuntime.jsx(Element, {
     ...props,
     ref: ref,
     style: {
-      '--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
+      ...style,
+      '--circle-size': fixedSize ? `${size}px` : `var(--size-${size})`
     },
-    className: clsx.clsx('np-circle', {
-      'np-circle-icons-size': iconSizing
-    }, 'd-flex align-items-center justify-content-center', className),
+    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';\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  /**\n   * This property is temporary, as some components (e.g legacy Avatar) doesn't need new icon sizing, we delete it at some point\n   */\n  iconSizing?: 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    iconSizing = true,\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(\n        'np-circle',\n        { 'np-circle-icons-size': iconSizing },\n        'd-flex align-items-center justify-content-center',\n        className,\n      )}\n    >\n      {children}\n    </Element>\n  );\n});\n\nexport default Circle;\n"],"names":["MAP_ICON_SIZE","Circle","forwardRef","as","Element","children","size","fixedSize","iconSizing","className","style","props","ref","isTinyViewport","useMedia","Breakpoint","ZOOM_400","_jsx","clsx"],"mappings":";;;;;;;;AA8BA,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;AACjBC,EAAAA,UAAU,GAAG,IAAI;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,CAACb,OAAO,EAAA;AAAA,IAAA,GACFO,KAAK;AACTC,IAAAA,GAAG,EAAEA,GAAI;AACTF,IAAAA,KAAK,EAAE;MACL,eAAe,EAAEH,SAAS,GAAG,CAAA,EAAGD,IAAI,CAAI,EAAA,CAAA,GAAG,CAAcA,WAAAA,EAAAA,IAAI,CAAG,CAAA,CAAA;MAChE,oBAAoB,EAClBO,cAAc,IAAI,CAACN,SAAS,GACxB,CAAA,EAAGP,aAAa,CAACM,IAAI,CAAC,GAAG,CAAC,IAAI,GAC9B,CAAA,EAAGN,aAAa,CAACM,IAAI,CAAC,CAAI,EAAA,CAAA;MAChC,GAAGI,KAAAA;KACH;AACFD,IAAAA,SAAS,EAAES,SAAI,CACb,WAAW,EACX;AAAE,MAAA,sBAAsB,EAAEV,UAAAA;KAAY,EACtC,kDAAkD,EAClDC,SAAS,CACT;AAAAJ,IAAAA,QAAA,EAEDA,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';\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;;;;"}

package/build/common/circle/Circle.mjs

@@ -1,40 +1,24 @@
 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,
   size = 48,
   fixedSize = false,
-  iconSizing = true,
   className,
   style,
   ...props
 }, ref) {
-  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);
   return /*#__PURE__*/jsx(Element, {
     ...props,
     ref: ref,
     style: {
-      '--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
+      ...style,
+      '--circle-size': fixedSize ? `${size}px` : `var(--size-${size})`
     },
-    className: clsx('np-circle', {
-      'np-circle-icons-size': iconSizing
-    }, 'd-flex align-items-center justify-content-center', className),
+    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';\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  /**\n   * This property is temporary, as some components (e.g legacy Avatar) doesn't need new icon sizing, we delete it at some point\n   */\n  iconSizing?: 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    iconSizing = true,\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(\n        'np-circle',\n        { 'np-circle-icons-size': iconSizing },\n        'd-flex align-items-center justify-content-center',\n        className,\n      )}\n    >\n      {children}\n    </Element>\n  );\n});\n\nexport default Circle;\n"],"names":["MAP_ICON_SIZE","Circle","forwardRef","as","Element","children","size","fixedSize","iconSizing","className","style","props","ref","isTinyViewport","useMedia","Breakpoint","ZOOM_400","_jsx","clsx"],"mappings":";;;;;;AA8BA,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;AACjBC,EAAAA,UAAU,GAAG,IAAI;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,CAACb,OAAO,EAAA;AAAA,IAAA,GACFO,KAAK;AACTC,IAAAA,GAAG,EAAEA,GAAI;AACTF,IAAAA,KAAK,EAAE;MACL,eAAe,EAAEH,SAAS,GAAG,CAAA,EAAGD,IAAI,CAAI,EAAA,CAAA,GAAG,CAAcA,WAAAA,EAAAA,IAAI,CAAG,CAAA,CAAA;MAChE,oBAAoB,EAClBO,cAAc,IAAI,CAACN,SAAS,GACxB,CAAA,EAAGP,aAAa,CAACM,IAAI,CAAC,GAAG,CAAC,IAAI,GAC9B,CAAA,EAAGN,aAAa,CAACM,IAAI,CAAC,CAAI,EAAA,CAAA;MAChC,GAAGI,KAAAA;KACH;AACFD,IAAAA,SAAS,EAAES,IAAI,CACb,WAAW,EACX;AAAE,MAAA,sBAAsB,EAAEV,UAAAA;KAAY,EACtC,kDAAkD,EAClDC,SAAS,CACT;AAAAJ,IAAAA,QAAA,EAEDA,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';\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;;;;"}

package/build/common/constants.js

@@ -0,0 +1,15 @@
+'use strict';
+
+/**
+ * This file holds repository-wide constants that are reusable by more than 1 component.
+ */
+/**
+ * A delay [ms] after which it's OK to update a live region content,
+ * taking under consideration delayed programmatic refocusing
+ * of triggering components (e.g., SelectInput) and Accessibility
+ * Tree updates that prevent the screen reader announcements.
+ */
+const WDS_LIVE_REGION_DELAY_MS = 175;
+
+exports.WDS_LIVE_REGION_DELAY_MS = WDS_LIVE_REGION_DELAY_MS;
+//# sourceMappingURL=constants.js.map

package/build/common/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sources":["../../src/common/constants.ts"],"sourcesContent":["/**\n * This file holds repository-wide constants that are reusable by more than 1 component.\n */\n\n/**\n * A delay [ms] after which it's OK to update a live region content,\n * taking under consideration delayed programmatic refocusing\n * of triggering components (e.g., SelectInput) and Accessibility\n * Tree updates that prevent the screen reader announcements.\n */\nexport const WDS_LIVE_REGION_DELAY_MS = 175;\n"],"names":["WDS_LIVE_REGION_DELAY_MS"],"mappings":";;AAAA;;AAEG;AAEH;;;;;AAKG;AACI,MAAMA,wBAAwB,GAAG;;;;"}

package/build/common/constants.mjs

@@ -0,0 +1,13 @@
+/**
+ * This file holds repository-wide constants that are reusable by more than 1 component.
+ */
+/**
+ * A delay [ms] after which it's OK to update a live region content,
+ * taking under consideration delayed programmatic refocusing
+ * of triggering components (e.g., SelectInput) and Accessibility
+ * Tree updates that prevent the screen reader announcements.
+ */
+const WDS_LIVE_REGION_DELAY_MS = 175;
+
+export { WDS_LIVE_REGION_DELAY_MS };
+//# sourceMappingURL=constants.mjs.map

package/build/common/constants.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.mjs","sources":["../../src/common/constants.ts"],"sourcesContent":["/**\n * This file holds repository-wide constants that are reusable by more than 1 component.\n */\n\n/**\n * A delay [ms] after which it's OK to update a live region content,\n * taking under consideration delayed programmatic refocusing\n * of triggering components (e.g., SelectInput) and Accessibility\n * Tree updates that prevent the screen reader announcements.\n */\nexport const WDS_LIVE_REGION_DELAY_MS = 175;\n"],"names":["WDS_LIVE_REGION_DELAY_MS"],"mappings":"AAAA;;AAEG;AAEH;;;;;AAKG;AACI,MAAMA,wBAAwB,GAAG;;;;"}