@ttoss/components 1.19.0 → 1.21.1

package/dist/esm/index.js

@@ -4,6 +4,7 @@
 import * as React from "react";
 
 // src/components/Accordion/Accordion.tsx
+import * as React2 from "react";
 import {
   AccordionItem,
   AccordionItemButton,
@@ -11,7 +12,9 @@ import {
   AccordionItemPanel,
   Accordion as ReactAccessibleAccordion
 } from "react-accessible-accordion";
-import { Box } from "@ttoss/ui";
+import { Box, useTheme } from "@ttoss/ui";
+import { css as createClassName } from "@emotion/css";
+import { css as transformStyleObject } from "@theme-ui/css";
 var Accordion = ({
   children,
   allowMultipleExpanded,
@@ -20,9 +23,9 @@ var Accordion = ({
   onChange,
   ...boxProps
 }) => {
-  return /* @__PURE__ */ React.createElement(Box, {
-    ...boxProps,
-    sx: {
+  const { theme } = useTheme();
+  const className = React2.useMemo(() => {
+    const styles = transformStyleObject({
       ".accordion__item": {
         marginBottom: 3
       },
@@ -34,10 +37,15 @@ var Accordion = ({
       ".accordion__button": {},
       ".accordion__panel": {
         padding: 2
-      },
-      ...boxProps.sx
-    }
-  }, /* @__PURE__ */ React.createElement(ReactAccessibleAccordion, {
+      }
+    })(theme);
+    return createClassName(styles);
+  }, [theme]);
+  return /* @__PURE__ */ React2.createElement(Box, {
+    variant: "accordion",
+    className,
+    ...boxProps
+  }, /* @__PURE__ */ React2.createElement(ReactAccessibleAccordion, {
     ...{
       allowMultipleExpanded,
       allowZeroExpanded,
@@ -52,7 +60,7 @@ Accordion.ItemHeading = AccordionItemHeading;
 Accordion.ItemPanel = AccordionItemPanel;
 
 // src/components/InstallPwa/InstallPwa.tsx
-import * as React2 from "react";
+import * as React3 from "react";
 
 // src/components/InstallPwa/InstallPwaUi.tsx
 import { Button, Flex, Text } from "@ttoss/ui";
@@ -83,9 +91,9 @@ var InstallPwaUi = ({ onInstall }) => {
 
 // src/components/InstallPwa/InstallPwa.tsx
 var InstallPwa = () => {
-  const [supportsPwa, setSupportsPwa] = React2.useState(false);
-  const [promptInstall, setPromptInstall] = React2.useState(null);
-  React2.useEffect(() => {
+  const [supportsPwa, setSupportsPwa] = React3.useState(false);
+  const [promptInstall, setPromptInstall] = React3.useState(null);
+  React3.useEffect(() => {
     const handler = (e) => {
       e.preventDefault();
       setSupportsPwa(true);
@@ -104,21 +112,21 @@ var InstallPwa = () => {
   if (!supportsPwa) {
     return null;
   }
-  return /* @__PURE__ */ React2.createElement(InstallPwaUi, {
+  return /* @__PURE__ */ React3.createElement(InstallPwaUi, {
     onInstall
   });
 };
 
 // src/components/Modal/Modal.tsx
-import { useResponsiveValue, useTheme } from "@ttoss/ui";
+import { useResponsiveValue, useTheme as useTheme2 } from "@ttoss/ui";
 import ReactModal from "react-modal";
 ReactModal.defaultStyles = {
   overlay: {},
   content: {}
 };
 var Modal = (props) => {
-  var _a, _b, _c, _d, _e, _f, _g;
-  const { theme } = useTheme();
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+  const { theme } = useTheme2();
   const padding = useResponsiveValue([
     (_a = theme.space) == null ? void 0 : _a[2],
     (_b = theme.space) == null ? void 0 : _b[3],
@@ -139,7 +147,7 @@ var Modal = (props) => {
       ...(_d = props.style) == null ? void 0 : _d.overlay
     },
     content: {
-      background: ((_f = (_e = theme.rawColors) == null ? void 0 : _e.background) == null ? void 0 : _f.toString()) || "#fff",
+      backgroundColor: ((_f = (_e = theme.rawColors) == null ? void 0 : _e.background) == null ? void 0 : _f.toString()) || "#fff",
       padding,
       WebkitOverflowScrolling: "touch",
       overflow: "auto",
@@ -148,11 +156,12 @@ var Modal = (props) => {
       left: "0px",
       right: "0px",
       bottom: "0px",
-      border: "1px solid #ccc",
+      border: "2px solid",
+      borderColor: ((_h = (_g = theme.rawColors) == null ? void 0 : _g.muted) == null ? void 0 : _h.toString()) || "#fff",
       display: "flex",
       flexDirection: "column",
       alignItems: "center",
-      ...(_g = props.style) == null ? void 0 : _g.content
+      ...(_i = props.style) == null ? void 0 : _i.content
     }
   };
   return /* @__PURE__ */ React.createElement(ReactModal, {
@@ -161,8 +170,40 @@ var Modal = (props) => {
   });
 };
 Modal.setAppElement = ReactModal.setAppElement;
+
+// src/components/Toast/Toast.tsx
+import * as React4 from "react";
+import { Box as Box2 } from "@ttoss/ui";
+import {
+  ToastContainer as ReactToastifyToastContainer,
+  ToastContainerProps,
+  toast
+} from "react-toastify";
+import { injectStyle } from "react-toastify/dist/inject-style";
+var ToastContainer = (props) => {
+  React4.useEffect(() => {
+    injectStyle();
+  }, []);
+  return /* @__PURE__ */ React4.createElement(Box2, {
+    sx: ({ colors, fonts }) => ({
+      "--toastify-color-light": "#fff",
+      "--toastify-color-dark": "#121212",
+      "--toastify-color-info": (colors == null ? void 0 : colors.info) || "#3498db",
+      "--toastify-color-success": (colors == null ? void 0 : colors.success) || "#07bc0c",
+      "--toastify-color-warning": "#f1c40f",
+      "--toastify-color-error": "#e74c3c",
+      "--toastify-color-progress-light": `linear-gradient(to right, ${colors == null ? void 0 : colors.primary}, ${colors == null ? void 0 : colors.secondary})`,
+      "--toastify-font-family": fonts.body
+    })
+  }, /* @__PURE__ */ React4.createElement(ReactToastifyToastContainer, {
+    ...props
+  }));
+};
 export {
   Accordion,
   InstallPwa,
-  Modal
+  Modal,
+  ToastContainer,
+  ToastContainerProps,
+  toast
 };

package/dist/index.d.ts

@@ -1,10 +1,11 @@
-import * as react from 'react';
 import * as react_accessible_accordion_dist_types_helpers_DisplayName from 'react-accessible-accordion/dist/types/helpers/DisplayName';
 import * as react_accessible_accordion_dist_types_components_ItemContext from 'react-accessible-accordion/dist/types/components/ItemContext';
 import * as react_accessible_accordion_dist_types_helpers_types from 'react-accessible-accordion/dist/types/helpers/types';
-import * as theme_ui_jsx_runtime from 'theme-ui/jsx-runtime';
+import * as React from 'react';
 import { BoxProps } from '@ttoss/ui';
 import ReactModal from 'react-modal';
+import { ToastContainerProps } from 'react-toastify';
+export { ToastContainerProps, toast } from 'react-toastify';
 
 declare type AccordionProps = BoxProps & {
     allowMultipleExpanded?: boolean;
@@ -16,7 +17,7 @@ declare type AccordionProps = BoxProps & {
     onChange?: (args: string[]) => void;
 };
 declare const Accordion: {
-    ({ children, allowMultipleExpanded, allowZeroExpanded, preExpanded, onChange, ...boxProps }: AccordionProps): theme_ui_jsx_runtime.JSX.Element;
+    ({ children, allowMultipleExpanded, allowZeroExpanded, preExpanded, onChange, ...boxProps }: AccordionProps): JSX.Element;
     Item: {
         ({ uuid: customUuid, dangerouslySetExpanded, className, activeClassName, ...rest }: react_accessible_accordion_dist_types_helpers_types.DivAttributes & {
             uuid?: react_accessible_accordion_dist_types_components_ItemContext.ID | undefined;
@@ -25,10 +26,10 @@ declare const Accordion: {
         }): JSX.Element;
         displayName: react_accessible_accordion_dist_types_helpers_DisplayName.default;
     };
-    ItemButton: react.FC<{
-        children?: react.ReactNode;
+    ItemButton: React.FC<{
+        children?: React.ReactNode;
         slot?: string | undefined;
-        style?: react.CSSProperties | undefined;
+        style?: React.CSSProperties | undefined;
         title?: string | undefined;
         defaultChecked?: boolean | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
@@ -70,7 +71,7 @@ declare const Accordion: {
         is?: string | undefined;
         'aria-activedescendant'?: string | undefined;
         'aria-atomic'?: (boolean | "true" | "false") | undefined;
-        'aria-autocomplete'?: "list" | "none" | "inline" | "both" | undefined;
+        'aria-autocomplete'?: "list" | "none" | "both" | "inline" | undefined;
         'aria-busy'?: (boolean | "true" | "false") | undefined;
         'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
         'aria-colcount'?: number | undefined;
@@ -79,7 +80,7 @@ declare const Accordion: {
         'aria-current'?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
         'aria-describedby'?: string | undefined;
         'aria-details'?: string | undefined;
-        'aria-dropeffect'?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
+        'aria-dropeffect'?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
         'aria-errormessage'?: string | undefined;
         'aria-flowto'?: string | undefined;
         'aria-grabbed'?: (boolean | "true" | "false") | undefined;
@@ -116,168 +117,168 @@ declare const Accordion: {
         dangerouslySetInnerHTML?: {
             __html: string;
         } | undefined;
-        onCopy?: react.ClipboardEventHandler<HTMLDivElement> | undefined;
-        onCopyCapture?: react.ClipboardEventHandler<HTMLDivElement> | undefined;
-        onCut?: react.ClipboardEventHandler<HTMLDivElement> | undefined;
-        onCutCapture?: react.ClipboardEventHandler<HTMLDivElement> | undefined;
-        onPaste?: react.ClipboardEventHandler<HTMLDivElement> | undefined;
-        onPasteCapture?: react.ClipboardEventHandler<HTMLDivElement> | undefined;
-        onCompositionEnd?: react.CompositionEventHandler<HTMLDivElement> | undefined;
-        onCompositionEndCapture?: react.CompositionEventHandler<HTMLDivElement> | undefined;
-        onCompositionStart?: react.CompositionEventHandler<HTMLDivElement> | undefined;
-        onCompositionStartCapture?: react.CompositionEventHandler<HTMLDivElement> | undefined;
-        onCompositionUpdate?: react.CompositionEventHandler<HTMLDivElement> | undefined;
-        onCompositionUpdateCapture?: react.CompositionEventHandler<HTMLDivElement> | undefined;
-        onFocus?: react.FocusEventHandler<HTMLDivElement> | undefined;
-        onFocusCapture?: react.FocusEventHandler<HTMLDivElement> | undefined;
-        onBlur?: react.FocusEventHandler<HTMLDivElement> | undefined;
-        onBlurCapture?: react.FocusEventHandler<HTMLDivElement> | undefined;
-        onChange?: react.FormEventHandler<HTMLDivElement> | undefined;
-        onChangeCapture?: react.FormEventHandler<HTMLDivElement> | undefined;
-        onBeforeInput?: react.FormEventHandler<HTMLDivElement> | undefined;
-        onBeforeInputCapture?: react.FormEventHandler<HTMLDivElement> | undefined;
-        onInput?: react.FormEventHandler<HTMLDivElement> | undefined;
-        onInputCapture?: react.FormEventHandler<HTMLDivElement> | undefined;
-        onReset?: react.FormEventHandler<HTMLDivElement> | undefined;
-        onResetCapture?: react.FormEventHandler<HTMLDivElement> | undefined;
-        onSubmit?: react.FormEventHandler<HTMLDivElement> | undefined;
-        onSubmitCapture?: react.FormEventHandler<HTMLDivElement> | undefined;
-        onInvalid?: react.FormEventHandler<HTMLDivElement> | undefined;
-        onInvalidCapture?: react.FormEventHandler<HTMLDivElement> | undefined;
-        onLoad?: react.ReactEventHandler<HTMLDivElement> | undefined;
-        onLoadCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
-        onError?: react.ReactEventHandler<HTMLDivElement> | undefined;
-        onErrorCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
-        onKeyDown?: react.KeyboardEventHandler<HTMLDivElement> | undefined;
-        onKeyDownCapture?: react.KeyboardEventHandler<HTMLDivElement> | undefined;
-        onKeyPress?: react.KeyboardEventHandler<HTMLDivElement> | undefined;
-        onKeyPressCapture?: react.KeyboardEventHandler<HTMLDivElement> | undefined;
-        onKeyUp?: react.KeyboardEventHandler<HTMLDivElement> | undefined;
-        onKeyUpCapture?: react.KeyboardEventHandler<HTMLDivElement> | undefined;
-        onAbort?: react.ReactEventHandler<HTMLDivElement> | undefined;
-        onAbortCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
-        onCanPlay?: react.ReactEventHandler<HTMLDivElement> | undefined;
-        onCanPlayCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
-        onCanPlayThrough?: react.ReactEventHandler<HTMLDivElement> | undefined;
-        onCanPlayThroughCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
-        onDurationChange?: react.ReactEventHandler<HTMLDivElement> | undefined;
-        onDurationChangeCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
-        onEmptied?: react.ReactEventHandler<HTMLDivElement> | undefined;
-        onEmptiedCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
-        onEncrypted?: react.ReactEventHandler<HTMLDivElement> | undefined;
-        onEncryptedCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
-        onEnded?: react.ReactEventHandler<HTMLDivElement> | undefined;
-        onEndedCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
-        onLoadedData?: react.ReactEventHandler<HTMLDivElement> | undefined;
-        onLoadedDataCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
-        onLoadedMetadata?: react.ReactEventHandler<HTMLDivElement> | undefined;
-        onLoadedMetadataCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
-        onLoadStart?: react.ReactEventHandler<HTMLDivElement> | undefined;
-        onLoadStartCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
-        onPause?: react.ReactEventHandler<HTMLDivElement> | undefined;
-        onPauseCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
-        onPlay?: react.ReactEventHandler<HTMLDivElement> | undefined;
-        onPlayCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
-        onPlaying?: react.ReactEventHandler<HTMLDivElement> | undefined;
-        onPlayingCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
-        onProgress?: react.ReactEventHandler<HTMLDivElement> | undefined;
-        onProgressCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
-        onRateChange?: react.ReactEventHandler<HTMLDivElement> | undefined;
-        onRateChangeCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
-        onSeeked?: react.ReactEventHandler<HTMLDivElement> | undefined;
-        onSeekedCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
-        onSeeking?: react.ReactEventHandler<HTMLDivElement> | undefined;
-        onSeekingCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
-        onStalled?: react.ReactEventHandler<HTMLDivElement> | undefined;
-        onStalledCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
-        onSuspend?: react.ReactEventHandler<HTMLDivElement> | undefined;
-        onSuspendCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
-        onTimeUpdate?: react.ReactEventHandler<HTMLDivElement> | undefined;
-        onTimeUpdateCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
-        onVolumeChange?: react.ReactEventHandler<HTMLDivElement> | undefined;
-        onVolumeChangeCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
-        onWaiting?: react.ReactEventHandler<HTMLDivElement> | undefined;
-        onWaitingCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
-        onAuxClick?: react.MouseEventHandler<HTMLDivElement> | undefined;
-        onAuxClickCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
-        onClick?: react.MouseEventHandler<HTMLDivElement> | undefined;
-        onClickCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
-        onContextMenu?: react.MouseEventHandler<HTMLDivElement> | undefined;
-        onContextMenuCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
-        onDoubleClick?: react.MouseEventHandler<HTMLDivElement> | undefined;
-        onDoubleClickCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
-        onDrag?: react.DragEventHandler<HTMLDivElement> | undefined;
-        onDragCapture?: react.DragEventHandler<HTMLDivElement> | undefined;
-        onDragEnd?: react.DragEventHandler<HTMLDivElement> | undefined;
-        onDragEndCapture?: react.DragEventHandler<HTMLDivElement> | undefined;
-        onDragEnter?: react.DragEventHandler<HTMLDivElement> | undefined;
-        onDragEnterCapture?: react.DragEventHandler<HTMLDivElement> | undefined;
-        onDragExit?: react.DragEventHandler<HTMLDivElement> | undefined;
-        onDragExitCapture?: react.DragEventHandler<HTMLDivElement> | undefined;
-        onDragLeave?: react.DragEventHandler<HTMLDivElement> | undefined;
-        onDragLeaveCapture?: react.DragEventHandler<HTMLDivElement> | undefined;
-        onDragOver?: react.DragEventHandler<HTMLDivElement> | undefined;
-        onDragOverCapture?: react.DragEventHandler<HTMLDivElement> | undefined;
-        onDragStart?: react.DragEventHandler<HTMLDivElement> | undefined;
-        onDragStartCapture?: react.DragEventHandler<HTMLDivElement> | undefined;
-        onDrop?: react.DragEventHandler<HTMLDivElement> | undefined;
-        onDropCapture?: react.DragEventHandler<HTMLDivElement> | undefined;
-        onMouseDown?: react.MouseEventHandler<HTMLDivElement> | undefined;
-        onMouseDownCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
-        onMouseEnter?: react.MouseEventHandler<HTMLDivElement> | undefined;
-        onMouseLeave?: react.MouseEventHandler<HTMLDivElement> | undefined;
-        onMouseMove?: react.MouseEventHandler<HTMLDivElement> | undefined;
-        onMouseMoveCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
-        onMouseOut?: react.MouseEventHandler<HTMLDivElement> | undefined;
-        onMouseOutCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
-        onMouseOver?: react.MouseEventHandler<HTMLDivElement> | undefined;
-        onMouseOverCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
-        onMouseUp?: react.MouseEventHandler<HTMLDivElement> | undefined;
-        onMouseUpCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
-        onSelect?: react.ReactEventHandler<HTMLDivElement> | undefined;
-        onSelectCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
-        onTouchCancel?: react.TouchEventHandler<HTMLDivElement> | undefined;
-        onTouchCancelCapture?: react.TouchEventHandler<HTMLDivElement> | undefined;
-        onTouchEnd?: react.TouchEventHandler<HTMLDivElement> | undefined;
-        onTouchEndCapture?: react.TouchEventHandler<HTMLDivElement> | undefined;
-        onTouchMove?: react.TouchEventHandler<HTMLDivElement> | undefined;
-        onTouchMoveCapture?: react.TouchEventHandler<HTMLDivElement> | undefined;
-        onTouchStart?: react.TouchEventHandler<HTMLDivElement> | undefined;
-        onTouchStartCapture?: react.TouchEventHandler<HTMLDivElement> | undefined;
-        onPointerDown?: react.PointerEventHandler<HTMLDivElement> | undefined;
-        onPointerDownCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
-        onPointerMove?: react.PointerEventHandler<HTMLDivElement> | undefined;
-        onPointerMoveCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
-        onPointerUp?: react.PointerEventHandler<HTMLDivElement> | undefined;
-        onPointerUpCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
-        onPointerCancel?: react.PointerEventHandler<HTMLDivElement> | undefined;
-        onPointerCancelCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
-        onPointerEnter?: react.PointerEventHandler<HTMLDivElement> | undefined;
-        onPointerEnterCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
-        onPointerLeave?: react.PointerEventHandler<HTMLDivElement> | undefined;
-        onPointerLeaveCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
-        onPointerOver?: react.PointerEventHandler<HTMLDivElement> | undefined;
-        onPointerOverCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
-        onPointerOut?: react.PointerEventHandler<HTMLDivElement> | undefined;
-        onPointerOutCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
-        onGotPointerCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
-        onGotPointerCaptureCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
-        onLostPointerCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
-        onLostPointerCaptureCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
-        onScroll?: react.UIEventHandler<HTMLDivElement> | undefined;
-        onScrollCapture?: react.UIEventHandler<HTMLDivElement> | undefined;
-        onWheel?: react.WheelEventHandler<HTMLDivElement> | undefined;
-        onWheelCapture?: react.WheelEventHandler<HTMLDivElement> | undefined;
-        onAnimationStart?: react.AnimationEventHandler<HTMLDivElement> | undefined;
-        onAnimationStartCapture?: react.AnimationEventHandler<HTMLDivElement> | undefined;
-        onAnimationEnd?: react.AnimationEventHandler<HTMLDivElement> | undefined;
-        onAnimationEndCapture?: react.AnimationEventHandler<HTMLDivElement> | undefined;
-        onAnimationIteration?: react.AnimationEventHandler<HTMLDivElement> | undefined;
-        onAnimationIterationCapture?: react.AnimationEventHandler<HTMLDivElement> | undefined;
-        onTransitionEnd?: react.TransitionEventHandler<HTMLDivElement> | undefined;
-        onTransitionEndCapture?: react.TransitionEventHandler<HTMLDivElement> | undefined;
+        onCopy?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
+        onCopyCapture?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
+        onCut?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
+        onCutCapture?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
+        onPaste?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
+        onPasteCapture?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
+        onCompositionEnd?: React.CompositionEventHandler<HTMLDivElement> | undefined;
+        onCompositionEndCapture?: React.CompositionEventHandler<HTMLDivElement> | undefined;
+        onCompositionStart?: React.CompositionEventHandler<HTMLDivElement> | undefined;
+        onCompositionStartCapture?: React.CompositionEventHandler<HTMLDivElement> | undefined;
+        onCompositionUpdate?: React.CompositionEventHandler<HTMLDivElement> | undefined;
+        onCompositionUpdateCapture?: React.CompositionEventHandler<HTMLDivElement> | undefined;
+        onFocus?: React.FocusEventHandler<HTMLDivElement> | undefined;
+        onFocusCapture?: React.FocusEventHandler<HTMLDivElement> | undefined;
+        onBlur?: React.FocusEventHandler<HTMLDivElement> | undefined;
+        onBlurCapture?: React.FocusEventHandler<HTMLDivElement> | undefined;
+        onChange?: React.FormEventHandler<HTMLDivElement> | undefined;
+        onChangeCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
+        onBeforeInput?: React.FormEventHandler<HTMLDivElement> | undefined;
+        onBeforeInputCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
+        onInput?: React.FormEventHandler<HTMLDivElement> | undefined;
+        onInputCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
+        onReset?: React.FormEventHandler<HTMLDivElement> | undefined;
+        onResetCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
+        onSubmit?: React.FormEventHandler<HTMLDivElement> | undefined;
+        onSubmitCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
+        onInvalid?: React.FormEventHandler<HTMLDivElement> | undefined;
+        onInvalidCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
+        onLoad?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onError?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onErrorCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onKeyDown?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
+        onKeyDownCapture?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
+        onKeyPress?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
+        onKeyPressCapture?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
+        onKeyUp?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
+        onKeyUpCapture?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
+        onAbort?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onAbortCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onCanPlay?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onCanPlayCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onCanPlayThrough?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onCanPlayThroughCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onDurationChange?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onDurationChangeCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onEmptied?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onEmptiedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onEncrypted?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onEncryptedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onEnded?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onEndedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadedData?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadedDataCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadedMetadata?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadedMetadataCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadStart?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadStartCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onPause?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onPauseCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onPlay?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onPlayCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onPlaying?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onPlayingCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onProgress?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onProgressCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onRateChange?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onRateChangeCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onSeeked?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onSeekedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onSeeking?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onSeekingCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onStalled?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onStalledCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onSuspend?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onSuspendCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onTimeUpdate?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onTimeUpdateCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onVolumeChange?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onVolumeChangeCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onWaiting?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onWaitingCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onAuxClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onAuxClickCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onClickCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onContextMenu?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onContextMenuCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onDoubleClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onDoubleClickCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onDrag?: React.DragEventHandler<HTMLDivElement> | undefined;
+        onDragCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
+        onDragEnd?: React.DragEventHandler<HTMLDivElement> | undefined;
+        onDragEndCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
+        onDragEnter?: React.DragEventHandler<HTMLDivElement> | undefined;
+        onDragEnterCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
+        onDragExit?: React.DragEventHandler<HTMLDivElement> | undefined;
+        onDragExitCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
+        onDragLeave?: React.DragEventHandler<HTMLDivElement> | undefined;
+        onDragLeaveCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
+        onDragOver?: React.DragEventHandler<HTMLDivElement> | undefined;
+        onDragOverCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
+        onDragStart?: React.DragEventHandler<HTMLDivElement> | undefined;
+        onDragStartCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
+        onDrop?: React.DragEventHandler<HTMLDivElement> | undefined;
+        onDropCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
+        onMouseDown?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseDownCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseEnter?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseLeave?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseMove?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseMoveCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseOut?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseOutCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseOver?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseOverCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseUp?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseUpCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onSelect?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onSelectCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onTouchCancel?: React.TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchCancelCapture?: React.TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchEnd?: React.TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchEndCapture?: React.TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchMove?: React.TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchMoveCapture?: React.TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchStart?: React.TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchStartCapture?: React.TouchEventHandler<HTMLDivElement> | undefined;
+        onPointerDown?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerDownCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerMove?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerMoveCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerUp?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerUpCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerCancel?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerCancelCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerEnter?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerEnterCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerLeave?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerLeaveCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerOver?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerOverCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerOut?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerOutCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onGotPointerCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onGotPointerCaptureCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onLostPointerCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onScroll?: React.UIEventHandler<HTMLDivElement> | undefined;
+        onScrollCapture?: React.UIEventHandler<HTMLDivElement> | undefined;
+        onWheel?: React.WheelEventHandler<HTMLDivElement> | undefined;
+        onWheelCapture?: React.WheelEventHandler<HTMLDivElement> | undefined;
+        onAnimationStart?: React.AnimationEventHandler<HTMLDivElement> | undefined;
+        onAnimationStartCapture?: React.AnimationEventHandler<HTMLDivElement> | undefined;
+        onAnimationEnd?: React.AnimationEventHandler<HTMLDivElement> | undefined;
+        onAnimationEndCapture?: React.AnimationEventHandler<HTMLDivElement> | undefined;
+        onAnimationIteration?: React.AnimationEventHandler<HTMLDivElement> | undefined;
+        onAnimationIterationCapture?: React.AnimationEventHandler<HTMLDivElement> | undefined;
+        onTransitionEnd?: React.TransitionEventHandler<HTMLDivElement> | undefined;
+        onTransitionEndCapture?: React.TransitionEventHandler<HTMLDivElement> | undefined;
     }>;
-    ItemHeading: react.FC<react_accessible_accordion_dist_types_helpers_types.DivAttributes>;
+    ItemHeading: React.FC<react_accessible_accordion_dist_types_helpers_types.DivAttributes>;
     ItemPanel: ({ className, region, id, ...rest }: react_accessible_accordion_dist_types_helpers_types.DivAttributes & {
         region?: boolean | undefined;
         className?: string | undefined;
@@ -292,4 +293,6 @@ declare const Modal: {
     setAppElement: typeof ReactModal.setAppElement;
 };
 
-export { Accordion, AccordionProps, InstallPwa, Modal, ModalProps };
+declare const ToastContainer: (props: ToastContainerProps) => JSX.Element;
+
+export { Accordion, AccordionProps, InstallPwa, Modal, ModalProps, ToastContainer };

package/dist/index.js

@@ -25,7 +25,10 @@ var src_exports = {};
 __export(src_exports, {
   Accordion: () => Accordion,
   InstallPwa: () => InstallPwa,
-  Modal: () => Modal
+  Modal: () => Modal,
+  ToastContainer: () => ToastContainer,
+  ToastContainerProps: () => import_react_toastify.ToastContainerProps,
+  toast: () => import_react_toastify.toast
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -33,8 +36,11 @@ module.exports = __toCommonJS(src_exports);
 var React = __toESM(require("react"));
 
 // src/components/Accordion/Accordion.tsx
+var React2 = __toESM(require("react"));
 var import_react_accessible_accordion = require("react-accessible-accordion");
 var import_ui = require("@ttoss/ui");
+var import_css = require("@emotion/css");
+var import_css2 = require("@theme-ui/css");
 var Accordion = ({
   children,
   allowMultipleExpanded,
@@ -43,9 +49,9 @@ var Accordion = ({
   onChange,
   ...boxProps
 }) => {
-  return /* @__PURE__ */ React.createElement(import_ui.Box, {
-    ...boxProps,
-    sx: {
+  const { theme } = (0, import_ui.useTheme)();
+  const className = React2.useMemo(() => {
+    const styles = (0, import_css2.css)({
       ".accordion__item": {
         marginBottom: 3
       },
@@ -57,10 +63,15 @@ var Accordion = ({
       ".accordion__button": {},
       ".accordion__panel": {
         padding: 2
-      },
-      ...boxProps.sx
-    }
-  }, /* @__PURE__ */ React.createElement(import_react_accessible_accordion.Accordion, {
+      }
+    })(theme);
+    return (0, import_css.css)(styles);
+  }, [theme]);
+  return /* @__PURE__ */ React2.createElement(import_ui.Box, {
+    variant: "accordion",
+    className,
+    ...boxProps
+  }, /* @__PURE__ */ React2.createElement(import_react_accessible_accordion.Accordion, {
     ...{
       allowMultipleExpanded,
       allowZeroExpanded,
@@ -75,7 +86,7 @@ Accordion.ItemHeading = import_react_accessible_accordion.AccordionItemHeading;
 Accordion.ItemPanel = import_react_accessible_accordion.AccordionItemPanel;
 
 // src/components/InstallPwa/InstallPwa.tsx
-var React2 = __toESM(require("react"));
+var React3 = __toESM(require("react"));
 
 // src/components/InstallPwa/InstallPwaUi.tsx
 var import_ui2 = require("@ttoss/ui");
@@ -106,9 +117,9 @@ var InstallPwaUi = ({ onInstall }) => {
 
 // src/components/InstallPwa/InstallPwa.tsx
 var InstallPwa = () => {
-  const [supportsPwa, setSupportsPwa] = React2.useState(false);
-  const [promptInstall, setPromptInstall] = React2.useState(null);
-  React2.useEffect(() => {
+  const [supportsPwa, setSupportsPwa] = React3.useState(false);
+  const [promptInstall, setPromptInstall] = React3.useState(null);
+  React3.useEffect(() => {
     const handler = (e) => {
       e.preventDefault();
       setSupportsPwa(true);
@@ -127,7 +138,7 @@ var InstallPwa = () => {
   if (!supportsPwa) {
     return null;
   }
-  return /* @__PURE__ */ React2.createElement(InstallPwaUi, {
+  return /* @__PURE__ */ React3.createElement(InstallPwaUi, {
     onInstall
   });
 };
@@ -140,7 +151,7 @@ import_react_modal.default.defaultStyles = {
   content: {}
 };
 var Modal = (props) => {
-  var _a, _b, _c, _d, _e, _f, _g;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
   const { theme } = (0, import_ui3.useTheme)();
   const padding = (0, import_ui3.useResponsiveValue)([
     (_a = theme.space) == null ? void 0 : _a[2],
@@ -162,7 +173,7 @@ var Modal = (props) => {
       ...(_d = props.style) == null ? void 0 : _d.overlay
     },
     content: {
-      background: ((_f = (_e = theme.rawColors) == null ? void 0 : _e.background) == null ? void 0 : _f.toString()) || "#fff",
+      backgroundColor: ((_f = (_e = theme.rawColors) == null ? void 0 : _e.background) == null ? void 0 : _f.toString()) || "#fff",
       padding,
       WebkitOverflowScrolling: "touch",
       overflow: "auto",
@@ -171,11 +182,12 @@ var Modal = (props) => {
       left: "0px",
       right: "0px",
       bottom: "0px",
-      border: "1px solid #ccc",
+      border: "2px solid",
+      borderColor: ((_h = (_g = theme.rawColors) == null ? void 0 : _g.muted) == null ? void 0 : _h.toString()) || "#fff",
       display: "flex",
       flexDirection: "column",
       alignItems: "center",
-      ...(_g = props.style) == null ? void 0 : _g.content
+      ...(_i = props.style) == null ? void 0 : _i.content
     }
   };
   return /* @__PURE__ */ React.createElement(import_react_modal.default, {
@@ -184,9 +196,37 @@ var Modal = (props) => {
   });
 };
 Modal.setAppElement = import_react_modal.default.setAppElement;
+
+// src/components/Toast/Toast.tsx
+var React4 = __toESM(require("react"));
+var import_ui4 = require("@ttoss/ui");
+var import_react_toastify = require("react-toastify");
+var import_inject_style = require("react-toastify/dist/inject-style");
+var ToastContainer = (props) => {
+  React4.useEffect(() => {
+    (0, import_inject_style.injectStyle)();
+  }, []);
+  return /* @__PURE__ */ React4.createElement(import_ui4.Box, {
+    sx: ({ colors, fonts }) => ({
+      "--toastify-color-light": "#fff",
+      "--toastify-color-dark": "#121212",
+      "--toastify-color-info": (colors == null ? void 0 : colors.info) || "#3498db",
+      "--toastify-color-success": (colors == null ? void 0 : colors.success) || "#07bc0c",
+      "--toastify-color-warning": "#f1c40f",
+      "--toastify-color-error": "#e74c3c",
+      "--toastify-color-progress-light": `linear-gradient(to right, ${colors == null ? void 0 : colors.primary}, ${colors == null ? void 0 : colors.secondary})`,
+      "--toastify-font-family": fonts.body
+    })
+  }, /* @__PURE__ */ React4.createElement(import_react_toastify.ToastContainer, {
+    ...props
+  }));
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,
   InstallPwa,
-  Modal
+  Modal,
+  ToastContainer,
+  ToastContainerProps,
+  toast
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/components",
-  "version": "1.19.0",
+  "version": "1.21.1",
   "description": "React components.",
   "license": "UNLICENSED",
   "publishConfig": {
@@ -31,20 +31,23 @@
     "dev": "yarn workspace @docs/storybook run dev"
   },
   "dependencies": {
+    "@emotion/css": "^11.10.0",
+    "@theme-ui/css": "^0.14.7",
     "@types/react-modal": "^3.13.1",
     "react-accessible-accordion": "^5.0.0",
-    "react-modal": "^3.15.1"
+    "react-modal": "^3.15.1",
+    "react-toastify": "^9.0.8"
   },
   "peerDependencies": {
     "@ttoss/ui": "^1.16.5",
     "react": ">=16.8.0"
   },
   "devDependencies": {
-    "@ttoss/config": "^1.15.2",
-    "@ttoss/test-utils": "^1.15.2",
-    "@ttoss/ui": "^1.18.0",
+    "@ttoss/config": "^1.17.0",
+    "@ttoss/test-utils": "^1.16.6",
+    "@ttoss/ui": "^1.19.0",
     "@types/jest": "^28.1.5",
     "jest": "^28.1.3"
   },
-  "gitHead": "2727f2809df7ce542f0fd3b953163a300e60cb68"
+  "gitHead": "db9d943fedab3b0e2fab1752e9436130fdb351fa"
 }

package/src/components/Accordion/Accordion.tsx

@@ -1,5 +1,4 @@
-/** @jsxImportSource theme-ui */
-
+import * as React from 'react';
 import {
   AccordionItem,
   AccordionItemButton,
@@ -7,7 +6,9 @@ import {
   AccordionItemPanel,
   Accordion as ReactAccessibleAccordion,
 } from 'react-accessible-accordion';
-import { Box, BoxProps } from '@ttoss/ui';
+import { Box, BoxProps, useTheme } from '@ttoss/ui';
+import { css as createClassName } from '@emotion/css';
+import { css as transformStyleObject } from '@theme-ui/css';
 
 export type AccordionProps = BoxProps & {
   // https://github.com/springload/react-accessible-accordion#accordion
@@ -28,25 +29,29 @@ export const Accordion = ({
   onChange,
   ...boxProps
 }: AccordionProps) => {
+  const { theme } = useTheme();
+
+  const className = React.useMemo(() => {
+    const styles = transformStyleObject({
+      '.accordion__item': {
+        marginBottom: 3,
+      },
+      '.accordion__heading': {
+        padding: 2,
+        border: '1px solid',
+        borderColor: 'black',
+      },
+      '.accordion__button': {},
+      '.accordion__panel': {
+        padding: 2,
+      },
+    })(theme);
+
+    return createClassName(styles);
+  }, [theme]);
+
   return (
-    <Box
-      {...boxProps}
-      sx={{
-        '.accordion__item': {
-          marginBottom: 3,
-        },
-        '.accordion__heading': {
-          padding: 2,
-          border: '1px solid',
-          borderColor: 'black',
-        },
-        '.accordion__button': {},
-        '.accordion__panel': {
-          padding: 2,
-        },
-        ...boxProps.sx,
-      }}
-    >
+    <Box variant="accordion" className={className} {...boxProps}>
       <ReactAccessibleAccordion
         {...{
           allowMultipleExpanded,

package/src/components/Modal/Modal.tsx

@@ -36,7 +36,7 @@ export const Modal = (props: ModalProps) => {
       /**
        * Theme
        */
-      background: theme.rawColors?.background?.toString() || '#fff',
+      backgroundColor: theme.rawColors?.background?.toString() || '#fff',
       padding,
       /**
        * General
@@ -48,7 +48,8 @@ export const Modal = (props: ModalProps) => {
       left: '0px',
       right: '0px',
       bottom: '0px',
-      border: '1px solid #ccc',
+      border: '2px solid',
+      borderColor: theme.rawColors?.muted?.toString() || '#fff',
       display: 'flex',
       flexDirection: 'column',
       alignItems: 'center',

package/src/components/Toast/Toast.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { Box } from '@ttoss/ui';
+import {
+  ToastContainer as ReactToastifyToastContainer,
+  ToastContainerProps,
+  toast,
+} from 'react-toastify';
+import { injectStyle } from 'react-toastify/dist/inject-style';
+
+export { toast, ToastContainerProps };
+
+export const ToastContainer = (props: ToastContainerProps) => {
+  React.useEffect(() => {
+    injectStyle();
+  }, []);
+
+  return (
+    <Box
+      sx={({ colors, fonts }) => ({
+        '--toastify-color-light': '#fff',
+        '--toastify-color-dark': '#121212',
+        '--toastify-color-info': colors?.info || '#3498db',
+        '--toastify-color-success': colors?.success || '#07bc0c',
+        '--toastify-color-warning': '#f1c40f',
+        '--toastify-color-error': '#e74c3c',
+        '--toastify-color-progress-light': `linear-gradient(to right, ${colors?.primary}, ${colors?.secondary})`,
+        '--toastify-font-family': (fonts as { body: string }).body,
+      })}
+    >
+      <ReactToastifyToastContainer {...props} />
+    </Box>
+  );
+};

package/src/index.spec.tsx

@@ -4,6 +4,8 @@ test.each([
   componentsModule.Accordion,
   componentsModule.InstallPwa,
   componentsModule.Modal,
+  componentsModule.ToastContainer,
+  componentsModule.toast,
 ])('should export components %#', (Component) => {
   expect(Component).toBeDefined();
 });

package/src/index.ts

@@ -1,3 +1,4 @@
 export * from './components/Accordion/Accordion';
 export * from './components/InstallPwa/InstallPwa';
 export * from './components/Modal/Modal';
+export * from './components/Toast/Toast';

package/src/components/Accordion/Accordion.docs.md

@@ -1,57 +0,0 @@
-# Accordion
-
-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.
-
-## Storybook
-
-[Stories](https://storybook.ttoss.dev/?path=/story/components-accordion)
-
-## Example
-
-```jsx
-import { Accordion } from "@ttoss/components";
-import { Text } from "@ttoss/ui";
-
-const MyAccordion = () => {
-  return (
-    <Accordion>
-      <Accordion.Item>
-        <Accordion.ItemHeading>
-          <Accordion.ItemButton>
-            What harsh truths do you prefer to ignore?
-          </Accordion.ItemButton>
-        </Accordion.ItemHeading>
-        <Accordion.ItemPanel>
-          <Text>
-            Exercitation in fugiat est ut ad ea cupidatat ut in cupidatat
-            occaecat ut occaecat consequat est minim minim esse tempor laborum
-            consequat esse adipisicing eu reprehenderit enim.
-          </Text>
-        </Accordion.ItemPanel>
-      </Accordion.Item>
-      <Accordion.Item>
-        <Accordion.ItemHeading>
-          <Accordion.ItemButton>
-            Is free will real or just an illusion?
-          </Accordion.ItemButton>
-        </Accordion.ItemHeading>
-        <Accordion.ItemPanel>
-          <Text>
-            In ad velit in ex nostrud dolore cupidatat consectetur ea in ut
-            nostrud velit in irure cillum tempor laboris sed adipisicing eu esse
-            duis nulla non.
-          </Text>
-        </Accordion.ItemPanel>
-      </Accordion.Item>
-    </Accordion>
-  );
-};
-```
-
-## API
-
-TODO
-
-## Styles
-
-TODO

package/src/components/Modal/Modal.docs.md

@@ -1,56 +0,0 @@
-# Modal
-
-This components uses [react-modal package](http://reactcommunity.org/react-modal) as a base and apply [@ttoss/ui](/docs/modules/packages/ui/) styles.
-
-## Storybook
-
-[Stories](https://storybook.ttoss.dev/?path=/story/components-modal)
-
-## Example
-
-```jsx
-import { Modal } from "@ttoss/components";
-import { Box, Flex, Text } from "@ttoss/ui";
-
-const Component = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
-
-  return (
-    <Box>
-      <Modal
-        isOpen={isOpen}
-        onRequestClose={() => {
-          setIsOpen(false);
-        }}
-      >
-        <Flex
-          sx={{
-            flexDirection: "column",
-            alignItems: "center",
-          }}
-        >
-          <Text>This is a modal.</Text>
-          <Button
-            onClick={() => {
-              setIsOpen(false);
-            }}
-          >
-            Close Modal
-          </Button>
-        </Flex>
-      </Modal>
-      <Button
-        onClick={() => {
-          setIsOpen(true);
-        }}
-      >
-        Open Modal
-      </Button>
-    </Box>
-  );
-};
-```
-
-## API
-
-This components extends the API of [react-modal package](http://reactcommunity.org/react-modal/#usage).