@onesy/ui-react 1.0.130 → 1.0.132

package/Badge/Badge.js

@@ -1,99 +1,119 @@
 "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 => ({
-    root: {
-        display: 'inline-flex',
-        position: 'relative'
-    },
-    badge: Object.assign(Object.assign({ position: 'absolute', padding: `${theme.methods.space.value(0.25, 'px')} ${theme.methods.space.value(0.75, 'px')}`, lineHeight: '1px', borderRadius: theme.methods.shape.radius.value(40, 'px'), transition: theme.methods.transitions.make('transform'), pointerEvents: 'none', userSelect: 'none' }, theme.typography.values.l3), { fontSize: `${10 / 16}rem` }),
-    // Vertical & horizontal
-    horizontal_left: {
-        insetInlineStart: '0px'
-    },
-    horizontal_right: {
-        insetInlineEnd: '0px'
-    },
-    vertical_top: {
-        top: '0px'
-    },
-    vertical_horizontal_top_right: {
-        transform: `translate(${theme.direction === 'rtl' ? '-' : ''}50%, -50%)`
-    },
-    vertical_horizontal_top_left: {
-        transform: `translate(${theme.direction === 'rtl' ? '' : '-'}50%, -50%)`
-    },
-    vertical_bottom: {
-        bottom: '0px'
-    },
-    vertical_horizontal_bottom_right: {
-        transform: `translate(${theme.direction === 'rtl' ? '-' : ''}50%, 50%)`
-    },
-    vertical_horizontal_bottom_left: {
-        transform: `translate(${theme.direction === 'rtl' ? '' : '-'}50%, 50%)`
-    },
-    indicator: {
-        height: '8px',
-        width: '8px',
-        padding: '0',
-        borderRadius: `${theme.shape.radius.unit * 0.5}px`,
-    }
-}), { name: 'onesy-Badge' });
-const Badge = 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.onesyBadge) === 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 { tonal = false, color = 'primary', size = 'regular', value: value_, max, vertical = 'top', horizontal = 'right', indicator, element, Component = 'span', className, children } = props, other = __rest(props, ["tonal", "color", "size", "value", "max", "vertical", "horizontal", "indicator", "element", "Component", "className", "children"]);
-    const { classes } = useStyle();
-    const styles = {
-        badge: {}
-    };
-    let value = value_;
-    if (max !== undefined && value > max)
-        value = `${max}+`;
-    const useValue = value !== undefined || indicator || element;
-    const classesBadge = (0, style_react_1.classNames)([
-        (0, utils_1.staticClassName)('Badge', theme) && [
-            'onesy-Badge-badge'
-        ],
-        classes.badge,
-        classes[`vertical_${vertical}`],
-        classes[`horizontal_${horizontal}`],
-        classes[`vertical_horizontal_${vertical}_${horizontal}`],
-        indicator && classes.indicator
-    ]);
-    return ((0, jsx_runtime_1.jsxs)(Component, Object.assign({ ref: ref, size: size, className: (0, style_react_1.classNames)([
-            (0, utils_1.staticClassName)('Badge', theme) && [
-                'onesy-Badge-root',
-                `onesy-Badge-size-${size}`
-            ],
-            className,
-            classes.root
-        ]) }, other, { children: [children, useValue && (element ? react_1.default.cloneElement(element, {
-                className: (0, style_react_1.classNames)([
-                    classesBadge,
-                    (_a = element.props) === null || _a === void 0 ? void 0 : _a.className
-                ])
-            }) : ((0, jsx_runtime_1.jsx)(Surface, Object.assign({ tonal: tonal, color: color, Component: 'span', className: classesBadge, style: styles.badge }, { children: value }))))] })));
+
+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 = ["tonal", "color", "size", "value", "max", "vertical", "horizontal", "indicator", "element", "Component", "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: {
+    display: 'inline-flex',
+    position: 'relative'
+  },
+  badge: _objectSpread(_objectSpread({
+    position: 'absolute',
+    padding: `${theme.methods.space.value(0.25, 'px')} ${theme.methods.space.value(0.75, 'px')}`,
+    lineHeight: '1px',
+    borderRadius: theme.methods.shape.radius.value(40, 'px'),
+    transition: theme.methods.transitions.make('transform'),
+    pointerEvents: 'none',
+    userSelect: 'none'
+  }, theme.typography.values.l3), {}, {
+    fontSize: `${10 / 16}rem`
+  }),
+  // Vertical & horizontal
+  horizontal_left: {
+    insetInlineStart: '0px'
+  },
+  horizontal_right: {
+    insetInlineEnd: '0px'
+  },
+  vertical_top: {
+    top: '0px'
+  },
+  vertical_horizontal_top_right: {
+    transform: `translate(${theme.direction === 'rtl' ? '-' : ''}50%, -50%)`
+  },
+  vertical_horizontal_top_left: {
+    transform: `translate(${theme.direction === 'rtl' ? '' : '-'}50%, -50%)`
+  },
+  vertical_bottom: {
+    bottom: '0px'
+  },
+  vertical_horizontal_bottom_right: {
+    transform: `translate(${theme.direction === 'rtl' ? '-' : ''}50%, 50%)`
+  },
+  vertical_horizontal_bottom_left: {
+    transform: `translate(${theme.direction === 'rtl' ? '' : '-'}50%, 50%)`
+  },
+  indicator: {
+    height: '8px',
+    width: '8px',
+    padding: '0',
+    borderRadius: `${theme.shape.radius.unit * 0.5}px`
+  }
+}), {
+  name: 'onesy-Badge'
+});
+const Badge = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _element$props;
+  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.onesyBadge) === 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 {
+      tonal = false,
+      color = 'primary',
+      size = 'regular',
+      value: value_,
+      max,
+      vertical = 'top',
+      horizontal = 'right',
+      indicator,
+      element,
+      Component = 'span',
+      className,
+      children
+    } = props,
+    other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  const {
+    classes
+  } = useStyle();
+  const styles = {
+    badge: {}
+  };
+  let value = value_;
+  if (max !== undefined && value > max) value = `${max}+`;
+  const useValue = value !== undefined || indicator || element;
+  const classesBadge = (0, _styleReact.classNames)([(0, _utils.staticClassName)('Badge', theme) && ['onesy-Badge-badge'], classes.badge, classes[`vertical_${vertical}`], classes[`horizontal_${horizontal}`], classes[`vertical_horizontal_${vertical}_${horizontal}`], indicator && classes.indicator]);
+  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+    ref: ref,
+    size: size,
+    className: (0, _styleReact.classNames)([(0, _utils.staticClassName)('Badge', theme) && ['onesy-Badge-root', `onesy-Badge-size-${size}`], className, classes.root])
+  }, other), children, useValue && (element ? /*#__PURE__*/_react.default.cloneElement(element, {
+    className: (0, _styleReact.classNames)([classesBadge, (_element$props = element.props) === null || _element$props === void 0 ? void 0 : _element$props.className])
+  }) : /*#__PURE__*/_react.default.createElement(Surface, {
+    tonal: tonal,
+    color: color,
+    Component: "span",
+    className: classesBadge,
+    style: styles.badge
+  }, value)));
 });
 Badge.displayName = 'onesy-Badge';
-exports.default = Badge;
+var _default = exports.default = Badge;

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

package/Banner/Banner.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { IListItem } from '../ListItem/ListItem';
 import { IElement } from '../types';
-export declare type IBanner = IListItem & {
+export type IBanner = IListItem & {
     maxWidth?: string | number;
     actions?: IElement;
     start?: any;

package/Banner/Banner.js

@@ -1,89 +1,130 @@
 "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 ListItem_1 = __importDefault(require("../ListItem"));
-const Grid_1 = __importDefault(require("../Grid"));
-const Line_1 = __importDefault(require("../Line"));
-const utils_1 = require("../utils");
-const useStyle = (0, style_react_1.style)(theme => ({
-    root: {
-        width: '100%',
-        '&.onesy-ListItem-root': {
-            padding: '0px'
-        }
-    },
-    listItem: {
-        margin: '0 auto'
-    },
-    // maxWidth
-    maxWidth_xxs: { maxWidth: '320px' },
-    maxWidth_xs: { maxWidth: '400px' },
-    maxWidth_sm: { maxWidth: '600px' },
-    maxWidth_rg: { maxWidth: '960px' },
-    maxWidth_lg: { maxWidth: '1240px' },
-    maxWidth_xl: { maxWidth: '1920px' },
-    maxWidth_unset: { maxWidth: 'unset' }
-}), { name: 'onesy-Banner' });
-const Banner = 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.onesyBanner) === 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 ListItem = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.ListItem) || ListItem_1.default; }, [theme]);
-    const Grid = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Grid) || Grid_1.default; }, [theme]);
-    const { size = 'regular', maxWidth, actions, start, end, Component = 'div', style, className, children } = props, other = __rest(props, ["size", "maxWidth", "actions", "start", "end", "Component", "style", "className", "children"]);
-    const { classes } = useStyle();
-    const styles = {
-        root: {}
-    };
-    if (actions) {
-        other.line = true;
-        other.RootProps = {};
-        other.RootProps.values = {
-            md: 7
-        };
-        other.footer = ((0, jsx_runtime_1.jsx)(Grid, Object.assign({ Component: Line, RootProps: {
-                gap: 1,
-                direction: 'row'
-            }, justify: 'flex-end', align: 'flex-end', values: {
-                md: 2
-            }, offsets: {
-                md: 1
-            } }, { children: actions })));
+
+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 _ListItem = _interopRequireDefault(require("../ListItem"));
+var _Grid = _interopRequireDefault(require("../Grid"));
+var _Line = _interopRequireDefault(require("../Line"));
+var _utils = require("../utils");
+const _excluded = ["size", "maxWidth", "actions", "start", "end", "Component", "style", "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: {
+    width: '100%',
+    '&.onesy-ListItem-root': {
+      padding: '0px'
     }
-    if (!classes[`maxWidth_${maxWidth}`])
-        styles.root.maxWidth = maxWidth;
-    return ((0, jsx_runtime_1.jsxs)(Component, Object.assign({ ref: ref, role: 'alert', className: (0, style_react_1.classNames)([
-            (0, utils_1.staticClassName)('Banner', theme) && [
-                'onesy-Banner-root',
-                `onesy-Banner-size-${size}`
-            ],
-            className,
-            classes.root
-        ]), style: Object.assign(Object.assign({}, styles.root), style) }, { children: [start, (0, jsx_runtime_1.jsx)(ListItem, Object.assign({ size: size, Component: Grid, RootComponent: Grid, PrimaryProps: {
-                    version: 'b2'
-                }, className: (0, style_react_1.classNames)([
-                    (0, utils_1.staticClassName)('Banner', theme) && [
-                        'onesy-Banner-list-item'
-                    ],
-                    classes.listItem,
-                    classes[`maxWidth_${maxWidth}`]
-                ]) }, other, { children: children })), end] })));
+  },
+  listItem: {
+    margin: '0 auto'
+  },
+  // maxWidth
+  maxWidth_xxs: {
+    maxWidth: '320px'
+  },
+  maxWidth_xs: {
+    maxWidth: '400px'
+  },
+  maxWidth_sm: {
+    maxWidth: '600px'
+  },
+  maxWidth_rg: {
+    maxWidth: '960px'
+  },
+  maxWidth_lg: {
+    maxWidth: '1240px'
+  },
+  maxWidth_xl: {
+    maxWidth: '1920px'
+  },
+  maxWidth_unset: {
+    maxWidth: 'unset'
+  }
+}), {
+  name: 'onesy-Banner'
+});
+const Banner = /*#__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.onesyBanner) === 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 ListItem = _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.ListItem) || _ListItem.default;
+  }, [theme]);
+  const Grid = _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.Grid) || _Grid.default;
+  }, [theme]);
+  const {
+      size = 'regular',
+      maxWidth,
+      actions,
+      start,
+      end,
+      Component = 'div',
+      style,
+      className,
+      children
+    } = props,
+    other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  const {
+    classes
+  } = useStyle();
+  const styles = {
+    root: {}
+  };
+  if (actions) {
+    other.line = true;
+    other.RootProps = {};
+    other.RootProps.values = {
+      md: 7
+    };
+    other.footer = /*#__PURE__*/_react.default.createElement(Grid, {
+      Component: Line,
+      RootProps: {
+        gap: 1,
+        direction: 'row'
+      },
+      justify: "flex-end",
+      align: "flex-end",
+      values: {
+        md: 2
+      },
+      offsets: {
+        md: 1
+      }
+    }, actions);
+  }
+  if (!classes[`maxWidth_${maxWidth}`]) styles.root.maxWidth = maxWidth;
+  return /*#__PURE__*/_react.default.createElement(Component, {
+    ref: ref,
+    role: "alert",
+    className: (0, _styleReact.classNames)([(0, _utils.staticClassName)('Banner', theme) && ['onesy-Banner-root', `onesy-Banner-size-${size}`], className, classes.root]),
+    style: _objectSpread(_objectSpread({}, styles.root), style)
+  }, start, /*#__PURE__*/_react.default.createElement(ListItem, (0, _extends2.default)({
+    size: size,
+    Component: Grid,
+    RootComponent: Grid,
+    PrimaryProps: {
+      version: 'b2'
+    },
+    className: (0, _styleReact.classNames)([(0, _utils.staticClassName)('Banner', theme) && ['onesy-Banner-list-item'], classes.listItem, classes[`maxWidth_${maxWidth}`]])
+  }, other), children), end);
 });
 Banner.displayName = 'onesy-Banner';
-exports.default = Banner;
+var _default = exports.default = Banner;

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

package/BottomAppBar/BottomAppBar.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ISurface } from '../Surface/Surface';
-export declare type IBottomAppBar = ISurface & {
+export type IBottomAppBar = ISurface & {
     fixed?: boolean;
 };
 declare const BottomAppBar: React.FC<IBottomAppBar>;