@lidofinance/lido-app-ui 1.5.0 → 1.7.0

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]
     })

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

@@ -1 +1 @@
-{"version":3,"file":"RichInput.mjs","sources":["../../../src/rich-input/RichInput.tsx"],"sourcesContent":["import {\n  useId,\n  useRef,\n  type ChangeEvent,\n  type InputHTMLAttributes,\n  type KeyboardEvent,\n  type MouseEvent,\n  type MouseEventHandler,\n  type ReactNode,\n} from 'react'\n\nimport cn from 'classnames'\nimport { IconInfo } from '../icons'\nimport { Tag, type TagProps } from '../tag'\nimport { Tooltip } from '../tooltip'\n\nimport styles from './RichInput.module.css'\n\nexport type RichInputProps = InputHTMLAttributes<HTMLInputElement> & {\n  label?: ReactNode\n  labelTooltip?: ReactNode\n  secondaryValue?: ReactNode\n  balance?: ReactNode\n  tokenSelector?: ReactNode\n  error?: ReactNode | boolean\n  showMaxButton?: boolean\n  onMaxClick?: MouseEventHandler<HTMLSpanElement>\n  maxTooltip?: ReactNode\n}\n\nconst MaxTag = ({ onClick, className, ...rest }: TagProps) => (\n  <Tag\n    role='button'\n    tabIndex={0}\n    className={cn(styles.maxTag, className)}\n    onClick={onClick}\n    onKeyDown={(event: KeyboardEvent<HTMLSpanElement>) => {\n      if (event.key !== 'Enter' && event.key !== ' ') return\n      event.preventDefault()\n      onClick?.(event as unknown as MouseEvent<HTMLSpanElement>)\n    }}\n    {...rest}\n  />\n)\n\n// Keep only digits and a single decimal point; comma is treated as the\n// decimal separator and normalized to a dot (en-US canonical form).\nconst sanitizeDecimal = (raw: string): string => {\n  const normalized = raw.replace(/,/g, '.').replace(/[^\\d.]/g, '')\n  const firstDot = normalized.indexOf('.')\n  if (firstDot === -1) return normalized\n  const head = normalized.slice(0, firstDot + 1)\n  const tail = normalized.slice(firstDot + 1).replace(/\\./g, '')\n  return head + tail\n}\n\nexport const RichInput = ({\n  label,\n  labelTooltip,\n  secondaryValue,\n  balance,\n  tokenSelector,\n  error,\n  showMaxButton = true,\n  onMaxClick,\n  maxTooltip,\n  onChange,\n  className,\n  id,\n  disabled,\n  ...inputProps\n}: RichInputProps) => {\n  const inputRef = useRef<HTMLInputElement>(null)\n  const fallbackId = useId()\n  const inputId = id ?? fallbackId\n\n  const hasError = Boolean(error)\n  const errorMessage = typeof error === 'boolean' ? null : error\n  const showErrorMessage = errorMessage != null && errorMessage !== ''\n  const errorId = `${inputId}-error`\n  const showMax = showMaxButton && !disabled\n  const hasBottomRow = secondaryValue != null || balance != null || showMax\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const { value: rawValue, selectionStart } = event.target\n    const sanitized = sanitizeDecimal(rawValue)\n\n    if (sanitized !== rawValue) {\n      // Rewrite the DOM value before bubbling up so the parent (controlled\n      // or not) only ever sees the clean value and no invalid char sticks.\n      const removed = rawValue.length - sanitized.length\n      event.target.value = sanitized\n      if (selectionStart != null) {\n        const caret = Math.max(0, selectionStart - removed)\n        event.target.setSelectionRange(caret, caret)\n      }\n    }\n\n    onChange?.(event)\n  }\n\n  const handleRootClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (!(event.target instanceof Element)) return\n    if (event.target.closest('button, input, label, [role=\"listbox\"]')) {\n      return\n    }\n    inputRef.current?.focus()\n  }\n\n  return (\n    // Clicking the padding around the field focuses it — a pointer convenience\n    // on top of the real control. Keyboard users tab straight to the input.\n    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions\n    <div\n      className={cn(styles.root, hasError && styles.error, className)}\n      onClick={handleRootClick}\n    >\n      {label != null ? (\n        <span className={styles.labelRow}>\n          <label className={styles.label} htmlFor={inputId}>\n            {label}\n          </label>\n          {labelTooltip != null ? (\n            <Tooltip content={labelTooltip}>\n              <IconInfo\n                className={styles.labelTooltipIcon}\n                aria-hidden='true'\n              />\n            </Tooltip>\n          ) : null}\n        </span>\n      ) : null}\n      <div className={styles.amountRow}>\n        <input\n          ref={inputRef}\n          id={inputId}\n          className={styles.input}\n          inputMode='decimal'\n          disabled={disabled}\n          aria-invalid={hasError || undefined}\n          aria-describedby={showErrorMessage ? errorId : undefined}\n          onChange={handleChange}\n          {...inputProps}\n        />\n        {tokenSelector != null ? (\n          <div className={styles.token}>{tokenSelector}</div>\n        ) : null}\n      </div>\n      {hasBottomRow ? (\n        <div className={styles.bottomRow}>\n          {secondaryValue != null ? (\n            <span className={styles.secondary}>{secondaryValue}</span>\n          ) : null}\n          <div className={styles.balanceGroup}>\n            {balance != null ? (\n              <span className={styles.balance}>{balance}</span>\n            ) : null}\n            {showMax ? (\n              maxTooltip != null ? (\n                <Tooltip\n                  content={maxTooltip}\n                  position='bottom-left'\n                  width={240}\n                >\n                  <MaxTag onClick={onMaxClick}>Max</MaxTag>\n                </Tooltip>\n              ) : (\n                <MaxTag onClick={onMaxClick}>Max</MaxTag>\n              )\n            ) : null}\n          </div>\n        </div>\n      ) : null}\n      {showErrorMessage ? (\n        <div id={errorId} className={styles.errorMessage}>\n          {errorMessage}\n        </div>\n      ) : null}\n    </div>\n  )\n}\n"],"names":["MaxTag","_ref","onClick","className","rest","_jsx","Tag","role","tabIndex","cn","styles","maxTag","onKeyDown","event","key","preventDefault","sanitizeDecimal","raw","normalized","replace","firstDot","indexOf","head","slice","tail","RichInput","_ref2","label","labelTooltip","secondaryValue","balance","tokenSelector","error","showMaxButton","onMaxClick","maxTooltip","onChange","id","disabled","inputProps","inputRef","useRef","fallbackId","useId","inputId","hasError","Boolean","errorMessage","showErrorMessage","errorId","showMax","hasBottomRow","handleChange","value","rawValue","selectionStart","target","sanitized","removed","length","caret","Math","max","setSelectionRange","handleRootClick","Element","closest","current","focus","_jsxs","root","children","labelRow","htmlFor","Tooltip","content","IconInfo","labelTooltipIcon","amountRow","ref","input","inputMode","undefined","token","bottomRow","secondary","balanceGroup","position","width"],"mappings":"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"}
+{"version":3,"file":"RichInput.mjs","sources":["../../../src/rich-input/RichInput.tsx"],"sourcesContent":["import {\n  useId,\n  useRef,\n  type ChangeEvent,\n  type InputHTMLAttributes,\n  type KeyboardEvent,\n  type MouseEvent,\n  type MouseEventHandler,\n  type ReactNode,\n} from 'react'\n\nimport cn from 'classnames'\nimport { IconInfo } from '../icons'\nimport { Tag, type TagProps } from '../tag'\nimport { Tooltip } from '../tooltip'\n\nimport styles from './RichInput.module.css'\n\nexport type RichInputDataTestId = {\n  root?: string\n  label?: string\n  input?: string\n  secondaryValue?: string\n  balance?: string\n  maxButton?: string\n  error?: string\n}\n\nexport type RichInputProps = InputHTMLAttributes<HTMLInputElement> & {\n  label?: ReactNode\n  labelTooltip?: ReactNode\n  secondaryValue?: ReactNode\n  balance?: ReactNode\n  tokenSelector?: ReactNode\n  error?: ReactNode | boolean\n  showMaxButton?: boolean\n  onMaxClick?: MouseEventHandler<HTMLSpanElement>\n  maxTooltip?: ReactNode\n  dataTestId?: RichInputDataTestId\n}\n\nconst MaxTag = ({ onClick, className, ...rest }: TagProps) => (\n  <Tag\n    role='button'\n    tabIndex={0}\n    className={cn(styles.maxTag, className)}\n    onClick={onClick}\n    onKeyDown={(event: KeyboardEvent<HTMLSpanElement>) => {\n      if (event.key !== 'Enter' && event.key !== ' ') return\n      event.preventDefault()\n      onClick?.(event as unknown as MouseEvent<HTMLSpanElement>)\n    }}\n    {...rest}\n  />\n)\n\n// Keep only digits and a single decimal point; comma is treated as the\n// decimal separator and normalized to a dot (en-US canonical form).\nconst sanitizeDecimal = (raw: string): string => {\n  const normalized = raw.replace(/,/g, '.').replace(/[^\\d.]/g, '')\n  const firstDot = normalized.indexOf('.')\n  if (firstDot === -1) return normalized\n  const head = normalized.slice(0, firstDot + 1)\n  const tail = normalized.slice(firstDot + 1).replace(/\\./g, '')\n  return head + tail\n}\n\nexport const RichInput = ({\n  label,\n  labelTooltip,\n  secondaryValue,\n  balance,\n  tokenSelector,\n  error,\n  showMaxButton = true,\n  onMaxClick,\n  maxTooltip,\n  onChange,\n  className,\n  id,\n  disabled,\n  dataTestId,\n  ...inputProps\n}: RichInputProps) => {\n  const inputRef = useRef<HTMLInputElement>(null)\n  const fallbackId = useId()\n  const inputId = id ?? fallbackId\n\n  const hasError = Boolean(error)\n  const errorMessage = typeof error === 'boolean' ? null : error\n  const showErrorMessage = errorMessage != null && errorMessage !== ''\n  const errorId = `${inputId}-error`\n  const showMax = showMaxButton && !disabled\n  const hasBottomRow = secondaryValue != null || balance != null || showMax\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const { value: rawValue, selectionStart } = event.target\n    const sanitized = sanitizeDecimal(rawValue)\n\n    if (sanitized !== rawValue) {\n      // Rewrite the DOM value before bubbling up so the parent (controlled\n      // or not) only ever sees the clean value and no invalid char sticks.\n      const removed = rawValue.length - sanitized.length\n      event.target.value = sanitized\n      if (selectionStart != null) {\n        const caret = Math.max(0, selectionStart - removed)\n        event.target.setSelectionRange(caret, caret)\n      }\n    }\n\n    onChange?.(event)\n  }\n\n  const handleRootClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (!(event.target instanceof Element)) return\n    if (event.target.closest('button, input, label, [role=\"listbox\"]')) {\n      return\n    }\n    inputRef.current?.focus()\n  }\n\n  return (\n    // Clicking the padding around the field focuses it — a pointer convenience\n    // on top of the real control. Keyboard users tab straight to the input.\n    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions\n    <div\n      className={cn(styles.root, hasError && styles.error, className)}\n      onClick={handleRootClick}\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          {labelTooltip != null ? (\n            <Tooltip content={labelTooltip}>\n              <IconInfo\n                className={styles.labelTooltipIcon}\n                aria-hidden='true'\n              />\n            </Tooltip>\n          ) : null}\n        </span>\n      ) : null}\n      <div className={styles.amountRow}>\n        <input\n          ref={inputRef}\n          id={inputId}\n          className={styles.input}\n          inputMode='decimal'\n          disabled={disabled}\n          aria-invalid={hasError || undefined}\n          aria-describedby={showErrorMessage ? errorId : undefined}\n          onChange={handleChange}\n          data-testid={dataTestId?.input}\n          {...inputProps}\n        />\n        {tokenSelector != null ? (\n          <div className={styles.token}>{tokenSelector}</div>\n        ) : null}\n      </div>\n      {hasBottomRow ? (\n        <div className={styles.bottomRow}>\n          {secondaryValue != null ? (\n            <span\n              className={styles.secondary}\n              data-testid={dataTestId?.secondaryValue}\n            >\n              {secondaryValue}\n            </span>\n          ) : null}\n          <div className={styles.balanceGroup}>\n            {balance != null ? (\n              <span\n                className={styles.balance}\n                data-testid={dataTestId?.balance}\n              >\n                {balance}\n              </span>\n            ) : null}\n            {showMax ? (\n              maxTooltip != null ? (\n                <Tooltip\n                  content={maxTooltip}\n                  position='bottom-left'\n                  width={240}\n                >\n                  <MaxTag\n                    onClick={onMaxClick}\n                    data-testid={dataTestId?.maxButton}\n                  >\n                    Max\n                  </MaxTag>\n                </Tooltip>\n              ) : (\n                <MaxTag\n                  onClick={onMaxClick}\n                  data-testid={dataTestId?.maxButton}\n                >\n                  Max\n                </MaxTag>\n              )\n            ) : null}\n          </div>\n        </div>\n      ) : null}\n      {showErrorMessage ? (\n        <div\n          id={errorId}\n          className={styles.errorMessage}\n          data-testid={dataTestId?.error}\n        >\n          {errorMessage}\n        </div>\n      ) : null}\n    </div>\n  )\n}\n"],"names":["MaxTag","_ref","onClick","className","rest","_jsx","Tag","role","tabIndex","cn","styles","maxTag","onKeyDown","event","key","preventDefault","sanitizeDecimal","raw","normalized","replace","firstDot","indexOf","head","slice","tail","RichInput","_ref2","label","labelTooltip","secondaryValue","balance","tokenSelector","error","showMaxButton","onMaxClick","maxTooltip","onChange","id","disabled","dataTestId","inputProps","inputRef","useRef","fallbackId","useId","inputId","hasError","Boolean","errorMessage","showErrorMessage","errorId","showMax","hasBottomRow","handleChange","value","rawValue","selectionStart","target","sanitized","removed","length","caret","Math","max","setSelectionRange","handleRootClick","Element","closest","current","focus","_jsxs","root","children","labelRow","htmlFor","Tooltip","content","IconInfo","labelTooltipIcon","amountRow","ref","input","inputMode","undefined","token","bottomRow","secondary","balanceGroup","position","width","maxButton"],"mappings":"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"}

package/dist/esm/section-title/SectionTitle.mjs

@@ -11,10 +11,12 @@ const SectionTitle = _ref => {
     tooltip,
     action,
     className,
+    dataTestId,
     ...rest
   } = _ref;
   return /*#__PURE__*/jsxs("div", {
     className: cn(styles.root, className),
+    "data-testid": dataTestId?.root,
     ...rest,
     children: [/*#__PURE__*/jsxs("div", {
       className: styles.left,
@@ -22,6 +24,7 @@ const SectionTitle = _ref => {
         className: styles.titleRow,
         children: [/*#__PURE__*/jsx("p", {
           className: styles.title,
+          "data-testid": dataTestId?.title,
           children: title
         }), tooltip != null ? /*#__PURE__*/jsx(Tooltip, {
           content: tooltip,
@@ -32,10 +35,12 @@ const SectionTitle = _ref => {
         }) : null]
       }), subtitle != null ? /*#__PURE__*/jsx("p", {
         className: styles.subtitle,
+        "data-testid": dataTestId?.subtitle,
         children: subtitle
       }) : null]
     }), action != null ? /*#__PURE__*/jsx("div", {
       className: styles.action,
+      "data-testid": dataTestId?.action,
       children: action
     }) : null]
   });

package/dist/esm/section-title/SectionTitle.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SectionTitle.mjs","sources":["../../../src/section-title/SectionTitle.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react'\n\nimport cn from 'classnames'\n\nimport { IconInfo } from '../icons'\nimport { Tooltip } from '../tooltip'\nimport styles from './SectionTitle.module.css'\n\nexport type SectionTitleProps = HTMLAttributes<HTMLDivElement> & {\n  title: ReactNode\n  subtitle?: ReactNode\n  /** Renders an info glyph next to the title; hovering it shows this content. */\n  tooltip?: ReactNode\n  /** Rendered on the right, typically a `Button`. */\n  action?: ReactNode\n}\n\nexport const SectionTitle = ({\n  title,\n  subtitle,\n  tooltip,\n  action,\n  className,\n  ...rest\n}: SectionTitleProps) => (\n  <div className={cn(styles.root, className)} {...rest}>\n    <div className={styles.left}>\n      <div className={styles.titleRow}>\n        <p className={styles.title}>{title}</p>\n        {tooltip != null ? (\n          <Tooltip content={tooltip}>\n            <IconInfo className={styles.icon} aria-hidden='true' />\n          </Tooltip>\n        ) : null}\n      </div>\n      {subtitle != null ? <p className={styles.subtitle}>{subtitle}</p> : null}\n    </div>\n    {action != null ? <div className={styles.action}>{action}</div> : null}\n  </div>\n)\n"],"names":["SectionTitle","_ref","title","subtitle","tooltip","action","className","rest","_jsxs","cn","styles","root","children","left","titleRow","_jsx","Tooltip","content","IconInfo","icon"],"mappings":";;;;;;AAiBO,MAAMA,YAAY,GAAGC,IAAA,IAAA;EAAA,IAAC;IAC3BC,KAAK;IACLC,QAAQ;IACRC,OAAO;IACPC,MAAM;IACNC,SAAS;IACT,GAAGC,IAAAA;AACc,GAAC,GAAAN,IAAA,CAAA;AAAA,EAAA,oBAClBO,IAAA,CAAA,KAAA,EAAA;IAAKF,SAAS,EAAEG,EAAE,CAACC,MAAM,CAACC,IAAI,EAAEL,SAAS,CAAE;AAAA,IAAA,GAAKC,IAAI;AAAAK,IAAAA,QAAA,gBAClDJ,IAAA,CAAA,KAAA,EAAA;MAAKF,SAAS,EAAEI,MAAM,CAACG,IAAK;AAAAD,MAAAA,QAAA,gBAC1BJ,IAAA,CAAA,KAAA,EAAA;QAAKF,SAAS,EAAEI,MAAM,CAACI,QAAS;AAAAF,QAAAA,QAAA,gBAC9BG,GAAA,CAAA,GAAA,EAAA;UAAGT,SAAS,EAAEI,MAAM,CAACR,KAAM;AAAAU,UAAAA,QAAA,EAAEV,KAAAA;SAAS,CAAC,EACtCE,OAAO,IAAI,IAAI,gBACdW,GAAA,CAACC,OAAO,EAAA;AAACC,UAAAA,OAAO,EAAEb,OAAQ;UAAAQ,QAAA,eACxBG,GAAA,CAACG,QAAQ,EAAA;YAACZ,SAAS,EAAEI,MAAM,CAACS,IAAK;YAAC,aAAY,EAAA,MAAA;WAAQ,CAAA;SAC/C,CAAC,GACR,IAAI,CAAA;AAAA,OACL,CAAC,EACLhB,QAAQ,IAAI,IAAI,gBAAGY,GAAA,CAAA,GAAA,EAAA;QAAGT,SAAS,EAAEI,MAAM,CAACP,QAAS;AAAAS,QAAAA,QAAA,EAAET,QAAAA;OAAY,CAAC,GAAG,IAAI,CAAA;AAAA,KACrE,CAAC,EACLE,MAAM,IAAI,IAAI,gBAAGU,GAAA,CAAA,KAAA,EAAA;MAAKT,SAAS,EAAEI,MAAM,CAACL,MAAO;AAAAO,MAAAA,QAAA,EAAEP,MAAAA;KAAY,CAAC,GAAG,IAAI,CAAA;AAAA,GACnE,CAAC,CAAA;AAAA;;;;"}
+{"version":3,"file":"SectionTitle.mjs","sources":["../../../src/section-title/SectionTitle.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react'\n\nimport cn from 'classnames'\n\nimport { IconInfo } from '../icons'\nimport { Tooltip } from '../tooltip'\nimport styles from './SectionTitle.module.css'\n\nexport type SectionTitleDataTestId = {\n  root?: string\n  title?: string\n  subtitle?: string\n  action?: string\n}\n\nexport type SectionTitleProps = HTMLAttributes<HTMLDivElement> & {\n  title: ReactNode\n  subtitle?: ReactNode\n  /** Renders an info glyph next to the title; hovering it shows this content. */\n  tooltip?: ReactNode\n  /** Rendered on the right, typically a `Button`. */\n  action?: ReactNode\n  dataTestId?: SectionTitleDataTestId\n}\n\nexport const SectionTitle = ({\n  title,\n  subtitle,\n  tooltip,\n  action,\n  className,\n  dataTestId,\n  ...rest\n}: SectionTitleProps) => (\n  <div\n    className={cn(styles.root, className)}\n    data-testid={dataTestId?.root}\n    {...rest}\n  >\n    <div className={styles.left}>\n      <div className={styles.titleRow}>\n        <p className={styles.title} data-testid={dataTestId?.title}>\n          {title}\n        </p>\n        {tooltip != null ? (\n          <Tooltip content={tooltip}>\n            <IconInfo className={styles.icon} aria-hidden='true' />\n          </Tooltip>\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    {action != null ? (\n      <div className={styles.action} data-testid={dataTestId?.action}>\n        {action}\n      </div>\n    ) : null}\n  </div>\n)\n"],"names":["SectionTitle","_ref","title","subtitle","tooltip","action","className","dataTestId","rest","_jsxs","cn","styles","root","children","left","titleRow","_jsx","Tooltip","content","IconInfo","icon"],"mappings":";;;;;;AAyBO,MAAMA,YAAY,GAAGC,IAAA,IAAA;EAAA,IAAC;IAC3BC,KAAK;IACLC,QAAQ;IACRC,OAAO;IACPC,MAAM;IACNC,SAAS;IACTC,UAAU;IACV,GAAGC,IAAAA;AACc,GAAC,GAAAP,IAAA,CAAA;AAAA,EAAA,oBAClBQ,IAAA,CAAA,KAAA,EAAA;IACEH,SAAS,EAAEI,EAAE,CAACC,MAAM,CAACC,IAAI,EAAEN,SAAS,CAAE;IACtC,aAAaC,EAAAA,UAAU,EAAEK,IAAK;AAAA,IAAA,GAC1BJ,IAAI;AAAAK,IAAAA,QAAA,gBAERJ,IAAA,CAAA,KAAA,EAAA;MAAKH,SAAS,EAAEK,MAAM,CAACG,IAAK;AAAAD,MAAAA,QAAA,gBAC1BJ,IAAA,CAAA,KAAA,EAAA;QAAKH,SAAS,EAAEK,MAAM,CAACI,QAAS;AAAAF,QAAAA,QAAA,gBAC9BG,GAAA,CAAA,GAAA,EAAA;UAAGV,SAAS,EAAEK,MAAM,CAACT,KAAM;UAAC,aAAaK,EAAAA,UAAU,EAAEL,KAAM;AAAAW,UAAAA,QAAA,EACxDX,KAAAA;SACA,CAAC,EACHE,OAAO,IAAI,IAAI,gBACdY,GAAA,CAACC,OAAO,EAAA;AAACC,UAAAA,OAAO,EAAEd,OAAQ;UAAAS,QAAA,eACxBG,GAAA,CAACG,QAAQ,EAAA;YAACb,SAAS,EAAEK,MAAM,CAACS,IAAK;YAAC,aAAY,EAAA,MAAA;WAAQ,CAAA;SAC/C,CAAC,GACR,IAAI,CAAA;AAAA,OACL,CAAC,EACLjB,QAAQ,IAAI,IAAI,gBACfa,GAAA,CAAA,GAAA,EAAA;QAAGV,SAAS,EAAEK,MAAM,CAACR,QAAS;QAAC,aAAaI,EAAAA,UAAU,EAAEJ,QAAS;AAAAU,QAAAA,QAAA,EAC9DV,QAAAA;OACA,CAAC,GACF,IAAI,CAAA;AAAA,KACL,CAAC,EACLE,MAAM,IAAI,IAAI,gBACbW,GAAA,CAAA,KAAA,EAAA;MAAKV,SAAS,EAAEK,MAAM,CAACN,MAAO;MAAC,aAAaE,EAAAA,UAAU,EAAEF,MAAO;AAAAQ,MAAAA,QAAA,EAC5DR,MAAAA;KACE,CAAC,GACJ,IAAI,CAAA;AAAA,GACL,CAAC,CAAA;AAAA;;;;"}

package/dist/esm/segmented-control/Segment.mjs

@@ -9,6 +9,7 @@ const Segment = /*#__PURE__*/forwardRef((_ref, ref) => {
     className,
     children,
     type = 'button',
+    dataTestId,
     ...rest
   } = _ref;
   return /*#__PURE__*/jsx("button", {
@@ -17,9 +18,11 @@ const Segment = /*#__PURE__*/forwardRef((_ref, ref) => {
     role: "tab",
     "aria-selected": active,
     className: cn(styles.segment, active && styles.active, className),
+    "data-testid": dataTestId?.root,
     ...rest,
     children: /*#__PURE__*/jsx("span", {
       className: styles.content,
+      "data-testid": dataTestId?.content,
       children: children
     })
   });

package/dist/esm/segmented-control/Segment.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Segment.mjs","sources":["../../../src/segmented-control/Segment.tsx"],"sourcesContent":["import { forwardRef, type ButtonHTMLAttributes } from 'react'\n\nimport cn from 'classnames'\n\nimport styles from './Segment.module.css'\n\nexport type SegmentProps = ButtonHTMLAttributes<HTMLButtonElement> & {\n  active?: boolean\n}\n\nexport const Segment = forwardRef<HTMLButtonElement, SegmentProps>(\n  ({ active = false, className, children, type = 'button', ...rest }, ref) => (\n    <button\n      ref={ref}\n      type={type}\n      role='tab'\n      aria-selected={active}\n      className={cn(styles.segment, active && styles.active, className)}\n      {...rest}\n    >\n      <span className={styles.content}>{children}</span>\n    </button>\n  ),\n)\n\nSegment.displayName = 'Segment'\n"],"names":["Segment","forwardRef","_ref","ref","active","className","children","type","rest","_jsx","role","cn","styles","segment","content","displayName"],"mappings":";;;;;AAUO,MAAMA,OAAO,gBAAGC,UAAU,CAC/B,CAAAC,IAAA,EAAoEC,GAAG,KAAA;EAAA,IAAtE;AAAEC,IAAAA,MAAM,GAAG,KAAK;IAAEC,SAAS;IAAEC,QAAQ;AAAEC,IAAAA,IAAI,GAAG,QAAQ;IAAE,GAAGC,IAAAA;AAAK,GAAC,GAAAN,IAAA,CAAA;AAAA,EAAA,oBAChEO,GAAA,CAAA,QAAA,EAAA;AACEN,IAAAA,GAAG,EAAEA,GAAI;AACTI,IAAAA,IAAI,EAAEA,IAAK;AACXG,IAAAA,IAAI,EAAC,KAAK;AACV,IAAA,eAAA,EAAeN,MAAO;AACtBC,IAAAA,SAAS,EAAEM,EAAE,CAACC,MAAM,CAACC,OAAO,EAAET,MAAM,IAAIQ,MAAM,CAACR,MAAM,EAAEC,SAAS,CAAE;AAAA,IAAA,GAC9DG,IAAI;AAAAF,IAAAA,QAAA,eAERG,GAAA,CAAA,MAAA,EAAA;MAAMJ,SAAS,EAAEO,MAAM,CAACE,OAAQ;AAAAR,MAAAA,QAAA,EAAEA,QAAAA;KAAe,CAAA;AAAC,GAC5C,CAAC,CAAA;AAAA,CAEb,EAAC;AAEDN,OAAO,CAACe,WAAW,GAAG,SAAS;;;;"}
+{"version":3,"file":"Segment.mjs","sources":["../../../src/segmented-control/Segment.tsx"],"sourcesContent":["import { forwardRef, type ButtonHTMLAttributes } from 'react'\n\nimport cn from 'classnames'\n\nimport styles from './Segment.module.css'\n\nexport type SegmentDataTestId = {\n  root?: string\n  content?: string\n}\n\nexport type SegmentProps = ButtonHTMLAttributes<HTMLButtonElement> & {\n  active?: boolean\n  dataTestId?: SegmentDataTestId\n}\n\nexport const Segment = forwardRef<HTMLButtonElement, SegmentProps>(\n  (\n    {\n      active = false,\n      className,\n      children,\n      type = 'button',\n      dataTestId,\n      ...rest\n    },\n    ref,\n  ) => (\n    <button\n      ref={ref}\n      type={type}\n      role='tab'\n      aria-selected={active}\n      className={cn(styles.segment, active && styles.active, className)}\n      data-testid={dataTestId?.root}\n      {...rest}\n    >\n      <span className={styles.content} data-testid={dataTestId?.content}>\n        {children}\n      </span>\n    </button>\n  ),\n)\n\nSegment.displayName = 'Segment'\n"],"names":["Segment","forwardRef","_ref","ref","active","className","children","type","dataTestId","rest","_jsx","role","cn","styles","segment","root","content","displayName"],"mappings":";;;;;AAgBO,MAAMA,OAAO,gBAAGC,UAAU,CAC/B,CAAAC,IAAA,EASEC,GAAG,KAAA;EAAA,IARH;AACEC,IAAAA,MAAM,GAAG,KAAK;IACdC,SAAS;IACTC,QAAQ;AACRC,IAAAA,IAAI,GAAG,QAAQ;IACfC,UAAU;IACV,GAAGC,IAAAA;AACL,GAAC,GAAAP,IAAA,CAAA;AAAA,EAAA,oBAGDQ,GAAA,CAAA,QAAA,EAAA;AACEP,IAAAA,GAAG,EAAEA,GAAI;AACTI,IAAAA,IAAI,EAAEA,IAAK;AACXI,IAAAA,IAAI,EAAC,KAAK;AACV,IAAA,eAAA,EAAeP,MAAO;AACtBC,IAAAA,SAAS,EAAEO,EAAE,CAACC,MAAM,CAACC,OAAO,EAAEV,MAAM,IAAIS,MAAM,CAACT,MAAM,EAAEC,SAAS,CAAE;IAClE,aAAaG,EAAAA,UAAU,EAAEO,IAAK;AAAA,IAAA,GAC1BN,IAAI;AAAAH,IAAAA,QAAA,eAERI,GAAA,CAAA,MAAA,EAAA;MAAML,SAAS,EAAEQ,MAAM,CAACG,OAAQ;MAAC,aAAaR,EAAAA,UAAU,EAAEQ,OAAQ;AAAAV,MAAAA,QAAA,EAC/DA,QAAAA;KACG,CAAA;AAAC,GACD,CAAC,CAAA;AAAA,CAEb,EAAC;AAEDN,OAAO,CAACiB,WAAW,GAAG,SAAS;;;;"}

package/dist/esm/segmented-control/SegmentCard.mjs

@@ -14,6 +14,7 @@ const SegmentCard = /*#__PURE__*/forwardRef((_ref, ref) => {
     description,
     className,
     type = 'button',
+    dataTestId,
     ...rest
   } = _ref;
   return /*#__PURE__*/jsx("button", {
@@ -23,20 +24,26 @@ const SegmentCard = /*#__PURE__*/forwardRef((_ref, ref) => {
     "aria-selected": active,
     disabled: disabled,
     className: cn(styles.card, active && styles.active, className),
+    "data-testid": dataTestId?.root,
     ...rest,
     children: /*#__PURE__*/jsxs("span", {
       className: styles.content,
       children: [icon != null ? /*#__PURE__*/jsx("span", {
         className: styles.icon,
         "aria-hidden": "true",
+        "data-testid": dataTestId?.icon,
         children: icon
       }) : null, /*#__PURE__*/jsxs("span", {
         className: styles.title,
+        "data-testid": dataTestId?.title,
         children: [/*#__PURE__*/jsx("span", {
           className: styles.titleText,
           children: title
         }), tag != null ? /*#__PURE__*/jsx(Tag, {
           variant: "neutral",
+          dataTestId: {
+            root: dataTestId?.tag
+          },
           style: disabled ? {
             '--local-text': 'var(--lido-app-ui-color-text-disabled)'
           } : undefined,
@@ -44,6 +51,7 @@ const SegmentCard = /*#__PURE__*/forwardRef((_ref, ref) => {
         }) : null]
       }), description != null ? /*#__PURE__*/jsx("span", {
         className: styles.description,
+        "data-testid": dataTestId?.description,
         children: description
       }) : null]
     })

package/dist/esm/segmented-control/SegmentCard.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentCard.mjs","sources":["../../../src/segmented-control/SegmentCard.tsx"],"sourcesContent":["import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react'\n\nimport cn from 'classnames'\n\nimport { Tag } from '../tag'\nimport styles from './SegmentCard.module.css'\n\nexport type SegmentCardProps = Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  'title'\n> & {\n  active?: boolean\n  icon?: ReactNode\n  title: ReactNode\n  tag?: ReactNode\n  description?: ReactNode\n}\n\nexport const SegmentCard = forwardRef<HTMLButtonElement, SegmentCardProps>(\n  (\n    {\n      active = false,\n      disabled = false,\n      icon,\n      title,\n      tag,\n      description,\n      className,\n      type = 'button',\n      ...rest\n    },\n    ref,\n  ) => (\n    <button\n      ref={ref}\n      type={type}\n      role='tab'\n      aria-selected={active}\n      disabled={disabled}\n      className={cn(styles.card, active && styles.active, className)}\n      {...rest}\n    >\n      <span className={styles.content}>\n        {icon != null ? (\n          <span className={styles.icon} aria-hidden='true'>\n            {icon}\n          </span>\n        ) : null}\n        <span className={styles.title}>\n          <span className={styles.titleText}>{title}</span>\n          {tag != null ? (\n            <Tag\n              variant='neutral'\n              style={\n                disabled\n                  ? ({\n                      '--local-text': 'var(--lido-app-ui-color-text-disabled)',\n                    } as React.CSSProperties)\n                  : undefined\n              }\n            >\n              {tag}\n            </Tag>\n          ) : null}\n        </span>\n        {description != null ? (\n          <span className={styles.description}>{description}</span>\n        ) : null}\n      </span>\n    </button>\n  ),\n)\n\nSegmentCard.displayName = 'SegmentCard'\n"],"names":["SegmentCard","forwardRef","_ref","ref","active","disabled","icon","title","tag","description","className","type","rest","_jsx","role","cn","styles","card","children","_jsxs","content","titleText","Tag","variant","style","undefined","displayName"],"mappings":";;;;;;AAkBO,MAAMA,WAAW,gBAAGC,UAAU,CACnC,CAAAC,IAAA,EAYEC,GAAG,KAAA;EAAA,IAXH;AACEC,IAAAA,MAAM,GAAG,KAAK;AACdC,IAAAA,QAAQ,GAAG,KAAK;IAChBC,IAAI;IACJC,KAAK;IACLC,GAAG;IACHC,WAAW;IACXC,SAAS;AACTC,IAAAA,IAAI,GAAG,QAAQ;IACf,GAAGC,IAAAA;AACL,GAAC,GAAAV,IAAA,CAAA;AAAA,EAAA,oBAGDW,GAAA,CAAA,QAAA,EAAA;AACEV,IAAAA,GAAG,EAAEA,GAAI;AACTQ,IAAAA,IAAI,EAAEA,IAAK;AACXG,IAAAA,IAAI,EAAC,KAAK;AACV,IAAA,eAAA,EAAeV,MAAO;AACtBC,IAAAA,QAAQ,EAAEA,QAAS;AACnBK,IAAAA,SAAS,EAAEK,EAAE,CAACC,MAAM,CAACC,IAAI,EAAEb,MAAM,IAAIY,MAAM,CAACZ,MAAM,EAAEM,SAAS,CAAE;AAAA,IAAA,GAC3DE,IAAI;AAAAM,IAAAA,QAAA,eAERC,IAAA,CAAA,MAAA,EAAA;MAAMT,SAAS,EAAEM,MAAM,CAACI,OAAQ;AAAAF,MAAAA,QAAA,EAC7BZ,CAAAA,IAAI,IAAI,IAAI,gBACXO,GAAA,CAAA,MAAA,EAAA;QAAMH,SAAS,EAAEM,MAAM,CAACV,IAAK;AAAC,QAAA,aAAA,EAAY,MAAM;AAAAY,QAAAA,QAAA,EAC7CZ,IAAAA;AAAI,OACD,CAAC,GACL,IAAI,eACRa,IAAA,CAAA,MAAA,EAAA;QAAMT,SAAS,EAAEM,MAAM,CAACT,KAAM;AAAAW,QAAAA,QAAA,gBAC5BL,GAAA,CAAA,MAAA,EAAA;UAAMH,SAAS,EAAEM,MAAM,CAACK,SAAU;AAAAH,UAAAA,QAAA,EAAEX,KAAAA;SAAY,CAAC,EAChDC,GAAG,IAAI,IAAI,gBACVK,GAAA,CAACS,GAAG,EAAA;AACFC,UAAAA,OAAO,EAAC,SAAS;UACjBC,KAAK,EACHnB,QAAQ,GACH;AACC,YAAA,cAAc,EAAE,wCAAA;AAClB,WAAC,GACDoB,SACL;AAAAP,UAAAA,QAAA,EAEAV,GAAAA;SACE,CAAC,GACJ,IAAI,CAAA;AAAA,OACJ,CAAC,EACNC,WAAW,IAAI,IAAI,gBAClBI,GAAA,CAAA,MAAA,EAAA;QAAMH,SAAS,EAAEM,MAAM,CAACP,WAAY;AAAAS,QAAAA,QAAA,EAAET,WAAAA;OAAkB,CAAC,GACvD,IAAI,CAAA;KACJ,CAAA;AAAC,GACD,CAAC,CAAA;AAAA,CAEb,EAAC;AAEDT,WAAW,CAAC0B,WAAW,GAAG,aAAa;;;;"}
+{"version":3,"file":"SegmentCard.mjs","sources":["../../../src/segmented-control/SegmentCard.tsx"],"sourcesContent":["import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react'\n\nimport cn from 'classnames'\n\nimport { Tag } from '../tag'\nimport styles from './SegmentCard.module.css'\n\nexport type SegmentCardDataTestId = {\n  root?: string\n  icon?: string\n  title?: string\n  tag?: string\n  description?: string\n}\n\nexport type SegmentCardProps = Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  'title'\n> & {\n  active?: boolean\n  icon?: ReactNode\n  title: ReactNode\n  tag?: ReactNode\n  description?: ReactNode\n  dataTestId?: SegmentCardDataTestId\n}\n\nexport const SegmentCard = forwardRef<HTMLButtonElement, SegmentCardProps>(\n  (\n    {\n      active = false,\n      disabled = false,\n      icon,\n      title,\n      tag,\n      description,\n      className,\n      type = 'button',\n      dataTestId,\n      ...rest\n    },\n    ref,\n  ) => (\n    <button\n      ref={ref}\n      type={type}\n      role='tab'\n      aria-selected={active}\n      disabled={disabled}\n      className={cn(styles.card, active && styles.active, className)}\n      data-testid={dataTestId?.root}\n      {...rest}\n    >\n      <span className={styles.content}>\n        {icon != null ? (\n          <span\n            className={styles.icon}\n            aria-hidden='true'\n            data-testid={dataTestId?.icon}\n          >\n            {icon}\n          </span>\n        ) : null}\n        <span className={styles.title} data-testid={dataTestId?.title}>\n          <span className={styles.titleText}>{title}</span>\n          {tag != null ? (\n            <Tag\n              variant='neutral'\n              dataTestId={{ root: dataTestId?.tag }}\n              style={\n                disabled\n                  ? ({\n                      '--local-text': 'var(--lido-app-ui-color-text-disabled)',\n                    } as React.CSSProperties)\n                  : undefined\n              }\n            >\n              {tag}\n            </Tag>\n          ) : null}\n        </span>\n        {description != null ? (\n          <span\n            className={styles.description}\n            data-testid={dataTestId?.description}\n          >\n            {description}\n          </span>\n        ) : null}\n      </span>\n    </button>\n  ),\n)\n\nSegmentCard.displayName = 'SegmentCard'\n"],"names":["SegmentCard","forwardRef","_ref","ref","active","disabled","icon","title","tag","description","className","type","dataTestId","rest","_jsx","role","cn","styles","card","root","children","_jsxs","content","titleText","Tag","variant","style","undefined","displayName"],"mappings":";;;;;;AA2BO,MAAMA,WAAW,gBAAGC,UAAU,CACnC,CAAAC,IAAA,EAaEC,GAAG,KAAA;EAAA,IAZH;AACEC,IAAAA,MAAM,GAAG,KAAK;AACdC,IAAAA,QAAQ,GAAG,KAAK;IAChBC,IAAI;IACJC,KAAK;IACLC,GAAG;IACHC,WAAW;IACXC,SAAS;AACTC,IAAAA,IAAI,GAAG,QAAQ;IACfC,UAAU;IACV,GAAGC,IAAAA;AACL,GAAC,GAAAX,IAAA,CAAA;AAAA,EAAA,oBAGDY,GAAA,CAAA,QAAA,EAAA;AACEX,IAAAA,GAAG,EAAEA,GAAI;AACTQ,IAAAA,IAAI,EAAEA,IAAK;AACXI,IAAAA,IAAI,EAAC,KAAK;AACV,IAAA,eAAA,EAAeX,MAAO;AACtBC,IAAAA,QAAQ,EAAEA,QAAS;AACnBK,IAAAA,SAAS,EAAEM,EAAE,CAACC,MAAM,CAACC,IAAI,EAAEd,MAAM,IAAIa,MAAM,CAACb,MAAM,EAAEM,SAAS,CAAE;IAC/D,aAAaE,EAAAA,UAAU,EAAEO,IAAK;AAAA,IAAA,GAC1BN,IAAI;AAAAO,IAAAA,QAAA,eAERC,IAAA,CAAA,MAAA,EAAA;MAAMX,SAAS,EAAEO,MAAM,CAACK,OAAQ;AAAAF,MAAAA,QAAA,EAC7Bd,CAAAA,IAAI,IAAI,IAAI,gBACXQ,GAAA,CAAA,MAAA,EAAA;QACEJ,SAAS,EAAEO,MAAM,CAACX,IAAK;AACvB,QAAA,aAAA,EAAY,MAAM;QAClB,aAAaM,EAAAA,UAAU,EAAEN,IAAK;AAAAc,QAAAA,QAAA,EAE7Bd,IAAAA;AAAI,OACD,CAAC,GACL,IAAI,eACRe,IAAA,CAAA,MAAA,EAAA;QAAMX,SAAS,EAAEO,MAAM,CAACV,KAAM;QAAC,aAAaK,EAAAA,UAAU,EAAEL,KAAM;AAAAa,QAAAA,QAAA,gBAC5DN,GAAA,CAAA,MAAA,EAAA;UAAMJ,SAAS,EAAEO,MAAM,CAACM,SAAU;AAAAH,UAAAA,QAAA,EAAEb,KAAAA;SAAY,CAAC,EAChDC,GAAG,IAAI,IAAI,gBACVM,GAAA,CAACU,GAAG,EAAA;AACFC,UAAAA,OAAO,EAAC,SAAS;AACjBb,UAAAA,UAAU,EAAE;YAAEO,IAAI,EAAEP,UAAU,EAAEJ,GAAAA;WAAM;UACtCkB,KAAK,EACHrB,QAAQ,GACH;AACC,YAAA,cAAc,EAAE,wCAAA;AAClB,WAAC,GACDsB,SACL;AAAAP,UAAAA,QAAA,EAEAZ,GAAAA;SACE,CAAC,GACJ,IAAI,CAAA;AAAA,OACJ,CAAC,EACNC,WAAW,IAAI,IAAI,gBAClBK,GAAA,CAAA,MAAA,EAAA;QACEJ,SAAS,EAAEO,MAAM,CAACR,WAAY;QAC9B,aAAaG,EAAAA,UAAU,EAAEH,WAAY;AAAAW,QAAAA,QAAA,EAEpCX,WAAAA;OACG,CAAC,GACL,IAAI,CAAA;KACJ,CAAA;AAAC,GACD,CAAC,CAAA;AAAA,CAEb,EAAC;AAEDT,WAAW,CAAC4B,WAAW,GAAG,aAAa;;;;"}

package/dist/esm/segmented-control/SegmentedControl.mjs

@@ -9,7 +9,9 @@ const SegmentedControl = _ref => {
     items,
     value,
     onChange,
-    className
+    className,
+    dataTestId,
+    ...rest
   } = _ref;
   const containerRef = useRef(null);
   const activeButtonRef = useRef(null);
@@ -48,6 +50,8 @@ const SegmentedControl = _ref => {
     ref: containerRef,
     role: "tablist",
     className: cn(styles.segmentedControl, className),
+    "data-testid": dataTestId?.root,
+    ...rest,
     children: [/*#__PURE__*/jsx("div", {
       ref: selectionRef,
       "aria-hidden": "true",
@@ -58,6 +62,7 @@ const SegmentedControl = _ref => {
         ref: active ? activeButtonRef : undefined,
         active: active,
         disabled: item.disabled,
+        dataTestId: item.dataTestId,
         onClick: () => {
           if (item.value !== value) onChange(item.value);
         },

package/dist/esm/segmented-control/SegmentedControl.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.mjs","sources":["../../../src/segmented-control/SegmentedControl.tsx"],"sourcesContent":["import { useLayoutEffect, useRef, useState, type ReactNode } from 'react'\n\nimport cn from 'classnames'\n\nimport { Segment } from './Segment'\nimport styles from './SegmentedControl.module.css'\n\nexport type SegmentItem = {\n  value: string\n  label: ReactNode\n  disabled?: boolean\n}\n\nexport type SegmentedControlProps = {\n  items: SegmentItem[]\n  value: string\n  onChange: (value: string) => void\n  className?: string\n}\n\nexport const SegmentedControl = ({\n  items,\n  value,\n  onChange,\n  className,\n}: SegmentedControlProps) => {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const activeButtonRef = useRef<HTMLButtonElement>(null)\n  const selectionRef = useRef<HTMLDivElement>(null)\n  // Skip the transition on the first measurement so the pill doesn't fly in from 0,0.\n  const [animated, setAnimated] = useState(false)\n\n  useLayoutEffect(() => {\n    const updateSelection = () => {\n      const button = activeButtonRef.current\n      const container = containerRef.current\n      const selection = selectionRef.current\n      if (!button || !container || !selection) return\n\n      const buttonRect = button.getBoundingClientRect()\n      const containerRect = container.getBoundingClientRect()\n      // The pill is absolutely positioned, so top/left 0 is the container's\n      // padding box (inside the border). getBoundingClientRect measures from\n      // the border box, so subtract the border to keep the pill from drifting\n      // down-right by the border width.\n      const style = getComputedStyle(container)\n      const borderLeft = parseFloat(style.borderLeftWidth) || 0\n      const borderTop = parseFloat(style.borderTopWidth) || 0\n      const x = buttonRect.left - containerRect.left - borderLeft\n      const y = buttonRect.top - containerRect.top - borderTop\n\n      selection.style.width = `${buttonRect.width}px`\n      selection.style.height = `${buttonRect.height}px`\n      selection.style.transform = `translate(${x}px, ${y}px)`\n    }\n\n    updateSelection()\n    setAnimated(true)\n\n    window.addEventListener('resize', updateSelection)\n    return () => {\n      window.removeEventListener('resize', updateSelection)\n    }\n  }, [value, items])\n\n  return (\n    <div\n      ref={containerRef}\n      role='tablist'\n      className={cn(styles.segmentedControl, className)}\n    >\n      <div\n        ref={selectionRef}\n        aria-hidden='true'\n        className={cn(styles.selection, animated && styles.animated)}\n      />\n      {items.map((item) => {\n        const active = item.value === value\n        return (\n          <Segment\n            key={item.value}\n            ref={active ? activeButtonRef : undefined}\n            active={active}\n            disabled={item.disabled}\n            onClick={() => {\n              if (item.value !== value) onChange(item.value)\n            }}\n          >\n            {item.label}\n          </Segment>\n        )\n      })}\n    </div>\n  )\n}\n"],"names":["SegmentedControl","_ref","items","value","onChange","className","containerRef","useRef","activeButtonRef","selectionRef","animated","setAnimated","useState","useLayoutEffect","updateSelection","button","current","container","selection","buttonRect","getBoundingClientRect","containerRect","style","getComputedStyle","borderLeft","parseFloat","borderLeftWidth","borderTop","borderTopWidth","x","left","y","top","width","height","transform","window","addEventListener","removeEventListener","_jsxs","ref","role","cn","styles","segmentedControl","children","_jsx","map","item","active","Segment","undefined","disabled","onClick","label"],"mappings":"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"}
+{"version":3,"file":"SegmentedControl.mjs","sources":["../../../src/segmented-control/SegmentedControl.tsx"],"sourcesContent":["import {\n  useLayoutEffect,\n  useRef,\n  useState,\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n} from 'react'\n\nimport cn from 'classnames'\n\nimport { Segment, type SegmentDataTestId } from './Segment'\nimport styles from './SegmentedControl.module.css'\n\nexport type SegmentedControlDataTestId = {\n  root?: string\n}\n\nexport type SegmentItem = {\n  value: string\n  label: ReactNode\n  disabled?: boolean\n  dataTestId?: SegmentDataTestId\n}\n\nexport type SegmentedControlProps = Omit<\n  ComponentPropsWithoutRef<'div'>,\n  'onChange'\n> & {\n  items: SegmentItem[]\n  value: string\n  onChange: (value: string) => void\n  dataTestId?: SegmentedControlDataTestId\n}\n\nexport const SegmentedControl = ({\n  items,\n  value,\n  onChange,\n  className,\n  dataTestId,\n  ...rest\n}: SegmentedControlProps) => {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const activeButtonRef = useRef<HTMLButtonElement>(null)\n  const selectionRef = useRef<HTMLDivElement>(null)\n  // Skip the transition on the first measurement so the pill doesn't fly in from 0,0.\n  const [animated, setAnimated] = useState(false)\n\n  useLayoutEffect(() => {\n    const updateSelection = () => {\n      const button = activeButtonRef.current\n      const container = containerRef.current\n      const selection = selectionRef.current\n      if (!button || !container || !selection) return\n\n      const buttonRect = button.getBoundingClientRect()\n      const containerRect = container.getBoundingClientRect()\n      // The pill is absolutely positioned, so top/left 0 is the container's\n      // padding box (inside the border). getBoundingClientRect measures from\n      // the border box, so subtract the border to keep the pill from drifting\n      // down-right by the border width.\n      const style = getComputedStyle(container)\n      const borderLeft = parseFloat(style.borderLeftWidth) || 0\n      const borderTop = parseFloat(style.borderTopWidth) || 0\n      const x = buttonRect.left - containerRect.left - borderLeft\n      const y = buttonRect.top - containerRect.top - borderTop\n\n      selection.style.width = `${buttonRect.width}px`\n      selection.style.height = `${buttonRect.height}px`\n      selection.style.transform = `translate(${x}px, ${y}px)`\n    }\n\n    updateSelection()\n    setAnimated(true)\n\n    window.addEventListener('resize', updateSelection)\n    return () => {\n      window.removeEventListener('resize', updateSelection)\n    }\n  }, [value, items])\n\n  return (\n    <div\n      ref={containerRef}\n      role='tablist'\n      className={cn(styles.segmentedControl, className)}\n      data-testid={dataTestId?.root}\n      {...rest}\n    >\n      <div\n        ref={selectionRef}\n        aria-hidden='true'\n        className={cn(styles.selection, animated && styles.animated)}\n      />\n      {items.map((item) => {\n        const active = item.value === value\n        return (\n          <Segment\n            key={item.value}\n            ref={active ? activeButtonRef : undefined}\n            active={active}\n            disabled={item.disabled}\n            dataTestId={item.dataTestId}\n            onClick={() => {\n              if (item.value !== value) onChange(item.value)\n            }}\n          >\n            {item.label}\n          </Segment>\n        )\n      })}\n    </div>\n  )\n}\n"],"names":["SegmentedControl","_ref","items","value","onChange","className","dataTestId","rest","containerRef","useRef","activeButtonRef","selectionRef","animated","setAnimated","useState","useLayoutEffect","updateSelection","button","current","container","selection","buttonRect","getBoundingClientRect","containerRect","style","getComputedStyle","borderLeft","parseFloat","borderLeftWidth","borderTop","borderTopWidth","x","left","y","top","width","height","transform","window","addEventListener","removeEventListener","_jsxs","ref","role","cn","styles","segmentedControl","root","children","_jsx","map","item","active","Segment","undefined","disabled","onClick","label"],"mappings":"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"}

package/dist/esm/segmented-control/SegmentedControlCard.mjs

@@ -9,7 +9,9 @@ const SegmentedControlCard = _ref => {
     items,
     value,
     onChange,
-    className
+    className,
+    dataTestId,
+    ...rest
   } = _ref;
   const containerRef = useRef(null);
   const activeButtonRef = useRef(null);
@@ -44,6 +46,8 @@ const SegmentedControlCard = _ref => {
     ref: containerRef,
     role: "tablist",
     className: cn(styles.segmentedControlCard, className),
+    "data-testid": dataTestId?.root,
+    ...rest,
     children: [/*#__PURE__*/jsx("div", {
       ref: selectionRef,
       "aria-hidden": "true",
@@ -58,6 +62,7 @@ const SegmentedControlCard = _ref => {
         title: item.title,
         tag: item.tag,
         description: item.description,
+        dataTestId: item.dataTestId,
         onClick: () => {
           if (item.value !== value) onChange(item.value);
         }