@basis-theory/react-elements 1.13.1 → 1.14.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 (4) hide show
  1. package/main/index.js +10 -5
  2. package/module/module.js +10 -5
  3. package/package.json +2 -2
  4. package/types/index.d.ts +17 -5
package/main/index.js CHANGED
@@ -215,7 +215,7 @@ const $75e7ef6fe5d73b5f$export$b6487193f4d880e0 = (eventType, element, listener)
215
215
  ]);
216
216
 
217
217
 
218
- const $b68de9bc89cba8c8$var$CardElementC = ({ autoComplete: autoComplete, bt: bt, cardTypes: cardTypes, copyIconStyles: copyIconStyles, disabled: disabled, elementRef: elementRef, enableCopy: enableCopy, id: id, inputMode: inputMode, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown, onReady: onReady, placeholder: placeholder, readOnly: readOnly, skipLuhnValidation: skipLuhnValidation, style: style, validateOnChange: validateOnChange, value: value })=>{
218
+ const $b68de9bc89cba8c8$var$CardElementC = ({ autoComplete: autoComplete, bt: bt, cardTypes: cardTypes, copyIconStyles: copyIconStyles, disabled: disabled, elementRef: elementRef, enableCopy: enableCopy, id: id, inputMode: inputMode, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown, onReady: onReady, placeholder: placeholder, readOnly: readOnly, skipLuhnValidation: skipLuhnValidation, style: style, title: title, validateOnChange: validateOnChange, value: value })=>{
219
219
  const wrapperRef = (0, $6ZdRe$react.useRef)(null);
220
220
  const element = (0, $515e46363124517b$export$93e1bc7222cfbdc8)(id, 'card', wrapperRef, {
221
221
  autoComplete: autoComplete,
@@ -228,6 +228,7 @@ const $b68de9bc89cba8c8$var$CardElementC = ({ autoComplete: autoComplete, bt: bt
228
228
  readOnly: readOnly,
229
229
  skipLuhnValidation: skipLuhnValidation,
230
230
  style: style,
231
+ title: title,
231
232
  validateOnChange: validateOnChange,
232
233
  value: value
233
234
  }, bt, elementRef);
@@ -254,7 +255,7 @@ function CardElement(props, ref) {
254
255
 
255
256
 
256
257
 
257
- const $5056c1f1f96da4b6$var$TextElementC = ({ 'aria-label': ariaLabel, autoComplete: autoComplete, bt: bt, disabled: disabled, elementRef: elementRef, id: id, inputMode: inputMode, mask: mask, maxLength: maxLength, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown, onReady: onReady, password: password, placeholder: placeholder, readOnly: readOnly, style: style, transform: transform, validateOnChange: validateOnChange, validation: validation, value: value, valueRef: valueRef })=>{
258
+ const $5056c1f1f96da4b6$var$TextElementC = ({ 'aria-label': ariaLabel, autoComplete: autoComplete, bt: bt, disabled: disabled, elementRef: elementRef, id: id, inputMode: inputMode, mask: mask, maxLength: maxLength, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown, onReady: onReady, password: password, placeholder: placeholder, readOnly: readOnly, style: style, title: title, transform: transform, validateOnChange: validateOnChange, validation: validation, value: value, valueRef: valueRef })=>{
258
259
  const wrapperRef = (0, $6ZdRe$react.useRef)(null);
259
260
  const element = (0, $515e46363124517b$export$93e1bc7222cfbdc8)(id, 'text', wrapperRef, {
260
261
  'aria-label': ariaLabel,
@@ -268,6 +269,7 @@ const $5056c1f1f96da4b6$var$TextElementC = ({ 'aria-label': ariaLabel, autoCompl
268
269
  readOnly: readOnly,
269
270
  style: style,
270
271
  targetId: id,
272
+ title: title,
271
273
  transform: transform,
272
274
  validateOnChange: validateOnChange,
273
275
  validation: validation,
@@ -296,7 +298,7 @@ function TextElement(props, ref) {
296
298
 
297
299
 
298
300
 
299
- const $89a8c5992dc7cf9a$var$CardNumberElementC = ({ 'aria-label': ariaLabel, autoComplete: autoComplete, bt: bt, cardTypes: cardTypes, copyIconStyles: copyIconStyles, disabled: disabled, elementRef: elementRef, enableCopy: enableCopy, iconPosition: iconPosition, id: id, inputMode: inputMode, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown, onReady: onReady, placeholder: placeholder, readOnly: readOnly, skipLuhnValidation: skipLuhnValidation, style: style, validateOnChange: validateOnChange, value: value, valueRef: valueRef })=>{
301
+ const $89a8c5992dc7cf9a$var$CardNumberElementC = ({ 'aria-label': ariaLabel, autoComplete: autoComplete, bt: bt, cardTypes: cardTypes, copyIconStyles: copyIconStyles, disabled: disabled, elementRef: elementRef, enableCopy: enableCopy, iconPosition: iconPosition, id: id, inputMode: inputMode, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown, onReady: onReady, placeholder: placeholder, readOnly: readOnly, skipLuhnValidation: skipLuhnValidation, style: style, title: title, validateOnChange: validateOnChange, value: value, valueRef: valueRef })=>{
300
302
  const wrapperRef = (0, $6ZdRe$react.useRef)(null);
301
303
  const element = (0, $515e46363124517b$export$93e1bc7222cfbdc8)(id, 'cardNumber', wrapperRef, {
302
304
  'aria-label': ariaLabel,
@@ -312,6 +314,7 @@ const $89a8c5992dc7cf9a$var$CardNumberElementC = ({ 'aria-label': ariaLabel, aut
312
314
  skipLuhnValidation: skipLuhnValidation,
313
315
  style: style,
314
316
  targetId: id,
317
+ title: title,
315
318
  validateOnChange: validateOnChange,
316
319
  value: value
317
320
  }, bt, elementRef, valueRef);
@@ -337,7 +340,7 @@ const $89a8c5992dc7cf9a$export$a2311b18160d2f3f = /*#__PURE__*/ (0, ($parcel$int
337
340
 
338
341
 
339
342
 
340
- const $a598ed1fc49faa5f$var$CardExpirationDateElementC = ({ 'aria-label': ariaLabel, autoComplete: autoComplete, bt: bt, copyIconStyles: copyIconStyles, disabled: disabled, elementRef: elementRef, enableCopy: enableCopy, id: id, inputMode: inputMode, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown, onReady: onReady, placeholder: placeholder, readOnly: readOnly, style: style, validateOnChange: validateOnChange, value: value, valueRef: valueRef })=>{
343
+ const $a598ed1fc49faa5f$var$CardExpirationDateElementC = ({ 'aria-label': ariaLabel, autoComplete: autoComplete, bt: bt, copyIconStyles: copyIconStyles, disabled: disabled, elementRef: elementRef, enableCopy: enableCopy, id: id, inputMode: inputMode, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown, onReady: onReady, placeholder: placeholder, readOnly: readOnly, style: style, title: title, validateOnChange: validateOnChange, value: value, valueRef: valueRef })=>{
341
344
  const wrapperRef = (0, $6ZdRe$react.useRef)(null);
342
345
  const element = (0, $515e46363124517b$export$93e1bc7222cfbdc8)(id, 'cardExpirationDate', wrapperRef, {
343
346
  'aria-label': ariaLabel,
@@ -350,6 +353,7 @@ const $a598ed1fc49faa5f$var$CardExpirationDateElementC = ({ 'aria-label': ariaLa
350
353
  readOnly: readOnly,
351
354
  style: style,
352
355
  targetId: id,
356
+ title: title,
353
357
  validateOnChange: validateOnChange,
354
358
  value: value
355
359
  }, bt, elementRef, valueRef);
@@ -375,7 +379,7 @@ const $a598ed1fc49faa5f$export$d5128efc3cebc889 = /*#__PURE__*/ (0, ($parcel$int
375
379
 
376
380
 
377
381
 
378
- const $9bb5cbc1cc445953$var$CardVerificationCodeElementC = ({ 'aria-label': ariaLabel, autoComplete: autoComplete, bt: bt, cardBrand: cardBrand, copyIconStyles: copyIconStyles, disabled: disabled, elementRef: elementRef, enableCopy: enableCopy, id: id, inputMode: inputMode, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown, onReady: onReady, placeholder: placeholder, readOnly: readOnly, style: style, validateOnChange: validateOnChange, value: value, valueRef: valueRef })=>{
382
+ const $9bb5cbc1cc445953$var$CardVerificationCodeElementC = ({ 'aria-label': ariaLabel, autoComplete: autoComplete, bt: bt, cardBrand: cardBrand, copyIconStyles: copyIconStyles, disabled: disabled, elementRef: elementRef, enableCopy: enableCopy, id: id, inputMode: inputMode, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown, onReady: onReady, placeholder: placeholder, readOnly: readOnly, style: style, title: title, validateOnChange: validateOnChange, value: value, valueRef: valueRef })=>{
379
383
  const wrapperRef = (0, $6ZdRe$react.useRef)(null);
380
384
  const element = (0, $515e46363124517b$export$93e1bc7222cfbdc8)(id, 'cardVerificationCode', wrapperRef, {
381
385
  'aria-label': ariaLabel,
@@ -389,6 +393,7 @@ const $9bb5cbc1cc445953$var$CardVerificationCodeElementC = ({ 'aria-label': aria
389
393
  readOnly: readOnly,
390
394
  style: style,
391
395
  targetId: id,
396
+ title: title,
392
397
  validateOnChange: validateOnChange,
393
398
  value: value
394
399
  }, bt, elementRef, valueRef);
package/module/module.js CHANGED
@@ -180,7 +180,7 @@ const $1b6d06f13820d117$export$b6487193f4d880e0 = (eventType, element, listener)
180
180
  ]);
181
181
 
182
182
 
183
- const $22a85849b67e3ab0$var$CardElementC = ({ autoComplete: autoComplete, bt: bt, cardTypes: cardTypes, copyIconStyles: copyIconStyles, disabled: disabled, elementRef: elementRef, enableCopy: enableCopy, id: id, inputMode: inputMode, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown, onReady: onReady, placeholder: placeholder, readOnly: readOnly, skipLuhnValidation: skipLuhnValidation, style: style, validateOnChange: validateOnChange, value: value })=>{
183
+ const $22a85849b67e3ab0$var$CardElementC = ({ autoComplete: autoComplete, bt: bt, cardTypes: cardTypes, copyIconStyles: copyIconStyles, disabled: disabled, elementRef: elementRef, enableCopy: enableCopy, id: id, inputMode: inputMode, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown, onReady: onReady, placeholder: placeholder, readOnly: readOnly, skipLuhnValidation: skipLuhnValidation, style: style, title: title, validateOnChange: validateOnChange, value: value })=>{
184
184
  const wrapperRef = (0, $gb0K4$useRef)(null);
185
185
  const element = (0, $001f9ef7a572da43$export$93e1bc7222cfbdc8)(id, 'card', wrapperRef, {
186
186
  autoComplete: autoComplete,
@@ -193,6 +193,7 @@ const $22a85849b67e3ab0$var$CardElementC = ({ autoComplete: autoComplete, bt: bt
193
193
  readOnly: readOnly,
194
194
  skipLuhnValidation: skipLuhnValidation,
195
195
  style: style,
196
+ title: title,
196
197
  validateOnChange: validateOnChange,
197
198
  value: value
198
199
  }, bt, elementRef);
@@ -219,7 +220,7 @@ function CardElement(props, ref) {
219
220
 
220
221
 
221
222
 
222
- const $098244fc1ecf3b22$var$TextElementC = ({ 'aria-label': ariaLabel, autoComplete: autoComplete, bt: bt, disabled: disabled, elementRef: elementRef, id: id, inputMode: inputMode, mask: mask, maxLength: maxLength, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown, onReady: onReady, password: password, placeholder: placeholder, readOnly: readOnly, style: style, transform: transform, validateOnChange: validateOnChange, validation: validation, value: value, valueRef: valueRef })=>{
223
+ const $098244fc1ecf3b22$var$TextElementC = ({ 'aria-label': ariaLabel, autoComplete: autoComplete, bt: bt, disabled: disabled, elementRef: elementRef, id: id, inputMode: inputMode, mask: mask, maxLength: maxLength, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown, onReady: onReady, password: password, placeholder: placeholder, readOnly: readOnly, style: style, title: title, transform: transform, validateOnChange: validateOnChange, validation: validation, value: value, valueRef: valueRef })=>{
223
224
  const wrapperRef = (0, $gb0K4$useRef)(null);
224
225
  const element = (0, $001f9ef7a572da43$export$93e1bc7222cfbdc8)(id, 'text', wrapperRef, {
225
226
  'aria-label': ariaLabel,
@@ -233,6 +234,7 @@ const $098244fc1ecf3b22$var$TextElementC = ({ 'aria-label': ariaLabel, autoCompl
233
234
  readOnly: readOnly,
234
235
  style: style,
235
236
  targetId: id,
237
+ title: title,
236
238
  transform: transform,
237
239
  validateOnChange: validateOnChange,
238
240
  validation: validation,
@@ -261,7 +263,7 @@ function TextElement(props, ref) {
261
263
 
262
264
 
263
265
 
264
- const $c9d0638264a6246e$var$CardNumberElementC = ({ 'aria-label': ariaLabel, autoComplete: autoComplete, bt: bt, cardTypes: cardTypes, copyIconStyles: copyIconStyles, disabled: disabled, elementRef: elementRef, enableCopy: enableCopy, iconPosition: iconPosition, id: id, inputMode: inputMode, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown, onReady: onReady, placeholder: placeholder, readOnly: readOnly, skipLuhnValidation: skipLuhnValidation, style: style, validateOnChange: validateOnChange, value: value, valueRef: valueRef })=>{
266
+ const $c9d0638264a6246e$var$CardNumberElementC = ({ 'aria-label': ariaLabel, autoComplete: autoComplete, bt: bt, cardTypes: cardTypes, copyIconStyles: copyIconStyles, disabled: disabled, elementRef: elementRef, enableCopy: enableCopy, iconPosition: iconPosition, id: id, inputMode: inputMode, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown, onReady: onReady, placeholder: placeholder, readOnly: readOnly, skipLuhnValidation: skipLuhnValidation, style: style, title: title, validateOnChange: validateOnChange, value: value, valueRef: valueRef })=>{
265
267
  const wrapperRef = (0, $gb0K4$useRef)(null);
266
268
  const element = (0, $001f9ef7a572da43$export$93e1bc7222cfbdc8)(id, 'cardNumber', wrapperRef, {
267
269
  'aria-label': ariaLabel,
@@ -277,6 +279,7 @@ const $c9d0638264a6246e$var$CardNumberElementC = ({ 'aria-label': ariaLabel, aut
277
279
  skipLuhnValidation: skipLuhnValidation,
278
280
  style: style,
279
281
  targetId: id,
282
+ title: title,
280
283
  validateOnChange: validateOnChange,
281
284
  value: value
282
285
  }, bt, elementRef, valueRef);
@@ -302,7 +305,7 @@ const $c9d0638264a6246e$export$a2311b18160d2f3f = /*#__PURE__*/ (0, $gb0K4$react
302
305
 
303
306
 
304
307
 
305
- const $b04bbbda03b8923f$var$CardExpirationDateElementC = ({ 'aria-label': ariaLabel, autoComplete: autoComplete, bt: bt, copyIconStyles: copyIconStyles, disabled: disabled, elementRef: elementRef, enableCopy: enableCopy, id: id, inputMode: inputMode, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown, onReady: onReady, placeholder: placeholder, readOnly: readOnly, style: style, validateOnChange: validateOnChange, value: value, valueRef: valueRef })=>{
308
+ const $b04bbbda03b8923f$var$CardExpirationDateElementC = ({ 'aria-label': ariaLabel, autoComplete: autoComplete, bt: bt, copyIconStyles: copyIconStyles, disabled: disabled, elementRef: elementRef, enableCopy: enableCopy, id: id, inputMode: inputMode, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown, onReady: onReady, placeholder: placeholder, readOnly: readOnly, style: style, title: title, validateOnChange: validateOnChange, value: value, valueRef: valueRef })=>{
306
309
  const wrapperRef = (0, $gb0K4$useRef)(null);
307
310
  const element = (0, $001f9ef7a572da43$export$93e1bc7222cfbdc8)(id, 'cardExpirationDate', wrapperRef, {
308
311
  'aria-label': ariaLabel,
@@ -315,6 +318,7 @@ const $b04bbbda03b8923f$var$CardExpirationDateElementC = ({ 'aria-label': ariaLa
315
318
  readOnly: readOnly,
316
319
  style: style,
317
320
  targetId: id,
321
+ title: title,
318
322
  validateOnChange: validateOnChange,
319
323
  value: value
320
324
  }, bt, elementRef, valueRef);
@@ -340,7 +344,7 @@ const $b04bbbda03b8923f$export$d5128efc3cebc889 = /*#__PURE__*/ (0, $gb0K4$react
340
344
 
341
345
 
342
346
 
343
- const $6f922196262b492d$var$CardVerificationCodeElementC = ({ 'aria-label': ariaLabel, autoComplete: autoComplete, bt: bt, cardBrand: cardBrand, copyIconStyles: copyIconStyles, disabled: disabled, elementRef: elementRef, enableCopy: enableCopy, id: id, inputMode: inputMode, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown, onReady: onReady, placeholder: placeholder, readOnly: readOnly, style: style, validateOnChange: validateOnChange, value: value, valueRef: valueRef })=>{
347
+ const $6f922196262b492d$var$CardVerificationCodeElementC = ({ 'aria-label': ariaLabel, autoComplete: autoComplete, bt: bt, cardBrand: cardBrand, copyIconStyles: copyIconStyles, disabled: disabled, elementRef: elementRef, enableCopy: enableCopy, id: id, inputMode: inputMode, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown, onReady: onReady, placeholder: placeholder, readOnly: readOnly, style: style, title: title, validateOnChange: validateOnChange, value: value, valueRef: valueRef })=>{
344
348
  const wrapperRef = (0, $gb0K4$useRef)(null);
345
349
  const element = (0, $001f9ef7a572da43$export$93e1bc7222cfbdc8)(id, 'cardVerificationCode', wrapperRef, {
346
350
  'aria-label': ariaLabel,
@@ -354,6 +358,7 @@ const $6f922196262b492d$var$CardVerificationCodeElementC = ({ 'aria-label': aria
354
358
  readOnly: readOnly,
355
359
  style: style,
356
360
  targetId: id,
361
+ title: title,
357
362
  validateOnChange: validateOnChange,
358
363
  value: value
359
364
  }, bt, elementRef, valueRef);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@basis-theory/react-elements",
3
- "version": "1.13.1",
3
+ "version": "1.14.1",
4
4
  "repository": "https://github.com/basis-theory/react-elements",
5
5
  "license": "Apache-2.0",
6
6
  "author": {
@@ -30,7 +30,7 @@
30
30
  "tag": "latest"
31
31
  },
32
32
  "dependencies": {
33
- "@basis-theory/web-elements": "1.13.1"
33
+ "@basis-theory/web-elements": "1.14.1"
34
34
  },
35
35
  "peerDependencies": {
36
36
  "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
package/types/index.d.ts CHANGED
@@ -187,6 +187,7 @@ export interface SanitizedElementOptions {
187
187
  skipLuhnValidation?: boolean;
188
188
  style?: ElementStyle;
189
189
  targetId?: string;
190
+ title?: string;
190
191
  transform?: [RegExp, string] | null;
191
192
  validateOnChange?: boolean;
192
193
  validation?: RegExp;
@@ -217,27 +218,33 @@ export interface CardExpirationDateValue<T extends ElementValueType> {
217
218
  month: T extends 'reference' ? DataElementReference : number;
218
219
  year: T extends 'reference' ? DataElementReference : number;
219
220
  }
220
- export type CreateCardElementOptions = CustomizableElementOptions & Pick<ElementOptions, 'cardTypes' | 'skipLuhnValidation'> & {
221
+ export interface CardElementAutoComplete {
222
+ number: AutoCompleteValue;
223
+ expirationDate: AutoCompleteValue;
224
+ csc: AutoCompleteValue;
225
+ }
226
+ export type CreateCardElementOptions = Omit<CustomizableElementOptions, 'autoComplete'> & Pick<ElementOptions, 'cardTypes' | 'skipLuhnValidation' | 'title'> & {
227
+ autoComplete?: CardElementAutoComplete;
221
228
  placeholder?: CardElementPlaceholder;
222
229
  value?: CardElementValue<'static'>;
223
230
  };
224
231
  export type UpdateCardElementOptions = Omit<CreateCardElementOptions, 'validateOnChange' | 'enableCopy'>;
225
- export type CreateTextElementOptions = CustomizableElementOptions & Pick<ElementOptions, 'placeholder' | 'mask' | 'maxLength' | 'password' | 'validation'> & TransformOption & Required<Pick<ElementOptions, 'targetId'>> & {
232
+ export type CreateTextElementOptions = CustomizableElementOptions & Pick<ElementOptions, 'placeholder' | 'mask' | 'maxLength' | 'password' | 'validation' | 'title'> & TransformOption & Required<Pick<ElementOptions, 'targetId'>> & {
226
233
  'aria-label'?: string;
227
234
  value?: string;
228
235
  };
229
236
  export type UpdateTextElementOptions = Omit<CreateTextElementOptions, 'targetId' | 'mask' | 'validateOnChange'>;
230
- export type CreateCardNumberElementOptions = CustomizableElementOptions & Pick<ElementOptions, 'placeholder' | 'iconPosition' | 'cardTypes' | 'skipLuhnValidation'> & Required<Pick<ElementOptions, 'targetId'>> & {
237
+ export type CreateCardNumberElementOptions = CustomizableElementOptions & Pick<ElementOptions, 'placeholder' | 'iconPosition' | 'cardTypes' | 'skipLuhnValidation' | 'title'> & Required<Pick<ElementOptions, 'targetId'>> & {
231
238
  'aria-label'?: string;
232
239
  value?: string;
233
240
  };
234
241
  export type UpdateCardNumberElementOptions = Omit<CreateCardNumberElementOptions, 'targetId' | 'validateOnChange' | 'enableCopy'>;
235
- export type CreateCardExpirationDateElementOptions = CustomizableElementOptions & Pick<ElementOptions, 'placeholder'> & Required<Pick<ElementOptions, 'targetId'>> & {
242
+ export type CreateCardExpirationDateElementOptions = CustomizableElementOptions & Pick<ElementOptions, 'title' | 'placeholder'> & Required<Pick<ElementOptions, 'targetId'>> & {
236
243
  'aria-label'?: string;
237
244
  value?: CardExpirationDateValue<'static'> | string;
238
245
  };
239
246
  export type UpdateCardExpirationDateElementOptions = Omit<CreateCardExpirationDateElementOptions, 'targetId' | 'validateOnChange' | 'enableCopy'>;
240
- export type CreateCardVerificationCodeElementOptions = CustomizableElementOptions & Pick<ElementOptions, 'placeholder' | 'cardBrand'> & Required<Pick<ElementOptions, 'targetId'>> & {
247
+ export type CreateCardVerificationCodeElementOptions = CustomizableElementOptions & Pick<ElementOptions, 'placeholder' | 'title' | 'cardBrand'> & Required<Pick<ElementOptions, 'targetId'>> & {
241
248
  'aria-label'?: string;
242
249
  value?: string;
243
250
  };
@@ -579,6 +586,7 @@ export interface CardElementProps {
579
586
  readOnly?: boolean;
580
587
  skipLuhnValidation?: boolean;
581
588
  style?: ElementStyle;
589
+ title?: string;
582
590
  validateOnChange?: boolean;
583
591
  value?: CardElementValue<'static'>;
584
592
  }
@@ -599,6 +607,7 @@ interface BaseTextElementProps {
599
607
  placeholder?: string;
600
608
  readOnly?: boolean;
601
609
  style?: ElementStyle;
610
+ title?: string;
602
611
  transform?: RegExp | [RegExp, string?];
603
612
  validateOnChange?: boolean;
604
613
  validation?: RegExp;
@@ -635,6 +644,7 @@ export interface CardNumberElementProps {
635
644
  readOnly?: boolean;
636
645
  skipLuhnValidation?: boolean;
637
646
  style?: ElementStyle;
647
+ title?: string;
638
648
  validateOnChange?: boolean;
639
649
  value?: string;
640
650
  valueRef?: MutableRefObject<ICardNumberElement | null>;
@@ -657,6 +667,7 @@ export interface CardExpirationDateElementProps {
657
667
  placeholder?: string;
658
668
  readOnly?: boolean;
659
669
  style?: ElementStyle;
670
+ title?: string;
660
671
  validateOnChange?: boolean;
661
672
  value?: CardExpirationDateValue<'static'> | string;
662
673
  valueRef?: MutableRefObject<ICardExpirationDateElement | null>;
@@ -680,6 +691,7 @@ export interface CardVerificationCodeElementProps {
680
691
  placeholder?: string;
681
692
  readOnly?: boolean;
682
693
  style?: ElementStyle;
694
+ title?: string;
683
695
  validateOnChange?: boolean;
684
696
  value?: string;
685
697
  valueRef?: MutableRefObject<ICardVerificationCodeElement | null>;