@basic-ui/material 0.1.2 → 0.1.6

package/build/cjs/index.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _extends = require('@babel/runtime/helpers/extends');
 var css = require('@styled-system/css');
 var polished = require('polished');
 var hash = require('@emotion/hash');
-var _extends = require('@babel/runtime/helpers/extends');
 var _objectWithoutPropertiesLoose = require('@babel/runtime/helpers/objectWithoutPropertiesLoose');
 var react$1 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
@@ -17,8 +17,8 @@ var core = require('@basic-ui/core');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var hash__default = /*#__PURE__*/_interopDefaultLegacy(hash);
 var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
+var hash__default = /*#__PURE__*/_interopDefaultLegacy(hash);
 var _objectWithoutPropertiesLoose__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutPropertiesLoose);
 var _styled__default = /*#__PURE__*/_interopDefaultLegacy(_styled);
 var shouldForwardProp__default = /*#__PURE__*/_interopDefaultLegacy(shouldForwardProp);
@@ -643,17 +643,24 @@ const alpha = (colorString, alphaValue) => theme => {
   const rgb = polished.parseToRgb(color);
   return `rgba(${rgb.red},${rgb.green},${rgb.blue},${alphaValue})`;
 };
+function getBackgroundOverlay(theme, backgroundOverlay) {
+  if (Number(backgroundOverlay) <= 0) {
+    return {};
+  }
+
+  return {
+    background: `linear-gradient(${css.get(theme, 'colors.surface')}, ${css.get(theme, 'colors.surface')}), ${alpha('on.surface', css.get(theme, `paper.overlays.${backgroundOverlay}`) || 0)(theme)}`,
+    backgroundBlendMode: 'overlay',
+    backgroundRepeat: 'no-repeat'
+  };
+}
 function getDarkThemeBackgroundOverlay(theme, backgroundOverlay) {
   if (Number(backgroundOverlay) <= 0) {
     return {};
   }
 
   return {
-    [`.${DARK_THEME_CLASS} &, &.${DARK_THEME_CLASS}`]: {
-      background: `linear-gradient(${css.get(theme, 'colors.surface')}, ${css.get(theme, 'colors.surface')}), ${alpha('on.surface', css.get(theme, `paper.overlays.${backgroundOverlay}`) || 0)(theme)}`,
-      backgroundBlendMode: 'overlay',
-      backgroundRepeat: 'no-repeat'
-    }
+    [`.${DARK_THEME_CLASS} &, &.${DARK_THEME_CLASS}`]: _extends__default['default']({}, getBackgroundOverlay(theme, backgroundOverlay))
   };
 }
 
@@ -1756,9 +1763,9 @@ const BottomSheetSurface = /*#__PURE__*/react$1.forwardRef(function BottomSheetS
     as: Paper,
     theme: theme,
     elevation: 24,
-    backgroundColor: "surface",
     __css: _extends__default['default']({
       position: 'absolute',
+      bg: 'surface',
       bottom: 0,
       mx: 'auto',
       borderRadius: 0,
@@ -3307,8 +3314,9 @@ const DialogSurface = /*#__PURE__*/react$1.forwardRef(function DialogSurface(pro
     as: Paper,
     theme: theme,
     elevation: 24,
-    backgroundColor: "surface",
     __css: _extends__default['default']({
+      position: 'relative',
+      bg: 'surface',
       borderRadius: "0.5rem",
       width: '100%',
       maxWidth: "37.5rem",
@@ -5115,6 +5123,7 @@ exports.Tooltip = Tooltip;
 exports.alpha = alpha;
 exports.appearAnimation = appearAnimation;
 exports.base = base;
+exports.getBackgroundOverlay = getBackgroundOverlay;
 exports.getDarkThemeBackgroundOverlay = getDarkThemeBackgroundOverlay;
 exports.getTheme = getTheme;
 exports.rippleStyle = rippleStyle;