@transferwise/components 0.0.0-experimental-ea80215 → 0.0.0-experimental-e4e09f5

package/build/dateLookup/dateTrigger/DateTrigger.js

@@ -7,7 +7,9 @@ var CloseButton = require('../../common/closeButton/CloseButton.js');
 var DateTrigger_messages = require('./DateTrigger.messages.js');
 var React = require('react');
 var OverlayIdProvider = require('../../provider/overlay/OverlayIdProvider.js');
+var Body = require('../../body/Body.js');
 var jsxRuntime = require('react/jsx-runtime');
+var typography = require('../../common/propsValues/typography.js');
 var position = require('../../common/propsValues/position.js');
 var size = require('../../common/propsValues/size.js');
 
@@ -35,11 +37,13 @@ const DateTrigger = ({
       disabled: disabled,
       type: "button",
       onClick: onClick,
-      children: [label && /*#__PURE__*/jsxRuntime.jsx("span", {
-        className: "control-label small m-r-1",
+      children: [label && /*#__PURE__*/jsxRuntime.jsx(Body, {
+        as: "span",
+        className: "np-date-trigger-label m-r-1",
         children: label
-      }), selectedDate ? /*#__PURE__*/jsxRuntime.jsx("span", {
-        className: "font-weight-normal",
+      }), selectedDate ? /*#__PURE__*/jsxRuntime.jsx(Body, {
+        as: "span",
+        type: typography.Typography.BODY_LARGE,
         children: formatting.formatDate(selectedDate, locale, {
           day: 'numeric',
           month: monthFormat,

package/build/dateLookup/dateTrigger/DateTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateTrigger.js","sources":["../../../src/dateLookup/dateTrigger/DateTrigger.tsx"],"sourcesContent":["import { formatDate } from '@transferwise/formatting';\nimport { useIntl } from 'react-intl';\n\nimport Chevron from '../../chevron';\nimport { Size, Position, SizeSmall, SizeMedium, SizeLarge } from '../../common';\nimport { CloseButton } from '../../common/closeButton/CloseButton';\n\nimport messages from './DateTrigger.messages';\nimport { useContext } from 'react';\nimport { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider';\n\ninterface DateTriggerProps {\n  selectedDate: Date | null;\n  size: SizeSmall | SizeMedium | SizeLarge;\n  placeholder: string;\n  label: string;\n  monthFormat: 'short' | 'long';\n  disabled: boolean;\n  onClick: () => void;\n  onClear?: () => void;\n}\n\nconst DateTrigger: React.FC<DateTriggerProps> = ({\n  selectedDate,\n  size = Size.MEDIUM,\n  placeholder,\n  label,\n  monthFormat,\n  disabled,\n  onClick,\n  onClear,\n}) => {\n  const { locale, formatMessage } = useIntl();\n\n  const overlayId = useContext(OverlayIdContext);\n\n  return (\n    <>\n      <button\n        aria-haspopup=\"dialog\"\n        aria-expanded={overlayId != null}\n        aria-controls={overlayId}\n        className={`btn btn-${size} btn-input np-date-trigger`}\n        disabled={disabled}\n        type=\"button\"\n        onClick={onClick}\n      >\n        {label && <span className=\"control-label small m-r-1\">{label}</span>}\n        {selectedDate ? (\n          <span className=\"font-weight-normal\">\n            {formatDate(selectedDate, locale, {\n              day: 'numeric',\n              month: monthFormat,\n              year: 'numeric',\n            })}\n          </span>\n        ) : (\n          <span\n            className=\"form-control-placeholder visible-xs-inline visible-sm-inline\n                       visible-md-inline visible-lg-inline visible-xl-inline\"\n          >\n            {placeholder}\n          </span>\n        )}\n        {!onClear ? <Chevron orientation={Position.BOTTOM} disabled={disabled} /> : null}\n      </button>\n      {onClear ? (\n        <>\n          <div className=\"clearfix\" />\n          <span className=\"input-group-addon\">\n            <CloseButton\n              className={`clear-btn clear-btn--${size}`}\n              aria-label={`${formatMessage(messages.ariaLabel)} ${label}`}\n              size={Size.SMALL}\n              onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n                event.stopPropagation();\n                event.preventDefault();\n                onClear();\n              }}\n            />\n          </span>\n        </>\n      ) : null}\n    </>\n  );\n};\n\nexport default DateTrigger;\n"],"names":["DateTrigger","selectedDate","size","Size","MEDIUM","placeholder","label","monthFormat","disabled","onClick","onClear","locale","formatMessage","useIntl","overlayId","useContext","OverlayIdContext","_jsxs","_Fragment","children","className","type","_jsx","formatDate","day","month","year","Chevron","orientation","Position","BOTTOM","CloseButton","messages","ariaLabel","SMALL","event","stopPropagation","preventDefault"],"mappings":";;;;;;;;;;;;;AAsBMA,MAAAA,WAAW,GAA+BA,CAAC;EAC/CC,YAAY;QACZC,MAAI,GAAGC,SAAI,CAACC,MAAM;EAClBC,WAAW;EACXC,KAAK;EACLC,WAAW;EACXC,QAAQ;EACRC,OAAO;AACPC,EAAAA,OAAAA;AACD,CAAA,KAAI;EACH,MAAM;IAAEC,MAAM;AAAEC,IAAAA,aAAAA;GAAe,GAAGC,iBAAO,EAAE,CAAA;AAE3C,EAAA,MAAMC,SAAS,GAAGC,gBAAU,CAACC,kCAAgB,CAAC,CAAA;EAE9C,oBACEC,eAAA,CAAAC,mBAAA,EAAA;AAAAC,IAAAA,QAAA,gBACEF,eAAA,CAAA,QAAA,EAAA;AACE,MAAA,eAAA,EAAc,QAAQ;MACtB,eAAeH,EAAAA,SAAS,IAAI,IAAK;AACjC,MAAA,eAAA,EAAeA,SAAU;MACzBM,SAAS,EAAE,CAAWlB,QAAAA,EAAAA,MAAI,CAA6B,0BAAA,CAAA;AACvDM,MAAAA,QAAQ,EAAEA,QAAS;AACnBa,MAAAA,IAAI,EAAC,QAAQ;AACbZ,MAAAA,OAAO,EAAEA,OAAQ;MAAAU,QAAA,EAAA,CAEhBb,KAAK,iBAAIgB,cAAA,CAAA,MAAA,EAAA;AAAMF,QAAAA,SAAS,EAAC,2BAA2B;AAAAD,QAAAA,QAAA,EAAEb,KAAAA;AAAK,OAAO,CAAC,EACnEL,YAAY,gBACXqB,cAAA,CAAA,MAAA,EAAA;AAAMF,QAAAA,SAAS,EAAC,oBAAoB;AAAAD,QAAAA,QAAA,EACjCI,qBAAU,CAACtB,YAAY,EAAEU,MAAM,EAAE;AAChCa,UAAAA,GAAG,EAAE,SAAS;AACdC,UAAAA,KAAK,EAAElB,WAAW;AAClBmB,UAAAA,IAAI,EAAE,SAAA;SACP,CAAA;OACG,CAAC,gBAEPJ,cAAA,CAAA,MAAA,EAAA;AACEF,QAAAA,SAAS,EAAC,oHACuD;AAAAD,QAAAA,QAAA,EAEhEd,WAAAA;AAAW,OACR,CACP,EACA,CAACK,OAAO,gBAAGY,cAAA,CAACK,OAAO,EAAA;QAACC,WAAW,EAAEC,iBAAQ,CAACC,MAAO;AAACtB,QAAAA,QAAQ,EAAEA,QAAAA;OAAS,CAAG,GAAG,IAAI,CAAA;AAAA,KAC1E,CACR,EAACE,OAAO,gBACNO,eAAA,CAAAC,mBAAA,EAAA;AAAAC,MAAAA,QAAA,gBACEG,cAAA,CAAA,KAAA,EAAA;AAAKF,QAAAA,SAAS,EAAC,UAAA;OACf,CAAA,eAAAE,cAAA,CAAA,MAAA,EAAA;AAAMF,QAAAA,SAAS,EAAC,mBAAmB;QAAAD,QAAA,eACjCG,cAAA,CAACS,uBAAW,EAAA;UACVX,SAAS,EAAE,CAAwBlB,qBAAAA,EAAAA,MAAI,CAAG,CAAA;UAC1C,YAAY,EAAA,CAAA,EAAGU,aAAa,CAACoB,oBAAQ,CAACC,SAAS,CAAC,CAAI3B,CAAAA,EAAAA,KAAK,CAAG,CAAA;UAC5DJ,IAAI,EAAEC,SAAI,CAAC+B,KAAM;UACjBzB,OAAO,EAAG0B,KAA0C,IAAI;YACtDA,KAAK,CAACC,eAAe,EAAE,CAAA;YACvBD,KAAK,CAACE,cAAc,EAAE,CAAA;AACtB3B,YAAAA,OAAO,EAAE,CAAA;AACX,WAAA;SAEJ,CAAA;AAAA,OAAM,CACR,CAAA;KAAA,CAAG,GACD,IAAI,CAAA;AAAA,GACV,CAAG,CAAA;AAEP;;;;"}
+{"version":3,"file":"DateTrigger.js","sources":["../../../src/dateLookup/dateTrigger/DateTrigger.tsx"],"sourcesContent":["import { formatDate } from '@transferwise/formatting';\nimport { useIntl } from 'react-intl';\n\nimport Chevron from '../../chevron';\nimport { Size, Position, SizeSmall, SizeMedium, SizeLarge, Typography } from '../../common';\nimport { CloseButton } from '../../common/closeButton/CloseButton';\n\nimport messages from './DateTrigger.messages';\nimport { useContext } from 'react';\nimport { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider';\nimport Body from '../../body';\n\ninterface DateTriggerProps {\n  selectedDate: Date | null;\n  size: SizeSmall | SizeMedium | SizeLarge;\n  placeholder: string;\n  label: string;\n  monthFormat: 'short' | 'long';\n  disabled: boolean;\n  onClick: () => void;\n  onClear?: () => void;\n}\n\nconst DateTrigger: React.FC<DateTriggerProps> = ({\n  selectedDate,\n  size = Size.MEDIUM,\n  placeholder,\n  label,\n  monthFormat,\n  disabled,\n  onClick,\n  onClear,\n}) => {\n  const { locale, formatMessage } = useIntl();\n\n  const overlayId = useContext(OverlayIdContext);\n\n  return (\n    <>\n      <button\n        aria-haspopup=\"dialog\"\n        aria-expanded={overlayId != null}\n        aria-controls={overlayId}\n        className={`btn btn-${size} btn-input np-date-trigger`}\n        disabled={disabled}\n        type=\"button\"\n        onClick={onClick}\n      >\n        {label && (\n          <Body as=\"span\" className=\"np-date-trigger-label m-r-1\">\n            {label}\n          </Body>\n        )}\n        {selectedDate ? (\n          <Body as=\"span\" type={Typography.BODY_LARGE}>\n            {formatDate(selectedDate, locale, {\n              day: 'numeric',\n              month: monthFormat,\n              year: 'numeric',\n            })}\n          </Body>\n        ) : (\n          <span\n            className=\"form-control-placeholder visible-xs-inline visible-sm-inline\n                       visible-md-inline visible-lg-inline visible-xl-inline\"\n          >\n            {placeholder}\n          </span>\n        )}\n        {!onClear ? <Chevron orientation={Position.BOTTOM} disabled={disabled} /> : null}\n      </button>\n      {onClear ? (\n        <>\n          <div className=\"clearfix\" />\n          <span className=\"input-group-addon\">\n            <CloseButton\n              className={`clear-btn clear-btn--${size}`}\n              aria-label={`${formatMessage(messages.ariaLabel)} ${label}`}\n              size={Size.SMALL}\n              onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n                event.stopPropagation();\n                event.preventDefault();\n                onClear();\n              }}\n            />\n          </span>\n        </>\n      ) : null}\n    </>\n  );\n};\n\nexport default DateTrigger;\n"],"names":["DateTrigger","selectedDate","size","Size","MEDIUM","placeholder","label","monthFormat","disabled","onClick","onClear","locale","formatMessage","useIntl","overlayId","useContext","OverlayIdContext","_jsxs","_Fragment","children","className","type","_jsx","Body","as","Typography","BODY_LARGE","formatDate","day","month","year","Chevron","orientation","Position","BOTTOM","CloseButton","messages","ariaLabel","SMALL","event","stopPropagation","preventDefault"],"mappings":";;;;;;;;;;;;;;;AAuBMA,MAAAA,WAAW,GAA+BA,CAAC;EAC/CC,YAAY;QACZC,MAAI,GAAGC,SAAI,CAACC,MAAM;EAClBC,WAAW;EACXC,KAAK;EACLC,WAAW;EACXC,QAAQ;EACRC,OAAO;AACPC,EAAAA,OAAAA;AACD,CAAA,KAAI;EACH,MAAM;IAAEC,MAAM;AAAEC,IAAAA,aAAAA;GAAe,GAAGC,iBAAO,EAAE,CAAA;AAE3C,EAAA,MAAMC,SAAS,GAAGC,gBAAU,CAACC,kCAAgB,CAAC,CAAA;EAE9C,oBACEC,eAAA,CAAAC,mBAAA,EAAA;AAAAC,IAAAA,QAAA,gBACEF,eAAA,CAAA,QAAA,EAAA;AACE,MAAA,eAAA,EAAc,QAAQ;MACtB,eAAeH,EAAAA,SAAS,IAAI,IAAK;AACjC,MAAA,eAAA,EAAeA,SAAU;MACzBM,SAAS,EAAE,CAAWlB,QAAAA,EAAAA,MAAI,CAA6B,0BAAA,CAAA;AACvDM,MAAAA,QAAQ,EAAEA,QAAS;AACnBa,MAAAA,IAAI,EAAC,QAAQ;AACbZ,MAAAA,OAAO,EAAEA,OAAQ;AAAAU,MAAAA,QAAA,EAEhBb,CAAAA,KAAK,iBACJgB,cAAA,CAACC,IAAI,EAAA;AAACC,QAAAA,EAAE,EAAC,MAAM;AAACJ,QAAAA,SAAS,EAAC,6BAA6B;AAAAD,QAAAA,QAAA,EACpDb,KAAAA;AAAK,OACF,CACP,EACAL,YAAY,gBACXqB,cAAA,CAACC,IAAI,EAAA;AAACC,QAAAA,EAAE,EAAC,MAAM;QAACH,IAAI,EAAEI,qBAAU,CAACC,UAAW;AAAAP,QAAAA,QAAA,EACzCQ,qBAAU,CAAC1B,YAAY,EAAEU,MAAM,EAAE;AAChCiB,UAAAA,GAAG,EAAE,SAAS;AACdC,UAAAA,KAAK,EAAEtB,WAAW;AAClBuB,UAAAA,IAAI,EAAE,SAAA;SACP,CAAA;OACG,CAAC,gBAEPR,cAAA,CAAA,MAAA,EAAA;AACEF,QAAAA,SAAS,EAAC,oHACuD;AAAAD,QAAAA,QAAA,EAEhEd,WAAAA;AAAW,OACR,CACP,EACA,CAACK,OAAO,gBAAGY,cAAA,CAACS,OAAO,EAAA;QAACC,WAAW,EAAEC,iBAAQ,CAACC,MAAO;AAAC1B,QAAAA,QAAQ,EAAEA,QAAAA;OAAS,CAAG,GAAG,IAAI,CAAA;AAAA,KAC1E,CACR,EAACE,OAAO,gBACNO,eAAA,CAAAC,mBAAA,EAAA;AAAAC,MAAAA,QAAA,gBACEG,cAAA,CAAA,KAAA,EAAA;AAAKF,QAAAA,SAAS,EAAC,UAAA;OACf,CAAA,eAAAE,cAAA,CAAA,MAAA,EAAA;AAAMF,QAAAA,SAAS,EAAC,mBAAmB;QAAAD,QAAA,eACjCG,cAAA,CAACa,uBAAW,EAAA;UACVf,SAAS,EAAE,CAAwBlB,qBAAAA,EAAAA,MAAI,CAAG,CAAA;UAC1C,YAAY,EAAA,CAAA,EAAGU,aAAa,CAACwB,oBAAQ,CAACC,SAAS,CAAC,CAAI/B,CAAAA,EAAAA,KAAK,CAAG,CAAA;UAC5DJ,IAAI,EAAEC,SAAI,CAACmC,KAAM;UACjB7B,OAAO,EAAG8B,KAA0C,IAAI;YACtDA,KAAK,CAACC,eAAe,EAAE,CAAA;YACvBD,KAAK,CAACE,cAAc,EAAE,CAAA;AACtB/B,YAAAA,OAAO,EAAE,CAAA;AACX,WAAA;SAEJ,CAAA;AAAA,OAAM,CACR,CAAA;KAAA,CAAG,GACD,IAAI,CAAA;AAAA,GACV,CAAG,CAAA;AAEP;;;;"}

package/build/dateLookup/dateTrigger/DateTrigger.mjs

@@ -5,7 +5,9 @@ import { CloseButton } from '../../common/closeButton/CloseButton.mjs';
 import dateTriggerMessages from './DateTrigger.messages.mjs';
 import { useContext } from 'react';
 import { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider.mjs';
+import Body from '../../body/Body.mjs';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Typography } from '../../common/propsValues/typography.mjs';
 import { Position } from '../../common/propsValues/position.mjs';
 import { Size } from '../../common/propsValues/size.mjs';
 
@@ -33,11 +35,13 @@ const DateTrigger = ({
       disabled: disabled,
       type: "button",
       onClick: onClick,
-      children: [label && /*#__PURE__*/jsx("span", {
-        className: "control-label small m-r-1",
+      children: [label && /*#__PURE__*/jsx(Body, {
+        as: "span",
+        className: "np-date-trigger-label m-r-1",
         children: label
-      }), selectedDate ? /*#__PURE__*/jsx("span", {
-        className: "font-weight-normal",
+      }), selectedDate ? /*#__PURE__*/jsx(Body, {
+        as: "span",
+        type: Typography.BODY_LARGE,
         children: formatDate(selectedDate, locale, {
           day: 'numeric',
           month: monthFormat,

package/build/dateLookup/dateTrigger/DateTrigger.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DateTrigger.mjs","sources":["../../../src/dateLookup/dateTrigger/DateTrigger.tsx"],"sourcesContent":["import { formatDate } from '@transferwise/formatting';\nimport { useIntl } from 'react-intl';\n\nimport Chevron from '../../chevron';\nimport { Size, Position, SizeSmall, SizeMedium, SizeLarge } from '../../common';\nimport { CloseButton } from '../../common/closeButton/CloseButton';\n\nimport messages from './DateTrigger.messages';\nimport { useContext } from 'react';\nimport { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider';\n\ninterface DateTriggerProps {\n  selectedDate: Date | null;\n  size: SizeSmall | SizeMedium | SizeLarge;\n  placeholder: string;\n  label: string;\n  monthFormat: 'short' | 'long';\n  disabled: boolean;\n  onClick: () => void;\n  onClear?: () => void;\n}\n\nconst DateTrigger: React.FC<DateTriggerProps> = ({\n  selectedDate,\n  size = Size.MEDIUM,\n  placeholder,\n  label,\n  monthFormat,\n  disabled,\n  onClick,\n  onClear,\n}) => {\n  const { locale, formatMessage } = useIntl();\n\n  const overlayId = useContext(OverlayIdContext);\n\n  return (\n    <>\n      <button\n        aria-haspopup=\"dialog\"\n        aria-expanded={overlayId != null}\n        aria-controls={overlayId}\n        className={`btn btn-${size} btn-input np-date-trigger`}\n        disabled={disabled}\n        type=\"button\"\n        onClick={onClick}\n      >\n        {label && <span className=\"control-label small m-r-1\">{label}</span>}\n        {selectedDate ? (\n          <span className=\"font-weight-normal\">\n            {formatDate(selectedDate, locale, {\n              day: 'numeric',\n              month: monthFormat,\n              year: 'numeric',\n            })}\n          </span>\n        ) : (\n          <span\n            className=\"form-control-placeholder visible-xs-inline visible-sm-inline\n                       visible-md-inline visible-lg-inline visible-xl-inline\"\n          >\n            {placeholder}\n          </span>\n        )}\n        {!onClear ? <Chevron orientation={Position.BOTTOM} disabled={disabled} /> : null}\n      </button>\n      {onClear ? (\n        <>\n          <div className=\"clearfix\" />\n          <span className=\"input-group-addon\">\n            <CloseButton\n              className={`clear-btn clear-btn--${size}`}\n              aria-label={`${formatMessage(messages.ariaLabel)} ${label}`}\n              size={Size.SMALL}\n              onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n                event.stopPropagation();\n                event.preventDefault();\n                onClear();\n              }}\n            />\n          </span>\n        </>\n      ) : null}\n    </>\n  );\n};\n\nexport default DateTrigger;\n"],"names":["DateTrigger","selectedDate","size","Size","MEDIUM","placeholder","label","monthFormat","disabled","onClick","onClear","locale","formatMessage","useIntl","overlayId","useContext","OverlayIdContext","_jsxs","_Fragment","children","className","type","_jsx","formatDate","day","month","year","Chevron","orientation","Position","BOTTOM","CloseButton","messages","ariaLabel","SMALL","event","stopPropagation","preventDefault"],"mappings":";;;;;;;;;;;AAsBMA,MAAAA,WAAW,GAA+BA,CAAC;EAC/CC,YAAY;EACZC,IAAI,GAAGC,IAAI,CAACC,MAAM;EAClBC,WAAW;EACXC,KAAK;EACLC,WAAW;EACXC,QAAQ;EACRC,OAAO;AACPC,EAAAA,OAAAA;AACD,CAAA,KAAI;EACH,MAAM;IAAEC,MAAM;AAAEC,IAAAA,aAAAA;GAAe,GAAGC,OAAO,EAAE,CAAA;AAE3C,EAAA,MAAMC,SAAS,GAAGC,UAAU,CAACC,gBAAgB,CAAC,CAAA;EAE9C,oBACEC,IAAA,CAAAC,QAAA,EAAA;AAAAC,IAAAA,QAAA,gBACEF,IAAA,CAAA,QAAA,EAAA;AACE,MAAA,eAAA,EAAc,QAAQ;MACtB,eAAeH,EAAAA,SAAS,IAAI,IAAK;AACjC,MAAA,eAAA,EAAeA,SAAU;MACzBM,SAAS,EAAE,CAAWlB,QAAAA,EAAAA,IAAI,CAA6B,0BAAA,CAAA;AACvDM,MAAAA,QAAQ,EAAEA,QAAS;AACnBa,MAAAA,IAAI,EAAC,QAAQ;AACbZ,MAAAA,OAAO,EAAEA,OAAQ;MAAAU,QAAA,EAAA,CAEhBb,KAAK,iBAAIgB,GAAA,CAAA,MAAA,EAAA;AAAMF,QAAAA,SAAS,EAAC,2BAA2B;AAAAD,QAAAA,QAAA,EAAEb,KAAAA;AAAK,OAAO,CAAC,EACnEL,YAAY,gBACXqB,GAAA,CAAA,MAAA,EAAA;AAAMF,QAAAA,SAAS,EAAC,oBAAoB;AAAAD,QAAAA,QAAA,EACjCI,UAAU,CAACtB,YAAY,EAAEU,MAAM,EAAE;AAChCa,UAAAA,GAAG,EAAE,SAAS;AACdC,UAAAA,KAAK,EAAElB,WAAW;AAClBmB,UAAAA,IAAI,EAAE,SAAA;SACP,CAAA;OACG,CAAC,gBAEPJ,GAAA,CAAA,MAAA,EAAA;AACEF,QAAAA,SAAS,EAAC,oHACuD;AAAAD,QAAAA,QAAA,EAEhEd,WAAAA;AAAW,OACR,CACP,EACA,CAACK,OAAO,gBAAGY,GAAA,CAACK,OAAO,EAAA;QAACC,WAAW,EAAEC,QAAQ,CAACC,MAAO;AAACtB,QAAAA,QAAQ,EAAEA,QAAAA;OAAS,CAAG,GAAG,IAAI,CAAA;AAAA,KAC1E,CACR,EAACE,OAAO,gBACNO,IAAA,CAAAC,QAAA,EAAA;AAAAC,MAAAA,QAAA,gBACEG,GAAA,CAAA,KAAA,EAAA;AAAKF,QAAAA,SAAS,EAAC,UAAA;OACf,CAAA,eAAAE,GAAA,CAAA,MAAA,EAAA;AAAMF,QAAAA,SAAS,EAAC,mBAAmB;QAAAD,QAAA,eACjCG,GAAA,CAACS,WAAW,EAAA;UACVX,SAAS,EAAE,CAAwBlB,qBAAAA,EAAAA,IAAI,CAAG,CAAA;UAC1C,YAAY,EAAA,CAAA,EAAGU,aAAa,CAACoB,mBAAQ,CAACC,SAAS,CAAC,CAAI3B,CAAAA,EAAAA,KAAK,CAAG,CAAA;UAC5DJ,IAAI,EAAEC,IAAI,CAAC+B,KAAM;UACjBzB,OAAO,EAAG0B,KAA0C,IAAI;YACtDA,KAAK,CAACC,eAAe,EAAE,CAAA;YACvBD,KAAK,CAACE,cAAc,EAAE,CAAA;AACtB3B,YAAAA,OAAO,EAAE,CAAA;AACX,WAAA;SAEJ,CAAA;AAAA,OAAM,CACR,CAAA;KAAA,CAAG,GACD,IAAI,CAAA;AAAA,GACV,CAAG,CAAA;AAEP;;;;"}
+{"version":3,"file":"DateTrigger.mjs","sources":["../../../src/dateLookup/dateTrigger/DateTrigger.tsx"],"sourcesContent":["import { formatDate } from '@transferwise/formatting';\nimport { useIntl } from 'react-intl';\n\nimport Chevron from '../../chevron';\nimport { Size, Position, SizeSmall, SizeMedium, SizeLarge, Typography } from '../../common';\nimport { CloseButton } from '../../common/closeButton/CloseButton';\n\nimport messages from './DateTrigger.messages';\nimport { useContext } from 'react';\nimport { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider';\nimport Body from '../../body';\n\ninterface DateTriggerProps {\n  selectedDate: Date | null;\n  size: SizeSmall | SizeMedium | SizeLarge;\n  placeholder: string;\n  label: string;\n  monthFormat: 'short' | 'long';\n  disabled: boolean;\n  onClick: () => void;\n  onClear?: () => void;\n}\n\nconst DateTrigger: React.FC<DateTriggerProps> = ({\n  selectedDate,\n  size = Size.MEDIUM,\n  placeholder,\n  label,\n  monthFormat,\n  disabled,\n  onClick,\n  onClear,\n}) => {\n  const { locale, formatMessage } = useIntl();\n\n  const overlayId = useContext(OverlayIdContext);\n\n  return (\n    <>\n      <button\n        aria-haspopup=\"dialog\"\n        aria-expanded={overlayId != null}\n        aria-controls={overlayId}\n        className={`btn btn-${size} btn-input np-date-trigger`}\n        disabled={disabled}\n        type=\"button\"\n        onClick={onClick}\n      >\n        {label && (\n          <Body as=\"span\" className=\"np-date-trigger-label m-r-1\">\n            {label}\n          </Body>\n        )}\n        {selectedDate ? (\n          <Body as=\"span\" type={Typography.BODY_LARGE}>\n            {formatDate(selectedDate, locale, {\n              day: 'numeric',\n              month: monthFormat,\n              year: 'numeric',\n            })}\n          </Body>\n        ) : (\n          <span\n            className=\"form-control-placeholder visible-xs-inline visible-sm-inline\n                       visible-md-inline visible-lg-inline visible-xl-inline\"\n          >\n            {placeholder}\n          </span>\n        )}\n        {!onClear ? <Chevron orientation={Position.BOTTOM} disabled={disabled} /> : null}\n      </button>\n      {onClear ? (\n        <>\n          <div className=\"clearfix\" />\n          <span className=\"input-group-addon\">\n            <CloseButton\n              className={`clear-btn clear-btn--${size}`}\n              aria-label={`${formatMessage(messages.ariaLabel)} ${label}`}\n              size={Size.SMALL}\n              onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n                event.stopPropagation();\n                event.preventDefault();\n                onClear();\n              }}\n            />\n          </span>\n        </>\n      ) : null}\n    </>\n  );\n};\n\nexport default DateTrigger;\n"],"names":["DateTrigger","selectedDate","size","Size","MEDIUM","placeholder","label","monthFormat","disabled","onClick","onClear","locale","formatMessage","useIntl","overlayId","useContext","OverlayIdContext","_jsxs","_Fragment","children","className","type","_jsx","Body","as","Typography","BODY_LARGE","formatDate","day","month","year","Chevron","orientation","Position","BOTTOM","CloseButton","messages","ariaLabel","SMALL","event","stopPropagation","preventDefault"],"mappings":";;;;;;;;;;;;;AAuBMA,MAAAA,WAAW,GAA+BA,CAAC;EAC/CC,YAAY;EACZC,IAAI,GAAGC,IAAI,CAACC,MAAM;EAClBC,WAAW;EACXC,KAAK;EACLC,WAAW;EACXC,QAAQ;EACRC,OAAO;AACPC,EAAAA,OAAAA;AACD,CAAA,KAAI;EACH,MAAM;IAAEC,MAAM;AAAEC,IAAAA,aAAAA;GAAe,GAAGC,OAAO,EAAE,CAAA;AAE3C,EAAA,MAAMC,SAAS,GAAGC,UAAU,CAACC,gBAAgB,CAAC,CAAA;EAE9C,oBACEC,IAAA,CAAAC,QAAA,EAAA;AAAAC,IAAAA,QAAA,gBACEF,IAAA,CAAA,QAAA,EAAA;AACE,MAAA,eAAA,EAAc,QAAQ;MACtB,eAAeH,EAAAA,SAAS,IAAI,IAAK;AACjC,MAAA,eAAA,EAAeA,SAAU;MACzBM,SAAS,EAAE,CAAWlB,QAAAA,EAAAA,IAAI,CAA6B,0BAAA,CAAA;AACvDM,MAAAA,QAAQ,EAAEA,QAAS;AACnBa,MAAAA,IAAI,EAAC,QAAQ;AACbZ,MAAAA,OAAO,EAAEA,OAAQ;AAAAU,MAAAA,QAAA,EAEhBb,CAAAA,KAAK,iBACJgB,GAAA,CAACC,IAAI,EAAA;AAACC,QAAAA,EAAE,EAAC,MAAM;AAACJ,QAAAA,SAAS,EAAC,6BAA6B;AAAAD,QAAAA,QAAA,EACpDb,KAAAA;AAAK,OACF,CACP,EACAL,YAAY,gBACXqB,GAAA,CAACC,IAAI,EAAA;AAACC,QAAAA,EAAE,EAAC,MAAM;QAACH,IAAI,EAAEI,UAAU,CAACC,UAAW;AAAAP,QAAAA,QAAA,EACzCQ,UAAU,CAAC1B,YAAY,EAAEU,MAAM,EAAE;AAChCiB,UAAAA,GAAG,EAAE,SAAS;AACdC,UAAAA,KAAK,EAAEtB,WAAW;AAClBuB,UAAAA,IAAI,EAAE,SAAA;SACP,CAAA;OACG,CAAC,gBAEPR,GAAA,CAAA,MAAA,EAAA;AACEF,QAAAA,SAAS,EAAC,oHACuD;AAAAD,QAAAA,QAAA,EAEhEd,WAAAA;AAAW,OACR,CACP,EACA,CAACK,OAAO,gBAAGY,GAAA,CAACS,OAAO,EAAA;QAACC,WAAW,EAAEC,QAAQ,CAACC,MAAO;AAAC1B,QAAAA,QAAQ,EAAEA,QAAAA;OAAS,CAAG,GAAG,IAAI,CAAA;AAAA,KAC1E,CACR,EAACE,OAAO,gBACNO,IAAA,CAAAC,QAAA,EAAA;AAAAC,MAAAA,QAAA,gBACEG,GAAA,CAAA,KAAA,EAAA;AAAKF,QAAAA,SAAS,EAAC,UAAA;OACf,CAAA,eAAAE,GAAA,CAAA,MAAA,EAAA;AAAMF,QAAAA,SAAS,EAAC,mBAAmB;QAAAD,QAAA,eACjCG,GAAA,CAACa,WAAW,EAAA;UACVf,SAAS,EAAE,CAAwBlB,qBAAAA,EAAAA,IAAI,CAAG,CAAA;UAC1C,YAAY,EAAA,CAAA,EAAGU,aAAa,CAACwB,mBAAQ,CAACC,SAAS,CAAC,CAAI/B,CAAAA,EAAAA,KAAK,CAAG,CAAA;UAC5DJ,IAAI,EAAEC,IAAI,CAACmC,KAAM;UACjB7B,OAAO,EAAG8B,KAA0C,IAAI;YACtDA,KAAK,CAACC,eAAe,EAAE,CAAA;YACvBD,KAAK,CAACE,cAAc,EAAE,CAAA;AACtB/B,YAAAA,OAAO,EAAE,CAAA;AACX,WAAA;SAEJ,CAAA;AAAA,OAAM,CACR,CAAA;KAAA,CAAG,GACD,IAAI,CAAA;AAAA,GACV,CAAG,CAAA;AAEP;;;;"}

package/build/field/Field.js

@@ -11,14 +11,17 @@ var sentiment = require('../common/propsValues/sentiment.js');
 const Field = ({
   id,
   label,
+  required = false,
   message: propMessage,
+  hint,
+  description = hint,
   sentiment: propType = sentiment.Sentiment.NEUTRAL,
   className,
   children,
   ...props
 }) => {
   const sentiment$1 = props.error ? sentiment.Sentiment.NEGATIVE : propType;
-  const message = props.error || props.hint || propMessage;
+  const message = propMessage || props.error;
   const hasError = sentiment$1 === sentiment.Sentiment.NEGATIVE;
   const labelId = React.useId();
   const fallbackInputId = React.useId();
@@ -42,7 +45,11 @@ const Field = ({
             children: [label != null ? /*#__PURE__*/jsxRuntime.jsxs(Label.Label, {
               id: labelId,
               htmlFor: inputId,
-              children: [label, children]
+              children: [required ? label : /*#__PURE__*/jsxRuntime.jsx(Label.Label.Optional, {
+                children: label
+              }), description && /*#__PURE__*/jsxRuntime.jsx(Label.Label.Description, {
+                children: description
+              }), children]
             }) : children, message && /*#__PURE__*/jsxRuntime.jsx(InlineAlert, {
               type: sentiment$1,
               id: descriptionId,

package/build/field/Field.js.map

@@ -1 +1 @@
-{"version":3,"file":"Field.js","sources":["../../src/field/Field.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId } from 'react';\n\nimport { Sentiment } from '../common';\nimport InlineAlert from '../inlineAlert/InlineAlert';\nimport {\n  FieldLabelIdContextProvider,\n  InputDescribedByProvider,\n  InputIdContextProvider,\n  InputInvalidProvider,\n} from '../inputs/contexts';\nimport { Label } from '../label/Label';\n\nexport type FieldProps = {\n  /** `null` disables auto-generating the `id` attribute, falling back to nesting-based label association over setting `htmlFor` explicitly. */\n  id?: string | null;\n  /** Should be specified unless the wrapped control has its own labeling mechanism, e.g. `Checkbox`. */\n  label?: React.ReactNode;\n  /** @deprecated use `message` and `type={Sentiment.NEUTRAL}` prop instead */\n  hint?: React.ReactNode;\n  message?: React.ReactNode;\n  /** @deprecated use `message` and `type={Sentiment.NEGATIVE}` prop instead */\n  error?: React.ReactNode;\n  sentiment?: `${Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.POSITIVE | Sentiment.WARNING}`;\n  className?: string;\n  children?: React.ReactNode;\n};\n\nexport const Field = ({\n  id,\n  label,\n  message: propMessage,\n  sentiment: propType = Sentiment.NEUTRAL,\n  className,\n  children,\n  ...props\n}: FieldProps) => {\n  const sentiment = props.error ? Sentiment.NEGATIVE : propType;\n  const message = props.error || props.hint || propMessage;\n  const hasError = sentiment === Sentiment.NEGATIVE;\n\n  const labelId = useId();\n\n  const fallbackInputId = useId();\n  const inputId = id !== null ? (id ?? fallbackInputId) : undefined;\n\n  const descriptionId = useId();\n\n  return (\n    <FieldLabelIdContextProvider value={labelId}>\n      <InputIdContextProvider value={inputId}>\n        <InputDescribedByProvider value={message ? descriptionId : undefined}>\n          <InputInvalidProvider value={hasError}>\n            <div\n              className={clsx(\n                'form-group d-block',\n                {\n                  'has-success': sentiment === Sentiment.POSITIVE,\n                  'has-warning': sentiment === Sentiment.WARNING,\n                  'has-error': hasError,\n                  'has-info': sentiment === Sentiment.NEUTRAL,\n                },\n                className,\n              )}\n            >\n              {label != null ? (\n                <Label id={labelId} htmlFor={inputId}>\n                  {label}\n                  {children}\n                </Label>\n              ) : (\n                children\n              )}\n\n              {message && (\n                <InlineAlert type={sentiment} id={descriptionId}>\n                  {message}\n                </InlineAlert>\n              )}\n            </div>\n          </InputInvalidProvider>\n        </InputDescribedByProvider>\n      </InputIdContextProvider>\n    </FieldLabelIdContextProvider>\n  );\n};\n"],"names":["Field","id","label","message","propMessage","sentiment","propType","Sentiment","NEUTRAL","className","children","props","error","NEGATIVE","hint","hasError","labelId","useId","fallbackInputId","inputId","undefined","descriptionId","_jsx","FieldLabelIdContextProvider","value","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider","_jsxs","clsx","POSITIVE","WARNING","Label","htmlFor","InlineAlert","type"],"mappings":";;;;;;;;;;AA4BO,MAAMA,KAAK,GAAGA,CAAC;EACpBC,EAAE;EACFC,KAAK;AACLC,EAAAA,OAAO,EAAEC,WAAW;AACpBC,EAAAA,SAAS,EAAEC,QAAQ,GAAGC,mBAAS,CAACC,OAAO;EACvCC,SAAS;EACTC,QAAQ;EACR,GAAGC,KAAAA;AAAK,CACG,KAAI;EACf,MAAMN,WAAS,GAAGM,KAAK,CAACC,KAAK,GAAGL,mBAAS,CAACM,QAAQ,GAAGP,QAAQ,CAAA;EAC7D,MAAMH,OAAO,GAAGQ,KAAK,CAACC,KAAK,IAAID,KAAK,CAACG,IAAI,IAAIV,WAAW,CAAA;AACxD,EAAA,MAAMW,QAAQ,GAAGV,WAAS,KAAKE,mBAAS,CAACM,QAAQ,CAAA;AAEjD,EAAA,MAAMG,OAAO,GAAGC,WAAK,EAAE,CAAA;AAEvB,EAAA,MAAMC,eAAe,GAAGD,WAAK,EAAE,CAAA;EAC/B,MAAME,OAAO,GAAGlB,EAAE,KAAK,IAAI,GAAIA,EAAE,IAAIiB,eAAe,GAAIE,SAAS,CAAA;AAEjE,EAAA,MAAMC,aAAa,GAAGJ,WAAK,EAAE,CAAA;EAE7B,oBACEK,cAAA,CAACC,oCAA2B,EAAA;AAACC,IAAAA,KAAK,EAAER,OAAQ;IAAAN,QAAA,eAC1CY,cAAA,CAACG,+BAAsB,EAAA;AAACD,MAAAA,KAAK,EAAEL,OAAQ;MAAAT,QAAA,eACrCY,cAAA,CAACI,iCAAwB,EAAA;AAACF,QAAAA,KAAK,EAAErB,OAAO,GAAGkB,aAAa,GAAGD,SAAU;QAAAV,QAAA,eACnEY,cAAA,CAACK,6BAAoB,EAAA;AAACH,UAAAA,KAAK,EAAET,QAAS;AAAAL,UAAAA,QAAA,eACpCkB,eAAA,CAAA,KAAA,EAAA;AACEnB,YAAAA,SAAS,EAAEoB,SAAI,CACb,oBAAoB,EACpB;AACE,cAAA,aAAa,EAAExB,WAAS,KAAKE,mBAAS,CAACuB,QAAQ;AAC/C,cAAA,aAAa,EAAEzB,WAAS,KAAKE,mBAAS,CAACwB,OAAO;AAC9C,cAAA,WAAW,EAAEhB,QAAQ;AACrB,cAAA,UAAU,EAAEV,WAAS,KAAKE,mBAAS,CAACC,OAAAA;aACrC,EACDC,SAAS,CACT;AAAAC,YAAAA,QAAA,GAEDR,KAAK,IAAI,IAAI,gBACZ0B,eAAA,CAACI,WAAK,EAAA;AAAC/B,cAAAA,EAAE,EAAEe,OAAQ;AAACiB,cAAAA,OAAO,EAAEd,OAAQ;cAAAT,QAAA,EAAA,CAClCR,KAAK,EACLQ,QAAQ,CAAA;aACJ,CAAC,GAERA,QACD,EAEAP,OAAO,iBACNmB,cAAA,CAACY,WAAW,EAAA;AAACC,cAAAA,IAAI,EAAE9B,WAAU;AAACJ,cAAAA,EAAE,EAAEoB,aAAc;AAAAX,cAAAA,QAAA,EAC7CP,OAAAA;AAAO,aACG,CACd,CAAA;WACE,CAAA;SACe,CAAA;OACE,CAAA;KACJ,CAAA;AAC1B,GAA6B,CAAC,CAAA;AAElC;;;;"}
+{"version":3,"file":"Field.js","sources":["../../src/field/Field.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId } from 'react';\n\nimport { Sentiment } from '../common';\nimport InlineAlert from '../inlineAlert/InlineAlert';\nimport {\n  FieldLabelIdContextProvider,\n  InputDescribedByProvider,\n  InputIdContextProvider,\n  InputInvalidProvider,\n} from '../inputs/contexts';\nimport { Label } from '../label';\n\nexport type FieldProps = {\n  /** `null` disables auto-generating the `id` attribute, falling back to nesting-based label association over setting `htmlFor` explicitly. */\n  id?: string | null;\n  /** Should be specified unless the wrapped control has its own labeling mechanism, e.g. `Checkbox`. */\n  label?: React.ReactNode;\n  required?: boolean;\n  /** @deprecated use `description` prop instead */\n  hint?: React.ReactNode;\n  message?: React.ReactNode;\n  description?: React.ReactNode;\n  /** @deprecated use `message` and `type={Sentiment.NEGATIVE}` prop instead */\n  error?: React.ReactNode;\n  sentiment?: `${Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.POSITIVE | Sentiment.WARNING}`;\n  className?: string;\n  children?: React.ReactNode;\n};\n\nexport const Field = ({\n  id,\n  label,\n  required = false,\n  message: propMessage,\n  hint,\n  description = hint,\n  sentiment: propType = Sentiment.NEUTRAL,\n  className,\n  children,\n  ...props\n}: FieldProps) => {\n  const sentiment = props.error ? Sentiment.NEGATIVE : propType;\n  const message = propMessage || props.error;\n  const hasError = sentiment === Sentiment.NEGATIVE;\n\n  const labelId = useId();\n\n  const fallbackInputId = useId();\n  const inputId = id !== null ? (id ?? fallbackInputId) : undefined;\n\n  const descriptionId = useId();\n\n  return (\n    <FieldLabelIdContextProvider value={labelId}>\n      <InputIdContextProvider value={inputId}>\n        <InputDescribedByProvider value={message ? descriptionId : undefined}>\n          <InputInvalidProvider value={hasError}>\n            <div\n              className={clsx(\n                'form-group d-block',\n                {\n                  'has-success': sentiment === Sentiment.POSITIVE,\n                  'has-warning': sentiment === Sentiment.WARNING,\n                  'has-error': hasError,\n                  'has-info': sentiment === Sentiment.NEUTRAL,\n                },\n                className,\n              )}\n            >\n              {label != null ? (\n                <Label id={labelId} htmlFor={inputId}>\n                  {required ? label : <Label.Optional>{label}</Label.Optional>}\n                  {description && <Label.Description>{description}</Label.Description>}\n                  {children}\n                </Label>\n              ) : (\n                children\n              )}\n\n              {message && (\n                <InlineAlert type={sentiment} id={descriptionId}>\n                  {message}\n                </InlineAlert>\n              )}\n            </div>\n          </InputInvalidProvider>\n        </InputDescribedByProvider>\n      </InputIdContextProvider>\n    </FieldLabelIdContextProvider>\n  );\n};\n"],"names":["Field","id","label","required","message","propMessage","hint","description","sentiment","propType","Sentiment","NEUTRAL","className","children","props","error","NEGATIVE","hasError","labelId","useId","fallbackInputId","inputId","undefined","descriptionId","_jsx","FieldLabelIdContextProvider","value","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider","_jsxs","clsx","POSITIVE","WARNING","Label","htmlFor","Optional","Description","InlineAlert","type"],"mappings":";;;;;;;;;;AA8BO,MAAMA,KAAK,GAAGA,CAAC;EACpBC,EAAE;EACFC,KAAK;AACLC,EAAAA,QAAQ,GAAG,KAAK;AAChBC,EAAAA,OAAO,EAAEC,WAAW;EACpBC,IAAI;AACJC,EAAAA,WAAW,GAAGD,IAAI;AAClBE,EAAAA,SAAS,EAAEC,QAAQ,GAAGC,mBAAS,CAACC,OAAO;EACvCC,SAAS;EACTC,QAAQ;EACR,GAAGC,KAAAA;AAAK,CACG,KAAI;EACf,MAAMN,WAAS,GAAGM,KAAK,CAACC,KAAK,GAAGL,mBAAS,CAACM,QAAQ,GAAGP,QAAQ,CAAA;AAC7D,EAAA,MAAML,OAAO,GAAGC,WAAW,IAAIS,KAAK,CAACC,KAAK,CAAA;AAC1C,EAAA,MAAME,QAAQ,GAAGT,WAAS,KAAKE,mBAAS,CAACM,QAAQ,CAAA;AAEjD,EAAA,MAAME,OAAO,GAAGC,WAAK,EAAE,CAAA;AAEvB,EAAA,MAAMC,eAAe,GAAGD,WAAK,EAAE,CAAA;EAC/B,MAAME,OAAO,GAAGpB,EAAE,KAAK,IAAI,GAAIA,EAAE,IAAImB,eAAe,GAAIE,SAAS,CAAA;AAEjE,EAAA,MAAMC,aAAa,GAAGJ,WAAK,EAAE,CAAA;EAE7B,oBACEK,cAAA,CAACC,oCAA2B,EAAA;AAACC,IAAAA,KAAK,EAAER,OAAQ;IAAAL,QAAA,eAC1CW,cAAA,CAACG,+BAAsB,EAAA;AAACD,MAAAA,KAAK,EAAEL,OAAQ;MAAAR,QAAA,eACrCW,cAAA,CAACI,iCAAwB,EAAA;AAACF,QAAAA,KAAK,EAAEtB,OAAO,GAAGmB,aAAa,GAAGD,SAAU;QAAAT,QAAA,eACnEW,cAAA,CAACK,6BAAoB,EAAA;AAACH,UAAAA,KAAK,EAAET,QAAS;AAAAJ,UAAAA,QAAA,eACpCiB,eAAA,CAAA,KAAA,EAAA;AACElB,YAAAA,SAAS,EAAEmB,SAAI,CACb,oBAAoB,EACpB;AACE,cAAA,aAAa,EAAEvB,WAAS,KAAKE,mBAAS,CAACsB,QAAQ;AAC/C,cAAA,aAAa,EAAExB,WAAS,KAAKE,mBAAS,CAACuB,OAAO;AAC9C,cAAA,WAAW,EAAEhB,QAAQ;AACrB,cAAA,UAAU,EAAET,WAAS,KAAKE,mBAAS,CAACC,OAAAA;aACrC,EACDC,SAAS,CACT;AAAAC,YAAAA,QAAA,GAEDX,KAAK,IAAI,IAAI,gBACZ4B,eAAA,CAACI,WAAK,EAAA;AAACjC,cAAAA,EAAE,EAAEiB,OAAQ;AAACiB,cAAAA,OAAO,EAAEd,OAAQ;cAAAR,QAAA,EAAA,CAClCV,QAAQ,GAAGD,KAAK,gBAAGsB,cAAA,CAACU,WAAK,CAACE,QAAQ,EAAA;AAAAvB,gBAAAA,QAAA,EAAEX,KAAAA;eAAsB,CAAC,EAC3DK,WAAW,iBAAIiB,cAAA,CAACU,WAAK,CAACG,WAAW,EAAA;AAAAxB,gBAAAA,QAAA,EAAEN,WAAAA;eAA+B,CAAC,EACnEM,QAAQ,CAAA;aACJ,CAAC,GAERA,QACD,EAEAT,OAAO,iBACNoB,cAAA,CAACc,WAAW,EAAA;AAACC,cAAAA,IAAI,EAAE/B,WAAU;AAACP,cAAAA,EAAE,EAAEsB,aAAc;AAAAV,cAAAA,QAAA,EAC7CT,OAAAA;AAAO,aACG,CACd,CAAA;WACE,CAAA;SACe,CAAA;OACE,CAAA;KACJ,CAAA;AAC1B,GAA6B,CAAC,CAAA;AAElC;;;;"}

package/build/field/Field.mjs

@@ -9,14 +9,17 @@ import { Sentiment } from '../common/propsValues/sentiment.mjs';
 const Field = ({
   id,
   label,
+  required = false,
   message: propMessage,
+  hint,
+  description = hint,
   sentiment: propType = Sentiment.NEUTRAL,
   className,
   children,
   ...props
 }) => {
   const sentiment = props.error ? Sentiment.NEGATIVE : propType;
-  const message = props.error || props.hint || propMessage;
+  const message = propMessage || props.error;
   const hasError = sentiment === Sentiment.NEGATIVE;
   const labelId = useId();
   const fallbackInputId = useId();
@@ -40,7 +43,11 @@ const Field = ({
             children: [label != null ? /*#__PURE__*/jsxs(Label, {
               id: labelId,
               htmlFor: inputId,
-              children: [label, children]
+              children: [required ? label : /*#__PURE__*/jsx(Label.Optional, {
+                children: label
+              }), description && /*#__PURE__*/jsx(Label.Description, {
+                children: description
+              }), children]
             }) : children, message && /*#__PURE__*/jsx(InlineAlert, {
               type: sentiment,
               id: descriptionId,

package/build/field/Field.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Field.mjs","sources":["../../src/field/Field.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId } from 'react';\n\nimport { Sentiment } from '../common';\nimport InlineAlert from '../inlineAlert/InlineAlert';\nimport {\n  FieldLabelIdContextProvider,\n  InputDescribedByProvider,\n  InputIdContextProvider,\n  InputInvalidProvider,\n} from '../inputs/contexts';\nimport { Label } from '../label/Label';\n\nexport type FieldProps = {\n  /** `null` disables auto-generating the `id` attribute, falling back to nesting-based label association over setting `htmlFor` explicitly. */\n  id?: string | null;\n  /** Should be specified unless the wrapped control has its own labeling mechanism, e.g. `Checkbox`. */\n  label?: React.ReactNode;\n  /** @deprecated use `message` and `type={Sentiment.NEUTRAL}` prop instead */\n  hint?: React.ReactNode;\n  message?: React.ReactNode;\n  /** @deprecated use `message` and `type={Sentiment.NEGATIVE}` prop instead */\n  error?: React.ReactNode;\n  sentiment?: `${Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.POSITIVE | Sentiment.WARNING}`;\n  className?: string;\n  children?: React.ReactNode;\n};\n\nexport const Field = ({\n  id,\n  label,\n  message: propMessage,\n  sentiment: propType = Sentiment.NEUTRAL,\n  className,\n  children,\n  ...props\n}: FieldProps) => {\n  const sentiment = props.error ? Sentiment.NEGATIVE : propType;\n  const message = props.error || props.hint || propMessage;\n  const hasError = sentiment === Sentiment.NEGATIVE;\n\n  const labelId = useId();\n\n  const fallbackInputId = useId();\n  const inputId = id !== null ? (id ?? fallbackInputId) : undefined;\n\n  const descriptionId = useId();\n\n  return (\n    <FieldLabelIdContextProvider value={labelId}>\n      <InputIdContextProvider value={inputId}>\n        <InputDescribedByProvider value={message ? descriptionId : undefined}>\n          <InputInvalidProvider value={hasError}>\n            <div\n              className={clsx(\n                'form-group d-block',\n                {\n                  'has-success': sentiment === Sentiment.POSITIVE,\n                  'has-warning': sentiment === Sentiment.WARNING,\n                  'has-error': hasError,\n                  'has-info': sentiment === Sentiment.NEUTRAL,\n                },\n                className,\n              )}\n            >\n              {label != null ? (\n                <Label id={labelId} htmlFor={inputId}>\n                  {label}\n                  {children}\n                </Label>\n              ) : (\n                children\n              )}\n\n              {message && (\n                <InlineAlert type={sentiment} id={descriptionId}>\n                  {message}\n                </InlineAlert>\n              )}\n            </div>\n          </InputInvalidProvider>\n        </InputDescribedByProvider>\n      </InputIdContextProvider>\n    </FieldLabelIdContextProvider>\n  );\n};\n"],"names":["Field","id","label","message","propMessage","sentiment","propType","Sentiment","NEUTRAL","className","children","props","error","NEGATIVE","hint","hasError","labelId","useId","fallbackInputId","inputId","undefined","descriptionId","_jsx","FieldLabelIdContextProvider","value","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider","_jsxs","clsx","POSITIVE","WARNING","Label","htmlFor","InlineAlert","type"],"mappings":";;;;;;;;AA4BO,MAAMA,KAAK,GAAGA,CAAC;EACpBC,EAAE;EACFC,KAAK;AACLC,EAAAA,OAAO,EAAEC,WAAW;AACpBC,EAAAA,SAAS,EAAEC,QAAQ,GAAGC,SAAS,CAACC,OAAO;EACvCC,SAAS;EACTC,QAAQ;EACR,GAAGC,KAAAA;AAAK,CACG,KAAI;EACf,MAAMN,SAAS,GAAGM,KAAK,CAACC,KAAK,GAAGL,SAAS,CAACM,QAAQ,GAAGP,QAAQ,CAAA;EAC7D,MAAMH,OAAO,GAAGQ,KAAK,CAACC,KAAK,IAAID,KAAK,CAACG,IAAI,IAAIV,WAAW,CAAA;AACxD,EAAA,MAAMW,QAAQ,GAAGV,SAAS,KAAKE,SAAS,CAACM,QAAQ,CAAA;AAEjD,EAAA,MAAMG,OAAO,GAAGC,KAAK,EAAE,CAAA;AAEvB,EAAA,MAAMC,eAAe,GAAGD,KAAK,EAAE,CAAA;EAC/B,MAAME,OAAO,GAAGlB,EAAE,KAAK,IAAI,GAAIA,EAAE,IAAIiB,eAAe,GAAIE,SAAS,CAAA;AAEjE,EAAA,MAAMC,aAAa,GAAGJ,KAAK,EAAE,CAAA;EAE7B,oBACEK,GAAA,CAACC,2BAA2B,EAAA;AAACC,IAAAA,KAAK,EAAER,OAAQ;IAAAN,QAAA,eAC1CY,GAAA,CAACG,sBAAsB,EAAA;AAACD,MAAAA,KAAK,EAAEL,OAAQ;MAAAT,QAAA,eACrCY,GAAA,CAACI,wBAAwB,EAAA;AAACF,QAAAA,KAAK,EAAErB,OAAO,GAAGkB,aAAa,GAAGD,SAAU;QAAAV,QAAA,eACnEY,GAAA,CAACK,oBAAoB,EAAA;AAACH,UAAAA,KAAK,EAAET,QAAS;AAAAL,UAAAA,QAAA,eACpCkB,IAAA,CAAA,KAAA,EAAA;AACEnB,YAAAA,SAAS,EAAEoB,IAAI,CACb,oBAAoB,EACpB;AACE,cAAA,aAAa,EAAExB,SAAS,KAAKE,SAAS,CAACuB,QAAQ;AAC/C,cAAA,aAAa,EAAEzB,SAAS,KAAKE,SAAS,CAACwB,OAAO;AAC9C,cAAA,WAAW,EAAEhB,QAAQ;AACrB,cAAA,UAAU,EAAEV,SAAS,KAAKE,SAAS,CAACC,OAAAA;aACrC,EACDC,SAAS,CACT;AAAAC,YAAAA,QAAA,GAEDR,KAAK,IAAI,IAAI,gBACZ0B,IAAA,CAACI,KAAK,EAAA;AAAC/B,cAAAA,EAAE,EAAEe,OAAQ;AAACiB,cAAAA,OAAO,EAAEd,OAAQ;cAAAT,QAAA,EAAA,CAClCR,KAAK,EACLQ,QAAQ,CAAA;aACJ,CAAC,GAERA,QACD,EAEAP,OAAO,iBACNmB,GAAA,CAACY,WAAW,EAAA;AAACC,cAAAA,IAAI,EAAE9B,SAAU;AAACJ,cAAAA,EAAE,EAAEoB,aAAc;AAAAX,cAAAA,QAAA,EAC7CP,OAAAA;AAAO,aACG,CACd,CAAA;WACE,CAAA;SACe,CAAA;OACE,CAAA;KACJ,CAAA;AAC1B,GAA6B,CAAC,CAAA;AAElC;;;;"}
+{"version":3,"file":"Field.mjs","sources":["../../src/field/Field.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId } from 'react';\n\nimport { Sentiment } from '../common';\nimport InlineAlert from '../inlineAlert/InlineAlert';\nimport {\n  FieldLabelIdContextProvider,\n  InputDescribedByProvider,\n  InputIdContextProvider,\n  InputInvalidProvider,\n} from '../inputs/contexts';\nimport { Label } from '../label';\n\nexport type FieldProps = {\n  /** `null` disables auto-generating the `id` attribute, falling back to nesting-based label association over setting `htmlFor` explicitly. */\n  id?: string | null;\n  /** Should be specified unless the wrapped control has its own labeling mechanism, e.g. `Checkbox`. */\n  label?: React.ReactNode;\n  required?: boolean;\n  /** @deprecated use `description` prop instead */\n  hint?: React.ReactNode;\n  message?: React.ReactNode;\n  description?: React.ReactNode;\n  /** @deprecated use `message` and `type={Sentiment.NEGATIVE}` prop instead */\n  error?: React.ReactNode;\n  sentiment?: `${Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.POSITIVE | Sentiment.WARNING}`;\n  className?: string;\n  children?: React.ReactNode;\n};\n\nexport const Field = ({\n  id,\n  label,\n  required = false,\n  message: propMessage,\n  hint,\n  description = hint,\n  sentiment: propType = Sentiment.NEUTRAL,\n  className,\n  children,\n  ...props\n}: FieldProps) => {\n  const sentiment = props.error ? Sentiment.NEGATIVE : propType;\n  const message = propMessage || props.error;\n  const hasError = sentiment === Sentiment.NEGATIVE;\n\n  const labelId = useId();\n\n  const fallbackInputId = useId();\n  const inputId = id !== null ? (id ?? fallbackInputId) : undefined;\n\n  const descriptionId = useId();\n\n  return (\n    <FieldLabelIdContextProvider value={labelId}>\n      <InputIdContextProvider value={inputId}>\n        <InputDescribedByProvider value={message ? descriptionId : undefined}>\n          <InputInvalidProvider value={hasError}>\n            <div\n              className={clsx(\n                'form-group d-block',\n                {\n                  'has-success': sentiment === Sentiment.POSITIVE,\n                  'has-warning': sentiment === Sentiment.WARNING,\n                  'has-error': hasError,\n                  'has-info': sentiment === Sentiment.NEUTRAL,\n                },\n                className,\n              )}\n            >\n              {label != null ? (\n                <Label id={labelId} htmlFor={inputId}>\n                  {required ? label : <Label.Optional>{label}</Label.Optional>}\n                  {description && <Label.Description>{description}</Label.Description>}\n                  {children}\n                </Label>\n              ) : (\n                children\n              )}\n\n              {message && (\n                <InlineAlert type={sentiment} id={descriptionId}>\n                  {message}\n                </InlineAlert>\n              )}\n            </div>\n          </InputInvalidProvider>\n        </InputDescribedByProvider>\n      </InputIdContextProvider>\n    </FieldLabelIdContextProvider>\n  );\n};\n"],"names":["Field","id","label","required","message","propMessage","hint","description","sentiment","propType","Sentiment","NEUTRAL","className","children","props","error","NEGATIVE","hasError","labelId","useId","fallbackInputId","inputId","undefined","descriptionId","_jsx","FieldLabelIdContextProvider","value","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider","_jsxs","clsx","POSITIVE","WARNING","Label","htmlFor","Optional","Description","InlineAlert","type"],"mappings":";;;;;;;;AA8BO,MAAMA,KAAK,GAAGA,CAAC;EACpBC,EAAE;EACFC,KAAK;AACLC,EAAAA,QAAQ,GAAG,KAAK;AAChBC,EAAAA,OAAO,EAAEC,WAAW;EACpBC,IAAI;AACJC,EAAAA,WAAW,GAAGD,IAAI;AAClBE,EAAAA,SAAS,EAAEC,QAAQ,GAAGC,SAAS,CAACC,OAAO;EACvCC,SAAS;EACTC,QAAQ;EACR,GAAGC,KAAAA;AAAK,CACG,KAAI;EACf,MAAMN,SAAS,GAAGM,KAAK,CAACC,KAAK,GAAGL,SAAS,CAACM,QAAQ,GAAGP,QAAQ,CAAA;AAC7D,EAAA,MAAML,OAAO,GAAGC,WAAW,IAAIS,KAAK,CAACC,KAAK,CAAA;AAC1C,EAAA,MAAME,QAAQ,GAAGT,SAAS,KAAKE,SAAS,CAACM,QAAQ,CAAA;AAEjD,EAAA,MAAME,OAAO,GAAGC,KAAK,EAAE,CAAA;AAEvB,EAAA,MAAMC,eAAe,GAAGD,KAAK,EAAE,CAAA;EAC/B,MAAME,OAAO,GAAGpB,EAAE,KAAK,IAAI,GAAIA,EAAE,IAAImB,eAAe,GAAIE,SAAS,CAAA;AAEjE,EAAA,MAAMC,aAAa,GAAGJ,KAAK,EAAE,CAAA;EAE7B,oBACEK,GAAA,CAACC,2BAA2B,EAAA;AAACC,IAAAA,KAAK,EAAER,OAAQ;IAAAL,QAAA,eAC1CW,GAAA,CAACG,sBAAsB,EAAA;AAACD,MAAAA,KAAK,EAAEL,OAAQ;MAAAR,QAAA,eACrCW,GAAA,CAACI,wBAAwB,EAAA;AAACF,QAAAA,KAAK,EAAEtB,OAAO,GAAGmB,aAAa,GAAGD,SAAU;QAAAT,QAAA,eACnEW,GAAA,CAACK,oBAAoB,EAAA;AAACH,UAAAA,KAAK,EAAET,QAAS;AAAAJ,UAAAA,QAAA,eACpCiB,IAAA,CAAA,KAAA,EAAA;AACElB,YAAAA,SAAS,EAAEmB,IAAI,CACb,oBAAoB,EACpB;AACE,cAAA,aAAa,EAAEvB,SAAS,KAAKE,SAAS,CAACsB,QAAQ;AAC/C,cAAA,aAAa,EAAExB,SAAS,KAAKE,SAAS,CAACuB,OAAO;AAC9C,cAAA,WAAW,EAAEhB,QAAQ;AACrB,cAAA,UAAU,EAAET,SAAS,KAAKE,SAAS,CAACC,OAAAA;aACrC,EACDC,SAAS,CACT;AAAAC,YAAAA,QAAA,GAEDX,KAAK,IAAI,IAAI,gBACZ4B,IAAA,CAACI,KAAK,EAAA;AAACjC,cAAAA,EAAE,EAAEiB,OAAQ;AAACiB,cAAAA,OAAO,EAAEd,OAAQ;cAAAR,QAAA,EAAA,CAClCV,QAAQ,GAAGD,KAAK,gBAAGsB,GAAA,CAACU,KAAK,CAACE,QAAQ,EAAA;AAAAvB,gBAAAA,QAAA,EAAEX,KAAAA;eAAsB,CAAC,EAC3DK,WAAW,iBAAIiB,GAAA,CAACU,KAAK,CAACG,WAAW,EAAA;AAAAxB,gBAAAA,QAAA,EAAEN,WAAAA;eAA+B,CAAC,EACnEM,QAAQ,CAAA;aACJ,CAAC,GAERA,QACD,EAEAT,OAAO,iBACNoB,GAAA,CAACc,WAAW,EAAA;AAACC,cAAAA,IAAI,EAAE/B,SAAU;AAACP,cAAAA,EAAE,EAAEsB,aAAc;AAAAV,cAAAA,QAAA,EAC7CT,OAAAA;AAAO,aACG,CACd,CAAA;WACE,CAAA;SACe,CAAA;OACE,CAAA;KACJ,CAAA;AAC1B,GAA6B,CAAC,CAAA;AAElC;;;;"}

package/build/i18n/en.json

@@ -18,6 +18,7 @@
   "neptune.DateLookup.year": "year",
   "neptune.FlowNavigation.back": "back to previous step",
   "neptune.Info.ariaLabel": "More information",
+  "neptune.Label.optional": "(Optional)",
   "neptune.Link.opensInNewTab": "(opens in new tab)",
   "neptune.MoneyInput.Select.placeholder": "Select an option...",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Select an option...",
@@ -55,5 +56,6 @@
   "neptune.UploadItem.uploaded": "Uploaded",
   "neptune.UploadItem.uploadedFile": "Uploaded file",
   "neptune.UploadItem.uploading": "Uploading...",
-  "neptune.UploadItem.uploadingFailed": "Uploading failed"
+  "neptune.UploadItem.uploadingFailed": "Uploading failed",
+  "neptune.aria.Label.optional": "This field is optional"
 }

package/build/i18n/en.json.js

@@ -20,6 +20,7 @@ var en = {
 	"neptune.DateLookup.year": "year",
 	"neptune.FlowNavigation.back": "back to previous step",
 	"neptune.Info.ariaLabel": "More information",
+	"neptune.Label.optional": "(Optional)",
 	"neptune.Link.opensInNewTab": "(opens in new tab)",
 	"neptune.MoneyInput.Select.placeholder": "Select an option...",
 	"neptune.PhoneNumberInput.SelectInput.placeholder": "Select an option...",
@@ -57,7 +58,8 @@ var en = {
 	"neptune.UploadItem.uploaded": "Uploaded",
 	"neptune.UploadItem.uploadedFile": "Uploaded file",
 	"neptune.UploadItem.uploading": "Uploading...",
-	"neptune.UploadItem.uploadingFailed": "Uploading failed"
+	"neptune.UploadItem.uploadingFailed": "Uploading failed",
+	"neptune.aria.Label.optional": "This field is optional"
 };
 
 module.exports = en;

package/build/i18n/en.json.js.map

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

package/build/i18n/en.json.mjs

@@ -18,6 +18,7 @@ var en = {
 	"neptune.DateLookup.year": "year",
 	"neptune.FlowNavigation.back": "back to previous step",
 	"neptune.Info.ariaLabel": "More information",
+	"neptune.Label.optional": "(Optional)",
 	"neptune.Link.opensInNewTab": "(opens in new tab)",
 	"neptune.MoneyInput.Select.placeholder": "Select an option...",
 	"neptune.PhoneNumberInput.SelectInput.placeholder": "Select an option...",
@@ -55,7 +56,8 @@ var en = {
 	"neptune.UploadItem.uploaded": "Uploaded",
 	"neptune.UploadItem.uploadedFile": "Uploaded file",
 	"neptune.UploadItem.uploading": "Uploading...",
-	"neptune.UploadItem.uploadingFailed": "Uploading failed"
+	"neptune.UploadItem.uploadingFailed": "Uploading failed",
+	"neptune.aria.Label.optional": "This field is optional"
 };
 
 export { en as default };

package/build/i18n/en.json.mjs.map

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

package/build/inputs/SelectInput.js

@@ -6,7 +6,6 @@ var clsx = require('clsx');
 var mergeProps = require('merge-props');
 var React = require('react');
 var reactIntl = require('react-intl');
-var virtua = require('virtua');
 var useEffectEvent = require('../common/hooks/useEffectEvent.js');
 var useScreenSize = require('../common/hooks/useScreenSize.js');
 var PolymorphicWithOverrides = require('../common/polymorphicWithOverrides/PolymorphicWithOverrides.js');
@@ -25,7 +24,6 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var mergeProps__default = /*#__PURE__*/_interopDefault(mergeProps);
 
-const MAX_ITEMS_WITHOUT_VIRTUALIZATION = 50;
 function searchableString(value) {
   return value.trim().replace(/\s+/gu, ' ').normalize('NFKC').toLowerCase();
 }
@@ -38,6 +36,8 @@ function inferSearchableStrings(value) {
   }
   return [];
 }
+const SelectInputTriggerButtonPropsContext = /*#__PURE__*/React.createContext({});
+const SelectInputOptionContentWithinTriggerContext = /*#__PURE__*/React.createContext(false);
 function dedupeSelectInputOptionItem(item, existingValues) {
   if (!existingValues.has(item.value)) {
     existingValues.add(item.value);
@@ -48,11 +48,6 @@ function dedupeSelectInputOptionItem(item, existingValues) {
     value: undefined
   };
 }
-/**
- * Sets the `value` of duplicate option items to `undefined`, hiding them when
- * rendered. Indexes are kept intact within groups to preserve the active item
- * between filter changes when possible.
- */
 function dedupeSelectInputItems(items) {
   const existingValues = new Set();
   return items.map(item => {
@@ -72,19 +67,19 @@ function dedupeSelectInputItems(items) {
     return item;
   });
 }
-function selectInputOptionItemIncludesNeedle(item, needle) {
+function filterSelectInputOptionItem(item, needle) {
   return inferSearchableStrings(item.filterMatchers ?? item.value).some(haystack => haystack.includes(needle));
 }
-function filterSelectInputItems(items, predicate) {
+function filterSelectInputItems(items, needle) {
   return items.filter(item => {
     switch (item.type) {
       case 'option':
         {
-          return predicate(item);
+          return filterSelectInputOptionItem(item, needle);
         }
       case 'group':
         {
-          return item.options.some(option => predicate(option));
+          return item.options.some(option => filterSelectInputOptionItem(option, needle));
         }
     }
     return false;
@@ -185,15 +180,12 @@ function SelectInput({
     }
   }, [handleClose, open]);
   const [filterQuery, _setFilterQuery] = React.useState('');
-  const deferredFilterQuery = React.useDeferredValue(filterQuery);
   const setFilterQuery = useEffectEvent.useEffectEvent(query => {
     _setFilterQuery(query);
-    if (query !== filterQuery) {
-      onFilterChange({
-        query,
-        queryNormalized: query ? searchableString(query) : null
-      });
-    }
+    onFilterChange({
+      query,
+      queryNormalized: query ? searchableString(query) : null
+    });
   });
   const triggerRef = React.useRef(null);
   const screenSm = useScreenSize.useScreenSize(breakpoint.Breakpoint.SMALL);
@@ -205,7 +197,10 @@ function SelectInput({
     name: name,
     multiple: multiple,
     defaultValue: defaultValue,
-    value: controlledValue,
+    value: controlledValue
+    // TODO: Remove assertion when upgrading TypeScript to v5
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    ,
     by: compareValues,
     disabled: disabled,
     onChange: value => {
@@ -270,7 +265,9 @@ function SelectInput({
           setOpen(false);
         },
         onCloseEnd: () => {
-          setFilterQuery('');
+          if (filterQuery !== '') {
+            setFilterQuery('');
+          }
         },
         children: /*#__PURE__*/jsxRuntime.jsx(SelectInputOptions, {
           items: items,
@@ -280,14 +277,13 @@ function SelectInput({
           filterPlaceholder: filterPlaceholder,
           searchInputRef: searchInputRef,
           listboxRef: listboxRef,
-          filterQuery: deferredFilterQuery,
+          filterQuery: filterQuery,
           onFilterChange: setFilterQuery
         })
       });
     }
   });
 }
-const SelectInputTriggerButtonPropsContext = /*#__PURE__*/React.createContext({});
 function SelectInputTriggerButton({
   as = 'button',
   ...restProps
@@ -365,37 +361,7 @@ function SelectInputOptions({
     }
     return undefined;
   }, [filterQuery, filterable]);
-  React.useEffect(() => {
-    if (needle) {
-      // Ensure having an active option while filtering
-      requestAnimationFrame(() => {
-        if (controllerRef.current != null && !controllerRef.current.hasAttribute('aria-activedescendant')) {
-          // Activate first option via synthetic key press
-          controllerRef.current.dispatchEvent(new KeyboardEvent('keydown', {
-            key: 'Home',
-            bubbles: true
-          }));
-        }
-      });
-    }
-  }, [controllerRef, needle]);
-  const filteredItems = needle != null ? filterSelectInputItems(dedupeSelectInputItems(items), item => selectInputOptionItemIncludesNeedle(item, needle)) : items;
-  const resultsEmpty = needle != null && filteredItems.length === 0;
-  const virtualized = filteredItems.length > MAX_ITEMS_WITHOUT_VIRTUALIZATION;
-  // Items shown once shall be kept mounted until the needle changes, otherwise
-  // the scroll position may jump around inadvertently. Pattern adopted from:
-  // https://inokawa.github.io/virtua/?path=/story/advanced-keep-offscreen-items--append-only
-  const [mountedIndexes, setMountedIndexes] = React.useState([]);
-  React.useEffect(() => {
-    // Ensure the 'End' key works as intended by keeping the last item mounted
-    setMountedIndexes(prevMountedIndexes => {
-      const indexes = new Set(prevMountedIndexes);
-      indexes.add(filteredItems.length - 1);
-      return [...indexes]; // Sorting is redundant by nature here
-    });
-  }, [needle,
-  // Needed as `filteredItems.length` may be equal between two updates
-  filteredItems.length]);
+  const resultsEmpty = needle != null && filterSelectInputItems(items, needle).length === 0;
   const listboxContainerRef = React.useRef(null);
   React.useEffect(() => {
     if (listboxContainerRef.current != null) {
@@ -405,16 +371,6 @@ function SelectInputOptions({
   const showStatus = resultsEmpty;
   const statusId = React.useId();
   const listboxId = React.useId();
-  const getItemNode = index => {
-    const item = filteredItems[index];
-    return /*#__PURE__*/jsxRuntime.jsx(SelectInputItemView
-    // eslint-disable-next-line react/no-array-index-key
-    , {
-      item: item,
-      renderValue: renderValue,
-      needle: needle
-    }, index);
-  };
   return /*#__PURE__*/jsxRuntime.jsxs(react.Listbox.Options, {
     as: SelectInputOptionsContainer,
     static: true,
@@ -425,6 +381,13 @@ function SelectInputOptions({
           controllerRef.current.setAttribute('aria-activedescendant', value);
         } else {
           controllerRef.current.removeAttribute('aria-activedescendant');
+          if (filterQuery) {
+            // Ensure having an active option while filtering
+            controllerRef.current.dispatchEvent(new KeyboardEvent('keydown', {
+              key: 'Home',
+              bubbles: true
+            }));
+          }
         }
       }
     },
@@ -434,7 +397,7 @@ function SelectInputOptions({
         ref: searchInputRef,
         shape: "rectangle",
         placeholder: filterPlaceholder,
-        defaultValue: filterQuery,
+        value: filterQuery,
         "aria-controls": listboxId,
         "aria-describedby": showStatus ? statusId : undefined,
         onKeyDown: event => {
@@ -445,18 +408,13 @@ function SelectInputOptions({
           }
         },
         onChange: event => {
-          // Free up resources and ensure not to go out of bounds when the
-          // resulting item count is less than before
-          setMountedIndexes([]);
           onFilterChange(event.currentTarget.value);
         }
       })
     }) : null, /*#__PURE__*/jsxRuntime.jsxs("section", {
       ref: listboxContainerRef,
       tabIndex: -1,
-      className: clsx.clsx('np-select-input-listbox-container', virtualized && 'np-select-input-listbox-container--virtualized', needle == null &&
-      // Groups aren't shown when filtering
-      items.some(item => item.type === 'group') && 'np-select-input-listbox-container--has-group'),
+      className: clsx.clsx('np-select-input-listbox-container', items.some(item => item.type === 'group') && 'np-select-input-listbox-container--has-group'),
       children: [resultsEmpty ? /*#__PURE__*/jsxRuntime.jsxs("div", {
         id: statusId,
         className: "np-select-input-options-status",
@@ -471,28 +429,13 @@ function SelectInputOptions({
         "aria-orientation": "vertical",
         tabIndex: 0,
         className: "np-select-input-listbox",
-        children: !virtualized ? filteredItems.map((_, index) => getItemNode(index)) : /*#__PURE__*/jsxRuntime.jsx(virtua.Virtualizer, {
-          count: filteredItems.length,
-          keepMounted: mountedIndexes,
-          scrollRef: listboxRef // `VList` doesn't expose this
-          ,
-          onRangeChange: (startIndex, endIndex) => {
-            setMountedIndexes(prevMountedIndexes => {
-              const indexes = new Set(prevMountedIndexes);
-              for (let index = startIndex; index <= endIndex; index += 1) {
-                indexes.add(index);
-              }
-              return [...indexes].sort((a, b) => a - b);
-            });
-          },
-          children: index => /*#__PURE__*/jsxRuntime.jsx(SelectInputItemsCountContext.Provider, {
-            value: filteredItems.length,
-            children: /*#__PURE__*/jsxRuntime.jsx(SelectInputItemPositionContext.Provider, {
-              value: index + 1,
-              children: getItemNode(index)
-            })
-          })
-        }, needle)
+        children: (needle != null ? dedupeSelectInputItems(items) : items).map((item, index) => /*#__PURE__*/jsxRuntime.jsx(SelectInputItemView
+        // eslint-disable-next-line react/no-array-index-key
+        , {
+          item: item,
+          renderValue: renderValue,
+          needle: needle
+        }, index))
       }), renderFooter != null ? /*#__PURE__*/jsxRuntime.jsx("footer", {
         className: "np-select-input-footer",
         children: /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -520,7 +463,7 @@ function SelectInputItemView({
   switch (item.type) {
     case 'option':
       {
-        if (item.value != null && (needle == null || selectInputOptionItemIncludesNeedle(item, needle))) {
+        if (item.value != null && (needle == null || filterSelectInputOptionItem(item, needle))) {
           return /*#__PURE__*/jsxRuntime.jsx(SelectInputOption, {
             value: item.value,
             disabled: item.disabled,
@@ -578,20 +521,14 @@ function SelectInputGroupItemView({
     })
   );
 }
-const SelectInputItemsCountContext = /*#__PURE__*/React.createContext(undefined);
-const SelectInputItemPositionContext = /*#__PURE__*/React.createContext(undefined);
 function SelectInputOption({
   value,
   disabled,
   children
 }) {
-  const itemsCount = React.useContext(SelectInputItemsCountContext);
-  const itemPosition = React.useContext(SelectInputItemPositionContext);
   return /*#__PURE__*/jsxRuntime.jsx(react.Listbox.Option, {
     as: "div",
     value: value,
-    "aria-setsize": itemsCount,
-    "aria-posinset": itemPosition,
     disabled: disabled,
     className: ({
       active,
@@ -610,7 +547,6 @@ function SelectInputOption({
     })
   });
 }
-const SelectInputOptionContentWithinTriggerContext = /*#__PURE__*/React.createContext(false);
 function SelectInputOptionContent({
   title,
   note,