@lidofinance/lido-app-ui 1.4.0 → 1.6.0

package/dist/esm/index.mjs

@@ -4,14 +4,17 @@ export { IconAdd } from './icons/components/base/IconAdd.mjs';
 export { IconAdjust } from './icons/components/base/IconAdjust.mjs';
 export { IconArrowDown } from './icons/components/base/IconArrowDown.mjs';
 export { IconArrowLeft } from './icons/components/base/IconArrowLeft.mjs';
+export { IconArrowNarrowDownLeft } from './icons/components/base/IconArrowNarrowDownLeft.mjs';
 export { IconArrowNarrowUpRight } from './icons/components/base/IconArrowNarrowUpRight.mjs';
 export { IconArrowRight } from './icons/components/base/IconArrowRight.mjs';
 export { IconArrowUp } from './icons/components/base/IconArrowUp.mjs';
 export { IconBell } from './icons/components/base/IconBell.mjs';
 export { IconBolt } from './icons/components/base/IconBolt.mjs';
 export { IconBox } from './icons/components/base/IconBox.mjs';
+export { IconCalendar } from './icons/components/base/IconCalendar.mjs';
 export { IconCheck } from './icons/components/base/IconCheck.mjs';
 export { IconChevronDown } from './icons/components/base/IconChevronDown.mjs';
+export { IconChevronLeft } from './icons/components/base/IconChevronLeft.mjs';
 export { IconChevronRight } from './icons/components/base/IconChevronRight.mjs';
 export { IconChevronUp } from './icons/components/base/IconChevronUp.mjs';
 export { IconChevronsUpDown } from './icons/components/base/IconChevronsUpDown.mjs';
@@ -27,6 +30,7 @@ export { IconDay } from './icons/components/base/IconDay.mjs';
 export { IconDownload } from './icons/components/base/IconDownload.mjs';
 export { IconExclamation } from './icons/components/base/IconExclamation.mjs';
 export { IconFilter } from './icons/components/base/IconFilter.mjs';
+export { IconFreeze } from './icons/components/base/IconFreeze.mjs';
 export { IconGem } from './icons/components/base/IconGem.mjs';
 export { IconHourglass } from './icons/components/base/IconHourglass.mjs';
 export { IconInfo } from './icons/components/base/IconInfo.mjs';
@@ -36,8 +40,11 @@ export { IconLink } from './icons/components/base/IconLink.mjs';
 export { IconListCheck } from './icons/components/base/IconListCheck.mjs';
 export { IconLoaderCircle } from './icons/components/base/IconLoaderCircle.mjs';
 export { IconLockKeyhole } from './icons/components/base/IconLockKeyhole.mjs';
+export { IconLogout } from './icons/components/base/IconLogout.mjs';
+export { IconMenu } from './icons/components/base/IconMenu.mjs';
 export { IconMinus } from './icons/components/base/IconMinus.mjs';
 export { IconNight } from './icons/components/base/IconNight.mjs';
+export { IconPause } from './icons/components/base/IconPause.mjs';
 export { IconPlus } from './icons/components/base/IconPlus.mjs';
 export { IconPriceDown } from './icons/components/base/IconPriceDown.mjs';
 export { IconPriceUp } from './icons/components/base/IconPriceUp.mjs';
@@ -48,12 +55,14 @@ export { IconShield } from './icons/components/base/IconShield.mjs';
 export { IconSpinner } from './icons/components/base/IconSpinner.mjs';
 export { IconStar } from './icons/components/base/IconStar.mjs';
 export { IconTrash } from './icons/components/base/IconTrash.mjs';
+export { IconUser } from './icons/components/base/IconUser.mjs';
+export { IconWallet } from './icons/components/base/IconWallet.mjs';
 export { IconWarning } from './icons/components/base/IconWarning.mjs';
 export { Avalanche } from './icons/components/chains/Avalanche.mjs';
 export { Bitcoin } from './icons/components/chains/Bitcoin.mjs';
 export { Ethereum } from './icons/components/chains/Ethereum.mjs';
 export { Mantle } from './icons/components/chains/Mantle.mjs';
-export { MegaETH } from './icons/components/chains/MegaETH.mjs';
+export { MegaEth } from './icons/components/chains/MegaEth.mjs';
 export { Metamask } from './icons/components/chains/Metamask.mjs';
 export { Monad } from './icons/components/chains/Monad.mjs';
 export { Optimism } from './icons/components/chains/Optimism.mjs';
@@ -62,10 +71,10 @@ export { Robinhood } from './icons/components/chains/Robinhood.mjs';
 export { Base } from './icons/components/chains/Base.mjs';
 export { Axis } from './icons/components/protocols/Axis.mjs';
 export { Balancer } from './icons/components/protocols/Balancer.mjs';
-export { CAP } from './icons/components/protocols/CAP.mjs';
-export { ETHENA } from './icons/components/protocols/Ethena.mjs';
+export { Cap } from './icons/components/protocols/Cap.mjs';
+export { Ethena } from './icons/components/protocols/Ethena.mjs';
 export { EtherFi } from './icons/components/protocols/EtherFi.mjs';
-export { KELP } from './icons/components/protocols/Kelp.mjs';
+export { Kelp } from './icons/components/protocols/Kelp.mjs';
 export { Maple } from './icons/components/protocols/Maple.mjs';
 export { Nethermind } from './icons/components/protocols/Nethermind.mjs';
 export { PendleDark } from './icons/components/protocols/PendleDark.mjs';
@@ -83,51 +92,51 @@ export { Mellow } from './icons/components/protocols/Mellow.mjs';
 export { Morpho } from './icons/components/protocols/Morpho.mjs';
 export { Spark } from './icons/components/protocols/Spark.mjs';
 export { Uniswap } from './icons/components/protocols/Uniswap.mjs';
-export { TokenAAVE } from './icons/components/token/TokenAAVE.mjs';
-export { TokenBTC } from './icons/components/token/TokenBTC.mjs';
-export { TokenCAP } from './icons/components/token/TokenCAP.mjs';
-export { TokenDOT } from './icons/components/token/TokenDOT.mjs';
-export { TokenDVstETH } from './icons/components/token/TokenDVstETH.mjs';
+export { TokenAave } from './icons/components/token/TokenAave.mjs';
+export { TokenBtc } from './icons/components/token/TokenBtc.mjs';
+export { TokenCap } from './icons/components/token/TokenCap.mjs';
+export { TokenDot } from './icons/components/token/TokenDot.mjs';
+export { TokenDvstEth } from './icons/components/token/TokenDvstEth.mjs';
 export { TokenEth } from './icons/components/token/TokenEth.mjs';
-export { TokenFLEX } from './icons/components/token/TokenFLEX.mjs';
-export { TokenGG } from './icons/components/token/TokenGG.mjs';
-export { TokenHUMA } from './icons/components/token/TokenHUMA.mjs';
-export { TokenIPOR } from './icons/components/token/TokenIPOR.mjs';
-export { TokenLDO } from './icons/components/token/TokenLDO.mjs';
-export { TokenMORPHO } from './icons/components/token/TokenMORPHO.mjs';
+export { TokenFlex } from './icons/components/token/TokenFlex.mjs';
+export { TokenGg } from './icons/components/token/TokenGg.mjs';
+export { TokenHuma } from './icons/components/token/TokenHuma.mjs';
+export { TokenIpor } from './icons/components/token/TokenIpor.mjs';
+export { TokenLdo } from './icons/components/token/TokenLdo.mjs';
+export { TokenMorpho } from './icons/components/token/TokenMorpho.mjs';
 export { TokenMellowPoints } from './icons/components/token/TokenMellowPoints.mjs';
-export { TokenOBOL } from './icons/components/token/TokenOBOL.mjs';
-export { TokenPTSrUSDe } from './icons/components/token/TokenPTSrUSDe.mjs';
-export { TokenSSV } from './icons/components/token/TokenSSV.mjs';
+export { TokenObol } from './icons/components/token/TokenObol.mjs';
+export { TokenPtSrUsde } from './icons/components/token/TokenPtSrUsde.mjs';
+export { TokenSsv } from './icons/components/token/TokenSsv.mjs';
 export { TokenSteth } from './icons/components/token/TokenSteth.mjs';
-export { TokenSyrupUSDC } from './icons/components/token/TokenSyrupUSDC.mjs';
-export { TokenTREE } from './icons/components/token/TokenTREE.mjs';
-export { TokenUSDC } from './icons/components/token/TokenUSDC.mjs';
-export { TokenUSDG } from './icons/components/token/TokenUSDG.mjs';
-export { TokenUSDM } from './icons/components/token/TokenUSDM.mjs';
-export { TokenUSDT } from './icons/components/token/TokenUSDT.mjs';
-export { TokenUSDY } from './icons/components/token/TokenUSDY.mjs';
-export { TokenUSDe } from './icons/components/token/TokenUSDe.mjs';
+export { TokenSyrupUsdc } from './icons/components/token/TokenSyrupUsdc.mjs';
+export { TokenTree } from './icons/components/token/TokenTree.mjs';
+export { TokenUsdc } from './icons/components/token/TokenUsdc.mjs';
+export { TokenUsdg } from './icons/components/token/TokenUsdg.mjs';
+export { TokenUsdm } from './icons/components/token/TokenUsdm.mjs';
+export { TokenUsdt } from './icons/components/token/TokenUsdt.mjs';
+export { TokenUsdy } from './icons/components/token/TokenUsdy.mjs';
+export { TokenUsde } from './icons/components/token/TokenUsde.mjs';
 export { TokenWsteth } from './icons/components/token/TokenWsteth.mjs';
-export { TokenYFI } from './icons/components/token/TokenYFI.mjs';
-export { TokenAUSD } from './icons/components/token/TokenAUSD.mjs';
-export { TokenEarnETH } from './icons/components/token/TokenEarnETH.mjs';
-export { TokenEarnUSD } from './icons/components/token/TokenEarnUSD.mjs';
-export { TokenFrxUSD } from './icons/components/token/TokenFrxUSD.mjs';
-export { TokenLlETH } from './icons/components/token/TokenLlETH.mjs';
-export { TokenMsUSD } from './icons/components/token/TokenMsUSD.mjs';
-export { TokenPyUSD } from './icons/components/token/TokenPyUSD.mjs';
-export { TokenRsETH } from './icons/components/token/TokenRsETH.mjs';
-export { TokenSpUSDG } from './icons/components/token/TokenSpUSDG.mjs';
-export { TokenSrUSDe } from './icons/components/token/TokenSrUSDe.mjs';
-export { TokenStrETH } from './icons/components/token/TokenStrETH.mjs';
-export { TokenSyrupUSDG } from './icons/components/token/TokenSyrupUSDG.mjs';
-export { TokenSyrupUSDT } from './icons/components/token/TokenSyrupUSDT.mjs';
-export { TokenWETH } from './icons/components/token/TokenWETH.mjs';
-export { BitGet } from './icons/components/wallets/Bitget.mjs';
+export { TokenYfi } from './icons/components/token/TokenYfi.mjs';
+export { TokenAUsd } from './icons/components/token/TokenAUsd.mjs';
+export { TokenEarnEth } from './icons/components/token/TokenEarnEth.mjs';
+export { TokenEarnUsd } from './icons/components/token/TokenEarnUsd.mjs';
+export { TokenFrxUsd } from './icons/components/token/TokenFrxUsd.mjs';
+export { TokenLlEth } from './icons/components/token/TokenLlEth.mjs';
+export { TokenMsUsd } from './icons/components/token/TokenMsUsd.mjs';
+export { TokenPyUsd } from './icons/components/token/TokenPyUsd.mjs';
+export { TokenRsEth } from './icons/components/token/TokenRsEth.mjs';
+export { TokenSpUsdg } from './icons/components/token/TokenSpUsdg.mjs';
+export { TokenSrUsde } from './icons/components/token/TokenSrUsde.mjs';
+export { TokenStrEth } from './icons/components/token/TokenStrEth.mjs';
+export { TokenSyrupUsdg } from './icons/components/token/TokenSyrupUsdg.mjs';
+export { TokenSyrupUsdt } from './icons/components/token/TokenSyrupUsdt.mjs';
+export { TokenWEth } from './icons/components/token/TokenWEth.mjs';
+export { BitGet } from './icons/components/wallets/BitGet.mjs';
 export { Browser } from './icons/components/wallets/Browser.mjs';
 export { WalletsMetamask } from './icons/components/wallets/WalletsMetamask.mjs';
-export { OKX } from './icons/components/wallets/OKX.mjs';
+export { Okx } from './icons/components/wallets/Okx.mjs';
 export { WalletConnect } from './icons/components/wallets/WalletConnect.mjs';
 export { Ledger } from './icons/components/wallets/Ledger.mjs';
 export { BASE_ICONS_MAP } from './icons/components/base/iconsMap.mjs';

package/dist/esm/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/input/Input.mjs

@@ -16,6 +16,7 @@ const Input = /*#__PURE__*/forwardRef((_ref, ref) => {
     disabled,
     className,
     id,
+    dataTestId,
     ...rest
   } = _ref;
   const fallbackId = useId();
@@ -26,11 +27,13 @@ const Input = /*#__PURE__*/forwardRef((_ref, ref) => {
   const showErrorMessage = errorMessage != null;
   return /*#__PURE__*/jsxs("div", {
     className: cn(styles.field, className),
+    "data-testid": dataTestId?.root,
     children: [label != null ? /*#__PURE__*/jsxs("span", {
       className: styles.labelRow,
       children: [/*#__PURE__*/jsx("label", {
         className: styles.label,
         htmlFor: inputId,
+        "data-testid": dataTestId?.label,
         children: label
       }), tooltip != null ? /*#__PURE__*/jsx(Tooltip, {
         content: tooltip,
@@ -47,6 +50,7 @@ const Input = /*#__PURE__*/forwardRef((_ref, ref) => {
       children: [icon ? /*#__PURE__*/jsx("span", {
         className: styles.icon,
         "aria-hidden": "true",
+        "data-testid": dataTestId?.icon,
         children: icon
       }) : null, /*#__PURE__*/jsx("input", {
         ref: ref,
@@ -55,15 +59,18 @@ const Input = /*#__PURE__*/forwardRef((_ref, ref) => {
         disabled: disabled,
         "aria-invalid": hasError || undefined,
         "aria-describedby": showErrorMessage ? errorId : undefined,
+        "data-testid": dataTestId?.input,
         ...rest
       })]
     }), showErrorMessage ? /*#__PURE__*/jsx("p", {
       id: errorId,
       className: styles.errorText,
       role: "alert",
+      "data-testid": dataTestId?.error,
       children: errorMessage
     }) : null, description != null ? /*#__PURE__*/jsx("p", {
       className: styles.description,
+      "data-testid": dataTestId?.description,
       children: description
     }) : null]
   });

package/dist/esm/input/Input.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Input.mjs","sources":["../../../src/input/Input.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useId,\n  type InputHTMLAttributes,\n  type ReactNode,\n} from 'react'\n\nimport cn from 'classnames'\n\nimport { IconInfo } from '../icons'\nimport { Tooltip } from '../tooltip'\nimport styles from './Input.module.css'\n\nexport type InputSize = 'default' | 'small'\n\nexport type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> & {\n  size?: InputSize\n  icon?: ReactNode\n  label?: ReactNode\n  tooltip?: ReactNode\n  description?: ReactNode\n  error?: ReactNode | boolean\n}\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      size = 'default',\n      icon,\n      label,\n      tooltip,\n      description,\n      error,\n      disabled,\n      className,\n      id,\n      ...rest\n    },\n    ref,\n  ) => {\n    const fallbackId = useId()\n    const inputId = id ?? fallbackId\n    const errorId = `${inputId}-error`\n\n    const hasError = Boolean(error)\n    const errorMessage = typeof error === 'boolean' ? null : error\n    const showErrorMessage = errorMessage != null\n\n    return (\n      <div className={cn(styles.field, className)}>\n        {label != null ? (\n          <span className={styles.labelRow}>\n            <label className={styles.label} htmlFor={inputId}>\n              {label}\n            </label>\n            {tooltip != null ? (\n              <Tooltip content={tooltip}>\n                <IconInfo className={styles.tooltipIcon} aria-hidden='true' />\n              </Tooltip>\n            ) : null}\n          </span>\n        ) : null}\n        <label\n          className={cn(styles.root, styles[size], {\n            [styles.error]: hasError,\n            [styles.disabled]: disabled,\n          })}\n        >\n          {icon ? (\n            <span className={styles.icon} aria-hidden='true'>\n              {icon}\n            </span>\n          ) : null}\n          <input\n            ref={ref}\n            id={inputId}\n            className={styles.input}\n            disabled={disabled}\n            aria-invalid={hasError || undefined}\n            aria-describedby={showErrorMessage ? errorId : undefined}\n            {...rest}\n          />\n        </label>\n        {showErrorMessage ? (\n          <p id={errorId} className={styles.errorText} role='alert'>\n            {errorMessage}\n          </p>\n        ) : null}\n        {description != null ? (\n          <p className={styles.description}>{description}</p>\n        ) : null}\n      </div>\n    )\n  },\n)\n\nInput.displayName = 'Input'\n"],"names":["Input","forwardRef","_ref","ref","size","icon","label","tooltip","description","error","disabled","className","id","rest","fallbackId","useId","inputId","errorId","hasError","Boolean","errorMessage","showErrorMessage","_jsxs","cn","styles","field","children","labelRow","_jsx","htmlFor","Tooltip","content","IconInfo","tooltipIcon","root","input","undefined","errorText","role","displayName"],"mappings":"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"}
+{"version":3,"file":"Input.mjs","sources":["../../../src/input/Input.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useId,\n  type InputHTMLAttributes,\n  type ReactNode,\n} from 'react'\n\nimport cn from 'classnames'\n\nimport { IconInfo } from '../icons'\nimport { Tooltip } from '../tooltip'\nimport styles from './Input.module.css'\n\nexport type InputSize = 'default' | 'small'\n\nexport type InputDataTestId = {\n  root?: string\n  label?: string\n  icon?: string\n  input?: string\n  error?: string\n  description?: string\n}\n\nexport type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> & {\n  size?: InputSize\n  icon?: ReactNode\n  label?: ReactNode\n  tooltip?: ReactNode\n  description?: ReactNode\n  error?: ReactNode | boolean\n  dataTestId?: InputDataTestId\n}\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      size = 'default',\n      icon,\n      label,\n      tooltip,\n      description,\n      error,\n      disabled,\n      className,\n      id,\n      dataTestId,\n      ...rest\n    },\n    ref,\n  ) => {\n    const fallbackId = useId()\n    const inputId = id ?? fallbackId\n    const errorId = `${inputId}-error`\n\n    const hasError = Boolean(error)\n    const errorMessage = typeof error === 'boolean' ? null : error\n    const showErrorMessage = errorMessage != null\n\n    return (\n      <div\n        className={cn(styles.field, className)}\n        data-testid={dataTestId?.root}\n      >\n        {label != null ? (\n          <span className={styles.labelRow}>\n            <label\n              className={styles.label}\n              htmlFor={inputId}\n              data-testid={dataTestId?.label}\n            >\n              {label}\n            </label>\n            {tooltip != null ? (\n              <Tooltip content={tooltip}>\n                <IconInfo className={styles.tooltipIcon} aria-hidden='true' />\n              </Tooltip>\n            ) : null}\n          </span>\n        ) : null}\n        <label\n          className={cn(styles.root, styles[size], {\n            [styles.error]: hasError,\n            [styles.disabled]: disabled,\n          })}\n        >\n          {icon ? (\n            <span\n              className={styles.icon}\n              aria-hidden='true'\n              data-testid={dataTestId?.icon}\n            >\n              {icon}\n            </span>\n          ) : null}\n          <input\n            ref={ref}\n            id={inputId}\n            className={styles.input}\n            disabled={disabled}\n            aria-invalid={hasError || undefined}\n            aria-describedby={showErrorMessage ? errorId : undefined}\n            data-testid={dataTestId?.input}\n            {...rest}\n          />\n        </label>\n        {showErrorMessage ? (\n          <p\n            id={errorId}\n            className={styles.errorText}\n            role='alert'\n            data-testid={dataTestId?.error}\n          >\n            {errorMessage}\n          </p>\n        ) : null}\n        {description != null ? (\n          <p\n            className={styles.description}\n            data-testid={dataTestId?.description}\n          >\n            {description}\n          </p>\n        ) : null}\n      </div>\n    )\n  },\n)\n\nInput.displayName = 'Input'\n"],"names":["Input","forwardRef","_ref","ref","size","icon","label","tooltip","description","error","disabled","className","id","dataTestId","rest","fallbackId","useId","inputId","errorId","hasError","Boolean","errorMessage","showErrorMessage","_jsxs","cn","styles","field","root","children","labelRow","_jsx","htmlFor","Tooltip","content","IconInfo","tooltipIcon","input","undefined","errorText","role","displayName"],"mappings":"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"}

package/dist/esm/message-box/MessageBox.mjs

@@ -20,23 +20,28 @@ const MessageBox = _ref => {
     headline,
     className,
     children,
+    dataTestId,
     ...rest
   } = _ref;
   const Icon = variantIcons[variant];
   return /*#__PURE__*/jsxs("div", {
     className: cn(styles.box, styles[variant], className),
+    "data-testid": dataTestId?.root,
     ...rest,
     children: [icon ? /*#__PURE__*/jsx("span", {
       className: styles.icon,
       "aria-hidden": "true",
+      "data-testid": dataTestId?.icon,
       children: /*#__PURE__*/jsx(Icon, {})
     }) : null, /*#__PURE__*/jsxs("div", {
       className: styles.text,
       children: [headline != null ? /*#__PURE__*/jsx("div", {
         className: styles.headline,
+        "data-testid": dataTestId?.headline,
         children: headline
       }) : null, /*#__PURE__*/jsx("div", {
         className: styles.description,
+        "data-testid": dataTestId?.description,
         children: children
       })]
     })]

package/dist/esm/message-box/MessageBox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MessageBox.mjs","sources":["../../../src/message-box/MessageBox.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react'\n\nimport { IconCheck, IconInfo, IconShield, IconWarning } from '../icons'\nimport cn from 'classnames'\n\nimport styles from './MessageBox.module.css'\n\nexport type MessageBoxVariant =\n  | 'default'\n  | 'info'\n  | 'warning'\n  | 'error'\n  | 'success'\n\nconst variantIcons = {\n  default: IconInfo,\n  info: IconShield,\n  warning: IconWarning,\n  error: IconWarning,\n  success: IconCheck,\n}\n\nexport type MessageBoxProps = HTMLAttributes<HTMLDivElement> & {\n  variant?: MessageBoxVariant\n  icon?: boolean\n  headline?: ReactNode\n}\n\nexport const MessageBox = ({\n  variant = 'default',\n  icon = true,\n  headline,\n  className,\n  children,\n  ...rest\n}: MessageBoxProps) => {\n  const Icon = variantIcons[variant]\n\n  return (\n    <div className={cn(styles.box, styles[variant], className)} {...rest}>\n      {icon ? (\n        <span className={styles.icon} aria-hidden='true'>\n          <Icon />\n        </span>\n      ) : null}\n      <div className={styles.text}>\n        {headline != null ? (\n          <div className={styles.headline}>{headline}</div>\n        ) : null}\n        <div className={styles.description}>{children}</div>\n      </div>\n    </div>\n  )\n}\n"],"names":["variantIcons","default","IconInfo","info","IconShield","warning","IconWarning","error","success","IconCheck","MessageBox","_ref","variant","icon","headline","className","children","rest","Icon","_jsxs","cn","styles","box","_jsx","text","description"],"mappings":";;;;;;;;AAcA,MAAMA,YAAY,GAAG;AACnBC,EAAAA,OAAO,EAAEC,QAAQ;AACjBC,EAAAA,IAAI,EAAEC,UAAU;AAChBC,EAAAA,OAAO,EAAEC,WAAW;AACpBC,EAAAA,KAAK,EAAED,WAAW;AAClBE,EAAAA,OAAO,EAAEC,SAAAA;AACX,CAAC,CAAA;AAQYC,MAAAA,UAAU,GAAGC,IAAA,IAOH;EAAA,IAPI;AACzBC,IAAAA,OAAO,GAAG,SAAS;AACnBC,IAAAA,IAAI,GAAG,IAAI;IACXC,QAAQ;IACRC,SAAS;IACTC,QAAQ;IACR,GAAGC,IAAAA;AACY,GAAC,GAAAN,IAAA,CAAA;AAChB,EAAA,MAAMO,IAAI,GAAGlB,YAAY,CAACY,OAAO,CAAC,CAAA;AAElC,EAAA,oBACEO,IAAA,CAAA,KAAA,EAAA;AAAKJ,IAAAA,SAAS,EAAEK,EAAE,CAACC,MAAM,CAACC,GAAG,EAAED,MAAM,CAACT,OAAO,CAAC,EAAEG,SAAS,CAAE;AAAA,IAAA,GAAKE,IAAI;IAAAD,QAAA,EAAA,CACjEH,IAAI,gBACHU,GAAA,CAAA,MAAA,EAAA;MAAMR,SAAS,EAAEM,MAAM,CAACR,IAAK;AAAC,MAAA,aAAA,EAAY,MAAM;AAAAG,MAAAA,QAAA,eAC9CO,GAAA,CAACL,IAAI,EAAE,EAAA,CAAA;AAAC,KACJ,CAAC,GACL,IAAI,eACRC,IAAA,CAAA,KAAA,EAAA;MAAKJ,SAAS,EAAEM,MAAM,CAACG,IAAK;AAAAR,MAAAA,QAAA,EACzBF,CAAAA,QAAQ,IAAI,IAAI,gBACfS,GAAA,CAAA,KAAA,EAAA;QAAKR,SAAS,EAAEM,MAAM,CAACP,QAAS;AAAAE,QAAAA,QAAA,EAAEF,QAAAA;AAAQ,OAAM,CAAC,GAC/C,IAAI,eACRS,GAAA,CAAA,KAAA,EAAA;QAAKR,SAAS,EAAEM,MAAM,CAACI,WAAY;AAAAT,QAAAA,QAAA,EAAEA,QAAAA;AAAQ,OAAM,CAAC,CAAA;AAAA,KACjD,CAAC,CAAA;AAAA,GACH,CAAC,CAAA;AAEV;;;;"}
+{"version":3,"file":"MessageBox.mjs","sources":["../../../src/message-box/MessageBox.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react'\n\nimport { IconCheck, IconInfo, IconShield, IconWarning } from '../icons'\nimport cn from 'classnames'\n\nimport styles from './MessageBox.module.css'\n\nexport type MessageBoxVariant =\n  | 'default'\n  | 'info'\n  | 'warning'\n  | 'error'\n  | 'success'\n\nconst variantIcons = {\n  default: IconInfo,\n  info: IconShield,\n  warning: IconWarning,\n  error: IconWarning,\n  success: IconCheck,\n}\n\nexport type MessageBoxDataTestId = {\n  root?: string\n  icon?: string\n  headline?: string\n  description?: string\n}\n\nexport type MessageBoxProps = HTMLAttributes<HTMLDivElement> & {\n  variant?: MessageBoxVariant\n  icon?: boolean\n  headline?: ReactNode\n  dataTestId?: MessageBoxDataTestId\n}\n\nexport const MessageBox = ({\n  variant = 'default',\n  icon = true,\n  headline,\n  className,\n  children,\n  dataTestId,\n  ...rest\n}: MessageBoxProps) => {\n  const Icon = variantIcons[variant]\n\n  return (\n    <div\n      className={cn(styles.box, styles[variant], className)}\n      data-testid={dataTestId?.root}\n      {...rest}\n    >\n      {icon ? (\n        <span\n          className={styles.icon}\n          aria-hidden='true'\n          data-testid={dataTestId?.icon}\n        >\n          <Icon />\n        </span>\n      ) : null}\n      <div className={styles.text}>\n        {headline != null ? (\n          <div className={styles.headline} data-testid={dataTestId?.headline}>\n            {headline}\n          </div>\n        ) : null}\n        <div\n          className={styles.description}\n          data-testid={dataTestId?.description}\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"names":["variantIcons","default","IconInfo","info","IconShield","warning","IconWarning","error","success","IconCheck","MessageBox","_ref","variant","icon","headline","className","children","dataTestId","rest","Icon","_jsxs","cn","styles","box","root","_jsx","text","description"],"mappings":";;;;;;;;AAcA,MAAMA,YAAY,GAAG;AACnBC,EAAAA,OAAO,EAAEC,QAAQ;AACjBC,EAAAA,IAAI,EAAEC,UAAU;AAChBC,EAAAA,OAAO,EAAEC,WAAW;AACpBC,EAAAA,KAAK,EAAED,WAAW;AAClBE,EAAAA,OAAO,EAAEC,SAAAA;AACX,CAAC,CAAA;AAgBYC,MAAAA,UAAU,GAAGC,IAAA,IAQH;EAAA,IARI;AACzBC,IAAAA,OAAO,GAAG,SAAS;AACnBC,IAAAA,IAAI,GAAG,IAAI;IACXC,QAAQ;IACRC,SAAS;IACTC,QAAQ;IACRC,UAAU;IACV,GAAGC,IAAAA;AACY,GAAC,GAAAP,IAAA,CAAA;AAChB,EAAA,MAAMQ,IAAI,GAAGnB,YAAY,CAACY,OAAO,CAAC,CAAA;AAElC,EAAA,oBACEQ,IAAA,CAAA,KAAA,EAAA;AACEL,IAAAA,SAAS,EAAEM,EAAE,CAACC,MAAM,CAACC,GAAG,EAAED,MAAM,CAACV,OAAO,CAAC,EAAEG,SAAS,CAAE;IACtD,aAAaE,EAAAA,UAAU,EAAEO,IAAK;AAAA,IAAA,GAC1BN,IAAI;IAAAF,QAAA,EAAA,CAEPH,IAAI,gBACHY,GAAA,CAAA,MAAA,EAAA;MACEV,SAAS,EAAEO,MAAM,CAACT,IAAK;AACvB,MAAA,aAAA,EAAY,MAAM;MAClB,aAAaI,EAAAA,UAAU,EAAEJ,IAAK;AAAAG,MAAAA,QAAA,eAE9BS,GAAA,CAACN,IAAI,EAAE,EAAA,CAAA;AAAC,KACJ,CAAC,GACL,IAAI,eACRC,IAAA,CAAA,KAAA,EAAA;MAAKL,SAAS,EAAEO,MAAM,CAACI,IAAK;AAAAV,MAAAA,QAAA,EACzBF,CAAAA,QAAQ,IAAI,IAAI,gBACfW,GAAA,CAAA,KAAA,EAAA;QAAKV,SAAS,EAAEO,MAAM,CAACR,QAAS;QAAC,aAAaG,EAAAA,UAAU,EAAEH,QAAS;AAAAE,QAAAA,QAAA,EAChEF,QAAAA;AAAQ,OACN,CAAC,GACJ,IAAI,eACRW,GAAA,CAAA,KAAA,EAAA;QACEV,SAAS,EAAEO,MAAM,CAACK,WAAY;QAC9B,aAAaV,EAAAA,UAAU,EAAEU,WAAY;AAAAX,QAAAA,QAAA,EAEpCA,QAAAA;AAAQ,OACN,CAAC,CAAA;AAAA,KACH,CAAC,CAAA;AAAA,GACH,CAAC,CAAA;AAEV;;;;"}

package/dist/esm/modal/Modal.mjs

@@ -28,7 +28,9 @@ const Modal = _ref => {
     withOverlay = false,
     bodyFill = false,
     children,
-    className
+    className,
+    dataTestId,
+    ...rest
   } = _ref;
   const titleId = useId();
   const backdropMouseDown = useRef(false);
@@ -50,6 +52,8 @@ const Modal = _ref => {
     role: "dialog",
     "aria-modal": withOverlay || undefined,
     "aria-labelledby": title ? titleId : undefined,
+    "data-testid": dataTestId?.root,
+    ...rest,
     children: [/*#__PURE__*/jsxs("div", {
       className: styles.headerGroup,
       children: [/*#__PURE__*/jsxs("div", {
@@ -57,19 +61,25 @@ const Modal = _ref => {
         children: [/*#__PURE__*/jsx("span", {
           id: titleId,
           className: cn(styles.title, !title && styles.titleHidden),
+          "data-testid": dataTestId?.title,
           children: title
         }), onClose ? /*#__PURE__*/jsx(IconButton, {
           variant: "outline",
           "aria-label": "Close",
           icon: /*#__PURE__*/jsx(IconCross, {}),
-          onClick: onClose
+          onClick: onClose,
+          dataTestId: {
+            root: dataTestId?.closeButton
+          }
         }) : null]
       }), subtitle != null ? /*#__PURE__*/jsx("p", {
         className: styles.subtitle,
+        "data-testid": dataTestId?.subtitle,
         children: subtitle
       }) : null]
     }), /*#__PURE__*/jsx("div", {
       className: styles.body,
+      "data-testid": dataTestId?.body,
       children: children
     })]
   });
@@ -84,6 +94,7 @@ const Modal = _ref => {
       className: styles.overlay,
       onMouseDown: handleOverlayMouseDown,
       onClick: handleOverlayClick,
+      "data-testid": dataTestId?.overlay,
       children: card
     })
   );

package/dist/esm/modal/Modal.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.mjs","sources":["../../../src/modal/Modal.tsx"],"sourcesContent":["import {\n  useEffect,\n  useId,\n  useRef,\n  type MouseEvent,\n  type ReactNode,\n} from 'react'\n\nimport { IconButton } from '../icon-button'\nimport { IconCross } from '../icons'\nimport cn from 'classnames'\n\nimport styles from './Modal.module.css'\n\n// Ref-counted so stacked overlays (e.g. connect modal + an action modal) lock on\n// the first and only restore on the last, regardless of close order.\nlet scrollLockCount = 0\nlet restoreOverflow = ''\n\nconst lockBodyScroll = () => {\n  if (scrollLockCount === 0) {\n    restoreOverflow = document.body.style.overflow\n    document.body.style.overflow = 'hidden'\n  }\n  scrollLockCount += 1\n}\n\nconst unlockBodyScroll = () => {\n  scrollLockCount = Math.max(0, scrollLockCount - 1)\n  if (scrollLockCount === 0) {\n    document.body.style.overflow = restoreOverflow\n  }\n}\n\nexport type ModalProps = {\n  title?: ReactNode\n  subtitle?: ReactNode\n  onClose?: () => void\n  withOverlay?: boolean\n  bodyFill?: boolean\n  children: ReactNode\n  className?: string\n}\n\nexport const Modal = ({\n  title,\n  subtitle,\n  onClose,\n  withOverlay = false,\n  bodyFill = false,\n  children,\n  className,\n}: ModalProps) => {\n  const titleId = useId()\n  const backdropMouseDown = useRef(false)\n\n  useEffect(() => {\n    if (!withOverlay) return\n    lockBodyScroll()\n    return unlockBodyScroll\n  }, [withOverlay])\n\n  const handleOverlayMouseDown = (event: MouseEvent<HTMLDivElement>) => {\n    backdropMouseDown.current = event.target === event.currentTarget\n  }\n\n  const handleOverlayClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (event.target !== event.currentTarget) return\n    if (!backdropMouseDown.current) return\n    onClose?.()\n  }\n\n  const card = (\n    <div\n      className={cn(styles.card, bodyFill && styles.cardBodyFill, className)}\n      role='dialog'\n      aria-modal={withOverlay || undefined}\n      aria-labelledby={title ? titleId : undefined}\n    >\n      <div className={styles.headerGroup}>\n        <div className={styles.header}>\n          <span\n            id={titleId}\n            className={cn(styles.title, !title && styles.titleHidden)}\n          >\n            {title}\n          </span>\n          {onClose ? (\n            <IconButton\n              variant='outline'\n              aria-label='Close'\n              icon={<IconCross />}\n              onClick={onClose}\n            />\n          ) : null}\n        </div>\n        {subtitle != null ? (\n          <p className={styles.subtitle}>{subtitle}</p>\n        ) : null}\n      </div>\n      <div className={styles.body}>{children}</div>\n    </div>\n  )\n\n  if (!withOverlay) return card\n\n  return (\n    // The backdrop is a pointer-only affordance — making it focusable would put\n    // a stop in the tab order before the dialog. Keyboard users close via the\n    // close button.\n    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions\n    <div\n      className={styles.overlay}\n      onMouseDown={handleOverlayMouseDown}\n      onClick={handleOverlayClick}\n    >\n      {card}\n    </div>\n  )\n}\n"],"names":["scrollLockCount","restoreOverflow","lockBodyScroll","document","body","style","overflow","unlockBodyScroll","Math","max","Modal","_ref","title","subtitle","onClose","withOverlay","bodyFill","children","className","titleId","useId","backdropMouseDown","useRef","useEffect","handleOverlayMouseDown","event","current","target","currentTarget","handleOverlayClick","card","_jsxs","cn","styles","cardBodyFill","role","undefined","headerGroup","header","_jsx","id","titleHidden","IconButton","variant","icon","IconCross","onClick","overlay","onMouseDown"],"mappings":"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"}
+{"version":3,"file":"Modal.mjs","sources":["../../../src/modal/Modal.tsx"],"sourcesContent":["import {\n  useEffect,\n  useId,\n  useRef,\n  type ComponentPropsWithoutRef,\n  type MouseEvent,\n  type ReactNode,\n} from 'react'\n\nimport { IconButton } from '../icon-button'\nimport { IconCross } from '../icons'\nimport cn from 'classnames'\n\nimport styles from './Modal.module.css'\n\n// Ref-counted so stacked overlays (e.g. connect modal + an action modal) lock on\n// the first and only restore on the last, regardless of close order.\nlet scrollLockCount = 0\nlet restoreOverflow = ''\n\nconst lockBodyScroll = () => {\n  if (scrollLockCount === 0) {\n    restoreOverflow = document.body.style.overflow\n    document.body.style.overflow = 'hidden'\n  }\n  scrollLockCount += 1\n}\n\nconst unlockBodyScroll = () => {\n  scrollLockCount = Math.max(0, scrollLockCount - 1)\n  if (scrollLockCount === 0) {\n    document.body.style.overflow = restoreOverflow\n  }\n}\n\nexport type ModalDataTestId = {\n  root?: string\n  title?: string\n  subtitle?: string\n  closeButton?: string\n  body?: string\n  overlay?: string\n}\n\nexport type ModalProps = Omit<\n  ComponentPropsWithoutRef<'div'>,\n  'title' | 'children'\n> & {\n  title?: ReactNode\n  subtitle?: ReactNode\n  onClose?: () => void\n  withOverlay?: boolean\n  bodyFill?: boolean\n  children: ReactNode\n  dataTestId?: ModalDataTestId\n}\n\nexport const Modal = ({\n  title,\n  subtitle,\n  onClose,\n  withOverlay = false,\n  bodyFill = false,\n  children,\n  className,\n  dataTestId,\n  ...rest\n}: ModalProps) => {\n  const titleId = useId()\n  const backdropMouseDown = useRef(false)\n\n  useEffect(() => {\n    if (!withOverlay) return\n    lockBodyScroll()\n    return unlockBodyScroll\n  }, [withOverlay])\n\n  const handleOverlayMouseDown = (event: MouseEvent<HTMLDivElement>) => {\n    backdropMouseDown.current = event.target === event.currentTarget\n  }\n\n  const handleOverlayClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (event.target !== event.currentTarget) return\n    if (!backdropMouseDown.current) return\n    onClose?.()\n  }\n\n  const card = (\n    <div\n      className={cn(styles.card, bodyFill && styles.cardBodyFill, className)}\n      role='dialog'\n      aria-modal={withOverlay || undefined}\n      aria-labelledby={title ? titleId : undefined}\n      data-testid={dataTestId?.root}\n      {...rest}\n    >\n      <div className={styles.headerGroup}>\n        <div className={styles.header}>\n          <span\n            id={titleId}\n            className={cn(styles.title, !title && styles.titleHidden)}\n            data-testid={dataTestId?.title}\n          >\n            {title}\n          </span>\n          {onClose ? (\n            <IconButton\n              variant='outline'\n              aria-label='Close'\n              icon={<IconCross />}\n              onClick={onClose}\n              dataTestId={{ root: dataTestId?.closeButton }}\n            />\n          ) : null}\n        </div>\n        {subtitle != null ? (\n          <p className={styles.subtitle} data-testid={dataTestId?.subtitle}>\n            {subtitle}\n          </p>\n        ) : null}\n      </div>\n      <div className={styles.body} data-testid={dataTestId?.body}>\n        {children}\n      </div>\n    </div>\n  )\n\n  if (!withOverlay) return card\n\n  return (\n    // The backdrop is a pointer-only affordance — making it focusable would put\n    // a stop in the tab order before the dialog. Keyboard users close via the\n    // close button.\n    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions\n    <div\n      className={styles.overlay}\n      onMouseDown={handleOverlayMouseDown}\n      onClick={handleOverlayClick}\n      data-testid={dataTestId?.overlay}\n    >\n      {card}\n    </div>\n  )\n}\n"],"names":["scrollLockCount","restoreOverflow","lockBodyScroll","document","body","style","overflow","unlockBodyScroll","Math","max","Modal","_ref","title","subtitle","onClose","withOverlay","bodyFill","children","className","dataTestId","rest","titleId","useId","backdropMouseDown","useRef","useEffect","handleOverlayMouseDown","event","current","target","currentTarget","handleOverlayClick","card","_jsxs","cn","styles","cardBodyFill","role","undefined","root","headerGroup","header","_jsx","id","titleHidden","IconButton","variant","icon","IconCross","onClick","closeButton","overlay","onMouseDown"],"mappings":"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"}

package/dist/esm/notification/Notification.mjs

@@ -7,22 +7,29 @@ const Notification = _ref => {
     title,
     children,
     actions,
-    className
+    className,
+    dataTestId,
+    ...rest
   } = _ref;
   return /*#__PURE__*/jsxs("div", {
     className: cn(styles.notification, className),
     role: "alert",
+    "data-testid": dataTestId?.root,
+    ...rest,
     children: [/*#__PURE__*/jsxs("div", {
       className: styles.content,
       children: [/*#__PURE__*/jsx("p", {
         className: styles.title,
+        "data-testid": dataTestId?.title,
         children: title
       }), children != null ? /*#__PURE__*/jsx("div", {
         className: styles.body,
+        "data-testid": dataTestId?.body,
         children: children
       }) : null]
     }), actions != null ? /*#__PURE__*/jsx("div", {
       className: styles.actions,
+      "data-testid": dataTestId?.actions,
       children: actions
     }) : null]
   });
@@ -32,11 +39,13 @@ const NotificationButton = _ref2 => {
     variant = 'primary',
     className,
     type = 'button',
+    dataTestId,
     ...rest
   } = _ref2;
   return /*#__PURE__*/jsx("button", {
     type: type,
     className: cn(styles.button, styles[variant], className),
+    "data-testid": dataTestId?.root,
     ...rest
   });
 };

package/dist/esm/notification/Notification.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Notification.mjs","sources":["../../../src/notification/Notification.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes, ReactNode } from 'react'\n\nimport cn from 'classnames'\n\nimport styles from './Notification.module.css'\n\nexport type NotificationProps = {\n  title: ReactNode\n  children?: ReactNode\n  actions?: ReactNode\n  className?: string\n}\n\nexport const Notification = ({\n  title,\n  children,\n  actions,\n  className,\n}: NotificationProps) => (\n  <div className={cn(styles.notification, className)} role='alert'>\n    <div className={styles.content}>\n      <p className={styles.title}>{title}</p>\n      {children != null ? <div className={styles.body}>{children}</div> : null}\n    </div>\n    {actions != null ? <div className={styles.actions}>{actions}</div> : null}\n  </div>\n)\n\nexport type NotificationButtonVariant = 'primary' | 'secondary'\n\nexport type NotificationButtonProps =\n  ButtonHTMLAttributes<HTMLButtonElement> & {\n    variant?: NotificationButtonVariant\n  }\n\nexport const NotificationButton = ({\n  variant = 'primary',\n  className,\n  type = 'button',\n  ...rest\n}: NotificationButtonProps) => (\n  <button\n    type={type}\n    className={cn(styles.button, styles[variant], className)}\n    {...rest}\n  />\n)\n"],"names":["Notification","_ref","title","children","actions","className","_jsxs","cn","styles","notification","role","content","_jsx","body","NotificationButton","_ref2","variant","type","rest","button"],"mappings":";;;;AAaO,MAAMA,YAAY,GAAGC,IAAA,IAAA;EAAA,IAAC;IAC3BC,KAAK;IACLC,QAAQ;IACRC,OAAO;AACPC,IAAAA,SAAAA;AACiB,GAAC,GAAAJ,IAAA,CAAA;AAAA,EAAA,oBAClBK,IAAA,CAAA,KAAA,EAAA;IAAKD,SAAS,EAAEE,EAAE,CAACC,MAAM,CAACC,YAAY,EAAEJ,SAAS,CAAE;AAACK,IAAAA,IAAI,EAAC,OAAO;AAAAP,IAAAA,QAAA,gBAC9DG,IAAA,CAAA,KAAA,EAAA;MAAKD,SAAS,EAAEG,MAAM,CAACG,OAAQ;AAAAR,MAAAA,QAAA,gBAC7BS,GAAA,CAAA,GAAA,EAAA;QAAGP,SAAS,EAAEG,MAAM,CAACN,KAAM;AAAAC,QAAAA,QAAA,EAAED,KAAAA;AAAK,OAAI,CAAC,EACtCC,QAAQ,IAAI,IAAI,gBAAGS,GAAA,CAAA,KAAA,EAAA;QAAKP,SAAS,EAAEG,MAAM,CAACK,IAAK;AAAAV,QAAAA,QAAA,EAAEA,QAAAA;OAAc,CAAC,GAAG,IAAI,CAAA;AAAA,KACrE,CAAC,EACLC,OAAO,IAAI,IAAI,gBAAGQ,GAAA,CAAA,KAAA,EAAA;MAAKP,SAAS,EAAEG,MAAM,CAACJ,OAAQ;AAAAD,MAAAA,QAAA,EAAEC,OAAAA;KAAa,CAAC,GAAG,IAAI,CAAA;AAAA,GACtE,CAAC,CAAA;AAAA,EACP;AASM,MAAMU,kBAAkB,GAAGC,KAAA,IAAA;EAAA,IAAC;AACjCC,IAAAA,OAAO,GAAG,SAAS;IACnBX,SAAS;AACTY,IAAAA,IAAI,GAAG,QAAQ;IACf,GAAGC,IAAAA;AACoB,GAAC,GAAAH,KAAA,CAAA;AAAA,EAAA,oBACxBH,GAAA,CAAA,QAAA,EAAA;AACEK,IAAAA,IAAI,EAAEA,IAAK;AACXZ,IAAAA,SAAS,EAAEE,EAAE,CAACC,MAAM,CAACW,MAAM,EAAEX,MAAM,CAACQ,OAAO,CAAC,EAAEX,SAAS,CAAE;IAAA,GACrDa,IAAAA;AAAI,GACT,CAAC,CAAA;AAAA;;;;"}
+{"version":3,"file":"Notification.mjs","sources":["../../../src/notification/Notification.tsx"],"sourcesContent":["import type {\n  ButtonHTMLAttributes,\n  ComponentPropsWithoutRef,\n  ReactNode,\n} from 'react'\n\nimport cn from 'classnames'\n\nimport styles from './Notification.module.css'\n\nexport type NotificationDataTestId = {\n  root?: string\n  title?: string\n  body?: string\n  actions?: string\n}\n\nexport type NotificationProps = Omit<\n  ComponentPropsWithoutRef<'div'>,\n  'title'\n> & {\n  title: ReactNode\n  actions?: ReactNode\n  dataTestId?: NotificationDataTestId\n}\n\nexport const Notification = ({\n  title,\n  children,\n  actions,\n  className,\n  dataTestId,\n  ...rest\n}: NotificationProps) => (\n  <div\n    className={cn(styles.notification, className)}\n    role='alert'\n    data-testid={dataTestId?.root}\n    {...rest}\n  >\n    <div className={styles.content}>\n      <p className={styles.title} data-testid={dataTestId?.title}>\n        {title}\n      </p>\n      {children != null ? (\n        <div className={styles.body} data-testid={dataTestId?.body}>\n          {children}\n        </div>\n      ) : null}\n    </div>\n    {actions != null ? (\n      <div className={styles.actions} data-testid={dataTestId?.actions}>\n        {actions}\n      </div>\n    ) : null}\n  </div>\n)\n\nexport type NotificationButtonVariant = 'primary' | 'secondary'\n\nexport type NotificationButtonDataTestId = {\n  root?: string\n}\n\nexport type NotificationButtonProps =\n  ButtonHTMLAttributes<HTMLButtonElement> & {\n    variant?: NotificationButtonVariant\n    dataTestId?: NotificationButtonDataTestId\n  }\n\nexport const NotificationButton = ({\n  variant = 'primary',\n  className,\n  type = 'button',\n  dataTestId,\n  ...rest\n}: NotificationButtonProps) => (\n  <button\n    type={type}\n    className={cn(styles.button, styles[variant], className)}\n    data-testid={dataTestId?.root}\n    {...rest}\n  />\n)\n"],"names":["Notification","_ref","title","children","actions","className","dataTestId","rest","_jsxs","cn","styles","notification","role","root","content","_jsx","body","NotificationButton","_ref2","variant","type","button"],"mappings":";;;;AA0BO,MAAMA,YAAY,GAAGC,IAAA,IAAA;EAAA,IAAC;IAC3BC,KAAK;IACLC,QAAQ;IACRC,OAAO;IACPC,SAAS;IACTC,UAAU;IACV,GAAGC,IAAAA;AACc,GAAC,GAAAN,IAAA,CAAA;AAAA,EAAA,oBAClBO,IAAA,CAAA,KAAA,EAAA;IACEH,SAAS,EAAEI,EAAE,CAACC,MAAM,CAACC,YAAY,EAAEN,SAAS,CAAE;AAC9CO,IAAAA,IAAI,EAAC,OAAO;IACZ,aAAaN,EAAAA,UAAU,EAAEO,IAAK;AAAA,IAAA,GAC1BN,IAAI;AAAAJ,IAAAA,QAAA,gBAERK,IAAA,CAAA,KAAA,EAAA;MAAKH,SAAS,EAAEK,MAAM,CAACI,OAAQ;AAAAX,MAAAA,QAAA,gBAC7BY,GAAA,CAAA,GAAA,EAAA;QAAGV,SAAS,EAAEK,MAAM,CAACR,KAAM;QAAC,aAAaI,EAAAA,UAAU,EAAEJ,KAAM;AAAAC,QAAAA,QAAA,EACxDD,KAAAA;AAAK,OACL,CAAC,EACHC,QAAQ,IAAI,IAAI,gBACfY,GAAA,CAAA,KAAA,EAAA;QAAKV,SAAS,EAAEK,MAAM,CAACM,IAAK;QAAC,aAAaV,EAAAA,UAAU,EAAEU,IAAK;AAAAb,QAAAA,QAAA,EACxDA,QAAAA;OACE,CAAC,GACJ,IAAI,CAAA;AAAA,KACL,CAAC,EACLC,OAAO,IAAI,IAAI,gBACdW,GAAA,CAAA,KAAA,EAAA;MAAKV,SAAS,EAAEK,MAAM,CAACN,OAAQ;MAAC,aAAaE,EAAAA,UAAU,EAAEF,OAAQ;AAAAD,MAAAA,QAAA,EAC9DC,OAAAA;KACE,CAAC,GACJ,IAAI,CAAA;AAAA,GACL,CAAC,CAAA;AAAA,EACP;AAcM,MAAMa,kBAAkB,GAAGC,KAAA,IAAA;EAAA,IAAC;AACjCC,IAAAA,OAAO,GAAG,SAAS;IACnBd,SAAS;AACTe,IAAAA,IAAI,GAAG,QAAQ;IACfd,UAAU;IACV,GAAGC,IAAAA;AACoB,GAAC,GAAAW,KAAA,CAAA;AAAA,EAAA,oBACxBH,GAAA,CAAA,QAAA,EAAA;AACEK,IAAAA,IAAI,EAAEA,IAAK;AACXf,IAAAA,SAAS,EAAEI,EAAE,CAACC,MAAM,CAACW,MAAM,EAAEX,MAAM,CAACS,OAAO,CAAC,EAAEd,SAAS,CAAE;IACzD,aAAaC,EAAAA,UAAU,EAAEO,IAAK;IAAA,GAC1BN,IAAAA;AAAI,GACT,CAAC,CAAA;AAAA;;;;"}

package/dist/esm/radio-button/RadioButton.mjs

@@ -8,12 +8,14 @@ const RadioButton = /*#__PURE__*/forwardRef((_ref, ref) => {
     label,
     className,
     disabled,
+    dataTestId,
     ...rest
   } = _ref;
   return /*#__PURE__*/jsxs("label", {
     className: cn(styles.container, className, {
       [styles.containerDisabled]: disabled
     }),
+    "data-testid": dataTestId?.root,
     children: [/*#__PURE__*/jsxs("span", {
       className: styles.control,
       children: [/*#__PURE__*/jsx("input", {
@@ -21,6 +23,7 @@ const RadioButton = /*#__PURE__*/forwardRef((_ref, ref) => {
         type: "radio",
         className: styles.input,
         disabled: disabled,
+        "data-testid": dataTestId?.input,
         ...rest
       }), /*#__PURE__*/jsx("span", {
         className: styles.dot
@@ -29,6 +32,7 @@ const RadioButton = /*#__PURE__*/forwardRef((_ref, ref) => {
       className: cn(styles.label, {
         [styles.labelDisabled]: disabled
       }),
+      "data-testid": dataTestId?.label,
       children: label
     }) : null]
   });

package/dist/esm/radio-button/RadioButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.mjs","sources":["../../../src/radio-button/RadioButton.tsx"],"sourcesContent":["import { forwardRef, type InputHTMLAttributes, type ReactNode } from 'react'\n\nimport cn from 'classnames'\n\nimport styles from './RadioButton.module.css'\n\nexport type RadioButtonProps = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'type'\n> & {\n  label?: ReactNode\n}\n\nexport const RadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(\n  ({ label, className, disabled, ...rest }, ref) => (\n    <label\n      className={cn(styles.container, className, {\n        [styles.containerDisabled]: disabled,\n      })}\n    >\n      <span className={styles.control}>\n        <input\n          ref={ref}\n          type='radio'\n          className={styles.input}\n          disabled={disabled}\n          {...rest}\n        />\n        <span className={styles.dot} />\n      </span>\n      {label ? (\n        <span\n          className={cn(styles.label, { [styles.labelDisabled]: disabled })}\n        >\n          {label}\n        </span>\n      ) : null}\n    </label>\n  ),\n)\n\nRadioButton.displayName = 'RadioButton'\n"],"names":["RadioButton","forwardRef","_ref","ref","label","className","disabled","rest","_jsxs","cn","styles","container","containerDisabled","children","control","_jsx","type","input","dot","labelDisabled","displayName"],"mappings":";;;;;AAaO,MAAMA,WAAW,gBAAGC,UAAU,CACnC,CAAAC,IAAA,EAA0CC,GAAG,KAAA;EAAA,IAA5C;IAAEC,KAAK;IAAEC,SAAS;IAAEC,QAAQ;IAAE,GAAGC,IAAAA;AAAK,GAAC,GAAAL,IAAA,CAAA;AAAA,EAAA,oBACtCM,IAAA,CAAA,OAAA,EAAA;IACEH,SAAS,EAAEI,EAAE,CAACC,MAAM,CAACC,SAAS,EAAEN,SAAS,EAAE;MACzC,CAACK,MAAM,CAACE,iBAAiB,GAAGN,QAAAA;AAC9B,KAAC,CAAE;AAAAO,IAAAA,QAAA,gBAEHL,IAAA,CAAA,MAAA,EAAA;MAAMH,SAAS,EAAEK,MAAM,CAACI,OAAQ;AAAAD,MAAAA,QAAA,gBAC9BE,GAAA,CAAA,OAAA,EAAA;AACEZ,QAAAA,GAAG,EAAEA,GAAI;AACTa,QAAAA,IAAI,EAAC,OAAO;QACZX,SAAS,EAAEK,MAAM,CAACO,KAAM;AACxBX,QAAAA,QAAQ,EAAEA,QAAS;QAAA,GACfC,IAAAA;OACL,CAAC,eACFQ,GAAA,CAAA,MAAA,EAAA;QAAMV,SAAS,EAAEK,MAAM,CAACQ,GAAAA;AAAI,OAAE,CAAC,CAAA;AAAA,KAC3B,CAAC,EACNd,KAAK,gBACJW,GAAA,CAAA,MAAA,EAAA;AACEV,MAAAA,SAAS,EAAEI,EAAE,CAACC,MAAM,CAACN,KAAK,EAAE;QAAE,CAACM,MAAM,CAACS,aAAa,GAAGb,QAAAA;AAAS,OAAC,CAAE;AAAAO,MAAAA,QAAA,EAEjET,KAAAA;KACG,CAAC,GACL,IAAI,CAAA;AAAA,GACH,CAAC,CAAA;AAAA,CAEZ,EAAC;AAEDJ,WAAW,CAACoB,WAAW,GAAG,aAAa;;;;"}
+{"version":3,"file":"RadioButton.mjs","sources":["../../../src/radio-button/RadioButton.tsx"],"sourcesContent":["import { forwardRef, type InputHTMLAttributes, type ReactNode } from 'react'\n\nimport cn from 'classnames'\n\nimport styles from './RadioButton.module.css'\n\nexport type RadioButtonDataTestId = {\n  root?: string\n  input?: string\n  label?: string\n}\n\nexport type RadioButtonProps = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'type'\n> & {\n  label?: ReactNode\n  dataTestId?: RadioButtonDataTestId\n}\n\nexport const RadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(\n  ({ label, className, disabled, dataTestId, ...rest }, ref) => (\n    <label\n      className={cn(styles.container, className, {\n        [styles.containerDisabled]: disabled,\n      })}\n      data-testid={dataTestId?.root}\n    >\n      <span className={styles.control}>\n        <input\n          ref={ref}\n          type='radio'\n          className={styles.input}\n          disabled={disabled}\n          data-testid={dataTestId?.input}\n          {...rest}\n        />\n        <span className={styles.dot} />\n      </span>\n      {label ? (\n        <span\n          className={cn(styles.label, { [styles.labelDisabled]: disabled })}\n          data-testid={dataTestId?.label}\n        >\n          {label}\n        </span>\n      ) : null}\n    </label>\n  ),\n)\n\nRadioButton.displayName = 'RadioButton'\n"],"names":["RadioButton","forwardRef","_ref","ref","label","className","disabled","dataTestId","rest","_jsxs","cn","styles","container","containerDisabled","root","children","control","_jsx","type","input","dot","labelDisabled","displayName"],"mappings":";;;;;AAoBO,MAAMA,WAAW,gBAAGC,UAAU,CACnC,CAAAC,IAAA,EAAsDC,GAAG,KAAA;EAAA,IAAxD;IAAEC,KAAK;IAAEC,SAAS;IAAEC,QAAQ;IAAEC,UAAU;IAAE,GAAGC,IAAAA;AAAK,GAAC,GAAAN,IAAA,CAAA;AAAA,EAAA,oBAClDO,IAAA,CAAA,OAAA,EAAA;IACEJ,SAAS,EAAEK,EAAE,CAACC,MAAM,CAACC,SAAS,EAAEP,SAAS,EAAE;MACzC,CAACM,MAAM,CAACE,iBAAiB,GAAGP,QAAAA;AAC9B,KAAC,CAAE;IACH,aAAaC,EAAAA,UAAU,EAAEO,IAAK;AAAAC,IAAAA,QAAA,gBAE9BN,IAAA,CAAA,MAAA,EAAA;MAAMJ,SAAS,EAAEM,MAAM,CAACK,OAAQ;AAAAD,MAAAA,QAAA,gBAC9BE,GAAA,CAAA,OAAA,EAAA;AACEd,QAAAA,GAAG,EAAEA,GAAI;AACTe,QAAAA,IAAI,EAAC,OAAO;QACZb,SAAS,EAAEM,MAAM,CAACQ,KAAM;AACxBb,QAAAA,QAAQ,EAAEA,QAAS;QACnB,aAAaC,EAAAA,UAAU,EAAEY,KAAM;QAAA,GAC3BX,IAAAA;OACL,CAAC,eACFS,GAAA,CAAA,MAAA,EAAA;QAAMZ,SAAS,EAAEM,MAAM,CAACS,GAAAA;AAAI,OAAE,CAAC,CAAA;AAAA,KAC3B,CAAC,EACNhB,KAAK,gBACJa,GAAA,CAAA,MAAA,EAAA;AACEZ,MAAAA,SAAS,EAAEK,EAAE,CAACC,MAAM,CAACP,KAAK,EAAE;QAAE,CAACO,MAAM,CAACU,aAAa,GAAGf,QAAAA;AAAS,OAAC,CAAE;MAClE,aAAaC,EAAAA,UAAU,EAAEH,KAAM;AAAAW,MAAAA,QAAA,EAE9BX,KAAAA;KACG,CAAC,GACL,IAAI,CAAA;AAAA,GACH,CAAC,CAAA;AAAA,CAEZ,EAAC;AAEDJ,WAAW,CAACsB,WAAW,GAAG,aAAa;;;;"}

package/dist/esm/rich-input/RichInput.mjs

@@ -51,6 +51,7 @@ const RichInput = _ref2 => {
     className,
     id,
     disabled,
+    dataTestId,
     ...inputProps
   } = _ref2;
   const inputRef = useRef(null);
@@ -95,11 +96,13 @@ const RichInput = _ref2 => {
     jsxs("div", {
       className: cn(styles.root, hasError && styles.error, className),
       onClick: handleRootClick,
+      "data-testid": dataTestId?.root,
       children: [label != null ? /*#__PURE__*/jsxs("span", {
         className: styles.labelRow,
         children: [/*#__PURE__*/jsx("label", {
           className: styles.label,
           htmlFor: inputId,
+          "data-testid": dataTestId?.label,
           children: label
         }), labelTooltip != null ? /*#__PURE__*/jsx(Tooltip, {
           content: labelTooltip,
@@ -119,6 +122,7 @@ const RichInput = _ref2 => {
           "aria-invalid": hasError || undefined,
           "aria-describedby": showErrorMessage ? errorId : undefined,
           onChange: handleChange,
+          "data-testid": dataTestId?.input,
           ...inputProps
         }), tokenSelector != null ? /*#__PURE__*/jsx("div", {
           className: styles.token,
@@ -128,11 +132,13 @@ const RichInput = _ref2 => {
         className: styles.bottomRow,
         children: [secondaryValue != null ? /*#__PURE__*/jsx("span", {
           className: styles.secondary,
+          "data-testid": dataTestId?.secondaryValue,
           children: secondaryValue
         }) : null, /*#__PURE__*/jsxs("div", {
           className: styles.balanceGroup,
           children: [balance != null ? /*#__PURE__*/jsx("span", {
             className: styles.balance,
+            "data-testid": dataTestId?.balance,
             children: balance
           }) : null, showMax ? maxTooltip != null ? /*#__PURE__*/jsx(Tooltip, {
             content: maxTooltip,
@@ -140,16 +146,19 @@ const RichInput = _ref2 => {
             width: 240,
             children: /*#__PURE__*/jsx(MaxTag, {
               onClick: onMaxClick,
+              "data-testid": dataTestId?.maxButton,
               children: "Max"
             })
           }) : /*#__PURE__*/jsx(MaxTag, {
             onClick: onMaxClick,
+            "data-testid": dataTestId?.maxButton,
             children: "Max"
           }) : null]
         })]
       }) : null, showErrorMessage ? /*#__PURE__*/jsx("div", {
         id: errorId,
         className: styles.errorMessage,
+        "data-testid": dataTestId?.error,
         children: errorMessage
       }) : null]
     })