@transferwise/components 46.97.4 → 46.98.0

package/build/i18n/zh-HK.json.js.map

@@ -1 +1 @@
-{"version":3,"file":"zh-HK.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"zh-HK.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/i18n/zh-HK.json.mjs

@@ -21,8 +21,11 @@ var zhHK = {
 	"neptune.Label.optional": "（可選）",
 	"neptune.Link.opensInNewTab": "（在新分頁中開啟）",
 	"neptune.MoneyInput.Select.placeholder": "選擇一個選項…",
+	"neptune.MoneyInput.Select.searchPlaceholder": "輸入貨幣或國家/地區",
 	"neptune.MoneyInput.Select.selectCurrencyLabel": "選擇貨幣",
 	"neptune.PhoneNumberInput.SelectInput.placeholder": "選擇其中一項…",
+	"neptune.PhoneNumberInput.countryCodeLabel": "國家/地區代碼",
+	"neptune.PhoneNumberInput.phoneNumberLabel": "電話號碼",
 	"neptune.Select.searchPlaceholder": "搜尋…",
 	"neptune.SelectInput.noResultsFound": "找不到任何結果",
 	"neptune.SelectOption.action.label": "選擇",

package/build/i18n/zh-HK.json.mjs.map

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

package/build/iconButton/IconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.js","sources":["../../src/iconButton/IconButton.tsx"],"sourcesContent":["import { AnchorHTMLAttributes, ButtonHTMLAttributes, forwardRef, HTMLAttributes } from 'react';\nimport { PrimitiveAnchor, PrimitiveButton } from '../primitives';\nimport Circle from '../common/circle';\nimport { clsx } from 'clsx';\n\nexport type Props = {\n  size?: 16 | 24 | 32 | 40 | 48 | 56 | 72;\n  priority?: 'primary' | 'secondary' | 'tertiary' | 'minimal';\n  type?: 'default' | 'negative';\n  'data-testid'?: string;\n} & Pick<AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'target' | 'onClick'> &\n  Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'disabled'> &\n  Pick<\n    HTMLAttributes<HTMLDivElement>,\n    'className' | 'role' | 'children' | 'aria-label' | 'tabIndex'\n  >;\n\nconst IconButton = forwardRef(function IconButton(\n  {\n    size = 48,\n    href = '#',\n    children,\n    className,\n    priority = 'primary',\n    type = 'default',\n    ...props\n  }: Props,\n  ref,\n) {\n  const isLink = href !== '#';\n  return (\n    // @ts-expect-error it's either link or `button` element so it has `onClick` / `href`\n    <Circle\n      ref={ref}\n      as={isLink ? PrimitiveAnchor : PrimitiveButton}\n      size={size}\n      fixedSize\n      className={clsx(\n        'np-icon-button',\n        `np-icon-button-${priority}-${type}`,\n        {\n          disabled: props.disabled,\n        },\n        className,\n      )}\n      {...(isLink ? { href } : {})}\n      {...props}\n    >\n      {children}\n    </Circle>\n  );\n});\n\nexport default IconButton;\n"],"names":["IconButton","forwardRef","size","href","children","className","priority","type","props","ref","isLink","_jsx","Circle","as","PrimitiveAnchor","PrimitiveButton","fixedSize","clsx","disabled"],"mappings":";;;;;;;;;;;AAiBA,MAAMA,UAAU,gBAAGC,gBAAU,CAAC,SAASD,UAAUA,CAC/C;AACEE,EAAAA,IAAI,GAAG,EAAE;AACTC,EAAAA,IAAI,GAAG,GAAG;EACVC,QAAQ;EACRC,SAAS;AACTC,EAAAA,QAAQ,GAAG,SAAS;AACpBC,EAAAA,IAAI,GAAG,SAAS;EAChB,GAAGC,KAAAA;AAAK,CACF,EACRC,GAAG,EAAA;AAEH,EAAA,MAAMC,MAAM,GAAGP,IAAI,KAAK,GAAG,CAAA;AAC3B,EAAA;AAAA;AACE;AACAQ,IAAAA,cAAA,CAACC,cAAM,EAAA;AACLH,MAAAA,GAAG,EAAEA,GAAI;AACTI,MAAAA,EAAE,EAAEH,MAAM,GAAGI,uBAAe,GAAGC,uBAAgB;AAC/Cb,MAAAA,IAAI,EAAEA,IAAK;MACXc,SAAS,EAAA,IAAA;MACTX,SAAS,EAAEY,SAAI,CACb,gBAAgB,EAChB,kBAAkBX,QAAQ,CAAA,CAAA,EAAIC,IAAI,CAAA,CAAE,EACpC;QACEW,QAAQ,EAAEV,KAAK,CAACU,QAAAA;OACjB,EACDb,SAAS,CACT;AAAA,MAAA,IACGK,MAAM,GAAG;AAAEP,QAAAA,IAAAA;OAAM,GAAG,EAAE,CAAA;AAAA,MAAA,GACvBK,KAAK;AAAAJ,MAAAA,QAAA,EAERA,QAAAA;KACK,CAAA;AAAC,IAAA;AAEb,CAAC;;;;"}
+{"version":3,"file":"IconButton.js","sources":["../../src/iconButton/IconButton.tsx"],"sourcesContent":["import { AnchorHTMLAttributes, ButtonHTMLAttributes, forwardRef, HTMLAttributes } from 'react';\nimport { PrimitiveAnchor, PrimitiveButton } from '../primitives';\nimport Circle from '../common/circle';\nimport { clsx } from 'clsx';\n\nexport type Props = {\n  size?: 16 | 24 | 32 | 40 | 48 | 56 | 72;\n  priority?: 'primary' | 'secondary' | 'tertiary' | 'minimal';\n  type?: 'default' | 'negative';\n  'data-testid'?: string;\n} & Pick<AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'target' | 'onClick'> &\n  Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'disabled'> &\n  Pick<\n    HTMLAttributes<HTMLDivElement>,\n    'className' | 'role' | 'children' | 'aria-label' | 'tabIndex'\n  >;\n\nconst IconButton = forwardRef(function IconButton(\n  {\n    size = 48,\n    href = '#',\n    children,\n    className,\n    priority = 'primary',\n    type = 'default',\n    ...props\n  }: Props,\n  ref,\n) {\n  const isLink = href !== '#';\n  return (\n    // @ts-expect-error it's either link or `button` element so it has `onClick` / `href`\n    <Circle\n      ref={ref}\n      as={isLink ? PrimitiveAnchor : PrimitiveButton}\n      size={size}\n      fixedSize\n      className={clsx(\n        'np-icon-button',\n        `np-icon-button-${priority}-${type}`,\n        {\n          disabled: props.disabled,\n        },\n        className,\n      )}\n      {...(isLink ? { href } : {})}\n      {...props}\n    >\n      {children}\n    </Circle>\n  );\n});\n\nexport default IconButton;\n"],"names":["IconButton","forwardRef","size","href","children","className","priority","type","props","ref","isLink","_jsx","Circle","as","PrimitiveAnchor","PrimitiveButton","fixedSize","clsx","disabled"],"mappings":";;;;;;;;;;;AAiBA,MAAMA,UAAU,gBAAGC,gBAAU,CAAC,SAASD,UAAUA,CAC/C;AACEE,EAAAA,IAAI,GAAG,EAAE;AACTC,EAAAA,IAAI,GAAG,GAAG;EACVC,QAAQ;EACRC,SAAS;AACTC,EAAAA,QAAQ,GAAG,SAAS;AACpBC,EAAAA,IAAI,GAAG,SAAS;EAChB,GAAGC;AAAK,CACF,EACRC,GAAG,EAAA;AAEH,EAAA,MAAMC,MAAM,GAAGP,IAAI,KAAK,GAAG;AAC3B,EAAA;AAAA;AACE;AACAQ,IAAAA,cAAA,CAACC,cAAM,EAAA;AACLH,MAAAA,GAAG,EAAEA,GAAI;AACTI,MAAAA,EAAE,EAAEH,MAAM,GAAGI,uBAAe,GAAGC,uBAAgB;AAC/Cb,MAAAA,IAAI,EAAEA,IAAK;MACXc,SAAS,EAAA,IAAA;MACTX,SAAS,EAAEY,SAAI,CACb,gBAAgB,EAChB,kBAAkBX,QAAQ,CAAA,CAAA,EAAIC,IAAI,CAAA,CAAE,EACpC;QACEW,QAAQ,EAAEV,KAAK,CAACU;OACjB,EACDb,SAAS,CACT;AAAA,MAAA,IACGK,MAAM,GAAG;AAAEP,QAAAA;OAAM,GAAG,EAAE,CAAA;AAAA,MAAA,GACvBK,KAAK;AAAAJ,MAAAA,QAAA,EAERA;KACK;AAAC;AAEb,CAAC;;;;"}

package/build/iconButton/IconButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.mjs","sources":["../../src/iconButton/IconButton.tsx"],"sourcesContent":["import { AnchorHTMLAttributes, ButtonHTMLAttributes, forwardRef, HTMLAttributes } from 'react';\nimport { PrimitiveAnchor, PrimitiveButton } from '../primitives';\nimport Circle from '../common/circle';\nimport { clsx } from 'clsx';\n\nexport type Props = {\n  size?: 16 | 24 | 32 | 40 | 48 | 56 | 72;\n  priority?: 'primary' | 'secondary' | 'tertiary' | 'minimal';\n  type?: 'default' | 'negative';\n  'data-testid'?: string;\n} & Pick<AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'target' | 'onClick'> &\n  Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'disabled'> &\n  Pick<\n    HTMLAttributes<HTMLDivElement>,\n    'className' | 'role' | 'children' | 'aria-label' | 'tabIndex'\n  >;\n\nconst IconButton = forwardRef(function IconButton(\n  {\n    size = 48,\n    href = '#',\n    children,\n    className,\n    priority = 'primary',\n    type = 'default',\n    ...props\n  }: Props,\n  ref,\n) {\n  const isLink = href !== '#';\n  return (\n    // @ts-expect-error it's either link or `button` element so it has `onClick` / `href`\n    <Circle\n      ref={ref}\n      as={isLink ? PrimitiveAnchor : PrimitiveButton}\n      size={size}\n      fixedSize\n      className={clsx(\n        'np-icon-button',\n        `np-icon-button-${priority}-${type}`,\n        {\n          disabled: props.disabled,\n        },\n        className,\n      )}\n      {...(isLink ? { href } : {})}\n      {...props}\n    >\n      {children}\n    </Circle>\n  );\n});\n\nexport default IconButton;\n"],"names":["IconButton","forwardRef","size","href","children","className","priority","type","props","ref","isLink","_jsx","Circle","as","PrimitiveAnchor","PrimitiveButton","fixedSize","clsx","disabled"],"mappings":";;;;;;;AAiBA,MAAMA,UAAU,gBAAGC,UAAU,CAAC,SAASD,UAAUA,CAC/C;AACEE,EAAAA,IAAI,GAAG,EAAE;AACTC,EAAAA,IAAI,GAAG,GAAG;EACVC,QAAQ;EACRC,SAAS;AACTC,EAAAA,QAAQ,GAAG,SAAS;AACpBC,EAAAA,IAAI,GAAG,SAAS;EAChB,GAAGC,KAAAA;AAAK,CACF,EACRC,GAAG,EAAA;AAEH,EAAA,MAAMC,MAAM,GAAGP,IAAI,KAAK,GAAG,CAAA;AAC3B,EAAA;AAAA;AACE;AACAQ,IAAAA,GAAA,CAACC,MAAM,EAAA;AACLH,MAAAA,GAAG,EAAEA,GAAI;AACTI,MAAAA,EAAE,EAAEH,MAAM,GAAGI,eAAe,GAAGC,eAAgB;AAC/Cb,MAAAA,IAAI,EAAEA,IAAK;MACXc,SAAS,EAAA,IAAA;MACTX,SAAS,EAAEY,IAAI,CACb,gBAAgB,EAChB,kBAAkBX,QAAQ,CAAA,CAAA,EAAIC,IAAI,CAAA,CAAE,EACpC;QACEW,QAAQ,EAAEV,KAAK,CAACU,QAAAA;OACjB,EACDb,SAAS,CACT;AAAA,MAAA,IACGK,MAAM,GAAG;AAAEP,QAAAA,IAAAA;OAAM,GAAG,EAAE,CAAA;AAAA,MAAA,GACvBK,KAAK;AAAAJ,MAAAA,QAAA,EAERA,QAAAA;KACK,CAAA;AAAC,IAAA;AAEb,CAAC;;;;"}
+{"version":3,"file":"IconButton.mjs","sources":["../../src/iconButton/IconButton.tsx"],"sourcesContent":["import { AnchorHTMLAttributes, ButtonHTMLAttributes, forwardRef, HTMLAttributes } from 'react';\nimport { PrimitiveAnchor, PrimitiveButton } from '../primitives';\nimport Circle from '../common/circle';\nimport { clsx } from 'clsx';\n\nexport type Props = {\n  size?: 16 | 24 | 32 | 40 | 48 | 56 | 72;\n  priority?: 'primary' | 'secondary' | 'tertiary' | 'minimal';\n  type?: 'default' | 'negative';\n  'data-testid'?: string;\n} & Pick<AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'target' | 'onClick'> &\n  Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'disabled'> &\n  Pick<\n    HTMLAttributes<HTMLDivElement>,\n    'className' | 'role' | 'children' | 'aria-label' | 'tabIndex'\n  >;\n\nconst IconButton = forwardRef(function IconButton(\n  {\n    size = 48,\n    href = '#',\n    children,\n    className,\n    priority = 'primary',\n    type = 'default',\n    ...props\n  }: Props,\n  ref,\n) {\n  const isLink = href !== '#';\n  return (\n    // @ts-expect-error it's either link or `button` element so it has `onClick` / `href`\n    <Circle\n      ref={ref}\n      as={isLink ? PrimitiveAnchor : PrimitiveButton}\n      size={size}\n      fixedSize\n      className={clsx(\n        'np-icon-button',\n        `np-icon-button-${priority}-${type}`,\n        {\n          disabled: props.disabled,\n        },\n        className,\n      )}\n      {...(isLink ? { href } : {})}\n      {...props}\n    >\n      {children}\n    </Circle>\n  );\n});\n\nexport default IconButton;\n"],"names":["IconButton","forwardRef","size","href","children","className","priority","type","props","ref","isLink","_jsx","Circle","as","PrimitiveAnchor","PrimitiveButton","fixedSize","clsx","disabled"],"mappings":";;;;;;;AAiBA,MAAMA,UAAU,gBAAGC,UAAU,CAAC,SAASD,UAAUA,CAC/C;AACEE,EAAAA,IAAI,GAAG,EAAE;AACTC,EAAAA,IAAI,GAAG,GAAG;EACVC,QAAQ;EACRC,SAAS;AACTC,EAAAA,QAAQ,GAAG,SAAS;AACpBC,EAAAA,IAAI,GAAG,SAAS;EAChB,GAAGC;AAAK,CACF,EACRC,GAAG,EAAA;AAEH,EAAA,MAAMC,MAAM,GAAGP,IAAI,KAAK,GAAG;AAC3B,EAAA;AAAA;AACE;AACAQ,IAAAA,GAAA,CAACC,MAAM,EAAA;AACLH,MAAAA,GAAG,EAAEA,GAAI;AACTI,MAAAA,EAAE,EAAEH,MAAM,GAAGI,eAAe,GAAGC,eAAgB;AAC/Cb,MAAAA,IAAI,EAAEA,IAAK;MACXc,SAAS,EAAA,IAAA;MACTX,SAAS,EAAEY,IAAI,CACb,gBAAgB,EAChB,kBAAkBX,QAAQ,CAAA,CAAA,EAAIC,IAAI,CAAA,CAAE,EACpC;QACEW,QAAQ,EAAEV,KAAK,CAACU;OACjB,EACDb,SAAS,CACT;AAAA,MAAA,IACGK,MAAM,GAAG;AAAEP,QAAAA;OAAM,GAAG,EAAE,CAAA;AAAA,MAAA,GACvBK,KAAK;AAAAJ,MAAAA,QAAA,EAERA;KACK;AAAC;AAEb,CAAC;;;;"}

package/build/image/Image.js

@@ -10,7 +10,6 @@ var useHasIntersected = require('../common/hooks/useHasIntersected/useHasInterse
 require('../common/propsValues/breakpoint.js');
 var jsxRuntime = require('react/jsx-runtime');
 
-const EmptyTransparentImage = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
 const Image = ({
   id,
   src,
@@ -28,27 +27,27 @@ const Image = ({
     elRef: elementReference,
     loading
   });
-  let imageSource = src;
-  let imageOnLoad = onLoad;
-  if (loading === 'lazy' && !hasIntersected) {
-    imageSource = EmptyTransparentImage;
-    imageOnLoad = undefined;
-  }
+  // Internal onLoad handler that calls user onLoad only if hasIntersected is true
+  const handleLoad = React.useCallback(() => {
+    if (hasIntersected && onLoad) {
+      onLoad();
+    }
+  }, [hasIntersected, onLoad]);
   return /*#__PURE__*/jsxRuntime.jsx("img", {
     ref: elementReference,
     id: id,
     alt: alt,
-    src: imageSource,
+    src: src,
+    loading: loading,
     className: clsx.clsx(['tw-image', {
       'tw-image__stretch': stretch,
       'tw-image__shrink': shrink
     }, className]),
     role: role,
-    onLoad: imageOnLoad,
+    onLoad: handleLoad,
     onError: onError
   });
 };
 
-exports.EmptyTransparentImage = EmptyTransparentImage;
 exports.default = Image;
 //# sourceMappingURL=Image.js.map

package/build/image/Image.js.map

@@ -1 +1 @@
-{"version":3,"file":"Image.js","sources":["../../src/image/Image.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useRef } from 'react';\n\nimport { useHasIntersected } from '../common/hooks';\n\nexport interface ImageProps {\n  alt: string;\n  src: string;\n  id?: string;\n  onLoad?: () => void;\n  onError?: () => void;\n  className?: string;\n  loading?: 'lazy' | 'eager';\n  stretch?: boolean;\n  role?: string;\n  shrink?: boolean;\n}\n\nexport const EmptyTransparentImage =\n  'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';\n\nconst Image = ({\n  id,\n  src,\n  alt,\n  onLoad,\n  onError,\n  className,\n  loading,\n  stretch = true,\n  role,\n  shrink = true,\n}: ImageProps) => {\n  const elementReference = useRef<HTMLImageElement>(null);\n  const [hasIntersected] = useHasIntersected({ elRef: elementReference, loading });\n  let imageSource = src;\n  let imageOnLoad = onLoad;\n\n  if (loading === 'lazy' && !hasIntersected) {\n    imageSource = EmptyTransparentImage;\n    imageOnLoad = undefined;\n  }\n\n  return (\n    <img\n      ref={elementReference}\n      id={id}\n      alt={alt}\n      src={imageSource}\n      className={clsx([\n        'tw-image',\n        {\n          'tw-image__stretch': stretch,\n          'tw-image__shrink': shrink,\n        },\n        className,\n      ])}\n      role={role}\n      onLoad={imageOnLoad}\n      onError={onError}\n    />\n  );\n};\n\nexport default Image;\n"],"names":["EmptyTransparentImage","Image","id","src","alt","onLoad","onError","className","loading","stretch","role","shrink","elementReference","useRef","hasIntersected","useHasIntersected","elRef","imageSource","imageOnLoad","undefined","_jsx","ref","clsx"],"mappings":";;;;;;;;;;;;AAkBO,MAAMA,qBAAqB,GAChC,6EAA4E;AAExEC,MAAAA,KAAK,GAAGA,CAAC;EACbC,EAAE;EACFC,GAAG;EACHC,GAAG;EACHC,MAAM;EACNC,OAAO;EACPC,SAAS;EACTC,OAAO;AACPC,EAAAA,OAAO,GAAG,IAAI;EACdC,IAAI;AACJC,EAAAA,MAAM,GAAG,IAAA;AAAI,CACF,KAAI;AACf,EAAA,MAAMC,gBAAgB,GAAGC,YAAM,CAAmB,IAAI,CAAC,CAAA;AACvD,EAAA,MAAM,CAACC,cAAc,CAAC,GAAGC,mCAAiB,CAAC;AAAEC,IAAAA,KAAK,EAAEJ,gBAAgB;AAAEJ,IAAAA,OAAAA;AAAO,GAAE,CAAC,CAAA;EAChF,IAAIS,WAAW,GAAGd,GAAG,CAAA;EACrB,IAAIe,WAAW,GAAGb,MAAM,CAAA;AAExB,EAAA,IAAIG,OAAO,KAAK,MAAM,IAAI,CAACM,cAAc,EAAE;AACzCG,IAAAA,WAAW,GAAGjB,qBAAqB,CAAA;AACnCkB,IAAAA,WAAW,GAAGC,SAAS,CAAA;AACzB,GAAA;AAEA,EAAA,oBACEC,cAAA,CAAA,KAAA,EAAA;AACEC,IAAAA,GAAG,EAAET,gBAAiB;AACtBV,IAAAA,EAAE,EAAEA,EAAG;AACPE,IAAAA,GAAG,EAAEA,GAAI;AACTD,IAAAA,GAAG,EAAEc,WAAY;AACjBV,IAAAA,SAAS,EAAEe,SAAI,CAAC,CACd,UAAU,EACV;AACE,MAAA,mBAAmB,EAAEb,OAAO;AAC5B,MAAA,kBAAkB,EAAEE,MAAAA;KACrB,EACDJ,SAAS,CACV,CAAE;AACHG,IAAAA,IAAI,EAAEA,IAAK;AACXL,IAAAA,MAAM,EAAEa,WAAY;AACpBZ,IAAAA,OAAO,EAAEA,OAAAA;AAAQ,GACjB,CAAA,CAAA;AAEN;;;;;"}
+{"version":3,"file":"Image.js","sources":["../../src/image/Image.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useRef, useCallback } from 'react';\n\nimport { useHasIntersected } from '../common/hooks';\n\nexport interface ImageProps {\n  alt: string;\n  src: string;\n  id?: string;\n  onLoad?: () => void;\n  onError?: () => void;\n  className?: string;\n  loading?: 'lazy' | 'eager';\n  stretch?: boolean;\n  role?: string;\n  shrink?: boolean;\n}\n\nconst Image = ({\n  id,\n  src,\n  alt,\n  onLoad,\n  onError,\n  className,\n  loading,\n  stretch = true,\n  role,\n  shrink = true,\n}: ImageProps) => {\n  const elementReference = useRef<HTMLImageElement>(null);\n  const [hasIntersected] = useHasIntersected({ elRef: elementReference, loading });\n\n  // Internal onLoad handler that calls user onLoad only if hasIntersected is true\n  const handleLoad = useCallback(() => {\n    if (hasIntersected && onLoad) {\n      onLoad();\n    }\n  }, [hasIntersected, onLoad]);\n\n  return (\n    <img\n      ref={elementReference}\n      id={id}\n      alt={alt}\n      src={src}\n      loading={loading}\n      className={clsx([\n        'tw-image',\n        {\n          'tw-image__stretch': stretch,\n          'tw-image__shrink': shrink,\n        },\n        className,\n      ])}\n      role={role}\n      onLoad={handleLoad}\n      onError={onError}\n    />\n  );\n};\n\nexport default Image;\n"],"names":["Image","id","src","alt","onLoad","onError","className","loading","stretch","role","shrink","elementReference","useRef","hasIntersected","useHasIntersected","elRef","handleLoad","useCallback","_jsx","ref","clsx"],"mappings":";;;;;;;;;;;;AAkBMA,MAAAA,KAAK,GAAGA,CAAC;EACbC,EAAE;EACFC,GAAG;EACHC,GAAG;EACHC,MAAM;EACNC,OAAO;EACPC,SAAS;EACTC,OAAO;AACPC,EAAAA,OAAO,GAAG,IAAI;EACdC,IAAI;AACJC,EAAAA,MAAM,GAAG;AAAI,CACF,KAAI;AACf,EAAA,MAAMC,gBAAgB,GAAGC,YAAM,CAAmB,IAAI,CAAC;AACvD,EAAA,MAAM,CAACC,cAAc,CAAC,GAAGC,mCAAiB,CAAC;AAAEC,IAAAA,KAAK,EAAEJ,gBAAgB;AAAEJ,IAAAA;AAAO,GAAE,CAAC;AAEhF;AACA,EAAA,MAAMS,UAAU,GAAGC,iBAAW,CAAC,MAAK;IAClC,IAAIJ,cAAc,IAAIT,MAAM,EAAE;AAC5BA,MAAAA,MAAM,EAAE;AACV;AACF,GAAC,EAAE,CAACS,cAAc,EAAET,MAAM,CAAC,CAAC;AAE5B,EAAA,oBACEc,cAAA,CAAA,KAAA,EAAA;AACEC,IAAAA,GAAG,EAAER,gBAAiB;AACtBV,IAAAA,EAAE,EAAEA,EAAG;AACPE,IAAAA,GAAG,EAAEA,GAAI;AACTD,IAAAA,GAAG,EAAEA,GAAI;AACTK,IAAAA,OAAO,EAAEA,OAAQ;AACjBD,IAAAA,SAAS,EAAEc,SAAI,CAAC,CACd,UAAU,EACV;AACE,MAAA,mBAAmB,EAAEZ,OAAO;AAC5B,MAAA,kBAAkB,EAAEE;KACrB,EACDJ,SAAS,CACV,CAAE;AACHG,IAAAA,IAAI,EAAEA,IAAK;AACXL,IAAAA,MAAM,EAAEY,UAAW;AACnBX,IAAAA,OAAO,EAAEA;AAAQ,GACjB,CAAA;AAEN;;;;"}

package/build/image/Image.mjs

@@ -1,12 +1,11 @@
 import { clsx } from 'clsx';
-import { useRef } from 'react';
+import { useRef, useCallback } from 'react';
 import '@transferwise/neptune-validation';
 import '../provider/direction/DirectionProvider.mjs';
 import { useHasIntersected } from '../common/hooks/useHasIntersected/useHasIntersected.mjs';
 import '../common/propsValues/breakpoint.mjs';
 import { jsx } from 'react/jsx-runtime';
 
-const EmptyTransparentImage = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
 const Image = ({
   id,
   src,
@@ -24,26 +23,27 @@ const Image = ({
     elRef: elementReference,
     loading
   });
-  let imageSource = src;
-  let imageOnLoad = onLoad;
-  if (loading === 'lazy' && !hasIntersected) {
-    imageSource = EmptyTransparentImage;
-    imageOnLoad = undefined;
-  }
+  // Internal onLoad handler that calls user onLoad only if hasIntersected is true
+  const handleLoad = useCallback(() => {
+    if (hasIntersected && onLoad) {
+      onLoad();
+    }
+  }, [hasIntersected, onLoad]);
   return /*#__PURE__*/jsx("img", {
     ref: elementReference,
     id: id,
     alt: alt,
-    src: imageSource,
+    src: src,
+    loading: loading,
     className: clsx(['tw-image', {
       'tw-image__stretch': stretch,
       'tw-image__shrink': shrink
     }, className]),
     role: role,
-    onLoad: imageOnLoad,
+    onLoad: handleLoad,
     onError: onError
   });
 };
 
-export { EmptyTransparentImage, Image as default };
+export { Image as default };
 //# sourceMappingURL=Image.mjs.map

package/build/image/Image.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Image.mjs","sources":["../../src/image/Image.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useRef } from 'react';\n\nimport { useHasIntersected } from '../common/hooks';\n\nexport interface ImageProps {\n  alt: string;\n  src: string;\n  id?: string;\n  onLoad?: () => void;\n  onError?: () => void;\n  className?: string;\n  loading?: 'lazy' | 'eager';\n  stretch?: boolean;\n  role?: string;\n  shrink?: boolean;\n}\n\nexport const EmptyTransparentImage =\n  'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';\n\nconst Image = ({\n  id,\n  src,\n  alt,\n  onLoad,\n  onError,\n  className,\n  loading,\n  stretch = true,\n  role,\n  shrink = true,\n}: ImageProps) => {\n  const elementReference = useRef<HTMLImageElement>(null);\n  const [hasIntersected] = useHasIntersected({ elRef: elementReference, loading });\n  let imageSource = src;\n  let imageOnLoad = onLoad;\n\n  if (loading === 'lazy' && !hasIntersected) {\n    imageSource = EmptyTransparentImage;\n    imageOnLoad = undefined;\n  }\n\n  return (\n    <img\n      ref={elementReference}\n      id={id}\n      alt={alt}\n      src={imageSource}\n      className={clsx([\n        'tw-image',\n        {\n          'tw-image__stretch': stretch,\n          'tw-image__shrink': shrink,\n        },\n        className,\n      ])}\n      role={role}\n      onLoad={imageOnLoad}\n      onError={onError}\n    />\n  );\n};\n\nexport default Image;\n"],"names":["EmptyTransparentImage","Image","id","src","alt","onLoad","onError","className","loading","stretch","role","shrink","elementReference","useRef","hasIntersected","useHasIntersected","elRef","imageSource","imageOnLoad","undefined","_jsx","ref","clsx"],"mappings":";;;;;;;;AAkBO,MAAMA,qBAAqB,GAChC,6EAA4E;AAExEC,MAAAA,KAAK,GAAGA,CAAC;EACbC,EAAE;EACFC,GAAG;EACHC,GAAG;EACHC,MAAM;EACNC,OAAO;EACPC,SAAS;EACTC,OAAO;AACPC,EAAAA,OAAO,GAAG,IAAI;EACdC,IAAI;AACJC,EAAAA,MAAM,GAAG,IAAA;AAAI,CACF,KAAI;AACf,EAAA,MAAMC,gBAAgB,GAAGC,MAAM,CAAmB,IAAI,CAAC,CAAA;AACvD,EAAA,MAAM,CAACC,cAAc,CAAC,GAAGC,iBAAiB,CAAC;AAAEC,IAAAA,KAAK,EAAEJ,gBAAgB;AAAEJ,IAAAA,OAAAA;AAAO,GAAE,CAAC,CAAA;EAChF,IAAIS,WAAW,GAAGd,GAAG,CAAA;EACrB,IAAIe,WAAW,GAAGb,MAAM,CAAA;AAExB,EAAA,IAAIG,OAAO,KAAK,MAAM,IAAI,CAACM,cAAc,EAAE;AACzCG,IAAAA,WAAW,GAAGjB,qBAAqB,CAAA;AACnCkB,IAAAA,WAAW,GAAGC,SAAS,CAAA;AACzB,GAAA;AAEA,EAAA,oBACEC,GAAA,CAAA,KAAA,EAAA;AACEC,IAAAA,GAAG,EAAET,gBAAiB;AACtBV,IAAAA,EAAE,EAAEA,EAAG;AACPE,IAAAA,GAAG,EAAEA,GAAI;AACTD,IAAAA,GAAG,EAAEc,WAAY;AACjBV,IAAAA,SAAS,EAAEe,IAAI,CAAC,CACd,UAAU,EACV;AACE,MAAA,mBAAmB,EAAEb,OAAO;AAC5B,MAAA,kBAAkB,EAAEE,MAAAA;KACrB,EACDJ,SAAS,CACV,CAAE;AACHG,IAAAA,IAAI,EAAEA,IAAK;AACXL,IAAAA,MAAM,EAAEa,WAAY;AACpBZ,IAAAA,OAAO,EAAEA,OAAAA;AAAQ,GACjB,CAAA,CAAA;AAEN;;;;"}
+{"version":3,"file":"Image.mjs","sources":["../../src/image/Image.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useRef, useCallback } from 'react';\n\nimport { useHasIntersected } from '../common/hooks';\n\nexport interface ImageProps {\n  alt: string;\n  src: string;\n  id?: string;\n  onLoad?: () => void;\n  onError?: () => void;\n  className?: string;\n  loading?: 'lazy' | 'eager';\n  stretch?: boolean;\n  role?: string;\n  shrink?: boolean;\n}\n\nconst Image = ({\n  id,\n  src,\n  alt,\n  onLoad,\n  onError,\n  className,\n  loading,\n  stretch = true,\n  role,\n  shrink = true,\n}: ImageProps) => {\n  const elementReference = useRef<HTMLImageElement>(null);\n  const [hasIntersected] = useHasIntersected({ elRef: elementReference, loading });\n\n  // Internal onLoad handler that calls user onLoad only if hasIntersected is true\n  const handleLoad = useCallback(() => {\n    if (hasIntersected && onLoad) {\n      onLoad();\n    }\n  }, [hasIntersected, onLoad]);\n\n  return (\n    <img\n      ref={elementReference}\n      id={id}\n      alt={alt}\n      src={src}\n      loading={loading}\n      className={clsx([\n        'tw-image',\n        {\n          'tw-image__stretch': stretch,\n          'tw-image__shrink': shrink,\n        },\n        className,\n      ])}\n      role={role}\n      onLoad={handleLoad}\n      onError={onError}\n    />\n  );\n};\n\nexport default Image;\n"],"names":["Image","id","src","alt","onLoad","onError","className","loading","stretch","role","shrink","elementReference","useRef","hasIntersected","useHasIntersected","elRef","handleLoad","useCallback","_jsx","ref","clsx"],"mappings":";;;;;;;;AAkBMA,MAAAA,KAAK,GAAGA,CAAC;EACbC,EAAE;EACFC,GAAG;EACHC,GAAG;EACHC,MAAM;EACNC,OAAO;EACPC,SAAS;EACTC,OAAO;AACPC,EAAAA,OAAO,GAAG,IAAI;EACdC,IAAI;AACJC,EAAAA,MAAM,GAAG;AAAI,CACF,KAAI;AACf,EAAA,MAAMC,gBAAgB,GAAGC,MAAM,CAAmB,IAAI,CAAC;AACvD,EAAA,MAAM,CAACC,cAAc,CAAC,GAAGC,iBAAiB,CAAC;AAAEC,IAAAA,KAAK,EAAEJ,gBAAgB;AAAEJ,IAAAA;AAAO,GAAE,CAAC;AAEhF;AACA,EAAA,MAAMS,UAAU,GAAGC,WAAW,CAAC,MAAK;IAClC,IAAIJ,cAAc,IAAIT,MAAM,EAAE;AAC5BA,MAAAA,MAAM,EAAE;AACV;AACF,GAAC,EAAE,CAACS,cAAc,EAAET,MAAM,CAAC,CAAC;AAE5B,EAAA,oBACEc,GAAA,CAAA,KAAA,EAAA;AACEC,IAAAA,GAAG,EAAER,gBAAiB;AACtBV,IAAAA,EAAE,EAAEA,EAAG;AACPE,IAAAA,GAAG,EAAEA,GAAI;AACTD,IAAAA,GAAG,EAAEA,GAAI;AACTK,IAAAA,OAAO,EAAEA,OAAQ;AACjBD,IAAAA,SAAS,EAAEc,IAAI,CAAC,CACd,UAAU,EACV;AACE,MAAA,mBAAmB,EAAEZ,OAAO;AAC5B,MAAA,kBAAkB,EAAEE;KACrB,EACDJ,SAAS,CACV,CAAE;AACHG,IAAAA,IAAI,EAAEA,IAAK;AACXL,IAAAA,MAAM,EAAEY,UAAW;AACnBX,IAAAA,OAAO,EAAEA;AAAQ,GACjB,CAAA;AAEN;;;;"}

package/build/info/Info.js.map

@@ -1 +1 @@
-{"version":3,"file":"Info.js","sources":["../../src/info/Info.tsx"],"sourcesContent":["import { QuestionMarkCircle as HelpCircleIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { Size, Position, SizeSmall, SizeLarge } from '../common';\nimport Modal from '../modal';\nimport Popover, { PopoverPreferredPlacement } from '../popover';\n\nimport messages from './Info.messages';\nimport { InfoPresentation } from './infoPresentations';\nimport IconButton, { IconButtonProps } from '../iconButton';\n\nexport interface InfoProps {\n  'aria-label'?: string;\n  /**\n   * Extra classes applied to Info\n   */\n  className?: string;\n  /**\n   * Content displayed inside a Popover a Modal\n   */\n  content?: React.ReactNode;\n  onClick?: () => void;\n  /**\n   * Decides whether to display content in a Popover or a Modal\n   */\n  presentation?: 'MODAL' | 'POPOVER';\n  /**\n   * Decides the size of help Icon\n   */\n  size?: SizeSmall | SizeLarge;\n  /**\n   * Title displayed inside a Popover a Modal\n   */\n  title?: React.ReactNode;\n  /**\n   * Prferred placement of the Popover, does not apply to Modal\n   */\n  preferredPlacement?: PopoverPreferredPlacement;\n}\n\nconst Info = ({\n  className = undefined,\n  content = undefined,\n  onClick = undefined,\n  presentation = InfoPresentation.POPOVER,\n  size = Size.SMALL,\n  title = undefined,\n  'aria-label': ariaLabel,\n  preferredPlacement = Position.BOTTOM,\n}: InfoProps) => {\n  const intl = useIntl();\n  const [open, setOpen] = useState(false);\n  ariaLabel ??= intl.formatMessage(messages.ariaLabel);\n  const isModal = presentation === InfoPresentation.MODAL;\n\n  const buttonProps: IconButtonProps = {\n    'aria-label': ariaLabel,\n    priority: 'minimal',\n    size: 24,\n    children: <HelpCircleIcon />,\n  };\n\n  return (\n    <span className={clsx(className, 'np-info')}>\n      {isModal ? (\n        <>\n          <IconButton\n            onClick={() => {\n              setOpen(!open);\n              if (onClick) {\n                onClick();\n              }\n            }}\n            {...buttonProps}\n          />\n          <Modal body={content} open={open} title={title} onClose={() => setOpen(false)} />\n        </>\n      ) : (\n        <Popover content={content} preferredPlacement={preferredPlacement} title={title}>\n          <IconButton\n            {...buttonProps}\n            onClick={() => {\n              if (onClick) {\n                onClick();\n              }\n            }}\n          />\n        </Popover>\n      )}\n    </span>\n  );\n};\n\nexport default Info;\n"],"names":["Info","className","undefined","content","onClick","presentation","InfoPresentation","POPOVER","size","Size","SMALL","title","ariaLabel","preferredPlacement","Position","BOTTOM","intl","useIntl","open","setOpen","useState","formatMessage","messages","isModal","MODAL","buttonProps","priority","children","_jsx","HelpCircleIcon","clsx","_jsxs","_Fragment","IconButton","Modal","body","onClose","Popover"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CMA,MAAAA,IAAI,GAAGA,CAAC;AACZC,EAAAA,SAAS,GAAGC,SAAS;AACrBC,EAAAA,OAAO,GAAGD,SAAS;AACnBE,EAAAA,OAAO,GAAGF,SAAS;EACnBG,YAAY,GAAGC,kCAAgB,CAACC,OAAO;QACvCC,MAAI,GAAGC,SAAI,CAACC,KAAK;AACjBC,EAAAA,KAAK,GAAGT,SAAS;AACjB,EAAA,YAAY,EAAEU,SAAS;EACvBC,kBAAkB,GAAGC,iBAAQ,CAACC,MAAAA;AAAM,CAC1B,KAAI;AACd,EAAA,MAAMC,IAAI,GAAGC,iBAAO,EAAE,CAAA;EACtB,MAAM,CAACC,IAAI,EAAEC,OAAO,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC,CAAA;EACvCR,SAAS,KAAKI,IAAI,CAACK,aAAa,CAACC,qBAAQ,CAACV,SAAS,CAAC,CAAA;AACpD,EAAA,MAAMW,OAAO,GAAGlB,YAAY,KAAKC,kCAAgB,CAACkB,KAAK,CAAA;AAEvD,EAAA,MAAMC,WAAW,GAAoB;AACnC,IAAA,YAAY,EAAEb,SAAS;AACvBc,IAAAA,QAAQ,EAAE,SAAS;AACnBlB,IAAAA,IAAI,EAAE,EAAE;AACRmB,IAAAA,QAAQ,eAAEC,cAAA,CAACC,wBAAc,EAAG,EAAA,CAAA;GAC7B,CAAA;AAED,EAAA,oBACED,cAAA,CAAA,MAAA,EAAA;AAAM3B,IAAAA,SAAS,EAAE6B,SAAI,CAAC7B,SAAS,EAAE,SAAS,CAAE;AAAA0B,IAAAA,QAAA,EACzCJ,OAAO,gBACNQ,eAAA,CAAAC,mBAAA,EAAA;MAAAL,QAAA,EAAA,cACEC,cAAA,CAACK,kBAAU,EAAA;QACT7B,OAAO,EAAEA,MAAK;UACZe,OAAO,CAAC,CAACD,IAAI,CAAC,CAAA;AACd,UAAA,IAAId,OAAO,EAAE;AACXA,YAAAA,OAAO,EAAE,CAAA;AACX,WAAA;SACA;QAAA,GACEqB,WAAAA;AAAW,OAEjB,CAAA,eAAAG,cAAA,CAACM,aAAK,EAAA;AAACC,QAAAA,IAAI,EAAEhC,OAAQ;AAACe,QAAAA,IAAI,EAAEA,IAAK;AAACP,QAAAA,KAAK,EAAEA,KAAM;AAACyB,QAAAA,OAAO,EAAEA,MAAMjB,OAAO,CAAC,KAAK,CAAA;AAAE,OAChF,CAAA,CAAA;AAAA,KAAG,CAAA,gBAEHS,cAAA,CAACS,eAAO,EAAA;AAAClC,MAAAA,OAAO,EAAEA,OAAQ;AAACU,MAAAA,kBAAkB,EAAEA,kBAAmB;AAACF,MAAAA,KAAK,EAAEA,KAAM;MAAAgB,QAAA,eAC9EC,cAAA,CAACK,kBAAU,EAAA;AAAA,QAAA,GACLR,WAAW;QACfrB,OAAO,EAAEA,MAAK;AACZ,UAAA,IAAIA,OAAO,EAAE;AACXA,YAAAA,OAAO,EAAE,CAAA;AACX,WAAA;AACF,SAAA;OAEJ,CAAA;KAAS,CAAA;AACV,GACG,CAAC,CAAA;AAEX;;;;"}
+{"version":3,"file":"Info.js","sources":["../../src/info/Info.tsx"],"sourcesContent":["import { QuestionMarkCircle as HelpCircleIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { Size, Position, SizeSmall, SizeLarge } from '../common';\nimport Modal from '../modal';\nimport Popover, { PopoverPreferredPlacement } from '../popover';\n\nimport messages from './Info.messages';\nimport { InfoPresentation } from './infoPresentations';\nimport IconButton, { IconButtonProps } from '../iconButton';\n\nexport interface InfoProps {\n  'aria-label'?: string;\n  /**\n   * Extra classes applied to Info\n   */\n  className?: string;\n  /**\n   * Content displayed inside a Popover a Modal\n   */\n  content?: React.ReactNode;\n  onClick?: () => void;\n  /**\n   * Decides whether to display content in a Popover or a Modal\n   */\n  presentation?: 'MODAL' | 'POPOVER';\n  /**\n   * Decides the size of help Icon\n   */\n  size?: SizeSmall | SizeLarge;\n  /**\n   * Title displayed inside a Popover a Modal\n   */\n  title?: React.ReactNode;\n  /**\n   * Prferred placement of the Popover, does not apply to Modal\n   */\n  preferredPlacement?: PopoverPreferredPlacement;\n}\n\nconst Info = ({\n  className = undefined,\n  content = undefined,\n  onClick = undefined,\n  presentation = InfoPresentation.POPOVER,\n  size = Size.SMALL,\n  title = undefined,\n  'aria-label': ariaLabel,\n  preferredPlacement = Position.BOTTOM,\n}: InfoProps) => {\n  const intl = useIntl();\n  const [open, setOpen] = useState(false);\n  ariaLabel ??= intl.formatMessage(messages.ariaLabel);\n  const isModal = presentation === InfoPresentation.MODAL;\n\n  const buttonProps: IconButtonProps = {\n    'aria-label': ariaLabel,\n    priority: 'minimal',\n    size: 24,\n    children: <HelpCircleIcon />,\n  };\n\n  return (\n    <span className={clsx(className, 'np-info')}>\n      {isModal ? (\n        <>\n          <IconButton\n            onClick={() => {\n              setOpen(!open);\n              if (onClick) {\n                onClick();\n              }\n            }}\n            {...buttonProps}\n          />\n          <Modal body={content} open={open} title={title} onClose={() => setOpen(false)} />\n        </>\n      ) : (\n        <Popover content={content} preferredPlacement={preferredPlacement} title={title}>\n          <IconButton\n            {...buttonProps}\n            onClick={() => {\n              if (onClick) {\n                onClick();\n              }\n            }}\n          />\n        </Popover>\n      )}\n    </span>\n  );\n};\n\nexport default Info;\n"],"names":["Info","className","undefined","content","onClick","presentation","InfoPresentation","POPOVER","size","Size","SMALL","title","ariaLabel","preferredPlacement","Position","BOTTOM","intl","useIntl","open","setOpen","useState","formatMessage","messages","isModal","MODAL","buttonProps","priority","children","_jsx","HelpCircleIcon","clsx","_jsxs","_Fragment","IconButton","Modal","body","onClose","Popover"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CMA,MAAAA,IAAI,GAAGA,CAAC;AACZC,EAAAA,SAAS,GAAGC,SAAS;AACrBC,EAAAA,OAAO,GAAGD,SAAS;AACnBE,EAAAA,OAAO,GAAGF,SAAS;EACnBG,YAAY,GAAGC,kCAAgB,CAACC,OAAO;QACvCC,MAAI,GAAGC,SAAI,CAACC,KAAK;AACjBC,EAAAA,KAAK,GAAGT,SAAS;AACjB,EAAA,YAAY,EAAEU,SAAS;EACvBC,kBAAkB,GAAGC,iBAAQ,CAACC;AAAM,CAC1B,KAAI;AACd,EAAA,MAAMC,IAAI,GAAGC,iBAAO,EAAE;EACtB,MAAM,CAACC,IAAI,EAAEC,OAAO,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC;EACvCR,SAAS,KAAKI,IAAI,CAACK,aAAa,CAACC,qBAAQ,CAACV,SAAS,CAAC;AACpD,EAAA,MAAMW,OAAO,GAAGlB,YAAY,KAAKC,kCAAgB,CAACkB,KAAK;AAEvD,EAAA,MAAMC,WAAW,GAAoB;AACnC,IAAA,YAAY,EAAEb,SAAS;AACvBc,IAAAA,QAAQ,EAAE,SAAS;AACnBlB,IAAAA,IAAI,EAAE,EAAE;AACRmB,IAAAA,QAAQ,eAAEC,cAAA,CAACC,wBAAc,EAAG,EAAA;GAC7B;AAED,EAAA,oBACED,cAAA,CAAA,MAAA,EAAA;AAAM3B,IAAAA,SAAS,EAAE6B,SAAI,CAAC7B,SAAS,EAAE,SAAS,CAAE;AAAA0B,IAAAA,QAAA,EACzCJ,OAAO,gBACNQ,eAAA,CAAAC,mBAAA,EAAA;MAAAL,QAAA,EAAA,cACEC,cAAA,CAACK,kBAAU,EAAA;QACT7B,OAAO,EAAEA,MAAK;UACZe,OAAO,CAAC,CAACD,IAAI,CAAC;AACd,UAAA,IAAId,OAAO,EAAE;AACXA,YAAAA,OAAO,EAAE;AACX;SACA;QAAA,GACEqB;AAAW,OAEjB,CAAA,eAAAG,cAAA,CAACM,aAAK,EAAA;AAACC,QAAAA,IAAI,EAAEhC,OAAQ;AAACe,QAAAA,IAAI,EAAEA,IAAK;AAACP,QAAAA,KAAK,EAAEA,KAAM;AAACyB,QAAAA,OAAO,EAAEA,MAAMjB,OAAO,CAAC,KAAK;AAAE,OAChF,CAAA;AAAA,KAAG,CAAA,gBAEHS,cAAA,CAACS,eAAO,EAAA;AAAClC,MAAAA,OAAO,EAAEA,OAAQ;AAACU,MAAAA,kBAAkB,EAAEA,kBAAmB;AAACF,MAAAA,KAAK,EAAEA,KAAM;MAAAgB,QAAA,eAC9EC,cAAA,CAACK,kBAAU,EAAA;AAAA,QAAA,GACLR,WAAW;QACfrB,OAAO,EAAEA,MAAK;AACZ,UAAA,IAAIA,OAAO,EAAE;AACXA,YAAAA,OAAO,EAAE;AACX;AACF;OAEJ;KAAS;AACV,GACG,CAAC;AAEX;;;;"}

package/build/info/Info.messages.js.map

@@ -1 +1 @@
-{"version":3,"file":"Info.messages.js","sources":["../../src/info/Info.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n  ariaLabel: {\n    id: 'neptune.Info.ariaLabel',\n    defaultMessage: 'More information',\n  },\n});\n"],"names":["defineMessages","ariaLabel","id"],"mappings":";;;;;;AAEA,eAAeA,wBAAc,CAAC;AAC5BC,EAAAA,SAAS,EAAE;IACTC,EAAE,EAAA,wBAAA;AAEH,GAAA;AACF,CAAA,CAAC;;;;"}
+{"version":3,"file":"Info.messages.js","sources":["../../src/info/Info.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n  ariaLabel: {\n    id: 'neptune.Info.ariaLabel',\n    defaultMessage: 'More information',\n  },\n});\n"],"names":["defineMessages","ariaLabel","id"],"mappings":";;;;;;AAEA,eAAeA,wBAAc,CAAC;AAC5BC,EAAAA,SAAS,EAAE;IACTC,EAAE,EAAA;AAEH;AACF,CAAA,CAAC;;;;"}

package/build/info/Info.messages.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Info.messages.mjs","sources":["../../src/info/Info.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n  ariaLabel: {\n    id: 'neptune.Info.ariaLabel',\n    defaultMessage: 'More information',\n  },\n});\n"],"names":["defineMessages","ariaLabel","id"],"mappings":";;AAEA,eAAeA,cAAc,CAAC;AAC5BC,EAAAA,SAAS,EAAE;IACTC,EAAE,EAAA,wBAAA;AAEH,GAAA;AACF,CAAA,CAAC;;;;"}
+{"version":3,"file":"Info.messages.mjs","sources":["../../src/info/Info.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n  ariaLabel: {\n    id: 'neptune.Info.ariaLabel',\n    defaultMessage: 'More information',\n  },\n});\n"],"names":["defineMessages","ariaLabel","id"],"mappings":";;AAEA,eAAeA,cAAc,CAAC;AAC5BC,EAAAA,SAAS,EAAE;IACTC,EAAE,EAAA;AAEH;AACF,CAAA,CAAC;;;;"}

package/build/info/Info.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Info.mjs","sources":["../../src/info/Info.tsx"],"sourcesContent":["import { QuestionMarkCircle as HelpCircleIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { Size, Position, SizeSmall, SizeLarge } from '../common';\nimport Modal from '../modal';\nimport Popover, { PopoverPreferredPlacement } from '../popover';\n\nimport messages from './Info.messages';\nimport { InfoPresentation } from './infoPresentations';\nimport IconButton, { IconButtonProps } from '../iconButton';\n\nexport interface InfoProps {\n  'aria-label'?: string;\n  /**\n   * Extra classes applied to Info\n   */\n  className?: string;\n  /**\n   * Content displayed inside a Popover a Modal\n   */\n  content?: React.ReactNode;\n  onClick?: () => void;\n  /**\n   * Decides whether to display content in a Popover or a Modal\n   */\n  presentation?: 'MODAL' | 'POPOVER';\n  /**\n   * Decides the size of help Icon\n   */\n  size?: SizeSmall | SizeLarge;\n  /**\n   * Title displayed inside a Popover a Modal\n   */\n  title?: React.ReactNode;\n  /**\n   * Prferred placement of the Popover, does not apply to Modal\n   */\n  preferredPlacement?: PopoverPreferredPlacement;\n}\n\nconst Info = ({\n  className = undefined,\n  content = undefined,\n  onClick = undefined,\n  presentation = InfoPresentation.POPOVER,\n  size = Size.SMALL,\n  title = undefined,\n  'aria-label': ariaLabel,\n  preferredPlacement = Position.BOTTOM,\n}: InfoProps) => {\n  const intl = useIntl();\n  const [open, setOpen] = useState(false);\n  ariaLabel ??= intl.formatMessage(messages.ariaLabel);\n  const isModal = presentation === InfoPresentation.MODAL;\n\n  const buttonProps: IconButtonProps = {\n    'aria-label': ariaLabel,\n    priority: 'minimal',\n    size: 24,\n    children: <HelpCircleIcon />,\n  };\n\n  return (\n    <span className={clsx(className, 'np-info')}>\n      {isModal ? (\n        <>\n          <IconButton\n            onClick={() => {\n              setOpen(!open);\n              if (onClick) {\n                onClick();\n              }\n            }}\n            {...buttonProps}\n          />\n          <Modal body={content} open={open} title={title} onClose={() => setOpen(false)} />\n        </>\n      ) : (\n        <Popover content={content} preferredPlacement={preferredPlacement} title={title}>\n          <IconButton\n            {...buttonProps}\n            onClick={() => {\n              if (onClick) {\n                onClick();\n              }\n            }}\n          />\n        </Popover>\n      )}\n    </span>\n  );\n};\n\nexport default Info;\n"],"names":["Info","className","undefined","content","onClick","presentation","InfoPresentation","POPOVER","size","Size","SMALL","title","ariaLabel","preferredPlacement","Position","BOTTOM","intl","useIntl","open","setOpen","useState","formatMessage","messages","isModal","MODAL","buttonProps","priority","children","_jsx","HelpCircleIcon","clsx","_jsxs","_Fragment","IconButton","Modal","body","onClose","Popover"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CMA,MAAAA,IAAI,GAAGA,CAAC;AACZC,EAAAA,SAAS,GAAGC,SAAS;AACrBC,EAAAA,OAAO,GAAGD,SAAS;AACnBE,EAAAA,OAAO,GAAGF,SAAS;EACnBG,YAAY,GAAGC,gBAAgB,CAACC,OAAO;EACvCC,IAAI,GAAGC,IAAI,CAACC,KAAK;AACjBC,EAAAA,KAAK,GAAGT,SAAS;AACjB,EAAA,YAAY,EAAEU,SAAS;EACvBC,kBAAkB,GAAGC,QAAQ,CAACC,MAAAA;AAAM,CAC1B,KAAI;AACd,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE,CAAA;EACtB,MAAM,CAACC,IAAI,EAAEC,OAAO,CAAC,GAAGC,QAAQ,CAAC,KAAK,CAAC,CAAA;EACvCR,SAAS,KAAKI,IAAI,CAACK,aAAa,CAACC,QAAQ,CAACV,SAAS,CAAC,CAAA;AACpD,EAAA,MAAMW,OAAO,GAAGlB,YAAY,KAAKC,gBAAgB,CAACkB,KAAK,CAAA;AAEvD,EAAA,MAAMC,WAAW,GAAoB;AACnC,IAAA,YAAY,EAAEb,SAAS;AACvBc,IAAAA,QAAQ,EAAE,SAAS;AACnBlB,IAAAA,IAAI,EAAE,EAAE;AACRmB,IAAAA,QAAQ,eAAEC,GAAA,CAACC,kBAAc,EAAG,EAAA,CAAA;GAC7B,CAAA;AAED,EAAA,oBACED,GAAA,CAAA,MAAA,EAAA;AAAM3B,IAAAA,SAAS,EAAE6B,IAAI,CAAC7B,SAAS,EAAE,SAAS,CAAE;AAAA0B,IAAAA,QAAA,EACzCJ,OAAO,gBACNQ,IAAA,CAAAC,QAAA,EAAA;MAAAL,QAAA,EAAA,cACEC,GAAA,CAACK,UAAU,EAAA;QACT7B,OAAO,EAAEA,MAAK;UACZe,OAAO,CAAC,CAACD,IAAI,CAAC,CAAA;AACd,UAAA,IAAId,OAAO,EAAE;AACXA,YAAAA,OAAO,EAAE,CAAA;AACX,WAAA;SACA;QAAA,GACEqB,WAAAA;AAAW,OAEjB,CAAA,eAAAG,GAAA,CAACM,KAAK,EAAA;AAACC,QAAAA,IAAI,EAAEhC,OAAQ;AAACe,QAAAA,IAAI,EAAEA,IAAK;AAACP,QAAAA,KAAK,EAAEA,KAAM;AAACyB,QAAAA,OAAO,EAAEA,MAAMjB,OAAO,CAAC,KAAK,CAAA;AAAE,OAChF,CAAA,CAAA;AAAA,KAAG,CAAA,gBAEHS,GAAA,CAACS,OAAO,EAAA;AAAClC,MAAAA,OAAO,EAAEA,OAAQ;AAACU,MAAAA,kBAAkB,EAAEA,kBAAmB;AAACF,MAAAA,KAAK,EAAEA,KAAM;MAAAgB,QAAA,eAC9EC,GAAA,CAACK,UAAU,EAAA;AAAA,QAAA,GACLR,WAAW;QACfrB,OAAO,EAAEA,MAAK;AACZ,UAAA,IAAIA,OAAO,EAAE;AACXA,YAAAA,OAAO,EAAE,CAAA;AACX,WAAA;AACF,SAAA;OAEJ,CAAA;KAAS,CAAA;AACV,GACG,CAAC,CAAA;AAEX;;;;"}
+{"version":3,"file":"Info.mjs","sources":["../../src/info/Info.tsx"],"sourcesContent":["import { QuestionMarkCircle as HelpCircleIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { Size, Position, SizeSmall, SizeLarge } from '../common';\nimport Modal from '../modal';\nimport Popover, { PopoverPreferredPlacement } from '../popover';\n\nimport messages from './Info.messages';\nimport { InfoPresentation } from './infoPresentations';\nimport IconButton, { IconButtonProps } from '../iconButton';\n\nexport interface InfoProps {\n  'aria-label'?: string;\n  /**\n   * Extra classes applied to Info\n   */\n  className?: string;\n  /**\n   * Content displayed inside a Popover a Modal\n   */\n  content?: React.ReactNode;\n  onClick?: () => void;\n  /**\n   * Decides whether to display content in a Popover or a Modal\n   */\n  presentation?: 'MODAL' | 'POPOVER';\n  /**\n   * Decides the size of help Icon\n   */\n  size?: SizeSmall | SizeLarge;\n  /**\n   * Title displayed inside a Popover a Modal\n   */\n  title?: React.ReactNode;\n  /**\n   * Prferred placement of the Popover, does not apply to Modal\n   */\n  preferredPlacement?: PopoverPreferredPlacement;\n}\n\nconst Info = ({\n  className = undefined,\n  content = undefined,\n  onClick = undefined,\n  presentation = InfoPresentation.POPOVER,\n  size = Size.SMALL,\n  title = undefined,\n  'aria-label': ariaLabel,\n  preferredPlacement = Position.BOTTOM,\n}: InfoProps) => {\n  const intl = useIntl();\n  const [open, setOpen] = useState(false);\n  ariaLabel ??= intl.formatMessage(messages.ariaLabel);\n  const isModal = presentation === InfoPresentation.MODAL;\n\n  const buttonProps: IconButtonProps = {\n    'aria-label': ariaLabel,\n    priority: 'minimal',\n    size: 24,\n    children: <HelpCircleIcon />,\n  };\n\n  return (\n    <span className={clsx(className, 'np-info')}>\n      {isModal ? (\n        <>\n          <IconButton\n            onClick={() => {\n              setOpen(!open);\n              if (onClick) {\n                onClick();\n              }\n            }}\n            {...buttonProps}\n          />\n          <Modal body={content} open={open} title={title} onClose={() => setOpen(false)} />\n        </>\n      ) : (\n        <Popover content={content} preferredPlacement={preferredPlacement} title={title}>\n          <IconButton\n            {...buttonProps}\n            onClick={() => {\n              if (onClick) {\n                onClick();\n              }\n            }}\n          />\n        </Popover>\n      )}\n    </span>\n  );\n};\n\nexport default Info;\n"],"names":["Info","className","undefined","content","onClick","presentation","InfoPresentation","POPOVER","size","Size","SMALL","title","ariaLabel","preferredPlacement","Position","BOTTOM","intl","useIntl","open","setOpen","useState","formatMessage","messages","isModal","MODAL","buttonProps","priority","children","_jsx","HelpCircleIcon","clsx","_jsxs","_Fragment","IconButton","Modal","body","onClose","Popover"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CMA,MAAAA,IAAI,GAAGA,CAAC;AACZC,EAAAA,SAAS,GAAGC,SAAS;AACrBC,EAAAA,OAAO,GAAGD,SAAS;AACnBE,EAAAA,OAAO,GAAGF,SAAS;EACnBG,YAAY,GAAGC,gBAAgB,CAACC,OAAO;EACvCC,IAAI,GAAGC,IAAI,CAACC,KAAK;AACjBC,EAAAA,KAAK,GAAGT,SAAS;AACjB,EAAA,YAAY,EAAEU,SAAS;EACvBC,kBAAkB,GAAGC,QAAQ,CAACC;AAAM,CAC1B,KAAI;AACd,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE;EACtB,MAAM,CAACC,IAAI,EAAEC,OAAO,CAAC,GAAGC,QAAQ,CAAC,KAAK,CAAC;EACvCR,SAAS,KAAKI,IAAI,CAACK,aAAa,CAACC,QAAQ,CAACV,SAAS,CAAC;AACpD,EAAA,MAAMW,OAAO,GAAGlB,YAAY,KAAKC,gBAAgB,CAACkB,KAAK;AAEvD,EAAA,MAAMC,WAAW,GAAoB;AACnC,IAAA,YAAY,EAAEb,SAAS;AACvBc,IAAAA,QAAQ,EAAE,SAAS;AACnBlB,IAAAA,IAAI,EAAE,EAAE;AACRmB,IAAAA,QAAQ,eAAEC,GAAA,CAACC,kBAAc,EAAG,EAAA;GAC7B;AAED,EAAA,oBACED,GAAA,CAAA,MAAA,EAAA;AAAM3B,IAAAA,SAAS,EAAE6B,IAAI,CAAC7B,SAAS,EAAE,SAAS,CAAE;AAAA0B,IAAAA,QAAA,EACzCJ,OAAO,gBACNQ,IAAA,CAAAC,QAAA,EAAA;MAAAL,QAAA,EAAA,cACEC,GAAA,CAACK,UAAU,EAAA;QACT7B,OAAO,EAAEA,MAAK;UACZe,OAAO,CAAC,CAACD,IAAI,CAAC;AACd,UAAA,IAAId,OAAO,EAAE;AACXA,YAAAA,OAAO,EAAE;AACX;SACA;QAAA,GACEqB;AAAW,OAEjB,CAAA,eAAAG,GAAA,CAACM,KAAK,EAAA;AAACC,QAAAA,IAAI,EAAEhC,OAAQ;AAACe,QAAAA,IAAI,EAAEA,IAAK;AAACP,QAAAA,KAAK,EAAEA,KAAM;AAACyB,QAAAA,OAAO,EAAEA,MAAMjB,OAAO,CAAC,KAAK;AAAE,OAChF,CAAA;AAAA,KAAG,CAAA,gBAEHS,GAAA,CAACS,OAAO,EAAA;AAAClC,MAAAA,OAAO,EAAEA,OAAQ;AAACU,MAAAA,kBAAkB,EAAEA,kBAAmB;AAACF,MAAAA,KAAK,EAAEA,KAAM;MAAAgB,QAAA,eAC9EC,GAAA,CAACK,UAAU,EAAA;AAAA,QAAA,GACLR,WAAW;QACfrB,OAAO,EAAEA,MAAK;AACZ,UAAA,IAAIA,OAAO,EAAE;AACXA,YAAAA,OAAO,EAAE;AACX;AACF;OAEJ;KAAS;AACV,GACG,CAAC;AAEX;;;;"}

package/build/info/infoPresentations.js.map

@@ -1 +1 @@
-{"version":3,"file":"infoPresentations.js","sources":["../../src/info/infoPresentations.ts"],"sourcesContent":["// TODO: consider to move this enum into component file once we migrate it on TypeScript or replace with some common enum\nexport enum InfoPresentation {\n  POPOVER = 'POPOVER',\n  MODAL = 'MODAL',\n}\n"],"names":["InfoPresentation"],"mappings":";;AAAA;AACYA,kCAGX;AAHD,CAAA,UAAYA,gBAAgB,EAAA;AAC1BA,EAAAA,gBAAA,CAAA,SAAA,CAAA,GAAA,SAAmB,CAAA;AACnBA,EAAAA,gBAAA,CAAA,OAAA,CAAA,GAAA,OAAe,CAAA;AACjB,CAAC,EAHWA,wBAAgB,KAAhBA,wBAAgB,GAG3B,EAAA,CAAA,CAAA;;"}
+{"version":3,"file":"infoPresentations.js","sources":["../../src/info/infoPresentations.ts"],"sourcesContent":["// TODO: consider to move this enum into component file once we migrate it on TypeScript or replace with some common enum\nexport enum InfoPresentation {\n  POPOVER = 'POPOVER',\n  MODAL = 'MODAL',\n}\n"],"names":["InfoPresentation"],"mappings":";;AAAA;AACYA;AAAZ,CAAA,UAAYA,gBAAgB,EAAA;AAC1BA,EAAAA,gBAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnBA,EAAAA,gBAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACjB,CAAC,EAHWA,wBAAgB,KAAhBA,wBAAgB,GAG3B,EAAA,CAAA,CAAA;;"}

package/build/info/infoPresentations.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"infoPresentations.mjs","sources":["../../src/info/infoPresentations.ts"],"sourcesContent":["// TODO: consider to move this enum into component file once we migrate it on TypeScript or replace with some common enum\nexport enum InfoPresentation {\n  POPOVER = 'POPOVER',\n  MODAL = 'MODAL',\n}\n"],"names":["InfoPresentation"],"mappings":"AAAA;IACYA,iBAGX;AAHD,CAAA,UAAYA,gBAAgB,EAAA;AAC1BA,EAAAA,gBAAA,CAAA,SAAA,CAAA,GAAA,SAAmB,CAAA;AACnBA,EAAAA,gBAAA,CAAA,OAAA,CAAA,GAAA,OAAe,CAAA;AACjB,CAAC,EAHWA,gBAAgB,KAAhBA,gBAAgB,GAG3B,EAAA,CAAA,CAAA;;;;"}
+{"version":3,"file":"infoPresentations.mjs","sources":["../../src/info/infoPresentations.ts"],"sourcesContent":["// TODO: consider to move this enum into component file once we migrate it on TypeScript or replace with some common enum\nexport enum InfoPresentation {\n  POPOVER = 'POPOVER',\n  MODAL = 'MODAL',\n}\n"],"names":["InfoPresentation"],"mappings":"AAAA;IACYA;AAAZ,CAAA,UAAYA,gBAAgB,EAAA;AAC1BA,EAAAA,gBAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnBA,EAAAA,gBAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACjB,CAAC,EAHWA,gBAAgB,KAAhBA,gBAAgB,GAG3B,EAAA,CAAA,CAAA;;;;"}

package/build/inlineAlert/InlineAlert.js.map

@@ -1 +1 @@
-{"version":3,"file":"InlineAlert.js","sources":["../../src/inlineAlert/InlineAlert.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ReactNode } from 'react';\n\nimport { Sentiment, Size } from '../common';\nimport StatusIcon from '../statusIcon';\nimport Body from '../body';\n\nexport interface InlineAlertProps {\n  id?: string;\n  type?: `${Sentiment}`;\n  iconLabel?: string;\n  className?: string;\n  children: ReactNode;\n}\n\nconst iconTypes = new Set<NonNullable<InlineAlertProps['type']>>([\n  Sentiment.NEGATIVE,\n  Sentiment.ERROR,\n  Sentiment.POSITIVE,\n  Sentiment.SUCCESS,\n  Sentiment.WARNING,\n]);\n\n/**\n * Avoid using `<InlineAlert>` component directly\n * it's for edge cases when `<Field />` isn't suitable for some reasons.\n *\n * Example:\n * ```\n * <Field sentiment={..} message={..}>..</Field>\n * ```\n */\nexport default function InlineAlert({\n  id,\n  type = 'neutral',\n  iconLabel,\n  className,\n  children,\n}: InlineAlertProps) {\n  return (\n    <Body\n      role=\"alert\"\n      id={id}\n      className={clsx(\n        'alert alert-detach',\n        `alert-${type === Sentiment.NEGATIVE || type === Sentiment.ERROR ? 'danger' : type}`,\n        'd-flex',\n        className,\n      )}\n    >\n      {iconTypes.has(type) && (\n        <StatusIcon sentiment={type} size={Size.SMALL} iconLabel={iconLabel} />\n      )}\n      <div>{children}</div>\n    </Body>\n  );\n}\n"],"names":["iconTypes","Set","Sentiment","NEGATIVE","ERROR","POSITIVE","SUCCESS","WARNING","InlineAlert","id","type","iconLabel","className","children","_jsxs","Body","role","clsx","has","_jsx","StatusIcon","sentiment","size","Size","SMALL"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeA,MAAMA,SAAS,GAAG,IAAIC,GAAG,CAAwC,CAC/DC,mBAAS,CAACC,QAAQ,EAClBD,mBAAS,CAACE,KAAK,EACfF,mBAAS,CAACG,QAAQ,EAClBH,mBAAS,CAACI,OAAO,EACjBJ,mBAAS,CAACK,OAAO,CAClB,CAAC,CAAA;AAEF;;;;;;;;AAQG;AACW,SAAUC,WAAWA,CAAC;EAClCC,EAAE;AACFC,EAAAA,IAAI,GAAG,SAAS;EAChBC,SAAS;EACTC,SAAS;AACTC,EAAAA,QAAAA;AACiB,CAAA,EAAA;EACjB,oBACEC,eAAA,CAACC,YAAI,EAAA;AACHC,IAAAA,IAAI,EAAC,OAAO;AACZP,IAAAA,EAAE,EAAEA,EAAG;IACPG,SAAS,EAAEK,SAAI,CACb,oBAAoB,EACpB,CAASP,MAAAA,EAAAA,IAAI,KAAKR,mBAAS,CAACC,QAAQ,IAAIO,IAAI,KAAKR,mBAAS,CAACE,KAAK,GAAG,QAAQ,GAAGM,IAAI,CAAA,CAAE,EACpF,QAAQ,EACRE,SAAS,CACT;IAAAC,QAAA,EAAA,CAEDb,SAAS,CAACkB,GAAG,CAACR,IAAI,CAAC,iBAClBS,cAAA,CAACC,kBAAU,EAAA;AAACC,MAAAA,SAAS,EAAEX,IAAK;MAACY,IAAI,EAAEC,SAAI,CAACC,KAAM;AAACb,MAAAA,SAAS,EAAEA,SAAAA;KAAU,CACrE,eACDQ,cAAA,CAAA,KAAA,EAAA;AAAAN,MAAAA,QAAA,EAAMA,QAAAA;AAAQ,KAAM,CACtB,CAAA;AAAA,GAAM,CAAC,CAAA;AAEX;;;;"}
+{"version":3,"file":"InlineAlert.js","sources":["../../src/inlineAlert/InlineAlert.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ReactNode } from 'react';\n\nimport { Sentiment, Size } from '../common';\nimport StatusIcon from '../statusIcon';\nimport Body from '../body';\n\nexport interface InlineAlertProps {\n  id?: string;\n  type?: `${Sentiment}`;\n  iconLabel?: string;\n  className?: string;\n  children: ReactNode;\n}\n\nconst iconTypes = new Set<NonNullable<InlineAlertProps['type']>>([\n  Sentiment.NEGATIVE,\n  Sentiment.ERROR,\n  Sentiment.POSITIVE,\n  Sentiment.SUCCESS,\n  Sentiment.WARNING,\n]);\n\n/**\n * Avoid using `<InlineAlert>` component directly\n * it's for edge cases when `<Field />` isn't suitable for some reasons.\n *\n * Example:\n * ```\n * <Field sentiment={..} message={..}>..</Field>\n * ```\n */\nexport default function InlineAlert({\n  id,\n  type = 'neutral',\n  iconLabel,\n  className,\n  children,\n}: InlineAlertProps) {\n  return (\n    <Body\n      role=\"alert\"\n      id={id}\n      className={clsx(\n        'alert alert-detach',\n        `alert-${type === Sentiment.NEGATIVE || type === Sentiment.ERROR ? 'danger' : type}`,\n        'd-flex',\n        className,\n      )}\n    >\n      {iconTypes.has(type) && (\n        <StatusIcon sentiment={type} size={Size.SMALL} iconLabel={iconLabel} />\n      )}\n      <div>{children}</div>\n    </Body>\n  );\n}\n"],"names":["iconTypes","Set","Sentiment","NEGATIVE","ERROR","POSITIVE","SUCCESS","WARNING","InlineAlert","id","type","iconLabel","className","children","_jsxs","Body","role","clsx","has","_jsx","StatusIcon","sentiment","size","Size","SMALL"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeA,MAAMA,SAAS,GAAG,IAAIC,GAAG,CAAwC,CAC/DC,mBAAS,CAACC,QAAQ,EAClBD,mBAAS,CAACE,KAAK,EACfF,mBAAS,CAACG,QAAQ,EAClBH,mBAAS,CAACI,OAAO,EACjBJ,mBAAS,CAACK,OAAO,CAClB,CAAC;AAEF;;;;;;;;AAQG;AACW,SAAUC,WAAWA,CAAC;EAClCC,EAAE;AACFC,EAAAA,IAAI,GAAG,SAAS;EAChBC,SAAS;EACTC,SAAS;AACTC,EAAAA;AACiB,CAAA,EAAA;EACjB,oBACEC,eAAA,CAACC,YAAI,EAAA;AACHC,IAAAA,IAAI,EAAC,OAAO;AACZP,IAAAA,EAAE,EAAEA,EAAG;IACPG,SAAS,EAAEK,SAAI,CACb,oBAAoB,EACpB,CAASP,MAAAA,EAAAA,IAAI,KAAKR,mBAAS,CAACC,QAAQ,IAAIO,IAAI,KAAKR,mBAAS,CAACE,KAAK,GAAG,QAAQ,GAAGM,IAAI,CAAA,CAAE,EACpF,QAAQ,EACRE,SAAS,CACT;IAAAC,QAAA,EAAA,CAEDb,SAAS,CAACkB,GAAG,CAACR,IAAI,CAAC,iBAClBS,cAAA,CAACC,kBAAU,EAAA;AAACC,MAAAA,SAAS,EAAEX,IAAK;MAACY,IAAI,EAAEC,SAAI,CAACC,KAAM;AAACb,MAAAA,SAAS,EAAEA;KAAU,CACrE,eACDQ,cAAA,CAAA,KAAA,EAAA;AAAAN,MAAAA,QAAA,EAAMA;AAAQ,KAAM,CACtB;AAAA,GAAM,CAAC;AAEX;;;;"}

package/build/inlineAlert/InlineAlert.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"InlineAlert.mjs","sources":["../../src/inlineAlert/InlineAlert.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ReactNode } from 'react';\n\nimport { Sentiment, Size } from '../common';\nimport StatusIcon from '../statusIcon';\nimport Body from '../body';\n\nexport interface InlineAlertProps {\n  id?: string;\n  type?: `${Sentiment}`;\n  iconLabel?: string;\n  className?: string;\n  children: ReactNode;\n}\n\nconst iconTypes = new Set<NonNullable<InlineAlertProps['type']>>([\n  Sentiment.NEGATIVE,\n  Sentiment.ERROR,\n  Sentiment.POSITIVE,\n  Sentiment.SUCCESS,\n  Sentiment.WARNING,\n]);\n\n/**\n * Avoid using `<InlineAlert>` component directly\n * it's for edge cases when `<Field />` isn't suitable for some reasons.\n *\n * Example:\n * ```\n * <Field sentiment={..} message={..}>..</Field>\n * ```\n */\nexport default function InlineAlert({\n  id,\n  type = 'neutral',\n  iconLabel,\n  className,\n  children,\n}: InlineAlertProps) {\n  return (\n    <Body\n      role=\"alert\"\n      id={id}\n      className={clsx(\n        'alert alert-detach',\n        `alert-${type === Sentiment.NEGATIVE || type === Sentiment.ERROR ? 'danger' : type}`,\n        'd-flex',\n        className,\n      )}\n    >\n      {iconTypes.has(type) && (\n        <StatusIcon sentiment={type} size={Size.SMALL} iconLabel={iconLabel} />\n      )}\n      <div>{children}</div>\n    </Body>\n  );\n}\n"],"names":["iconTypes","Set","Sentiment","NEGATIVE","ERROR","POSITIVE","SUCCESS","WARNING","InlineAlert","id","type","iconLabel","className","children","_jsxs","Body","role","clsx","has","_jsx","StatusIcon","sentiment","size","Size","SMALL"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeA,MAAMA,SAAS,GAAG,IAAIC,GAAG,CAAwC,CAC/DC,SAAS,CAACC,QAAQ,EAClBD,SAAS,CAACE,KAAK,EACfF,SAAS,CAACG,QAAQ,EAClBH,SAAS,CAACI,OAAO,EACjBJ,SAAS,CAACK,OAAO,CAClB,CAAC,CAAA;AAEF;;;;;;;;AAQG;AACW,SAAUC,WAAWA,CAAC;EAClCC,EAAE;AACFC,EAAAA,IAAI,GAAG,SAAS;EAChBC,SAAS;EACTC,SAAS;AACTC,EAAAA,QAAAA;AACiB,CAAA,EAAA;EACjB,oBACEC,IAAA,CAACC,IAAI,EAAA;AACHC,IAAAA,IAAI,EAAC,OAAO;AACZP,IAAAA,EAAE,EAAEA,EAAG;IACPG,SAAS,EAAEK,IAAI,CACb,oBAAoB,EACpB,CAASP,MAAAA,EAAAA,IAAI,KAAKR,SAAS,CAACC,QAAQ,IAAIO,IAAI,KAAKR,SAAS,CAACE,KAAK,GAAG,QAAQ,GAAGM,IAAI,CAAA,CAAE,EACpF,QAAQ,EACRE,SAAS,CACT;IAAAC,QAAA,EAAA,CAEDb,SAAS,CAACkB,GAAG,CAACR,IAAI,CAAC,iBAClBS,GAAA,CAACC,UAAU,EAAA;AAACC,MAAAA,SAAS,EAAEX,IAAK;MAACY,IAAI,EAAEC,IAAI,CAACC,KAAM;AAACb,MAAAA,SAAS,EAAEA,SAAAA;KAAU,CACrE,eACDQ,GAAA,CAAA,KAAA,EAAA;AAAAN,MAAAA,QAAA,EAAMA,QAAAA;AAAQ,KAAM,CACtB,CAAA;AAAA,GAAM,CAAC,CAAA;AAEX;;;;"}
+{"version":3,"file":"InlineAlert.mjs","sources":["../../src/inlineAlert/InlineAlert.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ReactNode } from 'react';\n\nimport { Sentiment, Size } from '../common';\nimport StatusIcon from '../statusIcon';\nimport Body from '../body';\n\nexport interface InlineAlertProps {\n  id?: string;\n  type?: `${Sentiment}`;\n  iconLabel?: string;\n  className?: string;\n  children: ReactNode;\n}\n\nconst iconTypes = new Set<NonNullable<InlineAlertProps['type']>>([\n  Sentiment.NEGATIVE,\n  Sentiment.ERROR,\n  Sentiment.POSITIVE,\n  Sentiment.SUCCESS,\n  Sentiment.WARNING,\n]);\n\n/**\n * Avoid using `<InlineAlert>` component directly\n * it's for edge cases when `<Field />` isn't suitable for some reasons.\n *\n * Example:\n * ```\n * <Field sentiment={..} message={..}>..</Field>\n * ```\n */\nexport default function InlineAlert({\n  id,\n  type = 'neutral',\n  iconLabel,\n  className,\n  children,\n}: InlineAlertProps) {\n  return (\n    <Body\n      role=\"alert\"\n      id={id}\n      className={clsx(\n        'alert alert-detach',\n        `alert-${type === Sentiment.NEGATIVE || type === Sentiment.ERROR ? 'danger' : type}`,\n        'd-flex',\n        className,\n      )}\n    >\n      {iconTypes.has(type) && (\n        <StatusIcon sentiment={type} size={Size.SMALL} iconLabel={iconLabel} />\n      )}\n      <div>{children}</div>\n    </Body>\n  );\n}\n"],"names":["iconTypes","Set","Sentiment","NEGATIVE","ERROR","POSITIVE","SUCCESS","WARNING","InlineAlert","id","type","iconLabel","className","children","_jsxs","Body","role","clsx","has","_jsx","StatusIcon","sentiment","size","Size","SMALL"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeA,MAAMA,SAAS,GAAG,IAAIC,GAAG,CAAwC,CAC/DC,SAAS,CAACC,QAAQ,EAClBD,SAAS,CAACE,KAAK,EACfF,SAAS,CAACG,QAAQ,EAClBH,SAAS,CAACI,OAAO,EACjBJ,SAAS,CAACK,OAAO,CAClB,CAAC;AAEF;;;;;;;;AAQG;AACW,SAAUC,WAAWA,CAAC;EAClCC,EAAE;AACFC,EAAAA,IAAI,GAAG,SAAS;EAChBC,SAAS;EACTC,SAAS;AACTC,EAAAA;AACiB,CAAA,EAAA;EACjB,oBACEC,IAAA,CAACC,IAAI,EAAA;AACHC,IAAAA,IAAI,EAAC,OAAO;AACZP,IAAAA,EAAE,EAAEA,EAAG;IACPG,SAAS,EAAEK,IAAI,CACb,oBAAoB,EACpB,CAASP,MAAAA,EAAAA,IAAI,KAAKR,SAAS,CAACC,QAAQ,IAAIO,IAAI,KAAKR,SAAS,CAACE,KAAK,GAAG,QAAQ,GAAGM,IAAI,CAAA,CAAE,EACpF,QAAQ,EACRE,SAAS,CACT;IAAAC,QAAA,EAAA,CAEDb,SAAS,CAACkB,GAAG,CAACR,IAAI,CAAC,iBAClBS,GAAA,CAACC,UAAU,EAAA;AAACC,MAAAA,SAAS,EAAEX,IAAK;MAACY,IAAI,EAAEC,IAAI,CAACC,KAAM;AAACb,MAAAA,SAAS,EAAEA;KAAU,CACrE,eACDQ,GAAA,CAAA,KAAA,EAAA;AAAAN,MAAAA,QAAA,EAAMA;AAAQ,KAAM,CACtB;AAAA,GAAM,CAAC;AAEX;;;;"}

package/build/inputWithDisplayFormat/InputWithDisplayFormat.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputWithDisplayFormat.js","sources":["../../src/inputWithDisplayFormat/InputWithDisplayFormat.tsx"],"sourcesContent":["import { Input, type InputProps } from '../inputs/Input';\nimport WithDisplayFormat, { type WithDisplayFormatProps } from '../withDisplayFormat';\n\nexport interface InputWithDisplayFormatProps extends Omit<WithDisplayFormatProps, 'render'> {}\n\nconst InputWithDisplayFormat = (props: InputWithDisplayFormatProps) => (\n  <WithDisplayFormat<InputProps> {...props} render={(renderProps) => <Input {...renderProps} />} />\n);\n\nexport default InputWithDisplayFormat;\n"],"names":["InputWithDisplayFormat","props","_jsx","WithDisplayFormat","render","renderProps","Input"],"mappings":";;;;;;;;AAKA,MAAMA,sBAAsB,GAAIC,KAAkC,iBAChEC,cAAA,CAACC,yBAAiB,EAAA;AAAA,EAAA,GAAiBF,KAAK;AAAEG,EAAAA,MAAM,EAAGC,WAAW,iBAAKH,cAAA,CAACI,WAAK,EAAA;IAAA,GAAKD,WAAAA;GAAY,CAAA;AAAI,CAAA;;;;"}
+{"version":3,"file":"InputWithDisplayFormat.js","sources":["../../src/inputWithDisplayFormat/InputWithDisplayFormat.tsx"],"sourcesContent":["import { Input, type InputProps } from '../inputs/Input';\nimport WithDisplayFormat, { type WithDisplayFormatProps } from '../withDisplayFormat';\n\nexport interface InputWithDisplayFormatProps extends Omit<WithDisplayFormatProps, 'render'> {}\n\nconst InputWithDisplayFormat = (props: InputWithDisplayFormatProps) => (\n  <WithDisplayFormat<InputProps> {...props} render={(renderProps) => <Input {...renderProps} />} />\n);\n\nexport default InputWithDisplayFormat;\n"],"names":["InputWithDisplayFormat","props","_jsx","WithDisplayFormat","render","renderProps","Input"],"mappings":";;;;;;;;AAKA,MAAMA,sBAAsB,GAAIC,KAAkC,iBAChEC,cAAA,CAACC,yBAAiB,EAAA;AAAA,EAAA,GAAiBF,KAAK;AAAEG,EAAAA,MAAM,EAAGC,WAAW,iBAAKH,cAAA,CAACI,WAAK,EAAA;IAAA,GAAKD;GAAY;AAAI,CAAA;;;;"}

package/build/inputWithDisplayFormat/InputWithDisplayFormat.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"InputWithDisplayFormat.mjs","sources":["../../src/inputWithDisplayFormat/InputWithDisplayFormat.tsx"],"sourcesContent":["import { Input, type InputProps } from '../inputs/Input';\nimport WithDisplayFormat, { type WithDisplayFormatProps } from '../withDisplayFormat';\n\nexport interface InputWithDisplayFormatProps extends Omit<WithDisplayFormatProps, 'render'> {}\n\nconst InputWithDisplayFormat = (props: InputWithDisplayFormatProps) => (\n  <WithDisplayFormat<InputProps> {...props} render={(renderProps) => <Input {...renderProps} />} />\n);\n\nexport default InputWithDisplayFormat;\n"],"names":["InputWithDisplayFormat","props","_jsx","WithDisplayFormat","render","renderProps","Input"],"mappings":";;;;AAKA,MAAMA,sBAAsB,GAAIC,KAAkC,iBAChEC,GAAA,CAACC,iBAAiB,EAAA;AAAA,EAAA,GAAiBF,KAAK;AAAEG,EAAAA,MAAM,EAAGC,WAAW,iBAAKH,GAAA,CAACI,KAAK,EAAA;IAAA,GAAKD,WAAAA;GAAY,CAAA;AAAI,CAAA;;;;"}
+{"version":3,"file":"InputWithDisplayFormat.mjs","sources":["../../src/inputWithDisplayFormat/InputWithDisplayFormat.tsx"],"sourcesContent":["import { Input, type InputProps } from '../inputs/Input';\nimport WithDisplayFormat, { type WithDisplayFormatProps } from '../withDisplayFormat';\n\nexport interface InputWithDisplayFormatProps extends Omit<WithDisplayFormatProps, 'render'> {}\n\nconst InputWithDisplayFormat = (props: InputWithDisplayFormatProps) => (\n  <WithDisplayFormat<InputProps> {...props} render={(renderProps) => <Input {...renderProps} />} />\n);\n\nexport default InputWithDisplayFormat;\n"],"names":["InputWithDisplayFormat","props","_jsx","WithDisplayFormat","render","renderProps","Input"],"mappings":";;;;AAKA,MAAMA,sBAAsB,GAAIC,KAAkC,iBAChEC,GAAA,CAACC,iBAAiB,EAAA;AAAA,EAAA,GAAiBF,KAAK;AAAEG,EAAAA,MAAM,EAAGC,WAAW,iBAAKH,GAAA,CAACI,KAAK,EAAA;IAAA,GAAKD;GAAY;AAAI,CAAA;;;;"}

package/build/inputs/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":["../../src/inputs/Input.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport { SizeLarge, SizeMedium, SizeSmall } from '../common';\nimport { Merge } from '../utils';\nimport { inputClassNameBase } from './_common';\nimport { useInputAttributes } from './contexts';\nimport { useInputPaddings } from './InputGroup';\n\nexport interface InputProps\n  extends Merge<\n    React.ComponentPropsWithRef<'input'>,\n    {\n      size?: 'auto' | SizeSmall | SizeMedium | SizeLarge;\n      shape?: 'rectangle' | 'pill';\n      'aria-invalid'?: boolean;\n    }\n  > {}\n\nexport const Input = forwardRef(function Input(\n  { size = 'auto', shape = 'rectangle', className, ...restProps }: InputProps,\n  reference: React.ForwardedRef<HTMLInputElement | null>,\n) {\n  const inputAttributes = useInputAttributes();\n  const inputPaddings = useInputPaddings();\n\n  return (\n    <input\n      ref={reference}\n      className={clsx(className, inputClassNameBase({ size }), 'np-input', {\n        'np-input--shape-rectangle': shape === 'rectangle',\n        'np-input--shape-pill': shape === 'pill',\n      })}\n      style={inputPaddings}\n      {...inputAttributes}\n      {...restProps}\n    />\n  );\n});\n"],"names":["Input","forwardRef","size","shape","className","restProps","reference","inputAttributes","useInputAttributes","inputPaddings","useInputPaddings","_jsx","ref","clsx","inputClassNameBase","style"],"mappings":";;;;;;;;;MAmBaA,KAAK,gBAAGC,gBAAU,CAAC,SAASD,KAAKA,CAC5C;AAAEE,EAAAA,IAAI,GAAG,MAAM;AAAEC,EAAAA,KAAK,GAAG,WAAW;EAAEC,SAAS;EAAE,GAAGC,SAAAA;AAAuB,CAAA,EAC3EC,SAAsD,EAAA;AAEtD,EAAA,MAAMC,eAAe,GAAGC,2BAAkB,EAAE,CAAA;AAC5C,EAAA,MAAMC,aAAa,GAAGC,2BAAgB,EAAE,CAAA;AAExC,EAAA,oBACEC,cAAA,CAAA,OAAA,EAAA;AACEC,IAAAA,GAAG,EAAEN,SAAU;AACfF,IAAAA,SAAS,EAAES,SAAI,CAACT,SAAS,EAAEU,0BAAkB,CAAC;AAAEZ,MAAAA,IAAAA;KAAM,CAAC,EAAE,UAAU,EAAE;MACnE,2BAA2B,EAAEC,KAAK,KAAK,WAAW;MAClD,sBAAsB,EAAEA,KAAK,KAAK,MAAA;AACnC,KAAA,CAAE;AACHY,IAAAA,KAAK,EAAEN,aAAc;AAAA,IAAA,GACjBF,eAAe;IAAA,GACfF,SAAAA;AAAS,GAAC,CACd,CAAA;AAEN,CAAC;;;;"}
+{"version":3,"file":"Input.js","sources":["../../src/inputs/Input.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport { SizeLarge, SizeMedium, SizeSmall } from '../common';\nimport { Merge } from '../utils';\nimport { inputClassNameBase } from './_common';\nimport { useInputAttributes } from './contexts';\nimport { useInputPaddings } from './InputGroup';\n\nexport interface InputProps\n  extends Merge<\n    React.ComponentPropsWithRef<'input'>,\n    {\n      size?: 'auto' | SizeSmall | SizeMedium | SizeLarge;\n      shape?: 'rectangle' | 'pill';\n      'aria-invalid'?: boolean;\n    }\n  > {}\n\nexport const Input = forwardRef(function Input(\n  { size = 'auto', shape = 'rectangle', className, ...restProps }: InputProps,\n  reference: React.ForwardedRef<HTMLInputElement | null>,\n) {\n  const inputAttributes = useInputAttributes();\n  const inputPaddings = useInputPaddings();\n\n  return (\n    <input\n      ref={reference}\n      className={clsx(className, inputClassNameBase({ size }), 'np-input', {\n        'np-input--shape-rectangle': shape === 'rectangle',\n        'np-input--shape-pill': shape === 'pill',\n      })}\n      style={inputPaddings}\n      {...inputAttributes}\n      {...restProps}\n    />\n  );\n});\n"],"names":["Input","forwardRef","size","shape","className","restProps","reference","inputAttributes","useInputAttributes","inputPaddings","useInputPaddings","_jsx","ref","clsx","inputClassNameBase","style"],"mappings":";;;;;;;;;MAmBaA,KAAK,gBAAGC,gBAAU,CAAC,SAASD,KAAKA,CAC5C;AAAEE,EAAAA,IAAI,GAAG,MAAM;AAAEC,EAAAA,KAAK,GAAG,WAAW;EAAEC,SAAS;EAAE,GAAGC;AAAuB,CAAA,EAC3EC,SAAsD,EAAA;AAEtD,EAAA,MAAMC,eAAe,GAAGC,2BAAkB,EAAE;AAC5C,EAAA,MAAMC,aAAa,GAAGC,2BAAgB,EAAE;AAExC,EAAA,oBACEC,cAAA,CAAA,OAAA,EAAA;AACEC,IAAAA,GAAG,EAAEN,SAAU;AACfF,IAAAA,SAAS,EAAES,SAAI,CAACT,SAAS,EAAEU,0BAAkB,CAAC;AAAEZ,MAAAA;KAAM,CAAC,EAAE,UAAU,EAAE;MACnE,2BAA2B,EAAEC,KAAK,KAAK,WAAW;MAClD,sBAAsB,EAAEA,KAAK,KAAK;AACnC,KAAA,CAAE;AACHY,IAAAA,KAAK,EAAEN,aAAc;AAAA,IAAA,GACjBF,eAAe;IAAA,GACfF;AAAS,GAAC,CACd;AAEN,CAAC;;;;"}

package/build/inputs/Input.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Input.mjs","sources":["../../src/inputs/Input.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport { SizeLarge, SizeMedium, SizeSmall } from '../common';\nimport { Merge } from '../utils';\nimport { inputClassNameBase } from './_common';\nimport { useInputAttributes } from './contexts';\nimport { useInputPaddings } from './InputGroup';\n\nexport interface InputProps\n  extends Merge<\n    React.ComponentPropsWithRef<'input'>,\n    {\n      size?: 'auto' | SizeSmall | SizeMedium | SizeLarge;\n      shape?: 'rectangle' | 'pill';\n      'aria-invalid'?: boolean;\n    }\n  > {}\n\nexport const Input = forwardRef(function Input(\n  { size = 'auto', shape = 'rectangle', className, ...restProps }: InputProps,\n  reference: React.ForwardedRef<HTMLInputElement | null>,\n) {\n  const inputAttributes = useInputAttributes();\n  const inputPaddings = useInputPaddings();\n\n  return (\n    <input\n      ref={reference}\n      className={clsx(className, inputClassNameBase({ size }), 'np-input', {\n        'np-input--shape-rectangle': shape === 'rectangle',\n        'np-input--shape-pill': shape === 'pill',\n      })}\n      style={inputPaddings}\n      {...inputAttributes}\n      {...restProps}\n    />\n  );\n});\n"],"names":["Input","forwardRef","size","shape","className","restProps","reference","inputAttributes","useInputAttributes","inputPaddings","useInputPaddings","_jsx","ref","clsx","inputClassNameBase","style"],"mappings":";;;;;;;MAmBaA,KAAK,gBAAGC,UAAU,CAAC,SAASD,KAAKA,CAC5C;AAAEE,EAAAA,IAAI,GAAG,MAAM;AAAEC,EAAAA,KAAK,GAAG,WAAW;EAAEC,SAAS;EAAE,GAAGC,SAAAA;AAAuB,CAAA,EAC3EC,SAAsD,EAAA;AAEtD,EAAA,MAAMC,eAAe,GAAGC,kBAAkB,EAAE,CAAA;AAC5C,EAAA,MAAMC,aAAa,GAAGC,gBAAgB,EAAE,CAAA;AAExC,EAAA,oBACEC,GAAA,CAAA,OAAA,EAAA;AACEC,IAAAA,GAAG,EAAEN,SAAU;AACfF,IAAAA,SAAS,EAAES,IAAI,CAACT,SAAS,EAAEU,kBAAkB,CAAC;AAAEZ,MAAAA,IAAAA;KAAM,CAAC,EAAE,UAAU,EAAE;MACnE,2BAA2B,EAAEC,KAAK,KAAK,WAAW;MAClD,sBAAsB,EAAEA,KAAK,KAAK,MAAA;AACnC,KAAA,CAAE;AACHY,IAAAA,KAAK,EAAEN,aAAc;AAAA,IAAA,GACjBF,eAAe;IAAA,GACfF,SAAAA;AAAS,GAAC,CACd,CAAA;AAEN,CAAC;;;;"}
+{"version":3,"file":"Input.mjs","sources":["../../src/inputs/Input.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport { SizeLarge, SizeMedium, SizeSmall } from '../common';\nimport { Merge } from '../utils';\nimport { inputClassNameBase } from './_common';\nimport { useInputAttributes } from './contexts';\nimport { useInputPaddings } from './InputGroup';\n\nexport interface InputProps\n  extends Merge<\n    React.ComponentPropsWithRef<'input'>,\n    {\n      size?: 'auto' | SizeSmall | SizeMedium | SizeLarge;\n      shape?: 'rectangle' | 'pill';\n      'aria-invalid'?: boolean;\n    }\n  > {}\n\nexport const Input = forwardRef(function Input(\n  { size = 'auto', shape = 'rectangle', className, ...restProps }: InputProps,\n  reference: React.ForwardedRef<HTMLInputElement | null>,\n) {\n  const inputAttributes = useInputAttributes();\n  const inputPaddings = useInputPaddings();\n\n  return (\n    <input\n      ref={reference}\n      className={clsx(className, inputClassNameBase({ size }), 'np-input', {\n        'np-input--shape-rectangle': shape === 'rectangle',\n        'np-input--shape-pill': shape === 'pill',\n      })}\n      style={inputPaddings}\n      {...inputAttributes}\n      {...restProps}\n    />\n  );\n});\n"],"names":["Input","forwardRef","size","shape","className","restProps","reference","inputAttributes","useInputAttributes","inputPaddings","useInputPaddings","_jsx","ref","clsx","inputClassNameBase","style"],"mappings":";;;;;;;MAmBaA,KAAK,gBAAGC,UAAU,CAAC,SAASD,KAAKA,CAC5C;AAAEE,EAAAA,IAAI,GAAG,MAAM;AAAEC,EAAAA,KAAK,GAAG,WAAW;EAAEC,SAAS;EAAE,GAAGC;AAAuB,CAAA,EAC3EC,SAAsD,EAAA;AAEtD,EAAA,MAAMC,eAAe,GAAGC,kBAAkB,EAAE;AAC5C,EAAA,MAAMC,aAAa,GAAGC,gBAAgB,EAAE;AAExC,EAAA,oBACEC,GAAA,CAAA,OAAA,EAAA;AACEC,IAAAA,GAAG,EAAEN,SAAU;AACfF,IAAAA,SAAS,EAAES,IAAI,CAACT,SAAS,EAAEU,kBAAkB,CAAC;AAAEZ,MAAAA;KAAM,CAAC,EAAE,UAAU,EAAE;MACnE,2BAA2B,EAAEC,KAAK,KAAK,WAAW;MAClD,sBAAsB,EAAEA,KAAK,KAAK;AACnC,KAAA,CAAE;AACHY,IAAAA,KAAK,EAAEN,aAAc;AAAA,IAAA,GACjBF,eAAe;IAAA,GACfF;AAAS,GAAC,CACd;AAEN,CAAC;;;;"}

package/build/inputs/InputGroup.js

@@ -74,33 +74,29 @@ function InputAddon({
       setInputPadding(entry.contentRect.width + Number.parseFloat(targetStyle.paddingInlineStart) + Number.parseFloat(targetStyle.paddingInlineEnd));
     }
   });
-  return (
-    /*#__PURE__*/
-    /* Prevent nested controls from being labeled redundantly */
-    jsxRuntime.jsx(contexts.FieldLabelIdContextProvider, {
+  return /*#__PURE__*/ /* Prevent nested controls from being labeled redundantly */jsxRuntime.jsx(contexts.FieldLabelIdContextProvider, {
+    value: undefined,
+    children: /*#__PURE__*/jsxRuntime.jsx(contexts.InputIdContextProvider, {
       value: undefined,
-      children: /*#__PURE__*/jsxRuntime.jsx(contexts.InputIdContextProvider, {
+      children: /*#__PURE__*/jsxRuntime.jsx(contexts.InputDescribedByProvider, {
         value: undefined,
-        children: /*#__PURE__*/jsxRuntime.jsx(contexts.InputDescribedByProvider, {
+        children: /*#__PURE__*/jsxRuntime.jsx(contexts.InputInvalidProvider, {
           value: undefined,
-          children: /*#__PURE__*/jsxRuntime.jsx(contexts.InputInvalidProvider, {
-            value: undefined,
-            children: /*#__PURE__*/jsxRuntime.jsx("span", {
-              ref: ref,
-              className: clsx.clsx('np-input-addon', {
-                'np-input-addon--placement-start': placement === 'start',
-                'np-input-addon--placement-end': placement === 'end'
-              }, interactive && 'np-input-addon--interactive', {
-                'np-input-addon--padding-sm': padding === 'sm',
-                'np-input-addon--padding-md': padding === 'md'
-              }),
-              children: content
-            })
+          children: /*#__PURE__*/jsxRuntime.jsx("span", {
+            ref: ref,
+            className: clsx.clsx('np-input-addon', {
+              'np-input-addon--placement-start': placement === 'start',
+              'np-input-addon--placement-end': placement === 'end'
+            }, interactive && 'np-input-addon--interactive', {
+              'np-input-addon--padding-sm': padding === 'sm',
+              'np-input-addon--padding-md': padding === 'md'
+            }),
+            children: content
           })
         })
       })
     })
-  );
+  });
 }
 
 exports.InputGroup = InputGroup;

package/build/inputs/InputGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputGroup.js","sources":["../../src/inputs/InputGroup.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { createContext, useContext, useMemo, useRef, useState } from 'react';\n\nimport { useResizeObserver } from '../common/hooks/useResizeObserver';\nimport { cssValueWithUnit } from '../utilities/cssValueWithUnit';\nimport {\n  FieldLabelIdContextProvider,\n  InputDescribedByProvider,\n  InputIdContextProvider,\n  InputInvalidProvider,\n  useInputAttributes,\n} from './contexts';\n\ntype InputPaddingContextType = [\n  number | string | undefined,\n  React.Dispatch<React.SetStateAction<number | string | undefined>>,\n];\n\nconst InputPaddingStartContext = createContext<InputPaddingContextType>([undefined, () => {}]);\n\nconst InputPaddingEndContext = createContext<InputPaddingContextType>([undefined, () => {}]);\n\nexport function useInputPaddings() {\n  const [paddingStart] = useContext(InputPaddingStartContext);\n  const [paddingEnd] = useContext(InputPaddingEndContext);\n\n  return {\n    paddingInlineStart: paddingStart,\n    paddingInlineEnd: paddingEnd,\n  } satisfies React.CSSProperties;\n}\n\ninterface InputGroupAddon {\n  content: React.ReactNode;\n  initialContentWidth?: number | string;\n  interactive?: boolean;\n  padding?: 'none' | 'sm' | 'md';\n}\n\nexport interface InputGroupProps {\n  addonStart?: InputGroupAddon;\n  addonEnd?: InputGroupAddon;\n  disabled?: boolean;\n  className?: string;\n  children?: React.ReactNode;\n}\n\nfunction inputPaddingInitialState({\n  initialContentWidth,\n  padding = inputAddonDefaultPadding,\n}: Pick<\n  InputGroupAddon,\n  'initialContentWidth' | 'padding'\n> = {}): () => InputPaddingContextType[0] {\n  return () =>\n    initialContentWidth != null\n      ? `calc(${cssValueWithUnit(initialContentWidth)} + ${cssValueWithUnit(\n          inputAddonContentWidthAddendByPadding[padding],\n        )})`\n      : undefined;\n}\n\nexport function InputGroup({\n  addonStart,\n  addonEnd,\n  disabled,\n  className,\n  children,\n}: InputGroupProps) {\n  const [paddingStart, setPaddingStart] = useState(inputPaddingInitialState(addonStart));\n  const [paddingEnd, setPaddingEnd] = useState(inputPaddingInitialState(addonEnd));\n\n  return (\n    <InputPaddingStartContext.Provider\n      value={useMemo(() => [paddingStart, setPaddingStart], [paddingStart])}\n    >\n      <InputPaddingEndContext.Provider\n        value={useMemo(() => [paddingEnd, setPaddingEnd], [paddingEnd])}\n      >\n        <fieldset disabled={disabled} className={clsx(className, 'np-input-group')}>\n          {addonStart != null ? <InputAddon placement=\"start\" {...addonStart} /> : null}\n          {children}\n          {addonEnd != null ? <InputAddon placement=\"end\" {...addonEnd} /> : null}\n        </fieldset>\n      </InputPaddingEndContext.Provider>\n    </InputPaddingStartContext.Provider>\n  );\n}\n\ninterface InputAddonProps extends Omit<InputGroupAddon, 'initialContentWidth'> {\n  placement: 'start' | 'end';\n}\n\nconst inputAddonContentWidthAddendByPadding = {\n  none: 0,\n  sm: '1rem',\n  md: '1.5rem',\n} satisfies {\n  [key in NonNullable<InputAddonProps['padding']>]: InputPaddingContextType[0];\n};\n\nconst inputAddonDefaultPadding = 'md' satisfies InputAddonProps['padding'];\n\nfunction InputAddon({\n  placement,\n  content,\n  interactive,\n  padding = inputAddonDefaultPadding,\n}: InputAddonProps) {\n  const [, setInputPadding] = useContext(\n    placement === 'start' ? InputPaddingStartContext : InputPaddingEndContext,\n  );\n\n  const ref = useRef<HTMLSpanElement>(null);\n  useResizeObserver(ref, (entry) => {\n    // TODO: Remove fallback once most browsers support `borderBoxSize`\n    const inlineSize = entry.borderBoxSize?.[0]?.inlineSize;\n    if (inlineSize != null) {\n      setInputPadding(inlineSize);\n    } else {\n      const targetStyle = getComputedStyle(entry.target);\n      setInputPadding(\n        entry.contentRect.width +\n          Number.parseFloat(targetStyle.paddingInlineStart) +\n          Number.parseFloat(targetStyle.paddingInlineEnd),\n      );\n    }\n  });\n\n  return (\n    /* Prevent nested controls from being labeled redundantly */\n    <FieldLabelIdContextProvider value={undefined}>\n      <InputIdContextProvider value={undefined}>\n        <InputDescribedByProvider value={undefined}>\n          <InputInvalidProvider value={undefined}>\n            <span\n              ref={ref}\n              className={clsx(\n                'np-input-addon',\n                {\n                  'np-input-addon--placement-start': placement === 'start',\n                  'np-input-addon--placement-end': placement === 'end',\n                },\n                interactive && 'np-input-addon--interactive',\n                {\n                  'np-input-addon--padding-sm': padding === 'sm',\n                  'np-input-addon--padding-md': padding === 'md',\n                },\n              )}\n            >\n              {content}\n            </span>\n          </InputInvalidProvider>\n        </InputDescribedByProvider>\n      </InputIdContextProvider>\n    </FieldLabelIdContextProvider>\n  );\n}\n"],"names":["InputPaddingStartContext","createContext","undefined","InputPaddingEndContext","useInputPaddings","paddingStart","useContext","paddingEnd","paddingInlineStart","paddingInlineEnd","inputPaddingInitialState","initialContentWidth","padding","inputAddonDefaultPadding","cssValueWithUnit","inputAddonContentWidthAddendByPadding","InputGroup","addonStart","addonEnd","disabled","className","children","setPaddingStart","useState","setPaddingEnd","_jsx","Provider","value","useMemo","_jsxs","clsx","InputAddon","placement","none","sm","md","content","interactive","setInputPadding","ref","useRef","useResizeObserver","entry","inlineSize","borderBoxSize","targetStyle","getComputedStyle","target","contentRect","width","Number","parseFloat","FieldLabelIdContextProvider","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider"],"mappings":"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"}
+{"version":3,"file":"InputGroup.js","sources":["../../src/inputs/InputGroup.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { createContext, useContext, useMemo, useRef, useState } from 'react';\n\nimport { useResizeObserver } from '../common/hooks/useResizeObserver';\nimport { cssValueWithUnit } from '../utilities/cssValueWithUnit';\nimport {\n  FieldLabelIdContextProvider,\n  InputDescribedByProvider,\n  InputIdContextProvider,\n  InputInvalidProvider,\n  useInputAttributes,\n} from './contexts';\n\ntype InputPaddingContextType = [\n  number | string | undefined,\n  React.Dispatch<React.SetStateAction<number | string | undefined>>,\n];\n\nconst InputPaddingStartContext = createContext<InputPaddingContextType>([undefined, () => {}]);\n\nconst InputPaddingEndContext = createContext<InputPaddingContextType>([undefined, () => {}]);\n\nexport function useInputPaddings() {\n  const [paddingStart] = useContext(InputPaddingStartContext);\n  const [paddingEnd] = useContext(InputPaddingEndContext);\n\n  return {\n    paddingInlineStart: paddingStart,\n    paddingInlineEnd: paddingEnd,\n  } satisfies React.CSSProperties;\n}\n\ninterface InputGroupAddon {\n  content: React.ReactNode;\n  initialContentWidth?: number | string;\n  interactive?: boolean;\n  padding?: 'none' | 'sm' | 'md';\n}\n\nexport interface InputGroupProps {\n  addonStart?: InputGroupAddon;\n  addonEnd?: InputGroupAddon;\n  disabled?: boolean;\n  className?: string;\n  children?: React.ReactNode;\n}\n\nfunction inputPaddingInitialState({\n  initialContentWidth,\n  padding = inputAddonDefaultPadding,\n}: Pick<\n  InputGroupAddon,\n  'initialContentWidth' | 'padding'\n> = {}): () => InputPaddingContextType[0] {\n  return () =>\n    initialContentWidth != null\n      ? `calc(${cssValueWithUnit(initialContentWidth)} + ${cssValueWithUnit(\n          inputAddonContentWidthAddendByPadding[padding],\n        )})`\n      : undefined;\n}\n\nexport function InputGroup({\n  addonStart,\n  addonEnd,\n  disabled,\n  className,\n  children,\n}: InputGroupProps) {\n  const [paddingStart, setPaddingStart] = useState(inputPaddingInitialState(addonStart));\n  const [paddingEnd, setPaddingEnd] = useState(inputPaddingInitialState(addonEnd));\n\n  return (\n    <InputPaddingStartContext.Provider\n      value={useMemo(() => [paddingStart, setPaddingStart], [paddingStart])}\n    >\n      <InputPaddingEndContext.Provider\n        value={useMemo(() => [paddingEnd, setPaddingEnd], [paddingEnd])}\n      >\n        <fieldset disabled={disabled} className={clsx(className, 'np-input-group')}>\n          {addonStart != null ? <InputAddon placement=\"start\" {...addonStart} /> : null}\n          {children}\n          {addonEnd != null ? <InputAddon placement=\"end\" {...addonEnd} /> : null}\n        </fieldset>\n      </InputPaddingEndContext.Provider>\n    </InputPaddingStartContext.Provider>\n  );\n}\n\ninterface InputAddonProps extends Omit<InputGroupAddon, 'initialContentWidth'> {\n  placement: 'start' | 'end';\n}\n\nconst inputAddonContentWidthAddendByPadding = {\n  none: 0,\n  sm: '1rem',\n  md: '1.5rem',\n} satisfies {\n  [key in NonNullable<InputAddonProps['padding']>]: InputPaddingContextType[0];\n};\n\nconst inputAddonDefaultPadding = 'md' satisfies InputAddonProps['padding'];\n\nfunction InputAddon({\n  placement,\n  content,\n  interactive,\n  padding = inputAddonDefaultPadding,\n}: InputAddonProps) {\n  const [, setInputPadding] = useContext(\n    placement === 'start' ? InputPaddingStartContext : InputPaddingEndContext,\n  );\n\n  const ref = useRef<HTMLSpanElement>(null);\n  useResizeObserver(ref, (entry) => {\n    // TODO: Remove fallback once most browsers support `borderBoxSize`\n    const inlineSize = entry.borderBoxSize?.[0]?.inlineSize;\n    if (inlineSize != null) {\n      setInputPadding(inlineSize);\n    } else {\n      const targetStyle = getComputedStyle(entry.target);\n      setInputPadding(\n        entry.contentRect.width +\n          Number.parseFloat(targetStyle.paddingInlineStart) +\n          Number.parseFloat(targetStyle.paddingInlineEnd),\n      );\n    }\n  });\n\n  return (\n    /* Prevent nested controls from being labeled redundantly */\n    <FieldLabelIdContextProvider value={undefined}>\n      <InputIdContextProvider value={undefined}>\n        <InputDescribedByProvider value={undefined}>\n          <InputInvalidProvider value={undefined}>\n            <span\n              ref={ref}\n              className={clsx(\n                'np-input-addon',\n                {\n                  'np-input-addon--placement-start': placement === 'start',\n                  'np-input-addon--placement-end': placement === 'end',\n                },\n                interactive && 'np-input-addon--interactive',\n                {\n                  'np-input-addon--padding-sm': padding === 'sm',\n                  'np-input-addon--padding-md': padding === 'md',\n                },\n              )}\n            >\n              {content}\n            </span>\n          </InputInvalidProvider>\n        </InputDescribedByProvider>\n      </InputIdContextProvider>\n    </FieldLabelIdContextProvider>\n  );\n}\n"],"names":["InputPaddingStartContext","createContext","undefined","InputPaddingEndContext","useInputPaddings","paddingStart","useContext","paddingEnd","paddingInlineStart","paddingInlineEnd","inputPaddingInitialState","initialContentWidth","padding","inputAddonDefaultPadding","cssValueWithUnit","inputAddonContentWidthAddendByPadding","InputGroup","addonStart","addonEnd","disabled","className","children","setPaddingStart","useState","setPaddingEnd","_jsx","Provider","value","useMemo","_jsxs","clsx","InputAddon","placement","none","sm","md","content","interactive","setInputPadding","ref","useRef","useResizeObserver","entry","inlineSize","borderBoxSize","targetStyle","getComputedStyle","target","contentRect","width","Number","parseFloat","FieldLabelIdContextProvider","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider"],"mappings":"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"}

package/build/inputs/InputGroup.mjs

@@ -1,5 +1,5 @@
 import { clsx } from 'clsx';
-import { useState, useMemo, useContext, useRef, createContext } from 'react';
+import { useContext, createContext, useState, useMemo, useRef } from 'react';
 import { useResizeObserver } from '../common/hooks/useResizeObserver.mjs';
 import { cssValueWithUnit } from '../utilities/cssValueWithUnit.mjs';
 import { FieldLabelIdContextProvider, InputIdContextProvider, InputDescribedByProvider, InputInvalidProvider } from './contexts.mjs';
@@ -72,33 +72,29 @@ function InputAddon({
       setInputPadding(entry.contentRect.width + Number.parseFloat(targetStyle.paddingInlineStart) + Number.parseFloat(targetStyle.paddingInlineEnd));
     }
   });
-  return (
-    /*#__PURE__*/
-    /* Prevent nested controls from being labeled redundantly */
-    jsx(FieldLabelIdContextProvider, {
+  return /*#__PURE__*/ /* Prevent nested controls from being labeled redundantly */jsx(FieldLabelIdContextProvider, {
+    value: undefined,
+    children: /*#__PURE__*/jsx(InputIdContextProvider, {
       value: undefined,
-      children: /*#__PURE__*/jsx(InputIdContextProvider, {
+      children: /*#__PURE__*/jsx(InputDescribedByProvider, {
         value: undefined,
-        children: /*#__PURE__*/jsx(InputDescribedByProvider, {
+        children: /*#__PURE__*/jsx(InputInvalidProvider, {
           value: undefined,
-          children: /*#__PURE__*/jsx(InputInvalidProvider, {
-            value: undefined,
-            children: /*#__PURE__*/jsx("span", {
-              ref: ref,
-              className: clsx('np-input-addon', {
-                'np-input-addon--placement-start': placement === 'start',
-                'np-input-addon--placement-end': placement === 'end'
-              }, interactive && 'np-input-addon--interactive', {
-                'np-input-addon--padding-sm': padding === 'sm',
-                'np-input-addon--padding-md': padding === 'md'
-              }),
-              children: content
-            })
+          children: /*#__PURE__*/jsx("span", {
+            ref: ref,
+            className: clsx('np-input-addon', {
+              'np-input-addon--placement-start': placement === 'start',
+              'np-input-addon--placement-end': placement === 'end'
+            }, interactive && 'np-input-addon--interactive', {
+              'np-input-addon--padding-sm': padding === 'sm',
+              'np-input-addon--padding-md': padding === 'md'
+            }),
+            children: content
           })
         })
       })
     })
-  );
+  });
 }
 
 export { InputGroup, useInputPaddings };

package/build/inputs/InputGroup.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"InputGroup.mjs","sources":["../../src/inputs/InputGroup.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { createContext, useContext, useMemo, useRef, useState } from 'react';\n\nimport { useResizeObserver } from '../common/hooks/useResizeObserver';\nimport { cssValueWithUnit } from '../utilities/cssValueWithUnit';\nimport {\n  FieldLabelIdContextProvider,\n  InputDescribedByProvider,\n  InputIdContextProvider,\n  InputInvalidProvider,\n  useInputAttributes,\n} from './contexts';\n\ntype InputPaddingContextType = [\n  number | string | undefined,\n  React.Dispatch<React.SetStateAction<number | string | undefined>>,\n];\n\nconst InputPaddingStartContext = createContext<InputPaddingContextType>([undefined, () => {}]);\n\nconst InputPaddingEndContext = createContext<InputPaddingContextType>([undefined, () => {}]);\n\nexport function useInputPaddings() {\n  const [paddingStart] = useContext(InputPaddingStartContext);\n  const [paddingEnd] = useContext(InputPaddingEndContext);\n\n  return {\n    paddingInlineStart: paddingStart,\n    paddingInlineEnd: paddingEnd,\n  } satisfies React.CSSProperties;\n}\n\ninterface InputGroupAddon {\n  content: React.ReactNode;\n  initialContentWidth?: number | string;\n  interactive?: boolean;\n  padding?: 'none' | 'sm' | 'md';\n}\n\nexport interface InputGroupProps {\n  addonStart?: InputGroupAddon;\n  addonEnd?: InputGroupAddon;\n  disabled?: boolean;\n  className?: string;\n  children?: React.ReactNode;\n}\n\nfunction inputPaddingInitialState({\n  initialContentWidth,\n  padding = inputAddonDefaultPadding,\n}: Pick<\n  InputGroupAddon,\n  'initialContentWidth' | 'padding'\n> = {}): () => InputPaddingContextType[0] {\n  return () =>\n    initialContentWidth != null\n      ? `calc(${cssValueWithUnit(initialContentWidth)} + ${cssValueWithUnit(\n          inputAddonContentWidthAddendByPadding[padding],\n        )})`\n      : undefined;\n}\n\nexport function InputGroup({\n  addonStart,\n  addonEnd,\n  disabled,\n  className,\n  children,\n}: InputGroupProps) {\n  const [paddingStart, setPaddingStart] = useState(inputPaddingInitialState(addonStart));\n  const [paddingEnd, setPaddingEnd] = useState(inputPaddingInitialState(addonEnd));\n\n  return (\n    <InputPaddingStartContext.Provider\n      value={useMemo(() => [paddingStart, setPaddingStart], [paddingStart])}\n    >\n      <InputPaddingEndContext.Provider\n        value={useMemo(() => [paddingEnd, setPaddingEnd], [paddingEnd])}\n      >\n        <fieldset disabled={disabled} className={clsx(className, 'np-input-group')}>\n          {addonStart != null ? <InputAddon placement=\"start\" {...addonStart} /> : null}\n          {children}\n          {addonEnd != null ? <InputAddon placement=\"end\" {...addonEnd} /> : null}\n        </fieldset>\n      </InputPaddingEndContext.Provider>\n    </InputPaddingStartContext.Provider>\n  );\n}\n\ninterface InputAddonProps extends Omit<InputGroupAddon, 'initialContentWidth'> {\n  placement: 'start' | 'end';\n}\n\nconst inputAddonContentWidthAddendByPadding = {\n  none: 0,\n  sm: '1rem',\n  md: '1.5rem',\n} satisfies {\n  [key in NonNullable<InputAddonProps['padding']>]: InputPaddingContextType[0];\n};\n\nconst inputAddonDefaultPadding = 'md' satisfies InputAddonProps['padding'];\n\nfunction InputAddon({\n  placement,\n  content,\n  interactive,\n  padding = inputAddonDefaultPadding,\n}: InputAddonProps) {\n  const [, setInputPadding] = useContext(\n    placement === 'start' ? InputPaddingStartContext : InputPaddingEndContext,\n  );\n\n  const ref = useRef<HTMLSpanElement>(null);\n  useResizeObserver(ref, (entry) => {\n    // TODO: Remove fallback once most browsers support `borderBoxSize`\n    const inlineSize = entry.borderBoxSize?.[0]?.inlineSize;\n    if (inlineSize != null) {\n      setInputPadding(inlineSize);\n    } else {\n      const targetStyle = getComputedStyle(entry.target);\n      setInputPadding(\n        entry.contentRect.width +\n          Number.parseFloat(targetStyle.paddingInlineStart) +\n          Number.parseFloat(targetStyle.paddingInlineEnd),\n      );\n    }\n  });\n\n  return (\n    /* Prevent nested controls from being labeled redundantly */\n    <FieldLabelIdContextProvider value={undefined}>\n      <InputIdContextProvider value={undefined}>\n        <InputDescribedByProvider value={undefined}>\n          <InputInvalidProvider value={undefined}>\n            <span\n              ref={ref}\n              className={clsx(\n                'np-input-addon',\n                {\n                  'np-input-addon--placement-start': placement === 'start',\n                  'np-input-addon--placement-end': placement === 'end',\n                },\n                interactive && 'np-input-addon--interactive',\n                {\n                  'np-input-addon--padding-sm': padding === 'sm',\n                  'np-input-addon--padding-md': padding === 'md',\n                },\n              )}\n            >\n              {content}\n            </span>\n          </InputInvalidProvider>\n        </InputDescribedByProvider>\n      </InputIdContextProvider>\n    </FieldLabelIdContextProvider>\n  );\n}\n"],"names":["InputPaddingStartContext","createContext","undefined","InputPaddingEndContext","useInputPaddings","paddingStart","useContext","paddingEnd","paddingInlineStart","paddingInlineEnd","inputPaddingInitialState","initialContentWidth","padding","inputAddonDefaultPadding","cssValueWithUnit","inputAddonContentWidthAddendByPadding","InputGroup","addonStart","addonEnd","disabled","className","children","setPaddingStart","useState","setPaddingEnd","_jsx","Provider","value","useMemo","_jsxs","clsx","InputAddon","placement","none","sm","md","content","interactive","setInputPadding","ref","useRef","useResizeObserver","entry","inlineSize","borderBoxSize","targetStyle","getComputedStyle","target","contentRect","width","Number","parseFloat","FieldLabelIdContextProvider","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider"],"mappings":"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"}
+{"version":3,"file":"InputGroup.mjs","sources":["../../src/inputs/InputGroup.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { createContext, useContext, useMemo, useRef, useState } from 'react';\n\nimport { useResizeObserver } from '../common/hooks/useResizeObserver';\nimport { cssValueWithUnit } from '../utilities/cssValueWithUnit';\nimport {\n  FieldLabelIdContextProvider,\n  InputDescribedByProvider,\n  InputIdContextProvider,\n  InputInvalidProvider,\n  useInputAttributes,\n} from './contexts';\n\ntype InputPaddingContextType = [\n  number | string | undefined,\n  React.Dispatch<React.SetStateAction<number | string | undefined>>,\n];\n\nconst InputPaddingStartContext = createContext<InputPaddingContextType>([undefined, () => {}]);\n\nconst InputPaddingEndContext = createContext<InputPaddingContextType>([undefined, () => {}]);\n\nexport function useInputPaddings() {\n  const [paddingStart] = useContext(InputPaddingStartContext);\n  const [paddingEnd] = useContext(InputPaddingEndContext);\n\n  return {\n    paddingInlineStart: paddingStart,\n    paddingInlineEnd: paddingEnd,\n  } satisfies React.CSSProperties;\n}\n\ninterface InputGroupAddon {\n  content: React.ReactNode;\n  initialContentWidth?: number | string;\n  interactive?: boolean;\n  padding?: 'none' | 'sm' | 'md';\n}\n\nexport interface InputGroupProps {\n  addonStart?: InputGroupAddon;\n  addonEnd?: InputGroupAddon;\n  disabled?: boolean;\n  className?: string;\n  children?: React.ReactNode;\n}\n\nfunction inputPaddingInitialState({\n  initialContentWidth,\n  padding = inputAddonDefaultPadding,\n}: Pick<\n  InputGroupAddon,\n  'initialContentWidth' | 'padding'\n> = {}): () => InputPaddingContextType[0] {\n  return () =>\n    initialContentWidth != null\n      ? `calc(${cssValueWithUnit(initialContentWidth)} + ${cssValueWithUnit(\n          inputAddonContentWidthAddendByPadding[padding],\n        )})`\n      : undefined;\n}\n\nexport function InputGroup({\n  addonStart,\n  addonEnd,\n  disabled,\n  className,\n  children,\n}: InputGroupProps) {\n  const [paddingStart, setPaddingStart] = useState(inputPaddingInitialState(addonStart));\n  const [paddingEnd, setPaddingEnd] = useState(inputPaddingInitialState(addonEnd));\n\n  return (\n    <InputPaddingStartContext.Provider\n      value={useMemo(() => [paddingStart, setPaddingStart], [paddingStart])}\n    >\n      <InputPaddingEndContext.Provider\n        value={useMemo(() => [paddingEnd, setPaddingEnd], [paddingEnd])}\n      >\n        <fieldset disabled={disabled} className={clsx(className, 'np-input-group')}>\n          {addonStart != null ? <InputAddon placement=\"start\" {...addonStart} /> : null}\n          {children}\n          {addonEnd != null ? <InputAddon placement=\"end\" {...addonEnd} /> : null}\n        </fieldset>\n      </InputPaddingEndContext.Provider>\n    </InputPaddingStartContext.Provider>\n  );\n}\n\ninterface InputAddonProps extends Omit<InputGroupAddon, 'initialContentWidth'> {\n  placement: 'start' | 'end';\n}\n\nconst inputAddonContentWidthAddendByPadding = {\n  none: 0,\n  sm: '1rem',\n  md: '1.5rem',\n} satisfies {\n  [key in NonNullable<InputAddonProps['padding']>]: InputPaddingContextType[0];\n};\n\nconst inputAddonDefaultPadding = 'md' satisfies InputAddonProps['padding'];\n\nfunction InputAddon({\n  placement,\n  content,\n  interactive,\n  padding = inputAddonDefaultPadding,\n}: InputAddonProps) {\n  const [, setInputPadding] = useContext(\n    placement === 'start' ? InputPaddingStartContext : InputPaddingEndContext,\n  );\n\n  const ref = useRef<HTMLSpanElement>(null);\n  useResizeObserver(ref, (entry) => {\n    // TODO: Remove fallback once most browsers support `borderBoxSize`\n    const inlineSize = entry.borderBoxSize?.[0]?.inlineSize;\n    if (inlineSize != null) {\n      setInputPadding(inlineSize);\n    } else {\n      const targetStyle = getComputedStyle(entry.target);\n      setInputPadding(\n        entry.contentRect.width +\n          Number.parseFloat(targetStyle.paddingInlineStart) +\n          Number.parseFloat(targetStyle.paddingInlineEnd),\n      );\n    }\n  });\n\n  return (\n    /* Prevent nested controls from being labeled redundantly */\n    <FieldLabelIdContextProvider value={undefined}>\n      <InputIdContextProvider value={undefined}>\n        <InputDescribedByProvider value={undefined}>\n          <InputInvalidProvider value={undefined}>\n            <span\n              ref={ref}\n              className={clsx(\n                'np-input-addon',\n                {\n                  'np-input-addon--placement-start': placement === 'start',\n                  'np-input-addon--placement-end': placement === 'end',\n                },\n                interactive && 'np-input-addon--interactive',\n                {\n                  'np-input-addon--padding-sm': padding === 'sm',\n                  'np-input-addon--padding-md': padding === 'md',\n                },\n              )}\n            >\n              {content}\n            </span>\n          </InputInvalidProvider>\n        </InputDescribedByProvider>\n      </InputIdContextProvider>\n    </FieldLabelIdContextProvider>\n  );\n}\n"],"names":["InputPaddingStartContext","createContext","undefined","InputPaddingEndContext","useInputPaddings","paddingStart","useContext","paddingEnd","paddingInlineStart","paddingInlineEnd","inputPaddingInitialState","initialContentWidth","padding","inputAddonDefaultPadding","cssValueWithUnit","inputAddonContentWidthAddendByPadding","InputGroup","addonStart","addonEnd","disabled","className","children","setPaddingStart","useState","setPaddingEnd","_jsx","Provider","value","useMemo","_jsxs","clsx","InputAddon","placement","none","sm","md","content","interactive","setInputPadding","ref","useRef","useResizeObserver","entry","inlineSize","borderBoxSize","targetStyle","getComputedStyle","target","contentRect","width","Number","parseFloat","FieldLabelIdContextProvider","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider"],"mappings":"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"}