@spark-web/box 1.0.0 → 1.0.1

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @spark-web/box
 
+## 1.0.1
+
+### Patch Changes
+
+- [#36](https://github.com/brighte-labs/spark-web/pull/36)
+  [`8546f8f`](https://github.com/brighte-labs/spark-web/commit/8546f8f05daaa79ea3ff954c6c4928a7a2d0622d)
+  Thanks [@lukebennett88](https://github.com/lukebennett88)! - Update Babel
+  config
+
+- Updated dependencies
+  [[`aebff30`](https://github.com/brighte-labs/spark-web/commit/aebff30c86cb0a9db22b545c46159ce0d1c14afb),
+  [`8546f8f`](https://github.com/brighte-labs/spark-web/commit/8546f8f05daaa79ea3ff954c6c4928a7a2d0622d)]:
+  - @spark-web/theme@2.0.0
+  - @spark-web/utils@1.0.1
+
 ## 1.0.0
 
 ### Major Changes

package/dist/declarations/src/Box.d.ts

@@ -15,7 +15,7 @@ export declare type BoxProps = {
 /** Exposes a prop-based API for adding styles to a view, within the constraints of the theme. */
 export declare const Box: <Comp extends import("react").ElementType<any> = "div">(props: {
     as?: Comp | undefined;
-    ref?: import("react").Ref<Comp extends "symbol" | "clipPath" | "filter" | "mask" | "marker" | "text" | "circle" | "svg" | "animate" | "animateMotion" | "animateTransform" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "textPath" | "tspan" | "use" | "view" | keyof HTMLElementTagNameMap | "set" ? (HTMLElementTagNameMap & Pick<SVGElementTagNameMap, "symbol" | "clipPath" | "filter" | "mask" | "marker" | "text" | "circle" | "svg" | "animate" | "animateMotion" | "animateTransform" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "textPath" | "tspan" | "use" | "view" | "set">)[Comp] : Comp extends new (...args: any) => any ? InstanceType<Comp> : undefined> | undefined;
+    ref?: import("react").Ref<Comp extends "symbol" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | "set" | keyof HTMLElementTagNameMap ? (HTMLElementTagNameMap & Pick<SVGElementTagNameMap, "symbol" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | "set">)[Comp] : Comp extends new (...args: any) => any ? InstanceType<Comp> : undefined> | undefined;
 } & Omit<import("react").PropsWithoutRef<import("react").ComponentProps<Comp>>, "as"> & {
     children?: ReactNode;
     /** An identifier which must be unique in the whole document. */
@@ -28,11 +28,11 @@ export declare const Box: <Comp extends import("react").ElementType<any> = "div"
      */
     asElement?: keyof HTMLElementTagNameMap | undefined;
 } & {
-    background?: "disabled" | "body" | "input" | "infoLight" | "criticalLight" | "positiveLight" | "cautionLight" | "temporary-green" | "temporary-green-low" | "temporary-green-high" | "temporary-green-soft" | "temporary-yellow" | "temporary-yellow-low" | "temporary-yellow-high" | "temporary-yellow-soft" | "temporary-dark" | "temporary-dark-low" | "temporary-dark-high" | "temporary-dark-soft" | "temporary-blue" | "temporary-blue-low" | "temporary-blue-high" | "temporary-blue-soft" | "temporary-red" | "temporary-red-low" | "temporary-red-high" | "temporary-red-soft" | "muted" | "backdrop" | "surface" | "surfaceMuted" | "surfacePressed" | "fieldAccent" | "inputPressed" | "inputDisabled" | "accent" | "accentMuted" | "neutral" | "neutralLow" | "primary" | "primaryLow" | "primaryMuted" | "secondary" | "secondaryLow" | "secondaryMuted" | "caution" | "cautionLow" | "cautionMuted" | "critical" | "criticalLow" | "criticalMuted" | "info" | "infoLow" | "infoMuted" | "positive" | "positiveLow" | "positiveMuted" | undefined;
+    background?: "body" | "input" | "infoLight" | "criticalLight" | "positiveLight" | "cautionLight" | "muted" | "disabled" | "backdrop" | "surface" | "surfaceMuted" | "surfacePressed" | "fieldAccent" | "inputPressed" | "inputDisabled" | "accent" | "accentMuted" | "neutral" | "neutralLow" | "primary" | "primaryLow" | "primaryMuted" | "secondary" | "secondaryLow" | "secondaryMuted" | "caution" | "cautionLow" | "cautionMuted" | "critical" | "criticalLow" | "criticalMuted" | "info" | "infoLow" | "infoMuted" | "positive" | "positiveLow" | "positiveMuted" | undefined;
     cursor?: "default" | "pointer" | undefined;
     minHeight?: 0 | undefined;
     minWidth?: 0 | undefined;
-    overflow?: "auto" | "hidden" | "visible" | "scroll" | undefined;
-    shadow?: "medium" | "large" | "small" | undefined;
+    overflow?: "scroll" | "hidden" | "auto" | "visible" | undefined;
+    shadow?: "small" | "medium" | "large" | undefined;
     userSelect?: "none" | undefined;
 } & import("./useBoxStyles").ResponsiveBoxProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;

package/dist/declarations/src/context.d.ts

@@ -4,4 +4,4 @@ export declare type BackgroundVariant = NonNullable<BoxStyleProps['background']>
 export declare const InternalBackgroundProvider: import("react").Provider<BackgroundVariant>;
 export declare const useBackground: () => BackgroundVariant;
 export declare function renderBackgroundProvider(background: BackgroundVariant | undefined, element: ReactElement | null): JSX.Element | null;
-export declare const useBackgroundLightness: (backgroundOverride?: BackgroundVariant | undefined) => "dark" | "light";
+export declare const useBackgroundLightness: (backgroundOverride?: BackgroundVariant | undefined) => "light" | "dark";

package/dist/spark-web-box.cjs.dev.js

@@ -2,31 +2,27 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React = require('react');
 var theme = require('@spark-web/theme');
-var _extends = require('@babel/runtime/helpers/esm/extends');
-var _objectWithoutProperties = require('@babel/runtime/helpers/esm/objectWithoutProperties');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var css = require('@emotion/css');
 var internal = require('@spark-web/utils/internal');
 var ts = require('@spark-web/utils/ts');
-var _defineProperty = require('@babel/runtime/helpers/esm/defineProperty');
 
-function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefault(React);
-
-var __jsx$1 = React__default["default"].createElement;
 // prepare context
-var backgroundContext = /*#__PURE__*/React.createContext('body');
+var backgroundContext = /*#__PURE__*/react.createContext('body');
 var InternalBackgroundProvider = backgroundContext.Provider;
 var useBackground = function useBackground() {
-  return React.useContext(backgroundContext);
+  return react.useContext(backgroundContext);
 }; // conditional provider
 
 function renderBackgroundProvider(background, element) {
-  return background ? __jsx$1(InternalBackgroundProvider, {
-    value: background
-  }, element) : element;
+  return background ? /*#__PURE__*/jsxRuntime.jsx(InternalBackgroundProvider, {
+    value: background,
+    children: element
+  }) : element;
 } // a11y contrast utility
 
 var useBackgroundLightness = function useBackgroundLightness(backgroundOverride) {
@@ -56,9 +52,6 @@ var BackgroundProvider = function BackgroundProvider(_ref) {
   return renderBackgroundProvider(type === 'dark' ? 'UNKNOWN_DARK' : 'UNKNOWN_LIGHT', children);
 };
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 // TODO: review responsive props! Now that we're using object syntax, un-mapped properties don't behave as expected
 // types
 
@@ -288,7 +281,6 @@ function useBoxProps(props) {
 }
 
 var _excluded = ["as", "asElement", "className", "id"];
-var __jsx = React__default["default"].createElement;
 
 /** Exposes a prop-based API for adding styles to a view, within the constraints of the theme. */
 var Box = ts.forwardRefWithAs(function (_ref, forwardedRef) {
@@ -305,7 +297,7 @@ var Box = ts.forwardRefWithAs(function (_ref, forwardedRef) {
 
   var resetStyles = internal.resetElementStyles(asElement !== null && asElement !== void 0 ? asElement : Tag);
 
-  var element = __jsx(Tag, _extends({
+  var element = /*#__PURE__*/jsxRuntime.jsx(Tag, _objectSpread({
     ref: forwardedRef,
     id: id,
     className: css.cx(css.css(resetStyles), css.css(styles), className)

package/dist/spark-web-box.cjs.prod.js

@@ -2,31 +2,27 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React = require('react');
 var theme = require('@spark-web/theme');
-var _extends = require('@babel/runtime/helpers/esm/extends');
-var _objectWithoutProperties = require('@babel/runtime/helpers/esm/objectWithoutProperties');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var css = require('@emotion/css');
 var internal = require('@spark-web/utils/internal');
 var ts = require('@spark-web/utils/ts');
-var _defineProperty = require('@babel/runtime/helpers/esm/defineProperty');
 
-function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefault(React);
-
-var __jsx$1 = React__default["default"].createElement;
 // prepare context
-var backgroundContext = /*#__PURE__*/React.createContext('body');
+var backgroundContext = /*#__PURE__*/react.createContext('body');
 var InternalBackgroundProvider = backgroundContext.Provider;
 var useBackground = function useBackground() {
-  return React.useContext(backgroundContext);
+  return react.useContext(backgroundContext);
 }; // conditional provider
 
 function renderBackgroundProvider(background, element) {
-  return background ? __jsx$1(InternalBackgroundProvider, {
-    value: background
-  }, element) : element;
+  return background ? /*#__PURE__*/jsxRuntime.jsx(InternalBackgroundProvider, {
+    value: background,
+    children: element
+  }) : element;
 } // a11y contrast utility
 
 var useBackgroundLightness = function useBackgroundLightness(backgroundOverride) {
@@ -56,9 +52,6 @@ var BackgroundProvider = function BackgroundProvider(_ref) {
   return renderBackgroundProvider(type === 'dark' ? 'UNKNOWN_DARK' : 'UNKNOWN_LIGHT', children);
 };
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 // TODO: review responsive props! Now that we're using object syntax, un-mapped properties don't behave as expected
 // types
 
@@ -288,7 +281,6 @@ function useBoxProps(props) {
 }
 
 var _excluded = ["as", "asElement", "className", "id"];
-var __jsx = React__default["default"].createElement;
 
 /** Exposes a prop-based API for adding styles to a view, within the constraints of the theme. */
 var Box = ts.forwardRefWithAs(function (_ref, forwardedRef) {
@@ -305,7 +297,7 @@ var Box = ts.forwardRefWithAs(function (_ref, forwardedRef) {
 
   var resetStyles = internal.resetElementStyles(asElement !== null && asElement !== void 0 ? asElement : Tag);
 
-  var element = __jsx(Tag, _extends({
+  var element = /*#__PURE__*/jsxRuntime.jsx(Tag, _objectSpread({
     ref: forwardedRef,
     id: id,
     className: css.cx(css.css(resetStyles), css.css(styles), className)

package/dist/spark-web-box.esm.js

@@ -1,13 +1,12 @@
-import React, { createContext, useContext } from 'react';
 import { useTheme } from '@spark-web/theme';
-import _extends from '@babel/runtime/helpers/esm/extends';
+import { createContext, useContext } from 'react';
+import { jsx } from 'react/jsx-runtime';
+import _objectSpread from '@babel/runtime/helpers/esm/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
 import { cx, css } from '@emotion/css';
 import { resetElementStyles } from '@spark-web/utils/internal';
 import { forwardRefWithAs } from '@spark-web/utils/ts';
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 
-var __jsx$1 = React.createElement;
 // prepare context
 var backgroundContext = /*#__PURE__*/createContext('body');
 var InternalBackgroundProvider = backgroundContext.Provider;
@@ -16,9 +15,10 @@ var useBackground = function useBackground() {
 }; // conditional provider
 
 function renderBackgroundProvider(background, element) {
-  return background ? __jsx$1(InternalBackgroundProvider, {
-    value: background
-  }, element) : element;
+  return background ? /*#__PURE__*/jsx(InternalBackgroundProvider, {
+    value: background,
+    children: element
+  }) : element;
 } // a11y contrast utility
 
 var useBackgroundLightness = function useBackgroundLightness(backgroundOverride) {
@@ -48,9 +48,6 @@ var BackgroundProvider = function BackgroundProvider(_ref) {
   return renderBackgroundProvider(type === 'dark' ? 'UNKNOWN_DARK' : 'UNKNOWN_LIGHT', children);
 };
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 // TODO: review responsive props! Now that we're using object syntax, un-mapped properties don't behave as expected
 // types
 
@@ -280,7 +277,6 @@ function useBoxProps(props) {
 }
 
 var _excluded = ["as", "asElement", "className", "id"];
-var __jsx = React.createElement;
 
 /** Exposes a prop-based API for adding styles to a view, within the constraints of the theme. */
 var Box = forwardRefWithAs(function (_ref, forwardedRef) {
@@ -297,7 +293,7 @@ var Box = forwardRefWithAs(function (_ref, forwardedRef) {
 
   var resetStyles = resetElementStyles(asElement !== null && asElement !== void 0 ? asElement : Tag);
 
-  var element = __jsx(Tag, _extends({
+  var element = /*#__PURE__*/jsx(Tag, _objectSpread({
     ref: forwardedRef,
     id: id,
     className: cx(css(resetStyles), css(styles), className)

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spark-web/box",
   "license": "MIT",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "main": "dist/spark-web-box.cjs.js",
   "module": "dist/spark-web-box.esm.js",
   "devDependencies": {
@@ -10,8 +10,8 @@
   "dependencies": {
     "@babel/runtime": "^7.14.6",
     "@emotion/css": "^11.7.1",
-    "@spark-web/theme": "^1.0.0",
-    "@spark-web/utils": "^1.0.0",
+    "@spark-web/theme": "^2.0.0",
+    "@spark-web/utils": "^1.0.1",
     "react": "^17.0.2"
   },
   "engines": {