@transferwise/components 46.141.0 → 46.142.0

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 (93) hide show
  1. package/build/avatarLayout/AvatarLayout.js +15 -1
  2. package/build/avatarLayout/AvatarLayout.js.map +1 -1
  3. package/build/avatarLayout/AvatarLayout.mjs +15 -1
  4. package/build/avatarLayout/AvatarLayout.mjs.map +1 -1
  5. package/build/avatarView/AvatarView.js +6 -2
  6. package/build/avatarView/AvatarView.js.map +1 -1
  7. package/build/avatarView/AvatarView.mjs +6 -2
  8. package/build/avatarView/AvatarView.mjs.map +1 -1
  9. package/build/avatarView/Dot.js +8 -0
  10. package/build/avatarView/Dot.js.map +1 -1
  11. package/build/avatarView/Dot.mjs +8 -0
  12. package/build/avatarView/Dot.mjs.map +1 -1
  13. package/build/common/circle/Circle.js +6 -2
  14. package/build/common/circle/Circle.js.map +1 -1
  15. package/build/common/circle/Circle.mjs +6 -2
  16. package/build/common/circle/Circle.mjs.map +1 -1
  17. package/build/expressiveMoneyInput/amountInput/AmountInput.js +1 -1
  18. package/build/expressiveMoneyInput/amountInput/AmountInput.js.map +1 -1
  19. package/build/expressiveMoneyInput/amountInput/AmountInput.mjs +1 -1
  20. package/build/expressiveMoneyInput/amountInput/AmountInput.mjs.map +1 -1
  21. package/build/field/Field.js +63 -32
  22. package/build/field/Field.js.map +1 -1
  23. package/build/field/Field.messages.js +14 -0
  24. package/build/field/Field.messages.js.map +1 -0
  25. package/build/field/Field.messages.mjs +10 -0
  26. package/build/field/Field.messages.mjs.map +1 -0
  27. package/build/field/Field.mjs +65 -34
  28. package/build/field/Field.mjs.map +1 -1
  29. package/build/i18n/en.json +1 -0
  30. package/build/i18n/en.json.js +1 -0
  31. package/build/i18n/en.json.js.map +1 -1
  32. package/build/i18n/en.json.mjs +1 -0
  33. package/build/i18n/en.json.mjs.map +1 -1
  34. package/build/inputs/TextArea.js +5 -0
  35. package/build/inputs/TextArea.js.map +1 -1
  36. package/build/inputs/TextArea.mjs +6 -1
  37. package/build/inputs/TextArea.mjs.map +1 -1
  38. package/build/inputs/contexts.js +16 -0
  39. package/build/inputs/contexts.js.map +1 -1
  40. package/build/inputs/contexts.mjs +16 -2
  41. package/build/inputs/contexts.mjs.map +1 -1
  42. package/build/main.css +42 -8
  43. package/build/styles/avatarView/AvatarView.css +4 -4
  44. package/build/styles/avatarView/Dot.css +4 -4
  45. package/build/styles/css/neptune.css +15 -1
  46. package/build/styles/expressiveMoneyInput/ExpressiveMoneyInput.css +2 -0
  47. package/build/styles/expressiveMoneyInput/amountInput/AmountInput.css +2 -0
  48. package/build/styles/field/Field.css +19 -3
  49. package/build/styles/main.css +42 -8
  50. package/build/styles/styles/less/neptune.css +15 -1
  51. package/build/types/avatarView/AvatarView.d.ts +1 -1
  52. package/build/types/avatarView/AvatarView.d.ts.map +1 -1
  53. package/build/types/avatarView/Dot.d.ts.map +1 -1
  54. package/build/types/common/circle/Circle.d.ts +1 -1
  55. package/build/types/common/circle/Circle.d.ts.map +1 -1
  56. package/build/types/field/Field.d.ts.map +1 -1
  57. package/build/types/field/Field.messages.d.ts +8 -0
  58. package/build/types/field/Field.messages.d.ts.map +1 -0
  59. package/build/types/inputs/TextArea.d.ts.map +1 -1
  60. package/build/types/inputs/contexts.d.ts +6 -0
  61. package/build/types/inputs/contexts.d.ts.map +1 -1
  62. package/build/types/test-utils/index.d.ts +2 -0
  63. package/build/types/test-utils/index.d.ts.map +1 -1
  64. package/package.json +2 -2
  65. package/src/avatarLayout/AvatarLayout.story.tsx +1 -1
  66. package/src/avatarLayout/AvatarLayout.tsx +4 -0
  67. package/src/avatarView/AvatarView.css +4 -4
  68. package/src/avatarView/AvatarView.story.tsx +17 -13
  69. package/src/avatarView/AvatarView.tsx +5 -1
  70. package/src/avatarView/Dot.css +4 -4
  71. package/src/avatarView/Dot.less +6 -6
  72. package/src/avatarView/Dot.tsx +2 -0
  73. package/src/common/circle/Circle.tsx +5 -1
  74. package/src/expressiveMoneyInput/ExpressiveMoneyInput.css +2 -0
  75. package/src/expressiveMoneyInput/ExpressiveMoneyInput.test.story.tsx +43 -0
  76. package/src/expressiveMoneyInput/amountInput/AmountInput.css +2 -0
  77. package/src/expressiveMoneyInput/amountInput/AmountInput.less +2 -0
  78. package/src/expressiveMoneyInput/amountInput/AmountInput.tsx +1 -1
  79. package/src/field/Field.css +19 -3
  80. package/src/field/Field.less +17 -3
  81. package/src/field/Field.messages.ts +8 -0
  82. package/src/field/Field.story.tsx +5 -1
  83. package/src/field/Field.test.tsx +90 -0
  84. package/src/field/Field.tsx +84 -37
  85. package/src/i18n/en.json +1 -0
  86. package/src/inputs/TextArea.story.tsx +97 -0
  87. package/src/inputs/TextArea.test.story.tsx +142 -0
  88. package/src/inputs/TextArea.tsx +7 -2
  89. package/src/inputs/contexts.tsx +18 -1
  90. package/src/main.css +42 -8
  91. package/src/styles/less/core/_typography.less +28 -6
  92. package/src/styles/less/neptune.css +15 -1
  93. package/src/textareaWithDisplayFormat/TextareaWithDisplayFormat.story.tsx +1 -0
@@ -1,17 +1,22 @@
1
1
  import { clsx } from 'clsx';
2
2
  import { forwardRef } from 'react';
3
3
  import { inputClassNameBase } from './_common.mjs';
4
- import { useInputAttributes } from './contexts.mjs';
4
+ import { useInputAttributes, useTextareaCharacterCount } from './contexts.mjs';
5
5
  import { jsx } from 'react/jsx-runtime';
6
6
 
7
7
  const TextArea = /*#__PURE__*/forwardRef(function TextArea({
8
8
  className,
9
+ maxLength,
9
10
  ...restProps
10
11
  }, reference) {
11
12
  const inputAttributes = useInputAttributes();
13
+ const value = restProps.value ?? restProps.defaultValue ?? '';
14
+ const currentLength = typeof value === 'string' ? value.length : String(value).length;
15
+ useTextareaCharacterCount(currentLength, maxLength);
12
16
  return /*#__PURE__*/jsx("textarea", {
13
17
  ref: reference,
14
18
  className: clsx(className, inputClassNameBase(), 'np-text-area'),
19
+ maxLength: maxLength,
15
20
  ...inputAttributes,
16
21
  ...restProps
17
22
  });
@@ -1 +1 @@
1
- {"version":3,"file":"TextArea.mjs","sources":["../../src/inputs/TextArea.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport { Merge } from '../utils';\nimport { inputClassNameBase } from './_common';\nimport { useInputAttributes } from './contexts';\n\nexport interface TextAreaProps extends Merge<\n React.ComponentPropsWithRef<'textarea'>,\n {\n 'aria-invalid'?: boolean;\n }\n> {}\n\nexport const TextArea = forwardRef(function TextArea(\n { className, ...restProps }: TextAreaProps,\n reference: React.ForwardedRef<HTMLTextAreaElement | null>,\n) {\n const inputAttributes = useInputAttributes();\n\n return (\n <textarea\n ref={reference}\n className={clsx(className, inputClassNameBase(), 'np-text-area')}\n {...inputAttributes}\n {...restProps}\n />\n );\n});\n"],"names":["TextArea","forwardRef","className","restProps","reference","inputAttributes","useInputAttributes","_jsx","ref","clsx","inputClassNameBase"],"mappings":";;;;;;MAcaA,QAAQ,gBAAGC,UAAU,CAAC,SAASD,QAAQA,CAClD;EAAEE,SAAS;EAAE,GAAGC;AAAS,CAAiB,EAC1CC,SAAyD,EAAA;AAEzD,EAAA,MAAMC,eAAe,GAAGC,kBAAkB,EAAE;AAE5C,EAAA,oBACEC,GAAA,CAAA,UAAA,EAAA;AACEC,IAAAA,GAAG,EAAEJ,SAAU;IACfF,SAAS,EAAEO,IAAI,CAACP,SAAS,EAAEQ,kBAAkB,EAAE,EAAE,cAAc,CAAE;AAAA,IAAA,GAC7DL,eAAe;IAAA,GACfF;AAAS,GAAC,CACd;AAEN,CAAC;;;;"}
1
+ {"version":3,"file":"TextArea.mjs","sources":["../../src/inputs/TextArea.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport { Merge } from '../utils';\nimport { inputClassNameBase } from './_common';\nimport { useTextareaCharacterCount, useInputAttributes } from './contexts';\n\nexport interface TextAreaProps extends Merge<\n React.ComponentPropsWithRef<'textarea'>,\n {\n 'aria-invalid'?: boolean;\n }\n> {}\n\nexport const TextArea = forwardRef(function TextArea(\n { className, maxLength, ...restProps }: TextAreaProps,\n reference: React.ForwardedRef<HTMLTextAreaElement | null>,\n) {\n const inputAttributes = useInputAttributes();\n const value = restProps.value ?? restProps.defaultValue ?? '';\n const currentLength = typeof value === 'string' ? value.length : String(value).length;\n\n useTextareaCharacterCount(currentLength, maxLength);\n\n return (\n <textarea\n ref={reference}\n className={clsx(className, inputClassNameBase(), 'np-text-area')}\n maxLength={maxLength}\n {...inputAttributes}\n {...restProps}\n />\n );\n});\n"],"names":["TextArea","forwardRef","className","maxLength","restProps","reference","inputAttributes","useInputAttributes","value","defaultValue","currentLength","length","String","useTextareaCharacterCount","_jsx","ref","clsx","inputClassNameBase"],"mappings":";;;;;;MAcaA,QAAQ,gBAAGC,UAAU,CAAC,SAASD,QAAQA,CAClD;EAAEE,SAAS;EAAEC,SAAS;EAAE,GAAGC;AAAS,CAAiB,EACrDC,SAAyD,EAAA;AAEzD,EAAA,MAAMC,eAAe,GAAGC,kBAAkB,EAAE;EAC5C,MAAMC,KAAK,GAAGJ,SAAS,CAACI,KAAK,IAAIJ,SAAS,CAACK,YAAY,IAAI,EAAE;AAC7D,EAAA,MAAMC,aAAa,GAAG,OAAOF,KAAK,KAAK,QAAQ,GAAGA,KAAK,CAACG,MAAM,GAAGC,MAAM,CAACJ,KAAK,CAAC,CAACG,MAAM;AAErFE,EAAAA,yBAAyB,CAACH,aAAa,EAAEP,SAAS,CAAC;AAEnD,EAAA,oBACEW,GAAA,CAAA,UAAA,EAAA;AACEC,IAAAA,GAAG,EAAEV,SAAU;IACfH,SAAS,EAAEc,IAAI,CAACd,SAAS,EAAEe,kBAAkB,EAAE,EAAE,cAAc,CAAE;AACjEd,IAAAA,SAAS,EAAEA,SAAU;AAAA,IAAA,GACjBG,eAAe;IAAA,GACfF;AAAS,GAAC,CACd;AAEN,CAAC;;;;"}
@@ -25,6 +25,20 @@ function useInputAttributes({
25
25
  function useFieldLabelRef() {
26
26
  return React.useContext(FieldLabelContext)?.ref;
27
27
  }
28
+ const TextareaCharacterCountContext = /*#__PURE__*/React.createContext(undefined);
29
+ const TextareaCharacterCountProvider = TextareaCharacterCountContext.Provider;
30
+ function useTextareaCharacterCount(current, max) {
31
+ const setCharacterCount = React.useContext(TextareaCharacterCountContext);
32
+ React.useEffect(() => {
33
+ if (setCharacterCount && max != null) {
34
+ setCharacterCount({
35
+ current,
36
+ max
37
+ });
38
+ return () => setCharacterCount(null);
39
+ }
40
+ }, [setCharacterCount, current, max]);
41
+ }
28
42
  function withInputAttributes(Component, args) {
29
43
  function ComponentWithInputAttributes(props) {
30
44
  return /*#__PURE__*/jsxRuntime.jsx(Component, {
@@ -40,7 +54,9 @@ exports.FieldLabelContextProvider = FieldLabelContextProvider;
40
54
  exports.InputDescribedByProvider = InputDescribedByProvider;
41
55
  exports.InputIdContextProvider = InputIdContextProvider;
42
56
  exports.InputInvalidProvider = InputInvalidProvider;
57
+ exports.TextareaCharacterCountProvider = TextareaCharacterCountProvider;
43
58
  exports.useFieldLabelRef = useFieldLabelRef;
44
59
  exports.useInputAttributes = useInputAttributes;
60
+ exports.useTextareaCharacterCount = useTextareaCharacterCount;
45
61
  exports.withInputAttributes = withInputAttributes;
46
62
  //# sourceMappingURL=contexts.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"contexts.js","sources":["../../src/inputs/contexts.tsx"],"sourcesContent":["import { createContext, useContext } from 'react';\n\ntype FieldLabelContextType = {\n id?: string;\n ref?: React.RefObject<HTMLLabelElement>;\n};\n\nconst FieldLabelContext = createContext<FieldLabelContextType | undefined>(undefined);\nexport const FieldLabelContextProvider = FieldLabelContext.Provider;\n\nconst InputIdContext = createContext<string | undefined>(undefined);\nexport const InputIdContextProvider = InputIdContext.Provider;\n\nconst InputDescribedByContext = createContext<string | undefined>(undefined);\nexport const InputDescribedByProvider = InputDescribedByContext.Provider;\n\nconst InputInvalidContext = createContext<boolean | undefined>(undefined);\nexport const InputInvalidProvider = InputInvalidContext.Provider;\n\ninterface UseInputAttributesArgs {\n /** Set this to `true` if the underlying element is not directly [labelable as per the HTML specification](https://html.spec.whatwg.org/multipage/forms.html#category-label). */\n nonLabelable?: boolean;\n}\n\nexport function useInputAttributes({ nonLabelable }: UseInputAttributesArgs = {}) {\n const labelId = useContext(FieldLabelContext)?.id;\n return {\n id: useContext(InputIdContext),\n 'aria-labelledby': nonLabelable ? labelId : undefined,\n 'aria-describedby': useContext(InputDescribedByContext),\n 'aria-invalid': useContext(InputInvalidContext),\n } satisfies React.HTMLAttributes<HTMLElement>;\n}\n\nexport function useFieldLabelRef() {\n return useContext(FieldLabelContext)?.ref;\n}\n\nexport interface WithInputAttributesProps {\n inputAttributes: ReturnType<typeof useInputAttributes>;\n}\n\nexport function withInputAttributes<T extends Partial<WithInputAttributesProps>>(\n Component: React.ComponentType<T>,\n args?: UseInputAttributesArgs,\n) {\n function ComponentWithInputAttributes(props: Omit<T, keyof WithInputAttributesProps>) {\n return <Component inputAttributes={useInputAttributes(args)} {...(props as T)} />;\n }\n\n ComponentWithInputAttributes.displayName = `withInputAttributes(${Component.displayName || Component.name || 'Component'})`;\n\n return ComponentWithInputAttributes;\n}\n"],"names":["FieldLabelContext","createContext","undefined","FieldLabelContextProvider","Provider","InputIdContext","InputIdContextProvider","InputDescribedByContext","InputDescribedByProvider","InputInvalidContext","InputInvalidProvider","useInputAttributes","nonLabelable","labelId","useContext","id","useFieldLabelRef","ref","withInputAttributes","Component","args","ComponentWithInputAttributes","props","_jsx","inputAttributes","displayName","name"],"mappings":";;;;;AAOA,MAAMA,iBAAiB,gBAAGC,mBAAa,CAAoCC,SAAS,CAAC;AAC9E,MAAMC,yBAAyB,GAAGH,iBAAiB,CAACI;AAE3D,MAAMC,cAAc,gBAAGJ,mBAAa,CAAqBC,SAAS,CAAC;AAC5D,MAAMI,sBAAsB,GAAGD,cAAc,CAACD;AAErD,MAAMG,uBAAuB,gBAAGN,mBAAa,CAAqBC,SAAS,CAAC;AACrE,MAAMM,wBAAwB,GAAGD,uBAAuB,CAACH;AAEhE,MAAMK,mBAAmB,gBAAGR,mBAAa,CAAsBC,SAAS,CAAC;AAClE,MAAMQ,oBAAoB,GAAGD,mBAAmB,CAACL;SAOxCO,kBAAkBA,CAAC;AAAEC,EAAAA;IAAyC,EAAE,EAAA;AAC9E,EAAA,MAAMC,OAAO,GAAGC,gBAAU,CAACd,iBAAiB,CAAC,EAAEe,EAAE;EACjD,OAAO;AACLA,IAAAA,EAAE,EAAED,gBAAU,CAACT,cAAc,CAAC;AAC9B,IAAA,iBAAiB,EAAEO,YAAY,GAAGC,OAAO,GAAGX,SAAS;AACrD,IAAA,kBAAkB,EAAEY,gBAAU,CAACP,uBAAuB,CAAC;IACvD,cAAc,EAAEO,gBAAU,CAACL,mBAAmB;GACH;AAC/C;SAEgBO,gBAAgBA,GAAA;AAC9B,EAAA,OAAOF,gBAAU,CAACd,iBAAiB,CAAC,EAAEiB,GAAG;AAC3C;AAMM,SAAUC,mBAAmBA,CACjCC,SAAiC,EACjCC,IAA6B,EAAA;EAE7B,SAASC,4BAA4BA,CAACC,KAA8C,EAAA;IAClF,oBAAOC,cAAA,CAACJ,SAAS,EAAA;AAACK,MAAAA,eAAe,EAAEb,kBAAkB,CAACS,IAAI,CAAE;MAAA,GAAME;AAAW,MAAI;AACnF,EAAA;AAEAD,EAAAA,4BAA4B,CAACI,WAAW,GAAG,CAAA,oBAAA,EAAuBN,SAAS,CAACM,WAAW,IAAIN,SAAS,CAACO,IAAI,IAAI,WAAW,CAAA,CAAA,CAAG;AAE3H,EAAA,OAAOL,4BAA4B;AACrC;;;;;;;;;;"}
1
+ {"version":3,"file":"contexts.js","sources":["../../src/inputs/contexts.tsx"],"sourcesContent":["import { createContext, useContext, useEffect } from 'react';\n\ntype FieldLabelContextType = {\n id?: string;\n ref?: React.RefObject<HTMLLabelElement>;\n};\n\nconst FieldLabelContext = createContext<FieldLabelContextType | undefined>(undefined);\nexport const FieldLabelContextProvider = FieldLabelContext.Provider;\n\nconst InputIdContext = createContext<string | undefined>(undefined);\nexport const InputIdContextProvider = InputIdContext.Provider;\n\nconst InputDescribedByContext = createContext<string | undefined>(undefined);\nexport const InputDescribedByProvider = InputDescribedByContext.Provider;\n\nconst InputInvalidContext = createContext<boolean | undefined>(undefined);\nexport const InputInvalidProvider = InputInvalidContext.Provider;\n\ninterface UseInputAttributesArgs {\n /** Set this to `true` if the underlying element is not directly [labelable as per the HTML specification](https://html.spec.whatwg.org/multipage/forms.html#category-label). */\n nonLabelable?: boolean;\n}\n\nexport function useInputAttributes({ nonLabelable }: UseInputAttributesArgs = {}) {\n const labelId = useContext(FieldLabelContext)?.id;\n return {\n id: useContext(InputIdContext),\n 'aria-labelledby': nonLabelable ? labelId : undefined,\n 'aria-describedby': useContext(InputDescribedByContext),\n 'aria-invalid': useContext(InputInvalidContext),\n } satisfies React.HTMLAttributes<HTMLElement>;\n}\n\nexport function useFieldLabelRef() {\n return useContext(FieldLabelContext)?.ref;\n}\n\nexport type TextareaCharacterCountState = { current: number; max: number } | null;\n\nconst TextareaCharacterCountContext = createContext<\n ((state: TextareaCharacterCountState) => void) | undefined\n>(undefined);\nexport const TextareaCharacterCountProvider = TextareaCharacterCountContext.Provider;\n\nexport function useTextareaCharacterCount(current: number, max: number | undefined) {\n const setCharacterCount = useContext(TextareaCharacterCountContext);\n useEffect(() => {\n if (setCharacterCount && max != null) {\n setCharacterCount({ current, max });\n return () => setCharacterCount(null);\n }\n }, [setCharacterCount, current, max]);\n}\n\nexport interface WithInputAttributesProps {\n inputAttributes: ReturnType<typeof useInputAttributes>;\n}\n\nexport function withInputAttributes<T extends Partial<WithInputAttributesProps>>(\n Component: React.ComponentType<T>,\n args?: UseInputAttributesArgs,\n) {\n function ComponentWithInputAttributes(props: Omit<T, keyof WithInputAttributesProps>) {\n return <Component inputAttributes={useInputAttributes(args)} {...(props as T)} />;\n }\n\n ComponentWithInputAttributes.displayName = `withInputAttributes(${Component.displayName || Component.name || 'Component'})`;\n\n return ComponentWithInputAttributes;\n}\n"],"names":["FieldLabelContext","createContext","undefined","FieldLabelContextProvider","Provider","InputIdContext","InputIdContextProvider","InputDescribedByContext","InputDescribedByProvider","InputInvalidContext","InputInvalidProvider","useInputAttributes","nonLabelable","labelId","useContext","id","useFieldLabelRef","ref","TextareaCharacterCountContext","TextareaCharacterCountProvider","useTextareaCharacterCount","current","max","setCharacterCount","useEffect","withInputAttributes","Component","args","ComponentWithInputAttributes","props","_jsx","inputAttributes","displayName","name"],"mappings":";;;;;AAOA,MAAMA,iBAAiB,gBAAGC,mBAAa,CAAoCC,SAAS,CAAC;AAC9E,MAAMC,yBAAyB,GAAGH,iBAAiB,CAACI;AAE3D,MAAMC,cAAc,gBAAGJ,mBAAa,CAAqBC,SAAS,CAAC;AAC5D,MAAMI,sBAAsB,GAAGD,cAAc,CAACD;AAErD,MAAMG,uBAAuB,gBAAGN,mBAAa,CAAqBC,SAAS,CAAC;AACrE,MAAMM,wBAAwB,GAAGD,uBAAuB,CAACH;AAEhE,MAAMK,mBAAmB,gBAAGR,mBAAa,CAAsBC,SAAS,CAAC;AAClE,MAAMQ,oBAAoB,GAAGD,mBAAmB,CAACL;SAOxCO,kBAAkBA,CAAC;AAAEC,EAAAA;IAAyC,EAAE,EAAA;AAC9E,EAAA,MAAMC,OAAO,GAAGC,gBAAU,CAACd,iBAAiB,CAAC,EAAEe,EAAE;EACjD,OAAO;AACLA,IAAAA,EAAE,EAAED,gBAAU,CAACT,cAAc,CAAC;AAC9B,IAAA,iBAAiB,EAAEO,YAAY,GAAGC,OAAO,GAAGX,SAAS;AACrD,IAAA,kBAAkB,EAAEY,gBAAU,CAACP,uBAAuB,CAAC;IACvD,cAAc,EAAEO,gBAAU,CAACL,mBAAmB;GACH;AAC/C;SAEgBO,gBAAgBA,GAAA;AAC9B,EAAA,OAAOF,gBAAU,CAACd,iBAAiB,CAAC,EAAEiB,GAAG;AAC3C;AAIA,MAAMC,6BAA6B,gBAAGjB,mBAAa,CAEjDC,SAAS,CAAC;AACL,MAAMiB,8BAA8B,GAAGD,6BAA6B,CAACd;AAEtE,SAAUgB,yBAAyBA,CAACC,OAAe,EAAEC,GAAuB,EAAA;AAChF,EAAA,MAAMC,iBAAiB,GAAGT,gBAAU,CAACI,6BAA6B,CAAC;AACnEM,EAAAA,eAAS,CAAC,MAAK;AACb,IAAA,IAAID,iBAAiB,IAAID,GAAG,IAAI,IAAI,EAAE;AACpCC,MAAAA,iBAAiB,CAAC;QAAEF,OAAO;AAAEC,QAAAA;AAAG,OAAE,CAAC;AACnC,MAAA,OAAO,MAAMC,iBAAiB,CAAC,IAAI,CAAC;AACtC,IAAA;EACF,CAAC,EAAE,CAACA,iBAAiB,EAAEF,OAAO,EAAEC,GAAG,CAAC,CAAC;AACvC;AAMM,SAAUG,mBAAmBA,CACjCC,SAAiC,EACjCC,IAA6B,EAAA;EAE7B,SAASC,4BAA4BA,CAACC,KAA8C,EAAA;IAClF,oBAAOC,cAAA,CAACJ,SAAS,EAAA;AAACK,MAAAA,eAAe,EAAEpB,kBAAkB,CAACgB,IAAI,CAAE;MAAA,GAAME;AAAW,MAAI;AACnF,EAAA;AAEAD,EAAAA,4BAA4B,CAACI,WAAW,GAAG,CAAA,oBAAA,EAAuBN,SAAS,CAACM,WAAW,IAAIN,SAAS,CAACO,IAAI,IAAI,WAAW,CAAA,CAAA,CAAG;AAE3H,EAAA,OAAOL,4BAA4B;AACrC;;;;;;;;;;;;"}
@@ -1,4 +1,4 @@
1
- import { createContext, useContext } from 'react';
1
+ import { createContext, useContext, useEffect } from 'react';
2
2
  import { jsx } from 'react/jsx-runtime';
3
3
 
4
4
  const FieldLabelContext = /*#__PURE__*/createContext(undefined);
@@ -23,6 +23,20 @@ function useInputAttributes({
23
23
  function useFieldLabelRef() {
24
24
  return useContext(FieldLabelContext)?.ref;
25
25
  }
26
+ const TextareaCharacterCountContext = /*#__PURE__*/createContext(undefined);
27
+ const TextareaCharacterCountProvider = TextareaCharacterCountContext.Provider;
28
+ function useTextareaCharacterCount(current, max) {
29
+ const setCharacterCount = useContext(TextareaCharacterCountContext);
30
+ useEffect(() => {
31
+ if (setCharacterCount && max != null) {
32
+ setCharacterCount({
33
+ current,
34
+ max
35
+ });
36
+ return () => setCharacterCount(null);
37
+ }
38
+ }, [setCharacterCount, current, max]);
39
+ }
26
40
  function withInputAttributes(Component, args) {
27
41
  function ComponentWithInputAttributes(props) {
28
42
  return /*#__PURE__*/jsx(Component, {
@@ -34,5 +48,5 @@ function withInputAttributes(Component, args) {
34
48
  return ComponentWithInputAttributes;
35
49
  }
36
50
 
37
- export { FieldLabelContextProvider, InputDescribedByProvider, InputIdContextProvider, InputInvalidProvider, useFieldLabelRef, useInputAttributes, withInputAttributes };
51
+ export { FieldLabelContextProvider, InputDescribedByProvider, InputIdContextProvider, InputInvalidProvider, TextareaCharacterCountProvider, useFieldLabelRef, useInputAttributes, useTextareaCharacterCount, withInputAttributes };
38
52
  //# sourceMappingURL=contexts.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"contexts.mjs","sources":["../../src/inputs/contexts.tsx"],"sourcesContent":["import { createContext, useContext } from 'react';\n\ntype FieldLabelContextType = {\n id?: string;\n ref?: React.RefObject<HTMLLabelElement>;\n};\n\nconst FieldLabelContext = createContext<FieldLabelContextType | undefined>(undefined);\nexport const FieldLabelContextProvider = FieldLabelContext.Provider;\n\nconst InputIdContext = createContext<string | undefined>(undefined);\nexport const InputIdContextProvider = InputIdContext.Provider;\n\nconst InputDescribedByContext = createContext<string | undefined>(undefined);\nexport const InputDescribedByProvider = InputDescribedByContext.Provider;\n\nconst InputInvalidContext = createContext<boolean | undefined>(undefined);\nexport const InputInvalidProvider = InputInvalidContext.Provider;\n\ninterface UseInputAttributesArgs {\n /** Set this to `true` if the underlying element is not directly [labelable as per the HTML specification](https://html.spec.whatwg.org/multipage/forms.html#category-label). */\n nonLabelable?: boolean;\n}\n\nexport function useInputAttributes({ nonLabelable }: UseInputAttributesArgs = {}) {\n const labelId = useContext(FieldLabelContext)?.id;\n return {\n id: useContext(InputIdContext),\n 'aria-labelledby': nonLabelable ? labelId : undefined,\n 'aria-describedby': useContext(InputDescribedByContext),\n 'aria-invalid': useContext(InputInvalidContext),\n } satisfies React.HTMLAttributes<HTMLElement>;\n}\n\nexport function useFieldLabelRef() {\n return useContext(FieldLabelContext)?.ref;\n}\n\nexport interface WithInputAttributesProps {\n inputAttributes: ReturnType<typeof useInputAttributes>;\n}\n\nexport function withInputAttributes<T extends Partial<WithInputAttributesProps>>(\n Component: React.ComponentType<T>,\n args?: UseInputAttributesArgs,\n) {\n function ComponentWithInputAttributes(props: Omit<T, keyof WithInputAttributesProps>) {\n return <Component inputAttributes={useInputAttributes(args)} {...(props as T)} />;\n }\n\n ComponentWithInputAttributes.displayName = `withInputAttributes(${Component.displayName || Component.name || 'Component'})`;\n\n return ComponentWithInputAttributes;\n}\n"],"names":["FieldLabelContext","createContext","undefined","FieldLabelContextProvider","Provider","InputIdContext","InputIdContextProvider","InputDescribedByContext","InputDescribedByProvider","InputInvalidContext","InputInvalidProvider","useInputAttributes","nonLabelable","labelId","useContext","id","useFieldLabelRef","ref","withInputAttributes","Component","args","ComponentWithInputAttributes","props","_jsx","inputAttributes","displayName","name"],"mappings":";;;AAOA,MAAMA,iBAAiB,gBAAGC,aAAa,CAAoCC,SAAS,CAAC;AAC9E,MAAMC,yBAAyB,GAAGH,iBAAiB,CAACI;AAE3D,MAAMC,cAAc,gBAAGJ,aAAa,CAAqBC,SAAS,CAAC;AAC5D,MAAMI,sBAAsB,GAAGD,cAAc,CAACD;AAErD,MAAMG,uBAAuB,gBAAGN,aAAa,CAAqBC,SAAS,CAAC;AACrE,MAAMM,wBAAwB,GAAGD,uBAAuB,CAACH;AAEhE,MAAMK,mBAAmB,gBAAGR,aAAa,CAAsBC,SAAS,CAAC;AAClE,MAAMQ,oBAAoB,GAAGD,mBAAmB,CAACL;SAOxCO,kBAAkBA,CAAC;AAAEC,EAAAA;IAAyC,EAAE,EAAA;AAC9E,EAAA,MAAMC,OAAO,GAAGC,UAAU,CAACd,iBAAiB,CAAC,EAAEe,EAAE;EACjD,OAAO;AACLA,IAAAA,EAAE,EAAED,UAAU,CAACT,cAAc,CAAC;AAC9B,IAAA,iBAAiB,EAAEO,YAAY,GAAGC,OAAO,GAAGX,SAAS;AACrD,IAAA,kBAAkB,EAAEY,UAAU,CAACP,uBAAuB,CAAC;IACvD,cAAc,EAAEO,UAAU,CAACL,mBAAmB;GACH;AAC/C;SAEgBO,gBAAgBA,GAAA;AAC9B,EAAA,OAAOF,UAAU,CAACd,iBAAiB,CAAC,EAAEiB,GAAG;AAC3C;AAMM,SAAUC,mBAAmBA,CACjCC,SAAiC,EACjCC,IAA6B,EAAA;EAE7B,SAASC,4BAA4BA,CAACC,KAA8C,EAAA;IAClF,oBAAOC,GAAA,CAACJ,SAAS,EAAA;AAACK,MAAAA,eAAe,EAAEb,kBAAkB,CAACS,IAAI,CAAE;MAAA,GAAME;AAAW,MAAI;AACnF,EAAA;AAEAD,EAAAA,4BAA4B,CAACI,WAAW,GAAG,CAAA,oBAAA,EAAuBN,SAAS,CAACM,WAAW,IAAIN,SAAS,CAACO,IAAI,IAAI,WAAW,CAAA,CAAA,CAAG;AAE3H,EAAA,OAAOL,4BAA4B;AACrC;;;;"}
1
+ {"version":3,"file":"contexts.mjs","sources":["../../src/inputs/contexts.tsx"],"sourcesContent":["import { createContext, useContext, useEffect } from 'react';\n\ntype FieldLabelContextType = {\n id?: string;\n ref?: React.RefObject<HTMLLabelElement>;\n};\n\nconst FieldLabelContext = createContext<FieldLabelContextType | undefined>(undefined);\nexport const FieldLabelContextProvider = FieldLabelContext.Provider;\n\nconst InputIdContext = createContext<string | undefined>(undefined);\nexport const InputIdContextProvider = InputIdContext.Provider;\n\nconst InputDescribedByContext = createContext<string | undefined>(undefined);\nexport const InputDescribedByProvider = InputDescribedByContext.Provider;\n\nconst InputInvalidContext = createContext<boolean | undefined>(undefined);\nexport const InputInvalidProvider = InputInvalidContext.Provider;\n\ninterface UseInputAttributesArgs {\n /** Set this to `true` if the underlying element is not directly [labelable as per the HTML specification](https://html.spec.whatwg.org/multipage/forms.html#category-label). */\n nonLabelable?: boolean;\n}\n\nexport function useInputAttributes({ nonLabelable }: UseInputAttributesArgs = {}) {\n const labelId = useContext(FieldLabelContext)?.id;\n return {\n id: useContext(InputIdContext),\n 'aria-labelledby': nonLabelable ? labelId : undefined,\n 'aria-describedby': useContext(InputDescribedByContext),\n 'aria-invalid': useContext(InputInvalidContext),\n } satisfies React.HTMLAttributes<HTMLElement>;\n}\n\nexport function useFieldLabelRef() {\n return useContext(FieldLabelContext)?.ref;\n}\n\nexport type TextareaCharacterCountState = { current: number; max: number } | null;\n\nconst TextareaCharacterCountContext = createContext<\n ((state: TextareaCharacterCountState) => void) | undefined\n>(undefined);\nexport const TextareaCharacterCountProvider = TextareaCharacterCountContext.Provider;\n\nexport function useTextareaCharacterCount(current: number, max: number | undefined) {\n const setCharacterCount = useContext(TextareaCharacterCountContext);\n useEffect(() => {\n if (setCharacterCount && max != null) {\n setCharacterCount({ current, max });\n return () => setCharacterCount(null);\n }\n }, [setCharacterCount, current, max]);\n}\n\nexport interface WithInputAttributesProps {\n inputAttributes: ReturnType<typeof useInputAttributes>;\n}\n\nexport function withInputAttributes<T extends Partial<WithInputAttributesProps>>(\n Component: React.ComponentType<T>,\n args?: UseInputAttributesArgs,\n) {\n function ComponentWithInputAttributes(props: Omit<T, keyof WithInputAttributesProps>) {\n return <Component inputAttributes={useInputAttributes(args)} {...(props as T)} />;\n }\n\n ComponentWithInputAttributes.displayName = `withInputAttributes(${Component.displayName || Component.name || 'Component'})`;\n\n return ComponentWithInputAttributes;\n}\n"],"names":["FieldLabelContext","createContext","undefined","FieldLabelContextProvider","Provider","InputIdContext","InputIdContextProvider","InputDescribedByContext","InputDescribedByProvider","InputInvalidContext","InputInvalidProvider","useInputAttributes","nonLabelable","labelId","useContext","id","useFieldLabelRef","ref","TextareaCharacterCountContext","TextareaCharacterCountProvider","useTextareaCharacterCount","current","max","setCharacterCount","useEffect","withInputAttributes","Component","args","ComponentWithInputAttributes","props","_jsx","inputAttributes","displayName","name"],"mappings":";;;AAOA,MAAMA,iBAAiB,gBAAGC,aAAa,CAAoCC,SAAS,CAAC;AAC9E,MAAMC,yBAAyB,GAAGH,iBAAiB,CAACI;AAE3D,MAAMC,cAAc,gBAAGJ,aAAa,CAAqBC,SAAS,CAAC;AAC5D,MAAMI,sBAAsB,GAAGD,cAAc,CAACD;AAErD,MAAMG,uBAAuB,gBAAGN,aAAa,CAAqBC,SAAS,CAAC;AACrE,MAAMM,wBAAwB,GAAGD,uBAAuB,CAACH;AAEhE,MAAMK,mBAAmB,gBAAGR,aAAa,CAAsBC,SAAS,CAAC;AAClE,MAAMQ,oBAAoB,GAAGD,mBAAmB,CAACL;SAOxCO,kBAAkBA,CAAC;AAAEC,EAAAA;IAAyC,EAAE,EAAA;AAC9E,EAAA,MAAMC,OAAO,GAAGC,UAAU,CAACd,iBAAiB,CAAC,EAAEe,EAAE;EACjD,OAAO;AACLA,IAAAA,EAAE,EAAED,UAAU,CAACT,cAAc,CAAC;AAC9B,IAAA,iBAAiB,EAAEO,YAAY,GAAGC,OAAO,GAAGX,SAAS;AACrD,IAAA,kBAAkB,EAAEY,UAAU,CAACP,uBAAuB,CAAC;IACvD,cAAc,EAAEO,UAAU,CAACL,mBAAmB;GACH;AAC/C;SAEgBO,gBAAgBA,GAAA;AAC9B,EAAA,OAAOF,UAAU,CAACd,iBAAiB,CAAC,EAAEiB,GAAG;AAC3C;AAIA,MAAMC,6BAA6B,gBAAGjB,aAAa,CAEjDC,SAAS,CAAC;AACL,MAAMiB,8BAA8B,GAAGD,6BAA6B,CAACd;AAEtE,SAAUgB,yBAAyBA,CAACC,OAAe,EAAEC,GAAuB,EAAA;AAChF,EAAA,MAAMC,iBAAiB,GAAGT,UAAU,CAACI,6BAA6B,CAAC;AACnEM,EAAAA,SAAS,CAAC,MAAK;AACb,IAAA,IAAID,iBAAiB,IAAID,GAAG,IAAI,IAAI,EAAE;AACpCC,MAAAA,iBAAiB,CAAC;QAAEF,OAAO;AAAEC,QAAAA;AAAG,OAAE,CAAC;AACnC,MAAA,OAAO,MAAMC,iBAAiB,CAAC,IAAI,CAAC;AACtC,IAAA;EACF,CAAC,EAAE,CAACA,iBAAiB,EAAEF,OAAO,EAAEC,GAAG,CAAC,CAAC;AACvC;AAMM,SAAUG,mBAAmBA,CACjCC,SAAiC,EACjCC,IAA6B,EAAA;EAE7B,SAASC,4BAA4BA,CAACC,KAA8C,EAAA;IAClF,oBAAOC,GAAA,CAACJ,SAAS,EAAA;AAACK,MAAAA,eAAe,EAAEpB,kBAAkB,CAACgB,IAAI,CAAE;MAAA,GAAME;AAAW,MAAI;AACnF,EAAA;AAEAD,EAAAA,4BAA4B,CAACI,WAAW,GAAG,CAAA,oBAAA,EAAuBN,SAAS,CAACM,WAAW,IAAIN,SAAS,CAACO,IAAI,IAAI,WAAW,CAAA,CAAA,CAAG;AAE3H,EAAA,OAAOL,4BAA4B;AACrC;;;;"}
package/build/main.css CHANGED
@@ -3238,7 +3238,16 @@ a,
3238
3238
  .np-text-display-extra-large,
3239
3239
  .np-text-display-large,
3240
3240
  .np-text-display-medium,
3241
- .np-text-display-small {
3241
+ .np-text-display-small,
3242
+ .display-1--forced,
3243
+ .display-2--forced,
3244
+ .display-3--forced,
3245
+ .display-4--forced,
3246
+ .display-5--forced,
3247
+ .np-text-display-extra-large--forced,
3248
+ .np-text-display-large--forced,
3249
+ .np-text-display-medium--forced,
3250
+ .np-text-display-small--forced {
3242
3251
  font-family: 'Wise Sans', 'Inter', sans-serif;
3243
3252
  font-family: var(--font-family-display);
3244
3253
  font-synthesis: none;
@@ -3285,9 +3294,14 @@ a,
3285
3294
  * of Japanese ones for the logged out ones (exposed by the Editorial DS). Unfortunately,
3286
3295
  * font files are browser-cached and we carried over to launchpad, where it causes issues
3287
3296
  * for unsupported locales, especially those that share glyphs, like Japanese and Chinese.
3297
+ * There are exceptions for small UI parts where Wise Sans is fine or expected — e.g. the
3298
+ * numeric input of ExpressiveMoneyInput.
3299
+ * Add `--forced` BEM modifier to the original class name to guarantee it.
3288
3300
  */
3289
3301
  font-family: 'Inter', Helvetica, Arial, sans-serif;
3290
3302
  font-family: var(--font-family-regular);
3303
+ line-height: 1.2;
3304
+ line-height: var(--line-height-title);
3291
3305
  }
3292
3306
 
3293
3307
  /* DEPRECATED(.np-text-display-extra-large): use .np-text-display-large instead */
@@ -26633,10 +26647,10 @@ a[data-toggle="tooltip"] {
26633
26647
  }
26634
26648
 
26635
26649
  .np-dot-mask {
26636
- -webkit-mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
26637
- mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
26638
- -webkit-mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
26639
- mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
26650
+ -webkit-mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
26651
+ mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
26652
+ -webkit-mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
26653
+ mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
26640
26654
  }
26641
26655
 
26642
26656
  .np-dot-badge {
@@ -29935,18 +29949,36 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
29935
29949
  stroke-dasharray: var(--wds-list-item-spotlight-strokeDashSize) var(--wds-list-item-spotlight-strokeDashSize);
29936
29950
  }
29937
29951
 
29938
- .np-field-control,
29939
- .np-field__prompt {
29952
+ .np-field-control {
29940
29953
  margin-top: 4px;
29941
29954
  margin-top: var(--size-4);
29942
29955
  }
29943
29956
 
29957
+ .np-field-validation {
29958
+ display: flex;
29959
+ align-items: flex-start;
29960
+ margin-top: 4px;
29961
+ margin-top: var(--size-4);
29962
+ gap: 8px;
29963
+ gap: var(--size-8);
29964
+ }
29965
+
29966
+ .np-field-textarea-char-counter {
29967
+ min-width: 55px;
29968
+ text-align: right;
29969
+ margin-left: auto;
29970
+ padding: 4px 0;
29971
+ padding: var(--size-4) 0;
29972
+ color: #768e9c;
29973
+ color: var(--color-content-tertiary);
29974
+ }
29975
+
29944
29976
  .np-field .form-group--typeahead[class],
29945
29977
  .np-field .np-checkbox-label[class] {
29946
29978
  margin-bottom: 0;
29947
29979
  }
29948
29980
 
29949
- .np-field:has(.wds-radio-group) .np-field__prompt {
29981
+ .np-field:has(.wds-radio-group) .np-field-validation {
29950
29982
  margin-top: 12px;
29951
29983
  margin-top: var(--size-12);
29952
29984
  }
@@ -31052,6 +31084,7 @@ button.np-link {
31052
31084
  flex-grow: 1;
31053
31085
  text-align: right;
31054
31086
  background-color: transparent;
31087
+ line-height: inherit;
31055
31088
  }
31056
31089
 
31057
31090
  .wds-amount-input-input:focus-visible {
@@ -31062,6 +31095,7 @@ button.np-link {
31062
31095
  flex-grow: 0;
31063
31096
  display: flex;
31064
31097
  align-items: center;
31098
+ line-height: inherit;
31065
31099
  }
31066
31100
 
31067
31101
  .wds-currency-selector:disabled {
@@ -4,10 +4,10 @@
4
4
  display: inline-block;
5
5
  }
6
6
  .np-dot-mask {
7
- -webkit-mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
8
- mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
9
- -webkit-mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
10
- mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
7
+ -webkit-mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
8
+ mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
9
+ -webkit-mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
10
+ mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
11
11
  }
12
12
  .np-dot-badge {
13
13
  position: absolute;
@@ -4,10 +4,10 @@
4
4
  display: inline-block;
5
5
  }
6
6
  .np-dot-mask {
7
- -webkit-mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
8
- mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
9
- -webkit-mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
10
- mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
7
+ -webkit-mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
8
+ mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
9
+ -webkit-mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
10
+ mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
11
11
  }
12
12
  .np-dot-badge {
13
13
  position: absolute;
@@ -3238,7 +3238,16 @@ a,
3238
3238
  .np-text-display-extra-large,
3239
3239
  .np-text-display-large,
3240
3240
  .np-text-display-medium,
3241
- .np-text-display-small {
3241
+ .np-text-display-small,
3242
+ .display-1--forced,
3243
+ .display-2--forced,
3244
+ .display-3--forced,
3245
+ .display-4--forced,
3246
+ .display-5--forced,
3247
+ .np-text-display-extra-large--forced,
3248
+ .np-text-display-large--forced,
3249
+ .np-text-display-medium--forced,
3250
+ .np-text-display-small--forced {
3242
3251
  font-family: 'Wise Sans', 'Inter', sans-serif;
3243
3252
  font-family: var(--font-family-display);
3244
3253
  font-synthesis: none;
@@ -3285,9 +3294,14 @@ a,
3285
3294
  * of Japanese ones for the logged out ones (exposed by the Editorial DS). Unfortunately,
3286
3295
  * font files are browser-cached and we carried over to launchpad, where it causes issues
3287
3296
  * for unsupported locales, especially those that share glyphs, like Japanese and Chinese.
3297
+ * There are exceptions for small UI parts where Wise Sans is fine or expected — e.g. the
3298
+ * numeric input of ExpressiveMoneyInput.
3299
+ * Add `--forced` BEM modifier to the original class name to guarantee it.
3288
3300
  */
3289
3301
  font-family: 'Inter', Helvetica, Arial, sans-serif;
3290
3302
  font-family: var(--font-family-regular);
3303
+ line-height: 1.2;
3304
+ line-height: var(--line-height-title);
3291
3305
  }
3292
3306
 
3293
3307
  /* DEPRECATED(.np-text-display-extra-large): use .np-text-display-large instead */
@@ -21,6 +21,7 @@
21
21
  flex-grow: 1;
22
22
  text-align: right;
23
23
  background-color: transparent;
24
+ line-height: inherit;
24
25
  }
25
26
  .wds-amount-input-input:focus-visible {
26
27
  outline: none;
@@ -29,6 +30,7 @@
29
30
  flex-grow: 0;
30
31
  display: flex;
31
32
  align-items: center;
33
+ line-height: inherit;
32
34
  }
33
35
  .wds-currency-selector:disabled {
34
36
  opacity: 1 !important;
@@ -21,6 +21,7 @@
21
21
  flex-grow: 1;
22
22
  text-align: right;
23
23
  background-color: transparent;
24
+ line-height: inherit;
24
25
  }
25
26
  .wds-amount-input-input:focus-visible {
26
27
  outline: none;
@@ -29,4 +30,5 @@
29
30
  flex-grow: 0;
30
31
  display: flex;
31
32
  align-items: center;
33
+ line-height: inherit;
32
34
  }
@@ -1,13 +1,29 @@
1
- .np-field-control,
2
- .np-field__prompt {
1
+ .np-field-control {
3
2
  margin-top: 4px;
4
3
  margin-top: var(--size-4);
5
4
  }
5
+ .np-field-validation {
6
+ display: flex;
7
+ align-items: flex-start;
8
+ margin-top: 4px;
9
+ margin-top: var(--size-4);
10
+ gap: 8px;
11
+ gap: var(--size-8);
12
+ }
13
+ .np-field-textarea-char-counter {
14
+ min-width: 55px;
15
+ text-align: right;
16
+ margin-left: auto;
17
+ padding: 4px 0;
18
+ padding: var(--size-4) 0;
19
+ color: #768e9c;
20
+ color: var(--color-content-tertiary);
21
+ }
6
22
  .np-field .form-group--typeahead[class],
7
23
  .np-field .np-checkbox-label[class] {
8
24
  margin-bottom: 0;
9
25
  }
10
- .np-field:has(.wds-radio-group) .np-field__prompt {
26
+ .np-field:has(.wds-radio-group) .np-field-validation {
11
27
  margin-top: 12px;
12
28
  margin-top: var(--size-12);
13
29
  }
@@ -3238,7 +3238,16 @@ a,
3238
3238
  .np-text-display-extra-large,
3239
3239
  .np-text-display-large,
3240
3240
  .np-text-display-medium,
3241
- .np-text-display-small {
3241
+ .np-text-display-small,
3242
+ .display-1--forced,
3243
+ .display-2--forced,
3244
+ .display-3--forced,
3245
+ .display-4--forced,
3246
+ .display-5--forced,
3247
+ .np-text-display-extra-large--forced,
3248
+ .np-text-display-large--forced,
3249
+ .np-text-display-medium--forced,
3250
+ .np-text-display-small--forced {
3242
3251
  font-family: 'Wise Sans', 'Inter', sans-serif;
3243
3252
  font-family: var(--font-family-display);
3244
3253
  font-synthesis: none;
@@ -3285,9 +3294,14 @@ a,
3285
3294
  * of Japanese ones for the logged out ones (exposed by the Editorial DS). Unfortunately,
3286
3295
  * font files are browser-cached and we carried over to launchpad, where it causes issues
3287
3296
  * for unsupported locales, especially those that share glyphs, like Japanese and Chinese.
3297
+ * There are exceptions for small UI parts where Wise Sans is fine or expected — e.g. the
3298
+ * numeric input of ExpressiveMoneyInput.
3299
+ * Add `--forced` BEM modifier to the original class name to guarantee it.
3288
3300
  */
3289
3301
  font-family: 'Inter', Helvetica, Arial, sans-serif;
3290
3302
  font-family: var(--font-family-regular);
3303
+ line-height: 1.2;
3304
+ line-height: var(--line-height-title);
3291
3305
  }
3292
3306
 
3293
3307
  /* DEPRECATED(.np-text-display-extra-large): use .np-text-display-large instead */
@@ -26633,10 +26647,10 @@ a[data-toggle="tooltip"] {
26633
26647
  }
26634
26648
 
26635
26649
  .np-dot-mask {
26636
- -webkit-mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
26637
- mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
26638
- -webkit-mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
26639
- mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
26650
+ -webkit-mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
26651
+ mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
26652
+ -webkit-mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
26653
+ mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
26640
26654
  }
26641
26655
 
26642
26656
  .np-dot-badge {
@@ -29935,18 +29949,36 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
29935
29949
  stroke-dasharray: var(--wds-list-item-spotlight-strokeDashSize) var(--wds-list-item-spotlight-strokeDashSize);
29936
29950
  }
29937
29951
 
29938
- .np-field-control,
29939
- .np-field__prompt {
29952
+ .np-field-control {
29940
29953
  margin-top: 4px;
29941
29954
  margin-top: var(--size-4);
29942
29955
  }
29943
29956
 
29957
+ .np-field-validation {
29958
+ display: flex;
29959
+ align-items: flex-start;
29960
+ margin-top: 4px;
29961
+ margin-top: var(--size-4);
29962
+ gap: 8px;
29963
+ gap: var(--size-8);
29964
+ }
29965
+
29966
+ .np-field-textarea-char-counter {
29967
+ min-width: 55px;
29968
+ text-align: right;
29969
+ margin-left: auto;
29970
+ padding: 4px 0;
29971
+ padding: var(--size-4) 0;
29972
+ color: #768e9c;
29973
+ color: var(--color-content-tertiary);
29974
+ }
29975
+
29944
29976
  .np-field .form-group--typeahead[class],
29945
29977
  .np-field .np-checkbox-label[class] {
29946
29978
  margin-bottom: 0;
29947
29979
  }
29948
29980
 
29949
- .np-field:has(.wds-radio-group) .np-field__prompt {
29981
+ .np-field:has(.wds-radio-group) .np-field-validation {
29950
29982
  margin-top: 12px;
29951
29983
  margin-top: var(--size-12);
29952
29984
  }
@@ -31052,6 +31084,7 @@ button.np-link {
31052
31084
  flex-grow: 1;
31053
31085
  text-align: right;
31054
31086
  background-color: transparent;
31087
+ line-height: inherit;
31055
31088
  }
31056
31089
 
31057
31090
  .wds-amount-input-input:focus-visible {
@@ -31062,6 +31095,7 @@ button.np-link {
31062
31095
  flex-grow: 0;
31063
31096
  display: flex;
31064
31097
  align-items: center;
31098
+ line-height: inherit;
31065
31099
  }
31066
31100
 
31067
31101
  .wds-currency-selector:disabled {
@@ -3238,7 +3238,16 @@ a,
3238
3238
  .np-text-display-extra-large,
3239
3239
  .np-text-display-large,
3240
3240
  .np-text-display-medium,
3241
- .np-text-display-small {
3241
+ .np-text-display-small,
3242
+ .display-1--forced,
3243
+ .display-2--forced,
3244
+ .display-3--forced,
3245
+ .display-4--forced,
3246
+ .display-5--forced,
3247
+ .np-text-display-extra-large--forced,
3248
+ .np-text-display-large--forced,
3249
+ .np-text-display-medium--forced,
3250
+ .np-text-display-small--forced {
3242
3251
  font-family: 'Wise Sans', 'Inter', sans-serif;
3243
3252
  font-family: var(--font-family-display);
3244
3253
  font-synthesis: none;
@@ -3285,9 +3294,14 @@ a,
3285
3294
  * of Japanese ones for the logged out ones (exposed by the Editorial DS). Unfortunately,
3286
3295
  * font files are browser-cached and we carried over to launchpad, where it causes issues
3287
3296
  * for unsupported locales, especially those that share glyphs, like Japanese and Chinese.
3297
+ * There are exceptions for small UI parts where Wise Sans is fine or expected — e.g. the
3298
+ * numeric input of ExpressiveMoneyInput.
3299
+ * Add `--forced` BEM modifier to the original class name to guarantee it.
3288
3300
  */
3289
3301
  font-family: 'Inter', Helvetica, Arial, sans-serif;
3290
3302
  font-family: var(--font-family-regular);
3303
+ line-height: 1.2;
3304
+ line-height: var(--line-height-title);
3291
3305
  }
3292
3306
 
3293
3307
  /* DEPRECATED(.np-text-display-extra-large): use .np-text-display-large instead */
@@ -14,7 +14,7 @@ export type Props = {
14
14
  */
15
15
  profileName?: string | null;
16
16
  profileType?: ProfileTypeBusiness | ProfileTypePersonal;
17
- size?: 16 | 24 | 32 | 40 | 48 | 56 | 72;
17
+ size?: 16 | 24 | 32 | 40 | 48 | 56 | 72 | 88 | 96;
18
18
  badge?: AvatarViewBadgeProps;
19
19
  interactive?: boolean;
20
20
  selected?: boolean;
@@ -1 +1 @@
1
- {"version":3,"file":"AvatarView.d.ts","sourceRoot":"","sources":["../../../src/avatarView/AvatarView.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAe,UAAU,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAI5E,OAAO,EAAE,cAAc,EAA+B,MAAM,OAAO,CAAC;AAEpE,OAAO,EAA4B,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,WAAW,CAAC;AAM/F,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAC,GAC/D,IAAI,CAAC,UAAU,EAAE,YAAY,CAAC,GAAG;IAC/B;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB,CAAC;AAEJ,MAAM,MAAM,KAAK,GAAG;IAClB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,WAAW,CAAC,EAAE,mBAAmB,GAAG,mBAAmB,CAAC;IACxD,IAAI,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IACxC,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,QAAQ,GAAG,iBAAiB,GAAG,OAAO,CAAC,CAAC;CAC3E,GAAG,IAAI,CACN,cAAc,CAAC,cAAc,CAAC,EAC9B,IAAI,GAAG,WAAW,GAAG,UAAU,GAAG,MAAM,GAAG,YAAY,GAAG,iBAAiB,GAAG,aAAa,CAC5F,CAAC;AAEF,iBAAS,UAAU,CAAC,EAClB,QAAoB,EACpB,IAAS,EACT,QAAQ,EACR,KAAK,EACL,WAAmB,EACnB,SAAS,EACT,KAAK,EACL,MAAM,EACN,WAAW,EACX,WAAW,EACX,GAAG,SAAS,EACb,EAAE,KAAK,+BAkCP;AA0GD,eAAe,UAAU,CAAC"}
1
+ {"version":3,"file":"AvatarView.d.ts","sourceRoot":"","sources":["../../../src/avatarView/AvatarView.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAe,UAAU,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAI5E,OAAO,EAAE,cAAc,EAA+B,MAAM,OAAO,CAAC;AAEpE,OAAO,EAA4B,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,WAAW,CAAC;AAM/F,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAC,GAC/D,IAAI,CAAC,UAAU,EAAE,YAAY,CAAC,GAAG;IAC/B;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB,CAAC;AAEJ,MAAM,MAAM,KAAK,GAAG;IAClB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,WAAW,CAAC,EAAE,mBAAmB,GAAG,mBAAmB,CAAC;IACxD,IAAI,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IAClD,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,QAAQ,GAAG,iBAAiB,GAAG,OAAO,CAAC,CAAC;CAC3E,GAAG,IAAI,CACN,cAAc,CAAC,cAAc,CAAC,EAC9B,IAAI,GAAG,WAAW,GAAG,UAAU,GAAG,MAAM,GAAG,YAAY,GAAG,iBAAiB,GAAG,aAAa,CAC5F,CAAC;AAEF,iBAAS,UAAU,CAAC,EAClB,QAAoB,EACpB,IAAS,EACT,QAAQ,EACR,KAAK,EACL,WAAmB,EACnB,SAAS,EACT,KAAK,EACL,MAAM,EACN,WAAW,EACX,WAAW,EACX,GAAG,SAAS,EACb,EAAE,KAAK,+BAkCP;AA8GD,eAAe,UAAU,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"Dot.d.ts","sourceRoot":"","sources":["../../../src/avatarView/Dot.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,KAAK,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAGxD,MAAM,MAAM,QAAQ,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,GAAG;IACxE,UAAU,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IACrC,OAAO,CAAC,EAAE,cAAc,GAAG,QAAQ,CAAC;CACrC,CAAC;AAeF,MAAM,CAAC,OAAO,UAAU,GAAG,CAAC,EAAE,QAAQ,EAAE,UAAe,EAAE,OAAwB,EAAE,EAAE,QAAQ,+BAmB5F"}
1
+ {"version":3,"file":"Dot.d.ts","sourceRoot":"","sources":["../../../src/avatarView/Dot.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,KAAK,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAGxD,MAAM,MAAM,QAAQ,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,GAAG;IACxE,UAAU,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IACrC,OAAO,CAAC,EAAE,cAAc,GAAG,QAAQ,CAAC;CACrC,CAAC;AAiBF,MAAM,CAAC,OAAO,UAAU,GAAG,CAAC,EAAE,QAAQ,EAAE,UAAe,EAAE,OAAwB,EAAE,EAAE,QAAQ,+BAmB5F"}
@@ -1,5 +1,5 @@
1
1
  import { HTMLAttributes } from 'react';
2
- export type ShapeSize = 16 | 24 | 32 | 40 | 48 | 56 | 72;
2
+ export type ShapeSize = 16 | 24 | 32 | 40 | 48 | 56 | 72 | 88 | 96;
3
3
  export type Props = {
4
4
  /**
5
5
  * Modify underlying element, `div` by default
@@ -1 +1 @@
1
- {"version":3,"file":"Circle.d.ts","sourceRoot":"","sources":["../../../../src/common/circle/Circle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAc,MAAM,OAAO,CAAC;AAKnD,MAAM,MAAM,SAAS,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAEzD,MAAM,MAAM,KAAK,GAAG;IAClB;;OAEG;IACH,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACvB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AA8BnC,QAAA,MAAM,MAAM;IA5CV;;OAEG;SACE,KAAK,CAAC,WAAW;IACtB;;OAEG;WACI,SAAS;IAChB;;;OAGG;gBACS,OAAO;mBACJ,OAAO;4EAoEtB,CAAC;AAEH,eAAe,MAAM,CAAC"}
1
+ {"version":3,"file":"Circle.d.ts","sourceRoot":"","sources":["../../../../src/common/circle/Circle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAc,MAAM,OAAO,CAAC;AAKnD,MAAM,MAAM,SAAS,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAEnE,MAAM,MAAM,KAAK,GAAG;IAClB;;OAEG;IACH,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACvB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAkCnC,QAAA,MAAM,MAAM;IAhDV;;OAEG;SACE,KAAK,CAAC,WAAW;IACtB;;OAEG;WACI,SAAS;IAChB;;;OAGG;gBACS,OAAO;mBACJ,OAAO;4EAwEtB,CAAC;AAEH,eAAe,MAAM,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../../src/field/Field.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,WAAW,CAAC;AASjE,MAAM,MAAM,UAAU,GAAG;IACvB,6IAA6I;IAC7I,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,sGAAsG;IACtG,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,oBAAoB;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kDAAkD;IAClD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;SAGK;IACL,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,8EAA8E;IAC9E,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,iCAAiC;IACjC,SAAS,CAAC,EAAE,iBAAiB,CAAC,WAAW,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,KAAK,GAAI,wJAanB,UAAU,gCA4EZ,CAAC"}
1
+ {"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../../src/field/Field.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAWjE,MAAM,MAAM,UAAU,GAAG;IACvB,6IAA6I;IAC7I,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,sGAAsG;IACtG,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,oBAAoB;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kDAAkD;IAClD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;SAGK;IACL,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,8EAA8E;IAC9E,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,iCAAiC;IACjC,SAAS,CAAC,EAAE,iBAAiB,CAAC,WAAW,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,KAAK,GAAI,wJAanB,UAAU,gCAsHZ,CAAC"}
@@ -0,0 +1,8 @@
1
+ declare const _default: {
2
+ characterCount: {
3
+ id: string;
4
+ defaultMessage: string;
5
+ };
6
+ };
7
+ export default _default;
8
+ //# sourceMappingURL=Field.messages.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Field.messages.d.ts","sourceRoot":"","sources":["../../../src/field/Field.messages.ts"],"names":[],"mappings":";;;;;;AAEA,wBAKG"}
@@ -1 +1 @@
1
- {"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../src/inputs/TextArea.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAIjC,MAAM,WAAW,aAAc,SAAQ,KAAK,CAC1C,KAAK,CAAC,qBAAqB,CAAC,UAAU,CAAC,EACvC;IACE,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CACF;CAAG;AAEJ,eAAO,MAAM,QAAQ,mIAcnB,CAAC"}
1
+ {"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../src/inputs/TextArea.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAIjC,MAAM,WAAW,aAAc,SAAQ,KAAK,CAC1C,KAAK,CAAC,qBAAqB,CAAC,UAAU,CAAC,EACvC;IACE,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CACF;CAAG;AAEJ,eAAO,MAAM,QAAQ,mIAmBnB,CAAC"}
@@ -17,6 +17,12 @@ export declare function useInputAttributes({ nonLabelable }?: UseInputAttributes
17
17
  'aria-invalid': boolean | undefined;
18
18
  };
19
19
  export declare function useFieldLabelRef(): import("react").RefObject<HTMLLabelElement> | undefined;
20
+ export type TextareaCharacterCountState = {
21
+ current: number;
22
+ max: number;
23
+ } | null;
24
+ export declare const TextareaCharacterCountProvider: import("react").Provider<((state: TextareaCharacterCountState) => void) | undefined>;
25
+ export declare function useTextareaCharacterCount(current: number, max: number | undefined): void;
20
26
  export interface WithInputAttributesProps {
21
27
  inputAttributes: ReturnType<typeof useInputAttributes>;
22
28
  }
@@ -1 +1 @@
1
- {"version":3,"file":"contexts.d.ts","sourceRoot":"","sources":["../../../src/inputs/contexts.tsx"],"names":[],"mappings":"AAEA,KAAK,qBAAqB,GAAG;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;CACzC,CAAC;AAGF,eAAO,MAAM,yBAAyB,6DAA6B,CAAC;AAGpE,eAAO,MAAM,sBAAsB,8CAA0B,CAAC;AAG9D,eAAO,MAAM,wBAAwB,8CAAmC,CAAC;AAGzE,eAAO,MAAM,oBAAoB,+CAA+B,CAAC;AAEjE,UAAU,sBAAsB;IAC9B,gLAAgL;IAChL,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,wBAAgB,kBAAkB,CAAC,EAAE,YAAY,EAAE,GAAE,sBAA2B;;;;;EAQ/E;AAED,wBAAgB,gBAAgB,4DAE/B;AAED,MAAM,WAAW,wBAAwB;IACvC,eAAe,EAAE,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;CACxD;AAED,wBAAgB,mBAAmB,CAAC,CAAC,SAAS,OAAO,CAAC,wBAAwB,CAAC,EAC7E,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,EACjC,IAAI,CAAC,EAAE,sBAAsB;YAEgB,IAAI,CAAC,CAAC,EAAE,MAAM,wBAAwB,CAAC;;EAOrF"}
1
+ {"version":3,"file":"contexts.d.ts","sourceRoot":"","sources":["../../../src/inputs/contexts.tsx"],"names":[],"mappings":"AAEA,KAAK,qBAAqB,GAAG;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;CACzC,CAAC;AAGF,eAAO,MAAM,yBAAyB,6DAA6B,CAAC;AAGpE,eAAO,MAAM,sBAAsB,8CAA0B,CAAC;AAG9D,eAAO,MAAM,wBAAwB,8CAAmC,CAAC;AAGzE,eAAO,MAAM,oBAAoB,+CAA+B,CAAC;AAEjE,UAAU,sBAAsB;IAC9B,gLAAgL;IAChL,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,wBAAgB,kBAAkB,CAAC,EAAE,YAAY,EAAE,GAAE,sBAA2B;;;;;EAQ/E;AAED,wBAAgB,gBAAgB,4DAE/B;AAED,MAAM,MAAM,2BAA2B,GAAG;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAAC;AAKlF,eAAO,MAAM,8BAA8B,oCAFhC,2BAA2B,KAAK,IAAI,cAEqC,CAAC;AAErF,wBAAgB,yBAAyB,CAAC,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,SAAS,QAQjF;AAED,MAAM,WAAW,wBAAwB;IACvC,eAAe,EAAE,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;CACxD;AAED,wBAAgB,mBAAmB,CAAC,CAAC,SAAS,OAAO,CAAC,wBAAwB,CAAC,EAC7E,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,EACjC,IAAI,CAAC,EAAE,sBAAsB;YAEgB,IAAI,CAAC,CAAC,EAAE,MAAM,wBAAwB,CAAC;;EAOrF"}
@@ -30,6 +30,7 @@ declare function customRender(ui: ReactElement, { locale, messages, ...renderOpt
30
30
  "neptune.Expander.expandAriaLabel": string;
31
31
  "neptune.ExpressiveMoneyInput.currency.search.placeholder": string;
32
32
  "neptune.ExpressiveMoneyInput.currency.select.currency": string;
33
+ "neptune.Field.characterCount": string;
33
34
  "neptune.FlowNavigation.back": string;
34
35
  "neptune.Info.ariaLabel": string;
35
36
  "neptune.Label.optional": string;
@@ -117,6 +118,7 @@ declare function customRenderHook(callback: () => unknown, { locale, messages }?
117
118
  "neptune.Expander.expandAriaLabel": string;
118
119
  "neptune.ExpressiveMoneyInput.currency.search.placeholder": string;
119
120
  "neptune.ExpressiveMoneyInput.currency.select.currency": string;
121
+ "neptune.Field.characterCount": string;
120
122
  "neptune.FlowNavigation.back": string;
121
123
  "neptune.Info.ariaLabel": string;
122
124
  "neptune.Label.optional": string;