@occmundial/occ-atomic 1.30.0 → 1.32.0

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+# [1.32.0](https://github.com/occmundial/occ-atomic/compare/v1.31.0...v1.32.0) (2023-05-26)
+
+
+### Features
+
+* Tooltip component implementation ([893cbc1](https://github.com/occmundial/occ-atomic/commit/893cbc1d0b2a83e59dd8155a762f96c0c17df90f))
+* Tooltip testing ([784337e](https://github.com/occmundial/occ-atomic/commit/784337e1fd6bc6479d1b7d152a19fae80a00973a))
+
+# [1.31.0](https://github.com/occmundial/occ-atomic/compare/v1.30.0...v1.31.0) (2023-05-24)
+
+
+### Features
+
+* Add stars icon ([f49fbd6](https://github.com/occmundial/occ-atomic/commit/f49fbd6616acef15e9b638fa40ff0e59d6adfdf6))
+
 # [1.30.0](https://github.com/occmundial/occ-atomic/compare/v1.29.1...v1.30.0) (2023-04-25)
 
 

package/build/Tooltip/Tooltip.js

@@ -0,0 +1,203 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react2 = require("@floating-ui/react");
+
+var _colors = _interopRequireDefault(require("../subatomic/colors"));
+
+var _hooks = require("./hooks");
+
+var _colorsArrow;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+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."); }
+
+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 _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 _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+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 infoLight = _colors["default"].infoLight,
+    white = _colors["default"].white,
+    grey900 = _colors["default"].grey900,
+    info = _colors["default"].info;
+var themes = {
+  DARK: 'dark',
+  LIGHT: 'light',
+  INFO: 'info',
+  PURPLE: 'purple'
+};
+var colorsArrow = (_colorsArrow = {}, _defineProperty(_colorsArrow, themes.DARK, grey900), _defineProperty(_colorsArrow, themes.LIGHT, white), _defineProperty(_colorsArrow, themes.INFO, infoLight), _defineProperty(_colorsArrow, themes.PURPLE, info), _colorsArrow);
+/** Tooltip component to display messages within a container. */
+
+function Tooltip(_ref) {
+  var classes = _ref.classes,
+      openProp = _ref.open,
+      children = _ref.children,
+      text = _ref.text,
+      theme = _ref.theme,
+      _ref$openOnHover = _ref.openOnHover,
+      openOnHover = _ref$openOnHover === void 0 ? false : _ref$openOnHover,
+      _ref$closeDelay = _ref.closeDelay,
+      closeDelay = _ref$closeDelay === void 0 ? 4000 : _ref$closeDelay,
+      _ref$zIndex = _ref.zIndex,
+      zIndex = _ref$zIndex === void 0 ? 10 : _ref$zIndex,
+      _ref$placement = _ref.placement,
+      placement = _ref$placement === void 0 ? 'top' : _ref$placement,
+      _ref$showArrow = _ref.showArrow,
+      showArrow = _ref$showArrow === void 0 ? true : _ref$showArrow,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? {} : _ref$className,
+      _ref$fit = _ref.fit,
+      fit = _ref$fit === void 0 ? false : _ref$fit,
+      _ref$width = _ref.width,
+      width = _ref$width === void 0 ? 220 : _ref$width,
+      onChange = _ref.onChange;
+  var arrowRef = (0, _react.useRef)(null);
+
+  var _useOpenTooltipState = (0, _hooks.useOpenTooltipState)(openProp, onChange, closeDelay),
+      _useOpenTooltipState2 = _slicedToArray(_useOpenTooltipState, 2),
+      open = _useOpenTooltipState2[0],
+      setOpen = _useOpenTooltipState2[1];
+
+  var getMiddlewares = (0, _react.useMemo)(function () {
+    var middlewares = [(0, _react2.offset)(16)];
+    showArrow && middlewares.push((0, _react2.arrow)({
+      element: arrowRef,
+      padding: 16
+    }));
+    var sizeMiddleware = (0, _react2.size)({
+      apply: function apply(_ref2) {
+        var elements = _ref2.elements,
+            rects = _ref2.rects,
+            availableWidth = _ref2.availableWidth;
+        var styles = {};
+
+        if (fit) {
+          styles.width = "".concat(rects.reference.width, "px");
+        } else {
+          styles.maxWidth = "".concat(availableWidth, "px");
+          if (width) styles.width = typeof width === 'string' ? width : "".concat(width, "px");else styles.width = '';
+        }
+
+        Object.assign(elements.floating.style, styles);
+      }
+    });
+    sizeMiddleware.name = "size-".concat(fit, "-").concat(width);
+    middlewares.push(sizeMiddleware);
+    return middlewares;
+  }, [showArrow, fit, width]);
+
+  var _useFloating = (0, _react2.useFloating)({
+    open: open,
+    onOpenChange: setOpen,
+    placement: placement,
+    whileElementsMounted: _react2.autoUpdate,
+    middleware: getMiddlewares
+  }),
+      refs = _useFloating.refs,
+      floatingStyles = _useFloating.floatingStyles,
+      context = _useFloating.context;
+
+  var hover = (0, _react2.useHover)(context, {
+    enabled: openOnHover
+  });
+  var role = (0, _react2.useRole)(context, {
+    role: 'tooltip'
+  });
+
+  var _useInteractions = (0, _react2.useInteractions)([hover, role]),
+      getReferenceProps = _useInteractions.getReferenceProps,
+      getFloatingProps = _useInteractions.getFloatingProps;
+
+  return /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, /*#__PURE__*/_react["default"].createElement("div", _extends({
+    ref: refs.setReference
+  }, getReferenceProps(), {
+    className: "".concat(classes.activator, " ").concat(className.hasOwnProperty('activator') && className.activator)
+  }), children), /*#__PURE__*/_react["default"].createElement(_react2.FloatingPortal, null, open && /*#__PURE__*/_react["default"].createElement("div", _extends({
+    className: "".concat(classes.tooltip, " ").concat(className.hasOwnProperty('tooltip') && className.tooltip, " ").concat(classes[theme] || classes.purple),
+    ref: refs.setFloating,
+    style: _objectSpread(_objectSpread({}, floatingStyles), {}, {
+      zIndex: zIndex
+    })
+  }, getFloatingProps()), text, showArrow && /*#__PURE__*/_react["default"].createElement(_react2.FloatingArrow, {
+    ref: arrowRef,
+    context: context,
+    fill: colorsArrow[theme] || colorsArrow[themes.PURPLE],
+    width: 14,
+    height: 10
+  }))));
+}
+
+Tooltip.propTypes = {
+  classes: _propTypes["default"].object,
+
+  /** It accepts any type of the followings boolean,null,undefined,ReactFragment,ReactPortal,ReactChild. */
+  children: _propTypes["default"].node,
+
+  /** This property can be used to set the theme of the component. The possible values for the theme property are info, light, dark, and purple. */
+  theme: _propTypes["default"].oneOf(['light', 'dark', 'purple', 'info']),
+
+  /** This property can be used to control whether or not the component is displayed. */
+  open: _propTypes["default"].bool,
+
+  /** This property can be used to set the text that is displayed by the component. */
+  text: _propTypes["default"].string.isRequired,
+
+  /** Designates whether the tooltip should open on activator hover. */
+  openOnHover: _propTypes["default"].bool,
+
+  /** Time on millisecond that it will take to close the tooltip. */
+  closeDelay: _propTypes["default"].number,
+
+  /** Sets the Tooltip stack order. */
+  zIndex: _propTypes["default"].number,
+
+  /** Allows to specify the placement of Tooltip. Available options are top, top-start, top-end, bottom, bottom-start, bottom-end, left, right. */
+  placement: _propTypes["default"].string,
+
+  /** Allows to specify classes to activador and tooltip. Object has the next properties: activator(string), tooltip(string). */
+  className: _propTypes["default"].object,
+
+  /** This property can be used to control whether or not an arrow is displayed. */
+  showArrow: _propTypes["default"].bool,
+
+  /** This property allows the Tooltip to be adjusted to the length of the associated component. */
+  fit: _propTypes["default"].bool,
+
+  /** The "Width" property of the Tooltip enables modification of its width and accepts a number (e.g., 220), a string (e.g., '220px' or 'auto') or null as its value. */
+  width: _propTypes["default"].number,
+
+  /** Callback fired when the Tooltip show state changes. */
+  onChange: _propTypes["default"].func
+};
+var _default = Tooltip;
+exports["default"] = _default;

package/build/Tooltip/Tooltip.test.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _enzyme = require("enzyme");
+
+var _Tooltip = _interopRequireDefault(require("./Tooltip"));
+
+var _styles = _interopRequireDefault(require("./styles"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": 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 reduceClasses = function reduceClasses(prev, curr) {
+  return Object.assign({}, prev, _defineProperty({}, curr, curr));
+};
+
+var classes = Object.keys(_styles["default"]).reduce(reduceClasses, {});
+describe('Tooltip', function () {
+  it('matches the snapshot', function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+      text: "test",
+      open: true,
+      theme: "dark",
+      classes: classes
+    }));
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+});
+describe('Tooltip styles', function () {
+  it('matches the snapshot', function () {
+    expect(_styles["default"]).toMatchSnapshot();
+  });
+});

package/build/Tooltip/hooks.js

@@ -0,0 +1,132 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useOpenTooltipState = useOpenTooltipState;
+exports.useThrottle = useThrottle;
+
+var _react = require("react");
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+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."); }
+
+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 _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 _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function useOpenTooltipState(openExternal, setOpenExternal, closeDelay) {
+  var delay = useThrottle({
+    trailing: true,
+    leading: false
+  });
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      openInternal = _useState2[0],
+      setOpenInternal = _useState2[1];
+
+  var open = (0, _react.useMemo)(function () {
+    return openExternal !== null && openExternal !== void 0 ? openExternal : openInternal;
+  }, [openExternal, openInternal]);
+  var setOpenSource = (0, _react.useMemo)(function () {
+    return openExternal !== undefined ? setOpenExternal !== null && setOpenExternal !== void 0 ? setOpenExternal : function () {} : setOpenInternal;
+  }, [openExternal, setOpenExternal, setOpenInternal]);
+  var setOpenSourceDelay = (0, _react.useMemo)(function () {
+    return function (show) {
+      return delay({
+        throttleTime: closeDelay,
+        callback: function callback() {
+          return setOpenSource(show);
+        }
+      });
+    };
+  }, [closeDelay, setOpenSource, delay]);
+
+  function setOpen(open) {
+    if (open) {
+      delay.cancel();
+      setOpenSource(true);
+    } else {
+      closeDelay > 0 ? setOpenSourceDelay(false) : setOpenSource(false);
+    }
+  }
+
+  (0, _react.useEffect)(function () {
+    if (openExternal === false || closeDelay <= 0) return;
+    delay.cancel();
+    setOpenSourceDelay(false);
+  }, [openExternal, setOpenSourceDelay, setOpenSource, delay, closeDelay]);
+  return [open, setOpen];
+}
+
+function useThrottle() {
+  var defaults = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var timeout = (0, _react.useRef)(null);
+  var lastCallback = (0, _react.useRef)(null);
+  var date = (0, _react.useRef)(null);
+
+  function throttle(_ref) {
+    var _ref4;
+
+    var callback = _ref.callback,
+        throttleTime = _ref.throttleTime,
+        leading = _ref.leading,
+        trailing = _ref.trailing;
+
+    if (timeout.current) {
+      var _ref2;
+
+      return lastCallback.current = (_ref2 = callback !== null && callback !== void 0 ? callback : defaults.callback) !== null && _ref2 !== void 0 ? _ref2 : null;
+    } else {
+      var _ref3, _defaults$leading;
+
+      date.current = new Date();
+
+      if ((_ref3 = (_defaults$leading = defaults === null || defaults === void 0 ? void 0 : defaults.leading) !== null && _defaults$leading !== void 0 ? _defaults$leading : leading) !== null && _ref3 !== void 0 ? _ref3 : true) {
+        callback();
+      } else {
+        lastCallback.current = callback;
+      }
+    }
+
+    timeout.current = window.setTimeout(function () {
+      var _defaults$trailing;
+
+      ((_defaults$trailing = defaults === null || defaults === void 0 ? void 0 : defaults.trailing) !== null && _defaults$trailing !== void 0 ? _defaults$trailing : trailing) ? flush() : cancel();
+    }, (_ref4 = throttleTime !== null && throttleTime !== void 0 ? throttleTime : defaults.throttleTime) !== null && _ref4 !== void 0 ? _ref4 : 1000);
+  }
+
+  function flush() {
+    if (!lastCallback.current) return;
+    lastCallback.current();
+    lastCallback.current = null;
+    date.current = null;
+    cancel();
+  }
+
+  function cancel() {
+    if (!timeout.current) return;
+    window.clearTimeout(timeout.current);
+    timeout.current = null;
+    date.current = null;
+  }
+
+  (0, _react.useEffect)(function () {
+    return cancel;
+  }, []);
+  throttle.flush = flush;
+  throttle.cancel = cancel;
+  throttle.date = date;
+
+  throttle.isActive = function () {
+    return !!date.current;
+  };
+
+  return throttle;
+}

package/build/Tooltip/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _reactJss = _interopRequireDefault(require("react-jss"));
+
+var _Tooltip = _interopRequireDefault(require("./Tooltip"));
+
+var _styles = _interopRequireDefault(require("./styles"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = (0, _reactJss["default"])(_styles["default"])(_Tooltip["default"]);
+
+exports["default"] = _default;

package/build/Tooltip/styles.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _colors = _interopRequireDefault(require("../subatomic/colors"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var infoLight = _colors["default"].infoLight,
+    infoText = _colors["default"].infoText,
+    info = _colors["default"].info,
+    white = _colors["default"].white,
+    grey900 = _colors["default"].grey900;
+var _default = {
+  activator: {
+    display: 'inline-block'
+  },
+  tooltip: {
+    padding: '16px',
+    borderRadius: '4px',
+    fontSize: '13px',
+    lineHeight: '16px'
+  },
+  info: {
+    background: infoLight,
+    color: infoText
+  },
+  dark: {
+    background: grey900,
+    color: white
+  },
+  light: {
+    background: white,
+    color: info
+  },
+  purple: {
+    background: info,
+    color: white
+  }
+};
+exports["default"] = _default;

package/build/index.js

@@ -32,6 +32,8 @@ var _ButtonAlign = _interopRequireDefault(require("./ButtonAlign"));
 
 var _TourTip = _interopRequireDefault(require("./TourTip"));
 
+var _Tooltip = _interopRequireDefault(require("./Tooltip"));
+
 var _RangeCounter = _interopRequireDefault(require("./RangeCounter"));
 
 var _OrderBy = _interopRequireDefault(require("./OrderBy"));
@@ -141,6 +143,7 @@ module.exports = {
   Checkbox: _Checkbox["default"],
   ButtonAlign: _ButtonAlign["default"],
   TourTip: _TourTip["default"],
+  Tooltip: _Tooltip["default"],
   RangeCounter: _RangeCounter["default"],
   OrderBy: _OrderBy["default"],
   Radio: _Radio["default"],

package/build/subatomic/icons/starsSolid.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _colors = _interopRequireDefault(require("../colors"));
+
+var _spacing = _interopRequireDefault(require("../spacing"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = {
+  width: _spacing["default"].base,
+  height: _spacing["default"].base,
+  display: 'inline-block',
+  icon: function icon() {
+    var color = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [_colors["default"].grey900];
+    return "<svg viewBox=\"0 0 24 24\" fill=\"".concat(color[0], "\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M11.4858 9.3706C11.6506 8.87646 12.3495 8.87647 12.5142 9.3706L13.4824 12.2752C13.914 13.57 14.93 14.586 16.2247 15.0176L19.1294 15.9858C19.6235 16.1505 19.6235 16.8494 19.1294 17.0142L16.2247 17.9824C14.93 18.414 13.914 19.43 13.4824 20.7247L12.5142 23.6294C12.3495 24.1235 11.6506 24.1235 11.4858 23.6294L10.5176 20.7247C10.086 19.4299 9.07003 18.414 7.77529 17.9824L4.8706 17.0142C4.37647 16.8494 4.37647 16.1505 4.8706 15.9858L7.7753 15.0176C9.07003 14.586 10.086 13.57 10.5176 12.2753L11.4858 9.3706Z\" fill=\"").concat(color[0], "\"/>\n            <path d=\"M5.69151 1.72236C5.79034 1.42588 6.20971 1.42588 6.30853 1.72236L6.88946 3.46515C7.14841 4.242 7.758 4.8516 8.53485 5.11055L10.2777 5.69148C10.5741 5.79031 10.5741 6.20968 10.2777 6.3085L8.53485 6.88944C7.758 7.14839 7.14841 7.75799 6.88946 8.53484L6.30853 10.2776C6.20971 10.5741 5.79034 10.5741 5.69151 10.2776L5.11056 8.53482C4.85161 7.75798 4.24202 7.14839 3.46518 6.88944L1.72236 6.3085C1.42588 6.20968 1.42588 5.79031 1.72236 5.69148L3.46518 5.11054C4.24202 4.8516 4.85161 4.24201 5.11057 3.46517L5.69151 1.72236Z\" fill=\"").concat(color[0], "\"/>\n            <path d=\"M16.2943 0.14824C16.3602 -0.0494144 16.6398 -0.0494128 16.7057 0.148242L17.093 1.3101C17.2656 1.828 17.672 2.2344 18.1899 2.40703L19.3518 2.79432C19.5494 2.86021 19.5494 3.13978 19.3518 3.20567L18.1899 3.59296C17.672 3.76559 17.2656 4.17199 17.093 4.68989L16.7057 5.85176C16.6398 6.04941 16.3602 6.04941 16.2943 5.85176L15.907 4.68988C15.7344 4.17198 15.328 3.76559 14.8101 3.59296L13.6483 3.20567C13.4506 3.13978 13.4506 2.86021 13.6483 2.79432L14.8101 2.40703C15.328 2.2344 15.7344 1.82801 15.9071 1.31011L16.2943 0.14824Z\" fill=\"").concat(color[0], "\"/>\n        </svg>");
+  }
+};
+exports["default"] = _default;

package/build/subatomic/icons.js

@@ -243,6 +243,8 @@ var _energy = _interopRequireDefault(require("./icons/energy"));
 
 var _energySolid = _interopRequireDefault(require("./icons/energySolid"));
 
+var _starsSolid = _interopRequireDefault(require("./icons/starsSolid"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var _default = {
@@ -621,6 +623,7 @@ var _default = {
   refresh: _refresh["default"],
   refreshSolid: _refreshSolid["default"],
   energy: _energy["default"],
-  energySolid: _energySolid["default"]
+  energySolid: _energySolid["default"],
+  starsSolid: _starsSolid["default"]
 };
 exports["default"] = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@occmundial/occ-atomic",
-  "version": "1.30.0",
+  "version": "1.32.0",
   "description": "Collection of shareable styled React components for OCC applications.",
   "homepage": "http://occmundial.github.io/occ-atomic",
   "main": "build/index.js",
@@ -96,6 +96,7 @@
     "webpack-dev-server": "^4.2.0"
   },
   "dependencies": {
+    "@floating-ui/react": "^0.24.1",
     "class-autobind": "^0.1.4",
     "hex-rgba": "^1.0.2",
     "idx": "^2.5.6",