@artsy/palette 18.4.2 → 18.5.0

package/CHANGELOG.md

@@ -1,3 +1,20 @@
+# v18.5.0 (Thu Oct 28 2021)
+
+#### 🚀  Enhancement
+
+- feat(toasts): supports retracting toasts [#1065](https://github.com/artsy/palette/pull/1065) ([@dzucconi](https://github.com/dzucconi))
+
+#### 🐛  Bug Fix
+
+- chore(chromatic): disables stories ([@dzucconi](https://github.com/dzucconi))
+- feat(toasts): supports retracting toasts ([@dzucconi](https://github.com/dzucconi))
+
+#### Authors: 1
+
+- Damon ([@dzucconi](https://github.com/dzucconi))
+
+---
+
 # v18.4.2 (Mon Oct 25 2021)
 
 #### 🐛  Bug Fix

package/dist/elements/Spinner/Spinner.story.d.ts

@@ -8,5 +8,10 @@ export declare const SpinnerWithDelayedShow: {
     (): JSX.Element;
     story: {
         name: string;
+        parameters: {
+            chromatic: {
+                disable: boolean;
+            };
+        };
     };
 };

package/dist/elements/Spinner/Spinner.story.js

@@ -32,6 +32,11 @@ var SpinnerWithDelayedShow = function SpinnerWithDelayedShow() {
 exports.SpinnerWithDelayedShow = SpinnerWithDelayedShow;
 SpinnerWithDelayedShow.displayName = "SpinnerWithDelayedShow";
 SpinnerWithDelayedShow.story = {
-  name: "Spinner with delayed show"
+  name: "Spinner with delayed show",
+  parameters: {
+    chromatic: {
+      disable: true
+    }
+  }
 };
 //# sourceMappingURL=Spinner.story.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Spinner/Spinner.story.tsx"],"names":["title","DefaultSpinner","SpinnerWithDelayedShow","story","name"],"mappings":";;;;;;;AAAA;;AACA;;;;eAEe;AACbA,EAAAA,KAAK,EAAE;AADM,C;;;AAIR,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,GAAM;AAClC,sBAAO,6BAAC,gBAAD,OAAP;AACD,CAFM;;;AAAMA,c;;AAIN,IAAMC,sBAAsB,GAAG,SAAzBA,sBAAyB,GAAM;AAC1C,sBAAO,6BAAC,gBAAD;AAAS,IAAA,KAAK,EAAE;AAAhB,IAAP;AACD,CAFM;;;AAAMA,sB;AAIbA,sBAAsB,CAACC,KAAvB,GAA+B;AAC7BC,EAAAA,IAAI,EAAE;AADuB,CAA/B","sourcesContent":["import React from \"react\"\nimport { Spinner } from \"./Spinner\"\n\nexport default {\n  title: \"Components/Spinner\",\n}\n\nexport const DefaultSpinner = () => {\n  return <Spinner />\n}\n\nexport const SpinnerWithDelayedShow = () => {\n  return <Spinner delay={1000} />\n}\n\nSpinnerWithDelayedShow.story = {\n  name: \"Spinner with delayed show\",\n}\n"],"file":"Spinner.story.js"}
+{"version":3,"sources":["../../../src/elements/Spinner/Spinner.story.tsx"],"names":["title","DefaultSpinner","SpinnerWithDelayedShow","story","name","parameters","chromatic","disable"],"mappings":";;;;;;;AAAA;;AACA;;;;eAEe;AACbA,EAAAA,KAAK,EAAE;AADM,C;;;AAIR,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,GAAM;AAClC,sBAAO,6BAAC,gBAAD,OAAP;AACD,CAFM;;;AAAMA,c;;AAIN,IAAMC,sBAAsB,GAAG,SAAzBA,sBAAyB,GAAM;AAC1C,sBAAO,6BAAC,gBAAD;AAAS,IAAA,KAAK,EAAE;AAAhB,IAAP;AACD,CAFM;;;AAAMA,sB;AAIbA,sBAAsB,CAACC,KAAvB,GAA+B;AAC7BC,EAAAA,IAAI,EAAE,2BADuB;AAE7BC,EAAAA,UAAU,EAAE;AAAEC,IAAAA,SAAS,EAAE;AAAEC,MAAAA,OAAO,EAAE;AAAX;AAAb;AAFiB,CAA/B","sourcesContent":["import React from \"react\"\nimport { Spinner } from \"./Spinner\"\n\nexport default {\n  title: \"Components/Spinner\",\n}\n\nexport const DefaultSpinner = () => {\n  return <Spinner />\n}\n\nexport const SpinnerWithDelayedShow = () => {\n  return <Spinner delay={1000} />\n}\n\nSpinnerWithDelayedShow.story = {\n  name: \"Spinner with delayed show\",\n  parameters: { chromatic: { disable: true } },\n}\n"],"file":"Spinner.story.js"}

package/dist/elements/Toasts/Toast.d.ts

@@ -2,13 +2,14 @@ import React from "react";
 import { BoxProps } from "../Box";
 export declare type ToastVariant = keyof typeof TOAST_VARIANTS;
 export interface ToastProps extends BoxProps {
+    id: string;
     action?: {
         label: string;
         onClick(): void;
     };
     description?: string;
     message: string;
-    onClose?(): void;
+    onClose?(id: string): void;
     variant?: ToastVariant;
 }
 export declare const Toast: React.FC<ToastProps>;

package/dist/elements/Toasts/Toast.js

@@ -28,11 +28,16 @@ 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 Toast = function Toast(_ref) {
-  var action = _ref.action,
+  var id = _ref.id,
+      action = _ref.action,
       description = _ref.description,
       message = _ref.message,
       onClose = _ref.onClose,
-      rest = _objectWithoutProperties(_ref, ["action", "description", "message", "onClose"]);
+      rest = _objectWithoutProperties(_ref, ["id", "action", "description", "message", "onClose"]);
+
+  var handleClick = function handleClick() {
+    onClose === null || onClose === void 0 ? void 0 : onClose(id);
+  };
 
   return /*#__PURE__*/_react.default.createElement(Container, _extends({
     width: "100%",
@@ -42,10 +47,10 @@ var Toast = function Toast(_ref) {
     color: "white100",
     role: "button",
     tabIndex: 0,
-    onClick: onClose,
+    onClick: handleClick,
     onKeyPress: function onKeyPress(event) {
       if (event.key === "Enter" || event.key === " ") {
-        onClose === null || onClose === void 0 ? void 0 : onClose();
+        onClose === null || onClose === void 0 ? void 0 : onClose(id);
       }
     },
     style: {
@@ -91,7 +96,7 @@ exports.TOAST_VARIANTS = TOAST_VARIANTS;
 var Container = (0, _styledComponents.default)(_Box.Box).withConfig({
   displayName: "Toast__Container",
   componentId: "sc-1c067m4-0"
-})(["", ""], (0, _styledSystem.variant)({
+})(["", " user-select:none;"], (0, _styledSystem.variant)({
   variants: TOAST_VARIANTS
 }));
 //# sourceMappingURL=Toast.js.map

package/dist/elements/Toasts/Toast.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Toasts/Toast.tsx"],"names":["Toast","action","description","message","onClose","rest","event","key","cursor","onClick","label","TOAST_VARIANTS","backgroundColor","color","alert","success","error","Container","Box","variants"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;AAeO,IAAMA,KAA2B,GAAG,SAA9BA,KAA8B,OAMrC;AAAA,MALJC,MAKI,QALJA,MAKI;AAAA,MAJJC,WAII,QAJJA,WAII;AAAA,MAHJC,OAGI,QAHJA,OAGI;AAAA,MAFJC,OAEI,QAFJA,OAEI;AAAA,MADDC,IACC;;AACJ,sBACE,6BAAC,SAAD;AACE,IAAA,KAAK,EAAC,MADR;AAEE,IAAA,EAAE,EAAE,CAFN;AAGE,IAAA,EAAE,EAAE,CAHN;AAIE,IAAA,EAAE,EAAC,UAJL;AAKE,IAAA,KAAK,EAAC,UALR;AAME,IAAA,IAAI,EAAC,QANP;AAOE,IAAA,QAAQ,EAAE,CAPZ;AAQE,IAAA,OAAO,EAAED,OARX;AASE,IAAA,UAAU,EAAE,oBAACE,KAAD,EAAW;AACrB,UAAIA,KAAK,CAACC,GAAN,KAAc,OAAd,IAAyBD,KAAK,CAACC,GAAN,KAAc,GAA3C,EAAgD;AAC9CH,QAAAA,OAAO,SAAP,IAAAA,OAAO,WAAP,YAAAA,OAAO;AACR;AACF,KAbH;AAcE,IAAA,KAAK,EAAE;AAAEI,MAAAA,MAAM,EAAE;AAAV;AAdT,KAeMH,IAfN,gBAiBE,6BAAC,UAAD;AAAM,IAAA,UAAU,EAAC,YAAjB;AAA8B,IAAA,cAAc,EAAC;AAA7C,kBACE,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC;AAAd,KAAoBF,OAApB,CADF,EAGGF,MAAM,iBACL,6BAAC,oBAAD;AACE,IAAA,OAAO,EAAEA,MAAM,CAACQ,OADlB;AAEE,IAAA,cAAc,EAAC,WAFjB;AAGE,IAAA,KAAK,EAAC;AAHR,kBAKE,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC;AAAd,KAAoBR,MAAM,CAACS,KAA3B,CALF,CAJJ,CAjBF,EA+BGR,WAAW,iBAAI,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC;AAAd,KAAoBA,WAApB,CA/BlB,CADF;AAmCD,CA1CM;;;AAAMF,K;AA4CN,IAAMW,cAAc,GAAG;AAC5BR,EAAAA,OAAO,EAAE;AACPS,IAAAA,eAAe,EAAE,UADV;AAEPC,IAAAA,KAAK,EAAE;AAFA,GADmB;AAK5BC,EAAAA,KAAK,EAAE;AACLF,IAAAA,eAAe,EAAE,SADZ;AAELC,IAAAA,KAAK,EAAE;AAFF,GALqB;AAS5BE,EAAAA,OAAO,EAAE;AACPH,IAAAA,eAAe,EAAE,UADV;AAEPC,IAAAA,KAAK,EAAE;AAFA,GATmB;AAa5BG,EAAAA,KAAK,EAAE;AACLJ,IAAAA,eAAe,EAAE,QADZ;AAELC,IAAAA,KAAK,EAAE;AAFF;AAbqB,CAAvB;;AAmBP,IAAMI,SAAS,GAAG,+BAAOC,QAAP,CAAH;AAAA;AAAA;AAAA,aACX,2BAAQ;AAAEC,EAAAA,QAAQ,EAAER;AAAZ,CAAR,CADW,CAAf","sourcesContent":["import React from \"react\"\nimport styled from \"styled-components\"\nimport { variant } from \"styled-system\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Flex } from \"../Flex\"\nimport { Clickable } from \"../Clickable\"\nimport { Text } from \"../Text\"\n\nexport type ToastVariant = keyof typeof TOAST_VARIANTS\n\nexport interface ToastProps extends BoxProps {\n  action?: {\n    label: string\n    onClick(): void\n  }\n  description?: string\n  message: string\n  onClose?(): void\n  variant?: ToastVariant\n}\n\nexport const Toast: React.FC<ToastProps> = ({\n  action,\n  description,\n  message,\n  onClose,\n  ...rest\n}) => {\n  return (\n    <Container\n      width=\"100%\"\n      px={2}\n      py={1}\n      bg=\"black100\"\n      color=\"white100\"\n      role=\"button\"\n      tabIndex={0}\n      onClick={onClose}\n      onKeyPress={(event) => {\n        if (event.key === \"Enter\" || event.key === \" \") {\n          onClose?.()\n        }\n      }}\n      style={{ cursor: \"pointer\" }}\n      {...rest}\n    >\n      <Flex alignItems=\"flex-start\" justifyContent=\"space-between\">\n        <Text variant=\"md\">{message}</Text>\n\n        {action && (\n          <Clickable\n            onClick={action.onClick}\n            textDecoration=\"underline\"\n            color=\"rgba(255, 255, 255, 0.9)\"\n          >\n            <Text variant=\"xs\">{action.label}</Text>\n          </Clickable>\n        )}\n      </Flex>\n\n      {description && <Text variant=\"xs\">{description}</Text>}\n    </Container>\n  )\n}\n\nexport const TOAST_VARIANTS = {\n  message: {\n    backgroundColor: \"black100\",\n    color: \"white100\",\n  },\n  alert: {\n    backgroundColor: \"blue100\",\n    color: \"white100\",\n  },\n  success: {\n    backgroundColor: \"green100\",\n    color: \"white100\",\n  },\n  error: {\n    backgroundColor: \"red100\",\n    color: \"white100\",\n  },\n}\n\nconst Container = styled(Box)`\n  ${variant({ variants: TOAST_VARIANTS })}\n`\n"],"file":"Toast.js"}
+{"version":3,"sources":["../../../src/elements/Toasts/Toast.tsx"],"names":["Toast","id","action","description","message","onClose","rest","handleClick","event","key","cursor","onClick","label","TOAST_VARIANTS","backgroundColor","color","alert","success","error","Container","Box","variants"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;AAgBO,IAAMA,KAA2B,GAAG,SAA9BA,KAA8B,OAOrC;AAAA,MANJC,EAMI,QANJA,EAMI;AAAA,MALJC,MAKI,QALJA,MAKI;AAAA,MAJJC,WAII,QAJJA,WAII;AAAA,MAHJC,OAGI,QAHJA,OAGI;AAAA,MAFJC,OAEI,QAFJA,OAEI;AAAA,MADDC,IACC;;AACJ,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxBF,IAAAA,OAAO,SAAP,IAAAA,OAAO,WAAP,YAAAA,OAAO,CAAGJ,EAAH,CAAP;AACD,GAFD;;AAIA,sBACE,6BAAC,SAAD;AACE,IAAA,KAAK,EAAC,MADR;AAEE,IAAA,EAAE,EAAE,CAFN;AAGE,IAAA,EAAE,EAAE,CAHN;AAIE,IAAA,EAAE,EAAC,UAJL;AAKE,IAAA,KAAK,EAAC,UALR;AAME,IAAA,IAAI,EAAC,QANP;AAOE,IAAA,QAAQ,EAAE,CAPZ;AAQE,IAAA,OAAO,EAAEM,WARX;AASE,IAAA,UAAU,EAAE,oBAACC,KAAD,EAAW;AACrB,UAAIA,KAAK,CAACC,GAAN,KAAc,OAAd,IAAyBD,KAAK,CAACC,GAAN,KAAc,GAA3C,EAAgD;AAC9CJ,QAAAA,OAAO,SAAP,IAAAA,OAAO,WAAP,YAAAA,OAAO,CAAGJ,EAAH,CAAP;AACD;AACF,KAbH;AAcE,IAAA,KAAK,EAAE;AAAES,MAAAA,MAAM,EAAE;AAAV;AAdT,KAeMJ,IAfN,gBAiBE,6BAAC,UAAD;AAAM,IAAA,UAAU,EAAC,YAAjB;AAA8B,IAAA,cAAc,EAAC;AAA7C,kBACE,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC;AAAd,KAAoBF,OAApB,CADF,EAGGF,MAAM,iBACL,6BAAC,oBAAD;AACE,IAAA,OAAO,EAAEA,MAAM,CAACS,OADlB;AAEE,IAAA,cAAc,EAAC,WAFjB;AAGE,IAAA,KAAK,EAAC;AAHR,kBAKE,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC;AAAd,KAAoBT,MAAM,CAACU,KAA3B,CALF,CAJJ,CAjBF,EA+BGT,WAAW,iBAAI,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC;AAAd,KAAoBA,WAApB,CA/BlB,CADF;AAmCD,CA/CM;;;AAAMH,K;AAiDN,IAAMa,cAAc,GAAG;AAC5BT,EAAAA,OAAO,EAAE;AACPU,IAAAA,eAAe,EAAE,UADV;AAEPC,IAAAA,KAAK,EAAE;AAFA,GADmB;AAK5BC,EAAAA,KAAK,EAAE;AACLF,IAAAA,eAAe,EAAE,SADZ;AAELC,IAAAA,KAAK,EAAE;AAFF,GALqB;AAS5BE,EAAAA,OAAO,EAAE;AACPH,IAAAA,eAAe,EAAE,UADV;AAEPC,IAAAA,KAAK,EAAE;AAFA,GATmB;AAa5BG,EAAAA,KAAK,EAAE;AACLJ,IAAAA,eAAe,EAAE,QADZ;AAELC,IAAAA,KAAK,EAAE;AAFF;AAbqB,CAAvB;;AAmBP,IAAMI,SAAS,GAAG,+BAAOC,QAAP,CAAH;AAAA;AAAA;AAAA,+BACX,2BAAQ;AAAEC,EAAAA,QAAQ,EAAER;AAAZ,CAAR,CADW,CAAf","sourcesContent":["import React from \"react\"\nimport styled from \"styled-components\"\nimport { variant } from \"styled-system\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Flex } from \"../Flex\"\nimport { Clickable } from \"../Clickable\"\nimport { Text } from \"../Text\"\n\nexport type ToastVariant = keyof typeof TOAST_VARIANTS\n\nexport interface ToastProps extends BoxProps {\n  id: string\n  action?: {\n    label: string\n    onClick(): void\n  }\n  description?: string\n  message: string\n  onClose?(id: string): void\n  variant?: ToastVariant\n}\n\nexport const Toast: React.FC<ToastProps> = ({\n  id,\n  action,\n  description,\n  message,\n  onClose,\n  ...rest\n}) => {\n  const handleClick = () => {\n    onClose?.(id)\n  }\n\n  return (\n    <Container\n      width=\"100%\"\n      px={2}\n      py={1}\n      bg=\"black100\"\n      color=\"white100\"\n      role=\"button\"\n      tabIndex={0}\n      onClick={handleClick}\n      onKeyPress={(event) => {\n        if (event.key === \"Enter\" || event.key === \" \") {\n          onClose?.(id)\n        }\n      }}\n      style={{ cursor: \"pointer\" }}\n      {...rest}\n    >\n      <Flex alignItems=\"flex-start\" justifyContent=\"space-between\">\n        <Text variant=\"md\">{message}</Text>\n\n        {action && (\n          <Clickable\n            onClick={action.onClick}\n            textDecoration=\"underline\"\n            color=\"rgba(255, 255, 255, 0.9)\"\n          >\n            <Text variant=\"xs\">{action.label}</Text>\n          </Clickable>\n        )}\n      </Flex>\n\n      {description && <Text variant=\"xs\">{description}</Text>}\n    </Container>\n  )\n}\n\nexport const TOAST_VARIANTS = {\n  message: {\n    backgroundColor: \"black100\",\n    color: \"white100\",\n  },\n  alert: {\n    backgroundColor: \"blue100\",\n    color: \"white100\",\n  },\n  success: {\n    backgroundColor: \"green100\",\n    color: \"white100\",\n  },\n  error: {\n    backgroundColor: \"red100\",\n    color: \"white100\",\n  },\n}\n\nconst Container = styled(Box)`\n  ${variant({ variants: TOAST_VARIANTS })}\n  user-select: none;\n`\n"],"file":"Toast.js"}

package/dist/elements/Toasts/Toast.story.js

@@ -37,6 +37,7 @@ var Default = function Default() {
       }
     }]
   }, /*#__PURE__*/_react.default.createElement(_Toast.Toast, {
+    id: "example",
     message: "Message Title",
     description: "This is placeholder text."
   }));

package/dist/elements/Toasts/Toast.story.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Toasts/Toast.story.tsx"],"names":["title","Default","variant","action","label","onClick"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;;;eAEe;AACbA,EAAAA,KAAK,EAAE;AADM,C;;;AAIR,IAAMC,OAAO,GAAG,SAAVA,OAAU,GAAM;AAC3B,sBACE,6BAAC,uBAAD;AACE,IAAA,MAAM,EAAE,CACN;AAAEC,MAAAA,OAAO,EAAE;AAAX,KADM,EAEN;AAAEA,MAAAA,OAAO,EAAE;AAAX,KAFM,EAGN;AAAEA,MAAAA,OAAO,EAAE;AAAX,KAHM,EAIN;AAAEA,MAAAA,OAAO,EAAE;AAAX,KAJM,EAKN;AAAEC,MAAAA,MAAM,EAAE;AAAEC,QAAAA,KAAK,EAAE,MAAT;AAAiBC,QAAAA,OAAO,EAAE,0BAAO,SAAP;AAA1B;AAAV,KALM;AADV,kBASE,6BAAC,YAAD;AAAO,IAAA,OAAO,EAAC,eAAf;AAA+B,IAAA,WAAW,EAAC;AAA3C,IATF,CADF;AAaD,CAdM;;;AAAMJ,O","sourcesContent":["import { action } from \"@storybook/addon-actions\"\nimport React from \"react\"\nimport { States } from \"storybook-states\"\nimport { Toast, ToastProps } from \"./Toast\"\n\nexport default {\n  title: \"Components/Toast\",\n}\n\nexport const Default = () => {\n  return (\n    <States<Partial<ToastProps>>\n      states={[\n        { variant: \"message\" },\n        { variant: \"alert\" },\n        { variant: \"success\" },\n        { variant: \"error\" },\n        { action: { label: \"Undo\", onClick: action(\"onClick\") } },\n      ]}\n    >\n      <Toast message=\"Message Title\" description=\"This is placeholder text.\" />\n    </States>\n  )\n}\n"],"file":"Toast.story.js"}
+{"version":3,"sources":["../../../src/elements/Toasts/Toast.story.tsx"],"names":["title","Default","variant","action","label","onClick"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;;;eAEe;AACbA,EAAAA,KAAK,EAAE;AADM,C;;;AAIR,IAAMC,OAAO,GAAG,SAAVA,OAAU,GAAM;AAC3B,sBACE,6BAAC,uBAAD;AACE,IAAA,MAAM,EAAE,CACN;AAAEC,MAAAA,OAAO,EAAE;AAAX,KADM,EAEN;AAAEA,MAAAA,OAAO,EAAE;AAAX,KAFM,EAGN;AAAEA,MAAAA,OAAO,EAAE;AAAX,KAHM,EAIN;AAAEA,MAAAA,OAAO,EAAE;AAAX,KAJM,EAKN;AAAEC,MAAAA,MAAM,EAAE;AAAEC,QAAAA,KAAK,EAAE,MAAT;AAAiBC,QAAAA,OAAO,EAAE,0BAAO,SAAP;AAA1B;AAAV,KALM;AADV,kBASE,6BAAC,YAAD;AACE,IAAA,EAAE,EAAC,SADL;AAEE,IAAA,OAAO,EAAC,eAFV;AAGE,IAAA,WAAW,EAAC;AAHd,IATF,CADF;AAiBD,CAlBM;;;AAAMJ,O","sourcesContent":["import { action } from \"@storybook/addon-actions\"\nimport React from \"react\"\nimport { States } from \"storybook-states\"\nimport { Toast, ToastProps } from \"./Toast\"\n\nexport default {\n  title: \"Components/Toast\",\n}\n\nexport const Default = () => {\n  return (\n    <States<Partial<ToastProps>>\n      states={[\n        { variant: \"message\" },\n        { variant: \"alert\" },\n        { variant: \"success\" },\n        { variant: \"error\" },\n        { action: { label: \"Undo\", onClick: action(\"onClick\") } },\n      ]}\n    >\n      <Toast\n        id=\"example\"\n        message=\"Message Title\"\n        description=\"This is placeholder text.\"\n      />\n    </States>\n  )\n}\n"],"file":"Toast.story.js"}

package/dist/elements/Toasts/Toasts.js

@@ -41,12 +41,11 @@ var Toasts = function Toasts(_ref) {
     })
   }, takeRight(toasts, limit).map(function (_ref2) {
     var id = _ref2.id,
-        close = _ref2.close,
-        rest = _objectWithoutProperties(_ref2, ["id", "close"]);
+        rest = _objectWithoutProperties(_ref2, ["id"]);
 
     return /*#__PURE__*/_react.default.createElement(_Toast.Toast, _extends({
       key: id,
-      onClose: close
+      id: id
     }, rest));
   }))), /*#__PURE__*/_react.default.createElement(_VisuallyHidden.VisuallyHidden, {
     "aria-live": "assertive",

package/dist/elements/Toasts/Toasts.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Toasts/Toasts.tsx"],"names":["Toasts","limit","rest","toasts","takeRight","map","id","close","toast","i","message","description","xs","length","slice"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;AAMO,IAAMA,MAA6B,GAAG,SAAhCA,MAAgC,OAA4B;AAAA,wBAAzBC,KAAyB;AAAA,MAAzBA,KAAyB,2BAAjB,CAAiB;AAAA,MAAXC,IAAW;;AAAA,mBACpD,4BADoD;AAAA,MAC/DC,MAD+D,cAC/DA,MAD+D;;AAGvE,sBACE,yEACE,6BAAC,QAAD,EAASD,IAAT,eACE,6BAAC,UAAD;AAAM,IAAA,SAAS,eAAE,6BAAC,cAAD;AAAQ,MAAA,EAAE,EAAE;AAAZ;AAAjB,KACGE,SAAS,CAACD,MAAD,EAASF,KAAT,CAAT,CAAyBI,GAAzB,CAA6B;AAAA,QAAGC,EAAH,SAAGA,EAAH;AAAA,QAAOC,KAAP,SAAOA,KAAP;AAAA,QAAiBL,IAAjB;;AAAA,wBAC5B,6BAAC,YAAD;AAAO,MAAA,GAAG,EAAEI,EAAZ;AAAgB,MAAA,OAAO,EAAEC;AAAzB,OAAoCL,IAApC,EAD4B;AAAA,GAA7B,CADH,CADF,CADF,eASE,6BAAC,8BAAD;AACE,iBAAU,WADZ;AAEE,mBAAY,MAFd;AAGE,qBAAc;AAHhB,KAKGC,MAAM,CAACE,GAAP,CAAW,UAACG,KAAD,EAAQC,CAAR,EAAc;AACxB,wBACE;AAAK,MAAA,GAAG,EAAEA;AAAV,OACGD,KAAK,CAACE,OADT,SACqBF,KAAK,CAACG,WAD3B,CADF;AAKD,GANA,CALH,CATF,CADF;AAyBD,CA5BM;;;;AA8BP,IAAMP,SAAS,GAAG,SAAZA,SAAY,CAAKQ,EAAL,EAA4B;AAAA,MAAdX,KAAc,uEAAN,CAAM;;AAC5C,MAAIW,EAAE,CAACC,MAAH,GAAYZ,KAAhB,EAAuB;AACrB,WAAOW,EAAP;AACD;;AAED,SAAOA,EAAE,CAACE,KAAH,CAASF,EAAE,CAACC,MAAH,GAAYZ,KAArB,EAA4BW,EAAE,CAACC,MAA/B,CAAP;AACD,CAND","sourcesContent":["import React from \"react\"\nimport { VisuallyHidden } from \"../VisuallyHidden\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Join } from \"../Join\"\nimport { Spacer } from \"../Spacer\"\nimport { Toast } from \"./Toast\"\nimport { useToasts } from \"./useToasts\"\n\nexport interface ToastsProps extends BoxProps {\n  limit?: number\n}\n\nexport const Toasts: React.FC<ToastsProps> = ({ limit = 5, ...rest }) => {\n  const { toasts } = useToasts()\n\n  return (\n    <>\n      <Box {...rest}>\n        <Join separator={<Spacer mt={1} />}>\n          {takeRight(toasts, limit).map(({ id, close, ...rest }) => (\n            <Toast key={id} onClose={close} {...rest} />\n          ))}\n        </Join>\n      </Box>\n\n      <VisuallyHidden\n        aria-live=\"assertive\"\n        aria-atomic=\"true\"\n        aria-relevant=\"additions\"\n      >\n        {toasts.map((toast, i) => {\n          return (\n            <div key={i}>\n              {toast.message} - {toast.description}\n            </div>\n          )\n        })}\n      </VisuallyHidden>\n    </>\n  )\n}\n\nconst takeRight = <T,>(xs: T[], limit = 1) => {\n  if (xs.length < limit) {\n    return xs\n  }\n\n  return xs.slice(xs.length - limit, xs.length)\n}\n"],"file":"Toasts.js"}
+{"version":3,"sources":["../../../src/elements/Toasts/Toasts.tsx"],"names":["Toasts","limit","rest","toasts","takeRight","map","id","toast","i","message","description","xs","length","slice"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;AAMO,IAAMA,MAA6B,GAAG,SAAhCA,MAAgC,OAA4B;AAAA,wBAAzBC,KAAyB;AAAA,MAAzBA,KAAyB,2BAAjB,CAAiB;AAAA,MAAXC,IAAW;;AAAA,mBACpD,4BADoD;AAAA,MAC/DC,MAD+D,cAC/DA,MAD+D;;AAGvE,sBACE,yEACE,6BAAC,QAAD,EAASD,IAAT,eACE,6BAAC,UAAD;AAAM,IAAA,SAAS,eAAE,6BAAC,cAAD;AAAQ,MAAA,EAAE,EAAE;AAAZ;AAAjB,KACGE,SAAS,CAACD,MAAD,EAASF,KAAT,CAAT,CAAyBI,GAAzB,CAA6B;AAAA,QAAGC,EAAH,SAAGA,EAAH;AAAA,QAAUJ,IAAV;;AAAA,wBAC5B,6BAAC,YAAD;AAAO,MAAA,GAAG,EAAEI,EAAZ;AAAgB,MAAA,EAAE,EAAEA;AAApB,OAA4BJ,IAA5B,EAD4B;AAAA,GAA7B,CADH,CADF,CADF,eASE,6BAAC,8BAAD;AACE,iBAAU,WADZ;AAEE,mBAAY,MAFd;AAGE,qBAAc;AAHhB,KAKGC,MAAM,CAACE,GAAP,CAAW,UAACE,KAAD,EAAQC,CAAR,EAAc;AACxB,wBACE;AAAK,MAAA,GAAG,EAAEA;AAAV,OACGD,KAAK,CAACE,OADT,SACqBF,KAAK,CAACG,WAD3B,CADF;AAKD,GANA,CALH,CATF,CADF;AAyBD,CA5BM;;;;AA8BP,IAAMN,SAAS,GAAG,SAAZA,SAAY,CAAKO,EAAL,EAA4B;AAAA,MAAdV,KAAc,uEAAN,CAAM;;AAC5C,MAAIU,EAAE,CAACC,MAAH,GAAYX,KAAhB,EAAuB;AACrB,WAAOU,EAAP;AACD;;AAED,SAAOA,EAAE,CAACE,KAAH,CAASF,EAAE,CAACC,MAAH,GAAYX,KAArB,EAA4BU,EAAE,CAACC,MAA/B,CAAP;AACD,CAND","sourcesContent":["import React from \"react\"\nimport { VisuallyHidden } from \"../VisuallyHidden\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Join } from \"../Join\"\nimport { Spacer } from \"../Spacer\"\nimport { Toast } from \"./Toast\"\nimport { useToasts } from \"./useToasts\"\n\nexport interface ToastsProps extends BoxProps {\n  limit?: number\n}\n\nexport const Toasts: React.FC<ToastsProps> = ({ limit = 5, ...rest }) => {\n  const { toasts } = useToasts()\n\n  return (\n    <>\n      <Box {...rest}>\n        <Join separator={<Spacer mt={1} />}>\n          {takeRight(toasts, limit).map(({ id, ...rest }) => (\n            <Toast key={id} id={id} {...rest} />\n          ))}\n        </Join>\n      </Box>\n\n      <VisuallyHidden\n        aria-live=\"assertive\"\n        aria-atomic=\"true\"\n        aria-relevant=\"additions\"\n      >\n        {toasts.map((toast, i) => {\n          return (\n            <div key={i}>\n              {toast.message} - {toast.description}\n            </div>\n          )\n        })}\n      </VisuallyHidden>\n    </>\n  )\n}\n\nconst takeRight = <T,>(xs: T[], limit = 1) => {\n  if (xs.length < limit) {\n    return xs\n  }\n\n  return xs.slice(xs.length - limit, xs.length)\n}\n"],"file":"Toasts.js"}

package/dist/elements/Toasts/Toasts.story.js

@@ -1,11 +1,13 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Demo = exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _storybookStates = require("storybook-states");
 
@@ -13,13 +15,39 @@ var _Flex = require("../Flex");
 
 var _Button = require("../Button");
 
+var _Text = require("../Text");
+
 var _Toast = require("./Toast");
 
 var _Toasts = require("./Toasts");
 
 var _useToasts2 = require("./useToasts");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _ = require("..");
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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 _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 _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+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) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 var _default = {
   title: "Components/Toasts"
@@ -28,7 +56,13 @@ exports.default = _default;
 
 var Demo = function Demo() {
   var _useToasts = (0, _useToasts2.useToasts)(),
-      sendToast = _useToasts.sendToast;
+      sendToast = _useToasts.sendToast,
+      retractToast = _useToasts.retractToast;
+
+  var _useState = (0, _react.useState)([]),
+      _useState2 = _slicedToArray(_useState, 2),
+      activeToasts = _useState2[0],
+      setActiveToasts = _useState2[1];
 
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Flex.Flex, {
     mb: 1
@@ -40,16 +74,63 @@ var Demo = function Demo() {
       size: "small",
       mr: 1,
       onClick: function onClick() {
-        sendToast({
+        var _sendToast = sendToast({
           variant: variant,
           message: "".concat(captialized, " Title"),
-          description: "This is example text."
+          description: "This is example text.",
+          onClose: function onClose(closedID) {
+            setActiveToasts(function (activeToasts) {
+              return activeToasts.filter(function (id) {
+                return id !== closedID;
+              });
+            });
+          }
+        }),
+            id = _sendToast.id;
+
+        setActiveToasts(function (activeToasts) {
+          return [].concat(_toConsumableArray(activeToasts), [id]);
         });
       }
     }, captialized);
-  })), /*#__PURE__*/_react.default.createElement(_storybookStates.States, null, /*#__PURE__*/_react.default.createElement(_Toasts.Toasts, {
+  }), /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    size: "small",
+    variant: "secondaryGray",
+    onClick: function onClick() {
+      var _sendToast2 = sendToast({
+        variant: "message",
+        message: "Until manually dismissed",
+        description: "This toast will hang around until it's manually dismissed.",
+        ttl: Infinity,
+        onClose: function onClose(closedID) {
+          setActiveToasts(function (activeToasts) {
+            return activeToasts.filter(function (id) {
+              return id !== closedID;
+            });
+          });
+        }
+      }),
+          id = _sendToast2.id;
+
+      setActiveToasts(function (activeToasts) {
+        return [].concat(_toConsumableArray(activeToasts), [id]);
+      });
+    }
+  }, "Until manually dismissed")), /*#__PURE__*/_react.default.createElement(_storybookStates.States, null, /*#__PURE__*/_react.default.createElement(_Toasts.Toasts, {
     limit: 7
-  })));
+  })), activeToasts.length > 0 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.Separator, {
+    my: 1
+  }), /*#__PURE__*/_react.default.createElement(_Text.Text, {
+    variant: "xs"
+  }, /*#__PURE__*/_react.default.createElement("u", null, "Active toasts:"), activeToasts.map(function (id) {
+    return /*#__PURE__*/_react.default.createElement(_.Clickable, {
+      key: id,
+      display: "block",
+      onClick: function onClick() {
+        return retractToast(id);
+      }
+    }, "Remove ", id);
+  }))));
 };
 
 exports.Demo = Demo;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Toasts/Toasts.story.tsx"],"names":["title","Demo","sendToast","Object","keys","TOAST_VARIANTS","map","variant","captialized","charAt","toUpperCase","slice","message","description","decorators","Story"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;eAEe;AACbA,EAAAA,KAAK,EAAE;AADM,C;;;AAIR,IAAMC,IAAI,GAAG,SAAPA,IAAO,GAAM;AAAA,mBACF,4BADE;AAAA,MAChBC,SADgB,cAChBA,SADgB;;AAGxB,sBACE,yEACE,6BAAC,UAAD;AAAM,IAAA,EAAE,EAAE;AAAV,KACIC,MAAM,CAACC,IAAP,CAAYC,qBAAZ,CAAD,CAAgDC,GAAhD,CAAoD,UAACC,OAAD,EAAa;AAChE,QAAMC,WAAW,GAAGD,OAAO,CAACE,MAAR,CAAe,CAAf,EAAkBC,WAAlB,KAAkCH,OAAO,CAACI,KAAR,CAAc,CAAd,CAAtD;AAEA,wBACE,6BAAC,cAAD;AACE,MAAA,GAAG,EAAEJ,OADP;AAEE,MAAA,OAAO,EAAC,kBAFV;AAGE,MAAA,IAAI,EAAC,OAHP;AAIE,MAAA,EAAE,EAAE,CAJN;AAKE,MAAA,OAAO,EAAE,mBAAM;AACbL,QAAAA,SAAS,CAAC;AACRK,UAAAA,OAAO,EAAPA,OADQ;AAERK,UAAAA,OAAO,YAAKJ,WAAL,WAFC;AAGRK,UAAAA,WAAW,EAAE;AAHL,SAAD,CAAT;AAKD;AAXH,OAaGL,WAbH,CADF;AAiBD,GApBA,CADH,CADF,eAyBE,6BAAC,uBAAD,qBACE,6BAAC,cAAD;AAAQ,IAAA,KAAK,EAAE;AAAf,IADF,CAzBF,CADF;AA+BD,CAlCM;;;AAoCPP,IAAI,CAACa,UAAL,GAAkB,CAChB,UAACC,KAAD;AAAA,sBACE,6BAAC,0BAAD,qBACE,6BAAC,KAAD,OADF,CADF;AAAA,CADgB,CAAlB","sourcesContent":["import React from \"react\"\nimport { States } from \"storybook-states\"\nimport { Flex } from \"../Flex\"\nimport { Button } from \"../Button\"\nimport { ToastVariant, TOAST_VARIANTS } from \"./Toast\"\nimport { Toasts } from \"./Toasts\"\nimport { ToastsProvider, useToasts } from \"./useToasts\"\n\nexport default {\n  title: \"Components/Toasts\",\n}\n\nexport const Demo = () => {\n  const { sendToast } = useToasts()\n\n  return (\n    <>\n      <Flex mb={1}>\n        {(Object.keys(TOAST_VARIANTS) as ToastVariant[]).map((variant) => {\n          const captialized = variant.charAt(0).toUpperCase() + variant.slice(1)\n\n          return (\n            <Button\n              key={variant}\n              variant=\"secondaryOutline\"\n              size=\"small\"\n              mr={1}\n              onClick={() => {\n                sendToast({\n                  variant,\n                  message: `${captialized} Title`,\n                  description: \"This is example text.\",\n                })\n              }}\n            >\n              {captialized}\n            </Button>\n          )\n        })}\n      </Flex>\n\n      <States>\n        <Toasts limit={7} />\n      </States>\n    </>\n  )\n}\n\nDemo.decorators = [\n  (Story) => (\n    <ToastsProvider>\n      <Story />\n    </ToastsProvider>\n  ),\n]\n"],"file":"Toasts.story.js"}
+{"version":3,"sources":["../../../src/elements/Toasts/Toasts.story.tsx"],"names":["title","Demo","sendToast","retractToast","activeToasts","setActiveToasts","Object","keys","TOAST_VARIANTS","map","variant","captialized","charAt","toUpperCase","slice","message","description","onClose","closedID","filter","id","ttl","Infinity","length","decorators","Story"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;eAEe;AACbA,EAAAA,KAAK,EAAE;AADM,C;;;AAIR,IAAMC,IAAI,GAAG,SAAPA,IAAO,GAAM;AAAA,mBACY,4BADZ;AAAA,MAChBC,SADgB,cAChBA,SADgB;AAAA,MACLC,YADK,cACLA,YADK;;AAAA,kBAGgB,qBAAmB,EAAnB,CAHhB;AAAA;AAAA,MAGjBC,YAHiB;AAAA,MAGHC,eAHG;;AAKxB,sBACE,yEACE,6BAAC,UAAD;AAAM,IAAA,EAAE,EAAE;AAAV,KACIC,MAAM,CAACC,IAAP,CAAYC,qBAAZ,CAAD,CAAgDC,GAAhD,CAAoD,UAACC,OAAD,EAAa;AAChE,QAAMC,WAAW,GAAGD,OAAO,CAACE,MAAR,CAAe,CAAf,EAAkBC,WAAlB,KAAkCH,OAAO,CAACI,KAAR,CAAc,CAAd,CAAtD;AAEA,wBACE,6BAAC,cAAD;AACE,MAAA,GAAG,EAAEJ,OADP;AAEE,MAAA,OAAO,EAAC,kBAFV;AAGE,MAAA,IAAI,EAAC,OAHP;AAIE,MAAA,EAAE,EAAE,CAJN;AAKE,MAAA,OAAO,EAAE,mBAAM;AAAA,yBACER,SAAS,CAAC;AACvBQ,UAAAA,OAAO,EAAPA,OADuB;AAEvBK,UAAAA,OAAO,YAAKJ,WAAL,WAFgB;AAGvBK,UAAAA,WAAW,EAAE,uBAHU;AAIvBC,UAAAA,OAAO,EAAE,iBAACC,QAAD,EAAc;AACrBb,YAAAA,eAAe,CAAC,UAACD,YAAD,EAAkB;AAChC,qBAAOA,YAAY,CAACe,MAAb,CAAoB,UAACC,EAAD;AAAA,uBAAQA,EAAE,KAAKF,QAAf;AAAA,eAApB,CAAP;AACD,aAFc,CAAf;AAGD;AARsB,SAAD,CADX;AAAA,YACLE,EADK,cACLA,EADK;;AAYbf,QAAAA,eAAe,CAAC,UAACD,YAAD;AAAA,8CAAsBA,YAAtB,IAAoCgB,EAApC;AAAA,SAAD,CAAf;AACD;AAlBH,OAoBGT,WApBH,CADF;AAwBD,GA3BA,CADH,eA8BE,6BAAC,cAAD;AACE,IAAA,IAAI,EAAC,OADP;AAEE,IAAA,OAAO,EAAC,eAFV;AAGE,IAAA,OAAO,EAAE,mBAAM;AAAA,wBACET,SAAS,CAAC;AACvBQ,QAAAA,OAAO,EAAE,SADc;AAEvBK,QAAAA,OAAO,EAAE,0BAFc;AAGvBC,QAAAA,WAAW,EACT,4DAJqB;AAKvBK,QAAAA,GAAG,EAAEC,QALkB;AAMvBL,QAAAA,OAAO,EAAE,iBAACC,QAAD,EAAc;AACrBb,UAAAA,eAAe,CAAC,UAACD,YAAD,EAAkB;AAChC,mBAAOA,YAAY,CAACe,MAAb,CAAoB,UAACC,EAAD;AAAA,qBAAQA,EAAE,KAAKF,QAAf;AAAA,aAApB,CAAP;AACD,WAFc,CAAf;AAGD;AAVsB,OAAD,CADX;AAAA,UACLE,EADK,eACLA,EADK;;AAcbf,MAAAA,eAAe,CAAC,UAACD,YAAD;AAAA,4CAAsBA,YAAtB,IAAoCgB,EAApC;AAAA,OAAD,CAAf;AACD;AAlBH,gCA9BF,CADF,eAuDE,6BAAC,uBAAD,qBACE,6BAAC,cAAD;AAAQ,IAAA,KAAK,EAAE;AAAf,IADF,CAvDF,EA2DGhB,YAAY,CAACmB,MAAb,GAAsB,CAAtB,iBACC,yEACE,6BAAC,WAAD;AAAW,IAAA,EAAE,EAAE;AAAf,IADF,eAGE,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC;AAAd,kBACE,yDADF,EAGGnB,YAAY,CAACK,GAAb,CAAiB,UAACW,EAAD,EAAQ;AACxB,wBACE,6BAAC,WAAD;AACE,MAAA,GAAG,EAAEA,EADP;AAEE,MAAA,OAAO,EAAC,OAFV;AAGE,MAAA,OAAO,EAAE;AAAA,eAAMjB,YAAY,CAACiB,EAAD,CAAlB;AAAA;AAHX,kBAKUA,EALV,CADF;AASD,GAVA,CAHH,CAHF,CA5DJ,CADF;AAmFD,CAxFM;;;AA0FPnB,IAAI,CAACuB,UAAL,GAAkB,CAChB,UAACC,KAAD;AAAA,sBACE,6BAAC,0BAAD,qBACE,6BAAC,KAAD,OADF,CADF;AAAA,CADgB,CAAlB","sourcesContent":["import React, { useState } from \"react\"\nimport { States } from \"storybook-states\"\nimport { Flex } from \"../Flex\"\nimport { Button } from \"../Button\"\nimport { Text } from \"../Text\"\nimport { ToastVariant, TOAST_VARIANTS } from \"./Toast\"\nimport { Toasts } from \"./Toasts\"\nimport { ToastsProvider, useToasts } from \"./useToasts\"\nimport { Clickable, Separator } from \"..\"\n\nexport default {\n  title: \"Components/Toasts\",\n}\n\nexport const Demo = () => {\n  const { sendToast, retractToast } = useToasts()\n\n  const [activeToasts, setActiveToasts] = useState<string[]>([])\n\n  return (\n    <>\n      <Flex mb={1}>\n        {(Object.keys(TOAST_VARIANTS) as ToastVariant[]).map((variant) => {\n          const captialized = variant.charAt(0).toUpperCase() + variant.slice(1)\n\n          return (\n            <Button\n              key={variant}\n              variant=\"secondaryOutline\"\n              size=\"small\"\n              mr={1}\n              onClick={() => {\n                const { id } = sendToast({\n                  variant,\n                  message: `${captialized} Title`,\n                  description: \"This is example text.\",\n                  onClose: (closedID) => {\n                    setActiveToasts((activeToasts) => {\n                      return activeToasts.filter((id) => id !== closedID)\n                    })\n                  },\n                })\n\n                setActiveToasts((activeToasts) => [...activeToasts, id])\n              }}\n            >\n              {captialized}\n            </Button>\n          )\n        })}\n\n        <Button\n          size=\"small\"\n          variant=\"secondaryGray\"\n          onClick={() => {\n            const { id } = sendToast({\n              variant: \"message\",\n              message: \"Until manually dismissed\",\n              description:\n                \"This toast will hang around until it's manually dismissed.\",\n              ttl: Infinity,\n              onClose: (closedID) => {\n                setActiveToasts((activeToasts) => {\n                  return activeToasts.filter((id) => id !== closedID)\n                })\n              },\n            })\n\n            setActiveToasts((activeToasts) => [...activeToasts, id])\n          }}\n        >\n          Until manually dismissed\n        </Button>\n      </Flex>\n\n      <States>\n        <Toasts limit={7} />\n      </States>\n\n      {activeToasts.length > 0 && (\n        <>\n          <Separator my={1} />\n\n          <Text variant=\"xs\">\n            <u>Active toasts:</u>\n\n            {activeToasts.map((id) => {\n              return (\n                <Clickable\n                  key={id}\n                  display=\"block\"\n                  onClick={() => retractToast(id)}\n                >\n                  Remove {id}\n                </Clickable>\n              )\n            })}\n          </Text>\n        </>\n      )}\n    </>\n  )\n}\n\nDemo.decorators = [\n  (Story) => (\n    <ToastsProvider>\n      <Story />\n    </ToastsProvider>\n  ),\n]\n"],"file":"Toasts.story.js"}

package/dist/elements/Toasts/useToasts.d.ts

@@ -3,21 +3,30 @@ import { ToastProps } from "./Toast";
 interface Toast extends ToastProps {
     id: string;
     ttl: number;
-    close(): void;
+    onClose(id: string): void;
 }
-declare type Payload = Omit<Toast, "id" | "ttl" | "close"> & {
+declare type Payload = Omit<Toast, "id" | "ttl" | "onClose"> & {
     ttl?: number;
+    onClose?(id: string): void;
 };
 declare type State = {
     toasts: Toast[];
 };
 export declare const ToastsContext: React.Context<{
     state: State;
-    sendToast(toast: Payload): void;
+    sendToast(toast: Payload): {
+        id: string;
+        handleClose: () => void;
+    };
+    retractToast(id: string): void;
 }>;
 export declare const ToastsProvider: React.FC;
 export declare const useToasts: () => {
     toasts: Toast[];
-    sendToast: (toast: Payload) => void;
+    sendToast: (toast: Payload) => {
+        id: string;
+        handleClose: () => void;
+    };
+    retractToast: (id: string) => void;
 };
 export {};

package/dist/elements/Toasts/useToasts.js

@@ -64,7 +64,14 @@ var ToastsContext = /*#__PURE__*/(0, _react.createContext)({
   state: {
     toasts: []
   },
-  sendToast: function sendToast() {// noop
+  sendToast: function sendToast() {
+    return {
+      id: "",
+      handleClose: function handleClose() {// NOOP
+      }
+    };
+  },
+  retractToast: function retractToast() {// NOOP
   }
 });
 exports.ToastsContext = ToastsContext;
@@ -79,54 +86,64 @@ var ToastsProvider = function ToastsProvider(_ref2) {
       state = _useReducer2[0],
       dispatch = _useReducer2[1];
 
-  var timeouts = (0, _react.useRef)(new Map());
+  var activeToasts = (0, _react.useRef)(new Map());
+  var retractToast = (0, _react.useCallback)(function (id) {
+    var _toast$onClose;
+
+    var toast = activeToasts.current.get(id);
+    if (!toast) return;
+    clearTimeout(toast.timeout);
+    activeToasts.current.delete(id);
+    dispatch({
+      type: "RETRACT",
+      payload: {
+        id: id
+      }
+    });
+    (_toast$onClose = toast.onClose) === null || _toast$onClose === void 0 ? void 0 : _toast$onClose.call(toast, id);
+  }, []);
   var sendToast = (0, _react.useCallback)(function (_ref3) {
     var _ref3$ttl = _ref3.ttl,
         ttl = _ref3$ttl === void 0 ? 6000 : _ref3$ttl,
-        rest = _objectWithoutProperties(_ref3, ["ttl"]);
+        onClose = _ref3.onClose,
+        rest = _objectWithoutProperties(_ref3, ["ttl", "onClose"]);
 
     var id = generateId();
 
-    var close = function close() {
-      clearTimeout(timeouts.current.get(id));
-      timeouts.current.delete(id);
-      dispatch({
-        type: "RETRACT",
-        payload: {
-          id: id
-        }
-      });
+    var handleClose = function handleClose() {
+      retractToast(id);
     };
 
     dispatch({
       type: "SEND",
-      payload: _objectSpread(_objectSpread({
-        id: id
-      }, rest), {}, {
+      payload: _objectSpread(_objectSpread({}, rest), {}, {
+        id: id,
         ttl: ttl,
-        close: close
+        onClose: handleClose
       })
     });
-    timeouts.current.set(id, window.setTimeout(function () {
-      timeouts.current.delete(id);
-      dispatch({
-        type: "RETRACT",
-        payload: {
-          id: id
-        }
-      });
-    }, ttl));
-  }, []);
+    activeToasts.current.set(id, {
+      timeout: ttl !== Infinity ? window.setTimeout(handleClose, ttl) : -1,
+      onClose: onClose
+    });
+    return {
+      id: id,
+      handleClose: handleClose
+    };
+  }, [retractToast]);
   (0, _react.useEffect)(function () {
-    var handles = timeouts.current;
+    var toasts = activeToasts.current;
     return function () {
-      handles.forEach(clearTimeout);
+      toasts.forEach(function (toast) {
+        return clearTimeout(toast.timeout);
+      });
     };
   }, []);
   return /*#__PURE__*/_react.default.createElement(ToastsContext.Provider, {
     value: {
       state: state,
-      sendToast: sendToast
+      sendToast: sendToast,
+      retractToast: retractToast
     }
   }, children);
 };
@@ -137,11 +154,13 @@ ToastsProvider.displayName = "ToastsProvider";
 var useToasts = function useToasts() {
   var _useContext = (0, _react.useContext)(ToastsContext),
       toasts = _useContext.state.toasts,
-      sendToast = _useContext.sendToast;
+      sendToast = _useContext.sendToast,
+      retractToast = _useContext.retractToast;
 
   return {
     toasts: toasts,
-    sendToast: sendToast
+    sendToast: sendToast,
+    retractToast: retractToast
   };
 };
 

package/dist/elements/Toasts/useToasts.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Toasts/useToasts.tsx"],"names":["reducer","state","action","type","toasts","payload","filter","id","ToastsContext","sendToast","ToastsProvider","children","dispatch","timeouts","Map","ttl","rest","generateId","close","clearTimeout","current","get","delete","set","window","setTimeout","handles","forEach","useToasts","Math","random","toString","slice"],"mappings":"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","sourcesContent":["import React, {\n  createContext,\n  useContext,\n  useReducer,\n  useCallback,\n  useRef,\n  useEffect,\n} from \"react\"\nimport { ToastProps } from \"./Toast\"\n\ninterface Toast extends ToastProps {\n  id: string\n  ttl: number\n  close(): void\n}\n\ntype Payload = Omit<Toast, \"id\" | \"ttl\" | \"close\"> & { ttl?: number }\n\ntype State = { toasts: Toast[] }\n\ntype Action =\n  | { type: \"SEND\"; payload: Toast }\n  | { type: \"RETRACT\"; payload: { id: string } }\n\nconst reducer = (state: State, action: Action): State => {\n  switch (action.type) {\n    case \"SEND\":\n      return { ...state, toasts: [...state.toasts, action.payload] }\n\n    case \"RETRACT\":\n      return {\n        ...state,\n        toasts: state.toasts.filter(({ id }) => {\n          return id !== action.payload.id\n        }),\n      }\n  }\n}\n\nexport const ToastsContext = createContext<{\n  state: State\n  sendToast(toast: Payload): void\n}>({\n  state: { toasts: [] },\n  sendToast: () => {\n    // noop\n  },\n})\n\nexport const ToastsProvider: React.FC = ({ children }) => {\n  const [state, dispatch] = useReducer(reducer, { toasts: [] })\n\n  const timeouts = useRef<Map<string, number>>(new Map())\n\n  const sendToast = useCallback(({ ttl = 6000, ...rest }: Payload) => {\n    const id = generateId()\n\n    const close = () => {\n      clearTimeout(timeouts.current.get(id))\n      timeouts.current.delete(id)\n      dispatch({ type: \"RETRACT\", payload: { id } })\n    }\n\n    dispatch({ type: \"SEND\", payload: { id, ...rest, ttl, close } })\n\n    timeouts.current.set(\n      id,\n      window.setTimeout(() => {\n        timeouts.current.delete(id)\n        dispatch({ type: \"RETRACT\", payload: { id } })\n      }, ttl)\n    )\n  }, [])\n\n  useEffect(() => {\n    const handles = timeouts.current\n\n    return () => {\n      handles.forEach(clearTimeout)\n    }\n  }, [])\n\n  return (\n    <ToastsContext.Provider value={{ state, sendToast }}>\n      {children}\n    </ToastsContext.Provider>\n  )\n}\n\nexport const useToasts = () => {\n  const {\n    state: { toasts },\n    sendToast,\n  } = useContext(ToastsContext)\n\n  return { toasts, sendToast }\n}\n\nconst generateId = () => Math.random().toString(26).slice(2)\n"],"file":"useToasts.js"}
+{"version":3,"sources":["../../../src/elements/Toasts/useToasts.tsx"],"names":["reducer","state","action","type","toasts","payload","filter","id","ToastsContext","sendToast","handleClose","retractToast","ToastsProvider","children","dispatch","activeToasts","Map","toast","current","get","clearTimeout","timeout","delete","onClose","ttl","rest","generateId","set","Infinity","window","setTimeout","forEach","useToasts","Math","random","toString","slice"],"mappings":"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","sourcesContent":["import React, {\n  createContext,\n  useContext,\n  useReducer,\n  useCallback,\n  useRef,\n  useEffect,\n} from \"react\"\nimport { ToastProps } from \"./Toast\"\n\ninterface Toast extends ToastProps {\n  id: string\n  ttl: number\n  onClose(id: string): void\n}\n\ntype Payload = Omit<Toast, \"id\" | \"ttl\" | \"onClose\"> & {\n  ttl?: number\n  onClose?(id: string): void\n}\n\ntype State = { toasts: Toast[] }\n\ntype Action =\n  | { type: \"SEND\"; payload: Toast }\n  | { type: \"RETRACT\"; payload: { id: string } }\n\nconst reducer = (state: State, action: Action): State => {\n  switch (action.type) {\n    case \"SEND\":\n      return { ...state, toasts: [...state.toasts, action.payload] }\n\n    case \"RETRACT\":\n      return {\n        ...state,\n        toasts: state.toasts.filter(({ id }) => {\n          return id !== action.payload.id\n        }),\n      }\n  }\n}\n\nexport const ToastsContext = createContext<{\n  state: State\n  sendToast(toast: Payload): { id: string; handleClose: () => void }\n  retractToast(id: string): void\n}>({\n  state: { toasts: [] },\n  sendToast: () => {\n    return {\n      id: \"\",\n      handleClose: () => {\n        // NOOP\n      },\n    }\n  },\n  retractToast: () => {\n    // NOOP\n  },\n})\n\nexport const ToastsProvider: React.FC = ({ children }) => {\n  const [state, dispatch] = useReducer(reducer, { toasts: [] })\n\n  const activeToasts = useRef<\n    Map<\n      string,\n      {\n        timeout: number\n        onClose?: (id: string) => void\n      }\n    >\n  >(new Map())\n\n  const retractToast = useCallback((id: string) => {\n    const toast = activeToasts.current.get(id)\n\n    if (!toast) return\n\n    clearTimeout(toast.timeout)\n\n    activeToasts.current.delete(id)\n\n    dispatch({ type: \"RETRACT\", payload: { id } })\n\n    toast.onClose?.(id)\n  }, [])\n\n  const sendToast = useCallback(\n    ({ ttl = 6000, onClose, ...rest }: Payload) => {\n      const id = generateId()\n\n      const handleClose = () => {\n        retractToast(id)\n      }\n\n      dispatch({\n        type: \"SEND\",\n        payload: { ...rest, id, ttl, onClose: handleClose },\n      })\n\n      activeToasts.current.set(id, {\n        timeout: ttl !== Infinity ? window.setTimeout(handleClose, ttl) : -1,\n        onClose,\n      })\n\n      return { id, handleClose }\n    },\n    [retractToast]\n  )\n\n  useEffect(() => {\n    const toasts = activeToasts.current\n\n    return () => {\n      toasts.forEach((toast) => clearTimeout(toast.timeout))\n    }\n  }, [])\n\n  return (\n    <ToastsContext.Provider value={{ state, sendToast, retractToast }}>\n      {children}\n    </ToastsContext.Provider>\n  )\n}\n\nexport const useToasts = () => {\n  const {\n    state: { toasts },\n    sendToast,\n    retractToast,\n  } = useContext(ToastsContext)\n\n  return { toasts, sendToast, retractToast }\n}\n\nconst generateId = () => Math.random().toString(26).slice(2)\n"],"file":"useToasts.js"}

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

@@ -4,6 +4,15 @@ declare const _default: {
 };
 export default _default;
 export declare const Default: () => JSX.Element;
-export declare const _Clickable: () => JSX.Element;
+export declare const _Clickable: {
+    (): JSX.Element;
+    story: {
+        parameters: {
+            chromatic: {
+                disable: boolean;
+            };
+        };
+    };
+};
 export declare const Placement: () => JSX.Element;
 export declare const IconExample: () => JSX.Element;

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

@@ -76,6 +76,13 @@ var _Clickable = function _Clickable() {
 
 exports._Clickable = _Clickable;
 _Clickable.displayName = "_Clickable";
+_Clickable.story = {
+  parameters: {
+    chromatic: {
+      disable: true
+    }
+  }
+};
 
 var Placement = function Placement() {
   return /*#__PURE__*/_react.default.createElement(_storybookStates.States, {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Tooltip/Tooltip.story.tsx"],"names":["CONTENT","title","Default","placement","width","visible","_Clickable","Placement","Object","keys","POSITION","map","props","JSON","stringify","IconExample","lineHeight"],"mappings":"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","sourcesContent":["import { action } from \"@storybook/addon-actions\"\nimport React from \"react\"\nimport { States } from \"storybook-states\"\nimport { HelpIcon } from \"../../svgs\"\nimport { Position, POSITION } from \"../../utils/usePosition\"\nimport { Box } from \"../Box\"\nimport { Clickable } from \"../Clickable\"\nimport { Text } from \"../Text\"\nimport { Tooltip, TooltipProps } from \"./Tooltip\"\n\nconst CONTENT =\n  \"Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis odio laudantium sint possimus debitis commodi iusto odit, sunt facilis consequuntur, hic rem doloremque illum provident temporibus atque. Ducimus, commodi necessitatibus?\"\n\nexport default {\n  title: \"Components/Tooltip\",\n}\n\nexport const Default = () => {\n  return (\n    <States<Partial<TooltipProps>>\n      states={[\n        { placement: \"top-start\" },\n        { placement: \"bottom\", width: 600 },\n        { placement: \"bottom\", visible: true },\n      ]}\n    >\n      <Tooltip content={CONTENT}>\n        <Text\n          variant=\"xs\"\n          textAlign=\"center\"\n          p={1}\n          bg=\"black100\"\n          color=\"white100\"\n        >\n          This text has a tooltip\n        </Text>\n      </Tooltip>\n    </States>\n  )\n}\n\nexport const _Clickable = () => {\n  return (\n    <States<Partial<TooltipProps>> states={[{}]}>\n      <Tooltip content={CONTENT}>\n        <Clickable onClick={action(\"onClick\")}>\n          <Text\n            variant=\"xs\"\n            textAlign=\"center\"\n            p={1}\n            bg=\"black100\"\n            color=\"white100\"\n          >\n            This text has a tooltip and is clickable\n          </Text>\n        </Clickable>\n      </Tooltip>\n    </States>\n  )\n}\n\nexport const Placement = () => {\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 content={JSON.stringify(props)} visible {...props}>\n            <Text\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          </Tooltip>\n        )\n      }}\n    </States>\n  )\n}\n\nexport const IconExample = () => {\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"],"file":"Tooltip.story.js"}
+{"version":3,"sources":["../../../src/elements/Tooltip/Tooltip.story.tsx"],"names":["CONTENT","title","Default","placement","width","visible","_Clickable","story","parameters","chromatic","disable","Placement","Object","keys","POSITION","map","props","JSON","stringify","IconExample","lineHeight"],"mappings":"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","sourcesContent":["import { action } from \"@storybook/addon-actions\"\nimport React from \"react\"\nimport { States } from \"storybook-states\"\nimport { HelpIcon } from \"../../svgs\"\nimport { Position, POSITION } from \"../../utils/usePosition\"\nimport { Box } from \"../Box\"\nimport { Clickable } from \"../Clickable\"\nimport { Text } from \"../Text\"\nimport { Tooltip, TooltipProps } from \"./Tooltip\"\n\nconst CONTENT =\n  \"Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis odio laudantium sint possimus debitis commodi iusto odit, sunt facilis consequuntur, hic rem doloremque illum provident temporibus atque. Ducimus, commodi necessitatibus?\"\n\nexport default {\n  title: \"Components/Tooltip\",\n}\n\nexport const Default = () => {\n  return (\n    <States<Partial<TooltipProps>>\n      states={[\n        { placement: \"top-start\" },\n        { placement: \"bottom\", width: 600 },\n        { placement: \"bottom\", visible: true },\n      ]}\n    >\n      <Tooltip content={CONTENT}>\n        <Text\n          variant=\"xs\"\n          textAlign=\"center\"\n          p={1}\n          bg=\"black100\"\n          color=\"white100\"\n        >\n          This text has a tooltip\n        </Text>\n      </Tooltip>\n    </States>\n  )\n}\n\nexport const _Clickable = () => {\n  return (\n    <States<Partial<TooltipProps>> states={[{}]}>\n      <Tooltip content={CONTENT}>\n        <Clickable onClick={action(\"onClick\")}>\n          <Text\n            variant=\"xs\"\n            textAlign=\"center\"\n            p={1}\n            bg=\"black100\"\n            color=\"white100\"\n          >\n            This text has a tooltip and is clickable\n          </Text>\n        </Clickable>\n      </Tooltip>\n    </States>\n  )\n}\n\n_Clickable.story = {\n  parameters: { chromatic: { disable: true } },\n}\n\nexport const Placement = () => {\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 content={JSON.stringify(props)} visible {...props}>\n            <Text\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          </Tooltip>\n        )\n      }}\n    </States>\n  )\n}\n\nexport const IconExample = () => {\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"],"file":"Tooltip.story.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette",
-  "version": "18.4.2",
+  "version": "18.5.0",
   "description": "Design system library for react components",
   "main": "dist/index.js",
   "publishConfig": {
@@ -175,5 +175,5 @@
       "<rootDir>/www/"
     ]
   },
-  "gitHead": "bf61c1fcf1b7f8a7f8130bed737c325caf36adec"
+  "gitHead": "bfee1e6d498a377a8fc4d5f0ffc6d3a4dac5ae7a"
 }