@artsy/palette 45.14.0-canary.1497.33070.0 → 45.14.0-canary.1497.33079.0

package/dist/esm/elements/BorderBox/BorderBox.js

@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { Box, BoxProps } from "../Box";
+import { Box } from "../Box";
 /**
  * A `div` that has a common border and padding set by default
  * @deprecated: Use `Box` along with props e.g. `border="1px solid" borderColor="mono10" p={2}`,

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

@@ -1 +1 @@
-{"version":3,"file":"BorderBox.js","names":["styled","Box","BoxProps","BorderBox","withConfig","displayName","componentId","defaultProps","borderColor","p"],"sources":["../../../../src/elements/BorderBox/BorderBox.tsx"],"sourcesContent":["import styled from \"styled-components\"\nimport { Box, BoxProps } from \"../Box\"\n\nexport type BorderBoxProps = BoxProps\n\n/**\n * A `div` that has a common border and padding set by default\n * @deprecated: Use `Box` along with props e.g. `border=\"1px solid\" borderColor=\"mono10\" p={2}`,\n * as needed.\n */\nexport const BorderBox = styled(Box)`\n  border-width: 1px;\n  border-style: solid;\n`\n\nBorderBox.displayName = \"BorderBox\"\n\nBorderBox.defaultProps = {\n  borderColor: \"mono10\",\n  p: 2,\n}\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,GAAG,EAAEC,QAAQ;AAItB;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,SAAS,GAAGH,MAAM,CAACC,GAAG,CAAC,CAAAG,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,4CAGnC;AAEDH,SAAS,CAACE,WAAW,GAAG,WAAW;AAEnCF,SAAS,CAACI,YAAY,GAAG;EACvBC,WAAW,EAAE,QAAQ;EACrBC,CAAC,EAAE;AACL,CAAC"}
+{"version":3,"file":"BorderBox.js","names":["styled","Box","BorderBox","withConfig","displayName","componentId","defaultProps","borderColor","p"],"sources":["../../../../src/elements/BorderBox/BorderBox.tsx"],"sourcesContent":["import styled from \"styled-components\"\nimport { Box, BoxProps } from \"../Box\"\n\nexport type BorderBoxProps = BoxProps\n\n/**\n * A `div` that has a common border and padding set by default\n * @deprecated: Use `Box` along with props e.g. `border=\"1px solid\" borderColor=\"mono10\" p={2}`,\n * as needed.\n */\nexport const BorderBox = styled(Box)`\n  border-width: 1px;\n  border-style: solid;\n`\n\nBorderBox.displayName = \"BorderBox\"\n\nBorderBox.defaultProps = {\n  borderColor: \"mono10\",\n  p: 2,\n}\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,GAAG;AAIZ;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,SAAS,GAAGF,MAAM,CAACC,GAAG,CAAC,CAAAE,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,4CAGnC;AAEDH,SAAS,CAACE,WAAW,GAAG,WAAW;AAEnCF,SAAS,CAACI,YAAY,GAAG;EACvBC,WAAW,EAAE,QAAQ;EACrBC,CAAC,EAAE;AACL,CAAC"}

package/dist/esm/elements/BorderBox/BorderBoxBase.js

@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { Flex, FlexProps } from "../Flex";
+import { Flex } from "../Flex";
 /**
  * A `div` that has a common border and padding set by default
  * @deprecated: Use `Box`

package/dist/esm/elements/BorderBox/BorderBoxBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"BorderBoxBase.js","names":["styled","Flex","FlexProps","BorderBoxBase","withConfig","displayName","componentId","defaultProps","borderColor","p"],"sources":["../../../../src/elements/BorderBox/BorderBoxBase.tsx"],"sourcesContent":["import styled from \"styled-components\"\nimport { Flex, FlexProps } from \"../Flex\"\n\nexport interface BorderBoxProps extends FlexProps {\n  hover?: boolean\n}\n\n/**\n * A `div` that has a common border and padding set by default\n * @deprecated: Use `Box`\n */\nexport const BorderBoxBase = styled(Flex)<BorderBoxProps>`\n  border-width: 1px;\n  border-style: solid;\n`\n\nBorderBoxBase.defaultProps = {\n  borderColor: \"mono10\",\n  p: 2,\n}\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,IAAI,EAAEC,SAAS;AAMxB;AACA;AACA;AACA;AACA,OAAO,IAAMC,aAAa,GAAGH,MAAM,CAACC,IAAI,CAAC,CAAAG,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,4CAGxC;AAEDH,aAAa,CAACI,YAAY,GAAG;EAC3BC,WAAW,EAAE,QAAQ;EACrBC,CAAC,EAAE;AACL,CAAC"}
+{"version":3,"file":"BorderBoxBase.js","names":["styled","Flex","BorderBoxBase","withConfig","displayName","componentId","defaultProps","borderColor","p"],"sources":["../../../../src/elements/BorderBox/BorderBoxBase.tsx"],"sourcesContent":["import styled from \"styled-components\"\nimport { Flex, FlexProps } from \"../Flex\"\n\nexport interface BorderBoxProps extends FlexProps {\n  hover?: boolean\n}\n\n/**\n * A `div` that has a common border and padding set by default\n * @deprecated: Use `Box`\n */\nexport const BorderBoxBase = styled(Flex)<BorderBoxProps>`\n  border-width: 1px;\n  border-style: solid;\n`\n\nBorderBoxBase.defaultProps = {\n  borderColor: \"mono10\",\n  p: 2,\n}\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,IAAI;AAMb;AACA;AACA;AACA;AACA,OAAO,IAAMC,aAAa,GAAGF,MAAM,CAACC,IAAI,CAAC,CAAAE,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,4CAGxC;AAEDH,aAAa,CAACI,YAAY,GAAG;EAC3BC,WAAW,EAAE,QAAQ;EACrBC,CAAC,EAAE;AACL,CAAC"}

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

@@ -1,3 +1,3 @@
 export * from "./BorderBox";
-export { BorderBoxProps } from "./BorderBoxBase";
+export {};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["BorderBoxProps"],"sources":["../../../../src/elements/BorderBox/index.tsx"],"sourcesContent":["export * from \"./BorderBox\"\nexport { BorderBoxProps } from \"./BorderBoxBase\"\n"],"mappings":"AAAA;AACA,SAASA,cAAc"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/elements/BorderBox/index.tsx"],"sourcesContent":["export * from \"./BorderBox\"\nexport type { BorderBoxProps } from \"./BorderBoxBase\"\n"],"mappings":"AAAA;AAA2B"}

package/dist/esm/elements/BorderedRadio/BorderedRadio.js

@@ -1,6 +1,6 @@
 import { themeGet } from "@styled-system/theme-get";
 import styled from "styled-components";
-import { Radio, RadioProps } from "../Radio";
+import { Radio } from "../Radio";
 /** A radio button with a border */
 export var BorderedRadio = styled(Radio).withConfig({
   displayName: "BorderedRadio",

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

@@ -1 +1 @@
-{"version":3,"file":"BorderedRadio.js","names":["themeGet","styled","Radio","RadioProps","BorderedRadio","withConfig","displayName","componentId"],"sources":["../../../../src/elements/BorderedRadio/BorderedRadio.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport styled from \"styled-components\"\nimport { Radio, RadioProps } from \"../Radio\"\n\nexport type BorderedRadioProps<T = any> = RadioProps<T>\n\n/** A radio button with a border */\nexport const BorderedRadio = styled(Radio)<BorderedRadioProps>`\n  padding: ${themeGet(\"space.2\")};\n  border-radius: 2px;\n  border: 1px solid ${themeGet(\"colors.mono10\")};\n  transition: background-color 0.25s;\n\n  &:hover:not(:disabled) {\n    background-color: ${themeGet(\"colors.mono5\")};\n  }\n\n  &:not(:first-child) {\n    border-top-left-radius: 0;\n    border-top-right-radius: 0;\n  }\n\n  &:not(:last-child) {\n    border-bottom: 0;\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n`\n"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,0BAA0B;AACnD,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,KAAK,EAAEC,UAAU;AAI1B;AACA,OAAO,IAAMC,aAAa,GAAGH,MAAM,CAACC,KAAK,CAAC,CAAAG,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,mTAC7BP,QAAQ,CAAC,SAAS,CAAC,EAEVA,QAAQ,CAAC,eAAe,CAAC,EAIvBA,QAAQ,CAAC,cAAc,CAAC,CAa/C"}
+{"version":3,"file":"BorderedRadio.js","names":["themeGet","styled","Radio","BorderedRadio","withConfig","displayName","componentId"],"sources":["../../../../src/elements/BorderedRadio/BorderedRadio.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport styled from \"styled-components\"\nimport { Radio, RadioProps } from \"../Radio\"\n\nexport type BorderedRadioProps<T = any> = RadioProps<T>\n\n/** A radio button with a border */\nexport const BorderedRadio = styled(Radio)<BorderedRadioProps>`\n  padding: ${themeGet(\"space.2\")};\n  border-radius: 2px;\n  border: 1px solid ${themeGet(\"colors.mono10\")};\n  transition: background-color 0.25s;\n\n  &:hover:not(:disabled) {\n    background-color: ${themeGet(\"colors.mono5\")};\n  }\n\n  &:not(:first-child) {\n    border-top-left-radius: 0;\n    border-top-right-radius: 0;\n  }\n\n  &:not(:last-child) {\n    border-bottom: 0;\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n`\n"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,0BAA0B;AACnD,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,KAAK;AAId;AACA,OAAO,IAAMC,aAAa,GAAGF,MAAM,CAACC,KAAK,CAAC,CAAAE,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,mTAC7BN,QAAQ,CAAC,SAAS,CAAC,EAEVA,QAAQ,CAAC,eAAe,CAAC,EAIvBA,QAAQ,CAAC,cAAc,CAAC,CAa/C"}

package/dist/esm/elements/Box/Box.js

@@ -1,5 +1,5 @@
-import styled, { CSSProperties } from "styled-components";
-import { background, BackgroundProps, border, BorderProps, boxShadow, BoxShadowProps, color, ColorProps, compose, flexbox, FlexboxProps, gridArea, GridAreaProps, layout, LayoutProps, position, PositionProps, ResponsiveValue, space, SpaceProps, system, textAlign, TextAlignProps } from "styled-system";
+import styled from "styled-components";
+import { background, border, boxShadow, color, compose, flexbox, gridArea, layout, position, space, system, textAlign } from "styled-system";
 import { splitProps } from "../../utils/splitProps";
 var gap = system({
   gap: {

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

@@ -1 +1 @@
-{"version":3,"file":"Box.js","names":["styled","CSSProperties","background","BackgroundProps","border","BorderProps","boxShadow","BoxShadowProps","color","ColorProps","compose","flexbox","FlexboxProps","gridArea","GridAreaProps","layout","LayoutProps","position","PositionProps","ResponsiveValue","space","SpaceProps","system","textAlign","TextAlignProps","splitProps","gap","property","scale","pointerEvents","boxMixin","Box","div","withConfig","displayName","componentId","splitBoxProps"],"sources":["../../../../src/elements/Box/Box.tsx"],"sourcesContent":["import styled, { CSSProperties } from \"styled-components\"\nimport {\n  background,\n  BackgroundProps,\n  border,\n  BorderProps,\n  boxShadow,\n  BoxShadowProps,\n  color,\n  ColorProps,\n  compose,\n  flexbox,\n  FlexboxProps,\n  gridArea,\n  GridAreaProps,\n  layout,\n  LayoutProps,\n  position,\n  PositionProps,\n  ResponsiveValue,\n  space,\n  SpaceProps,\n  system,\n  textAlign,\n  TextAlignProps,\n} from \"styled-system\"\nimport { splitProps } from \"../../utils/splitProps\"\n\nconst gap = system({\n  gap: {\n    property: \"gap\",\n    scale: \"space\",\n  },\n})\n\nexport const pointerEvents = system({\n  pointerEvents: {\n    property: \"pointerEvents\",\n    scale: \"pointerEvents\", // Optional if you're using a theme scale\n  },\n})\n\nexport interface BoxProps\n  extends BackgroundProps,\n    BorderProps,\n    BoxShadowProps,\n    Omit<ColorProps, \"color\">,\n    FlexboxProps,\n    GridAreaProps,\n    LayoutProps,\n    PositionProps,\n    SpaceProps,\n    TextAlignProps {\n  gap?: ResponsiveValue<string | number>\n  pointerEvents?: ResponsiveValue<CSSProperties[\"pointerEvents\"]>\n}\n\n/**\n * All the system functions for Box\n */\nexport const boxMixin = compose(\n  background,\n  border,\n  boxShadow,\n  color,\n  flexbox,\n  gap,\n  gridArea,\n  layout,\n  pointerEvents,\n  position,\n  space,\n  textAlign\n)\n\n/**\n * Box is just a `View` or `div` (depending on the platform) with common styled-systems\n * hooks.\n */\nexport const Box = styled.div<BoxProps>`\n  ${boxMixin}\n`\n\nBox.displayName = \"Box\"\n\n/** Splits out props into valid and invalid BoxProps */\nexport const splitBoxProps = splitProps<BoxProps>(boxMixin)\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,aAAa,QAAQ,mBAAmB;AACzD,SACEC,UAAU,EACVC,eAAe,EACfC,MAAM,EACNC,WAAW,EACXC,SAAS,EACTC,cAAc,EACdC,KAAK,EACLC,UAAU,EACVC,OAAO,EACPC,OAAO,EACPC,YAAY,EACZC,QAAQ,EACRC,aAAa,EACbC,MAAM,EACNC,WAAW,EACXC,QAAQ,EACRC,aAAa,EACbC,eAAe,EACfC,KAAK,EACLC,UAAU,EACVC,MAAM,EACNC,SAAS,EACTC,cAAc,QACT,eAAe;AACtB,SAASC,UAAU;AAEnB,IAAMC,GAAG,GAAGJ,MAAM,CAAC;EACjBI,GAAG,EAAE;IACHC,QAAQ,EAAE,KAAK;IACfC,KAAK,EAAE;EACT;AACF,CAAC,CAAC;AAEF,OAAO,IAAMC,aAAa,GAAGP,MAAM,CAAC;EAClCO,aAAa,EAAE;IACbF,QAAQ,EAAE,eAAe;IACzBC,KAAK,EAAE,eAAe,CAAE;EAC1B;AACF,CAAC,CAAC;;AAiBF;AACA;AACA;AACA,OAAO,IAAME,QAAQ,GAAGpB,OAAO,CAC7BR,UAAU,EACVE,MAAM,EACNE,SAAS,EACTE,KAAK,EACLG,OAAO,EACPe,GAAG,EACHb,QAAQ,EACRE,MAAM,EACNc,aAAa,EACbZ,QAAQ,EACRG,KAAK,EACLG,SAAS,CACV;;AAED;AACA;AACA;AACA;AACA,OAAO,IAAMQ,GAAG,GAAG/B,MAAM,CAACgC,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,aACzBL,QAAQ,CACX;AAEDC,GAAG,CAACG,WAAW,GAAG,KAAK;;AAEvB;AACA,OAAO,IAAME,aAAa,GAAGX,UAAU,CAAWK,QAAQ,CAAC"}
+{"version":3,"file":"Box.js","names":["styled","background","border","boxShadow","color","compose","flexbox","gridArea","layout","position","space","system","textAlign","splitProps","gap","property","scale","pointerEvents","boxMixin","Box","div","withConfig","displayName","componentId","splitBoxProps"],"sources":["../../../../src/elements/Box/Box.tsx"],"sourcesContent":["import styled, { CSSProperties } from \"styled-components\"\nimport {\n  background,\n  BackgroundProps,\n  border,\n  BorderProps,\n  boxShadow,\n  BoxShadowProps,\n  color,\n  ColorProps,\n  compose,\n  flexbox,\n  FlexboxProps,\n  gridArea,\n  GridAreaProps,\n  layout,\n  LayoutProps,\n  position,\n  PositionProps,\n  ResponsiveValue,\n  space,\n  SpaceProps,\n  system,\n  textAlign,\n  TextAlignProps,\n} from \"styled-system\"\nimport { splitProps } from \"../../utils/splitProps\"\n\nconst gap = system({\n  gap: {\n    property: \"gap\",\n    scale: \"space\",\n  },\n})\n\nexport const pointerEvents = system({\n  pointerEvents: {\n    property: \"pointerEvents\",\n    scale: \"pointerEvents\", // Optional if you're using a theme scale\n  },\n})\n\nexport interface BoxProps\n  extends BackgroundProps,\n    BorderProps,\n    BoxShadowProps,\n    Omit<ColorProps, \"color\">,\n    FlexboxProps,\n    GridAreaProps,\n    LayoutProps,\n    PositionProps,\n    SpaceProps,\n    TextAlignProps {\n  gap?: ResponsiveValue<string | number>\n  pointerEvents?: ResponsiveValue<CSSProperties[\"pointerEvents\"]>\n}\n\n/**\n * All the system functions for Box\n */\nexport const boxMixin = compose(\n  background,\n  border,\n  boxShadow,\n  color,\n  flexbox,\n  gap,\n  gridArea,\n  layout,\n  pointerEvents,\n  position,\n  space,\n  textAlign\n)\n\n/**\n * Box is just a `View` or `div` (depending on the platform) with common styled-systems\n * hooks.\n */\nexport const Box = styled.div<BoxProps>`\n  ${boxMixin}\n`\n\nBox.displayName = \"Box\"\n\n/** Splits out props into valid and invalid BoxProps */\nexport const splitBoxProps = splitProps<BoxProps>(boxMixin)\n"],"mappings":"AAAA,OAAOA,MAAM,MAAyB,mBAAmB;AACzD,SACEC,UAAU,EAEVC,MAAM,EAENC,SAAS,EAETC,KAAK,EAELC,OAAO,EACPC,OAAO,EAEPC,QAAQ,EAERC,MAAM,EAENC,QAAQ,EAGRC,KAAK,EAELC,MAAM,EACNC,SAAS,QAEJ,eAAe;AACtB,SAASC,UAAU;AAEnB,IAAMC,GAAG,GAAGH,MAAM,CAAC;EACjBG,GAAG,EAAE;IACHC,QAAQ,EAAE,KAAK;IACfC,KAAK,EAAE;EACT;AACF,CAAC,CAAC;AAEF,OAAO,IAAMC,aAAa,GAAGN,MAAM,CAAC;EAClCM,aAAa,EAAE;IACbF,QAAQ,EAAE,eAAe;IACzBC,KAAK,EAAE,eAAe,CAAE;EAC1B;AACF,CAAC,CAAC;;AAiBF;AACA;AACA;AACA,OAAO,IAAME,QAAQ,GAAGb,OAAO,CAC7BJ,UAAU,EACVC,MAAM,EACNC,SAAS,EACTC,KAAK,EACLE,OAAO,EACPQ,GAAG,EACHP,QAAQ,EACRC,MAAM,EACNS,aAAa,EACbR,QAAQ,EACRC,KAAK,EACLE,SAAS,CACV;;AAED;AACA;AACA;AACA;AACA,OAAO,IAAMO,GAAG,GAAGnB,MAAM,CAACoB,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,aACzBL,QAAQ,CACX;AAEDC,GAAG,CAACG,WAAW,GAAG,KAAK;;AAEvB;AACA,OAAO,IAAME,aAAa,GAAGX,UAAU,CAAWK,QAAQ,CAAC"}

package/dist/esm/elements/Breadcrumbs/Breadcrumbs.js

@@ -6,7 +6,7 @@ import { themeGet } from "@styled-system/theme-get";
 import React from "react";
 import styled from "styled-components";
 import { flattenChildren } from "../../helpers/flattenChildren";
-import { Box, BoxProps } from "../Box";
+import { Box } from "../Box";
 import { Flex } from "../Flex";
 import { Join } from "../Join";
 import { Text } from "../Text";

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

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumbs.js","names":["themeGet","React","styled","flattenChildren","Box","BoxProps","Flex","Join","Text","Li","withConfig","displayName","componentId","Breadcrumbs","_ref","children","rest","_objectWithoutProperties","_excluded","cells","createElement","_extends","as","separator","size","color","mx","map","cell","i","key","length","cloneElement"],"sources":["../../../../src/elements/Breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React from \"react\"\nimport styled from \"styled-components\"\nimport { flattenChildren } from \"../../helpers/flattenChildren\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Flex } from \"../Flex\"\nimport { Join } from \"../Join\"\nimport { Text } from \"../Text\"\n\nconst Li = styled(Text)`\n  > a {\n    color: ${themeGet(\"colors.mono60\")};\n    text-decoration: none;\n\n    &:hover {\n      color: ${themeGet(\"colors.blue100\")};\n      text-decoration: underline;\n    }\n  }\n\n  &:last-of-type {\n    > a {\n      color: ${themeGet(\"colors.mono100\")};\n\n      &:hover {\n        color: ${themeGet(\"colors.mono100\")};\n        text-decoration: none;\n      }\n    }\n  }\n`\n\n/** Breadcrumbs extends Box */\nexport type BreadcrumbsProps = BoxProps\n\n/**\n * A breadcrumb trail consists of a list of links to the parent pages of the\n * current page in hierarchical order. It helps users find their place within\n * a website or web application. Breadcrumbs are often placed horizontally\n * before a page's main content.\n */\nexport const Breadcrumbs: React.FC<\n  React.PropsWithChildren<BreadcrumbsProps>\n> = ({ children, ...rest }) => {\n  const cells = flattenChildren(children)\n\n  return (\n    <Box as=\"nav\" aria-label=\"Breadcrumb\" {...rest}>\n      <Flex as=\"ol\">\n        <Join\n          separator={\n            <Text as=\"span\" size=\"xs\" color=\"mono60\" mx={1} aria-hidden=\"true\">\n              /\n            </Text>\n          }\n        >\n          {cells.map((cell: React.ReactElement<any>, i) => {\n            return (\n              <Li as=\"li\" size=\"xs\" key={i}>\n                {i === cells.length - 1\n                  ? React.cloneElement(cell, { \"aria-current\": \"page\" })\n                  : cell}\n              </Li>\n            )\n          })}\n        </Join>\n      </Flex>\n    </Box>\n  )\n}\n"],"mappings":";;;;AAAA,SAASA,QAAQ,QAAQ,0BAA0B;AACnD,OAAOC,KAAK,MAAM,OAAO;AACzB,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,eAAe;AACxB,SAASC,GAAG,EAAEC,QAAQ;AACtB,SAASC,IAAI;AACb,SAASC,IAAI;AACb,SAASC,IAAI;AAEb,IAAMC,EAAE,GAAGP,MAAM,CAACM,IAAI,CAAC,CAAAE,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,qKAEVZ,QAAQ,CAAC,eAAe,CAAC,EAIvBA,QAAQ,CAAC,gBAAgB,CAAC,EAO1BA,QAAQ,CAAC,gBAAgB,CAAC,EAGxBA,QAAQ,CAAC,gBAAgB,CAAC,CAK1C;;AAED;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMa,WAEZ,GAAG,SAFSA,WAEZA,CAAAC,IAAA,EAA8B;EAAA,IAAxBC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IAAKC,IAAI,GAAAC,wBAAA,CAAAH,IAAA,EAAAI,SAAA;EACtB,IAAMC,KAAK,GAAGhB,eAAe,CAACY,QAAQ,CAAC;EAEvC,oBACEd,KAAA,CAAAmB,aAAA,CAAChB,GAAG,EAAAiB,QAAA;IAACC,EAAE,EAAC,KAAK;IAAC,cAAW;EAAY,GAAKN,IAAI,gBAC5Cf,KAAA,CAAAmB,aAAA,CAACd,IAAI;IAACgB,EAAE,EAAC;EAAI,gBACXrB,KAAA,CAAAmB,aAAA,CAACb,IAAI;IACHgB,SAAS,eACPtB,KAAA,CAAAmB,aAAA,CAACZ,IAAI;MAACc,EAAE,EAAC,MAAM;MAACE,IAAI,EAAC,IAAI;MAACC,KAAK,EAAC,QAAQ;MAACC,EAAE,EAAE,CAAE;MAAC,eAAY;IAAM,GAAC,GAEnE;EACD,GAEAP,KAAK,CAACQ,GAAG,CAAC,UAACC,IAA6B,EAAEC,CAAC,EAAK;IAC/C,oBACE5B,KAAA,CAAAmB,aAAA,CAACX,EAAE;MAACa,EAAE,EAAC,IAAI;MAACE,IAAI,EAAC,IAAI;MAACM,GAAG,EAAED;IAAE,GAC1BA,CAAC,KAAKV,KAAK,CAACY,MAAM,GAAG,CAAC,gBACnB9B,KAAK,CAAC+B,YAAY,CAACJ,IAAI,EAAE;MAAE,cAAc,EAAE;IAAO,CAAC,CAAC,GACpDA,IAAI,CACL;EAET,CAAC,CAAC,CACG,CACF,CACH;AAEV,CAAC;AA5BYf,WAEZ,CAAAF,WAAA"}
+{"version":3,"file":"Breadcrumbs.js","names":["themeGet","React","styled","flattenChildren","Box","Flex","Join","Text","Li","withConfig","displayName","componentId","Breadcrumbs","_ref","children","rest","_objectWithoutProperties","_excluded","cells","createElement","_extends","as","separator","size","color","mx","map","cell","i","key","length","cloneElement"],"sources":["../../../../src/elements/Breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React from \"react\"\nimport styled from \"styled-components\"\nimport { flattenChildren } from \"../../helpers/flattenChildren\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Flex } from \"../Flex\"\nimport { Join } from \"../Join\"\nimport { Text } from \"../Text\"\n\nconst Li = styled(Text)`\n  > a {\n    color: ${themeGet(\"colors.mono60\")};\n    text-decoration: none;\n\n    &:hover {\n      color: ${themeGet(\"colors.blue100\")};\n      text-decoration: underline;\n    }\n  }\n\n  &:last-of-type {\n    > a {\n      color: ${themeGet(\"colors.mono100\")};\n\n      &:hover {\n        color: ${themeGet(\"colors.mono100\")};\n        text-decoration: none;\n      }\n    }\n  }\n`\n\n/** Breadcrumbs extends Box */\nexport type BreadcrumbsProps = BoxProps\n\n/**\n * A breadcrumb trail consists of a list of links to the parent pages of the\n * current page in hierarchical order. It helps users find their place within\n * a website or web application. Breadcrumbs are often placed horizontally\n * before a page's main content.\n */\nexport const Breadcrumbs: React.FC<\n  React.PropsWithChildren<BreadcrumbsProps>\n> = ({ children, ...rest }) => {\n  const cells = flattenChildren(children)\n\n  return (\n    <Box as=\"nav\" aria-label=\"Breadcrumb\" {...rest}>\n      <Flex as=\"ol\">\n        <Join\n          separator={\n            <Text as=\"span\" size=\"xs\" color=\"mono60\" mx={1} aria-hidden=\"true\">\n              /\n            </Text>\n          }\n        >\n          {cells.map((cell: React.ReactElement<any>, i) => {\n            return (\n              <Li as=\"li\" size=\"xs\" key={i}>\n                {i === cells.length - 1\n                  ? React.cloneElement(cell, { \"aria-current\": \"page\" })\n                  : cell}\n              </Li>\n            )\n          })}\n        </Join>\n      </Flex>\n    </Box>\n  )\n}\n"],"mappings":";;;;AAAA,SAASA,QAAQ,QAAQ,0BAA0B;AACnD,OAAOC,KAAK,MAAM,OAAO;AACzB,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,eAAe;AACxB,SAASC,GAAG;AACZ,SAASC,IAAI;AACb,SAASC,IAAI;AACb,SAASC,IAAI;AAEb,IAAMC,EAAE,GAAGN,MAAM,CAACK,IAAI,CAAC,CAAAE,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,qKAEVX,QAAQ,CAAC,eAAe,CAAC,EAIvBA,QAAQ,CAAC,gBAAgB,CAAC,EAO1BA,QAAQ,CAAC,gBAAgB,CAAC,EAGxBA,QAAQ,CAAC,gBAAgB,CAAC,CAK1C;;AAED;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMY,WAEZ,GAAG,SAFSA,WAEZA,CAAAC,IAAA,EAA8B;EAAA,IAAxBC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IAAKC,IAAI,GAAAC,wBAAA,CAAAH,IAAA,EAAAI,SAAA;EACtB,IAAMC,KAAK,GAAGf,eAAe,CAACW,QAAQ,CAAC;EAEvC,oBACEb,KAAA,CAAAkB,aAAA,CAACf,GAAG,EAAAgB,QAAA;IAACC,EAAE,EAAC,KAAK;IAAC,cAAW;EAAY,GAAKN,IAAI,gBAC5Cd,KAAA,CAAAkB,aAAA,CAACd,IAAI;IAACgB,EAAE,EAAC;EAAI,gBACXpB,KAAA,CAAAkB,aAAA,CAACb,IAAI;IACHgB,SAAS,eACPrB,KAAA,CAAAkB,aAAA,CAACZ,IAAI;MAACc,EAAE,EAAC,MAAM;MAACE,IAAI,EAAC,IAAI;MAACC,KAAK,EAAC,QAAQ;MAACC,EAAE,EAAE,CAAE;MAAC,eAAY;IAAM,GAAC,GAEnE;EACD,GAEAP,KAAK,CAACQ,GAAG,CAAC,UAACC,IAA6B,EAAEC,CAAC,EAAK;IAC/C,oBACE3B,KAAA,CAAAkB,aAAA,CAACX,EAAE;MAACa,EAAE,EAAC,IAAI;MAACE,IAAI,EAAC,IAAI;MAACM,GAAG,EAAED;IAAE,GAC1BA,CAAC,KAAKV,KAAK,CAACY,MAAM,GAAG,CAAC,gBACnB7B,KAAK,CAAC8B,YAAY,CAACJ,IAAI,EAAE;MAAE,cAAc,EAAE;IAAO,CAAC,CAAC,GACpDA,IAAI,CACL;EAET,CAAC,CAAC,CACG,CACF,CACH;AAEV,CAAC;AA5BYf,WAEZ,CAAAF,WAAA"}

package/dist/esm/elements/Button/Button.js

@@ -5,15 +5,13 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import composeRefs from "@seznam/compose-react-refs";
 import React, { useEffect, useRef } from "react";
 import styled, { css } from "styled-components";
-import { ResponsiveValue, variant } from "styled-system";
+import { variant } from "styled-system";
 import CheckmarkIcon from "@artsy/icons/CheckmarkIcon";
-import { TextVariant } from "@artsy/palette-tokens/dist/typography/v3";
 import { THEME } from "../../themes";
-import { boxMixin, BoxProps } from "../Box";
+import { boxMixin } from "../Box";
 import { Spinner } from "../Spinner";
-import { Text, TextProps } from "../Text";
+import { Text } from "../Text";
 import { BUTTON_SIZES, BUTTON_TEXT_SIZES, BUTTON_VARIANTS } from "./tokens";
-import { ButtonSize, ButtonVariant } from "./types";
 export var Button = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
   var children = _ref.children,
     loading = _ref.loading,

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

@@ -1 +1 @@
-{"version":3,"file":"Button.js","names":["composeRefs","React","useEffect","useRef","styled","css","ResponsiveValue","variant","CheckmarkIcon","TextVariant","THEME","boxMixin","BoxProps","Spinner","Text","TextProps","BUTTON_SIZES","BUTTON_TEXT_SIZES","BUTTON_VARIANTS","ButtonSize","ButtonVariant","Button","forwardRef","_ref","forwardedRef","children","loading","success","_ref$size","size","onClick","_ref$alignItems","alignItems","_ref$justifyContent","justifyContent","_ref$variant","Icon","rest","_objectWithoutProperties","_excluded","ref","handleClick","event","current","_ref$current","blur","createElement","Container","_extends","$loading","tabIndex","display","color","lineHeight","getTextVariant","opacity","width","fill","mr","ml","displayName","buttonMixin","button","withConfig","componentId","prop","variants","props","hover","active","focus","disabled","default","mediaQueries","Array","isArray","map","s","large"],"sources":["../../../../src/elements/Button/Button.tsx"],"sourcesContent":["import composeRefs from \"@seznam/compose-react-refs\"\nimport React, { useEffect, useRef } from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { ResponsiveValue, variant } from \"styled-system\"\nimport CheckmarkIcon from \"@artsy/icons/CheckmarkIcon\"\nimport { TextVariant } from \"@artsy/palette-tokens/dist/typography/v3\"\nimport { THEME } from \"../../themes\"\nimport { boxMixin, BoxProps } from \"../Box\"\nimport { Spinner } from \"../Spinner\"\nimport { Text, TextProps } from \"../Text\"\nimport { BUTTON_SIZES, BUTTON_TEXT_SIZES, BUTTON_VARIANTS } from \"./tokens\"\nimport { ButtonSize, ButtonVariant } from \"./types\"\n\nexport interface ButtonProps\n  extends BoxProps,\n    React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * @description\n   * The theme of the button. It's possible to pass an array that\n   * behaves accordingly to the media breakpoints [\"sm\", \"md\", \"lg\", \"xl\"]\n   * @example\n   * \"primaryBlack\"\n   * \"primaryWhite\"\n   * [\"primaryGray\", \"secondaryBlack\"]\n   * @see {@link ButtonVariant}\n   */\n  variant?: ResponsiveValue<ButtonVariant>\n  /** Size of the button */\n  size?: ResponsiveValue<ButtonSize>\n  /** Displays a loader in the button */\n  loading?: boolean\n  /** Forces hover state */\n  hover?: boolean\n  /** Forces focus state */\n  focus?: boolean\n  /** Forces active state */\n  active?: boolean\n  /** Forces success state */\n  success?: boolean\n  /** Optional icon slot */\n  Icon?: React.FunctionComponent<\n    React.PropsWithChildren<BoxProps & { fill?: ResponsiveValue<string> }>\n  >\n}\n\nexport const Button = React.forwardRef<HTMLElement, ButtonProps>(\n  (\n    {\n      children,\n      loading,\n      success,\n      size = \"large\",\n      onClick,\n      alignItems = \"center\",\n      justifyContent = \"center\",\n      variant = \"primaryBlack\",\n      Icon,\n      ...rest\n    },\n    forwardedRef\n  ) => {\n    const ref = useRef<HTMLButtonElement | null>(null)\n\n    const handleClick = (\n      event: React.MouseEvent<HTMLButtonElement, MouseEvent>\n    ) => {\n      if (!loading && onClick) {\n        onClick(event)\n      }\n    }\n\n    useEffect(() => {\n      if (loading && ref.current !== null) {\n        ref.current?.blur()\n      }\n    }, [loading])\n\n    return (\n      <Container\n        ref={composeRefs(ref, forwardedRef) as any}\n        onClick={handleClick}\n        size={size}\n        $loading={loading}\n        success={success}\n        tabIndex={loading ? -1 : 0}\n        display=\"inline-flex\"\n        alignItems={alignItems}\n        justifyContent={justifyContent}\n        variant={variant}\n        {...rest}\n      >\n        {loading && <Spinner size={size} color=\"currentColor\" />}\n\n        <Text\n          lineHeight={1}\n          variant={getTextVariant(size)}\n          opacity={loading ? 0 : 1}\n          display=\"flex\"\n          alignItems={alignItems}\n          justifyContent={justifyContent}\n          width=\"100%\"\n        >\n          {!success && Icon && (\n            <Icon fill=\"currentColor\" mr={0.5} ml={-0.5} aria-hidden=\"true\" />\n          )}\n\n          {success && (\n            <CheckmarkIcon\n              fill=\"currentColor\"\n              mr={0.5}\n              ml={-0.5}\n              aria-hidden=\"true\"\n            />\n          )}\n\n          {children}\n        </Text>\n      </Container>\n    )\n  }\n)\n\nButton.displayName = \"Button\"\n\ntype ContainerProps = Pick<\n  ButtonProps,\n  \"active\" | \"disabled\" | \"focus\" | \"hover\" | \"size\" | \"success\"\n> & {\n  $loading?: boolean\n}\n\nexport const buttonMixin = css`\n  cursor: pointer;\n  position: relative;\n  white-space: nowrap;\n  font-weight: normal;\n  text-align: center;\n  border: 1px solid;\n  text-decoration: none;\n  transition: color 0.25s ease, border-color 0.25s ease,\n    background-color 0.25s ease, box-shadow 0.25s ease;\n`\n\nconst Container = styled.button<ContainerProps & ButtonProps>`\n  ${buttonMixin};\n\n  /* Handle sizing */\n  ${variant({ prop: \"size\", variants: BUTTON_SIZES })}\n\n  ${(props) => {\n    // Handle props driven states\n    if (props.hover) {\n      return variant({ variants: BUTTON_VARIANTS.hover })\n    }\n\n    if (props.active) {\n      return variant({ variants: BUTTON_VARIANTS.active })\n    }\n\n    if (props.success) {\n      return variant({ variants: BUTTON_VARIANTS.success })\n    }\n\n    if (props.focus) {\n      return css`\n        outline: 0;\n        ${variant({ variants: BUTTON_VARIANTS.focus })}\n      `\n    }\n\n    if (props.$loading) {\n      return css`\n        cursor: auto;\n        transition: none;\n        pointer-events: none;\n        ${variant({ variants: BUTTON_VARIANTS.loading })}\n      `\n    }\n\n    if (props.disabled) {\n      return css`\n        pointer-events: none;\n        ${variant({ variants: BUTTON_VARIANTS.disabled })}\n      `\n    }\n\n    return variant({ variants: BUTTON_VARIANTS.default })\n  }}\n\n  ${() => {\n    // Handle pseudo classes\n    return css`\n      @media ${THEME.mediaQueries.hover} {\n        &:hover {\n          ${variant({ variants: BUTTON_VARIANTS.hover })}\n        }\n      }\n\n      &:focus {\n        outline: 0;\n        ${variant({ variants: BUTTON_VARIANTS.focus })}\n      }\n\n      &:active {\n        ${variant({ variants: BUTTON_VARIANTS.active })}\n      }\n\n      &:disabled {\n        pointer-events: none;\n        ${variant({ variants: BUTTON_VARIANTS.disabled })}\n      }\n    `\n  }};\n\n  ${boxMixin};\n`\n\nconst getTextVariant = (\n  size: ResponsiveValue<ButtonSize>\n): TextProps[\"variant\"] => {\n  if (typeof size === \"string\") {\n    return BUTTON_TEXT_SIZES[size]\n  }\n\n  if (Array.isArray(size)) {\n    return size.map((s) => BUTTON_TEXT_SIZES[s!] as TextVariant)\n  }\n\n  return BUTTON_TEXT_SIZES.large\n}\n"],"mappings":"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"}
+{"version":3,"file":"Button.js","names":["composeRefs","React","useEffect","useRef","styled","css","variant","CheckmarkIcon","THEME","boxMixin","Spinner","Text","BUTTON_SIZES","BUTTON_TEXT_SIZES","BUTTON_VARIANTS","Button","forwardRef","_ref","forwardedRef","children","loading","success","_ref$size","size","onClick","_ref$alignItems","alignItems","_ref$justifyContent","justifyContent","_ref$variant","Icon","rest","_objectWithoutProperties","_excluded","ref","handleClick","event","current","_ref$current","blur","createElement","Container","_extends","$loading","tabIndex","display","color","lineHeight","getTextVariant","opacity","width","fill","mr","ml","displayName","buttonMixin","button","withConfig","componentId","prop","variants","props","hover","active","focus","disabled","default","mediaQueries","Array","isArray","map","s","large"],"sources":["../../../../src/elements/Button/Button.tsx"],"sourcesContent":["import composeRefs from \"@seznam/compose-react-refs\"\nimport React, { useEffect, useRef } from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { ResponsiveValue, variant } from \"styled-system\"\nimport CheckmarkIcon from \"@artsy/icons/CheckmarkIcon\"\nimport { TextVariant } from \"@artsy/palette-tokens/dist/typography/v3\"\nimport { THEME } from \"../../themes\"\nimport { boxMixin, BoxProps } from \"../Box\"\nimport { Spinner } from \"../Spinner\"\nimport { Text, TextProps } from \"../Text\"\nimport { BUTTON_SIZES, BUTTON_TEXT_SIZES, BUTTON_VARIANTS } from \"./tokens\"\nimport { ButtonSize, ButtonVariant } from \"./types\"\n\nexport interface ButtonProps\n  extends BoxProps,\n    React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * @description\n   * The theme of the button. It's possible to pass an array that\n   * behaves accordingly to the media breakpoints [\"sm\", \"md\", \"lg\", \"xl\"]\n   * @example\n   * \"primaryBlack\"\n   * \"primaryWhite\"\n   * [\"primaryGray\", \"secondaryBlack\"]\n   * @see {@link ButtonVariant}\n   */\n  variant?: ResponsiveValue<ButtonVariant>\n  /** Size of the button */\n  size?: ResponsiveValue<ButtonSize>\n  /** Displays a loader in the button */\n  loading?: boolean\n  /** Forces hover state */\n  hover?: boolean\n  /** Forces focus state */\n  focus?: boolean\n  /** Forces active state */\n  active?: boolean\n  /** Forces success state */\n  success?: boolean\n  /** Optional icon slot */\n  Icon?: React.FunctionComponent<\n    React.PropsWithChildren<BoxProps & { fill?: ResponsiveValue<string> }>\n  >\n}\n\nexport const Button = React.forwardRef<HTMLElement, ButtonProps>(\n  (\n    {\n      children,\n      loading,\n      success,\n      size = \"large\",\n      onClick,\n      alignItems = \"center\",\n      justifyContent = \"center\",\n      variant = \"primaryBlack\",\n      Icon,\n      ...rest\n    },\n    forwardedRef\n  ) => {\n    const ref = useRef<HTMLButtonElement | null>(null)\n\n    const handleClick = (\n      event: React.MouseEvent<HTMLButtonElement, MouseEvent>\n    ) => {\n      if (!loading && onClick) {\n        onClick(event)\n      }\n    }\n\n    useEffect(() => {\n      if (loading && ref.current !== null) {\n        ref.current?.blur()\n      }\n    }, [loading])\n\n    return (\n      <Container\n        ref={composeRefs(ref, forwardedRef) as any}\n        onClick={handleClick}\n        size={size}\n        $loading={loading}\n        success={success}\n        tabIndex={loading ? -1 : 0}\n        display=\"inline-flex\"\n        alignItems={alignItems}\n        justifyContent={justifyContent}\n        variant={variant}\n        {...rest}\n      >\n        {loading && <Spinner size={size} color=\"currentColor\" />}\n\n        <Text\n          lineHeight={1}\n          variant={getTextVariant(size)}\n          opacity={loading ? 0 : 1}\n          display=\"flex\"\n          alignItems={alignItems}\n          justifyContent={justifyContent}\n          width=\"100%\"\n        >\n          {!success && Icon && (\n            <Icon fill=\"currentColor\" mr={0.5} ml={-0.5} aria-hidden=\"true\" />\n          )}\n\n          {success && (\n            <CheckmarkIcon\n              fill=\"currentColor\"\n              mr={0.5}\n              ml={-0.5}\n              aria-hidden=\"true\"\n            />\n          )}\n\n          {children}\n        </Text>\n      </Container>\n    )\n  }\n)\n\nButton.displayName = \"Button\"\n\ntype ContainerProps = Pick<\n  ButtonProps,\n  \"active\" | \"disabled\" | \"focus\" | \"hover\" | \"size\" | \"success\"\n> & {\n  $loading?: boolean\n}\n\nexport const buttonMixin = css`\n  cursor: pointer;\n  position: relative;\n  white-space: nowrap;\n  font-weight: normal;\n  text-align: center;\n  border: 1px solid;\n  text-decoration: none;\n  transition: color 0.25s ease, border-color 0.25s ease,\n    background-color 0.25s ease, box-shadow 0.25s ease;\n`\n\nconst Container = styled.button<ContainerProps & ButtonProps>`\n  ${buttonMixin};\n\n  /* Handle sizing */\n  ${variant({ prop: \"size\", variants: BUTTON_SIZES })}\n\n  ${(props) => {\n    // Handle props driven states\n    if (props.hover) {\n      return variant({ variants: BUTTON_VARIANTS.hover })\n    }\n\n    if (props.active) {\n      return variant({ variants: BUTTON_VARIANTS.active })\n    }\n\n    if (props.success) {\n      return variant({ variants: BUTTON_VARIANTS.success })\n    }\n\n    if (props.focus) {\n      return css`\n        outline: 0;\n        ${variant({ variants: BUTTON_VARIANTS.focus })}\n      `\n    }\n\n    if (props.$loading) {\n      return css`\n        cursor: auto;\n        transition: none;\n        pointer-events: none;\n        ${variant({ variants: BUTTON_VARIANTS.loading })}\n      `\n    }\n\n    if (props.disabled) {\n      return css`\n        pointer-events: none;\n        ${variant({ variants: BUTTON_VARIANTS.disabled })}\n      `\n    }\n\n    return variant({ variants: BUTTON_VARIANTS.default })\n  }}\n\n  ${() => {\n    // Handle pseudo classes\n    return css`\n      @media ${THEME.mediaQueries.hover} {\n        &:hover {\n          ${variant({ variants: BUTTON_VARIANTS.hover })}\n        }\n      }\n\n      &:focus {\n        outline: 0;\n        ${variant({ variants: BUTTON_VARIANTS.focus })}\n      }\n\n      &:active {\n        ${variant({ variants: BUTTON_VARIANTS.active })}\n      }\n\n      &:disabled {\n        pointer-events: none;\n        ${variant({ variants: BUTTON_VARIANTS.disabled })}\n      }\n    `\n  }};\n\n  ${boxMixin};\n`\n\nconst getTextVariant = (\n  size: ResponsiveValue<ButtonSize>\n): TextProps[\"variant\"] => {\n  if (typeof size === \"string\") {\n    return BUTTON_TEXT_SIZES[size]\n  }\n\n  if (Array.isArray(size)) {\n    return size.map((s) => BUTTON_TEXT_SIZES[s!] as TextVariant)\n  }\n\n  return BUTTON_TEXT_SIZES.large\n}\n"],"mappings":"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"}

package/dist/esm/elements/Button/tokens.js

@@ -5,8 +5,6 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 import { BUTTON_STATES, BUTTON_VARIANT_NAMES } from "./types";
-import { TextProps } from "../Text";
-import { ButtonSize, ButtonState, ButtonVariant } from "./types";
 var DEFAULT_PRIMARY_STATES = {
   focus: {
     backgroundColor: "blue100",

package/dist/esm/elements/Button/tokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.js","names":["BUTTON_STATES","BUTTON_VARIANT_NAMES","TextProps","ButtonSize","ButtonState","ButtonVariant","DEFAULT_PRIMARY_STATES","focus","backgroundColor","borderColor","color","textDecoration","hover","active","loading","disabled","success","DEFAULT_SECONDARY_STATES","_objectSpread","BUTTON_STYLES","primaryBlack","default","primaryWhite","primaryBlue","primaryGray","secondaryBlack","secondaryBlue","secondaryWhite","secondaryNeutral","tertiary","BUTTON_VARIANTS","reduce","variantsMemo","state","_defineProperty","stateMemo","variant","BUTTON_SIZES","small","height","borderRadius","px","large","BUTTON_TEXT_SIZES"],"sources":["../../../../src/elements/Button/tokens.ts"],"sourcesContent":["import { BUTTON_STATES, BUTTON_VARIANT_NAMES } from \"./types\"\nimport { TextProps } from \"../Text\"\nimport { ButtonSize, ButtonState, ButtonVariant } from \"./types\"\n\nconst DEFAULT_PRIMARY_STATES = {\n  focus: {\n    backgroundColor: \"blue100\",\n    borderColor: \"blue100\",\n    color: \"mono0\",\n    textDecoration: \"underline\",\n  },\n  hover: {\n    backgroundColor: \"blue100\",\n    borderColor: \"blue100\",\n    color: \"mono0\",\n    textDecoration: \"underline\",\n  },\n  active: {\n    backgroundColor: \"blue150\",\n    borderColor: \"blue150\",\n    color: \"mono0\",\n    textDecoration: \"underline\",\n  },\n  loading: {\n    backgroundColor: \"blue100\",\n    borderColor: \"blue100\",\n    color: \"mono0\",\n  },\n  disabled: {\n    backgroundColor: \"mono30\",\n    borderColor: \"mono30\",\n    color: \"mono0\",\n  },\n  success: {\n    backgroundColor: \"blue100\",\n    borderColor: \"blue100\",\n    color: \"mono0\",\n  },\n}\n\nconst DEFAULT_SECONDARY_STATES = {\n  ...DEFAULT_PRIMARY_STATES,\n  disabled: {\n    backgroundColor: \"transparent\",\n    borderColor: \"mono30\",\n    color: \"mono30\",\n  },\n}\n\nexport const BUTTON_STYLES: Record<ButtonVariant, Record<ButtonState, any>> = {\n  primaryBlack: {\n    default: {\n      backgroundColor: \"mono100\",\n      borderColor: \"mono100\",\n      color: \"mono0\",\n    },\n    ...DEFAULT_PRIMARY_STATES,\n  },\n\n  primaryWhite: {\n    default: {\n      backgroundColor: \"mono0\",\n      borderColor: \"mono0\",\n      color: \"mono100\",\n    },\n    ...DEFAULT_PRIMARY_STATES,\n  },\n\n  primaryBlue: {\n    default: {\n      backgroundColor: \"blue100\",\n      borderColor: \"blue100\",\n      color: \"mono0\",\n    },\n    ...DEFAULT_PRIMARY_STATES,\n    focus: {\n      backgroundColor: \"blue150\",\n      borderColor: \"blue150\",\n      color: \"mono0\",\n      textDecoration: \"underline\",\n    },\n    hover: {\n      backgroundColor: \"blue150\",\n      borderColor: \"blue150\",\n      color: \"mono0\",\n      textDecoration: \"underline\",\n    },\n    active: {\n      backgroundColor: \"blue200\",\n      borderColor: \"blue200\",\n      color: \"mono0\",\n      textDecoration: \"underline\",\n    },\n  },\n\n  primaryGray: {\n    default: {\n      backgroundColor: \"mono10\",\n      borderColor: \"mono10\",\n      color: \"mono100\",\n    },\n    ...DEFAULT_PRIMARY_STATES,\n  },\n\n  secondaryBlack: {\n    default: {\n      backgroundColor: \"transparent\",\n      borderColor: \"mono100\",\n      color: \"mono100\",\n    },\n    ...DEFAULT_SECONDARY_STATES,\n  },\n\n  secondaryBlue: {\n    default: {\n      backgroundColor: \"transparent\",\n      borderColor: \"blue100\",\n      color: \"blue100\",\n    },\n    ...DEFAULT_SECONDARY_STATES,\n  },\n\n  secondaryWhite: {\n    default: {\n      backgroundColor: \"transparent\",\n      borderColor: \"mono0\",\n      color: \"mono0\",\n    },\n    ...DEFAULT_SECONDARY_STATES,\n  },\n\n  /** Used for follow buttons */\n  secondaryNeutral: {\n    default: {\n      backgroundColor: \"transparent\",\n      borderColor: \"mono100\",\n      color: \"mono100\",\n    },\n    ...DEFAULT_SECONDARY_STATES,\n    focus: {\n      backgroundColor: \"mono10\",\n      borderColor: \"mono10\",\n      color: \"mono100\",\n      textDecoration: \"underline\",\n    },\n    hover: {\n      backgroundColor: \"mono100\",\n      borderColor: \"mono100\",\n      color: \"mono0\",\n      textDecoration: \"underline\",\n    },\n    active: {\n      backgroundColor: \"mono100\",\n      borderColor: \"mono100\",\n      color: \"mono0\",\n      textDecoration: \"underline\",\n    },\n    loading: {\n      backgroundColor: \"mono100\",\n      borderColor: \"mono100\",\n      color: \"mono0\",\n    },\n    success: {\n      backgroundColor: \"transparent\",\n      borderColor: \"mono100\",\n      color: \"mono100\",\n    },\n  },\n\n  tertiary: {\n    default: {\n      backgroundColor: \"transparent\",\n      borderColor: \"transparent\",\n      color: \"mono100\",\n    },\n    focus: {\n      backgroundColor: \"blue10\",\n      borderColor: \"blue10\",\n      color: \"blue100\",\n      textDecoration: \"underline\",\n    },\n    hover: {\n      backgroundColor: \"blue10\",\n      borderColor: \"blue10\",\n      color: \"blue100\",\n      textDecoration: \"underline\",\n    },\n    active: {\n      backgroundColor: \"blue15\",\n      borderColor: \"blue15\",\n      color: \"blue100\",\n      textDecoration: \"underline\",\n    },\n    loading: {\n      backgroundColor: \"blue10\",\n      borderColor: \"blue10\",\n      color: \"blue100\",\n    },\n    disabled: {\n      backgroundColor: \"transparent\",\n      borderColor: \"transparent\",\n      color: \"mono30\",\n    },\n    success: {\n      backgroundColor: \"transparent\",\n      borderColor: \"transparent\",\n      color: \"blue100\",\n    },\n  },\n}\n\ntype ButtonVariants = Record<ButtonState, Record<ButtonVariant, any>>\n\n/** Inverts the structure of the style object so that we can use responsive values for `variant` */\nexport const BUTTON_VARIANTS: ButtonVariants = BUTTON_STATES.reduce(\n  (variantsMemo, state) => {\n    return {\n      ...variantsMemo,\n      [state]: BUTTON_VARIANT_NAMES.reduce((stateMemo, variant) => {\n        return {\n          ...stateMemo,\n          [variant]: BUTTON_STYLES[variant][state],\n        }\n      }, {}),\n    }\n  },\n  {} as ButtonVariants\n)\n\n/** Available button sizes */\nexport const BUTTON_SIZES = {\n  small: {\n    height: \"30px\",\n    borderRadius: \"15px\",\n    px: \"25px\",\n  },\n  large: {\n    height: \"50px\",\n    borderRadius: \"25px\",\n    px: \"25px\",\n  },\n} as const\n\n/** Text sizes associated with available button sizes */\nexport const BUTTON_TEXT_SIZES: Record<ButtonSize, TextProps[\"variant\"]> = {\n  small: \"xs\",\n  large: \"sm-display\",\n}\n"],"mappings":"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"}
+{"version":3,"file":"tokens.js","names":["BUTTON_STATES","BUTTON_VARIANT_NAMES","DEFAULT_PRIMARY_STATES","focus","backgroundColor","borderColor","color","textDecoration","hover","active","loading","disabled","success","DEFAULT_SECONDARY_STATES","_objectSpread","BUTTON_STYLES","primaryBlack","default","primaryWhite","primaryBlue","primaryGray","secondaryBlack","secondaryBlue","secondaryWhite","secondaryNeutral","tertiary","BUTTON_VARIANTS","reduce","variantsMemo","state","_defineProperty","stateMemo","variant","BUTTON_SIZES","small","height","borderRadius","px","large","BUTTON_TEXT_SIZES"],"sources":["../../../../src/elements/Button/tokens.ts"],"sourcesContent":["import { BUTTON_STATES, BUTTON_VARIANT_NAMES } from \"./types\"\nimport { TextProps } from \"../Text\"\nimport { ButtonSize, ButtonState, ButtonVariant } from \"./types\"\n\nconst DEFAULT_PRIMARY_STATES = {\n  focus: {\n    backgroundColor: \"blue100\",\n    borderColor: \"blue100\",\n    color: \"mono0\",\n    textDecoration: \"underline\",\n  },\n  hover: {\n    backgroundColor: \"blue100\",\n    borderColor: \"blue100\",\n    color: \"mono0\",\n    textDecoration: \"underline\",\n  },\n  active: {\n    backgroundColor: \"blue150\",\n    borderColor: \"blue150\",\n    color: \"mono0\",\n    textDecoration: \"underline\",\n  },\n  loading: {\n    backgroundColor: \"blue100\",\n    borderColor: \"blue100\",\n    color: \"mono0\",\n  },\n  disabled: {\n    backgroundColor: \"mono30\",\n    borderColor: \"mono30\",\n    color: \"mono0\",\n  },\n  success: {\n    backgroundColor: \"blue100\",\n    borderColor: \"blue100\",\n    color: \"mono0\",\n  },\n}\n\nconst DEFAULT_SECONDARY_STATES = {\n  ...DEFAULT_PRIMARY_STATES,\n  disabled: {\n    backgroundColor: \"transparent\",\n    borderColor: \"mono30\",\n    color: \"mono30\",\n  },\n}\n\nexport const BUTTON_STYLES: Record<ButtonVariant, Record<ButtonState, any>> = {\n  primaryBlack: {\n    default: {\n      backgroundColor: \"mono100\",\n      borderColor: \"mono100\",\n      color: \"mono0\",\n    },\n    ...DEFAULT_PRIMARY_STATES,\n  },\n\n  primaryWhite: {\n    default: {\n      backgroundColor: \"mono0\",\n      borderColor: \"mono0\",\n      color: \"mono100\",\n    },\n    ...DEFAULT_PRIMARY_STATES,\n  },\n\n  primaryBlue: {\n    default: {\n      backgroundColor: \"blue100\",\n      borderColor: \"blue100\",\n      color: \"mono0\",\n    },\n    ...DEFAULT_PRIMARY_STATES,\n    focus: {\n      backgroundColor: \"blue150\",\n      borderColor: \"blue150\",\n      color: \"mono0\",\n      textDecoration: \"underline\",\n    },\n    hover: {\n      backgroundColor: \"blue150\",\n      borderColor: \"blue150\",\n      color: \"mono0\",\n      textDecoration: \"underline\",\n    },\n    active: {\n      backgroundColor: \"blue200\",\n      borderColor: \"blue200\",\n      color: \"mono0\",\n      textDecoration: \"underline\",\n    },\n  },\n\n  primaryGray: {\n    default: {\n      backgroundColor: \"mono10\",\n      borderColor: \"mono10\",\n      color: \"mono100\",\n    },\n    ...DEFAULT_PRIMARY_STATES,\n  },\n\n  secondaryBlack: {\n    default: {\n      backgroundColor: \"transparent\",\n      borderColor: \"mono100\",\n      color: \"mono100\",\n    },\n    ...DEFAULT_SECONDARY_STATES,\n  },\n\n  secondaryBlue: {\n    default: {\n      backgroundColor: \"transparent\",\n      borderColor: \"blue100\",\n      color: \"blue100\",\n    },\n    ...DEFAULT_SECONDARY_STATES,\n  },\n\n  secondaryWhite: {\n    default: {\n      backgroundColor: \"transparent\",\n      borderColor: \"mono0\",\n      color: \"mono0\",\n    },\n    ...DEFAULT_SECONDARY_STATES,\n  },\n\n  /** Used for follow buttons */\n  secondaryNeutral: {\n    default: {\n      backgroundColor: \"transparent\",\n      borderColor: \"mono100\",\n      color: \"mono100\",\n    },\n    ...DEFAULT_SECONDARY_STATES,\n    focus: {\n      backgroundColor: \"mono10\",\n      borderColor: \"mono10\",\n      color: \"mono100\",\n      textDecoration: \"underline\",\n    },\n    hover: {\n      backgroundColor: \"mono100\",\n      borderColor: \"mono100\",\n      color: \"mono0\",\n      textDecoration: \"underline\",\n    },\n    active: {\n      backgroundColor: \"mono100\",\n      borderColor: \"mono100\",\n      color: \"mono0\",\n      textDecoration: \"underline\",\n    },\n    loading: {\n      backgroundColor: \"mono100\",\n      borderColor: \"mono100\",\n      color: \"mono0\",\n    },\n    success: {\n      backgroundColor: \"transparent\",\n      borderColor: \"mono100\",\n      color: \"mono100\",\n    },\n  },\n\n  tertiary: {\n    default: {\n      backgroundColor: \"transparent\",\n      borderColor: \"transparent\",\n      color: \"mono100\",\n    },\n    focus: {\n      backgroundColor: \"blue10\",\n      borderColor: \"blue10\",\n      color: \"blue100\",\n      textDecoration: \"underline\",\n    },\n    hover: {\n      backgroundColor: \"blue10\",\n      borderColor: \"blue10\",\n      color: \"blue100\",\n      textDecoration: \"underline\",\n    },\n    active: {\n      backgroundColor: \"blue15\",\n      borderColor: \"blue15\",\n      color: \"blue100\",\n      textDecoration: \"underline\",\n    },\n    loading: {\n      backgroundColor: \"blue10\",\n      borderColor: \"blue10\",\n      color: \"blue100\",\n    },\n    disabled: {\n      backgroundColor: \"transparent\",\n      borderColor: \"transparent\",\n      color: \"mono30\",\n    },\n    success: {\n      backgroundColor: \"transparent\",\n      borderColor: \"transparent\",\n      color: \"blue100\",\n    },\n  },\n}\n\ntype ButtonVariants = Record<ButtonState, Record<ButtonVariant, any>>\n\n/** Inverts the structure of the style object so that we can use responsive values for `variant` */\nexport const BUTTON_VARIANTS: ButtonVariants = BUTTON_STATES.reduce(\n  (variantsMemo, state) => {\n    return {\n      ...variantsMemo,\n      [state]: BUTTON_VARIANT_NAMES.reduce((stateMemo, variant) => {\n        return {\n          ...stateMemo,\n          [variant]: BUTTON_STYLES[variant][state],\n        }\n      }, {}),\n    }\n  },\n  {} as ButtonVariants\n)\n\n/** Available button sizes */\nexport const BUTTON_SIZES = {\n  small: {\n    height: \"30px\",\n    borderRadius: \"15px\",\n    px: \"25px\",\n  },\n  large: {\n    height: \"50px\",\n    borderRadius: \"25px\",\n    px: \"25px\",\n  },\n} as const\n\n/** Text sizes associated with available button sizes */\nexport const BUTTON_TEXT_SIZES: Record<ButtonSize, TextProps[\"variant\"]> = {\n  small: \"xs\",\n  large: \"sm-display\",\n}\n"],"mappings":"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"}

package/dist/esm/elements/CSSGrid/CSSGrid.js

@@ -1,6 +1,6 @@
 import styled from "styled-components";
-import { grid, GridProps } from "styled-system";
-import { Box, BoxProps } from "../Box";
+import { grid } from "styled-system";
+import { Box } from "../Box";
 
 /**
  * All props available to the CSSGrid component

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

@@ -1 +1 @@
-{"version":3,"file":"CSSGrid.js","names":["styled","grid","GridProps","Box","BoxProps","CSSGrid","withConfig","displayName","componentId"],"sources":["../../../../src/elements/CSSGrid/CSSGrid.tsx"],"sourcesContent":["import styled from \"styled-components\"\nimport { grid, GridProps } from \"styled-system\"\nimport { Box, BoxProps } from \"../Box\"\n\n/**\n * All props available to the CSSGrid component\n */\nexport interface CSSGridProps extends GridProps, BoxProps {}\n\n/**\n * A utility component that encapsulates CSS grid behavior\n */\nexport const CSSGrid = styled(Box)<CSSGridProps>`\n  display: grid;\n  ${grid}\n`\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,IAAI,EAAEC,SAAS,QAAQ,eAAe;AAC/C,SAASC,GAAG,EAAEC,QAAQ;;AAEtB;AACA;AACA;;AAGA;AACA;AACA;AACA,OAAO,IAAMC,OAAO,GAAGL,MAAM,CAACG,GAAG,CAAC,CAAAG,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,0BAE9BP,IAAI,CACP"}
+{"version":3,"file":"CSSGrid.js","names":["styled","grid","Box","CSSGrid","withConfig","displayName","componentId"],"sources":["../../../../src/elements/CSSGrid/CSSGrid.tsx"],"sourcesContent":["import styled from \"styled-components\"\nimport { grid, GridProps } from \"styled-system\"\nimport { Box, BoxProps } from \"../Box\"\n\n/**\n * All props available to the CSSGrid component\n */\nexport interface CSSGridProps extends GridProps, BoxProps {}\n\n/**\n * A utility component that encapsulates CSS grid behavior\n */\nexport const CSSGrid = styled(Box)<CSSGridProps>`\n  display: grid;\n  ${grid}\n`\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,IAAI,QAAmB,eAAe;AAC/C,SAASC,GAAG;;AAEZ;AACA;AACA;;AAGA;AACA;AACA;AACA,OAAO,IAAMC,OAAO,GAAGH,MAAM,CAACE,GAAG,CAAC,CAAAE,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,0BAE9BL,IAAI,CACP"}

package/dist/esm/elements/Cards/Card.js

@@ -3,8 +3,8 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React from "react";
-import { Image, ImageProps } from "../Image";
-import { Box, BoxProps } from "../Box";
+import { Image } from "../Image";
+import { Box } from "../Box";
 import { Text } from "../Text";
 import { ResponsiveBox } from "../ResponsiveBox";
 import { useTheme } from "../../Theme";

package/dist/esm/elements/Cards/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","names":["React","Image","ImageProps","Box","BoxProps","Text","ResponsiveBox","useTheme","Card","_ref","image","title","subtitle","status","_ref$maxWidth","maxWidth","_ref$aspectWidth","aspectWidth","_ref$aspectHeight","aspectHeight","rest","_objectWithoutProperties","_excluded","_useTheme","theme","hasInfo","createElement","_extends","alt","height","width","style","objectFit","src","position","bottom","left","background","effects","overlayGradient","p","textShadow","variant","color","displayName"],"sources":["../../../../src/elements/Cards/Card.tsx"],"sourcesContent":["import React from \"react\"\nimport { Image, ImageProps } from \"../Image\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Text } from \"../Text\"\nimport { ResponsiveBox } from \"../ResponsiveBox\"\nimport { useTheme } from \"../../Theme\"\n\nexport interface CardProps extends BoxProps {\n  image: string | ImageProps | null | undefined\n  title?: string | null\n  subtitle?: string | null\n  status?: string | null\n  aspectWidth?: number\n  aspectHeight?: number\n}\n\n/**\n * `Card` is a card with one image one tall image, and text for title\n * and subtitle at the bottom.\n */\nexport const Card: React.FC<React.PropsWithChildren<CardProps>> = ({\n  image,\n  title,\n  subtitle,\n  status,\n  maxWidth = 280,\n  aspectWidth = 280,\n  aspectHeight = 370,\n  ...rest\n}) => {\n  const { theme } = useTheme()\n\n  const hasInfo = title || subtitle || status\n\n  return (\n    <Box maxWidth={maxWidth} {...rest}>\n      <ResponsiveBox\n        aspectWidth={aspectWidth}\n        aspectHeight={aspectHeight}\n        maxWidth=\"100%\"\n      >\n        <Image\n          alt=\"\"\n          height=\"100%\"\n          width=\"100%\"\n          style={{ objectFit: \"cover\" }}\n          {...(typeof image === \"string\" ? { src: image } : image)}\n        />\n\n        {hasInfo && (\n          <Box\n            position=\"absolute\"\n            width=\"100%\"\n            height=\"50%\"\n            bottom={0}\n            left={0}\n            background={theme.effects.overlayGradient}\n          />\n        )}\n\n        <Box\n          position=\"absolute\"\n          bottom={0}\n          left={0}\n          width=\"100%\"\n          p={2}\n          style={{ textShadow: theme.effects.textShadow }}\n        >\n          {status && (\n            <Text variant=\"xs\" color=\"mono0\">\n              {status}\n            </Text>\n          )}\n\n          {title && (\n            <Text variant=\"sm-display\" color=\"mono0\">\n              {title}\n            </Text>\n          )}\n\n          {subtitle && (\n            <Text variant=\"sm-display\" color=\"mono15\">\n              {subtitle}\n            </Text>\n          )}\n        </Box>\n      </ResponsiveBox>\n    </Box>\n  )\n}\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,KAAK,EAAEC,UAAU;AAC1B,SAASC,GAAG,EAAEC,QAAQ;AACtB,SAASC,IAAI;AACb,SAASC,aAAa;AACtB,SAASC,QAAQ;AAWjB;AACA;AACA;AACA;AACA,OAAO,IAAMC,IAAkD,GAAG,SAArDA,IAAkDA,CAAAC,IAAA,EASzD;EAAA,IARJC,KAAK,GAAAD,IAAA,CAALC,KAAK;IACLC,KAAK,GAAAF,IAAA,CAALE,KAAK;IACLC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IACRC,MAAM,GAAAJ,IAAA,CAANI,MAAM;IAAAC,aAAA,GAAAL,IAAA,CACNM,QAAQ;IAARA,QAAQ,GAAAD,aAAA,cAAG,GAAG,GAAAA,aAAA;IAAAE,gBAAA,GAAAP,IAAA,CACdQ,WAAW;IAAXA,WAAW,GAAAD,gBAAA,cAAG,GAAG,GAAAA,gBAAA;IAAAE,iBAAA,GAAAT,IAAA,CACjBU,YAAY;IAAZA,YAAY,GAAAD,iBAAA,cAAG,GAAG,GAAAA,iBAAA;IACfE,IAAI,GAAAC,wBAAA,CAAAZ,IAAA,EAAAa,SAAA;EAEP,IAAAC,SAAA,GAAkBhB,QAAQ,EAAE;IAApBiB,KAAK,GAAAD,SAAA,CAALC,KAAK;EAEb,IAAMC,OAAO,GAAGd,KAAK,IAAIC,QAAQ,IAAIC,MAAM;EAE3C,oBACEb,KAAA,CAAA0B,aAAA,CAACvB,GAAG,EAAAwB,QAAA;IAACZ,QAAQ,EAAEA;EAAS,GAAKK,IAAI,gBAC/BpB,KAAA,CAAA0B,aAAA,CAACpB,aAAa;IACZW,WAAW,EAAEA,WAAY;IACzBE,YAAY,EAAEA,YAAa;IAC3BJ,QAAQ,EAAC;EAAM,gBAEff,KAAA,CAAA0B,aAAA,CAACzB,KAAK,EAAA0B,QAAA;IACJC,GAAG,EAAC,EAAE;IACNC,MAAM,EAAC,MAAM;IACbC,KAAK,EAAC,MAAM;IACZC,KAAK,EAAE;MAAEC,SAAS,EAAE;IAAQ;EAAE,GACzB,OAAOtB,KAAK,KAAK,QAAQ,GAAG;IAAEuB,GAAG,EAAEvB;EAAM,CAAC,GAAGA,KAAK,EACvD,EAEDe,OAAO,iBACNzB,KAAA,CAAA0B,aAAA,CAACvB,GAAG;IACF+B,QAAQ,EAAC,UAAU;IACnBJ,KAAK,EAAC,MAAM;IACZD,MAAM,EAAC,KAAK;IACZM,MAAM,EAAE,CAAE;IACVC,IAAI,EAAE,CAAE;IACRC,UAAU,EAAEb,KAAK,CAACc,OAAO,CAACC;EAAgB,EAE7C,eAEDvC,KAAA,CAAA0B,aAAA,CAACvB,GAAG;IACF+B,QAAQ,EAAC,UAAU;IACnBC,MAAM,EAAE,CAAE;IACVC,IAAI,EAAE,CAAE;IACRN,KAAK,EAAC,MAAM;IACZU,CAAC,EAAE,CAAE;IACLT,KAAK,EAAE;MAAEU,UAAU,EAAEjB,KAAK,CAACc,OAAO,CAACG;IAAW;EAAE,GAE/C5B,MAAM,iBACLb,KAAA,CAAA0B,aAAA,CAACrB,IAAI;IAACqC,OAAO,EAAC,IAAI;IAACC,KAAK,EAAC;EAAO,GAC7B9B,MAAM,CAEV,EAEAF,KAAK,iBACJX,KAAA,CAAA0B,aAAA,CAACrB,IAAI;IAACqC,OAAO,EAAC,YAAY;IAACC,KAAK,EAAC;EAAO,GACrChC,KAAK,CAET,EAEAC,QAAQ,iBACPZ,KAAA,CAAA0B,aAAA,CAACrB,IAAI;IAACqC,OAAO,EAAC,YAAY;IAACC,KAAK,EAAC;EAAQ,GACtC/B,QAAQ,CAEZ,CACG,CACQ,CACZ;AAEV,CAAC;AArEYJ,IAAkD,CAAAoC,WAAA"}
+{"version":3,"file":"Card.js","names":["React","Image","Box","Text","ResponsiveBox","useTheme","Card","_ref","image","title","subtitle","status","_ref$maxWidth","maxWidth","_ref$aspectWidth","aspectWidth","_ref$aspectHeight","aspectHeight","rest","_objectWithoutProperties","_excluded","_useTheme","theme","hasInfo","createElement","_extends","alt","height","width","style","objectFit","src","position","bottom","left","background","effects","overlayGradient","p","textShadow","variant","color","displayName"],"sources":["../../../../src/elements/Cards/Card.tsx"],"sourcesContent":["import React from \"react\"\nimport { Image, ImageProps } from \"../Image\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Text } from \"../Text\"\nimport { ResponsiveBox } from \"../ResponsiveBox\"\nimport { useTheme } from \"../../Theme\"\n\nexport interface CardProps extends BoxProps {\n  image: string | ImageProps | null | undefined\n  title?: string | null\n  subtitle?: string | null\n  status?: string | null\n  aspectWidth?: number\n  aspectHeight?: number\n}\n\n/**\n * `Card` is a card with one image one tall image, and text for title\n * and subtitle at the bottom.\n */\nexport const Card: React.FC<React.PropsWithChildren<CardProps>> = ({\n  image,\n  title,\n  subtitle,\n  status,\n  maxWidth = 280,\n  aspectWidth = 280,\n  aspectHeight = 370,\n  ...rest\n}) => {\n  const { theme } = useTheme()\n\n  const hasInfo = title || subtitle || status\n\n  return (\n    <Box maxWidth={maxWidth} {...rest}>\n      <ResponsiveBox\n        aspectWidth={aspectWidth}\n        aspectHeight={aspectHeight}\n        maxWidth=\"100%\"\n      >\n        <Image\n          alt=\"\"\n          height=\"100%\"\n          width=\"100%\"\n          style={{ objectFit: \"cover\" }}\n          {...(typeof image === \"string\" ? { src: image } : image)}\n        />\n\n        {hasInfo && (\n          <Box\n            position=\"absolute\"\n            width=\"100%\"\n            height=\"50%\"\n            bottom={0}\n            left={0}\n            background={theme.effects.overlayGradient}\n          />\n        )}\n\n        <Box\n          position=\"absolute\"\n          bottom={0}\n          left={0}\n          width=\"100%\"\n          p={2}\n          style={{ textShadow: theme.effects.textShadow }}\n        >\n          {status && (\n            <Text variant=\"xs\" color=\"mono0\">\n              {status}\n            </Text>\n          )}\n\n          {title && (\n            <Text variant=\"sm-display\" color=\"mono0\">\n              {title}\n            </Text>\n          )}\n\n          {subtitle && (\n            <Text variant=\"sm-display\" color=\"mono15\">\n              {subtitle}\n            </Text>\n          )}\n        </Box>\n      </ResponsiveBox>\n    </Box>\n  )\n}\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,KAAK;AACd,SAASC,GAAG;AACZ,SAASC,IAAI;AACb,SAASC,aAAa;AACtB,SAASC,QAAQ;AAWjB;AACA;AACA;AACA;AACA,OAAO,IAAMC,IAAkD,GAAG,SAArDA,IAAkDA,CAAAC,IAAA,EASzD;EAAA,IARJC,KAAK,GAAAD,IAAA,CAALC,KAAK;IACLC,KAAK,GAAAF,IAAA,CAALE,KAAK;IACLC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IACRC,MAAM,GAAAJ,IAAA,CAANI,MAAM;IAAAC,aAAA,GAAAL,IAAA,CACNM,QAAQ;IAARA,QAAQ,GAAAD,aAAA,cAAG,GAAG,GAAAA,aAAA;IAAAE,gBAAA,GAAAP,IAAA,CACdQ,WAAW;IAAXA,WAAW,GAAAD,gBAAA,cAAG,GAAG,GAAAA,gBAAA;IAAAE,iBAAA,GAAAT,IAAA,CACjBU,YAAY;IAAZA,YAAY,GAAAD,iBAAA,cAAG,GAAG,GAAAA,iBAAA;IACfE,IAAI,GAAAC,wBAAA,CAAAZ,IAAA,EAAAa,SAAA;EAEP,IAAAC,SAAA,GAAkBhB,QAAQ,EAAE;IAApBiB,KAAK,GAAAD,SAAA,CAALC,KAAK;EAEb,IAAMC,OAAO,GAAGd,KAAK,IAAIC,QAAQ,IAAIC,MAAM;EAE3C,oBACEX,KAAA,CAAAwB,aAAA,CAACtB,GAAG,EAAAuB,QAAA;IAACZ,QAAQ,EAAEA;EAAS,GAAKK,IAAI,gBAC/BlB,KAAA,CAAAwB,aAAA,CAACpB,aAAa;IACZW,WAAW,EAAEA,WAAY;IACzBE,YAAY,EAAEA,YAAa;IAC3BJ,QAAQ,EAAC;EAAM,gBAEfb,KAAA,CAAAwB,aAAA,CAACvB,KAAK,EAAAwB,QAAA;IACJC,GAAG,EAAC,EAAE;IACNC,MAAM,EAAC,MAAM;IACbC,KAAK,EAAC,MAAM;IACZC,KAAK,EAAE;MAAEC,SAAS,EAAE;IAAQ;EAAE,GACzB,OAAOtB,KAAK,KAAK,QAAQ,GAAG;IAAEuB,GAAG,EAAEvB;EAAM,CAAC,GAAGA,KAAK,EACvD,EAEDe,OAAO,iBACNvB,KAAA,CAAAwB,aAAA,CAACtB,GAAG;IACF8B,QAAQ,EAAC,UAAU;IACnBJ,KAAK,EAAC,MAAM;IACZD,MAAM,EAAC,KAAK;IACZM,MAAM,EAAE,CAAE;IACVC,IAAI,EAAE,CAAE;IACRC,UAAU,EAAEb,KAAK,CAACc,OAAO,CAACC;EAAgB,EAE7C,eAEDrC,KAAA,CAAAwB,aAAA,CAACtB,GAAG;IACF8B,QAAQ,EAAC,UAAU;IACnBC,MAAM,EAAE,CAAE;IACVC,IAAI,EAAE,CAAE;IACRN,KAAK,EAAC,MAAM;IACZU,CAAC,EAAE,CAAE;IACLT,KAAK,EAAE;MAAEU,UAAU,EAAEjB,KAAK,CAACc,OAAO,CAACG;IAAW;EAAE,GAE/C5B,MAAM,iBACLX,KAAA,CAAAwB,aAAA,CAACrB,IAAI;IAACqC,OAAO,EAAC,IAAI;IAACC,KAAK,EAAC;EAAO,GAC7B9B,MAAM,CAEV,EAEAF,KAAK,iBACJT,KAAA,CAAAwB,aAAA,CAACrB,IAAI;IAACqC,OAAO,EAAC,YAAY;IAACC,KAAK,EAAC;EAAO,GACrChC,KAAK,CAET,EAEAC,QAAQ,iBACPV,KAAA,CAAAwB,aAAA,CAACrB,IAAI;IAACqC,OAAO,EAAC,YAAY;IAACC,KAAK,EAAC;EAAQ,GACtC/B,QAAQ,CAEZ,CACG,CACQ,CACZ;AAEV,CAAC;AArEYJ,IAAkD,CAAAoC,WAAA"}

package/dist/esm/elements/Cards/TriptychCard.js

@@ -9,8 +9,8 @@ function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symb
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 import React from "react";
-import { Image, ImageProps } from "../Image";
-import { Box, BoxProps } from "../Box";
+import { Image } from "../Image";
+import { Box } from "../Box";
 import { ResponsiveBox } from "../ResponsiveBox";
 import { Flex } from "../Flex";
 import { Text } from "../Text";

package/dist/esm/elements/Cards/TriptychCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"TriptychCard.js","names":["React","Image","ImageProps","Box","BoxProps","ResponsiveBox","Flex","Text","isArrayOfStrings","images","_toConsumableArray","every","src","TriptychCard","_ref","title","subtitle","status","rest","_objectWithoutProperties","_excluded","imgs","map","slice","createElement","aspectWidth","aspectHeight","maxWidth","mb","flexDirection","width","height","length","bg","borderRight","borderColor","_extends","alt","style","objectFit","Fragment","flexShrink","borderLeft","borderBottom","borderTop","variant","color","displayName"],"sources":["../../../../src/elements/Cards/TriptychCard.tsx"],"sourcesContent":["import React from \"react\"\nimport { Image, ImageProps } from \"../Image\"\nimport { Box, BoxProps } from \"../Box\"\nimport { ResponsiveBox } from \"../ResponsiveBox\"\nimport { Flex } from \"../Flex\"\nimport { Text } from \"../Text\"\n\ntype Images = ImageProps[] | string[]\n\nexport interface TriptychCardProps extends BoxProps {\n  /** 1, 2, or 3 images */\n  images: Images\n  title?: string | null\n  subtitle?: string | null\n  status?: string | null\n}\n\nexport const isArrayOfStrings = (images: Images): images is string[] =>\n  [...images].every((src) => typeof src === \"string\")\n\n/**\n * `TriptychCard` is a card with a layout one square image on the left,\n * one tall or two square images on the right, and text for title and subtitle\n * at the bottom.\n */\n\nexport const TriptychCard: React.FC<\n  React.PropsWithChildren<TriptychCardProps>\n> = ({ images, title, subtitle, status, ...rest }) => {\n  const imgs: ImageProps[] = (isArrayOfStrings(images)\n    ? images.map((src) => ({ src }))\n    : images\n  ).slice(0, 3)\n\n  return (\n    <Box {...rest}>\n      <ResponsiveBox aspectWidth={3} aspectHeight={2} maxWidth=\"100%\" mb={1}>\n        <Flex flexDirection=\"row\" width=\"100%\" height=\"100%\">\n          {(() => {\n            switch (imgs.length) {\n              case 1:\n                return (\n                  <ResponsiveBox\n                    aspectWidth={3}\n                    aspectHeight={2}\n                    maxWidth=\"100%\"\n                    bg=\"mono10\"\n                    borderRight=\"1px solid\"\n                    borderColor=\"mono0\"\n                  >\n                    <Image\n                      alt=\"\"\n                      height=\"100%\"\n                      width=\"100%\"\n                      style={{ objectFit: \"cover\" }}\n                      {...imgs[0]}\n                    />\n                  </ResponsiveBox>\n                )\n\n              case 2:\n                return (\n                  <>\n                    <ResponsiveBox\n                      aspectWidth={1}\n                      aspectHeight={1}\n                      maxWidth=\"100%\"\n                      bg=\"mono10\"\n                      borderRight=\"1px solid\"\n                      borderColor=\"mono0\"\n                    >\n                      <Image\n                        alt=\"\"\n                        height=\"100%\"\n                        width=\"100%\"\n                        style={{ objectFit: \"cover\" }}\n                        {...imgs[0]}\n                      />\n                    </ResponsiveBox>\n\n                    <Flex width=\"33.33%\" flexShrink={0}>\n                      <ResponsiveBox\n                        aspectWidth={1}\n                        aspectHeight={2}\n                        maxWidth=\"100%\"\n                        bg=\"mono10\"\n                        borderLeft=\"1px solid\"\n                        borderColor=\"mono0\"\n                      >\n                        <Image\n                          alt=\"\"\n                          height=\"100%\"\n                          width=\"100%\"\n                          style={{ objectFit: \"cover\" }}\n                          {...imgs[1]}\n                        />\n                      </ResponsiveBox>\n                    </Flex>\n                  </>\n                )\n              case 3:\n                return (\n                  <>\n                    <ResponsiveBox\n                      aspectWidth={1}\n                      aspectHeight={1}\n                      maxWidth=\"100%\"\n                      bg=\"mono10\"\n                      borderRight=\"1px solid\"\n                      borderColor=\"mono0\"\n                    >\n                      <Image\n                        alt=\"\"\n                        height=\"100%\"\n                        width=\"100%\"\n                        style={{ objectFit: \"cover\" }}\n                        {...imgs[0]}\n                      />\n                    </ResponsiveBox>\n\n                    <Flex width=\"33.33%\" flexShrink={0} flexDirection=\"column\">\n                      <ResponsiveBox\n                        aspectWidth={1}\n                        aspectHeight={1}\n                        maxWidth=\"100%\"\n                        bg=\"mono10\"\n                        borderLeft=\"1px solid\"\n                        borderBottom=\"1px solid\"\n                        borderColor=\"mono0\"\n                      >\n                        <Image\n                          alt=\"\"\n                          height=\"100%\"\n                          width=\"100%\"\n                          style={{ objectFit: \"cover\" }}\n                          {...imgs[1]}\n                        />\n                      </ResponsiveBox>\n\n                      <ResponsiveBox\n                        aspectWidth={1}\n                        aspectHeight={1}\n                        maxWidth=\"100%\"\n                        bg=\"mono10\"\n                        borderLeft=\"1px solid\"\n                        borderTop=\"1px solid\"\n                        borderColor=\"mono0\"\n                      >\n                        <Image\n                          alt=\"\"\n                          height=\"100%\"\n                          width=\"100%\"\n                          style={{ objectFit: \"cover\" }}\n                          {...imgs[2]}\n                        />\n                      </ResponsiveBox>\n                    </Flex>\n                  </>\n                )\n            }\n          })()}\n        </Flex>\n      </ResponsiveBox>\n\n      {status && <Text variant=\"xs\">{status}</Text>}\n\n      <Text variant=\"sm-display\">{title}</Text>\n\n      {subtitle && (\n        <Text variant=\"sm-display\" color=\"mono60\">\n          {subtitle}\n        </Text>\n      )}\n    </Box>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"TriptychCard.js","names":["React","Image","Box","ResponsiveBox","Flex","Text","isArrayOfStrings","images","_toConsumableArray","every","src","TriptychCard","_ref","title","subtitle","status","rest","_objectWithoutProperties","_excluded","imgs","map","slice","createElement","aspectWidth","aspectHeight","maxWidth","mb","flexDirection","width","height","length","bg","borderRight","borderColor","_extends","alt","style","objectFit","Fragment","flexShrink","borderLeft","borderBottom","borderTop","variant","color","displayName"],"sources":["../../../../src/elements/Cards/TriptychCard.tsx"],"sourcesContent":["import React from \"react\"\nimport { Image, ImageProps } from \"../Image\"\nimport { Box, BoxProps } from \"../Box\"\nimport { ResponsiveBox } from \"../ResponsiveBox\"\nimport { Flex } from \"../Flex\"\nimport { Text } from \"../Text\"\n\ntype Images = ImageProps[] | string[]\n\nexport interface TriptychCardProps extends BoxProps {\n  /** 1, 2, or 3 images */\n  images: Images\n  title?: string | null\n  subtitle?: string | null\n  status?: string | null\n}\n\nexport const isArrayOfStrings = (images: Images): images is string[] =>\n  [...images].every((src) => typeof src === \"string\")\n\n/**\n * `TriptychCard` is a card with a layout one square image on the left,\n * one tall or two square images on the right, and text for title and subtitle\n * at the bottom.\n */\n\nexport const TriptychCard: React.FC<\n  React.PropsWithChildren<TriptychCardProps>\n> = ({ images, title, subtitle, status, ...rest }) => {\n  const imgs: ImageProps[] = (isArrayOfStrings(images)\n    ? images.map((src) => ({ src }))\n    : images\n  ).slice(0, 3)\n\n  return (\n    <Box {...rest}>\n      <ResponsiveBox aspectWidth={3} aspectHeight={2} maxWidth=\"100%\" mb={1}>\n        <Flex flexDirection=\"row\" width=\"100%\" height=\"100%\">\n          {(() => {\n            switch (imgs.length) {\n              case 1:\n                return (\n                  <ResponsiveBox\n                    aspectWidth={3}\n                    aspectHeight={2}\n                    maxWidth=\"100%\"\n                    bg=\"mono10\"\n                    borderRight=\"1px solid\"\n                    borderColor=\"mono0\"\n                  >\n                    <Image\n                      alt=\"\"\n                      height=\"100%\"\n                      width=\"100%\"\n                      style={{ objectFit: \"cover\" }}\n                      {...imgs[0]}\n                    />\n                  </ResponsiveBox>\n                )\n\n              case 2:\n                return (\n                  <>\n                    <ResponsiveBox\n                      aspectWidth={1}\n                      aspectHeight={1}\n                      maxWidth=\"100%\"\n                      bg=\"mono10\"\n                      borderRight=\"1px solid\"\n                      borderColor=\"mono0\"\n                    >\n                      <Image\n                        alt=\"\"\n                        height=\"100%\"\n                        width=\"100%\"\n                        style={{ objectFit: \"cover\" }}\n                        {...imgs[0]}\n                      />\n                    </ResponsiveBox>\n\n                    <Flex width=\"33.33%\" flexShrink={0}>\n                      <ResponsiveBox\n                        aspectWidth={1}\n                        aspectHeight={2}\n                        maxWidth=\"100%\"\n                        bg=\"mono10\"\n                        borderLeft=\"1px solid\"\n                        borderColor=\"mono0\"\n                      >\n                        <Image\n                          alt=\"\"\n                          height=\"100%\"\n                          width=\"100%\"\n                          style={{ objectFit: \"cover\" }}\n                          {...imgs[1]}\n                        />\n                      </ResponsiveBox>\n                    </Flex>\n                  </>\n                )\n              case 3:\n                return (\n                  <>\n                    <ResponsiveBox\n                      aspectWidth={1}\n                      aspectHeight={1}\n                      maxWidth=\"100%\"\n                      bg=\"mono10\"\n                      borderRight=\"1px solid\"\n                      borderColor=\"mono0\"\n                    >\n                      <Image\n                        alt=\"\"\n                        height=\"100%\"\n                        width=\"100%\"\n                        style={{ objectFit: \"cover\" }}\n                        {...imgs[0]}\n                      />\n                    </ResponsiveBox>\n\n                    <Flex width=\"33.33%\" flexShrink={0} flexDirection=\"column\">\n                      <ResponsiveBox\n                        aspectWidth={1}\n                        aspectHeight={1}\n                        maxWidth=\"100%\"\n                        bg=\"mono10\"\n                        borderLeft=\"1px solid\"\n                        borderBottom=\"1px solid\"\n                        borderColor=\"mono0\"\n                      >\n                        <Image\n                          alt=\"\"\n                          height=\"100%\"\n                          width=\"100%\"\n                          style={{ objectFit: \"cover\" }}\n                          {...imgs[1]}\n                        />\n                      </ResponsiveBox>\n\n                      <ResponsiveBox\n                        aspectWidth={1}\n                        aspectHeight={1}\n                        maxWidth=\"100%\"\n                        bg=\"mono10\"\n                        borderLeft=\"1px solid\"\n                        borderTop=\"1px solid\"\n                        borderColor=\"mono0\"\n                      >\n                        <Image\n                          alt=\"\"\n                          height=\"100%\"\n                          width=\"100%\"\n                          style={{ objectFit: \"cover\" }}\n                          {...imgs[2]}\n                        />\n                      </ResponsiveBox>\n                    </Flex>\n                  </>\n                )\n            }\n          })()}\n        </Flex>\n      </ResponsiveBox>\n\n      {status && <Text variant=\"xs\">{status}</Text>}\n\n      <Text variant=\"sm-display\">{title}</Text>\n\n      {subtitle && (\n        <Text variant=\"sm-display\" color=\"mono60\">\n          {subtitle}\n        </Text>\n      )}\n    </Box>\n  )\n}\n"],"mappings":"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"}

package/dist/esm/elements/Carousel/Carousel.js

@@ -10,16 +10,15 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React, { Children, createRef, isValidElement, useEffect, useMemo, useRef, useState } from "react";
 import styled from "styled-components";
-import { ResponsiveValue, system } from "styled-system";
+import { system } from "styled-system";
 import { useCursor } from "use-cursor";
 import ChevronLeftIcon from "@artsy/icons/ChevronLeftIcon";
 import ChevronRightIcon from "@artsy/icons/ChevronRightIcon";
-import { SpacingUnit } from "../../Theme";
 import { useUpdateEffect } from "../../utils/useUpdateEffect";
-import { Box, BoxProps } from "../Box";
+import { Box } from "../Box";
 import { Skip } from "../Skip";
 import { VisuallyHidden } from "../VisuallyHidden";
-import { CarouselNavigationProps, CarouselNext, CarouselPrevious } from "./CarouselNavigation";
+import { CarouselNext, CarouselPrevious } from "./CarouselNavigation";
 import { paginateCarousel } from "./paginate";
 var RAIL_TRANSITION_MS = 500;
 var transition = system({

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

@@ -1 +1 @@
-{"version":3,"file":"Carousel.js","names":["React","Children","createRef","isValidElement","useEffect","useMemo","useRef","useState","styled","ResponsiveValue","system","useCursor","ChevronLeftIcon","ChevronRightIcon","SpacingUnit","useUpdateEffect","Box","BoxProps","Skip","VisuallyHidden","CarouselNavigationProps","CarouselNext","CarouselPrevious","paginateCarousel","RAIL_TRANSITION_MS","transition","CarouselRail","withConfig","displayName","componentId","defaultProps","as","display","concat","CarouselCell","CELL_GAP_PADDING_AMOUNT","Container","Viewport","Carousel","_ref","_ref$initialIndex","initialIndex","children","_ref$Previous","Previous","_ref$Next","Next","_ref$Rail","Rail","_ref$Cell","Cell","_ref$paginateBy","paginateBy","onChange","onPageCountChange","rest","_objectWithoutProperties","_excluded","containerRef","viewportRef","startRef","endRef","cells","toArray","filter","map","child","ref","_useState","_useState2","_slicedToArray","pages","setPages","_useCursor","initialCursor","max","length","index","handleNext","handlePrev","setCursor","init","viewport","current","values","_ref2","clientWidth","window","addEventListener","removeEventListener","skipToEnd","focus","skipToStart","handleKeydown","_ref3","key","contains","document","activeElement","offset","createElement","_extends","onClick","width","mb","disabled","height","style","transform","_ref4","i","isLast","pr","mt"],"sources":["../../../../src/elements/Carousel/Carousel.tsx"],"sourcesContent":["import React, {\n  Children,\n  createRef,\n  isValidElement,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\"\nimport styled from \"styled-components\"\nimport { ResponsiveValue, system } from \"styled-system\"\nimport { useCursor } from \"use-cursor\"\nimport ChevronLeftIcon from \"@artsy/icons/ChevronLeftIcon\"\nimport ChevronRightIcon from \"@artsy/icons/ChevronRightIcon\"\nimport { SpacingUnit } from \"../../Theme\"\nimport { useUpdateEffect } from \"../../utils/useUpdateEffect\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Skip } from \"../Skip\"\nimport { VisuallyHidden } from \"../VisuallyHidden\"\nimport {\n  CarouselNavigationProps,\n  CarouselNext,\n  CarouselPrevious,\n} from \"./CarouselNavigation\"\nimport { paginateCarousel } from \"./paginate\"\n\nconst RAIL_TRANSITION_MS = 500\n\nconst transition = system({ transition: true })\n\n/** CarouselRailProps */\nexport type CarouselRailProps = BoxProps & {\n  transition?: ResponsiveValue<string>\n}\n\n/** A `CarouselRail` slides back and forth within the viewport */\nexport const CarouselRail = styled(Box)<CarouselRailProps>`\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  white-space: nowrap;\n  ${transition}\n`\n\nCarouselRail.defaultProps = {\n  as: \"ul\",\n  display: \"flex\",\n  transition: `transform ${RAIL_TRANSITION_MS}ms`,\n}\n\n/** CarouselCellProps */\nexport type CarouselCellProps = BoxProps\n\n/** A `CarouselCell` wraps a single child in the carousel */\nexport const CarouselCell = styled(Box)`\n  white-space: normal;\n`\n\nCarouselCell.defaultProps = {\n  as: \"li\",\n}\n\n/**\n * We share this spacing value with the `Swiper` component\n */\nexport const CELL_GAP_PADDING_AMOUNT: SpacingUnit[] = [1, 2]\n\nconst Container = styled(Box)`\n  position: relative;\n  width: 100%;\n`\n\nconst Viewport = styled(Box)`\n  width: 100%;\n  overflow: hidden;\n`\n\nexport interface CarouselProps extends BoxProps {\n  initialIndex?: number\n  children: React.ReactNode\n  Next?: typeof CarouselNext | React.FC<React.PropsWithChildren<CarouselNavigationProps>>\n  Previous?: typeof CarouselPrevious | React.FC<React.PropsWithChildren<CarouselNavigationProps>>\n  Rail?: typeof CarouselRail | React.FC<React.PropsWithChildren<CarouselRailProps>>\n  /**\n   * If providing a custom `Cell` you must forward a ref so\n   * that cell widths can be calculated.\n   */\n  Cell?: React.ForwardRefExoticComponent<CarouselCellProps>\n  paginateBy?: \"page\" | \"cell\"\n  onChange?(index: number): void\n  onPageCountChange?(count: number): void\n}\n\n/**\n * A `Carousel` accepts children or a series of children that are JSX elements.\n * It presents them in a horizontal rail and when the width exceeds the width\n * of the viewport, it presents navigation arrows and allows a user to page\n * through them.\n */\nexport const Carousel: React.FC<React.PropsWithChildren<CarouselProps>> = ({\n  initialIndex = 0,\n  children,\n  Previous = CarouselPrevious,\n  Next = CarouselNext,\n  Rail = CarouselRail,\n  Cell = CarouselCell,\n  paginateBy = \"page\",\n  onChange,\n  onPageCountChange,\n  ...rest\n}) => {\n  const containerRef = useRef<HTMLDivElement | null>(null)\n  const viewportRef = useRef<HTMLDivElement | null>(null)\n  const startRef = useRef<HTMLButtonElement | null>(null)\n  const endRef = useRef<HTMLButtonElement | null>(null)\n\n  const cells = useMemo(\n    () =>\n      Children.toArray(children)\n        .filter(isValidElement)\n        .map((child) => ({ child, ref: createRef<HTMLDivElement>() })),\n    [children]\n  )\n\n  const [pages, setPages] = useState([0])\n\n  const { index, handleNext, handlePrev, setCursor } = useCursor({\n    initialCursor: initialIndex,\n    max: pages.length,\n  })\n\n  const init = () => {\n    const { current: viewport } = viewportRef\n    const values = cells.map(({ ref }) => ref.current!.clientWidth)\n\n    setPages(\n      paginateCarousel({\n        viewport: viewport!.clientWidth,\n        values,\n        paginateBy,\n      })\n    )\n  }\n\n  useEffect(() => {\n    init()\n    window.addEventListener(\"resize\", init)\n    return () => {\n      window.removeEventListener(\"resize\", init)\n    }\n  }, [cells])\n\n  const skipToEnd = () => {\n    if (!endRef.current) return\n    endRef.current.focus()\n    setCursor(pages.length - 1)\n  }\n\n  const skipToStart = () => {\n    if (!startRef.current) return\n    startRef.current.focus()\n    setCursor(0)\n  }\n\n  const handleKeydown = ({ key }: KeyboardEvent) => {\n    if (!containerRef.current) return\n\n    // Only triggers keyboard navigation if component is in focus\n    if (!containerRef.current.contains(document.activeElement)) {\n      return\n    }\n\n    switch (key) {\n      case \"ArrowRight\":\n        handleNext()\n        break\n      case \"ArrowLeft\":\n        handlePrev()\n        break\n      default:\n        break\n    }\n  }\n\n  useEffect(() => {\n    document.addEventListener(\"keydown\", handleKeydown)\n    return () => document.removeEventListener(\"keydown\", handleKeydown)\n  }, [handleKeydown])\n\n  useUpdateEffect(() => {\n    onChange && onChange(index)\n  }, [onChange, index])\n\n  useUpdateEffect(() => {\n    onPageCountChange && onPageCountChange(pages.length)\n  }, [onPageCountChange, pages.length])\n\n  const offset = `-${pages[index]}px`\n\n  return (\n    <Container ref={containerRef as any} {...rest}>\n      <Skip ref={startRef} onClick={skipToEnd} width=\"100%\" mb={1}>\n        Skip to end of content\n      </Skip>\n\n      <nav>\n        <Previous\n          onClick={handlePrev}\n          disabled={index === 0}\n          aria-label=\"Previous page\"\n        >\n          <ChevronLeftIcon width={15} height={15} />\n        </Previous>\n\n        <Next\n          onClick={handleNext}\n          disabled={index === pages.length - 1}\n          aria-label=\"Next page\"\n        >\n          <ChevronRightIcon width={15} height={15} />\n        </Next>\n      </nav>\n\n      <Viewport ref={viewportRef as any}>\n        <Rail style={{ transform: `translateX(${offset})` }}>\n          {cells.map(({ child, ref }, i) => {\n            const isLast = i === cells.length - 1\n\n            return (\n              <Cell\n                key={i}\n                ref={ref}\n                pr={!isLast && (CELL_GAP_PADDING_AMOUNT as any)}\n              >\n                {child}\n              </Cell>\n            )\n          })}\n        </Rail>\n      </Viewport>\n\n      <Skip ref={endRef} onClick={skipToStart} width=\"100%\" mt={1}>\n        Skip to beginning of content\n      </Skip>\n\n      <VisuallyHidden aria-live=\"polite\" aria-atomic=\"true\">\n        Page {index + 1} of {pages.length}\n      </VisuallyHidden>\n    </Container>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"Carousel.js","names":["React","Children","createRef","isValidElement","useEffect","useMemo","useRef","useState","styled","system","useCursor","ChevronLeftIcon","ChevronRightIcon","useUpdateEffect","Box","Skip","VisuallyHidden","CarouselNext","CarouselPrevious","paginateCarousel","RAIL_TRANSITION_MS","transition","CarouselRail","withConfig","displayName","componentId","defaultProps","as","display","concat","CarouselCell","CELL_GAP_PADDING_AMOUNT","Container","Viewport","Carousel","_ref","_ref$initialIndex","initialIndex","children","_ref$Previous","Previous","_ref$Next","Next","_ref$Rail","Rail","_ref$Cell","Cell","_ref$paginateBy","paginateBy","onChange","onPageCountChange","rest","_objectWithoutProperties","_excluded","containerRef","viewportRef","startRef","endRef","cells","toArray","filter","map","child","ref","_useState","_useState2","_slicedToArray","pages","setPages","_useCursor","initialCursor","max","length","index","handleNext","handlePrev","setCursor","init","viewport","current","values","_ref2","clientWidth","window","addEventListener","removeEventListener","skipToEnd","focus","skipToStart","handleKeydown","_ref3","key","contains","document","activeElement","offset","createElement","_extends","onClick","width","mb","disabled","height","style","transform","_ref4","i","isLast","pr","mt"],"sources":["../../../../src/elements/Carousel/Carousel.tsx"],"sourcesContent":["import React, {\n  Children,\n  createRef,\n  isValidElement,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\"\nimport styled from \"styled-components\"\nimport { ResponsiveValue, system } from \"styled-system\"\nimport { useCursor } from \"use-cursor\"\nimport ChevronLeftIcon from \"@artsy/icons/ChevronLeftIcon\"\nimport ChevronRightIcon from \"@artsy/icons/ChevronRightIcon\"\nimport { SpacingUnit } from \"../../Theme\"\nimport { useUpdateEffect } from \"../../utils/useUpdateEffect\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Skip } from \"../Skip\"\nimport { VisuallyHidden } from \"../VisuallyHidden\"\nimport {\n  CarouselNavigationProps,\n  CarouselNext,\n  CarouselPrevious,\n} from \"./CarouselNavigation\"\nimport { paginateCarousel } from \"./paginate\"\n\nconst RAIL_TRANSITION_MS = 500\n\nconst transition = system({ transition: true })\n\n/** CarouselRailProps */\nexport type CarouselRailProps = BoxProps & {\n  transition?: ResponsiveValue<string>\n}\n\n/** A `CarouselRail` slides back and forth within the viewport */\nexport const CarouselRail = styled(Box)<CarouselRailProps>`\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  white-space: nowrap;\n  ${transition}\n`\n\nCarouselRail.defaultProps = {\n  as: \"ul\",\n  display: \"flex\",\n  transition: `transform ${RAIL_TRANSITION_MS}ms`,\n}\n\n/** CarouselCellProps */\nexport type CarouselCellProps = BoxProps\n\n/** A `CarouselCell` wraps a single child in the carousel */\nexport const CarouselCell = styled(Box)`\n  white-space: normal;\n`\n\nCarouselCell.defaultProps = {\n  as: \"li\",\n}\n\n/**\n * We share this spacing value with the `Swiper` component\n */\nexport const CELL_GAP_PADDING_AMOUNT: SpacingUnit[] = [1, 2]\n\nconst Container = styled(Box)`\n  position: relative;\n  width: 100%;\n`\n\nconst Viewport = styled(Box)`\n  width: 100%;\n  overflow: hidden;\n`\n\nexport interface CarouselProps extends BoxProps {\n  initialIndex?: number\n  children: React.ReactNode\n  Next?: typeof CarouselNext | React.FC<React.PropsWithChildren<CarouselNavigationProps>>\n  Previous?: typeof CarouselPrevious | React.FC<React.PropsWithChildren<CarouselNavigationProps>>\n  Rail?: typeof CarouselRail | React.FC<React.PropsWithChildren<CarouselRailProps>>\n  /**\n   * If providing a custom `Cell` you must forward a ref so\n   * that cell widths can be calculated.\n   */\n  Cell?: React.ForwardRefExoticComponent<CarouselCellProps>\n  paginateBy?: \"page\" | \"cell\"\n  onChange?(index: number): void\n  onPageCountChange?(count: number): void\n}\n\n/**\n * A `Carousel` accepts children or a series of children that are JSX elements.\n * It presents them in a horizontal rail and when the width exceeds the width\n * of the viewport, it presents navigation arrows and allows a user to page\n * through them.\n */\nexport const Carousel: React.FC<React.PropsWithChildren<CarouselProps>> = ({\n  initialIndex = 0,\n  children,\n  Previous = CarouselPrevious,\n  Next = CarouselNext,\n  Rail = CarouselRail,\n  Cell = CarouselCell,\n  paginateBy = \"page\",\n  onChange,\n  onPageCountChange,\n  ...rest\n}) => {\n  const containerRef = useRef<HTMLDivElement | null>(null)\n  const viewportRef = useRef<HTMLDivElement | null>(null)\n  const startRef = useRef<HTMLButtonElement | null>(null)\n  const endRef = useRef<HTMLButtonElement | null>(null)\n\n  const cells = useMemo(\n    () =>\n      Children.toArray(children)\n        .filter(isValidElement)\n        .map((child) => ({ child, ref: createRef<HTMLDivElement>() })),\n    [children]\n  )\n\n  const [pages, setPages] = useState([0])\n\n  const { index, handleNext, handlePrev, setCursor } = useCursor({\n    initialCursor: initialIndex,\n    max: pages.length,\n  })\n\n  const init = () => {\n    const { current: viewport } = viewportRef\n    const values = cells.map(({ ref }) => ref.current!.clientWidth)\n\n    setPages(\n      paginateCarousel({\n        viewport: viewport!.clientWidth,\n        values,\n        paginateBy,\n      })\n    )\n  }\n\n  useEffect(() => {\n    init()\n    window.addEventListener(\"resize\", init)\n    return () => {\n      window.removeEventListener(\"resize\", init)\n    }\n  }, [cells])\n\n  const skipToEnd = () => {\n    if (!endRef.current) return\n    endRef.current.focus()\n    setCursor(pages.length - 1)\n  }\n\n  const skipToStart = () => {\n    if (!startRef.current) return\n    startRef.current.focus()\n    setCursor(0)\n  }\n\n  const handleKeydown = ({ key }: KeyboardEvent) => {\n    if (!containerRef.current) return\n\n    // Only triggers keyboard navigation if component is in focus\n    if (!containerRef.current.contains(document.activeElement)) {\n      return\n    }\n\n    switch (key) {\n      case \"ArrowRight\":\n        handleNext()\n        break\n      case \"ArrowLeft\":\n        handlePrev()\n        break\n      default:\n        break\n    }\n  }\n\n  useEffect(() => {\n    document.addEventListener(\"keydown\", handleKeydown)\n    return () => document.removeEventListener(\"keydown\", handleKeydown)\n  }, [handleKeydown])\n\n  useUpdateEffect(() => {\n    onChange && onChange(index)\n  }, [onChange, index])\n\n  useUpdateEffect(() => {\n    onPageCountChange && onPageCountChange(pages.length)\n  }, [onPageCountChange, pages.length])\n\n  const offset = `-${pages[index]}px`\n\n  return (\n    <Container ref={containerRef as any} {...rest}>\n      <Skip ref={startRef} onClick={skipToEnd} width=\"100%\" mb={1}>\n        Skip to end of content\n      </Skip>\n\n      <nav>\n        <Previous\n          onClick={handlePrev}\n          disabled={index === 0}\n          aria-label=\"Previous page\"\n        >\n          <ChevronLeftIcon width={15} height={15} />\n        </Previous>\n\n        <Next\n          onClick={handleNext}\n          disabled={index === pages.length - 1}\n          aria-label=\"Next page\"\n        >\n          <ChevronRightIcon width={15} height={15} />\n        </Next>\n      </nav>\n\n      <Viewport ref={viewportRef as any}>\n        <Rail style={{ transform: `translateX(${offset})` }}>\n          {cells.map(({ child, ref }, i) => {\n            const isLast = i === cells.length - 1\n\n            return (\n              <Cell\n                key={i}\n                ref={ref}\n                pr={!isLast && (CELL_GAP_PADDING_AMOUNT as any)}\n              >\n                {child}\n              </Cell>\n            )\n          })}\n        </Rail>\n      </Viewport>\n\n      <Skip ref={endRef} onClick={skipToStart} width=\"100%\" mt={1}>\n        Skip to beginning of content\n      </Skip>\n\n      <VisuallyHidden aria-live=\"polite\" aria-atomic=\"true\">\n        Page {index + 1} of {pages.length}\n      </VisuallyHidden>\n    </Container>\n  )\n}\n"],"mappings":"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"}

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

@@ -17,7 +17,7 @@ import React, { useEffect, useState } from "react";
 import { Box } from "../Box";
 import { Clickable } from "../Clickable";
 import { Text } from "../Text";
-import { Carousel, CarouselCell, CarouselNext, CarouselPrevious, CarouselProps, CarouselRail } from "./";
+import { Carousel, CarouselCell, CarouselNext, CarouselPrevious, CarouselRail } from "./";
 import { STORYBOOK_PROPS_BLOCKLIST } from "../../utils/storybookBlocklist";
 var LOREM = "Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae, adipisci. Voluptate voluptatum porro facere atque dolores est neque ipsam quaerat necessitatibus? Deleniti tempora assumenda accusantium, quia quo ad rem expedita!";
 var Demo = function Demo(_ref) {