@ttoss/components 1.19.0 → 1.20.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/esm/index.js +23 -15
  2. package/dist/index.d.ts +168 -169
  3. package/dist/index.js +20 -12
  4. package/package.json +4 -2
  5. package/src/components/Accordion/Accordion.tsx +26 -21
  6. package/src/components/Accordion/Accordion.docs.md +0 -57
  7. package/src/components/Modal/Modal.docs.md +0 -56
package/dist/esm/index.js CHANGED
@@ -4,6 +4,7 @@
4
4
  import * as React from "react";
5
5
 
6
6
  // src/components/Accordion/Accordion.tsx
7
+ import * as React2 from "react";
7
8
  import {
8
9
  AccordionItem,
9
10
  AccordionItemButton,
@@ -11,7 +12,9 @@ import {
11
12
  AccordionItemPanel,
12
13
  Accordion as ReactAccessibleAccordion
13
14
  } from "react-accessible-accordion";
14
- import { Box } from "@ttoss/ui";
15
+ import { Box, useTheme } from "@ttoss/ui";
16
+ import { css as createClassName } from "@emotion/css";
17
+ import { css as transformStyleObject } from "@theme-ui/css";
15
18
  var Accordion = ({
16
19
  children,
17
20
  allowMultipleExpanded,
@@ -20,9 +23,9 @@ var Accordion = ({
20
23
  onChange,
21
24
  ...boxProps
22
25
  }) => {
23
- return /* @__PURE__ */ React.createElement(Box, {
24
- ...boxProps,
25
- sx: {
26
+ const { theme } = useTheme();
27
+ const className = React2.useMemo(() => {
28
+ const styles = transformStyleObject({
26
29
  ".accordion__item": {
27
30
  marginBottom: 3
28
31
  },
@@ -34,10 +37,15 @@ var Accordion = ({
34
37
  ".accordion__button": {},
35
38
  ".accordion__panel": {
36
39
  padding: 2
37
- },
38
- ...boxProps.sx
39
- }
40
- }, /* @__PURE__ */ React.createElement(ReactAccessibleAccordion, {
40
+ }
41
+ })(theme);
42
+ return createClassName(styles);
43
+ }, [theme]);
44
+ return /* @__PURE__ */ React2.createElement(Box, {
45
+ variant: "accordion",
46
+ className,
47
+ ...boxProps
48
+ }, /* @__PURE__ */ React2.createElement(ReactAccessibleAccordion, {
41
49
  ...{
42
50
  allowMultipleExpanded,
43
51
  allowZeroExpanded,
@@ -52,7 +60,7 @@ Accordion.ItemHeading = AccordionItemHeading;
52
60
  Accordion.ItemPanel = AccordionItemPanel;
53
61
 
54
62
  // src/components/InstallPwa/InstallPwa.tsx
55
- import * as React2 from "react";
63
+ import * as React3 from "react";
56
64
 
57
65
  // src/components/InstallPwa/InstallPwaUi.tsx
58
66
  import { Button, Flex, Text } from "@ttoss/ui";
@@ -83,9 +91,9 @@ var InstallPwaUi = ({ onInstall }) => {
83
91
 
84
92
  // src/components/InstallPwa/InstallPwa.tsx
85
93
  var InstallPwa = () => {
86
- const [supportsPwa, setSupportsPwa] = React2.useState(false);
87
- const [promptInstall, setPromptInstall] = React2.useState(null);
88
- React2.useEffect(() => {
94
+ const [supportsPwa, setSupportsPwa] = React3.useState(false);
95
+ const [promptInstall, setPromptInstall] = React3.useState(null);
96
+ React3.useEffect(() => {
89
97
  const handler = (e) => {
90
98
  e.preventDefault();
91
99
  setSupportsPwa(true);
@@ -104,13 +112,13 @@ var InstallPwa = () => {
104
112
  if (!supportsPwa) {
105
113
  return null;
106
114
  }
107
- return /* @__PURE__ */ React2.createElement(InstallPwaUi, {
115
+ return /* @__PURE__ */ React3.createElement(InstallPwaUi, {
108
116
  onInstall
109
117
  });
110
118
  };
111
119
 
112
120
  // src/components/Modal/Modal.tsx
113
- import { useResponsiveValue, useTheme } from "@ttoss/ui";
121
+ import { useResponsiveValue, useTheme as useTheme2 } from "@ttoss/ui";
114
122
  import ReactModal from "react-modal";
115
123
  ReactModal.defaultStyles = {
116
124
  overlay: {},
@@ -118,7 +126,7 @@ ReactModal.defaultStyles = {
118
126
  };
119
127
  var Modal = (props) => {
120
128
  var _a, _b, _c, _d, _e, _f, _g;
121
- const { theme } = useTheme();
129
+ const { theme } = useTheme2();
122
130
  const padding = useResponsiveValue([
123
131
  (_a = theme.space) == null ? void 0 : _a[2],
124
132
  (_b = theme.space) == null ? void 0 : _b[3],
package/dist/index.d.ts CHANGED
@@ -1,8 +1,7 @@
1
- import * as react from 'react';
2
1
  import * as react_accessible_accordion_dist_types_helpers_DisplayName from 'react-accessible-accordion/dist/types/helpers/DisplayName';
3
2
  import * as react_accessible_accordion_dist_types_components_ItemContext from 'react-accessible-accordion/dist/types/components/ItemContext';
4
3
  import * as react_accessible_accordion_dist_types_helpers_types from 'react-accessible-accordion/dist/types/helpers/types';
5
- import * as theme_ui_jsx_runtime from 'theme-ui/jsx-runtime';
4
+ import * as React from 'react';
6
5
  import { BoxProps } from '@ttoss/ui';
7
6
  import ReactModal from 'react-modal';
8
7
 
@@ -16,7 +15,7 @@ declare type AccordionProps = BoxProps & {
16
15
  onChange?: (args: string[]) => void;
17
16
  };
18
17
  declare const Accordion: {
19
- ({ children, allowMultipleExpanded, allowZeroExpanded, preExpanded, onChange, ...boxProps }: AccordionProps): theme_ui_jsx_runtime.JSX.Element;
18
+ ({ children, allowMultipleExpanded, allowZeroExpanded, preExpanded, onChange, ...boxProps }: AccordionProps): JSX.Element;
20
19
  Item: {
21
20
  ({ uuid: customUuid, dangerouslySetExpanded, className, activeClassName, ...rest }: react_accessible_accordion_dist_types_helpers_types.DivAttributes & {
22
21
  uuid?: react_accessible_accordion_dist_types_components_ItemContext.ID | undefined;
@@ -25,10 +24,10 @@ declare const Accordion: {
25
24
  }): JSX.Element;
26
25
  displayName: react_accessible_accordion_dist_types_helpers_DisplayName.default;
27
26
  };
28
- ItemButton: react.FC<{
29
- children?: react.ReactNode;
27
+ ItemButton: React.FC<{
28
+ children?: React.ReactNode;
30
29
  slot?: string | undefined;
31
- style?: react.CSSProperties | undefined;
30
+ style?: React.CSSProperties | undefined;
32
31
  title?: string | undefined;
33
32
  defaultChecked?: boolean | undefined;
34
33
  defaultValue?: string | number | readonly string[] | undefined;
@@ -70,7 +69,7 @@ declare const Accordion: {
70
69
  is?: string | undefined;
71
70
  'aria-activedescendant'?: string | undefined;
72
71
  'aria-atomic'?: (boolean | "true" | "false") | undefined;
73
- 'aria-autocomplete'?: "list" | "none" | "inline" | "both" | undefined;
72
+ 'aria-autocomplete'?: "list" | "none" | "both" | "inline" | undefined;
74
73
  'aria-busy'?: (boolean | "true" | "false") | undefined;
75
74
  'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
76
75
  'aria-colcount'?: number | undefined;
@@ -79,7 +78,7 @@ declare const Accordion: {
79
78
  'aria-current'?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
80
79
  'aria-describedby'?: string | undefined;
81
80
  'aria-details'?: string | undefined;
82
- 'aria-dropeffect'?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
81
+ 'aria-dropeffect'?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
83
82
  'aria-errormessage'?: string | undefined;
84
83
  'aria-flowto'?: string | undefined;
85
84
  'aria-grabbed'?: (boolean | "true" | "false") | undefined;
@@ -116,168 +115,168 @@ declare const Accordion: {
116
115
  dangerouslySetInnerHTML?: {
117
116
  __html: string;
118
117
  } | undefined;
119
- onCopy?: react.ClipboardEventHandler<HTMLDivElement> | undefined;
120
- onCopyCapture?: react.ClipboardEventHandler<HTMLDivElement> | undefined;
121
- onCut?: react.ClipboardEventHandler<HTMLDivElement> | undefined;
122
- onCutCapture?: react.ClipboardEventHandler<HTMLDivElement> | undefined;
123
- onPaste?: react.ClipboardEventHandler<HTMLDivElement> | undefined;
124
- onPasteCapture?: react.ClipboardEventHandler<HTMLDivElement> | undefined;
125
- onCompositionEnd?: react.CompositionEventHandler<HTMLDivElement> | undefined;
126
- onCompositionEndCapture?: react.CompositionEventHandler<HTMLDivElement> | undefined;
127
- onCompositionStart?: react.CompositionEventHandler<HTMLDivElement> | undefined;
128
- onCompositionStartCapture?: react.CompositionEventHandler<HTMLDivElement> | undefined;
129
- onCompositionUpdate?: react.CompositionEventHandler<HTMLDivElement> | undefined;
130
- onCompositionUpdateCapture?: react.CompositionEventHandler<HTMLDivElement> | undefined;
131
- onFocus?: react.FocusEventHandler<HTMLDivElement> | undefined;
132
- onFocusCapture?: react.FocusEventHandler<HTMLDivElement> | undefined;
133
- onBlur?: react.FocusEventHandler<HTMLDivElement> | undefined;
134
- onBlurCapture?: react.FocusEventHandler<HTMLDivElement> | undefined;
135
- onChange?: react.FormEventHandler<HTMLDivElement> | undefined;
136
- onChangeCapture?: react.FormEventHandler<HTMLDivElement> | undefined;
137
- onBeforeInput?: react.FormEventHandler<HTMLDivElement> | undefined;
138
- onBeforeInputCapture?: react.FormEventHandler<HTMLDivElement> | undefined;
139
- onInput?: react.FormEventHandler<HTMLDivElement> | undefined;
140
- onInputCapture?: react.FormEventHandler<HTMLDivElement> | undefined;
141
- onReset?: react.FormEventHandler<HTMLDivElement> | undefined;
142
- onResetCapture?: react.FormEventHandler<HTMLDivElement> | undefined;
143
- onSubmit?: react.FormEventHandler<HTMLDivElement> | undefined;
144
- onSubmitCapture?: react.FormEventHandler<HTMLDivElement> | undefined;
145
- onInvalid?: react.FormEventHandler<HTMLDivElement> | undefined;
146
- onInvalidCapture?: react.FormEventHandler<HTMLDivElement> | undefined;
147
- onLoad?: react.ReactEventHandler<HTMLDivElement> | undefined;
148
- onLoadCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
149
- onError?: react.ReactEventHandler<HTMLDivElement> | undefined;
150
- onErrorCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
151
- onKeyDown?: react.KeyboardEventHandler<HTMLDivElement> | undefined;
152
- onKeyDownCapture?: react.KeyboardEventHandler<HTMLDivElement> | undefined;
153
- onKeyPress?: react.KeyboardEventHandler<HTMLDivElement> | undefined;
154
- onKeyPressCapture?: react.KeyboardEventHandler<HTMLDivElement> | undefined;
155
- onKeyUp?: react.KeyboardEventHandler<HTMLDivElement> | undefined;
156
- onKeyUpCapture?: react.KeyboardEventHandler<HTMLDivElement> | undefined;
157
- onAbort?: react.ReactEventHandler<HTMLDivElement> | undefined;
158
- onAbortCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
159
- onCanPlay?: react.ReactEventHandler<HTMLDivElement> | undefined;
160
- onCanPlayCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
161
- onCanPlayThrough?: react.ReactEventHandler<HTMLDivElement> | undefined;
162
- onCanPlayThroughCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
163
- onDurationChange?: react.ReactEventHandler<HTMLDivElement> | undefined;
164
- onDurationChangeCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
165
- onEmptied?: react.ReactEventHandler<HTMLDivElement> | undefined;
166
- onEmptiedCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
167
- onEncrypted?: react.ReactEventHandler<HTMLDivElement> | undefined;
168
- onEncryptedCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
169
- onEnded?: react.ReactEventHandler<HTMLDivElement> | undefined;
170
- onEndedCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
171
- onLoadedData?: react.ReactEventHandler<HTMLDivElement> | undefined;
172
- onLoadedDataCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
173
- onLoadedMetadata?: react.ReactEventHandler<HTMLDivElement> | undefined;
174
- onLoadedMetadataCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
175
- onLoadStart?: react.ReactEventHandler<HTMLDivElement> | undefined;
176
- onLoadStartCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
177
- onPause?: react.ReactEventHandler<HTMLDivElement> | undefined;
178
- onPauseCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
179
- onPlay?: react.ReactEventHandler<HTMLDivElement> | undefined;
180
- onPlayCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
181
- onPlaying?: react.ReactEventHandler<HTMLDivElement> | undefined;
182
- onPlayingCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
183
- onProgress?: react.ReactEventHandler<HTMLDivElement> | undefined;
184
- onProgressCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
185
- onRateChange?: react.ReactEventHandler<HTMLDivElement> | undefined;
186
- onRateChangeCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
187
- onSeeked?: react.ReactEventHandler<HTMLDivElement> | undefined;
188
- onSeekedCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
189
- onSeeking?: react.ReactEventHandler<HTMLDivElement> | undefined;
190
- onSeekingCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
191
- onStalled?: react.ReactEventHandler<HTMLDivElement> | undefined;
192
- onStalledCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
193
- onSuspend?: react.ReactEventHandler<HTMLDivElement> | undefined;
194
- onSuspendCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
195
- onTimeUpdate?: react.ReactEventHandler<HTMLDivElement> | undefined;
196
- onTimeUpdateCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
197
- onVolumeChange?: react.ReactEventHandler<HTMLDivElement> | undefined;
198
- onVolumeChangeCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
199
- onWaiting?: react.ReactEventHandler<HTMLDivElement> | undefined;
200
- onWaitingCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
201
- onAuxClick?: react.MouseEventHandler<HTMLDivElement> | undefined;
202
- onAuxClickCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
203
- onClick?: react.MouseEventHandler<HTMLDivElement> | undefined;
204
- onClickCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
205
- onContextMenu?: react.MouseEventHandler<HTMLDivElement> | undefined;
206
- onContextMenuCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
207
- onDoubleClick?: react.MouseEventHandler<HTMLDivElement> | undefined;
208
- onDoubleClickCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
209
- onDrag?: react.DragEventHandler<HTMLDivElement> | undefined;
210
- onDragCapture?: react.DragEventHandler<HTMLDivElement> | undefined;
211
- onDragEnd?: react.DragEventHandler<HTMLDivElement> | undefined;
212
- onDragEndCapture?: react.DragEventHandler<HTMLDivElement> | undefined;
213
- onDragEnter?: react.DragEventHandler<HTMLDivElement> | undefined;
214
- onDragEnterCapture?: react.DragEventHandler<HTMLDivElement> | undefined;
215
- onDragExit?: react.DragEventHandler<HTMLDivElement> | undefined;
216
- onDragExitCapture?: react.DragEventHandler<HTMLDivElement> | undefined;
217
- onDragLeave?: react.DragEventHandler<HTMLDivElement> | undefined;
218
- onDragLeaveCapture?: react.DragEventHandler<HTMLDivElement> | undefined;
219
- onDragOver?: react.DragEventHandler<HTMLDivElement> | undefined;
220
- onDragOverCapture?: react.DragEventHandler<HTMLDivElement> | undefined;
221
- onDragStart?: react.DragEventHandler<HTMLDivElement> | undefined;
222
- onDragStartCapture?: react.DragEventHandler<HTMLDivElement> | undefined;
223
- onDrop?: react.DragEventHandler<HTMLDivElement> | undefined;
224
- onDropCapture?: react.DragEventHandler<HTMLDivElement> | undefined;
225
- onMouseDown?: react.MouseEventHandler<HTMLDivElement> | undefined;
226
- onMouseDownCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
227
- onMouseEnter?: react.MouseEventHandler<HTMLDivElement> | undefined;
228
- onMouseLeave?: react.MouseEventHandler<HTMLDivElement> | undefined;
229
- onMouseMove?: react.MouseEventHandler<HTMLDivElement> | undefined;
230
- onMouseMoveCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
231
- onMouseOut?: react.MouseEventHandler<HTMLDivElement> | undefined;
232
- onMouseOutCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
233
- onMouseOver?: react.MouseEventHandler<HTMLDivElement> | undefined;
234
- onMouseOverCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
235
- onMouseUp?: react.MouseEventHandler<HTMLDivElement> | undefined;
236
- onMouseUpCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
237
- onSelect?: react.ReactEventHandler<HTMLDivElement> | undefined;
238
- onSelectCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
239
- onTouchCancel?: react.TouchEventHandler<HTMLDivElement> | undefined;
240
- onTouchCancelCapture?: react.TouchEventHandler<HTMLDivElement> | undefined;
241
- onTouchEnd?: react.TouchEventHandler<HTMLDivElement> | undefined;
242
- onTouchEndCapture?: react.TouchEventHandler<HTMLDivElement> | undefined;
243
- onTouchMove?: react.TouchEventHandler<HTMLDivElement> | undefined;
244
- onTouchMoveCapture?: react.TouchEventHandler<HTMLDivElement> | undefined;
245
- onTouchStart?: react.TouchEventHandler<HTMLDivElement> | undefined;
246
- onTouchStartCapture?: react.TouchEventHandler<HTMLDivElement> | undefined;
247
- onPointerDown?: react.PointerEventHandler<HTMLDivElement> | undefined;
248
- onPointerDownCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
249
- onPointerMove?: react.PointerEventHandler<HTMLDivElement> | undefined;
250
- onPointerMoveCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
251
- onPointerUp?: react.PointerEventHandler<HTMLDivElement> | undefined;
252
- onPointerUpCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
253
- onPointerCancel?: react.PointerEventHandler<HTMLDivElement> | undefined;
254
- onPointerCancelCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
255
- onPointerEnter?: react.PointerEventHandler<HTMLDivElement> | undefined;
256
- onPointerEnterCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
257
- onPointerLeave?: react.PointerEventHandler<HTMLDivElement> | undefined;
258
- onPointerLeaveCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
259
- onPointerOver?: react.PointerEventHandler<HTMLDivElement> | undefined;
260
- onPointerOverCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
261
- onPointerOut?: react.PointerEventHandler<HTMLDivElement> | undefined;
262
- onPointerOutCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
263
- onGotPointerCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
264
- onGotPointerCaptureCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
265
- onLostPointerCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
266
- onLostPointerCaptureCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
267
- onScroll?: react.UIEventHandler<HTMLDivElement> | undefined;
268
- onScrollCapture?: react.UIEventHandler<HTMLDivElement> | undefined;
269
- onWheel?: react.WheelEventHandler<HTMLDivElement> | undefined;
270
- onWheelCapture?: react.WheelEventHandler<HTMLDivElement> | undefined;
271
- onAnimationStart?: react.AnimationEventHandler<HTMLDivElement> | undefined;
272
- onAnimationStartCapture?: react.AnimationEventHandler<HTMLDivElement> | undefined;
273
- onAnimationEnd?: react.AnimationEventHandler<HTMLDivElement> | undefined;
274
- onAnimationEndCapture?: react.AnimationEventHandler<HTMLDivElement> | undefined;
275
- onAnimationIteration?: react.AnimationEventHandler<HTMLDivElement> | undefined;
276
- onAnimationIterationCapture?: react.AnimationEventHandler<HTMLDivElement> | undefined;
277
- onTransitionEnd?: react.TransitionEventHandler<HTMLDivElement> | undefined;
278
- onTransitionEndCapture?: react.TransitionEventHandler<HTMLDivElement> | undefined;
118
+ onCopy?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
119
+ onCopyCapture?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
120
+ onCut?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
121
+ onCutCapture?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
122
+ onPaste?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
123
+ onPasteCapture?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
124
+ onCompositionEnd?: React.CompositionEventHandler<HTMLDivElement> | undefined;
125
+ onCompositionEndCapture?: React.CompositionEventHandler<HTMLDivElement> | undefined;
126
+ onCompositionStart?: React.CompositionEventHandler<HTMLDivElement> | undefined;
127
+ onCompositionStartCapture?: React.CompositionEventHandler<HTMLDivElement> | undefined;
128
+ onCompositionUpdate?: React.CompositionEventHandler<HTMLDivElement> | undefined;
129
+ onCompositionUpdateCapture?: React.CompositionEventHandler<HTMLDivElement> | undefined;
130
+ onFocus?: React.FocusEventHandler<HTMLDivElement> | undefined;
131
+ onFocusCapture?: React.FocusEventHandler<HTMLDivElement> | undefined;
132
+ onBlur?: React.FocusEventHandler<HTMLDivElement> | undefined;
133
+ onBlurCapture?: React.FocusEventHandler<HTMLDivElement> | undefined;
134
+ onChange?: React.FormEventHandler<HTMLDivElement> | undefined;
135
+ onChangeCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
136
+ onBeforeInput?: React.FormEventHandler<HTMLDivElement> | undefined;
137
+ onBeforeInputCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
138
+ onInput?: React.FormEventHandler<HTMLDivElement> | undefined;
139
+ onInputCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
140
+ onReset?: React.FormEventHandler<HTMLDivElement> | undefined;
141
+ onResetCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
142
+ onSubmit?: React.FormEventHandler<HTMLDivElement> | undefined;
143
+ onSubmitCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
144
+ onInvalid?: React.FormEventHandler<HTMLDivElement> | undefined;
145
+ onInvalidCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
146
+ onLoad?: React.ReactEventHandler<HTMLDivElement> | undefined;
147
+ onLoadCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
148
+ onError?: React.ReactEventHandler<HTMLDivElement> | undefined;
149
+ onErrorCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
150
+ onKeyDown?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
151
+ onKeyDownCapture?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
152
+ onKeyPress?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
153
+ onKeyPressCapture?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
154
+ onKeyUp?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
155
+ onKeyUpCapture?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
156
+ onAbort?: React.ReactEventHandler<HTMLDivElement> | undefined;
157
+ onAbortCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
158
+ onCanPlay?: React.ReactEventHandler<HTMLDivElement> | undefined;
159
+ onCanPlayCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
160
+ onCanPlayThrough?: React.ReactEventHandler<HTMLDivElement> | undefined;
161
+ onCanPlayThroughCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
162
+ onDurationChange?: React.ReactEventHandler<HTMLDivElement> | undefined;
163
+ onDurationChangeCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
164
+ onEmptied?: React.ReactEventHandler<HTMLDivElement> | undefined;
165
+ onEmptiedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
166
+ onEncrypted?: React.ReactEventHandler<HTMLDivElement> | undefined;
167
+ onEncryptedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
168
+ onEnded?: React.ReactEventHandler<HTMLDivElement> | undefined;
169
+ onEndedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
170
+ onLoadedData?: React.ReactEventHandler<HTMLDivElement> | undefined;
171
+ onLoadedDataCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
172
+ onLoadedMetadata?: React.ReactEventHandler<HTMLDivElement> | undefined;
173
+ onLoadedMetadataCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
174
+ onLoadStart?: React.ReactEventHandler<HTMLDivElement> | undefined;
175
+ onLoadStartCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
176
+ onPause?: React.ReactEventHandler<HTMLDivElement> | undefined;
177
+ onPauseCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
178
+ onPlay?: React.ReactEventHandler<HTMLDivElement> | undefined;
179
+ onPlayCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
180
+ onPlaying?: React.ReactEventHandler<HTMLDivElement> | undefined;
181
+ onPlayingCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
182
+ onProgress?: React.ReactEventHandler<HTMLDivElement> | undefined;
183
+ onProgressCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
184
+ onRateChange?: React.ReactEventHandler<HTMLDivElement> | undefined;
185
+ onRateChangeCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
186
+ onSeeked?: React.ReactEventHandler<HTMLDivElement> | undefined;
187
+ onSeekedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
188
+ onSeeking?: React.ReactEventHandler<HTMLDivElement> | undefined;
189
+ onSeekingCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
190
+ onStalled?: React.ReactEventHandler<HTMLDivElement> | undefined;
191
+ onStalledCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
192
+ onSuspend?: React.ReactEventHandler<HTMLDivElement> | undefined;
193
+ onSuspendCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
194
+ onTimeUpdate?: React.ReactEventHandler<HTMLDivElement> | undefined;
195
+ onTimeUpdateCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
196
+ onVolumeChange?: React.ReactEventHandler<HTMLDivElement> | undefined;
197
+ onVolumeChangeCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
198
+ onWaiting?: React.ReactEventHandler<HTMLDivElement> | undefined;
199
+ onWaitingCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
200
+ onAuxClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
201
+ onAuxClickCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
202
+ onClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
203
+ onClickCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
204
+ onContextMenu?: React.MouseEventHandler<HTMLDivElement> | undefined;
205
+ onContextMenuCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
206
+ onDoubleClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
207
+ onDoubleClickCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
208
+ onDrag?: React.DragEventHandler<HTMLDivElement> | undefined;
209
+ onDragCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
210
+ onDragEnd?: React.DragEventHandler<HTMLDivElement> | undefined;
211
+ onDragEndCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
212
+ onDragEnter?: React.DragEventHandler<HTMLDivElement> | undefined;
213
+ onDragEnterCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
214
+ onDragExit?: React.DragEventHandler<HTMLDivElement> | undefined;
215
+ onDragExitCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
216
+ onDragLeave?: React.DragEventHandler<HTMLDivElement> | undefined;
217
+ onDragLeaveCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
218
+ onDragOver?: React.DragEventHandler<HTMLDivElement> | undefined;
219
+ onDragOverCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
220
+ onDragStart?: React.DragEventHandler<HTMLDivElement> | undefined;
221
+ onDragStartCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
222
+ onDrop?: React.DragEventHandler<HTMLDivElement> | undefined;
223
+ onDropCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
224
+ onMouseDown?: React.MouseEventHandler<HTMLDivElement> | undefined;
225
+ onMouseDownCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
226
+ onMouseEnter?: React.MouseEventHandler<HTMLDivElement> | undefined;
227
+ onMouseLeave?: React.MouseEventHandler<HTMLDivElement> | undefined;
228
+ onMouseMove?: React.MouseEventHandler<HTMLDivElement> | undefined;
229
+ onMouseMoveCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
230
+ onMouseOut?: React.MouseEventHandler<HTMLDivElement> | undefined;
231
+ onMouseOutCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
232
+ onMouseOver?: React.MouseEventHandler<HTMLDivElement> | undefined;
233
+ onMouseOverCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
234
+ onMouseUp?: React.MouseEventHandler<HTMLDivElement> | undefined;
235
+ onMouseUpCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
236
+ onSelect?: React.ReactEventHandler<HTMLDivElement> | undefined;
237
+ onSelectCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
238
+ onTouchCancel?: React.TouchEventHandler<HTMLDivElement> | undefined;
239
+ onTouchCancelCapture?: React.TouchEventHandler<HTMLDivElement> | undefined;
240
+ onTouchEnd?: React.TouchEventHandler<HTMLDivElement> | undefined;
241
+ onTouchEndCapture?: React.TouchEventHandler<HTMLDivElement> | undefined;
242
+ onTouchMove?: React.TouchEventHandler<HTMLDivElement> | undefined;
243
+ onTouchMoveCapture?: React.TouchEventHandler<HTMLDivElement> | undefined;
244
+ onTouchStart?: React.TouchEventHandler<HTMLDivElement> | undefined;
245
+ onTouchStartCapture?: React.TouchEventHandler<HTMLDivElement> | undefined;
246
+ onPointerDown?: React.PointerEventHandler<HTMLDivElement> | undefined;
247
+ onPointerDownCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
248
+ onPointerMove?: React.PointerEventHandler<HTMLDivElement> | undefined;
249
+ onPointerMoveCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
250
+ onPointerUp?: React.PointerEventHandler<HTMLDivElement> | undefined;
251
+ onPointerUpCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
252
+ onPointerCancel?: React.PointerEventHandler<HTMLDivElement> | undefined;
253
+ onPointerCancelCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
254
+ onPointerEnter?: React.PointerEventHandler<HTMLDivElement> | undefined;
255
+ onPointerEnterCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
256
+ onPointerLeave?: React.PointerEventHandler<HTMLDivElement> | undefined;
257
+ onPointerLeaveCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
258
+ onPointerOver?: React.PointerEventHandler<HTMLDivElement> | undefined;
259
+ onPointerOverCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
260
+ onPointerOut?: React.PointerEventHandler<HTMLDivElement> | undefined;
261
+ onPointerOutCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
262
+ onGotPointerCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
263
+ onGotPointerCaptureCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
264
+ onLostPointerCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
265
+ onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
266
+ onScroll?: React.UIEventHandler<HTMLDivElement> | undefined;
267
+ onScrollCapture?: React.UIEventHandler<HTMLDivElement> | undefined;
268
+ onWheel?: React.WheelEventHandler<HTMLDivElement> | undefined;
269
+ onWheelCapture?: React.WheelEventHandler<HTMLDivElement> | undefined;
270
+ onAnimationStart?: React.AnimationEventHandler<HTMLDivElement> | undefined;
271
+ onAnimationStartCapture?: React.AnimationEventHandler<HTMLDivElement> | undefined;
272
+ onAnimationEnd?: React.AnimationEventHandler<HTMLDivElement> | undefined;
273
+ onAnimationEndCapture?: React.AnimationEventHandler<HTMLDivElement> | undefined;
274
+ onAnimationIteration?: React.AnimationEventHandler<HTMLDivElement> | undefined;
275
+ onAnimationIterationCapture?: React.AnimationEventHandler<HTMLDivElement> | undefined;
276
+ onTransitionEnd?: React.TransitionEventHandler<HTMLDivElement> | undefined;
277
+ onTransitionEndCapture?: React.TransitionEventHandler<HTMLDivElement> | undefined;
279
278
  }>;
280
- ItemHeading: react.FC<react_accessible_accordion_dist_types_helpers_types.DivAttributes>;
279
+ ItemHeading: React.FC<react_accessible_accordion_dist_types_helpers_types.DivAttributes>;
281
280
  ItemPanel: ({ className, region, id, ...rest }: react_accessible_accordion_dist_types_helpers_types.DivAttributes & {
282
281
  region?: boolean | undefined;
283
282
  className?: string | undefined;
package/dist/index.js CHANGED
@@ -33,8 +33,11 @@ module.exports = __toCommonJS(src_exports);
33
33
  var React = __toESM(require("react"));
34
34
 
35
35
  // src/components/Accordion/Accordion.tsx
36
+ var React2 = __toESM(require("react"));
36
37
  var import_react_accessible_accordion = require("react-accessible-accordion");
37
38
  var import_ui = require("@ttoss/ui");
39
+ var import_css = require("@emotion/css");
40
+ var import_css2 = require("@theme-ui/css");
38
41
  var Accordion = ({
39
42
  children,
40
43
  allowMultipleExpanded,
@@ -43,9 +46,9 @@ var Accordion = ({
43
46
  onChange,
44
47
  ...boxProps
45
48
  }) => {
46
- return /* @__PURE__ */ React.createElement(import_ui.Box, {
47
- ...boxProps,
48
- sx: {
49
+ const { theme } = (0, import_ui.useTheme)();
50
+ const className = React2.useMemo(() => {
51
+ const styles = (0, import_css2.css)({
49
52
  ".accordion__item": {
50
53
  marginBottom: 3
51
54
  },
@@ -57,10 +60,15 @@ var Accordion = ({
57
60
  ".accordion__button": {},
58
61
  ".accordion__panel": {
59
62
  padding: 2
60
- },
61
- ...boxProps.sx
62
- }
63
- }, /* @__PURE__ */ React.createElement(import_react_accessible_accordion.Accordion, {
63
+ }
64
+ })(theme);
65
+ return (0, import_css.css)(styles);
66
+ }, [theme]);
67
+ return /* @__PURE__ */ React2.createElement(import_ui.Box, {
68
+ variant: "accordion",
69
+ className,
70
+ ...boxProps
71
+ }, /* @__PURE__ */ React2.createElement(import_react_accessible_accordion.Accordion, {
64
72
  ...{
65
73
  allowMultipleExpanded,
66
74
  allowZeroExpanded,
@@ -75,7 +83,7 @@ Accordion.ItemHeading = import_react_accessible_accordion.AccordionItemHeading;
75
83
  Accordion.ItemPanel = import_react_accessible_accordion.AccordionItemPanel;
76
84
 
77
85
  // src/components/InstallPwa/InstallPwa.tsx
78
- var React2 = __toESM(require("react"));
86
+ var React3 = __toESM(require("react"));
79
87
 
80
88
  // src/components/InstallPwa/InstallPwaUi.tsx
81
89
  var import_ui2 = require("@ttoss/ui");
@@ -106,9 +114,9 @@ var InstallPwaUi = ({ onInstall }) => {
106
114
 
107
115
  // src/components/InstallPwa/InstallPwa.tsx
108
116
  var InstallPwa = () => {
109
- const [supportsPwa, setSupportsPwa] = React2.useState(false);
110
- const [promptInstall, setPromptInstall] = React2.useState(null);
111
- React2.useEffect(() => {
117
+ const [supportsPwa, setSupportsPwa] = React3.useState(false);
118
+ const [promptInstall, setPromptInstall] = React3.useState(null);
119
+ React3.useEffect(() => {
112
120
  const handler = (e) => {
113
121
  e.preventDefault();
114
122
  setSupportsPwa(true);
@@ -127,7 +135,7 @@ var InstallPwa = () => {
127
135
  if (!supportsPwa) {
128
136
  return null;
129
137
  }
130
- return /* @__PURE__ */ React2.createElement(InstallPwaUi, {
138
+ return /* @__PURE__ */ React3.createElement(InstallPwaUi, {
131
139
  onInstall
132
140
  });
133
141
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ttoss/components",
3
- "version": "1.19.0",
3
+ "version": "1.20.0",
4
4
  "description": "React components.",
5
5
  "license": "UNLICENSED",
6
6
  "publishConfig": {
@@ -31,6 +31,8 @@
31
31
  "dev": "yarn workspace @docs/storybook run dev"
32
32
  },
33
33
  "dependencies": {
34
+ "@emotion/css": "^11.10.0",
35
+ "@theme-ui/css": "^0.14.7",
34
36
  "@types/react-modal": "^3.13.1",
35
37
  "react-accessible-accordion": "^5.0.0",
36
38
  "react-modal": "^3.15.1"
@@ -46,5 +48,5 @@
46
48
  "@types/jest": "^28.1.5",
47
49
  "jest": "^28.1.3"
48
50
  },
49
- "gitHead": "2727f2809df7ce542f0fd3b953163a300e60cb68"
51
+ "gitHead": "c6ea722f669db5161ea4bfe585b07eaff1d94bc4"
50
52
  }
package/src/components/Accordion/Accordion.tsx CHANGED
@@ -1,5 +1,4 @@
1
- /** @jsxImportSource theme-ui */
2
-
1
+ import * as React from 'react';
3
2
  import {
4
3
  AccordionItem,
5
4
  AccordionItemButton,
@@ -7,7 +6,9 @@ import {
7
6
  AccordionItemPanel,
8
7
  Accordion as ReactAccessibleAccordion,
9
8
  } from 'react-accessible-accordion';
10
- import { Box, BoxProps } from '@ttoss/ui';
9
+ import { Box, BoxProps, useTheme } from '@ttoss/ui';
10
+ import { css as createClassName } from '@emotion/css';
11
+ import { css as transformStyleObject } from '@theme-ui/css';
11
12
 
12
13
  export type AccordionProps = BoxProps & {
13
14
  // https://github.com/springload/react-accessible-accordion#accordion
@@ -28,25 +29,29 @@ export const Accordion = ({
28
29
  onChange,
29
30
  ...boxProps
30
31
  }: AccordionProps) => {
32
+ const { theme } = useTheme();
33
+
34
+ const className = React.useMemo(() => {
35
+ const styles = transformStyleObject({
36
+ '.accordion__item': {
37
+ marginBottom: 3,
38
+ },
39
+ '.accordion__heading': {
40
+ padding: 2,
41
+ border: '1px solid',
42
+ borderColor: 'black',
43
+ },
44
+ '.accordion__button': {},
45
+ '.accordion__panel': {
46
+ padding: 2,
47
+ },
48
+ })(theme);
49
+
50
+ return createClassName(styles);
51
+ }, [theme]);
52
+
31
53
  return (
32
- <Box
33
- {...boxProps}
34
- sx={{
35
- '.accordion__item': {
36
- marginBottom: 3,
37
- },
38
- '.accordion__heading': {
39
- padding: 2,
40
- border: '1px solid',
41
- borderColor: 'black',
42
- },
43
- '.accordion__button': {},
44
- '.accordion__panel': {
45
- padding: 2,
46
- },
47
- ...boxProps.sx,
48
- }}
49
- >
54
+ <Box variant="accordion" className={className} {...boxProps}>
50
55
  <ReactAccessibleAccordion
51
56
  {...{
52
57
  allowMultipleExpanded,
package/src/components/Accordion/Accordion.docs.md DELETED
@@ -1,57 +0,0 @@
1
- # Accordion
2
-
3
- This components uses [react-accessible-accordion package](https://react-accessible-accordion.springload.co.nz/) as a base and apply [@ttoss/ui](/docs/modules/packages/ui/) styles.
4
-
5
- ## Storybook
6
-
7
- [Stories](https://storybook.ttoss.dev/?path=/story/components-accordion)
8
-
9
- ## Example
10
-
11
- ```jsx
12
- import { Accordion } from "@ttoss/components";
13
- import { Text } from "@ttoss/ui";
14
-
15
- const MyAccordion = () => {
16
- return (
17
- <Accordion>
18
- <Accordion.Item>
19
- <Accordion.ItemHeading>
20
- <Accordion.ItemButton>
21
- What harsh truths do you prefer to ignore?
22
- </Accordion.ItemButton>
23
- </Accordion.ItemHeading>
24
- <Accordion.ItemPanel>
25
- <Text>
26
- Exercitation in fugiat est ut ad ea cupidatat ut in cupidatat
27
- occaecat ut occaecat consequat est minim minim esse tempor laborum
28
- consequat esse adipisicing eu reprehenderit enim.
29
- </Text>
30
- </Accordion.ItemPanel>
31
- </Accordion.Item>
32
- <Accordion.Item>
33
- <Accordion.ItemHeading>
34
- <Accordion.ItemButton>
35
- Is free will real or just an illusion?
36
- </Accordion.ItemButton>
37
- </Accordion.ItemHeading>
38
- <Accordion.ItemPanel>
39
- <Text>
40
- In ad velit in ex nostrud dolore cupidatat consectetur ea in ut
41
- nostrud velit in irure cillum tempor laboris sed adipisicing eu esse
42
- duis nulla non.
43
- </Text>
44
- </Accordion.ItemPanel>
45
- </Accordion.Item>
46
- </Accordion>
47
- );
48
- };
49
- ```
50
-
51
- ## API
52
-
53
- TODO
54
-
55
- ## Styles
56
-
57
- TODO
package/src/components/Modal/Modal.docs.md DELETED
@@ -1,56 +0,0 @@
1
- # Modal
2
-
3
- This components uses [react-modal package](http://reactcommunity.org/react-modal) as a base and apply [@ttoss/ui](/docs/modules/packages/ui/) styles.
4
-
5
- ## Storybook
6
-
7
- [Stories](https://storybook.ttoss.dev/?path=/story/components-modal)
8
-
9
- ## Example
10
-
11
- ```jsx
12
- import { Modal } from "@ttoss/components";
13
- import { Box, Flex, Text } from "@ttoss/ui";
14
-
15
- const Component = () => {
16
- const [isOpen, setIsOpen] = React.useState(false);
17
-
18
- return (
19
- <Box>
20
- <Modal
21
- isOpen={isOpen}
22
- onRequestClose={() => {
23
- setIsOpen(false);
24
- }}
25
- >
26
- <Flex
27
- sx={{
28
- flexDirection: "column",
29
- alignItems: "center",
30
- }}
31
- >
32
- <Text>This is a modal.</Text>
33
- <Button
34
- onClick={() => {
35
- setIsOpen(false);
36
- }}
37
- >
38
- Close Modal
39
- </Button>
40
- </Flex>
41
- </Modal>
42
- <Button
43
- onClick={() => {
44
- setIsOpen(true);
45
- }}
46
- >
47
- Open Modal
48
- </Button>
49
- </Box>
50
- );
51
- };
52
- ```
53
-
54
- ## API
55
-
56
- This components extends the API of [react-modal package](http://reactcommunity.org/react-modal/#usage).