@onesy/ui-react 1.0.130 → 1.0.132

package/DateTimePicker/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 DateTimePicker_1 = require("./DateTimePicker");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(DateTimePicker_1).default; } });
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _DateTimePicker.default;
+  }
+});
+var _DateTimePicker = _interopRequireDefault(require("./DateTimePicker"));

package/DateTimeRangePicker/DateTimeRangePicker.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { IDateTimePicker } from '../DateTimePicker/DateTimePicker';
-export declare type IDateTimeRangePicker = IDateTimePicker & {};
+export type IDateTimeRangePicker = IDateTimePicker & {};
 declare const DateTimeRangePicker: React.FC<IDateTimeRangePicker>;
 export default DateTimeRangePicker;

package/DateTimeRangePicker/DateTimeRangePicker.js

@@ -1,40 +1,47 @@
 "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 DateTimePicker_1 = __importDefault(require("../DateTimePicker"));
-const utils_1 = require("../utils");
-const useStyle = (0, style_react_1.style)(theme => ({
-    root: {}
-}), { name: 'onesy-DateTimeRangePicker' });
-const DateTimeRangePicker = 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.onesyDateTimeRangePicker) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
-    const DateTimePicker = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.DateTimePicker) || DateTimePicker_1.default; }, [theme]);
-    const { className } = props, other = __rest(props, ["className"]);
-    const { classes } = useStyle();
-    return ((0, jsx_runtime_1.jsx)(DateTimePicker, Object.assign({ ref: ref, range: true, className: (0, style_react_1.classNames)([
-            (0, utils_1.staticClassName)('DateTimeRangePicker', theme) && [
-                'onesy-DateTimeRangePicker-root'
-            ],
-            className,
-            classes.root
-        ]) }, other)));
+
+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 _DateTimePicker = _interopRequireDefault(require("../DateTimePicker"));
+var _utils = require("../utils");
+const _excluded = ["className"];
+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: {}
+}), {
+  name: 'onesy-DateTimeRangePicker'
+});
+const DateTimeRangePicker = /*#__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.onesyDateTimeRangePicker) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  }, [props_]);
+  const DateTimePicker = _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.DateTimePicker) || _DateTimePicker.default;
+  }, [theme]);
+  const {
+      className
+    } = props,
+    other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  const {
+    classes
+  } = useStyle();
+  return /*#__PURE__*/_react.default.createElement(DateTimePicker, (0, _extends2.default)({
+    ref: ref,
+    range: true,
+    className: (0, _styleReact.classNames)([(0, _utils.staticClassName)('DateTimeRangePicker', theme) && ['onesy-DateTimeRangePicker-root'], className, classes.root])
+  }, other));
 });
 DateTimeRangePicker.displayName = 'onesy-DateTimeRangePicker';
-exports.default = DateTimeRangePicker;
+var _default = exports.default = DateTimeRangePicker;

package/DateTimeRangePicker/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 DateTimeRangePicker_1 = require("./DateTimeRangePicker");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(DateTimeRangePicker_1).default; } });
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _DateTimeRangePicker.default;
+  }
+});
+var _DateTimeRangePicker = _interopRequireDefault(require("./DateTimeRangePicker"));

package/Divider/Divider.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ISurface } from '../Surface/Surface';
-export declare type IDivider = ISurface & {
+export type IDivider = ISurface & {
     inset?: boolean;
     middle?: boolean;
     padding?: number;

package/Divider/Divider.js

@@ -1,188 +1,201 @@
 "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 Type_1 = __importDefault(require("../Type"));
-const Surface_1 = __importDefault(require("../Surface"));
-const utils_1 = require("../utils");
-const useStyle = (0, style_react_1.style)(theme => ({
-    root: {
-        // Reset
-        margin: '0',
-        border: 'none',
-        display: 'flex',
-        flexShrink: '0',
-        opacity: theme.palette.visual_contrast.default.opacity.divider,
-        transition: theme.methods.transitions.make('background')
-    },
-    divider_tonal: {
-        opacity: '1'
-    },
-    orientation_vertical: {
-        margin: '0 8px',
-        height: '100%',
-        width: '1px'
-    },
-    orientation_vertical_middle: {
-        margin: `16px 8px`,
-        height: `calc(100% - 32px)`
-    },
-    // Orientation
-    orientation_horizontal: {
-        margin: '8px 0',
-        height: '1px',
-        width: '100%'
-    },
-    orientation_horizontal_middle: {
-        margin: `8px 16px`,
-        width: `calc(100% - 32px)`
-    },
-    rootWithChildren: {
-        display: 'flex',
-        opacity: '1',
-        color: theme.palette.text.default.primary,
-        background: 'transparent',
-        // Reset
-        height: 'unset',
-        width: 'unset',
-        margin: '0',
-        border: 'none'
-    },
-    // Orientation
-    rootWithChildren_orientation_horizontal: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        width: '100%'
-    },
-    rootWithChildren_orientation_horizontal_middle: {
-        margin: `0 16px`,
-        width: `calc(100% - 32px)`
-    },
-    rootWithChildren_orientation_vertical: {
-        flexDirection: 'column',
-        alignItems: 'center',
-        height: '100%'
-    },
-    rootWithChildren_orientation_vertical_middle: {
-        margin: `16px 0`,
-        height: `calc(100% - 32px)`
-    },
-    // flex
-    flex_orientation_horizontal: {
-        flex: '1 1 auto',
-        width: 'auto'
-    },
-    flex_orientation_vertical: {
-        flex: '1 1 auto'
-    },
-    text: {
-        flex: '0 0 auto'
-    },
-    // Orientation
-    text_horizontal: {
-        margin: `0 16px`,
-    },
-    text_vertical: {
-        margin: `16px 0`,
-    },
-    divider: {
-        flex: '0 1 100%',
-        opacity: theme.palette.visual_contrast.default.opacity.divider
-    },
-    // Orientation
-    divider_orientation_horizontal: {
-        height: '1px'
-    },
-    divider_orientation_vertical: {
-        width: '1px'
-    },
-    orientation_horizontal_padding: {
-        marginInline: '16px',
-        width: 'calc(100% - 32px)'
-    },
-    orientation_vertical_padding: {
-        marginBlock: '16px',
-        height: 'calc(100% - 32px)'
-    },
-    color_inherit: {
-        opacity: theme.palette.visual_contrast.default.opacity.divider,
-        color: 'inherit',
-        background: 'currentColor'
-    },
-    inset: {
-        marginLeft: `72px`,
-        width: `calc(100% - 72px)`
-    }
-}), { name: 'onesy-Divider' });
-const Divider = 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.onesyDivider) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
-    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 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 { tonal = true, color = 'inverted', inset, middle, padding, opacity = theme.palette.visual_contrast.default.opacity.divider, alignment = 'center', orientation = 'horizontal', flex, Component: Component_ = 'hr', className, style, children } = props, other = __rest(props, ["tonal", "color", "inset", "middle", "padding", "opacity", "alignment", "orientation", "flex", "Component", "className", "style", "children"]);
-    const { classes } = useStyle();
-    const styles = {
-        root: {},
-        divider: {},
-        start: {},
-        end: {}
-    };
-    let Component = Component_;
-    if (children && Component === 'hr')
-        Component = 'div';
-    if (alignment === 'start')
-        styles.start.flexBasis = '15%';
-    if (alignment === 'end')
-        styles.end.flexBasis = '15%';
-    return ((0, jsx_runtime_1.jsx)(Surface, Object.assign({ ref: ref, version: 'filled', tonal: tonal, color: color, Component: Component, className: (0, style_react_1.classNames)([
-            (0, utils_1.staticClassName)('Divider', theme) && [
-                'onesy-Divider-root'
-            ],
-            className,
-            classes[children ? 'rootWithChildren' : 'root'],
-            classes[`${children ? 'rootWithChildren_' : ''}orientation_${orientation}`],
-            flex && classes[`flex_orientation_${orientation}`],
-            inset && classes.inset,
-            middle && classes[`${children ? `rootWithChildren_` : ''}orientation_${orientation}_middle`],
-            padding && classes[`orientation_${orientation}_padding`],
-            color === 'inherit' && classes.color_inherit,
-            tonal && classes.divider_tonal
-        ]), style: Object.assign(Object.assign({ opacity }, style), styles.root) }, other, { children: children && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Surface, { version: 'filled', tonal: tonal, color: color, className: (0, style_react_1.classNames)([
-                        (0, utils_1.staticClassName)('Divider', theme) && [
-                            'onesy-Divider-divider'
-                        ],
-                        classes.divider,
-                        classes[`divider_orientation_${orientation}`],
-                        tonal && classes.divider_tonal
-                    ]), style: Object.assign(Object.assign({}, styles.divider), styles.start) }), (0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b2', className: (0, style_react_1.classNames)([
-                        (0, utils_1.staticClassName)('Divider', theme) && [
-                            'onesy-Divider-text'
-                        ],
-                        classes.text,
-                        classes[`text_${orientation}`]
-                    ]) }, { children: children })), (0, jsx_runtime_1.jsx)(Surface, { version: 'filled', tonal: tonal, color: color, className: (0, style_react_1.classNames)([
-                        (0, utils_1.staticClassName)('Divider', theme) && [
-                            'onesy-Divider-divider'
-                        ],
-                        classes.divider,
-                        classes[`divider_orientation_${orientation}`],
-                        tonal && classes.divider_tonal
-                    ]), style: Object.assign(Object.assign({}, styles.divider), styles.end) })] }) })));
+
+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 _Type = _interopRequireDefault(require("../Type"));
+var _Surface = _interopRequireDefault(require("../Surface"));
+var _utils = require("../utils");
+const _excluded = ["tonal", "color", "inset", "middle", "padding", "opacity", "alignment", "orientation", "flex", "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 => ({
+  root: {
+    // Reset
+    margin: '0',
+    border: 'none',
+    display: 'flex',
+    flexShrink: '0',
+    opacity: theme.palette.visual_contrast.default.opacity.divider,
+    transition: theme.methods.transitions.make('background')
+  },
+  divider_tonal: {
+    opacity: '1'
+  },
+  orientation_vertical: {
+    margin: '0 8px',
+    height: '100%',
+    width: '1px'
+  },
+  orientation_vertical_middle: {
+    margin: `16px 8px`,
+    height: `calc(100% - 32px)`
+  },
+  // Orientation
+  orientation_horizontal: {
+    margin: '8px 0',
+    height: '1px',
+    width: '100%'
+  },
+  orientation_horizontal_middle: {
+    margin: `8px 16px`,
+    width: `calc(100% - 32px)`
+  },
+  rootWithChildren: {
+    display: 'flex',
+    opacity: '1',
+    color: theme.palette.text.default.primary,
+    background: 'transparent',
+    // Reset
+    height: 'unset',
+    width: 'unset',
+    margin: '0',
+    border: 'none'
+  },
+  // Orientation
+  rootWithChildren_orientation_horizontal: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    width: '100%'
+  },
+  rootWithChildren_orientation_horizontal_middle: {
+    margin: `0 16px`,
+    width: `calc(100% - 32px)`
+  },
+  rootWithChildren_orientation_vertical: {
+    flexDirection: 'column',
+    alignItems: 'center',
+    height: '100%'
+  },
+  rootWithChildren_orientation_vertical_middle: {
+    margin: `16px 0`,
+    height: `calc(100% - 32px)`
+  },
+  // flex
+  flex_orientation_horizontal: {
+    flex: '1 1 auto',
+    width: 'auto'
+  },
+  flex_orientation_vertical: {
+    flex: '1 1 auto'
+  },
+  text: {
+    flex: '0 0 auto'
+  },
+  // Orientation
+  text_horizontal: {
+    margin: `0 16px`
+  },
+  text_vertical: {
+    margin: `16px 0`
+  },
+  divider: {
+    flex: '0 1 100%',
+    opacity: theme.palette.visual_contrast.default.opacity.divider
+  },
+  // Orientation
+  divider_orientation_horizontal: {
+    height: '1px'
+  },
+  divider_orientation_vertical: {
+    width: '1px'
+  },
+  orientation_horizontal_padding: {
+    marginInline: '16px',
+    width: 'calc(100% - 32px)'
+  },
+  orientation_vertical_padding: {
+    marginBlock: '16px',
+    height: 'calc(100% - 32px)'
+  },
+  color_inherit: {
+    opacity: theme.palette.visual_contrast.default.opacity.divider,
+    color: 'inherit',
+    background: 'currentColor'
+  },
+  inset: {
+    marginLeft: `72px`,
+    width: `calc(100% - 72px)`
+  }
+}), {
+  name: 'onesy-Divider'
+});
+const Divider = /*#__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.onesyDivider) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  }, [props_]);
+  const Type = _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.Type) || _Type.default;
+  }, [theme]);
+  const Surface = _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.Surface) || _Surface.default;
+  }, [theme]);
+  const {
+      tonal = true,
+      color = 'inverted',
+      inset,
+      middle,
+      padding,
+      opacity = theme.palette.visual_contrast.default.opacity.divider,
+      alignment = 'center',
+      orientation = 'horizontal',
+      flex,
+      Component: Component_ = 'hr',
+      className,
+      style,
+      children
+    } = props,
+    other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  const {
+    classes
+  } = useStyle();
+  const styles = {
+    root: {},
+    divider: {},
+    start: {},
+    end: {}
+  };
+  let Component = Component_;
+  if (children && Component === 'hr') Component = 'div';
+  if (alignment === 'start') styles.start.flexBasis = '15%';
+  if (alignment === 'end') styles.end.flexBasis = '15%';
+  return /*#__PURE__*/_react.default.createElement(Surface, (0, _extends2.default)({
+    ref: ref,
+    version: "filled",
+    tonal: tonal,
+    color: color,
+    Component: Component,
+    className: (0, _styleReact.classNames)([(0, _utils.staticClassName)('Divider', theme) && ['onesy-Divider-root'], className, classes[children ? 'rootWithChildren' : 'root'], classes[`${children ? 'rootWithChildren_' : ''}orientation_${orientation}`], flex && classes[`flex_orientation_${orientation}`], inset && classes.inset, middle && classes[`${children ? `rootWithChildren_` : ''}orientation_${orientation}_middle`], padding && classes[`orientation_${orientation}_padding`], color === 'inherit' && classes.color_inherit, tonal && classes.divider_tonal]),
+    style: _objectSpread(_objectSpread({
+      opacity
+    }, style), styles.root)
+  }, other), children && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Surface, {
+    version: "filled",
+    tonal: tonal,
+    color: color,
+    className: (0, _styleReact.classNames)([(0, _utils.staticClassName)('Divider', theme) && ['onesy-Divider-divider'], classes.divider, classes[`divider_orientation_${orientation}`], tonal && classes.divider_tonal]),
+    style: _objectSpread(_objectSpread({}, styles.divider), styles.start)
+  }), /*#__PURE__*/_react.default.createElement(Type, {
+    version: "b2",
+    className: (0, _styleReact.classNames)([(0, _utils.staticClassName)('Divider', theme) && ['onesy-Divider-text'], classes.text, classes[`text_${orientation}`]])
+  }, children), /*#__PURE__*/_react.default.createElement(Surface, {
+    version: "filled",
+    tonal: tonal,
+    color: color,
+    className: (0, _styleReact.classNames)([(0, _utils.staticClassName)('Divider', theme) && ['onesy-Divider-divider'], classes.divider, classes[`divider_orientation_${orientation}`], tonal && classes.divider_tonal]),
+    style: _objectSpread(_objectSpread({}, styles.divider), styles.end)
+  })));
 });
 Divider.displayName = 'onesy-Divider';
-exports.default = Divider;
+var _default = exports.default = Divider;

package/Divider/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 Divider_1 = require("./Divider");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Divider_1).default; } });
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Divider.default;
+  }
+});
+var _Divider = _interopRequireDefault(require("./Divider"));

package/DonutChart/DonutChart.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { IPieChart } from '../PieChart/PieChart';
-export declare type IDonutChart = IPieChart & {};
+export type IDonutChart = IPieChart & {};
 declare const DonutChart: React.FC<IDonutChart>;
 export default DonutChart;