@artsy/palette 22.1.0 → 23.0.0

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Button/Button.tsx"],"names":["Button","React","forwardRef","forwardedRef","children","loading","success","size","onClick","alignItems","justifyContent","Icon","rest","ref","handleClick","event","current","blur","getTextVariant","displayName","defaultProps","variant","buttonMixin","css","Container","styled","button","prop","variants","BUTTON_SIZES","props","hover","BUTTON_VARIANTS","active","focus","disabled","default","THEME_V3","mediaQueries","boxMixin","BUTTON_TEXT_SIZES","Array","isArray","map","s","large"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;AAiCO,IAAMA,MAEZ,gBAAGC,eAAMC,UAAN,CACF,gBAYEC,YAZF,EAaK;AAAA,MAXDC,QAWC,QAXDA,QAWC;AAAA,MAVDC,OAUC,QAVDA,OAUC;AAAA,MATDC,OASC,QATDA,OASC;AAAA,uBARDC,IAQC;AAAA,MARDA,IAQC,0BARM,OAQN;AAAA,MAPDC,OAOC,QAPDA,OAOC;AAAA,6BANDC,UAMC;AAAA,MANDA,UAMC,gCANY,QAMZ;AAAA,iCALDC,cAKC;AAAA,MALDA,cAKC,oCALgB,QAKhB;AAAA,MAJDC,IAIC,QAJDA,IAIC;AAAA,MAHEC,IAGF;;AACH,MAAMC,GAAG,GAAG,mBAAiC,IAAjC,CAAZ;;AAEA,MAAMC,WAAW,GAAG,SAAdA,WAAc,CAClBC,KADkB,EAEf;AACH,QAAI,CAACV,OAAD,IAAYG,OAAhB,EAAyB;AACvBA,MAAAA,OAAO,CAACO,KAAD,CAAP;AACD;AACF,GAND;;AAQA,wBAAU,YAAM;AACd,QAAIV,OAAO,IAAIQ,GAAG,CAACG,OAAJ,KAAgB,IAA/B,EAAqC;AAAA;;AACnC,sBAAAH,GAAG,CAACG,OAAJ,8DAAaC,IAAb;AACD;AACF,GAJD,EAIG,CAACZ,OAAD,CAJH;AAMA,sBACE,6BAAC,SAAD;AACE,IAAA,GAAG,EAAE,+BAAYQ,GAAZ,EAAiBV,YAAjB,CADP;AAEE,IAAA,OAAO,EAAEW,WAFX;AAGE,IAAA,IAAI,EAAEP,IAHR;AAIE,IAAA,OAAO,EAAEF,OAJX;AAKE,IAAA,OAAO,EAAEC,OALX;AAME,IAAA,QAAQ,EAAED,OAAO,GAAG,CAAC,CAAJ,GAAQ,CAN3B;AAOE,IAAA,OAAO,EAAC,aAPV;AAQE,IAAA,UAAU,EAAEI,UARd;AASE,IAAA,cAAc,EAAEC;AATlB,KAUME,IAVN,GAYGP,OAAO,iBAAI,6BAAC,gBAAD;AAAS,IAAA,IAAI,EAAEE,IAAf;AAAqB,IAAA,KAAK,EAAC;AAA3B,IAZd,eAcE,6BAAC,UAAD;AACE,IAAA,UAAU,EAAE,CADd;AAEE,IAAA,OAAO,EAAEW,cAAc,CAACX,IAAD,CAFzB;AAGE,IAAA,OAAO,EAAEF,OAAO,GAAG,CAAH,GAAO,CAHzB;AAIE,IAAA,OAAO,EAAC,MAJV;AAKE,IAAA,UAAU,EAAEI,UALd;AAME,IAAA,cAAc,EAAEC,cANlB;AAOE,IAAA,KAAK,EAAC;AAPR,KASG,CAACJ,OAAD,IAAYK,IAAZ,iBACC,6BAAC,IAAD;AAAM,IAAA,IAAI,EAAC,cAAX;AAA0B,IAAA,EAAE,EAAE,GAA9B;AAAmC,mBAAY;AAA/C,IAVJ,EAaGL,OAAO,iBACN,6BAAC,eAAD;AAAW,IAAA,IAAI,EAAC,cAAhB;AAA+B,IAAA,EAAE,EAAE,GAAnC;AAAwC,mBAAY;AAApD,IAdJ,EAiBGF,QAjBH,CAdF,CADF;AAoCD,CAnEC,CAFG;;;AAwEPJ,MAAM,CAACmB,WAAP,GAAqB,QAArB;AAEAnB,MAAM,CAACoB,YAAP,GAAsB;AACpBb,EAAAA,IAAI,EAAE,OADc;AAEpBc,EAAAA,OAAO,EAAE;AAFW,CAAtB;AAUO,IAAMC,WAAW,OAAGC,qBAAH,4OAAjB;;;AAYP,IAAMC,SAAS,GAAGC,0BAAOC,MAAV;AAAA;AAAA;AAAA,kCACXJ,WADW,EAIX,2BAAQ;AAAEK,EAAAA,IAAI,EAAE,MAAR;AAAgBC,EAAAA,QAAQ,EAAEC;AAA1B,CAAR,CAJW,EAMX,UAACC,KAAD,EAAW;AACX;AACA,MAAIA,KAAK,CAACC,KAAV,EAAiB;AACf,WAAO,2BAAQ;AAAEH,MAAAA,QAAQ,EAAEI,wBAAgBD;AAA5B,KAAR,CAAP;AACD;;AAED,MAAID,KAAK,CAACG,MAAV,EAAkB;AAChB,WAAO,2BAAQ;AAAEL,MAAAA,QAAQ,EAAEI,wBAAgBC;AAA5B,KAAR,CAAP;AACD;;AAED,MAAIH,KAAK,CAACxB,OAAV,EAAmB;AACjB,WAAO,2BAAQ;AAAEsB,MAAAA,QAAQ,EAAEI,wBAAgB1B;AAA5B,KAAR,CAAP;AACD;;AAED,MAAIwB,KAAK,CAACI,KAAV,EAAiB;AACf,eAAOX,qBAAP,sBAEI,2BAAQ;AAAEK,MAAAA,QAAQ,EAAEI,wBAAgBE;AAA5B,KAAR,CAFJ;AAID;;AAED,MAAIJ,KAAK,CAACzB,OAAV,EAAmB;AACjB,eAAOkB,qBAAP,4DAII,2BAAQ;AAAEK,MAAAA,QAAQ,EAAEI,wBAAgB3B;AAA5B,KAAR,CAJJ;AAMD;;AAED,MAAIyB,KAAK,CAACK,QAAV,EAAoB;AAClB,eAAOZ,qBAAP,gCAEI,2BAAQ;AAAEK,MAAAA,QAAQ,EAAEI,wBAAgBG;AAA5B,KAAR,CAFJ;AAID;;AAED,SAAO,2BAAQ;AAAEP,IAAAA,QAAQ,EAAEI,wBAAgBI;AAA5B,GAAR,CAAP;AACD,CA5CY,EA8CX,YAAM;AACN;AACA,aAAOb,qBAAP,2GACWc,iBAASC,YAAT,CAAsBP,KADjC,EAGQ,2BAAQ;AAAEH,IAAAA,QAAQ,EAAEI,wBAAgBD;AAA5B,GAAR,CAHR,EASM,2BAAQ;AAAEH,IAAAA,QAAQ,EAAEI,wBAAgBE;AAA5B,GAAR,CATN,EAaM,2BAAQ;AAAEN,IAAAA,QAAQ,EAAEI,wBAAgBC;AAA5B,GAAR,CAbN,EAkBM,2BAAQ;AAAEL,IAAAA,QAAQ,EAAEI,wBAAgBG;AAA5B,GAAR,CAlBN;AAqBD,CArEY,EAuEXI,aAvEW,CAAf;;AA0EA,IAAMrB,cAAc,GAAG,SAAjBA,cAAiB,CACrBX,IADqB,EAEI;AACzB,MAAI,OAAOA,IAAP,KAAgB,QAApB,EAA8B;AAC5B,WAAOiC,0BAAkBjC,IAAlB,CAAP;AACD;;AAED,MAAIkC,KAAK,CAACC,OAAN,CAAcnC,IAAd,CAAJ,EAAyB;AACvB,WAAOA,IAAI,CAACoC,GAAL,CAAS,UAACC,CAAD;AAAA,aAAOJ,0BAAkBI,CAAlB,CAAP;AAAA,KAAT,CAAP;AACD;;AAED,SAAOJ,0BAAkBK,KAAzB;AACD,CAZD","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 { CheckIcon, IconProps } from \"../../svgs\"\nimport { TextVariant } from \"../../Theme\"\nimport { THEME_V3 } 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<IconProps>\n}\n\nexport const Button: React.ForwardRefExoticComponent<\n  ButtonProps & { ref?: React.Ref<HTMLElement> }\n> = React.forwardRef(\n  (\n    {\n      children,\n      loading,\n      success,\n      size = \"large\",\n      onClick,\n      alignItems = \"center\",\n      justifyContent = \"center\",\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        {...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} aria-hidden=\"true\" />\n          )}\n\n          {success && (\n            <CheckIcon fill=\"currentColor\" mr={0.5} aria-hidden=\"true\" />\n          )}\n\n          {children}\n        </Text>\n      </Container>\n    )\n  }\n)\n\nButton.displayName = \"Button\"\n\nButton.defaultProps = {\n  size: \"large\",\n  variant: \"primaryBlack\",\n}\n\ntype ContainerProps = Pick<\n  ButtonProps,\n  \"active\" | \"disabled\" | \"focus\" | \"hover\" | \"loading\" | \"size\" | \"success\"\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_V3.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"],"file":"Button.js"}
+{"version":3,"sources":["../../../src/elements/Button/Button.tsx"],"names":["Button","React","forwardRef","forwardedRef","children","loading","success","size","onClick","alignItems","justifyContent","Icon","rest","ref","handleClick","event","current","blur","getTextVariant","displayName","defaultProps","variant","buttonMixin","css","Container","styled","button","prop","variants","BUTTON_SIZES","props","hover","BUTTON_VARIANTS","active","focus","disabled","default","THEME_V3","mediaQueries","boxMixin","BUTTON_TEXT_SIZES","Array","isArray","map","s","large"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;AAiCO,IAAMA,MAEZ,gBAAGC,eAAMC,UAAN,CACF,gBAYEC,YAZF,EAaK;AAAA,MAXDC,QAWC,QAXDA,QAWC;AAAA,MAVDC,OAUC,QAVDA,OAUC;AAAA,MATDC,OASC,QATDA,OASC;AAAA,uBARDC,IAQC;AAAA,MARDA,IAQC,0BARM,OAQN;AAAA,MAPDC,OAOC,QAPDA,OAOC;AAAA,6BANDC,UAMC;AAAA,MANDA,UAMC,gCANY,QAMZ;AAAA,iCALDC,cAKC;AAAA,MALDA,cAKC,oCALgB,QAKhB;AAAA,MAJDC,IAIC,QAJDA,IAIC;AAAA,MAHEC,IAGF;;AACH,MAAMC,GAAG,GAAG,mBAAiC,IAAjC,CAAZ;;AAEA,MAAMC,WAAW,GAAG,SAAdA,WAAc,CAClBC,KADkB,EAEf;AACH,QAAI,CAACV,OAAD,IAAYG,OAAhB,EAAyB;AACvBA,MAAAA,OAAO,CAACO,KAAD,CAAP;AACD;AACF,GAND;;AAQA,wBAAU,YAAM;AACd,QAAIV,OAAO,IAAIQ,GAAG,CAACG,OAAJ,KAAgB,IAA/B,EAAqC;AAAA;;AACnC,sBAAAH,GAAG,CAACG,OAAJ,8DAAaC,IAAb;AACD;AACF,GAJD,EAIG,CAACZ,OAAD,CAJH;AAMA,sBACE,6BAAC,SAAD;AACE,IAAA,GAAG,EAAE,+BAAYQ,GAAZ,EAAiBV,YAAjB,CADP;AAEE,IAAA,OAAO,EAAEW,WAFX;AAGE,IAAA,IAAI,EAAEP,IAHR;AAIE,IAAA,OAAO,EAAEF,OAJX;AAKE,IAAA,OAAO,EAAEC,OALX;AAME,IAAA,QAAQ,EAAED,OAAO,GAAG,CAAC,CAAJ,GAAQ,CAN3B;AAOE,IAAA,OAAO,EAAC,aAPV;AAQE,IAAA,UAAU,EAAEI,UARd;AASE,IAAA,cAAc,EAAEC;AATlB,KAUME,IAVN,GAYGP,OAAO,iBAAI,6BAAC,gBAAD;AAAS,IAAA,IAAI,EAAEE,IAAf;AAAqB,IAAA,KAAK,EAAC;AAA3B,IAZd,eAcE,6BAAC,UAAD;AACE,IAAA,UAAU,EAAE,CADd;AAEE,IAAA,OAAO,EAAEW,cAAc,CAACX,IAAD,CAFzB;AAGE,IAAA,OAAO,EAAEF,OAAO,GAAG,CAAH,GAAO,CAHzB;AAIE,IAAA,OAAO,EAAC,MAJV;AAKE,IAAA,UAAU,EAAEI,UALd;AAME,IAAA,cAAc,EAAEC,cANlB;AAOE,IAAA,KAAK,EAAC;AAPR,KASG,CAACJ,OAAD,IAAYK,IAAZ,iBACC,6BAAC,IAAD;AAAM,IAAA,IAAI,EAAC,cAAX;AAA0B,IAAA,EAAE,EAAE,GAA9B;AAAmC,mBAAY;AAA/C,IAVJ,EAaGL,OAAO,iBACN,6BAAC,eAAD;AAAW,IAAA,IAAI,EAAC,cAAhB;AAA+B,IAAA,EAAE,EAAE,GAAnC;AAAwC,mBAAY;AAApD,IAdJ,EAiBGF,QAjBH,CAdF,CADF;AAoCD,CAnEC,CAFG;;;AAwEPJ,MAAM,CAACmB,WAAP,GAAqB,QAArB;AAEAnB,MAAM,CAACoB,YAAP,GAAsB;AACpBb,EAAAA,IAAI,EAAE,OADc;AAEpBc,EAAAA,OAAO,EAAE;AAFW,CAAtB;AAUO,IAAMC,WAAW,OAAGC,qBAAH,4OAAjB;;;AAYP,IAAMC,SAAS,GAAGC,0BAAOC,MAAV;AAAA;AAAA;AAAA,kCACXJ,WADW,EAIX,2BAAQ;AAAEK,EAAAA,IAAI,EAAE,MAAR;AAAgBC,EAAAA,QAAQ,EAAEC;AAA1B,CAAR,CAJW,EAMX,UAACC,KAAD,EAAW;AACX;AACA,MAAIA,KAAK,CAACC,KAAV,EAAiB;AACf,WAAO,2BAAQ;AAAEH,MAAAA,QAAQ,EAAEI,wBAAgBD;AAA5B,KAAR,CAAP;AACD;;AAED,MAAID,KAAK,CAACG,MAAV,EAAkB;AAChB,WAAO,2BAAQ;AAAEL,MAAAA,QAAQ,EAAEI,wBAAgBC;AAA5B,KAAR,CAAP;AACD;;AAED,MAAIH,KAAK,CAACxB,OAAV,EAAmB;AACjB,WAAO,2BAAQ;AAAEsB,MAAAA,QAAQ,EAAEI,wBAAgB1B;AAA5B,KAAR,CAAP;AACD;;AAED,MAAIwB,KAAK,CAACI,KAAV,EAAiB;AACf,eAAOX,qBAAP,sBAEI,2BAAQ;AAAEK,MAAAA,QAAQ,EAAEI,wBAAgBE;AAA5B,KAAR,CAFJ;AAID;;AAED,MAAIJ,KAAK,CAACzB,OAAV,EAAmB;AACjB,eAAOkB,qBAAP,4DAII,2BAAQ;AAAEK,MAAAA,QAAQ,EAAEI,wBAAgB3B;AAA5B,KAAR,CAJJ;AAMD;;AAED,MAAIyB,KAAK,CAACK,QAAV,EAAoB;AAClB,eAAOZ,qBAAP,gCAEI,2BAAQ;AAAEK,MAAAA,QAAQ,EAAEI,wBAAgBG;AAA5B,KAAR,CAFJ;AAID;;AAED,SAAO,2BAAQ;AAAEP,IAAAA,QAAQ,EAAEI,wBAAgBI;AAA5B,GAAR,CAAP;AACD,CA5CY,EA8CX,YAAM;AACN;AACA,aAAOb,qBAAP,2GACWc,iBAASC,YAAT,CAAsBP,KADjC,EAGQ,2BAAQ;AAAEH,IAAAA,QAAQ,EAAEI,wBAAgBD;AAA5B,GAAR,CAHR,EASM,2BAAQ;AAAEH,IAAAA,QAAQ,EAAEI,wBAAgBE;AAA5B,GAAR,CATN,EAaM,2BAAQ;AAAEN,IAAAA,QAAQ,EAAEI,wBAAgBC;AAA5B,GAAR,CAbN,EAkBM,2BAAQ;AAAEL,IAAAA,QAAQ,EAAEI,wBAAgBG;AAA5B,GAAR,CAlBN;AAqBD,CArEY,EAuEXI,aAvEW,CAAf;;AA0EA,IAAMrB,cAAc,GAAG,SAAjBA,cAAiB,CACrBX,IADqB,EAEI;AACzB,MAAI,OAAOA,IAAP,KAAgB,QAApB,EAA8B;AAC5B,WAAOiC,0BAAkBjC,IAAlB,CAAP;AACD;;AAED,MAAIkC,KAAK,CAACC,OAAN,CAAcnC,IAAd,CAAJ,EAAyB;AACvB,WAAOA,IAAI,CAACoC,GAAL,CAAS,UAACC,CAAD;AAAA,aAAOJ,0BAAkBI,CAAlB,CAAP;AAAA,KAAT,CAAP;AACD;;AAED,SAAOJ,0BAAkBK,KAAzB;AACD,CAZD","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 { CheckIcon, IconProps } from \"../../svgs\"\nimport { TextVariant } from \"@artsy/palette-tokens/dist/typography/v3\"\nimport { THEME_V3 } 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<IconProps>\n}\n\nexport const Button: React.ForwardRefExoticComponent<\n  ButtonProps & { ref?: React.Ref<HTMLElement> }\n> = React.forwardRef(\n  (\n    {\n      children,\n      loading,\n      success,\n      size = \"large\",\n      onClick,\n      alignItems = \"center\",\n      justifyContent = \"center\",\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        {...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} aria-hidden=\"true\" />\n          )}\n\n          {success && (\n            <CheckIcon fill=\"currentColor\" mr={0.5} aria-hidden=\"true\" />\n          )}\n\n          {children}\n        </Text>\n      </Container>\n    )\n  }\n)\n\nButton.displayName = \"Button\"\n\nButton.defaultProps = {\n  size: \"large\",\n  variant: \"primaryBlack\",\n}\n\ntype ContainerProps = Pick<\n  ButtonProps,\n  \"active\" | \"disabled\" | \"focus\" | \"hover\" | \"loading\" | \"size\" | \"success\"\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_V3.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"],"file":"Button.js"}

package/dist/elements/Cards/{Card/Card.d.ts → Card.d.ts}

@@ -1,6 +1,6 @@
 import React from "react";
-import { ImageProps } from "../../Image";
-import { BoxProps } from "../../Box";
+import { ImageProps } from "../Image";
+import { BoxProps } from "../Box";
 export interface CardProps extends BoxProps {
     image: string | ImageProps;
     title?: string | null;
@@ -8,7 +8,7 @@ export interface CardProps extends BoxProps {
     status?: string | null;
 }
 /**
- * `Card` is a card with one image one tall image, and text for title and subtitle
- * at the bottom.
+ * `Card` is a card with one image one tall image, and text for title
+ * and subtitle at the bottom.
  */
 export declare const Card: React.FC<CardProps>;

package/dist/elements/Cards/{Card/v3.js → Card.js}

@@ -7,15 +7,15 @@ exports.Card = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _ = require("../..");
+var _Image = require("../Image");
 
-var _2 = require("../../..");
+var _Box = require("../Box");
 
-var _Box = require("../../Box");
+var _Text = require("../Text");
 
-var _Image = require("../../Image");
+var _ResponsiveBox = require("../ResponsiveBox");
 
-var _Text = require("../../Text");
+var _helpers = require("../../helpers");
 
 var _excluded = ["image", "title", "subtitle", "status"];
 
@@ -40,7 +40,7 @@ var Card = function Card(_ref) {
 
   return /*#__PURE__*/_react.default.createElement(_Box.Box, _extends({
     maxWidth: 280
-  }, rest), /*#__PURE__*/_react.default.createElement(_.ResponsiveBox, {
+  }, rest), /*#__PURE__*/_react.default.createElement(_ResponsiveBox.ResponsiveBox, {
     aspectWidth: 280,
     aspectHeight: 370,
     maxWidth: "100%"
@@ -67,7 +67,7 @@ var Card = function Card(_ref) {
     width: "100%",
     p: 2,
     style: {
-      textShadow: _2.TEXT_SHADOW
+      textShadow: _helpers.TEXT_SHADOW
     }
   }, status && /*#__PURE__*/_react.default.createElement(_Text.Text, {
     variant: "xs",
@@ -83,4 +83,4 @@ var Card = function Card(_ref) {
 
 exports.Card = Card;
 Card.displayName = "Card";
-//# sourceMappingURL=v3.js.map
+//# sourceMappingURL=Card.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/Cards/Card.tsx"],"names":["Card","image","title","subtitle","status","rest","objectFit","src","textShadow","TEXT_SHADOW"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;AASA;AACA;AACA;AACA;AACO,IAAMA,IAAyB,GAAG,SAA5BA,IAA4B,OAMnC;AAAA,MALJC,KAKI,QALJA,KAKI;AAAA,MAJJC,KAII,QAJJA,KAII;AAAA,MAHJC,QAGI,QAHJA,QAGI;AAAA,MAFJC,MAEI,QAFJA,MAEI;AAAA,MADDC,IACC;;AACJ,sBACE,6BAAC,QAAD;AAAK,IAAA,QAAQ,EAAE;AAAf,KAAwBA,IAAxB,gBACE,6BAAC,4BAAD;AAAe,IAAA,WAAW,EAAE,GAA5B;AAAiC,IAAA,YAAY,EAAE,GAA/C;AAAoD,IAAA,QAAQ,EAAC;AAA7D,kBACE,6BAAC,YAAD;AACE,IAAA,GAAG,EAAC,EADN;AAEE,IAAA,MAAM,EAAC,MAFT;AAGE,IAAA,KAAK,EAAC,MAHR;AAIE,IAAA,KAAK,EAAE;AAAEC,MAAAA,SAAS,EAAE;AAAb;AAJT,KAKO,OAAOL,KAAP,KAAiB,QAAjB,GAA4B;AAAEM,IAAAA,GAAG,EAAEN;AAAP,GAA5B,GAA6CA,KALpD,EADF,eASE,6BAAC,QAAD;AACE,IAAA,QAAQ,EAAC,UADX;AAEE,IAAA,KAAK,EAAC,MAFR;AAGE,IAAA,MAAM,EAAC,MAHT;AAIE,IAAA,GAAG,EAAE,CAJP;AAKE,IAAA,IAAI,EAAE,CALR;AAME,IAAA,UAAU,EAAC;AANb,IATF,eAkBE,6BAAC,QAAD;AACE,IAAA,QAAQ,EAAC,UADX;AAEE,IAAA,MAAM,EAAE,CAFV;AAGE,IAAA,IAAI,EAAE,CAHR;AAIE,IAAA,KAAK,EAAC,MAJR;AAKE,IAAA,CAAC,EAAE,CALL;AAME,IAAA,KAAK,EAAE;AAAEO,MAAAA,UAAU,EAAEC;AAAd;AANT,KAQGL,MAAM,iBACL,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC,IAAd;AAAmB,IAAA,KAAK,EAAC;AAAzB,KACGA,MADH,CATJ,eAcE,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC,YAAd;AAA2B,IAAA,KAAK,EAAC;AAAjC,KACGF,KADH,CAdF,EAkBGC,QAAQ,iBACP,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC,YAAd;AAA2B,IAAA,KAAK,EAAC;AAAjC,KACGA,QADH,CAnBJ,CAlBF,CADF,CADF;AA+CD,CAtDM;;;AAAMH,I","sourcesContent":["import React from \"react\"\nimport { Image, ImageProps } from \"../Image\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Text } from \"../Text\"\nimport { ResponsiveBox } from \"../ResponsiveBox\"\nimport { TEXT_SHADOW } from \"../../helpers\"\n\nexport interface CardProps extends BoxProps {\n  image: string | ImageProps\n  title?: string | null\n  subtitle?: string | null\n  status?: string | null\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<CardProps> = ({\n  image,\n  title,\n  subtitle,\n  status,\n  ...rest\n}) => {\n  return (\n    <Box maxWidth={280} {...rest}>\n      <ResponsiveBox aspectWidth={280} aspectHeight={370} maxWidth=\"100%\">\n        <Image\n          alt=\"\"\n          height=\"100%\"\n          width=\"100%\"\n          style={{ objectFit: \"cover\" }}\n          {...(typeof image === \"string\" ? { src: image } : image)}\n        />\n\n        <Box\n          position=\"absolute\"\n          width=\"100%\"\n          height=\"100%\"\n          top={0}\n          left={0}\n          background=\"linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6))\"\n        />\n\n        <Box\n          position=\"absolute\"\n          bottom={0}\n          left={0}\n          width=\"100%\"\n          p={2}\n          style={{ textShadow: TEXT_SHADOW }}\n        >\n          {status && (\n            <Text variant=\"xs\" color=\"white100\">\n              {status}\n            </Text>\n          )}\n\n          <Text variant=\"sm-display\" color=\"white100\">\n            {title}\n          </Text>\n\n          {subtitle && (\n            <Text variant=\"sm-display\" color=\"black15\">\n              {subtitle}\n            </Text>\n          )}\n        </Box>\n      </ResponsiveBox>\n    </Box>\n  )\n}\n"],"file":"Card.js"}

package/dist/elements/Cards/Cards.story.js

@@ -9,9 +9,9 @@ var _react = _interopRequireDefault(require("react"));
 
 var _storybookStates = require("storybook-states");
 
-var _Card = require("./Card/Card");
+var _Card = require("./Card");
 
-var _TriptychCard = require("./TriptychCard/TriptychCard");
+var _TriptychCard = require("./TriptychCard");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Cards/Cards.story.tsx"],"names":["title","Single","maxWidth","image","undefined","subtitle","status","lazyLoad","src","srcSet","story","parameters","chromatic","diffThreshold","LARGE_SQUARE_IMG","SMALL_SQUARE_IMG","Triptych","images"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;;;eAEe;AACbA,EAAAA,KAAK,EAAE;AADM,C;;;AAIR,IAAMC,MAAM,GAAG,SAATA,MAAS,GAAM;AAC1B,sBACE,6BAAC,uBAAD;AACE,IAAA,MAAM,EAAE,CACN,EADM,EAEN;AAAED,MAAAA,KAAK,EAAE;AAAT,KAFM,EAGN;AAAEE,MAAAA,QAAQ,EAAE;AAAZ,KAHM,EAIN;AAAEC,MAAAA,KAAK,EAAEC;AAAT,KAJM,EAKN;AAAEJ,MAAAA,KAAK,EAAEI,SAAT;AAAoBC,MAAAA,QAAQ,EAAED,SAA9B;AAAyCE,MAAAA,MAAM,EAAEF;AAAjD,KALM;AADV,kBASE,6BAAC,UAAD;AACE,IAAA,KAAK,EAAC,0BADR;AAEE,IAAA,QAAQ,EAAC,iBAFX;AAGE,IAAA,MAAM,EAAC,aAHT;AAIE,IAAA,KAAK,EAAE;AACLG,MAAAA,QAAQ,EAAE,IADL;AAELC,MAAAA,GAAG,EAAE,4CAFA;AAGLC,MAAAA,MAAM,EACJ;AAJG;AAJT,IATF,CADF;AAuBD,CAxBM;;;AAAMR,M;AA0BbA,MAAM,CAACS,KAAP,GAAe;AACbC,EAAAA,UAAU,EAAE;AAAEC,IAAAA,SAAS,EAAE;AAAEC,MAAAA,aAAa,EAAE;AAAjB;AAAb;AADC,CAAf;AAIA,IAAMC,gBAAgB,GAAG;AACvBP,EAAAA,QAAQ,EAAE,IADa;AAEvBC,EAAAA,GAAG,EAAE,4CAFkB;AAGvBC,EAAAA,MAAM,EACJ;AAJqB,CAAzB;AAOA,IAAMM,gBAAgB,GAAG;AACvBR,EAAAA,QAAQ,EAAE,IADa;AAEvBC,EAAAA,GAAG,EAAE,4CAFkB;AAGvBC,EAAAA,MAAM,EACJ;AAJqB,CAAzB;;AAOO,IAAMO,QAAQ,GAAG,SAAXA,QAAW,GAAM;AAC5B,sBACE,6BAAC,uBAAD;AACE,IAAA,MAAM,EAAE,CACN,EADM,EAEN;AAAEC,MAAAA,MAAM,EAAE,CAACH,gBAAD,EAAmBC,gBAAnB;AAAV,KAFM,EAGN;AAAEE,MAAAA,MAAM,EAAE,CAACH,gBAAD;AAAV,KAHM,EAIN;AAAEZ,MAAAA,QAAQ,EAAE;AAAZ,KAJM,EAKN;AAAEF,MAAAA,KAAK,EAAEI,SAAT;AAAoBC,MAAAA,QAAQ,EAAED,SAA9B;AAAyCE,MAAAA,MAAM,EAAEF;AAAjD,KALM;AADV,kBASE,6BAAC,0BAAD;AACE,IAAA,QAAQ,EAAE,GADZ;AAEE,IAAA,MAAM,EAAE,CAACU,gBAAD,EAAmBC,gBAAnB,EAAqCA,gBAArC,CAFV;AAGE,IAAA,KAAK,EAAC,0BAHR;AAIE,IAAA,QAAQ,EAAC,iBAJX;AAKE,IAAA,MAAM,EAAC;AALT,IATF,CADF;AAmBD,CApBM;;;AAAMC,Q;AAsBbA,QAAQ,CAACN,KAAT,GAAiB;AACfC,EAAAA,UAAU,EAAE;AAAEC,IAAAA,SAAS,EAAE;AAAEC,MAAAA,aAAa,EAAE;AAAjB;AAAb;AADG,CAAjB","sourcesContent":["import React from \"react\"\nimport { States } from \"storybook-states\"\nimport { Card, CardProps } from \"./Card/Card\"\nimport { TriptychCard, TriptychCardProps } from \"./TriptychCard/TriptychCard\"\n\nexport default {\n  title: \"Components/Cards\",\n}\n\nexport const Single = () => {\n  return (\n    <States<Partial<CardProps>>\n      states={[\n        {},\n        { title: \"A Much Longer Exhibition Title With Possible Line Break\" },\n        { maxWidth: 400 },\n        { image: undefined },\n        { title: undefined, subtitle: undefined, status: undefined },\n      ]}\n    >\n      <Card\n        title=\"Example Exhibition Title\"\n        subtitle=\"Partner Gallery\"\n        status=\"4 days left\"\n        image={{\n          lazyLoad: true,\n          src: \"https://picsum.photos/seed/example/400/300\",\n          srcSet:\n            \"https://picsum.photos/seed/example/400/300 1x, https://picsum.photos/seed/example/800/600 2x\",\n        }}\n      />\n    </States>\n  )\n}\n\nSingle.story = {\n  parameters: { chromatic: { diffThreshold: 0.2 } },\n}\n\nconst LARGE_SQUARE_IMG = {\n  lazyLoad: true,\n  src: \"https://picsum.photos/seed/example/400/400\",\n  srcSet:\n    \"https://picsum.photos/seed/example/400/400 1x, https://picsum.photos/seed/example/800/800 2x\",\n}\n\nconst SMALL_SQUARE_IMG = {\n  lazyLoad: true,\n  src: \"https://picsum.photos/seed/example/200/200\",\n  srcSet:\n    \"https://picsum.photos/seed/example/200/200 1x, https://picsum.photos/seed/example/400/400 2x\",\n}\n\nexport const Triptych = () => {\n  return (\n    <States<Partial<TriptychCardProps>>\n      states={[\n        {},\n        { images: [LARGE_SQUARE_IMG, SMALL_SQUARE_IMG] },\n        { images: [LARGE_SQUARE_IMG] },\n        { maxWidth: \"100%\" },\n        { title: undefined, subtitle: undefined, status: undefined },\n      ]}\n    >\n      <TriptychCard\n        maxWidth={600}\n        images={[LARGE_SQUARE_IMG, SMALL_SQUARE_IMG, SMALL_SQUARE_IMG]}\n        title=\"Example Exhibition Title\"\n        subtitle=\"Partner Gallery\"\n        status=\"4 days left\"\n      />\n    </States>\n  )\n}\n\nTriptych.story = {\n  parameters: { chromatic: { diffThreshold: 0.2 } },\n}\n"],"file":"Cards.story.js"}
+{"version":3,"sources":["../../../src/elements/Cards/Cards.story.tsx"],"names":["title","Single","maxWidth","image","undefined","subtitle","status","lazyLoad","src","srcSet","story","parameters","chromatic","diffThreshold","LARGE_SQUARE_IMG","SMALL_SQUARE_IMG","Triptych","images"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;;;eAEe;AACbA,EAAAA,KAAK,EAAE;AADM,C;;;AAIR,IAAMC,MAAM,GAAG,SAATA,MAAS,GAAM;AAC1B,sBACE,6BAAC,uBAAD;AACE,IAAA,MAAM,EAAE,CACN,EADM,EAEN;AAAED,MAAAA,KAAK,EAAE;AAAT,KAFM,EAGN;AAAEE,MAAAA,QAAQ,EAAE;AAAZ,KAHM,EAIN;AAAEC,MAAAA,KAAK,EAAEC;AAAT,KAJM,EAKN;AAAEJ,MAAAA,KAAK,EAAEI,SAAT;AAAoBC,MAAAA,QAAQ,EAAED,SAA9B;AAAyCE,MAAAA,MAAM,EAAEF;AAAjD,KALM;AADV,kBASE,6BAAC,UAAD;AACE,IAAA,KAAK,EAAC,0BADR;AAEE,IAAA,QAAQ,EAAC,iBAFX;AAGE,IAAA,MAAM,EAAC,aAHT;AAIE,IAAA,KAAK,EAAE;AACLG,MAAAA,QAAQ,EAAE,IADL;AAELC,MAAAA,GAAG,EAAE,4CAFA;AAGLC,MAAAA,MAAM,EACJ;AAJG;AAJT,IATF,CADF;AAuBD,CAxBM;;;AAAMR,M;AA0BbA,MAAM,CAACS,KAAP,GAAe;AACbC,EAAAA,UAAU,EAAE;AAAEC,IAAAA,SAAS,EAAE;AAAEC,MAAAA,aAAa,EAAE;AAAjB;AAAb;AADC,CAAf;AAIA,IAAMC,gBAAgB,GAAG;AACvBP,EAAAA,QAAQ,EAAE,IADa;AAEvBC,EAAAA,GAAG,EAAE,4CAFkB;AAGvBC,EAAAA,MAAM,EACJ;AAJqB,CAAzB;AAOA,IAAMM,gBAAgB,GAAG;AACvBR,EAAAA,QAAQ,EAAE,IADa;AAEvBC,EAAAA,GAAG,EAAE,4CAFkB;AAGvBC,EAAAA,MAAM,EACJ;AAJqB,CAAzB;;AAOO,IAAMO,QAAQ,GAAG,SAAXA,QAAW,GAAM;AAC5B,sBACE,6BAAC,uBAAD;AACE,IAAA,MAAM,EAAE,CACN,EADM,EAEN;AAAEC,MAAAA,MAAM,EAAE,CAACH,gBAAD,EAAmBC,gBAAnB;AAAV,KAFM,EAGN;AAAEE,MAAAA,MAAM,EAAE,CAACH,gBAAD;AAAV,KAHM,EAIN;AAAEZ,MAAAA,QAAQ,EAAE;AAAZ,KAJM,EAKN;AAAEF,MAAAA,KAAK,EAAEI,SAAT;AAAoBC,MAAAA,QAAQ,EAAED,SAA9B;AAAyCE,MAAAA,MAAM,EAAEF;AAAjD,KALM;AADV,kBASE,6BAAC,0BAAD;AACE,IAAA,QAAQ,EAAE,GADZ;AAEE,IAAA,MAAM,EAAE,CAACU,gBAAD,EAAmBC,gBAAnB,EAAqCA,gBAArC,CAFV;AAGE,IAAA,KAAK,EAAC,0BAHR;AAIE,IAAA,QAAQ,EAAC,iBAJX;AAKE,IAAA,MAAM,EAAC;AALT,IATF,CADF;AAmBD,CApBM;;;AAAMC,Q;AAsBbA,QAAQ,CAACN,KAAT,GAAiB;AACfC,EAAAA,UAAU,EAAE;AAAEC,IAAAA,SAAS,EAAE;AAAEC,MAAAA,aAAa,EAAE;AAAjB;AAAb;AADG,CAAjB","sourcesContent":["import React from \"react\"\nimport { States } from \"storybook-states\"\nimport { Card, CardProps } from \"./Card\"\nimport { TriptychCard, TriptychCardProps } from \"./TriptychCard\"\n\nexport default {\n  title: \"Components/Cards\",\n}\n\nexport const Single = () => {\n  return (\n    <States<Partial<CardProps>>\n      states={[\n        {},\n        { title: \"A Much Longer Exhibition Title With Possible Line Break\" },\n        { maxWidth: 400 },\n        { image: undefined },\n        { title: undefined, subtitle: undefined, status: undefined },\n      ]}\n    >\n      <Card\n        title=\"Example Exhibition Title\"\n        subtitle=\"Partner Gallery\"\n        status=\"4 days left\"\n        image={{\n          lazyLoad: true,\n          src: \"https://picsum.photos/seed/example/400/300\",\n          srcSet:\n            \"https://picsum.photos/seed/example/400/300 1x, https://picsum.photos/seed/example/800/600 2x\",\n        }}\n      />\n    </States>\n  )\n}\n\nSingle.story = {\n  parameters: { chromatic: { diffThreshold: 0.2 } },\n}\n\nconst LARGE_SQUARE_IMG = {\n  lazyLoad: true,\n  src: \"https://picsum.photos/seed/example/400/400\",\n  srcSet:\n    \"https://picsum.photos/seed/example/400/400 1x, https://picsum.photos/seed/example/800/800 2x\",\n}\n\nconst SMALL_SQUARE_IMG = {\n  lazyLoad: true,\n  src: \"https://picsum.photos/seed/example/200/200\",\n  srcSet:\n    \"https://picsum.photos/seed/example/200/200 1x, https://picsum.photos/seed/example/400/400 2x\",\n}\n\nexport const Triptych = () => {\n  return (\n    <States<Partial<TriptychCardProps>>\n      states={[\n        {},\n        { images: [LARGE_SQUARE_IMG, SMALL_SQUARE_IMG] },\n        { images: [LARGE_SQUARE_IMG] },\n        { maxWidth: \"100%\" },\n        { title: undefined, subtitle: undefined, status: undefined },\n      ]}\n    >\n      <TriptychCard\n        maxWidth={600}\n        images={[LARGE_SQUARE_IMG, SMALL_SQUARE_IMG, SMALL_SQUARE_IMG]}\n        title=\"Example Exhibition Title\"\n        subtitle=\"Partner Gallery\"\n        status=\"4 days left\"\n      />\n    </States>\n  )\n}\n\nTriptych.story = {\n  parameters: { chromatic: { diffThreshold: 0.2 } },\n}\n"],"file":"Cards.story.js"}

package/dist/elements/Cards/{TriptychCard/TriptychCard.d.ts → TriptychCard.d.ts}

@@ -1,6 +1,6 @@
 import React from "react";
-import { ImageProps } from "../../Image";
-import { BoxProps } from "../../Box";
+import { ImageProps } from "../Image";
+import { BoxProps } from "../Box";
 declare type Images = ImageProps[] | string[];
 export interface TriptychCardProps extends BoxProps {
     /** 1, 2, or 3 images */

package/dist/elements/Cards/{TriptychCard/v3.js → TriptychCard.js}

@@ -3,21 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TriptychCard = void 0;
+exports.isArrayOfStrings = exports.TriptychCard = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _ResponsiveBox = require("../../ResponsiveBox");
+var _Image = require("../Image");
 
-var _Box = require("../../Box");
+var _Box = require("../Box");
 
-var _Flex = require("../../Flex");
+var _ResponsiveBox = require("../ResponsiveBox");
 
-var _Image = require("../../Image");
+var _Flex = require("../Flex");
 
-var _Text = require("../../Text");
-
-var _TriptychCard = require("./TriptychCard");
+var _Text = require("../Text");
 
 var _excluded = ["images", "title", "subtitle", "status"];
 
@@ -29,6 +27,32 @@ 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; }
 
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+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; }
+
+var isArrayOfStrings = function isArrayOfStrings(images) {
+  return _toConsumableArray(images).every(function (src) {
+    return typeof src === "string";
+  });
+};
+/**
+ * `TriptychCard` is a card with a layout one square image on the left,
+ * one tall or two square images on the right, and text for title and subtitle
+ * at the bottom.
+ */
+
+
+exports.isArrayOfStrings = isArrayOfStrings;
+
 var TriptychCard = function TriptychCard(_ref) {
   var images = _ref.images,
       title = _ref.title,
@@ -36,7 +60,7 @@ var TriptychCard = function TriptychCard(_ref) {
       status = _ref.status,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  var imgs = ((0, _TriptychCard.isArrayOfStrings)(images) ? images.map(function (src) {
+  var imgs = (isArrayOfStrings(images) ? images.map(function (src) {
     return {
       src: src
     };
@@ -166,4 +190,4 @@ var TriptychCard = function TriptychCard(_ref) {
 
 exports.TriptychCard = TriptychCard;
 TriptychCard.displayName = "TriptychCard";
-//# sourceMappingURL=v3.js.map
+//# sourceMappingURL=TriptychCard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/Cards/TriptychCard.tsx"],"names":["isArrayOfStrings","images","every","src","TriptychCard","title","subtitle","status","rest","imgs","map","slice","length","objectFit"],"mappings":"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","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<TriptychCardProps> = ({\n  images,\n  title,\n  subtitle,\n  status,\n  ...rest\n}) => {\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=\"black10\"\n                    borderRight=\"1px solid\"\n                    borderColor=\"white100\"\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=\"black10\"\n                      borderRight=\"1px solid\"\n                      borderColor=\"white100\"\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=\"black10\"\n                        borderLeft=\"1px solid\"\n                        borderColor=\"white100\"\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=\"black10\"\n                      borderRight=\"1px solid\"\n                      borderColor=\"white100\"\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=\"black10\"\n                        borderLeft=\"1px solid\"\n                        borderBottom=\"1px solid\"\n                        borderColor=\"white100\"\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=\"black10\"\n                        borderLeft=\"1px solid\"\n                        borderTop=\"1px solid\"\n                        borderColor=\"white100\"\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=\"black60\">\n          {subtitle}\n        </Text>\n      )}\n    </Box>\n  )\n}\n"],"file":"TriptychCard.js"}

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

@@ -1,3 +1,2 @@
-export * from "./TriptychCard/TriptychCard";
-export * from "./Card/Card";
-export * from "./CardTag";
+export * from "./TriptychCard";
+export * from "./Card";

package/dist/elements/Cards/index.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var _TriptychCard = require("./TriptychCard/TriptychCard");
+var _TriptychCard = require("./TriptychCard");
 
 Object.keys(_TriptychCard).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -17,7 +17,7 @@ Object.keys(_TriptychCard).forEach(function (key) {
   });
 });
 
-var _Card = require("./Card/Card");
+var _Card = require("./Card");
 
 Object.keys(_Card).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -29,17 +29,4 @@ Object.keys(_Card).forEach(function (key) {
     }
   });
 });
-
-var _CardTag = require("./CardTag");
-
-Object.keys(_CardTag).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _CardTag[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _CardTag[key];
-    }
-  });
-});
 //# sourceMappingURL=index.js.map

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

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

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

@@ -78,7 +78,7 @@ var Demo = function Demo(_ref) {
       p: 1,
       textAlign: "center"
     }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
-      variant: "caption"
+      variant: "xs"
     }, i + 1));
   })));
 };
@@ -279,7 +279,8 @@ CustomArrows.story = {
 
 var CustomRailAndCells = function CustomRailAndCells() {
   return /*#__PURE__*/_react.default.createElement(Demo, {
-    widths: ["100%", "100%", "100%", "100%"],
+    widths: ["100%", "100%", "100%", "100%"] // eslint-disable-next-line react/display-name
+    ,
     Cell: /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       return /*#__PURE__*/_react.default.createElement(_2.CarouselCell, _extends({}, props, {
         ref: ref,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Carousel/Carousel.story.tsx"],"names":["LOREM","Demo","widths","Array","from","map","_","heights","rest","width","i","length","title","Simple","Multiple","SinglePage","story","name","SingleOverflowingItem","MultipleOverflowingItems","TwoishPages","ManyPages","VaryingWidths","VaryingHeights","DynamicItems","setWidths","interval","setInterval","prevWidths","clearInterval","parameters","chromatic","disable","CustomArrows","props","transform","CustomRailAndCells","React","forwardRef","ref","CarouselWithText","InitialIndexOnMount","NavigateViaProps","initialIndex","resetIndex","ConditionalChildren"],"mappings":"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","sourcesContent":["import { action } from \"@storybook/addon-actions\"\nimport React, { useEffect, useState } from \"react\"\nimport { Box } from \"../Box\"\nimport { Clickable } from \"../Clickable\"\nimport { Text } from \"../Text\"\nimport {\n  Carousel,\n  CarouselCell,\n  CarouselNext,\n  CarouselPrevious,\n  CarouselProps,\n  CarouselRail,\n} from \"./\"\n\nconst LOREM =\n  \"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!\"\n\nconst Demo = ({\n  widths = Array.from(Array(10)).map((_) => 300),\n  heights = [400],\n  ...rest\n}: {\n  widths?: Array<number | string>\n  heights?: number[]\n} & Omit<CarouselProps, \"children\">) => {\n  return (\n    <Box mx={[2, 4]} my={2}>\n      <Carousel onChange={action(\"onChange\")} {...rest}>\n        {widths.map((width, i) => {\n          return (\n            <Clickable\n              key={i}\n              width={width}\n              height={heights[i % heights.length]}\n              bg=\"black10\"\n              border=\"1px solid\"\n              borderColor=\"black30\"\n              p={1}\n              textAlign=\"center\"\n            >\n              <Text variant=\"caption\">{i + 1}</Text>\n            </Clickable>\n          )\n        })}\n      </Carousel>\n    </Box>\n  )\n}\n\nexport default { title: \"Components/Carousel\" }\n\nexport const Simple = () => {\n  return <Demo />\n}\n\nexport const Multiple = () => {\n  return (\n    <>\n      <Demo />\n      <Demo />\n      <Demo />\n    </>\n  )\n}\n\nexport const SinglePage = () => {\n  const widths = [250, 250]\n  return <Demo widths={widths} />\n}\n\nSinglePage.story = {\n  name: \"Single page\",\n}\n\nexport const SingleOverflowingItem = () => {\n  const widths = [2000]\n  return <Demo widths={widths} />\n}\n\nSingleOverflowingItem.story = {\n  name: \"Single overflowing item\",\n}\n\nexport const MultipleOverflowingItems = () => {\n  const widths = [100, 2000, 1000, 100, 1000]\n  return <Demo widths={widths} />\n}\n\nMultipleOverflowingItems.story = {\n  name: \"Multiple overflowing items\",\n}\n\nexport const TwoishPages = () => {\n  const widths = Array.from(Array(5)).map((_) => 250)\n  return <Demo widths={widths} />\n}\n\nTwoishPages.story = {\n  name: \"Two-(ish) pages\",\n}\n\nexport const ManyPages = () => {\n  const widths = Array.from(Array(100)).map((_) => 250)\n  return <Demo widths={widths} />\n}\n\nManyPages.story = {\n  name: \"Many pages\",\n}\n\nexport const VaryingWidths = () => {\n  const widths = Array.from(Array(25)).map((_, i) => {\n    if (i % 15 === 0) return 400\n    if (i % 5 === 0) return 300\n    if (i % 3 === 0) return 333\n    if (i % 2 === 0) return 275\n    return 250\n  })\n\n  return <Demo widths={widths} />\n}\n\nVaryingWidths.story = {\n  name: \"Varying widths\",\n}\n\nexport const VaryingHeights = () => {\n  const widths = Array.from(Array(25)).map((_, i) => {\n    if (i % 15 === 0) return 400\n    if (i % 5 === 0) return 300\n    if (i % 3 === 0) return 333\n    if (i % 2 === 0) return 275\n    return 250\n  })\n\n  return <Demo widths={widths} heights={[400, 300, 333, 275]} />\n}\n\nVaryingHeights.story = {\n  name: \"Varying heights\",\n}\n\nexport const DynamicItems = () => {\n  const [widths, setWidths] = useState([300])\n  useEffect(() => {\n    const interval = setInterval(() => {\n      setWidths((prevWidths) => [...prevWidths, 300])\n    }, 500)\n    return () => clearInterval(interval)\n  }, [])\n\n  return <Demo widths={widths} />\n}\n\nDynamicItems.story = {\n  name: \"Dynamic items\",\n  parameters: { chromatic: { disable: true } },\n}\n\nexport const CustomArrows = () => {\n  return (\n    <Demo\n      Previous={(props) => (\n        <CarouselPrevious\n          {...props}\n          style={{ transform: \"translateX(0)\" }}\n          bg=\"black5\"\n          color=\"red100\"\n          height={300}\n          opacity={0.75}\n          zIndex={1}\n        />\n      )}\n      Next={(props) => {\n        return (\n          <CarouselNext\n            {...props}\n            style={{ transform: \"translateX(0)\" }}\n            bg=\"black5\"\n            color=\"red100\"\n            height={300}\n            opacity={0.75}\n            zIndex={1}\n          />\n        )\n      }}\n    />\n  )\n}\n\nCustomArrows.story = {\n  name: \"Custom arrows\",\n}\n\nexport const CustomRailAndCells = () => {\n  return (\n    <Demo\n      widths={[\"100%\", \"100%\", \"100%\", \"100%\"]}\n      Cell={React.forwardRef((props, ref) => {\n        return (\n          <CarouselCell\n            {...props}\n            ref={ref as any}\n            display=\"inline-flex\"\n            width=\"100%\"\n            pr={0}\n          />\n        )\n      })}\n      Rail={(props) => {\n        return <CarouselRail {...props} transition=\"none\" display=\"block\" />\n      }}\n    />\n  )\n}\n\nCustomRailAndCells.story = {\n  name: \"Custom rail and cells\",\n}\n\nexport const CarouselWithText = () => {\n  return (\n    <Box mx={[2, 4]} my={2}>\n      <Carousel>\n        <Text bg=\"black10\" p={1} width={300}>\n          {LOREM}\n        </Text>\n\n        <Text bg=\"black10\" p={1} width={300}>\n          {LOREM}\n        </Text>\n\n        <Text bg=\"black10\" p={1} width={300}>\n          {LOREM}\n        </Text>\n\n        <Text bg=\"black10\" p={1} width={300}>\n          {LOREM}\n        </Text>\n\n        <Text bg=\"black10\" p={1} width={300}>\n          {LOREM}\n        </Text>\n\n        <Text bg=\"black10\" p={1} width={300}>\n          {LOREM}\n        </Text>\n      </Carousel>\n    </Box>\n  )\n}\n\nCarouselWithText.story = {\n  name: \"Carousel with text\",\n}\n\nexport const InitialIndexOnMount = () => {\n  return <Demo initialIndex={3} />\n}\n\nInitialIndexOnMount.story = {\n  name: \"initialIndex on mount\",\n}\n\nexport const NavigateViaProps = () => {\n  const [initialIndex, resetIndex] = useState(0)\n  return (\n    <Box>\n      <Demo initialIndex={initialIndex} onChange={resetIndex} />\n      <Box display=\"flex\" justifyContent=\"space-around\">\n        <Clickable onClick={() => resetIndex(0)}>Navigate to page 1</Clickable>\n        <Clickable onClick={() => resetIndex(1)}>Navigate to page 2</Clickable>\n        <Clickable onClick={() => resetIndex(2)}>Navigate to page 3</Clickable>\n        <Clickable onClick={() => resetIndex(3)}>Navigate to page 4</Clickable>\n        <Clickable onClick={() => resetIndex(4)}>Navigate to page 5</Clickable>\n      </Box>\n    </Box>\n  )\n}\n\nNavigateViaProps.story = {\n  name: \"Navigate via props\",\n}\n\nexport const ConditionalChildren = () => {\n  return (\n    <Box mx={[2, 4]} my={2}>\n      <Carousel>\n        <Box bg=\"black10\" width={300} height={300} p={2}>\n          <Text variant=\"xs\">1</Text>\n        </Box>\n\n        <Box bg=\"black10\" width={300} height={300} p={2}>\n          <Text variant=\"xs\">2</Text>\n        </Box>\n\n        {false && (\n          <Box bg=\"black10\" width={300} height={300} p={2}>\n            <Text variant=\"xs\">3</Text>\n          </Box>\n        )}\n\n        {true && (\n          <Box bg=\"black10\" width={300} height={300} p={2}>\n            <Text variant=\"xs\">4</Text>\n          </Box>\n        )}\n\n        <Box bg=\"black10\" width={300} height={300} p={2}>\n          <Text variant=\"xs\">5</Text>\n        </Box>\n\n        <Box bg=\"black10\" width={300} height={300} p={2}>\n          <Text variant=\"xs\">6</Text>\n        </Box>\n      </Carousel>\n    </Box>\n  )\n}\n"],"file":"Carousel.story.js"}
+{"version":3,"sources":["../../../src/elements/Carousel/Carousel.story.tsx"],"names":["LOREM","Demo","widths","Array","from","map","_","heights","rest","width","i","length","title","Simple","Multiple","SinglePage","story","name","SingleOverflowingItem","MultipleOverflowingItems","TwoishPages","ManyPages","VaryingWidths","VaryingHeights","DynamicItems","setWidths","interval","setInterval","prevWidths","clearInterval","parameters","chromatic","disable","CustomArrows","props","transform","CustomRailAndCells","React","forwardRef","ref","CarouselWithText","InitialIndexOnMount","NavigateViaProps","initialIndex","resetIndex","ConditionalChildren"],"mappings":"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","sourcesContent":["import { action } from \"@storybook/addon-actions\"\nimport React, { useEffect, useState } from \"react\"\nimport { Box } from \"../Box\"\nimport { Clickable } from \"../Clickable\"\nimport { Text } from \"../Text\"\nimport {\n  Carousel,\n  CarouselCell,\n  CarouselNext,\n  CarouselPrevious,\n  CarouselProps,\n  CarouselRail,\n} from \"./\"\n\nconst LOREM =\n  \"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!\"\n\nconst Demo = ({\n  widths = Array.from(Array(10)).map((_) => 300),\n  heights = [400],\n  ...rest\n}: {\n  widths?: Array<number | string>\n  heights?: number[]\n} & Omit<CarouselProps, \"children\">) => {\n  return (\n    <Box mx={[2, 4]} my={2}>\n      <Carousel onChange={action(\"onChange\")} {...rest}>\n        {widths.map((width, i) => {\n          return (\n            <Clickable\n              key={i}\n              width={width}\n              height={heights[i % heights.length]}\n              bg=\"black10\"\n              border=\"1px solid\"\n              borderColor=\"black30\"\n              p={1}\n              textAlign=\"center\"\n            >\n              <Text variant=\"xs\">{i + 1}</Text>\n            </Clickable>\n          )\n        })}\n      </Carousel>\n    </Box>\n  )\n}\n\nexport default { title: \"Components/Carousel\" }\n\nexport const Simple = () => {\n  return <Demo />\n}\n\nexport const Multiple = () => {\n  return (\n    <>\n      <Demo />\n      <Demo />\n      <Demo />\n    </>\n  )\n}\n\nexport const SinglePage = () => {\n  const widths = [250, 250]\n  return <Demo widths={widths} />\n}\n\nSinglePage.story = {\n  name: \"Single page\",\n}\n\nexport const SingleOverflowingItem = () => {\n  const widths = [2000]\n  return <Demo widths={widths} />\n}\n\nSingleOverflowingItem.story = {\n  name: \"Single overflowing item\",\n}\n\nexport const MultipleOverflowingItems = () => {\n  const widths = [100, 2000, 1000, 100, 1000]\n  return <Demo widths={widths} />\n}\n\nMultipleOverflowingItems.story = {\n  name: \"Multiple overflowing items\",\n}\n\nexport const TwoishPages = () => {\n  const widths = Array.from(Array(5)).map((_) => 250)\n  return <Demo widths={widths} />\n}\n\nTwoishPages.story = {\n  name: \"Two-(ish) pages\",\n}\n\nexport const ManyPages = () => {\n  const widths = Array.from(Array(100)).map((_) => 250)\n  return <Demo widths={widths} />\n}\n\nManyPages.story = {\n  name: \"Many pages\",\n}\n\nexport const VaryingWidths = () => {\n  const widths = Array.from(Array(25)).map((_, i) => {\n    if (i % 15 === 0) return 400\n    if (i % 5 === 0) return 300\n    if (i % 3 === 0) return 333\n    if (i % 2 === 0) return 275\n    return 250\n  })\n\n  return <Demo widths={widths} />\n}\n\nVaryingWidths.story = {\n  name: \"Varying widths\",\n}\n\nexport const VaryingHeights = () => {\n  const widths = Array.from(Array(25)).map((_, i) => {\n    if (i % 15 === 0) return 400\n    if (i % 5 === 0) return 300\n    if (i % 3 === 0) return 333\n    if (i % 2 === 0) return 275\n    return 250\n  })\n\n  return <Demo widths={widths} heights={[400, 300, 333, 275]} />\n}\n\nVaryingHeights.story = {\n  name: \"Varying heights\",\n}\n\nexport const DynamicItems = () => {\n  const [widths, setWidths] = useState([300])\n  useEffect(() => {\n    const interval = setInterval(() => {\n      setWidths((prevWidths) => [...prevWidths, 300])\n    }, 500)\n    return () => clearInterval(interval)\n  }, [])\n\n  return <Demo widths={widths} />\n}\n\nDynamicItems.story = {\n  name: \"Dynamic items\",\n  parameters: { chromatic: { disable: true } },\n}\n\nexport const CustomArrows = () => {\n  return (\n    <Demo\n      Previous={(props) => (\n        <CarouselPrevious\n          {...props}\n          style={{ transform: \"translateX(0)\" }}\n          bg=\"black5\"\n          color=\"red100\"\n          height={300}\n          opacity={0.75}\n          zIndex={1}\n        />\n      )}\n      Next={(props) => {\n        return (\n          <CarouselNext\n            {...props}\n            style={{ transform: \"translateX(0)\" }}\n            bg=\"black5\"\n            color=\"red100\"\n            height={300}\n            opacity={0.75}\n            zIndex={1}\n          />\n        )\n      }}\n    />\n  )\n}\n\nCustomArrows.story = {\n  name: \"Custom arrows\",\n}\n\nexport const CustomRailAndCells = () => {\n  return (\n    <Demo\n      widths={[\"100%\", \"100%\", \"100%\", \"100%\"]}\n      // eslint-disable-next-line react/display-name\n      Cell={React.forwardRef((props, ref) => {\n        return (\n          <CarouselCell\n            {...props}\n            ref={ref as any}\n            display=\"inline-flex\"\n            width=\"100%\"\n            pr={0}\n          />\n        )\n      })}\n      Rail={(props) => {\n        return <CarouselRail {...props} transition=\"none\" display=\"block\" />\n      }}\n    />\n  )\n}\n\nCustomRailAndCells.story = {\n  name: \"Custom rail and cells\",\n}\n\nexport const CarouselWithText = () => {\n  return (\n    <Box mx={[2, 4]} my={2}>\n      <Carousel>\n        <Text bg=\"black10\" p={1} width={300}>\n          {LOREM}\n        </Text>\n\n        <Text bg=\"black10\" p={1} width={300}>\n          {LOREM}\n        </Text>\n\n        <Text bg=\"black10\" p={1} width={300}>\n          {LOREM}\n        </Text>\n\n        <Text bg=\"black10\" p={1} width={300}>\n          {LOREM}\n        </Text>\n\n        <Text bg=\"black10\" p={1} width={300}>\n          {LOREM}\n        </Text>\n\n        <Text bg=\"black10\" p={1} width={300}>\n          {LOREM}\n        </Text>\n      </Carousel>\n    </Box>\n  )\n}\n\nCarouselWithText.story = {\n  name: \"Carousel with text\",\n}\n\nexport const InitialIndexOnMount = () => {\n  return <Demo initialIndex={3} />\n}\n\nInitialIndexOnMount.story = {\n  name: \"initialIndex on mount\",\n}\n\nexport const NavigateViaProps = () => {\n  const [initialIndex, resetIndex] = useState(0)\n  return (\n    <Box>\n      <Demo initialIndex={initialIndex} onChange={resetIndex} />\n      <Box display=\"flex\" justifyContent=\"space-around\">\n        <Clickable onClick={() => resetIndex(0)}>Navigate to page 1</Clickable>\n        <Clickable onClick={() => resetIndex(1)}>Navigate to page 2</Clickable>\n        <Clickable onClick={() => resetIndex(2)}>Navigate to page 3</Clickable>\n        <Clickable onClick={() => resetIndex(3)}>Navigate to page 4</Clickable>\n        <Clickable onClick={() => resetIndex(4)}>Navigate to page 5</Clickable>\n      </Box>\n    </Box>\n  )\n}\n\nNavigateViaProps.story = {\n  name: \"Navigate via props\",\n}\n\nexport const ConditionalChildren = () => {\n  return (\n    <Box mx={[2, 4]} my={2}>\n      <Carousel>\n        <Box bg=\"black10\" width={300} height={300} p={2}>\n          <Text variant=\"xs\">1</Text>\n        </Box>\n\n        <Box bg=\"black10\" width={300} height={300} p={2}>\n          <Text variant=\"xs\">2</Text>\n        </Box>\n\n        {false && (\n          <Box bg=\"black10\" width={300} height={300} p={2}>\n            <Text variant=\"xs\">3</Text>\n          </Box>\n        )}\n\n        {true && (\n          <Box bg=\"black10\" width={300} height={300} p={2}>\n            <Text variant=\"xs\">4</Text>\n          </Box>\n        )}\n\n        <Box bg=\"black10\" width={300} height={300} p={2}>\n          <Text variant=\"xs\">5</Text>\n        </Box>\n\n        <Box bg=\"black10\" width={300} height={300} p={2}>\n          <Text variant=\"xs\">6</Text>\n        </Box>\n      </Carousel>\n    </Box>\n  )\n}\n"],"file":"Carousel.story.js"}

package/dist/elements/Checkbox/Check.js

@@ -11,13 +11,9 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _svgs = require("../../svgs");
 
-var _Theme = require("../../Theme");
-
 var _Box = require("../Box");
 
-var _v = require("./tokens/v2");
-
-var _v2 = require("./tokens/v3");
+var _tokens = require("./tokens");
 
 var _excluded = ["disabled", "selected"];
 
@@ -35,17 +31,9 @@ var Check = function Check(_ref) {
       selected = _ref.selected,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  var tokens = (0, _Theme.useThemeConfig)({
-    v2: {
-      border: 1
-    },
-    v3: {
-      border: "1px solid"
-    }
-  });
   return /*#__PURE__*/_react.default.createElement(Container, _extends({
     mr: 1,
-    border: tokens.border,
+    border: "1px solid",
     disabled: disabled,
     selected: selected
   }, rest), /*#__PURE__*/_react.default.createElement(_svgs.CheckIcon, {
@@ -60,27 +48,22 @@ var Container = (0, _styledComponents.default)(_Box.Box).withConfig({
   displayName: "Check__Container",
   componentId: "mkx5fy-0"
 })(["width:20px;height:20px;display:flex;align-items:center;justify-content:center;transition:background-color 0.25s,border-color 0.25s,color 0.25s;", ";"], function (props) {
-  var modes = (0, _Theme.getThemeConfig)(props, {
-    v2: _v.CHECK_STATES,
-    v3: _v2.CHECK_STATES
-  });
-
   var mode = function () {
     switch (true) {
       case props.focus:
-        return modes.focus;
+        return _tokens.CHECK_STATES.focus;
 
       case props.hover:
-        return modes.hover;
+        return _tokens.CHECK_STATES.hover;
 
       case props.error:
-        return modes.error;
+        return _tokens.CHECK_STATES.error;
 
       case props.disabled:
-        return modes.disabled;
+        return _tokens.CHECK_STATES.disabled;
 
       default:
-        return modes.default;
+        return _tokens.CHECK_STATES.default;
     }
   }();
 

package/dist/elements/Checkbox/Check.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Checkbox/Check.tsx"],"names":["Check","disabled","selected","rest","tokens","v2","border","v3","Container","Box","props","modes","V2_STATES","V3_STATES","mode","focus","hover","error","default","resting"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAUA;AACO,IAAMA,KAA2B,GAAG,SAA9BA,KAA8B,OAIrC;AAAA,MAHJC,QAGI,QAHJA,QAGI;AAAA,MAFJC,QAEI,QAFJA,QAEI;AAAA,MADDC,IACC;;AACJ,MAAMC,MAAM,GAAG,2BAAe;AAC5BC,IAAAA,EAAE,EAAE;AAAEC,MAAAA,MAAM,EAAE;AAAV,KADwB;AAE5BC,IAAAA,EAAE,EAAE;AAAED,MAAAA,MAAM,EAAE;AAAV;AAFwB,GAAf,CAAf;AAKA,sBACE,6BAAC,SAAD;AACE,IAAA,EAAE,EAAE,CADN;AAEE,IAAA,MAAM,EAAEF,MAAM,CAACE,MAFjB;AAGE,IAAA,QAAQ,EAAEL,QAHZ;AAIE,IAAA,QAAQ,EAAEC;AAJZ,KAKMC,IALN,gBAOE,6BAAC,eAAD;AAAW,uBAAX;AAAuB,IAAA,IAAI,EAAE;AAA7B,IAPF,CADF;AAWD,CArBM;;;AAAMH,K;AAuBb,IAAMQ,SAAS,GAAG,+BAAOC,QAAP,CAAH;AAAA;AAAA;AAAA,6JAQX,UAACC,KAAD,EAAW;AACX,MAAMC,KAAK,GAAG,2BAAeD,KAAf,EAAsB;AAClCL,IAAAA,EAAE,EAAEO,eAD8B;AAElCL,IAAAA,EAAE,EAAEM;AAF8B,GAAtB,CAAd;;AAKA,MAAMC,IAAI,GAAI,YAAM;AAClB,YAAQ,IAAR;AACE,WAAKJ,KAAK,CAACK,KAAX;AACE,eAAOJ,KAAK,CAACI,KAAb;;AACF,WAAKL,KAAK,CAACM,KAAX;AACE,eAAOL,KAAK,CAACK,KAAb;;AACF,WAAKN,KAAK,CAACO,KAAX;AACE,eAAON,KAAK,CAACM,KAAb;;AACF,WAAKP,KAAK,CAACT,QAAX;AACE,eAAOU,KAAK,CAACV,QAAb;;AACF;AACE,eAAOU,KAAK,CAACO,OAAb;AAVJ;AAYD,GAbY,EAAb;;AAeA,SAAOR,KAAK,CAACR,QAAN,GAAiBY,IAAI,CAACZ,QAAtB,GAAiCY,IAAI,CAACK,OAA7C;AACD,CA9BY,CAAf","sourcesContent":["import React from \"react\"\nimport styled from \"styled-components\"\nimport { CheckIcon } from \"../../svgs\"\nimport { getThemeConfig, useThemeConfig } from \"../../Theme\"\nimport { Box } from \"../Box\"\nimport { CHECK_STATES as V2_STATES } from \"./tokens/v2\"\nimport { CHECK_STATES as V3_STATES } from \"./tokens/v3\"\n\nexport interface CheckProps {\n  disabled?: boolean\n  error?: boolean\n  hover?: boolean\n  focus?: boolean\n  selected?: boolean\n}\n\n/** Toggeable check mark */\nexport const Check: React.FC<CheckProps> = ({\n  disabled,\n  selected,\n  ...rest\n}) => {\n  const tokens = useThemeConfig({\n    v2: { border: 1 },\n    v3: { border: \"1px solid\" },\n  })\n\n  return (\n    <Container\n      mr={1}\n      border={tokens.border}\n      disabled={disabled}\n      selected={selected}\n      {...rest}\n    >\n      <CheckIcon aria-hidden fill={\"currentColor\" as any} />\n    </Container>\n  )\n}\n\nconst Container = styled(Box)<CheckProps>`\n  width: 20px;\n  height: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: background-color 0.25s, border-color 0.25s, color 0.25s;\n\n  ${(props) => {\n    const modes = getThemeConfig(props, {\n      v2: V2_STATES,\n      v3: V3_STATES,\n    })\n\n    const mode = (() => {\n      switch (true) {\n        case props.focus:\n          return modes.focus\n        case props.hover:\n          return modes.hover\n        case props.error:\n          return modes.error\n        case props.disabled:\n          return modes.disabled\n        default:\n          return modes.default\n      }\n    })()\n\n    return props.selected ? mode.selected : mode.resting\n  }};\n`\n"],"file":"Check.js"}
+{"version":3,"sources":["../../../src/elements/Checkbox/Check.tsx"],"names":["Check","disabled","selected","rest","Container","Box","props","mode","focus","CHECK_STATES","hover","error","default","resting"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAUA;AACO,IAAMA,KAA2B,GAAG,SAA9BA,KAA8B,OAIrC;AAAA,MAHJC,QAGI,QAHJA,QAGI;AAAA,MAFJC,QAEI,QAFJA,QAEI;AAAA,MADDC,IACC;;AACJ,sBACE,6BAAC,SAAD;AACE,IAAA,EAAE,EAAE,CADN;AAEE,IAAA,MAAM,EAAC,WAFT;AAGE,IAAA,QAAQ,EAAEF,QAHZ;AAIE,IAAA,QAAQ,EAAEC;AAJZ,KAKMC,IALN,gBAOE,6BAAC,eAAD;AAAW,uBAAX;AAAuB,IAAA,IAAI,EAAE;AAA7B,IAPF,CADF;AAWD,CAhBM;;;AAAMH,K;AAkBb,IAAMI,SAAS,GAAG,+BAAOC,QAAP,CAAH;AAAA;AAAA;AAAA,6JAQX,UAACC,KAAD,EAAW;AACX,MAAMC,IAAI,GAAI,YAAM;AAClB,YAAQ,IAAR;AACE,WAAKD,KAAK,CAACE,KAAX;AACE,eAAOC,qBAAaD,KAApB;;AACF,WAAKF,KAAK,CAACI,KAAX;AACE,eAAOD,qBAAaC,KAApB;;AACF,WAAKJ,KAAK,CAACK,KAAX;AACE,eAAOF,qBAAaE,KAApB;;AACF,WAAKL,KAAK,CAACL,QAAX;AACE,eAAOQ,qBAAaR,QAApB;;AACF;AACE,eAAOQ,qBAAaG,OAApB;AAVJ;AAYD,GAbY,EAAb;;AAeA,SAAON,KAAK,CAACJ,QAAN,GAAiBK,IAAI,CAACL,QAAtB,GAAiCK,IAAI,CAACM,OAA7C;AACD,CAzBY,CAAf","sourcesContent":["import React from \"react\"\nimport styled from \"styled-components\"\nimport { CheckIcon } from \"../../svgs\"\nimport { Box } from \"../Box\"\nimport { CHECK_STATES } from \"./tokens\"\n\nexport interface CheckProps {\n  disabled?: boolean\n  error?: boolean\n  hover?: boolean\n  focus?: boolean\n  selected?: boolean\n}\n\n/** Toggeable check mark */\nexport const Check: React.FC<CheckProps> = ({\n  disabled,\n  selected,\n  ...rest\n}) => {\n  return (\n    <Container\n      mr={1}\n      border=\"1px solid\"\n      disabled={disabled}\n      selected={selected}\n      {...rest}\n    >\n      <CheckIcon aria-hidden fill={\"currentColor\" as any} />\n    </Container>\n  )\n}\n\nconst Container = styled(Box)<CheckProps>`\n  width: 20px;\n  height: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: background-color 0.25s, border-color 0.25s, color 0.25s;\n\n  ${(props) => {\n    const mode = (() => {\n      switch (true) {\n        case props.focus:\n          return CHECK_STATES.focus\n        case props.hover:\n          return CHECK_STATES.hover\n        case props.error:\n          return CHECK_STATES.error\n        case props.disabled:\n          return CHECK_STATES.disabled\n        default:\n          return CHECK_STATES.default\n      }\n    })()\n\n    return props.selected ? mode.selected : mode.resting\n  }};\n`\n"],"file":"Check.js"}

package/dist/elements/Checkbox/Checkbox.js

@@ -13,8 +13,6 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _isText = require("../../helpers/isText");
 
-var _Theme = require("../../Theme");
-
 var _Box = require("../Box");
 
 var _Flex = require("../Flex");
@@ -23,9 +21,7 @@ var _Text = require("../Text");
 
 var _Check = require("./Check");
 
-var _v = require("./tokens/v2");
-
-var _v2 = require("./tokens/v3");
+var _tokens = require("./tokens");
 
 var _excluded = ["selected", "children", "error", "disabled", "hover", "focus", "onSelect", "onClick"];
 
@@ -54,16 +50,6 @@ var Checkbox = function Checkbox(_ref) {
       onClick = _ref.onClick,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  var tokens = (0, _Theme.useThemeConfig)({
-    v2: {
-      verticalMargin: 0.5,
-      variant: "text"
-    },
-    v3: {
-      verticalMargin: 0,
-      variant: "sm-display"
-    }
-  });
   var isSelectable = !disabled && onSelect !== undefined;
 
   var handleClick = function handleClick(event) {
@@ -84,7 +70,6 @@ var Checkbox = function Checkbox(_ref) {
   };
 
   return /*#__PURE__*/_react.default.createElement(Container, _extends({
-    my: tokens.verticalMargin,
     display: "flex",
     alignItems: "center",
     onClick: handleClick,
@@ -107,7 +92,7 @@ var Checkbox = function Checkbox(_ref) {
     alignItems: "center",
     flex: 1
   }, (0, _isText.isText)(children) ? /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    variant: tokens.variant,
+    variant: "sm-display",
     lineHeight: 1
   }, children) : children));
 };
@@ -118,16 +103,6 @@ var Container = (0, _styledComponents.default)(_Box.Box).withConfig({
   displayName: "Checkbox__Container",
   componentId: "j97vg8-0"
 })(["user-select:none;", ""], function (props) {
-  var states = (0, _Theme.getThemeConfig)(props, {
-    v2: {
-      checkbox: _v.CHECKBOX_STATES,
-      check: _v.CHECK_STATES
-    },
-    v3: {
-      checkbox: _v2.CHECKBOX_STATES,
-      check: _v2.CHECK_STATES
-    }
-  });
-  return (0, _styledComponents.css)(["", " ", " ", " ", " ", " &:hover{", "}&:focus{", " > div:first-of-type{", "}}&:disabled{", "}"], props.selected ? states.checkbox.selected : states.checkbox.default, props.focus && states.checkbox.focus, props.hover && states.checkbox.hover, props.disabled && states.checkbox.disabled, props.error && states.checkbox.error, !props.error && (0, _styledComponents.css)(["", " > div:first-of-type{", "}"], states.checkbox.hover, props.selected ? states.check.hover.selected : states.check.hover.resting), states.checkbox.focus, props.selected ? states.check.focus.selected : states.check.focus.resting, states.checkbox.disabled);
+  return (0, _styledComponents.css)(["", " ", " ", " ", " ", " &:hover{", "}&:focus{", " > div:first-of-type{", "}}&:disabled{", "}"], props.selected ? _tokens.CHECKBOX_STATES.selected : _tokens.CHECKBOX_STATES.default, props.focus && _tokens.CHECKBOX_STATES.focus, props.hover && _tokens.CHECKBOX_STATES.hover, props.disabled && _tokens.CHECKBOX_STATES.disabled, props.error && _tokens.CHECKBOX_STATES.error, !props.error && (0, _styledComponents.css)(["", " > div:first-of-type{", "}"], _tokens.CHECKBOX_STATES.hover, props.selected ? _tokens.CHECK_STATES.hover.selected : _tokens.CHECK_STATES.hover.resting), _tokens.CHECKBOX_STATES.focus, props.selected ? _tokens.CHECK_STATES.focus.selected : _tokens.CHECK_STATES.focus.resting, _tokens.CHECKBOX_STATES.disabled);
 });
 //# sourceMappingURL=Checkbox.js.map