@pareto-engineering/design-system 2.0.0-alpha.8 → 3.0.0-alpha.18

package/dist/cjs/a/LoadingCircle/LoadingCircle.js

@@ -4,32 +4,25 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var React = _interopRequireWildcard(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _bem = _interopRequireDefault(require("@pareto-engineering/bem"));
-
+var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-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 _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 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 _objectSpread(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) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 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; }
-
 // Local Definitions
-var baseClassName = _bem.default.base;
+
+var baseClassName = _exports.default.base;
 var componentClassName = 'loading-circle';
+
 /**
  * This is the component description.
  */
-
 var LoadingCircle = _ref => {
   var {
     id,
@@ -38,8 +31,8 @@ var LoadingCircle = _ref => {
     strokeLinecap,
     strokeWidth,
     animationDuration,
-    style // ...otherProps
-
+    style
+    // ...otherProps
   } = _ref;
   (0, React.useLayoutEffect)(() => {
     Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
@@ -50,8 +43,8 @@ var LoadingCircle = _ref => {
     style: _objectSpread({
       '--height-width': heightWidth,
       '--stroke-width': strokeWidth
-    }, style) // {...otherProps}
-
+    }, style)
+    // {...otherProps}
   }, /*#__PURE__*/React.createElement("svg", {
     viewBox: "25 25 50 50",
     className: "svg-circle",
@@ -75,38 +68,31 @@ var LoadingCircle = _ref => {
     strokeMiterlimit: "10"
   })));
 };
-
 LoadingCircle.propTypes = {
   /**
    * The HTML id for this element
    */
   id: _propTypes.default.string,
-
   /**
    * The HTML class names for this element
    */
   className: _propTypes.default.string,
-
   /**
    * The height width of the loading div/circle
    */
   heightWidth: _propTypes.default.string,
-
   /**
    * The SVG property stroke-linecap
    */
   strokeLinecap: _propTypes.default.oneOf(['round', 'square', 'butt']),
-
   /**
    * The SVG property stroke-width
    */
   strokeWidth: _propTypes.default.string,
-
   /**
    * The duration of the animation in seconds
    */
   animationDuration: _propTypes.default.number,
-
   /**
    * The React-written, css properties for this element.
    */

package/dist/cjs/a/LoadingCircle/index.js

@@ -9,7 +9,5 @@ Object.defineProperty(exports, "LoadingCircle", {
     return _LoadingCircle.default;
   }
 });
-
 var _LoadingCircle = _interopRequireDefault(require("./LoadingCircle"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/cjs/a/People/People.js

@@ -4,33 +4,24 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var React = _interopRequireWildcard(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _bem = _interopRequireDefault(require("@pareto-engineering/bem"));
-
+var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
 var _common = require("./common");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-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 _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 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 _objectSpread(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) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 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; }
-
-var baseClassName = _bem.default.base;
+var baseClassName = _exports.default.base;
 var componentClassName = 'people';
+
 /**
  * This is the component description.
  */
-
 var People = _ref => {
   var {
     id,
@@ -38,8 +29,8 @@ var People = _ref => {
     style,
     imageSize,
     children,
-    columnWidth // ...otherProps
-
+    columnWidth
+    // ...otherProps
   } = _ref;
   (0, React.useLayoutEffect)(() => {
     Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
@@ -50,37 +41,31 @@ var People = _ref => {
     style: _objectSpread(_objectSpread({}, style), {}, {
       '--image-size': imageSize,
       '--column-width': columnWidth
-    }) // {...otherProps}
-
+    })
+    // {...otherProps}
   }, children);
 };
-
 People.propTypes = {
   /**
    * The HTML id for this element
    */
   id: _propTypes.default.string,
-
   /**
    * The HTML class names for this element
    */
   className: _propTypes.default.string,
-
   /**
    * The React-written, css properties for this element.
    */
   style: _propTypes.default.objectOf(_propTypes.default.string),
-
   /**
    *  The children JSX
    */
   children: _propTypes.default.node,
-
   /**
    * The height and width of all the person's image
    */
   imageSize: _propTypes.default.string,
-
   /**
    * The width of the a person's column
    */

package/dist/cjs/a/People/common/Person/Person.js

@@ -4,27 +4,22 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var React = _interopRequireWildcard(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _bem = _interopRequireDefault(require("@pareto-engineering/bem"));
-
+var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
 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; }
-
 /* @pareto-engineering/generator-front 1.0.12 */
+
 // Local Definitions
-var baseClassName = _bem.default.base;
+
+var baseClassName = _exports.default.base;
 var componentClassName = 'person';
+
 /**
  * This is the component description.
  */
-
 var Person = _ref => {
   var {
     id,
@@ -33,8 +28,8 @@ var Person = _ref => {
     name,
     image,
     role,
-    color // ...otherProps
-
+    color
+    // ...otherProps
   } = _ref;
   return /*#__PURE__*/React.createElement("div", {
     id: id,
@@ -47,43 +42,36 @@ var Person = _ref => {
   }), /*#__PURE__*/React.createElement("div", {
     className: "details"
   }, /*#__PURE__*/React.createElement("p", {
-    className: "name s-1"
+    className: "name"
   }, name), /*#__PURE__*/React.createElement("p", {
-    className: "role s-2"
+    className: "role"
   }, role)));
 };
-
 Person.propTypes = {
   /**
    * The HTML id for this element
    */
   id: _propTypes.default.string,
-
   /**
    * The HTML class names for this element
    */
   className: _propTypes.default.string,
-
   /**
    * The React-written, css properties for this element.
    */
   style: _propTypes.default.objectOf(_propTypes.default.string),
-
   /**
    *  The person's image
    */
   image: _propTypes.default.string.isRequired,
-
   /**
    *  The person's name
    */
   name: _propTypes.default.string.isRequired,
-
   /**
    *  The person's role
    */
   role: _propTypes.default.string.isRequired,
-
   /**
    * The base color of the person's component
    */

package/dist/cjs/a/People/common/Person/index.js

@@ -9,7 +9,5 @@ Object.defineProperty(exports, "Person", {
     return _Person.default;
   }
 });
-
 var _Person = _interopRequireDefault(require("./Person"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/cjs/a/People/common/index.js

@@ -9,5 +9,4 @@ Object.defineProperty(exports, "Person", {
     return _Person.Person;
   }
 });
-
 var _Person = require("./Person");

package/dist/cjs/a/People/index.js

@@ -9,7 +9,5 @@ Object.defineProperty(exports, "People", {
     return _People.default;
   }
 });
-
 var _People = _interopRequireDefault(require("./People"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/cjs/a/People/styles.scss

@@ -1,8 +1,9 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 
 @use "@pareto-engineering/bem";
-@use "@aztlan/stylebook/src/mixins";
-@use "@aztlan/stylebook/src/globals" as *;
+@use "@pareto-engineering/styles/src/mixins";
+@use "@pareto-engineering/styles/src/globals" as *;
+@use "@aztlan/swatch/src/collections/palettes/monochrome";
 
 $default-border-radius:50%;
 $default-person-border-radius:2em;
@@ -10,6 +11,7 @@ $default-padding:var(--u);
 $default-horizontal-margin: .5em;
 
 $default-grid-gap: 1em;
+$default-image-padding: 1.5rem;
 
 .#{bem.$base}.people {
   display: grid;
@@ -19,7 +21,6 @@ $default-grid-gap: 1em;
 
   .person {
     align-items: center;
-    background-color: var(--y);
     border-radius: $default-person-border-radius;
     display: flex;
 
@@ -29,20 +30,21 @@ $default-grid-gap: 1em;
       border-radius: $default-border-radius;
       height: var(--image-size);
       width: var(--image-size);
+      margin-right: $default-image-padding;
     }
 
     .details {
       align-items: flex-start;
       display: flex;
       flex-direction: column;
+      color: var(--grey);
 
       .name {
-        margin-bottom: .25em;
-        color: var(--on-y);
+        margin-bottom: .1em;
+        color: var(--grey);
       }
 
       .role {
-        color: var(--on-y);
         opacity: .5;
       }
     }

package/dist/cjs/{c/AcceptCookies/AcceptCookies.js → a/Popover/Popover.js}

@@ -4,131 +4,112 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var React = _interopRequireWildcard(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _b = require("../../b");
-
-var _bem = _interopRequireDefault(require("@pareto-engineering/bem"));
-
+var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
+var _utils = require("../../utils");
 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; }
+var baseClassName = _exports.default.base;
+var componentClassName = 'popover';
 
-// Local Definitions
-var baseClassName = _bem.default.base;
-var componentClassName = 'accept-cookies';
 /**
  * This is the component description.
  */
-
-var AcceptCookies = _ref => {
+var Popover = _ref => {
   var {
     id,
     className: userClassName,
     style,
     color,
-    title,
-    subtitle,
-    onClickAllow,
-    onClickDecline,
-    defaultIsShown // ...otherProps
-
+    children,
+    isOpen,
+    parentRef,
+    preferredPrimaryOrder,
+    preferredSecondaryOrder,
+    offsetXPx,
+    offsetYPx
+    // ...otherProps
   } = _ref;
-  var [isShown, setIsShown] = (0, React.useState)(defaultIsShown);
-  var hide = (0, React.useCallback)(() => setIsShown(false), []);
-  var allow = (0, React.useCallback)(() => {
-    onClickAllow === null || onClickAllow === void 0 ? void 0 : onClickAllow();
-    hide();
-  }, []);
-  var decline = (0, React.useCallback)(() => {
-    onClickDecline === null || onClickDecline === void 0 ? void 0 : onClickDecline();
-    hide();
-  }, []);
   (0, React.useLayoutEffect)(() => {
     Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
   }, []);
-  if (!isShown) return null;
+  var popoverRef = (0, React.useRef)(null);
+  var {
+    primaryPosition,
+    secondaryPosition
+  } = (0, _utils.useDynamicPosition)({
+    preferredPrimaryOrder,
+    preferredSecondaryOrder,
+    elementRef: popoverRef,
+    parentRef,
+    offsetXPx,
+    offsetYPx
+  });
   return /*#__PURE__*/React.createElement("div", {
     id: id,
-    className: [baseClassName, componentClassName, userClassName, "x-".concat(color), 'u1'].filter(e => e).join(' '),
-    style: style // {...otherProps}
-
-  }, /*#__PURE__*/React.createElement("div", {
-    className: _bem.default.elementContent
-  }, /*#__PURE__*/React.createElement("p", {
-    className: "s0"
-  }, title), /*#__PURE__*/React.createElement("p", {
-    className: "s-1"
-  }, subtitle), /*#__PURE__*/React.createElement("div", {
-    className: "buttons s-1"
-  }, /*#__PURE__*/React.createElement(_b.Button, {
-    className: "allow",
-    onClick: allow
-  }, "Allow"), /*#__PURE__*/React.createElement(_b.Button, {
-    className: "decline v1 ml-v",
-    onClick: decline
-  }, "Decline"))));
+    className: [baseClassName, componentClassName, userClassName, isOpen && 'open', "x-".concat(color), primaryPosition, secondaryPosition].filter(e => e).join(' '),
+    style: style,
+    ref: popoverRef
+    // {...otherProps}
+  }, children);
 };
-
-AcceptCookies.propTypes = {
+Popover.propTypes = {
   /**
    * The HTML id for this element
    */
   id: _propTypes.default.string,
-
   /**
    * The HTML class names for this element
    */
   className: _propTypes.default.string,
-
   /**
    * The React-written, css properties for this element.
    */
   style: _propTypes.default.objectOf(_propTypes.default.string),
-
   /**
    *  The children JSX
    */
-  // children:PropTypes.node,
-
+  children: _propTypes.default.node,
   /**
-   *  The title
+   * The base color of the popover
    */
-  title: _propTypes.default.string,
-
+  color: _propTypes.default.string,
   /**
-   *  The sub-title
+   * Whether the popover should be visible or not
    */
-  subtitle: _propTypes.default.string,
-
+  isOpen: _propTypes.default.bool,
   /**
-   *  The color
+   * The preferred primary position order of the popover
    */
-  color: _propTypes.default.string,
-
+  preferredPrimaryOrder: _propTypes.default.arrayOf(_propTypes.default.oneOf(['bottom', 'top', 'right', 'left'])),
   /**
-   *  Allow cookies function
+   * The preferred secondary position order of the popover
    */
-  onClickAllow: _propTypes.default.func,
-
+  preferredSecondaryOrder: _propTypes.default.arrayOf(_propTypes.default.oneOf(['left', 'right', 'bottom', 'top'])),
   /**
-   *  Allow cookies function
+   * The horizonal offset in pixels from the anchor point to the popover
    */
-  onClickDecline: _propTypes.default.func,
-
+  offsetXPx: _propTypes.default.number,
+  /**
+   * The vertical offset in pixels from the anchor point to the popover
+   */
+  offsetYPx: _propTypes.default.number,
   /**
-   *  Condition to show or hide the component
+   * The reference to the parent element
    */
-  defaultIsShown: _propTypes.default.bool
+  parentRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
+    current: _propTypes.default.instanceOf(Element)
+  })])
 };
-AcceptCookies.defaultProps = {
-  color: 'main1',
-  defaultIsShown: true
+Popover.defaultProps = {
+  color: 'background1',
+  isOpen: false,
+  preferredPrimaryOrder: ['bottom', 'top', 'right', 'left'],
+  preferredSecondaryOrder: ['left', 'right', 'bottom', 'top'],
+  offsetXPx: 16,
+  offsetYPx: 0
 };
-var _default = AcceptCookies;
+var _default = Popover;
 exports.default = _default;

package/dist/cjs/{c/BlogPost → a/Popover}/index.js

@@ -3,13 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "BlogPost", {
+Object.defineProperty(exports, "Popover", {
   enumerable: true,
   get: function get() {
-    return _BlogPost.default;
+    return _Popover.default;
   }
 });
-
-var _BlogPost = _interopRequireDefault(require("./BlogPost"));
-
+var _Popover = _interopRequireDefault(require("./Popover"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/cjs/a/Popover/styles.scss

@@ -0,0 +1,33 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+@use "@pareto-engineering/bem";
+
+$default-border: var(--theme-border-style) var(--metadata);
+
+.#{bem.$base}.popover {
+  position: absolute;
+  z-index: 1;
+  background-color: var(--x);
+  border: $default-border;
+
+  &:not(.open) {
+    display: none;
+  }
+
+  &.bottom {
+    top: 100%;
+    // bottom: 0;
+  }
+
+  &.left {
+    left: 0;
+  }
+
+  &.right {
+    right: 0;
+  }
+
+  &.top {
+    bottom: 100%;
+    top: auto;
+  }
+}