@transferwise/components 46.44.1 → 46.46.0

package/build/inputs/TextArea.js

@@ -0,0 +1,27 @@
+'use strict';
+
+var classNames = require('classnames');
+var React = require('react');
+var _common = require('./_common.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 TextArea = /*#__PURE__*/React.forwardRef(function TextArea({
+  className,
+  ...restProps
+}, reference) {
+  const inputAttributes = contexts.useInputAttributes();
+  return /*#__PURE__*/jsxRuntime.jsx("textarea", {
+    ref: reference,
+    className: classNames__default.default(className, _common.inputClassNameBase(), 'np-text-area'),
+    ...inputAttributes,
+    ...restProps
+  });
+});
+
+exports.TextArea = TextArea;
+//# sourceMappingURL=TextArea.js.map

package/build/inputs/TextArea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.js","sources":["../../src/inputs/TextArea.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { forwardRef } from 'react';\n\nimport { Merge } from '../utils';\nimport { inputClassNameBase } from './_common';\nimport { useInputAttributes } from './contexts';\n\nexport interface TextAreaProps\n  extends Merge<\n    React.ComponentPropsWithRef<'textarea'>,\n    {\n      'aria-invalid'?: boolean;\n    }\n  > {}\n\nexport const TextArea = forwardRef(function TextArea(\n  { className, ...restProps }: TextAreaProps,\n  reference: React.ForwardedRef<HTMLTextAreaElement | null>,\n) {\n  const inputAttributes = useInputAttributes();\n\n  return (\n    <textarea\n      ref={reference}\n      className={classNames(className, inputClassNameBase(), 'np-text-area')}\n      {...inputAttributes}\n      {...restProps}\n    />\n  );\n});\n"],"names":["TextArea","forwardRef","className","restProps","reference","inputAttributes","useInputAttributes","_jsx","ref","classNames","inputClassNameBase"],"mappings":";;;;;;;;;;;;MAeaA,QAAQ,gBAAGC,gBAAU,CAAC,SAASD,QAAQA,CAClD;EAAEE,SAAS;EAAE,GAAGC,SAAAA;AAAS,CAAiB,EAC1CC,SAAyD,EAAA;AAEzD,EAAA,MAAMC,eAAe,GAAGC,2BAAkB,EAAE,CAAA;AAE5C,EAAA,oBACEC,cAAA,CAAA,UAAA,EAAA;AACEC,IAAAA,GAAG,EAAEJ,SAAU;IACfF,SAAS,EAAEO,2BAAU,CAACP,SAAS,EAAEQ,0BAAkB,EAAE,EAAE,cAAc,CAAE;AAAA,IAAA,GACnEL,eAAe;IAAA,GACfF,SAAAA;AAAS,GAAC,CACd,CAAA;AAEN,CAAC;;;;"}

package/build/inputs/TextArea.mjs

@@ -0,0 +1,21 @@
+import classNames from 'classnames';
+import { forwardRef } from 'react';
+import { inputClassNameBase } from './_common.mjs';
+import { useInputAttributes } from './contexts.mjs';
+import { jsx } from 'react/jsx-runtime';
+
+const TextArea = /*#__PURE__*/forwardRef(function TextArea({
+  className,
+  ...restProps
+}, reference) {
+  const inputAttributes = useInputAttributes();
+  return /*#__PURE__*/jsx("textarea", {
+    ref: reference,
+    className: classNames(className, inputClassNameBase(), 'np-text-area'),
+    ...inputAttributes,
+    ...restProps
+  });
+});
+
+export { TextArea };
+//# sourceMappingURL=TextArea.mjs.map

package/build/inputs/TextArea.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.mjs","sources":["../../src/inputs/TextArea.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { forwardRef } from 'react';\n\nimport { Merge } from '../utils';\nimport { inputClassNameBase } from './_common';\nimport { useInputAttributes } from './contexts';\n\nexport interface TextAreaProps\n  extends Merge<\n    React.ComponentPropsWithRef<'textarea'>,\n    {\n      'aria-invalid'?: boolean;\n    }\n  > {}\n\nexport const TextArea = forwardRef(function TextArea(\n  { className, ...restProps }: TextAreaProps,\n  reference: React.ForwardedRef<HTMLTextAreaElement | null>,\n) {\n  const inputAttributes = useInputAttributes();\n\n  return (\n    <textarea\n      ref={reference}\n      className={classNames(className, inputClassNameBase(), 'np-text-area')}\n      {...inputAttributes}\n      {...restProps}\n    />\n  );\n});\n"],"names":["TextArea","forwardRef","className","restProps","reference","inputAttributes","useInputAttributes","_jsx","ref","classNames","inputClassNameBase"],"mappings":";;;;;;MAeaA,QAAQ,gBAAGC,UAAU,CAAC,SAASD,QAAQA,CAClD;EAAEE,SAAS;EAAE,GAAGC,SAAAA;AAAS,CAAiB,EAC1CC,SAAyD,EAAA;AAEzD,EAAA,MAAMC,eAAe,GAAGC,kBAAkB,EAAE,CAAA;AAE5C,EAAA,oBACEC,GAAA,CAAA,UAAA,EAAA;AACEC,IAAAA,GAAG,EAAEJ,SAAU;IACfF,SAAS,EAAEO,UAAU,CAACP,SAAS,EAAEQ,kBAAkB,EAAE,EAAE,cAAc,CAAE;AAAA,IAAA,GACnEL,eAAe;IAAA,GACfF,SAAAA;AAAS,GAAC,CACd,CAAA;AAEN,CAAC;;;;"}

package/build/inputs/_BottomSheet.js

@@ -0,0 +1,115 @@
+'use strict';
+
+var react = require('@floating-ui/react');
+var react$1 = require('@headlessui/react');
+var focus = require('@react-aria/focus');
+var componentsTheming = require('@wise/components-theming');
+var classNames = require('classnames');
+var React = require('react');
+var CloseButton = require('../common/closeButton/CloseButton.js');
+var useVirtualKeyboard = require('../common/hooks/useVirtualKeyboard.js');
+var PreventScroll = require('../common/preventScroll/PreventScroll.js');
+var size = require('../common/propsValues/size.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+
+function BottomSheet({
+  open,
+  renderTrigger,
+  title,
+  initialFocusRef,
+  padding = 'md',
+  children,
+  onClose,
+  onCloseEnd
+}) {
+  useVirtualKeyboard.useVirtualKeyboard();
+  const {
+    refs,
+    context
+  } = react.useFloating({
+    open,
+    onOpenChange: value => {
+      if (!value) {
+        onClose?.();
+      }
+    }
+  });
+  const dismiss = react.useDismiss(context);
+  const role = react.useRole(context);
+  const {
+    getReferenceProps,
+    getFloatingProps
+  } = react.useInteractions([dismiss, role]);
+  const [floatingKey, setFloatingKey] = React.useState(0);
+  const {
+    theme,
+    screenMode
+  } = componentsTheming.useTheme();
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [open ? /*#__PURE__*/jsxRuntime.jsx(PreventScroll.PreventScroll, {}) : null, renderTrigger?.({
+      ref: refs.setReference,
+      getInteractionProps: getReferenceProps
+    }), /*#__PURE__*/jsxRuntime.jsx(react.FloatingPortal, {
+      children: /*#__PURE__*/jsxRuntime.jsx(componentsTheming.ThemeProvider, {
+        theme: "personal",
+        screenMode: theme === 'personal' ? screenMode : 'light',
+        isNotRootProvider: true,
+        children: /*#__PURE__*/jsxRuntime.jsxs(react$1.Transition, {
+          show: open,
+          className: "np-bottom-sheet-v2-container",
+          beforeEnter: () => {
+            setFloatingKey(prev => prev + 1);
+          },
+          afterLeave: onCloseEnd,
+          children: [/*#__PURE__*/jsxRuntime.jsx(react$1.Transition.Child, {
+            className: "np-bottom-sheet-v2-backdrop",
+            enterFrom: "np-bottom-sheet-v2-backdrop--closed",
+            leaveTo: "np-bottom-sheet-v2-backdrop--closed"
+          }), /*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "np-bottom-sheet-v2",
+            children: /*#__PURE__*/jsxRuntime.jsx(focus.FocusScope, {
+              children: /*#__PURE__*/jsxRuntime.jsx(react.FloatingFocusManager, {
+                context: context,
+                initialFocus: initialFocusRef,
+                children: /*#__PURE__*/jsxRuntime.jsx(React.Fragment, {
+                  children: /*#__PURE__*/jsxRuntime.jsxs(react$1.Transition.Child, {
+                    ref: refs.setFloating,
+                    className: "np-bottom-sheet-v2-content",
+                    enterFrom: "np-bottom-sheet-v2-content--closed",
+                    leaveTo: "np-bottom-sheet-v2-content--closed",
+                    ...getFloatingProps(),
+                    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+                      className: "np-bottom-sheet-v2-header",
+                      children: /*#__PURE__*/jsxRuntime.jsx(CloseButton.CloseButton, {
+                        size: size.Size.SMALL,
+                        onClick: () => {
+                          onClose?.();
+                        }
+                      })
+                    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+                      className: classNames__default.default('np-bottom-sheet-v2-content-inner', title && 'np-bottom-sheet-v2-content-inner--has-title', padding === 'md' && 'np-bottom-sheet-v2-content-inner--padding-md'),
+                      children: [title ? /*#__PURE__*/jsxRuntime.jsx("h2", {
+                        className: "np-bottom-sheet-v2-title np-text-title-body",
+                        children: title
+                      }) : null, /*#__PURE__*/jsxRuntime.jsx("div", {
+                        className: "np-bottom-sheet-v2-body np-text-body-default",
+                        children: children
+                      })]
+                    })]
+                  })
+                }, floatingKey)
+              })
+            })
+          })]
+        })
+      })
+    })]
+  });
+}
+
+exports.BottomSheet = BottomSheet;
+//# sourceMappingURL=_BottomSheet.js.map

package/build/inputs/_BottomSheet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"_BottomSheet.js","sources":["../../src/inputs/_BottomSheet.tsx"],"sourcesContent":["import {\n  FloatingFocusManager,\n  FloatingPortal,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useRole,\n} from '@floating-ui/react';\nimport { Transition } from '@headlessui/react';\nimport { FocusScope } from '@react-aria/focus';\nimport { ThemeProvider, useTheme } from '@wise/components-theming';\nimport classNames from 'classnames';\nimport { Fragment, useState } from 'react';\n\nimport { CloseButton } from '../common/closeButton';\nimport { useVirtualKeyboard } from '../common/hooks/useVirtualKeyboard';\nimport { PreventScroll } from '../common/preventScroll/PreventScroll';\nimport { Size } from '../common/propsValues/size';\n\nexport interface BottomSheetProps {\n  open: boolean;\n  renderTrigger?: (args: {\n    ref: React.RefCallback<Element>;\n    getInteractionProps: (customEventHandlers?: React.HTMLProps<Element>) => {\n      [key: string]: unknown;\n    };\n  }) => React.ReactNode;\n  title?: string;\n  initialFocusRef?: React.MutableRefObject<HTMLElement | null>;\n  padding?: 'none' | 'md';\n  children?: React.ReactNode;\n  onClose?: () => void;\n  onCloseEnd?: () => void;\n}\n\nexport function BottomSheet({\n  open,\n  renderTrigger,\n  title,\n  initialFocusRef,\n  padding = 'md',\n  children,\n  onClose,\n  onCloseEnd,\n}: BottomSheetProps) {\n  useVirtualKeyboard();\n\n  const { refs, context } = useFloating<Element>({\n    open,\n    onOpenChange: (value) => {\n      if (!value) {\n        onClose?.();\n      }\n    },\n  });\n\n  const dismiss = useDismiss(context);\n  const role = useRole(context);\n  const { getReferenceProps, getFloatingProps } = useInteractions([dismiss, role]);\n\n  const [floatingKey, setFloatingKey] = useState(0);\n\n  const { theme, screenMode } = useTheme();\n\n  return (\n    <>\n      {open ? <PreventScroll /> : null}\n      {renderTrigger?.({\n        ref: refs.setReference,\n        getInteractionProps: getReferenceProps,\n      })}\n\n      <FloatingPortal>\n        <ThemeProvider\n          theme=\"personal\"\n          screenMode={theme === 'personal' ? screenMode : 'light'}\n          isNotRootProvider\n        >\n          <Transition\n            show={open}\n            className=\"np-bottom-sheet-v2-container\"\n            beforeEnter={() => {\n              setFloatingKey((prev) => prev + 1);\n            }}\n            afterLeave={onCloseEnd}\n          >\n            <Transition.Child\n              className=\"np-bottom-sheet-v2-backdrop\"\n              enterFrom=\"np-bottom-sheet-v2-backdrop--closed\"\n              leaveTo=\"np-bottom-sheet-v2-backdrop--closed\"\n            />\n\n            <div className=\"np-bottom-sheet-v2\">\n              <FocusScope>\n                <FloatingFocusManager context={context} initialFocus={initialFocusRef}>\n                  <Fragment\n                    key={floatingKey} // Force inner state invalidation on open\n                  >\n                    <Transition.Child\n                      ref={refs.setFloating}\n                      className=\"np-bottom-sheet-v2-content\"\n                      enterFrom=\"np-bottom-sheet-v2-content--closed\"\n                      leaveTo=\"np-bottom-sheet-v2-content--closed\"\n                      {...getFloatingProps()}\n                    >\n                      <div className=\"np-bottom-sheet-v2-header\">\n                        <CloseButton\n                          size={Size.SMALL}\n                          onClick={() => {\n                            onClose?.();\n                          }}\n                        />\n                      </div>\n                      <div\n                        className={classNames(\n                          'np-bottom-sheet-v2-content-inner',\n                          title && 'np-bottom-sheet-v2-content-inner--has-title',\n                          padding === 'md' && 'np-bottom-sheet-v2-content-inner--padding-md',\n                        )}\n                      >\n                        {title ? (\n                          <h2 className=\"np-bottom-sheet-v2-title np-text-title-body\">{title}</h2>\n                        ) : null}\n                        <div className=\"np-bottom-sheet-v2-body np-text-body-default\">\n                          {children}\n                        </div>\n                      </div>\n                    </Transition.Child>\n                  </Fragment>\n                </FloatingFocusManager>\n              </FocusScope>\n            </div>\n          </Transition>\n        </ThemeProvider>\n      </FloatingPortal>\n    </>\n  );\n}\n"],"names":["BottomSheet","open","renderTrigger","title","initialFocusRef","padding","children","onClose","onCloseEnd","useVirtualKeyboard","refs","context","useFloating","onOpenChange","value","dismiss","useDismiss","role","useRole","getReferenceProps","getFloatingProps","useInteractions","floatingKey","setFloatingKey","useState","theme","screenMode","useTheme","_jsxs","_Fragment","_jsx","PreventScroll","ref","setReference","getInteractionProps","FloatingPortal","ThemeProvider","isNotRootProvider","Transition","show","className","beforeEnter","prev","afterLeave","Child","enterFrom","leaveTo","FocusScope","FloatingFocusManager","initialFocus","Fragment","setFloating","CloseButton","size","Size","SMALL","onClick","classNames"],"mappings":"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"}

package/build/inputs/_BottomSheet.mjs

@@ -0,0 +1,109 @@
+import { useFloating, useDismiss, useRole, useInteractions, FloatingPortal, FloatingFocusManager } from '@floating-ui/react';
+import { Transition } from '@headlessui/react';
+import { FocusScope } from '@react-aria/focus';
+import { useTheme, ThemeProvider } from '@wise/components-theming';
+import classNames from 'classnames';
+import { useState, Fragment as Fragment$1 } from 'react';
+import { CloseButton } from '../common/closeButton/CloseButton.mjs';
+import { useVirtualKeyboard } from '../common/hooks/useVirtualKeyboard.mjs';
+import { PreventScroll } from '../common/preventScroll/PreventScroll.mjs';
+import { Size } from '../common/propsValues/size.mjs';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+function BottomSheet({
+  open,
+  renderTrigger,
+  title,
+  initialFocusRef,
+  padding = 'md',
+  children,
+  onClose,
+  onCloseEnd
+}) {
+  useVirtualKeyboard();
+  const {
+    refs,
+    context
+  } = useFloating({
+    open,
+    onOpenChange: value => {
+      if (!value) {
+        onClose?.();
+      }
+    }
+  });
+  const dismiss = useDismiss(context);
+  const role = useRole(context);
+  const {
+    getReferenceProps,
+    getFloatingProps
+  } = useInteractions([dismiss, role]);
+  const [floatingKey, setFloatingKey] = useState(0);
+  const {
+    theme,
+    screenMode
+  } = useTheme();
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [open ? /*#__PURE__*/jsx(PreventScroll, {}) : null, renderTrigger?.({
+      ref: refs.setReference,
+      getInteractionProps: getReferenceProps
+    }), /*#__PURE__*/jsx(FloatingPortal, {
+      children: /*#__PURE__*/jsx(ThemeProvider, {
+        theme: "personal",
+        screenMode: theme === 'personal' ? screenMode : 'light',
+        isNotRootProvider: true,
+        children: /*#__PURE__*/jsxs(Transition, {
+          show: open,
+          className: "np-bottom-sheet-v2-container",
+          beforeEnter: () => {
+            setFloatingKey(prev => prev + 1);
+          },
+          afterLeave: onCloseEnd,
+          children: [/*#__PURE__*/jsx(Transition.Child, {
+            className: "np-bottom-sheet-v2-backdrop",
+            enterFrom: "np-bottom-sheet-v2-backdrop--closed",
+            leaveTo: "np-bottom-sheet-v2-backdrop--closed"
+          }), /*#__PURE__*/jsx("div", {
+            className: "np-bottom-sheet-v2",
+            children: /*#__PURE__*/jsx(FocusScope, {
+              children: /*#__PURE__*/jsx(FloatingFocusManager, {
+                context: context,
+                initialFocus: initialFocusRef,
+                children: /*#__PURE__*/jsx(Fragment$1, {
+                  children: /*#__PURE__*/jsxs(Transition.Child, {
+                    ref: refs.setFloating,
+                    className: "np-bottom-sheet-v2-content",
+                    enterFrom: "np-bottom-sheet-v2-content--closed",
+                    leaveTo: "np-bottom-sheet-v2-content--closed",
+                    ...getFloatingProps(),
+                    children: [/*#__PURE__*/jsx("div", {
+                      className: "np-bottom-sheet-v2-header",
+                      children: /*#__PURE__*/jsx(CloseButton, {
+                        size: Size.SMALL,
+                        onClick: () => {
+                          onClose?.();
+                        }
+                      })
+                    }), /*#__PURE__*/jsxs("div", {
+                      className: classNames('np-bottom-sheet-v2-content-inner', title && 'np-bottom-sheet-v2-content-inner--has-title', padding === 'md' && 'np-bottom-sheet-v2-content-inner--padding-md'),
+                      children: [title ? /*#__PURE__*/jsx("h2", {
+                        className: "np-bottom-sheet-v2-title np-text-title-body",
+                        children: title
+                      }) : null, /*#__PURE__*/jsx("div", {
+                        className: "np-bottom-sheet-v2-body np-text-body-default",
+                        children: children
+                      })]
+                    })]
+                  })
+                }, floatingKey)
+              })
+            })
+          })]
+        })
+      })
+    })]
+  });
+}
+
+export { BottomSheet };
+//# sourceMappingURL=_BottomSheet.mjs.map

package/build/inputs/_BottomSheet.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"_BottomSheet.mjs","sources":["../../src/inputs/_BottomSheet.tsx"],"sourcesContent":["import {\n  FloatingFocusManager,\n  FloatingPortal,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useRole,\n} from '@floating-ui/react';\nimport { Transition } from '@headlessui/react';\nimport { FocusScope } from '@react-aria/focus';\nimport { ThemeProvider, useTheme } from '@wise/components-theming';\nimport classNames from 'classnames';\nimport { Fragment, useState } from 'react';\n\nimport { CloseButton } from '../common/closeButton';\nimport { useVirtualKeyboard } from '../common/hooks/useVirtualKeyboard';\nimport { PreventScroll } from '../common/preventScroll/PreventScroll';\nimport { Size } from '../common/propsValues/size';\n\nexport interface BottomSheetProps {\n  open: boolean;\n  renderTrigger?: (args: {\n    ref: React.RefCallback<Element>;\n    getInteractionProps: (customEventHandlers?: React.HTMLProps<Element>) => {\n      [key: string]: unknown;\n    };\n  }) => React.ReactNode;\n  title?: string;\n  initialFocusRef?: React.MutableRefObject<HTMLElement | null>;\n  padding?: 'none' | 'md';\n  children?: React.ReactNode;\n  onClose?: () => void;\n  onCloseEnd?: () => void;\n}\n\nexport function BottomSheet({\n  open,\n  renderTrigger,\n  title,\n  initialFocusRef,\n  padding = 'md',\n  children,\n  onClose,\n  onCloseEnd,\n}: BottomSheetProps) {\n  useVirtualKeyboard();\n\n  const { refs, context } = useFloating<Element>({\n    open,\n    onOpenChange: (value) => {\n      if (!value) {\n        onClose?.();\n      }\n    },\n  });\n\n  const dismiss = useDismiss(context);\n  const role = useRole(context);\n  const { getReferenceProps, getFloatingProps } = useInteractions([dismiss, role]);\n\n  const [floatingKey, setFloatingKey] = useState(0);\n\n  const { theme, screenMode } = useTheme();\n\n  return (\n    <>\n      {open ? <PreventScroll /> : null}\n      {renderTrigger?.({\n        ref: refs.setReference,\n        getInteractionProps: getReferenceProps,\n      })}\n\n      <FloatingPortal>\n        <ThemeProvider\n          theme=\"personal\"\n          screenMode={theme === 'personal' ? screenMode : 'light'}\n          isNotRootProvider\n        >\n          <Transition\n            show={open}\n            className=\"np-bottom-sheet-v2-container\"\n            beforeEnter={() => {\n              setFloatingKey((prev) => prev + 1);\n            }}\n            afterLeave={onCloseEnd}\n          >\n            <Transition.Child\n              className=\"np-bottom-sheet-v2-backdrop\"\n              enterFrom=\"np-bottom-sheet-v2-backdrop--closed\"\n              leaveTo=\"np-bottom-sheet-v2-backdrop--closed\"\n            />\n\n            <div className=\"np-bottom-sheet-v2\">\n              <FocusScope>\n                <FloatingFocusManager context={context} initialFocus={initialFocusRef}>\n                  <Fragment\n                    key={floatingKey} // Force inner state invalidation on open\n                  >\n                    <Transition.Child\n                      ref={refs.setFloating}\n                      className=\"np-bottom-sheet-v2-content\"\n                      enterFrom=\"np-bottom-sheet-v2-content--closed\"\n                      leaveTo=\"np-bottom-sheet-v2-content--closed\"\n                      {...getFloatingProps()}\n                    >\n                      <div className=\"np-bottom-sheet-v2-header\">\n                        <CloseButton\n                          size={Size.SMALL}\n                          onClick={() => {\n                            onClose?.();\n                          }}\n                        />\n                      </div>\n                      <div\n                        className={classNames(\n                          'np-bottom-sheet-v2-content-inner',\n                          title && 'np-bottom-sheet-v2-content-inner--has-title',\n                          padding === 'md' && 'np-bottom-sheet-v2-content-inner--padding-md',\n                        )}\n                      >\n                        {title ? (\n                          <h2 className=\"np-bottom-sheet-v2-title np-text-title-body\">{title}</h2>\n                        ) : null}\n                        <div className=\"np-bottom-sheet-v2-body np-text-body-default\">\n                          {children}\n                        </div>\n                      </div>\n                    </Transition.Child>\n                  </Fragment>\n                </FloatingFocusManager>\n              </FocusScope>\n            </div>\n          </Transition>\n        </ThemeProvider>\n      </FloatingPortal>\n    </>\n  );\n}\n"],"names":["BottomSheet","open","renderTrigger","title","initialFocusRef","padding","children","onClose","onCloseEnd","useVirtualKeyboard","refs","context","useFloating","onOpenChange","value","dismiss","useDismiss","role","useRole","getReferenceProps","getFloatingProps","useInteractions","floatingKey","setFloatingKey","useState","theme","screenMode","useTheme","_jsxs","_Fragment","_jsx","PreventScroll","ref","setReference","getInteractionProps","FloatingPortal","ThemeProvider","isNotRootProvider","Transition","show","className","beforeEnter","prev","afterLeave","Child","enterFrom","leaveTo","FocusScope","FloatingFocusManager","initialFocus","Fragment","setFloating","CloseButton","size","Size","SMALL","onClick","classNames"],"mappings":";;;;;;;;;;;;AAmCM,SAAUA,WAAWA,CAAC;EAC1BC,IAAI;EACJC,aAAa;EACbC,KAAK;EACLC,eAAe;AACfC,EAAAA,OAAO,GAAG,IAAI;EACdC,QAAQ;EACRC,OAAO;AACPC,EAAAA,UAAAA;AACiB,CAAA,EAAA;AACjBC,EAAAA,kBAAkB,EAAE,CAAA;EAEpB,MAAM;IAAEC,IAAI;AAAEC,IAAAA,OAAAA;GAAS,GAAGC,WAAW,CAAU;IAC7CX,IAAI;IACJY,YAAY,EAAGC,KAAK,IAAI;MACtB,IAAI,CAACA,KAAK,EAAE;AACVP,QAAAA,OAAO,IAAI,CAAA;AACb,OAAA;AACF,KAAA;AACD,GAAA,CAAC,CAAA;AAEF,EAAA,MAAMQ,OAAO,GAAGC,UAAU,CAACL,OAAO,CAAC,CAAA;AACnC,EAAA,MAAMM,IAAI,GAAGC,OAAO,CAACP,OAAO,CAAC,CAAA;EAC7B,MAAM;IAAEQ,iBAAiB;AAAEC,IAAAA,gBAAAA;GAAkB,GAAGC,eAAe,CAAC,CAACN,OAAO,EAAEE,IAAI,CAAC,CAAC,CAAA;EAEhF,MAAM,CAACK,WAAW,EAAEC,cAAc,CAAC,GAAGC,QAAQ,CAAC,CAAC,CAAC,CAAA;EAEjD,MAAM;IAAEC,KAAK;AAAEC,IAAAA,UAAAA;GAAY,GAAGC,QAAQ,EAAE,CAAA;EAExC,oBACEC,IAAA,CAAAC,QAAA,EAAA;AAAAvB,IAAAA,QAAA,EACGL,CAAAA,IAAI,gBAAG6B,GAAA,CAACC,aAAa,EAAG,EAAA,CAAA,GAAG,IAAI,EAC/B7B,aAAa,GAAG;MACf8B,GAAG,EAAEtB,IAAI,CAACuB,YAAY;AACtBC,MAAAA,mBAAmB,EAAEf,iBAAAA;AACtB,KAAA,CAAC,eAEFW,GAAA,CAACK,cAAc,EAAA;MAAA7B,QAAA,eACbwB,GAAA,CAACM,aAAa,EAAA;AACZX,QAAAA,KAAK,EAAC,UAAU;AAChBC,QAAAA,UAAU,EAAED,KAAK,KAAK,UAAU,GAAGC,UAAU,GAAG,OAAQ;QACxDW,iBAAiB,EAAA,IAAA;QAAA/B,QAAA,eAEjBsB,IAAA,CAACU,UAAU,EAAA;AACTC,UAAAA,IAAI,EAAEtC,IAAK;AACXuC,UAAAA,SAAS,EAAC,8BAA8B;UACxCC,WAAW,EAAEA,MAAK;AAChBlB,YAAAA,cAAc,CAAEmB,IAAI,IAAKA,IAAI,GAAG,CAAC,CAAC,CAAA;WAClC;AACFC,UAAAA,UAAU,EAAEnC,UAAW;AAAAF,UAAAA,QAAA,EAEvBwB,cAAAA,GAAA,CAACQ,UAAU,CAACM,KAAK,EAAA;AACfJ,YAAAA,SAAS,EAAC,6BAA6B;AACvCK,YAAAA,SAAS,EAAC,qCAAqC;AAC/CC,YAAAA,OAAO,EAAC,qCAAA;WAGV,CAAA,eAAAhB,GAAA,CAAA,KAAA,EAAA;AAAKU,YAAAA,SAAS,EAAC,oBAAoB;YAAAlC,QAAA,eACjCwB,GAAA,CAACiB,UAAU,EAAA;cAAAzC,QAAA,eACTwB,GAAA,CAACkB,oBAAoB,EAAA;AAACrC,gBAAAA,OAAO,EAAEA,OAAQ;AAACsC,gBAAAA,YAAY,EAAE7C,eAAgB;gBAAAE,QAAA,eACpEwB,GAAA,CAACoB,UAAQ,EAAA;AAAA5C,kBAAAA,QAAA,eAGPsB,IAAA,CAACU,UAAU,CAACM,KAAK,EAAA;oBACfZ,GAAG,EAAEtB,IAAI,CAACyC,WAAY;AACtBX,oBAAAA,SAAS,EAAC,4BAA4B;AACtCK,oBAAAA,SAAS,EAAC,oCAAoC;AAC9CC,oBAAAA,OAAO,EAAC,oCAAoC;oBAAA,GACxC1B,gBAAgB,EAAE;AAAAd,oBAAAA,QAAA,gBAEtBwB,GAAA,CAAA,KAAA,EAAA;AAAKU,sBAAAA,SAAS,EAAC,2BAA2B;sBAAAlC,QAAA,eACxCwB,GAAA,CAACsB,WAAW,EAAA;wBACVC,IAAI,EAAEC,IAAI,CAACC,KAAM;wBACjBC,OAAO,EAAEA,MAAK;AACZjD,0BAAAA,OAAO,IAAI,CAAA;AACb,yBAAA;uBAEJ,CAAA;qBAAK,CACL,eAAAqB,IAAA,CAAA,KAAA,EAAA;AACEY,sBAAAA,SAAS,EAAEiB,UAAU,CACnB,kCAAkC,EAClCtD,KAAK,IAAI,6CAA6C,EACtDE,OAAO,KAAK,IAAI,IAAI,8CAA8C,CAClE;sBAAAC,QAAA,EAAA,CAEDH,KAAK,gBACJ2B,GAAA,CAAA,IAAA,EAAA;AAAIU,wBAAAA,SAAS,EAAC,6CAA6C;AAAAlC,wBAAAA,QAAA,EAAEH,KAAAA;AAAK,uBAAK,CAAC,GACtE,IAAI,eACR2B,GAAA,CAAA,KAAA,EAAA;AAAKU,wBAAAA,SAAS,EAAC,8CAA8C;AAAAlC,wBAAAA,QAAA,EAC1DA,QAAAA;AAAQ,uBACN,CACP,CAAA;AAAA,qBAAK,CACP,CAAA;mBAAkB,CAAA;AACpB,iBAAA,EAhCOgB,WAgCG,CAAA;eACU,CAAA;aACZ,CAAA;AACd,WAAK,CACP,CAAA;SAAY,CAAA;OACC,CAAA;AACjB,KAAgB,CAClB,CAAA;AAAA,GAAA,CAAG,CAAA;AAEP;;;;"}

package/build/inputs/_ButtonInput.js

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

package/build/inputs/_ButtonInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"_ButtonInput.js","sources":["../../src/inputs/_ButtonInput.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { forwardRef } from 'react';\n\nimport { useInputPaddings } from './InputGroup';\nimport { inputClassNameBase } from './_common';\n\nexport interface ButtonInputProps extends React.ComponentPropsWithRef<'button'> {\n  size?: 'sm' | 'md' | 'lg';\n}\n\nexport const ButtonInput = forwardRef(function ButtonInput(\n  { size = 'md', className, style, ...restProps }: ButtonInputProps,\n  ref: React.ForwardedRef<HTMLButtonElement | null>,\n) {\n  const inputPaddings = useInputPaddings();\n\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      className={classNames(className, inputClassNameBase({ size }), 'np-button-input')}\n      // eslint-disable-next-line react/forbid-dom-props\n      style={{ ...inputPaddings, ...style }}\n      {...restProps}\n    />\n  );\n});\n"],"names":["ButtonInput","forwardRef","size","className","style","restProps","ref","inputPaddings","useInputPaddings","_jsx","type","classNames","inputClassNameBase"],"mappings":";;;;;;;;;;;;MAUaA,WAAW,gBAAGC,gBAAU,CAAC,SAASD,WAAWA,CACxD;AAAEE,EAAAA,IAAI,GAAG,IAAI;EAAEC,SAAS;EAAEC,KAAK;EAAE,GAAGC,SAAAA;AAA6B,CAAA,EACjEC,GAAiD,EAAA;AAEjD,EAAA,MAAMC,aAAa,GAAGC,2BAAgB,EAAE,CAAA;AAExC,EAAA,oBACEC,cAAA,CAAA,QAAA,EAAA;AACEH,IAAAA,GAAG,EAAEA,GAAI;AACTI,IAAAA,IAAI,EAAC,QAAQ;AACbP,IAAAA,SAAS,EAAEQ,2BAAU,CAACR,SAAS,EAAES,0BAAkB,CAAC;AAAEV,MAAAA,IAAAA;KAAM,CAAC,EAAE,iBAAiB,CAAA;AAChF;AAAA;AACAE,IAAAA,KAAK,EAAE;AAAE,MAAA,GAAGG,aAAa;MAAE,GAAGH,KAAAA;KAAQ;IAAA,GAClCC,SAAAA;AAAS,GAAC,CACd,CAAA;AAEN,CAAC;;;;"}

package/build/inputs/_ButtonInput.mjs

@@ -0,0 +1,31 @@
+import classNames from 'classnames';
+import { forwardRef } from 'react';
+import { useInputPaddings } from './InputGroup.mjs';
+import { inputClassNameBase } from './_common.mjs';
+import { jsx } from 'react/jsx-runtime';
+
+const ButtonInput = /*#__PURE__*/forwardRef(function ButtonInput({
+  size = 'md',
+  className,
+  style,
+  ...restProps
+}, ref) {
+  const inputPaddings = useInputPaddings();
+  return /*#__PURE__*/jsx("button", {
+    ref: ref,
+    type: "button",
+    className: classNames(className, inputClassNameBase({
+      size
+    }), 'np-button-input')
+    // eslint-disable-next-line react/forbid-dom-props
+    ,
+    style: {
+      ...inputPaddings,
+      ...style
+    },
+    ...restProps
+  });
+});
+
+export { ButtonInput };
+//# sourceMappingURL=_ButtonInput.mjs.map

package/build/inputs/_ButtonInput.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"_ButtonInput.mjs","sources":["../../src/inputs/_ButtonInput.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { forwardRef } from 'react';\n\nimport { useInputPaddings } from './InputGroup';\nimport { inputClassNameBase } from './_common';\n\nexport interface ButtonInputProps extends React.ComponentPropsWithRef<'button'> {\n  size?: 'sm' | 'md' | 'lg';\n}\n\nexport const ButtonInput = forwardRef(function ButtonInput(\n  { size = 'md', className, style, ...restProps }: ButtonInputProps,\n  ref: React.ForwardedRef<HTMLButtonElement | null>,\n) {\n  const inputPaddings = useInputPaddings();\n\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      className={classNames(className, inputClassNameBase({ size }), 'np-button-input')}\n      // eslint-disable-next-line react/forbid-dom-props\n      style={{ ...inputPaddings, ...style }}\n      {...restProps}\n    />\n  );\n});\n"],"names":["ButtonInput","forwardRef","size","className","style","restProps","ref","inputPaddings","useInputPaddings","_jsx","type","classNames","inputClassNameBase"],"mappings":";;;;;;MAUaA,WAAW,gBAAGC,UAAU,CAAC,SAASD,WAAWA,CACxD;AAAEE,EAAAA,IAAI,GAAG,IAAI;EAAEC,SAAS;EAAEC,KAAK;EAAE,GAAGC,SAAAA;AAA6B,CAAA,EACjEC,GAAiD,EAAA;AAEjD,EAAA,MAAMC,aAAa,GAAGC,gBAAgB,EAAE,CAAA;AAExC,EAAA,oBACEC,GAAA,CAAA,QAAA,EAAA;AACEH,IAAAA,GAAG,EAAEA,GAAI;AACTI,IAAAA,IAAI,EAAC,QAAQ;AACbP,IAAAA,SAAS,EAAEQ,UAAU,CAACR,SAAS,EAAES,kBAAkB,CAAC;AAAEV,MAAAA,IAAAA;KAAM,CAAC,EAAE,iBAAiB,CAAA;AAChF;AAAA;AACAE,IAAAA,KAAK,EAAE;AAAE,MAAA,GAAGG,aAAa;MAAE,GAAGH,KAAAA;KAAQ;IAAA,GAClCC,SAAAA;AAAS,GAAC,CACd,CAAA;AAEN,CAAC;;;;"}

package/build/inputs/_Popover.js

@@ -0,0 +1,120 @@
+'use strict';
+
+var react = require('@floating-ui/react');
+var react$1 = require('@headlessui/react');
+var focus = require('@react-aria/focus');
+var componentsTheming = require('@wise/components-theming');
+var classNames = require('classnames');
+var React = require('react');
+var PreventScroll = require('../common/preventScroll/PreventScroll.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+
+const floatingPadding = 16;
+function Popover({
+  placement,
+  open,
+  renderTrigger,
+  title,
+  size = 'md',
+  padding = 'md',
+  children,
+  onClose,
+  onCloseEnd
+}) {
+  const {
+    refs,
+    floatingStyles,
+    context
+  } = react.useFloating({
+    placement,
+    middleware: [react.offset(8), react.flip({
+      padding: floatingPadding,
+      crossAxis: false
+    }), react.shift(), react.size({
+      padding: floatingPadding,
+      apply: ({
+        elements,
+        rects,
+        availableHeight
+      }) => {
+        elements.floating.style.setProperty('--max-height', `${availableHeight}px`);
+        elements.floating.style.setProperty('--width', `${rects.reference.width}px`);
+      }
+    })],
+    whileElementsMounted: react.autoUpdate,
+    open,
+    onOpenChange: value => {
+      if (!value) {
+        onClose?.();
+      }
+    }
+  });
+  const dismiss = react.useDismiss(context);
+  const role = react.useRole(context);
+  const {
+    getReferenceProps,
+    getFloatingProps
+  } = react.useInteractions([role, dismiss]);
+  const [floatingKey, setFloatingKey] = React.useState(0);
+  const {
+    theme,
+    screenMode
+  } = componentsTheming.useTheme();
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [open ? /*#__PURE__*/jsxRuntime.jsx(PreventScroll.PreventScroll, {}) : null, renderTrigger({
+      ref: refs.setReference,
+      getInteractionProps: getReferenceProps
+    }), /*#__PURE__*/jsxRuntime.jsx(react.FloatingPortal, {
+      children: /*#__PURE__*/jsxRuntime.jsx(componentsTheming.ThemeProvider, {
+        theme: "personal",
+        screenMode: theme === 'personal' ? screenMode : 'light',
+        isNotRootProvider: true,
+        children: /*#__PURE__*/jsxRuntime.jsx(react$1.Transition, {
+          show: open,
+          leave: "transition-opacity",
+          leaveTo: "opacity-0",
+          beforeEnter: () => {
+            setFloatingKey(prev => prev + 1);
+          },
+          afterLeave: onCloseEnd,
+          children: /*#__PURE__*/jsxRuntime.jsx(focus.FocusScope, {
+            children: /*#__PURE__*/jsxRuntime.jsx(react.FloatingFocusManager, {
+              context: context,
+              children: /*#__PURE__*/jsxRuntime.jsx("div", {
+                // Force inner state invalidation on open
+                ref: refs.setFloating,
+                className: classNames__default.default('np-popover-v2-container', {
+                  'np-popover-v2-container--size-md': size === 'md',
+                  'np-popover-v2-container--size-lg': size === 'lg'
+                })
+                // eslint-disable-next-line react/forbid-dom-props
+                ,
+                style: floatingStyles,
+                ...getFloatingProps(),
+                children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+                  className: classNames__default.default('np-popover-v2', title && 'np-popover-v2--has-title', {
+                    'np-popover-v2--padding-md': padding === 'md'
+                  }),
+                  children: [title ? /*#__PURE__*/jsxRuntime.jsx("h2", {
+                    className: "np-popover-v2-title np-text-title-body",
+                    children: title
+                  }) : null, /*#__PURE__*/jsxRuntime.jsx("div", {
+                    className: "np-popover-v2-content np-text-body-default",
+                    children: children
+                  })]
+                })
+              }, floatingKey)
+            })
+          })
+        })
+      })
+    })]
+  });
+}
+
+exports.Popover = Popover;
+//# sourceMappingURL=_Popover.js.map

package/build/inputs/_Popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"_Popover.js","sources":["../../src/inputs/_Popover.tsx"],"sourcesContent":["import {\n  autoUpdate,\n  flip,\n  FloatingFocusManager,\n  FloatingPortal,\n  offset,\n  type Placement,\n  shift,\n  size as floatingSize,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useRole,\n} from '@floating-ui/react';\nimport { Transition } from '@headlessui/react';\nimport { FocusScope } from '@react-aria/focus';\nimport { ThemeProvider, useTheme } from '@wise/components-theming';\nimport classNames from 'classnames';\nimport { useState } from 'react';\n\nimport { PreventScroll } from '../common/preventScroll/PreventScroll';\n\nexport interface PopoverProps {\n  placement?: Placement;\n  open: boolean;\n  renderTrigger: (args: {\n    ref: React.RefCallback<Element>;\n    getInteractionProps: (customEventHandlers?: React.HTMLProps<Element>) => {\n      [key: string]: unknown;\n    };\n  }) => React.ReactNode;\n  title?: string;\n  size?: 'md' | 'lg';\n  padding?: 'none' | 'md';\n  children?: React.ReactNode;\n  onClose?: () => void;\n  onCloseEnd?: () => void;\n}\n\nconst floatingPadding = 16;\n\nexport function Popover({\n  placement,\n  open,\n  renderTrigger,\n  title,\n  size = 'md',\n  padding = 'md',\n  children,\n  onClose,\n  onCloseEnd,\n}: PopoverProps) {\n  const { refs, floatingStyles, context } = useFloating<Element>({\n    placement,\n    middleware: [\n      offset(8),\n      flip({ padding: floatingPadding, crossAxis: false }),\n      shift(),\n      floatingSize({\n        padding: floatingPadding,\n        apply: ({ elements, rects, availableHeight }) => {\n          elements.floating.style.setProperty('--max-height', `${availableHeight}px`);\n          elements.floating.style.setProperty('--width', `${rects.reference.width}px`);\n        },\n      }),\n    ],\n    whileElementsMounted: autoUpdate,\n    open,\n    onOpenChange: (value) => {\n      if (!value) {\n        onClose?.();\n      }\n    },\n  });\n\n  const dismiss = useDismiss(context);\n  const role = useRole(context);\n  const { getReferenceProps, getFloatingProps } = useInteractions([role, dismiss]);\n\n  const [floatingKey, setFloatingKey] = useState(0);\n\n  const { theme, screenMode } = useTheme();\n\n  return (\n    <>\n      {open ? <PreventScroll /> : null}\n      {renderTrigger({\n        ref: refs.setReference,\n        getInteractionProps: getReferenceProps,\n      })}\n\n      <FloatingPortal>\n        <ThemeProvider\n          theme=\"personal\"\n          screenMode={theme === 'personal' ? screenMode : 'light'}\n          isNotRootProvider\n        >\n          <Transition\n            show={open}\n            leave=\"transition-opacity\"\n            leaveTo=\"opacity-0\"\n            beforeEnter={() => {\n              setFloatingKey((prev) => prev + 1);\n            }}\n            afterLeave={onCloseEnd}\n          >\n            <FocusScope>\n              <FloatingFocusManager context={context}>\n                <div\n                  key={floatingKey} // Force inner state invalidation on open\n                  ref={refs.setFloating}\n                  className={classNames('np-popover-v2-container', {\n                    'np-popover-v2-container--size-md': size === 'md',\n                    'np-popover-v2-container--size-lg': size === 'lg',\n                  })}\n                  // eslint-disable-next-line react/forbid-dom-props\n                  style={floatingStyles}\n                  {...getFloatingProps()}\n                >\n                  <div\n                    className={classNames('np-popover-v2', title && 'np-popover-v2--has-title', {\n                      'np-popover-v2--padding-md': padding === 'md',\n                    })}\n                  >\n                    {title ? (\n                      <h2 className=\"np-popover-v2-title np-text-title-body\">{title}</h2>\n                    ) : null}\n                    <div className=\"np-popover-v2-content np-text-body-default\">{children}</div>\n                  </div>\n                </div>\n              </FloatingFocusManager>\n            </FocusScope>\n          </Transition>\n        </ThemeProvider>\n      </FloatingPortal>\n    </>\n  );\n}\n"],"names":["floatingPadding","Popover","placement","open","renderTrigger","title","size","padding","children","onClose","onCloseEnd","refs","floatingStyles","context","useFloating","middleware","offset","flip","crossAxis","shift","floatingSize","apply","elements","rects","availableHeight","floating","style","setProperty","reference","width","whileElementsMounted","autoUpdate","onOpenChange","value","dismiss","useDismiss","role","useRole","getReferenceProps","getFloatingProps","useInteractions","floatingKey","setFloatingKey","useState","theme","screenMode","useTheme","_jsxs","_Fragment","_jsx","PreventScroll","ref","setReference","getInteractionProps","FloatingPortal","ThemeProvider","isNotRootProvider","Transition","show","leave","leaveTo","beforeEnter","prev","afterLeave","FocusScope","FloatingFocusManager","setFloating","className","classNames"],"mappings":"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"}