@telefonica/mistica 16.0.0 → 16.1.1

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 (152) hide show
  1. package/README.md +11 -9
  2. package/css/mistica.css +1 -1
  3. package/dist/box.d.ts +1 -0
  4. package/dist/box.js +12 -12
  5. package/dist/card.d.ts +14 -2
  6. package/dist/card.js +210 -206
  7. package/dist/credit-card-expiration-field.d.ts +1 -1
  8. package/dist/credit-card-expiration-field.js +53 -52
  9. package/dist/credit-card-number-field.d.ts +1 -1
  10. package/dist/credit-card-number-field.js +47 -45
  11. package/dist/cvv-field.d.ts +1 -1
  12. package/dist/cvv-field.js +38 -37
  13. package/dist/date-field.d.ts +1 -1
  14. package/dist/date-field.js +15 -13
  15. package/dist/date-time-field.d.ts +1 -1
  16. package/dist/date-time-field.js +13 -11
  17. package/dist/decimal-field.d.ts +1 -1
  18. package/dist/decimal-field.js +39 -38
  19. package/dist/email-field.d.ts +1 -1
  20. package/dist/email-field.js +21 -19
  21. package/dist/form-context.d.ts +7 -2
  22. package/dist/form-context.js +69 -62
  23. package/dist/form.d.ts +2 -1
  24. package/dist/form.js +94 -80
  25. package/dist/iban-field.d.ts +1 -1
  26. package/dist/iban-field.js +32 -30
  27. package/dist/index.d.ts +12 -3
  28. package/dist/index.js +19 -8
  29. package/dist/inline.d.ts +2 -1
  30. package/dist/inline.js +16 -15
  31. package/dist/integer-field.d.ts +1 -1
  32. package/dist/integer-field.js +30 -30
  33. package/dist/month-field.d.ts +1 -1
  34. package/dist/month-field.js +15 -13
  35. package/dist/package-version.js +1 -1
  36. package/dist/password-field.d.ts +1 -1
  37. package/dist/password-field.js +24 -22
  38. package/dist/phone-number-field.d.ts +1 -1
  39. package/dist/phone-number-field.js +42 -40
  40. package/dist/pin-field.js +21 -20
  41. package/dist/radio-button.d.ts +1 -0
  42. package/dist/radio-button.js +42 -41
  43. package/dist/rating.css-mistica.js +44 -0
  44. package/dist/rating.css.d.ts +11 -0
  45. package/dist/rating.css.ts.vanilla.css-mistica.js +11 -0
  46. package/dist/rating.d.ts +37 -0
  47. package/dist/rating.js +320 -0
  48. package/dist/search-field.d.ts +1 -0
  49. package/dist/search-field.js +18 -16
  50. package/dist/select.js +36 -33
  51. package/dist/sheet-action-row.css-mistica.js +13 -0
  52. package/dist/sheet-action-row.css.d.ts +1 -0
  53. package/dist/sheet-actions-list.d.ts +26 -0
  54. package/dist/sheet-actions-list.js +147 -0
  55. package/dist/sheet-actions.d.ts +23 -0
  56. package/dist/sheet-actions.js +175 -0
  57. package/dist/{sheet.css-mistica.js → sheet-common.css-mistica.js} +15 -21
  58. package/dist/{sheet.css.d.ts → sheet-common.css.d.ts} +0 -2
  59. package/dist/sheet-common.css.ts.vanilla.css-mistica.js +11 -0
  60. package/dist/sheet-common.d.ts +24 -0
  61. package/dist/sheet-common.js +429 -0
  62. package/dist/sheet-info.css-mistica.js +12 -0
  63. package/dist/sheet-info.css.d.ts +1 -0
  64. package/dist/sheet-info.d.ts +28 -0
  65. package/dist/sheet-info.js +156 -0
  66. package/dist/sheet-native.d.ts +2 -0
  67. package/dist/sheet-native.js +173 -0
  68. package/dist/sheet-radio-list.d.ts +22 -0
  69. package/dist/sheet-radio-list.js +143 -0
  70. package/dist/sheet-root.d.ts +4 -85
  71. package/dist/sheet-root.js +48 -322
  72. package/dist/sheet-types.d.ts +88 -0
  73. package/dist/sheet-web.d.ts +8 -0
  74. package/dist/sheet-web.js +183 -0
  75. package/dist/slider.js +40 -39
  76. package/dist/switch-component.js +18 -17
  77. package/dist/text-field-base.d.ts +2 -0
  78. package/dist/text-field-base.js +74 -66
  79. package/dist/text-field-components.css-mistica.js +14 -14
  80. package/dist/text-field-components.css.d.ts +2 -2
  81. package/dist/text-field-components.js +49 -39
  82. package/dist/text-field.d.ts +1 -0
  83. package/dist/text-field.js +24 -22
  84. package/dist/text-tokens.d.ts +14 -0
  85. package/dist/text-tokens.js +145 -89
  86. package/dist/theme-context-provider.js +6 -5
  87. package/dist/theme.d.ts +2 -0
  88. package/dist/utils/credit-card.d.ts +2 -2
  89. package/dist/utils/credit-card.js +1 -1
  90. package/dist/vivinho-loading-animation/in-lottie.json.js +544 -612
  91. package/dist/vivinho-loading-animation/out-lottie.json.js +828 -896
  92. package/dist/vivinho-loading-animation/pulse-lottie.json.js +798 -866
  93. package/dist/vivinho-loading-animation/wave-lottie.json.js +4303 -4409
  94. package/dist-es/box.js +18 -18
  95. package/dist-es/card.js +305 -301
  96. package/dist-es/credit-card-expiration-field.js +57 -56
  97. package/dist-es/credit-card-number-field.js +74 -72
  98. package/dist-es/cvv-field.js +82 -81
  99. package/dist-es/date-field.js +29 -27
  100. package/dist-es/date-time-field.js +29 -27
  101. package/dist-es/decimal-field.js +46 -45
  102. package/dist-es/email-field.js +26 -24
  103. package/dist-es/form-context.js +70 -63
  104. package/dist-es/form.js +102 -88
  105. package/dist-es/iban-field.js +35 -33
  106. package/dist-es/index.js +1822 -1817
  107. package/dist-es/inline.js +26 -25
  108. package/dist-es/integer-field.js +31 -31
  109. package/dist-es/month-field.js +28 -26
  110. package/dist-es/package-version.js +1 -1
  111. package/dist-es/password-field.js +37 -35
  112. package/dist-es/phone-number-field.js +51 -49
  113. package/dist-es/pin-field.js +32 -31
  114. package/dist-es/radio-button.js +42 -41
  115. package/dist-es/rating.css-mistica.js +6 -0
  116. package/dist-es/rating.css.ts.vanilla.css-mistica.js +2 -0
  117. package/dist-es/rating.js +257 -0
  118. package/dist-es/search-field.js +33 -31
  119. package/dist-es/select.js +49 -46
  120. package/dist-es/sheet-action-row.css-mistica.js +4 -0
  121. package/dist-es/sheet-actions-list.js +92 -0
  122. package/dist-es/sheet-actions.js +125 -0
  123. package/dist-es/sheet-common.css-mistica.js +4 -0
  124. package/dist-es/sheet-common.css.ts.vanilla.css-mistica.js +2 -0
  125. package/dist-es/sheet-common.js +366 -0
  126. package/dist-es/sheet-info.css-mistica.js +3 -0
  127. package/dist-es/sheet-info.js +101 -0
  128. package/dist-es/sheet-native.js +164 -0
  129. package/dist-es/sheet-radio-list.js +88 -0
  130. package/dist-es/sheet-root.js +50 -319
  131. package/dist-es/sheet-web.js +128 -0
  132. package/dist-es/slider.js +49 -48
  133. package/dist-es/style.css +1 -1
  134. package/dist-es/switch-component.js +27 -26
  135. package/dist-es/text-field-base.js +108 -100
  136. package/dist-es/text-field-components.css-mistica.js +2 -2
  137. package/dist-es/text-field-components.js +70 -60
  138. package/dist-es/text-field.js +33 -31
  139. package/dist-es/text-tokens.js +80 -45
  140. package/dist-es/theme-context-provider.js +20 -19
  141. package/dist-es/utils/credit-card.js +1 -1
  142. package/dist-es/vivinho-loading-animation/in-lottie.json.js +534 -599
  143. package/dist-es/vivinho-loading-animation/out-lottie.json.js +821 -886
  144. package/dist-es/vivinho-loading-animation/pulse-lottie.json.js +790 -855
  145. package/dist-es/vivinho-loading-animation/wave-lottie.json.js +4297 -4400
  146. package/package.json +4 -3
  147. package/dist/sheet.d.ts +0 -107
  148. package/dist/sheet.js +0 -642
  149. package/dist-es/sheet.css-mistica.js +0 -4
  150. package/dist-es/sheet.js +0 -567
  151. /package/dist/{sheet.css.ts.vanilla.css-mistica.js → sheet-action-row.css.ts.vanilla.css-mistica.js} +0 -0
  152. /package/dist-es/{sheet.css.ts.vanilla.css-mistica.js → sheet-action-row.css.ts.vanilla.css-mistica.js} +0 -0
@@ -11,17 +11,15 @@ function _export(target, all) {
11
11
  }
12
12
  _export(exports, {
13
13
  IntegerInput: function() {
14
- return y;
14
+ return x;
15
15
  },
16
16
  default: function() {
17
- return $;
17
+ return b;
18
18
  }
19
19
  });
20
20
  const _jsxruntime = require("react/jsx-runtime");
21
21
  const _formcontext = require("./form-context.js");
22
- const _hooks = require("./hooks.js");
23
22
  const _textfieldbase = require("./text-field-base.js");
24
- const _texttokens = require("./text-tokens.js");
25
23
  function _define_property(obj, key, value) {
26
24
  if (key in obj) {
27
25
  Object.defineProperty(obj, key, {
@@ -101,31 +99,32 @@ function _object_without_properties_loose(source, excluded) {
101
99
  }
102
100
  return target;
103
101
  }
104
- const y = (_param)=>{
105
- var { inputRef: i, value: r, defaultValue: n, type: u = "text" } = _param, o = _object_without_properties(_param, [
102
+ const x = (_param)=>{
103
+ var { inputRef: o, value: n, defaultValue: r, type: u = "text" } = _param, i = _object_without_properties(_param, [
106
104
  "inputRef",
107
105
  "value",
108
106
  "defaultValue",
109
107
  "type"
110
108
  ]);
111
- const t = (e)=>String(e !== null && e !== void 0 ? e : "").replace(/[^\d]/g, "");
112
- return /* @__PURE__ */ (0, _jsxruntime.jsx)("input", _object_spread_props(_object_spread({}, o), {
109
+ const e = (t)=>String(t !== null && t !== void 0 ? t : "").replace(/[^\d]/g, "");
110
+ return /* @__PURE__ */ (0, _jsxruntime.jsx)("input", _object_spread_props(_object_spread({}, i), {
113
111
  inputMode: "numeric",
114
112
  pattern: "[0-9]*",
115
- onInput: (e)=>{
116
- e.currentTarget.value = t(e.currentTarget.value);
113
+ onInput: (t)=>{
114
+ t.currentTarget.value = e(t.currentTarget.value);
117
115
  },
118
- ref: i,
116
+ ref: o,
119
117
  type: u,
120
- value: r === void 0 ? void 0 : t(r),
121
- defaultValue: n === void 0 ? void 0 : t(n)
118
+ value: n === void 0 ? void 0 : e(n),
119
+ defaultValue: r === void 0 ? void 0 : e(r)
122
120
  }));
123
- }, A = (_param)=>{
124
- var { disabled: i, error: r, helperText: n, name: u, optional: o, validate: t, onChange: d, onChangeValue: e, onBlur: a, value: c, defaultValue: p, dataAttributes: l } = _param, f = _object_without_properties(_param, [
121
+ }, T = (_param)=>{
122
+ var { disabled: o, error: n, helperText: r, name: u, label: i, optional: e, validate: s, onChange: t, onChangeValue: a, onBlur: d, value: c, defaultValue: l, dataAttributes: m } = _param, g = _object_without_properties(_param, [
125
123
  "disabled",
126
124
  "error",
127
125
  "helperText",
128
126
  "name",
127
+ "label",
129
128
  "optional",
130
129
  "validate",
131
130
  "onChange",
@@ -135,24 +134,25 @@ const y = (_param)=>{
135
134
  "defaultValue",
136
135
  "dataAttributes"
137
136
  ]);
138
- const { texts: g, t: I } = (0, _hooks.useTheme)(), F = (0, _formcontext.useFieldProps)({
137
+ const I = (0, _formcontext.useFieldProps)({
139
138
  name: u,
139
+ label: i,
140
140
  value: c,
141
- defaultValue: p,
142
- processValue: (s)=>s.trim(),
143
- helperText: n,
144
- optional: o,
145
- error: r,
146
- disabled: i,
147
- onBlur: a,
148
- validate: (s, x)=>s ? t == null ? void 0 : t(s, x) : o ? "" : g.formFieldErrorIsMandatory || I(_texttokens.formFieldErrorIsMandatory),
149
- onChange: d,
150
- onChangeValue: e
141
+ defaultValue: l,
142
+ processValue: (f)=>f.trim(),
143
+ helperText: r,
144
+ optional: e,
145
+ error: n,
146
+ disabled: o,
147
+ onBlur: d,
148
+ validate: s,
149
+ onChange: t,
150
+ onChangeValue: a
151
151
  });
152
- return /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.TextFieldBaseAutosuggest, _object_spread_props(_object_spread({}, f, F), {
153
- inputComponent: y,
152
+ return /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.TextFieldBaseAutosuggest, _object_spread_props(_object_spread({}, g, I), {
153
+ inputComponent: x,
154
154
  dataAttributes: _object_spread({
155
155
  "component-name": "IntegerField"
156
- }, l)
156
+ }, m)
157
157
  }));
158
- }, $ = A;
158
+ }, b = T;
@@ -5,5 +5,5 @@ export interface DateFieldProps extends CommonFormFieldProps {
5
5
  min?: Date;
6
6
  max?: Date;
7
7
  }
8
- declare const DateField: ({ disabled, error, helperText, name, optional, validate: validateProp, onChange, onChangeValue: onChangeValueProp, onBlur, value, defaultValue, min, max, dataAttributes, ...rest }: DateFieldProps) => JSX.Element;
8
+ declare const DateField: ({ disabled, error, helperText, name, label, optional, validate: validateProp, onChange, onChangeValue: onChangeValueProp, onBlur, value, defaultValue, min, max, dataAttributes, ...rest }: DateFieldProps) => JSX.Element;
9
9
  export default DateField;
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
6
6
  Object.defineProperty(exports, "default", {
7
7
  enumerable: true,
8
8
  get: function() {
9
- return Z;
9
+ return _;
10
10
  }
11
11
  });
12
12
  const _jsxruntime = require("react/jsx-runtime");
@@ -146,12 +146,13 @@ function _object_without_properties_loose(source, excluded) {
146
146
  }
147
147
  return target;
148
148
  }
149
- const C = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require(/* webpackChunkName: "date-time-picker" */ "./date-time-picker.js")))), L = (_param)=>{
150
- var { disabled: h, error: g, helperText: D, name: F, optional: f, validate: n, onChange: R, onChangeValue: s, onBlur: S, value: y, defaultValue: O, min: o, max: i, dataAttributes: d } = _param, u = _object_without_properties(_param, [
149
+ const L = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require(/* webpackChunkName: "date-time-picker" */ "./date-time-picker.js")))), V = (_param)=>{
150
+ var { disabled: h, error: g, helperText: D, name: F, label: R, optional: f, validate: n, onChange: S, onChangeValue: s, onBlur: y, value: O, defaultValue: k, min: o, max: i, dataAttributes: d } = _param, u = _object_without_properties(_param, [
151
151
  "disabled",
152
152
  "error",
153
153
  "helperText",
154
154
  "name",
155
+ "label",
155
156
  "optional",
156
157
  "validate",
157
158
  "onChange",
@@ -163,18 +164,19 @@ const C = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/
163
164
  "max",
164
165
  "dataAttributes"
165
166
  ]);
166
- const k = (t)=>t, I = _react.useMemo(()=>(0, _dom.isInputTypeSupported)("month"), []), { texts: M, t: T } = (0, _hooks.useTheme)(), m = (t)=>!(o && t && t < (0, _time.getLocalYearMonthString)(o) || i && t && t > (0, _time.getLocalYearMonthString)(i)), p = (0, _formcontext.useFieldProps)({
167
+ const I = (t)=>t, M = _react.useMemo(()=>(0, _dom.isInputTypeSupported)("month"), []), { texts: T, t: z } = (0, _hooks.useTheme)(), m = (t)=>!(o && t && t < (0, _time.getLocalYearMonthString)(o) || i && t && t > (0, _time.getLocalYearMonthString)(i)), p = (0, _formcontext.useFieldProps)({
167
168
  name: F,
168
- value: y,
169
- defaultValue: O,
170
- processValue: k,
169
+ label: R,
170
+ value: O,
171
+ defaultValue: k,
172
+ processValue: I,
171
173
  helperText: D,
172
174
  optional: f,
173
175
  error: g,
174
176
  disabled: h,
175
- onBlur: S,
176
- validate: (t, a)=>m(t) ? n == null ? void 0 : n(t, a) : M.formDateOutOfRangeError || T(_texttokens.formDateOutOfRangeError),
177
- onChange: R,
177
+ onBlur: y,
178
+ validate: (t, a)=>m(t) ? n == null ? void 0 : n(t, a) : T.formDateOutOfRangeError || z(_texttokens.formDateOutOfRangeError),
179
+ onChange: S,
178
180
  onChangeValue: (t, a)=>{
179
181
  m(t) && (s == null || s(t, a));
180
182
  }
@@ -192,9 +194,9 @@ const C = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/
192
194
  "component-name": "MonthField"
193
195
  }, d)
194
196
  }));
195
- return I || (0, _environment.isServerSide)() ? l : /* @__PURE__ */ (0, _jsxruntime.jsx)(_react.Suspense, {
197
+ return M || (0, _environment.isServerSide)() ? l : /* @__PURE__ */ (0, _jsxruntime.jsx)(_react.Suspense, {
196
198
  fallback: l,
197
- children: /* @__PURE__ */ (0, _jsxruntime.jsx)(C, _object_spread_props(_object_spread({}, u, p), {
199
+ children: /* @__PURE__ */ (0, _jsxruntime.jsx)(L, _object_spread_props(_object_spread({}, u, p), {
198
200
  optional: f,
199
201
  isValidDate: (t)=>m((0, _time.getLocalYearMonthString)(t.toDate())),
200
202
  mode: "year-month",
@@ -203,4 +205,4 @@ const C = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/
203
205
  }, d)
204
206
  }))
205
207
  });
206
- }, Z = L;
208
+ }, _ = V;
@@ -8,4 +8,4 @@ Object.defineProperty(exports, "PACKAGE_VERSION", {
8
8
  return o;
9
9
  }
10
10
  });
11
- const o = "16.0.0";
11
+ const o = "16.1.1";
@@ -3,5 +3,5 @@ import type { CommonFormFieldProps } from './text-field-base';
3
3
  export interface PasswordFieldProps extends CommonFormFieldProps {
4
4
  onChangeValue?: (value: string, rawValue: string) => void;
5
5
  }
6
- declare const PasswordField: ({ disabled, error, helperText, name, optional, validate, onChange, onChangeValue, onBlur, value, autoComplete, defaultValue, dataAttributes, ...rest }: PasswordFieldProps) => JSX.Element;
6
+ declare const PasswordField: ({ disabled, error, helperText, name, label, optional, validate, onChange, onChangeValue, onBlur, value, autoComplete, defaultValue, dataAttributes, ...rest }: PasswordFieldProps) => JSX.Element;
7
7
  export default PasswordField;
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
6
6
  Object.defineProperty(exports, "default", {
7
7
  enumerable: true,
8
8
  get: function() {
9
- return J;
9
+ return K;
10
10
  }
11
11
  });
12
12
  const _jsxruntime = require("react/jsx-runtime");
@@ -142,7 +142,7 @@ function _object_without_properties_loose(source, excluded) {
142
142
  }
143
143
  return target;
144
144
  }
145
- const B = (param)=>{
145
+ const C = (param)=>{
146
146
  let { isVisible: n, setVisibility: c, focus: a } = param;
147
147
  const { texts: t, t: s } = (0, _hooks.useTheme)();
148
148
  return /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.FieldEndIcon, {
@@ -159,12 +159,13 @@ const B = (param)=>{
159
159
  c(l), a();
160
160
  }
161
161
  });
162
- }, C = (_param)=>{
163
- var { disabled: n, error: c, helperText: a, name: t, optional: s, validate: l, onChange: m, onChangeValue: p, onBlur: b, value: P, autoComplete: w = "current-password", defaultValue: R, dataAttributes: y } = _param, F = _object_without_properties(_param, [
162
+ }, O = (_param)=>{
163
+ var { disabled: n, error: c, helperText: a, name: t, label: s, optional: l, validate: m, onChange: p, onChangeValue: b, onBlur: P, value: w, autoComplete: R = "current-password", defaultValue: y, dataAttributes: F } = _param, I = _object_without_properties(_param, [
164
164
  "disabled",
165
165
  "error",
166
166
  "helperText",
167
167
  "name",
168
+ "label",
168
169
  "optional",
169
170
  "validate",
170
171
  "onChange",
@@ -175,18 +176,18 @@ const B = (param)=>{
175
176
  "defaultValue",
176
177
  "dataAttributes"
177
178
  ]);
178
- const [u, I] = _react.useState(!1), o = _react.useRef(0), r = _react.useRef(null), V = (e)=>e, g = ()=>{
179
+ const [u, V] = _react.useState(!1), o = _react.useRef(0), r = _react.useRef(null), g = (e)=>e, h = ()=>{
179
180
  const e = r.current;
180
181
  e && (e.selectionStart !== null && (o.current = e.selectionStart), e.focus());
181
182
  };
182
183
  _react.useEffect(()=>{
183
184
  const e = r.current;
184
185
  if (e) {
185
- const h = requestAnimationFrame(()=>{
186
+ const x = requestAnimationFrame(()=>{
186
187
  e.selectionStart = o.current, e.selectionEnd = o.current;
187
188
  });
188
189
  return ()=>{
189
- cancelAnimationFrame(h);
190
+ cancelAnimationFrame(x);
190
191
  };
191
192
  }
192
193
  }, [
@@ -196,31 +197,32 @@ const B = (param)=>{
196
197
  ]);
197
198
  const f = (0, _formcontext.useFieldProps)({
198
199
  name: t,
199
- value: P,
200
- defaultValue: R,
201
- processValue: V,
200
+ label: s,
201
+ value: w,
202
+ defaultValue: y,
203
+ processValue: g,
202
204
  helperText: a,
203
- optional: s,
205
+ optional: l,
204
206
  error: c,
205
207
  disabled: n,
206
- onBlur: b,
207
- validate: l,
208
- onChange: m,
209
- onChangeValue: p
208
+ onBlur: P,
209
+ validate: m,
210
+ onChange: p,
211
+ onChangeValue: b
210
212
  });
211
- return /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.TextFieldBaseAutosuggest, _object_spread_props(_object_spread({}, F, f), {
213
+ return /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.TextFieldBaseAutosuggest, _object_spread_props(_object_spread({}, I, f), {
212
214
  type: u ? "text" : "password",
213
215
  inputRef: (e)=>{
214
216
  f.inputRef(e), r.current = e;
215
217
  },
216
- autoComplete: w,
217
- endIcon: /* @__PURE__ */ (0, _jsxruntime.jsx)(B, {
218
- focus: g,
218
+ autoComplete: R,
219
+ endIcon: /* @__PURE__ */ (0, _jsxruntime.jsx)(C, {
220
+ focus: h,
219
221
  isVisible: u,
220
- setVisibility: I
222
+ setVisibility: V
221
223
  }),
222
224
  dataAttributes: _object_spread({
223
225
  "component-name": "PasswordField"
224
- }, y)
226
+ }, F)
225
227
  }));
226
- }, J = C;
228
+ }, K = O;
@@ -6,5 +6,5 @@ export interface PhoneNumberFieldProps extends CommonFormFieldProps {
6
6
  getSuggestions?: (value: string) => Array<string>;
7
7
  e164?: boolean;
8
8
  }
9
- declare const PhoneNumberField: ({ disabled, error, helperText, name, optional, validate, onChange, onChangeValue, onBlur, value, defaultValue, e164, dataAttributes, ...rest }: PhoneNumberFieldProps) => JSX.Element;
9
+ declare const PhoneNumberField: ({ disabled, error, helperText, name, label, optional, validate, onChange, onChangeValue, onBlur, value, defaultValue, e164, dataAttributes, ...rest }: PhoneNumberFieldProps) => JSX.Element;
10
10
  export default PhoneNumberField;
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
6
6
  Object.defineProperty(exports, "default", {
7
7
  enumerable: true,
8
8
  get: function() {
9
- return J;
9
+ return K;
10
10
  }
11
11
  });
12
12
  const _jsxruntime = require("react/jsx-runtime");
@@ -138,8 +138,8 @@ function _object_without_properties_loose(source, excluded) {
138
138
  }
139
139
  return target;
140
140
  }
141
- const b = (r, n)=>(0, _libphonenumber.formatAsYouType)(n.replace(/[^\d+*#]/g, ""), r), $ = (r)=>!!r.match(/^\+\d+$/), j = (_param)=>{
142
- var { inputRef: r, value: n, defaultValue: f, onChange: s, prefix: o, e164: y } = _param, d = _object_without_properties(_param, [
141
+ const F = (r, n)=>(0, _libphonenumber.formatAsYouType)(n.replace(/[^\d+*#]/g, ""), r), j = (r)=>!!r.match(/^\+\d+$/), I = (_param)=>{
142
+ var { inputRef: r, value: n, defaultValue: f, onChange: s, prefix: o, e164: R } = _param, d = _object_without_properties(_param, [
143
143
  "inputRef",
144
144
  "value",
145
145
  "defaultValue",
@@ -147,42 +147,43 @@ const b = (r, n)=>(0, _libphonenumber.formatAsYouType)(n.replace(/[^\d+*#]/g, ""
147
147
  "prefix",
148
148
  "e164"
149
149
  ]);
150
- const [g, h] = _react.useState(f !== null && f !== void 0 ? f : ""), l = _react.useRef(null), { i18n: C } = (0, _hooks.useTheme)(), i = C.phoneNumberFormattingRegionCode, u = typeof n < "u", a = u ? n : g, P = _react.useCallback((e)=>{
151
- u || h(e), l.current && (s == null || s((0, _dom.createChangeEvent)(l.current, e)));
150
+ const [g, h] = _react.useState(f !== null && f !== void 0 ? f : ""), c = _react.useRef(null), { i18n: C } = (0, _hooks.useTheme)(), i = C.phoneNumberFormattingRegionCode, l = typeof n < "u", P = l ? n : g, u = _react.useCallback((e)=>{
151
+ l || h(e), c.current && (s == null || s((0, _dom.createChangeEvent)(c.current, e)));
152
152
  }, [
153
- u,
153
+ l,
154
154
  s
155
- ]), F = _react.useCallback(// otherwise the cursor position is incorrectly positioned
155
+ ]), b = _react.useCallback(// otherwise the cursor position is incorrectly positioned
156
156
  // also note the "@" is replaced back to "-" in `replace` param in `useRifm`
157
157
  (e)=>{
158
158
  let t = "";
159
- if (o && $(o)) {
160
- const c = o + e;
161
- t = b(i, c), t.startsWith(o) ? t = t.slice(o.length).trim() : t = b(i, e);
162
- } else t = b(i, e);
159
+ if (o && j(o)) {
160
+ const a = o + e;
161
+ t = F(i, a), t.startsWith(o) ? t = t.slice(o.length).trim() : t = F(i, e);
162
+ } else t = F(i, e);
163
163
  return t.replace(/-/g, "@");
164
164
  }, [
165
165
  i,
166
166
  o
167
- ]), m = (0, _rifm.useRifm)({
168
- format: F,
169
- value: a,
170
- onChange: P,
167
+ ]), y = (0, _rifm.useRifm)({
168
+ format: b,
169
+ value: P,
170
+ onChange: u,
171
171
  accept: /[\d\-+#*]+/g,
172
172
  replace: (e)=>e.replace(/@/g, "-")
173
173
  });
174
174
  return /* @__PURE__ */ (0, _jsxruntime.jsx)("input", _object_spread_props(_object_spread({}, d), {
175
- value: m.value,
176
- onChange: m.onChange,
175
+ value: y.value,
176
+ onChange: y.onChange,
177
177
  type: "tel",
178
- ref: (0, _common.combineRefs)(r, l)
178
+ ref: (0, _common.combineRefs)(r, c)
179
179
  }));
180
- }, I = (_param)=>{
181
- var { disabled: r, error: n, helperText: f, name: s, optional: o, validate: y, onChange: d, onChangeValue: g, onBlur: h, value: l, defaultValue: C, e164: i, dataAttributes: u } = _param, a = _object_without_properties(_param, [
180
+ }, W = (_param)=>{
181
+ var { disabled: r, error: n, helperText: f, name: s, label: o, optional: R, validate: d, onChange: g, onChangeValue: h, onBlur: c, value: C, defaultValue: i, e164: l, dataAttributes: P } = _param, u = _object_without_properties(_param, [
182
182
  "disabled",
183
183
  "error",
184
184
  "helperText",
185
185
  "name",
186
+ "label",
186
187
  "optional",
187
188
  "validate",
188
189
  "onChange",
@@ -193,38 +194,39 @@ const b = (r, n)=>(0, _libphonenumber.formatAsYouType)(n.replace(/[^\d+*#]/g, ""
193
194
  "e164",
194
195
  "dataAttributes"
195
196
  ]);
196
- const { i18n: P } = (0, _hooks.useTheme)(), m = (0, _formcontext.useFieldProps)({
197
+ const { i18n: b } = (0, _hooks.useTheme)(), e = (0, _formcontext.useFieldProps)({
197
198
  name: s,
198
- value: l,
199
- defaultValue: C,
200
- processValue: (e)=>{
201
- if (i) try {
202
- var _a_prefix;
203
- const t = ((_a_prefix = a.prefix) !== null && _a_prefix !== void 0 ? _a_prefix : "").replace(/[^\d]/g, "");
204
- let c = (0, _libphonenumber.getRegionCodeForCountryCode)(t);
205
- return (!c || c === "ZZ") && (c = P.phoneNumberFormattingRegionCode), (0, _libphonenumber.formatToE164)((0, _libphonenumber.parse)(e, c));
199
+ label: o,
200
+ value: C,
201
+ defaultValue: i,
202
+ processValue: (t)=>{
203
+ if (l) try {
204
+ var _u_prefix;
205
+ const a = ((_u_prefix = u.prefix) !== null && _u_prefix !== void 0 ? _u_prefix : "").replace(/[^\d]/g, "");
206
+ let m = (0, _libphonenumber.getRegionCodeForCountryCode)(a);
207
+ return (!m || m === "ZZ") && (m = b.phoneNumberFormattingRegionCode), (0, _libphonenumber.formatToE164)((0, _libphonenumber.parse)(t, m));
206
208
  } catch (e) {
207
209
  return "";
208
210
  }
209
- else return e.replace(/[^\d]/g, "");
211
+ else return t.replace(/[^\d]/g, "");
210
212
  },
211
213
  helperText: f,
212
- optional: o,
214
+ optional: R,
213
215
  error: n,
214
216
  disabled: r,
215
- onBlur: h,
216
- validate: y,
217
- onChange: d,
218
- onChangeValue: g
217
+ onBlur: c,
218
+ validate: d,
219
+ onChange: g,
220
+ onChangeValue: h
219
221
  });
220
- return /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.TextFieldBaseAutosuggest, _object_spread_props(_object_spread({}, a, m), {
222
+ return /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.TextFieldBaseAutosuggest, _object_spread_props(_object_spread({}, u, e), {
221
223
  type: "phone",
222
224
  inputProps: {
223
- prefix: a.prefix
225
+ prefix: u.prefix
224
226
  },
225
- inputComponent: j,
227
+ inputComponent: I,
226
228
  dataAttributes: _object_spread({
227
229
  "component-name": "PhoneNumberField"
228
- }, u)
230
+ }, P)
229
231
  }));
230
- }, J = I;
232
+ }, K = W;
package/dist/pin-field.js CHANGED
@@ -123,13 +123,13 @@ function _object_spread_props(target, source) {
123
123
  }
124
124
  let C = !1;
125
125
  const ee = (param)=>{
126
- let { length: i = 6, hideCode: n = !1, readSms: d, disabled: h, readOnly: g, value: y, defaultValue: b, onChange: f, inputRef: R } = param;
126
+ let { length: i = 6, hideCode: n = !1, readSms: d, disabled: g, readOnly: y, value: F, defaultValue: b, onChange: f, inputRef: R } = param;
127
127
  var _ref;
128
- const { texts: S, t: k } = (0, _hooks.useTheme)(), [A, F] = _react.useState((_ref = b == null ? void 0 : b.slice(0, i)) !== null && _ref !== void 0 ? _ref : ""), [w, P] = _react.useState(void 0), l = _react.useRef(Array.from({
128
+ const { texts: S, t: k } = (0, _hooks.useTheme)(), [A, I] = _react.useState((_ref = b == null ? void 0 : b.slice(0, i)) !== null && _ref !== void 0 ? _ref : ""), [w, P] = _react.useState(void 0), l = _react.useRef(Array.from({
129
129
  length: i
130
- }, ()=>null)).current, u = typeof y < "u", r = u ? y : A, p = _react.useCallback((s)=>{
130
+ }, ()=>null)).current, u = typeof F < "u", r = u ? F : A, p = _react.useCallback((s)=>{
131
131
  if (s === r) return;
132
- u || F(s);
132
+ u || I(s);
133
133
  const e = l[0];
134
134
  e && (f == null || f((0, _dom.createChangeEvent)(_object_spread({}, e), s)));
135
135
  }, [
@@ -172,21 +172,21 @@ const ee = (param)=>{
172
172
  i,
173
173
  d
174
174
  ]);
175
- const L = (s)=>(e)=>{
175
+ const N = (s)=>(e)=>{
176
176
  var V;
177
177
  const t = e.target.value;
178
178
  if (t === "") return;
179
179
  const o = r[s];
180
180
  let m = t;
181
181
  !o || o === t ? m = t : o === t[0] ? m = t.slice(1) : o === t[t.length - 1] && (m = t.slice(0, -1));
182
- let I = s, T = r;
182
+ let v = s, T = r;
183
183
  if (m.length >= 2) {
184
184
  const $ = m.slice(0, i - s);
185
- T = r.slice(0, s) + $, I = Math.min(s + $.length, i - 1);
186
- } else T = r.slice(0, s) + m + r.slice(s + 1), I = s + 1;
185
+ T = r.slice(0, s) + $, v = Math.min(s + $.length, i - 1);
186
+ } else T = r.slice(0, s) + m + r.slice(s + 1), v = s + 1;
187
187
  T !== r && ((0, _reactdom.flushSync)(()=>{
188
188
  p(T);
189
- }), I !== s && I <= i - 1 && ((V = l[I]) == null || V.focus()));
189
+ }), v !== s && v <= i - 1 && ((V = l[v]) == null || V.focus()));
190
190
  };
191
191
  return /* @__PURE__ */ (0, _jsxruntime.jsx)(_inline.default, {
192
192
  space: 8,
@@ -195,7 +195,7 @@ const ee = (param)=>{
195
195
  }).map((s, e)=>/* @__PURE__ */ {
196
196
  var _r_e;
197
197
  return (0, _jsxruntime.jsxs)("div", {
198
- className: g ? _pinfieldcssmistica.readOnlyField : e === w ? _pinfieldcssmistica.focusedField : _pinfieldcssmistica.field,
198
+ className: y ? _pinfieldcssmistica.readOnlyField : e === w ? _pinfieldcssmistica.focusedField : _pinfieldcssmistica.field,
199
199
  children: [
200
200
  /* @__PURE__ */ (0, _jsxruntime.jsx)(_integerfield.IntegerInput, {
201
201
  "aria-label": (S.pinFieldInputLabel || k(_texttokens.pinFieldInputLabel)).replace("1$s", String(e + 1)).replace("2$s", String(i)),
@@ -223,11 +223,11 @@ const ee = (param)=>{
223
223
  fontSize: _pinfieldcssmistica.pinInputLineHeight,
224
224
  height: _pinfieldcssmistica.pinInputLineHeight
225
225
  },
226
- disabled: h,
227
- readOnly: g,
226
+ disabled: g,
227
+ readOnly: y,
228
228
  autoComplete: d ? "one-time-code" : void 0,
229
229
  value: (_r_e = r[e]) !== null && _r_e !== void 0 ? _r_e : "",
230
- onChange: L(e),
230
+ onChange: N(e),
231
231
  onKeyDown: (t)=>{
232
232
  switch(t.key){
233
233
  case "Backspace":
@@ -262,16 +262,17 @@ const ee = (param)=>{
262
262
  })
263
263
  });
264
264
  }, te = (param)=>{
265
- let { length: i = 6, hideCode: n = !1, readSms: d = !n, disabled: h, readOnly: g, name: y, value: b, defaultValue: f, helperText: R, error: S, onChangeValue: k, onChange: A, "aria-label": F, "aria-labelledby": w, dataAttributes: P } = param;
265
+ let { length: i = 6, hideCode: n = !1, readSms: d = !n, disabled: g, readOnly: y, name: F, value: b, defaultValue: f, helperText: R, error: S, onChangeValue: k, onChange: A, "aria-label": I, "aria-labelledby": w, dataAttributes: P } = param;
266
266
  const l = (0, _formcontext.useFieldProps)({
267
- name: y,
267
+ name: F,
268
+ label: I !== null && I !== void 0 ? I : "",
268
269
  value: b,
269
270
  defaultValue: f,
270
271
  processValue: (r)=>r,
271
272
  helperText: R,
272
273
  optional: !1,
273
274
  error: S,
274
- disabled: h,
275
+ disabled: g,
275
276
  onChangeValue: k,
276
277
  onChange: A
277
278
  }), u = _react.useId();
@@ -279,14 +280,14 @@ const ee = (param)=>{
279
280
  role: "group",
280
281
  "aria-labelledby": w !== null && w !== void 0 ? w : u,
281
282
  className: (0, _classnames.default)(_pinfieldcssmistica.fieldContainer, {
282
- [_pinfieldcssmistica.disabled]: h
283
+ [_pinfieldcssmistica.disabled]: g
283
284
  })
284
285
  }, (0, _dom.getPrefixedDataAttributes)(P, "PinField")), {
285
286
  children: [
286
- F && !w && /* @__PURE__ */ (0, _jsxruntime.jsx)(_screenreaderonly.default, {
287
+ I && !w && /* @__PURE__ */ (0, _jsxruntime.jsx)(_screenreaderonly.default, {
287
288
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
288
289
  id: u,
289
- children: F
290
+ children: I
290
291
  })
291
292
  }),
292
293
  /* @__PURE__ */ (0, _jsxruntime.jsx)(ee, {
@@ -298,7 +299,7 @@ const ee = (param)=>{
298
299
  defaultValue: l.defaultValue,
299
300
  disabled: l.disabled,
300
301
  onChange: l.onChange,
301
- readOnly: g
302
+ readOnly: y
302
303
  }),
303
304
  /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldcomponents.HelperText, {
304
305
  error: l.error,
@@ -36,6 +36,7 @@ declare const RadioButton: ({ value, id, dataAttributes, "aria-labelledby": aria
36
36
  type RadioGroupProps = {
37
37
  name: string;
38
38
  disabled?: boolean;
39
+ 'aria-label'?: string;
39
40
  'aria-labelledby'?: string;
40
41
  children: React.ReactNode;
41
42
  value?: string;