@artsy/palette 19.1.3 → 19.2.0

package/CHANGELOG.md

@@ -1,3 +1,50 @@
+# v19.2.0 (Thu Mar 31 2022)
+
+#### 🚀  Enhancement
+
+- GRO-836: Adding design update for gallery attributes, until further approval on designs met [#1149](https://github.com/artsy/palette/pull/1149) ([@The-Beez-Kneez](https://github.com/The-Beez-Kneez))
+
+#### 🐛  Bug Fix
+
+- Adding design update for badges, until further approval on designs met ([@The-Beez-Kneez](https://github.com/The-Beez-Kneez))
+
+#### 🏠  Internal
+
+- chore(deps): update dep typescript from 4.6.2 to v4.6.3 [#1148](https://github.com/artsy/palette/pull/1148) ([@renovate-bot](https://github.com/renovate-bot))
+
+#### Authors: 2
+
+- Ana Lisa Sutherland ([@The-Beez-Kneez](https://github.com/The-Beez-Kneez))
+- WhiteSource Renovate ([@renovate-bot](https://github.com/renovate-bot))
+
+---
+
+# v19.1.5 (Thu Mar 24 2022)
+
+#### 🐛  Bug Fix
+
+- fix(badge): prevents wrapping; handles truncation on badges [#1146](https://github.com/artsy/palette/pull/1146) ([@dzucconi](https://github.com/dzucconi))
+- fix(badge): prevents wrapping; handles truncation on badges ([@dzucconi](https://github.com/dzucconi))
+
+#### Authors: 1
+
+- Damon ([@dzucconi](https://github.com/dzucconi))
+
+---
+
+# v19.1.4 (Tue Mar 22 2022)
+
+#### 🐛  Bug Fix
+
+- Revert "fix(join): prefers the provided child key; fallsback to index… [#1145](https://github.com/artsy/palette/pull/1145) ([@dzucconi](https://github.com/dzucconi))
+- Revert "fix(join): prefers the provided child key; fallsback to index if missing" ([@dzucconi](https://github.com/dzucconi))
+
+#### Authors: 1
+
+- Damon ([@dzucconi](https://github.com/dzucconi))
+
+---
+
 # v19.1.3 (Mon Mar 21 2022)
 
 #### 🐛  Bug Fix

package/dist/elements/Badge/Badge.js

@@ -37,12 +37,12 @@ var VARIANTS = {
     color: "black100"
   },
   defaultDark: {
-    backgroundColor: "black100",
-    color: "white100"
+    backgroundColor: "black10",
+    color: "black100"
   },
   brand: {
-    backgroundColor: "brand",
-    color: "white100"
+    backgroundColor: "black10",
+    color: "black100"
   }
 };
 
@@ -51,10 +51,12 @@ var Badge = function Badge(_ref) {
       rest = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/React.createElement(Container, _extends({
-    display: "inline-block",
-    px: 0.5
+    display: "inline-flex",
+    maxWidth: "100%"
   }, rest), /*#__PURE__*/React.createElement(_palette.Text, {
-    variant: "xs"
+    variant: "xs",
+    px: 0.5,
+    overflowEllipsis: true
   }, children));
 };
 

package/dist/elements/Badge/Badge.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Badge/Badge.tsx"],"names":["VARIANTS","defaultLight","backgroundColor","color","defaultDark","brand","Badge","children","rest","defaultProps","variant","Container","Box","variants"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;AAEA,IAAMA,QAAQ,GAAG;AACfC,EAAAA,YAAY,EAAE;AACZC,IAAAA,eAAe,EAAE,SADL;AAEZC,IAAAA,KAAK,EAAE;AAFK,GADC;AAKfC,EAAAA,WAAW,EAAE;AACXF,IAAAA,eAAe,EAAE,UADN;AAEXC,IAAAA,KAAK,EAAE;AAFI,GALE;AASfE,EAAAA,KAAK,EAAE;AACLH,IAAAA,eAAe,EAAE,OADZ;AAELC,IAAAA,KAAK,EAAE;AAFF;AATQ,CAAjB;;AAoBO,IAAMG,KAA2B,GAAG,SAA9BA,KAA8B,OAA2B;AAAA,MAAxBC,QAAwB,QAAxBA,QAAwB;AAAA,MAAXC,IAAW;;AACpE,sBACE,oBAAC,SAAD;AAAW,IAAA,OAAO,EAAC,cAAnB;AAAkC,IAAA,EAAE,EAAE;AAAtC,KAA+CA,IAA/C,gBACE,oBAAC,aAAD;AAAM,IAAA,OAAO,EAAC;AAAd,KAAoBD,QAApB,CADF,CADF;AAKD,CANM;;;AAAMD,K;AAQbA,KAAK,CAACG,YAAN,GAAqB;AACnBC,EAAAA,OAAO,EAAE;AADU,CAArB;AAIA,IAAMC,SAAS,GAAG,+BAAOC,QAAP,CAAH;AAAA;AAAA;AAAA,aACX,2BAAQ;AAAEC,EAAAA,QAAQ,EAAEb;AAAZ,CAAR,CADW,CAAf","sourcesContent":["import { Text } from \"@artsy/palette\"\nimport * as React from \"react\"\nimport styled from \"styled-components\"\nimport { variant } from \"styled-system\"\nimport { Box, BoxProps } from \"../Box\"\n\nconst VARIANTS = {\n  defaultLight: {\n    backgroundColor: \"black10\",\n    color: \"black100\",\n  },\n  defaultDark: {\n    backgroundColor: \"black100\",\n    color: \"white100\",\n  },\n  brand: {\n    backgroundColor: \"brand\",\n    color: \"white100\",\n  },\n}\n\nexport interface BadgeProps extends BoxProps {\n  variant?: keyof typeof VARIANTS\n  children: React.ReactNode\n}\n\nexport const Badge: React.FC<BadgeProps> = ({ children, ...rest }) => {\n  return (\n    <Container display=\"inline-block\" px={0.5} {...rest}>\n      <Text variant=\"xs\">{children}</Text>\n    </Container>\n  )\n}\n\nBadge.defaultProps = {\n  variant: \"defaultDark\",\n}\n\nconst Container = styled(Box)`\n  ${variant({ variants: VARIANTS })}\n`\n"],"file":"Badge.js"}
+{"version":3,"sources":["../../../src/elements/Badge/Badge.tsx"],"names":["VARIANTS","defaultLight","backgroundColor","color","defaultDark","brand","Badge","children","rest","defaultProps","variant","Container","Box","variants"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;AAEA,IAAMA,QAAQ,GAAG;AACfC,EAAAA,YAAY,EAAE;AACZC,IAAAA,eAAe,EAAE,SADL;AAEZC,IAAAA,KAAK,EAAE;AAFK,GADC;AAKfC,EAAAA,WAAW,EAAE;AACXF,IAAAA,eAAe,EAAE,SADN;AAEXC,IAAAA,KAAK,EAAE;AAFI,GALE;AASfE,EAAAA,KAAK,EAAE;AACLH,IAAAA,eAAe,EAAE,SADZ;AAELC,IAAAA,KAAK,EAAE;AAFF;AATQ,CAAjB;;AAoBO,IAAMG,KAA2B,GAAG,SAA9BA,KAA8B,OAA2B;AAAA,MAAxBC,QAAwB,QAAxBA,QAAwB;AAAA,MAAXC,IAAW;;AACpE,sBACE,oBAAC,SAAD;AAAW,IAAA,OAAO,EAAC,aAAnB;AAAiC,IAAA,QAAQ,EAAC;AAA1C,KAAqDA,IAArD,gBACE,oBAAC,aAAD;AAAM,IAAA,OAAO,EAAC,IAAd;AAAmB,IAAA,EAAE,EAAE,GAAvB;AAA4B,IAAA,gBAAgB;AAA5C,KACGD,QADH,CADF,CADF;AAOD,CARM;;;AAAMD,K;AAUbA,KAAK,CAACG,YAAN,GAAqB;AACnBC,EAAAA,OAAO,EAAE;AADU,CAArB;AAIA,IAAMC,SAAS,GAAG,+BAAOC,QAAP,CAAH;AAAA;AAAA;AAAA,aACX,2BAAQ;AAAEC,EAAAA,QAAQ,EAAEb;AAAZ,CAAR,CADW,CAAf","sourcesContent":["import { Text } from \"@artsy/palette\"\nimport * as React from \"react\"\nimport styled from \"styled-components\"\nimport { variant } from \"styled-system\"\nimport { Box, BoxProps } from \"../Box\"\n\nconst VARIANTS = {\n  defaultLight: {\n    backgroundColor: \"black10\",\n    color: \"black100\",\n  },\n  defaultDark: {\n    backgroundColor: \"black10\",\n    color: \"black100\",\n  },\n  brand: {\n    backgroundColor: \"black10\",\n    color: \"black100\",\n  },\n}\n\nexport interface BadgeProps extends BoxProps {\n  variant?: keyof typeof VARIANTS\n  children: React.ReactNode\n}\n\nexport const Badge: React.FC<BadgeProps> = ({ children, ...rest }) => {\n  return (\n    <Container display=\"inline-flex\" maxWidth=\"100%\" {...rest}>\n      <Text variant=\"xs\" px={0.5} overflowEllipsis>\n        {children}\n      </Text>\n    </Container>\n  )\n}\n\nBadge.defaultProps = {\n  variant: \"defaultDark\",\n}\n\nconst Container = styled(Box)`\n  ${variant({ variants: VARIANTS })}\n`\n"],"file":"Badge.js"}

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

@@ -3,3 +3,4 @@ declare const _default: {
 };
 export default _default;
 export declare const Default: () => JSX.Element;
+export declare const OverflowEllipsis: () => JSX.Element;

package/dist/elements/Badge/Badge.story.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Default = void 0;
+exports.default = exports.OverflowEllipsis = exports.Default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -11,8 +11,16 @@ var _storybookStates = require("storybook-states");
 
 var _Badge = require("../Badge/Badge");
 
+var _Box = require("../Box");
+
+var _excluded = ["children"];
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+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; }
+
 var _default = {
   title: "Components/Badge"
 };
@@ -32,4 +40,27 @@ var Default = function Default() {
 
 exports.Default = Default;
 Default.displayName = "Default";
+
+var OverflowEllipsis = function OverflowEllipsis() {
+  return /*#__PURE__*/_react.default.createElement(_storybookStates.States, {
+    states: [{}, {
+      children: "LGBT+ Owned",
+      variant: "brand"
+    }, {
+      children: "Women Owned",
+      variant: "defaultLight"
+    }]
+  }, function (_ref) {
+    var children = _ref.children,
+        rest = _objectWithoutProperties(_ref, _excluded);
+
+    return /*#__PURE__*/_react.default.createElement(_Box.Box, {
+      width: 75,
+      overflow: "hidden"
+    }, /*#__PURE__*/_react.default.createElement(_Badge.Badge, rest, children !== null && children !== void 0 ? children : "Black Owned"));
+  });
+};
+
+exports.OverflowEllipsis = OverflowEllipsis;
+OverflowEllipsis.displayName = "OverflowEllipsis";
 //# sourceMappingURL=Badge.story.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Badge/Badge.story.tsx"],"names":["title","Default","children","variant"],"mappings":";;;;;;;AAAA;;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,EADM,EAEN;AAAEC,MAAAA,QAAQ,EAAE,aAAZ;AAA2BC,MAAAA,OAAO,EAAE;AAApC,KAFM,EAGN;AAAED,MAAAA,QAAQ,EAAE,aAAZ;AAA2BC,MAAAA,OAAO,EAAE;AAApC,KAHM;AADV,kBAOE,6BAAC,YAAD,sBAPF,CADF;AAWD,CAZM;;;AAAMF,O","sourcesContent":["import React from \"react\"\nimport { States } from \"storybook-states\"\nimport { Badge, BadgeProps } from \"../Badge/Badge\"\n\nexport default {\n  title: \"Components/Badge\",\n}\n\nexport const Default = () => {\n  return (\n    <States<Partial<BadgeProps>>\n      states={[\n        {},\n        { children: \"LGBT+ Owned\", variant: \"brand\" },\n        { children: \"Women Owned\", variant: \"defaultLight\" },\n      ]}\n    >\n      <Badge>Black Owned</Badge>\n    </States>\n  )\n}\n"],"file":"Badge.story.js"}
+{"version":3,"sources":["../../../src/elements/Badge/Badge.story.tsx"],"names":["title","Default","children","variant","OverflowEllipsis","rest"],"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,EADM,EAEN;AAAEC,MAAAA,QAAQ,EAAE,aAAZ;AAA2BC,MAAAA,OAAO,EAAE;AAApC,KAFM,EAGN;AAAED,MAAAA,QAAQ,EAAE,aAAZ;AAA2BC,MAAAA,OAAO,EAAE;AAApC,KAHM;AADV,kBAOE,6BAAC,YAAD,sBAPF,CADF;AAWD,CAZM;;;AAAMF,O;;AAcN,IAAMG,gBAAgB,GAAG,SAAnBA,gBAAmB,GAAM;AACpC,sBACE,6BAAC,uBAAD;AACE,IAAA,MAAM,EAAE,CACN,EADM,EAEN;AAAEF,MAAAA,QAAQ,EAAE,aAAZ;AAA2BC,MAAAA,OAAO,EAAE;AAApC,KAFM,EAGN;AAAED,MAAAA,QAAQ,EAAE,aAAZ;AAA2BC,MAAAA,OAAO,EAAE;AAApC,KAHM;AADV,KAOG,gBAA2B;AAAA,QAAxBD,QAAwB,QAAxBA,QAAwB;AAAA,QAAXG,IAAW;;AAC1B,wBACE,6BAAC,QAAD;AAAK,MAAA,KAAK,EAAE,EAAZ;AAAgB,MAAA,QAAQ,EAAC;AAAzB,oBACE,6BAAC,YAAD,EAAWA,IAAX,EAAkBH,QAAlB,aAAkBA,QAAlB,cAAkBA,QAAlB,GAA8B,aAA9B,CADF,CADF;AAKD,GAbH,CADF;AAiBD,CAlBM;;;AAAME,gB","sourcesContent":["import React from \"react\"\nimport { States } from \"storybook-states\"\nimport { Badge, BadgeProps } from \"../Badge/Badge\"\nimport { Box } from \"../Box\"\n\nexport default {\n  title: \"Components/Badge\",\n}\n\nexport const Default = () => {\n  return (\n    <States<Partial<BadgeProps>>\n      states={[\n        {},\n        { children: \"LGBT+ Owned\", variant: \"brand\" },\n        { children: \"Women Owned\", variant: \"defaultLight\" },\n      ]}\n    >\n      <Badge>Black Owned</Badge>\n    </States>\n  )\n}\n\nexport const OverflowEllipsis = () => {\n  return (\n    <States<Partial<BadgeProps>>\n      states={[\n        {},\n        { children: \"LGBT+ Owned\", variant: \"brand\" },\n        { children: \"Women Owned\", variant: \"defaultLight\" },\n      ]}\n    >\n      {({ children, ...rest }) => {\n        return (\n          <Box width={75} overflow=\"hidden\">\n            <Badge {...rest}>{children ?? \"Black Owned\"}</Badge>\n          </Box>\n        )\n      }}\n    </States>\n  )\n}\n"],"file":"Badge.story.js"}

package/dist/elements/Join/Join.js

@@ -35,16 +35,18 @@ var Join = function Join(_ref) {
   var separator = _ref.separator,
       children = _ref.children;
   var elements = (0, _flattenChildren.flattenChildren)(children);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, elements.reduce(function (acc, element, index) {
-    // Prefer provided child key, fallback to index
-    var key = typeof element.key !== "undefined" ? element.key : index;
-    acc.push( /*#__PURE__*/_react.default.cloneElement(element, {
-      key: key
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, elements.reduce(function (acc, element, currentIndex) {
+    acc.push(
+    /*#__PURE__*/
+    // @ts-expect-error  MIGRATE_STRICT_MODE
+    _react.default.cloneElement(element, {
+      key: "join-".concat(currentIndex)
     }));
 
-    if (index !== elements.length - 1) {
-      acc.push(separator && /*#__PURE__*/_react.default.cloneElement(separator, {
-        key: key
+    if (currentIndex !== elements.length - 1) {
+      acc.push( // @ts-expect-error  MIGRATE_STRICT_MODE
+      separator && /*#__PURE__*/_react.default.cloneElement(separator, {
+        key: "join-sep-".concat(currentIndex)
       }));
     }
 

package/dist/elements/Join/Join.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Join/Join.tsx"],"names":["Join","separator","children","elements","reduce","acc","element","index","key","push","React","cloneElement","length"],"mappings":";;;;;;;AAAA;;AACA;;;;AAMA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,IAAMA,IAAyB,GAAG,SAA5BA,IAA4B,OAA6B;AAAA,MAA1BC,SAA0B,QAA1BA,SAA0B;AAAA,MAAfC,QAAe,QAAfA,QAAe;AACpE,MAAMC,QAAQ,GAAG,sCAAgBD,QAAhB,CAAjB;AAEA,sBACE,4DACGC,QAAQ,CAACC,MAAT,CAAgB,UAACC,GAAD,EAAMC,OAAN,EAAeC,KAAf,EAAyB;AACxC;AACA,QAAMC,GAAG,GAAG,OAAOF,OAAO,CAACE,GAAf,KAAuB,WAAvB,GAAqCF,OAAO,CAACE,GAA7C,GAAmDD,KAA/D;AAEAF,IAAAA,GAAG,CAACI,IAAJ,eAASC,eAAMC,YAAN,CAAmBL,OAAnB,EAA4B;AAAEE,MAAAA,GAAG,EAAHA;AAAF,KAA5B,CAAT;;AAEA,QAAID,KAAK,KAAKJ,QAAQ,CAACS,MAAT,GAAkB,CAAhC,EAAmC;AACjCP,MAAAA,GAAG,CAACI,IAAJ,CAASR,SAAS,iBAAIS,eAAMC,YAAN,CAAmBV,SAAnB,EAA8B;AAAEO,QAAAA,GAAG,EAAHA;AAAF,OAA9B,CAAtB;AACD;;AAED,WAAOH,GAAP;AACD,GAXA,EAWE,EAXF,CADH,CADF;AAgBD,CAnBM","sourcesContent":["import React from \"react\"\nimport { flattenChildren } from \"../../helpers/flattenChildren\"\n\ninterface JoinProps {\n  separator: React.ReactElement<any>\n}\n\n/**\n * `Join` is a higher order component that renders a separator component\n * between each of `Join`'s direct children.\n *\n * @example\n *\n *  <Join separator={<SomeComponent/>}>\n *    <child1/>\n *    <child2/>\n *    <child3/>\n *  </Join>\n *\n * which renders\n *\n * <child1/>\n * <SomeComponent/>\n * <child2/>\n * <SomeComponent/>\n * <child3/>\n */\nexport const Join: React.FC<JoinProps> = ({ separator, children }) => {\n  const elements = flattenChildren(children)\n\n  return (\n    <>\n      {elements.reduce((acc, element, index) => {\n        // Prefer provided child key, fallback to index\n        const key = typeof element.key !== \"undefined\" ? element.key : index\n\n        acc.push(React.cloneElement(element, { key }))\n\n        if (index !== elements.length - 1) {\n          acc.push(separator && React.cloneElement(separator, { key }))\n        }\n\n        return acc\n      }, [] as typeof elements)}\n    </>\n  )\n}\n"],"file":"Join.js"}
+{"version":3,"sources":["../../../src/elements/Join/Join.tsx"],"names":["Join","separator","children","elements","reduce","acc","element","currentIndex","push","React","cloneElement","key","length"],"mappings":";;;;;;;AAAA;;AACA;;;;AAMA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,IAAMA,IAAyB,GAAG,SAA5BA,IAA4B,OAA6B;AAAA,MAA1BC,SAA0B,QAA1BA,SAA0B;AAAA,MAAfC,QAAe,QAAfA,QAAe;AACpE,MAAMC,QAAQ,GAAG,sCAAgBD,QAAhB,CAAjB;AAEA,sBACE,4DACGC,QAAQ,CAACC,MAAT,CAAgB,UAACC,GAAD,EAAMC,OAAN,EAAeC,YAAf,EAAgC;AAC/CF,IAAAA,GAAG,CAACG,IAAJ;AAAA;AACE;AACAC,mBAAMC,YAAN,CAAmBJ,OAAnB,EAA4B;AAC1BK,MAAAA,GAAG,iBAAUJ,YAAV;AADuB,KAA5B,CAFF;;AAOA,QAAIA,YAAY,KAAKJ,QAAQ,CAACS,MAAT,GAAkB,CAAvC,EAA0C;AACxCP,MAAAA,GAAG,CAACG,IAAJ,EACE;AACAP,MAAAA,SAAS,iBACPQ,eAAMC,YAAN,CAAmBT,SAAnB,EAA8B;AAC5BU,QAAAA,GAAG,qBAAcJ,YAAd;AADyB,OAA9B,CAHJ;AAOD;;AAED,WAAOF,GAAP;AACD,GAnBA,EAmBE,EAnBF,CADH,CADF;AAwBD,CA3BM","sourcesContent":["import React from \"react\"\nimport { flattenChildren } from \"../../helpers/flattenChildren\"\n\ninterface JoinProps {\n  separator: React.ReactElement<any>\n}\n\n/**\n * `Join` is a higher order component that renders a separator component\n * between each of `Join`'s direct children.\n *\n * @example\n *\n *  <Join separator={<SomeComponent/>}>\n *    <child1/>\n *    <child2/>\n *    <child3/>\n *  </Join>\n *\n * which renders\n *\n * <child1/>\n * <SomeComponent/>\n * <child2/>\n * <SomeComponent/>\n * <child3/>\n */\nexport const Join: React.FC<JoinProps> = ({ separator, children }) => {\n  const elements = flattenChildren(children)\n\n  return (\n    <>\n      {elements.reduce((acc, element, currentIndex) => {\n        acc.push(\n          // @ts-expect-error  MIGRATE_STRICT_MODE\n          React.cloneElement(element, {\n            key: `join-${currentIndex}`,\n          })\n        )\n\n        if (currentIndex !== elements.length - 1) {\n          acc.push(\n            // @ts-expect-error  MIGRATE_STRICT_MODE\n            separator &&\n              React.cloneElement(separator, {\n                key: `join-sep-${currentIndex}`,\n              })\n          )\n        }\n\n        return acc\n      }, [])}\n    </>\n  )\n}\n"],"file":"Join.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette",
-  "version": "19.1.3",
+  "version": "19.2.0",
   "description": "Design system library for react components",
   "main": "dist/index.js",
   "publishConfig": {
@@ -111,7 +111,7 @@
     "storybook-states": "1.2.0",
     "styled-components": "4.3.2",
     "ts-node": "8.1.0",
-    "typescript": "4.6.2",
+    "typescript": "4.6.3",
     "typescript-styled-plugin": "0.10.0",
     "webpack": "5"
   },
@@ -178,5 +178,5 @@
       "<rootDir>/www/"
     ]
   },
-  "gitHead": "d51f2e8629a509c8e50e92bf47321f6f904b4626"
+  "gitHead": "74dc238df626f38a49045b1067f0d6984f388afe"
 }