@artsy/palette 45.13.1 → 45.14.0-canary.1497.33070.0

package/dist/esm/elements/Tooltip/Tooltip.js

@@ -0,0 +1,129 @@
+var _excluded = ["children", "content", "width", "offset", "placement", "pointer", "variant", "visible", "zIndex"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+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; }
+import React, { useState } from "react";
+import styled from "styled-components";
+import { variant } from "styled-system";
+import { isText } from "../../helpers";
+import { Position, usePosition } from "../../utils/usePosition";
+import { Box, BoxProps } from "../Box";
+import { Pointer } from "../Pointer";
+import { Text } from "../Text";
+import { themeGet } from "@styled-system/theme-get";
+export var TOOLTIP_VARIANTS = {
+  defaultLight: {
+    backgroundColor: "mono0",
+    color: "mono100"
+  },
+  defaultDark: {
+    backgroundColor: "mono100",
+    color: "mono0"
+  }
+};
+/**
+ * A tooltip
+ */
+export var Tooltip = function Tooltip(_ref) {
+  var _children$props, _children$props2, _children$props3, _children$props4, _children$props5;
+  var children = _ref.children,
+    content = _ref.content,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? 230 : _ref$width,
+    _ref$offset = _ref.offset,
+    offset = _ref$offset === void 0 ? 10 : _ref$offset,
+    _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? "top" : _ref$placement,
+    _ref$pointer = _ref.pointer,
+    pointer = _ref$pointer === void 0 ? false : _ref$pointer,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? "defaultLight" : _ref$variant,
+    visible = _ref.visible,
+    _ref$zIndex = _ref.zIndex,
+    zIndex = _ref$zIndex === void 0 ? 1 : _ref$zIndex,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    active = _useState2[0],
+    setActive = _useState2[1];
+  var handleClick = function handleClick() {
+    setActive(function (prevActive) {
+      return !prevActive;
+    });
+  };
+  var activate = function activate() {
+    setActive(true);
+  };
+  var deactivate = function deactivate() {
+    setActive(false);
+  };
+  var _usePosition = usePosition({
+      position: placement,
+      offset: offset,
+      active: visible !== null && visible !== void 0 ? visible : active
+    }),
+    anchorRef = _usePosition.anchorRef,
+    tooltipRef = _usePosition.tooltipRef,
+    isFlipped = _usePosition.state.isFlipped;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.cloneElement(children, {
+    ref: anchorRef,
+    tabIndex: 0,
+    onClick: compose(handleClick, (_children$props = children.props) === null || _children$props === void 0 ? void 0 : _children$props.onClick),
+    onMouseOver: compose(activate, (_children$props2 = children.props) === null || _children$props2 === void 0 ? void 0 : _children$props2.onMouseOver),
+    onMouseOut: compose(deactivate, (_children$props3 = children.props) === null || _children$props3 === void 0 ? void 0 : _children$props3.onMouseOut),
+    onFocus: compose(activate, (_children$props4 = children.props) === null || _children$props4 === void 0 ? void 0 : _children$props4.onFocus),
+    onBlur: compose(deactivate, (_children$props5 = children.props) === null || _children$props5 === void 0 ? void 0 : _children$props5.onBlur)
+  }), /*#__PURE__*/React.createElement(Tip, {
+    ref: tooltipRef,
+    variant: variant,
+    width: width,
+    zIndex: zIndex,
+    style:
+    // If visible is explictly set to `false` then the tooltip should be hidden
+    // Otherwise it should be visible or utilize the active state.
+    visible !== false ? {
+      opacity: (visible !== null && visible !== void 0 ? visible : active) ? 1 : 0
+    } : {
+      opacity: 0
+    }
+  }, pointer && /*#__PURE__*/React.createElement(Pointer, {
+    anchorRef: anchorRef,
+    tooltipRef: tooltipRef,
+    variant: variant,
+    placement: placement,
+    isFlipped: isFlipped
+  }), /*#__PURE__*/React.createElement(Panel, _extends({
+    variant: variant,
+    p: 1
+  }, rest), isText(content) ? /*#__PURE__*/React.createElement(Text, {
+    variant: "xs"
+  }, content) : content)));
+};
+var Tip = styled(Box).withConfig({
+  displayName: "Tooltip__Tip",
+  componentId: "sc-ymkaxc-0"
+})(["position:absolute;transition:opacity 250ms ease-out;text-align:left;box-shadow:", ";cursor:default;pointer-events:none;font-weight:normal;font-style:normal;", ""], themeGet("effects.dropShadow"), variant({
+  variants: TOOLTIP_VARIANTS
+}));
+var Panel = styled(Box).withConfig({
+  displayName: "Tooltip__Panel",
+  componentId: "sc-ymkaxc-1"
+})(["", ""], variant({
+  variants: TOOLTIP_VARIANTS
+}));
+var compose = function compose(a, b) {
+  return function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    a === null || a === void 0 ? void 0 : a.apply(void 0, args);
+    b === null || b === void 0 ? void 0 : b.apply(void 0, args);
+  };
+};
+//# sourceMappingURL=Tooltip.js.map

package/dist/esm/elements/Tooltip/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","names":["React","useState","styled","variant","isText","Position","usePosition","Box","BoxProps","Pointer","Text","themeGet","TOOLTIP_VARIANTS","defaultLight","backgroundColor","color","defaultDark","Tooltip","_ref","_children$props","_children$props2","_children$props3","_children$props4","_children$props5","children","content","_ref$width","width","_ref$offset","offset","_ref$placement","placement","_ref$pointer","pointer","_ref$variant","visible","_ref$zIndex","zIndex","rest","_objectWithoutProperties","_excluded","_useState","_useState2","_slicedToArray","active","setActive","handleClick","prevActive","activate","deactivate","_usePosition","position","anchorRef","tooltipRef","isFlipped","state","createElement","Fragment","cloneElement","ref","tabIndex","onClick","compose","props","onMouseOver","onMouseOut","onFocus","onBlur","Tip","style","opacity","Panel","_extends","p","withConfig","displayName","componentId","variants","a","b","_len","arguments","length","args","Array","_key","apply"],"sources":["../../../../src/elements/Tooltip/Tooltip.tsx"],"sourcesContent":["import React, { useState } from \"react\"\nimport styled from \"styled-components\"\nimport { variant } from \"styled-system\"\nimport { isText } from \"../../helpers\"\nimport { Position, usePosition } from \"../../utils/usePosition\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Pointer } from \"../Pointer\"\nimport { Text } from \"../Text\"\nimport { themeGet } from \"@styled-system/theme-get\"\n\nexport const TOOLTIP_VARIANTS = {\n  defaultLight: {\n    backgroundColor: \"mono0\",\n    color: \"mono100\",\n  },\n  defaultDark: {\n    backgroundColor: \"mono100\",\n    color: \"mono0\",\n  },\n}\n\nexport type TooltipVariant = keyof typeof TOOLTIP_VARIANTS\n\nexport interface TooltipProps extends BoxProps {\n  /** Anchor element to attach to tooltip */\n  children: React.ReactElement<any, string | React.JSXElementConstructor<any>>\n  /** Content of tooltip */\n  content: React.ReactNode\n  offset?: number\n  placement?: Position\n  pointer?: boolean\n  variant?: TooltipVariant\n  visible?: boolean\n}\n\n/**\n * A tooltip\n */\nexport const Tooltip: React.FC<React.PropsWithChildren<TooltipProps>> = ({\n  children,\n  content,\n  width = 230,\n  offset = 10,\n  placement = \"top\",\n  pointer = false,\n  variant = \"defaultLight\",\n  visible,\n  zIndex = 1,\n  ...rest\n}) => {\n  const [active, setActive] = useState(false)\n\n  const handleClick = () => {\n    setActive((prevActive) => !prevActive)\n  }\n\n  const activate = () => {\n    setActive(true)\n  }\n\n  const deactivate = () => {\n    setActive(false)\n  }\n\n  const {\n    anchorRef,\n    tooltipRef,\n    state: { isFlipped },\n  } = usePosition({\n    position: placement,\n    offset,\n    active: visible ?? active,\n  })\n\n  return (\n    <>\n      {React.cloneElement(children, {\n        ref: anchorRef,\n        tabIndex: 0,\n        onClick: compose(handleClick, children.props?.onClick),\n        onMouseOver: compose(activate, children.props?.onMouseOver),\n        onMouseOut: compose(deactivate, children.props?.onMouseOut),\n        onFocus: compose(activate, children.props?.onFocus),\n        onBlur: compose(deactivate, children.props?.onBlur),\n      })}\n\n      <Tip\n        ref={tooltipRef as any}\n        variant={variant}\n        width={width}\n        zIndex={zIndex}\n        style={\n          // If visible is explictly set to `false` then the tooltip should be hidden\n          // Otherwise it should be visible or utilize the active state.\n          visible !== false\n            ? {\n                opacity: visible ?? active ? 1 : 0,\n              }\n            : { opacity: 0 }\n        }\n      >\n        {pointer && (\n          <Pointer\n            anchorRef={anchorRef}\n            tooltipRef={tooltipRef}\n            variant={variant}\n            placement={placement}\n            isFlipped={isFlipped}\n          />\n        )}\n\n        <Panel variant={variant} p={1} {...rest}>\n          {isText(content) ? <Text variant=\"xs\">{content}</Text> : content}\n        </Panel>\n      </Tip>\n    </>\n  )\n}\n\nconst Tip = styled(Box)<{ variant?: TooltipVariant }>`\n  position: absolute;\n  transition: opacity 250ms ease-out;\n  text-align: left;\n  box-shadow: ${themeGet(\"effects.dropShadow\")};\n  cursor: default;\n  pointer-events: none;\n  font-weight: normal;\n  font-style: normal;\n  ${variant({ variants: TOOLTIP_VARIANTS })}\n`\n\nconst Panel = styled(Box)<{ variant?: TooltipVariant }>`\n  ${variant({ variants: TOOLTIP_VARIANTS })}\n`\n\nconst compose = (a?: (...args: any) => any, b?: (...args: any) => any) => {\n  return (...args) => {\n    a?.(...args)\n    b?.(...args)\n  }\n}\n"],"mappings":"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"}

package/dist/esm/elements/Tooltip/Tooltip.story.js

@@ -0,0 +1,253 @@
+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 = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
+import { fn } from "@storybook/test";
+import React, { useState } from "react";
+import { States } from "storybook-states";
+import HelpIcon from "@artsy/icons/HelpIcon";
+import { Position, POSITION } from "../../utils/usePosition";
+import { Box } from "../Box";
+import { Button } from "../Button";
+import { Clickable } from "../Clickable";
+import { Input } from "../Input";
+import { Spacer } from "../Spacer";
+import { Text } from "../Text";
+import { Tooltip, TooltipProps } from "./Tooltip";
+import { Stack } from "../Stack";
+import { Column, GridColumns } from "../GridColumns";
+import { STORYBOOK_PROPS_BLOCKLIST } from "../../utils/storybookBlocklist";
+var CONTENT = "Lorem ipsum dolor sit amet consectetur adipisicing elit?";
+export default {
+  component: Tooltip,
+  title: "Components/Tooltip",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "A tooltip component for displaying contextual information on hover or focus with various placement options."
+      }
+    },
+    controls: {
+      exclude: STORYBOOK_PROPS_BLOCKLIST
+    }
+  }
+};
+export var Default = {
+  args: {
+    content: CONTENT,
+    children: /*#__PURE__*/React.createElement(Text, {
+      variant: "xs",
+      textAlign: "center",
+      p: 1,
+      bg: "mono100",
+      color: "mono0"
+    }, "This text has a tooltip")
+  }
+};
+export var WithClickable = {
+  tags: ["!autodocs"],
+  args: {
+    content: CONTENT,
+    children: /*#__PURE__*/React.createElement(Clickable, {
+      onClick: fn()
+    }, /*#__PURE__*/React.createElement(Text, {
+      variant: "xs",
+      textAlign: "center",
+      p: 1,
+      bg: "mono100",
+      color: "mono0"
+    }, "This text has a tooltip and is clickable"))
+  },
+  parameters: {
+    chromatic: {
+      disable: true
+    }
+  }
+};
+export var Placement = {
+  tags: ["!autodocs"],
+  render: function render() {
+    return /*#__PURE__*/React.createElement(States, {
+      states: Object.keys(POSITION).map(function (placement) {
+        return {
+          placement: placement
+        };
+      })
+    }, function (props) {
+      return /*#__PURE__*/React.createElement(Tooltip, _extends({
+        content: JSON.stringify(props),
+        variant: "defaultDark",
+        pointer: true,
+        visible: true
+      }, props), /*#__PURE__*/React.createElement(Text, {
+        variant: "xs",
+        textAlign: "center",
+        p: 1,
+        maxWidth: "50%",
+        mx: "auto",
+        bg: "mono10"
+      }, JSON.stringify(props)));
+    });
+  }
+};
+export var IconExample = {
+  tags: ["!autodocs"],
+  render: function render() {
+    return /*#__PURE__*/React.createElement(Text, {
+      variant: "xs",
+      display: "flex",
+      alignItems: "center",
+      lineHeight: 1
+    }, "Hover (or focus) the icon to display the tooltip.", " ", /*#__PURE__*/React.createElement(Tooltip, {
+      content: CONTENT,
+      placement: "bottom"
+    }, /*#__PURE__*/React.createElement(Box, {
+      as: "span",
+      style: {
+        lineHeight: 0
+      }
+    }, /*#__PURE__*/React.createElement(HelpIcon, {
+      ml: 0.5
+    }))));
+  }
+};
+export var ExternalControl = {
+  tags: ["!autodocs"],
+  render: function render() {
+    var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      visible = _useState2[0],
+      setVisible = _useState2[1];
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip, {
+      content: CONTENT,
+      visible: visible,
+      pointer: true,
+      variant: "defaultDark"
+    }, /*#__PURE__*/React.createElement(Button, {
+      variant: "secondaryBlack",
+      onClick: function onClick() {
+        setVisible(function (visible) {
+          return !visible;
+        });
+      }
+    }, visible ? "Click to hide tooltip" : "Click to show tooltip")));
+  }
+};
+export var PointerCentering = {
+  tags: ["!autodocs"],
+  render: function render() {
+    var _useState3 = useState("top"),
+      _useState4 = _slicedToArray(_useState3, 2),
+      placement = _useState4[0],
+      setPlacement = _useState4[1];
+    var _useState5 = useState(50),
+      _useState6 = _slicedToArray(_useState5, 2),
+      size = _useState6[0],
+      setSize = _useState6[1];
+    return /*#__PURE__*/React.createElement(React.Fragment, null, Object.keys(POSITION).map(function (placement) {
+      return /*#__PURE__*/React.createElement(Button, {
+        key: placement,
+        mr: 1,
+        mb: 1,
+        variant: "secondaryBlack",
+        size: "small",
+        onMouseOver: function onMouseOver() {
+          setPlacement(placement);
+        }
+      }, placement);
+    }), /*#__PURE__*/React.createElement(Input, {
+      type: "range",
+      min: 0,
+      max: 200,
+      value: size,
+      onChange: function onChange(e) {
+        setSize(parseInt(e.target.value));
+      }
+    }), /*#__PURE__*/React.createElement(Spacer, {
+      y: 12
+    }), /*#__PURE__*/React.createElement(Tooltip, {
+      content: CONTENT,
+      pointer: true,
+      visible: true,
+      variant: "defaultDark",
+      placement: placement
+    }, /*#__PURE__*/React.createElement(Box, {
+      bg: "mono10",
+      width: size,
+      height: size,
+      mx: "auto",
+      position: "relative"
+    }, /*#__PURE__*/React.createElement(Box, {
+      height: "1px",
+      bg: "red100",
+      width: "100%",
+      position: "absolute",
+      top: "50%",
+      mt: "-0.5px"
+    }), /*#__PURE__*/React.createElement(Box, {
+      height: "100%",
+      width: "1px",
+      bg: "red100",
+      position: "absolute",
+      left: "50%",
+      ml: "-0.5px"
+    }))));
+  }
+};
+export var StressTest = {
+  tags: ["!autodocs"],
+  render: function render() {
+    return /*#__PURE__*/React.createElement(Stack, {
+      gap: 1
+    }, Array.from({
+      length: 3000
+    }).map(function (_, i) {
+      return /*#__PURE__*/React.createElement(Tooltip, {
+        key: i,
+        content: CONTENT,
+        pointer: true,
+        variant: "defaultDark",
+        placement: "right"
+      }, /*#__PURE__*/React.createElement(Text, {
+        variant: "xs",
+        textAlign: "center",
+        width: 40,
+        height: 40,
+        mx: "auto",
+        bg: "mono10",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      }, i));
+    }));
+  },
+  parameters: {
+    chromatic: {
+      disable: true
+    }
+  }
+};
+export var PositioningBug = {
+  tags: ["!autodocs"],
+  render: function render() {
+    return /*#__PURE__*/React.createElement(GridColumns, null, /*#__PURE__*/React.createElement(Column, {
+      span: 9
+    }, "Example left-column content"), /*#__PURE__*/React.createElement(Column, {
+      span: 3,
+      display: "flex",
+      flexDirection: "column",
+      gap: 2
+    }, /*#__PURE__*/React.createElement(Tooltip, {
+      content: "Example content"
+    }, /*#__PURE__*/React.createElement(Button, {
+      size: "small"
+    }, "Example tooltip trigger")), /*#__PURE__*/React.createElement(Text, {
+      variant: "xs"
+    }, "There should not be a horizontal scrollbar")));
+  }
+};
+//# sourceMappingURL=Tooltip.story.js.map

package/dist/esm/elements/Tooltip/Tooltip.story.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.story.js","names":["fn","React","useState","States","HelpIcon","Position","POSITION","Box","Button","Clickable","Input","Spacer","Text","Tooltip","TooltipProps","Stack","Column","GridColumns","STORYBOOK_PROPS_BLOCKLIST","CONTENT","component","title","tags","parameters","docs","description","controls","exclude","Default","args","content","children","createElement","variant","textAlign","p","bg","color","WithClickable","onClick","chromatic","disable","Placement","render","states","Object","keys","map","placement","props","_extends","JSON","stringify","pointer","visible","maxWidth","mx","IconExample","display","alignItems","lineHeight","as","style","ml","ExternalControl","_useState","_useState2","_slicedToArray","setVisible","Fragment","PointerCentering","_useState3","_useState4","setPlacement","_useState5","_useState6","size","setSize","key","mr","mb","onMouseOver","type","min","max","value","onChange","e","parseInt","target","y","width","height","position","top","mt","left","StressTest","gap","Array","from","length","_","i","justifyContent","PositioningBug","span","flexDirection"],"sources":["../../../../src/elements/Tooltip/Tooltip.story.tsx"],"sourcesContent":["import { fn } from \"@storybook/test\"\nimport React, { useState } from \"react\"\nimport { States } from \"storybook-states\"\nimport HelpIcon from \"@artsy/icons/HelpIcon\"\nimport { Position, POSITION } from \"../../utils/usePosition\"\nimport { Box } from \"../Box\"\nimport { Button } from \"../Button\"\nimport { Clickable } from \"../Clickable\"\nimport { Input } from \"../Input\"\nimport { Spacer } from \"../Spacer\"\nimport { Text } from \"../Text\"\nimport { Tooltip, TooltipProps } from \"./Tooltip\"\nimport { Stack } from \"../Stack\"\nimport { Column, GridColumns } from \"../GridColumns\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nconst CONTENT = \"Lorem ipsum dolor sit amet consectetur adipisicing elit?\"\n\nexport default {\n  component: Tooltip,\n  title: \"Components/Tooltip\",\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"A tooltip component for displaying contextual information on hover or focus with various placement options.\",\n      },\n    },\n    controls: {\n      exclude: STORYBOOK_PROPS_BLOCKLIST,\n    },\n  },\n}\n\nexport const Default = {\n  args: {\n    content: CONTENT,\n    children: (\n      <Text variant=\"xs\" textAlign=\"center\" p={1} bg=\"mono100\" color=\"mono0\">\n        This text has a tooltip\n      </Text>\n    ),\n  },\n}\n\nexport const WithClickable = {\n  tags: [\"!autodocs\"],\n  args: {\n    content: CONTENT,\n    children: (\n      <Clickable onClick={fn()}>\n        <Text variant=\"xs\" textAlign=\"center\" p={1} bg=\"mono100\" color=\"mono0\">\n          This text has a tooltip and is clickable\n        </Text>\n      </Clickable>\n    ),\n  },\n  parameters: { chromatic: { disable: true } },\n}\n\nexport const Placement = {\n  tags: [\"!autodocs\"],\n  render: () => {\n    return (\n      <States<Partial<TooltipProps>>\n        states={Object.keys(POSITION).map((placement) => ({\n          placement: placement as Position,\n        }))}\n      >\n        {(props) => {\n          return (\n            <Tooltip\n              content={JSON.stringify(props)}\n              variant=\"defaultDark\"\n              pointer\n              visible\n              {...props}\n            >\n              <Text\n                variant=\"xs\"\n                textAlign=\"center\"\n                p={1}\n                maxWidth=\"50%\"\n                mx=\"auto\"\n                bg=\"mono10\"\n              >\n                {JSON.stringify(props)}\n              </Text>\n            </Tooltip>\n          )\n        }}\n      </States>\n    )\n  },\n}\n\nexport const IconExample = {\n  tags: [\"!autodocs\"],\n  render: () => {\n    return (\n      <Text variant=\"xs\" display=\"flex\" alignItems=\"center\" lineHeight={1}>\n        Hover (or focus) the icon to display the tooltip.{\" \"}\n        <Tooltip content={CONTENT} placement=\"bottom\">\n          {/* Icons don't forwardRefs so we have to wrap in a span */}\n          <Box as=\"span\" style={{ lineHeight: 0 }}>\n            <HelpIcon ml={0.5} />\n          </Box>\n        </Tooltip>\n      </Text>\n    )\n  },\n}\n\nexport const ExternalControl = {\n  tags: [\"!autodocs\"],\n  render: () => {\n    const [visible, setVisible] = useState(false)\n\n    return (\n      <>\n        <Tooltip\n          content={CONTENT}\n          visible={visible}\n          pointer\n          variant=\"defaultDark\"\n        >\n          <Button\n            variant=\"secondaryBlack\"\n            onClick={() => {\n              setVisible((visible) => !visible)\n            }}\n          >\n            {visible ? \"Click to hide tooltip\" : \"Click to show tooltip\"}\n          </Button>\n        </Tooltip>\n      </>\n    )\n  },\n}\n\nexport const PointerCentering = {\n  tags: [\"!autodocs\"],\n  render: () => {\n    const [placement, setPlacement] = useState<Position>(\"top\")\n    const [size, setSize] = useState(50)\n\n    return (\n      <>\n        {Object.keys(POSITION).map((placement) => {\n          return (\n            <Button\n              key={placement}\n              mr={1}\n              mb={1}\n              variant=\"secondaryBlack\"\n              size=\"small\"\n              onMouseOver={() => {\n                setPlacement(placement as Position)\n              }}\n            >\n              {placement}\n            </Button>\n          )\n        })}\n\n        <Input\n          type=\"range\"\n          min={0}\n          max={200}\n          value={size}\n          onChange={(e) => {\n            setSize(parseInt(e.target.value))\n          }}\n        />\n\n        <Spacer y={12} />\n\n        <Tooltip\n          content={CONTENT}\n          pointer\n          visible\n          variant=\"defaultDark\"\n          placement={placement}\n        >\n          <Box\n            bg=\"mono10\"\n            width={size}\n            height={size}\n            mx=\"auto\"\n            position=\"relative\"\n          >\n            <Box\n              height=\"1px\"\n              bg=\"red100\"\n              width=\"100%\"\n              position=\"absolute\"\n              top=\"50%\"\n              mt=\"-0.5px\"\n            />\n\n            <Box\n              height=\"100%\"\n              width=\"1px\"\n              bg=\"red100\"\n              position=\"absolute\"\n              left=\"50%\"\n              ml=\"-0.5px\"\n            />\n          </Box>\n        </Tooltip>\n      </>\n    )\n  },\n}\n\nexport const StressTest = {\n  tags: [\"!autodocs\"],\n  render: () => {\n    return (\n      <Stack gap={1}>\n        {Array.from({ length: 3000 }).map((_, i) => {\n          return (\n            <Tooltip\n              key={i}\n              content={CONTENT}\n              pointer\n              variant=\"defaultDark\"\n              placement=\"right\"\n            >\n              <Text\n                variant=\"xs\"\n                textAlign=\"center\"\n                width={40}\n                height={40}\n                mx=\"auto\"\n                bg=\"mono10\"\n                display=\"flex\"\n                alignItems=\"center\"\n                justifyContent=\"center\"\n              >\n                {i}\n              </Text>\n            </Tooltip>\n          )\n        })}\n      </Stack>\n    )\n  },\n  parameters: { chromatic: { disable: true } },\n}\n\nexport const PositioningBug = {\n  tags: [\"!autodocs\"],\n  render: () => {\n    return (\n      <GridColumns>\n        <Column span={9}>Example left-column content</Column>\n        <Column span={3} display=\"flex\" flexDirection=\"column\" gap={2}>\n          <Tooltip content=\"Example content\">\n            <Button size=\"small\">Example tooltip trigger</Button>\n          </Tooltip>\n\n          <Text variant=\"xs\">There should not be a horizontal scrollbar</Text>\n        </Column>\n      </GridColumns>\n    )\n  },\n}\n"],"mappings":"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"}

package/dist/esm/elements/Tooltip/index.js

@@ -0,0 +1,2 @@
+export * from "./Tooltip";
+//# sourceMappingURL=index.js.map

package/dist/esm/elements/Tooltip/index.js.map

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

package/dist/esm/elements/VisuallyHidden/VisuallyHidden.js

@@ -0,0 +1,31 @@
+import styled, { css } from "styled-components";
+import { Box, BoxProps } from "../Box";
+
+/**
+ * Visually the hide element, but present in DOM so that it is accessible
+ * for screen readers.
+ * See:
+ * https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/
+ * https://webaim.org/techniques/css/invisiblecontent/
+ * https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html
+ */
+export var visuallyHiddenMixin = css(["clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px;"]);
+
+/** Reset to `inherit` all properties that cause visually-hidden */
+export var visuallyUnhiddenMixin = css(["clip:inherit;clip-path:inherit;height:inherit;overflow:inherit;position:inherit;white-space:inherit;width:inherit;"]);
+/**
+ * Visually the hide element, but present in DOM so that it is accessible
+ * for screen readers.
+ * See:
+ * https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/
+ * https://webaim.org/techniques/css/invisiblecontent/
+ * https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html
+ */
+export var VisuallyHidden = styled(Box).withConfig({
+  displayName: "VisuallyHidden",
+  componentId: "sc-14bjfob-0"
+})(["", " ", ""], visuallyHiddenMixin, function (_ref) {
+  var show = _ref.show;
+  return show && visuallyUnhiddenMixin;
+});
+//# sourceMappingURL=VisuallyHidden.js.map

package/dist/esm/elements/VisuallyHidden/VisuallyHidden.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VisuallyHidden.js","names":["styled","css","Box","BoxProps","visuallyHiddenMixin","visuallyUnhiddenMixin","VisuallyHidden","withConfig","displayName","componentId","_ref","show"],"sources":["../../../../src/elements/VisuallyHidden/VisuallyHidden.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\"\nimport { Box, BoxProps } from \"../Box\"\n\n/**\n * Visually the hide element, but present in DOM so that it is accessible\n * for screen readers.\n * See:\n * https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/\n * https://webaim.org/techniques/css/invisiblecontent/\n * https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html\n */\nexport const visuallyHiddenMixin = css`\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n`\n\n/** Reset to `inherit` all properties that cause visually-hidden */\nexport const visuallyUnhiddenMixin = css`\n  clip: inherit;\n  clip-path: inherit;\n  height: inherit;\n  overflow: inherit;\n  position: inherit;\n  white-space: inherit;\n  width: inherit;\n`\n\nexport interface VisuallyHiddenProps extends BoxProps {\n  show?: boolean\n}\n\n/**\n * Visually the hide element, but present in DOM so that it is accessible\n * for screen readers.\n * See:\n * https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/\n * https://webaim.org/techniques/css/invisiblecontent/\n * https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html\n */\nexport const VisuallyHidden = styled(Box)<VisuallyHiddenProps>`\n  ${visuallyHiddenMixin}\n  ${({ show }) => show && visuallyUnhiddenMixin}\n`\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,GAAG,EAAEC,QAAQ;;AAEtB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,mBAAmB,GAAGH,GAAG,wHAQrC;;AAED;AACA,OAAO,IAAMI,qBAAqB,GAAGJ,GAAG,wHAQvC;AAMD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMK,cAAc,GAAGN,MAAM,CAACE,GAAG,CAAC,CAAAK,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,kBACrCL,mBAAmB,EACnB,UAAAM,IAAA;EAAA,IAAGC,IAAI,GAAAD,IAAA,CAAJC,IAAI;EAAA,OAAOA,IAAI,IAAIN,qBAAqB;AAAA,EAC9C"}

package/dist/esm/elements/VisuallyHidden/index.js

@@ -0,0 +1,2 @@
+export * from "./VisuallyHidden";
+//# sourceMappingURL=index.js.map

package/dist/esm/elements/VisuallyHidden/index.js.map

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

package/dist/esm/elements/index.js

@@ -0,0 +1,71 @@
+export * from "./AutocompleteInput";
+export * from "./Avatar";
+export * from "./Banner";
+export * from "./BaseTabs";
+export * from "./BorderBox";
+export * from "./BorderedRadio";
+export * from "./Box";
+export * from "./Breadcrumbs";
+export * from "./Button";
+export * from "./Cards";
+export * from "./Carousel";
+export * from "./CarouselBar";
+export * from "./Checkbox";
+export * from "./CleanTag";
+export * from "./Clickable";
+export * from "./Collapse";
+export * from "./CSSGrid";
+export * from "./Drawer";
+export * from "./Dropdown";
+export * from "./EntityHeader";
+export * from "./Expandable";
+export * from "./FilterSelect";
+export * from "./Flex";
+export * from "./FullBleed";
+export * from "./GridColumns";
+export * from "./HorizontalOverflow";
+export * from "./HTML";
+export * from "./Image";
+export * from "./Input";
+export * from "./Join";
+export * from "./Label";
+export * from "./LabeledInput";
+export * from "./Link";
+export * from "./Marquee";
+export * from "./Message";
+export * from "./Modal";
+export * from "./ModalDialog";
+export * from "./MultiSelect";
+export * from "./Pagination";
+export * from "./PasswordInput";
+export * from "./SelectInput";
+export * from "./Pill";
+export * from "./Popover";
+export * from "./ProgressBar";
+export * from "./ProgressDots";
+export * from "./Radio";
+export * from "./RadioGroup";
+export * from "./Range";
+export * from "./ReadMore";
+export * from "./ResponsiveBox";
+export * from "./Select";
+export * from "./Separator";
+export * from "./Shelf";
+export * from "./ShowMore";
+export * from "./Skeleton";
+export * from "./Skip";
+export * from "./Spacer";
+export * from "./Spinner";
+export * from "./StackableBorderBox";
+export * from "./Stepper";
+export * from "./Stack";
+export * from "./Sup";
+export * from "./Swiper";
+export * from "./Tabs";
+export * from "./Text";
+export * from "./TextArea";
+export * from "./Toasts";
+export * from "./Toggle";
+export * from "./Tooltip";
+export * from "./VisuallyHidden";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/elements/index.tsx"],"sourcesContent":["export * from \"./AutocompleteInput\"\nexport * from \"./Avatar\"\nexport * from \"./Banner\"\nexport * from \"./BaseTabs\"\nexport * from \"./BorderBox\"\nexport * from \"./BorderedRadio\"\nexport * from \"./Box\"\nexport * from \"./Breadcrumbs\"\nexport * from \"./Button\"\nexport * from \"./Cards\"\nexport * from \"./Carousel\"\nexport * from \"./CarouselBar\"\nexport * from \"./Checkbox\"\nexport * from \"./CleanTag\"\nexport * from \"./Clickable\"\nexport * from \"./Collapse\"\nexport * from \"./CSSGrid\"\nexport * from \"./Drawer\"\nexport * from \"./Dropdown\"\nexport * from \"./EntityHeader\"\nexport * from \"./Expandable\"\nexport * from \"./FilterSelect\"\nexport * from \"./Flex\"\nexport * from \"./FullBleed\"\nexport * from \"./GridColumns\"\nexport * from \"./HorizontalOverflow\"\nexport * from \"./HTML\"\nexport * from \"./Image\"\nexport * from \"./Input\"\nexport * from \"./Join\"\nexport * from \"./Label\"\nexport * from \"./LabeledInput\"\nexport * from \"./Link\"\nexport * from \"./Marquee\"\nexport * from \"./Message\"\nexport * from \"./Modal\"\nexport * from \"./ModalDialog\"\nexport * from \"./MultiSelect\"\nexport * from \"./Pagination\"\nexport * from \"./PasswordInput\"\nexport * from \"./SelectInput\"\nexport * from \"./Pill\"\nexport * from \"./Popover\"\nexport * from \"./ProgressBar\"\nexport * from \"./ProgressDots\"\nexport * from \"./Radio\"\nexport * from \"./RadioGroup\"\nexport * from \"./Range\"\nexport * from \"./ReadMore\"\nexport * from \"./ResponsiveBox\"\nexport * from \"./Select\"\nexport * from \"./Separator\"\nexport * from \"./Shelf\"\nexport * from \"./ShowMore\"\nexport * from \"./Skeleton\"\nexport * from \"./Skip\"\nexport * from \"./Spacer\"\nexport * from \"./Spinner\"\nexport * from \"./StackableBorderBox\"\nexport * from \"./Stepper\"\nexport * from \"./Stack\"\nexport * from \"./Sup\"\nexport * from \"./Swiper\"\nexport * from \"./Tabs\"\nexport * from \"./Text\"\nexport * from \"./TextArea\"\nexport * from \"./Toasts\"\nexport * from \"./Toggle\"\nexport * from \"./Tooltip\"\nexport * from \"./VisuallyHidden\"\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}

package/dist/esm/helpers/color.js

@@ -0,0 +1,13 @@
+import { Color, THEME } from "../Theme";
+
+/**
+ * A helper to easily access colors when not in a styled-components or
+ * styled-systems context.
+ *
+ * @deprecated use component `color` or `borderColor` props, or `themeGet('colors.colorName')`
+ */
+export var color = function color(colorKey) {
+  var _THEME$colors$colorKe;
+  return (_THEME$colors$colorKe = THEME.colors[colorKey]) !== null && _THEME$colors$colorKe !== void 0 ? _THEME$colors$colorKe : colorKey;
+};
+//# sourceMappingURL=color.js.map

package/dist/esm/helpers/color.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color.js","names":["Color","THEME","color","colorKey","_THEME$colors$colorKe","colors"],"sources":["../../../src/helpers/color.ts"],"sourcesContent":["import { Color, THEME } from \"../Theme\"\n\n/**\n * A helper to easily access colors when not in a styled-components or\n * styled-systems context.\n *\n * @deprecated use component `color` or `borderColor` props, or `themeGet('colors.colorName')`\n */\nexport const color = (colorKey: Color | \"currentColor\") =>\n  THEME.colors[colorKey] ?? colorKey\n"],"mappings":"AAAA,SAASA,KAAK,EAAEC,KAAK;;AAErB;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,KAAK,GAAG,SAARA,KAAKA,CAAIC,QAAgC;EAAA,IAAAC,qBAAA;EAAA,QAAAA,qBAAA,GACpDH,KAAK,CAACI,MAAM,CAACF,QAAQ,CAAC,cAAAC,qBAAA,cAAAA,qBAAA,GAAID,QAAQ;AAAA"}

package/dist/esm/helpers/flattenChildren.js

@@ -0,0 +1,24 @@
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+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 _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+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; }
+import React from "react";
+
+/**
+ * Convert a fragment or nested fragment into an array of elements
+ */
+var _flattenChildren = function flattenChildren(children) {
+  var xs = React.Children.toArray(children).filter(React.isValidElement);
+
+  // @ts-expect-error  MIGRATE_STRICT_MODE
+  return xs.reduce(function (acc, child) {
+    if (child.type === React.Fragment) {
+      return acc.concat(_flattenChildren(child.props.children));
+    }
+    return [].concat(_toConsumableArray(acc), [child]);
+  }, []);
+};
+export { _flattenChildren as flattenChildren };
+//# sourceMappingURL=flattenChildren.js.map

package/dist/esm/helpers/flattenChildren.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flattenChildren.js","names":["React","flattenChildren","children","xs","Children","toArray","filter","isValidElement","reduce","acc","child","type","Fragment","concat","props","_toConsumableArray","_flattenChildren"],"sources":["../../../src/helpers/flattenChildren.ts"],"sourcesContent":["import React from \"react\"\n\n/**\n * Convert a fragment or nested fragment into an array of elements\n */\nexport const flattenChildren = <T extends React.ReactElement>(\n  children: React.ReactNode\n): T[] => {\n  const xs = React.Children.toArray(children).filter(React.isValidElement)\n\n  // @ts-expect-error  MIGRATE_STRICT_MODE\n  return xs.reduce((acc, child: T) => {\n    if (child.type === React.Fragment) {\n      return acc.concat(flattenChildren(child.props.children))\n    }\n\n    return [...acc, child]\n  }, [] as T[])\n}\n"],"mappings":";;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;;AAEzB;AACA;AACA;AACO,IAAMC,gBAAe,GAAG,SAAlBA,eAAeA,CAC1BC,QAAyB,EACjB;EACR,IAAMC,EAAE,GAAGH,KAAK,CAACI,QAAQ,CAACC,OAAO,CAACH,QAAQ,CAAC,CAACI,MAAM,CAACN,KAAK,CAACO,cAAc,CAAC;;EAExE;EACA,OAAOJ,EAAE,CAACK,MAAM,CAAC,UAACC,GAAG,EAAEC,KAAQ,EAAK;IAClC,IAAIA,KAAK,CAACC,IAAI,KAAKX,KAAK,CAACY,QAAQ,EAAE;MACjC,OAAOH,GAAG,CAACI,MAAM,CAACZ,gBAAe,CAACS,KAAK,CAACI,KAAK,CAACZ,QAAQ,CAAC,CAAC;IAC1D;IAEA,UAAAW,MAAA,CAAAE,kBAAA,CAAWN,GAAG,IAAEC,KAAK;EACvB,CAAC,EAAE,EAAE,CAAQ;AACf,CAAC;AAAA,SAAAM,gBAAA,IAAAf,eAAA"}

package/dist/esm/helpers/index.js

@@ -0,0 +1,8 @@
+export * from "./isText";
+export * from "./color";
+export * from "./injectGlobalStyles";
+export * from "./media";
+export * from "./space";
+export * from "./visuallyDisableScrollbar";
+export * from "./transition";
+//# sourceMappingURL=index.js.map

package/dist/esm/helpers/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/helpers/index.ts"],"sourcesContent":["export * from \"./isText\"\nexport * from \"./color\"\nexport * from \"./injectGlobalStyles\"\nexport * from \"./media\"\nexport * from \"./space\"\nexport * from \"./visuallyDisableScrollbar\"\nexport * from \"./transition\"\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA"}