@artsy/palette 19.1.4 → 19.3.0

package/CHANGELOG.md

@@ -1,3 +1,53 @@
+# v19.3.0 (Thu Mar 31 2022)
+
+#### 🚀  Enhancement
+
+- GRO-836 Update: Marquee with newly decided default coloring [#1150](https://github.com/artsy/palette/pull/1150) ([@The-Beez-Kneez](https://github.com/The-Beez-Kneez))
+
+#### 🐛  Bug Fix
+
+- Update: Marquee with newly decided default coloring ([@The-Beez-Kneez](https://github.com/The-Beez-Kneez))
+
+#### Authors: 1
+
+- Ana Lisa Sutherland ([@The-Beez-Kneez](https://github.com/The-Beez-Kneez))
+
+---
+
+# 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

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/Marquee/Marquee.js

@@ -51,12 +51,12 @@ var VARIANTS = {
     color: "black100"
   },
   defaultDark: {
-    backgroundColor: "black100",
-    color: "white100"
+    backgroundColor: "black10",
+    color: "black100"
   },
   brand: {
-    backgroundColor: "brand",
-    color: "white100"
+    backgroundColor: "black10",
+    color: "black100"
   }
 };
 

package/dist/elements/Marquee/Marquee.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Marquee/Marquee.tsx"],"names":["VARIANTS","defaultLight","backgroundColor","color","defaultDark","brand","move","props","keyframes","offset","Container","Box","variants","StyledText","Text","Inner","styled","div","speed","Item","Marquee","marqueeText","divider","rest","size","v2","v3","containerEl","childEl","amount","setAmount","setOffset","current","containerWidth","getBoundingClientRect","width","childWidth","targetAmount","Math","min","ceil","Array","from","map","_","i","defaultProps","variant"],"mappings":"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","sourcesContent":["import React, { useState, useEffect, useRef } from \"react\"\nimport styled, { keyframes } from \"styled-components\"\nimport { variant } from \"styled-system\"\nimport { TextVariant } from \"@artsy/palette-tokens/dist/typography/types\"\nimport { useThemeConfig } from \"../../Theme\"\nimport { Flex } from \"../Flex\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Text } from \"../Text\"\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\nconst move = (props) => keyframes`\n  from {\n    transform: translateX(0);\n  }\n  to {\n    transform: translateX(-${props.offset}px);\n  }\n`\n\nconst Container = styled(Box)`\n  ${variant({ variants: VARIANTS })}\n  width: 100%;\n  overflow-x: hidden;\n`\nconst StyledText = styled(Text)`\n  ${variant({ variants: VARIANTS })}\n  white-space: nowrap;\n`\n\nconst Inner = styled.div<{ speed: string; offset: number }>`\n  animation: ${move} ${(props) => props.speed} infinite linear;\n  cursor: default;\n  user-select: none;\n  white-space: nowrap;\n`\n\nconst Item = styled.div`\n  display: inline-block;\n`\n\nexport interface MarqueeProps extends BoxProps {\n  variant?: keyof typeof VARIANTS\n  speed?: string\n  color?: string\n  marqueeText: string\n  divider?: boolean\n}\n\nexport const Marquee: React.FC<MarqueeProps> = ({\n  marqueeText,\n  divider = true,\n  speed = \"10s\",\n  color,\n  ...rest\n}) => {\n  const size: TextVariant = useThemeConfig({ v2: \"small\", v3: \"xs\" })\n  const containerEl = useRef<HTMLDivElement | null>(null)\n  const childEl = useRef<HTMLDivElement | null>(null)\n\n  const [amount, setAmount] = useState(1)\n  const [offset, setOffset] = useState(0)\n\n  useEffect(() => {\n    if (!childEl.current || !containerEl.current) {\n      return\n    }\n    const containerWidth = containerEl.current.getBoundingClientRect().width\n    const childWidth = childEl.current.getBoundingClientRect().width\n    const targetAmount = Math.min(Math.ceil(containerWidth / childWidth), 100)\n\n    setOffset(targetAmount * childWidth)\n    setAmount(Math.ceil(targetAmount * 2))\n  }, [])\n\n  return (\n    <Container ref={containerEl as any} backgroundColor={color} {...rest}>\n      <Inner speed={speed} offset={offset}>\n        {Array.from(Array(amount)).map((_, i) => (\n          <Item key={i} ref={childEl as any}>\n            <Flex>\n              <StyledText px={[2, 4]} py={0.5} variant={size}>\n                {marqueeText}\n              </StyledText>\n              {divider && (\n                <StyledText px={[1, 4]} py={0.5} variant={size}>\n                  •\n                </StyledText>\n              )}\n            </Flex>\n          </Item>\n        ))}\n      </Inner>\n    </Container>\n  )\n}\n\nMarquee.defaultProps = {\n  variant: \"defaultDark\",\n}\n"],"file":"Marquee.js"}
+{"version":3,"sources":["../../../src/elements/Marquee/Marquee.tsx"],"names":["VARIANTS","defaultLight","backgroundColor","color","defaultDark","brand","move","props","keyframes","offset","Container","Box","variants","StyledText","Text","Inner","styled","div","speed","Item","Marquee","marqueeText","divider","rest","size","v2","v3","containerEl","childEl","amount","setAmount","setOffset","current","containerWidth","getBoundingClientRect","width","childWidth","targetAmount","Math","min","ceil","Array","from","map","_","i","defaultProps","variant"],"mappings":"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","sourcesContent":["import React, { useState, useEffect, useRef } from \"react\"\nimport styled, { keyframes } from \"styled-components\"\nimport { variant } from \"styled-system\"\nimport { TextVariant } from \"@artsy/palette-tokens/dist/typography/types\"\nimport { useThemeConfig } from \"../../Theme\"\nimport { Flex } from \"../Flex\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Text } from \"../Text\"\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\nconst move = (props) => keyframes`\n  from {\n    transform: translateX(0);\n  }\n  to {\n    transform: translateX(-${props.offset}px);\n  }\n`\n\nconst Container = styled(Box)`\n  ${variant({ variants: VARIANTS })}\n  width: 100%;\n  overflow-x: hidden;\n`\nconst StyledText = styled(Text)`\n  ${variant({ variants: VARIANTS })}\n  white-space: nowrap;\n`\n\nconst Inner = styled.div<{ speed: string; offset: number }>`\n  animation: ${move} ${(props) => props.speed} infinite linear;\n  cursor: default;\n  user-select: none;\n  white-space: nowrap;\n`\n\nconst Item = styled.div`\n  display: inline-block;\n`\n\nexport interface MarqueeProps extends BoxProps {\n  variant?: keyof typeof VARIANTS\n  speed?: string\n  color?: string\n  marqueeText: string\n  divider?: boolean\n}\n\nexport const Marquee: React.FC<MarqueeProps> = ({\n  marqueeText,\n  divider = true,\n  speed = \"10s\",\n  color,\n  ...rest\n}) => {\n  const size: TextVariant = useThemeConfig({ v2: \"small\", v3: \"xs\" })\n  const containerEl = useRef<HTMLDivElement | null>(null)\n  const childEl = useRef<HTMLDivElement | null>(null)\n\n  const [amount, setAmount] = useState(1)\n  const [offset, setOffset] = useState(0)\n\n  useEffect(() => {\n    if (!childEl.current || !containerEl.current) {\n      return\n    }\n    const containerWidth = containerEl.current.getBoundingClientRect().width\n    const childWidth = childEl.current.getBoundingClientRect().width\n    const targetAmount = Math.min(Math.ceil(containerWidth / childWidth), 100)\n\n    setOffset(targetAmount * childWidth)\n    setAmount(Math.ceil(targetAmount * 2))\n  }, [])\n\n  return (\n    <Container ref={containerEl as any} backgroundColor={color} {...rest}>\n      <Inner speed={speed} offset={offset}>\n        {Array.from(Array(amount)).map((_, i) => (\n          <Item key={i} ref={childEl as any}>\n            <Flex>\n              <StyledText px={[2, 4]} py={0.5} variant={size}>\n                {marqueeText}\n              </StyledText>\n              {divider && (\n                <StyledText px={[1, 4]} py={0.5} variant={size}>\n                  •\n                </StyledText>\n              )}\n            </Flex>\n          </Item>\n        ))}\n      </Inner>\n    </Container>\n  )\n}\n\nMarquee.defaultProps = {\n  variant: \"defaultDark\",\n}\n"],"file":"Marquee.js"}

package/dist/elements/Marquee/Marquee.story.js

@@ -25,7 +25,7 @@ var Default = function Default() {
       marqueeText: "Black Owned"
     }, {
       variant: "defaultDark",
-      marqueeText: "Black Owned"
+      marqueeText: "Women Owned"
     }, {
       variant: "brand",
       marqueeText: "Black Owned"
@@ -34,7 +34,7 @@ var Default = function Default() {
       marqueeText: "Black Owned"
     }, {
       speed: "20s",
-      marqueeText: "Black Owned"
+      marqueeText: "Women Owned"
     }, {
       divider: false,
       marqueeText: "Black Owned"

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Marquee/Marquee.story.tsx"],"names":["title","Default","variant","marqueeText","speed","divider"],"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;AAAEC,MAAAA,OAAO,EAAE,cAAX;AAA2BC,MAAAA,WAAW,EAAE;AAAxC,KADM,EAEN;AAAED,MAAAA,OAAO,EAAE,aAAX;AAA0BC,MAAAA,WAAW,EAAE;AAAvC,KAFM,EAGN;AAAED,MAAAA,OAAO,EAAE,OAAX;AAAoBC,MAAAA,WAAW,EAAE;AAAjC,KAHM,EAIN;AAAEC,MAAAA,KAAK,EAAE,IAAT;AAAeD,MAAAA,WAAW,EAAE;AAA5B,KAJM,EAKN;AAAEC,MAAAA,KAAK,EAAE,KAAT;AAAgBD,MAAAA,WAAW,EAAE;AAA7B,KALM,EAMN;AAAEE,MAAAA,OAAO,EAAE,KAAX;AAAkBF,MAAAA,WAAW,EAAE;AAA/B,KANM;AADV,kBAUE,6BAAC,gBAAD;AAAS,IAAA,WAAW,EAAC;AAArB,IAVF,CADF;AAcD,CAfM;;;AAAMF,O","sourcesContent":["import React from \"react\"\nimport { Marquee, MarqueeProps } from \"./Marquee\"\nimport { States } from \"storybook-states\"\n\nexport default {\n  title: \"Components/Marquee\",\n}\n\nexport const Default = () => {\n  return (\n    <States<MarqueeProps>\n      states={[\n        { variant: \"defaultLight\", marqueeText: \"Black Owned\" },\n        { variant: \"defaultDark\", marqueeText: \"Black Owned\" },\n        { variant: \"brand\", marqueeText: \"Black Owned\" },\n        { speed: \"5s\", marqueeText: \"Black Owned\" },\n        { speed: \"20s\", marqueeText: \"Black Owned\" },\n        { divider: false, marqueeText: \"Black Owned\" },\n      ]}\n    >\n      <Marquee marqueeText=\"Black Owned\" />\n    </States>\n  )\n}\n"],"file":"Marquee.story.js"}
+{"version":3,"sources":["../../../src/elements/Marquee/Marquee.story.tsx"],"names":["title","Default","variant","marqueeText","speed","divider"],"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;AAAEC,MAAAA,OAAO,EAAE,cAAX;AAA2BC,MAAAA,WAAW,EAAE;AAAxC,KADM,EAEN;AAAED,MAAAA,OAAO,EAAE,aAAX;AAA0BC,MAAAA,WAAW,EAAE;AAAvC,KAFM,EAGN;AAAED,MAAAA,OAAO,EAAE,OAAX;AAAoBC,MAAAA,WAAW,EAAE;AAAjC,KAHM,EAIN;AAAEC,MAAAA,KAAK,EAAE,IAAT;AAAeD,MAAAA,WAAW,EAAE;AAA5B,KAJM,EAKN;AAAEC,MAAAA,KAAK,EAAE,KAAT;AAAgBD,MAAAA,WAAW,EAAE;AAA7B,KALM,EAMN;AAAEE,MAAAA,OAAO,EAAE,KAAX;AAAkBF,MAAAA,WAAW,EAAE;AAA/B,KANM;AADV,kBAUE,6BAAC,gBAAD;AAAS,IAAA,WAAW,EAAC;AAArB,IAVF,CADF;AAcD,CAfM;;;AAAMF,O","sourcesContent":["import React from \"react\"\nimport { Marquee, MarqueeProps } from \"./Marquee\"\nimport { States } from \"storybook-states\"\n\nexport default {\n  title: \"Components/Marquee\",\n}\n\nexport const Default = () => {\n  return (\n    <States<MarqueeProps>\n      states={[\n        { variant: \"defaultLight\", marqueeText: \"Black Owned\" },\n        { variant: \"defaultDark\", marqueeText: \"Women Owned\" },\n        { variant: \"brand\", marqueeText: \"Black Owned\" },\n        { speed: \"5s\", marqueeText: \"Black Owned\" },\n        { speed: \"20s\", marqueeText: \"Women Owned\" },\n        { divider: false, marqueeText: \"Black Owned\" },\n      ]}\n    >\n      <Marquee marqueeText=\"Black Owned\" />\n    </States>\n  )\n}\n"],"file":"Marquee.story.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette",
-  "version": "19.1.4",
+  "version": "19.3.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": "7bd28912474e2837eb08811b773dca9971d9abdc"
+  "gitHead": "de77b52b2a38bf83d28ac5a143a59374741f2b19"
 }