@transferwise/components 46.45.0 → 46.46.0

package/build/info/Info.js

@@ -0,0 +1,80 @@
+'use strict';
+
+var icons = require('@transferwise/icons');
+var classNames = require('classnames');
+var React = require('react');
+var reactIntl = require('react-intl');
+var Modal = require('../modal/Modal.js');
+var Popover = require('../popover/Popover.js');
+var Info_messages = require('./Info.messages.js');
+var infoPresentations = require('./infoPresentations.js');
+var jsxRuntime = require('react/jsx-runtime');
+var size = require('../common/propsValues/size.js');
+var position = require('../common/propsValues/position.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+
+const Info = ({
+  className = undefined,
+  content = undefined,
+  onClick = undefined,
+  presentation = infoPresentations.InfoPresentation.POPOVER,
+  size: size$1 = size.Size.SMALL,
+  title = undefined,
+  'aria-label': ariaLabel,
+  preferredPlacement = position.Position.BOTTOM
+}) => {
+  const intl = reactIntl.useIntl();
+  const [open, setOpen] = React.useState(false);
+  ariaLabel ??= intl.formatMessage(Info_messages.ariaLabel);
+  const isModal = presentation === infoPresentations.InfoPresentation.MODAL;
+  const isSmall = size$1 === size.Size.SMALL;
+  const buttonProps = {
+    'aria-label': ariaLabel,
+    className: 'btn-unstyled',
+    children: /*#__PURE__*/jsxRuntime.jsx(icons.QuestionMarkCircle, {
+      size: isSmall ? 16 : 24
+    })
+  };
+  return /*#__PURE__*/jsxRuntime.jsx("span", {
+    className: classNames__default.default(className, 'np-info', {
+      'np-info__small': isSmall,
+      'np-info__large': !isSmall
+    }),
+    children: isModal ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/jsxRuntime.jsx("button", {
+        type: "button",
+        onClick: () => {
+          setOpen(!open);
+          if (onClick) {
+            onClick();
+          }
+        },
+        ...buttonProps
+      }), /*#__PURE__*/jsxRuntime.jsx(Modal, {
+        body: content,
+        open: open,
+        title: title,
+        onClose: () => setOpen(false)
+      })]
+    }) : /*#__PURE__*/jsxRuntime.jsx(Popover, {
+      content: content,
+      preferredPlacement: preferredPlacement,
+      title: title,
+      children: /*#__PURE__*/jsxRuntime.jsx("button", {
+        type: "button",
+        ...buttonProps,
+        onClick: () => {
+          if (onClick) {
+            onClick();
+          }
+        }
+      })
+    })
+  });
+};
+
+module.exports = Info;
+//# sourceMappingURL=Info.js.map

package/build/info/Info.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Info.js","sources":["../../src/info/Info.tsx"],"sourcesContent":["import { QuestionMarkCircle as HelpCircleIcon } from '@transferwise/icons';\nimport classNames from 'classnames';\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';\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  const isSmall = size === Size.SMALL;\n\n  const buttonProps = {\n    'aria-label': ariaLabel,\n    className: 'btn-unstyled',\n    children: <HelpCircleIcon size={isSmall ? 16 : 24} />,\n  };\n\n  return (\n    <span\n      className={classNames(className, 'np-info', {\n        'np-info__small': isSmall,\n        'np-info__large': !isSmall,\n      })}\n    >\n      {isModal ? (\n        <>\n          <button\n            type=\"button\"\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          <button\n            type=\"button\"\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","isSmall","buttonProps","children","_jsx","HelpCircleIcon","classNames","_jsxs","_Fragment","type","Modal","body","onClose","Popover"],"mappings":";;;;;;;;;;;;;;;;;;AAyCMA,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,aAAQ,CAACV,SAAS,CAAC,CAAA;AACpD,EAAA,MAAMW,OAAO,GAAGlB,YAAY,KAAKC,kCAAgB,CAACkB,KAAK,CAAA;AACvD,EAAA,MAAMC,OAAO,GAAGjB,MAAI,KAAKC,SAAI,CAACC,KAAK,CAAA;AAEnC,EAAA,MAAMgB,WAAW,GAAG;AAClB,IAAA,YAAY,EAAEd,SAAS;AACvBX,IAAAA,SAAS,EAAE,cAAc;IACzB0B,QAAQ,eAAEC,cAAA,CAACC,wBAAc,EAAA;AAACrB,MAAAA,IAAI,EAAEiB,OAAO,GAAG,EAAE,GAAG,EAAA;KAAM,CAAA;GACtD,CAAA;AAED,EAAA,oBACEG,cAAA,CAAA,MAAA,EAAA;AACE3B,IAAAA,SAAS,EAAE6B,2BAAU,CAAC7B,SAAS,EAAE,SAAS,EAAE;AAC1C,MAAA,gBAAgB,EAAEwB,OAAO;AACzB,MAAA,gBAAgB,EAAE,CAACA,OAAAA;AACpB,KAAA,CAAE;AAAAE,IAAAA,QAAA,EAEFJ,OAAO,gBACNQ,eAAA,CAAAC,mBAAA,EAAA;AAAAL,MAAAA,QAAA,gBACEC,cAAA,CAAA,QAAA,EAAA;AACEK,QAAAA,IAAI,EAAC,QAAQ;QACb7B,OAAO,EAAEA,MAAK;UACZe,OAAO,CAAC,CAACD,IAAI,CAAC,CAAA;AACd,UAAA,IAAId,OAAO,EAAE;AACXA,YAAAA,OAAO,EAAE,CAAA;AACX,WAAA;SACA;QAAA,GACEsB,WAAAA;AAAW,OAEjB,CAAA,eAAAE,cAAA,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,cAAA,CAACS,OAAO,EAAA;AAAClC,MAAAA,OAAO,EAAEA,OAAQ;AAACU,MAAAA,kBAAkB,EAAEA,kBAAmB;AAACF,MAAAA,KAAK,EAAEA,KAAM;AAAAgB,MAAAA,QAAA,eAC9EC,cAAA,CAAA,QAAA,EAAA;AACEK,QAAAA,IAAI,EAAC,QAAQ;AAAA,QAAA,GACTP,WAAW;QACftB,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;;;;"}

package/build/info/Info.messages.js

@@ -0,0 +1,12 @@
+'use strict';
+
+var reactIntl = require('react-intl');
+
+var messages = reactIntl.defineMessages({
+  ariaLabel: {
+    id: "neptune.Info.ariaLabel"
+  }
+});
+
+module.exports = messages;
+//# sourceMappingURL=Info.messages.js.map

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

@@ -0,0 +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;;;;"}

package/build/info/Info.messages.mjs

@@ -0,0 +1,10 @@
+import { defineMessages } from 'react-intl';
+
+var messages = defineMessages({
+  ariaLabel: {
+    id: "neptune.Info.ariaLabel"
+  }
+});
+
+export { messages as default };
+//# sourceMappingURL=Info.messages.mjs.map

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

@@ -0,0 +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;;;;"}

package/build/info/Info.mjs

@@ -0,0 +1,74 @@
+import { QuestionMarkCircle } from '@transferwise/icons';
+import classNames from 'classnames';
+import { useState } from 'react';
+import { useIntl } from 'react-intl';
+import Modal from '../modal/Modal.mjs';
+import Popover from '../popover/Popover.mjs';
+import messages from './Info.messages.mjs';
+import { InfoPresentation } from './infoPresentations.mjs';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Size } from '../common/propsValues/size.mjs';
+import { Position } from '../common/propsValues/position.mjs';
+
+const Info = ({
+  className = undefined,
+  content = undefined,
+  onClick = undefined,
+  presentation = InfoPresentation.POPOVER,
+  size = Size.SMALL,
+  title = undefined,
+  'aria-label': ariaLabel,
+  preferredPlacement = Position.BOTTOM
+}) => {
+  const intl = useIntl();
+  const [open, setOpen] = useState(false);
+  ariaLabel ??= intl.formatMessage(messages.ariaLabel);
+  const isModal = presentation === InfoPresentation.MODAL;
+  const isSmall = size === Size.SMALL;
+  const buttonProps = {
+    'aria-label': ariaLabel,
+    className: 'btn-unstyled',
+    children: /*#__PURE__*/jsx(QuestionMarkCircle, {
+      size: isSmall ? 16 : 24
+    })
+  };
+  return /*#__PURE__*/jsx("span", {
+    className: classNames(className, 'np-info', {
+      'np-info__small': isSmall,
+      'np-info__large': !isSmall
+    }),
+    children: isModal ? /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsx("button", {
+        type: "button",
+        onClick: () => {
+          setOpen(!open);
+          if (onClick) {
+            onClick();
+          }
+        },
+        ...buttonProps
+      }), /*#__PURE__*/jsx(Modal, {
+        body: content,
+        open: open,
+        title: title,
+        onClose: () => setOpen(false)
+      })]
+    }) : /*#__PURE__*/jsx(Popover, {
+      content: content,
+      preferredPlacement: preferredPlacement,
+      title: title,
+      children: /*#__PURE__*/jsx("button", {
+        type: "button",
+        ...buttonProps,
+        onClick: () => {
+          if (onClick) {
+            onClick();
+          }
+        }
+      })
+    })
+  });
+};
+
+export { Info as default };
+//# sourceMappingURL=Info.mjs.map

package/build/info/Info.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Info.mjs","sources":["../../src/info/Info.tsx"],"sourcesContent":["import { QuestionMarkCircle as HelpCircleIcon } from '@transferwise/icons';\nimport classNames from 'classnames';\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';\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  const isSmall = size === Size.SMALL;\n\n  const buttonProps = {\n    'aria-label': ariaLabel,\n    className: 'btn-unstyled',\n    children: <HelpCircleIcon size={isSmall ? 16 : 24} />,\n  };\n\n  return (\n    <span\n      className={classNames(className, 'np-info', {\n        'np-info__small': isSmall,\n        'np-info__large': !isSmall,\n      })}\n    >\n      {isModal ? (\n        <>\n          <button\n            type=\"button\"\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          <button\n            type=\"button\"\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","isSmall","buttonProps","children","_jsx","HelpCircleIcon","classNames","_jsxs","_Fragment","type","Modal","body","onClose","Popover"],"mappings":";;;;;;;;;;;;AAyCMA,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;AACvD,EAAA,MAAMC,OAAO,GAAGjB,IAAI,KAAKC,IAAI,CAACC,KAAK,CAAA;AAEnC,EAAA,MAAMgB,WAAW,GAAG;AAClB,IAAA,YAAY,EAAEd,SAAS;AACvBX,IAAAA,SAAS,EAAE,cAAc;IACzB0B,QAAQ,eAAEC,GAAA,CAACC,kBAAc,EAAA;AAACrB,MAAAA,IAAI,EAAEiB,OAAO,GAAG,EAAE,GAAG,EAAA;KAAM,CAAA;GACtD,CAAA;AAED,EAAA,oBACEG,GAAA,CAAA,MAAA,EAAA;AACE3B,IAAAA,SAAS,EAAE6B,UAAU,CAAC7B,SAAS,EAAE,SAAS,EAAE;AAC1C,MAAA,gBAAgB,EAAEwB,OAAO;AACzB,MAAA,gBAAgB,EAAE,CAACA,OAAAA;AACpB,KAAA,CAAE;AAAAE,IAAAA,QAAA,EAEFJ,OAAO,gBACNQ,IAAA,CAAAC,QAAA,EAAA;AAAAL,MAAAA,QAAA,gBACEC,GAAA,CAAA,QAAA,EAAA;AACEK,QAAAA,IAAI,EAAC,QAAQ;QACb7B,OAAO,EAAEA,MAAK;UACZe,OAAO,CAAC,CAACD,IAAI,CAAC,CAAA;AACd,UAAA,IAAId,OAAO,EAAE;AACXA,YAAAA,OAAO,EAAE,CAAA;AACX,WAAA;SACA;QAAA,GACEsB,WAAAA;AAAW,OAEjB,CAAA,eAAAE,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;AAAAgB,MAAAA,QAAA,eAC9EC,GAAA,CAAA,QAAA,EAAA;AACEK,QAAAA,IAAI,EAAC,QAAQ;AAAA,QAAA,GACTP,WAAW;QACftB,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;;;;"}

package/build/info/infoPresentations.js

@@ -0,0 +1,9 @@
+'use strict';
+
+// TODO: consider to move this enum into component file once we migrate it on TypeScript or replace with some common enum
+exports.InfoPresentation = void 0;
+(function (InfoPresentation) {
+  InfoPresentation["POPOVER"] = "POPOVER";
+  InfoPresentation["MODAL"] = "MODAL";
+})(exports.InfoPresentation || (exports.InfoPresentation = {}));
+//# sourceMappingURL=infoPresentations.js.map

package/build/info/infoPresentations.js.map

@@ -0,0 +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;;"}

package/build/info/infoPresentations.mjs

@@ -0,0 +1,9 @@
+// TODO: consider to move this enum into component file once we migrate it on TypeScript or replace with some common enum
+var InfoPresentation;
+(function (InfoPresentation) {
+  InfoPresentation["POPOVER"] = "POPOVER";
+  InfoPresentation["MODAL"] = "MODAL";
+})(InfoPresentation || (InfoPresentation = {}));
+
+export { InfoPresentation };
+//# sourceMappingURL=infoPresentations.mjs.map

package/build/info/infoPresentations.mjs.map

@@ -0,0 +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;;;;"}

package/build/inlineAlert/InlineAlert.js

@@ -0,0 +1,35 @@
+'use strict';
+
+var classNames = require('classnames');
+var StatusIcon = require('../statusIcon/StatusIcon.js');
+var jsxRuntime = require('react/jsx-runtime');
+var sentiment = require('../common/propsValues/sentiment.js');
+var size = require('../common/propsValues/size.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+
+const iconTypes = new Set([sentiment.Sentiment.NEGATIVE, sentiment.Sentiment.ERROR, sentiment.Sentiment.POSITIVE, sentiment.Sentiment.SUCCESS, sentiment.Sentiment.WARNING]);
+function InlineAlert({
+  id,
+  type = 'neutral',
+  className,
+  children
+}) {
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    role: "alert",
+    id: id,
+    className: classNames__default.default('alert alert-detach', `alert-${type === sentiment.Sentiment.NEGATIVE || type === sentiment.Sentiment.ERROR ? 'danger' : type}`, className),
+    children: [iconTypes.has(type) && /*#__PURE__*/jsxRuntime.jsx(StatusIcon, {
+      sentiment: type,
+      size: size.Size.SMALL
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "np-text-body-default",
+      children: children
+    })]
+  });
+}
+
+module.exports = InlineAlert;
+//# sourceMappingURL=InlineAlert.js.map

package/build/inlineAlert/InlineAlert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InlineAlert.js","sources":["../../src/inlineAlert/InlineAlert.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { ReactNode } from 'react';\n\nimport { Sentiment, Size } from '../common';\nimport StatusIcon from '../statusIcon';\n\nexport interface InlineAlertProps {\n  id?: string;\n  type?: `${Sentiment}`;\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\nexport default function InlineAlert({\n  id,\n  type = 'neutral',\n  className,\n  children,\n}: InlineAlertProps) {\n  return (\n    <div\n      role=\"alert\"\n      id={id}\n      className={classNames(\n        'alert alert-detach',\n        `alert-${type === Sentiment.NEGATIVE || type === Sentiment.ERROR ? 'danger' : type}`,\n        className,\n      )}\n    >\n      {iconTypes.has(type) && <StatusIcon sentiment={type} size={Size.SMALL} />}\n      <div className=\"np-text-body-default\">{children}</div>\n    </div>\n  );\n}\n"],"names":["iconTypes","Set","Sentiment","NEGATIVE","ERROR","POSITIVE","SUCCESS","WARNING","InlineAlert","id","type","className","children","_jsxs","role","classNames","has","_jsx","StatusIcon","sentiment","size","Size","SMALL"],"mappings":";;;;;;;;;;;;AAaA,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;AAEsB,SAAAC,WAAWA,CAAC;EAClCC,EAAE;AACFC,EAAAA,IAAI,GAAG,SAAS;EAChBC,SAAS;AACTC,EAAAA,QAAAA;AACiB,CAAA,EAAA;AACjB,EAAA,oBACEC,eAAA,CAAA,KAAA,EAAA;AACEC,IAAAA,IAAI,EAAC,OAAO;AACZL,IAAAA,EAAE,EAAEA,EAAG;IACPE,SAAS,EAAEI,2BAAU,CACnB,oBAAoB,EACX,SAAAL,IAAI,KAAKR,mBAAS,CAACC,QAAQ,IAAIO,IAAI,KAAKR,mBAAS,CAACE,KAAK,GAAG,QAAQ,GAAGM,MAAM,EACpFC,SAAS,CACT;IAAAC,QAAA,EAAA,CAEDZ,SAAS,CAACgB,GAAG,CAACN,IAAI,CAAC,iBAAIO,cAAA,CAACC,UAAU,EAAA;AAACC,MAAAA,SAAS,EAAET,IAAK;MAACU,IAAI,EAAEC,SAAI,CAACC,KAAAA;KAAM,CAAG,eACzEL,cAAA,CAAA,KAAA,EAAA;AAAKN,MAAAA,SAAS,EAAC,sBAAsB;AAAAC,MAAAA,QAAA,EAAEA,QAAAA;AAAQ,KAAM,CACvD,CAAA;AAAA,GAAK,CAAC,CAAA;AAEV;;;;"}

package/build/inlineAlert/InlineAlert.mjs

@@ -0,0 +1,29 @@
+import classNames from 'classnames';
+import StatusIcon from '../statusIcon/StatusIcon.mjs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Sentiment } from '../common/propsValues/sentiment.mjs';
+import { Size } from '../common/propsValues/size.mjs';
+
+const iconTypes = new Set([Sentiment.NEGATIVE, Sentiment.ERROR, Sentiment.POSITIVE, Sentiment.SUCCESS, Sentiment.WARNING]);
+function InlineAlert({
+  id,
+  type = 'neutral',
+  className,
+  children
+}) {
+  return /*#__PURE__*/jsxs("div", {
+    role: "alert",
+    id: id,
+    className: classNames('alert alert-detach', `alert-${type === Sentiment.NEGATIVE || type === Sentiment.ERROR ? 'danger' : type}`, className),
+    children: [iconTypes.has(type) && /*#__PURE__*/jsx(StatusIcon, {
+      sentiment: type,
+      size: Size.SMALL
+    }), /*#__PURE__*/jsx("div", {
+      className: "np-text-body-default",
+      children: children
+    })]
+  });
+}
+
+export { InlineAlert as default };
+//# sourceMappingURL=InlineAlert.mjs.map

package/build/inlineAlert/InlineAlert.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"InlineAlert.mjs","sources":["../../src/inlineAlert/InlineAlert.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { ReactNode } from 'react';\n\nimport { Sentiment, Size } from '../common';\nimport StatusIcon from '../statusIcon';\n\nexport interface InlineAlertProps {\n  id?: string;\n  type?: `${Sentiment}`;\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\nexport default function InlineAlert({\n  id,\n  type = 'neutral',\n  className,\n  children,\n}: InlineAlertProps) {\n  return (\n    <div\n      role=\"alert\"\n      id={id}\n      className={classNames(\n        'alert alert-detach',\n        `alert-${type === Sentiment.NEGATIVE || type === Sentiment.ERROR ? 'danger' : type}`,\n        className,\n      )}\n    >\n      {iconTypes.has(type) && <StatusIcon sentiment={type} size={Size.SMALL} />}\n      <div className=\"np-text-body-default\">{children}</div>\n    </div>\n  );\n}\n"],"names":["iconTypes","Set","Sentiment","NEGATIVE","ERROR","POSITIVE","SUCCESS","WARNING","InlineAlert","id","type","className","children","_jsxs","role","classNames","has","_jsx","StatusIcon","sentiment","size","Size","SMALL"],"mappings":";;;;;;AAaA,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;AAEsB,SAAAC,WAAWA,CAAC;EAClCC,EAAE;AACFC,EAAAA,IAAI,GAAG,SAAS;EAChBC,SAAS;AACTC,EAAAA,QAAAA;AACiB,CAAA,EAAA;AACjB,EAAA,oBACEC,IAAA,CAAA,KAAA,EAAA;AACEC,IAAAA,IAAI,EAAC,OAAO;AACZL,IAAAA,EAAE,EAAEA,EAAG;IACPE,SAAS,EAAEI,UAAU,CACnB,oBAAoB,EACX,SAAAL,IAAI,KAAKR,SAAS,CAACC,QAAQ,IAAIO,IAAI,KAAKR,SAAS,CAACE,KAAK,GAAG,QAAQ,GAAGM,MAAM,EACpFC,SAAS,CACT;IAAAC,QAAA,EAAA,CAEDZ,SAAS,CAACgB,GAAG,CAACN,IAAI,CAAC,iBAAIO,GAAA,CAACC,UAAU,EAAA;AAACC,MAAAA,SAAS,EAAET,IAAK;MAACU,IAAI,EAAEC,IAAI,CAACC,KAAAA;KAAM,CAAG,eACzEL,GAAA,CAAA,KAAA,EAAA;AAAKN,MAAAA,SAAS,EAAC,sBAAsB;AAAAC,MAAAA,QAAA,EAAEA,QAAAA;AAAQ,KAAM,CACvD,CAAA;AAAA,GAAK,CAAC,CAAA;AAEV;;;;"}

package/build/inputWithDisplayFormat/InputWithDisplayFormat.js

@@ -0,0 +1,15 @@
+'use strict';
+
+var Input = require('../inputs/Input.js');
+var WithDisplayFormat = require('../withDisplayFormat/WithDisplayFormat.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+const InputWithDisplayFormat = props => /*#__PURE__*/jsxRuntime.jsx(WithDisplayFormat, {
+  ...props,
+  render: renderProps => /*#__PURE__*/jsxRuntime.jsx(Input.Input, {
+    ...renderProps
+  })
+});
+
+module.exports = InputWithDisplayFormat;
+//# sourceMappingURL=InputWithDisplayFormat.js.map

package/build/inputWithDisplayFormat/InputWithDisplayFormat.js.map

@@ -0,0 +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,iBAAiB,EAAA;AAAA,EAAA,GAAiBF,KAAK;AAAEG,EAAAA,MAAM,EAAGC,WAAW,iBAAKH,cAAA,CAACI,WAAK,EAAA;IAAA,GAAKD,WAAAA;GAAY,CAAA;AAAI,CAAA;;;;"}

package/build/inputWithDisplayFormat/InputWithDisplayFormat.mjs

@@ -0,0 +1,13 @@
+import { Input } from '../inputs/Input.mjs';
+import WithDisplayFormat from '../withDisplayFormat/WithDisplayFormat.mjs';
+import { jsx } from 'react/jsx-runtime';
+
+const InputWithDisplayFormat = props => /*#__PURE__*/jsx(WithDisplayFormat, {
+  ...props,
+  render: renderProps => /*#__PURE__*/jsx(Input, {
+    ...renderProps
+  })
+});
+
+export { InputWithDisplayFormat as default };
+//# sourceMappingURL=InputWithDisplayFormat.mjs.map

package/build/inputWithDisplayFormat/InputWithDisplayFormat.mjs.map

@@ -0,0 +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;;;;"}

package/build/inputs/Input.js

@@ -0,0 +1,39 @@
+'use strict';
+
+var classNames = require('classnames');
+var React = require('react');
+var _common = require('./_common.js');
+var contexts = require('./contexts.js');
+var InputGroup = require('./InputGroup.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+
+const Input = /*#__PURE__*/React.forwardRef(function Input({
+  size = 'auto',
+  shape = 'rectangle',
+  className,
+  ...restProps
+}, reference) {
+  const inputAttributes = contexts.useInputAttributes();
+  const inputPaddings = InputGroup.useInputPaddings();
+  return /*#__PURE__*/jsxRuntime.jsx("input", {
+    ref: reference,
+    className: classNames__default.default(className, _common.inputClassNameBase({
+      size
+    }), 'np-input', {
+      'np-input--shape-rectangle': shape === 'rectangle',
+      'np-input--shape-pill': shape === 'pill'
+    })
+    // eslint-disable-next-line react/forbid-dom-props
+    ,
+    style: inputPaddings,
+    ...inputAttributes,
+    ...restProps
+  });
+});
+
+exports.Input = Input;
+//# sourceMappingURL=Input.js.map

package/build/inputs/Input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","sources":["../../src/inputs/Input.tsx"],"sourcesContent":["import classNames from 'classnames';\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={classNames(className, inputClassNameBase({ size }), 'np-input', {\n        'np-input--shape-rectangle': shape === 'rectangle',\n        'np-input--shape-pill': shape === 'pill',\n      })}\n      // eslint-disable-next-line react/forbid-dom-props\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","classNames","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,2BAAU,CAACT,SAAS,EAAEU,0BAAkB,CAAC;AAAEZ,MAAAA,IAAAA;KAAM,CAAC,EAAE,UAAU,EAAE;MACzE,2BAA2B,EAAEC,KAAK,KAAK,WAAW;MAClD,sBAAsB,EAAEA,KAAK,KAAK,MAAA;KACnC,CAAA;AACD;AAAA;AACAY,IAAAA,KAAK,EAAEN,aAAc;AAAA,IAAA,GACjBF,eAAe;IAAA,GACfF,SAAAA;AAAS,GAAC,CACd,CAAA;AAEN,CAAC;;;;"}

package/build/inputs/Input.mjs

@@ -0,0 +1,33 @@
+import classNames from 'classnames';
+import { forwardRef } from 'react';
+import { inputClassNameBase } from './_common.mjs';
+import { useInputAttributes } from './contexts.mjs';
+import { useInputPaddings } from './InputGroup.mjs';
+import { jsx } from 'react/jsx-runtime';
+
+const Input = /*#__PURE__*/forwardRef(function Input({
+  size = 'auto',
+  shape = 'rectangle',
+  className,
+  ...restProps
+}, reference) {
+  const inputAttributes = useInputAttributes();
+  const inputPaddings = useInputPaddings();
+  return /*#__PURE__*/jsx("input", {
+    ref: reference,
+    className: classNames(className, inputClassNameBase({
+      size
+    }), 'np-input', {
+      'np-input--shape-rectangle': shape === 'rectangle',
+      'np-input--shape-pill': shape === 'pill'
+    })
+    // eslint-disable-next-line react/forbid-dom-props
+    ,
+    style: inputPaddings,
+    ...inputAttributes,
+    ...restProps
+  });
+});
+
+export { Input };
+//# sourceMappingURL=Input.mjs.map

package/build/inputs/Input.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.mjs","sources":["../../src/inputs/Input.tsx"],"sourcesContent":["import classNames from 'classnames';\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={classNames(className, inputClassNameBase({ size }), 'np-input', {\n        'np-input--shape-rectangle': shape === 'rectangle',\n        'np-input--shape-pill': shape === 'pill',\n      })}\n      // eslint-disable-next-line react/forbid-dom-props\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","classNames","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,UAAU,CAACT,SAAS,EAAEU,kBAAkB,CAAC;AAAEZ,MAAAA,IAAAA;KAAM,CAAC,EAAE,UAAU,EAAE;MACzE,2BAA2B,EAAEC,KAAK,KAAK,WAAW;MAClD,sBAAsB,EAAEA,KAAK,KAAK,MAAA;KACnC,CAAA;AACD;AAAA;AACAY,IAAAA,KAAK,EAAEN,aAAc;AAAA,IAAA,GACjBF,eAAe;IAAA,GACfF,SAAAA;AAAS,GAAC,CACd,CAAA;AAEN,CAAC;;;;"}

package/build/inputs/InputGroup.js

@@ -0,0 +1,116 @@
+'use strict';
+
+var classNames = require('classnames');
+var React = require('react');
+var useResizeObserver = require('../common/hooks/useResizeObserver.js');
+var cssValueWithUnit = require('../utilities/cssValueWithUnit.js');
+var contexts = require('./contexts.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+
+const InputPaddingStartContext = /*#__PURE__*/React.createContext([undefined, () => {}]);
+const InputPaddingEndContext = /*#__PURE__*/React.createContext([undefined, () => {}]);
+function useInputPaddings() {
+  const [paddingStart] = React.useContext(InputPaddingStartContext);
+  const [paddingEnd] = React.useContext(InputPaddingEndContext);
+  return {
+    paddingInlineStart: paddingStart,
+    paddingInlineEnd: paddingEnd
+  };
+}
+function inputPaddingInitialState({
+  initialContentWidth,
+  padding = inputAddonDefaultPadding
+} = {}) {
+  return () => initialContentWidth != null ? `calc(${cssValueWithUnit.cssValueWithUnit(initialContentWidth)} + ${cssValueWithUnit.cssValueWithUnit(inputAddonContentWidthAddendByPadding[padding])})` : undefined;
+}
+function InputGroup({
+  addonStart,
+  addonEnd,
+  disabled,
+  className,
+  children
+}) {
+  const inputAttributes = contexts.useInputAttributes({
+    nonLabelable: true
+  });
+  const [paddingStart, setPaddingStart] = React.useState(inputPaddingInitialState(addonStart));
+  const [paddingEnd, setPaddingEnd] = React.useState(inputPaddingInitialState(addonEnd));
+  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.InputDescribedByProvider, {
+          value: undefined,
+          children: /*#__PURE__*/jsxRuntime.jsx(contexts.InputInvalidProvider, {
+            value: undefined,
+            children: /*#__PURE__*/jsxRuntime.jsx(InputPaddingStartContext.Provider, {
+              value: React.useMemo(() => [paddingStart, setPaddingStart], [paddingStart]),
+              children: /*#__PURE__*/jsxRuntime.jsx(InputPaddingEndContext.Provider, {
+                value: React.useMemo(() => [paddingEnd, setPaddingEnd], [paddingEnd]),
+                children: /*#__PURE__*/jsxRuntime.jsxs("fieldset", {
+                  ...inputAttributes,
+                  disabled: disabled,
+                  className: classNames__default.default(className, 'np-input-group'),
+                  children: [addonStart != null ? /*#__PURE__*/jsxRuntime.jsx(InputAddon, {
+                    placement: "start",
+                    ...addonStart
+                  }) : null, children, addonEnd != null ? /*#__PURE__*/jsxRuntime.jsx(InputAddon, {
+                    placement: "end",
+                    ...addonEnd
+                  }) : null]
+                })
+              })
+            })
+          })
+        })
+      })
+    })
+  );
+}
+const inputAddonContentWidthAddendByPadding = {
+  none: 0,
+  sm: '1rem',
+  md: '1.5rem'
+};
+const inputAddonDefaultPadding = 'md';
+function InputAddon({
+  placement,
+  content,
+  interactive,
+  padding = inputAddonDefaultPadding
+}) {
+  const [, setInputPadding] = React.useContext(placement === 'start' ? InputPaddingStartContext : InputPaddingEndContext);
+  const ref = React.useRef(null);
+  useResizeObserver.useResizeObserver(ref, entry => {
+    // TODO: Remove fallback once most browsers support `borderBoxSize`
+    const inlineSize = entry.borderBoxSize?.[0]?.inlineSize;
+    if (inlineSize != null) {
+      setInputPadding(inlineSize);
+    } else {
+      const targetStyle = getComputedStyle(entry.target);
+      setInputPadding(entry.contentRect.width + Number.parseFloat(targetStyle.paddingInlineStart) + Number.parseFloat(targetStyle.paddingInlineEnd));
+    }
+  });
+  return /*#__PURE__*/jsxRuntime.jsx("span", {
+    ref: ref,
+    className: classNames__default.default('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;
+exports.useInputPaddings = useInputPaddings;
+//# sourceMappingURL=InputGroup.js.map

package/build/inputs/InputGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputGroup.js","sources":["../../src/inputs/InputGroup.tsx"],"sourcesContent":["import classNames from 'classnames';\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 inputAttributes = useInputAttributes({ nonLabelable: true });\n\n  const [paddingStart, setPaddingStart] = useState(inputPaddingInitialState(addonStart));\n  const [paddingEnd, setPaddingEnd] = useState(inputPaddingInitialState(addonEnd));\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            <InputPaddingStartContext.Provider\n              value={useMemo(() => [paddingStart, setPaddingStart], [paddingStart])}\n            >\n              <InputPaddingEndContext.Provider\n                value={useMemo(() => [paddingEnd, setPaddingEnd], [paddingEnd])}\n              >\n                <fieldset\n                  {...inputAttributes}\n                  disabled={disabled}\n                  className={classNames(className, 'np-input-group')}\n                >\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          </InputInvalidProvider>\n        </InputDescribedByProvider>\n      </InputIdContextProvider>\n    </FieldLabelIdContextProvider>\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    <span\n      ref={ref}\n      className={classNames(\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  );\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","inputAttributes","useInputAttributes","nonLabelable","setPaddingStart","useState","setPaddingEnd","_jsx","FieldLabelIdContextProvider","value","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider","Provider","useMemo","_jsxs","classNames","InputAddon","placement","none","sm","md","content","interactive","setInputPadding","ref","useRef","useResizeObserver","entry","inlineSize","borderBoxSize","targetStyle","getComputedStyle","target","contentRect","width","Number","parseFloat"],"mappings":"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"}