@ttoss/ui 1.16.0 → 1.18.0

package/README.md

@@ -17,12 +17,12 @@ $ npm install @ttoss/ui
 ## 📄 Examples of use
 
 ```tsx
-import { Flex, Text, Box, Button } from '@ttoss/ui';
+import { Flex, Text, Box, Button } from "@ttoss/ui";
 
 const App = () => {
   return (
     <ThemeProvider>
-      <Flex sx={{ flexDirection: 'column' }}>
+      <Flex sx={{ flexDirection: "column" }}>
         <Text>Text Value</Text>
         <Box>
           <Text>Text Value</Text>
@@ -44,9 +44,8 @@ You can pass fonts URLs to `ThemeProvider` component thought `fonts` prop.
 ```tsx
 <ThemeProvider
   fonts={[
-    'https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap',
-    ,
-    'https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap',
+    "https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap",
+    "https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap",
   ]}
 >
   <App />

package/dist/esm/index.js

@@ -1,35 +1,15 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+"use strict";
 
 // tsup.inject.js
 import * as React from "react";
 
 // src/index.ts
-import * as color from "@theme-ui/color";
 import { useResponsiveValue, useBreakpointIndex } from "@theme-ui/match-media";
-import { Themed } from "@theme-ui/mdx";
 
 // src/theme/ThemeProvider.tsx
-import { Global, css } from "@emotion/react";
-import { ThemeProvider as ThemeUiProvider, merge } from "@theme-ui/core";
 import * as React2 from "react";
+import { Global, css } from "@emotion/react";
+import { ThemeProvider as ThemeUiProvider, merge } from "theme-ui";
 
 // src/theme/defaultFonts.ts
 var defaultFonts = [
@@ -134,116 +114,75 @@ var ThemeProvider = ({
     styles: css`
               @import url('${url}');
             `
-  })), /* @__PURE__ */ React2.createElement(Global, {
-    styles: {
-      "*": {
-        margin: 0
-      }
-    }
-  }), children));
+  })), children));
 };
 var ThemeProvider_default = ThemeProvider;
 
 // src/theme/useTheme.ts
-import { useThemeUI } from "@theme-ui/core";
+import { useThemeUI } from "theme-ui";
 var useTheme = useThemeUI;
 
 // src/components/Box/Box.tsx
-import { Box } from "@theme-ui/components";
+import { Box } from "theme-ui";
 
 // src/components/Button/Button.tsx
-import { Button as ButtonUi } from "@theme-ui/components";
+import { Button as ButtonUi } from "theme-ui";
 var Button = (props) => {
-  return /* @__PURE__ */ React.createElement(ButtonUi, __spreadProps(__spreadValues({}, props), {
-    sx: __spreadValues({ cursor: "pointer", fontFamily: "body" }, props.sx)
-  }));
+  return /* @__PURE__ */ React.createElement(ButtonUi, {
+    ...props,
+    sx: { cursor: "pointer", fontFamily: "body", ...props.sx }
+  });
 };
-var Button_default = Button;
 
 // src/components/Card/Card.tsx
-import { Card } from "@theme-ui/components";
+import { Card } from "theme-ui";
 
 // src/components/Divider/Divider.tsx
-import { Divider, DividerProps } from "@theme-ui/components";
+import { Divider } from "theme-ui";
 
 // src/components/Flex/Flex.tsx
-import { Flex } from "@theme-ui/components";
-
-// src/components/FormField/FormField.tsx
-import * as React3 from "react";
-
-// src/components/Label/Label.tsx
-import { Label } from "@theme-ui/components";
-
-// src/components/Text/Text.tsx
-import { Text } from "@theme-ui/components";
-
-// src/components/FormField/FormField.tsx
-var FormField = ({ children, label, error }) => {
-  const errorAsArray = (() => {
-    if (Array.isArray(error)) {
-      return error;
-    }
-    if (typeof error === "string") {
-      return [error];
-    }
-    return [];
-  })();
-  return /* @__PURE__ */ React3.createElement(Box, null, /* @__PURE__ */ React3.createElement(Label, {
-    sx: { display: "flex", flexDirection: "column" }
-  }, label && /* @__PURE__ */ React3.createElement(Text, {
-    as: "span"
-  }, label), children), errorAsArray.map((err) => /* @__PURE__ */ React3.createElement(Text, {
-    key: err,
-    as: "span",
-    variant: "error"
-  }, err)));
-};
-var FormField_default = FormField;
+import { Flex } from "theme-ui";
 
 // src/components/Grid/Grid.tsx
-import { Grid } from "@theme-ui/components";
+import { Grid } from "theme-ui";
 
 // src/components/Heading/Heading.tsx
-import { Heading, HeadingProps } from "@theme-ui/components";
+import { Heading } from "theme-ui";
 
 // src/components/Image/Image.tsx
-import { Image } from "@theme-ui/components";
+import { Image } from "theme-ui";
 
 // src/components/Input/Input.tsx
-import { Input } from "@theme-ui/components";
+import { Input } from "theme-ui";
 
 // src/components/Link/Link.tsx
-import { Link } from "@theme-ui/components";
+import { Link } from "theme-ui";
 
 // src/components/LinearProgress/LinearProgress.tsx
-import { Progress } from "@theme-ui/components";
-var LinearProgress = Progress;
+import {
+  Progress
+} from "theme-ui";
 
-// src/components/Select/Select.tsx
-import { Select } from "@theme-ui/components";
+// src/components/Text/Text.tsx
+import { Text } from "theme-ui";
 
-// src/components/Spinner/Spinner.tsx
-import { Spinner } from "@theme-ui/components";
+// src/components/Select/Select.tsx
+import { Select } from "theme-ui";
 export {
   Box,
-  Button_default as Button,
+  Button,
   Card,
   Divider,
   Flex,
-  FormField_default as FormField,
   Grid,
   Heading,
   Image,
   Input,
-  LinearProgress,
+  Progress as LinearProgress,
   Link,
   Select,
-  Spinner,
   Text,
   ThemeProvider_default as ThemeProvider,
-  Themed,
-  color,
   useBreakpointIndex,
   useResponsiveValue,
   useTheme

package/dist/index.d.ts

@@ -1,14 +1,8 @@
-import * as color from '@theme-ui/color';
-export { color };
-import * as _theme_ui_core from '@theme-ui/core';
-import { Theme } from '@theme-ui/core';
-export { Theme } from '@theme-ui/core';
+import * as theme_ui from 'theme-ui';
+import { Theme, ButtonProps } from 'theme-ui';
+export { Box, BoxProps, ButtonProps, Card, CardProps, Divider, DividerProps, Flex, FlexProps, Grid, GridProps, Heading, HeadingProps, Image, ImageProps, Input, InputProps, Progress as LinearProgress, ProgressProps as LinearProgressProps, Link, LinkProps, Select, SelectProps, Text, TextProps, Theme } from 'theme-ui';
 export { useBreakpointIndex, useResponsiveValue } from '@theme-ui/match-media';
-export { Themed } from '@theme-ui/mdx';
 import * as React from 'react';
-import { ButtonProps, ProgressProps } from '@theme-ui/components';
-export { Box, BoxProps, ButtonProps, Card, CardProps, Divider, DividerProps, Flex, FlexProps, Grid, GridProps, Heading, HeadingProps, Image, ImageProps, Input, InputProps, Link, LinkProps, Select, SelectProps, Spinner, SpinnerProps, Text, TextProps } from '@theme-ui/components';
-import * as _theme_ui_components_dist_declarations_src_types from '@theme-ui/components/dist/declarations/src/types';
 
 declare type ThemeProviderProps = {
     children?: React.ReactNode;
@@ -20,18 +14,8 @@ declare type ThemeProviderProps = {
 };
 declare const ThemeProvider: ({ children, theme, fonts, }: ThemeProviderProps) => JSX.Element;
 
-declare const useTheme: () => _theme_ui_core.ThemeUIContextValue;
+declare const useTheme: () => theme_ui.ThemeUIContextValue;
 
 declare const Button: (props: ButtonProps) => JSX.Element;
 
-declare type FormFieldProps = {
-    children?: React.ReactNode;
-    label?: string;
-    error?: string[] | string;
-};
-declare const FormField: ({ children, label, error }: FormFieldProps) => JSX.Element;
-
-declare type LinearProgressProps = ProgressProps;
-declare const LinearProgress: _theme_ui_components_dist_declarations_src_types.ForwardRef<HTMLProgressElement, ProgressProps>;
-
-export { Button, FormField, FormFieldProps, LinearProgress, LinearProgressProps, ThemeProvider, ThemeProviderProps, useTheme };
+export { Button, ThemeProvider, ThemeProviderProps, useTheme };

package/dist/index.js

@@ -1,26 +1,10 @@
+"use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -39,24 +23,20 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
-  Box: () => import_components.Box,
-  Button: () => Button_default,
-  Card: () => import_components3.Card,
-  Divider: () => import_components4.Divider,
-  Flex: () => import_components5.Flex,
-  FormField: () => FormField_default,
-  Grid: () => import_components8.Grid,
-  Heading: () => import_components9.Heading,
-  Image: () => import_components10.Image,
-  Input: () => import_components11.Input,
-  LinearProgress: () => LinearProgress,
-  Link: () => import_components12.Link,
-  Select: () => import_components14.Select,
-  Spinner: () => import_components15.Spinner,
-  Text: () => import_components7.Text,
+  Box: () => import_theme_ui3.Box,
+  Button: () => Button,
+  Card: () => import_theme_ui5.Card,
+  Divider: () => import_theme_ui6.Divider,
+  Flex: () => import_theme_ui7.Flex,
+  Grid: () => import_theme_ui8.Grid,
+  Heading: () => import_theme_ui9.Heading,
+  Image: () => import_theme_ui10.Image,
+  Input: () => import_theme_ui11.Input,
+  LinearProgress: () => import_theme_ui13.Progress,
+  Link: () => import_theme_ui12.Link,
+  Select: () => import_theme_ui15.Select,
+  Text: () => import_theme_ui14.Text,
   ThemeProvider: () => ThemeProvider_default,
-  Themed: () => import_mdx.Themed,
-  color: () => color,
   useBreakpointIndex: () => import_match_media.useBreakpointIndex,
   useResponsiveValue: () => import_match_media.useResponsiveValue,
   useTheme: () => useTheme
@@ -67,14 +47,12 @@ module.exports = __toCommonJS(src_exports);
 var React = __toESM(require("react"));
 
 // src/index.ts
-var color = __toESM(require("@theme-ui/color"));
 var import_match_media = require("@theme-ui/match-media");
-var import_mdx = require("@theme-ui/mdx");
 
 // src/theme/ThemeProvider.tsx
-var import_react = require("@emotion/react");
-var import_core = require("@theme-ui/core");
 var React2 = __toESM(require("react"));
+var import_react = require("@emotion/react");
+var import_theme_ui = require("theme-ui");
 
 // src/theme/defaultFonts.ts
 var defaultFonts = [
@@ -170,106 +148,67 @@ var ThemeProvider = ({
     if (typeof theme === "function") {
       return theme;
     }
-    return (0, import_core.merge)(defaultTheme, theme);
+    return (0, import_theme_ui.merge)(defaultTheme, theme);
   }, [theme]);
-  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(import_core.ThemeProvider, {
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(import_theme_ui.ThemeProvider, {
     theme: mergedTheme
   }, fonts.map((url) => /* @__PURE__ */ React2.createElement(import_react.Global, {
     key: url,
     styles: import_react.css`
               @import url('${url}');
             `
-  })), /* @__PURE__ */ React2.createElement(import_react.Global, {
-    styles: {
-      "*": {
-        margin: 0
-      }
-    }
-  }), children));
+  })), children));
 };
 var ThemeProvider_default = ThemeProvider;
 
 // src/theme/useTheme.ts
-var import_core2 = require("@theme-ui/core");
-var useTheme = import_core2.useThemeUI;
+var import_theme_ui2 = require("theme-ui");
+var useTheme = import_theme_ui2.useThemeUI;
 
 // src/components/Box/Box.tsx
-var import_components = require("@theme-ui/components");
+var import_theme_ui3 = require("theme-ui");
 
 // src/components/Button/Button.tsx
-var import_components2 = require("@theme-ui/components");
+var import_theme_ui4 = require("theme-ui");
 var Button = (props) => {
-  return /* @__PURE__ */ React.createElement(import_components2.Button, __spreadProps(__spreadValues({}, props), {
-    sx: __spreadValues({ cursor: "pointer", fontFamily: "body" }, props.sx)
-  }));
+  return /* @__PURE__ */ React.createElement(import_theme_ui4.Button, {
+    ...props,
+    sx: { cursor: "pointer", fontFamily: "body", ...props.sx }
+  });
 };
-var Button_default = Button;
 
 // src/components/Card/Card.tsx
-var import_components3 = require("@theme-ui/components");
+var import_theme_ui5 = require("theme-ui");
 
 // src/components/Divider/Divider.tsx
-var import_components4 = require("@theme-ui/components");
+var import_theme_ui6 = require("theme-ui");
 
 // src/components/Flex/Flex.tsx
-var import_components5 = require("@theme-ui/components");
-
-// src/components/FormField/FormField.tsx
-var React3 = __toESM(require("react"));
-
-// src/components/Label/Label.tsx
-var import_components6 = require("@theme-ui/components");
-
-// src/components/Text/Text.tsx
-var import_components7 = require("@theme-ui/components");
-
-// src/components/FormField/FormField.tsx
-var FormField = ({ children, label, error }) => {
-  const errorAsArray = (() => {
-    if (Array.isArray(error)) {
-      return error;
-    }
-    if (typeof error === "string") {
-      return [error];
-    }
-    return [];
-  })();
-  return /* @__PURE__ */ React3.createElement(import_components.Box, null, /* @__PURE__ */ React3.createElement(import_components6.Label, {
-    sx: { display: "flex", flexDirection: "column" }
-  }, label && /* @__PURE__ */ React3.createElement(import_components7.Text, {
-    as: "span"
-  }, label), children), errorAsArray.map((err) => /* @__PURE__ */ React3.createElement(import_components7.Text, {
-    key: err,
-    as: "span",
-    variant: "error"
-  }, err)));
-};
-var FormField_default = FormField;
+var import_theme_ui7 = require("theme-ui");
 
 // src/components/Grid/Grid.tsx
-var import_components8 = require("@theme-ui/components");
+var import_theme_ui8 = require("theme-ui");
 
 // src/components/Heading/Heading.tsx
-var import_components9 = require("@theme-ui/components");
+var import_theme_ui9 = require("theme-ui");
 
 // src/components/Image/Image.tsx
-var import_components10 = require("@theme-ui/components");
+var import_theme_ui10 = require("theme-ui");
 
 // src/components/Input/Input.tsx
-var import_components11 = require("@theme-ui/components");
+var import_theme_ui11 = require("theme-ui");
 
 // src/components/Link/Link.tsx
-var import_components12 = require("@theme-ui/components");
+var import_theme_ui12 = require("theme-ui");
 
 // src/components/LinearProgress/LinearProgress.tsx
-var import_components13 = require("@theme-ui/components");
-var LinearProgress = import_components13.Progress;
+var import_theme_ui13 = require("theme-ui");
 
-// src/components/Select/Select.tsx
-var import_components14 = require("@theme-ui/components");
+// src/components/Text/Text.tsx
+var import_theme_ui14 = require("theme-ui");
 
-// src/components/Spinner/Spinner.tsx
-var import_components15 = require("@theme-ui/components");
+// src/components/Select/Select.tsx
+var import_theme_ui15 = require("theme-ui");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Box,
@@ -277,7 +216,6 @@ var import_components15 = require("@theme-ui/components");
   Card,
   Divider,
   Flex,
-  FormField,
   Grid,
   Heading,
   Image,
@@ -285,11 +223,8 @@ var import_components15 = require("@theme-ui/components");
   LinearProgress,
   Link,
   Select,
-  Spinner,
   Text,
   ThemeProvider,
-  Themed,
-  color,
   useBreakpointIndex,
   useResponsiveValue,
   useTheme

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/ui",
-  "version": "1.16.0",
+  "version": "1.18.0",
   "description": "Primitive layout, typographic, and other components for styling applications.",
   "license": "UNLICENSED",
   "publishConfig": {
@@ -33,20 +33,19 @@
   },
   "dependencies": {
     "@emotion/react": "^11",
-    "@emotion/styled": "^11",
     "@mdx-js/react": "^1",
-    "@theme-ui/color": "^0.14.3",
-    "@theme-ui/components": "^0.14.3",
-    "@theme-ui/core": "^0.14.3",
     "@theme-ui/match-media": "^0.14.3",
-    "@theme-ui/mdx": "^0.14.3"
+    "theme-ui": "^0.14.6"
   },
   "peerDependencies": {
-    "react": ">=16.8.0"
+    "react": ">=18.0.0"
   },
   "devDependencies": {
-    "@ttoss/config": "^1.16.0",
-    "@ttoss/test-utils": "^1.16.0"
+    "@ttoss/config": "^1.16.1",
+    "@ttoss/test-utils": "^1.16.5",
+    "@types/jest": "^28.1.3",
+    "jest": "^28.1.1",
+    "tsup": "^6.1.2"
   },
-  "gitHead": "0412266ba0223a5b42904254a13d96473006e0a3"
+  "gitHead": "38d76661c6302b6447804375cd0193be9056b446"
 }

package/src/components/Box/Box.tsx

@@ -1,3 +1 @@
-export { Box as default } from '@theme-ui/components';
-
-export type { BoxProps } from '@theme-ui/components';
+export { Box, type BoxProps } from 'theme-ui';

package/src/components/Button/Button.tsx

@@ -1,10 +1,8 @@
-import { Button as ButtonUi } from '@theme-ui/components';
-
-import type { ButtonProps } from '@theme-ui/components';
+import { type ButtonProps, Button as ButtonUi } from 'theme-ui';
 
 export type { ButtonProps };
 
-const Button = (props: ButtonProps) => {
+export const Button = (props: ButtonProps) => {
   return (
     <ButtonUi
       {...props}
@@ -12,5 +10,3 @@ const Button = (props: ButtonProps) => {
     />
   );
 };
-
-export default Button;

package/src/components/Card/Card.tsx

@@ -1,3 +1 @@
-export { Card as default } from '@theme-ui/components';
-
-export type { CardProps } from '@theme-ui/components';
+export { Card, type CardProps } from 'theme-ui';

package/src/components/Divider/Divider.tsx

@@ -1 +1 @@
-export { Divider, DividerProps } from '@theme-ui/components';
+export { Divider, type DividerProps } from 'theme-ui';

package/src/components/Flex/Flex.tsx

@@ -1,3 +1 @@
-export { Flex as default } from '@theme-ui/components';
-
-export type { FlexProps } from '@theme-ui/components';
+export { Flex, type FlexProps } from 'theme-ui';

package/src/components/Grid/Grid.tsx

@@ -1 +1 @@
-export { Grid, type GridProps } from '@theme-ui/components';
+export { Grid, type GridProps } from 'theme-ui';

package/src/components/Heading/Heading.tsx

@@ -1 +1 @@
-export { Heading, HeadingProps } from '@theme-ui/components';
+export { Heading, type HeadingProps } from 'theme-ui';

package/src/components/Image/Image.tsx

@@ -1,3 +1 @@
-export { Image as default } from '@theme-ui/components';
-
-export type { ImageProps } from '@theme-ui/components';
+export { Image, type ImageProps } from 'theme-ui';

package/src/components/Input/Input.tsx

@@ -1,3 +1 @@
-export { Input as default } from '@theme-ui/components';
-
-export type { InputProps } from '@theme-ui/components';
+export { Input, type InputProps } from 'theme-ui';

package/src/components/Label/Label.tsx

@@ -1,3 +1 @@
-export { Label as default } from '@theme-ui/components';
-
-export type { LabelProps } from '@theme-ui/components';
+export { Label, type LabelProps } from 'theme-ui';

package/src/components/LinearProgress/LinearProgress.tsx

@@ -1,5 +1,4 @@
-import { Progress, ProgressProps } from '@theme-ui/components';
-
-export type LinearProgressProps = ProgressProps;
-
-export const LinearProgress = Progress;
+export {
+  Progress as LinearProgress,
+  type ProgressProps as LinearProgressProps,
+} from 'theme-ui';

package/src/components/Link/Link.tsx

@@ -1,3 +1 @@
-export { Link as default } from '@theme-ui/components';
-
-export type { LinkProps } from '@theme-ui/components';
+export { Link, type LinkProps } from 'theme-ui';

package/src/components/Select/Select.tsx

@@ -1,3 +1 @@
-export { Select as default } from '@theme-ui/components';
-
-export type { SelectProps } from '@theme-ui/components';
+export { Select, type SelectProps } from 'theme-ui';

package/src/components/Text/Text.tsx

@@ -1,3 +1 @@
-export { Text as default } from '@theme-ui/components';
-
-export type { TextProps } from '@theme-ui/components';
+export { Text, type TextProps } from 'theme-ui';

package/src/index.ts

@@ -1,7 +1,5 @@
-export * as color from '@theme-ui/color';
-export type { Theme } from '@theme-ui/core';
+export type { Theme } from 'theme-ui';
 export { useResponsiveValue, useBreakpointIndex } from '@theme-ui/match-media';
-export { Themed } from '@theme-ui/mdx';
 
 export {
   default as ThemeProvider,
@@ -10,33 +8,19 @@ export {
 
 export { useTheme } from './theme/useTheme';
 
-export { default as Box, type BoxProps } from './components/Box/Box';
-export {
-  default as Button,
-  type ButtonProps,
-} from './components/Button/Button';
-export { default as Card, type CardProps } from './components/Card/Card';
+export { Box, type BoxProps } from './components/Box/Box';
+export { Button, type ButtonProps } from './components/Button/Button';
+export { Card, type CardProps } from './components/Card/Card';
 export { Divider, type DividerProps } from './components/Divider/Divider';
-export { default as Flex, type FlexProps } from './components/Flex/Flex';
-export {
-  default as FormField,
-  type FormFieldProps,
-} from './components/FormField/FormField';
+export { Flex, type FlexProps } from './components/Flex/Flex';
 export { Grid, type GridProps } from './components/Grid/Grid';
 export { Heading, type HeadingProps } from './components/Heading/Heading';
-export { default as Image, type ImageProps } from './components/Image/Image';
-export { default as Input, type InputProps } from './components/Input/Input';
-export { default as Link, type LinkProps } from './components/Link/Link';
+export { Image, type ImageProps } from './components/Image/Image';
+export { Input, type InputProps } from './components/Input/Input';
+export { Link, type LinkProps } from './components/Link/Link';
 export {
   LinearProgress,
   type LinearProgressProps,
 } from './components/LinearProgress/LinearProgress';
-export { default as Text, type TextProps } from './components/Text/Text';
-export {
-  default as Select,
-  type SelectProps,
-} from './components/Select/Select';
-export {
-  default as Spinner,
-  type SpinnerProps,
-} from './components/Spinner/Spinner'
+export { Text, type TextProps } from './components/Text/Text';
+export { Select, type SelectProps } from './components/Select/Select';

package/src/theme/ThemeProvider.spec.tsx

@@ -1,8 +1,7 @@
-import { renderHook } from '@ttoss/test-utils';
-
 import { defaultTheme } from './defaultTheme';
-import ThemeProvider from './ThemeProvider';
+import { renderHook } from '@ttoss/test-utils';
 import { useTheme } from './useTheme';
+import ThemeProvider from './ThemeProvider';
 
 test('should return default theme colors', () => {
   const { result } = renderHook(() => useTheme(), {
@@ -10,30 +9,33 @@ test('should return default theme colors', () => {
     initialProps: { theme: {} },
   });
 
-  expect(result.current.theme.colors).toEqual(defaultTheme.colors);
+  expect(result.current.theme.rawColors).toEqual(defaultTheme.colors);
 });
 
 test('should return new theme colors', () => {
   const newColor = '#000';
 
   const { result } = renderHook(() => useTheme(), {
-    wrapper: ThemeProvider,
-    initialProps: {
-      theme: {
-        colors: {
-          background: newColor,
-          text: newColor,
-          primary: newColor,
-          secondary: newColor,
-        },
-      },
-    },
+    wrapper: ({ children }: any) => (
+      <ThemeProvider
+        theme={{
+          colors: {
+            background: newColor,
+            text: newColor,
+            primary: newColor,
+            secondary: newColor,
+          },
+        }}
+      >
+        {children}
+      </ThemeProvider>
+    ),
   });
 
-  expect(result.current.theme.colors?.background).toEqual(newColor);
-  expect(result.current.theme.colors?.text).toEqual(newColor);
-  expect(result.current.theme.colors?.primary).toEqual(newColor);
-  expect(result.current.theme.colors?.secondary).toEqual(newColor);
+  expect(result.current.theme.rawColors?.background).toEqual(newColor);
+  expect(result.current.theme.rawColors?.text).toEqual(newColor);
+  expect(result.current.theme.rawColors?.primary).toEqual(newColor);
+  expect(result.current.theme.rawColors?.secondary).toEqual(newColor);
 });
 
 test('should pass variants', () => {
@@ -55,13 +57,16 @@ test('should pass variants', () => {
   };
 
   const { result } = renderHook(() => useTheme(), {
-    wrapper: ThemeProvider,
-    initialProps: {
-      theme: {
-        colors: {},
-        ...variants,
-      },
-    },
+    wrapper: ({ children }: any) => (
+      <ThemeProvider
+        theme={{
+          colors: {},
+          ...variants,
+        }}
+      >
+        {children}
+      </ThemeProvider>
+    ),
   });
 
   expect(result.current.theme.cards).toEqual(

package/src/theme/ThemeProvider.tsx

@@ -1,7 +1,6 @@
-import { Global, css } from '@emotion/react';
-import { ThemeProvider as ThemeUiProvider, Theme, merge } from '@theme-ui/core';
 import * as React from 'react';
-
+import { Global, css } from '@emotion/react';
+import { Theme, ThemeProvider as ThemeUiProvider, merge } from 'theme-ui';
 import { defaultFonts } from './defaultFonts';
 import { defaultTheme } from './defaultTheme';
 
@@ -38,13 +37,6 @@ const ThemeProvider = ({
             `}
           />
         ))}
-        <Global
-          styles={{
-            '*': {
-              margin: 0,
-            },
-          }}
-        />
         {children}
       </ThemeUiProvider>
     </>

package/src/theme/defaultTheme.ts

@@ -1,4 +1,4 @@
-import { Theme } from '@theme-ui/core';
+import { Theme } from 'theme-ui';
 
 export const defaultTheme: Theme = {
   colors: {

package/src/theme/useTheme.ts

@@ -1,3 +1,3 @@
-import { useThemeUI } from '@theme-ui/core';
+import { useThemeUI } from 'theme-ui';
 
 export const useTheme = useThemeUI;

package/src/components/FormField/FormField.spec.tsx

@@ -1,54 +0,0 @@
-import { render, screen } from '@ttoss/test-utils';
-
-import Input from '../Input/Input';
-
-import FormField from './FormField';
-
-const label = 'Label';
-const value = 'Value';
-
-test('check if label is rendered on screen', () => {
-  render(
-    <FormField label={label}>
-      <Input defaultValue={value} />
-    </FormField>
-  );
-
-  expect(screen.getByText(label)).toBeInTheDocument();
-});
-
-test('check if label is associated with input', () => {
-  render(
-    <FormField label={label}>
-      <Input defaultValue={value} />
-    </FormField>
-  );
-
-  expect(screen.getByLabelText(label)).toHaveValue(value);
-});
-
-test('check if renders a single error', () => {
-  const error = 'Error';
-
-  render(
-    <FormField label={label} error={error}>
-      <Input defaultValue={value} />
-    </FormField>
-  );
-
-  expect(screen.getByText(error)).toBeInTheDocument();
-});
-
-test('check if renders multiple errors', () => {
-  const errors = ['Error1', 'Error2', 'Error3'];
-
-  render(
-    <FormField label={label} error={errors}>
-      <Input defaultValue={value} />
-    </FormField>
-  );
-
-  errors.forEach((error) => {
-    expect(screen.getByText(error)).toBeInTheDocument();
-  });
-});

package/src/components/FormField/FormField.tsx

@@ -1,41 +0,0 @@
-import * as React from 'react';
-
-import Box from '../Box/Box';
-import Label from '../Label/Label';
-import Text from '../Text/Text';
-
-export type FormFieldProps = {
-  children?: React.ReactNode;
-  label?: string;
-  error?: string[] | string;
-};
-
-const FormField = ({ children, label, error }: FormFieldProps) => {
-  const errorAsArray = (() => {
-    if (Array.isArray(error)) {
-      return error;
-    }
-
-    if (typeof error === 'string') {
-      return [error];
-    }
-
-    return [];
-  })();
-
-  return (
-    <Box>
-      <Label sx={{ display: 'flex', flexDirection: 'column' }}>
-        {label && <Text as="span">{label}</Text>}
-        {children}
-      </Label>
-      {errorAsArray.map((err) => (
-        <Text key={err} as="span" variant="error">
-          {err}
-        </Text>
-      ))}
-    </Box>
-  );
-};
-
-export default FormField;

package/src/components/Spinner/Spinner.tsx

@@ -1,3 +0,0 @@
-export { Spinner as default } from '@theme-ui/components';
-
-export type { SpinnerProps } from '@theme-ui/components';