@thecb/components 9.2.0-beta.0 → 9.2.0-beta.10
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.
- package/dist/index.cjs.js +99 -3
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.d.ts +115 -60
- package/dist/index.esm.js +99 -4
- package/dist/index.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/components/molecules/index.d.ts +1 -0
- package/src/components/molecules/index.js +1 -0
- package/src/components/molecules/toast-notification/ToastNotification.js +17 -31
- package/src/components/molecules/toast-notification/ToastNotification.stories.js +43 -12
- package/src/components/molecules/toast-notification/index.d.ts +18 -1
- package/src/constants/colors.d.ts +1 -0
- package/src/constants/colors.js +3 -1
- package/src/index.d.ts +2 -1
- package/src/types/common/ToastVariants.ts +6 -0
- package/src/types/common/index.ts +1 -0
- package/src/util/hooks/index.js +1 -0
- package/src/util/hooks/use-toast-notification/index.d.ts +23 -0
- package/src/util/hooks/use-toast-notification/index.js +38 -0
- package/src/util/index.js +9 -1
package/dist/index.d.ts
CHANGED
|
@@ -99,6 +99,7 @@ declare const COSMOS_RED: Color;
|
|
|
99
99
|
declare const BLUSH_RED: Color;
|
|
100
100
|
|
|
101
101
|
declare const ERROR_COLOR: Color;
|
|
102
|
+
declare const ERROR_BACKGROUND_COLOR: Color;
|
|
102
103
|
|
|
103
104
|
declare const ALERT_COLORS: {
|
|
104
105
|
warn: ColorSet;
|
|
@@ -203,6 +204,7 @@ declare const colors_d_FANTASY_RED: typeof FANTASY_RED;
|
|
|
203
204
|
declare const colors_d_COSMOS_RED: typeof COSMOS_RED;
|
|
204
205
|
declare const colors_d_BLUSH_RED: typeof BLUSH_RED;
|
|
205
206
|
declare const colors_d_ERROR_COLOR: typeof ERROR_COLOR;
|
|
207
|
+
declare const colors_d_ERROR_BACKGROUND_COLOR: typeof ERROR_BACKGROUND_COLOR;
|
|
206
208
|
declare const colors_d_ALERT_COLORS: typeof ALERT_COLORS;
|
|
207
209
|
declare const colors_d_PILL_COLORS: typeof PILL_COLORS;
|
|
208
210
|
declare namespace colors_d {
|
|
@@ -282,6 +284,7 @@ declare namespace colors_d {
|
|
|
282
284
|
colors_d_COSMOS_RED as COSMOS_RED,
|
|
283
285
|
colors_d_BLUSH_RED as BLUSH_RED,
|
|
284
286
|
colors_d_ERROR_COLOR as ERROR_COLOR,
|
|
287
|
+
colors_d_ERROR_BACKGROUND_COLOR as ERROR_BACKGROUND_COLOR,
|
|
285
288
|
colors_d_ALERT_COLORS as ALERT_COLORS,
|
|
286
289
|
colors_d_PILL_COLORS as PILL_COLORS,
|
|
287
290
|
};
|
|
@@ -295,6 +298,101 @@ declare namespace index_d {
|
|
|
295
298
|
};
|
|
296
299
|
}
|
|
297
300
|
|
|
301
|
+
interface Field {
|
|
302
|
+
hasErrors: boolean;
|
|
303
|
+
dirty: boolean;
|
|
304
|
+
rawValue: string;
|
|
305
|
+
}
|
|
306
|
+
|
|
307
|
+
interface ReduxAction<T = string, P = {}> {
|
|
308
|
+
type: T;
|
|
309
|
+
payload?: P;
|
|
310
|
+
}
|
|
311
|
+
|
|
312
|
+
/**
|
|
313
|
+
* These types should be moved to and referenced from redux-freeform if it implements TypeScript
|
|
314
|
+
*/
|
|
315
|
+
|
|
316
|
+
type ValidatorFn = (value: string) => boolean;
|
|
317
|
+
|
|
318
|
+
interface FieldActionPayload {
|
|
319
|
+
fieldName: string;
|
|
320
|
+
value?: string;
|
|
321
|
+
validator?: ValidatorFn;
|
|
322
|
+
}
|
|
323
|
+
|
|
324
|
+
type SetAction = ReduxAction<"field/SET", FieldActionPayload>;
|
|
325
|
+
type AddValidatorAction = ReduxAction<
|
|
326
|
+
"field/ADD_VALIDATOR",
|
|
327
|
+
FieldActionPayload
|
|
328
|
+
>;
|
|
329
|
+
type RemoveValidatorAction = ReduxAction<
|
|
330
|
+
"field/REMOVE_VALIDATOR",
|
|
331
|
+
FieldActionPayload
|
|
332
|
+
>;
|
|
333
|
+
type ClearAction = ReduxAction<"field/CLEAR">;
|
|
334
|
+
|
|
335
|
+
interface FieldActions {
|
|
336
|
+
set?: (fieldName: string) => (value: string) => SetAction;
|
|
337
|
+
addValidator?: (
|
|
338
|
+
fieldName: string
|
|
339
|
+
) => (validator: ValidatorFn) => AddValidatorAction;
|
|
340
|
+
removeValidator?: (
|
|
341
|
+
fieldName: string
|
|
342
|
+
) => (validator: ValidatorFn) => RemoveValidatorAction;
|
|
343
|
+
clear?: () => ClearAction;
|
|
344
|
+
}
|
|
345
|
+
|
|
346
|
+
interface FormSelectOption {
|
|
347
|
+
text?: string;
|
|
348
|
+
value?: string;
|
|
349
|
+
}
|
|
350
|
+
|
|
351
|
+
interface SearchableSelectOption {
|
|
352
|
+
name?: string;
|
|
353
|
+
value?: string;
|
|
354
|
+
}
|
|
355
|
+
|
|
356
|
+
interface ErrorMessageDictionary {
|
|
357
|
+
[fieldName: string]: string;
|
|
358
|
+
}
|
|
359
|
+
|
|
360
|
+
enum ToastVariants {
|
|
361
|
+
ERROR = "error",
|
|
362
|
+
SUCCESS = "success",
|
|
363
|
+
}
|
|
364
|
+
|
|
365
|
+
interface UseToastOptions {
|
|
366
|
+
timeout?: number;
|
|
367
|
+
}
|
|
368
|
+
|
|
369
|
+
interface UseToastResult {
|
|
370
|
+
isToastOpen: boolean;
|
|
371
|
+
toastVariant: "" | ToastVariants;
|
|
372
|
+
toastMessage: string;
|
|
373
|
+
showToast: ({
|
|
374
|
+
message,
|
|
375
|
+
variant,
|
|
376
|
+
}: {
|
|
377
|
+
message: string;
|
|
378
|
+
variant: ToastVariants;
|
|
379
|
+
}) => void;
|
|
380
|
+
hideToast: () => void;
|
|
381
|
+
}
|
|
382
|
+
|
|
383
|
+
declare function useToastNotification(
|
|
384
|
+
options?: UseToastOptions
|
|
385
|
+
): UseToastResult;
|
|
386
|
+
|
|
387
|
+
|
|
388
|
+
|
|
389
|
+
declare const index_useToastNotification: typeof useToastNotification;
|
|
390
|
+
declare namespace index {
|
|
391
|
+
export {
|
|
392
|
+
index_useToastNotification as useToastNotification,
|
|
393
|
+
};
|
|
394
|
+
}
|
|
395
|
+
|
|
298
396
|
type Expand<T> = T extends infer O ? { [K in keyof O]: O[K] } : never;
|
|
299
397
|
|
|
300
398
|
interface AlertProps {
|
|
@@ -379,65 +477,6 @@ interface CardProps {
|
|
|
379
477
|
declare const Card: React.FC<Expand<CardProps> &
|
|
380
478
|
React.HTMLAttributes<HTMLElement>>;
|
|
381
479
|
|
|
382
|
-
interface Field {
|
|
383
|
-
hasErrors: boolean;
|
|
384
|
-
dirty: boolean;
|
|
385
|
-
rawValue: string;
|
|
386
|
-
}
|
|
387
|
-
|
|
388
|
-
interface ReduxAction<T = string, P = {}> {
|
|
389
|
-
type: T;
|
|
390
|
-
payload?: P;
|
|
391
|
-
}
|
|
392
|
-
|
|
393
|
-
/**
|
|
394
|
-
* These types should be moved to and referenced from redux-freeform if it implements TypeScript
|
|
395
|
-
*/
|
|
396
|
-
|
|
397
|
-
type ValidatorFn = (value: string) => boolean;
|
|
398
|
-
|
|
399
|
-
interface FieldActionPayload {
|
|
400
|
-
fieldName: string;
|
|
401
|
-
value?: string;
|
|
402
|
-
validator?: ValidatorFn;
|
|
403
|
-
}
|
|
404
|
-
|
|
405
|
-
type SetAction = ReduxAction<"field/SET", FieldActionPayload>;
|
|
406
|
-
type AddValidatorAction = ReduxAction<
|
|
407
|
-
"field/ADD_VALIDATOR",
|
|
408
|
-
FieldActionPayload
|
|
409
|
-
>;
|
|
410
|
-
type RemoveValidatorAction = ReduxAction<
|
|
411
|
-
"field/REMOVE_VALIDATOR",
|
|
412
|
-
FieldActionPayload
|
|
413
|
-
>;
|
|
414
|
-
type ClearAction = ReduxAction<"field/CLEAR">;
|
|
415
|
-
|
|
416
|
-
interface FieldActions {
|
|
417
|
-
set?: (fieldName: string) => (value: string) => SetAction;
|
|
418
|
-
addValidator?: (
|
|
419
|
-
fieldName: string
|
|
420
|
-
) => (validator: ValidatorFn) => AddValidatorAction;
|
|
421
|
-
removeValidator?: (
|
|
422
|
-
fieldName: string
|
|
423
|
-
) => (validator: ValidatorFn) => RemoveValidatorAction;
|
|
424
|
-
clear?: () => ClearAction;
|
|
425
|
-
}
|
|
426
|
-
|
|
427
|
-
interface FormSelectOption {
|
|
428
|
-
text?: string;
|
|
429
|
-
value?: string;
|
|
430
|
-
}
|
|
431
|
-
|
|
432
|
-
interface SearchableSelectOption {
|
|
433
|
-
name?: string;
|
|
434
|
-
value?: string;
|
|
435
|
-
}
|
|
436
|
-
|
|
437
|
-
interface ErrorMessageDictionary {
|
|
438
|
-
[fieldName: string]: string;
|
|
439
|
-
}
|
|
440
|
-
|
|
441
480
|
interface FormInputProps {
|
|
442
481
|
extraStyles?: string;
|
|
443
482
|
field?: Field;
|
|
@@ -1062,6 +1101,22 @@ interface RadioGroupProps {
|
|
|
1062
1101
|
declare const RadioGroup: React.FC<Expand<RadioGroupProps> &
|
|
1063
1102
|
React.HTMLAttributes<HTMLElement>>;
|
|
1064
1103
|
|
|
1104
|
+
interface ToastNotificationProps {
|
|
1105
|
+
variant?: string;
|
|
1106
|
+
message: string;
|
|
1107
|
+
toastOpen: boolean;
|
|
1108
|
+
closeToastNotification: (event?: React.MouseEvent<HTMLElement>) => void;
|
|
1109
|
+
extraStyles?: string;
|
|
1110
|
+
minWidth?: string;
|
|
1111
|
+
maxWidth?: string;
|
|
1112
|
+
height?: string;
|
|
1113
|
+
childGap?: string;
|
|
1114
|
+
backgroundColor?: string;
|
|
1115
|
+
}
|
|
1116
|
+
|
|
1117
|
+
declare const ToastNotification: React.FC<Expand<ToastNotificationProps> &
|
|
1118
|
+
React.HTMLAttributes<HTMLElement>>;
|
|
1119
|
+
|
|
1065
1120
|
interface DefaultPageTemplateProps {
|
|
1066
1121
|
content: JSX.Element;
|
|
1067
1122
|
header?: JSX.Element;
|
|
@@ -1076,5 +1131,5 @@ interface DefaultPageTemplateProps {
|
|
|
1076
1131
|
declare const DefaultPageTemplate: React.FC<Expand<DefaultPageTemplateProps> &
|
|
1077
1132
|
React.HTMLAttributes<HTMLElement>>;
|
|
1078
1133
|
|
|
1079
|
-
export { AddValidatorAction, Alert, AlertProps, ArrowDownCircleIconSmall, ArrowDownCircleIconSmallProps, ArrowLeftCircleIconMedium, ArrowLeftCircleIconMediumProps, ArrowLeftCircleIconSmall, ArrowLeftCircleIconSmallProps, ArrowRightCircleIconSmall, ArrowRightCircleIconSmallProps, ArrowUpCircleIconSmall, ArrowUpCircleIconSmallProps, BankIconLarge, BankIconLargeProps, Box, BoxProps, ButtonWithAction, ButtonWithActionProps, ButtonWithLink, ButtonWithLinkProps, Card, CardProps, Center, CenterProps, ChargebackIconMedium, ChargebackIconMediumProps, ChargebackIconSmall, ChargebackIconSmallProps, ChargebackReversalIconMedium, ChargebackReversalIconMediumProps, ChargebackReversalIconSmall, ChargebackReversalIconSmallProps, ClearAction, Cluster, ClusterProps, CollapsibleSection, CollapsibleSectionProps, Copyable, CopyableProps, Cover, CoverProps, DefaultPageTemplate, DefaultPageTemplateProps, EditableTable, EditableTableProps, ErrorMessageDictionary, ExternalLink, ExternalLinkProps, Field, FieldActionPayload, FieldActions, FooterWithSubfooter, FooterWithSubfooterProps, FormInput, FormInputProps, FormSelect, FormSelectOption, FormSelectProps, GuidedCheckoutImage, HistoryIconSmall, InternalLink, InternalLinkProps, KioskImage, Loading, LoadingProps, NavFooter, NavFooterProps, NavHeader, NavHeaderProps, NavTabs, NavTabsProps, Paragraph, ParagraphProps, PointOfSaleImage, Popover, PopoverProps, ProfileImage, RadioGroup, RadioGroupProps, ReduxAction, RefundIconMedium, RefundIconMediumProps, RefundIconSmall, RefundIconSmallProps, RemoveValidatorAction, RevenueManagementImage, SearchableSelect, SearchableSelectOption, SearchableSelectProps, SetAction, Spinner, SpinnerProps, Stack, StackProps, StandardCheckoutImage, SuccessfulIconMedium, SuccessfulIconMediumProps, SuccessfulIconSmall, SuccessfulIconSmallProps, Switcher, SwitcherProps, Table, TableBody, TableBodyProps, TableCell, TableCellProps, TableHead, TableHeadProps, TableHeading, TableHeadingProps, TableListItem, TableListItemProps, TableProps, TableRow, TableRowProps, Text, TextProps, Title, TitleProps, ValidatorFn, XCircleIconMedium, XCircleIconMediumProps, XCircleIconSmall, XCircleIconSmallProps, index_d as constants };
|
|
1134
|
+
export { AddValidatorAction, Alert, AlertProps, ArrowDownCircleIconSmall, ArrowDownCircleIconSmallProps, ArrowLeftCircleIconMedium, ArrowLeftCircleIconMediumProps, ArrowLeftCircleIconSmall, ArrowLeftCircleIconSmallProps, ArrowRightCircleIconSmall, ArrowRightCircleIconSmallProps, ArrowUpCircleIconSmall, ArrowUpCircleIconSmallProps, BankIconLarge, BankIconLargeProps, Box, BoxProps, ButtonWithAction, ButtonWithActionProps, ButtonWithLink, ButtonWithLinkProps, Card, CardProps, Center, CenterProps, ChargebackIconMedium, ChargebackIconMediumProps, ChargebackIconSmall, ChargebackIconSmallProps, ChargebackReversalIconMedium, ChargebackReversalIconMediumProps, ChargebackReversalIconSmall, ChargebackReversalIconSmallProps, ClearAction, Cluster, ClusterProps, CollapsibleSection, CollapsibleSectionProps, Copyable, CopyableProps, Cover, CoverProps, DefaultPageTemplate, DefaultPageTemplateProps, EditableTable, EditableTableProps, ErrorMessageDictionary, ExternalLink, ExternalLinkProps, Field, FieldActionPayload, FieldActions, FooterWithSubfooter, FooterWithSubfooterProps, FormInput, FormInputProps, FormSelect, FormSelectOption, FormSelectProps, GuidedCheckoutImage, HistoryIconSmall, InternalLink, InternalLinkProps, KioskImage, Loading, LoadingProps, NavFooter, NavFooterProps, NavHeader, NavHeaderProps, NavTabs, NavTabsProps, Paragraph, ParagraphProps, PointOfSaleImage, Popover, PopoverProps, ProfileImage, RadioGroup, RadioGroupProps, ReduxAction, RefundIconMedium, RefundIconMediumProps, RefundIconSmall, RefundIconSmallProps, RemoveValidatorAction, RevenueManagementImage, SearchableSelect, SearchableSelectOption, SearchableSelectProps, SetAction, Spinner, SpinnerProps, Stack, StackProps, StandardCheckoutImage, SuccessfulIconMedium, SuccessfulIconMediumProps, SuccessfulIconSmall, SuccessfulIconSmallProps, Switcher, SwitcherProps, Table, TableBody, TableBodyProps, TableCell, TableCellProps, TableHead, TableHeadProps, TableHeading, TableHeadingProps, TableListItem, TableListItemProps, TableProps, TableRow, TableRowProps, Text, TextProps, Title, TitleProps, ToastNotification, ToastNotificationProps, ToastVariants, ValidatorFn, XCircleIconMedium, XCircleIconMediumProps, XCircleIconSmall, XCircleIconSmallProps, index_d as constants, index as hooks };
|
|
1080
1135
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.esm.js
CHANGED
|
@@ -5043,7 +5043,8 @@ var FANTASY_RED = "#FCF4F4";
|
|
|
5043
5043
|
var COSMOS_RED = "#FFD0D3";
|
|
5044
5044
|
var BLUSH_RED = "#FFF0F5"; // Second level color constants
|
|
5045
5045
|
|
|
5046
|
-
var ERROR_COLOR = RAZZMATAZZ_RED;
|
|
5046
|
+
var ERROR_COLOR = RAZZMATAZZ_RED;
|
|
5047
|
+
var ERROR_BACKGROUND_COLOR = "#FFF4F8"; // These colors are sequestered so that the alert component can reference them // by type of alert
|
|
5047
5048
|
|
|
5048
5049
|
var ALERT_COLORS = {
|
|
5049
5050
|
warn: {
|
|
@@ -5174,7 +5175,8 @@ var colors = /*#__PURE__*/Object.freeze({
|
|
|
5174
5175
|
RASPBERRY: RASPBERRY,
|
|
5175
5176
|
ALERT_COLORS: ALERT_COLORS,
|
|
5176
5177
|
PILL_COLORS: PILL_COLORS,
|
|
5177
|
-
ERROR_COLOR: ERROR_COLOR
|
|
5178
|
+
ERROR_COLOR: ERROR_COLOR,
|
|
5179
|
+
ERROR_BACKGROUND_COLOR: ERROR_BACKGROUND_COLOR
|
|
5178
5180
|
});
|
|
5179
5181
|
|
|
5180
5182
|
var TextSpan = styled.span.withConfig({
|
|
@@ -25576,6 +25578,53 @@ var useOutsideClickHook = function useOutsideClickHook(handler) {
|
|
|
25576
25578
|
return ref;
|
|
25577
25579
|
};
|
|
25578
25580
|
|
|
25581
|
+
var initialToastState = {
|
|
25582
|
+
isOpen: false,
|
|
25583
|
+
variant: "",
|
|
25584
|
+
message: ""
|
|
25585
|
+
};
|
|
25586
|
+
|
|
25587
|
+
var useToastNotification = function useToastNotification() {
|
|
25588
|
+
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
|
25589
|
+
_ref$timeout = _ref.timeout,
|
|
25590
|
+
timeout = _ref$timeout === void 0 ? 5000 : _ref$timeout;
|
|
25591
|
+
|
|
25592
|
+
var _useState = useState(initialToastState),
|
|
25593
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
25594
|
+
toastState = _useState2[0],
|
|
25595
|
+
setToastState = _useState2[1];
|
|
25596
|
+
|
|
25597
|
+
useEffect$1(function () {
|
|
25598
|
+
if (toastState.isOpen) {
|
|
25599
|
+
setTimeout(function () {
|
|
25600
|
+
setToastState(initialToastState);
|
|
25601
|
+
}, timeout);
|
|
25602
|
+
}
|
|
25603
|
+
}, [timeout, toastState.isOpen]);
|
|
25604
|
+
|
|
25605
|
+
var showToast = function showToast(_ref2) {
|
|
25606
|
+
var message = _ref2.message,
|
|
25607
|
+
variant = _ref2.variant;
|
|
25608
|
+
return setToastState({
|
|
25609
|
+
isOpen: true,
|
|
25610
|
+
variant: variant,
|
|
25611
|
+
message: message
|
|
25612
|
+
});
|
|
25613
|
+
};
|
|
25614
|
+
|
|
25615
|
+
var hideToast = function hideToast() {
|
|
25616
|
+
return setToastState(initialToastState);
|
|
25617
|
+
};
|
|
25618
|
+
|
|
25619
|
+
return {
|
|
25620
|
+
isToastOpen: toastState.isOpen,
|
|
25621
|
+
toastVariant: toastState.variant,
|
|
25622
|
+
toastMessage: toastState.message,
|
|
25623
|
+
showToast: showToast,
|
|
25624
|
+
hideToast: hideToast
|
|
25625
|
+
};
|
|
25626
|
+
};
|
|
25627
|
+
|
|
25579
25628
|
|
|
25580
25629
|
|
|
25581
25630
|
var index$4 = /*#__PURE__*/Object.freeze({
|
|
@@ -25584,7 +25633,8 @@ var index$4 = /*#__PURE__*/Object.freeze({
|
|
|
25584
25633
|
general: general,
|
|
25585
25634
|
theme: themeUtils,
|
|
25586
25635
|
useFocusInvalidInput: useFocusInvalidInput,
|
|
25587
|
-
useOutsideClick: useOutsideClickHook
|
|
25636
|
+
useOutsideClick: useOutsideClickHook,
|
|
25637
|
+
useToastNotification: useToastNotification
|
|
25588
25638
|
});
|
|
25589
25639
|
|
|
25590
25640
|
var hoverColor$4 = "#116285";
|
|
@@ -50282,6 +50332,51 @@ var Timeout = function Timeout(_ref) {
|
|
|
50282
50332
|
|
|
50283
50333
|
var Timeout$1 = withWindowSize(Timeout);
|
|
50284
50334
|
|
|
50335
|
+
var VARIANTS = {
|
|
50336
|
+
SUCCESS: "success",
|
|
50337
|
+
ERROR: "error"
|
|
50338
|
+
};
|
|
50339
|
+
|
|
50340
|
+
var ToastNotification = function ToastNotification(_ref) {
|
|
50341
|
+
var _ref$variant = _ref.variant,
|
|
50342
|
+
variant = _ref$variant === void 0 ? VARIANTS.SUCCESS : _ref$variant,
|
|
50343
|
+
_ref$message = _ref.message,
|
|
50344
|
+
message = _ref$message === void 0 ? "" : _ref$message,
|
|
50345
|
+
toastOpen = _ref.toastOpen,
|
|
50346
|
+
closeToastNotification = _ref.closeToastNotification,
|
|
50347
|
+
extraStyles = _ref.extraStyles,
|
|
50348
|
+
_ref$minWidth = _ref.minWidth,
|
|
50349
|
+
minWidth = _ref$minWidth === void 0 ? "112px" : _ref$minWidth,
|
|
50350
|
+
_ref$maxWidth = _ref.maxWidth,
|
|
50351
|
+
maxWidth = _ref$maxWidth === void 0 ? "350px" : _ref$maxWidth,
|
|
50352
|
+
_ref$height = _ref.height,
|
|
50353
|
+
height = _ref$height === void 0 ? "56px" : _ref$height,
|
|
50354
|
+
_ref$childGap = _ref.childGap,
|
|
50355
|
+
childGap = _ref$childGap === void 0 ? "1rem" : _ref$childGap,
|
|
50356
|
+
backgroundColor = _ref.backgroundColor;
|
|
50357
|
+
return /*#__PURE__*/React.createElement(Box, {
|
|
50358
|
+
onClick: closeToastNotification,
|
|
50359
|
+
background: backgroundColor ? backgroundColor : variant === VARIANTS.SUCCESS ? HINT_GREEN : variant === "error" ? ERROR_BACKGROUND_COLOR : WHITE,
|
|
50360
|
+
minWidth: minWidth,
|
|
50361
|
+
minHeight: height && parseInt(height) < 100 ? height : "100px",
|
|
50362
|
+
height: height ? height : "auto",
|
|
50363
|
+
tabIndex: toastOpen ? "-1" : "0",
|
|
50364
|
+
padding: "0rem 1rem",
|
|
50365
|
+
borderRadius: "4px",
|
|
50366
|
+
boxShadow: "0px 4px 4px rgba(41, 42, 51, 0.15), 0px 1px 7px rgba(41, 42, 51, 0.2), 0px 7px 12px rgba(41, 42, 51, 0.15)",
|
|
50367
|
+
extraStyles: "\n display: ".concat(toastOpen ? "block" : "none", ";\n position: fixed; bottom: 4rem; left: 4rem;\n ").concat(extraStyles, ";\n cursor: pointer;\n ")
|
|
50368
|
+
}, /*#__PURE__*/React.createElement(Cluster, {
|
|
50369
|
+
align: "center",
|
|
50370
|
+
childGap: childGap
|
|
50371
|
+
}, variant === "success" && /*#__PURE__*/React.createElement(SuccessfulIconMedium, null), variant === "error" && /*#__PURE__*/React.createElement(ErroredIcon, null), /*#__PURE__*/React.createElement(Box, {
|
|
50372
|
+
padding: "1rem 0",
|
|
50373
|
+
maxWidth: maxWidth
|
|
50374
|
+
}, /*#__PURE__*/React.createElement(Paragraph$1, {
|
|
50375
|
+
weight: FONT_WEIGHT_SEMIBOLD,
|
|
50376
|
+
extraStyles: "word-break: break-word;"
|
|
50377
|
+
}, message)), /*#__PURE__*/React.createElement(IconQuitLarge, null)));
|
|
50378
|
+
};
|
|
50379
|
+
|
|
50285
50380
|
var fontWeight$9 = "600";
|
|
50286
50381
|
var fontColor$1 = WHITE;
|
|
50287
50382
|
var textAlign$1 = "left";
|
|
@@ -50654,5 +50749,5 @@ var SidebarStackContent = function SidebarStackContent(_ref) {
|
|
|
50654
50749
|
|
|
50655
50750
|
var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$U));
|
|
50656
50751
|
|
|
50657
|
-
export { AccountNumberImage, AccountsAddIcon$1 as AccountsAddIcon, AccountsIcon$1 as AccountsIcon, AccountsIconSmall$1 as AccountsIconSmall, AchReturnIcon, AddObligation$1 as AddObligation, AddressForm, Alert$1 as Alert, AllocatedIcon, AmountCallout$1 as AmountCallout, ArrowDownCircleIconSmall, ArrowLeftCircleIconMedium, ArrowLeftCircleIconSmall, ArrowRightCircleIconSmall, ArrowRightIcon, ArrowUpCircleIconSmall, AutopayIcon, AutopayOnIcon, Badge$1 as Badge, BankIcon, BankIconLarge, Banner$1 as Banner, Box, BoxWithShadow$1 as BoxWithShadow, Breadcrumbs as Breadcrumb, ButtonWithAction, ButtonWithLink, CalendarIcon, Card$1 as Card, CarrotIcon$1 as CarrotIcon, CashIcon, Center, CenterSingle$1 as CenterSingle, CenterStack$1 as CenterStack, ChangePasswordForm, ChargebackIcon, ChargebackIconMedium, ChargebackIconSmall, ChargebackReversalIcon, ChargebackReversalIconMedium, ChargebackReversalIconSmall, CheckIcon, Checkbox$1 as Checkbox, CheckboxList$1 as CheckboxList, CheckmarkIcon, ChevronIcon$1 as ChevronIcon, Cluster, CollapsibleSection$1 as CollapsibleSection, Copyable, CountryDropdown, Cover, CustomerSearchIcon, DefaultPageTemplate, Detail$1 as Detail, DisplayBox$1 as DisplayBox, DisplayCard, Dropdown$1 as Dropdown, DuplicateIcon, EditNameForm, EditableList, EditableTable, EmailForm, EmptyCartIcon$1 as EmptyCartIcon, ErroredIcon, ExternalLink, ExternalLinkIcon, FailedIcon, FindIconSmall$1 as FindIconSmall, FooterWithSubfooter$1 as FooterWithSubfooter, ForgotPasswordForm, ForgotPasswordIcon$1 as ForgotPasswordIcon, FormContainer$1 as FormContainer, FormFooterPanel$1 as FormFooterPanel, FormInput$1 as FormInput, FormInputColumn, FormInputRow, FormSelect$1 as FormSelect, FormattedAddress$1 as FormattedAddress, FormattedBankAccount$1 as FormattedBankAccount, FormattedCreditCard$1 as FormattedCreditCard, Frame, GenericCard, GenericCardLarge, GenericErrorIcon, GoToEmailIcon$1 as GoToEmailIcon, Grid, GuidedCheckoutImage, HamburgerButton, Heading$1 as Heading, HighlightTabRow$1 as HighlightTabRow, HistoryIconSmall$1 as HistoryIconSmall, IconAdd, IconQuitLarge, ImageBox, Imposter, InternalLink, Jumbo$1 as Jumbo, KioskImage, LabeledAmount$1 as LabeledAmount, LineItem$1 as LineItem, LinkCard$1 as LinkCard, Loading, LoadingLine, LoginForm, Modal$1 as Modal, Module$1 as Module, Motion, NavFooter, NavHeader, NavMenuDesktop$1 as NavMenuDesktop, NavMenuMobile$1 as NavMenuMobile, NavTabs, NoCustomerResultsIcon, NoPaymentResultsIcon, NotFoundIcon, Obligation, iconsMap as ObligationIcons, Pagination$1 as Pagination, Paragraph$1 as Paragraph, PartialAmountForm, PasswordRequirements, PaymentButtonBar, PaymentDetails$1 as PaymentDetails, PaymentFormACH, PaymentFormCard$1 as PaymentFormCard, PaymentMethodAddIcon$1 as PaymentMethodAddIcon, PaymentMethodIcon$1 as PaymentMethodIcon, PaymentSearchIcon, PaymentsIconSmall$1 as PaymentsIconSmall, PencilIcon$1 as PencilIcon, PendingIcon, PeriscopeDashboardIframe, PeriscopeFailedIcon, PhoneForm, Placeholder$1 as Placeholder, PlusCircleIcon, PointOfSaleImage, Popover$1 as Popover, ProcessingFee$1 as ProcessingFee, ProfileIcon$1 as ProfileIcon, ProfileIconSmall$1 as ProfileIconSmall, ProfileImage, PropertiesAddIcon$1 as PropertiesAddIcon, PropertiesIconSmall$1 as PropertiesIconSmall, RadioButton$2 as RadioButton, RadioButtonWithLabel$1 as RadioButtonWithLabel, RadioGroup, RadioSection$1 as RadioSection, Reel, RefundIcon, RefundIconMedium, RefundIconSmall, RegistrationForm, RejectedIcon, RejectedVelocityIcon, ResetConfirmationForm$1 as ResetConfirmationForm, ResetPasswordForm, ResetPasswordIcon, ResetPasswordSuccess, RevenueManagementImage, RoutingNumberImage, SearchIcon, SearchableSelect$1 as SearchableSelect, SettingsIconSmall$1 as SettingsIconSmall, ShoppingCartIcon, Sidebar, SidebarSingleContent$1 as SidebarSingleContent, SidebarStackContent$1 as SidebarStackContent, SolidDivider$1 as SolidDivider, Spinner$2 as Spinner, Stack, StandardCheckoutImage, FormStateDropdown as StateProvinceDropdown, StatusUnknownIcon, SuccessfulIcon, SuccessfulIconMedium, SuccessfulIconSmall, Switcher, TabSidebar$1 as TabSidebar, Table_styled as Table, TableBody_styled as TableBody, TableCell_styled as TableCell, TableHead$1 as TableHead, TableHeading_styled as TableHeading, TableListItem, TableRow$1 as TableRow, Tabs$1 as Tabs, TermsAndConditions, TermsAndConditionsModal$1 as TermsAndConditionsModal, Text$1 as Text, Timeout$1 as Timeout, TimeoutImage, Title$1 as Title, ToggleSwitch$1 as ToggleSwitch, TrashIcon$1 as TrashIcon, TypeaheadInput, VerifiedEmailIcon$1 as VerifiedEmailIcon, VoidedIcon, WalletBannerIcon$1 as WalletBannerIcon, WalletIcon$1 as WalletIcon, WalletIconSmall$1 as WalletIconSmall, WarningIconXS, WelcomeModule$1 as WelcomeModule, WorkflowTile, XCircleIconMedium, XCircleIconSmall, cardRegistry, index$5 as constants, createPartialAmountFormState, createPartialAmountFormValidators, index$4 as util, withWindowSize };
|
|
50752
|
+
export { AccountNumberImage, AccountsAddIcon$1 as AccountsAddIcon, AccountsIcon$1 as AccountsIcon, AccountsIconSmall$1 as AccountsIconSmall, AchReturnIcon, AddObligation$1 as AddObligation, AddressForm, Alert$1 as Alert, AllocatedIcon, AmountCallout$1 as AmountCallout, ArrowDownCircleIconSmall, ArrowLeftCircleIconMedium, ArrowLeftCircleIconSmall, ArrowRightCircleIconSmall, ArrowRightIcon, ArrowUpCircleIconSmall, AutopayIcon, AutopayOnIcon, Badge$1 as Badge, BankIcon, BankIconLarge, Banner$1 as Banner, Box, BoxWithShadow$1 as BoxWithShadow, Breadcrumbs as Breadcrumb, ButtonWithAction, ButtonWithLink, CalendarIcon, Card$1 as Card, CarrotIcon$1 as CarrotIcon, CashIcon, Center, CenterSingle$1 as CenterSingle, CenterStack$1 as CenterStack, ChangePasswordForm, ChargebackIcon, ChargebackIconMedium, ChargebackIconSmall, ChargebackReversalIcon, ChargebackReversalIconMedium, ChargebackReversalIconSmall, CheckIcon, Checkbox$1 as Checkbox, CheckboxList$1 as CheckboxList, CheckmarkIcon, ChevronIcon$1 as ChevronIcon, Cluster, CollapsibleSection$1 as CollapsibleSection, Copyable, CountryDropdown, Cover, CustomerSearchIcon, DefaultPageTemplate, Detail$1 as Detail, DisplayBox$1 as DisplayBox, DisplayCard, Dropdown$1 as Dropdown, DuplicateIcon, EditNameForm, EditableList, EditableTable, EmailForm, EmptyCartIcon$1 as EmptyCartIcon, ErroredIcon, ExternalLink, ExternalLinkIcon, FailedIcon, FindIconSmall$1 as FindIconSmall, FooterWithSubfooter$1 as FooterWithSubfooter, ForgotPasswordForm, ForgotPasswordIcon$1 as ForgotPasswordIcon, FormContainer$1 as FormContainer, FormFooterPanel$1 as FormFooterPanel, FormInput$1 as FormInput, FormInputColumn, FormInputRow, FormSelect$1 as FormSelect, FormattedAddress$1 as FormattedAddress, FormattedBankAccount$1 as FormattedBankAccount, FormattedCreditCard$1 as FormattedCreditCard, Frame, GenericCard, GenericCardLarge, GenericErrorIcon, GoToEmailIcon$1 as GoToEmailIcon, Grid, GuidedCheckoutImage, HamburgerButton, Heading$1 as Heading, HighlightTabRow$1 as HighlightTabRow, HistoryIconSmall$1 as HistoryIconSmall, IconAdd, IconQuitLarge, ImageBox, Imposter, InternalLink, Jumbo$1 as Jumbo, KioskImage, LabeledAmount$1 as LabeledAmount, LineItem$1 as LineItem, LinkCard$1 as LinkCard, Loading, LoadingLine, LoginForm, Modal$1 as Modal, Module$1 as Module, Motion, NavFooter, NavHeader, NavMenuDesktop$1 as NavMenuDesktop, NavMenuMobile$1 as NavMenuMobile, NavTabs, NoCustomerResultsIcon, NoPaymentResultsIcon, NotFoundIcon, Obligation, iconsMap as ObligationIcons, Pagination$1 as Pagination, Paragraph$1 as Paragraph, PartialAmountForm, PasswordRequirements, PaymentButtonBar, PaymentDetails$1 as PaymentDetails, PaymentFormACH, PaymentFormCard$1 as PaymentFormCard, PaymentMethodAddIcon$1 as PaymentMethodAddIcon, PaymentMethodIcon$1 as PaymentMethodIcon, PaymentSearchIcon, PaymentsIconSmall$1 as PaymentsIconSmall, PencilIcon$1 as PencilIcon, PendingIcon, PeriscopeDashboardIframe, PeriscopeFailedIcon, PhoneForm, Placeholder$1 as Placeholder, PlusCircleIcon, PointOfSaleImage, Popover$1 as Popover, ProcessingFee$1 as ProcessingFee, ProfileIcon$1 as ProfileIcon, ProfileIconSmall$1 as ProfileIconSmall, ProfileImage, PropertiesAddIcon$1 as PropertiesAddIcon, PropertiesIconSmall$1 as PropertiesIconSmall, RadioButton$2 as RadioButton, RadioButtonWithLabel$1 as RadioButtonWithLabel, RadioGroup, RadioSection$1 as RadioSection, Reel, RefundIcon, RefundIconMedium, RefundIconSmall, RegistrationForm, RejectedIcon, RejectedVelocityIcon, ResetConfirmationForm$1 as ResetConfirmationForm, ResetPasswordForm, ResetPasswordIcon, ResetPasswordSuccess, RevenueManagementImage, RoutingNumberImage, SearchIcon, SearchableSelect$1 as SearchableSelect, SettingsIconSmall$1 as SettingsIconSmall, ShoppingCartIcon, Sidebar, SidebarSingleContent$1 as SidebarSingleContent, SidebarStackContent$1 as SidebarStackContent, SolidDivider$1 as SolidDivider, Spinner$2 as Spinner, Stack, StandardCheckoutImage, FormStateDropdown as StateProvinceDropdown, StatusUnknownIcon, SuccessfulIcon, SuccessfulIconMedium, SuccessfulIconSmall, Switcher, TabSidebar$1 as TabSidebar, Table_styled as Table, TableBody_styled as TableBody, TableCell_styled as TableCell, TableHead$1 as TableHead, TableHeading_styled as TableHeading, TableListItem, TableRow$1 as TableRow, Tabs$1 as Tabs, TermsAndConditions, TermsAndConditionsModal$1 as TermsAndConditionsModal, Text$1 as Text, Timeout$1 as Timeout, TimeoutImage, Title$1 as Title, ToastNotification, ToggleSwitch$1 as ToggleSwitch, TrashIcon$1 as TrashIcon, TypeaheadInput, VerifiedEmailIcon$1 as VerifiedEmailIcon, VoidedIcon, WalletBannerIcon$1 as WalletBannerIcon, WalletIcon$1 as WalletIcon, WalletIconSmall$1 as WalletIconSmall, WarningIconXS, WelcomeModule$1 as WelcomeModule, WorkflowTile, XCircleIconMedium, XCircleIconSmall, cardRegistry, index$5 as constants, createPartialAmountFormState, createPartialAmountFormValidators, index$4 as util, withWindowSize };
|
|
50658
50753
|
//# sourceMappingURL=index.esm.js.map
|