@bolio-ui/core 1.0.0

package/dist/use-tabs/index.js

@@ -0,0 +1,112 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+
+function _slicedToArray(arr, i) {
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
+
+function _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
+}
+
+function _iterableToArrayLimit(arr, i) {
+  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+
+  if (_i == null) return;
+  var _arr = [];
+  var _n = true;
+  var _d = false;
+
+  var _s, _e;
+
+  try {
+    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
+      _arr.push(_s.value);
+
+      if (i && _arr.length === i) break;
+    }
+  } catch (err) {
+    _d = true;
+    _e = err;
+  } finally {
+    try {
+      if (!_n && _i["return"] != null) _i["return"]();
+    } finally {
+      if (_d) throw _e;
+    }
+  }
+
+  return _arr;
+}
+
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+
+  return arr2;
+}
+
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+var useCurrentState = function useCurrentState(initialState) {
+  var _useState = react.useState(function () {
+    return typeof initialState === 'function' ? initialState() : initialState;
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      state = _useState2[0],
+      setState = _useState2[1];
+
+  var ref = react.useRef(initialState);
+  react.useEffect(function () {
+    ref.current = state;
+  }, [state]);
+
+  var setValue = function setValue(val) {
+    var result = typeof val === 'function' ? val(ref.current) : val;
+    ref.current = result;
+    setState(result);
+  };
+
+  return [state, setValue, ref];
+};
+
+var useCurrentState$1 = useCurrentState;
+
+var useTabs = function useTabs(initialValue) {
+  var _useCurrentState = useCurrentState$1(initialValue),
+      _useCurrentState2 = _slicedToArray(_useCurrentState, 3),
+      state = _useCurrentState2[0],
+      setState = _useCurrentState2[1],
+      currentRef = _useCurrentState2[2];
+
+  return {
+    state: state,
+    setState: setState,
+    currentRef: currentRef,
+    bindings: {
+      value: state,
+      onChange: function onChange(val) {
+        setState(val);
+      }
+    }
+  };
+};
+
+var useTabs$1 = useTabs;
+
+exports["default"] = useTabs$1;

package/dist/use-theme/index.js

@@ -0,0 +1,333 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    enumerableOnly && (symbols = symbols.filter(function (sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    })), keys.push.apply(keys, symbols);
+  }
+
+  return keys;
+}
+
+function _objectSpread2(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = null != arguments[i] ? arguments[i] : {};
+    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
+      _defineProperty(target, key, source[key]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
+      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+  }
+
+  return target;
+}
+
+function _typeof(obj) {
+  "@babel/helpers - typeof";
+
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+    return typeof obj;
+  } : function (obj) {
+    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+  }, _typeof(obj);
+}
+
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
+
+var defaultFont = {
+  sans: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
+  mono: 'Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace',
+  prism: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,"Liberation Mono", "Courier New", monospace'
+};
+var defaultBreakpoints = {
+  xs: {
+    min: '0',
+    max: '650px'
+  },
+  sm: {
+    min: '650px',
+    max: '900px'
+  },
+  md: {
+    min: '900px',
+    max: '1280px'
+  },
+  lg: {
+    min: '1280px',
+    max: '1920px'
+  },
+  xl: {
+    min: '1920px',
+    max: '10000px'
+  }
+};
+var defaultLayout = {
+  gap: '16pt',
+  gapNegative: '-16pt',
+  gapHalf: '8pt',
+  gapHalfNegative: '-8pt',
+  gapQuarter: '4pt',
+  gapQuarterNegative: '-4pt',
+  pageMargin: '16pt',
+  pageWidth: '900pt',
+  pageWidthWithMargin: '930pt',
+  breakpointMobile: defaultBreakpoints.xs.max,
+  breakpointTablet: defaultBreakpoints.sm.max,
+  radius: '6px',
+  unit: '16px'
+};
+
+var palette$1 = {
+  background: '#fff',
+  foreground: '#000',
+  accents_1: '#fafafa',
+  accents_2: '#eaeaea',
+  accents_3: '#999',
+  accents_4: '#888',
+  accents_5: '#666',
+  accents_6: '#444',
+  accents_7: '#333',
+  accents_8: '#111',
+  selection: '#cee4fe',
+  code: '#C25FFF',
+  border: '#eaeaea',
+  primary: '#0072F6',
+  primaryLight: '#96C1F3',
+  primaryLighter: '#CEE4FF',
+  primaryDark: '#00254E',
+  secondary: '#7828C9',
+  secondaryLighter: '#D1B1F1',
+  secondaryLight: '#EADCF9',
+  secondaryDark: '#290E45',
+  error: '#F31261',
+  errorLight: '#FAA8C6',
+  errorLighter: '#FDD8E6',
+  errorDark: '#4E041F',
+  success: '#17C965',
+  successLight: '#ADF5CD',
+  successLighter: '#DAFBE9',
+  successDark: '#06371C',
+  warning: '#F5A525',
+  warningLight: '#FBDBA8',
+  warningLighter: '#FDEFD9',
+  warningDark: '#4E3105',
+  info: '#06B7DC',
+  infoLighter: '#A5EEFE',
+  infoLight: '#D7F8FF',
+  infoDark: '#053B49',
+  purple: '#f81ce5',
+  alert: '#ff0080',
+  link: '#0070f3',
+  pre: '#363450'
+};
+var expressiveness$1 = {
+  linkStyle: 'none',
+  linkHoverStyle: 'none',
+  dropdownBoxShadow: '0 4px 4px 0 rgba(0, 0, 0, 0.02)',
+  scrollerStart: 'rgba(255, 255, 255, 1)',
+  scrollerEnd: 'rgba(255, 255, 255, 0)',
+  shadowSmall: '0 5px 10px rgba(0, 0, 0, 0.12)',
+  shadowMedium: '0 8px 30px rgba(0, 0, 0, 0.12)',
+  shadowLarge: '0 30px 60px rgba(0, 0, 0, 0.12)',
+  portalOpacity: 0.25
+};
+var font$1 = defaultFont;
+var breakpoints$1 = defaultBreakpoints;
+var layout$1 = defaultLayout;
+var themes$1 = {
+  type: 'light',
+  font: font$1,
+  layout: layout$1,
+  palette: palette$1,
+  breakpoints: breakpoints$1,
+  expressiveness: expressiveness$1
+};
+var lightTheme = themes$1;
+
+var palette = {
+  background: '#000',
+  foreground: '#fff',
+  accents_1: '#111',
+  accents_2: '#333',
+  accents_3: '#444',
+  accents_4: '#666',
+  accents_5: '#888',
+  accents_6: '#999',
+  accents_7: '#eaeaea',
+  accents_8: '#fafafa',
+  selection: '#f81ce5',
+  code: '#C25FFF',
+  border: '#333',
+  primary: '#0072F6',
+  primaryLight: '#96C1F3',
+  primaryLighter: '#CEE4FF',
+  primaryDark: '#00254E',
+  secondary: '#7828C9',
+  secondaryLighter: '#D1B1F1',
+  secondaryLight: '#EADCF9',
+  secondaryDark: '#290E45',
+  error: '#F31261',
+  errorLight: '#FAA8C6',
+  errorLighter: '#FDD8E6',
+  errorDark: '#4E041F',
+  success: '#17C965',
+  successLight: '#ADF5CD',
+  successLighter: '#DAFBE9',
+  successDark: '#06371C',
+  warning: '#F5A525',
+  warningLight: '#FBDBA8',
+  warningLighter: '#FDEFD9',
+  warningDark: '#4E3105',
+  info: '#06B7DC',
+  infoLighter: '#A5EEFE',
+  infoLight: '#D7F8FF',
+  infoDark: '#053B49',
+  purple: '#f81ce5',
+  alert: '#ff0080',
+  link: '#3291ff',
+  pre: '#363450'
+};
+var expressiveness = {
+  linkStyle: 'none',
+  linkHoverStyle: 'none',
+  dropdownBoxShadow: '0 0 0 1px #333',
+  scrollerStart: 'rgba(255, 255, 255, 1)',
+  scrollerEnd: 'rgba(255, 255, 255, 0)',
+  shadowSmall: '0 0 0 1px #333',
+  shadowMedium: '0 0 0 1px #333',
+  shadowLarge: '0 0 0 1px #333',
+  portalOpacity: 0.75
+};
+var font = defaultFont;
+var breakpoints = defaultBreakpoints;
+var layout = defaultLayout;
+var themes = {
+  type: 'dark',
+  font: font,
+  layout: layout,
+  palette: palette,
+  breakpoints: breakpoints,
+  expressiveness: expressiveness
+};
+var darkTheme = themes;
+
+var isObject = function isObject(target) {
+  return target && _typeof(target) === 'object';
+};
+var deepDuplicable = function deepDuplicable(source, target) {
+  if (!isObject(target) || !isObject(source)) return source;
+  var sourceKeys = Object.keys(source);
+  var result = {};
+
+  for (var _i = 0, _sourceKeys = sourceKeys; _i < _sourceKeys.length; _i++) {
+    var key = _sourceKeys[_i];
+    var sourceValue = source[key];
+    var targetValue = target[key];
+
+    if (Array.isArray(sourceValue) && Array.isArray(targetValue)) {
+      result[key] = targetValue.concat(sourceValue);
+    } else if (isObject(sourceValue) && isObject(targetValue)) {
+      result[key] = deepDuplicable(sourceValue, _objectSpread2({}, targetValue));
+    } else if (targetValue) {
+      result[key] = targetValue;
+    } else {
+      result[key] = sourceValue;
+    }
+  }
+
+  return result;
+};
+
+var getPresets = function getPresets() {
+  return [lightTheme, darkTheme];
+};
+
+var getPresetStaticTheme = function getPresetStaticTheme() {
+  return lightTheme;
+};
+
+var isAvailableThemeType = function isAvailableThemeType(type) {
+  if (!type) return false;
+  var presetThemes = getPresets();
+  var hasType = presetThemes.find(function (theme) {
+    return theme.type === type;
+  });
+  return !hasType;
+};
+
+var isPresetTheme = function isPresetTheme(themeOrType) {
+  if (!themeOrType) return false;
+  var isType = typeof themeOrType === 'string';
+  var type = isType ? themeOrType : themeOrType.type;
+  return !isAvailableThemeType(type);
+};
+
+var hasUserCustomTheme = function hasUserCustomTheme() {
+  var themes = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  return !!themes.find(function (item) {
+    return isAvailableThemeType(item.type);
+  });
+};
+
+var create = function create(base, custom) {
+  if (!isAvailableThemeType(custom.type)) {
+    throw new Error('Duplicate or unavailable theme type');
+  }
+
+  return deepDuplicable(base, custom);
+};
+
+var createFromDark = function createFromDark(custom) {
+  return create(darkTheme, custom);
+};
+
+var createFromLight = function createFromLight(custom) {
+  return create(lightTheme, custom);
+};
+
+var Themes = {
+  isPresetTheme: isPresetTheme,
+  isAvailableThemeType: isAvailableThemeType,
+  hasUserCustomTheme: hasUserCustomTheme,
+  getPresets: getPresets,
+  getPresetStaticTheme: getPresetStaticTheme,
+  create: create,
+  createFromDark: createFromDark,
+  createFromLight: createFromLight
+};
+var Themes$1 = Themes;
+
+var defaultTheme = Themes$1.getPresetStaticTheme();
+var ThemeContext = /*#__PURE__*/React__default["default"].createContext(defaultTheme);
+var useTheme$1 = function useTheme() {
+  return React__default["default"].useContext(ThemeContext);
+};
+
+var useTheme = useTheme$1;
+
+exports["default"] = useTheme;

package/dist/use-toasts/index.js

@@ -0,0 +1,236 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    enumerableOnly && (symbols = symbols.filter(function (sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    })), keys.push.apply(keys, symbols);
+  }
+
+  return keys;
+}
+
+function _objectSpread2(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = null != arguments[i] ? arguments[i] : {};
+    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
+      _defineProperty(target, key, source[key]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
+      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+  }
+
+  return target;
+}
+
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
+
+function _toConsumableArray(arr) {
+  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
+}
+
+function _arrayWithoutHoles(arr) {
+  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
+}
+
+function _iterableToArray(iter) {
+  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
+
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+
+  return arr2;
+}
+
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+var defaultToastLayout = {
+  padding: '12px 16px',
+  margin: '8px 0',
+  width: '420px',
+  maxWidth: '90vw',
+  maxHeight: '75px',
+  placement: 'bottomRight'
+};
+var defaultParams = {
+  toasts: [],
+  toastLayout: defaultToastLayout,
+  updateToastLayout: function updateToastLayout(t) {
+    return t;
+  },
+  updateToasts: function updateToasts(t) {
+    return t;
+  },
+  lastUpdateToastId: null,
+  updateLastToastId: function updateLastToastId() {
+    return null;
+  }
+};
+var BolioUIContent = /*#__PURE__*/React__default["default"].createContext(defaultParams);
+var useBolioUIContext = function useBolioUIContext() {
+  return React__default["default"].useContext(BolioUIContent);
+};
+
+var getId = function getId() {
+  return Math.random().toString(32).slice(2, 10);
+};
+
+var defaultToast = {
+  delay: 2000,
+  type: 'default'
+};
+
+var useToasts = function useToasts(layout) {
+  var _useBolioUIContext = useBolioUIContext(),
+      updateToasts = _useBolioUIContext.updateToasts,
+      toasts = _useBolioUIContext.toasts,
+      updateToastLayout = _useBolioUIContext.updateToastLayout,
+      updateLastToastId = _useBolioUIContext.updateLastToastId;
+
+  React.useEffect(function () {
+    if (!layout) return;
+    updateToastLayout(function () {
+      return layout ? _objectSpread2(_objectSpread2({}, defaultToastLayout), layout) : defaultToastLayout;
+    });
+  }, []);
+
+  var cancel = function cancel(internalId) {
+    updateToasts(function (currentToasts) {
+      return currentToasts.map(function (item) {
+        if (item._internalIdent !== internalId) return item;
+        return _objectSpread2(_objectSpread2({}, item), {}, {
+          visible: false
+        });
+      });
+    });
+    updateLastToastId(function () {
+      return internalId;
+    });
+  };
+
+  var removeAll = function removeAll() {
+    updateToasts(function (last) {
+      return last.map(function (toast) {
+        return _objectSpread2(_objectSpread2({}, toast), {}, {
+          visible: false
+        });
+      });
+    });
+  };
+
+  var findToastOneByID = function findToastOneByID(id) {
+    return toasts.find(function (t) {
+      return t.id === id;
+    });
+  };
+
+  var removeToastOneByID = function removeToastOneByID(id) {
+    updateToasts(function (last) {
+      return last.map(function (toast) {
+        if (toast.id !== id) return toast;
+        return _objectSpread2(_objectSpread2({}, toast), {}, {
+          visible: false
+        });
+      });
+    });
+  };
+
+  var setToast = function setToast(toast) {
+    var internalIdent = "toast-".concat(getId());
+    var delay = toast.delay || defaultToast.delay;
+
+    if (toast.id) {
+      var hasIdent = toasts.find(function (t) {
+        return t.id === toast.id;
+      });
+
+      if (hasIdent) {
+        throw new Error('Toast: Already have the same key: "ident"');
+      }
+    }
+
+    updateToasts(function (last) {
+      var newToast = {
+        delay: delay,
+        text: toast.text,
+        visible: true,
+        type: toast.type || defaultToast.type,
+        id: toast.id || internalIdent,
+        actions: toast.actions || [],
+        _internalIdent: internalIdent,
+        _timeout: window.setTimeout(function () {
+          cancel(internalIdent);
+
+          if (newToast._timeout) {
+            window.clearTimeout(newToast._timeout);
+            newToast._timeout = null;
+          }
+        }, delay),
+        cancel: function (_cancel) {
+          function cancel() {
+            return _cancel.apply(this, arguments);
+          }
+
+          cancel.toString = function () {
+            return _cancel.toString();
+          };
+
+          return cancel;
+        }(function () {
+          return cancel(internalIdent);
+        })
+      };
+      return [].concat(_toConsumableArray(last), [newToast]);
+    });
+  };
+
+  return {
+    toasts: toasts,
+    setToast: setToast,
+    removeAll: removeAll,
+    findToastOneByID: findToastOneByID,
+    removeToastOneByID: removeToastOneByID
+  };
+};
+
+var useToasts$1 = useToasts;
+
+exports["default"] = useToasts$1;

package/esm/avatar/avatar-group.js

@@ -0,0 +1,29 @@
+import _JSXStyle from "../styled-jsx.es.js";
+import React from 'react';
+import useTheme from '../use-theme';
+import useScale, { withScale } from '../use-scale';
+import useClasses from '../use-classes';
+
+function AvatarGroupComponent(_ref) {
+  var count = _ref.count,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      children = _ref.children;
+  var theme = useTheme();
+
+  var _useScale = useScale(),
+      SCALES = _useScale.SCALES;
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["441769479", [SCALES.width(1, 'max-content'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.ml(0.625), SCALES.font(0.875), theme.palette.accents_7]]]) + " " + (useClasses('avatar-group', className) || "")
+  }, children, count && /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["441769479", [SCALES.width(1, 'max-content'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.ml(0.625), SCALES.font(0.875), theme.palette.accents_7]]]) + " " + "count"
+  }, "+", count), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "441769479",
+    dynamic: [SCALES.width(1, 'max-content'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.ml(0.625), SCALES.font(0.875), theme.palette.accents_7]
+  }, ".avatar-group.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:".concat(SCALES.width(1, 'max-content'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.avatar-group.__jsx-style-dynamic-selector .avatar{margin-left:-").concat(SCALES.ml(0.625), ";}.count.__jsx-style-dynamic-selector{font-size:").concat(SCALES.font(0.875), ";display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding-left:5.5px;color:").concat(theme.palette.accents_7, ";}")));
+}
+
+AvatarGroupComponent.displayName = 'BolioUIAvatarGroup';
+var AvatarGroup = withScale(AvatarGroupComponent);
+export default AvatarGroup;