@onesy/ui-react 1.0.129 → 1.0.131

package/Section/Section.js

@@ -1,357 +1,418 @@
 "use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importDefault(require("react"));
-const utils_1 = require("@onesy/utils");
-const style_react_1 = require("@onesy/style-react");
-const Line_1 = __importDefault(require("../Line/Line"));
-const Type_1 = __importDefault(require("../Type"));
-const Reveal_1 = __importDefault(require("../Reveal"));
-const useMediaQuery_1 = __importDefault(require("../useMediaQuery"));
-const utils_2 = require("../utils");
-const useStyle = (0, style_react_1.style)(theme => ({
-    root: {
-        position: 'relative'
-    },
-    main: {
-        zIndex: '14'
-    },
-    header: {
-        zIndex: '14'
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _utils = require("@onesy/utils");
+var _styleReact = require("@onesy/style-react");
+var _Line = _interopRequireDefault(require("../Line/Line"));
+var _Type = _interopRequireDefault(require("../Type"));
+var _Reveal = _interopRequireDefault(require("../Reveal"));
+var _useMediaQuery = _interopRequireDefault(require("../useMediaQuery"));
+var _utils2 = require("../utils");
+const _excluded = ["themed", "title", "description", "show", "reveal", "backgroundColor", "backgroundGradient", "backgroundImage", "backgroundVideo", "overlay", "overlayBlur", "size", "margin", "marginVertical", "padding", "maxWidth", "start", "end", "MainProps", "RevealProps", "TitleProps", "DescriptionProps", "HeaderProps", "className", "children"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+const useStyle = (0, _styleReact.style)(theme => ({
+  root: {
+    position: 'relative'
+  },
+  main: {
+    zIndex: '14'
+  },
+  header: {
+    zIndex: '14'
+  },
+  margin_small: {
+    margin: '64px 32px',
+    width: 'calc(100% - 64px) !important'
+  },
+  margin_regular: {
+    margin: '104px 40px',
+    width: 'calc(100% - 80px) !important'
+  },
+  margin_large: {
+    margin: '144px 48px',
+    width: 'calc(100% - 96px) !important'
+  },
+  margin_extra_large: {
+    margin: '184px 56px',
+    width: 'calc(100% - 112px) !important'
+  },
+  margin_extra_extra_large: {
+    margin: '224px 64px',
+    width: 'calc(100% - 128px) !important'
+  },
+  margin_vertical_small: {
+    margin: '64px 0'
+  },
+  margin_vertical_regular: {
+    margin: '104px 0'
+  },
+  margin_vertical_large: {
+    margin: '144px 0'
+  },
+  margin_vertical_extra_large: {
+    margin: '184px 0'
+  },
+  margin_vertical_extra_extra_large: {
+    margin: '224px 0'
+  },
+  padding_small: {
+    padding: `${theme.methods.space.value(8, 'px')} ${theme.methods.space.value(4, 'px')}`
+  },
+  padding_regular: {
+    padding: `${theme.methods.space.value(13, 'px')} ${theme.methods.space.value(5, 'px')}`
+  },
+  padding_large: {
+    padding: `${theme.methods.space.value(18, 'px')} ${theme.methods.space.value(6, 'px')}`
+  },
+  padding_extra_large: {
+    padding: `${theme.methods.space.value(23, 'px')} ${theme.methods.space.value(7, 'px')}`
+  },
+  padding_extra_extra_large: {
+    padding: `${theme.methods.space.value(28, 'px')} ${theme.methods.space.value(8, 'px')}`
+  },
+  maxWidth_extra_small: {
+    maxWidth: '480px'
+  },
+  maxWidth_small: {
+    maxWidth: '768px'
+  },
+  maxWidth_regular: {
+    maxWidth: '1024px'
+  },
+  maxWidth_large: {
+    maxWidth: '1440px'
+  },
+  maxWidth_extra_large: {
+    maxWidth: '1920px'
+  },
+  maxWidth_extra_extra_large: {
+    maxWidth: '2400px'
+  },
+  background: {
+    position: 'absolute',
+    inset: '0',
+    overflow: 'hidden',
+    pointerEvents: 'none',
+    zIndex: '1'
+  },
+  backgroundImage: {
+    backgroundSize: 'cover',
+    backgroundPosition: 'center',
+    backgroundRepeat: 'no-repeat'
+  },
+  backgroundVideo: {
+    position: 'absolute',
+    inset: '0',
+    minHeight: '100%',
+    minWidth: '100%',
+    top: '50%',
+    transform: 'translateY(-50%)',
+    zIndex: '1'
+  },
+  backgroundOverlay: {
+    position: 'absolute',
+    inset: '0',
+    zIndex: '4'
+  },
+  backgroundOverlayBlur: {
+    backdropFilter: 'blur(12px)'
+  },
+  '@media only screen and (max-width: 768px)': {
+    $margin_small: {
+      margin: '44px 24px',
+      width: 'calc(100% - 48px) !important'
     },
-    margin_small: {
-        margin: '64px 32px',
-        width: 'calc(100% - 64px) !important'
+    $margin_regular: {
+      margin: '76px 32px',
+      width: 'calc(100% - 64px) !important'
     },
-    margin_regular: {
-        margin: '104px 40px',
-        width: 'calc(100% - 80px) !important'
+    $margin_large: {
+      margin: '104px 40px',
+      width: 'calc(100% - 80px) !important'
     },
-    margin_large: {
-        margin: '144px 48px',
-        width: 'calc(100% - 96px) !important'
+    $margin_extra_large: {
+      margin: '134px 48px',
+      width: 'calc(100% - 96px) !important'
     },
-    margin_extra_large: {
-        margin: '184px 56px',
-        width: 'calc(100% - 112px) !important'
+    $margin_extra_extra_large: {
+      margin: '164px 56px',
+      width: 'calc(100% - 112px) !important'
     },
-    margin_extra_extra_large: {
-        margin: '224px 64px',
-        width: 'calc(100% - 128px) !important'
+    $margin_vertical_small: {
+      margin: '44px 0'
     },
-    margin_vertical_small: {
-        margin: '64px 0'
+    $margin_vertical_regular: {
+      margin: '76px 0'
     },
-    margin_vertical_regular: {
-        margin: '104px 0'
+    $margin_vertical_large: {
+      margin: '104px 0'
     },
-    margin_vertical_large: {
-        margin: '144px 0'
+    $margin_vertical_extra_large: {
+      margin: '134px 0'
     },
-    margin_vertical_extra_large: {
-        margin: '184px 0'
+    $margin_vertical_extra_extra_large: {
+      margin: '164px 0'
     },
-    margin_vertical_extra_extra_large: {
-        margin: '224px 0'
+    $padding_small: {
+      padding: `${theme.methods.space.value(6, 'px')} ${theme.methods.space.value(3, 'px')}`
     },
-    padding_small: {
-        padding: `${theme.methods.space.value(8, 'px')} ${theme.methods.space.value(4, 'px')}`
+    $padding_regular: {
+      padding: `${theme.methods.space.value(10, 'px')} ${theme.methods.space.value(4, 'px')}`
     },
-    padding_regular: {
-        padding: `${theme.methods.space.value(13, 'px')} ${theme.methods.space.value(5, 'px')}`
+    $padding_large: {
+      padding: `${theme.methods.space.value(14, 'px')} ${theme.methods.space.value(5, 'px')}`
     },
-    padding_large: {
-        padding: `${theme.methods.space.value(18, 'px')} ${theme.methods.space.value(6, 'px')}`
+    $padding_extra_large: {
+      padding: `${theme.methods.space.value(18, 'px')} ${theme.methods.space.value(6, 'px')}`
     },
-    padding_extra_large: {
-        padding: `${theme.methods.space.value(23, 'px')} ${theme.methods.space.value(7, 'px')}`
+    $padding_extra_extra_large: {
+      padding: `${theme.methods.space.value(22, 'px')} ${theme.methods.space.value(7, 'px')}`
+    }
+  },
+  '@media only screen and (max-width: 480px)': {
+    $margin_small: {
+      margin: '24px 24px',
+      width: 'calc(100% - 48px) !important'
     },
-    padding_extra_extra_large: {
-        padding: `${theme.methods.space.value(28, 'px')} ${theme.methods.space.value(8, 'px')}`
+    $margin_regular: {
+      margin: '48px 24px',
+      width: 'calc(100% - 48px) !important'
     },
-    maxWidth_extra_small: {
-        maxWidth: '480px'
+    $margin_large: {
+      margin: '64px 24px',
+      width: 'calc(100% - 48px) !important'
     },
-    maxWidth_small: {
-        maxWidth: '768px'
+    $margin_extra_large: {
+      margin: '84px 24px',
+      width: 'calc(100% - 48px) !important'
     },
-    maxWidth_regular: {
-        maxWidth: '1024px'
+    $margin_extra_extra_large: {
+      margin: '104px 24px',
+      width: 'calc(100% - 48px) !important'
     },
-    maxWidth_large: {
-        maxWidth: '1440px'
+    $margin_vertical_small: {
+      margin: '24px 0'
     },
-    maxWidth_extra_large: {
-        maxWidth: '1920px'
+    $margin_vertical_regular: {
+      margin: '48px 0'
     },
-    maxWidth_extra_extra_large: {
-        maxWidth: '2400px'
+    $margin_vertical_large: {
+      margin: '64px 0'
     },
-    background: {
-        position: 'absolute',
-        inset: '0',
-        overflow: 'hidden',
-        pointerEvents: 'none',
-        zIndex: '1'
+    $margin_vertical_extra_large: {
+      margin: '84px 0'
     },
-    backgroundImage: {
-        backgroundSize: 'cover',
-        backgroundPosition: 'center',
-        backgroundRepeat: 'no-repeat'
+    $margin_vertical_extra_extra_large: {
+      margin: '104px 0'
     },
-    backgroundVideo: {
-        position: 'absolute',
-        inset: '0',
-        minHeight: '100%',
-        minWidth: '100%',
-        top: '50%',
-        transform: 'translateY(-50%)',
-        zIndex: '1'
+    $padding_small: {
+      padding: theme.methods.space.value(3, 'px')
     },
-    backgroundOverlay: {
-        position: 'absolute',
-        inset: '0',
-        zIndex: '4'
+    $padding_regular: {
+      padding: `${theme.methods.space.value(6, 'px')} ${theme.methods.space.value(3, 'px')}`
     },
-    backgroundOverlayBlur: {
-        backdropFilter: 'blur(12px)'
+    $padding_large: {
+      padding: `${theme.methods.space.value(9, 'px')} ${theme.methods.space.value(3, 'px')}`
     },
-    '@media only screen and (max-width: 768px)': {
-        $margin_small: {
-            margin: '44px 24px',
-            width: 'calc(100% - 48px) !important'
-        },
-        $margin_regular: {
-            margin: '76px 32px',
-            width: 'calc(100% - 64px) !important'
-        },
-        $margin_large: {
-            margin: '104px 40px',
-            width: 'calc(100% - 80px) !important'
-        },
-        $margin_extra_large: {
-            margin: '134px 48px',
-            width: 'calc(100% - 96px) !important'
-        },
-        $margin_extra_extra_large: {
-            margin: '164px 56px',
-            width: 'calc(100% - 112px) !important'
-        },
-        $margin_vertical_small: {
-            margin: '44px 0'
-        },
-        $margin_vertical_regular: {
-            margin: '76px 0'
-        },
-        $margin_vertical_large: {
-            margin: '104px 0'
-        },
-        $margin_vertical_extra_large: {
-            margin: '134px 0'
-        },
-        $margin_vertical_extra_extra_large: {
-            margin: '164px 0'
-        },
-        $padding_small: {
-            padding: `${theme.methods.space.value(6, 'px')} ${theme.methods.space.value(3, 'px')}`
-        },
-        $padding_regular: {
-            padding: `${theme.methods.space.value(10, 'px')} ${theme.methods.space.value(4, 'px')}`
-        },
-        $padding_large: {
-            padding: `${theme.methods.space.value(14, 'px')} ${theme.methods.space.value(5, 'px')}`
-        },
-        $padding_extra_large: {
-            padding: `${theme.methods.space.value(18, 'px')} ${theme.methods.space.value(6, 'px')}`
-        },
-        $padding_extra_extra_large: {
-            padding: `${theme.methods.space.value(22, 'px')} ${theme.methods.space.value(7, 'px')}`
-        }
+    $padding_extra_large: {
+      padding: `${theme.methods.space.value(12, 'px')} ${theme.methods.space.value(3, 'px')}`
     },
-    '@media only screen and (max-width: 480px)': {
-        $margin_small: {
-            margin: '24px 24px',
-            width: 'calc(100% - 48px) !important'
-        },
-        $margin_regular: {
-            margin: '48px 24px',
-            width: 'calc(100% - 48px) !important'
-        },
-        $margin_large: {
-            margin: '64px 24px',
-            width: 'calc(100% - 48px) !important'
-        },
-        $margin_extra_large: {
-            margin: '84px 24px',
-            width: 'calc(100% - 48px) !important'
-        },
-        $margin_extra_extra_large: {
-            margin: '104px 24px',
-            width: 'calc(100% - 48px) !important'
-        },
-        $margin_vertical_small: {
-            margin: '24px 0'
-        },
-        $margin_vertical_regular: {
-            margin: '48px 0'
-        },
-        $margin_vertical_large: {
-            margin: '64px 0'
-        },
-        $margin_vertical_extra_large: {
-            margin: '84px 0'
-        },
-        $margin_vertical_extra_extra_large: {
-            margin: '104px 0'
-        },
-        $padding_small: {
-            padding: theme.methods.space.value(3, 'px')
-        },
-        $padding_regular: {
-            padding: `${theme.methods.space.value(6, 'px')} ${theme.methods.space.value(3, 'px')}`
-        },
-        $padding_large: {
-            padding: `${theme.methods.space.value(9, 'px')} ${theme.methods.space.value(3, 'px')}`
-        },
-        $padding_extra_large: {
-            padding: `${theme.methods.space.value(12, 'px')} ${theme.methods.space.value(3, 'px')}`
-        },
-        $padding_extra_extra_large: {
-            padding: `${theme.methods.space.value(15, 'px')} ${theme.methods.space.value(3, 'px')}`
-        }
+    $padding_extra_extra_large: {
+      padding: `${theme.methods.space.value(15, 'px')} ${theme.methods.space.value(3, 'px')}`
     }
-}), { name: 'onesy-Section' });
-const Section = react_1.default.forwardRef((props_, ref) => {
-    const theme = (0, style_react_1.useOnesyTheme)();
-    const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesySection) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_), props_ === null || props_ === void 0 ? void 0 : props_.AdditionalProps)); }, [props_]);
-    const Line = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Line) || Line_1.default; }, [theme]);
-    const Type = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Type) || Type_1.default; }, [theme]);
-    const Reveal = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Reveal) || Reveal_1.default; }, [theme]);
-    const { themed = true, title: title_, description: description_, show: show_, reveal, backgroundColor, backgroundGradient, backgroundImage, backgroundVideo, overlay, overlayBlur, size: size_, margin: margin_, marginVertical: marginVertical_, padding: padding_, maxWidth: maxWidth_, start, end, MainProps, RevealProps, TitleProps, DescriptionProps, HeaderProps, className, children } = props, other = __rest(props, ["themed", "title", "description", "show", "reveal", "backgroundColor", "backgroundGradient", "backgroundImage", "backgroundVideo", "overlay", "overlayBlur", "size", "margin", "marginVertical", "padding", "maxWidth", "start", "end", "MainProps", "RevealProps", "TitleProps", "DescriptionProps", "HeaderProps", "className", "children"]);
-    const { classes } = useStyle();
-    const refs = {
-        root: react_1.default.useRef(undefined)
-    };
-    const keys = react_1.default.useMemo(() => {
-        const result = [];
-        const items = [title_, description_, show_, size_, margin_, marginVertical_, padding_, maxWidth_];
-        items.forEach(item => {
-            if ((0, utils_1.is)('object', item))
-                Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key => result.push(key));
-        });
-        return (0, utils_1.unique)(result);
-    }, [title_, description_, show_, size_, margin_, marginVertical_, padding_, maxWidth_]);
-    const breakpoints = {};
-    keys.forEach(key => {
-        breakpoints[key] = (0, useMediaQuery_1.default)(theme.breakpoints.media[key], { element: refs.root.current });
+  }
+}), {
+  name: 'onesy-Section'
+});
+const Section = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  const theme = (0, _styleReact.useOnesyTheme)();
+  const props = _react.default.useMemo(() => {
+    var _theme$ui, _theme$ui2;
+    return _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesySection) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_), props_ === null || props_ === void 0 ? void 0 : props_.AdditionalProps);
+  }, [props_]);
+  const Line = _react.default.useMemo(() => {
+    var _theme$elements;
+    return (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
+  }, [theme]);
+  const Type = _react.default.useMemo(() => {
+    var _theme$elements2;
+    return (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Type) || _Type.default;
+  }, [theme]);
+  const Reveal = _react.default.useMemo(() => {
+    var _theme$elements3;
+    return (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Reveal) || _Reveal.default;
+  }, [theme]);
+  const {
+      themed = true,
+      title: title_,
+      description: description_,
+      show: show_,
+      reveal,
+      backgroundColor,
+      backgroundGradient,
+      backgroundImage,
+      backgroundVideo,
+      overlay,
+      overlayBlur,
+      size: size_,
+      margin: margin_,
+      marginVertical: marginVertical_,
+      padding: padding_,
+      maxWidth: maxWidth_,
+      start,
+      end,
+      MainProps,
+      RevealProps,
+      TitleProps,
+      DescriptionProps,
+      HeaderProps,
+      className,
+      children
+    } = props,
+    other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  const {
+    classes
+  } = useStyle();
+  const refs = {
+    root: _react.default.useRef(undefined)
+  };
+  const keys = _react.default.useMemo(() => {
+    const result = [];
+    const items = [title_, description_, show_, size_, margin_, marginVertical_, padding_, maxWidth_];
+    items.forEach(item => {
+      if ((0, _utils.is)('object', item)) Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key => result.push(key));
     });
-    const title = (0, utils_2.valueBreakpoints)(title_, undefined, breakpoints, theme);
-    const description = (0, utils_2.valueBreakpoints)(description_, undefined, breakpoints, theme);
-    const show = (0, utils_2.valueBreakpoints)(show_, true, breakpoints, theme);
-    const size = (0, utils_2.valueBreakpoints)(size_, 'regular', breakpoints, theme);
-    const margin = (0, utils_2.valueBreakpoints)(margin_, false, breakpoints, theme);
-    const marginVertical = (0, utils_2.valueBreakpoints)(marginVertical_, false, breakpoints, theme);
-    const padding = (0, utils_2.valueBreakpoints)(padding_, true, breakpoints, theme);
-    const maxWidth = (0, utils_2.valueBreakpoints)(maxWidth_, 'regular', breakpoints, theme);
-    let styleBackground = {};
-    if (backgroundColor) {
-        if (['default'].includes(backgroundColor)) {
-            styleBackground = Object.assign(Object.assign({}, styleBackground), { backgroundColor: theme.palette.background.default.primary });
-        }
-        else if (['inverted'].includes(backgroundColor)) {
-            styleBackground = Object.assign(Object.assign({}, styleBackground), { backgroundColor: theme.palette.background[theme.palette.light ? 'dark' : 'light'].primary });
-        }
-        else {
-            const palette = ['inherit', 'initial', 'themed', 'neutral'].includes(backgroundColor) ? theme.palette.color.neutral : (theme.palette.color[backgroundColor] || theme.methods.color(backgroundColor));
-            styleBackground = Object.assign(Object.assign({}, styleBackground), { backgroundColor: themed ? palette[theme.palette.light ? 95 : 90] : palette === null || palette === void 0 ? void 0 : palette.main });
-        }
+    return (0, _utils.unique)(result);
+  }, [title_, description_, show_, size_, margin_, marginVertical_, padding_, maxWidth_]);
+  const breakpoints = {};
+  keys.forEach(key => {
+    breakpoints[key] = (0, _useMediaQuery.default)(theme.breakpoints.media[key], {
+      element: refs.root.current
+    });
+  });
+  const title = (0, _utils2.valueBreakpoints)(title_, undefined, breakpoints, theme);
+  const description = (0, _utils2.valueBreakpoints)(description_, undefined, breakpoints, theme);
+  const show = (0, _utils2.valueBreakpoints)(show_, true, breakpoints, theme);
+  const size = (0, _utils2.valueBreakpoints)(size_, 'regular', breakpoints, theme);
+  const margin = (0, _utils2.valueBreakpoints)(margin_, false, breakpoints, theme);
+  const marginVertical = (0, _utils2.valueBreakpoints)(marginVertical_, false, breakpoints, theme);
+  const padding = (0, _utils2.valueBreakpoints)(padding_, true, breakpoints, theme);
+  const maxWidth = (0, _utils2.valueBreakpoints)(maxWidth_, 'regular', breakpoints, theme);
+  let styleBackground = {};
+  if (backgroundColor) {
+    if (['default'].includes(backgroundColor)) {
+      styleBackground = _objectSpread(_objectSpread({}, styleBackground), {}, {
+        backgroundColor: theme.palette.background.default.primary
+      });
+    } else if (['inverted'].includes(backgroundColor)) {
+      styleBackground = _objectSpread(_objectSpread({}, styleBackground), {}, {
+        backgroundColor: theme.palette.background[theme.palette.light ? 'dark' : 'light'].primary
+      });
+    } else {
+      const palette = ['inherit', 'initial', 'themed', 'neutral'].includes(backgroundColor) ? theme.palette.color.neutral : theme.palette.color[backgroundColor] || theme.methods.color(backgroundColor);
+      styleBackground = _objectSpread(_objectSpread({}, styleBackground), {}, {
+        backgroundColor: themed ? palette[theme.palette.light ? 95 : 90] : palette === null || palette === void 0 ? void 0 : palette.main
+      });
+    }
+  }
+  if ((0, _utils.is)('array', backgroundGradient) && backgroundGradient.length >= 2) {
+    const palette1 = theme.palette.color[backgroundGradient[0]] || theme.methods.color(backgroundGradient[0]);
+    const palette2 = theme.palette.color[backgroundGradient[1]] || theme.methods.color(backgroundGradient[1]);
+    const palette3 = theme.palette.color[backgroundGradient[2]] || theme.methods.color(backgroundGradient[2]);
+    let backgroundImageStyle = '';
+    if ((backgroundGradient === null || backgroundGradient === void 0 ? void 0 : backgroundGradient.length) === 2) {
+      backgroundImageStyle = themed ? `linear-gradient(${theme.palette.light ? '130deg' : '330deg'}, ${theme.methods.palette.color.colorToRgb(palette1.main, 0.14)} 0%, ${theme.methods.palette.color.colorToRgb(palette2.main, 0.14)} 100%)` : `linear-gradient(${theme.palette.light ? '130deg' : '330deg'}, ${palette1.main} 0%, ${palette2.main} 100%)`;
     }
-    if ((0, utils_1.is)('array', backgroundGradient) && backgroundGradient.length >= 2) {
-        const palette1 = theme.palette.color[backgroundGradient[0]] || theme.methods.color(backgroundGradient[0]);
-        const palette2 = theme.palette.color[backgroundGradient[1]] || theme.methods.color(backgroundGradient[1]);
-        const palette3 = theme.palette.color[backgroundGradient[2]] || theme.methods.color(backgroundGradient[2]);
-        let backgroundImageStyle = '';
-        if ((backgroundGradient === null || backgroundGradient === void 0 ? void 0 : backgroundGradient.length) === 2) {
-            backgroundImageStyle = themed ? `linear-gradient(${theme.palette.light ? '130deg' : '330deg'}, ${theme.methods.palette.color.colorToRgb(palette1.main, 0.14)} 0%, ${theme.methods.palette.color.colorToRgb(palette2.main, 0.14)} 100%)` : `linear-gradient(${theme.palette.light ? '130deg' : '330deg'}, ${palette1.main} 0%, ${palette2.main} 100%)`;
-        }
-        if ((backgroundGradient === null || backgroundGradient === void 0 ? void 0 : backgroundGradient.length) === 3) {
-            backgroundImageStyle = themed ? `linear-gradient(${theme.palette.light ? '130deg' : '330deg'}, ${theme.methods.palette.color.colorToRgb(palette1.main, 0.14)} 0%, ${theme.methods.palette.color.colorToRgb(palette2.main, 0.14)} 40%, ${theme.methods.palette.color.colorToRgb(palette3.main, 0.14)} 100%)` : `linear-gradient(${theme.palette.light ? '130deg' : '330deg'}, ${palette1.main} 0%, ${palette2.main} 40%, ${palette3.main} 100%)`;
-        }
-        styleBackground = Object.assign(Object.assign({}, styleBackground), { backgroundImage: backgroundImageStyle });
+    if ((backgroundGradient === null || backgroundGradient === void 0 ? void 0 : backgroundGradient.length) === 3) {
+      backgroundImageStyle = themed ? `linear-gradient(${theme.palette.light ? '130deg' : '330deg'}, ${theme.methods.palette.color.colorToRgb(palette1.main, 0.14)} 0%, ${theme.methods.palette.color.colorToRgb(palette2.main, 0.14)} 40%, ${theme.methods.palette.color.colorToRgb(palette3.main, 0.14)} 100%)` : `linear-gradient(${theme.palette.light ? '130deg' : '330deg'}, ${palette1.main} 0%, ${palette2.main} 40%, ${palette3.main} 100%)`;
     }
-    if (backgroundImage) {
-        const url = (backgroundImage === null || backgroundImage === void 0 ? void 0 : backgroundImage.url) || (backgroundImage === null || backgroundImage === void 0 ? void 0 : backgroundImage.urlSmall) || ((0, utils_1.is)('string', backgroundImage) ? backgroundImage : '');
-        if (url) {
-            styleBackground = Object.assign(Object.assign({}, styleBackground), { backgroundImage: `url('${url}')` });
-        }
+    styleBackground = _objectSpread(_objectSpread({}, styleBackground), {}, {
+      backgroundImage: backgroundImageStyle
+    });
+  }
+  if (backgroundImage) {
+    const url = (backgroundImage === null || backgroundImage === void 0 ? void 0 : backgroundImage.url) || (backgroundImage === null || backgroundImage === void 0 ? void 0 : backgroundImage.urlSmall) || ((0, _utils.is)('string', backgroundImage) ? backgroundImage : '');
+    if (url) {
+      styleBackground = _objectSpread(_objectSpread({}, styleBackground), {}, {
+        backgroundImage: `url('${url}')`
+      });
     }
-    let styleOverlay = {};
-    if (overlay) {
-        const palette = theme.palette.color[overlay] || theme.methods.color(overlay);
-        styleOverlay = Object.assign(Object.assign({}, styleOverlay), { backgroundColor: themed ? theme.methods.palette.color.alpha(theme.methods.palette.color.value(undefined, 95, true, palette), 0.74) : palette === null || palette === void 0 ? void 0 : palette.main });
+  }
+  let styleOverlay = {};
+  if (overlay) {
+    const palette = theme.palette.color[overlay] || theme.methods.color(overlay);
+    styleOverlay = _objectSpread(_objectSpread({}, styleOverlay), {}, {
+      backgroundColor: themed ? theme.methods.palette.color.alpha(theme.methods.palette.color.value(undefined, 95, true, palette), 0.74) : palette === null || palette === void 0 ? void 0 : palette.main
+    });
+  }
+  const urlVideo = (backgroundVideo === null || backgroundVideo === void 0 ? void 0 : backgroundVideo.url) || (backgroundVideo === null || backgroundVideo === void 0 ? void 0 : backgroundVideo.urlSmall) || ((0, _utils.is)('string', backgroundVideo) ? backgroundVideo : '');
+  const Wrapper = reveal ? Reveal : _react.default.Fragment;
+  let wrapperProps = {};
+  if (reveal) {
+    wrapperProps = _objectSpread({}, RevealProps);
+  }
+  if (show !== undefined && !show) return null;
+  return /*#__PURE__*/_react.default.createElement(Wrapper, wrapperProps, /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
+    ref: item => {
+      if (ref) {
+        if ((0, _utils.is)('function', ref)) ref(item);else ref.current = item;
+      }
+      refs.root.current = item;
+    },
+    gap: 4,
+    direction: "column",
+    align: "center",
+    fullWidth: true,
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Section', theme) && ['onesy-Section-root', `onesy-Section-size-${size}`], className, classes.root, margin !== false && margin && (classes[`margin_${margin}`] || classes[`margin_${size}`]), marginVertical !== false && !margin && marginVertical && (classes[`margin_vertical_${marginVertical}`] || classes[`margin_vertical_${size}`]), padding !== false && (classes[`padding_${padding}`] || classes[`padding_${size}`])])
+  }, other), start, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _styleReact.classNames)([classes.background, backgroundImage && styleBackground.backgroundImage && classes.backgroundImage]),
+    style: _objectSpread({}, styleBackground)
+  }, urlVideo && /*#__PURE__*/_react.default.createElement("video", {
+    autoPlay: true,
+    muted: true,
+    loop: true,
+    className: classes.backgroundVideo
+  }, /*#__PURE__*/_react.default.createElement("source", {
+    src: urlVideo
+  })), overlay && /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _styleReact.classNames)([classes.backgroundOverlay, overlayBlur && classes.backgroundOverlayBlur]),
+    style: _objectSpread({}, styleOverlay)
+  })), (title || description) && /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
+    gap: 1,
+    align: "center",
+    fullWidth: true
+  }, HeaderProps, {
+    className: (0, _styleReact.classNames)([HeaderProps === null || HeaderProps === void 0 ? void 0 : HeaderProps.className, classes.header, maxWidth && classes[`maxWidth_${maxWidth}`]])
+  }), (0, _utils.is)('string', title) && /*#__PURE__*/_react.default.createElement(Type, (0, _extends2.default)({
+    version: size === 'large' ? 'h1' : size === 'regular' ? 'h2' : 'h3',
+    align: "center"
+  }, TitleProps, {
+    dangerouslySetInnerHTML: {
+      __html: (0, _utils.textToInnerHTML)(title)
     }
-    const urlVideo = (backgroundVideo === null || backgroundVideo === void 0 ? void 0 : backgroundVideo.url) || (backgroundVideo === null || backgroundVideo === void 0 ? void 0 : backgroundVideo.urlSmall) || ((0, utils_1.is)('string', backgroundVideo) ? backgroundVideo : '');
-    const Wrapper = reveal ? Reveal : react_1.default.Fragment;
-    let wrapperProps = {};
-    if (reveal) {
-        wrapperProps = Object.assign({}, RevealProps);
+  })), (0, _utils.is)('string', description) && /*#__PURE__*/_react.default.createElement(Type, (0, _extends2.default)({
+    version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b3',
+    align: "center"
+  }, DescriptionProps, {
+    dangerouslySetInnerHTML: {
+      __html: (0, _utils.textToInnerHTML)(description)
     }
-    if (show !== undefined && !show)
-        return null;
-    return ((0, jsx_runtime_1.jsx)(Wrapper, Object.assign({}, wrapperProps, { children: (0, jsx_runtime_1.jsxs)(Line, Object.assign({ ref: (item) => {
-                if (ref) {
-                    if ((0, utils_1.is)('function', ref))
-                        ref(item);
-                    else
-                        ref.current = item;
-                }
-                refs.root.current = item;
-            }, gap: 4, direction: 'column', align: 'center', fullWidth: true, className: (0, style_react_1.classNames)([
-                (0, utils_2.staticClassName)('Section', theme) && [
-                    'onesy-Section-root',
-                    `onesy-Section-size-${size}`
-                ],
-                className,
-                classes.root,
-                (margin !== false) && (margin && (classes[`margin_${margin}`] || classes[`margin_${size}`])),
-                (marginVertical !== false) && (!margin && marginVertical && (classes[`margin_vertical_${marginVertical}`] || classes[`margin_vertical_${size}`])),
-                (padding !== false) && (classes[`padding_${padding}`] || classes[`padding_${size}`])
-            ]) }, other, { children: [start, (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, style_react_1.classNames)([
-                        classes.background,
-                        backgroundImage && styleBackground.backgroundImage && classes.backgroundImage
-                    ]), style: Object.assign({}, styleBackground) }, { children: [urlVideo && ((0, jsx_runtime_1.jsx)("video", Object.assign({ autoPlay: true, muted: true, loop: true, className: classes.backgroundVideo }, { children: (0, jsx_runtime_1.jsx)("source", { src: urlVideo }) }))), overlay && ((0, jsx_runtime_1.jsx)("div", { className: (0, style_react_1.classNames)([
-                                classes.backgroundOverlay,
-                                overlayBlur && classes.backgroundOverlayBlur
-                            ]), style: Object.assign({}, styleOverlay) }))] })), (title || description) && ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, align: 'center', fullWidth: true }, HeaderProps, { className: (0, style_react_1.classNames)([
-                        HeaderProps === null || HeaderProps === void 0 ? void 0 : HeaderProps.className,
-                        classes.header,
-                        maxWidth && classes[`maxWidth_${maxWidth}`]
-                    ]) }, { children: [(0, utils_1.is)('string', title) && ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: size === 'large' ? 'h1' : size === 'regular' ? 'h2' : 'h3', align: 'center' }, TitleProps, { dangerouslySetInnerHTML: {
-                                __html: (0, utils_1.textToInnerHTML)(title)
-                            } }))), (0, utils_1.is)('string', description) && ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b3', align: 'center' }, DescriptionProps, { dangerouslySetInnerHTML: {
-                                __html: (0, utils_1.textToInnerHTML)(description)
-                            } })))] }))), (0, jsx_runtime_1.jsx)(Line, Object.assign({ gap: 2, direction: 'column', align: 'center', fullWidth: true, className: (0, style_react_1.classNames)([
-                        (0, utils_2.staticClassName)('Section', theme) && [
-                            'onesy-Section-main'
-                        ],
-                        MainProps === null || MainProps === void 0 ? void 0 : MainProps.className,
-                        classes.main,
-                        maxWidth && classes[`maxWidth_${maxWidth}`]
-                    ]) }, MainProps, { children: children })), end] })) })));
+  }))), /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
+    gap: 2,
+    direction: "column",
+    align: "center",
+    fullWidth: true,
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Section', theme) && ['onesy-Section-main'], MainProps === null || MainProps === void 0 ? void 0 : MainProps.className, classes.main, maxWidth && classes[`maxWidth_${maxWidth}`]])
+  }, MainProps), children), end));
 });
 Section.displayName = 'onesy-Section';
-exports.default = Section;
+var _default = exports.default = Section;