@onesy/ui-react 1.0.129 → 1.0.131

package/PieChart/index.js

@@ -1,8 +1,13 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = void 0;
-var PieChart_1 = require("./PieChart");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(PieChart_1).default; } });
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _PieChart.default;
+  }
+});
+var _PieChart = _interopRequireDefault(require("./PieChart"));

package/Placeholder/Placeholder.js

@@ -1,125 +1,133 @@
 "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 style_react_1 = require("@onesy/style-react");
-const Surface_1 = __importDefault(require("../Surface"));
-const utils_1 = require("../utils");
-const useStyle = (0, style_react_1.style)(theme => ({
-    '@keyframes move': {
-        '100%': {
-            transform: 'translateX(100%)'
-        }
-    },
-    '@keyframes pulse': {
-        '0%': {
-            opacity: '1'
-        },
-        '50%': {
-            opacity: '0.4'
-        },
-        '100%': {
-            opacity: '1'
-        }
-    },
-    '@keyframes pulseDark': {
-        '0%': {
-            opacity: '1'
-        },
-        '50%': {
-            opacity: '0.7'
-        },
-        '100%': {
-            opacity: '1'
-        }
-    },
-    root: {
-        position: 'relative',
-        userSelect: 'none',
-        overflow: 'hidden'
-    },
-    wrapper: {
-        opacity: theme.palette.light ? '0.07' : '0.14',
-        background: 'currentColor',
-        width: '100%',
-        height: '100%'
-    },
-    animation_wave: {
-        '&::before': {
-            content: "''",
-            position: 'absolute',
-            inset: '0',
-            background: `linear-gradient(90deg, transparent, ${theme.methods.palette.color.colorToRgb(theme.palette.text.default.primary, 4)}, transparent)`,
-            transform: 'translateX(-100%)',
-            animation: '$move 2.4s infinite'
-        }
-    },
-    animation_pulse: {
-        animation: `$pulse${theme.palette.light ? '' : 'Dark'} 2.4s 0.4s infinite`
-    },
-    version_circle: {
-        borderRadius: theme.methods.shape.radius.value(40, 'px')
+
+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 _styleReact = require("@onesy/style-react");
+var _Surface = _interopRequireDefault(require("../Surface"));
+var _utils = require("../utils");
+const _excluded = ["color", "version", "width", "height", "animation", "text", "Component", "className", "style", "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 => ({
+  '@keyframes move': {
+    '100%': {
+      transform: 'translateX(100%)'
+    }
+  },
+  '@keyframes pulse': {
+    '0%': {
+      opacity: '1'
     },
-    version_rounded: {
-        borderRadius: theme.methods.shape.radius.value(1, 'px')
+    '50%': {
+      opacity: '0.4'
     },
-    version_rectangle: {
-        borderRadius: '0px'
+    '100%': {
+      opacity: '1'
+    }
+  },
+  '@keyframes pulseDark': {
+    '0%': {
+      opacity: '1'
     },
-    text: {
-        height: '1em'
+    '50%': {
+      opacity: '0.7'
     },
-    children: {
-        visibility: 'hidden'
+    '100%': {
+      opacity: '1'
+    }
+  },
+  root: {
+    position: 'relative',
+    userSelect: 'none',
+    overflow: 'hidden'
+  },
+  wrapper: {
+    opacity: theme.palette.light ? '0.07' : '0.14',
+    background: 'currentColor',
+    width: '100%',
+    height: '100%'
+  },
+  animation_wave: {
+    '&::before': {
+      content: "''",
+      position: 'absolute',
+      inset: '0',
+      background: `linear-gradient(90deg, transparent, ${theme.methods.palette.color.colorToRgb(theme.palette.text.default.primary, 4)}, transparent)`,
+      transform: 'translateX(-100%)',
+      animation: '$move 2.4s infinite'
     }
-}), { name: 'onesy-Placeholder' });
-const Placeholder = 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({}, (_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.onesyPlaceholder) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
-    const Surface = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Surface) || Surface_1.default; }, [theme]);
-    const { color = 'default', version = 'rounded', width, height, animation = 'pulse', text, Component = 'div', className, style, children } = props, other = __rest(props, ["color", "version", "width", "height", "animation", "text", "Component", "className", "style", "children"]);
-    const { classes } = useStyle();
-    const styles = {
-        root: {}
-    };
-    if (width !== undefined)
-        styles.root.width = width;
-    if (height !== undefined)
-        styles.root.height = height;
-    return ((0, jsx_runtime_1.jsx)(Component, Object.assign({ ref: ref, className: (0, style_react_1.classNames)([
-            (0, utils_1.staticClassName)('Placeholder', theme) && [
-                `onesy-Placeholder-root`
-            ],
-            className,
-            classes.root,
-            classes[`version_${version}`],
-            animation && animation && classes[`animation_${animation}`],
-            text && classes.text
-        ]), style: Object.assign(Object.assign({}, style), styles.root) }, other, { children: (0, jsx_runtime_1.jsx)(Surface, Object.assign({ version: 'text', tonal: false, color: color, className: (0, style_react_1.classNames)([
-                (0, utils_1.staticClassName)('Placeholder', theme) && [
-                    `onesy-Placeholder-wrapper`
-                ],
-                classes.wrapper
-            ]) }, { children: children && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, style_react_1.classNames)([
-                    (0, utils_1.staticClassName)('Placeholder', theme) && [
-                        `onesy-Placeholder-children`
-                    ],
-                    classes.children
-                ]) }, { children: children }))) })) })));
+  },
+  animation_pulse: {
+    animation: `$pulse${theme.palette.light ? '' : 'Dark'} 2.4s 0.4s infinite`
+  },
+  version_circle: {
+    borderRadius: theme.methods.shape.radius.value(40, 'px')
+  },
+  version_rounded: {
+    borderRadius: theme.methods.shape.radius.value(1, 'px')
+  },
+  version_rectangle: {
+    borderRadius: '0px'
+  },
+  text: {
+    height: '1em'
+  },
+  children: {
+    visibility: 'hidden'
+  }
+}), {
+  name: 'onesy-Placeholder'
+});
+const Placeholder = /*#__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({}, 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.onesyPlaceholder) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  }, [props_]);
+  const Surface = _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.Surface) || _Surface.default;
+  }, [theme]);
+  const {
+      color = 'default',
+      version = 'rounded',
+      width,
+      height,
+      animation = 'pulse',
+      text,
+      Component = 'div',
+      className,
+      style,
+      children
+    } = props,
+    other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  const {
+    classes
+  } = useStyle();
+  const styles = {
+    root: {}
+  };
+  if (width !== undefined) styles.root.width = width;
+  if (height !== undefined) styles.root.height = height;
+  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+    ref: ref,
+    className: (0, _styleReact.classNames)([(0, _utils.staticClassName)('Placeholder', theme) && [`onesy-Placeholder-root`], className, classes.root, classes[`version_${version}`], animation && animation && classes[`animation_${animation}`], text && classes.text]),
+    style: _objectSpread(_objectSpread({}, style), styles.root)
+  }, other), /*#__PURE__*/_react.default.createElement(Surface, {
+    version: "text",
+    tonal: false,
+    color: color,
+    className: (0, _styleReact.classNames)([(0, _utils.staticClassName)('Placeholder', theme) && [`onesy-Placeholder-wrapper`], classes.wrapper])
+  }, children && /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _styleReact.classNames)([(0, _utils.staticClassName)('Placeholder', theme) && [`onesy-Placeholder-children`], classes.children])
+  }, children)));
 });
 Placeholder.displayName = 'onesy-Placeholder';
-exports.default = Placeholder;
+var _default = exports.default = Placeholder;

package/Placeholder/index.js

@@ -1,8 +1,13 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = void 0;
-var Placeholder_1 = require("./Placeholder");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Placeholder_1).default; } });
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Placeholder.default;
+  }
+});
+var _Placeholder = _interopRequireDefault(require("./Placeholder"));

package/Portal/Portal.js

@@ -1,41 +1,40 @@
 "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 react_1 = __importDefault(require("react"));
-const react_dom_1 = __importDefault(require("react-dom"));
-const utils_1 = require("@onesy/utils");
-const style_react_1 = require("@onesy/style-react");
-const Portal = 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({}, (_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.onesyPortal) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
-    const { element, children } = props, other = __rest(props, ["element", "children"]);
-    return (react_dom_1.default.createPortal(react_1.default.cloneElement(children, Object.assign({ ref: (item) => {
-            if (ref) {
-                if ((0, utils_1.is)('function', ref))
-                    ref(item);
-                else
-                    ref.current = item;
-            }
-            if (children.ref) {
-                if ((0, utils_1.is)('function', children.ref))
-                    children.ref(item);
-                else
-                    children.ref.current = item;
-            }
-        } }, other)), element));
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _reactDom = _interopRequireDefault(require("react-dom"));
+var _utils = require("@onesy/utils");
+var _styleReact = require("@onesy/style-react");
+const _excluded = ["element", "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 Portal = /*#__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({}, 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.onesyPortal) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  }, [props_]);
+  const {
+      element,
+      children
+    } = props,
+    other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  return /*#__PURE__*/_reactDom.default.createPortal(/*#__PURE__*/_react.default.cloneElement(children, _objectSpread({
+    ref: item => {
+      if (ref) {
+        if ((0, _utils.is)('function', ref)) ref(item);else ref.current = item;
+      }
+      if (children.ref) {
+        if ((0, _utils.is)('function', children.ref)) children.ref(item);else children.ref.current = item;
+      }
+    }
+  }, other)), element);
 });
 Portal.displayName = 'onesy-Portal';
-exports.default = Portal;
+var _default = exports.default = Portal;

package/Portal/index.js

@@ -1,8 +1,13 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = void 0;
-var Portal_1 = require("./Portal");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Portal_1).default; } });
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Portal.default;
+  }
+});
+var _Portal = _interopRequireDefault(require("./Portal"));

package/Properties/Properties.js

@@ -1,67 +1,88 @@
 "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 style_react_1 = require("@onesy/style-react");
-const Line_1 = __importDefault(require("../Line/Line"));
-const Property_1 = __importDefault(require("../Property"));
-const utils_1 = require("../utils");
-const useStyle = (0, style_react_1.style)(theme => ({
-    root: {},
-    maxWidth_extra_small: {
-        maxWidth: '240px'
-    },
-    maxWidth_small: {
-        maxWidth: '340px'
-    },
-    maxWidth_regular: {
-        maxWidth: '440px'
-    },
-    maxWidth_large: {
-        maxWidth: '740px'
-    },
-    maxWidth_extra_large: {
-        maxWidth: '1024px'
-    },
-    maxWidth_extra_extra_large: {
-        maxWidth: '1440px'
-    }
-}), { name: 'onesy-Properties' });
-const Properties = react_1.default.forwardRef((props_, ref) => {
-    var _a;
-    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({}, (_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.onesyProperties) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [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 Property = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Property) || Property_1.default; }, [theme]);
-    const { version = 'row-20', size = 'regular', values = [], onlyWithValues = true, maxWidth, PropertyProps, className, children } = props, other = __rest(props, ["version", "size", "values", "onlyWithValues", "maxWidth", "PropertyProps", "className", "children"]);
-    const { classes } = useStyle();
-    if (!(values === null || values === void 0 ? void 0 : values.length) ||
-        onlyWithValues && !values.every((item) => item.value !== undefined))
-        return null;
-    return ((0, jsx_runtime_1.jsx)(Line, Object.assign({ ref: ref, gap: size === 'large' ? 1.5 : size === 'regular' ? 1 : 0.5, rowGap: size === 'large' ? 1.5 : size === 'regular' ? 1 : 0.5, fullWidth: true, className: (0, style_react_1.classNames)([
-            (0, utils_1.staticClassName)('Properties', theme) && [
-                'onesy-Properties-root',
-                `onesy-Properties-version-${version}`,
-                `onesy-Properties-size-${size}`
-            ],
-            className,
-            classes.root,
-            maxWidth && classes[`maxWidth_${maxWidth}`]
-        ]) }, other, { children: (_a = values === null || values === void 0 ? void 0 : values.filter(Boolean)) === null || _a === void 0 ? void 0 : _a.map((item, index) => ((0, jsx_runtime_1.jsx)(Property, Object.assign({ version: version, size: size, name: item.name, value: item.value, separator: item.separator }, PropertyProps, item.props), index))) })));
+
+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 _styleReact = require("@onesy/style-react");
+var _Line = _interopRequireDefault(require("../Line/Line"));
+var _Property = _interopRequireDefault(require("../Property"));
+var _utils = require("../utils");
+const _excluded = ["version", "size", "values", "onlyWithValues", "maxWidth", "PropertyProps", "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: {},
+  maxWidth_extra_small: {
+    maxWidth: '240px'
+  },
+  maxWidth_small: {
+    maxWidth: '340px'
+  },
+  maxWidth_regular: {
+    maxWidth: '440px'
+  },
+  maxWidth_large: {
+    maxWidth: '740px'
+  },
+  maxWidth_extra_large: {
+    maxWidth: '1024px'
+  },
+  maxWidth_extra_extra_large: {
+    maxWidth: '1440px'
+  }
+}), {
+  name: 'onesy-Properties'
+});
+const Properties = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _filter;
+  const theme = (0, _styleReact.useOnesyTheme)();
+  const props = _react.default.useMemo(() => {
+    var _theme$ui, _theme$ui2;
+    return _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.onesyProperties) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  }, [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 Property = _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.Property) || _Property.default;
+  }, [theme]);
+  const {
+      version = 'row-20',
+      size = 'regular',
+      values = [],
+      onlyWithValues = true,
+      maxWidth,
+      PropertyProps,
+      className,
+      children
+    } = props,
+    other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  const {
+    classes
+  } = useStyle();
+  if (!(values !== null && values !== void 0 && values.length) || onlyWithValues && !values.every(item => item.value !== undefined)) return null;
+  return /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
+    ref: ref,
+    gap: size === 'large' ? 1.5 : size === 'regular' ? 1 : 0.5,
+    rowGap: size === 'large' ? 1.5 : size === 'regular' ? 1 : 0.5,
+    fullWidth: true,
+    className: (0, _styleReact.classNames)([(0, _utils.staticClassName)('Properties', theme) && ['onesy-Properties-root', `onesy-Properties-version-${version}`, `onesy-Properties-size-${size}`], className, classes.root, maxWidth && classes[`maxWidth_${maxWidth}`]])
+  }, other), values === null || values === void 0 || (_filter = values.filter(Boolean)) === null || _filter === void 0 ? void 0 : _filter.map((item, index) => /*#__PURE__*/_react.default.createElement(Property, (0, _extends2.default)({
+    key: index,
+    version: version,
+    size: size,
+    name: item.name,
+    value: item.value,
+    separator: item.separator
+  }, PropertyProps, item.props))));
 });
 Properties.displayName = 'onesy-Properties';
-exports.default = Properties;
+var _default = exports.default = Properties;

package/Properties/index.js

@@ -1,8 +1,13 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = void 0;
-var Properties_1 = require("./Properties");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Properties_1).default; } });
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Properties.default;
+  }
+});
+var _Properties = _interopRequireDefault(require("./Properties"));