@ttoss/ui 1.16.5 → 1.18.0

package/README.md

@@ -45,7 +45,6 @@ You can pass fonts URLs to `ThemeProvider` component thought `fonts` prop.
 <ThemeProvider
   fonts={[
     "https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap",
-    ,
     "https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap",
   ]}
 >

package/dist/esm/index.js

@@ -1,150 +1,17 @@
 "use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-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 __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
-init_tsup_inject();
 import { useResponsiveValue, useBreakpointIndex } from "@theme-ui/match-media";
 
 // src/theme/ThemeProvider.tsx
-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",
@@ -153,7 +20,6 @@ var defaultFonts = [
 ];
 
 // src/theme/defaultTheme.ts
-init_tsup_inject();
 var defaultTheme = {
   colors: {
     text: "#000",
@@ -253,45 +119,13 @@ var ThemeProvider = ({
 var ThemeProvider_default = ThemeProvider;
 
 // src/theme/useTheme.ts
-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
+import { useThemeUI } from "theme-ui";
 var useTheme = useThemeUI;
 
 // src/components/Box/Box.tsx
-init_tsup_inject();
 import { Box } from "theme-ui";
 
 // src/components/Button/Button.tsx
-init_tsup_inject();
 import { Button as ButtonUi } from "theme-ui";
 var Button = (props) => {
   return /* @__PURE__ */ React.createElement(ButtonUi, {
@@ -301,49 +135,38 @@ var Button = (props) => {
 };
 
 // src/components/Card/Card.tsx
-init_tsup_inject();
 import { Card } from "theme-ui";
 
 // src/components/Divider/Divider.tsx
-init_tsup_inject();
 import { Divider } from "theme-ui";
 
 // src/components/Flex/Flex.tsx
-init_tsup_inject();
 import { Flex } from "theme-ui";
 
 // src/components/Grid/Grid.tsx
-init_tsup_inject();
 import { Grid } from "theme-ui";
 
 // src/components/Heading/Heading.tsx
-init_tsup_inject();
 import { Heading } from "theme-ui";
 
 // src/components/Image/Image.tsx
-init_tsup_inject();
 import { Image } from "theme-ui";
 
 // src/components/Input/Input.tsx
-init_tsup_inject();
 import { Input } from "theme-ui";
 
 // src/components/Link/Link.tsx
-init_tsup_inject();
 import { Link } from "theme-ui";
 
 // src/components/LinearProgress/LinearProgress.tsx
-init_tsup_inject();
 import {
   Progress
 } from "theme-ui";
 
 // src/components/Text/Text.tsx
-init_tsup_inject();
 import { Text } from "theme-ui";
 
 // src/components/Select/Select.tsx
-init_tsup_inject();
 import { Select } from "theme-ui";
 export {
   Box,

package/dist/index.d.ts

@@ -1,8 +1,8 @@
+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';
 import * as React from 'react';
-import * as _theme_ui_core from '@theme-ui/core';
 
 declare type ThemeProviderProps = {
     children?: React.ReactNode;
@@ -14,7 +14,7 @@ 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;
 

package/dist/index.js

@@ -5,12 +5,6 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-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 __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -26,152 +20,41 @@ 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_theme_ui2.Box,
+  Box: () => import_theme_ui3.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,
+  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,
   useBreakpointIndex: () => import_match_media.useBreakpointIndex,
   useResponsiveValue: () => import_match_media.useResponsiveValue,
   useTheme: () => useTheme
 });
 module.exports = __toCommonJS(src_exports);
-init_tsup_inject();
+
+// tsup.inject.js
+var React = __toESM(require("react"));
+
+// src/index.ts
 var import_match_media = require("@theme-ui/match-media");
 
 // src/theme/ThemeProvider.tsx
-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",
@@ -180,7 +63,6 @@ var defaultFonts = [
 ];
 
 // src/theme/defaultTheme.ts
-init_tsup_inject();
 var defaultTheme = {
   colors: {
     text: "#000",
@@ -280,96 +162,53 @@ var ThemeProvider = ({
 var ThemeProvider_default = ThemeProvider;
 
 // src/theme/useTheme.ts
-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;
+var import_theme_ui2 = require("theme-ui");
+var useTheme = import_theme_ui2.useThemeUI;
 
 // src/components/Box/Box.tsx
-init_tsup_inject();
-var import_theme_ui2 = require("theme-ui");
+var import_theme_ui3 = require("theme-ui");
 
 // src/components/Button/Button.tsx
-init_tsup_inject();
-var import_theme_ui3 = require("theme-ui");
+var import_theme_ui4 = require("theme-ui");
 var Button = (props) => {
-  return /* @__PURE__ */ React.createElement(import_theme_ui3.Button, {
+  return /* @__PURE__ */ React.createElement(import_theme_ui4.Button, {
     ...props,
     sx: { cursor: "pointer", fontFamily: "body", ...props.sx }
   });
 };
 
 // src/components/Card/Card.tsx
-init_tsup_inject();
-var import_theme_ui4 = require("theme-ui");
+var import_theme_ui5 = require("theme-ui");
 
 // src/components/Divider/Divider.tsx
-init_tsup_inject();
-var import_theme_ui5 = require("theme-ui");
+var import_theme_ui6 = require("theme-ui");
 
 // src/components/Flex/Flex.tsx
-init_tsup_inject();
-var import_theme_ui6 = require("theme-ui");
+var import_theme_ui7 = require("theme-ui");
 
 // src/components/Grid/Grid.tsx
-init_tsup_inject();
-var import_theme_ui7 = require("theme-ui");
+var import_theme_ui8 = require("theme-ui");
 
 // src/components/Heading/Heading.tsx
-init_tsup_inject();
-var import_theme_ui8 = require("theme-ui");
+var import_theme_ui9 = require("theme-ui");
 
 // src/components/Image/Image.tsx
-init_tsup_inject();
-var import_theme_ui9 = require("theme-ui");
+var import_theme_ui10 = require("theme-ui");
 
 // src/components/Input/Input.tsx
-init_tsup_inject();
-var import_theme_ui10 = require("theme-ui");
+var import_theme_ui11 = require("theme-ui");
 
 // src/components/Link/Link.tsx
-init_tsup_inject();
-var import_theme_ui11 = require("theme-ui");
+var import_theme_ui12 = require("theme-ui");
 
 // src/components/LinearProgress/LinearProgress.tsx
-init_tsup_inject();
-var import_theme_ui12 = require("theme-ui");
+var import_theme_ui13 = require("theme-ui");
 
 // src/components/Text/Text.tsx
-init_tsup_inject();
-var import_theme_ui13 = require("theme-ui");
+var import_theme_ui14 = require("theme-ui");
 
 // src/components/Select/Select.tsx
-init_tsup_inject();
-var import_theme_ui14 = require("theme-ui");
+var import_theme_ui15 = require("theme-ui");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Box,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/ui",
-  "version": "1.16.5",
+  "version": "1.18.0",
   "description": "Primitive layout, typographic, and other components for styling applications.",
   "license": "UNLICENSED",
   "publishConfig": {
@@ -47,5 +47,5 @@
     "jest": "^28.1.1",
     "tsup": "^6.1.2"
   },
-  "gitHead": "84559f07bf60bfccb886db9cea042da09e99bcdb"
+  "gitHead": "38d76661c6302b6447804375cd0193be9056b446"
 }

package/src/theme/useTheme.ts

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