@tecsinapse/react-core 1.12.5 → 1.12.9

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 (81) hide show
  1. package/CHANGELOG.md +35 -0
  2. package/dist/components/atoms/Input/hooks/useCurrencyMask.js +2 -2
  3. package/dist/components/atoms/Input/hooks/useCurrencyMask.js.map +1 -1
  4. package/dist/components/atoms/Input/hooks/useMask.js +2 -2
  5. package/dist/components/atoms/Input/hooks/useMask.js.map +1 -1
  6. package/dist/components/atoms/ProgressBar/ProgressBar.d.ts +1 -1
  7. package/dist/components/atoms/ProgressBar/ProgressBar.js +6 -6
  8. package/dist/components/atoms/ProgressBar/ProgressBar.js.map +1 -1
  9. package/dist/components/atoms/Switch/Switch.js +30 -22
  10. package/dist/components/atoms/Switch/Switch.js.map +1 -1
  11. package/dist/components/atoms/Switch/animation.d.ts +1 -1
  12. package/dist/components/atoms/Switch/animation.js +24 -16
  13. package/dist/components/atoms/Switch/animation.js.map +1 -1
  14. package/dist/components/atoms/Switch/styled.d.ts +3 -2
  15. package/dist/components/atoms/Switch/styled.js +7 -3
  16. package/dist/components/atoms/Switch/styled.js.map +1 -1
  17. package/dist/components/atoms/shared/PaperAndCard.js +3 -4
  18. package/dist/components/atoms/shared/PaperAndCard.js.map +1 -1
  19. package/dist/components/molecules/Calendar/index.d.ts +1 -1
  20. package/dist/components/molecules/Calendar/index.js +6 -0
  21. package/dist/components/molecules/Calendar/index.js.map +1 -1
  22. package/dist/components/molecules/Calendar/styled.js +0 -17
  23. package/dist/components/molecules/Calendar/styled.js.map +1 -1
  24. package/dist/components/molecules/DatePicker/DatePicker.d.ts +6 -5
  25. package/dist/components/molecules/DatePicker/DatePicker.js +22 -32
  26. package/dist/components/molecules/DatePicker/DatePicker.js.map +1 -1
  27. package/dist/components/molecules/DatePicker/styled.d.ts +0 -14
  28. package/dist/components/molecules/DatePicker/styled.js +1 -46
  29. package/dist/components/molecules/DatePicker/styled.js.map +1 -1
  30. package/dist/components/molecules/DateTimePicker/DateTimePicker.d.ts +5 -4
  31. package/dist/components/molecules/DateTimePicker/DateTimePicker.js +35 -37
  32. package/dist/components/molecules/DateTimePicker/DateTimePicker.js.map +1 -1
  33. package/dist/components/molecules/DateTimePicker/styled.d.ts +0 -21
  34. package/dist/components/molecules/DateTimePicker/styled.js +3 -51
  35. package/dist/components/molecules/DateTimePicker/styled.js.map +1 -1
  36. package/dist/components/molecules/Grid/Item/Item.d.ts +1 -1
  37. package/dist/components/molecules/Grid/Item/Item.js +7 -5
  38. package/dist/components/molecules/Grid/Item/Item.js.map +1 -1
  39. package/dist/components/molecules/HintInputContainer/HintInputContainer.d.ts +3 -2
  40. package/dist/components/molecules/HintInputContainer/HintInputContainer.js +4 -4
  41. package/dist/components/molecules/HintInputContainer/HintInputContainer.js.map +1 -1
  42. package/dist/components/molecules/TextArea/TextArea.d.ts +3 -1
  43. package/dist/components/molecules/TextArea/TextArea.js +4 -4
  44. package/dist/components/molecules/TextArea/TextArea.js.map +1 -1
  45. package/dist/index.d.ts +1 -1
  46. package/dist/index.js +7 -0
  47. package/dist/index.js.map +1 -1
  48. package/dist/styles/definitions.js +1 -1
  49. package/dist/styles/definitions.js.map +1 -1
  50. package/dist/utils/extractNumbersFromString.js +1 -1
  51. package/dist/utils/extractNumbersFromString.js.map +1 -1
  52. package/package.json +2 -2
  53. package/src/components/atoms/Input/hooks/useCurrencyMask.ts +2 -2
  54. package/src/components/atoms/Input/hooks/useMask.ts +1 -1
  55. package/src/components/atoms/ProgressBar/ProgressBar.tsx +5 -5
  56. package/src/components/atoms/Switch/Switch.tsx +29 -32
  57. package/src/components/atoms/Switch/animation.ts +26 -16
  58. package/src/components/atoms/Switch/styled.ts +6 -4
  59. package/src/components/atoms/shared/PaperAndCard.ts +4 -5
  60. package/src/components/molecules/Calendar/index.ts +1 -0
  61. package/src/components/molecules/Calendar/styled.ts +0 -22
  62. package/src/components/molecules/DatePicker/DatePicker.tsx +32 -41
  63. package/src/components/molecules/DatePicker/styled.ts +0 -40
  64. package/src/components/molecules/DateTimePicker/DateTimePicker.tsx +46 -52
  65. package/src/components/molecules/DateTimePicker/styled.ts +1 -49
  66. package/src/components/molecules/Grid/Item/Item.tsx +3 -5
  67. package/src/components/molecules/HintInputContainer/HintInputContainer.tsx +3 -8
  68. package/src/components/molecules/TextArea/TextArea.tsx +3 -9
  69. package/src/index.ts +1 -0
  70. package/src/styles/definitions.ts +1 -1
  71. package/src/utils/extractNumbersFromString.ts +4 -5
  72. package/dist/components/molecules/DatePicker/Modal.d.ts +0 -8
  73. package/dist/components/molecules/DatePicker/Modal.js +0 -60
  74. package/dist/components/molecules/DatePicker/Modal.js.map +0 -1
  75. package/dist/components/molecules/DateTimePicker/Modal.d.ts +0 -7
  76. package/dist/components/molecules/DateTimePicker/Modal.js +0 -89
  77. package/dist/components/molecules/DateTimePicker/Modal.js.map +0 -1
  78. package/src/components/molecules/DatePicker/DatePicker.stories.tsx +0 -44
  79. package/src/components/molecules/DatePicker/Modal.tsx +0 -51
  80. package/src/components/molecules/DateTimePicker/DateTimePicker.stories.tsx +0 -26
  81. package/src/components/molecules/DateTimePicker/Modal.tsx +0 -84
@@ -1,89 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.Modal = void 0;
7
-
8
- var React = _interopRequireWildcard(require("react"));
9
-
10
- var _reactNative = require("react-native");
11
-
12
- var _DateTimeSelector = require("../DateTimeSelector");
13
-
14
- var _styled = require("./styled");
15
-
16
- function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
17
-
18
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
19
-
20
- function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
21
-
22
- const Component = ({
23
- onRequestClose,
24
- onChange,
25
- value,
26
- mode,
27
- format,
28
- locale,
29
- upperDateThreshold,
30
- lowerDateThreshold,
31
- offsetThreshold,
32
- upperOffsetThreshold,
33
- lowerOffsetThreshold,
34
- dateModalTitle,
35
- timeModalTitle,
36
- dateConfirmButtonText,
37
- timeConfirmButtonText,
38
- dayLabel,
39
- monthLabel,
40
- yearLabel,
41
- hourLabel,
42
- minuteLabel,
43
- DateTimeSelectorComponent = _DateTimeSelector.DateTimeSelector,
44
- bottomOffset = 0,
45
- ...modalProps
46
- }) => {
47
- const handleDateTimeSelectorChange = date => {
48
- onChange === null || onChange === void 0 ? void 0 : onChange(date);
49
- onRequestClose === null || onRequestClose === void 0 ? void 0 : onRequestClose();
50
- };
51
-
52
- const StyledDateTimeSelector = (0, _styled.getStyledDateTimeSelector)(DateTimeSelectorComponent);
53
- return React.createElement(_reactNative.Modal, _extends({
54
- transparent: true,
55
- hardwareAccelerated: true,
56
- statusBarTranslucent: true
57
- }, modalProps, {
58
- onRequestClose: onRequestClose
59
- }), React.createElement(_styled.Backdrop, {
60
- onPress: onRequestClose,
61
- effect: "none"
62
- }, React.createElement(_styled.ModalContent, {
63
- offset: bottomOffset
64
- }, React.createElement(StyledDateTimeSelector, {
65
- value: value,
66
- mode: mode,
67
- format: format,
68
- locale: locale,
69
- upperDateThreshold: upperDateThreshold,
70
- lowerDateThreshold: lowerDateThreshold,
71
- offsetThreshold: offsetThreshold,
72
- upperOffsetThreshold: upperOffsetThreshold,
73
- lowerOffsetThreshold: lowerOffsetThreshold,
74
- dateModalTitle: dateModalTitle,
75
- timeModalTitle: timeModalTitle,
76
- dateConfirmButtonText: dateConfirmButtonText,
77
- timeConfirmButtonText: timeConfirmButtonText,
78
- dayLabel: dayLabel,
79
- monthLabel: monthLabel,
80
- yearLabel: yearLabel,
81
- hourLabel: hourLabel,
82
- minuteLabel: minuteLabel,
83
- onChange: handleDateTimeSelectorChange
84
- }))));
85
- };
86
-
87
- const Modal = Component;
88
- exports.Modal = Modal;
89
- //# sourceMappingURL=Modal.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../../src/components/molecules/DateTimePicker/Modal.tsx"],"names":["Component","onRequestClose","onChange","value","mode","format","locale","upperDateThreshold","lowerDateThreshold","offsetThreshold","upperOffsetThreshold","lowerOffsetThreshold","dateModalTitle","timeModalTitle","dateConfirmButtonText","timeConfirmButtonText","dayLabel","monthLabel","yearLabel","hourLabel","minuteLabel","DateTimeSelectorComponent","DateTimeSelector","bottomOffset","modalProps","handleDateTimeSelectorChange","date","StyledDateTimeSelector","Modal"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;AAOA,MAAMA,SAEL,GAAG,CAAC;AACHC,EAAAA,cADG;AAEHC,EAAAA,QAFG;AAGHC,EAAAA,KAHG;AAIHC,EAAAA,IAJG;AAKHC,EAAAA,MALG;AAMHC,EAAAA,MANG;AAOHC,EAAAA,kBAPG;AAQHC,EAAAA,kBARG;AASHC,EAAAA,eATG;AAUHC,EAAAA,oBAVG;AAWHC,EAAAA,oBAXG;AAYHC,EAAAA,cAZG;AAaHC,EAAAA,cAbG;AAcHC,EAAAA,qBAdG;AAeHC,EAAAA,qBAfG;AAgBHC,EAAAA,QAhBG;AAiBHC,EAAAA,UAjBG;AAkBHC,EAAAA,SAlBG;AAmBHC,EAAAA,SAnBG;AAoBHC,EAAAA,WApBG;AAqBHC,EAAAA,yBAAyB,GAAGC,kCArBzB;AAsBHC,EAAAA,YAAY,GAAG,CAtBZ;AAuBH,KAAGC;AAvBA,CAAD,KAwBE;AACJ,QAAMC,4BAA4B,GAAIC,IAAD,IAAgB;AACnDxB,IAAAA,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAGwB,IAAH,CAAR;AACAzB,IAAAA,cAAc,SAAd,IAAAA,cAAc,WAAd,YAAAA,cAAc;AACf,GAHD;;AAKA,QAAM0B,sBAAsB,GAAG,uCAC7BN,yBAD6B,CAA/B;AAIA,SACE,oBAAC,kBAAD;AACE,IAAA,WAAW,MADb;AAEE,IAAA,mBAAmB,MAFrB;AAGE,IAAA,oBAAoB;AAHtB,KAIMG,UAJN;AAKE,IAAA,cAAc,EAAEvB;AALlB,MAOE,oBAAC,gBAAD;AAAU,IAAA,OAAO,EAAEA,cAAnB;AAAmC,IAAA,MAAM,EAAC;AAA1C,KACE,oBAAC,oBAAD;AAAc,IAAA,MAAM,EAAEsB;AAAtB,KACE,oBAAC,sBAAD;AACE,IAAA,KAAK,EAAEpB,KADT;AAEE,IAAA,IAAI,EAAEC,IAFR;AAGE,IAAA,MAAM,EAAEC,MAHV;AAIE,IAAA,MAAM,EAAEC,MAJV;AAKE,IAAA,kBAAkB,EAAEC,kBALtB;AAME,IAAA,kBAAkB,EAAEC,kBANtB;AAOE,IAAA,eAAe,EAAEC,eAPnB;AAQE,IAAA,oBAAoB,EAAEC,oBARxB;AASE,IAAA,oBAAoB,EAAEC,oBATxB;AAUE,IAAA,cAAc,EAAEC,cAVlB;AAWE,IAAA,cAAc,EAAEC,cAXlB;AAYE,IAAA,qBAAqB,EAAEC,qBAZzB;AAaE,IAAA,qBAAqB,EAAEC,qBAbzB;AAcE,IAAA,QAAQ,EAAEC,QAdZ;AAeE,IAAA,UAAU,EAAEC,UAfd;AAgBE,IAAA,SAAS,EAAEC,SAhBb;AAiBE,IAAA,SAAS,EAAEC,SAjBb;AAkBE,IAAA,WAAW,EAAEC,WAlBf;AAmBE,IAAA,QAAQ,EAAEK;AAnBZ,IADF,CADF,CAPF,CADF;AAmCD,CAvED;;AAyEO,MAAMG,KAAK,GAAG5B,SAAd","sourcesContent":["import * as React from 'react';\nimport { Modal as RNModal, ModalProps } from 'react-native';\nimport { DateTimeSelector, DateTimeSelectorProps } from '../DateTimeSelector';\nimport { Backdrop, getStyledDateTimeSelector, ModalContent } from './styled';\n\nexport interface DateTimePickerModalProps {\n DateTimeSelectorComponent?: React.FC<DateTimeSelectorProps>;\n bottomOffset?: number;\n}\n\nconst Component: React.FC<\n DateTimeSelectorProps & ModalProps & DateTimePickerModalProps\n> = ({\n onRequestClose,\n onChange,\n value,\n mode,\n format,\n locale,\n upperDateThreshold,\n lowerDateThreshold,\n offsetThreshold,\n upperOffsetThreshold,\n lowerOffsetThreshold,\n dateModalTitle,\n timeModalTitle,\n dateConfirmButtonText,\n timeConfirmButtonText,\n dayLabel,\n monthLabel,\n yearLabel,\n hourLabel,\n minuteLabel,\n DateTimeSelectorComponent = DateTimeSelector,\n bottomOffset = 0,\n ...modalProps\n}) => {\n const handleDateTimeSelectorChange = (date: Date) => {\n onChange?.(date);\n onRequestClose?.();\n };\n\n const StyledDateTimeSelector = getStyledDateTimeSelector(\n DateTimeSelectorComponent\n );\n\n return (\n <RNModal\n transparent\n hardwareAccelerated\n statusBarTranslucent\n {...modalProps}\n onRequestClose={onRequestClose}\n >\n <Backdrop onPress={onRequestClose} effect=\"none\">\n <ModalContent offset={bottomOffset}>\n <StyledDateTimeSelector\n value={value}\n mode={mode}\n format={format}\n locale={locale}\n upperDateThreshold={upperDateThreshold}\n lowerDateThreshold={lowerDateThreshold}\n offsetThreshold={offsetThreshold}\n upperOffsetThreshold={upperOffsetThreshold}\n lowerOffsetThreshold={lowerOffsetThreshold}\n dateModalTitle={dateModalTitle}\n timeModalTitle={timeModalTitle}\n dateConfirmButtonText={dateConfirmButtonText}\n timeConfirmButtonText={timeConfirmButtonText}\n dayLabel={dayLabel}\n monthLabel={monthLabel}\n yearLabel={yearLabel}\n hourLabel={hourLabel}\n minuteLabel={minuteLabel}\n onChange={handleDateTimeSelectorChange}\n />\n </ModalContent>\n </Backdrop>\n </RNModal>\n );\n};\n\nexport const Modal = Component;\n"],"file":"Modal.js"}
@@ -1,44 +0,0 @@
1
- import { Story } from '@storybook/react';
2
- import React from 'react';
3
- import { ptBR } from 'date-fns/locale';
4
- import DatePicker, { DatePickerProps } from './DatePicker';
5
- import { DateRange } from '../Calendar';
6
-
7
- export default {
8
- title: 'Hybrid/Date Picker',
9
- component: DatePicker,
10
- };
11
-
12
- const Template: Story<DatePickerProps<'range'>> = args => {
13
- const [value, setValue] = React.useState<DateRange>();
14
-
15
- return (
16
- <DatePicker {...args} value={value} onChange={setValue} locale={ptBR} />
17
- );
18
- };
19
-
20
- export const Range = Template.bind({});
21
-
22
- Range.args = {
23
- label: 'Select date',
24
- placeholder: 'Select date',
25
- type: 'range',
26
- closeOnPick: true,
27
- };
28
-
29
- const TemplateDay: Story<DatePickerProps<'day'>> = args => {
30
- const [value, setValue] = React.useState<Date>();
31
-
32
- return (
33
- <DatePicker {...args} value={value} onChange={setValue} locale={ptBR} />
34
- );
35
- };
36
-
37
- export const Day = TemplateDay.bind({});
38
-
39
- Day.args = {
40
- label: 'Select date',
41
- placeholder: 'Select date',
42
- type: 'day',
43
- closeOnPick: true,
44
- };
@@ -1,51 +0,0 @@
1
- import * as React from 'react';
2
- import { Modal as RNModal, ModalProps } from 'react-native';
3
- import { Calendar, CalendarProps, SelectionType } from '../Calendar';
4
- import { Backdrop, ModalContent } from './styled';
5
- import { PressableSurface } from '@tecsinapse/react-core';
6
-
7
- export interface DatePickerModalProps<T extends SelectionType> {
8
- CalendarComponent?: React.FC<CalendarProps<T>>;
9
- bottomOffset?: number;
10
- }
11
-
12
- const Component = <T extends SelectionType>({
13
- type,
14
- value,
15
- onRequestClose,
16
- month,
17
- year,
18
- onChange,
19
- CalendarComponent = Calendar,
20
- bottomOffset = 0,
21
- locale,
22
- ...modalProps
23
- }: CalendarProps<T> & ModalProps & DatePickerModalProps<T>): JSX.Element => {
24
- return (
25
- <RNModal
26
- transparent
27
- hardwareAccelerated
28
- statusBarTranslucent
29
- {...modalProps}
30
- onRequestClose={onRequestClose}
31
- >
32
- <Backdrop onPress={onRequestClose} effect="none">
33
- <PressableSurface>
34
- <ModalContent offset={bottomOffset}>
35
- <CalendarComponent
36
- pointerEvents={'box-none'}
37
- type={type}
38
- value={value}
39
- month={month}
40
- year={year}
41
- onChange={onChange}
42
- locale={locale}
43
- />
44
- </ModalContent>
45
- </PressableSurface>
46
- </Backdrop>
47
- </RNModal>
48
- );
49
- };
50
-
51
- export const Modal = Component;
@@ -1,26 +0,0 @@
1
- import { Story } from '@storybook/react';
2
- import React from 'react';
3
- import { ptBR } from 'date-fns/locale';
4
- import { DateTimePicker, DateTimePickerProps } from './index';
5
-
6
- export default {
7
- title: 'Hybrid/Date Time Picker',
8
- component: DateTimePicker,
9
- };
10
-
11
- const Template: Story<DateTimePickerProps> = ({ ...args }) => {
12
- const [value, setValue] = React.useState<Date>();
13
-
14
- return (
15
- <DateTimePicker
16
- label={'Select date and time'}
17
- placeholder={'Select date and time'}
18
- mode={'datetime'}
19
- value={value}
20
- onChange={setValue}
21
- locale={ptBR}
22
- />
23
- );
24
- };
25
-
26
- export const Base = Template.bind({});
@@ -1,84 +0,0 @@
1
- import * as React from 'react';
2
- import { Modal as RNModal, ModalProps } from 'react-native';
3
- import { DateTimeSelector, DateTimeSelectorProps } from '../DateTimeSelector';
4
- import { Backdrop, getStyledDateTimeSelector, ModalContent } from './styled';
5
-
6
- export interface DateTimePickerModalProps {
7
- DateTimeSelectorComponent?: React.FC<DateTimeSelectorProps>;
8
- bottomOffset?: number;
9
- }
10
-
11
- const Component: React.FC<
12
- DateTimeSelectorProps & ModalProps & DateTimePickerModalProps
13
- > = ({
14
- onRequestClose,
15
- onChange,
16
- value,
17
- mode,
18
- format,
19
- locale,
20
- upperDateThreshold,
21
- lowerDateThreshold,
22
- offsetThreshold,
23
- upperOffsetThreshold,
24
- lowerOffsetThreshold,
25
- dateModalTitle,
26
- timeModalTitle,
27
- dateConfirmButtonText,
28
- timeConfirmButtonText,
29
- dayLabel,
30
- monthLabel,
31
- yearLabel,
32
- hourLabel,
33
- minuteLabel,
34
- DateTimeSelectorComponent = DateTimeSelector,
35
- bottomOffset = 0,
36
- ...modalProps
37
- }) => {
38
- const handleDateTimeSelectorChange = (date: Date) => {
39
- onChange?.(date);
40
- onRequestClose?.();
41
- };
42
-
43
- const StyledDateTimeSelector = getStyledDateTimeSelector(
44
- DateTimeSelectorComponent
45
- );
46
-
47
- return (
48
- <RNModal
49
- transparent
50
- hardwareAccelerated
51
- statusBarTranslucent
52
- {...modalProps}
53
- onRequestClose={onRequestClose}
54
- >
55
- <Backdrop onPress={onRequestClose} effect="none">
56
- <ModalContent offset={bottomOffset}>
57
- <StyledDateTimeSelector
58
- value={value}
59
- mode={mode}
60
- format={format}
61
- locale={locale}
62
- upperDateThreshold={upperDateThreshold}
63
- lowerDateThreshold={lowerDateThreshold}
64
- offsetThreshold={offsetThreshold}
65
- upperOffsetThreshold={upperOffsetThreshold}
66
- lowerOffsetThreshold={lowerOffsetThreshold}
67
- dateModalTitle={dateModalTitle}
68
- timeModalTitle={timeModalTitle}
69
- dateConfirmButtonText={dateConfirmButtonText}
70
- timeConfirmButtonText={timeConfirmButtonText}
71
- dayLabel={dayLabel}
72
- monthLabel={monthLabel}
73
- yearLabel={yearLabel}
74
- hourLabel={hourLabel}
75
- minuteLabel={minuteLabel}
76
- onChange={handleDateTimeSelectorChange}
77
- />
78
- </ModalContent>
79
- </Backdrop>
80
- </RNModal>
81
- );
82
- };
83
-
84
- export const Modal = Component;