@artsy/palette 22.1.0 → 23.0.0

package/dist/elements/LabeledInput/LabeledInput.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/LabeledInput/LabeledInput.tsx"],"names":["LabeledInput","React","forwardRef","forwardedRef","label","height","rest","labelRef","offset","setOffset","current","offsetWidth","boxProps","inputProps","variant","v2","v3","isText","paddingRight","pointerEvents","undefined"],"mappings":";;;;;;;;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA;AACO,IAAMA,YAEZ,gBAAGC,eAAMC,UAAN,CAAiB,gBAA6BC,YAA7B,EAA8C;AAAA,MAA3CC,KAA2C,QAA3CA,KAA2C;AAAA,MAApCC,MAAoC,QAApCA,MAAoC;AAAA,MAAzBC,IAAyB;;AACjE,MAAMC,QAAQ,GAAG,mBAA8B,IAA9B,CAAjB;;AACA,kBAA4B,qBAAS,CAAT,CAA5B;AAAA;AAAA,MAAOC,MAAP;AAAA,MAAeC,SAAf;;AAEA,wBAAU,YAAM;AACd,QAAIF,QAAQ,CAACG,OAAT,KAAqB,IAAzB,EAA+B;AAC/BD,IAAAA,SAAS,CAACF,QAAQ,CAACG,OAAT,CAAiBC,WAAlB,CAAT;AACD,GAHD,EAGG,EAHH;;AAKA,uBAA+B,wBAAcL,IAAd,CAA/B;AAAA;AAAA,MAAOM,QAAP;AAAA,MAAiBC,UAAjB;;AAEA,MAAMC,OAAoB,GAAG,2BAAe;AAAEC,IAAAA,EAAE,EAAE,OAAN;AAAeC,IAAAA,EAAE,EAAE;AAAnB,GAAf,CAA7B;AAEA,MAAMC,MAAM,GAAG,qBAAQb,KAAR,CAAf;AAEA,sBACE,6BAAC,QAAD;AAAK,IAAA,QAAQ,EAAC;AAAd,KAA6BQ,QAA7B,gBACE,6BAAC,YAAD;AACE,IAAA,GAAG,EAAET,YADP;AAEE,IAAA,MAAM,EAAEE,MAFV;AAGE,IAAA,KAAK,EAAE;AAAEa,MAAAA,YAAY,YAAKV,MAAM,GAAG,EAAd;AAAd;AAHT,KAIMK,UAJN,gBAME,6BAAC,QAAD;AACE,IAAA,GAAG,EAAEN,QADP;AAEE,IAAA,QAAQ,EAAC,UAFX;AAGE,IAAA,OAAO,EAAC,MAHV;AAIE,IAAA,UAAU,EAAC,QAJb;AAKE,IAAA,KAAK,EAAE,CALT;AAME,IAAA,GAAG,EAAE,CANP;AAOE,IAAA,MAAM,EAAE,CAPV;AAQE,IAAA,KAAK,EAAE;AACLY,MAAAA,aAAa,EAAEF,MAAM,GAAG,MAAH,GAAYG;AAD5B;AART,KAYGH,MAAM,gBACL,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAEH,OAAf;AAAwB,IAAA,KAAK,EAAC,SAA9B;AAAwC,IAAA,UAAU,EAAE;AAApD,KACGV,KADH,CADK,GAKLA,KAjBJ,CANF,CADF,CADF;AA+BD,CA9CG,CAFG","sourcesContent":["import { TextVariant } from \"@artsy/palette-tokens/dist/typography/types\"\nimport React, { useEffect, useRef, useState } from \"react\"\nimport { isText as _isText } from \"../../helpers/isText\"\nimport { useThemeConfig } from \"../../Theme\"\nimport { Box, splitBoxProps } from \"../Box\"\nimport { Input, InputProps } from \"../Input\"\nimport { Text } from \"../Text\"\n\nexport interface LabeledInputProps extends InputProps {\n  label: React.ReactNode\n}\n\n/** Input with a right-aligned label */\nexport const LabeledInput: React.ForwardRefExoticComponent<\n  LabeledInputProps & { ref?: React.Ref<HTMLInputElement> }\n> = React.forwardRef(({ label, height, ...rest }, forwardedRef) => {\n  const labelRef = useRef<HTMLDivElement | null>(null)\n  const [offset, setOffset] = useState(0)\n\n  useEffect(() => {\n    if (labelRef.current === null) return\n    setOffset(labelRef.current.offsetWidth)\n  }, [])\n\n  const [boxProps, inputProps] = splitBoxProps(rest)\n\n  const variant: TextVariant = useThemeConfig({ v2: \"small\", v3: \"xs\" })\n\n  const isText = _isText(label)\n\n  return (\n    <Box position=\"relative\" {...boxProps}>\n      <Input\n        ref={forwardedRef}\n        height={height}\n        style={{ paddingRight: `${offset + 10}px` }}\n        {...inputProps}\n      >\n        <Box\n          ref={labelRef as any}\n          position=\"absolute\"\n          display=\"flex\"\n          alignItems=\"center\"\n          right={1}\n          top={0}\n          bottom={0}\n          style={{\n            pointerEvents: isText ? \"none\" : undefined,\n          }}\n        >\n          {isText ? (\n            <Text variant={variant} color=\"black60\" lineHeight={1}>\n              {label}\n            </Text>\n          ) : (\n            label\n          )}\n        </Box>\n      </Input>\n    </Box>\n  )\n})\n"],"file":"LabeledInput.js"}
+{"version":3,"sources":["../../../src/elements/LabeledInput/LabeledInput.tsx"],"names":["LabeledInput","React","forwardRef","forwardedRef","label","height","rest","labelRef","offset","setOffset","current","offsetWidth","boxProps","inputProps","isText","paddingRight","pointerEvents","undefined","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA;AACO,IAAMA,YAEZ,gBAAGC,eAAMC,UAAN,CAAiB,gBAA6BC,YAA7B,EAA8C;AAAA,MAA3CC,KAA2C,QAA3CA,KAA2C;AAAA,MAApCC,MAAoC,QAApCA,MAAoC;AAAA,MAAzBC,IAAyB;;AACjE,MAAMC,QAAQ,GAAG,mBAA8B,IAA9B,CAAjB;;AACA,kBAA4B,qBAAS,CAAT,CAA5B;AAAA;AAAA,MAAOC,MAAP;AAAA,MAAeC,SAAf;;AAEA,wBAAU,YAAM;AACd,QAAIF,QAAQ,CAACG,OAAT,KAAqB,IAAzB,EAA+B;AAC/BD,IAAAA,SAAS,CAACF,QAAQ,CAACG,OAAT,CAAiBC,WAAlB,CAAT;AACD,GAHD,EAGG,EAHH;;AAKA,uBAA+B,wBAAcL,IAAd,CAA/B;AAAA;AAAA,MAAOM,QAAP;AAAA,MAAiBC,UAAjB;;AAEA,MAAMC,MAAM,GAAG,qBAAQV,KAAR,CAAf;AAEA,sBACE,6BAAC,QAAD;AAAK,IAAA,QAAQ,EAAC;AAAd,KAA6BQ,QAA7B,gBACE,6BAAC,YAAD;AACE,IAAA,GAAG,EAAET,YADP;AAEE,IAAA,MAAM,EAAEE,MAFV;AAGE,IAAA,KAAK,EAAE;AAAEU,MAAAA,YAAY,YAAKP,MAAM,GAAG,EAAd;AAAd;AAHT,KAIMK,UAJN,gBAME,6BAAC,QAAD;AACE,IAAA,GAAG,EAAEN,QADP;AAEE,IAAA,QAAQ,EAAC,UAFX;AAGE,IAAA,OAAO,EAAC,MAHV;AAIE,IAAA,UAAU,EAAC,QAJb;AAKE,IAAA,KAAK,EAAE,CALT;AAME,IAAA,GAAG,EAAE,CANP;AAOE,IAAA,MAAM,EAAE,CAPV;AAQE,IAAA,KAAK,EAAE;AACLS,MAAAA,aAAa,EAAEF,MAAM,GAAG,MAAH,GAAYG;AAD5B;AART,KAYGH,MAAM,gBACL,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC,IAAd;AAAmB,IAAA,KAAK,EAAC,SAAzB;AAAmC,IAAA,UAAU,EAAE;AAA/C,KACGV,KADH,CADK,GAKLA,KAjBJ,CANF,CADF,CADF;AA+BD,CA5CG,CAFG;;;AAgDPJ,YAAY,CAACkB,WAAb,GAA2B,cAA3B","sourcesContent":["import React, { useEffect, useRef, useState } from \"react\"\nimport { isText as _isText } from \"../../helpers/isText\"\nimport { Box, splitBoxProps } from \"../Box\"\nimport { Input, InputProps } from \"../Input\"\nimport { Text } from \"../Text\"\n\nexport interface LabeledInputProps extends InputProps {\n  label: React.ReactNode\n}\n\n/** Input with a right-aligned label */\nexport const LabeledInput: React.ForwardRefExoticComponent<\n  LabeledInputProps & { ref?: React.Ref<HTMLInputElement> }\n> = React.forwardRef(({ label, height, ...rest }, forwardedRef) => {\n  const labelRef = useRef<HTMLDivElement | null>(null)\n  const [offset, setOffset] = useState(0)\n\n  useEffect(() => {\n    if (labelRef.current === null) return\n    setOffset(labelRef.current.offsetWidth)\n  }, [])\n\n  const [boxProps, inputProps] = splitBoxProps(rest)\n\n  const isText = _isText(label)\n\n  return (\n    <Box position=\"relative\" {...boxProps}>\n      <Input\n        ref={forwardedRef}\n        height={height}\n        style={{ paddingRight: `${offset + 10}px` }}\n        {...inputProps}\n      >\n        <Box\n          ref={labelRef as any}\n          position=\"absolute\"\n          display=\"flex\"\n          alignItems=\"center\"\n          right={1}\n          top={0}\n          bottom={0}\n          style={{\n            pointerEvents: isText ? \"none\" : undefined,\n          }}\n        >\n          {isText ? (\n            <Text variant=\"xs\" color=\"black60\" lineHeight={1}>\n              {label}\n            </Text>\n          ) : (\n            label\n          )}\n        </Box>\n      </Input>\n    </Box>\n  )\n})\n\nLabeledInput.displayName = \"LabeledInput\"\n"],"file":"LabeledInput.js"}

package/dist/elements/Marquee/Marquee.js

@@ -13,8 +13,6 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _styledSystem = require("styled-system");
 
-var _Theme = require("../../Theme");
-
 var _Flex = require("../Flex");
 
 var _Box = require("../Box");
@@ -98,10 +96,6 @@ var Marquee = function Marquee(_ref) {
       color = _ref.color,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  var size = (0, _Theme.useThemeConfig)({
-    v2: "small",
-    v3: "xs"
-  });
   var containerEl = (0, _react.useRef)(null);
   var childEl = (0, _react.useRef)(null);
 
@@ -139,11 +133,11 @@ var Marquee = function Marquee(_ref) {
     }, /*#__PURE__*/_react.default.createElement(_Flex.Flex, null, /*#__PURE__*/_react.default.createElement(StyledText, {
       px: [2, 4],
       py: 0.5,
-      variant: size
+      variant: "xs"
     }, marqueeText), divider && /*#__PURE__*/_react.default.createElement(StyledText, {
       px: [1, 4],
       py: 0.5,
-      variant: size
+      variant: "xs"
     }, "\u2022")));
   })));
 };

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: \"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"}
+{"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","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 { 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 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=\"xs\">\n                {marqueeText}\n              </StyledText>\n              {divider && (\n                <StyledText px={[1, 4]} py={0.5} variant=\"xs\">\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/Message/Message.js

@@ -11,8 +11,6 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _styledSystem = require("styled-system");
 
-var _Theme = require("../../Theme");
-
 var _Flex = require("../Flex");
 
 var _Text = require("../Text");
@@ -73,19 +71,15 @@ var Message = function Message(_ref) {
       variant = _ref.variant,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  var size = (0, _Theme.useThemeConfig)({
-    v2: "text",
-    v3: "sm-display"
-  });
   var color = variant === "default" ? "black60" : "black100";
   return /*#__PURE__*/_react.default.createElement(Container, _extends({
     p: 2,
     variant: variant
   }, rest), /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    variant: size,
+    variant: "sm-display",
     color: "currentColor"
   }, title), /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    variant: size,
+    variant: "sm-display",
     color: color
   }, children));
 };

package/dist/elements/Message/Message.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Message/Message.tsx"],"names":["MESSAGE_VARIANTS","default","backgroundColor","color","info","success","alert","warning","error","Container","Flex","variants","Message","children","title","variant","rest","size","v2","v3","defaultProps"],"mappings":";;;;;;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEO,IAAMA,gBAAgB,GAAG;AAC9BC,EAAAA,OAAO,EAAE;AACPC,IAAAA,eAAe,EAAE,SADV;AAEPC,IAAAA,KAAK,EAAE;AAFA,GADqB;AAK9BC,EAAAA,IAAI,EAAE;AACJF,IAAAA,eAAe,EAAE,QADb;AAEJC,IAAAA,KAAK,EAAE;AAFH,GALwB;AAS9BE,EAAAA,OAAO,EAAE;AACPH,IAAAA,eAAe,EAAE,SADV;AAEPC,IAAAA,KAAK,EAAE;AAFA,GATqB;AAa9BG,EAAAA,KAAK,EAAE;AACLJ,IAAAA,eAAe,EAAE,UADZ;AAELC,IAAAA,KAAK,EAAE;AAFF,GAbuB;AAiB9BI,EAAAA,OAAO,EAAE;AACPL,IAAAA,eAAe,EAAE,UADV;AAEPC,IAAAA,KAAK,EAAE;AAFA,GAjBqB;AAqB9BK,EAAAA,KAAK,EAAE;AACLN,IAAAA,eAAe,EAAE,OADZ;AAELC,IAAAA,KAAK,EAAE;AAFF;AArBuB,CAAzB;;AAmCP,IAAMM,SAAS,GAAG,+BAAOC,UAAP,CAAH;AAAA;AAAA;AAAA,oCACX,2BAAQ;AAAEC,EAAAA,QAAQ,EAAEX;AAAZ,CAAR,CADW,CAAf;AAKA;AACA;AACA;AACA;AACA;AACA;;AACO,IAAMY,OAA+B,GAAG,SAAlCA,OAAkC,OAKzC;AAAA,MAJJC,QAII,QAJJA,QAII;AAAA,MAHJC,KAGI,QAHJA,KAGI;AAAA,MAFJC,OAEI,QAFJA,OAEI;AAAA,MADDC,IACC;;AACJ,MAAMC,IAAiB,GAAG,2BAAe;AAAEC,IAAAA,EAAE,EAAE,MAAN;AAAcC,IAAAA,EAAE,EAAE;AAAlB,GAAf,CAA1B;AACA,MAAMhB,KAAK,GAAGY,OAAO,KAAK,SAAZ,GAAwB,SAAxB,GAAoC,UAAlD;AAEA,sBACE,6BAAC,SAAD;AAAW,IAAA,CAAC,EAAE,CAAd;AAAiB,IAAA,OAAO,EAAEA;AAA1B,KAAuCC,IAAvC,gBACE,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAEC,IAAf;AAAqB,IAAA,KAAK,EAAC;AAA3B,KACGH,KADH,CADF,eAKE,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAEG,IAAf;AAAqB,IAAA,KAAK,EAAEd;AAA5B,KACGU,QADH,CALF,CADF;AAWD,CApBM;;;AAAMD,O;AAsBbA,OAAO,CAACQ,YAAR,GAAuB;AACrBL,EAAAA,OAAO,EAAE;AADY,CAAvB","sourcesContent":["import { TextVariant } from \"@artsy/palette-tokens/dist/typography/types\"\nimport React from \"react\"\nimport styled from \"styled-components\"\nimport { variant } from \"styled-system\"\nimport { useThemeConfig } from \"../../Theme\"\nimport { Flex, FlexProps } from \"../Flex\"\nimport { Text } from \"../Text\"\n\nexport const MESSAGE_VARIANTS = {\n  default: {\n    backgroundColor: \"black10\",\n    color: \"black100\",\n  },\n  info: {\n    backgroundColor: \"blue10\",\n    color: \"blue100\",\n  },\n  success: {\n    backgroundColor: \"green10\",\n    color: \"green150\",\n  },\n  alert: {\n    backgroundColor: \"orange10\",\n    color: \"orange150\",\n  },\n  warning: {\n    backgroundColor: \"yellow10\",\n    color: \"yellow150\",\n  },\n  error: {\n    backgroundColor: \"red10\",\n    color: \"red100\",\n  },\n}\n\nexport type MessageVariant = keyof typeof MESSAGE_VARIANTS\n\nexport interface MessageProps extends FlexProps {\n  children?: React.ReactNode\n  title?: string\n  variant?: MessageVariant\n}\n\nconst Container = styled(Flex)<MessageProps>`\n  ${variant({ variants: MESSAGE_VARIANTS })}\n  flex-direction: column;\n`\n\n/**\n * `Message` is used for in-line communication. These should fill the allotted\n * container or space they are placed and key for temporal messages and\n * comments within flows. Additionally, they can be used to highlight particular\n * messaging within a specific section of a page or screen.\n */\nexport const Message: React.FC<MessageProps> = ({\n  children,\n  title,\n  variant,\n  ...rest\n}) => {\n  const size: TextVariant = useThemeConfig({ v2: \"text\", v3: \"sm-display\" })\n  const color = variant === \"default\" ? \"black60\" : \"black100\"\n\n  return (\n    <Container p={2} variant={variant} {...rest}>\n      <Text variant={size} color=\"currentColor\">\n        {title}\n      </Text>\n\n      <Text variant={size} color={color}>\n        {children}\n      </Text>\n    </Container>\n  )\n}\n\nMessage.defaultProps = {\n  variant: \"default\",\n}\n"],"file":"Message.js"}
+{"version":3,"sources":["../../../src/elements/Message/Message.tsx"],"names":["MESSAGE_VARIANTS","default","backgroundColor","color","info","success","alert","warning","error","Container","Flex","variants","Message","children","title","variant","rest","defaultProps"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEO,IAAMA,gBAAgB,GAAG;AAC9BC,EAAAA,OAAO,EAAE;AACPC,IAAAA,eAAe,EAAE,SADV;AAEPC,IAAAA,KAAK,EAAE;AAFA,GADqB;AAK9BC,EAAAA,IAAI,EAAE;AACJF,IAAAA,eAAe,EAAE,QADb;AAEJC,IAAAA,KAAK,EAAE;AAFH,GALwB;AAS9BE,EAAAA,OAAO,EAAE;AACPH,IAAAA,eAAe,EAAE,SADV;AAEPC,IAAAA,KAAK,EAAE;AAFA,GATqB;AAa9BG,EAAAA,KAAK,EAAE;AACLJ,IAAAA,eAAe,EAAE,UADZ;AAELC,IAAAA,KAAK,EAAE;AAFF,GAbuB;AAiB9BI,EAAAA,OAAO,EAAE;AACPL,IAAAA,eAAe,EAAE,UADV;AAEPC,IAAAA,KAAK,EAAE;AAFA,GAjBqB;AAqB9BK,EAAAA,KAAK,EAAE;AACLN,IAAAA,eAAe,EAAE,OADZ;AAELC,IAAAA,KAAK,EAAE;AAFF;AArBuB,CAAzB;;AAmCP,IAAMM,SAAS,GAAG,+BAAOC,UAAP,CAAH;AAAA;AAAA;AAAA,oCACX,2BAAQ;AAAEC,EAAAA,QAAQ,EAAEX;AAAZ,CAAR,CADW,CAAf;AAKA;AACA;AACA;AACA;AACA;AACA;;AACO,IAAMY,OAA+B,GAAG,SAAlCA,OAAkC,OAKzC;AAAA,MAJJC,QAII,QAJJA,QAII;AAAA,MAHJC,KAGI,QAHJA,KAGI;AAAA,MAFJC,OAEI,QAFJA,OAEI;AAAA,MADDC,IACC;;AACJ,MAAMb,KAAK,GAAGY,OAAO,KAAK,SAAZ,GAAwB,SAAxB,GAAoC,UAAlD;AAEA,sBACE,6BAAC,SAAD;AAAW,IAAA,CAAC,EAAE,CAAd;AAAiB,IAAA,OAAO,EAAEA;AAA1B,KAAuCC,IAAvC,gBACE,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC,YAAd;AAA2B,IAAA,KAAK,EAAC;AAAjC,KACGF,KADH,CADF,eAKE,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC,YAAd;AAA2B,IAAA,KAAK,EAAEX;AAAlC,KACGU,QADH,CALF,CADF;AAWD,CAnBM;;;AAAMD,O;AAqBbA,OAAO,CAACK,YAAR,GAAuB;AACrBF,EAAAA,OAAO,EAAE;AADY,CAAvB","sourcesContent":["import React from \"react\"\nimport styled from \"styled-components\"\nimport { variant } from \"styled-system\"\nimport { Flex, FlexProps } from \"../Flex\"\nimport { Text } from \"../Text\"\n\nexport const MESSAGE_VARIANTS = {\n  default: {\n    backgroundColor: \"black10\",\n    color: \"black100\",\n  },\n  info: {\n    backgroundColor: \"blue10\",\n    color: \"blue100\",\n  },\n  success: {\n    backgroundColor: \"green10\",\n    color: \"green150\",\n  },\n  alert: {\n    backgroundColor: \"orange10\",\n    color: \"orange150\",\n  },\n  warning: {\n    backgroundColor: \"yellow10\",\n    color: \"yellow150\",\n  },\n  error: {\n    backgroundColor: \"red10\",\n    color: \"red100\",\n  },\n}\n\nexport type MessageVariant = keyof typeof MESSAGE_VARIANTS\n\nexport interface MessageProps extends FlexProps {\n  children?: React.ReactNode\n  title?: string\n  variant?: MessageVariant\n}\n\nconst Container = styled(Flex)<MessageProps>`\n  ${variant({ variants: MESSAGE_VARIANTS })}\n  flex-direction: column;\n`\n\n/**\n * `Message` is used for in-line communication. These should fill the allotted\n * container or space they are placed and key for temporal messages and\n * comments within flows. Additionally, they can be used to highlight particular\n * messaging within a specific section of a page or screen.\n */\nexport const Message: React.FC<MessageProps> = ({\n  children,\n  title,\n  variant,\n  ...rest\n}) => {\n  const color = variant === \"default\" ? \"black60\" : \"black100\"\n\n  return (\n    <Container p={2} variant={variant} {...rest}>\n      <Text variant=\"sm-display\" color=\"currentColor\">\n        {title}\n      </Text>\n\n      <Text variant=\"sm-display\" color={color}>\n        {children}\n      </Text>\n    </Container>\n  )\n}\n\nMessage.defaultProps = {\n  variant: \"default\",\n}\n"],"file":"Message.js"}

package/dist/elements/Pagination/Pagination.d.ts

@@ -28,9 +28,4 @@ export interface NextPrevButtonProps extends LinkProps {
     onClick: (event: React.MouseEvent) => void;
     page?: number;
 }
-/**
- * Alias of Pagination
- * @deprecated Use `Pagination`
- */
-export declare const LargePagination: React.FC<PaginationProps>;
 export {};

package/dist/elements/Pagination/Pagination.js

@@ -3,14 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Pagination = exports.LargePagination = void 0;
+exports.Pagination = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
 var _ChevronIcon = require("../../svgs/ChevronIcon");
 
-var _Theme = require("../../Theme");
-
 var _Flex = require("../Flex");
 
 var _Link = require("../Link");
@@ -23,12 +21,6 @@ var _excluded = ["getHref", "hasNextPage", "onClick", "onNext", "pageCursors"],
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 function _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; }
@@ -48,43 +40,6 @@ var Pagination = function Pagination(_ref) {
       previous = _ref$pageCursors.previous,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  var tokens = (0, _Theme.useThemeConfig)({
-    v2: {
-      order: {
-        pages: 1,
-        prev: 2,
-        next: 3
-      },
-      textVariant: "mediumText",
-      containerProps: {
-        flexDirection: "row",
-        justifyContent: "flex-end",
-        mr: -1
-      },
-      pagesProps: {
-        pr: 4
-      },
-      ellipsisProps: {
-        color: "black30"
-      }
-    },
-    v3: {
-      order: {
-        prev: 1,
-        pages: 2,
-        next: 3
-      },
-      textVariant: "sm",
-      containerProps: {
-        justifyContent: "space-between"
-      },
-      pagesProps: {},
-      ellipsisProps: {
-        color: "black60"
-      }
-    }
-  });
-
   var handlePrevClick = function handlePrevClick(event) {
     if (previous) {
       onClick && onClick(previous.cursor, previous.page, event);
@@ -100,49 +55,48 @@ var Pagination = function Pagination(_ref) {
     as: "nav",
     "aria-label": "Pagination",
     display: "flex",
-    variant: tokens.textVariant,
+    variant: "sm",
     lineHeight: 1,
-    alignItems: "center"
-  }, tokens.containerProps, rest), /*#__PURE__*/_react.default.createElement(_Flex.Flex, _extends({
-    order: tokens.order.pages
-  }, tokens.pagesProps), first && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Page, {
+    alignItems: "center",
+    justifyContent: "space-between"
+  }, rest), /*#__PURE__*/_react.default.createElement(NextPrevButton, {
+    "data-testid": "prev",
+    "aria-label": "Previous",
+    getHref: getHref,
+    onClick: handlePrevClick,
+    page: previous === null || previous === void 0 ? void 0 : previous.page,
+    disabled: !previous,
+    pr: 0.5
+  }, /*#__PURE__*/_react.default.createElement(_ChevronIcon.ChevronIcon, {
+    pr: 0.5,
+    direction: "left",
+    height: 12,
+    fill: "currentColor"
+  }), /*#__PURE__*/_react.default.createElement("span", null, "Prev")), /*#__PURE__*/_react.default.createElement(_Flex.Flex, null, first && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Page, {
     onClick: onClick,
     pageCursor: first,
     getHref: getHref
-  }), /*#__PURE__*/_react.default.createElement(_Flex.Flex, _extends({
+  }), /*#__PURE__*/_react.default.createElement(_Flex.Flex, {
     alignItems: "center",
-    p: 0.5
-  }, tokens.ellipsisProps), "\u2026")), around.map(function (pageCursor) {
+    p: 0.5,
+    color: "black60"
+  }, "\u2026")), around.map(function (pageCursor) {
     return /*#__PURE__*/_react.default.createElement(Page, {
       getHref: getHref,
       key: pageCursor.page,
       onClick: onClick,
       pageCursor: pageCursor
     });
-  }), last && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Flex.Flex, _extends({
+  }), last && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Flex.Flex, {
     alignItems: "center",
-    p: 0.5
-  }, tokens.ellipsisProps), "\u2026"), /*#__PURE__*/_react.default.createElement(Page, {
+    p: 0.5,
+    color: "black60"
+  }, "\u2026"), /*#__PURE__*/_react.default.createElement(Page, {
     onClick: onClick,
     pageCursor: last,
     getHref: getHref
   }))), /*#__PURE__*/_react.default.createElement(NextPrevButton, {
-    "data-testid": "prev",
-    "aria-label": "Previous",
-    order: tokens.order.prev,
-    getHref: getHref,
-    onClick: handlePrevClick,
-    page: previous === null || previous === void 0 ? void 0 : previous.page,
-    disabled: !previous,
-    pr: 0.5
-  }, /*#__PURE__*/_react.default.createElement(_ChevronIcon.ChevronIcon, {
-    pr: 0.5,
-    direction: "left",
-    height: 12,
-    fill: "currentColor"
-  }), /*#__PURE__*/_react.default.createElement("span", null, "Prev")), /*#__PURE__*/_react.default.createElement(NextPrevButton, {
     "data-testid": "next",
-    order: tokens.order.next,
     getHref: getHref,
     onClick: handleNextClick,
     page: nextPage,
@@ -168,29 +122,6 @@ var Page = function Page(_ref2) {
       page = _ref2$pageCursor.page,
       rest = _objectWithoutProperties(_ref2, _excluded2);
 
-  var tokens = (0, _Theme.useThemeConfig)({
-    v2: {
-      states: {
-        inactive: {
-          bg: "transparent"
-        },
-        active: {
-          bg: "black5"
-        }
-      }
-    },
-    v3: {
-      states: {
-        inactive: {
-          color: "black60"
-        },
-        active: {
-          color: "black100"
-        }
-      }
-    }
-  });
-
   var handleClick = function handleClick(event) {
     onClick && onClick(cursor, page, event);
   };
@@ -204,9 +135,12 @@ var Page = function Page(_ref2) {
     display: "flex",
     alignItems: "center",
     p: 0.5
-  }, isCurrent ? _objectSpread(_objectSpread({}, tokens.states.active), {}, {
+  }, isCurrent ? {
+    color: "black100",
     "aria-current": "page"
-  }) : tokens.states.inactive, rest), page);
+  } : {
+    color: "black60"
+  }, rest), page);
 };
 
 Page.displayName = "Page";
@@ -248,11 +182,4 @@ var NextPrevButton = function NextPrevButton(_ref3) {
 };
 
 NextPrevButton.displayName = "NextPrevButton";
-
-/**
- * Alias of Pagination
- * @deprecated Use `Pagination`
- */
-var LargePagination = Pagination;
-exports.LargePagination = LargePagination;
 //# sourceMappingURL=Pagination.js.map

package/dist/elements/Pagination/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Pagination/Pagination.tsx"],"names":["Pagination","getHref","hasNextPage","onClick","onNext","pageCursors","around","first","last","previous","rest","tokens","v2","order","pages","prev","next","textVariant","containerProps","flexDirection","justifyContent","mr","pagesProps","pr","ellipsisProps","color","v3","handlePrevClick","event","cursor","page","handleNextClick","nextPage","map","pageCursor","Page","isCurrent","states","inactive","bg","active","handleClick","href","NextPrevButton","disabled","children","opacity","pointerEvents","LargePagination"],"mappings":"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","sourcesContent":["import { TextVariant } from \"@artsy/palette-tokens/dist/typography/types\"\nimport React from \"react\"\nimport { ChevronIcon } from \"../../svgs/ChevronIcon\"\nimport { useThemeConfig } from \"../../Theme\"\nimport { Flex, FlexProps } from \"../Flex\"\nimport { Link, LinkProps } from \"../Link\"\nimport { Text } from \"../Text\"\n\ninterface PageCursor {\n  cursor: string\n  isCurrent: boolean\n  page: number\n}\n\nexport interface PageCursors {\n  around: PageCursor[]\n  first: PageCursor\n  last: PageCursor\n  previous: PageCursor\n}\n\nexport interface PaginationProps extends FlexProps {\n  getHref?: (page: number) => string\n  hasNextPage: boolean\n  onClick?: (cursor: string, page: number, event: React.MouseEvent) => void\n  onNext?: (event: React.MouseEvent, page: number) => void\n  pageCursors: PageCursors\n  scrollTo?: string\n}\n\n/** Pagination */\nexport const Pagination: React.FC<PaginationProps> = ({\n  getHref,\n  hasNextPage,\n  onClick,\n  onNext,\n  pageCursors: { around, first, last, previous },\n  ...rest\n}) => {\n  const tokens = useThemeConfig({\n    v2: {\n      order: { pages: 1, prev: 2, next: 3 },\n      textVariant: \"mediumText\" as TextVariant,\n      containerProps: {\n        flexDirection: \"row\",\n        justifyContent: \"flex-end\",\n        mr: -1,\n      } as FlexProps,\n      pagesProps: { pr: 4 },\n      ellipsisProps: { color: \"black30\" },\n    },\n    v3: {\n      order: { prev: 1, pages: 2, next: 3 },\n      textVariant: \"sm\" as TextVariant,\n      containerProps: { justifyContent: \"space-between\" },\n      pagesProps: {},\n      ellipsisProps: { color: \"black60\" },\n    },\n  })\n\n  const handlePrevClick = (event: React.MouseEvent) => {\n    if (previous) {\n      onClick && onClick(previous.cursor, previous.page, event)\n    }\n  }\n\n  const handleNextClick = (event: React.MouseEvent) => {\n    onNext && onNext(event, nextPage)\n  }\n\n  const nextPage = (previous?.page || 0) + 2\n\n  return (\n    <Text\n      as=\"nav\"\n      aria-label=\"Pagination\"\n      display=\"flex\"\n      variant={tokens.textVariant}\n      lineHeight={1}\n      alignItems=\"center\"\n      {...tokens.containerProps}\n      {...rest}\n    >\n      <Flex order={tokens.order.pages} {...tokens.pagesProps}>\n        {first && (\n          <>\n            <Page onClick={onClick} pageCursor={first} getHref={getHref} />\n            <Flex alignItems=\"center\" p={0.5} {...tokens.ellipsisProps}>\n              …\n            </Flex>\n          </>\n        )}\n\n        {around.map((pageCursor) => {\n          return (\n            <Page\n              getHref={getHref}\n              key={pageCursor.page}\n              onClick={onClick}\n              pageCursor={pageCursor}\n            />\n          )\n        })}\n\n        {last && (\n          <>\n            <Flex alignItems=\"center\" p={0.5} {...tokens.ellipsisProps}>\n              …\n            </Flex>\n            <Page onClick={onClick} pageCursor={last} getHref={getHref} />\n          </>\n        )}\n      </Flex>\n\n      <NextPrevButton\n        data-testid=\"prev\"\n        aria-label=\"Previous\"\n        order={tokens.order.prev}\n        getHref={getHref}\n        onClick={handlePrevClick}\n        page={previous?.page}\n        disabled={!previous}\n        pr={0.5}\n      >\n        <ChevronIcon\n          pr={0.5}\n          direction=\"left\"\n          height={12}\n          fill={\"currentColor\" as any}\n        />\n\n        <span>Prev</span>\n      </NextPrevButton>\n\n      <NextPrevButton\n        data-testid=\"next\"\n        order={tokens.order.next}\n        getHref={getHref}\n        onClick={handleNextClick}\n        page={nextPage}\n        disabled={!hasNextPage}\n        pl={0.5}\n      >\n        <span>Next</span>\n\n        <ChevronIcon\n          pl={0.5}\n          direction=\"right\"\n          height={12}\n          fill={\"currentColor\" as any}\n        />\n      </NextPrevButton>\n    </Text>\n  )\n}\n\ninterface PageProps extends LinkProps {\n  getHref?: (page: number) => string\n  onClick?: (cursor: string, page: number, event: React.MouseEvent) => void\n  pageCursor: PageCursor\n}\n\nconst Page: React.FC<PageProps> = ({\n  getHref,\n  onClick,\n  pageCursor: { cursor, isCurrent, page },\n  ...rest\n}) => {\n  const tokens = useThemeConfig({\n    v2: {\n      states: {\n        inactive: { bg: \"transparent\" },\n        active: { bg: \"black5\" },\n      },\n    },\n    v3: {\n      states: {\n        inactive: { color: \"black60\" },\n        active: { color: \"black100\" },\n      },\n    },\n  })\n\n  const handleClick = (\n    event: React.MouseEvent<HTMLAnchorElement, MouseEvent>\n  ) => {\n    onClick && onClick(cursor, page, event)\n  }\n\n  const href = page && typeof getHref !== \"undefined\" ? getHref(page) : \"\"\n\n  return (\n    <Link\n      href={href}\n      onClick={handleClick}\n      underlineBehavior=\"hover\"\n      borderRadius={2}\n      display=\"flex\"\n      alignItems=\"center\"\n      p={0.5}\n      {...(isCurrent\n        ? { ...tokens.states.active, \"aria-current\": \"page\" }\n        : tokens.states.inactive)}\n      {...rest}\n    >\n      {page}\n    </Link>\n  )\n}\n\nexport interface NextPrevButtonProps extends LinkProps {\n  disabled: boolean\n  getHref?: (page: number) => string\n  onClick: (event: React.MouseEvent) => void\n  page?: number\n}\n\nconst NextPrevButton: React.FC<NextPrevButtonProps> = ({\n  disabled,\n  getHref,\n  onClick,\n  page,\n  children,\n  ...rest\n}) => {\n  const href =\n    !disabled && page && typeof getHref !== \"undefined\" ? getHref(page) : \"\"\n\n  if (disabled) {\n    return (\n      <Flex\n        display=\"flex\"\n        alignItems=\"center\"\n        color=\"black30\"\n        py={0.5}\n        {...rest}\n      >\n        {children}\n      </Flex>\n    )\n  }\n\n  return (\n    <Link\n      href={href}\n      onClick={onClick}\n      underlineBehavior=\"hover\"\n      display=\"flex\"\n      alignItems=\"center\"\n      py={0.5}\n      style={\n        !disabled\n          ? {\n              opacity: 1,\n              pointerEvents: \"inherit\",\n            }\n          : {\n              opacity: 0.1,\n              pointerEvents: \"none\",\n            }\n      }\n      {...rest}\n    >\n      {children}\n    </Link>\n  )\n}\n\n/**\n * Alias of Pagination\n * @deprecated Use `Pagination`\n */\nexport const LargePagination = Pagination\n"],"file":"Pagination.js"}
+{"version":3,"sources":["../../../src/elements/Pagination/Pagination.tsx"],"names":["Pagination","getHref","hasNextPage","onClick","onNext","pageCursors","around","first","last","previous","rest","handlePrevClick","event","cursor","page","handleNextClick","nextPage","map","pageCursor","Page","isCurrent","handleClick","href","color","NextPrevButton","disabled","children","opacity","pointerEvents"],"mappings":"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","sourcesContent":["import React from \"react\"\nimport { ChevronIcon } from \"../../svgs/ChevronIcon\"\nimport { Flex, FlexProps } from \"../Flex\"\nimport { Link, LinkProps } from \"../Link\"\nimport { Text } from \"../Text\"\n\ninterface PageCursor {\n  cursor: string\n  isCurrent: boolean\n  page: number\n}\n\nexport interface PageCursors {\n  around: PageCursor[]\n  first: PageCursor\n  last: PageCursor\n  previous: PageCursor\n}\n\nexport interface PaginationProps extends FlexProps {\n  getHref?: (page: number) => string\n  hasNextPage: boolean\n  onClick?: (cursor: string, page: number, event: React.MouseEvent) => void\n  onNext?: (event: React.MouseEvent, page: number) => void\n  pageCursors: PageCursors\n  scrollTo?: string\n}\n\n/** Pagination */\nexport const Pagination: React.FC<PaginationProps> = ({\n  getHref,\n  hasNextPage,\n  onClick,\n  onNext,\n  pageCursors: { around, first, last, previous },\n  ...rest\n}) => {\n  const handlePrevClick = (event: React.MouseEvent) => {\n    if (previous) {\n      onClick && onClick(previous.cursor, previous.page, event)\n    }\n  }\n\n  const handleNextClick = (event: React.MouseEvent) => {\n    onNext && onNext(event, nextPage)\n  }\n\n  const nextPage = (previous?.page || 0) + 2\n\n  return (\n    <Text\n      as=\"nav\"\n      aria-label=\"Pagination\"\n      display=\"flex\"\n      variant=\"sm\"\n      lineHeight={1}\n      alignItems=\"center\"\n      justifyContent=\"space-between\"\n      {...rest}\n    >\n      <NextPrevButton\n        data-testid=\"prev\"\n        aria-label=\"Previous\"\n        getHref={getHref}\n        onClick={handlePrevClick}\n        page={previous?.page}\n        disabled={!previous}\n        pr={0.5}\n      >\n        <ChevronIcon\n          pr={0.5}\n          direction=\"left\"\n          height={12}\n          fill={\"currentColor\" as any}\n        />\n\n        <span>Prev</span>\n      </NextPrevButton>\n\n      <Flex>\n        {first && (\n          <>\n            <Page onClick={onClick} pageCursor={first} getHref={getHref} />\n            <Flex alignItems=\"center\" p={0.5} color=\"black60\">\n              …\n            </Flex>\n          </>\n        )}\n\n        {around.map((pageCursor) => {\n          return (\n            <Page\n              getHref={getHref}\n              key={pageCursor.page}\n              onClick={onClick}\n              pageCursor={pageCursor}\n            />\n          )\n        })}\n\n        {last && (\n          <>\n            <Flex alignItems=\"center\" p={0.5} color=\"black60\">\n              …\n            </Flex>\n\n            <Page onClick={onClick} pageCursor={last} getHref={getHref} />\n          </>\n        )}\n      </Flex>\n\n      <NextPrevButton\n        data-testid=\"next\"\n        getHref={getHref}\n        onClick={handleNextClick}\n        page={nextPage}\n        disabled={!hasNextPage}\n        pl={0.5}\n      >\n        <span>Next</span>\n\n        <ChevronIcon\n          pl={0.5}\n          direction=\"right\"\n          height={12}\n          fill={\"currentColor\" as any}\n        />\n      </NextPrevButton>\n    </Text>\n  )\n}\n\ninterface PageProps extends LinkProps {\n  getHref?: (page: number) => string\n  onClick?: (cursor: string, page: number, event: React.MouseEvent) => void\n  pageCursor: PageCursor\n}\n\nconst Page: React.FC<PageProps> = ({\n  getHref,\n  onClick,\n  pageCursor: { cursor, isCurrent, page },\n  ...rest\n}) => {\n  const handleClick = (\n    event: React.MouseEvent<HTMLAnchorElement, MouseEvent>\n  ) => {\n    onClick && onClick(cursor, page, event)\n  }\n\n  const href = page && typeof getHref !== \"undefined\" ? getHref(page) : \"\"\n\n  return (\n    <Link\n      href={href}\n      onClick={handleClick}\n      underlineBehavior=\"hover\"\n      borderRadius={2}\n      display=\"flex\"\n      alignItems=\"center\"\n      p={0.5}\n      {...(isCurrent\n        ? { color: \"black100\", \"aria-current\": \"page\" }\n        : { color: \"black60\" })}\n      {...rest}\n    >\n      {page}\n    </Link>\n  )\n}\n\nexport interface NextPrevButtonProps extends LinkProps {\n  disabled: boolean\n  getHref?: (page: number) => string\n  onClick: (event: React.MouseEvent) => void\n  page?: number\n}\n\nconst NextPrevButton: React.FC<NextPrevButtonProps> = ({\n  disabled,\n  getHref,\n  onClick,\n  page,\n  children,\n  ...rest\n}) => {\n  const href =\n    !disabled && page && typeof getHref !== \"undefined\" ? getHref(page) : \"\"\n\n  if (disabled) {\n    return (\n      <Flex\n        display=\"flex\"\n        alignItems=\"center\"\n        color=\"black30\"\n        py={0.5}\n        {...rest}\n      >\n        {children}\n      </Flex>\n    )\n  }\n\n  return (\n    <Link\n      href={href}\n      onClick={onClick}\n      underlineBehavior=\"hover\"\n      display=\"flex\"\n      alignItems=\"center\"\n      py={0.5}\n      style={\n        !disabled\n          ? {\n              opacity: 1,\n              pointerEvents: \"inherit\",\n            }\n          : {\n              opacity: 0.1,\n              pointerEvents: \"none\",\n            }\n      }\n      {...rest}\n    >\n      {children}\n    </Link>\n  )\n}\n"],"file":"Pagination.js"}

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

@@ -1,2 +1 @@
 export * from "./Pagination";
-export * from "./SmallPagination";

package/dist/elements/Pagination/index.js

@@ -16,17 +16,4 @@ Object.keys(_Pagination).forEach(function (key) {
     }
   });
 });
-
-var _SmallPagination = require("./SmallPagination");
-
-Object.keys(_SmallPagination).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _SmallPagination[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _SmallPagination[key];
-    }
-  });
-});
 //# sourceMappingURL=index.js.map

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

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

package/dist/elements/ProgressBar/ProgressBar.js

@@ -7,8 +7,6 @@ exports.ProgressBar = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _Theme = require("../../Theme");
-
 var _Box = require("../Box");
 
 var _excluded = ["percentComplete", "highlight", "showBackground", "transition"];
@@ -32,10 +30,6 @@ var ProgressBar = function ProgressBar(_ref) {
       transition = _ref$transition === void 0 ? "transform 1s ease" : _ref$transition,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  var bgColor = (0, _Theme.useThemeConfig)({
-    v2: "black10",
-    v3: "black30"
-  });
   return /*#__PURE__*/_react.default.createElement(_Box.Box, _extends({
     tabIndex: 0,
     role: "progressbar",
@@ -47,7 +41,7 @@ var ProgressBar = function ProgressBar(_ref) {
     overflow: "hidden",
     mt: 0.5,
     mb: 1,
-    bg: showBackground ? bgColor : "transparent"
+    bg: showBackground ? "black30" : "transparent"
   }, rest), /*#__PURE__*/_react.default.createElement(_Box.Box, {
     bg: highlight,
     width: "100%",

package/dist/elements/ProgressBar/ProgressBar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/ProgressBar/ProgressBar.tsx"],"names":["ProgressBar","percentComplete","highlight","showBackground","transition","rest","bgColor","v2","v3","transform","backfaceVisibility"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;;;;;;;;;;;AASA;AACO,IAAMA,WAAuC,GAAG,SAA1CA,WAA0C,OAMjD;AAAA,MALJC,eAKI,QALJA,eAKI;AAAA,4BAJJC,SAII;AAAA,MAJJA,SAII,+BAJQ,OAIR;AAAA,iCAHJC,cAGI;AAAA,MAHJA,cAGI,oCAHa,IAGb;AAAA,6BAFJC,UAEI;AAAA,MAFJA,UAEI,gCAFS,mBAET;AAAA,MADDC,IACC;;AACJ,MAAMC,OAAO,GAAG,2BAAe;AAAEC,IAAAA,EAAE,EAAE,SAAN;AAAiBC,IAAAA,EAAE,EAAE;AAArB,GAAf,CAAhB;AAEA,sBACE,6BAAC,QAAD;AACE,IAAA,QAAQ,EAAE,CADZ;AAEE,IAAA,IAAI,EAAC,aAFP;AAGE,qBAAeP,eAHjB;AAIE,qBAAe,CAJjB;AAKE,qBAAe,GALjB;AAME,IAAA,MAAM,EAAC,KANT;AAOE,IAAA,QAAQ,EAAC,UAPX;AAQE,IAAA,QAAQ,EAAC,QARX;AASE,IAAA,EAAE,EAAE,GATN;AAUE,IAAA,EAAE,EAAE,CAVN;AAWE,IAAA,EAAE,EAAEE,cAAc,GAAGG,OAAH,GAAa;AAXjC,KAYMD,IAZN,gBAcE,6BAAC,QAAD;AACE,IAAA,EAAE,EAAEH,SADN;AAEE,IAAA,KAAK,EAAC,MAFR;AAGE,IAAA,MAAM,EAAC,MAHT;AAIE,IAAA,KAAK,EAAE;AACLE,MAAAA,UAAU,EAAVA,UADK;AAELK,MAAAA,SAAS,wBAAiB,MAAMR,eAAvB,OAFJ;AAGLS,MAAAA,kBAAkB,EAAE;AAHf;AAJT,IAdF,CADF;AA2BD,CApCM;;;AAAMV,W","sourcesContent":["import React from \"react\"\nimport { useThemeConfig } from \"../../Theme\"\nimport { Color } from \"../../themes/types\"\nimport { Box, BoxProps } from \"../Box\"\n\nexport interface ProgressBarProps extends BoxProps {\n  percentComplete: number\n  highlight?: Color\n  showBackground?: boolean\n  transition?: string\n}\n\n/** ProgressBar */\nexport const ProgressBar: React.FC<ProgressBarProps> = ({\n  percentComplete,\n  highlight = \"brand\",\n  showBackground = true,\n  transition = \"transform 1s ease\",\n  ...rest\n}) => {\n  const bgColor = useThemeConfig({ v2: \"black10\", v3: \"black30\" })\n\n  return (\n    <Box\n      tabIndex={0}\n      role=\"progressbar\"\n      aria-valuenow={percentComplete}\n      aria-valuemin={0}\n      aria-valuemax={100}\n      height=\"2px\"\n      position=\"relative\"\n      overflow=\"hidden\"\n      mt={0.5}\n      mb={1}\n      bg={showBackground ? bgColor : \"transparent\"}\n      {...rest}\n    >\n      <Box\n        bg={highlight}\n        width=\"100%\"\n        height=\"100%\"\n        style={{\n          transition,\n          transform: `translateX(-${100 - percentComplete}%)`,\n          backfaceVisibility: \"hidden\",\n        }}\n      />\n    </Box>\n  )\n}\n"],"file":"ProgressBar.js"}
+{"version":3,"sources":["../../../src/elements/ProgressBar/ProgressBar.tsx"],"names":["ProgressBar","percentComplete","highlight","showBackground","transition","rest","transform","backfaceVisibility"],"mappings":";;;;;;;AAAA;;AAEA;;;;;;;;;;;;AASA;AACO,IAAMA,WAAuC,GAAG,SAA1CA,WAA0C,OAMjD;AAAA,MALJC,eAKI,QALJA,eAKI;AAAA,4BAJJC,SAII;AAAA,MAJJA,SAII,+BAJQ,OAIR;AAAA,iCAHJC,cAGI;AAAA,MAHJA,cAGI,oCAHa,IAGb;AAAA,6BAFJC,UAEI;AAAA,MAFJA,UAEI,gCAFS,mBAET;AAAA,MADDC,IACC;;AACJ,sBACE,6BAAC,QAAD;AACE,IAAA,QAAQ,EAAE,CADZ;AAEE,IAAA,IAAI,EAAC,aAFP;AAGE,qBAAeJ,eAHjB;AAIE,qBAAe,CAJjB;AAKE,qBAAe,GALjB;AAME,IAAA,MAAM,EAAC,KANT;AAOE,IAAA,QAAQ,EAAC,UAPX;AAQE,IAAA,QAAQ,EAAC,QARX;AASE,IAAA,EAAE,EAAE,GATN;AAUE,IAAA,EAAE,EAAE,CAVN;AAWE,IAAA,EAAE,EAAEE,cAAc,GAAG,SAAH,GAAe;AAXnC,KAYME,IAZN,gBAcE,6BAAC,QAAD;AACE,IAAA,EAAE,EAAEH,SADN;AAEE,IAAA,KAAK,EAAC,MAFR;AAGE,IAAA,MAAM,EAAC,MAHT;AAIE,IAAA,KAAK,EAAE;AACLE,MAAAA,UAAU,EAAVA,UADK;AAELE,MAAAA,SAAS,wBAAiB,MAAML,eAAvB,OAFJ;AAGLM,MAAAA,kBAAkB,EAAE;AAHf;AAJT,IAdF,CADF;AA2BD,CAlCM;;;AAAMP,W","sourcesContent":["import React from \"react\"\nimport { Color } from \"../../themes/types\"\nimport { Box, BoxProps } from \"../Box\"\n\nexport interface ProgressBarProps extends BoxProps {\n  percentComplete: number\n  highlight?: Color\n  showBackground?: boolean\n  transition?: string\n}\n\n/** ProgressBar */\nexport const ProgressBar: React.FC<ProgressBarProps> = ({\n  percentComplete,\n  highlight = \"brand\",\n  showBackground = true,\n  transition = \"transform 1s ease\",\n  ...rest\n}) => {\n  return (\n    <Box\n      tabIndex={0}\n      role=\"progressbar\"\n      aria-valuenow={percentComplete}\n      aria-valuemin={0}\n      aria-valuemax={100}\n      height=\"2px\"\n      position=\"relative\"\n      overflow=\"hidden\"\n      mt={0.5}\n      mb={1}\n      bg={showBackground ? \"black30\" : \"transparent\"}\n      {...rest}\n    >\n      <Box\n        bg={highlight}\n        width=\"100%\"\n        height=\"100%\"\n        style={{\n          transition,\n          transform: `translateX(-${100 - percentComplete}%)`,\n          backfaceVisibility: \"hidden\",\n        }}\n      />\n    </Box>\n  )\n}\n"],"file":"ProgressBar.js"}

package/dist/elements/ProgressDots/ProgressDots.js

@@ -11,8 +11,6 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _styledSystem = require("styled-system");
 
-var _Theme = require("../../Theme");
-
 var _Box = require("../Box");
 
 var _Clickable = require("../Clickable");
@@ -52,10 +50,6 @@ var ProgressDots = function ProgressDots(_ref) {
       onClick = _ref.onClick,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  var bgColor = (0, _Theme.useThemeConfig)({
-    v2: "black10",
-    v3: "black30"
-  });
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Box.Box, _extends({
     role: "presentation",
     display: "flex",
@@ -66,7 +60,7 @@ var ProgressDots = function ProgressDots(_ref) {
     var indicator = /*#__PURE__*/_react.default.createElement(Indicator, {
       key: i,
       variant: indicatorVariant,
-      bg: i === activeIndex ? "black100" : bgColor,
+      bg: i === activeIndex ? "black100" : "black30",
       mx: 0.5
     });
 

package/dist/elements/ProgressDots/ProgressDots.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/ProgressDots/ProgressDots.tsx"],"names":["VARIANTS","dot","width","height","borderRadius","dash","flex","ProgressDots","activeIndex","amount","variant","indicatorVariant","onClick","rest","bgColor","v2","v3","Array","from","map","_","i","indicator","handleClick","Indicator","Box","variants","displayName"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,QAAQ,GAAG;AACfC,EAAAA,GAAG,EAAE;AACHC,IAAAA,KAAK,EAAE,KADJ;AAEHC,IAAAA,MAAM,EAAE,KAFL;AAGHC,IAAAA,YAAY,EAAE;AAHX,GADU;AAMfC,EAAAA,IAAI,EAAE;AACJF,IAAAA,MAAM,EAAE,KADJ;AAEJG,IAAAA,IAAI,EAAE;AAFF;AANS,CAAjB;;AAsBA;AACA;AACA;AACO,IAAMC,YAAyC,GAAG,SAA5CA,YAA4C,OAMnD;AAAA,MALJC,WAKI,QALJA,WAKI;AAAA,MAJJC,MAII,QAJJA,MAII;AAAA,0BAHJC,OAGI;AAAA,MAHKC,gBAGL,6BAHwB,KAGxB;AAAA,MAFJC,OAEI,QAFJA,OAEI;AAAA,MADDC,IACC;;AACJ,MAAMC,OAAO,GAAG,2BAAe;AAAEC,IAAAA,EAAE,EAAE,SAAN;AAAiBC,IAAAA,EAAE,EAAE;AAArB,GAAf,CAAhB;AAEA,sBACE,yEACE,6BAAC,QAAD;AACE,IAAA,IAAI,EAAC,cADP;AAEE,IAAA,OAAO,EAAC,MAFV;AAGE,IAAA,UAAU,EAAC,QAHb;AAIE,IAAA,cAAc,EAAC,QAJjB;AAKE,IAAA,EAAE,EAAE;AALN,KAMMH,IANN,GAQGI,KAAK,CAACC,IAAN,CAAWD,KAAK,CAACR,MAAD,CAAhB,EAA0BU,GAA1B,CAA8B,UAACC,CAAD,EAAIC,CAAJ,EAAU;AACvC,QAAMC,SAAS,gBACb,6BAAC,SAAD;AACE,MAAA,GAAG,EAAED,CADP;AAEE,MAAA,OAAO,EAAEV,gBAFX;AAGE,MAAA,EAAE,EAAEU,CAAC,KAAKb,WAAN,GAAoB,UAApB,GAAiCM,OAHvC;AAIE,MAAA,EAAE,EAAE;AAJN,MADF;;AASA,QAAMS,WAAW,GAAG,SAAdA,WAAc;AAAA,aAAMX,OAAO,IAAIA,OAAO,CAACS,CAAD,CAAxB;AAAA,KAApB;;AAEA,QAAIT,OAAJ,EAAa;AACX,0BACE,6BAAC,oBAAD;AACE,QAAA,GAAG,EAAES,CADP;AAEE,QAAA,OAAO,EAAC,OAFV;AAGE,QAAA,QAAQ,EAAC,UAHX;AAIE,QAAA,KAAK,EAAEV,gBAAgB,KAAK,MAArB,GAA8B,MAA9B,GAAuC,MAJhD;AAKE,QAAA,OAAO,EAAEY;AALX,sBAQE,6BAAC,QAAD;AACE,QAAA,QAAQ,EAAC,UADX;AAEE,QAAA,GAAG,EAAE,CAAC,EAFR;AAGE,QAAA,MAAM,EAAE,CAAC,EAHX;AAIE,QAAA,IAAI,EAAE,CAJR;AAKE,QAAA,KAAK,EAAC;AALR,QARF,EAgBGD,SAhBH,CADF;AAoBD;;AAED,WAAOA,SAAP;AACD,GApCA,CARH,CADF,eAgDE,6BAAC,8BAAD;AAAgB,iBAAU,QAA1B;AAAmC,mBAAY;AAA/C,cACQd,WAAW,GAAG,CADtB,UAC6BC,MAD7B,CAhDF,CADF;AAsDD,CA/DM;;;AAiEP,IAAMe,SAAS,GAAG,+BAAOC,QAAP,CAAH;AAAA;AAAA;AAAA,gDAIX,2BAAQ;AAAEC,EAAAA,QAAQ,EAAE1B;AAAZ,CAAR,CAJW,CAAf;AAQAwB,SAAS,CAACG,WAAV,GAAwB,WAAxB","sourcesContent":["import React from \"react\"\nimport styled from \"styled-components\"\nimport { variant } from \"styled-system\"\nimport { useThemeConfig } from \"../../Theme\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Clickable } from \"../Clickable\"\nimport { VisuallyHidden } from \"../VisuallyHidden\"\n\nconst VARIANTS = {\n  dot: {\n    width: \"5px\",\n    height: \"5px\",\n    borderRadius: \"50%\",\n  },\n  dash: {\n    height: \"1px\",\n    flex: 1,\n  },\n}\n\ntype Variant = keyof typeof VARIANTS\n\n/** ProgressDotsProps */\nexport interface ProgressDotsProps extends BoxProps {\n  activeIndex: number\n  amount: number\n  variant?: Variant\n  onClick?: (index: number) => void\n}\n\n/**\n * Renders an `amount` of dots and announces progress when updated\n */\nexport const ProgressDots: React.FC<ProgressDotsProps> = ({\n  activeIndex,\n  amount,\n  variant: indicatorVariant = \"dot\",\n  onClick,\n  ...rest\n}) => {\n  const bgColor = useThemeConfig({ v2: \"black10\", v3: \"black30\" })\n\n  return (\n    <>\n      <Box\n        role=\"presentation\"\n        display=\"flex\"\n        alignItems=\"center\"\n        justifyContent=\"center\"\n        my={0.5}\n        {...rest}\n      >\n        {Array.from(Array(amount)).map((_, i) => {\n          const indicator = (\n            <Indicator\n              key={i}\n              variant={indicatorVariant}\n              bg={i === activeIndex ? \"black100\" : bgColor}\n              mx={0.5}\n            />\n          )\n\n          const handleClick = () => onClick && onClick(i)\n\n          if (onClick) {\n            return (\n              <Clickable\n                key={i}\n                display=\"block\"\n                position=\"relative\"\n                width={indicatorVariant === \"dash\" ? \"100%\" : \"auto\"}\n                onClick={handleClick}\n              >\n                {/* Pads out hit area. */}\n                <Box\n                  position=\"absolute\"\n                  top={-10}\n                  bottom={-10}\n                  left={0}\n                  width=\"100%\"\n                />\n\n                {indicator}\n              </Clickable>\n            )\n          }\n\n          return indicator\n        })}\n      </Box>\n\n      <VisuallyHidden aria-live=\"polite\" aria-atomic=\"true\">\n        Page {activeIndex + 1} of {amount}\n      </VisuallyHidden>\n    </>\n  )\n}\n\nconst Indicator = styled(Box)<{\n  variant: Variant\n  onClick?: (index: number) => void\n}>`\n  ${variant({ variants: VARIANTS })}\n  transition: background-color 250ms;\n`\n\nIndicator.displayName = \"Indicator\"\n"],"file":"ProgressDots.js"}
+{"version":3,"sources":["../../../src/elements/ProgressDots/ProgressDots.tsx"],"names":["VARIANTS","dot","width","height","borderRadius","dash","flex","ProgressDots","activeIndex","amount","variant","indicatorVariant","onClick","rest","Array","from","map","_","i","indicator","handleClick","Indicator","Box","variants","displayName"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,QAAQ,GAAG;AACfC,EAAAA,GAAG,EAAE;AACHC,IAAAA,KAAK,EAAE,KADJ;AAEHC,IAAAA,MAAM,EAAE,KAFL;AAGHC,IAAAA,YAAY,EAAE;AAHX,GADU;AAMfC,EAAAA,IAAI,EAAE;AACJF,IAAAA,MAAM,EAAE,KADJ;AAEJG,IAAAA,IAAI,EAAE;AAFF;AANS,CAAjB;;AAsBA;AACA;AACA;AACO,IAAMC,YAAyC,GAAG,SAA5CA,YAA4C,OAMnD;AAAA,MALJC,WAKI,QALJA,WAKI;AAAA,MAJJC,MAII,QAJJA,MAII;AAAA,0BAHJC,OAGI;AAAA,MAHKC,gBAGL,6BAHwB,KAGxB;AAAA,MAFJC,OAEI,QAFJA,OAEI;AAAA,MADDC,IACC;;AACJ,sBACE,yEACE,6BAAC,QAAD;AACE,IAAA,IAAI,EAAC,cADP;AAEE,IAAA,OAAO,EAAC,MAFV;AAGE,IAAA,UAAU,EAAC,QAHb;AAIE,IAAA,cAAc,EAAC,QAJjB;AAKE,IAAA,EAAE,EAAE;AALN,KAMMA,IANN,GAQGC,KAAK,CAACC,IAAN,CAAWD,KAAK,CAACL,MAAD,CAAhB,EAA0BO,GAA1B,CAA8B,UAACC,CAAD,EAAIC,CAAJ,EAAU;AACvC,QAAMC,SAAS,gBACb,6BAAC,SAAD;AACE,MAAA,GAAG,EAAED,CADP;AAEE,MAAA,OAAO,EAAEP,gBAFX;AAGE,MAAA,EAAE,EAAEO,CAAC,KAAKV,WAAN,GAAoB,UAApB,GAAiC,SAHvC;AAIE,MAAA,EAAE,EAAE;AAJN,MADF;;AASA,QAAMY,WAAW,GAAG,SAAdA,WAAc;AAAA,aAAMR,OAAO,IAAIA,OAAO,CAACM,CAAD,CAAxB;AAAA,KAApB;;AAEA,QAAIN,OAAJ,EAAa;AACX,0BACE,6BAAC,oBAAD;AACE,QAAA,GAAG,EAAEM,CADP;AAEE,QAAA,OAAO,EAAC,OAFV;AAGE,QAAA,QAAQ,EAAC,UAHX;AAIE,QAAA,KAAK,EAAEP,gBAAgB,KAAK,MAArB,GAA8B,MAA9B,GAAuC,MAJhD;AAKE,QAAA,OAAO,EAAES;AALX,sBAQE,6BAAC,QAAD;AACE,QAAA,QAAQ,EAAC,UADX;AAEE,QAAA,GAAG,EAAE,CAAC,EAFR;AAGE,QAAA,MAAM,EAAE,CAAC,EAHX;AAIE,QAAA,IAAI,EAAE,CAJR;AAKE,QAAA,KAAK,EAAC;AALR,QARF,EAgBGD,SAhBH,CADF;AAoBD;;AAED,WAAOA,SAAP;AACD,GApCA,CARH,CADF,eAgDE,6BAAC,8BAAD;AAAgB,iBAAU,QAA1B;AAAmC,mBAAY;AAA/C,cACQX,WAAW,GAAG,CADtB,UAC6BC,MAD7B,CAhDF,CADF;AAsDD,CA7DM;;;AA+DP,IAAMY,SAAS,GAAG,+BAAOC,QAAP,CAAH;AAAA;AAAA;AAAA,gDAIX,2BAAQ;AAAEC,EAAAA,QAAQ,EAAEvB;AAAZ,CAAR,CAJW,CAAf;AAQAqB,SAAS,CAACG,WAAV,GAAwB,WAAxB","sourcesContent":["import React from \"react\"\nimport styled from \"styled-components\"\nimport { variant } from \"styled-system\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Clickable } from \"../Clickable\"\nimport { VisuallyHidden } from \"../VisuallyHidden\"\n\nconst VARIANTS = {\n  dot: {\n    width: \"5px\",\n    height: \"5px\",\n    borderRadius: \"50%\",\n  },\n  dash: {\n    height: \"1px\",\n    flex: 1,\n  },\n}\n\ntype Variant = keyof typeof VARIANTS\n\n/** ProgressDotsProps */\nexport interface ProgressDotsProps extends BoxProps {\n  activeIndex: number\n  amount: number\n  variant?: Variant\n  onClick?: (index: number) => void\n}\n\n/**\n * Renders an `amount` of dots and announces progress when updated\n */\nexport const ProgressDots: React.FC<ProgressDotsProps> = ({\n  activeIndex,\n  amount,\n  variant: indicatorVariant = \"dot\",\n  onClick,\n  ...rest\n}) => {\n  return (\n    <>\n      <Box\n        role=\"presentation\"\n        display=\"flex\"\n        alignItems=\"center\"\n        justifyContent=\"center\"\n        my={0.5}\n        {...rest}\n      >\n        {Array.from(Array(amount)).map((_, i) => {\n          const indicator = (\n            <Indicator\n              key={i}\n              variant={indicatorVariant}\n              bg={i === activeIndex ? \"black100\" : \"black30\"}\n              mx={0.5}\n            />\n          )\n\n          const handleClick = () => onClick && onClick(i)\n\n          if (onClick) {\n            return (\n              <Clickable\n                key={i}\n                display=\"block\"\n                position=\"relative\"\n                width={indicatorVariant === \"dash\" ? \"100%\" : \"auto\"}\n                onClick={handleClick}\n              >\n                {/* Pads out hit area. */}\n                <Box\n                  position=\"absolute\"\n                  top={-10}\n                  bottom={-10}\n                  left={0}\n                  width=\"100%\"\n                />\n\n                {indicator}\n              </Clickable>\n            )\n          }\n\n          return indicator\n        })}\n      </Box>\n\n      <VisuallyHidden aria-live=\"polite\" aria-atomic=\"true\">\n        Page {activeIndex + 1} of {amount}\n      </VisuallyHidden>\n    </>\n  )\n}\n\nconst Indicator = styled(Box)<{\n  variant: Variant\n  onClick?: (index: number) => void\n}>`\n  ${variant({ variants: VARIANTS })}\n  transition: background-color 250ms;\n`\n\nIndicator.displayName = \"Indicator\"\n"],"file":"ProgressDots.js"}

package/dist/elements/Radio/Radio.js

@@ -15,15 +15,11 @@ var _Flex = require("../../elements/Flex");
 
 var _isText = require("../../helpers/isText");
 
-var _Theme = require("../../Theme");
-
 var _Text = require("../Text");
 
 var _RadioDot = require("./RadioDot");
 
-var _v = require("./tokens/v2");
-
-var _v2 = require("./tokens/v3");
+var _tokens = require("./tokens");
 
 var _excluded = ["children", "disabled", "hover", "focus", "error", "label", "selected", "value", "onSelect"];
 
@@ -52,17 +48,6 @@ var Radio = function Radio(_ref) {
       onSelect = _ref.onSelect,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  var tokens = (0, _Theme.useThemeConfig)({
-    v2: {
-      titleVariant: "text",
-      descriptionVariant: "small"
-    },
-    v3: {
-      titleVariant: "sm-display",
-      descriptionVariant: "xs"
-    }
-  });
-
   var handleClick = function handleClick() {
     onSelect && onSelect({
       selected: !selected,
@@ -110,10 +95,10 @@ var Radio = function Radio(_ref) {
     alignItems: "center",
     flex: 1
   }, (0, _isText.isText)(title) ? /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    variant: tokens.titleVariant,
+    variant: "sm-display",
     lineHeight: description ? undefined : 1
   }, title) : title), (0, _isText.isText)(description) ? /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    variant: tokens.descriptionVariant,
+    variant: "xs",
     color: "black60"
   }, description) : description));
 };
@@ -124,16 +109,6 @@ var Container = (0, _styledComponents.default)(_Flex.Flex).withConfig({
   displayName: "Radio__Container",
   componentId: "dpre3w-0"
 })(["", ""], function (props) {
-  var states = (0, _Theme.getThemeConfig)(props, {
-    v2: {
-      radio: _v.RADIO_STATES,
-      dot: _v.RADIO_DOT_STATES
-    },
-    v3: {
-      radio: _v2.RADIO_STATES,
-      dot: _v2.RADIO_DOT_STATES
-    }
-  });
-  return (0, _styledComponents.css)(["", " ", " ", " ", " ", " &:hover{", "}&:focus{", " > div:first-of-type{", "}}&:disabled{pointer-events:none;", "}"], props.selected ? states.radio.selected : states.radio.default, props.focus && states.radio.focus, props.hover && states.radio.hover, props.disabled && states.radio.disabled, props.error && states.radio.error, !props.error && !props.disabled && (0, _styledComponents.css)(["", " > div:first-of-type{", "}"], states.radio.hover, props.selected ? states.dot.hover.selected : states.dot.hover.resting), states.radio.focus, props.selected ? states.dot.focus.selected : states.dot.focus.resting, states.radio.disabled);
+  return (0, _styledComponents.css)(["", " ", " ", " ", " ", " &:hover{", "}&:focus{", " > div:first-of-type{", "}}&:disabled{pointer-events:none;", "}"], props.selected ? _tokens.RADIO_STATES.selected : _tokens.RADIO_STATES.default, props.focus && _tokens.RADIO_STATES.focus, props.hover && _tokens.RADIO_STATES.hover, props.disabled && _tokens.RADIO_STATES.disabled, props.error && _tokens.RADIO_STATES.error, !props.error && !props.disabled && (0, _styledComponents.css)(["", " > div:first-of-type{", "}"], _tokens.RADIO_STATES.hover, props.selected ? _tokens.RADIO_DOT_STATES.hover.selected : _tokens.RADIO_DOT_STATES.hover.resting), _tokens.RADIO_STATES.focus, props.selected ? _tokens.RADIO_DOT_STATES.focus.selected : _tokens.RADIO_DOT_STATES.focus.resting, _tokens.RADIO_STATES.disabled);
 });
 //# sourceMappingURL=Radio.js.map