@ttoss/ui 1.16.1 → 1.16.5

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,9 @@ 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:400,500,700&display=swap",
     ,
-    'https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap',
+    "https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap",
   ]}
 >
   <App />

package/dist/esm/index.js

@@ -1,37 +1,150 @@
+"use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
 };
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
 
 // tsup.inject.js
 import * as React from "react";
+var init_tsup_inject = __esm({
+  "tsup.inject.js"() {
+    "use strict";
+  }
+});
+
+// ../../node_modules/deepmerge/dist/cjs.js
+var require_cjs = __commonJS({
+  "../../node_modules/deepmerge/dist/cjs.js"(exports, module) {
+    "use strict";
+    init_tsup_inject();
+    var isMergeableObject = function isMergeableObject2(value) {
+      return isNonNullObject(value) && !isSpecial(value);
+    };
+    function isNonNullObject(value) {
+      return !!value && typeof value === "object";
+    }
+    function isSpecial(value) {
+      var stringValue = Object.prototype.toString.call(value);
+      return stringValue === "[object RegExp]" || stringValue === "[object Date]" || isReactElement(value);
+    }
+    var canUseSymbol2 = typeof Symbol === "function" && Symbol.for;
+    var REACT_ELEMENT_TYPE = canUseSymbol2 ? Symbol.for("react.element") : 60103;
+    function isReactElement(value) {
+      return value.$$typeof === REACT_ELEMENT_TYPE;
+    }
+    function emptyTarget(val) {
+      return Array.isArray(val) ? [] : {};
+    }
+    function cloneUnlessOtherwiseSpecified(value, options) {
+      return options.clone !== false && options.isMergeableObject(value) ? deepmerge2(emptyTarget(value), value, options) : value;
+    }
+    function defaultArrayMerge(target, source, options) {
+      return target.concat(source).map(function(element) {
+        return cloneUnlessOtherwiseSpecified(element, options);
+      });
+    }
+    function getMergeFunction(key, options) {
+      if (!options.customMerge) {
+        return deepmerge2;
+      }
+      var customMerge = options.customMerge(key);
+      return typeof customMerge === "function" ? customMerge : deepmerge2;
+    }
+    function getEnumerableOwnPropertySymbols(target) {
+      return Object.getOwnPropertySymbols ? Object.getOwnPropertySymbols(target).filter(function(symbol) {
+        return target.propertyIsEnumerable(symbol);
+      }) : [];
+    }
+    function getKeys(target) {
+      return Object.keys(target).concat(getEnumerableOwnPropertySymbols(target));
+    }
+    function propertyIsOnObject(object, property) {
+      try {
+        return property in object;
+      } catch (_) {
+        return false;
+      }
+    }
+    function propertyIsUnsafe(target, key) {
+      return propertyIsOnObject(target, key) && !(Object.hasOwnProperty.call(target, key) && Object.propertyIsEnumerable.call(target, key));
+    }
+    function mergeObject(target, source, options) {
+      var destination = {};
+      if (options.isMergeableObject(target)) {
+        getKeys(target).forEach(function(key) {
+          destination[key] = cloneUnlessOtherwiseSpecified(target[key], options);
+        });
+      }
+      getKeys(source).forEach(function(key) {
+        if (propertyIsUnsafe(target, key)) {
+          return;
+        }
+        if (propertyIsOnObject(target, key) && options.isMergeableObject(source[key])) {
+          destination[key] = getMergeFunction(key, options)(target[key], source[key], options);
+        } else {
+          destination[key] = cloneUnlessOtherwiseSpecified(source[key], options);
+        }
+      });
+      return destination;
+    }
+    function deepmerge2(target, source, options) {
+      options = options || {};
+      options.arrayMerge = options.arrayMerge || defaultArrayMerge;
+      options.isMergeableObject = options.isMergeableObject || isMergeableObject;
+      options.cloneUnlessOtherwiseSpecified = cloneUnlessOtherwiseSpecified;
+      var sourceIsArray = Array.isArray(source);
+      var targetIsArray = Array.isArray(target);
+      var sourceAndTargetTypesMatch = sourceIsArray === targetIsArray;
+      if (!sourceAndTargetTypesMatch) {
+        return cloneUnlessOtherwiseSpecified(source, options);
+      } else if (sourceIsArray) {
+        return options.arrayMerge(target, source, options);
+      } else {
+        return mergeObject(target, source, options);
+      }
+    }
+    deepmerge2.all = function deepmergeAll(array, options) {
+      if (!Array.isArray(array)) {
+        throw new Error("first argument should be an array");
+      }
+      return array.reduce(function(prev, next) {
+        return deepmerge2(prev, next, options);
+      }, {});
+    };
+    var deepmerge_1 = deepmerge2;
+    module.exports = deepmerge_1;
+  }
+});
 
 // src/index.ts
-import * as color from "@theme-ui/color";
+init_tsup_inject();
 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";
+init_tsup_inject();
 import * as React2 from "react";
+import { Global, css } from "@emotion/react";
+import { ThemeProvider as ThemeUiProvider, merge } from "theme-ui";
 
 // src/theme/defaultFonts.ts
+init_tsup_inject();
 var defaultFonts = [
   "https://fonts.googleapis.com/css?family=Asap",
   "https://fonts.googleapis.com/css?family=Overpass",
@@ -40,6 +153,7 @@ var defaultFonts = [
 ];
 
 // src/theme/defaultTheme.ts
+init_tsup_inject();
 var defaultTheme = {
   colors: {
     text: "#000",
@@ -134,116 +248,118 @@ 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";
+init_tsup_inject();
+
+// ../../node_modules/@theme-ui/core/dist/theme-ui-core.esm.js
+init_tsup_inject();
+var import_deepmerge = __toESM(require_cjs());
+import { jsx as jsx$1, ThemeContext } from "@emotion/react";
+import { createContext, useContext } from "react";
+import packageInfo from "@emotion/react/package.json";
+var __EMOTION_VERSION__ = packageInfo.version;
+var __themeUiDefaultContextValue = {
+  __EMOTION_VERSION__,
+  theme: {}
+};
+var __ThemeUIContext = /* @__PURE__ */ createContext(__themeUiDefaultContextValue);
+var useThemeUI = () => useContext(__ThemeUIContext);
+var canUseSymbol = typeof Symbol === "function" && Symbol.for;
+var REACT_ELEMENT = canUseSymbol ? Symbol.for("react.element") : 60103;
+var FORWARD_REF = canUseSymbol ? Symbol.for("react.forward_ref") : 60103;
+var deepmergeOptions = {
+  isMergeableObject: (n) => {
+    return !!n && typeof n === "object" && n.$$typeof !== REACT_ELEMENT && n.$$typeof !== FORWARD_REF;
+  },
+  arrayMerge: (_leftArray, rightArray) => rightArray
+};
+var merge2 = (a, b) => (0, import_deepmerge.default)(a, b, deepmergeOptions);
+function mergeAll(...args) {
+  return import_deepmerge.default.all(args, deepmergeOptions);
+}
+merge2.all = mergeAll;
+
+// src/theme/useTheme.ts
 var useTheme = useThemeUI;
 
 // src/components/Box/Box.tsx
-import { Box } from "@theme-ui/components";
+init_tsup_inject();
+import { Box } from "theme-ui";
 
 // src/components/Button/Button.tsx
-import { Button as ButtonUi } from "@theme-ui/components";
+init_tsup_inject();
+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";
+init_tsup_inject();
+import { Card } from "theme-ui";
 
 // src/components/Divider/Divider.tsx
-import { Divider, DividerProps } from "@theme-ui/components";
+init_tsup_inject();
+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;
+init_tsup_inject();
+import { Flex } from "theme-ui";
 
 // src/components/Grid/Grid.tsx
-import { Grid } from "@theme-ui/components";
+init_tsup_inject();
+import { Grid } from "theme-ui";
 
 // src/components/Heading/Heading.tsx
-import { Heading, HeadingProps } from "@theme-ui/components";
+init_tsup_inject();
+import { Heading } from "theme-ui";
 
 // src/components/Image/Image.tsx
-import { Image } from "@theme-ui/components";
+init_tsup_inject();
+import { Image } from "theme-ui";
 
 // src/components/Input/Input.tsx
-import { Input } from "@theme-ui/components";
+init_tsup_inject();
+import { Input } from "theme-ui";
 
 // src/components/Link/Link.tsx
-import { Link } from "@theme-ui/components";
+init_tsup_inject();
+import { Link } from "theme-ui";
 
 // src/components/LinearProgress/LinearProgress.tsx
-import { Progress } from "@theme-ui/components";
-var LinearProgress = Progress;
+init_tsup_inject();
+import {
+  Progress
+} from "theme-ui";
 
-// src/components/Select/Select.tsx
-import { Select } from "@theme-ui/components";
+// src/components/Text/Text.tsx
+init_tsup_inject();
+import { Text } from "theme-ui";
 
-// src/components/Spinner/Spinner.tsx
-import { Spinner } from "@theme-ui/components";
+// src/components/Select/Select.tsx
+init_tsup_inject();
+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 { 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';
+import * as _theme_ui_core from '@theme-ui/core';
 
 declare type ThemeProviderProps = {
     children?: React.ReactNode;
@@ -24,14 +18,4 @@ declare const useTheme: () => _theme_ui_core.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,16 @@
+"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 __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
+var __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
 };
-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 });
@@ -36,47 +26,152 @@ var __copyProps = (to, from, except, desc) => {
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
+// tsup.inject.js
+var React;
+var init_tsup_inject = __esm({
+  "tsup.inject.js"() {
+    "use strict";
+    React = __toESM(require("react"));
+  }
+});
+
+// ../../node_modules/deepmerge/dist/cjs.js
+var require_cjs = __commonJS({
+  "../../node_modules/deepmerge/dist/cjs.js"(exports, module2) {
+    "use strict";
+    init_tsup_inject();
+    var isMergeableObject = function isMergeableObject2(value) {
+      return isNonNullObject(value) && !isSpecial(value);
+    };
+    function isNonNullObject(value) {
+      return !!value && typeof value === "object";
+    }
+    function isSpecial(value) {
+      var stringValue = Object.prototype.toString.call(value);
+      return stringValue === "[object RegExp]" || stringValue === "[object Date]" || isReactElement(value);
+    }
+    var canUseSymbol2 = typeof Symbol === "function" && Symbol.for;
+    var REACT_ELEMENT_TYPE = canUseSymbol2 ? Symbol.for("react.element") : 60103;
+    function isReactElement(value) {
+      return value.$$typeof === REACT_ELEMENT_TYPE;
+    }
+    function emptyTarget(val) {
+      return Array.isArray(val) ? [] : {};
+    }
+    function cloneUnlessOtherwiseSpecified(value, options) {
+      return options.clone !== false && options.isMergeableObject(value) ? deepmerge2(emptyTarget(value), value, options) : value;
+    }
+    function defaultArrayMerge(target, source, options) {
+      return target.concat(source).map(function(element) {
+        return cloneUnlessOtherwiseSpecified(element, options);
+      });
+    }
+    function getMergeFunction(key, options) {
+      if (!options.customMerge) {
+        return deepmerge2;
+      }
+      var customMerge = options.customMerge(key);
+      return typeof customMerge === "function" ? customMerge : deepmerge2;
+    }
+    function getEnumerableOwnPropertySymbols(target) {
+      return Object.getOwnPropertySymbols ? Object.getOwnPropertySymbols(target).filter(function(symbol) {
+        return target.propertyIsEnumerable(symbol);
+      }) : [];
+    }
+    function getKeys(target) {
+      return Object.keys(target).concat(getEnumerableOwnPropertySymbols(target));
+    }
+    function propertyIsOnObject(object, property) {
+      try {
+        return property in object;
+      } catch (_) {
+        return false;
+      }
+    }
+    function propertyIsUnsafe(target, key) {
+      return propertyIsOnObject(target, key) && !(Object.hasOwnProperty.call(target, key) && Object.propertyIsEnumerable.call(target, key));
+    }
+    function mergeObject(target, source, options) {
+      var destination = {};
+      if (options.isMergeableObject(target)) {
+        getKeys(target).forEach(function(key) {
+          destination[key] = cloneUnlessOtherwiseSpecified(target[key], options);
+        });
+      }
+      getKeys(source).forEach(function(key) {
+        if (propertyIsUnsafe(target, key)) {
+          return;
+        }
+        if (propertyIsOnObject(target, key) && options.isMergeableObject(source[key])) {
+          destination[key] = getMergeFunction(key, options)(target[key], source[key], options);
+        } else {
+          destination[key] = cloneUnlessOtherwiseSpecified(source[key], options);
+        }
+      });
+      return destination;
+    }
+    function deepmerge2(target, source, options) {
+      options = options || {};
+      options.arrayMerge = options.arrayMerge || defaultArrayMerge;
+      options.isMergeableObject = options.isMergeableObject || isMergeableObject;
+      options.cloneUnlessOtherwiseSpecified = cloneUnlessOtherwiseSpecified;
+      var sourceIsArray = Array.isArray(source);
+      var targetIsArray = Array.isArray(target);
+      var sourceAndTargetTypesMatch = sourceIsArray === targetIsArray;
+      if (!sourceAndTargetTypesMatch) {
+        return cloneUnlessOtherwiseSpecified(source, options);
+      } else if (sourceIsArray) {
+        return options.arrayMerge(target, source, options);
+      } else {
+        return mergeObject(target, source, options);
+      }
+    }
+    deepmerge2.all = function deepmergeAll(array, options) {
+      if (!Array.isArray(array)) {
+        throw new Error("first argument should be an array");
+      }
+      return array.reduce(function(prev, next) {
+        return deepmerge2(prev, next, options);
+      }, {});
+    };
+    var deepmerge_1 = deepmerge2;
+    module2.exports = deepmerge_1;
+  }
+});
+
 // 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_ui2.Box,
+  Button: () => Button,
+  Card: () => import_theme_ui4.Card,
+  Divider: () => import_theme_ui5.Divider,
+  Flex: () => import_theme_ui6.Flex,
+  Grid: () => import_theme_ui7.Grid,
+  Heading: () => import_theme_ui8.Heading,
+  Image: () => import_theme_ui9.Image,
+  Input: () => import_theme_ui10.Input,
+  LinearProgress: () => import_theme_ui12.Progress,
+  Link: () => import_theme_ui11.Link,
+  Select: () => import_theme_ui14.Select,
+  Text: () => import_theme_ui13.Text,
   ThemeProvider: () => ThemeProvider_default,
-  Themed: () => import_mdx.Themed,
-  color: () => color,
   useBreakpointIndex: () => import_match_media.useBreakpointIndex,
   useResponsiveValue: () => import_match_media.useResponsiveValue,
   useTheme: () => useTheme
 });
 module.exports = __toCommonJS(src_exports);
-
-// tsup.inject.js
-var React = __toESM(require("react"));
-
-// src/index.ts
-var color = __toESM(require("@theme-ui/color"));
+init_tsup_inject();
 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");
+init_tsup_inject();
 var React2 = __toESM(require("react"));
+var import_react = require("@emotion/react");
+var import_theme_ui = require("theme-ui");
 
 // src/theme/defaultFonts.ts
+init_tsup_inject();
 var defaultFonts = [
   "https://fonts.googleapis.com/css?family=Asap",
   "https://fonts.googleapis.com/css?family=Overpass",
@@ -85,6 +180,7 @@ var defaultFonts = [
 ];
 
 // src/theme/defaultTheme.ts
+init_tsup_inject();
 var defaultTheme = {
   colors: {
     text: "#000",
@@ -170,106 +266,110 @@ 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;
+init_tsup_inject();
+
+// ../../node_modules/@theme-ui/core/dist/theme-ui-core.esm.js
+init_tsup_inject();
+var import_react2 = require("@emotion/react");
+var import_react3 = require("react");
+var import_deepmerge = __toESM(require_cjs());
+var import_package = __toESM(require("@emotion/react/package.json"));
+var __EMOTION_VERSION__ = import_package.default.version;
+var __themeUiDefaultContextValue = {
+  __EMOTION_VERSION__,
+  theme: {}
+};
+var __ThemeUIContext = /* @__PURE__ */ (0, import_react3.createContext)(__themeUiDefaultContextValue);
+var useThemeUI = () => (0, import_react3.useContext)(__ThemeUIContext);
+var canUseSymbol = typeof Symbol === "function" && Symbol.for;
+var REACT_ELEMENT = canUseSymbol ? Symbol.for("react.element") : 60103;
+var FORWARD_REF = canUseSymbol ? Symbol.for("react.forward_ref") : 60103;
+var deepmergeOptions = {
+  isMergeableObject: (n) => {
+    return !!n && typeof n === "object" && n.$$typeof !== REACT_ELEMENT && n.$$typeof !== FORWARD_REF;
+  },
+  arrayMerge: (_leftArray, rightArray) => rightArray
+};
+var merge2 = (a, b) => (0, import_deepmerge.default)(a, b, deepmergeOptions);
+function mergeAll(...args) {
+  return import_deepmerge.default.all(args, deepmergeOptions);
+}
+merge2.all = mergeAll;
+
+// src/theme/useTheme.ts
+var useTheme = useThemeUI;
 
 // src/components/Box/Box.tsx
-var import_components = require("@theme-ui/components");
+init_tsup_inject();
+var import_theme_ui2 = require("theme-ui");
 
 // src/components/Button/Button.tsx
-var import_components2 = require("@theme-ui/components");
+init_tsup_inject();
+var import_theme_ui3 = 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_ui3.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");
+init_tsup_inject();
+var import_theme_ui4 = require("theme-ui");
 
 // src/components/Divider/Divider.tsx
-var import_components4 = require("@theme-ui/components");
+init_tsup_inject();
+var import_theme_ui5 = 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;
+init_tsup_inject();
+var import_theme_ui6 = require("theme-ui");
 
 // src/components/Grid/Grid.tsx
-var import_components8 = require("@theme-ui/components");
+init_tsup_inject();
+var import_theme_ui7 = require("theme-ui");
 
 // src/components/Heading/Heading.tsx
-var import_components9 = require("@theme-ui/components");
+init_tsup_inject();
+var import_theme_ui8 = require("theme-ui");
 
 // src/components/Image/Image.tsx
-var import_components10 = require("@theme-ui/components");
+init_tsup_inject();
+var import_theme_ui9 = require("theme-ui");
 
 // src/components/Input/Input.tsx
-var import_components11 = require("@theme-ui/components");
+init_tsup_inject();
+var import_theme_ui10 = require("theme-ui");
 
 // src/components/Link/Link.tsx
-var import_components12 = require("@theme-ui/components");
+init_tsup_inject();
+var import_theme_ui11 = require("theme-ui");
 
 // src/components/LinearProgress/LinearProgress.tsx
-var import_components13 = require("@theme-ui/components");
-var LinearProgress = import_components13.Progress;
+init_tsup_inject();
+var import_theme_ui12 = require("theme-ui");
 
-// src/components/Select/Select.tsx
-var import_components14 = require("@theme-ui/components");
+// src/components/Text/Text.tsx
+init_tsup_inject();
+var import_theme_ui13 = require("theme-ui");
 
-// src/components/Spinner/Spinner.tsx
-var import_components15 = require("@theme-ui/components");
+// src/components/Select/Select.tsx
+init_tsup_inject();
+var import_theme_ui14 = require("theme-ui");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Box,
@@ -277,7 +377,6 @@ var import_components15 = require("@theme-ui/components");
   Card,
   Divider,
   Flex,
-  FormField,
   Grid,
   Heading,
   Image,
@@ -285,11 +384,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.1",
+  "version": "1.16.5",
   "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.1",
-    "@ttoss/test-utils": "^1.16.1"
+    "@ttoss/test-utils": "^1.16.5",
+    "@types/jest": "^28.1.3",
+    "jest": "^28.1.1",
+    "tsup": "^6.1.2"
   },
-  "gitHead": "d4caf53cd81bff99f232c6908a78e243ab9ed322"
+  "gitHead": "84559f07bf60bfccb886db9cea042da09e99bcdb"
 }

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/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';