@transferwise/components 0.0.0-experimental-6a46f89 → 0.0.0-experimental-d54bc7a

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (108) hide show
  1. package/build/dateLookup/dateTrigger/DateTrigger.js +4 -8
  2. package/build/dateLookup/dateTrigger/DateTrigger.js.map +1 -1
  3. package/build/dateLookup/dateTrigger/DateTrigger.mjs +4 -8
  4. package/build/dateLookup/dateTrigger/DateTrigger.mjs.map +1 -1
  5. package/build/field/Field.js +8 -36
  6. package/build/field/Field.js.map +1 -1
  7. package/build/field/Field.mjs +9 -37
  8. package/build/field/Field.mjs.map +1 -1
  9. package/build/i18n/en.json +1 -1
  10. package/build/i18n/en.json.js +1 -1
  11. package/build/i18n/en.json.mjs +1 -1
  12. package/build/inlineAlert/InlineAlert.js +6 -13
  13. package/build/inlineAlert/InlineAlert.js.map +1 -1
  14. package/build/inlineAlert/InlineAlert.mjs +6 -13
  15. package/build/inlineAlert/InlineAlert.mjs.map +1 -1
  16. package/build/label/Label.js +4 -35
  17. package/build/label/Label.js.map +1 -1
  18. package/build/label/Label.mjs +5 -36
  19. package/build/label/Label.mjs.map +1 -1
  20. package/build/main.css +15 -4
  21. package/build/styles/dateLookup/dateTrigger/DateTrigger.css +8 -0
  22. package/build/styles/main.css +15 -4
  23. package/build/styles/upload/Upload.css +7 -0
  24. package/build/types/dateLookup/dateTrigger/DateTrigger.d.ts.map +1 -1
  25. package/build/types/field/Field.d.ts +2 -4
  26. package/build/types/field/Field.d.ts.map +1 -1
  27. package/build/types/index.d.ts +1 -1
  28. package/build/types/index.d.ts.map +1 -1
  29. package/build/types/inlineAlert/InlineAlert.d.ts +0 -9
  30. package/build/types/inlineAlert/InlineAlert.d.ts.map +1 -1
  31. package/build/types/label/Label.d.ts +2 -22
  32. package/build/types/label/Label.d.ts.map +1 -1
  33. package/build/types/upload/Upload.d.ts +1 -0
  34. package/build/types/upload/Upload.d.ts.map +1 -1
  35. package/build/types/upload/Upload.messages.d.ts +4 -0
  36. package/build/types/upload/Upload.messages.d.ts.map +1 -1
  37. package/build/types/upload/steps/completeStep/completeStep.d.ts +1 -3
  38. package/build/types/upload/steps/completeStep/completeStep.d.ts.map +1 -1
  39. package/build/types/upload/steps/uploadImageStep/uploadImageStep.d.ts +1 -0
  40. package/build/types/upload/steps/uploadImageStep/uploadImageStep.d.ts.map +1 -1
  41. package/build/upload/Upload.js +26 -12
  42. package/build/upload/Upload.js.map +1 -1
  43. package/build/upload/Upload.messages.js +3 -0
  44. package/build/upload/Upload.messages.js.map +1 -1
  45. package/build/upload/Upload.messages.mjs +3 -0
  46. package/build/upload/Upload.messages.mjs.map +1 -1
  47. package/build/upload/Upload.mjs +26 -12
  48. package/build/upload/Upload.mjs.map +1 -1
  49. package/build/upload/steps/completeStep/completeStep.js +15 -30
  50. package/build/upload/steps/completeStep/completeStep.js.map +1 -1
  51. package/build/upload/steps/completeStep/completeStep.mjs +16 -31
  52. package/build/upload/steps/completeStep/completeStep.mjs.map +1 -1
  53. package/build/upload/steps/uploadImageStep/uploadImageStep.js +56 -32
  54. package/build/upload/steps/uploadImageStep/uploadImageStep.js.map +1 -1
  55. package/build/upload/steps/uploadImageStep/uploadImageStep.mjs +56 -32
  56. package/build/upload/steps/uploadImageStep/uploadImageStep.mjs.map +1 -1
  57. package/package.json +3 -3
  58. package/src/dateInput/DateInput.tests.story.tsx +41 -6
  59. package/src/dateLookup/DateLookup.rtl.spec.tsx +1 -1
  60. package/src/dateLookup/dateTrigger/DateTrigger.css +8 -0
  61. package/src/dateLookup/dateTrigger/DateTrigger.less +8 -0
  62. package/src/dateLookup/dateTrigger/DateTrigger.spec.js +1 -1
  63. package/src/dateLookup/dateTrigger/DateTrigger.tsx +4 -9
  64. package/src/field/Field.spec.tsx +5 -41
  65. package/src/field/Field.story.tsx +7 -105
  66. package/src/field/Field.tests.story.tsx +33 -0
  67. package/src/field/Field.tsx +10 -34
  68. package/src/i18n/en.json +1 -1
  69. package/src/index.ts +1 -1
  70. package/src/inlineAlert/InlineAlert.story.tsx +72 -7
  71. package/src/inlineAlert/InlineAlert.tsx +3 -14
  72. package/src/inputWithDisplayFormat/InputWithDisplayFormat.story.js +10 -5
  73. package/src/inputs/InputGroup.spec.tsx +1 -1
  74. package/src/inputs/SearchInput.spec.tsx +1 -1
  75. package/src/inputs/SelectInput.spec.tsx +1 -1
  76. package/src/label/Label.spec.tsx +5 -53
  77. package/src/label/Label.story.tsx +25 -33
  78. package/src/label/Label.tsx +3 -48
  79. package/src/main.css +15 -4
  80. package/src/main.less +0 -1
  81. package/src/moneyInput/MoneyInput.story.tsx +11 -11
  82. package/src/radioGroup/RadioGroup.rtl.spec.tsx +1 -1
  83. package/src/select/Select.rtl.spec.tsx +1 -1
  84. package/src/switch/Switch.spec.tsx +1 -1
  85. package/src/switch/Switch.story.tsx +21 -19
  86. package/src/upload/Upload.css +7 -0
  87. package/src/upload/Upload.less +6 -0
  88. package/src/upload/Upload.messages.ts +4 -0
  89. package/src/upload/Upload.spec.js +8 -7
  90. package/src/upload/Upload.story.tsx +1 -0
  91. package/src/upload/Upload.tsx +39 -20
  92. package/src/upload/steps/completeStep/completeStep.spec.js +0 -9
  93. package/src/upload/steps/completeStep/completeStep.tsx +14 -29
  94. package/src/upload/steps/uploadImageStep/uploadImageStep.spec.js +12 -0
  95. package/src/upload/steps/uploadImageStep/uploadImageStep.tsx +43 -24
  96. package/build/label/Label.messages.js +0 -12
  97. package/build/label/Label.messages.js.map +0 -1
  98. package/build/label/Label.messages.mjs +0 -10
  99. package/build/label/Label.messages.mjs.map +0 -1
  100. package/build/styles/field/Field.css +0 -4
  101. package/build/types/label/Label.messages.d.ts +0 -8
  102. package/build/types/label/Label.messages.d.ts.map +0 -1
  103. package/build/types/label/index.d.ts +0 -3
  104. package/build/types/label/index.d.ts.map +0 -1
  105. package/src/field/Field.css +0 -4
  106. package/src/field/Field.less +0 -5
  107. package/src/label/Label.messages.tsx +0 -8
  108. package/src/label/index.ts +0 -2
package/build/dateLookup/dateTrigger/DateTrigger.js CHANGED
@@ -7,9 +7,7 @@ var CloseButton = require('../../common/closeButton/CloseButton.js');
7
7
  var DateTrigger_messages = require('./DateTrigger.messages.js');
8
8
  var React = require('react');
9
9
  var OverlayIdProvider = require('../../provider/overlay/OverlayIdProvider.js');
10
- var Body = require('../../body/Body.js');
11
10
  var jsxRuntime = require('react/jsx-runtime');
12
- var typography = require('../../common/propsValues/typography.js');
13
11
  var position = require('../../common/propsValues/position.js');
14
12
  var size = require('../../common/propsValues/size.js');
15
13
 
@@ -37,13 +35,11 @@ const DateTrigger = ({
37
35
  disabled: disabled,
38
36
  type: "button",
39
37
  onClick: onClick,
40
- children: [label && /*#__PURE__*/jsxRuntime.jsx(Body, {
41
- as: "span",
42
- className: "np-date-trigger-label m-r-1",
38
+ children: [label && /*#__PURE__*/jsxRuntime.jsx("span", {
39
+ className: "control-label small m-r-1",
43
40
  children: label
44
- }), selectedDate ? /*#__PURE__*/jsxRuntime.jsx(Body, {
45
- as: "span",
46
- type: typography.Typography.BODY_LARGE,
41
+ }), selectedDate ? /*#__PURE__*/jsxRuntime.jsx("span", {
42
+ className: "font-weight-normal",
47
43
  children: formatting.formatDate(selectedDate, locale, {
48
44
  day: 'numeric',
49
45
  month: monthFormat,
package/build/dateLookup/dateTrigger/DateTrigger.js.map CHANGED
@@ -1 +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, 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;;;;"}
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;;;;"}
package/build/dateLookup/dateTrigger/DateTrigger.mjs CHANGED
@@ -5,9 +5,7 @@ import { CloseButton } from '../../common/closeButton/CloseButton.mjs';
5
5
  import dateTriggerMessages from './DateTrigger.messages.mjs';
6
6
  import { useContext } from 'react';
7
7
  import { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider.mjs';
8
- import Body from '../../body/Body.mjs';
9
8
  import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
10
- import { Typography } from '../../common/propsValues/typography.mjs';
11
9
  import { Position } from '../../common/propsValues/position.mjs';
12
10
  import { Size } from '../../common/propsValues/size.mjs';
13
11
 
@@ -35,13 +33,11 @@ const DateTrigger = ({
35
33
  disabled: disabled,
36
34
  type: "button",
37
35
  onClick: onClick,
38
- children: [label && /*#__PURE__*/jsx(Body, {
39
- as: "span",
40
- className: "np-date-trigger-label m-r-1",
36
+ children: [label && /*#__PURE__*/jsx("span", {
37
+ className: "control-label small m-r-1",
41
38
  children: label
42
- }), selectedDate ? /*#__PURE__*/jsx(Body, {
43
- as: "span",
44
- type: Typography.BODY_LARGE,
39
+ }), selectedDate ? /*#__PURE__*/jsx("span", {
40
+ className: "font-weight-normal",
45
41
  children: formatDate(selectedDate, locale, {
46
42
  day: 'numeric',
47
43
  month: monthFormat,
package/build/dateLookup/dateTrigger/DateTrigger.mjs.map CHANGED
@@ -1 +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, 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;;;;"}
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;;;;"}
package/build/field/Field.js CHANGED
@@ -11,69 +11,41 @@ var sentiment = require('../common/propsValues/sentiment.js');
11
11
  const Field = ({
12
12
  id,
13
13
  label,
14
- required = false,
15
14
  message: propMessage,
16
- hint,
17
- description = hint,
18
15
  sentiment: propType = sentiment.Sentiment.NEUTRAL,
19
16
  className,
20
17
  children,
21
18
  ...props
22
19
  }) => {
23
20
  const sentiment$1 = props.error ? sentiment.Sentiment.NEGATIVE : propType;
24
- const message = propMessage || props.error;
21
+ const message = props.error || props.hint || propMessage;
25
22
  const hasError = sentiment$1 === sentiment.Sentiment.NEGATIVE;
26
23
  const labelId = React.useId();
27
24
  const fallbackInputId = React.useId();
28
25
  const inputId = id !== null ? id ?? fallbackInputId : undefined;
29
- const messageId = React.useId();
30
26
  const descriptionId = React.useId();
31
- /**
32
- * form control can have multiple messages to describe it,
33
- * e.g the description underneath the label and inline alert
34
- */
35
- function ariaDescribedbyByIds() {
36
- const messageIds = [];
37
- if (description) {
38
- messageIds.push(descriptionId);
39
- }
40
- if (message) {
41
- messageIds.push(messageId);
42
- }
43
- return messageIds.length > 0 ? messageIds.join(' ') : undefined;
44
- }
45
27
  return /*#__PURE__*/jsxRuntime.jsx(contexts.FieldLabelIdContextProvider, {
46
28
  value: labelId,
47
29
  children: /*#__PURE__*/jsxRuntime.jsx(contexts.InputIdContextProvider, {
48
30
  value: inputId,
49
31
  children: /*#__PURE__*/jsxRuntime.jsx(contexts.InputDescribedByProvider, {
50
- value: ariaDescribedbyByIds(),
32
+ value: message ? descriptionId : undefined,
51
33
  children: /*#__PURE__*/jsxRuntime.jsx(contexts.InputInvalidProvider, {
52
34
  value: hasError,
53
35
  children: /*#__PURE__*/jsxRuntime.jsxs("div", {
54
- className: clsx.clsx('np-field form-group d-block', {
36
+ className: clsx.clsx('form-group d-block', {
55
37
  'has-success': sentiment$1 === sentiment.Sentiment.POSITIVE,
56
38
  'has-warning': sentiment$1 === sentiment.Sentiment.WARNING,
57
39
  'has-error': hasError,
58
40
  'has-info': sentiment$1 === sentiment.Sentiment.NEUTRAL
59
41
  }, className),
60
- children: [label != null ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
61
- children: [/*#__PURE__*/jsxRuntime.jsx(Label.Label, {
62
- id: labelId,
63
- htmlFor: inputId,
64
- children: required ? label : /*#__PURE__*/jsxRuntime.jsx(Label.Label.Optional, {
65
- children: label
66
- })
67
- }), /*#__PURE__*/jsxRuntime.jsx(Label.Label.Description, {
68
- id: descriptionId,
69
- children: description
70
- }), /*#__PURE__*/jsxRuntime.jsx("div", {
71
- className: "np-field-control",
72
- children: children
73
- })]
42
+ children: [label != null ? /*#__PURE__*/jsxRuntime.jsxs(Label.Label, {
43
+ id: labelId,
44
+ htmlFor: inputId,
45
+ children: [label, children]
74
46
  }) : children, message && /*#__PURE__*/jsxRuntime.jsx(InlineAlert, {
75
47
  type: sentiment$1,
76
- id: messageId,
48
+ id: descriptionId,
77
49
  children: message
78
50
  })]
79
51
  })
package/build/field/Field.js.map CHANGED
@@ -1 +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';\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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"}
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;;;;"}
package/build/field/Field.mjs CHANGED
@@ -3,75 +3,47 @@ import { useId } from 'react';
3
3
  import InlineAlert from '../inlineAlert/InlineAlert.mjs';
4
4
  import { FieldLabelIdContextProvider, InputIdContextProvider, InputDescribedByProvider, InputInvalidProvider } from '../inputs/contexts.mjs';
5
5
  import { Label } from '../label/Label.mjs';
6
- import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
6
+ import { jsx, jsxs } from 'react/jsx-runtime';
7
7
  import { Sentiment } from '../common/propsValues/sentiment.mjs';
8
8
 
9
9
  const Field = ({
10
10
  id,
11
11
  label,
12
- required = false,
13
12
  message: propMessage,
14
- hint,
15
- description = hint,
16
13
  sentiment: propType = Sentiment.NEUTRAL,
17
14
  className,
18
15
  children,
19
16
  ...props
20
17
  }) => {
21
18
  const sentiment = props.error ? Sentiment.NEGATIVE : propType;
22
- const message = propMessage || props.error;
19
+ const message = props.error || props.hint || propMessage;
23
20
  const hasError = sentiment === Sentiment.NEGATIVE;
24
21
  const labelId = useId();
25
22
  const fallbackInputId = useId();
26
23
  const inputId = id !== null ? id ?? fallbackInputId : undefined;
27
- const messageId = useId();
28
24
  const descriptionId = useId();
29
- /**
30
- * form control can have multiple messages to describe it,
31
- * e.g the description underneath the label and inline alert
32
- */
33
- function ariaDescribedbyByIds() {
34
- const messageIds = [];
35
- if (description) {
36
- messageIds.push(descriptionId);
37
- }
38
- if (message) {
39
- messageIds.push(messageId);
40
- }
41
- return messageIds.length > 0 ? messageIds.join(' ') : undefined;
42
- }
43
25
  return /*#__PURE__*/jsx(FieldLabelIdContextProvider, {
44
26
  value: labelId,
45
27
  children: /*#__PURE__*/jsx(InputIdContextProvider, {
46
28
  value: inputId,
47
29
  children: /*#__PURE__*/jsx(InputDescribedByProvider, {
48
- value: ariaDescribedbyByIds(),
30
+ value: message ? descriptionId : undefined,
49
31
  children: /*#__PURE__*/jsx(InputInvalidProvider, {
50
32
  value: hasError,
51
33
  children: /*#__PURE__*/jsxs("div", {
52
- className: clsx('np-field form-group d-block', {
34
+ className: clsx('form-group d-block', {
53
35
  'has-success': sentiment === Sentiment.POSITIVE,
54
36
  'has-warning': sentiment === Sentiment.WARNING,
55
37
  'has-error': hasError,
56
38
  'has-info': sentiment === Sentiment.NEUTRAL
57
39
  }, className),
58
- children: [label != null ? /*#__PURE__*/jsxs(Fragment, {
59
- children: [/*#__PURE__*/jsx(Label, {
60
- id: labelId,
61
- htmlFor: inputId,
62
- children: required ? label : /*#__PURE__*/jsx(Label.Optional, {
63
- children: label
64
- })
65
- }), /*#__PURE__*/jsx(Label.Description, {
66
- id: descriptionId,
67
- children: description
68
- }), /*#__PURE__*/jsx("div", {
69
- className: "np-field-control",
70
- children: children
71
- })]
40
+ children: [label != null ? /*#__PURE__*/jsxs(Label, {
41
+ id: labelId,
42
+ htmlFor: inputId,
43
+ children: [label, children]
72
44
  }) : children, message && /*#__PURE__*/jsx(InlineAlert, {
73
45
  type: sentiment,
74
- id: messageId,
46
+ id: descriptionId,
75
47
  children: message
76
48
  })]
77
49
  })
package/build/field/Field.mjs.map CHANGED
@@ -1 +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';\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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"}
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;;;;"}
package/build/i18n/en.json CHANGED
@@ -18,7 +18,6 @@
18
18
  "neptune.DateLookup.year": "year",
19
19
  "neptune.FlowNavigation.back": "back to previous step",
20
20
  "neptune.Info.ariaLabel": "More information",
21
- "neptune.Label.optional": "(Optional)",
22
21
  "neptune.Link.opensInNewTab": "(opens in new tab)",
23
22
  "neptune.MoneyInput.Select.placeholder": "Select an option...",
24
23
  "neptune.PhoneNumberInput.SelectInput.placeholder": "Select an option...",
@@ -36,6 +35,7 @@
36
35
  "neptune.Upload.csWrongTypeMessage": "File type not supported. Please try again with a different file",
37
36
  "neptune.Upload.psButtonText": "Cancel",
38
37
  "neptune.Upload.psProcessingText": "Uploading...",
38
+ "neptune.Upload.retry": "Retry",
39
39
  "neptune.Upload.usButtonText": "Or select a file",
40
40
  "neptune.Upload.usDropMessage": "Drop file to start upload",
41
41
  "neptune.Upload.usPlaceholder": "Drag and drop a file less than {maxSize}MB",
package/build/i18n/en.json.js CHANGED
@@ -20,7 +20,6 @@ var en = {
20
20
  "neptune.DateLookup.year": "year",
21
21
  "neptune.FlowNavigation.back": "back to previous step",
22
22
  "neptune.Info.ariaLabel": "More information",
23
- "neptune.Label.optional": "(Optional)",
24
23
  "neptune.Link.opensInNewTab": "(opens in new tab)",
25
24
  "neptune.MoneyInput.Select.placeholder": "Select an option...",
26
25
  "neptune.PhoneNumberInput.SelectInput.placeholder": "Select an option...",
@@ -38,6 +37,7 @@ var en = {
38
37
  "neptune.Upload.csWrongTypeMessage": "File type not supported. Please try again with a different file",
39
38
  "neptune.Upload.psButtonText": "Cancel",
40
39
  "neptune.Upload.psProcessingText": "Uploading...",
40
+ "neptune.Upload.retry": "Retry",
41
41
  "neptune.Upload.usButtonText": "Or select a file",
42
42
  "neptune.Upload.usDropMessage": "Drop file to start upload",
43
43
  "neptune.Upload.usPlaceholder": "Drag and drop a file less than {maxSize}MB",
package/build/i18n/en.json.mjs CHANGED
@@ -18,7 +18,6 @@ var en = {
18
18
  "neptune.DateLookup.year": "year",
19
19
  "neptune.FlowNavigation.back": "back to previous step",
20
20
  "neptune.Info.ariaLabel": "More information",
21
- "neptune.Label.optional": "(Optional)",
22
21
  "neptune.Link.opensInNewTab": "(opens in new tab)",
23
22
  "neptune.MoneyInput.Select.placeholder": "Select an option...",
24
23
  "neptune.PhoneNumberInput.SelectInput.placeholder": "Select an option...",
@@ -36,6 +35,7 @@ var en = {
36
35
  "neptune.Upload.csWrongTypeMessage": "File type not supported. Please try again with a different file",
37
36
  "neptune.Upload.psButtonText": "Cancel",
38
37
  "neptune.Upload.psProcessingText": "Uploading...",
38
+ "neptune.Upload.retry": "Retry",
39
39
  "neptune.Upload.usButtonText": "Or select a file",
40
40
  "neptune.Upload.usDropMessage": "Drop file to start upload",
41
41
  "neptune.Upload.usPlaceholder": "Drag and drop a file less than {maxSize}MB",
package/build/inlineAlert/InlineAlert.js CHANGED
@@ -2,35 +2,28 @@
2
2
 
3
3
  var clsx = require('clsx');
4
4
  var StatusIcon = require('../statusIcon/StatusIcon.js');
5
- var Body = require('../body/Body.js');
6
5
  var jsxRuntime = require('react/jsx-runtime');
7
6
  var sentiment = require('../common/propsValues/sentiment.js');
8
7
  var size = require('../common/propsValues/size.js');
9
8
 
10
9
  const iconTypes = new Set([sentiment.Sentiment.NEGATIVE, sentiment.Sentiment.ERROR, sentiment.Sentiment.POSITIVE, sentiment.Sentiment.SUCCESS, sentiment.Sentiment.WARNING]);
11
- /**
12
- * Avoid using `<InlineAlert>` component directly
13
- * it's for edge cases when `<Field />` isn't suitable for some reasons.
14
- *
15
- * Example:
16
- * ```
17
- * <Field sentiment={..} message={..}>..</Field>
18
- * ```
19
- */
20
10
  function InlineAlert({
21
11
  id,
22
12
  type = 'neutral',
23
13
  className,
24
14
  children
25
15
  }) {
26
- return /*#__PURE__*/jsxRuntime.jsxs(Body, {
16
+ return /*#__PURE__*/jsxRuntime.jsxs("div", {
27
17
  role: "alert",
28
18
  id: id,
29
- className: clsx.clsx('alert alert-detach', `alert-${type === sentiment.Sentiment.NEGATIVE || type === sentiment.Sentiment.ERROR ? 'danger' : type}`, 'd-flex', className),
19
+ className: clsx.clsx('alert alert-detach', `alert-${type === sentiment.Sentiment.NEGATIVE || type === sentiment.Sentiment.ERROR ? 'danger' : type}`, className),
30
20
  children: [iconTypes.has(type) && /*#__PURE__*/jsxRuntime.jsx(StatusIcon, {
31
21
  sentiment: type,
32
22
  size: size.Size.SMALL
33
- }), children]
23
+ }), /*#__PURE__*/jsxRuntime.jsx("div", {
24
+ className: "np-text-body-default",
25
+ children: children
26
+ })]
34
27
  });
35
28
  }
36
29
 
package/build/inlineAlert/InlineAlert.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"InlineAlert.js","sources":["../../src/inlineAlert/InlineAlert.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ReactNode } from 'react';\n\nimport { Sentiment, Size } from '../common';\nimport StatusIcon from '../statusIcon';\nimport Body from '../body';\n\nexport interface InlineAlertProps {\n id?: string;\n type?: `${Sentiment}`;\n className?: string;\n children: ReactNode;\n}\n\nconst iconTypes = new Set<NonNullable<InlineAlertProps['type']>>([\n Sentiment.NEGATIVE,\n Sentiment.ERROR,\n Sentiment.POSITIVE,\n Sentiment.SUCCESS,\n Sentiment.WARNING,\n]);\n\n/**\n * Avoid using `<InlineAlert>` component directly\n * it's for edge cases when `<Field />` isn't suitable for some reasons.\n *\n * Example:\n * ```\n * <Field sentiment={..} message={..}>..</Field>\n * ```\n */\nexport default function InlineAlert({\n id,\n type = 'neutral',\n className,\n children,\n}: InlineAlertProps) {\n return (\n <Body\n role=\"alert\"\n id={id}\n className={clsx(\n 'alert alert-detach',\n `alert-${type === Sentiment.NEGATIVE || type === Sentiment.ERROR ? 'danger' : type}`,\n 'd-flex',\n className,\n )}\n >\n {iconTypes.has(type) && <StatusIcon sentiment={type} size={Size.SMALL} />}\n {children}\n </Body>\n );\n}\n"],"names":["iconTypes","Set","Sentiment","NEGATIVE","ERROR","POSITIVE","SUCCESS","WARNING","InlineAlert","id","type","className","children","_jsxs","Body","role","clsx","has","_jsx","StatusIcon","sentiment","size","Size","SMALL"],"mappings":";;;;;;;;;AAcA,MAAMA,SAAS,GAAG,IAAIC,GAAG,CAAwC,CAC/DC,mBAAS,CAACC,QAAQ,EAClBD,mBAAS,CAACE,KAAK,EACfF,mBAAS,CAACG,QAAQ,EAClBH,mBAAS,CAACI,OAAO,EACjBJ,mBAAS,CAACK,OAAO,CAClB,CAAC,CAAA;AAEF;;;;;;;;AAQG;AACqB,SAAAC,WAAWA,CAAC;EAClCC,EAAE;AACFC,EAAAA,IAAI,GAAG,SAAS;EAChBC,SAAS;AACTC,EAAAA,QAAAA;AACiB,CAAA,EAAA;EACjB,oBACEC,eAAA,CAACC,IAAI,EAAA;AACHC,IAAAA,IAAI,EAAC,OAAO;AACZN,IAAAA,EAAE,EAAEA,EAAG;IACPE,SAAS,EAAEK,SAAI,CACb,oBAAoB,EACpB,CAASN,MAAAA,EAAAA,IAAI,KAAKR,mBAAS,CAACC,QAAQ,IAAIO,IAAI,KAAKR,mBAAS,CAACE,KAAK,GAAG,QAAQ,GAAGM,IAAI,CAAA,CAAE,EACpF,QAAQ,EACRC,SAAS,CACT;IAAAC,QAAA,EAAA,CAEDZ,SAAS,CAACiB,GAAG,CAACP,IAAI,CAAC,iBAAIQ,cAAA,CAACC,UAAU,EAAA;AAACC,MAAAA,SAAS,EAAEV,IAAK;MAACW,IAAI,EAAEC,SAAI,CAACC,KAAAA;KAAM,CAAG,EACxEX,QAAQ,CAAA;AAAA,GACL,CAAC,CAAA;AAEX;;;;"}
1
+ {"version":3,"file":"InlineAlert.js","sources":["../../src/inlineAlert/InlineAlert.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ReactNode } from 'react';\n\nimport { Sentiment, Size } from '../common';\nimport StatusIcon from '../statusIcon';\n\nexport interface InlineAlertProps {\n id?: string;\n type?: `${Sentiment}`;\n className?: string;\n children: ReactNode;\n}\n\nconst iconTypes = new Set<NonNullable<InlineAlertProps['type']>>([\n Sentiment.NEGATIVE,\n Sentiment.ERROR,\n Sentiment.POSITIVE,\n Sentiment.SUCCESS,\n Sentiment.WARNING,\n]);\n\nexport default function InlineAlert({\n id,\n type = 'neutral',\n className,\n children,\n}: InlineAlertProps) {\n return (\n <div\n role=\"alert\"\n id={id}\n className={clsx(\n 'alert alert-detach',\n `alert-${type === Sentiment.NEGATIVE || type === Sentiment.ERROR ? 'danger' : type}`,\n className,\n )}\n >\n {iconTypes.has(type) && <StatusIcon sentiment={type} size={Size.SMALL} />}\n <div className=\"np-text-body-default\">{children}</div>\n </div>\n );\n}\n"],"names":["iconTypes","Set","Sentiment","NEGATIVE","ERROR","POSITIVE","SUCCESS","WARNING","InlineAlert","id","type","className","children","_jsxs","role","clsx","has","_jsx","StatusIcon","sentiment","size","Size","SMALL"],"mappings":";;;;;;;;AAaA,MAAMA,SAAS,GAAG,IAAIC,GAAG,CAAwC,CAC/DC,mBAAS,CAACC,QAAQ,EAClBD,mBAAS,CAACE,KAAK,EACfF,mBAAS,CAACG,QAAQ,EAClBH,mBAAS,CAACI,OAAO,EACjBJ,mBAAS,CAACK,OAAO,CAClB,CAAC,CAAA;AAEsB,SAAAC,WAAWA,CAAC;EAClCC,EAAE;AACFC,EAAAA,IAAI,GAAG,SAAS;EAChBC,SAAS;AACTC,EAAAA,QAAAA;AACiB,CAAA,EAAA;AACjB,EAAA,oBACEC,eAAA,CAAA,KAAA,EAAA;AACEC,IAAAA,IAAI,EAAC,OAAO;AACZL,IAAAA,EAAE,EAAEA,EAAG;IACPE,SAAS,EAAEI,SAAI,CACb,oBAAoB,EACpB,SAASL,IAAI,KAAKR,mBAAS,CAACC,QAAQ,IAAIO,IAAI,KAAKR,mBAAS,CAACE,KAAK,GAAG,QAAQ,GAAGM,IAAI,CAAA,CAAE,EACpFC,SAAS,CACT;IAAAC,QAAA,EAAA,CAEDZ,SAAS,CAACgB,GAAG,CAACN,IAAI,CAAC,iBAAIO,cAAA,CAACC,UAAU,EAAA;AAACC,MAAAA,SAAS,EAAET,IAAK;MAACU,IAAI,EAAEC,SAAI,CAACC,KAAAA;KAAM,CAAG,eACzEL,cAAA,CAAA,KAAA,EAAA;AAAKN,MAAAA,SAAS,EAAC,sBAAsB;AAAAC,MAAAA,QAAA,EAAEA,QAAAA;AAAQ,KAAM,CACvD,CAAA;AAAA,GAAK,CAAC,CAAA;AAEV;;;;"}
package/build/inlineAlert/InlineAlert.mjs CHANGED
@@ -1,34 +1,27 @@
1
1
  import { clsx } from 'clsx';
2
2
  import StatusIcon from '../statusIcon/StatusIcon.mjs';
3
- import Body from '../body/Body.mjs';
4
3
  import { jsxs, jsx } from 'react/jsx-runtime';
5
4
  import { Sentiment } from '../common/propsValues/sentiment.mjs';
6
5
  import { Size } from '../common/propsValues/size.mjs';
7
6
 
8
7
  const iconTypes = new Set([Sentiment.NEGATIVE, Sentiment.ERROR, Sentiment.POSITIVE, Sentiment.SUCCESS, Sentiment.WARNING]);
9
- /**
10
- * Avoid using `<InlineAlert>` component directly
11
- * it's for edge cases when `<Field />` isn't suitable for some reasons.
12
- *
13
- * Example:
14
- * ```
15
- * <Field sentiment={..} message={..}>..</Field>
16
- * ```
17
- */
18
8
  function InlineAlert({
19
9
  id,
20
10
  type = 'neutral',
21
11
  className,
22
12
  children
23
13
  }) {
24
- return /*#__PURE__*/jsxs(Body, {
14
+ return /*#__PURE__*/jsxs("div", {
25
15
  role: "alert",
26
16
  id: id,
27
- className: clsx('alert alert-detach', `alert-${type === Sentiment.NEGATIVE || type === Sentiment.ERROR ? 'danger' : type}`, 'd-flex', className),
17
+ className: clsx('alert alert-detach', `alert-${type === Sentiment.NEGATIVE || type === Sentiment.ERROR ? 'danger' : type}`, className),
28
18
  children: [iconTypes.has(type) && /*#__PURE__*/jsx(StatusIcon, {
29
19
  sentiment: type,
30
20
  size: Size.SMALL
31
- }), children]
21
+ }), /*#__PURE__*/jsx("div", {
22
+ className: "np-text-body-default",
23
+ children: children
24
+ })]
32
25
  });
33
26
  }
34
27
 
package/build/inlineAlert/InlineAlert.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"InlineAlert.mjs","sources":["../../src/inlineAlert/InlineAlert.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ReactNode } from 'react';\n\nimport { Sentiment, Size } from '../common';\nimport StatusIcon from '../statusIcon';\nimport Body from '../body';\n\nexport interface InlineAlertProps {\n id?: string;\n type?: `${Sentiment}`;\n className?: string;\n children: ReactNode;\n}\n\nconst iconTypes = new Set<NonNullable<InlineAlertProps['type']>>([\n Sentiment.NEGATIVE,\n Sentiment.ERROR,\n Sentiment.POSITIVE,\n Sentiment.SUCCESS,\n Sentiment.WARNING,\n]);\n\n/**\n * Avoid using `<InlineAlert>` component directly\n * it's for edge cases when `<Field />` isn't suitable for some reasons.\n *\n * Example:\n * ```\n * <Field sentiment={..} message={..}>..</Field>\n * ```\n */\nexport default function InlineAlert({\n id,\n type = 'neutral',\n className,\n children,\n}: InlineAlertProps) {\n return (\n <Body\n role=\"alert\"\n id={id}\n className={clsx(\n 'alert alert-detach',\n `alert-${type === Sentiment.NEGATIVE || type === Sentiment.ERROR ? 'danger' : type}`,\n 'd-flex',\n className,\n )}\n >\n {iconTypes.has(type) && <StatusIcon sentiment={type} size={Size.SMALL} />}\n {children}\n </Body>\n );\n}\n"],"names":["iconTypes","Set","Sentiment","NEGATIVE","ERROR","POSITIVE","SUCCESS","WARNING","InlineAlert","id","type","className","children","_jsxs","Body","role","clsx","has","_jsx","StatusIcon","sentiment","size","Size","SMALL"],"mappings":";;;;;;;AAcA,MAAMA,SAAS,GAAG,IAAIC,GAAG,CAAwC,CAC/DC,SAAS,CAACC,QAAQ,EAClBD,SAAS,CAACE,KAAK,EACfF,SAAS,CAACG,QAAQ,EAClBH,SAAS,CAACI,OAAO,EACjBJ,SAAS,CAACK,OAAO,CAClB,CAAC,CAAA;AAEF;;;;;;;;AAQG;AACqB,SAAAC,WAAWA,CAAC;EAClCC,EAAE;AACFC,EAAAA,IAAI,GAAG,SAAS;EAChBC,SAAS;AACTC,EAAAA,QAAAA;AACiB,CAAA,EAAA;EACjB,oBACEC,IAAA,CAACC,IAAI,EAAA;AACHC,IAAAA,IAAI,EAAC,OAAO;AACZN,IAAAA,EAAE,EAAEA,EAAG;IACPE,SAAS,EAAEK,IAAI,CACb,oBAAoB,EACpB,CAASN,MAAAA,EAAAA,IAAI,KAAKR,SAAS,CAACC,QAAQ,IAAIO,IAAI,KAAKR,SAAS,CAACE,KAAK,GAAG,QAAQ,GAAGM,IAAI,CAAA,CAAE,EACpF,QAAQ,EACRC,SAAS,CACT;IAAAC,QAAA,EAAA,CAEDZ,SAAS,CAACiB,GAAG,CAACP,IAAI,CAAC,iBAAIQ,GAAA,CAACC,UAAU,EAAA;AAACC,MAAAA,SAAS,EAAEV,IAAK;MAACW,IAAI,EAAEC,IAAI,CAACC,KAAAA;KAAM,CAAG,EACxEX,QAAQ,CAAA;AAAA,GACL,CAAC,CAAA;AAEX;;;;"}
1
+ {"version":3,"file":"InlineAlert.mjs","sources":["../../src/inlineAlert/InlineAlert.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ReactNode } from 'react';\n\nimport { Sentiment, Size } from '../common';\nimport StatusIcon from '../statusIcon';\n\nexport interface InlineAlertProps {\n id?: string;\n type?: `${Sentiment}`;\n className?: string;\n children: ReactNode;\n}\n\nconst iconTypes = new Set<NonNullable<InlineAlertProps['type']>>([\n Sentiment.NEGATIVE,\n Sentiment.ERROR,\n Sentiment.POSITIVE,\n Sentiment.SUCCESS,\n Sentiment.WARNING,\n]);\n\nexport default function InlineAlert({\n id,\n type = 'neutral',\n className,\n children,\n}: InlineAlertProps) {\n return (\n <div\n role=\"alert\"\n id={id}\n className={clsx(\n 'alert alert-detach',\n `alert-${type === Sentiment.NEGATIVE || type === Sentiment.ERROR ? 'danger' : type}`,\n className,\n )}\n >\n {iconTypes.has(type) && <StatusIcon sentiment={type} size={Size.SMALL} />}\n <div className=\"np-text-body-default\">{children}</div>\n </div>\n );\n}\n"],"names":["iconTypes","Set","Sentiment","NEGATIVE","ERROR","POSITIVE","SUCCESS","WARNING","InlineAlert","id","type","className","children","_jsxs","role","clsx","has","_jsx","StatusIcon","sentiment","size","Size","SMALL"],"mappings":";;;;;;AAaA,MAAMA,SAAS,GAAG,IAAIC,GAAG,CAAwC,CAC/DC,SAAS,CAACC,QAAQ,EAClBD,SAAS,CAACE,KAAK,EACfF,SAAS,CAACG,QAAQ,EAClBH,SAAS,CAACI,OAAO,EACjBJ,SAAS,CAACK,OAAO,CAClB,CAAC,CAAA;AAEsB,SAAAC,WAAWA,CAAC;EAClCC,EAAE;AACFC,EAAAA,IAAI,GAAG,SAAS;EAChBC,SAAS;AACTC,EAAAA,QAAAA;AACiB,CAAA,EAAA;AACjB,EAAA,oBACEC,IAAA,CAAA,KAAA,EAAA;AACEC,IAAAA,IAAI,EAAC,OAAO;AACZL,IAAAA,EAAE,EAAEA,EAAG;IACPE,SAAS,EAAEI,IAAI,CACb,oBAAoB,EACpB,SAASL,IAAI,KAAKR,SAAS,CAACC,QAAQ,IAAIO,IAAI,KAAKR,SAAS,CAACE,KAAK,GAAG,QAAQ,GAAGM,IAAI,CAAA,CAAE,EACpFC,SAAS,CACT;IAAAC,QAAA,EAAA,CAEDZ,SAAS,CAACgB,GAAG,CAACN,IAAI,CAAC,iBAAIO,GAAA,CAACC,UAAU,EAAA;AAACC,MAAAA,SAAS,EAAET,IAAK;MAACU,IAAI,EAAEC,IAAI,CAACC,KAAAA;KAAM,CAAG,eACzEL,GAAA,CAAA,KAAA,EAAA;AAAKN,MAAAA,SAAS,EAAC,sBAAsB;AAAAC,MAAAA,QAAA,EAAEA,QAAAA;AAAQ,KAAM,CACvD,CAAA;AAAA,GAAK,CAAC,CAAA;AAEV;;;;"}
package/build/label/Label.js CHANGED
@@ -1,52 +1,21 @@
1
1
  'use strict';
2
2
 
3
3
  var clsx = require('clsx');
4
- var Label_messages = require('./Label.messages.js');
5
- var reactIntl = require('react-intl');
6
- var Body = require('../body/Body.js');
7
4
  var jsxRuntime = require('react/jsx-runtime');
8
5
 
9
6
  const Label = ({
10
- className,
11
- children,
7
+ id,
12
8
  htmlFor,
13
- id
9
+ className,
10
+ children
14
11
  }) => {
15
12
  return /*#__PURE__*/jsxRuntime.jsx("label", {
16
13
  id: id,
17
14
  htmlFor: htmlFor,
18
- className: clsx.clsx('np-label d-flex flex-column np-text-body-default-bold text-primary m-b-0', className),
15
+ className: clsx.clsx('control-label d-flex flex-column gap-y-1 m-b-0', className),
19
16
  children: children
20
17
  });
21
18
  };
22
- // eslint-disable-next-line functional/immutable-data
23
- Label.Optional = function Optional({
24
- children,
25
- className
26
- }) {
27
- const {
28
- formatMessage
29
- } = reactIntl.useIntl();
30
- return /*#__PURE__*/jsxRuntime.jsxs("div", {
31
- children: [children, /*#__PURE__*/jsxRuntime.jsx(Body, {
32
- as: "span",
33
- className: clsx.clsx('text-secondary', 'm-l-1', className),
34
- children: formatMessage(Label_messages.optionalLabel)
35
- })]
36
- });
37
- };
38
- // eslint-disable-next-line functional/immutable-data
39
- Label.Description = function Description({
40
- id,
41
- children,
42
- className
43
- }) {
44
- return children ? /*#__PURE__*/jsxRuntime.jsx(Body, {
45
- id: id,
46
- className: clsx.clsx('text-secondary', className),
47
- children: children
48
- }) : null;
49
- };
50
19
 
51
20
  exports.Label = Label;
52
21
  //# sourceMappingURL=Label.js.map
package/build/label/Label.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Label.js","sources":["../../src/label/Label.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport messages from './Label.messages';\nimport { useIntl } from 'react-intl';\nimport Body from '../body';\nimport { CommonProps } from '../common';\nimport { PropsWithChildren } from 'react';\n\nexport type LabelProps = {\n id?: string;\n htmlFor?: string | undefined;\n className?: string;\n children?: React.ReactNode;\n};\n\n/**\n * Avoid using `<Label>` component directly\n * it's for edge cases when `<Field />` isn't suitable for some reasons.\n *\n * Example:\n * ```\n * <Field label={..} description={..} required={..}>..</Field>\n * ```\n */\nconst Label = ({ className, children, htmlFor, id }: LabelProps) => {\n return (\n <label\n id={id}\n htmlFor={htmlFor}\n className={clsx(\n 'np-label d-flex flex-column np-text-body-default-bold text-primary m-b-0',\n className,\n )}\n >\n {children}\n </label>\n );\n};\n\nexport type LabelOptionalProps = PropsWithChildren<CommonProps>;\n\n// eslint-disable-next-line functional/immutable-data\nLabel.Optional = function Optional({ children, className }: LabelOptionalProps) {\n const { formatMessage } = useIntl();\n return (\n <div>\n {children}\n <Body as=\"span\" className={clsx('text-secondary', 'm-l-1', className)}>\n {formatMessage(messages.optionalLabel)}\n </Body>\n </div>\n );\n};\n\nexport type LabelDescriptionProps = PropsWithChildren<CommonProps> & { id?: string };\n\n// eslint-disable-next-line functional/immutable-data\nLabel.Description = function Description({ id, children, className }: LabelDescriptionProps) {\n return children ? (\n <Body id={id} className={clsx('text-secondary', className)}>\n {children}\n </Body>\n ) : null;\n};\n\nexport { Label };\n"],"names":["Label","className","children","htmlFor","id","_jsx","clsx","Optional","formatMessage","useIntl","_jsxs","Body","as","messages","optionalLabel","Description"],"mappings":";;;;;;;;AAuBMA,MAAAA,KAAK,GAAGA,CAAC;EAAEC,SAAS;EAAEC,QAAQ;EAAEC,OAAO;AAAEC,EAAAA,EAAAA;AAAE,CAAc,KAAI;AACjE,EAAA,oBACEC,cAAA,CAAA,OAAA,EAAA;AACED,IAAAA,EAAE,EAAEA,EAAG;AACPD,IAAAA,OAAO,EAAEA,OAAQ;AACjBF,IAAAA,SAAS,EAAEK,SAAI,CACb,0EAA0E,EAC1EL,SAAS,CACT;AAAAC,IAAAA,QAAA,EAEDA,QAAAA;AAAQ,GACJ,CAAC,CAAA;AAEZ,EAAC;AAID;AACAF,KAAK,CAACO,QAAQ,GAAG,SAASA,QAAQA,CAAC;EAAEL,QAAQ;AAAED,EAAAA,SAAAA;AAA+B,CAAA,EAAA;EAC5E,MAAM;AAAEO,IAAAA,aAAAA;GAAe,GAAGC,iBAAO,EAAE,CAAA;AACnC,EAAA,oBACEC,eAAA,CAAA,KAAA,EAAA;AAAAR,IAAAA,QAAA,EACGA,CAAAA,QAAQ,eACTG,cAAA,CAACM,IAAI,EAAA;AAACC,MAAAA,EAAE,EAAC,MAAM;MAACX,SAAS,EAAEK,SAAI,CAAC,gBAAgB,EAAE,OAAO,EAAEL,SAAS,CAAE;AAAAC,MAAAA,QAAA,EACnEM,aAAa,CAACK,cAAQ,CAACC,aAAa,CAAA;AAAC,KAClC,CACR,CAAA;AAAA,GAAK,CAAC,CAAA;AAEV,CAAC,CAAA;AAID;AACAd,KAAK,CAACe,WAAW,GAAG,SAASA,WAAWA,CAAC;EAAEX,EAAE;EAAEF,QAAQ;AAAED,EAAAA,SAAAA;AAAkC,CAAA,EAAA;AACzF,EAAA,OAAOC,QAAQ,gBACbG,cAAA,CAACM,IAAI,EAAA;AAACP,IAAAA,EAAE,EAAEA,EAAG;AAACH,IAAAA,SAAS,EAAEK,SAAI,CAAC,gBAAgB,EAAEL,SAAS,CAAE;AAAAC,IAAAA,QAAA,EACxDA,QAAAA;GACG,CAAC,GACL,IAAI,CAAA;AACV,CAAC;;;;"}
1
+ {"version":3,"file":"Label.js","sources":["../../src/label/Label.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nexport type LabelProps = {\n id?: string;\n htmlFor?: string;\n className?: string;\n children?: React.ReactNode;\n};\n\nexport const Label = ({ id, htmlFor, className, children }: LabelProps) => {\n return (\n <label\n id={id}\n htmlFor={htmlFor}\n className={clsx('control-label d-flex flex-column gap-y-1 m-b-0', className)}\n >\n {children}\n </label>\n );\n};\n"],"names":["Label","id","htmlFor","className","children","_jsx","clsx"],"mappings":";;;;;AASO,MAAMA,KAAK,GAAGA,CAAC;EAAEC,EAAE;EAAEC,OAAO;EAAEC,SAAS;AAAEC,EAAAA,QAAAA;AAAQ,CAAc,KAAI;AACxE,EAAA,oBACEC,cAAA,CAAA,OAAA,EAAA;AACEJ,IAAAA,EAAE,EAAEA,EAAG;AACPC,IAAAA,OAAO,EAAEA,OAAQ;AACjBC,IAAAA,SAAS,EAAEG,SAAI,CAAC,gDAAgD,EAAEH,SAAS,CAAE;AAAAC,IAAAA,QAAA,EAE5EA,QAAAA;AAAQ,GACJ,CAAC,CAAA;AAEZ;;;;"}