@transferwise/components 0.0.0-experimental-6e74bff → 0.0.0-experimental-33bba78

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,41 +11,69 @@ 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();
   const inputId = id !== null ? id ?? fallbackInputId : undefined;
+  const messageId = React.useId();
   const descriptionId = React.useId();
+  /**
+   * form control can have multiple messages to describe it,
+   * e.g the description underneath the label and inline alert
+   */
+  function ariaDescribedbyByIds() {
+    const messageIds = [];
+    if (description) {
+      messageIds.push(descriptionId);
+    }
+    if (message) {
+      messageIds.push(messageId);
+    }
+    return messageIds.length > 0 ? messageIds.join(' ') : undefined;
+  }
   return /*#__PURE__*/jsxRuntime.jsx(contexts.FieldLabelIdContextProvider, {
     value: labelId,
     children: /*#__PURE__*/jsxRuntime.jsx(contexts.InputIdContextProvider, {
       value: inputId,
       children: /*#__PURE__*/jsxRuntime.jsx(contexts.InputDescribedByProvider, {
-        value: message ? descriptionId : undefined,
+        value: ariaDescribedbyByIds(),
         children: /*#__PURE__*/jsxRuntime.jsx(contexts.InputInvalidProvider, {
           value: hasError,
           children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-            className: clsx.clsx('form-group d-block', {
+            className: clsx.clsx('np-field form-group d-block', {
               'has-success': sentiment$1 === sentiment.Sentiment.POSITIVE,
               'has-warning': sentiment$1 === sentiment.Sentiment.WARNING,
               'has-error': hasError,
               'has-info': sentiment$1 === sentiment.Sentiment.NEUTRAL
             }, className),
-            children: [label != null ? /*#__PURE__*/jsxRuntime.jsxs(Label.Label, {
-              id: labelId,
-              htmlFor: inputId,
-              children: [label, children]
+            children: [label != null ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+              children: [/*#__PURE__*/jsxRuntime.jsx(Label.Label, {
+                id: labelId,
+                htmlFor: inputId,
+                children: required ? label : /*#__PURE__*/jsxRuntime.jsx(Label.Label.Optional, {
+                  children: label
+                })
+              }), /*#__PURE__*/jsxRuntime.jsx(Label.Label.Description, {
+                id: descriptionId,
+                children: description
+              }), /*#__PURE__*/jsxRuntime.jsx("div", {
+                className: "np-field-control",
+                children: children
+              })]
             }) : children, message && /*#__PURE__*/jsxRuntime.jsx(InlineAlert, {
               type: sentiment$1,
-              id: descriptionId,
+              id: messageId,
               children: message
             })]
           })

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 messageId = useId();\n  const descriptionId = useId();\n\n  /**\n   * form control can have multiple messages to describe it,\n   * e.g the description underneath the label and inline alert\n   */\n  function ariaDescribedbyByIds() {\n    const messageIds = [];\n    if (description) {\n      messageIds.push(descriptionId);\n    }\n    if (message) {\n      messageIds.push(messageId);\n    }\n    return messageIds.length > 0 ? messageIds.join(' ') : undefined;\n  }\n\n  return (\n    <FieldLabelIdContextProvider value={labelId}>\n      <InputIdContextProvider value={inputId}>\n        <InputDescribedByProvider value={ariaDescribedbyByIds()}>\n          <InputInvalidProvider value={hasError}>\n            <div\n              className={clsx(\n                'np-field 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                <>\n                  <Label id={labelId} htmlFor={inputId}>\n                    {required ? label : <Label.Optional>{label}</Label.Optional>}\n                  </Label>\n                  <Label.Description id={descriptionId}>{description}</Label.Description>\n                  <div className=\"np-field-control\">{children}</div>\n                </>\n              ) : (\n                children\n              )}\n\n              {message && (\n                <InlineAlert type={sentiment} id={messageId}>\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","messageId","descriptionId","ariaDescribedbyByIds","messageIds","push","length","join","_jsx","FieldLabelIdContextProvider","value","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider","_jsxs","clsx","POSITIVE","WARNING","_Fragment","Label","htmlFor","Optional","Description","InlineAlert","type"],"mappings":"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"}

package/build/field/Field.mjs

@@ -3,47 +3,75 @@ import { useId } from 'react';
 import InlineAlert from '../inlineAlert/InlineAlert.mjs';
 import { FieldLabelIdContextProvider, InputIdContextProvider, InputDescribedByProvider, InputInvalidProvider } from '../inputs/contexts.mjs';
 import { Label } from '../label/Label.mjs';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 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();
   const inputId = id !== null ? id ?? fallbackInputId : undefined;
+  const messageId = useId();
   const descriptionId = useId();
+  /**
+   * form control can have multiple messages to describe it,
+   * e.g the description underneath the label and inline alert
+   */
+  function ariaDescribedbyByIds() {
+    const messageIds = [];
+    if (description) {
+      messageIds.push(descriptionId);
+    }
+    if (message) {
+      messageIds.push(messageId);
+    }
+    return messageIds.length > 0 ? messageIds.join(' ') : undefined;
+  }
   return /*#__PURE__*/jsx(FieldLabelIdContextProvider, {
     value: labelId,
     children: /*#__PURE__*/jsx(InputIdContextProvider, {
       value: inputId,
       children: /*#__PURE__*/jsx(InputDescribedByProvider, {
-        value: message ? descriptionId : undefined,
+        value: ariaDescribedbyByIds(),
         children: /*#__PURE__*/jsx(InputInvalidProvider, {
           value: hasError,
           children: /*#__PURE__*/jsxs("div", {
-            className: clsx('form-group d-block', {
+            className: clsx('np-field form-group d-block', {
               'has-success': sentiment === Sentiment.POSITIVE,
               'has-warning': sentiment === Sentiment.WARNING,
               'has-error': hasError,
               'has-info': sentiment === Sentiment.NEUTRAL
             }, className),
-            children: [label != null ? /*#__PURE__*/jsxs(Label, {
-              id: labelId,
-              htmlFor: inputId,
-              children: [label, children]
+            children: [label != null ? /*#__PURE__*/jsxs(Fragment, {
+              children: [/*#__PURE__*/jsx(Label, {
+                id: labelId,
+                htmlFor: inputId,
+                children: required ? label : /*#__PURE__*/jsx(Label.Optional, {
+                  children: label
+                })
+              }), /*#__PURE__*/jsx(Label.Description, {
+                id: descriptionId,
+                children: description
+              }), /*#__PURE__*/jsx("div", {
+                className: "np-field-control",
+                children: children
+              })]
             }) : children, message && /*#__PURE__*/jsx(InlineAlert, {
               type: sentiment,
-              id: descriptionId,
+              id: messageId,
               children: message
             })]
           })

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 messageId = useId();\n  const descriptionId = useId();\n\n  /**\n   * form control can have multiple messages to describe it,\n   * e.g the description underneath the label and inline alert\n   */\n  function ariaDescribedbyByIds() {\n    const messageIds = [];\n    if (description) {\n      messageIds.push(descriptionId);\n    }\n    if (message) {\n      messageIds.push(messageId);\n    }\n    return messageIds.length > 0 ? messageIds.join(' ') : undefined;\n  }\n\n  return (\n    <FieldLabelIdContextProvider value={labelId}>\n      <InputIdContextProvider value={inputId}>\n        <InputDescribedByProvider value={ariaDescribedbyByIds()}>\n          <InputInvalidProvider value={hasError}>\n            <div\n              className={clsx(\n                'np-field 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                <>\n                  <Label id={labelId} htmlFor={inputId}>\n                    {required ? label : <Label.Optional>{label}</Label.Optional>}\n                  </Label>\n                  <Label.Description id={descriptionId}>{description}</Label.Description>\n                  <div className=\"np-field-control\">{children}</div>\n                </>\n              ) : (\n                children\n              )}\n\n              {message && (\n                <InlineAlert type={sentiment} id={messageId}>\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","messageId","descriptionId","ariaDescribedbyByIds","messageIds","push","length","join","_jsx","FieldLabelIdContextProvider","value","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider","_jsxs","clsx","POSITIVE","WARNING","_Fragment","Label","htmlFor","Optional","Description","InlineAlert","type"],"mappings":"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"}

package/build/i18n/de.json

@@ -18,6 +18,7 @@
   "neptune.DateLookup.year": "Jahr",
   "neptune.FlowNavigation.back": "zurück zum vorherigen Schritt",
   "neptune.Info.ariaLabel": "Weitere Informationen",
+  "neptune.Label.optional": "(Optional)",
   "neptune.Link.opensInNewTab": "(wird in einem neuen Tab geöffnet)",
   "neptune.MoneyInput.Select.placeholder": "Wähle eine der Möglichkeiten aus...",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Wähle eine Option...",

package/build/i18n/de.json.js

@@ -20,6 +20,7 @@ var de = {
 	"neptune.DateLookup.year": "Jahr",
 	"neptune.FlowNavigation.back": "zurück zum vorherigen Schritt",
 	"neptune.Info.ariaLabel": "Weitere Informationen",
+	"neptune.Label.optional": "(Optional)",
 	"neptune.Link.opensInNewTab": "(wird in einem neuen Tab geöffnet)",
 	"neptune.MoneyInput.Select.placeholder": "Wähle eine der Möglichkeiten aus...",
 	"neptune.PhoneNumberInput.SelectInput.placeholder": "Wähle eine Option...",

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

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

package/build/i18n/de.json.mjs

@@ -18,6 +18,7 @@ var de = {
 	"neptune.DateLookup.year": "Jahr",
 	"neptune.FlowNavigation.back": "zurück zum vorherigen Schritt",
 	"neptune.Info.ariaLabel": "Weitere Informationen",
+	"neptune.Label.optional": "(Optional)",
 	"neptune.Link.opensInNewTab": "(wird in einem neuen Tab geöffnet)",
 	"neptune.MoneyInput.Select.placeholder": "Wähle eine der Möglichkeiten aus...",
 	"neptune.PhoneNumberInput.SelectInput.placeholder": "Wähle eine Option...",

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

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

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...",

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...",

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...",

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/i18n/es.json

@@ -18,6 +18,7 @@
   "neptune.DateLookup.year": "año",
   "neptune.FlowNavigation.back": "volver al paso anterior",
   "neptune.Info.ariaLabel": "Más información",
+  "neptune.Label.optional": "(Opcional)",
   "neptune.Link.opensInNewTab": "(se abre en una pestaña nueva)",
   "neptune.MoneyInput.Select.placeholder": "Selecciona una opción...",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Selecciona una opción...",

package/build/i18n/es.json.js

@@ -20,6 +20,7 @@ var es = {
 	"neptune.DateLookup.year": "año",
 	"neptune.FlowNavigation.back": "volver al paso anterior",
 	"neptune.Info.ariaLabel": "Más información",
+	"neptune.Label.optional": "(Opcional)",
 	"neptune.Link.opensInNewTab": "(se abre en una pestaña nueva)",
 	"neptune.MoneyInput.Select.placeholder": "Selecciona una opción...",
 	"neptune.PhoneNumberInput.SelectInput.placeholder": "Selecciona una opción...",

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

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

package/build/i18n/es.json.mjs

@@ -18,6 +18,7 @@ var es = {
 	"neptune.DateLookup.year": "año",
 	"neptune.FlowNavigation.back": "volver al paso anterior",
 	"neptune.Info.ariaLabel": "Más información",
+	"neptune.Label.optional": "(Opcional)",
 	"neptune.Link.opensInNewTab": "(se abre en una pestaña nueva)",
 	"neptune.MoneyInput.Select.placeholder": "Selecciona una opción...",
 	"neptune.PhoneNumberInput.SelectInput.placeholder": "Selecciona una opción...",

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

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

package/build/i18n/fr.json

@@ -18,6 +18,7 @@
   "neptune.DateLookup.year": "année",
   "neptune.FlowNavigation.back": "revenir à l'étape précédente",
   "neptune.Info.ariaLabel": "Plus d'informations",
+  "neptune.Label.optional": "(Facultatif)",
   "neptune.Link.opensInNewTab": "(ouvre dans un nouvel onglet)",
   "neptune.MoneyInput.Select.placeholder": "Sélectionner une option...",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Sélectionnez une option…",

package/build/i18n/fr.json.js

@@ -20,6 +20,7 @@ var fr = {
 	"neptune.DateLookup.year": "année",
 	"neptune.FlowNavigation.back": "revenir à l'étape précédente",
 	"neptune.Info.ariaLabel": "Plus d'informations",
+	"neptune.Label.optional": "(Facultatif)",
 	"neptune.Link.opensInNewTab": "(ouvre dans un nouvel onglet)",
 	"neptune.MoneyInput.Select.placeholder": "Sélectionner une option...",
 	"neptune.PhoneNumberInput.SelectInput.placeholder": "Sélectionnez une option…",

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

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

package/build/i18n/fr.json.mjs

@@ -18,6 +18,7 @@ var fr = {
 	"neptune.DateLookup.year": "année",
 	"neptune.FlowNavigation.back": "revenir à l'étape précédente",
 	"neptune.Info.ariaLabel": "Plus d'informations",
+	"neptune.Label.optional": "(Facultatif)",
 	"neptune.Link.opensInNewTab": "(ouvre dans un nouvel onglet)",
 	"neptune.MoneyInput.Select.placeholder": "Sélectionner une option...",
 	"neptune.PhoneNumberInput.SelectInput.placeholder": "Sélectionnez une option…",

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

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

package/build/i18n/hu.json

@@ -18,6 +18,7 @@
   "neptune.DateLookup.year": "év",
   "neptune.FlowNavigation.back": "vissza az előző lépéshez",
   "neptune.Info.ariaLabel": "További információ",
+  "neptune.Label.optional": "(Válaszható)",
   "neptune.Link.opensInNewTab": "(új lapon nyílik meg)",
   "neptune.MoneyInput.Select.placeholder": "Válassz ki egy lehetőséget...",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Válassz ki egy lehetőséget...",

package/build/i18n/hu.json.js

@@ -20,6 +20,7 @@ var hu = {
 	"neptune.DateLookup.year": "év",
 	"neptune.FlowNavigation.back": "vissza az előző lépéshez",
 	"neptune.Info.ariaLabel": "További információ",
+	"neptune.Label.optional": "(Válaszható)",
 	"neptune.Link.opensInNewTab": "(új lapon nyílik meg)",
 	"neptune.MoneyInput.Select.placeholder": "Válassz ki egy lehetőséget...",
 	"neptune.PhoneNumberInput.SelectInput.placeholder": "Válassz ki egy lehetőséget...",

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

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

package/build/i18n/hu.json.mjs

@@ -18,6 +18,7 @@ var hu = {
 	"neptune.DateLookup.year": "év",
 	"neptune.FlowNavigation.back": "vissza az előző lépéshez",
 	"neptune.Info.ariaLabel": "További információ",
+	"neptune.Label.optional": "(Válaszható)",
 	"neptune.Link.opensInNewTab": "(új lapon nyílik meg)",
 	"neptune.MoneyInput.Select.placeholder": "Válassz ki egy lehetőséget...",
 	"neptune.PhoneNumberInput.SelectInput.placeholder": "Válassz ki egy lehetőséget...",

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

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

package/build/i18n/id.json

@@ -18,6 +18,7 @@
   "neptune.DateLookup.year": "tahun",
   "neptune.FlowNavigation.back": "kembali ke langkah sebelumnya",
   "neptune.Info.ariaLabel": "Informasi lebih lanjut",
+  "neptune.Label.optional": "(Opsional)",
   "neptune.Link.opensInNewTab": "(terbuka di tab baru)",
   "neptune.MoneyInput.Select.placeholder": "Pilih opsi...",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Pilih opsi...",

package/build/i18n/id.json.js

@@ -20,6 +20,7 @@ var id = {
 	"neptune.DateLookup.year": "tahun",
 	"neptune.FlowNavigation.back": "kembali ke langkah sebelumnya",
 	"neptune.Info.ariaLabel": "Informasi lebih lanjut",
+	"neptune.Label.optional": "(Opsional)",
 	"neptune.Link.opensInNewTab": "(terbuka di tab baru)",
 	"neptune.MoneyInput.Select.placeholder": "Pilih opsi...",
 	"neptune.PhoneNumberInput.SelectInput.placeholder": "Pilih opsi...",

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

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

package/build/i18n/id.json.mjs

@@ -18,6 +18,7 @@ var id = {
 	"neptune.DateLookup.year": "tahun",
 	"neptune.FlowNavigation.back": "kembali ke langkah sebelumnya",
 	"neptune.Info.ariaLabel": "Informasi lebih lanjut",
+	"neptune.Label.optional": "(Opsional)",
 	"neptune.Link.opensInNewTab": "(terbuka di tab baru)",
 	"neptune.MoneyInput.Select.placeholder": "Pilih opsi...",
 	"neptune.PhoneNumberInput.SelectInput.placeholder": "Pilih opsi...",

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

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

package/build/i18n/it.json

@@ -18,6 +18,7 @@
   "neptune.DateLookup.year": "anno",
   "neptune.FlowNavigation.back": "torna al passaggio precedente",
   "neptune.Info.ariaLabel": "Maggiori informazioni",
+  "neptune.Label.optional": "(Facoltativo)",
   "neptune.Link.opensInNewTab": "(si apre in una nuova scheda)",
   "neptune.MoneyInput.Select.placeholder": "Seleziona un'opzione...",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Seleziona un'opzione...",

package/build/i18n/it.json.js

@@ -20,6 +20,7 @@ var it = {
 	"neptune.DateLookup.year": "anno",
 	"neptune.FlowNavigation.back": "torna al passaggio precedente",
 	"neptune.Info.ariaLabel": "Maggiori informazioni",
+	"neptune.Label.optional": "(Facoltativo)",
 	"neptune.Link.opensInNewTab": "(si apre in una nuova scheda)",
 	"neptune.MoneyInput.Select.placeholder": "Seleziona un'opzione...",
 	"neptune.PhoneNumberInput.SelectInput.placeholder": "Seleziona un'opzione...",