@artsy/palette 27.1.0 → 28.0.0

package/dist/elements/Link/Link.d.ts

@@ -10,7 +10,8 @@ export interface LinkProps extends BoxProps {
 /**
  * Basic <a> tag styled with additional LinkProps
  *
- * @deprecated If working in Force, please use `RouterLink`.
+ * @deprecated Do not use this component!
+ * Tip: If working on Force, please use RouterLink.
  */
 export declare const Link: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLAnchorElement> & import("react").AnchorHTMLAttributes<HTMLAnchorElement> & LinkProps, any, import("react").ClassAttributes<HTMLAnchorElement> & import("react").AnchorHTMLAttributes<HTMLAnchorElement> & LinkProps>;
 export {};

package/dist/elements/Link/Link.js

@@ -26,7 +26,8 @@ var backwardsCompatCompute = function backwardsCompatCompute(state, props) {
 /**
  * Basic <a> tag styled with additional LinkProps
  *
- * @deprecated If working in Force, please use `RouterLink`.
+ * @deprecated Do not use this component! 
+ * Tip: If working on Force, please use RouterLink.  
  */
 
 

package/dist/elements/Link/Link.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Link/Link.tsx"],"names":["computeUnderline","state","behavior","blocklist","none","includes","backwardsCompatCompute","props","noUnderline","underlineBehavior","Link","styled","a","hoverColor","boxMixin","displayName","defaultProps"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;;;AAUA,IAAMA,gBAAgB,GAAG,SAAnBA,gBAAmB,CACvBC,KADuB,EAEvBC,QAFuB,EAGZ;AACX,MAAMC,SAA+B,GACnCF,KAAK,KAAK,OAAV,GAAoB,CAAC,MAAD,CAApB,GAA+B,CAAC,OAAD,EAAU,MAAV,CADjC;AAEA,MAAMG,IAAI,GAAGD,SAAS,CAACE,QAAV,CAAmBH,QAAnB,CAAb;AACA,SAAOE,IAAI,GAAG,MAAH,GAAY,WAAvB;AACD,CARD;;AAUA,IAAME,sBAAsB,GAAG,SAAzBA,sBAAyB,CAACL,KAAD,EAAgBM,KAAhB,EAAqC;AAClE,MAAML,QAAQ,GAAGK,KAAK,CAACC,WAAN,GAAoB,OAApB,GAA8BD,KAAK,CAACE,iBAArD;AACA,SAAOT,gBAAgB,CAACC,KAAD,EAAQC,QAAR,CAAvB;AACD,CAHD;AAKA;AACA;AACA;AACA;AACA;;;AACO,IAAMQ,IAAI,GAAGC,0BAAOC,CAAV;AAAA;AAAA;AAAA,8GACN,oBAAM,UAAN,CADM,EAGI,UAACL,KAAD;AAAA,SAAWD,sBAAsB,CAAC,QAAD,EAAWC,KAAX,CAAjC;AAAA,CAHJ,EAKM,UAACA,KAAD;AAAA,SAAWD,sBAAsB,CAAC,OAAD,EAAUC,KAAV,CAAjC;AAAA,CALN,EAMJ,UAACA,KAAD;AAAA,SACPA,KAAK,CAACM,UAAN,GAAmB,oBAAMN,KAAK,CAACM,UAAZ,CAAnB,GAA6C,oBAAM,UAAN,CADtC;AAAA,CANI,EASbC,aATa,CAAV;;;AAYPJ,IAAI,CAACK,WAAL,GAAmB,MAAnB;AAEAL,IAAI,CAACM,YAAL,GAAoB;AAClBP,EAAAA,iBAAiB,EAAE;AADD,CAApB","sourcesContent":["import styled from \"styled-components\"\nimport { color } from \"../../helpers\"\nimport { Color } from \"../../Theme\"\nimport { boxMixin, BoxProps } from \"../Box\"\n\ntype UnderlineBehaviors = \"default\" | \"hover\" | \"none\"\n\nexport interface LinkProps extends BoxProps {\n  hoverColor?: Color\n  noUnderline?: boolean\n  underlineBehavior?: UnderlineBehaviors\n}\n\nconst computeUnderline = (\n  state: string,\n  behavior: UnderlineBehaviors\n): string => {\n  const blocklist: UnderlineBehaviors[] =\n    state === \"hover\" ? [\"none\"] : [\"hover\", \"none\"]\n  const none = blocklist.includes(behavior)\n  return none ? \"none\" : \"underline\"\n}\n\nconst backwardsCompatCompute = (state: string, props: LinkProps) => {\n  const behavior = props.noUnderline ? \"hover\" : props.underlineBehavior\n  return computeUnderline(state, behavior!)\n}\n\n/**\n * Basic <a> tag styled with additional LinkProps\n *\n * @deprecated If working in Force, please use `RouterLink`.\n */\nexport const Link = styled.a<LinkProps>`\n  color: ${color(\"black100\")};\n  transition: color 0.25s;\n  text-decoration: ${(props) => backwardsCompatCompute(\"normal\", props)};\n  &:hover {\n    text-decoration: ${(props) => backwardsCompatCompute(\"hover\", props)};\n    color: ${(props) =>\n      props.hoverColor ? color(props.hoverColor) : color(\"black100\")};\n  }\n  ${boxMixin};\n`\n\nLink.displayName = \"Link\"\n\nLink.defaultProps = {\n  underlineBehavior: \"default\",\n}\n"],"file":"Link.js"}
+{"version":3,"sources":["../../../src/elements/Link/Link.tsx"],"names":["computeUnderline","state","behavior","blocklist","none","includes","backwardsCompatCompute","props","noUnderline","underlineBehavior","Link","styled","a","hoverColor","boxMixin","displayName","defaultProps"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;;;AAUA,IAAMA,gBAAgB,GAAG,SAAnBA,gBAAmB,CACvBC,KADuB,EAEvBC,QAFuB,EAGZ;AACX,MAAMC,SAA+B,GACnCF,KAAK,KAAK,OAAV,GAAoB,CAAC,MAAD,CAApB,GAA+B,CAAC,OAAD,EAAU,MAAV,CADjC;AAEA,MAAMG,IAAI,GAAGD,SAAS,CAACE,QAAV,CAAmBH,QAAnB,CAAb;AACA,SAAOE,IAAI,GAAG,MAAH,GAAY,WAAvB;AACD,CARD;;AAUA,IAAME,sBAAsB,GAAG,SAAzBA,sBAAyB,CAACL,KAAD,EAAgBM,KAAhB,EAAqC;AAClE,MAAML,QAAQ,GAAGK,KAAK,CAACC,WAAN,GAAoB,OAApB,GAA8BD,KAAK,CAACE,iBAArD;AACA,SAAOT,gBAAgB,CAACC,KAAD,EAAQC,QAAR,CAAvB;AACD,CAHD;AAKA;AACA;AACA;AACA;AACA;AACA;;;AACO,IAAMQ,IAAI,GAAGC,0BAAOC,CAAV;AAAA;AAAA;AAAA,8GACN,oBAAM,UAAN,CADM,EAGI,UAACL,KAAD;AAAA,SAAWD,sBAAsB,CAAC,QAAD,EAAWC,KAAX,CAAjC;AAAA,CAHJ,EAKM,UAACA,KAAD;AAAA,SAAWD,sBAAsB,CAAC,OAAD,EAAUC,KAAV,CAAjC;AAAA,CALN,EAMJ,UAACA,KAAD;AAAA,SACPA,KAAK,CAACM,UAAN,GAAmB,oBAAMN,KAAK,CAACM,UAAZ,CAAnB,GAA6C,oBAAM,UAAN,CADtC;AAAA,CANI,EASbC,aATa,CAAV;;;AAYPJ,IAAI,CAACK,WAAL,GAAmB,MAAnB;AAEAL,IAAI,CAACM,YAAL,GAAoB;AAClBP,EAAAA,iBAAiB,EAAE;AADD,CAApB","sourcesContent":["import styled from \"styled-components\"\nimport { color } from \"../../helpers\"\nimport { Color } from \"../../Theme\"\nimport { boxMixin, BoxProps } from \"../Box\"\n\ntype UnderlineBehaviors = \"default\" | \"hover\" | \"none\"\n\nexport interface LinkProps extends BoxProps {\n  hoverColor?: Color\n  noUnderline?: boolean\n  underlineBehavior?: UnderlineBehaviors\n}\n\nconst computeUnderline = (\n  state: string,\n  behavior: UnderlineBehaviors\n): string => {\n  const blocklist: UnderlineBehaviors[] =\n    state === \"hover\" ? [\"none\"] : [\"hover\", \"none\"]\n  const none = blocklist.includes(behavior)\n  return none ? \"none\" : \"underline\"\n}\n\nconst backwardsCompatCompute = (state: string, props: LinkProps) => {\n  const behavior = props.noUnderline ? \"hover\" : props.underlineBehavior\n  return computeUnderline(state, behavior!)\n}\n\n/**\n * Basic <a> tag styled with additional LinkProps\n *\n * @deprecated Do not use this component! \n * Tip: If working on Force, please use RouterLink.  \n */\nexport const Link = styled.a<LinkProps>`\n  color: ${color(\"black100\")};\n  transition: color 0.25s;\n  text-decoration: ${(props) => backwardsCompatCompute(\"normal\", props)};\n  &:hover {\n    text-decoration: ${(props) => backwardsCompatCompute(\"hover\", props)};\n    color: ${(props) =>\n      props.hoverColor ? color(props.hoverColor) : color(\"black100\")};\n  }\n  ${boxMixin};\n`\n\nLink.displayName = \"Link\"\n\nLink.defaultProps = {\n  underlineBehavior: \"default\",\n}\n"],"file":"Link.js"}

package/dist/elements/Pointer/Pointer.d.ts

@@ -0,0 +1,21 @@
+import { FC } from "react";
+import { Position } from "../../utils";
+declare const POINTER_VARIANTS: {
+    defaultLight: {
+        backgroundColor: string;
+    };
+    defaultDark: {
+        backgroundColor: string;
+    };
+};
+declare type PointerVariant = keyof typeof POINTER_VARIANTS;
+export interface PointerProps {
+    isFlipped: boolean;
+    placement: Position;
+    variant?: PointerVariant;
+}
+/**
+ * Internal-use component for displaying a triangular pointer to an anchor node
+ */
+export declare const Pointer: FC<PointerProps>;
+export {};

package/dist/elements/Pointer/Pointer.js

@@ -0,0 +1,161 @@
+"use strict";
+
+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); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Pointer = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _styledSystem = require("styled-system");
+
+var _helpers = require("../../helpers");
+
+var _Box = require("../Box");
+
+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 _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 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) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var POINTER_VARIANTS = {
+  defaultLight: {
+    backgroundColor: "white100"
+  },
+  defaultDark: {
+    backgroundColor: "black100"
+  }
+};
+
+/**
+ * Internal-use component for displaying a triangular pointer to an anchor node
+ */
+var Pointer = function Pointer(_ref) {
+  var isFlipped = _ref.isFlipped,
+      placement = _ref.placement,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? "defaultLight" : _ref$variant;
+  var position = (0, _react.useMemo)(function () {
+    switch (placement) {
+      case "top-start":
+        return {
+          bottom: isFlipped ? "100%" : 0,
+          left: "".concat(POINTER_WIDTH, "px")
+        };
+
+      case "top":
+        return {
+          bottom: isFlipped ? "100%" : 0,
+          left: "calc(50% - ".concat(POINTER_WIDTH / 2, "px)")
+        };
+
+      case "top-end":
+        return {
+          bottom: isFlipped ? "100%" : 0,
+          right: "".concat(POINTER_WIDTH * 2, "px")
+        };
+
+      case "bottom-start":
+        return {
+          top: isFlipped ? "100%" : 0,
+          left: "".concat(POINTER_WIDTH, "px")
+        };
+
+      case "bottom":
+        return {
+          top: isFlipped ? "100%" : 0,
+          left: "calc(50% - ".concat(POINTER_WIDTH / 2, "px)")
+        };
+
+      case "bottom-end":
+        return {
+          top: isFlipped ? "100%" : 0,
+          right: "".concat(POINTER_WIDTH * 2, "px")
+        };
+
+      case "left-start":
+        return _objectSpread({
+          top: "".concat(POINTER_WIDTH, "px")
+        }, isFlipped ? {
+          left: "-".concat(POINTER_WIDTH / 2, "px")
+        } : {
+          right: "".concat(POINTER_WIDTH / 2, "px")
+        });
+
+      case "left":
+        return _objectSpread({
+          top: "50%"
+        }, isFlipped ? {
+          left: "-".concat(POINTER_WIDTH / 2, "px")
+        } : {
+          right: "".concat(POINTER_WIDTH / 2, "px")
+        });
+
+      case "left-end":
+        return _objectSpread({
+          bottom: "".concat(POINTER_WIDTH, "px")
+        }, isFlipped ? {
+          left: "-".concat(POINTER_WIDTH / 2, "px")
+        } : {
+          right: "".concat(POINTER_WIDTH / 2, "px")
+        });
+
+      case "right-start":
+        return _objectSpread({
+          top: "".concat(POINTER_WIDTH, "px")
+        }, isFlipped ? {
+          right: "".concat(POINTER_WIDTH / 2, "px")
+        } : {
+          left: "-".concat(POINTER_WIDTH / 2, "px")
+        });
+
+      case "right":
+        return _objectSpread({
+          top: "50%"
+        }, isFlipped ? {
+          right: "".concat(POINTER_WIDTH / 2, "px")
+        } : {
+          left: "-".concat(POINTER_WIDTH / 2, "px")
+        });
+
+      case "right-end":
+        return _objectSpread({
+          bottom: "".concat(POINTER_WIDTH, "px")
+        }, isFlipped ? {
+          right: "".concat(POINTER_WIDTH / 2, "px")
+        } : {
+          left: "-".concat(POINTER_WIDTH / 2, "px")
+        });
+    }
+  }, [isFlipped, placement]);
+  return /*#__PURE__*/_react.default.createElement(Container, _extends({
+    variant: variant
+  }, position));
+};
+
+exports.Pointer = Pointer;
+Pointer.displayName = "Pointer";
+var POINTER_SIZE = 10; // px
+
+var POINTER_WIDTH = Math.sqrt(2 * Math.pow(10, 2)); // px
+
+var Container = (0, _styledComponents.default)(_Box.Box).withConfig({
+  displayName: "Pointer__Container",
+  componentId: "sj9j6h-0"
+})(["z-index:-1;position:absolute;&::after{content:\"\";position:absolute;width:", "px;height:", "px;transform-origin:0 0;transform:rotate(-45deg);box-shadow:", ";", "}"], POINTER_SIZE, POINTER_SIZE, _helpers.DROP_SHADOW, (0, _styledSystem.variant)({
+  variants: POINTER_VARIANTS
+}));
+//# sourceMappingURL=Pointer.js.map

package/dist/elements/Pointer/Pointer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/Pointer/Pointer.tsx"],"names":["POINTER_VARIANTS","defaultLight","backgroundColor","defaultDark","Pointer","isFlipped","placement","variant","position","bottom","left","POINTER_WIDTH","right","top","POINTER_SIZE","Math","sqrt","pow","Container","Box","DROP_SHADOW","variants"],"mappings":"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","sourcesContent":["import React, { FC, useMemo } from \"react\"\nimport styled from \"styled-components\"\nimport { variant } from \"styled-system\"\nimport { DROP_SHADOW } from \"../../helpers\"\nimport { Position } from \"../../utils\"\nimport { Box } from \"../Box\"\n\nconst POINTER_VARIANTS = {\n  defaultLight: {\n    backgroundColor: \"white100\",\n  },\n  defaultDark: {\n    backgroundColor: \"black100\",\n  },\n}\n\ntype PointerVariant = keyof typeof POINTER_VARIANTS\n\nexport interface PointerProps {\n  isFlipped: boolean\n  placement: Position\n  variant?: PointerVariant\n}\n\n/**\n * Internal-use component for displaying a triangular pointer to an anchor node\n */\nexport const Pointer: FC<PointerProps> = ({\n  isFlipped,\n  placement,\n  variant = \"defaultLight\",\n}) => {\n  const position = useMemo(() => {\n    switch (placement) {\n      case \"top-start\":\n        return {\n          bottom: isFlipped ? \"100%\" : 0,\n          left: `${POINTER_WIDTH}px`,\n        }\n      case \"top\":\n        return {\n          bottom: isFlipped ? \"100%\" : 0,\n          left: `calc(50% - ${POINTER_WIDTH / 2}px)`,\n        }\n      case \"top-end\":\n        return {\n          bottom: isFlipped ? \"100%\" : 0,\n          right: `${POINTER_WIDTH * 2}px`,\n        }\n      case \"bottom-start\":\n        return {\n          top: isFlipped ? \"100%\" : 0,\n          left: `${POINTER_WIDTH}px`,\n        }\n      case \"bottom\":\n        return {\n          top: isFlipped ? \"100%\" : 0,\n          left: `calc(50% - ${POINTER_WIDTH / 2}px)`,\n        }\n      case \"bottom-end\":\n        return {\n          top: isFlipped ? \"100%\" : 0,\n          right: `${POINTER_WIDTH * 2}px`,\n        }\n      case \"left-start\":\n        return {\n          top: `${POINTER_WIDTH}px`,\n          ...(isFlipped\n            ? { left: `-${POINTER_WIDTH / 2}px` }\n            : { right: `${POINTER_WIDTH / 2}px` }),\n        }\n      case \"left\":\n        return {\n          top: \"50%\",\n          ...(isFlipped\n            ? { left: `-${POINTER_WIDTH / 2}px` }\n            : { right: `${POINTER_WIDTH / 2}px` }),\n        }\n      case \"left-end\":\n        return {\n          bottom: `${POINTER_WIDTH}px`,\n          ...(isFlipped\n            ? { left: `-${POINTER_WIDTH / 2}px` }\n            : { right: `${POINTER_WIDTH / 2}px` }),\n        }\n      case \"right-start\":\n        return {\n          top: `${POINTER_WIDTH}px`,\n          ...(isFlipped\n            ? { right: `${POINTER_WIDTH / 2}px` }\n            : { left: `-${POINTER_WIDTH / 2}px` }),\n        }\n      case \"right\":\n        return {\n          top: \"50%\",\n          ...(isFlipped\n            ? { right: `${POINTER_WIDTH / 2}px` }\n            : { left: `-${POINTER_WIDTH / 2}px` }),\n        }\n      case \"right-end\":\n        return {\n          bottom: `${POINTER_WIDTH}px`,\n          ...(isFlipped\n            ? { right: `${POINTER_WIDTH / 2}px` }\n            : { left: `-${POINTER_WIDTH / 2}px` }),\n        }\n    }\n  }, [isFlipped, placement])\n\n  return <Container variant={variant} {...position} />\n}\n\nconst POINTER_SIZE = 10 // px\nconst POINTER_WIDTH = Math.sqrt(2 * Math.pow(10, 2)) // px\n\nconst Container = styled(Box)<{ variant: PointerVariant }>`\n  z-index: -1;\n  position: absolute;\n\n  &::after {\n    content: \"\";\n    position: absolute;\n    width: ${POINTER_SIZE}px;\n    height: ${POINTER_SIZE}px;\n    transform-origin: 0 0;\n    transform: rotate(-45deg);\n    box-shadow: ${DROP_SHADOW};\n    ${variant({ variants: POINTER_VARIANTS })}\n  }\n`\n"],"file":"Pointer.js"}

package/dist/elements/Pointer/index.d.ts

@@ -0,0 +1 @@
+export * from "./Pointer";

package/dist/elements/Pointer/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _Pointer = require("./Pointer");
+
+Object.keys(_Pointer).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Pointer[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Pointer[key];
+    }
+  });
+});
+//# sourceMappingURL=index.js.map

package/dist/elements/Pointer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/Pointer/index.ts"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from \"./Pointer\"\n"],"file":"index.js"}

package/dist/elements/Popover/Popover.d.ts

@@ -1,6 +1,17 @@
 import React from "react";
 import { Position } from "../../utils";
 import { BoxProps } from "../Box";
+export declare const POPOVER_VARIANTS: {
+    defaultLight: {
+        backgroundColor: string;
+        color: string;
+    };
+    defaultDark: {
+        backgroundColor: string;
+        color: string;
+    };
+};
+export declare type PopoverVariant = keyof typeof POPOVER_VARIANTS;
 export interface PopoverActions {
     /** Call to show popover */
     onVisible(): void;
@@ -10,13 +21,15 @@ export interface PopoverActions {
     anchorRef: React.MutableRefObject<HTMLElement>;
 }
 export interface PopoverProps extends BoxProps {
-    title?: React.ReactNode;
-    placement?: Position;
-    /** Intially visible by default? */
-    visible?: boolean;
-    popover: React.ReactNode;
     children: ({ anchorRef, onVisible, onHide }: PopoverActions) => JSX.Element;
     onClose?: () => void;
+    placement?: Position;
+    /** Display triangular pointer back to anchor node */
+    pointer?: boolean;
+    popover: React.ReactNode;
+    variant?: PopoverVariant;
+    /** Initial default visibility */
+    visible?: boolean;
 }
 /**
  * A `Popover` is a small modal-type element which is anchored, and can be

package/dist/elements/Popover/Popover.js

@@ -5,15 +5,15 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Popover = void 0;
+exports.Popover = exports.POPOVER_VARIANTS = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _helpers = require("../../helpers");
+var _styledSystem = require("styled-system");
 
-var _isText = require("../../helpers/isText");
+var _helpers = require("../../helpers");
 
 var _svgs = require("../../svgs");
 
@@ -25,13 +25,9 @@ var _Box = require("../Box");
 
 var _Clickable = require("../Clickable");
 
-var _Flex = require("../Flex");
-
-var _Spacer = require("../Spacer");
+var _Pointer = require("../Pointer");
 
-var _Text = require("../Text");
-
-var _excluded = ["title", "placement", "visible", "children", "popover", "onClose"];
+var _excluded = ["children", "onClose", "placement", "pointer", "popover", "variant", "visible"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -57,19 +53,34 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
+var POPOVER_VARIANTS = {
+  defaultLight: {
+    backgroundColor: "white100",
+    color: "black100"
+  },
+  defaultDark: {
+    backgroundColor: "black100",
+    color: "white100"
+  }
+};
+exports.POPOVER_VARIANTS = POPOVER_VARIANTS;
+
 /**
  * A `Popover` is a small modal-type element which is anchored, and can be
  * positioned relative to, another element.
  */
 var Popover = function Popover(_ref) {
-  var title = _ref.title,
+  var children = _ref.children,
+      onClose = _ref.onClose,
       _ref$placement = _ref.placement,
       placement = _ref$placement === void 0 ? "top" : _ref$placement,
+      _ref$pointer = _ref.pointer,
+      pointer = _ref$pointer === void 0 ? false : _ref$pointer,
+      popover = _ref.popover,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? "defaultLight" : _ref$variant,
       _ref$visible = _ref.visible,
       _visible = _ref$visible === void 0 ? false : _ref$visible,
-      children = _ref.children,
-      popover = _ref.popover,
-      onClose = _ref.onClose,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var _useState = (0, _react.useState)(false),
@@ -120,7 +131,8 @@ var Popover = function Popover(_ref) {
     active: visible
   }),
       anchorRef = _usePosition.anchorRef,
-      tooltipRef = _usePosition.tooltipRef;
+      tooltipRef = _usePosition.tooltipRef,
+      isFlipped = _usePosition.state.isFlipped;
 
   (0, _utils.useClickOutside)({
     ref: tooltipRef,
@@ -132,44 +144,50 @@ var Popover = function Popover(_ref) {
     anchorRef: anchorRef,
     onVisible: onVisible,
     onHide: onHide
-  }), visible && /*#__PURE__*/_react.default.createElement(Tip, _extends({
+  }), visible && /*#__PURE__*/_react.default.createElement(Tip, {
     tabIndex: 0,
     ref: tooltipRef,
     zIndex: 1,
     display: "inline-block",
-    bg: "white100",
-    p: 2
-  }, rest), title && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Flex.Flex, {
-    alignItems: "center",
-    flex: 1,
-    justifyContent: "space-between"
-  }, (0, _isText.isText)(title) ? /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    variant: "lg-display",
-    lineHeight: 1
-  }, title) : title, /*#__PURE__*/_react.default.createElement(_Spacer.Spacer, {
-    x: 4
-  })), /*#__PURE__*/_react.default.createElement(_Spacer.Spacer, {
-    y: 0.5
-  })), /*#__PURE__*/_react.default.createElement(_Clickable.Clickable, {
-    position: "absolute",
-    right: 0,
-    top: 0,
-    pt: 2,
-    px: 1,
-    mx: 0.5,
+    position: "relative",
+    variant: variant
+  }, pointer && /*#__PURE__*/_react.default.createElement(_Pointer.Pointer, {
+    variant: variant,
+    placement: placement,
+    isFlipped: isFlipped
+  }), /*#__PURE__*/_react.default.createElement(Close, {
+    position: "relative",
+    zIndex: 2,
+    p: 1,
     onClick: handleHide,
     "aria-label": "Close"
   }, /*#__PURE__*/_react.default.createElement(_svgs.CloseIcon, {
-    fill: "black100",
+    fill: "currentColor",
     display: "block"
-  })), !title && /*#__PURE__*/_react.default.createElement(_Spacer.Spacer, {
-    y: 2
-  }), popover));
+  })), /*#__PURE__*/_react.default.createElement(Panel, _extends({
+    variant: variant,
+    position: "relative",
+    py: 2,
+    px: 1,
+    zIndex: 1
+  }, rest), popover)));
 };
 
 exports.Popover = Popover;
 var Tip = (0, _styledComponents.default)(_Box.Box).withConfig({
   displayName: "Popover__Tip",
   componentId: "x2qqfz-0"
-})(["position:fixed;z-index:1;text-align:left;transition:opacity 250ms ease-out;box-shadow:", ";"], _helpers.DROP_SHADOW);
+})(["position:fixed;z-index:1;text-align:left;transition:opacity 250ms ease-out;box-shadow:", ";", ""], _helpers.DROP_SHADOW, (0, _styledSystem.variant)({
+  variants: POPOVER_VARIANTS
+}));
+var Panel = (0, _styledComponents.default)(_Box.Box).withConfig({
+  displayName: "Popover__Panel",
+  componentId: "x2qqfz-1"
+})(["", ""], (0, _styledSystem.variant)({
+  variants: POPOVER_VARIANTS
+}));
+var Close = (0, _styledComponents.default)(_Clickable.Clickable).withConfig({
+  displayName: "Popover__Close",
+  componentId: "x2qqfz-2"
+})(["float:right;"]);
 //# sourceMappingURL=Popover.js.map

package/dist/elements/Popover/Popover.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Popover/Popover.tsx"],"names":["Popover","title","placement","visible","_visible","children","popover","onClose","rest","setVisible","tooltipRef","current","focus","anchorRef","onVisible","onHide","handleHide","handleKeydown","event","key","document","addEventListener","removeEventListener","position","offset","active","ref","onClickOutside","when","type","Tip","Box","DROP_SHADOW"],"mappings":"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","sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\"\nimport styled from \"styled-components\"\nimport { DROP_SHADOW } from \"../../helpers\"\nimport { isText } from \"../../helpers/isText\"\nimport { CloseIcon } from \"../../svgs\"\nimport { Position, useClickOutside, usePosition } from \"../../utils\"\nimport { useUpdateEffect } from \"../../utils/useUpdateEffect\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Clickable } from \"../Clickable\"\nimport { Flex } from \"../Flex\"\nimport { Spacer } from \"../Spacer\"\nimport { Text } from \"../Text\"\n\nexport interface PopoverActions {\n  /** Call to show popover */\n  onVisible(): void\n  /** Call to hide popover */\n  onHide(): void\n  /** Pass ref to element you want the popover to be anchored to */\n  anchorRef: React.MutableRefObject<HTMLElement>\n}\n\nexport interface PopoverProps extends BoxProps {\n  title?: React.ReactNode\n  placement?: Position\n  /** Intially visible by default? */\n  visible?: boolean\n  popover: React.ReactNode\n  children: ({ anchorRef, onVisible, onHide }: PopoverActions) => JSX.Element\n  onClose?: () => void\n}\n\n/**\n * A `Popover` is a small modal-type element which is anchored, and can be\n * positioned relative to, another element.\n */\nexport const Popover: React.FC<PopoverProps> = ({\n  title,\n  placement = \"top\",\n  visible: _visible = false,\n  children,\n  popover,\n  onClose,\n  ...rest\n}) => {\n  const [visible, setVisible] = useState(false)\n\n  // If prop updates/set initial visibility.\n  useEffect(() => {\n    setVisible(_visible)\n  }, [_visible])\n\n  // Yields focus back and forth between popover and anchor\n  useUpdateEffect(() => {\n    if (visible && tooltipRef.current) {\n      tooltipRef.current.focus()\n      return\n    }\n\n    if (!anchorRef.current) return\n    anchorRef.current.focus()\n  }, [visible])\n\n  const onVisible = useCallback(() => {\n    setVisible(true)\n  }, [])\n\n  const onHide = useCallback(() => {\n    setVisible(false)\n  }, [])\n\n  const handleHide = useCallback(() => {\n    onHide()\n    onClose?.()\n  }, [onHide, onClose])\n\n  useEffect(() => {\n    const handleKeydown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        handleHide()\n      }\n    }\n\n    document.addEventListener(\"keydown\", handleKeydown)\n\n    return () => {\n      document.removeEventListener(\"keydown\", handleKeydown)\n    }\n  }, [handleHide])\n\n  const { anchorRef, tooltipRef } = usePosition({\n    position: placement,\n    offset: 10,\n    active: visible,\n  })\n\n  useClickOutside({\n    ref: tooltipRef,\n    onClickOutside: handleHide,\n    when: visible,\n    type: \"click\",\n  })\n\n  return (\n    <>\n      {children({ anchorRef: anchorRef as any, onVisible, onHide })}\n\n      {visible && (\n        <Tip\n          tabIndex={0}\n          ref={tooltipRef as any}\n          zIndex={1}\n          display=\"inline-block\"\n          bg=\"white100\"\n          p={2}\n          {...rest}\n        >\n          {title && (\n            <>\n              <Flex alignItems=\"center\" flex={1} justifyContent=\"space-between\">\n                {isText(title) ? (\n                  <Text variant=\"lg-display\" lineHeight={1}>\n                    {title}\n                  </Text>\n                ) : (\n                  title\n                )}\n\n                <Spacer x={4} />\n              </Flex>\n\n              <Spacer y={0.5} />\n            </>\n          )}\n\n          <Clickable\n            position=\"absolute\"\n            right={0}\n            top={0}\n            pt={2}\n            px={1}\n            mx={0.5}\n            onClick={handleHide}\n            aria-label=\"Close\"\n          >\n            <CloseIcon fill=\"black100\" display=\"block\" />\n          </Clickable>\n\n          {!title && <Spacer y={2} />}\n\n          {popover}\n        </Tip>\n      )}\n    </>\n  )\n}\n\nconst Tip = styled(Box)`\n  position: fixed;\n  z-index: 1;\n  text-align: left;\n  transition: opacity 250ms ease-out;\n  box-shadow: ${DROP_SHADOW};\n`\n"],"file":"Popover.js"}
+{"version":3,"sources":["../../../src/elements/Popover/Popover.tsx"],"names":["POPOVER_VARIANTS","defaultLight","backgroundColor","color","defaultDark","Popover","children","onClose","placement","pointer","popover","variant","visible","_visible","rest","setVisible","tooltipRef","current","focus","anchorRef","onVisible","onHide","handleHide","handleKeydown","event","key","document","addEventListener","removeEventListener","position","offset","active","isFlipped","state","ref","onClickOutside","when","type","Tip","Box","DROP_SHADOW","variants","Panel","Close","Clickable"],"mappings":"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","sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\"\nimport styled from \"styled-components\"\nimport { variant } from \"styled-system\"\nimport { DROP_SHADOW } from \"../../helpers\"\nimport { CloseIcon } from \"../../svgs\"\nimport { Position, useClickOutside, usePosition } from \"../../utils\"\nimport { useUpdateEffect } from \"../../utils/useUpdateEffect\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Clickable } from \"../Clickable\"\nimport { Pointer } from \"../Pointer\"\n\nexport const POPOVER_VARIANTS = {\n  defaultLight: {\n    backgroundColor: \"white100\",\n    color: \"black100\",\n  },\n  defaultDark: {\n    backgroundColor: \"black100\",\n    color: \"white100\",\n  },\n}\n\nexport type PopoverVariant = keyof typeof POPOVER_VARIANTS\n\nexport interface PopoverActions {\n  /** Call to show popover */\n  onVisible(): void\n  /** Call to hide popover */\n  onHide(): void\n  /** Pass ref to element you want the popover to be anchored to */\n  anchorRef: React.MutableRefObject<HTMLElement>\n}\n\nexport interface PopoverProps extends BoxProps {\n  children: ({ anchorRef, onVisible, onHide }: PopoverActions) => JSX.Element\n  onClose?: () => void\n  placement?: Position\n  /** Display triangular pointer back to anchor node */\n  pointer?: boolean\n  popover: React.ReactNode\n  variant?: PopoverVariant\n  /** Initial default visibility */\n  visible?: boolean\n}\n\n/**\n * A `Popover` is a small modal-type element which is anchored, and can be\n * positioned relative to, another element.\n */\nexport const Popover: React.FC<PopoverProps> = ({\n  children,\n  onClose,\n  placement = \"top\",\n  pointer = false,\n  popover,\n  variant = \"defaultLight\",\n  visible: _visible = false,\n  ...rest\n}) => {\n  const [visible, setVisible] = useState(false)\n\n  // If prop updates/set initial visibility.\n  useEffect(() => {\n    setVisible(_visible)\n  }, [_visible])\n\n  // Yields focus back and forth between popover and anchor\n  useUpdateEffect(() => {\n    if (visible && tooltipRef.current) {\n      tooltipRef.current.focus()\n      return\n    }\n\n    if (!anchorRef.current) return\n    anchorRef.current.focus()\n  }, [visible])\n\n  const onVisible = useCallback(() => {\n    setVisible(true)\n  }, [])\n\n  const onHide = useCallback(() => {\n    setVisible(false)\n  }, [])\n\n  const handleHide = useCallback(() => {\n    onHide()\n    onClose?.()\n  }, [onHide, onClose])\n\n  useEffect(() => {\n    const handleKeydown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        handleHide()\n      }\n    }\n\n    document.addEventListener(\"keydown\", handleKeydown)\n\n    return () => {\n      document.removeEventListener(\"keydown\", handleKeydown)\n    }\n  }, [handleHide])\n\n  const {\n    anchorRef,\n    tooltipRef,\n    state: { isFlipped },\n  } = usePosition({\n    position: placement,\n    offset: 10,\n    active: visible,\n  })\n\n  useClickOutside({\n    ref: tooltipRef,\n    onClickOutside: handleHide,\n    when: visible,\n    type: \"click\",\n  })\n\n  return (\n    <>\n      {children({ anchorRef: anchorRef as any, onVisible, onHide })}\n\n      {visible && (\n        <Tip\n          tabIndex={0}\n          ref={tooltipRef as any}\n          zIndex={1}\n          display=\"inline-block\"\n          position=\"relative\"\n          variant={variant}\n        >\n          {pointer && (\n            <Pointer\n              variant={variant}\n              placement={placement}\n              isFlipped={isFlipped}\n            />\n          )}\n\n          <Close\n            position=\"relative\"\n            zIndex={2}\n            p={1}\n            onClick={handleHide}\n            aria-label=\"Close\"\n          >\n            <CloseIcon fill=\"currentColor\" display=\"block\" />\n          </Close>\n\n          <Panel\n            variant={variant}\n            position=\"relative\"\n            py={2}\n            px={1}\n            zIndex={1}\n            {...rest}\n          >\n            {popover}\n          </Panel>\n        </Tip>\n      )}\n    </>\n  )\n}\n\nconst Tip = styled(Box)<{ variant?: PopoverVariant }>`\n  position: fixed;\n  z-index: 1;\n  text-align: left;\n  transition: opacity 250ms ease-out;\n  box-shadow: ${DROP_SHADOW};\n  ${variant({ variants: POPOVER_VARIANTS })}\n`\n\nconst Panel = styled(Box)<{ variant?: PopoverVariant }>`\n  ${variant({ variants: POPOVER_VARIANTS })}\n`\n\nconst Close = styled(Clickable)`\n  float: right;\n`\n"],"file":"Popover.js"}

package/dist/elements/Popover/Popover.story.js

@@ -34,10 +34,34 @@ exports.default = _default;
 var Default = function Default() {
   return /*#__PURE__*/_react.default.createElement(_storybookStates.States, {
     states: [{}, {
-      title: "Example Title",
       visible: true
     }, {
       onClose: (0, _addonActions.action)("onClose")
+    }, {
+      visible: true,
+      popover: /*#__PURE__*/_react.default.createElement(_Text.Text, {
+        variant: "xs",
+        width: 300
+      }, "| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | \u2014 (Content interaction with close button.)")
+    }, {
+      pointer: true,
+      visible: true,
+      p: 0,
+      popover: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, new Array(4).fill(0).map(function (_, i) {
+        return /*#__PURE__*/_react.default.createElement(_Text.Text, {
+          key: i,
+          variant: "sm-display",
+          overflowEllipsis: true,
+          bg: "red10",
+          px: 1,
+          py: 0.5
+        }, "Example Item");
+      }))
+    }, {
+      variant: "defaultDark",
+      placement: "bottom",
+      visible: true,
+      pointer: true
     }]
   }, /*#__PURE__*/_react.default.createElement(_Popover.Popover, {
     placement: "bottom",
@@ -81,7 +105,9 @@ var Placement = function Placement() {
       popover: /*#__PURE__*/_react.default.createElement(_Text.Text, {
         variant: "xs"
       }, JSON.stringify(props)),
-      visible: true
+      visible: true,
+      variant: "defaultDark",
+      pointer: true
     }, props), function (_ref2) {
       var anchorRef = _ref2.anchorRef;
       return /*#__PURE__*/_react.default.createElement(_Text.Text, {
@@ -91,8 +117,7 @@ var Placement = function Placement() {
         p: 1,
         maxWidth: "50%",
         mx: "auto",
-        bg: "black100",
-        color: "white100"
+        bg: "black10"
       }, JSON.stringify(props));
     });
   });

package/dist/elements/Popover/Popover.story.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Popover/Popover.story.tsx"],"names":["CONTENT","title","Default","visible","onClose","onVisible","anchorRef","story","parameters","chromatic","disable","Placement","Object","keys","POSITION","map","placement","props","JSON","stringify"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEA,IAAMA,OAAO,GACX,sNADF;eAGe;AACbC,EAAAA,KAAK,EAAE;AADM,C;;;AAIR,IAAMC,OAAO,GAAG,SAAVA,OAAU,GAAM;AAC3B,sBACE,6BAAC,uBAAD;AACE,IAAA,MAAM,EAAE,CACN,EADM,EAEN;AAAED,MAAAA,KAAK,EAAE,eAAT;AAA0BE,MAAAA,OAAO,EAAE;AAAnC,KAFM,EAGN;AAAEC,MAAAA,OAAO,EAAE,0BAAO,SAAP;AAAX,KAHM;AADV,kBAOE,6BAAC,gBAAD;AACE,IAAA,SAAS,EAAC,QADZ;AAEE,IAAA,OAAO,eACL,6BAAC,UAAD;AAAM,MAAA,OAAO,EAAC,IAAd;AAAmB,MAAA,KAAK,EAAE;AAA1B,OACGJ,OADH;AAHJ,KAQG,gBAA8B;AAAA,QAA3BK,SAA2B,QAA3BA,SAA2B;AAAA,QAAhBC,SAAgB,QAAhBA,SAAgB;AAC7B,wBACE,6BAAC,QAAD;AAAK,MAAA,SAAS,EAAC;AAAf,oBACE,6BAAC,cAAD;AACE,MAAA,GAAG,EAAEA,SADP;AAEE,MAAA,OAAO,EAAC,gBAFV;AAGE,MAAA,IAAI,EAAC,OAHP;AAIE,MAAA,OAAO,EAAED;AAJX,kCADF,CADF;AAYD,GArBH,CAPF,CADF;AAiCD,CAlCM;;;AAAMH,O;AAoCbA,OAAO,CAACK,KAAR,GAAgB;AACdC,EAAAA,UAAU,EAAE;AAAEC,IAAAA,SAAS,EAAE;AAAEC,MAAAA,OAAO,EAAE;AAAX;AAAb;AADE,CAAhB;;AAIO,IAAMC,SAAS,GAAG,SAAZA,SAAY,GAAM;AAC7B,sBACE,6BAAC,uBAAD;AACE,IAAA,MAAM,EAAEC,MAAM,CAACC,IAAP,CAAYC,eAAZ,EAAsBC,GAAtB,CAA0B,UAACC,SAAD;AAAA,aAAgB;AAChDA,QAAAA,SAAS,EAAEA;AADqC,OAAhB;AAAA,KAA1B;AADV,KAKG,UAACC,KAAD,EAAW;AACV,wBACE,6BAAC,gBAAD;AACE,MAAA,OAAO,eAAE,6BAAC,UAAD;AAAM,QAAA,OAAO,EAAC;AAAd,SAAoBC,IAAI,CAACC,SAAL,CAAeF,KAAf,CAApB,CADX;AAEE,MAAA,OAAO;AAFT,OAGMA,KAHN,GAKG,iBAAmB;AAAA,UAAhBX,SAAgB,SAAhBA,SAAgB;AAClB,0BACE,6BAAC,UAAD;AACE,QAAA,GAAG,EAAEA,SADP;AAEE,QAAA,OAAO,EAAC,IAFV;AAGE,QAAA,SAAS,EAAC,QAHZ;AAIE,QAAA,CAAC,EAAE,CAJL;AAKE,QAAA,QAAQ,EAAC,KALX;AAME,QAAA,EAAE,EAAC,MANL;AAOE,QAAA,EAAE,EAAC,UAPL;AAQE,QAAA,KAAK,EAAC;AARR,SAUGY,IAAI,CAACC,SAAL,CAAeF,KAAf,CAVH,CADF;AAcD,KApBH,CADF;AAwBD,GA9BH,CADF;AAkCD,CAnCM;;;AAAMN,S;AAqCbA,SAAS,CAACJ,KAAV,GAAkB;AAChBC,EAAAA,UAAU,EAAE;AAAEC,IAAAA,SAAS,EAAE;AAAEC,MAAAA,OAAO,EAAE;AAAX;AAAb;AADI,CAAlB","sourcesContent":["import { action } from \"@storybook/addon-actions\"\nimport React from \"react\"\nimport { States } from \"storybook-states\"\nimport { Position, POSITION } from \"../../utils\"\nimport { Box } from \"../Box\"\nimport { Button } from \"../Button\"\nimport { Text } from \"../Text\"\nimport { Popover, PopoverProps } from \"./Popover\"\n\nconst CONTENT =\n  \"Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi eius autem aliquid cumque, mollitia incidunt totam. Id ut quae hic in quisquam, cupiditate iure nobis, provident minus voluptatem tenetur consequatur.\"\n\nexport default {\n  title: \"Components/Popover\",\n}\n\nexport const Default = () => {\n  return (\n    <States<Partial<PopoverProps>>\n      states={[\n        {},\n        { title: \"Example Title\", visible: true },\n        { onClose: action(\"onClose\") },\n      ]}\n    >\n      <Popover\n        placement=\"bottom\"\n        popover={\n          <Text variant=\"xs\" width={300}>\n            {CONTENT}\n          </Text>\n        }\n      >\n        {({ onVisible, anchorRef }) => {\n          return (\n            <Box textAlign=\"center\">\n              <Button\n                ref={anchorRef}\n                variant=\"secondaryBlack\"\n                size=\"small\"\n                onClick={onVisible}\n              >\n                Click to display popover\n              </Button>\n            </Box>\n          )\n        }}\n      </Popover>\n    </States>\n  )\n}\n\nDefault.story = {\n  parameters: { chromatic: { disable: true } },\n}\n\nexport const Placement = () => {\n  return (\n    <States<Partial<PopoverProps>>\n      states={Object.keys(POSITION).map((placement) => ({\n        placement: placement as Position,\n      }))}\n    >\n      {(props) => {\n        return (\n          <Popover\n            popover={<Text variant=\"xs\">{JSON.stringify(props)}</Text>}\n            visible\n            {...props}\n          >\n            {({ anchorRef }) => {\n              return (\n                <Text\n                  ref={anchorRef as any}\n                  variant=\"xs\"\n                  textAlign=\"center\"\n                  p={1}\n                  maxWidth=\"50%\"\n                  mx=\"auto\"\n                  bg=\"black100\"\n                  color=\"white100\"\n                >\n                  {JSON.stringify(props)}\n                </Text>\n              )\n            }}\n          </Popover>\n        )\n      }}\n    </States>\n  )\n}\n\nPlacement.story = {\n  parameters: { chromatic: { disable: true } },\n}\n"],"file":"Popover.story.js"}
+{"version":3,"sources":["../../../src/elements/Popover/Popover.story.tsx"],"names":["CONTENT","title","Default","visible","onClose","popover","pointer","p","Array","fill","map","_","i","variant","placement","onVisible","anchorRef","story","parameters","chromatic","disable","Placement","Object","keys","POSITION","props","JSON","stringify"],"mappings":"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","sourcesContent":["import { action } from \"@storybook/addon-actions\"\nimport React from \"react\"\nimport { States } from \"storybook-states\"\nimport { Position, POSITION } from \"../../utils\"\nimport { Box } from \"../Box\"\nimport { Button } from \"../Button\"\nimport { Text } from \"../Text\"\nimport { Popover, PopoverProps } from \"./Popover\"\n\nconst CONTENT =\n  \"Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi eius autem aliquid cumque, mollitia incidunt totam. Id ut quae hic in quisquam, cupiditate iure nobis, provident minus voluptatem tenetur consequatur.\"\n\nexport default {\n  title: \"Components/Popover\",\n}\n\nexport const Default = () => {\n  return (\n    <States<Partial<PopoverProps>>\n      states={[\n        {},\n        { visible: true },\n        { onClose: action(\"onClose\") },\n        {\n          visible: true,\n          popover: (\n            <Text variant=\"xs\" width={300}>\n              | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |\n              | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |\n              | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |\n              | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |\n              | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |\n              | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |\n              | | | — (Content interaction with close button.)\n            </Text>\n          ),\n        },\n        {\n          pointer: true,\n          visible: true,\n          p: 0,\n          popover: (\n            <>\n              {new Array(4).fill(0).map((_, i) => (\n                <Text\n                  key={i}\n                  variant=\"sm-display\"\n                  overflowEllipsis\n                  bg=\"red10\"\n                  px={1}\n                  py={0.5}\n                >\n                  Example Item\n                </Text>\n              ))}\n            </>\n          ),\n        },\n        {\n          variant: \"defaultDark\",\n          placement: \"bottom\",\n          visible: true,\n          pointer: true,\n        },\n      ]}\n    >\n      <Popover\n        placement=\"bottom\"\n        popover={\n          <Text variant=\"xs\" width={300}>\n            {CONTENT}\n          </Text>\n        }\n      >\n        {({ onVisible, anchorRef }) => {\n          return (\n            <Box textAlign=\"center\">\n              <Button\n                ref={anchorRef}\n                variant=\"secondaryBlack\"\n                size=\"small\"\n                onClick={onVisible}\n              >\n                Click to display popover\n              </Button>\n            </Box>\n          )\n        }}\n      </Popover>\n    </States>\n  )\n}\n\nDefault.story = {\n  parameters: { chromatic: { disable: true } },\n}\n\nexport const Placement = () => {\n  return (\n    <States<Partial<PopoverProps>>\n      states={Object.keys(POSITION).map((placement) => ({\n        placement: placement as Position,\n      }))}\n    >\n      {(props) => {\n        return (\n          <Popover\n            popover={<Text variant=\"xs\">{JSON.stringify(props)}</Text>}\n            visible\n            variant=\"defaultDark\"\n            pointer\n            {...props}\n          >\n            {({ anchorRef }) => {\n              return (\n                <Text\n                  ref={anchorRef as any}\n                  variant=\"xs\"\n                  textAlign=\"center\"\n                  p={1}\n                  maxWidth=\"50%\"\n                  mx=\"auto\"\n                  bg=\"black10\"\n                >\n                  {JSON.stringify(props)}\n                </Text>\n              )\n            }}\n          </Popover>\n        )\n      }}\n    </States>\n  )\n}\n\nPlacement.story = {\n  parameters: { chromatic: { disable: true } },\n}\n"],"file":"Popover.story.js"}

package/dist/elements/Tooltip/Tooltip.d.ts

@@ -1,12 +1,26 @@
 import React from "react";
 import { Position } from "../../utils/usePosition";
-export interface TooltipProps {
+import { BoxProps } from "../Box";
+export declare const TOOLTIP_VARIANTS: {
+    defaultLight: {
+        backgroundColor: string;
+        color: string;
+    };
+    defaultDark: {
+        backgroundColor: string;
+        color: string;
+    };
+};
+export declare type TooltipVariant = keyof typeof TOOLTIP_VARIANTS;
+export interface TooltipProps extends BoxProps {
+    /** Anchor element to attach to tooltip */
+    children: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    /** Content of tooltip */
     content: React.ReactNode;
     placement?: Position;
-    size?: "sm" | "lg";
-    width?: number | null;
+    pointer?: boolean;
+    variant?: TooltipVariant;
     visible?: boolean;
-    children: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
 }
 /**
  * A tooltip